feat: introduce DataTable component for improved data presentation in admin routes. Refactor existing tables in AdminCredits, AdminJobs, AdminModeration, AdminUsers, and others to utilize the new DataTable for enhanced functionality, including sorting, pagination, and customizable columns. This update streamlines the display of data across various admin sections, improving user experience and maintainability.

apps/web/src/components/admin/DataTable.tsx

@@ -0,0 +1,148 @@
+import type { ReactNode } from "react";
+import { Pagination } from "@/components/admin/Pagination";
+
+interface ColumnDef<T> {
+  id: string;
+  header: string;
+  accessorKey?: keyof T & string;
+  accessorFn?: (row: T) => ReactNode;
+  cell?: (props: { row: T; value: ReactNode }) => ReactNode;
+  className?: string;
+  sortable?: boolean;
+  size?: string;
+}
+
+interface DataTableProps<T> {
+  data: T[];
+  columns: ColumnDef<T>[];
+  isLoading?: boolean;
+  emptyMessage?: string;
+  keyExtractor: (row: T) => string | number;
+  page?: number;
+  totalPages?: number;
+  onPageChange?: (p: number) => void;
+  sortColumn?: string;
+  sortDirection?: "asc" | "desc";
+  onSort?: (column: string) => void;
+  actions?: (row: T) => ReactNode;
+  classNames?: {
+    wrapper?: string;
+    table?: string;
+    thead?: string;
+    th?: string;
+    tbody?: string;
+    td?: string;
+  };
+}
+
+function DataTableInner<T>({
+  data,
+  columns,
+  isLoading,
+  emptyMessage = "No data.",
+  keyExtractor,
+  page,
+  totalPages,
+  onPageChange,
+  sortColumn,
+  sortDirection,
+  onSort,
+  actions,
+  classNames = {},
+}: DataTableProps<T>) {
+  const cn = {
+    wrapper: classNames.wrapper ?? "bg-[var(--pure-white)] rounded-[var(--radius-xl)] border border-[var(--oat-border)] overflow-hidden",
+    table: classNames.table ?? "w-full text-sm",
+    thead: classNames.thead ?? "bg-[var(--oat-light)] text-[var(--warm-charcoal)]",
+    th: classNames.th ?? "text-left px-4 py-3 font-medium",
+    tbody: classNames.tbody ?? "",
+    td: classNames.td ?? "px-4 py-3",
+  };
+
+  const colCount = columns.length + (actions ? 1 : 0);
+
+  function renderCell(row: T, col: ColumnDef<T>): ReactNode {
+    let value: ReactNode;
+    if (col.accessorKey !== undefined) {
+      value = row[col.accessorKey] as ReactNode;
+    } else if (col.accessorFn) {
+      value = col.accessorFn(row);
+    } else {
+      value = null;
+    }
+    if (col.cell) {
+      return col.cell({ row, value });
+    }
+    return value;
+  }
+
+  return (
+    <div className={cn.wrapper}>
+      <table className={cn.table}>
+        <thead className={cn.thead}>
+          <tr>
+            {columns.map((col) => (
+              <th
+                key={col.id}
+                className={`${cn.th} ${col.size ?? ""} ${col.className ?? ""} ${col.sortable ? "cursor-pointer select-none hover:text-[var(--clay-black)]" : ""}`}
+                onClick={col.sortable ? () => onSort?.(col.id) : undefined}
+                aria-sort={
+                  sortColumn === col.id
+                    ? sortDirection === "asc" ? "ascending" : "descending"
+                    : undefined
+                }
+              >
+                <span className="inline-flex items-center gap-1">
+                  {col.header}
+                  {col.sortable && sortColumn === col.id && (
+                    <span className="text-xs">{sortDirection === "asc" ? "\u25B2" : "\u25BC"}</span>
+                  )}
+                </span>
+              </th>
+            ))}
+            {actions && <th className={`${cn.th} text-right`}>Actions</th>}
+          </tr>
+        </thead>
+        <tbody className={cn.tbody}>
+          {isLoading ? (
+            <tr>
+              <td colSpan={colCount} className={`${cn.td} text-center py-16 text-[var(--warm-charcoal)]`}>
+                Loading...
+              </td>
+            </tr>
+          ) : data.length === 0 ? (
+            <tr>
+              <td colSpan={colCount} className={`${cn.td} text-center py-16 text-[var(--warm-charcoal)]`}>
+                {emptyMessage}
+              </td>
+            </tr>
+          ) : (
+            data.map((row) => (
+              <tr
+                key={keyExtractor(row)}
+                className="border-t border-[var(--oat-border)] hover:bg-[var(--oat-light)]/50 transition-colors"
+              >
+                {columns.map((col) => (
+                  <td key={col.id} className={`${cn.td} ${col.size ?? ""}`}>
+                    {renderCell(row, col)}
+                  </td>
+                ))}
+                {actions && (
+                  <td className={`${cn.td} text-right`}>
+                    {actions(row)}
+                  </td>
+                )}
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+      {page !== undefined && totalPages !== undefined && onPageChange && (
+        <Pagination page={page} totalPages={totalPages} onChange={onPageChange} />
+      )}
+    </div>
+  );
+}
+
+export { DataTableInner as DataTable };
+export type { ColumnDef, DataTableProps };

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

@@ -7,11 +7,22 @@ import { Button } from "@labas/ui/components/button";
 import { toast } from "sonner";
 import { getErrorMessage } from "@/lib/error-utils";
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
+import { DataTable } from "@/components/admin/DataTable";
+import type { ColumnDef } from "@/components/admin/DataTable";
 
 export const Route = createFileRoute("/admin/credits")({
   component: AdminCredits,
 });
 
+type TxnRow = {
+  id: string;
+  userId: string;
+  amount: number;
+  type: string;
+  description: string | null;
+  createdAt: string | Date;
+};
+
 function AdminCredits() {
   const [search, debouncedSearch, setSearch] = useDebouncedValue("", 300);
   const [selectedUserId, setSelectedUserId] = useState("");
@@ -154,34 +165,43 @@ function AdminCredits() {
       {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) => (
-                <tr key={txn.id} className="border-t border-[var(--oat-border)]">
-                  <td className="px-4 py-3">
+          <DataTable
+            data={historyQuery.data.transactions}
+            columns={[
+              {
+                id: "type",
+                header: "Type",
+                accessorKey: "type",
+                cell: ({ value }) => {
+                  const t = value as string;
+                  return (
                     <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)]" :
+                      t === "signup_bonus" ? "bg-[var(--sunbeam-300)] text-[var(--sunbeam-800)]" :
+                      t === "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>
+                    }`}>{t}</span>
+                  );
+                },
+              },
+              {
+                id: "amount",
+                header: "Amount",
+                accessorFn: (t: TxnRow) => <span className={`font-medium ${t.amount >= 0 ? "text-[var(--matcha-700)]" : "text-[var(--clay-red)]"}`}>{t.amount >= 0 ? "+" : ""}{t.amount.toLocaleString()}</span>,
+              },
+              {
+                id: "description",
+                header: "Description",
+                accessorFn: (t: TxnRow) => <span className="text-[var(--warm-charcoal)]">{t.description ?? "-"}</span>,
+              },
+              {
+                id: "date",
+                header: "Date",
+                accessorFn: (t: TxnRow) => <span className="text-[var(--warm-charcoal)]">{new Date(t.createdAt).toLocaleDateString("id-ID", { day: "numeric", month: "short", year: "numeric" })}</span>,
+              },
+            ]}
+            keyExtractor={(t) => t.id}
+            classNames={{ wrapper: "" }}
+          />
         </div>
       )}
     </div>

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

@@ -5,6 +5,8 @@ import { trpc } from "@/utils/trpc";
 import { Button } from "@labas/ui/components/button";
 import { toast } from "sonner";
 import { getErrorMessage } from "@/lib/error-utils";
+import { DataTable } from "@/components/admin/DataTable";
+import type { ColumnDef } from "@/components/admin/DataTable";
 
 const STATUSES = ["all", "pending", "running", "completed", "failed", "cancelled"] as const;
 
@@ -12,6 +14,18 @@ export const Route = createFileRoute("/admin/jobs")({
   component: AdminJobs,
 });
 
+type JobRow = {
+  id: string;
+  userId: string | null;
+  examTypeId: string | null;
+  mode: string | null;
+  progress: number | null;
+  tokensUsed: number | null;
+  status: string;
+  createdAt: string | Date;
+  completedAt: string | Date | null;
+};
+
 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" });
@@ -39,6 +53,54 @@ function AdminJobs() {
     }),
   );
 
+  const columns: ColumnDef<JobRow>[] = [
+    {
+      id: "user",
+      header: "User",
+      accessorFn: (j) => <span className="font-mono text-xs text-[var(--warm-charcoal)]">{j.userId?.slice(0, 10)}...</span>,
+    },
+    { id: "exam", header: "Exam", accessorKey: "examTypeId" },
+    {
+      id: "mode", header: "Mode",
+      cell: ({ value }) => <span className="text-xs">{value as string}</span>,
+    },
+    {
+      id: "progress",
+      header: "Progress",
+      cell: ({ row }) => (
+        <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 ${(row.progress ?? 0) >= 100 ? "bg-[var(--matcha-500)]" : "bg-[var(--sunbeam-500)]"}`} style={{ width: `${row.progress ?? 0}%` }} />
+          </div>
+          <span className="text-xs text-[var(--warm-charcoal)]">{row.progress ?? 0}%</span>
+        </div>
+      ),
+    },
+    {
+      id: "tokens",
+      header: "Tokens",
+      accessorFn: (j) => j.tokensUsed?.toLocaleString() ?? "-",
+    },
+    {
+      id: "status",
+      header: "Status",
+      cell: ({ row }) => (
+        <span className={`text-xs font-semibold px-2 py-0.5 rounded-full ${
+          row.status === "completed" ? "bg-[var(--matcha-300)] text-[var(--matcha-800)]" :
+          row.status === "failed" ? "bg-[var(--clay-red)]/10 text-[var(--clay-red)]" :
+          row.status === "cancelled" ? "bg-[var(--oat-border)] text-[var(--warm-charcoal)]" :
+          row.status === "running" ? "bg-[var(--sunbeam-300)] text-[var(--sunbeam-800)]" :
+          "bg-[var(--oat-border)] text-[var(--warm-charcoal)]"
+        }`}>{row.status}</span>
+      ),
+    },
+    {
+      id: "created",
+      header: "Created",
+      accessorFn: (j) => <span className="text-xs text-[var(--warm-charcoal)]">{formatDate(j.createdAt)}</span>,
+    },
+  ];
+
   return (
     <div>
       <h1 className="text-3xl font-headline font-bold text-[var(--clay-black)] mb-2">Generation Jobs</h1>
@@ -60,63 +122,20 @@ function AdminJobs() {
         ))}
       </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) => (
-                <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>
+      <DataTable
+        data={jobs.data?.jobs ?? []}
+        columns={columns}
+        isLoading={jobs.isLoading}
+        emptyMessage="No jobs found."
+        keyExtractor={(j) => j.id}
+        actions={(j) => (
+          (j.status === "pending" || j.status === "running") ? (
+            <Button variant="outline" className="text-[var(--clay-red)] h-9 rounded-[var(--radius-lg)] text-xs" onClick={() => cancelMutation.mutate({ jobId: j.id })} disabled={cancelMutation.isPending}>
+              Cancel
+            </Button>
+          ) : null
+        )}
+      />
     </div>
   );
 }

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

@@ -5,11 +5,24 @@ import { trpc } from "@/utils/trpc";
 import { Button } from "@labas/ui/components/button";
 import { toast } from "sonner";
 import { getErrorMessage } from "@/lib/error-utils";
+import { DataTable } from "@/components/admin/DataTable";
+import type { ColumnDef } from "@/components/admin/DataTable";
 
 export const Route = createFileRoute("/admin/moderation")({
   component: AdminModeration,
 });
 
+type QuestionRow = {
+  id: string;
+  questionText: string;
+  passageText: string | null;
+  examTypeId: string;
+  format: string;
+  isPublic: boolean;
+  source: string;
+  createdAt: string | Date;
+};
+
 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" });
@@ -34,62 +47,77 @@ function AdminModeration() {
     }),
   );
 
