Clover 2.0

package.json

@@ -26,6 +26,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.7",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
     "@radix-ui/react-radio-group": "^1.3.7",
     "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-select": "^2.2.5",
@@ -38,6 +39,7 @@
     "@supabase/supabase-js": "^2.49.1",
     "@tailwindcss/vite": "^4.0.14",
     "@tanstack/react-query": "^5.81.5",
+    "@tanstack/react-table": "^8.21.3",
     "axios": "^1.8.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

src/.test/api/classes.test.ts

@@ -15,7 +15,7 @@ jest.mock("../../api/endpoints", () => ({
   LOG_ENDPOINT: "http://mock-api/logs",
 }));
 
-jest.mock("../../supabaseClient", () => {
+jest.mock("../../lib/supabaseClient.ts", () => {
   return {
     supabase: {
       from: jest.fn(() => ({
@@ -124,7 +124,7 @@ describe("class-api", () => {
     const result = await updateStudentEnrollmentStatus(
       "class-1",
       "student-1",
-      "ENROLLED" as EnrollmentStatus
+      "ENROLLED" as EnrollmentStatus,
     );
 
     expect(result.success).toBe(true);
@@ -222,7 +222,7 @@ describe("class-api", () => {
 
     const result = await getClassActivityByClassId("class-id");
     expect(result.error).toBe(
-      "Invalid response: expected an array of activity logs"
+      "Invalid response: expected an array of activity logs",
     );
   });
 
@@ -233,7 +233,7 @@ describe("class-api", () => {
     eqMock.mockReturnValueOnce(errorResult); // for .eq("student_id", ...)
 
     // eslint-disable-next-line @typescript-eslint/no-require-imports
-    require("../../supabaseClient").supabase.from = jest.fn(() => ({
+    require("../../lib/supabaseClient.ts").supabase.from = jest.fn(() => ({
       update: jest.fn(() => ({
         eq: jest.fn().mockReturnValue({
           eq: eqMock,
@@ -244,7 +244,7 @@ describe("class-api", () => {
     const result = await updateStudentEnrollmentStatus(
       "c1",
       "s1",
-      EnrollmentStatus.ENROLLED
+      EnrollmentStatus.ENROLLED,
     );
 
     expect(result.success).toBe(false);

src/.test/hooks/useAuth.test.ts

@@ -11,7 +11,7 @@ import {
 import { useLocation, useNavigate } from "react-router-dom";
 
 // Mock Supabase client
-jest.mock("../../supabaseClient", () => {
+jest.mock("../../lib/supabaseClient.ts", () => {
   return {
     supabase: {
       auth: {
@@ -27,7 +27,7 @@ jest.mock("react-router-dom", () => ({
   useLocation: jest.fn(),
 }));
 
-import { supabase } from "../../supabaseClient";
+import { supabase } from "../../lib/supabaseClient.ts";
 const mockSupabaseAuth = supabase.auth as jest.Mocked<typeof supabase.auth>;
 const mockUseNavigate = useNavigate as jest.Mock;
 const mockUseLocation = useLocation as jest.Mock;
@@ -79,7 +79,7 @@ describe("useAuth", () => {
             subscription: mockSubscription,
           },
         };
-      }
+      },
     );
   });
 
@@ -116,7 +116,7 @@ describe("useAuth", () => {
   it("should handle auth state changes", async () => {
     let capturedCallback: (
       event: AuthChangeEvent,
-      session: Session | null
+      session: Session | null,
     ) => void;
 
     mockSupabaseAuth.onAuthStateChange.mockImplementation((cb) => {
@@ -163,7 +163,7 @@ describe("useAuth", () => {
   it("should handle null session from auth state change", async () => {
     let capturedCallback: (
       event: AuthChangeEvent,
-      session: Session | null
+      session: Session | null,
     ) => void;
 
     mockSupabaseAuth.onAuthStateChange.mockImplementation((cb) => {
@@ -189,7 +189,7 @@ describe("useAuth", () => {
 
   it("should handle unexpected getSession error gracefully", async () => {
     mockSupabaseAuth.getSession.mockRejectedValue(
-      new Error("Failed to fetch session")
+      new Error("Failed to fetch session"),
     );
 
     mockSupabaseAuth.onAuthStateChange.mockImplementation(() => ({

src/.test/hooks/useInstructorClasses.test.ts

@@ -24,7 +24,7 @@ const supabaseMocks: {
 };
 
 // Supabase module mock
-jest.mock("../../supabaseClient", () => ({
+jest.mock("../../lib/supabaseClient.ts", () => ({
   supabase: {
     from: (...args: any[]) => supabaseMocks.mockFrom(...args),
     select: (...args: any[]) => supabaseMocks.mockSelect(...args),

src/.test/hooks/useUserClasses.test.ts

@@ -18,7 +18,7 @@ jest.mock("../../hooks/useAuth", () => ({
   useAuth: jest.fn(),
 }));
 
-jest.mock("../../supabaseClient", () => ({
+jest.mock("../../lib/supabaseClient.ts", () => ({
   supabase: {
     from: jest.fn(),
   },
@@ -28,7 +28,8 @@ const mockUseAuth = require("../../hooks/useAuth").useAuth as jest.Mock;
 const mockGetUserClasses = getUserClasses as jest.MockedFunction<
   typeof getUserClasses
 >;
-const mockFrom = require("../../supabaseClient").supabase.from as jest.Mock;
+const mockFrom = require("../../lib/supabaseClient.ts").supabase
+  .from as jest.Mock;
 
 const mockClassInfo: UserClassInfo = {
   user_class: {
@@ -97,7 +98,7 @@ describe("useUserClasses", () => {
     expect(result.current.selectedClassId).toBe("class-1");
     expect(result.current.selectedClassType).toBe("class");
     expect(result.current.selectedClass?.user_class.class_title).toBe(
-      "Physics"
+      "Physics",
     );
   });
 
@@ -135,7 +136,7 @@ describe("useUserClassStatus", () => {
     });
 
     const { result } = renderHook(() =>
-      useUserClassStatus("student-1", "class-1")
+      useUserClassStatus("student-1", "class-1"),
     );
 
     await waitFor(() => expect(result.current.loading).toBe(false));
@@ -164,7 +165,7 @@ describe("useUserClassStatus", () => {
     });
 
     const { result } = renderHook(() =>
-      useUserClassStatus("student-1", "class-1")
+      useUserClassStatus("student-1", "class-1"),
     );
 
     await waitFor(() => expect(result.current.loading).toBe(false));
@@ -187,7 +188,7 @@ describe("useUserClassStatus", () => {
     });
 
     const { result } = renderHook(() =>
-      useUserClassStatus("student-1", "class-1")
+      useUserClassStatus("student-1", "class-1"),
     );
 
     await waitFor(() => expect(result.current.loading).toBe(false));
@@ -220,7 +221,7 @@ describe("useUserClassStatus", () => {
     expect(result.current.selectedClassId).toBe("non-class");
     expect(result.current.selectedClassType).toBe("non-class");
     expect(result.current.selectedClass?.user_class.class_title).toBe(
-      "Non-class Activities"
+      "Non-class Activities",
     );
   });
 

src/api/endpoints.ts

@@ -1,6 +1,6 @@
 /** Gets the endpoint from the .env if it is available otherwise it uses localhost */
 export const BASE_ENDPOINT =
-  import.meta.env.VITE_API_URL || "http://127.0.0.1:8080/api/v1";
+  import.meta.env.VITE_API_URL || "http://127.0.0.1:8080/api/v2";
 
 /* Endpoint for creating new AI suggestions */
 export const AI_SUGGESTION_ENDPOINT: string = `${BASE_ENDPOINT}/suggestion`;

src/components/CustomSelect.tsx

@@ -38,8 +38,8 @@ const CustomSelect = <T extends string>({
     >
       <SelectTrigger
         className={cn(
-          "text-sm text-muted-foreground border-b border-slate-400 dark:border-sidebar-accent bg-gray-100 dark:bg-transparent",
-          className
+          "text-sm text-muted-foreground border-b border-slate-300 dark:border-sidebar-accent/60 bg-gray-100 dark:bg-transparent",
+          className,
         )}
       >
         <SelectValue placeholder={placeholder} />

src/components/NavBar.tsx

@@ -14,7 +14,7 @@ import { DoorOpen, Menu, User2 } from "lucide-react";
 import { UserRole } from "@/types/user";
 import { useUser } from "@/context/UserContext";
 import UserAvatar from "./UserAvatar";
-import { supabase } from "@/supabaseClient";
+import { supabase } from "@/lib/supabaseClient.ts";
 import CloverLogo from "./CloverLogo";
 
 /**

src/components/ResetPasswordButton.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { updateUserPassword } from "../api/user";
-import { supabase } from "../supabaseClient";
+import { supabase } from "../lib/supabaseClient.ts";
 import {
   Dialog,
   DialogContent,
@@ -40,7 +40,7 @@ export const ResetPasswordButton = ({ userId }: { userId?: string }) => {
     if (userId) {
       const { error } = await updateUserPassword(
         userId,
-        form.getValues("newPassword")
+        form.getValues("newPassword"),
       );
 
       if (error) {

src/components/TypingLogs.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { supabase } from "@/supabaseClient";
+import { supabase } from "@/lib/supabaseClient.ts";
 import { User } from "@/types/user";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import CustomSelect from "@/components/CustomSelect";

src/components/TypingLogsDownloadButton.tsx

@@ -1,5 +1,5 @@
 import DownloadFormattedFile from "@/components/DownloadFormattedFile";
-import { supabase } from "@/supabaseClient";
+import { supabase } from "@/lib/supabaseClient.ts";
 import { User } from "@/types/user";
 import { useEffect, useState } from "react";
 

src/components/ui/progress.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }

src/components/ui/table.tsx

@@ -44,7 +44,7 @@ const TableFooter = React.forwardRef<
     ref={ref}
     className={cn(
       "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-      className
+      className,
     )}
     {...props}
   />
@@ -59,7 +59,7 @@ const TableRow = React.forwardRef<
     ref={ref}
     className={cn(
       "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
+      className,
     )}
     {...props}
   />
@@ -73,8 +73,8 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] bg-gray-200 dark:bg-transparent",
+      className,
     )}
     {...props}
   />
@@ -89,7 +89,7 @@ const TableCell = React.forwardRef<
     ref={ref}
     className={cn(
       "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className
+      className,
     )}
     {...props}
   />