feat: implement admin panel with multiple routes for user management, credits, jobs, and content moderation. Add admin dashboard for platform overview and integrate visibility controls for featured content. Enhance sidebar navigation for admin access and ensure proper session handling for admin users.

apps/server/src/index.ts

@@ -3,27 +3,37 @@ import { createContext } from "@labas/api/context";
 import { appRouter } from "@labas/api/routers/index";
 import { auth } from "@labas/auth";
 import { env } from "@labas/env/server";
+import { logger, withRequestId } from "@labas/api/logger";
 import { Hono } from "hono";
 import { cors } from "hono/cors";
-import { logger } from "hono/logger";
 
-// Side-effect: start background job worker
 import "@labas/api/queue";
 
 const app = new Hono();
 
-app.use(logger());
-app.use(
-  "/*",
-  async (c, next) => {
-    await next();
-    c.res.headers.set("X-Content-Type-Options", "nosniff");
-    c.res.headers.set("X-Frame-Options", "DENY");
-    c.res.headers.set("Referrer-Policy", "strict-origin-when-cross-origin");
-    c.res.headers.set("X-XSS-Protection", "0");
-    c.res.headers.set("Permissions-Policy", "camera=(), microphone=(), geolocation=()");
-  },
-);
+app.use("/*", async (c, next) => {
+  const reqId = c.req.header("x-request-id") ?? crypto.randomUUID();
+  const reqLogger = withRequestId(reqId);
+  const start = Date.now();
+
+  c.res.headers.set("x-request-id", reqId);
+  reqLogger.info(`${c.req.method} ${c.req.path}`);
+
+  await next();
+
+  const duration = Date.now() - start;
+  reqLogger.info(`${c.req.method} ${c.req.path} ${c.res.status}`, { durationMs: duration });
+});
+
+app.use("/*", async (c, next) => {
+  await next();
+  c.res.headers.set("X-Content-Type-Options", "nosniff");
+  c.res.headers.set("X-Frame-Options", "DENY");
+  c.res.headers.set("Referrer-Policy", "strict-origin-when-cross-origin");
+  c.res.headers.set("X-XSS-Protection", "0");
+  c.res.headers.set("Permissions-Policy", "camera=(), microphone=(), geolocation=()");
+});
+
 app.use(
   "/*",
   cors({

apps/web/src/components/sidebar.tsx

@@ -1,6 +1,8 @@
 import { useState } from "react";
 import { Link, useLocation, useNavigate } from "@tanstack/react-router";
+import { useQuery } from "@tanstack/react-query";
 import { authClient } from "@/lib/auth-client";
+import { trpc } from "@/utils/trpc";
 import { useSidebar } from "@/hooks/use-sidebar";
 import { triggerGlobalTour } from "@/components/TourGuide";
 
@@ -89,6 +91,11 @@ export function Sidebar() {
   const { data: session } = authClient.useSession();
   const isLoggedIn = !!session;
 
+  const { data: adminData } = useQuery(
+    trpc.admin.isAdmin.queryOptions(undefined, { enabled: isLoggedIn }),
+  );
+  const isAdmin = !!adminData?.isAdmin;
+
   async function handleSignOut() {
     await authClient.signOut();
     navigate({ to: "/landing" });
@@ -141,6 +148,24 @@ export function Sidebar() {
               })}
             </div>
           ))}
+
+          {isAdmin && (
+            <div className="space-y-1 pt-2 border-t border-[var(--matcha-400)]/30">
+              {!collapsed && (
+                <p className="px-3 text-[10px] font-bold text-[var(--matcha-600)] uppercase tracking-wider">
+                  Admin
+                </p>
+              )}
+              {[{ to: "/admin", label: "Admin Panel", icon: "admin_panel_settings" }].map((item) => {
+                const isActive =
+                  location.pathname === item.to ||
+                  (location.pathname.startsWith(`${item.to}/`) && item.to !== "/");
+                return (
+                  <NavLink key={item.to} item={item} isActive={isActive} collapsed={collapsed} />
+                );
+              })}
+            </div>
+          )}
         </nav>
 
         <div className="mt-auto space-y-1 pt-4 border-t border-[var(--oat-border)] w-full">

apps/web/src/routeTree.gen.ts

@@ -23,10 +23,17 @@ import { Route as GenerateRouteImport } from './routes/generate'
 import { Route as ForgotPasswordRouteImport } from './routes/forgot-password'
 import { Route as BankRouteImport } from './routes/bank'
 import { Route as AnalyticsRouteImport } from './routes/analytics'
+import { Route as AdminRouteImport } from './routes/admin'
 import { Route as IndexRouteImport } from './routes/index'
+import { Route as AdminIndexRouteImport } from './routes/admin.index'
 import { Route as ProfileUserIdRouteImport } from './routes/profile.$userId'
 import { Route as PackageIdRouteImport } from './routes/package.$id'
 import { Route as AttemptIdRouteImport } from './routes/attempt.$id'
+import { Route as AdminUsersRouteImport } from './routes/admin.users'
+import { Route as AdminModerationRouteImport } from './routes/admin.moderation'
+import { Route as AdminJobsRouteImport } from './routes/admin.jobs'
+import { Route as AdminFeaturedRouteImport } from './routes/admin.featured'
+import { Route as AdminCreditsRouteImport } from './routes/admin.credits'
 import { Route as PackageIdIndexRouteImport } from './routes/package.$id.index'
 import { Route as PackageIdTakeRouteImport } from './routes/package.$id.take'
 import { Route as PackageIdAttemptAttemptIdRouteImport } from './routes/package.$id.attempt.$attemptId'
@@ -101,11 +108,21 @@ const AnalyticsRoute = AnalyticsRouteImport.update({
   path: '/analytics',
   getParentRoute: () => rootRouteImport,
 } as any)
