@goplusvn/core 0.1.42 → 0.1.43

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@goplusvn/core",
   "description": "GoPlusVN Platform Kit - ERP kernel: layout, RBAC, CRUD, multi-tenant, system pages",
-  "version": "0.1.42",
+  "version": "0.1.43",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org",

package/src/rbac/pages/index.ts

@@ -11,3 +11,12 @@ export type {
 export { ResourceListPage } from "./resource-list-page";
 export { ActionListPage } from "./action-list-page";
 export type { ActionListPageProps } from "./action-list-page";
+export {
+  ResourceCatalogPage,
+  ActionCatalogPage,
+} from "./permission-catalog-pages";
+export type {
+  ResourceCatalogPageProps,
+  ActionCatalogPageProps,
+  CatalogMenuSection,
+} from "./permission-catalog-pages";

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

@@ -0,0 +1,1217 @@
+"use client";
+
+// 📖 DANH MỤC QUYỀN — trang Tài nguyên & Hành động THỐNG NHẤT ngôn ngữ với
+// trang chi tiết Vai trò (chốt với chủ app 2026-07-24):
+//   - ResourceCatalogPage: CÂY MENU thật (menuTree) — mỗi trang liệt kê thao
+//     tác theo LUỒNG (chip + tooltip mô tả), chính sách combo, đường dẫn/note.
+//   - ActionCatalogPage: danh mục thao tác nhóm theo LUỒNG — mỗi action:
+//     nhãn, mã, mô tả, dùng ở những trang nào.
+// CHỈ TRA CỨU: khai báo/chỉnh sửa nằm trong Permission Registry (code) +
+// rbac-sync — banner nhắc rõ. Không có nút ghi nào.
+import * as React from "react"
+import { useRouter } from "next/navigation"
+import { toast } from "sonner"
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DynamicIcon,
+  Input,
+  Label,
+  Textarea,
+} from "../../ui"
+import {
+  BookOpen,
+  Check,
+  ShieldAlert,
+  ChevronDown,
+  ChevronRight,
+  Info,
+  Search,
+  Shield,
+  Zap,
+} from "lucide-react"
+
+import { cn } from "../../utils"
+
+export interface CatalogMenuSection {
+  title: string
+  icon?: string
+  items: Array<{
+    title: string
+    href?: string
+    icon?: string
+    resource: string
+    note?: string
+  }>
+}
+
+export interface CatalogActionMeta {
+  label?: string
+  description?: string
+  flow?: string
+  requires?: string[]
+}
+
+interface ResourceRow {
+  id: string
+  code: string
+  name: string
+  group: string | null
+  description: string | null
+  icon: string | null
+  order: number | null
+  config: any
+}
+
+interface ActionRow {
+  id: string
+  code: string
+  name: string
+  description: string | null
+  isDefault?: boolean
+}
+
+const STANDARD_ORDER = ["view", "create", "update", "delete", "export", "import"]
+
+const CHECK_COLOR_RULES: Array<{ re: RegExp; cls: string }> = [
+  { re: /^(view|read|get|list)/, cls: "border-blue-500 bg-blue-500" },
+  { re: /^(create|add|new)/, cls: "border-emerald-500 bg-emerald-500" },
+  { re: /^(update|edit|change|set)/, cls: "border-amber-500 bg-amber-500" },
+  { re: /^(delete|remove)/, cls: "border-rose-500 bg-rose-500" },
+  { re: /^(cancel|void|reject)/, cls: "border-rose-500 bg-rose-500" },
+  { re: /^(approve|confirm|verify|complete)/, cls: "border-violet-500 bg-violet-500" },
+  { re: /^(import)/, cls: "border-purple-500 bg-purple-500" },
+  { re: /^(export)/, cls: "border-indigo-500 bg-indigo-500" },
+  { re: /^(sync|unlink)/, cls: "border-cyan-600 bg-cyan-600" },
+  { re: /^(manage|config|close|reopen)/, cls: "border-orange-500 bg-orange-500" },
+]
+const checkColor = (code: string) =>
+  CHECK_COLOR_RULES.find((r) => r.re.test(code))?.cls ??
+  "border-primary bg-primary"
+const HIDDEN_IN_PAGE = new Set(["view", "lookup", "view-all-branches"])
+
+function parseAllowed(config: any, actionCodes: string[]): string[] {
+  try {
+    const c = typeof config === "string" ? JSON.parse(config) : config
+    if (c?.actions && Array.isArray(c.actions)) {
+      return actionCodes.filter((code) => (c.actions as string[]).includes(code))
+    }
+  } catch {
+    /* ignore */
+  }
+  return actionCodes.filter((code) =>
+    ["view", "create", "update", "delete"].includes(code)
+  )
+}
+
+const REGISTRY_BANNER = (
+  <div className="flex items-start gap-2 border-b border-border bg-muted/30 px-4 py-2 text-[11px] text-muted-foreground">
+    <Shield className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+    <span>
+      Danh mục do hệ thống quản lý — trang này chỉ để tra cứu. Cấp quyền cho
+      nhân viên làm ở trang <b>Vai trò</b>.
+    </span>
+  </div>
+)
+
+/* ═══════════════════════ TRANG TÀI NGUYÊN ═══════════════════════ */
+
+export interface ResourceCatalogPageProps {
+  resources: ResourceRow[]
+  actions: ActionRow[]
+  menuTree?: CatalogMenuSection[]
+  actionMeta?: Record<string, CatalogActionMeta>
+  /** resource → chính sách combo: "authenticated" | "reference-lookup" | "view-only" */
+  lookupPolicies?: Record<string, string>
+  /** Cho phép gán/bỏ thao tác trực tiếp (cần quyền resource:update). */
+  editable?: boolean
+  /** Endpoint toggle — vd "/api/resources/toggle-action" (resource gửi trong body). */
+  toggleActionEndpoint?: string
+}
+
+export function ResourceCatalogPage({
+  resources,
+  actions,
+  menuTree,
+  actionMeta,
+  lookupPolicies,
+  editable,
+  toggleActionEndpoint,
+}: ResourceCatalogPageProps) {
+  const [searchTerm, setSearchTerm] = React.useState("")
+  const [collapsed, setCollapsed] = React.useState<Set<string>>(
+    () => new Set()
+  )
+  // resource đang mở phần "Chưa khai" (đối chiếu như trang cũ)
+  const [showUndeclared, setShowUndeclared] = React.useState<Set<string>>(
+    () => new Set()
+  )
+  const toggleUndeclared = (code: string) =>
+    setShowUndeclared((prev) => {
+      const next = new Set(prev)
+      if (next.has(code)) next.delete(code)
+      else next.add(code)
+      return next
+    })
+
+  const actionCodes = React.useMemo(() => actions.map((a) => a.code), [actions])
+
+  const resourceInfo = React.useMemo(() => {
+    const map = new Map<
+      string,
+      { name: string; icon: string | null; allowed: string[] }
+    >()
+    resources.forEach((r) => {
+      map.set(r.code, {
+        name: r.name,
+        icon: r.icon,
+        allowed: parseAllowed(r.config, actionCodes),
+      })
+    })
+    return map
+  }, [resources, actionCodes])
+
+  const actionName = React.useCallback(
+    (code: string) =>
+      actionMeta?.[code]?.label ||
+      actions.find((a) => a.code === code)?.name ||
+      code,
+    [actionMeta, actions]
+  )
+
+  // Lớp override lạc quan khi admin tick trực tiếp (key "resource:action")
+  const [overrides, setOverrides] = React.useState<Map<string, boolean>>(
+    () => new Map()
+  )
+  const isDeclared = React.useCallback(
+    (resource: string, code: string) => {
+      const ov = overrides.get(`${resource}:${code}`)
+      if (ov !== undefined) return ov
+      return resourceInfo.get(resource)?.allowed.includes(code) ?? false
+    },
+    [overrides, resourceInfo]
+  )
+  const declaredList = React.useCallback(
+    (resource: string) =>
+      actionCodes.filter((c) => isDeclared(resource, c)),
+    [actionCodes, isDeclared]
+  )
+  const toggleDeclared = async (resource: string, code: string) => {
+    if (!editable || !toggleActionEndpoint) return
+    const next = !isDeclared(resource, code)
+    setOverrides((prev) => {
+      const m = new Map(prev)
+      m.set(`${resource}:${code}`, next)
+      return m
+    })
+    try {
+      const res = await fetch(
+        toggleActionEndpoint.replace("{code}", resource),
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ resource, action: code, enabled: next }),
+        }
+      )
+      if (!res.ok) throw new Error(await res.text())
+      toast.success(
+        next
+          ? `Đã gán "${actionName(code)}"`
+          : `Đã bỏ "${actionName(code)}"`,
+        { description: "Trang Vai trò sẽ hiện/ẩn thao tác này tương ứng." }
+      )
+    } catch {
+      // hoàn tác khi lỗi
+      setOverrides((prev) => {
+        const m = new Map(prev)
+        m.set(`${resource}:${code}`, !next)
+        return m
+      })
+      toast.error("Không cập nhật được — thử lại")
+    }
+  }
+
+  const tree = React.useMemo<CatalogMenuSection[]>(() => {
+    if (menuTree && menuTree.length > 0) {
+      // kèm resource ngoài cây (nếu có) vào section cuối
+      const onMenu = new Set(
+        menuTree.flatMap((s) => s.items.map((i) => i.resource))
+      )
+      const stray = resources.filter(
+        (r) =>
+          !onMenu.has(r.code) &&
+          (resourceInfo.get(r.code)?.allowed ?? []).some((a) => a !== "lookup")
+      )
+      if (stray.length === 0) return menuTree
+      return [
+        ...menuTree,
+        {
+          title: "Chưa gắn menu",
+          items: stray.map((r) => ({
+            title: r.name,
+            resource: r.code,
+            icon: r.icon ?? undefined,
+          })),
+        },
+      ]
+    }
+    const byGroup = new Map<string, CatalogMenuSection>()
+    resources.forEach((r) => {
+      const group = r.group || "Khác"
+      const sec = byGroup.get(group) ?? { title: group, items: [] }
+      sec.items.push({
+        title: r.name,
+        resource: r.code,
+        icon: r.icon ?? undefined,
+      })
+      byGroup.set(group, sec)
+    })
+    return Array.from(byGroup.values())
+  }, [menuTree, resources, resourceInfo])
+
+  const searching = searchTerm.trim().length > 0
+  const q = searchTerm.trim().toLowerCase()
+
+  const matchItem = React.useCallback(
+    (item: CatalogMenuSection["items"][number]) => {
+      if (!searching) return true
+      if (item.title.toLowerCase().includes(q)) return true
+      if (item.href?.toLowerCase().includes(q)) return true
+      if (item.resource.toLowerCase().includes(q)) return true
+      const allowed = resourceInfo.get(item.resource)?.allowed ?? []
+      return allowed.some((code) =>
+        actionName(code).toLowerCase().includes(q)
+      )
+    },
+    [searching, q, resourceInfo, actionName]
+  )
+
+  const visibleTree = React.useMemo(() => {
+    if (!searching) return tree
+    return tree
+      .map((s) =>
+        s.title.toLowerCase().includes(q)
+          ? s
+          : { ...s, items: s.items.filter(matchItem) }
+      )
+      .filter((s) => s.items.length > 0)
+  }, [tree, searching, q, matchItem])
+
+  const lookupLabel = (resource: string) => {
+    const policy = lookupPolicies?.[resource]
+    if (policy === "authenticated") return "Combo: tự động cho mọi nhân viên"
+    if (policy === "reference-lookup") return "Combo: cần quyền Tra cứu"
+    const allowed = resourceInfo.get(resource)?.allowed ?? []
+    if (allowed.includes("lookup")) return "Combo: theo quyền Tra cứu"
+    return null
+  }
+
+  const toggleCollapse = (title: string) =>
+    setCollapsed((prev) => {
+      const next = new Set(prev)
+      if (next.has(title)) next.delete(title)
+      else next.add(title)
+      return next
+    })
+
+  return (
+    <div className="flex flex-col">
+      {/* Header bar navy */}
+      <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">
+          <BookOpen 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">
+          Danh mục chức năng &amp; quyền
+        </h1>
+        <span className="hidden shrink-0 text-xs tabular-nums text-primary-foreground/70 md:inline">
+          {resources.length} chức năng · {actions.length} thao tác
+        </span>
+      </div>
+
+      <div className="mt-3 overflow-hidden rounded-xl border border-border bg-card shadow-sm lg:mx-3">
+        <div className="flex flex-wrap items-center gap-2 border-b border-border px-3 py-2 sm:px-4">
+          <div className="relative min-w-[150px] flex-1 sm:max-w-72">
+            <Search className="absolute left-2.5 top-2 h-3.5 w-3.5 text-muted-foreground" />
+            <Input
+              placeholder="Tìm chức năng / thao tác..."
+              className="h-8 rounded-md border border-border bg-card pl-8 text-sm"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </div>
+        </div>
+        {REGISTRY_BANNER}
+
+        {visibleTree.length === 0 ? (
+          <p className="px-4 py-8 text-center text-xs text-muted-foreground">
+            Không có chức năng nào khớp "{searchTerm}".
+          </p>
+        ) : (
+          visibleTree.map((section) => {
+            const isCollapsed = !searching && collapsed.has(section.title)
+            return (
+              <section key={section.title}>
+                <button
+                  type="button"
+                  onClick={() => toggleCollapse(section.title)}
+                  className="flex w-full items-center gap-2 border-b border-border bg-muted/40 px-4 py-2 text-left hover:bg-muted/60"
+                >
+                  {isCollapsed ? (
+                    <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                  ) : (
+                    <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                  )}
+                  <DynamicIcon
+                    name={section.icon as any}
+                    className="h-4 w-4 shrink-0 text-muted-foreground"
+                  />
+                  <h3 className="text-sm font-semibold text-foreground">
+                    {section.title}
+                  </h3>
+                  <span className="text-[11px] tabular-nums text-muted-foreground">
+                    {section.items.length} chức năng
+                  </span>
+                </button>
+                {!isCollapsed && (
+                  <ul className="divide-y divide-border/60 border-b border-border">
+                    {section.items.map((item) => {
+                      const info = resourceInfo.get(item.resource)
+                      if (!info) return null
+                      const declaredNow = declaredList(item.resource)
+                      const acts = declaredNow.filter(
+                        (a) => !HIDDEN_IN_PAGE.has(a)
+                      )
+                      const std = STANDARD_ORDER.filter((a) =>
+                        acts.includes(a)
+                      )
+                      const biz = acts.filter(
+                        (a) => !STANDARD_ORDER.includes(a)
+                      )
+                      const flows = new Map<string, string[]>()
+                      if (std.length > 0) flows.set("Chung", std)
+                      biz.forEach((code) => {
+                        const flow = actionMeta?.[code]?.flow || "Khác"
+                        const list = flows.get(flow) ?? []
+                        list.push(code)
+                        flows.set(flow, list)
+                      })
+                      const combo = lookupLabel(item.resource)
+
+                      return (
+                        <li
+                          key={`${item.resource}:${item.title}`}
+                          className="px-4 py-2"
+                        >
+                          <div className="flex flex-wrap items-center gap-2">
+                            <DynamicIcon
+                              name={(item.icon || info.icon) as any}
+                              className="h-4 w-4 shrink-0 text-muted-foreground"
+                            />
+                            <span className="text-sm font-medium text-foreground">
+                              {item.title}
+                            </span>
+                            {item.href && (
+                              <code className="hidden font-mono text-[10px] text-muted-foreground sm:inline">
+                                {item.href}
+                              </code>
+                            )}
+                            {item.note && (
+                              <span className="hidden text-[10px] italic text-muted-foreground/80 sm:inline">
+                                {item.note}
+                              </span>
+                            )}
+                            <code className="ml-auto shrink-0 rounded bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground">
+                              {item.resource}
+                            </code>
+                          </div>
+                          <div className="mt-1.5 space-y-1 pl-6">
+                            {(() => {
+                              const open = showUndeclared.has(item.resource)
+                              const undeclaredCount =
+                                actionCodes.length - declaredNow.length
+
+                              const gridItem = (
+                                code: string,
+                                declared: boolean
+                              ) => {
+                                const desc =
+                                  actionMeta?.[code]?.description ||
+                                  actions.find((a) => a.code === code)
+                                    ?.description ||
+                                  ""
+                                const Wrapper: any = editable ? "button" : "div"
+                                return (
+                                  <Wrapper
+                                    key={code}
+                                    type={editable ? "button" : undefined}
+                                    onClick={
+                                      editable
+                                        ? () =>
+                                            toggleDeclared(
+                                              item.resource,
+                                              code
+                                            )
+                                        : undefined
+                                    }
+                                    className={cn(
+                                      "flex items-start gap-2 text-left",
+                                      editable &&
+                                        "cursor-pointer rounded-md px-1 py-0.5 transition-colors hover:bg-muted/60"
+                                    )}
+                                  >
+                                    <span
+                                      className={cn(
+                                        "mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-[4px] border",
+                                        declared
+                                          ? cn(
+                                              checkColor(code),
+                                              "text-white"
+                                            )
+                                          : "border-border bg-card text-transparent"
+                                      )}
+                                    >
+                                      <Check
+                                        className="h-3 w-3"
+                                        strokeWidth={3}
+                                      />
+                                    </span>
+                                    <span className="min-w-0">
+                                      <span
+                                        className={cn(
+                                          "block text-[13px] font-medium leading-tight",
+                                          declared
+                                            ? "text-foreground"
+                                            : "text-muted-foreground"
+                                        )}
+                                      >
+                                        {actionName(code)}
+                                      </span>
+                                      {desc && (
+                                        <span className="block text-[11px] leading-snug text-muted-foreground/80">
+                                          {desc}
+                                        </span>
+                                      )}
+                                    </span>
+                                  </Wrapper>
+                                )
+                              }
+
+                              const renderSection = (
+                                title: string,
+                                codes: string[]
+                              ) => {
+                                if (codes.length === 0) return null
+                                const declared = codes.filter((c) =>
+                                  isDeclared(item.resource, c)
+                                )
+                                const undeclared = codes.filter(
+                                  (c) => !isDeclared(item.resource, c)
+                                )
+                                return (
+                                  <div key={title} className="space-y-2">
+                                    <p className="text-[11px] font-semibold uppercase tracking-wide text-foreground">
+                                      {title}
+                                    </p>
+                                    {declared.length > 0 && (
+                                      <>
+                                        <p className="flex items-center gap-1 text-[10px] font-medium uppercase text-emerald-600 dark:text-emerald-400">
+                                          <Check className="h-3 w-3" /> Đã cấp
+                                          · {declared.length}
+                                        </p>
+                                        <div className="grid grid-cols-1 gap-x-6 gap-y-2 sm:grid-cols-2 xl:grid-cols-3">
+                                          {declared.map((c) =>
+                                            gridItem(c, true)
+                                          )}
+                                        </div>
+                                      </>
+                                    )}
+                                    {undeclared.length > 0 && (
+                                      <>
+                                        <p className="text-[10px] font-medium uppercase text-muted-foreground">
+                                          Chưa cấp · {undeclared.length}
+                                        </p>
+                                        <div className="grid grid-cols-1 gap-x-6 gap-y-2 sm:grid-cols-2 xl:grid-cols-3">
+                                          {undeclared.map((c) =>
+                                            gridItem(c, false)
+                                          )}
+                                        </div>
+                                      </>
+                                    )}
+                                  </div>
+                                )
+                              }
+
+                              return (
+                                <>
+                                  {!open && (
+                                    <>
+                                      {Array.from(flows.entries()).map(
+                                        ([flow, codes]) => (
+                                          <div
+                                            key={flow}
+                                            className="flex flex-wrap items-center gap-x-2 gap-y-1"
+                                          >
+                                            <span className="w-24 shrink-0 text-[10px] uppercase tracking-wide text-muted-foreground/60">
+                                              {flow}
+                                            </span>
+                                            {codes.map((code) => (
+                                              <span
+                                                key={code}
+                                                title={
+                                                  actionMeta?.[code]
+                                                    ?.description ||
+                                                  actionName(code)
+                                                }
+                                                className="inline-flex items-center gap-1 rounded-md border border-primary/40 bg-primary/10 px-1.5 py-0.5 text-[11px] font-medium text-primary"
+                                              >
+                                                <span
+                                                  className={cn(
+                                                    "flex h-3 w-3 shrink-0 items-center justify-center rounded-[3px] border text-white",
+                                                    checkColor(code)
+                                                  )}
+                                                >
+                                                  <Check
+                                                    className="h-2 w-2"
+                                                    strokeWidth={3}
+                                                  />
+                                                </span>
+                                                {actionName(code)}
+                                              </span>
+                                            ))}
+                                          </div>
+                                        )
+                                      )}
+                                      {combo && (
+                                        <div className="flex items-center gap-1.5 text-[10px] text-muted-foreground/80">
+                                          <Info className="h-3 w-3" />
+                                          {combo}
+                                        </div>
+                                      )}
+                                    </>
+                                  )}
+                                  {open && (
+                                    <div className="mt-2 space-y-4 rounded-lg border border-border/70 bg-muted/20 p-3">
+                                      <p className="text-xs text-muted-foreground">
+                                        Đã gán{" "}
+                                        <b className="text-foreground">
+                                          {declaredNow.length}
+                                        </b>
+                                        /{actionCodes.length} quyền
+                                        {editable && (
+                                          <span className="ml-1 text-[10px] text-muted-foreground/80">
+                                            — bấm vào ô để gán/bỏ
+                                          </span>
+                                        )}
+                                      </p>
+                                      {renderSection(
+                                        "Cơ bản",
+                                        STANDARD_ORDER.filter((c) =>
+                                          actionCodes.includes(c)
+                                        )
+                                      )}
+                                      {renderSection(
+                                        "Chức năng",
+                                        actionCodes.filter(
+                                          (c) => !STANDARD_ORDER.includes(c)
+                                        )
+                                      )}
+                                    </div>
+                                  )}
+                                  <button
+                                    type="button"
+                                    onClick={() =>
+                                      toggleUndeclared(item.resource)
+                                    }
+                                    className="flex items-center gap-1 text-[10px] font-medium text-primary/80 hover:text-primary"
+                                  >
+                                    {open ? (
+                                      <ChevronDown className="h-3 w-3" />
+                                    ) : (
+                                      <ChevronRight className="h-3 w-3" />
+                                    )}
+                                    {open
+                                      ? "Thu gọn"
+                                      : `Xem đầy đủ: ${declaredNow.length} đã cấp / ${undeclaredCount} chưa cấp`}
+                                  </button>
+                                </>
+                              )
+                            })()}
+                          </div>
+                        </li>
+                      )
+                    })}
+                  </ul>
+                )}
+              </section>
+            )
+          })
+        )}
+      </div>
+    </div>
+  )
+}
+
+/* ═══════════════════════ TRANG HÀNH ĐỘNG ═══════════════════════ */
+
+export interface ActionCatalogPageProps {
+  resources: ResourceRow[]
+  actions: ActionRow[]
+  actionMeta?: Record<string, CatalogActionMeta>
+  /** resource → href trang (hiện cạnh tên chức năng khi bung). */
+  resourcePages?: Record<string, string>
+  /** Cho phép thêm/sửa thao tác (cần quyền action:create / action:update). */
+  editable?: boolean
+}
+
+const SENSITIVE_FLOWS = new Set(["Nhạy cảm", "Phê duyệt"])
+
+interface RoleLite {
+  id: string
+  name: string
+  code: string
+  status?: string
+  permissions: string[]
+}
+
+export function ActionCatalogPage({
+  resources,
+  actions,
+  actionMeta,
+  resourcePages,
+  editable,
+}: ActionCatalogPageProps) {
+  const router = useRouter()
+  // Dialog thêm/sửa thao tác
+  const [editorOpen, setEditorOpen] = React.useState(false)
+  const [editing, setEditing] = React.useState<ActionRow | null>(null)
+  const [form, setForm] = React.useState({ code: "", name: "", description: "" })
+  const [saving, setSaving] = React.useState(false)
+
+  const openCreate = () => {
+    setEditing(null)
+    setForm({ code: "", name: "", description: "" })
+    setEditorOpen(true)
+  }
+  const openEdit = (a: ActionRow) => {
+    setEditing(a)
+    setForm({
+      code: a.code,
+      name: a.name,
+      description: a.description ?? "",
+    })
+    setEditorOpen(true)
+  }
+  const saveAction = async () => {
+    if (!form.code.trim() || !form.name.trim()) {
+      toast.error("Cần nhập mã và tên thao tác")
+      return
+    }
+    setSaving(true)
+    try {
+      const res = await fetch("/api/actions", {
+        method: editing ? "PUT" : "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          ...(editing ? { id: editing.id } : {}),
+          code: form.code.trim(),
+          name: form.name.trim(),
+          description: form.description.trim(),
+          status: "active",
+          isDefault: editing?.isDefault ?? false,
+        }),
+      })
+      if (!res.ok) {
+        const data = await res.json().catch(() => null)
+        throw new Error(data?.error || "Lỗi lưu thao tác")
+      }
+      toast.success(editing ? "Đã cập nhật thao tác" : "Đã tạo thao tác mới", {
+        description: editing
+          ? undefined
+          : "Gán vào chức năng ở trang Tài nguyên (Xem đầy đủ → bấm ô).",
+      })
+      setEditorOpen(false)
+      router.refresh()
+    } catch (e: any) {
+      toast.error(e?.message || "Lỗi lưu thao tác")
+    } finally {
+      setSaving(false)
+    }
+  }
+  const [searchTerm, setSearchTerm] = React.useState("")
+  const [flowFilter, setFlowFilter] = React.useState<string | null>(null)
+  const [expanded, setExpanded] = React.useState<Set<string>>(() => new Set())
+  const [roles, setRoles] = React.useState<RoleLite[] | null>(null)
+  const [users, setUsers] = React.useState<Array<{
+    id: string
+    name?: string | null
+    email?: string | null
+    roleNames?: string[]
+  }> | null>(null)
+
+  const toggleExpand = (code: string) => {
+    setExpanded((prev) => {
+      const next = new Set(prev)
+      if (next.has(code)) next.delete(code)
+      else next.add(code)
+      return next
+    })
+    // lazy-load roles + users cho phần "ai đang có quyền này"
+    if (roles === null) {
+      setRoles([])
+      fetch("/api/roles?pageSize=200")
+        .then((r) => r.json())
+        .then((d) => setRoles(d.items ?? []))
+        .catch(() => setRoles([]))
+    }
+    if (users === null) {
+      setUsers([])
+      fetch("/api/users?pageSize=1000")
+        .then((r) => r.json())
+        .then((d) => setUsers(d.data ?? d.items ?? []))
+        .catch(() => setUsers([]))
+    }
+  }
+
+  const actionCodes = React.useMemo(() => actions.map((a) => a.code), [actions])
+
+  // action → các chức năng đang khai nó
+  const usage = React.useMemo(() => {
+    const map = new Map<string, Array<{ code: string; name: string }>>()
+    resources.forEach((r) => {
+      parseAllowed(r.config, actionCodes).forEach((a) => {
+        const list = map.get(a) ?? []
+        list.push({ code: r.code, name: r.name })
+        map.set(a, list)
+      })
+    })
+    return map
+  }, [resources, actionCodes])
+
+  // action → các vai trò đang được cấp (trên ít nhất 1 chức năng)
+  const roleUsage = React.useCallback(
+    (actionCode: string) => {
+      if (!roles) return null
+      const prefix = `${actionCode}:`
+      return roles
+        .map((role) => ({
+          role,
+          count: (role.permissions ?? []).filter((perm) =>
+            perm.startsWith(prefix)
+          ).length,
+        }))
+        .filter((x) => x.count > 0)
+    },
+    [roles]
+  )
+
+  const userHolders = React.useCallback(
+    (holderRoles: Array<{ role: RoleLite }> | null) => {
+      if (!users || !holderRoles) return null
+      const names = new Set(
+        holderRoles.map(({ role }) => role.name.toLowerCase())
+      )
+      const list: Array<{
+        id: string
+        label: string
+        superAdmin: boolean
+      }> = []
+      users.forEach((u) => {
+        const rn = (u.roleNames ?? []).map((x) => x.toLowerCase())
+        const superAdmin = rn.includes("super admin") || rn.includes("super_admin")
+        const viaRole = rn.some((x) => names.has(x))
+        if (viaRole || superAdmin) {
+          list.push({
+            id: u.id,
+            label: u.name || u.email || u.id,
+            superAdmin: superAdmin && !viaRole,
+          })
+        }
+      })
+      return list
+    },
+    [users]
+  )
+
+  const flows = React.useMemo(() => {
+    const map = new Map<string, ActionRow[]>()
+    actions.forEach((a) => {
+      const flow = STANDARD_ORDER.includes(a.code)
+        ? "Chung (CRUD chuẩn)"
+        : actionMeta?.[a.code]?.flow ||
+          (a.code === "lookup" ? "Tra cứu (combo)" : "Khác")
+      const list = map.get(flow) ?? []
+      list.push(a)
+      map.set(flow, list)
+    })
+    return map
+  }, [actions, actionMeta])
+
+  const searching = searchTerm.trim().length > 0
+  const q = searchTerm.trim().toLowerCase()
+
+  const matches = (a: ActionRow) => {
+    if (!searching) return true
+    const label = actionMeta?.[a.code]?.label || a.name
+    return (
+      label.toLowerCase().includes(q) ||
+      a.code.toLowerCase().includes(q) ||
+      (actionMeta?.[a.code]?.description ?? "").toLowerCase().includes(q)
+    )
+  }
+
+  return (
+    <div className="flex flex-col">
+      <div className="-mx-4 -mt-4 flex flex-wrap items-center gap-1.5 bg-sidebar px-3 py-2 text-sidebar-foreground shadow-md md:-mx-8 lg:mx-3 lg:mt-1 lg:rounded-xl lg:px-4">
+        <span className="flex h-8 w-8 shrink-0 items-center justify-center">
+          <Zap className="h-4 w-4 text-primary-foreground/80" />
+        </span>
+        <h1 className="min-w-0 flex-1 truncate px-1 text-base font-bold text-primary-foreground sm:text-lg">
+          Danh mục thao tác
+        </h1>
+        <span className="hidden shrink-0 text-xs tabular-nums text-primary-foreground/70 md:inline">
+          {actions.length} thao tác
+        </span>
+      </div>
+
+      <div className="mt-3 overflow-hidden rounded-xl border border-border bg-card shadow-sm lg:mx-3">
+        <div className="border-b border-border">
+          <div className="flex flex-wrap items-center gap-2 px-3 py-2 sm:px-4">
+            <div className="relative min-w-[150px] flex-1 sm:max-w-72">
+              <Search className="absolute left-2.5 top-2 h-3.5 w-3.5 text-muted-foreground" />
+              <Input
+                placeholder="Tìm thao tác..."
+                className="h-8 rounded-md border border-border bg-card pl-8 text-sm"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+            </div>
+            {editable && (
+              <Button onClick={openCreate} className="h-8 px-3 text-sm">
+                + Thêm thao tác
+              </Button>
+            )}
+          </div>
+          {/* Chips đếm theo nhóm — bấm để lọc */}
+          <div className="flex items-center gap-1 overflow-x-auto px-3 pb-2 sm:px-4 [scrollbar-width:thin]">
+            <button
+              type="button"
+              onClick={() => setFlowFilter(null)}
+              className={cn(
+                "shrink-0 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors",
+                flowFilter === null
+                  ? "border-primary bg-primary text-primary-foreground"
+                  : "border-border bg-card text-muted-foreground hover:border-primary/40 hover:text-foreground"
+              )}
+            >
+              Tất cả
+            </button>
+            {Array.from(flows.entries()).map(([flow, list]) => {
+              const active = flowFilter === flow
+              const sensitive = SENSITIVE_FLOWS.has(flow)
+              return (
+                <button
+                  key={flow}
+                  type="button"
+                  onClick={() => setFlowFilter(active ? null : flow)}
+                  className={cn(
+                    "flex shrink-0 items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors",
+                    active
+                      ? sensitive
+                        ? "border-amber-500 bg-amber-500 text-white"
+                        : "border-primary bg-primary text-primary-foreground"
+                      : sensitive
+                        ? "border-amber-300 bg-amber-50 text-amber-700 hover:border-amber-400 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-400"
+                        : "border-border bg-card text-muted-foreground hover:border-primary/40 hover:text-foreground"
+                  )}
+                >
+                  {sensitive && <ShieldAlert className="h-3 w-3" />}
+                  {flow}
+                  <span
+                    className={cn(
+                      "rounded-full px-1 text-[10px] tabular-nums",
+                      active ? "bg-white/20" : "bg-muted"
+                    )}
+                  >
+                    {list.length}
+                  </span>
+                </button>
+              )
+            })}
+          </div>
+        </div>
+        {REGISTRY_BANNER}
+
+        {Array.from(flows.entries()).map(([flow, list]) => {
+          if (flowFilter && flowFilter !== flow) return null
+          const visible = list.filter(matches)
+          if (visible.length === 0) return null
+          const sensitive = SENSITIVE_FLOWS.has(flow)
+          return (
+            <section key={flow}>
+              <div
+                className={cn(
+                  "flex items-center gap-2 border-b border-border px-4 py-2",
+                  sensitive
+                    ? "bg-amber-50 dark:bg-amber-950/40"
+                    : "bg-muted/40"
+                )}
+              >
+                {sensitive && (
+                  <ShieldAlert className="h-3.5 w-3.5 text-amber-600 dark:text-amber-400" />
+                )}
+                <h3
+                  className={cn(
+                    "text-sm font-semibold",
+                    sensitive
+                      ? "text-amber-700 dark:text-amber-400"
+                      : "text-foreground"
+                  )}
+                >
+                  {flow}
+                </h3>
+                <span className="text-[11px] tabular-nums text-muted-foreground">
+                  {visible.length} thao tác
+                </span>
+                {sensitive && (
+                  <span className="text-[10px] text-amber-600/80 dark:text-amber-400/80">
+                    — cân nhắc kỹ khi cấp
+                  </span>
+                )}
+              </div>
+              <ul className="divide-y divide-border/60 border-b border-border">
+                {visible.map((a) => {
+                  const meta = actionMeta?.[a.code]
+                  const used = usage.get(a.code) ?? []
+                  const isOpen = expanded.has(a.code)
+                  const holders = isOpen ? roleUsage(a.code) : null
+                  return (
+                    <li key={a.code} className="px-4 py-2">
+                      <button
+                        type="button"
+                        onClick={() => toggleExpand(a.code)}
+                        className="flex w-full flex-wrap items-center gap-2 text-left"
+                      >
+                        {isOpen ? (
+                          <ChevronDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                        ) : (
+                          <ChevronRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                        )}
+                        <span className="text-sm font-medium text-foreground">
+                          {meta?.label || a.name}
+                        </span>
+                        <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground">
+                          {a.code}
+                        </code>
+                        <span className="ml-auto text-[11px] tabular-nums text-muted-foreground">
+                          dùng ở {used.length} chức năng
+                        </span>
+                      </button>
+                      {isOpen && editable && (
+                        <div className="mt-1 pl-5.5 sm:pl-6">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => openEdit(a)}
+                            className="h-6 px-2 text-xs text-muted-foreground hover:text-foreground"
+                          >
+                            Sửa tên / mô tả
+                          </Button>
+                        </div>
+                      )}
+                      {(meta?.description || a.description) && (
+                        <p className="mt-0.5 pl-5.5 text-xs text-muted-foreground sm:pl-6">
+                          {meta?.description || a.description}
+                        </p>
+                      )}
+
+                      {isOpen && (
+                        <div className="mt-2 space-y-2 rounded-lg border border-border/70 bg-muted/20 p-3 sm:ml-6">
+                          {/* Ai đang có quyền này */}
+                          <div>
+                            <p className="mb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+                              Vai trò đang được cấp
+                            </p>
+                            {holders === null ? (
+                              <p className="text-[11px] text-muted-foreground">
+                                Đang tải...
+                              </p>
+                            ) : holders.length === 0 ? (
+                              <p className="text-[11px] text-muted-foreground">
+                                Chưa vai trò nào được cấp (Super Admin luôn
+                                có toàn quyền).
+                              </p>
+                            ) : (
+                              <div className="flex flex-wrap gap-1">
+                                {holders.map(({ role, count }) => (
+                                  <span
+                                    key={role.id}
+                                    title={`${role.name} — có "${meta?.label || a.name}" trên ${count} chức năng`}
+                                    className="rounded-md border border-primary/40 bg-primary/10 px-1.5 py-0.5 text-[11px] font-medium text-primary"
+                                  >
+                                    {role.name}
+                                    <span className="ml-1 text-[10px] opacity-70">
+                                      ·{count}
+                                    </span>
+                                  </span>
+                                ))}
+                              </div>
+                            )}
+                          </div>
+                          {/* Người dùng đang có (qua vai trò) */}
+                          <div>
+                            <p className="mb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+                              Người dùng đang có
+                            </p>
+                            {(() => {
+                              const uh = userHolders(holders)
+                              if (uh === null)
+                                return (
+                                  <p className="text-[11px] text-muted-foreground">
+                                    Đang tải...
+                                  </p>
+                                )
+                              if (uh.length === 0)
+                                return (
+                                  <p className="text-[11px] text-muted-foreground">
+                                    Chưa người dùng nào (qua các vai trò trên).
+                                  </p>
+                                )
+                              const shown = uh.slice(0, 15)
+                              return (
+                                <div className="flex flex-wrap gap-1">
+                                  {shown.map((u) => (
+                                    <span
+                                      key={u.id}
+                                      title={
+                                        u.superAdmin
+                                          ? "Có quyền vì là Super Admin (toàn quyền)"
+                                          : "Có quyền qua vai trò được cấp"
+                                      }
+                                      className={cn(
+                                        "rounded-md border px-1.5 py-0.5 text-[11px]",
+                                        u.superAdmin
+                                          ? "border-amber-300 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-400"
+                                          : "border-border bg-card text-foreground"
+                                      )}
+                                    >
+                                      {u.label}
+                                      {u.superAdmin && " ★"}
+                                    </span>
+                                  ))}
+                                  {uh.length > 15 && (
+                                    <span className="text-[11px] text-muted-foreground">
+                                      +{uh.length - 15} người khác
+                                    </span>
+                                  )}
+                                </div>
+                              )
+                            })()}
+                          </div>
+                          {/* Dùng ở chức năng nào */}
+                          <div>
+                            <p className="mb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+                              Dùng ở chức năng
+                            </p>
+                            {used.length === 0 ? (
+                              <p className="text-[11px] text-muted-foreground">
+                                Chưa chức năng nào khai thao tác này.
+                              </p>
+                            ) : (
+                              <div className="flex flex-wrap gap-1">
+                                {used.map((u) => (
+                                  <span
+                                    key={u.code}
+                                    className="rounded-md border border-border bg-card px-1.5 py-0.5 text-[11px] text-muted-foreground"
+                                  >
+                                    {u.name}
+                                    {resourcePages?.[u.code] && (
+                                      <code className="ml-1 font-mono text-[9px] opacity-70">
+                                        {resourcePages[u.code]}
+                                      </code>
+                                    )}
+                                  </span>
+                                ))}
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      )}
+                    </li>
+                  )
+                })}
+              </ul>
+            </section>
+          )
+        })}
+      </div>
+
+      {/* Dialog thêm/sửa thao tác */}
+      <Dialog open={editorOpen} onOpenChange={setEditorOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>
+              {editing ? "Sửa thao tác" : "Thêm thao tác mới"}
+            </DialogTitle>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div className="space-y-1">
+              <Label htmlFor="action-code">Mã (không dấu, gạch ngang)</Label>
+              <Input
+                id="action-code"
+                value={form.code}
+                disabled={!!editing}
+                onChange={(e) =>
+                  setForm((f) => ({ ...f, code: e.target.value }))
+                }
+                placeholder="vd: print-label"
+                className="font-mono"
+              />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="action-name">Tên hiển thị</Label>
+              <Input
+                id="action-name"
+                value={form.name}
+                onChange={(e) =>
+                  setForm((f) => ({ ...f, name: e.target.value }))
+                }
+                placeholder="vd: In tem giá"
+              />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="action-desc">
+                Mô tả (dùng làm gì, ở trang nào)
+              </Label>
+              <Textarea
+                id="action-desc"
+                value={form.description}
+                onChange={(e) =>
+                  setForm((f) => ({ ...f, description: e.target.value }))
+                }
+                rows={2}
+                placeholder="vd: In tem giá sản phẩm từ trang Sản phẩm"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="ghost"
+              onClick={() => setEditorOpen(false)}
+              disabled={saving}
+            >
+              Hủy
+            </Button>
+            <Button onClick={saveAction} disabled={saving}>
+              {saving ? "Đang lưu..." : "Lưu"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}