نسخ من RaghadAlkhous/RestaurantDash
update the dashbord and router
هذا الالتزام موجود في:
raghad
124
src/components/Home/Analytics&Reporting/SalesByLocation.js
Normal file
124
src/components/Home/Analytics&Reporting/SalesByLocation.js
Normal file
@@ -0,0 +1,124 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Paper,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemText,
|
||||
ListItemSecondaryAction,
|
||||
Chip,
|
||||
IconButton,
|
||||
useTheme,
|
||||
useMediaQuery
|
||||
} from '@mui/material';
|
||||
import MoreVertIcon from '@mui/icons-material/MoreVert';
|
||||
const SalesByLocation = ({ data }) => {
|
||||
const theme = useTheme();
|
||||
const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
|
||||
|
||||
return (
|
||||
<Paper sx={{
|
||||
p: { xs: 1, sm: 2 },
|
||||
borderRadius: '12px',
|
||||
boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.1)',
|
||||
height: '95%', // إضافة هذه السطر
|
||||
display: 'flex', // إضافة
|
||||
flexDirection: 'column' // إضافة
|
||||
}}>
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
mb: { xs: 0.5, sm: 1 }
|
||||
}}>
|
||||
<Box>
|
||||
<Typography sx={{
|
||||
color: '#1A1C21',
|
||||
fontWeight: 500,
|
||||
fontSize: { xs: '16px', sm: '18px' },
|
||||
lineHeight: 1.2
|
||||
}}>
|
||||
Sales by Location
|
||||
</Typography>
|
||||
<Typography sx={{
|
||||
color: '#667085',
|
||||
fontWeight: 500,
|
||||
fontSize: { xs: '12px', sm: '14px' },
|
||||
lineHeight: 1.2
|
||||
}}>
|
||||
Sales performance by location
|
||||
</Typography>
|
||||
</Box>
|
||||
<IconButton size={isSmallScreen ? 'small' : 'medium'}>
|
||||
<MoreVertIcon fontSize={isSmallScreen ? 'small' : 'medium'} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
<List dense sx={{
|
||||
flexGrow: 1, // إضافة هذه السطر
|
||||
overflowY: 'auto',
|
||||
'&::-webkit-scrollbar': {
|
||||
display: 'none'
|
||||
}
|
||||
}}>
|
||||
{data.map((item, i) => (
|
||||
<ListItem key={i} disableGutters sx={{ py: { xs: 0.5, sm: 1 } }}>
|
||||
<ListItemText
|
||||
primary={
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: { xs: '13px', sm: '14px' },
|
||||
fontWeight: 400
|
||||
}}
|
||||
>
|
||||
{item.country}
|
||||
</Typography>
|
||||
}
|
||||
secondary={
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: { xs: '11px', sm: '12px' },
|
||||
color: theme.palette.text.secondary
|
||||
}}
|
||||
>
|
||||
{item.sales} Sales
|
||||
</Typography>
|
||||
}
|
||||
sx={{ my: 0 }}
|
||||
/>
|
||||
<ListItemSecondaryAction sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: { xs: 0.5, sm: 1 }
|
||||
}}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontSize: { xs: '12px', sm: '14px' },
|
||||
fontWeight: isSmallScreen ? 500 : 400
|
||||
}}
|
||||
>
|
||||
${item.amount.toLocaleString()}
|
||||
</Typography>
|
||||
<Chip
|
||||
label={`${item.change > 0 ? '+' : ''}${item.change}%`}
|
||||
color={item.change > 0 ? 'success' : item.change < 0 ? 'error' : 'default'}
|
||||
size={isSmallScreen ? 'small' : 'medium'}
|
||||
sx={{
|
||||
fontSize: { xs: '11px', sm: '12px' },
|
||||
height: { xs: '24px', sm: '28px' },
|
||||
'& .MuiChip-label': {
|
||||
px: { xs: 0.5, sm: 1 }
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
</Paper>
|
||||
);
|
||||
};
|
||||
|
||||
export default SalesByLocation;
|
||||
المرجع في مشكلة جديدة
حظر مستخدم