2498 lines
79 KiB
Plaintext
2498 lines
79 KiB
Plaintext
import {
|
|
|
|
Button,
|
|
Stack,
|
|
Typography,
|
|
Avatar,
|
|
Grid,
|
|
useMediaQuery,
|
|
|
|
Card,
|
|
CardContent,
|
|
// Tabs,
|
|
// Tab,
|
|
} from "@mui/material";
|
|
import { useTheme } from "@mui/material/styles";
|
|
import Box from '@mui/material/Box';
|
|
|
|
import "react-toastify/dist/ReactToastify.css";
|
|
import "ag-grid-community/styles/ag-grid.css";
|
|
import "ag-grid-community/styles/ag-theme-alpine.css";
|
|
import avatar from "../../assets/images/avatar.avif";
|
|
// import PropTypes from 'prop-types';
|
|
import React from "react";
|
|
import ArrowForwardIosSharpIcon from "@mui/icons-material/ArrowForwardIosSharp";
|
|
import MuiAccordion from "@mui/material/Accordion";
|
|
import MuiAccordionSummary from "@mui/material/AccordionSummary";
|
|
import MuiAccordionDetails from "@mui/material/AccordionDetails";
|
|
import { styled } from "@mui/material/styles";
|
|
import { useEffect, useState,Suspense } from "react";
|
|
import useAxiosPrivate from "../../utils/useAxiosPrivate";
|
|
import { useParams } from "react-router-dom";
|
|
import Popup from "./Popup";
|
|
import { ToastContainer, toast } from "react-toastify";
|
|
import { useFormik } from "formik";
|
|
import CircularProgress from '@mui/material/CircularProgress';
|
|
// exercise,measurement,diet pop forms
|
|
import ExerciseMinuteForm from "./ExerciseMinuteForm";
|
|
import BodyMeasurementForm from "./DailyMeasurementForm";
|
|
import PatientDietForm from "./PatientDietForm";
|
|
import BottomRightDial from './BottomRightDial'
|
|
// pop history imports
|
|
import Dialog from "@mui/material/Dialog";
|
|
import DialogActions from "@mui/material/DialogActions";
|
|
import DialogContent from "@mui/material/DialogContent";
|
|
import DialogContentText from "@mui/material/DialogContentText";
|
|
import DialogTitle from "@mui/material/DialogTitle";
|
|
import Divider from "@mui/material/Divider";
|
|
import EditNoteRoundedIcon from '@mui/icons-material/EditNoteRounded';
|
|
import DeleteSweepRoundedIcon from '@mui/icons-material/DeleteSweepRounded';
|
|
import AddCircleOutlineRoundedIcon from '@mui/icons-material/AddCircleOutlineRounded';
|
|
import { useNavigate } from 'react-router-dom';
|
|
//table
|
|
import {
|
|
Table,
|
|
CardMedia,
|
|
TableBody,
|
|
TableCell,
|
|
TableContainer,
|
|
TableHead,
|
|
TableRow,
|
|
Paper,
|
|
} from "@mui/material";
|
|
import WaterDropIcon from "@mui/icons-material/WaterDrop"; // bloodgroup icon
|
|
|
|
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
|
import { Fullscreen } from "@mui/icons-material";
|
|
|
|
const Accordion = styled((props) => (
|
|
<MuiAccordion disableGutters elevation={0} square {...props} />
|
|
))(({ theme }) => ({
|
|
border: `1px solid ${theme.palette.divider}`,
|
|
"&:not(:last-child)": {
|
|
borderBottom: 0,
|
|
},
|
|
"&::before": {
|
|
display: "none",
|
|
},
|
|
}));
|
|
|
|
const AccordionSummary = styled((props) => (
|
|
<MuiAccordionSummary
|
|
expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: "0.9rem" }} />}
|
|
{...props}
|
|
/>
|
|
))(({ theme }) => ({
|
|
backgroundColor:
|
|
theme.palette.mode === "dark"
|
|
? "rgba(255, 255, 255, .05)"
|
|
: "rgba(0, 0, 0, .03)",
|
|
flexDirection: "row-reverse",
|
|
"& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
|
|
transform: "rotate(90deg)",
|
|
},
|
|
"& .MuiAccordionSummary-content": {
|
|
marginLeft: theme.spacing(1),
|
|
},
|
|
}));
|
|
|
|
const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
|
|
padding: theme.spacing(2),
|
|
borderTop: "1px solid rgba(0, 0, 0, .125)",
|
|
}));
|
|
|
|
const DoctorDashboard = () => {
|
|
// const [rowData, setRowData] = useState([]);
|
|
const axiosClientPrivate = useAxiosPrivate();
|
|
const [patientinfo, setPatientinfo] = useState({});
|
|
// const [healthparemeter,setHealthparemeter] = useState({});
|
|
const [patientname, setPatientname] = useState("");
|
|
const [idpara, setIdpara] = useState({});
|
|
const [idexercise, setIdexercise] = useState({});
|
|
const [dietpair, setDietpair] = useState({});
|
|
const [parameters, setParameters] = useState([]);
|
|
const [patientexercise, setPatientexercise] = useState([]);
|
|
const [patientdiet, setPatientdiet] = useState([]);
|
|
const [fetchTrigger, setFetchTrigger] = useState(0);
|
|
// const [unitpair,setUnitpair] = useState({});
|
|
|
|
// add buttons
|
|
const [showupdate, setShowupdate] = useState(false);
|
|
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("ExerciseMinuteForm");
|
|
const [openPopup, setOpenPopup] = useState(false);
|
|
|
|
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({});
|
|
|
|
|
|
|
|
// complain history
|
|
const [complaintHistory,setComplaintHistory] = useState([]);
|
|
|
|
|
|
|
|
|
|
// history model state
|
|
const [open, setOpen] = useState(false);
|
|
const [historyTitle, setHistoryTitle] = useState("");
|
|
const [measurementHistory, setMeasurementHistory] = useState([]);
|
|
|
|
|
|
const [dailyParameter, setDailyParameter] = useState([]);
|
|
const [dailyExercise, setDailyExercise] = useState([]);
|
|
const [daillyDiet, setDailyDiet] = useState([]);
|
|
|
|
// current consultation
|
|
const [currentComplain,setCurrentComplain] = useState({});
|
|
const [currentConsultationId,setCurrentConsultationId] = useState();
|
|
|
|
const [currentMeasurement,setCurrentMeasurement] = useState();
|
|
|
|
|
|
const [bloodGroup, setBloodGroup] = useState("");
|
|
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const navigate = useNavigate();
|
|
|
|
const handleClickOpen = (title) => {
|
|
setOpen(true);
|
|
setHistoryTitle(title);
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setOpen(false);
|
|
};
|
|
|
|
// const descriptionElementRef = useRef(null);
|
|
// React.useEffect(() => {
|
|
// if (open) {
|
|
// const { current: descriptionElement } = descriptionElementRef;
|
|
// if (descriptionElement !== null) {
|
|
// descriptionElement.focus();
|
|
// }
|
|
// }
|
|
// }, [open]);
|
|
|
|
// to calculate the age of a patient
|
|
function calculateAge(dob) {
|
|
if (dob == null) {
|
|
return "";
|
|
}
|
|
|
|
const dobDate = new Date(dob);
|
|
const currentDate = new Date();
|
|
|
|
let age = currentDate.getFullYear() - dobDate.getFullYear();
|
|
|
|
const monthDifference = currentDate.getMonth() - dobDate.getMonth();
|
|
const dayDifference = currentDate.getDate() - dobDate.getDate();
|
|
|
|
if (monthDifference < 0 || (monthDifference === 0 && dayDifference < 0)) {
|
|
age--;
|
|
}
|
|
|
|
return age;
|
|
}
|
|
|
|
// Function to format the date from YYYY-MM-DD to DD-MM-YYYY
|
|
function formatDate(dateString) {
|
|
if (dateString != null || dateString != undefined || dateString != "") {
|
|
const [year, month, day] = dateString.split("-");
|
|
return `${day}-${month}-${year}`;
|
|
}
|
|
}
|
|
|
|
// for history date
|
|
const historyFormat = (dateString) => {
|
|
const date = new Date(dateString);
|
|
const day = date.getDate();
|
|
const month = date
|
|
.toLocaleString("default", { month: "long" })
|
|
.toUpperCase();
|
|
const year = date.getFullYear();
|
|
return `${day}-${month}-${year}`;
|
|
};
|
|
|
|
// patient display data
|
|
const { encodedId } = useParams();
|
|
const pid = atob(encodedId);
|
|
// alert(pid)
|
|
// const patietnEncodeId = btoa(pid);
|
|
const patietnEncodeId = btoa((JSON.stringify({pid : pid})));
|
|
// console.log("patient id : ",patientid);
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
const getAllOhc = async () => {
|
|
try {
|
|
const response = await axiosClientPrivate.get(`/patients`, {
|
|
signal: controller.signal,
|
|
});
|
|
const items = response.data.content;
|
|
// console.log("patient info : ",items);
|
|
// setRowData(items);
|
|
|
|
const patient = items.find((item) => item.id == pid);
|
|
// console.log(" iterator : ",patient);
|
|
setPatientname(
|
|
patient.patientName +
|
|
"," +
|
|
patient.gender +
|
|
"," +
|
|
calculateAge(patient.dob)
|
|
);
|
|
setBloodGroup(patient.bloodGroup);
|
|
if (patient) {
|
|
// console.log('got a patient with id', id);
|
|
const age = calculateAge(patient.dob);
|
|
const object = {
|
|
"Patient Id": patient.id ? patient.id : "",
|
|
"Patient Name": patient.patientName ? patient.patientName : "",
|
|
"Father Name": patient.fatherName ? patient.fatherName : "",
|
|
DOB: patient.dob ? formatDate(patient.dob) : "",
|
|
Age: age,
|
|
Email: patient.emailId,
|
|
};
|
|
setPatientinfo(object);
|
|
// console.log("getting the object : ",object);
|
|
}
|
|
} catch (err) {
|
|
console.error("Failed to fetch data: ", err);
|
|
// setRowData([]);
|
|
}
|
|
};
|
|
|
|
getAllOhc();
|
|
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
}, [pid, axiosClientPrivate]);
|
|
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
|
|
const getAllOhc = async () => {
|
|
try {
|
|
const response = await axiosClientPrivate.get("/units", {
|
|
signal: controller.signal,
|
|
});
|
|
const items = response.data.content;
|
|
// console.log("units :-",items);
|
|
|
|
const unitobj = {};
|
|
items.map((item) => {
|
|
unitobj[item.id] = item.unitName;
|
|
});
|
|
|
|
setUnitpair(unitobj);
|
|
// console.log("id name :-",unitobj);
|
|
} catch (err) {
|
|
console.error("Failed to fetch data: ", err);
|
|
}
|
|
};
|
|
|
|
getAllOhc();
|
|
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
}, []);
|
|
|
|
// body measurement parameter
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
|
|
const getAllOhc = async () => {
|
|
try {
|
|
const response = await axiosClientPrivate.get("/measurements", {
|
|
signal: controller.signal,
|
|
});
|
|
const items = response.data.content;
|
|
console.log("body parameter :-",items);
|
|
|
|
const idpara = {};
|
|
items.forEach((item) => {
|
|
idpara[item.id] = item.bmName;
|
|
});
|
|
setIdpara(idpara);
|
|
} catch (err) {
|
|
console.error("Failed to fetch data: ", err);
|
|
}
|
|
};
|
|
|
|
getAllOhc();
|
|
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
}, [axiosClientPrivate]);
|
|
|
|
// id diet pair
|
|
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
|
|
const getAllOhc = async () => {
|
|
try {
|
|
const response = await axiosClientPrivate.get("/nutrient-masters", {
|
|
signal: controller.signal,
|
|
});
|
|
const items = response.data.content;
|
|
console.log("nutrient master :-", items);
|
|
|
|
const iddietpair = {};
|
|
if (items.length > 0) {
|
|
items.forEach((item) => {
|
|
iddietpair[item.id] = item.nutrientName;
|
|
});
|
|
}
|
|
|
|
setDietpair(iddietpair);
|
|
|
|
console.log("id diet pair :-", iddietpair);
|
|
} catch (err) {
|
|
console.error("Failed to fetch data: ", err);
|
|
}
|
|
};
|
|
|
|
getAllOhc();
|
|
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
}, [axiosClientPrivate]);
|
|
|
|
// id exercise pair
|
|
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
|
|
const getAllOhc = async () => {
|
|
try {
|
|
const response = await axiosClientPrivate.get("/exercise-masters", {
|
|
signal: controller.signal,
|
|
});
|
|
const items = response.data.content;
|
|
// console.log("exercise master :-",items);
|
|
|
|
const idexercisepair = {};
|
|
if (items.length > 0) {
|
|
items.forEach((item) => {
|
|
idexercisepair[item.id] = item.exerciseName;
|
|
});
|
|
}
|
|
|
|
setIdexercise(idexercisepair);
|
|
|
|
console.log("id exercise pair :-", idexercisepair);
|
|
} catch (err) {
|
|
console.error("Failed to fetch data: ", err);
|
|
}
|
|
};
|
|
|
|
getAllOhc();
|
|
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
}, [axiosClientPrivate]);
|
|
|
|
|
|
//patient measurement value
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
|
|
const getAllOhc = async () => {
|
|
try {
|
|
const response = await axiosClientPrivate.get(`/patient-measurements`, {
|
|
signal: controller.signal,
|
|
});
|
|
const items = response.data.content;
|
|
|
|
console.log("measurement items",items);
|
|
console.log("current consulatation",currentConsultationId);
|
|
|
|
|
|
const currentMeasurement = items
|
|
.filter((item) => item.consultationId == currentConsultationId)
|
|
.map((item) => item.bodyMeasurementValues);
|
|
|
|
console.log("patient measurement values",currentMeasurement);
|
|
|
|
// const parameter = items.find((item) => item.empId == patientid)
|
|
// const transformData = (data) => {
|
|
// console.log("Input data:", data);
|
|
// console.log("idpara:", idpara);
|
|
// return Object.keys(data).map((key) => ({
|
|
// label: idpara[Number(key)], // Convert the key to a number
|
|
// // value: data[key].value + data[key].value[data[key].unitId]
|
|
// // value: `${data[key].value} ${unitpair[data[key].unitId]}`,
|
|
// value: `${data[key].value}`,
|
|
// }));
|
|
// };
|
|
|
|
const transformData = (data) => {
|
|
console.log("Input data:", data);
|
|
console.log("idpara:", idpara);
|
|
|
|
return Object.keys(data).map((key) => {
|
|
const valueData = data[key];
|
|
const label = idpara[Number(key)]; // Convert the key to a number and map it to a label using idpara
|
|
|
|
return {
|
|
label: label !== undefined ? label : "Unknown Label", // Fallback if label is undefined
|
|
value: valueData && valueData.value !== undefined && valueData.unitId !== undefined
|
|
? `${valueData.value} ${unitpair[valueData.unitId]}` // Combine value with unit
|
|
: `${valueData.value}`, // Just use the value if unitId is missing
|
|
};
|
|
});
|
|
};
|
|
|
|
const check = transformData(currentMeasurement)
|
|
console.log("current measurement",check);
|
|
|
|
// setCurrentMeasurement(transformData(currentMeasurement));
|
|
|
|
|
|
// const historyData = items.filter((item) => item.empId == pid);
|
|
// // console.log(" measurement history data :- ",historyData);
|
|
// if (historyData.length > 0) {
|
|
// const data = historyData.map((item) => {
|
|
// return {
|
|
// date: item.date,
|
|
// bodyMeasurementValues: transformData(item.bodyMeasurementValues),
|
|
// };
|
|
// });
|
|
// setMeasurementHistory(data);
|
|
// console.log("history object", data);
|
|
// }
|
|
|
|
// const getLatestDataForEmpId = (data, empId) => {
|
|
// return data.reduce((latest, current) => {
|
|
// if (current.empId == empId) {
|
|
// return !latest ||
|
|
// new Date(current.lastModified) > new Date(latest.lastModified)
|
|
// ? current
|
|
// : latest;
|
|
// }
|
|
// return latest;
|
|
// }, null);
|
|
// };
|
|
// const latestData = getLatestDataForEmpId(items, pid);
|
|
// console.log("measurement latest data",latestData);
|
|
|
|
// if (latestData.bodyMeasurementValues != null) {
|
|
// const formattedData = transformData(latestData.bodyMeasurementValues);
|
|
// setParameters(formattedData);
|
|
// console.log("parameter array :", formattedData);
|
|
// }
|
|
} catch (err) {
|
|
console.error("Failed to fetch data: ", err);
|
|
// setRowData([]);
|
|
}
|
|
};
|
|
|
|
getAllOhc();
|
|
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
}, [fetchTrigger, pid, axiosClientPrivate, idpara, unitpair,currentConsultationId]);
|
|
|
|
//patient Exercise plan
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
|
|
const getAllOhc = async () => {
|
|
try {
|
|
const response = await axiosClientPrivate.get(
|
|
"/patient-exercise-plans",
|
|
{ signal: controller.signal }
|
|
);
|
|
const items = response.data.content;
|
|
console.log("exercise items", items);
|
|
|
|
const getLatestDataForEmpId = (data, empId) => {
|
|
return data.reduce((latest, current) => {
|
|
if (current.empId == empId) {
|
|
return !latest ||
|
|
new Date(current.lastModified) > new Date(latest.lastModified)
|
|
? current
|
|
: latest;
|
|
}
|
|
return latest;
|
|
}, null);
|
|
};
|
|
const latestData = getLatestDataForEmpId(items, pid);
|
|
console.log("exercise latest data", latestData);
|
|
|
|
const transformData = (data) => {
|
|
return Object.keys(data).map((key) => ({
|
|
label: idexercise[Number(key)], // Convert the key to a number
|
|
// value: data[key].value + data[key].value[data[key].unitId]
|
|
value: `${data[key].value} ${unitpair[data[key].unitId]}`,
|
|
}));
|
|
};
|
|
|
|
if (latestData.exercisePlanValues != null && latestData != null) {
|
|
const formattedData = transformData(latestData.exercisePlanValues);
|
|
setPatientexercise(formattedData);
|
|
console.log("exercise final value", formattedData);
|
|
}
|
|
} catch (err) {
|
|
console.error("Failed to fetch patient exercise plan: ", err);
|
|
}
|
|
};
|
|
|
|
getAllOhc();
|
|
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
}, [fetchTrigger, unitpair, idexercise, pid, axiosClientPrivate]);
|
|
|
|
//patient Deit plan
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
|
|
const getAllOhc = async () => {
|
|
try {
|
|
const response = await axiosClientPrivate.get("/patient-diet-plans", {
|
|
signal: controller.signal,
|
|
});
|
|
const items = response.data.content;
|
|
console.log("nutrients items", items);
|
|
|
|
const getLatestDataForEmpId = (data, empId) => {
|
|
// to get the latest data
|
|
return data.reduce((latest, current) => {
|
|
if (current.empId == empId) {
|
|
return !latest ||
|
|
new Date(current.lastModified) > new Date(latest.lastModified)
|
|
? current
|
|
: latest;
|
|
}
|
|
return latest;
|
|
}, null);
|
|
};
|
|
const latestData = getLatestDataForEmpId(items, pid);
|
|
console.log("exercise latest data", latestData);
|
|
|
|
const transformData = (data) => {
|
|
return Object.keys(data).map((key) => ({
|
|
label: dietpair[Number(key)], // Convert the key to a number
|
|
// value: data[key].value + data[key].value[data[key].unitId]
|
|
value: `${data[key].value} ${unitpair[data[key].unitId]}`,
|
|
}));
|
|
};
|
|
|
|
if (latestData.dietPlanDetails != null) {
|
|
const formattedData = transformData(latestData.dietPlanDetails);
|
|
setPatientdiet(formattedData);
|
|
console.log("diet final value", formattedData);
|
|
}
|
|
} catch (err) {
|
|
console.error("Failed to fetch exercise: ", err);
|
|
}
|
|
};
|
|
|
|
getAllOhc();
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
}, [unitpair, dietpair, pid, axiosClientPrivate]);
|
|
|
|
|
|
|
|
|
|
// fetching daily measurement data(tracking)
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
|
|
const getAllOhc = async () => {
|
|
try {
|
|
const response = await axiosClientPrivate.get("/patient-daily-measurements", {
|
|
signal: controller.signal,
|
|
});
|
|
const items = response.data.content;
|
|
console.log("daily measurement",items);
|
|
|
|
const getLatestDataForEmpId = (data, empId) => {
|
|
return data.reduce((latest, current) => {
|
|
if (current.empId == empId) {
|
|
return !latest ||
|
|
new Date(current.lastModified) > new Date(latest.lastModified)
|
|
? current
|
|
: latest;
|
|
}
|
|
return latest;
|
|
}, null);
|
|
};
|
|
|
|
const transformData = (data) => {
|
|
return Object.keys(data).map((key) => ({
|
|
label: idpara[Number(key)], // Convert the key to a number
|
|
value: `${data[key].value} ${unitpair[data[key].unitId]}`,
|
|
}));
|
|
}
|
|
const latestData = getLatestDataForEmpId(items, 1);
|
|
if (latestData.bodyMeasurementValues != null) {
|
|
const formattedData = transformData(latestData.bodyMeasurementValues);
|
|
setDailyParameter(formattedData);
|
|
console.log("daily measurement",formattedData);
|
|
}
|
|
|
|
|
|
setTimeout(() => {
|
|
setIsLoading(false);
|
|
}, 300);
|
|
|
|
console.log("actula fitness data :-", latestData);
|
|
|
|
} catch (err) {
|
|
console.error("Failed to fetch data: ", err);
|
|
}
|
|
};
|
|
|
|
getAllOhc();
|
|
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
}, [axiosClientPrivate,unitpair,idpara]);
|
|
|
|
|
|
// fetching daily exercise data
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
|
|
const getAllOhc = async () => {
|
|
try {
|
|
const response = await axiosClientPrivate.get("/patient-daily-exercises", {
|
|
signal: controller.signal,
|
|
});
|
|
const items = response.data.content;
|
|
|
|
const getLatestDataForEmpId = (data, empId) => {
|
|
return data.reduce((latest, current) => {
|
|
if (current.empId == empId) {
|
|
return !latest ||
|
|
new Date(current.lastModified) > new Date(latest.lastModified)
|
|
? current
|
|
: latest;
|
|
}
|
|
return latest;
|
|
}, null);
|
|
};
|
|
|
|
const transformData = (data) => {
|
|
return Object.keys(data).map((key) => ({
|
|
label: idexercise[Number(key)], // Convert the key to a number
|
|
// value: data[key].value + data[key].value[data[key].unitId]
|
|
value: `${data[key].value} ${unitpair[data[key].unitId]}`,
|
|
}));
|
|
}
|
|
const latestData = getLatestDataForEmpId(items, 1);
|
|
if (latestData.exerciseValues != null) {
|
|
const formattedData = transformData(latestData.exerciseValues);
|
|
setDailyExercise(formattedData);
|
|
}
|
|
setTimeout(() => {
|
|
setIsLoading(false);
|
|
}, 300);
|
|
console.log("actula exercise data :-", latestData);
|
|
|
|
} catch (err) {
|
|
console.error("Failed to fetch data: ", err);
|
|
}
|
|
};
|
|
|
|
getAllOhc();
|
|
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
}, [axiosClientPrivate,unitpair,idexercise]);
|
|
|
|
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
|
|
|
|
const [expanded, setExpanded] = useState("panel1");
|
|
|
|
const handleChange = (panel) => (event, newExpanded) => {
|
|
setExpanded(newExpanded ? panel : false);
|
|
};
|
|
|
|
// const exerciseData = [
|
|
// { name: 'Push-ups', minutes: 10, remarks: 'Warm-up' },
|
|
// // { name: 'Squats', minutes: 15, remarks: 'Strength training' },
|
|
// // { name: 'Running', minutes: 30, remarks: 'Cardio' },
|
|
// // { name: 'Push-ups', minutes: 10, remarks: 'Warm-up' },
|
|
// // { name: 'Squats', minutes: 15, remarks: 'Strength training' },
|
|
// // { name: 'Running', minutes: 30, remarks: 'Cardio' },
|
|
// // { name: 'Push-ups', minutes: 10, remarks: 'Warm-up' },
|
|
// // { name: 'Squats', minutes: 15, remarks: 'Strength training' },
|
|
// // { name: 'Running', minutes: 30, remarks: 'Cardio' },
|
|
// // { name: 'Push-ups', minutes: 10, remarks: 'Warm-up' },
|
|
// // { name: 'Squats', minutes: 15, remarks: 'Strength training' },
|
|
// // { name: 'Running', minutes: 30, remarks: 'Cardio' },
|
|
// // { name: 'Push-ups', minutes: 10, remarks: 'Warm-up' },
|
|
// // { name: 'Squats', minutes: 15, remarks: 'Strength training' },
|
|
// // { name: 'Running', minutes: 30, remarks: 'Cardio' },
|
|
|
|
// ];
|
|
|
|
// health parameter
|
|
// const data = [
|
|
// { value: "120cm", label: "Height", bgColor: "#ce93d8" },
|
|
// { value: "50Kg", label: "Weight", bgColor: "#ffffff", textColor: "#000" },
|
|
// { value: "22", label: "Bmi", bgColor: "#9e9e9e" },
|
|
// { value: "120/80", label: "Bp", bgColor: "#000000" },
|
|
// { value: "72bpm", label: "Pulse", bgColor: "#8bc34a" },
|
|
// { value: "80%", label: "Health Index", bgColor: "#29b6f6" },
|
|
// { value: "90 mg/dL", label: "Fbs", bgColor: "#a5d6a7" },
|
|
// { value: "140 mg/dL", label: "Rbs", bgColor: "#cfd8dc" },
|
|
// { value: "160 mg/dL", label: "Ppbs", bgColor: "#ffcc80" },
|
|
// ];
|
|
|
|
const getTextColor = (bgColor) => {
|
|
return bgColor === "#ffffff" ? "#000000" : "#ffffff";
|
|
};
|
|
|
|
const colors = [
|
|
"#ce93d8",
|
|
"#ffffff",
|
|
"#9e9e9e",
|
|
"#000000",
|
|
"#8bc34a",
|
|
"#29b6f6",
|
|
"#a5d6a7",
|
|
"#cfd8dc",
|
|
"#ffcc80",
|
|
];
|
|
|
|
|
|
// consultation - fetching current and history
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
|
|
const getAllOhc = async () => {
|
|
try {
|
|
|
|
setIsLoading(true);
|
|
const response = await axiosClientPrivate.get(
|
|
`/patient-consultations/employee/${pid}`,
|
|
{ signal: controller.signal }
|
|
);
|
|
const items = response.data.content;
|
|
console.log("patient consultation data",items);
|
|
|
|
// patient measurement target
|
|
const measurementData = (data) => {
|
|
return Object.keys(data).map((key) => ({
|
|
label: idpara[Number(key)], // Convert the key to a number
|
|
// value: data[key].value + data[key].value[data[key].unitId]
|
|
value: `${data[key].value} ${unitpair[data[key].unitId]}`,
|
|
}));
|
|
};
|
|
// patient exercise target
|
|
const exerciseData = (data) => {
|
|
return Object.keys(data).map((key) => ({
|
|
label: idexercise[Number(key)], // Convert the key to a number
|
|
// value: data[key].value + data[key].value[data[key].unitId]
|
|
value: `${data[key].value} ${unitpair[data[key].unitId]}`,
|
|
}));
|
|
};
|
|
// patient diet target
|
|
const dietData = (data) => {
|
|
return Object.keys(data).map((key) => ({
|
|
label: dietpair[Number(key)], // Convert the key to a number
|
|
// value: data[key].value + data[key].value[data[key].unitId]
|
|
value: `${data[key].value} ${unitpair[data[key].unitId]}`,
|
|
}));
|
|
};
|
|
|
|
|
|
const historyData = items.map((item)=>{
|
|
return {
|
|
consultationId : item.id,
|
|
date : historyFormat(item.date),
|
|
complaint : item.complaint,
|
|
remark : item.remark,
|
|
patientMeasurement : measurementData(item.bodyMeasurements),
|
|
patientExercise : exerciseData(item.exercises),
|
|
patientDiet : dietData(item.dietPlans)
|
|
};
|
|
})
|
|
|
|
// historyData.reverse();
|
|
if(historyData.length > 0){
|
|
historyData.reverse()
|
|
historyData.shift();
|
|
setComplaintHistory(historyData);
|
|
}
|
|
|
|
console.log('history data',historyData);
|
|
|
|
|
|
|
|
// to get the current complain,date,remark
|
|
const getLatestDataForEmpId = (data, empId) => {
|
|
return data.reduce((latest, current) => {
|
|
if (current.empId == empId) {
|
|
return !latest ||
|
|
new Date(current.lastModified) > new Date(latest.lastModified)
|
|
? current
|
|
: latest;
|
|
}
|
|
return latest;
|
|
}, null);
|
|
};
|
|
|
|
const latestData = getLatestDataForEmpId(items, pid);
|
|
setCurrentConsultationId(latestData.id)
|
|
console.log("patient latest complain",latestData);
|
|
|
|
const currentComplain = {
|
|
consultationId : latestData.id,
|
|
date : historyFormat(latestData.date),
|
|
complain : latestData.complaint,
|
|
remark : latestData.remark,
|
|
patientMeasurement : measurementData(latestData.bodyMeasurements),
|
|
patientExercise : exerciseData(latestData.exercises),
|
|
patientDiet : dietData(latestData.dietPlans)
|
|
}
|
|
setCurrentComplain(currentComplain);
|
|
setIsLoading(false);
|
|
console.log("patient latest complain",currentComplain);
|
|
}catch (err) {
|
|
console.error("Failed to fetch complain: ", err)
|
|
setIsLoading(false)
|
|
}
|
|
};
|
|
|
|
getAllOhc();
|
|
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
}, [axiosClientPrivate,idpara,idexercise,dietpair,pid,unitpair,fetchTrigger]);
|
|
|
|
const consultationDelete = async(consultationId)=>{
|
|
// alert(consultationId);
|
|
if(window.confirm('Are you sure you want to delete this data?')){
|
|
try {
|
|
await axiosClientPrivate.delete(`/patient-consultations/${consultationId}`);
|
|
toast.success("Deleted Successfully!", {
|
|
position: "top-center",
|
|
autoClose : 300
|
|
});
|
|
setFetchTrigger(Prev => Prev+1);
|
|
} catch (error) {
|
|
console.error('Error deleting row:', error);
|
|
}
|
|
}
|
|
}
|
|
|
|
// if(!currentComplain.length){
|
|
// setIsLoading(false);
|
|
// }
|
|
|
|
const hasCurrentMeasurementData = currentComplain['patientMeasurement'] && currentComplain['patientMeasurement'].length > 0;
|
|
const hasCurrentExerciseData = currentComplain['patientExercise'] && currentComplain['patientExercise'].length > 0;
|
|
const hasCurrentDietData = currentComplain['patientDiet'] && currentComplain['patientDiet'].length > 0;
|
|
|
|
|
|
|
|
|
|
|
|
// add buttons
|
|
|
|
// exercise plan
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
|
|
const getAllOhc = async () => {
|
|
try {
|
|
const response = await axiosClientPrivate.get(
|
|
"/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();
|
|
setFetchTrigger((prev) => prev + 1);
|
|
} 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(
|
|
"/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}`;
|
|
}
|
|
|
|
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 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();
|
|
setFetchTrigger((prev) => prev + 1);
|
|
} catch (error) {
|
|
console.log(finalValues);
|
|
console.error("Error:", error);
|
|
}
|
|
},
|
|
});
|
|
|
|
const switchForm = (formName, id) => {
|
|
// alert("patient id "+`${id}`);
|
|
// console.log("patient id ",id);
|
|
setCurrentForm(formName);
|
|
setPatientid(id);
|
|
setOpenPopup(true);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (currentForm === "BodyMeasurementForm") {
|
|
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 "ExerciseMinuteForm":
|
|
formikProps = exerciseMinuteFormik;
|
|
break;
|
|
case "BodyMeasurementForm":
|
|
formikProps = bodyMeasurementFormik;
|
|
break;
|
|
case "PatientDietForm":
|
|
formikProps = patientDietFormik;
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
|
|
const formComponents = {
|
|
ExerciseMinuteForm: ExerciseMinuteForm,
|
|
BodyMeasurementForm: BodyMeasurementForm,
|
|
PatientDietForm: PatientDietForm,
|
|
};
|
|
|
|
const FormComponent = formComponents[currentForm];
|
|
|
|
// const useStyles = makeStyles((theme) => ({
|
|
// tableContainer: {
|
|
// marginTop: theme.spacing(2), // Maintain margin consistency
|
|
// overflowX: 'auto', // Enable horizontal scroll for responsive behavior
|
|
// },
|
|
// table: {
|
|
// minWidth: 650, // Set a minimum width for desktop layout
|
|
// },
|
|
// tableCell: {
|
|
// padding: theme.spacing(1), // Adjust cell padding for readability
|
|
// textAlign: 'center', // Center text alignment
|
|
// borderBottom: `1px solid ${theme.palette.divider}`, // Add subtle border for visual separation
|
|
// fontSize: theme.typography.body1.fontSize, // Consistent font size
|
|
// fontWeight: theme.typography.fontWeightMedium, // Slightly bold for emphasis
|
|
// '&:nth-child(odd)': { // Alternate row background for better visual hierarchy
|
|
// backgroundColor: theme.palette.background.default,
|
|
// },
|
|
// '&:nth-child(even)': {
|
|
// backgroundColor: theme.palette.background.paper,
|
|
// },
|
|
// },
|
|
// }));
|
|
|
|
// const classes = useStyles();
|
|
|
|
// const theme = useTheme();
|
|
const isSmallScreen = useMediaQuery(theme.breakpoints.down("md"));
|
|
const isLargeScreen = useMediaQuery(theme.breakpoints.up("lg"));
|
|
const isxLargeScreen = useMediaQuery(theme.breakpoints.up("xl"));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
<Box
|
|
padding={1}
|
|
// sx={{ backgroundColor: "#e0f7fa" }}//
|
|
sx={{ backgroundColor: "#e0f7fa", height: "100vh", overflowY: "auto" }}
|
|
>
|
|
<ToastContainer />
|
|
<Stack
|
|
// spacing={isLargeScreen ? 30 : 15}
|
|
|
|
direction={isSmallScreen ? "column" : "row"}
|
|
justifyContent="center"
|
|
// justifyContent="space-around"
|
|
spacing={15}
|
|
alignItems="center"
|
|
// display={'flex'}
|
|
// flexWrap={isSmallScreen ? "wrap" : ""}
|
|
padding={1}
|
|
// spacing={8}
|
|
>
|
|
<Box component={'span'}
|
|
sx={{width : '30%'}}
|
|
display={'flex'}
|
|
flexDirection={'column'}
|
|
justifyContent={'center'}
|
|
alignItems={'center'}
|
|
>
|
|
<Avatar
|
|
alt="Profile Picture"
|
|
src={avatar} // replace with actual image path
|
|
sx={{
|
|
width: 120,
|
|
height: 120,
|
|
// marginLeft: 6,
|
|
// textAlign : 'center'
|
|
}}
|
|
variant="square"
|
|
/>
|
|
<Typography
|
|
variant="h6"
|
|
gutterBottom
|
|
sx={{
|
|
fontWeight: "bold",
|
|
color: "#00796b",
|
|
marginTop: 1,
|
|
backgroundColor: "#b2ebf2",
|
|
borderRadius: 2,
|
|
// width: 160,
|
|
width: "auto",
|
|
padding:1
|
|
}}
|
|
textAlign={"center"}
|
|
>
|
|
{/*RAJESH YADAV*/}
|
|
{patientname}
|
|
</Typography>
|
|
<Typography
|
|
variant="h6"
|
|
gutterBottom
|
|
sx={{
|
|
fontWeight: "bold",
|
|
color: "#00796b",
|
|
marginTop: 1,
|
|
backgroundColor: "#b2ebf2",
|
|
borderRadius: 2,
|
|
width: '50px',
|
|
}}
|
|
textAlign={"center"}
|
|
>
|
|
<WaterDropIcon
|
|
// sx={{ color: 'blue', marginRight: 2 }}
|
|
color="error"
|
|
// fontSize="small"
|
|
fontSize="small"
|
|
sx={{ marginBottom: "4px" }}
|
|
/>
|
|
{bloodGroup}
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Box
|
|
display={"flex"}
|
|
flexDirection={"column"}
|
|
justifyContent={"center"}
|
|
width={"100%"}
|
|
>
|
|
<Box>
|
|
<Typography
|
|
variant="h5"
|
|
gutterBottom
|
|
textAlign={"center"}
|
|
sx={{
|
|
fontWeight: "bold",
|
|
color: "#00796b",
|
|
marginTop: 0,
|
|
// marginBottom: 5,
|
|
backgroundColor: "#b2ebf2",
|
|
borderRadius: 2,
|
|
width : '100%'
|
|
}}
|
|
>
|
|
Patient Dashboard
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Box display={"flex"} flexWrap="wrap" columnGap={3} >
|
|
{currentComplain['patientMeasurement'] && currentComplain['patientMeasurement'].length > 0 ? (
|
|
currentComplain['patientMeasurement'].map((param, index) => (
|
|
<Button
|
|
key={index}
|
|
variant="contained"
|
|
sx={{
|
|
backgroundColor: colors[index % colors.length],
|
|
color: getTextColor(colors[index % colors.length]),
|
|
borderRadius: 0,
|
|
width: 82,
|
|
height: 64,
|
|
textTransform: "none",
|
|
}}
|
|
>
|
|
<Box>
|
|
<Typography variant="body2">{param.value}</Typography>
|
|
<Typography>{param.label}</Typography>
|
|
</Box>
|
|
</Button>
|
|
))
|
|
) : (
|
|
<>
|
|
<Button
|
|
variant="contained"
|
|
sx={{
|
|
backgroundColor: "#ce93d8",
|
|
// color: getTextColor("#ce93d8"),
|
|
borderRadius: 0,
|
|
width: 80,
|
|
height: 64,
|
|
textTransform: "none",
|
|
}}
|
|
>
|
|
<Box>
|
|
<Typography variant="body2"></Typography>
|
|
<Typography>Height</Typography>
|
|
</Box>
|
|
</Button>
|
|
|
|
<Button
|
|
variant="contained"
|
|
sx={{
|
|
backgroundColor: "#ffffff",
|
|
// color: '#ffffff' || "inherit",
|
|
color: getTextColor("#ffffff"),
|
|
borderRadius: 0,
|
|
width: 80,
|
|
height: 64,
|
|
textTransform: "none",
|
|
}}
|
|
>
|
|
<Box>
|
|
<Typography variant="body2"></Typography>
|
|
<Typography>Weight</Typography>
|
|
</Box>
|
|
</Button>
|
|
|
|
<Button
|
|
variant="contained"
|
|
sx={{
|
|
backgroundColor: "#9e9e9e",
|
|
// color: '#ffffff' || "inherit",
|
|
// color: "getTextColor(item.bgColor)",
|
|
borderRadius: 0,
|
|
width: 80,
|
|
height: 64,
|
|
textTransform: "none",
|
|
}}
|
|
>
|
|
<Box>
|
|
<Typography variant="body2"></Typography>
|
|
<Typography>Bmi</Typography>
|
|
</Box>
|
|
</Button>
|
|
|
|
<Button
|
|
variant="contained"
|
|
sx={{
|
|
backgroundColor: "#000000",
|
|
color: getTextColor("#000000"),
|
|
borderRadius: 0,
|
|
width: 80,
|
|
height: 64,
|
|
textTransform: "none",
|
|
}}
|
|
>
|
|
<Box>
|
|
<Typography variant="body2"></Typography>
|
|
<Typography>Bp</Typography>
|
|
</Box>
|
|
</Button>
|
|
|
|
<Button
|
|
variant="contained"
|
|
sx={{
|
|
backgroundColor: "#8bc34a",
|
|
// color: '#ffffff' || "inherit",
|
|
color: "getTextColor(item.bgColor)",
|
|
borderRadius: 0,
|
|
width: 80,
|
|
height: 64,
|
|
textTransform: "none",
|
|
}}
|
|
>
|
|
<Box>
|
|
<Typography variant="body2"></Typography>
|
|
<Typography>Pulse</Typography>
|
|
</Box>
|
|
</Button>
|
|
|
|
<Button
|
|
variant="contained"
|
|
sx={{
|
|
backgroundColor: "#29b6f6",
|
|
// color: '#ffffff' || "inherit",
|
|
color: "getTextColor(item.bgColor)",
|
|
borderRadius: 0,
|
|
width: 80,
|
|
height: 64,
|
|
textTransform: "none",
|
|
}}
|
|
>
|
|
<Box>
|
|
<Typography variant="body2"></Typography>
|
|
<Typography>Health Index</Typography>
|
|
</Box>
|
|
</Button>
|
|
|
|
<Button
|
|
variant="contained"
|
|
sx={{
|
|
backgroundColor: "#a5d6a7",
|
|
// color: '#ffffff' || "inherit",
|
|
color: "getTextColor(item.bgColor)",
|
|
borderRadius: 0,
|
|
width: 80,
|
|
height: 64,
|
|
textTransform: "none",
|
|
}}
|
|
>
|
|
<Box>
|
|
<Typography variant="body2"></Typography>
|
|
<Typography>Fbs</Typography>
|
|
</Box>
|
|
</Button>
|
|
|
|
<Button
|
|
variant="contained"
|
|
sx={{
|
|
backgroundColor: "#cfd8dc",
|
|
// color: '#ffffff' || "inherit",
|
|
color: "getTextColor(item.bgColor)",
|
|
borderRadius: 0,
|
|
width: 80,
|
|
height: 64,
|
|
textTransform: "none",
|
|
}}
|
|
>
|
|
<Box>
|
|
<Typography variant="body2"></Typography>
|
|
<Typography>Rbs</Typography>
|
|
</Box>
|
|
</Button>
|
|
|
|
<Button
|
|
variant="contained"
|
|
sx={{
|
|
backgroundColor: "#ffcc80",
|
|
borderRadius: 0,
|
|
width: 80,
|
|
height: 64,
|
|
textTransform: "none",
|
|
}}
|
|
>
|
|
<Box>
|
|
<Typography variant="body2"></Typography>
|
|
<Typography>Ppbs</Typography>
|
|
</Box>
|
|
</Button>
|
|
</>
|
|
)}
|
|
</Box>
|
|
|
|
<Divider sx={{ marginTop: "5px" }} />
|
|
|
|
{/* Patient Information Row */}
|
|
<TableContainer
|
|
component={Paper}
|
|
sx={{
|
|
maxWidth: "100%",
|
|
overflowX: "auto",
|
|
backgroundColor: "#e0f7fa",
|
|
display : "flex",
|
|
flexWrap : "wrap"
|
|
}}
|
|
|
|
>
|
|
{isSmallScreen ? (
|
|
<Box sx={{ p: 2,display: "flex", flexDirection: "column", gap: 2,width : '100%' }} >
|
|
{Object.entries(patientinfo).map(([key, value]) => (
|
|
<Grid container key={key}>
|
|
<Grid
|
|
item
|
|
xs={6}
|
|
sx={{ fontWeight: "bold", backgroundColor: "#e0f7fa" }}
|
|
>
|
|
{key}
|
|
</Grid>
|
|
<Grid
|
|
item
|
|
xs={6}
|
|
sx={{ padding: "8px", paddingTop: "10px" }}
|
|
>
|
|
{value}
|
|
</Grid>
|
|
</Grid>
|
|
))}
|
|
</Box>
|
|
) : (
|
|
<Paper sx={{ padding: 2, backgroundColor: "#e0f7fa",width :'100%'}}>
|
|
<Box sx={{ display: "flex", justifyContent: "space-between",mb : 1 }}>
|
|
{/* Table header */}
|
|
<Grid container spacing={2}>
|
|
{Object.keys(patientinfo).map((key) => (
|
|
<Grid item xs={isSmallScreen ? 12 : 2} key={key}>
|
|
<Typography variant="subtitle1" sx={{ fontWeight: "bold", color: "#00796b" }}>
|
|
{key}
|
|
</Typography>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</Box>
|
|
<Divider />
|
|
|
|
<Box sx={{ display: "flex", justifyContent: "space-between",mt : 2 }}>
|
|
{/* Table content */}
|
|
<Grid container spacing={2}>
|
|
{Object.values(patientinfo).map((value, index) => (
|
|
<Grid item xs={isSmallScreen ? 12 : 2} key={index}>
|
|
<Typography variant="body2" sx={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
|
|
{value}
|
|
</Typography>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</Box>
|
|
</Paper>
|
|
)}
|
|
</TableContainer>
|
|
</Box>
|
|
</Stack>
|
|
|
|
{/*patient profile and patietn health data*/}
|
|
<Stack
|
|
display={"flex"}
|
|
flexDirection={"column"}
|
|
// mt={2}
|
|
padding={1}
|
|
spacing={8}
|
|
height={'100%'}
|
|
>
|
|
<Box>
|
|
<Stack
|
|
direction={isSmallScreen ? "column" : "row"}
|
|
justifyContent="flex-start"
|
|
alignItems={isSmallScreen ? "start" : "center"}
|
|
spacing={isSmallScreen ? 2 : 'auto'}
|
|
sx={{
|
|
color: "#00796b",
|
|
backgroundColor: "#b2ebf2",
|
|
borderRadius: 2,
|
|
padding: 2,
|
|
}}
|
|
>
|
|
<Typography
|
|
// variant={isxLargeScreen ? "h6" : "h6"}
|
|
gutterBottom
|
|
// textAlign={"left"}
|
|
>
|
|
Last Consultation Date : {currentComplain['date']}
|
|
</Typography>
|
|
<Typography
|
|
// variant={isxLargeScreen ? "h6" : "h6"}
|
|
gutterBottom
|
|
// textAlign="center"
|
|
>
|
|
Last Complaints :{currentComplain['complain']}
|
|
</Typography>
|
|
<Typography
|
|
// variant={isxLargeScreen ? "h6" : "h6"}
|
|
gutterBottom
|
|
// textAlign={"right"}
|
|
>
|
|
Remarks : {currentComplain['remark']}
|
|
</Typography>
|
|
<Box component={'div'}> <Button onClick={()=> navigate(`/ConsultationForm/${btoa((JSON.stringify({cid : currentComplain['consultationId'],pid : pid })))}`) }> <EditNoteRoundedIcon /></Button>
|
|
<Button color="error" onClick={()=> consultationDelete(currentComplain['consultationId'])} > <DeleteSweepRoundedIcon /> </Button> </Box>
|
|
</Stack>
|
|
|
|
<Stack
|
|
direction={isSmallScreen ? "column" : "row"}
|
|
justifyContent={isLargeScreen ? "space-around" : "center"}
|
|
spacing={2}
|
|
mt={1}
|
|
>
|
|
<Card
|
|
sx={{
|
|
width: "100%",
|
|
padding: 2,
|
|
borderRadius: "10px",
|
|
boxShadow: "2px 8px 16px rgba(0, 0, 0, 0.2)",
|
|
marginBottom: "10px",
|
|
backgroundColor: "#e0f7fa",
|
|
|
|
}}
|
|
// textAlign="center"
|
|
>
|
|
{/* Display an icon if no image is provided */}
|
|
<Typography textAlign={"center"} variant="h6" color={'#00796b'}>
|
|
Patient Health Parameter
|
|
</Typography>
|
|
|
|
<CardContent
|
|
// variant = "stack"
|
|
sx={{
|
|
// direction : 'row',
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
// justifyContent : 'left',
|
|
justifyContent: isLoading ? "center" : "flex-start" ,
|
|
alignItems: "center",
|
|
gap: 3,
|
|
}}
|
|
>
|
|
{isLoading ? (
|
|
<CircularProgress sx={{textAlign: 'center',color : "#00796b"}} />
|
|
) : hasCurrentMeasurementData ? (
|
|
currentComplain['patientMeasurement'].map((item, index) => (
|
|
<Box
|
|
variant="body2"
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
}}
|
|
key={index}
|
|
>
|
|
<span style={{ fontWeight: "bold", color: "#616161" }}>
|
|
{item.label}
|
|
</span>
|
|
<Divider />
|
|
<span style={{ color: "#424242" }}>{item.value}</span>
|
|
</Box>
|
|
))
|
|
) : (
|
|
<Typography
|
|
color="textSecondary"
|
|
style={{ color: theme.palette.grey[500] }}
|
|
marginLeft={5}
|
|
>
|
|
No parameters available
|
|
</Typography>
|
|
)}
|
|
</CardContent>
|
|
<Divider />
|
|
<Stack
|
|
// display={'flex'}
|
|
alignItems={"center"}
|
|
direction={"row"}
|
|
justifyContent={"center"}
|
|
spacing={2}
|
|
mt={1}
|
|
>
|
|
<Typography textAlign={"center"} variant="h6" color={"#00796b"}>
|
|
Patient Daily Fitness
|
|
</Typography>
|
|
{/*<Button
|
|
variant="contained"
|
|
sx={{
|
|
backgroundColor: "#00796b",
|
|
"&:hover": {
|
|
backgroundColor: "#00796b",
|
|
},
|
|
height: 28,
|
|
width: 20,
|
|
// float : 'right'
|
|
}}
|
|
onClick={() => switchForm("BodyMeasurementForm", 1)}
|
|
>
|
|
Add
|
|
</Button>*/}
|
|
</Stack>
|
|
<CardContent
|
|
// variant = "stack"
|
|
sx={{
|
|
// direction : 'row',
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
// justifyContent : 'left',
|
|
// justifyContent: "flex-start",
|
|
justifyContent: isLoading ? "center" : "flex-start" ,
|
|
// justifyContent:daillyDiet && daillyDiet.length > 0
|
|
// ? "flex-start"
|
|
// : "center",
|
|
alignItems: "center",
|
|
gap: 3,
|
|
}}
|
|
>
|
|
|
|
{isLoading ? (
|
|
<CircularProgress sx={{textAlign: 'center',color : "#00796b"}} />
|
|
) : dailyParameter && dailyParameter.length > 0 ? (
|
|
dailyParameter.map((item, index) => (
|
|
<Box
|
|
variant="body2"
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
}}
|
|
key={index}
|
|
>
|
|
<span style={{ fontWeight: "bold", color: "#616161" }}>
|
|
{item.label}
|
|
</span>
|
|
<Divider />
|
|
<span style={{ color: "#424242" }}>{item.value}</span>
|
|
</Box>
|
|
))
|
|
) : (
|
|
<Typography
|
|
color="textSecondary"
|
|
style={{ color: theme.palette.grey[500] }}
|
|
// marginLeft={5}
|
|
>
|
|
No parameters available
|
|
</Typography>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card
|
|
sx={{
|
|
// width: 600,
|
|
width: "100%",
|
|
padding: 2,
|
|
borderRadius: "10px",
|
|
boxShadow: "2px 8px 16px rgba(0, 0, 0, 0.2)",
|
|
marginBottom: "10px",
|
|
backgroundColor: "#e0f7fa",
|
|
}}
|
|
// textAlign="center"
|
|
>
|
|
{/* Display an icon if no image is provided */}
|
|
<Typography textAlign={"center"} variant="h6" color={'#00796b'}>
|
|
Patient Exercise Plan
|
|
</Typography>
|
|
|
|
<CardContent
|
|
// variant = "stack"
|
|
sx={{
|
|
// direction : 'row',
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
// justifyContent : 'left',
|
|
// justifyContent: "flex-start",
|
|
justifyContent: isLoading ? "center" : "flex-start" ,
|
|
alignItems: "center",
|
|
gap: 3,
|
|
}}
|
|
>
|
|
{isLoading ? (
|
|
<CircularProgress sx={{textAlign: 'center',color : "#00796b"}} />
|
|
) : hasCurrentExerciseData ? (
|
|
currentComplain['patientExercise'].map((item, index) => (
|
|
<Box
|
|
variant="body2"
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
}}
|
|
key={index}
|
|
>
|
|
<span style={{ fontWeight: "bold", color: "#616161" }}>
|
|
{item.label}
|
|
</span>
|
|
<Divider />
|
|
<span style={{ color: "#424242" }}>{item.value}</span>
|
|
</Box>
|
|
))
|
|
) : (
|
|
<Typography
|
|
color="textSecondary"
|
|
style={{ color: theme.palette.grey[500] }}
|
|
marginLeft={5}
|
|
>
|
|
No parameters available
|
|
</Typography>
|
|
)}
|
|
</CardContent>
|
|
|
|
<Divider />
|
|
<Stack
|
|
// display={'flex'}
|
|
alignItems={"center"}
|
|
direction={"row"}
|
|
justifyContent={"center"}
|
|
spacing={2}
|
|
mt={1}
|
|
>
|
|
<Typography textAlign={"center"} variant="h6" color={"#00796b"}>
|
|
Patient Daily Exercise
|
|
</Typography>
|
|
{/*<Button
|
|
variant="contained"
|
|
sx={{
|
|
backgroundColor: "#00796b",
|
|
"&:hover": {
|
|
backgroundColor: "#00796b",
|
|
},
|
|
height: 28,
|
|
width: 20,
|
|
// float : 'right'
|
|
}}
|
|
onClick={() => switchForm("ExerciseMinuteForm", 1)}
|
|
>
|
|
Add
|
|
</Button>*/}
|
|
</Stack>
|
|
<CardContent
|
|
// variant = "stack"
|
|
sx={{
|
|
// direction : 'row',
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
// justifyContent : 'left',
|
|
// justifyContent: "flex-start",
|
|
justifyContent: isLoading ? "center" : "flex-start" ,
|
|
// justifyContent:
|
|
// daillyDiet && daillyDiet.length > 0
|
|
// ? "flex-start"
|
|
// : "center",
|
|
alignItems: "center",
|
|
gap: 3,
|
|
}}
|
|
>
|
|
{isLoading ? (
|
|
<CircularProgress sx={{textAlign: 'center',color : "#00796b"}} />
|
|
) : dailyExercise && dailyExercise.length > 0 ? (
|
|
dailyExercise.map((item, index) => (
|
|
<Box
|
|
variant="body2"
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
}}
|
|
key={index}
|
|
>
|
|
<span style={{ fontWeight: "bold", color: "#616161" }}>
|
|
{item.label}
|
|
</span>
|
|
<Divider />
|
|
<span style={{ color: "#424242" }}>{item.value}</span>
|
|
</Box>
|
|
))
|
|
) : (
|
|
<Typography
|
|
color="textSecondary"
|
|
style={{ color: theme.palette.grey[500] }}
|
|
// marginLeft={5}
|
|
>
|
|
No exercise available
|
|
</Typography>
|
|
)}
|
|
</CardContent>
|
|
|
|
</Card>
|
|
|
|
<Card
|
|
sx={{
|
|
// width: 600,
|
|
width: "100%",
|
|
padding: 2,
|
|
borderRadius: "10px",
|
|
boxShadow: "2px 8px 16px rgba(0, 0, 0, 0.2)",
|
|
marginBottom: "10px",
|
|
backgroundColor: "#e0f7fa",
|
|
}}
|
|
// textAlign="center"
|
|
>
|
|
{/* Display an icon if no image is provided */}
|
|
<Typography textAlign={"center"} variant="h6" color={'#00796b'}>
|
|
Patient Diet Plan
|
|
</Typography>
|
|
|
|
<CardContent
|
|
// variant = "stack"
|
|
sx={{
|
|
// direction : 'row',
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
// justifyContent : 'left',
|
|
// justifyContent: "flex-start",
|
|
justifyContent: isLoading ? "center" : "flex-start" ,
|
|
|
|
alignItems: "center",
|
|
gap: 3,
|
|
}}
|
|
>
|
|
{isLoading ? (
|
|
<CircularProgress sx={{textAlign: 'center',color : "#00796b"}} />
|
|
) : hasCurrentDietData ? (
|
|
currentComplain['patientDiet'].map((item, index) => (
|
|
<Box
|
|
variant="body2"
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
}}
|
|
key={index}
|
|
>
|
|
<span style={{ fontWeight: "bold", color: "#616161" }}>
|
|
{item.label}
|
|
</span>
|
|
<Divider />
|
|
<span style={{ color: "#424242" }}>{item.value}</span>
|
|
</Box>
|
|
))
|
|
) : (
|
|
<Typography
|
|
color="textSecondary"
|
|
style={{ color: theme.palette.grey[500] }}
|
|
marginLeft={5}
|
|
>
|
|
No parameters available
|
|
</Typography>
|
|
)}
|
|
</CardContent>
|
|
|
|
<Divider />
|
|
<Stack
|
|
// display={'flex'}
|
|
alignItems={"center"}
|
|
direction={"row"}
|
|
justifyContent={"center"}
|
|
spacing={2}
|
|
mt={1}
|
|
>
|
|
<Typography textAlign={"center"} variant="h6" color={"#00796b"}>
|
|
Patient Daily Diet
|
|
</Typography>
|
|
{/*<Button
|
|
variant="contained"
|
|
sx={{
|
|
backgroundColor: "#00796b",
|
|
"&:hover": {
|
|
backgroundColor: "#00796b",
|
|
},
|
|
height: 28,
|
|
width: 20,
|
|
// float : 'right'
|
|
}}
|
|
// onClick={()=> switchForm("PatientDietForm",1)}
|
|
|
|
onClick={() => {
|
|
setOpenDietForm(true);
|
|
}}
|
|
>
|
|
Add
|
|
</Button>*/}
|
|
</Stack>
|
|
<CardContent
|
|
// variant = "stack"
|
|
sx={{
|
|
// direction : 'row',
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
// justifyContent : 'left',
|
|
// justifyContent: "flex-start",
|
|
justifyContent:
|
|
daillyDiet && daillyDiet.length > 0
|
|
? "flex-start"
|
|
: "center",
|
|
alignItems: "center",
|
|
gap: 3,
|
|
}}
|
|
>
|
|
{daillyDiet && daillyDiet.length > 0 ? (
|
|
daillyDiet.map((item, index) => (
|
|
<Box
|
|
variant="body2"
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
}}
|
|
key={index}
|
|
>
|
|
<span style={{ fontWeight: "bold", color: "#616161" }}>
|
|
{item.label}
|
|
</span>
|
|
<Divider />
|
|
<span style={{ color: "#424242" }}>{item.value}</span>
|
|
</Box>
|
|
))
|
|
) : (
|
|
<Typography
|
|
color="textSecondary"
|
|
style={{
|
|
color: theme.palette.grey[500],
|
|
textAlign: "center",
|
|
}}
|
|
// marginLeft={6}
|
|
>
|
|
No Diet available
|
|
</Typography>
|
|
)}
|
|
</CardContent>
|
|
|
|
</Card>
|
|
</Stack>
|
|
<Accordion
|
|
sx={{ backgroundColor: '#e0f7fa', marginBottom: 2,mt : 1,border: '0'}}
|
|
|
|
>
|
|
<AccordionSummary
|
|
expandIcon={<ExpandMoreIcon sx={{ color: '#00796b' }} />}
|
|
aria-controls="panel1-content"
|
|
id="panel1-header"
|
|
// sx={{textAlign : 'center',display : 'flex',justifyContent : 'center'}}
|
|
sx={{
|
|
borderRadius: "10px",
|
|
backgroundColor: '#b2ebf2',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
'&:hover': {
|
|
backgroundColor: '#80deea',
|
|
},
|
|
'&.Mui-expanded': {
|
|
backgroundColor: '#4dd0e1',
|
|
},
|
|
'& .MuiAccordionSummary-content': {
|
|
fontWeight: 'bold',
|
|
justifyContent: 'center', // Center text horizontally
|
|
},
|
|
}}
|
|
>
|
|
<Typography variant="h5" color={'#00796b'}> Consultation History </Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails>
|
|
{complaintHistory.map((item, index) => (
|
|
<Accordion
|
|
sx = {{border: 0,mt:'4px'}}
|
|
key={index}
|
|
>
|
|
<AccordionSummary
|
|
expandIcon={<ExpandMoreIcon />}
|
|
aria-controls="panel1a-content"
|
|
id="panel1a-header"
|
|
sx={{
|
|
color : '#00796b',
|
|
borderRadius: "10px",
|
|
backgroundColor: '#b2ebf2',
|
|
'&:hover': {
|
|
backgroundColor: '#80deea',
|
|
},
|
|
'&.Mui-expanded': {
|
|
backgroundColor: '#4dd0e1',
|
|
},
|
|
'& .MuiAccordionSummary-content': {
|
|
fontWeight: 'bold',
|
|
// justifyContent: 'center',
|
|
direction : isSmallScreen ? "column" : "row",
|
|
justifyContent : "space-around",
|
|
alignItems : isSmallScreen ? "start" : "center",
|
|
spacing : isSmallScreen ? 2 : 25
|
|
},
|
|
// direction : isSmallScreen ? "column" : "row",
|
|
// justifyContent : "center",
|
|
// alignItems : isSmallScreen ? "start" : "center",
|
|
// spacing : isSmallScreen ? 2 : 25
|
|
}}
|
|
>
|
|
|
|
<Typography textAlign={"left"}>Last Consultation Date : {item.date}</Typography>
|
|
<Typography textAlign={"center"}> Last Complaints : {item.complaint}</Typography>
|
|
<Typography textAlign={"right"}> Remarks : {item.remark}</Typography>
|
|
<Box component={'div'}> <Button onClick={()=> navigate(`/ConsultationForm/${btoa((JSON.stringify({cid : item.consultationId,pid : pid })))}`) }> <EditNoteRoundedIcon /></Button>
|
|
<Button color="error" onClick={()=> consultationDelete(item.consultationId)} > <DeleteSweepRoundedIcon /> </Button> </Box>
|
|
</AccordionSummary>
|
|
<AccordionDetails
|
|
// sx={{
|
|
// '& .MuiAccordionDetails-content': {
|
|
// direction : isSmallScreen ? "column" : "row",
|
|
// justifyContent :isLargeScreen ? "space-around" : "center",
|
|
// spacing :2,
|
|
// mt :1,
|
|
// }}
|
|
// }
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: isSmallScreen ? 'column' : 'row',
|
|
justifyContent: isLargeScreen ? 'space-around' : 'center',
|
|
spacing: 2,
|
|
mt: 1,
|
|
backgroundColor : "#e0f7fa"
|
|
}}
|
|
|
|
>
|
|
<Card
|
|
sx={{
|
|
width: "100%",
|
|
padding: 2,
|
|
borderRadius: "10px",
|
|
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
|
|
marginBottom: "10px",
|
|
backgroundColor: "#e0f7fa",
|
|
}}
|
|
// textAlign="center"
|
|
>
|
|
{/* Display an icon if no image is provided */}
|
|
<Typography textAlign={"center"} variant="h6" color={'#00796b'}>
|
|
Patient Health Parameter
|
|
</Typography>
|
|
|
|
<CardContent
|
|
// variant = "stack"
|
|
sx={{
|
|
// direction : 'row',
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
// justifyContent : 'left',
|
|
justifyContent: "flex-start",
|
|
alignItems: "center",
|
|
gap: 3,
|
|
}}
|
|
>
|
|
{item.patientMeasurement && item.patientMeasurement.length > 0 ? (
|
|
item.patientMeasurement.map((item, index) => (
|
|
<Box
|
|
variant="body2"
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
}}
|
|
key={index}
|
|
>
|
|
<span style={{ fontWeight: "bold", color: "#616161" }}>
|
|
{item.label}
|
|
</span>
|
|
<Divider />
|
|
<span style={{ color: "#424242" }}>{item.value}</span>
|
|
</Box>
|
|
))
|
|
) : (
|
|
<Typography
|
|
color="textSecondary"
|
|
style={{ color: theme.palette.grey[500] }}
|
|
marginLeft={5}
|
|
>
|
|
No parameters available
|
|
</Typography>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card
|
|
sx={{
|
|
// width: 600,
|
|
width: "100%",
|
|
padding: 2,
|
|
borderRadius: "10px",
|
|
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
|
|
marginBottom: "10px",
|
|
marginLeft : 3,
|
|
backgroundColor: "#e0f7fa"
|
|
}}
|
|
// textAlign="center"
|
|
>
|
|
{/* Display an icon if no image is provided */}
|
|
<Typography textAlign={"center"} variant="h6" color={'#00796b'}>
|
|
Patient Exercise Plan
|
|
</Typography>
|
|
|
|
<CardContent
|
|
// variant = "stack"
|
|
sx={{
|
|
// direction : 'row',
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
// justifyContent : 'left',
|
|
justifyContent: "flex-start",
|
|
alignItems: "center",
|
|
gap: 3,
|
|
}}
|
|
>
|
|
{item.patientExercise && item.patientExercise.length > 0 ? (
|
|
item.patientExercise.map((item, index) => (
|
|
<Box
|
|
variant="body2"
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
}}
|
|
key={index}
|
|
>
|
|
<span style={{ fontWeight: "bold", color: "#616161" }}>
|
|
{item.label}
|
|
</span>
|
|
<Divider />
|
|
<span style={{ color: "#424242" }}>{item.value}</span>
|
|
</Box>
|
|
))
|
|
) : (
|
|
<Typography
|
|
color="textSecondary"
|
|
style={{ color: theme.palette.grey[500] }}
|
|
marginLeft={5}
|
|
>
|
|
No parameters available
|
|
</Typography>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card
|
|
sx={{
|
|
// width: 600,
|
|
width: "100%",
|
|
padding: 2,
|
|
borderRadius: "10px",
|
|
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
|
|
marginBottom: "10px",
|
|
marginLeft : 3,
|
|
backgroundColor: "#e0f7fa"
|
|
}}
|
|
// textAlign="center"
|
|
>
|
|
{/* Display an icon if no image is provided */}
|
|
<Typography textAlign={"center"} variant="h6" color={'#00796b'}>
|
|
Patient Diet Plan
|
|
</Typography>
|
|
|
|
<CardContent
|
|
// variant = "stack"
|
|
sx={{
|
|
// direction : 'row',
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
// justifyContent : 'left',
|
|
justifyContent: "flex-start",
|
|
alignItems: "center",
|
|
gap: 3,
|
|
|
|
}}
|
|
>
|
|
{item.patientDiet && item.patientDiet.length > 0 ? (
|
|
item.patientDiet.map((item, index) => (
|
|
<Box
|
|
variant="body2"
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
}}
|
|
key={index}
|
|
>
|
|
<span style={{ fontWeight: "bold", color: "#616161" }}>
|
|
{item.label}
|
|
</span>
|
|
<Divider />
|
|
<span style={{ color: "#424242" }}>{item.value}</span>
|
|
</Box>
|
|
))
|
|
) : (
|
|
<Typography
|
|
color="textSecondary"
|
|
style={{ color: theme.palette.grey[500] }}
|
|
marginLeft={5}
|
|
>
|
|
No parameters available
|
|
</Typography>
|
|
)}
|
|
</CardContent>
|
|
|
|
</Card>
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
))}
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
<BottomRightDial >
|
|
Add Consultation
|
|
</BottomRightDial>
|
|
<Button
|
|
variant="contained"
|
|
sx={{
|
|
backgroundColor: '#00796b',
|
|
'&:hover': {
|
|
backgroundColor: '#00796b',
|
|
},
|
|
float : 'right'
|
|
}}
|
|
endIcon={<AddCircleOutlineRoundedIcon />}
|
|
onClick={() =>navigate(`/ConsultationForm/${patietnEncodeId}`)}
|
|
>
|
|
Add Consultation
|
|
</Button>
|
|
</Box>
|
|
</Stack>
|
|
|
|
<Popup
|
|
showupdate={showupdate}
|
|
setShowupdate={setShowupdate}
|
|
resetForm={formikProps.resetForm}
|
|
handleSubmit={formikProps.handleSubmit}
|
|
openPopup={openPopup}
|
|
setOpenPopup={setOpenPopup}
|
|
title={titlle}
|
|
>
|
|
<FormComponent
|
|
unit={unit}
|
|
nutrientpair={nutrientpair}
|
|
bodyparameterpair={bodyparameterpair}
|
|
exerciseMinuteFormik={exerciseMinuteFormik}
|
|
nutrient={nutrient}
|
|
bodyparams={bodyparams}
|
|
exercises={exercises}
|
|
values={formikProps.values}
|
|
touched={formikProps.touched}
|
|
errors={formikProps.errors}
|
|
handleBlur={formikProps.handleBlur}
|
|
handleChange={formikProps.handleChange}
|
|
setFieldValue={formikProps.setFieldValue}
|
|
handleSubmit={formikProps.handleSubmit}
|
|
/>
|
|
</Popup>
|
|
|
|
<React.Fragment>
|
|
<Dialog
|
|
open={open}
|
|
onClose={handleClose}
|
|
// scroll={scroll}
|
|
aria-labelledby="scroll-dialog-title"
|
|
aria-describedby="scroll-dialog-description"
|
|
>
|
|
<DialogTitle id="scroll-dialog-title">{historyTitle}</DialogTitle>
|
|
<DialogContent>
|
|
<DialogContentText
|
|
id="scroll-dialog-description"
|
|
// ref={descriptionElementRef}
|
|
tabIndex={-1}
|
|
>
|
|
<Grid container spacing={2}>
|
|
{measurementHistory.map((item, index) => (
|
|
<React.Fragment key={index}>
|
|
<Grid item xs={12}>
|
|
<Typography
|
|
variant="h6"
|
|
sx={{ color: "#424242", marginBottom: 1 }}
|
|
>
|
|
{historyFormat(item.date)}
|
|
</Typography>
|
|
</Grid>
|
|
{item.bodyMeasurementValues.map((measurement, subIndex) => (
|
|
<React.Fragment key={subIndex}>
|
|
<Grid item xs={12} sm={6}>
|
|
<Typography
|
|
variant="body2"
|
|
sx={{ fontWeight: "bold", color: "#616161" }}
|
|
>
|
|
{measurement.label}:
|
|
</Typography>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} sm={6}>
|
|
<Typography variant="body2" sx={{ color: "#424242" }}>
|
|
{measurement.value}
|
|
</Typography>
|
|
</Grid>
|
|
</React.Fragment>
|
|
))}
|
|
{index < measurementHistory.length - 1 && (
|
|
<Grid item xs={12} sx={{ marginY: 2 }}>
|
|
<Divider />
|
|
</Grid>
|
|
)}
|
|
</React.Fragment>
|
|
))}
|
|
</Grid>
|
|
</DialogContentText>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
{/*<Button onClick={handleClose}>Cancel</Button>*/}
|
|
|
|
<Button
|
|
onClick={handleClose}
|
|
sx={{
|
|
backgroundColor: "#00796b",
|
|
":hover": { backgroundColor: "#004d40" },
|
|
}}
|
|
size="small"
|
|
variant="contained"
|
|
>
|
|
Ok
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
</React.Fragment>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default DoctorDashboard;
|