@goplusvn/core 0.1.70 → 0.1.71

package/src/guardrails/rules/auth.ts

@@ -42,6 +42,26 @@ function publicPrefixes(ctx: GuardrailContext): string[] {
   );
 }
 
+/**
+ * MỌI tiền tố trong danh sách công khai của proxy.ts — kể cả ngoài /api
+ * (/pub, /iclock, webhook…). Chỉ đọc bên trong mảng `publicPrefixes:`/
+ * `publicApiPrefixes:` chứ không vơ mọi chuỗi (signInPath/homePath không phải
+ * tuyên bố công khai).
+ */
+function declaredPublicPrefixes(ctx: GuardrailContext): string[] {
+  if (!ctx.existsInSrc("proxy.ts")) return [];
+  const code = ctx.readCodeRel("proxy.ts");
+  const out: string[] = [];
+  for (const m of code.matchAll(
+    /public(?:Api)?Prefixes\s*:\s*\[([^\]]*)\]/g,
+  )) {
+    for (const s of m[1].matchAll(/["'](\/[^"']*)["']/g)) {
+      out.push(s[1].replace(/\/$/, ""));
+    }
+  }
+  return out;
+}
+
 function gateSources(ctx: GuardrailContext, code: string): string[] {
   const targets = [...code.matchAll(/export \* from ["']@\/([^"']+)["']/g)].map(
     (m) => m[1],
@@ -77,7 +97,8 @@ export const authRules: GuardrailRule[] = [
       // Hai lối dựng đều hợp lệ: factory của core, hoặc bản tự dựng của app.
       // Ràng cứng vào một lối là bắt app phải giống hệt vinhhoa về CÁCH VIẾT,
       // trong khi thứ cần ràng là TÍNH CHẤT: /api chặn trước, công khai phải khai.
-      const viaCore = /createAuthProxy\s*\(/.test(code) && /publicApiPrefixes/.test(code);
+      const viaCore =
+        /createAuthProxy\s*\(/.test(code) && /public(?:Api)?Prefixes/.test(code);
       const handRolled =
         /getSessionCookie/.test(code) &&
         /pathname\.startsWith\(["']\/api["']\)/.test(code) &&
@@ -151,6 +172,38 @@ export const authRules: GuardrailRule[] = [
     },
   },
 
+  {
+    id: "auth/route-outside-api-declared",
+    title: "route.ts NGOÀI app/api phải khai tiền tố trong danh sách công khai của proxy, hoặc tự gác",
+    why:
+      "Endpoint server ngoài /api (route thiết bị /pub, /iclock của spartronics; " +
+      "webhook đặt ngoài /api…) từng VÔ HÌNH với mọi thước: rule api-route-gated " +
+      "chỉ quét app/api/**, còn proxy mặc-định-chặn thì các route này lại cần được " +
+      "MỞ — một bề mặt công khai không ai review thấy.",
+    fix: "Thêm tiền tố vào `publicPrefixes` trong src/proxy.ts kèm ghi rõ nó tự xác thực bằng gì (allowlist serial, HMAC…), hoặc bọc cổng như route API thường.",
+    run(ctx) {
+      const routes = ctx.files
+        .map(ctx.rel)
+        .filter(
+          (rel) =>
+            rel.startsWith("app/") &&
+            rel.endsWith("/route.ts") &&
+            !rel.startsWith("app/api/"),
+        );
+      if (routes.length === 0) return null;
+      const publics = declaredPublicPrefixes(ctx);
+      const allowed = new Set(
+        ctx.options.allowlists["auth/route-outside-api-declared"] ?? [],
+      );
+      return routes.filter((rel) => {
+        if (allowed.has(rel)) return false;
+        const url = routeUrl(rel);
+        if (publics.some((p) => url === p || url.startsWith(`${p}/`))) return false;
+        return !gateSources(ctx, ctx.readCodeRel(rel)).some((src) => GATED.test(src));
+      });
+    },
+  },
+
   forbidPattern({
     id: "auth/server-action-bare-session",
     title: "file 'use server' không gọi getSession trần — dùng requirePermission",

package/src/guardrails/types.ts

@@ -81,9 +81,9 @@ export interface GuardrailOptions {
    * Registry quyền của app (`src/configs/permissions`). Thiếu thì nhóm rule
    * `rbac/*` tự bỏ qua.
    */
-  permissionRegistry?: PermissionFeatureLike[];
+  permissionRegistry?: readonly PermissionFeatureLike[];
   /** Cây menu (`src/data/navigations`). Thiếu thì rule nav tự bỏ qua. */
-  navigations?: NavigationGroupLike[];
+  navigations?: readonly NavigationGroupLike[];
   /**
    * Bộ action ai cũng hiểu. PHẢI trùng danh sách trong `scripts/rbac-sync.ts`
    * của app — lệch nhau thì test xanh mà seed ném lỗi lúc deploy.
@@ -158,17 +158,26 @@ export type ResolvedGuardrailOptions = GuardrailOptions &
  * guardrails không kéo theo phụ thuộc ngược lên tầng config.
  */
 export interface PermissionFeatureLike {
-  resources: Array<{
+  resources: ReadonlyArray<{
     code: string;
-    actions: string[];
-    defaultGrants?: Record<string, string[] | "*">;
+    actions: readonly string[];
+    defaultGrants?: Readonly<Record<string, readonly string[] | "*">>;
   }>;
-  customActions?: Array<{ code: string }>;
+  customActions?: ReadonlyArray<{ code: string }>;
+}
+
+/**
+ * CHỈ khai trường rule thật sự đọc, KHÔNG index signature: một interface cụ
+ * thể (NavigationType của app) gán vào đây được theo structural typing, còn
+ * `[key: string]: unknown` thì bắt app phải có index signature — chính là lỗi
+ * TS mà template dính ngay sau init (pilot spartronics 2026-08-07).
+ */
+export interface NavigationItemLike {
+  resource?: string;
 }
 
 export interface NavigationGroupLike {
-  items?: Array<{ resource?: string; [key: string]: unknown }>;
-  [key: string]: unknown;
+  items?: readonly NavigationItemLike[];
 }
 
 /** Kết quả chạy một rule — dùng cho `goerp doctor` (không cần vitest). */

package/src/providers/brand-theme.ts

@@ -20,6 +20,26 @@ export interface BrandThemeColor {
   sidebarDark: string;
 }
 
+/**
+ * Bảng màu thương hiệu CALIBRATE SẴN, khớp 1-1 với swatch trong
+ * `configs/themes.ts` — app mới dùng thẳng (theme-provider của starter-app),
+ * app muốn nắn tay từng hue (như vinhhoa) thì giữ bảng riêng và bỏ qua cái này.
+ */
+export const THEME_PRESETS: Record<string, BrandThemeColor> = {
+  zinc: { primary: "235 12% 27%", primaryDark: "235 10% 62%", fg: "0 0% 98%", sidebar: "235 18% 15%", sidebarDark: "235 16% 9%" },
+  slate: { primary: "213 30% 42%", primaryDark: "213 26% 64%", fg: "0 0% 100%", sidebar: "214 36% 19%", sidebarDark: "214 32% 12%" },
+  stone: { primary: "26 20% 40%", primaryDark: "28 16% 62%", fg: "0 0% 98%", sidebar: "26 28% 18%", sidebarDark: "26 24% 11%" },
+  gray: { primary: "218 9% 48%", primaryDark: "218 9% 68%", fg: "0 0% 100%", sidebar: "218 16% 19%", sidebarDark: "218 14% 12%" },
+  neutral: { primary: "0 0% 42%", primaryDark: "0 0% 66%", fg: "0 0% 100%", sidebar: "0 0% 16%", sidebarDark: "0 0% 9%" },
+  red: { primary: "4 78% 50%", primaryDark: "6 84% 62%", fg: "0 0% 100%", sidebar: "356 62% 28%", sidebarDark: "356 58% 16%" },
+  rose: { primary: "338 80% 53%", primaryDark: "340 80% 63%", fg: "0 0% 100%", sidebar: "338 56% 28%", sidebarDark: "338 54% 16%" },
+  orange: { primary: "26 88% 47%", primaryDark: "30 92% 58%", fg: "0 0% 100%", sidebar: "20 75% 28%", sidebarDark: "22 72% 15%" },
+  green: { primary: "151 66% 38%", primaryDark: "150 58% 48%", fg: "0 0% 100%", sidebar: "156 70% 16%", sidebarDark: "158 68% 9%" },
+  blue: { primary: "233 74% 44%", primaryDark: "230 62% 60%", fg: "0 0% 100%", sidebar: "233.9 88.8% 17.5%", sidebarDark: "234 50% 10%" },
+  yellow: { primary: "42 92% 46%", primaryDark: "46 96% 56%", fg: "40 60% 12%", sidebar: "40 72% 25%", sidebarDark: "42 70% 14%" },
+  violet: { primary: "262 72% 52%", primaryDark: "263 72% 64%", fg: "0 0% 100%", sidebar: "264 56% 25%", sidebarDark: "265 52% 15%" },
+};
+
 /** Dịch lightness của "H S% L%" (cho hover/active). */
 export function shiftLightness(triple: string, delta: number): string {
   const parts = triple.trim().split(/\s+/);

package/src/rbac/pages/permission-catalog-pages.tsx

@@ -567,7 +567,9 @@ export function ResourceCatalogPage({
                                                     ?.description ||
                                                   actionName(code)
                                                 }
-                                                className="inline-flex items-center gap-1 rounded-md border border-primary/40 bg-primary/10 px-1.5 py-0.5 text-[11px] font-medium text-primary"
+                                                // Check màu đã tự nói lên trạng thái — không cần thêm khung
+                                                // viền/nền màu (nhiễu khi cả dãy chip đứng cạnh nhau).
+                                                className="inline-flex items-center gap-1 px-1 py-0.5 text-[11px] font-medium text-foreground"
                                               >
                                                 <span
                                                   className={cn(

package/src/security/index.ts

@@ -0,0 +1,2 @@
+// @goerp/core/security — trang quản trị bảo mật dùng chung (Better Auth).
+export { SessionsPage, type SessionsPageProps } from "./pages/sessions-page"

package/src/security/pages/sessions-page.tsx

@@ -0,0 +1,516 @@
+"use client"
+
+// Trang QUẢN TRỊ "Quản lý phiên đăng nhập" (Better Auth, session DB-backed) —
+// admin xem/thu hồi phiên của MỌI user. Promoted từ vinhhoa. Gate user:view ở
+// page + API (app tự gác). Data: props `apiUrl` (mặc định
+// /api/security/sessions) — app cung cấp 3 endpoint:
+//   GET    {apiUrl}?search&page&pageSize  → {items,total,page,pageSize}
+//   DELETE {apiUrl}/{id}                  → thu hồi 1 phiên
+//   POST   {apiUrl}/revoke-user {userId}  → đăng xuất mọi thiết bị của 1 user
+// Impersonation ("đăng nhập thay") là tính năng app-specific (cần authClient
+// của app) — core KHÔNG ship; app nào cần thì tự bọc thêm nút quanh trang này.
+import { useCallback, useEffect, useRef, useState } from "react"
+import { toast } from "sonner"
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  Globe,
+  Monitor,
+  MonitorSmartphone,
+  RefreshCw,
+  Search,
+  Smartphone,
+  Tablet,
+  Trash2,
+  UserX,
+  X,
+} from "lucide-react"
+
+import {
+  Badge,
+  Button,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Skeleton,
+} from "../../ui/primitives"
+import { ConfirmDialog } from "../../ui/shared/confirm-dialog"
+import { cn } from "../../utils"
+
+interface SessionRow {
+  id: string
+  userId: string
+  userName: string | null
+  userEmail: string | null
+  ipAddress: string | null
+  userAgent: string | null
+  createdAt: string
+  updatedAt: string
+  expiresAt: string
+  isCurrent: boolean
+  isMine: boolean
+  /** Plugin admin của Better Auth — app không dùng thì API cứ trả null. */
+  impersonatedBy?: string | null
+}
+
+// --- Phân tích User-Agent thô → trình duyệt + hệ điều hành + loại máy ---
+function parseUA(ua: string | null | undefined) {
+  const s = ua || ""
+  const browser = /edg\//i.test(s)
+    ? "Edge"
+    : /chrome|crios/i.test(s)
+      ? "Chrome"
+      : /firefox|fxios/i.test(s)
+        ? "Firefox"
+        : /safari/i.test(s)
+          ? "Safari"
+          : /curl/i.test(s)
+            ? "curl"
+            : "Trình duyệt khác"
+  const os = /windows/i.test(s)
+    ? "Windows"
+    : /mac os x|macintosh/i.test(s)
+      ? "macOS"
+      : /android/i.test(s)
+        ? "Android"
+        : /iphone|ipad|ios/i.test(s)
+          ? "iOS"
+          : /linux/i.test(s)
+            ? "Linux"
+            : "Không rõ"
+  const kind: "mobile" | "tablet" | "desktop" = /ipad|tablet/i.test(s)
+    ? "tablet"
+    : /mobile|iphone|android/i.test(s)
+      ? "mobile"
+      : "desktop"
+  return { browser, os, kind }
+}
+
+const KIND_ICON = {
+  mobile: Smartphone,
+  tablet: Tablet,
+  desktop: Monitor,
+} as const
+
+function formatTime(d: string) {
+  return new Date(d).toLocaleString("vi-VN", {
+    hour: "2-digit",
+    minute: "2-digit",
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+  })
+}
+
+function shortIp(ip: string | null | undefined) {
+  if (!ip) return "—"
+  if (ip === "::1" || /^0000:/.test(ip)) return "localhost"
+  return ip.replace(/^::ffff:/, "")
+}
+
+const PAGE_SIZES = [10, 20, 50]
+
+export interface SessionsPageProps {
+  /** Gốc API app cung cấp (GET list · DELETE /{id} · POST /revoke-user). */
+  apiUrl?: string
+}
+
+export function SessionsPage({
+  apiUrl = "/api/security/sessions",
+}: SessionsPageProps = {}) {
+  const [items, setItems] = useState<SessionRow[]>([])
+  const [total, setTotal] = useState(0)
+  const [search, setSearch] = useState("")
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(20)
+  const [loading, setLoading] = useState(true)
+  const [isRefreshing, setIsRefreshing] = useState(false)
+  const [busyId, setBusyId] = useState<string | null>(null)
+  const [confirmRow, setConfirmRow] = useState<SessionRow | null>(null)
+  const [confirmUser, setConfirmUser] = useState<SessionRow | null>(null)
+  const [revokingUser, setRevokingUser] = useState(false)
+
+  // Debounce tìm kiếm 350ms — chuẩn các toolbar khác
+  const searchTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const [debouncedSearch, setDebouncedSearch] = useState("")
+  useEffect(() => {
+    if (searchTimer.current) clearTimeout(searchTimer.current)
+    searchTimer.current = setTimeout(() => {
+      setDebouncedSearch(search)
+      setPage(1)
+    }, 350)
+    return () => {
+      if (searchTimer.current) clearTimeout(searchTimer.current)
+    }
+  }, [search])
+
+  const fetchData = useCallback(async () => {
+    try {
+      const params = new URLSearchParams({
+        page: String(page),
+        pageSize: String(pageSize),
+      })
+      if (debouncedSearch) params.set("search", debouncedSearch)
+      const res = await fetch(`${apiUrl}?${params}`, {
+        cache: "no-store",
+      })
+      if (!res.ok) throw new Error("Không tải được danh sách phiên")
+      const data = await res.json()
+      setItems(data.items ?? [])
+      setTotal(data.total ?? 0)
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Lỗi tải dữ liệu")
+    } finally {
+      setLoading(false)
+      setIsRefreshing(false)
+    }
+  }, [apiUrl, page, pageSize, debouncedSearch])
+
+  useEffect(() => {
+    fetchData()
+  }, [fetchData])
+
+  const handleRefresh = () => {
+    setIsRefreshing(true)
+    fetchData()
+  }
+
+  const revokeOne = async (row: SessionRow) => {
+    setBusyId(row.id)
+    try {
+      const res = await fetch(`${apiUrl}/${row.id}`, {
+        method: "DELETE",
+      })
+      if (!res.ok) {
+        const data = await res.json().catch(() => null)
+        throw new Error(data?.error || "Không thu hồi được phiên")
+      }
+      toast.success("Đã thu hồi phiên đăng nhập")
+      setConfirmRow(null)
+      await fetchData()
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Không thu hồi được phiên")
+    } finally {
+      setBusyId(null)
+    }
+  }
+
+  const revokeAllOfUser = async (row: SessionRow) => {
+    setRevokingUser(true)
+    try {
+      const res = await fetch(`${apiUrl}/revoke-user`, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ userId: row.userId }),
+      })
+      const data = await res.json().catch(() => null)
+      if (!res.ok) throw new Error(data?.error || "Không thu hồi được phiên")
+      toast.success(
+        `Đã đăng xuất ${data?.revoked ?? 0} thiết bị của ${row.userName || row.userEmail}`
+      )
+      setConfirmUser(null)
+      await fetchData()
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Không thu hồi được phiên")
+    } finally {
+      setRevokingUser(false)
+    }
+  }
+
+  const totalPages = Math.max(Math.ceil(total / pageSize), 1)
+  const fromRow = total === 0 ? 0 : (page - 1) * pageSize + 1
+  const toRow = Math.min(page * pageSize, total)
+  const isSearching = debouncedSearch.length > 0
+
+  return (
+    <div className="flex flex-col">
+      {/* ===== Bar navy 1 dòng ===== */}
+      <div className="-mx-4 -mt-4 flex flex-wrap items-center gap-1.5 bg-sidebar px-3 py-2 text-sidebar-foreground shadow-md md:-mx-8 lg:mx-3 lg:mt-1 lg:rounded-xl lg:px-4">
+        <span className="flex h-8 w-8 shrink-0 items-center justify-center">
+          <MonitorSmartphone className="h-4 w-4 text-primary-foreground/80" />
+        </span>
+        <h1 className="min-w-0 flex-1 truncate px-1 text-base font-bold text-primary-foreground sm:text-lg">
+          Quản lý phiên đăng nhập
+        </h1>
+        <span className="hidden shrink-0 text-xs tabular-nums text-primary-foreground/70 md:inline">
+          {total} phiên đang hoạt động toàn hệ thống
+        </span>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={handleRefresh}
+          disabled={isRefreshing}
+          title="Làm mới"
+          className="h-8 w-8 shrink-0 text-primary-foreground/80 hover:bg-white/10 hover:text-primary-foreground"
+        >
+          <RefreshCw
+            className={cn("h-4 w-4", isRefreshing && "animate-spin")}
+          />
+        </Button>
+      </div>
+
+      {/* ===== Khối trắng: toolbar sticky + danh sách + phân trang ===== */}
+      <div className="mt-3 overflow-hidden rounded-xl border border-border bg-card shadow-sm lg:mx-3">
+        {/* Toolbar sticky — tìm kiếm chuẩn */}
+        <div className="sticky top-0 z-20 flex flex-wrap items-center gap-2 border-b border-border bg-card/95 px-3 py-2 backdrop-blur supports-[backdrop-filter]:bg-card/85 sm:px-4">
+          <div className="relative min-w-[160px] flex-1 sm:max-w-80">
+            <Search className="pointer-events-none absolute left-2.5 top-2 h-3.5 w-3.5 text-muted-foreground" />
+            <input
+              placeholder="Tìm theo tên, email, IP, thiết bị…"
+              className="h-8 w-full rounded-md border border-border bg-card pl-8 pr-8 text-sm outline-none focus-visible:ring-1 focus-visible:ring-primary"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+            />
+            {search && (
+              <button
+                type="button"
+                onClick={() => setSearch("")}
+                className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                title="Xóa tìm kiếm"
+              >
+                <X className="h-3.5 w-3.5" />
+              </button>
+            )}
+          </div>
+          <p className="ml-auto whitespace-nowrap text-xs text-muted-foreground">
+            <span className="font-semibold tabular-nums text-foreground">
+              {total}
+            </span>{" "}
+            {isSearching ? "khớp" : "phiên"}
+          </p>
+        </div>
+
+        {/* Danh sách */}
+        {loading ? (
+          <div className="space-y-2 p-4">
+            {Array.from({ length: 5 }).map((_, i) => (
+              <Skeleton key={i} className="h-16 w-full" />
+            ))}
+          </div>
+        ) : items.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-16 text-center">
+            <Globe className="mb-3 h-6 w-6 text-muted-foreground" />
+            <p className="text-sm text-muted-foreground">
+              {isSearching
+                ? "Không có phiên nào khớp từ khóa."
+                : "Không có phiên nào đang hoạt động."}
+            </p>
+          </div>
+        ) : (
+          <ul className="divide-y divide-border">
+            {items.map((s) => {
+              const ua = parseUA(s.userAgent)
+              const KindIcon = KIND_ICON[ua.kind]
+              return (
+                <li
+                  key={s.id}
+                  className="flex items-center gap-3 bg-card px-4 py-3"
+                >
+                  <span
+                    className={cn(
+                      "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border",
+                      s.isCurrent
+                        ? "border-emerald-200 bg-emerald-50 text-emerald-600 dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:text-emerald-400"
+                        : "border-border bg-card text-muted-foreground"
+                    )}
+                  >
+                    <KindIcon className="h-4 w-4" />
+                  </span>
+
+                  <div className="min-w-0 flex-1">
+                    <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
+                      <span className="text-sm font-semibold text-foreground">
+                        {s.userName || s.userEmail || s.userId}
+                      </span>
+                      <span className="text-sm text-muted-foreground">
+                        {ua.browser} · {ua.os}
+                      </span>
+                      {s.isCurrent && (
+                        <Badge
+                          variant="outline"
+                          className="h-5 border-emerald-200 bg-emerald-50 px-1.5 text-[10px] font-semibold text-emerald-600 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-400"
+                        >
+                          Thiết bị này
+                        </Badge>
+                      )}
+                      {s.isMine && !s.isCurrent && (
+                        <Badge
+                          variant="outline"
+                          className="h-5 border-border px-1.5 text-[10px] font-medium text-muted-foreground"
+                        >
+                          Của tôi
+                        </Badge>
+                      )}
+                      {s.impersonatedBy && (
+                        <Badge
+                          variant="outline"
+                          className="h-5 border-amber-200 bg-amber-50 px-1.5 text-[10px] font-semibold text-amber-700 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-300"
+                          title="Phiên do quản trị viên đăng nhập thay"
+                        >
+                          Mạo danh
+                        </Badge>
+                      )}
+                    </div>
+                    <p className="mt-0.5 truncate text-xs text-muted-foreground">
+                      {s.userEmail ? `${s.userEmail} · ` : ""}IP{" "}
+                      <span className="font-mono">{shortIp(s.ipAddress)}</span>
+                      {" · "}đăng nhập {formatTime(s.createdAt)}
+                      {" · "}hết hạn {formatTime(s.expiresAt)}
+                    </p>
+                  </div>
+
+                  {/* Hành động — LUÔN hiển thị (phiên hiện tại: disabled kèm
+                      lý do, không ẩn để khỏi tưởng trang chỉ-đọc) */}
+                  <div className="flex shrink-0 items-center gap-1.5">
+                    <button
+                      type="button"
+                      onClick={() => setConfirmRow(s)}
+                      disabled={s.isCurrent || busyId === s.id}
+                      className="inline-flex items-center gap-1 rounded-md border border-border bg-card px-2 py-1.5 text-xs font-medium text-destructive shadow-sm transition-colors hover:border-destructive/40 hover:bg-destructive/10 disabled:cursor-not-allowed disabled:opacity-40"
+                      title={
+                        s.isCurrent
+                          ? "Phiên bạn đang dùng — không thể tự thu hồi (dùng Đăng xuất)"
+                          : "Đăng xuất thiết bị này ngay lập tức"
+                      }
+                    >
+                      <Trash2
+                        className={cn(
+                          "h-3.5 w-3.5",
+                          busyId === s.id && "animate-pulse"
+                        )}
+                      />
+                      <span className="hidden sm:inline">Thu hồi</span>
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setConfirmUser(s)}
+                      className="inline-flex items-center rounded-md border border-border bg-card p-1.5 text-amber-600 shadow-sm transition-colors hover:border-amber-300 hover:bg-amber-50 dark:hover:border-amber-500/40 dark:hover:bg-amber-500/10"
+                      title={`Đăng xuất MỌI thiết bị của ${s.userName || s.userEmail || "người dùng này"}`}
+                    >
+                      <UserX className="h-3.5 w-3.5" />
+                    </button>
+                  </div>
+                </li>
+              )
+            })}
+          </ul>
+        )}
+
+        {/* Footer phân trang chuẩn */}
+        <div className="flex flex-wrap items-center gap-2 border-t border-border px-3 py-2 sm:px-4">
+          <p className="text-xs text-muted-foreground">
+            Hiển thị {fromRow} - {toRow} trong tổng số {total} phiên
+          </p>
+          <div className="ml-auto flex items-center gap-2">
+            <span className="text-xs text-muted-foreground">Số dòng</span>
+            <Select
+              value={String(pageSize)}
+              onValueChange={(v) => {
+                setPageSize(Number(v))
+                setPage(1)
+              }}
+            >
+              <SelectTrigger className="h-7 w-[70px] text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {PAGE_SIZES.map((n) => (
+                  <SelectItem key={n} value={String(n)}>
+                    {n}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <div className="flex items-center gap-1">
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-7 w-7"
+                disabled={page <= 1}
+                onClick={() => setPage(1)}
+                title="Trang đầu"
+              >
+                <ChevronsLeft className="h-3.5 w-3.5" />
+              </Button>
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-7 w-7"
+                disabled={page <= 1}
+                onClick={() => setPage((p) => p - 1)}
+                title="Trang trước"
+              >
+                <ChevronLeft className="h-3.5 w-3.5" />
+              </Button>
+              <span className="px-1 text-xs tabular-nums text-muted-foreground">
+                Trang{" "}
+                <span className="font-semibold text-foreground">{page}</span> /{" "}
+                {totalPages}
+              </span>
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-7 w-7"
+                disabled={page >= totalPages}
+                onClick={() => setPage((p) => p + 1)}
+                title="Trang sau"
+              >
+                <ChevronRight className="h-3.5 w-3.5" />
+              </Button>
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-7 w-7"
+                disabled={page >= totalPages}
+                onClick={() => setPage(totalPages)}
+                title="Trang cuối"
+              >
+                <ChevronsRight className="h-3.5 w-3.5" />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <ConfirmDialog
+        open={!!confirmRow}
+        onOpenChange={(open) => !open && setConfirmRow(null)}
+        title="Thu hồi phiên đăng nhập"
+        description={
+          confirmRow
+            ? `Thu hồi phiên ${parseUA(confirmRow.userAgent).browser} · ${parseUA(confirmRow.userAgent).os} của ${
+                confirmRow.userName || confirmRow.userEmail || confirmRow.userId
+              }? Thiết bị đó sẽ bị đăng xuất ngay lập tức.`
+            : ""
+        }
+        onConfirm={() => confirmRow && revokeOne(confirmRow)}
+        loading={!!busyId}
+      />
+
+      <ConfirmDialog
+        open={!!confirmUser}
+        onOpenChange={(open) => !open && setConfirmUser(null)}
+        title="Đăng xuất mọi thiết bị của người dùng"
+        description={
+          confirmUser
+            ? `Thu hồi TẤT CẢ phiên đăng nhập của ${
+                confirmUser.userName ||
+                confirmUser.userEmail ||
+                confirmUser.userId
+              } trên mọi thiết bị. Người này sẽ phải đăng nhập lại. ${
+                confirmUser.isMine
+                  ? "(Bạn tự thu hồi — phiên hiện tại của bạn sẽ được giữ lại.)"
+                  : ""
+              }`
+            : ""
+        }
+        onConfirm={() => confirmUser && revokeAllOfUser(confirmUser)}
+        loading={revokingUser}
+      />
+    </div>
+  )
+}