Issue #1 (highlight conflicting exams)

src/components/timetable/components/ExamTable.tsx

@@ -1,4 +1,5 @@
 import { format } from "date-fns";
+import { AlertTriangle } from "lucide-react";
 
 import type { Module } from "@/types/primitives/module";
 import type { TimetableThemeName } from "@/utils/timetable/colours";
@@ -10,8 +11,18 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
 import { TIMETABLE_THEMES } from "@/utils/timetable/colours";
 
+import type { ModuleWithExam } from "../utils/examUtils";
+import { findExamConflicts } from "../utils/examUtils";
+
 interface ExamTableProps {
   modules: (Module & { colorIndex: number; visible: boolean })[];
   timetableTheme: TimetableThemeName;
@@ -20,13 +31,22 @@ interface ExamTableProps {
 export function ExamTable({ modules, timetableTheme }: ExamTableProps) {
   // Filter modules that have exams and sort by date
   const modulesWithExams = modules
-    .filter((mod) => mod.exam?.dateTime && mod.visible)
+    .filter(
+      (mod): mod is ModuleWithExam & typeof mod =>
+        !!mod.exam?.dateTime && mod.visible,
+    )
     .sort((a, b) => {
-      const dateA = new Date(a.exam!.dateTime);
-      const dateB = new Date(b.exam!.dateTime);
+      const dateA = new Date(a.exam.dateTime);
+      const dateB = new Date(b.exam.dateTime);
       return dateA.getTime() - dateB.getTime();
     });
 
+  const conflictingModules = findExamConflicts(modulesWithExams);
+
+  const moduleCodeToNameMap = new Map<string, string>(
+    modulesWithExams.map((mod) => [mod.moduleCode, mod.name]),
+  );
+
   if (modulesWithExams.length === 0) {
     return (
       <div className="text-muted-foreground py-8 text-center">
@@ -36,47 +56,72 @@ export function ExamTable({ modules, timetableTheme }: ExamTableProps) {
   }
 
   return (
-    <div className="border-accent-foreground/20 w-full rounded-lg border p-2">
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Module Code</TableHead>
-            <TableHead>Module Name</TableHead>
-            <TableHead>Exam Date & Time</TableHead>
-            <TableHead>Duration</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {modulesWithExams.map((mod) => (
-            <TableRow key={mod.moduleCode}>
-              <TableCell>
-                <div className="flex items-center gap-2">
-                  <div
-                    className="h-4 w-4 rounded"
-                    style={{
-                      backgroundColor:
-                        TIMETABLE_THEMES[timetableTheme][mod.colorIndex]
-                          ?.backgroundColor,
-                    }}
-                  />
-                  <span className="font-medium">{mod.moduleCode}</span>
-                </div>
-              </TableCell>
-              <TableCell>{mod.name}</TableCell>
-              <TableCell>
-                {format(
-                  new Date(mod.exam!.dateTime),
-                  "MMM dd, yyyy 'at' h:mm a",
-                )}
-              </TableCell>
-              <TableCell>
-                {mod.exam!.durationInHour} hour
-                {mod.exam!.durationInHour !== 1 ? "s" : ""}
-              </TableCell>
+    <TooltipProvider>
+      <div className="border-accent-foreground/20 w-full rounded-lg border p-2">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Module Code</TableHead>
+              <TableHead>Module Name</TableHead>
+              <TableHead>Exam Date & Time</TableHead>
+              <TableHead>Duration</TableHead>
             </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </div>
+          </TableHeader>
+          <TableBody>
+            {modulesWithExams.map((mod) => {
+              const conflicts = conflictingModules.get(mod.moduleCode);
+              const isConflicting = !!conflicts;
+
+              return (
+                <TableRow
+                  key={mod.moduleCode}
+                  className={cn(isConflicting && "bg-destructive/10")}
+                >
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      <div
+                        className="h-4 w-4 rounded"
+                        style={{
+                          backgroundColor:
+                            TIMETABLE_THEMES[timetableTheme][mod.colorIndex]
+                              ?.backgroundColor,
+                        }}
+                      />
+                      <span className="font-medium">{mod.moduleCode}</span>
+                      {isConflicting && (
+                        <Tooltip>
+                          <TooltipTrigger>
+                            <AlertTriangle className="text-destructive h-4 w-4" />
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>
+                              Clashes with:{" "}
+                              {conflicts
+                                ?.map((code) => moduleCodeToNameMap.get(code))
+                                .join(", ")}
+                            </p>
+                          </TooltipContent>
+                        </Tooltip>
+                      )}
+                    </div>
+                  </TableCell>
+                  <TableCell>{mod.name}</TableCell>
+                  <TableCell>
+                    {format(
+                      new Date(mod.exam.dateTime),
+                      "MMM dd, yyyy 'at' h:mm a",
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    {mod.exam.durationInHour} hour
+                    {mod.exam.durationInHour !== 1 ? "s" : ""}
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </div>
+    </TooltipProvider>
   );
 }

src/components/timetable/utils/examUtils.ts

@@ -0,0 +1,46 @@
+import type { Module } from "@/types/primitives/module";
+
+export type ModuleWithExam = Omit<Module, "exam"> & {
+  exam: NonNullable<Module["exam"]>;
+};
+
+export function findExamConflicts(
+  modulesWithExams: ModuleWithExam[],
+): Map<string, string[]> {
+  const conflictingModules = new Map<string, string[]>();
+
+  if (modulesWithExams.length < 2) {
+    return conflictingModules;
+  }
+
+  // Assuming modulesWithExams is sorted by exam start time.
+  for (let i = 0; i < modulesWithExams.length; i++) {
+    const moduleA = modulesWithExams[i];
+    const startA = new Date(moduleA.exam.dateTime);
+    const endA = new Date(
+      startA.getTime() + moduleA.exam.durationInHour * 60 * 60 * 1000,
+    );
+
+    for (let j = i + 1; j < modulesWithExams.length; j++) {
+      const moduleB = modulesWithExams[j];
+      const startB = new Date(moduleB.exam.dateTime);
+
+      // Check for overlap
+      if (startB < endA) {
+        const conflictsForA = conflictingModules.get(moduleA.moduleCode) || [];
+        if (!conflictsForA.includes(moduleB.moduleCode)) {
+          conflictsForA.push(moduleB.moduleCode);
+        }
+        conflictingModules.set(moduleA.moduleCode, conflictsForA);
+
+        const conflictsForB = conflictingModules.get(moduleB.moduleCode) || [];
+        if (!conflictsForB.includes(moduleA.moduleCode)) {
+          conflictsForB.push(moduleA.moduleCode);
+        }
+        conflictingModules.set(moduleB.moduleCode, conflictsForB);
+      }
+    }
+  }
+
+  return conflictingModules;
+}