added exam routes

app/(tabs)/paper/page.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import Header from "@/components/Header";
+import DestructibleAlert from "@/components/DestructibleAlert";
+import BackgroundWrapper from "@/components/BackgroundWrapper";
+import { API_URL } from "@/lib/auth";
+import { Loader, RefreshCw } from "lucide-react";
+
+interface Mock {
+  id: string;
+  title: string;
+  rating: number;
+}
+
+// For App Router (Next.js 13+ with app directory)
+export default function PaperScreen() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const name = searchParams.get("name") || "";
+
+  const [questions, setQuestions] = useState<Mock[] | null>(null);
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+  const [refreshing, setRefreshing] = useState<boolean>(false);
+  const [componentKey, setComponentKey] = useState<number>(0);
+
+  async function fetchMocks() {
+    try {
+      const questionResponse = await fetch(`${API_URL}/mocks`, {
+        method: "GET",
+      });
+      const fetchedQuestionData: Mock[] = await questionResponse.json();
+      console.log(fetchedQuestionData[0]?.id);
+      setQuestions(fetchedQuestionData);
+    } catch (error) {
+      setErrorMsg(error instanceof Error ? error.message : "An error occurred");
+    }
+  }
+
+  useEffect(() => {
+    if (name) {
+      fetchMocks();
+    }
+  }, [name]);
+
+  const onRefresh = async () => {
+    setRefreshing(true);
+
+    await fetchMocks();
+    setComponentKey((prevKey) => prevKey + 1);
+    setTimeout(() => {
+      setRefreshing(false);
+    }, 1000);
+  };
+
+  if (errorMsg) {
+    return (
+      <BackgroundWrapper>
+        <div className="min-h-screen">
+          <Header
+            displaySubject={name}
+            displayTabTitle={null}
+            displayUser={false}
+            image={undefined}
+            examDuration={undefined}
+          />
+          <div className="overflow-y-auto">
+            <div className="mt-5 px-5">
+              <DestructibleAlert text={errorMsg} extraStyles="" />
+            </div>
+            <div className="flex justify-center mt-4">
+              <button
+                onClick={onRefresh}
+                disabled={refreshing}
+                className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50"
+              >
+                {refreshing ? <Loader /> : <RefreshCw />}
+              </button>
+            </div>
+          </div>
+          {/* <CustomBackHandler fallbackRoute="unit" /> */}
+        </div>
+      </BackgroundWrapper>
+    );
+  }
+
+  return (
+    <BackgroundWrapper>
+      <div>
+        <Header
+          displayTabTitle={null}
+          displayUser={false}
+          displaySubject={name}
+        />
+        <div className="mx-10 pt-10 overflow-y-auto">
+          <div className="border border-[#c0dafc] flex flex-col gap-4 w-full rounded-[25px] p-4">
+            {questions ? (
+              questions.map((mock) => (
+                <div key={mock.id}>
+                  <button
+                    onClick={() =>
+                      router.push(
+                        `/exam/pretest?unitname=${name}&id=${mock.id}&title=${mock.title}&rating=${mock.rating}`
+                      )
+                    }
+                    className="w-full border-2 border-[#B0C2DA] py-4 rounded-[10px] px-6 gap-2 text-left hover:bg-gray-50 transition-colors"
+                  >
+                    <h3 className="text-xl font-medium">{mock.title}</h3>
+                    <p className="text-md font-normal">
+                      Rating: {mock.rating} / 10
+                    </p>
+                  </button>
+                </div>
+              ))
+            ) : (
+              <div className="flex flex-col items-center justify-center">
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mb-4"></div>
+                <p className="text-xl font-medium text-center">Loading...</p>
+              </div>
+            )}
+          </div>
+          <div className="flex justify-center mt-4">
+            <button
+              onClick={onRefresh}
+              disabled={refreshing}
+              className="p-2 bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 rounded-full"
+            >
+              {refreshing ? <Loader /> : <RefreshCw />}
+            </button>
+          </div>
+        </div>
+      </div>
+      {/* <CustomBackHandler fallbackRoute="unit" useCustomHandler={false} /> */}
+    </BackgroundWrapper>
+  );
+}

app/(tabs)/unit/page.tsx

@@ -33,7 +33,7 @@ const Unit = () => {
         />
         <div className="flex-1">
           <div className="overflow-y-auto">
-            <div className="border border-blue-200 gap-4 rounded-3xl p-6 mx-10 mt-10">
+            <div className="border border-blue-200 gap-4 rounded-3xl p-4 mx-10 mt-10">
               {units ? (
                 units.map((unit) => (
                   <button