-
-
-
-
ClassPulse
-
Welcome, {teacherName}
-
-
signOut({ callbackUrl: "/login" })}
- className="text-sm text-gray-500 hover:text-gray-900"
- >
- Sign out
-
-
+const quickActions = [
+ { title: "Attendance Agent", description: "Take attendance for your current class", href: "/attendance-agent", icon: UserRoundPlus, tone: "bg-[#eef1ff] text-[#4b6bff]" },
+ { title: "Timetable", description: "View your full class schedule", href: "/timetable", icon: CalendarDays, tone: "bg-[#eef7ff] text-[#4388d8]" },
+ { title: "Class Analysis", description: "Analyze performance of a class/section", href: "/class-analysis", icon: BarChart3, tone: "bg-[#eaf9f1] text-[#159b62]" },
+ { title: "Subject Analysis", description: "Deep dive into a subject in a section", href: "/subject-analysis", icon: BookOpen, tone: "bg-[#fff5e7] text-[#ee9412]" },
+];
-
- What would you like to do today?
- Choose an option below to view and analyze your data.
+const todaySchedule = [
+ { time: "10:00 AM", end: "11:00 AM", subject: "Data Analysis (DA 338 T)", section: "Section A", room: "Room 104", active: true },
+ { time: "11:15 AM", end: "12:15 PM", subject: "Discrete Structures (CS 203)", section: "Section B", room: "Room 203" },
+ { time: "1:00 PM", end: "2:00 PM", subject: "Computer Networks (CS 302)", section: "Section A", room: "Room 105" },
+ { time: "3:00 PM", end: "4:00 PM", subject: "Data Analysis (DA 338 T)", section: "Section B", room: "Room 104" },
+];
-
-
- Class Analysis
-
- Combined attendance and exam performance for a whole class/section.
-
-
- {sections.map((s) => (
-
- {s.label}
-
- ))}
- {sections.length === 0 && (
-
No classes assigned yet.
- )}
-
+const recentActivity = [
+ { icon: CheckCircle2, tone: "text-[#159b62] bg-[#eaf9f1]", text: "Attendance recorded for DA 338 T — Section A", time: "10:05 AM" },
+ { icon: FileText, tone: "text-[#6c55e8] bg-[#f0edff]", text: "Midsem marks updated for DA 338 T — Section A", time: "Yesterday, 4:30 PM" },
+ { icon: CheckCircle2, tone: "text-[#159b62] bg-[#eaf9f1]", text: "Attendance recorded for CS 203 — Section B", time: "Aug 28, 12:20 PM" },
+ { icon: BarChart3, tone: "text-[#ee9412] bg-[#fff5e7]", text: "Class analysis viewed for ECE — B.Tech ECE, Sem 7", time: "Aug 28, 11:15 AM" },
+ { icon: CalendarDays, tone: "text-[#4388d8] bg-[#eef7ff]", text: "Timetable updated", time: "Aug 27, 3:45 PM" },
+];
-
- Subject Analysis
-
- Detailed attendance, marks, and student reports for one subject.
-
-
- {subjects.map((s) => (
-
- {s.label}
-
- ))}
- {subjects.length === 0 && (
-
No subjects assigned yet.
- )}
-
-
+export default function Dashboard({ teacherName, sections, subjects }: Props) {
+ const initials = teacherName.split(" ").filter(Boolean).slice(0, 2).map((part) => part[0]?.toUpperCase()).join("");
+ return (
+
+
+ ClassPulse
+
+ Need Help?
Visit our help center or contact support.
Help Center signOut({ callbackUrl: "/login" })} className="mt-5 flex w-full items-center gap-3 border-t border-[#eeeeeb] px-3 pt-5 text-sm font-medium text-[#626b80] hover:text-[#17223b]">
+
+
Quick Actions Jump straight into the tools you use most.
{quickActions.map((action) => { const Icon = action.icon; return
{action.title} {action.description} ; })}
+
Today's Timetable Your scheduled classes for today.
View full timetable
{todaySchedule.map((item, index) =>
{item.time} {item.end}
{index < todaySchedule.length - 1 &&
}
{item.subject}
{item.section} • {item.room}
{item.active &&
}
)}
Recent Activity Your latest activity.
{recentActivity.map((item) => { const Icon = item.icon; return
; })}
+
);
}
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const session = await getServerSession(ctx.req, ctx.res, authOptions);
- if (!session?.user) {
- return { redirect: { destination: "/login", permanent: false } };
- }
-
- const userId = (session.user as any).id;
- const role = (session.user as any).role;
-
- // Sections the teacher can view: they proctor the class, or teach a
- // subject within that section.
- const sectionsRaw =
- role === "ADMIN"
- ? await prisma.section.findMany({ include: { class: { include: { department: true } } } })
- : await prisma.section.findMany({
- where: {
- OR: [
- { class: { proctorId: userId } },
- { subjects: { some: { assignments: { some: { teacherId: userId } } } } },
- ],
- },
- include: { class: { include: { department: true } } },
- });
-
- const subjectsRaw = await prisma.subject.findMany({
- where: role === "ADMIN" ? {} : { assignments: { some: { teacherId: userId } } },
- include: { section: { include: { class: true } } },
- });
-
- return {
- props: {
- teacherName: session.user.name || session.user.email,
- sections: sectionsRaw.map((s) => ({
- id: s.id,
- label: `${s.class.department.name} — ${s.class.program}, Sem ${s.class.semester}, Section ${s.name}`,
- })),
- subjects: subjectsRaw.map((s) => ({
- id: s.id,
- label: `${s.name} (${s.code}) — Section ${s.section.name}`,
- })),
- },
- };
+ if (!session?.user) return { redirect: { destination: "/login", permanent: false } };
+ const userId = (session.user as any).id; const role = (session.user as any).role;
+ const sections = await prisma.section.findMany({ where: role === "ADMIN" ? undefined : { OR: [{ class: { proctorId: userId } }, { subjects: { some: { assignments: { some: { teacherId: userId } } } } }] }, include: { class: { include: { department: true } } } });
+ const subjects = await prisma.subject.findMany({ where: role === "ADMIN" ? undefined : { assignments: { some: { teacherId: userId } } }, include: { section: { include: { class: true } } } });
+ return { props: { sections: sections.map((s) => ({ id: s.id, label: `${s.class.department.name} — B.Tech ${s.class.department.name}, Sem ${s.class.semester}, Section ${s.name}` })), subjects: subjects.map((s) => ({ id: s.id, label: `${s.code} — ${s.name}` })), teacherName: session.user.name || session.user.email } };
};
diff --git a/pages/section-analysis/[sectionId]/academic.tsx b/pages/section-analysis/[sectionId]/academic.tsx
index acf4eb9..40a0dcd 100644
--- a/pages/section-analysis/[sectionId]/academic.tsx
+++ b/pages/section-analysis/[sectionId]/academic.tsx
@@ -1,680 +1,200 @@
import { useEffect, useMemo, useState } from "react";
import { useRouter } from "next/router";
-import {
- BarChart,
- Bar,
- XAxis,
- YAxis,
- Tooltip,
- ResponsiveContainer,
- CartesianGrid,
- PieChart,
- Pie,
- Cell,
-} from "recharts";
-
+import { BarChart3, BookOpen, GraduationCap, LayoutDashboard, RefreshCw } from "lucide-react";
import AnalysisNav from "../../../components/AnalysisNav";
+import { RawDataButton } from "../../../components/AnalysisWidgets";
import { SectionAnalysis } from "../../../lib/analysisClass";
-import { RawDataButton, StatCard, GradeBadge, RankedList } from "../../../components/AnalysisWidgets";
type AcademicView = "midsem1" | "midsem2" | "combined" | "summary";
-type ExamKey = "midsem1" | "midsem2" | "combined" | "max";
-
-const TIER_COLORS: Record
= {
- Excellent: "#10b981",
- Good: "#3b82f6",
- "Needs Attention": "#f59e0b",
- "Critical Risk": "#ef4444",
-};
-
-function median(values: number[]): number {
- if (values.length === 0) return 0;
- const sorted = [...values].sort((a, b) => a - b);
- const mid = Math.floor(sorted.length / 2);
- return sorted.length % 2 !== 0 ? sorted[mid] : round1((sorted[mid - 1] + sorted[mid]) / 2);
+type ScoreBasis = "midsem1" | "midsem2" | "combined" | "max";
+type SortOrder = "none" | "highToLow" | "lowToHigh";
+type SummaryExam = "combined" | "midsem1" | "midsem2" | "max";
+type SummarySort = "none" | "desc" | "asc";
+type Tier = "Excellent" | "Good" | "Needs Attention" | "Critical Risk";
+
+const TIER_COLORS: Record = { Excellent: "#2563eb", Good: "#15966a", "Needs Attention": "#f59e0b", "Critical Risk": "#ef4444" };
+const METRIC_COLORS = ["#2563eb", "#15966a", "#f59e0b", "#7c3aed"];
+const SUMMARY_COLORS = ["#2563eb", "#15966a", "#f59e0b", "#2563eb", "#15966a"];
+const round1 = (n: number) => Math.round(n * 10) / 10;
+const initials = (name: string) => name.split(" ").filter(Boolean).slice(0, 2).map((part) => part[0]).join("").toUpperCase();
+
+function median(values: number[]) { if (!values.length) return 0; const sorted = [...values].sort((a, b) => a - b); const middle = Math.floor(sorted.length / 2); return sorted.length % 2 ? sorted[middle] : round1((sorted[middle - 1] + sorted[middle]) / 2); }
+function tierFor(marks: number, max: number): Tier { if (max <= 0) return "Critical Risk"; const percentage = (marks / max) * 100; if (percentage >= 80) return "Excellent"; if (percentage >= 60) return "Good"; if (percentage >= 40) return "Needs Attention"; return "Critical Risk"; }
+function gradeFor(marks: number, max: number): Tier { return tierFor(marks, max); }
+
+function summarySubjectRows(student: any) {
+ const map = new Map();
+ (student.examMarks?.midsem1Subjects || []).forEach((s: any) => map.set(s.code, { code: s.code, first: s.marks ?? null, second: null, max: s.max || 30 }));
+ (student.examMarks?.midsem2Subjects || []).forEach((s: any) => {
+ const existing = map.get(s.code);
+ if (existing) existing.second = s.marks ?? null;
+ else map.set(s.code, { code: s.code, first: null, second: s.marks ?? null, max: s.max || 30 });
+ });
+ return Array.from(map.values()).map((s) => ({ ...s, combined: s.first != null && s.second != null ? round1((s.first + s.second) / 2) : s.first ?? s.second }));
}
-
-function round1(n: number) {
- return Math.round(n * 10) / 10;
+function summarySubjectValue(subject: any, exam: SummaryExam) {
+ if (exam === "midsem1") return subject.first;
+ if (exam === "midsem2") return subject.second;
+ if (exam === "max") return subject.first == null ? subject.second : subject.second == null ? subject.first : Math.max(subject.first, subject.second);
+ return subject.combined;
}
-// Grades a single exam score against its own max, same thresholds used
-// throughout the app (Excellent/Good/Needs Attention/Critical Risk).
-function gradeFor(marks: number, max: number): string {
- if (max <= 0) return "Critical Risk";
- const pct = (marks / max) * 100;
- if (pct >= 80) return "Excellent";
- if (pct >= 60) return "Good";
- if (pct >= 40) return "Needs Attention";
- return "Critical Risk";
+function Metric({ label, value, detail, color }: { label: string; value: string | number; detail: string; color: string }) {
+ return
+
{label}
+
{value}
+
{detail}
+
("midsem1");
-
+ const [scoreBasis, setScoreBasis] = useState("combined");
+ const [sortOrder, setSortOrder] = useState("none");
const [data, setData] = useState(null);
const [sheetId, setSheetId] = useState(null);
const [computedAt, setComputedAt] = useState("");
const [loading, setLoading] = useState(true);
const [syncing, setSyncing] = useState(false);
const [error, setError] = useState("");
-
- // Combined view controls
- const [gradeBasis, setGradeBasis] = useState("combined");
- const [sortDir, setSortDir] = useState<"desc" | "asc" | "none">("desc");
-
- // Summary (filter) view controls
- const [filterExam, setFilterExam] = useState<"midsem1" | "midsem2" | "both">("both");
- const [lowerBound, setLowerBound] = useState(0);
- const [upperBound, setUpperBound] = useState(100);
-
- async function loadAnalysis() {
- if (!sectionId || typeof sectionId !== "string") return;
- setLoading(true);
- setError("");
- try {
- const res = await fetch(`/api/analysis/section/${sectionId}`);
- const json = await res.json();
- if (!res.ok) {
- setError(json.detail ? `${json.error}: ${json.detail}` : json.error || "Failed to load academic analysis");
- return;
- }
- setData(json.data);
- setComputedAt(json.computedAt);
- setSheetId(json.sheetId || null);
- } catch (e: any) {
- setError(e.message || "Failed to load academic analysis");
- } finally {
- setLoading(false);
- }
- }
-
- async function syncAnalysis() {
+ const [selectedTier, setSelectedTier] = useState(null);
+ const [summaryExam, setSummaryExam] = useState("combined");
+ const [summaryTier, setSummaryTier] = useState("all");
+ const [summaryLower, setSummaryLower] = useState("0");
+ const [summaryUpper, setSummaryUpper] = useState("12");
+ const [summarySort, setSummarySort] = useState("none");
+ const [summaryExamDraft, setSummaryExamDraft] = useState("combined");
+ const [summaryTierDraft, setSummaryTierDraft] = useState("all");
+ const [summaryLowerDraft, setSummaryLowerDraft] = useState("0");
+ const [summaryUpperDraft, setSummaryUpperDraft] = useState("12");
+ const [summarySortDraft, setSummarySortDraft] = useState("none");
+
+ async function loadAnalysis(sync = false) {
if (!sectionId || typeof sectionId !== "string") return;
- setSyncing(true);
- setError("");
+ sync ? setSyncing(true) : setLoading(true); setError("");
try {
- const res = await fetch(`/api/analysis/section/${sectionId}?sync=1`);
+ const res = await fetch(`/api/analysis/section/${sectionId}${sync ? "?sync=1" : ""}`);
const json = await res.json();
- if (!res.ok) {
- setError(json.detail ? `${json.error}: ${json.detail}` : json.error || "Failed to sync analysis");
- return;
- }
- setData(json.data);
- setComputedAt(json.computedAt);
- setSheetId(json.sheetId || null);
- } catch (e: any) {
- setError(e.message || "Failed to sync analysis");
- } finally {
- setSyncing(false);
- }
+ if (!res.ok) throw new Error(json.detail ? `${json.error}: ${json.detail}` : json.error || "Failed to load academic analysis");
+ setData(json.data); setComputedAt(json.computedAt || ""); setSheetId(json.sheetId || null);
+ } catch (e: any) { setError(e.message || "Failed to load academic analysis"); }
+ finally { setLoading(false); setSyncing(false); }
}
- useEffect(() => {
- loadAnalysis();
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [sectionId]);
-
+ useEffect(() => { loadAnalysis(); }, [sectionId]);
+ useEffect(() => { setSelectedTier(null); setSortOrder("none"); }, [view]);
const students = data?.students || [];
- // ---------- Single-exam view (MidSem 1 / MidSem 2) ----------
- function useSingleExamStats(examKey: "midsem1" | "midsem2") {
- return useMemo(() => {
- const rows = students
- .map((s: any) => ({
- enrollmentNo: s.enrollmentNo,
- name: s.name,
- marks: examKey === "midsem1" ? s.examMarks.midsem1 : s.examMarks.midsem2,
- max: examKey === "midsem1" ? s.examMarks.midsem1Max : s.examMarks.midsem2Max,
- subjects: examKey === "midsem1" ? s.examMarks.midsem1Subjects : s.examMarks.midsem2Subjects,
- }))
- .filter((r: any) => r.marks !== null);
-
- const marksList = rows.map((r: any) => r.marks as number);
- const max = rows[0]?.max || 1;
- const subjectCodes: string[] = rows[0]?.subjects?.map((s: any) => s.code) || [];
-
- const classAverage = marksList.length ? round1(marksList.reduce((a, b) => a + b, 0) / marksList.length) : 0;
- const classMedian = median(marksList);
- const highest = marksList.length ? Math.max(...marksList) : 0;
- // Pass = at least 40% of the exam's total max marks (consistent with the
- // 12/30-per-subject rule, scaled up across however many subjects this exam has).
- const passRate = marksList.length
- ? Math.round((rows.filter((r: any) => r.marks >= max * 0.4).length / marksList.length) * 100)
- : 0;
-
- const tiers = { Excellent: 0, Good: 0, "Needs Attention": 0, "Critical Risk": 0 } as Record;
- rows.forEach((r: any) => {
- tiers[gradeFor(r.marks, max)]++;
- });
-
- const sorted = [...rows].sort((a: any, b: any) => b.marks - a.marks);
-
- return { rows, max, subjectCodes, classAverage, classMedian, highest, passRate, tiers, sorted };
- }, [students, examKey]);
+ const activeStats = useMemo(() => {
+ const rows = students.map((student: any, index: number) => {
+ if (view === "combined") {
+ const combinedMarks = student.examMarks?.combined ?? null;
+ const combinedMax = Math.max(student.examMarks?.midsem1Max || 0, student.examMarks?.midsem2Max || 0);
+ const midsem1Subjects = student.examMarks?.midsem1Subjects || [];
+ const midsem2Subjects = student.examMarks?.midsem2Subjects || [];
+ const subjectMap = new Map();
+ [...midsem1Subjects, ...midsem2Subjects].forEach((subject: any) => {
+ const existing = subjectMap.get(subject.code);
+ if (!existing) { subjectMap.set(subject.code, { code: subject.code, marks: subject.marks ?? null, max: subject.max || 0, pass: subject.pass !== false }); return; }
+ const values = [existing.marks, subject.marks].filter((value): value is number => value !== null && value !== undefined);
+ const subjectCombined = values.length ? round1(values.reduce((a, b) => a + b, 0) / values.length) : null;
+ subjectMap.set(subject.code, { code: subject.code, marks: subjectCombined, max: Math.max(existing.max || 0, subject.max || 0), pass: subjectCombined === null ? true : subjectCombined >= Math.max(existing.max || 0, subject.max || 0) * 0.4 });
+ });
+ let marks = combinedMarks; let max = combinedMax;
+ if (scoreBasis === "midsem1") { marks = student.examMarks?.midsem1 ?? null; max = student.examMarks?.midsem1Max || 0; }
+ else if (scoreBasis === "midsem2") { marks = student.examMarks?.midsem2 ?? null; max = student.examMarks?.midsem2Max || 0; }
+ else if (scoreBasis === "max") {
+ const midsem1 = student.examMarks?.midsem1; const midsem2 = student.examMarks?.midsem2;
+ const available = [midsem1, midsem2].filter((value: any): value is number => value !== null && value !== undefined);
+ marks = available.length ? Math.max(...available) : null; max = Math.max(student.examMarks?.midsem1Max || 0, student.examMarks?.midsem2Max || 0);
+ }
+ return { sno: index + 1, enrollmentNo: student.enrollmentNo, name: student.name, marks, max, subjects: Array.from(subjectMap.values()) };
+ }
+ const exam = view === "midsem1" ? "midsem1" : "midsem2";
+ const marks = student.examMarks?.[exam] ?? null;
+ const max = student.examMarks?.[`${exam}Max`] || 0;
+ const subjects = student.examMarks?.[`${exam}Subjects`] || [];
+ return { sno: index + 1, enrollmentNo: student.enrollmentNo, name: student.name, marks, max, subjects };
+ }).filter((row: any) => row.marks !== null);
+ const marks = rows.map((row: any) => Number(row.marks));
+ const max = rows[0]?.max || 0;
+ const counts = { Excellent: 0, Good: 0, "Needs Attention": 0, "Critical Risk": 0 } as Record;
+ rows.forEach((row: any) => counts[tierFor(Number(row.marks), Number(row.max) || max)]++);
+ const subjectCodes = Array.from(new Set(rows.flatMap((row: any) => (row.subjects || []).map((subject: any) => subject.code))));
+ return { rows, max, subjectCodes, average: marks.length ? round1(marks.reduce((a, b) => a + b, 0) / marks.length) : 0, median: median(marks), highest: marks.length ? Math.max(...marks) : 0, passRate: marks.length ? Math.round(rows.filter((row: any) => Number(row.marks) >= (Number(row.max) || max) * 0.4).length / marks.length * 100) : 0, counts, sorted: [...rows].sort((a: any, b: any) => Number(b.marks) - Number(a.marks)) };
+ }, [students, view, scoreBasis]);
+
+ const filteredRows = selectedTier ? activeStats.rows.filter((row: any) => tierFor(Number(row.marks), Number(row.max) || activeStats.max) === selectedTier) : activeStats.rows;
+ const displayedRows = useMemo(() => { if (sortOrder === "highToLow") return [...filteredRows].sort((a: any, b: any) => Number(b.marks) - Number(a.marks)); if (sortOrder === "lowToHigh") return [...filteredRows].sort((a: any, b: any) => Number(a.marks) - Number(b.marks)); return filteredRows; }, [filteredRows, sortOrder]);
+ const showRank = sortOrder !== "none";
+ const totalStudents = students.length;
+ const activeLabel = view === "midsem1" ? "Midsem 1" : view === "midsem2" ? "Midsem 2" : "Combined";
+ const tierEntries = Object.entries(activeStats.counts) as [Tier, number][];
+ const highestNames = activeStats.rows.filter((row: any) => Number(row.marks) === activeStats.highest).map((row: any) => row.name);
+
+ const summaryRows = useMemo(() => students.map((student: any, index: number) => {
+ const subjects = summarySubjectRows(student);
+ const values = subjects.map((subject) => ({ ...subject, value: summarySubjectValue(subject, summaryExam) }));
+ const total = values.reduce((sum, subject) => sum + (subject.value ?? 0), 0);
+ const rowValue = summaryExam === "midsem1" ? (student.examMarks?.midsem1 ?? 0) : summaryExam === "midsem2" ? (student.examMarks?.midsem2 ?? 0) : summaryExam === "max" ? (student.examMarks?.max ?? 0) : (student.examMarks?.combined ?? 0);
+ const rowMax = summaryExam === "midsem1" ? (student.examMarks?.midsem1Max || 0) : summaryExam === "midsem2" ? (student.examMarks?.midsem2Max || 0) : summaryExam === "max" ? Math.max(student.examMarks?.midsem1Max || 0, student.examMarks?.midsem2Max || 0) : Math.max(student.examMarks?.midsem1Max || 0, student.examMarks?.midsem2Max || 0);
+ const lower = Number(summaryLower); const upper = Number(summaryUpper);
+ const matchesRange = values.some((subject) => subject.value != null && subject.value >= (Number.isFinite(lower) ? lower : 0) && subject.value <= (Number.isFinite(upper) ? upper : 30));
+ return { sno: index + 1, enrollmentNo: student.enrollmentNo, name: student.name, subjects: values, total, rowValue, rowMax, tier: tierFor(rowValue, rowMax), matchesRange };
+ }), [students, summaryExam, summaryLower, summaryUpper]);
+ const summarySubjectCodes = useMemo(() => Array.from(new Set(summaryRows.flatMap((row) => row.subjects.map((subject: any) => subject.code)))), [summaryRows]);
+ const filteredSummaryRows = useMemo(() => [...summaryRows].filter((row) => row.matchesRange && (summaryTier === "all" || row.tier === summaryTier)).sort((a, b) => summarySort === "none" ? a.sno - b.sno : summarySort === "desc" ? b.rowValue - a.rowValue : a.rowValue - b.rowValue), [summaryRows, summaryTier, summarySort]);
+ const summaryShowRank = summarySort !== "none";
+ const combinedValues = students.map((student: any) => Number(student.examMarks?.combined || 0));
+ const midsem1Values = students.map((student: any) => Number(student.examMarks?.midsem1 || 0));
+ const midsem2Values = students.map((student: any) => Number(student.examMarks?.midsem2 || 0));
+ const overallClassAverage = combinedValues.length ? round1(combinedValues.reduce((a, b) => a + b, 0) / combinedValues.length) : 0;
+ const midsem1Average = midsem1Values.length ? round1(midsem1Values.reduce((a, b) => a + b, 0) / midsem1Values.length) : 0;
+ const midsem2Average = midsem2Values.length ? round1(midsem2Values.reduce((a, b) => a + b, 0) / midsem2Values.length) : 0;
+ const highestCombined = combinedValues.length ? Math.max(...combinedValues) : 0;
+ const highestCombinedNames = students.filter((student: any) => Number(student.examMarks?.combined || 0) === highestCombined).map((student: any) => student.name);
+ const overallPassRate = students.length ? Math.round(students.filter((student: any) => Number(student.examMarks?.combined || 0) >= (Math.max(student.examMarks?.midsem1Max || 0, student.examMarks?.midsem2Max || 0) || 1) * 0.4).length / students.length * 100) : 0;
+ const increases = students.map((student: any) => ({ name: student.name, change: round1(Number(student.examMarks?.midsem2 || 0) - Number(student.examMarks?.midsem1 || 0)) })).filter((row) => row.change > 0).sort((a, b) => b.change - a.change).slice(0, 5);
+ const decreases = students.map((student: any) => ({ name: student.name, change: round1(Number(student.examMarks?.midsem2 || 0) - Number(student.examMarks?.midsem1 || 0)) })).filter((row) => row.change < 0).sort((a, b) => a.change - b.change).slice(0, 5);
+
+ function applySummaryFilters() {
+ setSummaryExam(summaryExamDraft); setSummaryTier(summaryTierDraft); setSummaryLower(summaryLowerDraft); setSummaryUpper(summaryUpperDraft); setSummarySort(summarySortDraft);
}
- const midsem1Stats = useSingleExamStats("midsem1");
- const midsem2Stats = useSingleExamStats("midsem2");
-
- function renderSingleExamView(examLabel: string, stats: ReturnType) {
- const pieData = Object.entries(stats.tiers).map(([name, value]) => ({
- name,
- value,
- color: TIER_COLORS[name],
- }));
-
- return (
- <>
-
-
{examLabel}
-
Marks, class stats, and top/at-risk students for {examLabel}.
-
-
- Data Sheet
- Pass mark per subject: 12/30 (40%)
-
-
-
-
- Name
- {stats.subjectCodes.map((code: string) => (
-
- {code}
-
- ))}
- Total
- %age
-
-
-
- {stats.rows.map((r: any) => {
- const pct = stats.max > 0 ? Math.round((r.marks / stats.max) * 100) : 0;
- return (
-
-
- {r.name}
-
- {(r.subjects || []).map((s: any) => (
-
- {s.marks === null ? "—" : s.marks}
-
- ))}
- {r.marks}
- {pct}%
-
- );
- })}
-
-
-
-
-
-
-
-
-
- Performance Tier
-
- {Object.entries(stats.tiers).map(([name, count]) => (
-
- ))}
-
-
-
- {pieData.map((entry, i) => (
- |
- ))}
-
-
-
-
-
-
-
- ({ name: r.name, marks: r.marks }))}
- />
-
-
- ({ name: r.name, marks: r.marks }))}
- />
-
-
-
-
= {
- midsem1: s.examMarks.midsem1 ?? 0,
- midsem2: s.examMarks.midsem2 ?? 0,
- combined: s.examMarks.combined,
- max: s.examMarks.max,
- };
- const basisValue = values[gradeBasis];
- const basisMax = Math.max(s.examMarks.midsem1Max, s.examMarks.midsem2Max) || 1;
- return {
- enrollmentNo: s.enrollmentNo,
- name: s.name,
- email: s.email,
- midsem1: s.examMarks.midsem1,
- midsem2: s.examMarks.midsem2,
- combined: s.examMarks.combined,
- max: s.examMarks.max,
- grade: gradeFor(basisValue, basisMax),
- sortValue: basisValue,
- };
- });
- }, [students, gradeBasis]);
-
- const sortedCombinedRows = useMemo(() => {
- if (sortDir === "none") return combinedRows;
- const sorted = [...combinedRows].sort((a, b) => a.sortValue - b.sortValue);
- return sortDir === "desc" ? sorted.reverse() : sorted;
- }, [combinedRows, sortDir]);
-
- const combinedGradeCounts = useMemo(() => {
- const counts = { Excellent: 0, Good: 0, "Needs Attention": 0, "Critical Risk": 0 } as Record;
- combinedRows.forEach((r) => counts[r.grade]++);
- return counts;
- }, [combinedRows]);
-
- const combinedTop5 = useMemo(
- () => [...combinedRows].sort((a, b) => b.sortValue - a.sortValue).slice(0, 5),
- [combinedRows]
- );
-
- const combinedBottom5 = useMemo(
- () => [...combinedRows].sort((a, b) => a.sortValue - b.sortValue).slice(0, 5),
- [combinedRows]
- );
-
- // ---------- Summary (filter) view ----------
- // Per-subject filter: for each student, check every subject's mark (in
- // whichever exam(s) are selected) against the bounds. One result row per
- // matching student+subject+exam — a student can appear more than once if
- // they fall in range on multiple subjects.
- const filteredSummaryRows = useMemo(() => {
- const rows: { enrollmentNo: string; name: string; exam: string; subject: string; marks: number }[] = [];
-
- students.forEach((s: any) => {
- const examsToCheck: { label: string; subjects: any[] }[] = [];
- if (filterExam === "midsem1" || filterExam === "both") {
- examsToCheck.push({ label: "Midsem 1", subjects: s.examMarks.midsem1Subjects || [] });
- }
- if (filterExam === "midsem2" || filterExam === "both") {
- examsToCheck.push({ label: "Midsem 2", subjects: s.examMarks.midsem2Subjects || [] });
- }
-
- examsToCheck.forEach((exam) => {
- exam.subjects.forEach((subj: any) => {
- if (subj.marks === null) return;
- if (subj.marks >= lowerBound && subj.marks <= upperBound) {
- rows.push({
- enrollmentNo: s.enrollmentNo,
- name: s.name,
- exam: exam.label,
- subject: subj.code,
- marks: subj.marks,
- });
- }
- });
- });
- });
-
- return rows;
- }, [students, filterExam, lowerBound, upperBound]);
-
- const summaryStats = useMemo(() => {
- const combinedValues = students.map((s: any) => s.examMarks.combined);
- const overallAverage = combinedValues.length
- ? round1(combinedValues.reduce((a: number, b: number) => a + b, 0) / combinedValues.length)
- : 0;
- const highest = combinedValues.length ? Math.max(...combinedValues) : 0;
- const lowest = combinedValues.length ? Math.min(...combinedValues) : 0;
- const passCount = combinedValues.filter((v: number) => v > 0).length;
- const passRate = combinedValues.length ? Math.round((passCount / combinedValues.length) * 100) : 0;
-
- const midsem1Values = students.map((s: any) => s.examMarks.midsem1 ?? 0);
- const midsem2Values = students.map((s: any) => s.examMarks.midsem2 ?? 0);
- const midsem1Avg = midsem1Values.length
- ? round1(midsem1Values.reduce((a: number, b: number) => a + b, 0) / midsem1Values.length)
- : 0;
- const midsem2Avg = midsem2Values.length
- ? round1(midsem2Values.reduce((a: number, b: number) => a + b, 0) / midsem2Values.length)
- : 0;
-
- const changes = students
- .map((s: any) => ({
- name: s.name,
- change: round1((s.examMarks.midsem2 ?? 0) - (s.examMarks.midsem1 ?? 0)),
- }))
- .sort((a, b) => b.change - a.change);
-
- return {
- overallAverage,
- highest,
- lowest,
- passRate,
- midsem1Avg,
- midsem2Avg,
- increases: changes.slice(0, 5),
- decreases: [...changes].reverse().slice(0, 5),
- };
- }, [students]);
-
- return (
-
-
-
-
Class / Section Analysis
- {computedAt && (
-
Last synced {new Date(computedAt).toLocaleString()}
- )}
-
-
-
- {syncing ? "Syncing..." : "Sync now"}
-
-
-
-
+ return
+
+
+
Class / Section Analysis {computedAt && • Last synced {new Date(computedAt).toLocaleString()} } loadAnalysis(true)} disabled={syncing}>
- {(
- [
- { key: "midsem1", label: "Midsem 1" },
- { key: "midsem2", label: "Midsem 2" },
- { key: "combined", label: "Combined" },
- { key: "summary", label: "Summary" },
- ] as { key: AcademicView; label: string }[]
- ).map((tab) => (
- setView(tab.key)}
- className={`text-sm px-4 py-2 rounded-lg font-medium ${
- view === tab.key ? "bg-gray-900 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"
- }`}
- >
- {tab.label}
-
- ))}
-
-
- {error && {error}
}
- {loading && !data && Loading academic analysis...
}
-
- {data && view === "midsem1" && renderSingleExamView("Midsem 1", midsem1Stats)}
- {data && view === "midsem2" && renderSingleExamView("Midsem 2", midsem2Stats)}
-
- {data && view === "combined" && (
- <>
-
-
-
Midsem Combined
-
- Choose which numbers grade students, then sort to see who's ahead or behind.
-
-
-
-
- Grade / Sort By
- setGradeBasis(e.target.value as ExamKey)}
- className="border border-gray-200 rounded-lg px-3 py-2 text-sm bg-white"
- >
- Midsem 1
- Midsem 2
- Combined (average)
- Max (better of the two)
-
-
-
- Order
- setSortDir(e.target.value as "desc" | "asc" | "none")}
- className="border border-gray-200 rounded-lg px-3 py-2 text-sm bg-white"
- >
- No Sort (Enrollment Order)
- Highest to Lowest
- Lowest to Highest
-
-
-
-
-
- All Students
-
-
-
-
- {sortDir !== "none" && Rank }
- Name
- 1st
- 2nd
- Combined
- Max
- Grade
-
-
-
- {sortedCombinedRows.map((r, i) => (
-
- {sortDir !== "none" && (
- {i + 1}
- )}
- {r.name}
- {r.midsem1 ?? "—"}
- {r.midsem2 ?? "—"}
- {r.combined}
- {r.max}
-
-
-
- ))}
-
-
-
-
-
-
- Grade Distribution
-
- ({ name, count }))}
- >
-
- {Object.keys(combinedGradeCounts).map((name, i) => (
- |
- ))}
-
-
-
-
-
-
- ({ name: r.name, marks: r.sortValue }))}
- />
-
-
-
- ({ name: r.name, marks: r.sortValue }))}
- />
-
-
-
-
Academic Summary
-
Filter students by marks range, and see who's improving.
-
-
-
- Filter Criteria
-
-
- Exam
- setFilterExam(e.target.value as any)}
- className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm bg-white"
- >
- Both Midsem 1 & 2
- Midsem 1
- Midsem 2
-
-
-
- Lower Bound
-
-
- Upper Bound
-
-
-
-
-
- Filtered Results ({filteredSummaryRows.length})
-
-
-
-
- Name
- Subject
- Exam
- Marks
-
-
-
- {filteredSummaryRows.map((r, i) => (
-
- {r.name}
- {r.subject}
- {r.exam}
- {r.marks}
-
- ))}
- {filteredSummaryRows.length === 0 && (
-
-
- No students match this filter.
-
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ({ name: s.name, marks: s.change }))} />
-
-
- ({ name: s.name, marks: s.change }))}
- />
-
-
-
-
- );
+
setView("midsem1")}>Midsem 1 setView("midsem2")}>Midsem 2 setView("combined")}>Combined setView("summary")}>Summary
+ {error &&
{error}
}
+ {loading && !data &&
Loading academic analysis...
}
+ {data && view !== "summary" && <>
+
+ {activeLabel} {view === "combined" ? "Combined Midsem 1 and Midsem 2 performance across all subjects." : "Marks across all subjects, class statistics, and performance tiers."}
+
+ Data Sheet Pass mark: 40%{selectedTier ? ` · Filtered: ${selectedTier}` : ""}
{view === "combined" &&
Score setScoreBasis(e.target.value as ScoreBasis)} className="h-9 min-w-[125px] rounded-xl border border-[#e1e4ea] bg-white px-3 text-[11px] font-semibold normal-case tracking-normal text-[#344054] outline-none focus:border-[#5b4ee6]">Midsem 1 Midsem 2 Combined Max Sort setSortOrder(e.target.value as SortOrder)} className="h-9 min-w-[125px] rounded-xl border border-[#e1e4ea] bg-white px-3 text-[11px] font-semibold normal-case tracking-normal text-[#344054] outline-none focus:border-[#5b4ee6]">No Sort High to Low Low to High
}{selectedTier &&
setSelectedTier(null)}>Clear filter }
{showRank ? "Rank" : "S.No."} Student Name {activeStats.subjectCodes.map((code: string) => {code} )}Total %age Grade {displayedRows.map((row: any, index: number) => { const rowMax = Number(row.max) || activeStats.max; const pct = rowMax > 0 ? Math.round(Number(row.marks) / rowMax * 100) : 0; const tier = tierFor(Number(row.marks), rowMax); const grade = gradeFor(Number(row.marks), rowMax); return {showRank ? index + 1 : row.sno} {initials(row.name)} {row.name}
{subject?.marks ?? "—"} ; })}{row.marks} {pct}% setSelectedTier(tier)} className="inline-flex max-w-full whitespace-nowrap rounded-full px-2 py-1 text-[9px] font-bold" style={{ backgroundColor: `${TIER_COLORS[grade]}18`, color: TIER_COLORS[grade] }}>{grade}
Performance Tier Click a tier to filter the data sheet.
{totalStudents} Students {tierEntries.map(([tier, count]) => setSelectedTier(selectedTier === tier ? null : tier)} className={`flex w-full items-center justify-between rounded-xl border px-3 py-2.5 text-left transition ${selectedTier === tier ? "border-[#cfc7ff] bg-[#f6f4ff]" : "border-[#edf0f4] bg-white hover:bg-[#fafaff]"}`}>{tier} {count} )}
{tierEntries.map(([tier, count]) =>
Top 5 Highest Scorers {activeStats.sorted.slice(0, 5).map((row: any, index: number) =>
{index + 1}. {row.name} {row.marks}
)}
Bottom 5 At-Risk Students {activeStats.sorted.slice(-5).reverse().map((row: any, index: number) =>
{index + 1}. {row.name} {row.marks}
)}
+ }
+ {data && view === "summary" && <>
+
Academic Summary Compare Midsem 1 and Midsem 2 with the same ClassPulse academic analysis theme.
+
+
{["Overall Class Average", "Highest Combined Score", "Overall Pass Rate", "Midsem 1 Average", "Midsem 2 Average"].map((label, index) => { const values = [overallClassAverage, highestCombined, `${overallPassRate}%`, midsem1Average, midsem2Average]; const details = ["combined average", highestCombinedNames[0] || "top score", "students scoring 40% or more", "out of 180 marks", "out of 180 marks"]; return {label} {values[index]} {details[index]}
+
Filtered Students Showing {filteredSummaryRows.length} of {students.length} students
{filteredSummaryRows.length} Students {summaryShowRank ? "Rank" : "S.No."} Enrollment No. Student {summarySubjectCodes.map((code) => {code} )}Total Tier {filteredSummaryRows.map((row, index) => {summaryShowRank ? index + 1 : row.sno} {row.enrollmentNo} {row.name} {summarySubjectCodes.map((code) => { const subject = row.subjects.find((s: any) => s.code === code); const value = subject?.value; const lower = Number(summaryLower); const upper = Number(summaryUpper); const inRange = value != null && value >= (Number.isFinite(lower) ? lower : 0) && value <= (Number.isFinite(upper) ? upper : 30); return {inRange ? value : ""} ; })}{row.total} {row.tier} No students match the selected criteria.
Marks Increase (Top 5) Students whose Midsem 2 score improved.
{increases.map((row, index) => {index + 1}. {row.name}
+{row.change} Marks Decrease (Top 5) Students whose Midsem 2 score fell.
{decreases.map((row, index) => {index + 1}. {row.name}
{row.change}
+ }
+
+
("trend");
-
const [data, setData] = useState(null);
const [sheetId, setSheetId] = useState(null);
const [computedAt, setComputedAt] = useState("");
-
const [loading, setLoading] = useState(true);
const [syncing, setSyncing] = useState(false);
const [error, setError] = useState("");
-
- // Month selection (Trend tab)
const [previousMonth, setPreviousMonth] = useState("");
const [currentMonth, setCurrentMonth] = useState("");
const [trendCriteria, setTrendCriteria] = useState(5);
-
- // At Risk filter state
+ const [search, setSearch] = useState("");
const [lowerBound, setLowerBound] = useState(0);
const [upperBound, setUpperBound] = useState(100);
const [riskTrendFilter, setRiskTrendFilter] = useState("All");
const [riskMonth, setRiskMonth] = useState<"previous" | "current">("current");
+ const [copied, setCopied] = useState(false);
- async function loadAnalysis(selectedPrevious?: string, selectedCurrent?: string, criteria?: number) {
+ async function loadAnalysis(sync = false, previous = previousMonth, current = currentMonth, criteria = trendCriteria) {
if (!sectionId || typeof sectionId !== "string") return;
-
- setLoading(true);
+ sync ? setSyncing(true) : setLoading(true);
setError("");
-
try {
const params = new URLSearchParams();
- if (selectedPrevious) params.set("previousMonth", selectedPrevious);
- if (selectedCurrent) params.set("currentMonth", selectedCurrent);
- if (criteria !== undefined) params.set("trendCriteria", String(criteria));
-
- const query = params.toString();
- const res = await fetch(`/api/analysis/section/${sectionId}${query ? `?${query}` : ""}`);
- const json = await res.json();
-
- if (!res.ok) {
- setError(json.detail ? `${json.error}: ${json.detail}` : json.error || "Failed to load attendance analysis");
- return;
- }
-
- setData(json.data);
- setComputedAt(json.computedAt);
- setSheetId(json.sheetId || null);
-
- if (json.data?.monthsUsed) {
- if (!previousMonth && json.data.monthsUsed.previous) setPreviousMonth(json.data.monthsUsed.previous);
- if (!currentMonth && json.data.monthsUsed.current) setCurrentMonth(json.data.monthsUsed.current);
- }
- } catch (e: any) {
- setError(e.message || "Failed to load attendance analysis");
- } finally {
- setLoading(false);
- }
+ if (sync) params.set("sync", "1");
+ if (previous) params.set("previousMonth", previous);
+ if (current) params.set("currentMonth", current);
+ params.set("trendCriteria", String(criteria));
+ const response = await fetch(`/api/analysis/section/${sectionId}?${params.toString()}`);
+ const json = await response.json();
+ if (!response.ok) throw new Error(json.detail ? `${json.error}: ${json.detail}` : json.error || "Failed to load attendance analysis");
+ setData(json.data); setComputedAt(json.computedAt || ""); setSheetId(json.sheetId || null);
+ setPreviousMonth(previous || json.data?.monthsUsed?.previous || ""); setCurrentMonth(current || json.data?.monthsUsed?.current || "");
+ } catch (e: any) { setError(e.message || "Failed to load attendance analysis"); }
+ finally { setLoading(false); setSyncing(false); }
}
- async function syncAnalysis() {
- if (!sectionId || typeof sectionId !== "string") return;
-
- setSyncing(true);
- setError("");
-
- try {
- const params = new URLSearchParams({
- sync: "1",
- previousMonth,
- currentMonth,
- trendCriteria: String(trendCriteria),
- });
-
- const res = await fetch(`/api/analysis/section/${sectionId}?${params.toString()}`);
- const json = await res.json();
-
- if (!res.ok) {
- setError(json.detail ? `${json.error}: ${json.detail}` : json.error || "Failed to sync analysis");
- return;
- }
-
- setData(json.data);
- setComputedAt(json.computedAt);
- setSheetId(json.sheetId || null);
- } catch (e: any) {
- setError(e.message || "Failed to sync analysis");
- } finally {
- setSyncing(false);
- }
- }
-
- function applyTrendSettings() {
- loadAnalysis(previousMonth, currentMonth, trendCriteria);
- }
-
- useEffect(() => {
- loadAnalysis();
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [sectionId]);
-
+ useEffect(() => { loadAnalysis(); }, [sectionId]);
+ const students = data?.students || [];
const availableMonths = data?.availableMonths || [];
-
- const trendData = data
- ? [
- { name: "Increasing", count: data.trendCounts?.increasing || 0 },
- { name: "Decreasing", count: data.trendCounts?.decreasing || 0 },
- { name: "Stable", count: data.trendCounts?.stable || 0 },
- ]
- : [];
-
- const attendanceBuckets = data?.attendanceBuckets ?? {
- below30: 0,
- to49: 0,
- to74: 0,
- above75: 0,
- };
-
- const attendanceDistribution = data
- ? [
- { name: "Below 30%", count: attendanceBuckets.below30 },
- { name: "30% to 49%", count: attendanceBuckets.to49 },
- { name: "50% to 74%", count: attendanceBuckets.to74 },
- { name: "75% and above", count: attendanceBuckets.above75 },
- ]
- : [];
-
- // ---- At Risk: filtered students ----
- const riskResults = useMemo(() => {
- if (!data) return [];
- return data.students.filter((s: any) => {
- const pct = riskMonth === "current" ? s.attendancePct?.currMonth ?? 0 : s.attendancePct?.prevMonth ?? 0;
- const inBounds = pct >= lowerBound && pct <= upperBound;
- const trendMatches = riskTrendFilter === "All" || (s.attendancePct?.trend || "Stable") === riskTrendFilter;
- return inBounds && trendMatches;
- });
- }, [data, lowerBound, upperBound, riskTrendFilter, riskMonth]);
-
- const riskEmails = riskResults.map((s: any) => s.email).filter(Boolean);
- const riskEmailsText = riskEmails.join("; ");
-
- const [copied, setCopied] = useState(false);
- async function copyEmails() {
- try {
- await navigator.clipboard.writeText(riskEmailsText);
- setCopied(true);
- setTimeout(() => setCopied(false), 2000);
- } catch {
- // clipboard API unavailable — the textarea below still lets them select+copy manually
- }
- }
-
- const mailtoHref = `mailto:?bcc=${encodeURIComponent(riskEmails.join(","))}&subject=${encodeURIComponent(
- "Attendance Alert"
- )}&body=${encodeURIComponent(
- "This is a reminder regarding your recent attendance. Please make sure to attend upcoming classes."
- )}`;
-
- // ---- Summary: top movers (by attendance change), computed client-side ----
- const topMovers = useMemo(() => {
- if (!data) return { improved: [], declined: [] };
- const withChange = data.students.map((s: any) => ({
- name: s.name,
- change: round1((s.attendancePct?.currMonth ?? 0) - (s.attendancePct?.prevMonth ?? 0)),
- }));
- const sorted = [...withChange].sort((a, b) => b.change - a.change);
- return {
- improved: sorted.slice(0, 5),
- declined: [...sorted].reverse().slice(0, 5),
- };
- }, [data]);
-
- function round1(n: number) {
- return Math.round(n * 10) / 10;
- }
-
- const donutData = data
- ? [
- {
- name: "Good Standing (75%+)",
- value: attendanceBuckets.above75,
- color: BUCKET_COLORS.above75,
- },
- {
- name: "Satisfactory (50-74%)",
- value: attendanceBuckets.to74,
- color: BUCKET_COLORS.to74,
- },
- {
- name: "Needs Attention (30-49%)",
- value: attendanceBuckets.to49,
- color: BUCKET_COLORS.to49,
- },
- {
- name: "Critical Risk (<30%)",
- value: attendanceBuckets.below30,
- color: BUCKET_COLORS.below30,
- },
- ]
- : [];
-
- const compareBarData = data
- ? [
- { name: data.monthsUsed?.previous || "Previous", value: data.classAveragePrevMonth },
- { name: data.monthsUsed?.current || "Current", value: data.classAverageCurrMonth },
- ]
- : [];
-
- return (
-
- {/* HEADER */}
-
-
-
Class / Section Analysis
- {computedAt && (
-
Last synced {new Date(computedAt).toLocaleString()}
- )}
-
-
-
- {syncing ? "Syncing..." : "Sync now"}
-
-
-
-
+ const previousAverage = students.length ? round1(students.reduce((sum, s) => sum + s.attendancePct.prevMonth, 0) / students.length) : 0;
+ const currentAverage = students.length ? round1(students.reduce((sum, s) => sum + s.attendancePct.currMonth, 0) / students.length) : 0;
+ const averageChange = round1(currentAverage - previousAverage);
+ const improvingCount = students.filter((s) => s.attendancePct.trend === "Increasing").length;
+ const filteredStudents = useMemo(() => students.filter((s) => s.name.toLowerCase().includes(search.toLowerCase())), [students, search]);
+ const riskResults = useMemo(() => students.filter((s) => { const attendance = riskMonth === "current" ? s.attendancePct.currMonth : s.attendancePct.prevMonth; return attendance >= lowerBound && attendance <= upperBound && (riskTrendFilter === "All" || s.attendancePct.trend === riskTrendFilter); }), [students, lowerBound, upperBound, riskTrendFilter, riskMonth]);
+ const riskEmails = riskResults.map((s) => s.email).filter(Boolean);
+ const riskLowCount = riskResults.filter((s) => (riskMonth === "current" ? s.attendancePct.currMonth : s.attendancePct.prevMonth) < 50).length;
+ const riskDecreasingCount = riskResults.filter((s) => s.attendancePct.trend === "Decreasing").length;
+ const trendData = [{ name: "Increasing", count: data?.trendCounts.increasing || 0, color: "#16a56a" }, { name: "Decreasing", count: data?.trendCounts.decreasing || 0, color: "#ef4444" }, { name: "Stable", count: data?.trendCounts.stable || 0, color: "#4d75d0" }];
+ const attendanceDistribution = [{ name: "Below 30%", count: data?.attendanceBuckets.below30 || 0, color: "#ef4444" }, { name: "30% to 49%", count: data?.attendanceBuckets.to49 || 0, color: "#f97316" }, { name: "50% to 74%", count: data?.attendanceBuckets.to74 || 0, color: "#f59e0b" }, { name: "75% and above", count: data?.attendanceBuckets.above75 || 0, color: "#15966a" }];
+ function openRisk(options: { trend?: string; lower?: number; upper?: number }) { setRiskTrendFilter(options.trend || "All"); setLowerBound(options.lower ?? 0); setUpperBound(options.upper ?? 100); setView("risk"); }
+ async function copyEmails() { try { await navigator.clipboard.writeText(riskEmails.join("; ")); setCopied(true); setTimeout(() => setCopied(false), 1800); } catch {} }
+
+ return
+
+
+
Class / Section Analysis {computedAt && • Last synced {new Date(computedAt).toLocaleString()} } loadAnalysis(true)} disabled={syncing}>
- {(["trend", "risk", "summary"] as AttendanceView[]).map((v) => (
- setView(v)}
- className={`text-sm px-4 py-2 rounded-lg font-medium capitalize ${
- view === v ? "bg-gray-900 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"
- }`}
- >
- {v === "risk" ? "At Risk" : v}
-
- ))}
-
-
- {error && {error}
}
- {loading && !data && Loading attendance analysis...
}
-
- {data && view === "trend" && (
- <>
-
-
Attendance Trend
-
- Compare attendance between two months and identify increasing, decreasing, and stable students.
-
-
- Trend Comparison Settings
-
-
- First Month
- setPreviousMonth(e.target.value)}
- className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-900 bg-white"
- >
- Select month
- {availableMonths.map((m: string) => (
-
- {m}
-
- ))}
-
-
-
- Second Month
- setCurrentMonth(e.target.value)}
- className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-900 bg-white"
- >
- Select month
- {availableMonths.map((m: string) => (
-
- {m}
-
- ))}
-
-
-
- Trend Criteria (%)
-
-
- Apply Comparison
-
-
-
- Trend calculation: a change of{" "}
- ±{trendCriteria} percentage points or more is
- classified as Increasing or Decreasing. Smaller changes are classified as Stable.
-
-
-
-
-
- Student Trend Analysis
-
-
-
-
- Name
- {data.monthsUsed?.previous || "Month 1"}
- {data.monthsUsed?.current || "Month 2"}
- Change
- Trend
-
-
-
- {data.students.map((student: any) => {
- const previous = student.attendancePct?.prevMonth ?? 0;
- const current = student.attendancePct?.currMonth ?? 0;
- const change = round1(current - previous);
- const trend = student.attendancePct?.trend || "Stable";
- return (
-
- {student.name}
- {previous}%
- {current}%
- 0 ? "text-emerald-600" : change < 0 ? "text-red-500" : "text-gray-500"
- }`}
- >
- {change > 0 ? "+" : ""}
- {change}%
-
-
-
- {trend}
-
-
-
- );
- })}
-
-
-
-
-
-
- Trend Distribution
-
-
-
-
-
-
-
- Attendance Distribution
-
-
-
-
-
-
-
-
At Risk Students
-
- Filter students by attendance range and trend, then copy or email the list directly.
-
-
- Filter Criteria
-
-
- Lower Bound (%)
-
-
- Upper Bound (%)
-
-
- Trend
- setRiskTrendFilter(e.target.value)}
- className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-900 bg-white"
- >
- All
- Increasing
- Decreasing
- Stable
-
-
-
- Month
- setRiskMonth(e.target.value as "previous" | "current")}
- className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-900 bg-white"
- >
- {data.monthsUsed?.current || "Current month"}
- {data.monthsUsed?.previous || "Previous month"}
-
-
-
- Note: filtering only works across the two months currently loaded in Trend settings above — pick a
- different pair there first if you need a different month here.
-
-
-
-
-
- Filtered Students ({riskResults.length})
-
-
-
-
- Enrollment
- Name
- Email
- Attendance
- Trend
-
-
-
- {riskResults.map((s: any) => (
-
- {s.enrollmentNo}
- {s.name}
- {s.email || "—"}
-
- {riskMonth === "current" ? s.attendancePct?.currMonth : s.attendancePct?.prevMonth}%
-
- {s.attendancePct?.trend}
-
- ))}
- {riskResults.length === 0 && (
-
-
- No students match this filter.
-
-
- )}
-
-
-
-
-
-
- Copy to Mail
-
-
- {copied ? "Copied!" : "Copy Emails"}
-
-
-
-
- Send Alert Emails
-
- Opens your default email app with all {riskEmails.length} filtered students BCC'd, and a starter
- subject/message you can edit before sending.
-
-
- Send Alert Emails ↗
-
-
-
-
Attendance Summary
-
Overall class attendance health at a glance.
-
- 0 ? "+" : ""}${data.overallTrendPct}%`}
- positive={data.overallTrendPct >= 0}
- />
-
-
-
-
- Attendance Breakdown
-
-
-
- {donutData.map((entry, i) => (
- |
- ))}
-
-
-
-
-
-
- Class Average: Previous vs Current
-
-
-
-
-
-
-
- Core Summary
-
-
-
- Good Standing (≥75%)
- {data.attendanceBuckets.above75}
-
-
- Satisfactory (50-74%)
- {data.attendanceBuckets.to74}
-
-
- Needs Attention (30-49%)
- {data.attendanceBuckets.to49}
-
-
- Critical Risk (<30%)
- {data.attendanceBuckets.below30}
-
-
-
-
-
-
- Attendance Shifts
-
-
-
- Improving Students
-
- {data.trendCounts?.increasing ?? 0}
-
-
-
- Declining Students
- {data.trendCounts?.decreasing ?? 0}
-
-
- Stable Students
- {data.trendCounts?.stable ?? 0}
-
-
-
-
-
-
- Top 5 Most Improved
-
- {topMovers.improved.map((s, i) => (
-
-
- {i + 1}. {s.name}
-
-
- {s.change > 0 ? "+" : ""}
- {s.change}%
-
-
- ))}
-
-
-
-
- Top 5 Critical Decliners
-
- {topMovers.declined.map((s, i) => (
-
-
- {i + 1}. {s.name}
-
-
- {s.change > 0 ? "+" : ""}
- {s.change}%
-
-
- ))}
-
-
-
- );
+
setView("trend")}>Trend setView("risk")}>At Risk
+ {error &&
}
+ {loading && !data &&
Loading attendance analysis...
}
+ {data && view === "trend" && <>
+
Attendance Trend Compare attendance between two months and identify increasing, decreasing, and stable students.
+
Trend Comparison Settings First Month setPreviousMonth(e.target.value)}>{availableMonths.map((month) => {month} )}
Second Month setCurrentMonth(e.target.value)}>{availableMonths.map((month) => {month} )}
Trend Criteria (%)
loadAnalysis(false, previousMonth, currentMonth, trendCriteria)} disabled={loading || !previousMonth || !currentMonth || previousMonth === currentMonth}> Trend calculation: a change of
±{trendCriteria} percentage points or more is Increasing or Decreasing.
+
Student Name {data.monthsUsed.previous || "Month 1"} {data.monthsUsed.current || "Month 2"} Change Trend {filteredStudents.map((student) => { const previous = student.attendancePct.prevMonth; const current = student.attendancePct.currMonth; const change = round1(current - previous); const trend = student.attendancePct.trend; return {initials(student.name)} {student.name}{previous}% {current}% 0 ? "change-up" : change < 0 ? "change-down" : ""}>{change > 0 ? "+" : ""}{change}% {trend === "Increasing" ? "↑ " : trend === "Decreasing" ? "↓ " : "− "}{trend}
openRisk({ trend: entry?.name || "All" })} /> { if (entry?.name === "Below 30%") openRisk({ lower: 0, upper: 29.999 }); else if (entry?.name === "30% to 49%") openRisk({ lower: 30, upper: 49.999 }); else if (entry?.name === "50% to 74%") openRisk({ lower: 50, upper: 74.999 }); else openRisk({ lower: 75, upper: 100 }); }} />
+ }
+ {data && view === "risk" && <>
At Risk Students Find students needing attention using attendance range and trend filters.
Filter Criteria Narrow the list before copying addresses or sending alerts.
{ setLowerBound(0); setUpperBound(100); setRiskTrendFilter("All"); setRiskMonth("current"); }}>
Filtered Students {riskResults.length} Students Student Enrollment Attendance Trend Email {riskResults.length ? riskResults.map((student) => { const attendance = riskMonth === "current" ? student.attendancePct.currMonth : student.attendancePct.prevMonth; const trend = student.attendancePct.trend; return {initials(student.name)} {student.name}{student.enrollmentNo} {attendance}% {trend} {student.email || "—"} No students match the current filters.
}
+
+
{icon}
{label} {value} {change !== undefined && {change > 0 ? "↑ +" : change < 0 ? "↓ " : ""}{change}% }
{detail &&
{detail} }
onBarClick(data[index])}>{data.map((entry) => | )}
= {
- Excellent: "#10b981",
- Good: "#3b82f6",
+ Excellent: "#2563eb",
+ Good: "#16a34a",
"Needs Attention": "#f59e0b",
"Critical Risk": "#ef4444",
};
+const tierForPct = (pct: number) =>
+ pct >= 80 ? "Excellent" : pct >= 60 ? "Good" : pct >= 40 ? "Needs Attention" : "Critical Risk";
+
+const tierClass = (tier: string) =>
+ tier === "Excellent"
+ ? "bg-blue-50 text-blue-700"
+ : tier === "Good"
+ ? "bg-green-50 text-green-700"
+ : tier === "Needs Attention"
+ ? "bg-amber-50 text-amber-700"
+ : "bg-red-50 text-red-600";
+
+const formatMark = (mark: number) => (Number.isInteger(mark) ? mark : mark.toFixed(1));
+
export default function SectionOverallPage() {
const router = useRouter();
const { sectionId } = router.query;
-
const [data, setData] = useState(null);
const [sheetId, setSheetId] = useState(null);
const [computedAt, setComputedAt] = useState("");
const [loading, setLoading] = useState(true);
const [syncing, setSyncing] = useState(false);
const [error, setError] = useState("");
+ const [lower, setLower] = useState(0);
+ const [upper, setUpper] = useState(40);
+ const [draftLower, setDraftLower] = useState(0);
+ const [draftUpper, setDraftUpper] = useState(40);
+ const [sortDirection, setSortDirection] = useState("none");
+ const [draftSortDirection, setDraftSortDirection] = useState("none");
async function loadAnalysis(sync = false) {
- if (!sectionId || typeof sectionId !== "string") return;
- if (sync) setSyncing(true);
- else setLoading(true);
+ if (typeof sectionId !== "string") return;
+ sync ? setSyncing(true) : setLoading(true);
setError("");
try {
const res = await fetch(`/api/analysis/section/${sectionId}/overall${sync ? "?sync=1" : ""}`);
@@ -69,7 +90,7 @@ export default function SectionOverallPage() {
return;
}
setData(json.data);
- setComputedAt(json.computedAt);
+ setComputedAt(json.computedAt || "");
setSheetId(json.sheetId || null);
} catch (e: any) {
setError(e.message || "Failed to load overall analysis");
@@ -81,115 +102,364 @@ export default function SectionOverallPage() {
useEffect(() => {
loadAnalysis();
- // eslint-disable-next-line react-hooks/exhaustive-deps
}, [sectionId]);
- const tierCounts = data
- ? data.students.reduce(
- (acc, s) => {
- acc[s.overallGrade] = (acc[s.overallGrade] || 0) + 1;
- return acc;
- },
- {} as Record
- )
- : {};
+ // The API already returns only THEORY subjects. Keep the subject identity from
+ // the database/Google-Sheets analysis instead of hard-coding abbreviations here.
+ const theorySubjects = useMemo(() => data?.subjects.slice(0, 6) || [], [data]);
+
+ const rows = useMemo(() => {
+ if (!data) return [];
+
+ return data.students.map((student, originalIndex) => {
+ const subjects: RowSubject[] = theorySubjects.map((subject) => {
+ const score = student.subjects.find(
+ (item) => item.subjectId === subject.id || item.code === subject.code
+ );
+ const mark = Number(score?.basicInternal || 0);
+ const max = Number(score?.basicMax || 0);
+ const pct = max > 0 ? (mark / max) * 100 : 0;
+ return {
+ ...subject,
+ mark,
+ max,
+ pct,
+ grade: tierForPct(pct),
+ };
+ });
+
+ const total = subjects.reduce((sum, subject) => sum + subject.mark, 0);
+ const totalMax = subjects.reduce((sum, subject) => sum + subject.max, 0);
+ const average = subjects.length ? total / subjects.length : 0;
+ const averageMax = subjects.length ? totalMax / subjects.length : 0;
+ const overallPct = averageMax > 0 ? (average / averageMax) * 100 : 0;
+
+ return {
+ ...student,
+ originalIndex,
+ subjects,
+ total,
+ totalMax,
+ average,
+ averageMax,
+ overallPct,
+ tier: tierForPct(overallPct),
+ };
+ });
+ }, [data, theorySubjects]);
+
+ const filteredRows = useMemo(() => {
+ const lo = Math.max(0, Math.min(40, Math.min(lower, upper)));
+ const hi = Math.max(0, Math.min(40, Math.max(lower, upper)));
+ const result = rows.filter((row) => row.average >= lo && row.average <= hi);
+
+ if (sortDirection === "none") {
+ return [...result].sort((a, b) => a.originalIndex - b.originalIndex);
+ }
+
+ return [...result].sort((a, b) =>
+ sortDirection === "asc"
+ ? a.average - b.average || a.name.localeCompare(b.name)
+ : b.average - a.average || a.name.localeCompare(b.name)
+ );
+ }, [rows, lower, upper, sortDirection]);
+
+ const tierCounts = useMemo(
+ () =>
+ rows.reduce((acc, row) => {
+ acc[row.tier] = (acc[row.tier] || 0) + 1;
+ return acc;
+ }, {} as Record),
+ [rows]
+ );
+
+ const classAveragePct = rows.length
+ ? rows.reduce((sum, row) => sum + row.overallPct, 0) / rows.length
+ : 0;
+ const passRate = rows.length
+ ? Math.round((rows.filter((row) => row.overallPct >= 40).length / rows.length) * 100)
+ : 0;
+ const topFive = [...rows]
+ .sort((a, b) => b.overallPct - a.overallPct || a.originalIndex - b.originalIndex)
+ .slice(0, 5);
+
+ function applyFilters() {
+ const nextLower = Math.max(0, Math.min(40, Math.min(draftLower, draftUpper)));
+ const nextUpper = Math.max(0, Math.min(40, Math.max(draftLower, draftUpper)));
+ setLower(nextLower);
+ setUpper(nextUpper);
+ setDraftLower(nextLower);
+ setDraftUpper(nextUpper);
+ setSortDirection(draftSortDirection);
+ }
+
+ function resetFilter() {
+ setDraftLower(0);
+ setDraftUpper(40);
+ setLower(0);
+ setUpper(40);
+ setDraftSortDirection("none");
+ setSortDirection("none");
+ }
return (
-
-
-
-
Class / Section Analysis
- {computedAt &&
Last synced {new Date(computedAt).toLocaleString()}
}
-
-
-
-
loadAnalysis(true)} disabled={syncing} className="text-sm bg-gray-900 text-white rounded-lg px-4 py-2 disabled:opacity-50">
- {syncing ? "Syncing..." : "Sync now"}
-
+
+
+
+
+
+
+
ClassPulse Teacher Portal
+
- {typeof sectionId === "string" &&
}
+
+
+
+
Class / Section Analysis
+ {computedAt && (
+ • Last synced {new Date(computedAt).toLocaleString()}
+ )}
+
+
+ loadAnalysis(true)} disabled={syncing}>
+
+
+
- {error && {error}
}
- {loading && !data && Loading overall analysis...
}
+ {typeof sectionId === "string" &&
-
Overall Analysis
-
- Internal marks combined across all {data.subjects.length} subjects: {data.subjects.map((s) => s.name).join(", ")}.
-
+ {error && (
+
+ {error}
+ )}
+ {loading && !data && (
+
Loading overall analysis...
+ )}
-
- Note: each subject's tier/moderation rules aren't configured yet, so this uses each subject's basic
- internal marks (as a percentage of that subject's own max) averaged across all subjects.
-
+ {data && (
+ <>
+
+
+ Class Average
+ {classAveragePct.toFixed(1)}%
+ across all 6 theory subjects
+
+
+ Students
+ {rows.length}
+ students assessed
+
+
+ Pass Rate
+ {passRate}%
+ students at or above 40%
+
+
-
-
+
+
+
+
Filters
+
Filter by average marks and sort.
+
+
+
+ Lower bound
+
+
+ Upper bound
+
+
+ Sort
+ setDraftSortDirection(e.target.value as SortDirection)}
+ >
+ No sort
+ High to Low
+ Low to High
+
+
+ Apply
+
+
+
+
+
+
+
+
Filtered Students
+
+ Showing {filteredRows.length} of {rows.length} students.
+
+
+
+
+ 6 Theory Subjects
+
+
+ Reset
+
+
+
-
- All Students
-
-
-
-
- Name
- Attendance
- Overall %
- Grade
-
-
-
- {[...data.students]
- .sort((a, b) => b.overallPct - a.overallPct)
- .map((s) => (
-
- {s.name}
- {s.overallAttendance}%
- {s.overallPct}%
-
-
+
+
+ {sortDirection !== "none" &&
+
+
+ {sortDirection !== "none" && Rank }
+ Student
+ {theorySubjects.map((subject) => (
+
+ {subject.code || subject.name}
+
+ ))}
+ Total
+ Average
+ %AGE
+ Grade
+
+
+
+ {filteredRows.map((row, index) => (
+
+ {sortDirection !== "none" && (
+ {index + 1}
+ )}
+
+ {row.name}
+
+ {row.subjects.map((subject) => (
+
+ {formatMark(subject.mark)}
+
+ ))}
+
+ {formatMark(row.total)}
+
+
+ {formatMark(row.average)}
+
+
+ {row.overallPct.toFixed(0)}%
+
+
+
+ {row.tier}
+
))}
-
-
-
+
+
-
- Grade Distribution
-
- ({
- name,
- count: tierCounts[name] || 0,
- }))}
- >
-
- {["Excellent", "Good", "Needs Attention", "Critical Risk"].map((name, i) => (
- |
- ))}
-
-
-
-
-
+
+ )}
+
= {
+ Excellent: { text: "text-blue-700", bg: "bg-blue-50", border: "border-blue-100", dot: "bg-blue-500" },
+ Good: { text: "text-emerald-700", bg: "bg-emerald-50", border: "border-emerald-100", dot: "bg-emerald-500" },
+ "Needs Attention": { text: "text-amber-700", bg: "bg-amber-50", border: "border-amber-100", dot: "bg-amber-500" },
+ "Critical Risk": { text: "text-red-700", bg: "bg-red-50", border: "border-red-100", dot: "bg-red-500" },
+};
+
+interface SubjectScore {
+ subjectId: string;
+ code: string;
+ name: string;
+ attendance: number;
+ midsem1: number;
+ midsem2: number;
+ combined: number;
+ assignment?: { submitted: number; total: number; mark: number };
+ presentation?: { raw: number; mark: number };
+ basicInternal: number;
+ moderatedInternal: number;
+ basicMax: number;
+ grade: string;
+}
+
+interface Student {
enrollmentNo: string;
name: string;
email: string;
overallPct: number;
overallAttendance: number;
overallGrade: string;
- subjects: {
- subjectId: string;
- code: string;
- name: string;
- attendance: number;
- midsem1: number;
- midsem2: number;
- combined: number;
- basicInternal: number;
- moderatedInternal: number;
- basicMax: number;
- grade: string;
- }[];
+ subjects: SubjectScore[];
}
interface OverallData {
subjects: { id: string; name: string; code: string }[];
- students: OverallStudent[];
+ students: Student[];
classAverageOverallPct: number;
}
+const formatNumber = (value: number) => (Number.isInteger(value) ? String(value) : value.toFixed(1));
+const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
+
+function studentAverage(student: Student) {
+ const subjects = student.subjects.slice(0, SUBJECT_COUNT);
+ return subjects.length
+ ? subjects.reduce((sum, subject) => sum + (Number(subject.basicInternal) || 0), 0) / subjects.length
+ : 0;
+}
+
+function gradeFromAverage(average: number): Grade {
+ const pct = (average / SUBJECT_MAX) * 100;
+ if (pct >= 80) return "Excellent";
+ if (pct >= 60) return "Good";
+ if (pct >= 40) return "Needs Attention";
+ return "Critical Risk";
+}
+
+function GradePill({ grade, large = false }: { grade: Grade; large?: boolean }) {
+ const tone = GRADE_TONE[grade];
+ return (
+
+
+ );
+}
+
export default function SectionStudentReportPage() {
const router = useRouter();
const { sectionId } = router.query;
@@ -43,13 +99,14 @@ export default function SectionStudentReportPage() {
const [syncing, setSyncing] = useState(false);
const [error, setError] = useState("");
const [search, setSearch] = useState("");
- const [selectedEnrollment, setSelectedEnrollment] = useState("");
+ const [gradeFilter, setGradeFilter] = useState("All");
+ const [selectedEnrollment, setSelectedEnrollment] = useState("");
async function loadAnalysis(sync = false) {
- if (!sectionId || typeof sectionId !== "string") return;
- if (sync) setSyncing(true);
- else setLoading(true);
+ if (typeof sectionId !== "string") return;
+ sync ? setSyncing(true) : setLoading(true);
setError("");
+
try {
const res = await fetch(`/api/analysis/section/${sectionId}/overall${sync ? "?sync=1" : ""}`);
const json = await res.json();
@@ -57,10 +114,22 @@ export default function SectionStudentReportPage() {
setError(json.detail ? `${json.error}: ${json.detail}` : json.error || "Failed to load student report");
return;
}
+
+ const needsDetailedData = !sync && json.data?.students?.some((student: Student) =>
+ student.subjects?.some((subject) => !subject.assignment || !subject.presentation)
+ );
+
+ if (needsDetailedData) {
+ await loadAnalysis(true);
+ return;
+ }
+
setData(json.data);
- setComputedAt(json.computedAt);
+ setComputedAt(json.computedAt || "");
setSheetId(json.sheetId || null);
- if (json.data?.students?.[0]) setSelectedEnrollment(json.data.students[0].enrollmentNo);
+ if (json.data?.students?.length && !selectedEnrollment) {
+ setSelectedEnrollment(json.data.students[0].enrollmentNo);
+ }
} catch (e: any) {
setError(e.message || "Failed to load student report");
} finally {
@@ -76,126 +145,301 @@ export default function SectionStudentReportPage() {
const students = data?.students || [];
- const filteredList = useMemo(() => {
- if (!search.trim()) return students;
- const q = search.trim().toLowerCase();
- return students.filter((s) => s.name.toLowerCase().includes(q) || s.enrollmentNo.includes(q));
- }, [students, search]);
+ const studentsWithGrades = useMemo(
+ () => students.map((student) => ({
+ ...student,
+ reportAverage: studentAverage(student),
+ reportGrade: gradeFromAverage(studentAverage(student)),
+ })),
+ [students]
+ );
+
+ const classGradeCounts = useMemo(() => {
+ return GRADE_ORDER.reduce((acc, grade) => {
+ acc[grade] = studentsWithGrades.filter((student) => student.reportGrade === grade).length;
+ return acc;
+ }, {} as Record);
+ }, [studentsWithGrades]);
+
+ const filteredStudents = useMemo(() => {
+ const query = search.trim().toLowerCase();
+ return studentsWithGrades.filter((student) => {
+ const matchesSearch = !query || student.name.toLowerCase().includes(query) || student.enrollmentNo.includes(query);
+ const matchesGrade = gradeFilter === "All" || student.reportGrade === gradeFilter;
+ return matchesSearch && matchesGrade;
+ });
+ }, [studentsWithGrades, search, gradeFilter]);
+
+ useEffect(() => {
+ if (!selectedEnrollment && students[0]) setSelectedEnrollment(students[0].enrollmentNo);
+ if (selectedEnrollment && !students.some((student) => student.enrollmentNo === selectedEnrollment) && students[0]) {
+ setSelectedEnrollment(students[0].enrollmentNo);
+ }
+ }, [students, selectedEnrollment]);
+
+ const selected = studentsWithGrades.find((student) => student.enrollmentNo === selectedEnrollment) || filteredStudents[0];
+
+ const studentStats = useMemo(() => {
+ if (!selected) return null;
+
+ const subjects = selected.subjects.slice(0, SUBJECT_COUNT).map((subject) => {
+ const assignment = subject.assignment?.mark ?? 0;
+ const presentation = subject.presentation?.mark ?? 0;
+ const attendance = clamp(((Number(subject.attendance) || 0) / 100) * 10, 0, 10);
+ const midsem1 = clamp(((Number(subject.midsem1) || 0) / 30) * 10, 0, 10);
+ const midsem2 = clamp(((Number(subject.midsem2) || 0) / 30) * 10, 0, 10);
+ const basicInternal = Number(subject.basicInternal) || assignment + presentation + attendance + midsem1 + midsem2;
+ const moderatedInternal = Number(subject.moderatedInternal);
+
+ return {
+ ...subject,
+ assignment,
+ presentation,
+ attendanceMark: attendance,
+ midsem1Mark: midsem1,
+ midsem2Mark: midsem2,
+ basicInternal,
+ moderatedInternal: Number.isFinite(moderatedInternal) ? moderatedInternal : basicInternal,
+ grade: gradeFromAverage(basicInternal),
+ };
+ });
- const selected = students.find((s) => s.enrollmentNo === selectedEnrollment);
+ const total = subjects.reduce((sum, subject) => sum + subject.basicInternal, 0);
+ const average = subjects.length ? total / subjects.length : 0;
+
+ const ranked = [...studentsWithGrades].sort(
+ (a, b) => b.reportAverage - a.reportAverage || a.name.localeCompare(b.name)
+ );
+ const rankIndex = Math.max(0, ranked.findIndex((item) => item.enrollmentNo === selected.enrollmentNo));
+
+ const highest = [...subjects].sort((a, b) => b.basicInternal - a.basicInternal)[0];
+ const lowest = [...subjects].sort((a, b) => a.basicInternal - b.basicInternal)[0];
+
+ return {
+ subjects,
+ total,
+ average,
+ averagePct: (average / SUBJECT_MAX) * 100,
+ rank: rankIndex + 1,
+ highest,
+ lowest,
+ grade: gradeFromAverage(average),
+ };
+ }, [selected, studentsWithGrades]);
+
+ const navigateStudent = (direction: -1 | 1) => {
+ if (!filteredStudents.length || !selected) return;
+ const index = filteredStudents.findIndex((student) => student.enrollmentNo === selected.enrollmentNo);
+ const nextIndex = Math.min(filteredStudents.length - 1, Math.max(0, index + direction));
+ setSelectedEnrollment(filteredStudents[nextIndex].enrollmentNo);
+ };
return (
-
-
+
+
-
Class / Section Analysis
- {computedAt &&
Last synced {new Date(computedAt).toLocaleString()}
}
+
Class / Section Analysis
+ {computedAt &&
Last synced {new Date(computedAt).toLocaleString()}
}
loadAnalysis(true)} disabled={syncing} className="text-sm bg-gray-900 text-white rounded-lg px-4 py-2 disabled:opacity-50">
+ loadAnalysis(true)}
+ disabled={syncing}
+ className="inline-flex items-center gap-2 rounded-xl bg-[#3f2a8f] px-4 py-2.5 text-sm font-medium text-white shadow-[0_8px_22px_rgba(63,42,143,.18)] disabled:opacity-60"
+ >
+
{typeof sectionId === "string" &&
}
-
- {error &&
{error}
}
- {loading && !data &&
Loading student report...
}
+ {error &&
{error}
}
+ {loading && !data &&
Loading student report...
}
{data && (
<>
-
-
Student Report
-
Full report card across all {data.subjects.length} subjects for one student.
+
+
Student Report
+
Individual performance report across {Math.min(SUBJECT_COUNT, data.subjects.length)} theory subjects.
-
-
-
- {filteredList.map((s) => (
+
+
+
+
+
Students
+ {students.length}
+
+
+
+
+ setGradeFilter("All")} label={`All ${students.length}`} />
+ {GRADE_ORDER.map((grade) => (
+ setGradeFilter(grade)}
+ label={`${grade} ${classGradeCounts[grade] || 0}`}
+ />
+ ))}
+
+
+ {filteredStudents.map((student) => (
setSelectedEnrollment(s.enrollmentNo)}
- className={`w-full text-left text-sm px-3 py-2 rounded-lg ${
- s.enrollmentNo === selectedEnrollment ? "bg-gray-900 text-white" : "hover:bg-gray-50 text-gray-700"
- }`}
+ key={student.enrollmentNo}
+ onClick={() => setSelectedEnrollment(student.enrollmentNo)}
+ className={`w-full rounded-xl px-3 py-3 text-left transition ${student.enrollmentNo === selected?.enrollmentNo ? "bg-[#4a32a0] text-white shadow-sm" : "hover:bg-slate-50 text-slate-700"}`}
>
- {s.name}
-
- {s.enrollmentNo} · {s.overallGrade}
-
+
+
+ {student.name}
+ {student.enrollmentNo}
+
+
))}
- {filteredList.length === 0 &&
No matches.
}
+ {!filteredStudents.length &&
No students match the current filters.
}
+
+ navigateStudent(-1)} className="rounded-lg border border-slate-200 p-1.5 text-slate-500 hover:bg-slate-50">
+ {filteredStudents.length ? "Student list" : "No results"}
+ navigateStudent(1)} className="rounded-lg border border-slate-200 p-1.5 text-slate-500 hover:bg-slate-50">
-
+
-
- {!selected && Select a student to see their report card.
}
- {selected && (
-
-
-
{selected.name}
-
-
- {selected.enrollmentNo} · {selected.email || "no email on file"}
-
-
-
-
-
-
+ {selected && studentStats && (
+
+
+
+
+
+ {selected.name.split(/\s+/).map((part) => part[0]).slice(0, 2).join("").toUpperCase()}
+
+
+
{selected.name}
+
Student report · {Math.min(SUBJECT_COUNT, selected.subjects.length)} theory subjects
+
+
+
+
+
+
Rank by average
+
{studentStats.rank} / {students.length}
+
+
- Per-Subject Breakdown
+
+
+
+
+
+
Subject Performance (Theory Subjects)
+
Internal marks distribution for each subject. Every subject contributes 40 marks.
+
-
+
+
+
-
- Subject
- Attendance
- Midsem 1
- Midsem 2
- Combined
- Internal (Basic)
- Grade
+
+ Subject
+ Assignment / 5
+ Presentation / 5
+ Attendance / 10
+ Midsem 1 / 10
+ Midsem 2 / 10
+ Basic Internal / 40
+ Moderated Internal / 40
+ Grade
- {selected.subjects.map((sub) => (
-
- {sub.name}
- {sub.attendance}%
- {sub.midsem1}
- {sub.midsem2}
- {sub.combined}
-
- {sub.basicInternal}/{sub.basicMax}
-
-
-
+ {studentStats.subjects.map((subject) => (
+
+ {subject.name}
+ {formatNumber(subject.basicInternal)} / 40
+ {formatNumber(subject.moderatedInternal)} / 40
+
))}
-
- )}
-
+
+ Assignment, presentation, attendance, Midsem 1 and Midsem 2 are shown as their weighted contribution to the 40-mark internal total. Moderated Internal is shown separately from the basic internal marks.
+
+
+
+ )}
)}
);
}
+
+function FilterPill({ active, onClick, label }: { active: boolean; onClick: () => void; label: string }) {
+ return (
+
+ {label}
+
+ );
+}
+
+function MarkCell({ value, max }: { value: number; max: number }) {
+ return (
+
+ {formatNumber(value)}
+ / {max}
+
+ );
+}
+
+function Metric({ icon, label, value, sub }: { icon: React.ReactNode; label: string; value: string; sub: string }) {
+ return (
+
+
+ {icon}
+ {label}
+
+
{value}
+
{sub}
+
${esc(label)} ${esc(value)}
${esc(detail)}
`;
+ return card;
+}
+
+function installHero(payload: AttendancePayload) {
+ const hero = document.querySelector(".analysis-hero") as HTMLElement | null;
+ if (!hero) return;
+ hero.classList.add("classpulse-trend-hero");
+ Array.from(hero.querySelectorAll(":scope > .analysis-metric")).forEach((x) => x.remove());
+ const copy = hero.querySelector(":scope > .analysis-hero-copy") as HTMLElement | null;
+ if (copy) copy.classList.add("classpulse-trend-hero-copy");
+ let metrics = hero.querySelector(":scope > .classpulse-trend-metrics") as HTMLElement | null;
+ if (!metrics) { metrics = document.createElement("div"); metrics.className = "classpulse-trend-metrics"; hero.appendChild(metrics); }
+ metrics.innerHTML = "";
+ const students = payload.students || [];
+ const prev = students.length ? students.reduce((s, x) => s + Number(x.attendancePct.prevMonth || 0), 0) / students.length : 0;
+ const curr = students.length ? students.reduce((s, x) => s + Number(x.attendancePct.currMonth || 0), 0) / students.length : 0;
+ const improving = students.filter((x) => x.attendancePct.trend === "Increasing").length;
+ const highest = [...students].sort((a, b) => Number(b.attendancePct.currMonth || 0) - Number(a.attendancePct.currMonth || 0))[0];
+ metrics.appendChild(makeMetric(`Class Average (${payload.monthsUsed?.previous || "Previous"})`, fmt(prev), "Previous month attendance", "#2563eb"));
+ metrics.appendChild(makeMetric(`Class Average (${payload.monthsUsed?.current || "Current"})`, fmt(curr), `${fmt(curr - prev)} change from previous month`, "#16a34a"));
+ metrics.appendChild(makeMetric("Students Improving", String(improving), `${students.length ? fmt((improving / students.length) * 100) : "0%"} of total students`, "#f59e0b"));
+ metrics.appendChild(makeMetric("Highest Attendance Student", highest ? fmt(Number(highest.attendancePct.currMonth || 0)) : "—", highest?.name || "Highest current-month attendance", "#7c3aed"));
+}
+
+function installTable(payload: AttendancePayload) {
+ const panel = document.querySelector(".analysis-table-panel") as HTMLElement | null;
+ const oldTable = panel?.querySelector("table.analysis-table") as HTMLTableElement | null;
+ if (!panel || !oldTable) return;
+ const students = payload.students || [];
+ const oldSearch = panel.querySelector(".analysis-panel-head input") as HTMLInputElement | null;
+ const search = oldSearch?.value || "";
+ const filtered = students.filter((s) => s.name.toLowerCase().includes(search.toLowerCase()) || s.enrollmentNo.toLowerCase().includes(search.toLowerCase()));
+ oldTable.className = "analysis-table classpulse-trend-table";
+ oldTable.innerHTML = `S.No. Student Name Enrollment No. ${esc(payload.monthsUsed?.previous || "Month 1")} ${esc(payload.monthsUsed?.current || "Month 2")} Change Trend ${filtered.map((s, i) => { const prev = Number(s.attendancePct.prevMonth || 0); const curr = Number(s.attendancePct.currMonth || 0); const change = Math.round((curr - prev) * 10) / 10; const trend = s.attendancePct.trend; const badge = trend === "Increasing" ? "trend-up" : trend === "Decreasing" ? "trend-down" : "trend-stable"; return `${i + 1} ${esc(initials(s.name))} ${esc(s.name)}${esc(s.enrollmentNo)} ${fmt(prev)} ${fmt(curr)} ${change > 0 ? "+" : ""}${fmt(change)} ${trend === "Increasing" ? "↑ " : trend === "Decreasing" ? "↓ " : "− "}${esc(trend)} `;
+ const wrap = panel.querySelector(".analysis-table-wrap") as HTMLElement | null;
+ if (wrap) wrap.classList.add("classpulse-trend-table-wrap");
+ panel.querySelector(".classpulse-trend-pagination")?.remove();
+ const count = panel.querySelector(".analysis-count") as HTMLElement | null;
+ if (count) count.textContent = `${filtered.length} Students`;
+}
+
+function installCharts() {
+ const stack = document.querySelector(".analysis-right-stack") as HTMLElement | null;
+ if (stack) stack.classList.add("classpulse-trend-chart-stack");
+}
+
+export default function SubjectAnalysisAttendanceTrendFixedPage() {
+ useEffect(() => {
+ let dead = false;
+ let timer: number | undefined;
+ let running = false;
+ const run = async () => {
+ if (running || dead) return;
+ running = true;
+ const observer = (window as any).__subjectAttendanceObserver as MutationObserver | undefined;
+ observer?.disconnect();
+ addStyles();
+ const id = getSubjectId();
+ if (!id) { running = false; return; }
+ try {
+ const response = await fetch(`/api/analysis/subject/${id}`);
+ if (!response.ok) return;
+ const json = await response.json();
+ if (dead) return;
+ const payload: AttendancePayload = json.data || {};
+ installHero(payload);
+ installTable(payload);
+ installCharts();
+ } catch {} finally {
+ running = false;
+ if (!dead) observer?.observe(document.body, { childList: true, subtree: true });
+ }
+ };
+ const schedule = () => { window.clearTimeout(timer); timer = window.setTimeout(run, 150); };
+ const observer = new MutationObserver(schedule);
+ (window as any).__subjectAttendanceObserver = observer;
+ observer.observe(document.body, { childList: true, subtree: true });
+ schedule();
+ return () => { dead = true; window.clearTimeout(timer); observer.disconnect(); delete (window as any).__subjectAttendanceObserver; };
+ }, []);
+ return = { Excellent: "#15966a", Good: "#4d75d0", "Needs Attention": "#f59e0b", "Critical Risk": "#ef4444" };
+const COLORS: Record = { Excellent: "#4d75d0", Good: "#15966a", "Needs Attention": "#f59e0b", "Critical Risk": "#ef4444" };
const round1 = (n: number) => Math.round(n * 10) / 10;
-const initials = (name: string) => name.split(" ").filter(Boolean).slice(0, 2).map((part) => part[0]).join("").toUpperCase();
function median(values: number[]) {
if (!values.length) return 0;
@@ -64,6 +63,11 @@ export default function SubjectAcademicPage() {
const [summaryLower, setSummaryLower] = useState("0");
const [summaryUpper, setSummaryUpper] = useState("30");
const [summarySort, setSummarySort] = useState("none");
+ const [summaryExamDraft, setSummaryExamDraft] = useState("combined");
+ const [summaryTierDraft, setSummaryTierDraft] = useState("all");
+ const [summaryLowerDraft, setSummaryLowerDraft] = useState("0");
+ const [summaryUpperDraft, setSummaryUpperDraft] = useState("30");
+ const [summarySortDraft, setSummarySortDraft] = useState("none");
async function loadAnalysis(sync = false) {
if (!subjectId || typeof subjectId !== "string") return;
@@ -89,7 +93,25 @@ export default function SubjectAcademicPage() {
const students = data?.students || [];
const statsFor = (exam: "midsem1" | "midsem2") => {
- const rows = students.map((s: any) => ({ enrollmentNo: s.enrollmentNo, name: s.name, marks: valueFor(s, exam) }));
+ const baseRows = students.map((s: any, index: number) => ({
+ sno: index + 1,
+ enrollmentNo: s.enrollmentNo,
+ name: s.name,
+ marks: valueFor(s, exam),
+ }));
+ const rankByEnrollment = new Map();
+ [...baseRows]
+ .sort((a, b) => b.marks - a.marks || a.name.localeCompare(b.name))
+ .forEach((row, index, sorted) => {
+ const previous = index > 0 ? sorted[index - 1].marks : null;
+ rankByEnrollment.set(
+ row.enrollmentNo,
+ previous === row.marks
+ ? (rankByEnrollment.get(sorted[index - 1].enrollmentNo) || index + 1)
+ : index + 1
+ );
+ });
+ const rows = baseRows.map((row) => ({ ...row, rank: rankByEnrollment.get(row.enrollmentNo) || 0 }));
const marks = rows.map((r) => r.marks);
const highest = marks.length ? Math.max(...marks) : 0;
const counts = TIERS.reduce((r, t) => ({ ...r, [t]: 0 }), {} as Record);
@@ -108,7 +130,8 @@ export default function SubjectAcademicPage() {
const midsem1 = useMemo(() => statsFor("midsem1"), [students]);
const midsem2 = useMemo(() => statsFor("midsem2"), [students]);
- const combinedRows = useMemo(() => students.map((s: any) => ({
+ const combinedRows = useMemo(() => students.map((s: any, index: number) => ({
+ sno: index + 1,
enrollmentNo: s.enrollmentNo,
name: s.name,
first: valueFor(s, "midsem1"),
@@ -116,23 +139,22 @@ export default function SubjectAcademicPage() {
combined: valueFor(s, "combined"),
max: valueFor(s, "max"),
})), [students]);
-
const combinedCounts = useMemo(() => {
const r = TIERS.reduce((a, t) => ({ ...a, [t]: 0 }), {} as Record);
combinedRows.forEach((row) => r[tierFor(row.combined)]++);
return r;
}, [combinedRows]);
-
const activeStats = view === "midsem2" ? midsem2 : midsem1;
const activeLabel = view === "midsem2" ? "Midsem 2" : "Midsem 1";
const activePie = TIERS.map((name) => ({ name, value: activeStats.counts[name], color: COLORS[name] }));
const displayedRows = selectedTier ? activeStats.rows.filter((r) => tierFor(r.marks) === selectedTier) : activeStats.rows;
+ const combinedGradeExam: ExamKey = sortOrder === "none" ? "combined" : combinedSort;
+ const combinedGradeValue = (row: typeof combinedRows[number]) => valueFor({ midsem: { first: row.first, second: row.second, combined: row.combined, max: row.max } }, combinedGradeExam);
const filteredCombinedRows = useMemo(
- () => selectedTier ? combinedRows.filter((row) => tierFor(row.combined) === selectedTier) : combinedRows,
- [combinedRows, selectedTier]
+ () => selectedTier ? combinedRows.filter((row) => tierFor(combinedGradeValue(row)) === selectedTier) : combinedRows,
+ [combinedRows, selectedTier, combinedGradeExam]
);
-
const sortedCombinedRows = useMemo(() => {
if (sortOrder === "none") return [...filteredCombinedRows];
const getValue = (row: typeof combinedRows[number]) => {
@@ -147,12 +169,10 @@ export default function SubjectAcademicPage() {
return a.name.localeCompare(b.name);
});
}, [filteredCombinedRows, combinedSort, sortOrder]);
-
const combinedRankRows = useMemo(() => [...combinedRows].sort((a, b) => b.combined - a.combined), [combinedRows]);
const combinedAverage = combinedRows.length ? round1(combinedRows.reduce((sum, row) => sum + row.combined, 0) / combinedRows.length) : 0;
const combinedHighest = combinedRows.length ? Math.max(...combinedRows.map((row) => row.combined)) : 0;
const combinedHighestNames = combinedRows.filter((row) => row.combined === combinedHighest).map((row) => row.name);
-
const summaryRows = useMemo(() => combinedRows.map((row) => {
const marks = summaryExam === "midsem1" ? row.first : summaryExam === "midsem2" ? row.second : summaryExam === "max" ? row.max : row.combined;
return { ...row, marks, tier: tierFor(marks), change: round1(row.second - row.first) };
@@ -161,10 +181,10 @@ export default function SubjectAcademicPage() {
const upper = Number(summaryUpper);
return row.marks >= (Number.isFinite(lower) ? lower : 0) && row.marks <= (Number.isFinite(upper) ? upper : MAX) && (summaryTier === "all" || row.tier === summaryTier);
}).sort((a, b) => {
- if (summarySort === "none") return 0;
+ if (summarySort === "none") return a.sno - b.sno;
return summarySort === "desc" ? b.marks - a.marks : a.marks - b.marks;
}), [combinedRows, summaryExam, summaryTier, summaryLower, summaryUpper, summarySort]);
-
+ const summaryShowRank = summarySort !== "none";
const summaryAverage = combinedRows.length ? round1(combinedRows.reduce((sum, row) => sum + row.combined, 0) / combinedRows.length) : 0;
const summaryPassRate = combinedRows.length ? Math.round(combinedRows.filter((row) => row.combined >= 12).length / combinedRows.length * 100) : 0;
const midsem1Average = midsem1.average;
@@ -172,199 +192,213 @@ export default function SubjectAcademicPage() {
const increases = [...combinedRows].map((row) => ({ ...row, change: round1(row.second - row.first) })).filter((row) => row.change > 0).sort((a, b) => b.change - a.change).slice(0, 5);
const decreases = [...combinedRows].map((row) => ({ ...row, change: round1(row.second - row.first) })).filter((row) => row.change < 0).sort((a, b) => a.change - b.change).slice(0, 5);
- return
-
-
-
-
-
Subject Analysis {computedAt && • Last synced {new Date(computedAt).toLocaleString()} }
- loadAnalysis(true)} disabled={syncing}>
-
-
- {typeof subjectId === "string" &&
- {([["midsem1", "Midsem 1"], ["midsem2", "Midsem 2"], ["combined", "Combined"], ["summary", "Summary"]] as [AcademicView, string][]).map(([k, l]) => setView(k)}>{l} )}
-
+ function applySummaryFilters() {
+ setSummaryExam(summaryExamDraft);
+ setSummaryTier(summaryTierDraft);
+ setSummaryLower(summaryLowerDraft);
+ setSummaryUpper(summaryUpperDraft);
+ setSummarySort(summarySortDraft);
+ }
- {error && {error}
}
- {loading && !data && Loading academic analysis...
}
+ function resetSummaryFilters() {
+ setSummaryExam("combined");
+ setSummaryTier("all");
+ setSummaryLower("0");
+ setSummaryUpper("30");
+ setSummarySort("none");
+ setSummaryExamDraft("combined");
+ setSummaryTierDraft("all");
+ setSummaryLowerDraft("0");
+ setSummaryUpperDraft("30");
+ setSummarySortDraft("none");
+ }
- {data && (view === "midsem1" || view === "midsem2") && <>
-
- {activeLabel} Raw Midsem marks out of 30, class statistics, and performance tiers.
-
-
- Data Sheet Pass mark: 12/30 (40%){selectedTier ? ` · Filtered: ${selectedTier}` : ""}
{selectedTier && setSelectedTier(null)}> }{displayedRows.length} Students
Student Marks Percentage Status {displayedRows.map(row => { const pass = row.marks >= 12, p = Math.round(row.marks / MAX * 100); return {initials(row.name)} {row.name}{row.marks} {p}% {pass ? "Pass" : "Fail"}
+
+
+
+
+
Subject Analysis {computedAt && • Last synced {new Date(computedAt).toLocaleString()} }
+ loadAnalysis(true)} disabled={syncing}>
+
+
+ {typeof subjectId === "string" &&
+ {([["midsem1", "Midsem 1"], ["midsem2", "Midsem 2"], ["combined", "Combined"], ["summary", "Summary"]] as [AcademicView, string][]).map(([k, l]) => setView(k)}>{l} )}
+
+
+ {error && {error}
}
+ {loading && !data && Loading academic analysis...
}
+
+ {data && (view === "midsem1" || view === "midsem2") && <>
+
+ {activeLabel} Raw Midsem marks out of 30, class statistics, and performance tiers.
-
-
Highest Score {activeStats.highest} {activeStats.highestNames.join(", ") || "—"}
{TIERS.map(t => setSelectedTier(selectedTier === t ? null : t)} style={{ borderColor: `${COLORS[t]}55`, cursor: "pointer", boxShadow: selectedTier === t ? `0 0 0 2px ${COLORS[t]}33` : undefined }}>{t} {activeStats.counts[t]} )}
-
Performance Tier Click a chart segment to filter the student table.
{ const t = entry?.name as Tier | undefined; if (t && TIERS.includes(t)) setSelectedTier(selectedTier === t ? null : t); }}>{activePie.map(e => | )}
-
Top 5 Highest Scorers {activeStats.sorted.slice(0, 5).map((r, i) => )}Bottom 5 At-Risk Students {[...activeStats.sorted].reverse().slice(0, 5).map((r, i) => )}
-
- Midsem Combined Compare both Midsem examinations in one view.
-
- Grade / Sort By setCombinedSort(e.target.value as CombinedSort)}>Combined (average) Midsem 1 Midsem 2 Maximum score
- Order setSortOrder(e.target.value as SortOrder)}>High to Low Low to High No Sort
-
-
-
- All Students {selectedTier ? `Filtered: ${selectedTier}` : "Combined Midsem results"}
{selectedTier && setSelectedTier(null)}> }{sortedCombinedRows.length} Students
Rank Student Midsem 1 Midsem 2 Combined Max Grade {sortedCombinedRows.map((row, index) => { const tier = tierFor(row.combined); const rank = combinedRankRows.findIndex(r => r.enrollmentNo === row.enrollmentNo) + 1; return {sortOrder === "none" ? rank : index + 1} {initials(row.name)} {row.name}{row.first} {row.second} {row.combined} {row.max} setSelectedTier(selectedTier === tier ? null : tier)}>{tier} No students match the selected filter.
+
+ Data Sheet Pass mark: 12/30 (40%){selectedTier ? ` · Filtered: ${selectedTier}` : ""}
{selectedTier && setSelectedTier(null)}> }{displayedRows.length} Students
+
+ S.No. Enrollment No. Student Marks Status Rank {displayedRows.map((row) => { const pass = row.marks >= 12; return {row.sno} {row.enrollmentNo} {row.name} {row.marks} {pass ? "Pass" : "Fail"} {row.rank}
+
+
+
+
Highest Score {activeStats.highest} {activeStats.highestNames.join(", ") || "—"}
{TIERS.map((t) => setSelectedTier(selectedTier === t ? null : t)} style={{ borderColor: `${COLORS[t]}55`, cursor: "pointer", boxShadow: selectedTier === t ? `0 0 0 2px ${COLORS[t]}33` : undefined }}>{t} {activeStats.counts[t]} )}
+
Performance Tier Click a chart segment to filter the student table.
{ const t = entry?.name as Tier | undefined; if (t && TIERS.includes(t)) setSelectedTier(selectedTier === t ? null : t); }}>{activePie.map((e) => | )}
+
Top 5 Highest Scorers {activeStats.sorted.slice(0, 5).map((r, i) => )}Bottom 5 At-Risk Students {[...activeStats.sorted].reverse().slice(0, 5).map((r, i) => )}
+
-
-
Grade Distribution Click a bar to filter the table by performance tier.
{combinedRows.length} Students ({ name: t, count: combinedCounts[t] }))} onClick={(state: any) => { const tier = state?.activeLabel as Tier | undefined; if (tier && TIERS.includes(tier)) setSelectedTier(selectedTier === tier ? null : tier); }}>{TIERS.map(t => | )}
-
Performance Tiers {TIERS.map(t => setSelectedTier(selectedTier === t ? null : t)} style={{ borderColor: `${COLORS[t]}55`, cursor: "pointer", boxShadow: selectedTier === t ? `0 0 0 2px ${COLORS[t]}33` : undefined }}>{t} {combinedCounts[t]} )}
-
Top 5 Highest Scorers {combinedRankRows.slice(0, 5).map((r, i) => {i + 1} {r.name}
{r.combined} Bottom 5 At-Risk Students {[...combinedRankRows].reverse().slice(0, 5).map((r, i) => {i + 1} {r.name}
{r.combined}
-
- }
-
- {data && view === "summary" && <>
- Academic Summary Compare Midsem 1 and Midsem 2 with the same ClassPulse academic analysis theme.
-
- Filtered Students Showing {summaryRows.length} of {students.length} students
{summaryRows.length} Students Enrollment Student Marks Tier {summaryRows.map(row => {row.enrollmentNo} {initials(row.name)} {row.name}{row.marks} setSummaryTier(summaryTier === row.tier ? "all" : row.tier)}>{row.tier} No students match these filters.
Midsem Combined Compare both Midsem examinations in one view.
Grade / Sort By setCombinedSort(e.target.value as CombinedSort)}>Combined (average) Midsem 1 Midsem 2 Maximum score
Order setSortOrder(e.target.value as SortOrder)}>High to Low Low to High No Sort
+
+ All Students {selectedTier ? `Filtered: ${selectedTier}` : "Combined Midsem results"}
{selectedTier && setSelectedTier(null)}> }{sortedCombinedRows.length} Students
+
+ {sortOrder === "none" ? "S.No." : "Rank"} Student Enrollment No. Midsem 1 Midsem 2 Combined Max Grade {sortedCombinedRows.map((row, index) => {
+ const gradeValue = combinedGradeValue(row);
+ const tier = tierFor(gradeValue);
+ const metricClass = (metric: CombinedSort, value: number) => sortOrder !== "none" && combinedSort === metric ? `tier-mark ${gradeClass(tierFor(value))}` : "";
+ return
+ {sortOrder === "none" ? row.sno : index + 1}
+ {row.name}
+ {row.enrollmentNo}
+ {row.first}
+ {row.second}
+ {row.combined} {row.max}
+ setSelectedTier(selectedTier === tier ? null : tier)}>{tier} ;
+ })}{!sortedCombinedRows.length && No students match the selected filter.
+
+
+
+
Grade Distribution Click a bar to filter the table by performance tier.
{combinedRows.length} Students ({ name: t, count: combinedCounts[t] }))} onClick={(state: any) => { const tier = state?.activeLabel as Tier | undefined; if (tier && TIERS.includes(tier)) setSelectedTier(selectedTier === tier ? null : tier); }}>{TIERS.map((t) => | )}
+
Performance Tiers {TIERS.map((t) => setSelectedTier(selectedTier === t ? null : t)} style={{ borderColor: `${COLORS[t]}55`, cursor: "pointer", boxShadow: selectedTier === t ? `0 0 0 2px ${COLORS[t]}33` : undefined }}>{t} {combinedCounts[t]} )}
+
Top 5 Highest Scorers {combinedRankRows.slice(0, 5).map((r, i) => {i + 1} {r.name}
{r.combined} Bottom 5 At-Risk Students {[...combinedRankRows].reverse().slice(0, 5).map((r, i) => {i + 1} {r.name}
{r.combined}
+
-
-
-
Marks Increase (Top 5) Students whose Midsem 2 score improved.
{i + 1}. {row.name}
+{row.change} No increases.
}
-
Marks Decrease (Top 5) Students whose Midsem 2 score fell.
{i + 1}. {row.name}
{row.change} No decreases.
}
-
- }
-
-
-
-
Academic Summary Compare Midsem 1 and Midsem 2 with the same ClassPulse academic analysis theme.
Filtered Students Showing {summaryRows.length} of {students.length} students
{summaryRows.length} Students {summaryShowRank ? "Rank" : "S.No."} Enrollment No. Student Marks Tier {summaryRows.map((row, index) => {summaryShowRank ? index + 1 : row.sno} {row.enrollmentNo} {row.name} {row.marks} setSummaryTier(summaryTier === row.tier ? "all" : row.tier)}>{row.tier} No students match these filters.
Marks Increase (Top 5) Students whose Midsem 2 score improved.
{i + 1}. {row.name}
+{row.change} No increases.
}Marks Decrease (Top 5) Students whose Midsem 2 score fell.
{i + 1}. {row.name}
{row.change} No decreases.
}
+
+
+
Attendance Trend
Compare attendance between two months and identify increasing, decreasing, and stable students.
-
Filter Criteria Narrow the list before copying addresses or sending alerts.
-
{ setLowerBound(0); setUpperBound(100); setRiskTrendFilter("All"); setRiskMonth("current"); }}>
+
-
Lower Bound (%)
-
Upper Bound (%)
-
Trend setRiskTrendFilter(e.target.value)}>All Increasing Decreasing Stable
-
Month setRiskMonth(e.target.value as "previous" | "current")}>{currentMonth} {previousMonth}
+
Lower Bound (%)
+
Upper Bound (%)
+
Trend setDraftRiskTrendFilter(e.target.value)}>All Increasing Decreasing Stable
+
Month setDraftRiskMonth(e.target.value as "previous" | "current")}>{currentMonth} {previousMonth}
+
diff --git a/pages/subject-analysis/[subjectId]/combined.tsx b/pages/subject-analysis/[subjectId]/combined.tsx
index 868b79f..e903530 100644
--- a/pages/subject-analysis/[subjectId]/combined.tsx
+++ b/pages/subject-analysis/[subjectId]/combined.tsx
@@ -12,7 +12,7 @@ type SortOrder = "desc" | "asc" | "none";
const MAX = 30;
const TIERS: Tier[] = ["Excellent", "Good", "Needs Attention", "Critical Risk"];
-const COLORS: Record = { Excellent: "#15966a", Good: "#4d75d0", "Needs Attention": "#f59e0b", "Critical Risk": "#ef4444" };
+const COLORS: Record = { Excellent: "#4d75d0", Good: "#15966a", "Needs Attention": "#f59e0b", "Critical Risk": "#ef4444" };
const initials = (name: string) => name.split(" ").filter(Boolean).slice(0, 2).map((part) => part[0]).join("").toUpperCase();
const round1 = (n: number) => Math.round(n * 10) / 10;
const tierFor = (marks: number): Tier => { const p = (marks / MAX) * 100; if (p >= 80) return "Excellent"; if (p >= 60) return "Good"; if (p >= 40) return "Needs Attention"; return "Critical Risk"; };
@@ -67,14 +67,24 @@ export default function CombinedMidsemPage() {
return result;
}, [rows]);
- const filteredRows = useMemo(() => selectedTier ? rows.filter((row) => tierFor(row.combined) === selectedTier) : rows, [rows, selectedTier]);
+ const metricValue = (row: typeof rows[number], field: SortField) => {
+ if (field === "midsem1") return row.first;
+ if (field === "midsem2") return row.second;
+ if (field === "max") return row.max;
+ return row.combined;
+ };
+ const activeGradeField: SortField = sortOrder === "none" ? "combined" : sortField;
+ const filteredRows = useMemo(
+ () => selectedTier ? rows.filter((row) => tierFor(metricValue(row, activeGradeField)) === selectedTier) : rows,
+ [rows, selectedTier, activeGradeField]
+ );
const sortedRows = useMemo(() => {
if (sortOrder === "none") return [...filteredRows];
return [...filteredRows].sort((a, b) => {
- const value = (row: typeof a) => sortField === "midsem1" ? row.first : sortField === "midsem2" ? row.second : sortField === "max" ? row.max : row.combined;
- const difference = value(a) - value(b);
- return sortOrder === "asc" ? difference : -difference;
+ const difference = metricValue(a, sortField) - metricValue(b, sortField);
+ if (difference !== 0) return sortOrder === "asc" ? difference : -difference;
+ return a.name.localeCompare(b.name);
});
}, [filteredRows, sortField, sortOrder]);
@@ -167,15 +177,27 @@ export default function CombinedMidsemPage() {
-
- Rank Student Midsem 1 Midsem 2 Combined Grade
+
+
+ {sortOrder === "none" ? "S.No." : "Rank"} Student Midsem 1 Midsem 2 Combined Grade
{sortedRows.map((row, index) => {
- const tier = tierFor(row.combined);
+ const tier = tierFor(metricValue(row, activeGradeField));
+ const sortedColor = sortOrder !== "none" ? COLORS[tier] : undefined;
+ const serial = sortOrder === "none" ? rows.findIndex((item) => item.enrollmentNo === row.enrollmentNo) + 1 : index + 1;
return
- {sortOrder === "none" ? rankRows.findIndex((item) => item.enrollmentNo === row.enrollmentNo) + 1 : index + 1}
- {initials(row.name)} {row.name}{row.first} {row.second} {row.combined} {serial}
+ {initials(row.name)} {row.name} {row.first}
+ {row.second}
+ {row.combined}
setSelectedTier(selectedTier === tier ? null : tier)}>{tier} ;
})}
@@ -185,13 +207,6 @@ export default function CombinedMidsemPage() {
-
- Highest Score {highest} {highestNames.join(", ") || "—"}
- {TIERS.map((tier) => setSelectedTier(selectedTier === tier ? null : tier)} style={{ borderColor: `${COLORS[tier]}55`, cursor: "pointer", boxShadow: selectedTier === tier ? `0 0 0 2px ${COLORS[tier]}33` : undefined }}>{tier} {counts[tier]} )}
-
-
-
Grade Distribution
Click a bar to filter the student table by performance tier.
@@ -218,15 +233,24 @@ export default function CombinedMidsemPage() {