+const AdminRoute = AdminRouteImport.update({
+  id: '/admin',
+  path: '/admin',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const AdminIndexRoute = AdminIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => AdminRoute,
+} as any)
 const ProfileUserIdRoute = ProfileUserIdRouteImport.update({
   id: '/profile/$userId',
   path: '/profile/$userId',
@@ -121,6 +138,31 @@ const AttemptIdRoute = AttemptIdRouteImport.update({
   path: '/attempt/$id',
   getParentRoute: () => rootRouteImport,
 } as any)
+const AdminUsersRoute = AdminUsersRouteImport.update({
+  id: '/users',
+  path: '/users',
+  getParentRoute: () => AdminRoute,
+} as any)
+const AdminModerationRoute = AdminModerationRouteImport.update({
+  id: '/moderation',
+  path: '/moderation',
+  getParentRoute: () => AdminRoute,
+} as any)
+const AdminJobsRoute = AdminJobsRouteImport.update({
+  id: '/jobs',
+  path: '/jobs',
+  getParentRoute: () => AdminRoute,
+} as any)
+const AdminFeaturedRoute = AdminFeaturedRouteImport.update({
+  id: '/featured',
+  path: '/featured',
+  getParentRoute: () => AdminRoute,
+} as any)
+const AdminCreditsRoute = AdminCreditsRouteImport.update({
+  id: '/credits',
+  path: '/credits',
+  getParentRoute: () => AdminRoute,
+} as any)
 const PackageIdIndexRoute = PackageIdIndexRouteImport.update({
   id: '/',
   path: '/',
@@ -140,6 +182,7 @@ const PackageIdAttemptAttemptIdRoute =
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '/admin': typeof AdminRouteWithChildren
   '/analytics': typeof AnalyticsRoute
   '/bank': typeof BankRoute
   '/forgot-password': typeof ForgotPasswordRoute
@@ -154,9 +197,15 @@ export interface FileRoutesByFullPath {
   '/settings': typeof SettingsRoute
   '/setup-avatar': typeof SetupAvatarRoute
   '/verify-email': typeof VerifyEmailRoute
+  '/admin/credits': typeof AdminCreditsRoute
+  '/admin/featured': typeof AdminFeaturedRoute
+  '/admin/jobs': typeof AdminJobsRoute
+  '/admin/moderation': typeof AdminModerationRoute
+  '/admin/users': typeof AdminUsersRoute
   '/attempt/$id': typeof AttemptIdRoute
   '/package/$id': typeof PackageIdRouteWithChildren
   '/profile/$userId': typeof ProfileUserIdRoute
+  '/admin/': typeof AdminIndexRoute
   '/package/$id/take': typeof PackageIdTakeRoute
   '/package/$id/': typeof PackageIdIndexRoute
   '/package/$id/attempt/$attemptId': typeof PackageIdAttemptAttemptIdRoute
@@ -177,8 +226,14 @@ export interface FileRoutesByTo {
   '/settings': typeof SettingsRoute
   '/setup-avatar': typeof SetupAvatarRoute
   '/verify-email': typeof VerifyEmailRoute
+  '/admin/credits': typeof AdminCreditsRoute
+  '/admin/featured': typeof AdminFeaturedRoute
+  '/admin/jobs': typeof AdminJobsRoute
+  '/admin/moderation': typeof AdminModerationRoute
+  '/admin/users': typeof AdminUsersRoute
   '/attempt/$id': typeof AttemptIdRoute
   '/profile/$userId': typeof ProfileUserIdRoute
+  '/admin': typeof AdminIndexRoute
   '/package/$id/take': typeof PackageIdTakeRoute
   '/package/$id': typeof PackageIdIndexRoute
   '/package/$id/attempt/$attemptId': typeof PackageIdAttemptAttemptIdRoute
@@ -186,6 +241,7 @@ export interface FileRoutesByTo {
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
+  '/admin': typeof AdminRouteWithChildren
   '/analytics': typeof AnalyticsRoute
   '/bank': typeof BankRoute
   '/forgot-password': typeof ForgotPasswordRoute
@@ -200,9 +256,15 @@ export interface FileRoutesById {
   '/settings': typeof SettingsRoute
   '/setup-avatar': typeof SetupAvatarRoute
   '/verify-email': typeof VerifyEmailRoute
+  '/admin/credits': typeof AdminCreditsRoute
+  '/admin/featured': typeof AdminFeaturedRoute
+  '/admin/jobs': typeof AdminJobsRoute
+  '/admin/moderation': typeof AdminModerationRoute
+  '/admin/users': typeof AdminUsersRoute
   '/attempt/$id': typeof AttemptIdRoute
   '/package/$id': typeof PackageIdRouteWithChildren
   '/profile/$userId': typeof ProfileUserIdRoute
+  '/admin/': typeof AdminIndexRoute
   '/package/$id/take': typeof PackageIdTakeRoute
   '/package/$id/': typeof PackageIdIndexRoute
   '/package/$id/attempt/$attemptId': typeof PackageIdAttemptAttemptIdRoute
@@ -211,6 +273,7 @@ export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | '/'
+    | '/admin'
     | '/analytics'
     | '/bank'
     | '/forgot-password'
@@ -225,9 +288,15 @@ export interface FileRouteTypes {
     | '/settings'
     | '/setup-avatar'
     | '/verify-email'
+    | '/admin/credits'
+    | '/admin/featured'
+    | '/admin/jobs'
+    | '/admin/moderation'
+    | '/admin/users'
     | '/attempt/$id'
     | '/package/$id'
     | '/profile/$userId'
+    | '/admin/'
     | '/package/$id/take'
     | '/package/$id/'
     | '/package/$id/attempt/$attemptId'
@@ -248,14 +317,21 @@ export interface FileRouteTypes {
     | '/settings'
     | '/setup-avatar'
     | '/verify-email'
+    | '/admin/credits'
+    | '/admin/featured'
+    | '/admin/jobs'
+    | '/admin/moderation'
+    | '/admin/users'
     | '/attempt/$id'
     | '/profile/$userId'
+    | '/admin'
     | '/package/$id/take'
     | '/package/$id'
     | '/package/$id/attempt/$attemptId'
   id:
     | '__root__'
     | '/'
+    | '/admin'
     | '/analytics'
     | '/bank'
     | '/forgot-password'
@@ -270,9 +346,15 @@ export interface FileRouteTypes {
     | '/settings'
     | '/setup-avatar'
     | '/verify-email'
+    | '/admin/credits'
+    | '/admin/featured'
+    | '/admin/jobs'
+    | '/admin/moderation'
+    | '/admin/users'
     | '/attempt/$id'
     | '/package/$id'
     | '/profile/$userId'
+    | '/admin/'
     | '/package/$id/take'
     | '/package/$id/'
     | '/package/$id/attempt/$attemptId'
@@ -280,6 +362,7 @@ export interface FileRouteTypes {
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  AdminRoute: typeof AdminRouteWithChildren
   AnalyticsRoute: typeof AnalyticsRoute
   BankRoute: typeof BankRoute
   ForgotPasswordRoute: typeof ForgotPasswordRoute
@@ -399,6 +482,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AnalyticsRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/admin': {
+      id: '/admin'
+      path: '/admin'
+      fullPath: '/admin'
+      preLoaderRoute: typeof AdminRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/': {
       id: '/'
       path: '/'
@@ -406,6 +496,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/admin/': {
+      id: '/admin/'
+      path: '/'
+      fullPath: '/admin/'
+      preLoaderRoute: typeof AdminIndexRouteImport
+      parentRoute: typeof AdminRoute
+    }
     '/profile/$userId': {
       id: '/profile/$userId'
       path: '/profile/$userId'
@@ -427,6 +524,41 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AttemptIdRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/admin/users': {
+      id: '/admin/users'
+      path: '/users'
+      fullPath: '/admin/users'
+      preLoaderRoute: typeof AdminUsersRouteImport
+      parentRoute: typeof AdminRoute
+    }
+    '/admin/moderation': {
+      id: '/admin/moderation'
+      path: '/moderation'
+      fullPath: '/admin/moderation'
+      preLoaderRoute: typeof AdminModerationRouteImport
+      parentRoute: typeof AdminRoute
+    }
+    '/admin/jobs': {
+      id: '/admin/jobs'
+      path: '/jobs'
+      fullPath: '/admin/jobs'
+      preLoaderRoute: typeof AdminJobsRouteImport
+      parentRoute: typeof AdminRoute
+    }
+    '/admin/featured': {
+      id: '/admin/featured'
+      path: '/featured'
+      fullPath: '/admin/featured'
+      preLoaderRoute: typeof AdminFeaturedRouteImport
+      parentRoute: typeof AdminRoute
+    }
+    '/admin/credits': {
+      id: '/admin/credits'
+      path: '/credits'
+      fullPath: '/admin/credits'
+      preLoaderRoute: typeof AdminCreditsRouteImport
+      parentRoute: typeof AdminRoute
+    }
     '/package/$id/': {
       id: '/package/$id/'
       path: '/'
@@ -451,6 +583,26 @@ declare module '@tanstack/react-router' {
   }
 }
 
+interface AdminRouteChildren {
+  AdminCreditsRoute: typeof AdminCreditsRoute
+  AdminFeaturedRoute: typeof AdminFeaturedRoute
+  AdminJobsRoute: typeof AdminJobsRoute
+  AdminModerationRoute: typeof AdminModerationRoute
+  AdminUsersRoute: typeof AdminUsersRoute
+  AdminIndexRoute: typeof AdminIndexRoute
+}
+
+const AdminRouteChildren: AdminRouteChildren = {
+  AdminCreditsRoute: AdminCreditsRoute,
+  AdminFeaturedRoute: AdminFeaturedRoute,
+  AdminJobsRoute: AdminJobsRoute,
+  AdminModerationRoute: AdminModerationRoute,
+  AdminUsersRoute: AdminUsersRoute,
+  AdminIndexRoute: AdminIndexRoute,
+}
+
+const AdminRouteWithChildren = AdminRoute._addFileChildren(AdminRouteChildren)
+
 interface PackageIdRouteChildren {
   PackageIdTakeRoute: typeof PackageIdTakeRoute
   PackageIdIndexRoute: typeof PackageIdIndexRoute
@@ -469,6 +621,7 @@ const PackageIdRouteWithChildren = PackageIdRoute._addFileChildren(
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  AdminRoute: AdminRouteWithChildren,
   AnalyticsRoute: AnalyticsRoute,
   BankRoute: BankRoute,
   ForgotPasswordRoute: ForgotPasswordRoute,

apps/web/src/routes/__root.tsx

@@ -41,7 +41,8 @@ function RootComponent() {
       m.routeId === "/login" ||
       m.routeId === "/setup-avatar" ||
       m.routeId === "/verify-email" ||
-      m.routeId === "/forgot-password",
+      m.routeId === "/forgot-password" ||
+      m.routeId.startsWith("/admin"),
   );
   const isLanding = matches.some((m) => m.routeId === "/landing");
 

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

@@ -0,0 +1,191 @@
+import { useState } from "react";
+import { createFileRoute } from "@tanstack/react-router";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { trpc } from "@/utils/trpc";
+import { Input } from "@labas/ui/components/input";
+import { Button } from "@labas/ui/components/button";
+import { toast } from "sonner";
+
+export const Route = createFileRoute("/admin/credits")({
+  component: AdminCredits,
+});
+
+function AdminCredits() {
+  const [search, setSearch] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+  const [selectedUserId, setSelectedUserId] = useState("");
+  const [selectedUserName, setSelectedUserName] = useState("");
+  const [amount, setAmount] = useState("");
+  const [description, setDescription] = useState("");
+  const queryClient = useQueryClient();
+
+  const userSearch = useQuery(
+    trpc.admin.listUsers.queryOptions(
+      { search: debouncedSearch || undefined, limit: 10, offset: 0 },
+      { enabled: true },
+    ),
+  );
+
+  const creditQuery = useQuery(
+    trpc.admin.getCreditBalance.queryOptions(
+      { userId: selectedUserId || "none" },
+      { enabled: !!selectedUserId },
+    ),
+  );
+
+  const historyQuery = useQuery(
+    trpc.admin.getCreditHistory.queryOptions(
+      { userId: selectedUserId || "none" },
+      { enabled: !!selectedUserId },
+    ),
+  );
+
+  const adjustMutation = useMutation(
+    trpc.admin.adjustCredit.mutationOptions({
+      onSuccess: (data) => {
+        queryClient.invalidateQueries({ queryKey: trpc.admin.getCreditBalance.queryKey() });
+        queryClient.invalidateQueries({ queryKey: trpc.admin.getCreditHistory.queryKey() });
+        toast.success(`Credit updated. New balance: ${data.newBalance.toLocaleString()}`);
+        setAmount("");
+        setDescription("");
+      },
+      onError: (e: any) => toast.error(e.message),
+    }),
+  );
+
+  function handleSearch(val: string) {
+    setSearch(val);
+    const t = (window as any).__ct;
+    if (t) clearTimeout(t);
+    (window as any).__ct = setTimeout(() => {
+      setDebouncedSearch(val);
+    }, 300);
+  }
+
+  function selectUser(id: string, name: string) {
+    setSelectedUserId(id);
+    setSelectedUserName(name);
+    setSearch("");
+    setDebouncedSearch("");
+  }
+
+  function handleAdjust() {
+    const val = parseInt(amount, 10);
+    if (isNaN(val) || val === 0) {
+      toast.error("Enter a valid amount");
+      return;
+    }
+    adjustMutation.mutate({ userId: selectedUserId, amount: val, description: description || undefined });
+  }
+
+  return (
+    <div>
+      <h1 className="text-3xl font-headline font-bold text-[var(--clay-black)] mb-2">Credit Management</h1>
+      <p className="text-[var(--warm-charcoal)] mb-8">View and adjust token credits for users.</p>
+
+      <div className="bg-[var(--pure-white)] rounded-[var(--radius-xl)] border border-[var(--oat-border)] p-6 mb-8">
+        <h2 className="text-lg font-headline font-bold text-[var(--clay-black)] mb-4">Find User</h2>
+        <div className="relative">
+          <Input
+            placeholder="Search by name or email..."
+            value={search}
+            onChange={(e) => handleSearch(e.target.value)}
+            className="max-w-md"
+          />
+          {userSearch.data && userSearch.data.users.length > 0 && !selectedUserId && (
+            <div className="absolute top-full mt-1 w-full max-w-md bg-[var(--pure-white)] border border-[var(--oat-border)] rounded-[var(--radius-lg)] shadow-lg z-10 max-h-60 overflow-y-auto">
+              {userSearch.data.users.map((u) => (
+                <button
+                  key={u.id}
+                  onClick={() => selectUser(u.id, u.name)}
+                  className="w-full text-left px-4 py-2.5 hover:bg-[var(--oat-light)] transition-colors text-sm"
+                >
+                  <span className="font-medium text-[var(--clay-black)]">{u.name}</span>
+                  <span className="text-[var(--warm-charcoal)] ml-2">{u.email}</span>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {selectedUserId && (
+          <div className="mt-4">
+            <div className="flex items-center gap-3">
+              <span className="font-medium text-[var(--clay-black)]">{selectedUserName}</span>
+              <span className="text-xs text-[var(--warm-charcoal)] font-mono">{selectedUserId}</span>
+              <Button variant="ghost" size="sm" onClick={() => { setSelectedUserId(""); setSelectedUserName(""); }}>
+                Change
+              </Button>
+            </div>
+            {creditQuery.data && (
+              <div className="mt-3 p-4 bg-[var(--oat-light)] rounded-[var(--radius-lg)] grid grid-cols-2 gap-4">
+                <div>
+                  <p className="text-xs text-[var(--warm-charcoal)] mb-1">Token Balance</p>
+                  <p className="text-2xl font-headline font-bold text-[var(--clay-black)]">{creditQuery.data.tokenBalance.toLocaleString()}</p>
+                </div>
+                <div>
+                  <p className="text-xs text-[var(--warm-charcoal)] mb-1">Lifetime Used</p>
+                  <p className="text-2xl font-headline font-bold text-[var(--warm-charcoal)]">{creditQuery.data.lifetimeTokensUsed.toLocaleString()}</p>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {selectedUserId && (
+        <div className="bg-[var(--pure-white)] rounded-[var(--radius-xl)] border border-[var(--oat-border)] p-6 mb-8">
+          <h2 className="text-lg font-headline font-bold text-[var(--clay-black)] mb-4">Adjust Credits</h2>
+          <div className="flex flex-wrap gap-3 items-end">
+            <div>
+              <label className="text-xs text-[var(--warm-charcoal)] block mb-1">Amount (+ add, - deduct)</label>
+              <Input type="number" value={amount} onChange={(e) => setAmount(e.target.value)} placeholder="e.g. 50000" className="w-40" />
+            </div>
+            <div>
+              <label className="text-xs text-[var(--warm-charcoal)] block mb-1">Note</label>
+              <Input value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Reason" className="w-48" />
+            </div>
+            <Button onClick={handleAdjust} disabled={adjustMutation.isPending}>Apply</Button>
+          </div>
+          <p className="text-xs text-[var(--warm-charcoal)] mt-3">
+            Credits are in tokens. ~1,000 tokens ≈ $0.01 with budget models.
+          </p>
+        </div>
+      )}
+
+      {historyQuery.data && historyQuery.data.transactions.length > 0 && (
+        <div className="bg-[var(--pure-white)] rounded-[var(--radius-xl)] border border-[var(--oat-border)] overflow-hidden">
+          <h2 className="text-lg font-headline font-bold text-[var(--clay-black)] px-6 pt-6 pb-2">Transaction History</h2>
+          <table className="w-full text-sm">
+            <thead className="bg-[var(--oat-light)] text-[var(--warm-charcoal)]">
+              <tr>
+                <th className="text-left px-4 py-3 font-medium">Type</th>
+                <th className="text-left px-4 py-3 font-medium">Amount</th>
+                <th className="text-left px-4 py-3 font-medium">Description</th>
+                <th className="text-left px-4 py-3 font-medium">Date</th>
+              </tr>
+            </thead>
+            <tbody>
+              {historyQuery.data.transactions.map((txn: any) => (
+                <tr key={txn.id} className="border-t border-[var(--oat-border)]">
+                  <td className="px-4 py-3">
+                    <span className={`text-xs font-semibold px-2 py-0.5 rounded-full ${
+                      txn.type === "signup_bonus" ? "bg-[var(--sunbeam-300)] text-[var(--sunbeam-800)]" :
+                      txn.type === "admin_adjust" ? "bg-[var(--matcha-300)] text-[var(--matcha-800)]" :
+                      "bg-[var(--oat-border)] text-[var(--warm-charcoal)]"
+                    }`}>{txn.type}</span>
+                  </td>
+                  <td className={`px-4 py-3 font-medium ${txn.amount >= 0 ? "text-[var(--matcha-700)]" : "text-[var(--clay-red)]"}`}>
+                    {txn.amount >= 0 ? "+" : ""}{txn.amount.toLocaleString()}
+                  </td>
+                  <td className="px-4 py-3 text-[var(--warm-charcoal)]">{txn.description ?? "-"}</td>
+                  <td className="px-4 py-3 text-[var(--warm-charcoal)]">{new Date(txn.createdAt).toLocaleDateString("id-ID", { day: "numeric", month: "short", year: "numeric" })}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,198 @@
+import { useState } from "react";
+import { createFileRoute } from "@tanstack/react-router";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { trpc } from "@/utils/trpc";
+import { Input } from "@labas/ui/components/input";
+import { Button } from "@labas/ui/components/button";
+import { toast } from "sonner";
+
+export const Route = createFileRoute("/admin/featured")({
+  component: AdminFeatured,
+});
+
+type Tab = "featured" | "packages" | "questions";
+
+function AdminFeatured() {
+  const [tab, setTab] = useState<Tab>("featured");
+  const [search, setSearch] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+  const [page, setPage] = useState(1);
+  const limit = 15;
+  const queryClient = useQueryClient();
+
+  const featured = useQuery(trpc.admin.listFeatured.queryOptions());
+  const fPackages = featured.data?.packages ?? [];
+  const fQuestions = featured.data?.questions ?? [];
+
+  const searchQuery = useQuery(
+    trpc.admin.searchContent.queryOptions(
+      { search: debouncedSearch, type: tab === "packages" ? "packages" : "questions", limit, offset: (page - 1) * limit },
+      { enabled: tab !== "featured" },
+    ),
+  );
+
+  const togglePkgMutation = useMutation(
+    trpc.admin.toggleFeaturedPackage.mutationOptions({
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: trpc.admin.listFeatured.queryKey() });
+        queryClient.invalidateQueries({ queryKey: trpc.admin.searchContent.queryKey() });
+        toast.success("Package updated");
+      },
+      onError: (e: any) => toast.error(e.message),
+    }),
+  );
+
+  const toggleQMutation = useMutation(
+    trpc.admin.toggleFeaturedQuestion.mutationOptions({
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: trpc.admin.listFeatured.queryKey() });
+        queryClient.invalidateQueries({ queryKey: trpc.admin.searchContent.queryKey() });
+        toast.success("Question updated");
+      },
+      onError: (e: any) => toast.error(e.message),
+    }),
+  );
+
+  function handleSearch(val: string) {
+    setSearch(val);
+    const t = (window as any).__ft;
+    if (t) clearTimeout(t);
+    (window as any).__ft = setTimeout(() => {
+      setDebouncedSearch(val);
+      setPage(1);
+    }, 300);
+  }
+
+  const tabs: { key: Tab; label: string }[] = [
+    { key: "featured", label: "Currently Featured" },
+    { key: "packages", label: "Browse Packages" },
+    { key: "questions", label: "Browse Questions" },
+  ];
+
+  return (
+    <div>
+      <h1 className="text-3xl font-headline font-bold text-[var(--clay-black)] mb-2">Editor's Pick</h1>
+      <p className="text-[var(--warm-charcoal)] mb-6">Curate featured content for the homepage.</p>
+
+      <div className="flex gap-2 mb-6 border-b border-[var(--oat-border)] pb-0">
+        {tabs.map((t) => (
+          <button
+            key={t.key}
+            onClick={() => { setTab(t.key); setSearch(""); setDebouncedSearch(""); setPage(1); }}
+            className={`px-4 py-2.5 text-sm font-medium rounded-t-[var(--radius-lg)] transition-colors ${
+              tab === t.key
+                ? "bg-[var(--pure-white)] text-[var(--clay-black)] border border-[var(--oat-border)] border-b-[var(--pure-white)] -mb-[1px]"
+                : "text-[var(--warm-charcoal)] hover:text-[var(--clay-black)]"
+            }`}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      {tab === "featured" && (
+        <div className="space-y-8">
+          <section>
+            <div className="flex items-center gap-2 mb-4">
+              <h2 className="text-lg font-headline font-bold text-[var(--clay-black)]">Featured Packages</h2>
+              <span className="text-sm text-[var(--warm-charcoal)]">({fPackages.length})</span>
+            </div>
+            {fPackages.length === 0 ? (
+              <p className="text-sm text-[var(--warm-charcoal)] py-4">No featured packages. Browse and select from the tabs above.</p>
+            ) : (
+              <div className="space-y-2">
+                {fPackages.map((pkg: any) => (
+                  <div key={pkg.id} className="flex items-center justify-between bg-[var(--pure-white)] border border-[var(--oat-border)] rounded-[var(--radius-lg)] px-4 py-3">
+                    <div>
+                      <p className="font-medium text-[var(--clay-black)]">{pkg.title}</p>
+                      <p className="text-xs text-[var(--warm-charcoal)]">{pkg.examTypeId}</p>
+                    </div>
+                    <Button variant="outline" onClick={() => togglePkgMutation.mutate({ packageId: pkg.id })} disabled={togglePkgMutation.isPending} className="h-9 rounded-[var(--radius-lg)] text-xs">Unfeature</Button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </section>
+
+          <section>
+            <div className="flex items-center gap-2 mb-4">
+              <h2 className="text-lg font-headline font-bold text-[var(--clay-black)]">Featured Questions</h2>
+              <span className="text-sm text-[var(--warm-charcoal)]">({fQuestions.length})</span>
+            </div>
+            {fQuestions.length === 0 ? (
+              <p className="text-sm text-[var(--warm-charcoal)] py-4">No featured questions.</p>
+            ) : (
+              <div className="space-y-2">
+                {fQuestions.map((q: any) => (
+                  <div key={q.id} className="flex items-center justify-between bg-[var(--pure-white)] border border-[var(--oat-border)] rounded-[var(--radius-lg)] px-4 py-3">
+                    <div className="flex-1 min-w-0">
+                      <p className="font-medium text-[var(--clay-black)] truncate">{q.questionText}</p>
+                      <p className="text-xs text-[var(--warm-charcoal)]">{q.format} · {q.examTypeId}</p>
+                    </div>
+                    <Button variant="outline" className="shrink-0 ml-4 h-9 rounded-[var(--radius-lg)] text-xs" onClick={() => toggleQMutation.mutate({ questionId: q.id })} disabled={toggleQMutation.isPending}>Unfeature</Button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </section>
+        </div>
+      )}
+
+      {tab !== "featured" && (
+        <div>
+          <Input
+            placeholder={`Search ${tab}...`}
+            value={search}
+            onChange={(e) => handleSearch(e.target.value)}
+            className="max-w-md mb-4"
+          />
+
+          {searchQuery.isLoading ? (
+            <p className="text-sm text-[var(--warm-charcoal)] py-8 text-center">Searching...</p>
+          ) : (
+            <>
+              <p className="text-sm text-[var(--warm-charcoal)] mb-3">
+                {debouncedSearch ? `${searchQuery.data?.total ?? 0} results for "${debouncedSearch}"` : `Showing ${searchQuery.data?.total ?? 0} ${tab}`}
+              </p>
+              <div className="space-y-2">
+                {(searchQuery.data?.items ?? []).map((item: any) => (
+                  <div key={item.id} className="flex items-center justify-between bg-[var(--pure-white)] border border-[var(--oat-border)] rounded-[var(--radius-lg)] px-4 py-3">
+                    <div className="flex-1 min-w-0">
+                      <p className="font-medium text-[var(--clay-black)] truncate">
+                        {tab === "packages" ? item.title : item.questionText}
+                      </p>
+                      <p className="text-xs text-[var(--warm-charcoal)]">
+                        {tab === "packages" ? item.examTypeId : `${item.format} · ${item.examTypeId}`}
+                        {item.isFeatured && (
+                          <span className="ml-2 text-xs font-semibold px-1.5 py-0.5 rounded-full bg-[var(--sunbeam-300)] text-[var(--sunbeam-800)]">Featured</span>
+                        )}
+                      </p>
+                    </div>
+                    <Button
+                      variant={item.isFeatured ? "outline" : "default"}
+                      className="shrink-0 ml-4 h-9 rounded-[var(--radius-lg)] text-xs"
+                      onClick={() => {
+                        if (tab === "packages") togglePkgMutation.mutate({ packageId: item.id });
+                        else toggleQMutation.mutate({ questionId: item.id });
+                      }}
+                      disabled={togglePkgMutation.isPending || toggleQMutation.isPending}
+                    >
+                      {item.isFeatured ? "Unfeature" : "Feature"}
+                    </Button>
+                  </div>
+                ))}
+              </div>
+              {searchQuery.data && (searchQuery.data.total as number) > limit && (
+                <div className="flex items-center justify-center gap-4 mt-6">
+                  <Button variant="outline" size="sm" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1}>Previous</Button>
+                  <span className="text-sm text-[var(--warm-charcoal)]">Page {page} of {Math.ceil((searchQuery.data.total as number) / limit)}</span>
+                  <Button variant="outline" size="sm" onClick={() => setPage((p) => p + 1)} disabled={page * limit >= (searchQuery.data.total as number)}>Next</Button>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,126 @@
+import { useState } from "react";
+import { createFileRoute } from "@tanstack/react-router";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { trpc } from "@/utils/trpc";
+import { Input } from "@labas/ui/components/input";
+import { Button } from "@labas/ui/components/button";
+import { toast } from "sonner";
+
+export const Route = createFileRoute("/admin/")({
+  component: AdminDashboard,
+});
+
+function StatCard({ label, value, sub }: { label: string; value: number | string; sub?: string }) {
+  return (
+    <div className="bg-[var(--pure-white)] rounded-[var(--radius-xl)] border border-[var(--oat-border)] p-6">
+      <p className="text-sm text-[var(--warm-charcoal)]">{label}</p>
+      <p className="text-3xl font-headline font-bold text-[var(--clay-black)] mt-2">
+        {typeof value === "number" ? value.toLocaleString() : value}
+      </p>
+      {sub && <p className="text-xs text-[var(--warm-charcoal)] mt-1">{sub}</p>}
+    </div>
+  );
+}
+
+function AdminDashboard() {
+  const [poolInput, setPoolInput] = useState("");
+  const queryClient = useQueryClient();
+  const stats = useQuery(trpc.admin.dashboardStats.queryOptions());
+
+  const setConfigMutation = useMutation(
+    trpc.admin.setPlatformConfig.mutationOptions({
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: trpc.admin.dashboardStats.queryKey() });
+        toast.success("Config updated");
+      },
+      onError: (e: any) => toast.error(e.message),
+    }),
+  );
+
+  if (stats.isLoading) {
+    return (
+      <div className="flex items-center justify-center py-20">
+        <span className="material-symbols-outlined animate-spin text-3xl">progress_activity</span>
+      </div>
+    );
+  }
+
+  const s = stats.data;
+  const poolPct = s && s.poolMax > 0 ? Math.round((s.poolUsed ?? 0) / s.poolMax * 100) : 0;
+  const enabled = s?.freeCreditsEnabled ?? false;
+
+  return (
+    <div>
+      <h1 className="text-3xl font-headline font-bold text-[var(--clay-black)] mb-2">Admin Dashboard</h1>
+      <p className="text-[var(--warm-charcoal)] mb-8">Platform overview at a glance.</p>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-6">
+        <StatCard label="Total Users" value={s?.totalUsers ?? 0} />
+        <StatCard label="Questions" value={s?.totalQuestions ?? 0} />
+        <StatCard label="Packages" value={s?.totalPackages ?? 0} />
+        <StatCard label="Jobs" value={s?.totalJobs ?? 0} />
+      </div>
+
+      <div className="bg-[var(--pure-white)] rounded-[var(--radius-xl)] border border-[var(--oat-border)] p-6">
+        <div className="flex items-center justify-between mb-3">
+          <h2 className="text-lg font-headline font-bold text-[var(--clay-black)]">Free Credit Pool</h2>
+          <button
+            onClick={() => setConfigMutation.mutate({ key: "free_credits_enabled", value: String(!enabled) })}
+            disabled={setConfigMutation.isPending}
+            className={`relative inline-flex h-7 w-12 shrink-0 cursor-pointer rounded-full border-2 transition-colors duration-200 ${
+              enabled ? "bg-[var(--clay-black)] border-[var(--clay-black)]" : "bg-gray-300 border-gray-300"
+            }`}
+          >
+            <span
+              className={`pointer-events-none inline-block h-6 w-6 transform rounded-full bg-white shadow-lg transition duration-200 ${
+                enabled ? "translate-x-5" : "translate-x-0"
+              }`}
+            />
+          </button>
+        </div>
+        <div className="flex items-baseline gap-4 mb-3">
+          <span className="text-3xl font-headline font-bold text-[var(--clay-black)]">{((s?.poolUsed ?? 0) / 1000).toFixed(0)}K</span>
+          <span className="text-sm text-[var(--warm-charcoal)]">used of {((s?.poolMax ?? 1000000) / 1000).toFixed(0)}K tokens</span>
+        </div>
+        <div className="w-full h-3 bg-[var(--oat-border)] rounded-full overflow-hidden mb-4">
+          <div
+            className={`h-full rounded-full transition-all ${poolPct > 90 ? "bg-[var(--clay-red)]" : "bg-[var(--matcha-500)]"}`}
+            style={{ width: `${Math.min(100, poolPct)}%` }}
+          />
+        </div>
+        <p className="text-xs text-[var(--warm-charcoal)] mb-4">{poolPct}% used · {((s?.poolRemaining ?? 0) / 1000).toFixed(0)}K remaining</p>
+
+        <div className="flex gap-3 items-end pt-4 border-t border-[var(--oat-border)]">
+          <div>
+            <label className="text-xs text-[var(--warm-charcoal)] block mb-1">Pool Size</label>
+            <Input
+              type="number"
+              value={poolInput || String(s?.poolMax ?? "")}
+              onChange={(e) => setPoolInput(e.target.value)}
+              placeholder="1000000"
+              className="w-40 h-10 rounded-[var(--radius-lg)] border-[var(--oat-border)]"
+            />
+          </div>
+          <Button
+            onClick={() => {
+              const val = parseInt(poolInput, 10);
+              if (!poolInput || isNaN(val) || val <= 0) {
+                toast.error("Enter a valid number");
+                return;
+              }
+              setConfigMutation.mutate({ key: "free_credits_max_pool", value: String(val) });
+            }}
+            disabled={setConfigMutation.isPending}
+            className="h-10 rounded-[var(--radius-lg)]"
+          >
+            Save
+          </Button>
+        </div>
+      </div>
+
+      {s && s.totalUsers === 0 && (
+        <p className="text-[var(--warm-charcoal)] text-sm mt-6">No data yet. Stats will appear as users start using the platform.</p>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,121 @@
+import { useState } from "react";
+import { createFileRoute } from "@tanstack/react-router";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { trpc } from "@/utils/trpc";
+import { Button } from "@labas/ui/components/button";
+import { toast } from "sonner";
+
+const STATUSES = ["all", "pending", "running", "completed", "failed", "cancelled"] as const;
+
+export const Route = createFileRoute("/admin/jobs")({
+  component: AdminJobs,
+});
+
+function formatDate(dateStr: string | Date | null) {
+  if (!dateStr) return "-";
+  return new Date(dateStr).toLocaleDateString("id-ID", { day: "numeric", month: "short", hour: "2-digit", minute: "2-digit" });
+}
+
+function AdminJobs() {
+  const [status, setStatus] = useState<string>("all");
+  const queryClient = useQueryClient();
+
+  const jobs = useQuery(
+    trpc.admin.listAllJobs.queryOptions({
+      status: status !== "all" ? status : undefined,
+      limit: 30,
+      offset: 0,
+    }),
+  );
+
+  const cancelMutation = useMutation(
+    trpc.admin.cancelAnyJob.mutationOptions({
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: trpc.admin.listAllJobs.queryKey() });
+        toast.success("Job cancelled");
+      },
+      onError: (e: any) => toast.error(e.message),
+    }),
+  );
+
+  return (
+    <div>
+      <h1 className="text-3xl font-headline font-bold text-[var(--clay-black)] mb-2">Generation Jobs</h1>
+      <p className="text-[var(--warm-charcoal)] mb-6">Monitor AI generation jobs across the platform.</p>
+
+      <div className="flex flex-wrap gap-2 mb-4">
+        {STATUSES.map((s) => (
+          <button
+            key={s}
+            onClick={() => setStatus(s)}
+            className={`px-3 py-1.5 text-xs font-semibold rounded-full transition-colors ${
+              status === s
+                ? "bg-[var(--matcha-300)] text-[var(--matcha-800)]"
+                : "bg-[var(--oat-light)] text-[var(--warm-charcoal)] hover:bg-[var(--oat-border)]"
+            }`}
+          >
+            {s === "all" ? "All" : s}
+          </button>
+        ))}
+      </div>
+
+      <div className="bg-[var(--pure-white)] rounded-[var(--radius-xl)] border border-[var(--oat-border)] overflow-hidden">
+        <table className="w-full text-sm">
+          <thead className="bg-[var(--oat-light)] text-[var(--warm-charcoal)]">
+            <tr>
+              <th className="text-left px-4 py-3 font-medium">User</th>
+              <th className="text-left px-4 py-3 font-medium">Exam</th>
+              <th className="text-left px-4 py-3 font-medium">Mode</th>
+              <th className="text-left px-4 py-3 font-medium">Progress</th>
+              <th className="text-left px-4 py-3 font-medium">Tokens</th>
+              <th className="text-left px-4 py-3 font-medium">Status</th>
+              <th className="text-left px-4 py-3 font-medium">Created</th>
+              <th className="text-right px-4 py-3 font-medium">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {jobs.isLoading ? (
+              <tr><td colSpan={8} className="text-center py-16 text-[var(--warm-charcoal)]">Loading...</td></tr>
+            ) : (!jobs.data?.jobs || jobs.data.jobs.length === 0) ? (
+              <tr><td colSpan={8} className="text-center py-16 text-[var(--warm-charcoal)]">No jobs found.</td></tr>
+            ) : (
+              jobs.data.jobs.map((job: any) => (
+                <tr key={job.id} className="border-t border-[var(--oat-border)] hover:bg-[var(--oat-light)]/50 transition-colors">
+                  <td className="px-4 py-3 text-[var(--warm-charcoal)] font-mono text-xs">{job.userId?.slice(0, 10)}...</td>
+                  <td className="px-4 py-3">{job.examTypeId}</td>
+                  <td className="px-4 py-3 text-xs">{job.mode}</td>
+                  <td className="px-4 py-3">
+                    <div className="flex items-center gap-2">
+                      <div className="w-16 h-1.5 bg-[var(--oat-border)] rounded-full overflow-hidden">
+                        <div className={`h-full rounded-full transition-all ${job.progress === 100 ? "bg-[var(--matcha-500)]" : "bg-[var(--sunbeam-500)]"}`} style={{ width: `${job.progress ?? 0}%` }} />
+                      </div>
+                      <span className="text-xs text-[var(--warm-charcoal)]">{job.progress ?? 0}%</span>
+                    </div>
+                  </td>
+                  <td className="px-4 py-3">{job.tokensUsed?.toLocaleString() ?? "-"}</td>
+                  <td className="px-4 py-3">
+                    <span className={`text-xs font-semibold px-2 py-0.5 rounded-full ${
+                      job.status === "completed" ? "bg-[var(--matcha-300)] text-[var(--matcha-800)]" :
+                      job.status === "failed" ? "bg-[var(--clay-red)]/10 text-[var(--clay-red)]" :
+                      job.status === "cancelled" ? "bg-[var(--oat-border)] text-[var(--warm-charcoal)]" :
+                      job.status === "running" ? "bg-[var(--sunbeam-300)] text-[var(--sunbeam-800)]" :
+                      "bg-[var(--oat-border)] text-[var(--warm-charcoal)]"
+                    }`}>{job.status}</span>
+                  </td>
+                  <td className="px-4 py-3 text-[var(--warm-charcoal)] text-xs">{formatDate(job.createdAt)}</td>
+                  <td className="px-4 py-3 text-right">
+                    {(job.status === "pending" || job.status === "running") && (
+                      <Button variant="outline" className="text-[var(--clay-red)] h-9 rounded-[var(--radius-lg)] text-xs" onClick={() => cancelMutation.mutate({ jobId: job.id })} disabled={cancelMutation.isPending}>
+                        Cancel
+                      </Button>
+                    )}
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,94 @@
+import { useState } from "react";
+import { createFileRoute } from "@tanstack/react-router";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { trpc } from "@/utils/trpc";
+import { Button } from "@labas/ui/components/button";
+import { toast } from "sonner";
+
+export const Route = createFileRoute("/admin/moderation")({
+  component: AdminModeration,
+});
+
+function formatDate(dateStr: string | Date | null) {
+  if (!dateStr) return "-";
+  return new Date(dateStr).toLocaleDateString("id-ID", { day: "numeric", month: "short", hour: "2-digit", minute: "2-digit" });
+}
+
+function AdminModeration() {
+  const [page, setPage] = useState(1);
+  const limit = 30;
+  const queryClient = useQueryClient();
+
+  const questions = useQuery(
+    trpc.admin.listLatestQuestions.queryOptions({ limit, offset: (page - 1) * limit }),
+  );
+
+  const toggleMutation = useMutation(
+    trpc.admin.togglePublicAny.mutationOptions({
+      onSuccess: (data) => {
+        queryClient.invalidateQueries({ queryKey: trpc.admin.listLatestQuestions.queryKey() });
+        toast.success(data.isPublic ? "Made public" : "Made private");
+      },
+      onError: (e: any) => toast.error(e.message),
+    }),
+  );
+
+  return (
+    <div>
+      <h1 className="text-3xl font-headline font-bold text-[var(--clay-black)] mb-2">Content Moderation</h1>
+      <p className="text-[var(--warm-charcoal)] mb-6">Review latest questions and manage visibility.</p>
+
+      <div className="bg-[var(--pure-white)] rounded-[var(--radius-xl)] border border-[var(--oat-border)] overflow-hidden">
+        <table className="w-full text-sm">
+          <thead className="bg-[var(--oat-light)] text-[var(--warm-charcoal)]">
+            <tr>
+              <th className="text-left px-4 py-3 font-medium">Question</th>
+              <th className="text-left px-4 py-3 font-medium">Exam</th>
+              <th className="text-left px-4 py-3 font-medium">Format</th>
+              <th className="text-left px-4 py-3 font-medium">Visibility</th>
+              <th className="text-left px-4 py-3 font-medium">Source</th>
+              <th className="text-left px-4 py-3 font-medium">Created</th>
+              <th className="text-right px-4 py-3 font-medium">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {questions.isLoading ? (
+              <tr><td colSpan={7} className="text-center py-16 text-[var(--warm-charcoal)]">Loading...</td></tr>
+            ) : (!questions.data?.questions || questions.data.questions.length === 0) ? (
+              <tr><td colSpan={7} className="text-center py-16 text-[var(--warm-charcoal)]">No questions yet.</td></tr>
+            ) : (
+              questions.data.questions.map((q: any) => (
+                <tr key={q.id} className="border-t border-[var(--oat-border)] hover:bg-[var(--oat-light)]/50 transition-colors">
+                  <td className="px-4 py-3 max-w-xs">
+                    <p className="font-medium text-[var(--clay-black)] truncate">{q.questionText}</p>
+                    <p className="text-xs text-[var(--warm-charcoal)] truncate mt-0.5">{q.passageText?.slice(0, 80)}{(q.passageText?.length ?? 0) > 80 ? "..." : ""}</p>
+                  </td>
+                  <td className="px-4 py-3">{q.examTypeId}</td>
+                  <td className="px-4 py-3 text-xs">{q.format}</td>
+                  <td className="px-4 py-3">
+                    <span className={`text-xs font-semibold px-2 py-0.5 rounded-full ${
+                      q.isPublic ? "bg-[var(--matcha-300)] text-[var(--matcha-800)]" : "bg-[var(--oat-border)] text-[var(--warm-charcoal)]"
+                    }`}>{q.isPublic ? "Public" : "Private"}</span>
+                  </td>
+                  <td className="px-4 py-3 text-xs">{q.source}</td>
+                  <td className="px-4 py-3 text-[var(--warm-charcoal)] text-xs">{formatDate(q.createdAt)}</td>
+                  <td className="px-4 py-3 text-right">
+                    <Button variant="outline" className="h-9 rounded-[var(--radius-lg)] text-xs" onClick={() => toggleMutation.mutate({ questionId: q.id })} disabled={toggleMutation.isPending}>
+                      {q.isPublic ? "Make Private" : "Make Public"}
+                    </Button>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="flex items-center justify-center gap-4 mt-6">
+        <Button variant="outline" className="h-9 rounded-[var(--radius-lg)] text-xs" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1}>Previous</Button>
+        <span className="text-sm text-[var(--warm-charcoal)]">Page {page}</span>
+        <Button variant="outline" className="h-9 rounded-[var(--radius-lg)] text-xs" onClick={() => setPage((p) => p + 1)} disabled={(questions.data?.questions?.length ?? 0) < limit}>Next</Button>
+      </div>
+    </div>
+  );
+}

apps/web/src/routes/admin.tsx

@@ -0,0 +1,90 @@
+import { createFileRoute, Outlet, Link, redirect, useLocation } from "@tanstack/react-router";
+import { useQuery } from "@tanstack/react-query";
+import { authClient } from "@/lib/auth-client";
+import { trpc } from "@/utils/trpc";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+export const Route = createFileRoute("/admin")({
+  component: AdminLayout,
+  beforeLoad: async () => {
+    const session = await authClient.getSession();
+    if (!session.data) {
+      throw redirect({ to: "/login" });
+    }
+    return { session };
+  },
+});
+
+const adminNavItems = [
+  { to: "/admin", label: "Dashboard", icon: "dashboard" },
+  { to: "/admin/users", label: "Users", icon: "group" },
+  { to: "/admin/featured", label: "Featured", icon: "star" },
+  { to: "/admin/credits", label: "Credits", icon: "token" },
+  { to: "/admin/jobs", label: "Jobs", icon: "schedule" },
+  { to: "/admin/moderation", label: "Moderation", icon: "shield" },
+];
+
+function AdminLayout() {
+  const location = useLocation();
+
+  const { data: isAdminData, isLoading } = useQuery(
+    trpc.admin.isAdmin.queryOptions(),
+  );
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-[var(--warm-cream)]">
+        <span className="material-symbols-outlined animate-spin text-3xl text-[var(--clay-black)]">progress_activity</span>
+      </div>
+    );
+  }
+
+  if (!isAdminData?.isAdmin) {
+    return (
+      <div className="min-h-screen flex flex-col items-center justify-center bg-[var(--warm-cream)] gap-4">
+        <MaterialIcon name="gpp_bad" className="text-6xl text-[var(--clay-red)]" />
+        <h1 className="text-2xl font-headline font-bold text-[var(--clay-black)]">Access Denied</h1>
+        <p className="text-[var(--warm-charcoal)]">Only admins can access this page.</p>
+        <Link to="/" className="text-[var(--matcha-700)] underline">Back to Dashboard</Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-[var(--warm-cream)]">
+      <div className="flex">
+        <aside className="w-56 shrink-0 min-h-screen border-r border-[var(--oat-border)] bg-[var(--pure-white)] px-4 py-6 flex flex-col">
+          <div className="mb-6 px-2">
+            <Link to="/" className="flex items-center gap-2">
+              <span className="material-symbols-outlined text-[var(--clay-black)]">arrow_back</span>
+              <span className="text-sm text-[var(--warm-charcoal)]">Back to App</span>
+            </Link>
+          </div>
+          <h2 className="px-2 mb-4 text-xs font-semibold uppercase tracking-wider text-[var(--warm-charcoal)]">Admin Panel</h2>
+          <nav className="flex flex-col gap-1">
+            {adminNavItems.map((item) => {
+              const isActive = location.pathname === item.to;
+              return (
+                <Link
+                  key={item.to}
+                  to={item.to}
+                  className={`flex items-center gap-3 rounded-[var(--radius-lg)] py-2.5 px-3 text-sm font-medium transition-all ${
+                    isActive
+                      ? "bg-[var(--matcha-300)] text-[var(--matcha-800)] font-semibold"
+                      : "text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] hover:text-[var(--clay-black)]"
+                  }`}
+                >
+                  <MaterialIcon name={item.icon} className="text-lg" />
+                  {item.label}
+                </Link>
+              );
+            })}
+          </nav>
+        </aside>
+        <main className="flex-1 px-8 py-8">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,157 @@
+import { useState } from "react";
+import { createFileRoute } from "@tanstack/react-router";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { trpc } from "@/utils/trpc";
+import { Input } from "@labas/ui/components/input";
+import { Button } from "@labas/ui/components/button";
+import { toast } from "sonner";
+
+const PAGE_SIZE = 20;
+
+function Pagination({ page, totalPages, onChange }: { page: number; totalPages: number; onChange: (p: number) => void }) {
+  if (totalPages <= 1) return null;
+  const pages: (number | "...")[] = [];
+  for (let i = 1; i <= totalPages; i++) {
+    if (i === 1 || i === totalPages || (i >= page - 2 && i <= page + 2)) pages.push(i);
+    else if (pages[pages.length - 1] !== "...") pages.push("...");
+  }
+  return (
+    <div className="flex items-center justify-center gap-1 mt-6">
+      <Button variant="outline" size="sm" onClick={() => onChange(page - 1)} disabled={page <= 1}>Previous</Button>
+      {pages.map((p, i) =>
+        p === "..." ? (
+          <span key={`e-${i}`} className="px-2 text-[var(--warm-charcoal)]">...</span>
+        ) : (
+          <Button key={p} variant={p === page ? "default" : "outline"} size="sm" onClick={() => onChange(p as number)}>{p}</Button>
+        ),
+      )}
+      <Button variant="outline" size="sm" onClick={() => onChange(page + 1)} disabled={page >= totalPages}>Next</Button>
+    </div>
+  );
+}
+
+export const Route = createFileRoute("/admin/users")({
+  component: AdminUsers,
+});
+
+function AdminUsers() {
+  const [search, setSearch] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+  const [page, setPage] = useState(1);
+
+  const usersQuery = useQuery(
+    trpc.admin.listUsers.queryOptions({ search: debouncedSearch || undefined, limit: PAGE_SIZE, offset: (page - 1) * PAGE_SIZE }),
+  );
+
+  const users = usersQuery.data?.users ?? [];
+  const total = usersQuery.data?.total ?? 0;
+  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+
+  function handleSearch(val: string) {
+    setSearch(val);
+    clearTimeout((window as any).__ut);
+    (window as any).__ut = setTimeout(() => { setDebouncedSearch(val); setPage(1); }, 300);
+  }
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-3xl font-headline font-bold text-[var(--clay-black)]">Users</h1>
+          <p className="text-[var(--warm-charcoal)] mt-1">{total.toLocaleString()} total users</p>
+        </div>
+      </div>
+
+      <div className="bg-[var(--pure-white)] rounded-[var(--radius-xl)] border border-[var(--oat-border)] overflow-hidden">
+        <div className="px-4 py-3 border-b border-[var(--oat-border)]">
+          <Input
+            placeholder="Search by name or email..."
+            value={search}
+            onChange={(e) => handleSearch(e.target.value)}
+            className="max-w-sm"
+          />
+        </div>
+        <table className="w-full text-sm">
+          <thead className="bg-[var(--oat-light)] text-[var(--warm-charcoal)]">
+            <tr>
+              <th className="text-left px-4 py-3 font-medium w-[25%]">Name</th>
+              <th className="text-left px-4 py-3 font-medium w-[30%]">Email</th>
+              <th className="text-left px-4 py-3 font-medium w-[10%]">Role</th>
+              <th className="text-left px-4 py-3 font-medium w-[10%]">Status</th>
+              <th className="text-right px-4 py-3 font-medium w-[25%]">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {usersQuery.isLoading ? (
+              <tr><td colSpan={5} className="text-center py-16 text-[var(--warm-charcoal)]">Loading...</td></tr>
+            ) : users.length === 0 ? (
+              <tr><td colSpan={5} className="text-center py-16 text-[var(--warm-charcoal)]">No users found.</td></tr>
+            ) : (
+              users.map((u) => <UserRow key={u.id} user={u} />)
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      <Pagination page={page} totalPages={totalPages} onChange={setPage} />
+    </div>
+  );
+}
+
+function UserRow({ user }: { user: { id: string; name: string; email: string; role: string; suspended: boolean; emailVerified: boolean } }) {
+  const queryClient = useQueryClient();
+
+  const suspendMutation = useMutation(
+    trpc.admin.suspendUser.mutationOptions({
+      onSuccess: (data) => {
+        queryClient.invalidateQueries({ queryKey: trpc.admin.listUsers.queryKey() });
+        toast.success(data.suspended ? "User suspended" : "User unsuspended");
+      },
+      onError: (e: any) => toast.error(e.message),
+    }),
+  );
+
+  const roleMutation = useMutation(
+    trpc.admin.setUserRole.mutationOptions({
+      onSuccess: (data) => {
+        queryClient.invalidateQueries({ queryKey: trpc.admin.listUsers.queryKey() });
+        toast.success(`Role: ${data.role}`);
+      },
+      onError: (e: any) => toast.error(e.message),
+    }),
+  );
+
+  return (
+    <tr className="border-t border-[var(--oat-border)] hover:bg-[var(--oat-light)]/50 transition-colors">
+      <td className="px-4 py-3 font-medium text-[var(--clay-black)]">{user.name}</td>
+      <td className="px-4 py-3 text-[var(--warm-charcoal)]">
+        {user.email}
+        {!user.emailVerified && (
+          <span className="ml-1.5 text-[10px] bg-[var(--sunbeam-300)] text-[var(--sunbeam-800)] px-1.5 py-0.5 rounded-full font-medium">unverified</span>
+        )}
+      </td>
+      <td className="px-4 py-3">
+        <span className={`text-xs font-semibold px-2 py-0.5 rounded-full ${user.role === "admin" ? "bg-[var(--matcha-300)] text-[var(--matcha-800)]" : "bg-[var(--oat-border)] text-[var(--warm-charcoal)]"}`}>
+          {user.role}
+        </span>
+      </td>
+      <td className="px-4 py-3">
+        <span className={`text-xs font-semibold px-2 py-0.5 rounded-full ${
+          user.suspended ? "bg-[var(--clay-red)]/10 text-[var(--clay-red)]" : "bg-[var(--matcha-300)] text-[var(--matcha-800)]"
+        }`}>
+          {user.suspended ? "Suspended" : "Active"}
+        </span>
+      </td>
+      <td className="px-4 py-3">
+        <div className="flex items-center justify-end gap-2">
+          <Button variant="outline" onClick={() => suspendMutation.mutate({ userId: user.id, suspended: !user.suspended })} disabled={suspendMutation.isPending} className="h-9 rounded-[var(--radius-lg)] text-xs">
+            {user.suspended ? "Unsuspend" : "Suspend"}
+          </Button>
+          <Button variant="outline" onClick={() => roleMutation.mutate({ userId: user.id, role: user.role === "admin" ? "user" : "admin" })} disabled={roleMutation.isPending} className="h-9 rounded-[var(--radius-lg)] text-xs">
+            {user.role === "admin" ? "Demote" : "Promote"}
+          </Button>
+        </div>
+      </td>
+    </tr>
+  );
+}

apps/web/src/routes/generate.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from "react";
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { createFileRoute, redirect, Link } from "@tanstack/react-router";
 import { authClient } from "@/lib/auth-client";
 import { trpc } from "@/utils/trpc";
@@ -56,6 +56,13 @@ function RouteComponent() {
   }, [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,
@@ -162,8 +169,8 @@ function RouteComponent() {
   };
 
   const handleGenerate = () => {
-    if (!hasConfigs || !selectedConfig) {
-      setError("API key belum dikonfigurasi. Tambahkan di Settings.");
+    if (!useFreeCredits && (!hasConfigs || !selectedConfig)) {
+      setError("API key belum dikonfigurasi. Tambahkan di Settings atau gunakan kredit gratis.");
       return;
     }
     if (selectedSections.length === 0) {
@@ -175,6 +182,15 @@ function RouteComponent() {
       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,
@@ -184,13 +200,8 @@ function RouteComponent() {
       topics: selectedTopics,
       questionCount,
       mode,
-      apiKeyConfig: {
-        baseUrl: selectedConfig.baseUrl,
-        apiKey: selectedConfig.apiKey,
-        model: selectedConfig.modelName,
-        maxTokens: selectedConfig.maxTokens ?? 16384,
-      },
-    });
+      apiKeyConfig,
+    } as any);
   };
 
   const sectionSplits = (() => {
@@ -233,7 +244,7 @@ function RouteComponent() {
         </div>
       </section>
 
-      {!hasConfigs && (
+      {!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>
@@ -243,40 +254,140 @@ function RouteComponent() {
         </div>
       )}
 
-      {hasConfigs && (
-        <div className="mb-8 p-4 rounded-[var(--radius-lg)] bg-[var(--pure-white)] border-2 border-[var(--oat-border)]">
-          <label className="text-sm font-medium text-[var(--clay-black)] mb-2 block">
-            Provider / API Key
-          </label>
-          <div className="flex gap-3">
-            <Select value={selectedKeyId} 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>
+      {!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">
@@ -526,7 +637,7 @@ function RouteComponent() {
             activeCount={activeCount}
             maxParallel={MAX_PARALLEL}
             generatePending={generate.isPending}
-            hasKey={hasConfigs}
+            hasKey={hasConfigs || useFreeCredits}
             error={error}
             onGenerate={handleGenerate}
             onDismissError={() => setError(null)}

apps/web/src/routes/index.tsx

@@ -36,13 +36,15 @@ function HomeComponent() {
   const recentAttempts = useQuery(
     trpc.attempt.myAttempts.queryOptions({ limit: 5, offset: 0 }),
   );
-  const featuredPackages = useQuery(
-    trpc.package.list.queryOptions({ isPublic: true, limit: 3 }),
+  const featured = useQuery(
+    trpc.admin.listFeatured.queryOptions(),
   );
 
   const stats = overview.data;
   const attempts = recentAttempts.data?.attempts ?? [];
-  const featured = featuredPackages.data?.packages ?? [];
+  const featuredPkg = featured.data?.packages ?? [];
+  const featuredQ = featured.data?.questions ?? [];
+  const hasFeatured = featuredPkg.length > 0 || featuredQ.length > 0;
 
   const isNewUser = !stats || (stats.completedAttempts === 0 && stats.totalQuestionsAnswered === 0);
 
@@ -199,19 +201,22 @@ function HomeComponent() {
         </Link>
       </div>
 
-      {/* Featured Packages */}
-      {featured.length > 0 && (
+      {/* Editor's Pick */}
+      {hasFeatured && (
         <section className="mb-10">
           <div className="flex items-center justify-between mb-4">
-            <h2 className="text-xl font-headline font-bold text-[var(--clay-black)]">
-              Paket Unggulan
-            </h2>
+            <div className="flex items-center gap-2">
+              <MaterialIcon name="star" className="text-[var(--sunbeam-600)]" />
+              <h2 className="text-xl font-headline font-bold text-[var(--clay-black)]">
+                Editor's Pick
+              </h2>
+            </div>
             <Link to="/packages" className="text-sm text-[var(--matcha-600)] font-semibold hover:underline">
               Lihat Semua
             </Link>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            {featured.map((pkg) => (
+            {featuredPkg.slice(0, 3).map((pkg: any) => (
               <Link key={pkg.id} to="/package/$id" params={{ id: pkg.id }} className="block">
                 <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] h-full transition-all hover:border-[var(--matcha-400)]">
                   <CardContent className="p-5">

packages/api/src/__tests__/admin.integration.test.ts

@@ -0,0 +1,307 @@
+import { describe, it, expect, beforeAll, afterAll, mock } from "bun:test";
+import { getTestPGlite, createTestUserData, closeTestPGlite } from "./test-setup";
+import { drizzle } from "drizzle-orm/pglite";
+import * as schema from "../../../db/src/schema";
+
+const MOCK_ENV = {
+  DATABASE_URL: "postgres://localhost:5432/test",
+  BETTER_AUTH_SECRET: "test-secret-key-32-chars-long!!!!",
+  BETTER_AUTH_URL: "http://localhost:3000",
+  CORS_ORIGIN: "http://localhost:5173",
+  API_KEY_ENCRYPTION_KEY: "test-encryption-key-32-chars!!",
+  REDIS_URL: "redis://localhost:6379",
+  SMTP_HOST: "smtp.test.com",
+  SMTP_PORT: "587",
+  SMTP_USER: "test@test.com",
+  SMTP_PASS: "password123",
+  SMTP_FROM: "test@test.com",
+  PLATFORM_AI_API_KEY: "sk-test-platform-key",
+  PLATFORM_AI_BASE_URL: "https://api.openai.com/v1",
+  PLATFORM_AI_MODEL: "gpt-4o-mini",
+  DEFAULT_SIGNUP_CREDIT_TOKENS: "50000",
+};
+
+mock.module("@labas/env/server", () => ({
+  env: MOCK_ENV,
+}));
+
+const TEST_QUESTION_ID = "b0000000-1000-4000-8000-000000000001";
+const TEST_PACKAGE_ID = "a0000000-1000-4000-8000-000000000001";
+
+describe("Admin Integration", () => {
+  let db: ReturnType<typeof drizzle>;
+  let adminCaller: Awaited<ReturnType<typeof import("../routers/admin").adminRouter.createCaller>> | null = null;
+  let userCaller: Awaited<ReturnType<typeof import("../routers/admin").adminRouter.createCaller>> | null = null;
+  let userData: Awaited<ReturnType<typeof createTestUserData>>;
+  let adminRouter: typeof import("../routers/admin").adminRouter;
+
+  beforeAll(async () => {
+    userData = await createTestUserData();
+    const pg = await getTestPGlite();
+    db = drizzle(pg, { schema });
+
+    mock.module("@labas/db", () => ({
+      db,
+      ...schema,
+    }));
+
+    adminRouter = (await import("../routers/admin")).adminRouter;
+
+    adminCaller = adminRouter.createCaller({
+      session: {
+        user: { id: userData.user1.id, name: userData.user1.name, email: userData.user1.email, emailVerified: false, image: null },
+        expiresAt: new Date("2099-01-01"),
+      },
+      auth: null,
+    });
+
+    userCaller = adminRouter.createCaller({
+      session: {
+        user: { id: userData.user2.id, name: userData.user2.name, email: userData.user2.email, emailVerified: false, image: null },
+        expiresAt: new Date("2099-01-01"),
+      },
+      auth: null,
+    });
+  });
+
+  afterAll(async () => {
+    await closeTestPGlite();
+  });
+
+  // ── Schema Verification ─────────────────────────────────────
+
+  describe("Schema", () => {
+    it("user table has role column defaulting to user", async () => {
+      const rows = await db.execute(`SELECT column_name, column_default FROM information_schema.columns WHERE table_name = 'user' AND column_name = 'role'`);
+      expect(rows.rows.length).toBe(1);
+      expect(rows.rows[0].column_default).toContain("user");
+    });
+
+    it("user table has suspended column defaulting to false", async () => {
+      const rows = await db.execute(`SELECT column_name FROM information_schema.columns WHERE table_name = 'user' AND column_name = 'suspended'`);
+      expect(rows.rows.length).toBe(1);
+    });
+
+    it("question table has is_featured column", async () => {
+      const rows = await db.execute(`SELECT column_name FROM information_schema.columns WHERE table_name = 'question' AND column_name = 'is_featured'`);
+      expect(rows.rows.length).toBe(1);
+    });
+
+    it("user_credit table exists", async () => {
+      const rows = await db.execute(`SELECT table_name FROM information_schema.tables WHERE table_name = 'user_credit'`);
+      expect(rows.rows.length).toBe(1);
+    });
+
+    it("credit_transaction table exists", async () => {
+      const rows = await db.execute(`SELECT table_name FROM information_schema.tables WHERE table_name = 'credit_transaction'`);
+      expect(rows.rows.length).toBe(1);
+    });
+
+    it("admin_audit_log table exists", async () => {
+      const rows = await db.execute(`SELECT table_name FROM information_schema.tables WHERE table_name = 'admin_audit_log'`);
+      expect(rows.rows.length).toBe(1);
+    });
+  });
+
+  // ── Admin Middleware ─────────────────────────────────────────
+
+  describe("Middleware", () => {
+    it("non-admin user gets FORBIDDEN on admin procedures", async () => {
+      try {
+        await userCaller!.listUsers({});
+        expect.unreachable("Should have thrown");
+      } catch (e: any) {
+        expect(e.code).toBe("FORBIDDEN");
+      }
+    });
+
+    it("unauthenticated user gets UNAUTHORIZED on admin procedures", async () => {
+      const publicCaller = adminRouter.createCaller({
+        session: null,
+        auth: null,
+      });
+      try {
+        await publicCaller.listUsers({});
+        expect.unreachable("Should have thrown");
+      } catch (e: any) {
+        expect(e.code).toBe("UNAUTHORIZED");
+      }
+    });
+  });
+
+  // ── User Management ─────────────────────────────────────────
+
+  describe("User Management", () => {
+    it("lists users with pagination", async () => {
+      const result = await adminCaller!.listUsers({});
+      expect(result.users.length).toBeGreaterThanOrEqual(2);
+      expect(result.total).toBeGreaterThanOrEqual(2);
+    });
+
+    it("lists users with search", async () => {
+      const result = await adminCaller!.listUsers({ search: "Test" });
+      expect(result.users.length).toBeGreaterThanOrEqual(1);
+    });
+
+    it("suspends a user", async () => {
+      const suspended = await adminCaller!.suspendUser({ userId: userData.user2.id, suspended: true });
+      expect(suspended.suspended).toBe(true);
+    });
+
+    it("unsuspends a user", async () => {
+      const unsuspended = await adminCaller!.suspendUser({ userId: userData.user2.id, suspended: false });
+      expect(unsuspended.suspended).toBe(false);
+    });
+
+    it("cannot suspend self", async () => {
+      try {
+        await adminCaller!.suspendUser({ userId: userData.user1.id, suspended: true });
+        expect.unreachable("Should have thrown");
+      } catch (e: any) {
+        expect(e.code).toBe("FORBIDDEN");
+      }
+    });
+  });
+
+  // ── Role Management ─────────────────────────────────────────
+
+  describe("Role Management", () => {
+    it("sets another user to admin", async () => {
+      const updated = await adminCaller!.setUserRole({ userId: userData.user2.id, role: "admin" });
+      expect(updated.role).toBe("admin");
+      // Restore
+      await adminCaller!.setUserRole({ userId: userData.user2.id, role: "user" });
+    });
+
+    it("cannot change own role", async () => {
+      try {
+        await adminCaller!.setUserRole({ userId: userData.user1.id, role: "user" });
+        expect.unreachable("Should have thrown");
+      } catch (e: any) {
+        expect(e.code).toBe("FORBIDDEN");
+      }
+    });
+  });
+
+  // ── Credit Management ───────────────────────────────────────
+
+  describe("Credit Management", () => {
+    beforeAll(async () => {
+      await db.insert(schema.userCredit).values({
+        userId: userData.user2.id, tokenBalance: 10000,
+      }).onConflictDoNothing();
+    });
+
+    it("gets user credit balance", async () => {
+      const credit = await adminCaller!.getCreditBalance({ userId: userData.user2.id });
+      expect(credit.tokenBalance).toBe(10000);
+    });
+
+    it("adjusts credit (add)", async () => {
+      const result = await adminCaller!.adjustCredit({ userId: userData.user2.id, amount: 5000, description: "Bonus" });
+      expect(result.newBalance).toBe(15000);
+    });
+
+    it("adjusts credit (deduct)", async () => {
+      const result = await adminCaller!.adjustCredit({ userId: userData.user2.id, amount: -3000, description: "Deduct" });
+      expect(result.newBalance).toBe(12000);
+    });
+
+    it("gets credit transaction history", async () => {
+      const history = await adminCaller!.getCreditHistory({ userId: userData.user2.id });
+      expect(history.transactions.length).toBeGreaterThanOrEqual(2);
+    });
+  });
+
+  // ── Featured Management ─────────────────────────────────────
+
+  describe("Featured Management", () => {
+    it("toggles featured on a package", async () => {
+      const result = await adminCaller!.toggleFeaturedPackage({ packageId: TEST_PACKAGE_ID });
+      expect(result.isFeatured).toBe(true);
+      // Toggle back
+      await adminCaller!.toggleFeaturedPackage({ packageId: TEST_PACKAGE_ID });
+    });
+
+    it("toggles featured on a question", async () => {
+      const result = await adminCaller!.toggleFeaturedQuestion({ questionId: TEST_QUESTION_ID });
+      expect(result.isFeatured).toBe(true);
+      await adminCaller!.toggleFeaturedQuestion({ questionId: TEST_QUESTION_ID });
+    });
+
+    it("lists all featured items", async () => {
+      await adminCaller!.toggleFeaturedPackage({ packageId: TEST_PACKAGE_ID });
+      await adminCaller!.toggleFeaturedQuestion({ questionId: TEST_QUESTION_ID });
+
+      const featured = await adminCaller!.listFeatured();
+      expect(featured.packages.length).toBeGreaterThanOrEqual(1);
+      expect(featured.questions.length).toBeGreaterThanOrEqual(1);
+
+      await adminCaller!.toggleFeaturedPackage({ packageId: TEST_PACKAGE_ID });
+      await adminCaller!.toggleFeaturedQuestion({ questionId: TEST_QUESTION_ID });
+    });
+
+    it("returns NOT_FOUND for non-existent package", async () => {
+      try {
+        await adminCaller!.toggleFeaturedPackage({ packageId: "dddddddd-1000-4000-8000-000000000001" });
+        expect.unreachable("Should have thrown");
+      } catch (e: any) {
+        expect(e.code).toBe("NOT_FOUND");
+      }
+    });
+  });
+
+  // ── Generation Jobs View ────────────────────────────────────
+
+  describe("Generation Jobs", () => {
+    beforeAll(async () => {
+      // Import the full schema reference
+      const fullSchema = await import("../../../db/src/schema");
+      try {
+        await db.insert(fullSchema.generationJob).values({
+          userId: userData.user2.id,
+          status: "failed",
+          mode: "quick",
+          examTypeId: "IELTS",
+          sectionTypeId: "READING",
+          questionCount: 5,
+          tokensUsed: 1000,
+        });
+      } catch {
+        // generationJob may not be in test-setup schema yet - skip
+      }
+    });
+
+    it("lists all jobs across users", async () => {
+      const result = await adminCaller!.listAllJobs({});
+      expect(result.jobs).toBeDefined();
+    });
+  });
+
+  // ── Content Moderation ──────────────────────────────────────
+
+  describe("Content Moderation", () => {
+    it("lists latest questions for moderation", async () => {
+      const result = await adminCaller!.listLatestQuestions({});
+      expect(result.questions.length).toBeGreaterThanOrEqual(1);
+    });
+
+    it("toggles public on any question", async () => {
+      const result = await adminCaller!.togglePublicAny({ questionId: TEST_QUESTION_ID });
+      expect(result.isPublic).toBe(false);
+      // Toggle back
+      await adminCaller!.togglePublicAny({ questionId: TEST_QUESTION_ID });
+    });
+  });
+
+  // ── Dashboard Stats ─────────────────────────────────────────
+
+  describe("Dashboard Stats", () => {
+    it("returns platform-wide stats", async () => {
+      const stats = await adminCaller!.dashboardStats();
+      expect(stats.totalUsers).toBeGreaterThanOrEqual(2);
+      expect(stats.totalQuestions).toBeGreaterThanOrEqual(1);
+      expect(stats.totalPackages).toBeGreaterThanOrEqual(1);
+    });
+  });
+});

packages/api/src/__tests__/credit.test.ts

@@ -0,0 +1,166 @@
+import { describe, it, expect, beforeAll, afterAll, mock } from "bun:test";
+import { getTestPGlite, createTestUserData, closeTestPGlite } from "./test-setup";
+import { drizzle } from "drizzle-orm/pglite";
+import * as schema from "../../../db/src/schema";
+import { eq } from "drizzle-orm";
+
+const MOCK_ENV = {
+  DATABASE_URL: "postgres://localhost:5432/test",
+  BETTER_AUTH_SECRET: "test-secret-key-32-chars-long!!!!",
+  BETTER_AUTH_URL: "http://localhost:3000",
+  CORS_ORIGIN: "http://localhost:5173",
+  API_KEY_ENCRYPTION_KEY: "test-encryption-key-32-chars!!",
+  REDIS_URL: "redis://localhost:6379",
+  SMTP_HOST: "smtp.test.com",
+  SMTP_PORT: "587",
+  SMTP_USER: "test@test.com",
+  SMTP_PASS: "password123",
+  SMTP_FROM: "test@test.com",
+  PLATFORM_AI_API_KEY: "sk-test-platform-key",
+  PLATFORM_AI_BASE_URL: "https://api.openai.com/v1",
+  PLATFORM_AI_MODEL: "gpt-4o-mini",
+  DEFAULT_SIGNUP_CREDIT_TOKENS: "50000",
+};
+
+mock.module("@labas/env/server", () => ({
+  env: MOCK_ENV,
+}));
+
+let userIdCounter = 0;
+function makeUserId(label: string) {
+  userIdCounter++;
+  return `credit-${label}-${userIdCounter}`;
+}
+
+describe("Credit Utility", () => {
+  let db: ReturnType<typeof drizzle>;
+  let credit: typeof import("../lib/credit");
+  let userData: Awaited<ReturnType<typeof createTestUserData>>;
+
+  beforeAll(async () => {
+    userData = await createTestUserData();
+    const pg = await getTestPGlite();
+    db = drizzle(pg, { schema });
+
+    mock.module("@labas/db", () => ({
+      db,
+      ...schema,
+    }));
+
+    credit = await import("../lib/credit");
+  });
+
+  afterAll(async () => {
+    await closeTestPGlite();
+  });
+
+  // ── Credit Deduction ──────────────────────────────────────
+
+  describe("deductCredit", () => {
+    it("deducts tokens from balance", async () => {
+      const uid = makeUserId("deduct");
+      await db.insert(schema.user).values({ id: uid, name: uid, email: `${uid}@test.com` });
+      await db.insert(schema.userCredit).values({ userId: uid, tokenBalance: 5000 });
+
+      const result = await credit.deductCredit(uid, 1000);
+      expect(result.newBalance).toBe(4000);
+
+      const [updated] = await db.select().from(schema.userCredit).where(eq(schema.userCredit.userId, uid)).limit(1);
+      expect(updated.tokenBalance).toBe(4000);
+    });
+
+    it("creates credit transaction record", async () => {
+      const uid = makeUserId("txn");
+      await db.insert(schema.user).values({ id: uid, name: uid, email: `${uid}@test.com` });
+      await db.insert(schema.userCredit).values({ userId: uid, tokenBalance: 5000 });
+
+      await credit.deductCredit(uid, 500);
+
+      const txns = await db.select().from(schema.creditTransaction).where(eq(schema.creditTransaction.userId, uid));
+      expect(txns.length).toBe(1);
+      expect(txns[0].amount).toBe(-500);
+      expect(txns[0].type).toBe("generation_spend");
+    });
+
+    it("throws when user has no credit balance", async () => {
+      const uid = makeUserId("nobalance");
+      await db.insert(schema.user).values({ id: uid, name: uid, email: `${uid}@test.com` });
+
+      try {
+        await credit.deductCredit(uid, 100);
+        expect.unreachable("Should have thrown");
+      } catch (e: any) {
+        expect(e.code).toBe("BAD_REQUEST");
+        expect(e.message).toContain("Insufficient credits");
+      }
+    });
+
+    it("handles insufficient balance", async () => {
+      const uid = makeUserId("lowbal");
+      await db.insert(schema.user).values({ id: uid, name: uid, email: `${uid}@test.com` });
+      await db.insert(schema.userCredit).values({ userId: uid, tokenBalance: 100 });
+
+      try {
+        await credit.deductCredit(uid, 500);
+        expect.unreachable("Should have thrown");
+      } catch (e: any) {
+        expect(e.code).toBe("BAD_REQUEST");
+        expect(e.message).toContain("Insufficient credits");
+      }
+    });
+  });
+
+  // ── getUserCredit ─────────────────────────────────────────
+
+  describe("getUserCredit", () => {
+    it("returns credit info for user with balance", async () => {
+      const uid = makeUserId("getcred");
+      await db.insert(schema.user).values({ id: uid, name: uid, email: `${uid}@test.com` });
+      await db.insert(schema.userCredit).values({ userId: uid, tokenBalance: 3000 });
+
+      const info = await credit.getUserCredit(uid);
+      expect(info.tokenBalance).toBe(3000);
+    });
+
+    it("returns zero for user without credit row", async () => {
+      const uid = makeUserId("nored");
+      await db.insert(schema.user).values({ id: uid, name: uid, email: `${uid}@test.com` });
+
+      const info = await credit.getUserCredit(uid);
+      expect(info.tokenBalance).toBe(0);
+    });
+  });
+
+  // ── isUserSuspended ───────────────────────────────────────
+
+  describe("isUserSuspended", () => {
+    it("returns false for active user", async () => {
+      const suspended = await credit.isUserSuspended(userData.user2.id);
+      expect(suspended).toBe(false);
+    });
+
+    it("returns true for suspended user", async () => {
+      await db.update(schema.user).set({ suspended: true }).where(eq(schema.user.id, userData.user2.id));
+
+      const suspended = await credit.isUserSuspended(userData.user2.id);
+      expect(suspended).toBe(true);
+
+      await db.update(schema.user).set({ suspended: false }).where(eq(schema.user.id, userData.user2.id));
+    });
+  });
+
+  // ── ensureUserCreditRow ───────────────────────────────────
+
+  describe("ensureUserCreditRow", () => {
+    it("creates row if not exists", async () => {
+      const uid = makeUserId("ensure");
+      await db.insert(schema.user).values({ id: uid, name: uid, email: `${uid}@test.com` });
+
+      await credit.ensureUserCreditRow(uid);
+
+      const [row] = await db.select().from(schema.userCredit).where(eq(schema.userCredit.userId, uid)).limit(1);
+      expect(row).toBeDefined();
+      expect(row.tokenBalance).toBe(0);
+    });
+  });
+});

packages/api/src/__tests__/test-setup.ts

@@ -21,19 +21,24 @@ export async function closeTestPGlite() {
 
 async function initSchema(pg: PGlite) {
   const tables = [
-    `CREATE TABLE IF NOT EXISTS "user" (id text PRIMARY KEY, name text NOT NULL, email text NOT NULL UNIQUE, email_verified boolean DEFAULT false NOT NULL, image text, created_at timestamp DEFAULT now() NOT NULL, updated_at timestamp DEFAULT now() NOT NULL)`,
+    `CREATE TABLE IF NOT EXISTS "user" (id text PRIMARY KEY, name text NOT NULL, email text NOT NULL UNIQUE, email_verified boolean DEFAULT false NOT NULL, image text, role text DEFAULT 'user' NOT NULL, suspended boolean DEFAULT false NOT NULL, created_at timestamp DEFAULT now() NOT NULL, updated_at timestamp DEFAULT now() NOT NULL)`,
     `CREATE TABLE IF NOT EXISTS "session" (id text PRIMARY KEY, expires_at timestamp NOT NULL, token text NOT NULL UNIQUE, created_at timestamp DEFAULT now() NOT NULL, updated_at timestamp DEFAULT now() NOT NULL, ip_address text, user_agent text, user_id text NOT NULL REFERENCES "user"(id) ON DELETE CASCADE)`,
     `CREATE TABLE IF NOT EXISTS "account" (id text PRIMARY KEY, account_id text NOT NULL, provider_id text NOT NULL, user_id text NOT NULL REFERENCES "user"(id) ON DELETE CASCADE, access_token text, refresh_token text, id_token text, access_token_expires_at timestamp, refresh_token_expires_at timestamp, scope text, password text, created_at timestamp DEFAULT now() NOT NULL)`,
     `CREATE TABLE IF NOT EXISTS "verification" (id text PRIMARY KEY, identifier text NOT NULL, value text NOT NULL, expires_at timestamp NOT NULL, created_at timestamp DEFAULT now() NOT NULL, updated_at timestamp DEFAULT now() NOT NULL)`,
     `CREATE TABLE IF NOT EXISTS "exam_type" (id text PRIMARY KEY, name text NOT NULL, language text NOT NULL, description text)`,
     `CREATE TABLE IF NOT EXISTS "section_type" (id text PRIMARY KEY, name text NOT NULL)`,
-    `CREATE TABLE IF NOT EXISTS "question" (id uuid DEFAULT gen_random_uuid() PRIMARY KEY, exam_type_id text NOT NULL REFERENCES exam_type(id) ON DELETE CASCADE, section_type_id text NOT NULL REFERENCES section_type(id) ON DELETE CASCADE, format text NOT NULL, passage_text text NOT NULL, question_text text NOT NULL, options jsonb, correct_answer text NOT NULL, explanation text, difficulty integer DEFAULT 3 NOT NULL, skill_tags text[] DEFAULT '{}', is_case_sensitive boolean DEFAULT false NOT NULL, source text DEFAULT 'manual' NOT NULL, ai_model text, ai_prompt_used text, creator_user_id text NOT NULL REFERENCES "user"(id) ON DELETE CASCADE, is_public boolean DEFAULT false NOT NULL, usage_count integer DEFAULT 0 NOT NULL, avg_rating integer, created_at timestamp DEFAULT now() NOT NULL, updated_at timestamp DEFAULT now() NOT NULL)`,
+    `CREATE TABLE IF NOT EXISTS "question" (id uuid DEFAULT gen_random_uuid() PRIMARY KEY, exam_type_id text NOT NULL REFERENCES exam_type(id) ON DELETE CASCADE, section_type_id text NOT NULL REFERENCES section_type(id) ON DELETE CASCADE, format text NOT NULL, passage_text text NOT NULL, question_text text NOT NULL, options jsonb, correct_answer text NOT NULL, explanation text, difficulty integer DEFAULT 3 NOT NULL, skill_tags text[] DEFAULT '{}', is_case_sensitive boolean DEFAULT false NOT NULL, source text DEFAULT 'manual' NOT NULL, ai_model text, ai_prompt_used text, creator_user_id text NOT NULL REFERENCES "user"(id) ON DELETE CASCADE, is_public boolean DEFAULT false NOT NULL, is_featured boolean DEFAULT false NOT NULL, usage_count integer DEFAULT 0 NOT NULL, avg_rating integer, created_at timestamp DEFAULT now() NOT NULL, updated_at timestamp DEFAULT now() NOT NULL)`,
     `CREATE TABLE IF NOT EXISTS "test_package" (id uuid DEFAULT gen_random_uuid() PRIMARY KEY, title text NOT NULL, description text, exam_type_id text NOT NULL REFERENCES exam_type(id) ON DELETE CASCADE, creator_user_id text NOT NULL REFERENCES "user"(id) ON DELETE CASCADE, is_public boolean DEFAULT false NOT NULL, total_questions integer DEFAULT 0 NOT NULL, total_sections integer DEFAULT 0 NOT NULL, estimated_duration_min integer, usage_count integer DEFAULT 0 NOT NULL, avg_rating integer, is_featured boolean DEFAULT false NOT NULL, created_at timestamp DEFAULT now() NOT NULL, updated_at timestamp DEFAULT now() NOT NULL)`,
     `CREATE TABLE IF NOT EXISTS "package_section" (id uuid DEFAULT gen_random_uuid() PRIMARY KEY, package_id uuid NOT NULL REFERENCES test_package(id) ON DELETE CASCADE, section_type_id text NOT NULL REFERENCES section_type(id) ON DELETE CASCADE, title text NOT NULL, order_index integer DEFAULT 0 NOT NULL, created_at timestamp DEFAULT now() NOT NULL)`,
     `CREATE TABLE IF NOT EXISTS "section_question" (id uuid DEFAULT gen_random_uuid() PRIMARY KEY, section_id uuid NOT NULL REFERENCES package_section(id) ON DELETE CASCADE, question_id uuid NOT NULL REFERENCES question(id) ON DELETE CASCADE, order_index integer DEFAULT 0 NOT NULL)`,
     `CREATE TABLE IF NOT EXISTS "test_attempt" (id uuid DEFAULT gen_random_uuid() PRIMARY KEY, user_id text NOT NULL REFERENCES "user"(id) ON DELETE CASCADE, package_id uuid REFERENCES test_package(id) ON DELETE SET NULL, combo_id uuid, started_at timestamp DEFAULT now() NOT NULL, finished_at timestamp, total_score integer, max_score integer, status text DEFAULT 'in_progress' NOT NULL, created_at timestamp DEFAULT now() NOT NULL)`,
     `CREATE TABLE IF NOT EXISTS "section_result" (id uuid DEFAULT gen_random_uuid() PRIMARY KEY, attempt_id uuid NOT NULL REFERENCES test_attempt(id) ON DELETE CASCADE, section_type_id text NOT NULL REFERENCES section_type(id) ON DELETE CASCADE, score integer, max_score integer, time_spent_sec integer, created_at timestamp DEFAULT now() NOT NULL)`,
     `CREATE TABLE IF NOT EXISTS "answer" (id uuid DEFAULT gen_random_uuid() PRIMARY KEY, section_result_id uuid NOT NULL REFERENCES section_result(id) ON DELETE CASCADE, question_id uuid NOT NULL REFERENCES question(id) ON DELETE CASCADE, user_answer text, is_correct boolean, partial_score integer, time_spent_sec integer, created_at timestamp DEFAULT now() NOT NULL)`,
+    `CREATE TABLE IF NOT EXISTS "generation_job" (id uuid DEFAULT gen_random_uuid() PRIMARY KEY, user_id text NOT NULL REFERENCES "user"(id) ON DELETE CASCADE, status text DEFAULT 'pending' NOT NULL, mode text DEFAULT 'quick' NOT NULL, exam_type_id text NOT NULL, section_type_id text NOT NULL, question_count integer NOT NULL, progress integer DEFAULT 0 NOT NULL, progress_message text, logs jsonb, result_json jsonb, input_json jsonb, error_message text, tokens_used integer, duration_ms integer, created_at timestamp DEFAULT now() NOT NULL, updated_at timestamp DEFAULT now() NOT NULL, completed_at timestamp)`,
+    `CREATE TABLE IF NOT EXISTS "user_credit" (user_id text PRIMARY KEY REFERENCES "user"(id) ON DELETE CASCADE, token_balance integer DEFAULT 0 NOT NULL, lifetime_tokens_used integer DEFAULT 0 NOT NULL, created_at timestamp DEFAULT now() NOT NULL, updated_at timestamp DEFAULT now() NOT NULL)`,
+    `CREATE TABLE IF NOT EXISTS "credit_transaction" (id uuid DEFAULT gen_random_uuid() PRIMARY KEY, user_id text NOT NULL REFERENCES "user"(id) ON DELETE CASCADE, amount integer NOT NULL, type text NOT NULL, description text, tokens_used integer, created_at timestamp DEFAULT now() NOT NULL)`,
+    `CREATE TABLE IF NOT EXISTS "admin_audit_log" (id uuid DEFAULT gen_random_uuid() PRIMARY KEY, admin_user_id text NOT NULL REFERENCES "user"(id) ON DELETE CASCADE, action text NOT NULL, target_user_id text REFERENCES "user"(id) ON DELETE SET NULL, details jsonb, created_at timestamp DEFAULT now() NOT NULL)`,
+    `CREATE TABLE IF NOT EXISTS "platform_config" (key text PRIMARY KEY, value text NOT NULL, updated_at timestamp DEFAULT now() NOT NULL)`,
   ];
 
   for (const sql of tables) {
@@ -46,7 +51,7 @@ export async function createTestUserData() {
   const db = drizzle(pg, { schema });
 
   const [user1] = await db.insert(schema.user).values({
-    id: "user-1", name: "Test User", email: "test@test.com",
+    id: "user-1", name: "Test User", email: "test@test.com", role: "admin",
   }).returning();
 
   const [user2] = await db.insert(schema.user).values({
@@ -66,6 +71,7 @@ export async function createTestUserData() {
 
   await db.insert(schema.question).values([
     {
+      id: "b0000000-1000-4000-8000-000000000001",
       examTypeId: "IELTS", sectionTypeId: "READING", format: "multiple_choice",
       passageText: "A".repeat(100), questionText: "What is X?",
       options: [{ key: "A", text: "Opt A" }, { key: "B", text: "Opt B" }],
@@ -75,7 +81,7 @@ export async function createTestUserData() {
   ]);
 
   await db.insert(schema.testPackage).values({
-    id: "00000000-0000-0000-0000-000000000001",
+    id: "a0000000-1000-4000-8000-000000000001",
     title: "Test Package", examTypeId: "IELTS",
     creatorUserId: user1.id, isPublic: true,
   });

packages/api/src/index.ts

@@ -1,14 +1,29 @@
 import { initTRPC, TRPCError } from "@trpc/server";
+import { eq } from "drizzle-orm";
 import { logger } from "./logger";
 import type { Context } from "./context";
+import { db } from "@labas/db";
+import { user } from "@labas/db";
 
 export const t = initTRPC.context<Context>().create();
 
 export const router = t.router;
 
-export const publicProcedure = t.procedure;
+// Global logging for all procedures
+const baseProcedure = t.procedure.use(({ ctx, path, type, next }) => {
+  const start = Date.now();
+  logger.info(`${type.toUpperCase()} ${path}`, { userId: ctx.session?.user.id });
+  return next().finally(() => {
+    logger.info(`${type.toUpperCase()} ${path} completed`, {
+      userId: ctx.session?.user.id,
+      durationMs: Date.now() - start,
+    });
+  });
+});
+
+export const publicProcedure = baseProcedure;
 
-export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
+export const protectedProcedure = baseProcedure.use(({ ctx, next }) => {
   if (!ctx.session) {
     throw new TRPCError({
       code: "UNAUTHORIZED",
@@ -24,14 +39,10 @@ export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
   });
 });
 
-// Logging middleware (available to use per-router)
-export const loggedProcedure = t.procedure.use(({ ctx, path, type, next }) => {
-  const start = Date.now();
-  logger.info(`${type.toUpperCase()} ${path}`, { userId: ctx.session?.user.id });
-  return next().finally(() => {
-    logger.info(`${type.toUpperCase()} ${path} completed`, {
-      userId: ctx.session?.user.id,
-      durationMs: Date.now() - start,
-    });
-  });
+export const adminProcedure = protectedProcedure.use(async ({ ctx, next }) => {
+  const [u] = await db.select().from(user).where(eq(user.id, ctx.session.user.id)).limit(1);
+  if (!u || u.role !== "admin") {
+    throw new TRPCError({ code: "FORBIDDEN", message: "Admin access required" });
+  }
+  return next({ ctx: { ...ctx, adminUser: u } });
 });

packages/api/src/lib/credit.ts

@@ -0,0 +1,214 @@
+import { eq, sql, and, desc, sum, gte } from "drizzle-orm";
+import { db } from "@labas/db";
+import { userCredit, creditTransaction, user, platformConfig } from "@labas/db";
+import { TRPCError } from "@trpc/server";
+import { env } from "@labas/env/server";
+
+const COOLDOWN_DAYS = 7;
+
+async function getConfigRaw(key: string): Promise<string | null> {
+  const [row] = await db
+    .select({ value: platformConfig.value })
+    .from(platformConfig)
+    .where(eq(platformConfig.key, key))
+    .limit(1);
+  return row?.value ?? null;
+}
+
+export async function getConfig(key: string, envFallback: () => string): Promise<string> {
+  const dbVal = await getConfigRaw(key);
+  return dbVal ?? envFallback();
+}
+
+export async function setConfig(key: string, value: string): Promise<void> {
+  await db
+    .insert(platformConfig)
+    .values({ key, value })
+    .onConflictDoUpdate({
+      target: [platformConfig.key],
+      set: { value },
+    });
+}
+
+async function isFreeCreditsEnabled(): Promise<boolean> {
+  const val = await getConfig("free_credits_enabled", () => String(env.FREE_CREDITS_ENABLED));
+  return val === "true";
+}
+
+async function getFreeCreditsMaxPool(): Promise<number> {
+  const val = await getConfig("free_credits_max_pool", () => String(env.FREE_CREDITS_MAX_POOL));
+  return parseInt(val, 10) || env.FREE_CREDITS_MAX_POOL;
+}
+
+export async function getUserCredit(userId: string) {
+  const [credit] = await db
+    .select()
+    .from(userCredit)
+    .where(eq(userCredit.userId, userId))
+    .limit(1);
+
+  return credit ?? { userId, tokenBalance: 0, lifetimeTokensUsed: 0 };
+}
+
+export async function ensureUserCreditRow(userId: string) {
+  await db
+    .insert(userCredit)
+    .values({ userId, tokenBalance: 0 })
+    .onConflictDoNothing();
+}
+
+export async function deductCredit(
+  userId: string,
+  tokens: number,
+): Promise<{ newBalance: number }> {
+  await ensureUserCreditRow(userId);
+
+  const [current] = await db
+    .select({ balance: userCredit.tokenBalance })
+    .from(userCredit)
+    .where(eq(userCredit.userId, userId))
+    .limit(1);
+
+  if (!current) {
+    throw new TRPCError({ code: "BAD_REQUEST", message: "No credits available" });
+  }
+
+  if (current.balance < tokens) {
+    throw new TRPCError({ code: "BAD_REQUEST", message: "Insufficient credits" });
+  }
+
+  const [updated] = await db
+    .update(userCredit)
+    .set({
+      tokenBalance: sql`token_balance - ${tokens}`,
+      lifetimeTokensUsed: sql`lifetime_tokens_used + ${tokens}`,
+    })
+    .where(eq(userCredit.userId, userId))
+    .returning();
+
+  if (!updated) {
+    throw new TRPCError({ code: "BAD_REQUEST", message: "Failed to deduct credits" });
+  }
+
+  await db.insert(creditTransaction).values({
+    userId,
+    amount: -tokens,
+    type: "generation_spend",
+    tokensUsed: tokens,
+  });
+
+  return { newBalance: updated.tokenBalance };
+}
+
+export async function isUserSuspended(userId: string): Promise<boolean> {
+  const [u] = await db
+    .select({ suspended: user.suspended })
+    .from(user)
+    .where(eq(user.id, userId))
+    .limit(1);
+
+  return u?.suspended ?? false;
+}
+
+export async function grantSignupCredit(
+  userId: string,
+  amount: number,
+): Promise<void> {
+  await ensureUserCreditRow(userId);
+
+  await db
+    .update(userCredit)
+    .set({
+      tokenBalance: sql`token_balance + ${amount}`,
+    })
+    .where(eq(userCredit.userId, userId));
+
+  await db.insert(creditTransaction).values({
+    userId,
+    amount,
+    type: "signup_bonus",
+    description: "Welcome credits",
+  });
+}
+
+export async function getPoolUsage() {
+  const maxPool = await getFreeCreditsMaxPool();
+  const [agg] = await db
+    .select({ totalDistributed: sum(creditTransaction.amount) })
+    .from(creditTransaction)
+    .where(gte(creditTransaction.amount, 0));
+
+  const totalDistributed = Number(agg?.totalDistributed ?? 0);
+
+  return {
+    totalDistributed,
+    maxPool,
+    remaining: Math.max(0, maxPool - totalDistributed),
+  };
+}
+
+export async function getLastRefillAt(userId: string) {
+  const [txn] = await db
+    .select({ createdAt: creditTransaction.createdAt })
+    .from(creditTransaction)
+    .where(
+      and(
+        eq(creditTransaction.userId, userId),
+        gte(creditTransaction.amount, 0),
+      ),
+    )
+    .orderBy(desc(creditTransaction.createdAt))
+    .limit(1);
+
+  return txn ?? null;
+}
+
+function calcCooldownRemaining(lastRefillAt: Date | string | null): number {
+  if (!lastRefillAt) return 0;
+  const last = new Date(lastRefillAt).getTime();
+  const cooldownEnd = last + COOLDOWN_DAYS * 24 * 60 * 60 * 1000;
+  const remaining = Math.max(0, Math.ceil((cooldownEnd - Date.now()) / (24 * 60 * 60 * 1000)));
+  return remaining;
+}
+
+export async function autoRefillIfEligible(
+  userId: string,
+): Promise<{ refilled: boolean; message: string; newBalance?: number }> {
+  if (!(await isFreeCreditsEnabled())) {
+    return { refilled: false, message: "Free credits are currently disabled." };
+  }
+
+  const pool = await getPoolUsage();
+  const amount = env.DEFAULT_SIGNUP_CREDIT_TOKENS;
+
+  if (pool.remaining < amount) {
+    return { refilled: false, message: "Free credit pool is exhausted. Contact admin." };
+  }
+
+  const lastRefill = await getLastRefillAt(userId);
+  const cooldown = calcCooldownRemaining(lastRefill?.createdAt ?? null);
+
+  if (cooldown > 0) {
+    return { refilled: false, message: `Cooldown active. Try again in ${cooldown} day(s).` };
+  }
+
+  await ensureUserCreditRow(userId);
+
+  await db
+    .update(userCredit)
+    .set({
+      tokenBalance: sql`token_balance + ${amount}`,
+    })
+    .where(eq(userCredit.userId, userId));
+
+  await db.insert(creditTransaction).values({
+    userId,
+    amount,
+    type: "auto_refill",
+    description: "Auto-refill from free credit pool",
+  });
+
+  const credit = await getUserCredit(userId);
+
+  return { refilled: true, message: `Refilled ${amount.toLocaleString()} tokens from free pool.`, newBalance: credit.tokenBalance };
+}

packages/api/src/lib/rate-limit.ts

@@ -1,6 +1,7 @@
 import IORedis from "ioredis";
 import { env } from "@labas/env/server";
 import { TRPCError } from "@trpc/server";
+import { logger } from "@labas/api/logger";
 
 let redis: IORedis | null = null;
 
@@ -55,9 +56,7 @@ export async function checkRateLimit(config: RateLimitConfig): Promise<void> {
     }
   } catch (err) {
     if (err instanceof TRPCError) throw err;
-    // If Redis is down, fail open (log warning, don't block traffic)
-    // eslint-disable-next-line no-console
-    console.warn("[RATELIMIT] Redis unavailable, rate limit skipped:", (err as Error).message);
+    logger.warn("[RATELIMIT] Redis unavailable, rate limit skipped", { error: (err as Error).message });
   }
 }
 

packages/api/src/logger.ts

@@ -1,29 +1,59 @@
 import winston from "winston";
 
-const { combine, timestamp, printf, colorize, errors } = winston.format;
+const { combine, timestamp, printf, colorize, errors, json } = winston.format;
 
-const customFormat = printf(({ level, message, timestamp, stack, ...metadata }) => {
-  let msg = `${timestamp} [${level}]: ${message}`;
+const isProduction = process.env.NODE_ENV === "production";
+
+const devFormat = printf(({ level, message, timestamp, stack, reqId, ...metadata }) => {
+  const prefix = reqId ? `[${reqId}] ` : "";
+  let msg = `${timestamp} [${level}]: ${prefix}${message}`;
   if (Object.keys(metadata).length > 0) {
-    msg += ` \n  ${JSON.stringify(metadata, null, 2)}`;
+    msg += ` ${JSON.stringify(metadata)}`;
   }
   if (stack) {
-    msg += `\n  ${stack}`;
+    msg += `\n${stack}`;
   }
   return msg;
 });
 
+function createTransports() {
+  const transports: winston.transport[] = [];
+
+  if (isProduction) {
+    transports.push(
+      new winston.transports.File({
+        filename: "logs/labas-error.log",
+        level: "error",
+        format: combine(timestamp(), errors({ stack: true }), json()),
+        maxsize: 10 * 1024 * 1024,
+        maxFiles: 14,
+      }),
+      new winston.transports.File({
+        filename: "logs/labas-combined.log",
+        format: combine(timestamp(), errors({ stack: true }), json()),
+        maxsize: 10 * 1024 * 1024,
+        maxFiles: 7,
+      }),
+    );
+  }
+
+  transports.push(
+    new winston.transports.Console({
+      format: isProduction
+        ? combine(timestamp(), errors({ stack: true }), json())
+        : combine(colorize(), timestamp({ format: "YYYY-MM-DD HH:mm:ss" }), errors({ stack: true }), devFormat),
+    }),
+  );
+
+  return transports;
+}
+
 export const logger = winston.createLogger({
   level: process.env.LOG_LEVEL ?? "info",
   defaultMeta: { service: "labas-api" },
-  transports: [
-    new winston.transports.Console({
-      format: combine(
-        colorize(),
-        timestamp({ format: "YYYY-MM-DD HH:mm:ss" }),
-        errors({ stack: true }),
-        customFormat,
-      ),
-    }),
-  ],
+  transports: createTransports(),
 });
+
+export function withRequestId(reqId: string) {
+  return logger.child({ reqId });
+}

packages/api/src/queue.ts

@@ -1,6 +1,11 @@
 import { Queue, Worker, type Job } from "bullmq";
 import IORedis from "ioredis";
 import { env } from "@labas/env/server";
+
+async function log(level: "debug" | "warn", message: string, meta?: Record<string, unknown>) {
+  const mod = await import("@labas/api/logger");
+  (mod.logger as any)[level](message, meta);
+}
 import {
   generateQuestionsQuick,
   generateQuestionsAgentic,
@@ -365,6 +370,20 @@ async function completeJobWithResult(params: {
         notInArray(generationJob.status, ["cancelled"]),
       ),
     );
+
+  // Deduct from user credit if using platform generation
+  const inputAny = params.input as any;
+  if (inputAny._isPlatformGeneration && params.totalTokens > 0) {
+    const [jobRow] = await db
+      .select({ userId: generationJob.userId })
+      .from(generationJob)
+      .where(eq(generationJob.id, params.jobId))
+      .limit(1);
+    if (jobRow) {
+      const { deductCredit } = await import("@labas/api/lib/credit");
+      await deductCredit(jobRow.userId, params.totalTokens).catch(() => {});
+    }
+  }
 }
 
 export type CancelGenerationJobResult =
@@ -419,11 +438,11 @@ export async function cancelGenerationJob(
         try {
           await bullJob.remove();
         } catch {
-          // Likely active; worker exits cooperatively.
+          log("debug", "[QUEUE] Could not remove active job.", { jobId });
         }
       }
     } catch {
-      // Ignore queue hiccups.
+      log("warn", "[QUEUE] Failed to access queue during cancellation.", { jobId });
     }
   }
 
@@ -699,6 +718,7 @@ export const generationWorker = new Worker<FastJobData>(
         try {
           await runShard(shard);
         } catch {
+          log("warn", "[GENERATION] Fast shard failed.", { jobId, section: shard.section });
           failedShards.push(shard);
         }
       });
@@ -957,6 +977,7 @@ export const generationQualityWorker = new Worker<QualityJobData>(
               tokensUsed: result.meta.tokensUsed ?? 0,
             };
           } catch {
+            log("warn", "[GENERATION] Quality phase failed, using fast questions.", { jobId, section: split.section });
             const fallbackQuestions = fastQuestions
               .filter((q) => q.section === split.section)
               .slice(0, split.count);
@@ -1125,7 +1146,7 @@ export function decryptInputFromDb(inputJson: unknown): GenerationInput {
         },
       };
     } catch {
-      // If decryption fails, key was likely stored unencrypted (legacy data)
+      log("debug", "[QUEUE] API key decryption failed (legacy data).");
       return data as unknown as GenerationInput;
     }
   }

packages/api/src/routers/admin.ts

@@ -0,0 +1,471 @@
+import { z } from "zod";
+import { eq, desc, sql, count, ilike, or } from "drizzle-orm";
+import { adminProcedure, protectedProcedure, router } from "../index";
+import * as schema from "@labas/db";
+import { db } from "@labas/db";
+import { paginationSchema, paginateDefaults } from "../lib/pagination";
+import { throwNotFound, throwForbidden, throwBadRequest } from "../lib/errors";
+import { getUserCredit, getLastRefillAt, getPoolUsage, getConfig, setConfig } from "../lib/credit";
+import { env } from "@labas/env/server";
+
+function audit(adminUserId: string, action: string, targetUserId: string | null, details?: Record<string, unknown>) {
+  return db.insert(schema.adminAuditLog).values({
+    adminUserId,
+    action,
+    targetUserId,
+    details,
+  });
+}
+
+export const adminRouter = router({
+  isAdmin: protectedProcedure.query(async ({ ctx }) => {
+    const [u] = await db.select({ role: schema.user.role }).from(schema.user).where(eq(schema.user.id, ctx.session.user.id)).limit(1);
+    return { isAdmin: u?.role === "admin" };
+  }),
+
+  getMyCredit: protectedProcedure.query(async ({ ctx }) => {
+    const credit = await getUserCredit(ctx.session.user.id);
+    const lastRefill = await getLastRefillAt(ctx.session.user.id);
+    const cooldownMs = 7 * 24 * 60 * 60 * 1000;
+    const lastRefillTime = lastRefill?.createdAt ? new Date(lastRefill.createdAt).getTime() : 0;
+    const cooldownEnd = lastRefillTime + cooldownMs;
+    const cooldownRemaining = Math.max(0, Math.ceil((cooldownEnd - Date.now()) / (24 * 60 * 60 * 1000)));
+
+    const enabledVal = await getConfig("free_credits_enabled", () => String(env.FREE_CREDITS_ENABLED));
+
+    return {
+      tokenBalance: credit.tokenBalance,
+      lifetimeTokensUsed: credit.lifetimeTokensUsed,
+      freeCreditsEnabled: enabledVal === "true",
+      lastRefillAt: lastRefill?.createdAt ?? null,
+      cooldownDays: 7,
+      cooldownRemaining,
+    };
+  }),
+
+  // ── User Management ───────────────────────────────────────
+
+  listUsers: adminProcedure
+    .input(
+      z
+        .object({
+          search: z.string().optional(),
+          ...paginationSchema.shape,
+        })
+        .optional(),
+    )
+    .query(async ({ input }) => {
+      const { limit, offset } = paginateDefaults(input);
+      const where = input?.search
+        ? or(
+            ilike(schema.user.name, `%${input.search}%`),
+            ilike(schema.user.email, `%${input.search}%`),
+          )
+        : undefined;
+
+      const [total] = await db
+        .select({ count: count() })
+        .from(schema.user)
+        .where(where);
+
+      const users = await db
+        .select({
+          id: schema.user.id,
+          name: schema.user.name,
+          email: schema.user.email,
+          role: schema.user.role,
+          suspended: schema.user.suspended,
+          emailVerified: schema.user.emailVerified,
+          createdAt: schema.user.createdAt,
+        })
+        .from(schema.user)
+        .where(where)
+        .orderBy(desc(schema.user.createdAt))
+        .limit(limit)
+        .offset(offset);
+
+      return { users, total: Number(total?.count ?? 0) };
+    }),
+
+  getUserDetail: adminProcedure
+    .input(z.object({ userId: z.string() }))
+    .query(async ({ input }) => {
+      const [u] = await db.select().from(schema.user).where(eq(schema.user.id, input.userId)).limit(1);
+      if (!u) throwNotFound("User");
+
+      const [credit] = await db
+        .select()
+        .from(schema.userCredit)
+        .where(eq(schema.userCredit.userId, input.userId))
+        .limit(1);
+
+      return { user: u, credit: credit ?? null };
+    }),
+
+  suspendUser: adminProcedure
+    .input(z.object({ userId: z.string(), suspended: z.boolean() }))
+    .mutation(async ({ ctx, input }) => {
+      if (input.userId === ctx.session.user.id) throwForbidden("Cannot suspend yourself");
+
+      const [u] = await db
+        .update(schema.user)
+        .set({ suspended: input.suspended })
+        .where(eq(schema.user.id, input.userId))
+        .returning();
+      if (!u) throwNotFound("User");
+
+      await audit(ctx.session.user.id, input.suspended ? "suspend_user" : "unsuspend_user", input.userId);
+      return u;
+    }),
+
+  setUserRole: adminProcedure
+    .input(z.object({ userId: z.string(), role: z.enum(["user", "admin"]) }))
+    .mutation(async ({ ctx, input }) => {
+      if (input.userId === ctx.session.user.id) throwForbidden("Cannot change your own role");
+
+      const [u] = await db
+        .update(schema.user)
+        .set({ role: input.role })
+        .where(eq(schema.user.id, input.userId))
+        .returning();
+      if (!u) throwNotFound("User");
+
+      await audit(ctx.session.user.id, "change_role", input.userId, { newRole: input.role });
+      return u;
+    }),
+
+  // ── Credit Management ─────────────────────────────────────
+
+  getCreditBalance: adminProcedure
+    .input(z.object({ userId: z.string() }))
+    .query(async ({ input }) => {
+      const [credit] = await db
+        .select()
+        .from(schema.userCredit)
+        .where(eq(schema.userCredit.userId, input.userId))
+        .limit(1);
+      return credit ?? { userId: input.userId, tokenBalance: 0, lifetimeTokensUsed: 0 };
+    }),
+
+  adjustCredit: adminProcedure
+    .input(
+      z.object({
+        userId: z.string(),
+        amount: z.number().min(-1000000).max(1000000),
+        description: z.string().optional(),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const [user] = await db.select({ id: schema.user.id }).from(schema.user).where(eq(schema.user.id, input.userId)).limit(1);
+      if (!user) throwNotFound("User");
+
+      await db
+        .insert(schema.userCredit)
+        .values({ userId: input.userId, tokenBalance: 0 })
+        .onConflictDoNothing();
+
+      const [updated] = await db
+        .update(schema.userCredit)
+        .set({
+          tokenBalance: sql`token_balance + ${input.amount}`,
+        })
+        .where(eq(schema.userCredit.userId, input.userId))
+        .returning();
+      if (!updated) throwBadRequest("Failed to adjust credit");
+
+      await db.insert(schema.creditTransaction).values({
+        userId: input.userId,
+        amount: input.amount,
+        type: "admin_adjust",
+        description: input.description ?? null,
+      });
+
+      await audit(ctx.session.user.id, "adjust_credit", input.userId, {
+        amount: input.amount,
+        newBalance: updated.tokenBalance,
+      });
+
+      return { newBalance: updated.tokenBalance };
+    }),
+
+  getCreditHistory: adminProcedure
+    .input(z.object({ userId: z.string() }))
+    .query(async ({ input }) => {
+      const transactions = await db
+        .select()
+        .from(schema.creditTransaction)
+        .where(eq(schema.creditTransaction.userId, input.userId))
+        .orderBy(desc(schema.creditTransaction.createdAt))
+        .limit(50);
+
+      return { transactions };
+    }),
+
+  // ── Featured Management ──────────────────────────────────
+
+  toggleFeaturedPackage: adminProcedure
+    .input(z.object({ packageId: z.string().uuid() }))
+    .mutation(async ({ ctx, input }) => {
+      const [pkg] = await db
+        .select({ id: schema.testPackage.id, isFeatured: schema.testPackage.isFeatured })
+        .from(schema.testPackage)
+        .where(eq(schema.testPackage.id, input.packageId))
+        .limit(1);
+      if (!pkg) throwNotFound("Package");
+
+      const newValue = !pkg.isFeatured;
+      const [updated] = await db
+        .update(schema.testPackage)
+        .set({ isFeatured: newValue })
+        .where(eq(schema.testPackage.id, input.packageId))
+        .returning();
+
+      await audit(ctx.session.user.id, newValue ? "feature_package" : "unfeature_package", null, {
+        packageId: input.packageId,
+      });
+      return updated;
+    }),
+
+  toggleFeaturedQuestion: adminProcedure
+    .input(z.object({ questionId: z.string().uuid() }))
+    .mutation(async ({ ctx, input }) => {
+      const [q] = await db
+        .select({ id: schema.question.id, isFeatured: schema.question.isFeatured })
+        .from(schema.question)
+        .where(eq(schema.question.id, input.questionId))
+        .limit(1);
+      if (!q) throwNotFound("Question");
+
+      const newValue = !q.isFeatured;
+      const [updated] = await db
+        .update(schema.question)
+        .set({ isFeatured: newValue })
+        .where(eq(schema.question.id, input.questionId))
+        .returning();
+
+      await audit(ctx.session.user.id, newValue ? "feature_question" : "unfeature_question", null, {
+        questionId: input.questionId,
+      });
+      return updated;
+    }),
+
+  listFeatured: protectedProcedure.query(async () => {
+    const packages = await db
+      .select()
+      .from(schema.testPackage)
+      .where(eq(schema.testPackage.isFeatured, true))
+      .orderBy(desc(schema.testPackage.updatedAt));
+
+    const questions = await db
+      .select()
+      .from(schema.question)
+      .where(eq(schema.question.isFeatured, true))
+      .orderBy(desc(schema.question.updatedAt));
+
+    return { packages, questions };
+  }),
+
+  searchContent: adminProcedure
+    .input(
+      z.object({
+        search: z.string(),
+        type: z.enum(["packages", "questions"]),
+        limit: z.number().min(1).max(100).default(20),
+        offset: z.number().min(0).default(0),
+      }),
+    )
+    .query(async ({ input }) => {
+      if (input.type === "packages") {
+        const where = or(
+          ilike(schema.testPackage.title, `%${input.search}%`),
+          ilike(schema.testPackage.description ?? sql`''`, `%${input.search}%`),
+        );
+
+        const [total] = await db.select({ count: count() }).from(schema.testPackage).where(where);
+
+        const items = await db
+          .select()
+          .from(schema.testPackage)
+          .where(where)
+          .orderBy(desc(schema.testPackage.updatedAt))
+          .limit(input.limit)
+          .offset(input.offset);
+
+        return { items, total: Number(total?.count ?? 0) };
+      }
+
+      const where = or(
+        ilike(schema.question.questionText, `%${input.search}%`),
+        ilike(schema.question.passageText, `%${input.search}%`),
+      );
+
+      const [total] = await db.select({ count: count() }).from(schema.question).where(where);
+
+      const items = await db
+        .select()
+        .from(schema.question)
+        .where(where)
+        .orderBy(desc(schema.question.updatedAt))
+        .limit(input.limit)
+        .offset(input.offset);
+
+      return { items, total: Number(total?.count ?? 0) };
+    }),
+
+  // ── Generation Jobs ──────────────────────────────────────
+
+  listAllJobs: adminProcedure
+    .input(
+      z
+        .object({
+          status: z.string().optional(),
+          ...paginationSchema.shape,
+        })
+        .optional(),
+    )
+    .query(async ({ input }) => {
+      const { limit, offset } = paginateDefaults(input);
+      const where = input?.status
+        ? eq(schema.generationJob.status, input.status)
+        : undefined;
+
+      const [total] = await db
+        .select({ count: count() })
+        .from(schema.generationJob)
+        .where(where);
+
+      const jobs = await db
+        .select({
+          id: schema.generationJob.id,
+          userId: schema.generationJob.userId,
+          status: schema.generationJob.status,
+          mode: schema.generationJob.mode,
+          examTypeId: schema.generationJob.examTypeId,
+          sectionTypeId: schema.generationJob.sectionTypeId,
+          questionCount: schema.generationJob.questionCount,
+          progress: schema.generationJob.progress,
+          tokensUsed: schema.generationJob.tokensUsed,
+          errorMessage: schema.generationJob.errorMessage,
+          createdAt: schema.generationJob.createdAt,
+          completedAt: schema.generationJob.completedAt,
+        })
+        .from(schema.generationJob)
+        .where(where)
+        .orderBy(desc(schema.generationJob.createdAt))
+        .limit(limit)
+        .offset(offset);
+
+      return { jobs, total: Number(total?.count ?? 0) };
+    }),
+
+  cancelAnyJob: adminProcedure
+    .input(z.object({ jobId: z.string().uuid() }))
+    .mutation(async ({ ctx, input }) => {
+      const [job] = await db
+        .select()
+        .from(schema.generationJob)
+        .where(eq(schema.generationJob.id, input.jobId))
+        .limit(1);
+      if (!job) throwNotFound("Job");
+
+      if (job.status !== "pending" && job.status !== "running") {
+        throwBadRequest("Only pending or running jobs can be cancelled");
+      }
+
+      const [updated] = await db
+        .update(schema.generationJob)
+        .set({ status: "cancelled", completedAt: new Date() })
+        .where(eq(schema.generationJob.id, input.jobId))
+        .returning();
+
+      await audit(ctx.session.user.id, "cancel_job", job.userId, { jobId: input.jobId });
+      return updated;
+    }),
+
+  // ── Content Moderation ───────────────────────────────────
+
+  listLatestQuestions: adminProcedure
+    .input(
+      z
+        .object({
+          ...paginationSchema.shape,
+        })
+        .optional(),
+    )
+    .query(async ({ input }) => {
+      const { limit, offset } = paginateDefaults(input);
+
+      const questions = await db
+        .select()
+        .from(schema.question)
+        .orderBy(desc(schema.question.createdAt))
+        .limit(limit)
+        .offset(offset);
+
+      return { questions };
+    }),
+
+  togglePublicAny: adminProcedure
+    .input(z.object({ questionId: z.string().uuid() }))
+    .mutation(async ({ ctx, input }) => {
+      const [q] = await db
+        .select({ id: schema.question.id, isPublic: schema.question.isPublic, creatorUserId: schema.question.creatorUserId })
+        .from(schema.question)
+        .where(eq(schema.question.id, input.questionId))
+        .limit(1);
+      if (!q) throwNotFound("Question");
+
+      const newValue = !q.isPublic;
+      const [updated] = await db
+        .update(schema.question)
+        .set({ isPublic: newValue })
+        .where(eq(schema.question.id, input.questionId))
+        .returning();
+
+      await audit(ctx.session.user.id, newValue ? "publish_question" : "unpublish_question", q.creatorUserId, {
+        questionId: input.questionId,
+      });
+      return updated;
+    }),
+
+  // ── Dashboard Stats ──────────────────────────────────────
+
+  dashboardStats: adminProcedure.query(async () => {
+    const [userCount] = await db.select({ count: count() }).from(schema.user);
+    const [questionCount] = await db.select({ count: count() }).from(schema.question);
+    const [packageCount] = await db.select({ count: count() }).from(schema.testPackage);
+    const [jobCount] = await db.select({ count: count() }).from(schema.generationJob);
+    const pool = await getPoolUsage();
+    const enabledVal = await getConfig("free_credits_enabled", () => String(env.FREE_CREDITS_ENABLED));
+
+    return {
+      totalUsers: Number(userCount?.count ?? 0),
+      totalQuestions: Number(questionCount?.count ?? 0),
+      totalPackages: Number(packageCount?.count ?? 0),
+      totalJobs: Number(jobCount?.count ?? 0),
+      poolUsed: pool.totalDistributed,
+      poolMax: pool.maxPool,
+      poolRemaining: pool.remaining,
+      freeCreditsEnabled: enabledVal === "true",
+    };
+  }),
+
+  getPlatformConfig: adminProcedure.query(async () => {
+    const [enabled, maxPool] = await Promise.all([
+      getConfig("free_credits_enabled", () => String(env.FREE_CREDITS_ENABLED)),
+      getConfig("free_credits_max_pool", () => String(env.FREE_CREDITS_MAX_POOL)),
+    ]);
+    return {
+      freeCreditsEnabled: enabled === "true",
+      freeCreditsMaxPool: parseInt(maxPool, 10) || env.FREE_CREDITS_MAX_POOL,
+    };
+  }),
+
+  setPlatformConfig: adminProcedure
+    .input(z.object({ key: z.string(), value: z.string() }))
+    .mutation(async ({ ctx, input }) => {
+      await setConfig(input.key, input.value);
+      await audit(ctx.session.user.id, "set_config", null, { key: input.key, value: input.value });
+      return { ok: true };
+    }),
+});

packages/api/src/routers/ai.ts

@@ -1,7 +1,7 @@
 import { z } from "zod";
 import { eq, desc, and, gte, sql } from "drizzle-orm";
 import { router, protectedProcedure } from "../index";
-import { generationInputSchema } from "@labas/ai/schemas";
+import { type GenerationInput, generationInputSchema } from "@labas/ai/schemas";
 import { cancelGenerationJob, enqueueGeneration } from "../queue";
 import { db } from "@labas/db";
 import { question, generationJob } from "@labas/db";
@@ -9,9 +9,15 @@ import { paginationSchema, paginateDefaults } from "../lib/pagination";
 import { throwNotFound, throwForbidden, throwBadRequest } from "../lib/errors";
 import { checkDailyBudget } from "../lib/rate-limit";
 import { decryptApiKey } from "../lib/encryption";
+import { isUserSuspended, getUserCredit, autoRefillIfEligible } from "../lib/credit";
+import { env } from "@labas/env/server";
 
 const DAILY_TOKEN_BUDGET = 500_000;
 
+const generateInputSchema = generationInputSchema.extend({
+  apiKeyConfig: generationInputSchema.shape.apiKeyConfig.optional(),
+});
+
 function sanitizeJobForResponse(row: typeof generationJob.$inferSelect) {
   const { inputJson, ...safe } = row;
   return safe;
@@ -19,13 +25,47 @@ function sanitizeJobForResponse(row: typeof generationJob.$inferSelect) {
 
 export const aiRouter = router({
   generate: protectedProcedure
-    .input(generationInputSchema)
+    .input(generateInputSchema)
     .mutation(async ({ ctx, input }) => {
+      const suspended = await isUserSuspended(ctx.session.user.id);
+      if (suspended) throwForbidden("Account is suspended");
+
+      const hasApiKey = !!input.apiKeyConfig?.apiKey;
+      let resolvedInput: GenerationInput;
+
+      if (!hasApiKey) {
+        if (!env.FREE_CREDITS_ENABLED) {
+          throwBadRequest("Free credits are currently disabled. Use BYOK or contact admin.");
+        }
+        if (!env.PLATFORM_AI_API_KEY) {
+          throwBadRequest("Platform AI is not configured. Add your own API key in Settings.");
+        }
+        const credit = await getUserCredit(ctx.session.user.id);
+        if (credit.tokenBalance <= 0) {
+          const refill = await autoRefillIfEligible(ctx.session.user.id);
+          if (!refill.refilled) {
+            throwBadRequest(refill.message);
+          }
+        }
+        resolvedInput = {
+          ...input,
+          apiKeyConfig: {
+            baseUrl: env.PLATFORM_AI_BASE_URL || "https://api.openai.com/v1",
+            apiKey: env.PLATFORM_AI_API_KEY,
+            model: env.PLATFORM_AI_MODEL || "gpt-4o-mini",
+            maxTokens: 4096,
+          },
+          _isPlatformGeneration: true,
+        } as GenerationInput;
+      } else {
+        resolvedInput = input as GenerationInput;
+      }
+
       const withinBudget = await checkDailyBudget(ctx.session.user.id, DAILY_TOKEN_BUDGET);
       if (!withinBudget) {
         throwBadRequest(`Daily token budget (${DAILY_TOKEN_BUDGET.toLocaleString()}) exceeded. Try again tomorrow.`);
       }
-      const jobId = await enqueueGeneration(ctx.session.user.id, input);
+      const jobId = await enqueueGeneration(ctx.session.user.id, resolvedInput);
       return { jobId };
     }),
 

packages/api/src/routers/index.ts

@@ -1,4 +1,5 @@
 import { protectedProcedure, publicProcedure, router } from "../index";
+import { adminRouter } from "./admin";
 import { aiRouter } from "./ai";
 import { attemptRouter } from "./attempt";
 import { comboRouter } from "./combo";
@@ -22,6 +23,7 @@ export const appRouter = router({
       user: ctx.session.user,
     };
   }),
+  admin: adminRouter,
   ai: aiRouter,
   attempt: attemptRouter,
   combo: comboRouter,

packages/db/src/schema/admin.ts

@@ -0,0 +1,92 @@
+import { relations } from "drizzle-orm";
+import { pgTable, text, integer, timestamp, jsonb, uuid, index } from "drizzle-orm/pg-core";
+import { user } from "./auth";
+
+export const userCredit = pgTable(
+  "user_credit",
+  {
+    userId: text("user_id")
+      .primaryKey()
+      .references(() => user.id, { onDelete: "cascade" }),
+    tokenBalance: integer("token_balance").default(0).notNull(),
+    lifetimeTokensUsed: integer("lifetime_tokens_used").default(0).notNull(),
+    createdAt: timestamp("created_at").defaultNow().notNull(),
+    updatedAt: timestamp("updated_at")
+      .defaultNow()
+      .$onUpdate(() => new Date())
+      .notNull(),
+  },
+  (table) => [index("userCredit_userId_idx").on(table.userId)],
+);
+
+export const creditTransaction = pgTable(
+  "credit_transaction",
+  {
+    id: uuid("id").defaultRandom().primaryKey(),
+    userId: text("user_id")
+      .notNull()
+      .references(() => user.id, { onDelete: "cascade" }),
+    amount: integer("amount").notNull(),
+    type: text("type").notNull(),
+    description: text("description"),
+    tokensUsed: integer("tokens_used"),
+    createdAt: timestamp("created_at").defaultNow().notNull(),
+  },
+  (table) => [index("creditTransaction_userId_idx").on(table.userId)],
+);
+
+export const adminAuditLog = pgTable(
+  "admin_audit_log",
+  {
+    id: uuid("id").defaultRandom().primaryKey(),
+    adminUserId: text("admin_user_id")
+      .notNull()
+      .references(() => user.id, { onDelete: "cascade" }),
+    action: text("action").notNull(),
+    targetUserId: text("target_user_id").references(() => user.id, {
+      onDelete: "set null",
+    }),
+    details: jsonb("details"),
+    createdAt: timestamp("created_at").defaultNow().notNull(),
+  },
+  (table) => [
+    index("adminAuditLog_adminUserId_idx").on(table.adminUserId),
+    index("adminAuditLog_action_idx").on(table.action),
+  ],
+);
+
+export const userCreditRelations = relations(userCredit, ({ one }) => ({
+  user: one(user, {
+    fields: [userCredit.userId],
+    references: [user.id],
+  }),
+}));
+
+export const creditTransactionRelations = relations(creditTransaction, ({ one }) => ({
+  user: one(user, {
+    fields: [creditTransaction.userId],
+    references: [user.id],
+  }),
+}));
+
+export const adminAuditLogRelations = relations(adminAuditLog, ({ one }) => ({
+  admin: one(user, {
+    fields: [adminAuditLog.adminUserId],
+    references: [user.id],
+    relationName: "adminAuditLog_adminUser",
+  }),
+  target: one(user, {
+    fields: [adminAuditLog.targetUserId],
+    references: [user.id],
+    relationName: "adminAuditLog_targetUser",
+  }),
+}));
+
+export const platformConfig = pgTable("platform_config", {
+  key: text("key").primaryKey(),
+  value: text("value").notNull(),
+  updatedAt: timestamp("updated_at")
+    .defaultNow()
+    .$onUpdate(() => new Date())
+    .notNull(),
+});

packages/db/src/schema/app.ts

@@ -61,6 +61,7 @@ export const question = pgTable(
       .notNull()
       .references(() => user.id, { onDelete: "cascade" }),
     isPublic: boolean("is_public").default(false).notNull(),
+    isFeatured: boolean("is_featured").default(false).notNull(),
     usageCount: integer("usage_count").default(0).notNull(),
     avgRating: integer("avg_rating"),
     createdAt: timestamp("created_at").defaultNow().notNull(),

packages/db/src/schema/auth.ts

@@ -7,6 +7,8 @@ export const user = pgTable("user", {
   email: text("email").notNull().unique(),
   emailVerified: boolean("email_verified").default(false).notNull(),
   image: text("image"),
+  role: text("role").default("user").notNull(),
+  suspended: boolean("suspended").default(false).notNull(),
   createdAt: timestamp("created_at").defaultNow().notNull(),
   updatedAt: timestamp("updated_at")
     .defaultNow()

packages/db/src/schema/index.ts

@@ -1,2 +1,3 @@
 export * from "./auth";
 export * from "./app";
+export * from "./admin";

packages/env/src/server.ts

@@ -16,6 +16,12 @@ export const env = createEnv({
     SMTP_USER: z.string().min(1),
     SMTP_PASS: z.string().min(1),
     SMTP_FROM: z.string().min(1),
+    PLATFORM_AI_API_KEY: z.string().optional(),
+    PLATFORM_AI_BASE_URL: z.string().optional(),
+    PLATFORM_AI_MODEL: z.string().optional(),
+    FREE_CREDITS_ENABLED: z.coerce.boolean().default(false),
+    FREE_CREDITS_MAX_POOL: z.coerce.number().positive().default(1_000_000),
+    DEFAULT_SIGNUP_CREDIT_TOKENS: z.coerce.number().positive().default(50_000),
   },
   runtimeEnv: process.env,
   emptyStringAsUndefined: true,

packages/ui/src/styles/globals.css

@@ -17,7 +17,11 @@
   --warm-cream: #faf9f7;
 
   /* Swatch Palette */
+  --matcha-50: #f2fcf6;
+  --matcha-100: #e3f9ec;
   --matcha-300: #84e7a5;
+  --matcha-400: #5ac889;
+  --matcha-500: #31a96e;
   --matcha-600: #078a52;
   --matcha-700: #047a3f;
   --matcha-800: #02492a;
@@ -240,7 +244,11 @@
   --color-tertiary-fixed-dim: var(--tertiary-fixed-dim);
 
   /* Swatch colors */
+  --color-matcha-50: var(--matcha-50);
+  --color-matcha-100: var(--matcha-100);
   --color-matcha-300: var(--matcha-300);
+  --color-matcha-400: var(--matcha-400);
+  --color-matcha-500: var(--matcha-500);
   --color-matcha-600: var(--matcha-600);
   --color-matcha-800: var(--matcha-800);
   --color-slushie-500: var(--slushie-500);