feat(pages): add pretest screen

package.json

@@ -18,6 +18,7 @@
     "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "embla-carousel-react": "^8.6.0",
     "lucide-react": "^0.562.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",

pnpm-lock.yaml

@@ -32,6 +32,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      embla-carousel-react:
+        specifier: ^8.6.0
+        version: 8.6.0(react@19.2.3)
       lucide-react:
         specifier: ^0.562.0
         version: 0.562.0(react@19.2.3)
@@ -1181,6 +1184,19 @@ packages:
   electron-to-chromium@1.5.267:
     resolution: {integrity: sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==}
 
+  embla-carousel-react@8.6.0:
+    resolution: {integrity: sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
+  embla-carousel-reactive-utils@8.6.0:
+    resolution: {integrity: sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==}
+    peerDependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel@8.6.0:
+    resolution: {integrity: sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==}
+
   enhanced-resolve@5.18.4:
     resolution: {integrity: sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==}
     engines: {node: '>=10.13.0'}
@@ -2771,6 +2787,18 @@ snapshots:
 
   electron-to-chromium@1.5.267: {}
 
+  embla-carousel-react@8.6.0(react@19.2.3):
+    dependencies:
+      embla-carousel: 8.6.0
+      embla-carousel-reactive-utils: 8.6.0(embla-carousel@8.6.0)
+      react: 19.2.3
+
+  embla-carousel-reactive-utils@8.6.0(embla-carousel@8.6.0):
+    dependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel@8.6.0: {}
+
   enhanced-resolve@5.18.4:
     dependencies:
       graceful-fs: 4.2.11

src/App.tsx

@@ -5,12 +5,15 @@ import {
 } from "react-router-dom";
 import { Login } from "./pages/auth/Login";
 import { Home } from "./pages/student/Home";
-import { Drills } from "./pages/student/Drills";
+import { Practice } from "./pages/student/Practice";
 import { Rewards } from "./pages/student/Rewards";
 import { Profile } from "./pages/student/Profile";
 import { Lessons } from "./pages/student/Lessons";
 import { ProtectedRoute } from "./components/ProtectedRoute";
 import { StudentLayout } from "./pages/student/StudentLayout";
+import { Test } from "./pages/student/practice/Test";
+import { Results } from "./pages/student/practice/Results";
+import { Pretest } from "./pages/student/practice/Pretest";
 
 function App() {
   const router = createBrowserRouter([
@@ -30,8 +33,8 @@ function App() {
               element: <Home />,
             },
             {
-              path: "drills",
+              path: "practice",
-              element: <Drills />,
+              element: <Practice />,
             },
             {
               path: "lessons",
@@ -45,6 +48,20 @@ function App() {
               path: "profile",
               element: <Profile />,
             },
+            {
+              path: "practice/:sheetId",
+              element: <Pretest />,
+              children: [
+                {
+                  path: "test",
+                  element: <Test />,
+                },
+                {
+                  path: "results",
+                  element: <Results />,
+                },
+              ],
+            },
             // more student subroutes here
           ],
         },

src/components/ui/carousel.tsx

@@ -0,0 +1,239 @@
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    },
+    plugins
+  )
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault()
+        scrollPrev()
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault()
+        scrollNext()
+      }
+    },
+    [scrollPrev, scrollNext]
+  )
+
+  React.useEffect(() => {
+    if (!api || !setApi) return
+    setApi(api)
+  }, [api, setApi])
+
+  React.useEffect(() => {
+    if (!api) return
+    onSelect(api)
+    api.on("reInit", onSelect)
+    api.on("select", onSelect)
+
+    return () => {
+      api?.off("select", onSelect)
+    }
+  }, [api, onSelect])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  )
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -left-12 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+}
+
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -right-12 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+}
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}

src/pages/student/Home.tsx

@@ -20,13 +20,14 @@ import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
 import type { PracticeSheet } from "../../types/sheet";
 import { formatStatus } from "../../lib/utils";
