44 lines
1.5 KiB
TypeScript
44 lines
1.5 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 { DateRangePicker } from "../DateRangePicker/DateRangePicker";
|
|
import { StatItem } from "./components/StatItem";
|
|
import "./GeneralHealthCard.scss";
|
|
|
|
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%" },
|
|
];
|
|
|
|
export const GeneralHealthCard = () => {
|
|
return (
|
|
<Card className="general-health-card">
|
|
<CardContent>
|
|
<Box className="general-health-card__header">
|
|
<Typography variant="h5" fontWeight="bold">
|
|
General Health
|
|
</Typography>
|
|
<Box className="general-health-card__right-side">
|
|
<CalendarTodayIcon fontSize="small" />
|
|
<Typography variant="body2">
|
|
<DateRangePicker />
|
|
</Typography>
|
|
<IconButton size="small">
|
|
<MoreVertIcon fontSize="small" />
|
|
</IconButton>
|
|
</Box>
|
|
</Box>
|
|
<Box className="general-health-card__stat-items">
|
|
{stats.map((item, i) => (
|
|
<StatItem key={item.label + i} {...item} />
|
|
))}
|
|
</Box>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|