@goplusvn/core 0.1.46 → 0.1.48

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

@@ -5,7 +5,7 @@
 // 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 { useEffect, useMemo, useState } from "react";
 import {
   Badge,
   Button,
@@ -26,8 +26,8 @@ import {
   SelectValue,
   Skeleton,
   Textarea,
-} from "../../ui"
-import { toast } from "sonner"
+} from "../../ui";
+import { toast } from "sonner";
 import {
   Box,
   Boxes,
@@ -37,8 +37,6 @@ import {
   ChevronRight,
   ClipboardList,
   DatabaseBackup,
-  LayoutGrid,
-  List,
   Pencil,
   Plus,
   RefreshCw,
@@ -50,111 +48,37 @@ import {
   Truck,
   Users,
   Wallet,
-  X,
   Zap,
-} from "lucide-react"
-
-import { errorMessage, throwFetchError } from "../lib/fetch-error"
-import { cn } from "../../utils"
+} from "lucide-react";
 
+import { errorMessage, throwFetchError } from "../lib/fetch-error";
+import { deleteActionById, saveAction } from "./lib/action-api";
+import { RbacPageBar, RbacStickyToolbar } from "./lib/rbac-page-shell";
+import { cn } from "../../utils";
+import { getGroupMeta, getGroupOrder } from "./lib/group-taxonomy";
 
 // --- 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 ---
-const GROUP_META: Record<
-  string,
-  { icon: any; label: string; iconCls: string }
-> = {
-  sales: {
-    icon: ShoppingBag,
-    label: "Bán hàng",
-    iconCls: "text-blue-600 bg-blue-100 dark:text-blue-400 dark:bg-blue-500/15",
-  },
-  purchase: {
-    icon: ClipboardList,
-    label: "Mua hàng",
-    iconCls:
-      "text-amber-600 bg-amber-100 dark:text-amber-400 dark:bg-amber-500/15",
-  },
-  inventory: {
-    icon: Truck,
-    label: "Kho",
-    iconCls:
-      "text-emerald-600 bg-emerald-100 dark:text-emerald-400 dark:bg-emerald-500/15",
-  },
-  finance: {
-    icon: Wallet,
-    label: "Tài chính",
-    iconCls:
-      "text-violet-600 bg-violet-100 dark:text-violet-400 dark:bg-violet-500/15",
-  },
-  hr: {
-    icon: Users,
-    label: "Nhân sự",
-    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",
-  },
-  users: {
-    icon: Users,
-    label: "Người dùng",
-    iconCls:
-      "text-fuchsia-600 bg-fuchsia-100 dark:text-fuchsia-400 dark:bg-fuchsia-500/15",
-  },
-  system: {
-    icon: Settings,
-    label: "Hệ thống",
-    iconCls:
-      "text-slate-600 bg-slate-200 dark:text-slate-300 dark:bg-slate-500/20",
-  },
-  other: {
-    icon: Box,
-    label: "Khác",
-    iconCls:
-      "text-slate-600 bg-slate-200 dark:text-slate-300 dark:bg-slate-500/20",
-  },
-}
-
-const GROUP_ORDER = [
-  "sales",
-  "purchase",
-  "inventory",
-  "finance",
-  "hr",
-  "master",
-  "users",
-  "system",
-  "other",
-]
-
-const getGroupMeta = (group: string) =>
-  GROUP_META[group?.toLowerCase()] || {
-    icon: Box,
-    label: group || "Khác",
-    iconCls:
-      "text-slate-600 bg-slate-200 dark:text-slate-300 dark:bg-slate-500/20",
-  }
-
+// Taxonomy nhóm resource: default + registerResourceGroupMeta cho app —
+// sống ở ./lib/group-taxonomy (OCP: app thêm nhóm không cần sửa core).
 // --- 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",
@@ -167,16 +91,16 @@ 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"
-}
+  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 = [
@@ -188,21 +112,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) =>
@@ -210,249 +134,253 @@ const normalize = (s: string) =>
     .toLowerCase()
     .normalize("NFD")
     .replace(/[\u0300-\u036f]/g, "")
-    .replace(/đ/g, "d")
+    .replace(/đ/g, "d");
 
 export interface ResourceListPageProps {
   /** Danh mục do Permission Registry trong code quản lý: ẩn nút Thêm/Sync/
    *  Action-manager, thao tác sửa/xóa hiện toast hướng dẫn thay vì mở dialog. */
-  readOnly?: boolean
+  readOnly?: boolean;
 }
 
