@goplusvn/core 0.1.25 → 0.1.26

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

@@ -1,13 +1,33 @@
 "use client";
 
-// Trang "Quản lý tài nguyên" — nhóm tài nguyên theo section, bung hàng để
-// xem/sửa toàn bộ action ngay tại chỗ. Bề mặt trắng (bg-card), nút sửa LUÔN
-// hiển thị (không ẩn sau hover — mobile không có hover).
-//
+// Trang "Quản lý tài nguyên" — bar navy 1 dòng (số liệu + tiện ích + Thêm)
+// + MỘT khối trắng liền: toolbar sticky, nhóm = dòng mảnh, GRID thẻ kiểu thẻ
+// vai trò là MẶC ĐỊNH (toggle List/Grid). Bấm thẻ bung editor quyền
+// (ResourceActionsEditor dùng chung dòng/thẻ); xóa trực tiếp từ thẻ.
 // API contract: /api/resources (+/sync, /:id), /api/actions.
-
-import { useEffect, useMemo, useState } from "react";
-import { toast } from "sonner";
+import { useEffect, useMemo, useState } from "react"
+import {
+  Badge,
+  Button,
+  ConfirmDialog,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DynamicIcon,
+  Input,
+  Label,
+  ScrollArea,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Skeleton,
+  Textarea,
+} from "../../ui"
+import { toast } from "sonner"
 import {
   Box,
   Boxes,
@@ -17,7 +37,8 @@ import {
   ChevronRight,
   ClipboardList,
   DatabaseBackup,
-  Layers,
+  LayoutGrid,
+  List,
   Pencil,
   Plus,
   RefreshCw,
@@ -29,58 +50,34 @@ import {
   Truck,
   Users,
   Wallet,
+  X,
   Zap,
-} from "lucide-react";
+} from "lucide-react"
+
+import { errorMessage, throwFetchError } from "../lib/fetch-error"
+import { cn } from "../../utils"
 
-import {
-  Badge,
-  Button,
-  CompactStatBar,
-  type CompactStatItem,
-  ConfirmDialog,
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DynamicIcon,
-  Input,
-  Label,
-  ListToolbar,
-  ScrollArea,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  Skeleton,
-  Textarea,
-} from "../../ui";
-import { cn } from "../../utils";
-import { errorMessage, throwFetchError } from "../lib/fetch-error";
 
 // --- Types ---
 interface Resource {
-  id: string;
-  code: string;
-  name: string;
-  group: string;
-  description?: string;
-  icon?: string;
-  actions: string[];
-  config?: any;
+  id: string
+  code: string
+  name: string
+  group: string
+  description?: string
+  icon?: string
+  actions: string[]
+  config?: any
 }
 
 interface Action {
-  id: string;
-  code: string;
-  name: string;
-  description?: string;
+  id: string
+  code: string
+  name: string
+  description?: string
 }
 
-// --- Group metadata: one muted hue per group so sections are visually
-// distinct without going back to the old "rainbow" look. `iconCls` tints the
-// group icon + each resource avatar. ---
+// --- Group metadata: one muted hue per group ---
 const GROUP_META: Record<
   string,
   { icon: any; label: string; iconCls: string }
@@ -88,8 +85,7 @@ const GROUP_META: Record<
   sales: {
     icon: ShoppingBag,
     label: "Bán hàng",
-    iconCls:
-      "text-blue-600 bg-blue-100 dark:text-blue-400 dark:bg-blue-500/15",
+    iconCls: "text-blue-600 bg-blue-100 dark:text-blue-400 dark:bg-blue-500/15",
   },
   purchase: {
     icon: ClipboardList,
@@ -112,14 +108,12 @@ const GROUP_META: Record<
   hr: {
     icon: Users,
     label: "Nhân sự",
-    iconCls:
-      "text-rose-600 bg-rose-100 dark:text-rose-400 dark:bg-rose-500/15",
+    iconCls: "text-rose-600 bg-rose-100 dark:text-rose-400 dark:bg-rose-500/15",
   },
   master: {
     icon: Boxes,
     label: "Danh mục",
-    iconCls:
-      "text-cyan-600 bg-cyan-100 dark:text-cyan-400 dark:bg-cyan-500/15",
+    iconCls: "text-cyan-600 bg-cyan-100 dark:text-cyan-400 dark:bg-cyan-500/15",
   },
   users: {
     icon: Users,
@@ -139,7 +133,7 @@ const GROUP_META: Record<
     iconCls:
       "text-slate-600 bg-slate-200 dark:text-slate-300 dark:bg-slate-500/20",
   },
-};
+}
 
 const GROUP_ORDER = [
   "sales",
@@ -151,7 +145,7 @@ const GROUP_ORDER = [
   "users",
   "system",
   "other",
-];
+]
 
 const getGroupMeta = (group: string) =>
   GROUP_META[group?.toLowerCase()] || {
@@ -159,11 +153,9 @@ const getGroupMeta = (group: string) =>
     label: group || "Khác",
     iconCls:
       "text-slate-600 bg-slate-200 dark:text-slate-300 dark:bg-slate-500/20",
-  };
+  }
 
