feat: refactor AttemptResultComponent to calculate percentage based on question statistics instead of attempt scores. Update integration tests to validate maxScore calculation across multiple sections. Ensure proper type handling for question counts in attempt router, enhancing data integrity and performance.

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

@@ -60,10 +60,6 @@ function AttemptResultComponent() {
     onSuccess: () => packageRatingQuery.refetch(),
   });
 
-  const percentage = attempt?.maxScore && attempt.maxScore > 0
-    ? Math.round(((attempt.totalScore ?? 0) / attempt.maxScore) * 100)
-    : 0;
-
   const durationSec = attempt?.finishedAt && attempt.startedAt
     ? Math.round((new Date(attempt.finishedAt).getTime() - new Date(attempt.startedAt).getTime()) / 1000)
     : 0;
@@ -87,6 +83,17 @@ function AttemptResultComponent() {
     );
   }, [attempt]);
 
+  const questionStats = useMemo(() => {
+    const total = allQuestions.length;
+    const correct = allQuestions.filter(({ ans }) => ans?.isCorrect === true).length;
+    const wrong = allQuestions.filter(({ ans }) => ans?.isCorrect === false).length;
+    return { total, correct, wrong };
+  }, [allQuestions]);
+
+  const percentage = questionStats.total > 0
+    ? Math.round((questionStats.correct / questionStats.total) * 100)
+    : 0;
+
   // ── Filtered questions ──
   const partialCount = useMemo(
     () => allQuestions.filter(({ ans }) => ans?.partialScore != null && ans?.partialScore < 100).length,
@@ -186,7 +193,7 @@ function AttemptResultComponent() {
                   {percentage}%
                 </span>
                 <span className="text-xs text-[var(--matcha-700)] font-medium">
-                  {attempt.totalScore ?? 0}/{attempt.maxScore ?? 0}
+                  {questionStats.correct}/{questionStats.total}
                 </span>
               </div>
 
@@ -207,15 +214,15 @@ function AttemptResultComponent() {
                   </span>
                   <span className="flex items-center gap-1">
                     <MaterialIcon name="quiz" className="text-sm" />
-                    {attempt.maxScore ?? 0} soal
+                    {questionStats.total} soal
                   </span>
                   <span className="flex items-center gap-1">
                     <MaterialIcon name="check_circle" className="text-sm text-[var(--matcha-600)]" />
-                    {attempt.totalScore ?? 0} benar
+                    {questionStats.correct} benar
                   </span>
                   <span className="flex items-center gap-1">
                     <MaterialIcon name="cancel" className="text-sm text-[var(--pomegranate-400)]" />
-                    {(attempt.maxScore ?? 0) - (attempt.totalScore ?? 0)} salah
+                    {questionStats.wrong} salah
                   </span>
                 </div>
 

packages/api/src/__tests__/attempt.integration.test.ts

@@ -175,6 +175,85 @@ describe("attempt router", () => {
     expect(result.percentage).toBe(33);
   });
 
+  it("finish sums maxScore across multiple sections", { timeout: 30000 }, async () => {
+    const ownerId = "multi-section-owner";
+    await testDb.insert(schema.user).values({
+      id: ownerId,
+      name: "Multi Section Owner",
+      email: `multi-section-${Date.now()}@test.com`,
+    }).onConflictDoNothing();
+
+    const [pkg] = await testDb.insert(schema.testPackage).values({
+      title: "Multi Section Test",
+      examTypeId: "IELTS",
+      creatorUserId: ownerId,
+      isPublic: true,
+    }).returning();
+
+    const sections = await testDb.insert(schema.packageSection).values([
+      {
+        packageId: pkg.id,
+        sectionTypeId: "READING",
+        title: "Reading Part 1",
+        orderIndex: 0,
+      },
+      {
+        packageId: pkg.id,
+        sectionTypeId: "READING",
+        title: "Reading Part 2",
+        orderIndex: 1,
+      },
+    ]).returning();
+
+    const makeQuestion = (idx: number) => ({
+      examTypeId: "IELTS",
+      sectionTypeId: "READING",
+      format: "multiple_choice" as const,
+      passageText: `Passage ${idx} `.repeat(10),
+      questionText: `Question ${idx}?`,
+      options: [
+        { key: "A", text: "Option A" },
+        { key: "B", text: "Option B" },
+        { key: "C", text: "Option C" },
+        { key: "D", text: "Option D" },
+      ],
+      correctAnswer: "A",
+      explanation: "Because A is correct",
+      difficulty: 2,
+      skillTags: ["main_idea"],
+      creatorUserId: ownerId,
+      isPublic: true,
+    });
+
+    const sectionOneQuestions = await testDb.insert(schema.question).values(
+      Array.from({ length: 10 }, (_, idx) => makeQuestion(idx + 1)),
+    ).returning();
+    const sectionTwoQuestions = await testDb.insert(schema.question).values(
+      Array.from({ length: 10 }, (_, idx) => makeQuestion(idx + 11)),
+    ).returning();
+
+    await testDb.insert(schema.sectionQuestion).values([
+      ...sectionOneQuestions.map((q, orderIndex) => ({
+        sectionId: sections[0]!.id,
+        questionId: q.id,
+        orderIndex,
+      })),
+      ...sectionTwoQuestions.map((q, orderIndex) => ({
+        sectionId: sections[1]!.id,
+        questionId: q.id,
+        orderIndex,
+      })),
+    ]);
+
+    const { caller } = await createUserAndCaller("multisection");
+    const { attemptId } = await caller.start({ packageId: pkg.id });
+    await Bun.sleep(4500);
+
+    const result = await caller.finish({ attemptId });
+    expect(result.maxScore).toBe(20);
+    expect(typeof result.maxScore).toBe("number");
+  });
+
   it("finish rejects attempts under 5 seconds", async () => {
     const { caller } = await createUserAndCaller("fastfinish");
     const { attemptId } = await caller.start({ packageId });

packages/api/src/routers/attempt.ts

@@ -473,14 +473,14 @@ export const attemptRouter = router({
         const counts = await db
           .select({
             sectionId: sectionQuestion.sectionId,
-            count: sql<number>`count(*)`,
+            count: sql<number>`count(*)::int`,
           })
           .from(sectionQuestion)
           .where(inArray(sectionQuestion.sectionId, psIds))
           .groupBy(sectionQuestion.sectionId);
 
         for (const c of counts) {
-          questionCounts.set(c.sectionId, c.count);
+          questionCounts.set(c.sectionId, Number(c.count));
         }
       }
 
@@ -528,7 +528,7 @@ export const attemptRouter = router({
             .where(eq(answer.id, a.answerId));
         }
 
-        const sectionMax = questionCounts.get(pkgSec.id) ?? secAnswers.length;
+        const sectionMax = Number(questionCounts.get(pkgSec.id) ?? secAnswers.length);
         const sectionTimeSpent = secAnswers.reduce((sum, a) => sum + (a.timeSpentSec ?? 0), 0);
 
         await db
@@ -554,7 +554,7 @@ export const attemptRouter = router({
       // Total questions in package
       let totalQuestions = 0;
       for (const count of questionCounts.values()) {
-        totalQuestions += count;
+        totalQuestions += Number(count);
       }
 
       await db