Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | 41x 41x 2x 2x | import { Box, Card, Skeleton, Typography } from "@mui/material";
import DonutLargeIcon from "@mui/icons-material/DonutLarge";
import PassFailPieChart from "./PassFailPieChart";
export default function PassedVsFailedCard({ passed, failed, loading }) {
return (
<Card elevation={0} sx={{ border: (t) => `1px solid ${t.palette.divider}`, borderRadius: 3, overflow: "hidden" }}>
<Box sx={{ px: 3, pt: 2.5, pb: 0 }}>
<Typography variant="subtitle1" fontWeight={700} color="text.primary">
Passed vs Failed
</Typography>
<Typography variant="caption" color="text.secondary">
Overall submission outcomes
</Typography>
</Box>
<Box sx={{ px: 1, pb: 0 }}>
{loading ? (
<Box sx={{ display: "flex", justifyContent: "center", alignItems: "center", height: 260 }}>
<Skeleton variant="circular" width={160} height={160} />
</Box>
) : passed > 0 || failed > 0 ? (
<PassFailPieChart passed={passed} failed={failed} />
) : (
<Box sx={{ height: 260, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 1 }}>
<DonutLargeIcon sx={{ fontSize: 48, color: "text.disabled" }} />
<Typography variant="body2" color="text.secondary">
No data available
</Typography>
</Box>
)}
</Box>
{!loading && (passed > 0 || failed > 0) && (
<Box sx={{ display: "flex", gap: 1.5, px: 2.5, pb: 2.5, pt: 0.5 }}>
<Box sx={{ flex: 1, borderRadius: 2, bgcolor: (t) => `${t.palette.success.main}12`, border: (t) => `1px solid ${t.palette.success.main}30`, p: 1.5, textAlign: "center" }}>
<Typography variant="h6" fontWeight={800} color="success.main" sx={{ lineHeight: 1 }}>
{passed}
</Typography>
<Typography variant="caption" color="success.main" sx={{ fontWeight: 700 }}>
Passed
</Typography>
</Box>
<Box sx={{ flex: 1, borderRadius: 2, bgcolor: (t) => `${t.palette.error.main}12`, border: (t) => `1px solid ${t.palette.error.main}30`, p: 1.5, textAlign: "center" }}>
<Typography variant="h6" fontWeight={800} color="error.main" sx={{ lineHeight: 1 }}>
{failed}
</Typography>
<Typography variant="caption" color="error.main" sx={{ fontWeight: 700 }}>
Failed
</Typography>
</Box>
</Box>
)}
</Card>
);
}
|