+import { useNavigate } from "react-router-dom";
 
 export const Home = () => {
   const user = useAuthStore((state) => state.user);
+  const navigate = useNavigate();
 
   // const logout = useAuthStore((state) => state.logout);
   // const navigate = useNavigate();
-
   const [practiceSheets, setPracticeSheets] = useState<PracticeSheet[]>([]);
   const [notStartedSheets, setNotStartedSheets] = useState<PracticeSheet[]>([]);
   const [inProgressSheets, setInProgressSheets] = useState<PracticeSheet[]>([]);
@@ -77,6 +78,10 @@ export const Home = () => {
     fetchPracticeSheets();
   }, [user]);
 
+  const handleStartPractice = (sheetId: string) => {
+    navigate(`/student/practice/${sheetId}`);
+  };
+
   return (
     <div className="min-h-screen bg-gray-50">
       <main className="flex flex-col gap-12 max-w-full mx-auto px-8 sm:px-6 lg:px-8 py-8">
@@ -124,7 +129,7 @@ export const Home = () => {
               <div className="space-y-6">
                 {practiceSheets.length > 0 ? (
                   practiceSheets.map((sheet) => (
-                    <Card key={sheet?.id}>
+                    <Card key={sheet?.id} className="rounded-4xl">
                       <CardHeader>
                         <CardTitle className="font-satoshi-medium text-xl">
                           {sheet?.title}
@@ -151,6 +156,7 @@ export const Home = () => {
                       </CardContent>
                       <CardFooter>
                         <Button
+                          onClick={() => handleStartPractice(sheet?.id)}
                           variant="outline"
                           className="font-satoshi rounded-3xl w-full text-lg py-6 bg-linear-to-br from-purple-500 to-purple-600 text-white"
                         >
@@ -171,7 +177,7 @@ export const Home = () => {
             <TabsContent value="NOT_STARTED" className="pt-6">
               <div className="space-y-6">
                 {notStartedSheets.map((sheet) => (
-                  <Card key={sheet?.id}>
+                  <Card key={sheet?.id} className="rounded-4xl">
                     <CardHeader>
                       <CardTitle className="font-satoshi-medium text-xl">
                         {sheet?.title}
@@ -209,7 +215,7 @@ export const Home = () => {
             <TabsContent value="COMPLETED" className="pt-6">
               {completedSheets.length > 0 ? (
                 completedSheets.map((sheet) => (
-                  <Card key={sheet?.id}>
+                  <Card key={sheet?.id} className="rounded-4xl">
                     <CardHeader>
                       <CardTitle className="font-satoshi-medium text-xl">
                         {sheet?.title}
@@ -262,29 +268,29 @@ export const Home = () => {
           <section className="space-y-4">
             <div className="flex gap-2">
               <CheckCircle size={24} color="#AD45FF" />
-              <p className="font-satoshi text-lg">
+              <p className="font-satoshi text-md">
                 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">
+              <p className="font-satoshi text-md">
                 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>
+              <p className="font-satoshi text-md">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">
+              <p className="font-satoshi text-md">
                 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">
+              <p className="font-satoshi text-md">
                 Get plenty of rest before the test day
               </p>
             </div>

src/pages/student/Practice.tsx

@@ -18,7 +18,7 @@ import {
 } from "../../components/ui/card";
 import { Button } from "../../components/ui/button";
 
-export const Drills = () => {
+export const Practice = () => {
   return (
     <main className="min-h-screen max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4">
       <header className="flex justify-between items-center">
@@ -60,7 +60,7 @@ export const Drills = () => {
       </section>
       <section className="flex flex-col gap-6">
         <h1 className="font-satoshi-black text-2xl">Practice your way</h1>
-        <Card className="rounded-4xl">
+        <Card className="rounded-4xl cursor-pointer hover:bg-gray-50 active:bg-gray-50 active:translate-y-1">
           <CardHeader className="space-y-3">
             <div className="w-fit bg-linear-to-br from-red-400 to-red-500 p-3 rounded-2xl">
               <Target size={20} color="white" />
@@ -78,7 +78,7 @@ export const Drills = () => {
             </CardAction>
           </CardHeader>
         </Card>
-        <Card className="rounded-4xl">
+        <Card className="rounded-4xl cursor-pointer hover:bg-gray-50 active:bg-gray-50 active:translate-y-1">
           <CardHeader className="space-y-3">
             <div className="w-fit bg-linear-to-br from-cyan-400 to-cyan-500 p-3 rounded-2xl">
               <Zap size={20} color="white" />
@@ -96,7 +96,7 @@ export const Drills = () => {
             </CardAction>
           </CardHeader>
         </Card>
-        <Card className="rounded-4xl">
+        <Card className="rounded-4xl cursor-pointer hover:bg-gray-50 active:bg-gray-50 active:translate-y-1">
           <CardHeader className="space-y-3">
             <div className="w-fit bg-linear-to-br from-lime-400 to-lime-500 p-3 rounded-2xl">
               <Trophy size={20} color="white" />

src/pages/student/StudentLayout.tsx

@@ -4,7 +4,7 @@ import { Home, BookOpen, Award, User, Video } from "lucide-react";
 export function StudentLayout() {
   const navItems = [
     { to: "/student/home", icon: Home, label: "Home" },
-    { to: "/student/drills", icon: BookOpen, label: "Drills" },
+    { to: "/student/practice", icon: BookOpen, label: "Practice" },
     { to: "/student/lessons", icon: Video, label: "Lessons" },
     { to: "/student/rewards", icon: Award, label: "Rewards" },
     { to: "/student/profile", icon: User, label: "Profile" },

src/pages/student/practice/Pretest.tsx

@@ -0,0 +1,199 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { api } from "../../../utils/api";
+import { useAuthStore } from "../../../stores/authStore";
+import type { PracticeSheet } from "../../../types/sheet";
+import { CircleQuestionMark, Clock, Layers, Tag } from "lucide-react";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  type CarouselApi,
+} from "../../../components/ui/carousel";
+import { Button } from "../../../components/ui/button";
+
+export const Pretest = () => {
+  const user = useAuthStore((state) => state.user);
+  const { sheetId } = useParams<{ sheetId: string }>();
+  const [carouselApi, setCarouselApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+  const [count, setCount] = useState(0);
+
+  const [practiceSheet, setPracticeSheet] = useState<PracticeSheet | null>(
+    null,
+  );
+
+  function handleStartTest(sheetId: string) {
+    console.log("Starting test for Practice Sheet. ID: ", sheetId);
+  }
+
+  useEffect(() => {
+    if (!user) return;
+    async function fetchPracticeSheet(sheetId: string) {
+      const authStorage = localStorage.getItem("auth-storage");
+      if (!authStorage) {
+        console.error("authStorage not found in local storage");
+        return;
+      }
+      const {
+        state: { token },
+      } = JSON.parse(authStorage);
+      if (!token) {
+        console.error("Token not found in authStorage");
+        return;
+      }
+      const data = await api.getPracticeSheetById(token, sheetId);
+      setPracticeSheet(data);
+    }
+    fetchPracticeSheet(sheetId!);
+  }, [sheetId]);
+
+  useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+    setCount(carouselApi.scrollSnapList().length);
+    setCurrent(carouselApi.selectedScrollSnap() + 1);
+    carouselApi.on("select", () => {
+      setCurrent(carouselApi.selectedScrollSnap() + 1);
+    });
+  }, [carouselApi]);
+
+  return (
+    <main className="max-w-full mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-6">
+      <header className="space-y-2">
+        <h1 className="text-4xl font-satoshi-bold">{practiceSheet?.title}</h1>
+        <p className="text-lg font-satoshi text-gray-700">
+          {practiceSheet?.description}
+        </p>
+      </header>
+      <section className="flex flex-col gap-6 rounded-4xl bg-white border p-8">
+        <div className="flex items-center gap-4">
+          <Clock size={65} color="black" />
+          <div>
+            <h3 className="text-3xl font-satoshi-bold ">
+              {practiceSheet?.time_limit}
+            </h3>
+            <p className="text-xl font-satoshi ">Minutes</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-4">
+          <Layers size={65} color="black" />
+          <div>
+            <h3 className="text-3xl font-satoshi-bold ">
+              {practiceSheet?.modules.length}
+            </h3>
+            <p className="text-xl font-satoshi">Modules</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-4">
+          <CircleQuestionMark size={65} color="black" />
+          <div>
+            <h3 className="text-3xl font-satoshi-bold ">
+              {practiceSheet?.questions_count}
+            </h3>
+            <p className="text-xl font-satoshi ">Questions</p>
+          </div>
+        </div>
+      </section>
+      <Carousel setApi={setCarouselApi}>
+        <CarouselContent className="">
+          {practiceSheet ? (
+            practiceSheet.modules.length > 0 ? (
+              practiceSheet.modules.map((module, index) => (
+                <CarouselItem key={index} className="">
+                  <section className="flex flex-col gap-6 rounded-4xl p-8 bg-white border">
+                    <h1 className="text-2xl font-satoshi-bold">
+                      Section {Math.floor(index / 2) + 1}
+                    </h1>
+                    <p className="text-lg font-satoshi text-gray-700">
+                      {module.title}
+                    </p>
+                    <section className="flex justify-between">
+                      <div className="flex flex-col justify-center items-center gap-4">
+                        <div className="w-fit bg-cyan-100 p-2 rounded-full">
+                          <Clock size={30} color="oklch(60.9% 0.126 221.723)" />
+                        </div>
+                        <div className="flex flex-col justify-center items-center">
+                          <h3 className="text-xl font-satoshi-bold ">
+                            {module.duration}
+                          </h3>
+                          <p className="text-md font-satoshi ">Minutes</p>
+                        </div>
+                      </div>
+                      <div className="flex flex-col justify-center items-center gap-4">
+                        <div className="w-fit bg-lime-100 p-2 rounded-full">
+                          <CircleQuestionMark
+                            size={30}
+                            color="oklch(64.8% 0.2 131.684)"
+                          />
+                        </div>
+                        <div className="flex flex-col justify-center items-center">
+                          <h3 className="text-xl font-satoshi-bold ">
+                            {module.questions.length}
+                          </h3>
+                          <p className="text-md font-satoshi">Questions</p>
+                        </div>
+                      </div>
+                      <div className="flex flex-col justify-center items-center gap-4">
+                        <div className="w-fit bg-amber-100 p-2 rounded-full">
+                          <Tag size={30} color="oklch(66.6% 0.179 58.318)" />
+                        </div>
+                        <div className="flex flex-col justify-center items-center">
+                          <h3 className="text-xl font-satoshi-bold ">
+                            {module.section}
+                          </h3>
+                          <p className="text-md font-satoshi">Type</p>
+                        </div>
+                      </div>
+                    </section>
+                  </section>
+                </CarouselItem>
+              ))
+            ) : (
+              <CarouselItem>
+                <section className="w-full rounded-4xl p-8 bg-red-100 border border-red-300">
+                  <h1 className="text-lg text-center font-satoshi-bold text-red-500">
+                    No modules available.
+                  </h1>
+                </section>
+              </CarouselItem>
+            )
+          ) : (
+            <CarouselItem>
+              <section className="flex flex-col w-full rounded-4xl p-8 bg-yellow-100 border">
+                <h1 className="text-center text-xl font-satoshi-bold text-yellow-500">
+                  Loading...
+                </h1>
+              </section>
+            </CarouselItem>
+          )}
+        </CarouselContent>
+
+        <div className="flex justify-center mt-4">
+          {practiceSheet?.modules.map((_, index) => (
+            <div
+              key={index}
+              className={`w-2 h-2 mx-1 rounded-full ${
+                index + 1 === current ? "bg-purple-500" : "bg-gray-300"
+              }`}
+            ></div>
+          ))}
+        </div>
+      </Carousel>
+      <section className="w-full rounded-4xl p-8 bg-white border flex flex-col justify-between gap-4">
+        <h1 className="text-lg font-satoshi-bold ">
+          This practice sheet will help you prepare for the SAT. Take your time
+          and do your best!
+        </h1>
+      </section>
+      <Button
+        onClick={() => handleStartTest(practiceSheet?.id!)}
+        variant="outline"
+        className="font-satoshi rounded-3xl w-full text-lg py-8 bg-linear-to-br from-purple-500 to-purple-600 text-white active:bg-linear-to-br active:from-purple-600 active:to-purple-700 active:translate-y-1"
+      >
+        Start Test
+      </Button>
+    </main>
+  );
+};

src/pages/student/practice/Results.tsx

@@ -0,0 +1,3 @@
+export const Results = () => {
+  return <div>Results</div>;
+};

src/pages/student/practice/Test.tsx

@@ -0,0 +1,3 @@
+export const Test = () => {
+  return <div>Test</div>;
+};

src/types/sheet.ts

@@ -4,6 +4,49 @@ interface CreatedBy {
   email: string;
 }
 
+export interface Subject {
+  name: string;
+  section: string;
+  parent_id: string;
+  id: string;
+  slug: string;
+  parent_name: string;
+}
+
+export interface Question {
+  text: string;
+  context: string;
+  context_image_url: string;
+  type: string;
+  section: string;
+  image_url: string;
+  index: number;
+  id: string;
+  options: any[];
+  topics: Topic[];
+  correct_answer: string;
+  explanation: string;
+}
+
+export interface Topic {
+  id: string;
+  name: string;
+}
+
+export interface Module {
+  title: string;
+  duration: number;
+  section: string;
+  difficulty: string;
+  description: string;
+  sequence_order: number;
+  id: string;
+  practice_sheet_id: string;
+  subject: Subject;
+  questions: Question[];
+  questions_count: number;
+}
+
 export interface PracticeSheet {
   title: string;
   difficulty: string;
@@ -15,9 +58,9 @@ export interface PracticeSheet {
   created_at: string;
   updated_at: string;
   questions_count: number;
-  topics: string[];
+  topics: Topic[];
   created_by: CreatedBy;
-  modules: string[];
+  modules: Module[];
   user_status: string;
   modules_count: number;
 }

src/utils/api.ts

@@ -1,3 +1,5 @@
+import type { PracticeSheet } from "../types/sheet";
+
 const API_URL = "https://ed-dev-api.omukk.dev";
 
 export interface LoginRequest {
@@ -36,7 +38,7 @@ class ApiClient {
 
   private async request<T>(
     endpoint: string,
-    options: RequestInit = {}
+    options: RequestInit = {},
   ): Promise<T> {
     const url = `${this.baseURL}${endpoint}`;
 
@@ -79,7 +81,7 @@ class ApiClient {
   async authenticatedRequest<T>(
     endpoint: string,
     token: string,
-    options: RequestInit = {}
+    options: RequestInit = {},
   ): Promise<T> {
     return this.request<T>(endpoint, {
       ...options,
@@ -98,7 +100,7 @@ class ApiClient {
   async getPracticeSheets(
     token: string,
     page: number,
-    limit: number
+    limit: number,
   ): Promise<any> {
     const queryParams = new URLSearchParams({
       page: page.toString(),
@@ -106,12 +108,18 @@ class ApiClient {
     }).toString();
     return this.authenticatedRequest<any>(
       `/practice-sheets/?${queryParams}`,
-      token
+      token,
     );
   }
 
-  async getSatDates(token: string): Promise<any> {
+  async getPracticeSheetById(
-    return this.authenticatedRequest<any>(`/sat-dates/`, token);
+    token: string,
+    sheetId: string,
+  ): Promise<PracticeSheet> {
+    return this.authenticatedRequest<PracticeSheet>(
+      `/practice-sheets/${sheetId}`,
+      token,
+    );
   }
 }