Update PWA assets configuration, replace logo image, and enhance routing with new history and profile routes. Add sidebar navigation for user profile and history, and implement EditPackageModal component for package management. Refactor API key management to support multiple keys and improve test session handling.

apps/web/pwa-assets.config.ts

@@ -5,5 +5,5 @@ export default defineConfig({
     preset: "2023",
   },
   preset,
-  images: ["public/logo.png"],
+  images: ["public/labas_icon.png"],
 });

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

@@ -0,0 +1,106 @@
+import { useState } from "react";
+import { Input } from "@labas/ui/components/input";
+import { Button } from "@labas/ui/components/button";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+export function EditPackageModal({
+  initialTitle,
+  initialDescription,
+  initialIsPublic,
+  onClose,
+  onSave,
+  isPending,
+}: {
+  initialTitle: string;
+  initialDescription: string | null;
+  initialIsPublic: boolean;
+  onClose: () => void;
+  onSave: (data: {
+    title: string;
+    description: string;
+    isPublic: boolean;
+  }) => void;
+  isPending: boolean;
+}) {
+  const [title, setTitle] = useState(initialTitle);
+  const [description, setDescription] = useState(initialDescription ?? "");
+  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)]">
+            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>
+
+        <div className="space-y-4">
+          <div>
+            <label className="text-sm font-medium text-[var(--clay-black)] block mb-1">
+              Judul Paket
+            </label>
+            <Input
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="Judul paket..."
+              className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)]"
+            />
+          </div>
+
+          <div>
+            <label className="text-sm font-medium text-[var(--clay-black)] block mb-1">
+              Deskripsi
+            </label>
+            <Input
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Deskripsi singkat..."
+              className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)]"
+            />
+          </div>
+
+          <label className="flex items-center gap-2 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={isPublic}
+              onChange={(e) => setIsPublic(e.target.checked)}
+              className="w-4 h-4 rounded border-[var(--oat-border)]"
+            />
+            <span className="text-sm text-[var(--warm-charcoal)]">
+              Publikasikan ke Bank Soal
+            </span>
+          </label>
+        </div>
+
+        <div className="mt-6 flex gap-3">
+          <Button
+            variant="outline"
+            onClick={onClose}
+            className="flex-1 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
+          >
+            Batal
+          </Button>
+          <Button
+            onClick={() => onSave({ title, description, isPublic })}
+            disabled={!title || isPending}
+            className="flex-1 bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)]"
+          >
+            {isPending ? "Menyimpan..." : "Simpan"}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/sidebar.tsx

@@ -8,11 +8,13 @@ const navItems = [
   { to: "/jobs", label: "Jobs", icon: "schedule" },
   { to: "/bank", label: "Bank Soal", icon: "database" },
   { to: "/packages", label: "Paket", icon: "folder" },
+  { to: "/history", label: "Riwayat", icon: "history" },
   { to: "/builder/combo", label: "Combo", icon: "join_inner" },
   { to: "/analytics", label: "Analytics", icon: "analytics" },
 ];
 
 const bottomItems = [
+  { to: "/me", label: "Profil", icon: "person" },
   { to: "/settings", label: "Settings", icon: "settings" },
 ];
 
@@ -34,9 +36,14 @@ export function Sidebar() {
           }`}
       >
         <div className={`mb-8 ${collapsed ? "px-0 text-center" : "px-4"}`}>
-          <h1 className="text-xl font-extrabold text-[var(--clay-black)] font-headline tracking-tight">
-            {collapsed ? "L" : "Labas"}
-          </h1>
+          <img
+            src="/logo.png"
+            alt="Labas"
+            width={64}
+            height={64}
+            className="mt-2 size-16 object-contain select-none"
+            decoding="async"
+          />
           {!collapsed && (
             <p className="text-xs text-[var(--warm-charcoal)] uppercase tracking-widest font-semibold mt-1">
               Exam Prep Portal
@@ -111,7 +118,7 @@ export function Sidebar() {
         onClick={toggle}
         title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
         style={{ left: collapsed ? "48px" : "240px" }}
-        className="hidden md:flex absolute top-6 z-40 items-center justify-center w-10 h-10 rounded-full bg-[var(--pure-white)] border-2 border-[var(--oat-border)] shadow-md hover:bg-[var(--oat-light)] transition-all duration-300 text-[var(--warm-charcoal)] clay-hover"
+        className="hidden md:flex fixed top-6 z-40 items-center justify-center w-10 h-10 rounded-full bg-[var(--pure-white)] border-2 border-[var(--oat-border)] shadow-md hover:bg-[var(--oat-light)] transition-all duration-300 text-[var(--warm-charcoal)] clay-hover"
       >
         <span className="relative inline-flex size-6 shrink-0 items-center justify-center">
           <span

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

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import { Link } from "@tanstack/react-router";
 import { useQuery } from "@tanstack/react-query";
 import { Button } from "@labas/ui/components/button";
@@ -13,7 +13,7 @@ interface AttemptTestViewProps {
   currentSectionIdx: number;
   setCurrentSectionIdx: (idx: number) => void;
   answers: Record<string, string>;
-  onAnswerChange: (questionId: string, sectionResultId: string, value: string) => void;
+  onAnswerChange: (questionId: string, sectionResultId: string | undefined, value: string) => void;
   timeElapsed: number;
   answeredCount: number;
   totalQuestions: number;
@@ -60,6 +60,20 @@ export function AttemptTestView({
   const sectionData = attempt?.sections?.[currentSectionIdx];
   const sectionResultId = sectionData?.sectionResultId;
 
+  // If user picks an answer before attempt.getById finishes, persist once sectionResultId exists
+  const flushKeyRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (!sectionResultId || isFinished || !currentSection?.questions?.length) return;
+    const key = `${currentSectionIdx}:${sectionResultId}`;
+    if (flushKeyRef.current === key) return;
+    flushKeyRef.current = key;
+    for (const q of currentSection.questions as any[]) {
+      const v = answers[q.id];
+      if (v) void onAnswerChange(q.id, sectionResultId, v);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- flush once per section when ids align; `answers` read from committing render
+  }, [sectionResultId, currentSectionIdx, isFinished, currentSection?.questions?.length, onAnswerChange]);
+
   if (!currentSection) {
     return (
       <div className="min-h-screen flex items-center justify-center bg-[var(--warm-cream)]">
@@ -205,11 +219,9 @@ export function AttemptTestView({
                         question={q}
                         value={answerValue}
                         onChange={(val) => {
-                          if (sectionResultId) {
-                            onAnswerChange(q.id, sectionResultId, val);
-                          }
+                          onAnswerChange(q.id, sectionResultId, val);
                         }}
-                        disabled={isFinished || !sectionResultId}
+                        disabled={isFinished}
                       />
                     </div>
                   </div>

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

@@ -28,10 +28,31 @@ const AUTHOR_VIEW_CHOICES = [
 ];
 
 const radioClass =
-  "flex items-center gap-3 p-3 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] cursor-pointer hover:border-[var(--matcha-300)] transition-colors";
-const radioSelected = "border-[var(--matcha-600)] bg-[#e8f5ed]";
+  "flex items-center gap-3 p-3 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] cursor-pointer hover:border-[var(--matcha-300)] transition-all";
+const radioSelected =
+  "border-[var(--matcha-600)] bg-[#e8f5ed] ring-2 ring-[var(--matcha-600)]/30 shadow-sm";
 const radioDisabled = "opacity-60 cursor-not-allowed";
 
+/** Normalize TF / NG style answers from API or loose model output */
+function normalizeTriStateKey(
+  value: string,
+  choices: readonly { key: string }[],
+): string {
+  const raw = (value ?? "").trim();
+  if (!raw) return "";
+  const u = raw.toUpperCase().replace(/\s+/g, "_");
+  if (choices.some((c) => c.key === u)) return u;
+  const compact = u.replace(/_/g, "");
+  const alias: Record<string, string> = {
+    TRUE: "TRUE",
+    FALSE: "FALSE",
+    NOTGIVEN: "NOT_GIVEN",
+    YES: "YES",
+    NO: "NO",
+  };
+  return alias[compact] ?? u;
+}
+
 export function QuestionInput({
   question,
   value,
@@ -81,49 +102,87 @@ export function QuestionInput({
   }
 
   if (format === "true_false_not_given") {
+    const normalizedValue = normalizeTriStateKey(value, TRUE_FALSE_CHOICES);
     return (
       <div className="space-y-2">
-        {TRUE_FALSE_CHOICES.map((c) => (
-          <label
-            key={c.key}
-            className={`${radioClass} ${value === c.key ? radioSelected : ""} ${disabled ? radioDisabled : ""}`}
-          >
-            <input
-              type="radio"
-              name={question.id}
-              value={c.key}
-              checked={value === c.key}
-              onChange={() => onChange(c.key)}
-              disabled={disabled}
-              className="hidden"
-            />
-            <span className="text-sm font-semibold text-[var(--clay-black)]">{c.label}</span>
-          </label>
-        ))}
+        {TRUE_FALSE_CHOICES.map((c) => {
+          const selected = normalizedValue === c.key;
+          return (
+            <label
+              key={c.key}
+              className={`${radioClass} ${selected ? radioSelected : ""} ${disabled ? radioDisabled : ""}`}
+            >
+              <input
+                type="radio"
+                name={question.id}
+                value={c.key}
+                checked={selected}
+                onChange={() => onChange(c.key)}
+                disabled={disabled}
+                className="sr-only"
+              />
+              <span
+                aria-hidden
+                className={`w-5 h-5 rounded-full border-2 shrink-0 flex items-center justify-center transition-colors ${
+                  selected
+                    ? "border-[var(--matcha-600)] bg-[var(--matcha-600)]"
+                    : "border-[var(--oat-border)] bg-[var(--pure-white)]"
+                }`}
+              >
+                {selected ? <span className="w-2 h-2 rounded-full bg-[var(--pure-white)]" /> : null}
+              </span>
+              <span
+                className={`text-sm font-semibold ${
+                  selected ? "text-[var(--matcha-800)]" : "text-[var(--clay-black)]"
+                }`}
+              >
+                {c.label}
+              </span>
+            </label>
+          );
+        })}
       </div>
     );
   }
 
   if (format === "author_view") {
+    const normalizedValue = normalizeTriStateKey(value, AUTHOR_VIEW_CHOICES);
     return (
       <div className="space-y-2">
-        {AUTHOR_VIEW_CHOICES.map((c) => (
-          <label
-            key={c.key}
-            className={`${radioClass} ${value === c.key ? radioSelected : ""} ${disabled ? radioDisabled : ""}`}
-          >
-            <input
-              type="radio"
-              name={question.id}
-              value={c.key}
-              checked={value === c.key}
-              onChange={() => onChange(c.key)}
-              disabled={disabled}
-              className="hidden"
-            />
-            <span className="text-sm font-semibold text-[var(--clay-black)]">{c.label}</span>
-          </label>
-        ))}
+        {AUTHOR_VIEW_CHOICES.map((c) => {
+          const selected = normalizedValue === c.key;
+          return (
+            <label
+              key={c.key}
+              className={`${radioClass} ${selected ? radioSelected : ""} ${disabled ? radioDisabled : ""}`}
+            >
+              <input
+                type="radio"
+                name={question.id}
+                value={c.key}
+                checked={selected}
+                onChange={() => onChange(c.key)}
+                disabled={disabled}
+                className="sr-only"
+              />
+              <span
+                aria-hidden
+                className={`w-5 h-5 rounded-full border-2 shrink-0 flex items-center justify-center transition-colors ${
+                  selected
+                    ? "border-[var(--matcha-600)] bg-[var(--matcha-600)]"
+                    : "border-[var(--oat-border)] bg-[var(--pure-white)]"
+                }`}
+              >
+                {selected ? <span className="w-2 h-2 rounded-full bg-[var(--pure-white)]" /> : null}
+              </span>
+              <span
+                className={`text-sm font-semibold ${selected ? "text-[var(--matcha-800)]" : "text-[var(--clay-black)]"}`}
+              >
+                {c.label}
+              </span>
+            </label>
+          );
+        })}
       </div>
     );
   }

apps/web/src/hooks/use-api-key.ts

@@ -1,9 +1,11 @@
 import { useState, useEffect, useCallback } from "react";
 import { encryptText, decryptText } from "@/lib/crypto";
 
-const STORAGE_KEY = "labas_api_key";
+const STORAGE_KEY = "labas_api_keys_v2";
 
-export interface StoredApiKey {
+export interface ApiKeyConfig {
+  id: string;
+  name: string;
   provider: string;
   baseUrl: string;
   apiKey: string;
@@ -11,45 +13,99 @@ export interface StoredApiKey {
   maxTokens?: number;
 }
 
-export function useApiKey() {
-  const [storedKey, setStoredKey] = useState<StoredApiKey | null>(null);
+function generateId() {
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 9)}`;
+}
+
+export function useApiKeys() {
+  const [configs, setConfigs] = useState<ApiKeyConfig[]>([]);
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
-    loadKey();
+    loadConfigs();
   }, []);
 