+  const columns: ColumnDef<QuestionRow>[] = [
+    {
+      id: "question",
+      header: "Question",
+      size: "w-[35%]",
+      cell: ({ row }) => (
+        <div className="max-w-xs">
+          <p className="font-medium text-[var(--clay-black)] truncate">{row.questionText}</p>
+          {row.passageText && (
+            <p className="text-xs text-[var(--warm-charcoal)] truncate mt-0.5">
+              {row.passageText.slice(0, 80)}{row.passageText.length > 80 ? "..." : ""}
+            </p>
+          )}
+        </div>
+      ),
+    },
+    { id: "exam", header: "Exam", accessorKey: "examTypeId" },
+    {
+      id: "format", header: "Format",
+      cell: ({ value }) => <span className="text-xs">{value as string}</span>,
+    },
+    {
+      id: "visibility",
+      header: "Visibility",
+      cell: ({ row }) => (
+        <span className={`text-xs font-semibold px-2 py-0.5 rounded-full ${
+          row.isPublic ? "bg-[var(--matcha-300)] text-[var(--matcha-800)]" : "bg-[var(--oat-border)] text-[var(--warm-charcoal)]"
+        }`}>{row.isPublic ? "Public" : "Private"}</span>
+      ),
+    },
+    {
+      id: "source", header: "Source",
+      cell: ({ value }) => <span className="text-xs">{value as string}</span>,
+    },
+    {
+      id: "created",
+      header: "Created",
+      accessorFn: (q) => <span className="text-xs text-[var(--warm-charcoal)]">{formatDate(q.createdAt)}</span>,
+    },
+  ];
+
+  const questionData = questions.data?.questions ?? [];
+  const hasMore = questionData.length >= limit;
+
   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) => (
-                <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>
+      <DataTable
+        data={questionData}
+        columns={columns}
+        isLoading={questions.isLoading}
+        emptyMessage="No questions yet."
+        keyExtractor={(q) => q.id}
+        page={page}
+        totalPages={page + 1}
+        onPageChange={setPage}
+        actions={(q) => (
+          <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>
+        )}
+      />
+      {hasMore && (
+        <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={!hasMore}>Next</Button>
+        </div>
+      )}
     </div>
   );
 }

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

