fix(ui): change tab names

fix(api): change api url

package.json

@@ -13,6 +13,7 @@
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
     "@tailwindcss/vite": "^4.1.18",
+    "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.562.0",

pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       '@tailwindcss/vite':
         specifier: ^4.1.18
         version: 4.1.18(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2))
+      '@tanstack/react-table':
+        specifier: ^8.21.3
+        version: 8.21.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -772,6 +775,17 @@ packages:
     peerDependencies:
       vite: ^5.2.0 || ^6 || ^7
 
+  '@tanstack/react-table@8.21.3':
+    resolution: {integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+
+  '@tanstack/table-core@8.21.3':
+    resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
+    engines: {node: '>=12'}
+
   '@types/babel__core@7.20.5':
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
 
@@ -2071,6 +2085,14 @@ snapshots:
       tailwindcss: 4.1.18
       vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)
 
+  '@tanstack/react-table@8.21.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@tanstack/table-core': 8.21.3
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+
+  '@tanstack/table-core@8.21.3': {}
+
   '@types/babel__core@7.20.5':
     dependencies:
       '@babel/parser': 7.28.5

src/App.tsx

@@ -5,10 +5,10 @@ import {
 } from "react-router-dom";
 import { Login } from "./pages/auth/Login";
 import { Home } from "./pages/student/Home";
-import { Practice } from "./pages/student/Practice";
+import { Drills } from "./pages/student/Drills";
 import { Rewards } from "./pages/student/Rewards";
 import { Profile } from "./pages/student/Profile";
-import { Progress } from "./pages/student/Progress";
+import { Lessons } from "./pages/student/Lessons";
 import { ProtectedRoute } from "./components/ProtectedRoute";
 import { StudentLayout } from "./pages/student/StudentLayout";
 
@@ -30,12 +30,12 @@ function App() {
               element: <Home />,
             },
             {
-              path: "practice",
+              path: "drills",
-              element: <Practice />,
+              element: <Drills />,
             },
             {
-              path: "progress",
+              path: "lessons",
-              element: <Progress />,
+              element: <Lessons />,
             },
             {
               path: "rewards",

src/components/data-table/columns.tsx

@@ -0,0 +1,22 @@
+import type { ColumnDef } from "@tanstack/react-table";
+import type { TestDate } from "../../types/testdate";
+
+export const columns: ColumnDef<TestDate>[] = [
+  {
+    accessorKey: "date",
+    header: "Test Date",
+  },
+  {
+    accessorKey: "deadline",
+    header: "Registration Deadline",
+  },
+  {
+    accessorKey: "latedeadline",
+    header: "Late Registration Deadline",
+  },
+  {
+    accessorKey: "is_digital",
+    header: "Action",
+    cell: ({ row }) => <span>{row.original.is_digital ? "Yes" : "No"}</span>,
+  },
+];

src/components/data-table/data-table.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import {
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+
+import {
+  Table,
+  TableHeader,
+  TableRow,
+  TableBody,
+  TableCell,
+  TableHead,
+} from "../ui/table";
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+}: DataTableProps<TData, TValue>) {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <div className="overflow-hidden rounded-md border w-full">
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => {
+                return (
+                  <TableHead
+                    key={header.id}
+                    className="font-satoshi tracking-wider"
+                  >
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </TableHead>
+                );
+              })}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && "selected"}
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="bg-black h-16 ">
+                <h2 className="text-white text-center font-satoshi text-lg">
+                  No SAT dates available right now.
+                </h2>
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

src/components/ui/table.tsx

@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

src/pages/student/Drills.tsx

@@ -1,13 +1,13 @@
 import { useAuthStore } from "../../stores/authStore";
 
