fix(ts): refactor codebase for capacitor setup

app/exam/[id]/page.tsx

@@ -6,71 +6,11 @@ import { useTimer } from "@/context/TimerContext";
 import { useExam } from "@/context/ExamContext";
 import { API_URL, getToken } from "@/lib/auth";
 import Header from "@/components/Header";
-import { Bookmark, BookmarkCheck } from "lucide-react";
 import { useModal } from "@/context/ModalContext";
 import Modal from "@/components/ExamModal";
 import { Question } from "@/types/exam";
 import QuestionItem from "@/components/QuestionItem";
 
-// Types
-// interface Question {
-//   id: number;
-//   question: string;
-//   options: Record<string, string>;
-// }
-
-// interface QuestionItemProps {
-//   question: Question;
-//   selectedAnswer?: string;
-//   handleSelect: (questionId: number, option: string) => void;
-// }
-
-// const QuestionItem = React.memo<QuestionItemProps>(
-//   ({ question, selectedAnswer, handleSelect }) => {
-//     const [bookmark, setBookmark] = useState(false);
-
-//     return (
-//       <div className="border-[0.5px] border-[#8abdff]/60 rounded-2xl p-4 flex flex-col">
-//         <h3 className="text-xl font-medium mb-[20px]">
-//           {question.id}. {question.question}
-//         </h3>
-//         <div className="flex justify-between items-center">
-//           <div></div>
-//           <button onClick={() => setBookmark(!bookmark)}>
-//             {bookmark ? (
-//               <BookmarkCheck size={25} color="#113768" />
-//             ) : (
-//               <Bookmark size={25} color="#113768" />
-//             )}
-//           </button>
-//         </div>
-//         <div className="flex flex-col gap-4 items-start">
-//           {Object.entries(question.options).map(([key, value]) => (
-//             <button
-//               key={key}
-//               className="flex items-center gap-3"
-//               onClick={() => handleSelect(question.id, key)}
-//             >
-//               <span
-//                 className={`flex items-center rounded-full border px-1.5 ${
-//                   selectedAnswer === key
-//                     ? "text-white bg-[#113768] border-[#113768]"
-//                     : ""
-//                 }`}
-//               >
-//                 {key.toUpperCase()}
-//               </span>
-//               <span className="option-description">{value}</span>
-//             </button>
-//           ))}
-//         </div>
-//       </div>
-//     );
-//   }
-// );
-
-// QuestionItem.displayName = "QuestionItem";
-
 export default function ExamPage() {
   // All hooks at the top - no conditional calls
   const router = useRouter();
@@ -280,13 +220,7 @@ export default function ExamPage() {
   // Render the main exam interface
   return (
     <div className="min-h-screen bg-gray-50">
-      <Header
-        examDuration={time}
-        displayTabTitle={null}
-        image={undefined}
-        displayUser={undefined}
-        displaySubject={undefined}
-      />
+      <Header examDuration={time} />
       <Modal open={isOpen} onClose={close} title={currentExam?.title}>
         {currentAttempt ? (
           <div>
@@ -301,8 +235,8 @@ export default function ExamPage() {
               <p className="">
                 Skipped:{" "}
                 <span className="text-yellow-600 font-bold">
-                  {currentExam?.questions.length -
-                    currentAttempt?.answers.length}
+                  {(currentExam?.questions?.length ?? 0) -
+                    (currentAttempt?.answers?.length ?? 0)}
                 </span>
               </p>
             </div>