@@ -7,7 +7,8 @@ import { Button } from "@labas/ui/components/button";
 import { toast } from "sonner";
 import { getErrorMessage } from "@/lib/error-utils";
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
-import { Pagination } from "@/components/admin/Pagination";
+import { DataTable } from "@/components/admin/DataTable";
+import type { ColumnDef } from "@/components/admin/DataTable";
 
 const PAGE_SIZE = 20;
 
@@ -15,9 +16,19 @@ export const Route = createFileRoute("/admin/users")({
   component: AdminUsers,
 });
 
+type UserRow = {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  suspended: boolean;
+  emailVerified: boolean;
+};
+
 function AdminUsers() {
   const [search, debouncedSearch, setSearch] = useDebouncedValue("", 300);
   const [page, setPage] = useState(1);
+  const queryClient = useQueryClient();
 
   const usersQuery = useQuery(
     trpc.admin.listUsers.queryOptions({ search: debouncedSearch || undefined, limit: PAGE_SIZE, offset: (page - 1) * PAGE_SIZE }),
@@ -32,55 +43,6 @@ function AdminUsers() {
     setPage(1);
   }
 
-  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) => setSearch(e.target.value)}
-            aria-label="Cari user"
-            className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] h-11"
-          />
-        </div>
-        <table className="w-full text-sm">
-          <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) => {
@@ -101,37 +63,91 @@ function UserRow({ user }: { user: { id: string; name: string; email: string; ro
     }),
   );
 
-  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}
+  const columns: ColumnDef<UserRow>[] = [
+    {
+      id: "name",
+      header: "Name",
+      accessorKey: "name",
+      size: "w-[25%]",
+      cell: ({ value }) => <span className="font-medium text-[var(--clay-black)]">{value as string}</span>,
+    },
+    {
+      id: "email",
+      header: "Email",
+      accessorKey: "email",
+      size: "w-[30%]",
+      cell: ({ row }) => (
+        <span className="text-[var(--warm-charcoal)]">
+          {row.email}
+          {!row.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>
+          )}
+        </span>
+      ),
+    },
+    {
+      id: "role",
+      header: "Role",
+      size: "w-[10%]",
+      cell: ({ row }) => (
+        <span className={`text-xs font-semibold px-2 py-0.5 rounded-full ${row.role === "admin" ? "bg-[var(--matcha-300)] text-[var(--matcha-800)]" : "bg-[var(--oat-border)] text-[var(--warm-charcoal)]"}`}>
+          {row.role}
         </span>
-      </td>
-      <td className="px-4 py-3">
+      ),
+    },
+    {
+      id: "status",
+      header: "Status",
+      size: "w-[10%]",
+      cell: ({ row }) => (
         <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)]"