-  const loadKey = async () => {
+  const loadConfigs = async () => {
     try {
       const encrypted = localStorage.getItem(STORAGE_KEY);
       if (encrypted) {
         const decrypted = await decryptText(encrypted);
-        setStoredKey(JSON.parse(decrypted));
+        setConfigs(JSON.parse(decrypted));
       }
     } catch {
-      // Invalid or corrupted data
       localStorage.removeItem(STORAGE_KEY);
     } finally {
       setIsLoading(false);
     }
   };
 
-  const saveKey = useCallback(async (key: StoredApiKey) => {
-    const encrypted = await encryptText(JSON.stringify(key));
+  const persist = useCallback(async (next: ApiKeyConfig[]) => {
+    const encrypted = await encryptText(JSON.stringify(next));
     localStorage.setItem(STORAGE_KEY, encrypted);
-    setStoredKey(key);
+    setConfigs(next);
   }, []);
 
-  const removeKey = useCallback(() => {
-    localStorage.removeItem(STORAGE_KEY);
-    setStoredKey(null);
-  }, []);
+  const addConfig = useCallback(
+    async (config: Omit<ApiKeyConfig, "id">) => {
+      const next = [...configs, { ...config, id: generateId() }];
+      await persist(next);
+      return next[next.length - 1].id;
+    },
+    [configs, persist],
+  );
+
+  const updateConfig = useCallback(
+    async (id: string, updates: Partial<Omit<ApiKeyConfig, "id">>) => {
+      const next = configs.map((c) => {
+        if (c.id !== id) return c;
+        // If apiKey is empty string, keep the old one (don't overwrite)
+        const apiKey =
+          updates.apiKey === "" || updates.apiKey === undefined
+            ? c.apiKey
+            : updates.apiKey;
+        return { ...c, ...updates, apiKey };
+      });
+      await persist(next);
+    },
+    [configs, persist],
+  );
+
+  const removeConfig = useCallback(
+    async (id: string) => {
+      const next = configs.filter((c) => c.id !== id);
+      await persist(next);
+    },
+    [configs, persist],
+  );
+
+  const getConfig = useCallback(
+    (id: string) => configs.find((c) => c.id === id),
+    [configs],
+  );
+
+  return {
+    configs,
+    isLoading,
+    addConfig,
+    updateConfig,
+    removeConfig,
+    getConfig,
+    hasConfigs: configs.length > 0,
+  };
+}
+
+// Backward-compatible hook for places that only need the first (default) key
+export function useApiKey() {
+  const { configs, isLoading, addConfig, updateConfig, removeConfig } =
+    useApiKeys();
+
+  const storedKey = configs[0] ?? null;
 
   return {
     storedKey,
     isLoading,
-    saveKey,
-    removeKey,
+    saveKey: addConfig,
+    removeKey: removeConfig,
     hasKey: !!storedKey,
   };
 }

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

@@ -79,9 +79,12 @@ export function useTestSession(packageId: string) {
   }, [packageId, startMutation]);
 
   const handleAnswerChange = useCallback(
-    async (questionId: string, sectionResultId: string, value: string) => {
+    async (questionId: string, sectionResultId: string | undefined, value: string) => {
       if (!attemptId || isFinished) return;
+      // Always update UI immediately — sectionResultId may load a tick after attempt starts
       setAnswers((prev) => ({ ...prev, [questionId]: value }));
+      if (!sectionResultId) return;
+
       setSubmittingQId(questionId);
 
       // Start timer if first interaction

apps/web/src/routeTree.gen.ts

@@ -11,12 +11,15 @@
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as SettingsRouteImport } from './routes/settings'
 import { Route as PackagesRouteImport } from './routes/packages'
+import { Route as MeRouteImport } from './routes/me'
 import { Route as LoginRouteImport } from './routes/login'
 import { Route as JobsRouteImport } from './routes/jobs'
+import { Route as HistoryRouteImport } from './routes/history'
 import { Route as GenerateRouteImport } from './routes/generate'
 import { Route as BankRouteImport } from './routes/bank'
 import { Route as AnalyticsRouteImport } from './routes/analytics'
 import { Route as IndexRouteImport } from './routes/index'
+import { Route as ProfileUserIdRouteImport } from './routes/profile.$userId'
 import { Route as PackageIdRouteImport } from './routes/package.$id'
 import { Route as BuilderComboRouteImport } from './routes/builder.combo'
 import { Route as AttemptIdRouteImport } from './routes/attempt.$id'
@@ -33,6 +36,11 @@ const PackagesRoute = PackagesRouteImport.update({
   path: '/packages',
   getParentRoute: () => rootRouteImport,
 } as any)
+const MeRoute = MeRouteImport.update({
+  id: '/me',
+  path: '/me',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const LoginRoute = LoginRouteImport.update({
   id: '/login',
   path: '/login',
@@ -43,6 +51,11 @@ const JobsRoute = JobsRouteImport.update({
   path: '/jobs',
   getParentRoute: () => rootRouteImport,
 } as any)
+const HistoryRoute = HistoryRouteImport.update({
+  id: '/history',
+  path: '/history',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const GenerateRoute = GenerateRouteImport.update({
   id: '/generate',
   path: '/generate',
@@ -63,6 +76,11 @@ const IndexRoute = IndexRouteImport.update({
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ProfileUserIdRoute = ProfileUserIdRouteImport.update({
+  id: '/profile/$userId',
+  path: '/profile/$userId',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const PackageIdRoute = PackageIdRouteImport.update({
   id: '/package/$id',
   path: '/package/$id',
@@ -94,13 +112,16 @@ export interface FileRoutesByFullPath {
   '/analytics': typeof AnalyticsRoute
   '/bank': typeof BankRoute
   '/generate': typeof GenerateRoute
+  '/history': typeof HistoryRoute
   '/jobs': typeof JobsRoute
   '/login': typeof LoginRoute
+  '/me': typeof MeRoute
   '/packages': typeof PackagesRoute
   '/settings': typeof SettingsRoute
   '/attempt/$id': typeof AttemptIdRoute
   '/builder/combo': typeof BuilderComboRoute
   '/package/$id': typeof PackageIdRouteWithChildren
+  '/profile/$userId': typeof ProfileUserIdRoute
   '/package/$id/take': typeof PackageIdTakeRoute
   '/package/$id/': typeof PackageIdIndexRoute
 }
@@ -109,12 +130,15 @@ export interface FileRoutesByTo {
   '/analytics': typeof AnalyticsRoute
   '/bank': typeof BankRoute
   '/generate': typeof GenerateRoute
+  '/history': typeof HistoryRoute
   '/jobs': typeof JobsRoute
   '/login': typeof LoginRoute
+  '/me': typeof MeRoute
   '/packages': typeof PackagesRoute
   '/settings': typeof SettingsRoute
   '/attempt/$id': typeof AttemptIdRoute
   '/builder/combo': typeof BuilderComboRoute
+  '/profile/$userId': typeof ProfileUserIdRoute
   '/package/$id/take': typeof PackageIdTakeRoute
   '/package/$id': typeof PackageIdIndexRoute
 }
@@ -124,13 +148,16 @@ export interface FileRoutesById {
   '/analytics': typeof AnalyticsRoute
   '/bank': typeof BankRoute
   '/generate': typeof GenerateRoute
+  '/history': typeof HistoryRoute
   '/jobs': typeof JobsRoute
   '/login': typeof LoginRoute
+  '/me': typeof MeRoute
   '/packages': typeof PackagesRoute
   '/settings': typeof SettingsRoute
   '/attempt/$id': typeof AttemptIdRoute
   '/builder/combo': typeof BuilderComboRoute
   '/package/$id': typeof PackageIdRouteWithChildren
+  '/profile/$userId': typeof ProfileUserIdRoute
   '/package/$id/take': typeof PackageIdTakeRoute
   '/package/$id/': typeof PackageIdIndexRoute
 }
@@ -141,13 +168,16 @@ export interface FileRouteTypes {
     | '/analytics'
     | '/bank'
     | '/generate'
+    | '/history'
     | '/jobs'
     | '/login'
+    | '/me'
     | '/packages'
     | '/settings'
     | '/attempt/$id'
     | '/builder/combo'
     | '/package/$id'
+    | '/profile/$userId'
     | '/package/$id/take'
     | '/package/$id/'
   fileRoutesByTo: FileRoutesByTo
@@ -156,12 +186,15 @@ export interface FileRouteTypes {
     | '/analytics'
     | '/bank'
     | '/generate'
+    | '/history'
     | '/jobs'
     | '/login'
+    | '/me'
     | '/packages'
     | '/settings'
     | '/attempt/$id'
     | '/builder/combo'
+    | '/profile/$userId'
     | '/package/$id/take'
     | '/package/$id'
   id:
@@ -170,13 +203,16 @@ export interface FileRouteTypes {
     | '/analytics'
     | '/bank'
     | '/generate'
+    | '/history'
     | '/jobs'
     | '/login'
+    | '/me'
     | '/packages'
     | '/settings'
     | '/attempt/$id'
     | '/builder/combo'
     | '/package/$id'
+    | '/profile/$userId'
     | '/package/$id/take'
     | '/package/$id/'
   fileRoutesById: FileRoutesById
@@ -186,13 +222,16 @@ export interface RootRouteChildren {
   AnalyticsRoute: typeof AnalyticsRoute
   BankRoute: typeof BankRoute
   GenerateRoute: typeof GenerateRoute
+  HistoryRoute: typeof HistoryRoute
   JobsRoute: typeof JobsRoute
   LoginRoute: typeof LoginRoute
+  MeRoute: typeof MeRoute
   PackagesRoute: typeof PackagesRoute
   SettingsRoute: typeof SettingsRoute
   AttemptIdRoute: typeof AttemptIdRoute
   BuilderComboRoute: typeof BuilderComboRoute
   PackageIdRoute: typeof PackageIdRouteWithChildren
+  ProfileUserIdRoute: typeof ProfileUserIdRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -211,6 +250,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof PackagesRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/me': {
+      id: '/me'
+      path: '/me'
+      fullPath: '/me'
+      preLoaderRoute: typeof MeRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/login': {
       id: '/login'
       path: '/login'
@@ -225,6 +271,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof JobsRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/history': {
+      id: '/history'
+      path: '/history'
+      fullPath: '/history'
+      preLoaderRoute: typeof HistoryRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/generate': {
       id: '/generate'
       path: '/generate'
@@ -253,6 +306,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/profile/$userId': {
+      id: '/profile/$userId'
+      path: '/profile/$userId'
+      fullPath: '/profile/$userId'
+      preLoaderRoute: typeof ProfileUserIdRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/package/$id': {
       id: '/package/$id'
       path: '/package/$id'
@@ -310,13 +370,16 @@ const rootRouteChildren: RootRouteChildren = {
   AnalyticsRoute: AnalyticsRoute,
   BankRoute: BankRoute,
   GenerateRoute: GenerateRoute,
+  HistoryRoute: HistoryRoute,
   JobsRoute: JobsRoute,
   LoginRoute: LoginRoute,
+  MeRoute: MeRoute,
   PackagesRoute: PackagesRoute,
   SettingsRoute: SettingsRoute,
   AttemptIdRoute: AttemptIdRoute,
   BuilderComboRoute: BuilderComboRoute,
   PackageIdRoute: PackageIdRouteWithChildren,
+  ProfileUserIdRoute: ProfileUserIdRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

apps/web/src/routes/bank.tsx

@@ -1,8 +1,9 @@
 import { useState } from "react";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { createFileRoute, redirect } from "@tanstack/react-router";
+import { z } from "zod";
 import { authClient } from "@/lib/auth-client";
-import { trpc } from "@/utils/trpc";
+import { trpc, queryClient } 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";
@@ -25,6 +26,15 @@ import { QuestionDetailModal } from "@/components/bank/QuestionDetailModal";
 
 export const Route = createFileRoute("/bank")({
   component: BankComponent,
+  validateSearch: z.object({
+    tab: z.enum(["mine", "public"]).optional(),
+    search: z.string().optional(),
+    examType: z.string().optional(),
+    section: z.string().optional(),
+    format: z.string().optional(),
+    difficulty: z.coerce.number().optional(),
+    page: z.coerce.number().optional(),
+  }).parse,
   beforeLoad: async () => {
     const session = await authClient.getSession();
     if (!session.data) {
@@ -37,16 +47,19 @@ export const Route = createFileRoute("/bank")({
 type Tab = "mine" | "public";
 
 function BankComponent() {
+  const search = Route.useSearch();
+  const navigate = Route.useNavigate();
   const { data: session } = authClient.useSession();
   const userId = session?.user.id;
 
-  const [tab, setTab] = useState<Tab>("mine");
-  const [search, setSearch] = useState("");
-  const [examType, setExamType] = useState<string>("");
-  const [section, setSection] = useState<string>("");
-  const [format, setFormat] = useState<string>("");
-  const [difficulty, setDifficulty] = useState<number | undefined>();
-  const [page, setPage] = useState(0);
+  const tab = search.tab ?? "mine";
+  const searchText = search.search ?? "";
+  const examType = search.examType ?? "";
+  const section = search.section ?? "";
+  const format = search.format ?? "";
+  const difficulty = search.difficulty;
+  const page = search.page ?? 1;
+
   const [selectedQuestion, setSelectedQuestion] = useState<any | null>(null);
 
   // Modals
@@ -57,7 +70,7 @@ function BankComponent() {
 
   const query = useQuery(
     trpc.question.list.queryOptions({
-      search: search || undefined,
+      search: searchText || undefined,
       examTypeId: examType || undefined,
       sectionTypeId: section || undefined,
       format: format || undefined,
@@ -66,7 +79,7 @@ function BankComponent() {
         ? { creatorUserId: userId }
         : { isPublic: true }),
       limit,
-      offset: page * limit,
+      offset: (page - 1) * limit,
     }),
   );
 
@@ -97,16 +110,59 @@ function BankComponent() {
     onSuccess: () => query.refetch(),
   });
 
+  const setTab = (newTab: Tab) => {
+    navigate({
+      search: {
+        tab: newTab,
+        search: "",
+        examType: "",
+        section: "",
+        format: "",
+        difficulty: undefined,
+        page: 1,
+      },
+    });
+  };
+
+  const setSearch = (value: string) => {
+    navigate({ search: (prev) => ({ ...prev, search: value, page: 1 }) });
+  };
+
+  const setExamType = (value: string) => {
+    navigate({ search: (prev) => ({ ...prev, examType: value, page: 1 }) });
+  };
+
+  const setSection = (value: string) => {
+    navigate({ search: (prev) => ({ ...prev, section: value, page: 1 }) });
+  };
+
+  const setFormat = (value: string) => {
+    navigate({ search: (prev) => ({ ...prev, format: value, page: 1 }) });
+  };
+
+  const setDifficulty = (value: number | undefined) => {
+    navigate({ search: (prev) => ({ ...prev, difficulty: value, page: 1 }) });
+  };
+
+  const setPage = (newPage: number) => {
+    navigate({ search: (prev) => ({ ...prev, page: newPage }) });
+  };
+
   const clearFilters = () => {
-    setSearch("");
-    setExamType("");
-    setSection("");
-    setFormat("");
-    setDifficulty(undefined);
-    setPage(0);
+    navigate({
+      search: (prev) => ({
+        ...prev,
+        search: "",
+        examType: "",
+        section: "",
+        format: "",
+        difficulty: undefined,
+        page: 1,
+      }),
+    });
   };
 
-  const hasFilters = search || examType || section || format || difficulty !== undefined;
+  const hasFilters = searchText || examType || section || format || difficulty !== undefined;
 
   const autoBundleExamType = examType || null;
   const autoBundleSectionType = section || null;
@@ -135,12 +191,45 @@ function BankComponent() {
     count: number;
     sortOrder: "random" | "difficulty";
   }) => {
-    const allQuestions = await query.refetch();
+    // Auto-bundle needs a full candidate pool, not only current page (12 items).
+    const batchSize = 50;
+    const baseInput = {
+      search: searchText || undefined,
+      examTypeId: examType || undefined,
+      sectionTypeId: section || undefined,
+      format: format || undefined,
+      difficulty,
+      ...(tab === "mine" && userId
+        ? { creatorUserId: userId }
+        : { isPublic: true }),
+      limit: batchSize,
+    };
+
+    const firstPage = await queryClient.fetchQuery(
+      trpc.question.list.queryOptions({
+        ...baseInput,
+        offset: 0,
+      }),
+    );
+
+    const allQuestions = [...(firstPage.questions ?? [])];
+    const totalAvailable = firstPage.total ?? allQuestions.length;
+
+    for (let offset = batchSize; offset < totalAvailable; offset += batchSize) {
+      const pageData = await queryClient.fetchQuery(
+        trpc.question.list.queryOptions({
+          ...baseInput,
+          offset,
+        }),
+      );
+      allQuestions.push(...(pageData.questions ?? []));
+    }
+
     await handleAutoBundle({
       ...data,
       examTypeId: autoBundleExamType ?? "",
       sectionTypeId: autoBundleSectionType ?? "READING",
-      allQuestions: allQuestions.data?.questions ?? [],
+      allQuestions,
     });
     setIsAutoBundleOpen(false);
   };
@@ -159,7 +248,7 @@ function BankComponent() {
       {/* Tabs */}
       <div className="flex gap-2 mb-6">
         <button
-          onClick={() => { setTab("mine"); setPage(0); }}
+          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"
@@ -169,7 +258,7 @@ function BankComponent() {
           Soal Saya
         </button>
         <button
-          onClick={() => { setTab("public"); setPage(0); }}
+          onClick={() => setTab("public")}
           className={`px-4 py-2 rounded-[var(--radius-lg)] text-sm font-semibold transition-all ${
             tab === "public"
               ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow"
@@ -187,8 +276,8 @@ function BankComponent() {
             <MaterialIcon name="search" className="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--warm-charcoal)]" />
             <Input
               placeholder="Cari soal..."
-              value={search}
-              onChange={(e) => { setSearch(e.target.value); setPage(0); }}
+              value={searchText}
+              onChange={(e) => setSearch(e.target.value)}
               className="pl-10 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] h-11"
             />
           </div>
@@ -207,7 +296,7 @@ function BankComponent() {
         <div className="flex flex-wrap gap-2">
           <Select
             value={examType}
-            onValueChange={(v: string | null) => { setExamType(v ?? ""); setPage(0); }}
+            onValueChange={(v: string | null) => setExamType(v ?? "")}
           >
             <SelectTrigger className="w-36">
               <SelectValue placeholder="Semua Ujian" />
@@ -224,7 +313,7 @@ function BankComponent() {
 
           <Select
             value={section}
-            onValueChange={(v: string | null) => { setSection(v ?? ""); setPage(0); }}
+            onValueChange={(v: string | null) => setSection(v ?? "")}
           >
             <SelectTrigger className="w-38">
               <SelectValue placeholder="Semua Section" />
@@ -241,7 +330,7 @@ function BankComponent() {
 
           <Select
             value={format}
-            onValueChange={(v: string | null) => { setFormat(v ?? ""); setPage(0); }}
+            onValueChange={(v: string | null) => setFormat(v ?? "")}
           >
             <SelectTrigger className="w-52">
               <SelectValue placeholder="Semua Format" />
@@ -258,7 +347,7 @@ function BankComponent() {
 
           <Select
             value={difficulty !== undefined ? String(difficulty) : ""}
-            onValueChange={(v: string | null) => { setDifficulty(v ? Number(v) : undefined); setPage(0); }}
+            onValueChange={(v: string | null) => setDifficulty(v ? Number(v) : undefined)}
           >
             <SelectTrigger className="w-36">
               <SelectValue placeholder="Semua Level" />
@@ -486,19 +575,19 @@ function BankComponent() {
             <div className="flex items-center justify-center gap-2 mt-10">
               <Button
                 variant="outline"
-                onClick={() => setPage((p) => Math.max(0, p - 1))}
-                disabled={page === 0}
+                onClick={() => setPage(Math.max(1, page - 1))}
+                disabled={page <= 1}
                 className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
               >
                 <MaterialIcon name="chevron_left" />
               </Button>
               <span className="text-sm text-[var(--warm-charcoal)] px-4">
-                Halaman {page + 1} dari {totalPages}
+                Halaman {page} dari {totalPages}
               </span>
               <Button
                 variant="outline"
-                onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
-                disabled={page >= totalPages - 1}
+                onClick={() => setPage(Math.min(totalPages, page + 1))}
+                disabled={page >= totalPages}
                 className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
               >
                 <MaterialIcon name="chevron_right" />

apps/web/src/routes/generate.tsx

@@ -1,10 +1,11 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useMutation } from "@tanstack/react-query";
 import { createFileRoute, redirect, Link } from "@tanstack/react-router";
 import { authClient } from "@/lib/auth-client";
 import { queryClient, trpc } from "@/utils/trpc";
-import { useApiKey } from "@/hooks/use-api-key";
+import { useApiKeys } from "@/hooks/use-api-key";
 import { useGenerationJob } from "@/hooks/use-generation-job";
+import { Button } from "@labas/ui/components/button";
 import { Input } from "@labas/ui/components/input";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import { TestBlueprintCard } from "@/components/generate/TestBlueprintCard";
@@ -30,7 +31,20 @@ export const Route = createFileRoute("/generate")({
 });
 
 function RouteComponent() {
-  const { storedKey, hasKey } = useApiKey();
+  const { configs, hasConfigs } = useApiKeys();
+
+  const [selectedKeyId, setSelectedKeyId] = useState<string>(
+    configs[0]?.id ?? "",
+  );
+
+  // keep selectedKeyId in sync when configs load
+  useEffect(() => {
+    if (configs.length > 0 && !configs.find((c) => c.id === selectedKeyId)) {
+      setSelectedKeyId(configs[0].id);
+    }
+  }, [configs, selectedKeyId]);
+
+  const selectedConfig = configs.find((c) => c.id === selectedKeyId);
 
   const {
     result,
@@ -90,7 +104,7 @@ function RouteComponent() {
   };
 
   const handleGenerate = () => {
-    if (!hasKey || !storedKey) {
+    if (!hasConfigs || !selectedConfig) {
       setError("API key belum dikonfigurasi. Tambahkan di Settings.");
       return;
     }
@@ -106,10 +120,10 @@ function RouteComponent() {
       questionCount,
       mode,
       apiKeyConfig: {
-        baseUrl: storedKey.baseUrl,
-        apiKey: storedKey.apiKey,
-        model: storedKey.modelName,
-        maxTokens: storedKey.maxTokens ?? 16384,
+        baseUrl: selectedConfig.baseUrl,
+        apiKey: selectedConfig.apiKey,
+        model: selectedConfig.modelName,
+        maxTokens: selectedConfig.maxTokens ?? 16384,
       },
     });
   };
@@ -127,7 +141,7 @@ function RouteComponent() {
         </p>
       </section>
 
-      {!hasKey && (
+      {!hasConfigs && (
         <div className="mb-8 p-4 rounded-[var(--radius-lg)] bg-[var(--badge-blue-bg)] text-[var(--badge-blue-text)] text-sm flex items-center gap-3 border-2 border-[var(--badge-blue-bg)]">
           <MaterialIcon name="warning" />
           <span>API key belum dikonfigurasi.</span>
@@ -137,6 +151,36 @@ function RouteComponent() {
         </div>
       )}
 
+      {hasConfigs && (
+        <div className="mb-8 p-4 rounded-[var(--radius-lg)] bg-[var(--warm-cream)] border-2 border-[var(--oat-border)]">
+          <label className="text-sm font-medium text-[var(--clay-black)] mb-2 block">
+            Provider / API Key
+          </label>
+          <div className="flex gap-3">
+            <select
+              value={selectedKeyId}
+              onChange={(e) => setSelectedKeyId(e.target.value)}
+              className="flex-1 h-11 px-3 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)] text-sm focus:outline-none focus:border-[var(--matcha-400)]"
+            >
+              {configs.map((c) => (
+                <option key={c.id} value={c.id}>
+                  {c.name} · {c.modelName}
+                </option>
+              ))}
+            </select>
+            <Link to="/settings">
+              <Button
+                variant="outline"
+                className="h-11 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
+              >
+                <MaterialIcon name="settings" className="mr-1" />
+                Kelola
+              </Button>
+            </Link>
+          </div>
+        </div>
+      )}
+
       <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-start">
         {/* Configuration Panel (Left) */}
         <div className="lg:col-span-8 flex flex-col gap-8">
@@ -310,7 +354,7 @@ function RouteComponent() {
           setMode={setMode}
           isGenerating={isGenerating}
           generatePending={generate.isPending}
-          hasKey={hasKey}
+          hasKey={hasConfigs}
           jobProgress={jobQuery.data?.progress ?? 0}
           jobProgressMessage={jobQuery.data?.progressMessage}
           error={error}

apps/web/src/routes/history.tsx

@@ -0,0 +1,236 @@
+import { useQuery } from "@tanstack/react-query";
+import { createFileRoute, redirect, Link } from "@tanstack/react-router";
+import { z } from "zod";
+import { authClient } from "@/lib/auth-client";
+import { trpc } from "@/utils/trpc";
+import { Button } from "@labas/ui/components/button";
+import { Card, CardContent } from "@labas/ui/components/card";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+export const Route = createFileRoute("/history")({
+  component: HistoryComponent,
+  validateSearch: z.object({
+    page: z.coerce.number().optional(),
+  }).parse,
+  beforeLoad: async () => {
+    const session = await authClient.getSession();
+    if (!session.data) {
+      redirect({ to: "/login", throw: true });
+    }
+    return { session };
+  },
+});
+
+function formatDate(dateStr: string | Date | null) {
+  if (!dateStr) return "-";
+  const d = new Date(dateStr);
+  return d.toLocaleDateString("id-ID", {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+function getStatusBadge(status: string) {
+  switch (status) {
+    case "completed":
+      return (
+        <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-xs font-semibold">
+          <MaterialIcon name="check_circle" className="text-xs" />
+          Selesai
+        </span>
+      );
+    case "abandoned":
+      return (
+        <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-[var(--oat-light)] text-[var(--warm-charcoal)] text-xs font-semibold">
+          <MaterialIcon name="cancel" className="text-xs" />
+          Ditinggalkan
+        </span>
+      );
+    default:
+      return (
+        <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-[var(--slushie-500)]/20 text-[var(--slushie-800)] text-xs font-semibold">
+          <MaterialIcon name="hourglass_top" className="text-xs" />
+          Berlangsung
+        </span>
+      );
+  }
+}
+
+export function HistoryComponent() {
+  const search = Route.useSearch();
+  const navigate = Route.useNavigate();
+  const page = search.page ?? 1;
+  const limit = 12;
+
+  const query = useQuery(
+    trpc.attempt.myAttempts.queryOptions({ limit, offset: (page - 1) * limit }),
+  );
+
+  const attempts = query.data?.attempts ?? [];
+  const total = query.data?.total ?? 0;
+  const totalPages = Math.ceil(total / limit);
+
+  return (
+    <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-5xl mx-auto bg-[var(--warm-cream)]">
+      {/* Header */}
+      <div className="mb-8">
+        <div className="flex items-center gap-2 text-sm text-[var(--warm-charcoal)] mb-4">
+          <Link to="/" className="hover:text-[var(--clay-black)] transition-colors">
+            Beranda
+          </Link>
+          <MaterialIcon name="chevron_right" className="text-xs" />
+          <span className="text-[var(--clay-black)] font-medium">Riwayat Latihan</span>
+        </div>
+
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-4xl font-headline font-extrabold text-[var(--clay-black)] tracking-tight">
+              Riwayat Latihan
+            </h1>
+            <p className="text-lg text-[var(--warm-charcoal)] mt-2">
+              Semua attempt latihan Anda.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Results */}
+      {query.isLoading ? (
+        <div className="space-y-4">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <Card key={i} className="h-24 bg-[var(--oat-light)] animate-pulse rounded-[var(--radius-xl)]" />
+          ))}
+        </div>
+      ) : attempts.length === 0 ? (
+        <div className="text-center py-20">
+          <MaterialIcon name="history" className="text-6xl text-[var(--warm-silver)] mx-auto mb-4" />
+          <p className="text-lg text-[var(--warm-charcoal)] font-semibold">Belum ada riwayat latihan</p>
+          <p className="text-sm text-[var(--warm-silver)] mt-1">
+            Mulai latihan dari paket soal untuk melihat riwayat di sini.
+          </p>
+          <Link to="/packages" className="inline-block mt-6">
+            <Button className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] rounded-[var(--radius-lg)]">
+              <MaterialIcon name="folder" className="mr-2" />
+              Lihat Paket Soal
+            </Button>
+          </Link>
+        </div>
+      ) : (
+        <>
+          <div className="space-y-4">
+            {attempts.map((attempt) => {
+              const pct =
+                attempt.maxScore && attempt.maxScore > 0 && attempt.totalScore != null
+                  ? Math.round((attempt.totalScore / attempt.maxScore) * 100)
+                  : null;
+
+              return (
+                <Card
+                  key={attempt.id}
+                  className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] hover:border-[var(--matcha-400)] transition-colors"
+                >
+                  <CardContent className="p-5">
+                    <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-2 flex-wrap">
+                          {getStatusBadge(attempt.status)}
+                          {attempt.examTypeName && (
+                            <span className="px-2.5 py-1 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-xs font-semibold">
+                              {attempt.examTypeName}
+                            </span>
+                          )}
+                        </div>
+
+                        <h3 className="font-headline text-lg font-bold text-[var(--clay-black)] truncate">
+                          {attempt.packageTitle ?? "Paket tidak diketahui"}
+                        </h3>
+
+                        <div className="flex items-center gap-4 mt-1 text-xs text-[var(--warm-charcoal)]">
+                          <span className="flex items-center gap-1">
+                            <MaterialIcon name="event" className="text-xs" />
+                            {formatDate(attempt.startedAt)}
+                          </span>
+                          {attempt.finishedAt && (
+                            <span className="flex items-center gap-1">
+                              <MaterialIcon name="check" className="text-xs" />
+                              {formatDate(attempt.finishedAt)}
+                            </span>
+                          )}
+                        </div>
+                      </div>
+
+                      <div className="flex items-center gap-6 shrink-0">
+                        {pct != null && (
+                          <div className="text-center">
+                            <div className="text-2xl font-headline font-extrabold text-[var(--clay-black)]">
+                              {pct}%
+                            </div>
+                            <div className="text-xs text-[var(--warm-charcoal)]">
+                              {attempt.totalScore}/{attempt.maxScore}
+                            </div>
+                          </div>
+                        )}
+
+                        <div className="flex gap-2">
+                          {attempt.status === "completed" && (
+                            <Link to="/attempt/$id" params={{ id: attempt.id }}>
+                              <Button
+                                variant="outline"
+                                className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover text-sm"
+                              >
+                                <MaterialIcon name="visibility" className="mr-1" />
+                                Hasil
+                              </Button>
+                            </Link>
+                          )}
+                          {attempt.packageId && (
+                            <Link to="/package/$id" params={{ id: attempt.packageId }}>
+                              <Button
+                                variant="outline"
+                                className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover text-sm"
+                              >
+                                <MaterialIcon name="folder" className="mr-1" />
+                                Paket
+                              </Button>
+                            </Link>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              );
+            })}
+          </div>
+
+          {totalPages > 1 && (
+            <div className="flex items-center justify-center gap-2 mt-10">
+              <Button
+                variant="outline"
+                onClick={() => navigate({ search: (prev) => ({ ...prev, page: Math.max(1, page - 1) }) })}
+                disabled={page <= 1}
+                className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
+              >
+                <MaterialIcon name="chevron_left" />
+              </Button>
+              <span className="text-sm text-[var(--warm-charcoal)] px-4">
+                Halaman {page} dari {totalPages}
+              </span>
+              <Button
+                variant="outline"
+                onClick={() => navigate({ search: (prev) => ({ ...prev, page: Math.min(totalPages, page + 1) }) })}
+                disabled={page >= totalPages}
+                className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
+              >
+                <MaterialIcon name="chevron_right" />
+              </Button>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

apps/web/src/routes/index.tsx

@@ -5,6 +5,7 @@ import { trpc } from "@/utils/trpc";
 import { Button } from "@labas/ui/components/button";
 import { Card, CardContent } from "@labas/ui/components/card";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { formatTime } from "@/lib/time";
 
 export const Route = createFileRoute("/")({
   component: HomeComponent,
@@ -17,9 +18,21 @@ export const Route = createFileRoute("/")({
   },
 });
 
+function formatDateShort(dateStr: string | Date | null) {
+  if (!dateStr) return "-";
+  const d = new Date(dateStr);
+  return d.toLocaleDateString("id-ID", { day: "numeric", month: "short" });
+}
+
 function HomeComponent() {
   const { session } = Route.useRouteContext();
-  const privateData = useQuery(trpc.privateData.queryOptions());
+  const overview = useQuery(trpc.stats.overview.queryOptions());
+  const recentAttempts = useQuery(
+    trpc.attempt.myAttempts.queryOptions({ limit: 5, offset: 0 }),
+  );
+
+  const stats = overview.data;
+  const attempts = recentAttempts.data?.attempts ?? [];
 
   return (
     <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-6xl mx-auto bg-[var(--warm-cream)]">
@@ -41,8 +54,10 @@ function HomeComponent() {
                 <MaterialIcon name="assignment" className="text-xl text-[var(--matcha-800)]" />
               </div>
               <div>
-                <p className="text-sm text-[var(--warm-charcoal)]">Soal Dikerjakan</p>
-                <p className="text-2xl font-bold text-[var(--clay-black)] font-headline">0</p>
+                <p className="text-sm text-[var(--warm-charcoal)]">Latihan Selesai</p>
+                <p className="text-2xl font-bold text-[var(--clay-black)] font-headline">
+                  {stats?.completedAttempts ?? 0}
+                </p>
               </div>
             </div>
           </CardContent>
@@ -55,7 +70,9 @@ function HomeComponent() {
               </div>
               <div>
                 <p className="text-sm text-[var(--warm-charcoal)]">Waktu Latihan</p>
-                <p className="text-2xl font-bold text-[var(--clay-black)] font-headline">0 jam</p>
+                <p className="text-2xl font-bold text-[var(--clay-black)] font-headline">
+                  {stats ? `${Math.round(stats.totalTimeSpentSec / 60)} menit` : "0 menit"}
+                </p>
               </div>
             </div>
           </CardContent>
@@ -68,7 +85,9 @@ function HomeComponent() {
               </div>
               <div>
                 <p className="text-sm text-[var(--warm-charcoal)]">Akurasi Rata-rata</p>
-                <p className="text-2xl font-bold text-[var(--clay-black)] font-headline">-</p>
+                <p className="text-2xl font-bold text-[var(--clay-black)] font-headline">
+                  {stats ? `${stats.overallAccuracyPct}%` : "-"}
+                </p>
               </div>
             </div>
           </CardContent>
@@ -83,14 +102,115 @@ function HomeComponent() {
             <span className="ml-2">Generate Soal Baru</span>
           </Button>
         </Link>
-        <Link to="/settings">
+        <Link to="/packages">
           <Button variant="outline" className="rounded-[var(--radius-lg)] h-11 px-6 border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)] hover:bg-[var(--oat-light)] clay-hover">
-            <MaterialIcon name="key" className="text-xl" />
-            <span className="ml-2">Atur API Key</span>
+            <MaterialIcon name="folder" className="text-xl" />
+            <span className="ml-2">Mulai Latihan</span>
+          </Button>
+        </Link>
+        <Link to="/analytics">
+          <Button variant="outline" className="rounded-[var(--radius-lg)] h-11 px-6 border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)] hover:bg-[var(--oat-light)] clay-hover">
+            <MaterialIcon name="analytics" className="text-xl" />
+            <span className="ml-2">Lihat Analitik</span>
           </Button>
         </Link>
       </div>
 
+      {/* Recent Attempts */}
+      <section className="mb-10">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-xl font-headline font-bold text-[var(--clay-black)]">
+            Latihan Terakhir
+          </h2>
+          <Link to="/history" className="text-sm text-[var(--matcha-600)] font-semibold hover:underline">
+            Lihat Semua
+          </Link>
+        </div>
+
+        {attempts.length === 0 ? (
+          <Card className="bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+            <CardContent className="p-6 text-center">
+              <MaterialIcon name="history" className="text-4xl text-[var(--warm-silver)] mx-auto mb-3" />
+              <p className="text-[var(--warm-charcoal)] font-semibold">Belum ada latihan</p>
+              <p className="text-sm text-[var(--warm-silver)] mt-1">
+                Pilih paket soal dan mulai latihan pertama Anda.
+              </p>
+              <Link to="/packages" className="inline-block mt-4">
+                <Button className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] rounded-[var(--radius-lg)]">
+                  <MaterialIcon name="folder" className="mr-2" />
+                  Lihat Paket
+                </Button>
+              </Link>
+            </CardContent>
+          </Card>
+        ) : (
+          <div className="space-y-3">
+            {attempts.map((a) => {
+              const pct =
+                a.maxScore && a.maxScore > 0 && a.totalScore != null
+                  ? Math.round((a.totalScore / a.maxScore) * 100)
+                  : null;
+              return (
+                <Card
+                  key={a.id}
+                  className="bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] hover:border-[var(--matcha-400)] transition-colors"
+                >
+                  <CardContent className="p-4">
+                    <div className="flex items-center justify-between gap-4">
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-1">
+                          {a.status === "completed" ? (
+                            <MaterialIcon name="check_circle" className="text-[var(--matcha-600)] text-sm" />
+                          ) : a.status === "abandoned" ? (
+                            <MaterialIcon name="cancel" className="text-[var(--warm-silver)] text-sm" />
+                          ) : (
+                            <MaterialIcon name="hourglass_top" className="text-[var(--slushie-600)] text-sm" />
+                          )}
+                          <span className="text-sm font-semibold text-[var(--clay-black)] truncate">
+                            {a.packageTitle ?? "Paket tidak diketahui"}
+                          </span>
+                          {a.examTypeName && (
+                            <span className="px-2 py-0.5 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-[10px] font-semibold shrink-0">
+                              {a.examTypeName}
+                            </span>
+                          )}
+                        </div>
+                        <div className="text-xs text-[var(--warm-charcoal)]">
+                          {formatDateShort(a.startedAt)}
+                        </div>
+                      </div>
+
+                      <div className="flex items-center gap-4 shrink-0">
+                        {pct != null && (
+                          <div className="text-right">
+                            <div className="text-lg font-headline font-bold text-[var(--clay-black)]">
+                              {pct}%
+                            </div>
+                            <div className="text-xs text-[var(--warm-charcoal)]">
+                              {a.totalScore}/{a.maxScore}
+                            </div>
+                          </div>
+                        )}
+                        {a.status === "completed" && (
+                          <Link to="/attempt/$id" params={{ id: a.id }}>
+                            <Button
+                              variant="outline"
+                              className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover text-sm"
+                            >
+                              Hasil
+                            </Button>
+                          </Link>
+                        )}
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              );
+            })}
+          </div>
+        )}
+      </section>
+
       {/* Feature Cards */}
       <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
         <Link to="/generate" className="block">
@@ -109,45 +229,37 @@ function HomeComponent() {
           </Card>
         </Link>
 
-        <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-dashed border-[var(--oat-border)] rounded-[var(--radius-xl)] h-full opacity-70">
-          <CardContent className="p-6">
-            <div className="flex items-center gap-3 mb-4">
-              <div className="h-10 w-10 bg-[var(--oat-light)] rounded-[var(--radius-md)] flex items-center justify-center">
-                <MaterialIcon name="database" className="text-xl text-[var(--warm-silver)]" />
+        <Link to="/bank" className="block">
+          <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] h-full">
+            <CardContent className="p-6">
+              <div className="flex items-center gap-3 mb-4">
+                <div className="h-10 w-10 bg-[var(--slushie-500)] rounded-[var(--radius-md)] flex items-center justify-center">
+                  <MaterialIcon name="database" className="text-xl text-[var(--clay-black)]" />
+                </div>
+                <h3 className="font-headline text-lg font-bold text-[var(--clay-black)]">Bank Soal</h3>
               </div>
-              <h3 className="font-headline text-lg font-bold text-[var(--warm-silver)]">Bank Soal</h3>
-            </div>
-            <p className="text-sm text-[var(--warm-silver)]">
-              Simpan, publikasikan, dan gunakan ulang soal. Segera hadir.
-            </p>
-          </CardContent>
-        </Card>
+              <p className="text-sm text-[var(--warm-charcoal)]">
+                Simpan, publikasikan, dan gunakan ulang soal latihan Anda. Buat paket dari soal pilihan.
+              </p>
+            </CardContent>
+          </Card>
+        </Link>
 
-        <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-dashed border-[var(--oat-border)] rounded-[var(--radius-xl)] h-full opacity-70">
-          <CardContent className="p-6">
-            <div className="flex items-center gap-3 mb-4">
-              <div className="h-10 w-10 bg-[var(--oat-light)] rounded-[var(--radius-md)] flex items-center justify-center">
-                <MaterialIcon name="analytics" className="text-xl text-[var(--warm-silver)]" />
+        <Link to="/analytics" className="block">
+          <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] h-full">
+            <CardContent className="p-6">
+              <div className="flex items-center gap-3 mb-4">
+                <div className="h-10 w-10 bg-[var(--lemon-400)] rounded-[var(--radius-md)] flex items-center justify-center">
+                  <MaterialIcon name="analytics" className="text-xl text-[var(--lemon-800)]" />
+                </div>
+                <h3 className="font-headline text-lg font-bold text-[var(--clay-black)]">Analytics</h3>
               </div>
-              <h3 className="font-headline text-lg font-bold text-[var(--warm-silver)]">Analytics</h3>
-            </div>
-            <p className="text-sm text-[var(--warm-silver)]">
-              Evaluasi per-section, identifikasi kelemahan. Segera hadir.
-            </p>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* API Status */}
-      <div className="mt-10 flex items-center gap-2 text-sm text-[var(--warm-charcoal)]">
-        <div className={`h-2 w-2 rounded-full ${privateData.data ? "bg-[var(--matcha-600)]" : "bg-[var(--pomegranate-400)]"}`} />
-        <span>
-          {privateData.isLoading
-            ? "Checking..."
-            : privateData.data
-              ? "Server Connected"
-              : "Server Disconnected"}
-        </span>
+              <p className="text-sm text-[var(--warm-charcoal)]">
+                Evaluasi per-section, identifikasi kelemahan, dan pantau tren perkembangan Anda.
+              </p>
+            </CardContent>
+          </Card>
+        </Link>
       </div>
     </div>
   );

apps/web/src/routes/me.tsx

@@ -0,0 +1,217 @@
+import { useState } from "react";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { createFileRoute, redirect, Link } from "@tanstack/react-router";
+import { authClient } from "@/lib/auth-client";
+import { trpc } from "@/utils/trpc";
+import { Button } from "@labas/ui/components/button";
+import { Input } from "@labas/ui/components/input";
+import { Card, CardContent } from "@labas/ui/components/card";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+export const Route = createFileRoute("/me")({
+  component: MeComponent,
+  beforeLoad: async () => {
+    const session = await authClient.getSession();
+    if (!session.data) {
+      redirect({ to: "/login", throw: true });
+    }
+    return { session };
+  },
+});
+
+function MeComponent() {
+  const { session } = Route.useRouteContext();
+  const userId = session.data?.user.id ?? "";
+
+  const profile = useQuery(trpc.profile.getById.queryOptions({ userId }));
+  const updateMutation = useMutation(trpc.profile.update.mutationOptions());
+
+  const [isEditing, setIsEditing] = useState(false);
+  const [name, setName] = useState(session.data?.user.name ?? "");
+  const [image, setImage] = useState(session.data?.user.image ?? "");
+
+  const handleSave = async () => {
+    await updateMutation.mutateAsync({
+      name: name || undefined,
+      image: image || null,
+    });
+    setIsEditing(false);
+    profile.refetch();
+  };
+
+  if (!profile.data) {
+    return (
+      <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-3xl mx-auto bg-[var(--warm-cream)]">
+        <div className="h-32 bg-[var(--oat-light)] animate-pulse rounded-[var(--radius-xl)]" />
+      </div>
+    );
+  }
+
+  const { stats } = profile.data;
+
+  return (
+    <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-3xl mx-auto bg-[var(--warm-cream)]">
+      {/* Header */}
+      <div className="mb-8">
+        <div className="flex items-center gap-2 text-sm text-[var(--warm-charcoal)] mb-4">
+          <Link to="/" className="hover:text-[var(--clay-black)] transition-colors">
+            Beranda
+          </Link>
+          <MaterialIcon name="chevron_right" className="text-xs" />
+          <span className="text-[var(--clay-black)] font-medium">Profil Saya</span>
+        </div>
+        <h1 className="text-4xl font-headline font-extrabold text-[var(--clay-black)] tracking-tight">
+          Profil Saya
+        </h1>
+      </div>
+
+      {/* Profile Card */}
+      <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] mb-8">
+        <CardContent className="p-6 md:p-8">
+          {isEditing ? (
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-[var(--clay-black)] mb-1">Nama</label>
+                <Input
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  className="bg-[var(--warm-cream)] border-2 border-[var(--oat-border)] rounded-[var(--radius-lg)]"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-[var(--clay-black)] mb-1">URL Avatar</label>
+                <Input
+                  value={image}
+                  onChange={(e) => setImage(e.target.value)}
+                  placeholder="https://..."
+                  className="bg-[var(--warm-cream)] border-2 border-[var(--oat-border)] rounded-[var(--radius-lg)]"
+                />
+                <p className="text-xs text-[var(--warm-silver)] mt-1">
+                  Masukkan URL gambar. Kosongkan untuk menggunakan inisial.
+                </p>
+              </div>
+              <div className="flex gap-3 pt-2">
+                <Button
+                  onClick={handleSave}
+                  disabled={updateMutation.isPending}
+                  className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] rounded-[var(--radius-lg)]"
+                >
+                  {updateMutation.isPending ? "Menyimpan..." : "Simpan"}
+                </Button>
+                <Button
+                  variant="outline"
+                  onClick={() => {
+                    setName(session.data?.user.name ?? "");
+                    setImage(session.data?.user.image ?? "");
+                    setIsEditing(false);
+                  }}
+                  className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)]"
+                >
+                  Batal
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-4 md:gap-6">
+                <div className="w-16 h-16 md:w-20 md:h-20 rounded-full bg-[var(--matcha-300)] flex items-center justify-center text-2xl md:text-3xl font-bold text-[var(--matcha-800)] shrink-0">
+                  {session.data?.user.image ? (
+                    <img
+                      src={session.data.user.image}
+                      alt={session.data.user.name}
+                      className="w-full h-full rounded-full object-cover"
+                    />
+                  ) : (
+                    (session.data?.user.name?.[0] ?? "?").toUpperCase()
+                  )}
+                </div>
+                <div>
+                  <h2 className="text-2xl font-headline font-extrabold text-[var(--clay-black)]">
+                    {session.data?.user.name ?? "Pengguna"}
+                  </h2>
+                  <p className="text-sm text-[var(--warm-charcoal)]">{session.data?.user.email}</p>
+                </div>
+              </div>
+              <Button
+                variant="outline"
+                onClick={() => setIsEditing(true)}
+                className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
+              >
+                <MaterialIcon name="edit" className="mr-2" />
+                Edit
+              </Button>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Stats */}
+      <h2 className="text-xl font-headline font-bold text-[var(--clay-black)] mb-4">Statistik Kreator</h2>
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+        <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+          <CardContent className="p-4 text-center">
+            <div className="text-2xl font-headline font-extrabold text-[var(--clay-black)]">
+              {stats.totalPackages}
+            </div>
+            <div className="text-xs text-[var(--warm-charcoal)] mt-1">Paket Dibuat</div>
+          </CardContent>
+        </Card>
+        <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+          <CardContent className="p-4 text-center">
+            <div className="text-2xl font-headline font-extrabold text-[var(--clay-black)]">
+              {stats.totalPackageUsage}
+            </div>
+            <div className="text-xs text-[var(--warm-charcoal)] mt-1">Paket Digunakan</div>
+          </CardContent>
+        </Card>
+        <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+          <CardContent className="p-4 text-center">
+            <div className="text-2xl font-headline font-extrabold text-[var(--clay-black)]">
+              {stats.totalQuestions}
+            </div>
+            <div className="text-xs text-[var(--warm-charcoal)] mt-1">Soal Dibuat</div>
+          </CardContent>
+        </Card>
+        <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+          <CardContent className="p-4 text-center">
+            <div className="text-2xl font-headline font-extrabold text-[var(--clay-black)]">
+              {stats.avgPackageRating > 0 ? stats.avgPackageRating : "-"}
+            </div>
+            <div className="text-xs text-[var(--warm-charcoal)] mt-1">Rating Rata-rata</div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Quick Links */}
+      <h2 className="text-xl font-headline font-bold text-[var(--clay-black)] mb-4">Tautan Cepat</h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <Link to="/history" className="block">
+          <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+            <CardContent className="p-5 flex items-center gap-4">
+              <div className="w-10 h-10 rounded-[var(--radius-lg)] bg-[var(--slushie-500)] flex items-center justify-center">
+                <MaterialIcon name="history" className="text-[var(--clay-black)]" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-[var(--clay-black)]">Riwayat Latihan</h3>
+                <p className="text-xs text-[var(--warm-charcoal)]">Lihat semua attempt latihan Anda</p>
+              </div>
+            </CardContent>
+          </Card>
+        </Link>
+        <Link to="/bank" className="block">
+          <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+            <CardContent className="p-5 flex items-center gap-4">
+              <div className="w-10 h-10 rounded-[var(--radius-lg)] bg-[var(--matcha-300)] flex items-center justify-center">
+                <MaterialIcon name="database" className="text-[var(--matcha-800)]" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-[var(--clay-black)]">Bank Soal Saya</h3>
+                <p className="text-xs text-[var(--warm-charcoal)]">Kelola soal yang Anda buat</p>
+              </div>
+            </CardContent>
+          </Card>
+        </Link>
+      </div>
+    </div>
+  );
+}

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

@@ -1,4 +1,5 @@
-import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+import { useQuery, useMutation } from "@tanstack/react-query";
 import { createFileRoute, redirect, Link } from "@tanstack/react-router";
 import { authClient } from "@/lib/auth-client";
 import { trpc } from "@/utils/trpc";
@@ -6,6 +7,7 @@ import { Button } from "@labas/ui/components/button";
 import { Card, CardContent } from "@labas/ui/components/card";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import { formatLabel } from "@/lib/format";
+import { EditPackageModal } from "@/components/package/EditPackageModal";
 
 export const Route = createFileRoute("/package/$id/")({
   component: PackageDetailComponent,
@@ -21,9 +23,18 @@ export const Route = createFileRoute("/package/$id/")({
 function PackageDetailComponent() {
   const { id } = Route.useParams();
   const { data: session } = authClient.useSession();
+  const [isEditOpen, setIsEditOpen] = useState(false);
 
   const packageQuery = useQuery(trpc.package.getById.queryOptions({ id }));
 
+  const updateMutation = useMutation({
+    ...trpc.package.update.mutationOptions(),
+    onSuccess: () => {
+      packageQuery.refetch();
+      setIsEditOpen(false);
+    },
+  });
+
   const pkg = packageQuery.data;
 
   if (packageQuery.isLoading) {
@@ -89,10 +100,14 @@ function PackageDetailComponent() {
         </div>
 
         <div className="flex flex-wrap gap-4 text-sm text-[var(--warm-charcoal)]">
-          <span className="flex items-center gap-1">
+          <Link
+            to="/profile/$userId"
+            params={{ userId: pkg.creatorUserId }}
+            className="flex items-center gap-1 hover:text-[var(--clay-black)] transition-colors"
+          >
             <MaterialIcon name="person" className="text-sm" />
             {pkg.creatorName ?? "Anonim"}
-          </span>
+          </Link>
           <span className="flex items-center gap-1">
             <MaterialIcon name="quiz" className="text-sm" />
             {totalQuestions} soal
@@ -173,9 +188,24 @@ function PackageDetailComponent() {
             <span className="ml-2">Mulai Latihan</span>
           </Button>
         </Link>
+        {pkg.isPublic && (
+          <Button
+            variant="outline"
+            onClick={() => {
+              const url = `${window.location.origin}/package/${id}`;
+              navigator.clipboard.writeText(url);
+              alert("Link paket disalin ke clipboard!");
+            }}
+            className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
+          >
+            <MaterialIcon name="share" />
+            <span className="ml-2">Bagikan</span>
+          </Button>
+        )}
         {isOwner && (
           <Button
             variant="outline"
+            onClick={() => setIsEditOpen(true)}
             className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
           >
             <MaterialIcon name="edit" />
@@ -183,6 +213,22 @@ function PackageDetailComponent() {
           </Button>
         )}
       </div>
+
+      {isEditOpen && pkg && (
+        <EditPackageModal
+          initialTitle={pkg.title}
+          initialDescription={pkg.description}
+          initialIsPublic={pkg.isPublic}
+          onClose={() => setIsEditOpen(false)}
+          onSave={(data) =>
+            updateMutation.mutate({
+              id,
+              ...data,
+            })
+          }
+          isPending={updateMutation.isPending}
+        />
+      )}
     </div>
   );
 }

apps/web/src/routes/packages.tsx

@@ -1,6 +1,6 @@
-import { useState } from "react";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useMutation } from "@tanstack/react-query";
 import { createFileRoute, redirect, Link, useNavigate } from "@tanstack/react-router";
+import { z } from "zod";
 import { authClient } from "@/lib/auth-client";
 import { trpc } from "@/utils/trpc";
 import { Input } from "@labas/ui/components/input";
@@ -18,6 +18,12 @@ import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 export const Route = createFileRoute("/packages")({
   component: PackagesComponent,
+  validateSearch: z.object({
+    tab: z.enum(["all", "mine"]).optional(),
+    search: z.string().optional(),
+    examType: z.string().optional(),
+    page: z.coerce.number().optional(),
+  }).parse,
   beforeLoad: async () => {
     const session = await authClient.getSession();
     if (!session.data) {
@@ -35,27 +41,78 @@ const EXAM_TYPES = [
   { id: "GOETHE", name: "German" },
 ];
 
+type Tab = "all" | "mine";
+
 function PackagesComponent() {
-  const navigate = useNavigate();
-  const [search, setSearch] = useState("");
-  const [examType, setExamType] = useState<string>("");
-  const [page, setPage] = useState(0);
+  const routerNavigate = useNavigate();
+  const search = Route.useSearch();
+  const navigate = Route.useNavigate();
+  const { data: session } = authClient.useSession();
+  const userId = session?.user.id;
+
+  const tab = search.tab ?? "all";
+  const searchText = search.search ?? "";
+  const examType = search.examType ?? "";
+  const page = search.page ?? 1;
   const limit = 12;
 
-  const query = useQuery(
-    trpc.package.list.queryOptions({
-      examTypeId: examType || undefined,
-      isPublic: true,
-      search: search || undefined,
-      limit,
-      offset: page * limit,
-    }),
+  const allQuery = useQuery(
+    trpc.package.list.queryOptions(
+      {
+        isPublic: true,
+        examTypeId: examType || undefined,
+        search: searchText || undefined,
+        limit,
+        offset: (page - 1) * limit,
+      },
+      { enabled: tab === "all" },
+    ),
+  );
+
+  const mineQuery = useQuery(
+    trpc.package.myPackages.queryOptions(
+      {
+        search: searchText || undefined,
+        examTypeId: examType || undefined,
+        limit,
+        offset: (page - 1) * limit,
+      },
+      { enabled: tab === "mine" },
+    ),
   );
 
+  const query = tab === "all" ? allQuery : mineQuery;
   const packages = query.data?.packages ?? [];
   const total = query.data?.total ?? 0;
   const totalPages = Math.ceil(total / limit);
 
+  const updateMutation = useMutation({
+    ...trpc.package.update.mutationOptions(),
+    onSuccess: () => {
+      query.refetch();
+    },
+  });
+
+  const togglePublic = (pkgId: string, current: boolean) => {
+    updateMutation.mutate({ id: pkgId, isPublic: !current });
+  };
+
+  const setTab = (newTab: Tab) => {
+    navigate({ search: { tab: newTab, search: "", examType: "", page: 1 } });
+  };
+
+  const setSearch = (value: string) => {
+    navigate({ search: (prev) => ({ ...prev, search: value, page: 1 }) });
+  };
+
+  const setExamType = (value: string) => {
+    navigate({ search: (prev) => ({ ...prev, examType: value, page: 1 }) });
+  };
+
+  const setPage = (newPage: number) => {
+    navigate({ search: (prev) => ({ ...prev, page: newPage }) });
+  };
+
   return (
     <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-7xl mx-auto bg-[var(--warm-cream)]">
       <section className="mb-8">
@@ -77,24 +134,44 @@ function PackagesComponent() {
         </div>
       </section>
 
+      {/* 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>
+
       {/* Filters */}
       <div className="flex flex-col md:flex-row gap-3 mb-8">
         <div className="relative flex-1 max-w-md">
           <MaterialIcon name="search" className="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--warm-charcoal)]" />
           <Input
             placeholder="Cari paket..."
-            value={search}
-            onChange={(e) => { setSearch(e.target.value); setPage(0); }}
+            value={searchText}
+            onChange={(e) => setSearch(e.target.value)}
             className="pl-10 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] h-11"
           />
         </div>
         <Select
-          items={[
-            { value: "", label: "Semua Ujian" },
-            ...EXAM_TYPES.map((t) => ({ value: t.id, label: t.name })),
-          ]}
           value={examType}
-          onValueChange={(v: string | null) => { setExamType(v ?? ""); setPage(0); }}
+          onValueChange={(v: string | null) => setExamType(v ?? "")}
         >
           <SelectTrigger className="w-36">
             <SelectValue placeholder="Semua Ujian" />
@@ -121,91 +198,141 @@ function PackagesComponent() {
         <div className="text-center py-20">
           <MaterialIcon name="folder_open" className="text-6xl text-[var(--warm-silver)] mx-auto mb-4" />
           <p className="text-lg text-[var(--warm-charcoal)] font-semibold">Tidak ada paket ditemukan</p>
-          <p className="text-sm text-[var(--warm-silver)] mt-1">Buat paket soal pertama Anda</p>
+          <p className="text-sm text-[var(--warm-silver)] mt-1">
+            {tab === "mine"
+              ? "Belum ada paket yang Anda buat. Buat paket dari Bank Soal."
+              : "Buat paket soal pertama Anda"}
+          </p>
         </div>
       ) : (
         <>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {packages.map((pkg) => (
-              <Card key={pkg.id} className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] h-full flex flex-col">
-                <CardContent className="p-5 flex flex-col h-full">
-                  <Link to="/package/$id" params={{ id: pkg.id }} className="block flex-1">
-                    <div className="flex items-start justify-between mb-3">
-                      <span className="px-2.5 py-1 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-xs font-semibold">
-                        {pkg.examTypeName}
-                      </span>
-                      {pkg.avgRating && (
-                        <div className="flex items-center gap-1 text-[var(--lemon-700)]">
-                          <MaterialIcon name="star" className="text-sm" />
-                          <span className="text-xs font-bold">{pkg.avgRating}</span>
+            {packages.map((pkg) => {
+              const isOwner = pkg.creatorUserId === userId;
+              return (
+                <Card key={pkg.id} className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] h-full flex flex-col">
+                  <CardContent className="p-5 flex flex-col h-full">
+                    <Link to="/package/$id" params={{ id: pkg.id }} className="block flex-1">
+                      <div className="flex items-start justify-between mb-3">
+                        <div className="flex gap-2 flex-wrap">
+                          <span className="px-2.5 py-1 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-xs font-semibold">
+                            {pkg.examTypeName}
+                          </span>
+                          {isOwner && (
+                            <span
+                              className={`px-2 py-1 rounded-full text-[10px] font-semibold ${
+                                pkg.isPublic
+                                  ? "bg-[var(--slushie-500)]/20 text-[var(--slushie-800)]"
+                                  : "bg-[var(--oat-light)] text-[var(--warm-charcoal)]"
+                              }`}
+                            >
+                              {pkg.isPublic ? "Publik" : "Privat"}
+                            </span>
+                          )}
                         </div>
-                      )}
-                    </div>
+                        {pkg.avgRating && (
+                          <div className="flex items-center gap-1 text-[var(--lemon-700)]">
+                            <MaterialIcon name="star" className="text-sm" />
+                            <span className="text-xs font-bold">{pkg.avgRating}</span>
+                          </div>
+                        )}
+                      </div>
 
-                    <h3 className="font-headline text-lg font-bold text-[var(--clay-black)] mb-2 line-clamp-2">
-                      {pkg.title}
-                    </h3>
+                      <h3 className="font-headline text-lg font-bold text-[var(--clay-black)] mb-2 line-clamp-2">
+                        {pkg.title}
+                      </h3>
 
-                    {pkg.description && (
-                      <p className="text-sm text-[var(--warm-charcoal)] line-clamp-2 mb-4">
-                        {pkg.description}
-                      </p>
-                    )}
+                      {pkg.description && (
+                        <p className="text-sm text-[var(--warm-charcoal)] line-clamp-2 mb-4">
+                          {pkg.description}
+                        </p>
+                      )}
 
-                    <div className="flex items-center justify-between mt-auto pt-3 border-t border-[var(--oat-border)]">
-                      <div className="flex gap-3 text-xs text-[var(--warm-charcoal)]">
-                        <span className="flex items-center gap-1">
-                          <MaterialIcon name="quiz" className="text-xs" />
-                          {pkg.totalQuestions}
-                        </span>
-                        <span className="flex items-center gap-1">
-                          <MaterialIcon name="folder" className="text-xs" />
-                          {pkg.totalSections}
-                        </span>
-                        {pkg.estimatedDurationMin && (
+                      <div className="flex items-center justify-between mt-auto pt-3 border-t border-[var(--oat-border)]">
+                        <div className="flex gap-3 text-xs text-[var(--warm-charcoal)]">
                           <span className="flex items-center gap-1">
-                            <MaterialIcon name="timer" className="text-xs" />
-                            {pkg.estimatedDurationMin}m
+                            <MaterialIcon name="quiz" className="text-xs" />
+                            {pkg.totalQuestions}
                           </span>
+                          <span className="flex items-center gap-1">
+                            <MaterialIcon name="folder" className="text-xs" />
+                            {pkg.totalSections}
+                          </span>
+                          {pkg.estimatedDurationMin && (
+                            <span className="flex items-center gap-1">
+                              <MaterialIcon name="timer" className="text-xs" />
+                              {pkg.estimatedDurationMin}m
+                            </span>
+                          )}
+                        </div>
+                        <span className="text-xs text-[var(--warm-silver)]">
+                          {pkg.usageCount}x digunakan
+                        </span>
+                      </div>
+                    </Link>
+
+                    {/* Owner actions */}
+                    {isOwner && (
+                      <div className="mt-3 pt-3 border-t border-[var(--oat-border)] flex items-center justify-between">
+                        <button
+                          onClick={() => togglePublic(pkg.id, pkg.isPublic)}
+                          disabled={updateMutation.isPending}
+                          className={`text-xs font-semibold px-3 py-1.5 rounded-full transition-colors ${
+                            pkg.isPublic
+                              ? "bg-[var(--matcha-300)] text-[var(--matcha-800)]"
+                              : "bg-[var(--oat-light)] text-[var(--warm-charcoal)]"
+                          }`}
+                        >
+                          {pkg.isPublic ? "Publik" : "Privat"}
+                        </button>
+                        {pkg.isPublic && (
+                          <button
+                            onClick={() => {
+                              const url = `${window.location.origin}/package/${pkg.id}`;
+                              navigator.clipboard.writeText(url);
+                              alert("Link paket disalin!");
+                            }}
+                            className="text-xs text-[var(--matcha-600)] hover:bg-[var(--matcha-300)]/20 px-3 py-1.5 rounded-full transition-colors flex items-center gap-1"
+                          >
+                            <MaterialIcon name="share" className="text-xs" />
+                            Bagikan
+                          </button>
                         )}
                       </div>
-                      <span className="text-xs text-[var(--warm-silver)]">
-                        {pkg.usageCount}x digunakan
-                      </span>
+                    )}
+
+                    <div className="mt-3 pt-3 border-t border-[var(--oat-border)]">
+                      <Button
+                        className="w-full bg-[var(--matcha-600)] text-[var(--pure-white)] hover:bg-[var(--matcha-800)] clay-hover rounded-[var(--radius-lg)]"
+                        onClick={() => routerNavigate({ to: '/package/$id/take', params: { id: pkg.id } })}
+                      >
+                        <MaterialIcon name="play_arrow" className="mr-2" />
+                        Mulai Latihan
+                      </Button>
                     </div>
-                  </Link>
-
-                  <div className="mt-4 pt-3 border-t border-[var(--oat-border)]">
-                    <Button
-                      className="w-full bg-[var(--matcha-600)] text-[var(--pure-white)] hover:bg-[var(--matcha-800)] clay-hover rounded-[var(--radius-lg)]"
-                      onClick={() => navigate({ to: '/package/$id/take', params: { id: pkg.id } })}
-                    >
-                      <MaterialIcon name="play_arrow" className="mr-2" />
-                      Mulai Latihan
-                    </Button>
-                  </div>
-                </CardContent>
-              </Card>
-            ))}
+                  </CardContent>
+                </Card>
+              );
+            })}
           </div>
 
           {totalPages > 1 && (
             <div className="flex items-center justify-center gap-2 mt-10">
               <Button
                 variant="outline"
-                onClick={() => setPage((p) => Math.max(0, p - 1))}
-                disabled={page === 0}
+                onClick={() => setPage(Math.max(1, page - 1))}
+                disabled={page <= 1}
                 className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
               >
                 <MaterialIcon name="chevron_left" />
               </Button>
               <span className="text-sm text-[var(--warm-charcoal)] px-4">
-                Halaman {page + 1} dari {totalPages}
+                Halaman {page} dari {totalPages}
               </span>
               <Button
                 variant="outline"
-                onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
-                disabled={page >= totalPages - 1}
+                onClick={() => setPage(Math.min(totalPages, page + 1))}
+                disabled={page >= totalPages}
                 className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
               >
                 <MaterialIcon name="chevron_right" />

apps/web/src/routes/profile.$userId.tsx

@@ -0,0 +1,146 @@
+import { useQuery } from "@tanstack/react-query";
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { trpc } from "@/utils/trpc";
+import { Card, CardContent } from "@labas/ui/components/card";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+export const Route = createFileRoute("/profile/$userId")({
+  component: ProfileComponent,
+});
+
+function ProfileComponent() {
+  const { userId } = Route.useParams();
+  const query = useQuery(trpc.profile.getById.queryOptions({ userId }));
+
+  if (query.isLoading) {
+    return (
+      <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-5xl mx-auto bg-[var(--warm-cream)]">
+        <div className="h-32 bg-[var(--oat-light)] animate-pulse rounded-[var(--radius-xl)] mb-8" />
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <div key={i} className="h-24 bg-[var(--oat-light)] animate-pulse rounded-[var(--radius-xl)]" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (!query.data) {
+    return (
+      <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-5xl mx-auto bg-[var(--warm-cream)]">
+        <div className="text-center py-20">
+          <MaterialIcon name="person_off" className="text-6xl text-[var(--warm-silver)] mx-auto mb-4" />
+          <p className="text-lg text-[var(--warm-charcoal)] font-semibold">Pengguna tidak ditemukan</p>
+        </div>
+      </div>
+    );
+  }
+
+  const { user, stats, recentPackages } = query.data;
+
+  return (
+    <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-5xl mx-auto bg-[var(--warm-cream)]">
+      {/* Profile Header */}
+      <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] mb-8">
+        <CardContent className="p-6 md:p-8">
+          <div className="flex items-center gap-4 md:gap-6">
+            <div className="w-16 h-16 md:w-20 md:h-20 rounded-full bg-[var(--matcha-300)] flex items-center justify-center text-2xl md:text-3xl font-bold text-[var(--matcha-800)] shrink-0">
+              {user.image ? (
+                <img src={user.image} alt={user.name} className="w-full h-full rounded-full object-cover" />
+              ) : (
+                (user.name?.[0] ?? "?").toUpperCase()
+              )}
+            </div>
+            <div>
+              <h1 className="text-2xl md:text-3xl font-headline font-extrabold text-[var(--clay-black)]">
+                {user.name ?? "Pengguna"}
+              </h1>
+              <p className="text-sm text-[var(--warm-charcoal)] mt-1">
+                Bergabung {new Date(user.createdAt).toLocaleDateString("id-ID", { month: "long", year: "numeric" })}
+              </p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Stats */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+        <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+          <CardContent className="p-4 text-center">
+            <div className="text-2xl font-headline font-extrabold text-[var(--clay-black)]">
+              {stats.totalPackages}
+            </div>
+            <div className="text-xs text-[var(--warm-charcoal)] mt-1">Paket Dibuat</div>
+          </CardContent>
+        </Card>
+        <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+          <CardContent className="p-4 text-center">
+            <div className="text-2xl font-headline font-extrabold text-[var(--clay-black)]">
+              {stats.totalPackageUsage}
+            </div>
+            <div className="text-xs text-[var(--warm-charcoal)] mt-1">Paket Digunakan</div>
+          </CardContent>
+        </Card>
+        <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+          <CardContent className="p-4 text-center">
+            <div className="text-2xl font-headline font-extrabold text-[var(--clay-black)]">
+              {stats.totalQuestions}
+            </div>
+            <div className="text-xs text-[var(--warm-charcoal)] mt-1">Soal Dibuat</div>
+          </CardContent>
+        </Card>
+        <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+          <CardContent className="p-4 text-center">
+            <div className="text-2xl font-headline font-extrabold text-[var(--clay-black)]">
+              {stats.avgPackageRating > 0 ? stats.avgPackageRating : "-"}
+            </div>
+            <div className="text-xs text-[var(--warm-charcoal)] mt-1">Rating Rata-rata</div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Recent Public Packages */}
+      <section>
+        <h2 className="text-xl font-headline font-bold text-[var(--clay-black)] mb-4">
+          Paket Publik Terbaru
+        </h2>
+
+        {recentPackages.length === 0 ? (
+          <div className="text-center py-12 text-[var(--warm-charcoal)]">
+            <MaterialIcon name="folder_open" className="text-4xl text-[var(--warm-silver)] mx-auto mb-3" />
+            <p>Belum ada paket publik</p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {recentPackages.map((pkg) => (
+              <Link to="/package/$id" params={{ id: pkg.id }} key={pkg.id} className="block">
+                <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] h-full">
+                  <CardContent className="p-5">
+                    <div className="flex items-start justify-between mb-3">
+                      <span className="px-2.5 py-1 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-xs font-semibold">
+                        {pkg.examTypeName}
+                      </span>
+                      {pkg.avgRating && (
+                        <div className="flex items-center gap-1 text-[var(--lemon-700)]">
+                          <MaterialIcon name="star" className="text-sm" />
+                          <span className="text-xs font-bold">{pkg.avgRating}</span>
+                        </div>
+                      )}
+                    </div>
+                    <h3 className="font-headline text-base font-bold text-[var(--clay-black)] line-clamp-2 mb-2">
+                      {pkg.title}
+                    </h3>
+                    <div className="flex items-center justify-between text-xs text-[var(--warm-charcoal)]">
+                      <span>{pkg.totalQuestions} soal</span>
+                      <span>{pkg.usageCount}x digunakan</span>
+                    </div>
+                  </CardContent>
+                </Card>
+              </Link>
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}

apps/web/src/routes/settings.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
-import { createFileRoute, redirect } from "@tanstack/react-router";
+import { createFileRoute, redirect, Link } from "@tanstack/react-router";
 import { authClient } from "@/lib/auth-client";
-import { useApiKey } from "@/hooks/use-api-key";
+import { useApiKeys, type ApiKeyConfig } from "@/hooks/use-api-key";
 import { Button } from "@labas/ui/components/button";
 import { Input } from "@labas/ui/components/input";
 import { Label } from "@labas/ui/components/label";
@@ -27,188 +27,367 @@ export const Route = createFileRoute("/settings")({
   },
 });
 
+const PROVIDERS = [
+  { value: "openai", label: "OpenAI" },
+  { value: "anthropic", label: "Anthropic" },
+  { value: "google", label: "Google" },
+  { value: "openrouter", label: "OpenRouter" },
+  { value: "groq", label: "Groq" },
+  { value: "custom", label: "Custom" },
+];
+
+function defaultConfig(): Omit<ApiKeyConfig, "id" | "apiKey"> {
+  return {
+    name: "",
+    provider: "openai",
+    baseUrl: "https://api.openai.com/v1",
+    modelName: "gpt-4o-mini",
+    maxTokens: 16384,
+  };
+}
+
 function RouteComponent() {
-  const { storedKey, isLoading, saveKey, removeKey, hasKey } = useApiKey();
+  const { configs, isLoading, addConfig, updateConfig, removeConfig } =
+    useApiKeys();
 
-  const [provider, setProvider] = useState(storedKey?.provider ?? "openai");
-  const [baseUrl, setBaseUrl] = useState(storedKey?.baseUrl ?? "https://api.openai.com/v1");
-  const [apiKey, setApiKey] = useState("");
-  const [modelName, setModelName] = useState(storedKey?.modelName ?? "gpt-4o-mini");
-  const [maxTokens, setMaxTokens] = useState<number>(storedKey?.maxTokens ?? 16384);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [isAdding, setIsAdding] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
 
+  // Form state
+  const [form, setForm] = useState<Omit<ApiKeyConfig, "id"> & { apiKey: string }>({
+    ...defaultConfig(),
+    apiKey: "",
+  });
+
+  const resetForm = () => {
+    setForm({ ...defaultConfig(), apiKey: "" });
+  };
+
+  const startAdd = () => {
+    resetForm();
+    setIsAdding(true);
+    setEditingId(null);
+  };
+
+  const startEdit = (config: ApiKeyConfig) => {
+    setForm({
+      name: config.name,
+      provider: config.provider,
+      baseUrl: config.baseUrl,
+      modelName: config.modelName,
+      maxTokens: config.maxTokens ?? 16384,
+      apiKey: "", // kosong = tidak ubah
+    });
+    setEditingId(config.id);
+    setIsAdding(false);
+  };
+
+  const cancelEdit = () => {
+    setEditingId(null);
+    setIsAdding(false);
+    resetForm();
+  };
+
   const handleSave = async () => {
-    if (!apiKey) return;
+    if (!form.name.trim()) return;
     setIsSaving(true);
     try {
-      await saveKey({ provider, baseUrl, apiKey, modelName, maxTokens });
-      setApiKey("");
+      if (isAdding) {
+        if (!form.apiKey) return;
+        await addConfig(form);
+        setIsAdding(false);
+      } else if (editingId) {
+        await updateConfig(editingId, form);
+        setEditingId(null);
+      }
+      resetForm();
     } finally {
       setIsSaving(false);
     }
   };
 
+  const isFormOpen = isAdding || editingId !== null;
+  const canSave =
+    form.name.trim() &&
+    form.baseUrl.trim() &&
+    form.modelName.trim() &&
+    (isAdding ? !!form.apiKey : true);
+
   return (
     <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-5xl mx-auto bg-[var(--warm-cream)]">
       <section className="mb-10">
-        <h1 className="text-4xl font-headline font-extrabold text-[var(--clay-black)] tracking-tight">Pengaturan</h1>
-        <p className="text-lg text-[var(--warm-charcoal)] mt-2">Kelola API key dan preferensi akun.</p>
+        <div className="flex items-center gap-2 text-sm text-[var(--warm-charcoal)] mb-4">
+          <Link to="/" className="hover:text-[var(--clay-black)] transition-colors">Beranda</Link>
+          <MaterialIcon name="chevron_right" className="text-xs" />
+          <span className="text-[var(--clay-black)] font-medium">Pengaturan</span>
+        </div>
+        <h1 className="text-4xl font-headline font-extrabold text-[var(--clay-black)] tracking-tight">
+          Pengaturan
+        </h1>
+        <p className="text-lg text-[var(--warm-charcoal)] mt-2">
+          Kelola API key dan preferensi akun.
+        </p>
       </section>
 
       <div className="grid grid-cols-1 lg:grid-cols-12 gap-10">
         <div className="lg:col-span-7 space-y-8">
+          {/* API Key List */}
           <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
             <CardHeader>
-              <div className="flex items-center gap-3">
-                <MaterialIcon name="key" className="text-xl" />
-                <CardTitle className="font-headline text-[var(--clay-black)]">
-                  {hasKey ? "Update API Key" : "Tambah API Key"}
-                </CardTitle>
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <MaterialIcon name="key" className="text-xl" />
+                  <div>
+                    <CardTitle className="font-headline text-[var(--clay-black)]">API Keys</CardTitle>
+                    <CardDescription className="text-[var(--warm-charcoal)]">
+                      {configs.length} konfigurasi tersimpan
+                    </CardDescription>
+                  </div>
+                </div>
+                {!isFormOpen && (
+                  <Button
+                    onClick={startAdd}
+                    className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] rounded-[var(--radius-lg)] clay-shadow clay-hover text-sm"
+                  >
+                    <MaterialIcon name="add" className="mr-1" />
+                    Tambah
+                  </Button>
+                )}
               </div>
-              <CardDescription className="text-[var(--warm-charcoal)]">
-                API key disimpan terenkripsi di browser (localStorage + IndexedDB). Server tidak pernah menyimpan key.
-              </CardDescription>
             </CardHeader>
-            <CardContent className="space-y-5">
-              <div className="grid grid-cols-2 gap-4">
-                <div className="space-y-2">
-                  <Label htmlFor="provider" className="text-[var(--clay-black)]">Provider</Label>
-                  <Select
-                    items={[
-                      { value: "openai", label: "OpenAI" },
-                      { value: "anthropic", label: "Anthropic" },
-                      { value: "google", label: "Google" },
-                      { value: "openrouter", label: "OpenRouter" },
-                      { value: "groq", label: "Groq" },
-                      { value: "custom", label: "Custom" },
-                    ]}
-                    value={provider}
-                    onValueChange={(v: string | null) => setProvider(v ?? "openai")}
+            <CardContent className="space-y-4">
+              {isLoading ? (
+                <div className="h-20 bg-[var(--oat-light)] animate-pulse rounded-[var(--radius-lg)]" />
+              ) : configs.length === 0 ? (
+                <div className="text-center py-8">
+                  <MaterialIcon name="key_off" className="text-4xl text-[var(--warm-silver)] mx-auto mb-3" />
+                  <p className="text-[var(--warm-charcoal)] font-semibold">Belum ada API key</p>
+                  <p className="text-xs text-[var(--warm-silver)] mt-1">
+                    Tambahkan minimal satu key untuk generate soal.
+                  </p>
+                  <Button
+                    onClick={startAdd}
+                    className="mt-4 bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] rounded-[var(--radius-lg)]"
                   >
-                    <SelectTrigger id="provider">
-                      <SelectValue placeholder="Pilih provider" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectGroup>
-                        <SelectItem value="openai">OpenAI</SelectItem>
-                        <SelectItem value="anthropic">Anthropic</SelectItem>
-                        <SelectItem value="google">Google</SelectItem>
-                        <SelectItem value="openrouter">OpenRouter</SelectItem>
-                        <SelectItem value="groq">Groq</SelectItem>
-                        <SelectItem value="custom">Custom</SelectItem>
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
+                    <MaterialIcon name="add" className="mr-1" />
+                    Tambah API Key
+                  </Button>
                 </div>
-                <div className="space-y-2">
-                  <Label htmlFor="model" className="text-[var(--clay-black)]">Model</Label>
-                  <Input
-                    id="model"
-                    value={modelName}
-                    onChange={(e) => setModelName(e.target.value)}
-                    placeholder="gpt-4o-mini"
-                    className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)]"
-                  />
+              ) : (
+                <div className="space-y-3">
+                  {configs.map((config) => (
+                    <div
+                      key={config.id}
+                      className={`p-4 rounded-[var(--radius-lg)] border-2 transition-colors ${
+                        editingId === config.id
+                          ? "border-[var(--matcha-600)] bg-[var(--matcha-100)]"
+                          : "border-[var(--oat-border)] bg-[var(--warm-cream)]"
+                      }`}
+                    >
+                      <div className="flex items-center justify-between">
+                        <div className="min-w-0">
+                          <div className="flex items-center gap-2 mb-1">
+                            <span className="font-semibold text-[var(--clay-black)] truncate">
+                              {config.name}
+                            </span>
+                            <span className="px-2 py-0.5 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-[10px] font-semibold">
+                              {PROVIDERS.find((p) => p.value === config.provider)?.label ?? config.provider}
+                            </span>
+                          </div>
+                          <div className="text-xs text-[var(--warm-charcoal)]">
+                            {config.modelName} · {config.baseUrl.replace("https://", "").replace("/v1", "")}
+                          </div>
+                        </div>
+                        <div className="flex gap-2 shrink-0">
+                          <button
+                            onClick={() => startEdit(config)}
+                            className="p-2 rounded-[var(--radius-md)] hover:bg-[var(--oat-light)] text-[var(--warm-charcoal)] transition-colors"
+                            title="Edit"
+                          >
+                            <MaterialIcon name="edit" className="text-sm" />
+                          </button>
+                          <button
+                            onClick={() => {
+                              if (confirm("Yakin mau hapus konfigurasi ini?")) {
+                                removeConfig(config.id);
+                              }
+                            }}
+                            className="p-2 rounded-[var(--radius-md)] hover:bg-[var(--pomegranate-400)]/10 text-[var(--pomegranate-400)] transition-colors"
+                            title="Hapus"
+                          >
+                            <MaterialIcon name="delete" className="text-sm" />
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
                 </div>
-              </div>
+              )}
+            </CardContent>
+          </Card>
 
-              <div className="grid grid-cols-2 gap-4">
+          {/* Add/Edit Form */}
+          {isFormOpen && (
+            <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--matcha-400)] rounded-[var(--radius-xl)]">
+              <CardHeader>
+                <CardTitle className="font-headline text-[var(--clay-black)]">
+                  {isAdding ? "Tambah API Key Baru" : "Edit API Key"}
+                </CardTitle>
+                <CardDescription className="text-[var(--warm-charcoal)]">
+                  {isAdding
+                    ? "Tambahkan konfigurasi provider baru."
+                    : "Kosongkan field API Key jika tidak ingin mengubahnya."}
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-5">
                 <div className="space-y-2">
-                  <Label htmlFor="baseUrl" className="text-[var(--clay-black)]">Base URL</Label>
+                  <Label htmlFor="name" className="text-[var(--clay-black)]">Nama Config</Label>
                   <Input
-                    id="baseUrl"
-                    value={baseUrl}
-                    onChange={(e) => setBaseUrl(e.target.value)}
-                    placeholder="https://api.openai.com/v1"
+                    id="name"
+                    value={form.name}
+                    onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
+                    placeholder="Contoh: OpenAI GPT-4o"
                     className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)]"
                   />
                 </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="provider" className="text-[var(--clay-black)]">Provider</Label>
+                    <Select
+                      items={PROVIDERS}
+                      value={form.provider}
+                      onValueChange={(v: string | null) =>
+                        setForm((f) => ({ ...f, provider: v ?? "openai" }))
+                      }
+                    >
+                      <SelectTrigger id="provider">
+                        <SelectValue placeholder="Pilih provider" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectGroup>
+                          {PROVIDERS.map((p) => (
+                            <SelectItem key={p.value} value={p.value}>{p.label}</SelectItem>
+                          ))}
+                        </SelectGroup>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="model" className="text-[var(--clay-black)]">Model</Label>
+                    <Input
+                      id="model"
+                      value={form.modelName}
+                      onChange={(e) => setForm((f) => ({ ...f, modelName: e.target.value }))}
+                      placeholder="gpt-4o-mini"
+                      className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)]"
+                    />
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="baseUrl" className="text-[var(--clay-black)]">Base URL</Label>
+                    <Input
+                      id="baseUrl"
+                      value={form.baseUrl}
+                      onChange={(e) => setForm((f) => ({ ...f, baseUrl: e.target.value }))}
+                      placeholder="https://api.openai.com/v1"
+                      className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)]"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="maxTokens" className="text-[var(--clay-black)]">Max Tokens</Label>
+                    <Input
+                      id="maxTokens"
+                      type="number"
+                      min={1}
+                      max={1_000_000}
+                      value={form.maxTokens}
+                      onChange={(e) => setForm((f) => ({ ...f, maxTokens: Number(e.target.value) }))}
+                      placeholder="16384"
+                      className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)]"
+                    />
+                  </div>
+                </div>
+
                 <div className="space-y-2">
-                  <Label htmlFor="maxTokens" className="text-[var(--clay-black)]">Max Tokens</Label>
+                  <Label htmlFor="apiKey" className="text-[var(--clay-black)]">
+                    API Key
+                    {!isAdding && (
+                      <span className="text-[var(--warm-silver)] font-normal ml-1">
+                        (kosongkan jika tidak diubah)
+                      </span>
+                    )}
+                  </Label>
                   <Input
-                    id="maxTokens"
-                    type="number"
-                    min={1}
-                    max={65536}
-                    value={maxTokens}
-                    onChange={(e) => setMaxTokens(Number(e.target.value))}
-                    placeholder="16384"
+                    id="apiKey"
+                    type="password"
+                    value={form.apiKey}
+                    onChange={(e) => setForm((f) => ({ ...f, apiKey: e.target.value }))}
+                    placeholder={isAdding ? "sk-..." : "•••••••• (kosongkan untuk tidak mengubah)"}
                     className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)]"
                   />
                 </div>
-              </div>
 
-              <div className="space-y-2">
-                <Label htmlFor="apiKey" className="text-[var(--clay-black)]">
-                  {hasKey ? "API Key Baru (kosongkan jika tidak diubah)" : "API Key"}
-                </Label>
-                <Input
-                  id="apiKey"
-                  type="password"
-                  value={apiKey}
-                  onChange={(e) => setApiKey(e.target.value)}
-                  placeholder={hasKey ? "••••••••" : "sk-..."}
-                  className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)]"
-                />
-              </div>
-
-              <div className="flex gap-3">
-                <Button
-                  onClick={handleSave}
-                  disabled={(!apiKey && !hasKey) || isSaving}
-                  className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] rounded-[var(--radius-lg)] h-11 clay-shadow clay-hover"
-                >
-                  {isSaving ? "Menyimpan..." : hasKey ? "Update Key" : "Simpan API Key"}
-                </Button>
-                {hasKey && (
+                <div className="flex gap-3">
+                  <Button
+                    onClick={handleSave}
+                    disabled={!canSave || isSaving}
+                    className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] rounded-[var(--radius-lg)] h-11 clay-shadow clay-hover"
+                  >
+                    {isSaving ? "Menyimpan..." : isAdding ? "Simpan" : "Update"}
+                  </Button>
                   <Button
                     variant="outline"
-                    onClick={removeKey}
-                    className="rounded-[var(--radius-lg)] h-11 border-2 border-[var(--oat-border)] text-[var(--pomegranate-400)] hover:bg-[var(--pomegranate-400)]/10 clay-hover"
+                    onClick={cancelEdit}
+                    className="rounded-[var(--radius-lg)] h-11 border-2 border-[var(--oat-border)]"
                   >
-                    Hapus Key
+                    Batal
                   </Button>
-                )}
-              </div>
-            </CardContent>
-          </Card>
+                </div>
+              </CardContent>
+            </Card>
+          )}
         </div>
 
         <div className="lg:col-span-5">
           <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] sticky top-8">
             <CardHeader>
-              <CardTitle className="font-headline text-[var(--clay-black)]">Status API Key</CardTitle>
-              <CardDescription className="text-[var(--warm-charcoal)]">Informasi penyimpanan key.</CardDescription>
+              <CardTitle className="font-headline text-[var(--clay-black)]">Keamanan</CardTitle>
+              <CardDescription className="text-[var(--warm-charcoal)]">
+                Cara penyimpanan API key Anda.
+              </CardDescription>
             </CardHeader>
-            <CardContent>
-              {isLoading ? (
-                <p className="text-[var(--warm-charcoal)]">Memuat...</p>
-              ) : hasKey ? (
-                <div className="space-y-4">
-                  <div className="flex items-center gap-3 p-4 bg-[var(--matcha-300)] rounded-[var(--radius-lg)]">
-                    <MaterialIcon name="check_circle" className="text-xl" />
-                    <div>
-                      <p className="font-medium text-[var(--matcha-800)]">Key Tersimpan</p>
-                      <p className="text-sm text-[var(--matcha-800)]/70">
-                        {storedKey?.provider} · {storedKey?.modelName}
-                      </p>
-                    </div>
-                  </div>
-                  <div className="text-xs text-[var(--warm-charcoal)] space-y-1">
-                    <p>• Disimpan terenkripsi di localStorage</p>
-                    <p>• Key enkripsi disimpan di IndexedDB</p>
-                    <p>• Server tidak pernah menyimpan key</p>
-                  </div>
-                </div>
-              ) : (
-                <div className="text-center py-8">
-                  <MaterialIcon name="key_off" className="text-xl" />
-                  <p className="text-[var(--warm-charcoal)] mt-2">Belum ada API key.</p>
-                  <p className="text-xs text-[var(--warm-charcoal)] mt-1">
-                    Tambahkan key untuk mulai generate soal.
+            <CardContent className="space-y-4">
+              <div className="flex items-center gap-3 p-4 bg-[var(--matcha-300)] rounded-[var(--radius-lg)]">
+                <MaterialIcon name="lock" className="text-xl text-[var(--matcha-800)]" />
+                <div>
+                  <p className="font-medium text-[var(--matcha-800)]">Enkripsi Lokal</p>
+                  <p className="text-sm text-[var(--matcha-800)]/70">
+                    AES-GCM-256 dengan key di IndexedDB
                   </p>
                 </div>
-              )}
+              </div>
+              <div className="text-xs text-[var(--warm-charcoal)] space-y-2">
+                <p className="flex items-start gap-2">
+                  <MaterialIcon name="check_circle" className="text-xs text-[var(--matcha-600)] shrink-0 mt-0.5" />
+                  API key tidak pernah dikirim ke server kami
+                </p>
+                <p className="flex items-start gap-2">
+                  <MaterialIcon name="check_circle" className="text-xs text-[var(--matcha-600)] shrink-0 mt-0.5" />
+                  Data terenkripsi di localStorage browser Anda
+                </p>
+                <p className="flex items-start gap-2">
+                  <MaterialIcon name="check_circle" className="text-xs text-[var(--matcha-600)] shrink-0 mt-0.5" />
+                  Key enkripsi tersimpan aman di IndexedDB
+                </p>
+                <p className="flex items-start gap-2">
+                  <MaterialIcon name="check_circle" className="text-xs text-[var(--matcha-600)] shrink-0 mt-0.5" />
+                  BYOK — Bring Your Own Key, platform tidak menyimpan key
+                </p>
+              </div>
             </CardContent>
           </Card>
         </div>

packages/ai/src/schemas.ts

@@ -29,7 +29,7 @@ export const aiKeyConfigSchema = z.object({
   baseUrl: z.string().url(),
   apiKey: z.string().min(1),
   model: z.string().min(1),
-  maxTokens: z.number().int().min(1).max(65536).default(16384),
+  maxTokens: z.number().int().min(1).max(1_000_000).default(16384),
 });
 
 // ── Question Option Schemas ────────────────────────────────

packages/api/src/queue.ts

@@ -155,7 +155,8 @@ export const generationWorker = new Worker(
     };
 
     try {
-      if (input.mode === "agentic") {
+      const selectedMode = input.mode;
+      if (selectedMode === "agentic") {
         await updateProgress(10, "Generating passage...");
       }
 
@@ -166,32 +167,59 @@ export const generationWorker = new Worker(
         approxTokens += Math.ceil(token.length / 4);
       };
 
-      const result =
-        input.mode === "agentic"
-          ? await generateQuestionsAgentic(input, async (p) => {
-              cancelPoll.check();
-              const stepProgress = Math.min(
-                10 + Math.round((p.currentStep / p.steps.length) * 80),
-                90,
-              );
-              const msg = p.steps[p.currentStep]?.message ?? p.steps[p.currentStep]?.step ?? "Processing...";
-              await updateProgress(stepProgress, msg);
-            })
-          : await generateQuestionsQuick(input, {
-              onToken: (token) => {
+      let result;
+      try {
+        result =
+          selectedMode === "agentic"
+            ? await generateQuestionsAgentic(input, async (p) => {
                 cancelPoll.check();
-                countToken(token);
-                // Update progress message with token count every ~500 chars
-                if (approxTokens % 20 === 0) {
-                  job.updateProgress(job.progress ?? 5).catch(() => {});
-                  db
-                    .update(generationJob)
-                    .set({ progressMessage: `Generating... (~${approxTokens} tokens)` })
-                    .where(eq(generationJob.id, jobId))
-                    .catch(() => {});
-                }
-              },
-            });
+                const stepProgress = Math.min(
+                  10 + Math.round((p.currentStep / p.steps.length) * 80),
+                  90,
+                );
+                const msg =
+                  p.steps[p.currentStep]?.message ?? p.steps[p.currentStep]?.step ?? "Processing...";
+                await updateProgress(stepProgress, msg);
+              })
+            : await generateQuestionsQuick(input, {
+                onToken: (token) => {
+                  cancelPoll.check();
+                  countToken(token);
+                  // Update progress message with token count every ~500 chars
+                  if (approxTokens % 20 === 0) {
+                    job.updateProgress(job.progress ?? 5).catch(() => {});
+                    db
+                      .update(generationJob)
+                      .set({ progressMessage: `Generating... (~${approxTokens} tokens)` })
+                      .where(eq(generationJob.id, jobId))
+                      .catch(() => {});
+                  }
+                },
+              });
+      } catch (quickErr: any) {
+        const quickErrorMessage = quickErr?.message ?? String(quickErr);
+        const shouldFallbackToAgentic =
+          selectedMode === "quick" &&
+          (/Failed to parse AI response as JSON/i.test(quickErrorMessage) ||
+            /Unterminated string/i.test(quickErrorMessage) ||
+            /Missing 'questions' array/i.test(quickErrorMessage));
+
+        if (!shouldFallbackToAgentic) {
+          throw quickErr;
+        }
+
+        await updateProgress(25, "Quick mode JSON invalid, retrying with agentic mode...");
+        result = await generateQuestionsAgentic(
+          { ...input, mode: "agentic" },
+          async (p) => {
+            cancelPoll.check();
+            const stepProgress = Math.min(25 + Math.round((p.currentStep / p.steps.length) * 65), 90);
+            const msg =
+              p.steps[p.currentStep]?.message ?? p.steps[p.currentStep]?.step ?? "Processing...";
+            await updateProgress(stepProgress, msg);
+          },
+        );
+      }
 
       cancelPoll.check();
       await updateProgress(95, "Saving to bank...");
@@ -246,51 +274,62 @@ export const generationWorker = new Worker(
 
           savedQuestionIds = inserted.map((r) => r.id);
 
-          // Auto-create a package from generated questions
+          // Auto-create a package from generated questions.
+          // Non-fatal: if this fails, generation should still succeed with savedQuestionIds.
           if (savedQuestionIds.length > 0) {
-            const dateStr = new Date().toLocaleDateString("id-ID", {
-              day: "numeric",
-              month: "short",
-              year: "numeric",
-            });
-            const pkgTitle = `AI Generated — ${input.examType} ${input.section} — ${dateStr}`;
-
-            const [pkg] = await db
-              .insert(testPackage)
-              .values({
-                title: pkgTitle,
-                description: `Paket latihan AI-generated dengan ${savedQuestionIds.length} soal ${input.examType} ${input.section}.`,
-                examTypeId: input.examType,
-                creatorUserId: userId,
-                isPublic: false,
-                totalQuestions: savedQuestionIds.length,
-                totalSections: 1,
-                estimatedDurationMin: Math.ceil(savedQuestionIds.length * 1.5),
-              })
-              .returning();
-
-            if (pkg) {
-              generatedPackageId = pkg.id;
-
-              const [sec] = await db
-                .insert(packageSection)
+            try {
+              const dateStr = new Date().toLocaleDateString("id-ID", {
+                day: "numeric",
+                month: "short",
+                year: "numeric",
+              });
+              const pkgTitle = `AI Generated - ${input.examType} ${input.section} - ${dateStr}`;
+
+              const [pkg] = await db
+                .insert(testPackage)
                 .values({
-                  packageId: pkg.id,
-                  sectionTypeId: input.section,
-                  title: `${input.section} Section`,
-                  orderIndex: 0,
+                  title: pkgTitle,
+                  description: `Paket latihan AI-generated dengan ${savedQuestionIds.length} soal ${input.examType} ${input.section}.`,
+                  examTypeId: input.examType,
+                  creatorUserId: userId,
+                  isPublic: false,
+                  totalQuestions: savedQuestionIds.length,
+                  totalSections: 1,
+                  estimatedDurationMin: Math.ceil(savedQuestionIds.length * 1.5),
                 })
                 .returning();
 
-              if (sec) {
-                await db.insert(sectionQuestion).values(
-                  savedQuestionIds.map((qid, idx) => ({
-                    sectionId: sec.id,
-                    questionId: qid,
-                    orderIndex: idx,
-                  })),
-                );
+              if (pkg) {
+                generatedPackageId = pkg.id;
+
+                const [sec] = await db
+                  .insert(packageSection)
+                  .values({
+                    packageId: pkg.id,
+                    sectionTypeId: input.section,
+                    title: `${input.section} Section`,
+                    orderIndex: 0,
+                  })
+                  .returning();
+
+                if (sec) {
+                  await db.insert(sectionQuestion).values(
+                    savedQuestionIds.map((qid, idx) => ({
+                      sectionId: sec.id,
+                      questionId: qid,
+                      orderIndex: idx,
+                    })),
+                  );
+                }
               }
+            } catch (packageErr: any) {
+              // eslint-disable-next-line no-console
+              console.warn("[GENERATION] Failed to auto-create package, but questions were saved.", {
+                error: packageErr?.message ?? String(packageErr),
+                jobId,
+                examType: input.examType,
+                section: input.section,
+              });
             }
           }
         }

packages/api/src/routers/attempt.ts

@@ -10,6 +10,7 @@ import {
   packageSection,
   sectionQuestion,
   question,
+  examType,
 } from "@labas/db";
 
 function normalizeAnswer(format: string, userAnswer: string, correctAnswer: string): boolean {
@@ -447,8 +448,13 @@ export const attemptRouter = router({
           maxScore: testAttempt.maxScore,
           status: testAttempt.status,
           createdAt: testAttempt.createdAt,
+          packageTitle: testPackage.title,
+          packageExamTypeId: testPackage.examTypeId,
+          examTypeName: examType.name,
         })
         .from(testAttempt)
+        .leftJoin(testPackage, eq(testAttempt.packageId, testPackage.id))
+        .leftJoin(examType, eq(testPackage.examTypeId, examType.id))
         .where(where)
         .orderBy(desc(testAttempt.createdAt))
         .limit(input?.limit ?? 20)

packages/api/src/routers/index.ts

@@ -4,6 +4,7 @@ import { attemptRouter } from "./attempt";
 import { comboRouter } from "./combo";
 import { questionRouter } from "./question";
 import { packageRouter } from "./package";
+import { profileRouter } from "./profile";
 import { ratingRouter } from "./rating";
 import { settingsRouter } from "./settings";
 import { statsRouter } from "./stats";
@@ -23,6 +24,7 @@ export const appRouter = router({
   combo: comboRouter,
   question: questionRouter,
   package: packageRouter,
+  profile: profileRouter,
   rating: ratingRouter,
   settings: settingsRouter,
   stats: statsRouter,

packages/api/src/routers/package.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { eq, and, desc, sql, inArray } from "drizzle-orm";
+import { eq, and, or, desc, sql, inArray } from "drizzle-orm";
 import { router, protectedProcedure, publicProcedure } from "../index";
 import { db } from "@labas/db";
 import {
@@ -34,7 +34,13 @@ export const packageRouter = router({
       if (input?.isPublic !== undefined) {
         conditions.push(eq(testPackage.isPublic, input.isPublic));
       } else if (!userId) {
+        // Guests: only public packages
         conditions.push(eq(testPackage.isPublic, true));
+      } else {
+        // Logged-in users: public packages + their own private packages
+        conditions.push(
+          or(eq(testPackage.isPublic, true), eq(testPackage.creatorUserId, userId)),
+        );
       }
 
       const where = conditions.length > 0 ? and(...conditions) : undefined;
@@ -79,6 +85,7 @@ export const packageRouter = router({
       z
         .object({
           search: z.string().optional(),
+          examTypeId: z.string().optional(),
           limit: z.number().min(1).max(50).default(20),
           offset: z.number().min(0).default(0),
         })
@@ -88,6 +95,15 @@ export const packageRouter = router({
       const userId = ctx.session.user.id;
       const conditions = [eq(testPackage.creatorUserId, userId)];
 
+      if (input?.search) {
+        conditions.push(
+          sql`LOWER(${testPackage.title}) LIKE LOWER(${"%" + input.search + "%"})`,
+        );
+      }
+      if (input?.examTypeId) {
+        conditions.push(eq(testPackage.examTypeId, input.examTypeId));
+      }
+
       const where = and(...conditions);
 
       const rows = await db
@@ -96,6 +112,7 @@ export const packageRouter = router({
           title: testPackage.title,
           description: testPackage.description,
           examTypeId: testPackage.examTypeId,
+          creatorUserId: testPackage.creatorUserId,
           isPublic: testPackage.isPublic,
           totalQuestions: testPackage.totalQuestions,
           totalSections: testPackage.totalSections,
@@ -448,4 +465,58 @@ export const packageRouter = router({
 
       return { success: true };
     }),
+
+  featured: publicProcedure
+    .query(async () => {
+      const rows = await db
+        .select({
+          id: testPackage.id,
+          title: testPackage.title,
+          description: testPackage.description,
+          examTypeId: testPackage.examTypeId,
+          isPublic: testPackage.isPublic,
+          totalQuestions: testPackage.totalQuestions,
+          totalSections: testPackage.totalSections,
+          estimatedDurationMin: testPackage.estimatedDurationMin,
+          usageCount: testPackage.usageCount,
+          avgRating: testPackage.avgRating,
+          createdAt: testPackage.createdAt,
+          examTypeName: examType.name,
+        })
+        .from(testPackage)
+        .leftJoin(examType, eq(testPackage.examTypeId, examType.id))
+        .where(
+          and(eq(testPackage.isFeatured, true), eq(testPackage.isPublic, true)),
+        )
+        .orderBy(desc(testPackage.createdAt))
+        .limit(6);
+
+      return rows;
+    }),
+
+  trending: publicProcedure
+    .query(async () => {
+      const rows = await db
+        .select({
+          id: testPackage.id,
+          title: testPackage.title,
+          description: testPackage.description,
+          examTypeId: testPackage.examTypeId,
+          isPublic: testPackage.isPublic,
+          totalQuestions: testPackage.totalQuestions,
+          totalSections: testPackage.totalSections,
+          estimatedDurationMin: testPackage.estimatedDurationMin,
+          usageCount: testPackage.usageCount,
+          avgRating: testPackage.avgRating,
+          createdAt: testPackage.createdAt,
+          examTypeName: examType.name,
+        })
+        .from(testPackage)
+        .leftJoin(examType, eq(testPackage.examTypeId, examType.id))
+        .where(eq(testPackage.isPublic, true))
+        .orderBy(desc(testPackage.usageCount))
+        .limit(6);
+
+      return rows;
+    }),
 });

packages/api/src/routers/profile.ts

@@ -0,0 +1,108 @@
+import { z } from "zod";
+import { eq, and, desc, sql } from "drizzle-orm";
+import { router, protectedProcedure, publicProcedure } from "../index";
+import { db } from "@labas/db";
+import { testPackage, question, examType, user } from "@labas/db";
+
+export const profileRouter = router({
+  getById: publicProcedure
+    .input(z.object({ userId: z.string() }))
+    .query(async ({ input }) => {
+      const [u] = await db
+        .select({
+          id: user.id,
+          name: user.name,
+          email: user.email,
+          image: user.image,
+          createdAt: user.createdAt,
+        })
+        .from(user)
+        .where(eq(user.id, input.userId))
+        .limit(1);
+
+      if (!u) return null;
+
+      // Creator stats
+      const [pkgStats] = await db
+        .select({
+          totalPackages: sql<number>`count(*)`,
+          totalUsage: sql<number>`coalesce(sum(${testPackage.usageCount}), 0)`,
+          avgRating: sql<number>`round(avg(${testPackage.avgRating})::numeric, 1)`,
+        })
+        .from(testPackage)
+        .where(eq(testPackage.creatorUserId, input.userId));
+
+      const [questionStats] = await db
+        .select({
+          totalQuestions: sql<number>`count(*)`,
+          totalUsage: sql<number>`coalesce(sum(${question.usageCount}), 0)`,
+          avgRating: sql<number>`round(avg(${question.avgRating})::numeric, 1)`,
+        })
+        .from(question)
+        .where(eq(question.creatorUserId, input.userId));
+
+      // Recent public packages
+      const recentPackages = await db
+        .select({
+          id: testPackage.id,
+          title: testPackage.title,
+          examTypeId: testPackage.examTypeId,
+          totalQuestions: testPackage.totalQuestions,
+          usageCount: testPackage.usageCount,
+          avgRating: testPackage.avgRating,
+          isPublic: testPackage.isPublic,
+          createdAt: testPackage.createdAt,
+          examTypeName: examType.name,
+        })
+        .from(testPackage)
+        .leftJoin(examType, eq(testPackage.examTypeId, examType.id))
+        .where(
+          and(
+            eq(testPackage.creatorUserId, input.userId),
+            eq(testPackage.isPublic, true),
+          ),
+        )
+        .orderBy(desc(testPackage.createdAt))
+        .limit(6);
+
+      return {
+        user: u,
+        stats: {
+          totalPackages: Number(pkgStats?.totalPackages ?? 0),
+          totalPackageUsage: Number(pkgStats?.totalUsage ?? 0),
+          avgPackageRating: Number(pkgStats?.avgRating ?? 0),
+          totalQuestions: Number(questionStats?.totalQuestions ?? 0),
+          totalQuestionUsage: Number(questionStats?.totalUsage ?? 0),
+          avgQuestionRating: Number(questionStats?.avgRating ?? 0),
+        },
+        recentPackages,
+      };
+    }),
+
+  update: protectedProcedure
+    .input(
+      z.object({
+        name: z.string().min(1).max(100).optional(),
+        image: z.string().url().optional().nullable(),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const userId = ctx.session.user.id;
+      const [updated] = await db
+        .update(user)
+        .set({
+          ...(input.name ? { name: input.name } : {}),
+          ...(input.image !== undefined ? { image: input.image } : {}),
+        })
+        .where(eq(user.id, userId))
+        .returning({
+          id: user.id,
+          name: user.name,
+          email: user.email,
+          image: user.image,
+        });
+
+      if (!updated) throw new Error("Failed to update profile");
+      return updated;
+    }),
+});

packages/db/src/schema/app.ts

@@ -98,6 +98,7 @@ export const testPackage = pgTable(
     estimatedDurationMin: integer("estimated_duration_min"),
     usageCount: integer("usage_count").default(0).notNull(),
     avgRating: integer("avg_rating"),
+    isFeatured: boolean("is_featured").default(false).notNull(),
     createdAt: timestamp("created_at").defaultNow().notNull(),
     updatedAt: timestamp("updated_at")
       .defaultNow()