288 lines
10 KiB
JavaScript
288 lines
10 KiB
JavaScript
import React from 'react';
|
|
import { Box, Button, Card, CardContent, Stack, Typography, useMediaQuery } from '@mui/material';
|
|
import AirportShuttleIcon from '@mui/icons-material/AirportShuttle';
|
|
import CampaignIcon from '@mui/icons-material/Campaign';
|
|
import Inventory2Icon from '@mui/icons-material/Inventory2';
|
|
import DeveloperBoardIcon from '@mui/icons-material/DeveloperBoard';
|
|
import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward';
|
|
import { useTheme } from '@mui/material/styles';
|
|
import AddIcon from '@mui/icons-material/Add';
|
|
import AnalyticsPage from './AnalyticsPage';
|
|
import AnalyticsPageOccupancy from './AnalyticsPageOccupancy';
|
|
import AnalyticsPagebill from './AnalyticsPagebill';
|
|
|
|
const IconCircle = ({ children, bgColor = '#DEDEFA', outerColor = '#EFEFFD' }) => (
|
|
<Box
|
|
sx={{
|
|
position: 'relative',
|
|
width: { xs: 40, sm: 45, md: 50 },
|
|
height: { xs: 43, sm: 48, md: 53 },
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
position: 'absolute',
|
|
width: { xs: 32, sm: 36, md: 40 },
|
|
height: { xs: 35, sm: 39, md: 43 },
|
|
borderRadius: '50%',
|
|
top: '50%',
|
|
left: '50%',
|
|
transform: 'translate(-50%, -50%)',
|
|
backgroundColor: outerColor,
|
|
zIndex: 0,
|
|
}}
|
|
/>
|
|
<Box
|
|
sx={{
|
|
width: { xs: 24, sm: 27, md: 30 },
|
|
height: { xs: 27, sm: 30, md: 33 },
|
|
backgroundColor: bgColor,
|
|
borderRadius: '50%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
zIndex: 1,
|
|
}}
|
|
>
|
|
{children}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
|
|
|
|
const DashboardContect = () => {
|
|
const theme = useTheme();
|
|
const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
|
|
const isMediumScreen = useMediaQuery(theme.breakpoints.between('sm', 'md'));
|
|
|
|
return (
|
|
<>
|
|
{/* Header Section */}
|
|
<Box
|
|
sx={{
|
|
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: { xs: 'flex-start', sm: 'center', md: 'center' },
|
|
mb: 1,
|
|
pl: 1,
|
|
pr: { xs: 1, sm: 3 },
|
|
flexDirection: { xs: 'column', sm: 'row', md: 'row' },
|
|
gap: { xs: 2, sm: 0 }
|
|
}}
|
|
>
|
|
{/* Title */}
|
|
<Typography
|
|
variant="h6"
|
|
sx={{
|
|
fontWeight: '500',
|
|
fontSize: { xs: '20px', sm: '22px', md: '24px' },
|
|
color: '#121212'
|
|
}}
|
|
>
|
|
Dashboard
|
|
</Typography>
|
|
|
|
{/* Buttons */}
|
|
{/* <Box sx={{
|
|
display: 'flex',
|
|
gap: { xs: 1, sm: 2 },
|
|
flexWrap: { xs: 'wrap', sm: 'nowrap' },
|
|
width: { xs: '100%', sm: 'auto' },
|
|
justifyContent: { xs: 'space-between', sm: 'space-between', md: 'flex-end' }
|
|
}}>
|
|
<Button
|
|
variant="contained"
|
|
sx={{
|
|
textTransform: 'none',
|
|
color: 'white',
|
|
backgroundColor: theme.palette.primary.main,
|
|
boxShadow: 'none',
|
|
borderRadius: '8px',
|
|
height: '40px',
|
|
width: { xs: '48%', sm: '130px', md: '156px' },
|
|
fontSize: { xs: '12px', sm: '13px', md: '14px' },
|
|
fontWeight: 600,
|
|
p: 0,
|
|
m: 0,
|
|
whiteSpace: 'nowrap',
|
|
minWidth: 'unset'
|
|
}}
|
|
>
|
|
<AddIcon sx={{ fontSize: { xs: 16, sm: 18, md: 20 } }} />
|
|
{!isSmallScreen && 'Add New Menu'}
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
sx={{
|
|
textTransform: 'none',
|
|
color: 'white',
|
|
backgroundColor: '#5F6868',
|
|
boxShadow: 'none',
|
|
borderRadius: '8px',
|
|
height: '40px',
|
|
width: { xs: '48%', sm: '150px', md: '208px' },
|
|
fontSize: { xs: '12px', sm: '13px', md: '14px' },
|
|
fontWeight: 600,
|
|
p: 0,
|
|
m: 0,
|
|
whiteSpace: 'nowrap',
|
|
minWidth: 'unset'
|
|
}}
|
|
>
|
|
{isSmallScreen ? 'Marketing' : 'Start Marketing '}
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
sx={{
|
|
textTransform: 'none',
|
|
color: 'black',
|
|
backgroundColor: '#FFFFFF',
|
|
boxShadow: 'none',
|
|
borderRadius: '8px',
|
|
height: '40px',
|
|
width: { xs: '100%', sm: '120px', md: '141px' },
|
|
fontSize: { xs: '12px', sm: '13px', md: '14px' },
|
|
fontWeight: 600,
|
|
p: 0,
|
|
m: 0,
|
|
whiteSpace: 'nowrap',
|
|
minWidth: 'unset'
|
|
}}
|
|
>
|
|
Check Inventory
|
|
</Button>
|
|
</Box> */}
|
|
</Box>
|
|
|
|
{/* Status Cards */}
|
|
{/* <Box
|
|
sx={{
|
|
|
|
display: 'flex',
|
|
gap: { xs: 1.5, sm: 2 },
|
|
flexWrap: 'wrap',
|
|
justifyContent: { xs: 'center', sm: 'flex-start' }
|
|
}}
|
|
>
|
|
<StatusCard
|
|
icon={<DeveloperBoardIcon />}
|
|
statusText="Active"
|
|
statusColor="#0D894F"
|
|
iconColor="#057DEC"
|
|
innerColor="#DEDEFA"
|
|
outerColor="#EFEFFD"
|
|
iconSpacing={{ xs: 6, sm: 8, md: 12 }}
|
|
extraButton={
|
|
<Button
|
|
variant="contained"
|
|
sx={{
|
|
backgroundColor: '#F6F6F6',
|
|
color: '#5F6868',
|
|
textTransform: 'none',
|
|
fontSize: { xs: '0.7rem', sm: '0.8rem', md: '0.85rem' },
|
|
borderRadius: '8px',
|
|
padding: { xs: '2px 8px', sm: '4px 12px' },
|
|
boxShadow: 'none',
|
|
fontWeight: 600,
|
|
height: { xs: 32, sm: 36, md: 40 },
|
|
width: { xs: 70, sm: 80, md: 85 },
|
|
whiteSpace: 'nowrap',
|
|
|
|
}}
|
|
>
|
|
Register
|
|
</Button>
|
|
}
|
|
/>
|
|
<StatusCard
|
|
icon={<Inventory2Icon />}
|
|
statusText="Active"
|
|
statusColor="#0D894F"
|
|
iconColor="#34B405"
|
|
innerColor="#E1F6DF"
|
|
outerColor="#EDFBE9"
|
|
iconSpacing={{ xs: 6, sm: 8, md: 12 }}
|
|
title="Inventory"
|
|
/>
|
|
<StatusCard
|
|
icon={<CampaignIcon />}
|
|
statusText="Pending"
|
|
statusColor="#BBB50F"
|
|
iconColor="#990463"
|
|
innerColor="#FEC8EA"
|
|
outerColor="#FFE3F5"
|
|
iconSpacing={{ xs: 6, sm: 8, md: 12 }}
|
|
title="Marketing"
|
|
/>
|
|
<StatusCard
|
|
icon={<AirportShuttleIcon />}
|
|
statusText="Action Need"
|
|
statusColor="#EF0A0A"
|
|
iconColor="#069797"
|
|
outerColor="#DBFBFB"
|
|
innerColor="#B5F5F5"
|
|
iconSpacing={{ xs: 3, sm: 5, md: 7 }}
|
|
title="Delivery"
|
|
/>
|
|
</Box> */}
|
|
|
|
{/* OrderStatusCard/ StatisticsCard */}
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
flexWrap: 'nowrap',
|
|
flexDirection: { xs: 'column', sm: 'row' },
|
|
gap: { xs: 1, sm: 1, md: 7 }, // gap مرن
|
|
mr: { xs: 4, sm: 3, md: 0 },
|
|
ml: { xs: 2, sm: 0 },
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
{/* OrderStatusCard */}
|
|
<Box
|
|
sx={{
|
|
flexGrow: 0,
|
|
width: { xs: '100%', sm: '35%', md: '30%' },
|
|
minWidth: 20,
|
|
ml: { xs: 0, sm: -1 },
|
|
flexShrink: 0,
|
|
mt:8
|
|
}}
|
|
>
|
|
<AnalyticsPageOccupancy />
|
|
</Box>
|
|
|
|
{/* StatisticsCard */}
|
|
<Box
|
|
sx={{
|
|
flexGrow: 1,
|
|
minWidth: 0,
|
|
// ml: { xs: 0, sm: 2 },
|
|
// backgroundColor:'red'
|
|
}}
|
|
>
|
|
<AnalyticsPage />
|
|
</Box>
|
|
</Box>
|
|
|
|
|
|
{/* RecentActivity */}
|
|
<Box
|
|
sx={{
|
|
mr: { xs: 4, sm: 3, md: 0 },
|
|
ml: { xs: 2, sm: 0 },
|
|
}}
|
|
>
|
|
<AnalyticsPagebill />
|
|
</Box>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default DashboardContect;
|