977 lines
30 KiB
Plaintext
977 lines
30 KiB
Plaintext
import {
|
|
AppBar,
|
|
Avatar,
|
|
Badge,
|
|
Drawer,
|
|
InputBase,
|
|
Menu,
|
|
MenuItem,
|
|
IconButton,
|
|
Toolbar,
|
|
Typography,
|
|
alpha,
|
|
Button,
|
|
useMediaQuery,
|
|
Stack,
|
|
} from "@mui/material";
|
|
import { useTheme } from "@mui/material/styles";
|
|
import Box from "@mui/material/Box";
|
|
import { List, ListItem} from "@mui/material";
|
|
import React from "react";
|
|
import MedicationIcon from "@mui/icons-material/Medication";
|
|
import { Notifications } from "@mui/icons-material";
|
|
import { useState } from "react";
|
|
import MenuIcon from "@mui/icons-material/Menu";
|
|
import SearchIcon from "@mui/icons-material/Search";
|
|
import SwapHorizIcon from "@mui/icons-material/SwapHoriz";
|
|
import LibraryBooksRoundedIcon from "@mui/icons-material/LibraryBooksRounded";
|
|
import PowerSettingsNewRoundedIcon from "@mui/icons-material/PowerSettingsNewRounded";
|
|
import VpnKeyIcon from "@mui/icons-material/VpnKey";
|
|
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
|
|
import SideBar1 from "./SideBar1";
|
|
import help from "../../assets/images/Help.png";
|
|
import { Link } from "react-router-dom";
|
|
import {
|
|
Dialog,
|
|
DialogActions,
|
|
DialogContent,
|
|
DialogTitle,
|
|
} from "@mui/material";
|
|
import { useEffect } from "react";
|
|
import PersonIcon from "@mui/icons-material/Person";
|
|
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 ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
|
import ArrowForwardIosSharpIcon from "@mui/icons-material/ArrowForwardIosSharp";
|
|
import useAxiosPrivate from "../../utils/useAxiosPrivate";
|
|
import { Grid, Card, CardContent } from "@mui/material";
|
|
import EditIcon from "@mui/icons-material/Edit";
|
|
|
|
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: "rgba(0, 0, 0, .03)",
|
|
flexDirection: "row-reverse",
|
|
"& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
|
|
transform: "rotate(90deg)",
|
|
},
|
|
"& .MuiAccordionSummary-content": {
|
|
marginLeft: theme.spacing(1),
|
|
},
|
|
...theme.applyStyles("dark", {
|
|
backgroundColor: "rgba(255, 255, 255, .05)",
|
|
}),
|
|
}));
|
|
|
|
const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
|
|
padding: theme.spacing(0),
|
|
borderTop: "1px solid rgba(0, 0, 0, .125)",
|
|
}));
|
|
const drawerWidth = 240;
|
|
const StyledToolBar = styled(Toolbar)({
|
|
height: "75px",
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
padding: "3",
|
|
border: "1px solid #ccc", // Add a border to the toolbar
|
|
"@media (min-width: 100px) and (max-width: 370px)": {
|
|
padding: "3",
|
|
height: "70px",
|
|
width: "80vh",
|
|
},
|
|
});
|
|
|
|
const Icons = styled(Box)(({ theme }) => ({
|
|
display: "none",
|
|
gap: "20px",
|
|
alignItems: "center",
|
|
cursor: "pointer",
|
|
[theme.breakpoints.up("@media (max-width: 965px)")]: {
|
|
display: "flex",
|
|
},
|
|
"@media (max-width: 700px)": {
|
|
gap: "10px",
|
|
},
|
|
"@media (max-width: 480px)": {
|
|
gap: "5px",
|
|
},
|
|
}));
|
|
|
|
const UserBox = styled(Box)(({ theme }) => ({
|
|
display: "flex",
|
|
gap: "10px",
|
|
alignItems: "center",
|
|
cursor: "pointer",
|
|
[theme.breakpoints.up("@media (max-width: 965px)")]: {
|
|
display: "none",
|
|
},
|
|
"@media (max-width: 700px)": {
|
|
gap: "5px",
|
|
},
|
|
"@media (max-width: 480px)": {
|
|
gap: "3px",
|
|
},
|
|
}));
|
|
|
|
const Search = styled("div")(({ theme }) => ({
|
|
position: "relative",
|
|
borderRadius: "20px",
|
|
backgroundColor: "#F3F3F3",
|
|
"&:hover": {
|
|
backgroundColor: "#F3F3F3",
|
|
},
|
|
marginLeft: 0,
|
|
width: "100%",
|
|
[theme.breakpoints.up("md")]: {
|
|
marginLeft: theme.spacing(0),
|
|
width: "auto",
|
|
},
|
|
}));
|
|
|
|
const SearchIconWrapper = styled("div")(({ theme }) => ({
|
|
padding: theme.spacing(0, 2),
|
|
height: "100%",
|
|
position: "absolute",
|
|
pointerEvents: "none",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}));
|
|
|
|
const StyledInputBase = styled(InputBase)(({ theme }) => ({
|
|
color: "#A9A9A9",
|
|
"& .MuiInputBase-input": {
|
|
padding: theme.spacing(1, 1, 1, 0),
|
|
paddingLeft: `calc(1em + ${theme.spacing(4)})`,
|
|
transition: theme.transitions.create("width"),
|
|
width: "100%",
|
|
[theme.breakpoints.up("md")]: {
|
|
width: "20ch",
|
|
},
|
|
},
|
|
}));
|
|
|
|
const NewHeader = () => {
|
|
const [open, setOpen] = useState(false);
|
|
const [toggleDrawer, setToggleDrawer] = useState(false);
|
|
const [mobileOpen, setMobileOpen] = useState(false);
|
|
const [openPopup, setOpenPopup] = useState(false);
|
|
const theme = useTheme();
|
|
const matches = useMediaQuery(theme.breakpoints.up("965px"));
|
|
const handleDrawerToggle = () => {
|
|
setMobileOpen(!mobileOpen);
|
|
};
|
|
const [patients, setPatients] = useState([]); // To store the patient data
|
|
const [searchName, setSearchName] = useState(""); // To store the search query
|
|
const [error, setError] = useState(null); // To handle errors
|
|
const [filteredPatients, setFilteredPatients] = useState([]);
|
|
const axiosClientPrivate = useAxiosPrivate();
|
|
const [showList, setShowList] = useState(false);
|
|
const [selectedPatientId, setSelectedPatientId] = useState(null);
|
|
const [selectedPatientName, setSelectedPatientName] = useState(null);
|
|
const [opd, setOpd] = useState([]);
|
|
const [inj, setInj] = useState([]);
|
|
const [isTyping, setIsTyping] = useState(false);
|
|
|
|
// for Opd
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
const fetchOpd = async () => {
|
|
try {
|
|
const response = await axiosClientPrivate.get(
|
|
`employee-appointments/opd/${selectedPatientId}`,
|
|
{
|
|
signal: controller.signal,
|
|
}
|
|
);
|
|
console.log("response",response);
|
|
const items = response.data;
|
|
console.log("items opd", items);
|
|
const opd = items.map((item) => {
|
|
return {
|
|
id: item.id,
|
|
ticketNo: item.ticketNo,
|
|
complaints: item.complaints,
|
|
appointmentDate: item.appointmentDate,
|
|
recommendedTests: item.recommendedTests,
|
|
};
|
|
});
|
|
|
|
setOpd(opd);
|
|
console.log("check opd", opd);
|
|
} catch (error) {
|
|
console.error("Error fetching opd:", error);
|
|
}
|
|
};
|
|
|
|
fetchOpd();
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
}, [selectedPatientId]);
|
|
|
|
//for injury
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
const fetchInj = async () => {
|
|
try {
|
|
const response = await axiosClientPrivate.get(
|
|
`employee-appointments/injury/${selectedPatientId}`,
|
|
{
|
|
signal: controller.signal,
|
|
}
|
|
);
|
|
console.log("response inj", response);
|
|
const items = response.data;
|
|
console.log("items inj", items);
|
|
const inj = items.map((item) => {
|
|
return {
|
|
id: item.id,
|
|
ticketNo: item.ticketNo,
|
|
complaints: item.complaints,
|
|
appointmentDate: item.appointmentDate,
|
|
recommendedTests: item.recommendedTests,
|
|
};
|
|
});
|
|
|
|
setInj(inj);
|
|
console.log("check Inj", inj);
|
|
} catch (error) {
|
|
console.error("Error fetching Inj:", error);
|
|
}
|
|
};
|
|
|
|
fetchInj();
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
}, [selectedPatientId]);
|
|
|
|
// Handle input change for search
|
|
const handleInputChange = (event) => {
|
|
const term = event.target.value;
|
|
console.log("search", term);
|
|
setSearchName(term);
|
|
setIsTyping(true);
|
|
};
|
|
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
// Only call the API if searchName is not empty
|
|
if (searchName) {
|
|
const fetchPatient = async () => {
|
|
try {
|
|
const response = await axiosClientPrivate.get(
|
|
`/patients/patient-search?name=${searchName}`,
|
|
{
|
|
signal: controller.signal,
|
|
}
|
|
);
|
|
console.log(response);
|
|
const items = response.data;
|
|
|
|
const processedPatients = items.map((patient) => ({
|
|
id: patient.id,
|
|
label: patient.patientName,
|
|
}));
|
|
|
|
console.log("Processed Patients", processedPatients);
|
|
|
|
setPatients(processedPatients);
|
|
} catch (error) {
|
|
console.error("Error fetching Patients:", error);
|
|
}
|
|
};
|
|
fetchPatient();
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
}
|
|
}, [searchName]);
|
|
|
|
// Filter patients based on search input
|
|
useEffect(() => {
|
|
|
|
if (searchName) {
|
|
const filtered = patients.filter((patient) =>
|
|
patient.label.toLowerCase().includes(searchName.toLowerCase())
|
|
);
|
|
setFilteredPatients(filtered);
|
|
|
|
} else {
|
|
setFilteredPatients([]); // Clear filtered patients if no search term
|
|
}
|
|
}, [searchName, patients]);
|
|
console.log("filtered", filteredPatients);
|
|
|
|
const container =
|
|
window !== undefined ? () => window.document.body : undefined;
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
fontSize: theme.breakpoints.up("sm") ? "18px" : "5px",
|
|
lineHeight: theme.breakpoints.between("md", "lg") ? "1" : "1",
|
|
fontWeight: theme.breakpoints.down("xs") ? "bold" : "normal",
|
|
}}
|
|
>
|
|
<AppBar
|
|
position="sticky"
|
|
sx={{
|
|
backgroundColor: "white",
|
|
width: "100%",
|
|
"@media (min-width: 100px) and (max-width: 370px)": {
|
|
width: "80vh",
|
|
},
|
|
"@media (min-width: 380px) and (max-width: 450px)": {
|
|
width: "60vh",
|
|
},
|
|
}}
|
|
elevation={0}
|
|
>
|
|
<StyledToolBar>
|
|
<Box
|
|
sx={{
|
|
display: {
|
|
lg: "none",
|
|
},
|
|
}}
|
|
>
|
|
<IconButton
|
|
color="black"
|
|
aria-label="open drawer"
|
|
edge="start"
|
|
onClick={handleDrawerToggle}
|
|
>
|
|
<MenuIcon />
|
|
</IconButton>
|
|
</Box>
|
|
|
|
<Typography
|
|
variant="h6"
|
|
sx={{ display: { xs: "none", md: "block" }, color: "blue" }}
|
|
>
|
|
<Drawer open={toggleDrawer} onClose={handleDrawerToggle}></Drawer>
|
|
<img
|
|
src={"/ohctech_logo.jpeg"}
|
|
width="150"
|
|
height="20"
|
|
alt="Logo"
|
|
/>
|
|
</Typography>
|
|
<MedicationIcon sx={{ display: { xs: "block", md: "none" } }} />
|
|
|
|
<Search>
|
|
<SearchIconWrapper>
|
|
<SearchIcon />
|
|
</SearchIconWrapper>
|
|
<StyledInputBase
|
|
placeholder="Navigate To…"
|
|
inputProps={{ "aria-label": "search" }}
|
|
/>
|
|
</Search>
|
|
<Box sx={{ position: "relative" }}>
|
|
{" "}
|
|
{/* Wrapping Box to control positioning */}
|
|
<Search>
|
|
<SearchIconWrapper>
|
|
<SearchIcon />
|
|
</SearchIconWrapper>
|
|
<StyledInputBase
|
|
placeholder="Search…"
|
|
inputProps={{ "aria-label": "search" }}
|
|
value={searchName}
|
|
onChange={handleInputChange}
|
|
onClick={() => setShowList(true)}
|
|
/>
|
|
</Search>
|
|
{showList && (
|
|
<Box
|
|
sx={{
|
|
position: "absolute",
|
|
top: "100%",
|
|
left: 0,
|
|
width: "100%",
|
|
backgroundColor: "#f0f0f5",
|
|
padding: "8px",
|
|
borderRadius: "4px",
|
|
boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)",
|
|
maxHeight: "200px",
|
|
overflowY: "auto",
|
|
zIndex: 1,
|
|
}}
|
|
>
|
|
<List>
|
|
{filteredPatients.length > 0
|
|
? filteredPatients.map((patient) => (
|
|
<ListItem
|
|
key={patient.id}
|
|
onClick={() => {
|
|
setSelectedPatientId(patient.id); // Store patient ID
|
|
setSelectedPatientName(patient.label);
|
|
setOpenPopup(true);
|
|
setIsTyping(false);
|
|
}}
|
|
sx={{
|
|
color: "#333",
|
|
padding: "8px",
|
|
cursor: "pointer",
|
|
"&:hover": {
|
|
backgroundColor: "#d1e3ff",
|
|
color: "#0056b3",
|
|
},
|
|
}}
|
|
>
|
|
<Typography variant="body2">
|
|
{patient.label}
|
|
</Typography>
|
|
</ListItem>
|
|
)):
|
|
isTyping && (
|
|
<ListItem sx={{ color: "#333" }}>
|
|
<Typography variant="body2">
|
|
No patients found
|
|
</Typography>
|
|
</ListItem>
|
|
)}
|
|
</List>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
|
|
<Typography
|
|
variant="h7"
|
|
sx={{
|
|
display: { xs: "none", md: "block" },
|
|
color: "#41B06E",
|
|
"@media (max-width: 790px)": {
|
|
fontSize: "13px",
|
|
},
|
|
}}
|
|
>
|
|
Occupational Health Center
|
|
<Typography
|
|
sx={{
|
|
color: "#45474B",
|
|
"@media (max-width: 790px)": {
|
|
fontSize: "12px",
|
|
},
|
|
}}
|
|
>
|
|
(Delhi, Plant OHC)
|
|
</Typography>
|
|
</Typography>
|
|
<Icons>
|
|
<img src={help} width="20" />
|
|
<Badge
|
|
badgeContent={1}
|
|
color="error"
|
|
sx={{
|
|
backgroundColor: "#0766AD",
|
|
borderRadius: "20px",
|
|
width: "35px",
|
|
height: "35px",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<Notifications />
|
|
</Badge>
|
|
<Avatar
|
|
sx={{ width: 30, height: 30, border: "black" }}
|
|
src=""
|
|
onClick={() => setOpen(true)}
|
|
/>
|
|
<Typography
|
|
variant="subtitle1"
|
|
component={"div"}
|
|
sx={{ color: "#45474B" }}
|
|
onClick={() => setOpen(true)}
|
|
>
|
|
ADMIN1,
|
|
<Typography
|
|
variant="subtitle2"
|
|
sx={{ color: "#45474B", fontSize: "12px" }}
|
|
onClick={() => setOpen(true)}
|
|
>
|
|
Doctor
|
|
</Typography>
|
|
</Typography>
|
|
</Icons>
|
|
<UserBox>
|
|
<Avatar
|
|
sx={{ width: 30, height: 30 }}
|
|
// src=""
|
|
onClick={() => setOpen(true)}
|
|
/>
|
|
<Typography
|
|
variant="subtitle1"
|
|
component={"div"}
|
|
sx={{ color: "#45474B", fontSize: "10px" }}
|
|
onClick={() => setOpen(true)}
|
|
>
|
|
ADMIN1,
|
|
<Typography
|
|
variant="subtitle2"
|
|
sx={{ color: "#45474B", fontSize: "7px" }}
|
|
onClick={() => setOpen(true)}
|
|
>
|
|
Doctor
|
|
</Typography>
|
|
</Typography>
|
|
</UserBox>
|
|
</StyledToolBar>
|
|
<Menu
|
|
sx={{ mt: "60px" }}
|
|
id="menu-appbar"
|
|
aria-labelledby="demo-positioned-button"
|
|
open={open}
|
|
onClose={() => {
|
|
setOpen(false);
|
|
}}
|
|
anchorOrigin={{
|
|
vertical: "top",
|
|
horizontal: "right",
|
|
}}
|
|
transformOrigin={{
|
|
vertical: "top",
|
|
horizontal: "left",
|
|
}}
|
|
>
|
|
<MenuItem>
|
|
<AccountCircleIcon />
|
|
Profile
|
|
</MenuItem>
|
|
<MenuItem>
|
|
<SwapHorizIcon />
|
|
<Link to="/ohcSelection">Switch OHC</Link>
|
|
</MenuItem>
|
|
<MenuItem>
|
|
<SwapHorizIcon />
|
|
<Link to="/roleSelection">Switch Role</Link>
|
|
</MenuItem>
|
|
<MenuItem>
|
|
<VpnKeyIcon />
|
|
Change Password
|
|
</MenuItem>
|
|
<MenuItem>
|
|
<LibraryBooksRoundedIcon />
|
|
Read Manual
|
|
</MenuItem>
|
|
<MenuItem>
|
|
<PowerSettingsNewRoundedIcon />
|
|
Logout
|
|
</MenuItem>
|
|
</Menu>
|
|
</AppBar>
|
|
<Drawer
|
|
container={container}
|
|
variant="temporary"
|
|
open={mobileOpen}
|
|
onClose={handleDrawerToggle}
|
|
ModalProps={{
|
|
keepMounted: true,
|
|
}}
|
|
>
|
|
<SideBar1 />
|
|
</Drawer>
|
|
<Dialog
|
|
open={openPopup}
|
|
fullWidth
|
|
PaperProps={{
|
|
sx: {
|
|
alignSelf: "flex-start",
|
|
},
|
|
}}
|
|
maxWidth={"lg"}
|
|
>
|
|
<DialogTitle>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "center",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Stack
|
|
direction={"row"}
|
|
sx={{
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<PersonIcon sx={{ color: "#229fec" }} />
|
|
<Typography variant="h6" sx={{ flexGrow: 1, color: "#229fec" }}>
|
|
{selectedPatientName}
|
|
</Typography>
|
|
</Stack>
|
|
</Box>
|
|
</DialogTitle>
|
|
|
|
<DialogContent dividers>
|
|
<Box
|
|
sx={{
|
|
width: "100%",
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
gap: 1,
|
|
justifyContent: "space-around",
|
|
alignItems: "flex-start",
|
|
}}
|
|
>
|
|
<Accordion
|
|
sx={{
|
|
width: "25%",
|
|
marginBottom: 2,
|
|
mt: 1,
|
|
border: "0",
|
|
}}
|
|
>
|
|
<AccordionSummary
|
|
expandIcon={<ExpandMoreIcon sx={{ color: "#00796b" }} />}
|
|
aria-controls="panel1-content"
|
|
id="panel1-header"
|
|
sx={{
|
|
borderRadius: "10px",
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
"&:hover": {},
|
|
"&.Mui-expanded": {},
|
|
"& .MuiAccordionSummary-content": {
|
|
fontWeight: "bold",
|
|
justifyContent: "center",
|
|
},
|
|
}}
|
|
>
|
|
<Typography variant="body1" color={"#00796b"}>
|
|
{" "}
|
|
Recent OPD{" "}
|
|
</Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails>
|
|
{opd.length > 0 ? (
|
|
opd.map((item) => (
|
|
<Card
|
|
key={item.id}
|
|
sx={{
|
|
width: "100%",
|
|
borderRadius: "10px",
|
|
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
|
|
marginBottom: 2,
|
|
}}
|
|
>
|
|
<CardContent
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Typography variant="body2">
|
|
Ticket No: {item.ticketNo}
|
|
</Typography>
|
|
<Typography variant="body2">
|
|
Appointment Date: {item.appointmentDate}
|
|
</Typography>
|
|
|
|
<Typography
|
|
variant="body2"
|
|
sx={{ fontWeight: "bold", marginTop: 1 }}
|
|
>
|
|
Complaints:
|
|
</Typography>
|
|
{item.complaints.length > 0 ? (
|
|
item.complaints.map((complaint, index) => (
|
|
<Typography key={index} variant="body2">
|
|
- {complaint.label}
|
|
</Typography>
|
|
))
|
|
) : (
|
|
<Typography variant="body2">No Complaints</Typography>
|
|
)}
|
|
|
|
<Typography
|
|
variant="body2"
|
|
sx={{ fontWeight: "bold", marginTop: 1 }}
|
|
>
|
|
Recommended Tests:
|
|
</Typography>
|
|
{item.recommendedTests.length > 0 ? (
|
|
item.recommendedTests.map((test, index) => (
|
|
<Typography key={index} variant="body2">
|
|
- {test.label}
|
|
</Typography>
|
|
))
|
|
) : (
|
|
<Typography variant="body2">
|
|
No Recommended Tests
|
|
</Typography>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
))
|
|
) : (
|
|
<Typography variant="body2">No OPD Done Yet</Typography>
|
|
)}
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
<Accordion
|
|
sx={{
|
|
marginBottom: 2,
|
|
width: "25%",
|
|
mt: 1,
|
|
border: "0",
|
|
}}
|
|
>
|
|
<AccordionSummary
|
|
expandIcon={<ExpandMoreIcon sx={{ color: "#00796b" }} />}
|
|
aria-controls="panel12-content"
|
|
id="panel2-header"
|
|
sx={{
|
|
borderRadius: "10px",
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
"& .MuiAccordionSummary-content": {
|
|
fontWeight: "bold",
|
|
justifyContent: "center",
|
|
},
|
|
}}
|
|
>
|
|
<Typography variant="body1" color={"#00796b"}>
|
|
Recent Injury
|
|
</Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails>
|
|
{inj.length > 0 ? (
|
|
inj.map((item) => (
|
|
<Card
|
|
key={item.id}
|
|
sx={{
|
|
width: "100%",
|
|
borderRadius: "10px",
|
|
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
|
|
marginBottom: 2,
|
|
}}
|
|
>
|
|
<CardContent
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Typography variant="body2">
|
|
Ticket No: {item.ticketNo}
|
|
</Typography>
|
|
<Typography variant="body2">
|
|
Appointment Date: {item.appointmentDate}
|
|
</Typography>
|
|
|
|
<Typography
|
|
variant="body2"
|
|
sx={{ fontWeight: "bold", marginTop: 1 }}
|
|
>
|
|
Complaints:
|
|
</Typography>
|
|
{item.complaints.length > 0 ? (
|
|
item.complaints.map((complaint, index) => (
|
|
<Typography key={index} variant="body2">
|
|
- {complaint.label}
|
|
</Typography>
|
|
))
|
|
) : (
|
|
<Typography variant="body2">No Complaints</Typography>
|
|
)}
|
|
|
|
<Typography
|
|
variant="body2"
|
|
sx={{ fontWeight: "bold", marginTop: 1 }}
|
|
>
|
|
Recommended Tests:
|
|
</Typography>
|
|
{item.recommendedTests.length > 0 ? (
|
|
item.recommendedTests.map((test, index) => (
|
|
<Typography key={index} variant="body2">
|
|
- {test.label}
|
|
</Typography>
|
|
))
|
|
) : (
|
|
<Typography variant="body2">
|
|
No Recommended Tests
|
|
</Typography>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
))
|
|
) : (
|
|
<Typography variant="body2">No Injury Done Yet</Typography>
|
|
)}
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
|
|
<Accordion
|
|
sx={{
|
|
marginBottom: 2,
|
|
width: "25%",
|
|
mt: 1,
|
|
border: "0",
|
|
}}
|
|
>
|
|
<AccordionSummary
|
|
expandIcon={<ExpandMoreIcon sx={{ color: "#00796b" }} />}
|
|
aria-controls="panel3-content"
|
|
id="panel3-header"
|
|
sx={{
|
|
borderRadius: "10px",
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
"&:hover": {},
|
|
"&.Mui-expanded": {},
|
|
"& .MuiAccordionSummary-content": {
|
|
fontWeight: "bold",
|
|
justifyContent: "center", // Center text horizontally
|
|
},
|
|
}}
|
|
>
|
|
<Typography variant="body1" color={"#00796b"}>
|
|
{" "}
|
|
Recent Medical Examination{" "}
|
|
</Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails>
|
|
<Card
|
|
sx={{
|
|
width: "100%",
|
|
borderRadius: "10px",
|
|
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
|
|
}}
|
|
>
|
|
<CardContent
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Typography variant="body2">
|
|
No Medical Examination Done Yet
|
|
</Typography>
|
|
<Button
|
|
variant="contained"
|
|
sx={{ marginTop: 1 }}
|
|
fullWidth
|
|
size="small"
|
|
color="success"
|
|
>
|
|
New Medical
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
|
|
<Accordion
|
|
sx={{
|
|
marginBottom: 2,
|
|
width: "25%",
|
|
mt: 1,
|
|
border: "0",
|
|
}}
|
|
>
|
|
<AccordionSummary
|
|
expandIcon={<ExpandMoreIcon sx={{ color: "#00796b" }} />}
|
|
aria-controls="panel4-content"
|
|
id="panel4-header"
|
|
sx={{
|
|
borderRadius: "10px",
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
"& .MuiAccordionSummary-content": {
|
|
fontWeight: "bold",
|
|
justifyContent: "center", // Center text horizontally
|
|
},
|
|
}}
|
|
>
|
|
<Typography variant="body1" color={"#00796b"}>
|
|
{" "}
|
|
Recent Sickness/Fitness{" "}
|
|
</Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails>
|
|
<Card
|
|
sx={{
|
|
width: "100%",
|
|
borderRadius: "10px",
|
|
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
|
|
}}
|
|
>
|
|
<CardContent
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Typography variant="body2">
|
|
No Sickness Done Yet
|
|
</Typography>
|
|
<Button
|
|
variant="contained"
|
|
sx={{ marginTop: 1 }}
|
|
fullWidth
|
|
size="small"
|
|
color="success"
|
|
>
|
|
New Sickness
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
</Box>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button
|
|
type="submit"
|
|
variant="outlined"
|
|
onClick={() => setOpenPopup(false)}
|
|
>
|
|
cancel
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
};
|
|
export default NewHeader;
|