5072 lines
172 KiB
Plaintext
5072 lines
172 KiB
Plaintext
import {
|
|
|
|
Button,
|
|
Stack,
|
|
Typography,
|
|
Avatar,
|
|
Grid,
|
|
useMediaQuery,
|
|
|
|
Card,
|
|
CardContent,
|
|
TextField,
|
|
// Tabs,
|
|
// Tab,
|
|
} from "@mui/material";
|
|
import { useTheme } from "@mui/material/styles";
|
|
import Box from '@mui/material/Box';
|
|
|
|
import dayjs from 'dayjs';
|
|
// import BottomRightDial from './BottomRightDial'
|
|
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 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 } 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";
|
|
|
|
// exercise,measurement,diet pop forms
|
|
import ExerciseMinuteForm from "./ExerciseMinuteForm";
|
|
// import DailyMeasurementForm from "./DailyMeasurementForm";
|
|
import PatientDietForm from "./PatientDietForm";
|
|
import Autocomplete from "@mui/material/Autocomplete";
|
|
// import Modal from '@mui/material/Modal'; // dietform modal
|
|
import CancelRoundedIcon from "@mui/icons-material/CancelRounded";
|
|
// import SingleSelect from "../common/SingleSelect";
|
|
// 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 CircularProgress from '@mui/material/CircularProgress';
|
|
import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
|
|
import EditNoteRoundedIcon from '@mui/icons-material/EditNoteRounded';
|
|
// import AddCircleOutlineRoundedIcon from "@mui/icons-material/AddCircleOutlineRounded";
|
|
import { useNavigate } from "react-router-dom";
|
|
import DeleteSweepRoundedIcon from '@mui/icons-material/DeleteSweepRounded';
|
|
import { Line } from 'react-chartjs-2';
|
|
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js';
|
|
//table
|
|
import {
|
|
Table,
|
|
// CardMedia,
|
|
TableBody,
|
|
TableCell,
|
|
TableContainer,
|
|
TableHead,
|
|
TableRow,
|
|
Paper,
|
|
} from "@mui/material";
|
|
import WaterDropIcon from "@mui/icons-material/WaterDrop"; // bloodgroup icon
|
|
import Input from "../common/Input";
|
|
// import PropTypes from "prop-types";
|
|
// import { Grid} from "@mui/material";
|
|
// import SingleSelect from "../common/SingleSelect";
|
|
import InputAdornment from '@mui/material/InputAdornment';
|
|
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
|
import { stringify } from "postcss";
|
|
// import { Fullscreen } from "@mui/icons-material";
|
|
// import Input from "../common/Input";
|
|
// import TextField from "@mui/material";
|
|
// import Select from '@mui/material/Select';
|
|
// import { Formik, Field, FieldArray } from 'formik';
|
|
|
|
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 useStyles = (theme) => ({
|
|
my: 2,
|
|
p: 1,
|
|
bgcolor: theme.palette.mode === 'dark' ? '#101010' : 'grey.100',
|
|
color: theme.palette.mode === 'dark' ? 'grey.500' : 'grey.700', // Adjusted color to be lighter
|
|
border: '1px solid',
|
|
borderColor: theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300',
|
|
borderRadius: 2,
|
|
fontSize: '1rem',
|
|
fontWeight: '700',
|
|
});
|
|
|
|
const PatientDashboard = () => {
|
|
// 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 [updateFuntion,setUpdateFuntion] = useState(null);
|
|
const [id,setId] = useState(1);
|
|
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 [currentComplain, setCurrentComplain] = useState({});
|
|
const [complaintHistory, setComplaintHistory] = useState([]);
|
|
|
|
// history model state
|
|
// const [open, setOpen] = useState(false);
|
|
// const [historyTitle, setHistoryTitle] = useState("");
|
|
// patient history
|
|
const [dailyMeasurementHistory, setDailyMeasurementHistory] = useState([]);
|
|
const [exerciseHistory,setExerciseHistory] = useState([]);
|
|
const [dietHistory,setDietHistory] = useState([]);
|
|
const [updateDate,setUpdateDate] = useState(null);
|
|
|
|
// patient dailly parameter,exericse,and diet
|
|
const [dailyParameter, setDailyParameter] = useState([]);
|
|
const [dailyExercise, setDailyExercise] = useState([]);
|
|
const [daillyDiet, setDailyDiet] = useState([]);
|
|
|
|
const [currentDailyMeasurementId,setCurrentDailyMeasurementId] = useState();
|
|
const [currentDailyExerciseId,setCurrentDailyExercisetId] = useState();
|
|
const [currentDailyDietId,setCurrentDailyDiettId] = useState();
|
|
|
|
const [foodName, setFoodName] = useState([]);
|
|
const mealTime = ["Breakfast", "Brunch", "Lunch", "Evening Snacks", "Dinner"];
|
|
const [bloodGroup, setBloodGroup] = useState("");
|
|
const [idNutrientPair,setIdNutrientPair] = useState({});
|
|
const[foodNutrition,setFoodNutrition] = useState([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
const [openDietForm, setOpenDietForm] = useState(false);
|
|
const [trigerDiet,setTriggerDiet] = useState(0);
|
|
const [dietTriggerUpdate,setDietTriggerUpdate] = useState(0)
|
|
const patientId = 1;
|
|
const getDefaultMealTime = () => {
|
|
const currentHour = new Date().getHours();
|
|
|
|
if (currentHour < 12) {
|
|
return "Breakfast";
|
|
} else if (currentHour < 15) {
|
|
return "Lunch";
|
|
} else if (currentHour < 20) {
|
|
return "Evening Snacks";
|
|
} else {
|
|
return "Dinner";
|
|
}
|
|
};
|
|
const date = dayjs().format('YYYY-MM-DD');
|
|
|
|
const [defaultMealTime, setDefaultMealTime] = useState(getDefaultMealTime());
|
|
// const foodTemplate = {patientId : patientId, date: date, foodEntries :[{foodId : "", intakeQuantity: "",meals :defaultMealTime} ] , nutrients: []};
|
|
const foodTemplate = { date: date,mealtime :defaultMealTime,foodname: "", quantityInGrams: "" , nutrients: []};
|
|
const [dietTextField, setDietTextField] = useState([foodTemplate]);
|
|
const [currentRowIndex, setCurrentRowIndex] = useState(null);
|
|
const [RowIndex, setRowIndex] = useState(0);
|
|
const [showButtonUpdateDiet,setshowButtonUpdateDiet] = useState(false);
|
|
const [updateDietDate,setUpdateDietDate] = useState()
|
|
|
|
const [openMeasurementForm, setOpenMeasurementForm] = useState(false);
|
|
const [showMeasurementUpdate,setShowMeasurementUpdate] = useState(false);
|
|
const [measurementTriggerUpdate,setMeasurementTriggerUpdate] = useState(0)
|
|
const [triggerMeasurementSubmit,setTriggerMeasurementSubmit] = useState(0);
|
|
|
|
const [openDailyExerciseForm,setOpenDailyExerciseForm] = useState(false)
|
|
const [showExerciseupdate,setShowExerciseupdate] = useState(false)
|
|
const [exerciseTrigger, setExerciseTrigger] = useState(0);
|
|
const [exerciseTriggerUpdate,setExerciseTriggerUpdate] = useState(0)
|
|
const [triggerExerciseSubmit,setTriggerExerciseSubmit] = useState(0);
|
|
// const [exerciseTriggerUpdate,setExerciseTriggerUpdate] = useState(0)
|
|
|
|
const [weightData, setWeightData] = useState([]);
|
|
const [dateLabels, setDateLabels] = useState([]);
|
|
|
|
|
|
// console.log("today date",typeof(date));
|
|
|
|
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]);
|
|
|
|
// const formik = useFormik({
|
|
// initialValues: {
|
|
// rows: [{ date: '', foodname: '', quantityInGrams: '' }]
|
|
// },
|
|
// // validationSchema: validationSchema,
|
|
// onSubmit: (values, { setFieldValue }) => {
|
|
// // Implement your save logic here
|
|
// console.log('Form data:', values);
|
|
// // For demonstration purposes, we're just logging the values to the console
|
|
// // You can replace this with your actual save functionality
|
|
|
|
// // After saving, add a new empty row
|
|
// setFieldValue('rows', [
|
|
// ...values.rows,
|
|
// { date: '', foodname: '', quantityInGrams: '' }
|
|
// ]);
|
|
// }
|
|
// });
|
|
|
|
|
|
// const theme = useTheme();
|
|
|
|
|
|
|
|
// 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);
|
|
const pid = 1;
|
|
// const patietnEncodeId = btoa(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);
|
|
|
|
|
|
// id and nutrient name
|
|
const id_nutrientname_pair = {};
|
|
items.forEach(item => {
|
|
id_nutrientname_pair[item.id] = item.nutrientName;
|
|
});
|
|
setIdNutrientPair(id_nutrientname_pair);
|
|
console.log("id and nutrient name :-", id_nutrientname_pair);
|
|
|
|
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("patient target measurement values",items);
|
|
|
|
// const parameter = items.find((item) => item.empId == patientid)
|
|
const transformData = (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]}`,
|
|
}));
|
|
};
|
|
|
|
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]);
|
|
|
|
//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]);
|
|
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
|
|
const [expanded, setExpanded] = useState("panel1");
|
|
|
|
const getTextColor = (bgColor) => {
|
|
return bgColor === "#ffffff" ? "#000000" : "#ffffff";
|
|
};
|
|
|
|
const colors = [
|
|
"#ce93d8",
|
|
"#ffffff",
|
|
"#9e9e9e",
|
|
"#000000",
|
|
"#8bc34a",
|
|
"#29b6f6",
|
|
"#a5d6a7",
|
|
"#cfd8dc",
|
|
"#ffcc80",
|
|
];
|
|
|
|
// const defaultLabels = [
|
|
// "Height", "Weight", "Bmi", "Bp", "Pulse",
|
|
// "Health Index", "Fbs", "Rbs", "Ppbs"
|
|
// ];
|
|
|
|
// Ensure only the first 9 labels are considered
|
|
// const displayedParameters = defaultLabels.slice(0, 9).map(label => {
|
|
// const param = parameters.find(p => p.label.toLowerCase() === label.toLowerCase());
|
|
// return param ? param : { label: label, value: 0 };
|
|
// });
|
|
// const patientData = [
|
|
// { label: 'PATIENT ID', value: '1' },
|
|
// { label: 'PATIENT NAME', value: 'AWTAR' },
|
|
// { label: 'FATHER NAME', value: 'LATE D S NEGI' },
|
|
// { label: 'DATE OF BIRTH', value: '12-02-1990' },
|
|
// { label: 'AGE', value: '34' },
|
|
// { label: 'EMAIL', value: 'test21@gmail.com' }
|
|
// ];
|
|
|
|
//complain history
|
|
|
|
// complain
|
|
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 = complainIterator.map((item)=>{
|
|
// return {
|
|
// date : historyFormat(item.date),
|
|
// complaint : item.complaint,
|
|
// remark : item.remark,
|
|
// patientMeasurement : measurementData(item.bodyMeasurementValues),
|
|
// patientExercise : exerciseData(item.exercisePlanValues),
|
|
// patientDiet : dietData(item.dietPlanDetails)
|
|
// };
|
|
// })
|
|
// 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 = {
|
|
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]);
|
|
|
|
|
|
const hasTargerMeasurementData = currentComplain['patientMeasurement'] && currentComplain['patientMeasurement'].length > 0;
|
|
const hasTargetExerciseData = currentComplain['patientMeasurement'] && currentComplain['patientMeasurement'].length > 0;
|
|
const hasTargetDietData = currentComplain['patientMeasurement'] && currentComplain['patientMeasurement'].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();
|
|
};
|
|
}, [exerciseTrigger,axiosClientPrivate]);
|
|
// console.log("jhkhkjh",exercises);
|
|
const exerciseMinuteFormik = useFormik({
|
|
enableReinitialize: true,
|
|
initialValues: {
|
|
exercises: exercises.map((item) => ({
|
|
exercisename: item.exercisename || item.exerciseName,
|
|
minutes: item.exercisevalue || "",
|
|
remark: showExerciseupdate ? item.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,
|
|
exerciseValues: exercisePlanValues,
|
|
};
|
|
|
|
console.log("exercise final json obj", finalValues);
|
|
|
|
try {
|
|
const response = await axiosClientPrivate.post(
|
|
"/patient-daily-exercises",
|
|
finalValues
|
|
);
|
|
toast.success("Saved Successfully!", {
|
|
position: "top-center",
|
|
autoClose : 500
|
|
});
|
|
console.log("Response:", response.data);
|
|
resetForm();
|
|
setTriggerExerciseSubmit(prev => prev+1);
|
|
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.unitId];
|
|
paraid[item.bmName] = item.id;
|
|
paraunitid[item.bmName] = item.unitId;
|
|
});
|
|
console.log("check key value parameter", parameter);
|
|
setBodyparameterpair(parameter);
|
|
console.log("parameter and unit name pair",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,fetchTrigger]);
|
|
|
|
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.measurementname || item.bmName,
|
|
measuremenvalue: item.measuremenvalue || "",
|
|
remark: showMeasurementUpdate ? item.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(" daily measurement values:", finalValues);
|
|
try {
|
|
const response = await axiosClientPrivate.post(
|
|
"/patient-daily-measurements",
|
|
finalValues
|
|
);
|
|
toast.success("Saved Successfully!", {
|
|
position: "top-center",
|
|
autoClose : 500
|
|
});
|
|
console.log("Response:", response.data);
|
|
resetForm();
|
|
setTriggerMeasurementSubmit((prev) => prev + 1);
|
|
setFetchTrigger((prev) => prev + 1);
|
|
} catch (error) {
|
|
console.log("daily measurement error",finalValues);
|
|
console.error("Error:", error);
|
|
}
|
|
},
|
|
});
|
|
//food items
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
|
|
const getAllOhc = async () => {
|
|
try {
|
|
const response = await axiosClientPrivate.get("/foods", {
|
|
signal: controller.signal,
|
|
});
|
|
const items = response.data.content;
|
|
const foodName = items.map((item) => ({
|
|
label: item.foodName,
|
|
value: item.id,
|
|
}));
|
|
|
|
setFoodName(foodName);
|
|
console.log("food name :- ", foodName);
|
|
} catch (err) {
|
|
console.error("Failed to fetch data: ", err);
|
|
}
|
|
};
|
|
|
|
getAllOhc();
|
|
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
}, [axiosClientPrivate]);
|
|
// fetching today's measurement data
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
|
|
const getAllOhc = async () => {
|
|
try {
|
|
|
|
const response = await axiosClientPrivate.get(`/patient-daily-measurements/${patientId}?date=${date}`, {
|
|
signal: controller.signal,
|
|
});
|
|
|
|
// console.log("m rrr",response.data);
|
|
|
|
|
|
|
|
const items = response.data.bodyMeasurementValues;
|
|
// console.log('today measurement',items);
|
|
|
|
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]}`,
|
|
}));
|
|
}
|
|
|
|
if (items != null) {
|
|
const formattedData = transformData(items);
|
|
setDailyParameter(formattedData);
|
|
console.log('today measurement formate',formattedData);
|
|
}
|
|
setIsLoading(false);
|
|
|
|
|
|
|
|
} catch (err) {
|
|
console.error("Failed to today measurement data: ", err);
|
|
}
|
|
};
|
|
|
|
getAllOhc();
|
|
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
}, [axiosClientPrivate,unitpair,idpara,date,patientId,measurementTriggerUpdate,triggerMeasurementSubmit]);
|
|
// measurement history
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
|
|
const getAllOhc = async () => {
|
|
try {
|
|
|
|
const url = `/patient-daily-measurements/empId/${patientId}`
|
|
console.log("check url",url);
|
|
|
|
const response = await axiosClientPrivate.get(`/patient-daily-measurements/empId/${patientId}`, { signal: controller.signal })
|
|
console.log("measuremen data",response.data);
|
|
|
|
const chartData = [...response.data];
|
|
|
|
chartData.reverse();
|
|
//15 days
|
|
if(chartData.length >=15){
|
|
const newDate = chartData.slice(0, 15);
|
|
const date = newDate.map((item)=>{
|
|
return item.date;
|
|
})
|
|
setDateLabels(date);
|
|
}
|
|
else{
|
|
const date = chartData.map((item)=>{
|
|
return item.date;
|
|
})
|
|
setDateLabels(date);
|
|
}
|
|
|
|
// console.log("measurement",date);
|
|
if(chartData.length >=15){
|
|
const newDate = chartData.slice(0, 15);
|
|
const weight = newDate.map((item)=>{
|
|
return item.bodyMeasurementValues['2'].value;
|
|
})
|
|
setWeightData(weight)
|
|
}
|
|
else{
|
|
const weight = chartData.map((item)=>{
|
|
return item.bodyMeasurementValues['2'].value;
|
|
})
|
|
setWeightData(weight)
|
|
}
|
|
|
|
|
|
// setWeightData(weight)
|
|
|
|
// console.log("weigth",weight);
|
|
|
|
const items = response.data;
|
|
console.log("check measurement",items);
|
|
|
|
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 transformData = (data)=> {
|
|
// // return data.flatMap((entry) =>
|
|
// return Object.entries(data).map(([key, item]) => ({
|
|
// // exercisename: idExerciseNamePair[parseInt(nutrientId)],
|
|
// // exercisevalue: item.value.toString(), // Convert value to string if needed
|
|
// // remark: item.remark,
|
|
// label: idpara[Number(key)], // Convert the key to a number
|
|
// value: `${data[key].value} ${unitpair[data[key].unitId]}`,
|
|
// }))
|
|
// // );
|
|
// }
|
|
const measurementHistory = items.map((item)=>{
|
|
return {
|
|
id : item.id,
|
|
date : item.date,
|
|
formateDate : historyFormat(item.date),
|
|
bodyMeasurementValues : transformData(item.bodyMeasurementValues)
|
|
}
|
|
})
|
|
|
|
// console.log("check111",measurementHistory);
|
|
measurementHistory.shift();
|
|
setDailyMeasurementHistory(measurementHistory);
|
|
// console.log('history measurement',items);
|
|
|
|
// 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){
|
|
// setCurrentDailyMeasurementId(latestData.id)
|
|
// }
|
|
// console.log("change",items);
|
|
// setCurrentDailyMeasurementId(response.data.id)
|
|
|
|
// if (items != null) {
|
|
// const formattedData = transformData(items);
|
|
// setDailyParameter(formattedData);
|
|
// }
|
|
// setIsLoading(false);
|
|
|
|
} catch (err) {
|
|
console.error("Failed to fetch measurement history data: ", err);
|
|
}
|
|
};
|
|
|
|
getAllOhc();
|
|
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
}, [axiosClientPrivate,unitpair,idpara,patientId,measurementTriggerUpdate]);
|
|
|
|
const handleMeasurement = async (date) => {
|
|
setUpdateDate(date);
|
|
// alert("date"+typeof(date)+" "+"patient id"+patientId);
|
|
try {
|
|
|
|
const res = await axiosClientPrivate.get(
|
|
"/measurements",
|
|
// { signal: controller.signal }
|
|
);
|
|
const items = res.data.content;
|
|
|
|
const idparaNamePair = {};
|
|
items.forEach((item) => {
|
|
idparaNamePair[item.id] = item.bmName;
|
|
});
|
|
|
|
|
|
const response = await axiosClientPrivate.get(`patient-daily-measurements/${patientId}?date=${date}`);
|
|
|
|
console.log("measurement edit",response.data);
|
|
|
|
// const transformData = (data)=> {
|
|
// // return data.flatMap((entry) =>
|
|
// Object.entries(data).map(([nutrientId, item]) => ({
|
|
// // measurementname: idparaNamePair[parseInt(nutrientId)],
|
|
// measurementname: `${nutrientId}undefined`,
|
|
// measuremenvalue: item.value.toString(), // Convert value to string if needed
|
|
// remark: item.remark,
|
|
// }))
|
|
// // );
|
|
// }
|
|
|
|
const transformData = (data) => {
|
|
return Object.entries(data).map(([nutrientId, item]) => ({
|
|
measurementname: idparaNamePair[parseInt(nutrientId)], // Replace `undefined` with your actual logic if needed
|
|
measuremenvalue: item.value.toString(), // Convert value to string
|
|
remark: item.remark,
|
|
}));
|
|
};
|
|
const existingData = transformData(response.data.bodyMeasurementValues);
|
|
setBodyparams(existingData);
|
|
console.log("edit daily measurement",existingData);
|
|
// bodyMeasurementFormik.setFieldValue("id",response.data.id);
|
|
// bodyMeasurementFormik.setFieldValue("foodCode",response.data.foodCode);
|
|
// bodyMeasurementFormik.setFieldValue("foodName",response.data.foodName);
|
|
// bodyMeasurementFormik.setFieldValue("baseQuantity",response.data.baseQuantity);
|
|
// bodyMeasurementFormik.setFieldValue("unit",String(updateunit));
|
|
// bodyMeasurementFormik.setFieldValue("remark",response.data.remark);
|
|
// bodyMeasurementFormik.setFieldValue("lastModified", response.data.lastModified);
|
|
// bodyMeasurementFormik.setFieldValue("modifiedBy", response.data.modifiedBy);
|
|
// setId(response.data.empId,date);
|
|
// setShowupdate(true);
|
|
setOpenMeasurementForm(true);
|
|
setShowMeasurementUpdate(true);
|
|
} catch (error) {
|
|
console.error('Error fetching measurement for edit:', error);
|
|
}
|
|
};
|
|
const handleMeasurementUpdate = async()=>{
|
|
// alert("i got clicked")
|
|
console.log("measurement values",bodyMeasurementFormik.values);
|
|
|
|
const filteredMeasurement = bodyMeasurementFormik.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;
|
|
}, {});
|
|
console.log("formate check",bodyMeasurementValues);
|
|
|
|
const update = {
|
|
empId: patientId,
|
|
date: updateDate,
|
|
bodyMeasurementValues: bodyMeasurementValues,
|
|
}
|
|
|
|
console.log("final patient update date",updateDate);
|
|
|
|
try{
|
|
// console.log(values);
|
|
// setTimeout(() => {
|
|
await axiosClientPrivate.put(`patient-daily-measurements/${patientId}?date=${updateDate}`,update);
|
|
toast.success("Updated Successfully!",{
|
|
position:"top-center",
|
|
autoClose: 500,
|
|
});
|
|
setMeasurementTriggerUpdate(prev => prev+1);
|
|
|
|
// }, 1000);
|
|
}
|
|
catch(err){
|
|
console.log(bodyMeasurementFormik.values);
|
|
console.log(err);
|
|
}
|
|
|
|
}
|
|
const measurementDelete = async(date)=>{
|
|
// alert(consultationId);
|
|
if(window.confirm('Are you sure you want to delete this data?')){
|
|
try {
|
|
await axiosClientPrivate.delete(`patient-daily-measurements/${patientId}?date=${date}`);
|
|
toast.success("Deleted Successfully!", {
|
|
position: "top-center",
|
|
autoClose : 300
|
|
});
|
|
setMeasurementTriggerUpdate(Prev => Prev+1);
|
|
} catch (error) {
|
|
console.error('Error deleting row:', error);
|
|
}
|
|
}
|
|
}
|
|
|
|
// weight chartJs data
|
|
const measurementData = {
|
|
// labels: ['01-09-2024', '02-09-2024', '03-09-2024'], // Dates
|
|
labels: dateLabels, // Dates
|
|
datasets: [
|
|
{
|
|
label: 'Weight (kg)',
|
|
// data: [100, 99.7, 99.2], // Weight values corresponding to the dates
|
|
data : weightData,
|
|
borderColor: '#8884d8',
|
|
fill: false,
|
|
tension: 0.1,
|
|
},
|
|
{
|
|
label: 'Target Weight',
|
|
data: Array(dateLabels.length).fill(80), // Creates a horizontal line at the target weight of 85 kg
|
|
borderColor: 'red',
|
|
borderDash: [10, 5],
|
|
fill: false,
|
|
tension: 0.1,
|
|
},
|
|
],
|
|
};
|
|
const measurementOptions = {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
position: 'top',
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: 'Patient Weight Trend'
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
display: true,
|
|
title: {
|
|
display: true,
|
|
text: "Date"
|
|
}
|
|
},
|
|
y: {
|
|
min: 75,
|
|
max: 100, // Adjust to fit your weight range
|
|
title: {
|
|
display: true,
|
|
text: 'Weight'
|
|
},
|
|
},
|
|
}
|
|
};
|
|
|
|
|
|
// fetching today's exercise data
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
|
|
const getAllOhc = async () => {
|
|
try {
|
|
const response = await axiosClientPrivate.get(`/patient-daily-exercises/${patientId}?date=${date}`, {
|
|
signal: controller.signal,
|
|
});
|
|
const items = response.data.exerciseValues;
|
|
console.log("daily exercise",response);
|
|
|
|
// 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);
|
|
|
|
setCurrentDailyExercisetId(response.data.id)
|
|
|
|
if (items != null) {
|
|
const formattedData = transformData(items);
|
|
setDailyExercise(formattedData);
|
|
}
|
|
|
|
setIsLoading(false);
|
|
|
|
// console.log("actula exercise data :-", latestData);
|
|
|
|
} catch (err) {
|
|
console.error("Failed to fetch data: ", err);
|
|
}
|
|
};
|
|
|
|
getAllOhc();
|
|
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
}, [axiosClientPrivate,unitpair,idexercise,patientId,date,exerciseTriggerUpdate,triggerExerciseSubmit]);
|
|
// history exercise
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
|
|
const getAllOhc = async () => {
|
|
try {
|
|
|
|
// const url = `/patient-daily-measurements/empId/${patientId}`
|
|
// console.log("check url",url);
|
|
|
|
const response = await axiosClientPrivate.get(`/patient-daily-exercises/empId/${patientId}`, { signal: controller.signal })
|
|
|
|
console.log("exercise history",response);
|
|
const items = response.data;
|
|
const transformData = (data) => {
|
|
return Object.keys(data).map((key) => ({
|
|
label: idexercise[Number(key)], // Convert the key to a number
|
|
value: `${data[key].value} ${unitpair[data[key].unitId]}`,
|
|
}));
|
|
}
|
|
|
|
const exerciseHistory = items.map((item)=>{
|
|
return {
|
|
id : item.id,
|
|
date : item.date,
|
|
formateDate : historyFormat(item.date),
|
|
exerciseValues : transformData(item.exerciseValues)
|
|
}
|
|
})
|
|
exerciseHistory.shift();
|
|
setExerciseHistory(exerciseHistory);
|
|
|
|
console.log('exercise history final',exerciseHistory);
|
|
|
|
// 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){
|
|
// setCurrentDailyMeasurementId(latestData.id)
|
|
// }
|
|
// console.log("change",items);
|
|
// setCurrentDailyMeasurementId(response.data.id)
|
|
|
|
// if (items != null) {
|
|
// const formattedData = transformData(items);
|
|
// setDailyParameter(formattedData);
|
|
// }
|
|
// setIsLoading(false);
|
|
|
|
} catch (err) {
|
|
console.error("Failed to fetch measurement history data: ", err);
|
|
}
|
|
};
|
|
|
|
getAllOhc();
|
|
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
}, [axiosClientPrivate,unitpair,idexercise,date,patientId,exerciseTriggerUpdate]);
|
|
const handleExercise = async (date) => {
|
|
// alert(id);
|
|
setUpdateDate(date);
|
|
try {
|
|
|
|
const res = await axiosClientPrivate.get(
|
|
"/exercise-masters",
|
|
// { signal: controller.signal }
|
|
);
|
|
const exerciseItems = res.data.content;
|
|
const idExerciseNamePair = {};
|
|
exerciseItems.forEach((item) => {
|
|
idExerciseNamePair[item.id] = item.exerciseName;
|
|
});
|
|
|
|
const response = await axiosClientPrivate.get(`patient-daily-exercises/${patientId}?date=${date}`);
|
|
|
|
console.log("exericse edit data",response);
|
|
|
|
const transformData = (data)=> {
|
|
// return data.flatMap((entry) =>
|
|
return Object.entries(data).map(([nutrientId, item]) => ({
|
|
exercisename: idExerciseNamePair[parseInt(nutrientId)],
|
|
exercisevalue: item.value.toString(), // Convert value to string if needed
|
|
remark: item.remark,
|
|
}))
|
|
// );
|
|
}
|
|
const exerciseEditData = transformData(response.data.exerciseValues);
|
|
console.log("check exercise edit data",exerciseEditData);
|
|
setExercise(exerciseEditData)
|
|
|
|
// setId(id);
|
|
setShowExerciseupdate(true);
|
|
setOpenDailyExerciseForm(true);
|
|
} catch (error) {
|
|
console.error('Error fetching item for edit:', error);
|
|
}
|
|
};
|
|
const handleExerciseUpdate = async()=>{
|
|
// alert("i got clicked")
|
|
// console.log("exercise values",exerciseMinuteFormik.values);
|
|
|
|
const filteredExercises = exerciseMinuteFormik.values.exercises.filter(
|
|
(exercise) => exercise.minutes && exercise.remark
|
|
);
|
|
|
|
const exercisePlanValues = filteredExercises.reduce((acc, param) => {
|
|
acc[exerciseid[param.exercisename]] = {
|
|
value: parseFloat(param.minutes),
|
|
// unitId: paraunitid[param.measurementname],
|
|
remark: param.remark,
|
|
};
|
|
return acc;
|
|
}, {});
|
|
console.log("formate check",exercisePlanValues);
|
|
|
|
const update = {
|
|
empId: patientId,
|
|
date: updateDate,
|
|
exerciseValues: exercisePlanValues,
|
|
}
|
|
console.log("exercise finalupdate value",update);
|
|
|
|
try{
|
|
// console.log(values);
|
|
// setTimeout(() => {
|
|
await axiosClientPrivate.put(`patient-daily-exercises/${patientId}?date=${updateDate}`,update);
|
|
toast.success("Updated Successfully!",{
|
|
position:"top-center",
|
|
autoClose: 500,
|
|
});
|
|
setExerciseTriggerUpdate(Prev => Prev+1);
|
|
|
|
// }, 1000);
|
|
}
|
|
catch(err){
|
|
console.log(exerciseMinuteFormik.values);
|
|
console.log(err);
|
|
}
|
|
|
|
}
|
|
const exerciseDelete = async(date)=>{
|
|
// alert(consultationId);
|
|
if(window.confirm('Are you sure you want to delete this data?')){
|
|
try {
|
|
await axiosClientPrivate.delete(`patient-daily-exercises/${patientId}?date=${date}`);
|
|
toast.success("Deleted Successfully!", {
|
|
position: "top-center",
|
|
autoClose : 300
|
|
});
|
|
setExerciseTriggerUpdate(Prev => Prev+1);
|
|
} catch (error) {
|
|
console.error('Error deleting row:', error);
|
|
}
|
|
}
|
|
}
|
|
|
|
const exerciseData = {
|
|
labels: dateLabels,
|
|
datasets: [
|
|
{
|
|
label: 'Exercise Minutes',
|
|
data: 60,
|
|
borderColor: '#42a5f5',
|
|
backgroundColor: '#42a5f5',
|
|
fill: false,
|
|
tension: 0.1,
|
|
},
|
|
{
|
|
label: 'Target Minutes',
|
|
data: Array(dateLabels.length).fill(60), // Target minutes line
|
|
borderColor: 'green',
|
|
borderDash: [5, 5],
|
|
fill: false,
|
|
tension: 0.1,
|
|
},
|
|
],
|
|
};
|
|
const exerciseOptions = {
|
|
scales: {
|
|
y: {
|
|
min: 0,
|
|
max: 90, // Adjust according to expected data range
|
|
},
|
|
x: {
|
|
title: {
|
|
display: true,
|
|
text: 'Date',
|
|
},
|
|
},
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
display: true,
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
},
|
|
},
|
|
};
|
|
|
|
|
|
// fetching today's diet data
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
|
|
const getAllOhc = async () => {
|
|
try {
|
|
const response = await axiosClientPrivate.get(`/patient-daily-diets/${patientId}?date=${date}`, {
|
|
signal: controller.signal,
|
|
});
|
|
// const items = response.data.nutrients;
|
|
|
|
console.log("today diet data",response);
|
|
|
|
// const getLatestDataForEmpId = (data, empId) => {
|
|
// return data.reduce((latest, current) => {
|
|
// if (current.patientId == 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: 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 latestData = getLatestDataForEmpId(items, 1);
|
|
|
|
// if(latestData){
|
|
// setCurrentDailyDiettId(latestData.id)
|
|
// }
|
|
|
|
// console.log("latest diet data",latestData);
|
|
|
|
// if (items != null) {
|
|
// const formattedData = transformData(items);
|
|
const formattedData = transformData(response.data[0].nutrients);
|
|
// console.log("actual diet data :-", formattedData);
|
|
setDailyDiet(formattedData);
|
|
// }
|
|
|
|
setIsLoading(false);
|
|
|
|
// console.log("actu diet data :-", latestData);
|
|
|
|
} catch (err) {
|
|
console.error("Failed to fetch data: ", err);
|
|
}
|
|
};
|
|
|
|
getAllOhc();
|
|
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
}, [axiosClientPrivate,unitpair,dietpair,patientId,date,trigerDiet]);
|
|
// diet history
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
|
|
const getAllOhc = async () => {
|
|
try {
|
|
|
|
// const url = `/patient-daily-measurements/empId/${patientId}`
|
|
// console.log("check url",url);
|
|
|
|
const response = await axiosClientPrivate.get(`/patient-daily-diets/patientId/${patientId}`, { signal: controller.signal })
|
|
|
|
|
|
// const items = response.data.bodyMeasurementValues;
|
|
|
|
console.log('diet history',response.data);
|
|
const items = response.data;
|
|
const transformData = (data) => {
|
|
return Object.keys(data).map((key) => ({
|
|
label: dietpair[Number(key)], // Convert the key to a number
|
|
value: `${data[key].value} ${unitpair[data[key].unitId]}`,
|
|
}));
|
|
}
|
|
|
|
const dietHistory = items.map((item)=>{
|
|
return {
|
|
id : item.id,
|
|
date : item.date,
|
|
formateDate : historyFormat(item.date),
|
|
nutrients : transformData(item.nutrients)
|
|
}
|
|
})
|
|
setDietHistory(dietHistory);
|
|
console.log("check history data",dietHistory);
|
|
|
|
} catch (err) {
|
|
console.error("Failed to fetch measurement history data: ", err);
|
|
}
|
|
};
|
|
|
|
getAllOhc();
|
|
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
}, [axiosClientPrivate,unitpair,dietpair,date,patientId,dietTriggerUpdate]);
|
|
|
|
const handleDiet = async (date) => {
|
|
// alert(id);
|
|
setshowButtonUpdateDiet(true);
|
|
try {
|
|
const response = await axiosClientPrivate.get(`/patient-daily-diets/${patientId}?date=${date}`);
|
|
|
|
const items = response.data[0].foodEntries;
|
|
const dateEdit = response.data[0].date;
|
|
setUpdateDietDate(dateEdit);
|
|
console.log("today diet edit",response.data);
|
|
|
|
const dietEditData = items.map((item)=>{
|
|
return {
|
|
id : item.id,
|
|
date: dateEdit,
|
|
mealtime : item.meals,
|
|
// foodname: item.foodId,
|
|
foodname:foodName.find(food => food.value === item.foodId).label,
|
|
quantityInGrams: item.intakeQuantity,
|
|
// nutrients: []
|
|
}
|
|
})
|
|
|
|
console.log("data",dietEditData);
|
|
setDietTextField(dietEditData);
|
|
// setId(id);
|
|
// setShowupdate(true);
|
|
setOpenDietForm(true);
|
|
} catch (error) {
|
|
console.error('Error fetching item for edit:', error);
|
|
}
|
|
};
|
|
|
|
const handleDietUpdate = async()=>{
|
|
|
|
console.log("update diet",patientDietFormik.values.rows);
|
|
|
|
const updatedDietValue = patientDietFormik.values.rows.map((item)=>{
|
|
return {
|
|
id : item.id,
|
|
foodId : foodName.find(food => food.label === item.foodname).value,
|
|
intakeQuantity : item.quantityInGrams,
|
|
meals : item.mealtime
|
|
}
|
|
})
|
|
|
|
const updateDiet = {
|
|
patientId: patientId,
|
|
date: updateDietDate,
|
|
foodEntries: updatedDietValue,
|
|
}
|
|
console.log("diet finalupdate value",updateDiet);
|
|
|
|
try{
|
|
console.log(`patient-daily-diets/${patientId}?date=${updateDietDate}`);
|
|
// setTimeout(() => {
|
|
await axiosClientPrivate.put(`patient-daily-diets/${patientId}?date=${updateDietDate}`,updateDiet);
|
|
toast.success("Updated Successfully!",{
|
|
position:"top-center",
|
|
autoClose: 500,
|
|
});
|
|
// setExerciseTriggerUpdate(Prev => Prev+1);
|
|
|
|
// }, 1000);
|
|
}
|
|
catch(err){
|
|
console.log(updateDiet);
|
|
console.log(err);
|
|
}
|
|
|
|
}
|
|
|
|
const dietDelete = async(date)=>{
|
|
// alert(consultationId);
|
|
if(window.confirm('Are you sure you want to delete this data?')){
|
|
try {
|
|
await axiosClientPrivate.delete(`patient-daily-diets/${patientId}?date=${date}`);
|
|
toast.success("Deleted Successfully!", {
|
|
position: "top-center",
|
|
autoClose : 300
|
|
});
|
|
setDietTriggerUpdate(Prev => Prev+1);
|
|
} catch (error) {
|
|
console.error('Error deleting row:', error);
|
|
}
|
|
}
|
|
}
|
|
|
|
const dailyData = [
|
|
{ date: '2024-08-21', calories: 1800 },
|
|
{ date: '2024-08-22', calories: 1900 },
|
|
{ date: '2024-08-23', calories: 1700 },
|
|
{ date: '2024-08-24', calories: 2000 },
|
|
{ date: '2024-08-25', calories: 1850 },
|
|
{ date: '2024-08-26', calories: 2100 },
|
|
{ date: '2024-08-27', calories: 1950 }
|
|
];
|
|
const targetCalories = 2000; // Fixed target calories
|
|
const labels = dailyData.map(entry => entry.date); // Dates as labels
|
|
const consumedCalories = dailyData.map(entry => entry.calories); // Calories data
|
|
|
|
const dietData = {
|
|
labels: labels,
|
|
datasets: [
|
|
{
|
|
label: 'Target Calories',
|
|
data: labels.map(() => targetCalories),
|
|
borderColor: 'rgba(255, 99, 132, 1)',
|
|
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
|
fill: false,
|
|
borderDash: [10, 5], // Dashed line for target
|
|
},
|
|
{
|
|
label: 'Consumed Calories',
|
|
data: consumedCalories,
|
|
borderColor: 'rgba(54, 162, 235, 1)',
|
|
backgroundColor: 'rgba(54, 162, 235, 0.2)',
|
|
fill: false,
|
|
tension: 0.1,
|
|
},
|
|
],
|
|
};
|
|
|
|
const dietOptions = {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
position: 'top',
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(tooltipItem) {
|
|
return tooltipItem.dataset.label + ': ' + tooltipItem.raw + ' kcal';
|
|
},
|
|
},
|
|
},
|
|
},
|
|
scales: {
|
|
x: {
|
|
title: {
|
|
display: true,
|
|
text: 'Date',
|
|
},
|
|
},
|
|
y: {
|
|
beginAtZero: true,
|
|
title: {
|
|
display: true,
|
|
text: 'Calories (kcal)',
|
|
},
|
|
},
|
|
},
|
|
};
|
|
const switchForm = (formName, id) => {
|
|
// alert("patient id "+`${id}`);
|
|
// console.log("patient id ",id);
|
|
setCurrentForm(formName);
|
|
setPatientid(id);
|
|
setOpenPopup(true);
|
|
};
|
|
useEffect(() => {
|
|
// if (currentForm === "DailyMeasurementForm") {
|
|
// setTitle("Daily Measurement Form");
|
|
// }
|
|
// else
|
|
if(currentForm === "ExerciseMinuteForm"){
|
|
setTitle("Daily Exercise Form");
|
|
}
|
|
else if (currentForm === "PatientDietForm") {
|
|
setTitle("Daily Diet Form");
|
|
}
|
|
}, [currentForm]);
|
|
|
|
let formikProps;
|
|
switch (currentForm) {
|
|
case "ExerciseMinuteForm":
|
|
formikProps = exerciseMinuteFormik;
|
|
break;
|
|
// case "DailyMeasurementForm":
|
|
// formikProps = bodyMeasurementFormik;
|
|
// break;
|
|
// case "PatientDietForm":
|
|
// formikProps = patientDietFormik;
|
|
// break;
|
|
default:
|
|
break;
|
|
}
|
|
|
|
const formComponents = {
|
|
ExerciseMinuteForm: ExerciseMinuteForm,
|
|
// DailyMeasurementForm: DailyMeasurementForm,
|
|
PatientDietForm: PatientDietForm,
|
|
};
|
|
|
|
const FormComponent = formComponents[currentForm];
|
|
|
|
const isSmallScreen = useMediaQuery(theme.breakpoints.down("md"));
|
|
const isLargeScreen = useMediaQuery(theme.breakpoints.up("lg"));
|
|
const isxLargeScreen = useMediaQuery(theme.breakpoints.up("xl"));
|
|
|
|
|
|
// nutrituin per 100g
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
|
|
const getAllOhc = async () => {
|
|
try {
|
|
const response = await axiosClientPrivate.get(`/food-nutrients?page=${0}&size=${22}`, { signal: controller.signal });
|
|
const items = response.data.content;
|
|
console.log("food nutrition mapping",items);
|
|
|
|
|
|
|
|
|
|
const nutrientNameValues = items.map(data => {
|
|
const nutrientValuesArray = Object.entries(data.nutrientValues).map(([label, value]) => ({
|
|
label: idNutrientPair[Number(label)], // Converting key to a number if needed
|
|
value: value
|
|
}));
|
|
return { foodId : data.foodMasterId,nutrients : nutrientValuesArray };
|
|
});
|
|
|
|
setFoodNutrition(nutrientNameValues)
|
|
|
|
console.log("check food nutrition only",nutrientNameValues);
|
|
|
|
} catch (err) {
|
|
console.error("Failed to fetch data: ", err);
|
|
// setRowData([]);
|
|
}
|
|
};
|
|
|
|
getAllOhc();
|
|
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
|
|
}, [axiosClientPrivate,idNutrientPair]);
|
|
|
|
// console.log("checkkk1",bodyMeasurementFormik.values);
|
|
|
|
|
|
// const getDefaultMealTime = () => {
|
|
// const currentHour = new Date().getHours();
|
|
|
|
// if (currentHour < 12) {
|
|
// return "Breakfast";
|
|
// } else if (currentHour < 15) {
|
|
// return "Lunch";
|
|
// } else if (currentHour < 20) {
|
|
// return "Evening Snacks";
|
|
// } else {
|
|
// return "Dinner";
|
|
// }
|
|
// };
|
|
|
|
// const date = dayjs().format('YYYY-MM-DD');
|
|
// alert(todayDate);
|
|
// const [defaultMealTime, setDefaultMealTime] = useState(getDefaultMealTime());
|
|
// const foodTemplate = { date: date,mealtime :defaultMealTime,foodname: "", quantityInGrams: "" , nutrients: []};
|
|
// const [dietTextField, setDietTextField] = useState([foodTemplate]);
|
|
// const [currentRowIndex, setCurrentRowIndex] = useState(null);
|
|
// const [RowIndex, setRowIndex] = useState(0);
|
|
const [currentFoodId, setCurrentFoodId] = useState('');
|
|
const [currentNutrients, setCurrentNutrients] = useState([]);
|
|
|
|
|
|
// console.log("today date",typeof(date));
|
|
|
|
|
|
const patientDietFormik = useFormik({
|
|
enableReinitialize: true,
|
|
initialValues: { rows: dietTextField },
|
|
// onSubmit: (values, actions) => {
|
|
// const row = patientDietFormik.values.rows[currentRowIndex];
|
|
// // setCurrentFoodName('')
|
|
// // setCurrentNutrients([]);
|
|
// console.log("Submitted values:", row);
|
|
// // patient-daily-diets
|
|
|
|
|
|
// console.log("Submitted values:", values);
|
|
// setCurrentRowIndex(null);
|
|
// handleTextField();
|
|
// actions.resetForm({ values: { rows: [...values.rows, foodTemplate] } });
|
|
// },
|
|
|
|
onSubmit: async (values, { resetForm }) => {
|
|
|
|
|
|
const row = patientDietFormik.values.rows[currentRowIndex];
|
|
|
|
console.log("check",row);
|
|
// console.log("food id",foodName.find(food => food.label === row['foodname']).value)
|
|
|
|
// const transformedNutrients = row['nutrients'].map(nutrient => {
|
|
// const nutrientId = nutrientidpair[nutrient.label]; // Lookup the ID using the label
|
|
// return { [nutrientId]: nutrient.value.value }; // Access the nested value
|
|
// });
|
|
|
|
const finalValue = {
|
|
patientId : 1,
|
|
date : row['date'],
|
|
foodEntries : [
|
|
{
|
|
foodId: foodName.find(food => food.label === row['foodname']).value,
|
|
intakeQuantity: row['quantityInGrams'],
|
|
meals: row['mealtime']
|
|
}
|
|
], // have to put variable here/change later
|
|
// foodId : foodName.find(food => food.label === row['foodname']).value,
|
|
// intakeQuantity : row['quantityInGrams'],
|
|
// meals : row['mealtime'],
|
|
// nutrients : transformedNutrients
|
|
}
|
|
|
|
console.log("final deit value",finalValue);
|
|
// console.log("values",values);
|
|
|
|
|
|
try {
|
|
const response = await axiosClientPrivate.post(
|
|
"/patient-daily-diets",
|
|
finalValue
|
|
);
|
|
toast.success("Saved Successfully!", {
|
|
position: "top-center",
|
|
autoClose : 500
|
|
});
|
|
|
|
setCurrentRowIndex(null);
|
|
handleTextField();
|
|
resetForm({ values: { rows: [...values.rows, foodTemplate] } });
|
|
setTriggerDiet(Prev => Prev+1);
|
|
} catch (error) {
|
|
setCurrentRowIndex(null);
|
|
handleTextField();
|
|
resetForm({ values: { rows: [...values.rows, foodTemplate] } });
|
|
console.log(row);
|
|
console.error("Error:", error);
|
|
}
|
|
},
|
|
|
|
});
|
|
|
|
// patientDietFormik
|
|
console.log("formik",patientDietFormik.values.rows);
|
|
|
|
|
|
|
|
const handleSaveAndAddRow = (index) => {
|
|
setRowIndex(index+1); // to attach wiht current row
|
|
setCurrentRowIndex(index);
|
|
patientDietFormik.handleSubmit();
|
|
|
|
};
|
|
|
|
const handleTextField = () => {
|
|
setDietTextField([...dietTextField, foodTemplate]);
|
|
};
|
|
|
|
const styles = useStyles(theme);
|
|
|
|
const handleFoodNameChange = (index, newValue) => {
|
|
// setCurrentFoodId(newValue ? newValue.value : '');
|
|
console.log("food id and name",newValue.value,newValue.label);
|
|
|
|
const selectedFood = foodNutrition.find(item => item.foodId === newValue.value);
|
|
const nutrients = selectedFood ? selectedFood.nutrients : [];
|
|
patientDietFormik.setFieldValue(`rows.${index}.foodname`, newValue ? newValue.label : '');
|
|
patientDietFormik.setFieldValue(`rows.${index}.nutrients`, nutrients);
|
|
patientDietFormik.setFieldValue(`rows.${index}.quantityInGrams`, newValue ? 100 : '');
|
|
};
|
|
|
|
|
|
const handleQuantityChange = (index, newValue) => {
|
|
// setTimeout(()=>{
|
|
const quantity = newValue ? parseFloat(newValue) : null;
|
|
|
|
if(quantity){
|
|
const baseNutrients = patientDietFormik.values.rows[index].nutrients;
|
|
console.log("check baseNutrients",baseNutrients);
|
|
// const updatedNutrients = baseNutrients.map(nutrient => ({
|
|
// ...nutrient,
|
|
// value: (nutrient.value / 100) * quantity
|
|
// }));
|
|
const updatedNutrients = {
|
|
|
|
}
|
|
console.log("updatedNutrients",updatedNutrients);
|
|
|
|
patientDietFormik.setFieldValue(`rows.${index}.quantityInGrams`, quantity);
|
|
patientDietFormik.setFieldValue(`rows.${index}.nutrients`, updatedNutrients);
|
|
}
|
|
|
|
// },2000)
|
|
};
|
|
|
|
// const today = new Date();
|
|
// const todayDate = `${today.getDate().toString().padStart(2, '0')}-${(today.getMonth() + 1).toString().padStart(2, '0')}-${today.getFullYear()}`;
|
|
const today = new Date().toISOString().split('T')[0];
|
|
|
|
const resetDietForm = ()=>{
|
|
// patientDietFormik.resetForm();
|
|
// patientDietFormik.values
|
|
patientDietFormik.resetForm({
|
|
values: {
|
|
rows: dietTextField
|
|
},
|
|
});
|
|
// setRowIndex(null);
|
|
}
|
|
|
|
const handleMeasurementChange = (index, field, value) => {
|
|
bodyMeasurementFormik.setFieldValue(`parameters.${index}.${field}`, value);
|
|
};
|
|
|
|
const handleExerciseChange = (index, field, value) => {
|
|
exerciseMinuteFormik.setFieldValue(`exercises.${index}.${field}`, value);
|
|
};
|
|
|
|
// const [expanded, setExpanded] = React.useState('panel1');
|
|
|
|
const handleChange = (panel) => (event, newExpanded) => {
|
|
setExpanded(newExpanded ? panel : false);
|
|
};
|
|
|
|
const accordianArr = [1,2,3,4,5,6,7];
|
|
|
|
|
|
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"
|
|
// flexWrap={isSmallScreen ? "wrap" : ""}
|
|
>
|
|
<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,
|
|
}}
|
|
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: 160,
|
|
width: 'auto',
|
|
}}
|
|
textAlign={"center"}
|
|
>
|
|
<WaterDropIcon
|
|
// sx={{ color: 'blue', marginRight: 2 }}
|
|
color="error"
|
|
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={5}>
|
|
{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: 81,
|
|
height: 64,
|
|
textTransform: "none",
|
|
}}
|
|
>
|
|
<Box>
|
|
<Typography variant="body2">{param.value}</Typography>
|
|
<Typography>{param.label}</Typography>
|
|
</Box>
|
|
</Button>
|
|
))
|
|
) : (
|
|
<div>
|
|
<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>
|
|
</div>
|
|
)}
|
|
</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 : 25}
|
|
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>
|
|
</Stack>
|
|
|
|
<Stack
|
|
direction={isSmallScreen ? "column" : "row"}
|
|
justifyContent={isLargeScreen ? "space-around" : "center"}
|
|
spacing={2}
|
|
mt={1}
|
|
>
|
|
<Stack
|
|
sx={{width: "100%",}}
|
|
>
|
|
<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"}>
|
|
Fitness Target
|
|
</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"}} />
|
|
) : hasTargerMeasurementData ? (
|
|
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"}>
|
|
Actual Fitness
|
|
</Typography>
|
|
<AddCircleOutlineIcon onClick={() => { setOpenMeasurementForm(true) }} sx={{color : "#00796b","&:hover": {
|
|
cursor: "pointer",
|
|
},}} />
|
|
<EditNoteRoundedIcon onClick = {()=> handleMeasurement(date)} sx={{color : "#00796b","&:hover": {
|
|
cursor: "pointer",
|
|
},}} />
|
|
{/*<Button
|
|
variant="contained"
|
|
sx={{
|
|
backgroundColor: "#00796b",
|
|
"&:hover": {
|
|
backgroundColor: "#00796b",
|
|
},
|
|
height: 28,
|
|
width: 20,
|
|
// float : 'right'
|
|
}}
|
|
onClick={() => switchForm("DailyMeasurementForm", 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>
|
|
{/*measurement history */}
|
|
<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="h6" color={'#00796b'}> Measurement History </Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails>
|
|
{dailyMeasurementHistory.map((item)=>{
|
|
return <Accordion
|
|
key={item.id}
|
|
sx={{ backgroundColor: '#e0f7fa', marginBottom: 1,mt : 1,border: '0'}}
|
|
expanded={expanded === item.id} onChange={handleChange(item.id)}>
|
|
<AccordionSummary
|
|
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
|
|
},
|
|
}}
|
|
aria-controls="panel1d-content" id="panel1d-header">
|
|
<Typography textAlign={'center'} >{item.formateDate}</Typography>
|
|
<Box component={'div'}> <Button onClick={()=> handleMeasurement(item.date)} > <EditNoteRoundedIcon /></Button>
|
|
<Button color="error" onClick={()=> measurementDelete(item.date)}> <DeleteSweepRoundedIcon /> </Button> </Box>
|
|
</AccordionSummary>
|
|
<AccordionDetails >
|
|
<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'}>
|
|
Health Parameter
|
|
</Typography>
|
|
|
|
<CardContent
|
|
// variant = "stack"
|
|
sx={{
|
|
// direction : 'row',
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
// justifyContent : 'left',
|
|
justifyContent: "flex-start",
|
|
alignItems: "center",
|
|
gap: 3,
|
|
}}
|
|
>
|
|
{item.bodyMeasurementValues.map((item,index)=>{
|
|
return <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>
|
|
})}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
})}
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
</Card>
|
|
<Card
|
|
sx={{
|
|
width: "100%", // Make card take full width of the container
|
|
// padding: 1,
|
|
borderRadius: "10px",
|
|
boxShadow: "2px 8px 16px rgba(0, 0, 0, 0.2)",
|
|
marginBottom: "10px",
|
|
backgroundColor: "#e0f7fa",
|
|
display: 'flex',
|
|
flexWrap: 'wrap',
|
|
justifyContent: 'center', // Ensure content is centered on smaller screens
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: {
|
|
xs: '100%', // For small screens, take full width
|
|
sm: '80%', // For small to medium screens, take 80% width
|
|
md: '60%', // For medium to larger screens, take 60%
|
|
},
|
|
// width : 'auto',
|
|
// height: 'auto', // Let the height adjust automatically
|
|
height: '250px', // Let the height adjust automatically
|
|
}}
|
|
>
|
|
<Line
|
|
data={measurementData}
|
|
options={{
|
|
...measurementOptions,
|
|
responsive: true, // Make the chart responsive
|
|
maintainAspectRatio: false, // Allow the chart to take the parent's dimensions
|
|
}}
|
|
/>
|
|
</Box>
|
|
</Card>
|
|
|
|
</Stack>
|
|
|
|
<Stack
|
|
sx={{width: "100%",}}
|
|
>
|
|
<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"}>
|
|
Exercise Target
|
|
</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"}} />
|
|
) : hasTargetExerciseData ? (
|
|
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"}>
|
|
Actual Exercise
|
|
</Typography>
|
|
<AddCircleOutlineIcon onClick={() => switchForm("ExerciseMinuteForm", 1)} sx={{color : "#00796b","&:hover": {
|
|
cursor: "pointer",
|
|
},}} />
|
|
<EditNoteRoundedIcon onClick = {()=> handleExercise(date)} sx={{color : "#00796b","&:hover": {
|
|
cursor: "pointer",
|
|
},}} />
|
|
{/*<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>
|
|
|
|
{/*exercise history*/}
|
|
<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="h6" color={'#00796b'}> Exercise History </Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails>
|
|
{exerciseHistory.map((item)=>{
|
|
return <Accordion
|
|
key={item.id}
|
|
sx={{ backgroundColor: '#e0f7fa', marginBottom: 1,mt : 1,border: '0'}}
|
|
expanded={expanded === item.id} onChange={handleChange(item.id)}>
|
|
<AccordionSummary
|
|
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
|
|
},
|
|
}}
|
|
aria-controls="panel1d-content" id="panel1d-header">
|
|
<Typography textAlign={'center'} >{item.formateDate}</Typography>
|
|
<Box component={'div'}> <Button onClick={()=> handleExercise(item.date)} > <EditNoteRoundedIcon /></Button>
|
|
<Button color="error" onClick={()=> exerciseDelete(item.date)}> <DeleteSweepRoundedIcon /> </Button> </Box>
|
|
</AccordionSummary>
|
|
<AccordionDetails >
|
|
<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'}>
|
|
Exercise
|
|
</Typography>
|
|
|
|
<CardContent
|
|
// variant = "stack"
|
|
sx={{
|
|
// direction : 'row',
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
// justifyContent : 'left',
|
|
justifyContent: "flex-start",
|
|
alignItems: "center",
|
|
gap: 3,
|
|
}}
|
|
>
|
|
{item.exerciseValues.map((item,index)=>{
|
|
return <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>
|
|
})}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
})}
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
{/*<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="h6" color={'#00796b'}> Exercise History </Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails>
|
|
{accordianArr.map((item,index)=>{
|
|
return <Accordion
|
|
key={index}
|
|
sx={{ backgroundColor: '#e0f7fa', marginBottom: 1,mt : 1,border: '0'}}
|
|
expanded={expanded === index} onChange={handleChange(index)}>
|
|
<AccordionSummary
|
|
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
|
|
},
|
|
}}
|
|
aria-controls="panel1d-content" id="panel1d-header">
|
|
<Typography>Collapsible Group Item #1</Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails>
|
|
<Typography>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
|
|
malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor
|
|
sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
|
|
sit amet blandit leo lobortis eget.
|
|
</Typography>
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
|
|
})}
|
|
</AccordionDetails>
|
|
</Accordion>*/}
|
|
</Card>
|
|
{/* <Card
|
|
sx={{
|
|
width: "100%",
|
|
// width : "500px",
|
|
// height : "500px",
|
|
padding: 2,
|
|
borderRadius: "10px",
|
|
boxShadow: "2px 8px 16px rgba(0, 0, 0, 0.2)",
|
|
marginBottom: "10px",
|
|
backgroundColor: "#e0f7fa",
|
|
display :'flex',
|
|
flexWrap : 'wrap'
|
|
}}
|
|
// textAlign="center"
|
|
>
|
|
<Line width={'%'} height={'auto'} data={exerciseData} options={exerciseOptions} />
|
|
</Card>*/}
|
|
|
|
<Card
|
|
sx={{
|
|
width: "100%", // Make card take full width of the container
|
|
// padding: 1,
|
|
borderRadius: "10px",
|
|
boxShadow: "2px 8px 16px rgba(0, 0, 0, 0.2)",
|
|
marginBottom: "10px",
|
|
backgroundColor: "#e0f7fa",
|
|
display: 'flex',
|
|
flexWrap: 'wrap',
|
|
justifyContent: 'center', // Ensure content is centered on smaller screens
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: {
|
|
xs: '100%', // For small screens, take full width
|
|
sm: '80%', // For small to medium screens, take 80% width
|
|
md: '60%', // For medium to larger screens, take 60%
|
|
},
|
|
// width : 'auto',
|
|
// height: 'auto', // Let the height adjust automatically
|
|
height: '250px', // Let the height adjust automatically
|
|
}}
|
|
>
|
|
<Line
|
|
data={exerciseData}
|
|
options={{
|
|
...exerciseOptions,
|
|
responsive: true, // Make the chart responsive
|
|
maintainAspectRatio: false, // Allow the chart to take the parent's dimensions
|
|
}}
|
|
/>
|
|
</Box>
|
|
</Card>
|
|
|
|
</Stack>
|
|
|
|
<Stack
|
|
sx={{width: "100%",}}
|
|
>
|
|
<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"}>
|
|
Diet Target
|
|
</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"}} />
|
|
) : hasTargetDietData ? (
|
|
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"}>
|
|
Actual Diet
|
|
</Typography>
|
|
<AddCircleOutlineIcon
|
|
// onClick={() => switchForm("PatientDietForm", 1)}
|
|
onClick={() => {
|
|
setOpenDietForm(true);
|
|
}}
|
|
sx={{color : "#00796b","&:hover": {
|
|
cursor: "pointer",
|
|
},}} />
|
|
<EditNoteRoundedIcon onClick = {()=> handleDiet(date)} sx={{color : "#00796b","&:hover": {
|
|
cursor: "pointer",
|
|
},}} />
|
|
{/*<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>
|
|
{/* diet history*/}
|
|
<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="h6" color={'#00796b'}> Diet History </Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails>
|
|
{dietHistory.map((item)=>{
|
|
return <Accordion
|
|
key={item.id}
|
|
sx={{ backgroundColor: '#e0f7fa', marginBottom: 1,mt : 1,border: '0'}}
|
|
expanded={expanded === item.id} onChange={handleChange(item.id)}>
|
|
<AccordionSummary
|
|
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
|
|
},
|
|
}}
|
|
aria-controls="panel1d-content" id="panel1d-header">
|
|
<Typography textAlign={'center'} >{item.formateDate}</Typography>
|
|
<Box component={'div'}> <Button onClick={()=> handleDiet(item.date)} > <EditNoteRoundedIcon /></Button>
|
|
<Button color="error" onClick={()=> dietDelete(item.date)}> <DeleteSweepRoundedIcon /> </Button> </Box>
|
|
</AccordionSummary>
|
|
<AccordionDetails >
|
|
<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'}>
|
|
Diet
|
|
</Typography>
|
|
|
|
<CardContent
|
|
// variant = "stack"
|
|
sx={{
|
|
// direction : 'row',
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
// justifyContent : 'left',
|
|
justifyContent: "flex-start",
|
|
alignItems: "center",
|
|
gap: 3,
|
|
}}
|
|
>
|
|
{item.nutrients.map((item,index)=>{
|
|
return <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>
|
|
})}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
})}
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
{/*<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="h6" color={'#00796b'}> Diet History </Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails>
|
|
{accordianArr.map((item,index)=>{
|
|
return <Accordion
|
|
key={index}
|
|
sx={{ backgroundColor: '#e0f7fa', marginBottom: 1,mt : 1,border: '0'}}
|
|
expanded={expanded === index} onChange={handleChange(index)}>
|
|
<AccordionSummary
|
|
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
|
|
},
|
|
}}
|
|
aria-controls="panel1d-content" id="panel1d-header">
|
|
<Typography>Collapsible Group Item #1</Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails>
|
|
<Typography>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
|
|
malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor
|
|
sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
|
|
sit amet blandit leo lobortis eget.
|
|
</Typography>
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
|
|
})}
|
|
</AccordionDetails>
|
|
</Accordion>*/}
|
|
</Card>
|
|
{/* <Card
|
|
sx={{
|
|
width: "100%",
|
|
// width : "500px",
|
|
// height : "500px",
|
|
padding: 2,
|
|
borderRadius: "10px",
|
|
boxShadow: "2px 8px 16px rgba(0, 0, 0, 0.2)",
|
|
marginBottom: "10px",
|
|
backgroundColor: "#e0f7fa",
|
|
display :'flex',
|
|
flexWrap : 'wrap'
|
|
}}
|
|
// textAlign="center"
|
|
>
|
|
<Line width={'%'} height={'auto'} data={dietData} options={dietOptions} />
|
|
</Card>*/}
|
|
<Card
|
|
sx={{
|
|
width: "100%", // Make card take full width of the container
|
|
// padding: 1,
|
|
borderRadius: "10px",
|
|
boxShadow: "2px 8px 16px rgba(0, 0, 0, 0.2)",
|
|
marginBottom: "10px",
|
|
backgroundColor: "#e0f7fa",
|
|
display: 'flex',
|
|
flexWrap: 'wrap',
|
|
justifyContent: 'center', // Ensure content is centered on smaller screens
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: {
|
|
xs: '100%', // For small screens, take full width
|
|
sm: '80%', // For small to medium screens, take 80% width
|
|
md: '60%', // For medium to larger screens, take 60%
|
|
},
|
|
// width : 'auto',
|
|
// height: 'auto', // Let the height adjust automatically
|
|
height: '250px', // Let the height adjust automatically
|
|
}}
|
|
>
|
|
<Line
|
|
data={dietData}
|
|
options={{
|
|
...dietOptions,
|
|
responsive: true, // Make the chart responsive
|
|
maintainAspectRatio: false, // Allow the chart to take the parent's dimensions
|
|
}}
|
|
/>
|
|
</Box>
|
|
</Card>
|
|
</Stack>
|
|
|
|
</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"
|
|
>
|
|
|
|
<Stack
|
|
// display={'flex'}
|
|
alignItems={'center'}
|
|
direction={'row'}
|
|
justifyContent={'center'}
|
|
spacing={2}
|
|
>
|
|
<Typography textAlign={"center"} variant="h6" color={'#00796b'}>
|
|
Actual 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: daillyDiet && daillyDiet.length > 0 ? "flex-start" : "center",
|
|
alignItems: "center",
|
|
gap: 3,
|
|
}}
|
|
>
|
|
{dailyParameter && dailyParameter.length > 0 ? (
|
|
dailyParameter.map((item, index) => (
|
|
<Typography
|
|
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>
|
|
</Typography>
|
|
))
|
|
) : (
|
|
<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"
|
|
>
|
|
|
|
<Stack
|
|
// display={'flex'}
|
|
alignItems={'center'}
|
|
direction={'row'}
|
|
justifyContent={'center'}
|
|
spacing={2}
|
|
>
|
|
<Typography textAlign={"center"} variant="h6" color={'#00796b'}>
|
|
Actual 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: daillyDiet && daillyDiet.length > 0 ? "flex-start" : "center",
|
|
alignItems: "center",
|
|
gap: 3,
|
|
}}
|
|
>
|
|
{dailyExercise && dailyExercise.length > 0 ? (
|
|
dailyExercise.map((item, index) => (
|
|
<Typography
|
|
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>
|
|
</Typography>
|
|
))
|
|
) : (
|
|
<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"
|
|
>
|
|
|
|
<Stack
|
|
// display={'flex'}
|
|
alignItems={'center'}
|
|
direction={'row'}
|
|
justifyContent={'center'}
|
|
spacing={2}
|
|
>
|
|
<Typography textAlign={"center"} variant="h6" color={'#00796b'}>
|
|
Actual 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) => (
|
|
<Typography
|
|
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>
|
|
</Typography>
|
|
))
|
|
) : (
|
|
<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>
|
|
</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) => (
|
|
<Typography
|
|
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>
|
|
</Typography>
|
|
))
|
|
) : (
|
|
<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) => (
|
|
<Typography
|
|
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>
|
|
</Typography>
|
|
))
|
|
) : (
|
|
<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) => (
|
|
<Typography
|
|
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>
|
|
</Typography>
|
|
))
|
|
) : (
|
|
<Typography
|
|
color="textSecondary"
|
|
style={{ color: theme.palette.grey[500] }}
|
|
marginLeft={5}
|
|
>
|
|
No parameters available
|
|
</Typography>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
))}
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
{/* <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}
|
|
handleUpdate={updateFuntion}
|
|
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>
|
|
|
|
{/*measurement*/}
|
|
<Dialog
|
|
open={openMeasurementForm}
|
|
// sx={{ width: "1200px",height : '600px' }}
|
|
fullWidth={true}
|
|
maxWidth={'sm'}
|
|
>
|
|
<DialogTitle>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
|
|
Patient Measurement Form
|
|
</Typography>
|
|
<Button
|
|
color="error"
|
|
endIcon={<CancelRoundedIcon />}
|
|
onClick={() => {
|
|
setOpenMeasurementForm(false);
|
|
setShowMeasurementUpdate(false)
|
|
setFetchTrigger(prev => prev+1);
|
|
// resetDietForm()
|
|
// setRowIndex(null);
|
|
}}
|
|
>
|
|
Close
|
|
</Button>
|
|
</Box>
|
|
</DialogTitle>
|
|
|
|
|
|
<DialogContent dividers>
|
|
<Grid container spacing={2} justifyContent="center" alignItems="center" sx={{width:560,minHeight: 0}}>
|
|
{bodyMeasurementFormik.values.parameters.map((item, index) => (
|
|
<Grid item xs={12} key={index}>
|
|
<Grid container spacing={0} alignItems="center">
|
|
{/*<Grid item xs={4}>
|
|
<Input
|
|
label="Body Parameter Name"
|
|
name={`parameters.${index}.measurementname`}
|
|
type="text"
|
|
size="large"
|
|
sx={{ width: "100%" }}
|
|
value={item.measurementname}
|
|
readOnly
|
|
/>
|
|
|
|
</Grid>*/}
|
|
<Grid item xs={6}>
|
|
<Input
|
|
// label="Body Parameter Value"
|
|
label={item.measurementname}
|
|
name={`parameters.${index}.measuremenvalue`}
|
|
type={item.measurementname.toUpperCase() == "BP" ? "text" : "number"}
|
|
size="large"
|
|
sx={{ width: "100%" }}
|
|
value={item.measuremenvalue}
|
|
onChange={(e) => handleMeasurementChange(index, 'measuremenvalue', e.target.value)}
|
|
InputProps={{
|
|
endAdornment: <InputAdornment position="end">{bodyparameterpair[item.measurementname]}</InputAdornment>,
|
|
}}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
<Input
|
|
label="Remarks"
|
|
name={`parameters.${index}.remark`}
|
|
type="text"
|
|
size="large"
|
|
sx={{ width: "100%" }}
|
|
value={item.remark}
|
|
onChange={(e) => handleMeasurementChange(index, 'remark', e.target.value)}
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</DialogContent>
|
|
|
|
<DialogActions>
|
|
<Button type="submit" onClick={()=> handleMeasurementUpdate()} variant="outlined" style={{display : showMeasurementUpdate ? "null" : "none" }}>Update</Button>
|
|
<Button type="submit" onClick={() => bodyMeasurementFormik.handleSubmit()} variant="outlined" style={{display : showMeasurementUpdate ? "none" : "null" }}>Save</Button>
|
|
<Button onClick={() => bodyMeasurementFormik.resetForm()} type="reset" color='warning' variant="outlined">Reset</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
{/*exercise*/}
|
|
<Dialog
|
|
open={openDailyExerciseForm}
|
|
// sx={{ width: "1200px",height : '600px' }}
|
|
fullWidth={true}
|
|
maxWidth={'sm'}
|
|
>
|
|
<DialogTitle>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
|
|
Patient Measurement Form
|
|
</Typography>
|
|
<Button
|
|
color="error"
|
|
endIcon={<CancelRoundedIcon />}
|
|
onClick={() => {
|
|
setOpenDailyExerciseForm(false);
|
|
setShowExerciseupdate(false)
|
|
setExerciseTrigger(prev => prev+1);
|
|
// resetDietForm()
|
|
// setRowIndex(null);
|
|
}}
|
|
>
|
|
Close
|
|
</Button>
|
|
</Box>
|
|
</DialogTitle>
|
|
|
|
|
|
<DialogContent dividers>
|
|
<Grid container spacing={2} justifyContent="center" alignItems="center" sx={{width:560,minHeight: 0}}>
|
|
{exerciseMinuteFormik.values.exercises.map((item, index) => (
|
|
<Grid item xs={12} key={index}>
|
|
<Grid container spacing={2} alignItems="center">
|
|
{/*<Grid item xs={4}>
|
|
<Input
|
|
label="Exercise Name"
|
|
name={`exercises.${index}.exerciseName`}
|
|
type="text"
|
|
size="large"
|
|
sx={{ width: "100%" }}
|
|
value={item.exercisename}
|
|
readOnly
|
|
/>
|
|
|
|
</Grid>*/}
|
|
<Grid item xs={6}>
|
|
<Input
|
|
// label="Target Minutes"
|
|
label={item.exercisename}
|
|
name={`exercises.${index}.minutes`}
|
|
type="number"
|
|
size="large"
|
|
sx={{ width: "100%" }}
|
|
value={item.minutes}
|
|
onChange={(e) => handleExerciseChange(index, 'minutes', e.target.value)}
|
|
InputProps={{
|
|
endAdornment: <InputAdornment position="end">min</InputAdornment>,
|
|
}}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
<Input
|
|
label="Remarks"
|
|
name={`exercises.${index}.remark`}
|
|
type="text"
|
|
size="large"
|
|
sx={{ width: "100%" }}
|
|
value={item.remark}
|
|
onChange={(e) => handleExerciseChange(index, 'remark', e.target.value)}
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</DialogContent>
|
|
|
|
<DialogActions>
|
|
<Button type="submit" onClick={()=> handleExerciseUpdate()} variant="outlined" style={{display : showExerciseupdate ? "null" : "none" }}>Update</Button>
|
|
<Button type="submit" onClick={() => exerciseMinuteFormik.handleSubmit()} variant="outlined" style={{display : showExerciseupdate ? "none" : "null" }}>Save</Button>
|
|
<Button onClick={() => exerciseMinuteFormik.resetForm()} type="reset" color='warning' variant="outlined">Reset</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
|
|
{/*diet*/}
|
|
|
|
{
|
|
showButtonUpdateDiet ?
|
|
<Dialog
|
|
open={openDietForm}
|
|
// sx={{ width: "1200px",height : '600px' }}
|
|
fullWidth={true}
|
|
maxWidth={'lg'}
|
|
>
|
|
<DialogTitle>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
|
|
Patient Diet Form
|
|
</Typography>
|
|
<Button
|
|
color="error"
|
|
endIcon={<CancelRoundedIcon />}
|
|
onClick={() => {
|
|
setOpenDietForm(false);
|
|
patientDietFormik.resetForm({ values: { rows: [ foodTemplate] } });
|
|
setDietTextField([foodTemplate]);
|
|
setshowButtonUpdateDiet(false);
|
|
// alert(JSON.stringify(foodTemplate));
|
|
// resetDietForm()
|
|
// setRowIndex(null);
|
|
}}
|
|
>
|
|
Close
|
|
</Button>
|
|
</Box>
|
|
</DialogTitle>
|
|
|
|
<DialogContent dividers>
|
|
<Box
|
|
component={"form"}
|
|
sx={{ maxWidth: 1200 }}
|
|
onSubmit={patientDietFormik.handleSubmit}
|
|
>
|
|
<Stack
|
|
direction={'row'}
|
|
spacing={1}
|
|
>
|
|
<TextField
|
|
label=""
|
|
name="date"
|
|
type="date"
|
|
size="small"
|
|
// defaultValue={todayDate}
|
|
{...patientDietFormik.getFieldProps(`rows.${RowIndex}.date`)}
|
|
// InputLabelProps={{
|
|
// shrink: true,
|
|
// }}
|
|
|
|
// {...patientDietFormik.getFieldProps(`rows.${currentRowIndex}.date`)}
|
|
// onChange={patientDietFormik.handleChange}
|
|
onBlur={patientDietFormik.handleBlur}
|
|
// value={`patientDietFormik.rows.${RowIndex}.date`}
|
|
// onChange={(event, newValue) => {
|
|
// patientDietFormik.setFieldValue(
|
|
// `rows.${currentRowIndex}.date`,
|
|
// newValue || ""
|
|
// );
|
|
// }}
|
|
// helperText={
|
|
// patientDietFormik.errors.rows &&
|
|
// patientDietFormik.errors.rows[index] &&
|
|
// patientDietFormik.errors.rows[index].date &&
|
|
// patientDietFormik.touched.rows &&
|
|
// patientDietFormik.touched.rows[index] &&
|
|
// patientDietFormik.touched.rows[index].date ? (
|
|
// <span style={{ color: "red" }}>
|
|
// {patientDietFormik.errors.rows[index].date}
|
|
// </span>
|
|
// ) : null
|
|
// }
|
|
// fullWidth
|
|
/>
|
|
</Stack>
|
|
<Stack
|
|
mt={2}
|
|
>
|
|
{patientDietFormik.values.rows.map((item, index) => (
|
|
<Stack key={index}
|
|
mt={1}
|
|
>
|
|
<Stack
|
|
direction={'row'}
|
|
alignItems={'center'}
|
|
spacing={1}
|
|
>
|
|
<Autocomplete
|
|
size="small"
|
|
options={mealTime}
|
|
getOptionLabel={(option) => option}
|
|
sx={{ width: '150px' }}
|
|
|
|
value={patientDietFormik.values.rows[index].mealtime || null}
|
|
onChange={(event, newValue) => {
|
|
patientDietFormik.setFieldValue(
|
|
`rows.${index}.mealtime`,
|
|
newValue || ""
|
|
);
|
|
}}
|
|
onBlur={patientDietFormik.handleBlur}
|
|
renderInput={(params) => (
|
|
<TextField
|
|
{...params}
|
|
label="Meal Time"
|
|
// helperText={
|
|
// patientDietFormik.errors.rows &&
|
|
// patientDietFormik.errors.rows[index] &&
|
|
// patientDietFormik.errors.rows[index].mealtime &&
|
|
// patientDietFormik.touched.rows &&
|
|
// patientDietFormik.touched.rows[index] &&
|
|
// patientDietFormik.touched.rows[index].mealtime ? (
|
|
// <span style={{ color: 'red' }}>
|
|
// {patientDietFormik.errors.rows[index].mealtime}
|
|
// </span>
|
|
// ) : null
|
|
// }
|
|
fullWidth
|
|
/>
|
|
)}
|
|
/>
|
|
<Autocomplete
|
|
// disabled
|
|
// disabled = { RowIndex === index ? false : true }
|
|
size="small"
|
|
options={foodName}
|
|
getOptionLabel={(option) => option.label}
|
|
sx={{ width: '150px' }}
|
|
value={foodName.find(food => food.label === patientDietFormik.values.rows[index].foodname) || null}
|
|
// onChange={(event, newValue) => {
|
|
// setCurrentFoodId(newValue.value);
|
|
// const selectedFood = foodNutrition.find(item => item.foodId === currentFoodId);
|
|
// setCurrentNutrients(selectedFood ? selectedFood.nutrients : []);
|
|
// patientDietFormik.setFieldValue(
|
|
// `rows.${index}.foodname`,
|
|
// newValue ? newValue.label : ""
|
|
// );
|
|
// }}
|
|
onChange={(event, newValue) => handleFoodNameChange(index, newValue)}
|
|
// onInputChange={(event, newInputValue) => {
|
|
// setCurrentFoodName(newInputValue);
|
|
// }}
|
|
onBlur={patientDietFormik.handleBlur}
|
|
renderInput={(params) => (
|
|
<TextField
|
|
{...params}
|
|
label="Food Name"
|
|
helperText={
|
|
patientDietFormik.errors.rows &&
|
|
patientDietFormik.errors.rows[index] &&
|
|
patientDietFormik.errors.rows[index].foodname &&
|
|
patientDietFormik.touched.rows &&
|
|
patientDietFormik.touched.rows[index] &&
|
|
patientDietFormik.touched.rows[index].foodname ? (
|
|
<span style={{ color: 'red' }}>
|
|
{patientDietFormik.errors.rows[index].foodname}
|
|
</span>
|
|
) : null
|
|
}
|
|
fullWidth
|
|
// disabled
|
|
/>
|
|
)}
|
|
/>
|
|
<TextField
|
|
label="Quantity in grams"
|
|
// {RowIndex === index ? disabled : ""}
|
|
// disabled = { RowIndex === index ? false : true }
|
|
type="number"
|
|
size="small"
|
|
sx={{ width: "150px" }}
|
|
{...patientDietFormik.getFieldProps(
|
|
`rows.${index}.quantityInGrams`
|
|
)}
|
|
onChange={(event) => handleQuantityChange(index, event.target.value)}
|
|
onBlur={patientDietFormik.handleBlur}
|
|
helperText={
|
|
patientDietFormik.errors.rows &&
|
|
patientDietFormik.errors.rows[index] &&
|
|
patientDietFormik.errors.rows[index].quantityInGrams &&
|
|
patientDietFormik.touched.rows &&
|
|
patientDietFormik.touched.rows[index] &&
|
|
patientDietFormik.touched.rows[index].quantityInGrams ? (
|
|
<span style={{ color: "red" }}>
|
|
{patientDietFormik.errors.rows[index].quantityInGrams}
|
|
</span>
|
|
) : null
|
|
}
|
|
fullWidth
|
|
/>
|
|
{/*<Typography
|
|
// variant={isxLargeScreen ? "h6" : "h6"}
|
|
gutterBottom
|
|
textAlign={"center"}
|
|
alignItems={'center'}
|
|
sx={{border : 1}}
|
|
>
|
|
Calories : {currentComplain["date"]}
|
|
</Typography>*/}
|
|
{item.nutrients && item.nutrients.length > 0 && item.nutrients.map((nutrient, idx) => (
|
|
<Box key={idx} component="span" sx={styles}>
|
|
{nutrient.label} : {nutrient.value['value'].toFixed(2)}
|
|
</Box>
|
|
))}
|
|
{/*
|
|
{
|
|
currentNutrients.map((item,index)=>{
|
|
return <Box
|
|
component="span"
|
|
sx={styles}
|
|
key={index}
|
|
>
|
|
{item.label} : {item.value}
|
|
</Box>
|
|
})
|
|
}
|
|
<Box
|
|
component="span"
|
|
sx={styles}
|
|
>
|
|
Protien : 120g
|
|
</Box>*/}
|
|
|
|
</Stack>
|
|
</Stack>
|
|
))}
|
|
</Stack>
|
|
|
|
{/*<Button
|
|
onClick={() => patientDietFormik.handleSubmit(index)}
|
|
variant="outlined"
|
|
>
|
|
Save and Add row
|
|
</Button>*/}
|
|
</Box>
|
|
</DialogContent>
|
|
|
|
<DialogActions >
|
|
<Button type="submit" onClick={()=> handleDietUpdate()} variant="outlined" fullWidth >Update</Button>
|
|
{/* <Button type="submit" onClick={() => handleSubmit()} variant="outlined" style={{display : showupdate ? "none" : "null" }}>Save</Button>
|
|
<Button onClick={() => resetForm()} type="reset" color='warning' variant="outlined">Reset</Button>*/}
|
|
</DialogActions>
|
|
</Dialog>
|
|
:
|
|
<Dialog
|
|
open={openDietForm}
|
|
// sx={{ width: "1200px",height : '600px' }}
|
|
fullWidth={true}
|
|
maxWidth={'lg'}
|
|
>
|
|
<DialogTitle>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
|
|
Patient Diet Form
|
|
</Typography>
|
|
<Button
|
|
color="error"
|
|
endIcon={<CancelRoundedIcon />}
|
|
onClick={() => {
|
|
setOpenDietForm(false);
|
|
patientDietFormik.resetForm({ values: { rows: [ foodTemplate] } });
|
|
// alert(JSON.stringify(foodTemplate));
|
|
// resetDietForm()
|
|
// setRowIndex(null);
|
|
}}
|
|
>
|
|
Close
|
|
</Button>
|
|
</Box>
|
|
</DialogTitle>
|
|
|
|
<DialogContent dividers>
|
|
<Box
|
|
component={"form"}
|
|
sx={{ maxWidth: 1200 }}
|
|
onSubmit={patientDietFormik.handleSubmit}
|
|
>
|
|
<Stack
|
|
direction={'row'}
|
|
spacing={1}
|
|
>
|
|
<TextField
|
|
label=""
|
|
name="date"
|
|
type="date"
|
|
size="small"
|
|
// defaultValue={todayDate}
|
|
{...patientDietFormik.getFieldProps(`rows.${RowIndex}.date`)}
|
|
// InputLabelProps={{
|
|
// shrink: true,
|
|
// }}
|
|
|
|
// {...patientDietFormik.getFieldProps(`rows.${currentRowIndex}.date`)}
|
|
// onChange={patientDietFormik.handleChange}
|
|
onBlur={patientDietFormik.handleBlur}
|
|
// value={`patientDietFormik.rows.${RowIndex}.date`}
|
|
// onChange={(event, newValue) => {
|
|
// patientDietFormik.setFieldValue(
|
|
// `rows.${currentRowIndex}.date`,
|
|
// newValue || ""
|
|
// );
|
|
// }}
|
|
// helperText={
|
|
// patientDietFormik.errors.rows &&
|
|
// patientDietFormik.errors.rows[index] &&
|
|
// patientDietFormik.errors.rows[index].date &&
|
|
// patientDietFormik.touched.rows &&
|
|
// patientDietFormik.touched.rows[index] &&
|
|
// patientDietFormik.touched.rows[index].date ? (
|
|
// <span style={{ color: "red" }}>
|
|
// {patientDietFormik.errors.rows[index].date}
|
|
// </span>
|
|
// ) : null
|
|
// }
|
|
// fullWidth
|
|
/>
|
|
<Autocomplete
|
|
size="small"
|
|
options={mealTime}
|
|
getOptionLabel={(option) => option}
|
|
sx={{ width: '150px' }}
|
|
|
|
value={patientDietFormik.values.rows[0].mealtime || null}
|
|
onChange={(event, newValue) => {
|
|
patientDietFormik.setFieldValue(
|
|
`rows.${0}.mealtime`,
|
|
newValue || ""
|
|
);
|
|
}}
|
|
onBlur={patientDietFormik.handleBlur}
|
|
renderInput={(params) => (
|
|
<TextField
|
|
{...params}
|
|
label="Meal Time"
|
|
// helperText={
|
|
// patientDietFormik.errors.rows &&
|
|
// patientDietFormik.errors.rows[index] &&
|
|
// patientDietFormik.errors.rows[index].mealtime &&
|
|
// patientDietFormik.touched.rows &&
|
|
// patientDietFormik.touched.rows[index] &&
|
|
// patientDietFormik.touched.rows[index].mealtime ? (
|
|
// <span style={{ color: 'red' }}>
|
|
// {patientDietFormik.errors.rows[index].mealtime}
|
|
// </span>
|
|
// ) : null
|
|
// }
|
|
fullWidth
|
|
/>
|
|
)}
|
|
/>
|
|
</Stack>
|
|
<Stack
|
|
mt={2}
|
|
>
|
|
{patientDietFormik.values.rows.map((item, index) => (
|
|
<Stack key={index}
|
|
mt={1}
|
|
>
|
|
<Stack
|
|
direction={'row'}
|
|
alignItems={'center'}
|
|
spacing={1}
|
|
>
|
|
<Autocomplete
|
|
// disabled
|
|
disabled = { RowIndex === index ? false : true }
|
|
size="small"
|
|
options={foodName}
|
|
getOptionLabel={(option) => option.label}
|
|
sx={{ width: '150px' }}
|
|
value={foodName.find(food => food.label === patientDietFormik.values.rows[index].foodname) || null}
|
|
// onChange={(event, newValue) => {
|
|
// setCurrentFoodId(newValue.value);
|
|
// const selectedFood = foodNutrition.find(item => item.foodId === currentFoodId);
|
|
// setCurrentNutrients(selectedFood ? selectedFood.nutrients : []);
|
|
// patientDietFormik.setFieldValue(
|
|
// `rows.${index}.foodname`,
|
|
// newValue ? newValue.label : ""
|
|
// );
|
|
// }}
|
|
onChange={(event, newValue) => handleFoodNameChange(index, newValue)}
|
|
// onInputChange={(event, newInputValue) => {
|
|
// setCurrentFoodName(newInputValue);
|
|
// }}
|
|
onBlur={patientDietFormik.handleBlur}
|
|
renderInput={(params) => (
|
|
<TextField
|
|
{...params}
|
|
label="Food Name"
|
|
helperText={
|
|
patientDietFormik.errors.rows &&
|
|
patientDietFormik.errors.rows[index] &&
|
|
patientDietFormik.errors.rows[index].foodname &&
|
|
patientDietFormik.touched.rows &&
|
|
patientDietFormik.touched.rows[index] &&
|
|
patientDietFormik.touched.rows[index].foodname ? (
|
|
<span style={{ color: 'red' }}>
|
|
{patientDietFormik.errors.rows[index].foodname}
|
|
</span>
|
|
) : null
|
|
}
|
|
fullWidth
|
|
// disabled
|
|
/>
|
|
)}
|
|
/>
|
|
<TextField
|
|
label="Quantity in grams"
|
|
// {RowIndex === index ? disabled : ""}
|
|
disabled = { RowIndex === index ? false : true }
|
|
type="number"
|
|
size="small"
|
|
sx={{ width: "150px" }}
|
|
{...patientDietFormik.getFieldProps(
|
|
`rows.${index}.quantityInGrams`
|
|
)}
|
|
onChange={(event) => handleQuantityChange(index, event.target.value)}
|
|
onBlur={patientDietFormik.handleBlur}
|
|
helperText={
|
|
patientDietFormik.errors.rows &&
|
|
patientDietFormik.errors.rows[index] &&
|
|
patientDietFormik.errors.rows[index].quantityInGrams &&
|
|
patientDietFormik.touched.rows &&
|
|
patientDietFormik.touched.rows[index] &&
|
|
patientDietFormik.touched.rows[index].quantityInGrams ? (
|
|
<span style={{ color: "red" }}>
|
|
{patientDietFormik.errors.rows[index].quantityInGrams}
|
|
</span>
|
|
) : null
|
|
}
|
|
fullWidth
|
|
/>
|
|
{/*<Typography
|
|
// variant={isxLargeScreen ? "h6" : "h6"}
|
|
gutterBottom
|
|
textAlign={"center"}
|
|
alignItems={'center'}
|
|
sx={{border : 1}}
|
|
>
|
|
Calories : {currentComplain["date"]}
|
|
</Typography>*/}
|
|
{item.nutrients && item.nutrients.length > 0 && item.nutrients.map((nutrient, idx) => (
|
|
<Box key={idx} component="span" sx={styles}>
|
|
{nutrient.label} : {nutrient.value['value'].toFixed(2)}
|
|
</Box>
|
|
))}
|
|
{/*
|
|
{
|
|
currentNutrients.map((item,index)=>{
|
|
return <Box
|
|
component="span"
|
|
sx={styles}
|
|
key={index}
|
|
>
|
|
{item.label} : {item.value}
|
|
</Box>
|
|
})
|
|
}
|
|
<Box
|
|
component="span"
|
|
sx={styles}
|
|
>
|
|
Protien : 120g
|
|
</Box>*/}
|
|
|
|
</Stack>
|
|
{RowIndex === index && (
|
|
<Button
|
|
sx={{display : 'inline-block', mt: 2}}
|
|
onClick={() => handleSaveAndAddRow(index)}
|
|
variant="outlined"
|
|
color="primary"
|
|
>
|
|
Save and Add More
|
|
</Button>
|
|
)}
|
|
</Stack>
|
|
))}
|
|
</Stack>
|
|
|
|
{/*<Button
|
|
onClick={() => patientDietFormik.handleSubmit(index)}
|
|
variant="outlined"
|
|
>
|
|
Save and Add row
|
|
</Button>*/}
|
|
</Box>
|
|
</DialogContent>
|
|
|
|
<DialogActions>
|
|
{/*<Button type="submit" onClick={()=> handleUpdate(id)} variant="outlined" style={{display : showupdate ? "null" : "none" }}>Update</Button>
|
|
<Button type="submit" onClick={() => handleSubmit()} variant="outlined" style={{display : showupdate ? "none" : "null" }}>Save</Button>
|
|
<Button onClick={() => resetForm()} type="reset" color='warning' variant="outlined">Reset</Button>*/}
|
|
</DialogActions>
|
|
</Dialog>
|
|
}
|
|
|
|
</Box>
|
|
);
|
|
};
|
|
export default PatientDashboard;
|