From cdd15b1a89a6b4934eb89309cc11e8cd3894b6ec Mon Sep 17 00:00:00 2001
From: shafin-r <shafin808s@gmail.com>
Date: Sat, 17 Jan 2026 19:18:43 +0600
Subject: [PATCH] fix(practice-sheets); fix practice sheets not showing up in
 all category

---
 src/lib/utils.ts           |  19 +++-
 src/pages/student/Home.tsx | 191 +++++++++++++++----------------------
 2 files changed, 92 insertions(+), 118 deletions(-)

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index bd0c391..f82f5e8 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,6 +1,19 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
+}
+
+export function formatStatus(status: string) {
+  switch (status) {
+    case "NOT_STARTED":
+      return "Not Started";
+    case "IN_PROGRESS":
+      return "In Progress";
+    case "COMPLETED":
+      return "Completed";
+    default:
+      return status;
+  }
 }
diff --git a/src/pages/student/Home.tsx b/src/pages/student/Home.tsx
index 84eae68..fd539f9 100644
--- a/src/pages/student/Home.tsx
+++ b/src/pages/student/Home.tsx
@@ -19,6 +19,7 @@ import {
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
 import type { PracticeSheet } from "../../types/sheet";
+import { formatStatus } from "../../lib/utils";
 
 export const Home = () => {
   const user = useAuthStore((state) => state.user);
@@ -32,6 +33,22 @@ export const Home = () => {
   const [completedSheets, setCompletedSheets] = useState<PracticeSheet[]>([]);
 
   useEffect(() => {
+    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);
+    };
+
     const fetchPracticeSheets = async () => {
       if (!user) return;
 
@@ -50,35 +67,20 @@ export const Home = () => {
         }
         const sheets = await api.getPracticeSheets(token, 1, 10);
         setPracticeSheets(sheets.data);
+        console.log("All Practice Sheets: ", 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]);
 
   return (
     <div className="min-h-screen bg-gray-50">
-      <main className="flex flex-col items-center justify-center gap-12 max-w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <h1 className="text-4xl font-satoshi-bold tracking-tight text-gray-800">
+      <main className="flex flex-col gap-12 max-w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <h1 className="text-4xl font-satoshi-bold tracking-tight text-gray-800 text-center">
           Welcome, {user?.name || "Student"}
         </h1>
         <section className="relative w-full">
@@ -91,6 +93,11 @@ export const Home = () => {
             <Search size={22} color="gray" />
           </div>
         </section>
+        <section className="space-y-4">
+          <h1 className="font-satoshi-bold text-2xl tracking-tight">
+            Pick up where you left off
+          </h1>
+        </section>
         <section className="w-full">
           <Tabs defaultValue="all" className="w-full ">
             <TabsList className="bg-transparent border-b rounded-none p-0 w-full">
@@ -100,23 +107,14 @@ export const Home = () => {
               >
                 All
               </TabsTrigger>
-
               <TabsTrigger
                 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
               </TabsTrigger>
-
               <TabsTrigger
-                value="in-progress"
-                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"
-              >
-                In Progress
-              </TabsTrigger>
-
-              <TabsTrigger
-                value="completed"
+                value="COMPLETED"
                 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"
               >
                 Completed
@@ -124,8 +122,8 @@ export const Home = () => {
             </TabsList>
             <TabsContent value="all">
               <div className="space-y-6">
-                {practiceSheets.length < 0 ? (
-                  practiceSheets.slice(0, 4).map((sheet) => (
+                {practiceSheets.length > 0 ? (
+                  practiceSheets.map((sheet) => (
                     <Card key={sheet?.id}>
                       <CardHeader>
                         <CardTitle className="font-satoshi-medium text-xl">
@@ -136,8 +134,8 @@ export const Home = () => {
                         </CardDescription>
                       </CardHeader>
                       <CardContent className="flex justify-between">
-                        <p className="font-satoshi text-gray-700">
-                          Not Started
+                        <p className="font-satoshi text-gray-500">
+                          {formatStatus(sheet?.user_status)}
                         </p>
                         <Badge
                           variant="secondary"
@@ -168,17 +166,6 @@ export const Home = () => {
                     </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">
@@ -190,7 +177,7 @@ export const Home = () => {
                         {sheet?.title}
                       </CardTitle>
                       <CardDescription className="font-satoshi">
-                        {sheet?.subject}
+                        {sheet?.description}
                       </CardDescription>
                     </CardHeader>
                     <CardContent className="flex justify-between">
@@ -219,77 +206,51 @@ export const Home = () => {
                 ))}
               </div>
             </TabsContent>
-            <TabsContent value="in-progress">
-              {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">
-              {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 value="COMPLETED">
+              {completedSheets.length > 0 ? (
+                completedSheets.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-500">
+                        {formatStatus(sheet?.user_status)}
+                      </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">
+                    You have not completed any practice sheets.
+                  </h2>
+                </div>
+              )}
             </TabsContent>
           </Tabs>
         </section>