update the dashbord and router

src/components/Home/Analytics&Reporting/Analytics.js

@@ -0,0 +1,112 @@
+import React, { useState, useEffect } from 'react';
+import { Box, useTheme, useMediaQuery, Skeleton } from '@mui/material';
+import KitchPlusAppBar from '../AppBar';
+import Sidebar from '../SideHome';
+import AnalyticsContect from './AnalyticsContect';
+
+const drawerWidth = 230;
+
+const AnalyticsPage = () => {
+  const [timeFrame, setTimeFrame] = useState('month');
+
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const [hasProducts, setHasProducts] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [sidebarOpen, setSidebarOpen] = useState(!isMobile);
+
+  // محاكاة التحقق من المنتجات
+  useEffect(() => {
+    const checkProducts = async () => {
+      setIsLoading(true);
+      const productsExist = await checkIfProductsExist(); // استبدل بمنطقك
+      setHasProducts(productsExist);
+      setIsLoading(false);
+    };
+
+    checkProducts();
+  }, []);
+
+  const checkIfProductsExist = async () => {
+    return new Promise((resolve) => setTimeout(() => resolve(true), 1500)); // محاكاة تأخير
+  };
+
+  useEffect(() => {
+    if (window.innerWidth >= theme.breakpoints.values.md) {
+      setSidebarOpen(true);
+    } else {
+      setSidebarOpen(false);
+    }
+  }, [theme.breakpoints.values.md]);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth >= theme.breakpoints.values.md) {
+        setSidebarOpen(true);
+      } else {
+        setSidebarOpen(false);
+      }
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [theme.breakpoints.values.md]);
+
+  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: { xs: '100%', sm: sidebarOpen ? `calc(100% - ${drawerWidth}px)` : '100%' },
+          marginLeft: 0,
+          transition: theme.transitions.create(['width'], {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+          }),
+        }}
+      >
+
+        <KitchPlusAppBar onDrawerToggle={handleDrawerToggle} sidebarOpen={sidebarOpen} isMobile={isMobile} />
+
+        <Box sx={{
+          flexGrow: 1,
+          width: sidebarOpen ? 'calc(100% - 20px)' : '100%',
+          pt: { xs: 0.5, sm: 1 },
+          mt: { xs: 1, sm: 0 },
+          overflowY: 'auto',
+          pl: { xs: 0, sm: 1 },
+          pr: { xs: 1, sm: 1 },
+          pb: { xs: 1, sm: 2 },
+          scrollbarWidth: 'none',
+          '&::-webkit-scrollbar': { display: 'none' },
+          transition: theme.transitions.create(['margin'], {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+          }),
+        }}>
+          {isLoading ? (
+            <>
+              <Skeleton variant="rectangular" height={50} sx={{ mb: 2 }} />
+              <Skeleton variant="rectangular" height={200} sx={{ mb: 2 }} />
+              <Skeleton variant="rectangular" height={300} sx={{ mb: 2 }} />
+            </>
+          ) : (
+            <AnalyticsContect />
+          )}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default AnalyticsPage;