feat: implement lazy loading for routes and introduce new pages for bank, generate, landing, packages, and settings. Update routeTree to support lazy loading of components, enhancing performance and user experience. Add necessary validation and session handling for new routes, ensuring secure access to features.

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

@@ -0,0 +1,578 @@
+import { useState, useEffect } from "react";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { authClient } from "@/lib/auth-client";
+import { trpc, queryClient } from "@/utils/trpc";
+import { EXAM_TYPES, SECTIONS } from "@/lib/exam-constants";
+import { formatLabel } from "@/lib/format";
+import { usePackageBuilder } from "@/hooks/use-package-builder";
+import { useLocalStorageBoolean } from "@/hooks/use-local-storage-boolean";
+import { AutoBundleModal } from "@/components/bank/AutoBundleModal";
+import { QuestionDetailModal } from "@/components/bank/QuestionDetailModal";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { PageTour, TourHelpButton } from "@/components/TourGuide";
+import { FilterBar } from "@/components/bank/FilterBar";
+import { MobileFilterSheet } from "@/components/bank/MobileFilterSheet";
+import { AdvancedFilters } from "@/components/bank/AdvancedFilters";
+import { SoalBrowser } from "@/components/bank/SoalBrowser";
+import { SectionBrowser } from "@/components/bank/SectionBrowser";
+import { BundleSidebar } from "@/components/bank/BundleSidebar";
+import { toast } from "sonner";
+import type { Step } from "react-joyride";
+import { createFileRoute, redirect } from "@tanstack/react-router";
+import z from "zod";
+
+const FILTER_ADVANCED_KEY = "labas-bank-filter-advanced";
+
+export const Route = createFileRoute("/bank")({
+  validateSearch: z.object({
+    mode: z.enum(["soal", "section"]).optional(),
+    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(),
+    visibility: z.enum(["all", "private", "public"]).optional(),
+  }).parse,
+  beforeLoad: async () => {
+    const session = await authClient.getSession();
+    if (!session.data) {
+      redirect({ to: "/login", throw: true });
+    }
+    return { session };
+  },
+});
+
+type QuestionTab = "mine" | "public";
+type Mode = "soal" | "section";
+
+export function BankComponent() {
+  const search = Route.useSearch();
+  const navigate = Route.useNavigate();
+  const { data: session } = authClient.useSession();
+  const userId = session?.user.id;
+
+  const mode: Mode = search.mode ?? "soal";
+  const tab: QuestionTab = search.tab ?? "public";
+  const searchText = search.search ?? "";
+  const examType = search.examType ?? "";
+  const section = search.section ?? "";
+  const format = search.format ?? "";
+  const difficulty = search.difficulty;
+  const visibilityFilter = search.visibility ?? "all";
+
+  // ── Infinite scroll state ──
+  const [allQuestions, setAllQuestions] = useState<any[]>([]);
+  const [offset, setOffset] = useState(0);
+  const limit = 12;
+  const filterKey = JSON.stringify({ searchText, examType, section, format, difficulty, tab, mode, visibility: visibilityFilter });
+
+  // ── Sidebar / Bundle State ──
+  const [bundleQuestions, setBundleQuestions] = useState<any[]>([]);
+  const [bundleSections, setBundleSections] = useState<any[]>([]);
+  const [bundleTitle, setBundleTitle] = useState("");
+  const [bundleDescription, setBundleDescription] = useState("");
+  const [bundleIsPublic, setBundleIsPublic] = useState(false);
+
+  // ── Modals ──
+  const [selectedQuestion, setSelectedQuestion] = useState<any | null>(null);
+  const [isAutoBundleOpen, setIsAutoBundleOpen] = useState(false);
+
+  // ── Filter UI State ──
+  const [isAdvancedOpen, setIsAdvancedOpen] = useLocalStorageBoolean(FILTER_ADVANCED_KEY, false);
+  const [isMobileSheetOpen, setIsMobileSheetOpen] = useState(false);
+
+  // ── Data Queries ──
+  const visibilityFilterParam = tab === "mine" && visibilityFilter !== "all"
+    ? { isPublic: visibilityFilter === "public" }
+    : {};
+
+  const questionQuery = useQuery(
+    trpc.question.list.queryOptions(
+      {
+        search: searchText || undefined,
+        examTypeId: examType || undefined,
+        sectionTypeId: section || undefined,
+        format: format || undefined,
+        difficulty,
+        ...(tab === "mine" && userId
+          ? { creatorUserId: userId, ...visibilityFilterParam }
+          : { isPublic: true }),
+        limit,
+        offset,
+      },
+      { enabled: mode === "soal" },
+    ),
+  );
+
+  // Reset offset when filters change
+  useEffect(() => {
+    setOffset(0);
+  }, [filterKey]);
+
+  // Append / replace questions when query data arrives
+  useEffect(() => {
+    const data = questionQuery.data;
+    if (!data) return;
+    if (offset === 0) {
+      setAllQuestions(data.questions ?? []);
+    } else {
+      setAllQuestions((prev) => {
+        const existingIds = new Set(prev.map((q: any) => q.id));
+        const newQs = (data.questions ?? []).filter((q: any) => !existingIds.has(q.id));
+        return [...prev, ...newQs];
+      });
+    }
+  }, [questionQuery.data]);
+
+  const totalQuestions = questionQuery.data?.total ?? 0;
+  const hasMore = offset + limit < totalQuestions;
+
+  const sectionQuery = useQuery(
+    trpc.combo.availableSections.queryOptions(
+      {
+        examTypeId: examType || undefined,
+        search: searchText || undefined,
+        limit: 50,
+        offset: 0,
+      },
+      { enabled: mode === "section" },
+    ),
+  );
+
+  // ── Mutations ──
+  const { isPending: isPackagePending, handleAutoBundle } = usePackageBuilder();
+
+  const createPackage = useMutation(trpc.package.create.mutationOptions());
+  const addSection = useMutation(trpc.package.addSection.mutationOptions());
+  const addQuestion = useMutation(trpc.package.addQuestion.mutationOptions());
+  const createCombo = useMutation(trpc.combo.create.mutationOptions());
+
+  const togglePublic = useMutation({
+    ...trpc.question.togglePublic.mutationOptions(),
+    onSuccess: () => questionQuery.refetch(),
+  });
+
+  const deleteQuestion = useMutation({
+    ...trpc.question.delete.mutationOptions(),
+    onSuccess: () => questionQuery.refetch(),
+  });
+
+  const bulkPublish = useMutation({
+    ...trpc.question.bulkPublish.mutationOptions(),
+    onSuccess: (data) => {
+      questionQuery.refetch();
+      if (data.skipped > 0) {
+        toast.success(
+          `${data.updated} soal dipublikasikan, ${data.skipped} dilewati`,
+          { description: "Beberapa soal bukan milikmu atau sudah tidak tersedia." },
+        );
+      } else {
+        toast.success(`${data.updated} soal berhasil dipublikasikan`);
+      }
+    },
+    onError: (err: any) => {
+      toast.error("Gagal mempublikasikan. Coba refresh dan pilih ulang soal.", { description: err.message });
+    },
+  });
+
+  // ── Navigation helpers ──
+  const setMode = (newMode: Mode) => {
+    navigate({
+      search: {
+        mode: newMode,
+        tab: newMode === "soal" ? "mine" : undefined,
+        search: "",
+        examType: "",
+        section: "",
+        format: "",
+        difficulty: undefined,
+      },
+    });
+    if (newMode === "soal") setBundleSections([]);
+    else setBundleQuestions([]);
+  };
+
+  const setSearch = (value: string) =>
+    navigate({ search: (prev) => ({ ...prev, search: value }) });
+
+  const setExamType = (value: string) =>
+    navigate({ search: (prev) => ({ ...prev, examType: value }) });
+
+  const setSection = (value: string) =>
+    navigate({ search: (prev) => ({ ...prev, section: value }) });
+
+  const setFormat = (value: string) =>
+    navigate({ search: (prev) => ({ ...prev, format: value }) });
+
+  const setDifficulty = (value: number | undefined) =>
+    navigate({ search: (prev) => ({ ...prev, difficulty: value }) });
+
+  const setVisibility = (value: "all" | "private" | "public") =>
+    navigate({ search: (prev) => ({ ...prev, visibility: value === "all" ? undefined : value }) });
+
+  const setTab = (newTab: QuestionTab) =>
+    navigate({
+      search: {
+        mode: "soal",
+        tab: newTab,
+        search: "",
+        examType: "",
+        section: "",
+        format: "",
+        difficulty: undefined,
+        visibility: undefined,
+      },
+    });
+
+  const clearFilters = () =>
+    navigate({
+      search: (prev) => ({
+        ...prev,
+        search: "",
+        examType: "",
+        section: "",
+        format: "",
+        difficulty: undefined,
+        visibility: undefined,
+      }),
+    });
+
+  const hasFilters =
+    !!searchText || !!examType || !!section || !!format || difficulty !== undefined;
+
+  // ── Active filter chips data ──
+  const activeChips = [
+    ...(examType ? [{ key: "examType", label: EXAM_TYPES.find((t) => t.id === examType)?.name ?? examType, onRemove: () => setExamType("") }] : []),
+    ...(section ? [{ key: "section", label: SECTIONS.find((s) => s.id === section)?.name ?? section, onRemove: () => setSection("") }] : []),
+    ...(format ? [{ key: "format", label: formatLabel(format), onRemove: () => setFormat("") }] : []),
+    ...(difficulty !== undefined ? [{ key: "difficulty", label: `Lv.${difficulty}`, onRemove: () => setDifficulty(undefined) }] : []),
+  ];
+
+  // ── Bundle helpers ──
+  const lockedExamType = bundleQuestions.length > 0 ? bundleQuestions[0]?.examTypeId : null;
+
+  const isQuestionInBundle = (qid: string) =>
+    bundleQuestions.some((q) => q.id === qid);
+
+  const isSectionInBundle = (sid: string) =>
+    bundleSections.some((s) => s.id === sid);
+
+  const toggleQuestion = (q: any) => {
+    if (lockedExamType && q.examTypeId !== lockedExamType) {
+      toast.error(`Hanya bisa memilih soal dari ${EXAM_TYPES.find((t) => t.id === lockedExamType)?.name ?? lockedExamType}`);
+      return;
+    }
+    setBundleQuestions((prev) => {
+      const exists = prev.find((x) => x.id === q.id);
+      if (exists) return prev.filter((x) => x.id !== q.id);
+      return [...prev, q];
+    });
+  };
+
+  const toggleSection = (s: any) => {
+    setBundleSections((prev) => {
+      const exists = prev.find((x) => x.id === s.id);
+      if (exists) return prev.filter((x) => x.id !== s.id);
+      return [...prev, s];
+    });
+  };
+
+  const removeFromBundle = (id: string, type: "question" | "section") => {
+    if (type === "question") {
+      setBundleQuestions((prev) => prev.filter((x) => x.id !== id));
+    } else {
+      setBundleSections((prev) => prev.filter((x) => x.id !== id));
+    }
+  };
+
+  // ── Create handlers ──
+  const handleCreateFromQuestions = async () => {
+    if (!bundleTitle || bundleQuestions.length === 0) return;
+    const first = bundleQuestions[0];
+    try {
+      const pkg = await createPackage.mutateAsync({
+        title: bundleTitle,
+        description: bundleDescription,
+        examTypeId: first?.examTypeId ?? "",
+        isPublic: bundleIsPublic,
+        estimatedDurationMin: bundleQuestions.length * 2,
+      });
+      const sec = await addSection.mutateAsync({
+        packageId: pkg.id,
+        sectionTypeId: first?.sectionTypeId ?? "READING",
+        title: `${first?.sectionTypeName ?? "Reading"} Section`,
+        orderIndex: 0,
+      });
+      for (let i = 0; i < bundleQuestions.length; i++) {
+        await addQuestion.mutateAsync({
+          sectionId: sec.id,
+          questionId: bundleQuestions[i].id,
+          orderIndex: i,
+        });
+      }
+      setBundleQuestions([]);
+      setBundleTitle("");
+      setBundleDescription("");
+    } catch (err: any) {
+      toast.error("Gagal membuat paket", { description: err.message });
+    }
+  };
+
+  const handleCreateFromSections = async () => {
+    if (!bundleTitle || bundleSections.length === 0) return;
+    try {
+      await createCombo.mutateAsync({
+        title: bundleTitle,
+        description: bundleDescription,
+        isPublic: bundleIsPublic,
+        sections: bundleSections.map((s, i) => ({
+          sourcePackageId: s.packageId,
+          sourceSectionId: s.id,
+          orderIndex: i,
+        })),
+      });
+      setBundleSections([]);
+      setBundleTitle("");
+      setBundleDescription("");
+      toast.success("Combo paket berhasil dibuat!");
+    } catch (err: any) {
+      toast.error("Gagal membuat combo", { description: err.message });
+    }
+  };
+
+  // ── Auto Bundle ──
+  const autoBundleExamType = examType || lockedExamType || null;
+  const autoBundleSectionType = section || null;
+
+  const onAutoBundle = async (data: {
+    title: string;
+    description: string;
+    isPublic: boolean;
+    count: number;
+    sortOrder: "random" | "difficulty";
+  }) => {
+    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,
+    });
+    setIsAutoBundleOpen(false);
+  };
+
+  // ── Render helpers ──
+  const questions = allQuestions;
+
+  const sections = sectionQuery.data?.sections ?? [];
+  const groupedSections = sections.reduce((groups: Record<string, any[]>, s: any) => {
+    const key = `${s.examTypeName ?? "Unknown"} — ${s.packageTitle ?? "Untitled"}`;
+    if (!groups[key]) groups[key] = [];
+    groups[key].push(s);
+    return groups;
+  }, {} as Record<string, any[]>);
+
+  const isCreating =
+    createPackage.isPending ||
+    addSection.isPending ||
+    addQuestion.isPending ||
+    createCombo.isPending;
+
+  return (
+    <div className="min-h-screen pb-32 bg-[var(--warm-cream)]">
+      <FilterBar
+        mode={mode}
+        tab={tab}
+        searchText={searchText}
+        examType={examType}
+        visibility={visibilityFilter}
+        activeChips={activeChips}
+        hasFilters={hasFilters}
+        isAdvancedOpen={isAdvancedOpen}
+        lockedExamType={lockedExamType}
+        dataTour="bank-filters"
+        onToggleAdvanced={() => setIsAdvancedOpen((v) => !v)}
+        onSetMode={setMode}
+        onSetTab={setTab}
+        onSetSearch={setSearch}
+        onSetExamType={setExamType}
+        onSetVisibility={setVisibility}
+        onClearFilters={clearFilters}
+        onOpenMobileSheet={() => setIsMobileSheetOpen(true)}
+        advancedFilters={
+          <AdvancedFilters
+            section={section}
+            format={format}
+            difficulty={difficulty}
+            onSetSection={setSection}
+            onSetFormat={setFormat}
+            onSetDifficulty={setDifficulty}
+          />
+        }
+      />
+
+      <div className="px-6 md:px-12 lg:px-16 max-w-7xl mx-auto pt-6">
+        <section className="mb-8">
+          <h1 className="text-4xl font-headline font-extrabold text-[var(--clay-black)] tracking-tight">
+            Buat Paket
+          </h1>
+          <p className="text-lg text-[var(--warm-charcoal)] mt-2">
+            Pilih soal atau section untuk dibuatkan paket latihan.
+          </p>
+          <div className="mt-3 flex flex-wrap gap-3 text-sm text-[var(--warm-charcoal)]">
+            <span className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[var(--matcha-300)]/30 text-[var(--matcha-800)] font-medium">
+              <MaterialIcon name="auto_awesome" className="text-sm" />
+              Auto Bundle — biarkan AI pilihkan soal otomatis
+            </span>
+            <span className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[var(--slushie-500)]/20 text-[var(--slushie-800)] font-medium">
+              <MaterialIcon name="touch_app" className="text-sm" />
+              Manual — pilih sendiri soal satu per satu
+            </span>
+          </div>
+        </section>
+
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
+          <div data-tour="bank-questions" className="lg:col-span-8">
+            {mode === "soal" ? (
+              <SoalBrowser
+                isLoading={questionQuery.isLoading}
+                questions={questions}
+                hasMore={hasMore}
+                isFetchingNextPage={questionQuery.isFetching}
+                onLoadMore={() => setOffset((prev) => prev + limit)}
+                hasFilters={hasFilters}
+                userId={userId}
+                lockedExamType={lockedExamType}
+                tab={tab}
+                filterKey={filterKey}
+                isQuestionInBundle={isQuestionInBundle}
+                onToggleQuestion={toggleQuestion}
+                onOpenDetail={setSelectedQuestion}
+                onTogglePublic={(id) => togglePublic.mutate({ id })}
+                onDelete={(id) => {
+                  if (confirm("Yakin mau hapus soal ini?")) deleteQuestion.mutate({ id });
+                }}
+                onClearFilters={clearFilters}
+                onBulkPublish={(ids) => bulkPublish.mutate({ ids })}
+                onPublishAllPrivate={(ids) => bulkPublish.mutate({ ids })}
+              />
+            ) : (
+              <SectionBrowser
+                isLoading={sectionQuery.isLoading}
+                groupedSections={groupedSections}
+                isSectionInBundle={isSectionInBundle}
+                onToggleSection={toggleSection}
+              />
+            )}
+          </div>
+
+          <BundleSidebar
+            mode={mode}
+            bundleQuestions={bundleQuestions}
+            bundleSections={bundleSections}
+            bundleTitle={bundleTitle}
+            bundleDescription={bundleDescription}
+            bundleIsPublic={bundleIsPublic}
+            isCreating={isCreating}
+            autoBundleExamType={autoBundleExamType}
+            lockedExamType={lockedExamType}
+            onSetTitle={setBundleTitle}
+            onSetDescription={setBundleDescription}
+            onSetIsPublic={setBundleIsPublic}
+            onRemoveFromBundle={removeFromBundle}
+            onCreateFromQuestions={handleCreateFromQuestions}
+            onCreateFromSections={handleCreateFromSections}
+            onOpenAutoBundle={() => setIsAutoBundleOpen(true)}
+          />
+        </div>
+      </div>
+
+      <MobileFilterSheet
+        open={isMobileSheetOpen}
+        onOpenChange={setIsMobileSheetOpen}
+        section={section}
+        format={format}
+        difficulty={difficulty}
+        activeChips={activeChips}
+        onSetSection={setSection}
+        onSetFormat={setFormat}
+        onSetDifficulty={setDifficulty}
+        onClearFilters={clearFilters}
+      />
+
+      {selectedQuestion && (
+        <QuestionDetailModal
+          question={selectedQuestion}
+          onClose={() => setSelectedQuestion(null)}
+          isSelected={isQuestionInBundle(selectedQuestion.id)}
+          onToggleSelect={() => toggleQuestion(selectedQuestion)}
+          isSelectable={true}
+        />
+      )}
+
+      {isAutoBundleOpen && autoBundleExamType && (
+        <AutoBundleModal
+          availableCount={totalQuestions}
+          examTypeName={EXAM_TYPES.find((t) => t.id === autoBundleExamType)?.name ?? autoBundleExamType}
+          sectionTypeName={SECTIONS.find((s) => s.id === autoBundleSectionType)?.name ?? "Reading"}
+          onClose={() => setIsAutoBundleOpen(false)}
+          onCreate={onAutoBundle}
+          isPending={isPackagePending}
+        />
+      )}
+
+      <PageTour
+        storageKey={BANK_TOUR_KEY}
+        autoDelay={600}
+        steps={bankPageSteps}
+      />
+      <TourHelpButton storageKey={BANK_TOUR_KEY} />
+    </div>
+  );
+}
+
+// ── Bank page tour ──
+const BANK_TOUR_KEY = "labas-page-tour-bank";
+const bankPageSteps: Step[] = [
+  {
+    target: "[data-tour='bank-filters']",
+    title: "Filter & Mode",
+    content: "Pilih mode 'Dari Soal' untuk pilih soal satu per satu, atau 'Dari Section' untuk gabung section dari paket yang sudah ada. Filter juga berdasarkan exam type dan kata kunci.",
+    spotlightPadding: 8,
+  },
+  {
+    target: "[data-tour='bank-questions']",
+    title: "Daftar Soal",
+    content: "Semua soal yang sesuai filter ditampilkan di sini. Klik soal untuk melihat detail, atau centang untuk menambahkannya ke paket.",
+    spotlightPadding: 8,
+  },
+  {
+    target: "[data-tour='bank-sidebar']",
+    title: "Sidebar Paket",
+    content: "Soal yang dipilih muncul di sini. Atur judul, deskripsi, dan visibilitas paket. Klik 'Auto Bundle' untuk isi otomatis, atau 'Buat Paket' untuk simpan.",
+    spotlightPadding: 8,
+  },
+];

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

