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) => ( ))(({ theme }) => ({ border: `1px solid ${theme.palette.divider}`, "&:not(:last-child)": { borderBottom: 0, }, "&::before": { display: "none", }, })); const AccordionSummary = styled((props) => ( } {...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 (
Logo {" "} {/* Wrapping Box to control positioning */} setShowList(true)} /> {showList && ( {filteredPatients.length > 0 ? filteredPatients.map((patient) => ( { 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", }, }} > {patient.label} )): isTyping && ( No patients found )} )} Occupational Health Center (Delhi, Plant OHC) setOpen(true)} /> setOpen(true)} > ADMIN1, setOpen(true)} > Doctor setOpen(true)} /> setOpen(true)} > ADMIN1, setOpen(true)} > Doctor { setOpen(false); }} anchorOrigin={{ vertical: "top", horizontal: "right", }} transformOrigin={{ vertical: "top", horizontal: "left", }} > Profile Switch OHC Switch Role Change Password Read Manual Logout {selectedPatientName} } 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", }, }} > {" "} Recent OPD{" "} {opd.length > 0 ? ( opd.map((item) => ( Ticket No: {item.ticketNo} Appointment Date: {item.appointmentDate} Complaints: {item.complaints.length > 0 ? ( item.complaints.map((complaint, index) => ( - {complaint.label} )) ) : ( No Complaints )} Recommended Tests: {item.recommendedTests.length > 0 ? ( item.recommendedTests.map((test, index) => ( - {test.label} )) ) : ( No Recommended Tests )} )) ) : ( No OPD Done Yet )} } aria-controls="panel12-content" id="panel2-header" sx={{ borderRadius: "10px", display: "flex", justifyContent: "center", alignItems: "center", "& .MuiAccordionSummary-content": { fontWeight: "bold", justifyContent: "center", }, }} > Recent Injury {inj.length > 0 ? ( inj.map((item) => ( Ticket No: {item.ticketNo} Appointment Date: {item.appointmentDate} Complaints: {item.complaints.length > 0 ? ( item.complaints.map((complaint, index) => ( - {complaint.label} )) ) : ( No Complaints )} Recommended Tests: {item.recommendedTests.length > 0 ? ( item.recommendedTests.map((test, index) => ( - {test.label} )) ) : ( No Recommended Tests )} )) ) : ( No Injury Done Yet )} } 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 }, }} > {" "} Recent Medical Examination{" "} No Medical Examination Done Yet } 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 }, }} > {" "} Recent Sickness/Fitness{" "} No Sickness Done Yet
); }; export default NewHeader;