@goplusvn/core 0.1.37 → 0.1.39

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.37",
+  "version": "0.1.39",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org",

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

@@ -115,9 +115,14 @@ interface Permissions {
 
 export interface ActionListPageProps {
   permissions?: Permissions
+  /** Catalog hành động do Permission Registry trong code quản lý — ẩn mọi nút ghi. */
+  readOnly?: boolean
 }
 
-export function ActionListPage({ permissions = {} }: ActionListPageProps) {
+export function ActionListPage({
+  permissions = {},
+  readOnly = false,
+}: ActionListPageProps) {
   const [loading, setLoading] = useState(true)
   const [actions, setActions] = useState<Action[]>([])
   const [usage, setUsage] = useState<UsageMap>({})
@@ -140,9 +145,9 @@ export function ActionListPage({ permissions = {} }: ActionListPageProps) {
   const [toDelete, setToDelete] = useState<Action | null>(null)
   const [isDeleting, setIsDeleting] = useState(false)
 
-  const canCreate = !!permissions.create
-  const canUpdate = !!permissions.update
-  const canDelete = !!permissions.delete
+  const canCreate = !readOnly && !!permissions.create
+  const canUpdate = !readOnly && !!permissions.update
+  const canDelete = !readOnly && !!permissions.delete
 
   const fetchData = async () => {
     try {

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

@@ -212,7 +212,20 @@ const normalize = (s: string) =>
     .replace(/[\u0300-\u036f]/g, "")
     .replace(/đ/g, "d")
 
-export function ResourceListPage() {
+export interface ResourceListPageProps {
+  /** Danh mục do Permission Registry trong code quản lý: ẩn nút Thêm/Sync/
+   *  Action-manager, thao tác sửa/xóa hiện toast hướng dẫn thay vì mở dialog. */
+  readOnly?: boolean
+}
+
+export function ResourceListPage({ readOnly = false }: ResourceListPageProps = {}) {
+  const registryToast = () =>
+    toast.info("Danh mục do Permission Registry quản lý", {
+      description:
+        "Sửa file <feature>.permissions.ts trong code rồi chạy rbac-sync — không chỉnh tay ở đây.",
+    })
+  const guardWrite = <T extends (...args: any[]) => any>(fn: T): T =>
+    (readOnly ? ((() => registryToast()) as unknown as T) : fn)
   const [loading, setLoading] = useState(true)
   const [resources, setResources] = useState<Resource[]>([])
   const [allActions, setAllActions] = useState<Action[]>([])
@@ -707,37 +720,57 @@ export function ResourceListPage() {
             className={cn("h-4 w-4", isRefreshing && "animate-spin")}
           />
         </Button>
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={handleSync}
-          disabled={isSyncing}
-          title="Đồng bộ tài nguyên"
-          className="h-8 w-8 shrink-0 text-primary-foreground/80 hover:bg-white/10 hover:text-primary-foreground"
-        >
-          <DatabaseBackup
-            className={cn("h-4 w-4", isSyncing && "animate-pulse")}
-          />
-        </Button>
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={openActionManager}
-          title="Quản lý hành động"
-          className="h-8 w-8 shrink-0 text-primary-foreground/80 hover:bg-white/10 hover:text-primary-foreground"
-        >
-          <Zap className="h-4 w-4" />
-        </Button>
-        <Button
-          onClick={openNewResource}
-          className="h-8 shrink-0 bg-primary-foreground px-2.5 text-primary hover:bg-primary-foreground/90 sm:px-3"
-        >
-          <Plus className="h-4 w-4" />
-          <span className="ml-1.5 hidden sm:inline">Thêm tài nguyên</span>
-          <span className="ml-1.5 sm:hidden">Thêm</span>
-        </Button>
+        {!readOnly && (
+          <>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={handleSync}
+              disabled={isSyncing}
+              title="Đồng bộ tài nguyên"
+              className="h-8 w-8 shrink-0 text-primary-foreground/80 hover:bg-white/10 hover:text-primary-foreground"
+            >
+              <DatabaseBackup
+                className={cn("h-4 w-4", isSyncing && "animate-pulse")}
+              />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={openActionManager}
+              title="Quản lý hành động"
+              className="h-8 w-8 shrink-0 text-primary-foreground/80 hover:bg-white/10 hover:text-primary-foreground"
+            >
+              <Zap className="h-4 w-4" />
+            </Button>
+            <Button
+              onClick={openNewResource}
+              className="h-8 shrink-0 bg-primary-foreground px-2.5 text-primary hover:bg-primary-foreground/90 sm:px-3"
+            >
+              <Plus className="h-4 w-4" />
+              <span className="ml-1.5 hidden sm:inline">Thêm tài nguyên</span>
+              <span className="ml-1.5 sm:hidden">Thêm</span>
+            </Button>
+          </>
+        )}
       </div>
 
+      {readOnly && (
+        <div className="mt-3 flex items-start gap-2 rounded-lg border border-border bg-muted/40 px-3 py-2 text-xs text-muted-foreground lg:mx-3">
+          <Shield className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+          <span>
+            Danh mục tài nguyên &amp; hành động do{" "}
+            <span className="font-medium text-foreground">
+              Permission Registry
+            </span>{" "}
+            trong code quản lý (file{" "}
+            <code className="font-mono">&lt;feature&gt;.permissions.ts</code> +{" "}
+            <code className="font-mono">rbac-sync</code>). Trang này chỉ để tra
+            cứu; cấp quyền cho vai trò làm ở trang Vai trò.
+          </span>
+        </div>
+      )}
+
       {/* ===== Khối trắng liền: toolbar sticky + nhóm + hàng tài nguyên ===== */}
       <div className="mt-3 overflow-hidden rounded-xl border border-border bg-card shadow-sm lg:mx-3">
         {/* Toolbar sticky */}
@@ -868,9 +901,9 @@ export function ResourceListPage() {
                           categorized={categorizedActions}
                           expanded={expandedRows.has(resource.id)}
                           onToggleExpand={() => toggleRow(resource.id)}
-                          onToggleAction={toggleAction}
-                          onUpdateActions={handleUpdateActions}
-                          onEditResource={openEditResource}
+                          onToggleAction={guardWrite(toggleAction)}
+                          onUpdateActions={guardWrite(handleUpdateActions)}
+                          onEditResource={guardWrite(openEditResource)}
                         />
                       ))}
                     </ul>
@@ -886,10 +919,10 @@ export function ResourceListPage() {
                           categorized={categorizedActions}
                           expanded={expandedRows.has(resource.id)}
                           onToggleExpand={() => toggleRow(resource.id)}
-                          onToggleAction={toggleAction}
-                          onUpdateActions={handleUpdateActions}
-                          onEditResource={openEditResource}
-                          onDeleteResource={requestDeleteResource}
+                          onToggleAction={guardWrite(toggleAction)}
+                          onUpdateActions={guardWrite(handleUpdateActions)}
+                          onEditResource={guardWrite(openEditResource)}
+                          onDeleteResource={guardWrite(requestDeleteResource)}
                         />
                       ))}
                     </div>

package/src/rbac/pages/role-form-page.tsx

@@ -1,11 +1,21 @@
 "use client";
 
-// Trang tạo/sửa VAI TRÒ — bar navy 1 DÒNG kiểu chi tiết đơn bán hàng
-// (← tên inline · chip mã + copy · CHIP TRẠNG THÁI màu bấm-đổi · mô tả ·
-// Hủy/Lưu), full width; khối trắng: toolbar sticky (đếm x/y quyền realtime),
-// nhóm = dòng mảnh, tài nguyên = dòng + CHIP quyền (checkbox + icon lucide
-// theo loại action, prop actionLabels bổ sung nhãn nghiệp vụ app).
-// API contract: POST /api/roles, PUT /api/roles/:id.
+// Trang tạo/sửa VAI TRÒ — bar navy 1 DÒNG kiểu chi tiết đơn bán hàng.
+//
+// Ma trận quyền v3 ("Mức truy cập 5 nấc" — chốt với chủ app 2026-07):
+//   - TAB theo phân hệ (đếm x/y realtime).
+//   - Mỗi tài nguyên MỘT DÒNG: [Ẩn | Tra cứu | Xem | Ghi | Toàn quyền]
+//       Ẩn        = không menu, không quyền gì
+//       Tra cứu   = chỉ chọn trong combo/selector (lookup) — KHÔNG thấy menu
+//       Xem       = menu sidebar hiện + vào được trang
+//       Ghi       = Xem + Tạo/Sửa/Xuất/Nhập
+//       Toàn quyền= Ghi + Xóa
+//   - Thao tác NGHIỆP VỤ (duyệt, thanh toán, MISA…) thu gọn "n/m ▸", bung ra
+//     nhóm theo LUỒNG (prop actionMeta.flow), tooltip mô tả, và tự cưỡng chế
+//     quyền tiên quyết (actionMeta.requires — mặc định cần Xem).
+//   - resourcePages: đường dẫn trang hiện dưới tên tài nguyên.
+// API contract giữ nguyên: POST /api/roles, PUT /api/roles/:id, quyền dạng
+// `${action}:${resource}`.
 import * as React from "react"
 import { useRouter } from "next/navigation"
 import {
@@ -18,7 +28,6 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-  Switch,
   getStatusMeta,
 } from "../../ui"
 import { toast } from "sonner"
@@ -33,6 +42,7 @@ import {
   Copy,
   Download,
   Eye,
+  LayoutTemplate,
   PenLine,
   Pencil,
   Plus,
@@ -73,8 +83,31 @@ const DEFAULT_ACTION_LABELS: Record<string, ActionLabelConfig> = {
   delete_items: { label: "Xóa chi tiết", icon: "❌", color: "text-rose-600" },
 }
 
-// --- Icon + màu theo LOẠI action (suy từ mã, giống ACTION_TONES trang tài
-// nguyên) — mọi action đều có icon mà không cần cấu hình từng cái. ---
+// Action CHUẨN gộp vào thang "Mức truy cập" — không hiện lẻ.
+const WRITE_CODES = ["create", "update", "export", "import"] as const
+const STANDARD_CODES = new Set([
+  "view",
+  "lookup",
+  "delete",
+  ...WRITE_CODES,
+])
+
+type AccessLevel = "hidden" | "lookup" | "view" | "write" | "full"
+
+const LEVELS: Array<{ key: AccessLevel; label: string; hint: string }> = [
+  { key: "hidden", label: "Ẩn", hint: "Không thấy menu, không quyền gì" },
+  {
+    key: "lookup",
+    label: "Tra cứu",
+    hint: "Chỉ chọn trong combo/selector — KHÔNG thấy menu",
+  },
+  { key: "view", label: "Xem", hint: "Menu sidebar hiện + vào được trang" },
+  { key: "write", label: "Ghi", hint: "Xem + Tạo/Sửa/Xuất/Nhập" },
+  { key: "full", label: "Toàn quyền", hint: "Ghi + Xóa" },
+]
+
+// --- Icon + màu theo LOẠI action (suy từ mã) — mọi action nghiệp vụ đều có
+// icon mà không cần cấu hình từng cái. ---
 const ACTION_VISUAL_RULES: Array<{
   re: RegExp
   icon: LucideIcon
@@ -86,7 +119,7 @@ const ACTION_VISUAL_RULES: Array<{
   { re: /^(delete|remove)/, icon: Trash2, cls: "text-rose-500" },
   { re: /^(cancel|void|reject)/, icon: Ban, cls: "text-rose-500" },
   {
-    re: /^(approve|confirm|verify|accept)/,
+    re: /^(approve|confirm|verify|accept|complete)/,
     icon: BadgeCheck,
     cls: "text-violet-500",
   },
@@ -94,8 +127,12 @@ const ACTION_VISUAL_RULES: Array<{
   { re: /^import/, icon: Download, cls: "text-purple-500" },
   { re: /^export/, icon: Upload, cls: "text-indigo-500" },
   { re: /^print/, icon: Printer, cls: "text-cyan-600" },
-  { re: /^sync/, icon: RefreshCw, cls: "text-cyan-600" },
-  { re: /^(manage|config)/, icon: Settings2, cls: "text-orange-500" },
+  { re: /^(sync|unlink)/, icon: RefreshCw, cls: "text-cyan-600" },
+  {
+    re: /^(manage|config|close|reopen)/,
+    icon: Settings2,
+    cls: "text-orange-500",
+  },
   { re: /^auto/, icon: Bot, cls: "text-purple-500" },
 ]
 
@@ -105,6 +142,22 @@ const getActionVisual = (code: string) =>
     cls: "text-slate-400",
   }
 
+/** Bộ quyền mẫu áp khi TẠO vai trò mới (consumer định nghĩa). */
+export interface RoleTemplate {
+  code: string
+  label: string
+  description?: string
+  permissions: string[]
+}
+
+/** Metadata action nghiệp vụ: nhóm luồng + mô tả + quyền tiên quyết. */
+export interface ActionMetaEntry {
+  label?: string
+  description?: string
+  flow?: string
+  requires?: string[]
+}
+
 export interface RoleFormPageProps {
   dictionary: any
   permissions?: CrudPermissions
@@ -136,6 +189,12 @@ export interface RoleFormPageProps {
     permissions: string[]
   }
   actionLabels?: Record<string, ActionLabelConfig>
+  /** Bộ quyền mẫu hiện ở chế độ tạo mới (additive — không truyền thì ẩn). */
+  roleTemplates?: RoleTemplate[]
+  /** Meta action nghiệp vụ theo code (flow/description/requires) — additive. */
+  actionMeta?: Record<string, ActionMetaEntry>
+  /** Đường dẫn trang theo resource code (hiện dưới tên) — additive. */
+  resourcePages?: Record<string, string>
 }
 
 export function RoleFormPage({
@@ -147,6 +206,9 @@ export function RoleFormPage({
   mode,
   initialData,
   actionLabels,
+  roleTemplates,
+  actionMeta,
+  resourcePages,
 }: RoleFormPageProps) {
   const router = useRouter()
 
@@ -166,16 +228,18 @@ export function RoleFormPage({
     permissions: initialData?.permissions || ([] as string[]),
   })
 
-  const [activeGroup, setActiveGroup] = React.useState<string | null>("all")
-  const [collapsedGroups, setCollapsedGroups] = React.useState<
-    Record<string, boolean>
-  >({})
+  const [activeGroup, setActiveGroup] = React.useState<string>("all")
+  const [expandedRows, setExpandedRows] = React.useState<Set<string>>(
+    () => new Set()
+  )
 
-  const toggleGroupCollapse = (groupName: string) => {
-    setCollapsedGroups((prev) => ({
-      ...prev,
-      [groupName]: !prev[groupName],
-    }))
+  const toggleRowExpand = (code: string) => {
+    setExpandedRows((prev) => {
+      const next = new Set(prev)
+      if (next.has(code)) next.delete(code)
+      else next.add(code)
+      return next
+    })
   }
 
   const getLocalizedName = React.useCallback(
@@ -197,6 +261,18 @@ export function RoleFormPage({
     [dictionary]
   )
 
+  const actionName = React.useCallback(
+    (code: string) => {
+      return (
+        actionMeta?.[code]?.label ||
+        actions.find((a) => a.code === code)?.name ||
+        mergedActionLabels[code]?.label ||
+        code
+      )
+    },
+    [actions, actionMeta, mergedActionLabels]
+  )
+
   const permissionMatrix = React.useMemo(() => {
     return resources.map((resource) => {
       let allowedActions: string[] = []
@@ -243,10 +319,18 @@ export function RoleFormPage({
         group: getLocalizedName(resource.group) || "Khác",
         description: resource.description,
         actions: allowedActions,
+        businessActions: allowedActions.filter(
+          (a) => !STANDARD_CODES.has(a)
+        ),
+        hasLookup: allowedActions.includes("lookup"),
+        writeCodes: WRITE_CODES.filter((c) => allowedActions.includes(c)),
+        hasDelete: allowedActions.includes("delete"),
       }
     })
   }, [resources, actions, getLocalizedName])
 
+  type MatrixRow = (typeof permissionMatrix)[number]
+
   const totalAvailablePermissions = React.useMemo(
     () => permissionMatrix.reduce((sum, r) => sum + r.actions.length, 0),
     [permissionMatrix]
@@ -265,7 +349,7 @@ export function RoleFormPage({
   }, [searchTerm, permissionMatrix])
 
   const groupedMatrix = React.useMemo(() => {
-    const groups: Record<string, typeof permissionMatrix> = {}
+    const groups: Record<string, MatrixRow[]> = {}
     filteredMatrix.forEach((resource) => {
       const group = resource.group
       if (!groups[group]) {
@@ -276,99 +360,146 @@ export function RoleFormPage({
     return groups
   }, [filteredMatrix])
 
+  const allGroups = React.useMemo(() => {
+    const seen: string[] = []
+    permissionMatrix.forEach((r) => {
+      if (!seen.includes(r.group)) seen.push(r.group)
+    })
+    return seen
+  }, [permissionMatrix])
+
   React.useEffect(() => {
-    const groups = Object.keys(groupedMatrix)
-    if (groups.length > 0) {
-      if (
-        activeGroup !== "all" &&
-        (!activeGroup || !groups.includes(activeGroup))
-      ) {
-        setActiveGroup("all")
-      }
-    } else {
-      setActiveGroup(null)
+    if (activeGroup !== "all" && !allGroups.includes(activeGroup)) {
+      setActiveGroup("all")
     }
-  }, [groupedMatrix, activeGroup])
-
-  const hasPermission = (resource: string, action: string): boolean => {
-    return formData.permissions.includes(`${action}:${resource}`)
-  }
+  }, [allGroups, activeGroup])
 
-  const togglePermission = (resource: string, action: string) => {
-    const permission = `${action}:${resource}`
-    let newPermissions = [...formData.permissions]
+  const searching = searchTerm.trim().length > 0
 
-    if (newPermissions.includes(permission)) {
-      newPermissions = newPermissions.filter((p) => p !== permission)
-    } else {
-      newPermissions.push(permission)
-    }
-    setFormData({ ...formData, permissions: newPermissions })
-  }
-
-  const groupPermissionCodes = React.useCallback(
-    (groupName: string) => {
-      const groupResources = groupedMatrix[groupName] || []
-      return groupResources.flatMap((r) =>
-        actions
-          .filter((a) => r.actions.includes(a.code))
-          .map((a) => `${a.code}:${r.resource}`)
-      )
-    },
-    [groupedMatrix, actions]
+  const has = React.useCallback(
+    (resource: string, action: string) =>
+      formData.permissions.includes(`${action}:${resource}`),
+    [formData.permissions]
   )
 
-  const toggleAllForGroup = (groupName: string, enable: boolean) => {
-    const groupPermissions = groupPermissionCodes(groupName)
-    let newPermissions = [...formData.permissions]
+  const mutatePermissions = (
+    fn: (set: Set<string>) => void
+  ) => {
+    setFormData((prev) => {
+      const set = new Set(prev.permissions)
+      fn(set)
+      return { ...prev, permissions: Array.from(set) }
+    })
+  }
 
-    if (enable) {
-      const toAdd = groupPermissions.filter((p) => !newPermissions.includes(p))
-      newPermissions = [...newPermissions, ...toAdd]
-    } else {
-      newPermissions = newPermissions.filter(
-        (p) => !groupPermissions.includes(p)
-      )
+  // ── Mức truy cập ──────────────────────────────────────────────────────
+  const deriveLevel = (r: MatrixRow): AccessLevel => {
+    if (has(r.resource, "view")) {
+      const anyWrite = r.writeCodes.some((c) => has(r.resource, c))
+      if (!anyWrite && !(r.hasDelete && has(r.resource, "delete")))
+        return "view"
+      const fullWrite = r.writeCodes.every((c) => has(r.resource, c))
+      if (fullWrite && (!r.hasDelete || has(r.resource, "delete")))
+        return "full"
+      return "write"
     }
+    if (r.hasLookup && has(r.resource, "lookup")) return "lookup"
+    return "hidden"
+  }
 
-    setFormData({ ...formData, permissions: newPermissions })
+  const setLevel = (r: MatrixRow, level: AccessLevel) => {
+    mutatePermissions((set) => {
+      const rm = (a: string) => set.delete(`${a}:${r.resource}`)
+      const add = (a: string) => set.add(`${a}:${r.resource}`)
+      // reset phần chuẩn
+      ;["view", "lookup", "delete", ...WRITE_CODES].forEach(rm)
+      if (level === "hidden" || level === "lookup") {
+        // mất Xem → thao tác nghiệp vụ (đều cần Xem) tắt theo
+        const on = r.businessActions.filter((a) =>
+          set.has(`${a}:${r.resource}`)
+        )
+        r.businessActions.forEach(rm)
+        if (on.length > 0) {
+          toast.info(
+            `Đã tắt ${on.length} thao tác nghiệp vụ của "${r.name}" (cần mức Xem trở lên)`
+          )
+        }
+        if (level === "lookup" && r.hasLookup) add("lookup")
+        return
+      }
+      add("view")
+      if (level === "write" || level === "full") {
+        r.writeCodes.forEach(add)
+      }
+      if (level === "full" && r.hasDelete) add("delete")
+    })
   }
 
-  const groupSelectedCount = (groupName: string) => {
-    const codes = groupPermissionCodes(groupName)
-    return {
-      selected: codes.filter((p) => formData.permissions.includes(p)).length,
-      total: codes.length,
+  // ── Thao tác nghiệp vụ + requires ─────────────────────────────────────
+  const toggleBusinessAction = (r: MatrixRow, code: string) => {
+    const key = `${code}:${r.resource}`
+    if (formData.permissions.includes(key)) {
+      mutatePermissions((set) => set.delete(key))
+      return
+    }
+    const requires = actionMeta?.[code]?.requires ?? []
+    const needed = ["view", ...requires].filter(
+      (req) =>
+        r.actions.includes(req) &&
+        !formData.permissions.includes(`${req}:${r.resource}`)
+    )
+    mutatePermissions((set) => {
+      set.add(key)
+      needed.forEach((req) => set.add(`${req}:${r.resource}`))
+    })
+    if (needed.length > 0) {
+      toast.info(
+        `Đã bật kèm quyền tiên quyết: ${needed
+          .map((c) => actionName(c))
+          .join(", ")}`
+      )
     }
   }
 
-  const toggleAllForResource = (
-    resourceCode: string,
-    resourceActions: string[],
-    check: boolean
-  ) => {
-    let newPermissions = [...formData.permissions]
-
-    resourceActions.forEach((actionCode) => {
-      const permission = `${actionCode}:${resourceCode}`
-      if (check && !newPermissions.includes(permission)) {
-        newPermissions.push(permission)
-      } else if (!check && newPermissions.includes(permission)) {
-        newPermissions = newPermissions.filter((p) => p !== permission)
-      }
-    })
+  // ── Đếm ───────────────────────────────────────────────────────────────
+  const groupPermissionCodes = React.useCallback(
+    (rows: MatrixRow[]) =>
+      rows.flatMap((r) => r.actions.map((a) => `${a}:${r.resource}`)),
+    []
+  )
+
+  const countSelected = React.useCallback(
+    (codes: string[]) =>
+      codes.filter((p) => formData.permissions.includes(p)).length,
+    [formData.permissions]
+  )
 
-    setFormData((prev) => ({ ...prev, permissions: newPermissions }))
+  const toggleAllForGroup = (rows: MatrixRow[], enable: boolean) => {
+    const codes = groupPermissionCodes(rows)
+    mutatePermissions((set) => {
+      if (enable) codes.forEach((c) => set.add(c))
+      else codes.forEach((c) => set.delete(c))
+    })
   }
 
-  const isResourceFullPermission = (
-    resourceCode: string,
-    resourceActions: string[]
-  ) => {
-    if (resourceActions.length === 0) return false
-    return resourceActions.every((actionCode) =>
-      formData.permissions.includes(`${actionCode}:${resourceCode}`)
-    )
+  const groupTabCount = React.useCallback(
+    (groupName: string) => {
+      const rows = permissionMatrix.filter((r) => r.group === groupName)
+      const codes = rows.flatMap((r) =>
+        r.actions.map((a) => `${a}:${r.resource}`)
+      )
+      return { selected: countSelected(codes), total: codes.length }
+    },
+    [permissionMatrix, countSelected]
+  )
+
+  const applyTemplate = (templateCode: string) => {
+    const tpl = roleTemplates?.find((t) => t.code === templateCode)
+    if (!tpl) return
+    setFormData((prev) => ({ ...prev, permissions: [...tpl.permissions] }))
+    toast.success(`Đã áp bộ quyền mẫu "${tpl.label}"`, {
+      description: `${tpl.permissions.length} quyền — chỉnh tiếp rồi bấm Lưu.`,
+    })
   }
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -409,14 +540,12 @@ export function RoleFormPage({
   const visibleGroups = Object.entries(groupedMatrix).filter(
     ([group, groupResources]) =>
       groupResources.length > 0 &&
-      !(activeGroup && activeGroup !== "all" && activeGroup !== group)
+      (searching || activeGroup === "all" || activeGroup === group)
   )
 
   return (
     <div className="flex flex-col">
-      {/* ===== 1. Header bar navy 1 DÒNG — theo pattern chi tiết đơn bán
-            hàng (bg-sidebar). Mobile: chỉ ← Tên ⏻ ✕ Lưu; mã (chip) + mô tả
-            hiện từ md. Create mode: ô mã rớt xuống dòng riêng trên mobile. ===== */}
+      {/* ===== 1. Header bar navy 1 DÒNG ===== */}
       <div className="-mx-4 -mt-4 flex flex-wrap items-center gap-1.5 bg-sidebar px-3 py-2 text-sidebar-foreground shadow-md md:-mx-8 lg:mx-3 lg:mt-1 lg:rounded-xl lg:px-4">
         <Button
           variant="ghost"
@@ -461,8 +590,6 @@ export function RoleFormPage({
             className="order-last h-7 basis-full rounded-md border-white/20 bg-white/10 px-2 font-mono text-xs text-primary-foreground shadow-none placeholder:text-primary-foreground/40 focus-visible:ring-1 focus-visible:ring-white/40 sm:order-none sm:w-44 sm:basis-auto"
           />
         )}
-        {/* Chip trạng thái màu (getStatusMeta.solidClass — cùng taxonomy với
-            header đơn bán hàng); bấm để đổi Hoạt động ↔ Khóa */}
         {(() => {
           const statusMeta = getStatusMeta(
             formData.status,
@@ -526,44 +653,115 @@ export function RoleFormPage({
       </div>
 
       <div className="mt-3 overflow-hidden rounded-xl border border-border bg-card shadow-sm lg:mx-3">
-        {/* ===== 2. Toolbar sticky ===== */}
-        <div className="sticky top-0 z-20 flex flex-wrap items-center gap-2 border-b border-border bg-card/95 px-3 py-2 backdrop-blur supports-[backdrop-filter]:bg-card/85 sm:px-4">
-          <div className="relative min-w-[140px] flex-1 sm:max-w-64">
-            <Search className="absolute left-2.5 top-2 h-3.5 w-3.5 text-muted-foreground" />
-            <Input
-              placeholder="Tìm kiếm tài nguyên..."
-              className="h-8 rounded-md border border-border bg-card pl-8 text-sm"
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-            />
+        {/* ===== 2. Toolbar sticky: search · bộ quyền mẫu · đếm · tab ===== */}
+        <div className="sticky top-0 z-20 border-b border-border bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/85">
+          <div className="flex flex-wrap items-center gap-2 px-3 py-2 sm:px-4">
+            <div className="relative min-w-[140px] flex-1 sm:max-w-64">
+              <Search className="absolute left-2.5 top-2 h-3.5 w-3.5 text-muted-foreground" />
+              <Input
+                placeholder="Tìm kiếm tài nguyên..."
+                className="h-8 rounded-md border border-border bg-card pl-8 text-sm"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+            </div>
+            {mode === "create" && (roleTemplates?.length ?? 0) > 0 && (
+              <Select onValueChange={applyTemplate}>
+                <SelectTrigger className="h-8 w-44 rounded-md border border-border bg-card text-sm sm:w-52">
+                  <span className="flex items-center gap-1.5 truncate">
+                    <LayoutTemplate className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                    <SelectValue placeholder="Bộ quyền mẫu..." />
+                  </span>
+                </SelectTrigger>
+                <SelectContent className="rounded-lg">
+                  {roleTemplates!.map((tpl) => (
+                    <SelectItem key={tpl.code} value={tpl.code}>
+                      <span className="flex flex-col">
+                        <span>{tpl.label}</span>
+                        {tpl.description && (
+                          <span className="text-[11px] text-muted-foreground">
+                            {tpl.description}
+                          </span>
+                        )}
+                      </span>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+            <p className="ml-auto whitespace-nowrap text-xs text-muted-foreground">
+              <span className="font-semibold tabular-nums text-foreground">
+                {formData.permissions.length}
+              </span>
+              <span className="tabular-nums">/{totalAvailablePermissions}</span>{" "}
+              quyền
+            </p>
           </div>
-          <Select
-            value={activeGroup || "all"}
-            onValueChange={(val) => setActiveGroup(val === "all" ? null : val)}
-          >
-            <SelectTrigger className="h-8 w-36 rounded-md border border-border bg-card text-sm sm:w-44">
-              <SelectValue placeholder="Tất cả nhóm" />
-            </SelectTrigger>
-            <SelectContent className="rounded-lg">
-              <SelectItem value="all">Tất cả nhóm</SelectItem>
-              {Object.keys(groupedMatrix).map((group) => (
-                <SelectItem key={group} value={group}>
+
+          {/* Thanh TAB phân hệ */}
+          <div className="flex items-center gap-1 overflow-x-auto px-3 pb-2 sm:px-4 [scrollbar-width:thin]">
+            <button
+              type="button"
+              onClick={() => setActiveGroup("all")}
+              className={cn(
+                "shrink-0 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors",
+                activeGroup === "all" && !searching
+                  ? "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>
+            {allGroups.map((group) => {
+              const { selected, total } = groupTabCount(group)
+              const active = activeGroup === group && !searching
+              return (
+                <button
+                  key={group}
+                  type="button"
+                  onClick={() => {
+                    setActiveGroup(group)
+                    setSearchTerm("")
+                  }}
+                  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
+                      ? "border-primary bg-primary text-primary-foreground"
+                      : "border-border bg-card text-muted-foreground hover:border-primary/40 hover:text-foreground"
+                  )}
+                >
                   {group}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          <p className="ml-auto whitespace-nowrap text-xs text-muted-foreground">
-            {filteredMatrix.length} tài nguyên ·{" "}
-            <span className="font-semibold tabular-nums text-foreground">
-              {formData.permissions.length}
-            </span>
-            <span className="tabular-nums">/{totalAvailablePermissions}</span>{" "}
-            quyền
-          </p>
+                  <span
+                    className={cn(
+                      "rounded-full px-1 text-[10px] tabular-nums",
+                      active
+                        ? "bg-primary-foreground/20"
+                        : selected > 0
+                          ? selected === total
+                            ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-400"
+                            : "bg-muted text-foreground"
+                          : "bg-muted"
+                    )}
+                  >
+                    {selected}/{total}
+                  </span>
+                </button>
+              )
+            })}
+          </div>
+
+          {/* Chú giải 5 nấc — 1 dòng mảnh */}
+          <div className="hidden items-center gap-3 border-t border-border/60 px-4 py-1 text-[11px] text-muted-foreground md:flex">
+            {LEVELS.map((l) => (
+              <span key={l.key} className="flex items-center gap-1">
+                <span className="font-medium text-foreground">{l.label}</span>
+                <span className="opacity-80">= {l.hint}</span>
+              </span>
+            ))}
+          </div>
         </div>
 
-        {/* ===== 3. Nhóm + tài nguyên dạng dòng ===== */}
+        {/* ===== 3. Dòng tài nguyên: mức truy cập + thao tác nghiệp vụ ===== */}
         {visibleGroups.length === 0 ? (
           <div className="flex flex-col items-center justify-center py-16 text-center">
             <Search className="mb-3 h-6 w-6 text-muted-foreground" />
@@ -573,30 +771,14 @@ export function RoleFormPage({
           </div>
         ) : (
           visibleGroups.map(([group, groupResources]) => {
-            const collapsed = !!collapsedGroups[group]
-            const { selected, total } = groupSelectedCount(group)
+            const codes = groupPermissionCodes(groupResources)
+            const selected = countSelected(codes)
+            const total = codes.length
             const isFull = total > 0 && selected === total
 
             return (
               <section key={group}>
-                {/* Dòng tiêu đề nhóm — mảnh, không đóng khung */}
-                <div
-                  role="button"
-                  tabIndex={0}
-                  onClick={() => toggleGroupCollapse(group)}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault()
-                      toggleGroupCollapse(group)
-                    }
-                  }}
-                  className="flex cursor-pointer select-none items-center gap-2 border-b border-border bg-card px-4 py-2 transition-colors hover:bg-muted/40"
-                >
-                  {collapsed ? (
-                    <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground" />
-                  ) : (
-                    <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground" />
-                  )}
+                <div className="flex items-center gap-2 border-b border-border bg-muted/40 px-4 py-2">
                   <h3 className="truncate text-xs font-semibold uppercase tracking-wide text-foreground">
                     {group}
                   </h3>
@@ -611,15 +793,12 @@ export function RoleFormPage({
                     {groupResources.length} tài nguyên · {selected}/{total}
                     {isFull && <Check className="ml-0.5 inline h-3 w-3" />}
                   </span>
-                  <div
-                    className="ml-auto flex shrink-0 items-center gap-1"
-                    onClick={(e) => e.stopPropagation()}
-                  >
+                  <div className="ml-auto flex shrink-0 items-center gap-1">
                     <Button
                       type="button"
                       variant="ghost"
                       size="sm"
-                      onClick={() => toggleAllForGroup(group, false)}
+                      onClick={() => toggleAllForGroup(groupResources, false)}
                       disabled={selected === 0}
                       className="h-6 px-2 text-xs text-muted-foreground hover:text-destructive"
                     >
@@ -629,7 +808,7 @@ export function RoleFormPage({
                       type="button"
                       variant="ghost"
                       size="sm"
-                      onClick={() => toggleAllForGroup(group, true)}
+                      onClick={() => toggleAllForGroup(groupResources, true)}
                       disabled={isFull}
                       className="h-6 px-2 text-xs font-semibold text-primary hover:text-primary"
                     >
@@ -638,106 +817,178 @@ export function RoleFormPage({
                   </div>
                 </div>
 
-                {/* Các dòng tài nguyên */}
-                {!collapsed && (
-                  <ul className="divide-y divide-border/70 border-b border-border">
-                    {groupResources.map((resource) => (
-                      <li key={resource.resource} className="px-4 py-2.5">
-                        <div className="flex items-center gap-2">
-                          <DynamicIcon
-                            name={resource.icon as any}
-                            className="h-4 w-4 shrink-0 text-muted-foreground"
-                          />
-                          <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.resource}
-                          </code>
-                          <label className="ml-auto flex shrink-0 cursor-pointer items-center gap-1.5">
-                            <span className="hidden text-[10px] font-medium uppercase text-muted-foreground sm:inline">
-                              Tất cả
-                            </span>
-                            <Switch
-                              checked={isResourceFullPermission(
-                                resource.resource,
-                                resource.actions
-                              )}
-                              onCheckedChange={(checked) =>
-                                toggleAllForResource(
-                                  resource.resource,
-                                  resource.actions,
-                                  checked
-                                )
-                              }
-                              className="origin-right scale-75"
+                <ul className="divide-y divide-border/60 border-b border-border">
+                  {groupResources.map((r) => {
+                    const level = deriveLevel(r)
+                    const bizOn = r.businessActions.filter((a) =>
+                      has(r.resource, a)
+                    ).length
+                    const expanded = expandedRows.has(r.resource)
+                    const page = resourcePages?.[r.resource]
+
+                    // Nhóm thao tác theo LUỒNG
+                    const flows = new Map<string, string[]>()
+                    r.businessActions.forEach((code) => {
+                      const flow = actionMeta?.[code]?.flow || "Khác"
+                      const list = flows.get(flow) ?? []
+                      list.push(code)
+                      flows.set(flow, list)
+                    })
+
+                    return (
+                      <li key={r.resource} className="px-4 py-2.5">
+                        <div className="flex flex-wrap items-center gap-x-3 gap-y-1.5">
+                          {/* Tên + trang */}
+                          <div className="flex min-w-0 flex-1 basis-52 items-center gap-2">
+                            <DynamicIcon
+                              name={r.icon as any}
+                              className="h-4 w-4 shrink-0 text-muted-foreground"
                             />
-                          </label>
-                        </div>
-
-                        {/* Chip quyền — icon theo loại action, bấm để bật/tắt */}
-                        <div className="mt-1.5 flex flex-wrap gap-1.5 sm:pl-6">
-                          {actions.map((action) => {
-                            if (!resource.actions.includes(action.code))
-                              return null
-                            const isChecked = hasPermission(
-                              resource.resource,
-                              action.code
-                            )
-                            const label =
-                              action.name ||
-                              mergedActionLabels[action.code]?.label ||
-                              action.code
-                            const visual = getActionVisual(action.code)
-                            const ActionIcon = visual.icon
-
-                            return (
-                              <button
-                                key={action.code}
-                                type="button"
-                                onClick={() =>
-                                  togglePermission(
-                                    resource.resource,
-                                    action.code
-                                  )
-                                }
-                                className={cn(
-                                  "inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs font-medium transition-colors",
-                                  isChecked
-                                    ? "border-primary/40 bg-primary/10 text-primary"
-                                    : "border-border bg-card text-muted-foreground hover:border-primary/30 hover:text-foreground"
-                                )}
-                              >
-                                {/* Ô tick tường minh — nhìn là biết đã cấp hay chưa */}
-                                <span
+                            <div className="min-w-0">
+                              <div className="truncate text-sm font-medium text-foreground">
+                                {r.name}
+                              </div>
+                              <div className="truncate font-mono text-[10px] text-muted-foreground">
+                                {page || r.resource}
+                              </div>
+                            </div>
+                          </div>
+
+                          {/* Segmented 5 nấc */}
+                          <div className="flex shrink-0 overflow-hidden rounded-lg border border-border">
+                            {LEVELS.map((l, i) => {
+                              const disabled =
+                                (l.key === "lookup" && !r.hasLookup) ||
+                                (l.key === "write" &&
+                                  r.writeCodes.length === 0) ||
+                                (l.key === "full" &&
+                                  r.writeCodes.length === 0 &&
+                                  !r.hasDelete)
+                              const active = level === l.key
+                              return (
+                                <button
+                                  key={l.key}
+                                  type="button"
+                                  disabled={disabled}
+                                  onClick={() => setLevel(r, l.key)}
+                                  title={l.hint}
                                   className={cn(
-                                    "flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-[4px] border transition-colors",
-                                    isChecked
-                                      ? "border-primary bg-primary text-primary-foreground"
-                                      : "border-border bg-card text-transparent"
+                                    "px-2 py-1 text-[11px] font-medium transition-colors",
+                                    i > 0 && "border-l border-border",
+                                    disabled
+                                      ? "cursor-not-allowed bg-muted/40 text-muted-foreground/40"
+                                      : active
+                                        ? l.key === "hidden"
+                                          ? "bg-muted text-foreground"
+                                          : "bg-primary text-primary-foreground"
+                                        : "bg-card text-muted-foreground hover:bg-muted hover:text-foreground"
                                   )}
                                 >
-                                  <Check
-                                    className="h-2.5 w-2.5"
-                                    strokeWidth={3}
-                                  />
-                                </span>
-                                <ActionIcon
-                                  className={cn(
-                                    "h-3.5 w-3.5 shrink-0",
-                                    visual.cls,
-                                    !isChecked && "opacity-55"
-                                  )}
-                                />
-                                {label}
-                              </button>
-                            )
-                          })}
+                                  {l.label}
+                                </button>
+                              )
+                            })}
+                          </div>
+
+                          {/* Thao tác nghiệp vụ — nút thu gọn */}
+                          {r.businessActions.length > 0 && (
+                            <button
+                              type="button"
+                              onClick={() => toggleRowExpand(r.resource)}
+                              className={cn(
+                                "flex shrink-0 items-center gap-1 rounded-md border px-2 py-1 text-[11px] font-medium transition-colors",
+                                bizOn > 0
+                                  ? "border-primary/40 bg-primary/5 text-primary"
+                                  : "border-border bg-card text-muted-foreground hover:text-foreground"
+                              )}
+                            >
+                              {expanded ? (
+                                <ChevronDown className="h-3 w-3" />
+                              ) : (
+                                <ChevronRight className="h-3 w-3" />
+                              )}
+                              Thao tác nghiệp vụ
+                              <span className="tabular-nums">
+                                {bizOn}/{r.businessActions.length}
+                              </span>
+                            </button>
+                          )}
                         </div>
+
+                        {/* Panel thao tác nghiệp vụ — nhóm theo LUỒNG */}
+                        {expanded && r.businessActions.length > 0 && (
+                          <div className="mt-2 space-y-1.5 rounded-lg border border-border/70 bg-muted/20 px-3 py-2 sm:ml-6">
+                            {level === "hidden" || level === "lookup" ? (
+                              <p className="text-[11px] text-muted-foreground">
+                                Cần mức <b>Xem</b> trở lên — tick một thao tác
+                                sẽ tự nâng lên Xem.
+                              </p>
+                            ) : null}
+                            {Array.from(flows.entries()).map(
+                              ([flow, codes]) => (
+                                <div
+                                  key={flow}
+                                  className="flex flex-wrap items-center gap-1.5"
+                                >
+                                  <span className="w-24 shrink-0 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+                                    {flow}
+                                  </span>
+                                  {codes.map((code) => {
+                                    const isChecked = has(r.resource, code)
+                                    const meta = actionMeta?.[code]
+                                    const visual = getActionVisual(code)
+                                    const ActionIcon = visual.icon
+                                    return (
+                                      <button
+                                        key={code}
+                                        type="button"
+                                        onClick={() =>
+                                          toggleBusinessAction(r, code)
+                                        }
+                                        title={
+                                          meta?.description ||
+                                          actionName(code)
+                                        }
+                                        className={cn(
+                                          "inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-[11px] font-medium transition-colors",
+                                          isChecked
+                                            ? "border-primary/40 bg-primary/10 text-primary"
+                                            : "border-border bg-card text-muted-foreground hover:border-primary/30 hover:text-foreground"
+                                        )}
+                                      >
+                                        <span
+                                          className={cn(
+                                            "flex h-3 w-3 shrink-0 items-center justify-center rounded-[3px] border transition-colors",
+                                            isChecked
+                                              ? "border-primary bg-primary text-primary-foreground"
+                                              : "border-border bg-card text-transparent"
+                                          )}
+                                        >
+                                          <Check
+                                            className="h-2 w-2"
+                                            strokeWidth={3}
+                                          />
+                                        </span>
+                                        <ActionIcon
+                                          className={cn(
+                                            "h-3 w-3 shrink-0",
+                                            visual.cls,
+                                            !isChecked && "opacity-55"
+                                          )}
+                                        />
+                                        {actionName(code)}
+                                      </button>
+                                    )
+                                  })}
+                                </div>
+                              )
+                            )}
+                          </div>
+                        )}
                       </li>
-                    ))}
-                  </ul>
-                )}
+                    )
+                  })}
+                </ul>
               </section>
             )
           })