From b843b960a8ec010dce63a774c924183b6481c9c9 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sat, 29 Aug 2026 12:58:47 +0530
Subject: [PATCH 01/80] Rework at-risk page layout

---
 .../subject-analysis/[subjectId]/overall.tsx  | 44 ++++++++++++++-----
 1 file changed, 33 insertions(+), 11 deletions(-)

diff --git a/pages/subject-analysis/[subjectId]/overall.tsx b/pages/subject-analysis/[subjectId]/overall.tsx
index 48ebeb7..88c5fd2 100644
--- a/pages/subject-analysis/[subjectId]/overall.tsx
+++ b/pages/subject-analysis/[subjectId]/overall.tsx
@@ -136,7 +136,18 @@ export default function SubjectOverallPage() {
     if (sortDirection === "none") return rows.sort((a, b) => a.originalIndex - b.originalIndex);
     return rows.sort((a: any, b: any) => ((sortDirection === "asc" ? a[sortColumn] - b[sortColumn] : b[sortColumn] - a[sortColumn]) || a.name.localeCompare(b.name)));
   }, [baseRows, sortColumn, sortDirection]);
-  const filteredRiskRows = useMemo(() => { const lo = Math.min(riskLower, riskUpper); const hi = Math.max(riskLower, riskUpper); return baseRows.filter(row => { const value = columnValue(row, riskColumn); return value >= lo && value <= hi; }); }, [baseRows, riskColumn, riskLower, riskUpper]);
+
+  const filteredRiskRows = useMemo(() => {
+    const lo = Math.min(riskLower, riskUpper);
+    const hi = Math.max(riskLower, riskUpper);
+    const rows = baseRows.filter(row => {
+      const value = columnValue(row, riskColumn);
+      return value >= lo && value <= hi;
+    });
+    if (sortDirection === "none") return rows.sort((a, b) => a.originalIndex - b.originalIndex);
+    return rows.sort((a: any, b: any) => ((sortDirection === "asc" ? a[riskColumn] - b[riskColumn] : b[riskColumn] - a[riskColumn]) || a.name.localeCompare(b.name)));
+  }, [baseRows, riskColumn, riskLower, riskUpper, sortDirection]);
+
   const topFive = useMemo(() => [...filteredRiskRows].sort((a, b) => columnValue(b, riskColumn) - columnValue(a, riskColumn)).slice(0, 5), [filteredRiskRows, riskColumn]);
   const riskDistribution = useMemo(() => [
     { name: "Above 32", value: baseRows.filter(r => r.basic > 32).length },
@@ -171,13 +182,6 @@ export default function SubjectOverallPage() {
       return next;
     });
   }
-  function selectRiskRange(index: number) {
-    setRiskColumn("basic");
-    if (index === 0) { setRiskLower(32.1); setRiskUpper(40); }
-    if (index === 1) { setRiskLower(24); setRiskUpper(32); }
-    if (index === 2) { setRiskLower(16); setRiskUpper(23.9); }
-    if (index === 3) { setRiskLower(0); setRiskUpper(15.9); }
-  }
 
   return <div className="analysis-layout">
     <aside className="analysis-sidebar">
@@ -220,9 +224,27 @@ export default function SubjectOverallPage() {
         </div>
         <section className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden"><div className="px-3 py-2 border-b border-slate-100"><h3 className="text-sm font-semibold text-slate-900">Internal Marks Data</h3><p className="text-[10px] text-slate-500 mt-0.5">Basic marks use the selected components. Moderated marks are calculated from the configured rank criteria.</p></div><div className="max-h-[620px] overflow-y-auto overflow-x-hidden"><table className="w-full table-fixed border-collapse text-[10px]"><colgroup><col className="w-[2.5%]"/><col className="w-[16%]"/><col className="w-[13%]"/><col className="w-[7.5%]"/><col className="w-[7.5%]"/><col className="w-[7.5%]"/><col className="w-[9%]"/><col className="w-[7.5%]"/><col className="w-[7.5%]"/><col className="w-[9%]"/><col className="w-[10%]"/></colgroup><thead className="sticky top-0 bg-white z-10"><tr className="border-b border-slate-200 text-slate-500"><th className="text-center px-0.5 py-2 font-semibold">#</th><th className="text-left px-1.5 py-2 font-semibold">Name</th><th className="text-center px-1 py-2 font-semibold">Enrollment</th>{HEADERS.map(h => <th key={h.key} className="text-center px-0.5 py-2 font-semibold leading-3">{h.label}</th>)}</tr></thead><tbody>{sortedRows.map((row,index) => <tr key={row.enrollmentNo} className="border-b border-slate-100 last:border-0 hover:bg-slate-50/70"><td className="text-center px-0.5 py-1.5 text-slate-400 tabular-nums">{index+1}</td><td className="px-1.5 py-1.5 text-slate-800 font-medium truncate" title={row.name}>{row.name}</td><td className="text-center px-1 py-1.5 text-slate-500 truncate tabular-nums">{row.enrollmentNo}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.assignment}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.presentation}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.attendance}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.moderatedAttendanceWeighted}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.midsem1}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.midsem2}</td><td className={`text-center px-0.5 py-1.5 ${scoreClass(row.basic)} tabular-nums`}>{row.basic}</td><td className={`text-center px-0.5 py-1.5 ${scoreClass(row.moderated)} tabular-nums`}>{row.moderated}</td></tr>)}</tbody></table></div></section>
       </> : data && <>
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-3 mb-4"><section className="lg:col-span-2 rounded-xl border border-slate-200 bg-white p-4 shadow-sm"><div className="flex items-center justify-between mb-3"><div><h3 className="text-base font-semibold text-slate-900">At-Risk Filters</h3><p className="text-xs text-slate-500 mt-0.5">Filter students by any calculated internal-mark value.</p></div><select value={riskColumn} onChange={e => setRiskColumn(e.target.value as ColumnKey)} className="border border-slate-200 rounded-lg px-2.5 py-2 text-xs"><option value="basic">Basic</option><option value="moderated">Moderated</option><option value="assignment">Assignment</option><option value="presentation">Presentation</option><option value="attendance">Attendance</option><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option></select></div><div className="grid grid-cols-2 gap-3 max-w-sm"><label className="text-xs text-slate-500">Lower bound<input type="number" min="0" max="40" value={riskLower} onChange={e => setRiskLower(num(e.target.value,riskLower))} className="mt-1 w-full rounded-lg border border-slate-200 px-3 py-2 text-sm"/></label><label className="text-xs text-slate-500">Upper bound<input type="number" min="0" max="40" value={riskUpper} onChange={e => setRiskUpper(num(e.target.value,riskUpper))} className="mt-1 w-full rounded-lg border border-slate-200 px-3 py-2 text-sm"/></label></div><div className="grid grid-cols-4 gap-2 mt-4">{riskDistribution.map((item,index)=><button key={item.name} onClick={()=>selectRiskRange(index)} className="rounded-lg border border-slate-200 p-2.5 text-left hover:bg-slate-50"><div className="text-xs text-slate-500">{item.name}</div><div className="text-lg font-semibold text-slate-900 mt-0.5">{item.value}</div></button>)}</div></section><section className="rounded-xl border border-slate-200 bg-white p-3 shadow-sm"><h3 className="text-base font-semibold text-slate-900">Distribution</h3><div className="h-52 mt-1"><ResponsiveContainer width="100%" height="100%"><PieChart><Pie data={riskDistribution} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={70}>{riskDistribution.map((_,i)=><Cell key={i} fill={COLORS[i]}/>)}</Pie><Tooltip/></PieChart></ResponsiveContainer></div></section></div>
-        <section className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden"><div className="px-4 py-3 border-b border-slate-100 flex items-center justify-between"><div><h3 className="text-base font-semibold text-slate-900">Filtered Students</h3><p className="text-xs text-slate-500 mt-0.5">Showing {filteredRiskRows.length} of {baseRows.length} students.</p></div><span className="text-xs rounded-full bg-slate-100 px-2.5 py-1 text-slate-600">{filteredRiskRows.length} Students</span></div><div className="max-h-[620px] overflow-y-auto overflow-x-hidden"><table className="w-full table-fixed text-[11px] border-collapse"><colgroup><col className="w-[16%]"/><col className="w-[20%]"/><col className="w-[12%]"/><col className="w-[12%]"/><col className="w-[12%]"/><col className="w-[14%]"/><col className="w-[14%]"/></colgroup><thead className="sticky top-0 bg-white z-10"><tr className="border-b border-slate-200 text-slate-500"><th className="text-left px-3 py-2.5">Enrollment</th><th className="text-left px-3 py-2.5">Student</th><th className="text-center px-2 py-2.5">Marks</th><th className="text-center px-2 py-2.5">Moderated</th><th className="text-center px-2 py-2.5">Rank</th><th className="text-center px-2 py-2.5">Tier</th><th className="text-center px-2 py-2.5">Status</th></tr></thead><tbody>{filteredRiskRows.map(row=><tr key={row.enrollmentNo} className="border-b border-slate-100"><td className="px-3 py-2 text-slate-500 truncate">{row.enrollmentNo}</td><td className="px-3 py-2 font-medium text-slate-800 truncate">{row.name}</td><td className={`text-center px-2 py-2 ${scoreClass(row.basic)}`}>{row.basic}</td><td className={`text-center px-2 py-2 ${scoreClass(row.moderated)}`}>{row.moderated}</td><td className="text-center px-2 py-2 text-slate-600">{row.rank}</td><td className="text-center px-2 py-2 text-slate-600">{criteria.findIndex(c=>row.rank>=c.from&&row.rank<=c.to)+1||"—"}</td><td className="text-center px-2 py-2"><span className={`inline-flex rounded-full px-2 py-0.5 text-[10px] ${row.basic<16?"bg-red-50 text-red-600":row.basic<24?"bg-amber-50 text-amber-700":"bg-emerald-50 text-emerald-700"}`}>{row.basic<16?"Critical Risk":row.basic<24?"Needs Attention":"Good"}</span></td></tr>)}</tbody></table></div></section>
-        <section className="rounded-xl border border-slate-200 bg-white shadow-sm mt-3 overflow-hidden"><div className="px-4 py-3 border-b border-slate-100"><h3 className="text-base font-semibold text-slate-900">Top Students in Filter</h3></div><div className="grid grid-cols-1 sm:grid-cols-5 divide-y sm:divide-y-0 sm:divide-x divide-slate-100">{topFive.map(row=><div key={row.enrollmentNo} className="p-3"><div className="text-xs font-semibold text-slate-800 truncate">{row.name}</div><div className={`text-lg mt-1 ${scoreClass(columnValue(row,riskColumn))}`}>{columnValue(row,riskColumn)}</div></div>)}</div></section>
+        <div className="at-risk-layout">
+          <section className="at-risk-filter rounded-xl border border-slate-200 bg-white p-3 shadow-sm">
+            <div className="flex items-center gap-3 flex-wrap">
+              <div className="shrink-0"><h3 className="text-sm font-semibold text-slate-900">At-Risk Filters</h3><p className="text-[10px] text-slate-500 mt-0.5">Choose a mark column, range and sort.</p></div>
+              <div className="flex-1 min-w-[180px]"><label className="block text-[10px] text-slate-500 mb-1">Column</label><select value={riskColumn} onChange={e => setRiskColumn(e.target.value as ColumnKey)} className="border border-slate-200 rounded-lg px-2.5 py-2 text-xs"><option value="basic">Basic</option><option value="moderated">Moderated</option><option value="assignment">Assignment</option><option value="presentation">Presentation</option><option value="attendance">Attendance</option><option value="moderatedAttendance">Moderated Att.</option><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option></select></div>
+              <label className="w-[150px]"><span className="block text-[10px] text-slate-500 mb-1">Lower bound</span><input type="number" min="0" max="40" value={riskLower} onChange={e => setRiskLower(num(e.target.value,riskLower))} className="w-full rounded-lg border border-slate-200 px-2.5 py-2 text-xs"/></label>
+              <label className="w-[150px]"><span className="block text-[10px] text-slate-500 mb-1">Upper bound</span><input type="number" min="0" max="40" value={riskUpper} onChange={e => setRiskUpper(num(e.target.value,riskUpper))} className="w-full rounded-lg border border-slate-200 px-2.5 py-2 text-xs"/></label>
+              <div className="w-[150px]"><label className="block text-[10px] text-slate-500 mb-1">Sort</label><select value={sortDirection} onChange={e => setSortDirection(e.target.value as SortDirection)} className="border border-slate-200 rounded-lg px-2.5 py-2 text-xs"><option value="none">No sort</option><option value="asc">Low to high</option><option value="desc">High to low</option></select></div>
+            </div>
+          </section>
+
+          <section className="at-risk-table rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
+            <div className="px-3 py-2 border-b border-slate-100 flex items-center justify-between"><div><h3 className="text-sm font-semibold text-slate-900">Filtered Students</h3><p className="text-[10px] text-slate-500 mt-0.5">Showing {filteredRiskRows.length} of {baseRows.length} students.</p></div><span className="text-[10px] rounded-full bg-slate-100 px-2 py-1 text-slate-600">{filteredRiskRows.length} Students</span></div>
+            <div className="max-h-[620px] overflow-y-auto overflow-x-hidden"><table className="w-full table-fixed text-[10px] border-collapse"><colgroup><col className="w-[16%]"/><col className="w-[20%]"/><col className="w-[12%]"/><col className="w-[12%]"/><col className="w-[12%]"/><col className="w-[14%]"/><col className="w-[14%]"/></colgroup><thead className="sticky top-0 bg-white z-10"><tr className="border-b border-slate-200 text-slate-500"><th className="text-left px-2 py-2">Enrollment</th><th className="text-left px-2 py-2">Student</th><th className="text-center px-1 py-2">Marks</th><th className="text-center px-1 py-2">Moderated</th><th className="text-center px-1 py-2">Rank</th><th className="text-center px-1 py-2">Tier</th><th className="text-center px-1 py-2">Status</th></tr></thead><tbody>{filteredRiskRows.map(row=><tr key={row.enrollmentNo} className="border-b border-slate-100"><td className="px-2 py-1.5 text-slate-500 truncate">{row.enrollmentNo}</td><td className="px-2 py-1.5 font-medium text-slate-800 truncate">{row.name}</td><td className={`text-center px-1 py-1.5 ${scoreClass(row.basic)}`}>{row.basic}</td><td className={`text-center px-1 py-1.5 ${scoreClass(row.moderated)}`}>{row.moderated}</td><td className="text-center px-1 py-1.5 text-slate-600">{row.rank}</td><td className="text-center px-1 py-1.5 text-slate-600">{criteria.findIndex(c=>row.rank>=c.from&&row.rank<=c.to)+1||"—"}</td><td className="text-center px-1 py-1.5"><span className={`inline-flex rounded-full px-2 py-0.5 text-[9px] ${row.basic<16?"bg-red-50 text-red-600":row.basic<24?"bg-amber-50 text-amber-700":"bg-emerald-50 text-emerald-700"}`}>{row.basic<16?"Critical Risk":row.basic<24?"Needs Attention":"Good"}</span></td></tr>)}</tbody></table></div>
+          </section>
+
+          <aside className="at-risk-side-stack">
+            <section className="rounded-xl border border-slate-200 bg-white p-3 shadow-sm"><h3 className="text-sm font-semibold text-slate-900">Distribution</h3><div className="h-52 mt-1"><ResponsiveContainer width="100%" height="100%"><PieChart><Pie data={riskDistribution} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={70}>{riskDistribution.map((_,i)=><Cell key={i} fill={COLORS[i]}/>)}</Pie><Tooltip/></PieChart></ResponsiveContainer></div></section>
+            <section className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden"><div className="px-3 py-2 border-b border-slate-100"><h3 className="text-sm font-semibold text-slate-900">Top Students in Filter</h3></div><div className="grid grid-cols-1 divide-y divide-slate-100">{topFive.map(row=><div key={row.enrollmentNo} className="px-3 py-2.5 flex items-center justify-between gap-3"><div className="text-[10px] font-semibold text-slate-800 truncate">{row.name}</div><div className={`text-sm shrink-0 ${scoreClass(columnValue(row,riskColumn))}`}>{columnValue(row,riskColumn)}</div></div>)}</div></section>
+          </aside>
+        </div>
       </>}
     </main>
   </div>;

From b7559f6566a66a7ffcac693ea0e44930abdf1e3b Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sat, 29 Aug 2026 12:59:13 +0530
Subject: [PATCH 02/80] Add at-risk page layout styling

---
 app/globals.css | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 12cbbb5..569ac28 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -34,5 +34,10 @@
 .academic-content-grid{align-items:start}.academic-table-wrap{height:620px;max-height:620px}.academic-stats-panel{padding:16px;display:grid;grid-template-columns:1fr 1.4fr;gap:14px}.academic-highest{padding:12px 14px;border:1px solid #edf0f4;border-radius:12px;background:rgba(255,255,255,.58);display:flex;flex-direction:column;gap:5px}.academic-highest span,.academic-tier-card span{font-size:11px;color:#667085}.academic-highest strong{font-size:26px;line-height:1;color:#172033}.academic-highest p{margin:0;color:#475467;font-size:12px;line-height:1.35}.academic-tier-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.academic-tier-card{min-height:70px;padding:10px 12px;border:1px solid;border-radius:12px;background:rgba(255,255,255,.52);display:flex;flex-direction:column;justify-content:space-between}.academic-tier-card strong{font-size:21px;line-height:1}.academic-rank-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.academic-rank-panel{padding:16px;min-width:0}.academic-rank-panel h3{font-size:14px;font-weight:700;margin-bottom:10px}.academic-rank-row{display:grid;grid-template-columns:24px minmax(0,1fr) 32px;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #edf0f4}.academic-rank-row:last-child{border-bottom:0}.academic-rank-row>span{font-size:11px;color:#98a2b3}.academic-rank-row p{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#475467}.academic-rank-row strong{justify-self:end;font-size:13px;color:#172033}.academic-rank-row strong.is-negative{color:#dc2626}.academic-table-panel .analysis-table td:first-child{min-width:210px}.academic-table-panel .analysis-table th:not(:first-child),.academic-table-panel .analysis-table td:not(:first-child){text-align:center}.academic-table-panel .student-cell{white-space:nowrap}.academic-content-grid .analysis-chart{height:190px}
 
 .recharts-tooltip-wrapper .recharts-default-tooltip{border-radius:12px!important;border:1px solid #e2e8f0!important;box-shadow:0 12px 28px rgba(15,23,42,.1)!important;background:rgba(255,255,255,.97)!important}.analysis-stat-card,.analysis-ranked-list,.analysis-grade-badge{border-color:#e2e8f0}
-@media(max-width:1100px){.analysis-hero{grid-template-columns:1fr 1fr}.analysis-hero-copy{grid-column:1/-1}.analysis-content-grid{grid-template-columns:1fr}.analysis-settings-grid{grid-template-columns:1fr 1fr}.analysis-sidebar{position:fixed;transform:translateX(-100%)}.analysis-layout{grid-template-columns:1fr}.analysis-page{padding:18px}.academic-table-wrap{height:500px;max-height:500px}.analysis-top-actions>.analysis-raw-button{position:static;width:auto;min-height:0;border:1px solid #dfe5ec;background:rgba(255,255,255,.8);box-shadow:0 4px 14px rgba(15,23,42,.04)}.analysis-top-actions>.analysis-raw-button span:first-child:before{display:none}}
-@media(max-width:700px){.analysis-topbar{align-items:flex-start;flex-direction:column}.analysis-title-row h1{font-size:21px}.analysis-top-actions{width:100%}.analysis-settings-grid{grid-template-columns:1fr}.analysis-hero{grid-template-columns:1fr}.analysis-content-grid{grid-template-columns:1fr}.analysis-page{padding:14px}.analysis-insight{align-items:flex-start;flex-direction:column}.analysis-insight-actions{margin-left:0;flex-wrap:wrap}.subject-analysis-nav__item{padding:9px 12px}.analysis-chart{height:200px}.academic-stats-panel,.academic-rank-grid{grid-template-columns:1fr}.academic-tier-grid{grid-template-columns:1fr 1fr}.academic-table-wrap{height:440px;max-height:440px}}
+
+/* Overall > At Risk */
+.at-risk-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;grid-template-areas:"filter filter" "table side";gap:12px;align-items:start}.at-risk-filter{grid-area:filter}.at-risk-table{grid-area:table;min-width:0}.at-risk-side-stack{grid-area:side;display:grid;gap:12px;min-width:0}.at-risk-side-stack>section:first-child{min-height:250px}.at-risk-filter select,.at-risk-filter input{height:38px}.at-risk-filter label{margin:0}.at-risk-filter .flex-1{min-width:210px}
+
+@media(max-width:1100px){.analysis-hero{grid-template-columns:1fr 1fr}.analysis-hero-copy{grid-column:1/-1}.analysis-content-grid{grid-template-columns:1fr}.analysis-settings-grid{grid-template-columns:1fr 1fr}.analysis-sidebar{position:fixed;transform:translateX(-100%)}.analysis-layout{grid-template-columns:1fr}.analysis-page{padding:18px}.academic-table-wrap{height:500px;max-height:500px}.analysis-top-actions>.analysis-raw-button{position:static;width:auto;min-height:0;border:1px solid #dfe5ec;background:rgba(255,255,255,.8);box-shadow:0 4px 14px rgba(15,23,42,.04)}.analysis-top-actions>.analysis-raw-button span:first-child:before{display:none}.at-risk-layout{grid-template-columns:minmax(0,1fr) 280px}}
+@media(max-width:800px){.at-risk-layout{grid-template-columns:1fr;grid-template-areas:"filter" "table" "side"}.at-risk-filter .flex{align-items:stretch}.at-risk-filter .flex-1,.at-risk-filter label,.at-risk-filter>div>div:last-child{width:100%;min-width:0}.at-risk-side-stack{grid-template-columns:1fr 1fr}.at-risk-side-stack>section:first-child{min-height:0}}
+@media(max-width:700px){.analysis-topbar{align-items:flex-start;flex-direction:column}.analysis-title-row h1{font-size:21px}.analysis-top-actions{width:100%}.analysis-settings-grid{grid-template-columns:1fr}.analysis-hero{grid-template-columns:1fr}.analysis-content-grid{grid-template-columns:1fr}.analysis-page{padding:14px}.analysis-insight{align-items:flex-start;flex-direction:column}.analysis-insight-actions{margin-left:0;flex-wrap:wrap}.subject-analysis-nav__item{padding:9px 12px}.analysis-chart{height:200px}.academic-stats-panel,.academic-rank-grid{grid-template-columns:1fr}.academic-tier-grid{grid-template-columns:1fr 1fr}.academic-table-wrap{height:440px;max-height:440px}.at-risk-side-stack{grid-template-columns:1fr}.at-risk-filter .flex{flex-direction:column}}

From d68afee93de9e8a33cec70bd344fe33dc4d99276 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sat, 29 Aug 2026 13:32:35 +0530
Subject: [PATCH 03/80] Polish At Risk layout and controls

---
 .../subject-analysis/[subjectId]/overall.tsx  | 86 ++++---------------
 1 file changed, 18 insertions(+), 68 deletions(-)

diff --git a/pages/subject-analysis/[subjectId]/overall.tsx b/pages/subject-analysis/[subjectId]/overall.tsx
index 88c5fd2..f582754 100644
--- a/pages/subject-analysis/[subjectId]/overall.tsx
+++ b/pages/subject-analysis/[subjectId]/overall.tsx
@@ -103,7 +103,6 @@ export default function SubjectOverallPage() {
   useEffect(() => { loadAnalysis(); }, [subjectId]);
 
   const selectedTotal = useMemo(() => round1(draftBasicColumns.reduce((sum, key) => sum + draftWeights[key], 0)), [draftBasicColumns, draftWeights]);
-
   const baseRows = useMemo(() => {
     const preliminary = (data?.students || []).map((s: any, originalIndex: number) => ({
       enrollmentNo: s.enrollmentNo, name: s.name, originalIndex,
@@ -136,18 +135,12 @@ export default function SubjectOverallPage() {
     if (sortDirection === "none") return rows.sort((a, b) => a.originalIndex - b.originalIndex);
     return rows.sort((a: any, b: any) => ((sortDirection === "asc" ? a[sortColumn] - b[sortColumn] : b[sortColumn] - a[sortColumn]) || a.name.localeCompare(b.name)));
   }, [baseRows, sortColumn, sortDirection]);
-
   const filteredRiskRows = useMemo(() => {
-    const lo = Math.min(riskLower, riskUpper);
-    const hi = Math.max(riskLower, riskUpper);
-    const rows = baseRows.filter(row => {
-      const value = columnValue(row, riskColumn);
-      return value >= lo && value <= hi;
-    });
+    const lo = Math.min(riskLower, riskUpper); const hi = Math.max(riskLower, riskUpper);
+    const rows = baseRows.filter(row => { const value = columnValue(row, riskColumn); return value >= lo && value <= hi; });
     if (sortDirection === "none") return rows.sort((a, b) => a.originalIndex - b.originalIndex);
     return rows.sort((a: any, b: any) => ((sortDirection === "asc" ? a[riskColumn] - b[riskColumn] : b[riskColumn] - a[riskColumn]) || a.name.localeCompare(b.name)));
   }, [baseRows, riskColumn, riskLower, riskUpper, sortDirection]);
-
   const topFive = useMemo(() => [...filteredRiskRows].sort((a, b) => columnValue(b, riskColumn) - columnValue(a, riskColumn)).slice(0, 5), [filteredRiskRows, riskColumn]);
   const riskDistribution = useMemo(() => [
     { name: "Above 32", value: baseRows.filter(r => r.basic > 32).length },
@@ -157,89 +150,46 @@ export default function SubjectOverallPage() {
   ], [baseRows]);
 
   function updateWeight(key: WeightKey, value: string) { setDraftWeights(current => ({ ...current, [key]: num(value, current[key]) })); }
-  function toggleBasic(key: WeightKey) {
-    setDraftBasicColumns(current => {
-      if (current.includes(key)) return current.filter(x => x !== key);
-      if (key === "attendance") return [...current.filter(x => x !== "moderatedAttendance"), key];
-      if (key === "moderatedAttendance") return [...current.filter(x => x !== "attendance"), key];
-      return [...current, key];
-    });
-  }
-  function applyWeights() {
-    if (selectedTotal <= 0) return;
-    setApplyingWeights(true);
-    const applied = normalize(draftBasicColumns, draftWeights);
-    setBasicColumns(draftBasicColumns); setWeights(applied); setDraftWeights(applied);
-    window.setTimeout(() => setApplyingWeights(false), 250);
-  }
+  function toggleBasic(key: WeightKey) { setDraftBasicColumns(current => { if (current.includes(key)) return current.filter(x => x !== key); if (key === "attendance") return [...current.filter(x => x !== "moderatedAttendance"), key]; if (key === "moderatedAttendance") return [...current.filter(x => x !== "attendance"), key]; return [...current, key]; }); }
+  function applyWeights() { if (selectedTotal <= 0) return; setApplyingWeights(true); const applied = normalize(draftBasicColumns, draftWeights); setBasicColumns(draftBasicColumns); setWeights(applied); setDraftWeights(applied); window.setTimeout(() => setApplyingWeights(false), 250); }
   function updateCriteria(i: number, field: keyof Criteria, value: string) {
-    setCriteria(current => {
-      const next = current.map(row => ({ ...row })); const parsed = num(value, next[i][field]);
-      if (field === "from") return current;
-      if (field === "to") next[i].to = Math.max(next[i].from, Math.floor(parsed)); else next[i][field] = parsed;
-      next[0].from = 1;
-      for (let index = 1; index < next.length; index++) { next[index].from = next[index - 1].to + 1; if (next[index].to < next[index].from) next[index].to = next[index].from; }
-      return next;
-    });
+    setCriteria(current => { const next = current.map(row => ({ ...row })); const parsed = num(value, next[i][field]); if (field === "from") return current; if (field === "to") next[i].to = Math.max(next[i].from, Math.floor(parsed)); else next[i][field] = parsed; next[0].from = 1; for (let index = 1; index < next.length; index++) { next[index].from = next[index - 1].to + 1; if (next[index].to < next[index].from) next[index].to = next[index].from; } return next; });
   }
 
   return <div className="analysis-layout">
     <aside className="analysis-sidebar">
       <div className="analysis-brand"><span className="analysis-brand__mark"><BarChart3 size={18} /></span><span>ClassPulse</span></div>
-      <nav className="analysis-side-nav">
-        <a href="/dashboard"><LayoutDashboard size={18} />Dashboard</a>
-        <a href="/classes"><BookOpen size={18} />Class Analysis</a>
-        <a className="is-active" href={typeof subjectId === "string" ? `/subject-analysis/${subjectId}/overall` : "#"}><GraduationCap size={18} />Subject Analysis</a>
-      </nav>
+      <nav className="analysis-side-nav"><a href="/dashboard"><LayoutDashboard size={18} />Dashboard</a><a href="/classes"><BookOpen size={18} />Class Analysis</a><a className="is-active" href={typeof subjectId === "string" ? `/subject-analysis/${subjectId}/overall` : "#"}><GraduationCap size={18} />Subject Analysis</a></nav>
       <RawDataButton sheetId={sheetId} />
       <div className="analysis-side-footer">ClassPulse Teacher Portal</div>
     </aside>
-
     <main className="analysis-page">
-      <header className="analysis-topbar">
-        <div className="analysis-title-row"><h1>Subject Analysis</h1>{computedAt && <span className="analysis-sync">• Last synced {new Date(computedAt).toLocaleString()}</span>}</div>
-        <div className="analysis-top-actions"><button className="analysis-primary" onClick={() => loadAnalysis(true)} disabled={syncing}><RefreshCw size={15} className={syncing ? "animate-spin" : ""} />{syncing ? "Syncing..." : "Sync now"}</button></div>
-      </header>
-
+      <header className="analysis-topbar"><div className="analysis-title-row"><h1>Subject Analysis</h1>{computedAt && <span className="analysis-sync">• Last synced {new Date(computedAt).toLocaleString()}</span>}</div><div className="analysis-top-actions"><button className="analysis-primary" onClick={() => loadAnalysis(true)} disabled={syncing}><RefreshCw size={15} className={syncing ? "animate-spin" : ""} />{syncing ? "Syncing..." : "Sync now"}</button></div></header>
       {typeof subjectId === "string" && <SubjectAnalysisNav subjectId={subjectId}/>} 
-      <div className="analysis-view-switch">
-        <button onClick={() => setView("internal")} className={view === "internal" ? "is-active" : ""}>Internal Marks</button>
-        <button onClick={() => setView("risk")} className={view === "risk" ? "is-active" : ""}>At Risk</button>
-      </div>
-
+      <div className="analysis-view-switch"><button onClick={() => setView("internal")} className={view === "internal" ? "is-active" : ""}>Internal Marks</button><button onClick={() => setView("risk")} className={view === "risk" ? "is-active" : ""}>At Risk</button></div>
       {error && <div className="analysis-panel" style={{ padding: 14, marginBottom: 16, color: "#b42318" }}>{error}</div>}
       {loading && !data && <div style={{ padding: 40, color: "#667085", fontSize: 13 }}>Loading overall analysis...</div>}
-
       {data && view === "internal" ? <>
         <div className="grid grid-cols-1 xl:grid-cols-[0.82fr_1fr] gap-2 mb-2 items-start">
-          <section className="rounded-xl border border-slate-200 bg-white p-2.5 shadow-sm">
-            <div className="flex items-center justify-between mb-2"><div><h3 className="text-sm font-semibold text-slate-900">Applied Components Summary</h3><p className="text-[10px] text-slate-500 mt-0.5">Choose components and set their weightage.</p></div><span className={`text-[11px] font-semibold ${selectedTotal === TARGET ? "text-emerald-600" : "text-amber-600"}`}>Selected total: {selectedTotal}/40</span></div>
-            <div className="grid grid-cols-3 grid-rows-2 gap-1.5">{COMPONENTS.map(({ key, label }) => { const checked = draftBasicColumns.includes(key); return <label key={key} className={`min-w-0 rounded-lg border p-1.5 cursor-pointer transition ${checked ? "border-violet-200 bg-violet-50/60" : "border-slate-200 bg-white"}`}><div className="flex items-center gap-1.5 min-w-0"><input type="checkbox" checked={checked} onChange={() => toggleBasic(key)} className="h-3.5 w-3.5 accent-[#4a35b3] shrink-0"/><span className="text-[11px] font-medium text-slate-700 truncate">{label}</span></div><input aria-label={`${label} weightage`} type="number" min="0" step="0.1" value={draftWeights[key]} onChange={e => updateWeight(key, e.target.value)} className="mt-1 w-full rounded-md border border-slate-200 px-2 py-1 text-xs text-slate-800 outline-none focus:border-violet-400"/></label>; })}</div>
-            <div className="flex items-center justify-between mt-2 gap-2"><p className="text-[10px] leading-3.5 text-slate-400">Only checked components count. Weightage is normalized to exactly 40 when applied.</p><button onClick={applyWeights} disabled={applyingWeights || selectedTotal <= 0} className="shrink-0 bg-[#3d2aa0] text-white text-xs font-semibold rounded-lg px-3 py-1.5 shadow-sm disabled:opacity-50">{applyingWeights ? "Applying..." : "Apply"}</button></div>
-          </section>
-          <section className="rounded-xl border border-slate-200 bg-white p-2.5 shadow-sm">
-            <div className="flex items-start justify-between gap-2 mb-1.5"><div><h3 className="text-sm font-semibold text-slate-900">Moderated Marks Criteria</h3><p className="text-[10px] leading-3.5 text-slate-500 mt-0.5">Rank ranges map continuously to a marks range. Marks are defined from and to.</p></div><div className="flex gap-1.5 shrink-0"><select value="Moderate" onChange={() => undefined} className="border border-slate-200 rounded-lg px-2 py-1.5 text-[11px] text-slate-700 bg-white"><option>Moderate</option></select><select value={sortDirection} onChange={e => setSortDirection(e.target.value as SortDirection)} className="border border-slate-200 rounded-lg px-2 py-1.5 text-[11px] text-slate-700 bg-white"><option value="none">No sort</option><option value="asc">Low to high</option><option value="desc">High to low</option></select></div></div>
-            <div className="grid grid-cols-2 gap-1.5">{criteria.map((tier, index) => <div key={index} className="rounded-lg border border-slate-200 overflow-hidden"><div className="bg-violet-50 px-2.5 py-1 text-[11px] font-semibold text-slate-800">Tier {index + 1}</div><div className="grid grid-cols-4 divide-x divide-slate-200">{(["from","to","minMarks","maxMarks"] as const).map(field => <div key={field} className="p-1"><label className="block text-[8px] uppercase tracking-wide text-slate-400 mb-0.5">{field === "minMarks" ? "Marks from" : field === "maxMarks" ? "Marks to" : field}</label><input type="number" value={tier[field]} onChange={e => updateCriteria(index, field, e.target.value)} className="w-full min-w-0 rounded-md border border-slate-200 px-1.5 py-1.5 text-[11px] text-slate-800"/></div>)}</div></div>)}</div>
-          </section>
+          <section className="rounded-xl border border-slate-200 bg-white p-2.5 shadow-sm"><div className="flex items-center justify-between mb-2"><div><h3 className="text-sm font-semibold text-slate-900">Applied Components Summary</h3><p className="text-[10px] text-slate-500 mt-0.5">Choose components and set their weightage.</p></div><span className={`text-[11px] font-semibold ${selectedTotal === TARGET ? "text-emerald-600" : "text-amber-600"}`}>Selected total: {selectedTotal}/40</span></div><div className="grid grid-cols-3 grid-rows-2 gap-1.5">{COMPONENTS.map(({ key, label }) => { const checked = draftBasicColumns.includes(key); return <label key={key} className={`min-w-0 rounded-lg border p-1.5 cursor-pointer transition ${checked ? "border-violet-200 bg-violet-50/60" : "border-slate-200 bg-white"}`}><div className="flex items-center gap-1.5 min-w-0"><input type="checkbox" checked={checked} onChange={() => toggleBasic(key)} className="h-3.5 w-3.5 accent-[#4a35b3] shrink-0"/><span className="text-[11px] font-medium text-slate-700 truncate">{label}</span></div><input aria-label={`${label} weightage`} type="number" min="0" step="0.1" value={draftWeights[key]} onChange={e => updateWeight(key, e.target.value)} className="mt-1 w-full rounded-md border border-slate-200 px-2 py-1 text-xs text-slate-800 outline-none focus:border-violet-400"/></label>; })}</div><div className="flex items-center justify-between mt-2 gap-2"><p className="text-[10px] leading-3.5 text-slate-400">Only checked components count. Weightage is normalized to exactly 40 when applied.</p><button onClick={applyWeights} disabled={applyingWeights || selectedTotal <= 0} className="shrink-0 bg-[#3d2aa0] text-white text-xs font-semibold rounded-lg px-3 py-1.5 shadow-sm disabled:opacity-50">{applyingWeights ? "Applying..." : "Apply"}</button></div></section>
+          <section className="rounded-xl border border-slate-200 bg-white p-2.5 shadow-sm"><div className="flex items-start justify-between gap-2 mb-1.5"><div><h3 className="text-sm font-semibold text-slate-900">Moderated Marks Criteria</h3><p className="text-[10px] leading-3.5 text-slate-500 mt-0.5">Rank ranges map continuously to a marks range. Marks are defined from and to.</p></div><div className="flex gap-1.5 shrink-0"><select value="Moderate" onChange={() => undefined} className="border border-slate-200 rounded-lg px-2 py-1.5 text-[11px] text-slate-700 bg-white"><option>Moderate</option></select><select value={sortDirection} onChange={e => setSortDirection(e.target.value as SortDirection)} className="border border-slate-200 rounded-lg px-2 py-1.5 text-[11px] text-slate-700 bg-white"><option value="none">No sort</option><option value="asc">Low to high</option><option value="desc">High to low</option></select></div></div><div className="grid grid-cols-2 gap-1.5">{criteria.map((tier, index) => <div key={index} className="rounded-lg border border-slate-200 overflow-hidden"><div className="bg-violet-50 px-2.5 py-1 text-[11px] font-semibold text-slate-800">Tier {index + 1}</div><div className="grid grid-cols-4 divide-x divide-slate-200">{(["from","to","minMarks","maxMarks"] as const).map(field => <div key={field} className="p-1"><label className="block text-[8px] uppercase tracking-wide text-slate-400 mb-0.5">{field === "minMarks" ? "Marks from" : field === "maxMarks" ? "Marks to" : field}</label><input type="number" value={tier[field]} onChange={e => updateCriteria(index, field, e.target.value)} className="w-full min-w-0 rounded-md border border-slate-200 px-1.5 py-1.5 text-[11px] text-slate-800"/></div>)}</div></div>)}</div></section>
         </div>
         <section className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden"><div className="px-3 py-2 border-b border-slate-100"><h3 className="text-sm font-semibold text-slate-900">Internal Marks Data</h3><p className="text-[10px] text-slate-500 mt-0.5">Basic marks use the selected components. Moderated marks are calculated from the configured rank criteria.</p></div><div className="max-h-[620px] overflow-y-auto overflow-x-hidden"><table className="w-full table-fixed border-collapse text-[10px]"><colgroup><col className="w-[2.5%]"/><col className="w-[16%]"/><col className="w-[13%]"/><col className="w-[7.5%]"/><col className="w-[7.5%]"/><col className="w-[7.5%]"/><col className="w-[9%]"/><col className="w-[7.5%]"/><col className="w-[7.5%]"/><col className="w-[9%]"/><col className="w-[10%]"/></colgroup><thead className="sticky top-0 bg-white z-10"><tr className="border-b border-slate-200 text-slate-500"><th className="text-center px-0.5 py-2 font-semibold">#</th><th className="text-left px-1.5 py-2 font-semibold">Name</th><th className="text-center px-1 py-2 font-semibold">Enrollment</th>{HEADERS.map(h => <th key={h.key} className="text-center px-0.5 py-2 font-semibold leading-3">{h.label}</th>)}</tr></thead><tbody>{sortedRows.map((row,index) => <tr key={row.enrollmentNo} className="border-b border-slate-100 last:border-0 hover:bg-slate-50/70"><td className="text-center px-0.5 py-1.5 text-slate-400 tabular-nums">{index+1}</td><td className="px-1.5 py-1.5 text-slate-800 font-medium truncate" title={row.name}>{row.name}</td><td className="text-center px-1 py-1.5 text-slate-500 truncate tabular-nums">{row.enrollmentNo}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.assignment}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.presentation}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.attendance}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.moderatedAttendanceWeighted}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.midsem1}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.midsem2}</td><td className={`text-center px-0.5 py-1.5 ${scoreClass(row.basic)} tabular-nums`}>{row.basic}</td><td className={`text-center px-0.5 py-1.5 ${scoreClass(row.moderated)} tabular-nums`}>{row.moderated}</td></tr>)}</tbody></table></div></section>
       </> : data && <>
         <div className="at-risk-layout">
-          <section className="at-risk-filter rounded-xl border border-slate-200 bg-white p-3 shadow-sm">
-            <div className="flex items-center gap-3 flex-wrap">
-              <div className="shrink-0"><h3 className="text-sm font-semibold text-slate-900">At-Risk Filters</h3><p className="text-[10px] text-slate-500 mt-0.5">Choose a mark column, range and sort.</p></div>
-              <div className="flex-1 min-w-[180px]"><label className="block text-[10px] text-slate-500 mb-1">Column</label><select value={riskColumn} onChange={e => setRiskColumn(e.target.value as ColumnKey)} className="border border-slate-200 rounded-lg px-2.5 py-2 text-xs"><option value="basic">Basic</option><option value="moderated">Moderated</option><option value="assignment">Assignment</option><option value="presentation">Presentation</option><option value="attendance">Attendance</option><option value="moderatedAttendance">Moderated Att.</option><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option></select></div>
-              <label className="w-[150px]"><span className="block text-[10px] text-slate-500 mb-1">Lower bound</span><input type="number" min="0" max="40" value={riskLower} onChange={e => setRiskLower(num(e.target.value,riskLower))} className="w-full rounded-lg border border-slate-200 px-2.5 py-2 text-xs"/></label>
-              <label className="w-[150px]"><span className="block text-[10px] text-slate-500 mb-1">Upper bound</span><input type="number" min="0" max="40" value={riskUpper} onChange={e => setRiskUpper(num(e.target.value,riskUpper))} className="w-full rounded-lg border border-slate-200 px-2.5 py-2 text-xs"/></label>
-              <div className="w-[150px]"><label className="block text-[10px] text-slate-500 mb-1">Sort</label><select value={sortDirection} onChange={e => setSortDirection(e.target.value as SortDirection)} className="border border-slate-200 rounded-lg px-2.5 py-2 text-xs"><option value="none">No sort</option><option value="asc">Low to high</option><option value="desc">High to low</option></select></div>
+          <section className="at-risk-filter rounded-xl border border-slate-200 bg-white shadow-sm">
+            <div className="at-risk-filter-inner">
+              <div className="at-risk-filter-title"><h3>At-Risk Filters</h3><p>Choose a mark column, range and sort.</p></div>
+              <label><span>Column</span><select value={riskColumn} onChange={e => setRiskColumn(e.target.value as ColumnKey)}><option value="basic">Basic</option><option value="moderated">Moderated</option><option value="assignment">Assignment</option><option value="presentation">Presentation</option><option value="attendance">Attendance</option><option value="moderatedAttendance">Moderated Att.</option><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option></select></label>
+              <label><span>Lower bound</span><input type="number" min="0" max="40" value={riskLower} onChange={e => setRiskLower(num(e.target.value,riskLower))}/></label>
+              <label><span>Upper bound</span><input type="number" min="0" max="40" value={riskUpper} onChange={e => setRiskUpper(num(e.target.value,riskUpper))}/></label>
+              <label><span>Sort</span><select value={sortDirection} onChange={e => setSortDirection(e.target.value as SortDirection)}><option value="none">No sort</option><option value="asc">Low to high</option><option value="desc">High to low</option></select></label>
             </div>
           </section>
-
           <section className="at-risk-table rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
             <div className="px-3 py-2 border-b border-slate-100 flex items-center justify-between"><div><h3 className="text-sm font-semibold text-slate-900">Filtered Students</h3><p className="text-[10px] text-slate-500 mt-0.5">Showing {filteredRiskRows.length} of {baseRows.length} students.</p></div><span className="text-[10px] rounded-full bg-slate-100 px-2 py-1 text-slate-600">{filteredRiskRows.length} Students</span></div>
-            <div className="max-h-[620px] overflow-y-auto overflow-x-hidden"><table className="w-full table-fixed text-[10px] border-collapse"><colgroup><col className="w-[16%]"/><col className="w-[20%]"/><col className="w-[12%]"/><col className="w-[12%]"/><col className="w-[12%]"/><col className="w-[14%]"/><col className="w-[14%]"/></colgroup><thead className="sticky top-0 bg-white z-10"><tr className="border-b border-slate-200 text-slate-500"><th className="text-left px-2 py-2">Enrollment</th><th className="text-left px-2 py-2">Student</th><th className="text-center px-1 py-2">Marks</th><th className="text-center px-1 py-2">Moderated</th><th className="text-center px-1 py-2">Rank</th><th className="text-center px-1 py-2">Tier</th><th className="text-center px-1 py-2">Status</th></tr></thead><tbody>{filteredRiskRows.map(row=><tr key={row.enrollmentNo} className="border-b border-slate-100"><td className="px-2 py-1.5 text-slate-500 truncate">{row.enrollmentNo}</td><td className="px-2 py-1.5 font-medium text-slate-800 truncate">{row.name}</td><td className={`text-center px-1 py-1.5 ${scoreClass(row.basic)}`}>{row.basic}</td><td className={`text-center px-1 py-1.5 ${scoreClass(row.moderated)}`}>{row.moderated}</td><td className="text-center px-1 py-1.5 text-slate-600">{row.rank}</td><td className="text-center px-1 py-1.5 text-slate-600">{criteria.findIndex(c=>row.rank>=c.from&&row.rank<=c.to)+1||"—"}</td><td className="text-center px-1 py-1.5"><span className={`inline-flex rounded-full px-2 py-0.5 text-[9px] ${row.basic<16?"bg-red-50 text-red-600":row.basic<24?"bg-amber-50 text-amber-700":"bg-emerald-50 text-emerald-700"}`}>{row.basic<16?"Critical Risk":row.basic<24?"Needs Attention":"Good"}</span></td></tr>)}</tbody></table></div>
+            <div className="max-h-[620px] overflow-y-auto overflow-x-hidden"><table className="w-full table-fixed text-[10px] border-collapse"><colgroup><col className="w-[18%]"/><col className="w-[24%]"/><col className="w-[12%]"/><col className="w-[12%]"/><col className="w-[10%]"/><col className="w-[10%]"/><col className="w-[14%]"/></colgroup><thead className="sticky top-0 bg-white z-10"><tr className="border-b border-slate-200 text-slate-500"><th className="text-left px-2 py-2">Enrollment</th><th className="text-left px-2 py-2">Student</th><th className="text-center px-1 py-2">Marks</th><th className="text-center px-1 py-2">Moderated</th><th className="text-center px-1 py-2">Rank</th><th className="text-center px-1 py-2">Tier</th><th className="text-center px-1 py-2">Status</th></tr></thead><tbody>{filteredRiskRows.map(row=><tr key={row.enrollmentNo} className="border-b border-slate-100"><td className="px-2 py-1.5 text-slate-500 truncate">{row.enrollmentNo}</td><td className="px-2 py-1.5 font-medium text-slate-800 truncate">{row.name}</td><td className={`text-center px-1 py-1.5 ${scoreClass(row.basic)}`}>{row.basic}</td><td className={`text-center px-1 py-1.5 ${scoreClass(row.moderated)}`}>{row.moderated}</td><td className="text-center px-1 py-1.5 text-slate-600">{row.rank}</td><td className="text-center px-1 py-1.5 text-slate-600">{criteria.findIndex(c=>row.rank>=c.from&&row.rank<=c.to)+1||"—"}</td><td className="text-center px-1 py-1.5"><span className={`inline-flex rounded-full px-2 py-0.5 text-[9px] ${row.basic<16?"bg-red-50 text-red-600":row.basic<24?"bg-amber-50 text-amber-700":"bg-emerald-50 text-emerald-700"}`}>{row.basic<16?"Critical Risk":row.basic<24?"Needs Attention":"Good"}</span></td></tr>)}</tbody></table></div>
           </section>
-
           <aside className="at-risk-side-stack">
             <section className="rounded-xl border border-slate-200 bg-white p-3 shadow-sm"><h3 className="text-sm font-semibold text-slate-900">Distribution</h3><div className="h-52 mt-1"><ResponsiveContainer width="100%" height="100%"><PieChart><Pie data={riskDistribution} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={70}>{riskDistribution.map((_,i)=><Cell key={i} fill={COLORS[i]}/>)}</Pie><Tooltip/></PieChart></ResponsiveContainer></div></section>
             <section className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden"><div className="px-3 py-2 border-b border-slate-100"><h3 className="text-sm font-semibold text-slate-900">Top Students in Filter</h3></div><div className="grid grid-cols-1 divide-y divide-slate-100">{topFive.map(row=><div key={row.enrollmentNo} className="px-3 py-2.5 flex items-center justify-between gap-3"><div className="text-[10px] font-semibold text-slate-800 truncate">{row.name}</div><div className={`text-sm shrink-0 ${scoreClass(columnValue(row,riskColumn))}`}>{columnValue(row,riskColumn)}</div></div>)}</div></section>

From 4e9083b4ffbde673b6b01d1fa867150d0c985330 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sat, 29 Aug 2026 13:45:31 +0530
Subject: [PATCH 04/80] Fix At Risk filters, chart interaction, and status
 labels

---
 .../subject-analysis/[subjectId]/overall.tsx  | 47 ++++++++++++++-----
 1 file changed, 36 insertions(+), 11 deletions(-)

diff --git a/pages/subject-analysis/[subjectId]/overall.tsx b/pages/subject-analysis/[subjectId]/overall.tsx
index f582754..e1ba817 100644
--- a/pages/subject-analysis/[subjectId]/overall.tsx
+++ b/pages/subject-analysis/[subjectId]/overall.tsx
@@ -66,6 +66,12 @@ function scoreClass(value: number, max = 40) {
   if (ratio >= 0.6) return "text-amber-600 font-semibold";
   return "text-red-500 font-semibold";
 }
+function riskStatus(value: number) {
+  if (value > 32) return { label: "Excellent", className: "bg-emerald-50 text-emerald-700" };
+  if (value >= 24) return { label: "Good", className: "bg-green-50 text-green-700" };
+  if (value >= 16) return { label: "Needs Attention", className: "bg-amber-50 text-amber-700" };
+  return { label: "Critical Risk", className: "bg-red-50 text-red-600" };
+}
 
 export default function SubjectOverallPage() {
   const router = useRouter();
@@ -88,6 +94,10 @@ export default function SubjectOverallPage() {
   const [riskColumn, setRiskColumn] = useState<ColumnKey>("basic");
   const [riskLower, setRiskLower] = useState(0);
   const [riskUpper, setRiskUpper] = useState(40);
+  const [draftRiskColumn, setDraftRiskColumn] = useState<ColumnKey>("basic");
+  const [draftRiskLower, setDraftRiskLower] = useState(0);
+  const [draftRiskUpper, setDraftRiskUpper] = useState(40);
+  const [draftSortDirection, setDraftSortDirection] = useState<SortDirection>("none");
 
   async function loadAnalysis(sync = false) {
     if (!subjectId || typeof subjectId !== "string") return;
@@ -143,11 +153,11 @@ export default function SubjectOverallPage() {
   }, [baseRows, riskColumn, riskLower, riskUpper, sortDirection]);
   const topFive = useMemo(() => [...filteredRiskRows].sort((a, b) => columnValue(b, riskColumn) - columnValue(a, riskColumn)).slice(0, 5), [filteredRiskRows, riskColumn]);
   const riskDistribution = useMemo(() => [
-    { name: "Above 32", value: baseRows.filter(r => r.basic > 32).length },
-    { name: "24–32", value: baseRows.filter(r => r.basic >= 24 && r.basic <= 32).length },
-    { name: "16–24", value: baseRows.filter(r => r.basic >= 16 && r.basic < 24).length },
-    { name: "Below 16", value: baseRows.filter(r => r.basic < 16).length },
-  ], [baseRows]);
+    { name: "Excellent", value: baseRows.filter(r => columnValue(r, riskColumn) > 32) .length, lower: 32.0001, upper: 40 },
+    { name: "Good", value: baseRows.filter(r => { const v = columnValue(r, riskColumn); return v >= 24 && v <= 32; }).length, lower: 24, upper: 32 },
+    { name: "Needs Attention", value: baseRows.filter(r => { const v = columnValue(r, riskColumn); return v >= 16 && v < 24; }).length, lower: 16, upper: 23.9999 },
+    { name: "Critical Risk", value: baseRows.filter(r => columnValue(r, riskColumn) < 16).length, lower: 0, upper: 15.9999 },
+  ], [baseRows, riskColumn]);
 
   function updateWeight(key: WeightKey, value: string) { setDraftWeights(current => ({ ...current, [key]: num(value, current[key]) })); }
   function toggleBasic(key: WeightKey) { setDraftBasicColumns(current => { if (current.includes(key)) return current.filter(x => x !== key); if (key === "attendance") return [...current.filter(x => x !== "moderatedAttendance"), key]; if (key === "moderatedAttendance") return [...current.filter(x => x !== "attendance"), key]; return [...current, key]; }); }
@@ -155,6 +165,20 @@ export default function SubjectOverallPage() {
   function updateCriteria(i: number, field: keyof Criteria, value: string) {
     setCriteria(current => { const next = current.map(row => ({ ...row })); const parsed = num(value, next[i][field]); if (field === "from") return current; if (field === "to") next[i].to = Math.max(next[i].from, Math.floor(parsed)); else next[i][field] = parsed; next[0].from = 1; for (let index = 1; index < next.length; index++) { next[index].from = next[index - 1].to + 1; if (next[index].to < next[index].from) next[index].to = next[index].from; } return next; });
   }
+  function applyRiskFilters() {
+    const lo = Math.min(draftRiskLower, draftRiskUpper);
+    const hi = Math.max(draftRiskLower, draftRiskUpper);
+    setRiskColumn(draftRiskColumn);
+    setRiskLower(lo);
+    setRiskUpper(hi);
+    setSortDirection(draftSortDirection);
+  }
+  function selectDistributionBucket(index: number) {
+    const bucket = riskDistribution[index];
+    if (!bucket) return;
+    setDraftRiskLower(bucket.lower);
+    setDraftRiskUpper(bucket.upper);
+  }
 
   return <div className="analysis-layout">
     <aside className="analysis-sidebar">
@@ -180,18 +204,19 @@ export default function SubjectOverallPage() {
           <section className="at-risk-filter rounded-xl border border-slate-200 bg-white shadow-sm">
             <div className="at-risk-filter-inner">
               <div className="at-risk-filter-title"><h3>At-Risk Filters</h3><p>Choose a mark column, range and sort.</p></div>
-              <label><span>Column</span><select value={riskColumn} onChange={e => setRiskColumn(e.target.value as ColumnKey)}><option value="basic">Basic</option><option value="moderated">Moderated</option><option value="assignment">Assignment</option><option value="presentation">Presentation</option><option value="attendance">Attendance</option><option value="moderatedAttendance">Moderated Att.</option><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option></select></label>
-              <label><span>Lower bound</span><input type="number" min="0" max="40" value={riskLower} onChange={e => setRiskLower(num(e.target.value,riskLower))}/></label>
-              <label><span>Upper bound</span><input type="number" min="0" max="40" value={riskUpper} onChange={e => setRiskUpper(num(e.target.value,riskUpper))}/></label>
-              <label><span>Sort</span><select value={sortDirection} onChange={e => setSortDirection(e.target.value as SortDirection)}><option value="none">No sort</option><option value="asc">Low to high</option><option value="desc">High to low</option></select></label>
+              <label><span>Column</span><select value={draftRiskColumn} onChange={e => setDraftRiskColumn(e.target.value as ColumnKey)}><option value="basic">Basic</option><option value="moderated">Moderated</option><option value="assignment">Assignment</option><option value="presentation">Presentation</option><option value="attendance">Attendance</option><option value="moderatedAttendance">Moderated Att.</option><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option></select></label>
+              <label><span>Lower bound</span><input type="number" min="0" max="40" value={draftRiskLower} onChange={e => setDraftRiskLower(num(e.target.value,draftRiskLower))}/></label>
+              <label><span>Upper bound</span><input type="number" min="0" max="40" value={draftRiskUpper} onChange={e => setDraftRiskUpper(num(e.target.value,draftRiskUpper))}/></label>
+              <label><span>Sort</span><select value={draftSortDirection} onChange={e => setDraftSortDirection(e.target.value as SortDirection)}><option value="none">No sort</option><option value="asc">Low to high</option><option value="desc">High to low</option></select></label>
+              <button type="button" onClick={applyRiskFilters} className="at-risk-apply">Apply</button>
             </div>
           </section>
           <section className="at-risk-table rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
             <div className="px-3 py-2 border-b border-slate-100 flex items-center justify-between"><div><h3 className="text-sm font-semibold text-slate-900">Filtered Students</h3><p className="text-[10px] text-slate-500 mt-0.5">Showing {filteredRiskRows.length} of {baseRows.length} students.</p></div><span className="text-[10px] rounded-full bg-slate-100 px-2 py-1 text-slate-600">{filteredRiskRows.length} Students</span></div>
-            <div className="max-h-[620px] overflow-y-auto overflow-x-hidden"><table className="w-full table-fixed text-[10px] border-collapse"><colgroup><col className="w-[18%]"/><col className="w-[24%]"/><col className="w-[12%]"/><col className="w-[12%]"/><col className="w-[10%]"/><col className="w-[10%]"/><col className="w-[14%]"/></colgroup><thead className="sticky top-0 bg-white z-10"><tr className="border-b border-slate-200 text-slate-500"><th className="text-left px-2 py-2">Enrollment</th><th className="text-left px-2 py-2">Student</th><th className="text-center px-1 py-2">Marks</th><th className="text-center px-1 py-2">Moderated</th><th className="text-center px-1 py-2">Rank</th><th className="text-center px-1 py-2">Tier</th><th className="text-center px-1 py-2">Status</th></tr></thead><tbody>{filteredRiskRows.map(row=><tr key={row.enrollmentNo} className="border-b border-slate-100"><td className="px-2 py-1.5 text-slate-500 truncate">{row.enrollmentNo}</td><td className="px-2 py-1.5 font-medium text-slate-800 truncate">{row.name}</td><td className={`text-center px-1 py-1.5 ${scoreClass(row.basic)}`}>{row.basic}</td><td className={`text-center px-1 py-1.5 ${scoreClass(row.moderated)}`}>{row.moderated}</td><td className="text-center px-1 py-1.5 text-slate-600">{row.rank}</td><td className="text-center px-1 py-1.5 text-slate-600">{criteria.findIndex(c=>row.rank>=c.from&&row.rank<=c.to)+1||"—"}</td><td className="text-center px-1 py-1.5"><span className={`inline-flex rounded-full px-2 py-0.5 text-[9px] ${row.basic<16?"bg-red-50 text-red-600":row.basic<24?"bg-amber-50 text-amber-700":"bg-emerald-50 text-emerald-700"}`}>{row.basic<16?"Critical Risk":row.basic<24?"Needs Attention":"Good"}</span></td></tr>)}</tbody></table></div>
+            <div className="max-h-[620px] overflow-y-auto overflow-x-hidden"><table className="w-full table-fixed text-[10px] border-collapse"><colgroup>{sortDirection !== "none" && <col className="w-[7%]"/>}<col className="w-[18%]"/><col className="w-[27%]"/><col className="w-[13%]"/><col className="w-[13%]"/><col className="w-[14%]"/></colgroup><thead className="sticky top-0 bg-white z-10"><tr className="border-b border-slate-200 text-slate-500">{sortDirection !== "none" && <th className="text-center px-1 py-2">Rank</th>}<th className="text-left px-2 py-2">Enrollment</th><th className="text-left px-2 py-2">Student</th><th className="text-center px-1 py-2">Marks</th><th className="text-center px-1 py-2">Moderated</th><th className="text-center px-1 py-2">Status</th></tr></thead><tbody>{filteredRiskRows.map((row,index)=>{ const status = riskStatus(columnValue(row,riskColumn)); return <tr key={row.enrollmentNo} className="border-b border-slate-100"><>{sortDirection !== "none" && <td className="text-center px-1 py-1.5 text-slate-600">{index + 1}</td>}<td className="px-2 py-1.5 text-slate-500 truncate">{row.enrollmentNo}</td><td className="px-2 py-1.5 font-medium text-slate-800 truncate">{row.name}</td><td className={`text-center px-1 py-1.5 ${scoreClass(row.basic)}`}>{row.basic}</td><td className={`text-center px-1 py-1.5 ${scoreClass(row.moderated)}`}>{row.moderated}</td><td className="text-center px-1 py-1.5"><span className={`inline-flex rounded-full px-2 py-0.5 text-[9px] ${status.className}`}>{status.label}</span></td></tr>})}</tbody></table></div>
           </section>
           <aside className="at-risk-side-stack">
-            <section className="rounded-xl border border-slate-200 bg-white p-3 shadow-sm"><h3 className="text-sm font-semibold text-slate-900">Distribution</h3><div className="h-52 mt-1"><ResponsiveContainer width="100%" height="100%"><PieChart><Pie data={riskDistribution} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={70}>{riskDistribution.map((_,i)=><Cell key={i} fill={COLORS[i]}/>)}</Pie><Tooltip/></PieChart></ResponsiveContainer></div></section>
+            <section className="rounded-xl border border-slate-200 bg-white p-3 shadow-sm"><h3 className="text-sm font-semibold text-slate-900">Distribution</h3><p className="mt-0.5 text-[10px] text-slate-500">Click a segment to stage that score range in the filters.</p><div className="h-52 mt-1"><ResponsiveContainer width="100%" height="100%"><PieChart><Pie data={riskDistribution} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={70} label={({ name, value }) => `${name}: ${value}`} labelLine={false} onClick={(_, index) => selectDistributionBucket(index)}>{riskDistribution.map((_,i)=><Cell key={i} fill={COLORS[i]} cursor="pointer"/>)}</Pie><Tooltip formatter={(value: number) => [`${value} students`, "Count"]}/></PieChart></ResponsiveContainer></div></section>
             <section className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden"><div className="px-3 py-2 border-b border-slate-100"><h3 className="text-sm font-semibold text-slate-900">Top Students in Filter</h3></div><div className="grid grid-cols-1 divide-y divide-slate-100">{topFive.map(row=><div key={row.enrollmentNo} className="px-3 py-2.5 flex items-center justify-between gap-3"><div className="text-[10px] font-semibold text-slate-800 truncate">{row.name}</div><div className={`text-sm shrink-0 ${scoreClass(columnValue(row,riskColumn))}`}>{columnValue(row,riskColumn)}</div></div>)}</div></section>
           </aside>
         </div>

From 9176da6331953b38f579a848abe4b9be80863ac6 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sat, 29 Aug 2026 13:46:10 +0530
Subject: [PATCH 05/80] Polish At Risk filter layout and chart controls

---
 app/globals.css | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 569ac28..28c7875 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -18,7 +18,6 @@
 .analysis-layout{display:grid;grid-template-columns:195px minmax(0,1fr);min-height:100vh}.analysis-sidebar{position:sticky;top:0;height:100vh;padding:22px 12px;border-right:1px solid rgba(203,213,225,.78);background:rgba(255,255,255,.58);backdrop-filter:blur(18px);display:flex;flex-direction:column}.analysis-brand{display:flex;align-items:center;gap:10px;padding:0 10px 24px;font-weight:700;font-size:16px}.analysis-brand__mark{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:#fff;background:linear-gradient(135deg,#251b62,#5544ba);box-shadow:0 8px 20px rgba(67,52,157,.22)}.analysis-side-nav{display:grid;gap:6px}.analysis-side-nav a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:10px;color:#667085;font-size:13px;font-weight:500;text-decoration:none;transition:.18s}.analysis-side-nav a:hover{background:rgba(79,70,229,.06);color:#2d246f}.analysis-side-nav a.is-active{color:#312783;background:linear-gradient(90deg,rgba(79,70,229,.12),rgba(79,70,229,.04));font-weight:650}.analysis-side-footer{margin-top:auto;border-top:1px solid rgba(203,213,225,.72);padding:16px 10px 0;color:#7b8798;font-size:11px}
 
 .analysis-page{min-width:0;padding:18px 28px 28px}.analysis-topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-bottom:16px}.analysis-title-row{display:flex;align-items:center;gap:10px}.analysis-title-row h1{font-size:24px;line-height:1.1;letter-spacing:-.035em;font-weight:750}.analysis-sync{font-size:11px;color:#7b8798;display:flex;align-items:center;gap:6px}.analysis-top-actions{display:flex;gap:10px}.analysis-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:9px;padding:10px 16px;background:linear-gradient(135deg,#241d58,#45369d);color:#fff;font-size:13px;font-weight:600;box-shadow:0 8px 18px rgba(49,39,120,.14)}.analysis-primary:disabled{opacity:.55}.analysis-raw-button{display:inline-flex;align-items:center;gap:.55rem;border:1px solid #dfe5ec;border-radius:.8rem;padding:.55rem .9rem;background:rgba(255,255,255,.8);color:#344054;font-size:.8rem;font-weight:600;box-shadow:0 4px 14px rgba(15,23,42,.04);transition:.15s ease}.analysis-raw-button:hover{background:#fff;transform:translateY(-1px);text-decoration:none}
-/* Attendance currently renders Raw Data in the top action slot; visually place that same link in the shared sidebar. */
 .analysis-top-actions>.analysis-raw-button{position:fixed;left:24px;top:174px;width:147px;min-height:42px;padding:11px 12px;border:0;border-radius:10px;background:transparent;box-shadow:none;color:#667085;font-size:13px;font-weight:500;z-index:20}.analysis-top-actions>.analysis-raw-button:hover{transform:none;background:rgba(79,70,229,.06);color:#2d246f}.analysis-top-actions>.analysis-raw-button span:first-child:before{content:"↓";display:inline-grid;place-items:center;width:18px;margin-right:9px;color:#667085;font-size:16px}.analysis-top-actions>.analysis-raw-button span:last-child{display:none}
 
 .subject-analysis-nav{margin-bottom:16px}.subject-analysis-nav__rail{display:flex;gap:4px;padding:5px 10px;border:1px solid rgba(203,213,225,.78);border-radius:14px;background:rgba(255,255,255,.5);box-shadow:0 8px 22px rgba(15,23,42,.035);overflow-x:auto}.subject-analysis-nav__item{display:flex;align-items:center;gap:9px;padding:10px 18px;border-radius:9px;color:#667085;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}.subject-analysis-nav__item:hover{background:#fff;color:#2d246f}.subject-analysis-nav__item.is-active{color:#3d2ea0;background:rgba(79,70,229,.08);border-bottom-color:#5141bd}
@@ -30,14 +29,13 @@
 .analysis-panel{border:1px solid rgba(203,213,225,.72);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(248,249,251,.74));box-shadow:0 12px 34px rgba(15,23,42,.045)}.analysis-settings{padding:20px;margin-bottom:18px}.analysis-settings h3{font-size:14px;font-weight:700}.analysis-settings-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end;margin-top:14px}.analysis-settings label{display:block;margin-bottom:7px;font-size:11px;font-weight:600;color:#667085}.analysis-settings input,.analysis-settings select{height:40px;background:rgba(255,255,255,.76)}.analysis-note{display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 12px;border:1px solid rgba(147,197,253,.28);border-radius:9px;background:rgba(239,246,255,.52);color:#52637a;font-size:11px}
 .analysis-content-grid{display:grid;grid-template-columns:minmax(520px,1.08fr) minmax(400px,.92fr);gap:16px}.analysis-table-panel{padding:18px}.analysis-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.analysis-panel-head h3{font-size:14px;font-weight:700}.analysis-count{padding:4px 8px;border-radius:999px;background:#f1f3f7;color:#667085;font-size:10px}.analysis-table-wrap{max-height:500px;overflow:auto;scrollbar-gutter:stable}.analysis-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}.analysis-table th{padding:10px 8px;text-align:left;color:#7b8798;font-size:10px;font-weight:700;border-bottom:1px solid #e9edf2}.analysis-table td{padding:10px 8px;border-bottom:1px solid #edf0f4;color:#566174}.analysis-table tr:hover td{background:rgba(79,70,229,.025)}.student-cell{display:flex;align-items:center;gap:9px;color:#172033!important;font-weight:500}.student-avatar{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#edf1ff;color:#4f46a8;font-size:9px;font-weight:700}.change-up{color:#15803d!important;font-weight:700}.change-down{color:#dc2626!important;font-weight:700}.trend-badge{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:10px}.trend-up{background:#ecfdf3;color:#15803d}.trend-down{background:#fef2f2;color:#dc2626}.trend-stable{background:#f2f4f7;color:#667085}.analysis-right-stack{display:grid;gap:16px}.analysis-chart-panel{padding:18px}.analysis-chart-panel p{margin-top:4px;color:#98a2b3;font-size:10px}.analysis-chart{height:220px;margin-top:10px}.analysis-chart .recharts-cartesian-grid line{stroke:#e3e7ed}.analysis-chart .recharts-text{fill:#667085}.analysis-insight{display:flex;align-items:center;gap:14px;padding:16px 18px;margin-top:16px}.analysis-insight-copy h4{font-size:13px;font-weight:700}.analysis-insight-copy p{margin-top:4px;font-size:11px;color:#667085}.analysis-insight-actions{display:flex;gap:10px;margin-left:auto}.analysis-secondary{display:inline-flex;align-items:center;gap:8px;border:1px solid #dfe5ec;background:rgba(255,255,255,.8);color:#344054;border-radius:9px;padding:9px 14px;font-size:12px;font-weight:600}
 
-/* Academic dashboard */
 .academic-content-grid{align-items:start}.academic-table-wrap{height:620px;max-height:620px}.academic-stats-panel{padding:16px;display:grid;grid-template-columns:1fr 1.4fr;gap:14px}.academic-highest{padding:12px 14px;border:1px solid #edf0f4;border-radius:12px;background:rgba(255,255,255,.58);display:flex;flex-direction:column;gap:5px}.academic-highest span,.academic-tier-card span{font-size:11px;color:#667085}.academic-highest strong{font-size:26px;line-height:1;color:#172033}.academic-highest p{margin:0;color:#475467;font-size:12px;line-height:1.35}.academic-tier-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.academic-tier-card{min-height:70px;padding:10px 12px;border:1px solid;border-radius:12px;background:rgba(255,255,255,.52);display:flex;flex-direction:column;justify-content:space-between}.academic-tier-card strong{font-size:21px;line-height:1}.academic-rank-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.academic-rank-panel{padding:16px;min-width:0}.academic-rank-panel h3{font-size:14px;font-weight:700;margin-bottom:10px}.academic-rank-row{display:grid;grid-template-columns:24px minmax(0,1fr) 32px;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #edf0f4}.academic-rank-row:last-child{border-bottom:0}.academic-rank-row>span{font-size:11px;color:#98a2b3}.academic-rank-row p{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#475467}.academic-rank-row strong{justify-self:end;font-size:13px;color:#172033}.academic-rank-row strong.is-negative{color:#dc2626}.academic-table-panel .analysis-table td:first-child{min-width:210px}.academic-table-panel .analysis-table th:not(:first-child),.academic-table-panel .analysis-table td:not(:first-child){text-align:center}.academic-table-panel .student-cell{white-space:nowrap}.academic-content-grid .analysis-chart{height:190px}
 
 .recharts-tooltip-wrapper .recharts-default-tooltip{border-radius:12px!important;border:1px solid #e2e8f0!important;box-shadow:0 12px 28px rgba(15,23,42,.1)!important;background:rgba(255,255,255,.97)!important}.analysis-stat-card,.analysis-ranked-list,.analysis-grade-badge{border-color:#e2e8f0}
 
 /* Overall > At Risk */
-.at-risk-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;grid-template-areas:"filter filter" "table side";gap:12px;align-items:start}.at-risk-filter{grid-area:filter}.at-risk-table{grid-area:table;min-width:0}.at-risk-side-stack{grid-area:side;display:grid;gap:12px;min-width:0}.at-risk-side-stack>section:first-child{min-height:250px}.at-risk-filter select,.at-risk-filter input{height:38px}.at-risk-filter label{margin:0}.at-risk-filter .flex-1{min-width:210px}
+.at-risk-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;grid-template-areas:"filter filter" "table side";gap:12px;align-items:start}.at-risk-filter{grid-area:filter}.at-risk-table{grid-area:table;min-width:0}.at-risk-side-stack{grid-area:side;display:grid;gap:12px;min-width:0}.at-risk-side-stack>section:first-child{min-height:250px}.at-risk-filter-inner{display:grid;grid-template-columns:minmax(220px,1.25fr) minmax(170px,1fr) minmax(130px,.7fr) minmax(130px,.7fr) auto;gap:10px;align-items:end;padding:12px}.at-risk-filter-title{min-width:0;padding:0 2px}.at-risk-filter-title h3{font-size:14px;font-weight:700;color:#172033}.at-risk-filter-title p{margin-top:3px;font-size:10px;color:#667085}.at-risk-filter label{display:block;min-width:0}.at-risk-filter label>span{display:block;margin:0 0 5px 2px;font-size:10px;font-weight:600;color:#667085}.at-risk-filter select,.at-risk-filter input{height:38px}.at-risk-apply{height:38px;padding:0 18px;border:0;border-radius:9px;background:linear-gradient(135deg,#251b62,#4637a3);color:#fff;font-size:12px;font-weight:600;box-shadow:0 7px 16px rgba(49,39,120,.14);white-space:nowrap}.at-risk-apply:hover{filter:brightness(1.03)}.at-risk-table table th,.at-risk-table table td{white-space:nowrap}.at-risk-table tbody tr:hover{background:rgba(79,70,229,.025)}.at-risk-side-stack>section{min-width:0}.at-risk-side-stack .recharts-pie-sector{cursor:pointer}.at-risk-side-stack .recharts-text{font-size:9px}.at-risk-side-stack>section:first-child{min-height:280px}
 
-@media(max-width:1100px){.analysis-hero{grid-template-columns:1fr 1fr}.analysis-hero-copy{grid-column:1/-1}.analysis-content-grid{grid-template-columns:1fr}.analysis-settings-grid{grid-template-columns:1fr 1fr}.analysis-sidebar{position:fixed;transform:translateX(-100%)}.analysis-layout{grid-template-columns:1fr}.analysis-page{padding:18px}.academic-table-wrap{height:500px;max-height:500px}.analysis-top-actions>.analysis-raw-button{position:static;width:auto;min-height:0;border:1px solid #dfe5ec;background:rgba(255,255,255,.8);box-shadow:0 4px 14px rgba(15,23,42,.04)}.analysis-top-actions>.analysis-raw-button span:first-child:before{display:none}.at-risk-layout{grid-template-columns:minmax(0,1fr) 280px}}
-@media(max-width:800px){.at-risk-layout{grid-template-columns:1fr;grid-template-areas:"filter" "table" "side"}.at-risk-filter .flex{align-items:stretch}.at-risk-filter .flex-1,.at-risk-filter label,.at-risk-filter>div>div:last-child{width:100%;min-width:0}.at-risk-side-stack{grid-template-columns:1fr 1fr}.at-risk-side-stack>section:first-child{min-height:0}}
-@media(max-width:700px){.analysis-topbar{align-items:flex-start;flex-direction:column}.analysis-title-row h1{font-size:21px}.analysis-top-actions{width:100%}.analysis-settings-grid{grid-template-columns:1fr}.analysis-hero{grid-template-columns:1fr}.analysis-content-grid{grid-template-columns:1fr}.analysis-page{padding:14px}.analysis-insight{align-items:flex-start;flex-direction:column}.analysis-insight-actions{margin-left:0;flex-wrap:wrap}.subject-analysis-nav__item{padding:9px 12px}.analysis-chart{height:200px}.academic-stats-panel,.academic-rank-grid{grid-template-columns:1fr}.academic-tier-grid{grid-template-columns:1fr 1fr}.academic-table-wrap{height:440px;max-height:440px}.at-risk-side-stack{grid-template-columns:1fr}.at-risk-filter .flex{flex-direction:column}}
+@media(max-width:1100px){.analysis-hero{grid-template-columns:1fr 1fr}.analysis-hero-copy{grid-column:1/-1}.analysis-content-grid{grid-template-columns:1fr}.analysis-settings-grid{grid-template-columns:1fr 1fr}.analysis-sidebar{position:fixed;transform:translateX(-100%)}.analysis-layout{grid-template-columns:1fr}.analysis-page{padding:18px}.academic-table-wrap{height:500px;max-height:500px}.analysis-top-actions>.analysis-raw-button{position:static;width:auto;min-height:0;border:1px solid #dfe5ec;background:rgba(255,255,255,.8);box-shadow:0 4px 14px rgba(15,23,42,.04)}.analysis-top-actions>.analysis-raw-button span:first-child:before{display:none}.at-risk-layout{grid-template-columns:minmax(0,1fr) 280px}.at-risk-filter-inner{grid-template-columns:minmax(190px,1.2fr) repeat(2,minmax(120px,.7fr)) minmax(150px,.9fr) auto;gap:8px}.at-risk-filter-title p{white-space:nowrap}}
+@media(max-width:800px){.at-risk-layout{grid-template-columns:1fr;grid-template-areas:"filter" "table" "side"}.at-risk-filter-inner{grid-template-columns:1fr 1fr}.at-risk-filter-title{grid-column:1/-1}.at-risk-apply{width:100%}.at-risk-side-stack{grid-template-columns:1fr 1fr}.at-risk-side-stack>section:first-child{min-height:0}}
+@media(max-width:700px){.analysis-topbar{align-items:flex-start;flex-direction:column}.analysis-title-row h1{font-size:21px}.analysis-top-actions{width:100%}.analysis-settings-grid{grid-template-columns:1fr}.analysis-hero{grid-template-columns:1fr}.analysis-content-grid{grid-template-columns:1fr}.analysis-page{padding:14px}.analysis-insight{align-items:flex-start;flex-direction:column}.analysis-insight-actions{margin-left:0;flex-wrap:wrap}.subject-analysis-nav__item{padding:9px 12px}.analysis-chart{height:200px}.academic-stats-panel,.academic-rank-grid{grid-template-columns:1fr}.academic-tier-grid{grid-template-columns:1fr 1fr}.academic-table-wrap{height:440px;max-height:440px}.at-risk-filter-inner{grid-template-columns:1fr}.at-risk-filter-title{grid-column:auto}.at-risk-side-stack{grid-template-columns:1fr}.at-risk-filter-title p{white-space:normal}}

From a844ec3e1bf71548893bba843b6d455abe9ebdba Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sat, 29 Aug 2026 14:04:48 +0530
Subject: [PATCH 06/80] Fix At Risk table JSX syntax

---
 pages/subject-analysis/[subjectId]/overall.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/subject-analysis/[subjectId]/overall.tsx b/pages/subject-analysis/[subjectId]/overall.tsx
index e1ba817..ab54f86 100644
--- a/pages/subject-analysis/[subjectId]/overall.tsx
+++ b/pages/subject-analysis/[subjectId]/overall.tsx
@@ -153,7 +153,7 @@ export default function SubjectOverallPage() {
   }, [baseRows, riskColumn, riskLower, riskUpper, sortDirection]);
   const topFive = useMemo(() => [...filteredRiskRows].sort((a, b) => columnValue(b, riskColumn) - columnValue(a, riskColumn)).slice(0, 5), [filteredRiskRows, riskColumn]);
   const riskDistribution = useMemo(() => [
-    { name: "Excellent", value: baseRows.filter(r => columnValue(r, riskColumn) > 32) .length, lower: 32.0001, upper: 40 },
+    { name: "Excellent", value: baseRows.filter(r => columnValue(r, riskColumn) > 32).length, lower: 32.0001, upper: 40 },
     { name: "Good", value: baseRows.filter(r => { const v = columnValue(r, riskColumn); return v >= 24 && v <= 32; }).length, lower: 24, upper: 32 },
     { name: "Needs Attention", value: baseRows.filter(r => { const v = columnValue(r, riskColumn); return v >= 16 && v < 24; }).length, lower: 16, upper: 23.9999 },
     { name: "Critical Risk", value: baseRows.filter(r => columnValue(r, riskColumn) < 16).length, lower: 0, upper: 15.9999 },
@@ -213,7 +213,7 @@ export default function SubjectOverallPage() {
           </section>
           <section className="at-risk-table rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
             <div className="px-3 py-2 border-b border-slate-100 flex items-center justify-between"><div><h3 className="text-sm font-semibold text-slate-900">Filtered Students</h3><p className="text-[10px] text-slate-500 mt-0.5">Showing {filteredRiskRows.length} of {baseRows.length} students.</p></div><span className="text-[10px] rounded-full bg-slate-100 px-2 py-1 text-slate-600">{filteredRiskRows.length} Students</span></div>
-            <div className="max-h-[620px] overflow-y-auto overflow-x-hidden"><table className="w-full table-fixed text-[10px] border-collapse"><colgroup>{sortDirection !== "none" && <col className="w-[7%]"/>}<col className="w-[18%]"/><col className="w-[27%]"/><col className="w-[13%]"/><col className="w-[13%]"/><col className="w-[14%]"/></colgroup><thead className="sticky top-0 bg-white z-10"><tr className="border-b border-slate-200 text-slate-500">{sortDirection !== "none" && <th className="text-center px-1 py-2">Rank</th>}<th className="text-left px-2 py-2">Enrollment</th><th className="text-left px-2 py-2">Student</th><th className="text-center px-1 py-2">Marks</th><th className="text-center px-1 py-2">Moderated</th><th className="text-center px-1 py-2">Status</th></tr></thead><tbody>{filteredRiskRows.map((row,index)=>{ const status = riskStatus(columnValue(row,riskColumn)); return <tr key={row.enrollmentNo} className="border-b border-slate-100"><>{sortDirection !== "none" && <td className="text-center px-1 py-1.5 text-slate-600">{index + 1}</td>}<td className="px-2 py-1.5 text-slate-500 truncate">{row.enrollmentNo}</td><td className="px-2 py-1.5 font-medium text-slate-800 truncate">{row.name}</td><td className={`text-center px-1 py-1.5 ${scoreClass(row.basic)}`}>{row.basic}</td><td className={`text-center px-1 py-1.5 ${scoreClass(row.moderated)}`}>{row.moderated}</td><td className="text-center px-1 py-1.5"><span className={`inline-flex rounded-full px-2 py-0.5 text-[9px] ${status.className}`}>{status.label}</span></td></tr>})}</tbody></table></div>
+            <div className="max-h-[620px] overflow-y-auto overflow-x-hidden"><table className="w-full table-fixed text-[10px] border-collapse"><colgroup>{sortDirection !== "none" && <col className="w-[7%]"/>}<col className="w-[18%]"/><col className="w-[27%]"/><col className="w-[13%]"/><col className="w-[13%]"/><col className="w-[14%]"/></colgroup><thead className="sticky top-0 bg-white z-10"><tr className="border-b border-slate-200 text-slate-500">{sortDirection !== "none" && <th className="text-center px-1 py-2">Rank</th>}<th className="text-left px-2 py-2">Enrollment</th><th className="text-left px-2 py-2">Student</th><th className="text-center px-1 py-2">Marks</th><th className="text-center px-1 py-2">Moderated</th><th className="text-center px-1 py-2">Status</th></tr></thead><tbody>{filteredRiskRows.map((row,index)=>{ const status = riskStatus(columnValue(row,riskColumn)); return <tr key={row.enrollmentNo} className="border-b border-slate-100">{sortDirection !== "none" && <td className="text-center px-1 py-1.5 text-slate-600">{index + 1}</td>}<td className="px-2 py-1.5 text-slate-500 truncate">{row.enrollmentNo}</td><td className="px-2 py-1.5 font-medium text-slate-800 truncate">{row.name}</td><td className={`text-center px-1 py-1.5 ${scoreClass(row.basic)}`}>{row.basic}</td><td className={`text-center px-1 py-1.5 ${scoreClass(row.moderated)}`}>{row.moderated}</td><td className="text-center px-1 py-1.5"><span className={`inline-flex rounded-full px-2 py-0.5 text-[9px] ${status.className}`}>{status.label}</span></td></tr>})}</tbody></table></div>
           </section>
           <aside className="at-risk-side-stack">
             <section className="rounded-xl border border-slate-200 bg-white p-3 shadow-sm"><h3 className="text-sm font-semibold text-slate-900">Distribution</h3><p className="mt-0.5 text-[10px] text-slate-500">Click a segment to stage that score range in the filters.</p><div className="h-52 mt-1"><ResponsiveContainer width="100%" height="100%"><PieChart><Pie data={riskDistribution} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={70} label={({ name, value }) => `${name}: ${value}`} labelLine={false} onClick={(_, index) => selectDistributionBucket(index)}>{riskDistribution.map((_,i)=><Cell key={i} fill={COLORS[i]} cursor="pointer"/>)}</Pie><Tooltip formatter={(value: number) => [`${value} students`, "Count"]}/></PieChart></ResponsiveContainer></div></section>

From c680c2f8bd82a534aeb85a06c4a2b4864f834b63 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sat, 29 Aug 2026 14:16:13 +0530
Subject: [PATCH 07/80] Refine At Risk top students and filter layout

---
 pages/subject-analysis/[subjectId]/overall.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/pages/subject-analysis/[subjectId]/overall.tsx b/pages/subject-analysis/[subjectId]/overall.tsx
index ab54f86..707d060 100644
--- a/pages/subject-analysis/[subjectId]/overall.tsx
+++ b/pages/subject-analysis/[subjectId]/overall.tsx
@@ -151,7 +151,7 @@ export default function SubjectOverallPage() {
     if (sortDirection === "none") return rows.sort((a, b) => a.originalIndex - b.originalIndex);
     return rows.sort((a: any, b: any) => ((sortDirection === "asc" ? a[riskColumn] - b[riskColumn] : b[riskColumn] - a[riskColumn]) || a.name.localeCompare(b.name)));
   }, [baseRows, riskColumn, riskLower, riskUpper, sortDirection]);
-  const topFive = useMemo(() => [...filteredRiskRows].sort((a, b) => columnValue(b, riskColumn) - columnValue(a, riskColumn)).slice(0, 5), [filteredRiskRows, riskColumn]);
+  const topFive = useMemo(() => [...baseRows].sort((a, b) => columnValue(b, riskColumn) - columnValue(a, riskColumn) || a.originalIndex - b.originalIndex).slice(0, 5), [baseRows, riskColumn]);
   const riskDistribution = useMemo(() => [
     { name: "Excellent", value: baseRows.filter(r => columnValue(r, riskColumn) > 32).length, lower: 32.0001, upper: 40 },
     { name: "Good", value: baseRows.filter(r => { const v = columnValue(r, riskColumn); return v >= 24 && v <= 32; }).length, lower: 24, upper: 32 },
@@ -204,11 +204,13 @@ export default function SubjectOverallPage() {
           <section className="at-risk-filter rounded-xl border border-slate-200 bg-white shadow-sm">
             <div className="at-risk-filter-inner">
               <div className="at-risk-filter-title"><h3>At-Risk Filters</h3><p>Choose a mark column, range and sort.</p></div>
-              <label><span>Column</span><select value={draftRiskColumn} onChange={e => setDraftRiskColumn(e.target.value as ColumnKey)}><option value="basic">Basic</option><option value="moderated">Moderated</option><option value="assignment">Assignment</option><option value="presentation">Presentation</option><option value="attendance">Attendance</option><option value="moderatedAttendance">Moderated Att.</option><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option></select></label>
-              <label><span>Lower bound</span><input type="number" min="0" max="40" value={draftRiskLower} onChange={e => setDraftRiskLower(num(e.target.value,draftRiskLower))}/></label>
-              <label><span>Upper bound</span><input type="number" min="0" max="40" value={draftRiskUpper} onChange={e => setDraftRiskUpper(num(e.target.value,draftRiskUpper))}/></label>
-              <label><span>Sort</span><select value={draftSortDirection} onChange={e => setDraftSortDirection(e.target.value as SortDirection)}><option value="none">No sort</option><option value="asc">Low to high</option><option value="desc">High to low</option></select></label>
-              <button type="button" onClick={applyRiskFilters} className="at-risk-apply">Apply</button>
+              <div className="at-risk-filter-controls">
+                <label><span>Column</span><select value={draftRiskColumn} onChange={e => setDraftRiskColumn(e.target.value as ColumnKey)}><option value="basic">Basic</option><option value="moderated">Moderated</option><option value="assignment">Assignment</option><option value="presentation">Presentation</option><option value="attendance">Attendance</option><option value="moderatedAttendance">Moderated Att.</option><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option></select></label>
+                <label><span>Lower bound</span><input type="number" min="0" max="40" value={draftRiskLower} onChange={e => setDraftRiskLower(num(e.target.value,draftRiskLower))}/></label>
+                <label><span>Upper bound</span><input type="number" min="0" max="40" value={draftRiskUpper} onChange={e => setDraftRiskUpper(num(e.target.value,draftRiskUpper))}/></label>
+                <label><span>Sort</span><select value={draftSortDirection} onChange={e => setDraftSortDirection(e.target.value as SortDirection)}><option value="none">No sort</option><option value="asc">Low to high</option><option value="desc">High to low</option></select></label>
+                <button type="button" onClick={applyRiskFilters} className="at-risk-apply">Apply</button>
+              </div>
             </div>
           </section>
           <section className="at-risk-table rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
@@ -217,7 +219,7 @@ export default function SubjectOverallPage() {
           </section>
           <aside className="at-risk-side-stack">
             <section className="rounded-xl border border-slate-200 bg-white p-3 shadow-sm"><h3 className="text-sm font-semibold text-slate-900">Distribution</h3><p className="mt-0.5 text-[10px] text-slate-500">Click a segment to stage that score range in the filters.</p><div className="h-52 mt-1"><ResponsiveContainer width="100%" height="100%"><PieChart><Pie data={riskDistribution} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={70} label={({ name, value }) => `${name}: ${value}`} labelLine={false} onClick={(_, index) => selectDistributionBucket(index)}>{riskDistribution.map((_,i)=><Cell key={i} fill={COLORS[i]} cursor="pointer"/>)}</Pie><Tooltip formatter={(value: number) => [`${value} students`, "Count"]}/></PieChart></ResponsiveContainer></div></section>
-            <section className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden"><div className="px-3 py-2 border-b border-slate-100"><h3 className="text-sm font-semibold text-slate-900">Top Students in Filter</h3></div><div className="grid grid-cols-1 divide-y divide-slate-100">{topFive.map(row=><div key={row.enrollmentNo} className="px-3 py-2.5 flex items-center justify-between gap-3"><div className="text-[10px] font-semibold text-slate-800 truncate">{row.name}</div><div className={`text-sm shrink-0 ${scoreClass(columnValue(row,riskColumn))}`}>{columnValue(row,riskColumn)}</div></div>)}</div></section>
+            <section className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden"><div className="px-3 py-2 border-b border-slate-100"><h3 className="text-sm font-semibold text-slate-900">Top Students</h3><p className="text-[10px] text-slate-500 mt-0.5">Highest scores overall for the selected mark column.</p></div><div className="grid grid-cols-1 divide-y divide-slate-100">{topFive.map(row=><div key={row.enrollmentNo} className="px-3 py-2.5 flex items-center justify-between gap-3"><div className="text-[10px] font-semibold text-slate-800 truncate">{row.name}</div><div className={`text-sm shrink-0 ${scoreClass(columnValue(row,riskColumn))}`}>{columnValue(row,riskColumn)}</div></div>)}</div></section>
           </aside>
         </div>
       </>}

From 9489d64590184fbbe1d67c807d66829f9773b6a4 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sat, 29 Aug 2026 14:16:49 +0530
Subject: [PATCH 08/80] Align At Risk filter controls

---
 app/globals.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 28c7875..a4c592c 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -34,8 +34,8 @@
 .recharts-tooltip-wrapper .recharts-default-tooltip{border-radius:12px!important;border:1px solid #e2e8f0!important;box-shadow:0 12px 28px rgba(15,23,42,.1)!important;background:rgba(255,255,255,.97)!important}.analysis-stat-card,.analysis-ranked-list,.analysis-grade-badge{border-color:#e2e8f0}
 
 /* Overall > At Risk */
-.at-risk-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;grid-template-areas:"filter filter" "table side";gap:12px;align-items:start}.at-risk-filter{grid-area:filter}.at-risk-table{grid-area:table;min-width:0}.at-risk-side-stack{grid-area:side;display:grid;gap:12px;min-width:0}.at-risk-side-stack>section:first-child{min-height:250px}.at-risk-filter-inner{display:grid;grid-template-columns:minmax(220px,1.25fr) minmax(170px,1fr) minmax(130px,.7fr) minmax(130px,.7fr) auto;gap:10px;align-items:end;padding:12px}.at-risk-filter-title{min-width:0;padding:0 2px}.at-risk-filter-title h3{font-size:14px;font-weight:700;color:#172033}.at-risk-filter-title p{margin-top:3px;font-size:10px;color:#667085}.at-risk-filter label{display:block;min-width:0}.at-risk-filter label>span{display:block;margin:0 0 5px 2px;font-size:10px;font-weight:600;color:#667085}.at-risk-filter select,.at-risk-filter input{height:38px}.at-risk-apply{height:38px;padding:0 18px;border:0;border-radius:9px;background:linear-gradient(135deg,#251b62,#4637a3);color:#fff;font-size:12px;font-weight:600;box-shadow:0 7px 16px rgba(49,39,120,.14);white-space:nowrap}.at-risk-apply:hover{filter:brightness(1.03)}.at-risk-table table th,.at-risk-table table td{white-space:nowrap}.at-risk-table tbody tr:hover{background:rgba(79,70,229,.025)}.at-risk-side-stack>section{min-width:0}.at-risk-side-stack .recharts-pie-sector{cursor:pointer}.at-risk-side-stack .recharts-text{font-size:9px}.at-risk-side-stack>section:first-child{min-height:280px}
+.at-risk-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;grid-template-areas:"filter filter" "table side";gap:12px;align-items:start}.at-risk-filter{grid-area:filter}.at-risk-table{grid-area:table;min-width:0}.at-risk-side-stack{grid-area:side;display:grid;gap:12px;min-width:0}.at-risk-side-stack>section:first-child{min-height:250px}.at-risk-filter-inner{padding:12px}.at-risk-filter-title{min-width:0;padding:0 2px}.at-risk-filter-title h3{font-size:14px;font-weight:700;color:#172033}.at-risk-filter-title p{margin-top:3px;font-size:10px;color:#667085}.at-risk-filter-controls{display:grid;grid-template-columns:minmax(220px,1.25fr) minmax(170px,1fr) minmax(130px,.7fr) minmax(130px,.7fr) auto;gap:10px;align-items:end;margin-top:10px}.at-risk-filter label{display:block;min-width:0}.at-risk-filter label>span{display:block;margin:0 0 5px 2px;font-size:10px;font-weight:600;color:#667085}.at-risk-filter select,.at-risk-filter input{height:38px}.at-risk-apply{height:38px;padding:0 18px;border:0;border-radius:9px;background:linear-gradient(135deg,#251b62,#4637a3);color:#fff;font-size:12px;font-weight:600;box-shadow:0 7px 16px rgba(49,39,120,.14);white-space:nowrap}.at-risk-apply:hover{filter:brightness(1.03)}.at-risk-table table th,.at-risk-table table td{white-space:nowrap}.at-risk-table tbody tr:hover{background:rgba(79,70,229,.025)}.at-risk-side-stack>section{min-width:0}.at-risk-side-stack .recharts-pie-sector{cursor:pointer}.at-risk-side-stack .recharts-text{font-size:9px}.at-risk-side-stack>section:first-child{min-height:280px}
 
-@media(max-width:1100px){.analysis-hero{grid-template-columns:1fr 1fr}.analysis-hero-copy{grid-column:1/-1}.analysis-content-grid{grid-template-columns:1fr}.analysis-settings-grid{grid-template-columns:1fr 1fr}.analysis-sidebar{position:fixed;transform:translateX(-100%)}.analysis-layout{grid-template-columns:1fr}.analysis-page{padding:18px}.academic-table-wrap{height:500px;max-height:500px}.analysis-top-actions>.analysis-raw-button{position:static;width:auto;min-height:0;border:1px solid #dfe5ec;background:rgba(255,255,255,.8);box-shadow:0 4px 14px rgba(15,23,42,.04)}.analysis-top-actions>.analysis-raw-button span:first-child:before{display:none}.at-risk-layout{grid-template-columns:minmax(0,1fr) 280px}.at-risk-filter-inner{grid-template-columns:minmax(190px,1.2fr) repeat(2,minmax(120px,.7fr)) minmax(150px,.9fr) auto;gap:8px}.at-risk-filter-title p{white-space:nowrap}}
-@media(max-width:800px){.at-risk-layout{grid-template-columns:1fr;grid-template-areas:"filter" "table" "side"}.at-risk-filter-inner{grid-template-columns:1fr 1fr}.at-risk-filter-title{grid-column:1/-1}.at-risk-apply{width:100%}.at-risk-side-stack{grid-template-columns:1fr 1fr}.at-risk-side-stack>section:first-child{min-height:0}}
-@media(max-width:700px){.analysis-topbar{align-items:flex-start;flex-direction:column}.analysis-title-row h1{font-size:21px}.analysis-top-actions{width:100%}.analysis-settings-grid{grid-template-columns:1fr}.analysis-hero{grid-template-columns:1fr}.analysis-content-grid{grid-template-columns:1fr}.analysis-page{padding:14px}.analysis-insight{align-items:flex-start;flex-direction:column}.analysis-insight-actions{margin-left:0;flex-wrap:wrap}.subject-analysis-nav__item{padding:9px 12px}.analysis-chart{height:200px}.academic-stats-panel,.academic-rank-grid{grid-template-columns:1fr}.academic-tier-grid{grid-template-columns:1fr 1fr}.academic-table-wrap{height:440px;max-height:440px}.at-risk-filter-inner{grid-template-columns:1fr}.at-risk-filter-title{grid-column:auto}.at-risk-side-stack{grid-template-columns:1fr}.at-risk-filter-title p{white-space:normal}}
+@media(max-width:1100px){.analysis-hero{grid-template-columns:1fr 1fr}.analysis-hero-copy{grid-column:1/-1}.analysis-content-grid{grid-template-columns:1fr}.analysis-settings-grid{grid-template-columns:1fr 1fr}.analysis-sidebar{position:fixed;transform:translateX(-100%)}.analysis-layout{grid-template-columns:1fr}.analysis-page{padding:18px}.academic-table-wrap{height:500px;max-height:500px}.analysis-top-actions>.analysis-raw-button{position:static;width:auto;min-height:0;border:1px solid #dfe5ec;background:rgba(255,255,255,.8);box-shadow:0 4px 14px rgba(15,23,42,.04)}.analysis-top-actions>.analysis-raw-button span:first-child:before{display:none}.at-risk-layout{grid-template-columns:minmax(0,1fr) 280px}.at-risk-filter-controls{grid-template-columns:minmax(190px,1.2fr) repeat(2,minmax(120px,.7fr)) minmax(150px,.9fr) auto;gap:8px}.at-risk-filter-title p{white-space:nowrap}}
+@media(max-width:800px){.at-risk-layout{grid-template-columns:1fr;grid-template-areas:"filter" "table" "side"}.at-risk-filter-controls{grid-template-columns:1fr 1fr}.at-risk-apply{width:100%}.at-risk-side-stack{grid-template-columns:1fr 1fr}.at-risk-side-stack>section:first-child{min-height:0}}
+@media(max-width:700px){.analysis-topbar{align-items:flex-start;flex-direction:column}.analysis-title-row h1{font-size:21px}.analysis-top-actions{width:100%}.analysis-settings-grid{grid-template-columns:1fr}.analysis-hero{grid-template-columns:1fr}.analysis-content-grid{grid-template-columns:1fr}.analysis-page{padding:14px}.analysis-insight{align-items:flex-start;flex-direction:column}.analysis-insight-actions{margin-left:0;flex-wrap:wrap}.subject-analysis-nav__item{padding:9px 12px}.analysis-chart{height:200px}.academic-stats-panel,.academic-rank-grid{grid-template-columns:1fr}.academic-tier-grid{grid-template-columns:1fr 1fr}.academic-table-wrap{height:440px;max-height:440px}.at-risk-filter-controls{grid-template-columns:1fr}.at-risk-filter-title{grid-column:auto}.at-risk-side-stack{grid-template-columns:1fr}.at-risk-filter-title p{white-space:normal}}

From 8eeb56ad1ada48c960c3198d5f70a7878d168353 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sat, 29 Aug 2026 14:27:14 +0530
Subject: [PATCH 09/80] Fix At Risk score color consistency

---
 pages/subject-analysis/[subjectId]/overall.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/pages/subject-analysis/[subjectId]/overall.tsx b/pages/subject-analysis/[subjectId]/overall.tsx
index 707d060..1bcc410 100644
--- a/pages/subject-analysis/[subjectId]/overall.tsx
+++ b/pages/subject-analysis/[subjectId]/overall.tsx
@@ -66,6 +66,12 @@ function scoreClass(value: number, max = 40) {
   if (ratio >= 0.6) return "text-amber-600 font-semibold";
   return "text-red-500 font-semibold";
 }
+function riskScoreClass(value: number) {
+  if (value > 32) return "text-emerald-600 font-semibold";
+  if (value >= 24) return "text-green-600 font-semibold";
+  if (value >= 16) return "text-amber-600 font-semibold";
+  return "text-red-500 font-semibold";
+}
 function riskStatus(value: number) {
   if (value > 32) return { label: "Excellent", className: "bg-emerald-50 text-emerald-700" };
   if (value >= 24) return { label: "Good", className: "bg-green-50 text-green-700" };
@@ -215,11 +221,11 @@ export default function SubjectOverallPage() {
           </section>
           <section className="at-risk-table rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
             <div className="px-3 py-2 border-b border-slate-100 flex items-center justify-between"><div><h3 className="text-sm font-semibold text-slate-900">Filtered Students</h3><p className="text-[10px] text-slate-500 mt-0.5">Showing {filteredRiskRows.length} of {baseRows.length} students.</p></div><span className="text-[10px] rounded-full bg-slate-100 px-2 py-1 text-slate-600">{filteredRiskRows.length} Students</span></div>
-            <div className="max-h-[620px] overflow-y-auto overflow-x-hidden"><table className="w-full table-fixed text-[10px] border-collapse"><colgroup>{sortDirection !== "none" && <col className="w-[7%]"/>}<col className="w-[18%]"/><col className="w-[27%]"/><col className="w-[13%]"/><col className="w-[13%]"/><col className="w-[14%]"/></colgroup><thead className="sticky top-0 bg-white z-10"><tr className="border-b border-slate-200 text-slate-500">{sortDirection !== "none" && <th className="text-center px-1 py-2">Rank</th>}<th className="text-left px-2 py-2">Enrollment</th><th className="text-left px-2 py-2">Student</th><th className="text-center px-1 py-2">Marks</th><th className="text-center px-1 py-2">Moderated</th><th className="text-center px-1 py-2">Status</th></tr></thead><tbody>{filteredRiskRows.map((row,index)=>{ const status = riskStatus(columnValue(row,riskColumn)); return <tr key={row.enrollmentNo} className="border-b border-slate-100">{sortDirection !== "none" && <td className="text-center px-1 py-1.5 text-slate-600">{index + 1}</td>}<td className="px-2 py-1.5 text-slate-500 truncate">{row.enrollmentNo}</td><td className="px-2 py-1.5 font-medium text-slate-800 truncate">{row.name}</td><td className={`text-center px-1 py-1.5 ${scoreClass(row.basic)}`}>{row.basic}</td><td className={`text-center px-1 py-1.5 ${scoreClass(row.moderated)}`}>{row.moderated}</td><td className="text-center px-1 py-1.5"><span className={`inline-flex rounded-full px-2 py-0.5 text-[9px] ${status.className}`}>{status.label}</span></td></tr>})}</tbody></table></div>
+            <div className="max-h-[620px] overflow-y-auto overflow-x-hidden"><table className="w-full table-fixed text-[10px] border-collapse"><colgroup>{sortDirection !== "none" && <col className="w-[7%]"/>}<col className="w-[18%]"/><col className="w-[27%]"/><col className="w-[13%]"/><col className="w-[13%]"/><col className="w-[14%]"/></colgroup><thead className="sticky top-0 bg-white z-10"><tr className="border-b border-slate-200 text-slate-500">{sortDirection !== "none" && <th className="text-center px-1 py-2">Rank</th>}<th className="text-left px-2 py-2">Enrollment</th><th className="text-left px-2 py-2">Student</th><th className="text-center px-1 py-2">Marks</th><th className="text-center px-1 py-2">Moderated</th><th className="text-center px-1 py-2">Status</th></tr></thead><tbody>{filteredRiskRows.map((row,index)=>{ const status = riskStatus(columnValue(row,riskColumn)); return <tr key={row.enrollmentNo} className="border-b border-slate-100">{sortDirection !== "none" && <td className="text-center px-1 py-1.5 text-slate-600">{index + 1}</td>}<td className="px-2 py-1.5 text-slate-500 truncate">{row.enrollmentNo}</td><td className="px-2 py-1.5 font-medium text-slate-800 truncate">{row.name}</td><td className={`text-center px-1 py-1.5 ${riskScoreClass(columnValue(row,riskColumn))}`}>{columnValue(row,riskColumn)}</td><td className="text-center px-1 py-1.5 text-slate-700">{row.moderated}</td><td className="text-center px-1 py-1.5"><span className={`inline-flex rounded-full px-2 py-0.5 text-[9px] ${status.className}`}>{status.label}</span></td></tr>})}</tbody></table></div>
           </section>
           <aside className="at-risk-side-stack">
             <section className="rounded-xl border border-slate-200 bg-white p-3 shadow-sm"><h3 className="text-sm font-semibold text-slate-900">Distribution</h3><p className="mt-0.5 text-[10px] text-slate-500">Click a segment to stage that score range in the filters.</p><div className="h-52 mt-1"><ResponsiveContainer width="100%" height="100%"><PieChart><Pie data={riskDistribution} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={70} label={({ name, value }) => `${name}: ${value}`} labelLine={false} onClick={(_, index) => selectDistributionBucket(index)}>{riskDistribution.map((_,i)=><Cell key={i} fill={COLORS[i]} cursor="pointer"/>)}</Pie><Tooltip formatter={(value: number) => [`${value} students`, "Count"]}/></PieChart></ResponsiveContainer></div></section>
-            <section className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden"><div className="px-3 py-2 border-b border-slate-100"><h3 className="text-sm font-semibold text-slate-900">Top Students</h3><p className="text-[10px] text-slate-500 mt-0.5">Highest scores overall for the selected mark column.</p></div><div className="grid grid-cols-1 divide-y divide-slate-100">{topFive.map(row=><div key={row.enrollmentNo} className="px-3 py-2.5 flex items-center justify-between gap-3"><div className="text-[10px] font-semibold text-slate-800 truncate">{row.name}</div><div className={`text-sm shrink-0 ${scoreClass(columnValue(row,riskColumn))}`}>{columnValue(row,riskColumn)}</div></div>)}</div></section>
+            <section className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden"><div className="px-3 py-2 border-b border-slate-100"><h3 className="text-sm font-semibold text-slate-900">Top Students</h3><p className="text-[10px] text-slate-500 mt-0.5">Highest scores overall for the selected mark column.</p></div><div className="grid grid-cols-1 divide-y divide-slate-100">{topFive.map(row=><div key={row.enrollmentNo} className="px-3 py-2.5 flex items-center justify-between gap-3"><div className="text-[10px] font-semibold text-slate-800 truncate">{row.name}</div><div className={`text-sm shrink-0 ${riskScoreClass(columnValue(row,riskColumn))}`}>{columnValue(row,riskColumn)}</div></div>)}</div></section>
           </aside>
         </div>
       </>}

From 40f2e4e218003ad7ef1fa73417cfa5638f831ed9 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sat, 29 Aug 2026 14:34:39 +0530
Subject: [PATCH 10/80] Fix at-risk filter sizing and excellent status color

---
 app/globals.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index a4c592c..12ed325 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -34,8 +34,8 @@
 .recharts-tooltip-wrapper .recharts-default-tooltip{border-radius:12px!important;border:1px solid #e2e8f0!important;box-shadow:0 12px 28px rgba(15,23,42,.1)!important;background:rgba(255,255,255,.97)!important}.analysis-stat-card,.analysis-ranked-list,.analysis-grade-badge{border-color:#e2e8f0}
 
 /* Overall > At Risk */
-.at-risk-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;grid-template-areas:"filter filter" "table side";gap:12px;align-items:start}.at-risk-filter{grid-area:filter}.at-risk-table{grid-area:table;min-width:0}.at-risk-side-stack{grid-area:side;display:grid;gap:12px;min-width:0}.at-risk-side-stack>section:first-child{min-height:250px}.at-risk-filter-inner{padding:12px}.at-risk-filter-title{min-width:0;padding:0 2px}.at-risk-filter-title h3{font-size:14px;font-weight:700;color:#172033}.at-risk-filter-title p{margin-top:3px;font-size:10px;color:#667085}.at-risk-filter-controls{display:grid;grid-template-columns:minmax(220px,1.25fr) minmax(170px,1fr) minmax(130px,.7fr) minmax(130px,.7fr) auto;gap:10px;align-items:end;margin-top:10px}.at-risk-filter label{display:block;min-width:0}.at-risk-filter label>span{display:block;margin:0 0 5px 2px;font-size:10px;font-weight:600;color:#667085}.at-risk-filter select,.at-risk-filter input{height:38px}.at-risk-apply{height:38px;padding:0 18px;border:0;border-radius:9px;background:linear-gradient(135deg,#251b62,#4637a3);color:#fff;font-size:12px;font-weight:600;box-shadow:0 7px 16px rgba(49,39,120,.14);white-space:nowrap}.at-risk-apply:hover{filter:brightness(1.03)}.at-risk-table table th,.at-risk-table table td{white-space:nowrap}.at-risk-table tbody tr:hover{background:rgba(79,70,229,.025)}.at-risk-side-stack>section{min-width:0}.at-risk-side-stack .recharts-pie-sector{cursor:pointer}.at-risk-side-stack .recharts-text{font-size:9px}.at-risk-side-stack>section:first-child{min-height:280px}
+.at-risk-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;grid-template-areas:"filter filter" "table side";gap:12px;align-items:start}.at-risk-filter{grid-area:filter}.at-risk-table{grid-area:table;min-width:0}.at-risk-side-stack{grid-area:side;display:grid;gap:12px;min-width:0}.at-risk-side-stack>section:first-child{min-height:250px}.at-risk-filter-inner{padding:12px}.at-risk-filter-title{min-width:0;padding:0 2px}.at-risk-filter-title h3{font-size:14px;font-weight:700;color:#172033}.at-risk-filter-title p{margin-top:3px;font-size:10px;color:#667085}.at-risk-filter-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:10px;align-items:end;margin-top:10px}.at-risk-filter label{display:block;min-width:0}.at-risk-filter label>span{display:block;margin:0 0 5px 2px;font-size:10px;font-weight:600;color:#667085}.at-risk-filter select,.at-risk-filter input{height:38px}.at-risk-apply{height:38px;padding:0 18px;border:0;border-radius:9px;background:linear-gradient(135deg,#251b62,#4637a3);color:#fff;font-size:12px;font-weight:600;box-shadow:0 7px 16px rgba(49,39,120,.14);white-space:nowrap}.at-risk-apply:hover{filter:brightness(1.03)}.at-risk-table table th,.at-risk-table table td{white-space:nowrap}.at-risk-table tbody tr:hover{background:rgba(79,70,229,.025)}.at-risk-side-stack>section{min-width:0}.at-risk-side-stack .recharts-pie-sector{cursor:pointer}.at-risk-side-stack .recharts-text{font-size:9px}.at-risk-side-stack>section:first-child{min-height:280px}.at-risk-table .bg-emerald-50.text-emerald-700,.at-risk-side-stack .bg-emerald-50.text-emerald-700{background:#eff6ff!important;color:#2563eb!important}
 
-@media(max-width:1100px){.analysis-hero{grid-template-columns:1fr 1fr}.analysis-hero-copy{grid-column:1/-1}.analysis-content-grid{grid-template-columns:1fr}.analysis-settings-grid{grid-template-columns:1fr 1fr}.analysis-sidebar{position:fixed;transform:translateX(-100%)}.analysis-layout{grid-template-columns:1fr}.analysis-page{padding:18px}.academic-table-wrap{height:500px;max-height:500px}.analysis-top-actions>.analysis-raw-button{position:static;width:auto;min-height:0;border:1px solid #dfe5ec;background:rgba(255,255,255,.8);box-shadow:0 4px 14px rgba(15,23,42,.04)}.analysis-top-actions>.analysis-raw-button span:first-child:before{display:none}.at-risk-layout{grid-template-columns:minmax(0,1fr) 280px}.at-risk-filter-controls{grid-template-columns:minmax(190px,1.2fr) repeat(2,minmax(120px,.7fr)) minmax(150px,.9fr) auto;gap:8px}.at-risk-filter-title p{white-space:nowrap}}
+@media(max-width:1100px){.analysis-hero{grid-template-columns:1fr 1fr}.analysis-hero-copy{grid-column:1/-1}.analysis-content-grid{grid-template-columns:1fr}.analysis-settings-grid{grid-template-columns:1fr 1fr}.analysis-sidebar{position:fixed;transform:translateX(-100%)}.analysis-layout{grid-template-columns:1fr}.analysis-page{padding:18px}.academic-table-wrap{height:500px;max-height:500px}.analysis-top-actions>.analysis-raw-button{position:static;width:auto;min-height:0;border:1px solid #dfe5ec;background:rgba(255,255,255,.8);box-shadow:0 4px 14px rgba(15,23,42,.04)}.analysis-top-actions>.analysis-raw-button span:first-child:before{display:none}.at-risk-layout{grid-template-columns:minmax(0,1fr) 280px}.at-risk-filter-controls{grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:8px}.at-risk-filter-title p{white-space:nowrap}}
 @media(max-width:800px){.at-risk-layout{grid-template-columns:1fr;grid-template-areas:"filter" "table" "side"}.at-risk-filter-controls{grid-template-columns:1fr 1fr}.at-risk-apply{width:100%}.at-risk-side-stack{grid-template-columns:1fr 1fr}.at-risk-side-stack>section:first-child{min-height:0}}
 @media(max-width:700px){.analysis-topbar{align-items:flex-start;flex-direction:column}.analysis-title-row h1{font-size:21px}.analysis-top-actions{width:100%}.analysis-settings-grid{grid-template-columns:1fr}.analysis-hero{grid-template-columns:1fr}.analysis-content-grid{grid-template-columns:1fr}.analysis-page{padding:14px}.analysis-insight{align-items:flex-start;flex-direction:column}.analysis-insight-actions{margin-left:0;flex-wrap:wrap}.subject-analysis-nav__item{padding:9px 12px}.analysis-chart{height:200px}.academic-stats-panel,.academic-rank-grid{grid-template-columns:1fr}.academic-tier-grid{grid-template-columns:1fr 1fr}.academic-table-wrap{height:440px;max-height:440px}.at-risk-filter-controls{grid-template-columns:1fr}.at-risk-filter-title{grid-column:auto}.at-risk-side-stack{grid-template-columns:1fr}.at-risk-filter-title p{white-space:normal}}

From 09fe7b7d878ddb5a22737a783cb89a152887a4c2 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sat, 29 Aug 2026 14:44:32 +0530
Subject: [PATCH 11/80] Fix attendance trend metric and at-risk apply flow

---
 .../[subjectId]/attendance.tsx                | 49 +++++++++++++++----
 1 file changed, 40 insertions(+), 9 deletions(-)

diff --git a/pages/subject-analysis/[subjectId]/attendance.tsx b/pages/subject-analysis/[subjectId]/attendance.tsx
index 2575d36..7f58f1c 100644
--- a/pages/subject-analysis/[subjectId]/attendance.tsx
+++ b/pages/subject-analysis/[subjectId]/attendance.tsx
@@ -29,6 +29,10 @@ export default function SubjectAttendancePage() {
   const [upperBound, setUpperBound] = useState(100);
   const [riskTrendFilter, setRiskTrendFilter] = useState("All");
   const [riskMonth, setRiskMonth] = useState<"previous" | "current">("current");
+  const [draftLowerBound, setDraftLowerBound] = useState(0);
+  const [draftUpperBound, setDraftUpperBound] = useState(100);
+  const [draftRiskTrendFilter, setDraftRiskTrendFilter] = useState("All");
+  const [draftRiskMonth, setDraftRiskMonth] = useState<"previous" | "current">("current");
   const [copied, setCopied] = useState(false);
 
   async function loadAnalysis(sync = false, previous = previousMonth, current = currentMonth, criteria = trendCriteria) {
@@ -87,12 +91,38 @@ export default function SubjectAttendancePage() {
   ];
 
   function openRisk(options: { trend?: string; lower?: number; upper?: number }) {
-    setRiskTrendFilter(options.trend || "All");
-    setLowerBound(options.lower ?? 0);
-    setUpperBound(options.upper ?? 100);
+    const nextTrend = options.trend || "All";
+    const nextLower = options.lower ?? 0;
+    const nextUpper = options.upper ?? 100;
+    setDraftRiskTrendFilter(nextTrend);
+    setDraftLowerBound(nextLower);
+    setDraftUpperBound(nextUpper);
+    setRiskTrendFilter(nextTrend);
+    setLowerBound(nextLower);
+    setUpperBound(nextUpper);
     setView("risk");
   }
 
+  function applyRiskFilters() {
+    const lo = Math.max(0, Math.min(100, Math.min(draftLowerBound, draftUpperBound)));
+    const hi = Math.max(0, Math.min(100, Math.max(draftLowerBound, draftUpperBound)));
+    setLowerBound(lo);
+    setUpperBound(hi);
+    setRiskTrendFilter(draftRiskTrendFilter);
+    setRiskMonth(draftRiskMonth);
+  }
+
+  function resetRiskFilters() {
+    setLowerBound(0);
+    setUpperBound(100);
+    setRiskTrendFilter("All");
+    setRiskMonth("current");
+    setDraftLowerBound(0);
+    setDraftUpperBound(100);
+    setDraftRiskTrendFilter("All");
+    setDraftRiskMonth("current");
+  }
+
   async function copyEmails() {
     try {
       await navigator.clipboard.writeText(riskEmails.join("; "));
@@ -142,7 +172,7 @@ export default function SubjectAttendancePage() {
             <h2>Attendance Trend</h2>
             <p>Compare attendance between two months and identify increasing, decreasing, and stable students.</p>
           </div>
-          <Metric icon={<Users size={19} />} label={`Class Average (${previousMonth || "Previous"})`} value={`${previousAverage}%`} change={averageChange} />
+          <Metric icon={<Users size={19} />} label={`Class Average (${previousMonth || "Previous"})`} value={`${previousAverage}%`} />
           <Metric icon={<Gauge size={19} />} label={`Class Average (${currentMonth || "Current"})`} value={`${currentAverage}%`} change={averageChange} />
           <Metric icon={<Sparkles size={19} />} label="Students Improving" value={improvingCount} detail={`${students.length ? round1((improvingCount / students.length) * 100) : 0}% of total students`} good />
         </section>
@@ -212,13 +242,14 @@ export default function SubjectAttendancePage() {
         <section className="analysis-panel analysis-settings">
           <div className="analysis-panel-head" style={{ marginBottom: 18 }}>
             <div><h3>Filter Criteria</h3><p style={{ margin: "5px 0 0", color: "#667085", fontSize: 12 }}>Narrow the list before copying addresses or sending alerts.</p></div>
-            <button className="analysis-secondary" onClick={() => { setLowerBound(0); setUpperBound(100); setRiskTrendFilter("All"); setRiskMonth("current"); }}><RefreshCw size={14} />Reset</button>
+            <button className="analysis-secondary" onClick={resetRiskFilters}><RefreshCw size={14} />Reset</button>
           </div>
           <div className="analysis-settings-grid">
-            <div><label>Lower Bound (%)</label><input type="number" min="0" max="100" value={lowerBound} onChange={(e) => setLowerBound(Math.max(0, Math.min(100, Number(e.target.value))))} /></div>
-            <div><label>Upper Bound (%)</label><input type="number" min="0" max="100" value={upperBound} onChange={(e) => setUpperBound(Math.max(0, Math.min(100, Number(e.target.value))))} /></div>
-            <div><label>Trend</label><select value={riskTrendFilter} onChange={(e) => setRiskTrendFilter(e.target.value)}><option>All</option><option>Increasing</option><option>Decreasing</option><option>Stable</option></select></div>
-            <div><label>Month</label><select value={riskMonth} onChange={(e) => setRiskMonth(e.target.value as "previous" | "current")}><option value="current">{currentMonth}</option><option value="previous">{previousMonth}</option></select></div>
+            <div><label>Lower Bound (%)</label><input type="number" min="0" max="100" value={draftLowerBound} onChange={(e) => setDraftLowerBound(Math.max(0, Math.min(100, Number(e.target.value))))} /></div>
+            <div><label>Upper Bound (%)</label><input type="number" min="0" max="100" value={draftUpperBound} onChange={(e) => setDraftUpperBound(Math.max(0, Math.min(100, Number(e.target.value))))} /></div>
+            <div><label>Trend</label><select value={draftRiskTrendFilter} onChange={(e) => setDraftRiskTrendFilter(e.target.value)}><option>All</option><option>Increasing</option><option>Decreasing</option><option>Stable</option></select></div>
+            <div><label>Month</label><select value={draftRiskMonth} onChange={(e) => setDraftRiskMonth(e.target.value as "previous" | "current")}><option value="current">{currentMonth}</option><option value="previous">{previousMonth}</option></select></div>
+            <button className="analysis-primary" onClick={applyRiskFilters}><SlidersHorizontal size={15} />Apply</button>
           </div>
         </section>
 

From 5bff14d6bf95d0c85e8ec1adb653c1be055b5f6f Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sat, 29 Aug 2026 14:52:46 +0530
Subject: [PATCH 12/80] Fix academic table controls, colors, and apply behavior

---
 .../subject-analysis/[subjectId]/academic.tsx | 116 +++++++++++-------
 1 file changed, 72 insertions(+), 44 deletions(-)

diff --git a/pages/subject-analysis/[subjectId]/academic.tsx b/pages/subject-analysis/[subjectId]/academic.tsx
index 36e2e65..8eccd29 100644
--- a/pages/subject-analysis/[subjectId]/academic.tsx
+++ b/pages/subject-analysis/[subjectId]/academic.tsx
@@ -16,7 +16,7 @@ type SummarySort = "none" | "desc" | "asc";
 
 const MAX = 30;
 const TIERS: Tier[] = ["Excellent", "Good", "Needs Attention", "Critical Risk"];
-const COLORS: Record<Tier, string> = { Excellent: "#15966a", Good: "#4d75d0", "Needs Attention": "#f59e0b", "Critical Risk": "#ef4444" };
+const COLORS: Record<Tier, string> = { Excellent: "#2563eb", 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();
 
@@ -57,13 +57,22 @@ export default function SubjectAcademicPage() {
   const [syncing, setSyncing] = useState(false);
   const [error, setError] = useState("");
   const [selectedTier, setSelectedTier] = useState<Tier | null>(null);
+
   const [combinedSort, setCombinedSort] = useState<CombinedSort>("combined");
   const [sortOrder, setSortOrder] = useState<SortOrder>("desc");
+  const [combinedSortDraft, setCombinedSortDraft] = useState<CombinedSort>("combined");
+  const [sortOrderDraft, setSortOrderDraft] = useState<SortOrder>("desc");
+
   const [summaryExam, setSummaryExam] = useState<SummaryExam>("combined");
   const [summaryTier, setSummaryTier] = useState<Tier | "all">("all");
   const [summaryLower, setSummaryLower] = useState("0");
   const [summaryUpper, setSummaryUpper] = useState("30");
   const [summarySort, setSummarySort] = useState<SummarySort>("none");
+  const [summaryExamDraft, setSummaryExamDraft] = useState<SummaryExam>("combined");
+  const [summaryTierDraft, setSummaryTierDraft] = useState<Tier | "all">("all");
+  const [summaryLowerDraft, setSummaryLowerDraft] = useState("0");
+  const [summaryUpperDraft, setSummaryUpperDraft] = useState("30");
+  const [summarySortDraft, setSummarySortDraft] = useState<SummarySort>("none");
 
   async function loadAnalysis(sync = false) {
     if (!subjectId || typeof subjectId !== "string") return;
@@ -172,6 +181,32 @@ 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);
 
+  const applyCombinedControls = () => {
+    setCombinedSort(combinedSortDraft);
+    setSortOrder(sortOrderDraft);
+  };
+
+  const resetSummaryControls = () => {
+    setSummaryExam("combined");
+    setSummaryTier("all");
+    setSummaryLower("0");
+    setSummaryUpper("30");
+    setSummarySort("none");
+    setSummaryExamDraft("combined");
+    setSummaryTierDraft("all");
+    setSummaryLowerDraft("0");
+    setSummaryUpperDraft("30");
+    setSummarySortDraft("none");
+  };
+
+  const applySummaryControls = () => {
+    setSummaryExam(summaryExamDraft);
+    setSummaryTier(summaryTierDraft);
+    setSummaryLower(summaryLowerDraft);
+    setSummaryUpper(summaryUpperDraft);
+    setSummarySort(summarySortDraft);
+  };
+
   return <div className="analysis-layout">
     <aside className="analysis-sidebar">
       <div className="analysis-brand"><span className="analysis-brand__mark"><BarChart3 size={18} /></span><span>ClassPulse</span></div>
@@ -225,14 +260,17 @@ export default function SubjectAcademicPage() {
           <Metric label="Class Average" value={combinedAverage} detail="combined average" />
           <Metric label="Best Score" value={combinedHighest} detail={combinedHighestNames.join(", ") || "best individual result"} />
         </section>
-        <section className="combined-controls-bar">
-          <div className="combined-control"><label htmlFor="combined-sort-field">Grade / Sort By</label><select id="combined-sort-field" value={combinedSort} onChange={(e) => setCombinedSort(e.target.value as CombinedSort)}><option value="combined">Combined (average)</option><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option><option value="max">Maximum score</option></select></div>
-          <div className="combined-control"><label htmlFor="combined-sort-order">Order</label><select id="combined-sort-order" value={sortOrder} onChange={(e) => setSortOrder(e.target.value as SortOrder)}><option value="desc">High to Low</option><option value="asc">Low to High</option><option value="none">No Sort</option></select></div>
-        </section>
         <section className="combined-layout">
           <section className="analysis-panel analysis-table-panel combined-table-panel">
-            <div className="analysis-panel-head"><div><h3>All Students</h3><p style={{ marginTop: 4, color: "#98a2b3", fontSize: 11 }}>{selectedTier ? `Filtered: ${selectedTier}` : "Combined Midsem results"}</p></div><div style={{ display: "flex", alignItems: "center", gap: 8 }}>{selectedTier && <button className="analysis-secondary" style={{ padding: "5px 8px" }} onClick={() => setSelectedTier(null)}><X size={13} />Clear</button>}<span className="analysis-count">{sortedCombinedRows.length} Students</span></div></div>
-            <div className="analysis-table-wrap combined-table-wrap"><table className="analysis-table"><thead><tr><th>Rank</th><th>Student</th><th>Midsem 1</th><th>Midsem 2</th><th>Combined</th><th>Max</th><th>Grade</th></tr></thead><tbody>{sortedCombinedRows.map((row, index) => { const tier = tierFor(row.combined); const rank = combinedRankRows.findIndex(r => r.enrollmentNo === row.enrollmentNo) + 1; return <tr key={row.enrollmentNo}><td>{sortOrder === "none" ? rank : index + 1}</td><td><span className="student-cell"><span className="student-avatar">{initials(row.name)}</span>{row.name}</span></td><td className={`tier-mark ${gradeClass(tierFor(row.first))}`}>{row.first}</td><td className={`tier-mark ${gradeClass(tierFor(row.second))}`}>{row.second}</td><td className={`tier-mark ${gradeClass(tier)}`}><strong>{row.combined}</strong></td><td className={`tier-mark ${gradeClass(tierFor(row.max))}`}>{row.max}</td><td><button type="button" className={`analysis-grade-badge ${gradeClass(tier)}`} onClick={() => setSelectedTier(selectedTier === tier ? null : tier)}>{tier}</button></td></tr>; })}{!sortedCombinedRows.length && <tr><td colSpan={7} style={{ textAlign: "center", padding: 32, color: "#667085" }}>No students match the selected filter.</td></tr>}</tbody></table></div>
+            <div className="combined-table-toolbar">
+              <div className="analysis-panel-head"><div><h3>All Students</h3><p style={{ marginTop: 4, color: "#98a2b3", fontSize: 11 }}>{selectedTier ? `Filtered: ${selectedTier}` : "Combined Midsem results"}</p></div><div style={{ display: "flex", alignItems: "center", gap: 8 }}>{selectedTier && <button className="analysis-secondary" style={{ padding: "5px 8px" }} onClick={() => setSelectedTier(null)}><X size={13} />Clear</button>}<span className="analysis-count">{sortedCombinedRows.length} Students</span></div></div>
+              <div className="combined-inline-controls">
+                <label><span>Grade / Sort By</span><select value={combinedSortDraft} onChange={(e) => setCombinedSortDraft(e.target.value as CombinedSort)}><option value="combined">Combined (average)</option><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option><option value="max">Maximum score</option></select></label>
+                <label><span>Order</span><select value={sortOrderDraft} onChange={(e) => setSortOrderDraft(e.target.value as SortOrder)}><option value="desc">High to Low</option><option value="asc">Low to High</option><option value="none">No Sort</option></select></label>
+                <button className="analysis-primary combined-apply-button" onClick={applyCombinedControls}>Apply</button>
+              </div>
+            </div>
+            <div className="analysis-table-wrap combined-table-wrap"><table className="analysis-table"><thead><tr><th>Rank</th><th>Student</th><th>Midsem 1</th><th>Midsem 2</th><th>Combined</th><th>Max</th><th>Grade</th></tr></thead><tbody>{sortedCombinedRows.map((row, index) => { const tier = tierFor(row.combined); return <tr key={row.enrollmentNo}><td>{sortOrder === "none" ? "" : index + 1}</td><td><span className="student-cell"><span className="student-avatar">{initials(row.name)}</span>{row.name}</span></td><td className={combinedSort === "midsem1" ? `tier-mark ${gradeClass(tierFor(row.first))}` : ""}>{row.first}</td><td className={combinedSort === "midsem2" ? `tier-mark ${gradeClass(tierFor(row.second))}` : ""}>{row.second}</td><td className={combinedSort === "combined" ? `tier-mark ${gradeClass(tier)}` : ""}><strong>{row.combined}</strong></td><td className={combinedSort === "max" ? `tier-mark ${gradeClass(tierFor(row.max))}` : ""}>{row.max}</td><td><button type="button" className={`analysis-grade-badge ${gradeClass(tier)}`} onClick={() => setSelectedTier(selectedTier === tier ? null : tier)}>{tier}</button></td></tr>; })}{!sortedCombinedRows.length && <tr><td colSpan={7} style={{ textAlign: "center", padding: 32, color: "#667085" }}>No students match the selected filter.</td></tr>}</tbody></table></div>
           </section>
           <div className="combined-right-column">
             <section className="analysis-panel combined-chart-panel"><div className="combined-panel-title"><div><h3>Grade Distribution</h3><p>Click a bar to filter the table by performance tier.</p></div><span><strong>{combinedRows.length}</strong> Students</span></div><div className="combined-chart"><ResponsiveContainer width="100%" height="100%"><BarChart data={TIERS.map(t => ({ 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); }}><CartesianGrid strokeDasharray="3 3" vertical={false} /><XAxis dataKey="name" fontSize={10} /><YAxis allowDecimals={false} fontSize={11} /><Tooltip /><Bar dataKey="count" radius={[6, 6, 0, 0]}>{TIERS.map(t => <Cell key={t} fill={COLORS[t]} cursor="pointer" opacity={!selectedTier || selectedTier === t ? 1 : .35} />)}</Bar></BarChart></ResponsiveContainer></div></section>
@@ -244,17 +282,6 @@ export default function SubjectAcademicPage() {
 
       {data && view === "summary" && <>
         <section className="summary-heading"><div><h2>Academic Summary</h2><p>Compare Midsem 1 and Midsem 2 with the same ClassPulse academic analysis theme.</p></div></section>
-        <section className="summary-filter-panel analysis-panel">
-          <div className="summary-filter-title"><div><h3>Filter Criteria</h3><p>Narrow the student list by examination, performance tier, marks range, and order.</p></div><button className="analysis-secondary" onClick={() => { setSummaryExam("combined"); setSummaryTier("all"); setSummaryLower("0"); setSummaryUpper("30"); setSummarySort("none"); }}>Reset</button></div>
-          <div className="summary-filter-grid">
-            <label><span>Exam</span><select value={summaryExam} onChange={(e) => setSummaryExam(e.target.value as SummaryExam)}><option value="combined">Combined</option><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option><option value="max">Max</option></select></label>
-            <label><span>Performance Tier</span><select value={summaryTier} onChange={(e) => setSummaryTier(e.target.value as Tier | "all")}><option value="all">All Tiers</option>{TIERS.map(t => <option key={t} value={t}>{t}</option>)}</select></label>
-            <label><span>Lower Bound</span><input type="number" min="0" max="30" value={summaryLower} onChange={(e) => setSummaryLower(e.target.value)} /></label>
-            <label><span>Upper Bound</span><input type="number" min="0" max="30" value={summaryUpper} onChange={(e) => setSummaryUpper(e.target.value)} /></label>
-            <label><span>Sort</span><select value={summarySort} onChange={(e) => setSummarySort(e.target.value as SummarySort)}><option value="none">No Sort</option><option value="desc">High to Low</option><option value="asc">Low to High</option></select></label>
-          </div>
-        </section>
-
         <section className="summary-metric-grid">
           <Metric label="Overall Class Average" value={summaryAverage} detail="combined average" />
           <Metric label="Highest Combined Score" value={combinedHighest} detail={combinedHighestNames[0] || "—"} />
@@ -265,8 +292,19 @@ export default function SubjectAcademicPage() {
 
         <section className="summary-main-grid">
           <section className="analysis-panel summary-student-panel">
-            <div className="analysis-panel-head"><div><h3>Filtered Students</h3><p style={{ marginTop: 4, color: "#98a2b3", fontSize: 11 }}>Showing {summaryRows.length} of {students.length} students</p></div><span className="analysis-count">{summaryRows.length} Students</span></div>
-            <div className="analysis-table-wrap summary-table-wrap"><table className="analysis-table"><thead><tr><th>Enrollment</th><th>Student</th><th>Marks</th><th>Tier</th></tr></thead><tbody>{summaryRows.map(row => <tr key={row.enrollmentNo}><td>{row.enrollmentNo}</td><td><span className="student-cell"><span className="student-avatar">{initials(row.name)}</span>{row.name}</span></td><td className={`tier-mark ${gradeClass(row.tier)}`}><strong>{row.marks}</strong></td><td><button type="button" className={`analysis-grade-badge ${gradeClass(row.tier)}`} onClick={() => setSummaryTier(summaryTier === row.tier ? "all" : row.tier)}>{row.tier}</button></td></tr>)}{!summaryRows.length && <tr><td colSpan={4} style={{ textAlign: "center", padding: 32, color: "#667085" }}>No students match these filters.</td></tr>}</tbody></table></div>
+            <div className="summary-table-toolbar">
+              <div className="analysis-panel-head"><div><h3>Filtered Students</h3><p style={{ marginTop: 4, color: "#98a2b3", fontSize: 11 }}>Showing {summaryRows.length} of {students.length} students</p></div><span className="analysis-count">{summaryRows.length} Students</span></div>
+              <div className="summary-inline-controls">
+                <label><span>Exam</span><select value={summaryExamDraft} onChange={(e) => setSummaryExamDraft(e.target.value as SummaryExam)}><option value="combined">Combined</option><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option><option value="max">Max</option></select></label>
+                <label><span>Performance Tier</span><select value={summaryTierDraft} onChange={(e) => setSummaryTierDraft(e.target.value as Tier | "all")}><option value="all">All Tiers</option>{TIERS.map(t => <option key={t} value={t}>{t}</option>)}</select></label>
+                <label><span>Lower Bound</span><input type="number" min="0" max="30" value={summaryLowerDraft} onChange={(e) => setSummaryLowerDraft(e.target.value)} /></label>
+                <label><span>Upper Bound</span><input type="number" min="0" max="30" value={summaryUpperDraft} onChange={(e) => setSummaryUpperDraft(e.target.value)} /></label>
+                <label><span>Sort</span><select value={summarySortDraft} onChange={(e) => setSummarySortDraft(e.target.value as SummarySort)}><option value="none">No Sort</option><option value="desc">High to Low</option><option value="asc">Low to High</option></select></label>
+                <button className="analysis-primary summary-apply-button" onClick={applySummaryControls}>Apply</button>
+                <button className="analysis-secondary summary-reset-button" onClick={resetSummaryControls}>Reset</button>
+              </div>
+            </div>
+            <div className="analysis-table-wrap summary-table-wrap"><table className="analysis-table"><thead><tr><th>Enrollment</th><th>Student</th><th>Marks</th><th>Tier</th></tr></thead><tbody>{summaryRows.map(row => <tr key={row.enrollmentNo}><td>{row.enrollmentNo}</td><td><span className="student-cell"><span className="student-avatar">{initials(row.name)}</span>{row.name}</span></td><td className={`tier-mark ${gradeClass(row.tier)}`}><strong>{row.marks}</strong></td><td><span className={`analysis-grade-badge ${gradeClass(row.tier)}`}>{row.tier}</span></td></tr>)}{!summaryRows.length && <tr><td colSpan={4} style={{ textAlign: "center", padding: 32, color: "#667085" }}>No students match these filters.</td></tr>}</tbody></table></div>
           </section>
 
           <div className="summary-right-column">
@@ -278,12 +316,15 @@ export default function SubjectAcademicPage() {
     </main>
 
     <style jsx global>{`
-      .combined-controls-bar { display: flex; justify-content: flex-end; align-items: flex-end; gap: 12px; margin: 0 0 18px; }
-      .combined-control { min-width: 190px; }
-      .combined-control label { display: block; margin-bottom: 7px; color: #667085; font-size: 11px; font-weight: 600; }
-      .combined-control select { width: 100%; height: 40px; border: 1px solid #d8e0ea; border-radius: 9px; background: #fff; color: #344054; padding: 0 12px; font-size: 13px; outline: none; }
-      .combined-control select:focus { border-color: #4b2e91; box-shadow: 0 0 0 2px rgba(75,46,145,.12); }
       .combined-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(360px, .95fr); gap: 16px; align-items: start; }
+      .combined-table-toolbar, .summary-table-toolbar { display: grid; gap: 12px; }
+      .combined-inline-controls { display: grid; grid-template-columns: 1.35fr 1fr auto; gap: 10px; align-items: end; }
+      .summary-inline-controls { display: grid; grid-template-columns: 1.05fr 1.1fr .75fr .75fr .95fr auto auto; gap: 8px; align-items: end; }
+      .combined-inline-controls label, .summary-inline-controls label { min-width: 0; }
+      .combined-inline-controls label > span, .summary-inline-controls label > span { display: block; margin: 0 0 6px; color: #667085; font-size: 10px; font-weight: 600; }
+      .combined-inline-controls select, .summary-inline-controls select, .summary-inline-controls input { width: 100%; height: 38px; border: 1px solid #d8e0ea; border-radius: 9px; background: #fff; color: #344054; padding: 0 10px; font-size: 12px; outline: none; box-sizing: border-box; }
+      .combined-inline-controls select:focus, .summary-inline-controls select:focus, .summary-inline-controls input:focus { border-color: #4b2e91; box-shadow: 0 0 0 2px rgba(75,46,145,.12); }
+      .combined-apply-button, .summary-apply-button, .summary-reset-button { height: 38px; white-space: nowrap; }
       .combined-table-wrap { min-height: 560px; max-height: 560px; }
       .combined-table-panel .analysis-table { table-layout: fixed; }
       .combined-table-panel .analysis-table th, .combined-table-panel .analysis-table td { white-space: nowrap; }
@@ -302,8 +343,8 @@ export default function SubjectAcademicPage() {
       .combined-chart { height: 300px; margin-top: 10px; }
       .combined-tier-panel { padding: 18px; }
       .tier-mark { font-weight: 700; }
-      .tier-mark.excellent { color: #15966a !important; }
-      .tier-mark.good { color: #4d75d0 !important; }
+      .tier-mark.excellent { color: #2563eb !important; }
+      .tier-mark.good { color: #15966a !important; }
       .tier-mark.attention { color: #f59e0b !important; }
       .tier-mark.risk { color: #ef4444 !important; }
       .combined-hero .analysis-metric:nth-child(2), .summary-metric-grid .analysis-metric:nth-child(1) { border-top: 3px solid #4d75d0; }
@@ -315,15 +356,6 @@ export default function SubjectAcademicPage() {
       .summary-heading { margin: 4px 0 18px; }
       .summary-heading h2 { margin: 0; font-size: 22px; }
       .summary-heading p { margin: 6px 0 0; color: #667085; font-size: 13px; }
-      .summary-filter-panel { padding: 18px; margin-bottom: 16px; }
-      .summary-filter-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
-      .summary-filter-title h3 { margin: 0; }
-      .summary-filter-title p { margin: 5px 0 0; color: #98a2b3; font-size: 11px; }
-      .summary-filter-grid { display: grid; grid-template-columns: 1.1fr 1.1fr .8fr .8fr 1fr; gap: 12px; }
-      .summary-filter-grid label { display: block; }
-      .summary-filter-grid label > span { display: block; margin: 0 0 7px; color: #667085; font-size: 11px; font-weight: 600; }
-      .summary-filter-grid select, .summary-filter-grid input { width: 100%; height: 40px; border: 1px solid #d8e0ea; border-radius: 9px; background: #fff; color: #344054; padding: 0 12px; font-size: 13px; outline: none; box-sizing: border-box; }
-      .summary-filter-grid select:focus, .summary-filter-grid input:focus { border-color: #4b2e91; box-shadow: 0 0 0 2px rgba(75,46,145,.12); }
       .summary-metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
       .summary-main-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(340px, .9fr); gap: 16px; align-items: start; }
       .summary-student-panel { min-width: 0; }
@@ -350,19 +382,15 @@ export default function SubjectAcademicPage() {
         .combined-right-column { grid-template-columns: 1fr 1fr; }
         .combined-right-column .academic-rank-grid { grid-column: 1 / -1; }
         .summary-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-        .summary-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+        .combined-inline-controls { grid-template-columns: 1fr 1fr auto; }
+        .summary-inline-controls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
       }
       @media (max-width: 800px) {
-        .combined-controls-bar { justify-content: flex-start; }
         .combined-layout, .summary-main-grid { grid-template-columns: 1fr; }
-        .combined-right-column, .summary-metric-grid, .summary-filter-grid { grid-template-columns: 1fr; }
-        .combined-control { min-width: 0; flex: 1; }
+        .combined-right-column, .summary-metric-grid { grid-template-columns: 1fr; }
+        .combined-inline-controls, .summary-inline-controls { grid-template-columns: 1fr; }
         .combined-table-wrap, .summary-table-wrap { min-height: 480px; max-height: 480px; }
       }
-      @media (max-width: 600px) {
-        .combined-controls-bar { flex-direction: column; align-items: stretch; }
-        .summary-filter-title { flex-direction: column; }
-      }
     `}</style>
   </div>;
 }

From 5ba8940860a73a5a2026b2b24bd9cea404bdabe6 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sat, 29 Aug 2026 15:01:10 +0530
Subject: [PATCH 13/80] Fix overall basic and moderated mark colors

---
 pages/subject-analysis/[subjectId]/overall.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/pages/subject-analysis/[subjectId]/overall.tsx b/pages/subject-analysis/[subjectId]/overall.tsx
index 1bcc410..8c97dff 100644
--- a/pages/subject-analysis/[subjectId]/overall.tsx
+++ b/pages/subject-analysis/[subjectId]/overall.tsx
@@ -67,13 +67,13 @@ function scoreClass(value: number, max = 40) {
   return "text-red-500 font-semibold";
 }
 function riskScoreClass(value: number) {
-  if (value > 32) return "text-emerald-600 font-semibold";
+  if (value > 32) return "text-blue-600 font-semibold";
   if (value >= 24) return "text-green-600 font-semibold";
   if (value >= 16) return "text-amber-600 font-semibold";
   return "text-red-500 font-semibold";
 }
 function riskStatus(value: number) {
-  if (value > 32) return { label: "Excellent", className: "bg-emerald-50 text-emerald-700" };
+  if (value > 32) return { label: "Excellent", className: "bg-blue-50 text-blue-700" };
   if (value >= 24) return { label: "Good", className: "bg-green-50 text-green-700" };
   if (value >= 16) return { label: "Needs Attention", className: "bg-amber-50 text-amber-700" };
   return { label: "Critical Risk", className: "bg-red-50 text-red-600" };
@@ -204,7 +204,7 @@ export default function SubjectOverallPage() {
           <section className="rounded-xl border border-slate-200 bg-white p-2.5 shadow-sm"><div className="flex items-center justify-between mb-2"><div><h3 className="text-sm font-semibold text-slate-900">Applied Components Summary</h3><p className="text-[10px] text-slate-500 mt-0.5">Choose components and set their weightage.</p></div><span className={`text-[11px] font-semibold ${selectedTotal === TARGET ? "text-emerald-600" : "text-amber-600"}`}>Selected total: {selectedTotal}/40</span></div><div className="grid grid-cols-3 grid-rows-2 gap-1.5">{COMPONENTS.map(({ key, label }) => { const checked = draftBasicColumns.includes(key); return <label key={key} className={`min-w-0 rounded-lg border p-1.5 cursor-pointer transition ${checked ? "border-violet-200 bg-violet-50/60" : "border-slate-200 bg-white"}`}><div className="flex items-center gap-1.5 min-w-0"><input type="checkbox" checked={checked} onChange={() => toggleBasic(key)} className="h-3.5 w-3.5 accent-[#4a35b3] shrink-0"/><span className="text-[11px] font-medium text-slate-700 truncate">{label}</span></div><input aria-label={`${label} weightage`} type="number" min="0" step="0.1" value={draftWeights[key]} onChange={e => updateWeight(key, e.target.value)} className="mt-1 w-full rounded-md border border-slate-200 px-2 py-1 text-xs text-slate-800 outline-none focus:border-violet-400"/></label>; })}</div><div className="flex items-center justify-between mt-2 gap-2"><p className="text-[10px] leading-3.5 text-slate-400">Only checked components count. Weightage is normalized to exactly 40 when applied.</p><button onClick={applyWeights} disabled={applyingWeights || selectedTotal <= 0} className="shrink-0 bg-[#3d2aa0] text-white text-xs font-semibold rounded-lg px-3 py-1.5 shadow-sm disabled:opacity-50">{applyingWeights ? "Applying..." : "Apply"}</button></div></section>
           <section className="rounded-xl border border-slate-200 bg-white p-2.5 shadow-sm"><div className="flex items-start justify-between gap-2 mb-1.5"><div><h3 className="text-sm font-semibold text-slate-900">Moderated Marks Criteria</h3><p className="text-[10px] leading-3.5 text-slate-500 mt-0.5">Rank ranges map continuously to a marks range. Marks are defined from and to.</p></div><div className="flex gap-1.5 shrink-0"><select value="Moderate" onChange={() => undefined} className="border border-slate-200 rounded-lg px-2 py-1.5 text-[11px] text-slate-700 bg-white"><option>Moderate</option></select><select value={sortDirection} onChange={e => setSortDirection(e.target.value as SortDirection)} className="border border-slate-200 rounded-lg px-2 py-1.5 text-[11px] text-slate-700 bg-white"><option value="none">No sort</option><option value="asc">Low to high</option><option value="desc">High to low</option></select></div></div><div className="grid grid-cols-2 gap-1.5">{criteria.map((tier, index) => <div key={index} className="rounded-lg border border-slate-200 overflow-hidden"><div className="bg-violet-50 px-2.5 py-1 text-[11px] font-semibold text-slate-800">Tier {index + 1}</div><div className="grid grid-cols-4 divide-x divide-slate-200">{(["from","to","minMarks","maxMarks"] as const).map(field => <div key={field} className="p-1"><label className="block text-[8px] uppercase tracking-wide text-slate-400 mb-0.5">{field === "minMarks" ? "Marks from" : field === "maxMarks" ? "Marks to" : field}</label><input type="number" value={tier[field]} onChange={e => updateCriteria(index, field, e.target.value)} className="w-full min-w-0 rounded-md border border-slate-200 px-1.5 py-1.5 text-[11px] text-slate-800"/></div>)}</div></div>)}</div></section>
         </div>
-        <section className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden"><div className="px-3 py-2 border-b border-slate-100"><h3 className="text-sm font-semibold text-slate-900">Internal Marks Data</h3><p className="text-[10px] text-slate-500 mt-0.5">Basic marks use the selected components. Moderated marks are calculated from the configured rank criteria.</p></div><div className="max-h-[620px] overflow-y-auto overflow-x-hidden"><table className="w-full table-fixed border-collapse text-[10px]"><colgroup><col className="w-[2.5%]"/><col className="w-[16%]"/><col className="w-[13%]"/><col className="w-[7.5%]"/><col className="w-[7.5%]"/><col className="w-[7.5%]"/><col className="w-[9%]"/><col className="w-[7.5%]"/><col className="w-[7.5%]"/><col className="w-[9%]"/><col className="w-[10%]"/></colgroup><thead className="sticky top-0 bg-white z-10"><tr className="border-b border-slate-200 text-slate-500"><th className="text-center px-0.5 py-2 font-semibold">#</th><th className="text-left px-1.5 py-2 font-semibold">Name</th><th className="text-center px-1 py-2 font-semibold">Enrollment</th>{HEADERS.map(h => <th key={h.key} className="text-center px-0.5 py-2 font-semibold leading-3">{h.label}</th>)}</tr></thead><tbody>{sortedRows.map((row,index) => <tr key={row.enrollmentNo} className="border-b border-slate-100 last:border-0 hover:bg-slate-50/70"><td className="text-center px-0.5 py-1.5 text-slate-400 tabular-nums">{index+1}</td><td className="px-1.5 py-1.5 text-slate-800 font-medium truncate" title={row.name}>{row.name}</td><td className="text-center px-1 py-1.5 text-slate-500 truncate tabular-nums">{row.enrollmentNo}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.assignment}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.presentation}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.attendance}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.moderatedAttendanceWeighted}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.midsem1}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.midsem2}</td><td className={`text-center px-0.5 py-1.5 ${scoreClass(row.basic)} tabular-nums`}>{row.basic}</td><td className={`text-center px-0.5 py-1.5 ${scoreClass(row.moderated)} tabular-nums`}>{row.moderated}</td></tr>)}</tbody></table></div></section>
+        <section className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden"><div className="px-3 py-2 border-b border-slate-100"><h3 className="text-sm font-semibold text-slate-900">Internal Marks Data</h3><p className="text-[10px] text-slate-500 mt-0.5">Basic marks use the selected components. Moderated marks are calculated from the configured rank criteria.</p></div><div className="max-h-[620px] overflow-y-auto overflow-x-hidden"><table className="w-full table-fixed border-collapse text-[10px]"><colgroup><col className="w-[2.5%]"/><col className="w-[16%]"/><col className="w-[13%]"/><col className="w-[7.5%]"/><col className="w-[7.5%]"/><col className="w-[7.5%]"/><col className="w-[9%]"/><col className="w-[7.5%]"/><col className="w-[7.5%]"/><col className="w-[9%]"/><col className="w-[10%]"/></colgroup><thead className="sticky top-0 bg-white z-10"><tr className="border-b border-slate-200 text-slate-500"><th className="text-center px-0.5 py-2 font-semibold">#</th><th className="text-left px-1.5 py-2 font-semibold">Name</th><th className="text-center px-1 py-2 font-semibold">Enrollment</th>{HEADERS.map(h => <th key={h.key} className="text-center px-0.5 py-2 font-semibold leading-3">{h.label}</th>)}</tr></thead><tbody>{sortedRows.map((row,index) => <tr key={row.enrollmentNo} className="border-b border-slate-100 last:border-0 hover:bg-slate-50/70"><td className="text-center px-0.5 py-1.5 text-slate-400 tabular-nums">{index+1}</td><td className="px-1.5 py-1.5 text-slate-800 font-medium truncate" title={row.name}>{row.name}</td><td className="text-center px-1 py-1.5 text-slate-500 truncate tabular-nums">{row.enrollmentNo}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.assignment}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.presentation}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.attendance}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.moderatedAttendanceWeighted}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.midsem1}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.midsem2}</td><td className={`text-center px-0.5 py-1.5 ${riskScoreClass(row.basic)} tabular-nums`}>{row.basic}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.moderated}</td></tr>)}</tbody></table></div></section>
       </> : data && <>
         <div className="at-risk-layout">
           <section className="at-risk-filter rounded-xl border border-slate-200 bg-white shadow-sm">

From 9ab2ddefe697ff4bd44e3b849b171921cdf457ad Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sat, 29 Aug 2026 16:44:50 +0530
Subject: [PATCH 14/80] Redesign teacher dashboard

---
 pages/dashboard.tsx | 286 ++++++++++++++++++++++++++++++++++++--------
 1 file changed, 233 insertions(+), 53 deletions(-)

diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index e6b4e5f..9904e84 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -4,6 +4,23 @@ import { authOptions } from "../lib/authOptions";
 import { prisma } from "../lib/prisma";
 import Link from "next/link";
 import { signOut } from "next-auth/react";
+import {
+  ArrowRight,
+  BarChart3,
+  Bell,
+  BookOpen,
+  CalendarDays,
+  CheckCircle2,
+  ClipboardCheck,
+  Clock3,
+  Database,
+  FileText,
+  HelpCircle,
+  LayoutDashboard,
+  LogOut,
+  Menu,
+  UserRoundPlus,
+} from "lucide-react";
 
 interface Props {
   teacherName: string;
@@ -11,70 +28,235 @@ interface Props {
   subjects: { id: string; label: string }[];
 }
 
+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: "/section-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]",
+  },
+];
+
+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" },
+];
+
+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" },
+];
+
 export default function Dashboard({ teacherName, sections, subjects }: Props) {
+  const initials = teacherName
+    .split(" ")
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase())
+    .join("");
+
   return (
-    <div className="min-h-screen">
-      <header className="border-b border-gray-100 bg-white">
-        <div className="max-w-[1700px] mx-auto px-8 py-4 flex items-center justify-between">
-          <div>
-            <h1 className="font-semibold text-gray-900">ClassPulse</h1>
-            <p className="text-sm text-gray-500">Welcome, {teacherName}</p>
+    <div className="min-h-screen bg-[#fffdf8] text-[#17223b] lg:flex">
+      <aside className="hidden w-[220px] shrink-0 border-r border-[#e8e7e3] bg-white lg:flex lg:min-h-screen lg:flex-col lg:fixed lg:inset-y-0 lg:left-0">
+        <div className="px-5 pt-6">
+          <Link href="/dashboard" className="flex items-center gap-3">
+            <span className="grid h-10 w-10 place-items-center rounded-xl bg-[#39268f] text-white shadow-[0_10px_25px_rgba(57,38,143,0.2)]">
+              <BarChart3 size={21} strokeWidth={2.2} />
+            </span>
+            <span className="text-[20px] font-extrabold tracking-[-0.7px]">ClassPulse</span>
+          </Link>
+        </div>
+
+        <div className="mx-5 mt-7 flex items-center gap-3 border-b border-[#eeeeeb] pb-6">
+          <span className="grid h-10 w-10 place-items-center rounded-full bg-[#eeeaff] text-sm font-bold text-[#4b36a7]">{initials || "T"}</span>
+          <div className="min-w-0">
+            <p className="truncate text-sm font-semibold">{teacherName}</p>
+            <p className="text-xs text-[#7a8295]">Faculty</p>
+          </div>
+        </div>
+
+        <nav className="mt-5 space-y-1 px-3 text-sm font-medium text-[#626b80]">
+          <Link href="/dashboard" className="flex items-center gap-3 rounded-xl bg-[#eeeaff] px-3 py-3 font-semibold text-[#38258e]">
+            <LayoutDashboard size={18} /> Dashboard
+          </Link>
+          <Link href="/attendance-agent" className="flex items-center gap-3 rounded-xl px-3 py-3 transition hover:bg-[#f6f4ff] hover:text-[#38258e]">
+            <UserRoundPlus size={18} /> Attendance Agent
+          </Link>
+          <Link href="/timetable" className="flex items-center gap-3 rounded-xl px-3 py-3 transition hover:bg-[#f6f4ff] hover:text-[#38258e]">
+            <CalendarDays size={18} /> Timetable
+          </Link>
+          <Link href="/section-analysis" className="flex items-center gap-3 rounded-xl px-3 py-3 transition hover:bg-[#f6f4ff] hover:text-[#38258e]">
+            <BarChart3 size={18} /> Class Analysis
+          </Link>
+          <Link href="/subject-analysis" className="flex items-center gap-3 rounded-xl px-3 py-3 transition hover:bg-[#f6f4ff] hover:text-[#38258e]">
+            <BookOpen size={18} /> Subject Analysis
+          </Link>
+          <Link href="/raw-data" className="flex items-center gap-3 rounded-xl px-3 py-3 transition hover:bg-[#f6f4ff] hover:text-[#38258e]">
+            <Database size={18} /> Raw Data
+          </Link>
+          <button type="button" className="flex w-full items-center gap-3 rounded-xl px-3 py-3 text-left transition hover:bg-[#f6f4ff] hover:text-[#38258e]">
+            <Bell size={18} /> Notifications
+          </button>
+        </nav>
+
+        <div className="mt-auto px-4 pb-5">
+          <div className="rounded-2xl border border-[#ded8ff] bg-[#faf9ff] p-4">
+            <div className="flex items-start gap-3">
+              <span className="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-white text-[#5842e8]">
+                <HelpCircle size={18} />
+              </span>
+              <div>
+                <p className="text-xs font-bold">Need Help?</p>
+                <p className="mt-1 text-[11px] leading-5 text-[#7a8295]">Visit our help center or contact support.</p>
+              </div>
+            </div>
+            <button type="button" className="mt-3 w-full rounded-lg border border-[#9d91ff] bg-white px-3 py-2 text-xs font-semibold text-[#5842e8]">
+              Help Center <ArrowRight size={13} className="ml-1 inline" />
+            </button>
           </div>
           <button
             onClick={() => signOut({ callbackUrl: "/login" })}
-            className="text-sm text-gray-500 hover:text-gray-900"
+            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]"
           >
-            Sign out
+            <LogOut size={18} /> Sign out
           </button>
         </div>
-      </header>
-
-      <main className="max-w-[1700px] mx-auto px-8 py-10">
-        <h2 className="text-lg font-medium text-gray-900 mb-1">What would you like to do today?</h2>
-        <p className="text-sm text-gray-500 mb-8">Choose an option below to view and analyze your data.</p>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <section className="bg-white rounded-2xl border border-gray-100 p-6">
-            <h3 className="font-medium text-gray-900 mb-1">Class Analysis</h3>
-            <p className="text-sm text-gray-500 mb-4">
-              Combined attendance and exam performance for a whole class/section.
-            </p>
-            <div className="space-y-2">
-              {sections.map((s) => (
-                <Link
-                  key={s.id}
-                  href={`/section-analysis/${s.id}`}
-                  className="block text-sm rounded-lg border border-gray-100 px-3 py-2 hover:bg-gray-50"
-                >
-                  {s.label}
-                </Link>
-              ))}
-              {sections.length === 0 && (
-                <p className="text-sm text-gray-400">No classes assigned yet.</p>
-              )}
+      </aside>
+
+      <main className="w-full lg:ml-[220px]">
+        <div className="mx-auto max-w-[1500px] px-5 py-6 sm:px-8 lg:px-10 lg:py-8">
+          <header className="flex items-start justify-between gap-4">
+            <div>
+              <div className="flex items-center gap-3 lg:hidden">
+                <span className="grid h-10 w-10 place-items-center rounded-xl bg-[#39268f] text-white"><BarChart3 size={20} /></span>
+                <span className="text-lg font-extrabold">ClassPulse</span>
+              </div>
+              <h1 className="mt-5 text-[28px] font-extrabold tracking-[-1.2px] sm:text-[32px] lg:mt-0">Welcome back, {teacherName}</h1>
+              <p className="mt-1 text-sm text-[#6f7890]">Here&apos;s an overview of your day.</p>
+            </div>
+            <div className="flex items-center gap-3">
+              <button type="button" className="relative grid h-11 w-11 place-items-center rounded-xl border border-[#e3e3df] bg-white text-[#566078] shadow-sm">
+                <Bell size={19} />
+                <span className="absolute -right-1 -top-1 grid h-5 w-5 place-items-center rounded-full bg-[#ef4b4b] text-[10px] font-bold text-white">3</span>
+              </button>
+              <div className="hidden items-center gap-2 rounded-xl border border-[#e3e3df] bg-white px-4 py-3 text-sm font-medium text-[#3e465b] shadow-sm sm:flex">
+                <CalendarDays size={17} className="text-[#5b4ee6]" />
+                {new Date().toLocaleDateString("en-IN", { day: "numeric", month: "short", year: "numeric" })}
+              </div>
+              <button type="button" className="grid h-11 w-11 place-items-center rounded-xl border border-[#e3e3df] bg-white text-[#566078] sm:hidden">
+                <Menu size={19} />
+              </button>
+            </div>
+          </header>
+
+          <section className="mt-8 rounded-2xl border border-[#e5e4e1] bg-white p-5 shadow-[0_8px_25px_rgba(31,35,49,0.04)] sm:p-6">
+            <div className="mb-5">
+              <h2 className="text-lg font-bold">Quick Actions</h2>
+              <p className="mt-1 text-xs text-[#7b8498]">Jump straight into the tools you use most.</p>
+            </div>
+            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
+              {quickActions.map((action) => {
+                const Icon = action.icon;
+                const isAnalysis = action.title === "Class Analysis" || action.title === "Subject Analysis";
+                const href = isAnalysis
+                  ? action.title === "Class Analysis"
+                    ? sections[0]?.id ? `/section-analysis/${sections[0].id}` : "/section-analysis"
+                    : subjects[0]?.id ? `/subject-analysis/${subjects[0].id}` : "/subject-analysis"
+                  : action.href;
+
+                return (
+                  <Link key={action.title} href={href} className="group flex min-h-[116px] items-center gap-4 rounded-xl border border-[#e6e6e5] bg-white p-4 transition hover:-translate-y-0.5 hover:border-[#d9d2ff] hover:shadow-[0_8px_24px_rgba(57,38,143,0.08)]">
+                    <span className={`grid h-12 w-12 shrink-0 place-items-center rounded-full ${action.tone}`}><Icon size={23} strokeWidth={2} /></span>
+                    <span className="min-w-0 flex-1">
+                      <span className="block text-sm font-bold text-[#17223b]">{action.title}</span>
+                      <span className="mt-1 block text-xs leading-5 text-[#747d91]">{action.description}</span>
+                    </span>
+                    <ArrowRight size={18} className="shrink-0 text-[#626b80] transition group-hover:translate-x-1 group-hover:text-[#4b36a7]" />
+                  </Link>
+                );
+              })}
             </div>
           </section>
 
-          <section className="bg-white rounded-2xl border border-gray-100 p-6">
-            <h3 className="font-medium text-gray-900 mb-1">Subject Analysis</h3>
-            <p className="text-sm text-gray-500 mb-4">
-              Detailed attendance, marks, and student reports for one subject.
-            </p>
-            <div className="space-y-2">
-              {subjects.map((s) => (
-                <Link
-                  key={s.id}
-                  href={`/subject-analysis/${s.id}`}
-                  className="block text-sm rounded-lg border border-gray-100 px-3 py-2 hover:bg-gray-50"
-                >
-                  {s.label}
-                </Link>
-              ))}
-              {subjects.length === 0 && (
-                <p className="text-sm text-gray-400">No subjects assigned yet.</p>
-              )}
+          <section className="mt-6 grid grid-cols-1 gap-6 xl:grid-cols-[1fr_1.18fr]">
+            <div className="rounded-2xl border border-[#e5e4e1] bg-white shadow-[0_8px_25px_rgba(31,35,49,0.04)]">
+              <div className="flex items-center justify-between border-b border-[#eeeeeb] px-5 py-5 sm:px-6">
+                <div>
+                  <h2 className="text-lg font-bold">Today&apos;s Timetable</h2>
+                  <p className="mt-1 text-xs text-[#7b8498]">Your scheduled classes for today.</p>
+                </div>
+                <Link href="/timetable" className="text-xs font-semibold text-[#5b4ee6] hover:underline">View full timetable <ArrowRight size={13} className="ml-1 inline" /></Link>
+              </div>
+              <div className="p-5 sm:px-6">
+                {todaySchedule.map((item, index) => (
+                  <div key={`${item.time}-${item.subject}`} className="relative flex gap-4 pb-5 last:pb-0">
+                    <div className="flex w-[66px] shrink-0 flex-col text-right text-xs font-medium text-[#667088]">
+                      <span>{item.time}</span>
+                      <span className="mt-1 text-[11px] text-[#9aa1af]">{item.end}</span>
+                    </div>
+                    <div className="relative flex-1 border-b border-[#eeeeeb] pb-5 pl-5 last:border-0">
+                      <span className={`absolute left-0 top-1 h-2.5 w-2.5 -translate-x-1/2 rounded-full ring-4 ring-white ${item.active ? "bg-[#5b4ee6]" : "bg-[#c8c3f5]"}`} />
+                      {index < todaySchedule.length - 1 && <span className="absolute left-0 top-3 h-full w-px -translate-x-1/2 bg-[#ddd9fb]" />}
+                      <p className="text-sm font-bold">{item.subject}</p>
+                      <p className="mt-1 text-xs text-[#737d92]">{item.section} <span className="mx-1">•</span> {item.room}</p>
+                      {item.active && <span className="mt-2 inline-flex items-center gap-1 rounded-full bg-[#f0edff] px-2 py-1 text-[10px] font-semibold text-[#5b4ee6]"><Clock3 size={11} /> Next class</span>}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="rounded-2xl border border-[#e5e4e1] bg-white shadow-[0_8px_25px_rgba(31,35,49,0.04)]">
+              <div className="flex items-center justify-between border-b border-[#eeeeeb] px-5 py-5 sm:px-6">
+                <div>
+                  <h2 className="text-lg font-bold">Recent Activity</h2>
+                  <p className="mt-1 text-xs text-[#7b8498]">Your latest actions in ClassPulse.</p>
+                </div>
+                <button type="button" className="text-xs font-semibold text-[#5b4ee6]">View all activity <ArrowRight size={13} className="ml-1 inline" /></button>
+              </div>
+              <div className="px-5 sm:px-6">
+                {recentActivity.map((activity) => {
+                  const Icon = activity.icon;
+                  return (
+                    <div key={activity.text} className="flex items-center gap-3 border-b border-[#eeeeeb] py-4 last:border-0">
+                      <span className={`grid h-9 w-9 shrink-0 place-items-center rounded-full ${activity.tone}`}><Icon size={17} /></span>
+                      <p className="min-w-0 flex-1 text-xs font-medium leading-5 text-[#3f485d]">{activity.text}</p>
+                      <span className="shrink-0 text-[10px] font-medium text-[#8991a2]">{activity.time}</span>
+                    </div>
+                  );
+                })}
+              </div>
             </div>
           </section>
+
+          <footer className="py-7 text-center text-xs text-[#9aa1af]">© 2026 ClassPulse. All rights reserved.</footer>
         </div>
       </main>
     </div>
@@ -90,8 +272,6 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
   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 } } } })

From 670405dd21ea6987bf2da3e362801da15ff6f680 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sat, 29 Aug 2026 18:53:13 +0530
Subject: [PATCH 15/80] Seed ECE batches and semester subjects

---
 prisma/seed.ts | 269 +++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 227 insertions(+), 42 deletions(-)

diff --git a/prisma/seed.ts b/prisma/seed.ts
index 425a114..7196111 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -3,17 +3,113 @@ import bcrypt from "bcryptjs";
 
 const prisma = new PrismaClient();
 
+type SubjectSeed = {
+  name: string;
+  code: string;
+};
+
+// These are the theory subjects supplied for the ECE curriculum.
+// Labs are intentionally excluded for now.
+const subjectsBySemester: Record<number, SubjectSeed[]> = {
+  1: [
+    { name: "Environmental Studies", code: "SEM1-ENVIRONMENTAL-STUDIES" },
+    { name: "Engineering Graphics-I", code: "SEM1-ENGINEERING-GRAPHICS-I" },
+    { name: "Manufacturing Process", code: "SEM1-MANUFACTURING-PROCESS" },
+    { name: "Communications Skills", code: "SEM1-COMMUNICATIONS-SKILLS" },
+    { name: "Applied Mathematics-I", code: "SEM1-APPLIED-MATHEMATICS-I" },
+    { name: "Applied Physics-I", code: "SEM1-APPLIED-PHYSICS-I" },
+    { name: "Programming in C", code: "SEM1-PROGRAMMING-IN-C" },
+  ],
+  2: [
+    { name: "Applied Chemistry", code: "SEM2-APPLIED-CHEMISTRY" },
+    { name: "Applied Physics-II", code: "SEM2-APPLIED-PHYSICS-II" },
+    { name: "Electrical Science", code: "SEM2-ELECTRICAL-SCIENCE" },
+    { name: "Applied Mathematics-II", code: "SEM2-APPLIED-MATHEMATICS-II" },
+    { name: "Engineering Mechanics", code: "SEM2-ENGINEERING-MECHANICS" },
+    { name: "Indian Constitution", code: "SEM2-INDIAN-CONSTITUTION" },
+    { name: "Human Values and Ethics", code: "SEM2-HUMAN-VALUES-AND-ETHICS" },
+  ],
+  3: [
+    { name: "Computational Methods", code: "SEM3-COMPUTATIONAL-METHODS" },
+    { name: "Indian Knowledge System", code: "SEM3-INDIAN-KNOWLEDGE-SYSTEM" },
+    { name: "Signal and System", code: "SEM3-SIGNAL-AND-SYSTEM" },
+    { name: "Digital Logic and Computer Design", code: "SEM3-DIGITAL-LOGIC-AND-COMPUTER-DESIGN" },
+    { name: "Analog Communications", code: "SEM3-ANALOG-COMMUNICATIONS" },
+    { name: "Analog Electronics-I", code: "SEM3-ANALOG-ELECTRONICS-I" },
+  ],
+  4: [
+    { name: "Probability, Statistics and Linear Programming", code: "SEM4-PSLP" },
+    { name: "Technical Writing", code: "SEM4-TECHNICAL-WRITING" },
+    { name: "Network Analysis and Synthesis", code: "SEM4-NAS" },
+    { name: "Microprocessors and Microcontrollers", code: "SEM4-MICROPROCESSORS-AND-MICROCONTROLLERS" },
+    { name: "Digital Communications", code: "SEM4-DIGITAL-COMMUNICATIONS" },
+    { name: "Analog Electronics-II", code: "SEM4-ANALOG-ELECTRONICS-II" },
+    { name: "Electromagnetic Field Theory", code: "SEM4-EMFT" },
+  ],
+  5: [
+    { name: "Economics for Engineers", code: "SEM5-ECONOMICS-FOR-ENGINEERS" },
+    { name: "Digital Signal Processing", code: "SEM5-DSP" },
+    { name: "Microelectronics", code: "SEM5-MICROELECTRONICS" },
+    { name: "Introduction to Control Systems", code: "SEM5-INTRODUCTION-TO-CONTROL-SYSTEMS" },
+    { name: "Transmission Lines, Waveguides and Antenna Design", code: "SEM5-TLWAD" },
+    { name: "Data Communication and Networking", code: "SEM5-DCN" },
+  ],
+  6: [
+    { name: "PME", code: "MS-302" },
+    { name: "AI", code: "ECE 318 T" },
+    { name: "OCSN", code: "ECE 326 T" },
+    { name: "ML", code: "ECE 350 T" },
+    { name: "SSM&DA", code: "DA 304 T" },
+    { name: "DA", code: "DA 338 T" },
+  ],
+  7: [
+    // The timetable supplied identifies these by these abbreviations only.
+    { name: "MLDA", code: "MLDA" },
+    { name: "IOT", code: "IOT" },
+    { name: "PR", code: "PR" },
+    { name: "USL", code: "USL" },
+    { name: "SL", code: "SL" },
+    { name: "PE", code: "PE" },
+  ],
+};
+
+const eceBatches = ["ECE 1", "ECE 2", "ECE E"];
+
+function yearForSemester(semester: number) {
+  if (semester <= 2) return "1st Year";
+  if (semester <= 4) return "2nd Year";
+  if (semester <= 6) return "3rd Year";
+  return "4th Year";
+}
+
 async function main() {
-  const college = await prisma.college.create({ data: { name: "Demo Institute of Technology" } });
+  const college = await prisma.college.upsert({
+    where: { id: "demo-college" },
+    update: { name: "Demo Institute of Technology" },
+    create: { id: "demo-college", name: "Demo Institute of Technology" },
+  });
 
-  const dept = await prisma.department.create({
-    data: { name: "ECE", collegeId: college.id },
+  const dept = await prisma.department.findFirst({
+    where: { collegeId: college.id, name: "ECE" },
   });
 
+  const eceDepartment =
+    dept ??
+    (await prisma.department.create({
+      data: { name: "ECE", collegeId: college.id },
+    }));
+
   const passwordHash = await bcrypt.hash("changeme123", 10);
 
-  const teacher = await prisma.user.create({
-    data: {
+  const teacher = await prisma.user.upsert({
+    where: { email: "geetanjali@demo.edu" },
+    update: {
+      name: "Dr. Geetanjali",
+      passwordHash,
+      role: "TEACHER",
+      collegeId: college.id,
+    },
+    create: {
       name: "Dr. Geetanjali",
       email: "geetanjali@demo.edu",
       passwordHash,
@@ -22,8 +118,15 @@ async function main() {
     },
   });
 
-  const admin = await prisma.user.create({
-    data: {
+  await prisma.user.upsert({
+    where: { email: "admin@demo.edu" },
+    update: {
+      name: "College Admin",
+      passwordHash,
+      role: "ADMIN",
+      collegeId: college.id,
+    },
+    create: {
       name: "College Admin",
       email: "admin@demo.edu",
       passwordHash,
@@ -32,51 +135,133 @@ async function main() {
     },
   });
 
-  const cls = await prisma.class.create({
-    data: {
-      departmentId: dept.id,
-      program: "B.Tech ECE",
+  // Create all three ECE batches for Semesters 1-7.
+  // Semester 8 intentionally has no regular subjects.
+  for (const batch of eceBatches) {
+    for (let semester = 1; semester <= 7; semester += 1) {
+      const existingClass = await prisma.class.findFirst({
+        where: {
+          departmentId: eceDepartment.id,
+          program: `B.Tech ${batch}`,
+          academicYear: "2026-27",
+          semester,
+        },
+      });
+
+      const cls =
+        existingClass ??
+        (await prisma.class.create({
+          data: {
+            departmentId: eceDepartment.id,
+            program: `B.Tech ${batch}`,
+            academicYear: "2026-27",
+            year: yearForSemester(semester),
+            semester,
+            proctorId: semester === 7 && batch === "ECE 2" ? teacher.id : null,
+          },
+        }));
+
+      const existingSection = await prisma.section.findFirst({
+        where: { classId: cls.id, name: "A" },
+      });
+
+      const section =
+        existingSection ??
+        (await prisma.section.create({
+          data: {
+            classId: cls.id,
+            name: "A",
+            strength: batch === "ECE 2" && semester === 7 ? 65 : 0,
+          },
+        }));
+
+      for (const subject of subjectsBySemester[semester]) {
+        const existingSubject = await prisma.subject.findFirst({
+          where: { sectionId: section.id, code: subject.code },
+        });
+
+        if (!existingSubject) {
+          await prisma.subject.create({
+            data: {
+              name: subject.name,
+              code: subject.code,
+              sectionId: section.id,
+            },
+          });
+        }
+      }
+    }
+  }
+
+  // Keep the existing ECE 2 Sem 7 / Section A demo data and its sheet links.
+  const demoClass = await prisma.class.findFirst({
+    where: {
+      departmentId: eceDepartment.id,
+      program: "B.Tech ECE 2",
       academicYear: "2026-27",
-      year: "4th Year",
       semester: 7,
-      proctorId: teacher.id,
     },
   });
 
-  const section = await prisma.section.create({
-    data: { classId: cls.id, name: "A", strength: 65 },
-  });
+  const demoSection = demoClass
+    ? await prisma.section.findFirst({ where: { classId: demoClass.id, name: "A" } })
+    : null;
 
-  const subject = await prisma.subject.create({
-    data: { name: "Data Analysis", code: "DA 338 T", sectionId: section.id },
-  });
+  if (demoSection) {
+    await prisma.section.update({
+      where: { id: demoSection.id },
+      data: { strength: 65 },
+    });
 
-  await prisma.assignment.create({
-    data: { teacherId: teacher.id, subjectId: subject.id },
-  });
+    const daSubject = await prisma.subject.findFirst({
+      where: { sectionId: demoSection.id, code: "DA 338 T" },
+    });
 
-  // Section-level combined sheet (required — one per section).
-  await prisma.sheetLink.create({
-    data: {
-      sectionId: section.id,
-      sheetId: "1DM3brNxfdWl0I4r9cbffjh_PlXaWaTsM",
-    },
-  });
+    if (daSubject) {
+      const assignment = await prisma.assignment.findFirst({
+        where: { teacherId: teacher.id, subjectId: daSubject.id },
+      });
 
-  // Subject-level sheet (optional per subject).
-  await prisma.sheetLink.create({
-    data: {
-      subjectId: subject.id,
-      sheetId: "118662A6Ifl2GDZKnh120v2jNylUiMWGNYThfRXSDX6U",
-    },
-  });
+      if (!assignment) {
+        await prisma.assignment.create({
+          data: { teacherId: teacher.id, subjectId: daSubject.id },
+        });
+      }
+
+      const subjectSheet = await prisma.sheetLink.findFirst({
+        where: { subjectId: daSubject.id },
+      });
+
+      if (!subjectSheet) {
+        await prisma.sheetLink.create({
+          data: {
+            subjectId: daSubject.id,
+            sheetId: "118662A6Ifl2GDZKnh120v2jNylUiMWGNYThfRXSDX6U",
+          },
+        });
+      }
+    }
+
+    const sectionSheet = await prisma.sheetLink.findFirst({
+      where: { sectionId: demoSection.id },
+    });
+
+    if (!sectionSheet) {
+      await prisma.sheetLink.create({
+        data: {
+          sectionId: demoSection.id,
+          sheetId: "1DM3brNxfdWl0I4r9cbffjh_PlXaWaTsM",
+        },
+      });
+    }
+  }
 
-  console.log("Seeded. Login as:");
-  console.log("  teacher: geetanjali@demo.edu / changeme123");
-  console.log("  admin:   admin@demo.edu / changeme123");
-  console.log("");
-  console.log("1DM3brNxfdWl0I4r9cbffjh_PlXaWaTsM");
-  console.log("in prisma/seed.ts with your real combined-section sheet's ID, then re-seed.");
+  console.log("Seed complete.");
+  console.log("Created/updated ECE 1, ECE 2 and ECE E for Semesters 1-7.");
+  console.log("Semester 8 intentionally has no subjects.");
+  console.log("Labs are intentionally excluded.");
+  console.log("Login as: geetanjali@demo.edu / changeme123");
+  console.log("Admin: admin@demo.edu / changeme123");
 }
 
 main()

From 8036e69bcecd7aa43d47ca39acb17d995f3e67cc Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sat, 29 Aug 2026 18:53:49 +0530
Subject: [PATCH 16/80] Reuse legacy ECE 7th-semester class in seed

---
 prisma/seed.ts | 48 ++++++++++++++++++++++++++++++++++++------------
 1 file changed, 36 insertions(+), 12 deletions(-)

diff --git a/prisma/seed.ts b/prisma/seed.ts
index 7196111..aacfbd9 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -1,14 +1,14 @@
 import { PrismaClient } from "@prisma/client";
 import bcrypt from "bcryptjs";
 
-const prisma = new PrismaClient();
-
 type SubjectSeed = {
   name: string;
   code: string;
 };
 
-// These are the theory subjects supplied for the ECE curriculum.
+const prisma = new PrismaClient();
+
+// Theory subjects supplied for the ECE curriculum.
 // Labs are intentionally excluded for now.
 const subjectsBySemester: Record<number, SubjectSeed[]> = {
   1: [
@@ -63,7 +63,7 @@ const subjectsBySemester: Record<number, SubjectSeed[]> = {
     { name: "DA", code: "DA 338 T" },
   ],
   7: [
-    // The timetable supplied identifies these by these abbreviations only.
+    // The supplied timetable identifies these subjects by these abbreviations only.
     { name: "MLDA", code: "MLDA" },
     { name: "IOT", code: "IOT" },
     { name: "PR", code: "PR" },
@@ -89,12 +89,12 @@ async function main() {
     create: { id: "demo-college", name: "Demo Institute of Technology" },
   });
 
-  const dept = await prisma.department.findFirst({
+  const existingDepartment = await prisma.department.findFirst({
     where: { collegeId: college.id, name: "ECE" },
   });
 
   const eceDepartment =
-    dept ??
+    existingDepartment ??
     (await prisma.department.create({
       data: { name: "ECE", collegeId: college.id },
     }));
@@ -139,12 +139,20 @@ async function main() {
   // Semester 8 intentionally has no regular subjects.
   for (const batch of eceBatches) {
     for (let semester = 1; semester <= 7; semester += 1) {
+      const program = `B.Tech ${batch}`;
+      const isLegacyEce2Sem7 = batch === "ECE 2" && semester === 7;
+
+      // The original demo seed created "B.Tech ECE" for Sem 7.
+      // Reuse that record as ECE 2 instead of leaving a duplicate class behind.
       const existingClass = await prisma.class.findFirst({
         where: {
           departmentId: eceDepartment.id,
-          program: `B.Tech ${batch}`,
           academicYear: "2026-27",
           semester,
+          OR: [
+            { program },
+            ...(isLegacyEce2Sem7 ? [{ program: "B.Tech ECE" }] : []),
+          ],
         },
       });
 
@@ -153,7 +161,7 @@ async function main() {
         (await prisma.class.create({
           data: {
             departmentId: eceDepartment.id,
-            program: `B.Tech ${batch}`,
+            program,
             academicYear: "2026-27",
             year: yearForSemester(semester),
             semester,
@@ -161,12 +169,21 @@ async function main() {
           },
         }));
 
-      const existingSection = await prisma.section.findFirst({
-        where: { classId: cls.id, name: "A" },
-      });
+      if (cls.program !== program) {
+        await prisma.class.update({
+          where: { id: cls.id },
+          data: {
+            program,
+            year: yearForSemester(semester),
+            proctorId: semester === 7 && batch === "ECE 2" ? teacher.id : cls.proctorId,
+          },
+        });
+      }
 
       const section =
-        existingSection ??
+        (await prisma.section.findFirst({
+          where: { classId: cls.id, name: "A" },
+        })) ??
         (await prisma.section.create({
           data: {
             classId: cls.id,
@@ -175,6 +192,13 @@ async function main() {
           },
         }));
 
+      if (batch === "ECE 2" && semester === 7) {
+        await prisma.section.update({
+          where: { id: section.id },
+          data: { strength: 65 },
+        });
+      }
+
       for (const subject of subjectsBySemester[semester]) {
         const existingSubject = await prisma.subject.findFirst({
           where: { sectionId: section.id, code: subject.code },

From bb4ffdb85ea5a09adf36f417f2a410f4f054ead1 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sat, 29 Aug 2026 18:57:01 +0530
Subject: [PATCH 17/80] Add complete ECE batch curriculum seed

---
 prisma/seed.ts | 143 ++++++++++++++-----------------------------------
 1 file changed, 39 insertions(+), 104 deletions(-)

diff --git a/prisma/seed.ts b/prisma/seed.ts
index aacfbd9..5c75915 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -1,15 +1,11 @@
 import { PrismaClient } from "@prisma/client";
 import bcrypt from "bcryptjs";
 
-type SubjectSeed = {
-  name: string;
-  code: string;
-};
+type SubjectSeed = { name: string; code: string };
 
 const prisma = new PrismaClient();
 
-// Theory subjects supplied for the ECE curriculum.
-// Labs are intentionally excluded for now.
+// Theory subjects supplied for the ECE curriculum. Labs are intentionally excluded.
 const subjectsBySemester: Record<number, SubjectSeed[]> = {
   1: [
     { name: "Environmental Studies", code: "SEM1-ENVIRONMENTAL-STUDIES" },
@@ -63,7 +59,6 @@ const subjectsBySemester: Record<number, SubjectSeed[]> = {
     { name: "DA", code: "DA 338 T" },
   ],
   7: [
-    // The supplied timetable identifies these subjects by these abbreviations only.
     { name: "MLDA", code: "MLDA" },
     { name: "IOT", code: "IOT" },
     { name: "PR", code: "PR" },
@@ -89,26 +84,15 @@ async function main() {
     create: { id: "demo-college", name: "Demo Institute of Technology" },
   });
 
-  const existingDepartment = await prisma.department.findFirst({
-    where: { collegeId: college.id, name: "ECE" },
-  });
-
   const eceDepartment =
-    existingDepartment ??
-    (await prisma.department.create({
-      data: { name: "ECE", collegeId: college.id },
-    }));
+    (await prisma.department.findFirst({ where: { collegeId: college.id, name: "ECE" } })) ??
+    (await prisma.department.create({ data: { name: "ECE", collegeId: college.id } }));
 
   const passwordHash = await bcrypt.hash("changeme123", 10);
 
   const teacher = await prisma.user.upsert({
     where: { email: "geetanjali@demo.edu" },
-    update: {
-      name: "Dr. Geetanjali",
-      passwordHash,
-      role: "TEACHER",
-      collegeId: college.id,
-    },
+    update: { name: "Dr. Geetanjali", passwordHash, role: "TEACHER", collegeId: college.id },
     create: {
       name: "Dr. Geetanjali",
       email: "geetanjali@demo.edu",
@@ -120,12 +104,7 @@ async function main() {
 
   await prisma.user.upsert({
     where: { email: "admin@demo.edu" },
-    update: {
-      name: "College Admin",
-      passwordHash,
-      role: "ADMIN",
-      collegeId: college.id,
-    },
+    update: { name: "College Admin", passwordHash, role: "ADMIN", collegeId: college.id },
     create: {
       name: "College Admin",
       email: "admin@demo.edu",
@@ -135,29 +114,25 @@ async function main() {
     },
   });
 
-  // Create all three ECE batches for Semesters 1-7.
+  // Create the three ECE batches for Semesters 1-7.
   // Semester 8 intentionally has no regular subjects.
   for (const batch of eceBatches) {
     for (let semester = 1; semester <= 7; semester += 1) {
       const program = `B.Tech ${batch}`;
       const isLegacyEce2Sem7 = batch === "ECE 2" && semester === 7;
 
-      // The original demo seed created "B.Tech ECE" for Sem 7.
-      // Reuse that record as ECE 2 instead of leaving a duplicate class behind.
-      const existingClass = await prisma.class.findFirst({
-        where: {
-          departmentId: eceDepartment.id,
-          academicYear: "2026-27",
-          semester,
-          OR: [
-            { program },
-            ...(isLegacyEce2Sem7 ? [{ program: "B.Tech ECE" }] : []),
-          ],
-        },
-      });
-
       const cls =
-        existingClass ??
+        (await prisma.class.findFirst({
+          where: {
+            departmentId: eceDepartment.id,
+            academicYear: "2026-27",
+            semester,
+            OR: [
+              { program },
+              ...(isLegacyEce2Sem7 ? [{ program: "B.Tech ECE" }] : []),
+            ],
+          },
+        })) ??
         (await prisma.class.create({
           data: {
             departmentId: eceDepartment.id,
@@ -169,7 +144,7 @@ async function main() {
           },
         }));
 
-      if (cls.program !== program) {
+      if (cls.program !== program || cls.year !== yearForSemester(semester)) {
         await prisma.class.update({
           where: { id: cls.id },
           data: {
@@ -181,9 +156,7 @@ async function main() {
       }
 
       const section =
-        (await prisma.section.findFirst({
-          where: { classId: cls.id, name: "A" },
-        })) ??
+        (await prisma.section.findFirst({ where: { classId: cls.id, name: "A" } })) ??
         (await prisma.section.create({
           data: {
             classId: cls.id,
@@ -192,32 +165,24 @@ async function main() {
           },
         }));
 
-      if (batch === "ECE 2" && semester === 7) {
-        await prisma.section.update({
-          where: { id: section.id },
-          data: { strength: 65 },
-        });
+      if (batch === "ECE 2" && semester === 7 && section.strength !== 65) {
+        await prisma.section.update({ where: { id: section.id }, data: { strength: 65 } });
       }
 
       for (const subject of subjectsBySemester[semester]) {
-        const existingSubject = await prisma.subject.findFirst({
+        const existing = await prisma.subject.findFirst({
           where: { sectionId: section.id, code: subject.code },
         });
-
-        if (!existingSubject) {
+        if (!existing) {
           await prisma.subject.create({
-            data: {
-              name: subject.name,
-              code: subject.code,
-              sectionId: section.id,
-            },
+            data: { name: subject.name, code: subject.code, sectionId: section.id },
           });
         }
       }
     }
   }
 
-  // Keep the existing ECE 2 Sem 7 / Section A demo data and its sheet links.
+  // Preserve the existing ECE 2 / Sem 7 / Section A demo SheetLinks.
   const demoClass = await prisma.class.findFirst({
     where: {
       departmentId: eceDepartment.id,
@@ -226,65 +191,37 @@ async function main() {
       semester: 7,
     },
   });
-
   const demoSection = demoClass
     ? await prisma.section.findFirst({ where: { classId: demoClass.id, name: "A" } })
     : null;
 
   if (demoSection) {
-    await prisma.section.update({
-      where: { id: demoSection.id },
-      data: { strength: 65 },
-    });
-
     const daSubject = await prisma.subject.findFirst({
       where: { sectionId: demoSection.id, code: "DA 338 T" },
     });
-
     if (daSubject) {
-      const assignment = await prisma.assignment.findFirst({
-        where: { teacherId: teacher.id, subjectId: daSubject.id },
+      await prisma.assignment.upsert({
+        where: { teacherId_subjectId: { teacherId: teacher.id, subjectId: daSubject.id } },
+        update: {},
+        create: { teacherId: teacher.id, subjectId: daSubject.id },
       });
-
-      if (!assignment) {
-        await prisma.assignment.create({
-          data: { teacherId: teacher.id, subjectId: daSubject.id },
-        });
-      }
-
-      const subjectSheet = await prisma.sheetLink.findFirst({
+      await prisma.sheetLink.upsert({
         where: { subjectId: daSubject.id },
+        update: {},
+        create: { subjectId: daSubject.id, sheetId: "118662A6Ifl2GDZKnh120v2jNylUiMWGNYThfRXSDX6U" },
       });
-
-      if (!subjectSheet) {
-        await prisma.sheetLink.create({
-          data: {
-            subjectId: daSubject.id,
-            sheetId: "118662A6Ifl2GDZKnh120v2jNylUiMWGNYThfRXSDX6U",
-          },
-        });
-      }
     }
-
-    const sectionSheet = await prisma.sheetLink.findFirst({
+    await prisma.sheetLink.upsert({
       where: { sectionId: demoSection.id },
+      update: {},
+      create: { sectionId: demoSection.id, sheetId: "1DM3brNxfdWl0I4r9cbffjh_PlXaWaTsM" },
     });
-
-    if (!sectionSheet) {
-      await prisma.sheetLink.create({
-        data: {
-          sectionId: demoSection.id,
-          sheetId: "1DM3brNxfdWl0I4r9cbffjh_PlXaWaTsM",
-        },
-      });
-    }
   }
 
   console.log("Seed complete.");
   console.log("Created/updated ECE 1, ECE 2 and ECE E for Semesters 1-7.");
-  console.log("Semester 8 intentionally has no subjects.");
-  console.log("Labs are intentionally excluded.");
-  console.log("Login as: geetanjali@demo.edu / changeme123");
+  console.log("Semester 8 intentionally has no subjects; labs are excluded.");
+  console.log("Login: geetanjali@demo.edu / changeme123");
   console.log("Admin: admin@demo.edu / changeme123");
 }
 
@@ -293,6 +230,4 @@ main()
     console.error(e);
     process.exit(1);
   })
-  .finally(async () => {
-    await prisma.$disconnect();
-  });
+  .finally(async () => prisma.$disconnect());

From a0c545f1a4e8c4b6b76c54a11c1e5c5800f11611 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sat, 29 Aug 2026 19:08:31 +0530
Subject: [PATCH 18/80] Add teacher-scoped subject analysis chooser

---
 pages/subject-analysis/index.tsx | 157 +++++++++++++++++++++++++++++++
 1 file changed, 157 insertions(+)
 create mode 100644 pages/subject-analysis/index.tsx

diff --git a/pages/subject-analysis/index.tsx b/pages/subject-analysis/index.tsx
new file mode 100644
index 0000000..76a2cbe
--- /dev/null
+++ b/pages/subject-analysis/index.tsx
@@ -0,0 +1,157 @@
+import { GetServerSideProps } from "next";
+import { getServerSession } from "next-auth/next";
+import { authOptions } from "../../lib/authOptions";
+import { prisma } from "../../lib/prisma";
+import Link from "next/link";
+import { BookOpen, ArrowLeft, ArrowRight, BarChart3 } from "lucide-react";
+
+interface SubjectOption {
+  id: string;
+  sectionId: string;
+  name: string;
+  code: string;
+}
+
+interface ClassOption {
+  id: string;
+  label: string;
+}
+
+interface Props {
+  teacherName: string;
+  classes: ClassOption[];
+  subjects: SubjectOption[];
+}
+
+export default function SubjectAnalysisChooser({ teacherName, classes, subjects }: Props) {
+  const firstClass = classes[0]?.id || "";
+  const [selectedClass, setSelectedClass] = require("react").useState(firstClass);
+  const selectedSubjects = subjects.filter((subject) => subject.sectionId === selectedClass);
+
+  return (
+    <div className="min-h-screen bg-[#fffdf8] text-[#17223b] lg:flex">
+      <aside className="hidden w-[220px] shrink-0 border-r border-[#e8e7e3] bg-white lg:flex lg:min-h-screen lg:flex-col lg:fixed lg:inset-y-0 lg:left-0">
+        <div className="px-5 pt-6">
+          <Link href="/dashboard" className="flex items-center gap-3">
+            <span className="grid h-10 w-10 place-items-center rounded-xl bg-[#39268f] text-white shadow-[0_10px_25px_rgba(57,38,143,0.2)]">
+              <BarChart3 size={21} strokeWidth={2.2} />
+            </span>
+            <span className="text-[20px] font-extrabold tracking-[-0.7px]">ClassPulse</span>
+          </Link>
+        </div>
+        <nav className="mt-8 space-y-1 px-3 text-sm font-medium text-[#626b80]">
+          <Link href="/dashboard" className="flex items-center gap-3 rounded-xl px-3 py-3 hover:bg-[#f6f4ff] hover:text-[#38258e]">
+            <BarChart3 size={18} /> Dashboard
+          </Link>
+          <Link href="/subject-analysis" className="flex items-center gap-3 rounded-xl bg-[#eeeaff] px-3 py-3 font-semibold text-[#38258e]">
+            <BookOpen size={18} /> Subject Analysis
+          </Link>
+        </nav>
+      </aside>
+
+      <main className="w-full lg:ml-[220px]">
+        <div className="mx-auto max-w-[1000px] px-5 py-8 sm:px-8 lg:px-12 lg:py-12">
+          <Link href="/dashboard" className="inline-flex items-center gap-2 text-sm font-semibold text-[#5b4ee6] hover:underline">
+            <ArrowLeft size={16} /> Back to Dashboard
+          </Link>
+
+          <div className="mt-8">
+            <p className="text-sm font-semibold text-[#5b4ee6]">Subject Analysis</p>
+            <h1 className="mt-2 text-[32px] font-extrabold tracking-[-1.2px]">Choose a class and subject</h1>
+            <p className="mt-2 max-w-[650px] text-sm leading-6 text-[#6f7890]">
+              Select a class you are assigned to, then choose one of your assigned subjects for that class.
+            </p>
+          </div>
+
+          <section className="mt-8 rounded-2xl border border-[#e5e4e1] bg-white p-6 shadow-[0_8px_25px_rgba(31,35,49,0.04)] sm:p-8">
+            <div>
+              <label htmlFor="class" className="block text-sm font-bold text-[#17223b]">Class</label>
+              <select
+                id="class"
+                value={selectedClass}
+                onChange={(event) => setSelectedClass(event.target.value)}
+                className="mt-2 w-full rounded-xl border border-[#dfe2e8] bg-white px-4 py-3 text-sm text-[#26314a] outline-none focus:border-[#6b5be7] focus:ring-2 focus:ring-[#6b5be7]/10"
+              >
+                {classes.map((item) => <option key={item.id} value={item.id}>{item.label}</option>)}
+              </select>
+            </div>
+
+            <div className="mt-7">
+              <div className="flex items-center justify-between gap-3">
+                <label className="block text-sm font-bold text-[#17223b]">Assigned Subjects</label>
+                <span className="text-xs text-[#8991a2]">{selectedSubjects.length} available</span>
+              </div>
+
+              {selectedSubjects.length === 0 ? (
+                <div className="mt-3 rounded-xl border border-dashed border-[#dfe2e8] bg-[#fafafa] p-5 text-sm text-[#747d91]">
+                  No subjects are assigned to you for this class.
+                </div>
+              ) : (
+                <div className="mt-3 grid gap-3 sm:grid-cols-2">
+                  {selectedSubjects.map((subject) => (
+                    <Link
+                      key={subject.id}
+                      href={`/subject-analysis/${subject.id}`}
+                      className="group flex items-center gap-4 rounded-xl border border-[#e5e4e1] bg-white p-4 transition hover:-translate-y-0.5 hover:border-[#d9d2ff] hover:shadow-[0_8px_24px_rgba(57,38,143,0.08)]"
+                    >
+                      <span className="grid h-11 w-11 shrink-0 place-items-center rounded-full bg-[#fff5e7] text-[#ee9412]">
+                        <BookOpen size={20} />
+                      </span>
+                      <span className="min-w-0 flex-1">
+                        <span className="block text-sm font-bold text-[#17223b]">{subject.name}</span>
+                        <span className="mt-1 block text-xs text-[#7a8295]">{subject.code}</span>
+                      </span>
+                      <ArrowRight size={18} className="text-[#626b80] transition group-hover:translate-x-1 group-hover:text-[#4b36a7]" />
+                    </Link>
+                  ))}
+                </div>
+              )}
+            </div>
+          </section>
+
+          <p className="mt-5 text-xs text-[#8991a2]">Signed in as {teacherName}. Only your assigned classes and subjects are shown.</p>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+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;
+
+  const subjectsRaw = await prisma.subject.findMany({
+    where: role === "ADMIN" ? {} : { assignments: { some: { teacherId: userId } } },
+    include: {
+      section: { include: { class: { include: { department: true } } } },
+    },
+    orderBy: [{ section: { class: { semester: "asc" } } }, { name: "asc" }],
+  });
+
+  const classMap = new Map<string, ClassOption>();
+  for (const subject of subjectsRaw) {
+    const sectionClass = subject.section.class;
+    classMap.set(sectionClass.id, {
+      id: subject.section.id,
+      label: `${sectionClass.department.name} — ${sectionClass.program}, Sem ${sectionClass.semester}, Section ${subject.section.name}`,
+    });
+  }
+
+  return {
+    props: {
+      teacherName: session.user.name || session.user.email,
+      classes: Array.from(classMap.values()),
+      subjects: subjectsRaw.map((subject) => ({
+        id: subject.id,
+        sectionId: subject.section.id,
+        name: subject.name,
+        code: subject.code,
+      })),
+    },
+  };
+};

From 404141965e90d3575d1c63b22a5a37304bedf20e Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sat, 29 Aug 2026 19:09:11 +0530
Subject: [PATCH 19/80] Fix subject analysis class scoping

---
 pages/subject-analysis/index.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/pages/subject-analysis/index.tsx b/pages/subject-analysis/index.tsx
index 76a2cbe..e25b1dc 100644
--- a/pages/subject-analysis/index.tsx
+++ b/pages/subject-analysis/index.tsx
@@ -3,6 +3,7 @@ import { getServerSession } from "next-auth/next";
 import { authOptions } from "../../lib/authOptions";
 import { prisma } from "../../lib/prisma";
 import Link from "next/link";
+import { useState } from "react";
 import { BookOpen, ArrowLeft, ArrowRight, BarChart3 } from "lucide-react";
 
 interface SubjectOption {
@@ -24,8 +25,7 @@ interface Props {
 }
 
 export default function SubjectAnalysisChooser({ teacherName, classes, subjects }: Props) {
-  const firstClass = classes[0]?.id || "";
-  const [selectedClass, setSelectedClass] = require("react").useState(firstClass);
+  const [selectedClass, setSelectedClass] = useState(classes[0]?.id || "");
   const selectedSubjects = subjects.filter((subject) => subject.sectionId === selectedClass);
 
   return (
@@ -135,10 +135,11 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
 
   const classMap = new Map<string, ClassOption>();
   for (const subject of subjectsRaw) {
-    const sectionClass = subject.section.class;
-    classMap.set(sectionClass.id, {
-      id: subject.section.id,
-      label: `${sectionClass.department.name} — ${sectionClass.program}, Sem ${sectionClass.semester}, Section ${subject.section.name}`,
+    const section = subject.section;
+    const sectionClass = section.class;
+    classMap.set(section.id, {
+      id: section.id,
+      label: `${sectionClass.department.name} — ${sectionClass.program}, Sem ${sectionClass.semester}, Section ${section.name}`,
     });
   }
 

From f14de4e55ddb1c9be4e574051007883147b255cb Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sat, 29 Aug 2026 19:09:58 +0530
Subject: [PATCH 20/80] Route dashboard Subject Analysis through teacher
 chooser

---
 pages/dashboard.tsx | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index 9904e84..2229489 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -11,7 +11,6 @@ import {
   BookOpen,
   CalendarDays,
   CheckCircle2,
-  ClipboardCheck,
   Clock3,
   Database,
   FileText,
@@ -184,12 +183,11 @@ export default function Dashboard({ teacherName, sections, subjects }: Props) {
             <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
               {quickActions.map((action) => {
                 const Icon = action.icon;
-                const isAnalysis = action.title === "Class Analysis" || action.title === "Subject Analysis";
-                const href = isAnalysis
-                  ? action.title === "Class Analysis"
-                    ? sections[0]?.id ? `/section-analysis/${sections[0].id}` : "/section-analysis"
-                    : subjects[0]?.id ? `/subject-analysis/${subjects[0].id}` : "/subject-analysis"
-                  : action.href;
+                const href = action.title === "Class Analysis"
+                  ? sections[0]?.id ? `/section-analysis/${sections[0].id}` : "/section-analysis"
+                  : action.title === "Subject Analysis"
+                    ? "/subject-analysis"
+                    : action.href;
 
                 return (
                   <Link key={action.title} href={href} className="group flex min-h-[116px] items-center gap-4 rounded-xl border border-[#e6e6e5] bg-white p-4 transition hover:-translate-y-0.5 hover:border-[#d9d2ff] hover:shadow-[0_8px_24px_rgba(57,38,143,0.08)]">
@@ -237,15 +235,14 @@ export default function Dashboard({ teacherName, sections, subjects }: Props) {
               <div className="flex items-center justify-between border-b border-[#eeeeeb] px-5 py-5 sm:px-6">
                 <div>
                   <h2 className="text-lg font-bold">Recent Activity</h2>
-                  <p className="mt-1 text-xs text-[#7b8498]">Your latest actions in ClassPulse.</p>
+                  <p className="mt-1 text-xs text-[#7b8498]">Your latest updates and actions.</p>
                 </div>
-                <button type="button" className="text-xs font-semibold text-[#5b4ee6]">View all activity <ArrowRight size={13} className="ml-1 inline" /></button>
               </div>
-              <div className="px-5 sm:px-6">
-                {recentActivity.map((activity) => {
+              <div className="divide-y divide-[#eeeeeb] px-5 sm:px-6">
+                {recentActivity.map((activity, index) => {
                   const Icon = activity.icon;
                   return (
-                    <div key={activity.text} className="flex items-center gap-3 border-b border-[#eeeeeb] py-4 last:border-0">
+                    <div key={`${activity.text}-${index}`} className="flex items-center gap-3 py-4">
                       <span className={`grid h-9 w-9 shrink-0 place-items-center rounded-full ${activity.tone}`}><Icon size={17} /></span>
                       <p className="min-w-0 flex-1 text-xs font-medium leading-5 text-[#3f485d]">{activity.text}</p>
                       <span className="shrink-0 text-[10px] font-medium text-[#8991a2]">{activity.time}</span>

From 30803abb42a1d1f779fe14212129a2eb80cd2af8 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sat, 29 Aug 2026 19:16:07 +0530
Subject: [PATCH 21/80] test assignment update

---
 prisma/seed.ts | 237 +------------------------------------------------
 1 file changed, 4 insertions(+), 233 deletions(-)

diff --git a/prisma/seed.ts b/prisma/seed.ts
index 5c75915..6e3cd99 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -1,233 +1,4 @@
-import { PrismaClient } from "@prisma/client";
-import bcrypt from "bcryptjs";
-
-type SubjectSeed = { name: string; code: string };
-
-const prisma = new PrismaClient();
-
-// Theory subjects supplied for the ECE curriculum. Labs are intentionally excluded.
-const subjectsBySemester: Record<number, SubjectSeed[]> = {
-  1: [
-    { name: "Environmental Studies", code: "SEM1-ENVIRONMENTAL-STUDIES" },
-    { name: "Engineering Graphics-I", code: "SEM1-ENGINEERING-GRAPHICS-I" },
-    { name: "Manufacturing Process", code: "SEM1-MANUFACTURING-PROCESS" },
-    { name: "Communications Skills", code: "SEM1-COMMUNICATIONS-SKILLS" },
-    { name: "Applied Mathematics-I", code: "SEM1-APPLIED-MATHEMATICS-I" },
-    { name: "Applied Physics-I", code: "SEM1-APPLIED-PHYSICS-I" },
-    { name: "Programming in C", code: "SEM1-PROGRAMMING-IN-C" },
-  ],
-  2: [
-    { name: "Applied Chemistry", code: "SEM2-APPLIED-CHEMISTRY" },
-    { name: "Applied Physics-II", code: "SEM2-APPLIED-PHYSICS-II" },
-    { name: "Electrical Science", code: "SEM2-ELECTRICAL-SCIENCE" },
-    { name: "Applied Mathematics-II", code: "SEM2-APPLIED-MATHEMATICS-II" },
-    { name: "Engineering Mechanics", code: "SEM2-ENGINEERING-MECHANICS" },
-    { name: "Indian Constitution", code: "SEM2-INDIAN-CONSTITUTION" },
-    { name: "Human Values and Ethics", code: "SEM2-HUMAN-VALUES-AND-ETHICS" },
-  ],
-  3: [
-    { name: "Computational Methods", code: "SEM3-COMPUTATIONAL-METHODS" },
-    { name: "Indian Knowledge System", code: "SEM3-INDIAN-KNOWLEDGE-SYSTEM" },
-    { name: "Signal and System", code: "SEM3-SIGNAL-AND-SYSTEM" },
-    { name: "Digital Logic and Computer Design", code: "SEM3-DIGITAL-LOGIC-AND-COMPUTER-DESIGN" },
-    { name: "Analog Communications", code: "SEM3-ANALOG-COMMUNICATIONS" },
-    { name: "Analog Electronics-I", code: "SEM3-ANALOG-ELECTRONICS-I" },
-  ],
-  4: [
-    { name: "Probability, Statistics and Linear Programming", code: "SEM4-PSLP" },
-    { name: "Technical Writing", code: "SEM4-TECHNICAL-WRITING" },
-    { name: "Network Analysis and Synthesis", code: "SEM4-NAS" },
-    { name: "Microprocessors and Microcontrollers", code: "SEM4-MICROPROCESSORS-AND-MICROCONTROLLERS" },
-    { name: "Digital Communications", code: "SEM4-DIGITAL-COMMUNICATIONS" },
-    { name: "Analog Electronics-II", code: "SEM4-ANALOG-ELECTRONICS-II" },
-    { name: "Electromagnetic Field Theory", code: "SEM4-EMFT" },
-  ],
-  5: [
-    { name: "Economics for Engineers", code: "SEM5-ECONOMICS-FOR-ENGINEERS" },
-    { name: "Digital Signal Processing", code: "SEM5-DSP" },
-    { name: "Microelectronics", code: "SEM5-MICROELECTRONICS" },
-    { name: "Introduction to Control Systems", code: "SEM5-INTRODUCTION-TO-CONTROL-SYSTEMS" },
-    { name: "Transmission Lines, Waveguides and Antenna Design", code: "SEM5-TLWAD" },
-    { name: "Data Communication and Networking", code: "SEM5-DCN" },
-  ],
-  6: [
-    { name: "PME", code: "MS-302" },
-    { name: "AI", code: "ECE 318 T" },
-    { name: "OCSN", code: "ECE 326 T" },
-    { name: "ML", code: "ECE 350 T" },
-    { name: "SSM&DA", code: "DA 304 T" },
-    { name: "DA", code: "DA 338 T" },
-  ],
-  7: [
-    { name: "MLDA", code: "MLDA" },
-    { name: "IOT", code: "IOT" },
-    { name: "PR", code: "PR" },
-    { name: "USL", code: "USL" },
-    { name: "SL", code: "SL" },
-    { name: "PE", code: "PE" },
-  ],
-};
-
-const eceBatches = ["ECE 1", "ECE 2", "ECE E"];
-
-function yearForSemester(semester: number) {
-  if (semester <= 2) return "1st Year";
-  if (semester <= 4) return "2nd Year";
-  if (semester <= 6) return "3rd Year";
-  return "4th Year";
-}
-
-async function main() {
-  const college = await prisma.college.upsert({
-    where: { id: "demo-college" },
-    update: { name: "Demo Institute of Technology" },
-    create: { id: "demo-college", name: "Demo Institute of Technology" },
-  });
-
-  const eceDepartment =
-    (await prisma.department.findFirst({ where: { collegeId: college.id, name: "ECE" } })) ??
-    (await prisma.department.create({ data: { name: "ECE", collegeId: college.id } }));
-
-  const passwordHash = await bcrypt.hash("changeme123", 10);
-
-  const teacher = await prisma.user.upsert({
-    where: { email: "geetanjali@demo.edu" },
-    update: { name: "Dr. Geetanjali", passwordHash, role: "TEACHER", collegeId: college.id },
-    create: {
-      name: "Dr. Geetanjali",
-      email: "geetanjali@demo.edu",
-      passwordHash,
-      role: "TEACHER",
-      collegeId: college.id,
-    },
-  });
-
-  await prisma.user.upsert({
-    where: { email: "admin@demo.edu" },
-    update: { name: "College Admin", passwordHash, role: "ADMIN", collegeId: college.id },
-    create: {
-      name: "College Admin",
-      email: "admin@demo.edu",
-      passwordHash,
-      role: "ADMIN",
-      collegeId: college.id,
-    },
-  });
-
-  // Create the three ECE batches for Semesters 1-7.
-  // Semester 8 intentionally has no regular subjects.
-  for (const batch of eceBatches) {
-    for (let semester = 1; semester <= 7; semester += 1) {
-      const program = `B.Tech ${batch}`;
-      const isLegacyEce2Sem7 = batch === "ECE 2" && semester === 7;
-
-      const cls =
-        (await prisma.class.findFirst({
-          where: {
-            departmentId: eceDepartment.id,
-            academicYear: "2026-27",
-            semester,
-            OR: [
-              { program },
-              ...(isLegacyEce2Sem7 ? [{ program: "B.Tech ECE" }] : []),
-            ],
-          },
-        })) ??
-        (await prisma.class.create({
-          data: {
-            departmentId: eceDepartment.id,
-            program,
-            academicYear: "2026-27",
-            year: yearForSemester(semester),
-            semester,
-            proctorId: semester === 7 && batch === "ECE 2" ? teacher.id : null,
-          },
-        }));
-
-      if (cls.program !== program || cls.year !== yearForSemester(semester)) {
-        await prisma.class.update({
-          where: { id: cls.id },
-          data: {
-            program,
-            year: yearForSemester(semester),
-            proctorId: semester === 7 && batch === "ECE 2" ? teacher.id : cls.proctorId,
-          },
-        });
-      }
-
-      const section =
-        (await prisma.section.findFirst({ where: { classId: cls.id, name: "A" } })) ??
-        (await prisma.section.create({
-          data: {
-            classId: cls.id,
-            name: "A",
-            strength: batch === "ECE 2" && semester === 7 ? 65 : 0,
-          },
-        }));
-
-      if (batch === "ECE 2" && semester === 7 && section.strength !== 65) {
-        await prisma.section.update({ where: { id: section.id }, data: { strength: 65 } });
-      }
-
-      for (const subject of subjectsBySemester[semester]) {
-        const existing = await prisma.subject.findFirst({
-          where: { sectionId: section.id, code: subject.code },
-        });
-        if (!existing) {
-          await prisma.subject.create({
-            data: { name: subject.name, code: subject.code, sectionId: section.id },
-          });
-        }
-      }
-    }
-  }
-
-  // Preserve the existing ECE 2 / Sem 7 / Section A demo SheetLinks.
-  const demoClass = await prisma.class.findFirst({
-    where: {
-      departmentId: eceDepartment.id,
-      program: "B.Tech ECE 2",
-      academicYear: "2026-27",
-      semester: 7,
-    },
-  });
-  const demoSection = demoClass
-    ? await prisma.section.findFirst({ where: { classId: demoClass.id, name: "A" } })
-    : null;
-
-  if (demoSection) {
-    const daSubject = await prisma.subject.findFirst({
-      where: { sectionId: demoSection.id, code: "DA 338 T" },
-    });
-    if (daSubject) {
-      await prisma.assignment.upsert({
-        where: { teacherId_subjectId: { teacherId: teacher.id, subjectId: daSubject.id } },
-        update: {},
-        create: { teacherId: teacher.id, subjectId: daSubject.id },
-      });
-      await prisma.sheetLink.upsert({
-        where: { subjectId: daSubject.id },
-        update: {},
-        create: { subjectId: daSubject.id, sheetId: "118662A6Ifl2GDZKnh120v2jNylUiMWGNYThfRXSDX6U" },
-      });
-    }
-    await prisma.sheetLink.upsert({
-      where: { sectionId: demoSection.id },
-      update: {},
-      create: { sectionId: demoSection.id, sheetId: "1DM3brNxfdWl0I4r9cbffjh_PlXaWaTsM" },
-    });
-  }
-
-  console.log("Seed complete.");
-  console.log("Created/updated ECE 1, ECE 2 and ECE E for Semesters 1-7.");
-  console.log("Semester 8 intentionally has no subjects; labs are excluded.");
-  console.log("Login: geetanjali@demo.edu / changeme123");
-  console.log("Admin: admin@demo.edu / changeme123");
-}
-
-main()
-  .catch((e) => {
-    console.error(e);
-    process.exit(1);
-  })
-  .finally(async () => prisma.$disconnect());
+// ASSIGNMENTS
+// Dr. Geetanjali is assigned to six ECE classes from Semesters 1, 3, 5 and 7.
+// Selected classes: ECE 1 Sem 1, ECE E Sem 1, ECE 2 Sem 3,
+// ECE 1 Sem 5, ECE E Sem 5, ECE 2 Sem 7.

From 80ae7f451be4f1d628b86b5fc43811bdb1cd02e2 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sat, 29 Aug 2026 19:16:43 +0530
Subject: [PATCH 22/80] Assign Geetanjali to six ECE classes

---
 prisma/seed.ts | 275 ++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 271 insertions(+), 4 deletions(-)

diff --git a/prisma/seed.ts b/prisma/seed.ts
index 6e3cd99..b4dd1c1 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -1,4 +1,271 @@
-// ASSIGNMENTS
-// Dr. Geetanjali is assigned to six ECE classes from Semesters 1, 3, 5 and 7.
-// Selected classes: ECE 1 Sem 1, ECE E Sem 1, ECE 2 Sem 3,
-// ECE 1 Sem 5, ECE E Sem 5, ECE 2 Sem 7.
+import { PrismaClient } from "@prisma/client";
+import bcrypt from "bcryptjs";
+
+type SubjectSeed = { name: string; code: string };
+
+const prisma = new PrismaClient();
+
+const subjectsBySemester: Record<number, SubjectSeed[]> = {
+  1: [
+    { name: "Environmental Studies", code: "SEM1-ENVIRONMENTAL-STUDIES" },
+    { name: "Engineering Graphics-I", code: "SEM1-ENGINEERING-GRAPHICS-I" },
+    { name: "Manufacturing Process", code: "SEM1-MANUFACTURING-PROCESS" },
+    { name: "Communications Skills", code: "SEM1-COMMUNICATIONS-SKILLS" },
+    { name: "Applied Mathematics-I", code: "SEM1-APPLIED-MATHEMATICS-I" },
+    { name: "Applied Physics-I", code: "SEM1-APPLIED-PHYSICS-I" },
+    { name: "Programming in C", code: "SEM1-PROGRAMMING-IN-C" },
+  ],
+  2: [
+    { name: "Applied Chemistry", code: "SEM2-APPLIED-CHEMISTRY" },
+    { name: "Applied Physics-II", code: "SEM2-APPLIED-PHYSICS-II" },
+    { name: "Electrical Science", code: "SEM2-ELECTRICAL-SCIENCE" },
+    { name: "Applied Mathematics-II", code: "SEM2-APPLIED-MATHEMATICS-II" },
+    { name: "Engineering Mechanics", code: "SEM2-ENGINEERING-MECHANICS" },
+    { name: "Indian Constitution", code: "SEM2-INDIAN-CONSTITUTION" },
+    { name: "Human Values and Ethics", code: "SEM2-HUMAN-VALUES-AND-ETHICS" },
+  ],
+  3: [
+    { name: "Computational Methods", code: "SEM3-COMPUTATIONAL-METHODS" },
+    { name: "Indian Knowledge System", code: "SEM3-INDIAN-KNOWLEDGE-SYSTEM" },
+    { name: "Signal and System", code: "SEM3-SIGNAL-AND-SYSTEM" },
+    { name: "Digital Logic and Computer Design", code: "SEM3-DIGITAL-LOGIC-AND-COMPUTER-DESIGN" },
+    { name: "Analog Communications", code: "SEM3-ANALOG-COMMUNICATIONS" },
+    { name: "Analog Electronics-I", code: "SEM3-ANALOG-ELECTRONICS-I" },
+  ],
+  4: [
+    { name: "Probability, Statistics and Linear Programming", code: "SEM4-PSLP" },
+    { name: "Technical Writing", code: "SEM4-TECHNICAL-WRITING" },
+    { name: "Network Analysis and Synthesis", code: "SEM4-NAS" },
+    { name: "Microprocessors and Microcontrollers", code: "SEM4-MICROPROCESSORS-AND-MICROCONTROLLERS" },
+    { name: "Digital Communications", code: "SEM4-DIGITAL-COMMUNICATIONS" },
+    { name: "Analog Electronics-II", code: "SEM4-ANALOG-ELECTRONICS-II" },
+    { name: "Electromagnetic Field Theory", code: "SEM4-EMFT" },
+  ],
+  5: [
+    { name: "Economics for Engineers", code: "SEM5-ECONOMICS-FOR-ENGINEERS" },
+    { name: "Digital Signal Processing", code: "SEM5-DSP" },
+    { name: "Microelectronics", code: "SEM5-MICROELECTRONICS" },
+    { name: "Introduction to Control Systems", code: "SEM5-INTRODUCTION-TO-CONTROL-SYSTEMS" },
+    { name: "Transmission Lines, Waveguides and Antenna Design", code: "SEM5-TLWAD" },
+    { name: "Data Communication and Networking", code: "SEM5-DCN" },
+  ],
+  6: [
+    { name: "PME", code: "MS-302" },
+    { name: "AI", code: "ECE 318 T" },
+    { name: "OCSN", code: "ECE 326 T" },
+    { name: "ML", code: "ECE 350 T" },
+    { name: "SSM&DA", code: "DA 304 T" },
+    { name: "DA", code: "DA 338 T" },
+  ],
+  7: [
+    { name: "MLDA", code: "MLDA" },
+    { name: "IOT", code: "IOT" },
+    { name: "PR", code: "PR" },
+    { name: "USL", code: "USL" },
+    { name: "SL", code: "SL" },
+    { name: "PE", code: "PE" },
+  ],
+};
+
+const eceBatches = ["ECE 1", "ECE 2", "ECE E"];
+
+function yearForSemester(semester: number) {
+  if (semester <= 2) return "1st Year";
+  if (semester <= 4) return "2nd Year";
+  if (semester <= 6) return "3rd Year";
+  return "4th Year";
+}
+
+async function main() {
+  const college = await prisma.college.upsert({
+    where: { id: "demo-college" },
+    update: { name: "Demo Institute of Technology" },
+    create: { id: "demo-college", name: "Demo Institute of Technology" },
+  });
+
+  const eceDepartment =
+    (await prisma.department.findFirst({ where: { collegeId: college.id, name: "ECE" } })) ??
+    (await prisma.department.create({ data: { name: "ECE", collegeId: college.id } }));
+
+  const passwordHash = await bcrypt.hash("changeme123", 10);
+
+  const teacher = await prisma.user.upsert({
+    where: { email: "geetanjali@demo.edu" },
+    update: { name: "Dr. Geetanjali", passwordHash, role: "TEACHER", collegeId: college.id },
+    create: {
+      name: "Dr. Geetanjali",
+      email: "geetanjali@demo.edu",
+      passwordHash,
+      role: "TEACHER",
+      collegeId: college.id,
+    },
+  });
+
+  await prisma.user.upsert({
+    where: { email: "admin@demo.edu" },
+    update: { name: "College Admin", passwordHash, role: "ADMIN", collegeId: college.id },
+    create: {
+      name: "College Admin",
+      email: "admin@demo.edu",
+      passwordHash,
+      role: "ADMIN",
+      collegeId: college.id,
+    },
+  });
+
+  for (const batch of eceBatches) {
+    for (let semester = 1; semester <= 7; semester += 1) {
+      const program = `B.Tech ${batch}`;
+      const isLegacyEce2Sem7 = batch === "ECE 2" && semester === 7;
+
+      const cls =
+        (await prisma.class.findFirst({
+          where: {
+            departmentId: eceDepartment.id,
+            academicYear: "2026-27",
+            semester,
+            OR: [
+              { program },
+              ...(isLegacyEce2Sem7 ? [{ program: "B.Tech ECE" }] : []),
+            ],
+          },
+        })) ??
+        (await prisma.class.create({
+          data: {
+            departmentId: eceDepartment.id,
+            program,
+            academicYear: "2026-27",
+            year: yearForSemester(semester),
+            semester,
+            proctorId: semester === 7 && batch === "ECE 2" ? teacher.id : null,
+          },
+        }));
+
+      if (cls.program !== program || cls.year !== yearForSemester(semester)) {
+        await prisma.class.update({
+          where: { id: cls.id },
+          data: {
+            program,
+            year: yearForSemester(semester),
+            proctorId: semester === 7 && batch === "ECE 2" ? teacher.id : cls.proctorId,
+          },
+        });
+      }
+
+      const section =
+        (await prisma.section.findFirst({ where: { classId: cls.id, name: "A" } })) ??
+        (await prisma.section.create({
+          data: {
+            classId: cls.id,
+            name: "A",
+            strength: batch === "ECE 2" && semester === 7 ? 65 : 0,
+          },
+        }));
+
+      if (batch === "ECE 2" && semester === 7 && section.strength !== 65) {
+        await prisma.section.update({ where: { id: section.id }, data: { strength: 65 } });
+      }
+
+      for (const subject of subjectsBySemester[semester]) {
+        const existing = await prisma.subject.findFirst({
+          where: { sectionId: section.id, code: subject.code },
+        });
+        if (!existing) {
+          await prisma.subject.create({
+            data: { name: subject.name, code: subject.code, sectionId: section.id },
+          });
+        }
+      }
+    }
+  }
+
+  // Dr. Geetanjali gets exactly six classes from Semesters 1, 3, 5 and 7.
+  // One subject is assigned in each selected class for the class/subject selector.
+  const teacherClassAssignments = [
+    { batch: "ECE 1", semester: 1, subjectIndex: 0 },
+    { batch: "ECE E", semester: 1, subjectIndex: 4 },
+    { batch: "ECE 2", semester: 3, subjectIndex: 3 },
+    { batch: "ECE 1", semester: 5, subjectIndex: 1 },
+    { batch: "ECE E", semester: 5, subjectIndex: 4 },
+    { batch: "ECE 2", semester: 7, subjectIndex: 5 },
+  ];
+
+  for (const item of teacherClassAssignments) {
+    const cls = await prisma.class.findFirst({
+      where: {
+        departmentId: eceDepartment.id,
+        program: `B.Tech ${item.batch}`,
+        academicYear: "2026-27",
+        semester: item.semester,
+      },
+    });
+    if (!cls) continue;
+
+    const section = await prisma.section.findFirst({
+      where: { classId: cls.id, name: "A" },
+    });
+    const subjectSeed = subjectsBySemester[item.semester][item.subjectIndex];
+    if (!section || !subjectSeed) continue;
+
+    const subject = await prisma.subject.findFirst({
+      where: { sectionId: section.id, code: subjectSeed.code },
+    });
+    if (!subject) continue;
+
+    await prisma.assignment.upsert({
+      where: { teacherId_subjectId: { teacherId: teacher.id, subjectId: subject.id } },
+      update: {},
+      create: { teacherId: teacher.id, subjectId: subject.id },
+    });
+  }
+
+  // Preserve the existing ECE 2 / Sem 7 / Section A demo SheetLinks.
+  const demoClass = await prisma.class.findFirst({
+    where: {
+      departmentId: eceDepartment.id,
+      program: "B.Tech ECE 2",
+      academicYear: "2026-27",
+      semester: 7,
+    },
+  });
+  const demoSection = demoClass
+    ? await prisma.section.findFirst({ where: { classId: demoClass.id, name: "A" } })
+    : null;
+
+  if (demoSection) {
+    const daSubject = await prisma.subject.findFirst({
+      where: { sectionId: demoSection.id, code: "DA 338 T" },
+    });
+    if (daSubject) {
+      await prisma.assignment.upsert({
+        where: { teacherId_subjectId: { teacherId: teacher.id, subjectId: daSubject.id } },
+        update: {},
+        create: { teacherId: teacher.id, subjectId: daSubject.id },
+      });
+      await prisma.sheetLink.upsert({
+        where: { subjectId: daSubject.id },
+        update: {},
+        create: { subjectId: daSubject.id, sheetId: "118662A6Ifl2GDZKnh120v2jNylUiMWGNYThfRXSDX6U" },
+      });
+    }
+    await prisma.sheetLink.upsert({
+      where: { sectionId: demoSection.id },
+      update: {},
+      create: { sectionId: demoSection.id, sheetId: "1DM3brNxfdWl0I4r9cbffjh_PlXaWaTsM" },
+    });
+  }
+
+  console.log("Seed complete.");
+  console.log("Created/updated ECE 1, ECE 2 and ECE E for Semesters 1-7.");
+  console.log("Assigned Dr. Geetanjali to 6 classes from Semesters 1, 3, 5 and 7.");
+  console.log("Semester 8 intentionally has no subjects; labs are excluded.");
+  console.log("Login: geetanjali@demo.edu / changeme123");
+  console.log("Admin: admin@demo.edu / changeme123");
+}
+
+main()
+  .catch((e) => {
+    console.error(e);
+    process.exit(1);
+  })
+  .finally(async () => prisma.$disconnect());

From a80706130e5436679600712e6c39d3ad2dd9cc77 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sat, 29 Aug 2026 20:04:43 +0530
Subject: [PATCH 23/80] Add theory and lab subject types

---
 prisma/schema.prisma | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 9959b4c..47ca37c 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -12,6 +12,11 @@ enum Role {
   TEACHER
 }
 
+enum SubjectType {
+  THEORY
+  LAB
+}
+
 model College {
   id          String       @id @default(cuid())
   name        String
@@ -89,6 +94,7 @@ model Subject {
   id           String       @id @default(cuid())
   name         String
   code         String
+  type         SubjectType  @default(THEORY)
   section      Section      @relation(fields: [sectionId], references: [id])
   sectionId    String
   sheetLink    SheetLink?

From e43dbccbba8857b6f44fa54743788393b9e986f1 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sat, 29 Aug 2026 20:05:49 +0530
Subject: [PATCH 24/80] Seed ECE faculty and theory/lab subjects

---
 prisma/seed.ts | 241 ++++++++++++++++++++++++++++++++++---------------
 1 file changed, 168 insertions(+), 73 deletions(-)

diff --git a/prisma/seed.ts b/prisma/seed.ts
index b4dd1c1..c60d988 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -1,72 +1,141 @@
 import { PrismaClient } from "@prisma/client";
 import bcrypt from "bcryptjs";
 
-type SubjectSeed = { name: string; code: string };
+type SubjectSeed = {
+  name: string;
+  code: string;
+  type: "THEORY" | "LAB";
+};
 
 const prisma = new PrismaClient();
 
 const subjectsBySemester: Record<number, SubjectSeed[]> = {
   1: [
-    { name: "Environmental Studies", code: "SEM1-ENVIRONMENTAL-STUDIES" },
-    { name: "Engineering Graphics-I", code: "SEM1-ENGINEERING-GRAPHICS-I" },
-    { name: "Manufacturing Process", code: "SEM1-MANUFACTURING-PROCESS" },
-    { name: "Communications Skills", code: "SEM1-COMMUNICATIONS-SKILLS" },
-    { name: "Applied Mathematics-I", code: "SEM1-APPLIED-MATHEMATICS-I" },
-    { name: "Applied Physics-I", code: "SEM1-APPLIED-PHYSICS-I" },
-    { name: "Programming in C", code: "SEM1-PROGRAMMING-IN-C" },
+    { name: "Environmental Studies", code: "SEM1-ENVIRONMENTAL-STUDIES", type: "THEORY" },
+    { name: "Engineering Graphics-I", code: "SEM1-ENGINEERING-GRAPHICS-I", type: "THEORY" },
+    { name: "Manufacturing Process", code: "SEM1-MANUFACTURING-PROCESS", type: "THEORY" },
+    { name: "Communications Skills", code: "SEM1-COMMUNICATIONS-SKILLS", type: "THEORY" },
+    { name: "Applied Mathematics-I", code: "SEM1-APPLIED-MATHEMATICS-I", type: "THEORY" },
+    { name: "Applied Physics-I", code: "SEM1-APPLIED-PHYSICS-I", type: "THEORY" },
+    { name: "Programming in C", code: "SEM1-PROGRAMMING-IN-C", type: "THEORY" },
+    { name: "Environmental Studies Lab", code: "SEM1-ENVIRONMENTAL-STUDIES-LAB", type: "LAB" },
+    { name: "Programming in C Lab", code: "SEM1-PROGRAMMING-IN-C-LAB", type: "LAB" },
+    { name: "Physics-I Lab", code: "SEM1-PHYSICS-I-LAB", type: "LAB" },
   ],
   2: [
-    { name: "Applied Chemistry", code: "SEM2-APPLIED-CHEMISTRY" },
-    { name: "Applied Physics-II", code: "SEM2-APPLIED-PHYSICS-II" },
-    { name: "Electrical Science", code: "SEM2-ELECTRICAL-SCIENCE" },
-    { name: "Applied Mathematics-II", code: "SEM2-APPLIED-MATHEMATICS-II" },
-    { name: "Engineering Mechanics", code: "SEM2-ENGINEERING-MECHANICS" },
-    { name: "Indian Constitution", code: "SEM2-INDIAN-CONSTITUTION" },
-    { name: "Human Values and Ethics", code: "SEM2-HUMAN-VALUES-AND-ETHICS" },
+    { name: "Applied Chemistry", code: "SEM2-APPLIED-CHEMISTRY", type: "THEORY" },
+    { name: "Applied Physics-II", code: "SEM2-APPLIED-PHYSICS-II", type: "THEORY" },
+    { name: "Electrical Science", code: "SEM2-ELECTRICAL-SCIENCE", type: "THEORY" },
+    { name: "Applied Mathematics-II", code: "SEM2-APPLIED-MATHEMATICS-II", type: "THEORY" },
+    { name: "Engineering Mechanics", code: "SEM2-ENGINEERING-MECHANICS", type: "THEORY" },
+    { name: "Indian Constitution", code: "SEM2-INDIAN-CONSTITUTION", type: "THEORY" },
+    { name: "Human Values and Ethics", code: "SEM2-HUMAN-VALUES-AND-ETHICS", type: "THEORY" },
+    { name: "Physics-III Lab", code: "SEM2-PHYSICS-III-LAB", type: "LAB" },
+    { name: "Applied Chemistry Lab", code: "SEM2-APPLIED-CHEMISTRY-LAB", type: "LAB" },
+    { name: "Engineering Graphics-II", code: "SEM2-ENGINEERING-GRAPHICS-II", type: "LAB" },
+    { name: "Electrical Science Lab", code: "SEM2-ELECTRICAL-SCIENCE-LAB", type: "LAB" },
+    { name: "Workshop Practice", code: "SEM2-WORKSHOP-PRACTICE", type: "LAB" },
   ],
   3: [
-    { name: "Computational Methods", code: "SEM3-COMPUTATIONAL-METHODS" },
-    { name: "Indian Knowledge System", code: "SEM3-INDIAN-KNOWLEDGE-SYSTEM" },
-    { name: "Signal and System", code: "SEM3-SIGNAL-AND-SYSTEM" },
-    { name: "Digital Logic and Computer Design", code: "SEM3-DIGITAL-LOGIC-AND-COMPUTER-DESIGN" },
-    { name: "Analog Communications", code: "SEM3-ANALOG-COMMUNICATIONS" },
-    { name: "Analog Electronics-I", code: "SEM3-ANALOG-ELECTRONICS-I" },
+    { name: "Computational Methods", code: "SEM3-COMPUTATIONAL-METHODS", type: "THEORY" },
+    { name: "Indian Knowledge System", code: "SEM3-INDIAN-KNOWLEDGE-SYSTEM", type: "THEORY" },
+    { name: "Signal and System", code: "SEM3-SIGNAL-AND-SYSTEM", type: "THEORY" },
+    { name: "Digital Logic and Computer Design", code: "SEM3-DIGITAL-LOGIC-AND-COMPUTER-DESIGN", type: "THEORY" },
+    { name: "Analog Communications", code: "SEM3-ANALOG-COMMUNICATIONS", type: "THEORY" },
+    { name: "Analog Electronics-I", code: "SEM3-ANALOG-ELECTRONICS-I", type: "THEORY" },
+    { name: "Computational Methods Lab", code: "SEM3-COMPUTATIONAL-METHODS-LAB", type: "LAB" },
+    { name: "Digital Logic and Computer Design Lab", code: "SEM3-DIGITAL-LOGIC-AND-COMPUTER-DESIGN-LAB", type: "LAB" },
+    { name: "Analog Communications Lab", code: "SEM3-ANALOG-COMMUNICATIONS-LAB", type: "LAB" },
+    { name: "Analog Electronics-I Lab", code: "SEM3-ANALOG-ELECTRONICS-I-LAB", type: "LAB" },
+    { name: "Signal and System Lab", code: "SEM3-SIGNAL-AND-SYSTEM-LAB", type: "LAB" },
   ],
   4: [
-    { name: "Probability, Statistics and Linear Programming", code: "SEM4-PSLP" },
-    { name: "Technical Writing", code: "SEM4-TECHNICAL-WRITING" },
-    { name: "Network Analysis and Synthesis", code: "SEM4-NAS" },
-    { name: "Microprocessors and Microcontrollers", code: "SEM4-MICROPROCESSORS-AND-MICROCONTROLLERS" },
-    { name: "Digital Communications", code: "SEM4-DIGITAL-COMMUNICATIONS" },
-    { name: "Analog Electronics-II", code: "SEM4-ANALOG-ELECTRONICS-II" },
-    { name: "Electromagnetic Field Theory", code: "SEM4-EMFT" },
+    { name: "Probability, Statistics and Linear Programming", code: "SEM4-PSLP", type: "THEORY" },
+    { name: "Technical Writing", code: "SEM4-TECHNICAL-WRITING", type: "THEORY" },
+    { name: "Network Analysis and Synthesis", code: "SEM4-NAS", type: "THEORY" },
+    { name: "Microprocessors and Microcontrollers", code: "SEM4-MICROPROCESSORS-AND-MICROCONTROLLERS", type: "THEORY" },
+    { name: "Digital Communications", code: "SEM4-DIGITAL-COMMUNICATIONS", type: "THEORY" },
+    { name: "Analog Electronics-II", code: "SEM4-ANALOG-ELECTRONICS-II", type: "THEORY" },
+    { name: "Electromagnetic Field Theory", code: "SEM4-EMFT", type: "THEORY" },
+    { name: "Probability, Statistics and Linear Programming Lab", code: "SEM4-PSLP-LAB", type: "LAB" },
+    { name: "Microprocessors and Microcontrollers Lab", code: "SEM4-MPMC-LAB", type: "LAB" },
+    { name: "Digital Communications Lab", code: "SEM4-DIGITAL-COMMUNICATIONS-LAB", type: "LAB" },
+    { name: "Analog Electronics-II Lab", code: "SEM4-ANALOG-ELECTRONICS-II-LAB", type: "LAB" },
+    { name: "Network Analysis and Synthesis Lab", code: "SEM4-NAS-LAB", type: "LAB" },
   ],
   5: [
-    { name: "Economics for Engineers", code: "SEM5-ECONOMICS-FOR-ENGINEERS" },
-    { name: "Digital Signal Processing", code: "SEM5-DSP" },
-    { name: "Microelectronics", code: "SEM5-MICROELECTRONICS" },
-    { name: "Introduction to Control Systems", code: "SEM5-INTRODUCTION-TO-CONTROL-SYSTEMS" },
-    { name: "Transmission Lines, Waveguides and Antenna Design", code: "SEM5-TLWAD" },
-    { name: "Data Communication and Networking", code: "SEM5-DCN" },
+    { name: "Economics for Engineers", code: "SEM5-ECONOMICS-FOR-ENGINEERS", type: "THEORY" },
+    { name: "Digital Signal Processing", code: "SEM5-DSP", type: "THEORY" },
+    { name: "Microelectronics", code: "SEM5-MICROELECTRONICS", type: "THEORY" },
+    { name: "Introduction to Control Systems", code: "SEM5-INTRODUCTION-TO-CONTROL-SYSTEMS", type: "THEORY" },
+    { name: "Transmission Lines, Waveguides and Antenna Design", code: "SEM5-TLWAD", type: "THEORY" },
+    { name: "Data Communication and Networking", code: "SEM5-DCN", type: "THEORY" },
+    { name: "Digital Signal Processing Lab", code: "SEM5-DSP-LAB", type: "LAB" },
+    { name: "Microelectronics Lab", code: "SEM5-MICROELECTRONICS-LAB", type: "LAB" },
+    { name: "Introduction to Control Systems Lab", code: "SEM5-INTRODUCTION-TO-CONTROL-SYSTEMS-LAB", type: "LAB" },
+    { name: "Transmission Lines, Waveguides and Antenna Design Lab", code: "SEM5-TLWAD-LAB", type: "LAB" },
+    { name: "Data Communication and Networking Lab", code: "SEM5-DCN-LAB", type: "LAB" },
   ],
   6: [
-    { name: "PME", code: "MS-302" },
-    { name: "AI", code: "ECE 318 T" },
-    { name: "OCSN", code: "ECE 326 T" },
-    { name: "ML", code: "ECE 350 T" },
-    { name: "SSM&DA", code: "DA 304 T" },
-    { name: "DA", code: "DA 338 T" },
+    { name: "Principles of Management for Engineers", code: "SEM6-PME", type: "THEORY" },
+    { name: "Universal Human Values", code: "SEM6-UHV", type: "THEORY" },
+    { name: "Statistics, Statistical Modelling & Data Analytics", code: "DA 304 T", type: "THEORY" },
+    { name: "Artificial Intelligence", code: "ECE 318 T", type: "THEORY" },
+    { name: "Optical Communication Systems and Network", code: "ECE 326 T", type: "THEORY" },
+    { name: "Data Analytics", code: "DA 338 T", type: "THEORY" },
+    { name: "Machine Learning", code: "ECE 350 T", type: "THEORY" },
+    { name: "Statistics, Statistical Modelling & Data Analytics Lab", code: "DA 304 P", type: "LAB" },
+    { name: "Artificial Intelligence Lab", code: "ECE 318 P", type: "LAB" },
+    { name: "Optical Communication Systems and Networks Lab", code: "ECE 326 P", type: "LAB" },
+    { name: "Data Analytics Lab", code: "DA 338 P", type: "LAB" },
+    { name: "Machine Learning Lab", code: "ECE 350 P", type: "LAB" },
   ],
   7: [
-    { name: "MLDA", code: "MLDA" },
-    { name: "IOT", code: "IOT" },
-    { name: "PR", code: "PR" },
-    { name: "USL", code: "USL" },
-    { name: "SL", code: "SL" },
-    { name: "PE", code: "PE" },
+    { name: "Machine Learning and Data Analytics Frameworks", code: "MLDA", type: "THEORY" },
+    { name: "Internet of Things", code: "IOT", type: "THEORY" },
+    { name: "Pattern Recognition", code: "PR", type: "THEORY" },
+    { name: "Principles of Entrepreneurship", code: "PE", type: "THEORY" },
+    { name: "Unsupervised Learning", code: "USL", type: "THEORY" },
+    { name: "Supervised and Deep Learning", code: "SL", type: "THEORY" },
+    { name: "Unsupervised Learning Lab", code: "USL-LAB", type: "LAB" },
+    { name: "Supervised and Deep Learning Lab", code: "SL-LAB", type: "LAB" },
+    { name: "Machine Learning and Data Analytics Frameworks Lab", code: "MLDA-LAB", type: "LAB" },
+    { name: "Internet of Things Lab", code: "IOT-LAB", type: "LAB" },
+    { name: "Pattern Recognition Lab", code: "PR-LAB", type: "LAB" },
   ],
 };
 
+const teacherSeeds = [
+  { name: "Dr. Sudesh Pahal", email: "sudesh.pahal@demo.edu" },
+  { name: "Dr. Archana Balyan", email: "archana.balyan@demo.edu" },
+  { name: "Dr. Pardeep Sangwan", email: "pardeep.sangwan@demo.edu" },
+  { name: "Dr. Puneet Azad", email: "puneet.azad@demo.edu" },
+  { name: "Dr. Neeru Rathi", email: "neeru.rathi@demo.edu" },
+  { name: "Dr. Meena Rao", email: "meena.rao@demo.edu" },
+  { name: "Dr. Shafali Madan Arora", email: "shafali.arora@demo.edu" },
+  { name: "Dr. Richa Gupta", email: "richa.gupta@demo.edu" },
+  { name: "Dr. Aman Kumari Dahiya", email: "aman.dahiya@demo.edu" },
+  { name: "Dr. Dinesh Sheoran", email: "dinesh.sheoran@demo.edu" },
+  { name: "Mr. Deepak Goyal", email: "deepak.goyal@demo.edu" },
+  { name: "Dr. Deepti Deshwal", email: "deepti.deshwal@demo.edu" },
+  { name: "Ms. Neelam Nehra", email: "neelam.nehra@demo.edu" },
+  { name: "Dr. Geetanjali Sharma", email: "geetanjali@demo.edu" },
+  { name: "Dr. Sakshi Rajput", email: "sakshi.rajput@demo.edu" },
+  { name: "Dr. Nishtha", email: "nishtha@demo.edu" },
+  { name: "Dr. Neetu", email: "neetu@demo.edu" },
+  { name: "Dr. Upma Singh", email: "upma.singh@demo.edu" },
+  { name: "Ms. Jasmine Chhikara", email: "jasmine.chhikara@demo.edu" },
+  { name: "Ms. Prinkle Talan", email: "prinkle.talan@demo.edu" },
+  { name: "Ms. Garima", email: "garima@demo.edu" },
+  { name: "Ms. Vishakha Tomar", email: "vishakha.tomar@demo.edu" },
+  { name: "Dr. Suman Lata", email: "suman.lata@demo.edu" },
+  { name: "Ms. Anjali Balyan", email: "anjali.balyan@demo.edu" },
+  { name: "Dr. Neelam Barak", email: "neelam.barak@demo.edu" },
+  { name: "Ms. Himani", email: "himani@demo.edu" },
+  { name: "Ms. Sonia", email: "sonia@demo.edu" },
+  { name: "Ms. Neha", email: "neha@demo.edu" },
+];
+
 const eceBatches = ["ECE 1", "ECE 2", "ECE E"];
 
 function yearForSemester(semester: number) {
@@ -89,17 +158,27 @@ async function main() {
 
   const passwordHash = await bcrypt.hash("changeme123", 10);
 
-  const teacher = await prisma.user.upsert({
-    where: { email: "geetanjali@demo.edu" },
-    update: { name: "Dr. Geetanjali", passwordHash, role: "TEACHER", collegeId: college.id },
-    create: {
-      name: "Dr. Geetanjali",
-      email: "geetanjali@demo.edu",
-      passwordHash,
-      role: "TEACHER",
-      collegeId: college.id,
-    },
-  });
+  const teachers = new Map<string, { id: string; name: string }>();
+  for (const teacherSeed of teacherSeeds) {
+    const teacher = await prisma.user.upsert({
+      where: { email: teacherSeed.email },
+      update: {
+        name: teacherSeed.name,
+        passwordHash,
+        role: "TEACHER",
+        collegeId: college.id,
+      },
+      create: {
+        name: teacherSeed.name,
+        email: teacherSeed.email,
+        passwordHash,
+        role: "TEACHER",
+        collegeId: college.id,
+      },
+      select: { id: true, name: true },
+    });
+    teachers.set(teacher.name, teacher);
+  }
 
   await prisma.user.upsert({
     where: { email: "admin@demo.edu" },
@@ -137,7 +216,10 @@ async function main() {
             academicYear: "2026-27",
             year: yearForSemester(semester),
             semester,
-            proctorId: semester === 7 && batch === "ECE 2" ? teacher.id : null,
+            proctorId:
+              semester === 7 && batch === "ECE 2"
+                ? teachers.get("Dr. Geetanjali Sharma")?.id ?? null
+                : null,
           },
         }));
 
@@ -147,7 +229,10 @@ async function main() {
           data: {
             program,
             year: yearForSemester(semester),
-            proctorId: semester === 7 && batch === "ECE 2" ? teacher.id : cls.proctorId,
+            proctorId:
+              semester === 7 && batch === "ECE 2"
+                ? teachers.get("Dr. Geetanjali Sharma")?.id ?? cls.proctorId
+                : cls.proctorId,
           },
         });
       }
@@ -167,18 +252,23 @@ async function main() {
       }
 
       for (const subject of subjectsBySemester[semester]) {
-        const existing = await prisma.subject.findFirst({
-          where: { sectionId: section.id, code: subject.code },
+        await prisma.subject.upsert({
+          where: { sectionId_code: { sectionId: section.id, code: subject.code } },
+          update: { name: subject.name, type: subject.type },
+          create: {
+            name: subject.name,
+            code: subject.code,
+            type: subject.type,
+            sectionId: section.id,
+          },
         });
-        if (!existing) {
-          await prisma.subject.create({
-            data: { name: subject.name, code: subject.code, sectionId: section.id },
-          });
-        }
       }
     }
   }
 
+  const geetanjali = teachers.get("Dr. Geetanjali Sharma");
+  if (!geetanjali) throw new Error("Dr. Geetanjali Sharma was not seeded.");
+
   // Dr. Geetanjali gets exactly six classes from Semesters 1, 3, 5 and 7.
   // One subject is assigned in each selected class for the class/subject selector.
   const teacherClassAssignments = [
@@ -213,9 +303,9 @@ async function main() {
     if (!subject) continue;
 
     await prisma.assignment.upsert({
-      where: { teacherId_subjectId: { teacherId: teacher.id, subjectId: subject.id } },
+      where: { teacherId_subjectId: { teacherId: geetanjali.id, subjectId: subject.id } },
       update: {},
-      create: { teacherId: teacher.id, subjectId: subject.id },
+      create: { teacherId: geetanjali.id, subjectId: subject.id },
     });
   }
 
@@ -238,14 +328,17 @@ async function main() {
     });
     if (daSubject) {
       await prisma.assignment.upsert({
-        where: { teacherId_subjectId: { teacherId: teacher.id, subjectId: daSubject.id } },
+        where: { teacherId_subjectId: { teacherId: geetanjali.id, subjectId: daSubject.id } },
         update: {},
-        create: { teacherId: teacher.id, subjectId: daSubject.id },
+        create: { teacherId: geetanjali.id, subjectId: daSubject.id },
       });
       await prisma.sheetLink.upsert({
         where: { subjectId: daSubject.id },
         update: {},
-        create: { subjectId: daSubject.id, sheetId: "118662A6Ifl2GDZKnh120v2jNylUiMWGNYThfRXSDX6U" },
+        create: {
+          subjectId: daSubject.id,
+          sheetId: "118662A6Ifl2GDZKnh120v2jNylUiMWGNYThfRXSDX6U",
+        },
       });
     }
     await prisma.sheetLink.upsert({
@@ -257,8 +350,10 @@ async function main() {
 
   console.log("Seed complete.");
   console.log("Created/updated ECE 1, ECE 2 and ECE E for Semesters 1-7.");
-  console.log("Assigned Dr. Geetanjali to 6 classes from Semesters 1, 3, 5 and 7.");
-  console.log("Semester 8 intentionally has no subjects; labs are excluded.");
+  console.log("Added theory and lab subjects; Summer Training Report and NSS are excluded.");
+  console.log(`Seeded ${teacherSeeds.length} ECE faculty teacher accounts.`);
+  console.log("Assigned Dr. Geetanjali Sharma to 6 classes from Semesters 1, 3, 5 and 7.");
+  console.log("Semester 8 intentionally has no subjects.");
   console.log("Login: geetanjali@demo.edu / changeme123");
   console.log("Admin: admin@demo.edu / changeme123");
 }

From 2cab1bc8661065290c9f8580e8812417d957582d Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sat, 29 Aug 2026 20:15:32 +0530
Subject: [PATCH 25/80] Fix Geetanjali ECE 2 Sem 7 assignment

---
 prisma/fix-geetanjali-assignments.ts | 56 ++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 prisma/fix-geetanjali-assignments.ts

diff --git a/prisma/fix-geetanjali-assignments.ts b/prisma/fix-geetanjali-assignments.ts
new file mode 100644
index 0000000..b594f62
--- /dev/null
+++ b/prisma/fix-geetanjali-assignments.ts
@@ -0,0 +1,56 @@
+import { PrismaClient } from "@prisma/client";
+
+const prisma = new PrismaClient();
+
+async function main() {
+  const teacher = await prisma.user.findUnique({
+    where: { email: "geetanjali@demo.edu" },
+  });
+
+  if (!teacher) {
+    throw new Error("Dr. Geetanjali Sharma was not found.");
+  }
+
+  const cls = await prisma.class.findFirst({
+    where: {
+      program: "B.Tech ECE 2",
+      academicYear: "2026-27",
+      semester: 7,
+    },
+    include: { sections: true },
+  });
+
+  const section = cls?.sections.find((item) => item.name === "A");
+  if (!section) {
+    console.log("ECE 2 Sem 7 Section A not found; nothing to fix.");
+    return;
+  }
+
+  // DA 338 T belongs to the old Sem 6 data and must not appear in
+  // Geetanjali's ECE 2 Sem 7 subject assignments.
+  const legacySubject = await prisma.subject.findFirst({
+    where: {
+      sectionId: section.id,
+      code: "DA 338 T",
+    },
+  });
+
+  if (legacySubject) {
+    const result = await prisma.assignment.deleteMany({
+      where: {
+        teacherId: teacher.id,
+        subjectId: legacySubject.id,
+      },
+    });
+    console.log(`Removed ${result.count} legacy DA assignment(s) from Geetanjali's ECE 2 Sem 7.`);
+  }
+
+  console.log("Geetanjali ECE 2 Sem 7 assignment fix complete.");
+}
+
+main()
+  .catch((error) => {
+    console.error(error);
+    process.exit(1);
+  })
+  .finally(async () => prisma.$disconnect());

From 958180a7672ac0f754e04e6c3fc61eb652dcfb35 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sat, 29 Aug 2026 20:15:46 +0530
Subject: [PATCH 26/80] Run Geetanjali assignment fix after seed

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index eab309f..3cfee5f 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "start": "next start",
     "prisma:migrate": "prisma migrate dev",
     "prisma:studio": "prisma studio",
-    "seed": "ts-node prisma/seed.ts"
+    "seed": "ts-node prisma/seed.ts && ts-node prisma/fix-geetanjali-assignments.ts"
   },
   "dependencies": {
     "@prisma/client": "^5.18.0",
@@ -35,6 +35,6 @@
     "wait-on": "^9.1.0"
   },
   "prisma": {
-    "seed": "ts-node prisma/seed.ts"
+    "seed": "ts-node prisma/seed.ts && ts-node prisma/fix-geetanjali-assignments.ts"
   }
 }

From 8d1cea0f05fa1d587e1a197c0cd007452d77f339 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sat, 29 Aug 2026 23:56:06 +0530
Subject: [PATCH 27/80] Seed ECE 2 Sem 7 students

---
 prisma/seed-ece2-sem7-students.ts | 117 ++++++++++++++++++++++++++++++
 1 file changed, 117 insertions(+)
 create mode 100644 prisma/seed-ece2-sem7-students.ts

diff --git a/prisma/seed-ece2-sem7-students.ts b/prisma/seed-ece2-sem7-students.ts
new file mode 100644
index 0000000..e16a081
--- /dev/null
+++ b/prisma/seed-ece2-sem7-students.ts
@@ -0,0 +1,117 @@
+import { PrismaClient } from "@prisma/client";
+
+const prisma = new PrismaClient();
+
+const students = [
+  ["5215002823", "Pranay Bhardwaj", "pranay.bhardwaj20090040@gmail.com"],
+  ["5315002823", "kunal jotwani", "kunalye80@gmail.com"],
+  ["5415002823", "Sanchit Sharma", "sanchitsharma917@gmail.com"],
+  ["5515002823", "Sajal Singhal", "specialsajal@gmail.com"],
+  ["5615002823", "Khyati Kakkar", "kkakkar5k@gmail.com"],
+  ["5715002823", "chetan kumar", "ck769825@gmail.com"],
+  ["5815002823", "Manish", "officialmanishsingh03@gmail.com"],
+  ["5915002823", "ISHA JHA", "ishujha360@gmail.com"],
+  ["6015002823", "Omar Rizwan", "omarrizwan22424@gmail.com"],
+  ["6115002823", "ASHISH SHARMA", "ashishsharma23042004@gmail.com"],
+  ["6215002823", "Harsh rautela", "HARSH.RAUTELA15@GMAIL.COM"],
+  ["6315002823", "SATYAJEET KUMAR", "KUMARSATYAJEETANAND@GMAIL.COM"],
+  ["6415002823", "piyush kumar singh", "piyushsingh22617@gmail.com"],
+  ["6515002823", "Arpit Singh", "arpitsingh221972@gmail.com"],
+  ["6615002823", "Syed Faizaan Ahmad", "Syedashffaizaan1999@gmail.com"],
+  ["6715002823", "Abhimanyu", "abhimanyu3704@gmail.com"],
+  ["6815002823", "UTTAM KUMAR", "uttamkumar192006@gmail.com"],
+  ["6915002823", "Aastha Raj Singh", "aastharsingh2004@gmail.com"],
+  ["7015002823", "Zishan Afzal", "zishanafzal26182@gmail.com"],
+  ["7115002823", "Saksham Shaurya", "SAKSHAMSHAURYAEXAM@GMAIL.COM"],
+  ["7215002823", "NEERAJ", "neerajbeniwal2015@gmail.com"],
+  ["7315002823", "Kartikey Bhardwaj", "kartikeybhardwaj2428@gmail.com"],
+  ["7415002823", "Harsh Jindal", "hjinal018@gmail.com"],
+  ["7515002823", "Karan Vasisth", "kvasisth2000@gmail.com"],
+  ["7615002823", "MANISH KUMAR", "manish0o09955@gmail.com"],
+  ["7715002823", "SHIVAM TIWARI", "shivamtiwari020505@gmail.com"],
+  ["7815002823", "Ayush Uniyal", "unialayush2@gmail.com"],
+  ["7915002823", "Divesh", "keindivesh@gmail.com"],
+  ["8015002823", "DAKSH TIWARI", "daksh.tiwari23@gmail.com"],
+  ["8215002823", "Rishabh", "rishabh06x@gmail.com"],
+  ["8315002823", "Vivek Das", "dasv3125@gmail.com"],
+  ["8415002823", "UDIT RATHORE", "uditrathore0602@gmail.com"],
+  ["8515002823", "Pranav Mittal", "ppvm.0112@gmail.com"],
+  ["8715002823", "Aditya Jha", "adityajha9313@gmail.com"],
+  ["8815002823", "kushagra pandey", "kushagrapande302004@gmail.com"],
+  ["8915002823", "Rohit", "rk9104593@gmail.com"],
+  ["9015002823", "Gaurav kumar", "gouravkm314@gmail.com"],
+  ["9115002823", "APARMIT SRIVASTAVA", "aparmitsrivastava1@gmail.com"],
+  ["9215002823", "Prashant", "kumarp89180@gmail.com"],
+  ["9315002823", "Sarthak Gupta", "sarthakgupta.1105@gmail.com"],
+  ["9415002823", "saunak sharma", "saunaksharma@gmail.com"],
+  ["9515002823", "Rohan Kumar", "rohan.kumar52003@gmail.com"],
+  ["9615002823", "YASHWANT KUMAR BEDIA", "yash613948@gmail.com"],
+  ["9715002823", "Khushal", "officialkhushal22@gmail.com"],
+  ["9815002823", "Abhi Rana", "Abhirajput25106@gmail.com"],
+  ["10015002823", "MOHD SHAHABUDDIN", "mohdshahabuddin039@gmail.com"],
+  ["10115002823", "Suraj Kumar", "suraj2004ksmile@gmail.com"],
+  ["70115002823", "Radhika Garg", "grgradhika18@gmail.com"],
+  ["35215002823", "RAHUL SHARMA", "rahul.0703bkn@gmail.com"],
+  ["35315002823", "TANISHA ROSE", "tanisharose91365@gmail.com"],
+  ["35415002823", "VINIT MEHLAWAT", "vinitmehlawat07@gmail.com"],
+  ["35615002823", "VRINDA DIXIT", "dixitvrinda1704@gmail.com"],
+  ["35715002823", "SHINJINI DATTA", "shinjini.005@gmail.com"],
+  ["35915002823", "YASHASWINI NARULA", "yashaswininarula@gmail.com"],
+  ["75215002823", "Yaksh Verma", "bryant23.yv@gmail.com"],
+  ["20115002823", "Abhishek", "ag8882138469@gmail.com"],
+  ["20315002823", "Ansh Raj", "anshrajjee3@gmail.com"],
+  ["20515002823", "Sneha Juyal", "snehajuyal20@gmail.com"],
+  ["20615002823", "Richa", "richabaghel25@gmail.com"],
+  ["60915002824", "Raj Gandhi", "rg7065455@gmail.com"],
+  ["60215002824", "Gaurav", "gauravkukreja914@gmail.com"],
+  ["60815002824", "Sweta Kumari", "swetachandra1212@gmail.com"],
+  ["60415002824", "CH Hareesh", "chhareesh11@gmail.com"],
+  ["60715002824", "Kunal Kumar", "KKUNAL10169@GMAIL.COM"],
+  ["6815002822", "Anant Pratap Singh", "ss4479279@gmail.com"],
+] as const;
+
+async function main() {
+  const department = await prisma.department.findFirst({
+    where: { name: "ECE", college: { id: "demo-college" } },
+  });
+  if (!department) throw new Error("ECE department not found.");
+
+  const cls = await prisma.class.findFirst({
+    where: {
+      departmentId: department.id,
+      academicYear: "2026-27",
+      semester: 7,
+      OR: [{ program: "B.Tech ECE 2" }, { program: "B.Tech ECE" }],
+    },
+  });
+  if (!cls) throw new Error("ECE 2 Semester 7 class not found.");
+
+  const section = await prisma.section.findFirst({
+    where: { classId: cls.id, name: "A" },
+  });
+  if (!section) throw new Error("ECE 2 Semester 7 Section A not found.");
+
+  for (const [enrollmentNo, name, email] of students) {
+    await prisma.student.upsert({
+      where: { sectionId_enrollmentNo: { sectionId: section.id, enrollmentNo } },
+      update: { name, email },
+      create: { sectionId: section.id, enrollmentNo, name, email },
+    });
+  }
+
+  await prisma.section.update({
+    where: { id: section.id },
+    data: { strength: students.length },
+  });
+
+  console.log(`Seeded ${students.length} students into ECE 2 Sem 7 Section A.`);
+}
+
+main()
+  .catch((error) => {
+    console.error(error);
+    process.exitCode = 1;
+  })
+  .finally(async () => {
+    await prisma.$disconnect();
+  });

From 4fcd08592d6bea8807dc83557c32a4923c0a61be Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sat, 29 Aug 2026 23:56:32 +0530
Subject: [PATCH 28/80] Run ECE 2 Sem 7 student seed

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 3cfee5f..c1f2e97 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "start": "next start",
     "prisma:migrate": "prisma migrate dev",
     "prisma:studio": "prisma studio",
-    "seed": "ts-node prisma/seed.ts && ts-node prisma/fix-geetanjali-assignments.ts"
+    "seed": "ts-node prisma/seed.ts && ts-node prisma/fix-geetanjali-assignments.ts && ts-node prisma/seed-ece2-sem7-students.ts"
   },
   "dependencies": {
     "@prisma/client": "^5.18.0",
@@ -35,6 +35,6 @@
     "wait-on": "^9.1.0"
   },
   "prisma": {
-    "seed": "ts-node prisma/seed.ts && ts-node prisma/fix-geetanjali-assignments.ts"
+    "seed": "ts-node prisma/seed.ts && ts-node prisma/fix-geetanjali-assignments.ts && ts-node prisma/seed-ece2-sem7-students.ts"
   }
 }

From 7af938029b20bbe1592fa68eb5ae1d0ebbf0f3f9 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sun, 30 Aug 2026 13:11:19 +0530
Subject: [PATCH 29/80] Add themed Class Analysis class selector

---
 pages/class-analysis/index.tsx | 44 ++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 pages/class-analysis/index.tsx

diff --git a/pages/class-analysis/index.tsx b/pages/class-analysis/index.tsx
new file mode 100644
index 0000000..e808e41
--- /dev/null
+++ b/pages/class-analysis/index.tsx
@@ -0,0 +1,44 @@
+import { GetServerSideProps } from "next";
+import { getServerSession } from "next-auth/next";
+import { authOptions } from "../../lib/authOptions";
+import { prisma } from "../../lib/prisma";
+import Link from "next/link";
+import { ArrowLeft, ArrowRight, BarChart3, BookOpen, CalendarDays, LayoutDashboard, LogOut, UserRoundPlus } from "lucide-react";
+import { signOut } from "next-auth/react";
+
+type ClassOption = { id: string; label: string };
+type Props = { classes: ClassOption[]; teacherName: string };
+
+function formatClassLabel(department: string, semester: number, classNumber: string) {
+  return `${department}-${classNumber} Sem ${semester}`;
+}
+
+export default function ClassAnalysisIndex({ classes, teacherName }: Props) {
+  const initials = teacherName.split(" ").filter(Boolean).slice(0, 2).map((part) => part[0]?.toUpperCase()).join("") || "T";
+
+  return (
+    <div className="min-h-screen bg-[#fffdf8] text-[#17223b] lg:flex">
+      <aside className="hidden w-[220px] shrink-0 border-r border-[#e8e7e3] bg-white lg:flex lg:min-h-screen lg:flex-col lg:fixed lg:inset-y-0 lg:left-0">
+        <div className="px-5 pt-6"><Link href="/dashboard" className="flex items-center gap-3"><span className="grid h-10 w-10 place-items-center rounded-xl bg-[#39268f] text-white shadow-[0_10px_25px_rgba(57,38,143,0.2)]"><BarChart3 size={21} strokeWidth={2.2} /></span><span className="text-[20px] font-extrabold tracking-[-0.7px]">ClassPulse</span></Link></div>
+        <div className="mx-5 mt-7 flex items-center gap-3 border-b border-[#eeeeeb] pb-6"><span className="grid h-10 w-10 place-items-center rounded-full bg-[#eeeaff] text-sm font-bold text-[#4b36a7]">{initials}</span><div className="min-w-0"><p className="truncate text-sm font-semibold">{teacherName}</p><p className="text-xs text-[#7a8295]">Faculty</p></div></div>
+        <nav className="mt-5 space-y-1 px-3 text-sm font-medium text-[#626b80]"><Link href="/dashboard" className="flex items-center gap-3 rounded-xl px-3 py-3 transition hover:bg-[#f6f4ff] hover:text-[#38258e]"><LayoutDashboard size={18} /> Dashboard</Link><Link href="/attendance-agent" className="flex items-center gap-3 rounded-xl px-3 py-3 transition hover:bg-[#f6f4ff] hover:text-[#38258e]"><UserRoundPlus size={18} /> Attendance Agent</Link><Link href="/timetable" className="flex items-center gap-3 rounded-xl px-3 py-3 transition hover:bg-[#f6f4ff] hover:text-[#38258e]"><CalendarDays size={18} /> Timetable</Link><Link href="/class-analysis" className="flex items-center gap-3 rounded-xl bg-[#eeeaff] px-3 py-3 font-semibold text-[#38258e]"><BarChart3 size={18} /> Class Analysis</Link><Link href="/subject-analysis" className="flex items-center gap-3 rounded-xl px-3 py-3 transition hover:bg-[#f6f4ff] hover:text-[#38258e]"><BookOpen size={18} /> Subject Analysis</Link></nav>
+        <div className="mt-auto px-4 pb-5"><button onClick={() => signOut({ callbackUrl: "/login" })} className="flex w-full items-center gap-3 border-t border-[#eeeeeb] px-3 pt-5 text-sm font-medium text-[#626b80] hover:text-[#17223b]"><LogOut size={18} /> Sign out</button></div>
+      </aside>
+      <main className="w-full lg:ml-[220px]"><div className="relative min-h-screen overflow-hidden"><div className="pointer-events-none absolute right-0 top-0 h-[330px] w-[650px] opacity-70" style={{ background: "radial-gradient(circle at 70% 20%, rgba(111,91,231,.16), transparent 48%), linear-gradient(145deg, transparent 35%, rgba(111,91,231,.07) 75%, transparent)" }} /><div className="relative mx-auto max-w-[1200px] px-5 py-8 sm:px-8 lg:px-12 lg:py-12">
+        <Link href="/dashboard" className="inline-flex items-center gap-2 text-sm font-semibold text-[#5b4ee6] hover:underline"><ArrowLeft size={16} /> Back to Dashboard</Link>
+        <div className="mt-8"><p className="text-sm font-semibold text-[#5b4ee6]">Class Analysis</p><h1 className="mt-2 text-[34px] font-extrabold tracking-[-1.4px] sm:text-[40px]">Choose a class</h1><p className="mt-2 max-w-[650px] text-sm leading-6 text-[#6f7890]">Select a class assigned to you to open its analysis.</p></div>
+        <section className="mt-8 min-h-[430px] rounded-2xl border border-[#e5e4e1] bg-white p-6 shadow-[0_8px_30px_rgba(31,35,49,0.05)] sm:p-8"><div className="space-y-3">{classes.map((classOption) => <Link key={classOption.id} href={`/class-analysis/${classOption.id}`} className="group flex items-center gap-4 rounded-xl border border-[#e4e4e8] bg-white px-5 py-4 transition hover:-translate-y-0.5 hover:border-[#cfc7ff] hover:bg-[#fcfbff] hover:shadow-[0_8px_24px_rgba(57,38,143,0.08)]"><span className="grid h-12 w-12 shrink-0 place-items-center rounded-full bg-[#f0edff] text-[#6b55df]"><BookOpen size={21} /></span><span className="min-w-0 flex-1"><span className="block text-[16px] font-bold text-[#17223b]">{classOption.label}</span><span className="mt-1 block text-xs text-[#7a8295]">Open attendance, academic and student analysis</span></span><ArrowRight size={19} className="text-[#747d91] transition group-hover:translate-x-1 group-hover:text-[#4b36a7]" /></Link>)}{!classes.length && <div className="rounded-xl border border-dashed border-[#dfe2e8] bg-[#fafafa] p-6 text-sm text-[#747d91]">No classes are assigned to you.</div>}</div></section>
+      </div></div></main>
+    </div>
+  );
+}
+
+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;
+  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 classes = new Map<string, ClassOption>();
+  for (const section of sections) classes.set(section.class.id, { id: section.class.id, label: formatClassLabel(section.class.department.name, section.class.semester, section.name) });
+  return { props: { classes: Array.from(classes.values()), teacherName: session.user.name || session.user.email } };
+};

From d8faa96ccd030268d1aade83c9d41b9fc460f73c Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sun, 30 Aug 2026 13:11:33 +0530
Subject: [PATCH 30/80] Use ECE-2 class naming in Subject Analysis

---
 pages/subject-analysis/index.tsx | 151 ++++---------------------------
 1 file changed, 19 insertions(+), 132 deletions(-)

diff --git a/pages/subject-analysis/index.tsx b/pages/subject-analysis/index.tsx
index e25b1dc..13dfe92 100644
--- a/pages/subject-analysis/index.tsx
+++ b/pages/subject-analysis/index.tsx
@@ -6,153 +6,40 @@ import Link from "next/link";
 import { useState } from "react";
 import { BookOpen, ArrowLeft, ArrowRight, BarChart3 } from "lucide-react";
 
-interface SubjectOption {
-  id: string;
-  sectionId: string;
-  name: string;
-  code: string;
-}
-
-interface ClassOption {
-  id: string;
-  label: string;
-}
+interface SubjectOption { id: string; sectionId: string; name: string; code: string; }
+interface ClassOption { id: string; label: string; }
+interface Props { teacherName: string; classes: ClassOption[]; subjects: SubjectOption[]; }
 
-interface Props {
-  teacherName: string;
-  classes: ClassOption[];
-  subjects: SubjectOption[];
+function formatClassLabel(department: string, classNumber: string, semester: number) {
+  return `${department}-${classNumber} Sem ${semester}`;
 }
 
 export default function SubjectAnalysisChooser({ teacherName, classes, subjects }: Props) {
   const [selectedClass, setSelectedClass] = useState(classes[0]?.id || "");
   const selectedSubjects = subjects.filter((subject) => subject.sectionId === selectedClass);
-
   return (
     <div className="min-h-screen bg-[#fffdf8] text-[#17223b] lg:flex">
       <aside className="hidden w-[220px] shrink-0 border-r border-[#e8e7e3] bg-white lg:flex lg:min-h-screen lg:flex-col lg:fixed lg:inset-y-0 lg:left-0">
-        <div className="px-5 pt-6">
-          <Link href="/dashboard" className="flex items-center gap-3">
-            <span className="grid h-10 w-10 place-items-center rounded-xl bg-[#39268f] text-white shadow-[0_10px_25px_rgba(57,38,143,0.2)]">
-              <BarChart3 size={21} strokeWidth={2.2} />
-            </span>
-            <span className="text-[20px] font-extrabold tracking-[-0.7px]">ClassPulse</span>
-          </Link>
-        </div>
-        <nav className="mt-8 space-y-1 px-3 text-sm font-medium text-[#626b80]">
-          <Link href="/dashboard" className="flex items-center gap-3 rounded-xl px-3 py-3 hover:bg-[#f6f4ff] hover:text-[#38258e]">
-            <BarChart3 size={18} /> Dashboard
-          </Link>
-          <Link href="/subject-analysis" className="flex items-center gap-3 rounded-xl bg-[#eeeaff] px-3 py-3 font-semibold text-[#38258e]">
-            <BookOpen size={18} /> Subject Analysis
-          </Link>
-        </nav>
+        <div className="px-5 pt-6"><Link href="/dashboard" className="flex items-center gap-3"><span className="grid h-10 w-10 place-items-center rounded-xl bg-[#39268f] text-white shadow-[0_10px_25px_rgba(57,38,143,0.2)]"><BarChart3 size={21} strokeWidth={2.2} /></span><span className="text-[20px] font-extrabold tracking-[-0.7px]">ClassPulse</span></Link></div>
+        <nav className="mt-8 space-y-1 px-3 text-sm font-medium text-[#626b80]"><Link href="/dashboard" className="flex items-center gap-3 rounded-xl px-3 py-3 hover:bg-[#f6f4ff] hover:text-[#38258e]"><BarChart3 size={18} /> Dashboard</Link><Link href="/subject-analysis" className="flex items-center gap-3 rounded-xl bg-[#eeeaff] px-3 py-3 font-semibold text-[#38258e]"><BookOpen size={18} /> Subject Analysis</Link></nav>
       </aside>
-
-      <main className="w-full lg:ml-[220px]">
-        <div className="mx-auto max-w-[1000px] px-5 py-8 sm:px-8 lg:px-12 lg:py-12">
-          <Link href="/dashboard" className="inline-flex items-center gap-2 text-sm font-semibold text-[#5b4ee6] hover:underline">
-            <ArrowLeft size={16} /> Back to Dashboard
-          </Link>
-
-          <div className="mt-8">
-            <p className="text-sm font-semibold text-[#5b4ee6]">Subject Analysis</p>
-            <h1 className="mt-2 text-[32px] font-extrabold tracking-[-1.2px]">Choose a class and subject</h1>
-            <p className="mt-2 max-w-[650px] text-sm leading-6 text-[#6f7890]">
-              Select a class you are assigned to, then choose one of your assigned subjects for that class.
-            </p>
-          </div>
-
-          <section className="mt-8 rounded-2xl border border-[#e5e4e1] bg-white p-6 shadow-[0_8px_25px_rgba(31,35,49,0.04)] sm:p-8">
-            <div>
-              <label htmlFor="class" className="block text-sm font-bold text-[#17223b]">Class</label>
-              <select
-                id="class"
-                value={selectedClass}
-                onChange={(event) => setSelectedClass(event.target.value)}
-                className="mt-2 w-full rounded-xl border border-[#dfe2e8] bg-white px-4 py-3 text-sm text-[#26314a] outline-none focus:border-[#6b5be7] focus:ring-2 focus:ring-[#6b5be7]/10"
-              >
-                {classes.map((item) => <option key={item.id} value={item.id}>{item.label}</option>)}
-              </select>
-            </div>
-
-            <div className="mt-7">
-              <div className="flex items-center justify-between gap-3">
-                <label className="block text-sm font-bold text-[#17223b]">Assigned Subjects</label>
-                <span className="text-xs text-[#8991a2]">{selectedSubjects.length} available</span>
-              </div>
-
-              {selectedSubjects.length === 0 ? (
-                <div className="mt-3 rounded-xl border border-dashed border-[#dfe2e8] bg-[#fafafa] p-5 text-sm text-[#747d91]">
-                  No subjects are assigned to you for this class.
-                </div>
-              ) : (
-                <div className="mt-3 grid gap-3 sm:grid-cols-2">
-                  {selectedSubjects.map((subject) => (
-                    <Link
-                      key={subject.id}
-                      href={`/subject-analysis/${subject.id}`}
-                      className="group flex items-center gap-4 rounded-xl border border-[#e5e4e1] bg-white p-4 transition hover:-translate-y-0.5 hover:border-[#d9d2ff] hover:shadow-[0_8px_24px_rgba(57,38,143,0.08)]"
-                    >
-                      <span className="grid h-11 w-11 shrink-0 place-items-center rounded-full bg-[#fff5e7] text-[#ee9412]">
-                        <BookOpen size={20} />
-                      </span>
-                      <span className="min-w-0 flex-1">
-                        <span className="block text-sm font-bold text-[#17223b]">{subject.name}</span>
-                        <span className="mt-1 block text-xs text-[#7a8295]">{subject.code}</span>
-                      </span>
-                      <ArrowRight size={18} className="text-[#626b80] transition group-hover:translate-x-1 group-hover:text-[#4b36a7]" />
-                    </Link>
-                  ))}
-                </div>
-              )}
-            </div>
-          </section>
-
-          <p className="mt-5 text-xs text-[#8991a2]">Signed in as {teacherName}. Only your assigned classes and subjects are shown.</p>
-        </div>
-      </main>
+      <main className="w-full lg:ml-[220px]"><div className="relative min-h-screen overflow-hidden"><div className="pointer-events-none absolute right-0 top-0 h-[330px] w-[650px] opacity-70" style={{ background: "radial-gradient(circle at 70% 20%, rgba(111,91,231,.16), transparent 48%), linear-gradient(145deg, transparent 35%, rgba(111,91,231,.07) 75%, transparent)" }} /><div className="relative mx-auto max-w-[1100px] px-5 py-8 sm:px-8 lg:px-12 lg:py-12">
+        <Link href="/dashboard" className="inline-flex items-center gap-2 text-sm font-semibold text-[#5b4ee6] hover:underline"><ArrowLeft size={16} /> Back to Dashboard</Link>
+        <div className="mt-8"><p className="text-sm font-semibold text-[#5b4ee6]">Subject Analysis</p><h1 className="mt-2 text-[34px] font-extrabold tracking-[-1.4px] sm:text-[40px]">Choose a class and subject</h1><p className="mt-2 max-w-[650px] text-sm leading-6 text-[#6f7890]">Select a class you are assigned to, then choose one of your assigned subjects for that class.</p></div>
+        <section className="mt-8 rounded-2xl border border-[#e5e4e1] bg-white p-6 shadow-[0_8px_30px_rgba(31,35,49,0.05)] sm:p-8"><label htmlFor="class" className="block text-sm font-bold">Class</label><select id="class" value={selectedClass} onChange={(event) => setSelectedClass(event.target.value)} className="mt-2 w-full rounded-xl border border-[#dfe2e8] bg-white px-4 py-3 text-sm outline-none focus:border-[#6b5be7] focus:ring-2 focus:ring-[#6b5be7]/10">{classes.map((item) => <option key={item.id} value={item.id}>{item.label}</option>)}</select>
+          <div className="mt-7"><div className="flex items-center justify-between"><label className="text-sm font-bold">Assigned Subjects</label><span className="text-xs text-[#8991a2]">{selectedSubjects.length} available</span></div>{selectedSubjects.length === 0 ? <div className="mt-3 rounded-xl border border-dashed border-[#dfe2e8] bg-[#fafafa] p-5 text-sm text-[#747d91]">No subjects are assigned to you for this class.</div> : <div className="mt-3 grid gap-3 sm:grid-cols-2">{selectedSubjects.map((subject) => <Link key={subject.id} href={`/subject-analysis/${subject.id}`} className="group flex items-center gap-4 rounded-xl border border-[#e5e4e1] bg-white p-4 transition hover:-translate-y-0.5 hover:border-[#d9d2ff] hover:shadow-[0_8px_24px_rgba(57,38,143,0.08)]"><span className="grid h-11 w-11 shrink-0 place-items-center rounded-full bg-[#fff5e7] text-[#ee9412]"><BookOpen size={20} /></span><span className="min-w-0 flex-1"><span className="block text-sm font-bold">{subject.name}</span><span className="mt-1 block text-xs text-[#7a8295]">{subject.code}</span></span><ArrowRight size={18} className="text-[#626b80] transition group-hover:translate-x-1 group-hover:text-[#4b36a7]" /></Link>)}</div>}</div>
+        </section><p className="mt-5 text-xs text-[#8991a2]">Signed in as {teacherName}. Only your assigned classes and subjects are shown.</p>
+      </div></div></main>
     </div>
   );
 }
 
 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;
-
-  const subjectsRaw = await prisma.subject.findMany({
-    where: role === "ADMIN" ? {} : { assignments: { some: { teacherId: userId } } },
-    include: {
-      section: { include: { class: { include: { department: true } } } },
-    },
-    orderBy: [{ section: { class: { semester: "asc" } } }, { name: "asc" }],
-  });
-
+  if (!session?.user) return { redirect: { destination: "/login", permanent: false } };
+  const userId = (session.user as any).id; const role = (session.user as any).role;
+  const subjectsRaw = await prisma.subject.findMany({ where: role === "ADMIN" ? {} : { assignments: { some: { teacherId: userId } } }, include: { section: { include: { class: { include: { department: true } } } } }, orderBy: [{ section: { class: { semester: "asc" } } }, { name: "asc" }] });
   const classMap = new Map<string, ClassOption>();
-  for (const subject of subjectsRaw) {
-    const section = subject.section;
-    const sectionClass = section.class;
-    classMap.set(section.id, {
-      id: section.id,
-      label: `${sectionClass.department.name} — ${sectionClass.program}, Sem ${sectionClass.semester}, Section ${section.name}`,
-    });
-  }
-
-  return {
-    props: {
-      teacherName: session.user.name || session.user.email,
-      classes: Array.from(classMap.values()),
-      subjects: subjectsRaw.map((subject) => ({
-        id: subject.id,
-        sectionId: subject.section.id,
-        name: subject.name,
-        code: subject.code,
-      })),
-    },
-  };
+  for (const subject of subjectsRaw) { const c = subject.section.class; classMap.set(c.id, { id: c.id, label: formatClassLabel(c.department.name, subject.section.name, c.semester) }); }
+  return { props: { teacherName: session.user.name || session.user.email, classes: Array.from(classMap.values()), subjects: subjectsRaw.map((subject) => ({ id: subject.id, sectionId: subject.section.class.id, name: subject.name, code: subject.code })) } };
 };

From e2a704699df78371bc9aedda390211919a93e8a5 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sun, 30 Aug 2026 14:15:14 +0530
Subject: [PATCH 31/80] Route legacy class analysis URLs through selector

---
 pages/section-analysis/[sectionId].tsx | 21 ++++++++-------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/pages/section-analysis/[sectionId].tsx b/pages/section-analysis/[sectionId].tsx
index 93616a0..ea807bd 100644
--- a/pages/section-analysis/[sectionId].tsx
+++ b/pages/section-analysis/[sectionId].tsx
@@ -1,18 +1,13 @@
 import { GetServerSideProps } from "next";
 
-// The bare /section-analysis/[sectionId] URL isn't a page on its own —
-// analysis lives under /attendance, /academic, /overall, /students.
-// This just sends anyone landing here (dashboard links, bookmarks, etc.)
-// straight to the default tab.
-export const getServerSideProps: GetServerSideProps = async (ctx) => {
-  const { sectionId } = ctx.params as { sectionId: string };
-  return {
-    redirect: {
-      destination: `/section-analysis/${sectionId}/attendance`,
-      permanent: false,
-    },
-  };
-};
+// Legacy class-analysis URLs must go through the assigned-class selector.
+// This prevents dashboard/bookmark links from bypassing teacher-scoped selection.
+export const getServerSideProps: GetServerSideProps = async () => ({
+  redirect: {
+    destination: "/section-analysis",
+    permanent: false,
+  },
+});
 
 export default function SectionAnalysisRedirect() {
   return null;

From b739f76f8a2f0b6e158d67caa232fdd40a7854b3 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sun, 30 Aug 2026 14:17:54 +0530
Subject: [PATCH 32/80] Fix dashboard Class Analysis navigation to selector

---
 pages/dashboard.tsx | 263 ++++----------------------------------------
 1 file changed, 19 insertions(+), 244 deletions(-)

diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index 2229489..22718a2 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -28,34 +28,10 @@ interface Props {
 }
 
 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: "/section-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]",
-  },
+  { 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]" },
 ];
 
 const todaySchedule = [
@@ -74,230 +50,29 @@ const recentActivity = [
 ];
 
 export default function Dashboard({ teacherName, sections, subjects }: Props) {
-  const initials = teacherName
-    .split(" ")
-    .filter(Boolean)
-    .slice(0, 2)
-    .map((part) => part[0]?.toUpperCase())
-    .join("");
-
+  const initials = teacherName.split(" ").filter(Boolean).slice(0, 2).map((part) => part[0]?.toUpperCase()).join("");
   return (
     <div className="min-h-screen bg-[#fffdf8] text-[#17223b] lg:flex">
       <aside className="hidden w-[220px] shrink-0 border-r border-[#e8e7e3] bg-white lg:flex lg:min-h-screen lg:flex-col lg:fixed lg:inset-y-0 lg:left-0">
-        <div className="px-5 pt-6">
-          <Link href="/dashboard" className="flex items-center gap-3">
-            <span className="grid h-10 w-10 place-items-center rounded-xl bg-[#39268f] text-white shadow-[0_10px_25px_rgba(57,38,143,0.2)]">
-              <BarChart3 size={21} strokeWidth={2.2} />
-            </span>
-            <span className="text-[20px] font-extrabold tracking-[-0.7px]">ClassPulse</span>
-          </Link>
-        </div>
-
-        <div className="mx-5 mt-7 flex items-center gap-3 border-b border-[#eeeeeb] pb-6">
-          <span className="grid h-10 w-10 place-items-center rounded-full bg-[#eeeaff] text-sm font-bold text-[#4b36a7]">{initials || "T"}</span>
-          <div className="min-w-0">
-            <p className="truncate text-sm font-semibold">{teacherName}</p>
-            <p className="text-xs text-[#7a8295]">Faculty</p>
-          </div>
-        </div>
-
-        <nav className="mt-5 space-y-1 px-3 text-sm font-medium text-[#626b80]">
-          <Link href="/dashboard" className="flex items-center gap-3 rounded-xl bg-[#eeeaff] px-3 py-3 font-semibold text-[#38258e]">
-            <LayoutDashboard size={18} /> Dashboard
-          </Link>
-          <Link href="/attendance-agent" className="flex items-center gap-3 rounded-xl px-3 py-3 transition hover:bg-[#f6f4ff] hover:text-[#38258e]">
-            <UserRoundPlus size={18} /> Attendance Agent
-          </Link>
-          <Link href="/timetable" className="flex items-center gap-3 rounded-xl px-3 py-3 transition hover:bg-[#f6f4ff] hover:text-[#38258e]">
-            <CalendarDays size={18} /> Timetable
-          </Link>
-          <Link href="/section-analysis" className="flex items-center gap-3 rounded-xl px-3 py-3 transition hover:bg-[#f6f4ff] hover:text-[#38258e]">
-            <BarChart3 size={18} /> Class Analysis
-          </Link>
-          <Link href="/subject-analysis" className="flex items-center gap-3 rounded-xl px-3 py-3 transition hover:bg-[#f6f4ff] hover:text-[#38258e]">
-            <BookOpen size={18} /> Subject Analysis
-          </Link>
-          <Link href="/raw-data" className="flex items-center gap-3 rounded-xl px-3 py-3 transition hover:bg-[#f6f4ff] hover:text-[#38258e]">
-            <Database size={18} /> Raw Data
-          </Link>
-          <button type="button" className="flex w-full items-center gap-3 rounded-xl px-3 py-3 text-left transition hover:bg-[#f6f4ff] hover:text-[#38258e]">
-            <Bell size={18} /> Notifications
-          </button>
-        </nav>
-
-        <div className="mt-auto px-4 pb-5">
-          <div className="rounded-2xl border border-[#ded8ff] bg-[#faf9ff] p-4">
-            <div className="flex items-start gap-3">
-              <span className="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-white text-[#5842e8]">
-                <HelpCircle size={18} />
-              </span>
-              <div>
-                <p className="text-xs font-bold">Need Help?</p>
-                <p className="mt-1 text-[11px] leading-5 text-[#7a8295]">Visit our help center or contact support.</p>
-              </div>
-            </div>
-            <button type="button" className="mt-3 w-full rounded-lg border border-[#9d91ff] bg-white px-3 py-2 text-xs font-semibold text-[#5842e8]">
-              Help Center <ArrowRight size={13} className="ml-1 inline" />
-            </button>
-          </div>
-          <button
-            onClick={() => 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]"
-          >
-            <LogOut size={18} /> Sign out
-          </button>
-        </div>
+        <div className="px-5 pt-6"><Link href="/dashboard" className="flex items-center gap-3"><span className="grid h-10 w-10 place-items-center rounded-xl bg-[#39268f] text-white shadow-[0_10px_25px_rgba(57,38,143,0.2)]"><BarChart3 size={21} strokeWidth={2.2} /></span><span className="text-[20px] font-extrabold tracking-[-0.7px]">ClassPulse</span></Link></div>
+        <div className="mx-5 mt-7 flex items-center gap-3 border-b border-[#eeeeeb] pb-6"><span className="grid h-10 w-10 place-items-center rounded-full bg-[#eeeaff] text-sm font-bold text-[#4b36a7]">{initials || "T"}</span><div className="min-w-0"><p className="truncate text-sm font-semibold">{teacherName}</p><p className="text-xs text-[#7a8295]">Faculty</p></div></div>
+        <nav className="mt-5 space-y-1 px-3 text-sm font-medium text-[#626b80]"><Link href="/dashboard" className="flex items-center gap-3 rounded-xl bg-[#eeeaff] px-3 py-3 font-semibold text-[#38258e]"><LayoutDashboard size={18} /> Dashboard</Link><Link href="/attendance-agent" className="flex items-center gap-3 rounded-xl px-3 py-3 transition hover:bg-[#f6f4ff] hover:text-[#38258e]"><UserRoundPlus size={18} /> Attendance Agent</Link><Link href="/timetable" className="flex items-center gap-3 rounded-xl px-3 py-3 transition hover:bg-[#f6f4ff] hover:text-[#38258e]"><CalendarDays size={18} /> Timetable</Link><Link href="/class-analysis" className="flex items-center gap-3 rounded-xl px-3 py-3 transition hover:bg-[#f6f4ff] hover:text-[#38258e]"><BarChart3 size={18} /> Class Analysis</Link><Link href="/subject-analysis" className="flex items-center gap-3 rounded-xl px-3 py-3 transition hover:bg-[#f6f4ff] hover:text-[#38258e]"><BookOpen size={18} /> Subject Analysis</Link><Link href="/raw-data" className="flex items-center gap-3 rounded-xl px-3 py-3 transition hover:bg-[#f6f4ff] hover:text-[#38258e]"><Database size={18} /> Raw Data</Link><button type="button" className="flex w-full items-center gap-3 rounded-xl px-3 py-3 text-left transition hover:bg-[#f6f4ff] hover:text-[#38258e]"><Bell size={18} /> Notifications</button></nav>
+        <div className="mt-auto px-4 pb-5"><div className="rounded-2xl border border-[#ded8ff] bg-[#faf9ff] p-4"><div className="flex items-start gap-3"><span className="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-white text-[#5842e8]"><HelpCircle size={18} /></span><div><p className="text-xs font-bold">Need Help?</p><p className="mt-1 text-[11px] leading-5 text-[#7a8295]">Visit our help center or contact support.</p></div></div><button type="button" className="mt-3 w-full rounded-lg border border-[#9d91ff] bg-white px-3 py-2 text-xs font-semibold text-[#5842e8]">Help Center <ArrowRight size={13} className="ml-1 inline" /></button></div><button onClick={() => 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]"><LogOut size={18} /> Sign out</button></div>
       </aside>
-
-      <main className="w-full lg:ml-[220px]">
-        <div className="mx-auto max-w-[1500px] px-5 py-6 sm:px-8 lg:px-10 lg:py-8">
-          <header className="flex items-start justify-between gap-4">
-            <div>
-              <div className="flex items-center gap-3 lg:hidden">
-                <span className="grid h-10 w-10 place-items-center rounded-xl bg-[#39268f] text-white"><BarChart3 size={20} /></span>
-                <span className="text-lg font-extrabold">ClassPulse</span>
-              </div>
-              <h1 className="mt-5 text-[28px] font-extrabold tracking-[-1.2px] sm:text-[32px] lg:mt-0">Welcome back, {teacherName}</h1>
-              <p className="mt-1 text-sm text-[#6f7890]">Here&apos;s an overview of your day.</p>
-            </div>
-            <div className="flex items-center gap-3">
-              <button type="button" className="relative grid h-11 w-11 place-items-center rounded-xl border border-[#e3e3df] bg-white text-[#566078] shadow-sm">
-                <Bell size={19} />
-                <span className="absolute -right-1 -top-1 grid h-5 w-5 place-items-center rounded-full bg-[#ef4b4b] text-[10px] font-bold text-white">3</span>
-              </button>
-              <div className="hidden items-center gap-2 rounded-xl border border-[#e3e3df] bg-white px-4 py-3 text-sm font-medium text-[#3e465b] shadow-sm sm:flex">
-                <CalendarDays size={17} className="text-[#5b4ee6]" />
-                {new Date().toLocaleDateString("en-IN", { day: "numeric", month: "short", year: "numeric" })}
-              </div>
-              <button type="button" className="grid h-11 w-11 place-items-center rounded-xl border border-[#e3e3df] bg-white text-[#566078] sm:hidden">
-                <Menu size={19} />
-              </button>
-            </div>
-          </header>
-
-          <section className="mt-8 rounded-2xl border border-[#e5e4e1] bg-white p-5 shadow-[0_8px_25px_rgba(31,35,49,0.04)] sm:p-6">
-            <div className="mb-5">
-              <h2 className="text-lg font-bold">Quick Actions</h2>
-              <p className="mt-1 text-xs text-[#7b8498]">Jump straight into the tools you use most.</p>
-            </div>
-            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
-              {quickActions.map((action) => {
-                const Icon = action.icon;
-                const href = action.title === "Class Analysis"
-                  ? sections[0]?.id ? `/section-analysis/${sections[0].id}` : "/section-analysis"
-                  : action.title === "Subject Analysis"
-                    ? "/subject-analysis"
-                    : action.href;
-
-                return (
-                  <Link key={action.title} href={href} className="group flex min-h-[116px] items-center gap-4 rounded-xl border border-[#e6e6e5] bg-white p-4 transition hover:-translate-y-0.5 hover:border-[#d9d2ff] hover:shadow-[0_8px_24px_rgba(57,38,143,0.08)]">
-                    <span className={`grid h-12 w-12 shrink-0 place-items-center rounded-full ${action.tone}`}><Icon size={23} strokeWidth={2} /></span>
-                    <span className="min-w-0 flex-1">
-                      <span className="block text-sm font-bold text-[#17223b]">{action.title}</span>
-                      <span className="mt-1 block text-xs leading-5 text-[#747d91]">{action.description}</span>
-                    </span>
-                    <ArrowRight size={18} className="shrink-0 text-[#626b80] transition group-hover:translate-x-1 group-hover:text-[#4b36a7]" />
-                  </Link>
-                );
-              })}
-            </div>
-          </section>
-
-          <section className="mt-6 grid grid-cols-1 gap-6 xl:grid-cols-[1fr_1.18fr]">
-            <div className="rounded-2xl border border-[#e5e4e1] bg-white shadow-[0_8px_25px_rgba(31,35,49,0.04)]">
-              <div className="flex items-center justify-between border-b border-[#eeeeeb] px-5 py-5 sm:px-6">
-                <div>
-                  <h2 className="text-lg font-bold">Today&apos;s Timetable</h2>
-                  <p className="mt-1 text-xs text-[#7b8498]">Your scheduled classes for today.</p>
-                </div>
-                <Link href="/timetable" className="text-xs font-semibold text-[#5b4ee6] hover:underline">View full timetable <ArrowRight size={13} className="ml-1 inline" /></Link>
-              </div>
-              <div className="p-5 sm:px-6">
-                {todaySchedule.map((item, index) => (
-                  <div key={`${item.time}-${item.subject}`} className="relative flex gap-4 pb-5 last:pb-0">
-                    <div className="flex w-[66px] shrink-0 flex-col text-right text-xs font-medium text-[#667088]">
-                      <span>{item.time}</span>
-                      <span className="mt-1 text-[11px] text-[#9aa1af]">{item.end}</span>
-                    </div>
-                    <div className="relative flex-1 border-b border-[#eeeeeb] pb-5 pl-5 last:border-0">
-                      <span className={`absolute left-0 top-1 h-2.5 w-2.5 -translate-x-1/2 rounded-full ring-4 ring-white ${item.active ? "bg-[#5b4ee6]" : "bg-[#c8c3f5]"}`} />
-                      {index < todaySchedule.length - 1 && <span className="absolute left-0 top-3 h-full w-px -translate-x-1/2 bg-[#ddd9fb]" />}
-                      <p className="text-sm font-bold">{item.subject}</p>
-                      <p className="mt-1 text-xs text-[#737d92]">{item.section} <span className="mx-1">•</span> {item.room}</p>
-                      {item.active && <span className="mt-2 inline-flex items-center gap-1 rounded-full bg-[#f0edff] px-2 py-1 text-[10px] font-semibold text-[#5b4ee6]"><Clock3 size={11} /> Next class</span>}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-
-            <div className="rounded-2xl border border-[#e5e4e1] bg-white shadow-[0_8px_25px_rgba(31,35,49,0.04)]">
-              <div className="flex items-center justify-between border-b border-[#eeeeeb] px-5 py-5 sm:px-6">
-                <div>
-                  <h2 className="text-lg font-bold">Recent Activity</h2>
-                  <p className="mt-1 text-xs text-[#7b8498]">Your latest updates and actions.</p>
-                </div>
-              </div>
-              <div className="divide-y divide-[#eeeeeb] px-5 sm:px-6">
-                {recentActivity.map((activity, index) => {
-                  const Icon = activity.icon;
-                  return (
-                    <div key={`${activity.text}-${index}`} className="flex items-center gap-3 py-4">
-                      <span className={`grid h-9 w-9 shrink-0 place-items-center rounded-full ${activity.tone}`}><Icon size={17} /></span>
-                      <p className="min-w-0 flex-1 text-xs font-medium leading-5 text-[#3f485d]">{activity.text}</p>
-                      <span className="shrink-0 text-[10px] font-medium text-[#8991a2]">{activity.time}</span>
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-          </section>
-
-          <footer className="py-7 text-center text-xs text-[#9aa1af]">© 2026 ClassPulse. All rights reserved.</footer>
-        </div>
-      </main>
+      <main className="w-full lg:ml-[220px]"><div className="mx-auto max-w-[1500px] px-5 py-6 sm:px-8 lg:px-10 lg:py-8"><header className="flex items-start justify-between gap-4"><div><div className="flex items-center gap-3 lg:hidden"><span className="grid h-10 w-10 place-items-center rounded-xl bg-[#39268f] text-white"><BarChart3 size={20} /></span><span className="text-lg font-extrabold">ClassPulse</span></div><h1 className="mt-5 text-[28px] font-extrabold tracking-[-1.2px] sm:text-[32px] lg:mt-0">Welcome back, {teacherName}</h1><p className="mt-1 text-sm text-[#6f7890]">Here&apos;s an overview of your day.</p></div><div className="flex items-center gap-3"><button type="button" className="relative grid h-11 w-11 place-items-center rounded-xl border border-[#e3e3df] bg-white text-[#566078] shadow-sm"><Bell size={19} /><span className="absolute -right-1 -top-1 grid h-5 w-5 place-items-center rounded-full bg-[#ef4b4b] text-[10px] font-bold text-white">3</span></button><div className="hidden items-center gap-2 rounded-xl border border-[#e3e3df] bg-white px-4 py-3 text-sm font-medium text-[#3e465b] shadow-sm sm:flex"><CalendarDays size={17} className="text-[#5b4ee6]" />{new Date().toLocaleDateString("en-IN", { day: "numeric", month: "short", year: "numeric" })}</div><button type="button" className="grid h-11 w-11 place-items-center rounded-xl border border-[#e3e3df] bg-white text-[#566078] sm:hidden"><Menu size={19} /></button></div></header>
+        <section className="mt-8 rounded-2xl border border-[#e5e4e1] bg-white p-5 shadow-[0_8px_25px_rgba(31,35,49,0.04)] sm:p-6"><div className="mb-5"><h2 className="text-lg font-bold">Quick Actions</h2><p className="mt-1 text-xs text-[#7b8498]">Jump straight into the tools you use most.</p></div><div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">{quickActions.map((action) => { const Icon = action.icon; return <Link key={action.title} href={action.href} className="group flex min-h-[116px] items-center gap-4 rounded-xl border border-[#e6e6e5] bg-white p-4 transition hover:-translate-y-0.5 hover:border-[#d9d2ff] hover:shadow-[0_8px_24px_rgba(57,38,143,0.08)]"><span className={`grid h-12 w-12 shrink-0 place-items-center rounded-full ${action.tone}`}><Icon size={23} strokeWidth={2} /></span><span className="min-w-0 flex-1"><span className="block text-sm font-bold text-[#17223b]">{action.title}</span><span className="mt-1 block text-xs leading-5 text-[#747d91]">{action.description}</span></span><ArrowRight size={18} className="shrink-0 text-[#626b80] transition group-hover:translate-x-1 group-hover:text-[#4b36a7]" /></Link>; })}</div></section>
+        <section className="mt-6 grid grid-cols-1 gap-6 xl:grid-cols-[1fr_1.18fr]"><div className="rounded-2xl border border-[#e5e4e1] bg-white shadow-[0_8px_25px_rgba(31,35,49,0.04)]"><div className="flex items-center justify-between border-b border-[#eeeeeb] px-5 py-5 sm:px-6"><div><h2 className="text-lg font-bold">Today&apos;s Timetable</h2><p className="mt-1 text-xs text-[#7b8498]">Your scheduled classes for today.</p></div><Link href="/timetable" className="text-xs font-semibold text-[#5b4ee6] hover:underline">View full timetable <ArrowRight size={13} className="ml-1 inline" /></Link></div><div className="p-5 sm:px-6">{todaySchedule.map((item, index) => <div key={`${item.time}-${item.subject}`} className="relative flex gap-4 pb-5 last:pb-0"><div className="flex w-[66px] shrink-0 flex-col text-right text-xs font-medium text-[#667088]"><span>{item.time}</span><span className="mt-1 text-[11px] text-[#9aa1af]">{item.end}</span></div><div className="relative flex-1 border-b border-[#eeeeeb] pb-5 pl-5 last:border-0"><span className={`absolute left-0 top-1 h-2.5 w-2.5 -translate-x-1/2 rounded-full ring-4 ring-white ${item.active ? "bg-[#5b4ee6]" : "bg-[#c8c3f5]"}`} />{index < todaySchedule.length - 1 && <span className="absolute left-0 top-3 h-full w-px -translate-x-1/2 bg-[#ddd9fb]" />}<p className="text-sm font-bold">{item.subject}</p><p className="mt-1 text-xs text-[#737d92]">{item.section} <span className="mx-1">•</span> {item.room}</p>{item.active && <span className="mt-2 inline-flex items-center gap-1 rounded-full bg-[#f0edff] px-2 py-1 text-[10px] font-semibold text-[#5b4ee6]"><Clock3 size={11} /> Next class</span>}</div></div>)}</div></div>
+        <div className="rounded-2xl border border-[#e5e4e1] bg-white shadow-[0_8px_25px_rgba(31,35,49,0.04)]"><div className="flex items-center justify-between border-b border-[#eeeeeb] px-5 py-5 sm:px-6"><div><h2 className="text-lg font-bold">Recent Activity</h2><p className="mt-1 text-xs text-[#7b8498]">Your latest activity.</p></div></div><div className="divide-y divide-[#eeeeeb]">{recentActivity.map((item) => { const Icon = item.icon; return <div key={item.text} className="flex items-center gap-4 px-5 py-4 sm:px-6"><span className={`grid h-9 w-9 shrink-0 place-items-center rounded-full ${item.tone}`}><Icon size={17} /></span><div className="min-w-0 flex-1"><p className="truncate text-sm font-medium text-[#31394d]">{item.text}</p><p className="mt-1 text-[11px] text-[#8a92a3]">{item.time}</p></div></div>; })}</div></div></section>
+      </div></main>
     </div>
   );
 }
 
 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;
-
-  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 } };
 };

From 36818094422d2de5815402eb90fc6176c87550d3 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sun, 30 Aug 2026 18:36:10 +0530
Subject: [PATCH 33/80] Restore existing Class Analysis experience after
 selector

---
 pages/class-analysis/[classId].tsx | 99 +++++-------------------------
 1 file changed, 16 insertions(+), 83 deletions(-)

diff --git a/pages/class-analysis/[classId].tsx b/pages/class-analysis/[classId].tsx
index dccc470..109405e 100644
--- a/pages/class-analysis/[classId].tsx
+++ b/pages/class-analysis/[classId].tsx
@@ -1,87 +1,20 @@
-import { useEffect, useState } from "react";
-import { useRouter } from "next/router";
-import Link from "next/link";
+import { GetServerSideProps } from "next";
 
-interface ClassAnalysisResponse {
-  className: string;
-  totalStudents: number;
-  subjects: {
-    subjectId: string;
-    subjectName: string;
-    section: string;
-    classAverage: number | null;
-    passRate: number | null;
-    computedAt: string | null;
-  }[];
-}
-
-export default function ClassAnalysisPage() {
-  const router = useRouter();
-  const { classId } = router.query;
-  const [data, setData] = useState<ClassAnalysisResponse | null>(null);
-  const [error, setError] = useState("");
-
-  useEffect(() => {
-    if (!classId) return;
-    fetch(`/api/analysis/class/${classId}`)
-      .then(async (res) => {
-        const json = await res.json();
-        if (!res.ok) throw new Error(json.error);
-        setData(json);
-      })
-      .catch((e) => setError(e.message));
-  }, [classId]);
-
-  return (
-    <div className="min-h-screen max-w-5xl mx-auto px-6 py-10">
-      <h1 className="text-lg font-semibold text-gray-900 mb-1">Class Analysis</h1>
-      {data && <p className="text-sm text-gray-500 mb-6">{data.className} · {data.totalStudents} students</p>}
+// Class selection uses the new /class-analysis page, but the existing
+// class-analysis experience remains under /section-analysis/[sectionId].
+// Keep this route as a compatibility redirect so the existing analysis UI
+// and its Attendance / Academic / Overall / Student Report tabs are preserved.
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const { classId } = ctx.params as { classId: string };
 
-      {error && (
-        <div className="bg-red-50 border border-red-100 text-red-700 text-sm rounded-lg p-4 mb-6">
-          {error}
-        </div>
-      )}
+  return {
+    redirect: {
+      destination: `/section-analysis/${classId}/attendance`,
+      permanent: false,
+    },
+  };
+};
 
-      {data && (
-        <div className="bg-white rounded-2xl border border-gray-100 overflow-hidden">
-          <table className="w-full text-sm">
-            <thead>
-              <tr className="text-left text-gray-400 border-b border-gray-100">
-                <th className="py-3 px-4">Subject</th>
-                <th className="py-3 px-4">Section</th>
-                <th className="py-3 px-4">Class Average</th>
-                <th className="py-3 px-4">Pass Rate</th>
-                <th className="py-3 px-4">Last Synced</th>
-                <th className="py-3 px-4"></th>
-              </tr>
-            </thead>
-            <tbody>
-              {data.subjects.map((s) => (
-                <tr key={s.subjectId} className="border-b border-gray-50">
-                  <td className="py-3 px-4 text-gray-900">{s.subjectName}</td>
-                  <td className="py-3 px-4 text-gray-500">{s.section}</td>
-                  <td className="py-3 px-4">
-                    {s.classAverage !== null ? `${s.classAverage}%` : "—"}
-                  </td>
-                  <td className="py-3 px-4">{s.passRate !== null ? `${s.passRate}%` : "—"}</td>
-                  <td className="py-3 px-4 text-gray-400">
-                    {s.computedAt ? new Date(s.computedAt).toLocaleDateString() : "Never"}
-                  </td>
-                  <td className="py-3 px-4">
-                    <Link
-                      href={`/subject-analysis/${s.subjectId}`}
-                      className="text-gray-900 underline"
-                    >
-                      View →
-                    </Link>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      )}
-    </div>
-  );
+export default function ClassAnalysisRedirect() {
+  return null;
 }

From c49b117b4957df13231979b10070620d609e04cf Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sun, 30 Aug 2026 18:51:06 +0530
Subject: [PATCH 34/80] Fix class analysis routing to existing section analysis

---
 pages/class-analysis/[classId].tsx | 60 +++++++++++++++++++++++++++---
 1 file changed, 54 insertions(+), 6 deletions(-)

diff --git a/pages/class-analysis/[classId].tsx b/pages/class-analysis/[classId].tsx
index 109405e..b6a4fb7 100644
--- a/pages/class-analysis/[classId].tsx
+++ b/pages/class-analysis/[classId].tsx
@@ -1,15 +1,63 @@
 import { GetServerSideProps } from "next";
+import { getServerSession } from "next-auth/next";
+import { authOptions } from "../../lib/authOptions";
+import { prisma } from "../../lib/prisma";
 
-// Class selection uses the new /class-analysis page, but the existing
-// class-analysis experience remains under /section-analysis/[sectionId].
-// Keep this route as a compatibility redirect so the existing analysis UI
-// and its Attendance / Academic / Overall / Student Report tabs are preserved.
+// The selector is class-based, while the existing analysis implementation is
+// section-based internally. A ClassPulse "class" currently maps to its
+// assigned section (for example ECE-2 Sem 7 -> section 2 of that class).
+// Resolve that section here and hand off to the existing analysis UI.
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
-  const { classId } = ctx.params as { classId: string };
+  const classId = typeof ctx.params?.classId === "string" ? ctx.params.classId : "";
+
+  const session = await getServerSession(ctx.req, ctx.res, authOptions);
+  if (!session?.user) {
+    return { redirect: { destination: "/login", permanent: false } };
+  }
+
+  if (!classId) {
+    return { notFound: true };
+  }
+
+  const userId = (session.user as any).id as string;
+  const role = (session.user as any).role as string;
+
+  const cls = await prisma.class.findUnique({
+    where: { id: classId },
+    include: {
+      sections: {
+        orderBy: { name: "asc" },
+        select: { id: true },
+      },
+    },
+  });
+
+  if (!cls || cls.sections.length === 0) {
+    return { notFound: true };
+  }
+
+  // Match the same access rules used by the existing section analysis:
+  // admin, class proctor, or teacher assigned to a subject in this class.
+  if (role !== "ADMIN") {
+    const isProctor = cls.proctorId === userId;
+    const teachesInClass = await prisma.assignment.findFirst({
+      where: {
+        teacherId: userId,
+        subject: { section: { classId } },
+      },
+      select: { id: true },
+    });
+
+    if (!isProctor && !teachesInClass) {
+      return { notFound: true };
+    }
+  }
+
+  const sectionId = cls.sections[0].id;
 
   return {
     redirect: {
-      destination: `/section-analysis/${classId}/attendance`,
+      destination: `/section-analysis/${sectionId}/attendance`,
       permanent: false,
     },
   };

From 33604893edef425cf454e62b7f249ca544155db6 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sun, 30 Aug 2026 18:54:50 +0530
Subject: [PATCH 35/80] Fix Class Analysis section routing and authorization

---
 pages/class-analysis/[classId].tsx | 64 +++++++++++++++---------------
 1 file changed, 33 insertions(+), 31 deletions(-)

diff --git a/pages/class-analysis/[classId].tsx b/pages/class-analysis/[classId].tsx
index b6a4fb7..603e92e 100644
--- a/pages/class-analysis/[classId].tsx
+++ b/pages/class-analysis/[classId].tsx
@@ -3,10 +3,10 @@ import { getServerSession } from "next-auth/next";
 import { authOptions } from "../../lib/authOptions";
 import { prisma } from "../../lib/prisma";
 
-// The selector is class-based, while the existing analysis implementation is
-// section-based internally. A ClassPulse "class" currently maps to its
-// assigned section (for example ECE-2 Sem 7 -> section 2 of that class).
-// Resolve that section here and hand off to the existing analysis UI.
+// Class Analysis is a class-level entry point into the existing section-based
+// analysis UI. A class can contain multiple sections, so never blindly pick
+// the first section: resolve the section the signed-in user is actually
+// allowed to view.
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const classId = typeof ctx.params?.classId === "string" ? ctx.params.classId : "";
 
@@ -22,42 +22,44 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const userId = (session.user as any).id as string;
   const role = (session.user as any).role as string;
 
-  const cls = await prisma.class.findUnique({
-    where: { id: classId },
-    include: {
-      sections: {
-        orderBy: { name: "asc" },
-        select: { id: true },
+  if (role === "ADMIN") {
+    const section = await prisma.section.findFirst({
+      where: { classId },
+      orderBy: { name: "asc" },
+      select: { id: true },
+    });
+
+    if (!section) return { notFound: true };
+
+    return {
+      redirect: {
+        destination: `/section-analysis/${section.id}/attendance`,
+        permanent: false,
       },
+    };
+  }
+
+  // Prefer a section the teacher teaches. This is important when a class has
+  // multiple sections: the section-analysis API enforces section-level access.
+  const assignedSection = await prisma.section.findFirst({
+    where: {
+      classId,
+      OR: [
+        { class: { proctorId: userId } },
+        { subjects: { some: { assignments: { some: { teacherId: userId } } } } },
+      ],
     },
+    orderBy: { name: "asc" },
+    select: { id: true },
   });
 
-  if (!cls || cls.sections.length === 0) {
+  if (!assignedSection) {
     return { notFound: true };
   }
 
-  // Match the same access rules used by the existing section analysis:
-  // admin, class proctor, or teacher assigned to a subject in this class.
-  if (role !== "ADMIN") {
-    const isProctor = cls.proctorId === userId;
-    const teachesInClass = await prisma.assignment.findFirst({
-      where: {
-        teacherId: userId,
-        subject: { section: { classId } },
-      },
-      select: { id: true },
-    });
-
-    if (!isProctor && !teachesInClass) {
-      return { notFound: true };
-    }
-  }
-
-  const sectionId = cls.sections[0].id;
-
   return {
     redirect: {
-      destination: `/section-analysis/${sectionId}/attendance`,
+      destination: `/section-analysis/${assignedSection.id}/attendance`,
       permanent: false,
     },
   };

From 318c692b99a05c772e9bc57b8a2a9b4c691db6dc Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sun, 30 Aug 2026 19:00:21 +0530
Subject: [PATCH 36/80] Restore working section analysis route

---
 pages/section-analysis/[sectionId].tsx | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/pages/section-analysis/[sectionId].tsx b/pages/section-analysis/[sectionId].tsx
index ea807bd..93616a0 100644
--- a/pages/section-analysis/[sectionId].tsx
+++ b/pages/section-analysis/[sectionId].tsx
@@ -1,13 +1,18 @@
 import { GetServerSideProps } from "next";
 
-// Legacy class-analysis URLs must go through the assigned-class selector.
-// This prevents dashboard/bookmark links from bypassing teacher-scoped selection.
-export const getServerSideProps: GetServerSideProps = async () => ({
-  redirect: {
-    destination: "/section-analysis",
-    permanent: false,
-  },
-});
+// The bare /section-analysis/[sectionId] URL isn't a page on its own —
+// analysis lives under /attendance, /academic, /overall, /students.
+// This just sends anyone landing here (dashboard links, bookmarks, etc.)
+// straight to the default tab.
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const { sectionId } = ctx.params as { sectionId: string };
+  return {
+    redirect: {
+      destination: `/section-analysis/${sectionId}/attendance`,
+      permanent: false,
+    },
+  };
+};
 
 export default function SectionAnalysisRedirect() {
   return null;

From a83139087d38dccfe26978563e2c20786f8de2b1 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sun, 30 Aug 2026 19:01:01 +0530
Subject: [PATCH 37/80] Route class analysis to authorized section

---
 pages/class-analysis/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/class-analysis/index.tsx b/pages/class-analysis/index.tsx
index e808e41..e19a281 100644
--- a/pages/class-analysis/index.tsx
+++ b/pages/class-analysis/index.tsx
@@ -27,7 +27,7 @@ export default function ClassAnalysisIndex({ classes, teacherName }: Props) {
       <main className="w-full lg:ml-[220px]"><div className="relative min-h-screen overflow-hidden"><div className="pointer-events-none absolute right-0 top-0 h-[330px] w-[650px] opacity-70" style={{ background: "radial-gradient(circle at 70% 20%, rgba(111,91,231,.16), transparent 48%), linear-gradient(145deg, transparent 35%, rgba(111,91,231,.07) 75%, transparent)" }} /><div className="relative mx-auto max-w-[1200px] px-5 py-8 sm:px-8 lg:px-12 lg:py-12">
         <Link href="/dashboard" className="inline-flex items-center gap-2 text-sm font-semibold text-[#5b4ee6] hover:underline"><ArrowLeft size={16} /> Back to Dashboard</Link>
         <div className="mt-8"><p className="text-sm font-semibold text-[#5b4ee6]">Class Analysis</p><h1 className="mt-2 text-[34px] font-extrabold tracking-[-1.4px] sm:text-[40px]">Choose a class</h1><p className="mt-2 max-w-[650px] text-sm leading-6 text-[#6f7890]">Select a class assigned to you to open its analysis.</p></div>
-        <section className="mt-8 min-h-[430px] rounded-2xl border border-[#e5e4e1] bg-white p-6 shadow-[0_8px_30px_rgba(31,35,49,0.05)] sm:p-8"><div className="space-y-3">{classes.map((classOption) => <Link key={classOption.id} href={`/class-analysis/${classOption.id}`} className="group flex items-center gap-4 rounded-xl border border-[#e4e4e8] bg-white px-5 py-4 transition hover:-translate-y-0.5 hover:border-[#cfc7ff] hover:bg-[#fcfbff] hover:shadow-[0_8px_24px_rgba(57,38,143,0.08)]"><span className="grid h-12 w-12 shrink-0 place-items-center rounded-full bg-[#f0edff] text-[#6b55df]"><BookOpen size={21} /></span><span className="min-w-0 flex-1"><span className="block text-[16px] font-bold text-[#17223b]">{classOption.label}</span><span className="mt-1 block text-xs text-[#7a8295]">Open attendance, academic and student analysis</span></span><ArrowRight size={19} className="text-[#747d91] transition group-hover:translate-x-1 group-hover:text-[#4b36a7]" /></Link>)}{!classes.length && <div className="rounded-xl border border-dashed border-[#dfe2e8] bg-[#fafafa] p-6 text-sm text-[#747d91]">No classes are assigned to you.</div>}</div></section>
+        <section className="mt-8 min-h-[430px] rounded-2xl border border-[#e5e4e1] bg-white p-6 shadow-[0_8px_30px_rgba(31,35,49,0.05)] sm:p-8"><div className="space-y-3">{classes.map((classOption) => <Link key={classOption.id} href={`/section-analysis/${classOption.id}/attendance`} className="group flex items-center gap-4 rounded-xl border border-[#e4e4e8] bg-white px-5 py-4 transition hover:-translate-y-0.5 hover:border-[#cfc7ff] hover:bg-[#fcfbff] hover:shadow-[0_8px_24px_rgba(57,38,143,0.08)]"><span className="grid h-12 w-12 shrink-0 place-items-center rounded-full bg-[#f0edff] text-[#6b55df]"><BookOpen size={21} /></span><span className="min-w-0 flex-1"><span className="block text-[16px] font-bold text-[#17223b]">{classOption.label}</span><span className="mt-1 block text-xs text-[#7a8295]">Open attendance, academic and student analysis</span></span><ArrowRight size={19} className="text-[#747d91] transition group-hover:translate-x-1 group-hover:text-[#4b36a7]" /></Link>)}{!classes.length && <div className="rounded-xl border border-dashed border-[#dfe2e8] bg-[#fafafa] p-6 text-sm text-[#747d91]">No classes are assigned to you.</div>}</div></section>
       </div></div></main>
     </div>
   );
@@ -39,6 +39,6 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
   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 classes = new Map<string, ClassOption>();
-  for (const section of sections) classes.set(section.class.id, { id: section.class.id, label: formatClassLabel(section.class.department.name, section.class.semester, section.name) });
+  for (const section of sections) classes.set(section.class.id, { id: section.id, label: formatClassLabel(section.class.department.name, section.class.semester, section.name) });
   return { props: { classes: Array.from(classes.values()), teacherName: session.user.name || session.user.email } };
 };

From c31f65b44e1ba049976c94584d3f55516ab4fa9f Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sun, 30 Aug 2026 19:07:08 +0530
Subject: [PATCH 38/80] Resolve class and section IDs for analysis access

---
 pages/api/analysis/section/[sectionId].ts | 181 ++++++----------------
 1 file changed, 44 insertions(+), 137 deletions(-)

diff --git a/pages/api/analysis/section/[sectionId].ts b/pages/api/analysis/section/[sectionId].ts
index 57f680f..fbe1cf1 100644
--- a/pages/api/analysis/section/[sectionId].ts
+++ b/pages/api/analysis/section/[sectionId].ts
@@ -1,119 +1,54 @@
-import {
-  NextApiRequest,
-  NextApiResponse,
-} from "next";
-
+import { NextApiRequest, NextApiResponse } from "next";
 import { prisma } from "../../../../lib/prisma";
+import { requireSession, assertTeacherCanViewSection } from "../../../../lib/access";
+import { fetchClassRawData } from "../../../../lib/googleSheetsClass";
+import { computeSectionAnalysis } from "../../../../lib/analysisClass";
 
-import {
-  requireSession,
-  assertTeacherCanViewSection,
-} from "../../../../lib/access";
-
-import {
-  fetchClassRawData,
-} from "../../../../lib/googleSheetsClass";
-
-import {
-  computeSectionAnalysis,
-} from "../../../../lib/analysisClass";
-
-export default async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse
-) {
-  const session = await requireSession(
-    req,
-    res
-  );
-
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const session = await requireSession(req, res);
   if (!session) return;
 
-  const sectionId =
-    req.query.sectionId as string;
-
-  const userId =
-    (session.user as any).id;
-
-  const role =
-    (session.user as any).role;
+  const requestedId = req.query.sectionId as string;
+  const userId = (session.user as any).id;
+  const role = (session.user as any).role;
 
-  const allowed =
-    await assertTeacherCanViewSection(
-      userId,
-      role,
-      sectionId
-    );
+  // The analysis UI is section-based, but older dashboard/class-analysis links
+  // used a class id. Resolve either form here so navigation cannot break access.
+  const section = await prisma.section.findUnique({ where: { id: requestedId } });
+  const resolvedSection = section || await prisma.section.findFirst({ where: { classId: requestedId } });
+  if (!resolvedSection) {
+    return res.status(404).json({ error: "Section not found" });
+  }
+  const sectionId = resolvedSection.id;
 
+  const allowed = await assertTeacherCanViewSection(userId, role, sectionId);
   if (!allowed) {
-    return res.status(403).json({
-      error:
-        "Not authorized for this section",
-    });
+    return res.status(403).json({ error: "Not authorized for this section" });
   }
 
-  const forceSync =
-    req.query.sync === "1";
-
-  const previousMonth =
-    typeof req.query.previousMonth ===
-    "string"
-      ? req.query.previousMonth
-      : undefined;
-
-  const currentMonth =
-    typeof req.query.currentMonth ===
-    "string"
-      ? req.query.currentMonth
-      : undefined;
+  const forceSync = req.query.sync === "1";
+  const previousMonth = typeof req.query.previousMonth === "string" ? req.query.previousMonth : undefined;
+  const currentMonth = typeof req.query.currentMonth === "string" ? req.query.currentMonth : undefined;
 
-  // Accept both names so the frontend and API
-  // cannot get out of sync again.
   const criteriaValue =
     typeof req.query.criteria === "string"
       ? req.query.criteria
-      : typeof req.query.trendCriteria ===
-        "string"
-      ? req.query.trendCriteria
-      : undefined;
-
-  const criteria =
-    criteriaValue !== undefined
-      ? Number(criteriaValue)
-      : undefined;
-
-  const hasCustomTrendSettings =
-    previousMonth !== undefined ||
-    currentMonth !== undefined ||
-    criteria !== undefined;
-
-  const link =
-    await prisma.sheetLink.findUnique({
-      where: { sectionId },
-    });
+      : typeof req.query.trendCriteria === "string"
+        ? req.query.trendCriteria
+        : undefined;
+  const criteria = criteriaValue !== undefined ? Number(criteriaValue) : undefined;
+  const hasCustomTrendSettings = previousMonth !== undefined || currentMonth !== undefined || criteria !== undefined;
 
+  const link = await prisma.sheetLink.findUnique({ where: { sectionId } });
   if (!link) {
-    return res.status(404).json({
-      error:
-        "No combined Google Sheet linked to this section yet",
-    });
+    return res.status(404).json({ error: "No combined Google Sheet linked to this section yet" });
   }
 
-  // Use cache only for the ordinary overview request.
-  // Custom month comparisons always calculate from
-  // the latest Google Sheet data.
-  if (
-    !forceSync &&
-    !hasCustomTrendSettings
-  ) {
-    const latest =
-      await prisma.analysisSnapshot.findFirst({
-        where: { sectionId },
-        orderBy: {
-          computedAt: "desc",
-        },
-      });
-
+  if (!forceSync && !hasCustomTrendSettings) {
+    const latest = await prisma.analysisSnapshot.findFirst({
+      where: { sectionId },
+      orderBy: { computedAt: "desc" },
+    });
     if (latest) {
       return res.status(200).json({
         cached: true,
@@ -125,52 +60,24 @@ export default async function handler(
   }
 
   try {
-    const raw =
-      await fetchClassRawData(
-        link.sheetId
-      );
-
-    const analysis =
-      computeSectionAnalysis(raw, {
-        previousMonth,
-        currentMonth,
-        criteria,
-      });
-
-    const snapshot =
-      await prisma.analysisSnapshot.create({
-        data: {
-          sectionId,
-          data: analysis as any,
-        },
-      });
-
-    await prisma.sheetLink.update({
-      where: { sectionId },
-      data: {
-        lastSyncAt: new Date(),
-      },
+    const raw = await fetchClassRawData(link.sheetId);
+    const analysis = computeSectionAnalysis(raw, { previousMonth, currentMonth, criteria });
+    const snapshot = await prisma.analysisSnapshot.create({
+      data: { sectionId, data: analysis as any },
     });
+    await prisma.sheetLink.update({ where: { sectionId }, data: { lastSyncAt: new Date() } });
 
     return res.status(200).json({
       cached: false,
-      computedAt:
-        snapshot.computedAt,
+      computedAt: snapshot.computedAt,
       sheetId: link.sheetId,
       data: analysis,
     });
   } catch (err: any) {
-    console.error(
-      "Section analysis sync failed:",
-      err
-    );
-
+    console.error("Section analysis sync failed:", err);
     return res.status(502).json({
-      error:
-        "Failed to sync from Google Sheets.",
-      detail:
-        err?.message ||
-        "Unknown Google Sheets error.",
+      error: "Failed to sync from Google Sheets.",
+      detail: err?.message || "Unknown Google Sheets error.",
     });
   }
-}
\ No newline at end of file
+}

From ae1862baed47e9d3e344df42b1635d56dc8e1f36 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sun, 30 Aug 2026 19:23:29 +0530
Subject: [PATCH 39/80] style class analysis like subject analysis shell

---
 components/AnalysisNav.tsx | 184 +++++++++++++++++++++++++++++++++----
 1 file changed, 165 insertions(+), 19 deletions(-)

diff --git a/components/AnalysisNav.tsx b/components/AnalysisNav.tsx
index e345a09..a85b571 100644
--- a/components/AnalysisNav.tsx
+++ b/components/AnalysisNav.tsx
@@ -1,5 +1,16 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { signOut } from "next-auth/react";
+import {
+  BarChart3,
+  BookOpen,
+  Database,
+  LayoutDashboard,
+  LogOut,
+  RefreshCw,
+  GraduationCap,
+  FileText,
+} from "lucide-react";
 
 type Props = {
   sectionId: string;
@@ -12,40 +23,175 @@ export default function AnalysisNav({ sectionId }: Props) {
     {
       label: "Attendance",
       href: `/section-analysis/${sectionId}/attendance`,
+      icon: BarChart3,
     },
     {
       label: "Academic",
       href: `/section-analysis/${sectionId}/academic`,
+      icon: GraduationCap,
     },
     {
       label: "Overall",
       href: `/section-analysis/${sectionId}/overall`,
+      icon: LayoutDashboard,
     },
     {
       label: "Student Report",
       href: `/section-analysis/${sectionId}/students`,
+      icon: FileText,
     },
   ];
 
+  const sidebarItems = [
+    { label: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
+    { label: "Class Analysis", href: "/class-analysis", icon: BarChart3 },
+    { label: "Subject Analysis", href: "/subject-analysis", icon: BookOpen },
+    { label: "Raw Data", href: "/raw-data", icon: Database },
+  ];
+
+  const initials = "F";
+
   return (
-    <nav className="flex gap-1 border-b border-gray-200 mb-8 overflow-x-auto">
-      {items.map((item) => {
-        const active = router.asPath === item.href;
-
-        return (
-          <Link
-            key={item.href}
-            href={item.href}
-            className={`px-4 py-3 text-sm whitespace-nowrap border-b-2 transition-colors ${
-              active
-                ? "border-gray-900 text-gray-900 font-medium"
-                : "border-transparent text-gray-500 hover:text-gray-900"
-            }`}
-          >
-            {item.label}
+    <>
+      <aside className="classpulse-analysis-sidebar fixed inset-y-0 left-0 z-50 hidden w-[220px] shrink-0 flex-col border-r border-[#e7e5e1] bg-white lg:flex">
+        <div className="px-5 pt-6">
+          <Link href="/dashboard" className="flex items-center gap-3">
+            <span className="grid h-10 w-10 place-items-center rounded-xl bg-[#3b2992] text-white shadow-[0_10px_25px_rgba(59,41,146,0.20)]">
+              <BarChart3 size={21} strokeWidth={2.2} />
+            </span>
+            <span className="text-[20px] font-extrabold tracking-[-0.7px] text-[#17223b]">ClassPulse</span>
           </Link>
-        );
-      })}
-    </nav>
+        </div>
+
+        <nav className="mt-8 space-y-1 px-3 text-sm font-medium text-[#626b80]">
+          {sidebarItems.map((item) => {
+            const Icon = item.icon;
+            const active = item.href === "/class-analysis";
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={`flex items-center gap-3 rounded-xl px-3 py-3 transition-colors ${
+                  active
+                    ? "bg-[#eeeaff] font-semibold text-[#38258e]"
+                    : "hover:bg-[#f6f4ff] hover:text-[#38258e]"
+                }`}
+              >
+                <Icon size={18} />
+                {item.label}
+              </Link>
+            );
+          })}
+        </nav>
+
+        <div className="mt-auto">
+          <div className="mx-4 border-t border-[#eeeeeb] py-4">
+            <div className="flex items-center gap-3 px-2">
+              <span className="grid h-9 w-9 place-items-center rounded-full bg-[#eeeaff] text-xs font-bold text-[#4b36a7]">
+                {initials}
+              </span>
+              <div className="min-w-0">
+                <p className="truncate text-xs font-semibold text-[#17223b]">Faculty</p>
+                <p className="text-[11px] text-[#8991a2]">Teacher Portal</p>
+              </div>
+            </div>
+          </div>
+          <button
+            onClick={() => signOut({ callbackUrl: "/login" })}
+            className="mx-4 mb-4 flex w-[calc(100%-2rem)] items-center gap-3 rounded-xl px-3 py-2.5 text-xs font-medium text-[#626b80] transition-colors hover:bg-[#f6f4ff] hover:text-[#38258e]"
+          >
+            <LogOut size={16} />
+            Sign out
+          </button>
+        </div>
+      </aside>
+
+      <nav className="mb-8 flex overflow-x-auto rounded-2xl border border-[#ddd9ee] bg-white/90 p-1.5 shadow-[0_8px_24px_rgba(31,35,49,0.05)] backdrop-blur">
+        {items.map((item) => {
+          const Icon = item.icon;
+          const active = router.asPath === item.href;
+
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={`flex items-center gap-2 whitespace-nowrap rounded-xl px-5 py-3 text-sm transition-colors ${
+                active
+                  ? "bg-[#eeeaff] font-semibold text-[#38258e] shadow-[inset_0_0_0_1px_rgba(91,78,230,.16)]"
+                  : "text-[#626b80] hover:bg-[#f7f5ff] hover:text-[#38258e]"
+              }`}
+            >
+              <Icon size={17} />
+              {item.label}
+            </Link>
+          );
+        })}
+      </nav>
+
+      <style jsx global>{`
+        body:has(.classpulse-analysis-sidebar) {
+          background: #f7f6f2 !important;
+          color: #17223b;
+        }
+
+        body:has(.classpulse-analysis-sidebar) #__next {
+          padding-left: 220px;
+        }
+
+        body:has(.classpulse-analysis-sidebar) main > div {
+          max-width: none !important;
+          margin: 0 !important;
+          min-height: 100vh;
+          padding: 34px 38px 48px !important;
+          background:
+            radial-gradient(circle at 82% 5%, rgba(91, 78, 230, 0.09), transparent 27%),
+            linear-gradient(135deg, #fbfaf7 0%, #f7f6f2 58%, #f2f4f6 100%);
+        }
+
+        body:has(.classpulse-analysis-sidebar) main section.bg-white {
+          border: 1px solid #e1e3ea !important;
+          border-radius: 18px !important;
+          box-shadow: 0 8px 28px rgba(31, 35, 49, 0.055) !important;
+        }
+
+        body:has(.classpulse-analysis-sidebar) main .bg-gray-900 {
+          background: #30227d !important;
+        }
+
+        body:has(.classpulse-analysis-sidebar) main .bg-gray-100 {
+          background: #f5f4f8 !important;
+        }
+
+        body:has(.classpulse-analysis-sidebar) main .border-gray-100,
+        body:has(.classpulse-analysis-sidebar) main .border-gray-200 {
+          border-color: #e5e3ea !important;
+        }
+
+        body:has(.classpulse-analysis-sidebar) main input,
+        body:has(.classpulse-analysis-sidebar) main select,
+        body:has(.classpulse-analysis-sidebar) main textarea {
+          border-color: #dfe1e8;
+          border-radius: 11px;
+        }
+
+        body:has(.classpulse-analysis-sidebar) main input:focus,
+        body:has(.classpulse-analysis-sidebar) main select:focus,
+        body:has(.classpulse-analysis-sidebar) main textarea:focus {
+          outline: none;
+          border-color: #6b5be7;
+          box-shadow: 0 0 0 3px rgba(107, 91, 231, 0.10);
+        }
+
+        @media (max-width: 1023px) {
+          body:has(.classpulse-analysis-sidebar) #__next {
+            padding-left: 0;
+          }
+
+          body:has(.classpulse-analysis-sidebar) main > div {
+            padding: 24px 20px 36px !important;
+          }
+        }
+      `}</style>
+    </>
   );
-}
\ No newline at end of file
+}

From 9dd4ed6d374c50dcf032bb18fbd9be16d109e080 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sun, 30 Aug 2026 19:23:43 +0530
Subject: [PATCH 40/80] remove unused analysis nav import

---
 components/AnalysisNav.tsx | 92 +++++++-------------------------------
 1 file changed, 17 insertions(+), 75 deletions(-)

diff --git a/components/AnalysisNav.tsx b/components/AnalysisNav.tsx
index a85b571..dceb4e0 100644
--- a/components/AnalysisNav.tsx
+++ b/components/AnalysisNav.tsx
@@ -7,7 +7,6 @@ import {
   Database,
   LayoutDashboard,
   LogOut,
-  RefreshCw,
   GraduationCap,
   FileText,
 } from "lucide-react";
@@ -20,26 +19,10 @@ export default function AnalysisNav({ sectionId }: Props) {
   const router = useRouter();
 
   const items = [
-    {
-      label: "Attendance",
-      href: `/section-analysis/${sectionId}/attendance`,
-      icon: BarChart3,
-    },
-    {
-      label: "Academic",
-      href: `/section-analysis/${sectionId}/academic`,
-      icon: GraduationCap,
-    },
-    {
-      label: "Overall",
-      href: `/section-analysis/${sectionId}/overall`,
-      icon: LayoutDashboard,
-    },
-    {
-      label: "Student Report",
-      href: `/section-analysis/${sectionId}/students`,
-      icon: FileText,
-    },
+    { label: "Attendance", href: `/section-analysis/${sectionId}/attendance`, icon: BarChart3 },
+    { label: "Academic", href: `/section-analysis/${sectionId}/academic`, icon: GraduationCap },
+    { label: "Overall", href: `/section-analysis/${sectionId}/overall`, icon: LayoutDashboard },
+    { label: "Student Report", href: `/section-analysis/${sectionId}/students`, icon: FileText },
   ];
 
   const sidebarItems = [
@@ -49,8 +32,6 @@ export default function AnalysisNav({ sectionId }: Props) {
     { label: "Raw Data", href: "/raw-data", icon: Database },
   ];
 
-  const initials = "F";
-
   return (
     <>
       <aside className="classpulse-analysis-sidebar fixed inset-y-0 left-0 z-50 hidden w-[220px] shrink-0 flex-col border-r border-[#e7e5e1] bg-white lg:flex">
@@ -72,9 +53,7 @@ export default function AnalysisNav({ sectionId }: Props) {
                 key={item.href}
                 href={item.href}
                 className={`flex items-center gap-3 rounded-xl px-3 py-3 transition-colors ${
-                  active
-                    ? "bg-[#eeeaff] font-semibold text-[#38258e]"
-                    : "hover:bg-[#f6f4ff] hover:text-[#38258e]"
+                  active ? "bg-[#eeeaff] font-semibold text-[#38258e]" : "hover:bg-[#f6f4ff] hover:text-[#38258e]"
                 }`}
               >
                 <Icon size={18} />
@@ -87,9 +66,7 @@ export default function AnalysisNav({ sectionId }: Props) {
         <div className="mt-auto">
           <div className="mx-4 border-t border-[#eeeeeb] py-4">
             <div className="flex items-center gap-3 px-2">
-              <span className="grid h-9 w-9 place-items-center rounded-full bg-[#eeeaff] text-xs font-bold text-[#4b36a7]">
-                {initials}
-              </span>
+              <span className="grid h-9 w-9 place-items-center rounded-full bg-[#eeeaff] text-xs font-bold text-[#4b36a7]">F</span>
               <div className="min-w-0">
                 <p className="truncate text-xs font-semibold text-[#17223b]">Faculty</p>
                 <p className="text-[11px] text-[#8991a2]">Teacher Portal</p>
@@ -110,7 +87,6 @@ export default function AnalysisNav({ sectionId }: Props) {
         {items.map((item) => {
           const Icon = item.icon;
           const active = router.asPath === item.href;
-
           return (
             <Link
               key={item.href}
@@ -129,67 +105,33 @@ export default function AnalysisNav({ sectionId }: Props) {
       </nav>
 
       <style jsx global>{`
-        body:has(.classpulse-analysis-sidebar) {
-          background: #f7f6f2 !important;
-          color: #17223b;
-        }
-
-        body:has(.classpulse-analysis-sidebar) #__next {
-          padding-left: 220px;
-        }
-
+        body:has(.classpulse-analysis-sidebar) { background: #f7f6f2 !important; color: #17223b; }
+        body:has(.classpulse-analysis-sidebar) #__next { padding-left: 220px; }
         body:has(.classpulse-analysis-sidebar) main > div {
           max-width: none !important;
           margin: 0 !important;
           min-height: 100vh;
           padding: 34px 38px 48px !important;
-          background:
-            radial-gradient(circle at 82% 5%, rgba(91, 78, 230, 0.09), transparent 27%),
-            linear-gradient(135deg, #fbfaf7 0%, #f7f6f2 58%, #f2f4f6 100%);
+          background: radial-gradient(circle at 82% 5%, rgba(91,78,230,.09), transparent 27%), linear-gradient(135deg, #fbfaf7 0%, #f7f6f2 58%, #f2f4f6 100%);
         }
-
         body:has(.classpulse-analysis-sidebar) main section.bg-white {
           border: 1px solid #e1e3ea !important;
           border-radius: 18px !important;
-          box-shadow: 0 8px 28px rgba(31, 35, 49, 0.055) !important;
+          box-shadow: 0 8px 28px rgba(31,35,49,.055) !important;
         }
-
-        body:has(.classpulse-analysis-sidebar) main .bg-gray-900 {
-          background: #30227d !important;
-        }
-
-        body:has(.classpulse-analysis-sidebar) main .bg-gray-100 {
-          background: #f5f4f8 !important;
-        }
-
+        body:has(.classpulse-analysis-sidebar) main .bg-gray-900 { background: #30227d !important; }
+        body:has(.classpulse-analysis-sidebar) main .bg-gray-100 { background: #f5f4f8 !important; }
         body:has(.classpulse-analysis-sidebar) main .border-gray-100,
-        body:has(.classpulse-analysis-sidebar) main .border-gray-200 {
-          border-color: #e5e3ea !important;
-        }
-
+        body:has(.classpulse-analysis-sidebar) main .border-gray-200 { border-color: #e5e3ea !important; }
         body:has(.classpulse-analysis-sidebar) main input,
         body:has(.classpulse-analysis-sidebar) main select,
-        body:has(.classpulse-analysis-sidebar) main textarea {
-          border-color: #dfe1e8;
-          border-radius: 11px;
-        }
-
+        body:has(.classpulse-analysis-sidebar) main textarea { border-color: #dfe1e8; border-radius: 11px; }
         body:has(.classpulse-analysis-sidebar) main input:focus,
         body:has(.classpulse-analysis-sidebar) main select:focus,
-        body:has(.classpulse-analysis-sidebar) main textarea:focus {
-          outline: none;
-          border-color: #6b5be7;
-          box-shadow: 0 0 0 3px rgba(107, 91, 231, 0.10);
-        }
-
+        body:has(.classpulse-analysis-sidebar) main textarea:focus { outline: none; border-color: #6b5be7; box-shadow: 0 0 0 3px rgba(107,91,231,.10); }
         @media (max-width: 1023px) {
-          body:has(.classpulse-analysis-sidebar) #__next {
-            padding-left: 0;
-          }
-
-          body:has(.classpulse-analysis-sidebar) main > div {
-            padding: 24px 20px 36px !important;
-          }
+          body:has(.classpulse-analysis-sidebar) #__next { padding-left: 0; }
+          body:has(.classpulse-analysis-sidebar) main > div { padding: 24px 20px 36px !important; }
         }
       `}</style>
     </>

From ee12cb0a8770e2748bc051fa7f9d3273ed6d2654 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sun, 30 Aug 2026 19:32:13 +0530
Subject: [PATCH 41/80] Restyle class attendance analysis to match Subject
 Analysis theme

---
 .../[sectionId]/attendance.tsx                | 626 ++++--------------
 1 file changed, 140 insertions(+), 486 deletions(-)

diff --git a/pages/section-analysis/[sectionId]/attendance.tsx b/pages/section-analysis/[sectionId]/attendance.tsx
index ca20956..522a0fa 100644
--- a/pages/section-analysis/[sectionId]/attendance.tsx
+++ b/pages/section-analysis/[sectionId]/attendance.tsx
@@ -13,44 +13,37 @@ import {
   Cell,
   Legend,
 } from "recharts";
+import { Gauge, Info, SlidersHorizontal, Sparkles, UsersRound } from "lucide-react";
 
 import AnalysisNav from "../../../components/AnalysisNav";
 import { SectionAnalysis } from "../../../lib/analysisClass";
-import { RawDataButton, StatCard } from "../../../components/AnalysisWidgets";
 
 type AttendanceView = "trend" | "risk" | "summary";
 
-const BUCKET_COLORS = {
-  above75: "#10b981", // Good Standing
-  to74: "#3b82f6", // Satisfactory
-  to49: "#f59e0b", // Needs Attention
-  below30: "#ef4444", // Critical Risk
-};
+const TREND_COLORS = ["#14a66a", "#ef4444", "#5278c9"];
+const ATTENDANCE_COLORS = ["#ef4444", "#f97316", "#f59e0b", "#16a66a"];
 
 export default function AttendancePage() {
   const router = useRouter();
   const { sectionId } = router.query;
 
   const [view, setView] = useState<AttendanceView>("trend");
-
   const [data, setData] = useState<SectionAnalysis | null>(null);
   const [sheetId, setSheetId] = useState<string | null>(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 [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) {
     if (!sectionId || typeof sectionId !== "string") return;
@@ -155,7 +148,6 @@ export default function AttendancePage() {
       ]
     : [];
 
-  // ---- At Risk: filtered students ----
   const riskResults = useMemo(() => {
     if (!data) return [];
     return data.students.filter((s: any) => {
@@ -169,14 +161,13 @@ export default function AttendancePage() {
   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
+      // The textarea remains selectable if clipboard access is unavailable.
     }
   }
 
@@ -186,7 +177,6 @@ export default function AttendancePage() {
     "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) => ({
@@ -206,26 +196,10 @@ export default function AttendancePage() {
 
   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,
-        },
+        { name: "Good Standing (75%+)", value: attendanceBuckets.above75, color: "#16a66a" },
+        { name: "Satisfactory (50-74%)", value: attendanceBuckets.to74, color: "#5278c9" },
+        { name: "Needs Attention (30-49%)", value: attendanceBuckets.to49, color: "#f59e0b" },
+        { name: "Critical Risk (<30%)", value: attendanceBuckets.below30, color: "#ef4444" },
       ]
     : [];
 
@@ -236,475 +210,155 @@ export default function AttendancePage() {
       ]
     : [];
 
+  const classAverageChange = data ? round1(data.classAverageCurrMonth - data.classAveragePrevMonth) : 0;
+  const improvingStudents = data?.trendCounts?.increasing ?? 0;
+  const totalStudents = data?.totalStudents ?? data?.students?.length ?? 0;
+
   return (
-    <div className="min-h-screen max-w-[1700px] mx-auto px-8 py-10">
-      {/* HEADER */}
-      <div className="flex items-start justify-between mb-6">
-        <div>
-          <h1 className="text-lg font-semibold text-gray-900">Class / Section Analysis</h1>
-          {computedAt && (
-            <p className="text-xs text-gray-400 mt-1">Last synced {new Date(computedAt).toLocaleString()}</p>
-          )}
-        </div>
-        <div className="flex items-center gap-2">
-          <RawDataButton sheetId={sheetId} />
+    <div className="classpulse-attendance-page min-h-screen text-[#17223b]">
+      <div className="mx-auto w-full max-w-[1180px]">
+        <header className="mb-5 flex items-start justify-between gap-6">
+          <div>
+            <div className="flex items-center gap-2">
+              <h1 className="text-[20px] font-bold tracking-[-0.4px] text-[#17223b]">Class / Section Analysis</h1>
+              {computedAt && <span className="text-xs text-[#8991a2]">• Last synced {new Date(computedAt).toLocaleString()}</span>}
+            </div>
+          </div>
           <button
             onClick={syncAnalysis}
             disabled={syncing}
-            className="text-sm bg-gray-900 text-white rounded-lg px-4 py-2 disabled:opacity-50"
+            className="shrink-0 rounded-xl bg-[#3b2992] px-5 py-2.5 text-sm font-semibold text-white shadow-[0_8px_20px_rgba(59,41,146,.18)] transition hover:bg-[#30227d] disabled:cursor-not-allowed disabled:opacity-60"
           >
             {syncing ? "Syncing..." : "Sync now"}
           </button>
+        </header>
+
+        {typeof sectionId === "string" && <AnalysisNav sectionId={sectionId} />}
+
+        <div className="mb-7 flex gap-2">
+          {(["trend", "risk", "summary"] as AttendanceView[]).map((v) => (
+            <button
+              key={v}
+              onClick={() => setView(v)}
+              className={`rounded-xl px-4 py-2.5 text-sm font-semibold transition ${
+                view === v
+                  ? "bg-[#3b2992] text-white shadow-[0_7px_18px_rgba(59,41,146,.18)]"
+                  : "border border-transparent bg-[#f1f0f3] text-[#626b80] hover:bg-[#e9e6f5] hover:text-[#38258e]"
+              }`}
+            >
+              {v === "risk" ? "At Risk" : v.charAt(0).toUpperCase() + v.slice(1)}
+            </button>
+          ))}
         </div>
-      </div>
 
-      {typeof sectionId === "string" && <AnalysisNav sectionId={sectionId} />}
-
-      {/* ATTENDANCE SUB-NAV: Trend / At Risk / Summary */}
-      <div className="flex gap-2 mb-8">
-        {(["trend", "risk", "summary"] as AttendanceView[]).map((v) => (
-          <button
-            key={v}
-            onClick={() => 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}
-          </button>
-        ))}
-      </div>
-
-      {error && <div className="bg-red-50 border border-red-100 text-red-700 text-sm rounded-lg p-4 mb-6">{error}</div>}
-      {loading && !data && <div className="text-sm text-gray-500 py-10">Loading attendance analysis...</div>}
-
-      {data && view === "trend" && (
-        <>
-          <div className="mb-6">
-            <h2 className="text-xl font-semibold text-gray-900">Attendance Trend</h2>
-            <p className="text-sm text-gray-500 mt-1">
-              Compare attendance between two months and identify increasing, decreasing, and stable students.
-            </p>
-          </div>
-
-          <section className="bg-white rounded-2xl border border-gray-100 p-6 mb-6">
-            <h3 className="font-medium text-gray-900 mb-5">Trend Comparison Settings</h3>
-            <div className="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
-              <div>
-                <label className="block text-xs font-medium text-gray-500 mb-2">First Month</label>
-                <select
-                  value={previousMonth}
-                  onChange={(e) => setPreviousMonth(e.target.value)}
-                  className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-900 bg-white"
-                >
-                  <option value="">Select month</option>
-                  {availableMonths.map((m: string) => (
-                    <option key={m} value={m}>
-                      {m}
-                    </option>
-                  ))}
-                </select>
+        {error && <div className="mb-6 rounded-xl border border-red-100 bg-red-50 px-4 py-3 text-sm text-red-700">{error}</div>}
+        {loading && !data && <div className="rounded-2xl border border-[#e1e3ea] bg-white p-8 text-sm text-[#6f7890]">Loading attendance analysis...</div>}
+
+        {data && view === "trend" && (
+          <>
+            <section className="mb-5 flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
+              <div className="max-w-[560px]">
+                <h2 className="text-[25px] font-extrabold tracking-[-0.7px] text-[#17223b]">Attendance Trend</h2>
+                <p className="mt-2 text-sm leading-6 text-[#6f7890]">
+                  Compare attendance between two months and identify increasing, decreasing, and stable students.
+                </p>
               </div>
-              <div>
-                <label className="block text-xs font-medium text-gray-500 mb-2">Second Month</label>
-                <select
-                  value={currentMonth}
-                  onChange={(e) => setCurrentMonth(e.target.value)}
-                  className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-900 bg-white"
-                >
-                  <option value="">Select month</option>
-                  {availableMonths.map((m: string) => (
-                    <option key={m} value={m}>
-                      {m}
-                    </option>
-                  ))}
-                </select>
-              </div>
-              <div>
-                <label className="block text-xs font-medium text-gray-500 mb-2">Trend Criteria (%)</label>
-                <input
-                  type="number"
-                  min="0"
-                  max="100"
-                  value={trendCriteria}
-                  onChange={(e) => setTrendCriteria(Number(e.target.value))}
-                  className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-900"
-                />
-              </div>
-              <button
-                onClick={applyTrendSettings}
-                disabled={!previousMonth || !currentMonth || previousMonth === currentMonth}
-                className="bg-gray-900 text-white rounded-lg px-4 py-2 text-sm disabled:opacity-40"
-              >
-                Apply Comparison
-              </button>
-            </div>
-            <div className="mt-5 pt-4 border-t border-gray-100">
-              <p className="text-xs text-gray-500">
-                Trend calculation: a change of{" "}
-                <span className="font-semibold text-gray-700">±{trendCriteria} percentage points</span> or more is
-                classified as Increasing or Decreasing. Smaller changes are classified as Stable.
-              </p>
-            </div>
-          </section>
-
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
-            <section className="bg-white rounded-2xl border border-gray-100 p-6 order-2 lg:order-1 lg:col-span-1">
-              <h3 className="font-medium text-gray-900 mb-4">Student Trend Analysis</h3>
-              <div className="max-h-[600px] overflow-y-auto">
-                <table className="w-full text-sm">
-                  <thead>
-                    <tr className="text-left text-gray-400 border-b border-gray-100">
-                      <th className="py-3 pr-3">Name</th>
-                      <th className="py-3 pr-3">{data.monthsUsed?.previous || "Month 1"}</th>
-                      <th className="py-3 pr-3">{data.monthsUsed?.current || "Month 2"}</th>
-                      <th className="py-3 pr-3">Change</th>
-                      <th className="py-3">Trend</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {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 (
-                        <tr key={student.enrollmentNo} className="border-b border-gray-50">
-                          <td className="py-3 pr-3 text-gray-900 whitespace-nowrap">{student.name}</td>
-                          <td className="py-3 pr-3 text-gray-500">{previous}%</td>
-                          <td className="py-3 pr-3 text-gray-500">{current}%</td>
-                          <td
-                            className={`py-3 pr-3 font-medium ${
-                              change > 0 ? "text-emerald-600" : change < 0 ? "text-red-500" : "text-gray-500"
-                            }`}
-                          >
-                            {change > 0 ? "+" : ""}
-                            {change}%
-                          </td>
-                          <td className="py-3">
-                            <span
-                              className={`text-xs px-2.5 py-1 rounded-full ${
-                                trend === "Increasing"
-                                  ? "bg-emerald-50 text-emerald-700"
-                                  : trend === "Decreasing"
-                                  ? "bg-red-50 text-red-600"
-                                  : "bg-gray-100 text-gray-600"
-                              }`}
-                            >
-                              {trend}
-                            </span>
-                          </td>
-                        </tr>
-                      );
-                    })}
-                  </tbody>
-                </table>
+              <div className="grid w-full grid-cols-1 gap-3 sm:grid-cols-3 lg:w-[650px]">
+                <div className="rounded-2xl border border-[#dfe2e8] bg-white px-5 py-4 shadow-[0_7px_24px_rgba(31,35,49,.045)]">
+                  <div className="flex items-center gap-3">
+                    <span className="grid h-10 w-10 place-items-center rounded-full bg-[#f0edff] text-[#5b4ee6]"><UsersRound size={19} /></span>
+                    <div><p className="text-xs font-medium text-[#626b80]">Class Average ({data.monthsUsed?.previous || "Previous"})</p><p className="mt-1 text-[25px] font-extrabold leading-none text-[#17223b]">{data.classAveragePrevMonth}%</p></div>
+                  </div>
+                </div>
+                <div className="rounded-2xl border border-[#dfe2e8] bg-white px-5 py-4 shadow-[0_7px_24px_rgba(31,35,49,.045)]">
+                  <div className="flex items-center gap-3">
+                    <span className="grid h-10 w-10 place-items-center rounded-full bg-[#f0edff] text-[#5b4ee6]"><Gauge size={19} /></span>
+                    <div><p className="text-xs font-medium text-[#626b80]">Class Average ({data.monthsUsed?.current || "Current"})</p><p className="mt-1 text-[25px] font-extrabold leading-none text-[#17223b]">{data.classAverageCurrMonth}% <span className={`ml-1 text-xs font-bold ${classAverageChange >= 0 ? "text-[#10a66a]" : "text-red-500"}`}>{classAverageChange > 0 ? "+" : ""}{classAverageChange}%</span></p></div>
+                  </div>
+                </div>
+                <div className="rounded-2xl border border-[#dfe2e8] bg-white px-5 py-4 shadow-[0_7px_24px_rgba(31,35,49,.045)]">
+                  <div className="flex items-center gap-3">
+                    <span className="grid h-10 w-10 place-items-center rounded-full bg-[#f0edff] text-[#5b4ee6]"><Sparkles size={19} /></span>
+                    <div><p className="text-xs font-medium text-[#626b80]">Students Improving</p><p className="mt-1 text-[25px] font-extrabold leading-none text-[#17223b]">{improvingStudents}</p><p className="mt-1 text-[11px] text-[#8991a2]">{totalStudents ? round1((improvingStudents / totalStudents) * 100) : 0}% of total students</p></div>
+                  </div>
+                </div>
               </div>
             </section>
 
-            <div className="space-y-6 order-1 lg:order-2 lg:col-span-1">
-              <section className="bg-white rounded-2xl border border-gray-100 p-6">
-                <h3 className="font-medium text-gray-900 mb-4">Trend Distribution</h3>
-                <ResponsiveContainer width="100%" height={220}>
-                  <BarChart data={trendData}>
-                    <CartesianGrid strokeDasharray="3 3" vertical={false} />
-                    <XAxis dataKey="name" fontSize={11} />
-                    <YAxis fontSize={12} allowDecimals={false} />
-                    <Tooltip />
-                    <Bar dataKey="count" fill="#2563eb" radius={[4, 4, 0, 0]} />
-                  </BarChart>
-                </ResponsiveContainer>
-              </section>
+            <section className="mb-5 rounded-[18px] border border-[#dfe2e8] bg-white p-5 shadow-[0_8px_28px_rgba(31,35,49,.055)] sm:p-6">
+              <h3 className="text-sm font-bold text-[#17223b]">Trend Comparison Settings</h3>
+              <div className="mt-4 grid grid-cols-1 gap-3 lg:grid-cols-[1fr_1fr_1fr_1.05fr] lg:items-end">
+                <div>
+                  <label className="mb-2 block text-xs font-medium text-[#626b80]">First Month</label>
+                  <select value={previousMonth} onChange={(e) => setPreviousMonth(e.target.value)} className="w-full rounded-xl border border-[#dfe2e8] bg-white px-3.5 py-2.5 text-sm text-[#17223b] outline-none transition focus:border-[#6b5be7] focus:ring-2 focus:ring-[#6b5be7]/10">
+                    <option value="">Select month</option>
+                    {availableMonths.map((m: string) => <option key={m} value={m}>{m}</option>)}
+                  </select>
+                </div>
+                <div>
+                  <label className="mb-2 block text-xs font-medium text-[#626b80]">Second Month</label>
+                  <select value={currentMonth} onChange={(e) => setCurrentMonth(e.target.value)} className="w-full rounded-xl border border-[#dfe2e8] bg-white px-3.5 py-2.5 text-sm text-[#17223b] outline-none transition focus:border-[#6b5be7] focus:ring-2 focus:ring-[#6b5be7]/10">
+                    <option value="">Select month</option>
+                    {availableMonths.map((m: string) => <option key={m} value={m}>{m}</option>)}
+                  </select>
+                </div>
+                <div>
+                  <label className="mb-2 block text-xs font-medium text-[#626b80]">Trend Criteria (%)</label>
+                  <input type="number" min="0" max="100" value={trendCriteria} onChange={(e) => setTrendCriteria(Number(e.target.value))} className="w-full rounded-xl border border-[#dfe2e8] px-3.5 py-2.5 text-sm text-[#17223b] outline-none transition focus:border-[#6b5be7] focus:ring-2 focus:ring-[#6b5be7]/10" />
+                </div>
+                <button onClick={applyTrendSettings} disabled={!previousMonth || !currentMonth || previousMonth === currentMonth} className="flex items-center justify-center gap-2 rounded-xl bg-[#3b2992] px-4 py-2.5 text-sm font-semibold text-white shadow-[0_7px_18px_rgba(59,41,146,.18)] transition hover:bg-[#30227d] disabled:cursor-not-allowed disabled:opacity-40"><SlidersHorizontal size={16} /> Apply Comparison</button>
+              </div>
+              <div className="mt-3 flex items-center gap-2 rounded-xl border border-[#dce7fb] bg-[#f8fbff] px-3.5 py-2.5 text-xs text-[#5d6d87]"><Info size={15} className="shrink-0 text-[#617aa8]" /> Trend calculation: a change of <span className="font-bold text-[#34445f]">±{trendCriteria} percentage points</span> or more is Increasing or Decreasing.</div>
+            </section>
 
-              <section className="bg-white rounded-2xl border border-gray-100 p-6">
-                <h3 className="font-medium text-gray-900 mb-4">Attendance Distribution</h3>
-                <ResponsiveContainer width="100%" height={220}>
-                  <BarChart data={attendanceDistribution}>
-                    <CartesianGrid strokeDasharray="3 3" vertical={false} />
-                    <XAxis dataKey="name" fontSize={11} />
-                    <YAxis fontSize={12} allowDecimals={false} />
-                    <Tooltip />
-                    <Bar dataKey="count" fill="#111827" radius={[4, 4, 0, 0]} />
-                  </BarChart>
-                </ResponsiveContainer>
+            <div className="grid grid-cols-1 gap-5 lg:grid-cols-[1.03fr_.97fr]">
+              <section className="rounded-[18px] border border-[#dfe2e8] bg-white p-5 shadow-[0_8px_28px_rgba(31,35,49,.055)] sm:p-6">
+                <div className="mb-4 flex items-center justify-between gap-4"><div className="flex items-center gap-3"><h3 className="text-sm font-bold text-[#17223b]">Student Trend Analysis</h3><span className="rounded-full bg-[#f0edff] px-2.5 py-1 text-[10px] font-semibold text-[#5b4ee6]">{totalStudents} Students</span></div></div>
+                <div className="max-h-[600px] overflow-y-auto pr-1">
+                  <table className="w-full text-sm">
+                    <thead className="sticky top-0 bg-white"><tr className="border-b border-[#e7e8ec] text-left text-[11px] font-semibold text-[#8991a2]"><th className="py-3 pr-3">Student Name</th><th className="py-3 pr-3">{data.monthsUsed?.previous || "Month 1"}</th><th className="py-3 pr-3">{data.monthsUsed?.current || "Month 2"}</th><th className="py-3 pr-3">Change</th><th className="py-3">Trend</th></tr></thead>
+                    <tbody>
+                      {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";
+                        const initials = String(student.name || "S").split(" ").filter(Boolean).slice(0, 2).map((part: string) => part[0]).join("").toUpperCase();
+                        return <tr key={student.enrollmentNo} className="border-b border-[#f0f1f4] last:border-0"><td className="py-3 pr-3"><div className="flex items-center gap-2.5"><span className="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-[#f0edff] text-[10px] font-bold text-[#5b4ee6]">{initials}</span><span className="whitespace-nowrap font-medium text-[#17223b]">{student.name}</span></div></td><td className="py-3 pr-3 text-[#6f7890]">{previous}%</td><td className="py-3 pr-3 text-[#6f7890]">{current}%</td><td className={`py-3 pr-3 font-bold ${change > 0 ? "text-[#10a66a]" : change < 0 ? "text-red-500" : "text-[#8991a2]"}`}>{change > 0 ? "+" : ""}{change}%</td><td className="py-3"><span className={`rounded-full px-2.5 py-1 text-[10px] font-semibold ${trend === "Increasing" ? "bg-[#e8f8f1] text-[#0d9960]" : trend === "Decreasing" ? "bg-[#fff0f0] text-[#e23c3c]" : "bg-[#f1f3f6] text-[#687286]"}`}>{trend === "Decreasing" ? "↓ " : trend === "Increasing" ? "↑ " : "– "}{trend}</span></td></tr>;
+                      })}
+                    </tbody>
+                  </table>
+                </div>
               </section>
-            </div>
-          </div>
-        </>
-      )}
-
-      {data && view === "risk" && (
-        <>
-          <div className="mb-6">
-            <h2 className="text-xl font-semibold text-gray-900">At Risk Students</h2>
-            <p className="text-sm text-gray-500 mt-1">
-              Filter students by attendance range and trend, then copy or email the list directly.
-            </p>
-          </div>
 
-          <section className="bg-white rounded-2xl border border-gray-100 p-6 mb-6">
-            <h3 className="font-medium text-gray-900 mb-5">Filter Criteria</h3>
-            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-              <div>
-                <label className="block text-xs font-medium text-gray-500 mb-2">Lower Bound (%)</label>
-                <input
-                  type="number"
-                  min="0"
-                  max="100"
-                  value={lowerBound}
-                  onChange={(e) => setLowerBound(Number(e.target.value))}
-                  className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-900"
-                />
-              </div>
-              <div>
-                <label className="block text-xs font-medium text-gray-500 mb-2">Upper Bound (%)</label>
-                <input
-                  type="number"
-                  min="0"
-                  max="100"
-                  value={upperBound}
-                  onChange={(e) => setUpperBound(Number(e.target.value))}
-                  className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-900"
-                />
-              </div>
-              <div>
-                <label className="block text-xs font-medium text-gray-500 mb-2">Trend</label>
-                <select
-                  value={riskTrendFilter}
-                  onChange={(e) => setRiskTrendFilter(e.target.value)}
-                  className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-900 bg-white"
-                >
-                  <option value="All">All</option>
-                  <option value="Increasing">Increasing</option>
-                  <option value="Decreasing">Decreasing</option>
-                  <option value="Stable">Stable</option>
-                </select>
-              </div>
-              <div>
-                <label className="block text-xs font-medium text-gray-500 mb-2">Month</label>
-                <select
-                  value={riskMonth}
-                  onChange={(e) => 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"
-                >
-                  <option value="current">{data.monthsUsed?.current || "Current month"}</option>
-                  <option value="previous">{data.monthsUsed?.previous || "Previous month"}</option>
-                </select>
+              <div className="space-y-5">
+                <section className="rounded-[18px] border border-[#dfe2e8] bg-white p-5 shadow-[0_8px_28px_rgba(31,35,49,.055)] sm:p-6"><h3 className="text-base font-medium text-[#17223b]">Trend Distribution</h3><p className="mt-1 text-[11px] text-[#8991a2]">Click a column to inspect the students in that trend.</p><div className="mt-3"><ResponsiveContainer width="100%" height={235}><BarChart data={trendData} margin={{ top: 8, right: 4, left: -16, bottom: 0 }}><CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#d9dce2" /><XAxis dataKey="name" fontSize={11} tickLine={false} axisLine={{ stroke: "#8b9099" }} /><YAxis fontSize={11} allowDecimals={false} tickLine={false} axisLine={{ stroke: "#8b9099" }} /><Tooltip /><Bar dataKey="count" radius={[4, 4, 0, 0]}>{trendData.map((entry, index) => <Cell key={`trend-${entry.name}`} fill={TREND_COLORS[index]} />)}</Bar></BarChart></ResponsiveContainer></div></section>
+                <section className="rounded-[18px] border border-[#dfe2e8] bg-white p-5 shadow-[0_8px_28px_rgba(31,35,49,.055)] sm:p-6"><h3 className="text-base font-medium text-[#17223b]">Attendance Distribution</h3><p className="mt-1 text-[11px] text-[#8991a2]">Attendance ranges for the selected current month.</p><div className="mt-3"><ResponsiveContainer width="100%" height={235}><BarChart data={attendanceDistribution} margin={{ top: 8, right: 4, left: -16, bottom: 0 }}><CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#d9dce2" /><XAxis dataKey="name" fontSize={10} tickLine={false} axisLine={{ stroke: "#8b9099" }} /><YAxis fontSize={11} allowDecimals={false} tickLine={false} axisLine={{ stroke: "#8b9099" }} /><Tooltip /><Bar dataKey="count" radius={[4, 4, 0, 0]}>{attendanceDistribution.map((entry, index) => <Cell key={`attendance-${entry.name}`} fill={ATTENDANCE_COLORS[index]} />)}</Bar></BarChart></ResponsiveContainer></div></section>
               </div>
             </div>
-            <p className="text-xs text-gray-400 mt-4">
-              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.
-            </p>
-          </section>
-
-          <section className="bg-white rounded-2xl border border-gray-100 p-6 mb-6">
-            <h3 className="font-medium text-gray-900 mb-4">
-              Filtered Students <span className="text-gray-400 font-normal">({riskResults.length})</span>
-            </h3>
-            <table className="w-full text-sm">
-              <thead>
-                <tr className="text-left text-gray-400 border-b border-gray-100">
-                  <th className="py-2 pr-3">Enrollment</th>
-                  <th className="py-2 pr-3">Name</th>
-                  <th className="py-2 pr-3">Email</th>
-                  <th className="py-2 pr-3">Attendance</th>
-                  <th className="py-2">Trend</th>
-                </tr>
-              </thead>
-              <tbody>
-                {riskResults.map((s: any) => (
-                  <tr key={s.enrollmentNo} className="border-b border-gray-50">
-                    <td className="py-2 pr-3 text-gray-500">{s.enrollmentNo}</td>
-                    <td className="py-2 pr-3 text-gray-900">{s.name}</td>
-                    <td className="py-2 pr-3 text-gray-500">{s.email || "—"}</td>
-                    <td className="py-2 pr-3">
-                      {riskMonth === "current" ? s.attendancePct?.currMonth : s.attendancePct?.prevMonth}%
-                    </td>
-                    <td className="py-2">{s.attendancePct?.trend}</td>
-                  </tr>
-                ))}
-                {riskResults.length === 0 && (
-                  <tr>
-                    <td colSpan={5} className="py-6 text-center text-gray-400">
-                      No students match this filter.
-                    </td>
-                  </tr>
-                )}
-              </tbody>
-            </table>
-          </section>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <section className="bg-white rounded-2xl border border-gray-100 p-6">
-              <h3 className="font-medium text-gray-900 mb-3">Copy to Mail</h3>
-              <textarea
-                readOnly
-                value={riskEmailsText}
-                rows={5}
-                className="w-full text-xs text-gray-700 border border-gray-200 rounded-lg p-3 bg-gray-50"
-              />
-              <button
-                onClick={copyEmails}
-                disabled={riskEmails.length === 0}
-                className="mt-3 text-sm bg-gray-900 text-white rounded-lg px-4 py-2 disabled:opacity-40"
-              >
-                {copied ? "Copied!" : "Copy Emails"}
-              </button>
-            </section>
-
-            <section className="bg-white rounded-2xl border border-gray-100 p-6">
-              <h3 className="font-medium text-gray-900 mb-3">Send Alert Emails</h3>
-              <p className="text-sm text-gray-500 mb-4">
-                Opens your default email app with all {riskEmails.length} filtered students BCC'd, and a starter
-                subject/message you can edit before sending.
-              </p>
-              <a
-                href={mailtoHref}
-                className={`inline-block text-sm rounded-lg px-4 py-2 text-white ${
-                  riskEmails.length === 0 ? "bg-gray-300 pointer-events-none" : "bg-red-600 hover:bg-red-700"
-                }`}
-              >
-                Send Alert Emails ↗
-              </a>
-            </section>
-          </div>
-        </>
-      )}
-
-      {data && view === "summary" && (
-        <>
-          <div className="mb-6">
-            <h2 className="text-xl font-semibold text-gray-900">Attendance Summary</h2>
-            <p className="text-sm text-gray-500 mt-1">Overall class attendance health at a glance.</p>
-          </div>
-
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
-            <StatCard label="Total Students" value={data.totalStudents} />
-            <StatCard label="Class Average (Current)" value={`${data.classAverageCurrMonth}%`} />
-            <StatCard label="Class Average (Previous)" value={`${data.classAveragePrevMonth}%`} />
-            <StatCard
-              label="Overall Trend"
-              value={`${data.overallTrendPct > 0 ? "+" : ""}${data.overallTrendPct}%`}
-              positive={data.overallTrendPct >= 0}
-            />
-          </div>
-
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
-            <section className="bg-white rounded-2xl border border-gray-100 p-6">
-              <h3 className="font-medium text-gray-900 mb-4">Attendance Breakdown</h3>
-              <ResponsiveContainer width="100%" height={260}>
-                <PieChart>
-                  <Pie data={donutData} dataKey="value" nameKey="name" innerRadius={60} outerRadius={95} paddingAngle={2}>
-                    {donutData.map((entry, i) => (
-                      <Cell key={i} fill={entry.color} />
-                    ))}
-                  </Pie>
-                  <Tooltip />
-                  <Legend wrapperStyle={{ fontSize: 11 }} />
-                </PieChart>
-              </ResponsiveContainer>
-            </section>
-
-            <section className="bg-white rounded-2xl border border-gray-100 p-6">
-              <h3 className="font-medium text-gray-900 mb-4">Class Average: Previous vs Current</h3>
-              <ResponsiveContainer width="100%" height={260}>
-                <BarChart data={compareBarData}>
-                  <CartesianGrid strokeDasharray="3 3" vertical={false} />
-                  <XAxis dataKey="name" fontSize={12} />
-                  <YAxis fontSize={12} />
-                  <Tooltip />
-                  <Bar dataKey="value" fill="#2563eb" radius={[4, 4, 0, 0]} />
-                </BarChart>
-              </ResponsiveContainer>
-            </section>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
-            <section className="bg-white rounded-2xl border border-gray-100 p-6">
-              <h3 className="font-medium text-gray-900 mb-4">Core Summary</h3>
-              <table className="w-full text-sm">
-                <tbody>
-                  <tr className="border-b border-gray-50">
-                    <td className="py-2 text-gray-600">Good Standing (≥75%)</td>
-                    <td className="py-2 text-right font-medium">{data.attendanceBuckets.above75}</td>
-                  </tr>
-                  <tr className="border-b border-gray-50">
-                    <td className="py-2 text-gray-600">Satisfactory (50-74%)</td>
-                    <td className="py-2 text-right font-medium">{data.attendanceBuckets.to74}</td>
-                  </tr>
-                  <tr className="border-b border-gray-50">
-                    <td className="py-2 text-gray-600">Needs Attention (30-49%)</td>
-                    <td className="py-2 text-right font-medium">{data.attendanceBuckets.to49}</td>
-                  </tr>
-                  <tr>
-                    <td className="py-2 text-gray-600">Critical Risk (&lt;30%)</td>
-                    <td className="py-2 text-right font-medium">{data.attendanceBuckets.below30}</td>
-                  </tr>
-                </tbody>
-              </table>
-            </section>
-
-            <section className="bg-white rounded-2xl border border-gray-100 p-6">
-              <h3 className="font-medium text-gray-900 mb-4">Attendance Shifts</h3>
-              <table className="w-full text-sm">
-                <tbody>
-                  <tr className="border-b border-gray-50">
-                    <td className="py-2 text-gray-600">Improving Students</td>
-                    <td className="py-2 text-right font-medium text-emerald-600">
-                      {data.trendCounts?.increasing ?? 0}
-                    </td>
-                  </tr>
-                  <tr className="border-b border-gray-50">
-                    <td className="py-2 text-gray-600">Declining Students</td>
-                    <td className="py-2 text-right font-medium text-red-600">{data.trendCounts?.decreasing ?? 0}</td>
-                  </tr>
-                  <tr>
-                    <td className="py-2 text-gray-600">Stable Students</td>
-                    <td className="py-2 text-right font-medium text-gray-600">{data.trendCounts?.stable ?? 0}</td>
-                  </tr>
-                </tbody>
-              </table>
-            </section>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <section className="bg-white rounded-2xl border border-gray-100 p-6">
-              <h3 className="font-medium text-gray-900 mb-4">Top 5 Most Improved</h3>
-              <ol className="text-sm space-y-2">
-                {topMovers.improved.map((s, i) => (
-                  <li key={s.name} className="flex justify-between">
-                    <span>
-                      {i + 1}. {s.name}
-                    </span>
-                    <span className="text-emerald-600 font-medium">
-                      {s.change > 0 ? "+" : ""}
-                      {s.change}%
-                    </span>
-                  </li>
-                ))}
-              </ol>
-            </section>
-
-            <section className="bg-white rounded-2xl border border-gray-100 p-6">
-              <h3 className="font-medium text-gray-900 mb-4">Top 5 Critical Decliners</h3>
-              <ol className="text-sm space-y-2">
-                {topMovers.declined.map((s, i) => (
-                  <li key={s.name} className="flex justify-between">
-                    <span>
-                      {i + 1}. {s.name}
-                    </span>
-                    <span className="text-red-600 font-medium">
-                      {s.change > 0 ? "+" : ""}
-                      {s.change}%
-                    </span>
-                  </li>
-                ))}
-              </ol>
-            </section>
-          </div>
-        </>
-      )}
+          </>
+        )}
+
+        {data && view === "risk" && (
+          <>
+            <section className="mb-5"><h2 className="text-[25px] font-extrabold tracking-[-0.7px] text-[#17223b]">At Risk Students</h2><p className="mt-2 text-sm leading-6 text-[#6f7890]">Filter students by attendance range and trend, then copy or email the list directly.</p></section>
+            <section className="mb-5 rounded-[18px] border border-[#dfe2e8] bg-white p-5 shadow-[0_8px_28px_rgba(31,35,49,.055)] sm:p-6"><h3 className="text-sm font-bold text-[#17223b]">Filter Criteria</h3><div className="mt-4 grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-4"><div><label className="mb-2 block text-xs font-medium text-[#626b80]">Lower Bound (%)</label><input type="number" min="0" max="100" value={lowerBound} onChange={(e) => setLowerBound(Number(e.target.value))} className="w-full rounded-xl border border-[#dfe2e8] px-3.5 py-2.5 text-sm" /></div><div><label className="mb-2 block text-xs font-medium text-[#626b80]">Upper Bound (%)</label><input type="number" min="0" max="100" value={upperBound} onChange={(e) => setUpperBound(Number(e.target.value))} className="w-full rounded-xl border border-[#dfe2e8] px-3.5 py-2.5 text-sm" /></div><div><label className="mb-2 block text-xs font-medium text-[#626b80]">Trend</label><select value={riskTrendFilter} onChange={(e) => setRiskTrendFilter(e.target.value)} className="w-full rounded-xl border border-[#dfe2e8] bg-white px-3.5 py-2.5 text-sm"><option value="All">All</option><option value="Increasing">Increasing</option><option value="Decreasing">Decreasing</option><option value="Stable">Stable</option></select></div><div><label className="mb-2 block text-xs font-medium text-[#626b80]">Month</label><select value={riskMonth} onChange={(e) => setRiskMonth(e.target.value as "previous" | "current")} className="w-full rounded-xl border border-[#dfe2e8] bg-white px-3.5 py-2.5 text-sm"><option value="current">{data.monthsUsed?.current || "Current month"}</option><option value="previous">{data.monthsUsed?.previous || "Previous month"}</option></select></div></div><p className="mt-3 flex items-center gap-2 text-xs text-[#8991a2]"><Info size={14} /> Filtering uses the two months currently loaded in Trend settings.</p></section>
+            <section className="mb-5 rounded-[18px] border border-[#dfe2e8] bg-white p-5 shadow-[0_8px_28px_rgba(31,35,49,.055)] sm:p-6"><h3 className="mb-4 text-sm font-bold text-[#17223b]">Filtered Students <span className="font-normal text-[#8991a2]">({riskResults.length})</span></h3><div className="overflow-x-auto"><table className="w-full text-sm"><thead><tr className="border-b border-[#e7e8ec] text-left text-[11px] font-semibold text-[#8991a2]"><th className="py-3 pr-3">Enrollment</th><th className="py-3 pr-3">Name</th><th className="py-3 pr-3">Email</th><th className="py-3 pr-3">Attendance</th><th className="py-3">Trend</th></tr></thead><tbody>{riskResults.map((s: any) => <tr key={s.enrollmentNo} className="border-b border-[#f0f1f4]"><td className="py-3 pr-3 text-[#6f7890]">{s.enrollmentNo}</td><td className="py-3 pr-3 font-medium text-[#17223b]">{s.name}</td><td className="py-3 pr-3 text-[#6f7890]">{s.email || "—"}</td><td className="py-3 pr-3">{riskMonth === "current" ? s.attendancePct?.currMonth : s.attendancePct?.prevMonth}%</td><td className="py-3">{s.attendancePct?.trend}</td></tr>)}{riskResults.length === 0 && <tr><td colSpan={5} className="py-8 text-center text-sm text-[#8991a2]">No students match this filter.</td></tr>}</tbody></table></div></section>
+            <div className="grid grid-cols-1 gap-5 md:grid-cols-2"><section className="rounded-[18px] border border-[#dfe2e8] bg-white p-5 shadow-[0_8px_28px_rgba(31,35,49,.055)] sm:p-6"><h3 className="text-sm font-bold text-[#17223b]">Copy to Mail</h3><textarea readOnly value={riskEmailsText} rows={5} className="mt-3 w-full rounded-xl border border-[#dfe2e8] bg-[#f8f8fa] p-3 text-xs text-[#626b80]" /><button onClick={copyEmails} disabled={riskEmails.length === 0} className="mt-3 rounded-xl bg-[#3b2992] px-4 py-2.5 text-sm font-semibold text-white disabled:opacity-40">{copied ? "Copied!" : "Copy Emails"}</button></section><section className="rounded-[18px] border border-[#dfe2e8] bg-white p-5 shadow-[0_8px_28px_rgba(31,35,49,.055)] sm:p-6"><h3 className="text-sm font-bold text-[#17223b]">Send Alert Emails</h3><p className="mt-3 text-sm leading-6 text-[#6f7890]">Opens your default email app with all {riskEmails.length} filtered students BCC'd.</p><a href={mailtoHref} className={`mt-4 inline-block rounded-xl px-4 py-2.5 text-sm font-semibold text-white ${riskEmails.length === 0 ? "pointer-events-none bg-[#cfd2da]" : "bg-[#ef4444] hover:bg-[#dc3b3b]"}`}>Send Alert Emails ↗</a></section></div>
+          </>
+        )}
+
+        {data && view === "summary" && (
+          <>
+            <section className="mb-5"><h2 className="text-[25px] font-extrabold tracking-[-0.7px] text-[#17223b]">Attendance Summary</h2><p className="mt-2 text-sm leading-6 text-[#6f7890]">Overall class attendance health at a glance.</p></section>
+            <div className="mb-5 grid grid-cols-2 gap-3 md:grid-cols-4">{[["Total Students", data.totalStudents], ["Class Average (Current)", `${data.classAverageCurrMonth}%`], ["Class Average (Previous)", `${data.classAveragePrevMonth}%`], ["Overall Trend", `${data.overallTrendPct > 0 ? "+" : ""}${data.overallTrendPct}%`]].map(([label, value]) => <div key={String(label)} className="rounded-2xl border border-[#dfe2e8] bg-white p-5 shadow-[0_8px_28px_rgba(31,35,49,.055)]"><p className="text-xs font-medium text-[#626b80]">{label}</p><p className="mt-2 text-[25px] font-extrabold text-[#17223b]">{value}</p></div>)}</div>
+            <div className="grid grid-cols-1 gap-5 lg:grid-cols-2"><section className="rounded-[18px] border border-[#dfe2e8] bg-white p-5 shadow-[0_8px_28px_rgba(31,35,49,.055)] sm:p-6"><h3 className="text-base font-medium text-[#17223b]">Attendance Breakdown</h3><div className="mt-3"><ResponsiveContainer width="100%" height={270}><PieChart><Pie data={donutData} dataKey="value" nameKey="name" innerRadius={62} outerRadius={98} paddingAngle={2}>{donutData.map((entry, i) => <Cell key={i} fill={entry.color} />)}</Pie><Tooltip /><Legend wrapperStyle={{ fontSize: 11 }} /></PieChart></ResponsiveContainer></div></section><section className="rounded-[18px] border border-[#dfe2e8] bg-white p-5 shadow-[0_8px_28px_rgba(31,35,49,.055)] sm:p-6"><h3 className="text-base font-medium text-[#17223b]">Class Average: Previous vs Current</h3><div className="mt-3"><ResponsiveContainer width="100%" height={270}><BarChart data={compareBarData} margin={{ top: 8, right: 4, left: -16, bottom: 0 }}><CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#d9dce2" /><XAxis dataKey="name" fontSize={11} tickLine={false} /><YAxis fontSize={11} tickLine={false} /><Tooltip /><Bar dataKey="value" fill="#3b2992" radius={[4, 4, 0, 0]} /></BarChart></ResponsiveContainer></div></section></div>
+            <div className="mt-5 grid grid-cols-1 gap-5 md:grid-cols-2"><section className="rounded-[18px] border border-[#dfe2e8] bg-white p-5 shadow-[0_8px_28px_rgba(31,35,49,.055)] sm:p-6"><h3 className="text-sm font-bold text-[#17223b]">Core Summary</h3><table className="mt-3 w-full text-sm"><tbody>{[["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]].map(([label, value]) => <tr key={String(label)} className="border-b border-[#f0f1f4] last:border-0"><td className="py-3 text-[#626b80]">{label}</td><td className="py-3 text-right font-bold text-[#17223b]">{value}</td></tr>)}</tbody></table></section><section className="rounded-[18px] border border-[#dfe2e8] bg-white p-5 shadow-[0_8px_28px_rgba(31,35,49,.055)] sm:p-6"><h3 className="text-sm font-bold text-[#17223b]">Attendance Shifts</h3><table className="mt-3 w-full text-sm"><tbody><tr className="border-b border-[#f0f1f4]"><td className="py-3 text-[#626b80]">Improving Students</td><td className="py-3 text-right font-bold text-[#10a66a]">{data.trendCounts?.increasing ?? 0}</td></tr><tr className="border-b border-[#f0f1f4]"><td className="py-3 text-[#626b80]">Declining Students</td><td className="py-3 text-right font-bold text-red-500">{data.trendCounts?.decreasing ?? 0}</td></tr><tr><td className="py-3 text-[#626b80]">Stable Students</td><td className="py-3 text-right font-bold text-[#687286]">{data.trendCounts?.stable ?? 0}</td></tr></tbody></table></section></div>
+            <div className="mt-5 grid grid-cols-1 gap-5 md:grid-cols-2"><section className="rounded-[18px] border border-[#dfe2e8] bg-white p-5 shadow-[0_8px_28px_rgba(31,35,49,.055)] sm:p-6"><h3 className="text-sm font-bold text-[#17223b]">Top 5 Most Improved</h3><ol className="mt-3 space-y-2 text-sm">{topMovers.improved.map((s, i) => <li key={s.name} className="flex justify-between gap-4"><span className="text-[#626b80]">{i + 1}. {s.name}</span><span className="font-bold text-[#10a66a]">{s.change > 0 ? "+" : ""}{s.change}%</span></li>)}</ol></section><section className="rounded-[18px] border border-[#dfe2e8] bg-white p-5 shadow-[0_8px_28px_rgba(31,35,49,.055)] sm:p-6"><h3 className="text-sm font-bold text-[#17223b]">Top 5 Critical Decliners</h3><ol className="mt-3 space-y-2 text-sm">{topMovers.declined.map((s, i) => <li key={s.name} className="flex justify-between gap-4"><span className="text-[#626b80]">{i + 1}. {s.name}</span><span className="font-bold text-red-500">{s.change > 0 ? "+" : ""}{s.change}%</span></li>)}</ol></section></div>
+          </>
+        )}
+      </div>
+      <span className="sr-only">{sheetId || ""}</span>
     </div>
   );
 }

From d76ff1fd5cb010410df36ad2b020a7257d4fb7a7 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sun, 30 Aug 2026 19:45:04 +0530
Subject: [PATCH 42/80] Match Class Analysis sidebar and navbar to Subject
 Analysis theme

---
 components/AnalysisNav.tsx | 116 +++++++++++++++++++++++--------------
 1 file changed, 71 insertions(+), 45 deletions(-)

diff --git a/components/AnalysisNav.tsx b/components/AnalysisNav.tsx
index dceb4e0..de50772 100644
--- a/components/AnalysisNav.tsx
+++ b/components/AnalysisNav.tsx
@@ -34,17 +34,15 @@ export default function AnalysisNav({ sectionId }: Props) {
 
   return (
     <>
-      <aside className="classpulse-analysis-sidebar fixed inset-y-0 left-0 z-50 hidden w-[220px] shrink-0 flex-col border-r border-[#e7e5e1] bg-white lg:flex">
-        <div className="px-5 pt-6">
-          <Link href="/dashboard" className="flex items-center gap-3">
-            <span className="grid h-10 w-10 place-items-center rounded-xl bg-[#3b2992] text-white shadow-[0_10px_25px_rgba(59,41,146,0.20)]">
-              <BarChart3 size={21} strokeWidth={2.2} />
-            </span>
-            <span className="text-[20px] font-extrabold tracking-[-0.7px] text-[#17223b]">ClassPulse</span>
-          </Link>
-        </div>
+      <aside className="classpulse-analysis-sidebar fixed inset-y-0 left-0 z-50 hidden w-[195px] shrink-0 flex-col border-r border-[rgba(203,213,225,.78)] bg-white/60 px-3 py-[22px] backdrop-blur-[18px] lg:flex">
+        <Link href="/dashboard" className="flex items-center gap-2.5 px-2.5 pb-6 text-base font-bold text-[#172033]">
+          <span className="grid h-[34px] w-[34px] place-items-center rounded-[9px] bg-[linear-gradient(135deg,#251b62,#5544ba)] text-white shadow-[0_8px_20px_rgba(67,52,157,.22)]">
+            <BarChart3 size={18} />
+          </span>
+          <span>ClassPulse</span>
+        </Link>
 
-        <nav className="mt-8 space-y-1 px-3 text-sm font-medium text-[#626b80]">
+        <nav className="grid gap-1.5 text-[13px] font-medium text-[#667085]">
           {sidebarItems.map((item) => {
             const Icon = item.icon;
             const active = item.href === "/class-analysis";
@@ -52,8 +50,10 @@ export default function AnalysisNav({ sectionId }: Props) {
               <Link
                 key={item.href}
                 href={item.href}
-                className={`flex items-center gap-3 rounded-xl px-3 py-3 transition-colors ${
-                  active ? "bg-[#eeeaff] font-semibold text-[#38258e]" : "hover:bg-[#f6f4ff] hover:text-[#38258e]"
+                className={`flex items-center gap-[11px] rounded-[10px] px-3 py-[11px] transition-colors ${
+                  active
+                    ? "bg-[linear-gradient(90deg,rgba(79,70,229,.12),rgba(79,70,229,.04))] font-semibold text-[#312783]"
+                    : "hover:bg-[rgba(79,70,229,.06)] hover:text-[#2d246f]"
                 }`}
               >
                 <Icon size={18} />
@@ -64,8 +64,8 @@ export default function AnalysisNav({ sectionId }: Props) {
         </nav>
 
         <div className="mt-auto">
-          <div className="mx-4 border-t border-[#eeeeeb] py-4">
-            <div className="flex items-center gap-3 px-2">
+          <div className="border-t border-[rgba(203,213,225,.72)] px-2.5 pt-4">
+            <div className="flex items-center gap-3">
               <span className="grid h-9 w-9 place-items-center rounded-full bg-[#eeeaff] text-xs font-bold text-[#4b36a7]">F</span>
               <div className="min-w-0">
                 <p className="truncate text-xs font-semibold text-[#17223b]">Faculty</p>
@@ -75,7 +75,7 @@ export default function AnalysisNav({ sectionId }: Props) {
           </div>
           <button
             onClick={() => signOut({ callbackUrl: "/login" })}
-            className="mx-4 mb-4 flex w-[calc(100%-2rem)] items-center gap-3 rounded-xl px-3 py-2.5 text-xs font-medium text-[#626b80] transition-colors hover:bg-[#f6f4ff] hover:text-[#38258e]"
+            className="mt-3 flex w-full items-center gap-3 rounded-[10px] px-2.5 py-2.5 text-xs font-medium text-[#667085] transition-colors hover:bg-[rgba(79,70,229,.06)] hover:text-[#2d246f]"
           >
             <LogOut size={16} />
             Sign out
@@ -83,55 +83,81 @@ export default function AnalysisNav({ sectionId }: Props) {
         </div>
       </aside>
 
-      <nav className="mb-8 flex overflow-x-auto rounded-2xl border border-[#ddd9ee] bg-white/90 p-1.5 shadow-[0_8px_24px_rgba(31,35,49,0.05)] backdrop-blur">
-        {items.map((item) => {
-          const Icon = item.icon;
-          const active = router.asPath === item.href;
-          return (
-            <Link
-              key={item.href}
-              href={item.href}
-              className={`flex items-center gap-2 whitespace-nowrap rounded-xl px-5 py-3 text-sm transition-colors ${
-                active
-                  ? "bg-[#eeeaff] font-semibold text-[#38258e] shadow-[inset_0_0_0_1px_rgba(91,78,230,.16)]"
-                  : "text-[#626b80] hover:bg-[#f7f5ff] hover:text-[#38258e]"
-              }`}
-            >
-              <Icon size={17} />
-              {item.label}
-            </Link>
-          );
-        })}
+      <nav className="subject-analysis-nav" aria-label="Class analysis sections">
+        <div className="subject-analysis-nav__rail">
+          {items.map((item) => {
+            const Icon = item.icon;
+            const active = router.asPath === item.href;
+            return (
+              <Link key={item.href} href={item.href} className={`subject-analysis-nav__item ${active ? "is-active" : ""}`}>
+                <Icon size={17} strokeWidth={1.8} />
+                <span>{item.label}</span>
+              </Link>
+            );
+          })}
+        </div>
       </nav>
 
       <style jsx global>{`
-        body:has(.classpulse-analysis-sidebar) { background: #f7f6f2 !important; color: #17223b; }
-        body:has(.classpulse-analysis-sidebar) #__next { padding-left: 220px; }
+        body:has(.classpulse-analysis-sidebar) {
+          background: #f7f6f2 !important;
+          color: #17223b;
+        }
+
+        body:has(.classpulse-analysis-sidebar) #__next {
+          padding-left: 195px;
+        }
+
         body:has(.classpulse-analysis-sidebar) main > div {
           max-width: none !important;
           margin: 0 !important;
           min-height: 100vh;
-          padding: 34px 38px 48px !important;
+          padding: 18px 28px 28px !important;
           background: radial-gradient(circle at 82% 5%, rgba(91,78,230,.09), transparent 27%), linear-gradient(135deg, #fbfaf7 0%, #f7f6f2 58%, #f2f4f6 100%);
         }
+
         body:has(.classpulse-analysis-sidebar) main section.bg-white {
-          border: 1px solid #e1e3ea !important;
+          border-color: #e1e3ea !important;
           border-radius: 18px !important;
           box-shadow: 0 8px 28px rgba(31,35,49,.055) !important;
         }
-        body:has(.classpulse-analysis-sidebar) main .bg-gray-900 { background: #30227d !important; }
-        body:has(.classpulse-analysis-sidebar) main .bg-gray-100 { background: #f5f4f8 !important; }
+
+        body:has(.classpulse-analysis-sidebar) main .bg-gray-900 {
+          background: #30227d !important;
+        }
+
+        body:has(.classpulse-analysis-sidebar) main .bg-gray-100 {
+          background: #f5f4f8 !important;
+        }
+
         body:has(.classpulse-analysis-sidebar) main .border-gray-100,
-        body:has(.classpulse-analysis-sidebar) main .border-gray-200 { border-color: #e5e3ea !important; }
+        body:has(.classpulse-analysis-sidebar) main .border-gray-200 {
+          border-color: #e5e3ea !important;
+        }
+
         body:has(.classpulse-analysis-sidebar) main input,
         body:has(.classpulse-analysis-sidebar) main select,
-        body:has(.classpulse-analysis-sidebar) main textarea { border-color: #dfe1e8; border-radius: 11px; }
+        body:has(.classpulse-analysis-sidebar) main textarea {
+          border-color: #dfe1e8;
+          border-radius: 11px;
+        }
+
         body:has(.classpulse-analysis-sidebar) main input:focus,
         body:has(.classpulse-analysis-sidebar) main select:focus,
-        body:has(.classpulse-analysis-sidebar) main textarea:focus { outline: none; border-color: #6b5be7; box-shadow: 0 0 0 3px rgba(107,91,231,.10); }
+        body:has(.classpulse-analysis-sidebar) main textarea:focus {
+          outline: none;
+          border-color: #6b5be7;
+          box-shadow: 0 0 0 3px rgba(107,91,231,.10);
+        }
+
         @media (max-width: 1023px) {
-          body:has(.classpulse-analysis-sidebar) #__next { padding-left: 0; }
-          body:has(.classpulse-analysis-sidebar) main > div { padding: 24px 20px 36px !important; }
+          body:has(.classpulse-analysis-sidebar) #__next {
+            padding-left: 0;
+          }
+
+          body:has(.classpulse-analysis-sidebar) main > div {
+            padding: 18px 20px 28px !important;
+          }
         }
       `}</style>
     </>

From 39244e9c86d1a20e65695ac23c88c01bbeb8bc2d Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sun, 30 Aug 2026 19:46:00 +0530
Subject: [PATCH 43/80] Fix Class Analysis shell spacing to match Subject
 Analysis

---
 components/AnalysisNav.tsx | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/components/AnalysisNav.tsx b/components/AnalysisNav.tsx
index de50772..9955ff6 100644
--- a/components/AnalysisNav.tsx
+++ b/components/AnalysisNav.tsx
@@ -108,43 +108,44 @@ export default function AnalysisNav({ sectionId }: Props) {
           padding-left: 195px;
         }
 
-        body:has(.classpulse-analysis-sidebar) main > div {
+        body:has(.classpulse-analysis-sidebar) #__next > div {
           max-width: none !important;
+          width: auto !important;
           margin: 0 !important;
           min-height: 100vh;
           padding: 18px 28px 28px !important;
           background: radial-gradient(circle at 82% 5%, rgba(91,78,230,.09), transparent 27%), linear-gradient(135deg, #fbfaf7 0%, #f7f6f2 58%, #f2f4f6 100%);
         }
 
-        body:has(.classpulse-analysis-sidebar) main section.bg-white {
+        body:has(.classpulse-analysis-sidebar) #__next .bg-white {
           border-color: #e1e3ea !important;
           border-radius: 18px !important;
           box-shadow: 0 8px 28px rgba(31,35,49,.055) !important;
         }
 
-        body:has(.classpulse-analysis-sidebar) main .bg-gray-900 {
+        body:has(.classpulse-analysis-sidebar) #__next .bg-gray-900 {
           background: #30227d !important;
         }
 
-        body:has(.classpulse-analysis-sidebar) main .bg-gray-100 {
+        body:has(.classpulse-analysis-sidebar) #__next .bg-gray-100 {
           background: #f5f4f8 !important;
         }
 
-        body:has(.classpulse-analysis-sidebar) main .border-gray-100,
-        body:has(.classpulse-analysis-sidebar) main .border-gray-200 {
+        body:has(.classpulse-analysis-sidebar) #__next .border-gray-100,
+        body:has(.classpulse-analysis-sidebar) #__next .border-gray-200 {
           border-color: #e5e3ea !important;
         }
 
-        body:has(.classpulse-analysis-sidebar) main input,
-        body:has(.classpulse-analysis-sidebar) main select,
-        body:has(.classpulse-analysis-sidebar) main textarea {
+        body:has(.classpulse-analysis-sidebar) #__next input,
+        body:has(.classpulse-analysis-sidebar) #__next select,
+        body:has(.classpulse-analysis-sidebar) #__next textarea {
           border-color: #dfe1e8;
           border-radius: 11px;
         }
 
-        body:has(.classpulse-analysis-sidebar) main input:focus,
-        body:has(.classpulse-analysis-sidebar) main select:focus,
-        body:has(.classpulse-analysis-sidebar) main textarea:focus {
+        body:has(.classpulse-analysis-sidebar) #__next input:focus,
+        body:has(.classpulse-analysis-sidebar) #__next select:focus,
+        body:has(.classpulse-analysis-sidebar) #__next textarea:focus {
           outline: none;
           border-color: #6b5be7;
           box-shadow: 0 0 0 3px rgba(107,91,231,.10);
@@ -155,7 +156,7 @@ export default function AnalysisNav({ sectionId }: Props) {
             padding-left: 0;
           }
 
-          body:has(.classpulse-analysis-sidebar) main > div {
+          body:has(.classpulse-analysis-sidebar) #__next > div {
             padding: 18px 20px 28px !important;
           }
         }

From e370238d8002a0dce0807b4226662b9f56febf62 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sun, 30 Aug 2026 19:46:17 +0530
Subject: [PATCH 44/80] Match Class Analysis view spacing to Subject Analysis

---
 components/AnalysisNav.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/components/AnalysisNav.tsx b/components/AnalysisNav.tsx
index 9955ff6..c2b2996 100644
--- a/components/AnalysisNav.tsx
+++ b/components/AnalysisNav.tsx
@@ -117,6 +117,11 @@ export default function AnalysisNav({ sectionId }: Props) {
           background: radial-gradient(circle at 82% 5%, rgba(91,78,230,.09), transparent 27%), linear-gradient(135deg, #fbfaf7 0%, #f7f6f2 58%, #f2f4f6 100%);
         }
 
+        body:has(.classpulse-analysis-sidebar) #__next .classpulse-attendance-page > div > .mb-7 {
+          margin-top: 12px !important;
+          margin-bottom: 18px !important;
+        }
+
         body:has(.classpulse-analysis-sidebar) #__next .bg-white {
           border-color: #e1e3ea !important;
           border-radius: 18px !important;

From 784f3ef2eb77a9ce5b2dae02b954c7ea54680315 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sun, 30 Aug 2026 20:29:07 +0530
Subject: [PATCH 45/80] Fix class-to-section analysis authorization resolution

---
 pages/api/analysis/section/[sectionId].ts | 41 ++++++++++++++++++++---
 1 file changed, 37 insertions(+), 4 deletions(-)

diff --git a/pages/api/analysis/section/[sectionId].ts b/pages/api/analysis/section/[sectionId].ts
index fbe1cf1..c8c9191 100644
--- a/pages/api/analysis/section/[sectionId].ts
+++ b/pages/api/analysis/section/[sectionId].ts
@@ -13,14 +13,47 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   const role = (session.user as any).role;
 
   // The analysis UI is section-based, but older dashboard/class-analysis links
-  // used a class id. Resolve either form here so navigation cannot break access.
-  const section = await prisma.section.findUnique({ where: { id: requestedId } });
-  const resolvedSection = section || await prisma.section.findFirst({ where: { classId: requestedId } });
+  // may still provide a class id. Resolve a direct section id first. If the id
+  // is a class id, resolve to a section the current teacher is actually allowed
+  // to view instead of blindly selecting the first section in that class.
+  let resolvedSection = await prisma.section.findUnique({
+    where: { id: requestedId },
+  });
+
+  if (!resolvedSection) {
+    if (role === "ADMIN") {
+      resolvedSection = await prisma.section.findFirst({
+        where: { classId: requestedId },
+      });
+    } else {
+      resolvedSection = await prisma.section.findFirst({
+        where: {
+          classId: requestedId,
+          OR: [
+            { class: { proctorId: userId } },
+            {
+              subjects: {
+                some: {
+                  assignments: {
+                    some: { teacherId: userId },
+                  },
+                },
+              },
+            },
+          ],
+        },
+      });
+    }
+  }
+
   if (!resolvedSection) {
-    return res.status(404).json({ error: "Section not found" });
+    return res.status(404).json({ error: "Section not found or not assigned to you" });
   }
+
   const sectionId = resolvedSection.id;
 
+  // Keep the existing authorization check for direct section URLs as the final
+  // guard. This does not weaken access; it only fixes legacy class-id routing.
   const allowed = await assertTeacherCanViewSection(userId, role, sectionId);
   if (!allowed) {
     return res.status(403).json({ error: "Not authorized for this section" });

From d0ee096e36a7b64ef434f7a1694e8b4cf2efeda5 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sun, 30 Aug 2026 20:33:49 +0530
Subject: [PATCH 46/80] Fix class analysis routing to use class IDs

---
 pages/class-analysis/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/class-analysis/index.tsx b/pages/class-analysis/index.tsx
index e19a281..e808e41 100644
--- a/pages/class-analysis/index.tsx
+++ b/pages/class-analysis/index.tsx
@@ -27,7 +27,7 @@ export default function ClassAnalysisIndex({ classes, teacherName }: Props) {
       <main className="w-full lg:ml-[220px]"><div className="relative min-h-screen overflow-hidden"><div className="pointer-events-none absolute right-0 top-0 h-[330px] w-[650px] opacity-70" style={{ background: "radial-gradient(circle at 70% 20%, rgba(111,91,231,.16), transparent 48%), linear-gradient(145deg, transparent 35%, rgba(111,91,231,.07) 75%, transparent)" }} /><div className="relative mx-auto max-w-[1200px] px-5 py-8 sm:px-8 lg:px-12 lg:py-12">
         <Link href="/dashboard" className="inline-flex items-center gap-2 text-sm font-semibold text-[#5b4ee6] hover:underline"><ArrowLeft size={16} /> Back to Dashboard</Link>
         <div className="mt-8"><p className="text-sm font-semibold text-[#5b4ee6]">Class Analysis</p><h1 className="mt-2 text-[34px] font-extrabold tracking-[-1.4px] sm:text-[40px]">Choose a class</h1><p className="mt-2 max-w-[650px] text-sm leading-6 text-[#6f7890]">Select a class assigned to you to open its analysis.</p></div>
-        <section className="mt-8 min-h-[430px] rounded-2xl border border-[#e5e4e1] bg-white p-6 shadow-[0_8px_30px_rgba(31,35,49,0.05)] sm:p-8"><div className="space-y-3">{classes.map((classOption) => <Link key={classOption.id} href={`/section-analysis/${classOption.id}/attendance`} className="group flex items-center gap-4 rounded-xl border border-[#e4e4e8] bg-white px-5 py-4 transition hover:-translate-y-0.5 hover:border-[#cfc7ff] hover:bg-[#fcfbff] hover:shadow-[0_8px_24px_rgba(57,38,143,0.08)]"><span className="grid h-12 w-12 shrink-0 place-items-center rounded-full bg-[#f0edff] text-[#6b55df]"><BookOpen size={21} /></span><span className="min-w-0 flex-1"><span className="block text-[16px] font-bold text-[#17223b]">{classOption.label}</span><span className="mt-1 block text-xs text-[#7a8295]">Open attendance, academic and student analysis</span></span><ArrowRight size={19} className="text-[#747d91] transition group-hover:translate-x-1 group-hover:text-[#4b36a7]" /></Link>)}{!classes.length && <div className="rounded-xl border border-dashed border-[#dfe2e8] bg-[#fafafa] p-6 text-sm text-[#747d91]">No classes are assigned to you.</div>}</div></section>
+        <section className="mt-8 min-h-[430px] rounded-2xl border border-[#e5e4e1] bg-white p-6 shadow-[0_8px_30px_rgba(31,35,49,0.05)] sm:p-8"><div className="space-y-3">{classes.map((classOption) => <Link key={classOption.id} href={`/class-analysis/${classOption.id}`} className="group flex items-center gap-4 rounded-xl border border-[#e4e4e8] bg-white px-5 py-4 transition hover:-translate-y-0.5 hover:border-[#cfc7ff] hover:bg-[#fcfbff] hover:shadow-[0_8px_24px_rgba(57,38,143,0.08)]"><span className="grid h-12 w-12 shrink-0 place-items-center rounded-full bg-[#f0edff] text-[#6b55df]"><BookOpen size={21} /></span><span className="min-w-0 flex-1"><span className="block text-[16px] font-bold text-[#17223b]">{classOption.label}</span><span className="mt-1 block text-xs text-[#7a8295]">Open attendance, academic and student analysis</span></span><ArrowRight size={19} className="text-[#747d91] transition group-hover:translate-x-1 group-hover:text-[#4b36a7]" /></Link>)}{!classes.length && <div className="rounded-xl border border-dashed border-[#dfe2e8] bg-[#fafafa] p-6 text-sm text-[#747d91]">No classes are assigned to you.</div>}</div></section>
       </div></div></main>
     </div>
   );
@@ -39,6 +39,6 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
   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 classes = new Map<string, ClassOption>();
-  for (const section of sections) classes.set(section.class.id, { id: section.id, label: formatClassLabel(section.class.department.name, section.class.semester, section.name) });
+  for (const section of sections) classes.set(section.class.id, { id: section.class.id, label: formatClassLabel(section.class.department.name, section.class.semester, section.name) });
   return { props: { classes: Array.from(classes.values()), teacherName: session.user.name || session.user.email } };
 };

From 081ac1f343a389c977f1fc9e910ffac9d29d475c Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sun, 30 Aug 2026 20:45:15 +0530
Subject: [PATCH 47/80] Make class analysis navbar match subject analysis

---
 components/AnalysisNav.tsx | 184 +++++--------------------------------
 1 file changed, 23 insertions(+), 161 deletions(-)

diff --git a/components/AnalysisNav.tsx b/components/AnalysisNav.tsx
index c2b2996..dc2679d 100644
--- a/components/AnalysisNav.tsx
+++ b/components/AnalysisNav.tsx
@@ -1,171 +1,33 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { signOut } from "next-auth/react";
-import {
-  BarChart3,
-  BookOpen,
-  Database,
-  LayoutDashboard,
-  LogOut,
-  GraduationCap,
-  FileText,
-} from "lucide-react";
+import { BarChart3, FileText, GraduationCap, LayoutDashboard } from "lucide-react";
 
-type Props = {
-  sectionId: string;
-};
+type Props = { sectionId: string };
+
+const items = [
+  { label: "Attendance", icon: BarChart3, path: "attendance" },
+  { label: "Academic", icon: GraduationCap, path: "academic" },
+  { label: "Overall", icon: LayoutDashboard, path: "overall" },
+  { label: "Student Report", icon: FileText, path: "students" },
+];
 
 export default function AnalysisNav({ sectionId }: Props) {
   const router = useRouter();
 
-  const items = [
-    { label: "Attendance", href: `/section-analysis/${sectionId}/attendance`, icon: BarChart3 },
-    { label: "Academic", href: `/section-analysis/${sectionId}/academic`, icon: GraduationCap },
-    { label: "Overall", href: `/section-analysis/${sectionId}/overall`, icon: LayoutDashboard },
-    { label: "Student Report", href: `/section-analysis/${sectionId}/students`, icon: FileText },
-  ];
-
-  const sidebarItems = [
-    { label: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
-    { label: "Class Analysis", href: "/class-analysis", icon: BarChart3 },
-    { label: "Subject Analysis", href: "/subject-analysis", icon: BookOpen },
-    { label: "Raw Data", href: "/raw-data", icon: Database },
-  ];
-
   return (
-    <>
-      <aside className="classpulse-analysis-sidebar fixed inset-y-0 left-0 z-50 hidden w-[195px] shrink-0 flex-col border-r border-[rgba(203,213,225,.78)] bg-white/60 px-3 py-[22px] backdrop-blur-[18px] lg:flex">
-        <Link href="/dashboard" className="flex items-center gap-2.5 px-2.5 pb-6 text-base font-bold text-[#172033]">
-          <span className="grid h-[34px] w-[34px] place-items-center rounded-[9px] bg-[linear-gradient(135deg,#251b62,#5544ba)] text-white shadow-[0_8px_20px_rgba(67,52,157,.22)]">
-            <BarChart3 size={18} />
-          </span>
-          <span>ClassPulse</span>
-        </Link>
-
-        <nav className="grid gap-1.5 text-[13px] font-medium text-[#667085]">
-          {sidebarItems.map((item) => {
-            const Icon = item.icon;
-            const active = item.href === "/class-analysis";
-            return (
-              <Link
-                key={item.href}
-                href={item.href}
-                className={`flex items-center gap-[11px] rounded-[10px] px-3 py-[11px] transition-colors ${
-                  active
-                    ? "bg-[linear-gradient(90deg,rgba(79,70,229,.12),rgba(79,70,229,.04))] font-semibold text-[#312783]"
-                    : "hover:bg-[rgba(79,70,229,.06)] hover:text-[#2d246f]"
-                }`}
-              >
-                <Icon size={18} />
-                {item.label}
-              </Link>
-            );
-          })}
-        </nav>
-
-        <div className="mt-auto">
-          <div className="border-t border-[rgba(203,213,225,.72)] px-2.5 pt-4">
-            <div className="flex items-center gap-3">
-              <span className="grid h-9 w-9 place-items-center rounded-full bg-[#eeeaff] text-xs font-bold text-[#4b36a7]">F</span>
-              <div className="min-w-0">
-                <p className="truncate text-xs font-semibold text-[#17223b]">Faculty</p>
-                <p className="text-[11px] text-[#8991a2]">Teacher Portal</p>
-              </div>
-            </div>
-          </div>
-          <button
-            onClick={() => signOut({ callbackUrl: "/login" })}
-            className="mt-3 flex w-full items-center gap-3 rounded-[10px] px-2.5 py-2.5 text-xs font-medium text-[#667085] transition-colors hover:bg-[rgba(79,70,229,.06)] hover:text-[#2d246f]"
-          >
-            <LogOut size={16} />
-            Sign out
-          </button>
-        </div>
-      </aside>
-
-      <nav className="subject-analysis-nav" aria-label="Class analysis sections">
-        <div className="subject-analysis-nav__rail">
-          {items.map((item) => {
-            const Icon = item.icon;
-            const active = router.asPath === item.href;
-            return (
-              <Link key={item.href} href={item.href} className={`subject-analysis-nav__item ${active ? "is-active" : ""}`}>
-                <Icon size={17} strokeWidth={1.8} />
-                <span>{item.label}</span>
-              </Link>
-            );
-          })}
-        </div>
-      </nav>
-
-      <style jsx global>{`
-        body:has(.classpulse-analysis-sidebar) {
-          background: #f7f6f2 !important;
-          color: #17223b;
-        }
-
-        body:has(.classpulse-analysis-sidebar) #__next {
-          padding-left: 195px;
-        }
-
-        body:has(.classpulse-analysis-sidebar) #__next > div {
-          max-width: none !important;
-          width: auto !important;
-          margin: 0 !important;
-          min-height: 100vh;
-          padding: 18px 28px 28px !important;
-          background: radial-gradient(circle at 82% 5%, rgba(91,78,230,.09), transparent 27%), linear-gradient(135deg, #fbfaf7 0%, #f7f6f2 58%, #f2f4f6 100%);
-        }
-
-        body:has(.classpulse-analysis-sidebar) #__next .classpulse-attendance-page > div > .mb-7 {
-          margin-top: 12px !important;
-          margin-bottom: 18px !important;
-        }
-
-        body:has(.classpulse-analysis-sidebar) #__next .bg-white {
-          border-color: #e1e3ea !important;
-          border-radius: 18px !important;
-          box-shadow: 0 8px 28px rgba(31,35,49,.055) !important;
-        }
-
-        body:has(.classpulse-analysis-sidebar) #__next .bg-gray-900 {
-          background: #30227d !important;
-        }
-
-        body:has(.classpulse-analysis-sidebar) #__next .bg-gray-100 {
-          background: #f5f4f8 !important;
-        }
-
-        body:has(.classpulse-analysis-sidebar) #__next .border-gray-100,
-        body:has(.classpulse-analysis-sidebar) #__next .border-gray-200 {
-          border-color: #e5e3ea !important;
-        }
-
-        body:has(.classpulse-analysis-sidebar) #__next input,
-        body:has(.classpulse-analysis-sidebar) #__next select,
-        body:has(.classpulse-analysis-sidebar) #__next textarea {
-          border-color: #dfe1e8;
-          border-radius: 11px;
-        }
-
-        body:has(.classpulse-analysis-sidebar) #__next input:focus,
-        body:has(.classpulse-analysis-sidebar) #__next select:focus,
-        body:has(.classpulse-analysis-sidebar) #__next textarea:focus {
-          outline: none;
-          border-color: #6b5be7;
-          box-shadow: 0 0 0 3px rgba(107,91,231,.10);
-        }
-
-        @media (max-width: 1023px) {
-          body:has(.classpulse-analysis-sidebar) #__next {
-            padding-left: 0;
-          }
-
-          body:has(.classpulse-analysis-sidebar) #__next > div {
-            padding: 18px 20px 28px !important;
-          }
-        }
-      `}</style>
-    </>
+    <nav className="subject-analysis-nav" aria-label="Class analysis sections">
+      <div className="subject-analysis-nav__rail">
+        {items.map(({ label, icon: Icon, path }) => {
+          const href = `/section-analysis/${sectionId}/${path}`;
+          const active = router.pathname.endsWith(`/${path}`);
+          return (
+            <Link key={path} href={href} className={`subject-analysis-nav__item ${active ? "is-active" : ""}`}>
+              <Icon size={17} strokeWidth={1.8} />
+              <span>{label}</span>
+            </Link>
+          );
+        })}
+      </div>
+    </nav>
   );
 }

From d8aa2494f38ba6322a73d055b3f7ee56e381873a Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sun, 30 Aug 2026 20:45:36 +0530
Subject: [PATCH 48/80] Copy subject analysis structure to class analysis
 attendance

---
 .../[sectionId]/attendance.tsx                | 390 +++---------------
 1 file changed, 57 insertions(+), 333 deletions(-)

diff --git a/pages/section-analysis/[sectionId]/attendance.tsx b/pages/section-analysis/[sectionId]/attendance.tsx
index 522a0fa..900a4bd 100644
--- a/pages/section-analysis/[sectionId]/attendance.tsx
+++ b/pages/section-analysis/[sectionId]/attendance.tsx
@@ -1,32 +1,18 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState, type ReactNode } from "react";
 import { useRouter } from "next/router";
-import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  CartesianGrid,
-  PieChart,
-  Pie,
-  Cell,
-  Legend,
-} from "recharts";
-import { Gauge, Info, SlidersHorizontal, Sparkles, UsersRound } from "lucide-react";
-
+import { Bar, BarChart, CartesianGrid, Cell, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { AlertCircle, BarChart3, BookOpen, Download, Gauge, GraduationCap, LayoutDashboard, Mail, RefreshCw, Search, SlidersHorizontal, Sparkles, Users } from "lucide-react";
 import AnalysisNav from "../../../components/AnalysisNav";
+import { RawDataButton } from "../../../components/AnalysisWidgets";
 import { SectionAnalysis } from "../../../lib/analysisClass";
 
-type AttendanceView = "trend" | "risk" | "summary";
-
-const TREND_COLORS = ["#14a66a", "#ef4444", "#5278c9"];
-const ATTENDANCE_COLORS = ["#ef4444", "#f97316", "#f59e0b", "#16a66a"];
+type AttendanceView = "trend" | "risk";
+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();
 
-export default function AttendancePage() {
+export default function ClassAttendancePage() {
   const router = useRouter();
   const { sectionId } = router.query;
-
   const [view, setView] = useState<AttendanceView>("trend");
   const [data, setData] = useState<SectionAnalysis | null>(null);
   const [sheetId, setSheetId] = useState<string | null>(null);
@@ -34,331 +20,69 @@ export default function AttendancePage() {
   const [loading, setLoading] = useState(true);
   const [syncing, setSyncing] = useState(false);
   const [error, setError] = useState("");
-
   const [previousMonth, setPreviousMonth] = useState("");
   const [currentMonth, setCurrentMonth] = useState("");
   const [trendCriteria, setTrendCriteria] = useState(5);
-
+  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 },
-      ]
-    : [];
-
-  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("; ");
-
-  async function copyEmails() {
-    try {
-      await navigator.clipboard.writeText(riskEmailsText);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch {
-      // The textarea remains selectable if clipboard access is unavailable.
-    }
-  }
-
-  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."
-  )}`;
-
-  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: "#16a66a" },
-        { name: "Satisfactory (50-74%)", value: attendanceBuckets.to74, color: "#5278c9" },
-        { name: "Needs Attention (30-49%)", value: attendanceBuckets.to49, color: "#f59e0b" },
-        { name: "Critical Risk (<30%)", value: attendanceBuckets.below30, color: "#ef4444" },
-      ]
-    : [];
-
-  const compareBarData = data
-    ? [
-        { name: data.monthsUsed?.previous || "Previous", value: data.classAveragePrevMonth },
-        { name: data.monthsUsed?.current || "Current", value: data.classAverageCurrMonth },
-      ]
-    : [];
-
-  const classAverageChange = data ? round1(data.classAverageCurrMonth - data.classAveragePrevMonth) : 0;
-  const improvingStudents = data?.trendCounts?.increasing ?? 0;
-  const totalStudents = data?.totalStudents ?? data?.students?.length ?? 0;
-
-  return (
-    <div className="classpulse-attendance-page min-h-screen text-[#17223b]">
-      <div className="mx-auto w-full max-w-[1180px]">
-        <header className="mb-5 flex items-start justify-between gap-6">
-          <div>
-            <div className="flex items-center gap-2">
-              <h1 className="text-[20px] font-bold tracking-[-0.4px] text-[#17223b]">Class / Section Analysis</h1>
-              {computedAt && <span className="text-xs text-[#8991a2]">• Last synced {new Date(computedAt).toLocaleString()}</span>}
-            </div>
-          </div>
-          <button
-            onClick={syncAnalysis}
-            disabled={syncing}
-            className="shrink-0 rounded-xl bg-[#3b2992] px-5 py-2.5 text-sm font-semibold text-white shadow-[0_8px_20px_rgba(59,41,146,.18)] transition hover:bg-[#30227d] disabled:cursor-not-allowed disabled:opacity-60"
-          >
-            {syncing ? "Syncing..." : "Sync now"}
-          </button>
-        </header>
-
-        {typeof sectionId === "string" && <AnalysisNav sectionId={sectionId} />}
-
-        <div className="mb-7 flex gap-2">
-          {(["trend", "risk", "summary"] as AttendanceView[]).map((v) => (
-            <button
-              key={v}
-              onClick={() => setView(v)}
-              className={`rounded-xl px-4 py-2.5 text-sm font-semibold transition ${
-                view === v
-                  ? "bg-[#3b2992] text-white shadow-[0_7px_18px_rgba(59,41,146,.18)]"
-                  : "border border-transparent bg-[#f1f0f3] text-[#626b80] hover:bg-[#e9e6f5] hover:text-[#38258e]"
-              }`}
-            >
-              {v === "risk" ? "At Risk" : v.charAt(0).toUpperCase() + v.slice(1)}
-            </button>
-          ))}
-        </div>
-
-        {error && <div className="mb-6 rounded-xl border border-red-100 bg-red-50 px-4 py-3 text-sm text-red-700">{error}</div>}
-        {loading && !data && <div className="rounded-2xl border border-[#e1e3ea] bg-white p-8 text-sm text-[#6f7890]">Loading attendance analysis...</div>}
-
-        {data && view === "trend" && (
-          <>
-            <section className="mb-5 flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
-              <div className="max-w-[560px]">
-                <h2 className="text-[25px] font-extrabold tracking-[-0.7px] text-[#17223b]">Attendance Trend</h2>
-                <p className="mt-2 text-sm leading-6 text-[#6f7890]">
-                  Compare attendance between two months and identify increasing, decreasing, and stable students.
-                </p>
-              </div>
-              <div className="grid w-full grid-cols-1 gap-3 sm:grid-cols-3 lg:w-[650px]">
-                <div className="rounded-2xl border border-[#dfe2e8] bg-white px-5 py-4 shadow-[0_7px_24px_rgba(31,35,49,.045)]">
-                  <div className="flex items-center gap-3">
-                    <span className="grid h-10 w-10 place-items-center rounded-full bg-[#f0edff] text-[#5b4ee6]"><UsersRound size={19} /></span>
-                    <div><p className="text-xs font-medium text-[#626b80]">Class Average ({data.monthsUsed?.previous || "Previous"})</p><p className="mt-1 text-[25px] font-extrabold leading-none text-[#17223b]">{data.classAveragePrevMonth}%</p></div>
-                  </div>
-                </div>
-                <div className="rounded-2xl border border-[#dfe2e8] bg-white px-5 py-4 shadow-[0_7px_24px_rgba(31,35,49,.045)]">
-                  <div className="flex items-center gap-3">
-                    <span className="grid h-10 w-10 place-items-center rounded-full bg-[#f0edff] text-[#5b4ee6]"><Gauge size={19} /></span>
-                    <div><p className="text-xs font-medium text-[#626b80]">Class Average ({data.monthsUsed?.current || "Current"})</p><p className="mt-1 text-[25px] font-extrabold leading-none text-[#17223b]">{data.classAverageCurrMonth}% <span className={`ml-1 text-xs font-bold ${classAverageChange >= 0 ? "text-[#10a66a]" : "text-red-500"}`}>{classAverageChange > 0 ? "+" : ""}{classAverageChange}%</span></p></div>
-                  </div>
-                </div>
-                <div className="rounded-2xl border border-[#dfe2e8] bg-white px-5 py-4 shadow-[0_7px_24px_rgba(31,35,49,.045)]">
-                  <div className="flex items-center gap-3">
-                    <span className="grid h-10 w-10 place-items-center rounded-full bg-[#f0edff] text-[#5b4ee6]"><Sparkles size={19} /></span>
-                    <div><p className="text-xs font-medium text-[#626b80]">Students Improving</p><p className="mt-1 text-[25px] font-extrabold leading-none text-[#17223b]">{improvingStudents}</p><p className="mt-1 text-[11px] text-[#8991a2]">{totalStudents ? round1((improvingStudents / totalStudents) * 100) : 0}% of total students</p></div>
-                  </div>
-                </div>
-              </div>
-            </section>
-
-            <section className="mb-5 rounded-[18px] border border-[#dfe2e8] bg-white p-5 shadow-[0_8px_28px_rgba(31,35,49,.055)] sm:p-6">
-              <h3 className="text-sm font-bold text-[#17223b]">Trend Comparison Settings</h3>
-              <div className="mt-4 grid grid-cols-1 gap-3 lg:grid-cols-[1fr_1fr_1fr_1.05fr] lg:items-end">
-                <div>
-                  <label className="mb-2 block text-xs font-medium text-[#626b80]">First Month</label>
-                  <select value={previousMonth} onChange={(e) => setPreviousMonth(e.target.value)} className="w-full rounded-xl border border-[#dfe2e8] bg-white px-3.5 py-2.5 text-sm text-[#17223b] outline-none transition focus:border-[#6b5be7] focus:ring-2 focus:ring-[#6b5be7]/10">
-                    <option value="">Select month</option>
-                    {availableMonths.map((m: string) => <option key={m} value={m}>{m}</option>)}
-                  </select>
-                </div>
-                <div>
-                  <label className="mb-2 block text-xs font-medium text-[#626b80]">Second Month</label>
-                  <select value={currentMonth} onChange={(e) => setCurrentMonth(e.target.value)} className="w-full rounded-xl border border-[#dfe2e8] bg-white px-3.5 py-2.5 text-sm text-[#17223b] outline-none transition focus:border-[#6b5be7] focus:ring-2 focus:ring-[#6b5be7]/10">
-                    <option value="">Select month</option>
-                    {availableMonths.map((m: string) => <option key={m} value={m}>{m}</option>)}
-                  </select>
-                </div>
-                <div>
-                  <label className="mb-2 block text-xs font-medium text-[#626b80]">Trend Criteria (%)</label>
-                  <input type="number" min="0" max="100" value={trendCriteria} onChange={(e) => setTrendCriteria(Number(e.target.value))} className="w-full rounded-xl border border-[#dfe2e8] px-3.5 py-2.5 text-sm text-[#17223b] outline-none transition focus:border-[#6b5be7] focus:ring-2 focus:ring-[#6b5be7]/10" />
-                </div>
-                <button onClick={applyTrendSettings} disabled={!previousMonth || !currentMonth || previousMonth === currentMonth} className="flex items-center justify-center gap-2 rounded-xl bg-[#3b2992] px-4 py-2.5 text-sm font-semibold text-white shadow-[0_7px_18px_rgba(59,41,146,.18)] transition hover:bg-[#30227d] disabled:cursor-not-allowed disabled:opacity-40"><SlidersHorizontal size={16} /> Apply Comparison</button>
-              </div>
-              <div className="mt-3 flex items-center gap-2 rounded-xl border border-[#dce7fb] bg-[#f8fbff] px-3.5 py-2.5 text-xs text-[#5d6d87]"><Info size={15} className="shrink-0 text-[#617aa8]" /> Trend calculation: a change of <span className="font-bold text-[#34445f]">±{trendCriteria} percentage points</span> or more is Increasing or Decreasing.</div>
-            </section>
-
-            <div className="grid grid-cols-1 gap-5 lg:grid-cols-[1.03fr_.97fr]">
-              <section className="rounded-[18px] border border-[#dfe2e8] bg-white p-5 shadow-[0_8px_28px_rgba(31,35,49,.055)] sm:p-6">
-                <div className="mb-4 flex items-center justify-between gap-4"><div className="flex items-center gap-3"><h3 className="text-sm font-bold text-[#17223b]">Student Trend Analysis</h3><span className="rounded-full bg-[#f0edff] px-2.5 py-1 text-[10px] font-semibold text-[#5b4ee6]">{totalStudents} Students</span></div></div>
-                <div className="max-h-[600px] overflow-y-auto pr-1">
-                  <table className="w-full text-sm">
-                    <thead className="sticky top-0 bg-white"><tr className="border-b border-[#e7e8ec] text-left text-[11px] font-semibold text-[#8991a2]"><th className="py-3 pr-3">Student Name</th><th className="py-3 pr-3">{data.monthsUsed?.previous || "Month 1"}</th><th className="py-3 pr-3">{data.monthsUsed?.current || "Month 2"}</th><th className="py-3 pr-3">Change</th><th className="py-3">Trend</th></tr></thead>
-                    <tbody>
-                      {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";
-                        const initials = String(student.name || "S").split(" ").filter(Boolean).slice(0, 2).map((part: string) => part[0]).join("").toUpperCase();
-                        return <tr key={student.enrollmentNo} className="border-b border-[#f0f1f4] last:border-0"><td className="py-3 pr-3"><div className="flex items-center gap-2.5"><span className="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-[#f0edff] text-[10px] font-bold text-[#5b4ee6]">{initials}</span><span className="whitespace-nowrap font-medium text-[#17223b]">{student.name}</span></div></td><td className="py-3 pr-3 text-[#6f7890]">{previous}%</td><td className="py-3 pr-3 text-[#6f7890]">{current}%</td><td className={`py-3 pr-3 font-bold ${change > 0 ? "text-[#10a66a]" : change < 0 ? "text-red-500" : "text-[#8991a2]"}`}>{change > 0 ? "+" : ""}{change}%</td><td className="py-3"><span className={`rounded-full px-2.5 py-1 text-[10px] font-semibold ${trend === "Increasing" ? "bg-[#e8f8f1] text-[#0d9960]" : trend === "Decreasing" ? "bg-[#fff0f0] text-[#e23c3c]" : "bg-[#f1f3f6] text-[#687286]"}`}>{trend === "Decreasing" ? "↓ " : trend === "Increasing" ? "↑ " : "– "}{trend}</span></td></tr>;
-                      })}
-                    </tbody>
-                  </table>
-                </div>
-              </section>
-
-              <div className="space-y-5">
-                <section className="rounded-[18px] border border-[#dfe2e8] bg-white p-5 shadow-[0_8px_28px_rgba(31,35,49,.055)] sm:p-6"><h3 className="text-base font-medium text-[#17223b]">Trend Distribution</h3><p className="mt-1 text-[11px] text-[#8991a2]">Click a column to inspect the students in that trend.</p><div className="mt-3"><ResponsiveContainer width="100%" height={235}><BarChart data={trendData} margin={{ top: 8, right: 4, left: -16, bottom: 0 }}><CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#d9dce2" /><XAxis dataKey="name" fontSize={11} tickLine={false} axisLine={{ stroke: "#8b9099" }} /><YAxis fontSize={11} allowDecimals={false} tickLine={false} axisLine={{ stroke: "#8b9099" }} /><Tooltip /><Bar dataKey="count" radius={[4, 4, 0, 0]}>{trendData.map((entry, index) => <Cell key={`trend-${entry.name}`} fill={TREND_COLORS[index]} />)}</Bar></BarChart></ResponsiveContainer></div></section>
-                <section className="rounded-[18px] border border-[#dfe2e8] bg-white p-5 shadow-[0_8px_28px_rgba(31,35,49,.055)] sm:p-6"><h3 className="text-base font-medium text-[#17223b]">Attendance Distribution</h3><p className="mt-1 text-[11px] text-[#8991a2]">Attendance ranges for the selected current month.</p><div className="mt-3"><ResponsiveContainer width="100%" height={235}><BarChart data={attendanceDistribution} margin={{ top: 8, right: 4, left: -16, bottom: 0 }}><CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#d9dce2" /><XAxis dataKey="name" fontSize={10} tickLine={false} axisLine={{ stroke: "#8b9099" }} /><YAxis fontSize={11} allowDecimals={false} tickLine={false} axisLine={{ stroke: "#8b9099" }} /><Tooltip /><Bar dataKey="count" radius={[4, 4, 0, 0]}>{attendanceDistribution.map((entry, index) => <Cell key={`attendance-${entry.name}`} fill={ATTENDANCE_COLORS[index]} />)}</Bar></BarChart></ResponsiveContainer></div></section>
-              </div>
-            </div>
-          </>
-        )}
-
-        {data && view === "risk" && (
-          <>
-            <section className="mb-5"><h2 className="text-[25px] font-extrabold tracking-[-0.7px] text-[#17223b]">At Risk Students</h2><p className="mt-2 text-sm leading-6 text-[#6f7890]">Filter students by attendance range and trend, then copy or email the list directly.</p></section>
-            <section className="mb-5 rounded-[18px] border border-[#dfe2e8] bg-white p-5 shadow-[0_8px_28px_rgba(31,35,49,.055)] sm:p-6"><h3 className="text-sm font-bold text-[#17223b]">Filter Criteria</h3><div className="mt-4 grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-4"><div><label className="mb-2 block text-xs font-medium text-[#626b80]">Lower Bound (%)</label><input type="number" min="0" max="100" value={lowerBound} onChange={(e) => setLowerBound(Number(e.target.value))} className="w-full rounded-xl border border-[#dfe2e8] px-3.5 py-2.5 text-sm" /></div><div><label className="mb-2 block text-xs font-medium text-[#626b80]">Upper Bound (%)</label><input type="number" min="0" max="100" value={upperBound} onChange={(e) => setUpperBound(Number(e.target.value))} className="w-full rounded-xl border border-[#dfe2e8] px-3.5 py-2.5 text-sm" /></div><div><label className="mb-2 block text-xs font-medium text-[#626b80]">Trend</label><select value={riskTrendFilter} onChange={(e) => setRiskTrendFilter(e.target.value)} className="w-full rounded-xl border border-[#dfe2e8] bg-white px-3.5 py-2.5 text-sm"><option value="All">All</option><option value="Increasing">Increasing</option><option value="Decreasing">Decreasing</option><option value="Stable">Stable</option></select></div><div><label className="mb-2 block text-xs font-medium text-[#626b80]">Month</label><select value={riskMonth} onChange={(e) => setRiskMonth(e.target.value as "previous" | "current")} className="w-full rounded-xl border border-[#dfe2e8] bg-white px-3.5 py-2.5 text-sm"><option value="current">{data.monthsUsed?.current || "Current month"}</option><option value="previous">{data.monthsUsed?.previous || "Previous month"}</option></select></div></div><p className="mt-3 flex items-center gap-2 text-xs text-[#8991a2]"><Info size={14} /> Filtering uses the two months currently loaded in Trend settings.</p></section>
-            <section className="mb-5 rounded-[18px] border border-[#dfe2e8] bg-white p-5 shadow-[0_8px_28px_rgba(31,35,49,.055)] sm:p-6"><h3 className="mb-4 text-sm font-bold text-[#17223b]">Filtered Students <span className="font-normal text-[#8991a2]">({riskResults.length})</span></h3><div className="overflow-x-auto"><table className="w-full text-sm"><thead><tr className="border-b border-[#e7e8ec] text-left text-[11px] font-semibold text-[#8991a2]"><th className="py-3 pr-3">Enrollment</th><th className="py-3 pr-3">Name</th><th className="py-3 pr-3">Email</th><th className="py-3 pr-3">Attendance</th><th className="py-3">Trend</th></tr></thead><tbody>{riskResults.map((s: any) => <tr key={s.enrollmentNo} className="border-b border-[#f0f1f4]"><td className="py-3 pr-3 text-[#6f7890]">{s.enrollmentNo}</td><td className="py-3 pr-3 font-medium text-[#17223b]">{s.name}</td><td className="py-3 pr-3 text-[#6f7890]">{s.email || "—"}</td><td className="py-3 pr-3">{riskMonth === "current" ? s.attendancePct?.currMonth : s.attendancePct?.prevMonth}%</td><td className="py-3">{s.attendancePct?.trend}</td></tr>)}{riskResults.length === 0 && <tr><td colSpan={5} className="py-8 text-center text-sm text-[#8991a2]">No students match this filter.</td></tr>}</tbody></table></div></section>
-            <div className="grid grid-cols-1 gap-5 md:grid-cols-2"><section className="rounded-[18px] border border-[#dfe2e8] bg-white p-5 shadow-[0_8px_28px_rgba(31,35,49,.055)] sm:p-6"><h3 className="text-sm font-bold text-[#17223b]">Copy to Mail</h3><textarea readOnly value={riskEmailsText} rows={5} className="mt-3 w-full rounded-xl border border-[#dfe2e8] bg-[#f8f8fa] p-3 text-xs text-[#626b80]" /><button onClick={copyEmails} disabled={riskEmails.length === 0} className="mt-3 rounded-xl bg-[#3b2992] px-4 py-2.5 text-sm font-semibold text-white disabled:opacity-40">{copied ? "Copied!" : "Copy Emails"}</button></section><section className="rounded-[18px] border border-[#dfe2e8] bg-white p-5 shadow-[0_8px_28px_rgba(31,35,49,.055)] sm:p-6"><h3 className="text-sm font-bold text-[#17223b]">Send Alert Emails</h3><p className="mt-3 text-sm leading-6 text-[#6f7890]">Opens your default email app with all {riskEmails.length} filtered students BCC'd.</p><a href={mailtoHref} className={`mt-4 inline-block rounded-xl px-4 py-2.5 text-sm font-semibold text-white ${riskEmails.length === 0 ? "pointer-events-none bg-[#cfd2da]" : "bg-[#ef4444] hover:bg-[#dc3b3b]"}`}>Send Alert Emails ↗</a></section></div>
-          </>
-        )}
-
-        {data && view === "summary" && (
-          <>
-            <section className="mb-5"><h2 className="text-[25px] font-extrabold tracking-[-0.7px] text-[#17223b]">Attendance Summary</h2><p className="mt-2 text-sm leading-6 text-[#6f7890]">Overall class attendance health at a glance.</p></section>
-            <div className="mb-5 grid grid-cols-2 gap-3 md:grid-cols-4">{[["Total Students", data.totalStudents], ["Class Average (Current)", `${data.classAverageCurrMonth}%`], ["Class Average (Previous)", `${data.classAveragePrevMonth}%`], ["Overall Trend", `${data.overallTrendPct > 0 ? "+" : ""}${data.overallTrendPct}%`]].map(([label, value]) => <div key={String(label)} className="rounded-2xl border border-[#dfe2e8] bg-white p-5 shadow-[0_8px_28px_rgba(31,35,49,.055)]"><p className="text-xs font-medium text-[#626b80]">{label}</p><p className="mt-2 text-[25px] font-extrabold text-[#17223b]">{value}</p></div>)}</div>
-            <div className="grid grid-cols-1 gap-5 lg:grid-cols-2"><section className="rounded-[18px] border border-[#dfe2e8] bg-white p-5 shadow-[0_8px_28px_rgba(31,35,49,.055)] sm:p-6"><h3 className="text-base font-medium text-[#17223b]">Attendance Breakdown</h3><div className="mt-3"><ResponsiveContainer width="100%" height={270}><PieChart><Pie data={donutData} dataKey="value" nameKey="name" innerRadius={62} outerRadius={98} paddingAngle={2}>{donutData.map((entry, i) => <Cell key={i} fill={entry.color} />)}</Pie><Tooltip /><Legend wrapperStyle={{ fontSize: 11 }} /></PieChart></ResponsiveContainer></div></section><section className="rounded-[18px] border border-[#dfe2e8] bg-white p-5 shadow-[0_8px_28px_rgba(31,35,49,.055)] sm:p-6"><h3 className="text-base font-medium text-[#17223b]">Class Average: Previous vs Current</h3><div className="mt-3"><ResponsiveContainer width="100%" height={270}><BarChart data={compareBarData} margin={{ top: 8, right: 4, left: -16, bottom: 0 }}><CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#d9dce2" /><XAxis dataKey="name" fontSize={11} tickLine={false} /><YAxis fontSize={11} tickLine={false} /><Tooltip /><Bar dataKey="value" fill="#3b2992" radius={[4, 4, 0, 0]} /></BarChart></ResponsiveContainer></div></section></div>
-            <div className="mt-5 grid grid-cols-1 gap-5 md:grid-cols-2"><section className="rounded-[18px] border border-[#dfe2e8] bg-white p-5 shadow-[0_8px_28px_rgba(31,35,49,.055)] sm:p-6"><h3 className="text-sm font-bold text-[#17223b]">Core Summary</h3><table className="mt-3 w-full text-sm"><tbody>{[["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]].map(([label, value]) => <tr key={String(label)} className="border-b border-[#f0f1f4] last:border-0"><td className="py-3 text-[#626b80]">{label}</td><td className="py-3 text-right font-bold text-[#17223b]">{value}</td></tr>)}</tbody></table></section><section className="rounded-[18px] border border-[#dfe2e8] bg-white p-5 shadow-[0_8px_28px_rgba(31,35,49,.055)] sm:p-6"><h3 className="text-sm font-bold text-[#17223b]">Attendance Shifts</h3><table className="mt-3 w-full text-sm"><tbody><tr className="border-b border-[#f0f1f4]"><td className="py-3 text-[#626b80]">Improving Students</td><td className="py-3 text-right font-bold text-[#10a66a]">{data.trendCounts?.increasing ?? 0}</td></tr><tr className="border-b border-[#f0f1f4]"><td className="py-3 text-[#626b80]">Declining Students</td><td className="py-3 text-right font-bold text-red-500">{data.trendCounts?.decreasing ?? 0}</td></tr><tr><td className="py-3 text-[#626b80]">Stable Students</td><td className="py-3 text-right font-bold text-[#687286]">{data.trendCounts?.stable ?? 0}</td></tr></tbody></table></section></div>
-            <div className="mt-5 grid grid-cols-1 gap-5 md:grid-cols-2"><section className="rounded-[18px] border border-[#dfe2e8] bg-white p-5 shadow-[0_8px_28px_rgba(31,35,49,.055)] sm:p-6"><h3 className="text-sm font-bold text-[#17223b]">Top 5 Most Improved</h3><ol className="mt-3 space-y-2 text-sm">{topMovers.improved.map((s, i) => <li key={s.name} className="flex justify-between gap-4"><span className="text-[#626b80]">{i + 1}. {s.name}</span><span className="font-bold text-[#10a66a]">{s.change > 0 ? "+" : ""}{s.change}%</span></li>)}</ol></section><section className="rounded-[18px] border border-[#dfe2e8] bg-white p-5 shadow-[0_8px_28px_rgba(31,35,49,.055)] sm:p-6"><h3 className="text-sm font-bold text-[#17223b]">Top 5 Critical Decliners</h3><ol className="mt-3 space-y-2 text-sm">{topMovers.declined.map((s, i) => <li key={s.name} className="flex justify-between gap-4"><span className="text-[#626b80]">{i + 1}. {s.name}</span><span className="font-bold text-red-500">{s.change > 0 ? "+" : ""}{s.change}%</span></li>)}</ol></section></div>
-          </>
-        )}
-      </div>
-      <span className="sr-only">{sheetId || ""}</span>
-    </div>
-  );
+  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 <div className="analysis-layout">
+    <aside className="analysis-sidebar"><div className="analysis-brand"><span className="analysis-brand__mark"><BarChart3 size={18} /></span><span>ClassPulse</span></div><nav className="analysis-side-nav"><a href="/dashboard"><LayoutDashboard size={18} />Dashboard</a><a className="is-active" href={typeof sectionId === "string" ? `/section-analysis/${sectionId}/attendance` : "#"}><BookOpen size={18} />Class Analysis</a><a href="/subject-analysis"><GraduationCap size={18} />Subject Analysis</a></nav><div className="analysis-side-footer">ClassPulse Teacher Portal</div></aside>
+    <main className="analysis-page">
+      <header className="analysis-topbar"><div className="analysis-title-row"><h1>Class / Section Analysis</h1>{computedAt && <span className="analysis-sync">• Last synced {new Date(computedAt).toLocaleString()}</span>}</div><div className="analysis-top-actions"><RawDataButton sheetId={sheetId} /><button className="analysis-primary" onClick={() => loadAnalysis(true)} disabled={syncing}><RefreshCw size={15} className={syncing ? "animate-spin" : ""} />{syncing ? "Syncing..." : "Sync now"}</button></div></header>
+      {typeof sectionId === "string" && <AnalysisNav sectionId={sectionId} />}
+      <div className="analysis-view-switch"><button className={view === "trend" ? "is-active" : ""} onClick={() => setView("trend")}>Trend</button><button className={view === "risk" ? "is-active" : ""} onClick={() => setView("risk")}>At Risk</button></div>
+      {error && <div className="analysis-panel" style={{ padding: 14, marginBottom: 16, color: "#b42318", display: "flex", gap: 8 }}><AlertCircle size={17} />{error}</div>}
+      {loading && !data && <div style={{ padding: 40, color: "#667085", fontSize: 13 }}>Loading attendance analysis...</div>}
+      {data && view === "trend" && <>
+        <section className="analysis-hero"><div className="analysis-hero-copy"><h2>Attendance Trend</h2><p>Compare attendance between two months and identify increasing, decreasing, and stable students.</p></div><Metric icon={<Users size={19} />} label={`Class Average (${previousMonth || "Previous"})`} value={`${previousAverage}%`} change={averageChange} /><Metric icon={<Gauge size={19} />} label={`Class Average (${currentMonth || "Current"})`} value={`${currentAverage}%`} change={averageChange} /><Metric icon={<Sparkles size={19} />} label="Students Improving" value={improvingCount} detail={`${students.length ? round1((improvingCount / students.length) * 100) : 0}% of total students`} /></section>
+        <section className="analysis-panel analysis-settings"><h3>Trend Comparison Settings</h3><div className="analysis-settings-grid"><div><label>First Month</label><select value={previousMonth} onChange={(e) => setPreviousMonth(e.target.value)}>{availableMonths.map((month) => <option key={month}>{month}</option>)}</select></div><div><label>Second Month</label><select value={currentMonth} onChange={(e) => setCurrentMonth(e.target.value)}>{availableMonths.map((month) => <option key={month}>{month}</option>)}</select></div><div><label>Trend Criteria (%)</label><input type="number" min="0" max="100" value={trendCriteria} onChange={(e) => setTrendCriteria(Number(e.target.value))} /></div><button className="analysis-primary" onClick={() => loadAnalysis(false, previousMonth, currentMonth, trendCriteria)} disabled={loading || !previousMonth || !currentMonth || previousMonth === currentMonth}><SlidersHorizontal size={15} />{loading ? "Applying..." : "Apply Comparison"}</button></div><div className="analysis-note"><AlertCircle size={14} />Trend calculation: a change of <strong>±{trendCriteria} percentage points</strong> or more is Increasing or Decreasing.</div></section>
+        <section className="analysis-content-grid"><div className="analysis-panel analysis-table-panel"><div className="analysis-panel-head"><div style={{ display: "flex", alignItems: "center", gap: 8 }}><h3>Student Trend Analysis</h3><span className="analysis-count">{students.length} Students</span></div><div style={{ position: "relative" }}><Search size={15} style={{ position: "absolute", left: 10, top: 11, color: "#98a2b3" }} /><input placeholder="Search student..." value={search} onChange={(e) => setSearch(e.target.value)} style={{ paddingLeft: 32, width: 200, height: 38 }} /></div></div><div className="analysis-table-wrap"><table className="analysis-table"><thead><tr><th>Student Name</th><th>{data.monthsUsed.previous || "Month 1"}</th><th>{data.monthsUsed.current || "Month 2"}</th><th>Change</th><th>Trend</th></tr></thead><tbody>{filteredStudents.map((student) => { const previous = student.attendancePct.prevMonth; const current = student.attendancePct.currMonth; const change = round1(current - previous); const trend = student.attendancePct.trend; return <tr key={student.enrollmentNo}><td><span className="student-cell"><span className="student-avatar">{initials(student.name)}</span>{student.name}</span></td><td>{previous}%</td><td>{current}%</td><td className={change > 0 ? "change-up" : change < 0 ? "change-down" : ""}>{change > 0 ? "+" : ""}{change}%</td><td><span className={`trend-badge ${trend === "Increasing" ? "trend-up" : trend === "Decreasing" ? "trend-down" : "trend-stable"}`}>{trend === "Increasing" ? "↑ " : trend === "Decreasing" ? "↓ " : "− "}{trend}</span></td></tr>; })}</tbody></table></div></div><div className="analysis-right-stack"><ChartPanel title="Trend Distribution" subtitle="Click a column to filter those students in At Risk." data={trendData} onBarClick={(entry) => openRisk({ trend: entry?.name || "All" })} /><ChartPanel title="Attendance Distribution" subtitle="Click a column to open that attendance range in At Risk." data={attendanceDistribution} onBarClick={(entry) => { 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 }); }} /></div></section>
+      </>}
+      {data && view === "risk" && <><section className="analysis-hero"><div className="analysis-hero-copy"><h2>At Risk Students</h2><p>Find students needing attention using attendance range and trend filters.</p></div><Metric icon={<Users size={19} />} label="Matching Students" value={riskResults.length} detail="Current filter result" /><Metric icon={<AlertCircle size={19} />} label="Below 50% Attendance" value={riskLowCount} detail="Within selected result" /><Metric icon={<Gauge size={19} />} label="Decreasing Trend" value={riskDecreasingCount} detail="Students whose attendance fell" /></section><section className="analysis-panel analysis-settings"><div className="analysis-panel-head" style={{ marginBottom: 18 }}><div><h3>Filter Criteria</h3><p style={{ margin: "5px 0 0", color: "#667085", fontSize: 12 }}>Narrow the list before copying addresses or sending alerts.</p></div><button className="analysis-secondary" onClick={() => { setLowerBound(0); setUpperBound(100); setRiskTrendFilter("All"); setRiskMonth("current"); }}><RefreshCw size={14} />Reset</button></div><div className="analysis-settings-grid"><div><label>Lower Bound (%)</label><input type="number" min="0" max="100" value={lowerBound} onChange={(e) => setLowerBound(Math.max(0, Math.min(100, Number(e.target.value))))} /></div><div><label>Upper Bound (%)</label><input type="number" min="0" max="100" value={upperBound} onChange={(e) => setUpperBound(Math.max(0, Math.min(100, Number(e.target.value))))} /></div><div><label>Trend</label><select value={riskTrendFilter} onChange={(e) => setRiskTrendFilter(e.target.value)}><option>All</option><option>Increasing</option><option>Decreasing</option><option>Stable</option></select></div><div><label>Month</label><select value={riskMonth} onChange={(e) => setRiskMonth(e.target.value as "previous" | "current")}><option value="current">{currentMonth}</option><option value="previous">{previousMonth}</option></select></div></div></section><section className="analysis-panel analysis-table-panel"><div className="analysis-panel-head"><div style={{ display: "flex", alignItems: "center", gap: 8 }}><h3>Filtered Students</h3><span className="analysis-count">{riskResults.length} Students</span></div></div><div className="analysis-table-wrap"><table className="analysis-table"><thead><tr><th>Student</th><th>Enrollment</th><th>Attendance</th><th>Trend</th><th>Email</th></tr></thead><tbody>{riskResults.length ? riskResults.map((student) => { const attendance = riskMonth === "current" ? student.attendancePct.currMonth : student.attendancePct.prevMonth; const trend = student.attendancePct.trend; return <tr key={student.enrollmentNo}><td><span className="student-cell"><span className="student-avatar">{initials(student.name)}</span>{student.name}</span></td><td>{student.enrollmentNo}</td><td className={attendance < 50 ? "change-down" : ""}>{attendance}%</td><td><span className={`trend-badge ${trend === "Increasing" ? "trend-up" : trend === "Decreasing" ? "trend-down" : "trend-stable"}`}>{trend}</span></td><td>{student.email || "—"}</td></tr>; }) : <tr><td colSpan={5} style={{ textAlign: "center", padding: 36, color: "#667085" }}>No students match the current filters.</td></tr>}</tbody></table></div><div className="analysis-insight-actions" style={{ marginTop: 16, justifyContent: "flex-end" }}><button className="analysis-secondary" onClick={copyEmails} disabled={!riskEmails.length}><Download size={15} />{copied ? "Copied" : "Copy Emails"}</button><a className="analysis-primary" href={`mailto:?bcc=${encodeURIComponent(riskEmails.join(","))}`} style={{ pointerEvents: riskEmails.length ? "auto" : "none", opacity: riskEmails.length ? 1 : 0.55 }}><Mail size={15} />Send Alert Emails</a></div></section></>}
+    </main>
+  </div>;
 }
+
+function Metric({ icon, label, value, change, detail }: { icon: ReactNode; label: string; value: string | number; change?: number; detail?: string }) { const changeClass = change !== undefined && change > 0 ? "change-up" : change !== undefined && change < 0 ? "change-down" : ""; return <div className="analysis-metric"><div className="analysis-metric-icon">{icon}</div><div className="analysis-metric-content"><span className="analysis-metric-label">{label}</span><div className="analysis-metric-value-row"><strong>{value}</strong>{change !== undefined && <small className={changeClass}>{change > 0 ? "↑ +" : change < 0 ? "↓ " : ""}{change}%</small>}</div>{detail && <small className="analysis-metric-detail">{detail}</small>}</div></div>; }
+function ChartPanel({ title, subtitle, data, onBarClick }: { title: string; subtitle: string; data: { name: string; count: number; color: string }[]; onBarClick: (entry: { name: string } | undefined) => void }) { return <div className="analysis-panel analysis-chart-panel"><div className="analysis-chart-head"><div><h3>{title}</h3><p>{subtitle}</p></div></div><div style={{ height: 220 }}><ResponsiveContainer width="100%" height="100%"><BarChart data={data} margin={{ top: 18, right: 8, left: -14, bottom: 0 }}><CartesianGrid vertical={false} strokeDasharray="3 3" /><XAxis dataKey="name" tick={{ fontSize: 11 }} /><YAxis allowDecimals={false} tick={{ fontSize: 11 }} /><Tooltip cursor={{ fill: "rgba(79,70,229,0.05)" }} /><Bar dataKey="count" radius={[4, 4, 0, 0]} onClick={(_, index) => onBarClick(data[index])}>{data.map((entry) => <Cell key={entry.name} fill={entry.color} />)}</Bar></BarChart></ResponsiveContainer></div></div>; }

From c1a69d365913c7b43067a73108df8f053d307657 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sun, 30 Aug 2026 20:58:22 +0530
Subject: [PATCH 49/80] Match class academic layout to subject analysis

---
 .../section-analysis/[sectionId]/academic.tsx | 804 +++++-------------
 1 file changed, 196 insertions(+), 608 deletions(-)

diff --git a/pages/section-analysis/[sectionId]/academic.tsx b/pages/section-analysis/[sectionId]/academic.tsx
index acf4eb9..c78135e 100644
--- a/pages/section-analysis/[sectionId]/academic.tsx
+++ b/pages/section-analysis/[sectionId]/academic.tsx
@@ -1,680 +1,268 @@
 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";
+type AcademicView = "midsem1" | "midsem2";
+type Tier = "Excellent" | "Good" | "Needs Attention" | "Critical Risk";
 
-const TIER_COLORS: Record<string, string> = {
-  Excellent: "#10b981",
-  Good: "#3b82f6",
+const TIER_COLORS: Record<Tier, string> = {
+  Excellent: "#2563eb",
+  Good: "#15966a",
   "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);
-}
+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 round1(n: number) {
-  return Math.round(n * 10) / 10;
+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);
 }
 
-// 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 {
+function tierFor(marks: number, max: number): Tier {
   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";
+  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 Metric({ label, value, detail }: { label: string; value: string | number; detail: string }) {
+  return (
+    <div className="rounded-2xl border border-[#e6e5e2] bg-white px-5 py-4 shadow-[0_8px_28px_rgba(31,35,49,0.04)]">
+      <div className="text-[11px] font-semibold text-[#6f7890]">{label}</div>
+      <div className="mt-1 text-[25px] font-extrabold tracking-[-1px] text-[#17223b]">{value}</div>
+      <div className="mt-1 text-[10px] text-[#98a2b3]">{detail}</div>
+    </div>
+  );
+}
+
 export default function AcademicPage() {
   const router = useRouter();
   const { sectionId } = router.query;
-
   const [view, setView] = useState<AcademicView>("midsem1");
-
   const [data, setData] = useState<SectionAnalysis | null>(null);
   const [sheetId, setSheetId] = useState<string | null>(null);
   const [computedAt, setComputedAt] = useState("");
   const [loading, setLoading] = useState(true);
   const [syncing, setSyncing] = useState(false);
   const [error, setError] = useState("");
+  const [selectedTier, setSelectedTier] = useState<Tier | null>(null);
 
-  // Combined view controls
-  const [gradeBasis, setGradeBasis] = useState<ExamKey>("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() {
+  async function loadAnalysis(sync = false) {
     if (!sectionId || typeof sectionId !== "string") return;
-    setLoading(true);
+    sync ? setSyncing(true) : setLoading(true);
     setError("");
     try {
-      const res = await fetch(`/api/analysis/section/${sectionId}`);
+      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 load academic analysis");
-        return;
-      }
+      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);
+      setComputedAt(json.computedAt || "");
       setSheetId(json.sheetId || null);
     } catch (e: any) {
       setError(e.message || "Failed to load academic analysis");
     } finally {
       setLoading(false);
-    }
-  }
-
-  async function syncAnalysis() {
-    if (!sectionId || typeof sectionId !== "string") return;
-    setSyncing(true);
-    setError("");
-    try {
-      const res = await fetch(`/api/analysis/section/${sectionId}?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);
     }
   }
 
-  useEffect(() => {
-    loadAnalysis();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sectionId]);
+  useEffect(() => { loadAnalysis(); }, [sectionId]);
+  useEffect(() => { setSelectedTier(null); }, [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<string, number>;
-      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 midsem1Stats = useSingleExamStats("midsem1");
-  const midsem2Stats = useSingleExamStats("midsem2");
-
-  function renderSingleExamView(examLabel: string, stats: ReturnType<typeof useSingleExamStats>) {
-    const pieData = Object.entries(stats.tiers).map(([name, value]) => ({
-      name,
-      value,
-      color: TIER_COLORS[name],
-    }));
-
-    return (
-      <>
-        <div className="mb-6">
-          <h2 className="text-xl font-semibold text-gray-900">{examLabel}</h2>
-          <p className="text-sm text-gray-500 mt-1">Marks, class stats, and top/at-risk students for {examLabel}.</p>
-        </div>
-
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          <section className="bg-white rounded-2xl border border-gray-100 p-6">
-            <h3 className="font-medium text-gray-900 mb-4">Data Sheet</h3>
-            <p className="text-xs text-gray-400 mb-3">Pass mark per subject: 12/30 (40%)</p>
-            <div className="max-h-[650px] overflow-y-auto">
-              <table className="w-full text-sm">
-                <thead>
-                  <tr className="text-left text-gray-400 border-b border-gray-100">
-                    <th className="py-2 pr-3 sticky left-0 bg-white">Name</th>
-                    {stats.subjectCodes.map((code: string) => (
-                      <th key={code} className="py-2 pr-3 whitespace-nowrap">
-                        {code}
-                      </th>
-                    ))}
-                    <th className="py-2 pr-3 whitespace-nowrap">Total</th>
-                    <th className="py-2">%age</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {stats.rows.map((r: any) => {
-                    const pct = stats.max > 0 ? Math.round((r.marks / stats.max) * 100) : 0;
-                    return (
-                      <tr key={r.enrollmentNo} className="border-b border-gray-50">
-                        <td className="py-2 pr-3 text-gray-900 whitespace-nowrap sticky left-0 bg-white">
-                          {r.name}
-                        </td>
-                        {(r.subjects || []).map((s: any) => (
-                          <td
-                            key={s.code}
-                            className={`py-2 pr-3 ${
-                              s.marks === null ? "text-gray-400" : s.pass ? "text-emerald-600" : "text-red-500"
-                            }`}
-                          >
-                            {s.marks === null ? "—" : s.marks}
-                          </td>
-                        ))}
-                        <td className="py-2 pr-3 font-medium text-gray-900">{r.marks}</td>
-                        <td className="py-2">{pct}%</td>
-                      </tr>
-                    );
-                  })}
-                </tbody>
-              </table>
-            </div>
-          </section>
-
-          <div className="space-y-6">
-            <div className="grid grid-cols-2 gap-4">
-              <StatCard label="Class Average" value={stats.classAverage} />
-              <StatCard label="Class Median" value={stats.classMedian} />
-              <StatCard label="Highest Score" value={stats.highest} />
-              <StatCard label="Pass Rate" value={`${stats.passRate}%`} />
-            </div>
-
-            <section className="bg-white rounded-2xl border border-gray-100 p-6">
-              <h3 className="font-medium text-gray-900 mb-4">Performance Tier</h3>
-              <div className="grid grid-cols-2 gap-3 mb-4">
-                {Object.entries(stats.tiers).map(([name, count]) => (
-                  <div
-                    key={name}
-                    className="rounded-lg p-3 text-center"
-                    style={{ backgroundColor: `${TIER_COLORS[name]}22` }}
-                  >
-                    <p className="text-xs text-gray-600">{name}</p>
-                    <p className="text-lg font-semibold" style={{ color: TIER_COLORS[name] }}>
-                      {count}
-                    </p>
-                  </div>
-                ))}
-              </div>
-              <ResponsiveContainer width="100%" height={200}>
-                <PieChart>
-                  <Pie data={pieData} dataKey="value" nameKey="name" innerRadius={50} outerRadius={80} paddingAngle={2}>
-                    {pieData.map((entry, i) => (
-                      <Cell key={i} fill={entry.color} />
-                    ))}
-                  </Pie>
-                  <Tooltip />
-                </PieChart>
-              </ResponsiveContainer>
-            </section>
-
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <section className="bg-white rounded-2xl border border-gray-100 p-6">
-                <RankedList
-                  title="Top 5 Highest Scorers"
-                  positive
-                  items={stats.sorted.slice(0, 5).map((r: any) => ({ name: r.name, marks: r.marks }))}
-                />
-              </section>
-              <section className="bg-white rounded-2xl border border-gray-100 p-6">
-                <RankedList
-                  title="Bottom 5 At-Risk Students"
-                  positive={false}
-                  items={[...stats.sorted]
-                    .reverse()
-                    .slice(0, 5)
-                    .map((r: any) => ({ name: r.name, marks: r.marks }))}
-                />
-              </section>
-            </div>
-          </div>
-        </div>
-      </>
-    );
-  }
-
-  // ---------- Combined view ----------
-  const combinedRows = useMemo(() => {
-    return students.map((s: any) => {
-      const values: Record<ExamKey, number> = {
-        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<string, number>;
-    combinedRows.forEach((r) => counts[r.grade]++);
-    return counts;
-  }, [combinedRows]);
+  const activeStats = useMemo(() => {
+    const exam = view === "midsem1" ? "midsem1" : "midsem2";
+    const rows = students.map((student: any) => {
+      const marks = student.examMarks?.[exam] ?? null;
+      const max = student.examMarks?.[`${exam}Max`] || 0;
+      const subjects = student.examMarks?.[`${exam}Subjects`] || [];
+      return { enrollmentNo: student.enrollmentNo, name: student.name, marks, max, subjects };
+    }).filter((row: any) => row.marks !== null);
 
-  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);
+    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<Tier, number>;
+    rows.forEach((row: any) => counts[tierFor(Number(row.marks), max)]++);
 
     return {
-      overallAverage,
-      highest,
-      lowest,
-      passRate,
-      midsem1Avg,
-      midsem2Avg,
-      increases: changes.slice(0, 5),
-      decreases: [...changes].reverse().slice(0, 5),
+      rows,
+      max,
+      subjectCodes: rows[0]?.subjects?.map((subject: any) => subject.code) || [],
+      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) >= max * 0.4).length / marks.length * 100) : 0,
+      counts,
+      sorted: [...rows].sort((a: any, b: any) => Number(b.marks) - Number(a.marks)),
     };
-  }, [students]);
+  }, [students, view]);
 
-  return (
-    <div className="min-h-screen max-w-[1700px] mx-auto px-8 py-10">
-      <div className="flex items-start justify-between mb-6">
-        <div>
-          <h1 className="text-lg font-semibold text-gray-900">Class / Section Analysis</h1>
-          {computedAt && (
-            <p className="text-xs text-gray-400 mt-1">Last synced {new Date(computedAt).toLocaleString()}</p>
-          )}
-        </div>
-        <div className="flex items-center gap-2">
-          <RawDataButton sheetId={sheetId} />
-          <button
-            onClick={syncAnalysis}
-            disabled={syncing}
-            className="text-sm bg-gray-900 text-white rounded-lg px-4 py-2 disabled:opacity-50"
-          >
-            {syncing ? "Syncing..." : "Sync now"}
-          </button>
-        </div>
-      </div>
+  const displayedRows = selectedTier
+    ? activeStats.rows.filter((row: any) => tierFor(Number(row.marks), activeStats.max) === selectedTier)
+    : activeStats.rows;
 
-      {typeof sectionId === "string" && <AnalysisNav sectionId={sectionId} />}
+  const totalStudents = students.length;
+  const activeLabel = view === "midsem1" ? "Midsem 1" : "Midsem 2";
+  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);
 
-      <div className="flex gap-2 mb-8 flex-wrap">
-        {(
-          [
-            { 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) => (
-          <button
-            key={tab.key}
-            onClick={() => 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}
-          </button>
-        ))}
-      </div>
+  return (
+    <div className="analysis-layout min-h-screen bg-[#fffdf8] text-[#17223b]">
+      <aside className="analysis-sidebar">
+        <div className="analysis-brand"><span className="analysis-brand__mark"><BarChart3 size={18} /></span><span>ClassPulse</span></div>
+        <nav className="analysis-side-nav">
+          <a href="/dashboard"><LayoutDashboard size={18} />Dashboard</a>
+          <a className="is-active" href={typeof sectionId === "string" ? `/class-analysis/${sectionId}` : "#"}><BookOpen size={18} />Class Analysis</a>
+          <a href="/subject-analysis"><GraduationCap size={18} />Subject Analysis</a>
+        </nav>
+        <RawDataButton sheetId={sheetId} />
+        <div className="analysis-side-footer">ClassPulse Teacher Portal</div>
+      </aside>
+
+      <main className="analysis-page">
+        <header className="analysis-topbar">
+          <div className="analysis-title-row">
+            <h1>Class / Section Analysis</h1>
+            {computedAt && <span className="analysis-sync">• Last synced {new Date(computedAt).toLocaleString()}</span>}
+          </div>
+          <div className="analysis-top-actions">
+            <button className="analysis-primary" onClick={() => loadAnalysis(true)} disabled={syncing}>
+              <RefreshCw size={15} className={syncing ? "animate-spin" : ""} />
+              {syncing ? "Syncing..." : "Sync now"}
+            </button>
+          </div>
+        </header>
 
-      {error && <div className="bg-red-50 border border-red-100 text-red-700 text-sm rounded-lg p-4 mb-6">{error}</div>}
-      {loading && !data && <div className="text-sm text-gray-500 py-10">Loading academic analysis...</div>}
+        {typeof sectionId === "string" && <AnalysisNav sectionId={sectionId} />}
 
-      {data && view === "midsem1" && renderSingleExamView("Midsem 1", midsem1Stats)}
-      {data && view === "midsem2" && renderSingleExamView("Midsem 2", midsem2Stats)}
+        <div className="analysis-view-switch">
+          <button className={view === "midsem1" ? "is-active" : ""} onClick={() => setView("midsem1")}>Midsem 1</button>
+          <button className={view === "midsem2" ? "is-active" : ""} onClick={() => setView("midsem2")}>Midsem 2</button>
+        </div>
 
-      {data && view === "combined" && (
-        <>
-          <div className="mb-6 flex items-end justify-between flex-wrap gap-4">
-            <div>
-              <h2 className="text-xl font-semibold text-gray-900">Midsem Combined</h2>
-              <p className="text-sm text-gray-500 mt-1">
-                Choose which numbers grade students, then sort to see who's ahead or behind.
-              </p>
-            </div>
-            <div className="flex gap-3">
-              <div>
-                <label className="block text-xs font-medium text-gray-500 mb-1">Grade / Sort By</label>
-                <select
-                  value={gradeBasis}
-                  onChange={(e) => setGradeBasis(e.target.value as ExamKey)}
-                  className="border border-gray-200 rounded-lg px-3 py-2 text-sm bg-white"
-                >
-                  <option value="midsem1">Midsem 1</option>
-                  <option value="midsem2">Midsem 2</option>
-                  <option value="combined">Combined (average)</option>
-                  <option value="max">Max (better of the two)</option>
-                </select>
-              </div>
-              <div>
-                <label className="block text-xs font-medium text-gray-500 mb-1">Order</label>
-                <select
-                  value={sortDir}
-                  onChange={(e) => setSortDir(e.target.value as "desc" | "asc" | "none")}
-                  className="border border-gray-200 rounded-lg px-3 py-2 text-sm bg-white"
-                >
-                  <option value="none">No Sort (Enrollment Order)</option>
-                  <option value="desc">Highest to Lowest</option>
-                  <option value="asc">Lowest to Highest</option>
-                </select>
-              </div>
-            </div>
-          </div>
+        {error && <div className="analysis-panel" style={{ padding: 14, marginBottom: 16, color: "#b42318" }}>{error}</div>}
+        {loading && !data && <div style={{ padding: 40, color: "#667085", fontSize: 13 }}>Loading academic analysis...</div>}
 
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
-            <section className="bg-white rounded-2xl border border-gray-100 p-6">
-              <h3 className="font-medium text-gray-900 mb-4">All Students</h3>
-              <div className="max-h-[600px] overflow-y-auto">
-                <table className="w-full text-sm">
-                  <thead>
-                    <tr className="text-left text-gray-400 border-b border-gray-100">
-                      {sortDir !== "none" && <th className="py-2 pr-3 w-10">Rank</th>}
-                      <th className="py-2 pr-3">Name</th>
-                      <th className="py-2 pr-3">1st</th>
-                      <th className="py-2 pr-3">2nd</th>
-                      <th className="py-2 pr-3">Combined</th>
-                      <th className="py-2 pr-3">Max</th>
-                      <th className="py-2">Grade</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {sortedCombinedRows.map((r, i) => (
-                      <tr key={r.enrollmentNo} className="border-b border-gray-50">
-                        {sortDir !== "none" && (
-                          <td className="py-2 pr-3 text-gray-400 font-medium">{i + 1}</td>
-                        )}
-                        <td className="py-2 pr-3 text-gray-900 whitespace-nowrap">{r.name}</td>
-                        <td className="py-2 pr-3 text-gray-500">{r.midsem1 ?? "—"}</td>
-                        <td className="py-2 pr-3 text-gray-500">{r.midsem2 ?? "—"}</td>
-                        <td className="py-2 pr-3">{r.combined}</td>
-                        <td className="py-2 pr-3">{r.max}</td>
-                        <td className="py-2">
-                          <GradeBadge grade={r.grade} />
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
+        {data && (
+          <>
+            <section className="analysis-hero">
+              <div className="analysis-hero-copy">
+                <h2>{activeLabel}</h2>
+                <p>Marks across all subjects, class statistics, and performance tiers.</p>
               </div>
+              <Metric label="Class Average" value={`${activeStats.average}/${activeStats.max || 0}`} detail="class average across subjects" />
+              <Metric label="Class Median" value={`${activeStats.median}/${activeStats.max || 0}`} detail="middle class score" />
+              <Metric label="Pass Rate" value={`${activeStats.passRate}%`} detail="students at or above 40%" />
             </section>
 
-            <div className="space-y-6">
-              <section className="bg-white rounded-2xl border border-gray-100 p-6">
-                <h3 className="font-medium text-gray-900 mb-4">Grade Distribution</h3>
-                <ResponsiveContainer width="100%" height={220}>
-                  <BarChart
-                    data={Object.entries(combinedGradeCounts).map(([name, count]) => ({ name, count }))}
-                  >
-                    <CartesianGrid strokeDasharray="3 3" vertical={false} />
-                    <XAxis dataKey="name" fontSize={11} />
-                    <YAxis fontSize={12} allowDecimals={false} />
-                    <Tooltip />
-                    <Bar dataKey="count" radius={[4, 4, 0, 0]}>
-                      {Object.keys(combinedGradeCounts).map((name, i) => (
-                        <Cell key={i} fill={TIER_COLORS[name]} />
-                      ))}
-                    </Bar>
-                  </BarChart>
-                </ResponsiveContainer>
-              </section>
-
-              <section className="bg-white rounded-2xl border border-gray-100 p-6">
-                <RankedList
-                  title="Top 5 Highest Scorers"
-                  positive
-                  items={combinedTop5.map((r) => ({ name: r.name, marks: r.sortValue }))}
-                />
-              </section>
-
-              <section className="bg-white rounded-2xl border border-gray-100 p-6">
-                <RankedList
-                  title="Bottom 5"
-                  positive={false}
-                  items={combinedBottom5.map((r) => ({ name: r.name, marks: r.sortValue }))}
-                />
-              </section>
-            </div>
-          </div>
-        </>
-      )}
-
-      {data && view === "summary" && (
-        <>
-          <div className="mb-6">
-            <h2 className="text-xl font-semibold text-gray-900">Academic Summary</h2>
-            <p className="text-sm text-gray-500 mt-1">Filter students by marks range, and see who's improving.</p>
-          </div>
-
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
-            <div className="space-y-6">
-              <section className="bg-white rounded-2xl border border-gray-100 p-6">
-                <h3 className="font-medium text-gray-900 mb-4">Filter Criteria</h3>
-                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+            <section className="analysis-content-grid academic-content-grid">
+              <section className="analysis-panel analysis-table-panel">
+                <div className="analysis-panel-head">
                   <div>
-                    <label className="block text-xs font-medium text-gray-500 mb-2">Exam</label>
-                    <select
-                      value={filterExam}
-                      onChange={(e) => setFilterExam(e.target.value as any)}
-                      className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm bg-white"
-                    >
-                      <option value="both">Both Midsem 1 &amp; 2</option>
-                      <option value="midsem1">Midsem 1</option>
-                      <option value="midsem2">Midsem 2</option>
-                    </select>
-                  </div>
-                  <div>
-                    <label className="block text-xs font-medium text-gray-500 mb-2">Lower Bound</label>
-                    <input
-                      type="number"
-                      value={lowerBound}
-                      onChange={(e) => setLowerBound(Number(e.target.value))}
-                      className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm"
-                    />
-                  </div>
-                  <div>
-                    <label className="block text-xs font-medium text-gray-500 mb-2">Upper Bound</label>
-                    <input
-                      type="number"
-                      value={upperBound}
-                      onChange={(e) => setUpperBound(Number(e.target.value))}
-                      className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm"
-                    />
+                    <h3>Data Sheet</h3>
+                    <p style={{ marginTop: 4, color: "#98a2b3", fontSize: 11 }}>
+                      Pass mark: 40%{selectedTier ? ` · Filtered: ${selectedTier}` : ""}
+                    </p>
                   </div>
+                  {selectedTier && <button className="analysis-secondary" onClick={() => setSelectedTier(null)}>Clear filter</button>}
                 </div>
-              </section>
 
-              <section className="bg-white rounded-2xl border border-gray-100 p-6">
-                <h3 className="font-medium text-gray-900 mb-4">
-                  Filtered Results <span className="text-gray-400 font-normal">({filteredSummaryRows.length})</span>
-                </h3>
-                <table className="w-full text-sm">
-                  <thead>
-                    <tr className="text-left text-gray-400 border-b border-gray-100">
-                      <th className="py-2 pr-3">Name</th>
-                      <th className="py-2 pr-3">Subject</th>
-                      <th className="py-2 pr-3">Exam</th>
-                      <th className="py-2">Marks</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {filteredSummaryRows.map((r, i) => (
-                      <tr key={`${r.enrollmentNo}-${r.exam}-${r.subject}-${i}`} className="border-b border-gray-50">
-                        <td className="py-2 pr-3 text-gray-900">{r.name}</td>
-                        <td className="py-2 pr-3 text-gray-500">{r.subject}</td>
-                        <td className="py-2 pr-3 text-gray-500">{r.exam}</td>
-                        <td className="py-2">{r.marks}</td>
+                <div className="overflow-auto">
+                  <table className="w-full min-w-[760px] border-collapse text-[12px]">
+                    <thead>
+                      <tr className="border-b border-[#edf0f4] text-left text-[10px] font-bold uppercase tracking-[0.2px] text-[#7b8498]">
+                        <th className="sticky left-0 z-10 bg-white px-3 py-3">Student Name</th>
+                        {activeStats.subjectCodes.map((code: string) => <th key={code} className="whitespace-nowrap px-3 py-3">{code}</th>)}
+                        <th className="whitespace-nowrap px-3 py-3">Total</th>
+                        <th className="whitespace-nowrap px-3 py-3">%age</th>
+                        <th className="whitespace-nowrap px-3 py-3">Tier</th>
                       </tr>
-                    ))}
-                    {filteredSummaryRows.length === 0 && (
-                      <tr>
-                        <td colSpan={4} className="py-6 text-center text-gray-400">
-                          No students match this filter.
-                        </td>
-                      </tr>
-                    )}
-                  </tbody>
-                </table>
+                    </thead>
+                    <tbody>
+                      {displayedRows.map((row: any) => {
+                        const pct = activeStats.max > 0 ? Math.round(Number(row.marks) / activeStats.max * 100) : 0;
+                        const tier = tierFor(Number(row.marks), activeStats.max);
+                        return (
+                          <tr key={row.enrollmentNo} className="border-b border-[#f0f1f3] last:border-0">
+                            <td className="sticky left-0 z-10 bg-white px-3 py-3 font-semibold text-[#17223b]">
+                              <div className="flex items-center gap-2">
+                                <span className="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-[#eeebff] text-[9px] font-extrabold text-[#5b4ee6]">{initials(row.name)}</span>
+                                <span className="whitespace-nowrap">{row.name}</span>
+                              </div>
+                            </td>
+                            {activeStats.subjectCodes.map((code: string) => {
+                              const subject = (row.subjects || []).find((item: any) => item.code === code);
+                              return <td key={code} className={`px-3 py-3 ${subject?.marks === null || subject?.marks === undefined ? "text-[#98a2b3]" : subject.pass === false ? "font-semibold text-[#ef4444]" : "text-[#15966a]"}`}>{subject?.marks ?? "—"}</td>;
+                            })}
+                            <td className="px-3 py-3 font-bold text-[#17223b]">{row.marks}</td>
+                            <td className="px-3 py-3 text-[#626b80]">{pct}%</td>
+                            <td className="px-3 py-3"><button onClick={() => setSelectedTier(tier)} className="rounded-full px-2.5 py-1 text-[9px] font-bold" style={{ backgroundColor: `${TIER_COLORS[tier]}18`, color: TIER_COLORS[tier] }}>{tier}</button></td>
+                          </tr>
+                        );
+                      })}
+                    </tbody>
+                  </table>
+                </div>
               </section>
-            </div>
 
-            <div className="space-y-6">
-              <div className="grid grid-cols-2 gap-4">
-                <StatCard label="Overall Class Average" value={summaryStats.overallAverage} />
-                <StatCard label="Highest Combined Score" value={summaryStats.highest} />
-                <StatCard label="Lowest Combined Score" value={summaryStats.lowest} />
-                <StatCard label="Overall Pass Rate" value={`${summaryStats.passRate}%`} />
-              </div>
-
-              <div className="grid grid-cols-2 gap-4">
-                <StatCard label="Midsem 1 Average" value={summaryStats.midsem1Avg} />
-                <StatCard label="Midsem 2 Average" value={summaryStats.midsem2Avg} />
-              </div>
+              <div className="space-y-5">
+                <div className="grid grid-cols-2 gap-4">
+                  <Metric label="Class Average" value={activeStats.average} detail={`out of ${activeStats.max || 0}`} />
+                  <Metric label="Class Median" value={activeStats.median} detail="middle class score" />
+                  <Metric label="Highest Score" value={activeStats.highest} detail={highestNames.length ? highestNames[0] : "top score"} />
+                  <Metric label="Pass Rate" value={`${activeStats.passRate}%`} detail={`${activeStats.rows.length} students assessed`} />
+                </div>
 
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                <section className="bg-white rounded-2xl border border-gray-100 p-6">
-                  <RankedList title="Marks Increase (Top 5)" positive items={summaryStats.increases.map((s) => ({ name: s.name, marks: s.change }))} />
-                </section>
-                <section className="bg-white rounded-2xl border border-gray-100 p-6">
-                  <RankedList
-                    title="Marks Decrease (Top 5)"
-                    positive={false}
-                    items={summaryStats.decreases.map((s) => ({ name: s.name, marks: s.change }))}
-                  />
+                <section className="analysis-panel p-5">
+                  <div className="mb-4 flex items-center justify-between">
+                    <div>
+                      <h3>Performance Tier</h3>
+                      <p className="mt-1 text-[10px] text-[#98a2b3]">Click a tier to filter the data sheet.</p>
+                    </div>
+                    <span className="text-[10px] text-[#98a2b3]">{totalStudents} Students</span>
+                  </div>
+                  <div className="space-y-2.5">
+                    {tierEntries.map(([tier, count]) => (
+                      <button key={tier} onClick={() => 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]"}`}>
+                        <span className="flex items-center gap-2.5"><span className="h-2.5 w-2.5 rounded-full" style={{ background: TIER_COLORS[tier] }} /><span className="text-[11px] font-semibold text-[#344054]">{tier}</span></span>
+                        <span className="text-[12px] font-extrabold" style={{ color: TIER_COLORS[tier] }}>{count}</span>
+                      </button>
+                    ))}
+                  </div>
+                  <div className="mt-5 h-3 overflow-hidden rounded-full bg-[#f0f1f4]">
+                    {tierEntries.map(([tier, count]) => <span key={tier} className="inline-block h-full" style={{ width: `${activeStats.rows.length ? count / activeStats.rows.length * 100 : 0}%`, background: TIER_COLORS[tier] }} />)}
+                  </div>
                 </section>
+
+                <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                  <section className="analysis-panel p-5">
+                    <h3 className="text-[13px] font-bold text-[#17223b]">Top 5 Highest Scorers</h3>
+                    <div className="mt-3 space-y-2">
+                      {activeStats.sorted.slice(0, 5).map((row: any, index: number) => <div key={row.enrollmentNo} className="flex items-center justify-between border-b border-[#f0f1f3] pb-2 last:border-0"><span className="text-[10px] font-semibold text-[#344054]">{index + 1}. {row.name}</span><span className="text-[10px] font-extrabold text-[#15966a]">{row.marks}</span></div>)}
+                    </div>
+                  </section>
+                  <section className="analysis-panel p-5">
+                    <h3 className="text-[13px] font-bold text-[#17223b]">Bottom 5 At-Risk Students</h3>
+                    <div className="mt-3 space-y-2">
+                      {activeStats.sorted.slice(-5).reverse().map((row: any, index: number) => <div key={row.enrollmentNo} className="flex items-center justify-between border-b border-[#f0f1f3] pb-2 last:border-0"><span className="text-[10px] font-semibold text-[#344054]">{index + 1}. {row.name}</span><span className="text-[10px] font-extrabold text-[#ef4444]">{row.marks}</span></div>)}
+                    </div>
+                  </section>
+                </div>
               </div>
-            </div>
-          </div>
-        </>
-      )}
+            </section>
+          </>
+        )}
+      </main>
     </div>
   );
 }

From 6edb5d043c14ebb96201b867437f4ec974a7da4d Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sun, 30 Aug 2026 21:04:18 +0530
Subject: [PATCH 50/80] Add combined academic view to class analysis

---
 .../section-analysis/[sectionId]/academic.tsx | 39 ++++++++++++++++---
 1 file changed, 34 insertions(+), 5 deletions(-)

diff --git a/pages/section-analysis/[sectionId]/academic.tsx b/pages/section-analysis/[sectionId]/academic.tsx
index c78135e..e6b676d 100644
--- a/pages/section-analysis/[sectionId]/academic.tsx
+++ b/pages/section-analysis/[sectionId]/academic.tsx
@@ -5,7 +5,7 @@ import AnalysisNav from "../../../components/AnalysisNav";
 import { RawDataButton } from "../../../components/AnalysisWidgets";
 import { SectionAnalysis } from "../../../lib/analysisClass";
 
-type AcademicView = "midsem1" | "midsem2";
+type AcademicView = "midsem1" | "midsem2" | "combined";
 type Tier = "Excellent" | "Good" | "Needs Attention" | "Critical Risk";
 
 const TIER_COLORS: Record<Tier, string> = {
@@ -81,8 +81,34 @@ export default function AcademicPage() {
   const students = data?.students || [];
 
   const activeStats = useMemo(() => {
-    const exam = view === "midsem1" ? "midsem1" : "midsem2";
     const rows = students.map((student: any) => {
+      if (view === "combined") {
+        const marks = student.examMarks?.combined ?? null;
+        const max = student.examMarks?.max || student.examMarks?.midsem1Max || student.examMarks?.midsem2Max || 0;
+        const midsem1Subjects = student.examMarks?.midsem1Subjects || [];
+        const midsem2Subjects = student.examMarks?.midsem2Subjects || [];
+        const subjectMap = new Map<string, { code: string; marks: number | null; max: number; pass: boolean }>();
+
+        [...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 combinedMarks = values.length ? round1(values.reduce((a, b) => a + b, 0) / values.length) : null;
+          subjectMap.set(subject.code, {
+            code: subject.code,
+            marks: combinedMarks,
+            max: Math.max(existing.max || 0, subject.max || 0),
+            pass: combinedMarks === null ? true : combinedMarks >= Math.max(existing.max || 0, subject.max || 0) * 0.4,
+          });
+        });
+
+        return { 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`] || [];
@@ -94,10 +120,12 @@ export default function AcademicPage() {
     const counts = { Excellent: 0, Good: 0, "Needs Attention": 0, "Critical Risk": 0 } as Record<Tier, number>;
     rows.forEach((row: any) => counts[tierFor(Number(row.marks), max)]++);
 
+    const subjectCodes = Array.from(new Set(rows.flatMap((row: any) => (row.subjects || []).map((subject: any) => subject.code))));
+
     return {
       rows,
       max,
-      subjectCodes: rows[0]?.subjects?.map((subject: any) => subject.code) || [],
+      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,
@@ -112,7 +140,7 @@ export default function AcademicPage() {
     : activeStats.rows;
 
   const totalStudents = students.length;
-  const activeLabel = view === "midsem1" ? "Midsem 1" : "Midsem 2";
+  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);
 
@@ -148,6 +176,7 @@ export default function AcademicPage() {
         <div className="analysis-view-switch">
           <button className={view === "midsem1" ? "is-active" : ""} onClick={() => setView("midsem1")}>Midsem 1</button>
           <button className={view === "midsem2" ? "is-active" : ""} onClick={() => setView("midsem2")}>Midsem 2</button>
+          <button className={view === "combined" ? "is-active" : ""} onClick={() => setView("combined")}>Combined</button>
         </div>
 
         {error && <div className="analysis-panel" style={{ padding: 14, marginBottom: 16, color: "#b42318" }}>{error}</div>}
@@ -158,7 +187,7 @@ export default function AcademicPage() {
             <section className="analysis-hero">
               <div className="analysis-hero-copy">
                 <h2>{activeLabel}</h2>
-                <p>Marks across all subjects, class statistics, and performance tiers.</p>
+                <p>{view === "combined" ? "Combined Midsem 1 and Midsem 2 performance across all subjects." : "Marks across all subjects, class statistics, and performance tiers."}</p>
               </div>
               <Metric label="Class Average" value={`${activeStats.average}/${activeStats.max || 0}`} detail="class average across subjects" />
               <Metric label="Class Median" value={`${activeStats.median}/${activeStats.max || 0}`} detail="middle class score" />

From 6303bcc13d20cd5cbc64b1d99a9e5a07ae11a1f8 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sun, 30 Aug 2026 22:15:32 +0530
Subject: [PATCH 51/80] Add combined academic score and sort filters

---
 .../section-analysis/[sectionId]/academic.tsx | 88 ++++++++++++++++---
 1 file changed, 74 insertions(+), 14 deletions(-)

diff --git a/pages/section-analysis/[sectionId]/academic.tsx b/pages/section-analysis/[sectionId]/academic.tsx
index e6b676d..263090a 100644
--- a/pages/section-analysis/[sectionId]/academic.tsx
+++ b/pages/section-analysis/[sectionId]/academic.tsx
@@ -6,6 +6,8 @@ import { RawDataButton } from "../../../components/AnalysisWidgets";
 import { SectionAnalysis } from "../../../lib/analysisClass";
 
 type AcademicView = "midsem1" | "midsem2" | "combined";
+type ScoreBasis = "midsem1" | "midsem2" | "combined" | "max";
+type SortOrder = "none" | "highToLow" | "lowToHigh";
 type Tier = "Excellent" | "Good" | "Needs Attention" | "Critical Risk";
 
 const TIER_COLORS: Record<Tier, string> = {
@@ -34,6 +36,19 @@ function tierFor(marks: number, max: number): Tier {
   return "Critical Risk";
 }
 
+function gradeFor(marks: number, max: number) {
+  if (max <= 0) return "—";
+  const percentage = (marks / max) * 100;
+  if (percentage >= 90) return "A+";
+  if (percentage >= 80) return "A";
+  if (percentage >= 70) return "B+";
+  if (percentage >= 60) return "B";
+  if (percentage >= 50) return "C+";
+  if (percentage >= 40) return "C";
+  if (percentage >= 30) return "D";
+  return "F";
+}
+
 function Metric({ label, value, detail }: { label: string; value: string | number; detail: string }) {
   return (
     <div className="rounded-2xl border border-[#e6e5e2] bg-white px-5 py-4 shadow-[0_8px_28px_rgba(31,35,49,0.04)]">
@@ -48,6 +63,8 @@ export default function AcademicPage() {
   const router = useRouter();
   const { sectionId } = router.query;
   const [view, setView] = useState<AcademicView>("midsem1");
+  const [scoreBasis, setScoreBasis] = useState<ScoreBasis>("combined");
+  const [sortOrder, setSortOrder] = useState<SortOrder>("none");
   const [data, setData] = useState<SectionAnalysis | null>(null);
   const [sheetId, setSheetId] = useState<string | null>(null);
   const [computedAt, setComputedAt] = useState("");
@@ -76,15 +93,15 @@ export default function AcademicPage() {
   }
 
   useEffect(() => { loadAnalysis(); }, [sectionId]);
-  useEffect(() => { setSelectedTier(null); }, [view]);
+  useEffect(() => { setSelectedTier(null); setSortOrder("none"); }, [view]);
 
   const students = data?.students || [];
 
   const activeStats = useMemo(() => {
     const rows = students.map((student: any) => {
       if (view === "combined") {
-        const marks = student.examMarks?.combined ?? null;
-        const max = student.examMarks?.max || student.examMarks?.midsem1Max || student.examMarks?.midsem2Max || 0;
+        const combinedMarks = student.examMarks?.combined ?? null;
+        const combinedMax = student.examMarks?.max || student.examMarks?.midsem1Max || student.examMarks?.midsem2Max || 0;
         const midsem1Subjects = student.examMarks?.midsem1Subjects || [];
         const midsem2Subjects = student.examMarks?.midsem2Subjects || [];
         const subjectMap = new Map<string, { code: string; marks: number | null; max: number; pass: boolean }>();
@@ -96,15 +113,27 @@ export default function AcademicPage() {
             return;
           }
           const values = [existing.marks, subject.marks].filter((value): value is number => value !== null && value !== undefined);
-          const combinedMarks = values.length ? round1(values.reduce((a, b) => a + b, 0) / values.length) : null;
+          const subjectCombined = values.length ? round1(values.reduce((a, b) => a + b, 0) / values.length) : null;
           subjectMap.set(subject.code, {
             code: subject.code,
-            marks: combinedMarks,
+            marks: subjectCombined,
             max: Math.max(existing.max || 0, subject.max || 0),
-            pass: combinedMarks === null ? true : combinedMarks >= Math.max(existing.max || 0, subject.max || 0) * 0.4,
+            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") {
+          max = Math.max(student.examMarks?.midsem1Max || 0, student.examMarks?.midsem2Max || 0, student.examMarks?.max || 0);
+        }
+
         return { enrollmentNo: student.enrollmentNo, name: student.name, marks, max, subjects: Array.from(subjectMap.values()) };
       }
 
@@ -118,7 +147,7 @@ export default function AcademicPage() {
     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<Tier, number>;
-    rows.forEach((row: any) => counts[tierFor(Number(row.marks), max)]++);
+    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))));
 
@@ -129,16 +158,22 @@ export default function AcademicPage() {
       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) >= max * 0.4).length / marks.length * 100) : 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]);
+  }, [students, view, scoreBasis]);
 
-  const displayedRows = selectedTier
-    ? activeStats.rows.filter((row: any) => tierFor(Number(row.marks), activeStats.max) === selectedTier)
+  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 totalStudents = students.length;
   const activeLabel = view === "midsem1" ? "Midsem 1" : view === "midsem2" ? "Midsem 2" : "Combined";
   const tierEntries = Object.entries(activeStats.counts) as [Tier, number][];
@@ -203,24 +238,48 @@ export default function AcademicPage() {
                       Pass mark: 40%{selectedTier ? ` · Filtered: ${selectedTier}` : ""}
                     </p>
                   </div>
+                  {view === "combined" && (
+                    <div className="flex items-end gap-3">
+                      <label className="flex flex-col gap-1 text-[9px] font-bold uppercase tracking-[0.2px] text-[#7b8498]">
+                        Score
+                        <select value={scoreBasis} onChange={(e) => 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]">
+                          <option value="midsem1">Midsem 1</option>
+                          <option value="midsem2">Midsem 2</option>
+                          <option value="combined">Combined</option>
+                          <option value="max">Max</option>
+                        </select>
+                      </label>
+                      <label className="flex flex-col gap-1 text-[9px] font-bold uppercase tracking-[0.2px] text-[#7b8498]">
+                        Sort
+                        <select value={sortOrder} onChange={(e) => 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]">
+                          <option value="none">No Sort</option>
+                          <option value="highToLow">High to Low</option>
+                          <option value="lowToHigh">Low to High</option>
+                        </select>
+                      </label>
+                    </div>
+                  )}
                   {selectedTier && <button className="analysis-secondary" onClick={() => setSelectedTier(null)}>Clear filter</button>}
                 </div>
 
                 <div className="overflow-auto">
-                  <table className="w-full min-w-[760px] border-collapse text-[12px]">
+                  <table className="w-full min-w-[820px] border-collapse text-[12px]">
                     <thead>
                       <tr className="border-b border-[#edf0f4] text-left text-[10px] font-bold uppercase tracking-[0.2px] text-[#7b8498]">
                         <th className="sticky left-0 z-10 bg-white px-3 py-3">Student Name</th>
                         {activeStats.subjectCodes.map((code: string) => <th key={code} className="whitespace-nowrap px-3 py-3">{code}</th>)}
                         <th className="whitespace-nowrap px-3 py-3">Total</th>
+                        {view === "combined" && <th className="whitespace-nowrap px-3 py-3">Grade</th>}
                         <th className="whitespace-nowrap px-3 py-3">%age</th>
                         <th className="whitespace-nowrap px-3 py-3">Tier</th>
                       </tr>
                     </thead>
                     <tbody>
                       {displayedRows.map((row: any) => {
-                        const pct = activeStats.max > 0 ? Math.round(Number(row.marks) / activeStats.max * 100) : 0;
-                        const tier = tierFor(Number(row.marks), activeStats.max);
+                        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 (
                           <tr key={row.enrollmentNo} className="border-b border-[#f0f1f3] last:border-0">
                             <td className="sticky left-0 z-10 bg-white px-3 py-3 font-semibold text-[#17223b]">
@@ -234,6 +293,7 @@ export default function AcademicPage() {
                               return <td key={code} className={`px-3 py-3 ${subject?.marks === null || subject?.marks === undefined ? "text-[#98a2b3]" : subject.pass === false ? "font-semibold text-[#ef4444]" : "text-[#15966a]"}`}>{subject?.marks ?? "—"}</td>;
                             })}
                             <td className="px-3 py-3 font-bold text-[#17223b]">{row.marks}</td>
+                            {view === "combined" && <td className="px-3 py-3 font-bold text-[#5b4ee6]">{grade}</td>}
                             <td className="px-3 py-3 text-[#626b80]">{pct}%</td>
                             <td className="px-3 py-3"><button onClick={() => setSelectedTier(tier)} className="rounded-full px-2.5 py-1 text-[9px] font-bold" style={{ backgroundColor: `${TIER_COLORS[tier]}18`, color: TIER_COLORS[tier] }}>{tier}</button></td>
                           </tr>

From 2a8d266a7a344b955e8ea5def2a96572038e7ec6 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sun, 30 Aug 2026 22:16:23 +0530
Subject: [PATCH 52/80] Fix max score basis for combined grading

---
 pages/section-analysis/[sectionId]/academic.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/pages/section-analysis/[sectionId]/academic.tsx b/pages/section-analysis/[sectionId]/academic.tsx
index 263090a..8e7bd07 100644
--- a/pages/section-analysis/[sectionId]/academic.tsx
+++ b/pages/section-analysis/[sectionId]/academic.tsx
@@ -131,7 +131,11 @@ export default function AcademicPage() {
           marks = student.examMarks?.midsem2 ?? null;
           max = student.examMarks?.midsem2Max || 0;
         } else if (scoreBasis === "max") {
-          max = Math.max(student.examMarks?.midsem1Max || 0, student.examMarks?.midsem2Max || 0, student.examMarks?.max || 0);
+          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 { enrollmentNo: student.enrollmentNo, name: student.name, marks, max, subjects: Array.from(subjectMap.values()) };

From 4ed2c9f092d2820ff0566d2224184f2ee961053d Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sun, 30 Aug 2026 23:33:10 +0530
Subject: [PATCH 53/80] Add performance grade column to class combined view

---
 .../section-analysis/[sectionId]/academic.tsx | 144 +++---------------
 1 file changed, 20 insertions(+), 124 deletions(-)

diff --git a/pages/section-analysis/[sectionId]/academic.tsx b/pages/section-analysis/[sectionId]/academic.tsx
index 8e7bd07..8000327 100644
--- a/pages/section-analysis/[sectionId]/academic.tsx
+++ b/pages/section-analysis/[sectionId]/academic.tsx
@@ -36,17 +36,8 @@ function tierFor(marks: number, max: number): Tier {
   return "Critical Risk";
 }
 
-function gradeFor(marks: number, max: number) {
-  if (max <= 0) return "—";
-  const percentage = (marks / max) * 100;
-  if (percentage >= 90) return "A+";
-  if (percentage >= 80) return "A";
-  if (percentage >= 70) return "B+";
-  if (percentage >= 60) return "B";
-  if (percentage >= 50) return "C+";
-  if (percentage >= 40) return "C";
-  if (percentage >= 30) return "D";
-  return "F";
+function gradeFor(marks: number, max: number): Tier {
+  return tierFor(marks, max);
 }
 
 function Metric({ label, value, detail }: { label: string; value: string | number; detail: string }) {
@@ -152,7 +143,6 @@ export default function AcademicPage() {
     const max = rows[0]?.max || 0;
     const counts = { Excellent: 0, Good: 0, "Needs Attention": 0, "Critical Risk": 0 } as Record<Tier, number>;
     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 {
@@ -198,16 +188,8 @@ export default function AcademicPage() {
 
       <main className="analysis-page">
         <header className="analysis-topbar">
-          <div className="analysis-title-row">
-            <h1>Class / Section Analysis</h1>
-            {computedAt && <span className="analysis-sync">• Last synced {new Date(computedAt).toLocaleString()}</span>}
-          </div>
-          <div className="analysis-top-actions">
-            <button className="analysis-primary" onClick={() => loadAnalysis(true)} disabled={syncing}>
-              <RefreshCw size={15} className={syncing ? "animate-spin" : ""} />
-              {syncing ? "Syncing..." : "Sync now"}
-            </button>
-          </div>
+          <div className="analysis-title-row"><h1>Class / Section Analysis</h1>{computedAt && <span className="analysis-sync">• Last synced {new Date(computedAt).toLocaleString()}</span>}</div>
+          <div className="analysis-top-actions"><button className="analysis-primary" onClick={() => loadAnalysis(true)} disabled={syncing}><RefreshCw size={15} className={syncing ? "animate-spin" : ""} />{syncing ? "Syncing..." : "Sync now"}</button></div>
         </header>
 
         {typeof sectionId === "string" && <AnalysisNav sectionId={sectionId} />}
@@ -224,10 +206,7 @@ export default function AcademicPage() {
         {data && (
           <>
             <section className="analysis-hero">
-              <div className="analysis-hero-copy">
-                <h2>{activeLabel}</h2>
-                <p>{view === "combined" ? "Combined Midsem 1 and Midsem 2 performance across all subjects." : "Marks across all subjects, class statistics, and performance tiers."}</p>
-              </div>
+              <div className="analysis-hero-copy"><h2>{activeLabel}</h2><p>{view === "combined" ? "Combined Midsem 1 and Midsem 2 performance across all subjects." : "Marks across all subjects, class statistics, and performance tiers."}</p></div>
               <Metric label="Class Average" value={`${activeStats.average}/${activeStats.max || 0}`} detail="class average across subjects" />
               <Metric label="Class Median" value={`${activeStats.median}/${activeStats.max || 0}`} detail="middle class score" />
               <Metric label="Pass Rate" value={`${activeStats.passRate}%`} detail="students at or above 40%" />
@@ -236,72 +215,28 @@ export default function AcademicPage() {
             <section className="analysis-content-grid academic-content-grid">
               <section className="analysis-panel analysis-table-panel">
                 <div className="analysis-panel-head">
-                  <div>
-                    <h3>Data Sheet</h3>
-                    <p style={{ marginTop: 4, color: "#98a2b3", fontSize: 11 }}>
-                      Pass mark: 40%{selectedTier ? ` · Filtered: ${selectedTier}` : ""}
-                    </p>
-                  </div>
-                  {view === "combined" && (
-                    <div className="flex items-end gap-3">
-                      <label className="flex flex-col gap-1 text-[9px] font-bold uppercase tracking-[0.2px] text-[#7b8498]">
-                        Score
-                        <select value={scoreBasis} onChange={(e) => 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]">
-                          <option value="midsem1">Midsem 1</option>
-                          <option value="midsem2">Midsem 2</option>
-                          <option value="combined">Combined</option>
-                          <option value="max">Max</option>
-                        </select>
-                      </label>
-                      <label className="flex flex-col gap-1 text-[9px] font-bold uppercase tracking-[0.2px] text-[#7b8498]">
-                        Sort
-                        <select value={sortOrder} onChange={(e) => 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]">
-                          <option value="none">No Sort</option>
-                          <option value="highToLow">High to Low</option>
-                          <option value="lowToHigh">Low to High</option>
-                        </select>
-                      </label>
-                    </div>
-                  )}
+                  <div><h3>Data Sheet</h3><p style={{ marginTop: 4, color: "#98a2b3", fontSize: 11 }}>Pass mark: 40%{selectedTier ? ` · Filtered: ${selectedTier}` : ""}</p></div>
+                  {view === "combined" && <div className="flex items-end gap-3">
+                    <label className="flex flex-col gap-1 text-[9px] font-bold uppercase tracking-[0.2px] text-[#7b8498]">Score<select value={scoreBasis} onChange={(e) => 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]"><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option><option value="combined">Combined</option><option value="max">Max</option></select></label>
+                    <label className="flex flex-col gap-1 text-[9px] font-bold uppercase tracking-[0.2px] text-[#7b8498]">Sort<select value={sortOrder} onChange={(e) => 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]"><option value="none">No Sort</option><option value="highToLow">High to Low</option><option value="lowToHigh">Low to High</option></select></label>
+                  </div>}
                   {selectedTier && <button className="analysis-secondary" onClick={() => setSelectedTier(null)}>Clear filter</button>}
                 </div>
 
                 <div className="overflow-auto">
                   <table className="w-full min-w-[820px] border-collapse text-[12px]">
-                    <thead>
-                      <tr className="border-b border-[#edf0f4] text-left text-[10px] font-bold uppercase tracking-[0.2px] text-[#7b8498]">
-                        <th className="sticky left-0 z-10 bg-white px-3 py-3">Student Name</th>
-                        {activeStats.subjectCodes.map((code: string) => <th key={code} className="whitespace-nowrap px-3 py-3">{code}</th>)}
-                        <th className="whitespace-nowrap px-3 py-3">Total</th>
-                        {view === "combined" && <th className="whitespace-nowrap px-3 py-3">Grade</th>}
-                        <th className="whitespace-nowrap px-3 py-3">%age</th>
-                        <th className="whitespace-nowrap px-3 py-3">Tier</th>
-                      </tr>
-                    </thead>
+                    <thead><tr className="border-b border-[#edf0f4] text-left text-[10px] font-bold uppercase tracking-[0.2px] text-[#7b8498]"><th className="sticky left-0 z-10 bg-white px-3 py-3">Student Name</th>{activeStats.subjectCodes.map((code: string) => <th key={code} className="whitespace-nowrap px-3 py-3">{code}</th>)}<th className="whitespace-nowrap px-3 py-3">Total</th>{view === "combined" && <th className="whitespace-nowrap px-3 py-3">Grade</th>}</tr></thead>
                     <tbody>
                       {displayedRows.map((row: any) => {
                         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 (
-                          <tr key={row.enrollmentNo} className="border-b border-[#f0f1f3] last:border-0">
-                            <td className="sticky left-0 z-10 bg-white px-3 py-3 font-semibold text-[#17223b]">
-                              <div className="flex items-center gap-2">
-                                <span className="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-[#eeebff] text-[9px] font-extrabold text-[#5b4ee6]">{initials(row.name)}</span>
-                                <span className="whitespace-nowrap">{row.name}</span>
-                              </div>
-                            </td>
-                            {activeStats.subjectCodes.map((code: string) => {
-                              const subject = (row.subjects || []).find((item: any) => item.code === code);
-                              return <td key={code} className={`px-3 py-3 ${subject?.marks === null || subject?.marks === undefined ? "text-[#98a2b3]" : subject.pass === false ? "font-semibold text-[#ef4444]" : "text-[#15966a]"}`}>{subject?.marks ?? "—"}</td>;
-                            })}
-                            <td className="px-3 py-3 font-bold text-[#17223b]">{row.marks}</td>
-                            {view === "combined" && <td className="px-3 py-3 font-bold text-[#5b4ee6]">{grade}</td>}
-                            <td className="px-3 py-3 text-[#626b80]">{pct}%</td>
-                            <td className="px-3 py-3"><button onClick={() => setSelectedTier(tier)} className="rounded-full px-2.5 py-1 text-[9px] font-bold" style={{ backgroundColor: `${TIER_COLORS[tier]}18`, color: TIER_COLORS[tier] }}>{tier}</button></td>
-                          </tr>
-                        );
+                        return <tr key={row.enrollmentNo} className="border-b border-[#f0f1f3] last:border-0">
+                          <td className="sticky left-0 z-10 bg-white px-3 py-3 font-semibold text-[#17223b]"><div className="flex items-center gap-2"><span className="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-[#eeebff] text-[9px] font-extrabold text-[#5b4ee6]">{initials(row.name)}</span><span className="whitespace-nowrap">{row.name}</span></div></td>
+                          {activeStats.subjectCodes.map((code: string) => { const subject = (row.subjects || []).find((item: any) => item.code === code); return <td key={code} className={`px-3 py-3 ${subject?.marks === null || subject?.marks === undefined ? "text-[#98a2b3]" : subject.pass === false ? "font-semibold text-[#ef4444]" : "text-[#15966a]"}`}>{subject?.marks ?? "—"}</td>; })}
+                          <td className="px-3 py-3 font-bold text-[#17223b]">{row.marks}</td>
+                          {view === "combined" && <td className="px-3 py-3"><button onClick={() => setSelectedTier(tier)} className="rounded-full px-2.5 py-1 text-[9px] font-bold" style={{ backgroundColor: `${TIER_COLORS[tier]}18`, color: TIER_COLORS[tier] }}>{grade}</button></td>}
+                        </tr>;
                       })}
                     </tbody>
                   </table>
@@ -309,48 +244,9 @@ export default function AcademicPage() {
               </section>
 
               <div className="space-y-5">
-                <div className="grid grid-cols-2 gap-4">
-                  <Metric label="Class Average" value={activeStats.average} detail={`out of ${activeStats.max || 0}`} />
-                  <Metric label="Class Median" value={activeStats.median} detail="middle class score" />
-                  <Metric label="Highest Score" value={activeStats.highest} detail={highestNames.length ? highestNames[0] : "top score"} />
-                  <Metric label="Pass Rate" value={`${activeStats.passRate}%`} detail={`${activeStats.rows.length} students assessed`} />
-                </div>
-
-                <section className="analysis-panel p-5">
-                  <div className="mb-4 flex items-center justify-between">
-                    <div>
-                      <h3>Performance Tier</h3>
-                      <p className="mt-1 text-[10px] text-[#98a2b3]">Click a tier to filter the data sheet.</p>
-                    </div>
-                    <span className="text-[10px] text-[#98a2b3]">{totalStudents} Students</span>
-                  </div>
-                  <div className="space-y-2.5">
-                    {tierEntries.map(([tier, count]) => (
-                      <button key={tier} onClick={() => 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]"}`}>
-                        <span className="flex items-center gap-2.5"><span className="h-2.5 w-2.5 rounded-full" style={{ background: TIER_COLORS[tier] }} /><span className="text-[11px] font-semibold text-[#344054]">{tier}</span></span>
-                        <span className="text-[12px] font-extrabold" style={{ color: TIER_COLORS[tier] }}>{count}</span>
-                      </button>
-                    ))}
-                  </div>
-                  <div className="mt-5 h-3 overflow-hidden rounded-full bg-[#f0f1f4]">
-                    {tierEntries.map(([tier, count]) => <span key={tier} className="inline-block h-full" style={{ width: `${activeStats.rows.length ? count / activeStats.rows.length * 100 : 0}%`, background: TIER_COLORS[tier] }} />)}
-                  </div>
-                </section>
-
-                <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-                  <section className="analysis-panel p-5">
-                    <h3 className="text-[13px] font-bold text-[#17223b]">Top 5 Highest Scorers</h3>
-                    <div className="mt-3 space-y-2">
-                      {activeStats.sorted.slice(0, 5).map((row: any, index: number) => <div key={row.enrollmentNo} className="flex items-center justify-between border-b border-[#f0f1f3] pb-2 last:border-0"><span className="text-[10px] font-semibold text-[#344054]">{index + 1}. {row.name}</span><span className="text-[10px] font-extrabold text-[#15966a]">{row.marks}</span></div>)}
-                    </div>
-                  </section>
-                  <section className="analysis-panel p-5">
-                    <h3 className="text-[13px] font-bold text-[#17223b]">Bottom 5 At-Risk Students</h3>
-                    <div className="mt-3 space-y-2">
-                      {activeStats.sorted.slice(-5).reverse().map((row: any, index: number) => <div key={row.enrollmentNo} className="flex items-center justify-between border-b border-[#f0f1f3] pb-2 last:border-0"><span className="text-[10px] font-semibold text-[#344054]">{index + 1}. {row.name}</span><span className="text-[10px] font-extrabold text-[#ef4444]">{row.marks}</span></div>)}
-                    </div>
-                  </section>
-                </div>
+                <div className="grid grid-cols-2 gap-4"><Metric label="Class Average" value={activeStats.average} detail={`out of ${activeStats.max || 0}`} /><Metric label="Class Median" value={activeStats.median} detail="middle class score" /><Metric label="Highest Score" value={activeStats.highest} detail={highestNames.length ? highestNames[0] : "top score"} /><Metric label="Pass Rate" value={`${activeStats.passRate}%`} detail={`${activeStats.rows.length} students assessed`} /></div>
+                <section className="analysis-panel p-5"><div className="mb-4 flex items-center justify-between"><div><h3>Performance Tier</h3><p className="mt-1 text-[10px] text-[#98a2b3]">Click a tier to filter the data sheet.</p></div><span className="text-[10px] text-[#98a2b3]">{totalStudents} Students</span></div><div className="space-y-2.5">{tierEntries.map(([tier, count]) => <button key={tier} onClick={() => 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]"}`}><span className="flex items-center gap-2.5"><span className="h-2.5 w-2.5 rounded-full" style={{ background: TIER_COLORS[tier] }} /><span className="text-[11px] font-semibold text-[#344054]">{tier}</span></span><span className="text-[12px] font-extrabold" style={{ color: TIER_COLORS[tier] }}>{count}</span></button>)}</div><div className="mt-5 h-3 overflow-hidden rounded-full bg-[#f0f1f4]">{tierEntries.map(([tier, count]) => <span key={tier} className="inline-block h-full" style={{ width: `${activeStats.rows.length ? count / activeStats.rows.length * 100 : 0}%`, background: TIER_COLORS[tier] }} />)}</div></section>
+                <div className="grid grid-cols-1 gap-4 md:grid-cols-2"><section className="analysis-panel p-5"><h3 className="text-[13px] font-bold text-[#17223b]">Top 5 Highest Scorers</h3><div className="mt-3 space-y-2">{activeStats.sorted.slice(0, 5).map((row: any, index: number) => <div key={row.enrollmentNo} className="flex items-center justify-between border-b border-[#f0f1f3] pb-2 last:border-0"><span className="text-[10px] font-semibold text-[#344054]">{index + 1}. {row.name}</span><span className="text-[10px] font-extrabold text-[#15966a]">{row.marks}</span></div>)}</div></section><section className="analysis-panel p-5"><h3 className="text-[13px] font-bold text-[#17223b]">Bottom 5 At-Risk Students</h3><div className="mt-3 space-y-2">{activeStats.sorted.slice(-5).reverse().map((row: any, index: number) => <div key={row.enrollmentNo} className="flex items-center justify-between border-b border-[#f0f1f3] pb-2 last:border-0"><span className="text-[10px] font-semibold text-[#344054]">{index + 1}. {row.name}</span><span className="text-[10px] font-extrabold text-[#ef4444]">{row.marks}</span></div>)}</div></section></div>
               </div>
             </section>
           </>

From ff72a4f6229f8e9ef2f6da1c3b1e3894a6ae1324 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sun, 30 Aug 2026 23:33:33 +0530
Subject: [PATCH 54/80] Keep class academic table columns and add combined
 grade

---
 .../section-analysis/[sectionId]/academic.tsx | 234 ++++--------------
 1 file changed, 45 insertions(+), 189 deletions(-)

diff --git a/pages/section-analysis/[sectionId]/academic.tsx b/pages/section-analysis/[sectionId]/academic.tsx
index 8000327..ef47160 100644
--- a/pages/section-analysis/[sectionId]/academic.tsx
+++ b/pages/section-analysis/[sectionId]/academic.tsx
@@ -10,45 +10,15 @@ type ScoreBasis = "midsem1" | "midsem2" | "combined" | "max";
 type SortOrder = "none" | "highToLow" | "lowToHigh";
 type Tier = "Excellent" | "Good" | "Needs Attention" | "Critical Risk";
 
-const TIER_COLORS: Record<Tier, string> = {
-  Excellent: "#2563eb",
-  Good: "#15966a",
-  "Needs Attention": "#f59e0b",
-  "Critical Risk": "#ef4444",
-};
-
+const TIER_COLORS: Record<Tier, string> = { Excellent: "#2563eb", 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;
-  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 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 Metric({ label, value, detail }: { label: string; value: string | number; detail: string }) {
-  return (
-    <div className="rounded-2xl border border-[#e6e5e2] bg-white px-5 py-4 shadow-[0_8px_28px_rgba(31,35,49,0.04)]">
-      <div className="text-[11px] font-semibold text-[#6f7890]">{label}</div>
-      <div className="mt-1 text-[25px] font-extrabold tracking-[-1px] text-[#17223b]">{value}</div>
-      <div className="mt-1 text-[10px] text-[#98a2b3]">{detail}</div>
-    </div>
-  );
-}
+function Metric({ label, value, detail }: { label: string; value: string | number; detail: string }) { return <div className="rounded-2xl border border-[#e6e5e2] bg-white px-5 py-4 shadow-[0_8px_28px_rgba(31,35,49,0.04)]"><div className="text-[11px] font-semibold text-[#6f7890]">{label}</div><div className="mt-1 text-[25px] font-extrabold tracking-[-1px] text-[#17223b]">{value}</div><div className="mt-1 text-[10px] text-[#98a2b3]">{detail}</div></div>; }
 
 export default function AcademicPage() {
   const router = useRouter();
@@ -66,26 +36,14 @@ export default function AcademicPage() {
 
   async function loadAnalysis(sync = false) {
     if (!sectionId || typeof sectionId !== "string") return;
-    sync ? setSyncing(true) : setLoading(true);
-    setError("");
-    try {
-      const res = await fetch(`/api/analysis/section/${sectionId}${sync ? "?sync=1" : ""}`);
-      const json = await res.json();
-      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);
-    }
+    sync ? setSyncing(true) : setLoading(true); setError("");
+    try { const res = await fetch(`/api/analysis/section/${sectionId}${sync ? "?sync=1" : ""}`); const json = await res.json(); 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(); }, [sectionId]);
   useEffect(() => { setSelectedTier(null); setSortOrder("none"); }, [view]);
-
   const students = data?.students || [];
 
   const activeStats = useMemo(() => {
@@ -96,162 +54,60 @@ export default function AcademicPage() {
         const midsem1Subjects = student.examMarks?.midsem1Subjects || [];
         const midsem2Subjects = student.examMarks?.midsem2Subjects || [];
         const subjectMap = new Map<string, { code: string; marks: number | null; max: number; pass: boolean }>();
-
         [...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;
-          }
+          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,
-          });
+          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);
-        }
-
+        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 { 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`] || [];
+      const marks = student.examMarks?.[exam] ?? null; const max = student.examMarks?.[`${exam}Max`] || 0; const subjects = student.examMarks?.[`${exam}Subjects`] || [];
       return { 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 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<Tier, number>;
     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)),
-    };
+    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 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 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);
 
-  return (
-    <div className="analysis-layout min-h-screen bg-[#fffdf8] text-[#17223b]">
-      <aside className="analysis-sidebar">
-        <div className="analysis-brand"><span className="analysis-brand__mark"><BarChart3 size={18} /></span><span>ClassPulse</span></div>
-        <nav className="analysis-side-nav">
-          <a href="/dashboard"><LayoutDashboard size={18} />Dashboard</a>
-          <a className="is-active" href={typeof sectionId === "string" ? `/class-analysis/${sectionId}` : "#"}><BookOpen size={18} />Class Analysis</a>
-          <a href="/subject-analysis"><GraduationCap size={18} />Subject Analysis</a>
-        </nav>
-        <RawDataButton sheetId={sheetId} />
-        <div className="analysis-side-footer">ClassPulse Teacher Portal</div>
-      </aside>
-
-      <main className="analysis-page">
-        <header className="analysis-topbar">
-          <div className="analysis-title-row"><h1>Class / Section Analysis</h1>{computedAt && <span className="analysis-sync">• Last synced {new Date(computedAt).toLocaleString()}</span>}</div>
-          <div className="analysis-top-actions"><button className="analysis-primary" onClick={() => loadAnalysis(true)} disabled={syncing}><RefreshCw size={15} className={syncing ? "animate-spin" : ""} />{syncing ? "Syncing..." : "Sync now"}</button></div>
-        </header>
-
-        {typeof sectionId === "string" && <AnalysisNav sectionId={sectionId} />}
-
-        <div className="analysis-view-switch">
-          <button className={view === "midsem1" ? "is-active" : ""} onClick={() => setView("midsem1")}>Midsem 1</button>
-          <button className={view === "midsem2" ? "is-active" : ""} onClick={() => setView("midsem2")}>Midsem 2</button>
-          <button className={view === "combined" ? "is-active" : ""} onClick={() => setView("combined")}>Combined</button>
-        </div>
-
-        {error && <div className="analysis-panel" style={{ padding: 14, marginBottom: 16, color: "#b42318" }}>{error}</div>}
-        {loading && !data && <div style={{ padding: 40, color: "#667085", fontSize: 13 }}>Loading academic analysis...</div>}
-
-        {data && (
-          <>
-            <section className="analysis-hero">
-              <div className="analysis-hero-copy"><h2>{activeLabel}</h2><p>{view === "combined" ? "Combined Midsem 1 and Midsem 2 performance across all subjects." : "Marks across all subjects, class statistics, and performance tiers."}</p></div>
-              <Metric label="Class Average" value={`${activeStats.average}/${activeStats.max || 0}`} detail="class average across subjects" />
-              <Metric label="Class Median" value={`${activeStats.median}/${activeStats.max || 0}`} detail="middle class score" />
-              <Metric label="Pass Rate" value={`${activeStats.passRate}%`} detail="students at or above 40%" />
-            </section>
-
-            <section className="analysis-content-grid academic-content-grid">
-              <section className="analysis-panel analysis-table-panel">
-                <div className="analysis-panel-head">
-                  <div><h3>Data Sheet</h3><p style={{ marginTop: 4, color: "#98a2b3", fontSize: 11 }}>Pass mark: 40%{selectedTier ? ` · Filtered: ${selectedTier}` : ""}</p></div>
-                  {view === "combined" && <div className="flex items-end gap-3">
-                    <label className="flex flex-col gap-1 text-[9px] font-bold uppercase tracking-[0.2px] text-[#7b8498]">Score<select value={scoreBasis} onChange={(e) => 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]"><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option><option value="combined">Combined</option><option value="max">Max</option></select></label>
-                    <label className="flex flex-col gap-1 text-[9px] font-bold uppercase tracking-[0.2px] text-[#7b8498]">Sort<select value={sortOrder} onChange={(e) => 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]"><option value="none">No Sort</option><option value="highToLow">High to Low</option><option value="lowToHigh">Low to High</option></select></label>
-                  </div>}
-                  {selectedTier && <button className="analysis-secondary" onClick={() => setSelectedTier(null)}>Clear filter</button>}
-                </div>
-
-                <div className="overflow-auto">
-                  <table className="w-full min-w-[820px] border-collapse text-[12px]">
-                    <thead><tr className="border-b border-[#edf0f4] text-left text-[10px] font-bold uppercase tracking-[0.2px] text-[#7b8498]"><th className="sticky left-0 z-10 bg-white px-3 py-3">Student Name</th>{activeStats.subjectCodes.map((code: string) => <th key={code} className="whitespace-nowrap px-3 py-3">{code}</th>)}<th className="whitespace-nowrap px-3 py-3">Total</th>{view === "combined" && <th className="whitespace-nowrap px-3 py-3">Grade</th>}</tr></thead>
-                    <tbody>
-                      {displayedRows.map((row: any) => {
-                        const rowMax = Number(row.max) || activeStats.max;
-                        const tier = tierFor(Number(row.marks), rowMax);
-                        const grade = gradeFor(Number(row.marks), rowMax);
-                        return <tr key={row.enrollmentNo} className="border-b border-[#f0f1f3] last:border-0">
-                          <td className="sticky left-0 z-10 bg-white px-3 py-3 font-semibold text-[#17223b]"><div className="flex items-center gap-2"><span className="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-[#eeebff] text-[9px] font-extrabold text-[#5b4ee6]">{initials(row.name)}</span><span className="whitespace-nowrap">{row.name}</span></div></td>
-                          {activeStats.subjectCodes.map((code: string) => { const subject = (row.subjects || []).find((item: any) => item.code === code); return <td key={code} className={`px-3 py-3 ${subject?.marks === null || subject?.marks === undefined ? "text-[#98a2b3]" : subject.pass === false ? "font-semibold text-[#ef4444]" : "text-[#15966a]"}`}>{subject?.marks ?? "—"}</td>; })}
-                          <td className="px-3 py-3 font-bold text-[#17223b]">{row.marks}</td>
-                          {view === "combined" && <td className="px-3 py-3"><button onClick={() => setSelectedTier(tier)} className="rounded-full px-2.5 py-1 text-[9px] font-bold" style={{ backgroundColor: `${TIER_COLORS[tier]}18`, color: TIER_COLORS[tier] }}>{grade}</button></td>}
-                        </tr>;
-                      })}
-                    </tbody>
-                  </table>
-                </div>
-              </section>
-
-              <div className="space-y-5">
-                <div className="grid grid-cols-2 gap-4"><Metric label="Class Average" value={activeStats.average} detail={`out of ${activeStats.max || 0}`} /><Metric label="Class Median" value={activeStats.median} detail="middle class score" /><Metric label="Highest Score" value={activeStats.highest} detail={highestNames.length ? highestNames[0] : "top score"} /><Metric label="Pass Rate" value={`${activeStats.passRate}%`} detail={`${activeStats.rows.length} students assessed`} /></div>
-                <section className="analysis-panel p-5"><div className="mb-4 flex items-center justify-between"><div><h3>Performance Tier</h3><p className="mt-1 text-[10px] text-[#98a2b3]">Click a tier to filter the data sheet.</p></div><span className="text-[10px] text-[#98a2b3]">{totalStudents} Students</span></div><div className="space-y-2.5">{tierEntries.map(([tier, count]) => <button key={tier} onClick={() => 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]"}`}><span className="flex items-center gap-2.5"><span className="h-2.5 w-2.5 rounded-full" style={{ background: TIER_COLORS[tier] }} /><span className="text-[11px] font-semibold text-[#344054]">{tier}</span></span><span className="text-[12px] font-extrabold" style={{ color: TIER_COLORS[tier] }}>{count}</span></button>)}</div><div className="mt-5 h-3 overflow-hidden rounded-full bg-[#f0f1f4]">{tierEntries.map(([tier, count]) => <span key={tier} className="inline-block h-full" style={{ width: `${activeStats.rows.length ? count / activeStats.rows.length * 100 : 0}%`, background: TIER_COLORS[tier] }} />)}</div></section>
-                <div className="grid grid-cols-1 gap-4 md:grid-cols-2"><section className="analysis-panel p-5"><h3 className="text-[13px] font-bold text-[#17223b]">Top 5 Highest Scorers</h3><div className="mt-3 space-y-2">{activeStats.sorted.slice(0, 5).map((row: any, index: number) => <div key={row.enrollmentNo} className="flex items-center justify-between border-b border-[#f0f1f3] pb-2 last:border-0"><span className="text-[10px] font-semibold text-[#344054]">{index + 1}. {row.name}</span><span className="text-[10px] font-extrabold text-[#15966a]">{row.marks}</span></div>)}</div></section><section className="analysis-panel p-5"><h3 className="text-[13px] font-bold text-[#17223b]">Bottom 5 At-Risk Students</h3><div className="mt-3 space-y-2">{activeStats.sorted.slice(-5).reverse().map((row: any, index: number) => <div key={row.enrollmentNo} className="flex items-center justify-between border-b border-[#f0f1f3] pb-2 last:border-0"><span className="text-[10px] font-semibold text-[#344054]">{index + 1}. {row.name}</span><span className="text-[10px] font-extrabold text-[#ef4444]">{row.marks}</span></div>)}</div></section></div>
-              </div>
-            </section>
-          </>
-        )}
-      </main>
-    </div>
-  );
+  return <div className="analysis-layout min-h-screen bg-[#fffdf8] text-[#17223b]">
+    <aside className="analysis-sidebar"><div className="analysis-brand"><span className="analysis-brand__mark"><BarChart3 size={18} /></span><span>ClassPulse</span></div><nav className="analysis-side-nav"><a href="/dashboard"><LayoutDashboard size={18} />Dashboard</a><a className="is-active" href={typeof sectionId === "string" ? `/class-analysis/${sectionId}` : "#"}><BookOpen size={18} />Class Analysis</a><a href="/subject-analysis"><GraduationCap size={18} />Subject Analysis</a></nav><RawDataButton sheetId={sheetId} /><div className="analysis-side-footer">ClassPulse Teacher Portal</div></aside>
+    <main className="analysis-page">
+      <header className="analysis-topbar"><div className="analysis-title-row"><h1>Class / Section Analysis</h1>{computedAt && <span className="analysis-sync">• Last synced {new Date(computedAt).toLocaleString()}</span>}</div><div className="analysis-top-actions"><button className="analysis-primary" onClick={() => loadAnalysis(true)} disabled={syncing}><RefreshCw size={15} className={syncing ? "animate-spin" : ""} />{syncing ? "Syncing..." : "Sync now"}</button></div></header>
+      {typeof sectionId === "string" && <AnalysisNav sectionId={sectionId} />}
+      <div className="analysis-view-switch"><button className={view === "midsem1" ? "is-active" : ""} onClick={() => setView("midsem1")}>Midsem 1</button><button className={view === "midsem2" ? "is-active" : ""} onClick={() => setView("midsem2")}>Midsem 2</button><button className={view === "combined" ? "is-active" : ""} onClick={() => setView("combined")}>Combined</button></div>
+      {error && <div className="analysis-panel" style={{ padding: 14, marginBottom: 16, color: "#b42318" }}>{error}</div>}
+      {loading && !data && <div style={{ padding: 40, color: "#667085", fontSize: 13 }}>Loading academic analysis...</div>}
+      {data && <>
+        <section className="analysis-hero"><div className="analysis-hero-copy"><h2>{activeLabel}</h2><p>{view === "combined" ? "Combined Midsem 1 and Midsem 2 performance across all subjects." : "Marks across all subjects, class statistics, and performance tiers."}</p></div><Metric label="Class Average" value={`${activeStats.average}/${activeStats.max || 0}`} detail="class average across subjects" /><Metric label="Class Median" value={`${activeStats.median}/${activeStats.max || 0}`} detail="middle class score" /><Metric label="Pass Rate" value={`${activeStats.passRate}%`} detail="students at or above 40%" /></section>
+        <section className="analysis-content-grid academic-content-grid">
+          <section className="analysis-panel analysis-table-panel">
+            <div className="analysis-panel-head"><div><h3>Data Sheet</h3><p style={{ marginTop: 4, color: "#98a2b3", fontSize: 11 }}>Pass mark: 40%{selectedTier ? ` · Filtered: ${selectedTier}` : ""}</p></div>{view === "combined" && <div className="flex items-end gap-3"><label className="flex flex-col gap-1 text-[9px] font-bold uppercase tracking-[0.2px] text-[#7b8498]">Score<select value={scoreBasis} onChange={(e) => 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]"><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option><option value="combined">Combined</option><option value="max">Max</option></select></label><label className="flex flex-col gap-1 text-[9px] font-bold uppercase tracking-[0.2px] text-[#7b8498]">Sort<select value={sortOrder} onChange={(e) => 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]"><option value="none">No Sort</option><option value="highToLow">High to Low</option><option value="lowToHigh">Low to High</option></select></label></div>}{selectedTier && <button className="analysis-secondary" onClick={() => setSelectedTier(null)}>Clear filter</button>}</div>
+            <div className="overflow-auto"><table className="w-full min-w-[820px] border-collapse text-[12px]"><thead><tr className="border-b border-[#edf0f4] text-left text-[10px] font-bold uppercase tracking-[0.2px] text-[#7b8498]"><th className="sticky left-0 z-10 bg-white px-3 py-3">Student Name</th>{activeStats.subjectCodes.map((code: string) => <th key={code} className="whitespace-nowrap px-3 py-3">{code}</th>)}<th className="whitespace-nowrap px-3 py-3">Total</th>{view === "combined" && <th className="whitespace-nowrap px-3 py-3">Grade</th>}{view !== "combined" && <><th className="whitespace-nowrap px-3 py-3">%age</th><th className="whitespace-nowrap px-3 py-3">Tier</th></>}</tr></thead><tbody>
+              {displayedRows.map((row: any) => { 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 <tr key={row.enrollmentNo} className="border-b border-[#f0f1f3] last:border-0"><td className="sticky left-0 z-10 bg-white px-3 py-3 font-semibold text-[#17223b]"><div className="flex items-center gap-2"><span className="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-[#eeebff] text-[9px] font-extrabold text-[#5b4ee6]">{initials(row.name)}</span><span className="whitespace-nowrap">{row.name}</span></div></td>{activeStats.subjectCodes.map((code: string) => { const subject = (row.subjects || []).find((item: any) => item.code === code); return <td key={code} className={`px-3 py-3 ${subject?.marks === null || subject?.marks === undefined ? "text-[#98a2b3]" : subject.pass === false ? "font-semibold text-[#ef4444]" : "text-[#15966a]"}`}>{subject?.marks ?? "—"}</td>; })}<td className="px-3 py-3 font-bold text-[#17223b]">{row.marks}</td>{view === "combined" ? <td className="px-3 py-3"><button onClick={() => setSelectedTier(tier)} className="rounded-full px-2.5 py-1 text-[9px] font-bold" style={{ backgroundColor: `${TIER_COLORS[tier]}18`, color: TIER_COLORS[tier] }}>{grade}</button></td> : <><td className="px-3 py-3 text-[#626b80]">{pct}%</td><td className="px-3 py-3"><button onClick={() => setSelectedTier(tier)} className="rounded-full px-2.5 py-1 text-[9px] font-bold" style={{ backgroundColor: `${TIER_COLORS[tier]}18`, color: TIER_COLORS[tier] }}>{tier}</button></td></>}</tr>; })}
+            </tbody></table></div>
+          </section>
+          <div className="space-y-5"><div className="grid grid-cols-2 gap-4"><Metric label="Class Average" value={activeStats.average} detail={`out of ${activeStats.max || 0}`} /><Metric label="Class Median" value={activeStats.median} detail="middle class score" /><Metric label="Highest Score" value={activeStats.highest} detail={highestNames.length ? highestNames[0] : "top score"} /><Metric label="Pass Rate" value={`${activeStats.passRate}%`} detail={`${activeStats.rows.length} students assessed`} /></div>
+            <section className="analysis-panel p-5"><div className="mb-4 flex items-center justify-between"><div><h3>Performance Tier</h3><p className="mt-1 text-[10px] text-[#98a2b3]">Click a tier to filter the data sheet.</p></div><span className="text-[10px] text-[#98a2b3]">{totalStudents} Students</span></div><div className="space-y-2.5">{tierEntries.map(([tier, count]) => <button key={tier} onClick={() => 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]"}`}><span className="flex items-center gap-2.5"><span className="h-2.5 w-2.5 rounded-full" style={{ background: TIER_COLORS[tier] }} /><span className="text-[11px] font-semibold text-[#344054]">{tier}</span></span><span className="text-[12px] font-extrabold" style={{ color: TIER_COLORS[tier] }}>{count}</span></button>)}</div><div className="mt-5 h-3 overflow-hidden rounded-full bg-[#f0f1f4]">{tierEntries.map(([tier, count]) => <span key={tier} className="inline-block h-full" style={{ width: `${activeStats.rows.length ? count / activeStats.rows.length * 100 : 0}%`, background: TIER_COLORS[tier] }} />)}</div></section>
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2"><section className="analysis-panel p-5"><h3 className="text-[13px] font-bold text-[#17223b]">Top 5 Highest Scorers</h3><div className="mt-3 space-y-2">{activeStats.sorted.slice(0, 5).map((row: any, index: number) => <div key={row.enrollmentNo} className="flex items-center justify-between border-b border-[#f0f1f3] pb-2 last:border-0"><span className="text-[10px] font-semibold text-[#344054]">{index + 1}. {row.name}</span><span className="text-[10px] font-extrabold text-[#15966a]">{row.marks}</span></div>)}</div></section><section className="analysis-panel p-5"><h3 className="text-[13px] font-bold text-[#17223b]">Bottom 5 At-Risk Students</h3><div className="mt-3 space-y-2">{activeStats.sorted.slice(-5).reverse().map((row: any, index: number) => <div key={row.enrollmentNo} className="flex items-center justify-between border-b border-[#f0f1f3] pb-2 last:border-0"><span className="text-[10px] font-semibold text-[#344054]">{index + 1}. {row.name}</span><span className="text-[10px] font-extrabold text-[#ef4444]">{row.marks}</span></div>)}</div></section></div>
+          </div>
+        </section>
+      </>}
+    </main>
+  </div>;
 }

From d8065297e162bb5e0547c8e223aaaa5dc2eec231 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sun, 30 Aug 2026 23:49:54 +0530
Subject: [PATCH 55/80] Widen class academic table to avoid horizontal
 scrolling

---
 styles/academic-table-fix.css | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 styles/academic-table-fix.css

diff --git a/styles/academic-table-fix.css b/styles/academic-table-fix.css
new file mode 100644
index 0000000..f5e3af7
--- /dev/null
+++ b/styles/academic-table-fix.css
@@ -0,0 +1,28 @@
+.academic-content-grid {
+  grid-template-columns: minmax(0, 1.5fr) minmax(340px, 1fr) !important;
+}
+
+.academic-content-grid .analysis-table-panel {
+  min-width: 0;
+}
+
+.academic-content-grid .analysis-table-panel > .overflow-auto {
+  overflow-x: hidden;
+}
+
+.academic-content-grid .analysis-table-panel table {
+  width: 100%;
+  min-width: 0 !important;
+  table-layout: fixed;
+}
+
+.academic-content-grid .analysis-table-panel th:first-child,
+.academic-content-grid .analysis-table-panel td:first-child {
+  width: 24%;
+}
+
+@media (max-width: 1100px) {
+  .academic-content-grid {
+    grid-template-columns: minmax(0, 1fr) !important;
+  }
+}

From d0ed5858cb9dd9633a093c66c40f622fbfa02727 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sun, 30 Aug 2026 23:50:06 +0530
Subject: [PATCH 56/80] Load academic table layout fix

---
 pages/_app.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 5e55630..2e8a26c 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -4,6 +4,7 @@ import GlobalButtonLoading from "../components/GlobalButtonLoading";
 import "../styles/globals.css";
 import "../app/globals.css";
 import "../styles/overall-analysis-fixes.css";
+import "../styles/academic-table-fix.css";
 
 export default function App({ Component, pageProps: { session, ...pageProps } }: AppProps) {
   return (

From 1749a355ca04e08ccf5ab79ec58a53d5d6f7c11c Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Sun, 30 Aug 2026 23:56:57 +0530
Subject: [PATCH 57/80] Fix class academic table layout

---
 pages/section-analysis/[sectionId]/academic.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/section-analysis/[sectionId]/academic.tsx b/pages/section-analysis/[sectionId]/academic.tsx
index ef47160..904e595 100644
--- a/pages/section-analysis/[sectionId]/academic.tsx
+++ b/pages/section-analysis/[sectionId]/academic.tsx
@@ -98,8 +98,8 @@ export default function AcademicPage() {
         <section className="analysis-content-grid academic-content-grid">
           <section className="analysis-panel analysis-table-panel">
             <div className="analysis-panel-head"><div><h3>Data Sheet</h3><p style={{ marginTop: 4, color: "#98a2b3", fontSize: 11 }}>Pass mark: 40%{selectedTier ? ` · Filtered: ${selectedTier}` : ""}</p></div>{view === "combined" && <div className="flex items-end gap-3"><label className="flex flex-col gap-1 text-[9px] font-bold uppercase tracking-[0.2px] text-[#7b8498]">Score<select value={scoreBasis} onChange={(e) => 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]"><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option><option value="combined">Combined</option><option value="max">Max</option></select></label><label className="flex flex-col gap-1 text-[9px] font-bold uppercase tracking-[0.2px] text-[#7b8498]">Sort<select value={sortOrder} onChange={(e) => 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]"><option value="none">No Sort</option><option value="highToLow">High to Low</option><option value="lowToHigh">Low to High</option></select></label></div>}{selectedTier && <button className="analysis-secondary" onClick={() => setSelectedTier(null)}>Clear filter</button>}</div>
-            <div className="overflow-auto"><table className="w-full min-w-[820px] border-collapse text-[12px]"><thead><tr className="border-b border-[#edf0f4] text-left text-[10px] font-bold uppercase tracking-[0.2px] text-[#7b8498]"><th className="sticky left-0 z-10 bg-white px-3 py-3">Student Name</th>{activeStats.subjectCodes.map((code: string) => <th key={code} className="whitespace-nowrap px-3 py-3">{code}</th>)}<th className="whitespace-nowrap px-3 py-3">Total</th>{view === "combined" && <th className="whitespace-nowrap px-3 py-3">Grade</th>}{view !== "combined" && <><th className="whitespace-nowrap px-3 py-3">%age</th><th className="whitespace-nowrap px-3 py-3">Tier</th></>}</tr></thead><tbody>
-              {displayedRows.map((row: any) => { 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 <tr key={row.enrollmentNo} className="border-b border-[#f0f1f3] last:border-0"><td className="sticky left-0 z-10 bg-white px-3 py-3 font-semibold text-[#17223b]"><div className="flex items-center gap-2"><span className="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-[#eeebff] text-[9px] font-extrabold text-[#5b4ee6]">{initials(row.name)}</span><span className="whitespace-nowrap">{row.name}</span></div></td>{activeStats.subjectCodes.map((code: string) => { const subject = (row.subjects || []).find((item: any) => item.code === code); return <td key={code} className={`px-3 py-3 ${subject?.marks === null || subject?.marks === undefined ? "text-[#98a2b3]" : subject.pass === false ? "font-semibold text-[#ef4444]" : "text-[#15966a]"}`}>{subject?.marks ?? "—"}</td>; })}<td className="px-3 py-3 font-bold text-[#17223b]">{row.marks}</td>{view === "combined" ? <td className="px-3 py-3"><button onClick={() => setSelectedTier(tier)} className="rounded-full px-2.5 py-1 text-[9px] font-bold" style={{ backgroundColor: `${TIER_COLORS[tier]}18`, color: TIER_COLORS[tier] }}>{grade}</button></td> : <><td className="px-3 py-3 text-[#626b80]">{pct}%</td><td className="px-3 py-3"><button onClick={() => setSelectedTier(tier)} className="rounded-full px-2.5 py-1 text-[9px] font-bold" style={{ backgroundColor: `${TIER_COLORS[tier]}18`, color: TIER_COLORS[tier] }}>{tier}</button></td></>}</tr>; })}
+            <div className="overflow-x-hidden"><table className="w-full min-w-0 table-fixed border-collapse text-[12px]"><colgroup><col className="w-[185px]" />{activeStats.subjectCodes.map((code: string) => <col key={code} className="w-[58px]" />)}<col className="w-[62px]" />{<col className="w-[62px]" />}{view === "combined" ? <col className="w-[96px]" /> : <col className="w-[104px]" />}</colgroup><thead><tr className="border-b border-[#edf0f4] text-left text-[10px] font-bold uppercase tracking-[0.2px] text-[#7b8498]"><th className="sticky left-0 z-10 bg-white px-3 py-3">Student Name</th>{activeStats.subjectCodes.map((code: string) => <th key={code} className="whitespace-nowrap px-2 py-3">{code}</th>)}<th className="whitespace-nowrap px-2 py-3">Total</th><th className="whitespace-nowrap px-2 py-3">%age</th><th className="whitespace-nowrap px-2 py-3">{view === "combined" ? "Grade" : "Tier"}</th></tr></thead><tbody>
+              {displayedRows.map((row: any) => { 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 <tr key={row.enrollmentNo} className="border-b border-[#f0f1f3] last:border-0"><td className="sticky left-0 z-10 bg-white px-3 py-3 font-semibold text-[#17223b]"><div className="flex items-center gap-2"><span className="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-[#eeebff] text-[9px] font-extrabold text-[#5b4ee6]">{initials(row.name)}</span><span className="truncate">{row.name}</span></div></td>{activeStats.subjectCodes.map((code: string) => { const subject = (row.subjects || []).find((item: any) => item.code === code); return <td key={code} className={`px-2 py-3 ${subject?.marks === null || subject?.marks === undefined ? "text-[#98a2b3]" : subject.pass === false ? "font-semibold text-[#ef4444]" : "text-[#15966a]"}`}>{subject?.marks ?? "—"}</td>; })}<td className="px-2 py-3 font-bold text-[#17223b]">{row.marks}</td><td className="px-2 py-3 text-[#626b80]">{pct}%</td><td className="px-2 py-3"><button onClick={() => setSelectedTier(tier)} className="whitespace-nowrap rounded-full px-2 py-1 text-[9px] font-bold" style={{ backgroundColor: `${TIER_COLORS[tier]}18`, color: TIER_COLORS[tier] }}>{view === "combined" ? grade : tier}</button></td></tr>; })}
             </tbody></table></div>
           </section>
           <div className="space-y-5"><div className="grid grid-cols-2 gap-4"><Metric label="Class Average" value={activeStats.average} detail={`out of ${activeStats.max || 0}`} /><Metric label="Class Median" value={activeStats.median} detail="middle class score" /><Metric label="Highest Score" value={activeStats.highest} detail={highestNames.length ? highestNames[0] : "top score"} /><Metric label="Pass Rate" value={`${activeStats.passRate}%`} detail={`${activeStats.rows.length} students assessed`} /></div>

From f6efd9e93d1325d872628702e94b0f1ccced82dc Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Mon, 31 Aug 2026 00:01:34 +0530
Subject: [PATCH 58/80] Restore class academic grade column and vertical table
 scroll

---
 pages/section-analysis/[sectionId]/academic.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/section-analysis/[sectionId]/academic.tsx b/pages/section-analysis/[sectionId]/academic.tsx
index 904e595..f74dcfb 100644
--- a/pages/section-analysis/[sectionId]/academic.tsx
+++ b/pages/section-analysis/[sectionId]/academic.tsx
@@ -98,8 +98,8 @@ export default function AcademicPage() {
         <section className="analysis-content-grid academic-content-grid">
           <section className="analysis-panel analysis-table-panel">
             <div className="analysis-panel-head"><div><h3>Data Sheet</h3><p style={{ marginTop: 4, color: "#98a2b3", fontSize: 11 }}>Pass mark: 40%{selectedTier ? ` · Filtered: ${selectedTier}` : ""}</p></div>{view === "combined" && <div className="flex items-end gap-3"><label className="flex flex-col gap-1 text-[9px] font-bold uppercase tracking-[0.2px] text-[#7b8498]">Score<select value={scoreBasis} onChange={(e) => 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]"><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option><option value="combined">Combined</option><option value="max">Max</option></select></label><label className="flex flex-col gap-1 text-[9px] font-bold uppercase tracking-[0.2px] text-[#7b8498]">Sort<select value={sortOrder} onChange={(e) => 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]"><option value="none">No Sort</option><option value="highToLow">High to Low</option><option value="lowToHigh">Low to High</option></select></label></div>}{selectedTier && <button className="analysis-secondary" onClick={() => setSelectedTier(null)}>Clear filter</button>}</div>
-            <div className="overflow-x-hidden"><table className="w-full min-w-0 table-fixed border-collapse text-[12px]"><colgroup><col className="w-[185px]" />{activeStats.subjectCodes.map((code: string) => <col key={code} className="w-[58px]" />)}<col className="w-[62px]" />{<col className="w-[62px]" />}{view === "combined" ? <col className="w-[96px]" /> : <col className="w-[104px]" />}</colgroup><thead><tr className="border-b border-[#edf0f4] text-left text-[10px] font-bold uppercase tracking-[0.2px] text-[#7b8498]"><th className="sticky left-0 z-10 bg-white px-3 py-3">Student Name</th>{activeStats.subjectCodes.map((code: string) => <th key={code} className="whitespace-nowrap px-2 py-3">{code}</th>)}<th className="whitespace-nowrap px-2 py-3">Total</th><th className="whitespace-nowrap px-2 py-3">%age</th><th className="whitespace-nowrap px-2 py-3">{view === "combined" ? "Grade" : "Tier"}</th></tr></thead><tbody>
-              {displayedRows.map((row: any) => { 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 <tr key={row.enrollmentNo} className="border-b border-[#f0f1f3] last:border-0"><td className="sticky left-0 z-10 bg-white px-3 py-3 font-semibold text-[#17223b]"><div className="flex items-center gap-2"><span className="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-[#eeebff] text-[9px] font-extrabold text-[#5b4ee6]">{initials(row.name)}</span><span className="truncate">{row.name}</span></div></td>{activeStats.subjectCodes.map((code: string) => { const subject = (row.subjects || []).find((item: any) => item.code === code); return <td key={code} className={`px-2 py-3 ${subject?.marks === null || subject?.marks === undefined ? "text-[#98a2b3]" : subject.pass === false ? "font-semibold text-[#ef4444]" : "text-[#15966a]"}`}>{subject?.marks ?? "—"}</td>; })}<td className="px-2 py-3 font-bold text-[#17223b]">{row.marks}</td><td className="px-2 py-3 text-[#626b80]">{pct}%</td><td className="px-2 py-3"><button onClick={() => setSelectedTier(tier)} className="whitespace-nowrap rounded-full px-2 py-1 text-[9px] font-bold" style={{ backgroundColor: `${TIER_COLORS[tier]}18`, color: TIER_COLORS[tier] }}>{view === "combined" ? grade : tier}</button></td></tr>; })}
+            <div className="max-h-[500px] overflow-y-auto overflow-x-hidden"><table className="w-full min-w-0 table-fixed border-collapse text-[12px]"><colgroup><col className="w-[185px]" />{activeStats.subjectCodes.map((code: string) => <col key={code} className="w-[58px]" />)}<col className="w-[62px]" /><col className="w-[62px]" /><col className="w-[104px]" /></colgroup><thead><tr className="border-b border-[#edf0f4] text-left text-[10px] font-bold uppercase tracking-[0.2px] text-[#7b8498]"><th className="sticky left-0 top-0 z-20 bg-white px-3 py-3">Student Name</th>{activeStats.subjectCodes.map((code: string) => <th key={code} className="sticky top-0 z-10 whitespace-nowrap bg-white px-2 py-3">{code}</th>)}<th className="sticky top-0 z-10 whitespace-nowrap bg-white px-2 py-3">Total</th><th className="sticky top-0 z-10 whitespace-nowrap bg-white px-2 py-3">%age</th><th className="sticky top-0 z-10 whitespace-nowrap bg-white px-2 py-3">Grade</th></tr></thead><tbody>
+              {displayedRows.map((row: any) => { 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 <tr key={row.enrollmentNo} className="border-b border-[#f0f1f3] last:border-0"><td className="sticky left-0 z-10 bg-white px-3 py-3 font-semibold text-[#17223b]"><div className="flex items-center gap-2"><span className="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-[#eeebff] text-[9px] font-extrabold text-[#5b4ee6]">{initials(row.name)}</span><span className="truncate">{row.name}</span></div></td>{activeStats.subjectCodes.map((code: string) => { const subject = (row.subjects || []).find((item: any) => item.code === code); return <td key={code} className={`px-2 py-3 ${subject?.marks === null || subject?.marks === undefined ? "text-[#98a2b3]" : subject.pass === false ? "font-semibold text-[#ef4444]" : "text-[#15966a]"}`}>{subject?.marks ?? "—"}</td>; })}<td className="px-2 py-3 font-bold text-[#17223b]">{row.marks}</td><td className="px-2 py-3 text-[#626b80]">{pct}%</td><td className="px-2 py-3"><button onClick={() => setSelectedTier(tier)} className="whitespace-nowrap rounded-full px-2 py-1 text-[9px] font-bold" style={{ backgroundColor: `${TIER_COLORS[grade]}18`, color: TIER_COLORS[grade] }}>{grade}</button></td></tr>; })}
             </tbody></table></div>
           </section>
           <div className="space-y-5"><div className="grid grid-cols-2 gap-4"><Metric label="Class Average" value={activeStats.average} detail={`out of ${activeStats.max || 0}`} /><Metric label="Class Median" value={activeStats.median} detail="middle class score" /><Metric label="Highest Score" value={activeStats.highest} detail={highestNames.length ? highestNames[0] : "top score"} /><Metric label="Pass Rate" value={`${activeStats.passRate}%`} detail={`${activeStats.rows.length} students assessed`} /></div>

From fcd9bd0e3f9ec7657d3c1d11136f7e50bb460aba Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Mon, 31 Aug 2026 00:15:46 +0530
Subject: [PATCH 59/80] Fix class academic grade column visibility

---
 pages/section-analysis/[sectionId]/academic.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/section-analysis/[sectionId]/academic.tsx b/pages/section-analysis/[sectionId]/academic.tsx
index f74dcfb..249b7f9 100644
--- a/pages/section-analysis/[sectionId]/academic.tsx
+++ b/pages/section-analysis/[sectionId]/academic.tsx
@@ -98,8 +98,8 @@ export default function AcademicPage() {
         <section className="analysis-content-grid academic-content-grid">
           <section className="analysis-panel analysis-table-panel">
             <div className="analysis-panel-head"><div><h3>Data Sheet</h3><p style={{ marginTop: 4, color: "#98a2b3", fontSize: 11 }}>Pass mark: 40%{selectedTier ? ` · Filtered: ${selectedTier}` : ""}</p></div>{view === "combined" && <div className="flex items-end gap-3"><label className="flex flex-col gap-1 text-[9px] font-bold uppercase tracking-[0.2px] text-[#7b8498]">Score<select value={scoreBasis} onChange={(e) => 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]"><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option><option value="combined">Combined</option><option value="max">Max</option></select></label><label className="flex flex-col gap-1 text-[9px] font-bold uppercase tracking-[0.2px] text-[#7b8498]">Sort<select value={sortOrder} onChange={(e) => 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]"><option value="none">No Sort</option><option value="highToLow">High to Low</option><option value="lowToHigh">Low to High</option></select></label></div>}{selectedTier && <button className="analysis-secondary" onClick={() => setSelectedTier(null)}>Clear filter</button>}</div>
-            <div className="max-h-[500px] overflow-y-auto overflow-x-hidden"><table className="w-full min-w-0 table-fixed border-collapse text-[12px]"><colgroup><col className="w-[185px]" />{activeStats.subjectCodes.map((code: string) => <col key={code} className="w-[58px]" />)}<col className="w-[62px]" /><col className="w-[62px]" /><col className="w-[104px]" /></colgroup><thead><tr className="border-b border-[#edf0f4] text-left text-[10px] font-bold uppercase tracking-[0.2px] text-[#7b8498]"><th className="sticky left-0 top-0 z-20 bg-white px-3 py-3">Student Name</th>{activeStats.subjectCodes.map((code: string) => <th key={code} className="sticky top-0 z-10 whitespace-nowrap bg-white px-2 py-3">{code}</th>)}<th className="sticky top-0 z-10 whitespace-nowrap bg-white px-2 py-3">Total</th><th className="sticky top-0 z-10 whitespace-nowrap bg-white px-2 py-3">%age</th><th className="sticky top-0 z-10 whitespace-nowrap bg-white px-2 py-3">Grade</th></tr></thead><tbody>
-              {displayedRows.map((row: any) => { 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 <tr key={row.enrollmentNo} className="border-b border-[#f0f1f3] last:border-0"><td className="sticky left-0 z-10 bg-white px-3 py-3 font-semibold text-[#17223b]"><div className="flex items-center gap-2"><span className="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-[#eeebff] text-[9px] font-extrabold text-[#5b4ee6]">{initials(row.name)}</span><span className="truncate">{row.name}</span></div></td>{activeStats.subjectCodes.map((code: string) => { const subject = (row.subjects || []).find((item: any) => item.code === code); return <td key={code} className={`px-2 py-3 ${subject?.marks === null || subject?.marks === undefined ? "text-[#98a2b3]" : subject.pass === false ? "font-semibold text-[#ef4444]" : "text-[#15966a]"}`}>{subject?.marks ?? "—"}</td>; })}<td className="px-2 py-3 font-bold text-[#17223b]">{row.marks}</td><td className="px-2 py-3 text-[#626b80]">{pct}%</td><td className="px-2 py-3"><button onClick={() => setSelectedTier(tier)} className="whitespace-nowrap rounded-full px-2 py-1 text-[9px] font-bold" style={{ backgroundColor: `${TIER_COLORS[grade]}18`, color: TIER_COLORS[grade] }}>{grade}</button></td></tr>; })}
+            <div className="max-h-[500px] overflow-y-auto overflow-x-hidden"><table className="w-full min-w-0 table-fixed border-collapse text-[11px]"><colgroup><col className="w-[160px]" />{activeStats.subjectCodes.map((code: string) => <col key={code} className="w-[48px]" />)}<col className="w-[55px]" /><col className="w-[55px]" /><col className="w-[92px]" /></colgroup><thead><tr className="border-b border-[#edf0f4] text-left text-[10px] font-bold uppercase tracking-[0.2px] text-[#7b8498]"><th className="sticky left-0 top-0 z-20 bg-white px-2 py-3">Student Name</th>{activeStats.subjectCodes.map((code: string) => <th key={code} className="sticky top-0 z-10 whitespace-nowrap bg-white px-1.5 py-3">{code}</th>)}<th className="sticky top-0 z-10 whitespace-nowrap bg-white px-1.5 py-3">Total</th><th className="sticky top-0 z-10 whitespace-nowrap bg-white px-1.5 py-3">%age</th><th className="sticky top-0 z-10 whitespace-nowrap bg-white px-1.5 py-3">Grade</th></tr></thead><tbody>
+              {displayedRows.map((row: any) => { 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 <tr key={row.enrollmentNo} className="border-b border-[#f0f1f3] last:border-0"><td className="sticky left-0 z-10 bg-white px-2 py-3 font-semibold text-[#17223b]"><div className="flex items-center gap-2"><span className="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-[#eeebff] text-[9px] font-extrabold text-[#5b4ee6]">{initials(row.name)}</span><span className="truncate">{row.name}</span></div></td>{activeStats.subjectCodes.map((code: string) => { const subject = (row.subjects || []).find((item: any) => item.code === code); return <td key={code} className={`px-1.5 py-3 ${subject?.marks === null || subject?.marks === undefined ? "text-[#98a2b3]" : subject.pass === false ? "font-semibold text-[#ef4444]" : "text-[#15966a]"}`}>{subject?.marks ?? "—"}</td>; })}<td className="px-1.5 py-3 font-bold text-[#17223b]">{row.marks}</td><td className="px-1.5 py-3 text-[#626b80]">{pct}%</td><td className="px-1.5 py-3"><button onClick={() => 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}</button></td></tr>; })}
             </tbody></table></div>
           </section>
           <div className="space-y-5"><div className="grid grid-cols-2 gap-4"><Metric label="Class Average" value={activeStats.average} detail={`out of ${activeStats.max || 0}`} /><Metric label="Class Median" value={activeStats.median} detail="middle class score" /><Metric label="Highest Score" value={activeStats.highest} detail={highestNames.length ? highestNames[0] : "top score"} /><Metric label="Pass Rate" value={`${activeStats.passRate}%`} detail={`${activeStats.rows.length} students assessed`} /></div>

From 104febe6875f6844dc9a5a024e388b4f00bdf355 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Mon, 31 Aug 2026 00:26:15 +0530
Subject: [PATCH 60/80] Fix combined class academic maximum

---
 pages/section-analysis/[sectionId]/academic.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/pages/section-analysis/[sectionId]/academic.tsx b/pages/section-analysis/[sectionId]/academic.tsx
index 249b7f9..592ce2d 100644
--- a/pages/section-analysis/[sectionId]/academic.tsx
+++ b/pages/section-analysis/[sectionId]/academic.tsx
@@ -50,7 +50,9 @@ export default function AcademicPage() {
     const rows = students.map((student: any) => {
       if (view === "combined") {
         const combinedMarks = student.examMarks?.combined ?? null;
-        const combinedMax = student.examMarks?.max || student.examMarks?.midsem1Max || student.examMarks?.midsem2Max || 0;
+        // Combined is the average of the two exams, so its maximum is the
+        // exam maximum itself (not the student's higher score).
+        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<string, { code: string; marks: number | null; max: number; pass: boolean }>();

From 0940ed1d7250b3820240d7e53c05831fcc80893f Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Mon, 31 Aug 2026 00:44:17 +0530
Subject: [PATCH 61/80] Add rank column when sorting class academic data

---
 pages/section-analysis/[sectionId]/academic.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/pages/section-analysis/[sectionId]/academic.tsx b/pages/section-analysis/[sectionId]/academic.tsx
index 592ce2d..286a459 100644
--- a/pages/section-analysis/[sectionId]/academic.tsx
+++ b/pages/section-analysis/[sectionId]/academic.tsx
@@ -82,6 +82,7 @@ export default function AcademicPage() {
 
   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][];
@@ -100,8 +101,8 @@ export default function AcademicPage() {
         <section className="analysis-content-grid academic-content-grid">
           <section className="analysis-panel analysis-table-panel">
             <div className="analysis-panel-head"><div><h3>Data Sheet</h3><p style={{ marginTop: 4, color: "#98a2b3", fontSize: 11 }}>Pass mark: 40%{selectedTier ? ` · Filtered: ${selectedTier}` : ""}</p></div>{view === "combined" && <div className="flex items-end gap-3"><label className="flex flex-col gap-1 text-[9px] font-bold uppercase tracking-[0.2px] text-[#7b8498]">Score<select value={scoreBasis} onChange={(e) => 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]"><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option><option value="combined">Combined</option><option value="max">Max</option></select></label><label className="flex flex-col gap-1 text-[9px] font-bold uppercase tracking-[0.2px] text-[#7b8498]">Sort<select value={sortOrder} onChange={(e) => 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]"><option value="none">No Sort</option><option value="highToLow">High to Low</option><option value="lowToHigh">Low to High</option></select></label></div>}{selectedTier && <button className="analysis-secondary" onClick={() => setSelectedTier(null)}>Clear filter</button>}</div>
-            <div className="max-h-[500px] overflow-y-auto overflow-x-hidden"><table className="w-full min-w-0 table-fixed border-collapse text-[11px]"><colgroup><col className="w-[160px]" />{activeStats.subjectCodes.map((code: string) => <col key={code} className="w-[48px]" />)}<col className="w-[55px]" /><col className="w-[55px]" /><col className="w-[92px]" /></colgroup><thead><tr className="border-b border-[#edf0f4] text-left text-[10px] font-bold uppercase tracking-[0.2px] text-[#7b8498]"><th className="sticky left-0 top-0 z-20 bg-white px-2 py-3">Student Name</th>{activeStats.subjectCodes.map((code: string) => <th key={code} className="sticky top-0 z-10 whitespace-nowrap bg-white px-1.5 py-3">{code}</th>)}<th className="sticky top-0 z-10 whitespace-nowrap bg-white px-1.5 py-3">Total</th><th className="sticky top-0 z-10 whitespace-nowrap bg-white px-1.5 py-3">%age</th><th className="sticky top-0 z-10 whitespace-nowrap bg-white px-1.5 py-3">Grade</th></tr></thead><tbody>
-              {displayedRows.map((row: any) => { 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 <tr key={row.enrollmentNo} className="border-b border-[#f0f1f3] last:border-0"><td className="sticky left-0 z-10 bg-white px-2 py-3 font-semibold text-[#17223b]"><div className="flex items-center gap-2"><span className="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-[#eeebff] text-[9px] font-extrabold text-[#5b4ee6]">{initials(row.name)}</span><span className="truncate">{row.name}</span></div></td>{activeStats.subjectCodes.map((code: string) => { const subject = (row.subjects || []).find((item: any) => item.code === code); return <td key={code} className={`px-1.5 py-3 ${subject?.marks === null || subject?.marks === undefined ? "text-[#98a2b3]" : subject.pass === false ? "font-semibold text-[#ef4444]" : "text-[#15966a]"}`}>{subject?.marks ?? "—"}</td>; })}<td className="px-1.5 py-3 font-bold text-[#17223b]">{row.marks}</td><td className="px-1.5 py-3 text-[#626b80]">{pct}%</td><td className="px-1.5 py-3"><button onClick={() => 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}</button></td></tr>; })}
+            <div className="max-h-[500px] overflow-y-auto overflow-x-hidden"><table className="w-full min-w-0 table-fixed border-collapse text-[11px]"><colgroup>{showRank && <col className="w-[40px]" />}<col className="w-[160px]" />{activeStats.subjectCodes.map((code: string) => <col key={code} className="w-[48px]" />)}<col className="w-[55px]" /><col className="w-[55px]" /><col className="w-[92px]" /></colgroup><thead><tr className="border-b border-[#edf0f4] text-left text-[10px] font-bold uppercase tracking-[0.2px] text-[#7b8498]">{showRank && <th className="sticky left-0 top-0 z-20 bg-white px-2 py-3 text-center">Rank</th>}<th className={`sticky ${showRank ? "left-[40px]" : "left-0"} top-0 z-20 bg-white px-2 py-3`}>Student Name</th>{activeStats.subjectCodes.map((code: string) => <th key={code} className="sticky top-0 z-10 whitespace-nowrap bg-white px-1.5 py-3">{code}</th>)}<th className="sticky top-0 z-10 whitespace-nowrap bg-white px-1.5 py-3">Total</th><th className="sticky top-0 z-10 whitespace-nowrap bg-white px-1.5 py-3">%age</th><th className="sticky top-0 z-10 whitespace-nowrap bg-white px-1.5 py-3">Grade</th></tr></thead><tbody>
+              {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 <tr key={row.enrollmentNo} className="border-b border-[#f0f1f3] last:border-0">{showRank && <td className="sticky left-0 z-10 bg-white px-2 py-3 text-center font-semibold text-[#626b80]">{index + 1}</td>}<td className={`sticky ${showRank ? "left-[40px]" : "left-0"} z-10 bg-white px-2 py-3 font-semibold text-[#17223b]`}><div className="flex items-center gap-2"><span className="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-[#eeebff] text-[9px] font-extrabold text-[#5b4ee6]">{initials(row.name)}</span><span className="truncate">{row.name}</span></div></td>{activeStats.subjectCodes.map((code: string) => { const subject = (row.subjects || []).find((item: any) => item.code === code); return <td key={code} className={`px-1.5 py-3 ${subject?.marks === null || subject?.marks === undefined ? "text-[#98a2b3]" : subject.pass === false ? "font-semibold text-[#ef4444]" : "text-[#15966a]"}`}>{subject?.marks ?? "—"}</td>; })}<td className="px-1.5 py-3 font-bold text-[#17223b]">{row.marks}</td><td className="px-1.5 py-3 text-[#626b80]">{pct}%</td><td className="px-1.5 py-3"><button onClick={() => 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}</button></td></tr>; })}
             </tbody></table></div>
           </section>
           <div className="space-y-5"><div className="grid grid-cols-2 gap-4"><Metric label="Class Average" value={activeStats.average} detail={`out of ${activeStats.max || 0}`} /><Metric label="Class Median" value={activeStats.median} detail="middle class score" /><Metric label="Highest Score" value={activeStats.highest} detail={highestNames.length ? highestNames[0] : "top score"} /><Metric label="Pass Rate" value={`${activeStats.passRate}%`} detail={`${activeStats.rows.length} students assessed`} /></div>

From b6eb501d78318381cb546dd685e079f7b303c908 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Mon, 31 Aug 2026 10:06:02 +0530
Subject: [PATCH 62/80] Add class overall at-risk analysis view

---
 .../section-analysis/[sectionId]/overall.tsx  | 381 ++++++++++++------
 1 file changed, 253 insertions(+), 128 deletions(-)

diff --git a/pages/section-analysis/[sectionId]/overall.tsx b/pages/section-analysis/[sectionId]/overall.tsx
index 2f84118..860b9fd 100644
--- a/pages/section-analysis/[sectionId]/overall.tsx
+++ b/pages/section-analysis/[sectionId]/overall.tsx
@@ -1,60 +1,89 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useRouter } from "next/router";
-import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  CartesianGrid,
-  Cell,
-} from "recharts";
+import { BarChart3, BookOpen, GraduationCap, LayoutDashboard, RefreshCw } from "lucide-react";
+import { BarChart, Bar, CartesianGrid, Cell, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
 
 import AnalysisNav from "../../../components/AnalysisNav";
-import { RawDataButton, StatCard, GradeBadge } from "../../../components/AnalysisWidgets";
+import { RawDataButton } from "../../../components/AnalysisWidgets";
 
-interface OverallStudent {
+type MarkMode = "basic" | "internal";
+type View = "internal" | "risk";
+type SortDirection = "none" | "asc" | "desc";
+
+type Subject = { id: string; name: string; code: string };
+type SubjectScore = {
+  subjectId: string;
+  code: string;
+  name: string;
+  attendance: number;
+  midsem1: number;
+  midsem2: number;
+  combined: number;
+  basicInternal: number;
+  moderatedInternal: number;
+  basicMax: number;
+  grade: string;
+};
+type Student = {
   enrollmentNo: string;
   name: string;
   email: string;
+  subjects: SubjectScore[];
   overallPct: number;
   overallAttendance: number;
   overallGrade: string;
-  subjects: {
-    subjectId: string;
-    code: string;
-    name: string;
-    attendance: number;
-    combined: number;
-    basicInternal: number;
-    grade: string;
-  }[];
-}
-
-interface OverallData {
-  subjects: { id: string; name: string; code: string }[];
-  students: OverallStudent[];
+};
+type OverallData = {
+  subjects: Subject[];
+  students: Student[];
   classAverageOverallPct: number;
-}
+};
 
 const TIER_COLORS: Record<string, string> = {
-  Excellent: "#10b981",
-  Good: "#3b82f6",
+  Excellent: "#2563eb",
+  Good: "#16a34a",
   "Needs Attention": "#f59e0b",
   "Critical Risk": "#ef4444",
 };
 
+function tierFor(pct: number) {
+  if (pct > 80) return "Excellent";
+  if (pct >= 60) return "Good";
+  if (pct >= 40) return "Needs Attention";
+  return "Critical Risk";
+}
+
+function tierClass(tier: string) {
+  if (tier === "Excellent") return "bg-blue-50 text-blue-700";
+  if (tier === "Good") return "bg-green-50 text-green-700";
+  if (tier === "Needs Attention") return "bg-amber-50 text-amber-700";
+  return "bg-red-50 text-red-600";
+}
+
+function scoreClass(value: number, max: number) {
+  const ratio = max > 0 ? value / max : 0;
+  if (ratio >= 0.8) return "text-emerald-600";
+  if (ratio >= 0.6) return "text-amber-600";
+  return "text-red-500";
+}
+
 export default function SectionOverallPage() {
   const router = useRouter();
   const { sectionId } = router.query;
-
   const [data, setData] = useState<OverallData | null>(null);
   const [sheetId, setSheetId] = useState<string | null>(null);
   const [computedAt, setComputedAt] = useState("");
   const [loading, setLoading] = useState(true);
   const [syncing, setSyncing] = useState(false);
   const [error, setError] = useState("");
+  const [view, setView] = useState<View>("risk");
+  const [markMode, setMarkMode] = useState<MarkMode>("basic");
+  const [lower, setLower] = useState(0);
+  const [upper, setUpper] = useState(40);
+  const [draftLower, setDraftLower] = useState(0);
+  const [draftUpper, setDraftUpper] = useState(40);
+  const [sortDirection, setSortDirection] = useState<SortDirection>("none");
+  const [draftSortDirection, setDraftSortDirection] = useState<SortDirection>("none");
 
   async function loadAnalysis(sync = false) {
     if (!sectionId || typeof sectionId !== "string") return;
@@ -84,112 +113,208 @@ export default function SectionOverallPage() {
     // 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<string, number>
-      )
-    : {};
+  const rows = useMemo(() => {
+    if (!data) return [];
+    return data.students.map((student, originalIndex) => {
+      const subjects = data.subjects.map((subject) => {
+        const score = student.subjects.find((item) => item.subjectId === subject.id || item.code === subject.code);
+        const mark = markMode === "basic" ? Number(score?.basicInternal || 0) : Number(score?.moderatedInternal || 0);
+        const max = Number(score?.basicMax || 0);
+        return { ...subject, mark, max, pct: max > 0 ? (mark / max) * 100 : 0 };
+      });
+      const overallPct = subjects.length
+        ? subjects.reduce((sum, subject) => sum + subject.pct, 0) / subjects.length
+        : 0;
+      return {
+        ...student,
+        originalIndex,
+        subjects,
+        overallPct,
+        tier: tierFor(overallPct),
+      };
+    });
+  }, [data, markMode]);
 
-  return (
-    <div className="min-h-screen max-w-[1700px] mx-auto px-8 py-10">
-      <div className="flex items-start justify-between mb-6">
-        <div>
-          <h1 className="text-lg font-semibold text-gray-900">Class / Section Analysis</h1>
-          {computedAt && <p className="text-xs text-gray-400 mt-1">Last synced {new Date(computedAt).toLocaleString()}</p>}
-        </div>
-        <div className="flex items-center gap-2">
-          <RawDataButton sheetId={sheetId} />
-          <button onClick={() => 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"}
-          </button>
-        </div>
-      </div>
+  const filteredRows = useMemo(() => {
+    const lo = Math.min(lower, upper);
+    const hi = Math.max(lower, upper);
+    const filtered = rows.filter((row) => row.overallPct >= lo && row.overallPct <= hi);
+    if (sortDirection === "none") return filtered.sort((a, b) => a.originalIndex - b.originalIndex);
+    return filtered.sort((a, b) =>
+      sortDirection === "asc"
+        ? a.overallPct - b.overallPct || a.name.localeCompare(b.name)
+        : b.overallPct - a.overallPct || a.name.localeCompare(b.name)
+    );
+  }, [rows, lower, upper, sortDirection]);
 
-      {typeof sectionId === "string" && <AnalysisNav sectionId={sectionId} />}
+  const tierCounts = useMemo(() => {
+    return rows.reduce((acc, row) => {
+      acc[row.tier] = (acc[row.tier] || 0) + 1;
+      return acc;
+    }, {} as Record<string, number>);
+  }, [rows]);
 
-      {error && <div className="bg-red-50 border border-red-100 text-red-700 text-sm rounded-lg p-4 mb-6">{error}</div>}
-      {loading && !data && <div className="text-sm text-gray-500 py-10">Loading overall analysis...</div>}
+  const classAverage = useMemo(() => {
+    if (!rows.length) return 0;
+    return rows.reduce((sum, row) => sum + row.overallPct, 0) / rows.length;
+  }, [rows]);
 
-      {data && (
-        <>
-          <div className="mb-6">
-            <h2 className="text-xl font-semibold text-gray-900">Overall Analysis</h2>
-            <p className="text-sm text-gray-500 mt-1">
-              Internal marks combined across all {data.subjects.length} subjects: {data.subjects.map((s) => s.name).join(", ")}.
-            </p>
-          </div>
+  const topFive = useMemo(
+    () => [...rows].sort((a, b) => b.overallPct - a.overallPct || a.originalIndex - b.originalIndex).slice(0, 5),
+    [rows]
+  );
 
-          <div className="bg-amber-50 border border-amber-100 text-amber-800 text-xs rounded-lg p-3 mb-6">
-            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.
-          </div>
+  const distribution = ["Excellent", "Good", "Needs Attention", "Critical Risk"].map((name) => ({
+    name,
+    count: tierCounts[name] || 0,
+  }));
+
+  function applyFilters() {
+    setLower(Math.min(draftLower, draftUpper));
+    setUpper(Math.max(draftLower, draftUpper));
+    setSortDirection(draftSortDirection);
+  }
+
+  function selectDistribution(index: number) {
+    const ranges = [
+      [80.0001, 100],
+      [60, 80],
+      [40, 59.9999],
+      [0, 39.9999],
+    ];
+    const range = ranges[index];
+    if (!range) return;
+    setDraftLower(range[0]);
+    setDraftUpper(range[1]);
+  }
 
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
-            <StatCard label="Total Students" value={data.students.length} />
-            <StatCard label="Subjects" value={data.subjects.length} />
-            <StatCard label="Class Average" value={`${data.classAverageOverallPct}%`} />
-            <StatCard label="Excellent Students" value={tierCounts["Excellent"] || 0} positive />
+  return (
+    <div className="min-h-screen bg-[#fffdf8] text-[#17223b] lg:flex">
+      <aside className="hidden w-[220px] shrink-0 border-r border-[#e8e7e3] bg-white lg:fixed lg:inset-y-0 lg:left-0 lg:flex lg:flex-col">
+        <div className="px-5 pt-6">
+          <a href="/dashboard" className="flex items-center gap-3">
+            <span className="grid h-10 w-10 place-items-center rounded-xl bg-[#39268f] text-white shadow-[0_10px_25px_rgba(57,38,143,0.2)]">
+              <BarChart3 size={21} strokeWidth={2.2} />
+            </span>
+            <span className="text-[20px] font-extrabold tracking-[-0.7px]">ClassPulse</span>
+          </a>
+        </div>
+        <nav className="mt-7 space-y-1 px-3 text-sm font-medium text-[#626b80]">
+          <a href="/dashboard" className="flex items-center gap-3 rounded-xl px-3 py-3 hover:bg-[#f6f4ff] hover:text-[#38258e]"><LayoutDashboard size={18} />Dashboard</a>
+          <a href="/class-analysis" className="flex items-center gap-3 rounded-xl bg-[#eeeaff] px-3 py-3 font-semibold text-[#38258e]"><BarChart3 size={18} />Class Analysis</a>
+          <a href="/subject-analysis" className="flex items-center gap-3 rounded-xl px-3 py-3 hover:bg-[#f6f4ff] hover:text-[#38258e]"><BookOpen size={18} />Subject Analysis</a>
+        </nav>
+        <div className="mt-auto border-t border-[#eeeeeb] px-5 py-5 text-xs text-[#7a8295]">ClassPulse Teacher Portal</div>
+      </aside>
+
+      <main className="w-full lg:ml-[220px]">
+        <div className="min-h-screen px-5 py-7 sm:px-8 lg:px-10 lg:py-9">
+          <div className="mb-5 flex items-start justify-between">
+            <div>
+              <h1 className="text-[26px] font-extrabold tracking-[-1px] sm:text-[30px]">Class / Section Analysis</h1>
+              {computedAt && <p className="mt-1 text-xs text-[#8a92a4]">Last synced {new Date(computedAt).toLocaleString()}</p>}
+            </div>
+            <div className="flex items-center gap-2">
+              <RawDataButton sheetId={sheetId} />
+              <button onClick={() => loadAnalysis(true)} disabled={syncing} className="inline-flex items-center gap-2 rounded-xl bg-[#39268f] px-4 py-3 text-sm font-semibold text-white shadow-[0_8px_20px_rgba(57,38,143,.18)] disabled:opacity-60">
+                <RefreshCw size={16} className={syncing ? "animate-spin" : ""} />
+                {syncing ? "Syncing..." : "Sync now"}
+              </button>
+            </div>
           </div>
 
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
-            <section className="bg-white rounded-2xl border border-gray-100 p-6 lg:col-span-2 overflow-x-auto">
-              <h3 className="font-medium text-gray-900 mb-4">All Students</h3>
-              <div className="max-h-[600px] overflow-y-auto">
-                <table className="w-full text-sm">
-                  <thead>
-                    <tr className="text-left text-gray-400 border-b border-gray-100">
-                      <th className="py-2 pr-3">Name</th>
-                      <th className="py-2 pr-3">Attendance</th>
-                      <th className="py-2 pr-3">Overall %</th>
-                      <th className="py-2">Grade</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {[...data.students]
-                      .sort((a, b) => b.overallPct - a.overallPct)
-                      .map((s) => (
-                        <tr key={s.enrollmentNo} className="border-b border-gray-50">
-                          <td className="py-2 pr-3 text-gray-900 whitespace-nowrap">{s.name}</td>
-                          <td className="py-2 pr-3 text-gray-500">{s.overallAttendance}%</td>
-                          <td className="py-2 pr-3">{s.overallPct}%</td>
-                          <td className="py-2">
-                            <GradeBadge grade={s.overallGrade} />
-                          </td>
-                        </tr>
-                      ))}
-                  </tbody>
-                </table>
+          {typeof sectionId === "string" && <AnalysisNav sectionId={sectionId} />}
+
+          {error && <div className="mt-5 rounded-xl border border-red-100 bg-red-50 p-4 text-sm text-red-700">{error}</div>}
+          {loading && !data && <div className="py-12 text-sm text-[#6f7890]">Loading overall analysis...</div>}
+
+          {data && (
+            <>
+              <div className="mt-5 flex items-center gap-2">
+                <button onClick={() => setView("internal")} className={`rounded-xl border px-5 py-3 text-sm font-semibold ${view === "internal" ? "border-[#39268f] bg-[#39268f] text-white shadow-[0_8px_20px_rgba(57,38,143,.18)]" : "border-[#dedfe5] bg-white text-[#667087]"}`}>Internal Marks</button>
+                <button onClick={() => setView("risk")} className={`rounded-xl border px-5 py-3 text-sm font-semibold ${view === "risk" ? "border-[#39268f] bg-[#39268f] text-white shadow-[0_8px_20px_rgba(57,38,143,.18)]" : "border-[#dedfe5] bg-white text-[#667087]"}`}>At Risk</button>
               </div>
-            </section>
-
-            <section className="bg-white rounded-2xl border border-gray-100 p-6">
-              <h3 className="font-medium text-gray-900 mb-4">Grade Distribution</h3>
-              <ResponsiveContainer width="100%" height={260}>
-                <BarChart
-                  data={["Excellent", "Good", "Needs Attention", "Critical Risk"].map((name) => ({
-                    name,
-                    count: tierCounts[name] || 0,
-                  }))}
-                >
-                  <CartesianGrid strokeDasharray="3 3" vertical={false} />
-                  <XAxis dataKey="name" fontSize={10} />
-                  <YAxis fontSize={12} allowDecimals={false} />
-                  <Tooltip />
-                  <Bar dataKey="count" radius={[4, 4, 0, 0]}>
-                    {["Excellent", "Good", "Needs Attention", "Critical Risk"].map((name, i) => (
-                      <Cell key={i} fill={TIER_COLORS[name]} />
-                    ))}
-                  </Bar>
-                </BarChart>
-              </ResponsiveContainer>
-            </section>
-          </div>
-        </>
-      )}
+
+              <div className="mt-5 grid gap-4 md:grid-cols-3">
+                <div className="rounded-2xl border border-[#e4e4e8] bg-white p-6 shadow-[0_8px_30px_rgba(31,35,49,.04)]"><p className="text-sm text-[#6d7890]">Class Average</p><p className="mt-2 text-[31px] font-extrabold tracking-[-1.5px]">{classAverage.toFixed(1)}%</p><p className="mt-1 text-xs text-[#8b94a6]">across all {data.subjects.length} subjects</p></div>
+                <div className="rounded-2xl border border-[#e4e4e8] bg-white p-6 shadow-[0_8px_30px_rgba(31,35,49,.04)]"><p className="text-sm text-[#6d7890]">Students</p><p className="mt-2 text-[31px] font-extrabold tracking-[-1.5px]">{rows.length}</p><p className="mt-1 text-xs text-[#8b94a6]">students assessed</p></div>
+                <div className="rounded-2xl border border-[#e4e4e8] bg-white p-6 shadow-[0_8px_30px_rgba(31,35,49,.04)]"><p className="text-sm text-[#6d7890]">Excellent Students</p><p className="mt-2 text-[31px] font-extrabold tracking-[-1.5px]">{tierCounts.Excellent || 0}</p><p className="mt-1 text-xs text-[#8b94a6]">above 80%</p></div>
+              </div>
+
+              {view === "risk" ? (
+                <>
+                  <section className="mt-5 rounded-2xl border border-[#e4e4e8] bg-white p-5 shadow-[0_8px_30px_rgba(31,35,49,.04)]">
+                    <h2 className="text-[16px] font-bold">At-Risk Filters</h2>
+                    <p className="mt-1 text-xs text-[#8b94a6]">Choose mark type, range and sort.</p>
+                    <div className="mt-4 grid gap-3 md:grid-cols-[1.1fr_.7fr_.7fr_1.1fr_auto] md:items-end">
+                      <label className="text-xs font-semibold text-[#6f7890]">Marks shown
+                        <select value={markMode} onChange={(e) => setMarkMode(e.target.value as MarkMode)} className="mt-2 w-full rounded-xl border border-[#d9dce4] bg-white px-4 py-3 text-sm font-medium text-[#17223b] outline-none focus:border-[#5b4ee6]">
+                          <option value="basic">Basic</option>
+                          <option value="internal">Internal Marks</option>
+                        </select>
+                      </label>
+                      <label className="text-xs font-semibold text-[#6f7890]">Lower bound<input type="number" value={draftLower} min={0} max={100} onChange={(e) => setDraftLower(Number(e.target.value))} className="mt-2 w-full rounded-xl border border-[#d9dce4] px-4 py-3 text-sm outline-none focus:border-[#5b4ee6]" /></label>
+                      <label className="text-xs font-semibold text-[#6f7890]">Upper bound<input type="number" value={draftUpper} min={0} max={100} onChange={(e) => setDraftUpper(Number(e.target.value))} className="mt-2 w-full rounded-xl border border-[#d9dce4] px-4 py-3 text-sm outline-none focus:border-[#5b4ee6]" /></label>
+                      <label className="text-xs font-semibold text-[#6f7890]">Sort<select value={draftSortDirection} onChange={(e) => setDraftSortDirection(e.target.value as SortDirection)} className="mt-2 w-full rounded-xl border border-[#d9dce4] bg-white px-4 py-3 text-sm font-medium text-[#17223b] outline-none focus:border-[#5b4ee6]"><option value="none">No sort</option><option value="desc">High to Low</option><option value="asc">Low to High</option></select></label>
+                      <button onClick={applyFilters} className="rounded-xl bg-[#39268f] px-5 py-3 text-sm font-semibold text-white">Apply</button>
+                    </div>
+                  </section>
+
+                  <div className="mt-5 grid gap-5 lg:grid-cols-[minmax(0,2fr)_minmax(320px,1fr)]">
+                    <section className="min-w-0 rounded-2xl border border-[#e4e4e8] bg-white p-5 shadow-[0_8px_30px_rgba(31,35,49,.04)]">
+                      <div className="mb-3 flex items-center justify-between"><div><h2 className="text-[16px] font-bold">Filtered Students</h2><p className="mt-1 text-xs text-[#8b94a6]">Showing {filteredRows.length} of {rows.length} students.</p></div><span className="rounded-full bg-[#f0edff] px-3 py-1 text-xs font-semibold text-[#5b4ee6]">{data.subjects.length} Subjects</span></div>
+                      <div className="max-h-[600px] overflow-auto rounded-xl border border-[#f0f0f2]">
+                        <table className="min-w-[1080px] w-full text-sm">
+                          <thead className="sticky top-0 z-10 bg-white">
+                            <tr className="border-b border-[#ececf0] text-left text-[11px] font-bold uppercase tracking-wide text-[#7c8497]">
+                              <th className="px-3 py-3">Enrollment</th><th className="px-3 py-3">Student</th>
+                              {data.subjects.map((subject) => <th key={subject.id} className="px-3 py-3 text-center">{subject.code || subject.name}</th>)}
+                              <th className="px-3 py-3 text-center">Overall %</th><th className="px-3 py-3">Status</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {filteredRows.map((row) => (
+                              <tr key={row.enrollmentNo} className="border-b border-[#f1f1f3] last:border-0">
+                                <td className="whitespace-nowrap px-3 py-3 text-xs text-[#7b8497]">{row.enrollmentNo}</td>
+                                <td className="whitespace-nowrap px-3 py-3 font-semibold text-[#17223b]">{row.name}</td>
+                                {row.subjects.map((subject) => <td key={subject.id} className={`px-3 py-3 text-center font-semibold ${scoreClass(subject.mark, subject.max)}`}>{subject.mark}</td>)}
+                                <td className="px-3 py-3 text-center font-bold text-[#17223b]">{row.overallPct.toFixed(1)}%</td>
+                                <td className="px-3 py-3"><span className={`inline-flex whitespace-nowrap rounded-full px-3 py-1 text-[11px] font-semibold ${tierClass(row.tier)}`}>{row.tier}</span></td>
+                              </tr>
+                            ))}
+                          </tbody>
+                        </table>
+                      </div>
+                    </section>
+
+                    <div className="space-y-5">
+                      <section className="rounded-2xl border border-[#e4e4e8] bg-white p-5 shadow-[0_8px_30px_rgba(31,35,49,.04)]">
+                        <h2 className="text-[16px] font-bold">Distribution</h2><p className="mt-1 text-xs text-[#8b94a6]">Click a segment to stage that score range in the filters.</p>
+                        <button className="mt-4 block w-full" onClick={() => undefined} aria-label="Distribution chart">
+                          <ResponsiveContainer width="100%" height={240}><BarChart data={distribution} onClick={(state: any) => { if (state?.activeTooltipIndex !== undefined) selectDistribution(state.activeTooltipIndex); }}><CartesianGrid strokeDasharray="3 3" vertical={false} /><XAxis dataKey="name" fontSize={10} /><YAxis fontSize={11} allowDecimals={false} /><Tooltip /><Bar dataKey="count" radius={[5, 5, 0, 0]}>{distribution.map((item) => <Cell key={item.name} fill={TIER_COLORS[item.name]} />)}</Bar></BarChart></ResponsiveContainer>
+                          </ResponsiveContainer>
+                        </button>
+                      </section>
+
+                      <section className="rounded-2xl border border-[#e4e4e8] bg-white p-5 shadow-[0_8px_30px_rgba(31,35,49,.04)]">
+                        <h2 className="text-[16px] font-bold">Top Students</h2><p className="mt-1 text-xs text-[#8b94a6]">Highest scores across all {data.subjects.length} subjects.</p>
+                        <div className="mt-3 divide-y divide-[#eeeeef]">
+                          {topFive.map((student) => <div key={student.enrollmentNo} className="flex items-center justify-between py-3"><span className="text-sm font-semibold text-[#17223b]">{student.name}</span><span className="font-bold text-emerald-600">{student.overallPct.toFixed(1)}%</span></div>)}
+                        </div>
+                      </section>
+                    </div>
+                  </div>
+                </>
+              ) : (
+                <section className="mt-5 rounded-2xl border border-[#e4e4e8] bg-white p-5 shadow-[0_8px_30px_rgba(31,35,49,.04)]">
+                  <div className="mb-3"><h2 className="text-[16px] font-bold">Internal Marks</h2><p className="mt-1 text-xs text-[#8b94a6]">Internal marks for all students across all {data.subjects.length} subjects.</p></div>
+                  <div className="max-h-[600px] overflow-auto rounded-xl border border-[#f0f0f2]"><table className="min-w-[1080px] w-full text-sm"><thead className="sticky top-0 z-10 bg-white"><tr className="border-b border-[#ececf0] text-left text-[11px] font-bold uppercase tracking-wide text-[#7c8497]"><th className="px-3 py-3">Enrollment</th><th className="px-3 py-3">Student</th>{data.subjects.map((subject) => <th key={subject.id} className="px-3 py-3 text-center">{subject.code || subject.name}</th>)}<th className="px-3 py-3 text-center">Overall %</th><th className="px-3 py-3">Grade</th></tr></thead><tbody>{rows.map((row) => <tr key={row.enrollmentNo} className="border-b border-[#f1f1f3] last:border-0"><td className="px-3 py-3 text-xs text-[#7b8497]">{row.enrollmentNo}</td><td className="px-3 py-3 font-semibold">{row.name}</td>{row.subjects.map((subject) => <td key={subject.id} className={`px-3 py-3 text-center font-semibold ${scoreClass(subject.mark, subject.max)}`}>{subject.mark}</td>)}<td className="px-3 py-3 text-center font-bold">{row.overallPct.toFixed(1)}%</td><td className="px-3 py-3"><span className={`inline-flex whitespace-nowrap rounded-full px-3 py-1 text-[11px] font-semibold ${tierClass(row.tier)}`}>{row.tier}</span></td></tr>)}</tbody></table></div>
+                </section>
+              )}
+            </>
+          )}
+        </div>
+      </main>
     </div>
   );
 }

From 6e0e3598e02dce13dfc80892d60e44887afa7186 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Mon, 31 Aug 2026 10:07:00 +0530
Subject: [PATCH 63/80] Fix class overall analysis chart markup

---
 .../section-analysis/[sectionId]/overall.tsx  | 331 ++++--------------
 1 file changed, 69 insertions(+), 262 deletions(-)

diff --git a/pages/section-analysis/[sectionId]/overall.tsx b/pages/section-analysis/[sectionId]/overall.tsx
index 860b9fd..b46e2a3 100644
--- a/pages/section-analysis/[sectionId]/overall.tsx
+++ b/pages/section-analysis/[sectionId]/overall.tsx
@@ -1,71 +1,22 @@
 import { useEffect, useMemo, useState } from "react";
 import { useRouter } from "next/router";
-import { BarChart3, BookOpen, GraduationCap, LayoutDashboard, RefreshCw } from "lucide-react";
+import { BarChart3, BookOpen, LayoutDashboard, RefreshCw } from "lucide-react";
 import { BarChart, Bar, CartesianGrid, Cell, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
-
 import AnalysisNav from "../../../components/AnalysisNav";
 import { RawDataButton } from "../../../components/AnalysisWidgets";
 
 type MarkMode = "basic" | "internal";
 type View = "internal" | "risk";
 type SortDirection = "none" | "asc" | "desc";
-
 type Subject = { id: string; name: string; code: string };
-type SubjectScore = {
-  subjectId: string;
-  code: string;
-  name: string;
-  attendance: number;
-  midsem1: number;
-  midsem2: number;
-  combined: number;
-  basicInternal: number;
-  moderatedInternal: number;
-  basicMax: number;
-  grade: string;
-};
-type Student = {
-  enrollmentNo: string;
-  name: string;
-  email: string;
-  subjects: SubjectScore[];
-  overallPct: number;
-  overallAttendance: number;
-  overallGrade: string;
-};
-type OverallData = {
-  subjects: Subject[];
-  students: Student[];
-  classAverageOverallPct: number;
-};
-
-const TIER_COLORS: Record<string, string> = {
-  Excellent: "#2563eb",
-  Good: "#16a34a",
-  "Needs Attention": "#f59e0b",
-  "Critical Risk": "#ef4444",
-};
+type SubjectScore = { subjectId: string; code: string; name: string; attendance: number; midsem1: number; midsem2: number; combined: number; basicInternal: number; moderatedInternal: number; basicMax: number; grade: string };
+type Student = { enrollmentNo: string; name: string; email: string; subjects: SubjectScore[]; overallPct: number; overallAttendance: number; overallGrade: string };
+type OverallData = { subjects: Subject[]; students: Student[]; classAverageOverallPct: number };
 
-function tierFor(pct: number) {
-  if (pct > 80) return "Excellent";
-  if (pct >= 60) return "Good";
-  if (pct >= 40) return "Needs Attention";
-  return "Critical Risk";
-}
-
-function tierClass(tier: string) {
-  if (tier === "Excellent") return "bg-blue-50 text-blue-700";
-  if (tier === "Good") return "bg-green-50 text-green-700";
-  if (tier === "Needs Attention") return "bg-amber-50 text-amber-700";
-  return "bg-red-50 text-red-600";
-}
-
-function scoreClass(value: number, max: number) {
-  const ratio = max > 0 ? value / max : 0;
-  if (ratio >= 0.8) return "text-emerald-600";
-  if (ratio >= 0.6) return "text-amber-600";
-  return "text-red-500";
-}
+const TIER_COLORS: Record<string, string> = { Excellent: "#2563eb", Good: "#16a34a", "Needs Attention": "#f59e0b", "Critical Risk": "#ef4444" };
+const tierFor = (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 scoreClass = (value: number, max: number) => max > 0 && value / max >= .8 ? "text-emerald-600" : max > 0 && value / max >= .6 ? "text-amber-600" : "text-red-500";
 
 export default function SectionOverallPage() {
   const router = useRouter();
@@ -87,234 +38,90 @@ export default function SectionOverallPage() {
 
   async function loadAnalysis(sync = false) {
     if (!sectionId || typeof sectionId !== "string") return;
-    if (sync) setSyncing(true);
-    else setLoading(true);
+    sync ? setSyncing(true) : setLoading(true);
     setError("");
     try {
       const res = await fetch(`/api/analysis/section/${sectionId}/overall${sync ? "?sync=1" : ""}`);
       const json = await res.json();
-      if (!res.ok) {
-        setError(json.detail ? `${json.error}: ${json.detail}` : json.error || "Failed to load overall analysis");
-        return;
-      }
-      setData(json.data);
-      setComputedAt(json.computedAt);
-      setSheetId(json.sheetId || null);
-    } catch (e: any) {
-      setError(e.message || "Failed to load overall analysis");
-    } finally {
-      setLoading(false);
-      setSyncing(false);
-    }
+      if (!res.ok) { setError(json.detail ? `${json.error}: ${json.detail}` : json.error || "Failed to load overall analysis"); return; }
+      setData(json.data); setComputedAt(json.computedAt); setSheetId(json.sheetId || null);
+    } catch (e: any) { setError(e.message || "Failed to load overall analysis"); }
+    finally { setLoading(false); setSyncing(false); }
   }
-
-  useEffect(() => {
-    loadAnalysis();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sectionId]);
+  useEffect(() => { loadAnalysis(); }, [sectionId]);
 
   const rows = useMemo(() => {
     if (!data) return [];
     return data.students.map((student, originalIndex) => {
-      const subjects = data.subjects.map((subject) => {
-        const score = student.subjects.find((item) => item.subjectId === subject.id || item.code === subject.code);
+      const subjects = data.subjects.map(subject => {
+        const score = student.subjects.find(item => item.subjectId === subject.id || item.code === subject.code);
         const mark = markMode === "basic" ? Number(score?.basicInternal || 0) : Number(score?.moderatedInternal || 0);
         const max = Number(score?.basicMax || 0);
-        return { ...subject, mark, max, pct: max > 0 ? (mark / max) * 100 : 0 };
+        return { ...subject, mark, max, pct: max > 0 ? mark / max * 100 : 0 };
       });
-      const overallPct = subjects.length
-        ? subjects.reduce((sum, subject) => sum + subject.pct, 0) / subjects.length
-        : 0;
-      return {
-        ...student,
-        originalIndex,
-        subjects,
-        overallPct,
-        tier: tierFor(overallPct),
-      };
+      const overallPct = subjects.length ? subjects.reduce((sum, subject) => sum + subject.pct, 0) / subjects.length : 0;
+      return { ...student, originalIndex, subjects, overallPct, tier: tierFor(overallPct) };
     });
   }, [data, markMode]);
 
   const filteredRows = useMemo(() => {
-    const lo = Math.min(lower, upper);
-    const hi = Math.max(lower, upper);
-    const filtered = rows.filter((row) => row.overallPct >= lo && row.overallPct <= hi);
-    if (sortDirection === "none") return filtered.sort((a, b) => a.originalIndex - b.originalIndex);
-    return filtered.sort((a, b) =>
-      sortDirection === "asc"
-        ? a.overallPct - b.overallPct || a.name.localeCompare(b.name)
-        : b.overallPct - a.overallPct || a.name.localeCompare(b.name)
-    );
+    const lo = Math.min(lower, upper), hi = Math.max(lower, upper);
+    const result = rows.filter(row => row.overallPct >= lo && row.overallPct <= hi);
+    if (sortDirection === "none") return result.sort((a, b) => a.originalIndex - b.originalIndex);
+    return result.sort((a, b) => sortDirection === "asc" ? a.overallPct - b.overallPct || a.name.localeCompare(b.name) : b.overallPct - a.overallPct || a.name.localeCompare(b.name));
   }, [rows, lower, upper, sortDirection]);
 
-  const tierCounts = useMemo(() => {
-    return rows.reduce((acc, row) => {
-      acc[row.tier] = (acc[row.tier] || 0) + 1;
-      return acc;
-    }, {} as Record<string, number>);
-  }, [rows]);
-
-  const classAverage = useMemo(() => {
-    if (!rows.length) return 0;
-    return rows.reduce((sum, row) => sum + row.overallPct, 0) / rows.length;
-  }, [rows]);
-
-  const topFive = useMemo(
-    () => [...rows].sort((a, b) => b.overallPct - a.overallPct || a.originalIndex - b.originalIndex).slice(0, 5),
-    [rows]
-  );
-
-  const distribution = ["Excellent", "Good", "Needs Attention", "Critical Risk"].map((name) => ({
-    name,
-    count: tierCounts[name] || 0,
-  }));
+  const tierCounts = useMemo(() => rows.reduce((acc, row) => { acc[row.tier] = (acc[row.tier] || 0) + 1; return acc; }, {} as Record<string, number>), [rows]);
+  const classAverage = useMemo(() => rows.length ? rows.reduce((sum, row) => sum + row.overallPct, 0) / rows.length : 0, [rows]);
+  const topFive = useMemo(() => [...rows].sort((a, b) => b.overallPct - a.overallPct || a.originalIndex - b.originalIndex).slice(0, 5), [rows]);
+  const distribution = ["Excellent", "Good", "Needs Attention", "Critical Risk"].map(name => ({ name, count: tierCounts[name] || 0 }));
 
   function applyFilters() {
-    setLower(Math.min(draftLower, draftUpper));
-    setUpper(Math.max(draftLower, draftUpper));
-    setSortDirection(draftSortDirection);
+    setLower(Math.min(draftLower, draftUpper)); setUpper(Math.max(draftLower, draftUpper)); setSortDirection(draftSortDirection);
   }
-
   function selectDistribution(index: number) {
-    const ranges = [
-      [80.0001, 100],
-      [60, 80],
-      [40, 59.9999],
-      [0, 39.9999],
-    ];
-    const range = ranges[index];
-    if (!range) return;
-    setDraftLower(range[0]);
-    setDraftUpper(range[1]);
+    const ranges: [number, number][] = [[80.0001, 100], [60, 80], [40, 59.9999], [0, 39.9999]];
+    const range = ranges[index]; if (!range) return;
+    setDraftLower(range[0]); setDraftUpper(range[1]);
   }
 
-  return (
-    <div className="min-h-screen bg-[#fffdf8] text-[#17223b] lg:flex">
-      <aside className="hidden w-[220px] shrink-0 border-r border-[#e8e7e3] bg-white lg:fixed lg:inset-y-0 lg:left-0 lg:flex lg:flex-col">
-        <div className="px-5 pt-6">
-          <a href="/dashboard" className="flex items-center gap-3">
-            <span className="grid h-10 w-10 place-items-center rounded-xl bg-[#39268f] text-white shadow-[0_10px_25px_rgba(57,38,143,0.2)]">
-              <BarChart3 size={21} strokeWidth={2.2} />
-            </span>
-            <span className="text-[20px] font-extrabold tracking-[-0.7px]">ClassPulse</span>
-          </a>
-        </div>
-        <nav className="mt-7 space-y-1 px-3 text-sm font-medium text-[#626b80]">
-          <a href="/dashboard" className="flex items-center gap-3 rounded-xl px-3 py-3 hover:bg-[#f6f4ff] hover:text-[#38258e]"><LayoutDashboard size={18} />Dashboard</a>
-          <a href="/class-analysis" className="flex items-center gap-3 rounded-xl bg-[#eeeaff] px-3 py-3 font-semibold text-[#38258e]"><BarChart3 size={18} />Class Analysis</a>
-          <a href="/subject-analysis" className="flex items-center gap-3 rounded-xl px-3 py-3 hover:bg-[#f6f4ff] hover:text-[#38258e]"><BookOpen size={18} />Subject Analysis</a>
-        </nav>
-        <div className="mt-auto border-t border-[#eeeeeb] px-5 py-5 text-xs text-[#7a8295]">ClassPulse Teacher Portal</div>
-      </aside>
-
-      <main className="w-full lg:ml-[220px]">
-        <div className="min-h-screen px-5 py-7 sm:px-8 lg:px-10 lg:py-9">
-          <div className="mb-5 flex items-start justify-between">
-            <div>
-              <h1 className="text-[26px] font-extrabold tracking-[-1px] sm:text-[30px]">Class / Section Analysis</h1>
-              {computedAt && <p className="mt-1 text-xs text-[#8a92a4]">Last synced {new Date(computedAt).toLocaleString()}</p>}
-            </div>
-            <div className="flex items-center gap-2">
-              <RawDataButton sheetId={sheetId} />
-              <button onClick={() => loadAnalysis(true)} disabled={syncing} className="inline-flex items-center gap-2 rounded-xl bg-[#39268f] px-4 py-3 text-sm font-semibold text-white shadow-[0_8px_20px_rgba(57,38,143,.18)] disabled:opacity-60">
-                <RefreshCw size={16} className={syncing ? "animate-spin" : ""} />
-                {syncing ? "Syncing..." : "Sync now"}
-              </button>
-            </div>
+  return <div className="min-h-screen bg-[#fffdf8] text-[#17223b] lg:flex">
+    <aside className="hidden w-[220px] shrink-0 border-r border-[#e8e7e3] bg-white lg:fixed lg:inset-y-0 lg:left-0 lg:flex lg:flex-col">
+      <div className="px-5 pt-6"><a href="/dashboard" className="flex items-center gap-3"><span className="grid h-10 w-10 place-items-center rounded-xl bg-[#39268f] text-white shadow-[0_10px_25px_rgba(57,38,143,.2)]"><BarChart3 size={21} /></span><span className="text-[20px] font-extrabold tracking-[-.7px]">ClassPulse</span></a></div>
+      <nav className="mt-7 space-y-1 px-3 text-sm font-medium text-[#626b80]">
+        <a href="/dashboard" className="flex items-center gap-3 rounded-xl px-3 py-3 hover:bg-[#f6f4ff] hover:text-[#38258e]"><LayoutDashboard size={18} />Dashboard</a>
+        <a href="/class-analysis" className="flex items-center gap-3 rounded-xl bg-[#eeeaff] px-3 py-3 font-semibold text-[#38258e]"><BarChart3 size={18} />Class Analysis</a>
+        <a href="/subject-analysis" className="flex items-center gap-3 rounded-xl px-3 py-3 hover:bg-[#f6f4ff] hover:text-[#38258e]"><BookOpen size={18} />Subject Analysis</a>
+      </nav>
+      <div className="mt-auto border-t border-[#eeeeeb] px-5 py-5 text-xs text-[#7a8295]">ClassPulse Teacher Portal</div>
+    </aside>
+
+    <main className="w-full lg:ml-[220px]"><div className="min-h-screen px-5 py-7 sm:px-8 lg:px-10 lg:py-9">
+      <div className="mb-5 flex items-start justify-between"><div><h1 className="text-[26px] font-extrabold tracking-[-1px] sm:text-[30px]">Class / Section Analysis</h1>{computedAt && <p className="mt-1 text-xs text-[#8a92a4]">Last synced {new Date(computedAt).toLocaleString()}</p>}</div><div className="flex items-center gap-2"><RawDataButton sheetId={sheetId} /><button onClick={() => loadAnalysis(true)} disabled={syncing} className="inline-flex items-center gap-2 rounded-xl bg-[#39268f] px-4 py-3 text-sm font-semibold text-white shadow-[0_8px_20px_rgba(57,38,143,.18)] disabled:opacity-60"><RefreshCw size={16} className={syncing ? "animate-spin" : ""} />{syncing ? "Syncing..." : "Sync now"}</button></div></div>
+      {typeof sectionId === "string" && <AnalysisNav sectionId={sectionId} />}
+      {error && <div className="mt-5 rounded-xl border border-red-100 bg-red-50 p-4 text-sm text-red-700">{error}</div>}
+      {loading && !data && <div className="py-12 text-sm text-[#6f7890]">Loading overall analysis...</div>}
+
+      {data && <>
+        <div className="mt-5 flex items-center gap-2"><button onClick={() => setView("internal")} className={`rounded-xl border px-5 py-3 text-sm font-semibold ${view === "internal" ? "border-[#39268f] bg-[#39268f] text-white" : "border-[#dedfe5] bg-white text-[#667087]"}`}>Internal Marks</button><button onClick={() => setView("risk")} className={`rounded-xl border px-5 py-3 text-sm font-semibold ${view === "risk" ? "border-[#39268f] bg-[#39268f] text-white" : "border-[#dedfe5] bg-white text-[#667087]"}`}>At Risk</button></div>
+        <div className="mt-5 grid gap-4 md:grid-cols-3"><div className="rounded-2xl border border-[#e4e4e8] bg-white p-6 shadow-[0_8px_30px_rgba(31,35,49,.04)]"><p className="text-sm text-[#6d7890]">Class Average</p><p className="mt-2 text-[31px] font-extrabold">{classAverage.toFixed(1)}%</p><p className="mt-1 text-xs text-[#8b94a6]">across all {data.subjects.length} subjects</p></div><div className="rounded-2xl border border-[#e4e4e8] bg-white p-6 shadow-[0_8px_30px_rgba(31,35,49,.04)]"><p className="text-sm text-[#6d7890]">Students</p><p className="mt-2 text-[31px] font-extrabold">{rows.length}</p><p className="mt-1 text-xs text-[#8b94a6]">students assessed</p></div><div className="rounded-2xl border border-[#e4e4e8] bg-white p-6 shadow-[0_8px_30px_rgba(31,35,49,.04)]"><p className="text-sm text-[#6d7890]">Excellent Students</p><p className="mt-2 text-[31px] font-extrabold">{tierCounts.Excellent || 0}</p><p className="mt-1 text-xs text-[#8b94a6]">above 80%</p></div></div>
+
+        {view === "risk" ? <>
+          <section className="mt-5 rounded-2xl border border-[#e4e4e8] bg-white p-5 shadow-[0_8px_30px_rgba(31,35,49,.04)]"><h2 className="text-[16px] font-bold">At-Risk Filters</h2><p className="mt-1 text-xs text-[#8b94a6]">Choose mark type, range and sort.</p><div className="mt-4 grid gap-3 md:grid-cols-[1.1fr_.7fr_.7fr_1.1fr_auto] md:items-end">
+            <label className="text-xs font-semibold text-[#6f7890]">Marks shown<select value={markMode} onChange={e => setMarkMode(e.target.value as MarkMode)} className="mt-2 w-full rounded-xl border border-[#d9dce4] bg-white px-4 py-3 text-sm font-medium text-[#17223b]"><option value="basic">Basic</option><option value="internal">Internal Marks</option></select></label>
+            <label className="text-xs font-semibold text-[#6f7890]">Lower bound<input type="number" value={draftLower} min={0} max={100} onChange={e => setDraftLower(Number(e.target.value))} className="mt-2 w-full rounded-xl border border-[#d9dce4] px-4 py-3 text-sm" /></label>
+            <label className="text-xs font-semibold text-[#6f7890]">Upper bound<input type="number" value={draftUpper} min={0} max={100} onChange={e => setDraftUpper(Number(e.target.value))} className="mt-2 w-full rounded-xl border border-[#d9dce4] px-4 py-3 text-sm" /></label>
+            <label className="text-xs font-semibold text-[#6f7890]">Sort<select value={draftSortDirection} onChange={e => setDraftSortDirection(e.target.value as SortDirection)} className="mt-2 w-full rounded-xl border border-[#d9dce4] bg-white px-4 py-3 text-sm"><option value="none">No sort</option><option value="desc">High to Low</option><option value="asc">Low to High</option></select></label>
+            <button onClick={applyFilters} className="rounded-xl bg-[#39268f] px-5 py-3 text-sm font-semibold text-white">Apply</button>
+          </div></section>
+
+          <div className="mt-5 grid gap-5 lg:grid-cols-[minmax(0,2fr)_minmax(320px,1fr)]"><section className="min-w-0 rounded-2xl border border-[#e4e4e8] bg-white p-5 shadow-[0_8px_30px_rgba(31,35,49,.04)]"><div className="mb-3 flex items-center justify-between"><div><h2 className="text-[16px] font-bold">Filtered Students</h2><p className="mt-1 text-xs text-[#8b94a6]">Showing {filteredRows.length} of {rows.length} students.</p></div><span className="rounded-full bg-[#f0edff] px-3 py-1 text-xs font-semibold text-[#5b4ee6]">{data.subjects.length} Subjects</span></div><div className="max-h-[600px] overflow-auto rounded-xl border border-[#f0f0f2]"><table className="min-w-[1080px] w-full text-sm"><thead className="sticky top-0 z-10 bg-white"><tr className="border-b border-[#ececf0] text-left text-[11px] font-bold uppercase tracking-wide text-[#7c8497]"><th className="px-3 py-3">Enrollment</th><th className="px-3 py-3">Student</th>{data.subjects.map(subject => <th key={subject.id} className="px-3 py-3 text-center">{subject.code || subject.name}</th>)}<th className="px-3 py-3 text-center">Overall %</th><th className="px-3 py-3">Status</th></tr></thead><tbody>{filteredRows.map(row => <tr key={row.enrollmentNo} className="border-b border-[#f1f1f3] last:border-0"><td className="whitespace-nowrap px-3 py-3 text-xs text-[#7b8497]">{row.enrollmentNo}</td><td className="whitespace-nowrap px-3 py-3 font-semibold">{row.name}</td>{row.subjects.map(subject => <td key={subject.id} className={`px-3 py-3 text-center font-semibold ${scoreClass(subject.mark, subject.max)}`}>{subject.mark}</td>)}<td className="px-3 py-3 text-center font-bold">{row.overallPct.toFixed(1)}%</td><td className="px-3 py-3"><span className={`inline-flex whitespace-nowrap rounded-full px-3 py-1 text-[11px] font-semibold ${tierClass(row.tier)}`}>{row.tier}</span></td></tr>)}</tbody></table></div></section>
+
+            <div className="space-y-5"><section className="rounded-2xl border border-[#e4e4e8] bg-white p-5 shadow-[0_8px_30px_rgba(31,35,49,.04)]"><h2 className="text-[16px] font-bold">Distribution</h2><p className="mt-1 text-xs text-[#8b94a6]">Click a bar to stage that score range in the filters.</p><div className="mt-4 cursor-pointer"><ResponsiveContainer width="100%" height={240}><BarChart data={distribution} onClick={(state: any) => { if (state?.activeTooltipIndex !== undefined) selectDistribution(state.activeTooltipIndex); }}><CartesianGrid strokeDasharray="3 3" vertical={false} /><XAxis dataKey="name" fontSize={10} /><YAxis fontSize={11} allowDecimals={false} /><Tooltip /><Bar dataKey="count" radius={[5, 5, 0, 0]}>{distribution.map(item => <Cell key={item.name} fill={TIER_COLORS[item.name]} />)}</Bar></BarChart></ResponsiveContainer></div></section>
+              <section className="rounded-2xl border border-[#e4e4e8] bg-white p-5 shadow-[0_8px_30px_rgba(31,35,49,.04)]"><h2 className="text-[16px] font-bold">Top Students</h2><p className="mt-1 text-xs text-[#8b94a6]">Highest scores across all {data.subjects.length} subjects.</p><div className="mt-3 divide-y divide-[#eeeeef]">{topFive.map(student => <div key={student.enrollmentNo} className="flex items-center justify-between py-3"><span className="text-sm font-semibold">{student.name}</span><span className="font-bold text-emerald-600">{student.overallPct.toFixed(1)}%</span></div>)}</div></section></div>
           </div>
-
-          {typeof sectionId === "string" && <AnalysisNav sectionId={sectionId} />}
-
-          {error && <div className="mt-5 rounded-xl border border-red-100 bg-red-50 p-4 text-sm text-red-700">{error}</div>}
-          {loading && !data && <div className="py-12 text-sm text-[#6f7890]">Loading overall analysis...</div>}
-
-          {data && (
-            <>
-              <div className="mt-5 flex items-center gap-2">
-                <button onClick={() => setView("internal")} className={`rounded-xl border px-5 py-3 text-sm font-semibold ${view === "internal" ? "border-[#39268f] bg-[#39268f] text-white shadow-[0_8px_20px_rgba(57,38,143,.18)]" : "border-[#dedfe5] bg-white text-[#667087]"}`}>Internal Marks</button>
-                <button onClick={() => setView("risk")} className={`rounded-xl border px-5 py-3 text-sm font-semibold ${view === "risk" ? "border-[#39268f] bg-[#39268f] text-white shadow-[0_8px_20px_rgba(57,38,143,.18)]" : "border-[#dedfe5] bg-white text-[#667087]"}`}>At Risk</button>
-              </div>
-
-              <div className="mt-5 grid gap-4 md:grid-cols-3">
-                <div className="rounded-2xl border border-[#e4e4e8] bg-white p-6 shadow-[0_8px_30px_rgba(31,35,49,.04)]"><p className="text-sm text-[#6d7890]">Class Average</p><p className="mt-2 text-[31px] font-extrabold tracking-[-1.5px]">{classAverage.toFixed(1)}%</p><p className="mt-1 text-xs text-[#8b94a6]">across all {data.subjects.length} subjects</p></div>
-                <div className="rounded-2xl border border-[#e4e4e8] bg-white p-6 shadow-[0_8px_30px_rgba(31,35,49,.04)]"><p className="text-sm text-[#6d7890]">Students</p><p className="mt-2 text-[31px] font-extrabold tracking-[-1.5px]">{rows.length}</p><p className="mt-1 text-xs text-[#8b94a6]">students assessed</p></div>
-                <div className="rounded-2xl border border-[#e4e4e8] bg-white p-6 shadow-[0_8px_30px_rgba(31,35,49,.04)]"><p className="text-sm text-[#6d7890]">Excellent Students</p><p className="mt-2 text-[31px] font-extrabold tracking-[-1.5px]">{tierCounts.Excellent || 0}</p><p className="mt-1 text-xs text-[#8b94a6]">above 80%</p></div>
-              </div>
-
-              {view === "risk" ? (
-                <>
-                  <section className="mt-5 rounded-2xl border border-[#e4e4e8] bg-white p-5 shadow-[0_8px_30px_rgba(31,35,49,.04)]">
-                    <h2 className="text-[16px] font-bold">At-Risk Filters</h2>
-                    <p className="mt-1 text-xs text-[#8b94a6]">Choose mark type, range and sort.</p>
-                    <div className="mt-4 grid gap-3 md:grid-cols-[1.1fr_.7fr_.7fr_1.1fr_auto] md:items-end">
-                      <label className="text-xs font-semibold text-[#6f7890]">Marks shown
-                        <select value={markMode} onChange={(e) => setMarkMode(e.target.value as MarkMode)} className="mt-2 w-full rounded-xl border border-[#d9dce4] bg-white px-4 py-3 text-sm font-medium text-[#17223b] outline-none focus:border-[#5b4ee6]">
-                          <option value="basic">Basic</option>
-                          <option value="internal">Internal Marks</option>
-                        </select>
-                      </label>
-                      <label className="text-xs font-semibold text-[#6f7890]">Lower bound<input type="number" value={draftLower} min={0} max={100} onChange={(e) => setDraftLower(Number(e.target.value))} className="mt-2 w-full rounded-xl border border-[#d9dce4] px-4 py-3 text-sm outline-none focus:border-[#5b4ee6]" /></label>
-                      <label className="text-xs font-semibold text-[#6f7890]">Upper bound<input type="number" value={draftUpper} min={0} max={100} onChange={(e) => setDraftUpper(Number(e.target.value))} className="mt-2 w-full rounded-xl border border-[#d9dce4] px-4 py-3 text-sm outline-none focus:border-[#5b4ee6]" /></label>
-                      <label className="text-xs font-semibold text-[#6f7890]">Sort<select value={draftSortDirection} onChange={(e) => setDraftSortDirection(e.target.value as SortDirection)} className="mt-2 w-full rounded-xl border border-[#d9dce4] bg-white px-4 py-3 text-sm font-medium text-[#17223b] outline-none focus:border-[#5b4ee6]"><option value="none">No sort</option><option value="desc">High to Low</option><option value="asc">Low to High</option></select></label>
-                      <button onClick={applyFilters} className="rounded-xl bg-[#39268f] px-5 py-3 text-sm font-semibold text-white">Apply</button>
-                    </div>
-                  </section>
-
-                  <div className="mt-5 grid gap-5 lg:grid-cols-[minmax(0,2fr)_minmax(320px,1fr)]">
-                    <section className="min-w-0 rounded-2xl border border-[#e4e4e8] bg-white p-5 shadow-[0_8px_30px_rgba(31,35,49,.04)]">
-                      <div className="mb-3 flex items-center justify-between"><div><h2 className="text-[16px] font-bold">Filtered Students</h2><p className="mt-1 text-xs text-[#8b94a6]">Showing {filteredRows.length} of {rows.length} students.</p></div><span className="rounded-full bg-[#f0edff] px-3 py-1 text-xs font-semibold text-[#5b4ee6]">{data.subjects.length} Subjects</span></div>
-                      <div className="max-h-[600px] overflow-auto rounded-xl border border-[#f0f0f2]">
-                        <table className="min-w-[1080px] w-full text-sm">
-                          <thead className="sticky top-0 z-10 bg-white">
-                            <tr className="border-b border-[#ececf0] text-left text-[11px] font-bold uppercase tracking-wide text-[#7c8497]">
-                              <th className="px-3 py-3">Enrollment</th><th className="px-3 py-3">Student</th>
-                              {data.subjects.map((subject) => <th key={subject.id} className="px-3 py-3 text-center">{subject.code || subject.name}</th>)}
-                              <th className="px-3 py-3 text-center">Overall %</th><th className="px-3 py-3">Status</th>
-                            </tr>
-                          </thead>
-                          <tbody>
-                            {filteredRows.map((row) => (
-                              <tr key={row.enrollmentNo} className="border-b border-[#f1f1f3] last:border-0">
-                                <td className="whitespace-nowrap px-3 py-3 text-xs text-[#7b8497]">{row.enrollmentNo}</td>
-                                <td className="whitespace-nowrap px-3 py-3 font-semibold text-[#17223b]">{row.name}</td>
-                                {row.subjects.map((subject) => <td key={subject.id} className={`px-3 py-3 text-center font-semibold ${scoreClass(subject.mark, subject.max)}`}>{subject.mark}</td>)}
-                                <td className="px-3 py-3 text-center font-bold text-[#17223b]">{row.overallPct.toFixed(1)}%</td>
-                                <td className="px-3 py-3"><span className={`inline-flex whitespace-nowrap rounded-full px-3 py-1 text-[11px] font-semibold ${tierClass(row.tier)}`}>{row.tier}</span></td>
-                              </tr>
-                            ))}
-                          </tbody>
-                        </table>
-                      </div>
-                    </section>
-
-                    <div className="space-y-5">
-                      <section className="rounded-2xl border border-[#e4e4e8] bg-white p-5 shadow-[0_8px_30px_rgba(31,35,49,.04)]">
-                        <h2 className="text-[16px] font-bold">Distribution</h2><p className="mt-1 text-xs text-[#8b94a6]">Click a segment to stage that score range in the filters.</p>
-                        <button className="mt-4 block w-full" onClick={() => undefined} aria-label="Distribution chart">
-                          <ResponsiveContainer width="100%" height={240}><BarChart data={distribution} onClick={(state: any) => { if (state?.activeTooltipIndex !== undefined) selectDistribution(state.activeTooltipIndex); }}><CartesianGrid strokeDasharray="3 3" vertical={false} /><XAxis dataKey="name" fontSize={10} /><YAxis fontSize={11} allowDecimals={false} /><Tooltip /><Bar dataKey="count" radius={[5, 5, 0, 0]}>{distribution.map((item) => <Cell key={item.name} fill={TIER_COLORS[item.name]} />)}</Bar></BarChart></ResponsiveContainer>
-                          </ResponsiveContainer>
-                        </button>
-                      </section>
-
-                      <section className="rounded-2xl border border-[#e4e4e8] bg-white p-5 shadow-[0_8px_30px_rgba(31,35,49,.04)]">
-                        <h2 className="text-[16px] font-bold">Top Students</h2><p className="mt-1 text-xs text-[#8b94a6]">Highest scores across all {data.subjects.length} subjects.</p>
-                        <div className="mt-3 divide-y divide-[#eeeeef]">
-                          {topFive.map((student) => <div key={student.enrollmentNo} className="flex items-center justify-between py-3"><span className="text-sm font-semibold text-[#17223b]">{student.name}</span><span className="font-bold text-emerald-600">{student.overallPct.toFixed(1)}%</span></div>)}
-                        </div>
-                      </section>
-                    </div>
-                  </div>
-                </>
-              ) : (
-                <section className="mt-5 rounded-2xl border border-[#e4e4e8] bg-white p-5 shadow-[0_8px_30px_rgba(31,35,49,.04)]">
-                  <div className="mb-3"><h2 className="text-[16px] font-bold">Internal Marks</h2><p className="mt-1 text-xs text-[#8b94a6]">Internal marks for all students across all {data.subjects.length} subjects.</p></div>
-                  <div className="max-h-[600px] overflow-auto rounded-xl border border-[#f0f0f2]"><table className="min-w-[1080px] w-full text-sm"><thead className="sticky top-0 z-10 bg-white"><tr className="border-b border-[#ececf0] text-left text-[11px] font-bold uppercase tracking-wide text-[#7c8497]"><th className="px-3 py-3">Enrollment</th><th className="px-3 py-3">Student</th>{data.subjects.map((subject) => <th key={subject.id} className="px-3 py-3 text-center">{subject.code || subject.name}</th>)}<th className="px-3 py-3 text-center">Overall %</th><th className="px-3 py-3">Grade</th></tr></thead><tbody>{rows.map((row) => <tr key={row.enrollmentNo} className="border-b border-[#f1f1f3] last:border-0"><td className="px-3 py-3 text-xs text-[#7b8497]">{row.enrollmentNo}</td><td className="px-3 py-3 font-semibold">{row.name}</td>{row.subjects.map((subject) => <td key={subject.id} className={`px-3 py-3 text-center font-semibold ${scoreClass(subject.mark, subject.max)}`}>{subject.mark}</td>)}<td className="px-3 py-3 text-center font-bold">{row.overallPct.toFixed(1)}%</td><td className="px-3 py-3"><span className={`inline-flex whitespace-nowrap rounded-full px-3 py-1 text-[11px] font-semibold ${tierClass(row.tier)}`}>{row.tier}</span></td></tr>)}</tbody></table></div>
-                </section>
-              )}
-            </>
-          )}
-        </div>
-      </main>
-    </div>
-  );
+        </> : <section className="mt-5 rounded-2xl border border-[#e4e4e8] bg-white p-5 shadow-[0_8px_30px_rgba(31,35,49,.04)]"><div className="mb-3"><h2 className="text-[16px] font-bold">Internal Marks</h2><p className="mt-1 text-xs text-[#8b94a6]">All students across all {data.subjects.length} subjects.</p></div><div className="max-h-[600px] overflow-auto rounded-xl border border-[#f0f0f2]"><table className="min-w-[1080px] w-full text-sm"><thead className="sticky top-0 z-10 bg-white"><tr className="border-b border-[#ececf0] text-left text-[11px] font-bold uppercase tracking-wide text-[#7c8497]"><th className="px-3 py-3">Enrollment</th><th className="px-3 py-3">Student</th>{data.subjects.map(subject => <th key={subject.id} className="px-3 py-3 text-center">{subject.code || subject.name}</th>)}<th className="px-3 py-3 text-center">Overall %</th><th className="px-3 py-3">Grade</th></tr></thead><tbody>{rows.map(row => <tr key={row.enrollmentNo} className="border-b border-[#f1f1f3] last:border-0"><td className="px-3 py-3 text-xs text-[#7b8497]">{row.enrollmentNo}</td><td className="px-3 py-3 font-semibold">{row.name}</td>{row.subjects.map(subject => <td key={subject.id} className={`px-3 py-3 text-center font-semibold ${scoreClass(subject.mark, subject.max)}`}>{subject.mark}</td>)}<td className="px-3 py-3 text-center font-bold">{row.overallPct.toFixed(1)}%</td><td className="px-3 py-3"><span className={`inline-flex whitespace-nowrap rounded-full px-3 py-1 text-[11px] font-semibold ${tierClass(row.tier)}`}>{row.tier}</span></td></tr>)}</tbody></table></div></section>}
+      </>}
+    </div></main>
+  </div>;
 }

From bec0765d4faf9821e20f2b199c549f3cf53c021d Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Mon, 31 Aug 2026 10:28:26 +0530
Subject: [PATCH 64/80] Fix class analysis overall authorization

---
 lib/access.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/lib/access.ts b/lib/access.ts
index 12eedaa..9b82540 100644
--- a/lib/access.ts
+++ b/lib/access.ts
@@ -53,3 +53,13 @@ export async function assertTeacherCanViewSection(userId: string, role: string,
   });
   return !!teaches;
 }
+
+// Class Analysis's overall view aggregates every subject in the selected
+// class. It therefore needs class-level access rather than access to only
+// one subject/section.
+export async function assertTeacherCanViewOverall(userId: string, role: string, sectionId: string) {
+  if (role === "ADMIN") return true;
+  const section = await prisma.section.findUnique({ where: { id: sectionId }, select: { classId: true } });
+  if (!section) return false;
+  return assertTeacherCanViewClass(userId, role, section.classId);
+}

From 196bc959f7087607a3fe887510336ec286cd900a Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Mon, 31 Aug 2026 10:28:53 +0530
Subject: [PATCH 65/80] Add Raw Data to analysis sidebars

---
 components/AnalysisWidgets.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/components/AnalysisWidgets.tsx b/components/AnalysisWidgets.tsx
index f343979..c62ae87 100644
--- a/components/AnalysisWidgets.tsx
+++ b/components/AnalysisWidgets.tsx
@@ -44,7 +44,16 @@ export function RawDataButton({ sheetId }: { sheetId: string | null }) {
       return;
     }
 
-    if (!window.location.pathname.startsWith("/subject-analysis/")) return;
+    // Class Analysis uses its own sidebar markup, so attach Raw Data to the
+    // same navigation by locating its Class Analysis link.
+    const classAnalysisLink = document.querySelector<HTMLElement>('nav a[href="/class-analysis"]');
+    const classAnalysisNav = classAnalysisLink?.closest("nav") as HTMLElement | null;
+    if (classAnalysisNav) {
+      setSideNav(classAnalysisNav);
+      return;
+    }
+
+    if (!window.location.pathname.startsWith("/subject-analysis/") && !window.location.pathname.startsWith("/section-analysis/")) return;
 
     const root = document.querySelector<HTMLElement>("#\\_\\_next > div.min-h-screen.max-w-\\[1900px\\]")
       || document.querySelector<HTMLElement>("div.min-h-screen.max-w-\\[1900px\\]")
@@ -78,7 +87,7 @@ export function RawDataButton({ sheetId }: { sheetId: string | null }) {
       </div>
       <nav className="analysis-side-nav analysis-standalone-nav">
         <a href="/dashboard"><LayoutDashboard size={18} />Dashboard</a>
-        <a href="/classes"><BookOpen size={18} />Class Analysis</a>
+        <a href="/class-analysis"><BookOpen size={18} />Class Analysis</a>
         <a className="is-active" href={window.location.pathname}><GraduationCap size={18} />Subject Analysis</a>
         {rawLink}
       </nav>

From 7472640aa7e658e33d4c9fce6a1d44ca825cacdc Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Mon, 31 Aug 2026 10:29:04 +0530
Subject: [PATCH 66/80] Fix class-level analysis authorization

---
 lib/access.ts | 28 ++++++++--------------------
 1 file changed, 8 insertions(+), 20 deletions(-)

diff --git a/lib/access.ts b/lib/access.ts
index 9b82540..51324e3 100644
--- a/lib/access.ts
+++ b/lib/access.ts
@@ -36,30 +36,18 @@ export async function assertTeacherCanViewClass(userId: string, role: string, cl
   return !!teaches;
 }
 
-// Section access: the class proctor, or anyone teaching a subject within
-// this specific section.
+// Section-based analysis pages are used by Class Analysis, whose purpose is
+// to show the complete class/section view across all subjects. A teacher who
+// has access to the class (as proctor or by teaching any subject in it) must
+// therefore be allowed to open the section analysis pages as well.
 export async function assertTeacherCanViewSection(userId: string, role: string, sectionId: string) {
   if (role === "ADMIN") return true;
-  const section = await prisma.section.findUnique({ where: { id: sectionId } });
+  const section = await prisma.section.findUnique({ where: { id: sectionId }, select: { classId: true } });
   if (!section) return false;
-
-  const proctorMatch = await prisma.class.findFirst({
-    where: { id: section.classId, proctorId: userId },
-  });
-  if (proctorMatch) return true;
-
-  const teaches = await prisma.assignment.findFirst({
-    where: { teacherId: userId, subject: { sectionId } },
-  });
-  return !!teaches;
+  return assertTeacherCanViewClass(userId, role, section.classId);
 }
 
-// Class Analysis's overall view aggregates every subject in the selected
-// class. It therefore needs class-level access rather than access to only
-// one subject/section.
+// Kept as an explicit alias for class-level overall analysis callers.
 export async function assertTeacherCanViewOverall(userId: string, role: string, sectionId: string) {
-  if (role === "ADMIN") return true;
-  const section = await prisma.section.findUnique({ where: { id: sectionId }, select: { classId: true } });
-  if (!section) return false;
-  return assertTeacherCanViewClass(userId, role, section.classId);
+  return assertTeacherCanViewSection(userId, role, sectionId);
 }

From d50324d0c3c88ad510bddfb82f2b7e4bfe804600 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Mon, 31 Aug 2026 10:36:02 +0530
Subject: [PATCH 67/80] Fix class overall routing authorization

---
 .../analysis/section/[sectionId]/overall.ts   | 115 +++++++++---------
 1 file changed, 60 insertions(+), 55 deletions(-)

diff --git a/pages/api/analysis/section/[sectionId]/overall.ts b/pages/api/analysis/section/[sectionId]/overall.ts
index 60a363a..5276059 100644
--- a/pages/api/analysis/section/[sectionId]/overall.ts
+++ b/pages/api/analysis/section/[sectionId]/overall.ts
@@ -8,15 +8,42 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   const session = await requireSession(req, res);
   if (!session) return;
 
-  const sectionId = req.query.sectionId as string;
+  const requestedId = req.query.sectionId as string;
   const userId = (session.user as any).id;
   const role = (session.user as any).role;
 
+  // Class Analysis can reach this endpoint through older class-id links.
+  // Resolve a class id to a section the current teacher is actually allowed to view.
+  let resolvedSection = await prisma.section.findUnique({ where: { id: requestedId } });
+  if (!resolvedSection) {
+    if (role === "ADMIN") {
+      resolvedSection = await prisma.section.findFirst({
+        where: { classId: requestedId },
+        orderBy: { name: "asc" },
+      });
+    } else {
+      resolvedSection = await prisma.section.findFirst({
+        where: {
+          classId: requestedId,
+          OR: [
+            { class: { proctorId: userId } },
+            { subjects: { some: { assignments: { some: { teacherId: userId } } } } },
+          ],
+        },
+        orderBy: { name: "asc" },
+      });
+    }
+  }
+
+  if (!resolvedSection) {
+    return res.status(404).json({ error: "Section not found or not assigned to you" });
+  }
+
+  const sectionId = resolvedSection.id;
   const allowed = await assertTeacherCanViewSection(userId, role, sectionId);
   if (!allowed) return res.status(403).json({ error: "Not authorized for this section" });
 
   const forceSync = req.query.sync === "1";
-
   const subjects = await prisma.subject.findMany({ where: { sectionId } });
   if (subjects.length === 0) {
     return res.status(404).json({ error: "No subjects exist for this section yet" });
@@ -31,41 +58,37 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       orderBy: { computedAt: "desc" },
     });
     if (latest) {
-      return res
-        .status(200)
-        .json({ cached: true, computedAt: latest.computedAt, sheetId: link.sheetId, data: latest.data });
+      return res.status(200).json({
+        cached: true,
+        computedAt: latest.computedAt,
+        sheetId: link.sheetId,
+        data: latest.data,
+      });
     }
   }
 
   try {
     const raw = await fetchClassRawData(link.sheetId);
-    const subjectAnalyses = computeAllSubjectAnalyses(
-      raw,
-      subjects.map((s) => s.code)
-    );
-
-    // Combine per student across every subject.
-    const studentMap = new Map<
-      string,
-      {
-        enrollmentNo: string;
+    const subjectAnalyses = computeAllSubjectAnalyses(raw, subjects.map((s) => s.code));
+
+    const studentMap = new Map<string, {
+      enrollmentNo: string;
+      name: string;
+      email: string;
+      subjects: {
+        subjectId: string;
+        code: string;
         name: string;
-        email: string;
-        subjects: {
-          subjectId: string;
-          code: string;
-          name: string;
-          attendance: number;
-          midsem1: number;
-          midsem2: number;
-          combined: number;
-          basicInternal: number;
-          moderatedInternal: number;
-          basicMax: number;
-          grade: string;
-        }[];
-      }
-    >();
+        attendance: number;
+        midsem1: number;
+        midsem2: number;
+        combined: number;
+        basicInternal: number;
+        moderatedInternal: number;
+        basicMax: number;
+        grade: string;
+      }[];
+    }>();
 
     subjects.forEach((subject) => {
       const analysis = subjectAnalyses[subject.code];
@@ -81,12 +104,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
           });
         }
 
-        // Subject's own "full marks" for its internal score: assignment
-        // total + presentation (out of 10) + midsem (out of 30) — used to
-        // turn each subject's basic marks into a percentage so subjects
-        // with different assignment totals can be averaged fairly.
         const basicMax = (s.assignment.total || 0) + 10 + 30;
-
         studentMap.get(s.enrollmentNo)!.subjects.push({
           subjectId: subject.id,
           code: subject.code,
@@ -104,16 +122,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     });
 
     const students = Array.from(studentMap.values()).map((student) => {
-      const percentages = student.subjects.map((sub) =>
-        sub.basicMax > 0 ? (sub.basicInternal / sub.basicMax) * 100 : 0
-      );
-      const overallPct = percentages.length
-        ? round1(percentages.reduce((a, b) => a + b, 0) / percentages.length)
-        : 0;
+      const percentages = student.subjects.map((sub) => sub.basicMax > 0 ? (sub.basicInternal / sub.basicMax) * 100 : 0);
+      const overallPct = percentages.length ? round1(percentages.reduce((a, b) => a + b, 0) / percentages.length) : 0;
       const attendancePercentages = student.subjects.map((sub) => sub.attendance);
-      const overallAttendance = attendancePercentages.length
-        ? round1(attendancePercentages.reduce((a, b) => a + b, 0) / attendancePercentages.length)
-        : 0;
+      const overallAttendance = attendancePercentages.length ? round1(attendancePercentages.reduce((a, b) => a + b, 0) / attendancePercentages.length) : 0;
 
       return {
         ...student,
@@ -127,18 +139,11 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       kind: "overall" as const,
       subjects: subjects.map((s) => ({ id: s.id, name: s.name, code: s.code })),
       students,
-      classAverageOverallPct: students.length
-        ? round1(students.reduce((a, s) => a + s.overallPct, 0) / students.length)
-        : 0,
+      classAverageOverallPct: students.length ? round1(students.reduce((a, s) => a + s.overallPct, 0) / students.length) : 0,
     };
 
-    const snapshot = await prisma.analysisSnapshot.create({
-      data: { sectionId, data: data as any },
-    });
-
-    return res
-      .status(200)
-      .json({ cached: false, computedAt: snapshot.computedAt, sheetId: link.sheetId, data });
+    const snapshot = await prisma.analysisSnapshot.create({ data: { sectionId, data: data as any } });
+    return res.status(200).json({ cached: false, computedAt: snapshot.computedAt, sheetId: link.sheetId, data });
   } catch (err: any) {
     console.error(err);
     return res.status(502).json({

From 30ca4a37ce31b6cc468870b0392b3d953c0adab4 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Mon, 31 Aug 2026 10:36:26 +0530
Subject: [PATCH 68/80] Match class overall shell to subject analysis

---
 .../section-analysis/[sectionId]/overall.tsx  | 397 ++++++++++++++----
 1 file changed, 325 insertions(+), 72 deletions(-)

diff --git a/pages/section-analysis/[sectionId]/overall.tsx b/pages/section-analysis/[sectionId]/overall.tsx
index b46e2a3..d7836e1 100644
--- a/pages/section-analysis/[sectionId]/overall.tsx
+++ b/pages/section-analysis/[sectionId]/overall.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { useRouter } from "next/router";
-import { BarChart3, BookOpen, LayoutDashboard, RefreshCw } from "lucide-react";
-import { BarChart, Bar, CartesianGrid, Cell, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { BarChart3, BookOpen, GraduationCap, LayoutDashboard, RefreshCw } from "lucide-react";
 import AnalysisNav from "../../../components/AnalysisNav";
 import { RawDataButton } from "../../../components/AnalysisWidgets";
 
@@ -9,14 +8,57 @@ type MarkMode = "basic" | "internal";
 type View = "internal" | "risk";
 type SortDirection = "none" | "asc" | "desc";
 type Subject = { id: string; name: string; code: string };
-type SubjectScore = { subjectId: string; code: string; name: string; attendance: number; midsem1: number; midsem2: number; combined: number; basicInternal: number; moderatedInternal: number; basicMax: number; grade: string };
-type Student = { enrollmentNo: string; name: string; email: string; subjects: SubjectScore[]; overallPct: number; overallAttendance: number; overallGrade: string };
+type SubjectScore = {
+  subjectId: string;
+  code: string;
+  name: string;
+  attendance: number;
+  midsem1: number;
+  midsem2: number;
+  combined: number;
+  basicInternal: number;
+  moderatedInternal: number;
+  basicMax: number;
+  grade: string;
+};
+type Student = {
+  enrollmentNo: string;
+  name: string;
+  email: string;
+  subjects: SubjectScore[];
+  overallPct: number;
+  overallAttendance: number;
+  overallGrade: string;
+};
 type OverallData = { subjects: Subject[]; students: Student[]; classAverageOverallPct: number };
+type Row = Student & {
+  originalIndex: number;
+  subjects: (Subject & { mark: number; max: number; pct: number })[];
+  overallPct: number;
+  tier: string;
+};
 
-const TIER_COLORS: Record<string, string> = { Excellent: "#2563eb", Good: "#16a34a", "Needs Attention": "#f59e0b", "Critical Risk": "#ef4444" };
-const tierFor = (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 scoreClass = (value: number, max: number) => max > 0 && value / max >= .8 ? "text-emerald-600" : max > 0 && value / max >= .6 ? "text-amber-600" : "text-red-500";
+const TIER_COLORS: Record<string, string> = {
+  Excellent: "#2563eb",
+  Good: "#16a34a",
+  "Needs Attention": "#f59e0b",
+  "Critical Risk": "#ef4444",
+};
+
+const tierFor = (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 scoreClass = (pct: number) =>
+  pct >= 80 ? "text-emerald-600" : pct >= 60 ? "text-amber-600" : "text-red-500";
 
 export default function SectionOverallPage() {
   const router = useRouter();
@@ -30,9 +72,9 @@ export default function SectionOverallPage() {
   const [view, setView] = useState<View>("risk");
   const [markMode, setMarkMode] = useState<MarkMode>("basic");
   const [lower, setLower] = useState(0);
-  const [upper, setUpper] = useState(40);
+  const [upper, setUpper] = useState(100);
   const [draftLower, setDraftLower] = useState(0);
-  const [draftUpper, setDraftUpper] = useState(40);
+  const [draftUpper, setDraftUpper] = useState(100);
   const [sortDirection, setSortDirection] = useState<SortDirection>("none");
   const [draftSortDirection, setDraftSortDirection] = useState<SortDirection>("none");
 
@@ -43,85 +85,296 @@ export default function SectionOverallPage() {
     try {
       const res = await fetch(`/api/analysis/section/${sectionId}/overall${sync ? "?sync=1" : ""}`);
       const json = await res.json();
-      if (!res.ok) { setError(json.detail ? `${json.error}: ${json.detail}` : json.error || "Failed to load overall analysis"); return; }
-      setData(json.data); setComputedAt(json.computedAt); setSheetId(json.sheetId || null);
-    } catch (e: any) { setError(e.message || "Failed to load overall analysis"); }
-    finally { setLoading(false); setSyncing(false); }
+      if (!res.ok) {
+        setError(json.detail ? `${json.error}: ${json.detail}` : json.error || "Failed to load overall analysis");
+        return;
+      }
+      setData(json.data);
+      setComputedAt(json.computedAt || "");
+      setSheetId(json.sheetId || null);
+    } catch (e: any) {
+      setError(e.message || "Failed to load overall analysis");
+    } finally {
+      setLoading(false);
+      setSyncing(false);
+    }
   }
-  useEffect(() => { loadAnalysis(); }, [sectionId]);
 
-  const rows = useMemo(() => {
+  useEffect(() => {
+    loadAnalysis();
+  }, [sectionId]);
+
+  const rows = useMemo<Row[]>(() => {
     if (!data) return [];
     return data.students.map((student, originalIndex) => {
-      const subjects = data.subjects.map(subject => {
-        const score = student.subjects.find(item => item.subjectId === subject.id || item.code === subject.code);
-        const mark = markMode === "basic" ? Number(score?.basicInternal || 0) : Number(score?.moderatedInternal || 0);
+      const subjects = data.subjects.map((subject) => {
+        const score = student.subjects.find(
+          (item) => item.subjectId === subject.id || item.code === subject.code
+        );
+        const mark = markMode === "basic"
+          ? Number(score?.basicInternal || 0)
+          : Number(score?.moderatedInternal || 0);
         const max = Number(score?.basicMax || 0);
-        return { ...subject, mark, max, pct: max > 0 ? mark / max * 100 : 0 };
+        return {
+          ...subject,
+          mark,
+          max,
+          pct: max > 0 ? (mark / max) * 100 : 0,
+        };
       });
-      const overallPct = subjects.length ? subjects.reduce((sum, subject) => sum + subject.pct, 0) / subjects.length : 0;
+      const overallPct = subjects.length
+        ? subjects.reduce((sum, subject) => sum + subject.pct, 0) / subjects.length
+        : 0;
       return { ...student, originalIndex, subjects, overallPct, tier: tierFor(overallPct) };
     });
   }, [data, markMode]);
 
   const filteredRows = useMemo(() => {
-    const lo = Math.min(lower, upper), hi = Math.max(lower, upper);
-    const result = rows.filter(row => row.overallPct >= lo && row.overallPct <= hi);
-    if (sortDirection === "none") return result.sort((a, b) => a.originalIndex - b.originalIndex);
-    return result.sort((a, b) => sortDirection === "asc" ? a.overallPct - b.overallPct || a.name.localeCompare(b.name) : b.overallPct - a.overallPct || a.name.localeCompare(b.name));
+    const lo = Math.min(lower, upper);
+    const hi = Math.max(lower, upper);
+    const result = rows.filter((row) => row.overallPct >= lo && row.overallPct <= hi);
+    if (sortDirection === "none") {
+      return result.sort((a, b) => a.originalIndex - b.originalIndex);
+    }
+    return result.sort((a, b) =>
+      sortDirection === "asc"
+        ? a.overallPct - b.overallPct || a.name.localeCompare(b.name)
+        : b.overallPct - a.overallPct || 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<string, number>), [rows]);
-  const classAverage = useMemo(() => rows.length ? rows.reduce((sum, row) => sum + row.overallPct, 0) / rows.length : 0, [rows]);
-  const topFive = useMemo(() => [...rows].sort((a, b) => b.overallPct - a.overallPct || a.originalIndex - b.originalIndex).slice(0, 5), [rows]);
-  const distribution = ["Excellent", "Good", "Needs Attention", "Critical Risk"].map(name => ({ name, count: tierCounts[name] || 0 }));
+  const tierCounts = useMemo(
+    () => rows.reduce((acc, row) => {
+      acc[row.tier] = (acc[row.tier] || 0) + 1;
+      return acc;
+    }, {} as Record<string, number>),
+    [rows]
+  );
+
+  const classAverage = useMemo(
+    () => rows.length ? rows.reduce((sum, row) => sum + row.overallPct, 0) / rows.length : 0,
+    [rows]
+  );
+
+  const passRate = useMemo(
+    () => rows.length ? Math.round(rows.filter((row) => row.overallPct >= 40).length / rows.length * 100) : 0,
+    [rows]
+  );
+
+  const topFive = useMemo(
+    () => [...rows].sort((a, b) => b.overallPct - a.overallPct || a.originalIndex - b.originalIndex).slice(0, 5),
+    [rows]
+  );
 
   function applyFilters() {
-    setLower(Math.min(draftLower, draftUpper)); setUpper(Math.max(draftLower, draftUpper)); setSortDirection(draftSortDirection);
+    setLower(Math.min(draftLower, draftUpper));
+    setUpper(Math.max(draftLower, draftUpper));
+    setSortDirection(draftSortDirection);
   }
-  function selectDistribution(index: number) {
-    const ranges: [number, number][] = [[80.0001, 100], [60, 80], [40, 59.9999], [0, 39.9999]];
-    const range = ranges[index]; if (!range) return;
-    setDraftLower(range[0]); setDraftUpper(range[1]);
+
+  function resetRiskFilter() {
+    setDraftLower(0);
+    setDraftUpper(100);
+    setLower(0);
+    setUpper(100);
+    setDraftSortDirection("none");
+    setSortDirection("none");
   }
 
-  return <div className="min-h-screen bg-[#fffdf8] text-[#17223b] lg:flex">
-    <aside className="hidden w-[220px] shrink-0 border-r border-[#e8e7e3] bg-white lg:fixed lg:inset-y-0 lg:left-0 lg:flex lg:flex-col">
-      <div className="px-5 pt-6"><a href="/dashboard" className="flex items-center gap-3"><span className="grid h-10 w-10 place-items-center rounded-xl bg-[#39268f] text-white shadow-[0_10px_25px_rgba(57,38,143,.2)]"><BarChart3 size={21} /></span><span className="text-[20px] font-extrabold tracking-[-.7px]">ClassPulse</span></a></div>
-      <nav className="mt-7 space-y-1 px-3 text-sm font-medium text-[#626b80]">
-        <a href="/dashboard" className="flex items-center gap-3 rounded-xl px-3 py-3 hover:bg-[#f6f4ff] hover:text-[#38258e]"><LayoutDashboard size={18} />Dashboard</a>
-        <a href="/class-analysis" className="flex items-center gap-3 rounded-xl bg-[#eeeaff] px-3 py-3 font-semibold text-[#38258e]"><BarChart3 size={18} />Class Analysis</a>
-        <a href="/subject-analysis" className="flex items-center gap-3 rounded-xl px-3 py-3 hover:bg-[#f6f4ff] hover:text-[#38258e]"><BookOpen size={18} />Subject Analysis</a>
-      </nav>
-      <div className="mt-auto border-t border-[#eeeeeb] px-5 py-5 text-xs text-[#7a8295]">ClassPulse Teacher Portal</div>
-    </aside>
-
-    <main className="w-full lg:ml-[220px]"><div className="min-h-screen px-5 py-7 sm:px-8 lg:px-10 lg:py-9">
-      <div className="mb-5 flex items-start justify-between"><div><h1 className="text-[26px] font-extrabold tracking-[-1px] sm:text-[30px]">Class / Section Analysis</h1>{computedAt && <p className="mt-1 text-xs text-[#8a92a4]">Last synced {new Date(computedAt).toLocaleString()}</p>}</div><div className="flex items-center gap-2"><RawDataButton sheetId={sheetId} /><button onClick={() => loadAnalysis(true)} disabled={syncing} className="inline-flex items-center gap-2 rounded-xl bg-[#39268f] px-4 py-3 text-sm font-semibold text-white shadow-[0_8px_20px_rgba(57,38,143,.18)] disabled:opacity-60"><RefreshCw size={16} className={syncing ? "animate-spin" : ""} />{syncing ? "Syncing..." : "Sync now"}</button></div></div>
-      {typeof sectionId === "string" && <AnalysisNav sectionId={sectionId} />}
-      {error && <div className="mt-5 rounded-xl border border-red-100 bg-red-50 p-4 text-sm text-red-700">{error}</div>}
-      {loading && !data && <div className="py-12 text-sm text-[#6f7890]">Loading overall analysis...</div>}
-
-      {data && <>
-        <div className="mt-5 flex items-center gap-2"><button onClick={() => setView("internal")} className={`rounded-xl border px-5 py-3 text-sm font-semibold ${view === "internal" ? "border-[#39268f] bg-[#39268f] text-white" : "border-[#dedfe5] bg-white text-[#667087]"}`}>Internal Marks</button><button onClick={() => setView("risk")} className={`rounded-xl border px-5 py-3 text-sm font-semibold ${view === "risk" ? "border-[#39268f] bg-[#39268f] text-white" : "border-[#dedfe5] bg-white text-[#667087]"}`}>At Risk</button></div>
-        <div className="mt-5 grid gap-4 md:grid-cols-3"><div className="rounded-2xl border border-[#e4e4e8] bg-white p-6 shadow-[0_8px_30px_rgba(31,35,49,.04)]"><p className="text-sm text-[#6d7890]">Class Average</p><p className="mt-2 text-[31px] font-extrabold">{classAverage.toFixed(1)}%</p><p className="mt-1 text-xs text-[#8b94a6]">across all {data.subjects.length} subjects</p></div><div className="rounded-2xl border border-[#e4e4e8] bg-white p-6 shadow-[0_8px_30px_rgba(31,35,49,.04)]"><p className="text-sm text-[#6d7890]">Students</p><p className="mt-2 text-[31px] font-extrabold">{rows.length}</p><p className="mt-1 text-xs text-[#8b94a6]">students assessed</p></div><div className="rounded-2xl border border-[#e4e4e8] bg-white p-6 shadow-[0_8px_30px_rgba(31,35,49,.04)]"><p className="text-sm text-[#6d7890]">Excellent Students</p><p className="mt-2 text-[31px] font-extrabold">{tierCounts.Excellent || 0}</p><p className="mt-1 text-xs text-[#8b94a6]">above 80%</p></div></div>
-
-        {view === "risk" ? <>
-          <section className="mt-5 rounded-2xl border border-[#e4e4e8] bg-white p-5 shadow-[0_8px_30px_rgba(31,35,49,.04)]"><h2 className="text-[16px] font-bold">At-Risk Filters</h2><p className="mt-1 text-xs text-[#8b94a6]">Choose mark type, range and sort.</p><div className="mt-4 grid gap-3 md:grid-cols-[1.1fr_.7fr_.7fr_1.1fr_auto] md:items-end">
-            <label className="text-xs font-semibold text-[#6f7890]">Marks shown<select value={markMode} onChange={e => setMarkMode(e.target.value as MarkMode)} className="mt-2 w-full rounded-xl border border-[#d9dce4] bg-white px-4 py-3 text-sm font-medium text-[#17223b]"><option value="basic">Basic</option><option value="internal">Internal Marks</option></select></label>
-            <label className="text-xs font-semibold text-[#6f7890]">Lower bound<input type="number" value={draftLower} min={0} max={100} onChange={e => setDraftLower(Number(e.target.value))} className="mt-2 w-full rounded-xl border border-[#d9dce4] px-4 py-3 text-sm" /></label>
-            <label className="text-xs font-semibold text-[#6f7890]">Upper bound<input type="number" value={draftUpper} min={0} max={100} onChange={e => setDraftUpper(Number(e.target.value))} className="mt-2 w-full rounded-xl border border-[#d9dce4] px-4 py-3 text-sm" /></label>
-            <label className="text-xs font-semibold text-[#6f7890]">Sort<select value={draftSortDirection} onChange={e => setDraftSortDirection(e.target.value as SortDirection)} className="mt-2 w-full rounded-xl border border-[#d9dce4] bg-white px-4 py-3 text-sm"><option value="none">No sort</option><option value="desc">High to Low</option><option value="asc">Low to High</option></select></label>
-            <button onClick={applyFilters} className="rounded-xl bg-[#39268f] px-5 py-3 text-sm font-semibold text-white">Apply</button>
-          </div></section>
-
-          <div className="mt-5 grid gap-5 lg:grid-cols-[minmax(0,2fr)_minmax(320px,1fr)]"><section className="min-w-0 rounded-2xl border border-[#e4e4e8] bg-white p-5 shadow-[0_8px_30px_rgba(31,35,49,.04)]"><div className="mb-3 flex items-center justify-between"><div><h2 className="text-[16px] font-bold">Filtered Students</h2><p className="mt-1 text-xs text-[#8b94a6]">Showing {filteredRows.length} of {rows.length} students.</p></div><span className="rounded-full bg-[#f0edff] px-3 py-1 text-xs font-semibold text-[#5b4ee6]">{data.subjects.length} Subjects</span></div><div className="max-h-[600px] overflow-auto rounded-xl border border-[#f0f0f2]"><table className="min-w-[1080px] w-full text-sm"><thead className="sticky top-0 z-10 bg-white"><tr className="border-b border-[#ececf0] text-left text-[11px] font-bold uppercase tracking-wide text-[#7c8497]"><th className="px-3 py-3">Enrollment</th><th className="px-3 py-3">Student</th>{data.subjects.map(subject => <th key={subject.id} className="px-3 py-3 text-center">{subject.code || subject.name}</th>)}<th className="px-3 py-3 text-center">Overall %</th><th className="px-3 py-3">Status</th></tr></thead><tbody>{filteredRows.map(row => <tr key={row.enrollmentNo} className="border-b border-[#f1f1f3] last:border-0"><td className="whitespace-nowrap px-3 py-3 text-xs text-[#7b8497]">{row.enrollmentNo}</td><td className="whitespace-nowrap px-3 py-3 font-semibold">{row.name}</td>{row.subjects.map(subject => <td key={subject.id} className={`px-3 py-3 text-center font-semibold ${scoreClass(subject.mark, subject.max)}`}>{subject.mark}</td>)}<td className="px-3 py-3 text-center font-bold">{row.overallPct.toFixed(1)}%</td><td className="px-3 py-3"><span className={`inline-flex whitespace-nowrap rounded-full px-3 py-1 text-[11px] font-semibold ${tierClass(row.tier)}`}>{row.tier}</span></td></tr>)}</tbody></table></div></section>
-
-            <div className="space-y-5"><section className="rounded-2xl border border-[#e4e4e8] bg-white p-5 shadow-[0_8px_30px_rgba(31,35,49,.04)]"><h2 className="text-[16px] font-bold">Distribution</h2><p className="mt-1 text-xs text-[#8b94a6]">Click a bar to stage that score range in the filters.</p><div className="mt-4 cursor-pointer"><ResponsiveContainer width="100%" height={240}><BarChart data={distribution} onClick={(state: any) => { if (state?.activeTooltipIndex !== undefined) selectDistribution(state.activeTooltipIndex); }}><CartesianGrid strokeDasharray="3 3" vertical={false} /><XAxis dataKey="name" fontSize={10} /><YAxis fontSize={11} allowDecimals={false} /><Tooltip /><Bar dataKey="count" radius={[5, 5, 0, 0]}>{distribution.map(item => <Cell key={item.name} fill={TIER_COLORS[item.name]} />)}</Bar></BarChart></ResponsiveContainer></div></section>
-              <section className="rounded-2xl border border-[#e4e4e8] bg-white p-5 shadow-[0_8px_30px_rgba(31,35,49,.04)]"><h2 className="text-[16px] font-bold">Top Students</h2><p className="mt-1 text-xs text-[#8b94a6]">Highest scores across all {data.subjects.length} subjects.</p><div className="mt-3 divide-y divide-[#eeeeef]">{topFive.map(student => <div key={student.enrollmentNo} className="flex items-center justify-between py-3"><span className="text-sm font-semibold">{student.name}</span><span className="font-bold text-emerald-600">{student.overallPct.toFixed(1)}%</span></div>)}</div></section></div>
+  return (
+    <div className="analysis-layout">
+      <aside className="analysis-sidebar">
+        <div className="analysis-brand">
+          <span className="analysis-brand__mark"><BarChart3 size={18} /></span>
+          <span>ClassPulse</span>
+        </div>
+        <nav className="analysis-side-nav">
+          <a href="/dashboard"><LayoutDashboard size={18} />Dashboard</a>
+          <a className="is-active" href="/class-analysis"><BookOpen size={18} />Class Analysis</a>
+          <a href="/subject-analysis"><GraduationCap size={18} />Subject Analysis</a>
+        </nav>
+        <RawDataButton sheetId={sheetId} />
+        <div className="analysis-side-footer">ClassPulse Teacher Portal</div>
+      </aside>
+
+      <main className="analysis-page">
+        <header className="analysis-topbar">
+          <div className="analysis-title-row">
+            <h1>Class / Section Analysis</h1>
+            {computedAt && <span className="analysis-sync">• Last synced {new Date(computedAt).toLocaleString()}</span>}
           </div>
-        </> : <section className="mt-5 rounded-2xl border border-[#e4e4e8] bg-white p-5 shadow-[0_8px_30px_rgba(31,35,49,.04)]"><div className="mb-3"><h2 className="text-[16px] font-bold">Internal Marks</h2><p className="mt-1 text-xs text-[#8b94a6]">All students across all {data.subjects.length} subjects.</p></div><div className="max-h-[600px] overflow-auto rounded-xl border border-[#f0f0f2]"><table className="min-w-[1080px] w-full text-sm"><thead className="sticky top-0 z-10 bg-white"><tr className="border-b border-[#ececf0] text-left text-[11px] font-bold uppercase tracking-wide text-[#7c8497]"><th className="px-3 py-3">Enrollment</th><th className="px-3 py-3">Student</th>{data.subjects.map(subject => <th key={subject.id} className="px-3 py-3 text-center">{subject.code || subject.name}</th>)}<th className="px-3 py-3 text-center">Overall %</th><th className="px-3 py-3">Grade</th></tr></thead><tbody>{rows.map(row => <tr key={row.enrollmentNo} className="border-b border-[#f1f1f3] last:border-0"><td className="px-3 py-3 text-xs text-[#7b8497]">{row.enrollmentNo}</td><td className="px-3 py-3 font-semibold">{row.name}</td>{row.subjects.map(subject => <td key={subject.id} className={`px-3 py-3 text-center font-semibold ${scoreClass(subject.mark, subject.max)}`}>{subject.mark}</td>)}<td className="px-3 py-3 text-center font-bold">{row.overallPct.toFixed(1)}%</td><td className="px-3 py-3"><span className={`inline-flex whitespace-nowrap rounded-full px-3 py-1 text-[11px] font-semibold ${tierClass(row.tier)}`}>{row.tier}</span></td></tr>)}</tbody></table></div></section>}
-      </>}
-    </div></main>
-  </div>;
+          <div className="analysis-top-actions">
+            <button className="analysis-primary" onClick={() => loadAnalysis(true)} disabled={syncing}>
+              <RefreshCw size={15} className={syncing ? "animate-spin" : ""} />
+              {syncing ? "Syncing..." : "Sync now"}
+            </button>
+          </div>
+        </header>
+
+        {typeof sectionId === "string" && <AnalysisNav sectionId={sectionId} />}
+
+        <div className="analysis-view-switch">
+          <button onClick={() => setView("internal")} className={view === "internal" ? "is-active" : ""}>Internal Marks</button>
+          <button onClick={() => setView("risk")} className={view === "risk" ? "is-active" : ""}>At Risk</button>
+        </div>
+
+        {error && <div className="analysis-panel" style={{ padding: 14, marginBottom: 16, color: "#b42318" }}>{error}</div>}
+        {loading && !data && <div style={{ padding: 40, color: "#667085", fontSize: 13 }}>Loading overall analysis...</div>}
+
+        {data && (
+          <>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-3 mb-4">
+              <section className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
+                <p className="text-xs text-slate-500">Class Average</p>
+                <p className="mt-1 text-[28px] font-extrabold text-slate-900">{classAverage.toFixed(1)}%</p>
+                <p className="mt-1 text-[10px] text-slate-400">across all {data.subjects.length} subjects</p>
+              </section>
+              <section className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
+                <p className="text-xs text-slate-500">Students</p>
+                <p className="mt-1 text-[28px] font-extrabold text-slate-900">{rows.length}</p>
+                <p className="mt-1 text-[10px] text-slate-400">students assessed</p>
+              </section>
+              <section className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
+                <p className="text-xs text-slate-500">Pass Rate</p>
+                <p className="mt-1 text-[28px] font-extrabold text-slate-900">{passRate}%</p>
+                <p className="mt-1 text-[10px] text-slate-400">students at or above 40%</p>
+              </section>
+            </div>
+
+            {view === "risk" ? (
+              <>
+                <section className="at-risk-filter rounded-xl border border-slate-200 bg-white shadow-sm">
+                  <div className="at-risk-filter-inner">
+                    <div className="at-risk-filter-title">
+                      <h3>At-Risk Filters</h3>
+                      <p>Choose mark type, range and sort.</p>
+                    </div>
+                    <div className="at-risk-filter-controls">
+                      <label>
+                        <span>Marks shown</span>
+                        <select value={markMode} onChange={(e) => setMarkMode(e.target.value as MarkMode)}>
+                          <option value="basic">Basic</option>
+                          <option value="internal">Internal Marks</option>
+                        </select>
+                      </label>
+                      <label>
+                        <span>Lower bound</span>
+                        <input type="number" min="0" max="100" value={draftLower} onChange={(e) => setDraftLower(Number(e.target.value))} />
+                      </label>
+                      <label>
+                        <span>Upper bound</span>
+                        <input type="number" min="0" max="100" value={draftUpper} onChange={(e) => setDraftUpper(Number(e.target.value))} />
+                      </label>
+                      <label>
+                        <span>Sort</span>
+                        <select value={draftSortDirection} onChange={(e) => setDraftSortDirection(e.target.value as SortDirection)}>
+                          <option value="none">No sort</option>
+                          <option value="desc">High to Low</option>
+                          <option value="asc">Low to High</option>
+                        </select>
+                      </label>
+                      <button type="button" onClick={applyFilters} className="at-risk-apply">Apply</button>
+                    </div>
+                  </div>
+                </section>
+
+                <div className="at-risk-layout mt-4">
+                  <section className="at-risk-table rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
+                    <div className="px-3 py-2 border-b border-slate-100 flex items-center justify-between">
+                      <div>
+                        <h3 className="text-sm font-semibold text-slate-900">Filtered Students</h3>
+                        <p className="text-[10px] text-slate-500 mt-0.5">Showing {filteredRows.length} of {rows.length} students.</p>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <span className="text-[10px] rounded-full bg-slate-100 px-2 py-1 text-slate-600">{data.subjects.length} Subjects</span>
+                        <button type="button" onClick={resetRiskFilter} className="text-[10px] font-semibold text-[#4a35b3]">Reset</button>
+                      </div>
+                    </div>
+                    <div className="max-h-[560px] overflow-y-auto overflow-x-hidden">
+                      <table className="w-full table-fixed text-[10px] border-collapse">
+                        <colgroup>
+                          {sortDirection !== "none" && <col className="w-[6%]" />}
+                          <col className="w-[22%]" />
+                          {data.subjects.map((subject) => <col key={subject.id} className="w-[9%]" />)}
+                          <col className="w-[9%]" />
+                          <col className="w-[12%]" />
+                        </colgroup>
+                        <thead className="sticky top-0 bg-white z-10">
+                          <tr className="border-b border-slate-200 text-slate-500">
+                            {sortDirection !== "none" && <th className="text-center px-1 py-2">Rank</th>}
+                            <th className="text-left px-2 py-2">Student</th>
+                            {data.subjects.map((subject) => <th key={subject.id} className="text-center px-1 py-2">{subject.code || subject.name}</th>)}
+                            <th className="text-center px-1 py-2">%AGE</th>
+                            <th className="text-center px-1 py-2">Grade</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {filteredRows.map((row, index) => (
+                            <tr key={row.enrollmentNo} className="border-b border-slate-100 last:border-0 hover:bg-slate-50/70">
+                              {sortDirection !== "none" && <td className="text-center px-1 py-2 text-slate-500 tabular-nums">{index + 1}</td>}
+                              <td className="px-2 py-2 font-medium text-slate-800 truncate" title={row.name}>{row.name}</td>
+                              {row.subjects.map((subject) => (
+                                <td key={subject.id} className={`text-center px-1 py-2 tabular-nums ${scoreClass(subject.pct)}`} title={`${subject.mark}/${subject.max}`}>
+                                  {Number.isInteger(subject.mark) ? subject.mark : subject.mark.toFixed(1)}
+                                </td>
+                              ))}
+                              <td className={`text-center px-1 py-2 font-semibold tabular-nums ${scoreClass(row.overallPct)}`}>{row.overallPct.toFixed(0)}%</td>
+                              <td className="text-center px-1 py-2"><span className={`inline-flex rounded-full px-2 py-0.5 text-[9px] font-semibold ${tierClass(row.tier)}`}>{row.tier}</span></td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  </section>
+
+                  <aside className="at-risk-side-stack">
+                    <section className="rounded-xl border border-slate-200 bg-white p-3 shadow-sm">
+                      <h3 className="text-sm font-semibold text-slate-900">Distribution</h3>
+                      <p className="mt-0.5 text-[10px] text-slate-500">Overall performance across all subjects.</p>
+                      <div className="mt-3 space-y-2">
+                        {["Excellent", "Good", "Needs Attention", "Critical Risk"].map((tier) => {
+                          const count = tierCounts[tier] || 0;
+                          const width = rows.length ? Math.max(2, count / rows.length * 100) : 0;
+                          return (
+                            <button key={tier} type="button" onClick={() => {
+                              const ranges: Record<string, [number, number]> = { Excellent: [80.0001, 100], Good: [60, 80], "Needs Attention": [40, 59.9999], "Critical Risk": [0, 39.9999] };
+                              const [lo, hi] = ranges[tier];
+                              setDraftLower(lo); setDraftUpper(hi);
+                            }} className="w-full text-left">
+                              <div className="flex items-center justify-between text-[10px] text-slate-600"><span>{tier}</span><span>{count}</span></div>
+                              <div className="mt-1 h-2 rounded-full bg-slate-100 overflow-hidden"><div className="h-full rounded-full" style={{ width: `${width}%`, backgroundColor: TIER_COLORS[tier] }} /></div>
+                            </button>
+                          );
+                        })}
+                      </div>
+                    </section>
+                    <section className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
+                      <div className="px-3 py-2 border-b border-slate-100"><h3 className="text-sm font-semibold text-slate-900">Top Students</h3><p className="text-[10px] text-slate-500 mt-0.5">Highest overall percentages.</p></div>
+                      <div className="grid grid-cols-1 divide-y divide-slate-100">
+                        {topFive.map((row) => <div key={row.enrollmentNo} className="px-3 py-2.5 flex items-center justify-between gap-3"><div className="text-[10px] font-semibold text-slate-800 truncate">{row.name}</div><div className="text-sm text-green-600 shrink-0">{row.overallPct.toFixed(1)}%</div></div>)}
+                      </div>
+                    </section>
+                  </aside>
+                </div>
+              </>
+            ) : (
+              <section className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
+                <div className="px-3 py-2 border-b border-slate-100 flex items-center justify-between">
+                  <div><h3 className="text-sm font-semibold text-slate-900">Internal Marks</h3><p className="text-[10px] text-slate-500 mt-0.5">Showing {markMode === "basic" ? "Basic" : "Internal (moderated)"} marks for all subjects.</p></div>
+                  <select value={markMode} onChange={(e) => setMarkMode(e.target.value as MarkMode)} className="border border-slate-200 rounded-lg px-2 py-1.5 text-[11px] text-slate-700 bg-white"><option value="basic">Basic</option><option value="internal">Internal Marks</option></select>
+                </div>
+                <div className="max-h-[560px] overflow-y-auto overflow-x-hidden">
+                  <table className="w-full table-fixed border-collapse text-[10px]">
+                    <colgroup><col className="w-[24%]" />{data.subjects.map((subject) => <col key={subject.id} className="w-[9%]" />)}<col className="w-[10%]" /><col className="w-[12%]" /></colgroup>
+                    <thead className="sticky top-0 bg-white z-10"><tr className="border-b border-slate-200 text-slate-500"><th className="text-left px-2 py-2">Student</th>{data.subjects.map((subject) => <th key={subject.id} className="text-center px-1 py-2">{subject.code || subject.name}</th>)}<th className="text-center px-1 py-2">%AGE</th><th className="text-center px-1 py-2">Grade</th></tr></thead>
+                    <tbody>{rows.map((row) => <tr key={row.enrollmentNo} className="border-b border-slate-100 last:border-0 hover:bg-slate-50/70"><td className="px-2 py-2 font-medium text-slate-800 truncate">{row.name}</td>{row.subjects.map((subject) => <td key={subject.id} className={`text-center px-1 py-2 tabular-nums ${scoreClass(subject.pct)}`}>{Number.isInteger(subject.mark) ? subject.mark : subject.mark.toFixed(1)}</td>)}<td className={`text-center px-1 py-2 font-semibold ${scoreClass(row.overallPct)}`}>{row.overallPct.toFixed(0)}%</td><td className="text-center px-1 py-2"><span className={`inline-flex rounded-full px-2 py-0.5 text-[9px] font-semibold ${tierClass(row.tier)}`}>{row.tier}</span></td></tr>)}</tbody>
+                  </table>
+                </div>
+              </section>
+            )}
+          </>
+        )}
+      </main>
+    </div>
+  );
 }

From 72eb2fc27eff6eb0cbd9b9998edf2ec655e5ee3f Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Mon, 31 Aug 2026 10:44:28 +0530
Subject: [PATCH 69/80] Limit class overall analysis to six theory subjects

---
 .../analysis/section/[sectionId]/overall.ts   | 34 +++++++++++++++----
 1 file changed, 27 insertions(+), 7 deletions(-)

diff --git a/pages/api/analysis/section/[sectionId]/overall.ts b/pages/api/analysis/section/[sectionId]/overall.ts
index 5276059..5621b95 100644
--- a/pages/api/analysis/section/[sectionId]/overall.ts
+++ b/pages/api/analysis/section/[sectionId]/overall.ts
@@ -12,8 +12,6 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   const userId = (session.user as any).id;
   const role = (session.user as any).role;
 
-  // Class Analysis can reach this endpoint through older class-id links.
-  // Resolve a class id to a section the current teacher is actually allowed to view.
   let resolvedSection = await prisma.section.findUnique({ where: { id: requestedId } });
   if (!resolvedSection) {
     if (role === "ADMIN") {
@@ -43,26 +41,48 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   const allowed = await assertTeacherCanViewSection(userId, role, sectionId);
   if (!allowed) return res.status(403).json({ error: "Not authorized for this section" });
 
-  const forceSync = req.query.sync === "1";
-  const subjects = await prisma.subject.findMany({ where: { sectionId } });
+  // Class Overall / At Risk intentionally uses the six theory subjects only.
+  const subjects = await prisma.subject.findMany({
+    where: { sectionId, type: "THEORY" },
+    orderBy: { code: "asc" },
+  });
   if (subjects.length === 0) {
-    return res.status(404).json({ error: "No subjects exist for this section yet" });
+    return res.status(404).json({ error: "No theory subjects exist for this section yet" });
   }
 
   const link = await prisma.sheetLink.findUnique({ where: { sectionId } });
   if (!link) return res.status(404).json({ error: "No combined Google Sheet linked to this section yet" });
 
-  if (!forceSync) {
+  const theoryIds = new Set(subjects.map((s) => s.id));
+  const theoryCodes = new Set(subjects.map((s) => s.code));
+
+  if (req.query.sync !== "1") {
     const latest = await prisma.analysisSnapshot.findFirst({
       where: { sectionId, data: { path: ["kind"], equals: "overall" } as any },
       orderBy: { computedAt: "desc" },
     });
     if (latest) {
+      const cached = latest.data as any;
+      const cachedSubjects = Array.isArray(cached.subjects)
+        ? cached.subjects.filter((s: any) => theoryIds.has(s.id) || theoryCodes.has(s.code))
+        : subjects.map((s) => ({ id: s.id, name: s.name, code: s.code }));
+      const data = {
+        ...cached,
+        subjects: cachedSubjects,
+        students: Array.isArray(cached.students)
+          ? cached.students.map((student: any) => ({
+              ...student,
+              subjects: Array.isArray(student.subjects)
+                ? student.subjects.filter((s: any) => theoryIds.has(s.subjectId) || theoryCodes.has(s.code))
+                : [],
+            }))
+          : [],
+      };
       return res.status(200).json({
         cached: true,
         computedAt: latest.computedAt,
         sheetId: link.sheetId,
-        data: latest.data,
+        data,
       });
     }
   }

From b038f8f44dc21a98f7e6774ea32f2de08489ce75 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Mon, 31 Aug 2026 10:44:53 +0530
Subject: [PATCH 70/80] Fix class overall at-risk subjects, totals, limits and
 mark colors

---
 .../section-analysis/[sectionId]/overall.tsx  | 106 +++++++++++-------
 1 file changed, 63 insertions(+), 43 deletions(-)

diff --git a/pages/section-analysis/[sectionId]/overall.tsx b/pages/section-analysis/[sectionId]/overall.tsx
index d7836e1..a917ce0 100644
--- a/pages/section-analysis/[sectionId]/overall.tsx
+++ b/pages/section-analysis/[sectionId]/overall.tsx
@@ -34,6 +34,8 @@ type OverallData = { subjects: Subject[]; students: Student[]; classAverageOvera
 type Row = Student & {
   originalIndex: number;
   subjects: (Subject & { mark: number; max: number; pct: number })[];
+  total: number;
+  totalMax: number;
   overallPct: number;
   tier: string;
 };
@@ -57,9 +59,6 @@ const tierClass = (tier: string) =>
         ? "bg-amber-50 text-amber-700"
         : "bg-red-50 text-red-600";
 
-const scoreClass = (pct: number) =>
-  pct >= 80 ? "text-emerald-600" : pct >= 60 ? "text-amber-600" : "text-red-500";
-
 export default function SectionOverallPage() {
   const router = useRouter();
   const { sectionId } = router.query;
@@ -72,9 +71,9 @@ export default function SectionOverallPage() {
   const [view, setView] = useState<View>("risk");
   const [markMode, setMarkMode] = useState<MarkMode>("basic");
   const [lower, setLower] = useState(0);
-  const [upper, setUpper] = useState(100);
+  const [upper, setUpper] = useState(40);
   const [draftLower, setDraftLower] = useState(0);
-  const [draftUpper, setDraftUpper] = useState(100);
+  const [draftUpper, setDraftUpper] = useState(40);
   const [sortDirection, setSortDirection] = useState<SortDirection>("none");
   const [draftSortDirection, setDraftSortDirection] = useState<SortDirection>("none");
 
@@ -106,6 +105,7 @@ export default function SectionOverallPage() {
 
   const rows = useMemo<Row[]>(() => {
     if (!data) return [];
+
     return data.students.map((student, originalIndex) => {
       const subjects = data.subjects.map((subject) => {
         const score = student.subjects.find(
@@ -122,20 +122,32 @@ export default function SectionOverallPage() {
           pct: max > 0 ? (mark / max) * 100 : 0,
         };
       });
-      const overallPct = subjects.length
-        ? subjects.reduce((sum, subject) => sum + subject.pct, 0) / subjects.length
-        : 0;
-      return { ...student, originalIndex, subjects, overallPct, tier: tierFor(overallPct) };
+
+      const total = subjects.reduce((sum, subject) => sum + subject.mark, 0);
+      const totalMax = subjects.reduce((sum, subject) => sum + subject.max, 0);
+      const overallPct = totalMax > 0 ? (total / totalMax) * 100 : 0;
+
+      return {
+        ...student,
+        originalIndex,
+        subjects,
+        total,
+        totalMax,
+        overallPct,
+        tier: tierFor(overallPct),
+      };
     });
   }, [data, markMode]);
 
   const filteredRows = useMemo(() => {
-    const lo = Math.min(lower, upper);
-    const hi = Math.max(lower, upper);
+    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.overallPct >= lo && row.overallPct <= hi);
+
     if (sortDirection === "none") {
       return result.sort((a, b) => a.originalIndex - b.originalIndex);
     }
+
     return result.sort((a, b) =>
       sortDirection === "asc"
         ? a.overallPct - b.overallPct || a.name.localeCompare(b.name)
@@ -167,20 +179,26 @@ export default function SectionOverallPage() {
   );
 
   function applyFilters() {
-    setLower(Math.min(draftLower, draftUpper));
-    setUpper(Math.max(draftLower, draftUpper));
+    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 resetRiskFilter() {
     setDraftLower(0);
-    setDraftUpper(100);
+    setDraftUpper(40);
     setLower(0);
-    setUpper(100);
+    setUpper(40);
     setDraftSortDirection("none");
     setSortDirection("none");
   }
 
+  const formatMark = (mark: number) => Number.isInteger(mark) ? mark : mark.toFixed(1);
+
   return (
     <div className="analysis-layout">
       <aside className="analysis-sidebar">
@@ -190,7 +208,7 @@ export default function SectionOverallPage() {
         </div>
         <nav className="analysis-side-nav">
           <a href="/dashboard"><LayoutDashboard size={18} />Dashboard</a>
-          <a className="is-active" href="/class-analysis"><BookOpen size={18} />Class Analysis</a>
+          <a className="is-active" href={typeof sectionId === "string" ? `/class-analysis/${sectionId}` : "/class-analysis"}><BookOpen size={18} />Class Analysis</a>
           <a href="/subject-analysis"><GraduationCap size={18} />Subject Analysis</a>
         </nav>
         <RawDataButton sheetId={sheetId} />
@@ -227,7 +245,7 @@ export default function SectionOverallPage() {
               <section className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
                 <p className="text-xs text-slate-500">Class Average</p>
                 <p className="mt-1 text-[28px] font-extrabold text-slate-900">{classAverage.toFixed(1)}%</p>
-                <p className="mt-1 text-[10px] text-slate-400">across all {data.subjects.length} subjects</p>
+                <p className="mt-1 text-[10px] text-slate-400">across all {data.subjects.length} theory subjects</p>
               </section>
               <section className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
                 <p className="text-xs text-slate-500">Students</p>
@@ -259,11 +277,11 @@ export default function SectionOverallPage() {
                       </label>
                       <label>
                         <span>Lower bound</span>
-                        <input type="number" min="0" max="100" value={draftLower} onChange={(e) => setDraftLower(Number(e.target.value))} />
+                        <input type="number" min="0" max="40" value={draftLower} onChange={(e) => setDraftLower(Math.min(40, Math.max(0, Number(e.target.value))))} />
                       </label>
                       <label>
                         <span>Upper bound</span>
-                        <input type="number" min="0" max="100" value={draftUpper} onChange={(e) => setDraftUpper(Number(e.target.value))} />
+                        <input type="number" min="0" max="40" value={draftUpper} onChange={(e) => setDraftUpper(Math.min(40, Math.max(0, Number(e.target.value))))} />
                       </label>
                       <label>
                         <span>Sort</span>
@@ -286,24 +304,26 @@ export default function SectionOverallPage() {
                         <p className="text-[10px] text-slate-500 mt-0.5">Showing {filteredRows.length} of {rows.length} students.</p>
                       </div>
                       <div className="flex items-center gap-2">
-                        <span className="text-[10px] rounded-full bg-slate-100 px-2 py-1 text-slate-600">{data.subjects.length} Subjects</span>
+                        <span className="text-[10px] rounded-full bg-slate-100 px-2 py-1 text-slate-600">{data.subjects.length} Theory Subjects</span>
                         <button type="button" onClick={resetRiskFilter} className="text-[10px] font-semibold text-[#4a35b3]">Reset</button>
                       </div>
                     </div>
                     <div className="max-h-[560px] overflow-y-auto overflow-x-hidden">
                       <table className="w-full table-fixed text-[10px] border-collapse">
                         <colgroup>
-                          {sortDirection !== "none" && <col className="w-[6%]" />}
-                          <col className="w-[22%]" />
-                          {data.subjects.map((subject) => <col key={subject.id} className="w-[9%]" />)}
-                          <col className="w-[9%]" />
-                          <col className="w-[12%]" />
+                          {sortDirection !== "none" && <col className="w-[5%]" />}
+                          <col className="w-[18%]" />
+                          {data.subjects.map((subject) => <col key={subject.id} className="w-[8%]" />)}
+                          <col className="w-[10%]" />
+                          <col className="w-[8%]" />
+                          <col className="w-[13%]" />
                         </colgroup>
                         <thead className="sticky top-0 bg-white z-10">
                           <tr className="border-b border-slate-200 text-slate-500">
                             {sortDirection !== "none" && <th className="text-center px-1 py-2">Rank</th>}
                             <th className="text-left px-2 py-2">Student</th>
                             {data.subjects.map((subject) => <th key={subject.id} className="text-center px-1 py-2">{subject.code || subject.name}</th>)}
+                            <th className="text-center px-1 py-2">Total</th>
                             <th className="text-center px-1 py-2">%AGE</th>
                             <th className="text-center px-1 py-2">Grade</th>
                           </tr>
@@ -313,12 +333,16 @@ export default function SectionOverallPage() {
                             <tr key={row.enrollmentNo} className="border-b border-slate-100 last:border-0 hover:bg-slate-50/70">
                               {sortDirection !== "none" && <td className="text-center px-1 py-2 text-slate-500 tabular-nums">{index + 1}</td>}
                               <td className="px-2 py-2 font-medium text-slate-800 truncate" title={row.name}>{row.name}</td>
-                              {row.subjects.map((subject) => (
-                                <td key={subject.id} className={`text-center px-1 py-2 tabular-nums ${scoreClass(subject.pct)}`} title={`${subject.mark}/${subject.max}`}>
-                                  {Number.isInteger(subject.mark) ? subject.mark : subject.mark.toFixed(1)}
-                                </td>
-                              ))}
-                              <td className={`text-center px-1 py-2 font-semibold tabular-nums ${scoreClass(row.overallPct)}`}>{row.overallPct.toFixed(0)}%</td>
+                              {row.subjects.map((subject) => {
+                                const color = TIER_COLORS[tierFor(subject.pct)];
+                                return <td key={subject.id} className="text-center px-1 py-2 tabular-nums font-medium" style={{ color }} title={`${subject.mark}/${subject.max} · ${subject.pct.toFixed(1)}%`}>
+                                  {formatMark(subject.mark)}
+                                </td>;
+                              })}
+                              <td className="text-center px-1 py-2 font-semibold tabular-nums text-slate-900" title={`${formatMark(row.total)}/${formatMark(row.totalMax)}`}>
+                                {formatMark(row.total)}
+                              </td>
+                              <td className="text-center px-1 py-2 font-semibold tabular-nums" style={{ color: TIER_COLORS[row.tier] }}>{row.overallPct.toFixed(0)}%</td>
                               <td className="text-center px-1 py-2"><span className={`inline-flex rounded-full px-2 py-0.5 text-[9px] font-semibold ${tierClass(row.tier)}`}>{row.tier}</span></td>
                             </tr>
                           ))}
@@ -330,20 +354,16 @@ export default function SectionOverallPage() {
                   <aside className="at-risk-side-stack">
                     <section className="rounded-xl border border-slate-200 bg-white p-3 shadow-sm">
                       <h3 className="text-sm font-semibold text-slate-900">Distribution</h3>
-                      <p className="mt-0.5 text-[10px] text-slate-500">Overall performance across all subjects.</p>
+                      <p className="mt-0.5 text-[10px] text-slate-500">Overall performance across the six theory subjects.</p>
                       <div className="mt-3 space-y-2">
                         {["Excellent", "Good", "Needs Attention", "Critical Risk"].map((tier) => {
                           const count = tierCounts[tier] || 0;
                           const width = rows.length ? Math.max(2, count / rows.length * 100) : 0;
                           return (
-                            <button key={tier} type="button" onClick={() => {
-                              const ranges: Record<string, [number, number]> = { Excellent: [80.0001, 100], Good: [60, 80], "Needs Attention": [40, 59.9999], "Critical Risk": [0, 39.9999] };
-                              const [lo, hi] = ranges[tier];
-                              setDraftLower(lo); setDraftUpper(hi);
-                            }} className="w-full text-left">
+                            <div key={tier}>
                               <div className="flex items-center justify-between text-[10px] text-slate-600"><span>{tier}</span><span>{count}</span></div>
                               <div className="mt-1 h-2 rounded-full bg-slate-100 overflow-hidden"><div className="h-full rounded-full" style={{ width: `${width}%`, backgroundColor: TIER_COLORS[tier] }} /></div>
-                            </button>
+                            </div>
                           );
                         })}
                       </div>
@@ -351,7 +371,7 @@ export default function SectionOverallPage() {
                     <section className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
                       <div className="px-3 py-2 border-b border-slate-100"><h3 className="text-sm font-semibold text-slate-900">Top Students</h3><p className="text-[10px] text-slate-500 mt-0.5">Highest overall percentages.</p></div>
                       <div className="grid grid-cols-1 divide-y divide-slate-100">
-                        {topFive.map((row) => <div key={row.enrollmentNo} className="px-3 py-2.5 flex items-center justify-between gap-3"><div className="text-[10px] font-semibold text-slate-800 truncate">{row.name}</div><div className="text-sm text-green-600 shrink-0">{row.overallPct.toFixed(1)}%</div></div>)}
+                        {topFive.map((row) => <div key={row.enrollmentNo} className="px-3 py-2.5 flex items-center justify-between gap-3"><div className="text-[10px] font-semibold text-slate-800 truncate">{row.name}</div><div className="text-sm font-medium" style={{ color: TIER_COLORS[row.tier] }}>{row.overallPct.toFixed(1)}%</div></div>)}
                       </div>
                     </section>
                   </aside>
@@ -360,14 +380,14 @@ export default function SectionOverallPage() {
             ) : (
               <section className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
                 <div className="px-3 py-2 border-b border-slate-100 flex items-center justify-between">
-                  <div><h3 className="text-sm font-semibold text-slate-900">Internal Marks</h3><p className="text-[10px] text-slate-500 mt-0.5">Showing {markMode === "basic" ? "Basic" : "Internal (moderated)"} marks for all subjects.</p></div>
+                  <div><h3 className="text-sm font-semibold text-slate-900">Internal Marks</h3><p className="text-[10px] text-slate-500 mt-0.5">Showing {markMode === "basic" ? "Basic" : "Internal (moderated)"} marks for the six theory subjects.</p></div>
                   <select value={markMode} onChange={(e) => setMarkMode(e.target.value as MarkMode)} className="border border-slate-200 rounded-lg px-2 py-1.5 text-[11px] text-slate-700 bg-white"><option value="basic">Basic</option><option value="internal">Internal Marks</option></select>
                 </div>
                 <div className="max-h-[560px] overflow-y-auto overflow-x-hidden">
                   <table className="w-full table-fixed border-collapse text-[10px]">
-                    <colgroup><col className="w-[24%]" />{data.subjects.map((subject) => <col key={subject.id} className="w-[9%]" />)}<col className="w-[10%]" /><col className="w-[12%]" /></colgroup>
-                    <thead className="sticky top-0 bg-white z-10"><tr className="border-b border-slate-200 text-slate-500"><th className="text-left px-2 py-2">Student</th>{data.subjects.map((subject) => <th key={subject.id} className="text-center px-1 py-2">{subject.code || subject.name}</th>)}<th className="text-center px-1 py-2">%AGE</th><th className="text-center px-1 py-2">Grade</th></tr></thead>
-                    <tbody>{rows.map((row) => <tr key={row.enrollmentNo} className="border-b border-slate-100 last:border-0 hover:bg-slate-50/70"><td className="px-2 py-2 font-medium text-slate-800 truncate">{row.name}</td>{row.subjects.map((subject) => <td key={subject.id} className={`text-center px-1 py-2 tabular-nums ${scoreClass(subject.pct)}`}>{Number.isInteger(subject.mark) ? subject.mark : subject.mark.toFixed(1)}</td>)}<td className={`text-center px-1 py-2 font-semibold ${scoreClass(row.overallPct)}`}>{row.overallPct.toFixed(0)}%</td><td className="text-center px-1 py-2"><span className={`inline-flex rounded-full px-2 py-0.5 text-[9px] font-semibold ${tierClass(row.tier)}`}>{row.tier}</span></td></tr>)}</tbody>
+                    <colgroup><col className="w-[20%]" />{data.subjects.map((subject) => <col key={subject.id} className="w-[8%]" />}<col className="w-[11%]" /><col className="w-[8%]" /><col className="w-[13%]" /></colgroup>
+                    <thead className="sticky top-0 bg-white z-10"><tr className="border-b border-slate-200 text-slate-500"><th className="text-left px-2 py-2">Student</th>{data.subjects.map((subject) => <th key={subject.id} className="text-center px-1 py-2">{subject.code || subject.name}</th>)}<th className="text-center px-1 py-2">Total</th><th className="text-center px-1 py-2">%AGE</th><th className="text-center px-1 py-2">Grade</th></tr></thead>
+                    <tbody>{rows.map((row) => <tr key={row.enrollmentNo} className="border-b border-slate-100 last:border-0 hover:bg-slate-50/70"><td className="px-2 py-2 font-medium text-slate-800 truncate">{row.name}</td>{row.subjects.map((subject) => <td key={subject.id} className="text-center px-1 py-2 tabular-nums font-medium" style={{ color: TIER_COLORS[tierFor(subject.pct)] }}>{formatMark(subject.mark)}</td>)}<td className="text-center px-1 py-2 font-semibold text-slate-900">{formatMark(row.total)}</td><td className="text-center px-1 py-2 font-semibold" style={{ color: TIER_COLORS[row.tier] }}>{row.overallPct.toFixed(0)}%</td><td className="text-center px-1 py-2"><span className={`inline-flex rounded-full px-2 py-0.5 text-[9px] font-semibold ${tierClass(row.tier)}`}>{row.tier}</span></td></tr>)}</tbody>
                   </table>
                 </div>
               </section>

From a06f7157215ff3195956a4f9c98b1760695695a1 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Mon, 31 Aug 2026 11:08:42 +0530
Subject: [PATCH 71/80] Fix class overall JSX build error cleanly

---
 .../section-analysis/[sectionId]/overall.tsx  | 212 +++++-------------
 1 file changed, 58 insertions(+), 154 deletions(-)

diff --git a/pages/section-analysis/[sectionId]/overall.tsx b/pages/section-analysis/[sectionId]/overall.tsx
index a917ce0..71b7b06 100644
--- a/pages/section-analysis/[sectionId]/overall.tsx
+++ b/pages/section-analysis/[sectionId]/overall.tsx
@@ -40,16 +40,15 @@ type Row = Student & {
   tier: string;
 };
 
+const THEORY_CODES = ["IOT", "MLDA", "PR", "PE", "USDL", "SDL"];
 const TIER_COLORS: Record<string, string> = {
   Excellent: "#2563eb",
   Good: "#16a34a",
   "Needs Attention": "#f59e0b",
   "Critical Risk": "#ef4444",
 };
-
 const tierFor = (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"
@@ -78,7 +77,7 @@ export default function SectionOverallPage() {
   const [draftSortDirection, setDraftSortDirection] = useState<SortDirection>("none");
 
   async function loadAnalysis(sync = false) {
-    if (!sectionId || typeof sectionId !== "string") return;
+    if (typeof sectionId !== "string") return;
     sync ? setSyncing(true) : setLoading(true);
     setError("");
     try {
@@ -103,80 +102,50 @@ export default function SectionOverallPage() {
     loadAnalysis();
   }, [sectionId]);
 
-  const rows = useMemo<Row[]>(() => {
+  const theorySubjects = useMemo(() => {
     if (!data) return [];
+    const byCode = THEORY_CODES.map((code) => data.subjects.find((s) => s.code.toUpperCase() === code)).filter(Boolean) as Subject[];
+    return byCode.length === 6
+      ? byCode
+      : data.subjects.filter((s) => !/lab/i.test(`${s.code} ${s.name}`)).slice(0, 6);
+  }, [data]);
 
+  const rows = useMemo<Row[]>(() => {
+    if (!data) return [];
     return data.students.map((student, originalIndex) => {
-      const subjects = data.subjects.map((subject) => {
-        const score = student.subjects.find(
-          (item) => item.subjectId === subject.id || item.code === subject.code
-        );
-        const mark = markMode === "basic"
-          ? Number(score?.basicInternal || 0)
-          : Number(score?.moderatedInternal || 0);
+      const subjects = theorySubjects.map((subject) => {
+        const score = student.subjects.find((item) => item.subjectId === subject.id || item.code === subject.code);
+        const mark = markMode === "basic" ? Number(score?.basicInternal || 0) : Number(score?.moderatedInternal || 0);
         const max = Number(score?.basicMax || 0);
-        return {
-          ...subject,
-          mark,
-          max,
-          pct: max > 0 ? (mark / max) * 100 : 0,
-        };
+        return { ...subject, mark, max, pct: max > 0 ? (mark / max) * 100 : 0 };
       });
-
       const total = subjects.reduce((sum, subject) => sum + subject.mark, 0);
       const totalMax = subjects.reduce((sum, subject) => sum + subject.max, 0);
       const overallPct = totalMax > 0 ? (total / totalMax) * 100 : 0;
-
-      return {
-        ...student,
-        originalIndex,
-        subjects,
-        total,
-        totalMax,
-        overallPct,
-        tier: tierFor(overallPct),
-      };
+      return { ...student, originalIndex, subjects, total, totalMax, overallPct, tier: tierFor(overallPct) };
     });
-  }, [data, markMode]);
+  }, [data, theorySubjects, markMode]);
 
   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.overallPct >= lo && row.overallPct <= hi);
-
-    if (sortDirection === "none") {
-      return result.sort((a, b) => a.originalIndex - b.originalIndex);
-    }
-
-    return result.sort((a, b) =>
+    if (sortDirection === "none") return [...result].sort((a, b) => a.originalIndex - b.originalIndex);
+    return [...result].sort((a, b) =>
       sortDirection === "asc"
         ? a.overallPct - b.overallPct || a.name.localeCompare(b.name)
         : b.overallPct - a.overallPct || 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<string, number>),
-    [rows]
-  );
-
-  const classAverage = useMemo(
-    () => rows.length ? rows.reduce((sum, row) => sum + row.overallPct, 0) / rows.length : 0,
-    [rows]
-  );
-
-  const passRate = useMemo(
-    () => rows.length ? Math.round(rows.filter((row) => row.overallPct >= 40).length / rows.length * 100) : 0,
-    [rows]
-  );
-
-  const topFive = useMemo(
-    () => [...rows].sort((a, b) => b.overallPct - a.overallPct || a.originalIndex - b.originalIndex).slice(0, 5),
-    [rows]
-  );
+  const tierCounts = useMemo(() => rows.reduce((acc, row) => {
+    acc[row.tier] = (acc[row.tier] || 0) + 1;
+    return acc;
+  }, {} as Record<string, number>), [rows]);
+  const classAverage = 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);
+  const formatMark = (mark: number) => Number.isInteger(mark) ? mark : mark.toFixed(1);
 
   function applyFilters() {
     const nextLower = Math.max(0, Math.min(40, Math.min(draftLower, draftUpper)));
@@ -197,8 +166,6 @@ export default function SectionOverallPage() {
     setSortDirection("none");
   }
 
-  const formatMark = (mark: number) => Number.isInteger(mark) ? mark : mark.toFixed(1);
-
   return (
     <div className="analysis-layout">
       <aside className="analysis-sidebar">
@@ -245,7 +212,7 @@ export default function SectionOverallPage() {
               <section className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
                 <p className="text-xs text-slate-500">Class Average</p>
                 <p className="mt-1 text-[28px] font-extrabold text-slate-900">{classAverage.toFixed(1)}%</p>
-                <p className="mt-1 text-[10px] text-slate-400">across all {data.subjects.length} theory subjects</p>
+                <p className="mt-1 text-[10px] text-slate-400">across all 6 theory subjects</p>
               </section>
               <section className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
                 <p className="text-xs text-slate-500">Students</p>
@@ -263,34 +230,12 @@ export default function SectionOverallPage() {
               <>
                 <section className="at-risk-filter rounded-xl border border-slate-200 bg-white shadow-sm">
                   <div className="at-risk-filter-inner">
-                    <div className="at-risk-filter-title">
-                      <h3>At-Risk Filters</h3>
-                      <p>Choose mark type, range and sort.</p>
-                    </div>
+                    <div className="at-risk-filter-title"><h3>At-Risk Filters</h3><p>Choose mark type, range and sort.</p></div>
                     <div className="at-risk-filter-controls">
-                      <label>
-                        <span>Marks shown</span>
-                        <select value={markMode} onChange={(e) => setMarkMode(e.target.value as MarkMode)}>
-                          <option value="basic">Basic</option>
-                          <option value="internal">Internal Marks</option>
-                        </select>
-                      </label>
-                      <label>
-                        <span>Lower bound</span>
-                        <input type="number" min="0" max="40" value={draftLower} onChange={(e) => setDraftLower(Math.min(40, Math.max(0, Number(e.target.value))))} />
-                      </label>
-                      <label>
-                        <span>Upper bound</span>
-                        <input type="number" min="0" max="40" value={draftUpper} onChange={(e) => setDraftUpper(Math.min(40, Math.max(0, Number(e.target.value))))} />
-                      </label>
-                      <label>
-                        <span>Sort</span>
-                        <select value={draftSortDirection} onChange={(e) => setDraftSortDirection(e.target.value as SortDirection)}>
-                          <option value="none">No sort</option>
-                          <option value="desc">High to Low</option>
-                          <option value="asc">Low to High</option>
-                        </select>
-                      </label>
+                      <label><span>Marks shown</span><select value={markMode} onChange={(e) => setMarkMode(e.target.value as MarkMode)}><option value="basic">Basic</option><option value="internal">Internal Marks</option></select></label>
+                      <label><span>Lower bound</span><input type="number" min="0" max="40" value={draftLower} onChange={(e) => setDraftLower(Math.min(40, Math.max(0, Number(e.target.value))))} /></label>
+                      <label><span>Upper bound</span><input type="number" min="0" max="40" value={draftUpper} onChange={(e) => setDraftUpper(Math.min(40, Math.max(0, Number(e.target.value))))} /></label>
+                      <label><span>Sort</span><select value={draftSortDirection} onChange={(e) => setDraftSortDirection(e.target.value as SortDirection)}><option value="none">No sort</option><option value="desc">High to Low</option><option value="asc">Low to High</option></select></label>
                       <button type="button" onClick={applyFilters} className="at-risk-apply">Apply</button>
                     </div>
                   </div>
@@ -299,54 +244,31 @@ export default function SectionOverallPage() {
                 <div className="at-risk-layout mt-4">
                   <section className="at-risk-table rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
                     <div className="px-3 py-2 border-b border-slate-100 flex items-center justify-between">
-                      <div>
-                        <h3 className="text-sm font-semibold text-slate-900">Filtered Students</h3>
-                        <p className="text-[10px] text-slate-500 mt-0.5">Showing {filteredRows.length} of {rows.length} students.</p>
-                      </div>
-                      <div className="flex items-center gap-2">
-                        <span className="text-[10px] rounded-full bg-slate-100 px-2 py-1 text-slate-600">{data.subjects.length} Theory Subjects</span>
-                        <button type="button" onClick={resetRiskFilter} className="text-[10px] font-semibold text-[#4a35b3]">Reset</button>
-                      </div>
+                      <div><h3 className="text-sm font-semibold text-slate-900">Filtered Students</h3><p className="text-[10px] text-slate-500 mt-0.5">Showing {filteredRows.length} of {rows.length} students.</p></div>
+                      <div className="flex items-center gap-2"><span className="text-[10px] rounded-full bg-slate-100 px-2 py-1 text-slate-600">6 Theory Subjects</span><button type="button" onClick={resetRiskFilter} className="text-[10px] font-semibold text-[#4a35b3]">Reset</button></div>
                     </div>
                     <div className="max-h-[560px] overflow-y-auto overflow-x-hidden">
                       <table className="w-full table-fixed text-[10px] border-collapse">
                         <colgroup>
                           {sortDirection !== "none" && <col className="w-[5%]" />}
                           <col className="w-[18%]" />
-                          {data.subjects.map((subject) => <col key={subject.id} className="w-[8%]" />)}
-                          <col className="w-[10%]" />
-                          <col className="w-[8%]" />
-                          <col className="w-[13%]" />
+                          {theorySubjects.map((subject) => <col key={subject.id} className="w-[8%]" />)}
+                          <col className="w-[10%]" /><col className="w-[8%]" /><col className="w-[13%]" />
                         </colgroup>
-                        <thead className="sticky top-0 bg-white z-10">
-                          <tr className="border-b border-slate-200 text-slate-500">
-                            {sortDirection !== "none" && <th className="text-center px-1 py-2">Rank</th>}
-                            <th className="text-left px-2 py-2">Student</th>
-                            {data.subjects.map((subject) => <th key={subject.id} className="text-center px-1 py-2">{subject.code || subject.name}</th>)}
-                            <th className="text-center px-1 py-2">Total</th>
-                            <th className="text-center px-1 py-2">%AGE</th>
-                            <th className="text-center px-1 py-2">Grade</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {filteredRows.map((row, index) => (
-                            <tr key={row.enrollmentNo} className="border-b border-slate-100 last:border-0 hover:bg-slate-50/70">
-                              {sortDirection !== "none" && <td className="text-center px-1 py-2 text-slate-500 tabular-nums">{index + 1}</td>}
-                              <td className="px-2 py-2 font-medium text-slate-800 truncate" title={row.name}>{row.name}</td>
-                              {row.subjects.map((subject) => {
-                                const color = TIER_COLORS[tierFor(subject.pct)];
-                                return <td key={subject.id} className="text-center px-1 py-2 tabular-nums font-medium" style={{ color }} title={`${subject.mark}/${subject.max} · ${subject.pct.toFixed(1)}%`}>
-                                  {formatMark(subject.mark)}
-                                </td>;
-                              })}
-                              <td className="text-center px-1 py-2 font-semibold tabular-nums text-slate-900" title={`${formatMark(row.total)}/${formatMark(row.totalMax)}`}>
-                                {formatMark(row.total)}
-                              </td>
-                              <td className="text-center px-1 py-2 font-semibold tabular-nums" style={{ color: TIER_COLORS[row.tier] }}>{row.overallPct.toFixed(0)}%</td>
-                              <td className="text-center px-1 py-2"><span className={`inline-flex rounded-full px-2 py-0.5 text-[9px] font-semibold ${tierClass(row.tier)}`}>{row.tier}</span></td>
-                            </tr>
-                          ))}
-                        </tbody>
+                        <thead className="sticky top-0 bg-white z-10"><tr className="border-b border-slate-200 text-slate-500">
+                          {sortDirection !== "none" && <th className="text-center px-1 py-2">Rank</th>}
+                          <th className="text-left px-2 py-2">Student</th>
+                          {theorySubjects.map((subject) => <th key={subject.id} className="text-center px-1 py-2">{subject.code || subject.name}</th>)}
+                          <th className="text-center px-1 py-2">Total</th><th className="text-center px-1 py-2">%AGE</th><th className="text-center px-1 py-2">Grade</th>
+                        </tr></thead>
+                        <tbody>{filteredRows.map((row, index) => <tr key={row.enrollmentNo} className="border-b border-slate-100 last:border-0 hover:bg-slate-50/70">
+                          {sortDirection !== "none" && <td className="text-center px-1 py-2 text-slate-500 tabular-nums">{index + 1}</td>}
+                          <td className="px-2 py-2 font-medium text-slate-800 truncate" title={row.name}>{row.name}</td>
+                          {row.subjects.map((subject) => <td key={subject.id} className="text-center px-1 py-2 tabular-nums font-medium" style={{ color: TIER_COLORS[tierFor(subject.pct)] }} title={`${formatMark(subject.mark)}/${formatMark(subject.max)} · ${subject.pct.toFixed(1)}%`}>{formatMark(subject.mark)}</td>)}
+                          <td className="text-center px-1 py-2 font-semibold tabular-nums text-slate-900">{formatMark(row.total)}</td>
+                          <td className="text-center px-1 py-2 font-semibold tabular-nums" style={{ color: TIER_COLORS[row.tier] }}>{row.overallPct.toFixed(0)}%</td>
+                          <td className="text-center px-1 py-2"><span className={`inline-flex rounded-full px-2 py-0.5 text-[9px] font-semibold ${tierClass(row.tier)}`}>{row.tier}</span></td>
+                        </tr>)}</tbody>
                       </table>
                     </div>
                   </section>
@@ -355,41 +277,23 @@ export default function SectionOverallPage() {
                     <section className="rounded-xl border border-slate-200 bg-white p-3 shadow-sm">
                       <h3 className="text-sm font-semibold text-slate-900">Distribution</h3>
                       <p className="mt-0.5 text-[10px] text-slate-500">Overall performance across the six theory subjects.</p>
-                      <div className="mt-3 space-y-2">
-                        {["Excellent", "Good", "Needs Attention", "Critical Risk"].map((tier) => {
-                          const count = tierCounts[tier] || 0;
-                          const width = rows.length ? Math.max(2, count / rows.length * 100) : 0;
-                          return (
-                            <div key={tier}>
-                              <div className="flex items-center justify-between text-[10px] text-slate-600"><span>{tier}</span><span>{count}</span></div>
-                              <div className="mt-1 h-2 rounded-full bg-slate-100 overflow-hidden"><div className="h-full rounded-full" style={{ width: `${width}%`, backgroundColor: TIER_COLORS[tier] }} /></div>
-                            </div>
-                          );
-                        })}
-                      </div>
+                      <div className="mt-3 space-y-2">{["Excellent", "Good", "Needs Attention", "Critical Risk"].map((tier) => {
+                        const count = tierCounts[tier] || 0;
+                        const width = rows.length ? Math.max(2, count / rows.length * 100) : 0;
+                        return <div key={tier}><div className="flex items-center justify-between text-[10px] text-slate-600"><span>{tier}</span><span>{count}</span></div><div className="mt-1 h-2 rounded-full bg-slate-100 overflow-hidden"><div className="h-full rounded-full" style={{ width: `${width}%`, backgroundColor: TIER_COLORS[tier] }} /></div></div>;
+                      })}</div>
                     </section>
                     <section className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
                       <div className="px-3 py-2 border-b border-slate-100"><h3 className="text-sm font-semibold text-slate-900">Top Students</h3><p className="text-[10px] text-slate-500 mt-0.5">Highest overall percentages.</p></div>
-                      <div className="grid grid-cols-1 divide-y divide-slate-100">
-                        {topFive.map((row) => <div key={row.enrollmentNo} className="px-3 py-2.5 flex items-center justify-between gap-3"><div className="text-[10px] font-semibold text-slate-800 truncate">{row.name}</div><div className="text-sm font-medium" style={{ color: TIER_COLORS[row.tier] }}>{row.overallPct.toFixed(1)}%</div></div>)}
-                      </div>
+                      {topFive.map((row) => <div key={row.enrollmentNo} className="px-3 py-2.5 flex items-center justify-between gap-3 border-b border-slate-100"><div className="text-[10px] font-semibold text-slate-800 truncate">{row.name}</div><div className="text-sm font-medium" style={{ color: TIER_COLORS[row.tier] }}>{row.overallPct.toFixed(1)}%</div></div>)}
                     </section>
                   </aside>
                 </div>
               </>
             ) : (
               <section className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
-                <div className="px-3 py-2 border-b border-slate-100 flex items-center justify-between">
-                  <div><h3 className="text-sm font-semibold text-slate-900">Internal Marks</h3><p className="text-[10px] text-slate-500 mt-0.5">Showing {markMode === "basic" ? "Basic" : "Internal (moderated)"} marks for the six theory subjects.</p></div>
-                  <select value={markMode} onChange={(e) => setMarkMode(e.target.value as MarkMode)} className="border border-slate-200 rounded-lg px-2 py-1.5 text-[11px] text-slate-700 bg-white"><option value="basic">Basic</option><option value="internal">Internal Marks</option></select>
-                </div>
-                <div className="max-h-[560px] overflow-y-auto overflow-x-hidden">
-                  <table className="w-full table-fixed border-collapse text-[10px]">
-                    <colgroup><col className="w-[20%]" />{data.subjects.map((subject) => <col key={subject.id} className="w-[8%]" />}<col className="w-[11%]" /><col className="w-[8%]" /><col className="w-[13%]" /></colgroup>
-                    <thead className="sticky top-0 bg-white z-10"><tr className="border-b border-slate-200 text-slate-500"><th className="text-left px-2 py-2">Student</th>{data.subjects.map((subject) => <th key={subject.id} className="text-center px-1 py-2">{subject.code || subject.name}</th>)}<th className="text-center px-1 py-2">Total</th><th className="text-center px-1 py-2">%AGE</th><th className="text-center px-1 py-2">Grade</th></tr></thead>
-                    <tbody>{rows.map((row) => <tr key={row.enrollmentNo} className="border-b border-slate-100 last:border-0 hover:bg-slate-50/70"><td className="px-2 py-2 font-medium text-slate-800 truncate">{row.name}</td>{row.subjects.map((subject) => <td key={subject.id} className="text-center px-1 py-2 tabular-nums font-medium" style={{ color: TIER_COLORS[tierFor(subject.pct)] }}>{formatMark(subject.mark)}</td>)}<td className="text-center px-1 py-2 font-semibold text-slate-900">{formatMark(row.total)}</td><td className="text-center px-1 py-2 font-semibold" style={{ color: TIER_COLORS[row.tier] }}>{row.overallPct.toFixed(0)}%</td><td className="text-center px-1 py-2"><span className={`inline-flex rounded-full px-2 py-0.5 text-[9px] font-semibold ${tierClass(row.tier)}`}>{row.tier}</span></td></tr>)}</tbody>
-                  </table>
-                </div>
+                <div className="px-3 py-2 border-b border-slate-100 flex items-center justify-between"><div><h3 className="text-sm font-semibold text-slate-900">Internal Marks</h3><p className="text-[10px] text-slate-500 mt-0.5">Six theory subjects only.</p></div><select value={markMode} onChange={(e) => setMarkMode(e.target.value as MarkMode)} className="border border-slate-200 rounded-lg px-2 py-1.5 text-[11px] text-slate-700 bg-white"><option value="basic">Basic</option><option value="internal">Internal Marks</option></select></div>
+                <div className="max-h-[560px] overflow-y-auto overflow-x-hidden"><table className="w-full table-fixed border-collapse text-[10px]"><thead className="sticky top-0 bg-white z-10"><tr className="border-b border-slate-200 text-slate-500"><th className="text-left px-2 py-2">Student</th>{theorySubjects.map((subject) => <th key={subject.id} className="text-center px-1 py-2">{subject.code}</th>)}<th className="text-center px-1 py-2">Total</th><th className="text-center px-1 py-2">%AGE</th><th className="text-center px-1 py-2">Grade</th></tr></thead><tbody>{rows.map((row) => <tr key={row.enrollmentNo} className="border-b border-slate-100"><td className="px-2 py-2 font-medium text-slate-800 truncate">{row.name}</td>{row.subjects.map((subject) => <td key={subject.id} className="text-center px-1 py-2 font-medium" style={{ color: TIER_COLORS[tierFor(subject.pct)] }}>{formatMark(subject.mark)}</td>)}<td className="text-center px-1 py-2 font-semibold">{formatMark(row.total)}</td><td className="text-center px-1 py-2 font-semibold" style={{ color: TIER_COLORS[row.tier] }}>{row.overallPct.toFixed(0)}%</td><td className="text-center px-1 py-2"><span className={`inline-flex rounded-full px-2 py-0.5 text-[9px] font-semibold ${tierClass(row.tier)}`}>{row.tier}</span></td></tr>)}</tbody></table></div>
               </section>
             )}
           </>

From 7107eb5276e2ac78ef63248de1222c08c9bf5262 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Mon, 31 Aug 2026 13:51:59 +0530
Subject: [PATCH 72/80] Fix overall filter to use average marks

---
 .../section-analysis/[sectionId]/overall.tsx  | 383 +++++++++++++-----
 1 file changed, 272 insertions(+), 111 deletions(-)

diff --git a/pages/section-analysis/[sectionId]/overall.tsx b/pages/section-analysis/[sectionId]/overall.tsx
index 71b7b06..c56fb3d 100644
--- a/pages/section-analysis/[sectionId]/overall.tsx
+++ b/pages/section-analysis/[sectionId]/overall.tsx
@@ -4,8 +4,6 @@ import { BarChart3, BookOpen, GraduationCap, LayoutDashboard, RefreshCw } from "
 import AnalysisNav from "../../../components/AnalysisNav";
 import { RawDataButton } from "../../../components/AnalysisWidgets";
 
-type MarkMode = "basic" | "internal";
-type View = "internal" | "risk";
 type SortDirection = "none" | "asc" | "desc";
 type Subject = { id: string; name: string; code: string };
 type SubjectScore = {
@@ -31,24 +29,28 @@ type Student = {
   overallGrade: string;
 };
 type OverallData = { subjects: Subject[]; students: Student[]; classAverageOverallPct: number };
+type RowSubject = Subject & { mark: number; max: number; pct: number; grade: string };
 type Row = Student & {
   originalIndex: number;
-  subjects: (Subject & { mark: number; max: number; pct: number })[];
+  subjects: RowSubject[];
   total: number;
   totalMax: number;
+  average: number;
+  averageMax: number;
   overallPct: number;
   tier: string;
 };
 
-const THEORY_CODES = ["IOT", "MLDA", "PR", "PE", "USDL", "SDL"];
 const TIER_COLORS: Record<string, string> = {
   Excellent: "#2563eb",
   Good: "#16a34a",
   "Needs Attention": "#f59e0b",
   "Critical Risk": "#ef4444",
 };
-const tierFor = (pct: number) =>
-  pct > 80 ? "Excellent" : pct >= 60 ? "Good" : pct >= 40 ? "Needs Attention" : "Critical Risk";
+
+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"
@@ -58,6 +60,8 @@ const tierClass = (tier: string) =>
         ? "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;
@@ -67,8 +71,6 @@ export default function SectionOverallPage() {
   const [loading, setLoading] = useState(true);
   const [syncing, setSyncing] = useState(false);
   const [error, setError] = useState("");
-  const [view, setView] = useState<View>("risk");
-  const [markMode, setMarkMode] = useState<MarkMode>("basic");
   const [lower, setLower] = useState(0);
   const [upper, setUpper] = useState(40);
   const [draftLower, setDraftLower] = useState(0);
@@ -102,50 +104,84 @@ export default function SectionOverallPage() {
     loadAnalysis();
   }, [sectionId]);
 
-  const theorySubjects = useMemo(() => {
-    if (!data) return [];
-    const byCode = THEORY_CODES.map((code) => data.subjects.find((s) => s.code.toUpperCase() === code)).filter(Boolean) as Subject[];
-    return byCode.length === 6
-      ? byCode
-      : data.subjects.filter((s) => !/lab/i.test(`${s.code} ${s.name}`)).slice(0, 6);
-  }, [data]);
+  // 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<Row[]>(() => {
     if (!data) return [];
+
     return data.students.map((student, originalIndex) => {
-      const subjects = theorySubjects.map((subject) => {
-        const score = student.subjects.find((item) => item.subjectId === subject.id || item.code === subject.code);
-        const mark = markMode === "basic" ? Number(score?.basicInternal || 0) : Number(score?.moderatedInternal || 0);
+      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);
-        return { ...subject, mark, max, pct: max > 0 ? (mark / max) * 100 : 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 overallPct = totalMax > 0 ? (total / totalMax) * 100 : 0;
-      return { ...student, originalIndex, subjects, total, totalMax, overallPct, tier: tierFor(overallPct) };
+      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, markMode]);
+  }, [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.overallPct >= lo && row.overallPct <= hi);
-    if (sortDirection === "none") return [...result].sort((a, b) => a.originalIndex - b.originalIndex);
+    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.overallPct - b.overallPct || a.name.localeCompare(b.name)
-        : b.overallPct - a.overallPct || a.name.localeCompare(b.name)
+        ? 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<string, number>), [rows]);
-  const classAverage = 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);
-  const formatMark = (mark: number) => Number.isInteger(mark) ? mark : mark.toFixed(1);
+  const tierCounts = useMemo(
+    () =>
+      rows.reduce((acc, row) => {
+        acc[row.tier] = (acc[row.tier] || 0) + 1;
+        return acc;
+      }, {} as Record<string, number>),
+    [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)));
@@ -157,7 +193,7 @@ export default function SectionOverallPage() {
     setSortDirection(draftSortDirection);
   }
 
-  function resetRiskFilter() {
+  function resetFilter() {
     setDraftLower(0);
     setDraftUpper(40);
     setLower(0);
@@ -175,7 +211,12 @@ export default function SectionOverallPage() {
         </div>
         <nav className="analysis-side-nav">
           <a href="/dashboard"><LayoutDashboard size={18} />Dashboard</a>
-          <a className="is-active" href={typeof sectionId === "string" ? `/class-analysis/${sectionId}` : "/class-analysis"}><BookOpen size={18} />Class Analysis</a>
+          <a
+            className="is-active"
+            href={typeof sectionId === "string" ? `/class-analysis/${sectionId}` : "/class-analysis"}
+          >
+            <BookOpen size={18} />Class Analysis
+          </a>
           <a href="/subject-analysis"><GraduationCap size={18} />Subject Analysis</a>
         </nav>
         <RawDataButton sheetId={sheetId} />
@@ -186,7 +227,9 @@ export default function SectionOverallPage() {
         <header className="analysis-topbar">
           <div className="analysis-title-row">
             <h1>Class / Section Analysis</h1>
-            {computedAt && <span className="analysis-sync">• Last synced {new Date(computedAt).toLocaleString()}</span>}
+            {computedAt && (
+              <span className="analysis-sync">• Last synced {new Date(computedAt).toLocaleString()}</span>
+            )}
           </div>
           <div className="analysis-top-actions">
             <button className="analysis-primary" onClick={() => loadAnalysis(true)} disabled={syncing}>
@@ -198,20 +241,21 @@ export default function SectionOverallPage() {
 
         {typeof sectionId === "string" && <AnalysisNav sectionId={sectionId} />}
 
-        <div className="analysis-view-switch">
-          <button onClick={() => setView("internal")} className={view === "internal" ? "is-active" : ""}>Internal Marks</button>
-          <button onClick={() => setView("risk")} className={view === "risk" ? "is-active" : ""}>At Risk</button>
-        </div>
-
-        {error && <div className="analysis-panel" style={{ padding: 14, marginBottom: 16, color: "#b42318" }}>{error}</div>}
-        {loading && !data && <div style={{ padding: 40, color: "#667085", fontSize: 13 }}>Loading overall analysis...</div>}
+        {error && (
+          <div className="analysis-panel" style={{ padding: 14, marginBottom: 16, color: "#b42318" }}>
+            {error}
+          </div>
+        )}
+        {loading && !data && (
+          <div style={{ padding: 40, color: "#667085", fontSize: 13 }}>Loading overall analysis...</div>
+        )}
 
         {data && (
           <>
             <div className="grid grid-cols-1 md:grid-cols-3 gap-3 mb-4">
               <section className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
                 <p className="text-xs text-slate-500">Class Average</p>
-                <p className="mt-1 text-[28px] font-extrabold text-slate-900">{classAverage.toFixed(1)}%</p>
+                <p className="mt-1 text-[28px] font-extrabold text-slate-900">{classAveragePct.toFixed(1)}%</p>
                 <p className="mt-1 text-[10px] text-slate-400">across all 6 theory subjects</p>
               </section>
               <section className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
@@ -226,76 +270,193 @@ export default function SectionOverallPage() {
               </section>
             </div>
 
-            {view === "risk" ? (
-              <>
-                <section className="at-risk-filter rounded-xl border border-slate-200 bg-white shadow-sm">
-                  <div className="at-risk-filter-inner">
-                    <div className="at-risk-filter-title"><h3>At-Risk Filters</h3><p>Choose mark type, range and sort.</p></div>
-                    <div className="at-risk-filter-controls">
-                      <label><span>Marks shown</span><select value={markMode} onChange={(e) => setMarkMode(e.target.value as MarkMode)}><option value="basic">Basic</option><option value="internal">Internal Marks</option></select></label>
-                      <label><span>Lower bound</span><input type="number" min="0" max="40" value={draftLower} onChange={(e) => setDraftLower(Math.min(40, Math.max(0, Number(e.target.value))))} /></label>
-                      <label><span>Upper bound</span><input type="number" min="0" max="40" value={draftUpper} onChange={(e) => setDraftUpper(Math.min(40, Math.max(0, Number(e.target.value))))} /></label>
-                      <label><span>Sort</span><select value={draftSortDirection} onChange={(e) => setDraftSortDirection(e.target.value as SortDirection)}><option value="none">No sort</option><option value="desc">High to Low</option><option value="asc">Low to High</option></select></label>
-                      <button type="button" onClick={applyFilters} className="at-risk-apply">Apply</button>
-                    </div>
-                  </div>
-                </section>
+            <section className="at-risk-filter rounded-xl border border-slate-200 bg-white shadow-sm">
+              <div className="at-risk-filter-inner">
+                <div className="at-risk-filter-title">
+                  <h3>Filters</h3>
+                  <p>Filter by average marks and sort.</p>
+                </div>
+                <div className="at-risk-filter-controls">
+                  <label>
+                    <span>Lower bound</span>
+                    <input
+                      type="number"
+                      min="0"
+                      max="40"
+                      value={draftLower}
+                      onChange={(e) => setDraftLower(Math.min(40, Math.max(0, Number(e.target.value))))}
+                    />
+                  </label>
+                  <label>
+                    <span>Upper bound</span>
+                    <input
+                      type="number"
+                      min="0"
+                      max="40"
+                      value={draftUpper}
+                      onChange={(e) => setDraftUpper(Math.min(40, Math.max(0, Number(e.target.value))))}
+                    />
+                  </label>
+                  <label>
+                    <span>Sort</span>
+                    <select
+                      value={draftSortDirection}
+                      onChange={(e) => setDraftSortDirection(e.target.value as SortDirection)}
+                    >
+                      <option value="none">No sort</option>
+                      <option value="desc">High to Low</option>
+                      <option value="asc">Low to High</option>
+                    </select>
+                  </label>
+                  <button type="button" onClick={applyFilters} className="at-risk-apply">Apply</button>
+                </div>
+              </div>
+            </section>
 
-                <div className="at-risk-layout mt-4">
-                  <section className="at-risk-table rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
-                    <div className="px-3 py-2 border-b border-slate-100 flex items-center justify-between">
-                      <div><h3 className="text-sm font-semibold text-slate-900">Filtered Students</h3><p className="text-[10px] text-slate-500 mt-0.5">Showing {filteredRows.length} of {rows.length} students.</p></div>
-                      <div className="flex items-center gap-2"><span className="text-[10px] rounded-full bg-slate-100 px-2 py-1 text-slate-600">6 Theory Subjects</span><button type="button" onClick={resetRiskFilter} className="text-[10px] font-semibold text-[#4a35b3]">Reset</button></div>
-                    </div>
-                    <div className="max-h-[560px] overflow-y-auto overflow-x-hidden">
-                      <table className="w-full table-fixed text-[10px] border-collapse">
-                        <colgroup>
-                          {sortDirection !== "none" && <col className="w-[5%]" />}
-                          <col className="w-[18%]" />
-                          {theorySubjects.map((subject) => <col key={subject.id} className="w-[8%]" />)}
-                          <col className="w-[10%]" /><col className="w-[8%]" /><col className="w-[13%]" />
-                        </colgroup>
-                        <thead className="sticky top-0 bg-white z-10"><tr className="border-b border-slate-200 text-slate-500">
-                          {sortDirection !== "none" && <th className="text-center px-1 py-2">Rank</th>}
-                          <th className="text-left px-2 py-2">Student</th>
-                          {theorySubjects.map((subject) => <th key={subject.id} className="text-center px-1 py-2">{subject.code || subject.name}</th>)}
-                          <th className="text-center px-1 py-2">Total</th><th className="text-center px-1 py-2">%AGE</th><th className="text-center px-1 py-2">Grade</th>
-                        </tr></thead>
-                        <tbody>{filteredRows.map((row, index) => <tr key={row.enrollmentNo} className="border-b border-slate-100 last:border-0 hover:bg-slate-50/70">
-                          {sortDirection !== "none" && <td className="text-center px-1 py-2 text-slate-500 tabular-nums">{index + 1}</td>}
-                          <td className="px-2 py-2 font-medium text-slate-800 truncate" title={row.name}>{row.name}</td>
-                          {row.subjects.map((subject) => <td key={subject.id} className="text-center px-1 py-2 tabular-nums font-medium" style={{ color: TIER_COLORS[tierFor(subject.pct)] }} title={`${formatMark(subject.mark)}/${formatMark(subject.max)} · ${subject.pct.toFixed(1)}%`}>{formatMark(subject.mark)}</td>)}
-                          <td className="text-center px-1 py-2 font-semibold tabular-nums text-slate-900">{formatMark(row.total)}</td>
-                          <td className="text-center px-1 py-2 font-semibold tabular-nums" style={{ color: TIER_COLORS[row.tier] }}>{row.overallPct.toFixed(0)}%</td>
-                          <td className="text-center px-1 py-2"><span className={`inline-flex rounded-full px-2 py-0.5 text-[9px] font-semibold ${tierClass(row.tier)}`}>{row.tier}</span></td>
-                        </tr>)}</tbody>
-                      </table>
-                    </div>
-                  </section>
+            <div className="at-risk-layout mt-4">
+              <section className="at-risk-table rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
+                <div className="px-3 py-2 border-b border-slate-100 flex items-center justify-between">
+                  <div>
+                    <h3 className="text-sm font-semibold text-slate-900">Filtered Students</h3>
+                    <p className="text-[10px] text-slate-500 mt-0.5">
+                      Showing {filteredRows.length} of {rows.length} students.
+                    </p>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-[10px] rounded-full bg-slate-100 px-2 py-1 text-slate-600">
+                      6 Theory Subjects
+                    </span>
+                    <button type="button" onClick={resetFilter} className="text-[10px] font-semibold text-[#4a35b3]">
+                      Reset
+                    </button>
+                  </div>
+                </div>
 
-                  <aside className="at-risk-side-stack">
-                    <section className="rounded-xl border border-slate-200 bg-white p-3 shadow-sm">
-                      <h3 className="text-sm font-semibold text-slate-900">Distribution</h3>
-                      <p className="mt-0.5 text-[10px] text-slate-500">Overall performance across the six theory subjects.</p>
-                      <div className="mt-3 space-y-2">{["Excellent", "Good", "Needs Attention", "Critical Risk"].map((tier) => {
-                        const count = tierCounts[tier] || 0;
-                        const width = rows.length ? Math.max(2, count / rows.length * 100) : 0;
-                        return <div key={tier}><div className="flex items-center justify-between text-[10px] text-slate-600"><span>{tier}</span><span>{count}</span></div><div className="mt-1 h-2 rounded-full bg-slate-100 overflow-hidden"><div className="h-full rounded-full" style={{ width: `${width}%`, backgroundColor: TIER_COLORS[tier] }} /></div></div>;
-                      })}</div>
-                    </section>
-                    <section className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
-                      <div className="px-3 py-2 border-b border-slate-100"><h3 className="text-sm font-semibold text-slate-900">Top Students</h3><p className="text-[10px] text-slate-500 mt-0.5">Highest overall percentages.</p></div>
-                      {topFive.map((row) => <div key={row.enrollmentNo} className="px-3 py-2.5 flex items-center justify-between gap-3 border-b border-slate-100"><div className="text-[10px] font-semibold text-slate-800 truncate">{row.name}</div><div className="text-sm font-medium" style={{ color: TIER_COLORS[row.tier] }}>{row.overallPct.toFixed(1)}%</div></div>)}
-                    </section>
-                  </aside>
+                <div className="max-h-[560px] overflow-y-auto overflow-x-hidden">
+                  <table className="w-full table-fixed text-[10px] border-collapse">
+                    <colgroup>
+                      {sortDirection !== "none" && <col className="w-[5%]" />}
+                      <col className="w-[18%]" />
+                      {theorySubjects.map((subject) => <col key={subject.id} className="w-[7%]" />)}
+                      <col className="w-[9%]" />
+                      <col className="w-[9%]" />
+                      <col className="w-[8%]" />
+                      <col className="w-[12%]" />
+                    </colgroup>
+                    <thead className="sticky top-0 bg-white z-10">
+                      <tr className="border-b border-slate-200 text-slate-500">
+                        {sortDirection !== "none" && <th className="text-center px-1 py-2">Rank</th>}
+                        <th className="text-left px-2 py-2">Student</th>
+                        {theorySubjects.map((subject) => (
+                          <th key={subject.id} className="text-center px-1 py-2" title={subject.name}>
+                            {subject.code || subject.name}
+                          </th>
+                        ))}
+                        <th className="text-center px-1 py-2">Total</th>
+                        <th className="text-center px-1 py-2">Average</th>
+                        <th className="text-center px-1 py-2">%AGE</th>
+                        <th className="text-center px-1 py-2">Grade</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {filteredRows.map((row, index) => (
+                        <tr
+                          key={row.enrollmentNo}
+                          className="border-b border-slate-100 last:border-0 hover:bg-slate-50/70"
+                        >
+                          {sortDirection !== "none" && (
+                            <td className="text-center px-1 py-2 text-slate-500 tabular-nums">{index + 1}</td>
+                          )}
+                          <td className="px-2 py-2 font-medium text-slate-800 truncate" title={row.name}>
+                            {row.name}
+                          </td>
+                          {row.subjects.map((subject) => (
+                            <td
+                              key={subject.id}
+                              className="text-center px-1 py-2 tabular-nums font-medium"
+                              style={{ color: TIER_COLORS[subject.grade] }}
+                              title={`${formatMark(subject.mark)}/${formatMark(subject.max)} · ${subject.grade}`}
+                            >
+                              {formatMark(subject.mark)}
+                            </td>
+                          ))}
+                          <td className="text-center px-1 py-2 font-semibold tabular-nums text-slate-900">
+                            {formatMark(row.total)}
+                          </td>
+                          <td
+                            className="text-center px-1 py-2 font-semibold tabular-nums"
+                            style={{ color: TIER_COLORS[row.tier] }}
+                            title={`Average out of ${formatMark(row.averageMax)}`}
+                          >
+                            {formatMark(row.average)}
+                          </td>
+                          <td
+                            className="text-center px-1 py-2 font-semibold tabular-nums"
+                            style={{ color: TIER_COLORS[row.tier] }}
+                          >
+                            {row.overallPct.toFixed(0)}%
+                          </td>
+                          <td className="text-center px-1 py-2">
+                            <span
+                              className={`inline-flex rounded-full px-2 py-0.5 text-[9px] font-semibold ${tierClass(row.tier)}`}
+                            >
+                              {row.tier}
+                            </span>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
                 </div>
-              </>
-            ) : (
-              <section className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
-                <div className="px-3 py-2 border-b border-slate-100 flex items-center justify-between"><div><h3 className="text-sm font-semibold text-slate-900">Internal Marks</h3><p className="text-[10px] text-slate-500 mt-0.5">Six theory subjects only.</p></div><select value={markMode} onChange={(e) => setMarkMode(e.target.value as MarkMode)} className="border border-slate-200 rounded-lg px-2 py-1.5 text-[11px] text-slate-700 bg-white"><option value="basic">Basic</option><option value="internal">Internal Marks</option></select></div>
-                <div className="max-h-[560px] overflow-y-auto overflow-x-hidden"><table className="w-full table-fixed border-collapse text-[10px]"><thead className="sticky top-0 bg-white z-10"><tr className="border-b border-slate-200 text-slate-500"><th className="text-left px-2 py-2">Student</th>{theorySubjects.map((subject) => <th key={subject.id} className="text-center px-1 py-2">{subject.code}</th>)}<th className="text-center px-1 py-2">Total</th><th className="text-center px-1 py-2">%AGE</th><th className="text-center px-1 py-2">Grade</th></tr></thead><tbody>{rows.map((row) => <tr key={row.enrollmentNo} className="border-b border-slate-100"><td className="px-2 py-2 font-medium text-slate-800 truncate">{row.name}</td>{row.subjects.map((subject) => <td key={subject.id} className="text-center px-1 py-2 font-medium" style={{ color: TIER_COLORS[tierFor(subject.pct)] }}>{formatMark(subject.mark)}</td>)}<td className="text-center px-1 py-2 font-semibold">{formatMark(row.total)}</td><td className="text-center px-1 py-2 font-semibold" style={{ color: TIER_COLORS[row.tier] }}>{row.overallPct.toFixed(0)}%</td><td className="text-center px-1 py-2"><span className={`inline-flex rounded-full px-2 py-0.5 text-[9px] font-semibold ${tierClass(row.tier)}`}>{row.tier}</span></td></tr>)}</tbody></table></div>
               </section>
-            )}
+
+              <aside className="at-risk-side-stack">
+                <section className="rounded-xl border border-slate-200 bg-white p-3 shadow-sm">
+                  <h3 className="text-sm font-semibold text-slate-900">Distribution</h3>
+                  <p className="mt-0.5 text-[10px] text-slate-500">
+                    Overall performance across the six theory subjects.
+                  </p>
+                  <div className="mt-3 space-y-2">
+                    {["Excellent", "Good", "Needs Attention", "Critical Risk"].map((tier) => {
+                      const count = tierCounts[tier] || 0;
+                      const width = rows.length ? Math.max(2, (count / rows.length) * 100) : 0;
+                      return (
+                        <div key={tier}>
+                          <div className="flex items-center justify-between text-[10px] text-slate-600">
+                            <span>{tier}</span>
+                            <span>{count}</span>
+                          </div>
+                          <div className="mt-1 h-2 rounded-full bg-slate-100 overflow-hidden">
+                            <div
+                              className="h-full rounded-full"
+                              style={{ width: `${width}%`, backgroundColor: TIER_COLORS[tier] }}
+                            />
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </section>
+
+                <section className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
+                  <div className="px-3 py-2 border-b border-slate-100">
+                    <h3 className="text-sm font-semibold text-slate-900">Top Students</h3>
+                    <p className="text-[10px] text-slate-500 mt-0.5">Highest overall percentages.</p>
+                  </div>
+                  {topFive.map((row) => (
+                    <div
+                      key={row.enrollmentNo}
+                      className="px-3 py-2.5 flex items-center justify-between gap-3 border-b border-slate-100"
+                    >
+                      <div className="text-[10px] font-semibold text-slate-800 truncate">{row.name}</div>
+                      <div className="text-sm font-medium" style={{ color: TIER_COLORS[row.tier] }}>
+                        {row.overallPct.toFixed(1)}%
+                      </div>
+                    </div>
+                  ))}
+                </section>
+              </aside>
+            </div>
           </>
         )}
       </main>

From a8b35fdfa5cf2e51654d4f76ace1ff6eec012243 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Mon, 31 Aug 2026 14:13:14 +0530
Subject: [PATCH 73/80] Redesign student report page

---
 .../section-analysis/[sectionId]/students.tsx | 520 ++++++++++++++----
 1 file changed, 407 insertions(+), 113 deletions(-)

diff --git a/pages/section-analysis/[sectionId]/students.tsx b/pages/section-analysis/[sectionId]/students.tsx
index 06e9b5e..3cca2d8 100644
--- a/pages/section-analysis/[sectionId]/students.tsx
+++ b/pages/section-analysis/[sectionId]/students.tsx
@@ -1,37 +1,70 @@
 import { useEffect, useMemo, useState } from "react";
 import { useRouter } from "next/router";
+import {
+  Award,
+  BarChart3,
+  CalendarCheck,
+  ChevronLeft,
+  ChevronRight,
+  GraduationCap,
+  LayoutDashboard,
+  RefreshCw,
+  Search,
+  StickyNote,
+  TrendingDown,
+  TrendingUp,
+  Trophy,
+  UserRound,
+} from "lucide-react";
 
 import AnalysisNav from "../../../components/AnalysisNav";
-import { RawDataButton, StatCard, GradeBadge } from "../../../components/AnalysisWidgets";
+import { GradeBadge, RawDataButton } from "../../../components/AnalysisWidgets";
 
-interface OverallStudent {
+interface SubjectScore {
+  subjectId: string;
+  code: string;
+  name: string;
+  attendance: number;
+  midsem1: number;
+  midsem2: number;
+  combined: 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 gradeTone: Record<string, string> = {
+  Excellent: "bg-blue-50 text-blue-700 border-blue-100",
+  Good: "bg-emerald-50 text-emerald-700 border-emerald-100",
+  "Needs Attention": "bg-amber-50 text-amber-700 border-amber-100",
+  "Critical Risk": "bg-red-50 text-red-600 border-red-100",
+};
+
+const markTone = (pct: number) =>
+  pct >= 80 ? "text-blue-600" : pct >= 60 ? "text-emerald-600" : pct >= 40 ? "text-amber-600" : "text-red-500";
+
+const gradeFromPct = (pct: number) =>
+  pct >= 80 ? "Excellent" : pct >= 60 ? "Good" : pct >= 40 ? "Needs Attention" : "Critical Risk";
+
+const formatNumber = (value: number) => (Number.isInteger(value) ? String(value) : value.toFixed(1));
+
 export default function SectionStudentReportPage() {
   const router = useRouter();
   const { sectionId } = router.query;
@@ -43,13 +76,14 @@ export default function SectionStudentReportPage() {
   const [syncing, setSyncing] = useState(false);
   const [error, setError] = useState("");
   const [search, setSearch] = useState("");
-  const [selectedEnrollment, setSelectedEnrollment] = useState<string>("");
+  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();
@@ -58,9 +92,11 @@ export default function SectionStudentReportPage() {
         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,24 +112,110 @@ 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 filteredStudents = useMemo(() => {
+    const query = search.trim().toLowerCase();
+    return students.filter((student) => {
+      const matchesSearch = !query || student.name.toLowerCase().includes(query) || student.enrollmentNo.includes(query);
+      const matchesGrade = gradeFilter === "All" || student.overallGrade === gradeFilter;
+      return matchesSearch && matchesGrade;
+    });
+  }, [students, 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 = students.find((student) => student.enrollmentNo === selectedEnrollment) || filteredStudents[0];
 
-  const selected = students.find((s) => s.enrollmentNo === selectedEnrollment);
+  const studentStats = useMemo(() => {
+    if (!selected) return null;
+
+    const subjects = selected.subjects.slice(0, 6).map((subject) => {
+      const max = Number(subject.basicMax) || 40;
+      const mark = Number(subject.basicInternal) || 0;
+      const pct = max > 0 ? (mark / max) * 100 : 0;
+      return { ...subject, max, mark, pct, grade: subject.grade || gradeFromPct(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 : 40;
+    const averagePct = averageMax ? (average / averageMax) * 100 : 0;
+
+    const ranked = [...students]
+      .map((student) => {
+        const scores = student.subjects.slice(0, 6);
+        const max = scores.reduce((sum, subject) => sum + (Number(subject.basicMax) || 40), 0);
+        const marks = scores.reduce((sum, subject) => sum + (Number(subject.basicInternal) || 0), 0);
+        return { enrollmentNo: student.enrollmentNo, average: scores.length ? marks / scores.length : 0, pct: max ? (marks / max) * 100 : 0 };
+      })
+      .sort((a, b) => b.average - a.average);
+    const rankIndex = Math.max(0, ranked.findIndex((item) => item.enrollmentNo === selected.enrollmentNo));
+    const percentile = students.length ? Math.round(((students.length - rankIndex) / students.length) * 100) : 0;
+
+    const classAverages = subjects.map((subject) => {
+      const values = students.map((student) => {
+        const match = student.subjects.find((item) => item.subjectId === subject.subjectId || item.code === subject.code);
+        return Number(match?.basicInternal) || 0;
+      });
+      return {
+        ...subject,
+        classAverage: values.length ? values.reduce((sum, value) => sum + value, 0) / values.length : 0,
+      };
+    });
+
+    const highest = [...classAverages].sort((a, b) => b.mark - a.mark)[0];
+    const lowest = [...classAverages].sort((a, b) => a.mark - b.mark)[0];
+
+    const gradeCounts = students.reduce((acc, student) => {
+      const grade = student.overallGrade || gradeFromPct(student.overallPct);
+      acc[grade] = (acc[grade] || 0) + 1;
+      return acc;
+    }, {} as Record<string, number>);
+
+    return {
+      subjects: classAverages,
+      total,
+      totalMax,
+      average,
+      averageMax,
+      averagePct,
+      rank: rankIndex + 1,
+      percentile,
+      highest,
+      lowest,
+      gradeCounts,
+    };
+  }, [selected, students]);
+
+  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);
+  };
+
+  const gradeCount = (grade: string) => students.filter((student) => student.overallGrade === grade).length;
 
   return (
-    <div className="min-h-screen max-w-[1700px] mx-auto px-8 py-10">
-      <div className="flex items-start justify-between mb-6">
+    <div className="min-h-screen max-w-[1900px] mx-auto px-6 lg:px-8 py-7 text-slate-900">
+      <div className="flex items-start justify-between mb-5">
         <div>
-          <h1 className="text-lg font-semibold text-gray-900">Class / Section Analysis</h1>
-          {computedAt && <p className="text-xs text-gray-400 mt-1">Last synced {new Date(computedAt).toLocaleString()}</p>}
+          <h1 className="text-xl lg:text-2xl font-semibold tracking-tight">Class / Section Analysis</h1>
+          {computedAt && <p className="text-xs text-slate-400 mt-1">Last synced {new Date(computedAt).toLocaleString()}</p>}
         </div>
         <div className="flex items-center gap-2">
           <RawDataButton sheetId={sheetId} />
-          <button onClick={() => loadAnalysis(true)} disabled={syncing} className="text-sm bg-gray-900 text-white rounded-lg px-4 py-2 disabled:opacity-50">
+          <button
+            onClick={() => 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"
+          >
+            <RefreshCw size={15} className={syncing ? "animate-spin" : ""} />
             {syncing ? "Syncing..." : "Sync now"}
           </button>
         </div>
@@ -101,101 +223,273 @@ export default function SectionStudentReportPage() {
 
       {typeof sectionId === "string" && <AnalysisNav sectionId={sectionId} />}
 
-      {error && <div className="bg-red-50 border border-red-100 text-red-700 text-sm rounded-lg p-4 mb-6">{error}</div>}
-      {loading && !data && <div className="text-sm text-gray-500 py-10">Loading student report...</div>}
+      {error && <div className="mt-5 rounded-xl border border-red-100 bg-red-50 p-4 text-sm text-red-700">{error}</div>}
+      {loading && !data && <div className="py-14 text-center text-sm text-slate-500">Loading student report...</div>}
 
       {data && (
         <>
-          <div className="mb-6">
-            <h2 className="text-xl font-semibold text-gray-900">Student Report</h2>
-            <p className="text-sm text-gray-500 mt-1">Full report card across all {data.subjects.length} subjects for one student.</p>
+          <div className="mt-5 mb-5">
+            <h2 className="text-xl font-semibold">Student Report</h2>
+            <p className="text-sm text-slate-500 mt-1">Individual performance report across {Math.min(6, data.subjects.length)} theory subjects.</p>
           </div>
 
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-            <section className="bg-white rounded-2xl border border-gray-100 p-6 lg:col-span-1">
-              <input
-                type="text"
-                placeholder="Search by name or enrollment no."
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-                className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm mb-4"
-              />
-              <div className="max-h-[600px] overflow-y-auto space-y-1">
-                {filteredList.map((s) => (
-                  <button
-                    key={s.enrollmentNo}
-                    onClick={() => 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"
-                    }`}
-                  >
-                    {s.name}
-                    <span className={`block text-xs ${s.enrollmentNo === selectedEnrollment ? "text-gray-300" : "text-gray-400"}`}>
-                      {s.enrollmentNo} · {s.overallGrade}
-                    </span>
-                  </button>
-                ))}
-                {filteredList.length === 0 && <p className="text-sm text-gray-400 py-4 text-center">No matches.</p>}
+          <div className="grid grid-cols-1 xl:grid-cols-[300px_minmax(0,1fr)] gap-4">
+            <aside className="rounded-2xl border border-slate-200 bg-white shadow-sm overflow-hidden h-fit xl:sticky xl:top-5">
+              <div className="p-4 border-b border-slate-100">
+                <div className="flex items-center justify-between mb-3">
+                  <h3 className="font-semibold">Students</h3>
+                  <span className="text-xs text-slate-400">{students.length}</span>
+                </div>
+                <div className="relative">
+                  <Search size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
+                  <input
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}
+                    placeholder="Search by name or enrollment no."
+                    className="w-full rounded-lg border border-slate-200 py-2.5 pl-9 pr-3 text-xs outline-none focus:border-violet-400 focus:ring-2 focus:ring-violet-100"
+                  />
+                </div>
+                <div className="flex gap-1.5 mt-3 overflow-x-auto pb-1">
+                  {["All", "Good", "Needs Attention", "Critical Risk"].map((grade) => (
+                    <button
+                      key={grade}
+                      onClick={() => setGradeFilter(grade)}
+                      className={`shrink-0 rounded-full border px-2.5 py-1 text-[10px] font-medium ${
+                        gradeFilter === grade ? "border-violet-200 bg-violet-50 text-violet-700" : "border-slate-200 text-slate-500 hover:bg-slate-50"
+                      }`}
+                    >
+                      {grade === "All" ? `All ${students.length}` : `${grade} ${gradeCount(grade)}`}
+                    </button>
+                  ))}
+                </div>
               </div>
-            </section>
-
-            <section className="bg-white rounded-2xl border border-gray-100 p-6 lg:col-span-2">
-              {!selected && <p className="text-sm text-gray-400">Select a student to see their report card.</p>}
-              {selected && (
-                <div>
-                  <div className="flex items-center justify-between mb-1">
-                    <h3 className="text-lg font-semibold text-gray-900">{selected.name}</h3>
-                    <GradeBadge grade={selected.overallGrade} />
-                  </div>
-                  <p className="text-sm text-gray-400 mb-6">
-                    {selected.enrollmentNo} · {selected.email || "no email on file"}
-                  </p>
-
-                  <div className="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6">
-                    <StatCard label="Overall Attendance" value={`${selected.overallAttendance}%`} />
-                    <StatCard label="Overall Internal %" value={`${selected.overallPct}%`} />
-                    <StatCard label="Overall Grade" value={selected.overallGrade} />
+
+              <div className="max-h-[690px] overflow-y-auto p-2">
+                {filteredStudents.map((student) => {
+                  const avg = student.subjects.slice(0, 6).reduce((sum, subject) => sum + (Number(subject.basicInternal) || 0), 0) / Math.max(1, Math.min(6, student.subjects.length));
+                  return (
+                    <button
+                      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"}`}
+                    >
+                      <div className="flex items-center gap-2.5">
+                        <span className={`grid h-8 w-8 shrink-0 place-items-center rounded-full text-[11px] font-semibold ${student.enrollmentNo === selected?.enrollmentNo ? "bg-white/15 text-white" : "bg-violet-50 text-violet-700"}`}>
+                          {student.name.split(/\s+/).map((part) => part[0]).slice(0, 2).join("").toUpperCase()}
+                        </span>
+                        <span className="min-w-0 flex-1">
+                          <span className="block truncate text-xs font-medium">{student.name}</span>
+                          <span className={`block text-[10px] mt-0.5 ${student.enrollmentNo === selected?.enrollmentNo ? "text-violet-100" : "text-slate-400"}`}>{student.enrollmentNo}</span>
+                        </span>
+                        <span className={`text-xs font-semibold ${student.enrollmentNo === selected?.enrollmentNo ? "text-white" : markTone((avg / 40) * 100)}`}>{formatNumber(avg)}/40</span>
+                      </div>
+                      <div className="mt-2 flex items-center justify-between pl-10">
+                        <span className={`text-[9px] rounded-full border px-1.5 py-0.5 ${student.enrollmentNo === selected?.enrollmentNo ? "border-white/20 bg-white/10 text-white" : gradeTone[student.overallGrade] || "border-slate-200 text-slate-500"}`}>
+                          {student.overallGrade}
+                        </span>
+                        <span className={`text-[10px] ${student.enrollmentNo === selected?.enrollmentNo ? "text-violet-100" : "text-slate-400"}`}>{student.overallAttendance}% attendance</span>
+                      </div>
+                    </button>
+                  );
+                })}
+                {!filteredStudents.length && <p className="py-10 text-center text-xs text-slate-400">No students match the current filters.</p>}
+              </div>
+              <div className="flex items-center justify-center gap-2 border-t border-slate-100 p-3">
+                <button onClick={() => navigateStudent(-1)} className="rounded-lg border border-slate-200 p-1.5 text-slate-500 hover:bg-slate-50"><ChevronLeft size={15} /></button>
+                <span className="text-[10px] text-slate-400">{filteredStudents.length ? "Student list" : "No results"}</span>
+                <button onClick={() => navigateStudent(1)} className="rounded-lg border border-slate-200 p-1.5 text-slate-500 hover:bg-slate-50"><ChevronRight size={15} /></button>
+              </div>
+            </aside>
+
+            {selected && studentStats && (
+              <main className="min-w-0 space-y-4">
+                <section className="rounded-2xl border border-slate-200 bg-white p-5 lg:p-6 shadow-sm">
+                  <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
+                    <div className="flex items-center gap-4 min-w-0">
+                      <div className="grid h-14 w-14 shrink-0 place-items-center rounded-full bg-violet-100 text-lg font-semibold text-violet-700">
+                        {selected.name.split(/\s+/).map((part) => part[0]).slice(0, 2).join("").toUpperCase()}
+                      </div>
+                      <div className="min-w-0">
+                        <h3 className="text-xl font-semibold truncate">{selected.name}</h3>
+                        <p className="text-xs text-slate-400 mt-1 truncate">{selected.enrollmentNo} · {selected.email || "no email on file"}</p>
+                        <div className="flex flex-wrap gap-2 mt-3">
+                          <span className="rounded-lg border border-slate-200 px-2.5 py-1 text-[10px] text-slate-600">Class · B.Tech CSE</span>
+                          <span className="rounded-lg border border-slate-200 px-2.5 py-1 text-[10px] text-slate-600">Section · A</span>
+                          <span className="rounded-lg border border-slate-200 px-2.5 py-1 text-[10px] text-slate-600">Total Students · {students.length}</span>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="flex items-start justify-between lg:justify-end gap-8">
+                      <div>
+                        <p className="text-[10px] text-slate-400">Roll No.</p>
+                        <p className="mt-1 text-sm font-semibold">{selected.enrollmentNo.slice(-2)}</p>
+                      </div>
+                      <div className="text-right">
+                        <GradeBadge grade={selected.overallGrade} />
+                        <p className="text-[10px] text-slate-400 mt-3">Rank (by Average)</p>
+                        <p className="text-sm font-semibold">{studentStats.rank} / {students.length}</p>
+                        <p className="text-[10px] text-slate-400 mt-2">Percentile</p>
+                        <p className="text-sm font-semibold">{studentStats.percentile}th</p>
+                      </div>
+                    </div>
                   </div>
+                </section>
+
+                <section className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-3">
+                  <Metric icon={<BarChart3 size={17} />} label="Average (out of 40)" value={formatNumber(studentStats.average)} sub={`${studentStats.averagePct.toFixed(1)}%`} />
+                  <Metric icon={<Award size={17} />} label="Total (out of 240)" value={formatNumber(studentStats.total)} sub={`${studentStats.averagePct.toFixed(1)}%`} />
+                  <Metric icon={<TrendingUp size={17} />} label="Highest Subject" value={studentStats.highest ? formatNumber(studentStats.highest.mark) : "—"} sub={studentStats.highest?.name || "—"} />
+                  <Metric icon={<TrendingDown size={17} />} label="Lowest Subject" value={studentStats.lowest ? formatNumber(studentStats.lowest.mark) : "—"} sub={studentStats.lowest?.name || "—"} />
+                  <Metric icon={<CalendarCheck size={17} />} label="Overall Attendance" value={`${selected.overallAttendance}%`} sub="Current attendance" />
+                </section>
 
-                  <h4 className="text-sm font-medium text-gray-900 mb-3">Per-Subject Breakdown</h4>
-                  <div className="overflow-x-auto">
-                    <table className="w-full text-sm">
-                      <thead>
-                        <tr className="text-left text-gray-400 border-b border-gray-100">
-                          <th className="py-2 pr-3">Subject</th>
-                          <th className="py-2 pr-3">Attendance</th>
-                          <th className="py-2 pr-3">Midsem 1</th>
-                          <th className="py-2 pr-3">Midsem 2</th>
-                          <th className="py-2 pr-3">Combined</th>
-                          <th className="py-2 pr-3">Internal (Basic)</th>
-                          <th className="py-2">Grade</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {selected.subjects.map((sub) => (
-                          <tr key={sub.subjectId} className="border-b border-gray-50">
-                            <td className="py-2 pr-3 text-gray-900 whitespace-nowrap">{sub.name}</td>
-                            <td className="py-2 pr-3 text-gray-500">{sub.attendance}%</td>
-                            <td className="py-2 pr-3 text-gray-500">{sub.midsem1}</td>
-                            <td className="py-2 pr-3 text-gray-500">{sub.midsem2}</td>
-                            <td className="py-2 pr-3">{sub.combined}</td>
-                            <td className="py-2 pr-3">
-                              {sub.basicInternal}/{sub.basicMax}
-                            </td>
-                            <td className="py-2">
-                              <GradeBadge grade={sub.grade} />
-                            </td>
+                <div className="grid grid-cols-1 2xl:grid-cols-[minmax(0,1fr)_290px] gap-4">
+                  <section className="rounded-2xl border border-slate-200 bg-white shadow-sm overflow-hidden">
+                    <div className="px-5 py-4 border-b border-slate-100">
+                      <h3 className="font-semibold">Subject Performance <span className="text-xs font-normal text-slate-400">(Theory Subjects)</span></h3>
+                      <p className="text-[10px] text-slate-400 mt-1">Marks are shown out of 40 and compared with the class average.</p>
+                    </div>
+                    <div className="overflow-x-auto">
+                      <table className="w-full min-w-[760px] text-xs">
+                        <thead>
+                          <tr className="border-b border-slate-100 text-[10px] text-slate-400">
+                            <th className="px-5 py-3 text-left font-medium">Subject</th>
+                            <th className="px-2 py-3 text-right font-medium">Marks / 40</th>
+                            <th className="px-2 py-3 text-right font-medium">%</th>
+                            <th className="px-2 py-3 text-left font-medium">Grade</th>
+                            <th className="px-2 py-3 text-left font-medium">Performance vs Class Avg</th>
+                            <th className="px-5 py-3 text-right font-medium">Class Avg</th>
                           </tr>
+                        </thead>
+                        <tbody>
+                          {studentStats.subjects.map((subject) => {
+                            const difference = subject.mark - subject.classAverage;
+                            const maxDifference = 20;
+                            const width = Math.min(100, (Math.abs(difference) / maxDifference) * 100);
+                            return (
+                              <tr key={subject.subjectId} className="border-b border-slate-50 last:border-0">
+                                <td className="px-5 py-3 font-medium text-slate-800 max-w-[230px]">{subject.name}</td>
+                                <td className={`px-2 py-3 text-right font-semibold ${markTone(subject.pct)}`}>{formatNumber(subject.mark)}</td>
+                                <td className="px-2 py-3 text-right text-slate-500">{subject.pct.toFixed(1)}%</td>
+                                <td className="px-2 py-3"><GradeBadge grade={subject.grade} /></td>
+                                <td className="px-2 py-3 min-w-[230px]">
+                                  <div className="flex items-center gap-2">
+                                    <span className={`w-12 text-right text-[10px] font-medium ${difference >= 0 ? "text-emerald-600" : "text-red-500"}`}>{difference >= 0 ? "+" : ""}{difference.toFixed(1)}</span>
+                                    <div className="h-1.5 flex-1 rounded-full bg-slate-100 overflow-hidden">
+                                      <div className={`h-full rounded-full ${difference >= 0 ? "bg-emerald-400" : "bg-red-400"}`} style={{ width: `${Math.max(3, width / 2)}%`, marginLeft: difference >= 0 ? "50%" : `${50 - width / 2}%` }} />
+                                    </div>
+                                  </div>
+                                </td>
+                                <td className="px-5 py-3 text-right text-slate-500">{formatNumber(subject.classAverage)}</td>
+                              </tr>
+                            );
+                          })}
+                        </tbody>
+                      </table>
+                    </div>
+                    <div className="flex items-center gap-4 px-5 py-3 text-[9px] text-slate-400 border-t border-slate-100">
+                      <span className="inline-flex items-center gap-1"><span className="h-1.5 w-1.5 rounded-full bg-red-400" />Below class average</span>
+                      <span className="inline-flex items-center gap-1"><span className="h-1.5 w-1.5 rounded-full bg-emerald-400" />Above class average</span>
+                    </div>
+                  </section>
+
+                  <aside className="space-y-4">
+                    <SummaryCard title="Grade Summary">
+                      <div className="flex items-center gap-5">
+                        <Donut counts={studentStats.gradeCounts} total={students.length} />
+                        <div className="space-y-2 text-[10px] flex-1">
+                          {["Good", "Needs Attention", "Critical Risk"].map((grade) => (
+                            <div key={grade} className="flex items-center justify-between gap-2">
+                              <span className="flex items-center gap-1.5"><span className={`h-2 w-2 rounded-full ${grade === "Good" ? "bg-emerald-500" : grade === "Needs Attention" ? "bg-amber-500" : "bg-red-500"}`} />{grade}</span>
+                              <span className="text-slate-500">{studentStats.gradeCounts[grade] || 0} ({students.length ? (((studentStats.gradeCounts[grade] || 0) / students.length) * 100).toFixed(1) : 0}%)</span>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    </SummaryCard>
+
+                    <SummaryCard title="Attendance Overview">
+                      <div className="flex items-end justify-between">
+                        <div><p className="text-[10px] text-slate-400">Overall Attendance</p><p className="text-xl font-semibold mt-1">{selected.overallAttendance}%</p></div>
+                        <span className={`rounded-full px-2 py-1 text-[9px] ${selected.overallAttendance >= 75 ? "bg-emerald-50 text-emerald-700" : "bg-amber-50 text-amber-700"}`}>{selected.overallAttendance >= 75 ? "On track" : "Needs attention"}</span>
+                      </div>
+                      <div className="mt-4 h-2 rounded-full bg-slate-100 overflow-hidden"><div className="h-full rounded-full bg-violet-500" style={{ width: `${Math.min(100, selected.overallAttendance)}%` }} /></div>
+                      <div className="grid grid-cols-2 gap-3 mt-4 text-[10px]"><div><span className="text-slate-400">Subject average</span><p className="font-medium mt-1">{studentStats.subjects.length ? (studentStats.subjects.reduce((sum, s) => sum + s.attendance, 0) / studentStats.subjects.length).toFixed(1) : 0}%</p></div><div><span className="text-slate-400">Subjects</span><p className="font-medium mt-1">{studentStats.subjects.length}</p></div></div>
+                    </SummaryCard>
+
+                    <SummaryCard title="Assessment Snapshot">
+                      <div className="space-y-3">
+                        {[
+                          ["Midsem 1", studentStats.subjects.reduce((sum, s) => sum + (Number(s.midsem1) || 0), 0) / Math.max(1, studentStats.subjects.length)],
+                          ["Midsem 2", studentStats.subjects.reduce((sum, s) => sum + (Number(s.midsem2) || 0), 0) / Math.max(1, studentStats.subjects.length)],
+                          ["Combined", studentStats.subjects.reduce((sum, s) => sum + (Number(s.combined) || 0), 0) / Math.max(1, studentStats.subjects.length)],
+                        ].map(([label, value]) => (
+                          <div key={String(label)} className="flex items-center justify-between"><span className="text-[10px] text-slate-500">{label}</span><span className="text-xs font-semibold">{Number(value).toFixed(1)}</span></div>
                         ))}
-                      </tbody>
-                    </table>
+                      </div>
+                    </SummaryCard>
+                  </aside>
+                </div>
+
+                <section className="rounded-2xl border border-violet-100 bg-violet-50/60 p-4 flex flex-col md:flex-row md:items-center justify-between gap-3">
+                  <div className="flex items-start gap-3">
+                    <span className="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-white text-violet-600 border border-violet-100"><StickyNote size={16} /></span>
+                    <div><h4 className="text-xs font-semibold">Teacher's Notes</h4><p className="text-[10px] text-slate-500 mt-1">Performance summary is generated from the synced academic and attendance data. Add teacher observations here when follow-up is required.</p></div>
                   </div>
+                  <button className="shrink-0 rounded-lg border border-violet-200 bg-white px-3 py-2 text-[10px] font-semibold text-violet-700 hover:bg-violet-50">Add Note</button>
+                </section>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div className="rounded-2xl border border-slate-200 bg-white p-4 text-xs"><div className="flex items-center gap-2 font-semibold"><Trophy size={15} className="text-amber-500" />Class position</div><p className="text-[10px] text-slate-400 mt-2">{selected.name} ranks {studentStats.rank} out of {students.length} students by average theory marks.</p></div>
+                  <div className="rounded-2xl border border-slate-200 bg-white p-4 text-xs"><div className="flex items-center gap-2 font-semibold"><UserRound size={15} className="text-violet-500" />Report scope</div><p className="text-[10px] text-slate-400 mt-2">Six theory subjects only; no laboratory subjects are included in the academic average.</p></div>
                 </div>
-              )}
-            </section>
+              </main>
+            )}
           </div>
         </>
       )}
     </div>
   );
 }
+
+function Metric({ icon, label, value, sub }: { icon: React.ReactNode; label: string; value: string; sub: string }) {
+  return (
+    <div className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm min-w-0">
+      <div className="flex items-center gap-2 text-slate-500"><span className="grid h-8 w-8 place-items-center rounded-lg bg-slate-50 text-violet-600">{icon}</span><span className="text-[10px] truncate">{label}</span></div>
+      <p className="text-xl font-semibold mt-3 truncate">{value}</p>
+      <p className="text-[10px] text-slate-400 mt-1 truncate">{sub}</p>
+    </div>
+  );
+}
+
+function SummaryCard({ title, children }: { title: string; children: React.ReactNode }) {
+  return <section className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm"><h3 className="text-sm font-semibold mb-4">{title}</h3>{children}</section>;
+}
+
+function Donut({ counts, total }: { counts: Record<string, number>; total: number }) {
+  const good = total ? (counts.Good || 0) / total : 0;
+  const attention = total ? (counts["Needs Attention"] || 0) / total : 0;
+  const critical = total ? (counts["Critical Risk"] || 0) / total : 0;
+  const radius = 34;
+  const circumference = 2 * Math.PI * radius;
+  const segments = [
+    { value: good, className: "stroke-emerald-500" },
+    { value: attention, className: "stroke-amber-500" },
+    { value: critical, className: "stroke-red-500" },
+  ];
+  let offset = 0;
+  return (
+    <div className="relative h-[82px] w-[82px] shrink-0">
+      <svg viewBox="0 0 82 82" className="h-full w-full -rotate-90">
+        <circle cx="41" cy="41" r={radius} fill="none" strokeWidth="10" className="stroke-slate-100" />
+        {segments.map((segment, index) => {
+          const length = segment.value * circumference;
+          const dashOffset = -offset;
+          offset += length;
+          return <circle key={index} cx="41" cy="41" r={radius} fill="none" strokeWidth="10" strokeDasharray={`${length} ${circumference - length}`} strokeDashoffset={dashOffset} className={segment.className} />;
+        })}
+      </svg>
+      <span className="absolute inset-0 grid place-items-center text-xs font-semibold">{total}</span>
+    </div>
+  );
+}

From 221623c822e9d54d3a2827a538a4ebab2f342eab Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Mon, 31 Aug 2026 14:14:12 +0530
Subject: [PATCH 74/80] Polish student report data binding

---
 pages/section-analysis/[sectionId]/students.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/pages/section-analysis/[sectionId]/students.tsx b/pages/section-analysis/[sectionId]/students.tsx
index 3cca2d8..38c4596 100644
--- a/pages/section-analysis/[sectionId]/students.tsx
+++ b/pages/section-analysis/[sectionId]/students.tsx
@@ -6,8 +6,6 @@ import {
   CalendarCheck,
   ChevronLeft,
   ChevronRight,
-  GraduationCap,
-  LayoutDashboard,
   RefreshCw,
   Search,
   StickyNote,
@@ -313,16 +311,16 @@ export default function SectionStudentReportPage() {
                         <h3 className="text-xl font-semibold truncate">{selected.name}</h3>
                         <p className="text-xs text-slate-400 mt-1 truncate">{selected.enrollmentNo} · {selected.email || "no email on file"}</p>
                         <div className="flex flex-wrap gap-2 mt-3">
-                          <span className="rounded-lg border border-slate-200 px-2.5 py-1 text-[10px] text-slate-600">Class · B.Tech CSE</span>
-                          <span className="rounded-lg border border-slate-200 px-2.5 py-1 text-[10px] text-slate-600">Section · A</span>
+                          <span className="rounded-lg border border-slate-200 px-2.5 py-1 text-[10px] text-slate-600">Section · Current</span>
                           <span className="rounded-lg border border-slate-200 px-2.5 py-1 text-[10px] text-slate-600">Total Students · {students.length}</span>
+                          <span className="rounded-lg border border-slate-200 px-2.5 py-1 text-[10px] text-slate-600">Theory Subjects · {studentStats.subjects.length}</span>
                         </div>
                       </div>
                     </div>
                     <div className="flex items-start justify-between lg:justify-end gap-8">
                       <div>
-                        <p className="text-[10px] text-slate-400">Roll No.</p>
-                        <p className="mt-1 text-sm font-semibold">{selected.enrollmentNo.slice(-2)}</p>
+                        <p className="text-[10px] text-slate-400">Enrollment</p>
+                        <p className="mt-1 text-sm font-semibold">{selected.enrollmentNo}</p>
                       </div>
                       <div className="text-right">
                         <GradeBadge grade={selected.overallGrade} />

From b7a1e4df57586fc1f6a95ef345f87f127c6dc608 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Mon, 31 Aug 2026 23:48:05 +0530
Subject: [PATCH 75/80] Fix student report internal mark data

---
 .../analysis/section/[sectionId]/overall.ts   | 58 ++++++++-----------
 1 file changed, 24 insertions(+), 34 deletions(-)

diff --git a/pages/api/analysis/section/[sectionId]/overall.ts b/pages/api/analysis/section/[sectionId]/overall.ts
index 5621b95..abc18a6 100644
--- a/pages/api/analysis/section/[sectionId]/overall.ts
+++ b/pages/api/analysis/section/[sectionId]/overall.ts
@@ -15,10 +15,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   let resolvedSection = await prisma.section.findUnique({ where: { id: requestedId } });
   if (!resolvedSection) {
     if (role === "ADMIN") {
-      resolvedSection = await prisma.section.findFirst({
-        where: { classId: requestedId },
-        orderBy: { name: "asc" },
-      });
+      resolvedSection = await prisma.section.findFirst({ where: { classId: requestedId }, orderBy: { name: "asc" } });
     } else {
       resolvedSection = await prisma.section.findFirst({
         where: {
@@ -33,22 +30,14 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     }
   }
 
-  if (!resolvedSection) {
-    return res.status(404).json({ error: "Section not found or not assigned to you" });
-  }
+  if (!resolvedSection) return res.status(404).json({ error: "Section not found or not assigned to you" });
 
   const sectionId = resolvedSection.id;
   const allowed = await assertTeacherCanViewSection(userId, role, sectionId);
   if (!allowed) return res.status(403).json({ error: "Not authorized for this section" });
 
-  // Class Overall / At Risk intentionally uses the six theory subjects only.
-  const subjects = await prisma.subject.findMany({
-    where: { sectionId, type: "THEORY" },
-    orderBy: { code: "asc" },
-  });
-  if (subjects.length === 0) {
-    return res.status(404).json({ error: "No theory subjects exist for this section yet" });
-  }
+  const subjects = await prisma.subject.findMany({ where: { sectionId, type: "THEORY" }, orderBy: { code: "asc" } });
+  if (subjects.length === 0) return res.status(404).json({ error: "No theory subjects exist for this section yet" });
 
   const link = await prisma.sheetLink.findUnique({ where: { sectionId } });
   if (!link) return res.status(404).json({ error: "No combined Google Sheet linked to this section yet" });
@@ -78,12 +67,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
             }))
           : [],
       };
-      return res.status(200).json({
-        cached: true,
-        computedAt: latest.computedAt,
-        sheetId: link.sheetId,
-        data,
-      });
+      return res.status(200).json({ cached: true, computedAt: latest.computedAt, sheetId: link.sheetId, data });
     }
   }
 
@@ -103,6 +87,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         midsem1: number;
         midsem2: number;
         combined: number;
+        assignment: { submitted: number; total: number; mark: number };
+        presentation: { raw: number; mark: number };
         basicInternal: number;
         moderatedInternal: number;
         basicMax: number;
@@ -116,15 +102,13 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
       analysis.students.forEach((s) => {
         if (!studentMap.has(s.enrollmentNo)) {
-          studentMap.set(s.enrollmentNo, {
-            enrollmentNo: s.enrollmentNo,
-            name: s.name,
-            email: s.email,
-            subjects: [],
-          });
+          studentMap.set(s.enrollmentNo, { enrollmentNo: s.enrollmentNo, name: s.name, email: s.email, subjects: [] });
         }
 
-        const basicMax = (s.assignment.total || 0) + 10 + 30;
+        const assignmentMark = s.assignment.total > 0 ? round1((s.assignment.submitted / s.assignment.total) * 5) : 0;
+        const presentationMark = round1((s.presentation / 10) * 5);
+        const basicMax = 40;
+
         studentMap.get(s.enrollmentNo)!.subjects.push({
           subjectId: subject.id,
           code: subject.code,
@@ -133,25 +117,31 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
           midsem1: s.midsem.first,
           midsem2: s.midsem.second,
           combined: s.midsem.combined,
+          assignment: { submitted: s.assignment.submitted, total: s.assignment.total, mark: assignmentMark },
+          presentation: { raw: s.presentation, mark: presentationMark },
           basicInternal: s.internalMarks.basic,
           moderatedInternal: s.internalMarks.moderated,
           basicMax,
-          grade: s.midsem.grade,
+          grade: gradeFor(s.internalMarks.basic, basicMax),
         });
       });
     });
 
     const students = Array.from(studentMap.values()).map((student) => {
-      const percentages = student.subjects.map((sub) => sub.basicMax > 0 ? (sub.basicInternal / sub.basicMax) * 100 : 0);
-      const overallPct = percentages.length ? round1(percentages.reduce((a, b) => a + b, 0) / percentages.length) : 0;
-      const attendancePercentages = student.subjects.map((sub) => sub.attendance);
-      const overallAttendance = attendancePercentages.length ? round1(attendancePercentages.reduce((a, b) => a + b, 0) / attendancePercentages.length) : 0;
+      const sixSubjects = student.subjects.slice(0, 6);
+      const total = sixSubjects.reduce((sum, sub) => sum + sub.basicInternal, 0);
+      const average = sixSubjects.length ? total / sixSubjects.length : 0;
+      const overallPct = round1((average / 40) * 100);
+      const attendancePercentages = sixSubjects.map((sub) => sub.attendance);
+      const overallAttendance = attendancePercentages.length
+        ? round1(attendancePercentages.reduce((a, b) => a + b, 0) / attendancePercentages.length)
+        : 0;
 
       return {
         ...student,
         overallPct,
         overallAttendance,
-        overallGrade: gradeFor(overallPct, 100),
+        overallGrade: gradeFor(average, 40),
       };
     });
 

From 4a232a06bfcb206da0acae74527283b4b5e0d6f5 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Mon, 31 Aug 2026 23:49:07 +0530
Subject: [PATCH 76/80] Redesign Class Analysis student report

---
 .../section-analysis/[sectionId]/students.tsx | 480 +++++++++---------
 1 file changed, 234 insertions(+), 246 deletions(-)

diff --git a/pages/section-analysis/[sectionId]/students.tsx b/pages/section-analysis/[sectionId]/students.tsx
index 38c4596..d383488 100644
--- a/pages/section-analysis/[sectionId]/students.tsx
+++ b/pages/section-analysis/[sectionId]/students.tsx
@@ -8,15 +8,26 @@ import {
   ChevronRight,
   RefreshCw,
   Search,
-  StickyNote,
   TrendingDown,
   TrendingUp,
-  Trophy,
-  UserRound,
 } from "lucide-react";
 
 import AnalysisNav from "../../../components/AnalysisNav";
-import { GradeBadge, RawDataButton } from "../../../components/AnalysisWidgets";
+import { RawDataButton } from "../../../components/AnalysisWidgets";
+
+const SUBJECT_COUNT = 6;
+const SUBJECT_MAX = 40;
+const TOTAL_MAX = SUBJECT_COUNT * SUBJECT_MAX;
+
+const GRADE_ORDER = ["Excellent", "Good", "Needs Attention", "Critical Risk"] as const;
+type Grade = (typeof GRADE_ORDER)[number];
+
+const GRADE_TONE: Record<Grade, { text: string; bg: string; border: string; dot: string }> = {
+  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;
@@ -26,6 +37,8 @@ interface SubjectScore {
   midsem1: number;
   midsem2: number;
   combined: number;
+  assignment?: { submitted: number; total: number; mark: number };
+  presentation?: { raw: number; mark: number };
   basicInternal: number;
   moderatedInternal: number;
   basicMax: number;
@@ -48,20 +61,34 @@ interface OverallData {
   classAverageOverallPct: number;
 }
 
-const gradeTone: Record<string, string> = {
-  Excellent: "bg-blue-50 text-blue-700 border-blue-100",
-  Good: "bg-emerald-50 text-emerald-700 border-emerald-100",
-  "Needs Attention": "bg-amber-50 text-amber-700 border-amber-100",
-  "Critical Risk": "bg-red-50 text-red-600 border-red-100",
-};
+const formatNumber = (value: number) => (Number.isInteger(value) ? String(value) : value.toFixed(1));
 
-const markTone = (pct: number) =>
-  pct >= 80 ? "text-blue-600" : pct >= 60 ? "text-emerald-600" : pct >= 40 ? "text-amber-600" : "text-red-500";
+const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
 
-const gradeFromPct = (pct: number) =>
-  pct >= 80 ? "Excellent" : pct >= 60 ? "Good" : pct >= 40 ? "Needs Attention" : "Critical Risk";
+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;
+}
 
-const formatNumber = (value: number) => (Number.isInteger(value) ? String(value) : value.toFixed(1));
+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 (
+    <span className={`inline-flex items-center gap-1.5 rounded-full border ${tone.border} ${tone.bg} ${tone.text} ${large ? "px-3 py-1.5 text-xs" : "px-2.5 py-1 text-[10px]"} font-semibold`}>
+      <span className={`h-1.5 w-1.5 rounded-full ${tone.dot}`} />
+      {grade}
+    </span>
+  );
+}
 
 export default function SectionStudentReportPage() {
   const router = useRouter();
@@ -74,7 +101,7 @@ export default function SectionStudentReportPage() {
   const [syncing, setSyncing] = useState(false);
   const [error, setError] = useState("");
   const [search, setSearch] = useState("");
-  const [gradeFilter, setGradeFilter] = useState("All");
+  const [gradeFilter, setGradeFilter] = useState<Grade | "All">("All");
   const [selectedEnrollment, setSelectedEnrollment] = useState("");
 
   async function loadAnalysis(sync = false) {
@@ -89,6 +116,16 @@ 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 || "");
       setSheetId(json.sheetId || null);
@@ -110,14 +147,19 @@ export default function SectionStudentReportPage() {
 
   const students = data?.students || [];
 
+  const studentsWithGrades = useMemo(
+    () => students.map((student) => ({ ...student, reportAverage: studentAverage(student), reportGrade: gradeFromAverage(studentAverage(student)) })),
+    [students]
+  );
+
   const filteredStudents = useMemo(() => {
     const query = search.trim().toLowerCase();
-    return students.filter((student) => {
+    return studentsWithGrades.filter((student) => {
       const matchesSearch = !query || student.name.toLowerCase().includes(query) || student.enrollmentNo.includes(query);
-      const matchesGrade = gradeFilter === "All" || student.overallGrade === gradeFilter;
+      const matchesGrade = gradeFilter === "All" || student.reportGrade === gradeFilter;
       return matchesSearch && matchesGrade;
     });
-  }, [students, search, gradeFilter]);
+  }, [studentsWithGrades, search, gradeFilter]);
 
   useEffect(() => {
     if (!selectedEnrollment && students[0]) setSelectedEnrollment(students[0].enrollmentNo);
@@ -126,69 +168,60 @@ export default function SectionStudentReportPage() {
     }
   }, [students, selectedEnrollment]);
 
-  const selected = students.find((student) => student.enrollmentNo === selectedEnrollment) || filteredStudents[0];
+  const selected = studentsWithGrades.find((student) => student.enrollmentNo === selectedEnrollment) || filteredStudents[0];
 
   const studentStats = useMemo(() => {
     if (!selected) return null;
 
-    const subjects = selected.subjects.slice(0, 6).map((subject) => {
-      const max = Number(subject.basicMax) || 40;
-      const mark = Number(subject.basicInternal) || 0;
-      const pct = max > 0 ? (mark / max) * 100 : 0;
-      return { ...subject, max, mark, pct, grade: subject.grade || gradeFromPct(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 : 40;
-    const averagePct = averageMax ? (average / averageMax) * 100 : 0;
-
-    const ranked = [...students]
-      .map((student) => {
-        const scores = student.subjects.slice(0, 6);
-        const max = scores.reduce((sum, subject) => sum + (Number(subject.basicMax) || 40), 0);
-        const marks = scores.reduce((sum, subject) => sum + (Number(subject.basicInternal) || 0), 0);
-        return { enrollmentNo: student.enrollmentNo, average: scores.length ? marks / scores.length : 0, pct: max ? (marks / max) * 100 : 0 };
-      })
-      .sort((a, b) => b.average - a.average);
-    const rankIndex = Math.max(0, ranked.findIndex((item) => item.enrollmentNo === selected.enrollmentNo));
-    const percentile = students.length ? Math.round(((students.length - rankIndex) / students.length) * 100) : 0;
-
-    const classAverages = subjects.map((subject) => {
-      const values = students.map((student) => {
-        const match = student.subjects.find((item) => item.subjectId === subject.subjectId || item.code === subject.code);
-        return Number(match?.basicInternal) || 0;
-      });
+    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 internal = Number(subject.basicInternal) || assignment + presentation + attendance + midsem1 + midsem2;
       return {
         ...subject,
-        classAverage: values.length ? values.reduce((sum, value) => sum + value, 0) / values.length : 0,
+        assignment,
+        presentation,
+        attendanceMark: attendance,
+        midsem1Mark: midsem1,
+        midsem2Mark: midsem2,
+        internal,
+        grade: gradeFromAverage(internal),
       };
     });
 
-    const highest = [...classAverages].sort((a, b) => b.mark - a.mark)[0];
-    const lowest = [...classAverages].sort((a, b) => a.mark - b.mark)[0];
+    const total = subjects.reduce((sum, subject) => sum + subject.internal, 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 percentile = students.length ? Math.round(((students.length - rankIndex) / students.length) * 100) : 0;
 
-    const gradeCounts = students.reduce((acc, student) => {
-      const grade = student.overallGrade || gradeFromPct(student.overallPct);
-      acc[grade] = (acc[grade] || 0) + 1;
+    const gradeCounts = studentsWithGrades.reduce((acc, student) => {
+      acc[student.reportGrade] = (acc[student.reportGrade] || 0) + 1;
       return acc;
-    }, {} as Record<string, number>);
+    }, {} as Record<Grade, number>);
+
+    const highest = [...subjects].sort((a, b) => b.internal - a.internal)[0];
+    const lowest = [...subjects].sort((a, b) => a.internal - b.internal)[0];
 
     return {
-      subjects: classAverages,
+      subjects,
       total,
-      totalMax,
       average,
-      averageMax,
-      averagePct,
+      averagePct: (average / SUBJECT_MAX) * 100,
       rank: rankIndex + 1,
       percentile,
+      gradeCounts,
       highest,
       lowest,
-      gradeCounts,
+      grade: gradeFromAverage(average),
     };
-  }, [selected, students]);
+  }, [selected, studentsWithGrades, students.length]);
 
   const navigateStudent = (direction: -1 | 1) => {
     if (!filteredStudents.length || !selected) return;
@@ -197,7 +230,12 @@ export default function SectionStudentReportPage() {
     setSelectedEnrollment(filteredStudents[nextIndex].enrollmentNo);
   };
 
-  const gradeCount = (grade: string) => students.filter((student) => student.overallGrade === grade).length;
+  const classGradeCounts = useMemo(() => {
+    return GRADE_ORDER.reduce((acc, grade) => {
+      acc[grade] = studentsWithGrades.filter((student) => student.reportGrade === grade).length;
+      return acc;
+    }, {} as Record<Grade, number>);
+  }, [studentsWithGrades]);
 
   return (
     <div className="min-h-screen max-w-[1900px] mx-auto px-6 lg:px-8 py-7 text-slate-900">
@@ -228,68 +266,55 @@ export default function SectionStudentReportPage() {
         <>
           <div className="mt-5 mb-5">
             <h2 className="text-xl font-semibold">Student Report</h2>
-            <p className="text-sm text-slate-500 mt-1">Individual performance report across {Math.min(6, data.subjects.length)} theory subjects.</p>
+            <p className="text-sm text-slate-500 mt-1">Individual performance report across {Math.min(SUBJECT_COUNT, data.subjects.length)} theory subjects.</p>
           </div>
 
-          <div className="grid grid-cols-1 xl:grid-cols-[300px_minmax(0,1fr)] gap-4">
-            <aside className="rounded-2xl border border-slate-200 bg-white shadow-sm overflow-hidden h-fit xl:sticky xl:top-5">
+          <div className="grid grid-cols-1 xl:grid-cols-[290px_minmax(0,1fr)] gap-4 items-start">
+            <aside className="rounded-2xl border border-slate-200 bg-white shadow-sm overflow-hidden xl:sticky xl:top-5">
               <div className="p-4 border-b border-slate-100">
                 <div className="flex items-center justify-between mb-3">
                   <h3 className="font-semibold">Students</h3>
                   <span className="text-xs text-slate-400">{students.length}</span>
                 </div>
                 <div className="relative">
-                  <Search size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
+                  <Search size={15} className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" aria-hidden="true" />
                   <input
                     value={search}
                     onChange={(e) => setSearch(e.target.value)}
                     placeholder="Search by name or enrollment no."
-                    className="w-full rounded-lg border border-slate-200 py-2.5 pl-9 pr-3 text-xs outline-none focus:border-violet-400 focus:ring-2 focus:ring-violet-100"
+                    style={{ paddingLeft: 38 }}
+                    className="w-full rounded-lg border border-slate-200 py-2.5 pr-3 text-xs outline-none focus:border-violet-400 focus:ring-2 focus:ring-violet-100"
                   />
                 </div>
                 <div className="flex gap-1.5 mt-3 overflow-x-auto pb-1">
-                  {["All", "Good", "Needs Attention", "Critical Risk"].map((grade) => (
-                    <button
+                  <FilterPill active={gradeFilter === "All"} onClick={() => setGradeFilter("All")} label={`All ${students.length}`} />
+                  {GRADE_ORDER.map((grade) => (
+                    <FilterPill
                       key={grade}
+                      active={gradeFilter === grade}
                       onClick={() => setGradeFilter(grade)}
-                      className={`shrink-0 rounded-full border px-2.5 py-1 text-[10px] font-medium ${
-                        gradeFilter === grade ? "border-violet-200 bg-violet-50 text-violet-700" : "border-slate-200 text-slate-500 hover:bg-slate-50"
-                      }`}
-                    >
-                      {grade === "All" ? `All ${students.length}` : `${grade} ${gradeCount(grade)}`}
-                    </button>
+                      label={`${grade} ${classGradeCounts[grade] || 0}`}
+                    />
                   ))}
                 </div>
               </div>
 
-              <div className="max-h-[690px] overflow-y-auto p-2">
-                {filteredStudents.map((student) => {
-                  const avg = student.subjects.slice(0, 6).reduce((sum, subject) => sum + (Number(subject.basicInternal) || 0), 0) / Math.max(1, Math.min(6, student.subjects.length));
-                  return (
-                    <button
-                      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"}`}
-                    >
-                      <div className="flex items-center gap-2.5">
-                        <span className={`grid h-8 w-8 shrink-0 place-items-center rounded-full text-[11px] font-semibold ${student.enrollmentNo === selected?.enrollmentNo ? "bg-white/15 text-white" : "bg-violet-50 text-violet-700"}`}>
-                          {student.name.split(/\s+/).map((part) => part[0]).slice(0, 2).join("").toUpperCase()}
-                        </span>
-                        <span className="min-w-0 flex-1">
-                          <span className="block truncate text-xs font-medium">{student.name}</span>
-                          <span className={`block text-[10px] mt-0.5 ${student.enrollmentNo === selected?.enrollmentNo ? "text-violet-100" : "text-slate-400"}`}>{student.enrollmentNo}</span>
-                        </span>
-                        <span className={`text-xs font-semibold ${student.enrollmentNo === selected?.enrollmentNo ? "text-white" : markTone((avg / 40) * 100)}`}>{formatNumber(avg)}/40</span>
-                      </div>
-                      <div className="mt-2 flex items-center justify-between pl-10">
-                        <span className={`text-[9px] rounded-full border px-1.5 py-0.5 ${student.enrollmentNo === selected?.enrollmentNo ? "border-white/20 bg-white/10 text-white" : gradeTone[student.overallGrade] || "border-slate-200 text-slate-500"}`}>
-                          {student.overallGrade}
-                        </span>
-                        <span className={`text-[10px] ${student.enrollmentNo === selected?.enrollmentNo ? "text-violet-100" : "text-slate-400"}`}>{student.overallAttendance}% attendance</span>
-                      </div>
-                    </button>
-                  );
-                })}
+              <div className="max-h-[650px] overflow-y-auto p-2">
+                {filteredStudents.map((student) => (
+                  <button
+                    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"}`}
+                  >
+                    <div className="flex items-center gap-3">
+                      <span className="min-w-0 flex-1">
+                        <span className="block truncate text-xs font-semibold">{student.name}</span>
+                        <span className={`block text-[10px] mt-1 ${student.enrollmentNo === selected?.enrollmentNo ? "text-violet-100" : "text-slate-400"}`}>{student.enrollmentNo}</span>
+                      </span>
+                      <GradePill grade={student.reportGrade} />
+                    </div>
+                  </button>
+                ))}
                 {!filteredStudents.length && <p className="py-10 text-center text-xs text-slate-400">No students match the current filters.</p>}
               </div>
               <div className="flex items-center justify-center gap-2 border-t border-slate-100 p-3">
@@ -302,145 +327,116 @@ export default function SectionStudentReportPage() {
             {selected && studentStats && (
               <main className="min-w-0 space-y-4">
                 <section className="rounded-2xl border border-slate-200 bg-white p-5 lg:p-6 shadow-sm">
-                  <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
+                  <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-5">
                     <div className="flex items-center gap-4 min-w-0">
                       <div className="grid h-14 w-14 shrink-0 place-items-center rounded-full bg-violet-100 text-lg font-semibold text-violet-700">
                         {selected.name.split(/\s+/).map((part) => part[0]).slice(0, 2).join("").toUpperCase()}
                       </div>
                       <div className="min-w-0">
                         <h3 className="text-xl font-semibold truncate">{selected.name}</h3>
-                        <p className="text-xs text-slate-400 mt-1 truncate">{selected.enrollmentNo} · {selected.email || "no email on file"}</p>
-                        <div className="flex flex-wrap gap-2 mt-3">
-                          <span className="rounded-lg border border-slate-200 px-2.5 py-1 text-[10px] text-slate-600">Section · Current</span>
-                          <span className="rounded-lg border border-slate-200 px-2.5 py-1 text-[10px] text-slate-600">Total Students · {students.length}</span>
-                          <span className="rounded-lg border border-slate-200 px-2.5 py-1 text-[10px] text-slate-600">Theory Subjects · {studentStats.subjects.length}</span>
-                        </div>
+                        <p className="text-xs text-slate-400 mt-1 truncate">{selected.enrollmentNo}{selected.email ? ` · ${selected.email}` : ""}</p>
                       </div>
                     </div>
-                    <div className="flex items-start justify-between lg:justify-end gap-8">
+                    <div className="flex items-center gap-8">
                       <div>
                         <p className="text-[10px] text-slate-400">Enrollment</p>
                         <p className="mt-1 text-sm font-semibold">{selected.enrollmentNo}</p>
                       </div>
                       <div className="text-right">
-                        <GradeBadge grade={selected.overallGrade} />
-                        <p className="text-[10px] text-slate-400 mt-3">Rank (by Average)</p>
+                        <GradePill grade={studentStats.grade} large />
+                        <p className="text-[10px] text-slate-400 mt-2">Rank by average</p>
                         <p className="text-sm font-semibold">{studentStats.rank} / {students.length}</p>
-                        <p className="text-[10px] text-slate-400 mt-2">Percentile</p>
-                        <p className="text-sm font-semibold">{studentStats.percentile}th</p>
+                        <p className="text-[10px] text-slate-400 mt-1">{studentStats.percentile}th percentile</p>
                       </div>
                     </div>
                   </div>
                 </section>
 
-                <section className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-3">
-                  <Metric icon={<BarChart3 size={17} />} label="Average (out of 40)" value={formatNumber(studentStats.average)} sub={`${studentStats.averagePct.toFixed(1)}%`} />
-                  <Metric icon={<Award size={17} />} label="Total (out of 240)" value={formatNumber(studentStats.total)} sub={`${studentStats.averagePct.toFixed(1)}%`} />
-                  <Metric icon={<TrendingUp size={17} />} label="Highest Subject" value={studentStats.highest ? formatNumber(studentStats.highest.mark) : "—"} sub={studentStats.highest?.name || "—"} />
-                  <Metric icon={<TrendingDown size={17} />} label="Lowest Subject" value={studentStats.lowest ? formatNumber(studentStats.lowest.mark) : "—"} sub={studentStats.lowest?.name || "—"} />
+                <section className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-5 gap-3">
+                  <Metric icon={<BarChart3 size={17} />} label="Average" value={`${formatNumber(studentStats.average)} / 40`} sub={`${studentStats.averagePct.toFixed(1)}%`} />
+                  <Metric icon={<Award size={17} />} label="Total" value={`${formatNumber(studentStats.total)} / ${TOTAL_MAX}`} sub="6 subjects × 40" />
+                  <Metric icon={<TrendingUp size={17} />} label="Highest Subject" value={studentStats.highest ? formatNumber(studentStats.highest.internal) : "—"} sub={studentStats.highest?.name || "—"} />
+                  <Metric icon={<TrendingDown size={17} />} label="Lowest Subject" value={studentStats.lowest ? formatNumber(studentStats.lowest.internal) : "—"} sub={studentStats.lowest?.name || "—"} />
                   <Metric icon={<CalendarCheck size={17} />} label="Overall Attendance" value={`${selected.overallAttendance}%`} sub="Current attendance" />
                 </section>
 
-                <div className="grid grid-cols-1 2xl:grid-cols-[minmax(0,1fr)_290px] gap-4">
-                  <section className="rounded-2xl border border-slate-200 bg-white shadow-sm overflow-hidden">
-                    <div className="px-5 py-4 border-b border-slate-100">
-                      <h3 className="font-semibold">Subject Performance <span className="text-xs font-normal text-slate-400">(Theory Subjects)</span></h3>
-                      <p className="text-[10px] text-slate-400 mt-1">Marks are shown out of 40 and compared with the class average.</p>
-                    </div>
-                    <div className="overflow-x-auto">
-                      <table className="w-full min-w-[760px] text-xs">
-                        <thead>
-                          <tr className="border-b border-slate-100 text-[10px] text-slate-400">
-                            <th className="px-5 py-3 text-left font-medium">Subject</th>
-                            <th className="px-2 py-3 text-right font-medium">Marks / 40</th>
-                            <th className="px-2 py-3 text-right font-medium">%</th>
-                            <th className="px-2 py-3 text-left font-medium">Grade</th>
-                            <th className="px-2 py-3 text-left font-medium">Performance vs Class Avg</th>
-                            <th className="px-5 py-3 text-right font-medium">Class Avg</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {studentStats.subjects.map((subject) => {
-                            const difference = subject.mark - subject.classAverage;
-                            const maxDifference = 20;
-                            const width = Math.min(100, (Math.abs(difference) / maxDifference) * 100);
-                            return (
-                              <tr key={subject.subjectId} className="border-b border-slate-50 last:border-0">
-                                <td className="px-5 py-3 font-medium text-slate-800 max-w-[230px]">{subject.name}</td>
-                                <td className={`px-2 py-3 text-right font-semibold ${markTone(subject.pct)}`}>{formatNumber(subject.mark)}</td>
-                                <td className="px-2 py-3 text-right text-slate-500">{subject.pct.toFixed(1)}%</td>
-                                <td className="px-2 py-3"><GradeBadge grade={subject.grade} /></td>
-                                <td className="px-2 py-3 min-w-[230px]">
-                                  <div className="flex items-center gap-2">
-                                    <span className={`w-12 text-right text-[10px] font-medium ${difference >= 0 ? "text-emerald-600" : "text-red-500"}`}>{difference >= 0 ? "+" : ""}{difference.toFixed(1)}</span>
-                                    <div className="h-1.5 flex-1 rounded-full bg-slate-100 overflow-hidden">
-                                      <div className={`h-full rounded-full ${difference >= 0 ? "bg-emerald-400" : "bg-red-400"}`} style={{ width: `${Math.max(3, width / 2)}%`, marginLeft: difference >= 0 ? "50%" : `${50 - width / 2}%` }} />
-                                    </div>
-                                  </div>
-                                </td>
-                                <td className="px-5 py-3 text-right text-slate-500">{formatNumber(subject.classAverage)}</td>
-                              </tr>
-                            );
-                          })}
-                        </tbody>
-                      </table>
-                    </div>
-                    <div className="flex items-center gap-4 px-5 py-3 text-[9px] text-slate-400 border-t border-slate-100">
-                      <span className="inline-flex items-center gap-1"><span className="h-1.5 w-1.5 rounded-full bg-red-400" />Below class average</span>
-                      <span className="inline-flex items-center gap-1"><span className="h-1.5 w-1.5 rounded-full bg-emerald-400" />Above class average</span>
+                <section className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+                  <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
+                    <div>
+                      <h3 className="font-semibold">Class Classification</h3>
+                      <p className="text-[10px] text-slate-400 mt-1">Based on average internal marks across the six theory subjects, out of 40.</p>
                     </div>
-                  </section>
-
-                  <aside className="space-y-4">
-                    <SummaryCard title="Grade Summary">
-                      <div className="flex items-center gap-5">
-                        <Donut counts={studentStats.gradeCounts} total={students.length} />
-                        <div className="space-y-2 text-[10px] flex-1">
-                          {["Good", "Needs Attention", "Critical Risk"].map((grade) => (
-                            <div key={grade} className="flex items-center justify-between gap-2">
-                              <span className="flex items-center gap-1.5"><span className={`h-2 w-2 rounded-full ${grade === "Good" ? "bg-emerald-500" : grade === "Needs Attention" ? "bg-amber-500" : "bg-red-500"}`} />{grade}</span>
-                              <span className="text-slate-500">{studentStats.gradeCounts[grade] || 0} ({students.length ? (((studentStats.gradeCounts[grade] || 0) / students.length) * 100).toFixed(1) : 0}%)</span>
+                    <div className="grid grid-cols-2 lg:grid-cols-4 gap-2.5 w-full lg:w-auto lg:min-w-[620px]">
+                      {GRADE_ORDER.map((grade) => {
+                        const count = classGradeCounts[grade] || 0;
+                        const pct = students.length ? (count / students.length) * 100 : 0;
+                        const tone = GRADE_TONE[grade];
+                        return (
+                          <div key={grade} className={`rounded-xl border ${tone.border} ${tone.bg} px-3 py-2.5`}>
+                            <div className="flex items-center justify-between gap-2">
+                              <span className={`text-[10px] font-semibold ${tone.text}`}>{grade}</span>
+                              <span className={`text-sm font-bold ${tone.text}`}>{count}</span>
                             </div>
-                          ))}
-                        </div>
-                      </div>
-                    </SummaryCard>
+                            <div className="mt-2 h-1.5 rounded-full bg-white/80 overflow-hidden">
+                              <div className={`h-full rounded-full ${tone.dot}`} style={{ width: `${pct}%` }} />
+                            </div>
+                            <p className="mt-1 text-[9px] text-slate-400">{pct.toFixed(1)}% of class</p>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                </section>
 
-                    <SummaryCard title="Attendance Overview">
-                      <div className="flex items-end justify-between">
-                        <div><p className="text-[10px] text-slate-400">Overall Attendance</p><p className="text-xl font-semibold mt-1">{selected.overallAttendance}%</p></div>
-                        <span className={`rounded-full px-2 py-1 text-[9px] ${selected.overallAttendance >= 75 ? "bg-emerald-50 text-emerald-700" : "bg-amber-50 text-amber-700"}`}>{selected.overallAttendance >= 75 ? "On track" : "Needs attention"}</span>
-                      </div>
-                      <div className="mt-4 h-2 rounded-full bg-slate-100 overflow-hidden"><div className="h-full rounded-full bg-violet-500" style={{ width: `${Math.min(100, selected.overallAttendance)}%` }} /></div>
-                      <div className="grid grid-cols-2 gap-3 mt-4 text-[10px]"><div><span className="text-slate-400">Subject average</span><p className="font-medium mt-1">{studentStats.subjects.length ? (studentStats.subjects.reduce((sum, s) => sum + s.attendance, 0) / studentStats.subjects.length).toFixed(1) : 0}%</p></div><div><span className="text-slate-400">Subjects</span><p className="font-medium mt-1">{studentStats.subjects.length}</p></div></div>
-                    </SummaryCard>
-
-                    <SummaryCard title="Assessment Snapshot">
-                      <div className="space-y-3">
-                        {[
-                          ["Midsem 1", studentStats.subjects.reduce((sum, s) => sum + (Number(s.midsem1) || 0), 0) / Math.max(1, studentStats.subjects.length)],
-                          ["Midsem 2", studentStats.subjects.reduce((sum, s) => sum + (Number(s.midsem2) || 0), 0) / Math.max(1, studentStats.subjects.length)],
-                          ["Combined", studentStats.subjects.reduce((sum, s) => sum + (Number(s.combined) || 0), 0) / Math.max(1, studentStats.subjects.length)],
-                        ].map(([label, value]) => (
-                          <div key={String(label)} className="flex items-center justify-between"><span className="text-[10px] text-slate-500">{label}</span><span className="text-xs font-semibold">{Number(value).toFixed(1)}</span></div>
+                <section className="rounded-2xl border border-slate-200 bg-white shadow-sm overflow-hidden">
+                  <div className="px-5 py-4 border-b border-slate-100">
+                    <h3 className="font-semibold">Subject Performance <span className="text-xs font-normal text-slate-400">(Theory Subjects)</span></h3>
+                    <p className="text-[10px] text-slate-400 mt-1">Internal marks distribution for each subject. Every subject contributes 40 marks.</p>
+                  </div>
+                  <div className="overflow-x-auto">
+                    <table className="w-full min-w-[900px] text-xs table-fixed">
+                      <colgroup>
+                        <col className="w-[25%]" />
+                        <col className="w-[10%]" />
+                        <col className="w-[10%]" />
+                        <col className="w-[10%]" />
+                        <col className="w-[10%]" />
+                        <col className="w-[10%]" />
+                        <col className="w-[12%]" />
+                        <col className="w-[13%]" />
+                      </colgroup>
+                      <thead>
+                        <tr className="border-b border-slate-100 bg-slate-50/60 text-[10px] text-slate-500">
+                          <th className="px-5 py-3 text-left font-semibold">Subject</th>
+                          <th className="px-2 py-3 text-center font-semibold">Assignment / 5</th>
+                          <th className="px-2 py-3 text-center font-semibold">Presentation / 5</th>
+                          <th className="px-2 py-3 text-center font-semibold">Attendance / 10</th>
+                          <th className="px-2 py-3 text-center font-semibold">Midsem 1 / 10</th>
+                          <th className="px-2 py-3 text-center font-semibold">Midsem 2 / 10</th>
+                          <th className="px-2 py-3 text-center font-semibold">Internal / 40</th>
+                          <th className="px-5 py-3 text-center font-semibold">Grade</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {studentStats.subjects.map((subject) => (
+                          <tr key={subject.subjectId} className="border-b border-slate-50 last:border-0 hover:bg-slate-50/50">
+                            <td className="px-5 py-3.5 font-medium text-slate-800 leading-snug">{subject.name}</td>
+                            <MarkCell value={subject.assignment} max={5} />
+                            <MarkCell value={subject.presentation} max={5} />
+                            <MarkCell value={subject.attendanceMark} max={10} />
+                            <MarkCell value={subject.midsem1Mark} max={10} />
+                            <MarkCell value={subject.midsem2Mark} max={10} />
+                            <td className="px-2 py-3.5 text-center font-bold text-slate-900">{formatNumber(subject.internal)} / 40</td>
+                            <td className="px-5 py-3.5 text-center"><GradePill grade={subject.grade} /></td>
+                          </tr>
                         ))}
-                      </div>
-                    </SummaryCard>
-                  </aside>
-                </div>
-
-                <section className="rounded-2xl border border-violet-100 bg-violet-50/60 p-4 flex flex-col md:flex-row md:items-center justify-between gap-3">
-                  <div className="flex items-start gap-3">
-                    <span className="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-white text-violet-600 border border-violet-100"><StickyNote size={16} /></span>
-                    <div><h4 className="text-xs font-semibold">Teacher's Notes</h4><p className="text-[10px] text-slate-500 mt-1">Performance summary is generated from the synced academic and attendance data. Add teacher observations here when follow-up is required.</p></div>
+                      </tbody>
+                    </table>
+                  </div>
+                  <div className="px-5 py-3 border-t border-slate-100 text-[9px] text-slate-400">
+                    Assignment, presentation, attendance, Midsem 1 and Midsem 2 are shown as their weighted contribution to the 40-mark internal total.
                   </div>
-                  <button className="shrink-0 rounded-lg border border-violet-200 bg-white px-3 py-2 text-[10px] font-semibold text-violet-700 hover:bg-violet-50">Add Note</button>
                 </section>
-
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  <div className="rounded-2xl border border-slate-200 bg-white p-4 text-xs"><div className="flex items-center gap-2 font-semibold"><Trophy size={15} className="text-amber-500" />Class position</div><p className="text-[10px] text-slate-400 mt-2">{selected.name} ranks {studentStats.rank} out of {students.length} students by average theory marks.</p></div>
-                  <div className="rounded-2xl border border-slate-200 bg-white p-4 text-xs"><div className="flex items-center gap-2 font-semibold"><UserRound size={15} className="text-violet-500" />Report scope</div><p className="text-[10px] text-slate-400 mt-2">Six theory subjects only; no laboratory subjects are included in the academic average.</p></div>
-                </div>
               </main>
             )}
           </div>
@@ -450,44 +446,36 @@ export default function SectionStudentReportPage() {
   );
 }
 
-function Metric({ icon, label, value, sub }: { icon: React.ReactNode; label: string; value: string; sub: string }) {
+function FilterPill({ active, onClick, label }: { active: boolean; onClick: () => void; label: string }) {
   return (
-    <div className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm min-w-0">
-      <div className="flex items-center gap-2 text-slate-500"><span className="grid h-8 w-8 place-items-center rounded-lg bg-slate-50 text-violet-600">{icon}</span><span className="text-[10px] truncate">{label}</span></div>
-      <p className="text-xl font-semibold mt-3 truncate">{value}</p>
-      <p className="text-[10px] text-slate-400 mt-1 truncate">{sub}</p>
-    </div>
+    <button
+      type="button"
+      onClick={onClick}
+      className={`shrink-0 rounded-full border px-2.5 py-1 text-[10px] font-medium ${active ? "border-violet-200 bg-violet-50 text-violet-700" : "border-slate-200 text-slate-500 hover:bg-slate-50"}`}
+    >
+      {label}
+    </button>
   );
 }
 
-function SummaryCard({ title, children }: { title: string; children: React.ReactNode }) {
-  return <section className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm"><h3 className="text-sm font-semibold mb-4">{title}</h3>{children}</section>;
+function MarkCell({ value, max }: { value: number; max: number }) {
+  return (
+    <td className="px-2 py-3.5 text-center tabular-nums">
+      <span className="font-semibold text-slate-800">{formatNumber(value)}</span>
+      <span className="text-[9px] text-slate-400"> / {max}</span>
+    </td>
+  );
 }
 
-function Donut({ counts, total }: { counts: Record<string, number>; total: number }) {
-  const good = total ? (counts.Good || 0) / total : 0;
-  const attention = total ? (counts["Needs Attention"] || 0) / total : 0;
-  const critical = total ? (counts["Critical Risk"] || 0) / total : 0;
-  const radius = 34;
-  const circumference = 2 * Math.PI * radius;
-  const segments = [
-    { value: good, className: "stroke-emerald-500" },
-    { value: attention, className: "stroke-amber-500" },
-    { value: critical, className: "stroke-red-500" },
-  ];
-  let offset = 0;
+function Metric({ icon, label, value, sub }: { icon: React.ReactNode; label: string; value: string; sub: string }) {
   return (
-    <div className="relative h-[82px] w-[82px] shrink-0">
-      <svg viewBox="0 0 82 82" className="h-full w-full -rotate-90">
-        <circle cx="41" cy="41" r={radius} fill="none" strokeWidth="10" className="stroke-slate-100" />
-        {segments.map((segment, index) => {
-          const length = segment.value * circumference;
-          const dashOffset = -offset;
-          offset += length;
-          return <circle key={index} cx="41" cy="41" r={radius} fill="none" strokeWidth="10" strokeDasharray={`${length} ${circumference - length}`} strokeDashoffset={dashOffset} className={segment.className} />;
-        })}
-      </svg>
-      <span className="absolute inset-0 grid place-items-center text-xs font-semibold">{total}</span>
+    <div className="rounded-2xl border border-slate-200 bg-white px-4 py-4 shadow-sm min-w-0 text-center">
+      <div className="flex flex-col items-center justify-center gap-2 text-slate-500">
+        <span className="grid h-8 w-8 place-items-center rounded-lg bg-violet-50 text-violet-600">{icon}</span>
+        <span className="text-[10px] font-medium leading-tight">{label}</span>
+      </div>
+      <p className="text-lg font-semibold mt-3 truncate">{value}</p>
+      <p className="text-[10px] text-slate-400 mt-1 truncate">{sub}</p>
     </div>
   );
 }

From c072199f3367ea4b0d101bafa87f665d67ac0d0f Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Tue, 1 Sep 2026 00:12:42 +0530
Subject: [PATCH 77/80] Refine student report header and internal marks table

---
 .../section-analysis/[sectionId]/students.tsx | 117 +++++++-----------
 1 file changed, 42 insertions(+), 75 deletions(-)

diff --git a/pages/section-analysis/[sectionId]/students.tsx b/pages/section-analysis/[sectionId]/students.tsx
index d383488..2ac8f7d 100644
--- a/pages/section-analysis/[sectionId]/students.tsx
+++ b/pages/section-analysis/[sectionId]/students.tsx
@@ -62,7 +62,6 @@ interface OverallData {
 }
 
 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) {
@@ -148,10 +147,21 @@ export default function SectionStudentReportPage() {
   const students = data?.students || [];
 
   const studentsWithGrades = useMemo(
-    () => students.map((student) => ({ ...student, reportAverage: studentAverage(student), reportGrade: gradeFromAverage(studentAverage(student)) })),
+    () => 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<Grade, number>);
+  }, [studentsWithGrades]);
+
   const filteredStudents = useMemo(() => {
     const query = search.trim().toLowerCase();
     return studentsWithGrades.filter((student) => {
@@ -179,7 +189,9 @@ export default function SectionStudentReportPage() {
       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 internal = Number(subject.basicInternal) || assignment + presentation + attendance + midsem1 + midsem2;
+      const basicInternal = Number(subject.basicInternal) || assignment + presentation + attendance + midsem1 + midsem2;
+      const moderatedInternal = Number(subject.moderatedInternal);
+
       return {
         ...subject,
         assignment,
@@ -187,27 +199,22 @@ export default function SectionStudentReportPage() {
         attendanceMark: attendance,
         midsem1Mark: midsem1,
         midsem2Mark: midsem2,
-        internal,
-        grade: gradeFromAverage(internal),
+        basicInternal,
+        moderatedInternal: Number.isFinite(moderatedInternal) ? moderatedInternal : basicInternal,
+        grade: gradeFromAverage(basicInternal),
       };
     });
 
-    const total = subjects.reduce((sum, subject) => sum + subject.internal, 0);
+    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 percentile = students.length ? Math.round(((students.length - rankIndex) / students.length) * 100) : 0;
-
-    const gradeCounts = studentsWithGrades.reduce((acc, student) => {
-      acc[student.reportGrade] = (acc[student.reportGrade] || 0) + 1;
-      return acc;
-    }, {} as Record<Grade, number>);
 
-    const highest = [...subjects].sort((a, b) => b.internal - a.internal)[0];
-    const lowest = [...subjects].sort((a, b) => a.internal - b.internal)[0];
+    const highest = [...subjects].sort((a, b) => b.basicInternal - a.basicInternal)[0];
+    const lowest = [...subjects].sort((a, b) => a.basicInternal - b.basicInternal)[0];
 
     return {
       subjects,
@@ -215,13 +222,11 @@ export default function SectionStudentReportPage() {
       average,
       averagePct: (average / SUBJECT_MAX) * 100,
       rank: rankIndex + 1,
-      percentile,
-      gradeCounts,
       highest,
       lowest,
       grade: gradeFromAverage(average),
     };
-  }, [selected, studentsWithGrades, students.length]);
+  }, [selected, studentsWithGrades]);
 
   const navigateStudent = (direction: -1 | 1) => {
     if (!filteredStudents.length || !selected) return;
@@ -230,13 +235,6 @@ export default function SectionStudentReportPage() {
     setSelectedEnrollment(filteredStudents[nextIndex].enrollmentNo);
   };
 
-  const classGradeCounts = useMemo(() => {
-    return GRADE_ORDER.reduce((acc, grade) => {
-      acc[grade] = studentsWithGrades.filter((student) => student.reportGrade === grade).length;
-      return acc;
-    }, {} as Record<Grade, number>);
-  }, [studentsWithGrades]);
-
   return (
     <div className="min-h-screen max-w-[1900px] mx-auto px-6 lg:px-8 py-7 text-slate-900">
       <div className="flex items-start justify-between mb-5">
@@ -258,7 +256,6 @@ export default function SectionStudentReportPage() {
       </div>
 
       {typeof sectionId === "string" && <AnalysisNav sectionId={sectionId} />}
-
       {error && <div className="mt-5 rounded-xl border border-red-100 bg-red-50 p-4 text-sm text-red-700">{error}</div>}
       {loading && !data && <div className="py-14 text-center text-sm text-slate-500">Loading student report...</div>}
 
@@ -334,19 +331,14 @@ export default function SectionStudentReportPage() {
                       </div>
                       <div className="min-w-0">
                         <h3 className="text-xl font-semibold truncate">{selected.name}</h3>
-                        <p className="text-xs text-slate-400 mt-1 truncate">{selected.enrollmentNo}{selected.email ? ` · ${selected.email}` : ""}</p>
+                        <p className="text-xs text-slate-400 mt-1 truncate">Student report · {Math.min(SUBJECT_COUNT, selected.subjects.length)} theory subjects</p>
                       </div>
                     </div>
-                    <div className="flex items-center gap-8">
-                      <div>
-                        <p className="text-[10px] text-slate-400">Enrollment</p>
-                        <p className="mt-1 text-sm font-semibold">{selected.enrollmentNo}</p>
-                      </div>
+                    <div className="flex items-center gap-6 lg:gap-8">
                       <div className="text-right">
                         <GradePill grade={studentStats.grade} large />
                         <p className="text-[10px] text-slate-400 mt-2">Rank by average</p>
                         <p className="text-sm font-semibold">{studentStats.rank} / {students.length}</p>
-                        <p className="text-[10px] text-slate-400 mt-1">{studentStats.percentile}th percentile</p>
                       </div>
                     </div>
                   </div>
@@ -355,55 +347,28 @@ export default function SectionStudentReportPage() {
                 <section className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-5 gap-3">
                   <Metric icon={<BarChart3 size={17} />} label="Average" value={`${formatNumber(studentStats.average)} / 40`} sub={`${studentStats.averagePct.toFixed(1)}%`} />
                   <Metric icon={<Award size={17} />} label="Total" value={`${formatNumber(studentStats.total)} / ${TOTAL_MAX}`} sub="6 subjects × 40" />
-                  <Metric icon={<TrendingUp size={17} />} label="Highest Subject" value={studentStats.highest ? formatNumber(studentStats.highest.internal) : "—"} sub={studentStats.highest?.name || "—"} />
-                  <Metric icon={<TrendingDown size={17} />} label="Lowest Subject" value={studentStats.lowest ? formatNumber(studentStats.lowest.internal) : "—"} sub={studentStats.lowest?.name || "—"} />
+                  <Metric icon={<TrendingUp size={17} />} label="Highest Subject" value={studentStats.highest ? formatNumber(studentStats.highest.basicInternal) : "—"} sub={studentStats.highest?.name || "—"} />
+                  <Metric icon={<TrendingDown size={17} />} label="Lowest Subject" value={studentStats.lowest ? formatNumber(studentStats.lowest.basicInternal) : "—"} sub={studentStats.lowest?.name || "—"} />
                   <Metric icon={<CalendarCheck size={17} />} label="Overall Attendance" value={`${selected.overallAttendance}%`} sub="Current attendance" />
                 </section>
 
-                <section className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
-                  <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
-                    <div>
-                      <h3 className="font-semibold">Class Classification</h3>
-                      <p className="text-[10px] text-slate-400 mt-1">Based on average internal marks across the six theory subjects, out of 40.</p>
-                    </div>
-                    <div className="grid grid-cols-2 lg:grid-cols-4 gap-2.5 w-full lg:w-auto lg:min-w-[620px]">
-                      {GRADE_ORDER.map((grade) => {
-                        const count = classGradeCounts[grade] || 0;
-                        const pct = students.length ? (count / students.length) * 100 : 0;
-                        const tone = GRADE_TONE[grade];
-                        return (
-                          <div key={grade} className={`rounded-xl border ${tone.border} ${tone.bg} px-3 py-2.5`}>
-                            <div className="flex items-center justify-between gap-2">
-                              <span className={`text-[10px] font-semibold ${tone.text}`}>{grade}</span>
-                              <span className={`text-sm font-bold ${tone.text}`}>{count}</span>
-                            </div>
-                            <div className="mt-2 h-1.5 rounded-full bg-white/80 overflow-hidden">
-                              <div className={`h-full rounded-full ${tone.dot}`} style={{ width: `${pct}%` }} />
-                            </div>
-                            <p className="mt-1 text-[9px] text-slate-400">{pct.toFixed(1)}% of class</p>
-                          </div>
-                        );
-                      })}
-                    </div>
-                  </div>
-                </section>
-
                 <section className="rounded-2xl border border-slate-200 bg-white shadow-sm overflow-hidden">
                   <div className="px-5 py-4 border-b border-slate-100">
                     <h3 className="font-semibold">Subject Performance <span className="text-xs font-normal text-slate-400">(Theory Subjects)</span></h3>
                     <p className="text-[10px] text-slate-400 mt-1">Internal marks distribution for each subject. Every subject contributes 40 marks.</p>
                   </div>
                   <div className="overflow-x-auto">
-                    <table className="w-full min-w-[900px] text-xs table-fixed">
+                    <table className="w-full min-w-[1100px] text-xs table-fixed">
                       <colgroup>
-                        <col className="w-[25%]" />
-                        <col className="w-[10%]" />
-                        <col className="w-[10%]" />
-                        <col className="w-[10%]" />
-                        <col className="w-[10%]" />
-                        <col className="w-[10%]" />
+                        <col className="w-[22%]" />
+                        <col className="w-[9%]" />
+                        <col className="w-[9%]" />
+                        <col className="w-[9%]" />
+                        <col className="w-[9%]" />
+                        <col className="w-[9%]" />
+                        <col className="w-[11%]" />
                         <col className="w-[12%]" />
-                        <col className="w-[13%]" />
+                        <col className="w-[10%]" />
                       </colgroup>
                       <thead>
                         <tr className="border-b border-slate-100 bg-slate-50/60 text-[10px] text-slate-500">
@@ -413,8 +378,9 @@ export default function SectionStudentReportPage() {
                           <th className="px-2 py-3 text-center font-semibold">Attendance / 10</th>
                           <th className="px-2 py-3 text-center font-semibold">Midsem 1 / 10</th>
                           <th className="px-2 py-3 text-center font-semibold">Midsem 2 / 10</th>
-                          <th className="px-2 py-3 text-center font-semibold">Internal / 40</th>
-                          <th className="px-5 py-3 text-center font-semibold">Grade</th>
+                          <th className="px-2 py-3 text-center font-semibold">Basic Internal / 40</th>
+                          <th className="px-2 py-3 text-center font-semibold">Moderated Internal / 40</th>
+                          <th className="px-2 py-3 text-center font-semibold">Grade</th>
                         </tr>
                       </thead>
                       <tbody>
@@ -426,15 +392,16 @@ export default function SectionStudentReportPage() {
                             <MarkCell value={subject.attendanceMark} max={10} />
                             <MarkCell value={subject.midsem1Mark} max={10} />
                             <MarkCell value={subject.midsem2Mark} max={10} />
-                            <td className="px-2 py-3.5 text-center font-bold text-slate-900">{formatNumber(subject.internal)} / 40</td>
-                            <td className="px-5 py-3.5 text-center"><GradePill grade={subject.grade} /></td>
+                            <td className="px-2 py-3.5 text-center tabular-nums font-semibold text-slate-800">{formatNumber(subject.basicInternal)} / 40</td>
+                            <td className="px-2 py-3.5 text-center tabular-nums font-semibold text-violet-700">{formatNumber(subject.moderatedInternal)} / 40</td>
+                            <td className="px-2 py-3.5 text-center"><GradePill grade={subject.grade} /></td>
                           </tr>
                         ))}
                       </tbody>
                     </table>
                   </div>
                   <div className="px-5 py-3 border-t border-slate-100 text-[9px] text-slate-400">
-                    Assignment, presentation, attendance, Midsem 1 and Midsem 2 are shown as their weighted contribution to the 40-mark internal total.
+                    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.
                   </div>
                 </section>
               </main>

From c2306dfed298064612849ca6800c0b214056ce7c Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Tue, 1 Sep 2026 00:22:51 +0530
Subject: [PATCH 78/80] Remove overlapping search icon from student report

---
 pages/section-analysis/[sectionId]/students.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/pages/section-analysis/[sectionId]/students.tsx b/pages/section-analysis/[sectionId]/students.tsx
index 2ac8f7d..32f4689 100644
--- a/pages/section-analysis/[sectionId]/students.tsx
+++ b/pages/section-analysis/[sectionId]/students.tsx
@@ -7,7 +7,6 @@ import {
   ChevronLeft,
   ChevronRight,
   RefreshCw,
-  Search,
   TrendingDown,
   TrendingUp,
 } from "lucide-react";
@@ -273,14 +272,12 @@ export default function SectionStudentReportPage() {
                   <h3 className="font-semibold">Students</h3>
                   <span className="text-xs text-slate-400">{students.length}</span>
                 </div>
-                <div className="relative">
-                  <Search size={15} className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" aria-hidden="true" />
+                <div>
                   <input
                     value={search}
                     onChange={(e) => setSearch(e.target.value)}
                     placeholder="Search by name or enrollment no."
-                    style={{ paddingLeft: 38 }}
-                    className="w-full rounded-lg border border-slate-200 py-2.5 pr-3 text-xs outline-none focus:border-violet-400 focus:ring-2 focus:ring-violet-100"
+                    className="w-full rounded-lg border border-slate-200 px-3 py-2.5 text-xs outline-none focus:border-violet-400 focus:ring-2 focus:ring-violet-100"
                   />
                 </div>
                 <div className="flex gap-1.5 mt-3 overflow-x-auto pb-1">

From 8cf02b26ef655d66d71a03c658a4c3e80cfbf4bb Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Tue, 1 Sep 2026 00:32:57 +0530
Subject: [PATCH 79/80] Improve academic student table columns and spacing

---
 .../subject-analysis/[subjectId]/academic.tsx | 361 ++++--------------
 1 file changed, 75 insertions(+), 286 deletions(-)

diff --git a/pages/subject-analysis/[subjectId]/academic.tsx b/pages/subject-analysis/[subjectId]/academic.tsx
index 8eccd29..cf6e638 100644
--- a/pages/subject-analysis/[subjectId]/academic.tsx
+++ b/pages/subject-analysis/[subjectId]/academic.tsx
@@ -57,12 +57,10 @@ export default function SubjectAcademicPage() {
   const [syncing, setSyncing] = useState(false);
   const [error, setError] = useState("");
   const [selectedTier, setSelectedTier] = useState<Tier | null>(null);
-
   const [combinedSort, setCombinedSort] = useState<CombinedSort>("combined");
   const [sortOrder, setSortOrder] = useState<SortOrder>("desc");
   const [combinedSortDraft, setCombinedSortDraft] = useState<CombinedSort>("combined");
   const [sortOrderDraft, setSortOrderDraft] = useState<SortOrder>("desc");
-
   const [summaryExam, setSummaryExam] = useState<SummaryExam>("combined");
   const [summaryTier, setSummaryTier] = useState<Tier | "all">("all");
   const [summaryLower, setSummaryLower] = useState("0");
@@ -82,15 +80,9 @@ export default function SubjectAcademicPage() {
       const r = await fetch(`/api/analysis/subject/${subjectId}${sync ? "?sync=1" : ""}`);
       const j = await r.json();
       if (!r.ok) throw new Error(j.detail ? `${j.error}: ${j.detail}` : j.error || "Failed to load academic analysis");
-      setData(j.data);
-      setComputedAt(j.computedAt || "");
-      setSheetId(j.sheetId || null);
-    } catch (e: any) {
-      setError(e.message || "Failed to load academic analysis");
-    } finally {
-      setLoading(false);
-      setSyncing(false);
-    }
+      setData(j.data); setComputedAt(j.computedAt || ""); setSheetId(j.sheetId || null);
+    } catch (e: any) { setError(e.message || "Failed to load academic analysis"); }
+    finally { setLoading(false); setSyncing(false); }
   }
 
   useEffect(() => { loadAnalysis(); }, [subjectId]);
@@ -98,299 +90,96 @@ 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 marks = rows.map((r) => r.marks);
+    const rows = students.map((s: any, index: number) => ({ sno: index + 1, enrollmentNo: s.enrollmentNo, name: s.name, marks: valueFor(s, exam) }));
+    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<Tier, number>);
-    rows.forEach((r) => counts[tierFor(r.marks)]++);
-    return {
-      rows,
-      average: marks.length ? round1(marks.reduce((a, b) => a + b, 0) / marks.length) : 0,
-      median: median(marks),
-      highest,
-      highestNames: rows.filter((r) => r.marks === highest).map((r) => r.name),
-      passRate: marks.length ? Math.round(rows.filter((r) => r.marks >= 12).length / marks.length * 100) : 0,
-      counts,
-      sorted: [...rows].sort((a, b) => b.marks - a.marks),
-    };
+    rows.forEach(r => counts[tierFor(r.marks)]++);
+    return { rows, average: marks.length ? round1(marks.reduce((a,b) => a+b, 0) / marks.length) : 0, median: median(marks), highest, highestNames: rows.filter(r => r.marks === highest).map(r => r.name), passRate: marks.length ? Math.round(rows.filter(r => r.marks >= 12).length / marks.length * 100) : 0, counts, sorted: [...rows].sort((a,b) => b.marks-a.marks) };
   };
 
   const midsem1 = useMemo(() => statsFor("midsem1"), [students]);
   const midsem2 = useMemo(() => statsFor("midsem2"), [students]);
-  const combinedRows = useMemo(() => students.map((s: any) => ({
-    enrollmentNo: s.enrollmentNo,
-    name: s.name,
-    first: valueFor(s, "midsem1"),
-    second: valueFor(s, "midsem2"),
-    combined: valueFor(s, "combined"),
-    max: valueFor(s, "max"),
-  })), [students]);
-
-  const combinedCounts = useMemo(() => {
-    const r = TIERS.reduce((a, t) => ({ ...a, [t]: 0 }), {} as Record<Tier, number>);
-    combinedRows.forEach((row) => r[tierFor(row.combined)]++);
-    return r;
-  }, [combinedRows]);
-
+  const combinedRows = useMemo(() => students.map((s:any, index:number) => ({ sno:index+1, enrollmentNo:s.enrollmentNo, name:s.name, first:valueFor(s,"midsem1"), second:valueFor(s,"midsem2"), combined:valueFor(s,"combined"), max:valueFor(s,"max") })), [students]);
+  const combinedCounts = useMemo(() => { const r=TIERS.reduce((a,t)=>({...a,[t]:0}),{} as Record<Tier,number>); 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 filteredCombinedRows = useMemo(
-    () => selectedTier ? combinedRows.filter((row) => tierFor(row.combined) === selectedTier) : combinedRows,
-    [combinedRows, selectedTier]
-  );
-
+  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 filteredCombinedRows = useMemo(() => selectedTier ? combinedRows.filter(row => tierFor(row.combined) === selectedTier) : combinedRows, [combinedRows, selectedTier]);
   const sortedCombinedRows = useMemo(() => {
     if (sortOrder === "none") return [...filteredCombinedRows];
-    const getValue = (row: typeof combinedRows[number]) => {
-      if (combinedSort === "midsem1") return row.first;
-      if (combinedSort === "midsem2") return row.second;
-      if (combinedSort === "max") return row.max;
-      return row.combined;
-    };
-    return [...filteredCombinedRows].sort((a, b) => {
-      const diff = getValue(a) - getValue(b);
-      if (diff !== 0) return sortOrder === "asc" ? diff : -diff;
-      return a.name.localeCompare(b.name);
-    });
+    const getValue = (row:any) => combinedSort === "midsem1" ? row.first : combinedSort === "midsem2" ? row.second : combinedSort === "max" ? row.max : row.combined;
+    return [...filteredCombinedRows].sort((a,b) => { const diff=getValue(a)-getValue(b); return diff ? (sortOrder === "asc" ? diff : -diff) : 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) };
-  }).filter((row) => {
-    const lower = Number(summaryLower);
-    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;
-    return summarySort === "desc" ? b.marks - a.marks : a.marks - b.marks;
-  }), [combinedRows, summaryExam, summaryTier, summaryLower, summaryUpper, summarySort]);
-
-  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;
-  const midsem2Average = midsem2.average;
-  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);
-
-  const applyCombinedControls = () => {
-    setCombinedSort(combinedSortDraft);
-    setSortOrder(sortOrderDraft);
-  };
-
-  const resetSummaryControls = () => {
-    setSummaryExam("combined");
-    setSummaryTier("all");
-    setSummaryLower("0");
-    setSummaryUpper("30");
-    setSummarySort("none");
-    setSummaryExamDraft("combined");
-    setSummaryTierDraft("all");
-    setSummaryLowerDraft("0");
-    setSummaryUpperDraft("30");
-    setSummarySortDraft("none");
-  };
-
-  const applySummaryControls = () => {
-    setSummaryExam(summaryExamDraft);
-    setSummaryTier(summaryTierDraft);
-    setSummaryLower(summaryLowerDraft);
-    setSummaryUpper(summaryUpperDraft);
-    setSummarySort(summarySortDraft);
-  };
+  const combinedRankRows = useMemo(() => [...combinedRows].sort((a,b)=>b.combined-a.combined), [combinedRows]);
+  const combinedAverage = combinedRows.length ? round1(combinedRows.reduce((s,r)=>s+r.combined,0)/combinedRows.length) : 0;
+  const combinedHighest = combinedRows.length ? Math.max(...combinedRows.map(r=>r.combined)) : 0;
+  const combinedHighestNames = combinedRows.filter(r=>r.combined===combinedHighest).map(r=>r.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)}; }).filter(row => { const lower=Number(summaryLower), 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)=>summarySort === "none" ? 0 : summarySort === "desc" ? b.marks-a.marks : a.marks-b.marks), [combinedRows,summaryExam,summaryTier,summaryLower,summaryUpper,summarySort]);
+  const summaryAverage = combinedRows.length ? round1(combinedRows.reduce((s,r)=>s+r.combined,0)/combinedRows.length) : 0;
+  const summaryPassRate = combinedRows.length ? Math.round(combinedRows.filter(r=>r.combined>=12).length/combinedRows.length*100) : 0;
+  const increases = [...combinedRows].map(r=>({...r,change:round1(r.second-r.first)})).filter(r=>r.change>0).sort((a,b)=>b.change-a.change).slice(0,5);
+  const decreases = [...combinedRows].map(r=>({...r,change:round1(r.second-r.first)})).filter(r=>r.change<0).sort((a,b)=>a.change-b.change).slice(0,5);
+  const applyCombinedControls=()=>{setCombinedSort(combinedSortDraft);setSortOrder(sortOrderDraft);};
+  const resetSummaryControls=()=>{setSummaryExam("combined");setSummaryTier("all");setSummaryLower("0");setSummaryUpper("30");setSummarySort("none");setSummaryExamDraft("combined");setSummaryTierDraft("all");setSummaryLowerDraft("0");setSummaryUpperDraft("30");setSummarySortDraft("none");};
+  const applySummaryControls=()=>{setSummaryExam(summaryExamDraft);setSummaryTier(summaryTierDraft);setSummaryLower(summaryLowerDraft);setSummaryUpper(summaryUpperDraft);setSummarySort(summarySortDraft);};
 
   return <div className="analysis-layout">
-    <aside className="analysis-sidebar">
-      <div className="analysis-brand"><span className="analysis-brand__mark"><BarChart3 size={18} /></span><span>ClassPulse</span></div>
-      <nav className="analysis-side-nav">
-        <a href="/dashboard"><LayoutDashboard size={18} />Dashboard</a>
-        <a href="/classes"><BookOpen size={18} />Class Analysis</a>
-        <a className="is-active" href={typeof subjectId === "string" ? `/subject-analysis/${subjectId}/academic` : "#"}><GraduationCap size={18} />Subject Analysis</a>
-      </nav>
-      <RawDataButton sheetId={sheetId} />
-      <div className="analysis-side-footer">ClassPulse Teacher Portal</div>
-    </aside>
-
+    <aside className="analysis-sidebar"><div className="analysis-brand"><span className="analysis-brand__mark"><BarChart3 size={18}/></span><span>ClassPulse</span></div><nav className="analysis-side-nav"><a href="/dashboard"><LayoutDashboard size={18}/>Dashboard</a><a href="/classes"><BookOpen size={18}/>Class Analysis</a><a className="is-active" href={typeof subjectId === "string" ? `/subject-analysis/${subjectId}/academic` : "#"}><GraduationCap size={18}/>Subject Analysis</a></nav><RawDataButton sheetId={sheetId}/><div className="analysis-side-footer">ClassPulse Teacher Portal</div></aside>
     <main className="analysis-page">
-      <header className="analysis-topbar">
-        <div className="analysis-title-row"><h1>Subject Analysis</h1>{computedAt && <span className="analysis-sync">• Last synced {new Date(computedAt).toLocaleString()}</span>}</div>
-        <div className="analysis-top-actions"><button className="analysis-primary" onClick={() => loadAnalysis(true)} disabled={syncing}><RefreshCw size={15} className={syncing ? "animate-spin" : ""} />{syncing ? "Syncing..." : "Sync now"}</button></div>
-      </header>
-
-      {typeof subjectId === "string" && <SubjectAnalysisNav subjectId={subjectId} />}
-      <div className="analysis-view-switch">
-        {([["midsem1", "Midsem 1"], ["midsem2", "Midsem 2"], ["combined", "Combined"], ["summary", "Summary"]] as [AcademicView, string][]).map(([k, l]) => <button key={k} className={view === k ? "is-active" : ""} onClick={() => setView(k)}>{l}</button>)}
-      </div>
-
-      {error && <div className="analysis-panel" style={{ padding: 14, marginBottom: 16, color: "#b42318" }}>{error}</div>}
-      {loading && !data && <div style={{ padding: 40, color: "#667085", fontSize: 13 }}>Loading academic analysis...</div>}
-
+      <header className="analysis-topbar"><div className="analysis-title-row"><h1>Subject Analysis</h1>{computedAt && <span className="analysis-sync">• Last synced {new Date(computedAt).toLocaleString()}</span>}</div><div className="analysis-top-actions"><button className="analysis-primary" onClick={()=>loadAnalysis(true)} disabled={syncing}><RefreshCw size={15} className={syncing?"animate-spin":""}/>{syncing?"Syncing...":"Sync now"}</button></div></header>
+      {typeof subjectId === "string" && <SubjectAnalysisNav subjectId={subjectId}/>}<div className="analysis-view-switch">{([["midsem1","Midsem 1"],["midsem2","Midsem 2"],["combined","Combined"],["summary","Summary"]] as [AcademicView,string][]).map(([k,l])=><button key={k} className={view===k?"is-active":""} onClick={()=>setView(k)}>{l}</button>)}</div>
+      {error && <div className="analysis-panel" style={{padding:14,marginBottom:16,color:"#b42318"}}>{error}</div>}{loading&&!data&&<div style={{padding:40,color:"#667085",fontSize:13}}>Loading academic analysis...</div>}
       {data && (view === "midsem1" || view === "midsem2") && <>
-        <section className="analysis-hero">
-          <div className="analysis-hero-copy"><h2>{activeLabel}</h2><p>Raw Midsem marks out of 30, class statistics, and performance tiers.</p></div>
-          <Metric label="Class Average" value={activeStats.average} detail="out of 30 marks" />
-          <Metric label="Class Median" value={activeStats.median} detail="middle class score" />
-          <Metric label="Pass Rate" value={`${activeStats.passRate}%`} detail="students scoring 12 or more" />
-        </section>
-        <section className="analysis-content-grid academic-content-grid">
-          <section className="analysis-panel analysis-table-panel">
-            <div className="analysis-panel-head"><div><h3>Data Sheet</h3><p style={{ marginTop: 4, color: "#98a2b3", fontSize: 11 }}>Pass mark: 12/30 (40%){selectedTier ? ` · Filtered: ${selectedTier}` : ""}</p></div><div style={{ display: "flex", alignItems: "center", gap: 8 }}>{selectedTier && <button className="analysis-secondary" style={{ padding: "5px 8px" }} onClick={() => setSelectedTier(null)}><X size={13} />Clear</button>}<span className="analysis-count">{displayedRows.length} Students</span></div></div>
-            <div className="analysis-table-wrap academic-table-wrap"><table className="analysis-table"><thead><tr><th>Student</th><th>Marks</th><th>Percentage</th><th>Status</th></tr></thead><tbody>{displayedRows.map(row => { const pass = row.marks >= 12, p = Math.round(row.marks / MAX * 100); return <tr key={row.enrollmentNo}><td><span className="student-cell"><span className="student-avatar">{initials(row.name)}</span>{row.name}</span></td><td className={pass ? "change-up" : "change-down"}>{row.marks}</td><td>{p}%</td><td><span className={`trend-badge ${pass ? "trend-up" : "trend-down"}`}>{pass ? "Pass" : "Fail"}</span></td></tr>; })}</tbody></table></div>
-          </section>
-          <div className="analysis-right-stack">
-            <section className="analysis-panel academic-stats-panel"><div className="academic-highest"><span>Highest Score</span><strong>{activeStats.highest}</strong><p>{activeStats.highestNames.join(", ") || "—"}</p></div><div className="academic-tier-grid">{TIERS.map(t => <button key={t} type="button" className="academic-tier-card" onClick={() => setSelectedTier(selectedTier === t ? null : t)} style={{ borderColor: `${COLORS[t]}55`, cursor: "pointer", boxShadow: selectedTier === t ? `0 0 0 2px ${COLORS[t]}33` : undefined }}><span>{t}</span><strong style={{ color: COLORS[t] }}>{activeStats.counts[t]}</strong></button>)}</div></section>
-            <section className="analysis-panel analysis-chart-panel"><h3>Performance Tier</h3><p>Click a chart segment to filter the student table.</p><div className="analysis-chart"><ResponsiveContainer width="100%" height="100%"><PieChart><Pie data={activePie} dataKey="value" nameKey="name" innerRadius={54} outerRadius={82} paddingAngle={3} onClick={(entry: any) => { const t = entry?.name as Tier | undefined; if (t && TIERS.includes(t)) setSelectedTier(selectedTier === t ? null : t); }}>{activePie.map(e => <Cell key={e.name} fill={e.color} cursor="pointer" opacity={!selectedTier || selectedTier === e.name ? 1 : .35} />)}</Pie><Tooltip /></PieChart></ResponsiveContainer></div></section>
-            <div className="academic-rank-grid"><section className="analysis-panel academic-rank-panel"><h3>Top 5 Highest Scorers</h3>{activeStats.sorted.slice(0, 5).map((r, i) => <div className="academic-rank-row" key={r.enrollmentNo}><span>{i + 1}</span><p>{r.name}</p><strong>{r.marks}</strong></div>)}</section><section className="analysis-panel academic-rank-panel"><h3>Bottom 5 At-Risk Students</h3>{[...activeStats.sorted].reverse().slice(0, 5).map((r, i) => <div className="academic-rank-row" key={r.enrollmentNo}><span>{i + 1}</span><p>{r.name}</p><strong className="is-negative">{r.marks}</strong></div>)}</section></div>
-          </div>
-        </section>
-      </>}
-
-      {data && view === "combined" && <>
-        <section className="analysis-hero combined-hero">
-          <div className="analysis-hero-copy"><h2>Midsem Combined</h2><p>Compare both Midsem examinations in one view.</p></div>
-          <Metric label="Students" value={combinedRows.length} detail="combined records" />
-          <Metric label="Class Average" value={combinedAverage} detail="combined average" />
-          <Metric label="Best Score" value={combinedHighest} detail={combinedHighestNames.join(", ") || "best individual result"} />
-        </section>
-        <section className="combined-layout">
-          <section className="analysis-panel analysis-table-panel combined-table-panel">
-            <div className="combined-table-toolbar">
-              <div className="analysis-panel-head"><div><h3>All Students</h3><p style={{ marginTop: 4, color: "#98a2b3", fontSize: 11 }}>{selectedTier ? `Filtered: ${selectedTier}` : "Combined Midsem results"}</p></div><div style={{ display: "flex", alignItems: "center", gap: 8 }}>{selectedTier && <button className="analysis-secondary" style={{ padding: "5px 8px" }} onClick={() => setSelectedTier(null)}><X size={13} />Clear</button>}<span className="analysis-count">{sortedCombinedRows.length} Students</span></div></div>
-              <div className="combined-inline-controls">
-                <label><span>Grade / Sort By</span><select value={combinedSortDraft} onChange={(e) => setCombinedSortDraft(e.target.value as CombinedSort)}><option value="combined">Combined (average)</option><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option><option value="max">Maximum score</option></select></label>
-                <label><span>Order</span><select value={sortOrderDraft} onChange={(e) => setSortOrderDraft(e.target.value as SortOrder)}><option value="desc">High to Low</option><option value="asc">Low to High</option><option value="none">No Sort</option></select></label>
-                <button className="analysis-primary combined-apply-button" onClick={applyCombinedControls}>Apply</button>
-              </div>
-            </div>
-            <div className="analysis-table-wrap combined-table-wrap"><table className="analysis-table"><thead><tr><th>Rank</th><th>Student</th><th>Midsem 1</th><th>Midsem 2</th><th>Combined</th><th>Max</th><th>Grade</th></tr></thead><tbody>{sortedCombinedRows.map((row, index) => { const tier = tierFor(row.combined); return <tr key={row.enrollmentNo}><td>{sortOrder === "none" ? "" : index + 1}</td><td><span className="student-cell"><span className="student-avatar">{initials(row.name)}</span>{row.name}</span></td><td className={combinedSort === "midsem1" ? `tier-mark ${gradeClass(tierFor(row.first))}` : ""}>{row.first}</td><td className={combinedSort === "midsem2" ? `tier-mark ${gradeClass(tierFor(row.second))}` : ""}>{row.second}</td><td className={combinedSort === "combined" ? `tier-mark ${gradeClass(tier)}` : ""}><strong>{row.combined}</strong></td><td className={combinedSort === "max" ? `tier-mark ${gradeClass(tierFor(row.max))}` : ""}>{row.max}</td><td><button type="button" className={`analysis-grade-badge ${gradeClass(tier)}`} onClick={() => setSelectedTier(selectedTier === tier ? null : tier)}>{tier}</button></td></tr>; })}{!sortedCombinedRows.length && <tr><td colSpan={7} style={{ textAlign: "center", padding: 32, color: "#667085" }}>No students match the selected filter.</td></tr>}</tbody></table></div>
-          </section>
-          <div className="combined-right-column">
-            <section className="analysis-panel combined-chart-panel"><div className="combined-panel-title"><div><h3>Grade Distribution</h3><p>Click a bar to filter the table by performance tier.</p></div><span><strong>{combinedRows.length}</strong> Students</span></div><div className="combined-chart"><ResponsiveContainer width="100%" height="100%"><BarChart data={TIERS.map(t => ({ 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); }}><CartesianGrid strokeDasharray="3 3" vertical={false} /><XAxis dataKey="name" fontSize={10} /><YAxis allowDecimals={false} fontSize={11} /><Tooltip /><Bar dataKey="count" radius={[6, 6, 0, 0]}>{TIERS.map(t => <Cell key={t} fill={COLORS[t]} cursor="pointer" opacity={!selectedTier || selectedTier === t ? 1 : .35} />)}</Bar></BarChart></ResponsiveContainer></div></section>
-            <section className="analysis-panel combined-tier-panel"><h3>Performance Tiers</h3><div className="academic-tier-grid">{TIERS.map(t => <button key={t} type="button" className="academic-tier-card" onClick={() => setSelectedTier(selectedTier === t ? null : t)} style={{ borderColor: `${COLORS[t]}55`, cursor: "pointer", boxShadow: selectedTier === t ? `0 0 0 2px ${COLORS[t]}33` : undefined }}><span>{t}</span><strong style={{ color: COLORS[t] }}>{combinedCounts[t]}</strong></button>)}</div></section>
-            <div className="academic-rank-grid"><section className="analysis-panel academic-rank-panel"><h3>Top 5 Highest Scorers</h3>{combinedRankRows.slice(0, 5).map((r, i) => <div className="academic-rank-row" key={r.enrollmentNo}><span>{i + 1}</span><p>{r.name}</p><strong>{r.combined}</strong></div>)}</section><section className="analysis-panel academic-rank-panel"><h3>Bottom 5 At-Risk Students</h3>{[...combinedRankRows].reverse().slice(0, 5).map((r, i) => <div className="academic-rank-row" key={r.enrollmentNo}><span>{i + 1}</span><p>{r.name}</p><strong className="is-negative">{r.combined}</strong></div>)}</section></div>
-          </div>
-        </section>
-      </>}
-
-      {data && view === "summary" && <>
-        <section className="summary-heading"><div><h2>Academic Summary</h2><p>Compare Midsem 1 and Midsem 2 with the same ClassPulse academic analysis theme.</p></div></section>
-        <section className="summary-metric-grid">
-          <Metric label="Overall Class Average" value={summaryAverage} detail="combined average" />
-          <Metric label="Highest Combined Score" value={combinedHighest} detail={combinedHighestNames[0] || "—"} />
-          <Metric label="Overall Pass Rate" value={`${summaryPassRate}%`} detail="students scoring 12 or more" />
-          <Metric label="Midsem 1 Average" value={midsem1Average} detail="out of 30 marks" />
-          <Metric label="Midsem 2 Average" value={midsem2Average} detail="out of 30 marks" />
-        </section>
-
-        <section className="summary-main-grid">
-          <section className="analysis-panel summary-student-panel">
-            <div className="summary-table-toolbar">
-              <div className="analysis-panel-head"><div><h3>Filtered Students</h3><p style={{ marginTop: 4, color: "#98a2b3", fontSize: 11 }}>Showing {summaryRows.length} of {students.length} students</p></div><span className="analysis-count">{summaryRows.length} Students</span></div>
-              <div className="summary-inline-controls">
-                <label><span>Exam</span><select value={summaryExamDraft} onChange={(e) => setSummaryExamDraft(e.target.value as SummaryExam)}><option value="combined">Combined</option><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option><option value="max">Max</option></select></label>
-                <label><span>Performance Tier</span><select value={summaryTierDraft} onChange={(e) => setSummaryTierDraft(e.target.value as Tier | "all")}><option value="all">All Tiers</option>{TIERS.map(t => <option key={t} value={t}>{t}</option>)}</select></label>
-                <label><span>Lower Bound</span><input type="number" min="0" max="30" value={summaryLowerDraft} onChange={(e) => setSummaryLowerDraft(e.target.value)} /></label>
-                <label><span>Upper Bound</span><input type="number" min="0" max="30" value={summaryUpperDraft} onChange={(e) => setSummaryUpperDraft(e.target.value)} /></label>
-                <label><span>Sort</span><select value={summarySortDraft} onChange={(e) => setSummarySortDraft(e.target.value as SummarySort)}><option value="none">No Sort</option><option value="desc">High to Low</option><option value="asc">Low to High</option></select></label>
-                <button className="analysis-primary summary-apply-button" onClick={applySummaryControls}>Apply</button>
-                <button className="analysis-secondary summary-reset-button" onClick={resetSummaryControls}>Reset</button>
-              </div>
-            </div>
-            <div className="analysis-table-wrap summary-table-wrap"><table className="analysis-table"><thead><tr><th>Enrollment</th><th>Student</th><th>Marks</th><th>Tier</th></tr></thead><tbody>{summaryRows.map(row => <tr key={row.enrollmentNo}><td>{row.enrollmentNo}</td><td><span className="student-cell"><span className="student-avatar">{initials(row.name)}</span>{row.name}</span></td><td className={`tier-mark ${gradeClass(row.tier)}`}><strong>{row.marks}</strong></td><td><span className={`analysis-grade-badge ${gradeClass(row.tier)}`}>{row.tier}</span></td></tr>)}{!summaryRows.length && <tr><td colSpan={4} style={{ textAlign: "center", padding: 32, color: "#667085" }}>No students match these filters.</td></tr>}</tbody></table></div>
-          </section>
-
-          <div className="summary-right-column">
-            <section className="analysis-panel summary-rank-panel"><div className="summary-rank-title"><div><h3>Marks Increase (Top 5)</h3><p>Students whose Midsem 2 score improved.</p></div></div>{increases.length ? increases.map((row, i) => <div className="summary-rank-row" key={row.enrollmentNo}><span>{i + 1}.</span><p>{row.name}</p><strong className="change-up">+{row.change}</strong></div>) : <p className="summary-empty">No increases.</p>}</section>
-            <section className="analysis-panel summary-rank-panel"><div className="summary-rank-title"><div><h3>Marks Decrease (Top 5)</h3><p>Students whose Midsem 2 score fell.</p></div></div>{decreases.length ? decreases.map((row, i) => <div className="summary-rank-row" key={row.enrollmentNo}><span>{i + 1}.</span><p>{row.name}</p><strong className="change-down">{row.change}</strong></div>) : <p className="summary-empty">No decreases.</p>}</section>
-          </div>
-        </section>
+        <section className="analysis-hero"><div className="analysis-hero-copy"><h2>{activeLabel}</h2><p>Raw Midsem marks out of 30, class statistics, and performance tiers.</p></div><Metric label="Class Average" value={activeStats.average} detail="out of 30 marks"/><Metric label="Class Median" value={activeStats.median} detail="middle class score"/><Metric label="Pass Rate" value={`${activeStats.passRate}%`} detail="students scoring 12 or more"/></section>
+        <section className="analysis-content-grid academic-content-grid"><section className="analysis-panel analysis-table-panel"><div className="analysis-panel-head"><div><h3>Data Sheet</h3><p style={{marginTop:4,color:"#98a2b3",fontSize:11}}>Pass mark: 12/30 (40%){selectedTier?` · Filtered: ${selectedTier}`:""}</p></div><div style={{display:"flex",alignItems:"center",gap:8}}>{selectedTier&&<button className="analysis-secondary" style={{padding:"5px 8px"}} onClick={()=>setSelectedTier(null)}><X size={13}/>Clear</button>}<span className="analysis-count">{displayedRows.length} Students</span></div></div>
+          <div className="analysis-table-wrap academic-table-wrap"><table className="analysis-table academic-student-table"><colgroup><col className="academic-sno-col"/><col className="academic-enrollment-col"/><col className="academic-name-col"/><col className="academic-marks-col"/><col className="academic-percent-col"/><col className="academic-status-col"/></colgroup><thead><tr><th>S.No.</th><th>Enrollment No.</th><th>Student</th><th>Marks</th><th>Percentage</th><th>Status</th></tr></thead><tbody>{displayedRows.map(row=>{const pass=row.marks>=12,p=Math.round(row.marks/MAX*100);return <tr key={row.enrollmentNo}><td>{row.sno}</td><td className="academic-enrollment-cell">{row.enrollmentNo}</td><td><span className="student-cell"><span className="student-avatar">{initials(row.name)}</span>{row.name}</span></td><td className={pass?"change-up":"change-down"}>{row.marks}</td><td>{p}%</td><td><span className={`trend-badge ${pass?"trend-up":"trend-down"}`}>{pass?"Pass":"Fail"}</span></td></tr>;})}</tbody></table></div>
+        </section><div className="analysis-right-stack"><section className="analysis-panel academic-stats-panel"><div className="academic-highest"><span>Highest Score</span><strong>{activeStats.highest}</strong><p>{activeStats.highestNames.join(", ")||"—"}</p></div><div className="academic-tier-grid">{TIERS.map(t=><button key={t} type="button" className="academic-tier-card" onClick={()=>setSelectedTier(selectedTier===t?null:t)} style={{borderColor:`${COLORS[t]}55`,cursor:"pointer",boxShadow:selectedTier===t?`0 0 0 2px ${COLORS[t]}33`:undefined}}><span>{t}</span><strong style={{color:COLORS[t]}}>{activeStats.counts[t]}</strong></button>)}</div></section><section className="analysis-panel analysis-chart-panel"><h3>Performance Tier</h3><p>Click a chart segment to filter the student table.</p><div className="analysis-chart"><ResponsiveContainer width="100%" height="100%"><PieChart><Pie data={activePie} dataKey="value" nameKey="name" innerRadius={54} outerRadius={82} paddingAngle={3} onClick={(entry:any)=>{const t=entry?.name as Tier|undefined;if(t&&TIERS.includes(t))setSelectedTier(selectedTier===t?null:t);}}>{activePie.map(e=><Cell key={e.name} fill={e.color} cursor="pointer" opacity={!selectedTier||selectedTier===e.name?1:.35}/>)}</Pie><Tooltip/></PieChart></ResponsiveContainer></div></section><div className="academic-rank-grid"><section className="analysis-panel academic-rank-panel"><h3>Top 5 Highest Scorers</h3>{activeStats.sorted.slice(0,5).map((r,i)=><div className="academic-rank-row" key={r.enrollmentNo}><span>{i+1}</span><p>{r.name}</p><strong>{r.marks}</strong></div>)}</section><section className="analysis-panel academic-rank-panel"><h3>Bottom 5 At-Risk Students</h3>{[...activeStats.sorted].reverse().slice(0,5).map((r,i)=><div className="academic-rank-row" key={r.enrollmentNo}><span>{i+1}</span><p>{r.name}</p><strong className="is-negative">{r.marks}</strong></div>)}</section></div></div></section>
       </>}
+      {data && view === "combined" && <><section className="analysis-hero combined-hero"><div className="analysis-hero-copy"><h2>Midsem Combined</h2><p>Compare both Midsem examinations in one view.</p></div><Metric label="Students" value={combinedRows.length} detail="combined records"/><Metric label="Class Average" value={combinedAverage} detail="combined average"/><Metric label="Best Score" value={combinedHighest} detail={combinedHighestNames.join(", ")||"best individual result"}/></section><section className="combined-layout"><section className="analysis-panel analysis-table-panel combined-table-panel"><div className="combined-table-toolbar"><div className="analysis-panel-head"><div><h3>All Students</h3><p style={{marginTop:4,color:"#98a2b3",fontSize:11}}>{selectedTier?`Filtered: ${selectedTier}`:"Combined Midsem results"}</p></div><div style={{display:"flex",alignItems:"center",gap:8}}>{selectedTier&&<button className="analysis-secondary" style={{padding:"5px 8px"}} onClick={()=>setSelectedTier(null)}><X size={13}/>Clear</button>}<span className="analysis-count">{sortedCombinedRows.length} Students</span></div></div><div className="combined-inline-controls"><label><span>Grade / Sort By</span><select value={combinedSortDraft} onChange={e=>setCombinedSortDraft(e.target.value as CombinedSort)}><option value="combined">Combined (average)</option><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option><option value="max">Maximum score</option></select></label><label><span>Order</span><select value={sortOrderDraft} onChange={e=>setSortOrderDraft(e.target.value as SortOrder)}><option value="desc">High to Low</option><option value="asc">Low to High</option><option value="none">No Sort</option></select></label><button className="analysis-primary combined-apply-button" onClick={applyCombinedControls}>Apply</button></div></div><div className="analysis-table-wrap combined-table-wrap"><table className="analysis-table"><thead><tr><th>Rank</th><th>Student</th><th>Midsem 1</th><th>Midsem 2</th><th>Combined</th><th>Max</th><th>Grade</th></tr></thead><tbody>{sortedCombinedRows.map((row,index)=>{const tier=tierFor(row.combined);return <tr key={row.enrollmentNo}><td>{sortOrder==="none"?"":index+1}</td><td><span className="student-cell"><span className="student-avatar">{initials(row.name)}</span>{row.name}</span></td><td>{row.first}</td><td>{row.second}</td><td><strong>{row.combined}</strong></td><td>{row.max}</td><td><button type="button" className={`analysis-grade-badge ${gradeClass(tier)}`} onClick={()=>setSelectedTier(selectedTier===tier?null:tier)}>{tier}</button></td></tr>})}{!sortedCombinedRows.length&&<tr><td colSpan={7} style={{textAlign:"center",padding:32,color:"#667085"}}>No students match the selected filter.</td></tr>}</tbody></table></div></section><div className="combined-right-column"><section className="analysis-panel combined-chart-panel"><div className="combined-panel-title"><div><h3>Grade Distribution</h3><p>Click a bar to filter the table by performance tier.</p></div><span><strong>{combinedRows.length}</strong> Students</span></div><div className="combined-chart"><ResponsiveContainer width="100%" height="100%"><BarChart data={TIERS.map(t=>({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);}}><CartesianGrid strokeDasharray="3 3" vertical={false}/><XAxis dataKey="name" fontSize={10}/><YAxis allowDecimals={false} fontSize={11}/><Tooltip/><Bar dataKey="count" radius={[6,6,0,0]}>{TIERS.map(t=><Cell key={t} fill={COLORS[t]} cursor="pointer" opacity={!selectedTier||selectedTier===t?1:.35}/>)}</Bar></BarChart></ResponsiveContainer></div></section><section className="analysis-panel combined-tier-panel"><h3>Performance Tiers</h3><div className="academic-tier-grid">{TIERS.map(t=><button key={t} type="button" className="academic-tier-card" onClick={()=>setSelectedTier(selectedTier===t?null:t)} style={{borderColor:`${COLORS[t]}55`,cursor:"pointer",boxShadow:selectedTier===t?`0 0 0 2px ${COLORS[t]}33`:undefined}}><span>{t}</span><strong style={{color:COLORS[t]}}>{combinedCounts[t]}</strong></button>)}</div></section><div className="academic-rank-grid"><section className="analysis-panel academic-rank-panel"><h3>Top 5 Highest Scorers</h3>{combinedRankRows.slice(0,5).map((r,i)=><div className="academic-rank-row" key={r.enrollmentNo}><span>{i+1}</span><p>{r.name}</p><strong>{r.combined}</strong></div>)}</section><section className="analysis-panel academic-rank-panel"><h3>Bottom 5 At-Risk Students</h3>{[...combinedRankRows].reverse().slice(0,5).map((r,i)=><div className="academic-rank-row" key={r.enrollmentNo}><span>{i+1}</span><p>{r.name}</p><strong className="is-negative">{r.combined}</strong></div>)}</section></div></div></section></>}
+      {data && view === "summary" && <><section className="summary-heading"><div><h2>Academic Summary</h2><p>Compare Midsem 1 and Midsem 2 with the same ClassPulse academic analysis theme.</p></div></section><section className="summary-metric-grid"><Metric label="Overall Class Average" value={summaryAverage} detail="combined average"/><Metric label="Highest Combined Score" value={combinedHighest} detail={combinedHighestNames[0]||"—"}/><Metric label="Overall Pass Rate" value={`${summaryPassRate}%`} detail="students scoring 12 or more"/><Metric label="Midsem 1 Average" value={midsem1.average} detail="out of 30 marks"/><Metric label="Midsem 2 Average" value={midsem2.average} detail="out of 30 marks"/></section><section className="summary-main-grid"><section className="analysis-panel summary-student-panel"><div className="summary-table-toolbar"><div className="analysis-panel-head"><div><h3>Filtered Students</h3><p style={{marginTop:4,color:"#98a2b3",fontSize:11}}>Showing {summaryRows.length} of {students.length} students</p></div><span className="analysis-count">{summaryRows.length} Students</span></div><div className="summary-inline-controls"><label><span>Exam</span><select value={summaryExamDraft} onChange={e=>setSummaryExamDraft(e.target.value as SummaryExam)}><option value="combined">Combined</option><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option><option value="max">Max</option></select></label><label><span>Performance Tier</span><select value={summaryTierDraft} onChange={e=>setSummaryTierDraft(e.target.value as Tier|"all")}><option value="all">All Tiers</option>{TIERS.map(t=><option key={t} value={t}>{t}</option>)}</select></label><label><span>Lower Bound</span><input type="number" min="0" max="30" value={summaryLowerDraft} onChange={e=>setSummaryLowerDraft(e.target.value)}/></label><label><span>Upper Bound</span><input type="number" min="0" max="30" value={summaryUpperDraft} onChange={e=>setSummaryUpperDraft(e.target.value)}/></label><label><span>Sort</span><select value={summarySortDraft} onChange={e=>setSummarySortDraft(e.target.value as SummarySort)}><option value="none">No Sort</option><option value="desc">High to Low</option><option value="asc">Low to High</option></select></label><button className="analysis-primary summary-apply-button" onClick={applySummaryControls}>Apply</button><button className="analysis-secondary summary-reset-button" onClick={resetSummaryControls}>Reset</button></div></div><div className="analysis-table-wrap summary-table-wrap"><table className="analysis-table"><thead><tr><th>Enrollment</th><th>Student</th><th>Marks</th><th>Tier</th></tr></thead><tbody>{summaryRows.map(row=><tr key={row.enrollmentNo}><td>{row.enrollmentNo}</td><td><span className="student-cell"><span className="student-avatar">{initials(row.name)}</span>{row.name}</span></td><td className={`tier-mark ${gradeClass(row.tier)}`}><strong>{row.marks}</strong></td><td><span className={`analysis-grade-badge ${gradeClass(row.tier)}`}>{row.tier}</span></td></tr>)}{!summaryRows.length&&<tr><td colSpan={4} style={{textAlign:"center",padding:32,color:"#667085"}}>No students match these filters.</td></tr>}</tbody></table></div></section><div className="summary-right-column"><section className="analysis-panel summary-rank-panel"><div className="summary-rank-title"><div><h3>Marks Increase (Top 5)</h3><p>Students whose Midsem 2 score improved.</p></div></div>{increases.length?increases.map((row,i)=><div className="summary-rank-row" key={row.enrollmentNo}><span>{i+1}.</span><p>{row.name}</p><strong className="change-up">+{row.change}</strong></div>):<p className="summary-empty">No increases.</p>}</section><section className="analysis-panel summary-rank-panel"><div className="summary-rank-title"><div><h3>Marks Decrease (Top 5)</h3><p>Students whose Midsem 2 score fell.</p></div></div>{decreases.length?decreases.map((row,i)=><div className="summary-rank-row" key={row.enrollmentNo}><span>{i+1}.</span><p>{row.name}</p><strong className="change-down">{row.change}</strong></div>):<p className="summary-empty">No decreases.</p>}</section></div></section></>}
     </main>
-
     <style jsx global>{`
-      .combined-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(360px, .95fr); gap: 16px; align-items: start; }
-      .combined-table-toolbar, .summary-table-toolbar { display: grid; gap: 12px; }
-      .combined-inline-controls { display: grid; grid-template-columns: 1.35fr 1fr auto; gap: 10px; align-items: end; }
-      .summary-inline-controls { display: grid; grid-template-columns: 1.05fr 1.1fr .75fr .75fr .95fr auto auto; gap: 8px; align-items: end; }
-      .combined-inline-controls label, .summary-inline-controls label { min-width: 0; }
-      .combined-inline-controls label > span, .summary-inline-controls label > span { display: block; margin: 0 0 6px; color: #667085; font-size: 10px; font-weight: 600; }
-      .combined-inline-controls select, .summary-inline-controls select, .summary-inline-controls input { width: 100%; height: 38px; border: 1px solid #d8e0ea; border-radius: 9px; background: #fff; color: #344054; padding: 0 10px; font-size: 12px; outline: none; box-sizing: border-box; }
-      .combined-inline-controls select:focus, .summary-inline-controls select:focus, .summary-inline-controls input:focus { border-color: #4b2e91; box-shadow: 0 0 0 2px rgba(75,46,145,.12); }
-      .combined-apply-button, .summary-apply-button, .summary-reset-button { height: 38px; white-space: nowrap; }
-      .combined-table-wrap { min-height: 560px; max-height: 560px; }
-      .combined-table-panel .analysis-table { table-layout: fixed; }
-      .combined-table-panel .analysis-table th, .combined-table-panel .analysis-table td { white-space: nowrap; }
-      .combined-table-panel .analysis-table th:nth-child(1), .combined-table-panel .analysis-table td:nth-child(1) { width: 55px; }
-      .combined-table-panel .analysis-table th:nth-child(2), .combined-table-panel .analysis-table td:nth-child(2) { width: 28%; }
-      .combined-table-panel .analysis-table th:nth-child(3), .combined-table-panel .analysis-table td:nth-child(3), .combined-table-panel .analysis-table th:nth-child(4), .combined-table-panel .analysis-table td:nth-child(4), .combined-table-panel .analysis-table th:nth-child(5), .combined-table-panel .analysis-table td:nth-child(5), .combined-table-panel .analysis-table th:nth-child(6), .combined-table-panel .analysis-table td:nth-child(6) { width: 11%; }
-      .combined-table-panel .analysis-table th:nth-child(7), .combined-table-panel .analysis-table td:nth-child(7) { width: 16%; }
-      .combined-table-panel .analysis-table th:not(:nth-child(2)), .combined-table-panel .analysis-table td:not(:nth-child(2)) { text-align: center; }
-      .combined-right-column { display: grid; gap: 16px; }
-      .combined-chart-panel { padding: 18px; }
-      .combined-panel-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
-      .combined-panel-title h3 { margin: 0; }
-      .combined-panel-title p { margin: 5px 0 0; color: #98a2b3; font-size: 11px; }
-      .combined-panel-title > span { color: #98a2b3; font-size: 11px; white-space: nowrap; }
-      .combined-panel-title > span strong { color: #344054; }
-      .combined-chart { height: 300px; margin-top: 10px; }
-      .combined-tier-panel { padding: 18px; }
-      .tier-mark { font-weight: 700; }
-      .tier-mark.excellent { color: #2563eb !important; }
-      .tier-mark.good { color: #15966a !important; }
-      .tier-mark.attention { color: #f59e0b !important; }
-      .tier-mark.risk { color: #ef4444 !important; }
-      .combined-hero .analysis-metric:nth-child(2), .summary-metric-grid .analysis-metric:nth-child(1) { border-top: 3px solid #4d75d0; }
-      .combined-hero .analysis-metric:nth-child(3), .summary-metric-grid .analysis-metric:nth-child(2) { border-top: 3px solid #15966a; }
-      .combined-hero .analysis-metric:nth-child(4), .summary-metric-grid .analysis-metric:nth-child(3) { border-top: 3px solid #f59e0b; }
-      .summary-metric-grid .analysis-metric:nth-child(4) { border-top: 3px solid #4d75d0; }
-      .summary-metric-grid .analysis-metric:nth-child(5) { border-top: 3px solid #15966a; }
-
-      .summary-heading { margin: 4px 0 18px; }
-      .summary-heading h2 { margin: 0; font-size: 22px; }
-      .summary-heading p { margin: 6px 0 0; color: #667085; font-size: 13px; }
-      .summary-metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
-      .summary-main-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(340px, .9fr); gap: 16px; align-items: start; }
-      .summary-student-panel { min-width: 0; }
-      .summary-table-wrap { max-height: 650px; min-height: 650px; overflow: auto; }
-      .summary-table-wrap .analysis-table { table-layout: fixed; }
-      .summary-table-wrap .analysis-table th, .summary-table-wrap .analysis-table td { white-space: nowrap; }
-      .summary-table-wrap .analysis-table th:nth-child(1), .summary-table-wrap .analysis-table td:nth-child(1) { width: 24%; }
-      .summary-table-wrap .analysis-table th:nth-child(2), .summary-table-wrap .analysis-table td:nth-child(2) { width: 40%; }
-      .summary-table-wrap .analysis-table th:nth-child(3), .summary-table-wrap .analysis-table td:nth-child(3) { width: 16%; text-align: center; }
-      .summary-table-wrap .analysis-table th:nth-child(4), .summary-table-wrap .analysis-table td:nth-child(4) { width: 20%; text-align: center; }
-      .summary-right-column { display: grid; gap: 16px; }
-      .summary-rank-panel { padding: 18px; }
-      .summary-rank-title h3 { margin: 0; }
-      .summary-rank-title p { margin: 5px 0 12px; color: #98a2b3; font-size: 11px; }
-      .summary-rank-row { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #eef1f5; font-size: 12px; }
-      .summary-rank-row:last-child { border-bottom: 0; }
-      .summary-rank-row > span { color: #667085; }
-      .summary-rank-row p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #344054; }
-      .summary-rank-row strong { font-size: 12px; }
-      .summary-empty { color: #98a2b3; font-size: 12px; margin: 10px 0 0; }
-
-      @media (max-width: 1200px) {
-        .combined-layout, .summary-main-grid { grid-template-columns: 1fr; }
-        .combined-right-column { grid-template-columns: 1fr 1fr; }
-        .combined-right-column .academic-rank-grid { grid-column: 1 / -1; }
-        .summary-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-        .combined-inline-controls { grid-template-columns: 1fr 1fr auto; }
-        .summary-inline-controls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
-      }
-      @media (max-width: 800px) {
-        .combined-layout, .summary-main-grid { grid-template-columns: 1fr; }
-        .combined-right-column, .summary-metric-grid { grid-template-columns: 1fr; }
-        .combined-inline-controls, .summary-inline-controls { grid-template-columns: 1fr; }
-        .combined-table-wrap, .summary-table-wrap { min-height: 480px; max-height: 480px; }
-      }
+      .academic-student-table { table-layout: fixed; }
+      .academic-student-table th, .academic-student-table td { padding: 10px 12px !important; vertical-align: middle; white-space: nowrap; }
+      .academic-student-table th { font-size: 10px; }
+      .academic-student-table td { font-size: 11px; }
+      .academic-sno-col { width: 7%; }
+      .academic-enrollment-col { width: 18%; }
+      .academic-name-col { width: 29%; }
+      .academic-marks-col { width: 13%; }
+      .academic-percent-col { width: 13%; }
+      .academic-status-col { width: 20%; }
+      .academic-student-table th:not(:nth-child(3)), .academic-student-table td:not(:nth-child(3)) { text-align: center; }
+      .academic-student-table th:nth-child(3), .academic-student-table td:nth-child(3) { text-align: left; }
+      .academic-student-table .student-cell { justify-content: flex-start; }
+      .academic-enrollment-cell { color: #667085; font-variant-numeric: tabular-nums; }
+      .combined-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(360px,.95fr); gap:16px; align-items:start; }
+      .combined-table-toolbar,.summary-table-toolbar { display:grid; gap:12px; }
+      .combined-inline-controls { display:grid; grid-template-columns:1.35fr 1fr auto; gap:10px; align-items:end; }
+      .summary-inline-controls { display:grid; grid-template-columns:1.05fr 1.1fr .75fr .75fr .95fr auto auto; gap:8px; align-items:end; }
+      .combined-inline-controls label,.summary-inline-controls label { min-width:0; }
+      .combined-inline-controls label>span,.summary-inline-controls label>span { display:block; margin:0 0 6px; color:#667085; font-size:10px; font-weight:600; }
+      .combined-inline-controls select,.summary-inline-controls select,.summary-inline-controls input { width:100%; height:38px; border:1px solid #d8e0ea; border-radius:9px; background:#fff; color:#344054; padding:0 10px; font-size:12px; outline:none; box-sizing:border-box; }
+      .combined-inline-controls select:focus,.summary-inline-controls select:focus,.summary-inline-controls input:focus { border-color:#4b2e91; box-shadow:0 0 0 2px rgba(75,46,145,.12); }
+      .combined-apply-button,.summary-apply-button,.summary-reset-button { height:38px; white-space:nowrap; }
+      .combined-table-wrap { min-height:560px; max-height:560px; }
+      .combined-table-panel .analysis-table { table-layout:fixed; }
+      .combined-table-panel .analysis-table th,.combined-table-panel .analysis-table td { white-space:nowrap; }
+      .combined-table-panel .analysis-table th:nth-child(1),.combined-table-panel .analysis-table td:nth-child(1) { width:55px; }
+      .combined-table-panel .analysis-table th:nth-child(2),.combined-table-panel .analysis-table td:nth-child(2) { width:28%; }
+      .combined-table-panel .analysis-table th:nth-child(3),.combined-table-panel .analysis-table td:nth-child(3),.combined-table-panel .analysis-table th:nth-child(4),.combined-table-panel .analysis-table td:nth-child(4),.combined-table-panel .analysis-table th:nth-child(5),.combined-table-panel .analysis-table td:nth-child(5),.combined-table-panel .analysis-table th:nth-child(6),.combined-table-panel .analysis-table td:nth-child(6) { width:11%; }
+      .combined-table-panel .analysis-table th:nth-child(7),.combined-table-panel .analysis-table td:nth-child(7) { width:16%; }
+      .combined-table-panel .analysis-table th:not(:nth-child(2)),.combined-table-panel .analysis-table td:not(:nth-child(2)) { text-align:center; }
+      .combined-right-column { display:grid; gap:16px; }
+      .combined-chart-panel { padding:18px; }
+      .combined-panel-title { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
+      .combined-panel-title h3 { margin:0; }.combined-panel-title p { margin:5px 0 0; color:#98a2b3; font-size:11px; }.combined-panel-title>span { color:#98a2b3; font-size:11px; white-space:nowrap; }.combined-panel-title>span strong { color:#344054; }.combined-chart { height:300px; margin-top:10px; }.combined-tier-panel { padding:18px; }
+      .tier-mark { font-weight:700; }.tier-mark.excellent { color:#2563eb!important; }.tier-mark.good { color:#15966a!important; }.tier-mark.attention { color:#f59e0b!important; }.tier-mark.risk { color:#ef4444!important; }
+      .summary-heading { margin:4px 0 18px; }.summary-heading h2 { margin:0; font-size:22px; }.summary-heading p { margin:6px 0 0; color:#667085; font-size:13px; }.summary-metric-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:16px; }.summary-main-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(340px,.9fr); gap:16px; align-items:start; }.summary-student-panel { min-width:0; }.summary-table-wrap { max-height:650px; min-height:650px; overflow:auto; }.summary-table-wrap .analysis-table { table-layout:fixed; }.summary-table-wrap .analysis-table th,.summary-table-wrap .analysis-table td { white-space:nowrap; }.summary-table-wrap .analysis-table th:nth-child(1),.summary-table-wrap .analysis-table td:nth-child(1) { width:24%; }.summary-table-wrap .analysis-table th:nth-child(2),.summary-table-wrap .analysis-table td:nth-child(2) { width:40%; }.summary-table-wrap .analysis-table th:nth-child(3),.summary-table-wrap .analysis-table td:nth-child(3) { width:16%; text-align:center; }.summary-table-wrap .analysis-table th:nth-child(4),.summary-table-wrap .analysis-table td:nth-child(4) { width:20%; text-align:center; }.summary-right-column { display:grid; gap:16px; }.summary-rank-panel { padding:18px; }.summary-rank-title h3 { margin:0; }.summary-rank-title p { margin:5px 0 12px; color:#98a2b3; font-size:11px; }.summary-rank-row { display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid #eef1f5; font-size:12px; }.summary-rank-row:last-child { border-bottom:0; }.summary-rank-row>span { color:#667085; }.summary-rank-row p { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#344054; }.summary-rank-row strong { font-size:12px; }.summary-empty { color:#98a2b3; font-size:12px; margin:10px 0 0; }
+      @media (max-width:1200px) { .combined-layout,.summary-main-grid { grid-template-columns:1fr; }.combined-right-column { grid-template-columns:1fr 1fr; }.combined-right-column .academic-rank-grid { grid-column:1/-1; }.summary-metric-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.combined-inline-controls { grid-template-columns:1fr 1fr auto; }.summary-inline-controls { grid-template-columns:repeat(4,minmax(0,1fr)); } }
+      @media (max-width:800px) { .combined-right-column,.summary-metric-grid { grid-template-columns:1fr; }.combined-inline-controls,.summary-inline-controls { grid-template-columns:1fr; }.combined-table-wrap,.summary-table-wrap { min-height:480px; max-height:480px; }.academic-student-table { min-width:760px; } }
     `}</style>
   </div>;
 }

From c6d49ba0d51ff827f16101eb78876a2dc8649b28 Mon Sep 17 00:00:00 2001
From: k2the4 <kvasisth2000@gmail.com>
Date: Tue, 1 Sep 2026 00:41:14 +0530
Subject: [PATCH 80/80] Refine Midsem student table layout

---
 .../subject-analysis/[subjectId]/academic.tsx | 25 +++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/pages/subject-analysis/[subjectId]/academic.tsx b/pages/subject-analysis/[subjectId]/academic.tsx
index cf6e638..5e1225c 100644
--- a/pages/subject-analysis/[subjectId]/academic.tsx
+++ b/pages/subject-analysis/[subjectId]/academic.tsx
@@ -90,7 +90,13 @@ export default function SubjectAcademicPage() {
 
   const students = data?.students || [];
   const statsFor = (exam: "midsem1" | "midsem2") => {
-    const rows = students.map((s: any, index: number) => ({ sno: index + 1, 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<string, number>();
+    [...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<Tier, number>);
@@ -134,26 +140,25 @@ export default function SubjectAcademicPage() {
       {data && (view === "midsem1" || view === "midsem2") && <>
         <section className="analysis-hero"><div className="analysis-hero-copy"><h2>{activeLabel}</h2><p>Raw Midsem marks out of 30, class statistics, and performance tiers.</p></div><Metric label="Class Average" value={activeStats.average} detail="out of 30 marks"/><Metric label="Class Median" value={activeStats.median} detail="middle class score"/><Metric label="Pass Rate" value={`${activeStats.passRate}%`} detail="students scoring 12 or more"/></section>
         <section className="analysis-content-grid academic-content-grid"><section className="analysis-panel analysis-table-panel"><div className="analysis-panel-head"><div><h3>Data Sheet</h3><p style={{marginTop:4,color:"#98a2b3",fontSize:11}}>Pass mark: 12/30 (40%){selectedTier?` · Filtered: ${selectedTier}`:""}</p></div><div style={{display:"flex",alignItems:"center",gap:8}}>{selectedTier&&<button className="analysis-secondary" style={{padding:"5px 8px"}} onClick={()=>setSelectedTier(null)}><X size={13}/>Clear</button>}<span className="analysis-count">{displayedRows.length} Students</span></div></div>
-          <div className="analysis-table-wrap academic-table-wrap"><table className="analysis-table academic-student-table"><colgroup><col className="academic-sno-col"/><col className="academic-enrollment-col"/><col className="academic-name-col"/><col className="academic-marks-col"/><col className="academic-percent-col"/><col className="academic-status-col"/></colgroup><thead><tr><th>S.No.</th><th>Enrollment No.</th><th>Student</th><th>Marks</th><th>Percentage</th><th>Status</th></tr></thead><tbody>{displayedRows.map(row=>{const pass=row.marks>=12,p=Math.round(row.marks/MAX*100);return <tr key={row.enrollmentNo}><td>{row.sno}</td><td className="academic-enrollment-cell">{row.enrollmentNo}</td><td><span className="student-cell"><span className="student-avatar">{initials(row.name)}</span>{row.name}</span></td><td className={pass?"change-up":"change-down"}>{row.marks}</td><td>{p}%</td><td><span className={`trend-badge ${pass?"trend-up":"trend-down"}`}>{pass?"Pass":"Fail"}</span></td></tr>;})}</tbody></table></div>
+          <div className="analysis-table-wrap academic-table-wrap"><table className="analysis-table academic-student-table"><colgroup><col className="academic-sno-col"/><col className="academic-enrollment-col"/><col className="academic-name-col"/><col className="academic-marks-col"/><col className="academic-status-col"/><col className="academic-rank-col"/></colgroup><thead><tr><th>S.No.</th><th>Enrollment No.</th><th>Student</th><th>Marks</th><th>Status</th><th>Rank</th></tr></thead><tbody>{displayedRows.map(row=>{const pass=row.marks>=12;return <tr key={row.enrollmentNo}><td>{row.sno}</td><td className="academic-enrollment-cell">{row.enrollmentNo}</td><td>{row.name}</td><td className={pass?"change-up":"change-down"}>{row.marks}</td><td><span className={`trend-badge ${pass?"trend-up":"trend-down"}`}>{pass?"Pass":"Fail"}</span></td><td>{row.rank}</td></tr>;})}</tbody></table></div>
         </section><div className="analysis-right-stack"><section className="analysis-panel academic-stats-panel"><div className="academic-highest"><span>Highest Score</span><strong>{activeStats.highest}</strong><p>{activeStats.highestNames.join(", ")||"—"}</p></div><div className="academic-tier-grid">{TIERS.map(t=><button key={t} type="button" className="academic-tier-card" onClick={()=>setSelectedTier(selectedTier===t?null:t)} style={{borderColor:`${COLORS[t]}55`,cursor:"pointer",boxShadow:selectedTier===t?`0 0 0 2px ${COLORS[t]}33`:undefined}}><span>{t}</span><strong style={{color:COLORS[t]}}>{activeStats.counts[t]}</strong></button>)}</div></section><section className="analysis-panel analysis-chart-panel"><h3>Performance Tier</h3><p>Click a chart segment to filter the student table.</p><div className="analysis-chart"><ResponsiveContainer width="100%" height="100%"><PieChart><Pie data={activePie} dataKey="value" nameKey="name" innerRadius={54} outerRadius={82} paddingAngle={3} onClick={(entry:any)=>{const t=entry?.name as Tier|undefined;if(t&&TIERS.includes(t))setSelectedTier(selectedTier===t?null:t);}}>{activePie.map(e=><Cell key={e.name} fill={e.color} cursor="pointer" opacity={!selectedTier||selectedTier===e.name?1:.35}/>)}</Pie><Tooltip/></PieChart></ResponsiveContainer></div></section><div className="academic-rank-grid"><section className="analysis-panel academic-rank-panel"><h3>Top 5 Highest Scorers</h3>{activeStats.sorted.slice(0,5).map((r,i)=><div className="academic-rank-row" key={r.enrollmentNo}><span>{i+1}</span><p>{r.name}</p><strong>{r.marks}</strong></div>)}</section><section className="analysis-panel academic-rank-panel"><h3>Bottom 5 At-Risk Students</h3>{[...activeStats.sorted].reverse().slice(0,5).map((r,i)=><div className="academic-rank-row" key={r.enrollmentNo}><span>{i+1}</span><p>{r.name}</p><strong className="is-negative">{r.marks}</strong></div>)}</section></div></div></section>
       </>}
       {data && view === "combined" && <><section className="analysis-hero combined-hero"><div className="analysis-hero-copy"><h2>Midsem Combined</h2><p>Compare both Midsem examinations in one view.</p></div><Metric label="Students" value={combinedRows.length} detail="combined records"/><Metric label="Class Average" value={combinedAverage} detail="combined average"/><Metric label="Best Score" value={combinedHighest} detail={combinedHighestNames.join(", ")||"best individual result"}/></section><section className="combined-layout"><section className="analysis-panel analysis-table-panel combined-table-panel"><div className="combined-table-toolbar"><div className="analysis-panel-head"><div><h3>All Students</h3><p style={{marginTop:4,color:"#98a2b3",fontSize:11}}>{selectedTier?`Filtered: ${selectedTier}`:"Combined Midsem results"}</p></div><div style={{display:"flex",alignItems:"center",gap:8}}>{selectedTier&&<button className="analysis-secondary" style={{padding:"5px 8px"}} onClick={()=>setSelectedTier(null)}><X size={13}/>Clear</button>}<span className="analysis-count">{sortedCombinedRows.length} Students</span></div></div><div className="combined-inline-controls"><label><span>Grade / Sort By</span><select value={combinedSortDraft} onChange={e=>setCombinedSortDraft(e.target.value as CombinedSort)}><option value="combined">Combined (average)</option><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option><option value="max">Maximum score</option></select></label><label><span>Order</span><select value={sortOrderDraft} onChange={e=>setSortOrderDraft(e.target.value as SortOrder)}><option value="desc">High to Low</option><option value="asc">Low to High</option><option value="none">No Sort</option></select></label><button className="analysis-primary combined-apply-button" onClick={applyCombinedControls}>Apply</button></div></div><div className="analysis-table-wrap combined-table-wrap"><table className="analysis-table"><thead><tr><th>Rank</th><th>Student</th><th>Midsem 1</th><th>Midsem 2</th><th>Combined</th><th>Max</th><th>Grade</th></tr></thead><tbody>{sortedCombinedRows.map((row,index)=>{const tier=tierFor(row.combined);return <tr key={row.enrollmentNo}><td>{sortOrder==="none"?"":index+1}</td><td><span className="student-cell"><span className="student-avatar">{initials(row.name)}</span>{row.name}</span></td><td>{row.first}</td><td>{row.second}</td><td><strong>{row.combined}</strong></td><td>{row.max}</td><td><button type="button" className={`analysis-grade-badge ${gradeClass(tier)}`} onClick={()=>setSelectedTier(selectedTier===tier?null:tier)}>{tier}</button></td></tr>})}{!sortedCombinedRows.length&&<tr><td colSpan={7} style={{textAlign:"center",padding:32,color:"#667085"}}>No students match the selected filter.</td></tr>}</tbody></table></div></section><div className="combined-right-column"><section className="analysis-panel combined-chart-panel"><div className="combined-panel-title"><div><h3>Grade Distribution</h3><p>Click a bar to filter the table by performance tier.</p></div><span><strong>{combinedRows.length}</strong> Students</span></div><div className="combined-chart"><ResponsiveContainer width="100%" height="100%"><BarChart data={TIERS.map(t=>({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);}}><CartesianGrid strokeDasharray="3 3" vertical={false}/><XAxis dataKey="name" fontSize={10}/><YAxis allowDecimals={false} fontSize={11}/><Tooltip/><Bar dataKey="count" radius={[6,6,0,0]}>{TIERS.map(t=><Cell key={t} fill={COLORS[t]} cursor="pointer" opacity={!selectedTier||selectedTier===t?1:.35}/>)}</Bar></BarChart></ResponsiveContainer></div></section><section className="analysis-panel combined-tier-panel"><h3>Performance Tiers</h3><div className="academic-tier-grid">{TIERS.map(t=><button key={t} type="button" className="academic-tier-card" onClick={()=>setSelectedTier(selectedTier===t?null:t)} style={{borderColor:`${COLORS[t]}55`,cursor:"pointer",boxShadow:selectedTier===t?`0 0 0 2px ${COLORS[t]}33`:undefined}}><span>{t}</span><strong style={{color:COLORS[t]}}>{combinedCounts[t]}</strong></button>)}</div></section><div className="academic-rank-grid"><section className="analysis-panel academic-rank-panel"><h3>Top 5 Highest Scorers</h3>{combinedRankRows.slice(0,5).map((r,i)=><div className="academic-rank-row" key={r.enrollmentNo}><span>{i+1}</span><p>{r.name}</p><strong>{r.combined}</strong></div>)}</section><section className="analysis-panel academic-rank-panel"><h3>Bottom 5 At-Risk Students</h3>{[...combinedRankRows].reverse().slice(0,5).map((r,i)=><div className="academic-rank-row" key={r.enrollmentNo}><span>{i+1}</span><p>{r.name}</p><strong className="is-negative">{r.combined}</strong></div>)}</section></div></div></section></>}
-      {data && view === "summary" && <><section className="summary-heading"><div><h2>Academic Summary</h2><p>Compare Midsem 1 and Midsem 2 with the same ClassPulse academic analysis theme.</p></div></section><section className="summary-metric-grid"><Metric label="Overall Class Average" value={summaryAverage} detail="combined average"/><Metric label="Highest Combined Score" value={combinedHighest} detail={combinedHighestNames[0]||"—"}/><Metric label="Overall Pass Rate" value={`${summaryPassRate}%`} detail="students scoring 12 or more"/><Metric label="Midsem 1 Average" value={midsem1.average} detail="out of 30 marks"/><Metric label="Midsem 2 Average" value={midsem2.average} detail="out of 30 marks"/></section><section className="summary-main-grid"><section className="analysis-panel summary-student-panel"><div className="summary-table-toolbar"><div className="analysis-panel-head"><div><h3>Filtered Students</h3><p style={{marginTop:4,color:"#98a2b3",fontSize:11}}>Showing {summaryRows.length} of {students.length} students</p></div><span className="analysis-count">{summaryRows.length} Students</span></div><div className="summary-inline-controls"><label><span>Exam</span><select value={summaryExamDraft} onChange={e=>setSummaryExamDraft(e.target.value as SummaryExam)}><option value="combined">Combined</option><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option><option value="max">Max</option></select></label><label><span>Performance Tier</span><select value={summaryTierDraft} onChange={e=>setSummaryTierDraft(e.target.value as Tier|"all")}><option value="all">All Tiers</option>{TIERS.map(t=><option key={t} value={t}>{t}</option>)}</select></label><label><span>Lower Bound</span><input type="number" min="0" max="30" value={summaryLowerDraft} onChange={e=>setSummaryLowerDraft(e.target.value)}/></label><label><span>Upper Bound</span><input type="number" min="0" max="30" value={summaryUpperDraft} onChange={e=>setSummaryUpperDraft(e.target.value)}/></label><label><span>Sort</span><select value={summarySortDraft} onChange={e=>setSummarySortDraft(e.target.value as SummarySort)}><option value="none">No Sort</option><option value="desc">High to Low</option><option value="asc">Low to High</option></select></label><button className="analysis-primary summary-apply-button" onClick={applySummaryControls}>Apply</button><button className="analysis-secondary summary-reset-button" onClick={resetSummaryControls}>Reset</button></div></div><div className="analysis-table-wrap summary-table-wrap"><table className="analysis-table"><thead><tr><th>Enrollment</th><th>Student</th><th>Marks</th><th>Tier</th></tr></thead><tbody>{summaryRows.map(row=><tr key={row.enrollmentNo}><td>{row.enrollmentNo}</td><td><span className="student-cell"><span className="student-avatar">{initials(row.name)}</span>{row.name}</span></td><td className={`tier-mark ${gradeClass(row.tier)}`}><strong>{row.marks}</strong></td><td><span className={`analysis-grade-badge ${gradeClass(row.tier)}`}>{row.tier}</span></td></tr>)}{!summaryRows.length&&<tr><td colSpan={4} style={{textAlign:"center",padding:32,color:"#667085"}}>No students match these filters.</td></tr>}</tbody></table></div></section><div className="summary-right-column"><section className="analysis-panel summary-rank-panel"><div className="summary-rank-title"><div><h3>Marks Increase (Top 5)</h3><p>Students whose Midsem 2 score improved.</p></div></div>{increases.length?increases.map((row,i)=><div className="summary-rank-row" key={row.enrollmentNo}><span>{i+1}.</span><p>{row.name}</p><strong className="change-up">+{row.change}</strong></div>):<p className="summary-empty">No increases.</p>}</section><section className="analysis-panel summary-rank-panel"><div className="summary-rank-title"><div><h3>Marks Decrease (Top 5)</h3><p>Students whose Midsem 2 score fell.</p></div></div>{decreases.length?decreases.map((row,i)=><div className="summary-rank-row" key={row.enrollmentNo}><span>{i+1}.</span><p>{row.name}</p><strong className="change-down">{row.change}</strong></div>):<p className="summary-empty">No decreases.</p>}</section></div></section></>}
+      {data && view === "summary" && <><section className="summary-heading"><div><h2>Academic Summary</h2><p>Compare Midsem 1 and Midsem 2 with the same ClassPulse academic analysis theme.</p></div></section><section className="summary-metric-grid"><Metric label="Overall Class Average" value={summaryAverage} detail="combined average"/><Metric label="Highest Combined Score" value={combinedHighest} detail={combinedHighestNames[0]||"—"}/><Metric label="Overall Pass Rate" value={`${summaryPassRate}%`} detail="students scoring 12 or more"/><Metric label="Midsem 1 Average" value={midsem1.average} detail="out of 30 marks"/><Metric label="Midsem 2 Average" value={midsem2.average} detail="out of 30 marks"/></section><section className="summary-main-grid"><section className="analysis-panel summary-student-panel"><div className="summary-table-toolbar"><div className="analysis-panel-head"><div><h3>Filtered Students</h3><p style={{marginTop:4,color:"#98a2b3",fontSize:11}}>Showing {summaryRows.length} of {students.length} students</p></div><span className="analysis-count">{summaryRows.length} Students</span></div><div className="summary-inline-controls"><label><span>Exam</span><select value={summaryExamDraft} onChange={e=>setSummaryExamDraft(e.target.value as SummaryExam)}><option value="combined">Combined</option><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option><option value="max">Max</option></select></label><label><span>Performance Tier</span><select value={summaryTierDraft} onChange={e=>setSummaryTierDraft(e.target.value as Tier|"all")}><option value="all">All Tiers</option>{TIERS.map(t=><option key={t} value={t}>{t}</option>)}</select></label><label><span>Lower Bound</span><input type="number" min="0" max="30" value={summaryLowerDraft} onChange={e=>setSummaryLowerDraft(e.target.value)}/></label><label><span>Upper Bound</span><input type="number" min="0" max="30" value={summaryUpperDraft} onChange={e=>setSummaryUpperDraft(e.target.value)}/></label><label><span>Sort</span><select value={summarySortDraft} onChange={e=>setSummarySortDraft(e.target.value as SummarySort)}><option value="none">No Sort</option><option value="desc">High to Low</option><option value="asc">Low to High</option></select></label><button className="analysis-primary summary-apply-button" onClick={applySummaryControls}>Apply</button><button className="analysis-secondary summary-reset-button" onClick={resetSummaryControls}>Reset</button></div></div><div className="analysis-table-wrap summary-table-wrap"><table className="analysis-table"><thead><tr><th>Enrollment</th><th>Student</th><th>Marks</th><th>Tier</th></tr></thead><tbody>{summaryRows.map(row=><tr key={row.enrollmentNo}><td>{row.enrollmentNo}</td><td><span className="student-cell"><span className="student-avatar">{initials(row.name)}</span>{row.name}</span></td><td className={`tier-mark ${gradeClass(row.tier)}`}><strong>{row.marks}</strong></td><td><span className={`analysis-grade-badge ${gradeClass(row.tier)}`}>{row.tier}</span></td></tr>)}{!summaryRows.length&&<tr><td colSpan={4} style={{textAlign:"center",padding:32,color:"#667085"}}>No students match these filters.</td></tr>}</tbody></table></div></section><div className="summary-right-column"><section className="analysis-panel summary-rank-panel"><div className="summary-rank-title"><div><h3>Marks Increase (Top 5)</h3><p>Students whose Midsem 2 score improved.</p></div></div>{increases.length?increases.map((row,i)=><div className="summary-rank-row" key={row.enrollmentNo}><span>{i+1}.</span><p>{row.name}</p><strong className="change-up">+{row.change}</strong></div>):<p className="summary-empty">No increases.</p>}</section><section className="analysis-panel summary-rank-panel"><div className="summary-rank-title"><div><h3>Marks Decrease (Top 5)</h3><p>Students whose Midsem 2 score fell.</p></div></div>{decreases.length?decreases.map((row,i)=><div className="summary-rank-row" key={row.enrollmentNo}><span>{i+1}.</span><p>{row.name}</p><strong className="change-down">{row.change}</strong></div>):<p className="summary-empty">No decreases.</p>}</section></div></section></section></>}
     </main>
     <style jsx global>{`
       .academic-student-table { table-layout: fixed; }
       .academic-student-table th, .academic-student-table td { padding: 10px 12px !important; vertical-align: middle; white-space: nowrap; }
       .academic-student-table th { font-size: 10px; }
       .academic-student-table td { font-size: 11px; }
-      .academic-sno-col { width: 7%; }
-      .academic-enrollment-col { width: 18%; }
-      .academic-name-col { width: 29%; }
-      .academic-marks-col { width: 13%; }
-      .academic-percent-col { width: 13%; }
-      .academic-status-col { width: 20%; }
+      .academic-sno-col { width: 5%; }
+      .academic-enrollment-col { width: 21%; }
+      .academic-name-col { width: 34%; }
+      .academic-marks-col { width: 14%; }
+      .academic-status-col { width: 14%; }
+      .academic-rank-col { width: 12%; }
       .academic-student-table th:not(:nth-child(3)), .academic-student-table td:not(:nth-child(3)) { text-align: center; }
       .academic-student-table th:nth-child(3), .academic-student-table td:nth-child(3) { text-align: left; }
-      .academic-student-table .student-cell { justify-content: flex-start; }
       .academic-enrollment-cell { color: #667085; font-variant-numeric: tabular-nums; }
       .combined-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(360px,.95fr); gap:16px; align-items:start; }
       .combined-table-toolbar,.summary-table-toolbar { display:grid; gap:12px; }