feat(web): add shared primitive components — TEC-3063

Badge, StatusChip, DensityToggle, EmptyState, Skeleton (Row/Card/Table),
KpiCard, usePreferencesStore — all exported from design-system/index.ts.
47 unit tests passing.

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 items-start justify-between">
+    <div className="flex flex-col gap-4 p-4">
+      {/* Identity */}
+      <div className="flex items-start justify-between gap-2">
         <div>
-          <h3 className="text-lg font-semibold">{item.fullName}</h3>
-          <p className="text-sm text-muted-foreground">{item.phone}</p>
-          {item.email && (
-            <p className="text-sm text-muted-foreground">{item.email}</p>
-          )}
+          <div className="font-semibold text-sm">{item.fullName}</div>
+          <div className="text-xs text-foreground-muted mt-0.5">{item.phone}</div>
+          {item.email && <div className="text-xs text-foreground-dim">{item.email}</div>}
         </div>
-        {kycStatusBadge(item.kycStatus)}
+        <StatusChip status={kycStatusToPropertyStatus(item.kycStatus)} />
       </div>
 
-      <div className="grid grid-cols-2 gap-3">
-        <div className="rounded-md border p-3">
-          <div className="text-xs text-muted-foreground">Vai trò</div>
-          <div className="mt-1 text-sm font-medium">{item.role}</div>
-        </div>
-        <div className="rounded-md border p-3">
-          <div className="text-xs text-muted-foreground">Ngày gửi</div>
-          <div className="mt-1 text-sm font-medium">
-            {new Date(item.createdAt).toLocaleDateString('vi-VN')}
+      {/* Meta grid */}
+      <div className="grid grid-cols-2 gap-2">
+        <div className="rounded-md border border-border bg-background-surface p-2.5">
+          <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 border-border bg-background-surface p-2.5">
+          <div className="text-xs text-foreground-dim mb-1">Ngày gửi</div>
+          <div className="font-mono text-data-sm">{new Date(item.createdAt).toLocaleDateString('vi-VN')}</div>
         </div>
       </div>
 
