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/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) {
-  if (score === null) return <Badge variant="secondary">N/A</Badge>;
-  if (score >= 80) return <Badge variant="success">{score}</Badge>;
-  if (score >= 50) return <Badge variant="warning">{score}</Badge>;
-  return <Badge variant="destructive">{score}</Badge>;
+type QueueTab = 'pending' | 'flagged' | 'approved' | 'rejected';
+
+const TABS: { id: QueueTab; label: string; endpoint?: string }[] = [
+  { id: 'pending', label: 'Chờ duyệt' },
+  { 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>
-          <p className="text-sm text-muted-foreground">
-            Duyệt hoặc từ chối các tin đăng chờ phê duyệt
-          </p>
+          <h1 className="text-heading-md font-semibold tracking-tight">Kiểm duyệt tin đăng</h1>
+          <p className="text-sm text-foreground-muted">Duyệt hoặc từ chối các tin đăng chờ phê duyệt</p>
         </div>
-        <div className="flex flex-wrap gap-2">
-          {selected.size > 0 && (
+        <div className="flex flex-wrap items-center gap-2">
+          {isActionable && selected.size > 0 && (
             <>
-              <Button
-                size="sm"
-                onClick={() => { setBulkAction('approve'); setBulkReason(''); }}
-              >
-                <CheckCircle className="mr-2 h-4 w-4" />
+              <Button size="sm" onClick={() => { setBulkAction('approve'); setBulkReason(''); }}>
+                <CheckCircle className="mr-1.5 h-3.5 w-3.5" />
                 Duyệt ({selected.size})
               </Button>
-              <Button
-                size="sm"
-                variant="destructive"
-                onClick={() => { setBulkAction('reject'); setBulkReason(''); }}
-              >
-                <XCircle className="mr-2 h-4 w-4" />
+              <Button size="sm" variant="destructive" onClick={() => { setBulkAction('reject'); setBulkReason(''); }}>
+                <XCircle className="mr-1.5 h-3.5 w-3.5" />
                 Từ chối ({selected.size})
               </Button>
             </>
           )}
-          <Button variant="outline" size="sm" onClick={fetchQueue}>
-            <RefreshCw className="mr-2 h-4 w-4" />
+          <Button variant="outline" size="sm" onClick={fetchQueue} disabled={loading}>
+            <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}>
-                Thử lại
-              </Button>
+              <Button variant="outline" size="sm" onClick={fetchQueue}>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" />
-              <p className="text-sm text-muted-foreground">
-                Không có tin nào chờ kiểm duyệt
-              </p>
+              <CheckCircle className="h-8 w-8 text-signal-up" />
+              <p className="text-sm text-foreground-muted">Không có tin nào trong hàng đợi này</p>
             </div>
           ) : (
-            <>
+            <div className="overflow-x-auto">
               <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead className="w-10">
-                      <input
-                        type="checkbox"
-                        checked={selected.size === result.data.length && result.data.length > 0}
-                        onChange={toggleSelectAll}
-                        className="rounded border-input"
-                        aria-label="Chọn tất cả tin đăng"
-                      />
-                    </TableHead>
-                    <TableHead>Tiêu đề</TableHead>
-                    <TableHead className="hidden sm:table-cell">Loại</TableHead>
-                    <TableHead className="hidden md:table-cell">Giá</TableHead>
-                    <TableHead className="hidden lg:table-cell">Người đăng</TableHead>
-                    <TableHead>Điểm AI</TableHead>
-                    <TableHead className="hidden md:table-cell">Ngày đăng</TableHead>
-                    <TableHead className="text-right">Hành động</TableHead>
+                <TableHeader className="sticky top-0 z-sticky-header bg-background-elevated">
+                  <TableRow className="border-b border-border-strong">
+                    {isActionable && (
+                      <TableHead className="w-9 px-3">
+                        <input
+                          type="checkbox"
+                          checked={selected.size === result.data.length && result.data.length > 0}
+                          onChange={toggleSelectAll}
+                          className="rounded border-border"
+                          aria-label="Chọn tất cả tin đăng"
+                        />
+                      </TableHead>
+                    )}
+                    <TableHead className="text-heading-xs uppercase text-foreground-muted">Tiêu đề</TableHead>
+                    <TableHead className="hidden sm:table-cell text-heading-xs uppercase text-foreground-muted">Loại</TableHead>
+                    <TableHead className="hidden md:table-cell text-heading-xs uppercase text-foreground-muted text-right">Giá (VND)</TableHead>
+                    <TableHead className="hidden lg:table-cell text-heading-xs uppercase text-foreground-muted">Người đă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
-                          type="checkbox"
-                          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">
+                        <div className="font-medium max-w-[200px] truncate text-sm">{item.propertyTitle}</div>
+                        <div className="text-xs text-foreground-dim">
                           {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">
-                        {formatPrice(item.priceVND)} VND
+                      <TableCell className="hidden md:table-cell font-mono text-data-sm tabular-nums text-right">
+                        {new Intl.NumberFormat('vi-VN').format(item.priceVND)}
                       </TableCell>
-                      <TableCell className="hidden lg:table-cell">
-                        <span className="text-sm">{item.sellerName}</span>
+                      <TableCell className="hidden lg:table-cell text-sm text-foreground-muted">
+                        {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>
-                        <div className="flex justify-end gap-1">
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            title="Duyệt"
-                            onClick={() => {
-                              setApproveDialog(item.listingId);
-                              setApproveNotes('');
-                            }}
-                          >
-                            <CheckCircle className="h-4 w-4 text-green-600" />
-                          </Button>
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            title="Từ chối"
-                            onClick={() => {
-                              setRejectDialog(item.listingId);
-                              setRejectReason('');
-                            }}
-                          >
-                            <XCircle className="h-4 w-4 text-red-600" />
-                          </Button>
-                        </div>
-                      </TableCell>
+                      {isActionable && (
+                        <TableCell>
+                          <div className="flex justify-end gap-1">
+                            <button
+                              title="Duyệt"
+                              onClick={() => { setApproveDialog(item.listingId); setApproveNotes(''); }}
+                              className="rounded p-1 text-signal-up hover:bg-signal-up/10 transition-colors"
+                              aria-label={`Duyệt tin: ${item.propertyTitle}`}
+                            >
+                              <CheckCircle className="h-4 w-4" />
+                            </button>
+                            <button
+                              title="Từ chối"
+                              onClick={() => { setRejectDialog(item.listingId); setRejectReason(''); }}
+                              className="rounded p-1 text-signal-down hover:bg-signal-down/10 transition-colors"
+                              aria-label={`Từ chối tin: ${item.propertyTitle}`}
+                            >
+                              <XCircle className="h-4 w-4" />
+                            </button>
+                            <button
+                              title="Gắn cờ"
+                              className="rounded p-1 text-signal-neutral hover:bg-signal-neutral/10 transition-colors"
+                              aria-label={`Gắn cờ tin: ${item.propertyTitle}`}
+                            >
+                              <Flag className="h-4 w-4" />
+                            </button>
+                          </div>
+                        </TableCell>
+                      )}
                     </TableRow>
                   ))}
                 </TableBody>
               </Table>
 
               {result.totalPages > 1 && (
-                <div className="flex items-center justify-between border-t px-4 py-3">
-                  <span className="text-sm text-muted-foreground">
-                    Trang {result.page}/{result.totalPages} ({result.total} tin)
+                <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} tin
                   </span>
                   <div className="flex gap-1">
-                    <Button
-                      variant="outline"
-                      size="icon"
-                      disabled={page <= 1}
-                      onClick={() => setPage((p) => p - 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)}
-                    >
+                    <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>
 
+      {/* 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>
-              Tin đăng sẽ được hiển thị công khai sau khi duyệt.
-            </DialogDescription>
+            <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)}>
-              Hủy
-            </Button>
+            <Button variant="outline" onClick={() => setApproveDialog(null)}>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>
-              Vui lòng nhập lý do từ chối. Người đăng sẽ nhận được thông báo.
-            </DialogDescription>
+            <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)}>
-              Hủy
-            </Button>
-            <Button
-              variant="destructive"
-              onClick={handleReject}
-              disabled={actionLoading || !rejectReason.trim()}
-            >
+            <Button variant="outline" onClick={() => setRejectDialog(null)}>Hủy</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)}>
-              Hủy
-            </Button>
+            <Button variant="outline" onClick={() => setBulkAction(null)}>Hủy</Button>
             <Button
               variant={bulkAction === 'reject' ? 'destructive' : 'default'}
               onClick={handleBulkAction}