import { Button, ButtonGroup, Stack } from '@mui/material'; import Box from '@mui/material/Box'; import { useEffect, useState } from 'react'; import { AgGridReact } from 'ag-grid-react'; import useAxiosPrivate from '../../utils/useAxiosPrivate'; import EditNoteRoundedIcon from '@mui/icons-material/EditNoteRounded'; import DeleteSweepRoundedIcon from '@mui/icons-material/DeleteSweepRounded'; // import ImportExportRoundedIcon from '@mui/icons-material/ImportExportRounded'; import AddCircleOutlineRoundedIcon from '@mui/icons-material/AddCircleOutlineRounded'; // import Popup from './Popup'; import VaccineForm from './VaccineForm'; // import { VaccineValidationForm } from './Validationform'; import { useFormik } from "formik"; import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf'; import DownloadIcon from '@mui/icons-material/Download'; import ExcelJS from 'exceljs'; import jsPDF from 'jspdf'; import 'jspdf-autotable'; import PropTypes from "prop-types"; // new import 'ag-grid-community/styles/ag-grid.css'; import 'ag-grid-community/styles/ag-theme-alpine.css'; import * as Yup from 'yup'; import { useNavigate } from 'react-router-dom'; const VaccineValidationForm = Yup.object({ vaccineName: Yup.string().required("Please enter Vaccine Name"), vaccineCompany: Yup.string().required("Please Enter Company Name"), vaccineDesc: Yup.string().required("Please Enter Vaccine Description"), }); const AppointmentHistory = () => { const navigate = useNavigate(); const [rowData, setRowData] = useState([]); const [colDefs, setColDefs] = useState([]); const [openPopup, setOpenPopup] = useState(false); const axiosClientPrivate = useAxiosPrivate(); const [id,setId] = useState(1); const [showupdate,setShowupdate] = useState(false); const [fetchTrigger, setFetchTrigger] = useState(0); const [paginationPageSize, setPaginationPageSize] = useState(100); const [isLoading,setIsLoading] = useState(false); // const [change, setChange] = useState("";) // console.log("check",paginationPageSize); // const initialValues = { // vaccineName:"", // vaccineCompany:"", // vaccineDesc:"" // }; // function formatDate(dateString) { // if (dateString != null || dateString != undefined || dateString != "") { // const [year, month, day] = dateString.split("-"); // return `${day}-${month}-${year}`; // } // } // const formateDate = formatDate('2024-10-08') console.log('appointment history'); const { values, touched, errors, handleBlur, handleChange, setFieldValue, handleSubmit, resetForm } = useFormik({ initialValues: { }, // validationSchema: VaccineValidationForm, // onSubmit: (values, action) => { // console.log(values); // action.resetForm(); // }, onSubmit: async (values, {resetForm}) => { try { const response = await axiosClientPrivate.post('/vaccines', values); toast.success("Saved Successfully!",{ position:"top-center" }); // getting id(key,value) of last index // const id = rowData[rowData.length-1].buId; // const obj = { // buId : id+1, // ...values // } // console.log(obj); // setRowData(rowData => [...rowData, obj]); setFetchTrigger(prev => prev+1); console.log('Response:', response.data); resetForm(); } catch (error) { console.log(values); console.error('Error:', error); } }, }); const handleEdit = (id) => { const empEditId = id; navigate('/edit-employee-details', { state: { empEditId } }); // try { // const response = await axiosClientPrivate.get(`/procurements/${id}`); // console.log("procurement edit",response.data); // setFieldValue("id",response.data.id); // setFieldValue("vaccineName",response.data.vaccineName); // setFieldValue("vaccineCompany",response.data.vaccineCompany); // setFieldValue("vaccineDesc",response.data.vaccineDesc); // setFieldValue("lastModified", response.data.lastModified); // setFieldValue("modifiedBy", response.data.modifiedBy); // setId(id); // setShowupdate(true); // setOpenPopup(true); // } catch (error) { // console.error('Error fetching item for edit:', error); // } }; const handleUpdate = async (id)=> { // alert(id); const update = values; try{ console.log(values); await axiosClientPrivate.put(`/procurements/procurement-indent/${id}`,update); toast.success("Updated Successfully!",{ position:"top-center", autoClose: 3000, }); resetForm(); // setRowData(rowData => [...rowData,values]); setFetchTrigger(prev => prev+1); } catch(err){ console.log(values); console.log(err); } } // to delete a row const handleDelete = async (id) => { alert(id) if(window.confirm('Are you sure you want to delete this data?')){ try { await axiosClientPrivate.delete(`/patients/${id}`); setFetchTrigger(prev => prev+1); } catch (error) { console.error('Error deleting row:', error); } } }; // const CustomActionComponent = ({id}) => { // CustomActionComponent.propTypes = { // id: PropTypes.number.isRequired, // }; // return
//
// }; // const paginationPageSizeSelector = [50, 100, 200, 500]; const pageSizeOptions = [2, 4, 8, 10]; const formatDate = (dateString) => { const date = new Date(dateString); return date.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric', }).replace(/ /g, '-'); }; const formatMonth = (dateString) => { const date = new Date(dateString); return date.toLocaleDateString('en-GB', { month: 'short', year: 'numeric', }).replace(' ', '-'); }; useEffect(() => { const controller = new AbortController(); const getAllOhc = async () => { try { const response = await axiosClientPrivate.get(`/patients?page=0&size=${paginationPageSize}`, { signal: controller.signal }); const items = response.data.content; console.log("patients",items); // if(items?.length > 0){ // const chaneItems = items.map((item,index)=>{ // return { // ...item, // Sr : index + 1, // isFirstAid : item.isFirstAid == 1 ? "Yes" : item.isFirstAid == 0 ? 'No' : '', // isOhcStaff : item.isOhcStaff == 1 ? "Yes" : item.isOhcStaff == 0 ? 'No' : '' // } // }) // // setRowData(chaneItems) // } if (items.length > 0) { const columns = [ { headerName: 'Sr', field: 'count', width: 150, sortable: false, floatingFilter: true, filter: "agTextColumnFilter" }, { headerName: '', field: 'link', width: 150, sortable: false, floatingFilter: true, filter: "agTextColumnFilter" }, { headerName: 'Date', field: 'appointment_date', width: 200, sortable: true, floatingFilter: true, filter: "agDateColumnFilter" }, { headerName: 'Ticket No', field: 'ticket_no', width: 150, sortable: true, floatingFilter: true, filter: "agTextColumnFilter" }, { headerName: 'ECode/G.Pass', field: 'emp_code', width: 150, sortable: true, floatingFilter: true, filter: "agTextColumnFilter" }, { headerName: 'Patient Name', field: 'patient_name', width: 200, sortable: true, floatingFilter: true, filter: "agTextColumnFilter" }, { headerName: 'Injury', field: 'appointment_type', width: 150, sortable: true, floatingFilter: true, filter: "agTextColumnFilter" }, { headerName: 'Consulted By', field: 'doctor_attended_flag', width: 150, sortable: true, floatingFilter: true, filter: "agTextColumnFilter" }, { headerName: 'Complaints', field: 'complaints', width: 200, sortable: true, floatingFilter: true, filter: "agTextColumnFilter" }, { headerName: 'Diagnosis', field: 'injury_types_new', width: 200, sortable: true, floatingFilter: true, filter: "agTextColumnFilter" }, { headerName: 'Treatments', field: 'hospital_treatment', width: 300, sortable: true, floatingFilter: true, filter: "agTextColumnFilter" }, { headerName: 'Absence Start', field: 'date_absent', width: 150, sortable: true, floatingFilter: true, filter: "agDateColumnFilter" }, { headerName: 'Rejoining Date', field: 'date_return', width: 150, sortable: true, floatingFilter: true, filter: "agDateColumnFilter" }, { headerName: 'Days of Leaves', field: 'date_difference', width: 150, sortable: true, floatingFilter: true, filter: "agNumberColumnFilter" }, { headerName: 'Referral', field: 'referral', width: 100, sortable: true, floatingFilter: true, filter: "agTextColumnFilter" }, { headerName: 'Vitals', field: 'checkup_results', width: 150, sortable: false, floatingFilter: true, filter: "agTextColumnFilter" }, { headerName: 'Doc Comment', field: 'doc_comment', width: 150, sortable: false, floatingFilter: true, filter: "agTextColumnFilter" } ]; // columns.unshift({ // field: "Actions", cellRenderer: (params) =>{ // const id = params.data.id; // return // } // }); setColDefs(columns); } } catch (err) { console.error("Failed to fetch patient data: ", err); setRowData([]); } }; getAllOhc(); return () => { controller.abort(); }; }, [paginationPageSize,fetchTrigger]); const exportpdf = async () => { const doc = new jsPDF(); // Define table headers based on column definitions const header = [['Link', 'Sr', 'ECode', 'Patient Name', 'Plant', 'Grade', 'Father Name', 'Patient Type', 'Contractor/Company', 'Designation', 'Division', 'Department', 'Section', 'Gender', 'Blood Group', 'Email', 'Phone', 'Aadhar', 'Primary Patient', 'Is OHC STAFF', 'Is First Aider']]; // Map the rowData to match the column definitions const tableData = rowData.map(item => [ item.Sr || '', item.empCode || '', item.patientName || '', item.ohcType || '', item.designation || '', item.fatherName || '', item.patientCategory || '', item.employerContractor || '', item.designation || '', item.businessUnit || '', item.department || '', item.section || '', item.gender || '', item.bloodGroup || '', item.emailId || '', item.primaryPhone || '', item.aadharNo || '', item.primary_patient_id || '', item.isOhcStaff || '', item.isFirstAid || '' ]); // Generate the table inside the PDF doc.autoTable({ head: header, body: tableData, startY: 20, theme: 'grid', margin: { top: 30 }, styles: { fontSize: 5 }, columnStyles: { 0: { cellWidth: 'auto' }, 1: { cellWidth: 'auto' } } // Adjust column width if needed }); // Save the PDF with a name of your choice doc.save("AppointmentHistory.pdf"); }; const exportExcelfile = async () => { const workbook = new ExcelJS.Workbook(); const sheet = workbook.addWorksheet("Employee List"); const headerStyle = { alignment: { horizontal: "center" }, }; sheet.getRow(1).font = { bold: true }; // Define column widths for each field based on PDF const columnWidths = { Sr: 10, empCode: 20, patientName: 25, ohcType: 15, grade: 15, fatherName: 25, patientCategory: 20, employerContractor: 25, designation: 20, businessUnit: 20, department: 20, section: 30, gender: 10, bloodGroup: 15, emailId: 25, primaryPhone: 15, aadharNo: 20, primaryPatientId: 20, isOhcStaff: 15, isFirstAid: 15 }; // Set up columns for the Excel sheet sheet.columns = [ { header: "Sr", key: "Sr", width: columnWidths.Sr, style: headerStyle }, { header: "ECode", key: "empCode", width: columnWidths.empCode, style: headerStyle }, { header: "Patient Name", key: "patientName", width: columnWidths.patientName, style: headerStyle }, { header: "Plant", key: "ohcType", width: columnWidths.ohcType, style: headerStyle }, { header: "Grade", key: "grade", width: columnWidths.grade, style: headerStyle }, { header: "Father Name", key: "fatherName", width: columnWidths.fatherName, style: headerStyle }, { header: "Patient Type", key: "patientCategory", width: columnWidths.patientCategory, style: headerStyle }, { header: "Contractor/Company", key: "employerContractor", width: columnWidths.employerContractor, style: headerStyle }, { header: "Designation", key: "designation", width: columnWidths.designation, style: headerStyle }, { header: "Division", key: "businessUnit", width: columnWidths.businessUnit, style: headerStyle }, { header: "Department", key: "department", width: columnWidths.department, style: headerStyle }, { header: "Section", key: "section", width: columnWidths.section, style: headerStyle }, { header: "Gender", key: "gender", width: columnWidths.gender, style: headerStyle }, { header: "Blood Group", key: "bloodGroup", width: columnWidths.bloodGroup, style: headerStyle }, { header: "Email", key: "emailId", width: columnWidths.emailId, style: headerStyle }, { header: "Phone", key: "primaryPhone", width: columnWidths.primaryPhone, style: headerStyle }, { header: "Aadhar", key: "aadharNo", width: columnWidths.aadharNo, style: headerStyle }, { header: "Primary Patient", key: "primaryPatientId", width: columnWidths.primaryPatientId, style: headerStyle }, { header: "Is OHC STAFF", key: "isOhcStaff", width: columnWidths.isOhcStaff, style: headerStyle }, { header: "Is First Aider", key: "isFirstAid", width: columnWidths.isFirstAid, style: headerStyle }, ]; // Add data rows, mapping to match the keys defined above rowData.map((employee, index) => { sheet.addRow({ Sr: index + 1, empCode: employee.empCode, patientName: employee.patientName, ohcType: employee.ohcType, grade: employee.grade, fatherName: employee.fatherName, patientCategory: employee.patientCategory, employerContractor: employee.employerContractor, designation: employee.designation, businessUnit: employee.businessUnit, department: employee.department, section: employee.section, gender: employee.gender, bloodGroup: employee.bloodGroup, emailId: employee.emailId, primaryPhone: employee.primaryPhone, aadharNo: employee.aadharNo, primaryPatientId: employee.primaryPatientId, isOhcStaff: employee.isOhcStaff, isFirstAid: employee.isFirstAid, }); }); // Wrap text in columns where necessary sheet.columns.forEach(column => { column.alignment = { wrapText: true }; }); // Write the workbook to an Excel file and trigger download const buffer = await workbook.xlsx.writeBuffer(); const blob = new Blob([buffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }); const url = window.URL.createObjectURL(blob); const anchor = document.createElement("a"); anchor.href = url; anchor.download = "AppointmentHistory.xlsx"; anchor.click(); }; // download template const downloadEmployeeTemplate = () => { const workbook = new ExcelJS.Workbook(); const worksheet = workbook.addWorksheet('Employee Template'); // Define header row worksheet.columns = [ { header: 'ECode', key: 'emp_code', width: 20 }, { header: 'Patient Name', key: 'patient_name', width: 25 }, { header: 'Plant', key: 'plant_id', width: 15 }, { header: 'Grade', key: 'grade_id', width: 15 }, { header: 'Father Name', key: 'father_name', width: 25 }, { header: 'Patient Type', key: 'patient_cat_name', width: 20 }, { header: 'Contractor/Company', key: 'employer_contractor_name', width: 25 }, { header: 'Designation', key: 'designation_name', width: 20 }, { header: 'Division', key: 'bu_name', width: 20 }, { header: 'Department', key: 'dept_name', width: 20 }, { header: 'Section', key: 'section', width: 30 }, { header: 'Gender', key: 'gender', width: 10 }, { header: 'Blood Group', key: 'blood_group', width: 15 }, { header: 'Email', key: 'offiial_email_id', width: 25 }, { header: 'Phone', key: 'primary_phone', width: 15 }, { header: 'Aadhar', key: 'aadhar_no', width: 20 }, { header: 'Primary Patient', key: 'primary_patient_id', width: 20 }, { header: 'Is OHC STAFF', key: 'is_ohc_staff', width: 15 }, { header: 'Is First Aider', key: 'is_first_aid', width: 15 }, ]; // Add empty rows for the user to fill in data for (let i = 0; i < 5; i++) { worksheet.addRow({}); } // Apply styles to header row (bold, background color, borders) worksheet.getRow(1).eachCell((cell) => { cell.font = { bold: true }; cell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFCCCCCC' }, }; cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' }, }; cell.alignment = { vertical: 'middle', horizontal: 'center' }; }); // Apply borders and alignment to data cells worksheet.eachRow((row, rowNumber) => { if (rowNumber > 1) { row.eachCell((cell) => { cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' }, }; cell.alignment = { vertical: 'middle', horizontal: 'center' }; }); } }); // Generate and download the Excel file workbook.xlsx.writeBuffer().then((buffer) => { const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); // Create a link element and trigger a download const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'employee_template.xlsx'; a.click(); // Cleanup window.URL.revokeObjectURL(url); }); }; // filter const [temp,setTemp] = useState(""); const onFilterChanged = (params) => { const filterModel = params.api.getFilterModel(); setTemp(filterModel) }; console.log("tempppp filter",temp); const [index,setIndex] = useState(); console.log("index for next page : ",index); return ( <> { setPaginationPageSize(event.api.paginationGetPageSize()); setIndex(event.api.paginationGetCurrentPage()); }} onFilterChanged={onFilterChanged} // paginationNumberFormatter={paginationNumberFormatter} // onGridReady={(params) => { // params.api.paginationGoToPage(currentPageIndex); // }} // paginationTotalRowCount = {200} // paginationGetPageSize = {200} /> ); }; export default AppointmentHistory;