@goplusvn/core 0.1.22 → 0.1.24

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

@@ -1,25 +1,1421 @@
-import { EntityCrudPage } from "../../crud/pages/entity-crud-page";
+"use client";
 
-interface ResourceListPageProps {
-  lang: string;
-  session: any;
-  dictionary: any;
-  config: any;
+// 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).
+//
+// API contract: /api/resources (+/sync, /:id), /api/actions.
+
+import { useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import {
+  Box,
+  Boxes,
+  Check,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ClipboardList,
+  DatabaseBackup,
+  Layers,
+  Pencil,
+  Plus,
+  RefreshCw,
+  Search,
+  Settings,
+  Shield,
+  ShoppingBag,
+  Trash2,
+  Truck,
+  Users,
+  Wallet,
+  Zap,
+} from "lucide-react";
+
+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;
+}
+
+interface Action {
+  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. ---
+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",
+  };
+
+// --- 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. ---
+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:
+    "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:text-emerald-300",
+  update:
+    "border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-300",
+  delete:
+    "border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-500/30 dark:bg-rose-500/10 dark:text-rose-300",
+  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).
+const BASIC_ORDER = [
+  "view",
+  "read",
+  "create",
+  "add",
+  "update",
+  "edit",
+  "delete",
+  "remove",
+];
+
+const categorizeActions = (actions: 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);
+  }
+  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 };
+};
+
+// Diacritic-insensitive normalize (so "duyet" matches "Duyệt")
+const normalize = (s: string) =>
+  (s || "")
+    .toLowerCase()
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .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());
+
+  // Resource Dialog State
+  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 [actionFormMode, setActionFormMode] = useState<
+    "list" | "create" | "edit"
+  >("list");
+  const [editingAction, setEditingAction] = useState<Action | null>(null);
+  const [actionFormData, setActionFormData] = useState({
+    code: "",
+    name: "",
+    description: "",
+  });
+
+  // Confirmation state
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [confirmType, setConfirmType] = useState<"action" | "resource" | null>(
+    null,
+  );
+  const [itemToDelete, setItemToDelete] = useState<{
+    id: string;
+    name: string;
+  } | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  // --- Data Fetching ---
+  const fetchData = async () => {
+    try {
+      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");
+
+      const resourcesData = await resResources.json();
+      const actionsData = await resActions.json();
+
+      const mappedResources = (resourcesData.items || []).map((r: any) => {
+        let actions: string[] = [];
+        try {
+          if (r.config) {
+            const configObj =
+              typeof r.config === "string" ? JSON.parse(r.config) : r.config;
+            if (configObj.actions && Array.isArray(configObj.actions)) {
+              actions = configObj.actions;
+            }
+          }
+        } catch (_catchError) {
+          // Ignore invalid config JSON
+        }
+        return { ...r, actions };
+      });
+
+      setResources(mappedResources);
+      setAllActions(actionsData.items || []);
+    } catch (error) {
+      toast.error(errorMessage(error, "Lỗi tải dữ liệu"));
+    } finally {
+      setLoading(false);
+      setIsRefreshing(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleRefresh = () => {
+    setIsRefreshing(true);
+    fetchData();
+  };
+
+  // --- Sync Resource ---
+  const handleSync = async () => {
+    try {
+      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");
+      }
+
+      const data = await res.json();
+      toast.success(data.message || "Đồng bộ tài nguyên thành công");
+
+      // Auto refresh data
+      handleRefresh();
+    } catch (error: any) {
+      toast.error(errorMessage(error, "Không thể đồng bộ tài nguyên"));
+    } finally {
+      setIsSyncing(false);
+    }
+  };
+
+  // Quick lookup: action code -> action (for rendering granted chips by name)
+  const actionMap = useMemo(() => {
+    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],
+  );
+
+  // --- 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. ---
+  const { sections, filteredResourceTotal, isEmpty } = useMemo(() => {
+    const q = normalize(searchTerm.trim());
+
+    const matches = (r: Resource) => {
+      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 (r.actions || []).some((code) => {
+        const a = actionMap.get(code);
+        return (
+          normalize(a?.name || code).includes(q) || normalize(code).includes(q)
+        );
+      });
+    };
+
+    const rows = resources.filter(matches);
+
+    if (q && rows.length === 0) {
+      return {
+        sections: [] as {
+          group: string;
+          meta: { icon: any; label: string; iconCls: string };
+          items: Resource[];
+        }[],
+        filteredResourceTotal: 0,
+        isEmpty: true,
+      };
+    }
+
+    const grouped: Record<string, Resource[]> = {};
+    for (const r of rows) {
+      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);
+      })
+      .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]);
+
+  const toggleGroup = (group: string) => {
+    setCollapsedGroups((prev) => {
+      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[],
+  ) => {
+    try {
+      // Optimistic Update
+      setResources((prev) =>
+        prev.map((r) =>
+          r.id === resource.id ? { ...r, actions: newActions } : r,
+        ),
+      );
+
+      // API Call
+      let currentConfig: any = {};
+      try {
+        if (typeof resource.config === "string") {
+          currentConfig = JSON.parse(resource.config);
+        } else if (typeof resource.config === "object") {
+          currentConfig = resource.config || {};
+        }
+      } catch (_catchError) {
+        // Ignore invalid config JSON
+      }
+
+      const newConfig = { ...currentConfig, actions: newActions };
+
+      const res = await fetch(`/api/resources/${resource.id}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          ...resource,
+          config: JSON.stringify(newConfig),
+        }),
+      });
+
+      if (!res.ok) {
+        await throwFetchError(res, "Update failed");
+      }
+    } catch (error) {
+      toast.error(errorMessage(error, "Không thể cập nhật quyền"));
+    }
+  };
+
+  const toggleAction = (resource: Resource, actionCode: string) => {
+    const currentActions = resource.actions || [];
+    const newActions = currentActions.includes(actionCode)
+      ? currentActions.filter((a) => a !== actionCode)
+      : [...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;
+    });
+  };
+
+  // --- Resource Dialog Handlers ---
+  const openNewResource = () => {
+    setEditingResource(null);
+    setFormData({ code: "", name: "", group: "", description: "" });
+    setIsDialogOpen(true);
+  };
+
+  const openEditResource = (resource: Resource) => {
+    setEditingResource(resource);
+    setFormData({
+      code: resource.code,
+      name: resource.name,
+      group: resource.group || "",
+      description: resource.description || "",
+    });
+    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;
+    }
+
+    try {
+      const payload = {
+        ...formData,
+        status: "active", // default status
+      };
+
+      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");
+      }
+
+      const savedResource = await res.json();
+      toast.success(
+        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,
+          ),
+        );
+      } else {
+        // For new resource, actions starts empty
+        setResources((prev) => [{ ...savedResource, actions: [] }, ...prev]);
+      }
+
+      setIsDialogOpen(false);
+    } catch (error: any) {
+      toast.error(errorMessage(error, "Có lỗi xảy ra"));
+    }
+  };
+
+  // --- Action Manager Handlers ---
+  const openActionManager = () => {
+    setIsActionManagerOpen(true);
+    setActionFormMode("list");
+  };
+
+  const openNewAction = () => {
+    setEditingAction(null);
+    setActionFormData({ code: "", name: "", description: "" });
+    setActionFormMode("create");
+  };
+
+  const openEditAction = (action: Action) => {
+    setEditingAction(action);
+    setActionFormData({
+      code: action.code,
+      name: action.name,
+      description: action.description || "",
+    });
+    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;
+    }
+
+    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();
+
+      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");
+      } else {
+        setAllActions((prev) => [savedAction, ...prev]);
+        toast.success("Tạo hành động thành công");
+      }
+      setActionFormMode("list");
+    } catch (error: any) {
+      toast.error(errorMessage(error, "Có lỗi xảy ra"));
+    }
+  };
+
+  const handleDeleteAction = (id: string, code: string) => {
+    setItemToDelete({ id, name: code });
+    setConfirmType("action");
+    setConfirmOpen(true);
+  };
+
+  const handleDeleteResource = () => {
+    if (!editingResource) return;
+    setItemToDelete({ id: editingResource.id, name: editingResource.code });
+    setConfirmType("resource");
+    setConfirmOpen(true);
+  };
+
+  const handleConfirmDelete = async () => {
+    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");
+      } else if (confirmType === "resource") {
+        const res = await fetch(`/api/resources?id=${itemToDelete.id}`, {
+          method: "DELETE",
+        });
+        if (!res.ok) {
+          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);
+      }
+      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"}`,
+        ),
+      );
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  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>
+    </>
+  );
+
+  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>
+      )}
+
+      {/* --- 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" />
+          ))}
+        </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;
+            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 */}
+                <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"
+                >
+                  {collapsed ? (
+                    <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                  ) : (
+                    <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                  )}
+                  <span
+                    className={cn(
+                      "flex h-6 w-6 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">
+                    {section.meta.label}
+                  </span>
+                  <Badge
+                    variant="secondary"
+                    className="ml-1 h-5 px-1.5 font-normal"
+                  >
+                    {section.items.length}
+                  </Badge>
+                </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>
+      )}
+
+      {/* --- Create/Edit Resource Dialog --- */}
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent className="sm:max-w-[460px]">
+          <DialogHeader>
+            <DialogTitle>
+              {editingResource ? "Chỉnh sửa tài nguyên" : "Thêm tài nguyên mới"}
+            </DialogTitle>
+          </DialogHeader>
+          <div className="grid gap-4 py-2">
+            <div className="grid gap-2">
+              <Label htmlFor="code">Mã (Code)</Label>
+              <Input
+                id="code"
+                value={formData.code}
+                onChange={(e) =>
+                  setFormData({ ...formData, code: e.target.value })
+                }
+                placeholder="vd: sales-order"
+                disabled={!!editingResource} // Disable code editing
+              />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="name">Tên</Label>
+              <Input
+                id="name"
+                value={formData.name}
+                onChange={(e) =>
+                  setFormData({ ...formData, name: e.target.value })
+                }
+                placeholder="vd: Đơn bán hàng"
+              />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="group">Nhóm</Label>
+              <Select
+                value={formData.group}
+                onValueChange={(val) =>
+                  setFormData({ ...formData, group: val })
+                }
+              >
+                <SelectTrigger id="group">
+                  <SelectValue placeholder="Chọn nhóm" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="sales">Bán hàng</SelectItem>
+                  <SelectItem value="purchase">Mua hàng</SelectItem>
+                  <SelectItem value="inventory">Kho</SelectItem>
+                  <SelectItem value="finance">Tài chính</SelectItem>
+                  <SelectItem value="hr">Nhân sự</SelectItem>
+                  <SelectItem value="master">Danh mục</SelectItem>
+                  <SelectItem value="users">Người dùng</SelectItem>
+                  <SelectItem value="system">Hệ thống</SelectItem>
+                  <SelectItem value="other">Khác</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="desc">Mô tả</Label>
+              <Textarea
+                id="desc"
+                value={formData.description}
+                onChange={(e) =>
+                  setFormData({ ...formData, description: e.target.value })
+                }
+                placeholder="Mô tả ngắn gọn…"
+              />
+            </div>
+          </div>
+          <DialogFooter className="gap-2">
+            {editingResource && (
+              <Button
+                variant="destructive"
+                onClick={handleDeleteResource}
+                className="mr-auto"
+              >
+                Xóa
+              </Button>
+            )}
+            <Button variant="outline" onClick={() => setIsDialogOpen(false)}>
+              Hủy
+            </Button>
+            <Button variant="accent" onClick={handleSubmitResource}>
+              {editingResource ? "Cập nhật" : "Tạo mới"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* --- Action Manager Dialog --- */}
+      <Dialog open={isActionManagerOpen} onOpenChange={setIsActionManagerOpen}>
+        <DialogContent className="flex max-h-[85vh] flex-col sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              {actionFormMode !== "list" && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-6 w-6"
+                  onClick={() => setActionFormMode("list")}
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                </Button>
+              )}
+              {actionFormMode === "list" && "Quản lý hành động"}
+              {actionFormMode === "create" && "Thêm hành động mới"}
+              {actionFormMode === "edit" && "Chỉnh sửa hành động"}
+            </DialogTitle>
+          </DialogHeader>
+
+          <div className="flex flex-1 flex-col overflow-hidden">
+            {actionFormMode === "list" && (
+              <>
+                <div className="mb-4 flex justify-end">
+                  <Button
+                    size="sm"
+                    variant="accent"
+                    onClick={openNewAction}
+                    prependIcon={<Plus className="h-4 w-4" />}
+                  >
+                    Thêm hành động
+                  </Button>
+                </div>
+                <ScrollArea className="-mx-6 flex-1 px-6">
+                  <div className="space-y-2">
+                    {allActions.map((action) => (
+                      <div
+                        key={action.id}
+                        className="flex items-center justify-between rounded-lg border border-border bg-card p-3 transition-colors hover:bg-muted/40"
+                      >
+                        <div className="flex min-w-0 items-center gap-3">
+                          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
+                            <Zap className="h-4 w-4" />
+                          </div>
+                          <div className="min-w-0">
+                            <div className="text-sm font-medium">
+                              {action.name}
+                            </div>
+                            <div className="font-mono text-xs text-muted-foreground">
+                              {action.code}
+                            </div>
+                            {action.description && (
+                              <div className="mt-0.5 line-clamp-1 text-[11px] text-muted-foreground/80">
+                                {action.description}
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                        <div className="flex items-center gap-1">
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-8 w-8 text-muted-foreground hover:text-foreground"
+                            onClick={() => openEditAction(action)}
+                          >
+                            <Pencil className="h-4 w-4" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-8 w-8 text-muted-foreground hover:text-destructive"
+                            onClick={() =>
+                              handleDeleteAction(action.id, action.code)
+                            }
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </ScrollArea>
+              </>
+            )}
+
+            {(actionFormMode === "create" || actionFormMode === "edit") && (
+              <div className="space-y-4 py-2">
+                <div className="grid gap-2">
+                  <Label htmlFor="action-code">Mã hành động</Label>
+                  <Input
+                    id="action-code"
+                    placeholder="vd: view-report"
+                    value={actionFormData.code}
+                    onChange={(e) =>
+                      setActionFormData((prev) => ({
+                        ...prev,
+                        code: e.target.value,
+                      }))
+                    }
+                    disabled={actionFormMode === "edit"}
+                  />
+                  <p className="text-[11px] text-muted-foreground">
+                    Mã duy nhất dùng để kiểm tra quyền.
+                  </p>
+                </div>
+                <div className="grid gap-2">
+                  <Label htmlFor="action-name">Tên hiển thị</Label>
+                  <Input
+                    id="action-name"
+                    placeholder="vd: Xem báo cáo"
+                    value={actionFormData.name}
+                    onChange={(e) =>
+                      setActionFormData((prev) => ({
+                        ...prev,
+                        name: e.target.value,
+                      }))
+                    }
+                  />
+                </div>
+                <div className="grid gap-2">
+                  <Label htmlFor="action-desc">Mô tả</Label>
+                  <Textarea
+                    id="action-desc"
+                    placeholder="Mô tả chi tiết về hành động này…"
+                    value={actionFormData.description}
+                    onChange={(e) =>
+                      setActionFormData((prev) => ({
+                        ...prev,
+                        description: e.target.value,
+                      }))
+                    }
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+
+          <DialogFooter className="mt-4 border-t pt-4">
+            {actionFormMode === "list" ? (
+              <Button
+                variant="outline"
+                onClick={() => setIsActionManagerOpen(false)}
+              >
+                Đóng
+              </Button>
+            ) : (
+              <>
+                <Button
+                  variant="outline"
+                  onClick={() => setActionFormMode("list")}
+                >
+                  Quay lại
+                </Button>
+                <Button variant="accent" onClick={handleSubmitAction}>
+                  {actionFormMode === "create" ? "Tạo mới" : "Cập nhật"}
+                </Button>
+              </>
+            )}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <ConfirmDialog
+        open={confirmOpen}
+        onOpenChange={setConfirmOpen}
+        title="Xác nhận xóa"
+        description={`Bạn có chắc chắn muốn xóa ${
+          confirmType === "action" ? "hành động" : "tài nguyên"
+        } "${itemToDelete?.name}" không? Hành động này không thể hoàn tác.`}
+        onConfirm={handleConfirmDelete}
+        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({
+  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 grantedSet = new Set(granted);
+  const shown = granted.slice(0, MAX_CHIPS);
+  const overflow = granted.length - shown.length;
+
+  // 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);
+    return (
+      <button
+        key={action.code}
+        type="button"
+        onClick={() => onToggleAction(resource, action.code)}
+        className="mb-0.5 flex w-full break-inside-avoid items-start gap-2 rounded px-1.5 py-1 text-left transition-colors hover:bg-muted/50"
+      >
+        <span
+          className={cn(
+            "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",
+          )}
+        >
+          <Check className="h-3 w-3" />
+        </span>
+        <span className="min-w-0 flex-1">
+          <span
+            className={cn(
+              "block text-xs leading-tight",
+              on ? "font-medium text-foreground" : "text-muted-foreground",
+            )}
+          >
+            {action.name}
+          </span>
+          {action.description && (
+            <span className="mt-0.5 block text-[10px] leading-tight text-muted-foreground/80">
+              {action.description}
+            </span>
+          )}
+        </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));
+    return (
+      <div key={label}>
+        <p className="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-foreground/70">
+          {label}
+        </p>
+        <div className="space-y-2">
+          {grantedList.length > 0 && (
+            <div>
+              <p className="mb-1 flex items-center gap-1 text-[10px] font-medium uppercase tracking-wide text-emerald-600 dark:text-emerald-400">
+                <Check className="h-3 w-3" /> Đã cấp · {grantedList.length}
+              </p>
+              <div className="columns-1 gap-x-6 sm:columns-2 lg:columns-3">
+                {grantedList.map(renderItem)}
+              </div>
+            </div>
+          )}
+          {ungrantedList.length > 0 && (
+            <div>
+              <p className="mb-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+                Chưa cấp · {ungrantedList.length}
+              </p>
+              <div className="columns-1 gap-x-6 sm:columns-2 lg:columns-3">
+                {ungrantedList.map(renderItem)}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <li>
+      <div
+        role="button"
+        tabIndex={0}
+        aria-expanded={expanded}
+        onClick={onToggleExpand}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onToggleExpand();
+          }
+        }}
+        className="flex cursor-pointer items-center gap-3 bg-card px-4 py-3 transition-colors hover:bg-muted/40"
+      >
+        {/* Icon — tinted by the resource's group */}
+        <div
+          className={cn(
+            "flex h-9 w-9 shrink-0 items-center justify-center rounded-md",
+            getGroupMeta(resource.group).iconCls,
+          )}
+        >
+          <DynamicIcon
+            name={(resource.icon as any) || "FileCode"}
+            className="h-4 w-4"
+          />
+        </div>
+
+        {/* Identity + granted-chip summary (ẩn khi đã bung — bên dưới hiện đủ) */}
+        <div className="min-w-0 flex-1">
+          <div className="flex items-baseline gap-2">
+            <span className="truncate text-sm font-medium text-foreground">
+              {resource.name}
+            </span>
+            <code className="hidden shrink-0 font-mono text-[11px] text-muted-foreground sm:inline">
+              {resource.code}
+            </code>
+          </div>
+          <code className="mt-0.5 block truncate font-mono text-[11px] text-muted-foreground sm:hidden">
+            {resource.code}
+          </code>
+          {!expanded && (
+            <div className="mt-1 hidden flex-wrap items-center gap-1 sm:flex">
+              {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="text-[11px] text-muted-foreground">
+                      +{overflow}
+                    </span>
+                  )}
+                </>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Count + actions — nút sửa luôn hiện (mobile không có hover) */}
+        <Badge variant="secondary" className="shrink-0 font-normal">
+          {granted.length}/{allActions.length} quyền
+        </Badge>
+        <button
+          type="button"
+          onClick={(e) => {
+            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"
+          title="Sửa thông tin tài nguyên"
+        >
+          <Pencil className="h-3.5 w-3.5" />
+        </button>
+        <ChevronRight
+          className={cn(
+            "h-4 w-4 shrink-0 text-muted-foreground/60 transition-transform",
+            expanded && "rotate-90",
+          )}
+        />
+      </div>
+
+      {/* Bung: toàn bộ action của resource, bấm chip để bật/tắt ngay — 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>
+            </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>
+      )}
+    </li>
+  );
 }
 
-export function ResourceListPage({
-  lang,
-  session,
-  dictionary,
-  config,
-}: ResourceListPageProps) {
+// --- Empty state ---
+function EmptyState({
+  searching,
+  onClear,
+  onCreate,
+}: {
+  searching: boolean;
+  onClear: () => void;
+  onCreate: () => void;
+}) {
   return (
-    <EntityCrudPage
-      entity="resources"
-      lang={lang}
-      session={session}
-      dictionary={dictionary}
-      config={config}
-    />
+    <div className="flex flex-col items-center justify-center rounded-lg border border-dashed border-border bg-card py-20 text-center">
+      <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-muted">
+        <Search className="h-6 w-6 text-muted-foreground" />
+      </div>
+      <h3 className="text-base font-semibold text-foreground">
+        {searching ? "Không tìm thấy kết quả" : "Chưa có tài nguyên nào"}
+      </h3>
+      <p className="mt-1 max-w-sm text-sm text-muted-foreground">
+        {searching
+          ? "Không có tài nguyên hay hành động nào khớp từ khóa. Thử từ khóa khác."
+          : "Bắt đầu bằng cách thêm tài nguyên mới hoặc đồng bộ từ hệ thống."}
+      </p>
+      {searching ? (
+        <Button variant="outline" className="mt-4" onClick={onClear}>
+          Xóa tìm kiếm
+        </Button>
+      ) : (
+        <Button
+          variant="accent"
+          className="mt-4"
+          onClick={onCreate}
+          prependIcon={<Plus className="h-4 w-4" />}
+        >
+          Thêm tài nguyên
+        </Button>
+      )}
+    </div>
   );
 }