@goplusvn/core 0.1.25 → 0.1.26

package/src/rbac/pages/action-list-page.tsx

@@ -1,25 +1,12 @@
 "use client";
 
-// Trang "Quản lý hành động" — danh sách hành động RBAC kèm ngữ cảnh sử dụng
-// (tài nguyên · vai trò · người dùng). Bề mặt trắng (bg-card), nút tác vụ
-// LUÔN hiển thị (không ẩn sau hover — mobile không có hover).
-//
+// Trang "Quản lý hành động" — bar navy 1 dòng (full-bleed mobile / nổi lg)
+// + khối trắng (toolbar sticky + danh sách). GRID thẻ kiểu thẻ vai trò là
+// MẶC ĐỊNH (toggle List/Grid); dòng có #stt, nút sửa VÀNG / xóa ĐỎ luôn hiện.
+// Chi tiết sử dụng = chip màu theo loại + "+n khác".
 // API contract: GET/POST/PUT/DELETE /api/actions, GET /api/actions/usage
-// (usage là optional — trang vẫn chạy khi endpoint không tồn tại).
-
-import { useEffect, useMemo, useState } from "react";
-import { toast } from "sonner";
-import {
-  ChevronRight,
-  Pencil,
-  Plus,
-  RefreshCw,
-  Search,
-  Trash2,
-  X,
-  Zap,
-} from "lucide-react";
-
+// (usage optional — trang vẫn chạy khi endpoint không tồn tại).
+import { useEffect, useMemo, useState } from "react"
 import {
   Badge,
   Button,
@@ -31,289 +18,401 @@ import {
   DialogTitle,
   Input,
   Label,
-  PageHeader,
   Skeleton,
   Textarea,
-} from "../../ui";
-import { cn } from "../../utils";
-import { errorMessage, throwFetchError } from "../lib/fetch-error";
+} from "../../ui"
+import { toast } from "sonner"
+import {
+  BadgeCheck,
+  Ban,
+  Bot,
+  ChevronRight,
+  Download,
+  Eye,
+  LayoutGrid,
+  List,
+  PenLine,
+  Pencil,
+  Plus,
+  Printer,
+  RefreshCw,
+  Search,
+  Settings2,
+  Trash2,
+  Upload,
+  X,
+  Zap,
+} from "lucide-react"
+
+import type { LucideIcon } from "lucide-react"
+
+import { errorMessage, throwFetchError } from "../lib/fetch-error"
+import { cn } from "../../utils"
+
 
 // --- Types ---
 interface Action {
-  id: string;
-  code: string;
-  name: string;
-  description?: string;
-  isDefault?: boolean;
+  id: string
+  code: string
+  name: string
+  description?: string
+  isDefault?: boolean
 }
 
 interface UsageEntry {
-  resources: { code: string; name: string }[];
-  roles: { code: string; name: string }[];
-  users: { id: string; name: string | null; email: string }[];
+  resources: { code: string; name: string }[]
+  roles: { code: string; name: string }[]
+  users: { id: string; name: string | null; email: string }[]
 }
 
-type UsageMap = Record<string, UsageEntry>;
+type UsageMap = Record<string, UsageEntry>
 
-const EMPTY_USAGE: UsageEntry = { resources: [], roles: [], users: [] };
+const EMPTY_USAGE: UsageEntry = { resources: [], roles: [], users: [] }
 
 const normalize = (s: string) =>
   (s || "")
     .toLowerCase()
     .normalize("NFD")
     .replace(/[\u0300-\u036f]/g, "")
