feat: update accessibility guidelines and enhance component structure. Introduce new frontend accessibility conventions in AGENTS.md, including heading hierarchy and ARIA roles for dialogs and buttons. Refactor TourGuide and related components for lazy loading and improved user experience. Update ESLint configuration to enforce stricter TypeScript rules and add new dependencies for linting. Enhance various components with accessibility features and ensure consistent styling across the application.

AGENTS.md

@@ -93,6 +93,9 @@ bun run build            # Build all packages
 - ❌ **Do not assume Prisma**. Database layer is **Drizzle ORM**.
 - ❌ **Do not hardcode API keys** in source code. AI keys are user-managed via the Settings UI.
 - ❌ **Do not add global CSS** in `apps/web` without checking `packages/ui/src/styles/globals.css` for existing design tokens and CSS variables.
+- ❌ **Do not skip heading levels**. After `<h1>`, the next heading must be `<h2>`, not `<h3>` (or lower). Never have two `<h1>` on one page.
+- ❌ **Do not create custom modal/dialog components**. Use shadcn `<Dialog>` from `@labas/ui/components/dialog` — it provides built-in focus trap, escape key, scroll lock, and ARIA.
+- ❌ **Do not use `any`** in frontend TypeScript. Enforced by eslint `@typescript-eslint/no-explicit-any: "error"` in `apps/web/eslint.config.mjs`.
 
 ---
 
@@ -109,6 +112,25 @@ bun run build            # Build all packages
   npx shadcn@latest add accordion dialog -c packages/ui
   ```
 - App-specific blocks (non-shared) should be added directly in `apps/web/src/components/`.
+- DevTools (TanStack Router, React Query) are **production-gated** via `import.meta.env.DEV` — do not remove the condition.
+- App-level error boundary is in `__root.tsx` using `<ErrorFallback>` — route-level error boundaries via `errorComponent` route option.
+- Lazy-loaded route components use the `.lazy.tsx` pattern: route file is thin, heavy component lives in `components/routes/*Page.tsx` wrapped in `Suspense`.
+
+---
+
+## 5b. Frontend Accessibility Conventions
+
+- **Skip link**: Root layout in `__root.tsx` has a hidden `<SkipLink>` that appears on Tab press, linking to `#main-content` on the `<main>` element.
+- **Icon-only buttons**: Every `<button>` or `<Button>` with only an icon (no visible text) **must** have `aria-label`. The icon element (`<MaterialIcon>`, `<span>`) should NOT have `aria-hidden="true"` unless decorative.
+- **Heading hierarchy**: Never skip levels (`h1 → h2 → h3`, never `h1 → h3`). Exactly one `<h1>` per page. Heading level corresponds to semantic nesting, not visual size.
+- **Form labels**: Every `<Input>`, `<select>`, `<textarea>` needs an associated `<Label>` (with `htmlFor` + `id`) OR an `aria-label` attribute. Search inputs, OTP digits, and icon-only filter buttons are common offenders.
+- **Dialogs**: All modals use the shadcn `<Dialog>` component (from `@labas/ui/components/dialog`), which provides:
+  - Focus trap inside dialog
+  - Escape key to close
+  - Scroll lock on body
+  - Focus restoration to trigger element on close
+  - ARIA `role="dialog"`, `aria-modal`, `aria-labelledby`
+- **Custom tabs/accordions**: Must have proper ARIA roles (`role="tablist"`, `role="tab"`, `aria-selected`, `tabindex` for roving tabindex) and arrow key handlers. Prefer shadcn `<Tabs>` where possible; use manual ARIA + `handleRovingKeyDown` helper only when tabs have close buttons or other non-standard elements.
 
 ---
 
@@ -187,7 +209,31 @@ bun run build            # Build all packages
 - Routers live in `packages/api/src/routers/`.
 - Register new routers in `packages/api/src/routers/index.ts`.
 
-## 11. Git & Workflow
+## 11. Admin Routes & DataTable
+
+### Admin Route Structure
+- Admin routes are flat files: `routes/admin.users.tsx`, `routes/admin.credits.tsx`, etc.
+- Wrapped by `routes/admin.tsx` layout shell (sidebar + admin role check).
+- All admin tRPC procedures live in `packages/api/src/routers/admin.ts` and use `adminProcedure` (extends `protectedProcedure` with role check).
+- Mutations use `audit()` helper for audit logging to `adminAuditLog` table.
+
+### DataTable Component (Design Reference)
+- Admin table routes should eventually use a `<DataTable<T>>` component from `components/admin/DataTable.tsx`.
+- API design: generic `<T>`, column defs with `accessorKey`/`accessorFn`/`cell` render prop, `actions` render prop, opt-in pagination, server-side sorting.
+- Search bars, filter pills, and status pill buttons live **above** the DataTable in the route component (not inside it).
+- **Do NOT** use DataTable for card-based layouts (e.g., Featured editor's pick) — keep card layouts as-is.
+
+### Current Migration Status
+- `admin.users.tsx` — table-based, good candidate for DataTable
+- `admin.jobs.tsx` — table-based, good candidate
+- `admin.moderation.tsx` — table-based, good candidate
+- `admin.credits.tsx` — transaction table, good candidate
+- `admin.featured.tsx` — card layout, keep as-is
+- `admin.index.tsx` — dashboard stats cards, keep as-is
+
+---
+
+## 11b. Git & Workflow
 
 - Do **NOT** run `git commit`, `git push`, `git rebase`, or force-push unless the user explicitly asks for it.
 - Do **NOT** create `README.md` or documentation files unless explicitly requested.
@@ -230,4 +276,4 @@ bun run build            # Build all packages
 
 ---
 
-_Last updated: 2026-05-14_
+_Last updated: 2026-05-19_

DESIGN.md

@@ -302,3 +302,89 @@ What makes Clay truly distinctive is its hover micro-animations: buttons on hove
 5. Hover animations are the signature — rotation + hard shadow, not subtle fades
 6. Generous radius: 24px cards, 40px sections — nothing looks sharp or corporate
 7. Three weights: 600 (headings), 500 (UI), 400 (body) — strict roles
+
+---
+
+## 4. Architectural Decisions (Q2 2026)
+
+### 4.1 Component Decomposition
+
+| Refactored Component | Original Lines | After | Strategy |
+|---|---|---|---|
+| `AttemptTestView.tsx` | 589 | ~320 | Extract header (AttemptHeader), abandon/finish dialogs, floating nav |
+| `use-generation-jobs.ts` | 391 | ~120 (facade) | Extract `use-job-shared.ts`, `use-job-state.ts`, `use-polling-transport.ts` |
+
+### 4.2 Lazy Loading Architecture
+
+Heavy route components extracted to `apps/web/src/components/routes/*Page.tsx` and loaded via `.lazy.tsx`:
+- `BankPage`, `GeneratePage`, `LandingPage`, `PackagesPage`, `SettingsPage`
+- Libraries `recharts` and `react-joyride` wrapped in lazy bundles (`ChartsBundle.tsx`, `TourGuideImpl.tsx`)
+- Each chunk loaded on-demand via React.lazy + Suspense
+
+### 4.3 Semantic CSS Token Mapping
+
+All `packages/ui` primitives use semantic tokens; zero app-specific CSS vars in primitives:
+- `--primary` → `--matcha-600` (green/action)
+- `--secondary` → `--clay-black` (black/neutral)
+- Theme lives in `packages/ui/src/styles/globals.css`
+- App (`apps/web`) imports only `@import "@labas/ui/globals.css"` — no `index.css` overrides
+
+### 4.4 Accessibility Decisions
+
+| Pattern | Implementation | Files |
+|---------|---------------|-------|
+| Focus trap + escape | shadcn `<Dialog>` (adapter: Base UI) | 6 modals in `components/` |
+| Keyboard tabs | `handleRovingKeyDown` helper + ARIA | `FilterBar.tsx`, `GeneratePage.tsx`, `FloatingNav.tsx` |
+| shadcn Tabs | `<Tabs>` primitive for simple tab groups | `PackagesPage.tsx`, `admin.featured.tsx` |
+| Skip link | `<SkipLink>` component, `#main-content` | `__root.tsx` |
+| Icon buttons | `aria-label` required, `title` insufficient | 16 buttons across 6 files |
+| Heading hierarchy | `h1 → h2 → h3`, never skip | Audited ~15 files |
+
+### 4.5 Admin DataTable API (Design)
+
+```ts
+interface ColumnDef<T> {
+  id: string;
+  header: string;
+  accessorKey?: keyof T & string;
+  accessorFn?: (row: T) => ReactNode;
+  cell?: (props: { row: T; value: ReactNode }) => ReactNode;
+  sortable?: boolean;
+  size?: string;
+}
+
+interface DataTableProps<T> {
+  data: T[];
+  columns: ColumnDef<T>[];
+  keyExtractor: (row: T) => string | number;
+  isLoading?: boolean;
+  emptyMessage?: string;
+  page?: number;
+  totalPages?: number;
+  onPageChange?: (p: number) => void;
+  sortColumn?: string;
+  sortDirection?: "asc" | "desc";
+  onSort?: (column: string) => void;
+  actions?: (row: T) => ReactNode;
+}
+```
+
+- Generic `<T>` for full type safety
+- Opt-in pagination (reuses existing `Pagination` component)
+- Server-side sorting via `sortable` + `onSort` callback
+- Search bars/filter pills sit **above** DataTable, not inside it
+- Card layouts (Featured editor's pick) excluded — DataTable is table-only
+
+### 4.6 Job Transport Abstraction
+
+Polling implemented as `JobTransport` interface in `packages/ai/src/agentic.ts`:
+- Currently: in-memory `Map` for rate limiting
+- Designed to swap to WebSocket/SSE without changing callers
+- Exported: `checkRateLimit(userId)`, `JobTransport` type
+
+### 4.7 Type Safety
+
+- `no-explicit-any: "error"` enforced via `apps/web/eslint.config.mjs`
+- Shared frontend types in `apps/web/src/lib/types.ts` — all fields optional (permissive) to accept diverse tRPC shapes without `any`
+- tRPC errors caught as `unknown`, narrowed via `getErrorMessage(e)` helper
+- Zero `any` violations across entire frontend after Q2 2026 sprint

apps/web/eslint.config.mjs

@@ -0,0 +1,17 @@
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    files: ["src/**/*.{ts,tsx}"],
+    rules: {
+      "@typescript-eslint/no-explicit-any": "error",
+      "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
+    },
+  },
+  {
+    ignores: ["dist", "node_modules", "src/routeTree.gen.ts"],
+  },
+);

apps/web/package.json

@@ -11,6 +11,7 @@
     "start": "vite",
     "test": "bun test",
     "check-types": "vite build && tsc --noEmit",
+    "lint": "eslint src",
     "generate-pwa-assets": "pwa-assets-generator"
   },
   "dependencies": {
@@ -41,6 +42,7 @@
     "zod": "catalog:"
   },
   "devDependencies": {
+    "@eslint/js": "^10.0.1",
     "@labas/config": "workspace:*",
     "@tanstack/react-query-devtools": "^5.91.1",
     "@tanstack/react-router-devtools": "^1.166.13",
@@ -50,9 +52,11 @@
     "@types/react-dom": "catalog:",
     "@vite-pwa/assets-generator": "^1.0.2",
     "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^10.4.0",
     "postcss": "^8.5.10",
     "tailwindcss": "^4.2.2",
     "typescript": "catalog:",
+    "typescript-eslint": "^8.59.4",
     "vite": "^8.0.8"
   }
 }

apps/web/src/components/GettingStartedCard.tsx

