74 lines
2.2 KiB
TypeScript
74 lines
2.2 KiB
TypeScript
import { Box, Card, CardContent, Typography, IconButton } 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 { DateRangePicker } from "../DateRangePicker/DateRangePicker";
|
|
// 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>
|
|
<Box sx={{ display: "flex", justifyContent: "space-between", mb: 2 }}>
|
|
<Typography variant="h5" fontWeight="bold">
|
|
General Health
|
|
</Typography>
|
|
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
|
<CalendarTodayIcon fontSize="small" />
|
|
<Typography variant="body2">
|
|
<DateRangePicker />
|
|
</Typography>
|
|
<IconButton size="small">
|
|
<MoreVertIcon fontSize="small" />
|
|
</IconButton>
|
|
</Box>
|
|
</Box>
|
|
<Box sx={{ display: "flex", justifyContent: "space-around", mt: 2 }}>
|
|
{stats.map((item) => (
|
|
<StatItem key={item.label} {...item} />
|
|
))}
|
|
</Box>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|