-// --- Action chips colored by permission category (read/create/update/delete/
-// approve). Most domain-specific codes fall through to neutral, which keeps
-// the palette calm instead of rainbow. ---
+// --- Action chips colored by permission category ---
 const ACTION_TONES: Record<string, string> = {
   read: "border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-500/30 dark:bg-blue-500/10 dark:text-blue-300",
   create:
@@ -175,19 +167,18 @@ const ACTION_TONES: Record<string, string> = {
   approve:
     "border-violet-200 bg-violet-50 text-violet-700 dark:border-violet-500/30 dark:bg-violet-500/10 dark:text-violet-300",
   neutral: "border-border bg-muted text-foreground/80",
-};
+}
 
 const getActionTone = (code: string): string => {
-  if (/^(view|read|get|list|export|print|sync)/.test(code)) return "read";
-  if (/^(create|add|new)/.test(code)) return "create";
-  if (/^(update|edit|change|set)/.test(code)) return "update";
-  if (/^(delete|remove)/.test(code)) return "delete";
-  if (/^(approve|confirm|sign|verify|accept)/.test(code)) return "approve";
-  return "neutral";
-};
-
-// 4 hành động CRUD chuẩn → nhóm "Cơ bản" (thứ tự cố định Xem → Thêm → Sửa →
-// Xóa). Mọi action khác vào nhóm "Chức năng" (sắp A→Z cho dễ tìm).
+  if (/^(view|read|get|list|export|print|sync)/.test(code)) return "read"
+  if (/^(create|add|new)/.test(code)) return "create"
+  if (/^(update|edit|change|set)/.test(code)) return "update"
+  if (/^(delete|remove)/.test(code)) return "delete"
+  if (/^(approve|confirm|sign|verify|accept)/.test(code)) return "approve"
+  return "neutral"
+}
+
+// 4 hành động CRUD chuẩn → nhóm "Cơ bản"; còn lại vào "Chức năng" (A→Z).
 const BASIC_ORDER = [
   "view",
   "read",
@@ -197,21 +188,21 @@ const BASIC_ORDER = [
   "edit",
   "delete",
   "remove",
-];
+]
 
 const categorizeActions = (actions: Action[]) => {
-  const basic: Action[] = [];
-  const functional: Action[] = [];
+  const basic: Action[] = []
+  const functional: Action[] = []
   for (const a of actions) {
-    if (BASIC_ORDER.includes(a.code)) basic.push(a);
-    else functional.push(a);
+    if (BASIC_ORDER.includes(a.code)) basic.push(a)
+    else functional.push(a)
   }
   basic.sort(
-    (x, y) => BASIC_ORDER.indexOf(x.code) - BASIC_ORDER.indexOf(y.code),
-  );
-  functional.sort((x, y) => x.name.localeCompare(y.name, "vi"));
-  return { basic, functional };
-};
+    (x, y) => BASIC_ORDER.indexOf(x.code) - BASIC_ORDER.indexOf(y.code)
+  )
+  functional.sort((x, y) => x.name.localeCompare(y.name, "vi"))
+  return { basic, functional }
+}
 
 // Diacritic-insensitive normalize (so "duyet" matches "Duyệt")
 const normalize = (s: string) =>
@@ -219,247 +210,236 @@ const normalize = (s: string) =>
     .toLowerCase()
     .normalize("NFD")
     .replace(/[\u0300-\u036f]/g, "")
-    .replace(/đ/g, "d");
+    .replace(/đ/g, "d")
 
 export function ResourceListPage() {
-  const [loading, setLoading] = useState(true);
-  const [resources, setResources] = useState<Resource[]>([]);
-  const [allActions, setAllActions] = useState<Action[]>([]);
-  const [searchTerm, setSearchTerm] = useState("");
-  const [isRefreshing, setIsRefreshing] = useState(false);
-  const [isSyncing, setIsSyncing] = useState(false);
-  const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(
-    new Set(),
-  );
-
-  // Hàng nào đang bung để xem/sửa toàn bộ action (inline, không cần mở Sheet)
-  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set());
+  const [loading, setLoading] = useState(true)
+  const [resources, setResources] = useState<Resource[]>([])
+  const [allActions, setAllActions] = useState<Action[]>([])
+  const [searchTerm, setSearchTerm] = useState("")
+  const [isRefreshing, setIsRefreshing] = useState(false)
+  const [isSyncing, setIsSyncing] = useState(false)
+  const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(new Set())
+  const [view, setView] = useState<"list" | "grid">("grid")
+
+  // Hàng nào đang bung để xem/sửa toàn bộ action
+  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set())
 
   // Resource Dialog State
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const [editingResource, setEditingResource] = useState<Resource | null>(
-    null,
-  );
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
+  const [editingResource, setEditingResource] = useState<Resource | null>(null)
   const [formData, setFormData] = useState({
     code: "",
     name: "",
     group: "",
     description: "",
-  });
+  })
 
   // Action Manager State
-  const [isActionManagerOpen, setIsActionManagerOpen] = useState(false);
+  const [isActionManagerOpen, setIsActionManagerOpen] = useState(false)
   const [actionFormMode, setActionFormMode] = useState<
     "list" | "create" | "edit"
-  >("list");
-  const [editingAction, setEditingAction] = useState<Action | null>(null);
+  >("list")
+  const [editingAction, setEditingAction] = useState<Action | null>(null)
   const [actionFormData, setActionFormData] = useState({
     code: "",
     name: "",
     description: "",
-  });
+  })
 
   // Confirmation state
-  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [confirmOpen, setConfirmOpen] = useState(false)
   const [confirmType, setConfirmType] = useState<"action" | "resource" | null>(
-    null,
-  );
+    null
+  )
   const [itemToDelete, setItemToDelete] = useState<{
-    id: string;
-    name: string;
-  } | null>(null);
-  const [isDeleting, setIsDeleting] = useState(false);
+    id: string
+    name: string
+  } | null>(null)
+  const [isDeleting, setIsDeleting] = useState(false)
 
   // --- Data Fetching ---
   const fetchData = async () => {
     try {
-      setLoading(true);
+      setLoading(true)
       const [resResources, resActions] = await Promise.all([
         fetch("/api/resources?pageSize=1000"),
         fetch("/api/actions?pageSize=1000"),
-      ]);
+      ])
 
       if (!resResources.ok || !resActions.ok)
-        throw new Error("Failed to fetch data");
+        throw new Error("Failed to fetch data")
 
-      const resourcesData = await resResources.json();
-      const actionsData = await resActions.json();
+      const resourcesData = await resResources.json()
+      const actionsData = await resActions.json()
 
       const mappedResources = (resourcesData.items || []).map((r: any) => {
-        let actions: string[] = [];
+        let actions: string[] = []
         try {
           if (r.config) {
             const configObj =
-              typeof r.config === "string" ? JSON.parse(r.config) : r.config;
+              typeof r.config === "string" ? JSON.parse(r.config) : r.config
             if (configObj.actions && Array.isArray(configObj.actions)) {
-              actions = configObj.actions;
+              actions = configObj.actions
             }
           }
         } catch (_catchError) {
           // Ignore invalid config JSON
         }
-        return { ...r, actions };
-      });
+        return { ...r, actions }
+      })
 
-      setResources(mappedResources);
-      setAllActions(actionsData.items || []);
+      setResources(mappedResources)
+      setAllActions(actionsData.items || [])
     } 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()
+  }
 
   // --- Sync Resource ---
   const handleSync = async () => {
     try {
-      setIsSyncing(true);
+      setIsSyncing(true)
       const res = await fetch("/api/resources/sync", {
         method: "POST",
-      });
+      })
 
       if (!res.ok) {
-        await throwFetchError(res, "Lỗi khi đồng bộ tài nguyên");
+        await throwFetchError(res, "Lỗi khi đồng bộ tài nguyên")
       }
 
-      const data = await res.json();
-      toast.success(data.message || "Đồng bộ tài nguyên thành công");
+      const data = await res.json()
+      toast.success(data.message || "Đồng bộ tài nguyên thành công")
 
