02122023

src/layout/MainLayout/Drawer/DrawerHeader/index.js

@@ -37,7 +37,11 @@ const DrawerHeader = ({ open }) => {
       {/* <Logo isIcon={!open} sx={{ width: open ? 'auto' : 35, height: 35 }} /> */}
 
       {(open) &&
-        <img src={logo} width='160px' height='45px' alt='logo'/>
+        <img src={logo}
+        //  width='160px'
+         height='45px' 
+        width='170px'
+         alt='logo'/>
       }
       {(!open) &&
         <img src={logo1} width='40px'  alt='logo'/>

src/layout/MainLayout/Header/HeaderContent/MegaMenuSection.js

@@ -64,7 +64,7 @@ const MegaMenuSection = () => {
         ref={anchorRef}
         aria-controls={open ? 'profile-grow' : undefined}
         aria-haspopup="true"
-        onClick={handleToggle}
+        // onClick={handleToggle}
       >
         <WindowsOutlined />
       </IconButton>

src/layout/MainLayout/Header/HeaderContent/Profile/ProfileTab.js

@@ -5,7 +5,7 @@ import { useState } from 'react';
 import { List, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
 
 // assets
-import { EditOutlined, ProfileOutlined, LogoutOutlined, UserOutlined, WalletOutlined } from '@ant-design/icons';
+import { EditOutlined, ProfileOutlined, LogoutOutlined, UserOutlined, WalletOutlined,CommentOutlined } from '@ant-design/icons';
 import { useNavigate } from 'react-router';
 
 // ==============================|| HEADER PROFILE - PROFILE TAB ||============================== //
@@ -32,11 +32,11 @@ const ProfileTab = ({ handleLogout }) => {
         <ListItemText primary="View Profile" />
       </ListItemButton>
 
-      <ListItemButton selected={selectedIndex === 3} onClick={(event) => handleListItemClick(event, 3)}>
+      <ListItemButton selected={selectedIndex === 2} onClick={(event) => handleListItemClick(event, 2)}>
         <ListItemIcon>
-          <ProfileOutlined />
+          <CommentOutlined  />
         </ListItemIcon>
-        <ListItemText primary="Account Settings" />
+        <ListItemText primary="Support Ticket" />
       </ListItemButton>
       {/* <ListItemButton selected={selectedIndex === 4} onClick={(event) => handleListItemClick(event, 4)}>
         <ListItemIcon>
@@ -44,7 +44,7 @@ const ProfileTab = ({ handleLogout }) => {
         </ListItemIcon>
         <ListItemText primary="Billing" />
       </ListItemButton> */}
-      <ListItemButton selected={selectedIndex === 2} 
+      <ListItemButton selected={selectedIndex === 3} 
       onClick={handleLogout}
       // onClick={()=>{
       //   navigate('/login')

src/layout/MainLayout/Header/HeaderContent/Profile/index.js

@@ -63,6 +63,8 @@ const Profile = () => {
       localStorage.removeItem('appuserid');
       localStorage.removeItem('authname');
       localStorage.removeItem('roleid');
+      localStorage.removeItem('tenantid');
+
 
 navigate('/login')
 

src/layout/MainLayout/Header/HeaderContent/index.js

@@ -1,7 +1,12 @@
-import { useMemo } from 'react';
+import { useMemo ,useState} from 'react';
 
 // material-ui
-import { Box, useMediaQuery ,Stack} from '@mui/material';
+import { Box, useMediaQuery ,Stack,Tooltip,IconButton,Popper,
+    ClickAwayListener,List,ListItem,ListItemButton,ListItemText,
+    Grid,ListItemIcon,Typography
+} from '@mui/material';
+
+import Transitions from 'components/@extended/Transitions';
 
 // project import
 import Search from './Search';
@@ -10,6 +15,15 @@ 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';
 
 // ==============================|| HEADER - CONTENT ||============================== //
 
@@ -19,14 +33,200 @@ const HeaderContent = () => {
   // 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='flex-end' spacing={2} alignItems='center'>
-      {!matchesXs && megaMenu}
+      {/* {!matchesXs && megaMenu} */}
       {matchesXs && <Box sx={{ width: '100%', ml: 1 }} />}
+      <Box sx={{ flexShrink: 0, ml: 0.75 }}>
+          <Tooltip title='Quick Menu'>
+            <IconButton
+              color="secondary"
+              variant="light"
+              sx={{
+                color: 'text.primary',
+                bgcolor: open ? iconBackColorOpen : iconBackColor
+              }}
+              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' }}>
+                              <MailOutlined />
+                            </ListItemIcon>
+                            <Typography color="textPrimary">Create 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 === '/staff/create'}
+                      onClick={() => {
+                        navigate('/clients/create')
+                        handleClickAway()
+                      }} >
+                      <ListItemText
+                        primary={
+                          <Grid container>
+                            <ListItemIcon sx={{ mr: 1, fontSize: '20px' }}>
+                              <UserOutlined />
+                            </ListItemIcon>
+                            <Typography color="textPrimary">Create Client</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 /> */}

src/layout/MainLayout/index.js

@@ -53,7 +53,7 @@ const MainLayout = () => {
             flexDirection: 'column'
           }}
         >
-          <Breadcrumbs navigation={navigation} title titleBottom card={false} divider={false} />
+          {/* <Breadcrumbs navigation={navigation} title titleBottom card={false} divider={false} /> */}
           <Outlet />
           <Footer />
         </Container>