fix(api): exam logic yet to be fixed

app/exam/[id]/page.tsx

@@ -16,7 +16,7 @@ export default function ExamPage() {
   const test_id = searchParams.get("test_id") || "";
   const type = searchParams.get("type") || "";
 
-  const { isOpen, close, open } = useModal();
+  // const { isOpen, close, open } = useModal();
   const { timeRemaining, setInitialTime, stopTimer } = useTimer();
   const { test, answers, startExam, setAnswer, submitExam, cancelExam } =
     useExam();
@@ -36,7 +36,7 @@ export default function ExamPage() {
     if (window.confirm("Are you sure you want to quit the exam?")) {
       stopTimer();
       cancelExam();
-      router.push("/unit");
+      router.push(`/categories/${type}s`);
     }
   }, [stopTimer, cancelExam, router]);
 
@@ -142,12 +142,6 @@ export default function ExamPage() {
             >
               Submit
             </button>
-            <button
-              onClick={showExitDialog}
-              className="flex-1 bg-gray-200 text-gray-900 p-6 font-bold text-lg hover:bg-gray-300 transition-colors"
-            >
-              Cancel
-            </button>
           </div>
         </div>
       </BackgroundWrapper>

components/Header.tsx

@@ -51,11 +51,11 @@ const Header = ({
         <div className={styles.profile}>
           <Avatar className="bg-gray-200 w-10 h-10">
             <AvatarFallback className=" text-lg">
-              {user?.username ? user.username.charAt(0).toUpperCase() : ""}
+              {user?.username ? user.username.charAt(0).toUpperCase() : "U"}
             </AvatarFallback>
           </Avatar>
           <span className={styles.text}>
-            Hello, {user?.username ? user.username.split(" ")[0] : ""}
+            Hello, {user?.username ? user.username.split(" ")[0] : "User"}
           </span>
         </div>
       )}

context/TimerContext.tsx

@@ -23,7 +23,7 @@ export const TimerProvider: React.FC<{ children: React.ReactNode }> = ({
   const [timeRemaining, setTimeRemaining] = useState<number>(0);
   const timerRef = useRef<NodeJS.Timeout | null>(null);
 
-  // countdown effect
+  // Effect: run interval whenever timeRemaining is set > 0
   useEffect(() => {
     if (timeRemaining > 0 && !timerRef.current) {
       timerRef.current = setInterval(() => {
@@ -39,16 +39,18 @@ export const TimerProvider: React.FC<{ children: React.ReactNode }> = ({
     }
 
     return () => {
-      if (timerRef.current) {
+      if (timerRef.current && timeRemaining <= 0) {
         clearInterval(timerRef.current);
         timerRef.current = null;
       }
     };
-  }, [timeRemaining]);
+  }, [timeRemaining]); // 👈 depend on timeRemaining
 
   const resetTimer = (duration: number) => {
-    if (timerRef.current) clearInterval(timerRef.current);
-    timerRef.current = null;
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
     setTimeRemaining(duration);
   };
 
@@ -57,11 +59,14 @@ export const TimerProvider: React.FC<{ children: React.ReactNode }> = ({
       clearInterval(timerRef.current);
       timerRef.current = null;
     }
+    setTimeRemaining(0);
   };
 
   const setInitialTime = (duration: number) => {
-    if (timerRef.current) clearInterval(timerRef.current);
-    timerRef.current = null;
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
     setTimeRemaining(duration);
   };