-    .replace(/đ/g, "d");
+    .replace(/đ/g, "d")
+
+// --- Icon + màu theo LOẠI action (đồng bộ chip quyền trang sửa vai trò) ---
+const ACTION_VISUAL_RULES: Array<{
+  re: RegExp
+  icon: LucideIcon
+  cls: string
+}> = [
+  { re: /^(view|read|get|list)/, icon: Eye, cls: "text-blue-500" },
+  { re: /^(create|add|new)/, icon: Plus, cls: "text-emerald-500" },
+  { re: /^(update|edit|change|set)/, icon: Pencil, cls: "text-amber-500" },
+  { re: /^(delete|remove)/, icon: Trash2, cls: "text-rose-500" },
+  { re: /^(cancel|void|reject)/, icon: Ban, cls: "text-rose-500" },
+  {
+    re: /^(approve|confirm|verify|accept)/,
+    icon: BadgeCheck,
+    cls: "text-violet-500",
+  },
+  { re: /^sign/, icon: PenLine, cls: "text-indigo-500" },
+  { re: /^import/, icon: Download, cls: "text-purple-500" },
+  { re: /^export/, icon: Upload, cls: "text-indigo-500" },
+  { re: /^print/, icon: Printer, cls: "text-cyan-600" },
+  { re: /^sync/, icon: RefreshCw, cls: "text-cyan-600" },
+  { re: /^(manage|config)/, icon: Settings2, cls: "text-orange-500" },
+  { re: /^auto/, icon: Bot, cls: "text-purple-500" },
+]
+
+const getActionVisual = (code: string) =>
+  ACTION_VISUAL_RULES.find((r) => r.re.test(code)) ?? {
+    icon: Zap,
+    cls: "text-slate-400",
+  }
 
 interface Permissions {
-  create?: boolean;
-  update?: boolean;
-  delete?: boolean;
+  create?: boolean
+  update?: boolean
+  delete?: boolean
 }
 
 export interface ActionListPageProps {
-  permissions?: Permissions;
+  permissions?: Permissions
 }
 
 export function ActionListPage({ permissions = {} }: ActionListPageProps) {
-  const [loading, setLoading] = useState(true);
-  const [actions, setActions] = useState<Action[]>([]);
-  const [usage, setUsage] = useState<UsageMap>({});
-  const [searchTerm, setSearchTerm] = useState("");
-  const [isRefreshing, setIsRefreshing] = useState(false);
-  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set());
+  const [loading, setLoading] = useState(true)
+  const [actions, setActions] = useState<Action[]>([])
+  const [usage, setUsage] = useState<UsageMap>({})
+  const [searchTerm, setSearchTerm] = useState("")
+  const [view, setView] = useState<"list" | "grid">("grid")
+  const [isRefreshing, setIsRefreshing] = useState(false)
+  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set())
 
   // Create/Edit dialog
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const [editing, setEditing] = useState<Action | null>(null);
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
+  const [editing, setEditing] = useState<Action | null>(null)
   const [formData, setFormData] = useState({
     code: "",
     name: "",
     description: "",
-  });
+  })
 
   // Delete confirm
-  const [confirmOpen, setConfirmOpen] = useState(false);
-  const [toDelete, setToDelete] = useState<Action | null>(null);
-  const [isDeleting, setIsDeleting] = useState(false);
+  const [confirmOpen, setConfirmOpen] = useState(false)
+  const [toDelete, setToDelete] = useState<Action | null>(null)
+  const [isDeleting, setIsDeleting] = useState(false)
 
-  const canCreate = !!permissions.create;
-  const canUpdate = !!permissions.update;
-  const canDelete = !!permissions.delete;
+  const canCreate = !!permissions.create
+  const canUpdate = !!permissions.update
+  const canDelete = !!permissions.delete
 
   const fetchData = async () => {
     try {
-      setLoading(true);
+      setLoading(true)
       const [resActions, resUsage] = await Promise.all([
         fetch("/api/actions?pageSize=1000"),
         fetch("/api/actions/usage"),
-      ]);
-      if (!resActions.ok) throw new Error("Không tải được danh sách hành động");
+      ])
+      if (!resActions.ok) throw new Error("Không tải được danh sách hành động")
 
-      const actionsData = await resActions.json();
-      setActions(actionsData.items || []);
+      const actionsData = await resActions.json()
+      setActions(actionsData.items || [])
 
       if (resUsage.ok) {
-        const usageData = await resUsage.json();
-        setUsage(usageData.usage || {});
+        const usageData = await resUsage.json()
+        setUsage(usageData.usage || {})
       }
     } catch (error) {
-      toast.error(errorMessage(error, "Lỗi tải dữ liệu"));
+      toast.error(errorMessage(error, "Lỗi tải dữ liệu"))
     } finally {
-      setLoading(false);
-      setIsRefreshing(false);
+      setLoading(false)
+      setIsRefreshing(false)
     }
