@goplusvn/core 0.1.38 → 0.1.40

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

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

@@ -1,16 +1,23 @@
 "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.
+// 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 (redesign 2026-07 — "Phase 3" chuẩn ERP):
-//   - TAB theo phân hệ (group) thay dropdown — cuộn ngang, đếm x/y realtime.
-//   - Mỗi phân hệ là BẢNG cột chuẩn: Xem/Tạo/Sửa/Xóa/Xuất/Nhập/Tra cứu
-//     (checkbox; "·" khi resource không khai action đó) + cột "Đặc thù" chứa
-//     chip action nghiệp vụ (duyệt, sửa giá, đồng bộ MISA…) + switch "Tất cả".
-//   - Bấm TIÊU ĐỀ CỘT để tick/bỏ cả cột trong phân hệ.
-//   - `roleTemplates` (tùy chọn, additive): bộ quyền mẫu khi TẠO role mới.
+// Ma trận quyền v4 — 2 TẦNG kiểu Odoo (chốt với chủ app 2026-07):
+//   TẦNG 1 (mặt tiền): mỗi PHÂN HỆ một dropdown mức
+//     [Không truy cập | Tra cứu | Xem | Nhân viên | Quản lý]
+//     — chọn mức áp trọn bộ quyền chuẩn của phân hệ; lệch chuẩn → "Tùy chỉnh".
+//   TẦNG 2 (bấm "Tùy chỉnh ▸" mới bung): chi tiết từng tài nguyên như v3:
+//   - 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"
@@ -18,7 +25,6 @@ import { useRouter } from "next/navigation"
 import {
   Badge,
   Button,
-  Checkbox,
   DynamicIcon,
   Input,
   Select,
@@ -26,7 +32,6 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-  Switch,
   getStatusMeta,
 } from "../../ui"
 import { toast } from "sonner"
