291 lines
10 KiB
JavaScript
291 lines
10 KiB
JavaScript
import { useMemo, useState } from 'react';
|
||
|
||
// material-ui
|
||
import {
|
||
Box,
|
||
useMediaQuery,
|
||
Stack,
|
||
Tooltip,
|
||
IconButton,
|
||
Popper,
|
||
ClickAwayListener,
|
||
List,
|
||
ListItemButton,
|
||
ListItemText,
|
||
Grid,
|
||
ListItemIcon,
|
||
Typography
|
||
} from '@mui/material';
|
||
|
||
import Transitions from 'components/@extended/Transitions';
|
||
|
||
// project import
|
||
import Search from './Search';
|
||
import Message from './Message';
|
||
import Profile from './Profile';
|
||
import Notification from './Notification';
|
||
import MobileSection from './MobileSection';
|
||
import MegaMenuSection from './MegaMenuSection';
|
||
import { useNavigate } from 'react-router';
|
||
import {
|
||
MailOutlined,
|
||
// DashboardOutlined,
|
||
UserOutlined,
|
||
CustomerServiceOutlined,
|
||
WindowsOutlined
|
||
} from '@ant-design/icons';
|
||
import { useTheme } from '@mui/material/styles';
|
||
import { TbBoxMultiple1 } from 'react-icons/tb';
|
||
import { GrMultiple } from 'react-icons/gr';
|
||
import { FaUserPen } from 'react-icons/fa6';
|
||
import { TbUserEdit } from 'react-icons/tb';
|
||
|
||
// ==============================|| HEADER - CONTENT ||============================== //
|
||
|
||
const HeaderContent = () => {
|
||
const matchesXs = useMediaQuery((theme) => theme.breakpoints.down('md'));
|
||
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
const megaMenu = useMemo(() => <MegaMenuSection />, []);
|
||
|
||
const [open, setOpen] = useState(false);
|
||
const [anchorEl, setAnchorEl] = useState(null);
|
||
const theme = useTheme();
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
// const megaMenu = useMemo(() => <MegaMenuSection />, []);
|
||
const iconBackColorOpen = 'grey.300';
|
||
const iconBackColor = 'grey.100';
|
||
const navigate = useNavigate();
|
||
|
||
const handleToggle = (e) => {
|
||
setOpen(!open);
|
||
setAnchorEl(e.currentTarget);
|
||
};
|
||
const handleClickAway = () => {
|
||
setOpen(false);
|
||
};
|
||
|
||
return (
|
||
<>
|
||
{/* {!matchesXs && <Search />} */}
|
||
<Stack width="100%" direction="row" justifyContent="space-between" spacing={2} alignItems="center">
|
||
{/* {!matchesXs && megaMenu} */}
|
||
<Typography variant="h5" sx={{ ml: 2, color: '#fff', whiteSpace: 'nowrap' }}>
|
||
{localStorage.getItem('fullname') || ''}
|
||
</Typography>
|
||
{matchesXs && <Box sx={{ width: '100%', ml: 1 }} />}
|
||
<Stack direction={'row'} spacing={2}>
|
||
<Box sx={{ flexShrink: 0, ml: 0.75 }}>
|
||
<Tooltip title="Create Menu" placement="left">
|
||
<IconButton
|
||
// color="secondary"
|
||
// variant="light"
|
||
// sx={{
|
||
// color: 'text.primary',
|
||
// bgcolor: open ? iconBackColorOpen : iconBackColor
|
||
// }}
|
||
sx={{
|
||
color: '#fff',
|
||
fontSize: '20px',
|
||
// bgcolor: open ? iconBackColorOpen : iconBackColor
|
||
bgcolor: 'transparent'
|
||
// border:'1px solid #fff'
|
||
}}
|
||
aria-label="open profile"
|
||
// ref={anchorRef}
|
||
// aria-controls={open ? 'profile-grow' : undefined}
|
||
aria-haspopup="true"
|
||
onClick={handleToggle}
|
||
>
|
||
<WindowsOutlined />
|
||
</IconButton>
|
||
</Tooltip>
|
||
<Popper
|
||
open={open}
|
||
placement="bottom"
|
||
anchorEl={anchorEl}
|
||
role={undefined}
|
||
// transition
|
||
disablePortal
|
||
popperOptions={{
|
||
modifiers: [
|
||
{
|
||
name: 'offset',
|
||
options: {
|
||
offset: 0
|
||
}
|
||
}
|
||
]
|
||
}}
|
||
sx={{
|
||
// backgroundColor:'white',
|
||
// border:1,
|
||
p: 0,
|
||
zIndex: 5000,
|
||
boxShadow: theme.customShadows.z1
|
||
}}
|
||
>
|
||
<Transitions type="grow" position="top" sx={{ overflow: 'hidden' }} in={open}>
|
||
{/* <Box sx={{
|
||
backgroundColor: 'white',
|
||
border: '1px solid #e0e0e0 !important',
|
||
borderRadius: 1,
|
||
}}> */}
|
||
<Box
|
||
sx={
|
||
{
|
||
// boxShadow: theme.customShadows.z1,
|
||
}
|
||
}
|
||
>
|
||
<ClickAwayListener onClickAway={handleClickAway}>
|
||
{/* <List disablePadding> */}
|
||
<List
|
||
component="nav"
|
||
sx={{
|
||
p: 0,
|
||
width: '100%',
|
||
minWidth: 200,
|
||
maxWidth: 290,
|
||
bgcolor: theme.palette.background.paper,
|
||
borderRadius: 0.5,
|
||
|
||
[theme.breakpoints.down('md')]: {
|
||
maxWidth: 250
|
||
}
|
||
}}
|
||
>
|
||
<ListItemButton
|
||
selected={location.pathname === '/orders/create'}
|
||
onClick={() => {
|
||
// console.log(const location = useLocation();)
|
||
navigate('/orders/create');
|
||
handleClickAway();
|
||
}}
|
||
>
|
||
<ListItemText
|
||
primary={
|
||
<Grid container>
|
||
<ListItemIcon sx={{ mr: 1, fontSize: '20px' }}>
|
||
<TbBoxMultiple1 />
|
||
</ListItemIcon>
|
||
<Typography color="textPrimary">Create Order</Typography>
|
||
</Grid>
|
||
}
|
||
/>
|
||
</ListItemButton>
|
||
<ListItemButton
|
||
selected={location.pathname === '/orders/create'}
|
||
onClick={() => {
|
||
// console.log(const location = useLocation();)
|
||
navigate('/orders/createorders');
|
||
handleClickAway();
|
||
}}
|
||
>
|
||
<ListItemText
|
||
primary={
|
||
<Grid container>
|
||
<ListItemIcon sx={{ mr: 1, fontSize: '20px' }}>
|
||
<GrMultiple />
|
||
</ListItemIcon>
|
||
<Typography color="textPrimary">Create Group Order</Typography>
|
||
</Grid>
|
||
}
|
||
/>
|
||
</ListItemButton>
|
||
{/* <ListItemButton
|
||
selected={location.pathname === '/clients/create'}
|
||
onClick={() => {
|
||
navigate('/clients/create')
|
||
handleClickAway()
|
||
}} >
|
||
<ListItemText
|
||
primary={
|
||
<Grid container>
|
||
<ListItemIcon sx={{ mr: 1, fontSize: '20px' }}>
|
||
<CustomerServiceOutlined />
|
||
</ListItemIcon>
|
||
<Typography color="textPrimary">Create Client</Typography>
|
||
|
||
</Grid>
|
||
}
|
||
/>
|
||
</ListItemButton> */}
|
||
<ListItemButton
|
||
selected={location.pathname === '/customers/create'}
|
||
onClick={() => {
|
||
navigate('/customers/create');
|
||
handleClickAway();
|
||
}}
|
||
>
|
||
<ListItemText
|
||
primary={
|
||
<Grid container>
|
||
<ListItemIcon sx={{ mr: 1, fontSize: '20px' }}>
|
||
<TbUserEdit />
|
||
</ListItemIcon>
|
||
<Typography color="textPrimary">Create Customer</Typography>
|
||
</Grid>
|
||
}
|
||
/>
|
||
</ListItemButton>
|
||
|
||
{/* <ListItem disablePadding>
|
||
<ListItemButton sx={{ p: 2 }} onClick={() => {
|
||
navigate('/create_order')
|
||
handleClickAway()
|
||
}}>
|
||
<ListItemIcon sx={{ mr: 1, fontSize: '20px' }}>
|
||
<MailOutlined />
|
||
</ListItemIcon>
|
||
<ListItemText primary="Create Order" />
|
||
</ListItemButton>
|
||
</ListItem>
|
||
|
||
<ListItem disablePadding>
|
||
<ListItemButton sx={{ p: 2 }} onClick={() => {
|
||
navigate('/create_client')
|
||
handleClickAway()
|
||
}}>
|
||
<ListItemIcon sx={{ mr: 1, fontSize: '20px' }}>
|
||
<CustomerServiceOutlined />
|
||
|
||
</ListItemIcon>
|
||
<ListItemText primary="Create Client" />
|
||
</ListItemButton>
|
||
</ListItem>
|
||
<ListItem disablePadding>
|
||
<ListItemButton sx={{ p: 2 }} onClick={() => {
|
||
navigate('/create_staff')
|
||
handleClickAway()
|
||
}}>
|
||
<ListItemIcon sx={{ mr: 1, fontSize: '20px' }}>
|
||
<UserOutlined />
|
||
</ListItemIcon>
|
||
<ListItemText primary="Create Staff" />
|
||
</ListItemButton>
|
||
</ListItem> */}
|
||
</List>
|
||
</ClickAwayListener>
|
||
{/* </Box> */}
|
||
</Box>
|
||
</Transitions>
|
||
</Popper>
|
||
</Box>
|
||
|
||
<Notification />
|
||
|
||
{/* <Message /> */}
|
||
{/* {!matchesXs && <Profile />}
|
||
{matchesXs && <MobileSection />} */}
|
||
<Tooltip title="Notifications">
|
||
<Profile />
|
||
</Tooltip>
|
||
</Stack>
|
||
</Stack>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default HeaderContent;
|