feat: add admin operations suite

src/app/admin/logs/audit/audit-table.tsx

@@ -0,0 +1,111 @@
+'use client'
+
+import { useState } from 'react'
+import { DataTable } from '@/components/admin/data-table'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import type { DataTableColumn, PaginatedResult } from '@/types'
+
+interface AuditRow {
+  id: number
+  username: string
+  action: string
+  target: string
+  targetId: number | null
+  diff: string | null
+  createdAt: string
+}
+
+function DiffCell({ diff }: { diff: string | null }) {
+  const [open, setOpen] = useState(false)
+  if (!diff) return <span className="text-muted-foreground">-</span>
+
+  let parsed: Record<string, { from: unknown; to: unknown }>
+  try {
+    parsed = JSON.parse(diff)
+  } catch {
+    return <span className="text-muted-foreground">-</span>
+  }
+
+  const keys = Object.keys(parsed)
+  if (keys.length === 0) return <span className="text-muted-foreground">-</span>
+
+  const summary =
+    keys.length === 1
+      ? `${keys[0]}: ${String(parsed[keys[0]].from ?? '∅')} → ${String(parsed[keys[0]].to ?? '∅')}`
+      : `${keys.length} changes`
+
+  return (
+    <div>
+      <Button
+        variant="ghost"
+        size="sm"
+        className="h-auto p-0 text-xs font-normal"
+        onClick={() => setOpen(!open)}
+      >
+        {summary}
+      </Button>
+      {open && (
+        <div className="mt-1 space-y-0.5 text-xs">
+          {keys.map((k) => (
+            <div key={k} className="flex gap-1">
+              <span className="font-medium">{k}:</span>
+              <span className="text-[var(--admin-error)] line-through">{String(parsed[k].from ?? '∅')}</span>
+              <span>→</span>
+              <span className="text-[var(--admin-success)]">{String(parsed[k].to ?? '∅')}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+const columns: DataTableColumn<AuditRow>[] = [
+  { key: 'id', label: 'ID', sortable: true },
+  { key: 'username', label: 'User', sortable: true },
+  {
+    key: 'action',
+    label: 'Action',
+    sortable: true,
+    render: (value) => {
+      const v = String(value)
+      let variant: 'default' | 'secondary' | 'destructive' = 'secondary'
+      if (v.includes('create') || v.includes('add')) variant = 'default'
+      if (v.includes('delete') || v.includes('remove') || v.includes('ban')) variant = 'destructive'
+      return <Badge variant={variant}>{v}</Badge>
+    },
+  },
+  { key: 'target', label: 'Target', sortable: true },
+  {
+    key: 'targetId',
+    label: 'Target ID',
+    render: (value) => <span>{value != null ? String(value) : '-'}</span>,
+  },
+  {
+    key: 'diff',
+    label: 'Details',
+    render: (_value, row) => <DiffCell diff={row.diff} />,
+  },
+  {
+    key: 'createdAt',
+    label: 'Date',
+    sortable: true,
+    render: (value) => <span>{String(value) || 'N/A'}</span>,
+  },
+]
+
+interface AuditTableProps {
+  data: PaginatedResult<AuditRow>
+}
+
+export function AuditTable({ data }: AuditTableProps) {
+  return (
+    <DataTable
+      data={data}
+      columns={columns}
+      searchPlaceholder="Search by action or target..."
+      exportUrl="/api/admin/export?type=audit"
+    />
+  )
+}

src/app/admin/logs/audit/loading.tsx

@@ -0,0 +1,28 @@
+import { Skeleton } from '@/components/ui/skeleton'
+
+export default function AuditLogsLoading() {
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <Skeleton className="h-9 w-40" />
+          <Skeleton className="h-5 w-64 mt-2" />
+        </div>
+      </div>
+      <div className="flex items-center gap-3">
+        <Skeleton className="h-10 w-64" />
+        <Skeleton className="h-10 w-24" />
+      </div>
+      <div className="rounded-md border">
+        {Array.from({ length: 8 }).map((_, i) => (
+          <div key={i} className="flex items-center gap-6 px-4 py-3 border-b last:border-0">
+            <Skeleton className="h-4 w-12" />
+            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-5 w-16 rounded-full" />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

src/app/admin/logs/audit/page.tsx

@@ -0,0 +1,48 @@
+import { redirect } from 'next/navigation'
+import { calcPagination, parseListParams } from '@/lib/admin-helpers'
+import { canAccess, getAdminContext, PERMS } from '@/lib/permissions'
+import { getAuditLogs } from '@/lib/services/audit'
+import { AuditTable } from './audit-table'
+
+export default async function AuditLogsPage({
+  params: paramsPromise,
+  searchParams,
+}: {
+  params: Promise<{ locale: string }>
+  searchParams: Promise<Record<string, string>>
+}) {
+  await paramsPromise
+  const { session, permissions } = await getAdminContext()
+  if (!canAccess(permissions, PERMS.LOGS_VIEW, session.user.rank)) {
+    redirect('/admin')
+  }
+
+  const params = await searchParams
+  const sp = new URLSearchParams(params)
+  const { search, perPage, page } = parseListParams(sp)
+
+  const result = await getAuditLogs({ search, page, perPage })
+
+  const pagination = calcPagination(result.total, result.page, result.perPage)
+
+  const rows = result.rows.map((r) => ({
+    id: r.id,
+    username: r.username,
+    action: r.action,
+    target: r.target,
+    targetId: r.targetId,
+    diff: r.diff,
+    createdAt: r.createdAt,
+  }))
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">Audit Logs</h1>
+        <p className="text-muted-foreground">Track admin actions and changes</p>
+      </div>
+
+      <AuditTable data={{ rows, ...pagination }} />
+    </div>
+  )
+}