@@ -36,6 +41,8 @@ import {
   Ban,
   Bot,
   Check,
+  ChevronDown,
+  ChevronRight,
   Copy,
   Download,
   Eye,
@@ -80,20 +87,48 @@ const DEFAULT_ACTION_LABELS: Record<string, ActionLabelConfig> = {
   delete_items: { label: "Xóa chi tiết", icon: "❌", color: "text-rose-600" },
 }
 
-// Cột chuẩn của bảng quyền — thứ tự cố định, nhãn ngắn. Action ngoài danh
-// sách này rơi vào cột "Đặc thù".
-const STANDARD_COLUMNS: Array<{ code: string; label: string }> = [
-  { code: "view", label: "Xem" },
-  { code: "create", label: "Tạo" },
-  { code: "update", label: "Sửa" },
-  { code: "delete", label: "Xóa" },
-  { code: "export", label: "Xuất" },
-  { code: "import", label: "Nhập" },
-  { code: "lookup", label: "Tra cứu" },
+// 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" },
+]
+
+// Mức TẦNG 1 (phân hệ) — thang Odoo-style.
+type GroupLevel = "none" | "lookup" | "view" | "staff" | "manager"
+const GROUP_LEVELS: Array<{ key: GroupLevel; label: string; hint: string }> = [
+  { key: "none", label: "Không truy cập", hint: "Ẩn toàn bộ phân hệ" },
+  { key: "lookup", label: "Tra cứu", hint: "Chỉ chọn trong combo — không thấy menu" },
+  { key: "view", label: "Xem", hint: "Thấy menu + đọc dữ liệu" },
+  {
+    key: "staff",
+    label: "Nhân viên",
+    hint: "Xem + tạo/sửa/xuất/nhập + thao tác nghiệp vụ hằng ngày",
+  },
+  {
+    key: "manager",
+    label: "Quản lý",
+    hint: "Toàn quyền: thêm xóa, duyệt, hủy, sửa giá, xem giá vốn…",
+  },
 ]
-const STANDARD_CODES = new Set(STANDARD_COLUMNS.map((c) => c.code))
 
-// --- Icon + màu theo LOẠI action (suy từ mã) — mọi action đặc thù đều có
+// --- 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
@@ -115,7 +150,11 @@ const ACTION_VISUAL_RULES: Array<{
   { re: /^export/, icon: Upload, cls: "text-indigo-500" },
   { re: /^print/, icon: Printer, cls: "text-cyan-600" },
   { re: /^(sync|unlink)/, icon: RefreshCw, cls: "text-cyan-600" },
-  { re: /^(manage|config|close|reopen)/, icon: Settings2, cls: "text-orange-500" },
+  {
+    re: /^(manage|config|close|reopen)/,
+    icon: Settings2,
+    cls: "text-orange-500",
+  },
   { re: /^auto/, icon: Bot, cls: "text-purple-500" },
 ]
 
@@ -125,8 +164,7 @@ 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, vd từ
- * Permission Registry của app). permissions dạng `${action}:${resource}`. */
+/** Bộ quyền mẫu áp khi TẠO vai trò mới (consumer định nghĩa). */
 export interface RoleTemplate {
   code: string
   label: string
@@ -134,6 +172,16 @@ export interface RoleTemplate {
   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[]
+  /** Mức tầng-phân-hệ chứa action này: staff (Nhân viên) | manager (Quản lý). */
+  level?: "staff" | "manager"
+}
+
 export interface RoleFormPageProps {
   dictionary: any
   permissions?: CrudPermissions
@@ -167,6 +215,10 @@ export interface RoleFormPageProps {
   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({
@@ -179,6 +231,8 @@ export function RoleFormPage({
   initialData,
   actionLabels,
   roleTemplates,
+  actionMeta,
+  resourcePages,
 }: RoleFormPageProps) {
   const router = useRouter()
 
@@ -198,7 +252,30 @@ export function RoleFormPage({
     permissions: initialData?.permissions || ([] as string[]),
   })
 
-  const [activeGroup, setActiveGroup] = React.useState<string>("all")
+  const [expandedRows, setExpandedRows] = React.useState<Set<string>>(
+    () => new Set()
+  )
+  const [expandedGroups, setExpandedGroups] = React.useState<Set<string>>(
+    () => new Set()
+  )
+
+  const toggleGroupExpand = (g: string) => {
+    setExpandedGroups((prev) => {
+      const next = new Set(prev)
+      if (next.has(g)) next.delete(g)
+      else next.add(g)
+      return next
+    })
+  }
+
+  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(
     (key: string | null) => {
@@ -221,10 +298,14 @@ export function RoleFormPage({
 
   const actionName = React.useCallback(
     (code: string) => {
-      const fromDb = actions.find((a) => a.code === code)?.name
-      return fromDb || mergedActionLabels[code]?.label || code
+      return (
+        actionMeta?.[code]?.label ||
+        actions.find((a) => a.code === code)?.name ||
+        mergedActionLabels[code]?.label ||
+        code
+      )
     },
-    [actions, mergedActionLabels]
+    [actions, actionMeta, mergedActionLabels]
   )
 
   const permissionMatrix = React.useMemo(() => {
@@ -273,11 +354,18 @@ export function RoleFormPage({
         group: getLocalizedName(resource.group) || "Khác",
         description: resource.description,
         actions: allowedActions,
-        extraActions: allowedActions.filter((a) => !STANDARD_CODES.has(a)),
+        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]
@@ -296,7 +384,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]) {
@@ -307,147 +395,172 @@ export function RoleFormPage({
     return groups
   }, [filteredMatrix])
 
-  // Tab dựng theo TOÀN BỘ matrix (không theo search) để thanh tab ổn định.
-  const allGroups = React.useMemo(() => {
-    const seen: string[] = []
-    permissionMatrix.forEach((r) => {
-      if (!seen.includes(r.group)) seen.push(r.group)
-    })
-    return seen
-  }, [permissionMatrix])
-
-  React.useEffect(() => {
-    if (activeGroup !== "all" && !allGroups.includes(activeGroup)) {
-      setActiveGroup("all")
-    }
-  }, [allGroups, activeGroup])
 
-  // Đang search → hiện mọi nhóm khớp, bỏ qua tab đang chọn.
+  // Đang search → mọi nhóm khớp tự bung phần chi tiết.
   const searching = searchTerm.trim().length > 0
 
-  const hasPermission = (resource: string, action: string): boolean => {
-    return formData.permissions.includes(`${action}:${resource}`)
-  }
-
-  const togglePermission = (resource: string, action: string) => {
-    const permission = `${action}:${resource}`
-    let newPermissions = [...formData.permissions]
-
-    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) =>
-        r.actions.map((a) => `${a}:${r.resource}`)
-      )
-    },
-    [groupedMatrix]
+  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 = React.useCallback(
-    (groupName: string) => {
-      const codes = groupPermissionCodes(groupName)
-      return {
-        selected: codes.filter((p) => formData.permissions.includes(p)).length,
-        total: codes.length,
+  // ── TẦNG 1: mức theo PHÂN HỆ ──────────────────────────────────────────
+  const canonicalForResource = React.useCallback(
+    (r: MatrixRow, level: GroupLevel): string[] => {
+      switch (level) {
+        case "none":
+          return []
+        case "lookup":
+          return r.hasLookup ? [`lookup:${r.resource}`] : []
+        case "view":
+          return r.actions.includes("view") ? [`view:${r.resource}`] : []
+        case "staff": {
+          const staffBiz = r.businessActions.filter(
+            (a) => actionMeta?.[a]?.level !== "manager"
+          )
+          return [
+            ...(r.actions.includes("view") ? ["view"] : []),
+            ...r.writeCodes,
+            ...staffBiz,
+          ].map((a) => `${a}:${r.resource}`)
+        }
+        case "manager":
+          return r.actions.map((a) => `${a}:${r.resource}`)
       }
     },
-    [groupPermissionCodes, formData.permissions]
+    [actionMeta]
   )
 
-  // Đếm theo nhóm cho TAB (không phụ thuộc search — dùng permissionMatrix).
-  const groupTabCount = React.useCallback(
-    (groupName: string) => {
-      const rs = permissionMatrix.filter((r) => r.group === groupName)
-      const codes = rs.flatMap((r) => r.actions.map((a) => `${a}:${r.resource}`))
-      return {
-        selected: codes.filter((p) => formData.permissions.includes(p)).length,
-        total: codes.length,
+  const canonicalForGroup = React.useCallback(
+    (rows: MatrixRow[], level: GroupLevel) =>
+      rows.flatMap((r) => canonicalForResource(r, level)),
+    [canonicalForResource]
+  )
+
+  /** Mức hiện tại của phân hệ — "custom" nếu không khớp mức chuẩn nào. */
+  const deriveGroupLevel = React.useCallback(
+    (rows: MatrixRow[]): GroupLevel | "custom" => {
+      const current = new Set(
+        rows
+          .flatMap((r) => r.actions.map((a) => `${a}:${r.resource}`))
+          .filter((c) => formData.permissions.includes(c))
+      )
+      for (const l of GROUP_LEVELS) {
+        const canonical = canonicalForGroup(rows, l.key)
+        if (
+          canonical.length === current.size &&
+          canonical.every((c) => current.has(c))
+        ) {
+          return l.key
+        }
       }
+      return "custom"
     },
-    [permissionMatrix, formData.permissions]
+    [formData.permissions, canonicalForGroup]
   )
 
-  // Tick/bỏ nguyên MỘT CỘT action trong một nhóm (chỉ resource có khai action).
-  const columnState = (groupName: string, actionCode: string) => {
-    const rows = (groupedMatrix[groupName] || []).filter((r) =>
-      r.actions.includes(actionCode)
-    )
-    if (rows.length === 0) return { applicable: 0, selected: 0 }
-    const selected = rows.filter((r) =>
-      formData.permissions.includes(`${actionCode}:${r.resource}`)
-    ).length
-    return { applicable: rows.length, selected }
+  const setGroupLevel = (rows: MatrixRow[], level: GroupLevel) => {
+    const all = rows.flatMap((r) => r.actions.map((a) => `${a}:${r.resource}`))
+    const canonical = canonicalForGroup(rows, level)
+    mutatePermissions((set) => {
+      all.forEach((c) => set.delete(c))
+      canonical.forEach((c) => set.add(c))
+    })
   }
 
-  const toggleColumnForGroup = (groupName: string, actionCode: string) => {
-    const rows = (groupedMatrix[groupName] || []).filter((r) =>
-      r.actions.includes(actionCode)
+  // ── 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}`)
     )
-    if (rows.length === 0) return
-    const codes = rows.map((r) => `${actionCode}:${r.resource}`)
-    const allOn = codes.every((c) => formData.permissions.includes(c))
-    let newPermissions = [...formData.permissions]
-    if (allOn) {
-      newPermissions = newPermissions.filter((p) => !codes.includes(p))
-    } else {
-      const toAdd = codes.filter((c) => !newPermissions.includes(c))
-      newPermissions = [...newPermissions, ...toAdd]
+    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(", ")}`
+      )
     }
-    setFormData({ ...formData, permissions: newPermissions })
   }
 
-  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}`)),
+    []
+  )
 
-    setFormData((prev) => ({ ...prev, permissions: newPermissions }))
-  }
+  const countSelected = React.useCallback(
+    (codes: string[]) =>
+      codes.filter((p) => formData.permissions.includes(p)).length,
+    [formData.permissions]
+  )
 
-  const isResourceFullPermission = (
-    resourceCode: string,
-    resourceActions: string[]
-  ) => {
-    if (resourceActions.length === 0) return false
-    return resourceActions.every((actionCode) =>
-      formData.permissions.includes(`${actionCode}:${resourceCode}`)
-    )
-  }
 
   const applyTemplate = (templateCode: string) => {
     const tpl = roleTemplates?.find((t) => t.code === templateCode)
@@ -494,16 +607,12 @@ export function RoleFormPage({
   }
 
   const visibleGroups = Object.entries(groupedMatrix).filter(
-    ([group, groupResources]) =>
-      groupResources.length > 0 &&
-      (searching || activeGroup === "all" || activeGroup === group)
+    ([, groupResources]) => groupResources.length > 0
   )
 
   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"
@@ -548,8 +657,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,
@@ -613,7 +720,7 @@ 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: search · bộ quyền mẫu (create) · đếm ===== */}
+        {/* ===== 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">
@@ -658,60 +765,18 @@ export function RoleFormPage({
             </p>
           </div>
 
-          {/* Thanh TAB phân hệ — cuộn ngang, đếm realtime */}
-          <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}
-                  <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>
-              )
-            })}
+          {/* Chú giải mức phân hệ — 1 dòng mảnh */}
+          <div className="hidden flex-wrap items-center gap-x-3 gap-y-0.5 border-t border-border/60 px-4 py-1 text-[11px] text-muted-foreground md:flex">
+            {GROUP_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. Bảng quyền theo phân hệ ===== */}
+        {/* ===== 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" />
@@ -721,14 +786,17 @@ export function RoleFormPage({
           </div>
         ) : (
           visibleGroups.map(([group, groupResources]) => {
-            const { selected, total } = groupSelectedCount(group)
+            const codes = groupPermissionCodes(groupResources)
+            const selected = countSelected(codes)
+            const total = codes.length
             const isFull = total > 0 && selected === total
+            const groupLevel = deriveGroupLevel(groupResources)
+            const groupExpanded = searching || expandedGroups.has(group)
 
             return (
               <section key={group}>
-                {/* Tiêu đề nhóm */}
-                <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">
+                <div className="flex flex-wrap items-center gap-2 border-b border-border bg-muted/40 px-4 py-2">
+                  <h3 className="truncate text-sm font-semibold text-foreground">
                     {group}
                   </h3>
                   <span
@@ -742,217 +810,226 @@ 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">
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => toggleAllForGroup(group, false)}
-                      disabled={selected === 0}
-                      className="h-6 px-2 text-xs text-muted-foreground hover:text-destructive"
+                  <div className="ml-auto flex shrink-0 items-center gap-1.5">
+                    {groupLevel === "custom" && (
+                      <Badge
+                        variant="outline"
+                        className="h-6 border-amber-300 bg-amber-50 px-1.5 text-[10px] font-medium text-amber-700 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-400"
+                      >
+                        Tùy chỉnh
+                      </Badge>
+                    )}
+                    <Select
+                      value={groupLevel === "custom" ? undefined : groupLevel}
+                      onValueChange={(v) =>
+                        setGroupLevel(groupResources, v as GroupLevel)
+                      }
                     >
-                      Bỏ chọn
-                    </Button>
-                    <Button
+                      <SelectTrigger className="h-7 w-40 rounded-md border border-border bg-card text-xs">
+                        <SelectValue placeholder="Tùy chỉnh..." />
+                      </SelectTrigger>
+                      <SelectContent className="rounded-lg">
+                        {GROUP_LEVELS.map((l) => (
+                          <SelectItem key={l.key} value={l.key}>
+                            <span className="flex flex-col">
+                              <span>{l.label}</span>
+                              <span className="text-[10px] text-muted-foreground">
+                                {l.hint}
+                              </span>
+                            </span>
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <button
                       type="button"
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => toggleAllForGroup(group, true)}
-                      disabled={isFull}
-                      className="h-6 px-2 text-xs font-semibold text-primary hover:text-primary"
+                      onClick={() => toggleGroupExpand(group)}
+                      className="flex h-7 items-center gap-1 rounded-md border border-border bg-card px-2 text-[11px] font-medium text-muted-foreground transition-colors hover:text-foreground"
                     >
-                      Chọn tất cả
-                    </Button>
+                      {groupExpanded ? (
+                        <ChevronDown className="h-3 w-3" />
+                      ) : (
+                        <ChevronRight className="h-3 w-3" />
+                      )}
+                      Tùy chỉnh
+                    </button>
                   </div>
                 </div>
 
-                {/* Bảng cột chuẩn */}
-                <div className="overflow-x-auto border-b border-border">
-                  <table className="w-full min-w-[760px] border-collapse text-sm">
-                    <thead>
-                      <tr className="border-b border-border/70">
-                        <th className="w-56 px-4 py-1.5 text-left text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
-                          Tài nguyên
-                        </th>
-                        {STANDARD_COLUMNS.map((col) => {
-                          const { applicable, selected: colSel } = columnState(
-                            group,
-                            col.code
-                          )
-                          const colFull =
-                            applicable > 0 && colSel === applicable
-                          return (
-                            <th key={col.code} className="w-14 px-1 py-1.5">
-                              <button
-                                type="button"
-                                onClick={() =>
-                                  toggleColumnForGroup(group, col.code)
-                                }
-                                disabled={applicable === 0}
-                                title={
-                                  applicable === 0
-                                    ? "Không tài nguyên nào có quyền này"
-                                    : `Bấm để ${colFull ? "bỏ" : "chọn"} cả cột (${colSel}/${applicable})`
-                                }
-                                className={cn(
-                                  "mx-auto flex flex-col items-center gap-0.5 rounded px-1 py-0.5 text-[11px] font-medium transition-colors",
-                                  applicable === 0
-                                    ? "cursor-default text-muted-foreground/40"
-                                    : colFull
-                                      ? "text-primary hover:bg-primary/10"
-                                      : "text-muted-foreground hover:bg-muted hover:text-foreground"
-                                )}
-                              >
-                                {col.label}
-                                {applicable > 0 && (
-                                  <span className="text-[9px] tabular-nums opacity-70">
-                                    {colSel}/{applicable}
-                                  </span>
-                                )}
-                              </button>
-                            </th>
-                          )
-                        })}
-                        <th className="px-2 py-1.5 text-left text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
-                          Đặc thù
-                        </th>
-                        <th className="w-16 px-2 py-1.5 text-right text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
-                          Tất cả
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody className="divide-y divide-border/60">
-                      {groupResources.map((resource) => (
-                        <tr
-                          key={resource.resource}
-                          className="transition-colors hover:bg-muted/30"
-                        >
-                          <td className="px-4 py-2">
-                            <div className="flex items-center gap-2">
-                              <DynamicIcon
-                                name={resource.icon as any}
-                                className="h-4 w-4 shrink-0 text-muted-foreground"
-                              />
-                              <div className="min-w-0">
-                                <div className="truncate font-medium text-foreground">
-                                  {resource.name}
-                                </div>
-                                <code className="block truncate font-mono text-[10px] text-muted-foreground">
-                                  {resource.resource}
-                                </code>
+                {groupExpanded && (
+                <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"
+                            />
+                            <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>
-                          </td>
-                          {STANDARD_COLUMNS.map((col) => {
-                            const declared = resource.actions.includes(col.code)
-                            if (!declared) {
+                          </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 (
-                                <td
-                                  key={col.code}
-                                  className="px-1 py-2 text-center text-muted-foreground/30"
+                                <button
+                                  key={l.key}
+                                  type="button"
+                                  disabled={disabled}
+                                  onClick={() => setLevel(r, l.key)}
+                                  title={l.hint}
+                                  className={cn(
+                                    "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"
+                                  )}
                                 >
-                                  ·
-                                </td>
+                                  {l.label}
+                                </button>
                               )
-                            }
-                            return (
-                              <td key={col.code} className="px-1 py-2 text-center">
-                                <Checkbox
-                                  checked={hasPermission(
-                                    resource.resource,
-                                    col.code
-                                  )}
-                                  onCheckedChange={() =>
-                                    togglePermission(
-                                      resource.resource,
-                                      col.code
-                                    )
-                                  }
-                                  aria-label={`${actionName(col.code)} ${resource.name}`}
-                                  className="mx-auto"
-                                />
-                              </td>
-                            )
-                          })}
-                          <td className="px-2 py-2">
-                            {resource.extraActions.length === 0 ? (
-                              <span className="text-muted-foreground/30">·</span>
-                            ) : (
-                              <div className="flex max-w-72 flex-wrap gap-1">
-                                {resource.extraActions.map((code) => {
-                                  const isChecked = hasPermission(
-                                    resource.resource,
-                                    code
-                                  )
-                                  const visual = getActionVisual(code)
-                                  const ActionIcon = visual.icon
-                                  return (
-                                    <button
-                                      key={code}
-                                      type="button"
-                                      onClick={() =>
-                                        togglePermission(
-                                          resource.resource,
-                                          code
-                                        )
-                                      }
-                                      title={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
+                            })}
+                          </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(
-                                          "flex h-3 w-3 shrink-0 items-center justify-center rounded-[3px] border transition-colors",
+                                          "inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-[11px] font-medium transition-colors",
                                           isChecked
-                                            ? "border-primary bg-primary text-primary-foreground"
-                                            : "border-border bg-card text-transparent"
+                                            ? "border-primary/40 bg-primary/10 text-primary"
+                                            : "border-border bg-card text-muted-foreground hover:border-primary/30 hover:text-foreground"
                                         )}
                                       >
-                                        <Check
-                                          className="h-2 w-2"
-                                          strokeWidth={3}
+                                        <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"
+                                          )}
                                         />
-                                      </span>
-                                      <ActionIcon
-                                        className={cn(
-                                          "h-3 w-3 shrink-0",
-                                          visual.cls,
-                                          !isChecked && "opacity-55"
-                                        )}
-                                      />
-                                      {actionName(code)}
-                                    </button>
-                                  )
-                                })}
-                              </div>
+                                        {actionName(code)}
+                                      </button>
+                                    )
+                                  })}
+                                </div>
+                              )
                             )}
-                          </td>
-                          <td className="px-2 py-2 text-right">
-                            <Switch
-                              checked={isResourceFullPermission(
-                                resource.resource,
-                                resource.actions
-                              )}
-                              onCheckedChange={(checked) =>
-                                toggleAllForResource(
-                                  resource.resource,
-                                  resource.actions,
-                                  checked
-                                )
-                              }
-                              className="origin-right scale-75"
-                              aria-label={`Toàn quyền ${resource.name}`}
-                            />
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
+                          </div>
+                        )}
+                      </li>
+                    )
+                  })}
+                </ul>
+                )}
               </section>
             )
           })