feat(error): add error handling on test screen

src/pages/student/Practice.tsx

@@ -18,9 +18,12 @@ import {
 } from "../../components/ui/card";
 import { Button } from "../../components/ui/button";
 import { useNavigate } from "react-router-dom";
+import { useExamConfigStore } from "../../stores/useExamConfigStore";
 
 export const Practice = () => {
   const navigate = useNavigate();
+
+  const userXp = useExamConfigStore.getState().userXp;
   return (
     <main className="h-fit 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">
@@ -29,7 +32,7 @@ export const Practice = () => {
         </div>
         <div className="bg-purple-100 rounded-full w-fit py-2 px-4 flex items-center gap-2">
           <div className="h-2 w-2 bg-linear-to-br from-purple-400 to-purple-500 rounded-full"></div>
-          <span className="font-satoshi-bold text-md">0</span>
+          <span className="font-satoshi-bold text-md">{userXp}</span>
         </div>
       </header>
       <section>

src/pages/student/Rewards.tsx

@@ -37,6 +37,7 @@ import type { Leaderboard } from "../../types/leaderboard";
 import { api } from "../../utils/api";
 import { Card, CardContent } from "../../components/ui/card";
 import { LeaderboardRowSkeleton } from "../../components/LeaderboardSkeleton";
+import { useExamConfigStore } from "../../stores/useExamConfigStore";
 
 export const Rewards = () => {
   const user = useAuthStore((state) => state.user);
@@ -45,6 +46,8 @@ export const Rewards = () => {
   const [leaderboard, setLeaderboard] = useState<Leaderboard>();
   const [loading, setLoading] = useState<boolean>(false);
 
+  const { setUserXp } = useExamConfigStore();
+
   useEffect(() => {
     const fetchLeaderboard = async () => {
       if (!user) return;
@@ -64,6 +67,7 @@ export const Rewards = () => {
         const response = await api.fetchLeaderboard(token);
 
         setLeaderboard(response);
+        setUserXp(response.user_rank.total_xp);
         setLoading(false);
       } catch (error) {
         setLoading(false);

src/pages/student/practice/Test.tsx

@@ -6,7 +6,7 @@ import {
   CardHeader,
   CardTitle,
 } from "../../../components/ui/card";
-import { Check, Loader2 } from "lucide-react";
+import { Check, Loader2, Unplug } from "lucide-react";
 
 import { api } from "../../../utils/api";
 import { useAuthStore } from "../../../stores/authStore";
@@ -46,6 +46,7 @@ export const Test = () => {
   const [eliminated, setEliminated] = useState<Record<string, Set<string>>>({});
 
   const [showExitDialog, setShowExitDialog] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     if (blocker.state === "blocked") {
@@ -94,6 +95,7 @@ export const Test = () => {
       // ✅ NOW start module phase
       useSatExam.getState().startExam();
     } catch (error) {
+      setError(`Failed to start exam session: ${error}`);
       console.error("Failed to start exam session:", error);
     }
   };
@@ -308,6 +310,36 @@ export const Test = () => {
 
   switch (phase) {
     case "IDLE":
+      if (error) {
+        return (
+          <main className="min-h-screen px-8 py-8 w-full space-y-6 flex flex-col  justify-center">
+            <Card className="p-4 bg-red-100 ring-1 ring-red-500 w-full">
+              <CardContent className="flex items-center justify-between w-full gap-4">
+                <Unplug size={80} color="red" />
+
+                <span className="font-satoshi-bold text-red-500">{error}</span>
+              </CardContent>
+            </Card>
+            <div className="flex justify-between gap-4">
+              <button
+                onClick={() => {
+                  useExamConfigStore.getState().clearPayload();
+                  navigate(`/student/home`);
+                }}
+                className="font-satoshi rounded-3xl text-lg w-full py-4 bg-linear-to-br from-slate-500 to-slate-600 text-white active:bg-linear-to-br active:from-slate-600 active:to-slate-700 "
+              >
+                Go Back
+              </button>
+              <button
+                onClick={() => startExam()}
+                className="font-satoshi rounded-3xl text-lg w-full py-4 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 "
+              >
+                Retry
+              </button>
+            </div>
+          </main>
+        );
+      }
       return (
         <main className="min-h-screen px-8 py-8 w-full space-y-6 flex flex-col items-center justify-center">
           <Card className="">
@@ -315,46 +347,6 @@ export const Test = () => {
               <CardTitle className="font-satoshi text-4xl">
                 Ready to begin your test?
               </CardTitle>
-              {/* <CardDescription>
-                <section className="flex justify-between gap-6 px-4">
-                  <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 text-black">
-                        {practiceSheet?.time_limit}
-                      </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 text-black">
-                        {practiceSheet?.questions_count}
-                      </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">
-                      <Layers 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 text-black">
-                        {practiceSheet?.modules.length}
-                      </h3>
-                      <p className="text-md font-satoshi ">Modules</p>
-                    </div>
-                  </div>
-                </section>
-              </CardDescription> */}
             </CardHeader>
             <CardContent className="space-y-4">
               <h2 className="font-satoshi-bold text-2xl">Before you begin:</h2>
@@ -377,12 +369,7 @@ export const Test = () => {
                   Your progress will be saved automatically
                 </span>
               </div>
-              <div className="flex items-center gap-4">
-                <Check size={24} color="oklch(62.7% 0.265 303.9)" />
-                <span className="font-satoshi">
-                  You can take breaks using the "More" menu in the top right
-                </span>
-              </div>
+
               <Button
                 onClick={() => startExam()}
                 variant="outline"