نسخ من RaghadAlkhous/RestaurantDash
113 أسطر
3.5 KiB
JavaScript
113 أسطر
3.5 KiB
JavaScript
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;
|