-      // Auto refresh data
-      handleRefresh();
+      handleRefresh()
     } catch (error: any) {
-      toast.error(errorMessage(error, "Không thể đồng bộ tài nguyên"));
+      toast.error(errorMessage(error, "Không thể đồng bộ tài nguyên"))
     } finally {
-      setIsSyncing(false);
+      setIsSyncing(false)
     }
-  };
+  }
 
-  // Quick lookup: action code -> action (for rendering granted chips by name)
+  // Quick lookup: action code -> action
   const actionMap = useMemo(() => {
-    const map = new Map<string, Action>();
-    for (const a of allActions) map.set(a.code, a);
-    return map;
-  }, [allActions]);
+    const map = new Map<string, Action>()
+    for (const a of allActions) map.set(a.code, a)
+    return map
+  }, [allActions])
 
-  // Chia action thành nhóm Cơ bản / Chức năng (Chức năng đã sắp A→Z) — dùng
-  // chung cho mọi hàng khi bung.
   const categorizedActions = useMemo(
     () => categorizeActions(allActions),
-    [allActions],
-  );
+    [allActions]
+  )
 
-  // --- Search: match a resource by its own text OR by any granted action
-  // (so "duyệt" finds resources that can approve). Resources without a match
-  // are hidden; everything else is grouped + ordered by section. ---
+  // --- Search: match resource text OR granted action name ---
   const { sections, filteredResourceTotal, isEmpty } = useMemo(() => {
-    const q = normalize(searchTerm.trim());
+    const q = normalize(searchTerm.trim())
 
     const matches = (r: Resource) => {
-      if (!q) return true;
+      if (!q) return true
       if (
         normalize(r.name).includes(q) ||
         normalize(r.code).includes(q) ||
         normalize(r.group || "").includes(q) ||
         normalize(getGroupMeta(r.group).label).includes(q)
       )
-        return true;
-      // match on a granted action's name/code
+        return true
       return (r.actions || []).some((code) => {
-        const a = actionMap.get(code);
+        const a = actionMap.get(code)
         return (
           normalize(a?.name || code).includes(q) || normalize(code).includes(q)
-        );
-      });
-    };
+        )
+      })
+    }
 
-    const rows = resources.filter(matches);
+    const rows = resources.filter(matches)
 
     if (q && rows.length === 0) {
       return {
         sections: [] as {
-          group: string;
-          meta: { icon: any; label: string; iconCls: string };
-          items: Resource[];
+          group: string
+          meta: { icon: any; label: string; iconCls: string }
+          items: Resource[]
         }[],
         filteredResourceTotal: 0,
         isEmpty: true,
-      };
+      }
     }
 
-    const grouped: Record<string, Resource[]> = {};
+    const grouped: Record<string, Resource[]> = {}
     for (const r of rows) {
-      const g = (r.group || "other").toLowerCase();
-      (grouped[g] ||= []).push(r);
+      const g = (r.group || "other").toLowerCase()
+      ;(grouped[g] ||= []).push(r)
     }
 
     const orderedSections = Object.keys(grouped)
       .sort((a, b) => {
-        const ia = GROUP_ORDER.indexOf(a);
-        const ib = GROUP_ORDER.indexOf(b);
-        if (ia !== -1 && ib !== -1) return ia - ib;
-        if (ia !== -1) return -1;
-        if (ib !== -1) return 1;
-        return a.localeCompare(b);
+        const ia = GROUP_ORDER.indexOf(a)
+        const ib = GROUP_ORDER.indexOf(b)
+        if (ia !== -1 && ib !== -1) return ia - ib
+        if (ia !== -1) return -1
+        if (ib !== -1) return 1
+        return a.localeCompare(b)
       })
       .map((group) => ({
         group,
         meta: getGroupMeta(group),
         items: grouped[group].sort((x, y) => x.name.localeCompare(y.name)),
-      }));
+      }))
 
     return {
       sections: orderedSections,
       filteredResourceTotal: rows.length,
       isEmpty: false,
-    };
-  }, [resources, actionMap, searchTerm]);
+    }
+  }, [resources, actionMap, searchTerm])
 
   const toggleGroup = (group: string) => {
     setCollapsedGroups((prev) => {
-      const next = new Set(prev);
-      if (next.has(group)) next.delete(group);
-      else next.add(group);
-      return next;
-    });
-  };
+      const next = new Set(prev)
+      if (next.has(group)) next.delete(group)
+      else next.add(group)
+      return next
+    })
+  }
 
   // --- Resource Actions ---
   const handleUpdateActions = async (
     resource: Resource,
-    newActions: string[],
+    newActions: string[]
   ) => {
     try {
       // Optimistic Update
       setResources((prev) =>
         prev.map((r) =>
-          r.id === resource.id ? { ...r, actions: newActions } : r,
-        ),
-      );
+          r.id === resource.id ? { ...r, actions: newActions } : r
+        )
+      )
 
-      // API Call
-      let currentConfig: any = {};
+      let currentConfig: any = {}
       try {
         if (typeof resource.config === "string") {
-          currentConfig = JSON.parse(resource.config);
+          currentConfig = JSON.parse(resource.config)
         } else if (typeof resource.config === "object") {
-          currentConfig = resource.config || {};
+          currentConfig = resource.config || {}
         }
       } catch (_catchError) {
         // Ignore invalid config JSON
       }
 
-      const newConfig = { ...currentConfig, actions: newActions };
+      const newConfig = { ...currentConfig, actions: newActions }
 
       const res = await fetch(`/api/resources/${resource.id}`, {
         method: "PUT",
@@ -468,136 +448,131 @@ export function ResourceListPage() {
           ...resource,
           config: JSON.stringify(newConfig),
         }),
-      });
+      })
 
       if (!res.ok) {
-        await throwFetchError(res, "Update failed");
+        await throwFetchError(res, "Update failed")
       }
     } catch (error) {
-      toast.error(errorMessage(error, "Không thể cập nhật quyền"));
+      toast.error(errorMessage(error, "Không thể cập nhật quyền"))
     }
-  };
+  }
 
   const toggleAction = (resource: Resource, actionCode: string) => {
-    const currentActions = resource.actions || [];
+    const currentActions = resource.actions || []
     const newActions = currentActions.includes(actionCode)
       ? currentActions.filter((a) => a !== actionCode)
-      : [...currentActions, actionCode];
-    handleUpdateActions(resource, newActions);
-  };
+      : [...currentActions, actionCode]
+    handleUpdateActions(resource, newActions)
+  }
 
