update the dashbord and router

2025-05-19 12:53:59 +03:00
parent 9b0d90560e
commit aacc58c4a6
110 changed files with 6404 additions and 44 deletions
@@ -0,0 +1,207 @@
+import React from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import {
+  Drawer,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Box,
+  useTheme,
+  Typography
+} from '@mui/material';
+import {
+  DashboardRounded as DashboardIcon,
+  PointOfSale as CashierIcon,
+  AllInbox as SupplierIcon,
+  Store as InventoryIcon,
+  School as TrainingIcon,
+  AutoGraph as AnalyticsIcon,
+  Restaurant as RestaurantIcon,
+  CountertopsTwoTone as HostKitchenIcon,
+  Queue as CreateKitchenIcon,
+  Settings as SettingsIcon,
+  Logout as LogoutIcon
+} from '@mui/icons-material';
+
+const menuItems = [
+  { text: 'Dashboard', icon: <DashboardIcon />, path: '/dashboard' },
+  { text: 'Cashier', icon: <CashierIcon />, path: '/cashier' },
+  { text: 'Supplier', icon: <SupplierIcon />, path: '/supplier' },
+  { text: 'Inventory', icon: <InventoryIcon />, path: '/inventory' },
+  { text: 'Training', icon: <TrainingIcon />, path: '/training' },
+  { text: 'Analytics & Reporting', icon: <AnalyticsIcon />, path: '/analytics' },
+  { text: 'Restaurant Profile', icon: <RestaurantIcon />, path: '/profile' },
+  { text: 'Host Kitchen', icon: <HostKitchenIcon />, path: '/host-kitchen' },
+  { text: 'Create Kitchen', icon: <CreateKitchenIcon />, path: '/create-kitchen' },
+  
+];
+
+const bottomItems = [
+  { text: 'Settings', icon: <SettingsIcon />, path: '/settings' },
+  { text: 'Log Out', icon: <LogoutIcon />, path: '/login' },
+];
+
+const Sidebar = ({ open, onClose, isMobile, drawerWidth }) => {
+  const theme = useTheme();
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const renderListItems = (items) =>
+    items.map((item, index) => {
+      const isActive = location.pathname === item.path;
+
+      return (
+        <ListItem key={index} disablePadding sx={{ px: 1 }}>
+          <Box
+            onClick={() => {
+              if (item.text === 'Log Out') {
+                localStorage.removeItem('token');
+              }
+              navigate(item.path);
+              if (isMobile) onClose();
+            }}
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              width: '100%',
+              borderRadius: '5px',
+              backgroundColor: isActive ? '#F8F6F8' : 'transparent',
+              px: 2,
+              py: 1,
+              cursor: 'pointer',
+              transition: 'background-color 0.2s',
+              '&:hover': {
+                backgroundColor: '#fffcf9d5',
+              },
+            }}
+          >
+            <ListItemIcon sx={{
+              color: isActive ? theme.palette.primary.main : '#A6ACB8',
+              minWidth: 36
+            }}>
+              {item.icon}
+            </ListItemIcon>
+            <ListItemText
+              primary={item.text}
+              primaryTypographyProps={{
+                sx: {
+                  color: isActive ? theme.palette.primary.main : '#61677F',
+                  fontSize: '0.875rem'
+                },
+              }}
+            />
+          </Box>
+        </ListItem>
+      );
+    });
+
+  const drawer = (
+    <Box sx={{
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      bgcolor: 'background.paper'
+    }}>
+      <Box
+        sx={{
+          px: 2,
+          py: 1.5,
+          borderColor: 'divider',
+          position: 'sticky',
+          top: 0,
+          zIndex: 1,
+          bgcolor: 'background.paper'
+        }}
+      >
+        <Box display="flex" alignItems="center">
+          <Box
+            component="img"
+            src="/image.png"
+            alt="logo"
+            sx={{
+              width: 40,
+              height: 40,
+              objectFit: 'contain',
+              mr: 1.5,
+            }}
+          />
+          <Box display="flex" alignItems="center">
+            <Typography
+              variant="h6"
+              sx={{
+                fontWeight: 400,
+                fontSize: '1.25rem',
+                color: 'text.primary',
+              }}
+            >
+              KITCH
+            </Typography>
+            <Typography
+              variant="h6"
+              sx={{
+                fontWeight: 400,
+                fontSize: '1.25rem',
+                color: 'primary.main',
+                ml: 0.5,
+              }}
+            >
+              PLUS
+            </Typography>
+          </Box>
+        </Box>
+      </Box>
+
+      <Box sx={{
+        flex: 1,
+        overflowY: 'auto',
+        scrollbarWidth: 'none',
+        '&::-webkit-scrollbar': { display: 'none' },
+        py: 1
+      }}>
+        <List>{renderListItems(menuItems)}</List>
+      </Box>
+
+      <Box sx={{
+        position: 'sticky',
+        bottom: 0,
+        bgcolor: 'background.paper',
+        borderColor: 'divider'
+      }}>
+        <List>{renderListItems(bottomItems)}</List>
+      </Box>
+    </Box>
+  );
+
+  return (
+    <Box
+      component="nav"
+      sx={{
+        width: { xs: 0, sm: 0, md: drawerWidth },
+        flexShrink: { xs: 0, sm: 0, md: 0 },
+        boxShadow: 'none',
+      }}
+    >
+      <Drawer
+        variant={isMobile ? 'temporary' : 'persistent'}
+        open={open}
+        onClose={onClose}
+        ModalProps={{ keepMounted: true }}
+        sx={{
+          '& .MuiDrawer-paper': {
+            width: drawerWidth,
+            boxSizing: 'border-box',
+            borderRight: 'none',
+            boxShadow: 'none'
+          },
+        }}
+      >
+        {drawer}
+      </Drawer>
+
+    </Box>
+  );
+
+};
+
+export default Sidebar;