67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import {
|
|
Box,
|
|
Card,
|
|
CardContent,
|
|
Typography,
|
|
IconButton,
|
|
Divider,
|
|
} from '@mui/material';
|
|
import MoreVertIcon from '@mui/icons-material/MoreVert';
|
|
import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
|
|
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
|
|
// import { ArrowDropUp } from '@mui/icons-material';
|
|
|
|
const stats = [
|
|
{ label: 'TOTAL', value: 5, change: '-84.85%' },
|
|
{ label: 'SUCCESSFUL', value: 10, change: '100%' },
|
|
{ label: 'ACCEPTANCE RATE', value: '0%', change: '-100%' },
|
|
{ label: 'AMOUNT', value: '€0.00', change: '-100%' },
|
|
{ label: 'ATV', value: '€0.00', change: '-100%' },
|
|
];
|
|
|
|
const StatItem = ({ label, value, change }: { label: string, value: string | number, change: string }) => (
|
|
<Box sx={{ textAlign: 'center', px: 2 }}>
|
|
<Typography variant="body2" fontWeight="bold" color="text.secondary">
|
|
{label}
|
|
</Typography>
|
|
<Typography variant="h6" fontWeight="bold" mt={0.5}>
|
|
{value}
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'error.main' }}>
|
|
<ArrowDropDownIcon fontSize="small" />
|
|
{/* <ArrowDropUp fontSize='small' /> */}
|
|
<Typography variant="caption">{change}</Typography>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
|
|
export const GeneralHealthCard = () => {
|
|
return (
|
|
<Card sx={{ borderRadius: 3, p: 2 }}>
|
|
<CardContent sx={{ pb: '16px !important' }}>
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
|
|
<Typography variant="subtitle1" fontWeight="bold">
|
|
General Health
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
<CalendarTodayIcon fontSize="small" />
|
|
<Typography variant="body2">Last 24h</Typography>
|
|
<IconButton size="small">
|
|
<MoreVertIcon fontSize="small" />
|
|
</IconButton>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Divider />
|
|
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-around', mt: 2 }}>
|
|
{stats.map((item) => (
|
|
<StatItem key={item.label} {...item} />
|
|
))}
|
|
</Box>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|