-  // --- Bung hàng để xem/sửa toàn bộ action ngay tại chỗ ---
   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
+    })
+  }
 
   // --- Resource Dialog Handlers ---
   const openNewResource = () => {
-    setEditingResource(null);
-    setFormData({ code: "", name: "", group: "", description: "" });
-    setIsDialogOpen(true);
-  };
+    setEditingResource(null)
+    setFormData({ code: "", name: "", group: "", description: "" })
+    setIsDialogOpen(true)
+  }
 
   const openEditResource = (resource: Resource) => {
-    setEditingResource(resource);
+    setEditingResource(resource)
     setFormData({
       code: resource.code,
       name: resource.name,
       group: resource.group || "",
       description: resource.description || "",
-    });
-    setIsDialogOpen(true);
-  };
+    })
+    setIsDialogOpen(true)
+  }
 
   const handleSubmitResource = async () => {
     if (!formData.code || !formData.name) {
-      toast.error("Vui lòng nhập Mã và Tên tài nguyên");
-      return;
+      toast.error("Vui lòng nhập Mã và Tên tài nguyên")
+      return
     }
 
     try {
       const payload = {
         ...formData,
-        status: "active", // default status
-      };
+        status: "active",
+      }
 
-      let res;
+      let res
       if (editingResource) {
-        // Update
         res = await fetch(`/api/resources/${editingResource.id}`, {
           method: "PUT",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({ id: editingResource.id, ...payload }),
-        });
+        })
       } else {
-        // Create
         res = await fetch("/api/resources", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify(payload),
-        });
+        })
       }
 
       if (!res.ok) {
-        await throwFetchError(res, "Operation failed");
+        await throwFetchError(res, "Operation failed")
       }
 
-      const savedResource = await res.json();
+      const savedResource = await res.json()
       toast.success(
-        editingResource ? "Cập nhật thành công" : "Tạo mới thành công",
-      );
+        editingResource ? "Cập nhật thành công" : "Tạo mới thành công"
+      )
 
-      // Update local state
       if (editingResource) {
         setResources((prev) =>
           prev.map((r) =>
             r.id === savedResource.id
               ? { ...savedResource, actions: r.actions }
-              : r,
-          ),
-        );
+              : r
+          )
+        )
       } else {
-        // For new resource, actions starts empty
-        setResources((prev) => [{ ...savedResource, actions: [] }, ...prev]);
+        setResources((prev) => [{ ...savedResource, actions: [] }, ...prev])
       }
 
-      setIsDialogOpen(false);
+      setIsDialogOpen(false)
     } catch (error: any) {
-      toast.error(errorMessage(error, "Có lỗi xảy ra"));
+      toast.error(errorMessage(error, "Có lỗi xảy ra"))
     }
-  };
+  }
 
   // --- Action Manager Handlers ---
   const openActionManager = () => {
-    setIsActionManagerOpen(true);
-    setActionFormMode("list");
-  };
+    setIsActionManagerOpen(true)
+    setActionFormMode("list")
+  }
 
   const openNewAction = () => {
-    setEditingAction(null);
-    setActionFormData({ code: "", name: "", description: "" });
-    setActionFormMode("create");
-  };
+    setEditingAction(null)
+    setActionFormData({ code: "", name: "", description: "" })
+    setActionFormMode("create")
+  }
 
   const openEditAction = (action: Action) => {
-    setEditingAction(action);
+    setEditingAction(action)
     setActionFormData({
       code: action.code,
       name: action.name,
       description: action.description || "",
-    });
-    setActionFormMode("edit");
-  };
+    })
+    setActionFormMode("edit")
+  }
 
   const handleSubmitAction = async () => {
     if (!actionFormData.code || !actionFormData.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 {
@@ -605,260 +580,325 @@ export function ResourceListPage() {
         ...actionFormData,
         status: "active",
         description: actionFormData.description,
-      };
+      }
 
-      let res;
+      let res
       if (actionFormMode === "edit" && editingAction) {
         res = await fetch("/api/actions", {
           method: "PUT",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({ id: editingAction.id, ...payload }),
-        });
+        })
       } else {
         res = await fetch("/api/actions", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify(payload),
-        });
+        })
       }
 
       if (!res.ok) {
-        await throwFetchError(res, "Operation failed");
+        await throwFetchError(res, "Operation failed")
       }
 
-      const savedAction = await res.json();
+      const savedAction = await res.json()
 
       if (actionFormMode === "edit") {
         setAllActions((prev) =>
-          prev.map((a) => (a.id === savedAction.id ? savedAction : a)),
-        );
-        toast.success("Cập nhật hành động thành công");
+          prev.map((a) => (a.id === savedAction.id ? savedAction : a))
+        )
+        toast.success("Cập nhật hành động thành công")
       } else {
-        setAllActions((prev) => [savedAction, ...prev]);
-        toast.success("Tạo hành động thành công");
+        setAllActions((prev) => [savedAction, ...prev])
+        toast.success("Tạo hành động thành công")
       }
-      setActionFormMode("list");
+      setActionFormMode("list")
     } catch (error: any) {
-      toast.error(errorMessage(error, "Có lỗi xảy ra"));
+      toast.error(errorMessage(error, "Có lỗi xảy ra"))
     }
-  };
+  }
 
   const handleDeleteAction = (id: string, code: string) => {
-    setItemToDelete({ id, name: code });
-    setConfirmType("action");
-    setConfirmOpen(true);
-  };
+    setItemToDelete({ id, name: code })
+    setConfirmType("action")
+    setConfirmOpen(true)
+  }
 
   const handleDeleteResource = () => {
-    if (!editingResource) return;
-    setItemToDelete({ id: editingResource.id, name: editingResource.code });
-    setConfirmType("resource");
-    setConfirmOpen(true);
-  };
+    if (!editingResource) return
+    setItemToDelete({ id: editingResource.id, name: editingResource.code })
+    setConfirmType("resource")
+    setConfirmOpen(true)
+  }
+
+  // Xóa trực tiếp từ thẻ (không cần mở dialog sửa)
+  const requestDeleteResource = (resource: Resource) => {
+    setItemToDelete({ id: resource.id, name: resource.code })
+    setConfirmType("resource")
+    setConfirmOpen(true)
+  }
 
   const handleConfirmDelete = async () => {
-    if (!itemToDelete || !confirmType) return;
-    setIsDeleting(true);
+    if (!itemToDelete || !confirmType) return
+    setIsDeleting(true)
     try {
       if (confirmType === "action") {
         const res = await fetch(`/api/actions?id=${itemToDelete.id}`, {
           method: "DELETE",
-        });
+        })
         if (!res.ok) {
-          await throwFetchError(res, "Delete failed");
+          await throwFetchError(res, "Delete failed")
         }
-        setAllActions((prev) => prev.filter((a) => a.id !== itemToDelete.id));
-        toast.success("Xóa hành động thành công");
+        setAllActions((prev) => prev.filter((a) => a.id !== itemToDelete.id))
+        toast.success("Xóa hành động thành công")
       } else if (confirmType === "resource") {
         const res = await fetch(`/api/resources?id=${itemToDelete.id}`, {
           method: "DELETE",
-        });
+        })
         if (!res.ok) {
-          await throwFetchError(res, "Delete failed");
+          await throwFetchError(res, "Delete failed")
         }