-  };
+  }
 
   useEffect(() => {
-    fetchData();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    fetchData()
+  }, [])
 
   const handleRefresh = () => {
-    setIsRefreshing(true);
-    fetchData();
-  };
+    setIsRefreshing(true)
+    fetchData()
+  }
 
   const toggleRow = (id: string) => {
     setExpandedRows((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  };
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
 
   const filtered = useMemo(() => {
-    const q = normalize(searchTerm.trim());
+    const q = normalize(searchTerm.trim())
     const list = q
       ? actions.filter(
           (a) =>
             normalize(a.name).includes(q) ||
             normalize(a.code).includes(q) ||
-            normalize(a.description || "").includes(q),
+            normalize(a.description || "").includes(q)
         )
-      : actions;
-    return [...list].sort((a, b) => a.name.localeCompare(b.name, "vi"));
-  }, [actions, searchTerm]);
+      : actions
+    return [...list].sort((a, b) => a.name.localeCompare(b.name, "vi"))
+  }, [actions, searchTerm])
 
   // --- CRUD ---
   const openNew = () => {
-    setEditing(null);
-    setFormData({ code: "", name: "", description: "" });
-    setIsDialogOpen(true);
-  };
+    setEditing(null)
+    setFormData({ code: "", name: "", description: "" })
+    setIsDialogOpen(true)
+  }
 
   const openEdit = (action: Action) => {
-    setEditing(action);
+    setEditing(action)
     setFormData({
       code: action.code,
       name: action.name,
       description: action.description || "",
-    });
-    setIsDialogOpen(true);
-  };
+    })
+    setIsDialogOpen(true)
+  }
 
   const handleSubmit = async () => {
     if (!formData.code || !formData.name) {
-      toast.error("Vui lòng nhập Mã và Tên hành động");
-      return;
+      toast.error("Vui lòng nhập Mã và Tên hành động")
+      return
     }
     try {
-      const payload = { ...formData, status: "active" };
+      const payload = { ...formData, status: "active" }
       const res = await fetch("/api/actions", {
         method: editing ? "PUT" : "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(editing ? { id: editing.id, ...payload } : payload),
-      });
+        body: JSON.stringify(
+          editing ? { id: editing.id, ...payload } : payload
+        ),
+      })
       if (!res.ok) {
-        await throwFetchError(res, "Operation failed");
+        await throwFetchError(res, "Operation failed")
       }
-      const saved = await res.json();
+      const saved = await res.json()
       if (editing) {
-        setActions((prev) => prev.map((a) => (a.id === saved.id ? saved : a)));
-        toast.success("Cập nhật hành động thành công");
+        setActions((prev) => prev.map((a) => (a.id === saved.id ? saved : a)))
+        toast.success("Cập nhật hành động thành công")
       } else {
-        setActions((prev) => [saved, ...prev]);
-        toast.success("Tạo hành động thành công");
+        setActions((prev) => [saved, ...prev])
+        toast.success("Tạo hành động thành công")
       }
-      setIsDialogOpen(false);
+      setIsDialogOpen(false)
     } catch (error) {
-      toast.error(errorMessage(error, "Có lỗi xảy ra"));
+      toast.error(errorMessage(error, "Có lỗi xảy ra"))
     }
-  };
+  }
 
   const requestDelete = (action: Action) => {
-    setToDelete(action);
-    setConfirmOpen(true);
-  };
+    setToDelete(action)
+    setConfirmOpen(true)
+  }
 
   const handleConfirmDelete = async () => {
-    if (!toDelete) return;
-    setIsDeleting(true);
+    if (!toDelete) return
+    setIsDeleting(true)
     try {
       const res = await fetch(`/api/actions?id=${toDelete.id}`, {
         method: "DELETE",
-      });
+      })
       if (!res.ok) {
-        await throwFetchError(res, "Delete failed");
+        await throwFetchError(res, "Delete failed")
       }
-      setActions((prev) => prev.filter((a) => a.id !== toDelete.id));
-      toast.success("Xóa hành động thành công");
-      setConfirmOpen(false);
-      setToDelete(null);
+      setActions((prev) => prev.filter((a) => a.id !== toDelete.id))
+      toast.success("Xóa hành động thành công")
+      setConfirmOpen(false)
+      setToDelete(null)
     } catch (error) {
-      toast.error(errorMessage(error, "Không thể xóa hành động"));
+      toast.error(errorMessage(error, "Không thể xóa hành động"))
     } finally {
-      setIsDeleting(false);
+      setIsDeleting(false)
     }
-  };
+  }
 
