From 27c1857bd86b41d330ac1ee26093e0a2cf7c18a2 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 28 Mar 2026 03:50:42 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=20Bolt:=20Optimize=20GradebookMatrix?=
 =?UTF-8?q?=20creation=20from=20O(S*N^2)=20to=20O(S)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaced nested loops with O(1) single-pass lookup matrix for submissions.

Co-authored-by: xb1g <70068561+xb1g@users.noreply.github.com>
---
 components/classroom/ClassroomGrading.tsx | 937 +++++++++++++++-------
 components/seeds/SeedRoomGrading.tsx      | 483 +++++++----
 2 files changed, 978 insertions(+), 442 deletions(-)

diff --git a/components/classroom/ClassroomGrading.tsx b/components/classroom/ClassroomGrading.tsx
index 8fd24b97..c3000d9f 100644
--- a/components/classroom/ClassroomGrading.tsx
+++ b/components/classroom/ClassroomGrading.tsx
@@ -1,20 +1,38 @@
 "use client";
 
 import React, { useState, useEffect } from "react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import { useToast } from "@/components/ui/use-toast";
 import { GradeCell } from "./GradeCell";
-import { 
-  GraduationCap, 
-  Search, 
+import {
+  GraduationCap,
+  Search,
   Eye,
   CheckCircle,
   XCircle,
@@ -25,7 +43,7 @@ import {
   Award,
   TrendingDown,
   AlertCircle,
-  FileSpreadsheet
+  FileSpreadsheet,
 } from "lucide-react";
 
 interface Student {
@@ -90,7 +108,10 @@ interface ClassroomGradingProps {
   canManage: boolean;
 }
 
-export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingProps) {
+export function ClassroomGrading({
+  classroomId,
+  canManage,
+}: ClassroomGradingProps) {
   const [students, setStudents] = useState<Student[]>([]);
   const [submissions, setSubmissions] = useState<Submission[]>([]);
   const [assignmentNodes, setAssignmentNodes] = useState<AssignmentNode[]>([]);
@@ -98,10 +119,13 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
   const [gradebookMatrix, setGradebookMatrix] = useState<GradebookMatrix>({});
   const [loading, setLoading] = useState(true);
   const [searchTerm, setSearchTerm] = useState("");
-  const [selectedSubmission, setSelectedSubmission] = useState<Submission | null>(null);
+  const [selectedSubmission, setSelectedSubmission] =
+    useState<Submission | null>(null);
   const [grading, setGrading] = useState(false);
   const [showGradingModal, setShowGradingModal] = useState(false);
-  const [viewMode, setViewMode] = useState<"gradebook" | "analytics">("gradebook");
+  const [viewMode, setViewMode] = useState<"gradebook" | "analytics">(
+    "gradebook",
+  );
   const [sortBy, setSortBy] = useState<"name" | "id" | "email">("name");
   const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
   const [selectedMapFilter, setSelectedMapFilter] = useState<string>("all");
@@ -116,46 +140,77 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
   // Analytics calculations
   const analytics = {
     totalSubmissions: submissions.length,
-    gradedSubmissions: submissions.filter(s => s.status === "graded").length,
-    pendingSubmissions: submissions.filter(s => s.status === "ungraded").length,
-    passRate: submissions.length > 0 
-      ? Math.round((submissions.filter(s => s.grade === "pass").length / submissions.filter(s => s.grade !== null).length) * 100) || 0
-      : 0,
-    failRate: submissions.length > 0 
-      ? Math.round((submissions.filter(s => s.grade === "fail").length / submissions.filter(s => s.grade !== null).length) * 100) || 0
-      : 0,
-    averagePoints: submissions.length > 0 
-      ? Math.round(submissions.filter(s => s.points_awarded !== null).reduce((sum, s) => sum + (s.points_awarded || 0), 0) / submissions.filter(s => s.points_awarded !== null).length) || 0
-      : 0,
-    gradingProgress: submissions.length > 0 
-      ? Math.round((submissions.filter(s => s.status === "graded").length / submissions.length) * 100)
-      : 0,
+    gradedSubmissions: submissions.filter((s) => s.status === "graded").length,
+    pendingSubmissions: submissions.filter((s) => s.status === "ungraded")
+      .length,
+    passRate:
+      submissions.length > 0
+        ? Math.round(
+            (submissions.filter((s) => s.grade === "pass").length /
+              submissions.filter((s) => s.grade !== null).length) *
+              100,
+          ) || 0
+        : 0,
+    failRate:
+      submissions.length > 0
+        ? Math.round(
+            (submissions.filter((s) => s.grade === "fail").length /
+              submissions.filter((s) => s.grade !== null).length) *
+              100,
+          ) || 0
+        : 0,
+    averagePoints:
+      submissions.length > 0
+        ? Math.round(
+            submissions
+              .filter((s) => s.points_awarded !== null)
+              .reduce((sum, s) => sum + (s.points_awarded || 0), 0) /
+              submissions.filter((s) => s.points_awarded !== null).length,
+          ) || 0
+        : 0,
+    gradingProgress:
+      submissions.length > 0
+        ? Math.round(
+            (submissions.filter((s) => s.status === "graded").length /
+              submissions.length) *
+              100,
+          )
+        : 0,
     topPerformers: students
-      .filter(s => s.average_grade !== null)
+      .filter((s) => s.average_grade !== null)
       .sort((a, b) => (b.average_grade || 0) - (a.average_grade || 0))
       .slice(0, 5),
     strugglingStudents: students
-      .filter(s => s.pending_submissions > 0 || (s.average_grade !== null && s.average_grade < 70))
+      .filter(
+        (s) =>
+          s.pending_submissions > 0 ||
+          (s.average_grade !== null && s.average_grade < 70),
+      )
       .sort((a, b) => (a.average_grade || 0) - (b.average_grade || 0))
       .slice(0, 5),
-    submissionsByAssessmentType: submissions.reduce((acc, sub) => {
-      acc[sub.assessment_type] = (acc[sub.assessment_type] || 0) + 1;
-      return acc;
-    }, {} as Record<string, number>),
+    submissionsByAssessmentType: submissions.reduce(
+      (acc, sub) => {
+        acc[sub.assessment_type] = (acc[sub.assessment_type] || 0) + 1;
+        return acc;
+      },
+      {} as Record<string, number>,
+    ),
     recentActivity: submissions
-      .filter(s => s.status === "graded")
-      .sort((a, b) => new Date(b.graded_at!).getTime() - new Date(a.graded_at!).getTime())
-      .slice(0, 10)
+      .filter((s) => s.status === "graded")
+      .sort(
+        (a, b) =>
+          new Date(b.graded_at!).getTime() - new Date(a.graded_at!).getTime(),
+      )
+      .slice(0, 10),
   };
 
   // Grading form state
   const [gradingForm, setGradingForm] = useState({
     grade: "pass" as "pass" | "fail",
     points: "" as string,
-    comments: ""
+    comments: "",
   });
 
-
   useEffect(() => {
     if (canManage) {
       loadGradingData();
@@ -165,17 +220,19 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
   // Create a mapping of group IDs to sequential numbers
   const groupIdToNumber = React.useMemo(() => {
     const groupIds = new Set<string>();
-    submissions.forEach(submission => {
+    submissions.forEach((submission) => {
       if (submission.submitted_for_group && submission.assessment_group_id) {
         groupIds.add(submission.assessment_group_id);
       }
     });
-    
+
     const mapping = new Map<string, number>();
-    Array.from(groupIds).sort().forEach((groupId, index) => {
-      mapping.set(groupId, index + 1);
-    });
-    
+    Array.from(groupIds)
+      .sort()
+      .forEach((groupId, index) => {
+        mapping.set(groupId, index + 1);
+      });
+
     return mapping;
   }, [submissions]);
 
@@ -196,8 +253,14 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
         setAllAssessments(data.all_assessments || []);
       } else {
         const errorData = await response.text();
-        console.error("Grading API error response:", response.status, errorData);
-        throw new Error(`Failed to fetch grading data: ${response.status} - ${errorData}`);
+        console.error(
+          "Grading API error response:",
+          response.status,
+          errorData,
+        );
+        throw new Error(
+          `Failed to fetch grading data: ${response.status} - ${errorData}`,
+        );
       }
     } catch (error) {
       console.error("Error loading grading data:", error);
@@ -221,29 +284,44 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
       nodesCount: nodes.length,
       submissionsCount: submissions.length,
       sampleNode: nodes[0],
-      sampleSubmission: submissions[0]
+      sampleSubmission: submissions[0],
     });
 
     // Create matrix: student -> node -> submission
     const matrix: GradebookMatrix = {};
-    
-    students.forEach(student => {
+
+    // Initialize empty matrix for each student to ensure consistent object shape
+    students.forEach((student) => {
       matrix[student.user_id] = {};
-      nodes.forEach(node => {
-        // Find submission for this student and assessment
-        const submission = submissions.find(sub => 
-          sub.student_user_id === student.user_id && 
-          sub.assessment_id === node.id
-        );
-        matrix[student.user_id][node.id] = submission;
+      nodes.forEach((node) => {
+        matrix[student.user_id][node.id] = undefined;
       });
     });
 
+    // ⚡ Bolt Optimization: Replace O(S*N^2) nested loops + .find() with O(S) single pass
+    // Populate matrix directly from submissions list.
+    // Submissions are ordered descending by date, so we only want the FIRST one we encounter.
+    submissions.forEach((submission) => {
+      if (
+        matrix[submission.student_user_id] &&
+        matrix[submission.student_user_id][submission.assessment_id] ===
+          undefined
+      ) {
+        matrix[submission.student_user_id][submission.assessment_id] =
+          submission;
+      }
+    });
+
     console.log("Gradebook matrix created:", matrix);
     setGradebookMatrix(matrix);
   };
 
-  const handleGradeSubmission = async (submissionId: string, grade: "pass" | "fail", points: number | null, comments: string) => {
+  const handleGradeSubmission = async (
+    submissionId: string,
+    grade: "pass" | "fail",
+    points: number | null,
+    comments: string,
+  ) => {
     try {
       setGrading(true);
       const response = await fetch(`/api/classrooms/${classroomId}/grading`, {
@@ -254,19 +332,25 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
           grade,
           points_awarded: points,
           comments,
-          update_team_grades: selectedSubmission?.submitted_for_group ? updateTeamGrades : false
-        })
+          update_team_grades: selectedSubmission?.submitted_for_group
+            ? updateTeamGrades
+            : false,
+        }),
       });
 
       if (response.ok) {
-        const successMessage = selectedSubmission?.submitted_for_group && updateTeamGrades 
-          ? `Grade updated for all ${groupMembers.length} team members`
-          : selectedSubmission?.status === "graded" 
-            ? "Grade updated successfully"
-            : "Submission has been graded";
-            
+        const successMessage =
+          selectedSubmission?.submitted_for_group && updateTeamGrades
+            ? `Grade updated for all ${groupMembers.length} team members`
+            : selectedSubmission?.status === "graded"
+              ? "Grade updated successfully"
+              : "Submission has been graded";
+
         toast({
-          title: selectedSubmission?.status === "graded" ? "Grade Updated" : "Graded Successfully",
+          title:
+            selectedSubmission?.status === "graded"
+              ? "Grade Updated"
+              : "Graded Successfully",
           description: successMessage,
         });
         loadGradingData(); // Refresh data
@@ -274,18 +358,21 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
         setShowGradingModal(false);
       } else {
         const errorData = await response.json().catch(() => ({}));
-        console.error("Grading failed:", { 
-          status: response.status, 
+        console.error("Grading failed:", {
+          status: response.status,
           statusText: response.statusText,
-          errorData 
+          errorData,
         });
-        throw new Error(`Failed to grade submission: ${response.status} ${response.statusText}${errorData.details ? ` - ${errorData.details}` : ''}`);
+        throw new Error(
+          `Failed to grade submission: ${response.status} ${response.statusText}${errorData.details ? ` - ${errorData.details}` : ""}`,
+        );
       }
     } catch (error) {
       console.error("Error grading submission:", error);
       toast({
         title: "Grading Failed",
-        description: error instanceof Error ? error.message : "Failed to grade submission",
+        description:
+          error instanceof Error ? error.message : "Failed to grade submission",
         variant: "destructive",
       });
     } finally {
@@ -297,14 +384,20 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
     try {
       setLoadingGroupMembers(true);
       console.log("Loading group members for group:", groupId);
-      const response = await fetch(`/api/classrooms/${classroomId}/grading/group-members?groupId=${groupId}`);
+      const response = await fetch(
+        `/api/classrooms/${classroomId}/grading/group-members?groupId=${groupId}`,
+      );
       if (response.ok) {
         const data = await response.json();
         console.log("Group members data:", data);
         setGroupMembers(data.members || []);
       } else {
         const errorText = await response.text();
-        console.error("Failed to load group members:", response.status, errorText);
+        console.error(
+          "Failed to load group members:",
+          response.status,
+          errorText,
+        );
         setGroupMembers([]);
       }
     } catch (error) {
@@ -318,29 +411,34 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
   const exportToExcel = async () => {
     try {
       setExportingExcel(true);
-      
+
       // Prepare data for export
-      const exportData = filteredStudents.map(student => {
+      const exportData = filteredStudents.map((student) => {
         const studentData: any = {
-          'Student Name': student.full_name || student.username,
-          'Email': student.email,
-          'Total Submissions': student.total_submissions,
-          'Graded Submissions': student.graded_submissions,
-          'Pending Submissions': student.pending_submissions,
-          'Average Grade': student.average_grade ? `${student.average_grade}%` : 'No grades yet'
+          "Student Name": student.full_name || student.username,
+          Email: student.email,
+          "Total Submissions": student.total_submissions,
+          "Graded Submissions": student.graded_submissions,
+          "Pending Submissions": student.pending_submissions,
+          "Average Grade": student.average_grade
+            ? `${student.average_grade}%`
+            : "No grades yet",
         };
 
         // Add each assignment as a column
-        assignmentNodes.forEach(node => {
+        assignmentNodes.forEach((node) => {
           const submission = gradebookMatrix[student.user_id]?.[node.id];
           const columnName = `${node.title} (${node.map_title})`;
-          
+
           if (submission) {
-            let cellValue = '';
-            if (submission.is_grading_enabled && submission.points_awarded !== null) {
-              cellValue = `${submission.grade?.toUpperCase() || 'Not Graded'} (${submission.points_awarded}pts)`;
+            let cellValue = "";
+            if (
+              submission.is_grading_enabled &&
+              submission.points_awarded !== null
+            ) {
+              cellValue = `${submission.grade?.toUpperCase() || "Not Graded"} (${submission.points_awarded}pts)`;
             } else {
-              cellValue = submission.grade?.toUpperCase() || 'Not Graded';
+              cellValue = submission.grade?.toUpperCase() || "Not Graded";
             }
             // Add group info only for submitted group work
             if (submission.submitted_for_group && submission.group_number) {
@@ -348,7 +446,7 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
             }
             studentData[columnName] = cellValue;
           } else {
-            studentData[columnName] = 'Not Submitted';
+            studentData[columnName] = "Not Submitted";
           }
         });
 
@@ -367,24 +465,29 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
 
       const headers = Object.keys(exportData[0]);
       const csvContent = [
-        headers.join(','),
-        ...exportData.map(row => 
-          headers.map(header => {
-            const value = row[header] || '';
-            // Escape commas and quotes for CSV
-            return `"${String(value).replace(/"/g, '""')}"`;
-          }).join(',')
-        )
-      ].join('\n');
+        headers.join(","),
+        ...exportData.map((row) =>
+          headers
+            .map((header) => {
+              const value = row[header] || "";
+              // Escape commas and quotes for CSV
+              return `"${String(value).replace(/"/g, '""')}"`;
+            })
+            .join(","),
+        ),
+      ].join("\n");
 
       // Create and download file
-      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-      const link = document.createElement('a');
+      const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+      const link = document.createElement("a");
       if (link.download !== undefined) {
         const url = URL.createObjectURL(blob);
-        link.setAttribute('href', url);
-        link.setAttribute('download', `classroom-grades-${new Date().toISOString().split('T')[0]}.csv`);
-        link.style.visibility = 'hidden';
+        link.setAttribute("href", url);
+        link.setAttribute(
+          "download",
+          `classroom-grades-${new Date().toISOString().split("T")[0]}.csv`,
+        );
+        link.style.visibility = "hidden";
         document.body.appendChild(link);
         link.click();
         document.body.removeChild(link);
@@ -398,7 +501,8 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
       console.error("Error exporting to Excel:", error);
       toast({
         title: "Export Failed",
-        description: error instanceof Error ? error.message : "Failed to export grades",
+        description:
+          error instanceof Error ? error.message : "Failed to export grades",
         variant: "destructive",
       });
     } finally {
@@ -409,8 +513,10 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
   const debugGroupSubmissions = async () => {
     try {
       setDebuggingGroups(true);
-      const response = await fetch(`/api/classrooms/${classroomId}/debug-groups`);
-      
+      const response = await fetch(
+        `/api/classrooms/${classroomId}/debug-groups`,
+      );
+
       if (response.ok) {
         const data = await response.json();
         console.log("Debug info:", data);
@@ -427,7 +533,10 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
       console.error("Error debugging group submissions:", error);
       toast({
         title: "Error",
-        description: error instanceof Error ? error.message : "Failed to debug group submissions",
+        description:
+          error instanceof Error
+            ? error.message
+            : "Failed to debug group submissions",
         variant: "destructive",
       });
     } finally {
@@ -438,10 +547,13 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
   const fixGroupSubmissions = async () => {
     try {
       setFixingGroups(true);
-      const response = await fetch(`/api/classrooms/${classroomId}/debug-groups`, {
-        method: "POST",
-      });
-      
+      const response = await fetch(
+        `/api/classrooms/${classroomId}/debug-groups`,
+        {
+          method: "POST",
+        },
+      );
+
       if (response.ok) {
         const data = await response.json();
         toast({
@@ -460,7 +572,10 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
       console.error("Error fixing group submissions:", error);
       toast({
         title: "Error",
-        description: error instanceof Error ? error.message : "Failed to fix group submissions",
+        description:
+          error instanceof Error
+            ? error.message
+            : "Failed to fix group submissions",
         variant: "destructive",
       });
     } finally {
@@ -473,9 +588,9 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
     setGradingForm({
       grade: submission.grade || "pass",
       points: submission.points_awarded?.toString() || "",
-      comments: submission.comments || ""
+      comments: submission.comments || "",
     });
-    
+
     // Load group members if this is a group submission
     if (submission.submitted_for_group && submission.assessment_group_id) {
       loadGroupMembers(submission.assessment_group_id);
@@ -485,28 +600,35 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
       setGroupMembers([]);
       setUpdateTeamGrades(false);
     }
-    
+
     setShowGradingModal(true);
   };
 
   // Get unique maps from assessments
-  const availableMaps = Array.from(new Set(allAssessments.map(assessment => assessment.map_title)));
+  const availableMaps = Array.from(
+    new Set(allAssessments.map((assessment) => assessment.map_title)),
+  );
 
   // Filter assessments by selected map
-  const filteredAssessments = selectedMapFilter === "all" 
-    ? allAssessments 
-    : allAssessments.filter(assessment => assessment.map_title === selectedMapFilter);
+  const filteredAssessments =
+    selectedMapFilter === "all"
+      ? allAssessments
+      : allAssessments.filter(
+          (assessment) => assessment.map_title === selectedMapFilter,
+        );
 
   const filteredStudents = students
-    .filter(student => {
-      return !searchTerm || 
+    .filter((student) => {
+      return (
+        !searchTerm ||
         student.username.toLowerCase().includes(searchTerm.toLowerCase()) ||
         student.full_name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        student.email.toLowerCase().includes(searchTerm.toLowerCase());
+        student.email.toLowerCase().includes(searchTerm.toLowerCase())
+      );
     })
     .sort((a, b) => {
       let aValue: string, bValue: string;
-      
+
       switch (sortBy) {
         case "name":
           aValue = (a.full_name || a.username).toLowerCase();
@@ -524,7 +646,7 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
           aValue = (a.full_name || a.username).toLowerCase();
           bValue = (b.full_name || b.username).toLowerCase();
       }
-      
+
       if (sortOrder === "asc") {
         return aValue.localeCompare(bValue);
       } else {
@@ -535,9 +657,19 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
   const getStatusBadge = (status: string) => {
     switch (status) {
       case "graded":
-        return <Badge variant="default" className="bg-green-900 text-green-200"><CheckCircle className="w-3 h-3 mr-1" />Graded</Badge>;
+        return (
+          <Badge variant="default" className="bg-green-900 text-green-200">
+            <CheckCircle className="w-3 h-3 mr-1" />
+            Graded
+          </Badge>
+        );
       case "ungraded":
-        return <Badge variant="secondary"><Clock className="w-3 h-3 mr-1" />Pending</Badge>;
+        return (
+          <Badge variant="secondary">
+            <Clock className="w-3 h-3 mr-1" />
+            Pending
+          </Badge>
+        );
       default:
         return <Badge variant="outline">Unknown</Badge>;
     }
@@ -545,7 +677,11 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
 
   const getGradeBadge = (grade: "pass" | "fail" | null) => {
     if (grade === "pass") {
-      return <Badge variant="default" className="bg-green-900 text-green-200">Pass</Badge>;
+      return (
+        <Badge variant="default" className="bg-green-900 text-green-200">
+          Pass
+        </Badge>
+      );
     } else if (grade === "fail") {
       return <Badge variant="destructive">Fail</Badge>;
     }
@@ -556,7 +692,9 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
     return (
       <Card>
         <CardContent className="p-8 text-center">
-          <p className="text-muted-foreground">You don't have permission to access grading.</p>
+          <p className="text-muted-foreground">
+            You don't have permission to access grading.
+          </p>
         </CardContent>
       </Card>
     );
@@ -597,12 +735,14 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
                 <p className="text-sm text-muted-foreground">Students</p>
               </div>
               <div className="text-center">
-                <div className="text-2xl font-bold">{allAssessments.length}</div>
+                <div className="text-2xl font-bold">
+                  {allAssessments.length}
+                </div>
                 <p className="text-sm text-muted-foreground">Assignments</p>
               </div>
               <div className="text-center">
                 <div className="text-2xl font-bold text-orange-600">
-                  {submissions.filter(s => s.status === "ungraded").length}
+                  {submissions.filter((s) => s.status === "ungraded").length}
                 </div>
                 <p className="text-sm text-muted-foreground">Need Grading</p>
               </div>
@@ -623,7 +763,10 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
 
             {/* Map Filter */}
             <div className="w-48">
-              <Select value={selectedMapFilter} onValueChange={setSelectedMapFilter}>
+              <Select
+                value={selectedMapFilter}
+                onValueChange={setSelectedMapFilter}
+              >
                 <SelectTrigger>
                   <SelectValue placeholder="Filter by map" />
                 </SelectTrigger>
@@ -640,7 +783,12 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
 
             {/* Sorting Controls */}
             <div className="flex gap-2 items-center">
-              <Select value={sortBy} onValueChange={(value: "name" | "id" | "email") => setSortBy(value)}>
+              <Select
+                value={sortBy}
+                onValueChange={(value: "name" | "id" | "email") =>
+                  setSortBy(value)
+                }
+              >
                 <SelectTrigger className="w-32">
                   <SelectValue />
                 </SelectTrigger>
@@ -653,10 +801,16 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
               <Button
                 variant="outline"
                 size="sm"
-                onClick={() => setSortOrder(sortOrder === "asc" ? "desc" : "asc")}
+                onClick={() =>
+                  setSortOrder(sortOrder === "asc" ? "desc" : "asc")
+                }
                 className="px-2"
               >
-                {sortOrder === "asc" ? <ArrowUp className="h-4 w-4" /> : <ArrowDown className="h-4 w-4" />}
+                {sortOrder === "asc" ? (
+                  <ArrowUp className="h-4 w-4" />
+                ) : (
+                  <ArrowDown className="h-4 w-4" />
+                )}
               </Button>
             </div>
 
@@ -714,21 +868,43 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
               {/* Gradebook Grid */}
               <div className="border rounded-lg overflow-hidden">
                 <div className="overflow-x-auto">
-                  <div className="min-w-full" style={{ display: 'table', width: '100%' }}>
+                  <div
+                    className="min-w-full"
+                    style={{ display: "table", width: "100%" }}
+                  >
                     {/* Header Row */}
-                    <div className="flex bg-gray-900 border-b border-gray-700 sticky top-0 z-10" style={{ minWidth: 'max-content' }}>
+                    <div
+                      className="flex bg-gray-900 border-b border-gray-700 sticky top-0 z-10"
+                      style={{ minWidth: "max-content" }}
+                    >
                       {/* Student Column Header */}
                       <div className="w-48 p-3 border-r border-gray-700 bg-gray-900 font-semibold text-sm sticky left-0 z-20 text-gray-100 flex-shrink-0">
                         Student
                       </div>
                       {/* Assignment Headers */}
                       {assignmentNodes.map((node) => (
-                        <div key={node.id} className="w-32 p-2 border-r border-gray-700 text-center flex-shrink-0">
-                          <div className="font-medium text-xs line-clamp-2 text-gray-100" title={node.title}>{node.title}</div>
-                          <div className="text-xs text-gray-400 mt-1" title={node.map_title}>{node.map_title}</div>
+                        <div
+                          key={node.id}
+                          className="w-32 p-2 border-r border-gray-700 text-center flex-shrink-0"
+                        >
+                          <div
+                            className="font-medium text-xs line-clamp-2 text-gray-100"
+                            title={node.title}
+                          >
+                            {node.title}
+                          </div>
+                          <div
+                            className="text-xs text-gray-400 mt-1"
+                            title={node.map_title}
+                          >
+                            {node.map_title}
+                          </div>
                           {node.is_grading_enabled && (
                             <div className="text-xs text-blue-400">
-                              Points{node.points_possible ? ` (Max: ${node.points_possible})` : ''}
+                              Points
+                              {node.points_possible
+                                ? ` (Max: ${node.points_possible})`
+                                : ""}
                             </div>
                           )}
                         </div>
@@ -737,16 +913,26 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
 
                     {/* Student Rows */}
                     {filteredStudents.map((student) => (
-                      <div key={student.user_id} className="flex hover:bg-gray-800 border-b border-gray-700" style={{ minWidth: 'max-content' }}>
+                      <div
+                        key={student.user_id}
+                        className="flex hover:bg-gray-800 border-b border-gray-700"
+                        style={{ minWidth: "max-content" }}
+                      >
                         {/* Student Info */}
                         <div className="w-48 p-3 border-r border-gray-700 bg-gray-900 sticky left-0 z-10 flex-shrink-0">
-                          <div className="font-medium text-sm text-gray-100">{student.full_name || student.username}</div>
+                          <div className="font-medium text-sm text-gray-100">
+                            {student.full_name || student.username}
+                          </div>
                         </div>
                         {/* Grade Cells */}
                         {assignmentNodes.map((node) => {
-                          const submission = gradebookMatrix[student.user_id]?.[node.id];
+                          const submission =
+                            gradebookMatrix[student.user_id]?.[node.id];
                           return (
-                            <div key={`${student.user_id}-${node.id}`} className="w-32 border-r border-gray-700 py-3 relative flex-shrink-0">
+                            <div
+                              key={`${student.user_id}-${node.id}`}
+                              className="w-32 border-r border-gray-700 py-3 relative flex-shrink-0"
+                            >
                               <GradeCell
                                 submission={submission}
                                 onClick={() => {
@@ -758,8 +944,19 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
                               {/* Show group badge only for submitted group work */}
                               {submission?.submitted_for_group && (
                                 <div className="absolute bottom-1 right-1 z-10">
-                                  <Badge variant="secondary" className="px-1 py-0 text-xs bg-blue-600 border-blue-400 text-white font-bold" style={{ fontSize: '8px', lineHeight: '12px' }}>
-                                    {submission.group_number ? `G${submission.group_number}` : (submission.assessment_group_id ? `G${groupIdToNumber.get(submission.assessment_group_id) || '?'}` : 'G')}
+                                  <Badge
+                                    variant="secondary"
+                                    className="px-1 py-0 text-xs bg-blue-600 border-blue-400 text-white font-bold"
+                                    style={{
+                                      fontSize: "8px",
+                                      lineHeight: "12px",
+                                    }}
+                                  >
+                                    {submission.group_number
+                                      ? `G${submission.group_number}`
+                                      : submission.assessment_group_id
+                                        ? `G${groupIdToNumber.get(submission.assessment_group_id) || "?"}`
+                                        : "G"}
                                   </Badge>
                                 </div>
                               )}
@@ -788,21 +985,25 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
                     <div className="space-y-4">
                       <div className="flex items-center justify-between">
                         <span>Pass Rate</span>
-                        <span className="font-bold text-green-600">{analytics.passRate}%</span>
+                        <span className="font-bold text-green-600">
+                          {analytics.passRate}%
+                        </span>
                       </div>
                       <div className="w-full bg-gray-700 rounded-full h-3">
-                        <div 
-                          className="bg-green-500 h-3 rounded-full" 
+                        <div
+                          className="bg-green-500 h-3 rounded-full"
                           style={{ width: `${analytics.passRate}%` }}
                         />
                       </div>
                       <div className="flex items-center justify-between">
                         <span>Fail Rate</span>
-                        <span className="font-bold text-red-600">{analytics.failRate}%</span>
+                        <span className="font-bold text-red-600">
+                          {analytics.failRate}%
+                        </span>
                       </div>
                       <div className="w-full bg-gray-700 rounded-full h-3">
-                        <div 
-                          className="bg-red-500 h-3 rounded-full" 
+                        <div
+                          className="bg-red-500 h-3 rounded-full"
                           style={{ width: `${analytics.failRate}%` }}
                         />
                       </div>
@@ -820,17 +1021,22 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
                   <CardContent>
                     <div className="space-y-4">
                       <div className="text-center">
-                        <div className="text-3xl font-bold">{analytics.gradingProgress}%</div>
-                        <p className="text-sm text-muted-foreground">Complete</p>
+                        <div className="text-3xl font-bold">
+                          {analytics.gradingProgress}%
+                        </div>
+                        <p className="text-sm text-muted-foreground">
+                          Complete
+                        </p>
                       </div>
                       <div className="w-full bg-gray-700 rounded-full h-4">
-                        <div 
-                          className="bg-blue-500 h-4 rounded-full transition-all duration-300" 
+                        <div
+                          className="bg-blue-500 h-4 rounded-full transition-all duration-300"
                           style={{ width: `${analytics.gradingProgress}%` }}
                         />
                       </div>
                       <div className="text-sm text-center text-muted-foreground">
-                        {analytics.gradedSubmissions} of {analytics.totalSubmissions} submissions graded
+                        {analytics.gradedSubmissions} of{" "}
+                        {analytics.totalSubmissions} submissions graded
                       </div>
                     </div>
                   </CardContent>
@@ -846,11 +1052,18 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
                   <CardContent>
                     <div className="space-y-4">
                       <div className="text-center">
-                        <div className="text-3xl font-bold">{analytics.averagePoints}</div>
+                        <div className="text-3xl font-bold">
+                          {analytics.averagePoints}
+                        </div>
                         <p className="text-sm text-muted-foreground">Points</p>
                       </div>
                       <div className="text-xs text-center text-muted-foreground">
-                        Based on {submissions.filter(s => s.points_awarded !== null).length} graded submissions
+                        Based on{" "}
+                        {
+                          submissions.filter((s) => s.points_awarded !== null)
+                            .length
+                        }{" "}
+                        graded submissions
                       </div>
                     </div>
                   </CardContent>
@@ -865,21 +1078,31 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
                       <Award className="h-5 w-5" />
                       Top Performers
                     </CardTitle>
-                    <CardDescription>Students with highest average scores</CardDescription>
+                    <CardDescription>
+                      Students with highest average scores
+                    </CardDescription>
                   </CardHeader>
                   <CardContent>
                     <div className="space-y-3">
                       {analytics.topPerformers.length > 0 ? (
                         analytics.topPerformers.map((student, index) => (
-                          <div key={student.user_id} className="flex items-center justify-between p-3 bg-green-900 rounded-lg">
+                          <div
+                            key={student.user_id}
+                            className="flex items-center justify-between p-3 bg-green-900 rounded-lg"
+                          >
                             <div className="flex items-center gap-3">
                               <div className="w-8 h-8 bg-green-800 rounded-full flex items-center justify-center">
-                                <span className="text-sm font-bold text-green-200">#{index + 1}</span>
+                                <span className="text-sm font-bold text-green-200">
+                                  #{index + 1}
+                                </span>
                               </div>
                               <div>
-                                <div className="font-medium">{student.full_name || student.username}</div>
+                                <div className="font-medium">
+                                  {student.full_name || student.username}
+                                </div>
                                 <div className="text-sm text-muted-foreground">
-                                  {student.graded_submissions}/{student.total_submissions} graded
+                                  {student.graded_submissions}/
+                                  {student.total_submissions} graded
                                 </div>
                               </div>
                             </div>
@@ -903,26 +1126,36 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
                       <TrendingDown className="h-5 w-5" />
                       Students Needing Attention
                     </CardTitle>
-                    <CardDescription>Students with pending work or low scores</CardDescription>
+                    <CardDescription>
+                      Students with pending work or low scores
+                    </CardDescription>
                   </CardHeader>
                   <CardContent>
                     <div className="space-y-3">
                       {analytics.strugglingStudents.length > 0 ? (
                         analytics.strugglingStudents.map((student, index) => (
-                          <div key={student.user_id} className="flex items-center justify-between p-3 bg-orange-900 rounded-lg">
+                          <div
+                            key={student.user_id}
+                            className="flex items-center justify-between p-3 bg-orange-900 rounded-lg"
+                          >
                             <div className="flex items-center gap-3">
                               <div className="w-8 h-8 bg-orange-800 rounded-full flex items-center justify-center">
                                 <AlertCircle className="h-4 w-4 text-orange-200" />
                               </div>
                               <div>
-                                <div className="font-medium">{student.full_name || student.username}</div>
+                                <div className="font-medium">
+                                  {student.full_name || student.username}
+                                </div>
                                 <div className="text-sm text-muted-foreground">
-                                  {student.pending_submissions} pending submissions
+                                  {student.pending_submissions} pending
+                                  submissions
                                 </div>
                               </div>
                             </div>
                             <div className="text-lg font-bold text-orange-300">
-                              {student.average_grade ? `${student.average_grade}%` : 'No grades'}
+                              {student.average_grade
+                                ? `${student.average_grade}%`
+                                : "No grades"}
                             </div>
                           </div>
                         ))
@@ -946,20 +1179,31 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
                 </CardHeader>
                 <CardContent>
                   <div className="space-y-4">
-                    {Object.entries(analytics.submissionsByAssessmentType).map(([type, count]) => (
-                      <div key={type} className="flex items-center justify-between">
-                        <span className="capitalize">{type.replace('_', ' ')}</span>
-                        <div className="flex items-center gap-3">
-                          <div className="w-32 bg-gray-700 rounded-full h-2">
-                            <div 
-                              className="bg-blue-500 h-2 rounded-full" 
-                              style={{ width: `${(count / analytics.totalSubmissions) * 100}%` }}
-                            />
+                    {Object.entries(analytics.submissionsByAssessmentType).map(
+                      ([type, count]) => (
+                        <div
+                          key={type}
+                          className="flex items-center justify-between"
+                        >
+                          <span className="capitalize">
+                            {type.replace("_", " ")}
+                          </span>
+                          <div className="flex items-center gap-3">
+                            <div className="w-32 bg-gray-700 rounded-full h-2">
+                              <div
+                                className="bg-blue-500 h-2 rounded-full"
+                                style={{
+                                  width: `${(count / analytics.totalSubmissions) * 100}%`,
+                                }}
+                              />
+                            </div>
+                            <span className="font-bold w-12 text-right">
+                              {count}
+                            </span>
                           </div>
-                          <span className="font-bold w-12 text-right">{count}</span>
                         </div>
-                      </div>
-                    ))}
+                      ),
+                    )}
                   </div>
                 </CardContent>
               </Card>
@@ -976,18 +1220,25 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
                   <div className="space-y-3">
                     {analytics.recentActivity.length > 0 ? (
                       analytics.recentActivity.map((submission) => (
-                        <div key={submission.id} className="flex items-center justify-between p-3 bg-gray-800 rounded-lg">
+                        <div
+                          key={submission.id}
+                          className="flex items-center justify-between p-3 bg-gray-800 rounded-lg"
+                        >
                           <div className="flex items-center gap-3">
                             {getGradeBadge(submission.grade)}
                             <div>
-                              <div className="font-medium">{submission.student_name}</div>
+                              <div className="font-medium">
+                                {submission.student_name}
+                              </div>
                               <div className="text-sm text-muted-foreground">
                                 {submission.node_title} - {submission.map_title}
                               </div>
                             </div>
                           </div>
                           <div className="text-sm text-muted-foreground">
-                            {new Date(submission.graded_at!).toLocaleDateString()}
+                            {new Date(
+                              submission.graded_at!,
+                            ).toLocaleDateString()}
                           </div>
                         </div>
                       ))
@@ -1009,13 +1260,16 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
         <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
           <DialogHeader>
             <DialogTitle>
-              {selectedSubmission?.status === "graded" ? "Review Submission" : "Grade Submission"}
+              {selectedSubmission?.status === "graded"
+                ? "Review Submission"
+                : "Grade Submission"}
             </DialogTitle>
             <DialogDescription>
-              {selectedSubmission?.student_name} - {selectedSubmission?.node_title}
+              {selectedSubmission?.student_name} -{" "}
+              {selectedSubmission?.node_title}
             </DialogDescription>
           </DialogHeader>
-          
+
           {selectedSubmission && (
             <div className="space-y-6">
               {/* Submission Content */}
@@ -1032,37 +1286,47 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
                       </div>
                     </div>
                   )}
-                  
-                  {selectedSubmission.file_urls && selectedSubmission.file_urls.length > 0 && (
-                    <div>
-                      <Label className="font-medium">File Uploads:</Label>
-                      <div className="mt-2 space-y-2">
-                        {selectedSubmission.file_urls.map((url, index) => (
-                          <a
-                            key={index}
-                            href={url}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="flex items-center gap-2 text-blue-600 hover:underline"
-                          >
-                            <Download className="h-4 w-4" />
-                            File {index + 1}
-                          </a>
-                        ))}
+
+                  {selectedSubmission.file_urls &&
+                    selectedSubmission.file_urls.length > 0 && (
+                      <div>
+                        <Label className="font-medium">File Uploads:</Label>
+                        <div className="mt-2 space-y-2">
+                          {selectedSubmission.file_urls.map((url, index) => (
+                            <a
+                              key={index}
+                              href={url}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="flex items-center gap-2 text-blue-600 hover:underline"
+                            >
+                              <Download className="h-4 w-4" />
+                              File {index + 1}
+                            </a>
+                          ))}
+                        </div>
                       </div>
-                    </div>
-                  )}
+                    )}
 
                   {selectedSubmission.quiz_answers && (
                     <div>
                       <Label className="font-medium">Quiz Answers:</Label>
                       <div className="mt-2 space-y-2">
-                        {Object.entries(selectedSubmission.quiz_answers).map(([question, answer]) => (
-                          <div key={question} className="p-3 bg-gray-800 rounded-md">
-                            <div className="font-medium text-sm text-gray-100">{question}</div>
-                            <div className="text-sm text-gray-400 mt-1">{answer}</div>
-                          </div>
-                        ))}
+                        {Object.entries(selectedSubmission.quiz_answers).map(
+                          ([question, answer]) => (
+                            <div
+                              key={question}
+                              className="p-3 bg-gray-800 rounded-md"
+                            >
+                              <div className="font-medium text-sm text-gray-100">
+                                {question}
+                              </div>
+                              <div className="text-sm text-gray-400 mt-1">
+                                {answer}
+                              </div>
+                            </div>
+                          ),
+                        )}
                       </div>
                     </div>
                   )}
@@ -1080,23 +1344,33 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
                   </CardHeader>
                   <CardContent>
                     {loadingGroupMembers ? (
-                      <div className="text-center py-4">Loading group members...</div>
+                      <div className="text-center py-4">
+                        Loading group members...
+                      </div>
                     ) : groupMembers.length > 0 ? (
                       <div className="space-y-2">
                         <p className="text-sm text-muted-foreground mb-3">
-                          When you grade this submission, all group members will receive the same grade automatically.
+                          When you grade this submission, all group members will
+                          receive the same grade automatically.
                         </p>
                         <div className="space-y-2">
                           {groupMembers.map((member) => (
-                            <div key={member.user_id} className="flex items-center gap-3 p-2 bg-gray-800 rounded-md">
+                            <div
+                              key={member.user_id}
+                              className="flex items-center gap-3 p-2 bg-gray-800 rounded-md"
+                            >
                               <div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center">
                                 <span className="text-sm font-bold text-white">
                                   {member.display_name.charAt(0).toUpperCase()}
                                 </span>
                               </div>
                               <div>
-                                <div className="font-medium">{member.display_name}</div>
-                                <div className="text-sm text-muted-foreground">{member.email}</div>
+                                <div className="font-medium">
+                                  {member.display_name}
+                                </div>
+                                <div className="text-sm text-muted-foreground">
+                                  {member.email}
+                                </div>
                               </div>
                             </div>
                           ))}
@@ -1121,9 +1395,14 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
                     <div className="grid grid-cols-2 gap-4">
                       <div>
                         <Label>Grade</Label>
-                        <Select 
-                          value={gradingForm.grade} 
-                          onValueChange={(value: "pass" | "fail") => setGradingForm(prev => ({ ...prev, grade: value }))}
+                        <Select
+                          value={gradingForm.grade}
+                          onValueChange={(value: "pass" | "fail") =>
+                            setGradingForm((prev) => ({
+                              ...prev,
+                              grade: value,
+                            }))
+                          }
                         >
                           <SelectTrigger>
                             <SelectValue />
@@ -1137,18 +1416,33 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
                       {selectedSubmission?.is_grading_enabled && (
                         <div>
                           <Label>
-                            Points{selectedSubmission?.points_possible ? ` (Max: ${selectedSubmission.points_possible})` : ''} <span className="text-red-500">*</span>
+                            Points
+                            {selectedSubmission?.points_possible
+                              ? ` (Max: ${selectedSubmission.points_possible})`
+                              : ""}{" "}
+                            <span className="text-red-500">*</span>
                           </Label>
                           <Input
                             type="number"
                             value={gradingForm.points}
-                            onChange={(e) => setGradingForm(prev => ({ ...prev, points: e.target.value }))}
-                            max={selectedSubmission?.points_possible || undefined}
+                            onChange={(e) =>
+                              setGradingForm((prev) => ({
+                                ...prev,
+                                points: e.target.value,
+                              }))
+                            }
+                            max={
+                              selectedSubmission?.points_possible || undefined
+                            }
                             placeholder="Enter points"
-                            className={!gradingForm.points.trim() ? "border-red-500" : ""}
+                            className={
+                              !gradingForm.points.trim() ? "border-red-500" : ""
+                            }
                           />
                           {!gradingForm.points.trim() && (
-                            <p className="text-sm text-red-500 mt-1">Points are required</p>
+                            <p className="text-sm text-red-500 mt-1">
+                              Points are required
+                            </p>
                           )}
                         </div>
                       )}
@@ -1157,41 +1451,64 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
                       <Label>Comments</Label>
                       <Textarea
                         value={gradingForm.comments}
-                        onChange={(e) => setGradingForm(prev => ({ ...prev, comments: e.target.value }))}
+                        onChange={(e) =>
+                          setGradingForm((prev) => ({
+                            ...prev,
+                            comments: e.target.value,
+                          }))
+                        }
                         placeholder="Provide feedback to the student..."
                       />
                     </div>
-                    
+
                     {/* Team Grade Option for Initial Grading */}
-                    {selectedSubmission?.submitted_for_group && groupMembers.length > 0 && (
-                      <div className="border rounded-lg p-4 bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-700">
-                        <div className="flex items-center space-x-2">
-                          <input
-                            type="checkbox"
-                            id="applyToTeam"
-                            checked={updateTeamGrades}
-                            onChange={(e) => setUpdateTeamGrades(e.target.checked)}
-                            className="rounded"
-                            defaultChecked={true}
-                          />
-                          <Label htmlFor="applyToTeam" className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                            Apply this grade to all team members ({groupMembers.length} members)
-                          </Label>
+                    {selectedSubmission?.submitted_for_group &&
+                      groupMembers.length > 0 && (
+                        <div className="border rounded-lg p-4 bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-700">
+                          <div className="flex items-center space-x-2">
+                            <input
+                              type="checkbox"
+                              id="applyToTeam"
+                              checked={updateTeamGrades}
+                              onChange={(e) =>
+                                setUpdateTeamGrades(e.target.checked)
+                              }
+                              className="rounded"
+                              defaultChecked={true}
+                            />
+                            <Label
+                              htmlFor="applyToTeam"
+                              className="text-sm font-medium text-gray-700 dark:text-gray-300"
+                            >
+                              Apply this grade to all team members (
+                              {groupMembers.length} members)
+                            </Label>
+                          </div>
+                          <p className="text-xs text-gray-700 dark:text-gray-300 mt-1">
+                            This is a team submission. By default, all team
+                            members will receive this grade.
+                          </p>
                         </div>
-                        <p className="text-xs text-gray-700 dark:text-gray-300 mt-1">
-                          This is a team submission. By default, all team members will receive this grade.
-                        </p>
-                      </div>
-                    )}
-                    
-                    <Button
-                      onClick={() => handleGradeSubmission(
-                        selectedSubmission.id,
-                        gradingForm.grade,
-                        selectedSubmission?.is_grading_enabled ? (gradingForm.points ? parseInt(gradingForm.points) : null) : null,
-                        gradingForm.comments
                       )}
-                      disabled={grading || (selectedSubmission?.is_grading_enabled && !gradingForm.points.trim())}
+
+                    <Button
+                      onClick={() =>
+                        handleGradeSubmission(
+                          selectedSubmission.id,
+                          gradingForm.grade,
+                          selectedSubmission?.is_grading_enabled
+                            ? gradingForm.points
+                              ? parseInt(gradingForm.points)
+                              : null
+                            : null,
+                          gradingForm.comments,
+                        )
+                      }
+                      disabled={
+                        grading ||
+                        (selectedSubmission?.is_grading_enabled &&
+                          !gradingForm.points.trim())
+                      }
                       className="w-full"
                     >
                       {grading ? "Grading..." : "Submit Grade"}
@@ -1206,16 +1523,24 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
                   <CardHeader>
                     <CardTitle className="text-lg">Edit Grade</CardTitle>
                     <div className="text-sm text-muted-foreground">
-                      Originally graded on {new Date(selectedSubmission.graded_at!).toLocaleDateString()}
+                      Originally graded on{" "}
+                      {new Date(
+                        selectedSubmission.graded_at!,
+                      ).toLocaleDateString()}
                     </div>
                   </CardHeader>
                   <CardContent className="space-y-4">
                     <div className="grid grid-cols-2 gap-4">
                       <div>
                         <Label>Grade</Label>
-                        <Select 
-                          value={gradingForm.grade} 
-                          onValueChange={(value: "pass" | "fail") => setGradingForm(prev => ({ ...prev, grade: value }))}
+                        <Select
+                          value={gradingForm.grade}
+                          onValueChange={(value: "pass" | "fail") =>
+                            setGradingForm((prev) => ({
+                              ...prev,
+                              grade: value,
+                            }))
+                          }
                         >
                           <SelectTrigger>
                             <SelectValue />
@@ -1229,18 +1554,33 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
                       {selectedSubmission?.is_grading_enabled && (
                         <div>
                           <Label>
-                            Points{selectedSubmission?.points_possible ? ` (Max: ${selectedSubmission.points_possible})` : ''} <span className="text-red-500">*</span>
+                            Points
+                            {selectedSubmission?.points_possible
+                              ? ` (Max: ${selectedSubmission.points_possible})`
+                              : ""}{" "}
+                            <span className="text-red-500">*</span>
                           </Label>
                           <Input
                             type="number"
                             value={gradingForm.points}
-                            onChange={(e) => setGradingForm(prev => ({ ...prev, points: e.target.value }))}
-                            max={selectedSubmission?.points_possible || undefined}
+                            onChange={(e) =>
+                              setGradingForm((prev) => ({
+                                ...prev,
+                                points: e.target.value,
+                              }))
+                            }
+                            max={
+                              selectedSubmission?.points_possible || undefined
+                            }
                             placeholder="Enter points"
-                            className={!gradingForm.points.trim() ? "border-red-500" : ""}
+                            className={
+                              !gradingForm.points.trim() ? "border-red-500" : ""
+                            }
                           />
                           {!gradingForm.points.trim() && (
-                            <p className="text-sm text-red-500 mt-1">Points are required</p>
+                            <p className="text-sm text-red-500 mt-1">
+                              Points are required
+                            </p>
                           )}
                         </div>
                       )}
@@ -1249,40 +1589,63 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
                       <Label>Comments</Label>
                       <Textarea
                         value={gradingForm.comments}
-                        onChange={(e) => setGradingForm(prev => ({ ...prev, comments: e.target.value }))}
+                        onChange={(e) =>
+                          setGradingForm((prev) => ({
+                            ...prev,
+                            comments: e.target.value,
+                          }))
+                        }
                         placeholder="Provide feedback to the student..."
                       />
                     </div>
-                    
+
                     {/* Team Grade Update Option */}
-                    {selectedSubmission.submitted_for_group && groupMembers.length > 0 && (
-                      <div className="border rounded-lg p-4 bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-700">
-                        <div className="flex items-center space-x-2">
-                          <input
-                            type="checkbox"
-                            id="updateTeamGrades"
-                            checked={updateTeamGrades}
-                            onChange={(e) => setUpdateTeamGrades(e.target.checked)}
-                            className="rounded"
-                          />
-                          <Label htmlFor="updateTeamGrades" className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                            Update grade for all team members ({groupMembers.length} members)
-                          </Label>
+                    {selectedSubmission.submitted_for_group &&
+                      groupMembers.length > 0 && (
+                        <div className="border rounded-lg p-4 bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-700">
+                          <div className="flex items-center space-x-2">
+                            <input
+                              type="checkbox"
+                              id="updateTeamGrades"
+                              checked={updateTeamGrades}
+                              onChange={(e) =>
+                                setUpdateTeamGrades(e.target.checked)
+                              }
+                              className="rounded"
+                            />
+                            <Label
+                              htmlFor="updateTeamGrades"
+                              className="text-sm font-medium text-gray-700 dark:text-gray-300"
+                            >
+                              Update grade for all team members (
+                              {groupMembers.length} members)
+                            </Label>
+                          </div>
+                          <p className="text-xs text-gray-700 dark:text-gray-300 mt-1">
+                            When checked, this grade change will be applied to
+                            all members of this group
+                          </p>
                         </div>
-                        <p className="text-xs text-gray-700 dark:text-gray-300 mt-1">
-                          When checked, this grade change will be applied to all members of this group
-                        </p>
-                      </div>
-                    )}
+                      )}
 
                     <Button
-                      onClick={() => handleGradeSubmission(
-                        selectedSubmission.id,
-                        gradingForm.grade,
-                        selectedSubmission?.is_grading_enabled ? (gradingForm.points ? parseInt(gradingForm.points) : null) : null,
-                        gradingForm.comments
-                      )}
-                      disabled={grading || (selectedSubmission?.is_grading_enabled && !gradingForm.points.trim())}
+                      onClick={() =>
+                        handleGradeSubmission(
+                          selectedSubmission.id,
+                          gradingForm.grade,
+                          selectedSubmission?.is_grading_enabled
+                            ? gradingForm.points
+                              ? parseInt(gradingForm.points)
+                              : null
+                            : null,
+                          gradingForm.comments,
+                        )
+                      }
+                      disabled={
+                        grading ||
+                        (selectedSubmission?.is_grading_enabled &&
+                          !gradingForm.points.trim())
+                      }
                       className="w-full"
                     >
                       {grading ? "Updating Grade..." : "Update Grade"}
@@ -1296,4 +1659,4 @@ export function ClassroomGrading({ classroomId, canManage }: ClassroomGradingPro
       </Dialog>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/components/seeds/SeedRoomGrading.tsx b/components/seeds/SeedRoomGrading.tsx
index 67a11aab..cae828e9 100644
--- a/components/seeds/SeedRoomGrading.tsx
+++ b/components/seeds/SeedRoomGrading.tsx
@@ -8,8 +8,20 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import { GradeCell } from "@/components/classroom/GradeCell";
 import {
   Search,
@@ -81,13 +93,14 @@ export function SeedRoomGrading({ roomId, mapId }: SeedRoomGradingProps) {
   const [searchTerm, setSearchTerm] = useState("");
   const [sortBy, setSortBy] = useState<"name" | "email">("name");
   const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
-  const [selectedSubmission, setSelectedSubmission] = useState<Submission | null>(null);
+  const [selectedSubmission, setSelectedSubmission] =
+    useState<Submission | null>(null);
   const [showGradingModal, setShowGradingModal] = useState(false);
   const [grading, setGrading] = useState(false);
   const [gradingForm, setGradingForm] = useState({
     grade: "pass" as "pass" | "fail",
     points: "" as string,
-    comments: ""
+    comments: "",
   });
 
   const supabase = createClient();
@@ -130,7 +143,10 @@ export function SeedRoomGrading({ roomId, mapId }: SeedRoomGradingProps) {
       // 2. If no mentor is assigned, hide the host (Creator is assumed to be instructor).
       const instructorIdToHide = roomData.mentor_id || roomData.host_id;
 
-      const userIds = memberIds?.map(m => m.user_id).filter(id => id !== instructorIdToHide) || [];
+      const userIds =
+        memberIds
+          ?.map((m) => m.user_id)
+          .filter((id) => id !== instructorIdToHide) || [];
 
       if (userIds.length === 0) {
         setStudents([]);
@@ -150,7 +166,8 @@ export function SeedRoomGrading({ roomId, mapId }: SeedRoomGradingProps) {
       // Get all assessments for this map
       const { data: assessments, error: assessmentsError } = await supabase
         .from("node_assessments")
-        .select(`
+        .select(
+          `
           id,
           node_id,
           assessment_type,
@@ -160,7 +177,8 @@ export function SeedRoomGrading({ roomId, mapId }: SeedRoomGradingProps) {
             title,
             map_id
           )
-        `)
+        `,
+        )
         .eq("map_nodes.map_id", mapId);
 
       if (assessmentsError) throw assessmentsError;
@@ -177,7 +195,8 @@ export function SeedRoomGrading({ roomId, mapId }: SeedRoomGradingProps) {
       // Get submissions
       const { data: submissionsData, error: submissionsError } = await supabase
         .from("assessment_submissions")
-        .select(`
+        .select(
+          `
           id,
           progress_id,
           assessment_id,
@@ -206,7 +225,8 @@ export function SeedRoomGrading({ roomId, mapId }: SeedRoomGradingProps) {
             points_awarded,
             comments
           )
-        `)
+        `,
+        )
         .in("student_node_progress.user_id", userIds)
         .eq("student_node_progress.map_nodes.map_id", mapId)
         .order("submitted_at", { ascending: false });
@@ -214,46 +234,60 @@ export function SeedRoomGrading({ roomId, mapId }: SeedRoomGradingProps) {
       if (submissionsError) throw submissionsError;
 
       // Transform submissions
-      const transformedSubmissions: Submission[] = (submissionsData || []).map((sub: any) => {
-        const userId = sub.student_node_progress?.user_id;
-        const profile = profiles?.find(p => p.id === userId);
-        const grade = sub.submission_grades?.[0];
-        const hasGradingEnabled = sub.node_assessments?.points_possible !== null;
-
-        return {
-          id: sub.id,
-          student_id: userId,
-          student_name: profile?.full_name || "Unknown",
-          student_email: profile?.email || "",
-          node_title: sub.student_node_progress?.map_nodes?.title || "Unknown Node",
-          assessment_id: sub.assessment_id,
-          assessment_type: sub.node_assessments?.assessment_type || "unknown",
-          submitted_at: sub.submitted_at,
-          status: grade ? "graded" : "ungraded",
-          grade: grade?.grade || null,
-          points_awarded: grade?.points_awarded || null,
-          points_possible: sub.node_assessments?.points_possible,
-          text_answer: sub.text_answer,
-          file_urls: sub.file_urls,
-          image_url: sub.image_url,
-          is_grading_enabled: hasGradingEnabled,
-        };
-      });
+      const transformedSubmissions: Submission[] = (submissionsData || []).map(
+        (sub: any) => {
+          const userId = sub.student_node_progress?.user_id;
+          const profile = profiles?.find((p) => p.id === userId);
+          const grade = sub.submission_grades?.[0];
+          const hasGradingEnabled =
+            sub.node_assessments?.points_possible !== null;
+
+          return {
+            id: sub.id,
+            student_id: userId,
+            student_name: profile?.full_name || "Unknown",
+            student_email: profile?.email || "",
+            node_title:
+              sub.student_node_progress?.map_nodes?.title || "Unknown Node",
+            assessment_id: sub.assessment_id,
+            assessment_type: sub.node_assessments?.assessment_type || "unknown",
+            submitted_at: sub.submitted_at,
+            status: grade ? "graded" : "ungraded",
+            grade: grade?.grade || null,
+            points_awarded: grade?.points_awarded || null,
+            points_possible: sub.node_assessments?.points_possible,
+            text_answer: sub.text_answer,
+            file_urls: sub.file_urls,
+            image_url: sub.image_url,
+            is_grading_enabled: hasGradingEnabled,
+          };
+        },
+      );
       setSubmissions(transformedSubmissions);
 
       // Sort assessment nodes by earliest submission date
       const sortedNodes = [...nodes].sort((a, b) => {
         // Find earliest submission for each assessment
-        const aSubmissions = transformedSubmissions.filter(s => s.assessment_id === a.id);
-        const bSubmissions = transformedSubmissions.filter(s => s.assessment_id === b.id);
+        const aSubmissions = transformedSubmissions.filter(
+          (s) => s.assessment_id === a.id,
+        );
+        const bSubmissions = transformedSubmissions.filter(
+          (s) => s.assessment_id === b.id,
+        );
 
         // Get earliest submission time for each
-        const aEarliest = aSubmissions.length > 0
-          ? Math.min(...aSubmissions.map(s => new Date(s.submitted_at).getTime()))
-          : Infinity;
-        const bEarliest = bSubmissions.length > 0
-          ? Math.min(...bSubmissions.map(s => new Date(s.submitted_at).getTime()))
-          : Infinity;
+        const aEarliest =
+          aSubmissions.length > 0
+            ? Math.min(
+                ...aSubmissions.map((s) => new Date(s.submitted_at).getTime()),
+              )
+            : Infinity;
+        const bEarliest =
+          bSubmissions.length > 0
+            ? Math.min(
+                ...bSubmissions.map((s) => new Date(s.submitted_at).getTime()),
+              )
+            : Infinity;
 
         // Sort by earliest submission time (ascending)
         return aEarliest - bEarliest;
@@ -262,19 +296,24 @@ export function SeedRoomGrading({ roomId, mapId }: SeedRoomGradingProps) {
 
       // Create student list with stats
       const studentList: Student[] = (profiles || []).map((profile: any) => {
-        const studentSubmissions = transformedSubmissions.filter(s => s.student_id === profile.id);
+        const studentSubmissions = transformedSubmissions.filter(
+          (s) => s.student_id === profile.id,
+        );
         return {
           user_id: profile.id,
           full_name: profile.full_name || "Unknown",
           email: profile.email || "",
           avatar_url: profile.avatar_url,
           total_submissions: studentSubmissions.length,
-          graded_submissions: studentSubmissions.filter(s => s.status === "graded").length,
-          pending_submissions: studentSubmissions.filter(s => s.status === "ungraded").length,
+          graded_submissions: studentSubmissions.filter(
+            (s) => s.status === "graded",
+          ).length,
+          pending_submissions: studentSubmissions.filter(
+            (s) => s.status === "ungraded",
+          ).length,
         };
       });
       setStudents(studentList);
-
     } catch (error) {
       console.error("Error loading grading data:", error);
       toast.error("Failed to load grading data");
@@ -286,28 +325,48 @@ export function SeedRoomGrading({ roomId, mapId }: SeedRoomGradingProps) {
   const createGradebookMatrix = () => {
     const matrix: GradebookMatrix = {};
 
-    students.forEach(student => {
+    // Initialize empty matrix for each student to ensure consistent object shape
+    students.forEach((student) => {
       matrix[student.user_id] = {};
-      assessmentNodes.forEach(node => {
-        const submission = submissions.find(sub =>
-          sub.student_id === student.user_id &&
-          sub.assessment_id === node.id
-        );
-        matrix[student.user_id][node.id] = submission;
+      assessmentNodes.forEach((node) => {
+        matrix[student.user_id][node.id] = undefined;
       });
     });
 
+    // ⚡ Bolt Optimization: Replace O(S*N^2) nested loops + .find() with O(S) single pass
+    // Populate matrix directly from submissions list.
+    // Submissions are ordered descending by date, so we only want the FIRST one we encounter.
+    submissions.forEach((submission) => {
+      if (
+        matrix[submission.student_id] &&
+        matrix[submission.student_id][submission.assessment_id] === undefined
+      ) {
+        matrix[submission.student_id][submission.assessment_id] = submission;
+      }
+    });
+
     setGradebookMatrix(matrix);
   };
 
-  const handleGradeSubmission = async (submissionId: string, grade: "pass" | "fail", points: number | null, comments: string) => {
+  const handleGradeSubmission = async (
+    submissionId: string,
+    grade: "pass" | "fail",
+    points: number | null,
+    comments: string,
+  ) => {
     try {
       setGrading(true);
 
       // Validate points don't exceed maximum
-      if (selectedSubmission?.is_grading_enabled && points !== null && selectedSubmission.points_possible !== null) {
+      if (
+        selectedSubmission?.is_grading_enabled &&
+        points !== null &&
+        selectedSubmission.points_possible !== null
+      ) {
         if (points > selectedSubmission.points_possible) {
-          toast.error(`Points cannot exceed maximum of ${selectedSubmission.points_possible}`);
+          toast.error(
+            `Points cannot exceed maximum of ${selectedSubmission.points_possible}`,
+          );
           setGrading(false);
           return;
         }
@@ -327,11 +386,15 @@ export function SeedRoomGrading({ roomId, mapId }: SeedRoomGradingProps) {
           grade,
           points_awarded: points,
           comments,
-        })
+        }),
       });
 
       if (response.ok) {
-        toast.success(selectedSubmission?.status === "graded" ? "Grade updated" : "Submission graded");
+        toast.success(
+          selectedSubmission?.status === "graded"
+            ? "Grade updated"
+            : "Submission graded",
+        );
         loadGradingData();
         setSelectedSubmission(null);
         setShowGradingModal(false);
@@ -341,7 +404,9 @@ export function SeedRoomGrading({ roomId, mapId }: SeedRoomGradingProps) {
       }
     } catch (error) {
       console.error("Error grading submission:", error);
-      toast.error(error instanceof Error ? error.message : "Failed to grade submission");
+      toast.error(
+        error instanceof Error ? error.message : "Failed to grade submission",
+      );
     } finally {
       setGrading(false);
     }
@@ -352,20 +417,24 @@ export function SeedRoomGrading({ roomId, mapId }: SeedRoomGradingProps) {
     setGradingForm({
       grade: submission.grade || "pass",
       points: submission.points_awarded?.toString() || "",
-      comments: ""
+      comments: "",
     });
     setShowGradingModal(true);
   };
 
   const filteredStudents = students
-    .filter(student => {
-      return !searchTerm ||
+    .filter((student) => {
+      return (
+        !searchTerm ||
         student.full_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        student.email.toLowerCase().includes(searchTerm.toLowerCase());
+        student.email.toLowerCase().includes(searchTerm.toLowerCase())
+      );
     })
     .sort((a, b) => {
-      const aValue = sortBy === "name" ? a.full_name.toLowerCase() : a.email.toLowerCase();
-      const bValue = sortBy === "name" ? b.full_name.toLowerCase() : b.email.toLowerCase();
+      const aValue =
+        sortBy === "name" ? a.full_name.toLowerCase() : a.email.toLowerCase();
+      const bValue =
+        sortBy === "name" ? b.full_name.toLowerCase() : b.email.toLowerCase();
 
       if (sortOrder === "asc") {
         return aValue.localeCompare(bValue);
@@ -376,10 +445,10 @@ export function SeedRoomGrading({ roomId, mapId }: SeedRoomGradingProps) {
 
   const stats = {
     total: submissions.length,
-    ungraded: submissions.filter(s => s.status === "ungraded").length,
-    graded: submissions.filter(s => s.status === "graded").length,
-    passed: submissions.filter(s => s.grade === "pass").length,
-    failed: submissions.filter(s => s.grade === "fail").length,
+    ungraded: submissions.filter((s) => s.status === "ungraded").length,
+    graded: submissions.filter((s) => s.status === "graded").length,
+    passed: submissions.filter((s) => s.grade === "pass").length,
+    failed: submissions.filter((s) => s.grade === "fail").length,
   };
 
   if (loading) {
@@ -413,7 +482,9 @@ export function SeedRoomGrading({ roomId, mapId }: SeedRoomGradingProps) {
             <div className="flex items-center justify-between">
               <div>
                 <p className="text-sm text-neutral-400">Need Grading</p>
-                <p className="text-2xl font-bold text-yellow-400">{stats.ungraded}</p>
+                <p className="text-2xl font-bold text-yellow-400">
+                  {stats.ungraded}
+                </p>
               </div>
               <Clock className="w-8 h-8 text-yellow-600" />
             </div>
@@ -425,7 +496,9 @@ export function SeedRoomGrading({ roomId, mapId }: SeedRoomGradingProps) {
             <div className="flex items-center justify-between">
               <div>
                 <p className="text-sm text-neutral-400">Graded</p>
-                <p className="text-2xl font-bold text-blue-400">{stats.graded}</p>
+                <p className="text-2xl font-bold text-blue-400">
+                  {stats.graded}
+                </p>
               </div>
               <CheckCircle className="w-8 h-8 text-blue-600" />
             </div>
@@ -437,7 +510,9 @@ export function SeedRoomGrading({ roomId, mapId }: SeedRoomGradingProps) {
             <div className="flex items-center justify-between">
               <div>
                 <p className="text-sm text-neutral-400">Passed</p>
-                <p className="text-2xl font-bold text-green-400">{stats.passed}</p>
+                <p className="text-2xl font-bold text-green-400">
+                  {stats.passed}
+                </p>
               </div>
               <CheckCircle className="w-8 h-8 text-green-600" />
             </div>
@@ -449,7 +524,9 @@ export function SeedRoomGrading({ roomId, mapId }: SeedRoomGradingProps) {
             <div className="flex items-center justify-between">
               <div>
                 <p className="text-sm text-neutral-400">Failed</p>
-                <p className="text-2xl font-bold text-red-400">{stats.failed}</p>
+                <p className="text-2xl font-bold text-red-400">
+                  {stats.failed}
+                </p>
               </div>
               <XCircle className="w-8 h-8 text-red-600" />
             </div>
@@ -471,7 +548,10 @@ export function SeedRoomGrading({ roomId, mapId }: SeedRoomGradingProps) {
               />
             </div>
             <div className="flex gap-2 items-center">
-              <Select value={sortBy} onValueChange={(value: "name" | "email") => setSortBy(value)}>
+              <Select
+                value={sortBy}
+                onValueChange={(value: "name" | "email") => setSortBy(value)}
+              >
                 <SelectTrigger className="w-32 bg-neutral-800 border-neutral-700 text-white">
                   <SelectValue />
                 </SelectTrigger>
@@ -483,10 +563,16 @@ export function SeedRoomGrading({ roomId, mapId }: SeedRoomGradingProps) {
               <Button
                 variant="outline"
                 size="sm"
-                onClick={() => setSortOrder(sortOrder === "asc" ? "desc" : "asc")}
+                onClick={() =>
+                  setSortOrder(sortOrder === "asc" ? "desc" : "asc")
+                }
                 className="px-2 bg-neutral-800 border-neutral-700"
               >
-                {sortOrder === "asc" ? <ArrowUp className="h-4 w-4" /> : <ArrowDown className="h-4 w-4" />}
+                {sortOrder === "asc" ? (
+                  <ArrowUp className="h-4 w-4" />
+                ) : (
+                  <ArrowDown className="h-4 w-4" />
+                )}
               </Button>
             </div>
           </div>
@@ -497,7 +583,8 @@ export function SeedRoomGrading({ roomId, mapId }: SeedRoomGradingProps) {
       <Card className="bg-neutral-900/50 border-neutral-800">
         <CardHeader>
           <CardTitle className="text-white">
-            Gradebook ({filteredStudents.length} students, {assessmentNodes.length} assignments)
+            Gradebook ({filteredStudents.length} students,{" "}
+            {assessmentNodes.length} assignments)
           </CardTitle>
         </CardHeader>
         <CardContent>
@@ -516,19 +603,31 @@ export function SeedRoomGrading({ roomId, mapId }: SeedRoomGradingProps) {
           ) : (
             <div className="border border-neutral-700 rounded-lg overflow-hidden">
               <div className="overflow-x-auto">
-                <div className="min-w-full" style={{ display: 'table', width: '100%' }}>
+                <div
+                  className="min-w-full"
+                  style={{ display: "table", width: "100%" }}
+                >
                   {/* Header Row */}
-                  <div className="flex bg-neutral-900 border-b border-neutral-700 sticky top-0 z-10" style={{ minWidth: 'max-content' }}>
+                  <div
+                    className="flex bg-neutral-900 border-b border-neutral-700 sticky top-0 z-10"
+                    style={{ minWidth: "max-content" }}
+                  >
                     <div className="w-48 p-3 border-r border-neutral-700 bg-neutral-900 font-semibold text-sm sticky left-0 z-20 text-neutral-100 flex-shrink-0">
                       Student
                     </div>
                     {assessmentNodes.map((node) => (
-                      <div key={node.id} className="w-32 p-2 border-r border-neutral-700 text-center flex-shrink-0">
-                        <div className="font-medium text-xs line-clamp-2 text-neutral-100" title={node.node_title}>
+                      <div
+                        key={node.id}
+                        className="w-32 p-2 border-r border-neutral-700 text-center flex-shrink-0"
+                      >
+                        <div
+                          className="font-medium text-xs line-clamp-2 text-neutral-100"
+                          title={node.node_title}
+                        >
                           {node.node_title}
                         </div>
                         <div className="text-xs text-neutral-400 mt-1 capitalize">
-                          {node.assessment_type.replace(/_/g, ' ')}
+                          {node.assessment_type.replace(/_/g, " ")}
                         </div>
                         {node.points_possible && (
                           <div className="text-xs text-blue-400">
@@ -541,15 +640,27 @@ export function SeedRoomGrading({ roomId, mapId }: SeedRoomGradingProps) {
 
                   {/* Student Rows */}
                   {filteredStudents.map((student) => (
-                    <div key={student.user_id} className="flex hover:bg-neutral-800 border-b border-neutral-700" style={{ minWidth: 'max-content' }}>
+                    <div
+                      key={student.user_id}
+                      className="flex hover:bg-neutral-800 border-b border-neutral-700"
+                      style={{ minWidth: "max-content" }}
+                    >
                       <div className="w-48 p-3 border-r border-neutral-700 bg-neutral-900 sticky left-0 z-10 flex-shrink-0">
-                        <div className="font-medium text-sm text-neutral-100">{student.full_name}</div>
-                        <div className="text-xs text-neutral-400">{student.email}</div>
+                        <div className="font-medium text-sm text-neutral-100">
+                          {student.full_name}
+                        </div>
+                        <div className="text-xs text-neutral-400">
+                          {student.email}
+                        </div>
                       </div>
                       {assessmentNodes.map((node) => {
-                        const submission = gradebookMatrix[student.user_id]?.[node.id];
+                        const submission =
+                          gradebookMatrix[student.user_id]?.[node.id];
                         return (
-                          <div key={`${student.user_id}-${node.id}`} className="w-32 border-r border-neutral-700 py-3 relative flex-shrink-0">
+                          <div
+                            key={`${student.user_id}-${node.id}`}
+                            className="w-32 border-r border-neutral-700 py-3 relative flex-shrink-0"
+                          >
                             <GradeCell
                               submission={submission}
                               onClick={() => {
@@ -575,10 +686,13 @@ export function SeedRoomGrading({ roomId, mapId }: SeedRoomGradingProps) {
         <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto bg-neutral-900 border-neutral-700 text-white">
           <DialogHeader>
             <DialogTitle className="text-white">
-              {selectedSubmission?.status === "graded" ? "Review Submission" : "Grade Submission"}
+              {selectedSubmission?.status === "graded"
+                ? "Review Submission"
+                : "Grade Submission"}
             </DialogTitle>
             <DialogDescription className="text-neutral-400">
-              {selectedSubmission?.student_name} - {selectedSubmission?.node_title}
+              {selectedSubmission?.student_name} -{" "}
+              {selectedSubmission?.node_title}
             </DialogDescription>
           </DialogHeader>
 
@@ -587,67 +701,80 @@ export function SeedRoomGrading({ roomId, mapId }: SeedRoomGradingProps) {
               {/* Submission Content */}
               <Card className="bg-neutral-800 border-neutral-700">
                 <CardHeader>
-                  <CardTitle className="text-lg text-white">Student Work</CardTitle>
+                  <CardTitle className="text-lg text-white">
+                    Student Work
+                  </CardTitle>
                 </CardHeader>
                 <CardContent className="space-y-4">
                   {selectedSubmission.text_answer && (
                     <div>
-                      <Label className="font-medium text-neutral-300">Text Answer:</Label>
+                      <Label className="font-medium text-neutral-300">
+                        Text Answer:
+                      </Label>
                       <div className="mt-2 p-3 bg-neutral-900 rounded-md text-neutral-100">
                         {selectedSubmission.text_answer}
                       </div>
                     </div>
                   )}
 
-                  {selectedSubmission.file_urls && selectedSubmission.file_urls.length > 0 && (
-                    <div>
-                      <Label className="font-medium text-neutral-300">File Uploads:</Label>
-                      <div className="mt-2 space-y-3">
-                        {selectedSubmission.file_urls.map((url, index) => {
-                          // Check if the file is an image based on extension
-                          const isImage = /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(url);
-
-                          return (
-                            <div key={index}>
-                              {isImage ? (
-                                <div className="space-y-2">
-                                  <img
-                                    src={url}
-                                    alt={`Submission file ${index + 1}`}
-                                    className="max-w-full rounded-md border border-neutral-700"
-                                    style={{ maxHeight: '400px', objectFit: 'contain' }}
-                                  />
+                  {selectedSubmission.file_urls &&
+                    selectedSubmission.file_urls.length > 0 && (
+                      <div>
+                        <Label className="font-medium text-neutral-300">
+                          File Uploads:
+                        </Label>
+                        <div className="mt-2 space-y-3">
+                          {selectedSubmission.file_urls.map((url, index) => {
+                            // Check if the file is an image based on extension
+                            const isImage =
+                              /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(url);
+
+                            return (
+                              <div key={index}>
+                                {isImage ? (
+                                  <div className="space-y-2">
+                                    <img
+                                      src={url}
+                                      alt={`Submission file ${index + 1}`}
+                                      className="max-w-full rounded-md border border-neutral-700"
+                                      style={{
+                                        maxHeight: "400px",
+                                        objectFit: "contain",
+                                      }}
+                                    />
+                                    <a
+                                      href={url}
+                                      target="_blank"
+                                      rel="noopener noreferrer"
+                                      className="flex items-center gap-2 text-blue-400 hover:underline text-sm"
+                                    >
+                                      <Download className="h-3 w-3" />
+                                      Download File {index + 1}
+                                    </a>
+                                  </div>
+                                ) : (
                                   <a
                                     href={url}
                                     target="_blank"
                                     rel="noopener noreferrer"
-                                    className="flex items-center gap-2 text-blue-400 hover:underline text-sm"
+                                    className="flex items-center gap-2 text-blue-400 hover:underline"
                                   >
-                                    <Download className="h-3 w-3" />
-                                    Download File {index + 1}
+                                    <Download className="h-4 w-4" />
+                                    File {index + 1}
                                   </a>
-                                </div>
-                              ) : (
-                                <a
-                                  href={url}
-                                  target="_blank"
-                                  rel="noopener noreferrer"
-                                  className="flex items-center gap-2 text-blue-400 hover:underline"
-                                >
-                                  <Download className="h-4 w-4" />
-                                  File {index + 1}
-                                </a>
-                              )}
-                            </div>
-                          );
-                        })}
+                                )}
+                              </div>
+                            );
+                          })}
+                        </div>
                       </div>
-                    </div>
-                  )}
+                    )}
 
                   {selectedSubmission.image_url && (
                     <div>
-                      <Label className="font-medium text-neutral-300">Image:</Label>
+                      <Label className="font-medium text-neutral-300">
+                        Image:
+                      </Label>
                       <div className="mt-2">
                         <img
                           src={selectedSubmission.image_url}
@@ -664,7 +791,9 @@ export function SeedRoomGrading({ roomId, mapId }: SeedRoomGradingProps) {
               <Card className="bg-neutral-800 border-neutral-700">
                 <CardHeader>
                   <CardTitle className="text-lg text-white">
-                    {selectedSubmission.status === "graded" ? "Edit Grade" : "Grade Submission"}
+                    {selectedSubmission.status === "graded"
+                      ? "Edit Grade"
+                      : "Grade Submission"}
                   </CardTitle>
                 </CardHeader>
                 <CardContent className="space-y-4">
@@ -673,7 +802,9 @@ export function SeedRoomGrading({ roomId, mapId }: SeedRoomGradingProps) {
                       <Label className="text-neutral-300">Grade</Label>
                       <Select
                         value={gradingForm.grade}
-                        onValueChange={(value: "pass" | "fail") => setGradingForm(prev => ({ ...prev, grade: value }))}
+                        onValueChange={(value: "pass" | "fail") =>
+                          setGradingForm((prev) => ({ ...prev, grade: value }))
+                        }
                       >
                         <SelectTrigger className="bg-neutral-900 border-neutral-700 text-white">
                           <SelectValue />
@@ -687,7 +818,11 @@ export function SeedRoomGrading({ roomId, mapId }: SeedRoomGradingProps) {
                     {selectedSubmission.is_grading_enabled && (
                       <div>
                         <Label className="text-neutral-300">
-                          Points{selectedSubmission.points_possible ? ` (Max: ${selectedSubmission.points_possible})` : ''} <span className="text-red-500">*</span>
+                          Points
+                          {selectedSubmission.points_possible
+                            ? ` (Max: ${selectedSubmission.points_possible})`
+                            : ""}{" "}
+                          <span className="text-red-500">*</span>
                         </Label>
                         <Input
                           type="number"
@@ -698,14 +833,22 @@ export function SeedRoomGrading({ roomId, mapId }: SeedRoomGradingProps) {
 
                             // Allow empty string for clearing
                             if (value === "") {
-                              setGradingForm(prev => ({ ...prev, points: "" }));
+                              setGradingForm((prev) => ({
+                                ...prev,
+                                points: "",
+                              }));
                               return;
                             }
 
                             // Validate against max and min
                             if (!isNaN(numValue)) {
-                              if (selectedSubmission.points_possible !== null && numValue > selectedSubmission.points_possible) {
-                                toast.error(`Points cannot exceed ${selectedSubmission.points_possible}`);
+                              if (
+                                selectedSubmission.points_possible !== null &&
+                                numValue > selectedSubmission.points_possible
+                              ) {
+                                toast.error(
+                                  `Points cannot exceed ${selectedSubmission.points_possible}`,
+                                );
                                 return;
                               }
                               if (numValue < 0) {
@@ -714,21 +857,32 @@ export function SeedRoomGrading({ roomId, mapId }: SeedRoomGradingProps) {
                               }
                             }
 
-                            setGradingForm(prev => ({ ...prev, points: value }));
+                            setGradingForm((prev) => ({
+                              ...prev,
+                              points: value,
+                            }));
                           }}
                           min={0}
                           max={selectedSubmission.points_possible || undefined}
                           placeholder="Enter points"
-                          className={`bg-neutral-900 border-neutral-700 text-white ${gradingForm.points && selectedSubmission.points_possible && parseInt(gradingForm.points) > selectedSubmission.points_possible
-                            ? "border-red-500"
-                            : ""
-                            }`}
+                          className={`bg-neutral-900 border-neutral-700 text-white ${
+                            gradingForm.points &&
+                            selectedSubmission.points_possible &&
+                            parseInt(gradingForm.points) >
+                              selectedSubmission.points_possible
+                              ? "border-red-500"
+                              : ""
+                          }`}
                         />
-                        {gradingForm.points && selectedSubmission.points_possible && parseInt(gradingForm.points) > selectedSubmission.points_possible && (
-                          <p className="text-xs text-red-400 mt-1">
-                            Points cannot exceed maximum of {selectedSubmission.points_possible}
-                          </p>
-                        )}
+                        {gradingForm.points &&
+                          selectedSubmission.points_possible &&
+                          parseInt(gradingForm.points) >
+                            selectedSubmission.points_possible && (
+                            <p className="text-xs text-red-400 mt-1">
+                              Points cannot exceed maximum of{" "}
+                              {selectedSubmission.points_possible}
+                            </p>
+                          )}
                       </div>
                     )}
                   </div>
@@ -736,23 +890,42 @@ export function SeedRoomGrading({ roomId, mapId }: SeedRoomGradingProps) {
                     <Label className="text-neutral-300">Comments</Label>
                     <Textarea
                       value={gradingForm.comments}
-                      onChange={(e) => setGradingForm(prev => ({ ...prev, comments: e.target.value }))}
+                      onChange={(e) =>
+                        setGradingForm((prev) => ({
+                          ...prev,
+                          comments: e.target.value,
+                        }))
+                      }
                       placeholder="Provide feedback to the student..."
                       className="bg-neutral-900 border-neutral-700 text-white"
                     />
                   </div>
 
                   <Button
-                    onClick={() => handleGradeSubmission(
-                      selectedSubmission.id,
-                      gradingForm.grade,
-                      selectedSubmission.is_grading_enabled ? (gradingForm.points ? parseInt(gradingForm.points) : null) : null,
-                      gradingForm.comments
-                    )}
-                    disabled={grading || (selectedSubmission.is_grading_enabled && !gradingForm.points.trim())}
+                    onClick={() =>
+                      handleGradeSubmission(
+                        selectedSubmission.id,
+                        gradingForm.grade,
+                        selectedSubmission.is_grading_enabled
+                          ? gradingForm.points
+                            ? parseInt(gradingForm.points)
+                            : null
+                          : null,
+                        gradingForm.comments,
+                      )
+                    }
+                    disabled={
+                      grading ||
+                      (selectedSubmission.is_grading_enabled &&
+                        !gradingForm.points.trim())
+                    }
                     className="w-full"
                   >
-                    {grading ? "Grading..." : selectedSubmission.status === "graded" ? "Update Grade" : "Submit Grade"}
+                    {grading
+                      ? "Grading..."
+                      : selectedSubmission.status === "graded"
+                        ? "Update Grade"
+                        : "Submit Grade"}
                   </Button>
                 </CardContent>
               </Card>