feat: add API key management components including ApiKeyForm, ApiKeyList, SecurityInfo, TipsCard, and TokenUsageChart. Enhance settings route to integrate these components for improved API key configuration and token usage tracking. Implement backend support for token usage history with new query options.

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

@@ -0,0 +1,154 @@
+import { type ApiKeyConfig } from "@/hooks/use-api-key";
+import { Button } from "@labas/ui/components/button";
+import { Input } from "@labas/ui/components/input";
+import { Label } from "@labas/ui/components/label";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@labas/ui/components/card";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@labas/ui/components/select";
+
+type FormState = Omit<ApiKeyConfig, "id"> & { apiKey: string };
+
+interface ProviderOption {
+  value: string;
+  label: string;
+}
+
+interface ApiKeyFormProps {
+  isAdding: boolean;
+  isSaving: boolean;
+  form: FormState;
+  canSave: boolean;
+  providers: ProviderOption[];
+  onChange: (field: keyof FormState, value: string | number) => void;
+  onSave: () => void;
+  onCancel: () => void;
+}
+
+export function ApiKeyForm({ isAdding, isSaving, form, canSave, providers, onChange, onSave, onCancel }: ApiKeyFormProps) {
+  return (
+    <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--matcha-400)] rounded-[var(--radius-xl)]">
+      <CardHeader>
+        <CardTitle className="font-headline text-[var(--clay-black)]">
+          {isAdding ? "Tambah API Key Baru" : "Edit API Key"}
+        </CardTitle>
+        <CardDescription className="text-[var(--warm-charcoal)]">
+          {isAdding
+            ? "Tambahkan konfigurasi provider baru."
+            : "Kosongkan field API Key jika tidak ingin mengubahnya."}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-5">
+        <div className="space-y-2">
+          <Label htmlFor="name" className="text-[var(--clay-black)]">Nama Config</Label>
+          <Input
+            id="name"
+            value={form.name}
+            onChange={(e) => onChange("name", e.target.value)}
+            placeholder="Contoh: OpenAI GPT-4o"
+            className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)]"
+          />
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <Label htmlFor="provider" className="text-[var(--clay-black)]">Provider</Label>
+            <Select
+              items={providers}
+              value={form.provider}
+              onValueChange={(v: string | null) => onChange("provider", v ?? "openai")}
+            >
+              <SelectTrigger id="provider">
+                <SelectValue placeholder="Pilih provider" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  {providers.map((p) => (
+                    <SelectItem key={p.value} value={p.value}>{p.label}</SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="model" className="text-[var(--clay-black)]">Model</Label>
+            <Input
+              id="model"
+              value={form.modelName}
+              onChange={(e) => onChange("modelName", e.target.value)}
+              placeholder="gpt-4o-mini"
+              className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)]"
+            />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <Label htmlFor="baseUrl" className="text-[var(--clay-black)]">Base URL</Label>
+            <Input
+              id="baseUrl"
+              value={form.baseUrl}
+              onChange={(e) => onChange("baseUrl", e.target.value)}
+              placeholder="https://api.openai.com/v1"
+              className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)]"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="maxTokens" className="text-[var(--clay-black)]">Max Tokens</Label>
+            <Input
+              id="maxTokens"
+              type="number"
+              min={1}
+              max={1_000_000}
+              value={form.maxTokens}
+              onChange={(e) => onChange("maxTokens", Number(e.target.value))}
+              placeholder="16384"
+              className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)]"
+            />
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="apiKey" className="text-[var(--clay-black)]">
+            API Key
+            {!isAdding && (
+              <span className="text-[var(--warm-silver)] font-normal ml-1">
+                (kosongkan jika tidak diubah)
+              </span>
+            )}
+          </Label>
+          <Input
+            id="apiKey"
+            type="password"
+            value={form.apiKey}
+            onChange={(e) => onChange("apiKey", e.target.value)}
+            placeholder={isAdding ? "sk-..." : "•••••••• (kosongkan untuk tidak mengubah)"}
+            className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)]"
+          />
+        </div>
+
+        <div className="flex gap-3">
+          <Button
+            onClick={onSave}
+            disabled={!canSave || isSaving}
+            className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] rounded-[var(--radius-lg)] h-11 clay-shadow clay-hover"
+          >
+            {isSaving ? "Menyimpan..." : isAdding ? "Simpan" : "Update"}
+          </Button>
+          <Button
+            variant="outline"
+            onClick={onCancel}
+            className="rounded-[var(--radius-lg)] h-11 border-2 border-[var(--oat-border)]"
+          >
+            Batal
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,130 @@
+import { type ApiKeyConfig } from "@/hooks/use-api-key";
+import { Button } from "@labas/ui/components/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@labas/ui/components/card";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+interface ProviderOption {
+  value: string;
+  label: string;
+}
+
+interface ApiKeyListProps {
+  configs: ApiKeyConfig[];
+  isLoading: boolean;
+  editingId: string | null;
+  isFormOpen: boolean;
+  providers: ProviderOption[];
+  onStartAdd: () => void;
+  onStartEdit: (config: ApiKeyConfig) => void;
+  onRemove: (id: string) => void;
+}
+
+export function ApiKeyList({
+  configs,
+  isLoading,
+  editingId,
+  isFormOpen,
+  providers,
+  onStartAdd,
+  onStartEdit,
+  onRemove,
+}: ApiKeyListProps) {
+  return (
+    <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <MaterialIcon name="key" className="text-xl" />
+            <div>
+              <CardTitle className="font-headline text-[var(--clay-black)]">API Keys</CardTitle>
+              <CardDescription className="text-[var(--warm-charcoal)]">
+                {configs.length} konfigurasi tersimpan
+              </CardDescription>
+            </div>
+          </div>
+          {!isFormOpen && (
+            <Button
+              onClick={onStartAdd}
+              className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] rounded-[var(--radius-lg)] clay-shadow clay-hover text-sm"
+            >
+              <MaterialIcon name="add" className="mr-1" />
+              Tambah
+            </Button>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {isLoading ? (
+          <div className="h-20 bg-[var(--oat-light)] animate-pulse rounded-[var(--radius-lg)]" />
+        ) : configs.length === 0 ? (
+          <div className="text-center py-8">
+            <MaterialIcon name="key_off" className="text-4xl text-[var(--warm-silver)] mx-auto mb-3" />
+            <p className="text-[var(--warm-charcoal)] font-semibold">Belum ada API key</p>
+            <p className="text-xs text-[var(--warm-silver)] mt-1">
+              Tambahkan minimal satu key untuk generate soal.
+            </p>
+            <Button
+              onClick={onStartAdd}
+              className="mt-4 bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] rounded-[var(--radius-lg)]"
+            >
+              <MaterialIcon name="add" className="mr-1" />
+              Tambah API Key
+            </Button>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {configs.map((config) => {
+              const isEditing = editingId === config.id;
+              return (
+                <div
+                  key={config.id}
+                  className={`p-4 rounded-[var(--radius-lg)] border-2 transition-colors ${
+                    isEditing
+                      ? "border-[var(--matcha-600)] bg-[var(--matcha-100)]"
+                      : "border-[var(--oat-border)] bg-[var(--warm-cream)]"
+                  }`}
+                >
+                  <div className="flex items-center justify-between">
+                    <div className="min-w-0">
+                      <div className="flex items-center gap-2 mb-1">
+                        <span className="font-semibold text-[var(--clay-black)] truncate">
+                          {config.name}
+                        </span>
+                        <span className="px-2 py-0.5 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-[10px] font-semibold">
+                          {providers.find((p) => p.value === config.provider)?.label ?? config.provider}
+                        </span>
+                      </div>
+                      <div className="text-xs text-[var(--warm-charcoal)]">
+                        {config.modelName} · {config.baseUrl.replace("https://", "").replace("/v1", "")}
+                      </div>
+                    </div>
+                    <div className="flex gap-2 shrink-0">
+                      <button
+                        onClick={() => onStartEdit(config)}
+                        className="p-2 rounded-[var(--radius-md)] hover:bg-[var(--oat-light)] text-[var(--warm-charcoal)] transition-colors"
+                        title="Edit"
+                      >
+                        <MaterialIcon name="edit" className="text-sm" />
+                      </button>
+                      <button
+                        onClick={() => {
+                          if (confirm("Yakin mau hapus konfigurasi ini?")) {
+                            onRemove(config.id);
+                          }
+                        }}
+                        className="p-2 rounded-[var(--radius-md)] hover:bg-[var(--pomegranate-400)]/10 text-[var(--pomegranate-400)] transition-colors"
+                        title="Hapus"
+                      >
+                        <MaterialIcon name="delete" className="text-sm" />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,46 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@labas/ui/components/card";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+export function SecurityInfo() {
+  return (
+    <div className="max-w-xl">
+      <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+        <CardHeader>
+          <CardTitle className="font-headline text-[var(--clay-black)]">Keamanan</CardTitle>
+          <CardDescription className="text-[var(--warm-charcoal)]">
+            Cara penyimpanan API key Anda.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center gap-3 p-4 bg-[var(--matcha-300)] rounded-[var(--radius-lg)]">
+            <MaterialIcon name="lock" className="text-xl text-[var(--matcha-800)]" />
+            <div>
+              <p className="font-medium text-[var(--matcha-800)]">Enkripsi Lokal</p>
+              <p className="text-sm text-[var(--matcha-800)]/70">
+                AES-GCM-256 dengan key di IndexedDB
+              </p>
+            </div>
+          </div>
+          <div className="text-xs text-[var(--warm-charcoal)] space-y-2">
+            <p className="flex items-center gap-2">
+              <MaterialIcon name="check_circle" className="text-xs text-[var(--matcha-600)] shrink-0 mt-0.5" />
+              API key tidak pernah dikirim ke server kami
+            </p>
+            <p className="flex items-center gap-2">
+              <MaterialIcon name="check_circle" className="text-xs text-[var(--matcha-600)] shrink-0 mt-0.5" />
+              Data terenkripsi di localStorage browser Anda
+            </p>
+            <p className="flex items-center gap-2">
+              <MaterialIcon name="check_circle" className="text-xs text-[var(--matcha-600)] shrink-0 mt-0.5" />
+              Key enkripsi tersimpan aman di IndexedDB
+            </p>
+            <p className="flex items-center gap-2">
+              <MaterialIcon name="check_circle" className="text-xs text-[var(--matcha-600)] shrink-0 mt-0.5" />
+              BYOK — Bring Your Own Key, platform tidak menyimpan key
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

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

@@ -0,0 +1,35 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@labas/ui/components/card";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+export function TipsCard() {
+  return (
+    <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] sticky top-8">
+      <CardHeader>
+        <CardTitle className="font-headline text-[var(--clay-black)]">Tips</CardTitle>
+        <CardDescription className="text-[var(--warm-charcoal)]">
+          Panduan singkat mengelola API key.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="text-xs text-[var(--warm-charcoal)] space-y-2">
+          <p className="flex items-start gap-2">
+            <MaterialIcon name="check_circle" className="text-xs text-[var(--matcha-600)] shrink-0 mt-0.5" />
+            BYOK — bawa key milik Anda sendiri
+          </p>
+          <p className="flex items-start gap-2">
+            <MaterialIcon name="check_circle" className="text-xs text-[var(--matcha-600)] shrink-0 mt-0.5" />
+            Platform tidak menyimpan key di server
+          </p>
+          <p className="flex items-start gap-2">
+            <MaterialIcon name="check_circle" className="text-xs text-[var(--matcha-600)] shrink-0 mt-0.5" />
+            Key dienkripsi secara lokal di browser
+          </p>
+          <p className="flex items-start gap-2">
+            <MaterialIcon name="check_circle" className="text-xs text-[var(--matcha-600)] shrink-0 mt-0.5" />
+            Anda bisa menambahkan beberapa config
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,174 @@
+import { useState } from "react";
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+} from "recharts";
+import { useQuery } from "@tanstack/react-query";
+import { trpc } from "@/utils/trpc";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@labas/ui/components/card";
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+} from "@labas/ui/components/tabs";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+type Period = "daily" | "weekly" | "monthly";
+
+interface ChartDataPoint {
+  date: string;
+  label: string;
+  totalTokens: number;
+  jobCount: number;
+}
+
+function formatTokenValue(value: number): string {
+  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`;
+  if (value >= 1_000) return `${(value / 1_000).toFixed(1)}K`;
+  return value.toString();
+}
+
+export function TokenUsageChart() {
+  const [period, setPeriod] = useState<Period>("daily");
+
+  const { data, isLoading } = useQuery(
+    trpc.ai.tokenUsageHistory.queryOptions({ period }),
+  );
+
+  const chartData: ChartDataPoint[] = (data ?? []).map((d) => ({
+    date: d.date,
+    label: d.label,
+    totalTokens: d.totalTokens,
+    jobCount: d.jobCount,
+  }));
+
+  const hasData = chartData.some((d) => d.totalTokens > 0 || d.jobCount > 0);
+
+  return (
+    <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <MaterialIcon name="show_chart" className="text-xl" />
+            <div>
+              <CardTitle className="font-headline text-[var(--clay-black)]">
+                Tren Penggunaan Token
+              </CardTitle>
+              <CardDescription className="text-[var(--warm-charcoal)]">
+                {period === "daily" && "7 hari terakhir"}
+                {period === "weekly" && "4 minggu terakhir"}
+                {period === "monthly" && "6 bulan terakhir"}
+              </CardDescription>
+            </div>
+          </div>
+          <Tabs
+            value={period}
+            onValueChange={(v: string | null) => setPeriod((v as Period) ?? "daily")}
+          >
+            <TabsList variant="line" className="h-8">
+              <TabsTrigger value="daily" className="text-xs px-3">Harian</TabsTrigger>
+              <TabsTrigger value="weekly" className="text-xs px-3">Mingguan</TabsTrigger>
+              <TabsTrigger value="monthly" className="text-xs px-3">Bulanan</TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {isLoading ? (
+          <div className="h-64 bg-[var(--oat-light)] animate-pulse rounded-[var(--radius-lg)]" />
+        ) : !hasData ? (
+          <div className="h-64 flex flex-col items-center justify-center text-[var(--warm-charcoal)]">
+            <MaterialIcon name="receipt_long" className="text-4xl text-[var(--warm-silver)] mb-3" />
+            <p className="font-semibold">Belum ada data penggunaan</p>
+            <p className="text-xs text-[var(--warm-silver)] mt-1">
+              Generate soal untuk melihat statistik penggunaan token.
+            </p>
+          </div>
+        ) : (
+          <ResponsiveContainer width="100%" height={256}>
+            <AreaChart data={chartData} margin={{ top: 5, right: 10, left: -10, bottom: 0 }}>
+              <defs>
+                <linearGradient id="tokenGradient" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor="var(--chart-1)" stopOpacity={0.3} />
+                  <stop offset="95%" stopColor="var(--chart-1)" stopOpacity={0} />
+                </linearGradient>
+                <linearGradient id="jobGradient" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor="var(--chart-2)" stopOpacity={0.3} />
+                  <stop offset="95%" stopColor="var(--chart-2)" stopOpacity={0} />
+                </linearGradient>
+              </defs>
+              <CartesianGrid strokeDasharray="3 3" stroke="var(--oat-border)" />
+              <XAxis
+                dataKey="label"
+                tick={{ fontSize: 12, fill: "var(--warm-charcoal)" }}
+                axisLine={{ stroke: "var(--oat-border)" }}
+                tickLine={false}
+              />
+              <YAxis
+                yAxisId="left"
+                tick={{ fontSize: 12, fill: "var(--warm-charcoal)" }}
+                axisLine={false}
+                tickLine={false}
+                tickFormatter={formatTokenValue}
+              />
+              <YAxis
+                yAxisId="right"
+                orientation="right"
+                tick={{ fontSize: 12, fill: "var(--warm-charcoal)" }}
+                axisLine={false}
+                tickLine={false}
+              />
+              <Tooltip
+                contentStyle={{
+                  backgroundColor: "var(--pure-white)",
+                  border: "2px solid var(--oat-border)",
+                  borderRadius: "var(--radius-lg)",
+                  fontSize: 13,
+                }}
+                formatter={(value: unknown, name: unknown) => {
+                  const num = typeof value === "number" ? value : 0;
+                  const n = typeof name === "string" ? name : "";
+                  if (n === "totalTokens") return [num.toLocaleString("id-ID"), "Token"];
+                  if (n === "jobCount") return [num, "Job"];
+                  return [num, n];
+                }}
+              />
+              <Legend
+                wrapperStyle={{ fontSize: 12, paddingTop: 8 }}
+                formatter={(v: string) => {
+                  if (v === "totalTokens") return "Token";
+                  if (v === "jobCount") return "Job";
+                  return v;
+                }}
+              />
+              <Area
+                yAxisId="left"
+                type="monotone"
+                dataKey="totalTokens"
+                stroke="var(--chart-1)"
+                strokeWidth={2}
+                fill="url(#tokenGradient)"
+                name="totalTokens"
+              />
+              <Area
+                yAxisId="right"
+                type="monotone"
+                dataKey="jobCount"
+                stroke="var(--chart-2)"
+                strokeWidth={2}
+                fill="url(#jobGradient)"
+                name="jobCount"
+              />
+            </AreaChart>
+          </ResponsiveContainer>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

apps/web/src/routes/settings.tsx

@@ -1,31 +1,29 @@
-import { useState } from "react";
+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 { Button } from "@labas/ui/components/button";
-import { Input } from "@labas/ui/components/input";
-import { Label } from "@labas/ui/components/label";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@labas/ui/components/card";
 import {
   Tabs,
   TabsList,
   TabsTrigger,
   TabsContent,
 } from "@labas/ui/components/tabs";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@labas/ui/components/select";
+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 { z } from "zod";
 
 export const Route = createFileRoute("/settings")({
   component: RouteComponent,
+  validateSearch: z.object({
+    tab: z.enum(["api-keys", "token-usage", "security"]).optional(),
+  }).parse,
   beforeLoad: async () => {
     const session = await authClient.getSession();
     if (!session.data) {
@@ -54,6 +52,8 @@ function defaultConfig(): Omit<ApiKeyConfig, "id" | "apiKey"> {
   };
 }
 
+type Tab = "api-keys" | "token-usage" | "security";
+
 function TokenUsageSection() {
   const { data, isLoading } = useQuery(trpc.ai.tokenUsageToday.queryOptions());
 
@@ -61,130 +61,134 @@ function TokenUsageSection() {
   const jobs = data?.jobs ?? [];
 
   return (
-    <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 className="space-y-6">
+      <TokenUsageChart />
 
-        <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)]" />
-              ))}
+      <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>
-          ) : 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.
+          </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 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}
+          </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 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>
+                          </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>
   );
 }
 
@@ -192,20 +196,36 @@ 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);
 
-  // Form state
-  const [form, setForm] = useState<Omit<ApiKeyConfig, "id"> & { apiKey: string }>({
-    ...defaultConfig(),
-    apiKey: "",
-  });
+  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);
@@ -219,7 +239,7 @@ function RouteComponent() {
       baseUrl: config.baseUrl,
       modelName: config.modelName,
       maxTokens: config.maxTokens ?? 16384,
-      apiKey: "", // kosong = tidak ubah
+      apiKey: "",
     });
     setEditingId(config.id);
     setIsAdding(false);
@@ -251,9 +271,9 @@ function RouteComponent() {
 
   const isFormOpen = isAdding || editingId !== null;
   const canSave =
-    form.name.trim() &&
-    form.baseUrl.trim() &&
-    form.modelName.trim() &&
+    !!form.name.trim() &&
+    !!form.baseUrl.trim() &&
+    !!form.modelName.trim() &&
     (isAdding ? !!form.apiKey : true);
 
   return (
@@ -272,7 +292,7 @@ function RouteComponent() {
         </p>
       </section>
 
-      <Tabs defaultValue="api-keys" className="w-full">
+      <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>
@@ -282,255 +302,33 @@ function RouteComponent() {
         <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">
-              {/* API Key List */}
-              <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
-                <CardHeader>
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-3">
-                      <MaterialIcon name="key" className="text-xl" />
-                      <div>
-                        <CardTitle className="font-headline text-[var(--clay-black)]">API Keys</CardTitle>
-                        <CardDescription className="text-[var(--warm-charcoal)]">
-                          {configs.length} konfigurasi tersimpan
-                        </CardDescription>
-                      </div>
-                    </div>
-                    {!isFormOpen && (
-                      <Button
-                        onClick={startAdd}
-                        className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] rounded-[var(--radius-lg)] clay-shadow clay-hover text-sm"
-                      >
-                        <MaterialIcon name="add" className="mr-1" />
-                        Tambah
-                      </Button>
-                    )}
-                  </div>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  {isLoading ? (
-                    <div className="h-20 bg-[var(--oat-light)] animate-pulse rounded-[var(--radius-lg)]" />
-                  ) : configs.length === 0 ? (
-                    <div className="text-center py-8">
-                      <MaterialIcon name="key_off" className="text-4xl text-[var(--warm-silver)] mx-auto mb-3" />
-                      <p className="text-[var(--warm-charcoal)] font-semibold">Belum ada API key</p>
-                      <p className="text-xs text-[var(--warm-silver)] mt-1">
-                        Tambahkan minimal satu key untuk generate soal.
-                      </p>
-                      <Button
-                        onClick={startAdd}
-                        className="mt-4 bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] rounded-[var(--radius-lg)]"
-                      >
-                        <MaterialIcon name="add" className="mr-1" />
-                        Tambah API Key
-                      </Button>
-                    </div>
-                  ) : (
-                    <div className="space-y-3">
-                      {configs.map((config) => (
-                        <div
-                          key={config.id}
-                          className={`p-4 rounded-[var(--radius-lg)] border-2 transition-colors ${
-                            editingId === config.id
-                              ? "border-[var(--matcha-600)] bg-[var(--matcha-100)]"
-                              : "border-[var(--oat-border)] bg-[var(--warm-cream)]"
-                          }`}
-                        >
-                          <div className="flex items-center justify-between">
-                            <div className="min-w-0">
-                              <div className="flex items-center gap-2 mb-1">
-                                <span className="font-semibold text-[var(--clay-black)] truncate">
-                                  {config.name}
-                                </span>
-                                <span className="px-2 py-0.5 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-[10px] font-semibold">
-                                  {PROVIDERS.find((p) => p.value === config.provider)?.label ?? config.provider}
-                                </span>
-                              </div>
-                              <div className="text-xs text-[var(--warm-charcoal)]">
-                                {config.modelName} · {config.baseUrl.replace("https://", "").replace("/v1", "")}
-                              </div>
-                            </div>
-                            <div className="flex gap-2 shrink-0">
-                              <button
-                                onClick={() => startEdit(config)}
-                                className="p-2 rounded-[var(--radius-md)] hover:bg-[var(--oat-light)] text-[var(--warm-charcoal)] transition-colors"
-                                title="Edit"
-                              >
-                                <MaterialIcon name="edit" className="text-sm" />
-                              </button>
-                              <button
-                                onClick={() => {
-                                  if (confirm("Yakin mau hapus konfigurasi ini?")) {
-                                    removeConfig(config.id);
-                                  }
-                                }}
-                                className="p-2 rounded-[var(--radius-md)] hover:bg-[var(--pomegranate-400)]/10 text-[var(--pomegranate-400)] transition-colors"
-                                title="Hapus"
-                              >
-                                <MaterialIcon name="delete" className="text-sm" />
-                              </button>
-                            </div>
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  )}
-                </CardContent>
-              </Card>
+              <ApiKeyList
+                configs={configs}
+                isLoading={isLoading}
+                editingId={editingId}
+                isFormOpen={isFormOpen}
+                providers={PROVIDERS}
+                onStartAdd={startAdd}
+                onStartEdit={startEdit}
+                onRemove={removeConfig}
+              />
 
-              {/* Add/Edit Form */}
               {isFormOpen && (
-                <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--matcha-400)] rounded-[var(--radius-xl)]">
-                  <CardHeader>
-                    <CardTitle className="font-headline text-[var(--clay-black)]">
-                      {isAdding ? "Tambah API Key Baru" : "Edit API Key"}
-                    </CardTitle>
-                    <CardDescription className="text-[var(--warm-charcoal)]">
-                      {isAdding
-                        ? "Tambahkan konfigurasi provider baru."
-                        : "Kosongkan field API Key jika tidak ingin mengubahnya."}
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent className="space-y-5">
-                    <div className="space-y-2">
-                      <Label htmlFor="name" className="text-[var(--clay-black)]">Nama Config</Label>
-                      <Input
-                        id="name"
-                        value={form.name}
-                        onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
-                        placeholder="Contoh: OpenAI GPT-4o"
-                        className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)]"
-                      />
-                    </div>
-
-                    <div className="grid grid-cols-2 gap-4">
-                      <div className="space-y-2">
-                        <Label htmlFor="provider" className="text-[var(--clay-black)]">Provider</Label>
-                        <Select
-                          items={PROVIDERS}
-                          value={form.provider}
-                          onValueChange={(v: string | null) =>
-                            setForm((f) => ({ ...f, provider: v ?? "openai" }))
-                          }
-                        >
-                          <SelectTrigger id="provider">
-                            <SelectValue placeholder="Pilih provider" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectGroup>
-                              {PROVIDERS.map((p) => (
-                                <SelectItem key={p.value} value={p.value}>{p.label}</SelectItem>
-                              ))}
-                            </SelectGroup>
-                          </SelectContent>
-                        </Select>
-                      </div>
-                      <div className="space-y-2">
-                        <Label htmlFor="model" className="text-[var(--clay-black)]">Model</Label>
-                        <Input
-                          id="model"
-                          value={form.modelName}
-                          onChange={(e) => setForm((f) => ({ ...f, modelName: e.target.value }))}
-                          placeholder="gpt-4o-mini"
-                          className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)]"
-                        />
-                      </div>
-                    </div>
-
-                    <div className="grid grid-cols-2 gap-4">
-                      <div className="space-y-2">
-                        <Label htmlFor="baseUrl" className="text-[var(--clay-black)]">Base URL</Label>
-                        <Input
-                          id="baseUrl"
-                          value={form.baseUrl}
-                          onChange={(e) => setForm((f) => ({ ...f, baseUrl: e.target.value }))}
-                          placeholder="https://api.openai.com/v1"
-                          className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)]"
-                        />
-                      </div>
-                      <div className="space-y-2">
-                        <Label htmlFor="maxTokens" className="text-[var(--clay-black)]">Max Tokens</Label>
-                        <Input
-                          id="maxTokens"
-                          type="number"
-                          min={1}
-                          max={1_000_000}
-                          value={form.maxTokens}
-                          onChange={(e) => setForm((f) => ({ ...f, maxTokens: Number(e.target.value) }))}
-                          placeholder="16384"
-                          className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)]"
-                        />
-                      </div>
-                    </div>
-
-                    <div className="space-y-2">
-                      <Label htmlFor="apiKey" className="text-[var(--clay-black)]">
-                        API Key
-                        {!isAdding && (
-                          <span className="text-[var(--warm-silver)] font-normal ml-1">
-                            (kosongkan jika tidak diubah)
-                          </span>
-                        )}
-                      </Label>
-                      <Input
-                        id="apiKey"
-                        type="password"
-                        value={form.apiKey}
-                        onChange={(e) => setForm((f) => ({ ...f, apiKey: e.target.value }))}
-                        placeholder={isAdding ? "sk-..." : "•••••••• (kosongkan untuk tidak mengubah)"}
-                        className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)]"
-                      />
-                    </div>
-
-                    <div className="flex gap-3">
-                      <Button
-                        onClick={handleSave}
-                        disabled={!canSave || isSaving}
-                        className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] rounded-[var(--radius-lg)] h-11 clay-shadow clay-hover"
-                      >
-                        {isSaving ? "Menyimpan..." : isAdding ? "Simpan" : "Update"}
-                      </Button>
-                      <Button
-                        variant="outline"
-                        onClick={cancelEdit}
-                        className="rounded-[var(--radius-lg)] h-11 border-2 border-[var(--oat-border)]"
-                      >
-                        Batal
-                      </Button>
-                    </div>
-                  </CardContent>
-                </Card>
+                <ApiKeyForm
+                  isAdding={isAdding}
+                  isSaving={isSaving}
+                  form={form}
+                  canSave={canSave}
+                  providers={PROVIDERS}
+                  onChange={handleFormChange}
+                  onSave={handleSave}
+                  onCancel={cancelEdit}
+                />
               )}
             </div>
 
             <div className="lg:col-span-5">
-              <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] sticky top-8">
-                <CardHeader>
-                  <CardTitle className="font-headline text-[var(--clay-black)]">Tips</CardTitle>
-                  <CardDescription className="text-[var(--warm-charcoal)]">
-                    Panduan singkat mengelola API key.
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <div className="text-xs text-[var(--warm-charcoal)] space-y-2">
-                    <p className="flex items-start gap-2">
-                      <MaterialIcon name="check_circle" className="text-xs text-[var(--matcha-600)] shrink-0 mt-0.5" />
-                      BYOK — bawa key milik Anda sendiri
-                    </p>
-                    <p className="flex items-start gap-2">
-                      <MaterialIcon name="check_circle" className="text-xs text-[var(--matcha-600)] shrink-0 mt-0.5" />
-                      Platform tidak menyimpan key di server
-                    </p>
-                    <p className="flex items-start gap-2">
-                      <MaterialIcon name="check_circle" className="text-xs text-[var(--matcha-600)] shrink-0 mt-0.5" />
-                      Key dienkripsi secara lokal di browser
-                    </p>
-                    <p className="flex items-start gap-2">
-                      <MaterialIcon name="check_circle" className="text-xs text-[var(--matcha-600)] shrink-0 mt-0.5" />
-                      Anda bisa menambahkan beberapa config
-                    </p>
-                  </div>
-                </CardContent>
-              </Card>
+              <TipsCard />
             </div>
           </div>
         </TabsContent>
@@ -540,45 +338,7 @@ function RouteComponent() {
         </TabsContent>
 
         <TabsContent value="security">
-          <div className="max-w-xl">
-            <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
-              <CardHeader>
-                <CardTitle className="font-headline text-[var(--clay-black)]">Keamanan</CardTitle>
-                <CardDescription className="text-[var(--warm-charcoal)]">
-                  Cara penyimpanan API key Anda.
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="flex items-center gap-3 p-4 bg-[var(--matcha-300)] rounded-[var(--radius-lg)]">
-                  <MaterialIcon name="lock" className="text-xl text-[var(--matcha-800)]" />
-                  <div>
-                    <p className="font-medium text-[var(--matcha-800)]">Enkripsi Lokal</p>
-                    <p className="text-sm text-[var(--matcha-800)]/70">
-                      AES-GCM-256 dengan key di IndexedDB
-                    </p>
-                  </div>
-                </div>
-                <div className="text-xs text-[var(--warm-charcoal)] space-y-2">
-                  <p className="flex items-center gap-2">
-                    <MaterialIcon name="check_circle" className="text-xs text-[var(--matcha-600)] shrink-0 mt-0.5" />
-                    API key tidak pernah dikirim ke server kami
-                  </p>
-                  <p className="flex items-center gap-2">
-                    <MaterialIcon name="check_circle" className="text-xs text-[var(--matcha-600)] shrink-0 mt-0.5" />
-                    Data terenkripsi di localStorage browser Anda
-                  </p>
-                  <p className="flex items-center gap-2">
-                    <MaterialIcon name="check_circle" className="text-xs text-[var(--matcha-600)] shrink-0 mt-0.5" />
-                    Key enkripsi tersimpan aman di IndexedDB
-                  </p>
-                  <p className="flex items-center gap-2">
-                    <MaterialIcon name="check_circle" className="text-xs text-[var(--matcha-600)] shrink-0 mt-0.5" />
-                    BYOK — Bring Your Own Key, platform tidak menyimpan key
-                  </p>
-                </div>
-              </CardContent>
-            </Card>
-          </div>
+          <SecurityInfo />
         </TabsContent>
       </Tabs>
     </div>

packages/api/src/routers/ai.ts

@@ -129,6 +129,109 @@ export const aiRouter = router({
     };
   }),
 
+  tokenUsageHistory: protectedProcedure
+    .input(
+      z.object({
+        period: z.enum(["daily", "weekly", "monthly"]),
+      }),
+    )
+    .query(async ({ ctx, input }) => {
+      const userId = ctx.session.user.id;
+      const now = new Date();
+
+      let startDate: Date;
+      let dateFormat: (d: Date) => string;
+
+      switch (input.period) {
+        case "daily": {
+          startDate = new Date(now);
+          startDate.setDate(startDate.getDate() - 6);
+          startDate.setHours(0, 0, 0, 0);
+          dateFormat = (d: Date) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+          break;
+        }
+        case "weekly": {
+          startDate = new Date(now);
+          startDate.setDate(startDate.getDate() - 27);
+          startDate.setHours(0, 0, 0, 0);
+          dateFormat = (d: Date) => {
+            const weekStart = new Date(d);
+            weekStart.setDate(weekStart.getDate() - weekStart.getDay());
+            return `${weekStart.getFullYear()}-W${String(Math.ceil(((weekStart.getTime() - new Date(weekStart.getFullYear(), 0, 1).getTime()) / 86400000 + 1) / 7)).padStart(2, "0")}`;
+          };
+          break;
+        }
+        case "monthly": {
+          startDate = new Date(now);
+          startDate.setMonth(startDate.getMonth() - 5);
+          startDate.setDate(1);
+          startDate.setHours(0, 0, 0, 0);
+          dateFormat = (d: Date) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
+          break;
+        }
+      }
+
+      const rows = await db
+        .select({
+          date: sql<string>`date_trunc('day', ${generationJob.createdAt})::date`,
+          totalTokens: sql<number>`coalesce(sum(${generationJob.tokensUsed}), 0)`,
+          jobCount: sql<number>`count(*)`,
+        })
+        .from(generationJob)
+        .where(
+          and(
+            eq(generationJob.userId, userId),
+            gte(generationJob.createdAt, startDate),
+          ),
+        )
+        .groupBy(sql`date_trunc('day', ${generationJob.createdAt})::date`)
+        .orderBy(sql`date_trunc('day', ${generationJob.createdAt})::date`);
+
+      const grouped: Record<string, { date: string; totalTokens: number; jobCount: number }> = {};
+
+      for (const row of rows) {
+        const d = new Date(row.date as string);
+        const key = dateFormat(d);
+        if (!grouped[key]) {
+          grouped[key] = { date: key, totalTokens: 0, jobCount: 0 };
+        }
+        grouped[key].totalTokens += Number(row.totalTokens);
+        grouped[key].jobCount += Number(row.jobCount);
+      }
+
+      const labels: { date: string; label: string }[] = [];
+      if (input.period === "daily") {
+        for (let i = 6; i >= 0; i--) {
+          const d = new Date(now);
+          d.setDate(d.getDate() - i);
+          labels.push({ date: dateFormat(d), label: `${d.getDate()}/${d.getMonth() + 1}` });
+        }
+      } else if (input.period === "weekly") {
+        for (let i = 3; i >= 0; i--) {
+          const d = new Date(now);
+          d.setDate(d.getDate() - i * 7);
+          const weekStart = new Date(d);
+          weekStart.setDate(weekStart.getDate() - weekStart.getDay());
+          labels.push({ date: dateFormat(weekStart), label: `W${i === 0 ? "Ini" : `${i}`}` });
+        }
+      } else {
+        for (let i = 5; i >= 0; i--) {
+          const d = new Date(now);
+          d.setMonth(d.getMonth() - i);
+          const monthNames = ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Des"];
+          labels.push({ date: dateFormat(d), label: `${monthNames[d.getMonth()]} ${d.getFullYear()}` });
+        }
+      }
+
+      const result = labels.map((l) => ({
+        ...l,
+        totalTokens: grouped[l.date]?.totalTokens ?? 0,
+        jobCount: grouped[l.date]?.jobCount ?? 0,
+      }));
+
+      return result;
+    }),
+
   retryJob: protectedProcedure
     .input(z.object({ jobId: z.string().uuid() }))
     .mutation(async ({ ctx, input }) => {