+          row.suspended ? "bg-[var(--clay-red)]/10 text-[var(--clay-red)]" : "bg-[var(--matcha-300)] text-[var(--matcha-800)]"
         }`}>
-          {user.suspended ? "Suspended" : "Active"}
+          {row.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>
+      ),
+    },
+  ];
+
+  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>
-      </td>
-    </tr>
+      </div>
+
+      <div className="mb-4">
+        <Input
+          placeholder="Search by name or email..."
+          value={search}
+          onChange={(e) => handleSearch(e.target.value)}
+          aria-label="Cari user"
+          className="max-w-md rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] h-11"
+        />
+      </div>
+
+      <DataTable
+        data={users}
+        columns={columns}
+        isLoading={usersQuery.isLoading}
+        emptyMessage="No users found."
+        keyExtractor={(u) => u.id}
+        page={page}
+        totalPages={totalPages}
+        onPageChange={setPage}
+        actions={(u) => (
+          <div className="flex items-center justify-end gap-2">
+            <Button variant="outline" onClick={() => suspendMutation.mutate({ userId: u.id, suspended: !u.suspended })} disabled={suspendMutation.isPending} className="h-9 rounded-[var(--radius-lg)] text-xs">
+              {u.suspended ? "Unsuspend" : "Suspend"}
+            </Button>
+            <Button variant="outline" onClick={() => roleMutation.mutate({ userId: u.id, role: u.role === "admin" ? "user" : "admin" })} disabled={roleMutation.isPending} className="h-9 rounded-[var(--radius-lg)] text-xs">
+              {u.role === "admin" ? "Demote" : "Promote"}
+            </Button>
+          </div>
+        )}
+      />
+    </div>
   );
 }