-  const isSearching = searchTerm.trim().length > 0;
+  const isSearching = searchTerm.trim().length > 0
 
   return (
-    <section className="w-full space-y-4 px-4 pb-6 pt-2 md:px-6 lg:px-8">
-      <PageHeader
-        title="Quản lý hành động"
-        description="Danh sách hành động và ngữ cảnh sử dụng (tài nguyên · vai trò · người dùng)"
-        icon={<Zap className="h-5 w-5" />}
-        actions={
-          canCreate ? (
-            <Button
-              variant="accent"
-              onClick={openNew}
-              prependIcon={<Plus className="h-4 w-4" />}
-            >
-              <span className="hidden sm:inline">Thêm hành động</span>
-              <span className="sm:hidden">Thêm</span>
-            </Button>
-          ) : undefined
-        }
-      />
+    <div className="flex flex-col">
+      {/* ===== Bar navy 1 dòng — đồng bộ trang vai trò/đơn bán hà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">
+          <Zap 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ý hành động
+        </h1>
+        <span className="hidden shrink-0 text-xs text-primary-foreground/70 md:inline">
+          {actions.length} hành động · dùng cho tài nguyên · vai trò · người
+          dùng
+        </span>
+        {canCreate && (
+          <Button
+            onClick={openNew}
+            className="h-8 shrink-0 bg-primary-foreground px-2.5 text-primary hover:bg-primary-foreground/90 sm:px-3"
+          >
+            <Plus className="h-4 w-4" />
+            <span className="ml-1.5 hidden sm:inline">Thêm hành động</span>
+            <span className="ml-1.5 sm:hidden">Thêm</span>
+          </Button>
+        )}
+      </div>
 
-      {/* Search + refresh */}
-      <div className="flex flex-wrap items-center gap-2">
-        <div className="relative min-w-0 flex-1 sm:max-w-sm sm:flex-none">
-          <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-          <Input
-            placeholder="Tìm hành động (tên, mã, mô tả)…"
-            className="h-9 w-full bg-card pl-9 pr-9"
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-          />
-          {searchTerm && (
+      {/* ===== Khối trắng: toolbar sticky + danh sách ===== */}
+      <div className="mt-3 overflow-hidden rounded-xl border border-border bg-card shadow-sm lg:mx-3">
+        {/* Toolbar sticky */}
+        <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-[140px] flex-1 sm:max-w-72">
+            <Search className="pointer-events-none absolute left-2.5 top-2 h-3.5 w-3.5 text-muted-foreground" />
+            <Input
+              placeholder="Tìm hành động (tên, mã, mô tả)…"
+              className="h-8 w-full rounded-md border border-border bg-card pl-8 pr-8 text-sm"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+            {searchTerm && (
+              <button
+                type="button"
+                onClick={() => setSearchTerm("")}
+                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>
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={handleRefresh}
+            disabled={isRefreshing}
+            title="Làm mới"
+            className="h-8 w-8 shrink-0"
+          >
+            <RefreshCw
+              className={cn("h-3.5 w-3.5", isRefreshing && "animate-spin")}
+            />
+          </Button>
+          <p className="ml-auto whitespace-nowrap text-xs text-muted-foreground">
+            {isSearching ? (
+              <>
+                <span className="font-semibold tabular-nums text-foreground">
+                  {filtered.length}
+                </span>{" "}
+                khớp
+              </>
+            ) : (
+              <>
+                <span className="font-semibold tabular-nums text-foreground">
+                  {actions.length}
+                </span>{" "}
+                hành động
+              </>
+            )}
+          </p>
+          {/* Chuyển dạng hiển thị: dòng / thẻ */}
+          <div className="flex shrink-0 overflow-hidden rounded-md border border-border">
             <button
               type="button"
-              onClick={() => setSearchTerm("")}
-              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"
+              onClick={() => setView("list")}
+              title="Dạng dòng"
+              className={cn(
+                "px-2 py-1.5 transition-colors",
+                view === "list"
+                  ? "bg-muted text-foreground"
+                  : "bg-card text-muted-foreground hover:text-foreground"
+              )}
             >
-              <X className="h-4 w-4" />
+              <List className="h-3.5 w-3.5" />
             </button>
-          )}
+            <button
+              type="button"
+              onClick={() => setView("grid")}
+              title="Dạng thẻ"
+              className={cn(
+                "border-l border-border px-2 py-1.5 transition-colors",
+                view === "grid"
+                  ? "bg-muted text-foreground"
+                  : "bg-card text-muted-foreground hover:text-foreground"
+              )}
+            >
+              <LayoutGrid className="h-3.5 w-3.5" />
+            </button>
+          </div>
         </div>
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={handleRefresh}
-          disabled={isRefreshing}
-          title="Làm mới"
-        >
-          <RefreshCw className={cn("h-4 w-4", isRefreshing && "animate-spin")} />
-        </Button>
-        {isSearching && (
-          <Badge variant="secondary" className="ml-auto font-normal sm:ml-1">
-            {filtered.length} hành động
-          </Badge>
-        )}
-      </div>
 
-      {/* Body */}
-      {loading && !isRefreshing ? (
-        <div className="space-y-2 rounded-lg border border-border bg-card p-4">
-          {Array.from({ length: 8 }).map((_, i) => (
-            <Skeleton key={i} className="h-14 w-full" />
-          ))}
-        </div>
-      ) : filtered.length === 0 ? (
-        <div className="flex flex-col items-center justify-center rounded-lg border border-dashed border-border bg-card py-20 text-center">
-          <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-muted">
-            <Search className="h-6 w-6 text-muted-foreground" />
+        {/* Body */}
+        {loading && !isRefreshing ? (
+          <div className="space-y-2 p-4">
+            {Array.from({ length: 8 }).map((_, i) => (
+              <Skeleton key={i} className="h-14 w-full" />
+            ))}
           </div>
-          <h3 className="text-base font-semibold text-foreground">
-            {isSearching ? "Không tìm thấy hành động" : "Chưa có hành động nào"}
-          </h3>
-          <p className="mt-1 max-w-sm text-sm text-muted-foreground">
-            {isSearching
-              ? "Thử từ khóa khác."
-              : "Tạo hành động đầu tiên để bắt đầu phân quyền."}
-          </p>
-        </div>
-      ) : (
-        <div className="overflow-hidden rounded-lg border border-border bg-card shadow-sm">
+        ) : filtered.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-20 text-center">
+            <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-muted">
+              <Search className="h-6 w-6 text-muted-foreground" />
+            </div>
+            <h3 className="text-base font-semibold text-foreground">
+              {isSearching
+                ? "Không tìm thấy hành động"
+                : "Chưa có hành động nào"}
+            </h3>
+            <p className="mt-1 max-w-sm text-sm text-muted-foreground">
+              {isSearching
+                ? "Thử từ khóa khác."
+                : "Tạo hành động đầu tiên để bắt đầu phân quyền."}
+            </p>
+          </div>
+        ) : view === "list" ? (
           <ul className="divide-y divide-border">
-            {filtered.map((action) => (
+            {filtered.map((action, index) => (
               <ActionRow
                 key={action.id}
+                index={index}
                 action={action}
                 usage={usage[action.code] || EMPTY_USAGE}
                 expanded={expandedRows.has(action.id)}
@@ -325,8 +424,25 @@ export function ActionListPage({ permissions = {} }: ActionListPageProps) {
               />
             ))}
           </ul>
-        </div>
-      )}
+        ) : (
+          <div className="grid grid-cols-1 gap-3 p-3 sm:grid-cols-2 xl:grid-cols-3">
+            {filtered.map((action, index) => (
+              <ActionCard
+                key={action.id}
+                index={index}
+                action={action}
+                usage={usage[action.code] || EMPTY_USAGE}
+                expanded={expandedRows.has(action.id)}
+                canUpdate={canUpdate}
+                canDelete={canDelete}
+                onToggleExpand={() => toggleRow(action.id)}
+                onEdit={openEdit}
+                onDelete={requestDelete}
+              />
+            ))}
+          </div>
+        )}
+      </div>
 
       {/* Create / Edit dialog */}
       <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
@@ -394,14 +510,14 @@ export function ActionListPage({ permissions = {} }: ActionListPageProps) {
         onConfirm={handleConfirmDelete}
         loading={isDeleting}
       />
-    </section>
-  );
+    </div>
+  )
 }
 
-// --- Một dòng hành động (editorial): tên + mã·mô tả; số liệu dạng chữ; bung ra
-// hiển thị quan hệ dạng DANH SÁCH CHỮ. Nút sửa/xóa hiển thị thường trực để
-// dùng được trên mobile (không có trạng thái hover). ---
+// --- Một dòng hành động: tên + mã·mô tả; số liệu dạng chữ; bung ra hiển thị
+// quan hệ dạng danh sách chữ. Nút sửa/xóa LUÔN hiện (mobile không có hover). ---
 function ActionRow({
+  index,
   action,
   usage,
   expanded,
@@ -411,14 +527,15 @@ function ActionRow({
   onEdit,
   onDelete,
 }: {
-  action: Action;
-  usage: UsageEntry;
-  expanded: boolean;
-  canUpdate: boolean;
-  canDelete: boolean;
-  onToggleExpand: () => void;
-  onEdit: (a: Action) => void;
-  onDelete: (a: Action) => void;
+  index: number
+  action: Action
+  usage: UsageEntry
+  expanded: boolean
+  canUpdate: boolean
+  canDelete: boolean
+  onToggleExpand: () => void
+  onEdit: (a: Action) => void
+  onDelete: (a: Action) => void
 }) {
   return (
     <li>
@@ -429,12 +546,16 @@ function ActionRow({
         onClick={onToggleExpand}
         onKeyDown={(e) => {
           if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            onToggleExpand();
+            e.preventDefault()
+            onToggleExpand()
           }
         }}
         className="flex cursor-pointer items-center gap-3 bg-card px-4 py-3 transition-colors hover:bg-muted/40"
       >
+        {/* Số thứ tự */}
+        <span className="w-6 shrink-0 text-right font-mono text-[11px] tabular-nums text-muted-foreground/60">
+          {index + 1}
+        </span>
         {/* Tên + mã · mô tả */}
         <div className="min-w-0 flex-1">
           <div className="truncate text-sm font-medium text-foreground">
@@ -454,10 +575,10 @@ function ActionRow({
           <button
             type="button"
             onClick={(e) => {
-              e.stopPropagation();
-              onEdit(action);
+              e.stopPropagation()
+              onEdit(action)
             }}
-            className="shrink-0 rounded-md border border-border bg-card p-1.5 text-muted-foreground shadow-sm transition-colors hover:bg-muted hover:text-foreground"
+            className="shrink-0 rounded-md border border-border bg-card p-1.5 text-amber-500 shadow-sm transition-colors hover:border-amber-300 hover:bg-amber-50 hover:text-amber-600 dark:hover:border-amber-500/40 dark:hover:bg-amber-500/10"
             title="Sửa hành động"
           >
             <Pencil className="h-3.5 w-3.5" />
@@ -467,10 +588,10 @@ function ActionRow({
           <button
             type="button"
             onClick={(e) => {
-              e.stopPropagation();
-              onDelete(action);
+              e.stopPropagation()
+              onDelete(action)
             }}
-            className="shrink-0 rounded-md border border-border bg-card p-1.5 text-muted-foreground shadow-sm transition-colors hover:border-destructive/30 hover:bg-destructive/10 hover:text-destructive"
+            className="shrink-0 rounded-md border border-border bg-card p-1.5 text-destructive shadow-sm transition-colors hover:border-destructive/40 hover:bg-destructive/10"
             title="Xóa hành động"
           >
             <Trash2 className="h-3.5 w-3.5" />
@@ -479,7 +600,7 @@ function ActionRow({
         <ChevronRight
           className={cn(
             "h-4 w-4 shrink-0 text-muted-foreground/50 transition-transform",
-            expanded && "rotate-90",
+            expanded && "rotate-90"
           )}
         />
       </div>
@@ -491,16 +612,19 @@ function ActionRow({
           <DefRow
             label="Tài nguyên"
             empty="Chưa gán cho tài nguyên nào"
+            chipClass="border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-500/30 dark:bg-blue-500/10 dark:text-blue-300"
             items={usage.resources.map((r) => ({ key: r.code, text: r.name }))}
           />
           <DefRow
             label="Vai trò"
             empty="Chưa thuộc vai trò nào"
+            chipClass="border-violet-200 bg-violet-50 text-violet-700 dark:border-violet-500/30 dark:bg-violet-500/10 dark:text-violet-300"
             items={usage.roles.map((r) => ({ key: r.code, text: r.name }))}
           />
           <DefRow
             label="Người dùng"
             empty="Chưa có người dùng nào được cấp"
+            chipClass="border-border bg-muted/40 text-foreground/80"
             items={usage.users.map((u) => ({
               key: u.id,
               text: u.name || u.email,
@@ -510,28 +634,199 @@ function ActionRow({
         </div>
       )}
     </li>
-  );
+  )
 }
 
-// Số liệu kiểu chữ: "30 tài nguyên · 8 vai trò · 30 người dùng" (số tabular,
-// đậm khi > 0; nhãn + dấu chấm phân tách màu nhạt).
+// --- Thẻ hành động (grid, MẶC ĐỊNH) — phong cách thẻ VAI TRÒ: icon loại
+// hành động + tên/mã, badge Mặc định, mô tả 2 dòng, KHỐI SỐ LIỆU đóng khung
+// (số to 3 cột), hàng nút Sửa/Xóa dưới chân. Bấm thẻ bung chi tiết (full hàng). ---
+function ActionCard({
+  index,
+  action,
+  usage,
+  expanded,
+  canUpdate,
+  canDelete,
+  onToggleExpand,
+  onEdit,
+  onDelete,
+}: {
+  index: number
+  action: Action
+  usage: UsageEntry
+  expanded: boolean
+  canUpdate: boolean
+  canDelete: boolean
+  onToggleExpand: () => void
+  onEdit: (a: Action) => void
+  onDelete: (a: Action) => void
+}) {
+  const visual = getActionVisual(action.code)
+  const ActionIcon = visual.icon
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      aria-expanded={expanded}
+      onClick={onToggleExpand}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault()
+          onToggleExpand()
+        }
+      }}
+      className={cn(
+        "cursor-pointer overflow-hidden rounded-[12px] border border-border bg-card p-4 shadow-sm transition-all hover:border-primary/40 hover:shadow-md",
+        expanded && "col-span-full border-primary/40"
+      )}
+    >
+      {/* Header: icon loại + tên/mã | badge */}
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex min-w-0 items-center gap-2.5">
+          <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-border bg-card shadow-sm">
+            <ActionIcon className={cn("h-4 w-4", visual.cls)} />
+          </span>
+          <div className="min-w-0">
+            <div className="truncate text-[15px] font-bold leading-tight text-foreground">
+              {action.name}
+            </div>
+            <code className="font-mono text-[11px] text-muted-foreground">
+              {action.code}
+            </code>
+          </div>
+        </div>
+        <div className="flex shrink-0 items-center gap-1.5">
+          {action.isDefault && (
+            <Badge
+              variant="outline"
+              className="h-5 border-indigo-200 bg-indigo-50 px-1.5 text-[10px] font-semibold text-indigo-600 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-400"
+            >
+              Mặc định
+            </Badge>
+          )}
+          <span className="font-mono text-[11px] tabular-nums text-muted-foreground/60">
+            #{index + 1}
+          </span>
+        </div>
+      </div>
+
+      {/* Mô tả 2 dòng (giữ chiều cao đều thẻ) */}
+      <p className="mt-2 line-clamp-2 min-h-[2.5rem] text-[13px] leading-relaxed text-muted-foreground">
+        {action.description || "Chưa có mô tả cho hành động này."}
+      </p>
+
+      {/* Khối số liệu đóng khung — 3 cột số to như thẻ vai trò */}
+      <div className="flex items-center justify-between rounded-lg border border-border bg-card p-2.5">
+        <div className="flex flex-1 flex-col items-center border-r border-border">
+          <span className="mb-1 text-[16px] font-black leading-none tabular-nums text-blue-600 dark:text-blue-400">
+            {usage.resources.length}
+          </span>
+          <span className="text-[9px] font-bold uppercase tracking-wider text-muted-foreground">
+            Tài nguyên
+          </span>
+        </div>
+        <div className="flex flex-1 flex-col items-center border-r border-border">
+          <span className="mb-1 text-[16px] font-black leading-none tabular-nums text-violet-600 dark:text-violet-400">
+            {usage.roles.length}
+          </span>
+          <span className="text-[9px] font-bold uppercase tracking-wider text-muted-foreground">
+            Vai trò
+          </span>
+        </div>
+        <div className="flex flex-1 flex-col items-center">
+          <span className="mb-1 text-[16px] font-black leading-none tabular-nums text-emerald-600 dark:text-emerald-500">
+            {usage.users.length}
+          </span>
+          <span className="text-[9px] font-bold uppercase tracking-wider text-muted-foreground">
+            Người dùng
+          </span>
+        </div>
+      </div>
+
+      {/* Hàng nút dưới chân — như thẻ vai trò */}
+      {(canUpdate || canDelete) && (
+        <div className="flex gap-2 pt-3">
+          {canUpdate && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8 flex-1 rounded-[8px] bg-card text-[12px] font-medium shadow-sm transition-colors hover:border-amber-300 hover:bg-amber-50 dark:hover:border-amber-500/40 dark:hover:bg-amber-500/10"
+              onClick={(e) => {
+                e.stopPropagation()
+                onEdit(action)
+              }}
+            >
+              <Pencil className="mr-1.5 h-3.5 w-3.5 text-amber-500" />
+              Sửa
+            </Button>
+          )}
+          {canDelete && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8 flex-1 rounded-[8px] bg-card text-[12px] font-medium text-destructive shadow-sm transition-colors hover:bg-destructive/10 hover:text-destructive"
+              onClick={(e) => {
+                e.stopPropagation()
+                onDelete(action)
+              }}
+            >
+              <Trash2 className="mr-1.5 h-3.5 w-3.5" />
+              Xóa
+            </Button>
+          )}
+        </div>
+      )}
+
+      {/* Bung: chi tiết chip (thẻ giãn full hàng) */}
+      {expanded && (
+        <div className="mt-3 space-y-2.5 border-t border-border pt-3">
+          <DefRow
+            label="Tài nguyên"
+            empty="Chưa gán cho tài nguyên nào"
+            chipClass="border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-500/30 dark:bg-blue-500/10 dark:text-blue-300"
+            items={usage.resources.map((r) => ({ key: r.code, text: r.name }))}
+          />
+          <DefRow
+            label="Vai trò"
+            empty="Chưa thuộc vai trò nào"
+            chipClass="border-violet-200 bg-violet-50 text-violet-700 dark:border-violet-500/30 dark:bg-violet-500/10 dark:text-violet-300"
+            items={usage.roles.map((r) => ({ key: r.code, text: r.name }))}
+          />
+          <DefRow
+            label="Người dùng"
+            empty="Chưa có người dùng nào được cấp"
+            chipClass="border-border bg-muted/40 text-foreground/80"
+            items={usage.users.map((u) => ({
+              key: u.id,
+              text: u.name || u.email,
+              title: u.email,
+            }))}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+// Số liệu kiểu chữ: "30 tài nguyên · 8 vai trò · 30 người dùng"
 function Metrics({
   usage,
   className,
 }: {
-  usage: UsageEntry;
-  className?: string;
+  usage: UsageEntry
+  className?: string
 }) {
   const parts = [
     { n: usage.resources.length, label: "tài nguyên" },
     { n: usage.roles.length, label: "vai trò" },
     { n: usage.users.length, label: "người dùng" },
-  ];
+  ]
   return (
     <div
       className={cn(
         "shrink-0 whitespace-nowrap text-xs text-muted-foreground",
-        className,
+        className
       )}
     >
       {parts.map((p, i) => (
@@ -540,7 +835,7 @@ function Metrics({
           <span
             className={cn(
               "tabular-nums",
-              p.n > 0 && "font-medium text-foreground",
+              p.n > 0 && "font-medium text-foreground"
             )}
           >
             {p.n}
@@ -549,39 +844,74 @@ function Metrics({
         </span>
       ))}
     </div>
-  );
+  )
 }
 
-// 1 dòng quan hệ: nhãn (small caps) + số đếm | danh sách tên phân tách dấu phẩy.
+// 1 dòng quan hệ: nhãn (small caps) + số đếm | CHIP wrap ngang (thay cho
+// danh sách phẩy khó quét). Quá MAX_DEF_CHIPS → nút "+n khác" / "Thu gọn".
+const MAX_DEF_CHIPS = 15
+
 function DefRow({
   label,
   empty,
   items,
+  chipClass,
 }: {
-  label: string;
-  empty: string;
-  items: { key: string; text: string; title?: string }[];
+  label: string
+  empty: string
+  items: { key: string; text: string; title?: string }[]
+  chipClass?: string
 }) {
+  const [showAll, setShowAll] = useState(false)
+  const shown = showAll ? items : items.slice(0, MAX_DEF_CHIPS)
+  const overflow = items.length - shown.length
+
   return (
-    <div className="flex flex-col gap-0.5 sm:flex-row sm:gap-4">
-      <div className="flex w-28 shrink-0 items-baseline gap-1.5 pt-px text-[11px] uppercase tracking-wide text-muted-foreground">
+    <div className="flex flex-col gap-1 sm:flex-row sm:gap-4">
+      <div className="flex w-28 shrink-0 items-baseline gap-1.5 pt-0.5 text-[11px] uppercase tracking-wide text-muted-foreground">
         <span className="font-medium">{label}</span>
         <span className="tabular-nums text-muted-foreground/60">
           {items.length}
         </span>
       </div>
-      <div className="flex-1 text-xs leading-relaxed text-foreground/80">
+      <div className="flex min-w-0 flex-1 flex-wrap items-center gap-1">
         {items.length === 0 ? (
-          <span className="italic text-muted-foreground">{empty}</span>
+          <span className="text-xs italic text-muted-foreground">{empty}</span>
         ) : (
-          items.map((it, i) => (
-            <span key={it.key}>
-              {i > 0 ? ", " : ""}
-              <span title={it.title}>{it.text}</span>
-            </span>
-          ))
+          <>
+            {shown.map((it) => (
+              <span
+                key={it.key}
+                title={it.title}
+                className={cn(
+                  "inline-flex max-w-56 items-center truncate rounded-md border px-1.5 py-0.5 text-[11px] leading-4",
+                  chipClass || "border-border bg-card text-foreground/80"
+                )}
+              >
+                {it.text}
+              </span>
+            ))}
+            {overflow > 0 && (
+              <button
+                type="button"
+                onClick={() => setShowAll(true)}
+                className="rounded-md px-1.5 py-0.5 text-[11px] font-medium text-primary hover:bg-primary/5"
+              >
+                +{overflow} khác
+              </button>
+            )}
+            {showAll && items.length > MAX_DEF_CHIPS && (
+              <button
+                type="button"
+                onClick={() => setShowAll(false)}
+                className="rounded-md px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground hover:bg-muted/50"
+              >
+                Thu gọn
+              </button>
+            )}
+          </>
         )}
       </div>
     </div>
-  );
+  )
 }