@@ -73,6 +73,7 @@ export function GettingStartedCard() {
           </div>
           <button
             onClick={dismiss}
+            aria-label="Tutup"
             className="text-[var(--warm-silver)] hover:text-[var(--clay-black)] transition-colors cursor-pointer"
           >
             <MaterialIcon name="close" className="text-xl" />

apps/web/src/components/TourGuide.tsx

@@ -1,67 +1,20 @@
-import { useState, useEffect } from "react";
-import { Joyride, type Step, type EventData } from "react-joyride";
+import { Suspense, lazy } from "react";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import type { Step } from "react-joyride";
 
-const joyrideOptions = {
-  primaryColor: "var(--matcha-600)",
-  textColor: "var(--clay-black)",
-  backgroundColor: "var(--pure-white)",
-  arrowColor: "var(--pure-white)",
-  overlayColor: "rgba(0,0,0,0.4)",
-};
+const TourGuideImpl = lazy(() => import("./TourGuideImpl").then((m) => ({ default: m.TourGuideImpl })));
+const PageTourImpl = lazy(() => import("./TourGuideImpl").then((m) => ({ default: m.PageTourImpl })));
 
-const joyrideStyles = {
-  buttonBack: { color: "var(--warm-charcoal)", fontSize: "14px", fontWeight: 500 } as any,
-  buttonSkip: { color: "var(--warm-charcoal)", fontSize: "14px", fontWeight: 500 } as any,
-  tooltipContainer: { textAlign: "left" } as any,
-  tooltipContent: { fontSize: "14px", lineHeight: "1.6", padding: "8px 0" } as any,
-  tooltipTitle: { fontSize: "18px", fontWeight: 700, fontFamily: "Manrope, sans-serif" } as any,
-};
-
-const joyrideLocale = { back: "Kembali", close: "Tutup", last: "Selesai", next: "Lanjut", skip: "Lewati" };
-
-// ── Global site tour ──
+export type { Step };
 
 const LS_GLOBAL = "labas-tour-completed";
 const TRIGGER_GLOBAL = "labas-tour-trigger";
 
-const globalSteps: Step[] = [
-  { target: "body" as any, placement: "center", title: "Selamat Datang di Labas!", content: "Platform latihan ujian bahasa berbasis AI. Yuk, kita lihat fitur-fitur utamanya!", hideOverlay: true },
-  { target: "[data-tour='dashboard-stats']", title: "Ringkasan Aktivitas", content: "Pantau jumlah latihan, waktu belajar, soal terjawab, dan akurasi kamu di sini.", spotlightPadding: 8 },
-  { target: "[data-tour='nav-generate']", title: "AI Lab — Generate Soal", content: "Buat soal latihan sendiri pakai AI. Pilih jenis ujian, section, format, dan topik.", spotlightPadding: 4 },
-  { target: "[data-tour='nav-bank']", title: "Bank Soal — Buat Paket", content: "Atur soal-soal kamu jadi paket latihan dari bank soal.", spotlightPadding: 4 },
-  { target: "[data-tour='nav-packages']", title: "Paket Soal — Mulai Latihan", content: "Temukan paket soal dari komunitas atau buatan sendiri.", spotlightPadding: 4 },
-  { target: "[data-tour='nav-analytics']", title: "Analytics — Evaluasi", content: "Lihat analitik mendalam: skor, tren, dan rekomendasi belajar.", spotlightPadding: 4 },
-  { target: "body" as any, placement: "center", title: "Siap Belajar?", content: "Setiap halaman punya panduan sendiri. Cari tombol ? di pojok kanan bawah halaman!", hideOverlay: true },
-];
-
 export function TourGuide() {
-  const [run, setRun] = useState(false);
-
-  useEffect(() => {
-    const onTrigger = () => { localStorage.removeItem(LS_GLOBAL); setRun(true); };
-    window.addEventListener(TRIGGER_GLOBAL, onTrigger);
-
-    const completed = localStorage.getItem(LS_GLOBAL);
-    if (!completed) {
-      const timer = setTimeout(() => setRun(true), 800);
-      return () => { clearTimeout(timer); window.removeEventListener(TRIGGER_GLOBAL, onTrigger); };
-    }
-
-    return () => window.removeEventListener(TRIGGER_GLOBAL, onTrigger);
-  }, []);
-
-  const handleEvent = (data: EventData) => {
-    const { action, status } = data;
-    if (status === "finished" || status === "skipped") { localStorage.setItem(LS_GLOBAL, "true"); setRun(false); }
-    if (action === "close" || action === "skip") setRun(false);
-  };
-
   return (
-    <Joyride steps={globalSteps} run={run} continuous
-      options={{ ...joyrideOptions, showProgress: true, buttons: ["back", "primary", "skip"] }}
-      locale={joyrideLocale} styles={joyrideStyles} onEvent={handleEvent}
-    />
+    <Suspense fallback={null}>
+      <TourGuideImpl />
+    </Suspense>
   );
 }
 
@@ -78,32 +31,10 @@ interface PageTourProps {
 }
 
 export function PageTour({ storageKey, steps, autoDelay }: PageTourProps) {
-  const [run, setRun] = useState(false);
-
-  useEffect(() => {
-    const onTrigger = () => { localStorage.removeItem(storageKey); setRun(true); };
-    window.addEventListener(storageKey, onTrigger);
-
-    const completed = localStorage.getItem(storageKey);
-    if (!completed && autoDelay !== undefined) {
-      const timer = setTimeout(() => setRun(true), autoDelay);
-      return () => { clearTimeout(timer); window.removeEventListener(storageKey, onTrigger); };
-    }
-
-    return () => window.removeEventListener(storageKey, onTrigger);
-  }, []);
-
-  const handleEvent = (data: EventData) => {
-    const { action, status } = data;
-    if (status === "finished" || status === "skipped") { localStorage.setItem(storageKey, "true"); setRun(false); }
-    if (action === "close" || action === "skip") setRun(false);
-  };
-
   return (
-    <Joyride steps={steps} run={run} continuous
-      options={{ ...joyrideOptions, showProgress: true, buttons: ["back", "primary", "skip"] }}
-      locale={joyrideLocale} styles={joyrideStyles} onEvent={handleEvent}
-    />
+    <Suspense fallback={null}>
+      <PageTourImpl storageKey={storageKey} steps={steps} autoDelay={autoDelay} />
+    </Suspense>
   );
 }
 

apps/web/src/components/TourGuideImpl.tsx

@@ -0,0 +1,106 @@
+import { useState, useEffect, type CSSProperties } from "react";
+import { Joyride, type Step, type EventData } from "react-joyride";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+const joyrideOptions = {
+  primaryColor: "var(--matcha-600)",
+  textColor: "var(--clay-black)",
+  backgroundColor: "var(--pure-white)",
+  arrowColor: "var(--pure-white)",
+  overlayColor: "rgba(0,0,0,0.4)",
+};
+
+const joyrideStyles: Record<string, CSSProperties> = {
+  buttonBack: { color: "var(--warm-charcoal)", fontSize: "14px", fontWeight: 500 },
+  buttonSkip: { color: "var(--warm-charcoal)", fontSize: "14px", fontWeight: 500 },
+  tooltipContainer: { textAlign: "left" },
+  tooltipContent: { fontSize: "14px", lineHeight: "1.6", padding: "8px 0" },
+  tooltipTitle: { fontSize: "18px", fontWeight: 700, fontFamily: "Manrope, sans-serif" },
+};
+
+const joyrideLocale = { back: "Kembali", close: "Tutup", last: "Selesai", next: "Lanjut", skip: "Lewati" };
+
+export type { Step, EventData };
+
+// ── Global site tour ──
+
+const LS_GLOBAL = "labas-tour-completed";
+const TRIGGER_GLOBAL = "labas-tour-trigger";
+
+const globalSteps: Step[] = [
+  { target: "body", placement: "center", title: "Selamat Datang di Labas!", content: "Platform latihan ujian bahasa berbasis AI. Yuk, kita lihat fitur-fitur utamanya!", hideOverlay: true },
+  { target: "[data-tour='dashboard-stats']", title: "Ringkasan Aktivitas", content: "Pantau jumlah latihan, waktu belajar, soal terjawab, dan akurasi kamu di sini.", spotlightPadding: 8 },
+  { target: "[data-tour='nav-generate']", title: "AI Lab — Generate Soal", content: "Buat soal latihan sendiri pakai AI. Pilih jenis ujian, section, format, dan topik.", spotlightPadding: 4 },
+  { target: "[data-tour='nav-bank']", title: "Bank Soal — Buat Paket", content: "Atur soal-soal kamu jadi paket latihan dari bank soal.", spotlightPadding: 4 },
+  { target: "[data-tour='nav-packages']", title: "Paket Soal — Mulai Latihan", content: "Temukan paket soal dari komunitas atau buatan sendiri.", spotlightPadding: 4 },
+  { target: "[data-tour='nav-analytics']", title: "Analytics — Evaluasi", content: "Lihat analitik mendalam: skor, tren, dan rekomendasi belajar.", spotlightPadding: 4 },
+  { target: "body", placement: "center", title: "Siap Belajar?", content: "Setiap halaman punya panduan sendiri. Cari tombol ? di pojok kanan bawah halaman!", hideOverlay: true },
+];
+
+export function TourGuideImpl() {
+  const [run, setRun] = useState(false);
+
+  useEffect(() => {
+    const onTrigger = () => { localStorage.removeItem(LS_GLOBAL); setRun(true); };
+    window.addEventListener(TRIGGER_GLOBAL, onTrigger);
+
+    const completed = localStorage.getItem(LS_GLOBAL);
+    if (!completed) {
+      const timer = setTimeout(() => setRun(true), 800);
+      return () => { clearTimeout(timer); window.removeEventListener(TRIGGER_GLOBAL, onTrigger); };
+    }
+
+    return () => window.removeEventListener(TRIGGER_GLOBAL, onTrigger);
+  }, []);
+
+  const handleEvent = (data: EventData) => {
+    const { action, status } = data;
+    if (status === "finished" || status === "skipped") { localStorage.setItem(LS_GLOBAL, "true"); setRun(false); }
+    if (action === "close" || action === "skip") setRun(false);
+  };
+
+  return (
+    <Joyride steps={globalSteps} run={run} continuous
+      options={{ ...joyrideOptions, showProgress: true, buttons: ["back", "primary", "skip"] }}
+      locale={joyrideLocale} styles={joyrideStyles} onEvent={handleEvent}
+    />
+  );
+}
+
+// ── Page-specific tour ──
+
+interface PageTourProps {
+  storageKey: string;
+  steps: Step[];
+  autoDelay?: number;
+}
+
+export function PageTourImpl({ storageKey, steps, autoDelay }: PageTourProps) {
+  const [run, setRun] = useState(false);
+
+  useEffect(() => {
+    const onTrigger = () => { localStorage.removeItem(storageKey); setRun(true); };
+    window.addEventListener(storageKey, onTrigger);
+
+    const completed = localStorage.getItem(storageKey);
+    if (!completed && autoDelay !== undefined) {
+      const timer = setTimeout(() => setRun(true), autoDelay);
+      return () => { clearTimeout(timer); window.removeEventListener(storageKey, onTrigger); };
+    }
+
+    return () => window.removeEventListener(storageKey, onTrigger);
+  }, []);
+
+  const handleEvent = (data: EventData) => {
+    const { action, status } = data;
+    if (status === "finished" || status === "skipped") { localStorage.setItem(storageKey, "true"); setRun(false); }
+    if (action === "close" || action === "skip") setRun(false);
+  };
+
+  return (
+    <Joyride steps={steps} run={run} continuous
+      options={{ ...joyrideOptions, showProgress: true, buttons: ["back", "primary", "skip"] }}
+      locale={joyrideLocale} styles={joyrideStyles} onEvent={handleEvent}
+    />
+  );
+}

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

@@ -13,7 +13,7 @@ import { formatLabel } from "@/lib/format";
 import { formatTime } from "@/lib/time";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
-interface ExamTypeItem {
+export interface ExamTypeItem {
   examTypeId: string;
   examTypeName: string;
   accuracyPct: number;
@@ -22,7 +22,7 @@ interface ExamTypeItem {
   attempts: number;
 }
 
-interface SectionTypeItem {
+export interface SectionTypeItem {
   sectionTypeId: string;
   sectionTypeName: string;
   accuracyPct: number;
@@ -31,7 +31,7 @@ interface SectionTypeItem {
   attempts: number;
 }
 
-interface FormatItem {
+export interface FormatItem {
   format: string;
   accuracyPct: number;
   avgTimeSpentSec: number;

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

@@ -0,0 +1,45 @@
+import { ScoreTrendChart } from "./ScoreTrendChart";
+import { BreakdownCharts, type ExamTypeItem, type SectionTypeItem, type FormatItem } from "./BreakdownCharts";
+import { TimeAnalyticsPanel, type SectionTimeItem, type FormatTimeItem, type TimeTrendItem } from "./TimeAnalyticsPanel";
+
+interface ChartsBundleProps {
+  trend: { date: string; attempts: number; avgScorePct: number }[] | undefined;
+  byExamType: ExamTypeItem[] | undefined;
+  bySectionType: SectionTypeItem[] | undefined;
+  byFormat: FormatItem[] | undefined;
+  sectionTime: SectionTimeItem[] | undefined;
+  formatTimeData: FormatTimeItem[] | undefined;
+  timeTrend: TimeTrendItem[] | undefined;
+}
+
+export default function ChartsBundle({
+  trend,
+  byExamType,
+  bySectionType,
+  byFormat,
+  sectionTime,
+  formatTimeData,
+  timeTrend,
+}: ChartsBundleProps) {
+  return (
+    <>
+      <div className="mb-8">
+        <ScoreTrendChart data={trend} />
+      </div>
+      <div className="mb-8">
+        <BreakdownCharts
+          byExamType={byExamType}
+          bySectionType={bySectionType}
+          byFormat={byFormat}
+        />
+      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <TimeAnalyticsPanel
+          sectionTime={sectionTime}
+          formatTimeData={formatTimeData}
+          timeTrend={timeTrend}
+        />
+      </div>
+    </>
+  );
+}

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

@@ -11,19 +11,19 @@ import { Card, CardContent, CardHeader, CardTitle } from "@labas/ui/components/c
 import { formatTime } from "@/lib/time";
 import { formatLabel } from "@/lib/format";
 
-interface SectionTimeItem {
+export interface SectionTimeItem {
   sectionTypeName: string;
   avgTimeSpentSec: number;
   totalTimeSpentSec: number;
 }
 
-interface FormatTimeItem {
+export interface FormatTimeItem {
   format: string;
   avgTimeSpentSec: number;
   totalTimeSpentSec: number;
 }
 
-interface TimeTrendItem {
+export interface TimeTrendItem {
   date: string;
   avgTimeSpentSec: number;
 }

apps/web/src/components/attempt/OptionDisplay.tsx

@@ -2,18 +2,28 @@ import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 import { MCQ_FORMATS, McqFormat } from "@/lib/question-formats";
 
+interface McqOptionItem {
+  key: string;
+  text: string;
+}
+
+interface MatchingOptionItem {
+  left: string;
+  right?: string;
+}
+
 interface OptionDisplayProps {
   format: string;
-  options: any[];
+  options: unknown;
   correctAnswer: string;
   userAnswer: string;
 }
 
 export function OptionDisplay({ format, options, correctAnswer, userAnswer }: OptionDisplayProps) {
-  if (!options || options.length === 0) return null;
+  if (!Array.isArray(options) || options.length === 0) return null;
 
   if (format === "matching_pairs") {
-    return <MatchingPairsOptions options={options} correctAnswer={correctAnswer} userAnswer={userAnswer} />;
+    return <MatchingPairsOptions options={options as MatchingOptionItem[]} correctAnswer={correctAnswer} userAnswer={userAnswer} />;
   }
 
   if (format === "true_false_not_given") {
@@ -24,8 +34,8 @@ export function OptionDisplay({ format, options, correctAnswer, userAnswer }: Op
     return <TriStateOptions choices={["YES", "NO", "NOT_GIVEN"]} labels={{ YES: "Yes", NO: "No", NOT_GIVEN: "Not Given" }} correctAnswer={correctAnswer} userAnswer={userAnswer} />;
   }
 
-  if (MCQ_FORMATS.includes(format as McqFormat)) {
-    return <McqOptions options={options} correctAnswer={correctAnswer} userAnswer={userAnswer} />;
+  if ((MCQ_FORMATS as readonly string[]).includes(format)) {
+    return <McqOptions options={options as McqOptionItem[]} correctAnswer={correctAnswer} userAnswer={userAnswer} />;
   }
 
   return null;
@@ -114,7 +124,7 @@ function TriStateOptions({ choices, labels, correctAnswer, userAnswer }: { choic
   );
 }
 
-function MatchingPairsOptions({ options, correctAnswer, userAnswer }: { options: { left: string; right?: string }[]; correctAnswer: string; userAnswer: string }) {
+function MatchingPairsOptions({ options, correctAnswer, userAnswer }: { options: MatchingOptionItem[]; correctAnswer: string; userAnswer: string }) {
   const parseMapping = (s: string): Map<string, string> => {
     const map = new Map();
     if (!s) return map;

apps/web/src/components/attempt/QuestionReviewCard.tsx

@@ -5,13 +5,14 @@ import { Button } from "@labas/ui/components/button";
 import { Input } from "@labas/ui/components/input";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import { formatTime } from "@/lib/time";
+import type { Question } from "@/lib/types";
 import { OptionDisplay } from "./OptionDisplay";
 
 interface QuestionReviewCardProps {
-  q: any;
+  q: Question;
   secIdx: number;
   qIdx: number;
-  ans: any;
+  ans: { questionId: string; userAnswer?: string; answer?: string; isCorrect?: boolean | null; partialScore?: number | null; timeSpentSec?: number } | null;
   userId?: string;
   isExpanded: boolean;
   onToggleExpand: () => void;
@@ -97,7 +98,7 @@ export function QuestionReviewCard({
           </p>
           <div className="flex items-center gap-2 mt-1">
             <span className="text-[10px] px-1.5 py-0.5 rounded bg-[var(--oat-light)] text-[var(--warm-charcoal)]">
-              {q.format.replace(/_/g, " ")}
+              {(q.format ?? "").replace(/_/g, " ")}
             </span>
             {ans?.timeSpentSec != null && (
               <span className="text-[10px] text-[var(--warm-silver)] flex items-center gap-0.5">
@@ -135,9 +136,9 @@ export function QuestionReviewCard({
           {/* Interactive Option Display */}
           {hasOptions && (
             <OptionDisplay
-              format={q.format}
+              format={q.format ?? ""}
               options={q.options}
-              correctAnswer={q.correctAnswer}
+              correctAnswer={q.correctAnswer ?? ""}
               userAnswer={userAnswer}
             />
           )}

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

@@ -1,6 +1,12 @@
 import { useState } from "react";
 import { Input } from "@labas/ui/components/input";
 import { Button } from "@labas/ui/components/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@labas/ui/components/dialog";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 export function AutoBundleModal({
@@ -32,24 +38,13 @@ export function AutoBundleModal({
   const [sortOrder, setSortOrder] = useState<"random" | "difficulty">("random");
 
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4"
-      onClick={(e) => {
-        if (e.target === e.currentTarget) onClose();
-      }}
-    >
-      <div className="bg-[var(--warm-cream)] w-full max-w-lg rounded-[var(--radius-xl)] border-2 border-[var(--oat-border)] clay-shadow p-6 md:p-8">
-        <div className="flex items-center justify-between mb-6">
-          <h2 className="text-2xl font-headline font-bold text-[var(--clay-black)]">
+    <Dialog open onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle className="text-2xl font-headline font-bold text-[var(--clay-black)]">
             Auto Bundle
-          </h2>
-          <button
-            onClick={onClose}
-            className="w-10 h-10 rounded-full bg-[var(--oat-light)] hover:bg-[var(--oat-border)] flex items-center justify-center transition-colors"
-          >
-            <MaterialIcon name="close" className="text-[var(--clay-black)]" />
-          </button>
-        </div>
+          </DialogTitle>
+        </DialogHeader>
 
         <div className="flex items-center gap-2 mb-4">
           <span className="px-3 py-1 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-sm font-semibold">
@@ -180,7 +175,7 @@ export function AutoBundleModal({
             {isPending ? "Membuat..." : "Buat Paket"}
           </Button>
         </div>
-      </div>
-    </div>
+      </DialogContent>
+    </Dialog>
   );
 }

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

@@ -7,9 +7,9 @@ interface BundleItem {
   id: string;
   questionText?: string;
   title?: string;
-  examTypeName?: string;
+  examTypeName?: string | null;
   format?: string;
-  sectionTypeName?: string;
+  sectionTypeName?: string | null;
 }
 
 interface BundleSidebarProps {
@@ -82,7 +82,7 @@ export function BundleSidebar({
               Belum ada yang dipilih
             </div>
           ) : (
-            activeBundle.map((item: any, idx: number) => {
+            activeBundle.map((item, idx: number) => {
               const isQ = mode === "soal";
               return (
                 <div
@@ -93,17 +93,18 @@ export function BundleSidebar({
                     <MaterialIcon name={isQ ? "quiz" : "folder_open"} className="text-sm" />
                   </div>
                   <div className="flex-1 min-w-0">
-                    <h5 className="text-sm font-bold text-[var(--clay-black)] truncate">
+                    <h4 className="text-sm font-bold text-[var(--clay-black)] truncate">
                       {isQ ? item.questionText : item.title}
-                    </h5>
+                    </h4>
                     <p className="text-xs text-[var(--warm-charcoal)]">
                       {isQ
-                        ? `${item.examTypeName} \u00B7 ${formatLabel(item.format)}`
+                        ? `${item.examTypeName} \u00B7 ${formatLabel(item.format ?? "")}`
                         : `${item.examTypeName} \u00B7 ${item.sectionTypeName}`}
                     </p>
                   </div>
                   <button
                     onClick={() => onRemoveFromBundle(item.id, isQ ? "question" : "section")}
+                    aria-label={`Hapus ${isQ ? "soal" : "section"} dari bundle`}
                     className="text-[var(--warm-silver)] hover:text-[var(--pomegranate-400)] opacity-0 group-hover:opacity-100 transition-opacity shrink-0 cursor-pointer"
                   >
                     <MaterialIcon name="delete" className="text-sm" />

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

@@ -1,6 +1,12 @@
 import { useState } from "react";
 import { Input } from "@labas/ui/components/input";
 import { Button } from "@labas/ui/components/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@labas/ui/components/dialog";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 export function CreatePackageModal({
@@ -18,30 +24,18 @@ export function CreatePackageModal({
   examTypeName: string;
   lowCount: boolean;
 }) {
-  const dateStr = new Date().toLocaleDateString("id-ID", { day: "numeric", month: "short" });
   const [title, setTitle] = useState(`${examTypeName} Bundle — ${selectedCount} Soal`);
   const [description, setDescription] = useState("");
   const [isPublic, setIsPublic] = useState(false);
 
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4"
-      onClick={(e) => {
-        if (e.target === e.currentTarget) onClose();
-      }}
-    >
-      <div className="bg-[var(--warm-cream)] w-full max-w-lg rounded-[var(--radius-xl)] border-2 border-[var(--oat-border)] clay-shadow p-6 md:p-8">
-        <div className="flex items-center justify-between mb-6">
-          <h2 className="text-2xl font-headline font-bold text-[var(--clay-black)]">
+    <Dialog open onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle className="text-2xl font-headline font-bold text-[var(--clay-black)]">
             Buat Paket Soal
-          </h2>
-          <button
-            onClick={onClose}
-            className="w-10 h-10 rounded-full bg-[var(--oat-light)] hover:bg-[var(--oat-border)] flex items-center justify-center transition-colors"
-          >
-            <MaterialIcon name="close" className="text-[var(--clay-black)]" />
-          </button>
-        </div>
+          </DialogTitle>
+        </DialogHeader>
 
         <div className="flex items-center gap-2 mb-4">
           <span className="px-3 py-1 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-sm font-semibold">
@@ -115,7 +109,7 @@ export function CreatePackageModal({
             {isPending ? "Membuat..." : "Buat Paket"}
           </Button>
         </div>
-      </div>
-    </div>
+      </DialogContent>
+    </Dialog>
   );
 }

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

@@ -59,7 +59,12 @@ export function FilterBar({
       <div className="px-6 md:px-12 lg:px-16 max-w-7xl mx-auto pt-4 pb-3 space-y-3">
         {/* ── Tier 1: Mode tabs ── */}
         <div className="flex items-center justify-between gap-3">
-          <div className="flex gap-2">
+          <div
+            className="flex gap-2"
+            role="tablist"
+            aria-label="Mode bank soal"
+            onKeyDown={(e) => handleRovingKeyDown(e, "tab")}
+          >
             <ModeButton active={mode === "soal"} onClick={() => onSetMode("soal")}>
               Dari Soal
             </ModeButton>
@@ -68,7 +73,12 @@ export function FilterBar({
             </ModeButton>
           </div>
           {mode === "soal" && (
-            <div className="flex gap-2">
+            <div
+              className="flex gap-2"
+              role="tablist"
+              aria-label="Sumber soal"
+              onKeyDown={(e) => handleRovingKeyDown(e, "tab")}
+            >
               <TabButton active={tab === "mine"} onClick={() => onSetTab("mine")}>
                 Soal Saya
               </TabButton>
@@ -80,7 +90,12 @@ export function FilterBar({
         </div>
 
         {/* ── Tier 2: Exam type chips ── */}
-        <div className="flex gap-2 overflow-x-auto pb-1 scrollbar-hide">
+        <div
+          className="flex gap-2 overflow-x-auto pb-1 scrollbar-hide"
+          role="radiogroup"
+          aria-label="Jenis ujian"
+          onKeyDown={(e) => handleRovingKeyDown(e, "radio")}
+        >
           <ChipButton
             active={examType === ""}
             onClick={() => onSetExamType("")}
@@ -110,7 +125,12 @@ export function FilterBar({
 
         {/* ── Visibility sub-filter (only in "mine" tab) ── */}
         {mode === "soal" && tab === "mine" && onSetVisibility && (
-          <div className="flex gap-2 overflow-x-auto pb-1 scrollbar-hide">
+          <div
+            className="flex gap-2 overflow-x-auto pb-1 scrollbar-hide"
+            role="radiogroup"
+            aria-label="Visibilitas soal"
+            onKeyDown={(e) => handleRovingKeyDown(e, "radio")}
+          >
             <VisChipButton
               active={visibility === "all"}
               onClick={() => onSetVisibility("all")}
@@ -143,6 +163,7 @@ export function FilterBar({
               placeholder={mode === "soal" ? "Cari soal..." : "Cari section..."}
               value={searchText}
               onChange={(e) => onSetSearch(e.target.value)}
+              aria-label={mode === "soal" ? "Cari soal" : "Cari section"}
               className="pl-10 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] h-11"
             />
           </div>
@@ -169,6 +190,7 @@ export function FilterBar({
                 <Button
                   variant="outline"
                   onClick={onClearFilters}
+                  aria-label="Reset filter"
                   className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] h-11 clay-hover cursor-pointer"
                 >
                   <MaterialIcon name="filter_alt_off" />
@@ -242,9 +264,32 @@ export function FilterBar({
   );
 }
 
+function handleRovingKeyDown(e: React.KeyboardEvent<HTMLDivElement>, role: string) {
+  const buttons = Array.from(e.currentTarget.querySelectorAll(`[role="${role}"]`)) as HTMLElement[];
+  const idx = buttons.findIndex((b) => b === document.activeElement);
+  if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+    e.preventDefault();
+    const next = buttons[(idx + 1) % buttons.length];
+    next?.focus();
+  } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+    e.preventDefault();
+    const prev = buttons[(idx - 1 + buttons.length) % buttons.length];
+    prev?.focus();
+  } else if (e.key === "Home") {
+    e.preventDefault();
+    buttons[0]?.focus();
+  } else if (e.key === "End") {
+    e.preventDefault();
+    buttons[buttons.length - 1]?.focus();
+  }
+}
+
 function ModeButton({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
   return (
     <button
+      role="tab"
+      aria-selected={active}
+      tabIndex={active ? 0 : -1}
       onClick={onClick}
       className={`px-4 py-2 rounded-[var(--radius-lg)] text-sm font-semibold transition-all cursor-pointer ${
         active
@@ -260,6 +305,9 @@ function ModeButton({ active, onClick, children }: { active: boolean; onClick: (
 function TabButton({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
   return (
     <button
+      role="tab"
+      aria-selected={active}
+      tabIndex={active ? 0 : -1}
       onClick={onClick}
       className={`px-3 py-1.5 rounded-[var(--radius-lg)] text-xs font-semibold transition-all cursor-pointer ${
         active
@@ -275,6 +323,9 @@ function TabButton({ active, onClick, children }: { active: boolean; onClick: ()
 function VisChipButton({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
   return (
     <button
+      role="radio"
+      aria-checked={active}
+      tabIndex={active ? 0 : -1}
       onClick={onClick}
       className={`px-3 py-1.5 rounded-full text-xs font-semibold whitespace-nowrap transition-all flex items-center gap-1 cursor-pointer ${
         active
@@ -290,6 +341,9 @@ function VisChipButton({ active, onClick, children }: { active: boolean; onClick
 function ChipButton({ active, onClick, children, disabled }: { active: boolean; onClick: () => void; children: React.ReactNode; disabled?: boolean }) {
   return (
     <button
+      role="radio"
+      aria-checked={active}
+      tabIndex={active ? 0 : -1}
       onClick={onClick}
       disabled={disabled}
       className={`px-4 py-2 rounded-full text-sm font-semibold whitespace-nowrap transition-all ${

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

@@ -1,9 +1,10 @@
 import { Button } from "@labas/ui/components/button";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import { formatLabel } from "@/lib/format";
+import type { Question } from "@/lib/types";
 
 interface QuestionCardProps {
-  q: any;
+  q: Question;
   isFeatured?: boolean;
   isInBundle: boolean;
   disabled?: boolean;
@@ -99,7 +100,7 @@ export function QuestionCard({
         <div className="flex items-center justify-between mt-auto pt-3 border-t border-[var(--oat-border)]">
           <div className="flex gap-2">
             <span className="px-2 py-0.5 rounded bg-[var(--oat-light)] text-[var(--warm-charcoal)] text-xs font-medium">
-              {formatLabel(q.format)}
+              {formatLabel(q.format ?? "")}
             </span>
             <span className="px-2 py-0.5 rounded bg-[var(--oat-light)] text-[var(--warm-charcoal)] text-xs font-medium">
               Lv.{q.difficulty}
@@ -128,6 +129,7 @@ export function QuestionCard({
               </button>
               <button
                 onClick={onDelete}
+                aria-label="Hapus soal"
                 className="text-[var(--pomegranate-400)] hover:bg-[var(--pomegranate-400)]/10 px-2 py-1 rounded-full transition-colors cursor-pointer"
               >
                 <MaterialIcon name="delete" className="text-sm" />

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

@@ -1,10 +1,17 @@
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { Button } from "@labas/ui/components/button";
 import { Card, CardContent } from "@labas/ui/components/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@labas/ui/components/dialog";
 import { authClient } from "@/lib/auth-client";
 import { trpc } from "@/utils/trpc";
 import { formatLabel } from "@/lib/format";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import type { Question } from "@/lib/types";
 
 export function QuestionDetailModal({
   question,
@@ -13,7 +20,7 @@ export function QuestionDetailModal({
   onToggleSelect,
   isSelectable,
 }: {
-  question: any;
+  question: Question;
   onClose: () => void;
   isSelected: boolean;
   onToggleSelect: () => void;
@@ -32,36 +39,26 @@ export function QuestionDetailModal({
   });
 
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4"
-      onClick={(e) => {
-        if (e.target === e.currentTarget) onClose();
-      }}
-    >
-      <div className="bg-[var(--warm-cream)] w-full max-w-3xl max-h-[90vh] overflow-y-auto rounded-[var(--radius-xl)] border-2 border-[var(--oat-border)] clay-shadow p-6 md:p-8">
-        {/* Header */}
-        <div className="flex items-start justify-between mb-6">
-          <div className="flex gap-2 flex-wrap">
-            <span className="px-3 py-1.5 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-sm font-semibold">
-              {question.examTypeName}
-            </span>
-            <span className="px-3 py-1.5 rounded-full bg-[var(--slushie-500)]/20 text-[var(--slushie-800)] text-sm font-semibold">
-              {question.sectionTypeName}
-            </span>
-            <span className="px-3 py-1.5 rounded-full bg-[var(--lemon-400)]/30 text-[var(--lemon-800)] text-sm font-semibold">
-              {formatLabel(question.format)}
-            </span>
-            <span className="px-3 py-1.5 rounded-full bg-[var(--oat-light)] text-[var(--warm-charcoal)] text-sm font-semibold">
-              Level {question.difficulty}
-            </span>
+    <Dialog open onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <div className="flex items-start justify-between">
+            <div className="flex gap-2 flex-wrap">
+              <span className="px-3 py-1.5 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-sm font-semibold">
+                {question.examTypeName}
+              </span>
+              <span className="px-3 py-1.5 rounded-full bg-[var(--slushie-500)]/20 text-[var(--slushie-800)] text-sm font-semibold">
+                {question.sectionTypeName}
+              </span>
+              <span className="px-3 py-1.5 rounded-full bg-[var(--lemon-400)]/30 text-[var(--lemon-800)] text-sm font-semibold">
+                {formatLabel(question.format ?? "")}
+              </span>
+              <span className="px-3 py-1.5 rounded-full bg-[var(--oat-light)] text-[var(--warm-charcoal)] text-sm font-semibold">
+                Level {question.difficulty}
+              </span>
+            </div>
           </div>
-          <button
-            onClick={onClose}
-            className="w-10 h-10 rounded-full bg-[var(--oat-light)] hover:bg-[var(--oat-border)] flex items-center justify-center transition-colors"
-          >
-            <MaterialIcon name="close" className="text-[var(--clay-black)]" />
-          </button>
-        </div>
+        </DialogHeader>
 
         {/* Passage */}
         <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] mb-6">
@@ -112,7 +109,7 @@ export function QuestionDetailModal({
                 <span className="font-semibold text-[var(--clay-black)]">
                   Jenis soal:{" "}
                 </span>
-                {formatLabel(question.format)}
+                {formatLabel(question.format ?? "")}
               </div>
             )}
           </CardContent>
@@ -139,6 +136,7 @@ export function QuestionDetailModal({
               <button
                 key={star}
                 onClick={() => rateMutation.mutate({ questionId: question.id, score: star })}
+                aria-label={`Nilai ${star} bintang`}
                 className="transition-transform hover:scale-110"
               >
                 <MaterialIcon
@@ -208,7 +206,7 @@ export function QuestionDetailModal({
             Tutup
           </Button>
         </div>
-      </div>
-    </div>
+      </DialogContent>
+    </Dialog>
   );
 }

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

@@ -1,12 +1,13 @@
 import { Card, CardContent } from "@labas/ui/components/card";
 import { Button } from "@labas/ui/components/button";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import type { PackageSection } from "@/lib/types";
 
 interface SectionBrowserProps {
   isLoading: boolean;
-  groupedSections: Record<string, any[]>;
+  groupedSections: Record<string, PackageSection[]>;
   isSectionInBundle: (id: string) => boolean;
-  onToggleSection: (s: any) => void;
+  onToggleSection: (s: PackageSection) => void;
 }
 
 export function SectionBrowser({
@@ -39,11 +40,11 @@ export function SectionBrowser({
       {Object.entries(groupedSections).map(([groupKey, groupSections]) => (
         <Card key={groupKey} className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
           <CardContent className="p-5">
-            <h3 className="font-headline font-bold text-[var(--clay-black)] mb-4 text-sm uppercase tracking-wider">
+            <h2 className="font-headline font-bold text-[var(--clay-black)] mb-4 text-sm uppercase tracking-wider">
               {groupKey}
-            </h3>
+            </h2>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-              {groupSections.map((s: any) => {
+              {groupSections.map((s) => {
                 const inBundle = isSectionInBundle(s.id);
                 return (
                   <div

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

@@ -4,10 +4,11 @@ import { Button } from "@labas/ui/components/button";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import { QuestionCard } from "./QuestionCard";
 import { CalloutCard } from "./CalloutCard";
+import type { Question } from "@/lib/types";
 
 interface SoalBrowserProps {
   isLoading: boolean;
-  questions: any[];
+  questions: Question[];
   hasMore: boolean;
   isFetchingNextPage: boolean;
   hasFilters: boolean;
@@ -16,8 +17,8 @@ interface SoalBrowserProps {
   tab: "mine" | "public";
   filterKey: string;
   isQuestionInBundle: (id: string) => boolean;
-  onToggleQuestion: (q: any) => void;
-  onOpenDetail: (q: any) => void;
+  onToggleQuestion: (q: Question) => void;
+  onOpenDetail: (q: Question) => void;
   onTogglePublic: (id: string) => void;
   onDelete: (id: string) => void;
   onLoadMore: () => void;
@@ -47,7 +48,7 @@ export function SoalBrowser({
   onPublishAllPrivate,
 }: SoalBrowserProps) {
   const sentinelRef = useRef<HTMLDivElement>(null);
-  const isLocked = (q: any) => !!lockedExamType && q.examTypeId !== lockedExamType;
+  const isLocked = (q: Question) => !!lockedExamType && q.examTypeId !== lockedExamType;
 
   // ── Bulk mode ──
   const [bulkMode, setBulkMode] = useState(false);
@@ -64,7 +65,7 @@ export function SoalBrowser({
     : false;
 
   const privateQuestions = questions.filter(
-    (q: any) => !q.isPublic && q.creatorUserId === userId,
+    (q) => !q.isPublic && q.creatorUserId === userId,
   );
 
   const handleDismissCallout = () => {
@@ -75,7 +76,7 @@ export function SoalBrowser({
 
   const handlePublishAllPrivate = () => {
     if (onPublishAllPrivate && privateQuestions.length > 0) {
-      onPublishAllPrivate(privateQuestions.map((q: any) => q.id));
+      onPublishAllPrivate(privateQuestions.map((q) => q.id));
     }
   };
 
@@ -104,7 +105,7 @@ export function SoalBrowser({
   const clearSelection = () => setSelectedIds(new Set());
 
   const selectAll = () => {
-    setSelectedIds(new Set(questions.map((q: any) => q.id)));
+    setSelectedIds(new Set(questions.map((q) => q.id)));
   };
 
   const handleBulkPublish = () => {

apps/web/src/components/generate/ResultSection.tsx

@@ -15,7 +15,7 @@ export function ResultSection({ result, generatedPackageId, onClear }: ResultSec
     <div className="mt-16 space-y-6">
       <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
         <div>
-          <h2 className="text-2xl font-headline font-bold text-[var(--clay-black)]">Hasil Generate</h2>
+          <h3 className="text-2xl font-headline font-bold text-[var(--clay-black)]">Hasil Generate</h3>
           <p className="text-sm text-[var(--warm-charcoal)] mt-1">
             Paket latihan berhasil dibuat! Soal juga tersimpan di Bank Soal (privat). Jawaban & penjelasan disembunyikan agar latihan tetap fair.
           </p>

apps/web/src/components/package/EditPackageModal.tsx

@@ -1,7 +1,12 @@
 import { useState } from "react";
 import { Input } from "@labas/ui/components/input";
 import { Button } from "@labas/ui/components/button";
-import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@labas/ui/components/dialog";
 
 export function EditPackageModal({
   initialTitle,
@@ -27,24 +32,13 @@ export function EditPackageModal({
   const [isPublic, setIsPublic] = useState(initialIsPublic);
 
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4"
-      onClick={(e) => {
-        if (e.target === e.currentTarget) onClose();
-      }}
-    >
-      <div className="bg-[var(--warm-cream)] w-full max-w-lg rounded-[var(--radius-xl)] border-2 border-[var(--oat-border)] clay-shadow p-6 md:p-8">
-        <div className="flex items-center justify-between mb-6">
-          <h2 className="text-2xl font-headline font-bold text-[var(--clay-black)]">
+    <Dialog open onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle className="text-2xl font-headline font-bold text-[var(--clay-black)]">
             Edit Paket
-          </h2>
-          <button
-            onClick={onClose}
-            className="w-10 h-10 rounded-full bg-[var(--oat-light)] hover:bg-[var(--oat-border)] flex items-center justify-center transition-colors"
-          >
-            <MaterialIcon name="close" className="text-[var(--clay-black)]" />
-          </button>
-        </div>
+          </DialogTitle>
+        </DialogHeader>
 
         <div className="space-y-4">
           <div>
@@ -100,7 +94,7 @@ export function EditPackageModal({
             {isPending ? "Menyimpan..." : "Simpan"}
           </Button>
         </div>
-      </div>
-    </div>
+      </DialogContent>
+    </Dialog>
   );
 }

apps/web/src/components/routes/BankPage.tsx

@@ -17,6 +17,8 @@ import { SoalBrowser } from "@/components/bank/SoalBrowser";
 import { SectionBrowser } from "@/components/bank/SectionBrowser";
 import { BundleSidebar } from "@/components/bank/BundleSidebar";
 import { toast } from "sonner";
+import { getErrorMessage } from "@/lib/error-utils";
+import type { Question, PackageSection } from "@/lib/types";
 import type { Step } from "react-joyride";
 import { createFileRoute, redirect } from "@tanstack/react-router";
 import z from "zod";
@@ -62,20 +64,20 @@ export function BankComponent() {
   const visibilityFilter = search.visibility ?? "all";
 
   // ── Infinite scroll state ──
-  const [allQuestions, setAllQuestions] = useState<any[]>([]);
+  const [allQuestions, setAllQuestions] = useState<Question[]>([]);
   const [offset, setOffset] = useState(0);
   const limit = 12;
   const filterKey = JSON.stringify({ searchText, examType, section, format, difficulty, tab, mode, visibility: visibilityFilter });
 
   // ── Sidebar / Bundle State ──
-  const [bundleQuestions, setBundleQuestions] = useState<any[]>([]);
-  const [bundleSections, setBundleSections] = useState<any[]>([]);
+  const [bundleQuestions, setBundleQuestions] = useState<Question[]>([]);
+  const [bundleSections, setBundleSections] = useState<PackageSection[]>([]);
   const [bundleTitle, setBundleTitle] = useState("");
   const [bundleDescription, setBundleDescription] = useState("");
   const [bundleIsPublic, setBundleIsPublic] = useState(false);
 
   // ── Modals ──
-  const [selectedQuestion, setSelectedQuestion] = useState<any | null>(null);
+  const [selectedQuestion, setSelectedQuestion] = useState<Question | null>(null);
   const [isAutoBundleOpen, setIsAutoBundleOpen] = useState(false);
 
   // ── Filter UI State ──
@@ -118,8 +120,8 @@ export function BankComponent() {
       setAllQuestions(data.questions ?? []);
     } else {
       setAllQuestions((prev) => {
-        const existingIds = new Set(prev.map((q: any) => q.id));
-        const newQs = (data.questions ?? []).filter((q: any) => !existingIds.has(q.id));
+        const existingIds = new Set(prev.map((q) => q.id));
+        const newQs = (data.questions ?? []).filter((q: Question) => !existingIds.has(q.id));
         return [...prev, ...newQs];
       });
     }
@@ -158,23 +160,24 @@ export function BankComponent() {
     onSuccess: () => questionQuery.refetch(),
   });
 
-  const bulkPublish = useMutation({
-    ...trpc.question.bulkPublish.mutationOptions(),
-    onSuccess: (data) => {
-      questionQuery.refetch();
-      if (data.skipped > 0) {
-        toast.success(
-          `${data.updated} soal dipublikasikan, ${data.skipped} dilewati`,
-          { description: "Beberapa soal bukan milikmu atau sudah tidak tersedia." },
-        );
-      } else {
-        toast.success(`${data.updated} soal berhasil dipublikasikan`);
-      }
-    },
-    onError: (err: any) => {
-      toast.error("Gagal mempublikasikan. Coba refresh dan pilih ulang soal.", { description: err.message });
-    },
-  });
+  const bulkPublish = useMutation(
+    trpc.question.bulkPublish.mutationOptions({
+      onSuccess: (data) => {
+        questionQuery.refetch();
+        if (data.skipped > 0) {
+          toast.success(
+            `${data.updated} soal dipublikasikan, ${data.skipped} dilewati`,
+            { description: "Beberapa soal bukan milikmu atau sudah tidak tersedia." },
+          );
+        } else {
+          toast.success(`${data.updated} soal berhasil dipublikasikan`);
+        }
+      },
+      onError: (err) => {
+        toast.error("Gagal mempublikasikan. Coba refresh dan pilih ulang soal.", { description: getErrorMessage(err) });
+      },
+    }),
+  );
 
   // ── Navigation helpers ──
   const setMode = (newMode: Mode) => {
@@ -258,7 +261,7 @@ export function BankComponent() {
   const isSectionInBundle = (sid: string) =>
     bundleSections.some((s) => s.id === sid);
 
-  const toggleQuestion = (q: any) => {
+  const toggleQuestion = (q: Question) => {
     if (lockedExamType && q.examTypeId !== lockedExamType) {
       toast.error(`Hanya bisa memilih soal dari ${EXAM_TYPES.find((t) => t.id === lockedExamType)?.name ?? lockedExamType}`);
       return;
@@ -270,7 +273,7 @@ export function BankComponent() {
     });
   };
 
-  const toggleSection = (s: any) => {
+  const toggleSection = (s: PackageSection) => {
     setBundleSections((prev) => {
       const exists = prev.find((x) => x.id === s.id);
       if (exists) return prev.filter((x) => x.id !== s.id);
@@ -314,8 +317,8 @@ export function BankComponent() {
       setBundleQuestions([]);
       setBundleTitle("");
       setBundleDescription("");
-    } catch (err: any) {
-      toast.error("Gagal membuat paket", { description: err.message });
+    } catch (err: unknown) {
+      toast.error("Gagal membuat paket", { description: getErrorMessage(err) });
     }
   };
 
@@ -327,7 +330,7 @@ export function BankComponent() {
         description: bundleDescription,
         isPublic: bundleIsPublic,
         sections: bundleSections.map((s, i) => ({
-          sourcePackageId: s.packageId,
+          sourcePackageId: s.packageId ?? "",
           sourceSectionId: s.id,
           orderIndex: i,
         })),
@@ -336,8 +339,8 @@ export function BankComponent() {
       setBundleTitle("");
       setBundleDescription("");
       toast.success("Combo paket berhasil dibuat!");
-    } catch (err: any) {
-      toast.error("Gagal membuat combo", { description: err.message });
+    } catch (err: unknown) {
+      toast.error("Gagal membuat combo", { description: getErrorMessage(err) });
     }
   };
 
@@ -388,12 +391,12 @@ export function BankComponent() {
   const questions = allQuestions;
 
   const sections = sectionQuery.data?.sections ?? [];
-  const groupedSections = sections.reduce((groups: Record<string, any[]>, s: any) => {
+  const groupedSections = sections.reduce<Record<string, PackageSection[]>>((groups, s) => {
     const key = `${s.examTypeName ?? "Unknown"} — ${s.packageTitle ?? "Untitled"}`;
     if (!groups[key]) groups[key] = [];
-    groups[key].push(s);
+    groups[key].push(s as PackageSection);
     return groups;
-  }, {} as Record<string, any[]>);
+  }, {});
 
   const isCreating =
     createPackage.isPending ||

apps/web/src/components/routes/GeneratePage.tsx

@@ -181,17 +181,18 @@ export function RouteComponent() {
           maxTokens: selectedConfig!.maxTokens ?? 16384,
         };
 
+    type GenerateMutateInput = Parameters<typeof generate.mutate>[0];
     generate.mutate({
-      examType: examType as any,
-      section: selectedSections[0] as any,
-      selectedSections: selectedSections as any,
-      formats: selectedFormats as any,
+      examType,
+      section: selectedSections[0],
+      selectedSections,
+      formats: selectedFormats,
       difficulty: difficulty + 1,
       topics: selectedTopics,
       questionCount,
       mode,
       apiKeyConfig,
-    } as any);
+    } as GenerateMutateInput);
   };
 
   const sectionSplits = (() => {
@@ -656,13 +657,37 @@ export function RouteComponent() {
             </div>
 
             {/* Tab Bar */}
-            <div className="flex gap-1 mb-6 border-b border-[var(--oat-border)] overflow-x-auto">
+            <div
+              className="flex gap-1 mb-6 border-b border-[var(--oat-border)] overflow-x-auto"
+              role="tablist"
+              aria-label="Hasil generate"
+              onKeyDown={(e) => {
+                if (completedResults.length === 0) return;
+                if (e.key === "ArrowRight") {
+                  e.preventDefault();
+                  setActiveTabIdx((i) => Math.min(completedResults.length - 1, i + 1));
+                } else if (e.key === "ArrowLeft") {
+                  e.preventDefault();
+                  setActiveTabIdx((i) => Math.max(0, i - 1));
+                } else if (e.key === "Home") {
+                  e.preventDefault();
+                  setActiveTabIdx(0);
+                } else if (e.key === "End") {
+                  e.preventDefault();
+                  setActiveTabIdx(completedResults.length - 1);
+                }
+              }}
+            >
               {completedResults.map((res, idx) => {
                 const questions = res.result?.questions ?? [];
                 const isActive = idx === activeTabIdx;
                 return (
                   <button
                     key={res.jobId}
+                    role="tab"
+                    aria-selected={isActive}
+                    aria-controls={`generate-panel-${idx}`}
+                    tabIndex={isActive ? 0 : -1}
                     onClick={() => setActiveTabIdx(idx)}
                     className={`flex items-center gap-2 px-4 py-3 text-sm font-semibold rounded-t-lg transition-all whitespace-nowrap border-b-2 min-h-[44px] ${
                       isActive
@@ -680,15 +705,18 @@ export function RouteComponent() {
                     <span className="text-xs text-[var(--warm-charcoal)]">
                       {questions.length} soal
                     </span>
-                    <button
+                    <span
                       onClick={(e) => {
                         e.stopPropagation();
                         removeJob(res.jobId);
                       }}
-                      className="w-5 h-5 flex items-center justify-center rounded-full hover:bg-[var(--pomegranate-400)]/10 text-[var(--warm-charcoal)] hover:text-[var(--pomegranate-400)] transition-colors"
+                      role="button"
+                      aria-label={`Tutup tab ${res.mode}`}
+                      tabIndex={-1}
+                      className="w-5 h-5 flex items-center justify-center rounded-full hover:bg-[var(--pomegranate-400)]/10 text-[var(--warm-charcoal)] hover:text-[var(--pomegranate-400)] transition-colors cursor-pointer"
                     >
                       <MaterialIcon name="close" className="text-xs" />
-                    </button>
+                    </span>
                   </button>
                 );
               })}
@@ -696,11 +724,17 @@ export function RouteComponent() {
 
             {/* Active Tab Content */}
             {activeResult && (
-              <ResultSection
-                result={activeResult.result}
-                generatedPackageId={activeResult.generatedPackageId}
-                onClear={resetAll}
-              />
+              <div
+                role="tabpanel"
+                id={`generate-panel-${activeTabIdx}`}
+                aria-labelledby={`generate-tab-${activeTabIdx}`}
+              >
+                <ResultSection
+                  result={activeResult.result}
+                  generatedPackageId={activeResult.generatedPackageId}
+                  onClear={resetAll}
+                />
+              </div>
             )}
           </div>
         )}

apps/web/src/components/routes/PackagesPage.tsx

@@ -7,6 +7,11 @@ import { trpc } from "@/utils/trpc";
 import { Input } from "@labas/ui/components/input";
 import { Button } from "@labas/ui/components/button";
 import { Card, CardContent } from "@labas/ui/components/card";
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+} from "@labas/ui/components/tabs";
 import {
   Select,
   SelectContent,
@@ -209,28 +214,22 @@ export function PackagesComponent() {
       <GettingStartedCard />
 
       {/* Tabs */}
-      <div className="flex gap-2 mb-6">
-        <button
-          onClick={() => setTab("all")}
-          className={`px-4 py-2 rounded-[var(--radius-lg)] text-sm font-semibold transition-all ${
-            tab === "all"
-              ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow"
-              : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] border-2 border-[var(--oat-border)] hover:bg-[var(--oat-light)]"
-          }`}
-        >
-          Semua Paket
-        </button>
-        <button
-          onClick={() => setTab("mine")}
-          className={`px-4 py-2 rounded-[var(--radius-lg)] text-sm font-semibold transition-all ${
-            tab === "mine"
-              ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow"
-              : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] border-2 border-[var(--oat-border)] hover:bg-[var(--oat-light)]"
-          }`}
-        >
-          Paket Saya
-        </button>
-      </div>
+      <Tabs value={tab} onValueChange={(v) => setTab(v as Tab)} className="mb-6">
+        <TabsList variant="line" className="h-11 bg-transparent">
+          <TabsTrigger
+            value="all"
+            className="px-4 py-2 rounded-[var(--radius-lg)] text-sm font-semibold data-[active=true]:bg-[var(--clay-black)] data-[active=true]:text-[var(--pure-white)] data-[active=true]:clay-shadow bg-[var(--pure-white)] text-[var(--warm-charcoal)] border-2 border-[var(--oat-border)] hover:bg-[var(--oat-light)] transition-all"
+          >
+            Semua Paket
+          </TabsTrigger>
+          <TabsTrigger
+            value="mine"
+            className="px-4 py-2 rounded-[var(--radius-lg)] text-sm font-semibold data-[active=true]:bg-[var(--clay-black)] data-[active=true]:text-[var(--pure-white)] data-[active=true]:clay-shadow bg-[var(--pure-white)] text-[var(--warm-charcoal)] border-2 border-[var(--oat-border)] hover:bg-[var(--oat-light)] transition-all"
+          >
+            Paket Saya
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
 
       {/* Filters */}
       <div data-tour="packages-filters" className="flex flex-col md:flex-row gap-3 mb-8">
@@ -240,6 +239,7 @@ export function PackagesComponent() {
             placeholder="Cari paket..."
             value={searchText}
             onChange={(e) => setSearch(e.target.value)}
+            aria-label="Cari paket"
             className="pl-10 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] h-11"
           />
         </div>

apps/web/src/components/routes/SettingsPage.tsx

@@ -90,9 +90,9 @@ function TokenUsageSection() {
           </div>
 
           <div>
-            <h3 className="text-sm font-semibold text-[var(--clay-black)] mb-3">
+            <h2 className="text-sm font-semibold text-[var(--clay-black)] mb-3">
               Riwayat Generate Hari Ini
-            </h3>
+            </h2>
             {isLoading ? (
               <div className="space-y-2">
                 {[1, 2, 3].map((i) => (

apps/web/src/components/settings/AccountSettings.tsx

@@ -4,6 +4,7 @@ import { Input } from "@labas/ui/components/input";
 import { Label } from "@labas/ui/components/label";
 import { Button } from "@labas/ui/components/button";
 import { toast } from "sonner";
+import { getErrorMessage } from "@/lib/error-utils";
 import { authClient } from "@/lib/auth-client";
 
 export function AccountSettings() {
@@ -39,8 +40,8 @@ export function AccountSettings() {
       setCurrentPassword("");
       setNewPassword("");
       setConfirmPassword("");
-    } catch (err: any) {
-      toast.error(err?.message || "Gagal mengubah password");
+    } catch (err: unknown) {
+      toast.error(getErrorMessage(err) || "Gagal mengubah password");
     } finally {
       setIsChangingPassword(false);
     }
@@ -54,8 +55,8 @@ export function AccountSettings() {
       await authClient.changeEmail({ newEmail });
       toast.success("Email berhasil diubah. Cek email baru Anda untuk verifikasi.");
       setNewEmail("");
-    } catch (err: any) {
-      toast.error(err?.message || "Gagal mengubah email");
+    } catch (err: unknown) {
+      toast.error(getErrorMessage(err) || "Gagal mengubah email");
     } finally {
       setIsChangingEmail(false);
     }

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

@@ -7,13 +7,14 @@ const ACCENT_CHARS: Record<string, string[]> = {
 };
 
 interface AccentKeyboardProps {
-  examType: string;
+  examType?: string;
   onInsert: (char: string) => void;
   disabled?: boolean;
 }
 
 export function AccentKeyboard({ examType, onInsert, disabled }: AccentKeyboardProps) {
-  const chars = ACCENT_CHARS[examType];
+  if (!examType) return null;
+  const chars: string[] | undefined = ACCENT_CHARS[examType];
   if (!chars || chars.length === 0) return null;
 
   return (
@@ -21,7 +22,7 @@ export function AccentKeyboard({ examType, onInsert, disabled }: AccentKeyboardP
       <span className="w-full text-[10px] font-medium text-[var(--warm-charcoal)] uppercase tracking-wider mb-0.5">
         Special Characters
       </span>
-      {chars.map((char) => (
+      {chars.map((char: string) => (
         <button
           key={char}
           type="button"

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

@@ -7,6 +7,7 @@ import { trpc } from "@/utils/trpc";
 import { QuestionInput } from "./QuestionInput";
 import { AccentKeyboard } from "./AccentKeyboard";
 import { parseFurigana } from "@/lib/furigana";
+import type { Question, Package, PackageSection } from "@/lib/types";
 import { AttemptHeader } from "./attempt/AttemptHeader";
 import { FloatingNav } from "./attempt/FloatingNav";
 import { FinishDialog } from "./attempt/FinishDialog";
@@ -14,7 +15,7 @@ import { AbandonDialog } from "./attempt/AbandonDialog";
 
 interface AttemptTestViewProps {
   attemptId: string;
-  pkg: any;
+  pkg: Package & { sections: PackageSection[] };
   currentSectionIdx: number;
   setCurrentSectionIdx: (idx: number) => void;
   answers: Record<string, string>;
@@ -32,7 +33,7 @@ interface AttemptTestViewProps {
 }
 
 interface QuestionCardProps {
-  q: any;
+  q: Question & { _examType?: string; _isRtl?: boolean; _useFurigana?: boolean };
   globalIdx: number;
   answerValue: string;
   sectionResultId: string | undefined;
@@ -83,7 +84,7 @@ const QuestionCard = memo(function QuestionCard({
             {globalIdx}
           </span>
           <h2 className="text-xl font-bold text-[var(--clay-black)] capitalize">
-            {q.format.replace(/_/g, " ")}
+            {(q.format ?? "").replace(/_/g, " ")}
           </h2>
         </div>
         <button
@@ -101,7 +102,7 @@ const QuestionCard = memo(function QuestionCard({
       </div>
 
       <p className="text-[var(--warm-charcoal)] mb-6 font-medium leading-relaxed" dir={q._isRtl ? "rtl" : undefined}>
-        {q._useFurigana ? parseFurigana(q.questionText) : q.questionText}
+        {q._useFurigana ? parseFurigana(q.questionText ?? "") : (q.questionText ?? "")}
       </p>
 
       <div className="pl-0">
@@ -165,7 +166,7 @@ export function AttemptTestView({
   const currentSection = pkg.sections[currentSectionIdx];
   const sectionData = attempt?.sections?.[currentSectionIdx];
   const sectionResultId = sectionData?.sectionResultId;
-  const examType: string = pkg.examType ?? "";
+  const examType: string = pkg.examTypeName ?? "";
   const isRtl = examType === "TOAFL";
   const useFurigana = examType === "JLPT" || examType === "TOPIK";
 
@@ -176,7 +177,7 @@ export function AttemptTestView({
     const key = `${currentSectionIdx}:${sectionResultId}`;
     if (flushKeyRef.current === key) return;
     flushKeyRef.current = key;
-    for (const q of currentSection.questions as any[]) {
+    for (const q of currentSection.questions ?? []) {
       const v = answers[q.id];
       if (v) void onAnswerChange(q.id, sectionResultId, v);
     }
@@ -193,9 +194,9 @@ export function AttemptTestView({
 
   // 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 });
+  pkg.sections.forEach((sec: PackageSection, sIdx: number) => {
+    sec.questions?.forEach((q: Question, qIdx: number) => {
+      allQuestions.push({ id: q.id, sectionIdx: sIdx, localIdx: qIdx, passageText: q.passageText ?? undefined });
     });
   });
 
@@ -207,7 +208,7 @@ export function AttemptTestView({
     }
   }, [allQuestions]);
 
-  const addQuestionMeta = (q: any) => ({
+  const addQuestionMeta = (q: Question) => ({
     ...q,
     _examType: examType,
     _isRtl: isRtl,
@@ -215,7 +216,7 @@ export function AttemptTestView({
   });
 
   const activeQuestion = currentSection?.questions?.find(
-    (q: any) => q.id === activeQuestionId,
+    (q: Question) => q.id === activeQuestionId,
   );
   const activeQuestionWithMeta = activeQuestion ? addQuestionMeta(activeQuestion) : null;
   const passageToShow =
@@ -279,8 +280,8 @@ export function AttemptTestView({
 
       <div className="h-full flex flex-col bg-[var(--warm-cream)] overflow-hidden">
         <AttemptHeader
-          pkgTitle={pkg.title}
-          currentSectionTitle={currentSection.title}
+          pkgTitle={pkg.title ?? ""}
+          currentSectionTitle={currentSection.title ?? ""}
           timeElapsed={timeElapsed}
           answeredCount={answeredCount}
           totalQuestions={totalQuestions}

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

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef, useCallback, useMemo } from "react";
 import { Input } from "@labas/ui/components/input";
 
 import { MCQ_FORMATS } from "@/lib/question-formats";
+import type { Question } from "@/lib/types";
 
 const TRUE_FALSE_CHOICES = [
   { key: "TRUE", label: "True" },
@@ -82,6 +83,7 @@ function DebouncedTextInput({
 
   return (
     <Input
+      aria-label="Jawaban esai"
       value={localValue}
       onChange={handleChange}
       onBlur={handleBlur}
@@ -98,7 +100,7 @@ export function QuestionInput({
   onChange,
   disabled,
 }: {
-  question: any;
+  question: Question;
   value: string;
   onChange: (val: string) => void;
   disabled?: boolean;
@@ -147,6 +149,7 @@ export function QuestionInput({
                 onChange={(e) => updateMapping(opt.key, e.target.value)}
                 disabled={disabled}
                 placeholder="Padanan..."
+                aria-label="Padanan jawaban"
                 className="w-24 px-3 py-2 text-sm rounded-[var(--radius-md)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] focus:outline-none focus:border-[var(--matcha-600)]"
               />
             </div>
@@ -156,7 +159,7 @@ export function QuestionInput({
     );
   }
 
-  if (MCQ_FORMATS.includes(format)) {
+  if ((MCQ_FORMATS as readonly string[]).includes(format ?? "")) {
     if (!options || options.length === 0) {
       return (
         <div className="text-sm text-[var(--warm-silver)] italic">

apps/web/src/components/test/attempt/AbandonDialog.tsx

@@ -1,4 +1,11 @@
 import { Button } from "@labas/ui/components/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@labas/ui/components/dialog";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 interface AbandonDialogProps {
@@ -8,35 +15,23 @@ interface AbandonDialogProps {
 }
 
 export function AbandonDialog({ open, onClose, onConfirm }: AbandonDialogProps) {
-  if (!open) return null;
-
   return (
-    <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) onClose();
-      }}
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="abandon-dialog-title"
-    >
-      <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-400)]" />
+    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <div className="flex items-center gap-3">
+            <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-400)]" />
+            </div>
+            <DialogTitle className="text-xl font-headline font-bold text-[var(--clay-black)]">
+              Keluar dari Latihan?
+            </DialogTitle>
           </div>
-          <h2 id="abandon-dialog-title" 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">
+        </DialogHeader>
+        <DialogDescription 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.
+        </DialogDescription>
+        <div className="flex gap-3 mt-2">
           <Button
             variant="outline"
             onClick={onClose}
@@ -51,7 +46,7 @@ export function AbandonDialog({ open, onClose, onConfirm }: AbandonDialogProps)
             Keluar
           </Button>
         </div>
-      </div>
-    </div>
+      </DialogContent>
+    </Dialog>
   );
 }

apps/web/src/components/test/attempt/FinishDialog.tsx

@@ -1,4 +1,11 @@
 import { Button } from "@labas/ui/components/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@labas/ui/components/dialog";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 interface FinishDialogProps {
@@ -10,44 +17,37 @@ interface FinishDialogProps {
 }
 
 export function FinishDialog({ open, onClose, onConfirm, answeredCount, totalQuestions }: FinishDialogProps) {
-  if (!open) return null;
-
   return (
-    <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) onClose();
-      }}
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="finish-dialog-title"
-    >
-      <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-400)]" />
+    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <div className="flex items-center gap-3">
+            <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-400)]" />
+            </div>
+            <DialogTitle className="text-xl font-headline font-bold text-[var(--clay-black)]">
+              Selesaikan Latihan?
+            </DialogTitle>
           </div>
-          <h2 id="finish-dialog-title" 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)]">
+        </DialogHeader>
+        <DialogDescription
+          className="space-y-3 *:text-sm"
+          render={<div />}
+        >
+          <p className="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">
+            <div className="p-3 rounded-[var(--radius-md)] bg-[var(--lemon-400)]/20 border-2 border-[var(--lemon-500)]/30 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)]">
+          <p className="text-[var(--warm-charcoal)]">
             Setelah selesai, jawaban tidak bisa diubah dan hasil akan langsung terlihat.
           </p>
-        </div>
-
-        <div className="flex gap-3">
+        </DialogDescription>
+        <div className="flex gap-3 mt-2">
           <Button
             variant="outline"
             onClick={onClose}
@@ -62,7 +62,7 @@ export function FinishDialog({ open, onClose, onConfirm, answeredCount, totalQue
             Selesaikan
           </Button>
         </div>
-      </div>
-    </div>
+      </DialogContent>
+    </Dialog>
   );
 }

apps/web/src/components/test/attempt/FloatingNav.tsx

@@ -1,4 +1,4 @@
-import type { RefObject } from "react";
+import type { RefObject, KeyboardEvent } from "react";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 interface FloatingNavProps {
@@ -23,6 +23,26 @@ export function FloatingNav({
   const isAnswered = (qId: string) => !!answers[qId];
   const isMarked = (qId: string) => markedQuestions.has(qId);
 
+  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (questions.length === 0) return;
+    const activeIdx = questions.findIndex((q) => q.id === activeQuestionId);
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      const next = Math.min(questions.length - 1, Math.max(0, activeIdx) + 1);
+      onGoToQuestion(questions[next].id);
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      const prev = Math.max(0, Math.max(0, activeIdx) - 1);
+      onGoToQuestion(questions[prev].id);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      onGoToQuestion(questions[0].id);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      onGoToQuestion(questions[questions.length - 1].id);
+    }
+  };
+
   return (
     <nav
       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]"
@@ -43,6 +63,7 @@ export function FloatingNav({
         className="flex items-center gap-1 overflow-x-auto hide-scrollbar max-w-[60vw] sm:max-w-[50vw] md:max-w-[40vw] lg:max-w-[30vw]"
         role="tablist"
         aria-label="Daftar soal"
+        onKeyDown={handleKeyDown}
       >
         {questions.map((q, gIdx) => {
           const answered = isAnswered(q.id);
@@ -56,6 +77,8 @@ export function FloatingNav({
               onClick={() => onGoToQuestion(q.id)}
               role="tab"
               aria-selected={isActive}
+              tabIndex={isActive ? 0 : -1}
+              aria-controls={`question-panel-${q.id}`}
               aria-label={`Soal ${gIdx + 1}${marked ? " (ditandai)" : ""}${answered ? " (sudah dijawab)" : ""}`}
               className={`relative w-7 h-7 sm:w-8 sm:h-8 shrink-0 flex items-center justify-center rounded-full font-bold text-[10px] sm:text-xs transition-all ${
                 answered

apps/web/src/hooks/use-generation-jobs.ts

@@ -1,277 +1,54 @@
-import { useState, useEffect, useCallback, useMemo, useRef } from "react";
-import { useQuery, useQueries } from "@tanstack/react-query";
+import { useEffect, useCallback } from "react";
+import { useQuery } from "@tanstack/react-query";
 import { trpc, trpcClient } from "@/utils/trpc";
-import type { GenerationResult } from "@labas/ai";
 import { authClient } from "@/lib/auth-client";
+import { useJobState } from "./use-job-state";
+import { usePollingTransport } from "./use-polling-transport";
+import { MAX_PARALLEL, ACTIVE_STATUSES, isTerminal } from "./use-job-shared";
+import type { GenerationResult } from "@labas/ai";
 
-const STORAGE_KEY = "labas_active_jobs";
-const RESULTS_KEY = "labas_completed_results";
-const CLEARED_JOBS_KEY = "labas_cleared_jobs";
-const MAX_PARALLEL = 3;
-
-export interface ActiveJob {
-  id: string;
-  status: string;
-  progress: number;
-  progressMessage: string;
-  mode: string;
-  logs: unknown[];
-  resultJson: unknown;
-  errorMessage?: string;
-  examTypeId?: string;
-  sectionTypeId?: string;
-  questionCount?: number;
-}
-
-export interface CompletedResult {
-  jobId: string;
-  result: GenerationResult;
-  generatedPackageId: string | null;
-  examType?: string;
-  section?: string;
-  mode: string;
-  timestamp: number;
-}
-
-const ACTIVE_STATUSES = new Set([
-  "pending",
-  "running",
-  "running_fast",
-  "partial_ready",
-  "running_quality",
-]);
-
-const TERMINAL_STATUSES = new Set(["completed", "failed", "cancelled"]);
-
-function isTerminal(status: string): boolean {
-  return TERMINAL_STATUSES.has(status);
-}
-
-function readStoredIds(): string[] {
-  try {
-    const raw = sessionStorage.getItem(STORAGE_KEY);
-    return raw ? (JSON.parse(raw) as string[]) : [];
-  } catch {
-    return [];
-  }
-}
-
-function writeStoredIds(ids: string[]) {
-  if (ids.length === 0) {
-    sessionStorage.removeItem(STORAGE_KEY);
-  } else {
-    sessionStorage.setItem(STORAGE_KEY, JSON.stringify(ids));
-  }
-}
-
-function readStoredResults(): CompletedResult[] {
-  try {
-    const raw = sessionStorage.getItem(RESULTS_KEY);
-    return raw ? (JSON.parse(raw) as CompletedResult[]) : [];
-  } catch {
-    return [];
-  }
-}
-
-function writeStoredResults(results: CompletedResult[]) {
-  if (results.length === 0) {
-    sessionStorage.removeItem(RESULTS_KEY);
-  } else {
-    sessionStorage.setItem(RESULTS_KEY, JSON.stringify(results));
-  }
-}
-
-function readClearedJobIds(): string[] {
-  try {
-    const raw = sessionStorage.getItem(CLEARED_JOBS_KEY);
-    return raw ? (JSON.parse(raw) as string[]) : [];
-  } catch {
-    return [];
-  }
-}
-
-function writeClearedJobIds(ids: string[]) {
-  if (ids.length === 0) {
-    sessionStorage.removeItem(CLEARED_JOBS_KEY);
-  } else {
-    sessionStorage.setItem(CLEARED_JOBS_KEY, JSON.stringify(ids));
-  }
-}
-
-function broadcastJobs(ids: string[]) {
-  window.dispatchEvent(
-    new CustomEvent("labas:jobs-change", { detail: { ids } }),
-  );
-}
+export type { ActiveJob, CompletedResult } from "./use-job-shared";
 
 export function useGenerationJobs() {
   const { data: session } = authClient.useSession();
   const isAuthenticated = !!session;
 
-  const [error, setError] = useState<string | null>(null);
-  const [jobIds, setJobIdsState] = useState<string[]>([]);
-  const [completedResults, setCompletedResults] = useState<CompletedResult[]>(
-    [],
-  );
-
-  const processedJobStates = useRef<Record<string, string>>({});
-  const removedJobIdsRef = useRef<Set<string>>(new Set());
-
-  const setJobIds = useCallback(
-    (updater: string[] | ((prev: string[]) => string[])) => {
-      setJobIdsState((prev) => {
-        const ids =
-          typeof updater === "function" ? updater(prev) : updater;
-        writeStoredIds(ids);
-        broadcastJobs(ids);
-        return ids;
-      });
-    },
-    [],
-  );
-
-  const addJob = useCallback(
-    (id: string) => {
-      setJobIds((prev) => {
-        if (prev.includes(id)) return prev;
-        return [...prev, id];
-      });
-    },
-    [setJobIds],
-  );
-
-  const removeJob = useCallback(
-    (id: string) => {
-      removedJobIdsRef.current.add(id);
-
-      // Sync sessionStorage immediately so removal survives unmount
-      // (React state updater callbacks & effects are discarded on unmount)
-      writeStoredIds(readStoredIds().filter((j) => j !== id));
-      writeStoredResults(readStoredResults().filter((r) => r.jobId !== id));
-      const cleared = readClearedJobIds();
-      if (!cleared.includes(id)) writeClearedJobIds([...cleared, id]);
-
-      setJobIds((prev) => prev.filter((j) => j !== id));
-      setCompletedResults((prev) => prev.filter((r) => r.jobId !== id));
-      trpcClient.ai.cancelJob.mutate({ jobId: id }).catch(() => {});
-    },
-    [setJobIds],
-  );
-
-  const resetAll = useCallback(() => {
-    setError(null);
-
-    // Sync: clear sessionStorage immediately (survives unmount)
-    sessionStorage.removeItem(RESULTS_KEY);
-    sessionStorage.removeItem(STORAGE_KEY);
-
-    // Sync: merge current job IDs into cleared list (accumulate, don't overwrite)
-    const current = readStoredIds();
-    const existing = readClearedJobIds();
-    writeClearedJobIds([...new Set([...existing, ...current])]);
-
-    // Keep blocks in-memory, don't clear
-    for (const id of current) removedJobIdsRef.current.add(id);
-
-    setCompletedResults([]);
-    setJobIds([]);
-    processedJobStates.current = {};
-  }, [setJobIds]);
-
-  // Recover from sessionStorage on mount
-  useEffect(() => {
-    const saved = readStoredIds();
-    if (saved.length > 0) setJobIdsState(saved);
-    const savedResults = readStoredResults();
-    if (savedResults.length > 0) setCompletedResults(savedResults);
-
-    const clearedIds = readClearedJobIds();
-    for (const id of clearedIds) {
-      removedJobIdsRef.current.add(id);
-    }
-  }, []);
-
-  // Persist completedResults to sessionStorage
-  useEffect(() => {
-    writeStoredResults(completedResults);
-  }, [completedResults]);
-
-  // Sync across hook instances via custom event
-  useEffect(() => {
-    const handler = (e: Event) => {
-      const detail = (e as CustomEvent).detail as { ids: string[] };
-      setJobIdsState(detail.ids);
-    };
-    window.addEventListener("labas:jobs-change", handler);
-    return () => window.removeEventListener("labas:jobs-change", handler);
-  }, []);
+  const {
+    jobIds,
+    completedResults,
+    error,
+    processedStates,
+    removedIds,
+    addJob,
+    removeJob,
+    resetAll,
+    setError,
+    trackStatus,
+    setResult,
+    clearResult,
+  } = useJobState();
 
-  // Fallback: check myJobs for active jobs
+  /* Fallback: discover active jobs from myJobs endpoint */
   const myJobsQuery = useQuery({
     ...trpc.ai.myJobs.queryOptions({ limit: 20, offset: 0 }),
     enabled: isAuthenticated,
     refetchInterval: 3000,
   });
 
-  useEffect(() => {
-    if (!myJobsQuery.data) return;
-
-    const clearedIds = readClearedJobIds();
-
-    const activeIds = myJobsQuery.data
-      .filter(
-        (j) =>
-          ACTIVE_STATUSES.has(j.status) &&
-          !removedJobIdsRef.current.has(j.id) &&
-          !clearedIds.includes(j.id),
-      )
-      .map((j) => j.id);
-    if (activeIds.length === 0) return;
-
-    setJobIds((prev) => {
-      const newIds = activeIds.filter((id: string) => !prev.includes(id));
-      if (newIds.length === 0) return prev;
-      return [...prev, ...newIds];
-    });
-  }, [myJobsQuery.data, setJobIds]);
-
-  // Poll each active job individually
-  const jobQueries = useQueries({
-    queries: jobIds.map((jobId) => ({
-      ...trpc.ai.getJobStatus.queryOptions({ jobId }),
-      enabled: !!jobId && isAuthenticated,
-      refetchInterval: (query: any) => {
-        const data = query.state.data;
-        if (!data) return 1000;
-        if (isTerminal(data.status as string)) return false;
-        return 1000;
-      },
-    })),
-  });
-
-  const activeJobs = useMemo(() => {
-    return jobQueries
-      .filter((q) => q.data && !isTerminal((q.data as { status: string }).status))
-      .map((q) => q.data as unknown as ActiveJob);
-  }, [jobQueries]);
-
-  const isGenerating = activeJobs.length > 0;
-  const activeCount = activeJobs.length;
-  const canAddMore = activeCount < MAX_PARALLEL;
+  /* Transport layer — polling now, swappable for WebSocket later */
+  const transport = usePollingTransport({ isAuthenticated });
 
-  // Track completed results
   useEffect(() => {
-    for (let i = 0; i < jobQueries.length; i++) {
-      const query = jobQueries[i];
-      const jobId = jobIds[i];
-      if (!jobId || !query.data) continue;
+    transport.subscribe(jobIds);
+    return () => transport.unsubscribe();
+  }, [jobIds, transport]);
 
-      const data = query.data as Record<string, unknown>;
-      const status = data.status as string;
-
-      const prevStatus = processedJobStates.current[jobId];
-      if (prevStatus === status) continue;
-      processedJobStates.current[jobId] = status;
+  useEffect(() => {
+    transport.onUpdate((event) => {
+      const { jobId, status, data } = event;
+      const prevStatus = processedStates[jobId];
+      if (prevStatus === status) return;
+      trackStatus(jobId, status);
 
       const extractPkgId = (): string | null => {
         const rj = data.resultJson as Record<string, unknown> | null | undefined;
@@ -280,99 +57,88 @@ export function useGenerationJobs() {
         return typeof id === "string" ? id : null;
       };
 
-      // Skip if already tracked as completed
-      if (completedResults.some((r) => r.jobId === jobId && r.timestamp > 0)) {
-        // Update if status changed to completed with better data
+      const baseResult = {
+        jobId,
+        result: data.resultJson as GenerationResult,
+        generatedPackageId: extractPkgId(),
+        mode: (data.mode as string) ?? "quick",
+        timestamp: Date.now(),
+      };
+
+      const alreadyCompleted = completedResults.some(
+        (r) => r.jobId === jobId && r.timestamp > 0,
+      );
+
+      if (alreadyCompleted) {
         if (status === "completed" && data.resultJson) {
-          setCompletedResults((prev) =>
-            prev.map((r) =>
-              r.jobId === jobId
-                ? {
-                    jobId,
-                    result: data.resultJson as GenerationResult,
-                    generatedPackageId: extractPkgId(),
-                    mode: (data.mode as string) ?? "quick",
-                    timestamp: Date.now(),
-                  }
-                : r,
-            ),
-          );
+          setResult(baseResult);
         }
-        continue;
+        return;
       }
 
-      // Partial ready or completed → capture result
       if (status === "partial_ready" && data.resultJson) {
-        setCompletedResults((prev) => {
-          if (prev.some((r) => r.jobId === jobId)) return prev;
-          return [
-            ...prev,
-            {
-              jobId,
-              result: data.resultJson as GenerationResult,
-              generatedPackageId: extractPkgId(),
-              mode: (data.mode as string) ?? "quick",
-              timestamp: Date.now(),
-            },
-          ];
-        });
+        if (!completedResults.some((r) => r.jobId === jobId)) {
+          setResult(baseResult);
+        }
       }
 
       if (status === "completed" && data.resultJson) {
-        setCompletedResults((prev) => {
-          const exists = prev.findIndex((r) => r.jobId === jobId);
-          const entry: CompletedResult = {
-            jobId,
-            result: data.resultJson as GenerationResult,
-            generatedPackageId: extractPkgId(),
-            mode: (data.mode as string) ?? "quick",
-            timestamp: Date.now(),
-          };
-          if (exists >= 0) {
-            const updated = [...prev];
-            updated[exists] = entry;
-            return updated;
-          }
-          return [...prev, entry];
-        });
+        setResult(baseResult);
       }
 
       if (status === "failed") {
         setError((data.errorMessage as string) ?? "Generation failed");
-        setCompletedResults((prev) =>
-          prev.filter((r) => r.jobId !== jobId),
-        );
+        clearResult(jobId);
       }
 
       if (status === "cancelled") {
-        removedJobIdsRef.current.add(jobId);
-        setCompletedResults((prev) =>
-          prev.filter((r) => r.jobId !== jobId),
-        );
+        clearResult(jobId);
       }
-    }
-  }, [jobQueries, jobIds]);
+    });
+  }, [transport, processedStates, completedResults, trackStatus, setResult, setError, clearResult]);
 
-  // Auto-remove terminal jobs from tracking after a delay
+  /* Merge discovered jobs from myJobs fallback */
   useEffect(() => {
-    const terminalIds = jobQueries
+    if (!myJobsQuery.data) return;
+    const clearedIds = new Set<string>();
+    const discovered = myJobsQuery.data
       .filter(
-        (q) =>
-          q.data && isTerminal((q.data as { status: string }).status),
+        (j) =>
+          ACTIVE_STATUSES.has(j.status) &&
+          !removedIds.has(j.id) &&
+          !clearedIds.has(j.id),
       )
-      .map((_q, i) => jobIds[i])
-      .filter(Boolean);
+      .map((j) => j.id);
+    for (const id of discovered) {
+      if (!jobIds.includes(id)) addJob(id);
+    }
+  }, [myJobsQuery.data, removedIds, jobIds, addJob]);
 
-    if (terminalIds.length === 0) return;
+  /* Auto-remove terminal jobs after delay */
+  useEffect(() => {
+    const timers = jobIds
+      .filter((id) => {
+        const ev = processedStates[id];
+        return ev && isTerminal(ev);
+      })
+      .map((id) =>
+        setTimeout(() => removeJob(id), 5000),
+      );
+    return () => timers.forEach(clearTimeout);
+  }, [processedStates, jobIds, removeJob]);
 
-    const timers = terminalIds.map((id) =>
-      setTimeout(() => {
-        setJobIds((prev) => prev.filter((j) => j !== id));
-      }, 5000),
-    );
+  const activeJobs = transport.activeJobs;
+  const activeCount = activeJobs.length;
+  const canAddMore = activeCount < MAX_PARALLEL;
+  const isGenerating = activeCount > 0;
 
-    return () => timers.forEach(clearTimeout);
-  }, [jobQueries, jobIds, setJobIds]);
+  const wrappedRemoveJob = useCallback(
+    (id: string) => {
+      trpcClient.ai.cancelJob.mutate({ jobId: id }).catch(() => {});
+      removeJob(id);
+    },
+    [removeJob],
+  );
 
   return {
     jobIds,
@@ -383,7 +149,7 @@ export function useGenerationJobs() {
     canAddMore,
     error,
     addJob,
-    removeJob,
+    removeJob: wrappedRemoveJob,
     resetAll,
     setError,
     myJobsQuery,

apps/web/src/hooks/use-job-shared.ts

@@ -0,0 +1,66 @@
+/** Shared types and constants for job management hooks. */
+
+export const STORAGE_KEY = "labas_active_jobs";
+export const RESULTS_KEY = "labas_completed_results";
+export const CLEARED_JOBS_KEY = "labas_cleared_jobs";
+export const MAX_PARALLEL = 3;
+
+export interface ActiveJob {
+  id: string;
+  status: string;
+  progress: number;
+  progressMessage: string;
+  mode: string;
+  logs: unknown[];
+  resultJson: unknown;
+  errorMessage?: string;
+  examTypeId?: string;
+  sectionTypeId?: string;
+  questionCount?: number;
+}
+
+export interface CompletedResult {
+  jobId: string;
+  result: import("@labas/ai").GenerationResult;
+  generatedPackageId: string | null;
+  examType?: string;
+  section?: string;
+  mode: string;
+  timestamp: number;
+}
+
+/** Event emitted by a JobTransport when a job's status changes. */
+export interface JobTransportEvent {
+  jobId: string;
+  status: string;
+  data: Record<string, unknown>;
+}
+
+/** Abstract transport for receiving real-time job updates.
+ *  Concrete adapters: PollingTransport (now), WebSocketTransport (future). */
+export interface JobTransport {
+  /** Start listening for updates on the given job IDs. */
+  subscribe(jobIds: string[]): void;
+  /** Stop listening for updates. */
+  unsubscribe(): void;
+  /** Register a callback for status-change events. */
+  onUpdate(callback: (event: JobTransportEvent) => void): void;
+  /** Register a callback for transport-level errors. */
+  onError(callback: (error: Error) => void): void;
+  /** Active jobs derived from latest events. */
+  readonly activeJobs: ActiveJob[];
+}
+
+export const ACTIVE_STATUSES = new Set([
+  "pending",
+  "running",
+  "running_fast",
+  "partial_ready",
+  "running_quality",
+]);
+
+export const TERMINAL_STATUSES = new Set(["completed", "failed", "cancelled"]);
+
+export function isTerminal(status: string): boolean {
+  return TERMINAL_STATUSES.has(status);
+}

apps/web/src/hooks/use-job-state.ts

@@ -0,0 +1,243 @@
+import { useCallback, useEffect, useReducer, useRef } from "react";
+import {
+  type CompletedResult,
+  STORAGE_KEY,
+  RESULTS_KEY,
+  CLEARED_JOBS_KEY,
+} from "./use-job-shared";
+
+/* ── Pure storage helpers (testable seam) ── */
+
+function readStoredIds(): string[] {
+  try {
+    const raw = sessionStorage.getItem(STORAGE_KEY);
+    return raw ? (JSON.parse(raw) as string[]) : [];
+  } catch {
+    return [];
+  }
+}
+
+function writeStoredIds(ids: string[]) {
+  if (ids.length === 0) sessionStorage.removeItem(STORAGE_KEY);
+  else sessionStorage.setItem(STORAGE_KEY, JSON.stringify(ids));
+}
+
+function readStoredResults(): CompletedResult[] {
+  try {
+    const raw = sessionStorage.getItem(RESULTS_KEY);
+    return raw ? (JSON.parse(raw) as CompletedResult[]) : [];
+  } catch {
+    return [];
+  }
+}
+
+function writeStoredResults(results: CompletedResult[]) {
+  if (results.length === 0) sessionStorage.removeItem(RESULTS_KEY);
+  else sessionStorage.setItem(RESULTS_KEY, JSON.stringify(results));
+}
+
+function readClearedJobIds(): string[] {
+  try {
+    const raw = sessionStorage.getItem(CLEARED_JOBS_KEY);
+    return raw ? (JSON.parse(raw) as string[]) : [];
+  } catch {
+    return [];
+  }
+}
+
+function writeClearedJobIds(ids: string[]) {
+  if (ids.length === 0) sessionStorage.removeItem(CLEARED_JOBS_KEY);
+  else sessionStorage.setItem(CLEARED_JOBS_KEY, JSON.stringify(ids));
+}
+
+function broadcastJobs(ids: string[]) {
+  window.dispatchEvent(
+    new CustomEvent("labas:jobs-change", { detail: { ids } }),
+  );
+}
+
+/* ── State shape ── */
+
+interface State {
+  jobIds: string[];
+  completedResults: CompletedResult[];
+  error: string | null;
+  processedStates: Record<string, string>;
+  removedIds: Set<string>;
+}
+
+type Action =
+  | { type: "init"; jobIds: string[]; results: CompletedResult[]; clearedIds: string[] }
+  | { type: "addJob"; id: string }
+  | { type: "removeJob"; id: string }
+  | { type: "reset" }
+  | { type: "syncIds"; ids: string[] }
+  | { type: "trackStatus"; jobId: string; status: string }
+  | { type: "setResult"; result: CompletedResult }
+  | { type: "clearResult"; jobId: string }
+  | { type: "setError"; error: string | null };
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case "init": {
+      const removed = new Set(action.clearedIds);
+      return {
+        ...state,
+        jobIds: action.jobIds,
+        completedResults: action.results,
+        removedIds: removed,
+      };
+    }
+
+    case "addJob": {
+      if (state.jobIds.includes(action.id)) return state;
+      const next = [...state.jobIds, action.id];
+      writeStoredIds(next);
+      broadcastJobs(next);
+      return { ...state, jobIds: next };
+    }
+
+    case "removeJob": {
+      const nextIds = state.jobIds.filter((j) => j !== action.id);
+      const nextResults = state.completedResults.filter((r) => r.jobId !== action.id);
+      const nextRemoved = new Set(state.removedIds).add(action.id);
+
+      writeStoredIds(nextIds);
+      writeStoredResults(nextResults);
+      const cleared = readClearedJobIds();
+      if (!cleared.includes(action.id)) writeClearedJobIds([...cleared, action.id]);
+
+      return {
+        ...state,
+        jobIds: nextIds,
+        completedResults: nextResults,
+        removedIds: nextRemoved,
+      };
+    }
+
+    case "reset": {
+      const current = readStoredIds();
+      const existing = readClearedJobIds();
+      writeClearedJobIds([...new Set([...existing, ...current])]);
+      sessionStorage.removeItem(RESULTS_KEY);
+      sessionStorage.removeItem(STORAGE_KEY);
+
+      const nextRemoved = new Set(state.removedIds);
+      for (const id of current) nextRemoved.add(id);
+
+      return {
+        ...state,
+        jobIds: [],
+        completedResults: [],
+        error: null,
+        processedStates: {},
+        removedIds: nextRemoved,
+      };
+    }
+
+    case "syncIds": {
+      return { ...state, jobIds: action.ids };
+    }
+
+    case "trackStatus": {
+      return {
+        ...state,
+        processedStates: { ...state.processedStates, [action.jobId]: action.status },
+      };
+    }
+
+    case "setResult": {
+      const idx = state.completedResults.findIndex((r) => r.jobId === action.result.jobId);
+      if (idx >= 0) {
+        const updated = [...state.completedResults];
+        updated[idx] = action.result;
+        return { ...state, completedResults: updated };
+      }
+      return { ...state, completedResults: [...state.completedResults, action.result] };
+    }
+
+    case "clearResult": {
+      return {
+        ...state,
+        completedResults: state.completedResults.filter((r) => r.jobId !== action.jobId),
+      };
+    }
+
+    case "setError": {
+      return { ...state, error: action.error };
+    }
+
+    default:
+      return state;
+  }
+}
+
+/* ── Hook ── */
+
+export function useJobState() {
+  const [state, dispatch] = useReducer(reducer, {
+    jobIds: [],
+    completedResults: [],
+    error: null,
+    processedStates: {},
+    removedIds: new Set<string>(),
+  });
+
+  const stateRef = useRef(state);
+  stateRef.current = state;
+
+  /* Recover from sessionStorage on mount */
+  useEffect(() => {
+    const saved = readStoredIds();
+    const savedResults = readStoredResults();
+    const clearedIds = readClearedJobIds();
+    dispatch({ type: "init", jobIds: saved, results: savedResults, clearedIds });
+  }, []);
+
+  /* Persist completedResults */
+  useEffect(() => {
+    writeStoredResults(state.completedResults);
+  }, [state.completedResults]);
+
+  /* Sync across hook instances via custom event */
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const detail = (e as CustomEvent).detail as { ids: string[] };
+      dispatch({ type: "syncIds", ids: detail.ids });
+    };
+    window.addEventListener("labas:jobs-change", handler);
+    return () => window.removeEventListener("labas:jobs-change", handler);
+  }, []);
+
+  const addJob = useCallback((id: string) => dispatch({ type: "addJob", id }), []);
+  const removeJob = useCallback((id: string) => dispatch({ type: "removeJob", id }), []);
+  const resetAll = useCallback(() => dispatch({ type: "reset" }), []);
+  const setError = useCallback((error: string | null) => dispatch({ type: "setError", error }), []);
+  const trackStatus = useCallback(
+    (jobId: string, status: string) => dispatch({ type: "trackStatus", jobId, status }),
+    [],
+  );
+  const setResult = useCallback(
+    (result: CompletedResult) => dispatch({ type: "setResult", result }),
+    [],
+  );
+  const clearResult = useCallback(
+    (jobId: string) => dispatch({ type: "clearResult", jobId }),
+    [],
+  );
+
+  return {
+    jobIds: state.jobIds,
+    completedResults: state.completedResults,
+    error: state.error,
+    processedStates: state.processedStates,
+    removedIds: state.removedIds,
+    addJob,
+    removeJob,
+    resetAll,
+    setError,
+    trackStatus,
+    setResult,
+    clearResult,
+  };
+}

apps/web/src/hooks/use-package-builder.ts

@@ -2,6 +2,7 @@ import { useMutation } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
 import { trpc } from "@/utils/trpc";
 import { toast } from "sonner";
+import { getErrorMessage } from "@/lib/error-utils";
 
 export function usePackageBuilder() {
   const navigate = useNavigate();
@@ -14,7 +15,7 @@ export function usePackageBuilder() {
 
   const handleCreatePackage = async (params: {
     selectedIds: Set<string>;
-    questions: Array<{ id: string; examTypeId: string; sectionTypeId: string; sectionTypeName?: string | null; [key: string]: any }>;
+    questions: Array<{ id: string; examTypeId: string; sectionTypeId: string; sectionTypeName?: string | null; [key: string]: unknown }>;
     title: string;
     description: string;
     isPublic: boolean;
@@ -51,8 +52,8 @@ export function usePackageBuilder() {
       }
 
       navigate({ to: "/package/$id", params: { id: pkg.id } });
-    } catch (err: any) {
-      toast.error("Gagal membuat paket", { description: err.message });
+    } catch (err: unknown) {
+      toast.error("Gagal membuat paket", { description: getErrorMessage(err) });
     }
   };
 
@@ -106,8 +107,8 @@ export function usePackageBuilder() {
       }
 
       navigate({ to: "/package/$id", params: { id: pkg.id } });
-    } catch (err: any) {
-      toast.error("Gagal membuat paket", { description: err.message });
+    } catch (err: unknown) {
+      toast.error("Gagal membuat paket", { description: getErrorMessage(err) });
     }
   };
 

apps/web/src/hooks/use-polling-transport.ts

@@ -0,0 +1,80 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useQueries } from "@tanstack/react-query";
+import { trpc } from "@/utils/trpc";
+import { type ActiveJob, type JobTransport, type JobTransportEvent, isTerminal } from "./use-job-shared";
+
+/** useQueries + .map() breaks contextual typing for refetchInterval; accept `unknown` so the callback is a valid supertype of TanStack's `Query` parameter. */
+function jobStatusRefetchInterval(query: unknown): number | false {
+  const data = (query as { state: { data: { status: string } | null | undefined } }).state.data;
+  if (data == null) return 1000;
+  if (isTerminal(data.status)) return false;
+  return 1000;
+}
+
+/** Polling-based implementation of JobTransport.
+ *  Uses tRPC useQueries to poll each tracked job individually. */
+export function usePollingTransport({
+  isAuthenticated,
+}: {
+  isAuthenticated: boolean;
+}): JobTransport {
+  const [jobIds, setJobIds] = useState<string[]>([]);
+  const [activeJobs, setActiveJobs] = useState<ActiveJob[]>([]);
+  const onUpdateRef = useRef<(event: JobTransportEvent) => void>(undefined);
+  const onErrorRef = useRef<(error: Error) => void>(undefined);
+
+  const jobQueries = useQueries({
+    queries: jobIds.map((jobId) => ({
+      ...trpc.ai.getJobStatus.queryOptions({ jobId }),
+      enabled: !!jobId && isAuthenticated,
+      refetchInterval: jobStatusRefetchInterval,
+    })),
+  });
+
+  useEffect(() => {
+    const nextActive = jobQueries
+      .filter((q) => q.data && !isTerminal((q.data as { status: string }).status))
+      .map((q) => q.data as unknown as ActiveJob);
+    setActiveJobs(nextActive);
+
+    // Emit events for status changes
+    for (let i = 0; i < jobQueries.length; i++) {
+      const query = jobQueries[i];
+      const jobId = jobIds[i];
+      if (!jobId || !query.data) continue;
+      const data = query.data as Record<string, unknown>;
+      onUpdateRef.current?.({
+        jobId,
+        status: data.status as string,
+        data,
+      });
+    }
+  }, [jobQueries, jobIds]);
+
+  const subscribe = useCallback((ids: string[]) => {
+    setJobIds(ids);
+  }, []);
+
+  const unsubscribe = useCallback(() => {
+    setJobIds([]);
+    setActiveJobs([]);
+  }, []);
+
+  const onUpdate = useCallback((callback: (event: JobTransportEvent) => void) => {
+    onUpdateRef.current = callback;
+  }, []);
+
+  const onError = useCallback((callback: (error: Error) => void) => {
+    onErrorRef.current = callback;
+  }, []);
+
+  return {
+    subscribe,
+    unsubscribe,
+    onUpdate,
+    onError,
+    get activeJobs() {
+      return activeJobs;
+    },
+  };
+}

apps/web/src/hooks/use-question-selection.ts

@@ -3,7 +3,7 @@ import { useState, useMemo } from "react";
 interface Question {
   id: string;
   examTypeId: string;
-  [key: string]: any;
+  [key: string]: unknown;
 }
 
 export function useQuestionSelection(questions: Question[]) {

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

@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback, useRef } from "react";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
 import { trpc } from "@/utils/trpc";
+import { getErrorMessage } from "@/lib/error-utils";
 
 function getTimerKey(attemptId: string | null) {
   return attemptId ? `labas_attempt_timer_${attemptId}` : null;
@@ -168,9 +169,9 @@ export function useTestSession(packageId: string, existingAttemptId?: string) {
       // Load any saved timer (in case of refresh during attempt)
       const saved = loadElapsedTime(res.attemptId);
       if (saved > 0) setTimeElapsed(saved);
-    } catch (err: any) {
+    } catch (err: unknown) {
       console.error("[useTestSession] Start attempt failed:", err);
-      setStartError(err.message ?? "Gagal memulai latihan. Coba lagi.");
+      setStartError(getErrorMessage(err));
     }
   }, [packageId, startMutation]);
 

apps/web/src/lib/types.ts

@@ -0,0 +1,86 @@
+/** Shared frontend types inferred from tRPC outputs.
+ *  These are lightweight type aliases for data shapes used across components.
+ *  For strict typing, prefer tRPC inferred types: RouterOutputs['router']['procedure'] */
+
+export interface Question {
+  id: string;
+  examTypeId?: string;
+  sectionTypeId?: string;
+  format?: string;
+  passageText?: string | null;
+  questionText?: string;
+  options?: unknown;
+  correctAnswer?: string | null;
+  explanation?: string | null;
+  difficulty?: number | null;
+  isPublic?: boolean;
+  creatorUserId?: string | null;
+  examTypeName?: string | null;
+  sectionTypeName?: string | null;
+  skillTags?: string[] | null;
+  usageCount?: number;
+  avgRating?: number | null;
+  creatorName?: string | null;
+  source?: string | null;
+  _examType?: string;
+  _isRtl?: boolean;
+  _useFurigana?: boolean;
+}
+
+export interface Package {
+  id: string;
+  title?: string;
+  description?: string | null;
+  examTypeId?: string;
+  examTypeName?: string | null;
+  creatorUserId?: string | null;
+  creatorName?: string | null;
+  isPublic?: boolean;
+  totalQuestions?: number;
+  totalSections?: number;
+  estimatedDurationMin?: number | null;
+  usageCount?: number;
+  avgRating?: number | null;
+}
+
+export interface PackageSection {
+  id: string;
+  title?: string;
+  questions?: Question[];
+  packageId?: string;
+  packageTitle?: string | null;
+  examTypeName?: string | null;
+  sectionTypeName?: string | null;
+  sectionTypeId?: string;
+  orderIndex?: number;
+}
+
+export interface AttemptSection {
+  id: string;
+  title?: string;
+  questions?: Question[];
+  answers?: Array<{
+    questionId: string;
+    userAnswer?: string;
+    answer?: string;
+    isCorrect?: boolean | null;
+    partialScore?: number | null;
+    timeSpentSec?: number;
+  }>;
+}
+
+export interface Attempt {
+  id: string;
+  packageId?: string;
+  status?: string;
+  score?: number | null;
+  sections?: AttemptSection[];
+}
+
+export interface JobItem {
+  id: string;
+  status: string;
+  examTypeId?: string;
+  sectionTypeId?: string;
+  format?: string;
+}

apps/web/src/routes/__root.tsx

@@ -11,6 +11,17 @@ import { GlobalGenerationProgress } from "@/components/generate/GlobalGeneration
 import { ErrorFallback } from "@/components/ErrorFallback";
 import type { trpc } from "@/utils/trpc";
 
+function SkipLink() {
+  return (
+    <a
+      href="#main-content"
+      className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[100] focus:px-4 focus:py-2 focus:bg-[var(--clay-black)] focus:text-[var(--pure-white)] focus:rounded-[var(--radius-lg)] focus:font-semibold focus:text-sm focus:shadow-xl"
+    >
+      Lewati ke konten utama
+    </a>
+  );
+}
+
 import "../index.css";
 
 export interface RouterAppContext {
@@ -70,8 +81,10 @@ function RootComponent() {
           </div>
         ) : (
           <div className="min-h-screen bg-background relative">
+            <SkipLink />
             <Sidebar />
             <main
+              id="main-content"
               className={`min-h-screen transition-all duration-300 relative z-0 ${collapsed ? "md:ml-16" : "md:ml-64"}`}
             >
               <Outlet />

apps/web/src/routes/admin.credits.tsx

@@ -20,6 +20,12 @@ function AdminCredits() {
   const [description, setDescription] = useState("");
   const queryClient = useQueryClient();
 
+  function handleSearch(val: string) {
+    setSearch(val);
+    setSelectedUserId("");
+    setSelectedUserName("");
+  }
+
   const userSearch = useQuery(
     trpc.admin.listUsers.queryOptions(
       { search: debouncedSearch || undefined, limit: 10, offset: 0 },
@@ -81,6 +87,7 @@ function AdminCredits() {
             placeholder="Search by name or email..."
             value={search}
             onChange={(e) => handleSearch(e.target.value)}
+            aria-label="Cari user"
             className="max-w-md"
           />
           {userSearch.data && userSearch.data.users.length > 0 && !selectedUserId && (

apps/web/src/routes/admin.featured.tsx

@@ -4,9 +4,11 @@ import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { trpc } from "@/utils/trpc";
 import { Input } from "@labas/ui/components/input";
 import { Button } from "@labas/ui/components/button";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@labas/ui/components/tabs";
 import { toast } from "sonner";
 import { getErrorMessage } from "@/lib/error-utils";
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 export const Route = createFileRoute("/admin/featured")({
   component: AdminFeatured,
@@ -67,128 +69,163 @@ function AdminFeatured() {
 
   return (
     <div>
-      <h1 className="text-3xl font-headline font-bold text-[var(--clay-black)] mb-2">Editor's Pick</h1>
+      <h1 className="text-3xl font-headline font-bold text-[var(--clay-black)] mb-2">Editor&apos;s Pick</h1>
       <p className="text-[var(--warm-charcoal)] mb-6">Curate featured content for the homepage.</p>
 
-      <div className="flex gap-2 mb-6 border-b border-[var(--oat-border)] pb-0">
-        {tabs.map((t) => (
-          <button
-            key={t.key}
-            onClick={() => { setTab(t.key); setSearch(""); setPage(1); }}
-            className={`px-4 py-2.5 text-sm font-medium rounded-t-[var(--radius-lg)] transition-colors ${
-              tab === t.key
-                ? "bg-[var(--pure-white)] text-[var(--clay-black)] border border-[var(--oat-border)] border-b-[var(--pure-white)] -mb-[1px]"
-                : "text-[var(--warm-charcoal)] hover:text-[var(--clay-black)]"
-            }`}
-          >
-            {t.label}
-          </button>
-        ))}
-      </div>
+      <Tabs
+        value={tab}
+        onValueChange={(v) => { setTab(v as Tab); setSearch(""); setPage(1); }}
+        className="mb-6"
+      >
+        <TabsList variant="line" className="h-10 bg-transparent border-b border-[var(--oat-border)]">
+          {tabs.map((t) => (
+            <TabsTrigger
+              key={t.key}
+              value={t.key}
+              className="px-4 py-2.5 text-sm font-medium rounded-t-[var(--radius-lg)] data-[active=true]:bg-[var(--pure-white)] data-[active=true]:text-[var(--clay-black)] data-[active=true]:border data-[active=true]:border-[var(--oat-border)] data-[active=true]:border-b-[var(--pure-white)] data-[active=true]:-mb-[1px] text-[var(--warm-charcoal)] hover:text-[var(--clay-black)] transition-colors"
+            >
+              {t.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
 
-      {tab === "featured" && (
-        <div className="space-y-8">
-          <section>
-            <div className="flex items-center gap-2 mb-4">
-              <h2 className="text-lg font-headline font-bold text-[var(--clay-black)]">Featured Packages</h2>
-              <span className="text-sm text-[var(--warm-charcoal)]">({fPackages.length})</span>
-            </div>
-            {fPackages.length === 0 ? (
-              <p className="text-sm text-[var(--warm-charcoal)] py-4">No featured packages. Browse and select from the tabs above.</p>
-            ) : (
-              <div className="space-y-2">
-                {fPackages.map((pkg) => (
-                  <div key={pkg.id} className="flex items-center justify-between bg-[var(--pure-white)] border border-[var(--oat-border)] rounded-[var(--radius-lg)] px-4 py-3">
-                    <div>
-                      <p className="font-medium text-[var(--clay-black)]">{pkg.title}</p>
-                      <p className="text-xs text-[var(--warm-charcoal)]">{pkg.examTypeId}</p>
-                    </div>
-                    <Button variant="outline" onClick={() => togglePkgMutation.mutate({ packageId: pkg.id })} disabled={togglePkgMutation.isPending} className="h-9 rounded-[var(--radius-lg)] text-xs">Unfeature</Button>
-                  </div>
-                ))}
+        <TabsContent value="featured" className="mt-6">
+          <div className="space-y-8">
+            <section>
+              <div className="flex items-center gap-2 mb-4">
+                <h2 className="text-lg font-headline font-bold text-[var(--clay-black)]">Featured Packages</h2>
+                <span className="text-sm text-[var(--warm-charcoal)]">({fPackages.length})</span>
               </div>
-            )}
-          </section>
-
-          <section>
-            <div className="flex items-center gap-2 mb-4">
-              <h2 className="text-lg font-headline font-bold text-[var(--clay-black)]">Featured Questions</h2>
-              <span className="text-sm text-[var(--warm-charcoal)]">({fQuestions.length})</span>
-            </div>
-            {fQuestions.length === 0 ? (
-              <p className="text-sm text-[var(--warm-charcoal)] py-4">No featured questions.</p>
-            ) : (
-              <div className="space-y-2">
-                {fQuestions.map((q) => (
-                  <div key={q.id} className="flex items-center justify-between bg-[var(--pure-white)] border border-[var(--oat-border)] rounded-[var(--radius-lg)] px-4 py-3">
-                    <div className="flex-1 min-w-0">
-                      <p className="font-medium text-[var(--clay-black)] truncate">{q.questionText}</p>
-                      <p className="text-xs text-[var(--warm-charcoal)]">{q.format} · {q.examTypeId}</p>
+              {fPackages.length === 0 ? (
+                <p className="text-sm text-[var(--warm-charcoal)] py-4">No featured packages. Browse and select from the tabs above.</p>
+              ) : (
+                <div className="space-y-2">
+                  {fPackages.map((pkg) => (
+                    <div key={pkg.id} className="flex items-center justify-between bg-[var(--pure-white)] border border-[var(--oat-border)] rounded-[var(--radius-lg)] px-4 py-3">
+                      <div>
+                        <p className="font-medium text-[var(--clay-black)]">{pkg.title}</p>
+                        <p className="text-xs text-[var(--warm-charcoal)]">{pkg.examTypeId}</p>
+                      </div>
+                      <Button variant="outline" onClick={() => togglePkgMutation.mutate({ packageId: pkg.id })} disabled={togglePkgMutation.isPending} className="h-9 rounded-[var(--radius-lg)] text-xs">Unfeature</Button>
                     </div>
-                    <Button variant="outline" className="shrink-0 ml-4 h-9 rounded-[var(--radius-lg)] text-xs" onClick={() => toggleQMutation.mutate({ questionId: q.id })} disabled={toggleQMutation.isPending}>Unfeature</Button>
-                  </div>
-                ))}
+                  ))}
+                </div>
+              )}
+            </section>
+
+            <section>
+              <div className="flex items-center gap-2 mb-4">
+                <h2 className="text-lg font-headline font-bold text-[var(--clay-black)]">Featured Questions</h2>
+                <span className="text-sm text-[var(--warm-charcoal)]">({fQuestions.length})</span>
               </div>
-            )}
-          </section>
-        </div>
-      )}
+              {fQuestions.length === 0 ? (
+                <p className="text-sm text-[var(--warm-charcoal)] py-4">No featured questions.</p>
+              ) : (
+                <div className="space-y-2">
+                  {fQuestions.map((q) => (
+                    <div key={q.id} className="flex items-center justify-between bg-[var(--pure-white)] border border-[var(--oat-border)] rounded-[var(--radius-lg)] px-4 py-3">
+                      <div className="flex-1 min-w-0">
+                        <p className="font-medium text-[var(--clay-black)] truncate">{q.questionText}</p>
+                        <p className="text-xs text-[var(--warm-charcoal)]">{q.format} · {q.examTypeId}</p>
+                      </div>
+                      <Button variant="outline" className="shrink-0 ml-4 h-9 rounded-[var(--radius-lg)] text-xs" onClick={() => toggleQMutation.mutate({ questionId: q.id })} disabled={toggleQMutation.isPending}>Unfeature</Button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </section>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="packages" className="mt-6">
+          <div className="relative flex-1">
+            <MaterialIcon name="search" className="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--warm-charcoal)]" />
+            <Input
+              placeholder="Search packages..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              aria-label="Search packages"
+              className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] h-11"
+            />
+          </div>
+          <SearchResults query={searchQuery} tab="packages" page={page} setPage={setPage} limit={limit} togglePkgMutation={togglePkgMutation} toggleQMutation={toggleQMutation} />
+        </TabsContent>
 
-      {tab !== "featured" && (
-        <div>
+        <TabsContent value="questions" className="mt-6">
           <Input
-            placeholder={`Search ${tab}...`}
+            placeholder="Search questions..."
             value={search}
             onChange={(e) => handleSearch(e.target.value)}
             className="max-w-md mb-4"
           />
+          <SearchResults query={searchQuery} tab="questions" page={page} setPage={setPage} limit={limit} togglePkgMutation={togglePkgMutation} toggleQMutation={toggleQMutation} />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
 
-          {searchQuery.isLoading ? (
-            <p className="text-sm text-[var(--warm-charcoal)] py-8 text-center">Searching...</p>
-          ) : (
-            <>
-              <p className="text-sm text-[var(--warm-charcoal)] mb-3">
-                {debouncedSearch ? `${searchQuery.data?.total ?? 0} results for "${debouncedSearch}"` : `Showing ${searchQuery.data?.total ?? 0} ${tab}`}
+function SearchResults({
+  query,
+  tab,
+  page,
+  setPage,
+  limit,
+  togglePkgMutation,
+  toggleQMutation,
+}: {
+  query: ReturnType<typeof useQuery>;
+  tab: "packages" | "questions";
+  page: number;
+  setPage: (fn: (p: number) => number) => void;
+  limit: number;
+  togglePkgMutation: { mutate: (args: { packageId: string }) => void; isPending: boolean };
+  toggleQMutation: { mutate: (args: { questionId: string }) => void; isPending: boolean };
+}) {
+  if (query.isLoading) {
+    return <p className="text-sm text-[var(--warm-charcoal)] py-8 text-center">Searching...</p>;
+  }
+  const data = query.data as { items: Array<{ id: string; title?: string; questionText?: string; format?: string; examTypeId?: string; isFeatured?: boolean }>; total: number } | undefined;
+  return (
+    <>
+      <p className="text-sm text-[var(--warm-charcoal)] mb-3">
+        {query.isSuccess ? `Showing ${data?.total ?? 0} ${tab}` : ""}
+      </p>
+      <div className="space-y-2">
+        {(data?.items ?? []).map((item) => (
+          <div key={item.id} className="flex items-center justify-between bg-[var(--pure-white)] border border-[var(--oat-border)] rounded-[var(--radius-lg)] px-4 py-3">
+            <div className="flex-1 min-w-0">
+              <p className="font-medium text-[var(--clay-black)] truncate">
+                {item.title ?? item.questionText}
               </p>
-              <div className="space-y-2">
-                {(searchQuery.data?.items ?? []).map((item) => (
-                  <div key={item.id} className="flex items-center justify-between bg-[var(--pure-white)] border border-[var(--oat-border)] rounded-[var(--radius-lg)] px-4 py-3">
-                    <div className="flex-1 min-w-0">
-                      <p className="font-medium text-[var(--clay-black)] truncate">
-                        {"title" in item ? item.title : item.questionText}
-                      </p>
-                      <p className="text-xs text-[var(--warm-charcoal)]">
-                        {"format" in item ? `${item.format} · ${item.examTypeId}` : item.examTypeId}
-                        {item.isFeatured && (
-                          <span className="ml-2 text-xs font-semibold px-1.5 py-0.5 rounded-full bg-[var(--sunbeam-300)] text-[var(--sunbeam-800)]">Featured</span>
-                        )}
-                      </p>
-                    </div>
-                    <Button
-                      variant={item.isFeatured ? "outline" : "default"}
-                      className="shrink-0 ml-4 h-9 rounded-[var(--radius-lg)] text-xs"
-                      onClick={() => {
-                        if (tab === "packages") togglePkgMutation.mutate({ packageId: item.id });
-                        else toggleQMutation.mutate({ questionId: item.id });
-                      }}
-                      disabled={togglePkgMutation.isPending || toggleQMutation.isPending}
-                    >
-                      {item.isFeatured ? "Unfeature" : "Feature"}
-                    </Button>
-                  </div>
-                ))}
-              </div>
-              {searchQuery.data && (searchQuery.data.total as number) > limit && (
-                <div className="flex items-center justify-center gap-4 mt-6">
-                  <Button variant="outline" size="sm" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1}>Previous</Button>
-                  <span className="text-sm text-[var(--warm-charcoal)]">Page {page} of {Math.ceil((searchQuery.data.total as number) / limit)}</span>
-                  <Button variant="outline" size="sm" onClick={() => setPage((p) => p + 1)} disabled={page * limit >= (searchQuery.data.total as number)}>Next</Button>
-                </div>
-              )}
-            </>
-          )}
+              <p className="text-xs text-[var(--warm-charcoal)]">
+                {item.format ? `${item.format} · ${item.examTypeId}` : item.examTypeId}
+                {item.isFeatured && (
+                  <span className="ml-2 text-xs font-semibold px-1.5 py-0.5 rounded-full bg-[var(--sunbeam-300)] text-[var(--sunbeam-800)]">Featured</span>
+                )}
+              </p>
+            </div>
+            <Button
+              variant={item.isFeatured ? "outline" : "default"}
+              className="shrink-0 ml-4 h-9 rounded-[var(--radius-lg)] text-xs"
+              onClick={() => {
+                if (tab === "packages") togglePkgMutation.mutate({ packageId: item.id });
+                else toggleQMutation.mutate({ questionId: item.id });
+              }}
+              disabled={togglePkgMutation.isPending || toggleQMutation.isPending}
+            >
+              {item.isFeatured ? "Unfeature" : "Feature"}
+            </Button>
+          </div>
+        ))}
+      </div>
+      {data && data.total > limit && (
+        <div className="flex items-center justify-center gap-4 mt-6">
+          <Button variant="outline" size="sm" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1}>Previous</Button>
+          <span className="text-sm text-[var(--warm-charcoal)]">Page {page} of {Math.ceil(data.total / limit)}</span>
+          <Button variant="outline" size="sm" onClick={() => setPage((p) => p + 1)} disabled={page * limit >= data.total}>Next</Button>
         </div>
       )}
-    </div>
+    </>
   );
-}
+}

apps/web/src/routes/admin.jobs.tsx

@@ -80,7 +80,7 @@ function AdminJobs() {
             ) : (!jobs.data?.jobs || jobs.data.jobs.length === 0) ? (
               <tr><td colSpan={8} className="text-center py-16 text-[var(--warm-charcoal)]">No jobs found.</td></tr>
             ) : (
-              jobs.data.jobs.map((job: any) => (
+              jobs.data.jobs.map((job) => (
                 <tr key={job.id} className="border-t border-[var(--oat-border)] hover:bg-[var(--oat-light)]/50 transition-colors">
                   <td className="px-4 py-3 text-[var(--warm-charcoal)] font-mono text-xs">{job.userId?.slice(0, 10)}...</td>
                   <td className="px-4 py-3">{job.examTypeId}</td>

apps/web/src/routes/admin.moderation.tsx

@@ -58,7 +58,7 @@ function AdminModeration() {
             ) : (!questions.data?.questions || questions.data.questions.length === 0) ? (
               <tr><td colSpan={7} className="text-center py-16 text-[var(--warm-charcoal)]">No questions yet.</td></tr>
             ) : (
-              questions.data.questions.map((q: any) => (
+              questions.data.questions.map((q) => (
                 <tr key={q.id} className="border-t border-[var(--oat-border)] hover:bg-[var(--oat-light)]/50 transition-colors">
                   <td className="px-4 py-3 max-w-xs">
                     <p className="font-medium text-[var(--clay-black)] truncate">{q.questionText}</p>

apps/web/src/routes/admin.tsx

@@ -60,7 +60,7 @@ function AdminLayout() {
               <span className="text-sm text-[var(--warm-charcoal)]">Back to App</span>
             </Link>
           </div>
-          <h2 className="px-2 mb-4 text-xs font-semibold uppercase tracking-wider text-[var(--warm-charcoal)]">Admin Panel</h2>
+          <div className="px-2 mb-4 text-xs font-semibold uppercase tracking-wider text-[var(--warm-charcoal)]">Admin Panel</div>
           <nav className="flex flex-col gap-1">
             {adminNavItems.map((item) => {
               const isActive = location.pathname === item.to;

apps/web/src/routes/admin.users.tsx

@@ -46,8 +46,9 @@ function AdminUsers() {
           <Input
             placeholder="Search by name or email..."
             value={search}
-            onChange={(e) => handleSearch(e.target.value)}
-            className="max-w-sm"
+            onChange={(e) => setSearch(e.target.value)}
+            aria-label="Cari user"
+            className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] h-11"
           />
         </div>
         <table className="w-full text-sm">

apps/web/src/routes/analytics.tsx

@@ -1,12 +1,12 @@
+import { Suspense, lazy } from "react";
 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";
+
+const ChartsBundle = lazy(() => import("@/components/analytics/ChartsBundle"));
 
 export const Route = createFileRoute("/analytics")({
   component: AnalyticsComponent,
@@ -19,6 +19,15 @@ export const Route = createFileRoute("/analytics")({
   },
 });
 
+function ChartSkeleton() {
+  return (
+    <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>
+  );
+}
+
 function AnalyticsComponent() {
   const {
     overview,
@@ -40,10 +49,7 @@ function AnalyticsComponent() {
             <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>
+        <ChartSkeleton />
       </div>
     );
   }
@@ -77,31 +83,25 @@ function AnalyticsComponent() {
         <OverviewCards data={overview.data} />
       </div>
 
-      {/* Score Trend */}
-      <div className="mb-8">
-        <ScoreTrendChart data={trend.data} />
-      </div>
-
-      {/* Breakdown Charts */}
-      <div className="mb-8">
-        <BreakdownCharts
+      {/* Charts — lazy loaded */}
+      <Suspense fallback={<ChartSkeleton />}>
+        <ChartsBundle
+          trend={trend.data}
           byExamType={byExamType.data}
           bySectionType={bySectionType.data}
           byFormat={byFormat.data}
+          sectionTime={timeAnalytics.data?.sectionTime}
+          formatTimeData={timeAnalytics.data?.formatTime}
+          timeTrend={timeAnalytics.data?.timeTrend}
         />
-      </div>
+      </Suspense>
 
-      {/* Weaknesses + Time Analytics */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      {/* Weaknesses */}
+      <div className="mt-8 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

@@ -7,12 +7,29 @@ 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 type { Question } from "@/lib/types";
 import { QuestionReviewCard } from "@/components/attempt/QuestionReviewCard";
 import { ReviewFilterBar } from "@/components/attempt/ReviewFilterBar";
 import { SkillBreakdown } from "@/components/attempt/SkillBreakdown";
 
 type FilterStatus = "all" | "wrong" | "correct" | "marked";
 
+interface AnswerItem {
+  questionId: string;
+  userAnswer?: string;
+  answer?: string;
+  isCorrect?: boolean | null;
+  partialScore?: number | null;
+  timeSpentSec?: number;
+}
+
+interface QuestionAnswer {
+  q: Question;
+  ans: AnswerItem | null;
+  secIdx: number;
+  qIdx: number;
+}
+
 export const Route = createFileRoute("/attempt/$id")({
   component: AttemptResultComponent,
   beforeLoad: async () => {
@@ -60,24 +77,24 @@ function AttemptResultComponent() {
   // ── Flatten all questions with section context ──
   const allQuestions = useMemo(() => {
     if (!attempt?.sections) return [];
-    return attempt.sections.flatMap((sec: any, secIdx: number) =>
-      sec.questions.map((q: any, qIdx: number) => ({
+    return attempt.sections.flatMap((sec, secIdx: number) =>
+      sec.questions.map((q: Question, qIdx: number) => ({
         q,
         secIdx,
         qIdx,
-        ans: sec.answers.find((a: any) => a.questionId === q.id) ?? null,
+        ans: sec.answers.find((a: AnswerItem) => a.questionId === q.id) ?? null,
       })),
     );
   }, [attempt]);
 
   // ── Filtered questions ──
   const partialCount = useMemo(
-    () => allQuestions.filter(({ ans }: any) => ans?.partialScore != null && ans?.partialScore < 100).length,
+    () => allQuestions.filter(({ ans }) => ans?.partialScore != null && ans?.partialScore < 100).length,
     [allQuestions],
   );
 
   const filteredQuestions = useMemo(() => {
-    return allQuestions.filter(({ q, ans }: any) => {
+    return allQuestions.filter(({ q, ans }) => {
       if (filterStatus === "wrong" && ans?.isCorrect !== false) return false;
       if (filterStatus === "correct" && ans?.isCorrect !== true) return false;
       if (filterStatus === "marked") {
@@ -97,7 +114,7 @@ function AttemptResultComponent() {
     const next = !allExpanded;
     setAllExpanded(next);
     if (next) {
-      setExpandedIds(new Set(filteredQuestions.map(({ q }: any) => q.id)));
+      setExpandedIds(new Set(filteredQuestions.map(({ q }) => q.id)));
     } else {
       setExpandedIds(new Set());
     }
@@ -210,6 +227,7 @@ function AttemptResultComponent() {
                       <button
                         key={star}
                         onClick={() => ratePackageMutation.mutate({ packageId: attempt.packageId!, score: star })}
+                        aria-label={`Nilai ${star} bintang`}
                         className="transition-transform hover:scale-110"
                       >
                         <MaterialIcon
@@ -235,7 +253,7 @@ function AttemptResultComponent() {
       <div className="mb-8">
         <h2 className="text-xl font-headline font-bold text-[var(--clay-black)] mb-4">Per Section</h2>
         <div className="space-y-3">
-          {attempt.sections.map((sec: any) => {
+          {attempt.sections.map((sec) => {
             const secPct = sec.maxScore && sec.maxScore > 0
               ? Math.round(((sec.score ?? 0) / sec.maxScore) * 100)
               : 0;
@@ -273,9 +291,9 @@ function AttemptResultComponent() {
           <span className="ml-2 text-sm font-normal text-[var(--warm-charcoal)]">Klik topik untuk filter soal</span>
         </h2>
         <SkillBreakdown
-          questions={allQuestions.map(({ q, ans }: any) => ({
-            skillTags: q.skillTags,
-            isCorrect: ans?.isCorrect,
+          questions={allQuestions.map(({ q, ans }) => ({
+            skillTags: q.skillTags ?? [],
+            isCorrect: ans?.isCorrect ?? null,
           }))}
           onSkillClick={toggleSkill}
           activeSkills={filterSkills}
@@ -298,7 +316,7 @@ function AttemptResultComponent() {
           setFilterStatus={setFilterStatus}
           filterSkills={filterSkills}
           setFilterSkills={setFilterSkills}
-          questions={allQuestions.map(({ q, ans }: any) => ({
+          questions={allQuestions.map(({ q, ans }) => ({
             skillTags: q.skillTags ?? [],
             isCorrect: ans?.isCorrect,
           }))}
@@ -308,7 +326,7 @@ function AttemptResultComponent() {
         />
 
         <div className="space-y-3">
-          {filteredQuestions.map(({ q, secIdx, qIdx, ans }: any) => (
+          {filteredQuestions.map(({ q, secIdx, qIdx, ans }) => (
             <QuestionReviewCard
               key={q.id}
               q={q}