Add analytics components including BreakdownCharts, OverviewCards, ScoreTrendChart, TimeAnalyticsPanel, and WeaknessPanel. Update routing to include analytics routes and enhance sidebar navigation. Add recharts dependency for data visualization.

apps/web/package.json

@@ -32,6 +32,7 @@
     "next-themes": "catalog:",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
+    "recharts": "^3.8.1",
     "sonner": "^2.0.7",
     "vite-plugin-pwa": "^1.2.0",
     "zod": "catalog:"

apps/web/src/components/analytics/BreakdownCharts.tsx

@@ -0,0 +1,228 @@
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Cell,
+} from "recharts";
+import { Card, CardContent, CardHeader, CardTitle } from "@labas/ui/components/card";
+import { formatLabel } from "@/lib/format";
+import { formatTime } from "@/lib/time";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+interface ExamTypeItem {
+  examTypeId: string;
+  examTypeName: string;
+  accuracyPct: number;
+  avgScorePct: number;
+  avgTimeSpentSec: number;
+  attempts: number;
+}
+
+interface SectionTypeItem {
+  sectionTypeId: string;
+  sectionTypeName: string;
+  accuracyPct: number;
+  avgScorePct: number;
+  avgTimeSpentSec: number;
+  attempts: number;
+}
+
+interface FormatItem {
+  format: string;
+  accuracyPct: number;
+  avgTimeSpentSec: number;
+  totalQuestions: number;
+}
+
+interface BreakdownChartsProps {
+  byExamType: ExamTypeItem[] | undefined;
+  bySectionType: SectionTypeItem[] | undefined;
+  byFormat: FormatItem[] | undefined;
+}
+
+const COLORS = [
+  "var(--matcha-600)",
+  "var(--slushie-600)",
+  "var(--lemon-700)",
+  "var(--ube-600)",
+  "var(--pomegranate-600)",
+];
+
+function AccuracyBar({ pct }: { pct: number }) {
+  return (
+    <div className="w-full h-2 bg-[var(--oat-light)] rounded-full overflow-hidden">
+      <div
+        className="h-full rounded-full transition-all"
+        style={{
+          width: `${pct}%`,
+          backgroundColor:
+            pct >= 80
+              ? "var(--matcha-600)"
+              : pct >= 60
+                ? "var(--lemon-700)"
+                : "var(--pomegranate-600)",
+        }}
+      />
+    </div>
+  );
+}
+
+export function BreakdownCharts({ byExamType, bySectionType, byFormat }: BreakdownChartsProps) {
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+        <CardHeader>
+          <CardTitle className="text-lg font-headline font-bold text-[var(--clay-black)]">
+            Performa per Jenis Ujian
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {byExamType && byExamType.length > 0 ? (
+            <ResponsiveContainer width="100%" height={220}>
+              <BarChart data={byExamType} margin={{ top: 5, right: 10, left: -10, bottom: 0 }}>
+                <CartesianGrid strokeDasharray="3 3" stroke="var(--oat-border)" />
+                <XAxis
+                  dataKey="examTypeName"
+                  tick={{ fontSize: 12, fill: "var(--warm-charcoal)" }}
+                  axisLine={{ stroke: "var(--oat-border)" }}
+                  tickLine={false}
+                />
+                <YAxis
+                  tick={{ fontSize: 12, fill: "var(--warm-charcoal)" }}
+                  axisLine={false}
+                  tickLine={false}
+                  domain={[0, 100]}
+                  unit="%"
+                />
+                <Tooltip
+                  contentStyle={{
+                    backgroundColor: "var(--pure-white)",
+                    border: "2px solid var(--oat-border)",
+                    borderRadius: "var(--radius-lg)",
+                    fontSize: 13,
+                  }}
+                  formatter={(value: unknown, name: unknown, _item: unknown, _index: unknown, _payload: unknown) => {
+                    const num = typeof value === "number" ? value : 0;
+                    const n = typeof name === "string" ? name : "";
+                    if (n === "accuracyPct") return [`${num}%`, "Akurasi"];
+                    if (n === "avgScorePct") return [`${num}%`, "Rata-rata Skor"];
+                    return [num, n];
+                  }}
+                />
+                <Bar dataKey="accuracyPct" radius={[6, 6, 0, 0]}>
+                  {byExamType.map((_, i) => (
+                    <Cell key={i} fill={COLORS[i % COLORS.length]} />
+                  ))}
+                </Bar>
+              </BarChart>
+            </ResponsiveContainer>
+          ) : (
+            <div className="h-56 flex items-center justify-center text-[var(--warm-charcoal)]">
+              Belum ada data.
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+        <CardHeader>
+          <CardTitle className="text-lg font-headline font-bold text-[var(--clay-black)]">
+            Performa per Section
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {bySectionType && bySectionType.length > 0 ? (
+            <ResponsiveContainer width="100%" height={220}>
+              <BarChart data={bySectionType} margin={{ top: 5, right: 10, left: -10, bottom: 0 }}>
+                <CartesianGrid strokeDasharray="3 3" stroke="var(--oat-border)" />
+                <XAxis
+                  dataKey="sectionTypeName"
+                  tick={{ fontSize: 12, fill: "var(--warm-charcoal)" }}
+                  axisLine={{ stroke: "var(--oat-border)" }}
+                  tickLine={false}
+                />
+                <YAxis
+                  tick={{ fontSize: 12, fill: "var(--warm-charcoal)" }}
+                  axisLine={false}
+                  tickLine={false}
+                  domain={[0, 100]}
+                  unit="%"
+                />
+                <Tooltip
+                  contentStyle={{
+                    backgroundColor: "var(--pure-white)",
+                    border: "2px solid var(--oat-border)",
+                    borderRadius: "var(--radius-lg)",
+                    fontSize: 13,
+                  }}
+                  formatter={(value: unknown, name: unknown, _item: unknown, _index: unknown, _payload: unknown) => {
+                    const num = typeof value === "number" ? value : 0;
+                    const n = typeof name === "string" ? name : "";
+                    if (n === "accuracyPct") return [`${num}%`, "Akurasi"];
+                    if (n === "avgScorePct") return [`${num}%`, "Rata-rata Skor"];
+                    return [num, n];
+                  }}
+                />
+                <Bar dataKey="accuracyPct" radius={[6, 6, 0, 0]}>
+                  {bySectionType.map((_, i) => (
+                    <Cell key={i} fill={COLORS[(i + 2) % COLORS.length]} />
+                  ))}
+                </Bar>
+              </BarChart>
+            </ResponsiveContainer>
+          ) : (
+            <div className="h-56 flex items-center justify-center text-[var(--warm-charcoal)]">
+              Belum ada data.
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] lg:col-span-2">
+        <CardHeader>
+          <CardTitle className="text-lg font-headline font-bold text-[var(--clay-black)]">
+            Performa per Format Soal
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {byFormat && byFormat.length > 0 ? (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {byFormat.map((item) => (
+                <div
+                  key={item.format}
+                  className="p-4 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--warm-cream)]"
+                >
+                  <div className="flex items-center justify-between mb-2">
+                    <span className="text-sm font-semibold text-[var(--clay-black)]">
+                      {formatLabel(item.format)}
+                    </span>
+                    <span className="text-xs text-[var(--warm-charcoal)]">
+                      {item.totalQuestions} soal
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-2 mb-1">
+                    <span className="text-lg font-bold text-[var(--clay-black)]">
+                      {item.accuracyPct}%
+                    </span>
+                    <span className="text-xs text-[var(--warm-charcoal)]">
+                      {formatTime(item.avgTimeSpentSec)}/soal
+                    </span>
+                  </div>
+                  <AccuracyBar pct={item.accuracyPct} />
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="h-20 flex items-center justify-center text-[var(--warm-charcoal)]">
+              Belum ada data.
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

apps/web/src/components/analytics/OverviewCards.tsx

@@ -0,0 +1,86 @@
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { Card, CardContent } from "@labas/ui/components/card";
+import { formatTime } from "@/lib/time";
+
+interface OverviewCardsProps {
+  data: {
+    totalAttempts: number;
+    completedAttempts: number;
+    abandonedAttempts: number;
+    avgScorePct: number;
+    totalTimeSpentSec: number;
+    totalQuestionsAnswered: number;
+    totalCorrectAnswers: number;
+    overallAccuracyPct: number;
+  } | undefined;
+}
+
+export function OverviewCards({ data }: OverviewCardsProps) {
+  if (!data) return null;
+
+  const cards = [
+    {
+      label: "Total Latihan",
+      value: data.totalAttempts,
+      icon: "school",
+      color: "text-[var(--matcha-600)]",
+      bg: "bg-[var(--matcha-300)]/20",
+    },
+    {
+      label: "Selesai",
+      value: data.completedAttempts,
+      icon: "check_circle",
+      color: "text-[var(--matcha-600)]",
+      bg: "bg-[var(--matcha-300)]/20",
+    },
+    {
+      label: "Rata-rata Skor",
+      value: `${data.avgScorePct}%`,
+      icon: "trending_up",
+      color: "text-[var(--lemon-700)]",
+      bg: "bg-[var(--lemon-300)]/20",
+    },
+    {
+      label: "Akurasi",
+      value: `${data.overallAccuracyPct}%`,
+      icon: "target",
+      color: "text-[var(--ube-600)]",
+      bg: "bg-[var(--ube-300)]/20",
+    },
+    {
+      label: "Waktu Total",
+      value: formatTime(data.totalTimeSpentSec),
+      icon: "timer",
+      color: "text-[var(--slushie-600)]",
+      bg: "bg-[var(--slushie-300)]/20",
+    },
+    {
+      label: "Soal Dijawab",
+      value: data.totalQuestionsAnswered,
+      icon: "quiz",
+      color: "text-[var(--pomegranate-600)]",
+      bg: "bg-[var(--pomegranate-300)]/20",
+    },
+  ];
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+      {cards.map((card) => (
+        <Card
+          key={card.label}
+          className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]"
+        >
+          <CardContent className="p-4">
+            <div className={`inline-flex items-center justify-center w-10 h-10 rounded-[var(--radius-lg)] ${card.bg} mb-3`}>
+              <MaterialIcon name={card.icon} className={card.color} />
+            </div>
+            <div className="text-2xl font-headline font-extrabold text-[var(--clay-black)]">
+              {card.value}
+            </div>
+            <div className="text-xs text-[var(--warm-charcoal)] mt-1">{card.label}</div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}

apps/web/src/components/analytics/ScoreTrendChart.tsx

@@ -0,0 +1,105 @@
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+import { Card, CardContent, CardHeader, CardTitle } from "@labas/ui/components/card";
+
+interface TrendPoint {
+  date: string;
+  attempts: number;
+  avgScorePct: number;
+}
+
+interface ScoreTrendChartProps {
+  data: TrendPoint[] | undefined;
+}
+
+function formatDateLabel(dateStr: string) {
+  const d = new Date(dateStr);
+  return `${d.getDate()}/${d.getMonth() + 1}`;
+}
+
+export function ScoreTrendChart({ data }: ScoreTrendChartProps) {
+  if (!data || data.length === 0) {
+    return (
+      <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+        <CardHeader>
+          <CardTitle className="text-lg font-headline font-bold text-[var(--clay-black)]">
+            Tren Skor
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="h-64 flex items-center justify-center text-[var(--warm-charcoal)]">
+          Belum ada data tren.
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const chartData = data.map((d) => ({
+    ...d,
+    label: formatDateLabel(d.date),
+  }));
+
+  return (
+    <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+      <CardHeader>
+        <CardTitle className="text-lg font-headline font-bold text-[var(--clay-black)]">
+          Tren Skor (30 Hari)
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ResponsiveContainer width="100%" height={256}>
+          <AreaChart data={chartData} margin={{ top: 5, right: 10, left: -10, bottom: 0 }}>
+            <defs>
+              <linearGradient id="scoreGradient" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor="var(--matcha-600)" stopOpacity={0.2} />
+                <stop offset="95%" stopColor="var(--matcha-600)" stopOpacity={0} />
+              </linearGradient>
+            </defs>
+            <CartesianGrid strokeDasharray="3 3" stroke="var(--oat-border)" />
+            <XAxis
+              dataKey="label"
+              tick={{ fontSize: 12, fill: "var(--warm-charcoal)" }}
+              axisLine={{ stroke: "var(--oat-border)" }}
+              tickLine={false}
+            />
+            <YAxis
+              tick={{ fontSize: 12, fill: "var(--warm-charcoal)" }}
+              axisLine={false}
+              tickLine={false}
+              domain={[0, 100]}
+              unit="%"
+            />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: "var(--pure-white)",
+                border: "2px solid var(--oat-border)",
+                borderRadius: "var(--radius-lg)",
+                fontSize: 13,
+              }}
+              formatter={(value: unknown, name: unknown, _item: unknown, _index: unknown, _payload: unknown) => {
+                const num = typeof value === "number" ? value : 0;
+                const n = typeof name === "string" ? name : "";
+                if (n === "avgScorePct") return [`${num}%`, "Rata-rata Skor"];
+                if (n === "attempts") return [num, "Latihan"];
+                return [num, n];
+              }}
+            />
+            <Area
+              type="monotone"
+              dataKey="avgScorePct"
+              stroke="var(--matcha-600)"
+              strokeWidth={2}
+              fill="url(#scoreGradient)"
+            />
+          </AreaChart>
+        </ResponsiveContainer>
+      </CardContent>
+    </Card>
+  );
+}

apps/web/src/components/analytics/TimeAnalyticsPanel.tsx

@@ -0,0 +1,164 @@
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+import { Card, CardContent, CardHeader, CardTitle } from "@labas/ui/components/card";
+import { formatTime } from "@/lib/time";
+import { formatLabel } from "@/lib/format";
+
+interface SectionTimeItem {
+  sectionTypeName: string;
+  avgTimeSpentSec: number;
+  totalTimeSpentSec: number;
+}
+
+interface FormatTimeItem {
+  format: string;
+  avgTimeSpentSec: number;
+  totalTimeSpentSec: number;
+}
+
+interface TimeTrendItem {
+  date: string;
+  avgTimeSpentSec: number;
+}
+
+interface TimeAnalyticsPanelProps {
+  sectionTime: SectionTimeItem[] | undefined;
+  formatTimeData: FormatTimeItem[] | undefined;
+  timeTrend: TimeTrendItem[] | undefined;
+}
+
+export function TimeAnalyticsPanel({ sectionTime, formatTimeData, timeTrend }: TimeAnalyticsPanelProps) {
+  return (
+    <div className="space-y-6">
+      <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+        <CardHeader>
+          <CardTitle className="text-lg font-headline font-bold text-[var(--clay-black)]">
+            Waktu per Section
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {sectionTime && sectionTime.length > 0 ? (
+            <div className="space-y-3">
+              {sectionTime.map((item) => (
+                <div key={item.sectionTypeName} className="flex items-center gap-4">
+                  <div className="w-28 shrink-0 text-sm font-medium text-[var(--clay-black)]">
+                    {item.sectionTypeName}
+                  </div>
+                  <div className="flex-1">
+                    <div className="w-full h-2.5 bg-[var(--oat-light)] rounded-full overflow-hidden">
+                      <div
+                        className="h-full rounded-full bg-[var(--slushie-600)]"
+                        style={{
+                          width: `${Math.min(100, (item.avgTimeSpentSec / 300) * 100)}%`,
+                        }}
+                      />
+                    </div>
+                  </div>
+                  <div className="w-20 shrink-0 text-right text-sm text-[var(--warm-charcoal)]">
+                    {formatTime(item.avgTimeSpentSec)}
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="h-20 flex items-center justify-center text-[var(--warm-charcoal)]">
+              Belum ada data.
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+        <CardHeader>
+          <CardTitle className="text-lg font-headline font-bold text-[var(--clay-black)]">
+            Waktu per Format Soal
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {formatTimeData && formatTimeData.length > 0 ? (
+            <div className="space-y-3">
+              {formatTimeData.map((item) => (
+                <div key={item.format} className="flex items-center gap-4">
+                  <div className="w-32 shrink-0 text-sm font-medium text-[var(--clay-black)] truncate">
+                    {formatLabel(item.format)}
+                  </div>
+                  <div className="flex-1">
+                    <div className="w-full h-2.5 bg-[var(--oat-light)] rounded-full overflow-hidden">
+                      <div
+                        className="h-full rounded-full bg-[var(--ube-600)]"
+                        style={{
+                          width: `${Math.min(100, (item.avgTimeSpentSec / 120) * 100)}%`,
+                        }}
+                      />
+                    </div>
+                  </div>
+                  <div className="w-20 shrink-0 text-right text-sm text-[var(--warm-charcoal)]">
+                    {formatTime(item.avgTimeSpentSec)}
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="h-20 flex items-center justify-center text-[var(--warm-charcoal)]">
+              Belum ada data.
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+        <CardHeader>
+          <CardTitle className="text-lg font-headline font-bold text-[var(--clay-black)]">
+            Tren Waktu per Hari
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {timeTrend && timeTrend.length > 0 ? (
+            <ResponsiveContainer width="100%" height={200}>
+              <BarChart data={timeTrend} margin={{ top: 5, right: 10, left: -10, bottom: 0 }}>
+                <CartesianGrid strokeDasharray="3 3" stroke="var(--oat-border)" />
+                <XAxis
+                  dataKey="date"
+                  tickFormatter={(v: string) => {
+                    const d = new Date(v);
+                    return `${d.getDate()}/${d.getMonth() + 1}`;
+                  }}
+                  tick={{ fontSize: 12, fill: "var(--warm-charcoal)" }}
+                  axisLine={{ stroke: "var(--oat-border)" }}
+                  tickLine={false}
+                />
+                <YAxis
+                  tick={{ fontSize: 12, fill: "var(--warm-charcoal)" }}
+                  axisLine={false}
+                  tickLine={false}
+                  tickFormatter={(v: number) => `${Math.round(v / 60)}m`}
+                />
+                <Tooltip
+                  contentStyle={{
+                    backgroundColor: "var(--pure-white)",
+                    border: "2px solid var(--oat-border)",
+                    borderRadius: "var(--radius-lg)",
+                    fontSize: 13,
+                  }}
+                  formatter={(value: unknown, _name: unknown, _item: unknown, _index: unknown, _payload: unknown) => [formatTime(typeof value === "number" ? value : 0), "Rata-rata Waktu"]}
+                />
+                <Bar dataKey="avgTimeSpentSec" fill="var(--slushie-600)" radius={[6, 6, 0, 0]} />
+              </BarChart>
+            </ResponsiveContainer>
+          ) : (
+            <div className="h-48 flex items-center justify-center text-[var(--warm-charcoal)]">
+              Belum ada data.
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

apps/web/src/components/analytics/WeaknessPanel.tsx

@@ -0,0 +1,112 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@labas/ui/components/card";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { formatLabel } from "@/lib/format";
+
+interface Weakness {
+  type: "format" | "section" | "skill";
+  name: string;
+  totalQuestions: number;
+  accuracyPct: number;
+}
+
+interface WeaknessPanelProps {
+  weaknesses: Weakness[] | undefined;
+  recommendations: string[] | undefined;
+}
+
+function getTypeIcon(type: Weakness["type"]) {
+  switch (type) {
+    case "format":
+      return "quiz";
+    case "section":
+      return "folder";
+    case "skill":
+      return "psychology";
+  }
+}
+
+function getTypeLabel(type: Weakness["type"]) {
+  switch (type) {
+    case "format":
+      return "Format";
+    case "section":
+      return "Section";
+    case "skill":
+      return "Skill";
+  }
+}
+
+function getSeverityColor(pct: number) {
+  if (pct < 40) return "text-[var(--pomegranate-600)]";
+  if (pct < 60) return "text-[var(--lemon-700)]";
+  return "text-[var(--matcha-600)]";
+}
+
+export function WeaknessPanel({ weaknesses, recommendations }: WeaknessPanelProps) {
+  const hasData = weaknesses && weaknesses.length > 0;
+
+  return (
+    <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+      <CardHeader>
+        <CardTitle className="text-lg font-headline font-bold text-[var(--clay-black)] flex items-center gap-2">
+          <MaterialIcon name="analytics" className="text-[var(--pomegranate-600)]" />
+          Area untuk Ditingkatkan
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        {hasData ? (
+          <>
+            <div className="space-y-3">
+              {weaknesses.map((w, i) => (
+                <div
+                  key={`${w.type}-${w.name}`}
+                  className="flex items-center gap-4 p-3 rounded-[var(--radius-md)] bg-[var(--warm-cream)] border-2 border-[var(--oat-border)]"
+                >
+                  <div className="flex items-center justify-center w-10 h-10 rounded-[var(--radius-lg)] bg-[var(--oat-light)] shrink-0">
+                    <MaterialIcon name={getTypeIcon(w.type)} className="text-[var(--warm-charcoal)]" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <span className="text-xs font-medium text-[var(--warm-silver)] uppercase tracking-wide">
+                        {getTypeLabel(w.type)}
+                      </span>
+                    </div>
+                    <div className="text-sm font-semibold text-[var(--clay-black)] truncate">
+                      {formatLabel(w.name)}
+                    </div>
+                  </div>
+                  <div className="text-right shrink-0">
+                    <div className={`text-xl font-headline font-extrabold ${getSeverityColor(w.accuracyPct)}`}>
+                      {w.accuracyPct}%
+                    </div>
+                    <div className="text-xs text-[var(--warm-silver)]">{w.totalQuestions} soal</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {recommendations && recommendations.length > 0 && (
+              <div className="space-y-2">
+                <h4 className="text-sm font-semibold text-[var(--clay-black)]">Rekomendasi</h4>
+                <ul className="space-y-2">
+                  {recommendations.map((rec, i) => (
+                    <li key={i} className="flex items-start gap-2 text-sm text-[var(--warm-charcoal)]">
+                      <MaterialIcon name="lightbulb" className="text-[var(--lemon-700)] shrink-0 mt-0.5" />
+                      <span>{rec}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </>
+        ) : (
+          <div className="text-center py-8 text-[var(--warm-charcoal)]">
+            <MaterialIcon name="insights" className="text-5xl text-[var(--warm-silver)] mx-auto mb-3" />
+            <p className="font-semibold">Belum cukup data</p>
+            <p className="text-sm mt-1">Selesaikan lebih banyak latihan untuk melihat analisis kelemahan.</p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

apps/web/src/components/bank/QuestionDetailModal.tsx

@@ -170,11 +170,10 @@ export function QuestionDetailModal({
           {isOwner && (
             <div className="flex gap-2 items-center">
               <span
-                className={`px-3 py-1.5 rounded-full text-xs font-semibold ${
-                  question.isPublic
+                className={`px-3 py-1.5 rounded-full text-xs font-semibold ${question.isPublic
                     ? "bg-[var(--matcha-300)] text-[var(--matcha-800)]"
                     : "bg-[var(--oat-light)] text-[var(--warm-charcoal)]"
-                }`}
+                  }`}
               >
                 {question.isPublic ? "Publik" : "Privat"}
               </span>
@@ -188,13 +187,12 @@ export function QuestionDetailModal({
             variant="outline"
             onClick={onToggleSelect}
             disabled={!isSelectable}
-            className={`rounded-[var(--radius-lg)] border-2 clay-hover ${
-              !isSelectable
+            className={`rounded-[var(--radius-lg)] border-2 clay-hover ${!isSelectable
                 ? "opacity-40 cursor-not-allowed border-[var(--oat-border)] text-[var(--warm-silver)]"
                 : isSelected
                   ? "border-[var(--pomegranate-400)] text-[var(--pomegranate-600)] bg-[var(--pomegranate-50)]"
                   : "border-[var(--oat-border)] text-[var(--warm-charcoal)]"
-            }`}
+              }`}
           >
             <MaterialIcon name={isSelected ? "remove" : "add"} className="mr-2" />
             {!isSelectable

apps/web/src/components/sidebar.tsx

@@ -30,9 +30,8 @@ export function Sidebar() {
     <>
       {/* Desktop Sidebar */}
       <aside
-        className={`fixed left-0 top-0 h-full flex flex-col z-40 bg-[var(--warm-cream)] border-r border-[var(--oat-border)] hidden md:flex transition-all duration-300 ${
-          collapsed ? "w-16 items-center px-2 py-4" : "w-64 p-4"
-        }`}
+        className={`fixed left-0 top-0 h-full flex flex-col z-40 bg-[var(--warm-cream)] border-r border-[var(--oat-border)] hidden md:flex transition-all duration-300 ${collapsed ? "w-16 items-center px-2 py-4" : "w-64 p-4"
+          }`}
       >
         <div className={`mb-8 ${collapsed ? "px-0 text-center" : "px-4"}`}>
           <h1 className="text-xl font-extrabold text-[var(--clay-black)] font-headline tracking-tight">
@@ -52,11 +51,10 @@ export function Sidebar() {
               <Link
                 key={item.to}
                 to={item.to}
-                className={`flex items-center gap-3 rounded-[var(--radius-lg)] transition-all group clay-hover ${
-                  isActive
-                    ? "bg-[var(--matcha-300)] text-[var(--matcha-800)] font-semibold clay-shadow"
-                    : "text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] hover:text-[var(--clay-black)]"
-                } ${collapsed ? "justify-center py-3 px-2" : "py-3 px-4"}`}
+                className={`flex items-center gap-3 rounded-[var(--radius-lg)] transition-all group clay-hover ${isActive
+                  ? "bg-[var(--matcha-300)] text-[var(--matcha-800)] font-semibold clay-shadow"
+                  : "text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] hover:text-[var(--clay-black)]"
+                  } ${collapsed ? "justify-center py-3 px-2" : "py-3 px-4"}`}
                 title={collapsed ? item.label : undefined}
               >
                 <NavIcon name={item.icon} />
@@ -73,11 +71,10 @@ export function Sidebar() {
               <Link
                 key={item.to}
                 to={item.to}
-                className={`flex items-center gap-3 rounded-[var(--radius-lg)] transition-all clay-hover ${
-                  isActive
-                    ? "bg-[var(--matcha-300)] text-[var(--matcha-800)] font-semibold clay-shadow"
-                    : "text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] hover:text-[var(--clay-black)]"
-                } ${collapsed ? "justify-center py-3 px-2" : "py-3 px-4"}`}
+                className={`flex items-center gap-3 rounded-[var(--radius-lg)] transition-all clay-hover ${isActive
+                  ? "bg-[var(--matcha-300)] text-[var(--matcha-800)] font-semibold clay-shadow"
+                  : "text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] hover:text-[var(--clay-black)]"
+                  } ${collapsed ? "justify-center py-3 px-2" : "py-3 px-4"}`}
                 title={collapsed ? item.label : undefined}
               >
                 <NavIcon name={item.icon} />
@@ -88,9 +85,8 @@ export function Sidebar() {
           {isLoggedIn ? (
             <button
               onClick={() => authClient.signOut()}
-              className={`flex items-center gap-3 rounded-[var(--radius-lg)] transition-all clay-hover text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] hover:text-[var(--clay-black)] w-full ${
-                collapsed ? "justify-center py-3 px-2" : "py-3 px-4 text-left"
-              }`}
+              className={`flex items-center gap-3 rounded-[var(--radius-lg)] transition-all clay-hover text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] hover:text-[var(--clay-black)] w-full ${collapsed ? "justify-center py-3 px-2" : "py-3 px-4 text-left"
+                }`}
               title={collapsed ? "Keluar" : undefined}
             >
               <NavIcon name="logout" />
@@ -99,9 +95,8 @@ export function Sidebar() {
           ) : (
             <Link
               to="/login"
-              className={`flex items-center gap-3 rounded-[var(--radius-lg)] transition-all clay-hover text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] hover:text-[var(--clay-black)] ${
-                collapsed ? "justify-center py-3 px-2" : "py-3 px-4"
-              }`}
+              className={`flex items-center gap-3 rounded-[var(--radius-lg)] transition-all clay-hover text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] hover:text-[var(--clay-black)] ${collapsed ? "justify-center py-3 px-2" : "py-3 px-4"
+                }`}
               title={collapsed ? "Masuk" : undefined}
             >
               <NavIcon name="login" />
@@ -116,25 +111,23 @@ export function Sidebar() {
         onClick={toggle}
         title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
         style={{ left: collapsed ? "48px" : "240px" }}
-        className="hidden md:flex absolute top-6 z-50 items-center justify-center w-10 h-10 rounded-full bg-[var(--pure-white)] border-2 border-[var(--oat-border)] shadow-md hover:bg-[var(--oat-light)] transition-all duration-300 text-[var(--warm-charcoal)] clay-hover"
+        className="hidden md:flex absolute top-6 z-40 items-center justify-center w-10 h-10 rounded-full bg-[var(--pure-white)] border-2 border-[var(--oat-border)] shadow-md hover:bg-[var(--oat-light)] transition-all duration-300 text-[var(--warm-charcoal)] clay-hover"
       >
         <span className="relative inline-flex size-6 shrink-0 items-center justify-center">
           <span
-            className={`material-symbols-outlined pointer-events-none absolute inset-0 flex items-center justify-center text-[20px] leading-none transition-all duration-300 ease-out select-none ${
-              collapsed
-                ? "opacity-100 scale-100 rotate-0"
-                : "opacity-0 scale-75 -rotate-90"
-            }`}
+            className={`material-symbols-outlined pointer-events-none absolute inset-0 flex items-center justify-center text-[20px] leading-none transition-all duration-300 ease-out select-none ${collapsed
+              ? "opacity-100 scale-100 rotate-0"
+              : "opacity-0 scale-75 -rotate-90"
+              }`}
             aria-hidden
           >
             right_panel_open
           </span>
           <span
-            className={`material-symbols-outlined pointer-events-none absolute inset-0 flex items-center justify-center text-[20px] leading-none transition-all duration-300 ease-out select-none ${
-              collapsed
-                ? "opacity-0 scale-75 rotate-90"
-                : "opacity-100 scale-100 rotate-0"
-            }`}
+            className={`material-symbols-outlined pointer-events-none absolute inset-0 flex items-center justify-center text-[20px] leading-none transition-all duration-300 ease-out select-none ${collapsed
+              ? "opacity-0 scale-75 rotate-90"
+              : "opacity-100 scale-100 rotate-0"
+              }`}
             aria-hidden
           >
             right_panel_close
@@ -150,11 +143,10 @@ export function Sidebar() {
             <Link
               key={item.to}
               to={item.to}
-              className={`flex flex-col items-center justify-center px-4 py-1.5 transition-all rounded-[var(--radius-lg)] ${
-                isActive
-                  ? "bg-[var(--matcha-300)] text-[var(--matcha-800)]"
-                  : "text-[var(--warm-charcoal)]"
-              }`}
+              className={`flex flex-col items-center justify-center px-4 py-1.5 transition-all rounded-[var(--radius-lg)] ${isActive
+                ? "bg-[var(--matcha-300)] text-[var(--matcha-800)]"
+                : "text-[var(--warm-charcoal)]"
+                }`}
             >
               <NavIcon name={item.icon} />
               <span className="text-[10px] font-medium uppercase tracking-wider mt-1">{item.label}</span>

apps/web/src/components/test/AttemptTestView.tsx

@@ -1,7 +1,7 @@
+import { useState } from "react";
 import { Link } from "@tanstack/react-router";
 import { useQuery } from "@tanstack/react-query";
 import { Button } from "@labas/ui/components/button";
-import { Card, CardContent } from "@labas/ui/components/card";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import { formatTime } from "@/lib/time";
 import { trpc } from "@/utils/trpc";
@@ -18,8 +18,12 @@ interface AttemptTestViewProps {
   answeredCount: number;
   totalQuestions: number;
   onFinish: () => void;
+  onAbandon: () => void;
   isFinished: boolean;
   submittingQId: string | null;
+  markedQuestions: Set<string>;
+  toggleMarkQuestion: (questionId: string) => void;
+  startQuestionTimer: (questionId: string) => void;
 }
 
 export function AttemptTestView({
@@ -33,118 +37,164 @@ export function AttemptTestView({
   answeredCount,
   totalQuestions,
   onFinish,
+  onAbandon,
   isFinished,
   submittingQId,
+  markedQuestions,
+  toggleMarkQuestion,
+  startQuestionTimer,
 }: AttemptTestViewProps) {
-  const attemptQuery = useQuery(trpc.attempt.getById.queryOptions({ id: attemptId }));
+  const [showFinishDialog, setShowFinishDialog] = useState(false);
+  const [showAbandonDialog, setShowAbandonDialog] = useState(false);
+
+  console.log("[AttemptTestView] render, attemptId:", attemptId, "sections:", pkg.sections?.length);
+
+  const attemptQuery = useQuery(
+    trpc.attempt.getById.queryOptions(
+      { id: attemptId },
+      { enabled: !!attemptId },
+    ),
+  );
   const attempt = attemptQuery.data;
   const currentSection = pkg.sections[currentSectionIdx];
   const sectionData = attempt?.sections?.[currentSectionIdx];
   const sectionResultId = sectionData?.sectionResultId;
 
+  if (!currentSection) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-[var(--warm-cream)]">
+        <p className="text-[var(--warm-charcoal)]">Section tidak ditemukan.</p>
+      </div>
+    );
+  }
+
+  // Build global question index across all sections
+  const allQuestions: Array<{ id: string; sectionIdx: number; localIdx: number; passageText?: string }> = [];
+  pkg.sections.forEach((sec: any, sIdx: number) => {
+    sec.questions.forEach((q: any, qIdx: number) => {
+      allQuestions.push({ id: q.id, sectionIdx: sIdx, localIdx: qIdx, passageText: q.passageText });
+    });
+  });
+
+  const isAnswered = (qId: string) => !!answers[qId];
+  const isMarked = (qId: string) => markedQuestions.has(qId);
+
   return (
-    <div className="min-h-screen bg-[var(--warm-cream)]">
-      {/* Top Bar */}
-      <div className="sticky top-0 z-50 bg-[var(--pure-white)] border-b-2 border-[var(--oat-border)] px-4 md:px-8 py-3">
-        <div className="max-w-5xl mx-auto flex items-center justify-between gap-4">
-          <div className="flex items-center gap-3">
-            <Link to="/package/$id" params={{ id: pkg.id }} className="text-[var(--warm-charcoal)] hover:text-[var(--clay-black)]">
+    <>
+      <style>{`
+        .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
+        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
+        .custom-scrollbar::-webkit-scrollbar-thumb { background: var(--oat-border); border-radius: 10px; }
+        .hide-scrollbar::-webkit-scrollbar { display: none; }
+        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+      `}</style>
+      
+      <div className="h-full flex flex-col bg-[var(--warm-cream)] overflow-hidden">
+        {/* TopAppBar Shell */}
+        <header className="bg-[var(--pure-white)] border-b border-[var(--oat-border)] flex justify-between items-center w-full px-6 py-3 shrink-0 z-50">
+          <div className="flex items-center gap-4">
+            <button onClick={() => setShowAbandonDialog(true)} className="text-[var(--warm-charcoal)] hover:text-[var(--clay-black)] transition-colors flex items-center">
               <MaterialIcon name="close" />
-            </Link>
-            <h1 className="font-headline font-bold text-[var(--clay-black)] text-sm md:text-base truncate max-w-[200px] md:max-w-sm">
-              {pkg.title}
-            </h1>
+            </button>
+            <span className="text-xl font-bold tracking-tight text-[var(--clay-black)] truncate max-w-[200px] md:max-w-sm">{pkg.title}</span>
+            <span className="bg-[var(--oat-light)] px-3 py-1 rounded-full text-xs font-semibold text-[var(--warm-charcoal)] uppercase tracking-widest hidden md:inline-block">
+              {currentSection.title}
+            </span>
           </div>
 
-          <div className="flex items-center gap-4">
-            <div className="flex items-center gap-1.5 bg-[var(--oat-light)] px-3 py-1.5 rounded-full text-sm font-mono text-[var(--clay-black)]">
-              <MaterialIcon name="timer" className="text-sm" />
-              {formatTime(timeElapsed)}
+          {/* Timer Box */}
+          <div className="bg-[var(--pure-white)]/70 backdrop-blur-md rounded-xl hidden sm:flex items-center gap-3 px-6 py-2 shadow-sm border border-[var(--oat-border)]">
+            <MaterialIcon name="timer" className="text-[var(--matcha-600)]" />
+            <div className="flex flex-col">
+              <span className="text-[10px] leading-none uppercase font-bold text-[var(--warm-silver)] tracking-tighter">Waktu Berlalu</span>
+              <span className="text-xl font-bold font-headline tabular-nums text-[var(--clay-black)]">{formatTime(timeElapsed)}</span>
             </div>
-            <div className="hidden md:flex items-center gap-1.5 text-sm text-[var(--warm-charcoal)]">
-              <MaterialIcon name="check_circle" className="text-sm text-[var(--matcha-600)]" />
-              {answeredCount}/{totalQuestions}
+          </div>
+
+          <div className="flex items-center gap-6">
+            <div className="hidden md:flex items-center gap-2">
+              <div className="w-24 h-2 bg-[var(--oat-light)] rounded-full overflow-hidden">
+                <div
+                  className="h-full bg-[var(--matcha-600)] transition-all rounded-full"
+                  style={{ width: `${totalQuestions > 0 ? (answeredCount / totalQuestions) * 100 : 0}%` }}
+                />
+              </div>
+              <span className="text-xs font-bold text-[var(--clay-black)]">{answeredCount}/{totalQuestions} Dijawab</span>
             </div>
+            <button className="bg-[var(--oat-light)] p-2 rounded-xl text-[var(--warm-charcoal)] hover:text-[var(--clay-black)] transition-colors sm:hidden">
+               <MaterialIcon name="timer" />
+            </button>
             <Button
-              onClick={onFinish}
+              onClick={() => setShowFinishDialog(true)}
               disabled={isFinished}
-              className="bg-[var(--pomegranate-500)] text-[var(--pure-white)] hover:bg-[var(--pomegranate-700)] clay-hover rounded-[var(--radius-lg)] text-sm px-4 py-2"
+              className="bg-[var(--pomegranate-500)] text-[var(--pure-white)] hover:bg-[var(--pomegranate-600)] px-4 py-2 rounded-xl text-sm font-bold transition-opacity"
             >
-              Selesai
+              Selesai Test
             </Button>
           </div>
-        </div>
-      </div>
+        </header>
 
-      {/* Section Tabs */}
-      <div className="max-w-5xl mx-auto px-4 md:px-8 py-4">
-        <div className="flex gap-2 overflow-x-auto pb-2">
-          {pkg.sections.map((sec: any, idx: number) => (
-            <button
-              key={sec.id}
-              onClick={() => setCurrentSectionIdx(idx)}
-              className={`px-4 py-2 rounded-[var(--radius-lg)] text-sm font-semibold whitespace-nowrap border-2 transition-colors ${
-                idx === currentSectionIdx
-                  ? "bg-[var(--clay-black)] text-[var(--pure-white)] border-[var(--clay-black)]"
-                  : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] border-[var(--oat-border)] hover:border-[var(--matcha-400)]"
-              }`}
-            >
-              {sec.title}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Main Content */}
-      <div className="max-w-5xl mx-auto px-4 md:px-8 pb-32">
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          {/* Left: Passage */}
-          <div className="lg:col-span-1">
-            <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] sticky top-24">
-              <CardContent className="p-5">
-                <h2 className="font-headline font-bold text-[var(--clay-black)] mb-3 flex items-center gap-2">
-                  <MaterialIcon name="menu_book" className="text-[var(--matcha-600)]" />
-                  Bacaan
-                </h2>
-                <div className="prose prose-sm max-w-none text-[var(--clay-black)] whitespace-pre-wrap text-sm leading-relaxed max-h-[60vh] overflow-y-auto pr-2">
-                  {currentSection.questions[0]?.passageText ?? "Tidak ada bacaan untuk section ini."}
+        {/* Main Exam Workspace */}
+        <main className="flex-1 flex overflow-hidden flex-col lg:flex-row">
+          {/* Left Column: Reading Passage */}
+          <section className="w-full lg:w-1/2 bg-[var(--pure-white)] overflow-y-auto custom-scrollbar p-6 md:p-12 border-b lg:border-b-0 lg:border-r border-[var(--oat-border)] h-1/2 lg:h-full">
+            <article className="max-w-2xl mx-auto">
+              <header className="mb-8">
+                <h1 className="text-3xl font-extrabold text-[var(--clay-black)] mb-4 leading-tight">
+                  {currentSection.title}
+                </h1>
+                <div className="flex gap-4 text-sm text-[var(--warm-silver)] italic">
+                  <span>Section {currentSectionIdx + 1} dari {pkg.sections.length}</span>
                 </div>
-              </CardContent>
-            </Card>
-          </div>
+              </header>
+              <div className="space-y-6 text-lg leading-relaxed text-[var(--warm-charcoal)] font-body whitespace-pre-wrap">
+                {currentSection.questions[0]?.passageText ?? "Tidak ada bacaan tambahan untuk section ini."}
+              </div>
+            </article>
+          </section>
 
-          {/* Right: Questions */}
-          <div className="lg:col-span-2 space-y-4">
-            {currentSection.questions.map((q: any, idx: number) => {
-              const answerValue = answers[q.id] ?? "";
-              return (
-                <Card
-                  key={q.id}
-                  className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]"
-                >
-                  <CardContent className="p-5">
-                    <div className="flex items-start gap-3 mb-4">
-                      <span className="w-8 h-8 rounded-full bg-[var(--clay-black)] text-[var(--pure-white)] text-xs flex items-center justify-center font-bold shrink-0">
-                        {idx + 1}
-                      </span>
-                      <div>
-                        <p className="text-[var(--clay-black)] font-medium leading-relaxed">
-                          {q.questionText}
-                        </p>
-                        <div className="flex gap-2 mt-1">
-                          <span className="text-xs px-2 py-0.5 rounded bg-[var(--oat-light)] text-[var(--warm-charcoal)]">
-                            {q.format.replace(/_/g, " ")}
-                          </span>
-                          {q.difficulty && (
-                            <span className="text-xs px-2 py-0.5 rounded bg-[var(--oat-light)] text-[var(--warm-charcoal)]">
-                              Lv.{q.difficulty}
-                            </span>
-                          )}
-                        </div>
+          {/* Right Column: Question Panel */}
+          <section className="w-full lg:w-1/2 bg-[var(--warm-cream)] overflow-y-auto custom-scrollbar p-6 md:p-10 relative h-1/2 lg:h-full">
+            <div className="max-w-2xl mx-auto space-y-8 pb-32">
+              {currentSection.questions.map((q: any) => {
+                const answerValue = answers[q.id] ?? "";
+                const globalIdx = allQuestions.findIndex((aq) => aq.id === q.id) + 1;
+
+                return (
+                  <div
+                    key={q.id}
+                    id={`question-${q.id}`}
+                    className={`bg-[var(--pure-white)] p-6 md:p-8 rounded-xl shadow-sm border-2 transition-all ${
+                      isMarked(q.id) ? "border-[var(--pomegranate-400)]" : "border-transparent"
+                    }`}
+                  >
+                    <div className="flex items-center justify-between mb-6">
+                      <div className="flex items-center gap-3">
+                        <span className="bg-[var(--clay-black)] text-[var(--pure-white)] w-8 h-8 flex items-center justify-center rounded-lg font-bold text-sm">
+                          {globalIdx}
+                        </span>
+                        <h2 className="text-xl font-bold text-[var(--clay-black)] capitalize">
+                          {q.format.replace(/_/g, " ")}
+                        </h2>
                       </div>
+                      <button
+                        onClick={() => toggleMarkQuestion(q.id)}
+                        className={`shrink-0 w-10 h-10 flex items-center justify-center rounded-full transition-colors ${
+                          isMarked(q.id)
+                            ? "bg-[var(--pomegranate-400)]/20 text-[var(--pomegranate-400)]"
+                            : "bg-[var(--oat-light)] text-[var(--warm-silver)] hover:text-[var(--pomegranate-400)]"
+                        }`}
+                        title={isMarked(q.id) ? "Hapus tanda" : "Tandai untuk review"}
+                      >
+                        <MaterialIcon name={isMarked(q.id) ? "bookmark" : "bookmark_border"} className="text-lg" />
+                      </button>
                     </div>
 
-                    <div className="pl-11">
+                    <p className="text-[var(--warm-charcoal)] mb-6 font-medium leading-relaxed">
+                      {q.questionText}
+                    </p>
+
+                    <div className="pl-0">
                       {submittingQId === q.id && (
                         <div className="text-xs text-[var(--matcha-600)] mb-2 flex items-center gap-1">
                           <MaterialIcon name="sync" className="text-xs animate-spin" />
@@ -162,44 +212,195 @@ export function AttemptTestView({
                         disabled={isFinished || !sectionResultId}
                       />
                     </div>
-                  </CardContent>
-                </Card>
-              );
-            })}
+                  </div>
+                );
+              })}
 
-            {/* Section Navigation */}
-            <div className="flex justify-between pt-4">
-              <Button
-                variant="outline"
-                onClick={() => setCurrentSectionIdx(Math.max(0, currentSectionIdx - 1))}
-                disabled={currentSectionIdx === 0}
-                className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
-              >
-                <MaterialIcon name="arrow_back" />
-                <span className="ml-2">Sebelumnya</span>
-              </Button>
-              {currentSectionIdx < pkg.sections.length - 1 ? (
-                <Button
-                  onClick={() => setCurrentSectionIdx(currentSectionIdx + 1)}
-                  className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)]"
-                >
-                  <span className="mr-2">Selanjutnya</span>
-                  <MaterialIcon name="arrow_forward" />
-                </Button>
-              ) : (
+              {/* Bottom Navigation */}
+              <nav className="flex justify-between items-center pt-8 pb-12">
                 <Button
-                  onClick={onFinish}
-                  disabled={isFinished}
-                  className="bg-[var(--pomegranate-500)] text-[var(--pure-white)] hover:bg-[var(--pomegranate-700)] clay-hover rounded-[var(--radius-lg)]"
+                  variant="ghost"
+                  onClick={() => setCurrentSectionIdx(Math.max(0, currentSectionIdx - 1))}
+                  disabled={currentSectionIdx === 0}
+                  className="flex items-center gap-2 text-[var(--clay-black)] font-bold px-6 py-3 rounded-xl hover:bg-[var(--clay-black)]/5 transition-all disabled:opacity-50"
                 >
-                  <MaterialIcon name="check_circle" />
-                  <span className="ml-2">Selesaikan</span>
+                  <MaterialIcon name="arrow_back" />
+                  Sebelumnya
                 </Button>
+                
+                <div className="flex gap-2">
+                  {pkg.sections.map((_: any, idx: number) => (
+                    <div 
+                      key={idx} 
+                      className={`w-2 h-2 rounded-full ${idx === currentSectionIdx ? "bg-[var(--matcha-600)]" : "bg-[var(--oat-border)]"}`}
+                    />
+                  ))}
+                </div>
+
+                {currentSectionIdx < pkg.sections.length - 1 ? (
+                  <Button
+                    onClick={() => setCurrentSectionIdx(currentSectionIdx + 1)}
+                    className="flex items-center gap-2 bg-[var(--clay-black)] text-[var(--pure-white)] font-bold px-8 py-3 rounded-xl shadow-lg hover:bg-[var(--warm-charcoal)] transition-all"
+                  >
+                    Selanjutnya
+                    <MaterialIcon name="arrow_forward" />
+                  </Button>
+                ) : (
+                  <Button
+                    onClick={() => setShowFinishDialog(true)}
+                    disabled={isFinished}
+                    className="flex items-center gap-2 bg-[var(--matcha-600)] text-[var(--pure-white)] font-bold px-8 py-3 rounded-xl shadow-lg hover:bg-[var(--matcha-700)] transition-all"
+                  >
+                    Selesai
+                    <MaterialIcon name="check_circle" />
+                  </Button>
+                )}
+              </nav>
+            </div>
+          </section>
+        </main>
+
+        {/* Floating Navigation Orb (Quick Question Jump) */}
+        <div className="fixed bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-2 p-2 bg-[var(--clay-black)]/95 backdrop-blur-md rounded-full shadow-2xl border border-white/10 z-40 max-w-[90vw] overflow-x-auto hide-scrollbar">
+          {allQuestions.map((q, gIdx) => {
+            const answered = isAnswered(q.id);
+            const marked = isMarked(q.id);
+
+            return (
+              <button
+                key={q.id}
+                onClick={() => {
+                  setCurrentSectionIdx(q.sectionIdx);
+                  setTimeout(() => {
+                    const el = document.getElementById(`question-${q.id}`);
+                    el?.scrollIntoView({ behavior: "smooth", block: "center" });
+                  }, 100);
+                }}
+                className={`relative w-10 h-10 shrink-0 flex items-center justify-center rounded-full font-bold text-xs transition-all ${
+                  answered
+                    ? "bg-[var(--matcha-600)] text-[var(--pure-white)]"
+                    : "bg-white/10 text-white/60 hover:bg-white/20"
+                }`}
+                title={`Soal ${gIdx + 1}${marked ? " (ditandai)" : ""}`}
+              >
+                {gIdx + 1}
+                {marked && (
+                  <span className="absolute top-0 right-0 w-2.5 h-2.5 bg-[var(--pomegranate-400)] rounded-full border border-[var(--clay-black)]" />
+                )}
+              </button>
+            );
+          })}
+          <div className="w-1 h-6 bg-white/10 mx-1 shrink-0"></div>
+          <button
+             onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+             className="flex items-center gap-1 px-4 py-2 shrink-0 rounded-full text-white/80 font-semibold text-xs hover:text-white transition-all"
+          >
+            <MaterialIcon name="arrow_upward" className="text-sm" />
+            Top
+          </button>
+        </div>
+      </div>
+
+      {/* Finish Confirmation Dialog */}
+      {showFinishDialog && (
+        <div
+          className="fixed inset-0 z-[60] flex items-center justify-center bg-black/40 backdrop-blur-sm p-4"
+          onClick={(e) => {
+            if (e.target === e.currentTarget) setShowFinishDialog(false);
+          }}
+        >
+          <div className="bg-[var(--warm-cream)] w-full max-w-md rounded-[var(--radius-xl)] border-2 border-[var(--oat-border)] shadow-xl p-6 md:p-8">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="w-10 h-10 rounded-full bg-[var(--pomegranate-400)]/20 flex items-center justify-center">
+                <MaterialIcon name="help" className="text-[var(--pomegranate-500)]" />
+              </div>
+              <h2 className="text-xl font-headline font-bold text-[var(--clay-black)]">
+                Selesaikan Latihan?
+              </h2>
+            </div>
+
+            <div className="space-y-3 mb-6">
+              <p className="text-sm text-[var(--warm-charcoal)]">
+                Kamu sudah menjawab <strong className="text-[var(--clay-black)]">{answeredCount} dari {totalQuestions}</strong> soal.
+              </p>
+              {answeredCount < totalQuestions && (
+                <div className="p-3 rounded-[var(--radius-md)] bg-[var(--lemon-400)]/20 border-2 border-[var(--lemon-500)]/30 text-sm text-[var(--lemon-800)] flex items-start gap-2">
+                  <MaterialIcon name="warning" className="text-sm mt-0.5 shrink-0" />
+                  <span>Masih ada {totalQuestions - answeredCount} soal yang belum dijawab.</span>
+                </div>
               )}
+              <p className="text-sm text-[var(--warm-charcoal)]">
+                Setelah selesai, jawaban tidak bisa diubah dan hasil akan langsung terlihat.
+              </p>
+            </div>
+
+            <div className="flex gap-3">
+              <Button
+                variant="outline"
+                onClick={() => setShowFinishDialog(false)}
+                className="flex-1 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)]"
+              >
+                Lanjutkan
+              </Button>
+              <Button
+                onClick={() => {
+                  setShowFinishDialog(false);
+                  onFinish();
+                }}
+                className="flex-1 bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] rounded-[var(--radius-lg)]"
+              >
+                Selesaikan
+              </Button>
             </div>
           </div>
         </div>
-      </div>
-    </div>
+      )}
+
+      {/* Abandon Confirmation Dialog */}
+      {showAbandonDialog && (
+        <div
+          className="fixed inset-0 z-[60] flex items-center justify-center bg-black/40 backdrop-blur-sm p-4"
+          onClick={(e) => {
+            if (e.target === e.currentTarget) setShowAbandonDialog(false);
+          }}
+        >
+          <div className="bg-[var(--warm-cream)] w-full max-w-md rounded-[var(--radius-xl)] border-2 border-[var(--oat-border)] shadow-xl p-6 md:p-8">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="w-10 h-10 rounded-full bg-[var(--pomegranate-400)]/20 flex items-center justify-center">
+                <MaterialIcon name="warning" className="text-[var(--pomegranate-500)]" />
+              </div>
+              <h2 className="text-xl font-headline font-bold text-[var(--clay-black)]">
+                Keluar dari Latihan?
+              </h2>
+            </div>
+
+            <div className="space-y-3 mb-6">
+              <p className="text-sm text-[var(--warm-charcoal)]">
+                Apakah Anda yakin ingin meninggalkan sesi latihan ini? Progress pengerjaan Anda mungkin tidak tersimpan dan akan ditandai sebagai gagal atau dibatalkan.
+              </p>
+            </div>
+
+            <div className="flex gap-3">
+              <Button
+                variant="outline"
+                onClick={() => setShowAbandonDialog(false)}
+                className="flex-1 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)]"
+              >
+                Batal
+              </Button>
+              <Button
+                onClick={() => {
+                  setShowAbandonDialog(false);
+                  onAbandon();
+                }}
+                className="flex-1 bg-[var(--pomegranate-500)] text-[var(--pure-white)] hover:bg-[var(--pomegranate-600)] rounded-[var(--radius-lg)]"
+              >
+                Keluar
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
   );
 }

apps/web/src/components/test/QuestionInput.tsx

@@ -28,8 +28,8 @@ const AUTHOR_VIEW_CHOICES = [
 ];
 
 const radioClass =
-  "flex items-center gap-3 p-3 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] cursor-pointer hover:border-[var(--matcha-400)] transition-colors";
-const radioSelected = "border-[var(--matcha-600)] bg-[var(--matcha-100)]";
+  "flex items-center gap-3 p-3 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] cursor-pointer hover:border-[var(--matcha-300)] transition-colors";
+const radioSelected = "border-[var(--matcha-600)] bg-[#e8f5ed]";
 const radioDisabled = "opacity-60 cursor-not-allowed";
 
 export function QuestionInput({
@@ -70,7 +70,7 @@ export function QuestionInput({
               disabled={disabled}
               className="hidden"
             />
-            <span className="w-8 h-8 rounded-full bg-[var(--oat-light)] text-[var(--clay-black)] text-sm font-bold flex items-center justify-center shrink-0">
+            <span className={`w-8 h-8 rounded-full text-sm font-bold flex items-center justify-center shrink-0 transition-colors ${value === opt.key ? "bg-[var(--matcha-600)] text-[var(--pure-white)]" : "bg-[var(--oat-light)] text-[var(--clay-black)]"}`}>
               {opt.key}
             </span>
             <span className="text-sm text-[var(--clay-black)]">{opt.text}</span>

apps/web/src/hooks/use-analytics.ts

@@ -0,0 +1,35 @@
+import { useQuery } from "@tanstack/react-query";
+import { trpc } from "@/utils/trpc";
+
+export function useAnalytics() {
+  const overview = useQuery(trpc.stats.overview.queryOptions());
+  const byExamType = useQuery(trpc.stats.byExamType.queryOptions());
+  const bySectionType = useQuery(trpc.stats.bySectionType.queryOptions());
+  const byFormat = useQuery(trpc.stats.byFormat.queryOptions());
+  const bySkillTag = useQuery(trpc.stats.bySkillTag.queryOptions());
+  const trend = useQuery(trpc.stats.trend.queryOptions());
+  const weaknesses = useQuery(trpc.stats.weaknesses.queryOptions());
+  const timeAnalytics = useQuery(trpc.stats.timeAnalytics.queryOptions());
+
+  const isLoading =
+    overview.isLoading ||
+    byExamType.isLoading ||
+    bySectionType.isLoading ||
+    byFormat.isLoading ||
+    bySkillTag.isLoading ||
+    trend.isLoading ||
+    weaknesses.isLoading ||
+    timeAnalytics.isLoading;
+
+  return {
+    overview,
+    byExamType,
+    bySectionType,
+    byFormat,
+    bySkillTag,
+    trend,
+    weaknesses,
+    timeAnalytics,
+    isLoading,
+  };
+}

apps/web/src/hooks/use-test-session.ts

@@ -1,8 +1,29 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 import { useMutation } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
 import { trpc } from "@/utils/trpc";
 
+function getTimerKey(attemptId: string | null) {
+  return attemptId ? `labas_attempt_timer_${attemptId}` : null;
+}
+
+function loadElapsedTime(attemptId: string | null): number {
+  const key = getTimerKey(attemptId);
+  if (!key) return 0;
+  const saved = localStorage.getItem(key);
+  return saved ? parseInt(saved, 10) || 0 : 0;
+}
+
+function saveElapsedTime(attemptId: string | null, seconds: number) {
+  const key = getTimerKey(attemptId);
+  if (key) localStorage.setItem(key, String(seconds));
+}
+
+function clearElapsedTime(attemptId: string | null) {
+  const key = getTimerKey(attemptId);
+  if (key) localStorage.removeItem(key);
+}
+
 export function useTestSession(packageId: string) {
   const navigate = useNavigate();
 
@@ -13,24 +34,48 @@ export function useTestSession(packageId: string) {
   const [isStarted, setIsStarted] = useState(false);
   const [isFinished, setIsFinished] = useState(false);
   const [submittingQId, setSubmittingQId] = useState<string | null>(null);
+  const [markedQuestions, setMarkedQuestions] = useState<Set<string>>(new Set());
+  const [startError, setStartError] = useState<string | null>(null);
+
+  // Track when each question was first viewed (for timeSpentSec)
+  const questionStartTimes = useRef<Record<string, number>>({});
 
   const startMutation = useMutation(trpc.attempt.start.mutationOptions());
   const submitMutation = useMutation(trpc.attempt.submitAnswer.mutationOptions());
   const finishMutation = useMutation(trpc.attempt.finish.mutationOptions());
+  const abandonMutation = useMutation(trpc.attempt.abandon.mutationOptions());
 
-  // Timer
+  // Timer with localStorage persistence
   useEffect(() => {
-    if (!isStarted || isFinished) return;
+    if (!isStarted || isFinished || !attemptId) return;
     const interval = setInterval(() => {
-      setTimeElapsed((t) => t + 1);
+      setTimeElapsed((t) => {
+        const next = t + 1;
+        saveElapsedTime(attemptId, next);
+        return next;
+      });
     }, 1000);
     return () => clearInterval(interval);
-  }, [isStarted, isFinished]);
+  }, [isStarted, isFinished, attemptId]);
 
   const handleStart = useCallback(async () => {
-    const res = await startMutation.mutateAsync({ packageId });
-    setAttemptId(res.attemptId);
-    setIsStarted(true);
+    setStartError(null);
+    console.log("[useTestSession] handleStart called, packageId:", packageId);
+    try {
+      const res = await startMutation.mutateAsync({ packageId });
+      console.log("[useTestSession] start mutation result:", res);
+      if (!res?.attemptId) {
+        throw new Error("Server tidak mengembalikan attempt ID.");
+      }
+      setAttemptId(res.attemptId);
+      setIsStarted(true);
+      // Load any saved timer (in case of refresh during attempt)
+      const saved = loadElapsedTime(res.attemptId);
+      if (saved > 0) setTimeElapsed(saved);
+    } catch (err: any) {
+      console.error("[useTestSession] Start attempt failed:", err);
+      setStartError(err.message ?? "Gagal memulai latihan. Coba lagi.");
+    }
   }, [packageId, startMutation]);
 
   const handleAnswerChange = useCallback(
@@ -38,12 +83,23 @@ export function useTestSession(packageId: string) {
       if (!attemptId || isFinished) return;
       setAnswers((prev) => ({ ...prev, [questionId]: value }));
       setSubmittingQId(questionId);
+
+      // Start timer if first interaction
+      if (!questionStartTimes.current[questionId]) {
+        questionStartTimes.current[questionId] = Date.now();
+      }
+
+      // Calculate time spent on this question
+      const startTime = questionStartTimes.current[questionId];
+      const timeSpentSec = startTime ? Math.round((Date.now() - startTime) / 1000) : undefined;
+
       try {
         await submitMutation.mutateAsync({
           attemptId,
           sectionResultId,
           questionId,
           userAnswer: value,
+          timeSpentSec,
         });
       } finally {
         setSubmittingQId(null);
@@ -56,9 +112,33 @@ export function useTestSession(packageId: string) {
     if (!attemptId) return;
     setIsFinished(true);
     await finishMutation.mutateAsync({ attemptId });
+    clearElapsedTime(attemptId);
     navigate({ to: "/attempt/$id", params: { id: attemptId } });
   }, [attemptId, finishMutation, navigate]);
 
+  const handleAbandon = useCallback(async () => {
+    if (!attemptId) return;
+    await abandonMutation.mutateAsync({ attemptId });
+    clearElapsedTime(attemptId);
+    navigate({ to: "/packages" });
+  }, [attemptId, abandonMutation, navigate]);
+
+  const toggleMarkQuestion = useCallback((questionId: string) => {
+    setMarkedQuestions((prev) => {
+      const next = new Set(prev);
+      if (next.has(questionId)) next.delete(questionId);
+      else next.add(questionId);
+      return next;
+    });
+  }, []);
+
+  // Track question start time when user navigates to a question
+  const startQuestionTimer = useCallback((questionId: string) => {
+    if (!questionStartTimes.current[questionId]) {
+      questionStartTimes.current[questionId] = Date.now();
+    }
+  }, []);
+
   return {
     attemptId,
     currentSectionIdx,
@@ -68,9 +148,14 @@ export function useTestSession(packageId: string) {
     isStarted,
     isFinished,
     submittingQId,
+    markedQuestions,
     startPending: startMutation.isPending,
+    startError,
     handleStart,
     handleAnswerChange,
     handleFinish,
+    handleAbandon,
+    toggleMarkQuestion,
+    startQuestionTimer,
   };
 }

apps/web/src/routeTree.gen.ts

@@ -15,10 +15,12 @@ import { Route as LoginRouteImport } from './routes/login'
 import { Route as JobsRouteImport } from './routes/jobs'
 import { Route as GenerateRouteImport } from './routes/generate'
 import { Route as BankRouteImport } from './routes/bank'
+import { Route as AnalyticsRouteImport } from './routes/analytics'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as PackageIdRouteImport } from './routes/package.$id'
 import { Route as BuilderComboRouteImport } from './routes/builder.combo'
 import { Route as AttemptIdRouteImport } from './routes/attempt.$id'
+import { Route as PackageIdIndexRouteImport } from './routes/package.$id.index'
 import { Route as PackageIdTakeRouteImport } from './routes/package.$id.take'
 
 const SettingsRoute = SettingsRouteImport.update({
@@ -51,6 +53,11 @@ const BankRoute = BankRouteImport.update({
   path: '/bank',
   getParentRoute: () => rootRouteImport,
 } as any)
+const AnalyticsRoute = AnalyticsRouteImport.update({
+  id: '/analytics',
+  path: '/analytics',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
@@ -71,6 +78,11 @@ const AttemptIdRoute = AttemptIdRouteImport.update({
   path: '/attempt/$id',
   getParentRoute: () => rootRouteImport,
 } as any)
+const PackageIdIndexRoute = PackageIdIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => PackageIdRoute,
+} as any)
 const PackageIdTakeRoute = PackageIdTakeRouteImport.update({
   id: '/take',
   path: '/take',
@@ -79,6 +91,7 @@ const PackageIdTakeRoute = PackageIdTakeRouteImport.update({
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '/analytics': typeof AnalyticsRoute
   '/bank': typeof BankRoute
   '/generate': typeof GenerateRoute
   '/jobs': typeof JobsRoute
@@ -89,9 +102,11 @@ export interface FileRoutesByFullPath {
   '/builder/combo': typeof BuilderComboRoute
   '/package/$id': typeof PackageIdRouteWithChildren
   '/package/$id/take': typeof PackageIdTakeRoute
+  '/package/$id/': typeof PackageIdIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/analytics': typeof AnalyticsRoute
   '/bank': typeof BankRoute
   '/generate': typeof GenerateRoute
   '/jobs': typeof JobsRoute
@@ -100,12 +115,13 @@ export interface FileRoutesByTo {
   '/settings': typeof SettingsRoute
   '/attempt/$id': typeof AttemptIdRoute
   '/builder/combo': typeof BuilderComboRoute
-  '/package/$id': typeof PackageIdRouteWithChildren
   '/package/$id/take': typeof PackageIdTakeRoute
+  '/package/$id': typeof PackageIdIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
+  '/analytics': typeof AnalyticsRoute
   '/bank': typeof BankRoute
   '/generate': typeof GenerateRoute
   '/jobs': typeof JobsRoute
@@ -116,11 +132,13 @@ export interface FileRoutesById {
   '/builder/combo': typeof BuilderComboRoute
   '/package/$id': typeof PackageIdRouteWithChildren
   '/package/$id/take': typeof PackageIdTakeRoute
+  '/package/$id/': typeof PackageIdIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | '/'
+    | '/analytics'
     | '/bank'
     | '/generate'
     | '/jobs'
@@ -131,9 +149,11 @@ export interface FileRouteTypes {
     | '/builder/combo'
     | '/package/$id'
     | '/package/$id/take'
+    | '/package/$id/'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
+    | '/analytics'
     | '/bank'
     | '/generate'
     | '/jobs'
@@ -142,11 +162,12 @@ export interface FileRouteTypes {
     | '/settings'
     | '/attempt/$id'
     | '/builder/combo'
-    | '/package/$id'
     | '/package/$id/take'
+    | '/package/$id'
   id:
     | '__root__'
     | '/'
+    | '/analytics'
     | '/bank'
     | '/generate'
     | '/jobs'
@@ -157,10 +178,12 @@ export interface FileRouteTypes {
     | '/builder/combo'
     | '/package/$id'
     | '/package/$id/take'
+    | '/package/$id/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  AnalyticsRoute: typeof AnalyticsRoute
   BankRoute: typeof BankRoute
   GenerateRoute: typeof GenerateRoute
   JobsRoute: typeof JobsRoute
@@ -216,6 +239,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof BankRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/analytics': {
+      id: '/analytics'
+      path: '/analytics'
+      fullPath: '/analytics'
+      preLoaderRoute: typeof AnalyticsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/': {
       id: '/'
       path: '/'
@@ -244,6 +274,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AttemptIdRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/package/$id/': {
+      id: '/package/$id/'
+      path: '/'
+      fullPath: '/package/$id/'
+      preLoaderRoute: typeof PackageIdIndexRouteImport
+      parentRoute: typeof PackageIdRoute
+    }
     '/package/$id/take': {
       id: '/package/$id/take'
       path: '/take'
@@ -256,10 +293,12 @@ declare module '@tanstack/react-router' {
 
 interface PackageIdRouteChildren {
   PackageIdTakeRoute: typeof PackageIdTakeRoute
+  PackageIdIndexRoute: typeof PackageIdIndexRoute
 }
 
 const PackageIdRouteChildren: PackageIdRouteChildren = {
   PackageIdTakeRoute: PackageIdTakeRoute,
+  PackageIdIndexRoute: PackageIdIndexRoute,
 }
 
 const PackageIdRouteWithChildren = PackageIdRoute._addFileChildren(
@@ -268,6 +307,7 @@ const PackageIdRouteWithChildren = PackageIdRoute._addFileChildren(
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  AnalyticsRoute: AnalyticsRoute,
   BankRoute: BankRoute,
   GenerateRoute: GenerateRoute,
   JobsRoute: JobsRoute,

apps/web/src/routes/__root.tsx

@@ -1,7 +1,7 @@
 import { Toaster } from "@labas/ui/components/sonner";
 import type { QueryClient } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { HeadContent, Outlet, createRootRouteWithContext } from "@tanstack/react-router";
+import { HeadContent, Outlet, createRootRouteWithContext, useRouterState } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 
 import { Sidebar } from "@/components/sidebar";
@@ -32,6 +32,8 @@ export const Route = createRootRouteWithContext<RouterAppContext>()({
 
 function RootComponent() {
   const { collapsed } = useSidebar();
+  const matches = useRouterState({ select: (s) => s.matches });
+  const isFullScreen = matches.some((m) => m.routeId === "/package/$id/take");
 
   return (
     <>
@@ -43,14 +45,20 @@ function RootComponent() {
         disableTransitionOnChange
         storageKey="labas-theme"
       >
-        <div className="min-h-screen bg-background relative">
-          <Sidebar />
-          <main
-            className={`min-h-screen transition-all duration-300 relative z-0 ${collapsed ? "md:ml-16" : "md:ml-64"}`}
-          >
+        {isFullScreen ? (
+          <div className="h-screen bg-background text-on-surface flex flex-col overflow-hidden relative">
             <Outlet />
-          </main>
-        </div>
+          </div>
+        ) : (
+          <div className="min-h-screen bg-background relative">
+            <Sidebar />
+            <main
+              className={`min-h-screen transition-all duration-300 relative z-0 ${collapsed ? "md:ml-16" : "md:ml-64"}`}
+            >
+              <Outlet />
+            </main>
+          </div>
+        )}
         <Toaster richColors />
       </ThemeProvider>
       <TanStackRouterDevtools position="bottom-left" />

apps/web/src/routes/analytics.tsx

@@ -0,0 +1,108 @@
+import { createFileRoute, redirect, Link } from "@tanstack/react-router";
+import { authClient } from "@/lib/auth-client";
+import { useAnalytics } from "@/hooks/use-analytics";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { OverviewCards } from "@/components/analytics/OverviewCards";
+import { ScoreTrendChart } from "@/components/analytics/ScoreTrendChart";
+import { BreakdownCharts } from "@/components/analytics/BreakdownCharts";
+import { WeaknessPanel } from "@/components/analytics/WeaknessPanel";
+import { TimeAnalyticsPanel } from "@/components/analytics/TimeAnalyticsPanel";
+
+export const Route = createFileRoute("/analytics")({
+  component: AnalyticsComponent,
+  beforeLoad: async () => {
+    const session = await authClient.getSession();
+    if (!session.data) {
+      redirect({ to: "/login", throw: true });
+    }
+    return { session };
+  },
+});
+
+function AnalyticsComponent() {
+  const {
+    overview,
+    byExamType,
+    bySectionType,
+    byFormat,
+    trend,
+    weaknesses,
+    timeAnalytics,
+    isLoading,
+  } = useAnalytics();
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-7xl mx-auto bg-[var(--warm-cream)]">
+        <div className="h-8 w-64 bg-[var(--oat-light)] animate-pulse rounded mb-8" />
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-8">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div key={i} className="h-28 bg-[var(--oat-light)] animate-pulse rounded-[var(--radius-xl)]" />
+          ))}
+        </div>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <div className="h-80 bg-[var(--oat-light)] animate-pulse rounded-[var(--radius-xl)]" />
+          <div className="h-80 bg-[var(--oat-light)] animate-pulse rounded-[var(--radius-xl)]" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-7xl mx-auto bg-[var(--warm-cream)]">
+      {/* Header */}
+      <div className="mb-8">
+        <div className="flex items-center gap-2 text-sm text-[var(--warm-charcoal)] mb-4">
+          <Link to="/" className="hover:text-[var(--clay-black)] transition-colors">
+            Beranda
+          </Link>
+          <MaterialIcon name="chevron_right" className="text-xs" />
+          <span className="text-[var(--clay-black)] font-medium">Analitik</span>
+        </div>
+
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-4xl font-headline font-extrabold text-[var(--clay-black)] tracking-tight">
+              Analitik
+            </h1>
+            <p className="text-lg text-[var(--warm-charcoal)] mt-2">
+              Pantau perkembangan dan identifikasi area untuk ditingkatkan.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Overview */}
+      <div className="mb-8">
+        <OverviewCards data={overview.data} />
+      </div>
+
+      {/* Score Trend */}
+      <div className="mb-8">
+        <ScoreTrendChart data={trend.data} />
+      </div>
+
+      {/* Breakdown Charts */}
+      <div className="mb-8">
+        <BreakdownCharts
+          byExamType={byExamType.data}
+          bySectionType={bySectionType.data}
+          byFormat={byFormat.data}
+        />
+      </div>
+
+      {/* Weaknesses + Time Analytics */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <WeaknessPanel
+          weaknesses={weaknesses.data?.weaknesses}
+          recommendations={weaknesses.data?.recommendations}
+        />
+        <TimeAnalyticsPanel
+          sectionTime={timeAnalytics.data?.sectionTime}
+          formatTimeData={timeAnalytics.data?.formatTime}
+          timeTrend={timeAnalytics.data?.timeTrend}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -137,6 +137,12 @@ function AttemptResultComponent() {
                       <p className="text-sm text-[var(--warm-charcoal)]">
                         {sec.score ?? 0}/{sec.maxScore ?? 0} benar
                       </p>
+                      {sec.timeSpentSec !== null && sec.timeSpentSec !== undefined && (
+                        <p className="text-xs text-[var(--warm-silver)] mt-1 flex items-center gap-1">
+                          <MaterialIcon name="timer" className="text-xs" />
+                          {formatTime(sec.timeSpentSec)}
+                        </p>
+                      )}
                     </div>
                     <div className="w-16 h-16 rounded-full border-2 border-[var(--matcha-400)] flex items-center justify-center bg-[var(--matcha-50)]">
                       <span className="text-lg font-bold text-[var(--matcha-700)]">{secPct}%</span>
@@ -217,6 +223,12 @@ function AttemptResultComponent() {
                             </span>
                           </div>
                         )}
+                        {ans?.timeSpentSec !== null && ans?.timeSpentSec !== undefined && (
+                          <div className="flex items-center gap-1 text-[var(--warm-silver)]">
+                            <MaterialIcon name="timer" className="text-xs" />
+                            <span>{formatTime(ans.timeSpentSec)}</span>
+                          </div>
+                        )}
                       </div>
 
                       {q.explanation && (

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

@@ -0,0 +1,188 @@
+import { useQuery } from "@tanstack/react-query";
+import { createFileRoute, redirect, Link } from "@tanstack/react-router";
+import { authClient } from "@/lib/auth-client";
+import { trpc } from "@/utils/trpc";
+import { Button } from "@labas/ui/components/button";
+import { Card, CardContent } from "@labas/ui/components/card";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { formatLabel } from "@/lib/format";
+
+export const Route = createFileRoute("/package/$id/")({
+  component: PackageDetailComponent,
+  beforeLoad: async () => {
+    const session = await authClient.getSession();
+    if (!session.data) {
+      redirect({ to: "/login", throw: true });
+    }
+    return { session };
+  },
+});
+
+function PackageDetailComponent() {
+  const { id } = Route.useParams();
+  const { data: session } = authClient.useSession();
+
+  const packageQuery = useQuery(trpc.package.getById.queryOptions({ id }));
+
+  const pkg = packageQuery.data;
+
+  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)]">
+        <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="/bank" className="text-[var(--matcha-600)] font-semibold mt-4 inline-block">
+            Kembali ke Bank Soal
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  const isOwner = pkg.creatorUserId === session?.user.id;
+  const totalQuestions = pkg.sections.reduce((sum, sec) => sum + sec.questions.length, 0);
+
+  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)]">
+      {/* Breadcrumb */}
+      <div className="flex items-center gap-2 text-sm text-[var(--warm-charcoal)] mb-6">
+        <Link to="/bank" className="hover:text-[var(--clay-black)] transition-colors">Bank Soal</Link>
+        <MaterialIcon name="chevron_right" className="text-xs" />
+        <span className="text-[var(--clay-black)] font-medium">Detail Paket</span>
+      </div>
+
+      {/* Header */}
+      <div className="mb-8">
+        <div className="flex flex-wrap items-start justify-between gap-4 mb-4">
+          <div>
+            <h1 className="text-3xl font-headline font-extrabold text-[var(--clay-black)] tracking-tight">
+              {pkg.title}
+            </h1>
+            {pkg.description && (
+              <p className="text-[var(--warm-charcoal)] mt-2">{pkg.description}</p>
+            )}
+          </div>
+          <div className="flex gap-2">
+            <span className="px-3 py-1.5 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-sm font-semibold">
+              {pkg.examTypeName}
+            </span>
+            {pkg.isPublic ? (
+              <span className="px-3 py-1.5 rounded-full bg-[var(--slushie-500)]/20 text-[var(--slushie-800)] text-sm font-semibold">
+                Publik
+              </span>
+            ) : (
+              <span className="px-3 py-1.5 rounded-full bg-[var(--oat-light)] text-[var(--warm-charcoal)] text-sm font-semibold">
+                Privat
+              </span>
+            )}
+          </div>
+        </div>
+
+        <div className="flex flex-wrap gap-4 text-sm text-[var(--warm-charcoal)]">
+          <span className="flex items-center gap-1">
+            <MaterialIcon name="person" className="text-sm" />
+            {pkg.creatorName ?? "Anonim"}
+          </span>
+          <span className="flex items-center gap-1">
+            <MaterialIcon name="quiz" className="text-sm" />
+            {totalQuestions} soal
+          </span>
+          <span className="flex items-center gap-1">
+            <MaterialIcon name="folder" className="text-sm" />
+            {pkg.totalSections} section
+          </span>
+          {pkg.estimatedDurationMin && (
+            <span className="flex items-center gap-1">
+              <MaterialIcon name="timer" className="text-sm" />
+              {pkg.estimatedDurationMin} menit
+            </span>
+          )}
+          <span className="flex items-center gap-1">
+            <MaterialIcon name="trending_up" className="text-sm" />
+            {pkg.usageCount}x digunakan
+          </span>
+        </div>
+      </div>
+
+      {/* Sections */}
+      <div className="space-y-6">
+        {pkg.sections.map((section) => (
+          <Card key={section.id} className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+            <CardContent className="p-6">
+              <div className="flex items-center gap-3 mb-4 pb-4 border-b border-[var(--oat-border)]">
+                <MaterialIcon name="folder_open" className="text-[var(--matcha-600)]" />
+                <h2 className="font-headline text-lg font-bold text-[var(--clay-black)]">
+                  {section.title}
+                </h2>
+                <span className="px-2 py-0.5 rounded-full bg-[var(--oat-light)] text-[var(--warm-charcoal)] text-xs font-semibold ml-auto">
+                  {section.sectionTypeName}
+                </span>
+              </div>
+
+              {section.questions.length === 0 ? (
+                <p className="text-sm text-[var(--warm-silver)] text-center py-4">Belum ada soal di section ini</p>
+              ) : (
+                <div className="space-y-3">
+                  {section.questions.map((q: any, idx: number) => (
+                    <div
+                      key={q.id}
+                      className="block p-4 rounded-[var(--radius-lg)] bg-[var(--oat-light)] hover:bg-[var(--matcha-300)]/10 transition-colors"
+                    >
+                      <div className="flex items-start gap-3">
+                        <span className="w-6 h-6 rounded-full bg-[var(--clay-black)] text-[var(--pure-white)] text-xs flex items-center justify-center font-bold shrink-0 mt-0.5">
+                          {idx + 1}
+                        </span>
+                        <div className="flex-1 min-w-0">
+                          <p className="text-sm font-medium text-[var(--clay-black)] line-clamp-2">
+                            {q.questionText}
+                          </p>
+                          <div className="flex gap-2 mt-2">
+                            <span className="px-2 py-0.5 rounded bg-[var(--pure-white)] text-[var(--warm-charcoal)] text-xs">
+                              {formatLabel(q.format)}
+                            </span>
+                            <span className="px-2 py-0.5 rounded bg-[var(--pure-white)] text-[var(--warm-charcoal)] text-xs">
+                              Lv.{q.difficulty}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {/* Actions */}
+      <div className="flex gap-3 mt-8">
+        <Link to="/package/$id/take" params={{ id }}>
+          <Button className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)]">
+            <MaterialIcon name="play_arrow" />
+            <span className="ml-2">Mulai Latihan</span>
+          </Button>
+        </Link>
+        {isOwner && (
+          <Button
+            variant="outline"
+            className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
+          >
+            <MaterialIcon name="edit" />
+            <span className="ml-2">Edit Paket</span>
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -35,10 +35,15 @@ function TakeTestComponent() {
     isStarted,
     isFinished,
     submittingQId,
+    markedQuestions,
     startPending,
+    startError,
     handleStart,
     handleAnswerChange,
     handleFinish,
+    handleAbandon,
+    toggleMarkQuestion,
+    startQuestionTimer,
   } = useTestSession(packageId);
 
   if (packageQuery.isLoading) {
@@ -112,6 +117,12 @@ function TakeTestComponent() {
             </CardContent>
           </Card>
 
+          {startError && (
+            <div className="mb-4 p-4 rounded-[var(--radius-md)] bg-[var(--pomegranate-400)]/10 border-2 border-[var(--pomegranate-400)]/30 text-sm text-[var(--pomegranate-600)]">
+              {startError}
+            </div>
+          )}
+
           <Button
             onClick={handleStart}
             disabled={startPending}
@@ -125,6 +136,17 @@ function TakeTestComponent() {
     );
   }
 
+  if (!attemptId) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-[var(--warm-cream)]">
+        <div className="text-center">
+          <div className="h-8 w-8 border-2 border-[var(--matcha-600)] border-t-transparent rounded-full animate-spin mx-auto mb-4" />
+          <p className="text-[var(--warm-charcoal)]">Menyiapkan latihan...</p>
+        </div>
+      </div>
+    );
+  }
+
   const currentSection = pkg.sections[currentSectionIdx];
   if (!currentSection) {
     return (
@@ -142,7 +164,7 @@ function TakeTestComponent() {
 
   return (
     <AttemptTestView
-      attemptId={attemptId!}
+      attemptId={attemptId}
       pkg={pkg}
       currentSectionIdx={currentSectionIdx}
       setCurrentSectionIdx={setCurrentSectionIdx}
@@ -152,8 +174,12 @@ function TakeTestComponent() {
       answeredCount={answeredCount}
       totalQuestions={totalQuestions}
       onFinish={handleFinish}
+      onAbandon={handleAbandon}
       isFinished={isFinished}
       submittingQId={submittingQId}
+      markedQuestions={markedQuestions}
+      toggleMarkQuestion={toggleMarkQuestion}
+      startQuestionTimer={startQuestionTimer}
     />
   );
 }

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

@@ -1,188 +1,5 @@
-import { useQuery } from "@tanstack/react-query";
-import { createFileRoute, redirect, Link } from "@tanstack/react-router";
-import { authClient } from "@/lib/auth-client";
-import { trpc } from "@/utils/trpc";
-import { Button } from "@labas/ui/components/button";
-import { Card, CardContent } from "@labas/ui/components/card";
-import { MaterialIcon } from "@/components/ui/MaterialIcon";
-import { formatLabel } from "@/lib/format";
+import { createFileRoute, Outlet } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/package/$id")({
-  component: PackageDetailComponent,
-  beforeLoad: async () => {
-    const session = await authClient.getSession();
-    if (!session.data) {
-      redirect({ to: "/login", throw: true });
-    }
-    return { session };
-  },
+  component: () => <Outlet />,
 });
-
-function PackageDetailComponent() {
-  const { id } = Route.useParams();
-  const { data: session } = authClient.useSession();
-
-  const packageQuery = useQuery(trpc.package.getById.queryOptions({ id }));
-
-  const pkg = packageQuery.data;
-
-  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)]">
-        <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="/bank" className="text-[var(--matcha-600)] font-semibold mt-4 inline-block">
-            Kembali ke Bank Soal
-          </Link>
-        </div>
-      </div>
-    );
-  }
-
-  const isOwner = pkg.creatorUserId === session?.user.id;
-  const totalQuestions = pkg.sections.reduce((sum, sec) => sum + sec.questions.length, 0);
-
-  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)]">
-      {/* Breadcrumb */}
-      <div className="flex items-center gap-2 text-sm text-[var(--warm-charcoal)] mb-6">
-        <Link to="/bank" className="hover:text-[var(--clay-black)] transition-colors">Bank Soal</Link>
-        <MaterialIcon name="chevron_right" className="text-xs" />
-        <span className="text-[var(--clay-black)] font-medium">Detail Paket</span>
-      </div>
-
-      {/* Header */}
-      <div className="mb-8">
-        <div className="flex flex-wrap items-start justify-between gap-4 mb-4">
-          <div>
-            <h1 className="text-3xl font-headline font-extrabold text-[var(--clay-black)] tracking-tight">
-              {pkg.title}
-            </h1>
-            {pkg.description && (
-              <p className="text-[var(--warm-charcoal)] mt-2">{pkg.description}</p>
-            )}
-          </div>
-          <div className="flex gap-2">
-            <span className="px-3 py-1.5 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-sm font-semibold">
-              {pkg.examTypeName}
-            </span>
-            {pkg.isPublic ? (
-              <span className="px-3 py-1.5 rounded-full bg-[var(--slushie-500)]/20 text-[var(--slushie-800)] text-sm font-semibold">
-                Publik
-              </span>
-            ) : (
-              <span className="px-3 py-1.5 rounded-full bg-[var(--oat-light)] text-[var(--warm-charcoal)] text-sm font-semibold">
-                Privat
-              </span>
-            )}
-          </div>
-        </div>
-
-        <div className="flex flex-wrap gap-4 text-sm text-[var(--warm-charcoal)]">
-          <span className="flex items-center gap-1">
-            <MaterialIcon name="person" className="text-sm" />
-            {pkg.creatorName ?? "Anonim"}
-          </span>
-          <span className="flex items-center gap-1">
-            <MaterialIcon name="quiz" className="text-sm" />
-            {totalQuestions} soal
-          </span>
-          <span className="flex items-center gap-1">
-            <MaterialIcon name="folder" className="text-sm" />
-            {pkg.totalSections} section
-          </span>
-          {pkg.estimatedDurationMin && (
-            <span className="flex items-center gap-1">
-              <MaterialIcon name="timer" className="text-sm" />
-              {pkg.estimatedDurationMin} menit
-            </span>
-          )}
-          <span className="flex items-center gap-1">
-            <MaterialIcon name="trending_up" className="text-sm" />
-            {pkg.usageCount}x digunakan
-          </span>
-        </div>
-      </div>
-
-      {/* Sections */}
-      <div className="space-y-6">
-        {pkg.sections.map((section) => (
-          <Card key={section.id} className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
-            <CardContent className="p-6">
-              <div className="flex items-center gap-3 mb-4 pb-4 border-b border-[var(--oat-border)]">
-                <MaterialIcon name="folder_open" className="text-[var(--matcha-600)]" />
-                <h2 className="font-headline text-lg font-bold text-[var(--clay-black)]">
-                  {section.title}
-                </h2>
-                <span className="px-2 py-0.5 rounded-full bg-[var(--oat-light)] text-[var(--warm-charcoal)] text-xs font-semibold ml-auto">
-                  {section.sectionTypeName}
-                </span>
-              </div>
-
-              {section.questions.length === 0 ? (
-                <p className="text-sm text-[var(--warm-silver)] text-center py-4">Belum ada soal di section ini</p>
-              ) : (
-                <div className="space-y-3">
-                  {section.questions.map((q: any, idx: number) => (
-                    <div
-                      key={q.id}
-                      className="block p-4 rounded-[var(--radius-lg)] bg-[var(--oat-light)] hover:bg-[var(--matcha-300)]/10 transition-colors"
-                    >
-                      <div className="flex items-start gap-3">
-                        <span className="w-6 h-6 rounded-full bg-[var(--clay-black)] text-[var(--pure-white)] text-xs flex items-center justify-center font-bold shrink-0 mt-0.5">
-                          {idx + 1}
-                        </span>
-                        <div className="flex-1 min-w-0">
-                          <p className="text-sm font-medium text-[var(--clay-black)] line-clamp-2">
-                            {q.questionText}
-                          </p>
-                          <div className="flex gap-2 mt-2">
-                            <span className="px-2 py-0.5 rounded bg-[var(--pure-white)] text-[var(--warm-charcoal)] text-xs">
-                              {formatLabel(q.format)}
-                            </span>
-                            <span className="px-2 py-0.5 rounded bg-[var(--pure-white)] text-[var(--warm-charcoal)] text-xs">
-                              Lv.{q.difficulty}
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-
-      {/* Actions */}
-      <div className="flex gap-3 mt-8">
-        <Link to="/package/$id/take" params={{ id }}>
-          <Button className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)]">
-            <MaterialIcon name="play_arrow" />
-            <span className="ml-2">Mulai Latihan</span>
-          </Button>
-        </Link>
-        {isOwner && (
-          <Button
-            variant="outline"
-            className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
-          >
-            <MaterialIcon name="edit" />
-            <span className="ml-2">Edit Paket</span>
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-}

apps/web/src/routes/packages.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { createFileRoute, redirect, Link } from "@tanstack/react-router";
+import { createFileRoute, redirect, Link, useNavigate } from "@tanstack/react-router";
 import { authClient } from "@/lib/auth-client";
 import { trpc } from "@/utils/trpc";
 import { Input } from "@labas/ui/components/input";
@@ -36,6 +36,7 @@ const EXAM_TYPES = [
 ];
 
 function PackagesComponent() {
+  const navigate = useNavigate();
   const [search, setSearch] = useState("");
   const [examType, setExamType] = useState<string>("");
   const [page, setPage] = useState(0);
@@ -126,9 +127,9 @@ function PackagesComponent() {
         <>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             {packages.map((pkg) => (
-              <Link key={pkg.id} to="/package/$id" params={{ id: pkg.id }} className="block">
-                <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] h-full flex flex-col">
-                  <CardContent className="p-5 flex flex-col h-full">
+              <Card key={pkg.id} className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] h-full flex flex-col">
+                <CardContent className="p-5 flex flex-col h-full">
+                  <Link to="/package/$id" params={{ id: pkg.id }} className="block flex-1">
                     <div className="flex items-start justify-between mb-3">
                       <span className="px-2.5 py-1 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-xs font-semibold">
                         {pkg.examTypeName}
@@ -146,7 +147,7 @@ function PackagesComponent() {
                     </h3>
 
                     {pkg.description && (
-                      <p className="text-sm text-[var(--warm-charcoal)] line-clamp-2 mb-4 flex-1">
+                      <p className="text-sm text-[var(--warm-charcoal)] line-clamp-2 mb-4">
                         {pkg.description}
                       </p>
                     )}
@@ -172,9 +173,19 @@ function PackagesComponent() {
                         {pkg.usageCount}x digunakan
                       </span>
                     </div>
-                  </CardContent>
-                </Card>
-              </Link>
+                  </Link>
+
+                  <div className="mt-4 pt-3 border-t border-[var(--oat-border)]">
+                    <Button
+                      className="w-full bg-[var(--matcha-600)] text-[var(--pure-white)] hover:bg-[var(--matcha-800)] clay-hover rounded-[var(--radius-lg)]"
+                      onClick={() => navigate({ to: '/package/$id/take', params: { id: pkg.id } })}
+                    >
+                      <MaterialIcon name="play_arrow" className="mr-2" />
+                      Mulai Latihan
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
             ))}
           </div>
 

bun.lock

@@ -61,6 +61,7 @@
         "next-themes": "catalog:",
         "react": "^19.2.5",
         "react-dom": "^19.2.5",
+        "recharts": "^3.8.1",
         "sonner": "^2.0.7",
         "vite-plugin-pwa": "^1.2.0",
         "zod": "catalog:",
@@ -621,6 +622,8 @@
 
     "@quansync/fs": ["@quansync/fs@1.0.0", "", { "dependencies": { "quansync": "^1.0.0" } }, "sha512-4TJ3DFtlf1L5LDMaM6CanJ/0lckGNtJcMjQ1NAV6zDmA0tEHKZtxNKin8EgPaVX1YzljbxckyT2tJrpQKAtngQ=="],
 
+    "@reduxjs/toolkit": ["@reduxjs/toolkit@2.11.2", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "@standard-schema/utils": "^0.3.0", "immer": "^11.0.0", "redux": "^5.0.1", "redux-thunk": "^3.1.0", "reselect": "^5.1.0" }, "peerDependencies": { "react": "^16.9.0 || ^17.0.0 || ^18 || ^19", "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0" }, "optionalPeers": ["react", "react-redux"] }, "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ=="],
+
     "@rolldown/binding-android-arm64": ["@rolldown/binding-android-arm64@1.0.0-rc.17", "", { "os": "android", "cpu": "arm64" }, "sha512-s70pVGhw4zqGeFnXWvAzJDlvxhlRollagdCCKRgOsgUOH3N1l0LIxf83AtGzmb5SiVM4Hjl5HyarMRfdfj3DaQ=="],
 
     "@rolldown/binding-darwin-arm64": ["@rolldown/binding-darwin-arm64@1.0.0-rc.17", "", { "os": "darwin", "cpu": "arm64" }, "sha512-4ksWc9n0mhlZpZ9PMZgTGjeOPRu8MB1Z3Tz0Mo02eWfWCHMW1zN82Qz/pL/rC+yQa+8ZnutMF0JjJe7PjwasYw=="],
@@ -769,6 +772,24 @@
 
     "@types/bun": ["@types/bun@1.3.13", "", { "dependencies": { "bun-types": "1.3.13" } }, "sha512-9fqXWk5YIHGGnUau9TEi+qdlTYDAnOj+xLCmSTwXfAIqXr2x4tytJb43E9uCvt09zJURKXwAtkoH4nLQfzeTXw=="],
 
+    "@types/d3-array": ["@types/d3-array@3.2.2", "", {}, "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw=="],
+
+    "@types/d3-color": ["@types/d3-color@3.1.3", "", {}, "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="],
+
+    "@types/d3-ease": ["@types/d3-ease@3.0.2", "", {}, "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA=="],
+
+    "@types/d3-interpolate": ["@types/d3-interpolate@3.0.4", "", { "dependencies": { "@types/d3-color": "*" } }, "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA=="],
+
+    "@types/d3-path": ["@types/d3-path@3.1.1", "", {}, "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg=="],
+
+    "@types/d3-scale": ["@types/d3-scale@4.0.9", "", { "dependencies": { "@types/d3-time": "*" } }, "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw=="],
+
+    "@types/d3-shape": ["@types/d3-shape@3.1.8", "", { "dependencies": { "@types/d3-path": "*" } }, "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w=="],
+
+    "@types/d3-time": ["@types/d3-time@3.0.4", "", {}, "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g=="],
+
+    "@types/d3-timer": ["@types/d3-timer@3.0.2", "", {}, "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="],
+
     "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
 
     "@types/jsesc": ["@types/jsesc@2.5.1", "", {}, "sha512-9VN+6yxLOPLOav+7PwjZbxiID2bVaeq0ED4qSQmdQTdjnXJSaCVKTR58t15oqH1H5t8Ng2ZX1SabJVoN9Q34bw=="],
@@ -791,6 +812,8 @@
 
     "@types/trusted-types": ["@types/trusted-types@2.0.7", "", {}, "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="],
 
+    "@types/use-sync-external-store": ["@types/use-sync-external-store@0.0.6", "", {}, "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg=="],
+
     "@types/validate-npm-package-name": ["@types/validate-npm-package-name@4.0.2", "", {}, "sha512-lrpDziQipxCEeK5kWxvljWYhUvOiB2A9izZd9B2AFarYAkqZshb4lPbRs7zKEic6eGtH8V/2qJW+dPp9OtF6bw=="],
 
     "@types/webidl-conversions": ["@types/webidl-conversions@7.0.3", "", {}, "sha512-CiJJvcRtIgzadHCYXw7dqEnMNRjhGZlYK05Mj9OyktqV8uVT8fD2BFOB7S1uwBE3Kj2Z+4UyPmFw/Ixgw/LAlA=="],
@@ -953,6 +976,28 @@
 
     "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
 
+    "d3-array": ["d3-array@3.2.4", "", { "dependencies": { "internmap": "1 - 2" } }, "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg=="],
+
+    "d3-color": ["d3-color@3.1.0", "", {}, "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="],
+
+    "d3-ease": ["d3-ease@3.0.1", "", {}, "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="],
+
+    "d3-format": ["d3-format@3.1.2", "", {}, "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg=="],
+
+    "d3-interpolate": ["d3-interpolate@3.0.1", "", { "dependencies": { "d3-color": "1 - 3" } }, "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g=="],
+
+    "d3-path": ["d3-path@3.1.0", "", {}, "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ=="],
+
+    "d3-scale": ["d3-scale@4.0.2", "", { "dependencies": { "d3-array": "2.10.0 - 3", "d3-format": "1 - 3", "d3-interpolate": "1.2.0 - 3", "d3-time": "2.1.1 - 3", "d3-time-format": "2 - 4" } }, "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ=="],
+
+    "d3-shape": ["d3-shape@3.2.0", "", { "dependencies": { "d3-path": "^3.1.0" } }, "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA=="],
+
+    "d3-time": ["d3-time@3.1.0", "", { "dependencies": { "d3-array": "2 - 3" } }, "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q=="],
+
+    "d3-time-format": ["d3-time-format@4.1.0", "", { "dependencies": { "d3-time": "1 - 3" } }, "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg=="],
+
+    "d3-timer": ["d3-timer@3.0.1", "", {}, "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="],
+
     "data-uri-to-buffer": ["data-uri-to-buffer@4.0.1", "", {}, "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A=="],
 
     "data-view-buffer": ["data-view-buffer@1.0.2", "", { "dependencies": { "call-bound": "^1.0.3", "es-errors": "^1.3.0", "is-data-view": "^1.0.2" } }, "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ=="],
@@ -963,6 +1008,8 @@
 
     "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
+    "decimal.js-light": ["decimal.js-light@2.5.1", "", {}, "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="],
+
     "decode-bmp": ["decode-bmp@0.2.1", "", { "dependencies": { "@canvas/image-data": "^1.0.0", "to-data-view": "^1.1.0" } }, "sha512-NiOaGe+GN0KJqi2STf24hfMkFitDUaIoUU3eKvP/wAbLe8o6FuW5n/x7MHPR0HKvBokp6MQY/j7w8lewEeVCIA=="],
 
     "decode-ico": ["decode-ico@0.4.1", "", { "dependencies": { "@canvas/image-data": "^1.0.0", "decode-bmp": "^0.2.0", "to-data-view": "^1.1.0" } }, "sha512-69NZfbKIzux1vBOd31al3XnMnH+2mqDhEgLdpygErm4d60N+UwA5Sq5WFjmEDQzumgB9fElojGwWG0vybVfFmA=="],
@@ -1035,6 +1082,8 @@
 
     "es-to-primitive": ["es-to-primitive@1.3.0", "", { "dependencies": { "is-callable": "^1.2.7", "is-date-object": "^1.0.5", "is-symbol": "^1.0.4" } }, "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g=="],
 
+    "es-toolkit": ["es-toolkit@1.46.0", "", {}, "sha512-IToJ6ct9OLl5zz6WsC/1vZEwfSZ7Myil+ygl5Tf30Xjn9AEkzNB4kqp2G7VUJKF1DtTx/ra5M5KLlXvzOg51BA=="],
+
     "esbuild": ["esbuild@0.25.12", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.25.12", "@esbuild/android-arm": "0.25.12", "@esbuild/android-arm64": "0.25.12", "@esbuild/android-x64": "0.25.12", "@esbuild/darwin-arm64": "0.25.12", "@esbuild/darwin-x64": "0.25.12", "@esbuild/freebsd-arm64": "0.25.12", "@esbuild/freebsd-x64": "0.25.12", "@esbuild/linux-arm": "0.25.12", "@esbuild/linux-arm64": "0.25.12", "@esbuild/linux-ia32": "0.25.12", "@esbuild/linux-loong64": "0.25.12", "@esbuild/linux-mips64el": "0.25.12", "@esbuild/linux-ppc64": "0.25.12", "@esbuild/linux-riscv64": "0.25.12", "@esbuild/linux-s390x": "0.25.12", "@esbuild/linux-x64": "0.25.12", "@esbuild/netbsd-arm64": "0.25.12", "@esbuild/netbsd-x64": "0.25.12", "@esbuild/openbsd-arm64": "0.25.12", "@esbuild/openbsd-x64": "0.25.12", "@esbuild/openharmony-arm64": "0.25.12", "@esbuild/sunos-x64": "0.25.12", "@esbuild/win32-arm64": "0.25.12", "@esbuild/win32-ia32": "0.25.12", "@esbuild/win32-x64": "0.25.12" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg=="],
 
     "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
@@ -1049,6 +1098,8 @@
 
     "etag": ["etag@1.8.1", "", {}, "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg=="],
 
+    "eventemitter3": ["eventemitter3@5.0.4", "", {}, "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw=="],
+
     "eventsource": ["eventsource@3.0.7", "", { "dependencies": { "eventsource-parser": "^3.0.1" } }, "sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA=="],
 
     "eventsource-parser": ["eventsource-parser@3.0.8", "", {}, "sha512-70QWGkr4snxr0OXLRWsFLeRBIRPuQOvt4s8QYjmUlmlkyTZkRqS7EDVRZtzU3TiyDbXSzaOeF0XUKy8PchzukQ=="],
@@ -1185,6 +1236,8 @@
 
     "ignore": ["ignore@5.3.2", "", {}, "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="],
 
+    "immer": ["immer@10.2.0", "", {}, "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw=="],
+
     "import-fresh": ["import-fresh@3.3.1", "", { "dependencies": { "parent-module": "^1.0.0", "resolve-from": "^4.0.0" } }, "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ=="],
 
     "import-without-cache": ["import-without-cache@0.3.3", "", {}, "sha512-bDxwDdF04gm550DfZHgffvlX+9kUlcz32UD0AeBTmVPFiWkrexF2XVmiuFFbDhiFuP8fQkrkvI2KdSNPYWAXkQ=="],
@@ -1193,6 +1246,8 @@
 
     "internal-slot": ["internal-slot@1.1.0", "", { "dependencies": { "es-errors": "^1.3.0", "hasown": "^2.0.2", "side-channel": "^1.1.0" } }, "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw=="],
 
+    "internmap": ["internmap@2.0.3", "", {}, "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="],
+
     "ioredis": ["ioredis@5.10.1", "", { "dependencies": { "@ioredis/commands": "1.5.1", "cluster-key-slot": "^1.1.0", "debug": "^4.3.4", "denque": "^2.1.0", "lodash.defaults": "^4.2.0", "lodash.isarguments": "^3.1.0", "redis-errors": "^1.2.0", "redis-parser": "^3.0.0", "standard-as-callback": "^2.1.0" } }, "sha512-HuEDBTI70aYdx1v6U97SbNx9F1+svQKBDo30o0b9fw055LMepzpOOd0Ccg9Q6tbqmBSJaMuY0fB7yw9/vjBYCA=="],
 
     "ip-address": ["ip-address@10.1.0", "", {}, "sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q=="],
@@ -1553,16 +1608,26 @@
 
     "react-hook-form": ["react-hook-form@7.73.1", "", { "peerDependencies": { "react": "^16.8.0 || ^17 || ^18 || ^19" } }, "sha512-VAfVYOPcx3piiEVQy95vyFmBwbVUsP/AUIN+mpFG8h11yshDd444nn0VyfaGWSRnhOLVgiDu7HIuBtAIzxn9dA=="],
 
+    "react-is": ["react-is@19.2.5", "", {}, "sha512-Dn0t8IQhCmeIT3wu+Apm1/YVsJXsGWi6k4sPdnBIdqMVtHtv0IGi6dcpNpNkNac0zB2uUAqNX3MHzN8c+z2rwQ=="],
+
+    "react-redux": ["react-redux@9.2.0", "", { "dependencies": { "@types/use-sync-external-store": "^0.0.6", "use-sync-external-store": "^1.4.0" }, "peerDependencies": { "@types/react": "^18.2.25 || ^19", "react": "^18.0 || ^19", "redux": "^5.0.0" }, "optionalPeers": ["@types/react", "redux"] }, "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g=="],
+
     "readable-stream": ["readable-stream@3.6.2", "", { "dependencies": { "inherits": "^2.0.3", "string_decoder": "^1.1.1", "util-deprecate": "^1.0.1" } }, "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA=="],
 
     "readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA=="],
 
     "recast": ["recast@0.23.11", "", { "dependencies": { "ast-types": "^0.16.1", "esprima": "~4.0.0", "source-map": "~0.6.1", "tiny-invariant": "^1.3.3", "tslib": "^2.0.1" } }, "sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA=="],
 
+    "recharts": ["recharts@3.8.1", "", { "dependencies": { "@reduxjs/toolkit": "^1.9.0 || 2.x.x", "clsx": "^2.1.1", "decimal.js-light": "^2.5.1", "es-toolkit": "^1.39.3", "eventemitter3": "^5.0.1", "immer": "^10.1.1", "react-redux": "8.x.x || 9.x.x", "reselect": "5.1.1", "tiny-invariant": "^1.3.3", "use-sync-external-store": "^1.2.2", "victory-vendor": "^37.0.2" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-mwzmO1s9sFL0TduUpwndxCUNoXsBw3u3E/0+A+cLcrSfQitSG62L32N69GhqUrrT5qKcAE3pCGVINC6pqkBBQg=="],
+
     "redis-errors": ["redis-errors@1.2.0", "", {}, "sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w=="],
 
     "redis-parser": ["redis-parser@3.0.0", "", { "dependencies": { "redis-errors": "^1.0.0" } }, "sha512-DJnGAeenTdpMEH6uAJRK/uiyEIH9WVsUmoLwzudwGJUwZPp80PDBWPHXSAGNPwNvIXAbe7MSUB1zQFugFml66A=="],
 
+    "redux": ["redux@5.0.1", "", {}, "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="],
+
+    "redux-thunk": ["redux-thunk@3.1.0", "", { "peerDependencies": { "redux": "^5.0.0" } }, "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw=="],
+
     "reflect.getprototypeof": ["reflect.getprototypeof@1.0.10", "", { "dependencies": { "call-bind": "^1.0.8", "define-properties": "^1.2.1", "es-abstract": "^1.23.9", "es-errors": "^1.3.0", "es-object-atoms": "^1.0.0", "get-intrinsic": "^1.2.7", "get-proto": "^1.0.1", "which-builtin-type": "^1.2.1" } }, "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw=="],
 
     "regenerate": ["regenerate@1.4.2", "", {}, "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A=="],
@@ -1833,6 +1898,8 @@
 
     "vary": ["vary@1.1.2", "", {}, "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="],
 
+    "victory-vendor": ["victory-vendor@37.3.6", "", { "dependencies": { "@types/d3-array": "^3.0.3", "@types/d3-ease": "^3.0.0", "@types/d3-interpolate": "^3.0.1", "@types/d3-scale": "^4.0.2", "@types/d3-shape": "^3.1.0", "@types/d3-time": "^3.0.0", "@types/d3-timer": "^3.0.0", "d3-array": "^3.1.6", "d3-ease": "^3.0.1", "d3-interpolate": "^3.0.1", "d3-scale": "^4.0.2", "d3-shape": "^3.1.0", "d3-time": "^3.0.0", "d3-timer": "^3.0.1" } }, "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ=="],
+
     "vite": ["vite@8.0.10", "", { "dependencies": { "lightningcss": "^1.32.0", "picomatch": "^4.0.4", "postcss": "^8.5.10", "rolldown": "1.0.0-rc.17", "tinyglobby": "^0.2.16" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "@vitejs/devtools": "^0.1.0", "esbuild": "^0.27.0 || ^0.28.0", "jiti": ">=1.21.0", "less": "^4.0.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "@vitejs/devtools", "esbuild", "jiti", "less", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-rZuUu9j6J5uotLDs+cAA4O5H4K1SfPliUlQwqa6YEwSrWDZzP4rhm00oJR5snMewjxF5V/K3D4kctsUTsIU9Mw=="],
 
     "vite-plugin-pwa": ["vite-plugin-pwa@1.2.0", "", { "dependencies": { "debug": "^4.3.6", "pretty-bytes": "^6.1.1", "tinyglobby": "^0.2.10", "workbox-build": "^7.4.0", "workbox-window": "^7.4.0" }, "peerDependencies": { "@vite-pwa/assets-generator": "^1.0.0", "vite": "^3.1.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" }, "optionalPeers": ["@vite-pwa/assets-generator"] }, "sha512-a2xld+SJshT9Lgcv8Ji4+srFJL4k/1bVbd1x06JIkvecpQkwkvCncD1+gSzcdm3s+owWLpMJerG3aN5jupJEVw=="],
@@ -1947,6 +2014,8 @@
 
     "@noble/curves/@noble/hashes": ["@noble/hashes@1.8.0", "", {}, "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A=="],
 
+    "@reduxjs/toolkit/immer": ["immer@11.1.4", "", {}, "sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw=="],
+
     "@rollup/plugin-node-resolve/@rollup/pluginutils": ["@rollup/pluginutils@5.3.0", "", { "dependencies": { "@types/estree": "^1.0.0", "estree-walker": "^2.0.2", "picomatch": "^4.0.2" }, "peerDependencies": { "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" }, "optionalPeers": ["rollup"] }, "sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q=="],
 
     "@rollup/plugin-replace/magic-string": ["magic-string@0.25.9", "", { "dependencies": { "sourcemap-codec": "^1.4.8" } }, "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ=="],

packages/api/src/queue.ts

@@ -6,7 +6,7 @@ import { db } from "@labas/db";
 import { generationJob, question, testPackage, packageSection, sectionQuestion } from "@labas/db";
 import { and, eq, notInArray } from "drizzle-orm";
 
-const redisConnection = new IORedis(env.REDIS_URL, { maxRetriesPerRequest: null });
+const connectionOptions = { maxRetriesPerRequest: null };
 
 /** Thrown when the job was cancelled (DB status or cooperative poll). */
 export class GenerationJobCancelledError extends Error {
@@ -93,7 +93,7 @@ export async function cancelGenerationJob(
 }
 
 export const generationQueue = new Queue("generation", {
-  connection: redisConnection,
+  connection: new IORedis(env.REDIS_URL, connectionOptions),
 });
 
 export const generationWorker = new Worker(
@@ -338,7 +338,7 @@ export const generationWorker = new Worker(
     }
   },
   {
-    connection: redisConnection,
+    connection: new IORedis(env.REDIS_URL, connectionOptions),
     concurrency: 2,
   },
 );

packages/api/src/routers/attempt.ts

@@ -331,12 +331,14 @@ export const attemptRouter = router({
 
         const sectionScore = secAnswers.filter((a) => a.isCorrect).length;
         const sectionMax = questionCounts.get(pkgSec.id) ?? secAnswers.length;
+        const sectionTimeSpent = secAnswers.reduce((sum, a) => sum + (a.timeSpentSec ?? 0), 0);
 
         await db
           .update(sectionResult)
           .set({
             score: sectionScore,
             maxScore: sectionMax,
+            timeSpentSec: sectionTimeSpent,
           })
           .where(eq(sectionResult.id, secResult.id));
 
@@ -366,6 +368,54 @@ export const attemptRouter = router({
       };
     }),
 
+  getActiveAttempt: protectedProcedure
+    .input(z.object({ packageId: z.string().uuid() }))
+    .query(async ({ ctx, input }) => {
+      const userId = ctx.session.user.id;
+
+      const [attempt] = await db
+        .select({
+          id: testAttempt.id,
+          status: testAttempt.status,
+          startedAt: testAttempt.startedAt,
+        })
+        .from(testAttempt)
+        .where(
+          and(
+            eq(testAttempt.userId, userId),
+            eq(testAttempt.packageId, input.packageId),
+            eq(testAttempt.status, "in_progress"),
+          ),
+        )
+        .orderBy(desc(testAttempt.createdAt))
+        .limit(1);
+
+      return attempt ?? null;
+    }),
+
+  abandon: protectedProcedure
+    .input(z.object({ attemptId: z.string().uuid() }))
+    .mutation(async ({ ctx, input }) => {
+      const userId = ctx.session.user.id;
+
+      const [attempt] = await db
+        .select()
+        .from(testAttempt)
+        .where(eq(testAttempt.id, input.attemptId))
+        .limit(1);
+
+      if (!attempt) throw new Error("Attempt not found");
+      if (attempt.userId !== userId) throw new Error("Not authorized");
+      if (attempt.status !== "in_progress") throw new Error("Attempt not in progress");
+
+      await db
+        .update(testAttempt)
+        .set({ status: "abandoned" })
+        .where(eq(testAttempt.id, input.attemptId));
+
+      return { success: true };
+    }),
+
   myAttempts: protectedProcedure
     .input(
       z

packages/api/src/routers/index.ts

@@ -6,6 +6,7 @@ import { questionRouter } from "./question";
 import { packageRouter } from "./package";
 import { ratingRouter } from "./rating";
 import { settingsRouter } from "./settings";
+import { statsRouter } from "./stats";
 
 export const appRouter = router({
   healthCheck: publicProcedure.query(() => {
@@ -24,6 +25,7 @@ export const appRouter = router({
   package: packageRouter,
   rating: ratingRouter,
   settings: settingsRouter,
+  stats: statsRouter,
 });
 
 export type AppRouter = typeof appRouter;

packages/api/src/routers/package.ts

@@ -206,7 +206,7 @@ export const packageRouter = router({
       const sectionsWithQuestions = sections.map((section) => ({
         ...section,
         questions: sectionQuestions
-          .filter((sq) => sq.sectionId === section.id)
+          .filter((sq) => sq.sectionId === section.id && sq.question != null)
           .sort((a, b) => a.orderIndex - b.orderIndex)
           .map((sq) => sq.question),
       }));

packages/api/src/routers/stats.ts

@@ -0,0 +1,455 @@
+import { z } from "zod";
+import { eq, and, desc, sql, gte } from "drizzle-orm";
+import { router, protectedProcedure } from "../index";
+import { db } from "@labas/db";
+import {
+  testAttempt,
+  sectionResult,
+  answer,
+  testPackage,
+  question,
+  examType,
+  sectionType,
+} from "@labas/db";
+
+function clamp(n: number, min: number, max: number) {
+  return Math.max(min, Math.min(max, n));
+}
+
+export const statsRouter = router({
+  overview: protectedProcedure.query(async ({ ctx }) => {
+    const userId = ctx.session.user.id;
+
+    const [attemptAgg] = await db
+      .select({
+        totalAttempts: sql<number>`count(*)`,
+        completedAttempts: sql<number>`sum(case when ${testAttempt.status} = 'completed' then 1 else 0 end)`,
+        abandonedAttempts: sql<number>`sum(case when ${testAttempt.status} = 'abandoned' then 1 else 0 end)`,
+        avgScorePct:
+          sql<number>`round(avg(case when ${testAttempt.status} = 'completed' and ${testAttempt.maxScore} > 0 then (${testAttempt.totalScore}::float / ${testAttempt.maxScore}) * 100 end)::numeric, 1)`,
+      })
+      .from(testAttempt)
+      .where(eq(testAttempt.userId, userId));
+
+    const [timeAgg] = await db
+      .select({
+        totalTimeSpentSec: sql<number>`coalesce(sum(${sectionResult.timeSpentSec}), 0)`,
+      })
+      .from(sectionResult)
+      .innerJoin(testAttempt, eq(sectionResult.attemptId, testAttempt.id))
+      .where(eq(testAttempt.userId, userId));
+
+    const [answerAgg] = await db
+      .select({
+        totalQuestionsAnswered: sql<number>`count(*)`,
+        totalCorrectAnswers: sql<number>`sum(case when ${answer.isCorrect} = true then 1 else 0 end)`,
+      })
+      .from(answer)
+      .innerJoin(sectionResult, eq(answer.sectionResultId, sectionResult.id))
+      .innerJoin(testAttempt, eq(sectionResult.attemptId, testAttempt.id))
+      .where(eq(testAttempt.userId, userId));
+
+    const totalAttempts = Number(attemptAgg?.totalAttempts ?? 0);
+    const completedAttempts = Number(attemptAgg?.completedAttempts ?? 0);
+    const totalQuestionsAnswered = Number(answerAgg?.totalQuestionsAnswered ?? 0);
+    const totalCorrectAnswers = Number(answerAgg?.totalCorrectAnswers ?? 0);
+
+    return {
+      totalAttempts,
+      completedAttempts,
+      abandonedAttempts: Number(attemptAgg?.abandonedAttempts ?? 0),
+      avgScorePct: Number(attemptAgg?.avgScorePct ?? 0),
+      totalTimeSpentSec: Number(timeAgg?.totalTimeSpentSec ?? 0),
+      totalQuestionsAnswered,
+      totalCorrectAnswers,
+      overallAccuracyPct:
+        totalQuestionsAnswered > 0
+          ? Math.round((totalCorrectAnswers / totalQuestionsAnswered) * 100)
+          : 0,
+    };
+  }),
+
+  byExamType: protectedProcedure.query(async ({ ctx }) => {
+    const userId = ctx.session.user.id;
+
+    const rows = await db
+      .select({
+        examTypeId: testPackage.examTypeId,
+        examTypeName: examType.name,
+        attempts: sql<number>`count(distinct ${testAttempt.id})`,
+        avgScorePct:
+          sql<number>`round(avg(case when ${testAttempt.status} = 'completed' and ${testAttempt.maxScore} > 0 then (${testAttempt.totalScore}::float / ${testAttempt.maxScore}) * 100 end)::numeric, 1)`,
+        avgTimeSpentSec: sql<number>`round(avg(${sectionResult.timeSpentSec})::numeric, 0)`,
+        totalQuestions: sql<number>`count(${answer.id})`,
+        correctQuestions: sql<number>`sum(case when ${answer.isCorrect} = true then 1 else 0 end)`,
+      })
+      .from(testAttempt)
+      .innerJoin(testPackage, eq(testAttempt.packageId, testPackage.id))
+      .innerJoin(examType, eq(testPackage.examTypeId, examType.id))
+      .leftJoin(sectionResult, eq(sectionResult.attemptId, testAttempt.id))
+      .leftJoin(answer, eq(answer.sectionResultId, sectionResult.id))
+      .where(eq(testAttempt.userId, userId))
+      .groupBy(testPackage.examTypeId, examType.name);
+
+    return rows.map((r) => ({
+      ...r,
+      attempts: Number(r.attempts),
+      avgScorePct: Number(r.avgScorePct ?? 0),
+      avgTimeSpentSec: Number(r.avgTimeSpentSec ?? 0),
+      totalQuestions: Number(r.totalQuestions),
+      correctQuestions: Number(r.correctQuestions),
+      accuracyPct:
+        Number(r.totalQuestions) > 0
+          ? Math.round((Number(r.correctQuestions) / Number(r.totalQuestions)) * 100)
+          : 0,
+    }));
+  }),
+
+  bySectionType: protectedProcedure.query(async ({ ctx }) => {
+    const userId = ctx.session.user.id;
+
+    const rows = await db
+      .select({
+        sectionTypeId: sectionType.id,
+        sectionTypeName: sectionType.name,
+        attempts: sql<number>`count(distinct ${testAttempt.id})`,
+        avgScorePct:
+          sql<number>`round(avg(case when ${testAttempt.status} = 'completed' and ${sectionResult.maxScore} > 0 then (${sectionResult.score}::float / ${sectionResult.maxScore}) * 100 end)::numeric, 1)`,
+        avgTimeSpentSec: sql<number>`round(avg(${sectionResult.timeSpentSec})::numeric, 0)`,
+        totalQuestions: sql<number>`count(${answer.id})`,
+        correctQuestions: sql<number>`sum(case when ${answer.isCorrect} = true then 1 else 0 end)`,
+      })
+      .from(testAttempt)
+      .innerJoin(sectionResult, eq(sectionResult.attemptId, testAttempt.id))
+      .innerJoin(sectionType, eq(sectionResult.sectionTypeId, sectionType.id))
+      .leftJoin(answer, eq(answer.sectionResultId, sectionResult.id))
+      .where(eq(testAttempt.userId, userId))
+      .groupBy(sectionType.id, sectionType.name);
+
+    return rows.map((r) => ({
+      ...r,
+      attempts: Number(r.attempts),
+      avgScorePct: Number(r.avgScorePct ?? 0),
+      avgTimeSpentSec: Number(r.avgTimeSpentSec ?? 0),
+      totalQuestions: Number(r.totalQuestions),
+      correctQuestions: Number(r.correctQuestions),
+      accuracyPct:
+        Number(r.totalQuestions) > 0
+          ? Math.round((Number(r.correctQuestions) / Number(r.totalQuestions)) * 100)
+          : 0,
+    }));
+  }),
+
+  byFormat: protectedProcedure.query(async ({ ctx }) => {
+    const userId = ctx.session.user.id;
+
+    const rows = await db
+      .select({
+        format: question.format,
+        totalQuestions: sql<number>`count(${answer.id})`,
+        correctQuestions: sql<number>`sum(case when ${answer.isCorrect} = true then 1 else 0 end)`,
+        avgTimeSpentSec: sql<number>`round(avg(${answer.timeSpentSec})::numeric, 0)`,
+      })
+      .from(answer)
+      .innerJoin(sectionResult, eq(answer.sectionResultId, sectionResult.id))
+      .innerJoin(testAttempt, eq(sectionResult.attemptId, testAttempt.id))
+      .innerJoin(question, eq(answer.questionId, question.id))
+      .where(eq(testAttempt.userId, userId))
+      .groupBy(question.format);
+
+    return rows
+      .map((r) => ({
+        format: r.format,
+        totalQuestions: Number(r.totalQuestions),
+        correctQuestions: Number(r.correctQuestions),
+        avgTimeSpentSec: Number(r.avgTimeSpentSec ?? 0),
+        accuracyPct:
+          Number(r.totalQuestions) > 0
+            ? Math.round((Number(r.correctQuestions) / Number(r.totalQuestions)) * 100)
+            : 0,
+      }))
+      .sort((a, b) => b.totalQuestions - a.totalQuestions);
+  }),
+
+  bySkillTag: protectedProcedure.query(async ({ ctx }) => {
+    const userId = ctx.session.user.id;
+
+    const rows = await db
+      .select({
+        skillTags: question.skillTags,
+        isCorrect: answer.isCorrect,
+        timeSpentSec: answer.timeSpentSec,
+      })
+      .from(answer)
+      .innerJoin(sectionResult, eq(answer.sectionResultId, sectionResult.id))
+      .innerJoin(testAttempt, eq(sectionResult.attemptId, testAttempt.id))
+      .innerJoin(question, eq(answer.questionId, question.id))
+      .where(eq(testAttempt.userId, userId));
+
+    const tagMap = new Map<
+      string,
+      { total: number; correct: number; timeSpentSec: number }
+    >();
+
+    for (const row of rows) {
+      const tags = row.skillTags ?? [];
+      for (const tag of tags) {
+        const existing = tagMap.get(tag) ?? { total: 0, correct: 0, timeSpentSec: 0 };
+        existing.total += 1;
+        if (row.isCorrect) existing.correct += 1;
+        if (row.timeSpentSec) existing.timeSpentSec += row.timeSpentSec;
+        tagMap.set(tag, existing);
+      }
+    }
+
+    return Array.from(tagMap.entries())
+      .map(([tag, data]) => ({
+        tag,
+        totalQuestions: data.total,
+        correctQuestions: data.correct,
+        accuracyPct: data.total > 0 ? Math.round((data.correct / data.total) * 100) : 0,
+        avgTimeSpentSec: data.total > 0 ? Math.round(data.timeSpentSec / data.total) : 0,
+      }))
+      .sort((a, b) => b.totalQuestions - a.totalQuestions);
+  }),
+
+  trend: protectedProcedure
+    .input(
+      z
+        .object({
+          days: z.number().min(7).max(90).default(30),
+        })
+        .optional(),
+    )
+    .query(async ({ ctx, input }) => {
+      const userId = ctx.session.user.id;
+      const days = input?.days ?? 30;
+      const since = new Date(Date.now() - days * 24 * 60 * 60 * 1000);
+
+      const rows = await db
+        .select({
+          date: sql<string>`date(${testAttempt.finishedAt})`,
+          attempts: sql<number>`count(*)`,
+          avgScorePct:
+            sql<number>`round(avg(case when ${testAttempt.maxScore} > 0 then (${testAttempt.totalScore}::float / ${testAttempt.maxScore}) * 100 end)::numeric, 1)`,
+        })
+        .from(testAttempt)
+        .where(
+          and(
+            eq(testAttempt.userId, userId),
+            eq(testAttempt.status, "completed"),
+            gte(testAttempt.finishedAt, since),
+          ),
+        )
+        .groupBy(sql`date(${testAttempt.finishedAt})`)
+        .orderBy(sql`date(${testAttempt.finishedAt})`);
+
+      // Fill in missing dates
+      const resultMap = new Map<string, { date: string; attempts: number; avgScorePct: number }>();
+      for (const row of rows) {
+        resultMap.set(row.date, {
+          date: row.date,
+          attempts: Number(row.attempts),
+          avgScorePct: Number(row.avgScorePct ?? 0),
+        });
+      }
+
+      const filled: { date: string; attempts: number; avgScorePct: number }[] = [];
+      for (let i = days - 1; i >= 0; i--) {
+        const d = new Date(Date.now() - i * 24 * 60 * 60 * 1000);
+        const key = d.toISOString().split("T")[0];
+        filled.push(resultMap.get(key) ?? { date: key, attempts: 0, avgScorePct: 0 });
+      }
+
+      return filled;
+    }),
+
+  weaknesses: protectedProcedure.query(async ({ ctx }) => {
+    const userId = ctx.session.user.id;
+    const MIN_QUESTIONS = 5;
+
+    // Format weaknesses
+    const formatRows = await db
+      .select({
+        format: question.format,
+        totalQuestions: sql<number>`count(${answer.id})`,
+        correctQuestions: sql<number>`sum(case when ${answer.isCorrect} = true then 1 else 0 end)`,
+      })
+      .from(answer)
+      .innerJoin(sectionResult, eq(answer.sectionResultId, sectionResult.id))
+      .innerJoin(testAttempt, eq(sectionResult.attemptId, testAttempt.id))
+      .innerJoin(question, eq(answer.questionId, question.id))
+      .where(eq(testAttempt.userId, userId))
+      .groupBy(question.format);
+
+    const formatWeaknesses = formatRows
+      .map((r) => ({
+        type: "format" as const,
+        name: r.format,
+        totalQuestions: Number(r.totalQuestions),
+        accuracyPct:
+          Number(r.totalQuestions) > 0
+            ? Math.round((Number(r.correctQuestions) / Number(r.totalQuestions)) * 100)
+            : 0,
+      }))
+      .filter((w) => w.totalQuestions >= MIN_QUESTIONS)
+      .sort((a, b) => a.accuracyPct - b.accuracyPct)
+      .slice(0, 3);
+
+    // Section type weaknesses
+    const sectionRows = await db
+      .select({
+        sectionTypeId: sectionType.id,
+        sectionTypeName: sectionType.name,
+        totalQuestions: sql<number>`count(${answer.id})`,
+        correctQuestions: sql<number>`sum(case when ${answer.isCorrect} = true then 1 else 0 end)`,
+      })
+      .from(answer)
+      .innerJoin(sectionResult, eq(answer.sectionResultId, sectionResult.id))
+      .innerJoin(testAttempt, eq(sectionResult.attemptId, testAttempt.id))
+      .innerJoin(sectionType, eq(sectionResult.sectionTypeId, sectionType.id))
+      .where(eq(testAttempt.userId, userId))
+      .groupBy(sectionType.id, sectionType.name);
+
+    const sectionWeaknesses = sectionRows
+      .map((r) => ({
+        type: "section" as const,
+        name: r.sectionTypeName,
+        totalQuestions: Number(r.totalQuestions),
+        accuracyPct:
+          Number(r.totalQuestions) > 0
+            ? Math.round((Number(r.correctQuestions) / Number(r.totalQuestions)) * 100)
+            : 0,
+      }))
+      .filter((w) => w.totalQuestions >= MIN_QUESTIONS)
+      .sort((a, b) => a.accuracyPct - b.accuracyPct)
+      .slice(0, 3);
+
+    // Skill tag weaknesses
+    const tagRows = await db
+      .select({
+        skillTags: question.skillTags,
+        isCorrect: answer.isCorrect,
+      })
+      .from(answer)
+      .innerJoin(sectionResult, eq(answer.sectionResultId, sectionResult.id))
+      .innerJoin(testAttempt, eq(sectionResult.attemptId, testAttempt.id))
+      .innerJoin(question, eq(answer.questionId, question.id))
+      .where(eq(testAttempt.userId, userId));
+
+    const tagMap = new Map<string, { total: number; correct: number }>();
+    for (const row of tagRows) {
+      const tags = row.skillTags ?? [];
+      for (const tag of tags) {
+        const existing = tagMap.get(tag) ?? { total: 0, correct: 0 };
+        existing.total += 1;
+        if (row.isCorrect) existing.correct += 1;
+        tagMap.set(tag, existing);
+      }
+    }
+
+    const tagWeaknesses = Array.from(tagMap.entries())
+      .map(([name, data]) => ({
+        type: "skill" as const,
+        name,
+        totalQuestions: data.total,
+        accuracyPct: data.total > 0 ? Math.round((data.correct / data.total) * 100) : 0,
+      }))
+      .filter((w) => w.totalQuestions >= MIN_QUESTIONS)
+      .sort((a, b) => a.accuracyPct - b.accuracyPct)
+      .slice(0, 3);
+
+    // Combine and get top overall weaknesses
+    const allWeaknesses = [...formatWeaknesses, ...sectionWeaknesses, ...tagWeaknesses]
+      .sort((a, b) => a.accuracyPct - b.accuracyPct)
+      .slice(0, 5);
+
+    // Generate recommendations
+    const recommendations: string[] = [];
+    for (const w of allWeaknesses) {
+      if (w.accuracyPct < 40) {
+        recommendations.push(
+          `Fokus pada ${w.name}: akurasi hanya ${w.accuracyPct}%. Cobalah latihan intensif untuk tipe ini.`,
+        );
+      } else if (w.accuracyPct < 60) {
+        recommendations.push(
+          `Perbanyak latihan ${w.name}: akurasi ${w.accuracyPct}%. Analisis jawaban salah Anda untuk memahami pola kesalahan.`,
+        );
+      } else {
+        recommendations.push(
+          `Tingkatkan konsistensi ${w.name}: akurasi ${w.accuracyPct}%. Latihan rutin akan membantu mencapai 80%+.`,
+        );
+      }
+    }
+
+    if (allWeaknesses.length === 0) {
+      recommendations.push(
+        "Belum cukup data untuk mengidentifikasi kelemahan. Selesaikan lebih banyak latihan!",
+      );
+    }
+
+    return { weaknesses: allWeaknesses, recommendations };
+  }),
+
+  timeAnalytics: protectedProcedure.query(async ({ ctx }) => {
+    const userId = ctx.session.user.id;
+
+    // Time by section type
+    const sectionTime = await db
+      .select({
+        sectionTypeName: sectionType.name,
+        avgTimeSpentSec: sql<number>`round(avg(${sectionResult.timeSpentSec})::numeric, 0)`,
+        totalTimeSpentSec: sql<number>`sum(${sectionResult.timeSpentSec})`,
+      })
+      .from(testAttempt)
+      .innerJoin(sectionResult, eq(sectionResult.attemptId, testAttempt.id))
+      .innerJoin(sectionType, eq(sectionResult.sectionTypeId, sectionType.id))
+      .where(eq(testAttempt.userId, userId))
+      .groupBy(sectionType.name);
+
+    // Time by format
+    const formatTime = await db
+      .select({
+        format: question.format,
+        avgTimeSpentSec: sql<number>`round(avg(${answer.timeSpentSec})::numeric, 0)`,
+        totalTimeSpentSec: sql<number>`sum(${answer.timeSpentSec})`,
+      })
+      .from(answer)
+      .innerJoin(sectionResult, eq(answer.sectionResultId, sectionResult.id))
+      .innerJoin(testAttempt, eq(sectionResult.attemptId, testAttempt.id))
+      .innerJoin(question, eq(answer.questionId, question.id))
+      .where(eq(testAttempt.userId, userId))
+      .groupBy(question.format);
+
+    // Time trend (avg time per completed attempt)
+    const timeTrend = await db
+      .select({
+        date: sql<string>`date(${testAttempt.finishedAt})`,
+        avgTimeSpentSec: sql<number>`round(avg(${sectionResult.timeSpentSec})::numeric, 0)`,
+      })
+      .from(testAttempt)
+      .innerJoin(sectionResult, eq(sectionResult.attemptId, testAttempt.id))
+      .where(and(eq(testAttempt.userId, userId), eq(testAttempt.status, "completed")))
+      .groupBy(sql`date(${testAttempt.finishedAt})`)
+      .orderBy(sql`date(${testAttempt.finishedAt})`);
+
+    return {
+      sectionTime: sectionTime.map((r) => ({
+        sectionTypeName: r.sectionTypeName,
+        avgTimeSpentSec: Number(r.avgTimeSpentSec ?? 0),
+        totalTimeSpentSec: Number(r.totalTimeSpentSec ?? 0),
+      })),
+      formatTime: formatTime
+        .map((r) => ({
+          format: r.format,
+          avgTimeSpentSec: Number(r.avgTimeSpentSec ?? 0),
+          totalTimeSpentSec: Number(r.totalTimeSpentSec ?? 0),
+        }))
+        .sort((a, b) => b.totalTimeSpentSec - a.totalTimeSpentSec),
+      timeTrend: timeTrend.map((r) => ({
+        date: r.date,
+        avgTimeSpentSec: Number(r.avgTimeSpentSec ?? 0),
+      })),
+    };
+  }),
+});