415 lines
12 KiB
Plaintext
415 lines
12 KiB
Plaintext
import React, { useState } from "react";
|
|
import {
|
|
Box,
|
|
Grid,
|
|
List,
|
|
ListItem,
|
|
ListItemButton,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
Divider,
|
|
Typography,
|
|
IconButton,
|
|
useMediaQuery,
|
|
useTheme,
|
|
styled,
|
|
} from "@mui/material";
|
|
// import {
|
|
// AssignmentInd,
|
|
// Assignment,
|
|
// Settings,
|
|
// Info,
|
|
// People,
|
|
// LocalOffer,
|
|
// HealthAndSafety,
|
|
// ManageAccounts,
|
|
// LocalHospital,
|
|
// MenuBook,
|
|
// } from "@mui/icons-material";
|
|
// import Drawer from "@mui/material/Drawer";
|
|
// import LogoutIcon from "@mui/icons-material/Logout";
|
|
import Collapse from "@mui/material/Collapse";
|
|
import ExpandMore from "@mui/icons-material/ExpandMore";
|
|
import ExpandLess from "@mui/icons-material/ExpandLess";
|
|
// import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
|
|
// import ChevronRightIcon from "@mui/icons-material/ChevronRight";
|
|
import Toolbar from "@mui/material/Toolbar";
|
|
// import { Link } from "react-router-dom";
|
|
|
|
// import DutyRooster from '../../assets/images/DutyRooster.png';
|
|
// import Inventory from '../../assets/images/Inventory.png'
|
|
import OPDSetupMaster from '../../assets/images/OPS Setup Master.png'
|
|
// import StoreIssue from '../../assets/images/Store Issue.png'
|
|
import PatientManagement from '../../assets/images/Patient Management.png'
|
|
// import Reporting from '../../assets/images/Reporting.png'
|
|
import DataSetup from '../../assets/images/Data Setup.png'
|
|
// import BioWaste from '../../assets/images/Bio-Waste.png'
|
|
// import ChronicIllnessMaster from '../../assets/images/Chronic Illness Master.png'
|
|
import Logout from '../../assets/images/Logout.png';
|
|
import Back from '../../assets/images/back.png';
|
|
import useAxiosPrivate from "../../utils/useAxiosPrivate";
|
|
// import { useNavigate } from "react-router-dom";
|
|
import { useSessionStorage } from "../../utils/useSessionStorage";
|
|
import { useEffect } from "react";
|
|
// import MuiDrawer from '@mui/material/Drawer';
|
|
import DateTime from "./DateTime";
|
|
|
|
|
|
const drawerWidth = 250;
|
|
const openedMixin = (theme) => ({
|
|
width: drawerWidth,
|
|
transition: theme.transitions.create('width', {
|
|
easing: theme.transitions.easing.sharp,
|
|
duration: theme.transitions.duration.enteringScreen,
|
|
}),
|
|
overflowX: 'hidden',
|
|
});
|
|
|
|
const closedMixin = (theme) => ({
|
|
transition: theme.transitions.create('width', {
|
|
easing: theme.transitions.easing.sharp,
|
|
duration: theme.transitions.duration.leavingScreen,
|
|
}),
|
|
overflowX: 'hidden',
|
|
width: `calc(${theme.spacing(7)} + 1px)`,
|
|
[theme.breakpoints.up('sm')]: {
|
|
width: `calc(${theme.spacing(8)} + 1px)`,
|
|
},
|
|
});
|
|
|
|
// const DrawerHeader = styled('div')(({ theme }) => ({
|
|
// display: 'flex',
|
|
// alignItems: 'center',
|
|
// justifyContent: 'flex-end',
|
|
// padding: theme.spacing(0, 1),
|
|
// // necessary for content to be below app bar
|
|
// // ...theme.mixins.toolbar,
|
|
// }));
|
|
|
|
|
|
|
|
const SideBar1 = ()=> {
|
|
|
|
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
|
|
|
|
const [isCollapse, setIsCollapse] = useState(false);
|
|
const [isopen,setIsOpen]=useState(false);
|
|
|
|
|
|
const handleCollapse = (index) => {
|
|
setIsCollapse((prevOpen) => (prevOpen === index ? null : index));
|
|
};
|
|
const handleOpen = (index) => {
|
|
setIsOpen((prevOpen) => (prevOpen === index ? null : index));
|
|
};
|
|
|
|
const [open, setOpen] = React.useState(true);
|
|
|
|
const handleDrawerOpen = () => {
|
|
setOpen(true);
|
|
};
|
|
|
|
const handleDrawerClose = () => {
|
|
setOpen(false);
|
|
};
|
|
|
|
const MiniDrawer = styled("div")(({ theme, open }) => ({
|
|
width: isMobile ? "100vh" : 240,
|
|
height:"100vh",
|
|
backgroundColor:"white",
|
|
// flexShrink: 0,
|
|
transition: "width 0.2s ease-in-out",
|
|
// whiteSpace: "nowrap",
|
|
boxSizing: "border-box",
|
|
border: "1px solid #dedede", // Add a 1px solid border
|
|
...(open && {
|
|
...openedMixin(theme),
|
|
}),
|
|
...(!open && {
|
|
...closedMixin(theme),
|
|
}),
|
|
}));
|
|
|
|
// const sidebararr = [
|
|
// {
|
|
// images: DutyRooster,
|
|
// title: "Duty Roster",
|
|
// children: [
|
|
// {
|
|
// title: "Duty Roster 1",
|
|
// subchild: ['Child 1', 'Child 2']
|
|
// }
|
|
// ],
|
|
// },
|
|
// {
|
|
// images: PatientManagement,
|
|
// title: "Patient Management",
|
|
// children: [
|
|
// {
|
|
// title:'Patient Management 1',
|
|
// subchild:[ 'Child 2', 'Child 3']
|
|
// }
|
|
// ]
|
|
// },
|
|
// {
|
|
// images: DataSetup,
|
|
// title: "Data Setup",
|
|
// children: [
|
|
// {
|
|
// title:'Data Setup 1',
|
|
// subchild:[ 'Child 2', 'Child 3']
|
|
// }
|
|
// ]
|
|
// },
|
|
// {
|
|
// images: OPSSetupMaster,
|
|
// title: "OPS Setup Master",
|
|
// children: [
|
|
// {
|
|
// title:'Master',
|
|
// subchild:[ 'Child 2', 'Child 3']
|
|
// }
|
|
// ]
|
|
// },
|
|
// {
|
|
// images: ChronicIllnessMaster,
|
|
// title: "Chronic illness Master",
|
|
// children: [
|
|
// {
|
|
// title:'Chronic illness Master 1',
|
|
// subchild:[ 'Child 2', 'Child 3']
|
|
// }
|
|
// ]
|
|
// },
|
|
// {
|
|
// images: StoreIssue,
|
|
// title: "Store Issue",
|
|
// children: [
|
|
// {
|
|
// title:'Store Issue 1',
|
|
// subchild:[ 'Child 2', 'Child 3']
|
|
// }
|
|
// ]
|
|
// },
|
|
// {
|
|
// images: Inventory,
|
|
// title: "Inventory",
|
|
// children: [
|
|
// {
|
|
// title:'Inventory 1',
|
|
// subchild:[ 'Child 2', 'Child 3']
|
|
// }
|
|
// ]
|
|
// },
|
|
// {
|
|
// images: BioWaste,
|
|
// title: "Bio-Waste",
|
|
// children: [
|
|
// {
|
|
// title:'Bio-Waste 1',
|
|
// subchild:[ 'Child 2', 'Child 3']
|
|
// }
|
|
// ]
|
|
// },
|
|
// {
|
|
// images: Reporting,
|
|
// title: "Reporting",
|
|
// children: [
|
|
// {
|
|
// title:'Reporting 1',
|
|
// subchild:[ 'Child 2', 'Child 3']
|
|
// }
|
|
// ]
|
|
// },
|
|
// ];
|
|
|
|
|
|
|
|
// vikas
|
|
// cosnt [data,setData] = useState([]);
|
|
const axiosClientPrivate = useAxiosPrivate();
|
|
const [data, setData] = useState([]);
|
|
// const [hoveredCard, setHoveredCard] = useState(null); // State to track hovered card
|
|
const { sessionData, updateSessionData } = useSessionStorage("sessionData");
|
|
const roleId = sessionData?.roleId;
|
|
|
|
// const [expandedItems, setExpandedItems] = useState([]);
|
|
// const handleItemClick = (index) => {
|
|
// // Toggle the expansion state of the clicked list item
|
|
// const newExpandedItems = [...expandedItems];
|
|
// newExpandedItems[index] = !newExpandedItems[index];
|
|
// setExpandedItems(newExpandedItems);
|
|
// };
|
|
// const navigate = useNavigate();
|
|
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
|
|
const getRoles = async () => {
|
|
try {
|
|
const response = await axiosClientPrivate.get(
|
|
`/menu-access/${roleId}`,
|
|
{
|
|
signal: controller.signal,
|
|
}
|
|
);
|
|
console.log("side bar menu: ",response.data),
|
|
// setFetchTrigger(prev => prev+1);
|
|
// setData(JSON.stringify(response.data)); string
|
|
setData(response.data);
|
|
} catch (err) {
|
|
console.error(err);
|
|
setData([]);
|
|
}
|
|
};
|
|
|
|
getRoles();
|
|
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
}, [axiosClientPrivate, roleId]);
|
|
|
|
|
|
// new
|
|
|
|
const SidebarMap = {
|
|
DataSetup: DataSetup,
|
|
OPDSetupMaster: OPDSetupMaster,
|
|
PatientManagement : PatientManagement,
|
|
// CMO: chiefmedoff,
|
|
// EMP : employee,
|
|
// PHY : pharmacy
|
|
};
|
|
|
|
|
|
return (
|
|
<Box>
|
|
<MiniDrawer open={open}>
|
|
{/* <Divider /> */}
|
|
{/* <ListItem>
|
|
<ListItemIcon>
|
|
<img src={"/ohctech_logo.jpeg"} width="150" height="20" />
|
|
</ListItemIcon>
|
|
<ListItemText/>
|
|
</ListItem>
|
|
<Divider /> */}
|
|
<List>
|
|
{data.map((item, index) => (
|
|
<React.Fragment key={item.Id}>
|
|
<ListItem disablePadding onClick={() => handleCollapse(index)}>
|
|
<ListItemButton>
|
|
<ListItemIcon>
|
|
<img src={SidebarMap[item.iconText]} width="20"/>
|
|
</ListItemIcon>
|
|
<ListItemText primary={item.menuName} />
|
|
{item.childMenus && (isCollapse === index ? <ExpandLess /> : <ExpandMore />)}
|
|
</ListItemButton>
|
|
</ListItem>
|
|
{item.childMenus && (
|
|
<Collapse in={isCollapse === index} timeout="auto" unmountOnExit>
|
|
<List component="div" disablePadding>
|
|
{item.childMenus.map((secondItem, childIndex) => (
|
|
<React.Fragment key={secondItem.Id}>
|
|
<ListItem disablePadding onClick={() => handleOpen(childIndex)}>
|
|
<ListItemButton to={`${secondItem.menuUrl}`}>
|
|
{/* <ListItemIcon>
|
|
<img src={met.images} width="20"/>
|
|
</ListItemIcon>*/}
|
|
|
|
{/*<ListItemText primary={secondItem.name} />*/}
|
|
|
|
<ListItemText primary={secondItem.name} />
|
|
|
|
{secondItem.childMenus.length>0 ? secondItem.childMenus && (isopen === childIndex ? <ExpandLess /> : <ExpandMore />) : ''}
|
|
</ListItemButton>
|
|
</ListItem>
|
|
{secondItem.childMenus && (
|
|
<Collapse in={isopen === childIndex} timeout="auto" unmountOnExit>
|
|
<List component="div" disablePadding sx={{ paddingLeft: '56px' }}>
|
|
{secondItem.childMenus.map((thirdItem) => (
|
|
<ListItem key={thirdItem.Id} disablePadding>
|
|
<ListItemButton to={`${thirdItem.menuUrl}`}>
|
|
{/* <ListItemIcon>
|
|
{met.images}
|
|
</ListItemIcon>
|
|
|
|
<ListItemText primary={thirdItem.name} />*/}
|
|
|
|
<ListItemText primary={thirdItem.name} />
|
|
|
|
</ListItemButton>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
</Collapse>
|
|
)}
|
|
</React.Fragment>
|
|
))}
|
|
</List>
|
|
</Collapse>
|
|
)}
|
|
</React.Fragment>
|
|
))}
|
|
</List>
|
|
<Toolbar>
|
|
<Grid container direction="row" spacing={2}>
|
|
{/* <Grid item> */}
|
|
<IconButton
|
|
// color="inherit"
|
|
aria-label="open drawer"
|
|
onClick={handleDrawerOpen}
|
|
edge="start"
|
|
sx={{
|
|
// marginRight: 5,
|
|
marginLeft: 0.5,
|
|
...(open && { display: 'none' }),
|
|
// justifyContent: 'flex-end',
|
|
}}
|
|
>
|
|
{open ? (
|
|
<img src={Back} width="25px" />
|
|
) : (
|
|
<img src={Back} width="25px" />
|
|
)}
|
|
</IconButton>
|
|
{open && (
|
|
<IconButton
|
|
aria-label="close drawer"
|
|
onClick={handleDrawerClose}
|
|
sx={{
|
|
marginLeft: 21,
|
|
// justifyContent: 'flex-end',
|
|
}}
|
|
>
|
|
<img src={Back} width="25px" />
|
|
</IconButton>
|
|
)}
|
|
{/* </Grid> */}
|
|
<Grid item>
|
|
<Typography variant="body1" component="div" sx={{ ml: 3, mt: 1 }}>
|
|
<DateTime />
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</Toolbar>
|
|
<Divider />
|
|
<List>
|
|
<ListItem disablePadding>
|
|
<ListItemButton>
|
|
<ListItemIcon>
|
|
<img src={Logout} width="20"/>
|
|
</ListItemIcon>
|
|
<ListItemText primary="Logout" />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
</List>
|
|
</MiniDrawer>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default SideBar1;
|