-export function ResourceListPage({ readOnly = false }: ResourceListPageProps = {}) {
+export function ResourceListPage({
+  readOnly = false,
+}: ResourceListPageProps = {}) {
   const registryToast = () =>
     toast.info("Danh mục do Permission Registry quản lý", {
       description:
         "Sửa file <feature>.permissions.ts trong code rồi chạy rbac-sync — không chỉnh tay ở đây.",
-    })
+    });
   const guardWrite = <T extends (...args: any[]) => any>(fn: T): T =>
-    (readOnly ? ((() => registryToast()) as unknown as T) : fn)
-  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")
+    readOnly ? ((() => registryToast()) as unknown as T) : fn;
+  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())
+  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()
-  }, [])
+    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");
 
-      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
   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]);
 
   const categorizedActions = useMemo(
     () => categorizeActions(allActions),
-    [allActions]
-  )
+    [allActions],
+  );
 
   // --- 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
+        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 = getGroupOrder().indexOf(a);
+        const ib = getGroupOrder().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,
+        ),
+      );
 
-      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",
@@ -461,253 +389,232 @@ export function ResourceListPage({ readOnly = false }: ResourceListPageProps = {
           ...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);
+  };
 
   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",
-      }
+      };
 
-      let res
+      let res;
       if (editingResource) {
         res = await fetch(`/api/resources/${editingResource.id}`, {
           method: "PUT",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({ id: editingResource.id, ...payload }),
-        })
+        });
       } else {
         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",
+      );
 
       if (editingResource) {
         setResources((prev) =>
           prev.map((r) =>
             r.id === savedResource.id
               ? { ...savedResource, actions: r.actions }
-              : r
-          )
-        )
+              : r,
+          ),
+        );
       } else {
-        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 {
-      const payload = {
-        ...actionFormData,
-        status: "active",
-        description: actionFormData.description,
-      }
-
-      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")
-      }
-
-      const savedAction = await res.json()
+      const savedAction = await saveAction<Action>(
+        actionFormData,
+        actionFormMode === "edit" && editingAction
+          ? editingAction.id
+          : undefined,
+      );
 
       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)