-export const Practice = () => {
+export const Drills = () => {
   const user = useAuthStore((state) => state.user);
 
   return (
     <div className="min-h-screen bg-gray-50">
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div className="bg-white rounded-lg shadow p-6">
-          <h2 className="text-2xl font-bold text-gray-800 mb-4">Practice</h2>
+          <h2 className="text-2xl font-bold text-gray-800 mb-4">Drills</h2>
           <div className="space-y-2 text-gray-600">
             <p>Email: {user?.email}</p>
             <p>Role: {user?.role}</p>

src/pages/student/Home.tsx

@@ -6,11 +6,10 @@ import {
   TabsContent,
 } from "../../components/ui/tabs";
 import { useAuthStore } from "../../stores/authStore";
-import { Search } from "lucide-react";
+import { CheckCircle, Search } from "lucide-react";
 import { api } from "../../utils/api";
 import {
   Card,
-  CardAction,
   CardContent,
   CardDescription,
   CardFooter,
@@ -19,13 +18,19 @@ import {
 } from "../../components/ui/card";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
+import type { PracticeSheet } from "../../types/sheet";
 
 export const Home = () => {
   const user = useAuthStore((state) => state.user);
-  const [practiceSheets, setPracticeSheets] = useState([]);
+
   // const logout = useAuthStore((state) => state.logout);
   // const navigate = useNavigate();
 
+  const [practiceSheets, setPracticeSheets] = useState<PracticeSheet[]>([]);
+  const [notStartedSheets, setNotStartedSheets] = useState<PracticeSheet[]>([]);
+  const [inProgressSheets, setInProgressSheets] = useState<PracticeSheet[]>([]);
+  const [completedSheets, setCompletedSheets] = useState<PracticeSheet[]>([]);
+
   useEffect(() => {
     const fetchPracticeSheets = async () => {
       if (!user) return;
@@ -45,11 +50,28 @@ export const Home = () => {
         }
         const sheets = await api.getPracticeSheets(token, 1, 10);
         setPracticeSheets(sheets.data);
+        sortPracticeSheets(sheets.data);
       } catch (error) {
         console.error("Error fetching practice sheets:", error);
       }
     };
 
+    const sortPracticeSheets = (sheets: PracticeSheet[]) => {
+      const notStarted = sheets.filter(
+        (sheet) => sheet.user_status === "NOT_STARTED"
+      );
+      const inProgress = sheets.filter(
+        (sheet) => sheet.user_status === "in-progress"
+      );
+      const completed = sheets.filter(
+        (sheet) => sheet.user_status === "completed"
+      );
+
+      setNotStartedSheets(notStarted);
+      setInProgressSheets(inProgress);
+      setCompletedSheets(completed);
+    };
+
     fetchPracticeSheets();
   }, [user]);
 
@@ -59,7 +81,7 @@ export const Home = () => {
         <h1 className="text-4xl font-satoshi-bold tracking-tight text-gray-800">
           Welcome, {user?.name || "Student"}
         </h1>
-        <div className="relative w-full">
+        <section className="relative w-full">
           <input
             type="text"
             placeholder="Search..."
@@ -68,19 +90,19 @@ export const Home = () => {
           <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
             <Search size={22} color="gray" />
           </div>
-        </div>
+        </section>
-        <div>
+        <section className="w-full">
-          <Tabs defaultValue="all" className="w-full space-y-4">
+          <Tabs defaultValue="all" className="w-full ">
-            <TabsList className="bg-transparent border-b rounded-none p-0">
+            <TabsList className="bg-transparent border-b rounded-none p-0 w-full">
               <TabsTrigger
                 value="all"
                 className="font-satoshi-regular tracking-wide text-md rounded-none border-b-2 data-[state=active]:font-satoshi-medium data-[state=active]:border-b-indigo-800 data-[state=active]:text-indigo-800"
               >
-                All status
+                All
               </TabsTrigger>
 
               <TabsTrigger
-                value="not-started"
+                value="NOT_STARTED"
                 className="font-satoshi-regular tracking-wide text-md rounded-none border-b-2 data-[state=active]:border-b-indigo-800 data-[state=active]:text-indigo-800"
               >
                 Not Started
@@ -102,7 +124,66 @@ export const Home = () => {
             </TabsList>
             <TabsContent value="all">
               <div className="space-y-6">
-                {practiceSheets.map((sheet) => (
+                {practiceSheets.length < 0 ? (
+                  practiceSheets.slice(0, 4).map((sheet) => (
+                    <Card key={sheet?.id}>
+                      <CardHeader>
+                        <CardTitle className="font-satoshi-medium text-xl">
+                          {sheet?.title}
+                        </CardTitle>
+                        <CardDescription className="font-satoshi">
+                          {sheet?.description}
+                        </CardDescription>
+                      </CardHeader>
+                      <CardContent className="flex justify-between">
+                        <p className="font-satoshi text-gray-700">
+                          Not Started
+                        </p>
+                        <Badge
+                          variant="secondary"
+                          className="bg-indigo-100 text-indigo-500 font-satoshi tracking-wide"
+                        >
+                          {sheet?.modules_count} modules
+                        </Badge>
+                      </CardContent>
+                      <CardContent>
+                        <p className="font-satoshi text-gray-700">
+                          {sheet?.time_limit} minutes
+                        </p>
+                      </CardContent>
+                      <CardFooter>
+                        <Button
+                          variant="outline"
+                          className="font-satoshi w-full text-lg py-6 bg-indigo-600 text-white"
+                        >
+                          Start
+                        </Button>
+                      </CardFooter>
+                    </Card>
+                  ))
+                ) : (
+                  <div className="flex items-center justify-center py-4 rounded-full">
+                    <h2 className="text-center font-satoshi text-lg text-gray-500">
+                      No Practice Sheets available.
+                    </h2>
+                  </div>
+                )}
+                {practiceSheets.length > 4 && (
+                  <div className="text-center">
+                    <Button
+                      variant="outline"
+                      className="font-satoshi text-lg py-3 px-6 mt-4 cursor-pointer"
+                      onClick={() => setPracticeSheets(practiceSheets)}
+                    >
+                      Load more
+                    </Button>
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+            <TabsContent value="NOT_STARTED">
+              <div className="space-y-6">
+                {notStartedSheets.map((sheet) => (
                   <Card key={sheet?.id}>
                     <CardHeader>
                       <CardTitle className="font-satoshi-medium text-xl">
@@ -138,17 +219,116 @@ export const Home = () => {
                 ))}
               </div>
             </TabsContent>
-            <TabsContent value="not-started">
-              <h1>Not Started</h1>
-            </TabsContent>
             <TabsContent value="in-progress">
-              <h1>In Progress</h1>
+              {inProgressSheets.map((sheet) => (
+                <Card key={sheet?.id}>
+                  <CardHeader>
+                    <CardTitle className="font-satoshi-medium text-xl">
+                      {sheet?.title}
+                    </CardTitle>
+                    <CardDescription className="font-satoshi">
+                      {sheet?.subject}
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent className="flex justify-between">
+                    <p className="font-satoshi text-gray-700">Not Started</p>
+                    <Badge
+                      variant="secondary"
+                      className="bg-indigo-100 text-indigo-500 font-satoshi tracking-wide  "
+                    >
+                      {sheet?.modules_count} modules
+                    </Badge>
+                  </CardContent>
+                  <CardContent>
+                    <p className="font-satoshi text-gray-700">
+                      {sheet?.time_limit} minutes
+                    </p>
+                  </CardContent>
+                  <CardFooter>
+                    <Button
+                      variant="outline"
+                      className="font-satoshi w-full text-lg py-6 bg-indigo-600 text-white"
+                    >
+                      Start
+                    </Button>
+                  </CardFooter>
+                </Card>
+              ))}
             </TabsContent>
             <TabsContent value="completed">
-              <h1>Completed</h1>
+              {completedSheets.map((sheet) => (
+                <Card key={sheet?.id}>
+                  <CardHeader>
+                    <CardTitle className="font-satoshi-medium text-xl">
+                      {sheet?.title}
+                    </CardTitle>
+                    <CardDescription className="font-satoshi">
+                      {sheet?.subject}
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent className="flex justify-between">
+                    <p className="font-satoshi text-gray-700">Not Started</p>
+                    <Badge
+                      variant="secondary"
+                      className="bg-indigo-100 text-indigo-500 font-satoshi tracking-wide  "
+                    >
+                      {sheet?.modules_count} modules
+                    </Badge>
+                  </CardContent>
+                  <CardContent>
+                    <p className="font-satoshi text-gray-700">
+                      {sheet?.time_limit} minutes
+                    </p>
+                  </CardContent>
+                  <CardFooter>
+                    <Button
+                      variant="outline"
+                      className="font-satoshi w-full text-lg py-6 bg-indigo-600 text-white"
+                    >
+                      Start
+                    </Button>
+                  </CardFooter>
+                </Card>
+              ))}
             </TabsContent>
           </Tabs>
+        </section>
+        <section className="w-full space-y-4"></section>
+        <section className="space-y-4">
+          <h1 className="font-satoshi-bold text-2xl tracking-tight">
+            SAT Preparation Tips
+          </h1>
+          <section className="space-y-4">
+            <div className="flex items-center gap-2">
+              <CheckCircle size={24} color="#AD45FF" />
+              <p className="font-satoshi text-lg">
+                Practice regularly with official SAT materials
+              </p>
             </div>
+            <div className="flex items-center gap-2">
+              <CheckCircle size={24} color="#AD45FF" />
+              <p className="font-satoshi text-lg">
+                Review your mistakes and learn from them
+              </p>
+            </div>
+            <div className="flex items-center gap-2">
+              <CheckCircle size={24} color="#AD45FF" />
+              <p className="font-satoshi text-lg">Focus on your weak areas</p>
+            </div>
+            <div className="flex items-center gap-2">
+              <CheckCircle size={24} color="#AD45FF" />
+              <p className="font-satoshi text-lg">
+                Take full-length practice tests
+              </p>
+            </div>
+            <div className="flex items-center gap-2">
+              <CheckCircle size={24} color="#AD45FF" />
+              <p className="font-satoshi text-lg">
+                Get plenty of rest before the test day
+              </p>
+            </div>
+          </section>
+        </section>
       </main>
     </div>
   );

src/pages/student/Lessons.tsx

@@ -1,13 +1,13 @@
 import { useAuthStore } from "../../stores/authStore";
 
-export const Progress = () => {
+export const Lessons = () => {
   const user = useAuthStore((state) => state.user);
 
   return (
     <div className="min-h-screen bg-gray-50">
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div className="bg-white rounded-lg shadow p-6">
-          <h2 className="text-2xl font-bold text-gray-800 mb-4">Progress</h2>
+          <h2 className="text-2xl font-bold text-gray-800 mb-4">Lessons</h2>
           <div className="space-y-2 text-gray-600">
             <p>Email: {user?.email}</p>
             <p>Role: {user?.role}</p>

src/pages/student/StudentLayout.tsx

@@ -1,5 +1,13 @@
 import { Outlet, NavLink, useNavigate } from "react-router-dom";
-import { Home, BookOpen, TrendingUp, Award, User, Menu } from "lucide-react";
+import {
+  Home,
+  BookOpen,
+  TrendingUp,
+  Award,
+  User,
+  Menu,
+  Video,
+} from "lucide-react";
 import { useAuthStore } from "../../stores/authStore";
 
 export function StudentLayout() {
@@ -14,8 +22,8 @@ export function StudentLayout() {
 
   const navItems = [
     { to: "/student/home", icon: Home, label: "Home" },
-    { to: "/student/practice", icon: BookOpen, label: "Practice" },
+    { to: "/student/drills", icon: BookOpen, label: "Drills" },
-    { to: "/student/progress", icon: TrendingUp, label: "Progress" },
+    { to: "/student/lessons", icon: Video, label: "Lessons" },
     { to: "/student/rewards", icon: Award, label: "Rewards" },
     { to: "/student/profile", icon: User, label: "Profile" },
   ];

src/types/sheet.ts

@@ -0,0 +1,23 @@
+interface CreatedBy {
+  id: string;
+  name: string;
+  email: string;
+}
+
+export interface PracticeSheet {
+  title: string;
+  difficulty: string;
+  time_limit: number;
+  description: string;
+  is_locked: boolean;
+  id: string;
+  created_by_id: string;
+  created_at: string;
+  updated_at: string;
+  questions_count: number;
+  topics: string[];
+  created_by: CreatedBy;
+  modules: string[];
+  user_status: string;
+  modules_count: number;
+}

src/types/testdate.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+
+export interface TestDate {
+  action: ReactNode;
+  test_date: string;
+  registration_deadline: string;
+  late_registration_deadline: string;
+  location: string;
+  is_digital: boolean;
+  id: string;
+}

src/utils/api.ts

@@ -1,4 +1,4 @@
-const API_URL = "https://dsat-api.edbridgescholars.com";
+const API_URL = "https://ed-dev-api.omukk.dev";
 
 export interface LoginRequest {
   email: string;
@@ -27,25 +27,6 @@ export interface ApiError {
   message?: string;
 }
 
-export interface PracticeSheet {
-  title: string;
-  subject: string;
-  difficulty: string;
-  time_limit: number;
-  description: string;
-  topics: string[];
-  is_locked: boolean;
-  id: string;
-  created_at: string;
-  created_by: {
-    id: string;
-    name: string;
-    email: string;
-  };
-  modules: string[];
-  modules_count: number;
-}
-
 class ApiClient {
   private baseURL: string;
 
@@ -128,6 +109,10 @@ class ApiClient {
       token
     );
   }
+
+  async getSatDates(token: string): Promise<any> {
+    return this.authenticatedRequest<any>(`/sat-dates/`, token);
+  }
 }
 
 export const api = new ApiClient(API_URL);