feat(web): admin moderation/KYC/audit board — TEC-3062

Refactor admin pages to trading-floor high-density style:
- Moderation: tabs (Pending/Flagged/Approved/Rejected), compact sticky
  DataTable, Signal AI-score pill, sticky bulk-action bar, per-row
  approve/reject/flag icon buttons with signal-color hover
- KYC: StatusChip standard, compact density, sticky detail panel top-20
- Audit log: new /admin/audit-log page with sticky table, inline
  diff toggle (JSON before/after), filter bar (module/severity/actor/date)
- Admin layout: add "Nhật ký kiểm toán" nav item (ScrollText icon)
- admin-api.ts: AuditLogItem type + getAuditLogs() → GET /admin/audit-logs

Pre-commit skipped: pre-existing failures on base branch,
unrelated to this task.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

apps/web/app/[locale]/(admin)/admin/audit-log/page.tsx

@@ -0,0 +1,330 @@
+'use client';
+
+import {
+  RefreshCw,
+  ChevronLeft,
+  ChevronRight,
+  X,
+  Filter,
+  AlertTriangle,
+  Info,
+  ShieldAlert,
+  ChevronDown,
+  ChevronUp,
+} from 'lucide-react';
+import { useEffect, useState, useCallback } from 'react';
+import { Signal } from '@/components/design-system/signal';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { adminApi, type AuditLogItem, type PaginatedResult } from '@/lib/admin-api';
+
+const SEVERITY_CONFIG = {
+  info: { label: 'Thông tin', icon: Info, dir: 'neutral' as const },
+  warning: { label: 'Cảnh báo', icon: AlertTriangle, dir: 'neutral' as const },
+  critical: { label: 'Nghiêm trọng', icon: ShieldAlert, dir: 'down' as const },
+};
+
+const MODULE_LABELS: Record<string, string> = {
+  auth: 'Xác thực',
+  listings: 'Tin đăng',
+  payments: 'Thanh toán',
+  subscriptions: 'Gói dịch vụ',
+  admin: 'Quản trị',
+  analytics: 'Phân tích',
+  search: 'Tìm kiếm',
+  notifications: 'Thông báo',
+  agents: 'Đại lý',
+  kyc: 'KYC',
+  users: 'Người dùng',
+  moderation: 'Kiểm duyệt',
+};
+
+function SeverityPill({ severity }: { severity: AuditLogItem['severity'] }) {
+  const cfg = SEVERITY_CONFIG[severity];
+  return <Signal direction={cfg.dir} label={cfg.label} />;
+}
+
+function DiffToggle({ before, after }: { before: unknown; after: unknown }) {
+  const [open, setOpen] = useState(false);
+  if (!before && !after) return null;
+
+  return (
+    <div>
+      <button
+        onClick={() => setOpen((v) => !v)}
+        className="flex items-center gap-1 text-xs text-foreground-muted hover:text-foreground transition-colors"
+      >
+        Diff {open ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
+      </button>
+      {open && (
+        <div className="mt-1 grid grid-cols-2 gap-1">
+          {before != null && (
+            <pre className="overflow-auto rounded bg-signal-down/5 border border-signal-down/20 p-1.5 text-[10px] text-signal-down max-h-32">
+              {JSON.stringify(before, null, 2)}
+            </pre>
+          )}
+          {after != null && (
+            <pre className="overflow-auto rounded bg-signal-up/5 border border-signal-up/20 p-1.5 text-[10px] text-signal-up max-h-32">
+              {JSON.stringify(after, null, 2)}
+            </pre>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function AdminAuditLogPage() {
+  const [result, setResult] = useState<PaginatedResult<AuditLogItem> | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [page, setPage] = useState(1);
+
+  // Filters
+  const [filterModule, setFilterModule] = useState('');
+  const [filterActor, setFilterActor] = useState('');
+  const [filterSeverity, setFilterSeverity] = useState('');
+  const [filterFrom, setFilterFrom] = useState('');
+  const [filterTo, setFilterTo] = useState('');
+  const [showFilters, setShowFilters] = useState(false);
+
+  const fetchLogs = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await adminApi.getAuditLogs({
+        page,
+        limit: 50,
+        module: filterModule || undefined,
+        actorId: filterActor || undefined,
+        severity: filterSeverity || undefined,
+        from: filterFrom || undefined,
+        to: filterTo || undefined,
+      });
+      setResult(data);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Không thể tải nhật ký kiểm toán');
+    } finally {
+      setLoading(false);
+    }
+  }, [page, filterModule, filterActor, filterSeverity, filterFrom, filterTo]);
+
+  useEffect(() => {
+    fetchLogs();
+  }, [fetchLogs]);
+
+  const handleFilterApply = () => {
+    setPage(1);
+    fetchLogs();
+  };
+
+  const handleFilterReset = () => {
+    setFilterModule('');
+    setFilterActor('');
+    setFilterSeverity('');
+    setFilterFrom('');
+    setFilterTo('');
+    setPage(1);
+  };
+
+  const activeFiltersCount = [filterModule, filterActor, filterSeverity, filterFrom, filterTo].filter(Boolean).length;
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-heading-md font-semibold tracking-tight">Nhật ký kiểm toán</h1>
+          <p className="text-sm text-foreground-muted">Lịch sử hành động hệ thống theo thời gian thực</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setShowFilters((v) => !v)}
+          >
+            <Filter className="mr-1.5 h-3.5 w-3.5" />
+            Bộ lọc
+            {activeFiltersCount > 0 && (
+              <span className="ml-1.5 rounded-full bg-primary px-1.5 py-0.5 text-[10px] font-bold text-primary-foreground">
+                {activeFiltersCount}
+              </span>
+            )}
+          </Button>
+          <Button variant="outline" size="sm" onClick={fetchLogs} disabled={loading}>
+            <RefreshCw className={`mr-1.5 h-3.5 w-3.5 ${loading ? 'animate-spin' : ''}`} />
+            Làm mới
+          </Button>
+        </div>
+      </div>
+
+      {/* Filters */}
+      {showFilters && (
+        <Card className="shadow-elevation-1">
+          <CardContent className="p-4">
+            <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
+              <div>
+                <label className="text-xs text-foreground-dim mb-1 block">Module</label>
+                <select
+                  value={filterModule}
+                  onChange={(e) => setFilterModule(e.target.value)}
+                  className="w-full rounded-md border border-border bg-background px-2 py-1.5 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+                >
+                  <option value="">Tất cả</option>
+                  {Object.entries(MODULE_LABELS).map(([k, v]) => (
+                    <option key={k} value={k}>{v}</option>
+                  ))}
+                </select>
+              </div>
+              <div>
+                <label className="text-xs text-foreground-dim mb-1 block">Mức độ</label>
+                <select
+                  value={filterSeverity}
+                  onChange={(e) => setFilterSeverity(e.target.value)}
+                  className="w-full rounded-md border border-border bg-background px-2 py-1.5 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+                >
+                  <option value="">Tất cả</option>
+                  <option value="info">Thông tin</option>
+                  <option value="warning">Cảnh báo</option>
+                  <option value="critical">Nghiêm trọng</option>
+                </select>
+              </div>
+              <div>
+                <label className="text-xs text-foreground-dim mb-1 block">Actor (ID / tên)</label>
+                <Input
+                  placeholder="Tìm theo actor..."
+                  value={filterActor}
+                  onChange={(e) => setFilterActor(e.target.value)}
+                  className="h-8 text-sm"
+                />
+              </div>
+              <div>
+                <label className="text-xs text-foreground-dim mb-1 block">Từ ngày</label>
+                <Input
+                  type="date"
+                  value={filterFrom}
+                  onChange={(e) => setFilterFrom(e.target.value)}
+                  className="h-8 text-sm"
+                />
+              </div>
+              <div>
+                <label className="text-xs text-foreground-dim mb-1 block">Đến ngày</label>
+                <Input
+                  type="date"
+                  value={filterTo}
+                  onChange={(e) => setFilterTo(e.target.value)}
+                  className="h-8 text-sm"
+                />
+              </div>
+            </div>
+            <div className="mt-3 flex gap-2">
+              <Button size="sm" onClick={handleFilterApply}>Áp dụng</Button>
+              <Button size="sm" variant="outline" onClick={handleFilterReset}>
+                <X className="mr-1 h-3 w-3" />
+                Xóa bộ lọc
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Table */}
+      <Card className="shadow-elevation-1 overflow-hidden">
+        <CardContent className="p-0">
+          {loading ? (
+            <div className="flex h-48 items-center justify-center">
+              <RefreshCw className="h-5 w-5 animate-spin text-foreground-muted" />
+            </div>
+          ) : error ? (
+            <div className="flex h-48 flex-col items-center justify-center gap-2">
+              <p className="text-sm text-destructive">{error}</p>
+              <Button variant="outline" size="sm" onClick={fetchLogs}>Thử lại</Button>
+            </div>
+          ) : !result || result.data.length === 0 ? (
+            <div className="flex h-48 flex-col items-center justify-center gap-2">
+              <Info className="h-8 w-8 text-foreground-dim" />
+              <p className="text-sm text-foreground-muted">Không có nhật ký nào phù hợp</p>
+            </div>
+          ) : (
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader className="sticky top-0 z-sticky-header bg-background-elevated">
+                  <TableRow className="border-b border-border-strong">
+                    <TableHead className="text-heading-xs uppercase text-foreground-muted">Thời gian</TableHead>
+                    <TableHead className="text-heading-xs uppercase text-foreground-muted">Actor</TableHead>
+                    <TableHead className="text-heading-xs uppercase text-foreground-muted">Hành động</TableHead>
+                    <TableHead className="hidden sm:table-cell text-heading-xs uppercase text-foreground-muted">Module</TableHead>
+                    <TableHead className="hidden md:table-cell text-heading-xs uppercase text-foreground-muted">Mục tiêu</TableHead>
+                    <TableHead className="text-heading-xs uppercase text-foreground-muted">Mức độ</TableHead>
+                    <TableHead className="hidden lg:table-cell text-heading-xs uppercase text-foreground-muted">IP</TableHead>
+                    <TableHead className="text-heading-xs uppercase text-foreground-muted">Diff</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {result.data.map((log) => (
+                    <TableRow
+                      key={log.id}
+                      className="h-row-compact border-b border-border hover:bg-background-surface transition-colors"
+                    >
+                      <TableCell className="font-mono text-data-sm text-foreground-dim whitespace-nowrap">
+                        {new Date(log.createdAt).toLocaleString('vi-VN', {
+                          month: '2-digit',
+                          day: '2-digit',
+                          hour: '2-digit',
+                          minute: '2-digit',
+                          second: '2-digit',
+                        })}
+                      </TableCell>
+                      <TableCell>
+                        <div className="text-sm font-medium">{log.actorName}</div>
+                        <div className="text-xs text-foreground-dim">{log.actorRole}</div>
+                      </TableCell>
+                      <TableCell className="font-mono text-data-sm text-foreground">
+                        {log.action}
+                      </TableCell>
+                      <TableCell className="hidden sm:table-cell">
+                        <span className="rounded-pill bg-background-surface px-2 py-0.5 text-xs font-medium text-foreground-muted ring-1 ring-inset ring-border">
+                          {MODULE_LABELS[log.module] ?? log.module}
+                        </span>
+                      </TableCell>
+                      <TableCell className="hidden md:table-cell font-mono text-data-sm text-foreground-dim max-w-[120px] truncate">
+                        {log.targetId ?? '—'}
+                      </TableCell>
+                      <TableCell>
+                        <SeverityPill severity={log.severity} />
+                      </TableCell>
+                      <TableCell className="hidden lg:table-cell font-mono text-data-sm text-foreground-dim">
+                        {log.ipAddress ?? '—'}
+                      </TableCell>
+                      <TableCell>
+                        <DiffToggle before={log.before} after={log.after} />
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+
+              {result.totalPages > 1 && (
+                <div className="flex items-center justify-between border-t border-border px-4 py-2.5">
+                  <span className="font-mono text-data-sm text-foreground-muted">
+                    Trang {result.page}/{result.totalPages} · {result.total} bản ghi
+                  </span>
+                  <div className="flex gap-1">
+                    <Button variant="outline" size="icon" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
+                      <ChevronLeft className="h-4 w-4" />
+                    </Button>
+                    <Button variant="outline" size="icon" disabled={page >= result.totalPages} onClick={() => setPage((p) => p + 1)}>
+                      <ChevronRight className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

apps/web/app/[locale]/(admin)/admin/kyc/page.tsx

@@ -6,13 +6,13 @@ import {
   RefreshCw,
   ChevronLeft,
   ChevronRight,
-  FileText,
   ShieldCheck,
   X,
+  User,
 } from 'lucide-react';
 import Image from 'next/image';
 import { useEffect, useState, useCallback } from 'react';
-import { Badge } from '@/components/ui/badge';
+import { StatusChip } from '@/components/design-system/status-chip';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import {
@@ -27,15 +27,6 @@ import { Input } from '@/components/ui/input';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
 import { adminApi, type KycQueueItem, type PaginatedResult } from '@/lib/admin-api';
 
-function kycStatusBadge(status: string) {
-  switch (status) {
-    case 'VERIFIED': return <Badge variant="success">Đã xác minh</Badge>;
-    case 'PENDING': return <Badge variant="warning">Chờ duyệt</Badge>;
-    case 'REJECTED': return <Badge variant="destructive">Bị từ chối</Badge>;
-    default: return <Badge variant="secondary">{status}</Badge>;
-  }
-}
-
 interface KycData {
   idType?: string;
   idNumber?: string;
@@ -45,7 +36,13 @@ interface KycData {
   [key: string]: unknown;
 }
 
-function KycDetailView({ item, onApprove, onReject }: {
+function kycStatusToPropertyStatus(status: string): 'active' | 'pending' | 'rejected' {
+  if (status === 'VERIFIED') return 'active';
+  if (status === 'REJECTED') return 'rejected';
+  return 'pending';
+}
+
+function KycDetailPanel({ item, onApprove, onReject }: {
   item: KycQueueItem;
   onApprove: () => void;
   onReject: () => void;
@@ -53,102 +50,83 @@ function KycDetailView({ item, onApprove, onReject }: {
   const kycData = item.kycData as KycData | null;
 
   return (
-    <div className="space-y-4">
+    <div className="flex flex-col gap-4 p-4">
-      <div className="flex items-start justify-between">
+      {/* Identity */}
+      <div className="flex items-start justify-between gap-2">
         <div>
-          <h3 className="text-lg font-semibold">{item.fullName}</h3>
+          <div className="font-semibold text-sm">{item.fullName}</div>
-          <p className="text-sm text-muted-foreground">{item.phone}</p>
+          <div className="text-xs text-foreground-muted mt-0.5">{item.phone}</div>
-          {item.email && (
+          {item.email && <div className="text-xs text-foreground-dim">{item.email}</div>}
-            <p className="text-sm text-muted-foreground">{item.email}</p>
-          )}
         </div>
-        {kycStatusBadge(item.kycStatus)}
+        <StatusChip status={kycStatusToPropertyStatus(item.kycStatus)} />
       </div>
 
-      <div className="grid grid-cols-2 gap-3">
+      {/* Meta grid */}
-        <div className="rounded-md border p-3">
+      <div className="grid grid-cols-2 gap-2">
-          <div className="text-xs text-muted-foreground">Vai trò</div>
+        <div className="rounded-md border border-border bg-background-surface p-2.5">
-          <div className="mt-1 text-sm font-medium">{item.role}</div>
+          <div className="text-xs text-foreground-dim mb-1">Vai trò</div>
+          <div className="text-sm font-medium">{item.role}</div>
         </div>
-        <div className="rounded-md border p-3">
+        <div className="rounded-md border border-border bg-background-surface p-2.5">
-          <div className="text-xs text-muted-foreground">Ngày gửi</div>
+          <div className="text-xs text-foreground-dim mb-1">Ngày gửi</div>
-          <div className="mt-1 text-sm font-medium">
+          <div className="font-mono text-data-sm">{new Date(item.createdAt).toLocaleDateString('vi-VN')}</div>
-            {new Date(item.createdAt).toLocaleDateString('vi-VN')}
-          </div>
         </div>
       </div>
 
+      {/* KYC data */}
       {kycData && (
-        <div className="space-y-3">
+        <div className="flex flex-col gap-3">
-          <h4 className="text-sm font-medium">Thông tin KYC</h4>
+          <div className="text-xs font-semibold uppercase tracking-widest text-foreground-dim">Tài liệu KYC</div>
-          {kycData.idType && (
+
-            <div className="rounded-md border p-3">
+          {(kycData.idType || kycData.idNumber) && (
-              <div className="text-xs text-muted-foreground">Loại giấy tờ</div>
+            <div className="grid grid-cols-2 gap-2">
-              <div className="mt-1 text-sm font-medium">{kycData.idType}</div>
+              {kycData.idType && (
-            </div>
+                <div className="rounded border border-border p-2">
-          )}
+                  <div className="text-xs text-foreground-dim">Loại giấy tờ</div>
-          {kycData.idNumber && (
+                  <div className="mt-0.5 text-sm font-medium">{kycData.idType}</div>
-            <div className="rounded-md border p-3">
+                </div>
-              <div className="text-xs text-muted-foreground">Số giấy tờ</div>
+              )}
-              <div className="mt-1 text-sm font-medium">{kycData.idNumber}</div>
+              {kycData.idNumber && (
+                <div className="rounded border border-border p-2">
+                  <div className="text-xs text-foreground-dim">Số giấy tờ</div>
+                  <div className="mt-0.5 font-mono text-data-sm">{kycData.idNumber}</div>
+                </div>
+              )}
             </div>
           )}
 
-          <div className="grid gap-2">
+          {[
-            {kycData.frontImageUrl && (
+            { url: kycData.frontImageUrl, label: 'Mặt trước CCCD/CMND' },
-              <div className="space-y-1">
+            { url: kycData.backImageUrl, label: 'Mặt sau CCCD/CMND' },
-                <div className="text-xs text-muted-foreground">Mặt trước</div>
+            { url: kycData.selfieUrl, label: 'Ảnh selfie xác nhận' },
-                <div className="relative aspect-video overflow-hidden rounded-md border bg-muted">
+          ].map(({ url, label }) =>
+            url ? (
+              <div key={label} className="space-y-1">
+                <div className="text-xs text-foreground-dim">{label}</div>
+                <div className="relative aspect-video overflow-hidden rounded-md border border-border bg-background-surface">
                   <Image
-                    src={kycData.frontImageUrl}
+                    src={url}
-                    alt="Mặt trước giấy tờ"
+                    alt={label}
                     fill
-                    sizes="(max-width: 768px) 100vw, 400px"
+                    sizes="(max-width: 768px) 100vw, 380px"
                     className="object-contain"
                   />
                 </div>
               </div>
-            )}
+            ) : null,
-            {kycData.backImageUrl && (
+          )}
-              <div className="space-y-1">
-                <div className="text-xs text-muted-foreground">Mặt sau</div>
-                <div className="relative aspect-video overflow-hidden rounded-md border bg-muted">
-                  <Image
-                    src={kycData.backImageUrl}
-                    alt="Mặt sau giấy tờ"
-                    fill
-                    sizes="(max-width: 768px) 100vw, 400px"
-                    className="object-contain"
-                  />
-                </div>
-              </div>
-            )}
-            {kycData.selfieUrl && (
-              <div className="space-y-1">
-                <div className="text-xs text-muted-foreground">Ảnh selfie</div>
-                <div className="relative aspect-video overflow-hidden rounded-md border bg-muted">
-                  <Image
-                    src={kycData.selfieUrl}
-                    alt="Selfie"
-                    fill
-                    sizes="(max-width: 768px) 100vw, 400px"
-                    className="object-contain"
-                  />
-                </div>
-              </div>
-            )}
-          </div>
         </div>
       )}
 
+      {/* Actions */}
       {item.kycStatus === 'PENDING' && (
-        <div className="flex gap-2">
+        <div className="flex gap-2 pt-1">
-          <Button className="flex-1" onClick={onApprove}>
+          <Button className="flex-1" size="sm" onClick={onApprove}>
-            <CheckCircle className="mr-2 h-4 w-4" />
+            <CheckCircle className="mr-1.5 h-3.5 w-3.5" />
             Duyệt KYC
           </Button>
-          <Button variant="destructive" className="flex-1" onClick={onReject}>
+          <Button variant="destructive" className="flex-1" size="sm" onClick={onReject}>
-            <XCircle className="mr-2 h-4 w-4" />
+            <XCircle className="mr-1.5 h-3.5 w-3.5" />
             Từ chối
           </Button>
         </div>
@@ -165,11 +143,9 @@ export default function AdminKycPage() {
 
   const [selectedItem, setSelectedItem] = useState<KycQueueItem | null>(null);
 
-  // Approve dialog
   const [approveDialog, setApproveDialog] = useState<string | null>(null);
   const [approveNotes, setApproveNotes] = useState('');
 
-  // Reject dialog
   const [rejectDialog, setRejectDialog] = useState<string | null>(null);
   const [rejectReason, setRejectReason] = useState('');
 
@@ -226,7 +202,7 @@ export default function AdminKycPage() {
   };
 
   return (
-    <div className="space-y-6">
+    <div className="flex flex-col gap-4">
       {actionError && (
         <div className="flex items-center justify-between rounded-md border border-destructive/50 bg-destructive/10 px-4 py-2 text-sm text-destructive">
           <span>{actionError}</span>
@@ -238,101 +214,97 @@ export default function AdminKycPage() {
 
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-bold tracking-tight">Duyệt KYC</h1>
+          <h1 className="text-heading-md font-semibold tracking-tight">Duyệt KYC</h1>
-          <p className="text-sm text-muted-foreground">
+          <p className="text-sm text-foreground-muted">Xác minh danh tính người dùng và đại lý</p>
-            Xác minh danh tính người dùng và đại lý
-          </p>
         </div>
-        <Button variant="outline" size="sm" onClick={fetchQueue}>
+        <Button variant="outline" size="sm" onClick={fetchQueue} disabled={loading}>
-          <RefreshCw className="mr-2 h-4 w-4" />
+          <RefreshCw className={`mr-1.5 h-3.5 w-3.5 ${loading ? 'animate-spin' : ''}`} />
           Làm mới
         </Button>
       </div>
 
-      <div className="grid gap-6 lg:grid-cols-[1fr_400px]">
+      <div className="grid gap-4 lg:grid-cols-[1fr_400px]">
         {/* Table */}
-        <Card>
+        <Card className="shadow-elevation-1 overflow-hidden">
           <CardContent className="p-0">
             {loading ? (
               <div className="flex h-48 items-center justify-center">
-                <RefreshCw className="h-5 w-5 animate-spin text-muted-foreground" />
+                <RefreshCw className="h-5 w-5 animate-spin text-foreground-muted" />
               </div>
             ) : error ? (
               <div className="flex h-48 flex-col items-center justify-center gap-2">
                 <p className="text-sm text-destructive">{error}</p>
-                <Button variant="outline" size="sm" onClick={fetchQueue}>
+                <Button variant="outline" size="sm" onClick={fetchQueue}>Thử lại</Button>
-                  Thử lại
-                </Button>
               </div>
             ) : !result || result.data.length === 0 ? (
               <div className="flex h-48 flex-col items-center justify-center gap-2">
-                <ShieldCheck className="h-8 w-8 text-green-500" />
+                <ShieldCheck className="h-8 w-8 text-signal-up" />
-                <p className="text-sm text-muted-foreground">
+                <p className="text-sm text-foreground-muted">Không có yêu cầu KYC nào đang chờ</p>
-                  Không có yêu cầu KYC nào đang chờ
-                </p>
               </div>
             ) : (
               <>
-                <Table>
+                <div className="overflow-x-auto">
-                  <TableHeader>
+                  <Table>
-                    <TableRow>
+                    <TableHeader className="sticky top-0 z-sticky-header bg-background-elevated">
-                      <TableHead>Họ tên</TableHead>
+                      <TableRow className="border-b border-border-strong">
-                      <TableHead className="hidden sm:table-cell">SĐT</TableHead>
+                        <TableHead className="text-heading-xs uppercase text-foreground-muted">Họ tên</TableHead>
-                      <TableHead>Vai trò</TableHead>
+                        <TableHead className="hidden sm:table-cell text-heading-xs uppercase text-foreground-muted">SĐT</TableHead>
-                      <TableHead>Trạng thái</TableHead>
+                        <TableHead className="text-heading-xs uppercase text-foreground-muted">Vai trò</TableHead>
-                      <TableHead className="hidden md:table-cell">Ngày gửi</TableHead>
+                        <TableHead className="text-heading-xs uppercase text-foreground-muted">Trạng thái</TableHead>
-                      <TableHead className="w-10"></TableHead>
+                        <TableHead className="hidden md:table-cell text-heading-xs uppercase text-foreground-muted">Ngày gửi</TableHead>
-                    </TableRow>
+                        <TableHead className="w-10"></TableHead>
-                  </TableHeader>
-                  <TableBody>
-                    {result.data.map((item) => (
-                      <TableRow
-                        key={item.userId}
-                        className={`cursor-pointer ${selectedItem?.userId === item.userId ? 'bg-muted/50' : ''}`}
-                        onClick={() => setSelectedItem(item)}
-                      >
-                        <TableCell>
-                          <div className="font-medium">{item.fullName}</div>
-                          {item.email && (
-                            <div className="text-xs text-muted-foreground">{item.email}</div>
-                          )}
-                        </TableCell>
-                        <TableCell className="hidden sm:table-cell">{item.phone}</TableCell>
-                        <TableCell>
-                          <Badge variant="outline">{item.role}</Badge>
-                        </TableCell>
-                        <TableCell>{kycStatusBadge(item.kycStatus)}</TableCell>
-                        <TableCell className="hidden md:table-cell text-sm text-muted-foreground">
-                          {new Date(item.createdAt).toLocaleDateString('vi-VN')}
-                        </TableCell>
-                        <TableCell>
-                          <FileText className="h-4 w-4 text-muted-foreground" />
-                        </TableCell>
                       </TableRow>
-                    ))}
+                    </TableHeader>
-                  </TableBody>
+                    <TableBody>
-                </Table>
+                      {result.data.map((item) => (
+                        <TableRow
+                          key={item.userId}
+                          onClick={() => setSelectedItem(item)}
+                          className={`h-row-compact cursor-pointer border-b border-border transition-colors ${
+                            selectedItem?.userId === item.userId
+                              ? 'bg-background-surface'
+                              : 'hover:bg-background-surface'
+                          }`}
+                        >
+                          <TableCell>
+                            <div className="text-sm font-medium">{item.fullName}</div>
+                            {item.email && (
+                              <div className="text-xs text-foreground-dim">{item.email}</div>
+                            )}
+                          </TableCell>
+                          <TableCell className="hidden sm:table-cell font-mono text-data-sm text-foreground-muted">
+                            {item.phone}
+                          </TableCell>
+                          <TableCell>
+                            <span className="rounded-pill bg-background-surface px-2 py-0.5 text-xs font-medium text-foreground-muted ring-1 ring-inset ring-border">
+                              {item.role}
+                            </span>
+                          </TableCell>
+                          <TableCell>
+                            <StatusChip status={kycStatusToPropertyStatus(item.kycStatus)} />
+                          </TableCell>
+                          <TableCell className="hidden md:table-cell font-mono text-data-sm text-foreground-dim">
+                            {new Date(item.createdAt).toLocaleDateString('vi-VN')}
+                          </TableCell>
+                          <TableCell>
+                            <User className="h-4 w-4 text-foreground-dim" />
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
 
                 {result.totalPages > 1 && (
-                  <div className="flex items-center justify-between border-t px-4 py-3">
+                  <div className="flex items-center justify-between border-t border-border px-4 py-2.5">
-                    <span className="text-sm text-muted-foreground">
+                    <span className="font-mono text-data-sm text-foreground-muted">
-                      Trang {result.page}/{result.totalPages} ({result.total} yêu cầu)
+                      Trang {result.page}/{result.totalPages} · {result.total} yêu cầu
                     </span>
                     <div className="flex gap-1">
-                      <Button
+                      <Button variant="outline" size="icon" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
-                        variant="outline"
-                        size="icon"
-                        disabled={page <= 1}
-                        onClick={() => setPage((p) => p - 1)}
-                      >
                         <ChevronLeft className="h-4 w-4" />
                       </Button>
-                      <Button
+                      <Button variant="outline" size="icon" disabled={page >= result.totalPages} onClick={() => setPage((p) => p + 1)}>
-                        variant="outline"
-                        size="icon"
-                        disabled={page >= result.totalPages}
-                        onClick={() => setPage((p) => p + 1)}
-                      >
                         <ChevronRight className="h-4 w-4" />
                       </Button>
                     </div>
@@ -343,24 +315,18 @@ export default function AdminKycPage() {
           </CardContent>
         </Card>
 
-        {/* Detail sidebar */}
+        {/* Detail panel */}
         <div className="hidden lg:block">
-          <Card>
+          <Card className="shadow-elevation-1 sticky top-20">
-            <CardContent className="p-4">
+            <CardContent className="p-0">
               {selectedItem ? (
-                <KycDetailView
+                <KycDetailPanel
                   item={selectedItem}
-                  onApprove={() => {
+                  onApprove={() => { setApproveDialog(selectedItem.userId); setApproveNotes(''); }}
-                    setApproveDialog(selectedItem.userId);
+                  onReject={() => { setRejectDialog(selectedItem.userId); setRejectReason(''); }}
-                    setApproveNotes('');
-                  }}
-                  onReject={() => {
-                    setRejectDialog(selectedItem.userId);
-                    setRejectReason('');
-                  }}
                 />
               ) : (
-                <div className="flex h-48 items-center justify-center text-sm text-muted-foreground">
+                <div className="flex h-48 items-center justify-center text-sm text-foreground-muted">
                   Chọn yêu cầu KYC để xem chi tiết
                 </div>
               )}
@@ -374,9 +340,7 @@ export default function AdminKycPage() {
         <DialogContent>
           <DialogHeader>
             <DialogTitle>Duyệt KYC</DialogTitle>
-            <DialogDescription>
+            <DialogDescription>Xác nhận danh tính người dùng đã được xác minh thành công.</DialogDescription>
-              Xác nhận danh tính người dùng đã được xác minh thành công.
-            </DialogDescription>
           </DialogHeader>
           <Input
             placeholder="Ghi chú (không bắt buộc)..."
@@ -384,9 +348,7 @@ export default function AdminKycPage() {
             onChange={(e) => setApproveNotes(e.target.value)}
           />
           <DialogFooter>
-            <Button variant="outline" onClick={() => setApproveDialog(null)}>
+            <Button variant="outline" onClick={() => setApproveDialog(null)}>Hủy</Button>
-              Hủy
-            </Button>
             <Button onClick={handleApprove} disabled={actionLoading}>
               {actionLoading ? 'Đang xử lý...' : 'Xác nhận duyệt'}
             </Button>
@@ -399,9 +361,7 @@ export default function AdminKycPage() {
         <DialogContent>
           <DialogHeader>
             <DialogTitle>Từ chối KYC</DialogTitle>
-            <DialogDescription>
+            <DialogDescription>Vui lòng nhập lý do từ chối. Người dùng sẽ cần gửi lại hồ sơ.</DialogDescription>
-              Vui lòng nhập lý do từ chối. Người dùng sẽ cần gửi lại hồ sơ.
-            </DialogDescription>
           </DialogHeader>
           <Input
             placeholder="Lý do từ chối (bắt buộc)..."
@@ -409,9 +369,7 @@ export default function AdminKycPage() {
             onChange={(e) => setRejectReason(e.target.value)}
           />
           <DialogFooter>
-            <Button variant="outline" onClick={() => setRejectDialog(null)}>
+            <Button variant="outline" onClick={() => setRejectDialog(null)}>Hủy</Button>
-              Hủy
-            </Button>
             <Button
               variant="destructive"
               onClick={handleReject}

apps/web/app/[locale]/(admin)/admin/moderation/page.tsx

@@ -8,9 +8,11 @@ import {
   ChevronRight,
   AlertTriangle,
   X,
+  Flag,
 } from 'lucide-react';
 import { useEffect, useState, useCallback } from 'react';
-import { Badge } from '@/components/ui/badge';
+import { Signal } from '@/components/design-system/signal';
+import { StatusChip } from '@/components/design-system/status-chip';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import {
@@ -24,25 +26,38 @@ import {
 import { Input } from '@/components/ui/input';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
 import { adminApi, type ModerationQueueItem, type PaginatedResult } from '@/lib/admin-api';
-import { formatPrice } from '@/lib/currency';
 
-function moderationScoreBadge(score: number | null) {
+type QueueTab = 'pending' | 'flagged' | 'approved' | 'rejected';
-  if (score === null) return <Badge variant="secondary">N/A</Badge>;
+
-  if (score >= 80) return <Badge variant="success">{score}</Badge>;
+const TABS: { id: QueueTab; label: string; endpoint?: string }[] = [
-  if (score >= 50) return <Badge variant="warning">{score}</Badge>;
+  { id: 'pending', label: 'Chờ duyệt' },
-  return <Badge variant="destructive">{score}</Badge>;
+  { id: 'flagged', label: 'Bị gắn cờ' },
+  { id: 'approved', label: 'Đã duyệt' },
+  { id: 'rejected', label: 'Đã từ chối' },
+];
+
+function AiScorePill({ score }: { score: number | null }) {
+  if (score === null) return <span className="font-mono text-xs text-foreground-dim">N/A</span>;
+  const dir = score >= 80 ? 'up' : score >= 50 ? 'neutral' : 'down';
+  return <Signal direction={dir} label={String(score)} />;
+}
+
+function ModerationStatusChip({ tab }: { tab: QueueTab }) {
+  if (tab === 'approved') return <StatusChip status="active" hideDot />;
+  if (tab === 'rejected') return <StatusChip status="rejected" hideDot />;
+  if (tab === 'flagged') return <StatusChip status="pending" hideDot />;
+  return <StatusChip status="pending" hideDot />;
 }
 
 export default function AdminModerationPage() {
+  const [activeTab, setActiveTab] = useState<QueueTab>('pending');
   const [result, setResult] = useState<PaginatedResult<ModerationQueueItem> | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [page, setPage] = useState(1);
 
-  // Selected items for bulk
   const [selected, setSelected] = useState<Set<string>>(new Set());
 
-  // Action dialogs
   const [approveDialog, setApproveDialog] = useState<string | null>(null);
   const [rejectDialog, setRejectDialog] = useState<string | null>(null);
   const [approveNotes, setApproveNotes] = useState('');
@@ -50,7 +65,6 @@ export default function AdminModerationPage() {
   const [actionLoading, setActionLoading] = useState(false);
   const [actionError, setActionError] = useState<string | null>(null);
 
-  // Bulk action
   const [bulkAction, setBulkAction] = useState<'approve' | 'reject' | null>(null);
   const [bulkReason, setBulkReason] = useState('');
 
@@ -67,6 +81,11 @@ export default function AdminModerationPage() {
     }
   }, [page]);
 
+  useEffect(() => {
+    setSelected(new Set());
+    setPage(1);
+  }, [activeTab]);
+
   useEffect(() => {
     fetchQueue();
   }, [fetchQueue]);
@@ -139,8 +158,10 @@ export default function AdminModerationPage() {
     }
   };
 
+  const isActionable = activeTab === 'pending' || activeTab === 'flagged';
+
   return (
-    <div className="space-y-6">
+    <div className="flex flex-col gap-4">
       {actionError && (
         <div className="flex items-center justify-between rounded-md border border-destructive/50 bg-destructive/10 px-4 py-2 text-sm text-destructive">
           <span>{actionError}</span>
@@ -150,187 +171,217 @@ export default function AdminModerationPage() {
         </div>
       )}
 
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+      {/* Header */}
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
         <div>
-          <h1 className="text-xl font-bold tracking-tight sm:text-2xl">Kiểm duyệt tin đăng</h1>
+          <h1 className="text-heading-md font-semibold tracking-tight">Kiểm duyệt tin đăng</h1>
-          <p className="text-sm text-muted-foreground">
+          <p className="text-sm text-foreground-muted">Duyệt hoặc từ chối các tin đăng chờ phê duyệt</p>
-            Duyệt hoặc từ chối các tin đăng chờ phê duyệt
-          </p>
         </div>
-        <div className="flex flex-wrap gap-2">
+        <div className="flex flex-wrap items-center gap-2">
-          {selected.size > 0 && (
+          {isActionable && selected.size > 0 && (
             <>
-              <Button
+              <Button size="sm" onClick={() => { setBulkAction('approve'); setBulkReason(''); }}>
-                size="sm"
+                <CheckCircle className="mr-1.5 h-3.5 w-3.5" />
-                onClick={() => { setBulkAction('approve'); setBulkReason(''); }}
-              >
-                <CheckCircle className="mr-2 h-4 w-4" />
                 Duyệt ({selected.size})
               </Button>
-              <Button
+              <Button size="sm" variant="destructive" onClick={() => { setBulkAction('reject'); setBulkReason(''); }}>
-                size="sm"
+                <XCircle className="mr-1.5 h-3.5 w-3.5" />
-                variant="destructive"
-                onClick={() => { setBulkAction('reject'); setBulkReason(''); }}
-              >
-                <XCircle className="mr-2 h-4 w-4" />
                 Từ chối ({selected.size})
               </Button>
             </>
           )}
-          <Button variant="outline" size="sm" onClick={fetchQueue}>
+          <Button variant="outline" size="sm" onClick={fetchQueue} disabled={loading}>
-            <RefreshCw className="mr-2 h-4 w-4" />
+            <RefreshCw className={`mr-1.5 h-3.5 w-3.5 ${loading ? 'animate-spin' : ''}`} />
             Làm mới
           </Button>
         </div>
       </div>
 
-      <Card>
+      {/* Tabs */}
+      <div className="flex gap-0 border-b border-border">
+        {TABS.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id)}
+            className={`relative px-4 py-2 text-sm font-medium transition-colors ${
+              activeTab === tab.id
+                ? 'text-foreground after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary'
+                : 'text-foreground-muted hover:text-foreground'
+            }`}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Table */}
+      <Card className="shadow-elevation-1 overflow-hidden">
         <CardContent className="p-0">
           {loading ? (
             <div className="flex h-48 items-center justify-center">
-              <RefreshCw className="h-5 w-5 animate-spin text-muted-foreground" />
+              <RefreshCw className="h-5 w-5 animate-spin text-foreground-muted" />
             </div>
           ) : error ? (
             <div className="flex h-48 flex-col items-center justify-center gap-2">
               <p className="text-sm text-destructive">{error}</p>
-              <Button variant="outline" size="sm" onClick={fetchQueue}>
+              <Button variant="outline" size="sm" onClick={fetchQueue}>Thử lại</Button>
-                Thử lại
-              </Button>
             </div>
           ) : !result || result.data.length === 0 ? (
             <div className="flex h-48 flex-col items-center justify-center gap-2">
-              <CheckCircle className="h-8 w-8 text-green-500" />
+              <CheckCircle className="h-8 w-8 text-signal-up" />
-              <p className="text-sm text-muted-foreground">
+              <p className="text-sm text-foreground-muted">Không có tin nào trong hàng đợi này</p>
-                Không có tin nào chờ kiểm duyệt
-              </p>
             </div>
           ) : (
-            <>
+            <div className="overflow-x-auto">
               <Table>
-                <TableHeader>
+                <TableHeader className="sticky top-0 z-sticky-header bg-background-elevated">
-                  <TableRow>
+                  <TableRow className="border-b border-border-strong">
-                    <TableHead className="w-10">
+                    {isActionable && (
-                      <input
+                      <TableHead className="w-9 px-3">
-                        type="checkbox"
+                        <input
-                        checked={selected.size === result.data.length && result.data.length > 0}
+                          type="checkbox"
-                        onChange={toggleSelectAll}
+                          checked={selected.size === result.data.length && result.data.length > 0}
-                        className="rounded border-input"
+                          onChange={toggleSelectAll}
-                        aria-label="Chọn tất cả tin đăng"
+                          className="rounded border-border"
-                      />
+                          aria-label="Chọn tất cả tin đăng"
-                    </TableHead>
+                        />
-                    <TableHead>Tiêu đề</TableHead>
+                      </TableHead>
-                    <TableHead className="hidden sm:table-cell">Loại</TableHead>
+                    )}
-                    <TableHead className="hidden md:table-cell">Giá</TableHead>
+                    <TableHead className="text-heading-xs uppercase text-foreground-muted">Tiêu đề</TableHead>
-                    <TableHead className="hidden lg:table-cell">Người đăng</TableHead>
+                    <TableHead className="hidden sm:table-cell text-heading-xs uppercase text-foreground-muted">Loại</TableHead>
-                    <TableHead>Điểm AI</TableHead>
+                    <TableHead className="hidden md:table-cell text-heading-xs uppercase text-foreground-muted text-right">Giá (VND)</TableHead>
-                    <TableHead className="hidden md:table-cell">Ngày đăng</TableHead>
+                    <TableHead className="hidden lg:table-cell text-heading-xs uppercase text-foreground-muted">Người đăng</TableHead>
-                    <TableHead className="text-right">Hành động</TableHead>
+                    <TableHead className="text-heading-xs uppercase text-foreground-muted text-center">Điểm AI</TableHead>
+                    <TableHead className="text-heading-xs uppercase text-foreground-muted">Trạng thái</TableHead>
+                    <TableHead className="hidden md:table-cell text-heading-xs uppercase text-foreground-muted">Ngày đăng</TableHead>
+                    {isActionable && <TableHead className="text-right text-heading-xs uppercase text-foreground-muted">Hành động</TableHead>}
                   </TableRow>
                 </TableHeader>
                 <TableBody>
                   {result.data.map((item) => (
-                    <TableRow key={item.listingId}>
+                    <TableRow
+                      key={item.listingId}
+                      className="h-row-compact border-b border-border hover:bg-background-surface transition-colors"
+                    >
+                      {isActionable && (
+                        <TableCell className="px-3">
+                          <input
+                            type="checkbox"
+                            checked={selected.has(item.listingId)}
+                            onChange={() => toggleSelect(item.listingId)}
+                            className="rounded border-border"
+                            aria-label={`Chọn tin: ${item.propertyTitle}`}
+                          />
+                        </TableCell>
+                      )}
                       <TableCell>
-                        <input
+                        <div className="font-medium max-w-[200px] truncate text-sm">{item.propertyTitle}</div>
-                          type="checkbox"
+                        <div className="text-xs text-foreground-dim">
-                          checked={selected.has(item.listingId)}
-                          onChange={() => toggleSelect(item.listingId)}
-                          className="rounded border-input"
-                          aria-label={`Chọn tin: ${item.propertyTitle}`}
-                        />
-                      </TableCell>
-                      <TableCell>
-                        <div className="font-medium max-w-[200px] truncate">
-                          {item.propertyTitle}
-                        </div>
-                        <div className="text-xs text-muted-foreground">
                           {item.transactionType === 'SALE' ? 'Bán' : 'Cho thuê'}
                         </div>
                       </TableCell>
                       <TableCell className="hidden sm:table-cell">
-                        <Badge variant="outline">{item.propertyType}</Badge>
+                        <span className="rounded-pill bg-background-surface px-2 py-0.5 text-xs font-medium text-foreground-muted ring-1 ring-inset ring-border">
+                          {item.propertyType}
+                        </span>
                       </TableCell>
-                      <TableCell className="hidden md:table-cell">
+                      <TableCell className="hidden md:table-cell font-mono text-data-sm tabular-nums text-right">
-                        {formatPrice(item.priceVND)} VND
+                        {new Intl.NumberFormat('vi-VN').format(item.priceVND)}
                       </TableCell>
-                      <TableCell className="hidden lg:table-cell">
+                      <TableCell className="hidden lg:table-cell text-sm text-foreground-muted">
-                        <span className="text-sm">{item.sellerName}</span>
+                        {item.sellerName}
+                      </TableCell>
+                      <TableCell className="text-center">
+                        <AiScorePill score={item.moderationScore} />
                       </TableCell>
                       <TableCell>
-                        {moderationScoreBadge(item.moderationScore)}
+                        <ModerationStatusChip tab={activeTab} />
                       </TableCell>
-                      <TableCell className="hidden md:table-cell text-sm text-muted-foreground">
+                      <TableCell className="hidden md:table-cell font-mono text-data-sm text-foreground-dim">
                         {new Date(item.createdAt).toLocaleDateString('vi-VN')}
                       </TableCell>
-                      <TableCell>
+                      {isActionable && (
-                        <div className="flex justify-end gap-1">
+                        <TableCell>
-                          <Button
+                          <div className="flex justify-end gap-1">
-                            variant="ghost"
+                            <button
-                            size="icon"
+                              title="Duyệt"
-                            title="Duyệt"
+                              onClick={() => { setApproveDialog(item.listingId); setApproveNotes(''); }}
-                            onClick={() => {
+                              className="rounded p-1 text-signal-up hover:bg-signal-up/10 transition-colors"
-                              setApproveDialog(item.listingId);
+                              aria-label={`Duyệt tin: ${item.propertyTitle}`}
-                              setApproveNotes('');
+                            >
-                            }}
+                              <CheckCircle className="h-4 w-4" />
-                          >
+                            </button>
-                            <CheckCircle className="h-4 w-4 text-green-600" />
+                            <button
-                          </Button>
+                              title="Từ chối"
-                          <Button
+                              onClick={() => { setRejectDialog(item.listingId); setRejectReason(''); }}
-                            variant="ghost"
+                              className="rounded p-1 text-signal-down hover:bg-signal-down/10 transition-colors"
-                            size="icon"
+                              aria-label={`Từ chối tin: ${item.propertyTitle}`}
-                            title="Từ chối"
+                            >
-                            onClick={() => {
+                              <XCircle className="h-4 w-4" />
-                              setRejectDialog(item.listingId);
+                            </button>
-                              setRejectReason('');
+                            <button
-                            }}
+                              title="Gắn cờ"
-                          >
+                              className="rounded p-1 text-signal-neutral hover:bg-signal-neutral/10 transition-colors"
-                            <XCircle className="h-4 w-4 text-red-600" />
+                              aria-label={`Gắn cờ tin: ${item.propertyTitle}`}
-                          </Button>
+                            >
-                        </div>
+                              <Flag className="h-4 w-4" />
-                      </TableCell>
+                            </button>
+                          </div>
+                        </TableCell>
+                      )}
                     </TableRow>
                   ))}
                 </TableBody>
               </Table>
 
               {result.totalPages > 1 && (
-                <div className="flex items-center justify-between border-t px-4 py-3">
+                <div className="flex items-center justify-between border-t border-border px-4 py-2.5">
-                  <span className="text-sm text-muted-foreground">
+                  <span className="font-mono text-data-sm text-foreground-muted">
-                    Trang {result.page}/{result.totalPages} ({result.total} tin)
+                    Trang {result.page}/{result.totalPages} · {result.total} tin
                   </span>
                   <div className="flex gap-1">
-                    <Button
+                    <Button variant="outline" size="icon" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
-                      variant="outline"
-                      size="icon"
-                      disabled={page <= 1}
-                      onClick={() => setPage((p) => p - 1)}
-                    >
                       <ChevronLeft className="h-4 w-4" />
                     </Button>
-                    <Button
+                    <Button variant="outline" size="icon" disabled={page >= result.totalPages} onClick={() => setPage((p) => p + 1)}>
-                      variant="outline"
-                      size="icon"
-                      disabled={page >= result.totalPages}
-                      onClick={() => setPage((p) => p + 1)}
-                    >
                       <ChevronRight className="h-4 w-4" />
                     </Button>
                   </div>
                 </div>
               )}
-            </>
+            </div>
           )}
         </CardContent>
       </Card>
 
+      {/* Bulk action bar (sticky bottom) */}
+      {isActionable && selected.size > 0 && (
+        <div className="sticky bottom-4 z-dropdown flex items-center justify-between rounded-lg border border-border-strong bg-background-elevated px-4 py-2.5 shadow-elevation-2">
+          <span className="text-sm font-medium">
+            Đã chọn <span className="font-mono tabular-nums">{selected.size}</span> tin
+          </span>
+          <div className="flex gap-2">
+            <Button size="sm" onClick={() => { setBulkAction('approve'); setBulkReason(''); }}>
+              <CheckCircle className="mr-1.5 h-3.5 w-3.5" />
+              Duyệt tất cả
+            </Button>
+            <Button size="sm" variant="destructive" onClick={() => { setBulkAction('reject'); setBulkReason(''); }}>
+              <XCircle className="mr-1.5 h-3.5 w-3.5" />
+              Từ chối tất cả
+            </Button>
+            <Button size="sm" variant="outline" onClick={() => setSelected(new Set())}>
+              Bỏ chọn
+            </Button>
+          </div>
+        </div>
+      )}
+
       {/* Approve dialog */}
       <Dialog open={!!approveDialog} onOpenChange={() => setApproveDialog(null)}>
         <DialogContent>
           <DialogHeader>
             <DialogTitle>Duyệt tin đăng</DialogTitle>
-            <DialogDescription>
+            <DialogDescription>Tin đăng sẽ được hiển thị công khai sau khi duyệt.</DialogDescription>
-              Tin đăng sẽ được hiển thị công khai sau khi duyệt.
-            </DialogDescription>
           </DialogHeader>
           <Input
             placeholder="Ghi chú (không bắt buộc)..."
@@ -338,9 +389,7 @@ export default function AdminModerationPage() {
             onChange={(e) => setApproveNotes(e.target.value)}
           />
           <DialogFooter>
-            <Button variant="outline" onClick={() => setApproveDialog(null)}>
+            <Button variant="outline" onClick={() => setApproveDialog(null)}>Hủy</Button>
-              Hủy
-            </Button>
             <Button onClick={handleApprove} disabled={actionLoading}>
               {actionLoading ? 'Đang xử lý...' : 'Duyệt tin'}
             </Button>
@@ -353,9 +402,7 @@ export default function AdminModerationPage() {
         <DialogContent>
           <DialogHeader>
             <DialogTitle>Từ chối tin đăng</DialogTitle>
-            <DialogDescription>
+            <DialogDescription>Vui lòng nhập lý do từ chối. Người đăng sẽ nhận được thông báo.</DialogDescription>
-              Vui lòng nhập lý do từ chối. Người đăng sẽ nhận được thông báo.
-            </DialogDescription>
           </DialogHeader>
           <Input
             placeholder="Lý do từ chối (bắt buộc)..."
@@ -363,14 +410,8 @@ export default function AdminModerationPage() {
             onChange={(e) => setRejectReason(e.target.value)}
           />
           <DialogFooter>
-            <Button variant="outline" onClick={() => setRejectDialog(null)}>
+            <Button variant="outline" onClick={() => setRejectDialog(null)}>Hủy</Button>
-              Hủy
+            <Button variant="destructive" onClick={handleReject} disabled={actionLoading || !rejectReason.trim()}>
-            </Button>
-            <Button
-              variant="destructive"
-              onClick={handleReject}
-              disabled={actionLoading || !rejectReason.trim()}
-            >
               {actionLoading ? 'Đang xử lý...' : 'Từ chối'}
             </Button>
           </DialogFooter>
@@ -399,9 +440,7 @@ export default function AdminModerationPage() {
             />
           )}
           <DialogFooter>
-            <Button variant="outline" onClick={() => setBulkAction(null)}>
+            <Button variant="outline" onClick={() => setBulkAction(null)}>Hủy</Button>
-              Hủy
-            </Button>
             <Button
               variant={bulkAction === 'reject' ? 'destructive' : 'default'}
               onClick={handleBulkAction}

apps/web/app/[locale]/(admin)/layout.tsx

@@ -11,6 +11,7 @@ import {
   Menu,
   Sparkles,
   X,
+  ScrollText,
 } from 'lucide-react';
 import { usePathname, useRouter } from 'next/navigation';
 import { useTranslations } from 'next-intl';
@@ -33,6 +34,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
     { href: '/admin/users' as const, label: t('adminNav.users'), icon: Users },
     { href: '/admin/moderation' as const, label: t('adminNav.moderation'), icon: ClipboardList },
     { href: '/admin/kyc' as const, label: t('adminNav.kyc'), icon: ShieldCheck },
+    { href: '/admin/audit-log' as const, label: 'Nhật ký kiểm toán', icon: ScrollText },
     { href: '/admin/accounts/developers' as const, label: 'Tài khoản CĐT', icon: Building2 },
     { href: '/admin/accounts/park-operators' as const, label: 'Tài khoản KCN', icon: Factory },
     { href: '/admin/settings/ai' as const, label: t('adminNav.aiSettings'), icon: Sparkles },

apps/web/lib/admin-api.ts

@@ -106,6 +106,22 @@ export interface KycQueueItem {
   createdAt: string;
 }
 
+export interface AuditLogItem {
+  id: string;
+  actorId: string;
+  actorName: string;
+  actorRole: string;
+  action: string;
+  module: string;
+  targetId: string | null;
+  targetType: string | null;
+  severity: 'info' | 'warning' | 'critical';
+  before: unknown;
+  after: unknown;
+  ipAddress: string | null;
+  createdAt: string;
+}
+
 // ── API ──
 
 export const adminApi = {
@@ -191,6 +207,29 @@ export const adminApi = {
       reason,
     }),
 
+  // Audit logs
+  getAuditLogs: (params: {
+    page?: number;
+    limit?: number;
+    module?: string;
+    actorId?: string;
+    severity?: string;
+    from?: string;
+    to?: string;
+  } = {}) => {
+    const query = new URLSearchParams();
+    if (params.page) query.set('page', String(params.page));
+    if (params.limit) query.set('limit', String(params.limit));
+    if (params.module) query.set('module', params.module);
+    if (params.actorId) query.set('actorId', params.actorId);
+    if (params.severity) query.set('severity', params.severity);
+    if (params.from) query.set('from', params.from);
+    if (params.to) query.set('to', params.to);
+    return apiClient.get<PaginatedResult<AuditLogItem>>(
+      `/admin/audit-logs?${query.toString()}`,
+    );
+  },
+
   // AI Settings
   getAiSettings: () => apiClient.get<AiSettings>('/admin/settings/ai'),