Rework Overall At Risk layout

components/AnalysisNav.tsx

@@ -1,51 +1,33 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
+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`,
-    },
-    {
-      label: "Academic",
-      href: `/section-analysis/${sectionId}/academic`,
-    },
-    {
-      label: "Overall",
-      href: `/section-analysis/${sectionId}/overall`,
-    },
-    {
-      label: "Student Report",
-      href: `/section-analysis/${sectionId}/students`,
-    },
-  ];
-
   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}
-          </Link>
-        );
-      })}
+    <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>
   );
-}
+}

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>

lib/access.ts

@@ -36,20 +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;
+  return assertTeacherCanViewClass(userId, role, section.classId);
+}
 
-  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;
+// Kept as an explicit alias for class-level overall analysis callers.
+export async function assertTeacherCanViewOverall(userId: string, role: string, sectionId: string) {
+  return assertTeacherCanViewSection(userId, role, sectionId);
 }

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 && 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"
+    "seed": "ts-node prisma/seed.ts && ts-node prisma/fix-geetanjali-assignments.ts && ts-node prisma/seed-ece2-sem7-students.ts"
   }
 }

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 (