feat: enhance tracking of user interactions in test components by integrating analytics for attempt start, finish, and abandon events. Update logic to handle undefined package properties gracefully and improve loading state handling in the TakeTestComponent.

apps/web/src/routes/package.$id.attempt.$attemptId.tsx

@@ -43,6 +43,31 @@ function ContinueAttemptComponent() {
     startQuestionTimer,
   } = useTestSession(packageId, attemptId);
 
+  const totalQuestions = pkg?.sections.reduce((sum: number, sec) => sum + sec.questions.length, 0) ?? 0;
+  const answeredCount = Object.keys(answers).length;
+
+  const handleFinishWithTracking = useCallback(async () => {
+    const result = await handleFinish();
+    if (result) {
+      trackUmamiEvent(AnalyticsEvent.ATTEMPT_FINISH, {
+        exam_type: pkg?.examTypeName ?? "unknown",
+        score: result.totalScore,
+        max_score: result.maxScore,
+        percentage: result.percentage,
+        time_elapsed_sec: timeElapsed,
+      });
+    }
+  }, [handleFinish, pkg?.examTypeName, timeElapsed]);
+
+  const handleAbandonWithTracking = useCallback(async () => {
+    await handleAbandon();
+    trackUmamiEvent(AnalyticsEvent.ATTEMPT_ABANDON, {
+      exam_type: pkg?.examTypeName ?? "unknown",
+      questions_answered: answeredCount,
+      total_questions: totalQuestions,
+    });
+  }, [handleAbandon, pkg?.examTypeName, answeredCount, totalQuestions]);
+
   if (packageQuery.isLoading) {
     return (
       <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-4xl mx-auto bg-[var(--warm-cream)]">
@@ -66,31 +91,6 @@ function ContinueAttemptComponent() {
     );
   }
 
-  const totalQuestions = pkg.sections.reduce((sum: number, sec) => sum + sec.questions.length, 0);
-  const answeredCount = Object.keys(answers).length;
-
-  const handleFinishWithTracking = useCallback(async () => {
-    const result = await handleFinish();
-    if (result) {
-      trackUmamiEvent(AnalyticsEvent.ATTEMPT_FINISH, {
-        exam_type: pkg.examTypeName ?? "unknown",
-        score: result.totalScore,
-        max_score: result.maxScore,
-        percentage: result.percentage,
-        time_elapsed_sec: timeElapsed,
-      });
-    }
-  }, [handleFinish, pkg.examTypeName, timeElapsed]);
-
-  const handleAbandonWithTracking = useCallback(async () => {
-    await handleAbandon();
-    trackUmamiEvent(AnalyticsEvent.ATTEMPT_ABANDON, {
-      exam_type: pkg.examTypeName ?? "unknown",
-      questions_answered: answeredCount,
-      total_questions: totalQuestions,
-    });
-  }, [handleAbandon, pkg.examTypeName, answeredCount, totalQuestions]);
-
   const currentSection = pkg.sections[currentSectionIdx];
   if (!currentSection) {
     return (

apps/web/src/routes/package.$id.take.tsx

@@ -67,61 +67,61 @@ function TakeTestComponent() {
     startQuestionTimer,
   } = useTestSession(packageId);
 
-  if (packageQuery.isLoading || activeAttemptQuery.isLoading) {
-    return (
-      <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-4xl mx-auto bg-[var(--warm-cream)]">
-        <div className="h-8 w-48 bg-[var(--oat-light)] animate-pulse rounded mb-4" />
-        <div className="h-64 bg-[var(--oat-light)] animate-pulse rounded-[var(--radius-xl)]" />
-      </div>
-    );
-  }
-
-  if (!pkg) {
-    return (
-      <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-4xl mx-auto bg-[var(--warm-cream)]">
-        <div className="text-center py-20">
-          <MaterialIcon name="error_outline" className="text-6xl text-[var(--warm-silver)] mx-auto mb-4" />
-          <p className="text-lg text-[var(--warm-charcoal)] font-semibold">Paket tidak ditemukan</p>
-          <Link to="/packages" className="text-[var(--matcha-600)] font-semibold mt-4 inline-block">
-            Kembali ke Paket
-          </Link>
-        </div>
-      </div>
-    );
-  }
-
-  const totalQuestions = pkg.sections.reduce((sum: number, sec) => sum + sec.questions.length, 0);
+  const totalQuestions = pkg?.sections.reduce((sum: number, sec) => sum + sec.questions.length, 0) ?? 0;
   const answeredCount = Object.keys(answers).length;
 
   const handleStartWithTracking = useCallback(async () => {
     await handleStart();
     trackUmamiEvent(AnalyticsEvent.ATTEMPT_START, {
-      exam_type: pkg.examTypeName ?? "unknown",
+      exam_type: pkg?.examTypeName ?? "unknown",
       question_count: totalQuestions,
     });
-  }, [handleStart, pkg.examTypeName, totalQuestions]);
+  }, [handleStart, pkg?.examTypeName, totalQuestions]);
 
   const handleFinishWithTracking = useCallback(async () => {
     const result = await handleFinish();
     if (result) {
       trackUmamiEvent(AnalyticsEvent.ATTEMPT_FINISH, {
-        exam_type: pkg.examTypeName ?? "unknown",
+        exam_type: pkg?.examTypeName ?? "unknown",
         score: result.totalScore,
         max_score: result.maxScore,
         percentage: result.percentage,
         time_elapsed_sec: timeElapsed,
       });
     }
-  }, [handleFinish, pkg.examTypeName, timeElapsed]);
+  }, [handleFinish, pkg?.examTypeName, timeElapsed]);
 
   const handleAbandonWithTracking = useCallback(async () => {
     await handleAbandon();
     trackUmamiEvent(AnalyticsEvent.ATTEMPT_ABANDON, {
-      exam_type: pkg.examTypeName ?? "unknown",
+      exam_type: pkg?.examTypeName ?? "unknown",
       questions_answered: answeredCount,
       total_questions: totalQuestions,
     });
-  }, [handleAbandon, pkg.examTypeName, answeredCount, totalQuestions]);
+  }, [handleAbandon, pkg?.examTypeName, answeredCount, totalQuestions]);
+
+  if (packageQuery.isLoading || activeAttemptQuery.isLoading) {
+    return (
+      <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-4xl mx-auto bg-[var(--warm-cream)]">
+        <div className="h-8 w-48 bg-[var(--oat-light)] animate-pulse rounded mb-4" />
+        <div className="h-64 bg-[var(--oat-light)] animate-pulse rounded-[var(--radius-xl)]" />
+      </div>
+    );
+  }
+
+  if (!pkg) {
+    return (
+      <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-4xl mx-auto bg-[var(--warm-cream)]">
+        <div className="text-center py-20">
+          <MaterialIcon name="error_outline" className="text-6xl text-[var(--warm-silver)] mx-auto mb-4" />
+          <p className="text-lg text-[var(--warm-charcoal)] font-semibold">Paket tidak ditemukan</p>
+          <Link to="/packages" className="text-[var(--matcha-600)] font-semibold mt-4 inline-block">
+            Kembali ke Paket
+          </Link>
+        </div>
+      </div>
+    );
+  }
 
   // Start screen
   if (!isStarted) {