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 (
{" "}
{/* 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
);
};
export default NewHeader;