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 AddCircleOutlineRoundedIcon from '@mui/icons-material/AddCircleOutlineRounded'; import Popup from './Popup'; 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"; import VisibilityIcon from '@mui/icons-material/Visibility'; import * as Yup from 'yup'; import { Link } from 'react-router-dom'; import { useNavigate } from 'react-router-dom'; const PatientValidationForm = Yup.object({ // selectpatientcategory: Yup.string().required("Please choose patient category "), patientName: Yup.string().required("Please enter patient name"), // fhname: Yup.string().required("Please enter father anme "), // date: Yup.string().required("Please enter birth date"), // genderchoose: Yup.string().required("Please genderchoose"), // blood: Yup.string().required("Please enter blood"), // aadhar: Yup.string().required("Please enter aadhar"), // phone: Yup.string().required("Please enter phone number"), // village: Yup.string().required("Please enter village"), // post: Yup.string().required("Please enter post"), // ps: Yup.string().required("Please enter ps"), // tehsil:Yup.string().required("Please enter tehsil "), // district:Yup.string().required("Please enter district "), // state:Yup.string().required("Please enter sat"), // pin:Yup.string().required("Please enter pin"), }); //exercise || diet || measurement icon // import FitnessCenterIcon from '@mui/icons-material/FitnessCenter'; import SettingsAccessibilityIcon from '@mui/icons-material/SettingsAccessibility'; // import RestaurantIcon from '@mui/icons-material/Restaurant'; import ExerciseMinuteForm from './ExerciseMinuteForm'; import DailyMeasurementForm from './DailyMeasurementForm'; import PatientInfoForm from "./PatientProfileForm" import PatientDietForm from './PatientDietForm'; import Tooltip, { tooltipClasses } from '@mui/material/Tooltip'; import { styled } from '@mui/material/styles'; import DirectionsRunIcon from '@mui/icons-material/DirectionsRun'; import DashboardIcon from '@mui/icons-material/Dashboard'; const formComponents = { PatientInfoForm: PatientInfoForm, ExerciseMinuteForm: ExerciseMinuteForm, DailyMeasurementForm: DailyMeasurementForm, PatientDietForm : PatientDietForm }; const PatientList = () => { const [rowData, setRowData] = useState([]); const [colDefs, setColDefs] = useState([]); const [openPopup, setOpenPopup] = useState(false); const [viewMode, setViewMode] = useState(false); const axiosClientPrivate = useAxiosPrivate(); const [id, setId] = useState(1); const [showupdate, setShowupdate] = useState(false); const [fetchTrigger, setFetchTrigger] = useState(0); const navigate = useNavigate(); const [exercises,setExercise] = useState([]); const [unit,setUnit] = useState([{}]); const [bodyparams,setBodyparams] = useState([]); const [nutrient,setNutrient] = useState([]); const [patientid,setPatientid] = useState(null); const [titlle,setTitle] = useState("Patient Master") const [currentForm, setCurrentForm] = useState('PatientInfoForm'); const [bodyparameterpair,setBodyparameterpair] = useState({}) const [unitpair,setUnitpair] = useState({}); const [nutrientpair,setNutrientpair] = useState({}); const[bodyparaunit,setBodyparaunit] = useState({}); const [paraid,setParaid] = useState({}); const [paraunitid,setParaunitid] = useState({}); const [exerciseid, setExerciseid] = useState({}); const [nutrientidpair,setNutrientidpair] = useState({}); const patientInfoFormik = useFormik({ initialValues: { selectpatientcategory: "", patientName: "", fatherName: "", dob: "", gender: "", bloodGroup: "", aadharNo: "", primaryPhone: "", village: "", post: "", ps: "", tehsil: "", district: "", state: "", pinCode: "", lastModified: "", modifiedBy: "" }, validationSchema: PatientValidationForm, onSubmit: async (values, { resetForm }) => { try { const response = await axiosClientPrivate.post('/patients', values); toast.success("Saved Successfully!", { position: "top-center" }); setFetchTrigger(prev => prev + 1); console.log('Response:', response.data); resetForm(); // navigate(`/PatientAndContact/${rowData[rowData.length - 1].id + 1}`); } catch (error) { console.log(values); console.error('Error:', error); } }, }); // console.log("to checkkk",exercises); // const cehck = "chekk" // const [exercisess] = useState([ // { name: 'Push-ups', id: 1 }, // { name: 'Sit-ups', id: 2 }, // { name: 'Squats', id: 3 }, // ]); // const dd = // console.log("dd",exercises); // exercise plan useEffect(() => { const controller = new AbortController(); const getAllOhc = async () => { try { const response = await axiosClientPrivate.get('http://localhost:8080/exercise-masters', { signal: controller.signal }); const items = response.data.content; setExercise(items); const pair = {}; items.forEach(item => { pair[item.exerciseName] = item.id; }); setExerciseid(pair); console.log("exercise and id pair",pair); } catch (err) { console.error("Failed to fetch exercise: ", err); } }; getAllOhc(); return () => { controller.abort(); }; }, []); // console.log("jhkhkjh",exercises); const exerciseMinuteFormik = useFormik({ enableReinitialize: true, initialValues: { exercises: exercises.map(item => ({ exercisename: item.exerciseName, minutes: '', remark: '' })) }, // validationSchema: ExerciseMinuteValidationForm, // if you have a validation schema for this form onSubmit: async (values, { resetForm }) => { const filteredExercises = values.exercises.filter(exercise => exercise.minutes && exercise.remark); console.log("filter",filteredExercises); const exercisePlanValues = filteredExercises.reduce((acc, param) => { acc[exerciseid[param.exercisename]] = { value: parseFloat(param.minutes), // unitId: paraunitid[param.measurementname], remark: param.remark }; return acc; }, {}); const finalValues = { date : getFormattedDate(), empId: patientid, exercisePlanValues: exercisePlanValues }; console.log("exercise final json obj",finalValues); try { const response = await axiosClientPrivate.post('/patient-exercise-plans', finalValues); toast.success("Saved Successfully!", { position: "top-center" }); console.log('Response:', response.data); resetForm(); } catch (error) { console.log(values); console.error('Error:', error); } }, }); // body measurement parameter useEffect(() => { const controller = new AbortController(); const getAllOhc = async () => { try { const response = await axiosClientPrivate.get('http://localhost:8080/measurements', { signal: controller.signal }); const items = response.data.content; console.log("body parameter :-",items); const parameter = {}; const paraid = {}; const paraunitid = {}; items.forEach(item => { parameter[item.bmName] = unitpair[item.id]; paraid[item.bmName] = item.id; paraunitid[item.bmName] = item.unitId; }); console.log("check key value parameter",parameter); setBodyparameterpair(parameter); setParaid(paraid); setParaunitid(paraunitid); console.log("parameter and id pair",paraid); console.log("parameter and unit pair",paraunitid); setBodyparams(items); } catch (err) { console.error("Failed to fetch data: ", err); } }; getAllOhc(); return () => { controller.abort(); }; }, [axiosClientPrivate,unitpair]); function getFormattedDate() { const date = new Date(); const day = String(date.getDate()).padStart(2, '0'); const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are zero-indexed const year = date.getFullYear(); return `${year}-${month}-${day}`; } // console.log("date",getFormattedDate()); const bodyMeasurementFormik = useFormik({ enableReinitialize: true, initialValues: { // empId : patientid, parameters: bodyparams.map(item => ({ measurementname: item.bmName, measuremenvalue: '', remark: '' })) }, // validationSchema: ExerciseMinuteValidationForm, // if you have a validation schema for this form onSubmit: async (values, { resetForm }) => { // console.log('not filter values:', values); const filteredMeasurement = values.parameters.filter(item => item.measuremenvalue && item.remark); const bodyMeasurementValues = filteredMeasurement.reduce((acc, param) => { acc[paraid[param.measurementname]] = { value: parseFloat(param.measuremenvalue), // unitId: paraunitid[param.measurementname], remark: param.remark }; return acc; }, {}); const finalValues = { date : getFormattedDate(), empId: patientid, bodyMeasurementValues: bodyMeasurementValues }; // console.log('format ---->:', bodyMeasurementValues); console.log('filter values:', finalValues); try { const response = await axiosClientPrivate.post('/patient-measurements', finalValues); toast.success("Saved Successfully!", { position: "top-center" }); console.log('Response:', response.data); resetForm(); } catch (error) { console.log(finalValues); console.error('Error:', error); } }, }); // nutrient master useEffect(() => { const controller = new AbortController(); const fetchNutrientMasters = async () => { try { const response = await axiosClientPrivate.get('/nutrient-masters', { signal: controller.signal }); const items = response.data.content; // console.log("Nutrient masters:", items); // const nutrient = {}; // items.forEach(item => { // nutrient[item.id] = item.nutrientName; // }); setNutrient(items); const nutrientpair = {}; items.forEach(item => { nutrientpair[item.nutrientName] = unitpair[item.unitId]; }); setNutrientpair(nutrientpair); const nutrient = {}; items.forEach(item => { nutrient[item.nutrientName] = item.id; }); // console.log("nutrietn and id pair",nutrient); setNutrientidpair(nutrient) } catch (err) { console.error("Failed to fetch data: ", err); } }; fetchNutrientMasters(); return () => { controller.abort(); }; }, [unitpair,axiosClientPrivate]); const patientDietFormik = useFormik({ enableReinitialize: true, initialValues: { nutrients: nutrient.map(item => ({ nutrientname: item.nutrientName, nutrientvalue: '', remark: '' })) }, // validationSchema: ExerciseMinuteValidationForm, // if you have a validation schema for this form onSubmit: async (values, { resetForm }) => { console.log('not filter values:', values); const filterednutrients = values.nutrients.filter(item => item.nutrientvalue && item.remark); const dietPlanDetails = filterednutrients.reduce((acc, param) => { acc[nutrientidpair[param.nutrientname]] = { value: parseFloat(param.nutrientvalue), // unitId: paraunitid[param.measurementname], remark: param.remark }; return acc; }, {}); const finalValues = { date : getFormattedDate(), empId: patientid, dietPlanDetails: dietPlanDetails }; // console.log('format ---->:', bodyMeasurementValues); console.log('filter values:', finalValues); try { const response = await axiosClientPrivate.post('/patient-diet-plans', finalValues); toast.success("Saved Successfully!", { position: "top-center" }); console.log('Response:', response.data); resetForm(); } catch (error) { console.log(values); console.error('Error:', error); } }, }); const switchForm = (formName,id) => { // alert("patient id "+`${id}`); // console.log("patient id ",id); setCurrentForm(formName); setPatientid(id) setOpenPopup(true); }; // const formikProps = currentForm === 'PatientInfoForm' ? patientInfoFormik : exerciseMinuteFormik; useEffect(() => { if (currentForm === 'ExerciseMinuteForm') { setTitle("Patient Exercise Plan"); } else if(currentForm === 'DailyMeasurementForm'){ setTitle("Patient Measurement Plan"); } else if(currentForm === 'PatientDietForm'){ setTitle("Patient Diet Plan"); } else if(currentForm === 'PatientInfoForm'){ setTitle("Patient Master"); } }, [currentForm]); let formikProps; switch (currentForm) { case 'PatientInfoForm': formikProps = patientInfoFormik break; case 'ExerciseMinuteForm': formikProps = exerciseMinuteFormik break; case 'DailyMeasurementForm': formikProps = bodyMeasurementFormik break; case 'PatientDietForm': formikProps = patientDietFormik break; default: break; } // console.log("fomik",exerciseMinuteFormik); // console.log("fomik prop",formikProps); const FormComponent = formComponents[currentForm]; // const handleEdit = async (id) => { // alert(id); // try { // const response = await axiosClientPrivate.get(`/patients/${id}`); // console.log(response.data); // setFieldValue("id", response.data.id); // setFieldValue("selectpatientcategory", response.data.selectpatientcategory); // setFieldValue("patientName", response.data.patientName); // setFieldValue("fatherName", response.data.fatherName); // setFieldValue("dob", response.data.dob); // setFieldValue("gender", response.data.gender); // setFieldValue("bloodGroup", response.data.bloodGroup); // setFieldValue("aadharNo", response.data.aadharNo); // setFieldValue("primaryPhone", response.data.primaryPhone); // setFieldValue("village", response.data.village); // setFieldValue("post", response.data.post); // setFieldValue("ps", response.data.ps); // setFieldValue("tehsil", response.data.tehsil); // setFieldValue("district", response.data.district); // setFieldValue("state", response.data.state); // setFieldValue("pinCode", response.data.pinCode); // 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 handleView = async (id) => { // alert(id); try { const response = await axiosClientPrivate.get(`/patients/${id}`); console.log(response.data); patientInfoFormik.setFieldValue("id", response.data.id); patientInfoFormik.setFieldValue("selectpatientcategory", response.data.selectpatientcategory); patientInfoFormik.setFieldValue("patientName", response.data.patientName); patientInfoFormik.setFieldValue("fatherName", response.data.fatherName); patientInfoFormik.setFieldValue("dob", response.data.dob); patientInfoFormik.setFieldValue("gender", response.data.gender); patientInfoFormik.setFieldValue("bloodGroup", response.data.bloodGroup); patientInfoFormik.setFieldValue("aadharNo", response.data.aadharNo); patientInfoFormik.setFieldValue("primaryPhone", response.data.primaryPhone); patientInfoFormik.setFieldValue("village", response.data.village); patientInfoFormik.setFieldValue("post", response.data.post); patientInfoFormik.setFieldValue("ps", response.data.ps); patientInfoFormik.setFieldValue("tehsil", response.data.tehsil); patientInfoFormik.setFieldValue("district", response.data.district); patientInfoFormik.setFieldValue("state", response.data.state); patientInfoFormik.setFieldValue("pinCode", response.data.pinCode); patientInfoFormik.setFieldValue("lastModified", response.data.lastModified); patientInfoFormik.setFieldValue("modifiedBy", response.data.modifiedBy); setId(id); setViewMode(true); setOpenPopup(true); } catch (error) { console.error('Error fetching item for view:', error); } }; const handleUpdate = async (id) => { // alert(id); const update = patientInfoFormik.values; try { console.log(patientInfoFormik.values); await axiosClientPrivate.put(`/patients/${id}`, update); toast.success("Updated Successfully!", { position: "top-center", autoClose: 3000, }); patientInfoFormik.resetForm(); setFetchTrigger(prev => prev + 1); } catch (err) { console.log(patientInfoFormik.values); console.log(err); } } const handleDeleteRow = 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 LightTooltip = styled(({ className, ...props }) => ( ))(({ theme }) => ({ [`& .${tooltipClasses.tooltip}`]: { backgroundColor: theme.palette.common.white, color: 'rgba(0, 0, 0, 0.87)', boxShadow: theme.shadows[1], fontSize: 11, }, })); const CustomActionComponent = ({ id }) => { const encodedId = btoa(id); CustomActionComponent.propTypes = { id: PropTypes.number.isRequired, }; return
{/* */}
}; const pagination = true; const paginationPageSize = 50; const paginationPageSizeSelector = [50, 100, 200, 500]; 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("patient info : ",items); setRowData(items); if (items.length > 0) { const headerMappings = { selectpatientcategory: "Patient Category", patientName : "Patient Name", fatherName : "Father Name", dob : "DOB", genderchoose : "Gender Choose", bloodGroup : "Blood Group", aadharNo : "Aadhar Number", primaryPhone : "Primary Phone", village : "Village", post : "Post", ps : "PS", tehsil : "Tehsil", district : "District", pinCode : "Pin Code", emailId : "Email Id", lastModified : "Last Modified", modifiedBy : "Modified By", }; const columns = Object.keys(items[0]).map(key => ({ field: key, headerName: headerMappings[key] || key.charAt(0).toUpperCase() + key.slice(1), filter: true, floatingFilter: true, sortable: true, width: key === 'id' ? 100 : undefined, valueGetter: (params) => { if (key === 'dob' && params.data.dob) { const [year, month, day] = params.data.dob.split('-'); return `${day}-${month}-${year}`; } return params.data[key]; } })); columns.unshift({ field: "Actions", cellRenderer: (params) => { const id = params.data.id; return }, width: 300, }); setColDefs(columns); } } catch (err) { console.error("Failed to fetch data: ", err); setRowData([]); } }; getAllOhc(); return () => { controller.abort(); }; }, [fetchTrigger,axiosClientPrivate]); useEffect(() => { const controller = new AbortController(); const getAllOhc = async () => { try { const response = await axiosClientPrivate.get('http://localhost:8080/units', { signal: controller.signal }); const items = response.data.content; // console.log("units :-",items); const options = items.map((item)=>{ return {label:item.unitName,value:item.id}; }); setUnit(options); const unitobj = {}; items.map((item)=>{ unitobj[item.id] = item.unitName; }); setUnitpair(unitobj); console.log(unitpair); } catch (err) { console.error("Failed to fetch data: ", err); } }; getAllOhc(); return () => { controller.abort(); }; }, []); // measurements useEffect(() => { const controller = new AbortController(); const getAllOhc = async () => { try { const response = await axiosClientPrivate.get('http://localhost:8080/measurements', { signal: controller.signal }); const items = response.data.content; console.log("measurment name :-",items); // const newDiagnosisMap = new Map(); // items.forEach(item => newDiagnosisMap.set(item.ailmentSysName, item.id)); // setBodysystem(newDiagnosisMap); // console.log(diagnosisMap.size); // const ailment = items.map((item)=>{ // // diagnosisMap.set(item.id,item.ailmentSysName); // return item.ailmentSysName; // }); // const options = items.map((item)=>{ // return {label:item.unitName,value:item.id}; // }); // setUnit(options); const para = {}; items.map((item)=>{ para[item.bmName] = unitpair[item.unitId]; }); setBodyparameterpair(para); console.log("main pppppp",para); } catch (err) { console.error("Failed to fetch data: ", err); } }; getAllOhc(); return () => { controller.abort(); }; }, [unitpair,axiosClientPrivate]); const exportpdf = async () => { const doc = new jsPDF(); const header = [['id', 'pname', "fhname", "date", "genderchoose", "blood", "aadhar", "phone", "village", "post", "ps", "tehsil", "district", "state", "pin"]]; const tableData = rowData.map(item => [ item.id, // item.selectpatientcategory, item.patientName, item.fatherName, item.dob, item.gender, item.bloodGroup, item.aadharNo, item.primaryPhone, item.village, item.post, item.ps, item.tehsil, item.district, item.state, item.pinCode, ]); doc.autoTable({ head: header, body: tableData, startY: 20, theme: 'grid', margin: { top: 30 }, styles: { fontSize: 5 }, columnStyles: { 0: { cellWidth: 'auto' }, 1: { cellWidth: 'auto' } } // columnStyles: { // 0: { cellWidth: 5 }, // id // 2: { cellWidth: 20 }, // pname // 3: { cellWidth: 20 }, // fhname // 4: { cellWidth: 15 }, // date // 5: { cellWidth: 20 }, // genderchoose // 6: { cellWidth: 5 }, // blood // 7: { cellWidth: 25 }, // aadhar // 8: { cellWidth: 15 }, // phone // 9: { cellWidth: 15 }, // village // 10: { cellWidth: 25 }, // post // 11: { cellWidth: 25 }, // ps // 12: { cellWidth: 15 }, // tehsil // 13: { cellWidth: 15 }, // district // 14: { cellWidth: 25 }, // state // // 15: { cellWidth: 15 } // pin // } }); doc.save("PatientList.pdf"); }; const exportExcelfile = async () => { const workbook = new ExcelJS.Workbook(); const sheet = workbook.addWorksheet('My Sheet'); const headerStyle = { alignment: { horizontal: 'center' } }; sheet.getRow(1).font = { bold: true }; const columnWidths = { id: 10, // selectpatientcategory: 20, patientName: 20, fatherName: 20, dob: 20, gender: 20, bloodGroup: 20, aadharNo: 20, primaryPhone: 20, village: 20, post: 20, ps: 20, tehsil: 20, district: 20, state: 20, pinCode: 20, }; sheet.columns = [ { header: "id", key: 'id', width: columnWidths.id, style: headerStyle }, // { header: "selectpatientcategory", key: 'cpname', width: columnWidths.cpname, style: headerStyle }, { header: "pname", key: 'patientName', width: columnWidths.patientName, style: headerStyle }, { header: "fhname", key: 'fatherName', width: columnWidths.fatherName, style: headerStyle }, { header: "date", key: 'dob', width: columnWidths.dob, style: headerStyle }, { header: "genderchoose", key: 'gender', width: columnWidths.gender, style: headerStyle }, { header: "blood", key: 'bloodGroup', width: columnWidths.bloodGroup, style: headerStyle }, { header: "aadhar", key: 'aadharNo', width: columnWidths.aadharNo, style: headerStyle }, { header: "phone", key: 'primaryPhone', width: columnWidths.primaryPhone, style: headerStyle }, { header: "village", key: 'village', width: columnWidths.village, style: headerStyle }, { header: "post", key: 'post', width: columnWidths.post, style: headerStyle }, { header: "ps", key: 'ps', width: columnWidths.ps, style: headerStyle }, { header: "tehsil", key: 'tehsil', width: columnWidths.tehsil, style: headerStyle }, { header: "district", key: 'district', width: columnWidths.district, style: headerStyle }, { header: "state", key: 'state', width: columnWidths.state, style: headerStyle }, { header: "pin", key: 'pinCode', width: columnWidths.pinCode, style: headerStyle }, ]; rowData.map(product => { sheet.addRow({ id: product.id, // selectpatientcategory: product.selectpatientcategory, patientName: product.patientName, fatherName: product.fatherName, dob: product.dob, gender: product.gender, bloodGroup: product.bloodGroup, aadharNo: product.aadharNo, primaryPhone: product.primaryPhone, village: product.village, post: product.post, ps: product.ps, tehsil: product.tehsil, district: product.district, state: product.state, pinCode: product.pinCode, }) }); workbook.xlsx.writeBuffer().then(data => { const blob = new Blob([data], { type: "application/vnd.openxmlformats-officedocument.spreadsheet.sheet", }); const url = window.URL.createObjectURL(blob); const anchor = document.createElement('a'); anchor.href = url; anchor.download = 'PatientList.xlsx'; anchor.click(); }) } return ( <> {/*{currentForm === 'patientInfo' && ( )} {currentForm === 'exerciseplan' && ( )} {currentForm === 'measurementplan' && ( )}*/} ); }; export default PatientList;