update the dashbord and router
This commit is contained in:
raghad
@@ -0,0 +1,395 @@
|
||||
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 OrderStatusCard from './OrderStatusCard';
|
||||
import StatisticsCard from './StatisticsCard';
|
||||
import RecentActivity from './RecentActivity';
|
||||
|
||||
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 StatusCard = ({
|
||||
icon,
|
||||
statusText,
|
||||
statusColor,
|
||||
iconColor,
|
||||
outerColor,
|
||||
innerColor,
|
||||
height = {
|
||||
xs: 'calc(140px + 0.5vh)',
|
||||
sm: 'calc(150px + 0.5vh)',
|
||||
md: 'calc(162px + 0.5vh)'
|
||||
},
|
||||
width = {
|
||||
xs: 'min(90%, 600px)', // تقليل من 90% إلى 85% والحد الأقصى من 300px إلى 280px
|
||||
sm: 'clamp(220px, 23vw, 280px)', // تقليل جميع القيم
|
||||
md: 'clamp(220px, 19vw, 300px)'
|
||||
},
|
||||
transition = 'width 0.3s ease',
|
||||
iconSpacing = { xs: 6, sm: 8, md: 12 },
|
||||
extraButton,
|
||||
statusButtonWidth,
|
||||
title = 'Point Of Sale',
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
|
||||
|
||||
return (
|
||||
<Card sx={{
|
||||
height,
|
||||
width,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
p: 0,
|
||||
pb: 2,
|
||||
borderRadius: '8px',
|
||||
boxShadow: 'none',
|
||||
minWidth: { xs: 180, sm: 220 }
|
||||
}}>
|
||||
<CardContent>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: iconSpacing }}>
|
||||
<IconCircle bgColor={innerColor} outerColor={outerColor}>
|
||||
{React.cloneElement(icon, { sx: { color: iconColor, fontSize: { xs: 16, sm: 18, md: 20 } } })}
|
||||
</IconCircle>
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{
|
||||
backgroundColor: '#E7F4EE',
|
||||
color: statusColor,
|
||||
textTransform: 'none',
|
||||
boxShadow: 'none',
|
||||
borderRadius: '100px',
|
||||
width: statusButtonWidth || 'auto',
|
||||
fontSize: { xs: '0.7rem', sm: '0.8rem', md: '0.9rem' },
|
||||
px: { xs: 1, sm: 1.5 },
|
||||
py: 0.5
|
||||
}}
|
||||
>
|
||||
{statusText}
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography
|
||||
variant="h6"
|
||||
gutterBottom
|
||||
mt={1.5}
|
||||
sx={{
|
||||
color: '#667085',
|
||||
fontSize: { xs: '14px', sm: '15px', md: '16px' },
|
||||
fontWeight: 500
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mt: 2 }}>
|
||||
{extraButton ? extraButton : <Box />}
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{
|
||||
backgroundColor: '#F7F7F7',
|
||||
width: { xs: '26px', sm: '28px', md: '30px' },
|
||||
height: { xs: '26px', sm: '28px', md: '30px' },
|
||||
minWidth: '0',
|
||||
padding: 0,
|
||||
borderRadius: '12px',
|
||||
boxShadow: 'none',
|
||||
'&:hover': {
|
||||
backgroundColor: '#e0e0e0',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ArrowOutwardIcon
|
||||
sx={{
|
||||
color: theme.palette.primary.main,
|
||||
width: { xs: '16px', sm: '18px', md: '20px' },
|
||||
height: { xs: '16px', sm: '18px', md: '20px' },
|
||||
}}
|
||||
/>
|
||||
</Button>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
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: 3,
|
||||
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 مرن
|
||||
mb: 1,
|
||||
pl: 1,
|
||||
pr: 1,
|
||||
mt: 2,
|
||||
ml: { xs: 2, sm: 0 },
|
||||
mr: 2,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{/* OrderStatusCard */}
|
||||
<Box
|
||||
sx={{
|
||||
flexGrow: 0,
|
||||
width: { xs: '100%', sm: '35%', md: '30%' },
|
||||
minWidth: 220,
|
||||
ml: { xs: 0, sm: -1 },
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<OrderStatusCard />
|
||||
</Box>
|
||||
|
||||
{/* StatisticsCard */}
|
||||
<Box
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
minWidth: 0,
|
||||
ml: { xs: 0, sm: 2 },
|
||||
// backgroundColor:'red'
|
||||
}}
|
||||
>
|
||||
<StatisticsCard />
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
|
||||
{/* RecentActivity */}
|
||||
<Box
|
||||
sx={{
|
||||
mr: { xs: 4, sm: 3 ,md:0 },
|
||||
ml: { xs: 2, sm: 0 },
|
||||
}}
|
||||
>
|
||||
<RecentActivity />
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DashboardContect;
|
||||
Reference in New Issue
Block a user