Initial commit - restaurant dashboard
This commit is contained in:
RaghadMAlkous
@@ -7,9 +7,9 @@ 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';
|
||||
import AnalyticsPage from './AnalyticsPage';
|
||||
import AnalyticsPageOccupancy from './AnalyticsPageOccupancy';
|
||||
import AnalyticsPagebill from './AnalyticsPagebill';
|
||||
|
||||
const IconCircle = ({ children, bgColor = '#DEDEFA', outerColor = '#EFEFFD' }) => (
|
||||
<Box
|
||||
@@ -52,111 +52,6 @@ const IconCircle = ({ children, bgColor = '#DEDEFA', outerColor = '#EFEFFD' }) =
|
||||
</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();
|
||||
@@ -172,7 +67,7 @@ const DashboardContect = () => {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: { xs: 'flex-start', sm: 'center', md: 'center' },
|
||||
mb: 3,
|
||||
mb: 1,
|
||||
pl: 1,
|
||||
pr: { xs: 1, sm: 3 },
|
||||
flexDirection: { xs: 'column', sm: 'row', md: 'row' },
|
||||
@@ -192,7 +87,7 @@ const DashboardContect = () => {
|
||||
</Typography>
|
||||
|
||||
{/* Buttons */}
|
||||
<Box sx={{
|
||||
{/* <Box sx={{
|
||||
display: 'flex',
|
||||
gap: { xs: 1, sm: 2 },
|
||||
flexWrap: { xs: 'wrap', sm: 'nowrap' },
|
||||
@@ -260,11 +155,11 @@ const DashboardContect = () => {
|
||||
>
|
||||
Check Inventory
|
||||
</Button>
|
||||
</Box>
|
||||
</Box> */}
|
||||
</Box>
|
||||
|
||||
{/* Status Cards */}
|
||||
<Box
|
||||
{/* <Box
|
||||
sx={{
|
||||
|
||||
display: 'flex',
|
||||
@@ -333,7 +228,7 @@ const DashboardContect = () => {
|
||||
iconSpacing={{ xs: 3, sm: 5, md: 7 }}
|
||||
title="Delivery"
|
||||
/>
|
||||
</Box>
|
||||
</Box> */}
|
||||
|
||||
{/* OrderStatusCard/ StatisticsCard */}
|
||||
<Box
|
||||
@@ -343,12 +238,8 @@ const DashboardContect = () => {
|
||||
flexWrap: 'nowrap',
|
||||
flexDirection: { xs: 'column', sm: 'row' },
|
||||
gap: { xs: 1, sm: 1, md: 7 }, // gap مرن
|
||||
mb: 1,
|
||||
pl: 1,
|
||||
pr: 1,
|
||||
mt: 2,
|
||||
mr: { xs: 4, sm: 3, md: 0 },
|
||||
ml: { xs: 2, sm: 0 },
|
||||
mr: 2,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
@@ -357,12 +248,13 @@ const DashboardContect = () => {
|
||||
sx={{
|
||||
flexGrow: 0,
|
||||
width: { xs: '100%', sm: '35%', md: '30%' },
|
||||
minWidth: 220,
|
||||
minWidth: 20,
|
||||
ml: { xs: 0, sm: -1 },
|
||||
flexShrink: 0,
|
||||
mt:8
|
||||
}}
|
||||
>
|
||||
<OrderStatusCard />
|
||||
<AnalyticsPageOccupancy />
|
||||
</Box>
|
||||
|
||||
{/* StatisticsCard */}
|
||||
@@ -370,11 +262,11 @@ const DashboardContect = () => {
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
minWidth: 0,
|
||||
ml: { xs: 0, sm: 2 },
|
||||
// ml: { xs: 0, sm: 2 },
|
||||
// backgroundColor:'red'
|
||||
}}
|
||||
>
|
||||
<StatisticsCard />
|
||||
<AnalyticsPage />
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
@@ -382,11 +274,11 @@ const DashboardContect = () => {
|
||||
{/* RecentActivity */}
|
||||
<Box
|
||||
sx={{
|
||||
mr: { xs: 4, sm: 3 ,md:0 },
|
||||
mr: { xs: 4, sm: 3, md: 0 },
|
||||
ml: { xs: 2, sm: 0 },
|
||||
}}
|
||||
>
|
||||
<RecentActivity />
|
||||
<AnalyticsPagebill />
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user