fix(practice-sheets); fix practice sheets not showing up in all category

src/lib/utils.ts

@@ -1,6 +1,19 @@
-import { clsx, type ClassValue } from "clsx"
+import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge"
+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;
+  }
 }

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">
+      <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">
+        <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"
+                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"
-              >
-                In Progress
-              </TabsTrigger>
-
-              <TabsTrigger
-                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.length > 0 ? (
-                  practiceSheets.slice(0, 4).map((sheet) => (
+                  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">
+                        <p className="font-satoshi text-gray-500">
-                          Not Started
+                          {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,19 +206,22 @@ export const Home = () => {
                 ))}
               </div>
             </TabsContent>
-            <TabsContent value="in-progress">
+            <TabsContent value="COMPLETED">
-              {inProgressSheets.map((sheet) => (
+              {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?.subject}
+                        {sheet?.description}
                       </CardDescription>
                     </CardHeader>
                     <CardContent className="flex justify-between">
-                    <p className="font-satoshi text-gray-700">Not Started</p>
+                      <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"
@@ -253,43 +243,14 @@ export const Home = () => {
                       </Button>
                     </CardFooter>
                   </Card>
-              ))}
+                ))
-            </TabsContent>
+              ) : (
-            <TabsContent value="completed">
+                <div className="flex items-center justify-center py-4 rounded-full">
-              {completedSheets.map((sheet) => (
+                  <h2 className="text-center font-satoshi text-lg text-gray-500">
-                <Card key={sheet?.id}>
+                    You have not completed any practice sheets.
-                  <CardHeader>
+                  </h2>
-                    <CardTitle className="font-satoshi-medium text-xl">
+                </div>
-                      {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>