Initial commit - restaurant dashboard

src/components/Home/Order/Order.js

@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from 'react';
+import { Box, useTheme, useMediaQuery } from '@mui/material';
+import KitchPlusAppBar from '../AppBar';
+import Sidebar from '../SideHome';
+import Orders from './contect/Orders';
+import authService from '../../../services/authService';
+
+const drawerWidth = 230;
+
+const Order = () => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const [sidebarOpen, setSidebarOpen] = useState(!isMobile);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setSidebarOpen(window.innerWidth >= theme.breakpoints.values.md);
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [theme.breakpoints.values.md]);
+
+ useEffect(() => {
+    const admin = authService.getAdminData();
+    console.log('Admin Info:', admin);
+
+    const adminId = authService.getAdminId();
+    console.log('Admin ID:', adminId);
+  }, []);
+
+const admin = authService.getAdminData();
+const adminId = authService.getAdminId();
+  const handleDrawerToggle = () => setSidebarOpen(!sidebarOpen);
+
+  return (
+    <Box sx={{ display: 'flex', height: '100vh', backgroundColor: '#F6F6F6', overflow: 'hidden' }}>
+      <Sidebar open={sidebarOpen} onClose={handleDrawerToggle} isMobile={isMobile} drawerWidth={drawerWidth} />
+
+      <Box
+        sx={{
+          flexGrow: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          width: '100%',
+          transition: theme.transitions.create(['width'], {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen
+          }),
+        }}
+      >
+        <KitchPlusAppBar onDrawerToggle={handleDrawerToggle} sidebarOpen={sidebarOpen} isMobile={isMobile} />
+
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 6,
+            width: { xs: '90%', sm: '95%', md: '96%' },
+            pt: { xs: 2, sm: 3 },
+            pl: { xs: 2, sm: 3 },
+            pb: { xs: 2, sm: 4 },
+            pr: { xs: 2, sm: 3 },
+          }}
+        >
+          <Orders adminId={adminId} />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default Order;