-        setResources((prev) => prev.filter((r) => r.id !== itemToDelete.id));
-        toast.success("Xóa tài nguyên thành công");
-        setIsDialogOpen(false);
+        setResources((prev) => prev.filter((r) => r.id !== itemToDelete.id))
+        toast.success("Xóa tài nguyên thành công")
+        setIsDialogOpen(false)
       }
-      setConfirmOpen(false);
-      setItemToDelete(null);
-      setConfirmType(null);
+      setConfirmOpen(false)
+      setItemToDelete(null)
+      setConfirmType(null)
     } catch (error) {
-      toast.error(
-        errorMessage(
-          error,
-          `Không thể xóa ${confirmType === "action" ? "hành động" : "tài nguyên"}`,
-        ),
-      );
+      toast.error(errorMessage(error, `Không thể xóa ${
+          confirmType === "action" ? "hành động" : "tài nguyên"
+        }`))
     } finally {
-      setIsDeleting(false);
+      setIsDeleting(false)
     }
-  };
+  }
 
-  const isSearching = searchTerm.trim().length > 0;
-  const hasNoResources = !loading && resources.length === 0;
+  const isSearching = searchTerm.trim().length > 0
+  const hasNoResources = !loading && resources.length === 0
 
   const totalGroups = new Set(
-    resources.map((r) => (r.group || "other").toLowerCase()),
-  ).size;
-
-  const statItems: CompactStatItem[] = [
-    {
-      id: "resources",
-      label: "TÀI NGUYÊN",
-      value: resources.length,
-      icon: Shield,
-      colorTheme: "dark",
-    },
-    {
-      id: "groups",
-      label: "NHÓM QUYỀN",
-      value: totalGroups,
-      icon: Layers,
-      colorTheme: "green",
-    },
-    {
-      id: "actions",
-      label: "HÀNH ĐỘNG",
-      value: allActions.length,
-      icon: Zap,
-      colorTheme: "orange",
-    },
-  ];
-
-  // Utility icon buttons (sit on the search row to keep the header title roomy)
-  const utilityButtons = (
-    <>
-      <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>
-      <Button
-        variant="outline"
-        size="icon"
-        onClick={handleSync}
-        disabled={isSyncing}
-        title="Đồng bộ tài nguyên"
-      >
-        <DatabaseBackup
-          className={cn("h-4 w-4", isSyncing && "animate-pulse")}
-        />
-      </Button>
-      <Button
-        variant="outline"
-        size="icon"
-        onClick={openActionManager}
-        title="Quản lý hành động"
-      >
-        <Zap className="h-4 w-4" />
-      </Button>
-    </>
-  );
+    resources.map((r) => (r.group || "other").toLowerCase())
+  ).size
 
   return (
-    <div className="flex flex-col gap-2">
-      <CompactStatBar items={statItems} />
-
-      {/* Toolbar — đồng bộ ListToolbar (tiện ích + Thêm tài nguyên) */}
-      <ListToolbar
-        search={searchTerm}
-        onSearchChange={setSearchTerm}
-        searchPlaceholder="Tìm tài nguyên hoặc hành động…"
-        isFiltered={isSearching}
-        onReset={() => setSearchTerm("")}
-        onCreate={openNewResource}
-        createLabel="Thêm tài nguyên"
-        tableControls={utilityButtons}
-      />
-
-      {isSearching && !isEmpty && (
-        <p className="text-xs text-muted-foreground">
-          {filteredResourceTotal} tài nguyên khớp
-        </p>
-      )}
+    <div className="flex flex-col">
+      {/* ===== Bar navy 1 dòng — số liệu + tiện ích + Thêm tài nguyên ===== */}
+      <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">
+          <Shield 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ý tài nguyên
+        </h1>
+        <span className="hidden shrink-0 text-xs tabular-nums text-primary-foreground/70 md:inline">
+          {resources.length} tài nguyên · {totalGroups} nhóm ·{" "}
+          {allActions.length} hành độ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>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={handleSync}
+          disabled={isSyncing}
+          title="Đồng bộ tài nguyên"
+          className="h-8 w-8 shrink-0 text-primary-foreground/80 hover:bg-white/10 hover:text-primary-foreground"
+        >
+          <DatabaseBackup
+            className={cn("h-4 w-4", isSyncing && "animate-pulse")}
+          />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={openActionManager}
+          title="Quản lý hành động"
+          className="h-8 w-8 shrink-0 text-primary-foreground/80 hover:bg-white/10 hover:text-primary-foreground"
+        >
+          <Zap className="h-4 w-4" />
+        </Button>
+        <Button
+          onClick={openNewResource}
+          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 tài nguyên</span>
+          <span className="ml-1.5 sm:hidden">Thêm</span>
+        </Button>
+      </div>
 
-      {/* --- Body --- */}
-      {loading && !isRefreshing ? (
-        <div className="space-y-2 rounded-lg border border-border bg-card p-4">
-          {Array.from({ length: 7 }).map((_, i) => (
-            <Skeleton key={i} className="h-14 w-full" />
-          ))}
+      {/* ===== Khối trắng liền: toolbar sticky + nhóm + hàng tài nguyên ===== */}
+      <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-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 tài nguyên hoặc hành động…"
+              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>
+          <p className="ml-auto whitespace-nowrap text-xs text-muted-foreground">
+            {isSearching && !isEmpty ? (
+              <>
+                <span className="font-semibold tabular-nums text-foreground">
+                  {filteredResourceTotal}
+                </span>{" "}
+                khớp
+              </>
+            ) : (
+              <>
+                <span className="font-semibold tabular-nums text-foreground">
+                  {resources.length}
+                </span>{" "}
+                tài nguyên
+              </>
+            )}
+          </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={() => 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"
+              )}
+            >
+              <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>
-      ) : isEmpty || (hasNoResources && !isSearching) ? (
-        <EmptyState
-          searching={isSearching}
-          onClear={() => setSearchTerm("")}
-          onCreate={openNewResource}
-        />
-      ) : (
-        <div className="space-y-3">
-          {sections.map((section) => {
-            const collapsed = collapsedGroups.has(section.group);
-            const GroupIcon = section.meta.icon;
+
+        {/* --- Body --- */}
+        {loading && !isRefreshing ? (
+          <div className="space-y-2 p-4">
+            {Array.from({ length: 7 }).map((_, i) => (
+              <Skeleton key={i} className="h-14 w-full" />
+            ))}
+          </div>
+        ) : isEmpty || (hasNoResources && !isSearching) ? (
+          <EmptyState
+            searching={isSearching}
+            onClear={() => setSearchTerm("")}
+            onCreate={openNewResource}
+          />
+        ) : (
+          sections.map((section) => {
+            const collapsed = collapsedGroups.has(section.group)
+            const GroupIcon = section.meta.icon
             return (
-              <div
-                key={section.group}
-                className="overflow-hidden rounded-lg border border-border bg-card shadow-sm"
-              >
-                {/* Section header — nền trắng, phân tách bằng border */}
+              <section key={section.group}>
+                {/* Dòng tiêu đề nhóm — mảnh, trong cùng khối */}
                 <button
                   type="button"
                   onClick={() => toggleGroup(section.group)}
-                  className="flex w-full items-center gap-2 border-b border-border bg-card px-4 py-2.5 text-left transition-colors hover:bg-muted/40"
+                  className="flex w-full items-center gap-2 border-b border-border bg-card px-4 py-2 text-left transition-colors hover:bg-muted/40"
                 >
                   {collapsed ? (
-                    <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                    <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground" />
                   ) : (
-                    <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                    <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground" />
                   )}
                   <span
                     className={cn(
-                      "flex h-6 w-6 items-center justify-center rounded-md",
-                      section.meta.iconCls,
+                      "flex h-6 w-6 shrink-0 items-center justify-center rounded-md",
+                      section.meta.iconCls
                     )}
                   >
                     <GroupIcon className="h-3.5 w-3.5" />
                   </span>
-                  <span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                  <span className="truncate text-xs font-semibold uppercase tracking-wide text-foreground">
                     {section.meta.label}
                   </span>
-                  <Badge
-                    variant="secondary"
-                    className="ml-1 h-5 px-1.5 font-normal"
-                  >
-                    {section.items.length}
-                  </Badge>
+                  <span className="whitespace-nowrap text-[11px] tabular-nums text-muted-foreground">
+                    {section.items.length} tài nguyên
+                  </span>
                 </button>
 
-                {/* Resource rows */}
-                {!collapsed && (
-                  <ul className="divide-y divide-border">
-                    {section.items.map((resource) => (
-                      <ResourceRow
-                        key={resource.id}
-                        resource={resource}
-                        actionMap={actionMap}
-                        allActions={allActions}
-                        categorized={categorizedActions}
-                        expanded={expandedRows.has(resource.id)}
-                        onToggleExpand={() => toggleRow(resource.id)}
-                        onToggleAction={toggleAction}
-                        onUpdateActions={handleUpdateActions}
-                        onEditResource={openEditResource}
-                      />
-                    ))}
-                  </ul>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      )}
+                {/* Resource rows / cards */}
+                {!collapsed &&
+                  (view === "list" ? (
+                    <ul className="divide-y divide-border/70 border-b border-border">
+                      {section.items.map((resource) => (
+                        <ResourceRow
+                          key={resource.id}
+                          resource={resource}
+                          actionMap={actionMap}
+                          allActions={allActions}
+                          categorized={categorizedActions}
+                          expanded={expandedRows.has(resource.id)}
+                          onToggleExpand={() => toggleRow(resource.id)}
+                          onToggleAction={toggleAction}
+                          onUpdateActions={handleUpdateActions}
+                          onEditResource={openEditResource}
+                        />
+                      ))}
+                    </ul>
+                  ) : (
+                    <div className="grid grid-cols-1 gap-3 border-b border-border p-3 sm:grid-cols-2 xl:grid-cols-3">
+                      {section.items.map((resource, index) => (
+                        <ResourceCard
+                          key={resource.id}
+                          index={index}
+                          resource={resource}
+                          actionMap={actionMap}
+                          allActions={allActions}
+                          categorized={categorizedActions}
+                          expanded={expandedRows.has(resource.id)}
+                          onToggleExpand={() => toggleRow(resource.id)}
+                          onToggleAction={toggleAction}
+                          onUpdateActions={handleUpdateActions}
+                          onEditResource={openEditResource}
+                          onDeleteResource={requestDeleteResource}
+                        />
+                      ))}
+                    </div>
+                  ))}
+              </section>
+            )
+          })
+        )}
+      </div>
 
       {/* --- Create/Edit Resource Dialog --- */}
       <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
@@ -878,7 +918,7 @@ export function ResourceListPage() {
                   setFormData({ ...formData, code: e.target.value })
                 }
                 placeholder="vd: sales-order"
-                disabled={!!editingResource} // Disable code editing
+                disabled={!!editingResource}
               />
             </div>
             <div className="grid gap-2">
@@ -1122,42 +1162,29 @@ export function ResourceListPage() {
         loading={isDeleting}
       />
     </div>
-  );
+  )
 }
 
-// --- Resource row: tóm tắt quyền đã gán; bấm để bung xem/sửa TOÀN BỘ action ---
-const MAX_CHIPS = 8;
-
-function ResourceRow({
+// --- Editor quyền của 1 tài nguyên (dùng chung cho dòng bung + thẻ bung):
+// Cơ bản/Chức năng, tách Đã cấp/Chưa cấp, bấm để bật/tắt ngay. ---
+function ResourceActionsEditor({
   resource,
-  actionMap,
   allActions,
   categorized,
-  expanded,
-  onToggleExpand,
   onToggleAction,
   onUpdateActions,
-  onEditResource,
 }: {
-  resource: Resource;
-  actionMap: Map<string, Action>;
-  allActions: Action[];
-  categorized: { basic: Action[]; functional: Action[] };
-  expanded: boolean;
-  onToggleExpand: () => void;
-  onToggleAction: (resource: Resource, actionCode: string) => void;
-  onUpdateActions: (resource: Resource, actions: string[]) => void;
-  onEditResource: (resource: Resource) => void;
+  resource: Resource
+  allActions: Action[]
+  categorized: { basic: Action[]; functional: Action[] }
+  onToggleAction: (resource: Resource, actionCode: string) => void
+  onUpdateActions: (resource: Resource, actions: string[]) => void
 }) {
-  const granted = resource.actions || [];
-  const grantedSet = new Set(granted);
-  const shown = granted.slice(0, MAX_CHIPS);
-  const overflow = granted.length - shown.length;
+  const granted = resource.actions || []
+  const grantedSet = new Set(granted)
 
-  // 1 dòng action trong panel bung: ô tick (tô màu theo loại khi đã cấp) +
-  // tên + mô tả chức năng.
   const renderItem = (action: Action) => {
-    const on = grantedSet.has(action.code);
+    const on = grantedSet.has(action.code)
     return (
       <button
         key={action.code}
@@ -1170,7 +1197,7 @@ function ResourceRow({
             "mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded border",
             on
               ? ACTION_TONES[getActionTone(action.code)]
-              : "border-border bg-transparent text-transparent",
+              : "border-border bg-transparent text-transparent"
           )}
         >
           <Check className="h-3 w-3" />
@@ -1179,7 +1206,7 @@ function ResourceRow({
           <span
             className={cn(
               "block text-xs leading-tight",
-              on ? "font-medium text-foreground" : "text-muted-foreground",
+              on ? "font-medium text-foreground" : "text-muted-foreground"
             )}
           >
             {action.name}
@@ -1191,15 +1218,13 @@ function ResourceRow({
           )}
         </span>
       </button>
-    );
-  };
+    )
+  }
 
-  // 1 nhóm action (Cơ bản / Chức năng) → tách Đã cấp / Chưa cấp, mỗi phần là
-  // danh sách tối đa 3 cột.
   const renderCategory = (label: string, list: Action[]) => {
-    if (list.length === 0) return null;
-    const grantedList = list.filter((a) => grantedSet.has(a.code));
-    const ungrantedList = list.filter((a) => !grantedSet.has(a.code));
+    if (list.length === 0) return null
+    const grantedList = list.filter((a) => grantedSet.has(a.code))
+    const ungrantedList = list.filter((a) => !grantedSet.has(a.code))
     return (
       <div key={label}>
         <p className="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-foreground/70">
@@ -1228,8 +1253,85 @@ function ResourceRow({
           )}
         </div>
       </div>
-    );
-  };
+    )
+  }
+
+  return (
+    <div>
+      <div className="mb-2 flex items-center justify-between gap-2">
+        <span className="text-xs text-muted-foreground">
+          Đã gán{" "}
+          <span className="font-medium text-foreground">{granted.length}</span>/
+          {allActions.length} quyền
+        </span>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 px-2 text-xs"
+            onClick={() =>
+              onUpdateActions(
+                resource,
+                allActions.map((a) => a.code)
+              )
+            }
+            disabled={granted.length === allActions.length}
+          >
+            Chọn tất cả
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 px-2 text-xs"
+            onClick={() => onUpdateActions(resource, [])}
+            disabled={granted.length === 0}
+          >
+            Bỏ tất cả
+          </Button>
+        </div>
+      </div>
+
+      {allActions.length === 0 ? (
+        <p className="py-2 text-xs text-muted-foreground">
+          Chưa có hành động nào. Tạo hành động ở mục "Quản lý hành động".
+        </p>
+      ) : (
+        <div className="space-y-3">
+          {renderCategory("Cơ bản", categorized.basic)}
+          {renderCategory("Chức năng", categorized.functional)}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// --- Resource row (chế độ dòng): tóm tắt quyền; bấm để bung editor ---
+const MAX_CHIPS = 8
+
+function ResourceRow({
+  resource,
+  actionMap,
+  allActions,
+  categorized,
+  expanded,
+  onToggleExpand,
+  onToggleAction,
+  onUpdateActions,
+  onEditResource,
+}: {
+  resource: Resource
+  actionMap: Map<string, Action>
+  allActions: Action[]
+  categorized: { basic: Action[]; functional: Action[] }
+  expanded: boolean
+  onToggleExpand: () => void
+  onToggleAction: (resource: Resource, actionCode: string) => void
+  onUpdateActions: (resource: Resource, actions: string[]) => void
+  onEditResource: (resource: Resource) => void
+}) {
+  const granted = resource.actions || []
+  const shown = granted.slice(0, MAX_CHIPS)
+  const overflow = granted.length - shown.length
 
   return (
     <li>
@@ -1240,8 +1342,8 @@ function ResourceRow({
         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"
@@ -1250,7 +1352,7 @@ function ResourceRow({
         <div
           className={cn(
             "flex h-9 w-9 shrink-0 items-center justify-center rounded-md",
-            getGroupMeta(resource.group).iconCls,
+            getGroupMeta(resource.group).iconCls
           )}
         >
           <DynamicIcon
@@ -1259,7 +1361,7 @@ function ResourceRow({
           />
         </div>
 
-        {/* Identity + granted-chip summary (ẩn khi đã bung — bên dưới hiện đủ) */}
+        {/* Identity + granted-chip summary */}
         <div className="min-w-0 flex-1">
           <div className="flex items-baseline gap-2">
             <span className="truncate text-sm font-medium text-foreground">
@@ -1285,7 +1387,7 @@ function ResourceRow({
                       key={code}
                       className={cn(
                         "inline-flex items-center rounded border px-1.5 py-0.5 text-[11px]",
-                        ACTION_TONES[getActionTone(code)],
+                        ACTION_TONES[getActionTone(code)]
                       )}
                     >
                       {actionMap.get(code)?.name || code}
@@ -1309,10 +1411,10 @@ function ResourceRow({
         <button
           type="button"
           onClick={(e) => {
-            e.stopPropagation();
-            onEditResource(resource);
+            e.stopPropagation()
+            onEditResource(resource)
           }}
-          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 thông tin tài nguyên"
         >
           <Pencil className="h-3.5 w-3.5" />
@@ -1320,63 +1422,200 @@ function ResourceRow({
         <ChevronRight
           className={cn(
             "h-4 w-4 shrink-0 text-muted-foreground/60 transition-transform",
-            expanded && "rotate-90",
+            expanded && "rotate-90"
           )}
         />
       </div>
 
-      {/* Bung: toàn bộ action của resource, bấm chip để bật/tắt ngay — nền trắng */}
+      {/* Bung: editor quyền — nền trắng */}
       {expanded && (
         <div className="border-t border-border bg-card px-4 py-3">
-          <div className="mb-2 flex items-center justify-between gap-2">
-            <span className="text-xs text-muted-foreground">
-              Đã gán{" "}
-              <span className="font-medium text-foreground">
-                {granted.length}
-              </span>
-              /{allActions.length} quyền
-            </span>
-            <div className="flex items-center gap-1">
-              <Button
-                variant="ghost"
-                size="sm"
-                className="h-7 px-2 text-xs"
-                onClick={() =>
-                  onUpdateActions(
-                    resource,
-                    allActions.map((a) => a.code),
-                  )
-                }
-                disabled={granted.length === allActions.length}
-              >
-                Chọn tất cả
-              </Button>
-              <Button
-                variant="ghost"
-                size="sm"
-                className="h-7 px-2 text-xs"
-                onClick={() => onUpdateActions(resource, [])}
-                disabled={granted.length === 0}
-              >
-                Bỏ tất cả
-              </Button>
+          <ResourceActionsEditor
+            resource={resource}
+            allActions={allActions}
+            categorized={categorized}
+            onToggleAction={onToggleAction}
+            onUpdateActions={onUpdateActions}
+          />
+        </div>
+      )}
+    </li>
+  )
+}
+
+// --- Thẻ tài nguyên (grid, MẶC ĐỊNH) — phong cách thẻ vai trò/hành động:
+// icon nhóm màu + tên/mã + #stt, chip quyền preview, KHỐI SỐ LIỆU đóng khung,
+// hàng nút Sửa/Xóa. Bấm thẻ bung editor quyền (thẻ giãn full hàng). ---
+const CARD_MAX_CHIPS = 6
+
+function ResourceCard({
+  index,
+  resource,
+  actionMap,
+  allActions,
+  categorized,
+  expanded,
+  onToggleExpand,
+  onToggleAction,
+  onUpdateActions,
+  onEditResource,
+  onDeleteResource,
+}: {
+  index: number
+  resource: Resource
+  actionMap: Map<string, Action>
+  allActions: Action[]
+  categorized: { basic: Action[]; functional: Action[] }
+  expanded: boolean
+  onToggleExpand: () => void
+  onToggleAction: (resource: Resource, actionCode: string) => void
+  onUpdateActions: (resource: Resource, actions: string[]) => void
+  onEditResource: (resource: Resource) => void
+  onDeleteResource: (resource: Resource) => void
+}) {
+  const granted = resource.actions || []
+  const shown = granted.slice(0, CARD_MAX_CHIPS)
+  const overflow = granted.length - shown.length
+  const ungrantedCount = Math.max(allActions.length - granted.length, 0)
+
+  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 nhóm màu + tên/mã | #stt */}
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex min-w-0 items-center gap-2.5">
+          <div
+            className={cn(
+              "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg",
+              getGroupMeta(resource.group).iconCls
+            )}
+          >
+            <DynamicIcon
+              name={(resource.icon as any) || "FileCode"}
+              className="h-4 w-4"
+            />
+          </div>
+          <div className="min-w-0">
+            <div className="truncate text-[15px] font-bold leading-tight text-foreground">
+              {resource.name}
             </div>
+            <code className="font-mono text-[11px] text-muted-foreground">
+              {resource.code}
+            </code>
           </div>
+        </div>
+        <span className="shrink-0 font-mono text-[11px] tabular-nums text-muted-foreground/60">
+          #{index + 1}
+        </span>
+      </div>
 
-          {allActions.length === 0 ? (
-            <p className="py-2 text-xs text-muted-foreground">
-              Chưa có hành động nào. Tạo hành động ở mục “Quản lý hành động”.
-            </p>
-          ) : (
-            <div className="space-y-3">
-              {renderCategory("Cơ bản", categorized.basic)}
-              {renderCategory("Chức năng", categorized.functional)}
-            </div>
-          )}
+      {/* Preview chip quyền đã cấp (giữ chiều cao đều thẻ) */}
+      <div className="mt-2 flex min-h-[3.25rem] flex-wrap content-start items-start gap-1">
+        {granted.length === 0 ? (
+          <span className="text-xs italic text-muted-foreground">
+            Chưa gán quyền
+          </span>
+        ) : (
+          <>
+            {shown.map((code) => (
+              <span
+                key={code}
+                className={cn(
+                  "inline-flex items-center rounded border px-1.5 py-0.5 text-[11px]",
+                  ACTION_TONES[getActionTone(code)]
+                )}
+              >
+                {actionMap.get(code)?.name || code}
+              </span>
+            ))}
+            {overflow > 0 && (
+              <span className="px-1 text-[11px] text-muted-foreground">
+                +{overflow}
+              </span>
+            )}
+          </>
+        )}
+      </div>
+
+      {/* Khối số liệu đóng khung — 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-primary">
+            {granted.length}
+          </span>
+          <span className="text-[9px] font-bold uppercase tracking-wider text-muted-foreground">
+            Đã cấp
+          </span>
+        </div>
+        <div className="flex flex-1 flex-col items-center">
+          <span className="mb-1 text-[16px] font-black leading-none tabular-nums text-muted-foreground">
+            {ungrantedCount}
+          </span>
+          <span className="text-[9px] font-bold uppercase tracking-wider text-muted-foreground">
+            Chưa cấp
+          </span>
+        </div>
+      </div>
+
+      {/* Hàng nút dưới chân */}
+      <div className="flex gap-2 pt-3">
+        <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()
+            onEditResource(resource)
+          }}
+        >
+          <Pencil className="mr-1.5 h-3.5 w-3.5 text-amber-500" />
+          Sửa
+        </Button>
+        <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()
+            onDeleteResource(resource)
+          }}
+        >
+          <Trash2 className="mr-1.5 h-3.5 w-3.5" />
+          Xóa
+        </Button>
+      </div>
+
+      {/* Bung: editor quyền (thẻ giãn full hàng); chặn click lan ra card */}
+      {expanded && (
+        <div
+          className="mt-3 border-t border-border pt-3"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <ResourceActionsEditor
+            resource={resource}
+            allActions={allActions}
+            categorized={categorized}
+            onToggleAction={onToggleAction}
+            onUpdateActions={onUpdateActions}
+          />
         </div>
       )}
-    </li>
-  );
+    </div>
+  )
 }
 
 // --- Empty state ---
@@ -1385,12 +1624,12 @@ function EmptyState({
   onClear,
   onCreate,
 }: {
-  searching: boolean;
-  onClear: () => void;
-  onCreate: () => void;
+  searching: boolean
+  onClear: () => void
+  onCreate: () => void
 }) {
   return (
-    <div className="flex flex-col items-center justify-center rounded-lg border border-dashed border-border bg-card py-20 text-center">
+    <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>
@@ -1417,5 +1656,5 @@ function EmptyState({
         </Button>
       )}
     </div>
-  );
+  )
 }