+      {/* KYC data */}
       {kycData && (
-        <div className="space-y-3">
-          <h4 className="text-sm font-medium">Thông tin KYC</h4>
+        <div className="flex flex-col gap-3">
+          <div className="text-xs font-semibold uppercase tracking-widest text-foreground-dim">Tài liệu KYC</div>
+
+          {(kycData.idType || kycData.idNumber) && (
+            <div className="grid grid-cols-2 gap-2">
               {kycData.idType && (
-            <div className="rounded-md border p-3">
-              <div className="text-xs text-muted-foreground">Loại giấy tờ</div>
-              <div className="mt-1 text-sm font-medium">{kycData.idType}</div>
+                <div className="rounded border border-border p-2">
+                  <div className="text-xs text-foreground-dim">Loại giấy tờ</div>
+                  <div className="mt-0.5 text-sm font-medium">{kycData.idType}</div>
                 </div>
               )}
               {kycData.idNumber && (
-            <div className="rounded-md border p-3">
-              <div className="text-xs text-muted-foreground">Số giấy tờ</div>
-              <div className="mt-1 text-sm font-medium">{kycData.idNumber}</div>
+                <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 && (
-              <div className="space-y-1">
-                <div className="text-xs text-muted-foreground">Mặt trước</div>
-                <div className="relative aspect-video overflow-hidden rounded-md border bg-muted">
+          {[
+            { url: kycData.frontImageUrl, label: 'Mặt trước CCCD/CMND' },
+            { url: kycData.backImageUrl, label: 'Mặt sau CCCD/CMND' },
+            { url: kycData.selfieUrl, label: 'Ảnh selfie xác nhận' },
+          ].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}
-                    alt="Mặt trước giấy tờ"
+                    src={url}
+                    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">
-          <Button className="flex-1" onClick={onApprove}>
-            <CheckCircle className="mr-2 h-4 w-4" />
+        <div className="flex gap-2 pt-1">
+          <Button className="flex-1" size="sm" onClick={onApprove}>
+            <CheckCircle className="mr-1.5 h-3.5 w-3.5" />
             Duyệt KYC
           </Button>
-          <Button variant="destructive" className="flex-1" onClick={onReject}>
-            <XCircle className="mr-2 h-4 w-4" />
+          <Button variant="destructive" className="flex-1" size="sm" onClick={onReject}>
+            <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,49 +214,44 @@ export default function AdminKycPage() {
 
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-bold tracking-tight">Duyệt KYC</h1>
-          <p className="text-sm text-muted-foreground">
-            Xác minh danh tính người dùng và đại lý
-          </p>
+          <h1 className="text-heading-md font-semibold tracking-tight">Duyệt KYC</h1>
+          <p className="text-sm text-foreground-muted">Xác minh danh tính người dùng và đại lý</p>
         </div>
-        <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 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}>
-                  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">
-                <ShieldCheck className="h-8 w-8 text-green-500" />
-                <p className="text-sm text-muted-foreground">
-                  Không có yêu cầu KYC nào đang chờ
-                </p>
+                <ShieldCheck className="h-8 w-8 text-signal-up" />
+                <p className="text-sm text-foreground-muted">Không có yêu cầu KYC nào đang chờ</p>
               </div>
             ) : (
               <>
+                <div className="overflow-x-auto">
                   <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead>Họ tên</TableHead>
-                      <TableHead className="hidden sm:table-cell">SĐT</TableHead>
-                      <TableHead>Vai trò</TableHead>
-                      <TableHead>Trạng thái</TableHead>
-                      <TableHead className="hidden md:table-cell">Ngày gửi</TableHead>
+                    <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">Họ tên</TableHead>
+                        <TableHead className="hidden sm:table-cell text-heading-xs uppercase text-foreground-muted">SĐT</TableHead>
+                        <TableHead className="text-heading-xs uppercase text-foreground-muted">Vai trò</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 gửi</TableHead>
                         <TableHead className="w-10"></TableHead>
                       </TableRow>
                     </TableHeader>
@@ -288,51 +259,52 @@ export default function AdminKycPage() {
                       {result.data.map((item) => (
                         <TableRow
                           key={item.userId}
-                        className={`cursor-pointer ${selectedItem?.userId === item.userId ? 'bg-muted/50' : ''}`}
                           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="font-medium">{item.fullName}</div>
+                            <div className="text-sm font-medium">{item.fullName}</div>
                             {item.email && (
-                            <div className="text-xs text-muted-foreground">{item.email}</div>
+                              <div className="text-xs text-foreground-dim">{item.email}</div>
                             )}
                           </TableCell>
-                        <TableCell className="hidden sm:table-cell">{item.phone}</TableCell>
-                        <TableCell>
-                          <Badge variant="outline">{item.role}</Badge>
+                          <TableCell className="hidden sm:table-cell font-mono text-data-sm text-foreground-muted">
+                            {item.phone}
                           </TableCell>
-                        <TableCell>{kycStatusBadge(item.kycStatus)}</TableCell>
-                        <TableCell className="hidden md:table-cell text-sm text-muted-foreground">
+                          <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>
-                          <FileText className="h-4 w-4 text-muted-foreground" />
+                            <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">
-                    <span className="text-sm text-muted-foreground">
-                      Trang {result.page}/{result.totalPages} ({result.total} yêu cầu)
+                  <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} yêu cầu
                     </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>
@@ -343,24 +315,18 @@ export default function AdminKycPage() {
           </CardContent>
         </Card>
 
-        {/* Detail sidebar */}
+        {/* Detail panel */}
         <div className="hidden lg:block">
-          <Card>
-            <CardContent className="p-4">
+          <Card className="shadow-elevation-1 sticky top-20">
+            <CardContent className="p-0">
               {selectedItem ? (
-                <KycDetailView
+                <KycDetailPanel
                   item={selectedItem}
-                  onApprove={() => {
-                    setApproveDialog(selectedItem.userId);
-                    setApproveNotes('');
-                  }}
-                  onReject={() => {
-                    setRejectDialog(selectedItem.userId);
-                    setRejectReason('');
-                  }}
+                  onApprove={() => { setApproveDialog(selectedItem.userId); 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>
-              Xác nhận danh tính người dùng đã được xác minh thành công.
-            </DialogDescription>
+            <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)}>
-              Hủy
-            </Button>
+            <Button variant="outline" onClick={() => setApproveDialog(null)}>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>
-              Vui lòng nhập lý do từ chối. Người dùng sẽ cần gửi lại hồ sơ.
-            </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>
           </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)}>
-              Hủy
-            </Button>
+            <Button variant="outline" onClick={() => setRejectDialog(null)}>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) {
-  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">
+                <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-input"
+                          className="rounded border-border"
                           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>
+                    )}
+                    <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}>
-                      <TableCell>
+                    <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-input"
+                            className="rounded border-border"
                             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>
+                      {isActionable && (
                         <TableCell>
                           <div className="flex justify-end gap-1">
-                          <Button
-                            variant="ghost"
-                            size="icon"
+                            <button
                               title="Duyệt"
-                            onClick={() => {
-                              setApproveDialog(item.listingId);
-                              setApproveNotes('');
-                            }}
+                              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 text-green-600" />
-                          </Button>
-                          <Button
-                            variant="ghost"
-                            size="icon"
+                              <CheckCircle className="h-4 w-4" />
+                            </button>
+                            <button
                               title="Từ chối"
-                            onClick={() => {
-                              setRejectDialog(item.listingId);
-                              setRejectReason('');
-                            }}
+                              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 text-red-600" />
-                          </Button>
+                              <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}

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/components/design-system/__tests__/badge.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Badge } from '../badge';
+
+describe('Badge', () => {
+  it('renders children', () => {
+    render(<Badge>Test</Badge>);
+    expect(screen.getByText('Test')).toBeInTheDocument();
+  });
+
+  it('applies default variant classes', () => {
+    const { container } = render(<Badge>Default</Badge>);
+    const badge = container.firstChild as HTMLElement;
+    expect(badge).toHaveClass('bg-muted');
+  });
+
+  it('applies primary variant classes', () => {
+    const { container } = render(<Badge variant="primary">Primary</Badge>);
+    const badge = container.firstChild as HTMLElement;
+    expect(badge).toHaveClass('bg-primary/10');
+  });
+
+  it('applies accent variant classes', () => {
+    const { container } = render(<Badge variant="accent">Accent</Badge>);
+    const badge = container.firstChild as HTMLElement;
+    expect(badge).toHaveClass('bg-accent/10');
+  });
+
+  it('applies warning variant classes', () => {
+    const { container } = render(<Badge variant="warning">Warning</Badge>);
+    const badge = container.firstChild as HTMLElement;
+    expect(badge).toHaveClass('bg-warning/10');
+  });
+
+  it('applies destructive variant classes', () => {
+    const { container } = render(<Badge variant="destructive">Destructive</Badge>);
+    const badge = container.firstChild as HTMLElement;
+    expect(badge).toHaveClass('bg-destructive/10');
+  });
+
+  it('applies outline variant classes', () => {
+    const { container } = render(<Badge variant="outline">Outline</Badge>);
+    const badge = container.firstChild as HTMLElement;
+    expect(badge).toHaveClass('bg-transparent');
+  });
+
+  it('merges custom className', () => {
+    const { container } = render(<Badge className="my-custom">X</Badge>);
+    expect((container.firstChild as HTMLElement)).toHaveClass('my-custom');
+  });
+});

apps/web/components/design-system/__tests__/density-toggle.test.tsx

@@ -0,0 +1,55 @@
+/* eslint-disable import-x/order */
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+
+// ─── Mock preferences-store before module load ───────────────────────────────
+const toggleDensityMock = vi.fn();
+const setDensityMock = vi.fn();
+let mockDensity: 'compact' | 'regular' = 'regular';
+
+vi.mock('@/lib/preferences-store', () => ({
+  usePreferencesStore: () => ({
+    density: mockDensity,
+    toggleDensity: toggleDensityMock,
+    setDensity: setDensityMock,
+  }),
+}));
+
+import { DensityToggle } from '../density-toggle';
+
+describe('DensityToggle', () => {
+  beforeEach(() => {
+    mockDensity = 'regular';
+    toggleDensityMock.mockReset();
+    toggleDensityMock.mockImplementation(() => {
+      mockDensity = mockDensity === 'compact' ? 'regular' : 'compact';
+    });
+  });
+
+  it('renders a button with role switch', () => {
+    render(<DensityToggle />);
+    expect(screen.getByRole('switch')).toBeInTheDocument();
+  });
+
+  it('aria-checked=false when density is regular', () => {
+    render(<DensityToggle />);
+    expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'false');
+  });
+
+  it('aria-checked=true when density is compact', () => {
+    mockDensity = 'compact';
+    render(<DensityToggle />);
+    expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'true');
+  });
+
+  it('calls toggleDensity on click', () => {
+    render(<DensityToggle />);
+    fireEvent.click(screen.getByRole('switch'));
+    expect(toggleDensityMock).toHaveBeenCalledOnce();
+  });
+
+  it('shows custom aria-label when provided', () => {
+    render(<DensityToggle label="Custom label" />);
+    expect(screen.getByLabelText('Custom label')).toBeInTheDocument();
+  });
+});

apps/web/components/design-system/__tests__/empty-state.test.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { EmptyState } from '../empty-state';
+
+describe('EmptyState', () => {
+  it('renders title', () => {
+    render(<EmptyState title="Không có dữ liệu" />);
+    expect(screen.getByText('Không có dữ liệu')).toBeInTheDocument();
+  });
+
+  it('renders description when provided', () => {
+    render(<EmptyState title="Empty" description="Hãy thêm dữ liệu mới" />);
+    expect(screen.getByText('Hãy thêm dữ liệu mới')).toBeInTheDocument();
+  });
+
+  it('does not render description when not provided', () => {
+    render(<EmptyState title="Empty" />);
+    expect(screen.queryByText(/Hãy/)).not.toBeInTheDocument();
+  });
+
+  it('renders icon when provided', () => {
+    render(<EmptyState title="Empty" icon={<span data-testid="icon">X</span>} />);
+    expect(screen.getByTestId('icon')).toBeInTheDocument();
+  });
+
+  it('renders action when provided', () => {
+    render(<EmptyState title="Empty" action={<button>Thêm mới</button>} />);
+    expect(screen.getByRole('button', { name: 'Thêm mới' })).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<EmptyState title="X" className="my-class" />);
+    expect((container.firstChild as HTMLElement)).toHaveClass('my-class');
+  });
+});

apps/web/components/design-system/__tests__/kpi-card.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { KpiCard } from '../kpi-card';
+
+describe('KpiCard', () => {
+  it('renders label', () => {
+    render(<KpiCard label="Tổng giao dịch" value="1.234" />);
+    expect(screen.getByText('Tổng giao dịch')).toBeInTheDocument();
+  });
+
+  it('renders value', () => {
+    render(<KpiCard label="Label" value="9.8 tỷ" />);
+    expect(screen.getByText('9.8 tỷ')).toBeInTheDocument();
+  });
+
+  it('renders delta when provided', () => {
+    render(<KpiCard label="L" value="V" delta={3.5} />);
+    expect(screen.getByText('+3.50%')).toBeInTheDocument();
+  });
+
+  it('renders footnote when provided', () => {
+    render(<KpiCard label="L" value="V" footnote="So với tháng trước" />);
+    expect(screen.getByText('So với tháng trước')).toBeInTheDocument();
+  });
+
+  it('renders icon when provided', () => {
+    render(<KpiCard label="L" value="V" icon={<span data-testid="icon">★</span>} />);
+    expect(screen.getByTestId('icon')).toBeInTheDocument();
+  });
+
+  it('renders loading skeleton when loading=true', () => {
+    const { container } = render(<KpiCard label="L" value="V" loading />);
+    expect(container.querySelector('[aria-busy]')).toBeInTheDocument();
+    expect(screen.queryByText('L')).not.toBeInTheDocument();
+  });
+
+  it('does not render delta when not provided', () => {
+    render(<KpiCard label="L" value="V" />);
+    expect(screen.queryByText(/%/)).not.toBeInTheDocument();
+  });
+});

apps/web/components/design-system/__tests__/skeleton.test.tsx

@@ -0,0 +1,43 @@
+import { render } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Skeleton } from '../skeleton';
+
+describe('Skeleton', () => {
+  it('renders base skeleton with aria-hidden', () => {
+    const { container } = render(<Skeleton />);
+    expect((container.firstChild as HTMLElement)).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('base skeleton has animate-pulse class', () => {
+    const { container } = render(<Skeleton />);
+    expect((container.firstChild as HTMLElement)).toHaveClass('animate-pulse');
+  });
+
+  it('Skeleton.Row renders with aria-hidden', () => {
+    const { container } = render(<Skeleton.Row />);
+    expect(container.querySelector('[aria-hidden]')).toBeInTheDocument();
+  });
+
+  it('Skeleton.Card renders with aria-hidden', () => {
+    const { container } = render(<Skeleton.Card />);
+    expect(container.querySelector('[aria-hidden]')).toBeInTheDocument();
+  });
+
+  it('Skeleton.Table renders default 5 rows + header', () => {
+    const { container } = render(<Skeleton.Table />);
+    // 1 header div + 5 SkeletonRow divs = 6 children
+    const wrapper = container.firstChild as HTMLElement;
+    expect(wrapper.children.length).toBe(6);
+  });
+
+  it('Skeleton.Table renders custom rows count', () => {
+    const { container } = render(<Skeleton.Table rows={3} />);
+    const wrapper = container.firstChild as HTMLElement;
+    expect(wrapper.children.length).toBe(4); // 1 header + 3 rows
+  });
+
+  it('merges custom className', () => {
+    const { container } = render(<Skeleton className="custom-class" />);
+    expect((container.firstChild as HTMLElement)).toHaveClass('custom-class');
+  });
+});

apps/web/components/design-system/__tests__/status-chip.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { StatusChip, type PropertyStatus } from '../status-chip';
+
+const statuses: PropertyStatus[] = ['active', 'pending', 'sold', 'rented', 'rejected', 'draft'];
+
+describe('StatusChip', () => {
+  it.each(statuses)('renders label for status "%s"', (status) => {
+    const { container } = render(<StatusChip status={status} />);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
+  it('renders Vietnamese label for active', () => {
+    render(<StatusChip status="active" />);
+    expect(screen.getByText('Đang bán')).toBeInTheDocument();
+  });
+
+  it('renders Vietnamese label for pending', () => {
+    render(<StatusChip status="pending" />);
+    expect(screen.getByText('Chờ duyệt')).toBeInTheDocument();
+  });
+
+  it('renders Vietnamese label for sold', () => {
+    render(<StatusChip status="sold" />);
+    expect(screen.getByText('Đã bán')).toBeInTheDocument();
+  });
+
+  it('renders Vietnamese label for rented', () => {
+    render(<StatusChip status="rented" />);
+    expect(screen.getByText('Đã thuê')).toBeInTheDocument();
+  });
+
+  it('renders Vietnamese label for rejected', () => {
+    render(<StatusChip status="rejected" />);
+    expect(screen.getByText('Từ chối')).toBeInTheDocument();
+  });
+
+  it('renders Vietnamese label for draft', () => {
+    render(<StatusChip status="draft" />);
+    expect(screen.getByText('Bản nháp')).toBeInTheDocument();
+  });
+
+  it('renders dot by default', () => {
+    const { container } = render(<StatusChip status="active" />);
+    // dot is aria-hidden span
+    const dot = container.querySelector('[aria-hidden]');
+    expect(dot).toBeInTheDocument();
+  });
+
+  it('hides dot when hideDot=true', () => {
+    const { container } = render(<StatusChip status="active" hideDot />);
+    const dot = container.querySelector('[aria-hidden]');
+    expect(dot).not.toBeInTheDocument();
+  });
+});

apps/web/components/design-system/badge.tsx

@@ -0,0 +1,40 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium ring-1 ring-inset transition-colors',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-muted text-foreground ring-border',
+        primary:
+          'bg-primary/10 text-primary ring-primary/20',
+        accent:
+          'bg-accent/10 text-accent ring-accent/20',
+        warning:
+          'bg-warning/10 text-warning ring-warning/20',
+        destructive:
+          'bg-destructive/10 text-destructive ring-destructive/20',
+        outline:
+          'bg-transparent text-foreground ring-border',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {}
+
+/**
+ * Badge — nhãn nhỏ dùng để đánh nhãn nội dung.
+ * Variants: default | primary | accent | warning | destructive | outline
+ */
+export function Badge({ className, variant, ...props }: BadgeProps) {
+  return <span className={cn(badgeVariants({ variant }), className)} {...props} />;
+}

apps/web/components/design-system/density-toggle.tsx

@@ -0,0 +1,42 @@
+import { LayoutList, LayoutGrid } from 'lucide-react';
+import * as React from 'react';
+import { usePreferencesStore } from '@/lib/preferences-store';
+import { cn } from '@/lib/utils';
+
+export interface DensityToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Override label aria-label */
+  label?: string;
+}
+
+/**
+ * DensityToggle — nút chuyển đổi giữa chế độ compact / regular.
+ * Trạng thái lưu vào `usePreferencesStore`.
+ */
+export function DensityToggle({ label, className, ...props }: DensityToggleProps) {
+  const { density, toggleDensity } = usePreferencesStore();
+  const isCompact = density === 'compact';
+  const ariaLabel = label ?? (isCompact ? 'Chuyển sang chế độ thường' : 'Chuyển sang chế độ compact');
+
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={isCompact}
+      aria-label={ariaLabel}
+      onClick={toggleDensity}
+      className={cn(
+        'inline-flex h-8 w-8 items-center justify-center rounded-md text-foreground-muted transition-colors',
+        'hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        isCompact && 'bg-muted text-foreground',
+        className,
+      )}
+      {...props}
+    >
+      {isCompact ? (
+        <LayoutList className="h-4 w-4" aria-hidden />
+      ) : (
+        <LayoutGrid className="h-4 w-4" aria-hidden />
+      )}
+    </button>
+  );
+}

apps/web/components/design-system/empty-state.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Tiêu đề thông báo */
+  title: string;
+  /** Mô tả phụ */
+  description?: string;
+  /** Icon hoặc illustration */
+  icon?: React.ReactNode;
+  /** CTA tuỳ chọn */
+  action?: React.ReactNode;
+}
+
+/**
+ * EmptyState — hiển thị khi danh sách/bảng không có dữ liệu.
+ */
+export function EmptyState({ title, description, icon, action, className, ...props }: EmptyStateProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col items-center justify-center gap-4 py-16 text-center',
+        className,
+      )}
+      {...props}
+    >
+      {icon && (
+        <div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted text-foreground-muted">
+          {icon}
+        </div>
+      )}
+      <div className="max-w-xs space-y-1">
+        <p className="text-sm font-medium text-foreground">{title}</p>
+        {description && (
+          <p className="text-xs text-foreground-muted">{description}</p>
+        )}
+      </div>
+      {action && <div>{action}</div>}
+    </div>
+  );
+}

apps/web/components/design-system/kpi-card.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import { PriceDelta } from './price-delta';
+
+export interface KpiCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Nhãn tiêu đề KPI */
+  label: string;
+  /** Giá trị chính đã được format sẵn */
+  value: React.ReactNode;
+  /** Delta % (dùng PriceDelta) */
+  delta?: number;
+  /** Hướng delta nếu muốn override */
+  deltaDirection?: 'up' | 'down' | 'neutral';
+  /** Chú thích phía dưới */
+  footnote?: string;
+  /** Icon tuỳ chọn */
+  icon?: React.ReactNode;
+  /** Đang tải */
+  loading?: boolean;
+}
+
+/**
+ * KpiCard — card số liệu nhỏ gọn: label + value + delta + footnote.
+ */
+export function KpiCard({
+  label,
+  value,
+  delta,
+  deltaDirection,
+  footnote,
+  icon,
+  loading = false,
+  className,
+  ...props
+}: KpiCardProps) {
+  if (loading) {
+    return (
+      <div
+        className={cn(
+          'rounded-lg border border-border bg-background-surface p-4 space-y-2 animate-pulse',
+          className,
+        )}
+        aria-busy
+        {...props}
+      >
+        <div className="h-3 w-24 rounded bg-muted" />
+        <div className="h-7 w-32 rounded bg-muted" />
+        <div className="h-3 w-16 rounded bg-muted" />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'rounded-lg border border-border bg-background-surface p-4 space-y-1',
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-data-sm text-foreground-muted truncate">{label}</span>
+        {icon && <span className="text-foreground-dim shrink-0">{icon}</span>}
+      </div>
+      <div className="flex items-baseline gap-2 flex-wrap">
+        <span
+          data-numeric
+          className="text-data-lg font-mono font-semibold text-foreground tabular-nums"
+        >
+          {value}
+        </span>
+        {delta !== undefined && (
+          <PriceDelta value={delta} direction={deltaDirection} size="sm" />
+        )}
+      </div>
+      {footnote && (
+        <p className="text-data-sm text-foreground-dim">{footnote}</p>
+      )}
+    </div>
+  );
+}

apps/web/components/design-system/skeleton.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+/**
+ * Skeleton base — animated pulse placeholder.
+ */
+function SkeletonBase({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn('animate-pulse rounded-md bg-muted', className)}
+      aria-hidden
+      {...props}
+    />
+  );
+}
+
+/** Skeleton.Row — một hàng text placeholder */
+function SkeletonRow({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn('flex items-center gap-3 py-2', className)} aria-hidden {...props}>
+      <SkeletonBase className="h-4 w-8 shrink-0" />
+      <SkeletonBase className="h-4 flex-1" />
+      <SkeletonBase className="h-4 w-24 shrink-0" />
+      <SkeletonBase className="h-4 w-20 shrink-0" />
+      <SkeletonBase className="h-4 w-16 shrink-0" />
+    </div>
+  );
+}
+
+/** Skeleton.Card — card placeholder */
+function SkeletonCard({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        'rounded-lg border border-border bg-background-surface p-4 space-y-3',
+        className,
+      )}
+      aria-hidden
+      {...props}
+    >
+      <SkeletonBase className="h-40 w-full" />
+      <SkeletonBase className="h-4 w-3/4" />
+      <SkeletonBase className="h-3 w-1/2" />
+      <div className="flex gap-2">
+        <SkeletonBase className="h-5 w-16" />
+        <SkeletonBase className="h-5 w-16" />
+      </div>
+    </div>
+  );
+}
+
+/** Skeleton.Table — table placeholder */
+function SkeletonTable({
+  rows = 5,
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & { rows?: number }) {
+  return (
+    <div className={cn('space-y-0', className)} aria-hidden {...props}>
+      {/* header */}
+      <div className="flex items-center gap-3 border-b border-border py-2">
+        <SkeletonBase className="h-3 w-8 shrink-0" />
+        <SkeletonBase className="h-3 flex-1" />
+        <SkeletonBase className="h-3 w-24 shrink-0" />
+        <SkeletonBase className="h-3 w-20 shrink-0" />
+        <SkeletonBase className="h-3 w-16 shrink-0" />
+      </div>
+      {Array.from({ length: rows }).map((_, i) => (
+        <SkeletonRow key={i} />
+      ))}
+    </div>
+  );
+}
+
+export const Skeleton = Object.assign(SkeletonBase, {
+  Row: SkeletonRow,
+  Card: SkeletonCard,
+  Table: SkeletonTable,
+});
+
+export type SkeletonProps = React.HTMLAttributes<HTMLDivElement>;

apps/web/components/design-system/status-chip.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export type PropertyStatus =
+  | 'active'
+  | 'pending'
+  | 'sold'
+  | 'rented'
+  | 'rejected'
+  | 'draft';
+
+const STATUS_CONFIG: Record<
+  PropertyStatus,
+  { label: string; colorClass: string; dotClass: string }
+> = {
+  active: {
+    label: 'Đang bán',
+    colorClass: 'bg-signal-up-bg text-signal-up ring-signal-up/20',
+    dotClass: 'bg-signal-up',
+  },
+  pending: {
+    label: 'Chờ duyệt',
+    colorClass: 'bg-warning/10 text-warning ring-warning/20',
+    dotClass: 'bg-warning',
+  },
+  sold: {
+    label: 'Đã bán',
+    colorClass: 'bg-muted text-foreground-muted ring-border',
+    dotClass: 'bg-foreground-muted',
+  },
+  rented: {
+    label: 'Đã thuê',
+    colorClass: 'bg-accent-blue/10 text-accent-blue ring-accent-blue/20',
+    dotClass: 'bg-accent-blue',
+  },
+  rejected: {
+    label: 'Từ chối',
+    colorClass: 'bg-destructive/10 text-destructive ring-destructive/20',
+    dotClass: 'bg-destructive',
+  },
+  draft: {
+    label: 'Bản nháp',
+    colorClass: 'bg-muted text-foreground-dim ring-border',
+    dotClass: 'bg-foreground-dim',
+  },
+};
+
+export interface StatusChipProps extends React.HTMLAttributes<HTMLSpanElement> {
+  status: PropertyStatus;
+  /** Ẩn dot indicator */
+  hideDot?: boolean;
+}
+
+/**
+ * StatusChip — hiển thị trạng thái bất động sản với màu sắc và nhãn tiếng Việt.
+ */
+export function StatusChip({ status, hideDot = false, className, ...props }: StatusChipProps) {
+  const cfg = STATUS_CONFIG[status];
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium ring-1 ring-inset',
+        cfg.colorClass,
+        className,
+      )}
+      {...props}
+    >
+      {!hideDot && (
+        <span className={cn('h-1.5 w-1.5 rounded-full', cfg.dotClass)} aria-hidden />
+      )}
+      {cfg.label}
+    </span>
+  );
+}

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'),
 

apps/web/lib/preferences-store.ts

@@ -0,0 +1,22 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export type Density = 'compact' | 'regular';
+
+interface PreferencesState {
+  density: Density;
+  setDensity: (density: Density) => void;
+  toggleDensity: () => void;
+}
+
+export const usePreferencesStore = create<PreferencesState>()(
+  persist(
+    (set, get) => ({
+      density: 'regular',
+      setDensity: (density) => set({ density }),
+      toggleDensity: () =>
+        set({ density: get().density === 'compact' ? 'regular' : 'compact' }),
+    }),
+    { name: 'goodgo-preferences' },
+  ),
+);