@@ -0,0 +1,770 @@
+import { useState, useEffect, useRef } from "react";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { Link } from "@tanstack/react-router";
+import { authClient } from "@/lib/auth-client";
+import { trpc } from "@/utils/trpc";
+import { useApiKeys } from "@/hooks/use-api-key";
+import { useGenerationJobs, type CompletedResult } from "@/hooks/use-generation-jobs";
+import { Button } from "@labas/ui/components/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@labas/ui/components/select";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { TestBlueprintCard } from "@/components/generate/TestBlueprintCard";
+import { ResultSection } from "@/components/generate/ResultSection";
+import { PageTour, TourHelpButton } from "@/components/TourGuide";
+import {
+  EXAM_TYPES,
+  SECTIONS,
+  FORMATS,
+  TOPICS,
+  DIFFICULTIES,
+  QUESTION_COUNT_PRESETS,
+} from "@/lib/generate-constants";
+import { getDifficultyLabel } from "@/lib/difficulty-mapping";
+import "flag-icons/css/flag-icons.min.css";
+import type { Step } from "react-joyride";
+
+const MAX_PARALLEL = 3;
+
+
+export function RouteComponent() {
+  const { configs, hasConfigs } = useApiKeys();
+
+  const [selectedKeyId, setSelectedKeyId] = useState<string>(
+    configs[0]?.id ?? "",
+  );
+
+  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 [useFreeCredits, setUseFreeCredits] = useState(false);
+
+  const myCredit = useQuery(
+    trpc.admin.getMyCredit.queryOptions(),
+  );
+  const hasFreeCredits = myCredit.data?.freeCreditsEnabled === true;
+  const tokenBalance = myCredit.data?.tokenBalance ?? 0;
+
+  const {
+    activeCount,
+    completedResults,
+    isGenerating,
+    error,
+    addJob,
+    removeJob,
+    resetAll,
+    setError,
+  } = useGenerationJobs();
+
+  const [activeTabIdx, setActiveTabIdx] = useState(0);
+  const prevResultsLengthRef = useRef(0);
+
+  // Auto-scroll to results when they appear
+  const resultsRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (completedResults.length > 0 && resultsRef.current) {
+      resultsRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  }, [completedResults.length]);
+
+  useEffect(() => {
+    const prev = prevResultsLengthRef.current;
+    prevResultsLengthRef.current = completedResults.length;
+
+    if (completedResults.length === 0) {
+      setActiveTabIdx(0);
+      return;
+    }
+
+    if (completedResults.length > prev) {
+      setActiveTabIdx(completedResults.length - 1);
+      return;
+    }
+
+    if (activeTabIdx >= completedResults.length) {
+      setActiveTabIdx(completedResults.length - 1);
+    }
+  }, [completedResults.length]);
+
+  const [examType, setExamType] = useState("IELTS");
+  const [selectedSections, setSelectedSections] = useState<string[]>(["READING"]);
+  const [selectedFormats, setSelectedFormats] = useState<string[]>(["multiple_choice"]);
+  const [difficulty, setDifficulty] = useState(2);
+  const [selectedTopics, setSelectedTopics] = useState<string[]>(["Science & Tech"]);
+  const [questionCount, setQuestionCount] = useState(5);
+  const [weaknessAlign, setWeaknessAlign] = useState(75);
+  const [mode, setMode] = useState<"quick" | "agentic">("quick");
+
+  const isReadingAndWriting = selectedSections.includes("READING") && selectedSections.includes("WRITING");
+
+  useEffect(() => {
+    setSelectedFormats((prev) => {
+      const valid = prev.filter((f) =>
+        FORMATS.find((fmt) => fmt.id === f)?.allowedExams.includes(examType),
+      );
+      if (valid.length === 0) {
+        return ["multiple_choice"];
+      }
+      return valid;
+    });
+  }, [examType]);
+
+  useEffect(() => {
+    if (isReadingAndWriting) {
+      if (questionCount < 20) setQuestionCount(20);
+      if (mode === "quick") setMode("agentic");
+    }
+  }, [isReadingAndWriting]);
+
+  const generate = useMutation({
+    ...trpc.ai.generate.mutationOptions(),
+    onSuccess: (data) => {
+      addJob(data.jobId);
+      setError(null);
+    },
+    onError: (err) => {
+      setError(err.message);
+    },
+  });
+
+  const toggleSection = (id: string) => {
+    setSelectedSections((prev) => {
+      if (prev.includes(id)) {
+        if (prev.length === 1) return prev;
+        return prev.filter((s) => s !== id);
+      }
+      return [...prev, id];
+    });
+  };
+
+  const toggleFormat = (id: string) => {
+    setSelectedFormats((prev) =>
+      prev.includes(id) ? prev.filter((f) => f !== id) : [...prev, id],
+    );
+  };
+
+  const toggleTopic = (topic: string) => {
+    setSelectedTopics((prev) =>
+      prev.includes(topic) ? prev.filter((t) => t !== topic) : [...prev, topic],
+    );
+  };
+
+  const handleGenerate = () => {
+    if (!useFreeCredits && (!hasConfigs || !selectedConfig)) {
+      setError("API key belum dikonfigurasi. Tambahkan di Settings atau gunakan kredit gratis.");
+      return;
+    }
+    if (selectedSections.length === 0) {
+      setError("Pilih minimal 1 section.");
+      return;
+    }
+    if (selectedFormats.length === 0) {
+      setError("Pilih minimal 1 format soal.");
+      return;
+    }
+
+    const apiKeyConfig = useFreeCredits
+      ? undefined
+      : {
+          baseUrl: selectedConfig!.baseUrl,
+          apiKey: selectedConfig!.apiKey,
+          model: selectedConfig!.modelName,
+          maxTokens: selectedConfig!.maxTokens ?? 16384,
+        };
+
+    generate.mutate({
+      examType: examType as any,
+      section: selectedSections[0] as any,
+      selectedSections: selectedSections as any,
+      formats: selectedFormats as any,
+      difficulty: difficulty + 1,
+      topics: selectedTopics,
+      questionCount,
+      mode,
+      apiKeyConfig,
+    } as any);
+  };
+
+  const sectionSplits = (() => {
+    if (mode !== "agentic" || questionCount < 20 || selectedSections.length <= 1) return null;
+    const base = Math.floor(questionCount / selectedSections.length);
+    const rem = questionCount % selectedSections.length;
+    return selectedSections.map((s, i) => ({ section: s, count: base + (i < rem ? 1 : 0) }));
+  })();
+
+  const activeResult = completedResults[activeTabIdx] ?? null;
+
+  return (
+    <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-7xl mx-auto bg-[var(--warm-cream)]">
+      {/* Header */}
+      <section className="flex flex-col gap-2 relative mb-10">
+        <div className="absolute -left-8 -top-8 w-64 h-64 ai-glow pointer-events-none opacity-50" />
+        <h1 className="text-4xl md:text-5xl font-headline font-extrabold text-[var(--clay-black)] tracking-tight">
+          AI Exam Generator
+        </h1>
+        <p className="text-lg text-[var(--warm-charcoal)] max-w-2xl leading-relaxed">
+          Generate soal latihan dengan AI. Pilih exam, section, format, dan topik — sisanya AI yang kerjakan.
+        </p>
+        <div className="mt-4 flex flex-wrap gap-3 text-sm text-[var(--warm-charcoal)]">
+          <span className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[var(--matcha-300)]/30 text-[var(--matcha-800)] font-medium">
+            <MaterialIcon name="looks_one" className="text-sm" />
+            Pilih exam &amp; section
+          </span>
+          <span className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[var(--slushie-500)]/20 text-[var(--slushie-800)] font-medium">
+            <MaterialIcon name="looks_two" className="text-sm" />
+            Atur jumlah &amp; format
+          </span>
+          <span className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[var(--lemon-400)]/30 text-[var(--lemon-800)] font-medium">
+            <MaterialIcon name="looks_3" className="text-sm" />
+            Generate &amp; simpan
+          </span>
+          <span className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[var(--clay-black)]/10 text-[var(--clay-black)] font-medium">
+            <MaterialIcon name="looks_4" className="text-sm" />
+            Buat paket dari Bank Soal
+          </span>
+        </div>
+      </section>
+
+      {!hasConfigs && !useFreeCredits && !hasFreeCredits && (
+        <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>
+          <Link to="/settings" className="font-semibold underline">
+            Tambahkan di Settings →
+          </Link>
+        </div>
+      )}
+
+      {!hasConfigs && !useFreeCredits && hasFreeCredits && (
+        <div className="mb-8 p-4 rounded-[var(--radius-lg)] bg-[var(--matcha-300)]/30 text-[var(--matcha-800)] text-sm flex items-center gap-3 border-2 border-[var(--matcha-400)]">
+          <MaterialIcon name="tips_and_updates" />
+          <span>Belum ada API key. Kamu bisa pakai Free Credits!</span>
+          <button onClick={() => setUseFreeCredits(true)} className="font-semibold underline">
+            Gunakan Free Credits →
+          </button>
+        </div>
+      )}
+
+      <div className="mb-8 p-5 rounded-[var(--radius-xl)] bg-[var(--pure-white)] border-2 border-[var(--oat-border)]">
+        <div className="flex items-center justify-between mb-3">
+          <label className="text-sm font-medium text-[var(--clay-black)]">Generation Mode</label>
+        </div>
+        <div className="flex items-center gap-4">
+          <button
+            onClick={() => { setUseFreeCredits(false); }}
+            className={`flex items-center gap-2 px-4 py-2.5 rounded-[var(--radius-lg)] text-sm font-medium transition-all ${
+              !useFreeCredits
+                ? "bg-[var(--clay-black)] text-[var(--pure-white)]"
+                : "bg-[var(--oat-light)] text-[var(--warm-charcoal)] hover:bg-[var(--oat-border)]"
+            }`}
+          >
+            <MaterialIcon name="vpn_key" className="text-sm" />
+            BYOK
+          </button>
+          {hasFreeCredits && (
+            <button
+              onClick={() => { setUseFreeCredits(true); }}
+              className={`flex items-center gap-2 px-4 py-2.5 rounded-[var(--radius-lg)] text-sm font-medium transition-all ${
+                useFreeCredits
+                  ? "bg-[var(--clay-black)] text-[var(--pure-white)]"
+                  : "bg-[var(--oat-light)] text-[var(--warm-charcoal)] hover:bg-[var(--oat-border)]"
+              }`}
+            >
+              <MaterialIcon name="stars" className="text-sm" />
+              Free Credits
+            </button>
+          )}
+          {useFreeCredits && (
+            <Link to="/settings" className="text-xs text-[var(--matcha-600)] underline ml-2">
+              Atur BYOK di Settings
+            </Link>
+          )}
+        </div>
+
+        {useFreeCredits && myCredit.data && (
+          <div className="mt-4 pt-4 border-t border-[var(--oat-border)] space-y-2">
+            <div className="flex items-center justify-between">
+              <span className="text-sm text-[var(--warm-charcoal)]">Token kamu</span>
+              <span className={`text-lg font-headline font-bold ${tokenBalance > 0 ? "text-[var(--clay-black)]" : "text-[var(--clay-red)]"}`}>
+                {tokenBalance.toLocaleString()}
+              </span>
+            </div>
+            {tokenBalance > 0 && (
+              <div className="w-full h-2 bg-[var(--oat-border)] rounded-full overflow-hidden">
+                <div
+                  className="h-full bg-[var(--matcha-500)] rounded-full transition-all"
+                  style={{ width: `${Math.min(100, (tokenBalance / 50000) * 100)}%` }}
+                />
+              </div>
+            )}
+            {myCredit.data.cooldownRemaining > 0 && (
+              <p className="flex items-center gap-1.5 text-xs text-[var(--sunbeam-800)] bg-[var(--sunbeam-300)]/30 px-3 py-1.5 rounded-[var(--radius-md)]">
+                <MaterialIcon name="schedule" className="text-base leading-none shrink-0" />
+                <span>
+                  Cooldown: {myCredit.data.cooldownRemaining} hari lagi untuk auto-refill.
+                </span>
+              </p>
+            )}
+            {tokenBalance <= 0 && myCredit.data.cooldownRemaining === 0 && (
+              <p className="text-xs text-[var(--matcha-700)] bg-[var(--matcha-300)]/30 px-3 py-1.5 rounded-[var(--radius-md)]">
+                Token habis. Auto-refill tersedia saat kamu generate.
+              </p>
+            )}
+            {tokenBalance <= 0 && myCredit.data.cooldownRemaining > 0 && (
+              <p className="text-xs text-[var(--clay-red)]/80 bg-[var(--clay-red)]/5 px-3 py-1.5 rounded-[var(--radius-md)]">
+                Token habis & dalam cooldown. Gunakan BYOK atau tunggu {myCredit.data.cooldownRemaining} hari.
+              </p>
+            )}
+          </div>
+        )}
+
+        {!useFreeCredits && hasConfigs && (
+          <div className="mt-4 pt-4 border-t 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} onValueChange={(v) => v && setSelectedKeyId(v)}>
+                <SelectTrigger className="flex-1 h-11">
+                  <SelectValue>
+                    {selectedConfig ? `${selectedConfig.name} · ${selectedConfig.modelName}` : "Pilih provider..."}
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  {configs.map((c) => (
+                    <SelectItem key={c.id} value={c.id}>
+                      {c.name} · {c.modelName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Link to="/settings">
+                <Button variant="outline" size="xl" className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover">
+                  <MaterialIcon name="settings" className="mr-1" />
+                  Kelola
+                </Button>
+              </Link>
+            </div>
+          </div>
+        )}
+
+        {!useFreeCredits && !hasConfigs && !hasFreeCredits && (
+          <p className="mt-3 text-xs text-[var(--warm-charcoal)]">
+            Tambahkan API key di Settings dahulu.
+          </p>
+        )}
+
+        {!useFreeCredits && !hasConfigs && hasFreeCredits && (
+          <p className="mt-3 text-xs text-[var(--warm-charcoal)]">
+            Belum ada API key?{" "}
+            <button onClick={() => setUseFreeCredits(true)} className="text-[var(--matcha-600)] underline">
+              Gunakan kredit gratis
+            </button>
+            {" "}atau tambah di Settings.
+          </p>
+        )}
+
+        {useFreeCredits && !hasFreeCredits && (
+          <p className="mt-3 text-xs text-[var(--warm-charcoal)]">
+            Free credits sedang dinonaktifkan oleh admin.
+          </p>
+        )}
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-start">
+        {/* Configuration Panel */}
+        <div className="lg:col-span-8 flex flex-col gap-10">
+
+          {/* Exam Type */}
+          <div data-tour="generate-exam-type" className="flex flex-col gap-4">
+            <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Jenis Ujian</label>
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
+              {EXAM_TYPES.map((t) => (
+                <button
+                  key={t.id}
+                  onClick={() => setExamType(t.id)}
+                  className={`flex items-center gap-3 py-4 px-4 rounded-[var(--radius-lg)] border-2 transition-all text-sm font-semibold clay-hover min-h-[56px] ${
+                    examType === t.id
+                      ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow border-[var(--clay-black)]"
+                      : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] border-[var(--oat-border)]"
+                  }`}
+                >
+                  <span className={`fi fi-${t.code} w-6 h-4 rounded-sm shadow-sm shrink-0`} />
+                  {t.name}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Section Selection — Multi-select */}
+          <div data-tour="generate-section" className="flex flex-col gap-4">
+            <div className="flex items-center justify-between">
+              <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Section</label>
+              <span className="text-xs text-[var(--warm-charcoal)]">
+                {selectedSections.length} dipilih
+              </span>
+            </div>
+            <div className="flex flex-wrap gap-3">
+              {SECTIONS.map((s) => {
+                const isSelected = selectedSections.includes(s.id);
+                return (
+                  <button
+                    key={s.id}
+                    onClick={() => toggleSection(s.id)}
+                    className={`flex items-center gap-2.5 px-5 py-3 rounded-[var(--radius-lg)] border-2 transition-all text-sm font-semibold clay-hover min-h-[52px] ${
+                      isSelected
+                        ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow border-[var(--clay-black)]"
+                        : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] border-[var(--oat-border)]"
+                    }`}
+                  >
+                    <MaterialIcon
+                      name={isSelected ? "check_circle" : s.icon}
+                      className={`text-base shrink-0 ${isSelected ? "text-[var(--matcha-400)]" : ""}`}
+                    />
+                    {s.name}
+                  </button>
+                );
+              })}
+            </div>
+            {selectedSections.length > 1 && (
+              <p className="text-xs text-[var(--matcha-800)] bg-[var(--matcha-300)]/30 px-3 py-2 rounded-[var(--radius-md)]">
+                <MaterialIcon name="tips_and_updates" className="text-xs mr-1 inline" />
+                Kamu memilih {selectedSections.length} section. Mode Agentic dengan ≥20 soal akan otomatis membagi soal ke section yang dipilih.
+              </p>
+            )}
+          </div>
+
+          {/* Question Count */}
+          <div data-tour="generate-count" className="flex flex-col gap-4">
+            <label className="font-headline text-xl font-bold text-[var(--clay-black)]">
+              Jumlah Soal
+              <span className="ml-2 text-sm font-normal text-[var(--warm-charcoal)]">{questionCount} soal</span>
+            </label>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+              {QUESTION_COUNT_PRESETS.map((p) => {
+                const isDisabled = isReadingAndWriting && (p.value === 5 || p.value === 10);
+                return (
+                <button
+                  key={p.value}
+                  onClick={() => setQuestionCount(p.value)}
+                  disabled={isDisabled}
+                  className={`py-4 px-2 rounded-[var(--radius-lg)] text-sm font-semibold transition-all clay-hover flex flex-col items-center gap-1 min-h-[72px] ${
+                    isDisabled
+                      ? "bg-[var(--oat-light)] text-[var(--warm-silver)] cursor-not-allowed opacity-50 border-2 border-[var(--oat-border)]"
+                      : questionCount === p.value
+                        ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow"
+                        : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] border-2 border-[var(--oat-border)]"
+                  }`}
+                >
+                  <span>{p.label}</span>
+                  <span className={`text-xs ${questionCount === p.value ? "text-[var(--pure-white)]/70" : "text-[var(--warm-charcoal)]/70"}`}>{p.desc}</span>
+                </button>
+              );
+              })}
+            </div>
+            <div className="flex items-center gap-3 mt-1">
+              <span className="text-xs font-medium text-[var(--warm-charcoal)] whitespace-nowrap">Custom:</span>
+              <input
+                type="range"
+                min={isReadingAndWriting ? 20 : 1}
+                max={40}
+                value={questionCount}
+                onChange={(e) => setQuestionCount(Number(e.target.value))}
+                className="w-full h-2 bg-[var(--warm-silver)] rounded-full appearance-none cursor-pointer accent-[var(--clay-black)]"
+              />
+              <span className="text-xs font-bold text-[var(--clay-black)] w-6 text-right">{questionCount}</span>
+            </div>
+
+            {/* Auto Multi-Section Preview */}
+            {sectionSplits && (
+              <div className="mt-2 p-4 rounded-[var(--radius-lg)] bg-[var(--matcha-300)]/30 border border-[var(--matcha-400)]">
+                <div className="flex items-center gap-2 mb-2 text-[var(--matcha-800)] font-semibold text-sm">
+                  <MaterialIcon name="auto_awesome" className="text-xs" />
+                  Auto Multi-Section
+                </div>
+                <p className="text-[var(--matcha-800)]/80 text-xs mb-3">
+                  Mode Agentic dengan {questionCount} soal akan dibagi ke {sectionSplits.length} section:
+                </p>
+                <div className="flex flex-wrap gap-2">
+                  {sectionSplits.map((s) => {
+                    const sec = SECTIONS.find((sec) => sec.id === s.section);
+                    return (
+                      <span
+                        key={s.section}
+                        className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[var(--pure-white)] text-[var(--matcha-800)] text-xs font-medium border border-[var(--matcha-400)]"
+                      >
+                        <MaterialIcon name={sec?.icon ?? "menu_book"} className="text-[10px]" />
+                        {sec?.name ?? s.section}: {s.count} soal
+                      </span>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Difficulty */}
+          <div data-tour="generate-difficulty" className="flex flex-col gap-4">
+            <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Tingkat Kesulitan</label>
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
+              {DIFFICULTIES.map((d, i) => (
+                <button
+                  key={d}
+                  onClick={() => setDifficulty(i)}
+                  className={`py-4 px-2 rounded-[var(--radius-lg)] text-sm font-semibold transition-all clay-hover min-h-[56px] flex flex-col items-center ${
+                    difficulty === i
+                      ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow"
+                      : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] border-2 border-[var(--oat-border)]"
+                  }`}
+                >
+                  <span>{getDifficultyLabel(examType, i + 1)}</span>
+                  <span className={`text-[10px] mt-0.5 ${difficulty === i ? "text-white/60" : "text-[var(--warm-silver)]"}`}>{d}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Format Selection */}
+          <div data-tour="generate-format" className="flex flex-col gap-4">
+            <div className="flex items-center justify-between">
+              <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Format Soal</label>
+              <span className="text-xs text-[var(--warm-charcoal)]">
+                {selectedFormats.length} dipilih
+              </span>
+            </div>
+            <div className="flex flex-wrap gap-2">
+              {FORMATS.filter((f) => f.allowedExams.includes(examType)).map((f) => (
+                <button
+                  key={f.id}
+                  onClick={() => toggleFormat(f.id)}
+                  className={`px-4 py-2.5 rounded-full text-sm font-medium flex items-center gap-2 cursor-pointer transition-all clay-hover min-h-[40px] ${
+                    selectedFormats.includes(f.id)
+                      ? "bg-[var(--matcha-300)] text-[var(--matcha-800)]"
+                      : "bg-[var(--oat-light)] text-[var(--warm-charcoal)] hover:bg-[var(--matcha-300)] hover:text-[var(--matcha-800)]"
+                  }`}
+                >
+                  {f.name}
+                  {selectedFormats.includes(f.id) && (
+                    <MaterialIcon name="close" className="text-sm" />
+                  )}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Topic Focus */}
+          <div data-tour="generate-topic" className="flex flex-col gap-4">
+            <div className="flex items-center justify-between">
+              <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Topik</label>
+              <span className="text-xs text-[var(--warm-charcoal)]">
+                {selectedTopics.length} dipilih
+              </span>
+            </div>
+            <div className="flex flex-wrap gap-2">
+              {selectedTopics.map((topic) => (
+                <span
+                  key={topic}
+                  onClick={() => toggleTopic(topic)}
+                  className="px-4 py-2 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] font-medium flex items-center gap-2 cursor-pointer transition-all hover:brightness-95 clay-hover min-h-[40px]"
+                >
+                  {topic} <MaterialIcon name="close" className="text-sm" />
+                </span>
+              ))}
+              {TOPICS.filter((t) => !selectedTopics.includes(t)).map((topic) => (
+                <button
+                  key={topic}
+                  onClick={() => toggleTopic(topic)}
+                  className="px-4 py-2 rounded-full bg-[var(--oat-light)] text-[var(--warm-charcoal)] font-medium hover:bg-[var(--matcha-300)] hover:text-[var(--matcha-800)] transition-all clay-hover min-h-[40px]"
+                >
+                  {topic}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Weakness Alignment */}
+          <div data-tour="generate-weakness" className="flex flex-col gap-4">
+            <div className="flex justify-between items-end">
+              <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Fokus Latihan</label>
+              <span className="text-sm font-medium text-[var(--matcha-800)] bg-[var(--matcha-300)] px-3 py-1 rounded-full">
+                Intelligent Focus
+              </span>
+            </div>
+            <div className="relative py-4">
+              <input
+                type="range"
+                min="0"
+                max="100"
+                value={weaknessAlign}
+                onChange={(e) => setWeaknessAlign(Number(e.target.value))}
+                className="w-full h-2 bg-[var(--warm-silver)] rounded-full appearance-none cursor-pointer accent-[var(--clay-black)]"
+              />
+              <div className="flex justify-between mt-4 text-xs font-label uppercase tracking-widest text-[var(--warm-charcoal)]">
+                <span>Soal Seimbang</span>
+                <span>Fokus Kelemahan</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Live Preview Card */}
+        <div data-tour="generate-blueprint" className="lg:col-span-4">
+          <TestBlueprintCard
+            examType={examType}
+            selectedSections={selectedSections}
+            selectedFormats={selectedFormats}
+            questionCount={questionCount}
+            weaknessAlign={weaknessAlign}
+            mode={mode}
+            setMode={setMode}
+            activeCount={activeCount}
+            maxParallel={MAX_PARALLEL}
+            generatePending={generate.isPending}
+            hasKey={hasConfigs || useFreeCredits}
+            error={error}
+            onGenerate={handleGenerate}
+            onDismissError={() => setError(null)}
+            disableQuick={isReadingAndWriting}
+          />
+        </div>
+      </div>
+
+      {/* Results with Tabs */}
+      <div ref={resultsRef}>
+        {completedResults.length > 0 && (
+          <div className="mt-12">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-2xl font-headline font-bold text-[var(--clay-black)]">
+                Hasil Generate
+              </h2>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={resetAll}
+                className="text-[var(--warm-charcoal)] hover:text-[var(--pomegranate-400)]"
+              >
+                <MaterialIcon name="delete_sweep" className="text-sm mr-1" />
+                Bersihkan
+              </Button>
+            </div>
+
+            {/* Tab Bar */}
+            <div className="flex gap-1 mb-6 border-b border-[var(--oat-border)] overflow-x-auto">
+              {completedResults.map((res, idx) => {
+                const questions = res.result?.questions ?? [];
+                const isActive = idx === activeTabIdx;
+                return (
+                  <button
+                    key={res.jobId}
+                    onClick={() => setActiveTabIdx(idx)}
+                    className={`flex items-center gap-2 px-4 py-3 text-sm font-semibold rounded-t-lg transition-all whitespace-nowrap border-b-2 min-h-[44px] ${
+                      isActive
+                        ? "bg-[var(--pure-white)] text-[var(--clay-black)] border-[var(--clay-black)]"
+                        : "text-[var(--warm-charcoal)] border-transparent hover:text-[var(--clay-black)] hover:bg-[var(--oat-light)]"
+                    }`}
+                  >
+                    <MaterialIcon
+                      name={questions.length > 0 ? "check_circle" : "sync"}
+                      className={`text-sm ${isActive ? "text-[var(--matcha-400)]" : ""} ${questions.length === 0 && !isActive ? "animate-spin" : ""}`}
+                    />
+                    <span>
+                      {res.mode === "agentic" ? "Agentic" : "Quick"}
+                    </span>
+                    <span className="text-xs text-[var(--warm-charcoal)]">
+                      {questions.length} soal
+                    </span>
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        removeJob(res.jobId);
+                      }}
+                      className="w-5 h-5 flex items-center justify-center rounded-full hover:bg-[var(--pomegranate-400)]/10 text-[var(--warm-charcoal)] hover:text-[var(--pomegranate-400)] transition-colors"
+                    >
+                      <MaterialIcon name="close" className="text-xs" />
+                    </button>
+                  </button>
+                );
+              })}
+            </div>
+
+            {/* Active Tab Content */}
+            {activeResult && (
+              <ResultSection
+                result={activeResult.result}
+                generatedPackageId={activeResult.generatedPackageId}
+                onClear={resetAll}
+              />
+            )}
+          </div>
+        )}
+      </div>
+
+      <PageTour
+        storageKey={GENERATE_TOUR_KEY}
+        autoDelay={600}
+        steps={generatePageSteps}
+      />
+      <TourHelpButton storageKey={GENERATE_TOUR_KEY} />
+    </div>
+  );
+}
+
+// ── Generate page tour ──
+const GENERATE_TOUR_KEY = "labas-page-tour-generate";
+const generatePageSteps: Step[] = [
+  {
+    target: "[data-tour='generate-exam-type']",
+    title: "Jenis Ujian",
+    content: "Pilih jenis ujian yang ingin kamu latih. Tersedia IELTS, TOEFL, JLPT, HSK, Goethe, TOPIK (Korea), TOAFL (Arab), dan DELE (Spanyol).",
+    spotlightPadding: 8,
+  },
+  {
+    target: "[data-tour='generate-section']",
+    title: "Section",
+    content: "Pilih section yang ingin digenerate. Bisa pilih lebih dari satu. Mode Agentic dengan ≥20 soal otomatis membagi soal ke setiap section.",
+    spotlightPadding: 8,
+  },
+  {
+    target: "[data-tour='generate-count']",
+    title: "Jumlah Soal",
+    content: "Atur jumlah soal yang ingin digenerate via preset atau slider. Maksimal 40 soal per generate.",
+    spotlightPadding: 8,
+  },
+  {
+    target: "[data-tour='generate-difficulty']",
+    title: "Tingkat Kesulitan",
+    content: "Pilih tingkat kesulitan. Label menyesuaikan dengan jenis ujian yang dipilih (misal: N5-N1 untuk JLPT, Band 4.0-8.0 untuk IELTS).",
+    spotlightPadding: 8,
+  },
+  {
+    target: "[data-tour='generate-format']",
+    title: "Format Soal",
+    content: "Pilih format soal (multiple choice, true/false, dll). Format tersedia tergantung exam type yang dipilih.",
+    spotlightPadding: 8,
+  },
+  {
+    target: "[data-tour='generate-topic']",
+    title: "Topik",
+    content: "Pilih topik yang ingin difokuskan. Bisa pilih lebih dari satu topik.",
+    spotlightPadding: 8,
+  },
+  {
+    target: "[data-tour='generate-weakness']",
+    title: "Intelligent Focus",
+    content: "Atur fokus pada kelemahan kamu. AI akan menarget area yang perlu ditingkatkan berdasarkan riwayat jawaban.",
+    spotlightPadding: 8,
+  },
+  {
+    target: "[data-tour='generate-blueprint']",
+    title: "Test Blueprint & Generate",
+    content: "Ringkasan konfigurasi kamu. Pilih mode Quick (cepat) atau Agentic (multi-tahap). Klik 'Generate & Launch' untuk memulai!",
+    spotlightPadding: 8,
+  },
+];

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

@@ -0,0 +1,295 @@
+import { createFileRoute, Link, redirect } from "@tanstack/react-router";
+import { Button } from "@labas/ui/components/button";
+import { Card, CardContent } from "@labas/ui/components/card";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { useState } from "react";
+import { authClient } from "@/lib/auth-client";
+
+export const Route = createFileRoute("/landing")({
+  beforeLoad: async () => {
+    try {
+      const session = await authClient.getSession();
+      if (session?.data) {
+        throw redirect({ to: "/", replace: true });
+      }
+    } catch (e) {
+      if (e instanceof Response) throw e;
+    }
+  },
+});
+
+function FaqItem({ question, answer, isDark }: { question: string; answer: string; isDark?: boolean }) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className={`border-b-2 py-6 ${isDark ? 'border-[var(--ube-300)]/30' : 'border-[var(--oat-border)]'} last:border-b-0`}>
+      <button
+        type="button"
+        className="flex w-full items-center justify-between text-left focus:outline-none group"
+        onClick={() => setIsOpen(!isOpen)}
+        aria-expanded={isOpen}
+      >
+        <span className={`font-headline font-semibold text-2xl tracking-[-0.64px] transition-colors ${isDark ? 'text-[var(--pure-white)] group-hover:text-[var(--ube-300)]' : 'text-[var(--clay-black)] group-hover:text-[var(--matcha-700)]'}`}>
+          {question}
+        </span>
+        <div className={`w-10 h-10 rounded-full border-2 flex items-center justify-center transition-transform duration-300 ${isOpen ? "rotate-180" : ""} ${isDark ? 'border-[var(--ube-300)]/50 text-[var(--pure-white)] group-hover:bg-[var(--ube-300)]/20' : 'border-[var(--oat-border)] text-[var(--clay-black)] group-hover:bg-[var(--oat-light)]'}`}>
+          <MaterialIcon
+            name="expand_more"
+            className="text-2xl"
+          />
+        </div>
+      </button>
+      <div
+        className={`overflow-hidden transition-all duration-300 ease-in-out ${isOpen ? "max-h-96 mt-4 opacity-100" : "max-h-0 opacity-0"}`}
+      >
+        <p className={`text-lg leading-relaxed pr-12 ${isDark ? 'text-[var(--ube-300)]' : 'text-[var(--warm-charcoal)]'}`}>
+          {answer}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export function LandingPage() {
+  return (
+    <div className="min-h-screen bg-[var(--warm-cream)] flex flex-col font-sans selection:bg-[var(--matcha-300)] selection:text-[var(--clay-black)]">
+      {/* Navbar */}
+      <nav className="w-full px-6 py-4 md:px-12 lg:px-16 flex items-center justify-between max-w-7xl mx-auto z-50 sticky top-0 bg-[var(--warm-cream)] border-b-2 border-[var(--oat-border)]">
+        <div className="flex items-center gap-3">
+          <img src="/logo.png" alt="Labas Logo" className="h-10 w-auto object-contain" />
+          <span className="font-headline font-semibold text-2xl tracking-[-0.64px] text-[var(--clay-black)] hidden sm:block">Labas</span>
+        </div>
+        <div className="flex items-center gap-4">
+          <Link to="/login">
+            <Button variant="ghost" className="text-[var(--clay-black)] font-semibold hover:bg-[var(--oat-light)] rounded-[12px] text-lg px-6 h-12">
+              Masuk
+            </Button>
+          </Link>
+          <Link to="/login">
+            <Button className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--dark-charcoal)] rounded-[24px] h-12 px-8 font-semibold text-lg clay-hover clay-shadow">
+              Mulai Gratis
+            </Button>
+          </Link>
+        </div>
+      </nav>
+
+      <main className="flex-1 flex flex-col items-center overflow-x-hidden">
+        {/* HUGE HERO SECTION */}
+        <section className="w-full px-6 md:px-12 lg:px-16 pt-16 pb-20 md:pt-24 md:pb-32 flex flex-col xl:flex-row items-center justify-between gap-12 lg:gap-16 relative max-w-[1440px] mx-auto">
+          <div className="flex-1 text-center xl:text-left space-y-8 z-10 w-full max-w-[800px] xl:max-w-none">
+            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[var(--matcha-300)] border-2 border-[var(--matcha-800)] text-[var(--clay-black)] uppercase-label shadow-sm mx-auto xl:mx-0 transform -rotate-2">
+              <MaterialIcon name="auto_awesome" className="text-sm" />
+              <span>Didukung oleh AI Generative</span>
+            </div>
+            
+            <h1 className="text-[50px] md:text-[70px] lg:text-[85px] font-headline font-semibold text-[var(--clay-black)] tracking-[-2.4px] lg:tracking-[-3.2px] leading-[1.0] lg:leading-[0.95] drop-shadow-sm">
+              Platform Latihan Bahasa Cerdas.
+            </h1>
+            
+            <p className="text-xl md:text-2xl text-[var(--warm-charcoal)] max-w-2xl mx-auto xl:mx-0 leading-relaxed">
+              Persiapkan dirimu untuk ujian bahasa asing dengan latihan soal interaktif, mock test realistis, dan AI Generator super cepat.
+            </p>
+            
+            <div className="flex flex-col sm:flex-row items-center gap-6 justify-center xl:justify-start pt-6">
+              <Link to="/login" className="w-full sm:w-auto">
+                <Button className="w-full sm:w-auto bg-[var(--pure-white)] text-[var(--clay-black)] rounded-[24px] h-[64px] px-10 text-xl font-semibold border-2 border-[var(--oat-border)] clay-shadow clay-hover">
+                  Mulai Latihan Sekarang
+                </Button>
+              </Link>
+            </div>
+          </div>
+          
+          {/* MASSIVE HERO IMAGE WITH FLOATING ASSETS - SIDE BY SIDE ON DESKTOP */}
+          <div className="flex-1 w-full relative group mt-8 xl:mt-0 flex justify-center xl:justify-end">
+            <div className="relative w-full max-w-[650px] lg:max-w-[750px]">
+              <img 
+                src="/hero_img.png" 
+                alt="Labas Dashboard Preview" 
+                className="w-full h-auto object-contain transform transition-transform duration-700 group-hover:scale-105 group-hover:-rotate-1 drop-shadow-[0_20px_50px_rgba(0,0,0,0.15)] relative z-10"
+              />
+              {/* Variatif Floating Elements */}
+              <div className="absolute -top-8 -left-8 md:-top-12 md:-left-12 w-32 md:w-40 h-auto z-20 hidden sm:block">
+                <img src="/generateai.png" alt="floating element" className="w-full h-auto drop-shadow-2xl" />
+              </div>
+              <div className="absolute -bottom-8 -right-8 md:-bottom-12 md:-right-12 w-40 md:w-48 h-auto z-20 hidden sm:block">
+                <img src="/mocktest.png" alt="floating element" className="w-full h-auto drop-shadow-2xl" />
+              </div>
+              <div className="absolute top-[40%] -left-16 md:-left-24 w-24 md:w-32 h-auto z-0 hidden lg:block opacity-80 blur-[1px]">
+                <img src="/progress.png" alt="floating element" className="w-full h-auto drop-shadow-xl" />
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Feature Cards Section */}
+        <section id="features" className="w-full bg-[var(--pure-white)] py-32 border-y-2 border-dashed border-[var(--oat-border)]">
+          <div className="max-w-7xl mx-auto px-6 md:px-12 lg:px-16">
+            <div className="text-center max-w-4xl mx-auto mb-24 space-y-6">
+              <h2 className="text-[50px] md:text-[60px] font-headline font-semibold text-[var(--clay-black)] tracking-[-2.4px] leading-tight">
+                Fitur Unggulan Labas
+              </h2>
+              <p className="text-2xl text-[var(--warm-charcoal)]">
+                Desain yang elegan, namun kokoh untuk mempercepat kesiapan Anda menghadapi ujian.
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+              {/* Feature 1 */}
+              <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[24px] overflow-hidden group p-4">
+                <div className="h-56 w-full flex items-center justify-center p-2">
+                  <img src="/generateai.png" alt="AI Generator" className="h-full w-auto object-contain transform group-hover:scale-110 group-hover:rotate-3 transition-transform duration-500 drop-shadow-lg" />
+                </div>
+                <CardContent className="p-6">
+                  <h3 className="font-headline text-[32px] font-semibold text-[var(--clay-black)] tracking-[-0.64px] mb-3 leading-tight">
+                    AI Generator
+                  </h3>
+                  <p className="text-[var(--warm-charcoal)] text-lg leading-relaxed">
+                    Hasilkan soal latihan baru menggunakan AI. Tentukan topik, level kesulitan, dan format dalam hitungan detik.
+                  </p>
+                </CardContent>
+              </Card>
+
+              {/* Feature 2 */}
+              <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[24px] overflow-hidden group p-4">
+                <div className="h-56 w-full flex items-center justify-center p-2">
+                  <img src="/latihansoal.png" alt="Latihan Soal" className="h-full w-auto object-contain transform group-hover:scale-110 group-hover:-rotate-3 transition-transform duration-500 drop-shadow-lg" />
+                </div>
+                <CardContent className="p-6">
+                  <h3 className="font-headline text-[32px] font-semibold text-[var(--clay-black)] tracking-[-0.64px] mb-3 leading-tight">
+                    Latihan Terfokus
+                  </h3>
+                  <p className="text-[var(--warm-charcoal)] text-lg leading-relaxed">
+                    Akses ribuan soal latihan dari bank soal. Buat paket latihan Anda sendiri dan fokus pada area kelemahan.
+                  </p>
+                </CardContent>
+              </Card>
+
+              {/* Feature 3 */}
+              <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[24px] overflow-hidden group p-4">
+                <div className="h-56 w-full flex items-center justify-center p-2">
+                  <img src="/mocktest.png" alt="Mock Test" className="h-full w-auto object-contain transform group-hover:scale-110 group-hover:rotate-3 transition-transform duration-500 drop-shadow-lg" />
+                </div>
+                <CardContent className="p-6">
+                  <h3 className="font-headline text-[32px] font-semibold text-[var(--clay-black)] tracking-[-0.64px] mb-3 leading-tight">
+                    Simulasi Ujian
+                  </h3>
+                  <p className="text-[var(--warm-charcoal)] text-lg leading-relaxed">
+                    Simulasikan suasana ujian sesungguhnya dengan batas waktu, antarmuka imersif, dan penilaian instan.
+                  </p>
+                </CardContent>
+              </Card>
+
+              {/* Feature 4 */}
+              <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[24px] overflow-hidden group p-4">
+                <div className="h-56 w-full flex items-center justify-center p-2">
+                  <img src="/progress.png" alt="Progress Tracking" className="h-full w-auto object-contain transform group-hover:scale-110 group-hover:-rotate-3 transition-transform duration-500 drop-shadow-lg" />
+                </div>
+                <CardContent className="p-6">
+                  <h3 className="font-headline text-[32px] font-semibold text-[var(--clay-black)] tracking-[-0.64px] mb-3 leading-tight">
+                    Analitik Progres
+                  </h3>
+                  <p className="text-[var(--warm-charcoal)] text-lg leading-relaxed">
+                    Lacak perkembangan nilai Anda dari waktu ke waktu. Analisis mendalam untuk setiap bagian tes bahasa.
+                  </p>
+                </CardContent>
+              </Card>
+
+              {/* Feature 5 */}
+              <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[24px] overflow-hidden group p-4">
+                <div className="h-56 w-full flex items-center justify-center p-2">
+                  <img src="/vocabulary.png" alt="Vocabulary" className="h-full w-auto object-contain transform group-hover:scale-110 group-hover:rotate-3 transition-transform duration-500 drop-shadow-lg" />
+                </div>
+                <CardContent className="p-6">
+                  <h3 className="font-headline text-[32px] font-semibold text-[var(--clay-black)] tracking-[-0.64px] mb-3 leading-tight">
+                    Kosakata
+                  </h3>
+                  <p className="text-[var(--warm-charcoal)] text-lg leading-relaxed">
+                    Perkaya kosakata Anda dengan metode cerdas dan pengulangan berkala yang dioptimalkan.
+                  </p>
+                </CardContent>
+              </Card>
+
+              {/* Feature 6 */}
+              <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[24px] overflow-hidden group p-4">
+                <div className="h-56 w-full flex items-center justify-center p-2">
+                  <img src="/diskusi.png" alt="Diskusi" className="h-full w-auto object-contain transform group-hover:scale-110 group-hover:-rotate-3 transition-transform duration-500 drop-shadow-lg" />
+                </div>
+                <CardContent className="p-6">
+                  <h3 className="font-headline text-[32px] font-semibold text-[var(--clay-black)] tracking-[-0.64px] mb-3 leading-tight">
+                    Forum Diskusi
+                  </h3>
+                  <p className="text-[var(--warm-charcoal)] text-lg leading-relaxed">
+                    Diskusikan soal-soal sulit dengan komunitas pembelajar lainnya dan dapatkan penjelasan ahli.
+                  </p>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </section>
+
+        {/* SWATCH ROOM 1: Ube FAQ Section */}
+        <section className="w-full bg-[var(--ube-800)] py-32 rounded-t-[40px] mt-[-40px] z-10 relative shadow-[0_-10px_40px_rgba(0,0,0,0.1)] border-t-2 border-[var(--oat-border)]/20">
+          <div className="max-w-4xl mx-auto px-6 md:px-12 lg:px-16">
+            <div className="text-center mb-16">
+              <h2 className="text-[50px] md:text-[60px] font-headline font-semibold text-[var(--pure-white)] tracking-[-2.4px] mb-6 leading-tight drop-shadow-sm">
+                Pertanyaan Umum
+              </h2>
+              <p className="text-[var(--ube-300)] text-2xl max-w-2xl mx-auto">
+                Temukan jawaban cepat untuk pertanyaan seputar Labas.
+              </p>
+            </div>
+
+            <div className="bg-[var(--ube-900)]/40 backdrop-blur-sm border-2 border-[var(--ube-300)]/30 rounded-[32px] p-8 md:p-12 shadow-2xl">
+              <FaqItem 
+                isDark
+                question="Apa itu Labas?" 
+                answer="Labas adalah platform latihan ujian bahasa berbasis AI yang dirancang untuk membantu Anda berlatih dan menguasai bahasa asing melalui simulasi, bank soal interaktif, dan analitik performa." 
+              />
+              <FaqItem 
+                isDark
+                question="Bagaimana cara kerja AI Generator?" 
+                answer="Fitur AI Generator memungkinkan Anda membuat paket soal baru berdasarkan konteks atau topik tertentu. Anda cukup memasukkan teks acuan, dan AI Agent kami akan memproduksi soal secara otomatis." 
+              />
+              <FaqItem 
+                isDark
+                question="Apakah Labas sepenuhnya gratis?" 
+                answer="Platform Labas dapat digunakan secara gratis untuk fitur dasar. Untuk fitur generasi soal berbasis AI, kami menggunakan model Bring-Your-Own-Key (BYOK). Anda cukup memasukkan API Key OpenAI Anda." 
+              />
+              <FaqItem 
+                isDark
+                question="Bahasa apa saja yang didukung oleh Labas?" 
+                answer="Saat ini Labas mendukung latihan untuk berbagai ujian profisiensi bahasa populer seperti Bahasa Inggris (TOEFL, IELTS, TOEIC), Jepang (JLPT), Korea (TOPIK), dan banyak lagi." 
+              />
+            </div>
+          </div>
+        </section>
+
+        {/* SWATCH ROOM 2: Matcha CTA Section */}
+        <section className="w-full bg-[var(--matcha-800)] py-40 px-6 rounded-t-[40px] mt-[-40px] z-20 relative shadow-[0_-10px_40px_rgba(0,0,0,0.2)] border-t-2 border-[var(--matcha-600)]">
+          <div className="max-w-4xl mx-auto text-center space-y-12">
+            <h2 className="text-[60px] md:text-[80px] font-headline font-semibold text-[var(--pure-white)] tracking-[-3.2px] leading-[0.95] drop-shadow-md">
+              Siap Meningkatkan Skor Anda?
+            </h2>
+            <p className="text-2xl text-[var(--matcha-300)] max-w-2xl mx-auto">
+              Bergabung sekarang dan rasakan perbedaan belajar dengan teknologi yang berpusat pada perkembangan Anda.
+            </p>
+            <div className="pt-8">
+              <Link to="/login" className="inline-block">
+                <Button className="bg-[var(--pure-white)] text-[var(--clay-black)] hover:bg-[var(--oat-light)] rounded-[24px] h-[80px] px-14 text-2xl font-bold clay-shadow clay-hover">
+                  Daftar Sekarang - Gratis
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </section>
+      </main>
+
+      {/* Footer */}
+      <footer className="w-full bg-[var(--pure-white)] py-12 border-t-2 border-[var(--oat-border)] text-center relative z-30">
+        <p className="text-[var(--warm-charcoal)] font-semibold text-lg">
+          &copy; {new Date().getFullYear()} Labas. Didesain dengan penuh kehangatan.
+        </p>
+      </footer>
+    </div>
+  );
+}

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

@@ -0,0 +1,591 @@
+import { useState, useEffect, useCallback } from "react";
+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";
+import { Button } from "@labas/ui/components/button";
+import { Card, CardContent } from "@labas/ui/components/card";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@labas/ui/components/select";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { GettingStartedCard } from "@/components/GettingStartedCard";
+import { CalloutCard } from "@/components/bank/CalloutCard";
+import { PageTour, TourHelpButton } from "@/components/TourGuide";
+import type { Step } from "react-joyride";
+import { toast } from "sonner";
+import { getErrorMessage } from "@/lib/error-utils";
+import { EXAM_TYPES } from "@/lib/exam-constants";
+
+export const Route = createFileRoute("/packages")({
+  validateSearch: z.object({
+    tab: z.enum(["all", "mine"]).optional(),
+    search: z.string().optional(),
+    examType: z.string().optional(),
+    page: z.coerce.number().optional(),
+    visibility: z.enum(["all", "private", "public"]).optional(),
+  }).parse,
+  beforeLoad: async () => {
+    const session = await authClient.getSession();
+    if (!session.data) {
+      redirect({ to: "/login", throw: true });
+    }
+    return { session };
+  },
+});
+
+type Tab = "all" | "mine";
+
+export function PackagesComponent() {
+  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 visibilityFilter = search.visibility ?? "all";
+  const limit = 12;
+
+  const allQuery = useQuery(
+    trpc.package.list.queryOptions(
+      {
+        isPublic: true,
+        examTypeId: examType || undefined,
+        search: searchText || undefined,
+        limit,
+        offset: (page - 1) * limit,
+      },
+      { enabled: tab === "all" },
+    ),
+  );
+
+  const visibilityFilterParam = tab === "mine" && visibilityFilter !== "all"
+    ? { isPublic: visibilityFilter === "public" }
+    : {};
+
+  const mineQuery = useQuery(
+    trpc.package.myPackages.queryOptions(
+      {
+        search: searchText || undefined,
+        examTypeId: examType || undefined,
+        limit,
+        offset: (page - 1) * limit,
+        ...visibilityFilterParam,
+      },
+      { 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 bulkPublish = useMutation(
+    trpc.package.bulkPublish.mutationOptions({
+      onSuccess: (data) => {
+        query.refetch();
+        setBulkMode(false);
+        setSelectedIds(new Set());
+        if (data.skipped > 0) {
+          toast.success(
+            `${data.updated} paket dipublikasikan, ${data.skipped} dilewati`,
+            { description: "Beberapa paket bukan milikmu atau sudah tidak tersedia." },
+          );
+        } else {
+          toast.success(`${data.updated} paket berhasil dipublikasikan`);
+        }
+      },
+      onError: (err: unknown) => {
+        toast.error("Gagal mempublikasikan. Coba refresh dan pilih ulang paket.", { description: getErrorMessage(err) });
+      },
+    }),
+  );
+
+  // ── Bulk select ──
+  const [bulkMode, setBulkMode] = useState(false);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+
+  const toggleSelect = (id: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const clearSelection = () => setSelectedIds(new Set());
+  const selectAll = () => setSelectedIds(new Set(packages.map((p) => p.id)));
+
+  useEffect(() => {
+    setBulkMode(false);
+    setSelectedIds(new Set());
+  }, [tab, searchText, examType]);
+
+  const setTab = (newTab: Tab) => {
+    navigate({ search: { tab: newTab, search: "", examType: "", page: 1 } });
+  };
+
+  // ── Private callout state ──
+  const [calloutDismissed, setCalloutDismissed] = useState(
+    typeof window !== "undefined" && localStorage.getItem("labas-packages-private-callout-dismissed") === "true",
+  );
+  const privatePackages = packages.filter(
+    (p) => !p.isPublic && p.creatorUserId === userId,
+  );
+
+  const handleDismissCallout = () => {
+    localStorage.setItem("labas-packages-private-callout-dismissed", "true");
+    setCalloutDismissed(true);
+  };
+
+  const handlePublishAllPrivate = () => {
+    const ids = privatePackages.map((p) => p.id);
+    if (ids.length > 0) bulkPublish.mutate({ ids });
+  };
+
+  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 setVisibility = (value: "all" | "private" | "public") => {
+    navigate({ search: (prev) => ({ ...prev, visibility: value === "all" ? undefined : 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">
+        <div data-tour="packages-header" className="flex items-center justify-between">
+          <div>
+            <h1 className="text-4xl font-headline font-extrabold text-[var(--clay-black)] tracking-tight">
+              Paket Soal
+            </h1>
+            <p className="text-lg text-[var(--warm-charcoal)] mt-2">
+              Kumpulan paket latihan dari komunitas.
+            </p>
+          </div>
+          <Link to="/bank">
+            <Button className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)] h-11">
+              <MaterialIcon name="add" />
+              <span className="ml-2 hidden sm:inline">Buat Paket</span>
+            </Button>
+          </Link>
+        </div>
+      </section>
+
+      {/* Getting Started Guide */}
+      <GettingStartedCard />
+
+      {/* Tabs */}
+      <div className="flex gap-2 mb-6">
+        <button
+          onClick={() => setTab("all")}
+          className={`px-4 py-2 rounded-[var(--radius-lg)] text-sm font-semibold transition-all ${
+            tab === "all"
+              ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow"
+              : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] border-2 border-[var(--oat-border)] hover:bg-[var(--oat-light)]"
+          }`}
+        >
+          Semua Paket
+        </button>
+        <button
+          onClick={() => setTab("mine")}
+          className={`px-4 py-2 rounded-[var(--radius-lg)] text-sm font-semibold transition-all ${
+            tab === "mine"
+              ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow"
+              : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] border-2 border-[var(--oat-border)] hover:bg-[var(--oat-light)]"
+          }`}
+        >
+          Paket Saya
+        </button>
+      </div>
+
+      {/* Filters */}
+      <div data-tour="packages-filters" 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={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
+          value={examType}
+          onValueChange={(v: string | null) => setExamType(v ?? "")}
+        >
+          <SelectTrigger className="w-36">
+            <SelectValue placeholder="Semua Ujian" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem value="">Semua Ujian</SelectItem>
+              {EXAM_TYPES.map((t) => (
+                <SelectItem key={t.id} value={t.id}>{t.name}</SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        {tab === "mine" && (
+          <div className="flex gap-2">
+            <VisChip active={visibilityFilter === "all"} onClick={() => setVisibility("all")}>
+              <MaterialIcon name="visibility" className="text-xs" />
+              Semua
+            </VisChip>
+            <VisChip active={visibilityFilter === "private"} onClick={() => setVisibility("private")}>
+              <MaterialIcon name="lock" className="text-xs" />
+              Privat
+            </VisChip>
+            <VisChip active={visibilityFilter === "public"} onClick={() => setVisibility("public")}>
+              <MaterialIcon name="public" className="text-xs" />
+              Publik
+            </VisChip>
+          </div>
+        )}
+      </div>
+
+      {/* Bulk toolbar */}
+      {tab === "mine" && (
+        <div className="flex items-center justify-between mb-4 p-3 rounded-[var(--radius-lg)] bg-[var(--oat-light)] border-2 border-[var(--oat-border)]">
+          {bulkMode ? (
+            <>
+              <div className="flex items-center gap-3">
+                <button
+                  onClick={clearSelection}
+                  className="text-xs font-semibold text-[var(--warm-charcoal)] hover:text-[var(--clay-black)] transition-colors flex items-center gap-1"
+                >
+                  <MaterialIcon name="close" className="text-xs" />
+                  Batalkan ({selectedIds.size})
+                </button>
+                <button
+                  onClick={selectAll}
+                  className="text-xs font-semibold text-[var(--matcha-600)] hover:text-[var(--matcha-800)] transition-colors flex items-center gap-1"
+                >
+                  <MaterialIcon name="select_all" className="text-xs" />
+                  Pilih Semua
+                </button>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button
+                  size="lg"
+                  disabled={selectedIds.size === 0 || bulkPublish.isPending}
+                  onClick={() => bulkPublish.mutate({ ids: Array.from(selectedIds) })}
+                  className="rounded-[var(--radius-md)] bg-[var(--matcha-600)] text-[var(--pure-white)] hover:bg-[var(--matcha-800)]"
+                >
+                  <MaterialIcon name="public" className="text-xs mr-1" />
+                  {bulkPublish.isPending ? "Mempublikasikan..." : `Jadikan Publik (${selectedIds.size})`}
+                </Button>
+                <button
+                  onClick={() => { setBulkMode(false); setSelectedIds(new Set()); }}
+                  className="text-xs font-semibold text-[var(--warm-charcoal)] hover:text-[var(--clay-black)] transition-colors"
+                >
+                  Selesai
+                </button>
+              </div>
+            </>
+          ) : (
+            <>
+              <span className="text-sm text-[var(--warm-charcoal)]">{packages.length} paket</span>
+              <button
+                onClick={() => setBulkMode(true)}
+                className="text-xs font-semibold text-[var(--matcha-600)] hover:text-[var(--matcha-800)] transition-colors flex items-center gap-1"
+              >
+                <MaterialIcon name="select_all" className="text-sm" />
+                Pilih Banyak
+              </button>
+            </>
+          )}
+        </div>
+      )}
+
+      {/* Private package callout */}
+      {tab === "mine" && privatePackages.length > 0 && !calloutDismissed && (
+        <div className="mb-6">
+          <CalloutCard
+            privateCount={privatePackages.length}
+            onPublishAll={handlePublishAllPrivate}
+            onDismiss={handleDismissCallout}
+          />
+        </div>
+      )}
+
+      {/* Results */}
+      {query.isLoading ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <Card key={i} className="h-48 bg-[var(--oat-light)] animate-pulse rounded-[var(--radius-xl)]" />
+          ))}
+        </div>
+      ) : packages.length === 0 ? (
+        <div className="text-center py-16">
+          <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 mb-6">
+            {tab === "mine"
+              ? "Belum ada paket yang Anda buat. Buat paket dari Bank Soal."
+              : "Belum ada paket publik. Buat paket soal pertama Anda"}
+          </p>
+          <div className="flex items-center justify-center gap-3">
+            <Link to="/generate">
+              <Button className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] rounded-[var(--radius-lg)]">
+                <MaterialIcon name="auto_awesome" className="mr-2" />
+                Generate Soal
+              </Button>
+            </Link>
+            <Link to="/bank">
+              <Button variant="outline" className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)]">
+                <MaterialIcon name="add" className="mr-2" />
+                Buat Paket
+              </Button>
+            </Link>
+          </div>
+        </div>
+      ) : (
+        <>
+          <div data-tour="packages-list" className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {packages.map((pkg) => {
+              const isOwner = pkg.creatorUserId === userId;
+              const isSelected = selectedIds.has(pkg.id);
+              return (
+                <Card
+                  key={pkg.id}
+                  className={`clay-shadow clay-hover bg-[var(--pure-white)] border-2 rounded-[var(--radius-xl)] h-full flex flex-col ${
+                    bulkMode && isSelected
+                      ? "border-[var(--matcha-600)] ring-2 ring-[var(--matcha-400)]"
+                      : isOwner && !pkg.isPublic && !bulkMode
+                        ? "border-[var(--oat-border)] border-l-[var(--warm-charcoal)] border-l-4"
+                        : "border-[var(--oat-border)]"
+                  }`}
+                >
+                  <CardContent className="p-5 flex flex-col h-full">
+                    <div
+                      className="block flex-1 cursor-pointer"
+                      onClick={bulkMode ? () => toggleSelect(pkg.id) : undefined}
+                    >
+                      <Link
+                        to="/package/$id"
+                        params={{ id: pkg.id }}
+                        className={bulkMode ? "pointer-events-none" : ""}
+                      >
+                      <div className="flex items-start justify-between mb-3">
+                        <div className="flex gap-2 flex-wrap">
+                          {bulkMode && (
+                            <span className={`px-2 py-1 rounded-full text-[10px] font-semibold flex items-center gap-1 ${
+                              isSelected
+                                ? "bg-[var(--matcha-600)] text-[var(--pure-white)]"
+                                : "bg-[var(--oat-light)] text-[var(--warm-charcoal)]"
+                            }`}>
+                              <MaterialIcon name={isSelected ? "check_circle" : "radio_button_unchecked"} className="text-xs" />
+                              {isSelected ? "Terpilih" : "Pilih"}
+                            </span>
+                          )}
+                          <span className="inline-flex items-center px-2.5 py-1 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-xs font-semibold leading-none whitespace-nowrap">
+                            {pkg.examTypeName}
+                          </span>
+                          {isOwner && !bulkMode && (
+                            <span
+                              className={`px-2 py-1 rounded-full text-[10px] font-semibold flex items-center gap-1 ${
+                                pkg.isPublic
+                                  ? "bg-[var(--slushie-500)]/20 text-[var(--slushie-800)]"
+                                  : "bg-[var(--slushie-500)]/15 text-[var(--slushie-800)]"
+                              }`}
+                            >
+                              {!pkg.isPublic && <MaterialIcon name="lock" className="text-[10px]" />}
+                              {pkg.isPublic ? "Publik" : "Privat"}
+                            </span>
+                          )}
+                        </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>
+
+                      {pkg.description && (
+                        <p className="text-sm text-[var(--warm-charcoal)] line-clamp-2 mb-4">
+                          {pkg.description}
+                        </p>
+                      )}
+                      </Link>
+
+                      <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 && (
+                            <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>
+                    </div>
+
+                    {/* Owner actions */}
+                    {isOwner && !bulkMode && (
+                      <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}
+                          title={pkg.isPublic ? "Klik untuk jadikan privat" : "Klik untuk jadikan publik"}
+                          className={`text-xs font-semibold px-3 py-1.5 rounded-full transition-colors flex items-center gap-1 cursor-pointer ${
+                            pkg.isPublic
+                              ? "bg-[var(--matcha-300)] text-[var(--matcha-800)]"
+                              : "bg-[var(--slushie-500)]/15 text-[var(--slushie-800)]"
+                          }`}
+                        >
+                          {!pkg.isPublic && <MaterialIcon name="lock" className="text-xs" />}
+                          {pkg.isPublic ? "Publik" : "Privat"}
+                        </button>
+                        {pkg.isPublic && (
+                          <button
+                            onClick={() => {
+                              const url = `${window.location.origin}/package/${pkg.id}`;
+                            navigator.clipboard.writeText(url);
+                            toast.success("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>
+                    )}
+
+                    {!bulkMode && (
+                      <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 } })}
+                          size="xl"
+                        >
+                          <MaterialIcon name="play_arrow" className="mr-2" />
+                          Mulai Latihan
+                        </Button>
+                      </div>
+                    )}
+                  </CardContent>
+                </Card>
+              );
+            })}
+          </div>
+
+          {totalPages > 1 && (
+            <div className="flex items-center justify-center gap-2 mt-10">
+              <Button
+                variant="outline"
+                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} dari {totalPages}
+              </span>
+              <Button
+                variant="outline"
+                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" />
+              </Button>
+            </div>
+          )}
+        </>
+      )}
+
+      <PageTour storageKey={PACKAGES_TOUR_KEY} autoDelay={600} steps={packagesPageSteps} />
+      <TourHelpButton storageKey={PACKAGES_TOUR_KEY} />
+    </div>
+  );
+}
+
+// ── Packages page tour ──
+const PACKAGES_TOUR_KEY = "labas-page-tour-packages";
+const packagesPageSteps: Step[] = [
+  {
+    target: "[data-tour='packages-header']",
+    title: "Paket Soal",
+    content: "Temukan paket soal dari komunitas atau lihat paket buatan sendiri. Klik 'Buat Paket' untuk membuat paket baru dari Bank Soal.",
+    spotlightPadding: 8,
+  },
+  {
+    target: "[data-tour='packages-filters']",
+    title: "Filter & Pencarian",
+    content: "Cari paket berdasarkan nama atau filter berdasarkan jenis ujian (IELTS, TOEFL, dll). Bisa juga switch antara 'Semua Paket' dan 'Paket Saya'.",
+    spotlightPadding: 8,
+  },
+  {
+    target: "[data-tour='packages-list']",
+    title: "Mulai Latihan",
+    content: "Klik kartu paket untuk lihat detail, atau langsung klik 'Mulai Latihan' untuk mengerjakan soal. Pantau skor dan progres kamu!",
+    spotlightPadding: 8,
+  },
+];
+
+function VisChip({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
+  return (
+    <button
+      onClick={onClick}
+      className={`px-3 py-1.5 rounded-full text-xs font-semibold whitespace-nowrap transition-all flex items-center gap-1 cursor-pointer ${
+        active
+          ? "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)]"
+      }`}
+    >
+      {children}
+    </button>
+  );
+}

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

@@ -0,0 +1,351 @@
+import { useState, startTransition } from "react";
+import { createFileRoute, redirect, Link } from "@tanstack/react-router";
+import { useQuery } from "@tanstack/react-query";
+import { authClient } from "@/lib/auth-client";
+import { useApiKeys, type ApiKeyConfig } from "@/hooks/use-api-key";
+import { trpc } from "@/utils/trpc";
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+} from "@labas/ui/components/tabs";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@labas/ui/components/card";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { TokenUsageChart } from "@/components/settings/TokenUsageChart";
+import { ApiKeyList } from "@/components/settings/ApiKeyList";
+import { ApiKeyForm } from "@/components/settings/ApiKeyForm";
+import { TipsCard } from "@/components/settings/TipsCard";
+import { SecurityInfo } from "@/components/settings/SecurityInfo";
+import { AccountSettings } from "@/components/settings/AccountSettings";
+import { z } from "zod";
+
+export const Route = createFileRoute("/settings")({
+  validateSearch: z.object({
+    tab: z.enum(["api-keys", "token-usage", "security", "account"]).optional(),
+  }).parse,
+  beforeLoad: async () => {
+    const session = await authClient.getSession();
+    if (!session.data) {
+      redirect({ to: "/login", throw: true });
+    }
+    return { session };
+  },
+});
+
+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,
+  };
+}
+
+type Tab = "api-keys" | "token-usage" | "security" | "account";
+
+function TokenUsageSection() {
+  const { data, isLoading } = useQuery(trpc.ai.tokenUsageToday.queryOptions());
+
+  const totalTokens = data?.totalTokens ?? 0;
+  const jobs = data?.jobs ?? [];
+
+  return (
+    <div className="space-y-6">
+      <TokenUsageChart />
+
+      <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="toll" className="text-xl" />
+            <div>
+              <CardTitle className="font-headline text-[var(--clay-black)]">
+                Penggunaan Token Hari Ini
+              </CardTitle>
+              <CardDescription className="text-[var(--warm-charcoal)]">
+                Total token yang terpakai untuk generate soal hari ini.
+              </CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="flex items-center gap-4 p-4 bg-[var(--matcha-300)] rounded-[var(--radius-lg)]">
+            <MaterialIcon name="toll" className="text-3xl text-[var(--matcha-800)]" />
+            <div>
+              <p className="text-sm text-[var(--matcha-800)]/80">Total Token Terpakai</p>
+              <p className="text-3xl font-extrabold text-[var(--matcha-800)]">
+                {isLoading ? "..." : totalTokens.toLocaleString("id-ID")}
+              </p>
+            </div>
+          </div>
+
+          <div>
+            <h3 className="text-sm font-semibold text-[var(--clay-black)] mb-3">
+              Riwayat Generate Hari Ini
+            </h3>
+            {isLoading ? (
+              <div className="space-y-2">
+                {[1, 2, 3].map((i) => (
+                  <div key={i} className="h-12 bg-[var(--oat-light)] animate-pulse rounded-[var(--radius-lg)]" />
+                ))}
+              </div>
+            ) : jobs.length === 0 ? (
+              <div className="text-center py-8 border-2 border-dashed border-[var(--oat-border)] rounded-[var(--radius-lg)]">
+                <MaterialIcon name="receipt_long" className="text-4xl text-[var(--warm-silver)] mx-auto mb-3" />
+                <p className="text-[var(--warm-charcoal)] font-semibold">Belum ada generate hari ini</p>
+                <p className="text-xs text-[var(--warm-silver)] mt-1">
+                  Generate soal baru untuk melihat penggunaan token.
+                </p>
+              </div>
+            ) : (
+              <div className="overflow-x-auto">
+                <table className="w-full text-sm">
+                  <thead>
+                    <tr className="border-b border-[var(--oat-border)] text-[var(--warm-charcoal)]">
+                      <th className="text-left py-2 px-3 font-medium">Waktu</th>
+                      <th className="text-left py-2 px-3 font-medium">Mode</th>
+                      <th className="text-left py-2 px-3 font-medium">Status</th>
+                      <th className="text-left py-2 px-3 font-medium">Ujian</th>
+                      <th className="text-left py-2 px-3 font-medium">Section</th>
+                      <th className="text-right py-2 px-3 font-medium">Soal</th>
+                      <th className="text-right py-2 px-3 font-medium">Token</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {jobs.map((job) => {
+                      const isFailed = job.status === "failed";
+                      const isCancelled = job.status === "cancelled";
+                      return (
+                        <tr
+                          key={job.id}
+                          className={`border-b border-[var(--oat-border)] last:border-0 hover:bg-[var(--warm-cream)] transition-colors ${
+                            isFailed || isCancelled ? "opacity-70" : ""
+                          }`}
+                        >
+                          <td className="py-2.5 px-3 text-[var(--clay-black)] whitespace-nowrap">
+                            {new Date(job.createdAt).toLocaleTimeString("id-ID", {
+                              hour: "2-digit",
+                              minute: "2-digit",
+                            })}
+                          </td>
+                          <td className="py-2.5 px-3">
+                            <span
+                              className={`inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold ${
+                                job.mode === "agentic"
+                                  ? "bg-[var(--matcha-300)] text-[var(--matcha-800)]"
+                                  : "bg-[var(--lavender-300)] text-[var(--lavender-800)]"
+                              }`}
+                            >
+                              {job.mode === "agentic" ? "Agentic" : "Quick"}
+                            </span>
+                          </td>
+                          <td className="py-2.5 px-3">
+                            {job.status === "completed" ? (
+                              <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-[var(--matcha-800)]">
+                                <MaterialIcon name="check_circle" className="text-xs" />
+                                Selesai
+                              </span>
+                            ) : isFailed ? (
+                              <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-[var(--pomegranate-400)]">
+                                <MaterialIcon name="error" className="text-xs" />
+                                Gagal
+                              </span>
+                            ) : isCancelled ? (
+                              <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-[var(--warm-charcoal)]">
+                                <MaterialIcon name="cancel" className="text-xs" />
+                                Dibatalkan
+                              </span>
+                            ) : (
+                              <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-[var(--warm-silver)]">
+                                <MaterialIcon name="hourglass_empty" className="text-xs" />
+                                {job.status}
+                              </span>
+                            )}
+                          </td>
+                          <td className="py-2.5 px-3 text-[var(--clay-black)]">{job.examTypeId}</td>
+                          <td className="py-2.5 px-3 text-[var(--clay-black)]">{job.sectionTypeId}</td>
+                          <td className="py-2.5 px-3 text-right text-[var(--clay-black)]">{job.questionCount}</td>
+                          <td className="py-2.5 px-3 text-right text-[var(--clay-black)] font-medium">
+                            {job.tokensUsed?.toLocaleString("id-ID") ?? "-"}
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export function RouteComponent() {
+  const { configs, isLoading, addConfig, updateConfig, removeConfig } =
+    useApiKeys();
+
+  const search = Route.useSearch();
+  const navigate = Route.useNavigate();
+
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [isAdding, setIsAdding] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+
+  const activeTab: Tab = search.tab ?? "api-keys";
+
+  const setTab = (tab: string) => {
+    startTransition(() => {
+      navigate({ search: { tab: tab as Tab } });
+    });
+  };
+
+  const [form, setForm] = useState<Omit<ApiKeyConfig, "id"> & { apiKey: string }>(
+    () => ({
+      ...defaultConfig(),
+      apiKey: "",
+    }),
+  );
+
+  const resetForm = () => {
+    setForm({ ...defaultConfig(), apiKey: "" });
+  };
+
+  const handleFormChange = (field: keyof typeof form, value: string | number) => {
+    setForm((prev) => ({ ...prev, [field]: value }));
+  };
+
+  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: "",
+    });
+    setEditingId(config.id);
+    setIsAdding(false);
+  };
+
+  const cancelEdit = () => {
+    setEditingId(null);
+    setIsAdding(false);
+    resetForm();
+  };
+
+  const handleSave = async () => {
+    if (!form.name.trim()) return;
+    setIsSaving(true);
+    try {
+      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">
+        <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, pantau penggunaan token, dan preferensi akun.
+        </p>
+      </section>
+
+      <Tabs value={activeTab} onValueChange={setTab} className="w-full">
+        <TabsList variant="line" className="mb-6">
+          <TabsTrigger value="api-keys">API Keys</TabsTrigger>
+          <TabsTrigger value="token-usage">Token Usage</TabsTrigger>
+          <TabsTrigger value="account">Akun</TabsTrigger>
+          <TabsTrigger value="security">Keamanan</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="api-keys" className="space-y-8">
+          <div className="grid grid-cols-1 lg:grid-cols-12 gap-10">
+            <div className="lg:col-span-7 space-y-8">
+              <ApiKeyList
+                configs={configs}
+                isLoading={isLoading}
+                editingId={editingId}
+                isFormOpen={isFormOpen}
+                providers={PROVIDERS}
+                onStartAdd={startAdd}
+                onStartEdit={startEdit}
+                onRemove={removeConfig}
+              />
+
+              {isFormOpen && (
+                <ApiKeyForm
+                  isAdding={isAdding}
+                  isSaving={isSaving}
+                  form={form}
+                  canSave={canSave}
+                  providers={PROVIDERS}
+                  onChange={handleFormChange}
+                  onSave={handleSave}
+                  onCancel={cancelEdit}
+                />
+              )}
+            </div>
+
+            <div className="lg:col-span-5">
+              <TipsCard />
+            </div>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="token-usage">
+          <TokenUsageSection />
+        </TabsContent>
+
+        <TabsContent value="account">
+          <AccountSettings />
+        </TabsContent>
+
+        <TabsContent value="security">
+          <SecurityInfo />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

apps/web/src/routeTree.gen.ts

@@ -52,12 +52,12 @@ const SettingsRoute = SettingsRouteImport.update({
   id: '/settings',
   path: '/settings',
   getParentRoute: () => rootRouteImport,
-} as any)
+} as any).lazy(() => import('./routes/settings.lazy').then((d) => d.Route))
 const PackagesRoute = PackagesRouteImport.update({
   id: '/packages',
   path: '/packages',
   getParentRoute: () => rootRouteImport,
-} as any)
+} as any).lazy(() => import('./routes/packages.lazy').then((d) => d.Route))
 const MeRoute = MeRouteImport.update({
   id: '/me',
   path: '/me',
@@ -77,7 +77,7 @@ const LandingRoute = LandingRouteImport.update({
   id: '/landing',
   path: '/landing',
   getParentRoute: () => rootRouteImport,
-} as any)
+} as any).lazy(() => import('./routes/landing.lazy').then((d) => d.Route))
 const JobsRoute = JobsRouteImport.update({
   id: '/jobs',
   path: '/jobs',
@@ -92,7 +92,7 @@ const GenerateRoute = GenerateRouteImport.update({
   id: '/generate',
   path: '/generate',
   getParentRoute: () => rootRouteImport,
-} as any)
+} as any).lazy(() => import('./routes/generate.lazy').then((d) => d.Route))
 const ForgotPasswordRoute = ForgotPasswordRouteImport.update({
   id: '/forgot-password',
   path: '/forgot-password',
@@ -102,7 +102,7 @@ const BankRoute = BankRouteImport.update({
   id: '/bank',
   path: '/bank',
   getParentRoute: () => rootRouteImport,
-} as any)
+} as any).lazy(() => import('./routes/bank.lazy').then((d) => d.Route))
 const AnalyticsRoute = AnalyticsRouteImport.update({
   id: '/analytics',
   path: '/analytics',

apps/web/src/routes/bank.lazy.tsx

@@ -0,0 +1,6 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { BankComponent } from "@/components/routes/BankPage";
+
+export const Route = createLazyFileRoute("/bank")({
+  component: BankComponent,
+});

apps/web/src/routes/bank.tsx

@@ -1,30 +1,8 @@
-import { useState, useEffect } 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, queryClient } from "@/utils/trpc";
-import { EXAM_TYPES, SECTIONS } from "@/lib/exam-constants";
-import { formatLabel } from "@/lib/format";
-import { usePackageBuilder } from "@/hooks/use-package-builder";
-import { useLocalStorageBoolean } from "@/hooks/use-local-storage-boolean";
-import { AutoBundleModal } from "@/components/bank/AutoBundleModal";
-import { QuestionDetailModal } from "@/components/bank/QuestionDetailModal";
-import { MaterialIcon } from "@/components/ui/MaterialIcon";
-import { PageTour, TourHelpButton } from "@/components/TourGuide";
-import { FilterBar } from "@/components/bank/FilterBar";
-import { MobileFilterSheet } from "@/components/bank/MobileFilterSheet";
-import { AdvancedFilters } from "@/components/bank/AdvancedFilters";
-import { SoalBrowser } from "@/components/bank/SoalBrowser";
-import { SectionBrowser } from "@/components/bank/SectionBrowser";
-import { BundleSidebar } from "@/components/bank/BundleSidebar";
-import { toast } from "sonner";
-import type { Step } from "react-joyride";
-
-const FILTER_ADVANCED_KEY = "labas-bank-filter-advanced";
 
 export const Route = createFileRoute("/bank")({
-  component: BankComponent,
   validateSearch: z.object({
     mode: z.enum(["soal", "section"]).optional(),
     tab: z.enum(["mine", "public"]).optional(),
@@ -43,537 +21,3 @@ export const Route = createFileRoute("/bank")({
     return { session };
   },
 });
-
-type QuestionTab = "mine" | "public";
-type Mode = "soal" | "section";
-
-function BankComponent() {
-  const search = Route.useSearch();
-  const navigate = Route.useNavigate();
-  const { data: session } = authClient.useSession();
-  const userId = session?.user.id;
-
-  const mode: Mode = search.mode ?? "soal";
-  const tab: QuestionTab = search.tab ?? "public";
-  const searchText = search.search ?? "";
-  const examType = search.examType ?? "";
-  const section = search.section ?? "";
-  const format = search.format ?? "";
-  const difficulty = search.difficulty;
-  const visibilityFilter = search.visibility ?? "all";
-
-  // ── Infinite scroll state ──
-  const [allQuestions, setAllQuestions] = useState<any[]>([]);
-  const [offset, setOffset] = useState(0);
-  const limit = 12;
-  const filterKey = JSON.stringify({ searchText, examType, section, format, difficulty, tab, mode, visibility: visibilityFilter });
-
-  // ── Sidebar / Bundle State ──
-  const [bundleQuestions, setBundleQuestions] = useState<any[]>([]);
-  const [bundleSections, setBundleSections] = useState<any[]>([]);
-  const [bundleTitle, setBundleTitle] = useState("");
-  const [bundleDescription, setBundleDescription] = useState("");
-  const [bundleIsPublic, setBundleIsPublic] = useState(false);
-
-  // ── Modals ──
-  const [selectedQuestion, setSelectedQuestion] = useState<any | null>(null);
-  const [isAutoBundleOpen, setIsAutoBundleOpen] = useState(false);
-
-  // ── Filter UI State ──
-  const [isAdvancedOpen, setIsAdvancedOpen] = useLocalStorageBoolean(FILTER_ADVANCED_KEY, false);
-  const [isMobileSheetOpen, setIsMobileSheetOpen] = useState(false);
-
-  // ── Data Queries ──
-  const visibilityFilterParam = tab === "mine" && visibilityFilter !== "all"
-    ? { isPublic: visibilityFilter === "public" }
-    : {};
-
-  const questionQuery = useQuery(
-    trpc.question.list.queryOptions(
-      {
-        search: searchText || undefined,
-        examTypeId: examType || undefined,
-        sectionTypeId: section || undefined,
-        format: format || undefined,
-        difficulty,
-        ...(tab === "mine" && userId
-          ? { creatorUserId: userId, ...visibilityFilterParam }
-          : { isPublic: true }),
-        limit,
-        offset,
-      },
-      { enabled: mode === "soal" },
-    ),
-  );
-
-  // Reset offset when filters change
-  useEffect(() => {
-    setOffset(0);
-  }, [filterKey]);
-
-  // Append / replace questions when query data arrives
-  useEffect(() => {
-    const data = questionQuery.data;
-    if (!data) return;
-    if (offset === 0) {
-      setAllQuestions(data.questions ?? []);
-    } else {
-      setAllQuestions((prev) => {
-        const existingIds = new Set(prev.map((q: any) => q.id));
-        const newQs = (data.questions ?? []).filter((q: any) => !existingIds.has(q.id));
-        return [...prev, ...newQs];
-      });
-    }
-  }, [questionQuery.data]);
-
-  const totalQuestions = questionQuery.data?.total ?? 0;
-  const hasMore = offset + limit < totalQuestions;
-
-  const sectionQuery = useQuery(
-    trpc.combo.availableSections.queryOptions(
-      {
-        examTypeId: examType || undefined,
-        search: searchText || undefined,
-        limit: 50,
-        offset: 0,
-      },
-      { enabled: mode === "section" },
-    ),
-  );
-
-  // ── Mutations ──
-  const { isPending: isPackagePending, handleAutoBundle } = usePackageBuilder();
-
-  const createPackage = useMutation(trpc.package.create.mutationOptions());
-  const addSection = useMutation(trpc.package.addSection.mutationOptions());
-  const addQuestion = useMutation(trpc.package.addQuestion.mutationOptions());
-  const createCombo = useMutation(trpc.combo.create.mutationOptions());
-
-  const togglePublic = useMutation({
-    ...trpc.question.togglePublic.mutationOptions(),
-    onSuccess: () => questionQuery.refetch(),
-  });
-
-  const deleteQuestion = useMutation({
-    ...trpc.question.delete.mutationOptions(),
-    onSuccess: () => questionQuery.refetch(),
-  });
-
-  const bulkPublish = useMutation({
-    ...trpc.question.bulkPublish.mutationOptions(),
-    onSuccess: (data) => {
-      questionQuery.refetch();
-      if (data.skipped > 0) {
-        toast.success(
-          `${data.updated} soal dipublikasikan, ${data.skipped} dilewati`,
-          { description: "Beberapa soal bukan milikmu atau sudah tidak tersedia." },
-        );
-      } else {
-        toast.success(`${data.updated} soal berhasil dipublikasikan`);
-      }
-    },
-    onError: (err: any) => {
-      toast.error("Gagal mempublikasikan. Coba refresh dan pilih ulang soal.", { description: err.message });
-    },
-  });
-
-  // ── Navigation helpers ──
-  const setMode = (newMode: Mode) => {
-    navigate({
-      search: {
-        mode: newMode,
-        tab: newMode === "soal" ? "mine" : undefined,
-        search: "",
-        examType: "",
-        section: "",
-        format: "",
-        difficulty: undefined,
-      },
-    });
-    if (newMode === "soal") setBundleSections([]);
-    else setBundleQuestions([]);
-  };
-
-  const setSearch = (value: string) =>
-    navigate({ search: (prev) => ({ ...prev, search: value }) });
-
-  const setExamType = (value: string) =>
-    navigate({ search: (prev) => ({ ...prev, examType: value }) });
-
-  const setSection = (value: string) =>
-    navigate({ search: (prev) => ({ ...prev, section: value }) });
-
-  const setFormat = (value: string) =>
-    navigate({ search: (prev) => ({ ...prev, format: value }) });
-
-  const setDifficulty = (value: number | undefined) =>
-    navigate({ search: (prev) => ({ ...prev, difficulty: value }) });
-
-  const setVisibility = (value: "all" | "private" | "public") =>
-    navigate({ search: (prev) => ({ ...prev, visibility: value === "all" ? undefined : value }) });
-
-  const setTab = (newTab: QuestionTab) =>
-    navigate({
-      search: {
-        mode: "soal",
-        tab: newTab,
-        search: "",
-        examType: "",
-        section: "",
-        format: "",
-        difficulty: undefined,
-        visibility: undefined,
-      },
-    });
-
-  const clearFilters = () =>
-    navigate({
-      search: (prev) => ({
-        ...prev,
-        search: "",
-        examType: "",
-        section: "",
-        format: "",
-        difficulty: undefined,
-        visibility: undefined,
-      }),
-    });
-
-  const hasFilters =
-    !!searchText || !!examType || !!section || !!format || difficulty !== undefined;
-
-  // ── Active filter chips data ──
-  const activeChips = [
-    ...(examType ? [{ key: "examType", label: EXAM_TYPES.find((t) => t.id === examType)?.name ?? examType, onRemove: () => setExamType("") }] : []),
-    ...(section ? [{ key: "section", label: SECTIONS.find((s) => s.id === section)?.name ?? section, onRemove: () => setSection("") }] : []),
-    ...(format ? [{ key: "format", label: formatLabel(format), onRemove: () => setFormat("") }] : []),
-    ...(difficulty !== undefined ? [{ key: "difficulty", label: `Lv.${difficulty}`, onRemove: () => setDifficulty(undefined) }] : []),
-  ];
-
-  // ── Bundle helpers ──
-  const lockedExamType = bundleQuestions.length > 0 ? bundleQuestions[0]?.examTypeId : null;
-
-  const isQuestionInBundle = (qid: string) =>
-    bundleQuestions.some((q) => q.id === qid);
-
-  const isSectionInBundle = (sid: string) =>
-    bundleSections.some((s) => s.id === sid);
-
-  const toggleQuestion = (q: any) => {
-    if (lockedExamType && q.examTypeId !== lockedExamType) {
-      toast.error(`Hanya bisa memilih soal dari ${EXAM_TYPES.find((t) => t.id === lockedExamType)?.name ?? lockedExamType}`);
-      return;
-    }
-    setBundleQuestions((prev) => {
-      const exists = prev.find((x) => x.id === q.id);
-      if (exists) return prev.filter((x) => x.id !== q.id);
-      return [...prev, q];
-    });
-  };
-
-  const toggleSection = (s: any) => {
-    setBundleSections((prev) => {
-      const exists = prev.find((x) => x.id === s.id);
-      if (exists) return prev.filter((x) => x.id !== s.id);
-      return [...prev, s];
-    });
-  };
-
-  const removeFromBundle = (id: string, type: "question" | "section") => {
-    if (type === "question") {
-      setBundleQuestions((prev) => prev.filter((x) => x.id !== id));
-    } else {
-      setBundleSections((prev) => prev.filter((x) => x.id !== id));
-    }
-  };
-
-  // ── Create handlers ──
-  const handleCreateFromQuestions = async () => {
-    if (!bundleTitle || bundleQuestions.length === 0) return;
-    const first = bundleQuestions[0];
-    try {
-      const pkg = await createPackage.mutateAsync({
-        title: bundleTitle,
-        description: bundleDescription,
-        examTypeId: first?.examTypeId ?? "",
-        isPublic: bundleIsPublic,
-        estimatedDurationMin: bundleQuestions.length * 2,
-      });
-      const sec = await addSection.mutateAsync({
-        packageId: pkg.id,
-        sectionTypeId: first?.sectionTypeId ?? "READING",
-        title: `${first?.sectionTypeName ?? "Reading"} Section`,
-        orderIndex: 0,
-      });
-      for (let i = 0; i < bundleQuestions.length; i++) {
-        await addQuestion.mutateAsync({
-          sectionId: sec.id,
-          questionId: bundleQuestions[i].id,
-          orderIndex: i,
-        });
-      }
-      setBundleQuestions([]);
-      setBundleTitle("");
-      setBundleDescription("");
-    } catch (err: any) {
-      toast.error("Gagal membuat paket", { description: err.message });
-    }
-  };
-
-  const handleCreateFromSections = async () => {
-    if (!bundleTitle || bundleSections.length === 0) return;
-    try {
-      await createCombo.mutateAsync({
-        title: bundleTitle,
-        description: bundleDescription,
-        isPublic: bundleIsPublic,
-        sections: bundleSections.map((s, i) => ({
-          sourcePackageId: s.packageId,
-          sourceSectionId: s.id,
-          orderIndex: i,
-        })),
-      });
-      setBundleSections([]);
-      setBundleTitle("");
-      setBundleDescription("");
-      toast.success("Combo paket berhasil dibuat!");
-    } catch (err: any) {
-      toast.error("Gagal membuat combo", { description: err.message });
-    }
-  };
-
-  // ── Auto Bundle ──
-  const autoBundleExamType = examType || lockedExamType || null;
-  const autoBundleSectionType = section || null;
-
-  const onAutoBundle = async (data: {
-    title: string;
-    description: string;
-    isPublic: boolean;
-    count: number;
-    sortOrder: "random" | "difficulty";
-  }) => {
-    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,
-    });
-    setIsAutoBundleOpen(false);
-  };
-
-  // ── Render helpers ──
-  const questions = allQuestions;
-
-  const sections = sectionQuery.data?.sections ?? [];
-  const groupedSections = sections.reduce((groups: Record<string, any[]>, s: any) => {
-    const key = `${s.examTypeName ?? "Unknown"} — ${s.packageTitle ?? "Untitled"}`;
-    if (!groups[key]) groups[key] = [];
-    groups[key].push(s);
-    return groups;
-  }, {} as Record<string, any[]>);
-
-  const isCreating =
-    createPackage.isPending ||
-    addSection.isPending ||
-    addQuestion.isPending ||
-    createCombo.isPending;
-
-  return (
-    <div className="min-h-screen pb-32 bg-[var(--warm-cream)]">
-      <FilterBar
-        mode={mode}
-        tab={tab}
-        searchText={searchText}
-        examType={examType}
-        visibility={visibilityFilter}
-        activeChips={activeChips}
-        hasFilters={hasFilters}
-        isAdvancedOpen={isAdvancedOpen}
-        lockedExamType={lockedExamType}
-        dataTour="bank-filters"
-        onToggleAdvanced={() => setIsAdvancedOpen((v) => !v)}
-        onSetMode={setMode}
-        onSetTab={setTab}
-        onSetSearch={setSearch}
-        onSetExamType={setExamType}
-        onSetVisibility={setVisibility}
-        onClearFilters={clearFilters}
-        onOpenMobileSheet={() => setIsMobileSheetOpen(true)}
-        advancedFilters={
-          <AdvancedFilters
-            section={section}
-            format={format}
-            difficulty={difficulty}
-            onSetSection={setSection}
-            onSetFormat={setFormat}
-            onSetDifficulty={setDifficulty}
-          />
-        }
-      />
-
-      <div className="px-6 md:px-12 lg:px-16 max-w-7xl mx-auto pt-6">
-        <section className="mb-8">
-          <h1 className="text-4xl font-headline font-extrabold text-[var(--clay-black)] tracking-tight">
-            Buat Paket
-          </h1>
-          <p className="text-lg text-[var(--warm-charcoal)] mt-2">
-            Pilih soal atau section untuk dibuatkan paket latihan.
-          </p>
-          <div className="mt-3 flex flex-wrap gap-3 text-sm text-[var(--warm-charcoal)]">
-            <span className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[var(--matcha-300)]/30 text-[var(--matcha-800)] font-medium">
-              <MaterialIcon name="auto_awesome" className="text-sm" />
-              Auto Bundle — biarkan AI pilihkan soal otomatis
-            </span>
-            <span className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[var(--slushie-500)]/20 text-[var(--slushie-800)] font-medium">
-              <MaterialIcon name="touch_app" className="text-sm" />
-              Manual — pilih sendiri soal satu per satu
-            </span>
-          </div>
-        </section>
-
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
-          <div data-tour="bank-questions" className="lg:col-span-8">
-            {mode === "soal" ? (
-              <SoalBrowser
-                isLoading={questionQuery.isLoading}
-                questions={questions}
-                hasMore={hasMore}
-                isFetchingNextPage={questionQuery.isFetching}
-                onLoadMore={() => setOffset((prev) => prev + limit)}
-                hasFilters={hasFilters}
-                userId={userId}
-                lockedExamType={lockedExamType}
-                tab={tab}
-                filterKey={filterKey}
-                isQuestionInBundle={isQuestionInBundle}
-                onToggleQuestion={toggleQuestion}
-                onOpenDetail={setSelectedQuestion}
-                onTogglePublic={(id) => togglePublic.mutate({ id })}
-                onDelete={(id) => {
-                  if (confirm("Yakin mau hapus soal ini?")) deleteQuestion.mutate({ id });
-                }}
-                onClearFilters={clearFilters}
-                onBulkPublish={(ids) => bulkPublish.mutate({ ids })}
-                onPublishAllPrivate={(ids) => bulkPublish.mutate({ ids })}
-              />
-            ) : (
-              <SectionBrowser
-                isLoading={sectionQuery.isLoading}
-                groupedSections={groupedSections}
-                isSectionInBundle={isSectionInBundle}
-                onToggleSection={toggleSection}
-              />
-            )}
-          </div>
-
-          <BundleSidebar
-            mode={mode}
-            bundleQuestions={bundleQuestions}
-            bundleSections={bundleSections}
-            bundleTitle={bundleTitle}
-            bundleDescription={bundleDescription}
-            bundleIsPublic={bundleIsPublic}
-            isCreating={isCreating}
-            autoBundleExamType={autoBundleExamType}
-            lockedExamType={lockedExamType}
-            onSetTitle={setBundleTitle}
-            onSetDescription={setBundleDescription}
-            onSetIsPublic={setBundleIsPublic}
-            onRemoveFromBundle={removeFromBundle}
-            onCreateFromQuestions={handleCreateFromQuestions}
-            onCreateFromSections={handleCreateFromSections}
-            onOpenAutoBundle={() => setIsAutoBundleOpen(true)}
-          />
-        </div>
-      </div>
-
-      <MobileFilterSheet
-        open={isMobileSheetOpen}
-        onOpenChange={setIsMobileSheetOpen}
-        section={section}
-        format={format}
-        difficulty={difficulty}
-        activeChips={activeChips}
-        onSetSection={setSection}
-        onSetFormat={setFormat}
-        onSetDifficulty={setDifficulty}
-        onClearFilters={clearFilters}
-      />
-
-      {selectedQuestion && (
-        <QuestionDetailModal
-          question={selectedQuestion}
-          onClose={() => setSelectedQuestion(null)}
-          isSelected={isQuestionInBundle(selectedQuestion.id)}
-          onToggleSelect={() => toggleQuestion(selectedQuestion)}
-          isSelectable={true}
-        />
-      )}
-
-      {isAutoBundleOpen && autoBundleExamType && (
-        <AutoBundleModal
-          availableCount={totalQuestions}
-          examTypeName={EXAM_TYPES.find((t) => t.id === autoBundleExamType)?.name ?? autoBundleExamType}
-          sectionTypeName={SECTIONS.find((s) => s.id === autoBundleSectionType)?.name ?? "Reading"}
-          onClose={() => setIsAutoBundleOpen(false)}
-          onCreate={onAutoBundle}
-          isPending={isPackagePending}
-        />
-      )}
-
-      <PageTour
-        storageKey={BANK_TOUR_KEY}
-        autoDelay={600}
-        steps={bankPageSteps}
-      />
-      <TourHelpButton storageKey={BANK_TOUR_KEY} />
-    </div>
-  );
-}
-
-// ── Bank page tour ──
-const BANK_TOUR_KEY = "labas-page-tour-bank";
-const bankPageSteps: Step[] = [
-  {
-    target: "[data-tour='bank-filters']",
-    title: "Filter & Mode",
-    content: "Pilih mode 'Dari Soal' untuk pilih soal satu per satu, atau 'Dari Section' untuk gabung section dari paket yang sudah ada. Filter juga berdasarkan exam type dan kata kunci.",
-    spotlightPadding: 8,
-  },
-  {
-    target: "[data-tour='bank-questions']",
-    title: "Daftar Soal",
-    content: "Semua soal yang sesuai filter ditampilkan di sini. Klik soal untuk melihat detail, atau centang untuk menambahkannya ke paket.",
-    spotlightPadding: 8,
-  },
-  {
-    target: "[data-tour='bank-sidebar']",
-    title: "Sidebar Paket",
-    content: "Soal yang dipilih muncul di sini. Atur judul, deskripsi, dan visibilitas paket. Klik 'Auto Bundle' untuk isi otomatis, atau 'Buat Paket' untuk simpan.",
-    spotlightPadding: 8,
-  },
-];

apps/web/src/routes/generate.lazy.tsx

@@ -0,0 +1,6 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { RouteComponent } from "@/components/routes/GeneratePage";
+
+export const Route = createLazyFileRoute("/generate")({
+  component: RouteComponent,
+});

apps/web/src/routes/generate.tsx

@@ -1,38 +1,7 @@
-import { useState, useEffect, useRef } from "react";
-import { useMutation, useQuery } from "@tanstack/react-query";
-import { createFileRoute, redirect, Link } from "@tanstack/react-router";
+import { createFileRoute, redirect } from "@tanstack/react-router";
 import { authClient } from "@/lib/auth-client";
-import { trpc } from "@/utils/trpc";
-import { useApiKeys } from "@/hooks/use-api-key";
-import { useGenerationJobs, type CompletedResult } from "@/hooks/use-generation-jobs";
-import { Button } from "@labas/ui/components/button";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@labas/ui/components/select";
-import { MaterialIcon } from "@/components/ui/MaterialIcon";
-import { TestBlueprintCard } from "@/components/generate/TestBlueprintCard";
-import { ResultSection } from "@/components/generate/ResultSection";
-import { PageTour, TourHelpButton } from "@/components/TourGuide";
-import {
-  EXAM_TYPES,
-  SECTIONS,
-  FORMATS,
-  TOPICS,
-  DIFFICULTIES,
-  QUESTION_COUNT_PRESETS,
-} from "@/lib/generate-constants";
-import { getDifficultyLabel } from "@/lib/difficulty-mapping";
-import "flag-icons/css/flag-icons.min.css";
-import type { Step } from "react-joyride";
-
-const MAX_PARALLEL = 3;
 
 export const Route = createFileRoute("/generate")({
-  component: RouteComponent,
   beforeLoad: async () => {
     const session = await authClient.getSession();
     if (!session.data) {
@@ -41,740 +10,3 @@ export const Route = createFileRoute("/generate")({
     return { session };
   },
 });
-
-function RouteComponent() {
-  const { configs, hasConfigs } = useApiKeys();
-
-  const [selectedKeyId, setSelectedKeyId] = useState<string>(
-    configs[0]?.id ?? "",
-  );
-
-  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 [useFreeCredits, setUseFreeCredits] = useState(false);
-
-  const myCredit = useQuery(
-    trpc.admin.getMyCredit.queryOptions(),
-  );
-  const hasFreeCredits = myCredit.data?.freeCreditsEnabled === true;
-  const tokenBalance = myCredit.data?.tokenBalance ?? 0;
-
-  const {
-    activeCount,
-    completedResults,
-    isGenerating,
-    error,
-    addJob,
-    removeJob,
-    resetAll,
-    setError,
-  } = useGenerationJobs();
-
-  const [activeTabIdx, setActiveTabIdx] = useState(0);
-  const prevResultsLengthRef = useRef(0);
-
-  // Auto-scroll to results when they appear
-  const resultsRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    if (completedResults.length > 0 && resultsRef.current) {
-      resultsRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
-    }
-  }, [completedResults.length]);
-
-  useEffect(() => {
-    const prev = prevResultsLengthRef.current;
-    prevResultsLengthRef.current = completedResults.length;
-
-    if (completedResults.length === 0) {
-      setActiveTabIdx(0);
-      return;
-    }
-
-    if (completedResults.length > prev) {
-      setActiveTabIdx(completedResults.length - 1);
-      return;
-    }
-
-    if (activeTabIdx >= completedResults.length) {
-      setActiveTabIdx(completedResults.length - 1);
-    }
-  }, [completedResults.length]);
-
-  const [examType, setExamType] = useState("IELTS");
-  const [selectedSections, setSelectedSections] = useState<string[]>(["READING"]);
-  const [selectedFormats, setSelectedFormats] = useState<string[]>(["multiple_choice"]);
-  const [difficulty, setDifficulty] = useState(2);
-  const [selectedTopics, setSelectedTopics] = useState<string[]>(["Science & Tech"]);
-  const [questionCount, setQuestionCount] = useState(5);
-  const [weaknessAlign, setWeaknessAlign] = useState(75);
-  const [mode, setMode] = useState<"quick" | "agentic">("quick");
-
-  const isReadingAndWriting = selectedSections.includes("READING") && selectedSections.includes("WRITING");
-
-  useEffect(() => {
-    setSelectedFormats((prev) => {
-      const valid = prev.filter((f) =>
-        FORMATS.find((fmt) => fmt.id === f)?.allowedExams.includes(examType),
-      );
-      if (valid.length === 0) {
-        return ["multiple_choice"];
-      }
-      return valid;
-    });
-  }, [examType]);
-
-  useEffect(() => {
-    if (isReadingAndWriting) {
-      if (questionCount < 20) setQuestionCount(20);
-      if (mode === "quick") setMode("agentic");
-    }
-  }, [isReadingAndWriting]);
-
-  const generate = useMutation({
-    ...trpc.ai.generate.mutationOptions(),
-    onSuccess: (data) => {
-      addJob(data.jobId);
-      setError(null);
-    },
-    onError: (err) => {
-      setError(err.message);
-    },
-  });
-
-  const toggleSection = (id: string) => {
-    setSelectedSections((prev) => {
-      if (prev.includes(id)) {
-        if (prev.length === 1) return prev;
-        return prev.filter((s) => s !== id);
-      }
-      return [...prev, id];
-    });
-  };
-
-  const toggleFormat = (id: string) => {
-    setSelectedFormats((prev) =>
-      prev.includes(id) ? prev.filter((f) => f !== id) : [...prev, id],
-    );
-  };
-
-  const toggleTopic = (topic: string) => {
-    setSelectedTopics((prev) =>
-      prev.includes(topic) ? prev.filter((t) => t !== topic) : [...prev, topic],
-    );
-  };
-
-  const handleGenerate = () => {
-    if (!useFreeCredits && (!hasConfigs || !selectedConfig)) {
-      setError("API key belum dikonfigurasi. Tambahkan di Settings atau gunakan kredit gratis.");
-      return;
-    }
-    if (selectedSections.length === 0) {
-      setError("Pilih minimal 1 section.");
-      return;
-    }
-    if (selectedFormats.length === 0) {
-      setError("Pilih minimal 1 format soal.");
-      return;
-    }
-
-    const apiKeyConfig = useFreeCredits
-      ? undefined
-      : {
-          baseUrl: selectedConfig!.baseUrl,
-          apiKey: selectedConfig!.apiKey,
-          model: selectedConfig!.modelName,
-          maxTokens: selectedConfig!.maxTokens ?? 16384,
-        };
-
-    generate.mutate({
-      examType: examType as any,
-      section: selectedSections[0] as any,
-      selectedSections: selectedSections as any,
-      formats: selectedFormats as any,
-      difficulty: difficulty + 1,
-      topics: selectedTopics,
-      questionCount,
-      mode,
-      apiKeyConfig,
-    } as any);
-  };
-
-  const sectionSplits = (() => {
-    if (mode !== "agentic" || questionCount < 20 || selectedSections.length <= 1) return null;
-    const base = Math.floor(questionCount / selectedSections.length);
-    const rem = questionCount % selectedSections.length;
-    return selectedSections.map((s, i) => ({ section: s, count: base + (i < rem ? 1 : 0) }));
-  })();
-
-  const activeResult = completedResults[activeTabIdx] ?? null;
-
-  return (
-    <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-7xl mx-auto bg-[var(--warm-cream)]">
-      {/* Header */}
-      <section className="flex flex-col gap-2 relative mb-10">
-        <div className="absolute -left-8 -top-8 w-64 h-64 ai-glow pointer-events-none opacity-50" />
-        <h1 className="text-4xl md:text-5xl font-headline font-extrabold text-[var(--clay-black)] tracking-tight">
-          AI Exam Generator
-        </h1>
-        <p className="text-lg text-[var(--warm-charcoal)] max-w-2xl leading-relaxed">
-          Generate soal latihan dengan AI. Pilih exam, section, format, dan topik — sisanya AI yang kerjakan.
-        </p>
-        <div className="mt-4 flex flex-wrap gap-3 text-sm text-[var(--warm-charcoal)]">
-          <span className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[var(--matcha-300)]/30 text-[var(--matcha-800)] font-medium">
-            <MaterialIcon name="looks_one" className="text-sm" />
-            Pilih exam &amp; section
-          </span>
-          <span className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[var(--slushie-500)]/20 text-[var(--slushie-800)] font-medium">
-            <MaterialIcon name="looks_two" className="text-sm" />
-            Atur jumlah &amp; format
-          </span>
-          <span className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[var(--lemon-400)]/30 text-[var(--lemon-800)] font-medium">
-            <MaterialIcon name="looks_3" className="text-sm" />
-            Generate &amp; simpan
-          </span>
-          <span className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[var(--clay-black)]/10 text-[var(--clay-black)] font-medium">
-            <MaterialIcon name="looks_4" className="text-sm" />
-            Buat paket dari Bank Soal
-          </span>
-        </div>
-      </section>
-
-      {!hasConfigs && !useFreeCredits && !hasFreeCredits && (
-        <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>
-          <Link to="/settings" className="font-semibold underline">
-            Tambahkan di Settings →
-          </Link>
-        </div>
-      )}
-
-      {!hasConfigs && !useFreeCredits && hasFreeCredits && (
-        <div className="mb-8 p-4 rounded-[var(--radius-lg)] bg-[var(--matcha-300)]/30 text-[var(--matcha-800)] text-sm flex items-center gap-3 border-2 border-[var(--matcha-400)]">
-          <MaterialIcon name="tips_and_updates" />
-          <span>Belum ada API key. Kamu bisa pakai Free Credits!</span>
-          <button onClick={() => setUseFreeCredits(true)} className="font-semibold underline">
-            Gunakan Free Credits →
-          </button>
-        </div>
-      )}
-
-      <div className="mb-8 p-5 rounded-[var(--radius-xl)] bg-[var(--pure-white)] border-2 border-[var(--oat-border)]">
-        <div className="flex items-center justify-between mb-3">
-          <label className="text-sm font-medium text-[var(--clay-black)]">Generation Mode</label>
-        </div>
-        <div className="flex items-center gap-4">
-          <button
-            onClick={() => { setUseFreeCredits(false); }}
-            className={`flex items-center gap-2 px-4 py-2.5 rounded-[var(--radius-lg)] text-sm font-medium transition-all ${
-              !useFreeCredits
-                ? "bg-[var(--clay-black)] text-[var(--pure-white)]"
-                : "bg-[var(--oat-light)] text-[var(--warm-charcoal)] hover:bg-[var(--oat-border)]"
-            }`}
-          >
-            <MaterialIcon name="vpn_key" className="text-sm" />
-            BYOK
-          </button>
-          {hasFreeCredits && (
-            <button
-              onClick={() => { setUseFreeCredits(true); }}
-              className={`flex items-center gap-2 px-4 py-2.5 rounded-[var(--radius-lg)] text-sm font-medium transition-all ${
-                useFreeCredits
-                  ? "bg-[var(--clay-black)] text-[var(--pure-white)]"
-                  : "bg-[var(--oat-light)] text-[var(--warm-charcoal)] hover:bg-[var(--oat-border)]"
-              }`}
-            >
-              <MaterialIcon name="stars" className="text-sm" />
-              Free Credits
-            </button>
-          )}
-          {useFreeCredits && (
-            <Link to="/settings" className="text-xs text-[var(--matcha-600)] underline ml-2">
-              Atur BYOK di Settings
-            </Link>
-          )}
-        </div>
-
-        {useFreeCredits && myCredit.data && (
-          <div className="mt-4 pt-4 border-t border-[var(--oat-border)] space-y-2">
-            <div className="flex items-center justify-between">
-              <span className="text-sm text-[var(--warm-charcoal)]">Token kamu</span>
-              <span className={`text-lg font-headline font-bold ${tokenBalance > 0 ? "text-[var(--clay-black)]" : "text-[var(--clay-red)]"}`}>
-                {tokenBalance.toLocaleString()}
-              </span>
-            </div>
-            {tokenBalance > 0 && (
-              <div className="w-full h-2 bg-[var(--oat-border)] rounded-full overflow-hidden">
-                <div
-                  className="h-full bg-[var(--matcha-500)] rounded-full transition-all"
-                  style={{ width: `${Math.min(100, (tokenBalance / 50000) * 100)}%` }}
-                />
-              </div>
-            )}
-            {myCredit.data.cooldownRemaining > 0 && (
-              <p className="flex items-center gap-1.5 text-xs text-[var(--sunbeam-800)] bg-[var(--sunbeam-300)]/30 px-3 py-1.5 rounded-[var(--radius-md)]">
-                <MaterialIcon name="schedule" className="text-base leading-none shrink-0" />
-                <span>
-                  Cooldown: {myCredit.data.cooldownRemaining} hari lagi untuk auto-refill.
-                </span>
-              </p>
-            )}
-            {tokenBalance <= 0 && myCredit.data.cooldownRemaining === 0 && (
-              <p className="text-xs text-[var(--matcha-700)] bg-[var(--matcha-300)]/30 px-3 py-1.5 rounded-[var(--radius-md)]">
-                Token habis. Auto-refill tersedia saat kamu generate.
-              </p>
-            )}
-            {tokenBalance <= 0 && myCredit.data.cooldownRemaining > 0 && (
-              <p className="text-xs text-[var(--clay-red)]/80 bg-[var(--clay-red)]/5 px-3 py-1.5 rounded-[var(--radius-md)]">
-                Token habis & dalam cooldown. Gunakan BYOK atau tunggu {myCredit.data.cooldownRemaining} hari.
-              </p>
-            )}
-          </div>
-        )}
-
-        {!useFreeCredits && hasConfigs && (
-          <div className="mt-4 pt-4 border-t 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} onValueChange={(v) => v && setSelectedKeyId(v)}>
-                <SelectTrigger className="flex-1 h-11">
-                  <SelectValue>
-                    {selectedConfig ? `${selectedConfig.name} · ${selectedConfig.modelName}` : "Pilih provider..."}
-                  </SelectValue>
-                </SelectTrigger>
-                <SelectContent>
-                  {configs.map((c) => (
-                    <SelectItem key={c.id} value={c.id}>
-                      {c.name} · {c.modelName}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <Link to="/settings">
-                <Button variant="outline" size="xl" className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover">
-                  <MaterialIcon name="settings" className="mr-1" />
-                  Kelola
-                </Button>
-              </Link>
-            </div>
-          </div>
-        )}
-
-        {!useFreeCredits && !hasConfigs && !hasFreeCredits && (
-          <p className="mt-3 text-xs text-[var(--warm-charcoal)]">
-            Tambahkan API key di Settings dahulu.
-          </p>
-        )}
-
-        {!useFreeCredits && !hasConfigs && hasFreeCredits && (
-          <p className="mt-3 text-xs text-[var(--warm-charcoal)]">
-            Belum ada API key?{" "}
-            <button onClick={() => setUseFreeCredits(true)} className="text-[var(--matcha-600)] underline">
-              Gunakan kredit gratis
-            </button>
-            {" "}atau tambah di Settings.
-          </p>
-        )}
-
-        {useFreeCredits && !hasFreeCredits && (
-          <p className="mt-3 text-xs text-[var(--warm-charcoal)]">
-            Free credits sedang dinonaktifkan oleh admin.
-          </p>
-        )}
-      </div>
-
-      <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-start">
-        {/* Configuration Panel */}
-        <div className="lg:col-span-8 flex flex-col gap-10">
-
-          {/* Exam Type */}
-          <div data-tour="generate-exam-type" className="flex flex-col gap-4">
-            <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Jenis Ujian</label>
-            <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
-              {EXAM_TYPES.map((t) => (
-                <button
-                  key={t.id}
-                  onClick={() => setExamType(t.id)}
-                  className={`flex items-center gap-3 py-4 px-4 rounded-[var(--radius-lg)] border-2 transition-all text-sm font-semibold clay-hover min-h-[56px] ${
-                    examType === t.id
-                      ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow border-[var(--clay-black)]"
-                      : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] border-[var(--oat-border)]"
-                  }`}
-                >
-                  <span className={`fi fi-${t.code} w-6 h-4 rounded-sm shadow-sm shrink-0`} />
-                  {t.name}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          {/* Section Selection — Multi-select */}
-          <div data-tour="generate-section" className="flex flex-col gap-4">
-            <div className="flex items-center justify-between">
-              <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Section</label>
-              <span className="text-xs text-[var(--warm-charcoal)]">
-                {selectedSections.length} dipilih
-              </span>
-            </div>
-            <div className="flex flex-wrap gap-3">
-              {SECTIONS.map((s) => {
-                const isSelected = selectedSections.includes(s.id);
-                return (
-                  <button
-                    key={s.id}
-                    onClick={() => toggleSection(s.id)}
-                    className={`flex items-center gap-2.5 px-5 py-3 rounded-[var(--radius-lg)] border-2 transition-all text-sm font-semibold clay-hover min-h-[52px] ${
-                      isSelected
-                        ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow border-[var(--clay-black)]"
-                        : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] border-[var(--oat-border)]"
-                    }`}
-                  >
-                    <MaterialIcon
-                      name={isSelected ? "check_circle" : s.icon}
-                      className={`text-base shrink-0 ${isSelected ? "text-[var(--matcha-400)]" : ""}`}
-                    />
-                    {s.name}
-                  </button>
-                );
-              })}
-            </div>
-            {selectedSections.length > 1 && (
-              <p className="text-xs text-[var(--matcha-800)] bg-[var(--matcha-300)]/30 px-3 py-2 rounded-[var(--radius-md)]">
-                <MaterialIcon name="tips_and_updates" className="text-xs mr-1 inline" />
-                Kamu memilih {selectedSections.length} section. Mode Agentic dengan ≥20 soal akan otomatis membagi soal ke section yang dipilih.
-              </p>
-            )}
-          </div>
-
-          {/* Question Count */}
-          <div data-tour="generate-count" className="flex flex-col gap-4">
-            <label className="font-headline text-xl font-bold text-[var(--clay-black)]">
-              Jumlah Soal
-              <span className="ml-2 text-sm font-normal text-[var(--warm-charcoal)]">{questionCount} soal</span>
-            </label>
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
-              {QUESTION_COUNT_PRESETS.map((p) => {
-                const isDisabled = isReadingAndWriting && (p.value === 5 || p.value === 10);
-                return (
-                <button
-                  key={p.value}
-                  onClick={() => setQuestionCount(p.value)}
-                  disabled={isDisabled}
-                  className={`py-4 px-2 rounded-[var(--radius-lg)] text-sm font-semibold transition-all clay-hover flex flex-col items-center gap-1 min-h-[72px] ${
-                    isDisabled
-                      ? "bg-[var(--oat-light)] text-[var(--warm-silver)] cursor-not-allowed opacity-50 border-2 border-[var(--oat-border)]"
-                      : questionCount === p.value
-                        ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow"
-                        : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] border-2 border-[var(--oat-border)]"
-                  }`}
-                >
-                  <span>{p.label}</span>
-                  <span className={`text-xs ${questionCount === p.value ? "text-[var(--pure-white)]/70" : "text-[var(--warm-charcoal)]/70"}`}>{p.desc}</span>
-                </button>
-              );
-              })}
-            </div>
-            <div className="flex items-center gap-3 mt-1">
-              <span className="text-xs font-medium text-[var(--warm-charcoal)] whitespace-nowrap">Custom:</span>
-              <input
-                type="range"
-                min={isReadingAndWriting ? 20 : 1}
-                max={40}
-                value={questionCount}
-                onChange={(e) => setQuestionCount(Number(e.target.value))}
-                className="w-full h-2 bg-[var(--warm-silver)] rounded-full appearance-none cursor-pointer accent-[var(--clay-black)]"
-              />
-              <span className="text-xs font-bold text-[var(--clay-black)] w-6 text-right">{questionCount}</span>
-            </div>
-
-            {/* Auto Multi-Section Preview */}
-            {sectionSplits && (
-              <div className="mt-2 p-4 rounded-[var(--radius-lg)] bg-[var(--matcha-300)]/30 border border-[var(--matcha-400)]">
-                <div className="flex items-center gap-2 mb-2 text-[var(--matcha-800)] font-semibold text-sm">
-                  <MaterialIcon name="auto_awesome" className="text-xs" />
-                  Auto Multi-Section
-                </div>
-                <p className="text-[var(--matcha-800)]/80 text-xs mb-3">
-                  Mode Agentic dengan {questionCount} soal akan dibagi ke {sectionSplits.length} section:
-                </p>
-                <div className="flex flex-wrap gap-2">
-                  {sectionSplits.map((s) => {
-                    const sec = SECTIONS.find((sec) => sec.id === s.section);
-                    return (
-                      <span
-                        key={s.section}
-                        className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[var(--pure-white)] text-[var(--matcha-800)] text-xs font-medium border border-[var(--matcha-400)]"
-                      >
-                        <MaterialIcon name={sec?.icon ?? "menu_book"} className="text-[10px]" />
-                        {sec?.name ?? s.section}: {s.count} soal
-                      </span>
-                    );
-                  })}
-                </div>
-              </div>
-            )}
-          </div>
-
-          {/* Difficulty */}
-          <div data-tour="generate-difficulty" className="flex flex-col gap-4">
-            <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Tingkat Kesulitan</label>
-            <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
-              {DIFFICULTIES.map((d, i) => (
-                <button
-                  key={d}
-                  onClick={() => setDifficulty(i)}
-                  className={`py-4 px-2 rounded-[var(--radius-lg)] text-sm font-semibold transition-all clay-hover min-h-[56px] flex flex-col items-center ${
-                    difficulty === i
-                      ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow"
-                      : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] border-2 border-[var(--oat-border)]"
-                  }`}
-                >
-                  <span>{getDifficultyLabel(examType, i + 1)}</span>
-                  <span className={`text-[10px] mt-0.5 ${difficulty === i ? "text-white/60" : "text-[var(--warm-silver)]"}`}>{d}</span>
-                </button>
-              ))}
-            </div>
-          </div>
-
-          {/* Format Selection */}
-          <div data-tour="generate-format" className="flex flex-col gap-4">
-            <div className="flex items-center justify-between">
-              <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Format Soal</label>
-              <span className="text-xs text-[var(--warm-charcoal)]">
-                {selectedFormats.length} dipilih
-              </span>
-            </div>
-            <div className="flex flex-wrap gap-2">
-              {FORMATS.filter((f) => f.allowedExams.includes(examType)).map((f) => (
-                <button
-                  key={f.id}
-                  onClick={() => toggleFormat(f.id)}
-                  className={`px-4 py-2.5 rounded-full text-sm font-medium flex items-center gap-2 cursor-pointer transition-all clay-hover min-h-[40px] ${
-                    selectedFormats.includes(f.id)
-                      ? "bg-[var(--matcha-300)] text-[var(--matcha-800)]"
-                      : "bg-[var(--oat-light)] text-[var(--warm-charcoal)] hover:bg-[var(--matcha-300)] hover:text-[var(--matcha-800)]"
-                  }`}
-                >
-                  {f.name}
-                  {selectedFormats.includes(f.id) && (
-                    <MaterialIcon name="close" className="text-sm" />
-                  )}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          {/* Topic Focus */}
-          <div data-tour="generate-topic" className="flex flex-col gap-4">
-            <div className="flex items-center justify-between">
-              <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Topik</label>
-              <span className="text-xs text-[var(--warm-charcoal)]">
-                {selectedTopics.length} dipilih
-              </span>
-            </div>
-            <div className="flex flex-wrap gap-2">
-              {selectedTopics.map((topic) => (
-                <span
-                  key={topic}
-                  onClick={() => toggleTopic(topic)}
-                  className="px-4 py-2 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] font-medium flex items-center gap-2 cursor-pointer transition-all hover:brightness-95 clay-hover min-h-[40px]"
-                >
-                  {topic} <MaterialIcon name="close" className="text-sm" />
-                </span>
-              ))}
-              {TOPICS.filter((t) => !selectedTopics.includes(t)).map((topic) => (
-                <button
-                  key={topic}
-                  onClick={() => toggleTopic(topic)}
-                  className="px-4 py-2 rounded-full bg-[var(--oat-light)] text-[var(--warm-charcoal)] font-medium hover:bg-[var(--matcha-300)] hover:text-[var(--matcha-800)] transition-all clay-hover min-h-[40px]"
-                >
-                  {topic}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          {/* Weakness Alignment */}
-          <div data-tour="generate-weakness" className="flex flex-col gap-4">
-            <div className="flex justify-between items-end">
-              <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Fokus Latihan</label>
-              <span className="text-sm font-medium text-[var(--matcha-800)] bg-[var(--matcha-300)] px-3 py-1 rounded-full">
-                Intelligent Focus
-              </span>
-            </div>
-            <div className="relative py-4">
-              <input
-                type="range"
-                min="0"
-                max="100"
-                value={weaknessAlign}
-                onChange={(e) => setWeaknessAlign(Number(e.target.value))}
-                className="w-full h-2 bg-[var(--warm-silver)] rounded-full appearance-none cursor-pointer accent-[var(--clay-black)]"
-              />
-              <div className="flex justify-between mt-4 text-xs font-label uppercase tracking-widest text-[var(--warm-charcoal)]">
-                <span>Soal Seimbang</span>
-                <span>Fokus Kelemahan</span>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Live Preview Card */}
-        <div data-tour="generate-blueprint" className="lg:col-span-4">
-          <TestBlueprintCard
-            examType={examType}
-            selectedSections={selectedSections}
-            selectedFormats={selectedFormats}
-            questionCount={questionCount}
-            weaknessAlign={weaknessAlign}
-            mode={mode}
-            setMode={setMode}
-            activeCount={activeCount}
-            maxParallel={MAX_PARALLEL}
-            generatePending={generate.isPending}
-            hasKey={hasConfigs || useFreeCredits}
-            error={error}
-            onGenerate={handleGenerate}
-            onDismissError={() => setError(null)}
-            disableQuick={isReadingAndWriting}
-          />
-        </div>
-      </div>
-
-      {/* Results with Tabs */}
-      <div ref={resultsRef}>
-        {completedResults.length > 0 && (
-          <div className="mt-12">
-            <div className="flex items-center justify-between mb-4">
-              <h2 className="text-2xl font-headline font-bold text-[var(--clay-black)]">
-                Hasil Generate
-              </h2>
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={resetAll}
-                className="text-[var(--warm-charcoal)] hover:text-[var(--pomegranate-400)]"
-              >
-                <MaterialIcon name="delete_sweep" className="text-sm mr-1" />
-                Bersihkan
-              </Button>
-            </div>
-
-            {/* Tab Bar */}
-            <div className="flex gap-1 mb-6 border-b border-[var(--oat-border)] overflow-x-auto">
-              {completedResults.map((res, idx) => {
-                const questions = res.result?.questions ?? [];
-                const isActive = idx === activeTabIdx;
-                return (
-                  <button
-                    key={res.jobId}
-                    onClick={() => setActiveTabIdx(idx)}
-                    className={`flex items-center gap-2 px-4 py-3 text-sm font-semibold rounded-t-lg transition-all whitespace-nowrap border-b-2 min-h-[44px] ${
-                      isActive
-                        ? "bg-[var(--pure-white)] text-[var(--clay-black)] border-[var(--clay-black)]"
-                        : "text-[var(--warm-charcoal)] border-transparent hover:text-[var(--clay-black)] hover:bg-[var(--oat-light)]"
-                    }`}
-                  >
-                    <MaterialIcon
-                      name={questions.length > 0 ? "check_circle" : "sync"}
-                      className={`text-sm ${isActive ? "text-[var(--matcha-400)]" : ""} ${questions.length === 0 && !isActive ? "animate-spin" : ""}`}
-                    />
-                    <span>
-                      {res.mode === "agentic" ? "Agentic" : "Quick"}
-                    </span>
-                    <span className="text-xs text-[var(--warm-charcoal)]">
-                      {questions.length} soal
-                    </span>
-                    <button
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        removeJob(res.jobId);
-                      }}
-                      className="w-5 h-5 flex items-center justify-center rounded-full hover:bg-[var(--pomegranate-400)]/10 text-[var(--warm-charcoal)] hover:text-[var(--pomegranate-400)] transition-colors"
-                    >
-                      <MaterialIcon name="close" className="text-xs" />
-                    </button>
-                  </button>
-                );
-              })}
-            </div>
-
-            {/* Active Tab Content */}
-            {activeResult && (
-              <ResultSection
-                result={activeResult.result}
-                generatedPackageId={activeResult.generatedPackageId}
-                onClear={resetAll}
-              />
-            )}
-          </div>
-        )}
-      </div>
-
-      <PageTour
-        storageKey={GENERATE_TOUR_KEY}
-        autoDelay={600}
-        steps={generatePageSteps}
-      />
-      <TourHelpButton storageKey={GENERATE_TOUR_KEY} />
-    </div>
-  );
-}
-
-// ── Generate page tour ──
-const GENERATE_TOUR_KEY = "labas-page-tour-generate";
-const generatePageSteps: Step[] = [
-  {
-    target: "[data-tour='generate-exam-type']",
-    title: "Jenis Ujian",
-    content: "Pilih jenis ujian yang ingin kamu latih. Tersedia IELTS, TOEFL, JLPT, HSK, Goethe, TOPIK (Korea), TOAFL (Arab), dan DELE (Spanyol).",
-    spotlightPadding: 8,
-  },
-  {
-    target: "[data-tour='generate-section']",
-    title: "Section",
-    content: "Pilih section yang ingin digenerate. Bisa pilih lebih dari satu. Mode Agentic dengan ≥20 soal otomatis membagi soal ke setiap section.",
-    spotlightPadding: 8,
-  },
-  {
-    target: "[data-tour='generate-count']",
-    title: "Jumlah Soal",
-    content: "Atur jumlah soal yang ingin digenerate via preset atau slider. Maksimal 40 soal per generate.",
-    spotlightPadding: 8,
-  },
-  {
-    target: "[data-tour='generate-difficulty']",
-    title: "Tingkat Kesulitan",
-    content: "Pilih tingkat kesulitan. Label menyesuaikan dengan jenis ujian yang dipilih (misal: N5-N1 untuk JLPT, Band 4.0-8.0 untuk IELTS).",
-    spotlightPadding: 8,
-  },
-  {
-    target: "[data-tour='generate-format']",
-    title: "Format Soal",
-    content: "Pilih format soal (multiple choice, true/false, dll). Format tersedia tergantung exam type yang dipilih.",
-    spotlightPadding: 8,
-  },
-  {
-    target: "[data-tour='generate-topic']",
-    title: "Topik",
-    content: "Pilih topik yang ingin difokuskan. Bisa pilih lebih dari satu topik.",
-    spotlightPadding: 8,
-  },
-  {
-    target: "[data-tour='generate-weakness']",
-    title: "Intelligent Focus",
-    content: "Atur fokus pada kelemahan kamu. AI akan menarget area yang perlu ditingkatkan berdasarkan riwayat jawaban.",
-    spotlightPadding: 8,
-  },
-  {
-    target: "[data-tour='generate-blueprint']",
-    title: "Test Blueprint & Generate",
-    content: "Ringkasan konfigurasi kamu. Pilih mode Quick (cepat) atau Agentic (multi-tahap). Klik 'Generate & Launch' untuk memulai!",
-    spotlightPadding: 8,
-  },
-];

apps/web/src/routes/landing.lazy.tsx

@@ -0,0 +1,6 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { LandingPage } from "@/components/routes/LandingPage";
+
+export const Route = createLazyFileRoute("/landing")({
+  component: LandingPage,
+});

apps/web/src/routes/landing.tsx

@@ -1,12 +1,7 @@
-import { createFileRoute, Link, redirect } from "@tanstack/react-router";
-import { Button } from "@labas/ui/components/button";
-import { Card, CardContent } from "@labas/ui/components/card";
-import { MaterialIcon } from "@/components/ui/MaterialIcon";
-import { useState } from "react";
+import { createFileRoute, redirect } from "@tanstack/react-router";
 import { authClient } from "@/lib/auth-client";
 
 export const Route = createFileRoute("/landing")({
-  component: LandingPage,
   beforeLoad: async () => {
     try {
       const session = await authClient.getSession();
@@ -18,279 +13,3 @@ export const Route = createFileRoute("/landing")({
     }
   },
 });
-
-function FaqItem({ question, answer, isDark }: { question: string; answer: string; isDark?: boolean }) {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <div className={`border-b-2 py-6 ${isDark ? 'border-[var(--ube-300)]/30' : 'border-[var(--oat-border)]'} last:border-b-0`}>
-      <button
-        type="button"
-        className="flex w-full items-center justify-between text-left focus:outline-none group"
-        onClick={() => setIsOpen(!isOpen)}
-        aria-expanded={isOpen}
-      >
-        <span className={`font-headline font-semibold text-2xl tracking-[-0.64px] transition-colors ${isDark ? 'text-[var(--pure-white)] group-hover:text-[var(--ube-300)]' : 'text-[var(--clay-black)] group-hover:text-[var(--matcha-700)]'}`}>
-          {question}
-        </span>
-        <div className={`w-10 h-10 rounded-full border-2 flex items-center justify-center transition-transform duration-300 ${isOpen ? "rotate-180" : ""} ${isDark ? 'border-[var(--ube-300)]/50 text-[var(--pure-white)] group-hover:bg-[var(--ube-300)]/20' : 'border-[var(--oat-border)] text-[var(--clay-black)] group-hover:bg-[var(--oat-light)]'}`}>
-          <MaterialIcon
-            name="expand_more"
-            className="text-2xl"
-          />
-        </div>
-      </button>
-      <div
-        className={`overflow-hidden transition-all duration-300 ease-in-out ${isOpen ? "max-h-96 mt-4 opacity-100" : "max-h-0 opacity-0"}`}
-      >
-        <p className={`text-lg leading-relaxed pr-12 ${isDark ? 'text-[var(--ube-300)]' : 'text-[var(--warm-charcoal)]'}`}>
-          {answer}
-        </p>
-      </div>
-    </div>
-  );
-}
-
-function LandingPage() {
-  return (
-    <div className="min-h-screen bg-[var(--warm-cream)] flex flex-col font-sans selection:bg-[var(--matcha-300)] selection:text-[var(--clay-black)]">
-      {/* Navbar */}
-      <nav className="w-full px-6 py-4 md:px-12 lg:px-16 flex items-center justify-between max-w-7xl mx-auto z-50 sticky top-0 bg-[var(--warm-cream)] border-b-2 border-[var(--oat-border)]">
-        <div className="flex items-center gap-3">
-          <img src="/logo.png" alt="Labas Logo" className="h-10 w-auto object-contain" />
-          <span className="font-headline font-semibold text-2xl tracking-[-0.64px] text-[var(--clay-black)] hidden sm:block">Labas</span>
-        </div>
-        <div className="flex items-center gap-4">
-          <Link to="/login">
-            <Button variant="ghost" className="text-[var(--clay-black)] font-semibold hover:bg-[var(--oat-light)] rounded-[12px] text-lg px-6 h-12">
-              Masuk
-            </Button>
-          </Link>
-          <Link to="/login">
-            <Button className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--dark-charcoal)] rounded-[24px] h-12 px-8 font-semibold text-lg clay-hover clay-shadow">
-              Mulai Gratis
-            </Button>
-          </Link>
-        </div>
-      </nav>
-
-      <main className="flex-1 flex flex-col items-center overflow-x-hidden">
-        {/* HUGE HERO SECTION */}
-        <section className="w-full px-6 md:px-12 lg:px-16 pt-16 pb-20 md:pt-24 md:pb-32 flex flex-col xl:flex-row items-center justify-between gap-12 lg:gap-16 relative max-w-[1440px] mx-auto">
-          <div className="flex-1 text-center xl:text-left space-y-8 z-10 w-full max-w-[800px] xl:max-w-none">
-            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[var(--matcha-300)] border-2 border-[var(--matcha-800)] text-[var(--clay-black)] uppercase-label shadow-sm mx-auto xl:mx-0 transform -rotate-2">
-              <MaterialIcon name="auto_awesome" className="text-sm" />
-              <span>Didukung oleh AI Generative</span>
-            </div>
-            
-            <h1 className="text-[50px] md:text-[70px] lg:text-[85px] font-headline font-semibold text-[var(--clay-black)] tracking-[-2.4px] lg:tracking-[-3.2px] leading-[1.0] lg:leading-[0.95] drop-shadow-sm">
-              Platform Latihan Bahasa Cerdas.
-            </h1>
-            
-            <p className="text-xl md:text-2xl text-[var(--warm-charcoal)] max-w-2xl mx-auto xl:mx-0 leading-relaxed">
-              Persiapkan dirimu untuk ujian bahasa asing dengan latihan soal interaktif, mock test realistis, dan AI Generator super cepat.
-            </p>
-            
-            <div className="flex flex-col sm:flex-row items-center gap-6 justify-center xl:justify-start pt-6">
-              <Link to="/login" className="w-full sm:w-auto">
-                <Button className="w-full sm:w-auto bg-[var(--pure-white)] text-[var(--clay-black)] rounded-[24px] h-[64px] px-10 text-xl font-semibold border-2 border-[var(--oat-border)] clay-shadow clay-hover">
-                  Mulai Latihan Sekarang
-                </Button>
-              </Link>
-            </div>
-          </div>
-          
-          {/* MASSIVE HERO IMAGE WITH FLOATING ASSETS - SIDE BY SIDE ON DESKTOP */}
-          <div className="flex-1 w-full relative group mt-8 xl:mt-0 flex justify-center xl:justify-end">
-            <div className="relative w-full max-w-[650px] lg:max-w-[750px]">
-              <img 
-                src="/hero_img.png" 
-                alt="Labas Dashboard Preview" 
-                className="w-full h-auto object-contain transform transition-transform duration-700 group-hover:scale-105 group-hover:-rotate-1 drop-shadow-[0_20px_50px_rgba(0,0,0,0.15)] relative z-10"
-              />
-              {/* Variatif Floating Elements */}
-              <div className="absolute -top-8 -left-8 md:-top-12 md:-left-12 w-32 md:w-40 h-auto z-20 hidden sm:block">
-                <img src="/generateai.png" alt="floating element" className="w-full h-auto drop-shadow-2xl" />
-              </div>
-              <div className="absolute -bottom-8 -right-8 md:-bottom-12 md:-right-12 w-40 md:w-48 h-auto z-20 hidden sm:block">
-                <img src="/mocktest.png" alt="floating element" className="w-full h-auto drop-shadow-2xl" />
-              </div>
-              <div className="absolute top-[40%] -left-16 md:-left-24 w-24 md:w-32 h-auto z-0 hidden lg:block opacity-80 blur-[1px]">
-                <img src="/progress.png" alt="floating element" className="w-full h-auto drop-shadow-xl" />
-              </div>
-            </div>
-          </div>
-        </section>
-
-        {/* Feature Cards Section */}
-        <section id="features" className="w-full bg-[var(--pure-white)] py-32 border-y-2 border-dashed border-[var(--oat-border)]">
-          <div className="max-w-7xl mx-auto px-6 md:px-12 lg:px-16">
-            <div className="text-center max-w-4xl mx-auto mb-24 space-y-6">
-              <h2 className="text-[50px] md:text-[60px] font-headline font-semibold text-[var(--clay-black)] tracking-[-2.4px] leading-tight">
-                Fitur Unggulan Labas
-              </h2>
-              <p className="text-2xl text-[var(--warm-charcoal)]">
-                Desain yang elegan, namun kokoh untuk mempercepat kesiapan Anda menghadapi ujian.
-              </p>
-            </div>
-
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-              {/* Feature 1 */}
-              <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[24px] overflow-hidden group p-4">
-                <div className="h-56 w-full flex items-center justify-center p-2">
-                  <img src="/generateai.png" alt="AI Generator" className="h-full w-auto object-contain transform group-hover:scale-110 group-hover:rotate-3 transition-transform duration-500 drop-shadow-lg" />
-                </div>
-                <CardContent className="p-6">
-                  <h3 className="font-headline text-[32px] font-semibold text-[var(--clay-black)] tracking-[-0.64px] mb-3 leading-tight">
-                    AI Generator
-                  </h3>
-                  <p className="text-[var(--warm-charcoal)] text-lg leading-relaxed">
-                    Hasilkan soal latihan baru menggunakan AI. Tentukan topik, level kesulitan, dan format dalam hitungan detik.
-                  </p>
-                </CardContent>
-              </Card>
-
-              {/* Feature 2 */}
-              <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[24px] overflow-hidden group p-4">
-                <div className="h-56 w-full flex items-center justify-center p-2">
-                  <img src="/latihansoal.png" alt="Latihan Soal" className="h-full w-auto object-contain transform group-hover:scale-110 group-hover:-rotate-3 transition-transform duration-500 drop-shadow-lg" />
-                </div>
-                <CardContent className="p-6">
-                  <h3 className="font-headline text-[32px] font-semibold text-[var(--clay-black)] tracking-[-0.64px] mb-3 leading-tight">
-                    Latihan Terfokus
-                  </h3>
-                  <p className="text-[var(--warm-charcoal)] text-lg leading-relaxed">
-                    Akses ribuan soal latihan dari bank soal. Buat paket latihan Anda sendiri dan fokus pada area kelemahan.
-                  </p>
-                </CardContent>
-              </Card>
-
-              {/* Feature 3 */}
-              <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[24px] overflow-hidden group p-4">
-                <div className="h-56 w-full flex items-center justify-center p-2">
-                  <img src="/mocktest.png" alt="Mock Test" className="h-full w-auto object-contain transform group-hover:scale-110 group-hover:rotate-3 transition-transform duration-500 drop-shadow-lg" />
-                </div>
-                <CardContent className="p-6">
-                  <h3 className="font-headline text-[32px] font-semibold text-[var(--clay-black)] tracking-[-0.64px] mb-3 leading-tight">
-                    Simulasi Ujian
-                  </h3>
-                  <p className="text-[var(--warm-charcoal)] text-lg leading-relaxed">
-                    Simulasikan suasana ujian sesungguhnya dengan batas waktu, antarmuka imersif, dan penilaian instan.
-                  </p>
-                </CardContent>
-              </Card>
-
-              {/* Feature 4 */}
-              <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[24px] overflow-hidden group p-4">
-                <div className="h-56 w-full flex items-center justify-center p-2">
-                  <img src="/progress.png" alt="Progress Tracking" className="h-full w-auto object-contain transform group-hover:scale-110 group-hover:-rotate-3 transition-transform duration-500 drop-shadow-lg" />
-                </div>
-                <CardContent className="p-6">
-                  <h3 className="font-headline text-[32px] font-semibold text-[var(--clay-black)] tracking-[-0.64px] mb-3 leading-tight">
-                    Analitik Progres
-                  </h3>
-                  <p className="text-[var(--warm-charcoal)] text-lg leading-relaxed">
-                    Lacak perkembangan nilai Anda dari waktu ke waktu. Analisis mendalam untuk setiap bagian tes bahasa.
-                  </p>
-                </CardContent>
-              </Card>
-
-              {/* Feature 5 */}
-              <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[24px] overflow-hidden group p-4">
-                <div className="h-56 w-full flex items-center justify-center p-2">
-                  <img src="/vocabulary.png" alt="Vocabulary" className="h-full w-auto object-contain transform group-hover:scale-110 group-hover:rotate-3 transition-transform duration-500 drop-shadow-lg" />
-                </div>
-                <CardContent className="p-6">
-                  <h3 className="font-headline text-[32px] font-semibold text-[var(--clay-black)] tracking-[-0.64px] mb-3 leading-tight">
-                    Kosakata
-                  </h3>
-                  <p className="text-[var(--warm-charcoal)] text-lg leading-relaxed">
-                    Perkaya kosakata Anda dengan metode cerdas dan pengulangan berkala yang dioptimalkan.
-                  </p>
-                </CardContent>
-              </Card>
-
-              {/* Feature 6 */}
-              <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[24px] overflow-hidden group p-4">
-                <div className="h-56 w-full flex items-center justify-center p-2">
-                  <img src="/diskusi.png" alt="Diskusi" className="h-full w-auto object-contain transform group-hover:scale-110 group-hover:-rotate-3 transition-transform duration-500 drop-shadow-lg" />
-                </div>
-                <CardContent className="p-6">
-                  <h3 className="font-headline text-[32px] font-semibold text-[var(--clay-black)] tracking-[-0.64px] mb-3 leading-tight">
-                    Forum Diskusi
-                  </h3>
-                  <p className="text-[var(--warm-charcoal)] text-lg leading-relaxed">
-                    Diskusikan soal-soal sulit dengan komunitas pembelajar lainnya dan dapatkan penjelasan ahli.
-                  </p>
-                </CardContent>
-              </Card>
-            </div>
-          </div>
-        </section>
-
-        {/* SWATCH ROOM 1: Ube FAQ Section */}
-        <section className="w-full bg-[var(--ube-800)] py-32 rounded-t-[40px] mt-[-40px] z-10 relative shadow-[0_-10px_40px_rgba(0,0,0,0.1)] border-t-2 border-[var(--oat-border)]/20">
-          <div className="max-w-4xl mx-auto px-6 md:px-12 lg:px-16">
-            <div className="text-center mb-16">
-              <h2 className="text-[50px] md:text-[60px] font-headline font-semibold text-[var(--pure-white)] tracking-[-2.4px] mb-6 leading-tight drop-shadow-sm">
-                Pertanyaan Umum
-              </h2>
-              <p className="text-[var(--ube-300)] text-2xl max-w-2xl mx-auto">
-                Temukan jawaban cepat untuk pertanyaan seputar Labas.
-              </p>
-            </div>
-
-            <div className="bg-[var(--ube-900)]/40 backdrop-blur-sm border-2 border-[var(--ube-300)]/30 rounded-[32px] p-8 md:p-12 shadow-2xl">
-              <FaqItem 
-                isDark
-                question="Apa itu Labas?" 
-                answer="Labas adalah platform latihan ujian bahasa berbasis AI yang dirancang untuk membantu Anda berlatih dan menguasai bahasa asing melalui simulasi, bank soal interaktif, dan analitik performa." 
-              />
-              <FaqItem 
-                isDark
-                question="Bagaimana cara kerja AI Generator?" 
-                answer="Fitur AI Generator memungkinkan Anda membuat paket soal baru berdasarkan konteks atau topik tertentu. Anda cukup memasukkan teks acuan, dan AI Agent kami akan memproduksi soal secara otomatis." 
-              />
-              <FaqItem 
-                isDark
-                question="Apakah Labas sepenuhnya gratis?" 
-                answer="Platform Labas dapat digunakan secara gratis untuk fitur dasar. Untuk fitur generasi soal berbasis AI, kami menggunakan model Bring-Your-Own-Key (BYOK). Anda cukup memasukkan API Key OpenAI Anda." 
-              />
-              <FaqItem 
-                isDark
-                question="Bahasa apa saja yang didukung oleh Labas?" 
-                answer="Saat ini Labas mendukung latihan untuk berbagai ujian profisiensi bahasa populer seperti Bahasa Inggris (TOEFL, IELTS, TOEIC), Jepang (JLPT), Korea (TOPIK), dan banyak lagi." 
-              />
-            </div>
-          </div>
-        </section>
-
-        {/* SWATCH ROOM 2: Matcha CTA Section */}
-        <section className="w-full bg-[var(--matcha-800)] py-40 px-6 rounded-t-[40px] mt-[-40px] z-20 relative shadow-[0_-10px_40px_rgba(0,0,0,0.2)] border-t-2 border-[var(--matcha-600)]">
-          <div className="max-w-4xl mx-auto text-center space-y-12">
-            <h2 className="text-[60px] md:text-[80px] font-headline font-semibold text-[var(--pure-white)] tracking-[-3.2px] leading-[0.95] drop-shadow-md">
-              Siap Meningkatkan Skor Anda?
-            </h2>
-            <p className="text-2xl text-[var(--matcha-300)] max-w-2xl mx-auto">
-              Bergabung sekarang dan rasakan perbedaan belajar dengan teknologi yang berpusat pada perkembangan Anda.
-            </p>
-            <div className="pt-8">
-              <Link to="/login" className="inline-block">
-                <Button className="bg-[var(--pure-white)] text-[var(--clay-black)] hover:bg-[var(--oat-light)] rounded-[24px] h-[80px] px-14 text-2xl font-bold clay-shadow clay-hover">
-                  Daftar Sekarang - Gratis
-                </Button>
-              </Link>
-            </div>
-          </div>
-        </section>
-      </main>
-
-      {/* Footer */}
-      <footer className="w-full bg-[var(--pure-white)] py-12 border-t-2 border-[var(--oat-border)] text-center relative z-30">
-        <p className="text-[var(--warm-charcoal)] font-semibold text-lg">
-          &copy; {new Date().getFullYear()} Labas. Didesain dengan penuh kehangatan.
-        </p>
-      </footer>
-    </div>
-  );
-}

apps/web/src/routes/packages.lazy.tsx

@@ -0,0 +1,6 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { PackagesComponent } from "@/components/routes/PackagesPage";
+
+export const Route = createLazyFileRoute("/packages")({
+  component: PackagesComponent,
+});

apps/web/src/routes/packages.tsx

@@ -1,31 +1,8 @@
-import { useState, useEffect, useCallback } from "react";
-import { useQuery, useMutation } from "@tanstack/react-query";
-import { createFileRoute, redirect, Link, useNavigate } from "@tanstack/react-router";
+import { createFileRoute, redirect } 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";
-import { Button } from "@labas/ui/components/button";
-import { Card, CardContent } from "@labas/ui/components/card";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@labas/ui/components/select";
-import { MaterialIcon } from "@/components/ui/MaterialIcon";
-import { GettingStartedCard } from "@/components/GettingStartedCard";
-import { CalloutCard } from "@/components/bank/CalloutCard";
-import { PageTour, TourHelpButton } from "@/components/TourGuide";
-import type { Step } from "react-joyride";
-import { toast } from "sonner";
-import { getErrorMessage } from "@/lib/error-utils";
-import { EXAM_TYPES } from "@/lib/exam-constants";
 
 export const Route = createFileRoute("/packages")({
-  component: PackagesComponent,
   validateSearch: z.object({
     tab: z.enum(["all", "mine"]).optional(),
     search: z.string().optional(),
@@ -41,552 +18,3 @@ export const Route = createFileRoute("/packages")({
     return { session };
   },
 });
-
-type Tab = "all" | "mine";
-
-function PackagesComponent() {
-  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 visibilityFilter = search.visibility ?? "all";
-  const limit = 12;
-
-  const allQuery = useQuery(
-    trpc.package.list.queryOptions(
-      {
-        isPublic: true,
-        examTypeId: examType || undefined,
-        search: searchText || undefined,
-        limit,
-        offset: (page - 1) * limit,
-      },
-      { enabled: tab === "all" },
-    ),
-  );
-
-  const visibilityFilterParam = tab === "mine" && visibilityFilter !== "all"
-    ? { isPublic: visibilityFilter === "public" }
-    : {};
-
-  const mineQuery = useQuery(
-    trpc.package.myPackages.queryOptions(
-      {
-        search: searchText || undefined,
-        examTypeId: examType || undefined,
-        limit,
-        offset: (page - 1) * limit,
-        ...visibilityFilterParam,
-      },
-      { 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 bulkPublish = useMutation(
-    trpc.package.bulkPublish.mutationOptions({
-      onSuccess: (data) => {
-        query.refetch();
-        setBulkMode(false);
-        setSelectedIds(new Set());
-        if (data.skipped > 0) {
-          toast.success(
-            `${data.updated} paket dipublikasikan, ${data.skipped} dilewati`,
-            { description: "Beberapa paket bukan milikmu atau sudah tidak tersedia." },
-          );
-        } else {
-          toast.success(`${data.updated} paket berhasil dipublikasikan`);
-        }
-      },
-      onError: (err: unknown) => {
-        toast.error("Gagal mempublikasikan. Coba refresh dan pilih ulang paket.", { description: getErrorMessage(err) });
-      },
-    }),
-  );
-
-  // ── Bulk select ──
-  const [bulkMode, setBulkMode] = useState(false);
-  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
-
-  const toggleSelect = (id: string) => {
-    setSelectedIds((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  };
-
-  const clearSelection = () => setSelectedIds(new Set());
-  const selectAll = () => setSelectedIds(new Set(packages.map((p) => p.id)));
-
-  useEffect(() => {
-    setBulkMode(false);
-    setSelectedIds(new Set());
-  }, [tab, searchText, examType]);
-
-  const setTab = (newTab: Tab) => {
-    navigate({ search: { tab: newTab, search: "", examType: "", page: 1 } });
-  };
-
-  // ── Private callout state ──
-  const [calloutDismissed, setCalloutDismissed] = useState(
-    typeof window !== "undefined" && localStorage.getItem("labas-packages-private-callout-dismissed") === "true",
-  );
-  const privatePackages = packages.filter(
-    (p) => !p.isPublic && p.creatorUserId === userId,
-  );
-
-  const handleDismissCallout = () => {
-    localStorage.setItem("labas-packages-private-callout-dismissed", "true");
-    setCalloutDismissed(true);
-  };
-
-  const handlePublishAllPrivate = () => {
-    const ids = privatePackages.map((p) => p.id);
-    if (ids.length > 0) bulkPublish.mutate({ ids });
-  };
-
-  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 setVisibility = (value: "all" | "private" | "public") => {
-    navigate({ search: (prev) => ({ ...prev, visibility: value === "all" ? undefined : 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">
-        <div data-tour="packages-header" className="flex items-center justify-between">
-          <div>
-            <h1 className="text-4xl font-headline font-extrabold text-[var(--clay-black)] tracking-tight">
-              Paket Soal
-            </h1>
-            <p className="text-lg text-[var(--warm-charcoal)] mt-2">
-              Kumpulan paket latihan dari komunitas.
-            </p>
-          </div>
-          <Link to="/bank">
-            <Button className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)] h-11">
-              <MaterialIcon name="add" />
-              <span className="ml-2 hidden sm:inline">Buat Paket</span>
-            </Button>
-          </Link>
-        </div>
-      </section>
-
-      {/* Getting Started Guide */}
-      <GettingStartedCard />
-
-      {/* Tabs */}
-      <div className="flex gap-2 mb-6">
-        <button
-          onClick={() => setTab("all")}
-          className={`px-4 py-2 rounded-[var(--radius-lg)] text-sm font-semibold transition-all ${
-            tab === "all"
-              ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow"
-              : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] border-2 border-[var(--oat-border)] hover:bg-[var(--oat-light)]"
-          }`}
-        >
-          Semua Paket
-        </button>
-        <button
-          onClick={() => setTab("mine")}
-          className={`px-4 py-2 rounded-[var(--radius-lg)] text-sm font-semibold transition-all ${
-            tab === "mine"
-              ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow"
-              : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] border-2 border-[var(--oat-border)] hover:bg-[var(--oat-light)]"
-          }`}
-        >
-          Paket Saya
-        </button>
-      </div>
-
-      {/* Filters */}
-      <div data-tour="packages-filters" 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={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
-          value={examType}
-          onValueChange={(v: string | null) => setExamType(v ?? "")}
-        >
-          <SelectTrigger className="w-36">
-            <SelectValue placeholder="Semua Ujian" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectGroup>
-              <SelectItem value="">Semua Ujian</SelectItem>
-              {EXAM_TYPES.map((t) => (
-                <SelectItem key={t.id} value={t.id}>{t.name}</SelectItem>
-              ))}
-            </SelectGroup>
-          </SelectContent>
-        </Select>
-        {tab === "mine" && (
-          <div className="flex gap-2">
-            <VisChip active={visibilityFilter === "all"} onClick={() => setVisibility("all")}>
-              <MaterialIcon name="visibility" className="text-xs" />
-              Semua
-            </VisChip>
-            <VisChip active={visibilityFilter === "private"} onClick={() => setVisibility("private")}>
-              <MaterialIcon name="lock" className="text-xs" />
-              Privat
-            </VisChip>
-            <VisChip active={visibilityFilter === "public"} onClick={() => setVisibility("public")}>
-              <MaterialIcon name="public" className="text-xs" />
-              Publik
-            </VisChip>
-          </div>
-        )}
-      </div>
-
-      {/* Bulk toolbar */}
-      {tab === "mine" && (
-        <div className="flex items-center justify-between mb-4 p-3 rounded-[var(--radius-lg)] bg-[var(--oat-light)] border-2 border-[var(--oat-border)]">
-          {bulkMode ? (
-            <>
-              <div className="flex items-center gap-3">
-                <button
-                  onClick={clearSelection}
-                  className="text-xs font-semibold text-[var(--warm-charcoal)] hover:text-[var(--clay-black)] transition-colors flex items-center gap-1"
-                >
-                  <MaterialIcon name="close" className="text-xs" />
-                  Batalkan ({selectedIds.size})
-                </button>
-                <button
-                  onClick={selectAll}
-                  className="text-xs font-semibold text-[var(--matcha-600)] hover:text-[var(--matcha-800)] transition-colors flex items-center gap-1"
-                >
-                  <MaterialIcon name="select_all" className="text-xs" />
-                  Pilih Semua
-                </button>
-              </div>
-              <div className="flex items-center gap-2">
-                <Button
-                  size="lg"
-                  disabled={selectedIds.size === 0 || bulkPublish.isPending}
-                  onClick={() => bulkPublish.mutate({ ids: Array.from(selectedIds) })}
-                  className="rounded-[var(--radius-md)] bg-[var(--matcha-600)] text-[var(--pure-white)] hover:bg-[var(--matcha-800)]"
-                >
-                  <MaterialIcon name="public" className="text-xs mr-1" />
-                  {bulkPublish.isPending ? "Mempublikasikan..." : `Jadikan Publik (${selectedIds.size})`}
-                </Button>
-                <button
-                  onClick={() => { setBulkMode(false); setSelectedIds(new Set()); }}
-                  className="text-xs font-semibold text-[var(--warm-charcoal)] hover:text-[var(--clay-black)] transition-colors"
-                >
-                  Selesai
-                </button>
-              </div>
-            </>
-          ) : (
-            <>
-              <span className="text-sm text-[var(--warm-charcoal)]">{packages.length} paket</span>
-              <button
-                onClick={() => setBulkMode(true)}
-                className="text-xs font-semibold text-[var(--matcha-600)] hover:text-[var(--matcha-800)] transition-colors flex items-center gap-1"
-              >
-                <MaterialIcon name="select_all" className="text-sm" />
-                Pilih Banyak
-              </button>
-            </>
-          )}
-        </div>
-      )}
-
-      {/* Private package callout */}
-      {tab === "mine" && privatePackages.length > 0 && !calloutDismissed && (
-        <div className="mb-6">
-          <CalloutCard
-            privateCount={privatePackages.length}
-            onPublishAll={handlePublishAllPrivate}
-            onDismiss={handleDismissCallout}
-          />
-        </div>
-      )}
-
-      {/* Results */}
-      {query.isLoading ? (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {Array.from({ length: 6 }).map((_, i) => (
-            <Card key={i} className="h-48 bg-[var(--oat-light)] animate-pulse rounded-[var(--radius-xl)]" />
-          ))}
-        </div>
-      ) : packages.length === 0 ? (
-        <div className="text-center py-16">
-          <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 mb-6">
-            {tab === "mine"
-              ? "Belum ada paket yang Anda buat. Buat paket dari Bank Soal."
-              : "Belum ada paket publik. Buat paket soal pertama Anda"}
-          </p>
-          <div className="flex items-center justify-center gap-3">
-            <Link to="/generate">
-              <Button className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] rounded-[var(--radius-lg)]">
-                <MaterialIcon name="auto_awesome" className="mr-2" />
-                Generate Soal
-              </Button>
-            </Link>
-            <Link to="/bank">
-              <Button variant="outline" className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)]">
-                <MaterialIcon name="add" className="mr-2" />
-                Buat Paket
-              </Button>
-            </Link>
-          </div>
-        </div>
-      ) : (
-        <>
-          <div data-tour="packages-list" className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {packages.map((pkg) => {
-              const isOwner = pkg.creatorUserId === userId;
-              const isSelected = selectedIds.has(pkg.id);
-              return (
-                <Card
-                  key={pkg.id}
-                  className={`clay-shadow clay-hover bg-[var(--pure-white)] border-2 rounded-[var(--radius-xl)] h-full flex flex-col ${
-                    bulkMode && isSelected
-                      ? "border-[var(--matcha-600)] ring-2 ring-[var(--matcha-400)]"
-                      : isOwner && !pkg.isPublic && !bulkMode
-                        ? "border-[var(--oat-border)] border-l-[var(--warm-charcoal)] border-l-4"
-                        : "border-[var(--oat-border)]"
-                  }`}
-                >
-                  <CardContent className="p-5 flex flex-col h-full">
-                    <div
-                      className="block flex-1 cursor-pointer"
-                      onClick={bulkMode ? () => toggleSelect(pkg.id) : undefined}
-                    >
-                      <Link
-                        to="/package/$id"
-                        params={{ id: pkg.id }}
-                        className={bulkMode ? "pointer-events-none" : ""}
-                      >
-                      <div className="flex items-start justify-between mb-3">
-                        <div className="flex gap-2 flex-wrap">
-                          {bulkMode && (
-                            <span className={`px-2 py-1 rounded-full text-[10px] font-semibold flex items-center gap-1 ${
-                              isSelected
-                                ? "bg-[var(--matcha-600)] text-[var(--pure-white)]"
-                                : "bg-[var(--oat-light)] text-[var(--warm-charcoal)]"
-                            }`}>
-                              <MaterialIcon name={isSelected ? "check_circle" : "radio_button_unchecked"} className="text-xs" />
-                              {isSelected ? "Terpilih" : "Pilih"}
-                            </span>
-                          )}
-                          <span className="inline-flex items-center px-2.5 py-1 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-xs font-semibold leading-none whitespace-nowrap">
-                            {pkg.examTypeName}
-                          </span>
-                          {isOwner && !bulkMode && (
-                            <span
-                              className={`px-2 py-1 rounded-full text-[10px] font-semibold flex items-center gap-1 ${
-                                pkg.isPublic
-                                  ? "bg-[var(--slushie-500)]/20 text-[var(--slushie-800)]"
-                                  : "bg-[var(--slushie-500)]/15 text-[var(--slushie-800)]"
-                              }`}
-                            >
-                              {!pkg.isPublic && <MaterialIcon name="lock" className="text-[10px]" />}
-                              {pkg.isPublic ? "Publik" : "Privat"}
-                            </span>
-                          )}
-                        </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>
-
-                      {pkg.description && (
-                        <p className="text-sm text-[var(--warm-charcoal)] line-clamp-2 mb-4">
-                          {pkg.description}
-                        </p>
-                      )}
-                      </Link>
-
-                      <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 && (
-                            <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>
-                    </div>
-
-                    {/* Owner actions */}
-                    {isOwner && !bulkMode && (
-                      <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}
-                          title={pkg.isPublic ? "Klik untuk jadikan privat" : "Klik untuk jadikan publik"}
-                          className={`text-xs font-semibold px-3 py-1.5 rounded-full transition-colors flex items-center gap-1 cursor-pointer ${
-                            pkg.isPublic
-                              ? "bg-[var(--matcha-300)] text-[var(--matcha-800)]"
-                              : "bg-[var(--slushie-500)]/15 text-[var(--slushie-800)]"
-                          }`}
-                        >
-                          {!pkg.isPublic && <MaterialIcon name="lock" className="text-xs" />}
-                          {pkg.isPublic ? "Publik" : "Privat"}
-                        </button>
-                        {pkg.isPublic && (
-                          <button
-                            onClick={() => {
-                              const url = `${window.location.origin}/package/${pkg.id}`;
-                            navigator.clipboard.writeText(url);
-                            toast.success("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>
-                    )}
-
-                    {!bulkMode && (
-                      <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 } })}
-                          size="xl"
-                        >
-                          <MaterialIcon name="play_arrow" className="mr-2" />
-                          Mulai Latihan
-                        </Button>
-                      </div>
-                    )}
-                  </CardContent>
-                </Card>
-              );
-            })}
-          </div>
-
-          {totalPages > 1 && (
-            <div className="flex items-center justify-center gap-2 mt-10">
-              <Button
-                variant="outline"
-                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} dari {totalPages}
-              </span>
-              <Button
-                variant="outline"
-                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" />
-              </Button>
-            </div>
-          )}
-        </>
-      )}
-
-      <PageTour storageKey={PACKAGES_TOUR_KEY} autoDelay={600} steps={packagesPageSteps} />
-      <TourHelpButton storageKey={PACKAGES_TOUR_KEY} />
-    </div>
-  );
-}
-
-// ── Packages page tour ──
-const PACKAGES_TOUR_KEY = "labas-page-tour-packages";
-const packagesPageSteps: Step[] = [
-  {
-    target: "[data-tour='packages-header']",
-    title: "Paket Soal",
-    content: "Temukan paket soal dari komunitas atau lihat paket buatan sendiri. Klik 'Buat Paket' untuk membuat paket baru dari Bank Soal.",
-    spotlightPadding: 8,
-  },
-  {
-    target: "[data-tour='packages-filters']",
-    title: "Filter & Pencarian",
-    content: "Cari paket berdasarkan nama atau filter berdasarkan jenis ujian (IELTS, TOEFL, dll). Bisa juga switch antara 'Semua Paket' dan 'Paket Saya'.",
-    spotlightPadding: 8,
-  },
-  {
-    target: "[data-tour='packages-list']",
-    title: "Mulai Latihan",
-    content: "Klik kartu paket untuk lihat detail, atau langsung klik 'Mulai Latihan' untuk mengerjakan soal. Pantau skor dan progres kamu!",
-    spotlightPadding: 8,
-  },
-];
-
-function VisChip({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
-  return (
-    <button
-      onClick={onClick}
-      className={`px-3 py-1.5 rounded-full text-xs font-semibold whitespace-nowrap transition-all flex items-center gap-1 cursor-pointer ${
-        active
-          ? "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)]"
-      }`}
-    >
-      {children}
-    </button>
-  );
-}

apps/web/src/routes/settings.lazy.tsx

@@ -0,0 +1,6 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { RouteComponent } from "@/components/routes/SettingsPage";
+
+export const Route = createLazyFileRoute("/settings")({
+  component: RouteComponent,
+});

apps/web/src/routes/settings.tsx

@@ -1,27 +1,8 @@
-import { useState, startTransition } from "react";
-import { createFileRoute, redirect, Link } from "@tanstack/react-router";
-import { useQuery } from "@tanstack/react-query";
-import { authClient } from "@/lib/auth-client";
-import { useApiKeys, type ApiKeyConfig } from "@/hooks/use-api-key";
-import { trpc } from "@/utils/trpc";
-import {
-  Tabs,
-  TabsList,
-  TabsTrigger,
-  TabsContent,
-} from "@labas/ui/components/tabs";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@labas/ui/components/card";
-import { MaterialIcon } from "@/components/ui/MaterialIcon";
-import { TokenUsageChart } from "@/components/settings/TokenUsageChart";
-import { ApiKeyList } from "@/components/settings/ApiKeyList";
-import { ApiKeyForm } from "@/components/settings/ApiKeyForm";
-import { TipsCard } from "@/components/settings/TipsCard";
-import { SecurityInfo } from "@/components/settings/SecurityInfo";
-import { AccountSettings } from "@/components/settings/AccountSettings";
+import { createFileRoute, redirect } from "@tanstack/react-router";
 import { z } from "zod";
+import { authClient } from "@/lib/auth-client";
 
 export const Route = createFileRoute("/settings")({
-  component: RouteComponent,
   validateSearch: z.object({
     tab: z.enum(["api-keys", "token-usage", "security", "account"]).optional(),
   }).parse,
@@ -33,320 +14,3 @@ export const Route = createFileRoute("/settings")({
     return { session };
   },
 });
-
-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,
-  };
-}
-
-type Tab = "api-keys" | "token-usage" | "security" | "account";
-
-function TokenUsageSection() {
-  const { data, isLoading } = useQuery(trpc.ai.tokenUsageToday.queryOptions());
-
-  const totalTokens = data?.totalTokens ?? 0;
-  const jobs = data?.jobs ?? [];
-
-  return (
-    <div className="space-y-6">
-      <TokenUsageChart />
-
-      <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="toll" className="text-xl" />
-            <div>
-              <CardTitle className="font-headline text-[var(--clay-black)]">
-                Penggunaan Token Hari Ini
-              </CardTitle>
-              <CardDescription className="text-[var(--warm-charcoal)]">
-                Total token yang terpakai untuk generate soal hari ini.
-              </CardDescription>
-            </div>
-          </div>
-        </CardHeader>
-        <CardContent className="space-y-6">
-          <div className="flex items-center gap-4 p-4 bg-[var(--matcha-300)] rounded-[var(--radius-lg)]">
-            <MaterialIcon name="toll" className="text-3xl text-[var(--matcha-800)]" />
-            <div>
-              <p className="text-sm text-[var(--matcha-800)]/80">Total Token Terpakai</p>
-              <p className="text-3xl font-extrabold text-[var(--matcha-800)]">
-                {isLoading ? "..." : totalTokens.toLocaleString("id-ID")}
-              </p>
-            </div>
-          </div>
-
-          <div>
-            <h3 className="text-sm font-semibold text-[var(--clay-black)] mb-3">
-              Riwayat Generate Hari Ini
-            </h3>
-            {isLoading ? (
-              <div className="space-y-2">
-                {[1, 2, 3].map((i) => (
-                  <div key={i} className="h-12 bg-[var(--oat-light)] animate-pulse rounded-[var(--radius-lg)]" />
-                ))}
-              </div>
-            ) : jobs.length === 0 ? (
-              <div className="text-center py-8 border-2 border-dashed border-[var(--oat-border)] rounded-[var(--radius-lg)]">
-                <MaterialIcon name="receipt_long" className="text-4xl text-[var(--warm-silver)] mx-auto mb-3" />
-                <p className="text-[var(--warm-charcoal)] font-semibold">Belum ada generate hari ini</p>
-                <p className="text-xs text-[var(--warm-silver)] mt-1">
-                  Generate soal baru untuk melihat penggunaan token.
-                </p>
-              </div>
-            ) : (
-              <div className="overflow-x-auto">
-                <table className="w-full text-sm">
-                  <thead>
-                    <tr className="border-b border-[var(--oat-border)] text-[var(--warm-charcoal)]">
-                      <th className="text-left py-2 px-3 font-medium">Waktu</th>
-                      <th className="text-left py-2 px-3 font-medium">Mode</th>
-                      <th className="text-left py-2 px-3 font-medium">Status</th>
-                      <th className="text-left py-2 px-3 font-medium">Ujian</th>
-                      <th className="text-left py-2 px-3 font-medium">Section</th>
-                      <th className="text-right py-2 px-3 font-medium">Soal</th>
-                      <th className="text-right py-2 px-3 font-medium">Token</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {jobs.map((job) => {
-                      const isFailed = job.status === "failed";
-                      const isCancelled = job.status === "cancelled";
-                      return (
-                        <tr
-                          key={job.id}
-                          className={`border-b border-[var(--oat-border)] last:border-0 hover:bg-[var(--warm-cream)] transition-colors ${
-                            isFailed || isCancelled ? "opacity-70" : ""
-                          }`}
-                        >
-                          <td className="py-2.5 px-3 text-[var(--clay-black)] whitespace-nowrap">
-                            {new Date(job.createdAt).toLocaleTimeString("id-ID", {
-                              hour: "2-digit",
-                              minute: "2-digit",
-                            })}
-                          </td>
-                          <td className="py-2.5 px-3">
-                            <span
-                              className={`inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold ${
-                                job.mode === "agentic"
-                                  ? "bg-[var(--matcha-300)] text-[var(--matcha-800)]"
-                                  : "bg-[var(--lavender-300)] text-[var(--lavender-800)]"
-                              }`}
-                            >
-                              {job.mode === "agentic" ? "Agentic" : "Quick"}
-                            </span>
-                          </td>
-                          <td className="py-2.5 px-3">
-                            {job.status === "completed" ? (
-                              <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-[var(--matcha-800)]">
-                                <MaterialIcon name="check_circle" className="text-xs" />
-                                Selesai
-                              </span>
-                            ) : isFailed ? (
-                              <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-[var(--pomegranate-400)]">
-                                <MaterialIcon name="error" className="text-xs" />
-                                Gagal
-                              </span>
-                            ) : isCancelled ? (
-                              <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-[var(--warm-charcoal)]">
-                                <MaterialIcon name="cancel" className="text-xs" />
-                                Dibatalkan
-                              </span>
-                            ) : (
-                              <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-[var(--warm-silver)]">
-                                <MaterialIcon name="hourglass_empty" className="text-xs" />
-                                {job.status}
-                              </span>
-                            )}
-                          </td>
-                          <td className="py-2.5 px-3 text-[var(--clay-black)]">{job.examTypeId}</td>
-                          <td className="py-2.5 px-3 text-[var(--clay-black)]">{job.sectionTypeId}</td>
-                          <td className="py-2.5 px-3 text-right text-[var(--clay-black)]">{job.questionCount}</td>
-                          <td className="py-2.5 px-3 text-right text-[var(--clay-black)] font-medium">
-                            {job.tokensUsed?.toLocaleString("id-ID") ?? "-"}
-                          </td>
-                        </tr>
-                      );
-                    })}
-                  </tbody>
-                </table>
-              </div>
-            )}
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
-
-function RouteComponent() {
-  const { configs, isLoading, addConfig, updateConfig, removeConfig } =
-    useApiKeys();
-
-  const search = Route.useSearch();
-  const navigate = Route.useNavigate();
-
-  const [editingId, setEditingId] = useState<string | null>(null);
-  const [isAdding, setIsAdding] = useState(false);
-  const [isSaving, setIsSaving] = useState(false);
-
-  const activeTab: Tab = search.tab ?? "api-keys";
-
-  const setTab = (tab: string) => {
-    startTransition(() => {
-      navigate({ search: { tab: tab as Tab } });
-    });
-  };
-
-  const [form, setForm] = useState<Omit<ApiKeyConfig, "id"> & { apiKey: string }>(
-    () => ({
-      ...defaultConfig(),
-      apiKey: "",
-    }),
-  );
-
-  const resetForm = () => {
-    setForm({ ...defaultConfig(), apiKey: "" });
-  };
-
-  const handleFormChange = (field: keyof typeof form, value: string | number) => {
-    setForm((prev) => ({ ...prev, [field]: value }));
-  };
-
-  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: "",
-    });
-    setEditingId(config.id);
-    setIsAdding(false);
-  };
-
-  const cancelEdit = () => {
-    setEditingId(null);
-    setIsAdding(false);
-    resetForm();
-  };
-
-  const handleSave = async () => {
-    if (!form.name.trim()) return;
-    setIsSaving(true);
-    try {
-      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">
-        <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, pantau penggunaan token, dan preferensi akun.
-        </p>
-      </section>
-
-      <Tabs value={activeTab} onValueChange={setTab} className="w-full">
-        <TabsList variant="line" className="mb-6">
-          <TabsTrigger value="api-keys">API Keys</TabsTrigger>
-          <TabsTrigger value="token-usage">Token Usage</TabsTrigger>
-          <TabsTrigger value="account">Akun</TabsTrigger>
-          <TabsTrigger value="security">Keamanan</TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="api-keys" className="space-y-8">
-          <div className="grid grid-cols-1 lg:grid-cols-12 gap-10">
-            <div className="lg:col-span-7 space-y-8">
-              <ApiKeyList
-                configs={configs}
-                isLoading={isLoading}
-                editingId={editingId}
-                isFormOpen={isFormOpen}
-                providers={PROVIDERS}
-                onStartAdd={startAdd}
-                onStartEdit={startEdit}
-                onRemove={removeConfig}
-              />
-
-              {isFormOpen && (
-                <ApiKeyForm
-                  isAdding={isAdding}
-                  isSaving={isSaving}
-                  form={form}
-                  canSave={canSave}
-                  providers={PROVIDERS}
-                  onChange={handleFormChange}
-                  onSave={handleSave}
-                  onCancel={cancelEdit}
-                />
-              )}
-            </div>
-
-            <div className="lg:col-span-5">
-              <TipsCard />
-            </div>
-          </div>
-        </TabsContent>
-
-        <TabsContent value="token-usage">
-          <TokenUsageSection />
-        </TabsContent>
-
-        <TabsContent value="account">
-          <AccountSettings />
-        </TabsContent>
-
-        <TabsContent value="security">
-          <SecurityInfo />
-        </TabsContent>
-      </Tabs>
-    </div>
-  );
-}