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 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 | 1x 16x 7x 2x 1x 1x 66x 66x 66x 66x 22x 22x 22x 22x 22x 22x 20x 19x 2x 2x 2x 2x 22x 22x 22x 22x 66x 66x 66x 66x 66x 2x | import { useEffect, useState } from "react";
import axios from "axios";
import {
Box,
Card,
CardContent,
Chip,
CircularProgress,
Divider,
Stack,
Tooltip,
Typography,
} from "@mui/material";
import SchoolIcon from "@mui/icons-material/School";
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
import { API_ENDPOINTS } from "@/api/endpoints";
import { formatGpaAverage, gpaBandLabel } from "./formatGpa";
const _bandColor = (band) => {
if (band === "Excellent") return "success";
if (band === "Good") return "primary";
if (band === "Passing") return "warning";
Eif (band === "Needs work") return "error";
return "default";
};
const GpaCard = ({ refreshKey }) => {
const [data, setData] = useState(null);
const [isLoading, setIsLoading] = useState(false);
const [hasError, setHasError] = useState(false);
useEffect(() => {
let cancelled = false;
const fetchGpa = async () => {
setIsLoading(true);
setHasError(false);
try {
const response = await axios.get(API_ENDPOINTS.student.dashboard.gpa);
if (cancelled) return;
setData(response?.data ?? null);
} catch (error) {
Iif (cancelled) return;
console.error("EI-2966 GPA fetch error:", error?.response?.data || error?.message);
setHasError(true);
setData(null);
} finally {
if (!cancelled) setIsLoading(false);
}
};
fetchGpa();
return () => {
cancelled = true;
};
}, [refreshKey]);
const overall = data?.overall_average ?? null;
const totalGraded = data?.total_graded ?? 0;
const perClass = Array.isArray(data?.per_class) ? data.per_class : [];
const band = gpaBandLabel(overall);
return (
<Card id="student-dashboard-gpa-card" sx={{ borderRadius: 2 }}>
<CardContent>
<Stack direction="row" alignItems="center" spacing={1} sx={{ mb: 2 }}>
<SchoolIcon color="primary" />
<Typography variant="h6" sx={{ fontWeight: 600 }}>
Your GPA
</Typography>
<Tooltip
title="Weighted average across every graded submission from all your classes (not a plain average of the per-class numbers below). Classes with more graded submissions count for more."
placement="top"
arrow
>
<InfoOutlinedIcon sx={{ fontSize: 16, color: "text.secondary", cursor: "help" }} />
</Tooltip>
</Stack>
{isLoading ? (
<Box sx={{ py: 3, textAlign: "center" }}>
<CircularProgress size={24} />
</Box>
) : hasError ? (
<Typography id="student-dashboard-gpa-error" variant="body2" color="error">
Unable to load GPA. Please try again later.
</Typography>
) : totalGraded === 0 ? (
<Typography id="student-dashboard-gpa-empty" variant="body2" color="text.secondary">
No graded submissions yet.
</Typography>
) : (
<Stack spacing={1.5}>
<Stack direction="row" alignItems="baseline" spacing={1}>
<Typography
id="student-dashboard-gpa-overall"
variant="h3"
sx={{ fontWeight: 700, color: "primary.main" }}
>
{formatGpaAverage(overall)}
</Typography>
<Typography variant="body2" color="text.secondary">
/ 100 across {totalGraded} submission{totalGraded === 1 ? "" : "s"}
</Typography>
</Stack>
{band && (
<Chip
id="student-dashboard-gpa-band"
label={band}
size="small"
color={_bandColor(band)}
sx={{ alignSelf: "flex-start" }}
/>
)}
{perClass.length > 0 && (
<>
<Divider sx={{ my: 1 }} />
<Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
By class
</Typography>
<Stack spacing={0.5}>
{perClass.map((c) => (
<Stack
key={c.class_id}
direction="row"
justifyContent="space-between"
alignItems="center"
data-class-id={c.class_id}
>
<Typography variant="body2">
{c.class_title}
<Typography
component="span"
variant="caption"
color="text.secondary"
sx={{ ml: 1 }}
>
({c.count})
</Typography>
</Typography>
<Typography variant="body2" sx={{ fontWeight: 600 }}>
{formatGpaAverage(c.average)}
</Typography>
</Stack>
))}
</Stack>
</>
)}
</Stack>
)}
</CardContent>
</Card>
);
};
export default GpaCard;
|