-  }
+    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")
-        }
-        setAllActions((prev) => prev.filter((a) => a.id !== itemToDelete.id))
-        toast.success("Xóa hành động thành công")
+        await deleteActionById(itemToDelete.id);
+        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
+    resources.map((r) => (r.group || "other").toLowerCase()),
+  ).size;
 
   return (
     <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>
+      <RbacPageBar
+        icon={<Shield className="h-4 w-4 text-primary-foreground/80" />}
+        title="Quản lý tài nguyên"
+        subtitle={
+          <>
+            {resources.length} tài nguyên · {totalGroups} nhóm ·{" "}
+            {allActions.length} hành động
+          </>
+        }
+      >
         <Button
           variant="ghost"
           size="icon"
@@ -753,7 +660,7 @@ export function ResourceListPage({ readOnly = false }: ResourceListPageProps = {
             </Button>
           </>
         )}
-      </div>
+      </RbacPageBar>
 
       {readOnly && (
         <div className="mt-3 flex items-start gap-2 rounded-lg border border-border bg-muted/40 px-3 py-2 text-xs text-muted-foreground lg:mx-3">
@@ -774,73 +681,17 @@ export function ResourceListPage({ readOnly = false }: ResourceListPageProps = {
       {/* ===== 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>
+        <RbacStickyToolbar
+          searchTerm={searchTerm}
+          onSearchChange={setSearchTerm}
+          searchPlaceholder="Tìm tài nguyên hoặc hành động…"
+          searchMaxWidthClass="sm:max-w-80"
+          count={resources.length}
+          countLabel="tài nguyên"
+          matchedCount={isEmpty ? undefined : filteredResourceTotal}
+          view={view}
+          onViewChange={setView}
+        />
 
         {/* --- Body --- */}
         {loading && !isRefreshing ? (
@@ -857,8 +708,8 @@ export function ResourceListPage({ readOnly = false }: ResourceListPageProps = {
           />
         ) : (
           sections.map((section) => {
-            const collapsed = collapsedGroups.has(section.group)
-            const GroupIcon = section.meta.icon
+            const collapsed = collapsedGroups.has(section.group);
+            const GroupIcon = section.meta.icon;
             return (
               <section key={section.group}>
                 {/* Dòng tiêu đề nhóm — mảnh, trong cùng khối */}
@@ -875,7 +726,7 @@ export function ResourceListPage({ readOnly = false }: ResourceListPageProps = {
                   <span
                     className={cn(
                       "flex h-6 w-6 shrink-0 items-center justify-center rounded-md",
-                      section.meta.iconCls
+                      section.meta.iconCls,
                     )}
                   >
                     <GroupIcon className="h-3.5 w-3.5" />
@@ -928,7 +779,7 @@ export function ResourceListPage({ readOnly = false }: ResourceListPageProps = {
                     </div>
                   ))}
               </section>
-            )
+            );
           })
         )}
       </div>
@@ -1195,7 +1046,7 @@ export function ResourceListPage({ readOnly = false }: ResourceListPageProps = {
         loading={isDeleting}
       />
     </div>
-  )
+  );
 }
 
 // --- Editor quyền của 1 tài nguyên (dùng chung cho dòng bung + thẻ bung):
@@ -1207,17 +1058,17 @@ function ResourceActionsEditor({
   onToggleAction,
   onUpdateActions,
 }: {
-  resource: Resource
-  allActions: Action[]
-  categorized: { basic: Action[]; functional: Action[] }
-  onToggleAction: (resource: Resource, actionCode: string) => void
-  onUpdateActions: (resource: Resource, actions: string[]) => 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 granted = resource.actions || [];
+  const grantedSet = new Set(granted);
 
   const renderItem = (action: Action) => {
-    const on = grantedSet.has(action.code)
+    const on = grantedSet.has(action.code);
     return (
       <button
         key={action.code}
@@ -1230,7 +1081,7 @@ function ResourceActionsEditor({
             "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" />
@@ -1239,7 +1090,7 @@ function ResourceActionsEditor({
           <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}
@@ -1251,13 +1102,13 @@ function ResourceActionsEditor({
           )}
         </span>
       </button>
-    )
-  }
+    );
+  };
 
   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">
@@ -1286,8 +1137,8 @@ function ResourceActionsEditor({
           )}
         </div>
       </div>
-    )
-  }
+    );
+  };
 
   return (
     <div>
@@ -1305,7 +1156,7 @@ function ResourceActionsEditor({
             onClick={() =>
               onUpdateActions(
                 resource,
-                allActions.map((a) => a.code)
+                allActions.map((a) => a.code),
               )
             }
             disabled={granted.length === allActions.length}
@@ -1335,11 +1186,11 @@ function ResourceActionsEditor({
         </div>
       )}
     </div>
-  )
+  );
 }
 
 // --- Resource row (chế độ dòng): tóm tắt quyền; bấm để bung editor ---
-const MAX_CHIPS = 8
+const MAX_CHIPS = 8;
 
 function ResourceRow({
   resource,
@@ -1352,19 +1203,19 @@ function ResourceRow({
   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;
+  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
+  const granted = resource.actions || [];
+  const shown = granted.slice(0, MAX_CHIPS);
+  const overflow = granted.length - shown.length;
 
   return (
     <li>
@@ -1375,8 +1226,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"
@@ -1385,7 +1236,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
@@ -1420,7 +1271,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}
@@ -1444,8 +1295,8 @@ 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-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"
@@ -1455,7 +1306,7 @@ function ResourceRow({
         <ChevronRight
           className={cn(
             "h-4 w-4 shrink-0 text-muted-foreground/60 transition-transform",
-            expanded && "rotate-90"
+            expanded && "rotate-90",
           )}
         />
       </div>
@@ -1473,13 +1324,13 @@ function ResourceRow({
         </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
+const CARD_MAX_CHIPS = 6;
 
 function ResourceCard({
   index,
@@ -1494,22 +1345,22 @@ function ResourceCard({
   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
+  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)
+  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
@@ -1519,13 +1370,13 @@ function ResourceCard({
       onClick={onToggleExpand}
       onKeyDown={(e) => {
         if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault()
-          onToggleExpand()
+          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"
+        expanded && "col-span-full border-primary/40",
       )}
     >
       {/* Header: icon nhóm màu + tên/mã | #stt */}
@@ -1534,7 +1385,7 @@ function ResourceCard({
           <div
             className={cn(
               "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg",
-              getGroupMeta(resource.group).iconCls
+              getGroupMeta(resource.group).iconCls,
             )}
           >
             <DynamicIcon
@@ -1569,7 +1420,7 @@ function ResourceCard({
                 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}
@@ -1611,8 +1462,8 @@ function ResourceCard({
           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)
+            e.stopPropagation();
+            onEditResource(resource);
           }}
         >
           <Pencil className="mr-1.5 h-3.5 w-3.5 text-amber-500" />
@@ -1623,8 +1474,8 @@ function ResourceCard({
           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)
+            e.stopPropagation();
+            onDeleteResource(resource);
           }}
         >
           <Trash2 className="mr-1.5 h-3.5 w-3.5" />
@@ -1648,7 +1499,7 @@ function ResourceCard({
         </div>
       )}
     </div>
-  )
+  );
 }
 
 // --- Empty state ---
@@ -1657,9 +1508,9 @@ 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 py-20 text-center">
@@ -1689,5 +1540,5 @@ function EmptyState({
         </Button>
       )}
     </div>
-  )
+  );
 }