@goplusvn/core 0.1.40 → 0.1.42

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

@@ -1,23 +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.
+// Trang tạo/sửa VAI TRÒ — v6 "CÂY MENU" (chốt với chủ app 2026-07-24):
+//
+//   Phân quyền theo ĐÚNG cái nhân viên nhìn thấy — cây menu thật của app
+//   (prop menuTree, dựng từ navigations):
+//     ▼ Nhóm menu (Bán hàng, Kho hàng…)            [checkbox cả nhóm]
+//        ☑ Trang (POS Bán hàng · /sales/pos)        ← tick = THẤY MENU + vào trang
+//            trong trang: ☑ Tạo ☑ Sửa ☐ Xóa ☐ nút Xác nhận TT ☐ Xem giá vốn…
+//                                                   ← nút thật trên trang đó
+//   - "Phạm vi dữ liệu" (chi nhánh) = 1 dropdown đầu trang → map quyền
+//     view-all-branches trên mọi tài nguyên có khai.
+//   - Combo/select: dòng thông báo "tự động, không cần cấp" (lookupPolicy
+//     hệ thống lo) — admin không phải nghĩ về combo.
+//   - Quyền không gắn menu (dialog/route ẩn) gom vào mục cuối.
+//   - Tick thao tác có `requires` → tự bật quyền tiên quyết (toast);
+//     bỏ tick 1 quyền → tự tắt các thao tác phụ thuộc nó.
 //
-// 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"
@@ -25,6 +23,7 @@ import { useRouter } from "next/navigation"
 import {
   Badge,
   Button,
+  Checkbox,
   DynamicIcon,
   Input,
   Select,
@@ -37,32 +36,19 @@ import {
 import { toast } from "sonner"
 import {
   ArrowLeft,
-  BadgeCheck,
-  Ban,
-  Bot,
-  Check,
+  Building2,
+  History,
+  Search,
   ChevronDown,
   ChevronRight,
   Copy,
-  Download,
-  Eye,
+  Info,
   LayoutTemplate,
-  PenLine,
-  Pencil,
-  Plus,
-  Printer,
-  RefreshCw,
   Save,
-  Search,
-  Settings2,
-  Trash2,
-  Upload,
   X,
-  Zap,
 } from "lucide-react"
 
 import type { CrudPermissions } from "../../types"
-import type { LucideIcon } from "lucide-react"
 
 import { errorMessage, throwFetchError } from "../lib/fetch-error"
 import { cn } from "../../utils"
@@ -73,96 +59,22 @@ export interface ActionLabelConfig {
   color: string
 }
 
-// Nhãn mặc định cho action CRUD chuẩn (giữ tương thích prop actionLabels).
+// Nhãn action CRUD chuẩn — hiển thị như NÚT trên trang.
 const DEFAULT_ACTION_LABELS: Record<string, ActionLabelConfig> = {
-  view: { label: "Xem", icon: "👁️", color: "text-blue-600" },
-  create: { label: "Tạo", icon: "➕", color: "text-green-600" },
-  update: { label: "Sửa", icon: "✏️", color: "text-yellow-600" },
-  delete: { label: "Xóa", icon: "🗑️", color: "text-destructive" },
-  import: { label: "Import", icon: "📥", color: "text-purple-600" },
-  export: { label: "Export", icon: "📤", color: "text-indigo-600" },
-  approve: { label: "Duyệt", icon: "✅", color: "text-emerald-600" },
-  manage: { label: "Quản lý", icon: "🔧", color: "text-orange-600" },
-  edit_items: { label: "Sửa chi tiết", icon: "📝", color: "text-amber-600" },
-  delete_items: { label: "Xóa chi tiết", icon: "❌", color: "text-rose-600" },
+  view: { label: "Xem", icon: "👁️", color: "" },
+  create: { label: "Tạo mới", icon: "➕", color: "" },
+  update: { label: "Sửa", icon: "✏️", color: "" },
+  delete: { label: "Xóa", icon: "🗑️", color: "" },
+  import: { label: "Nhập Excel", icon: "📥", color: "" },
+  export: { label: "Xuất Excel", icon: "📤", color: "" },
+  approve: { label: "Duyệt", icon: "✅", color: "" },
+  manage: { label: "Quản lý", icon: "🔧", color: "" },
+  edit_items: { label: "Sửa chi tiết", icon: "📝", color: "" },
+  delete_items: { label: "Xóa chi tiết", icon: "❌", color: "" },
 }
 
-// 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…",
-  },
-]
-
-// --- 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
-  cls: string
-}> = [
-  { re: /^(view|read|get|list)/, icon: Eye, cls: "text-blue-500" },
-  { re: /^(create|add|new)/, icon: Plus, cls: "text-emerald-500" },
-  { re: /^(update|edit|change|set)/, icon: Pencil, cls: "text-amber-500" },
-  { re: /^(delete|remove)/, icon: Trash2, cls: "text-rose-500" },
-  { re: /^(cancel|void|reject)/, icon: Ban, cls: "text-rose-500" },
-  {
-    re: /^(approve|confirm|verify|accept|complete)/,
-    icon: BadgeCheck,
-    cls: "text-violet-500",
-  },
-  { re: /^sign/, icon: PenLine, cls: "text-indigo-500" },
-  { 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|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" },
-]
-
-const getActionVisual = (code: string) =>
-  ACTION_VISUAL_RULES.find((r) => r.re.test(code)) ?? {
-    icon: Zap,
-    cls: "text-slate-400",
-  }
+// Thứ tự hiển thị action trong một trang: CRUD chuẩn trước, nghiệp vụ sau.
+const STANDARD_ORDER = ["create", "update", "delete", "export", "import"]
 
 /** Bộ quyền mẫu áp khi TẠO vai trò mới (consumer định nghĩa). */
 export interface RoleTemplate {
@@ -172,16 +84,29 @@ export interface RoleTemplate {
   permissions: string[]
 }
 
-/** Metadata action nghiệp vụ: nhóm luồng + mô tả + quyền tiên quyết. */
+/** Metadata action (consumer truyền từ Permission Registry). */
 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"
 }
 
+/** Cây menu thật của app — dựng từ navigations. */
+export interface MenuTreeSection {
+  title: string
+  icon?: string
+  items: Array<{
+    title: string
+    href?: string
+    icon?: string
+    resource: string
+    /** Vị trí thật khi không phải menu: "nút Cấu hình trong trang Mua hàng"… */
+    note?: string
+  }>
+}
+
 export interface RoleFormPageProps {
   dictionary: any
   permissions?: CrudPermissions
@@ -213,12 +138,13 @@ 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>
+  /** Cây menu thật — không truyền thì tự dựng từ group của resources. */
+  menuTree?: MenuTreeSection[]
+  /** Endpoint nhật ký đổi quyền (edit mode) — vd /api/roles/{id}/history. */
+  historyEndpoint?: string
 }
 
 export function RoleFormPage({
@@ -233,6 +159,8 @@ export function RoleFormPage({
   roleTemplates,
   actionMeta,
   resourcePages,
+  menuTree,
+  historyEndpoint,
 }: RoleFormPageProps) {
   const router = useRouter()
 
@@ -242,7 +170,18 @@ export function RoleFormPage({
   )
 
   const [isSubmitting, setIsSubmitting] = React.useState(false)
+  const [collapsed, setCollapsed] = React.useState<Set<string>>(() => new Set())
   const [searchTerm, setSearchTerm] = React.useState("")
+  const [historyOpen, setHistoryOpen] = React.useState(false)
+  const [history, setHistory] = React.useState<any[] | null>(null)
+
+  React.useEffect(() => {
+    if (!historyOpen || history || !historyEndpoint) return
+    fetch(historyEndpoint)
+      .then((r) => r.json())
+      .then((d) => setHistory(d.items ?? []))
+      .catch(() => setHistory([]))
+  }, [historyOpen, history, historyEndpoint])
 
   const [formData, setFormData] = React.useState({
     name: initialData?.name || "",
@@ -252,36 +191,10 @@ export function RoleFormPage({
     permissions: initialData?.permissions || ([] as string[]),
   })
 
-  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) => {
       if (!key) return ""
       if (!dictionary) return key
-
       const parts = key.split(".")
       let current = dictionary
       for (const part of parts) {
@@ -297,107 +210,113 @@ export function RoleFormPage({
   )
 
   const actionName = React.useCallback(
-    (code: string) => {
-      return (
-        actionMeta?.[code]?.label ||
-        actions.find((a) => a.code === code)?.name ||
-        mergedActionLabels[code]?.label ||
-        code
-      )
-    },
+    (code: string) =>
+      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[] = []
+  // ── Resource → action khai báo ────────────────────────────────────────
+  const resourceInfo = React.useMemo(() => {
+    const map = new Map<
+      string,
+      { name: string; icon: string | null; allowed: string[] }
+    >()
+    resources.forEach((resource) => {
+      let allowed: string[] = []
       const defaultActions = actions
         .filter((a) => a.isDefault)
         .map((a) => a.code)
-      const effectiveDefaultActions =
+      const fallback =
         defaultActions.length > 0
           ? defaultActions
           : ["view", "create", "update", "delete"]
-
-      if (resource.config) {
-        try {
-          const config =
-            typeof resource.config === "string"
-              ? JSON.parse(resource.config)
-              : resource.config
-
-          if (config.actions && Array.isArray(config.actions)) {
-            const allowedCodes = config.actions as string[]
-            allowedActions = actions
-              .map((a) => a.code)
-              .filter((code) => allowedCodes.includes(code))
-          } else {
-            allowedActions = actions
-              .map((a) => a.code)
-              .filter((code) => effectiveDefaultActions.includes(code))
-          }
-        } catch (_e) {
-          allowedActions = actions
+      try {
+        const config =
+          typeof resource.config === "string"
+            ? JSON.parse(resource.config)
+            : resource.config
+        if (config?.actions && Array.isArray(config.actions)) {
+          allowed = actions
             .map((a) => a.code)
-            .filter((code) => effectiveDefaultActions.includes(code))
+            .filter((c) => (config.actions as string[]).includes(c))
+        } else {
+          allowed = actions
+            .map((a) => a.code)
+            .filter((c) => fallback.includes(c))
         }
-      } else {
-        allowedActions = actions
-          .map((a) => a.code)
-          .filter((code) => effectiveDefaultActions.includes(code))
+      } catch {
+        allowed = actions.map((a) => a.code).filter((c) => fallback.includes(c))
       }
-
-      return {
-        resource: resource.code,
+      map.set(resource.code, {
         name: getLocalizedName(resource.name),
-        icon: resource.icon || "📄",
-        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"),
-      }
+        icon: resource.icon,
+        allowed,
+      })
     })
+    return map
   }, [resources, actions, getLocalizedName])
 
-  type MatrixRow = (typeof permissionMatrix)[number]
-
-  const totalAvailablePermissions = React.useMemo(
-    () => permissionMatrix.reduce((sum, r) => sum + r.actions.length, 0),
-    [permissionMatrix]
+  /** Action hiển thị dưới một trang (bỏ view = chính checkbox trang; bỏ lookup
+   *  = combo tự động). CRUD chuẩn trước, nghiệp vụ sau. */
+  const pageActions = React.useCallback(
+    (resource: string) => {
+      const info = resourceInfo.get(resource)
+      if (!info) return []
+      const rest = info.allowed.filter(
+        (a) => a !== "view" && a !== "lookup" && a !== "view-all-branches"
+      )
+      const std = STANDARD_ORDER.filter((a) => rest.includes(a))
+      const biz = rest.filter((a) => !STANDARD_ORDER.includes(a))
+      return [...std, ...biz]
+    },
+    [resourceInfo]
   )
 
-  const filteredMatrix = React.useMemo(() => {
-    if (!searchTerm.trim()) return permissionMatrix
-
-    const search = searchTerm.toLowerCase()
-    return permissionMatrix.filter(
-      (resource) =>
-        resource.name.toLowerCase().includes(search) ||
-        resource.resource.toLowerCase().includes(search) ||
-        resource.group.toLowerCase().includes(search)
-    )
-  }, [searchTerm, permissionMatrix])
-
-  const groupedMatrix = React.useMemo(() => {
-    const groups: Record<string, MatrixRow[]> = {}
-    filteredMatrix.forEach((resource) => {
-      const group = resource.group
-      if (!groups[group]) {
-        groups[group] = []
-      }
-      groups[group].push(resource)
+  // ── Cây menu (prop, hoặc tự dựng từ group) ────────────────────────────
+  const tree = React.useMemo<MenuTreeSection[]>(() => {
+    if (menuTree && menuTree.length > 0) return menuTree
+    const byGroup = new Map<string, MenuTreeSection>()
+    resources.forEach((r) => {
+      const group = getLocalizedName(r.group) || "Khác"
+      const section = byGroup.get(group) ?? { title: group, items: [] }
+      section.items.push({
+        title: getLocalizedName(r.name),
+        href: resourcePages?.[r.code],
+        icon: r.icon ?? undefined,
+        resource: r.code,
+      })
+      byGroup.set(group, section)
     })
-    return groups
-  }, [filteredMatrix])
+    return Array.from(byGroup.values())
+  }, [menuTree, resources, resourcePages, getLocalizedName])
 
-
-  // Đang search → mọi nhóm khớp tự bung phần chi tiết.
-  const searching = searchTerm.trim().length > 0
+  /** Resource có action khai nhưng KHÔNG nằm trên menu nào. */
+  const offMenuResources = React.useMemo(() => {
+    const onMenu = new Set(
+      tree.flatMap((s) => s.items.map((i) => i.resource))
+    )
+    return resources
+      .map((r) => r.code)
+      .filter((code) => {
+        if (onMenu.has(code)) return false
+        const info = resourceInfo.get(code)
+        if (!info) return false
+        // chỉ còn lookup (vd resource "reference") → thuộc phần combo tự động
+        return info.allowed.some((a) => a !== "lookup")
+      })
+  }, [tree, resources, resourceInfo])
+
+  const totalAvailable = React.useMemo(
+    () =>
+      Array.from(resourceInfo.values()).reduce(
+        (s, r) => s + r.allowed.length,
+        0
+      ),
+    [resourceInfo]
+  )
 
   const has = React.useCallback(
     (resource: string, action: string) =>
@@ -405,9 +324,7 @@ export function RoleFormPage({
     [formData.permissions]
   )
 
-  const mutatePermissions = (
-    fn: (set: Set<string>) => void
-  ) => {
+  const mutate = (fn: (set: Set<string>) => void) => {
     setFormData((prev) => {
       const set = new Set(prev.permissions)
       fn(set)
@@ -415,152 +332,109 @@ export function RoleFormPage({
     })
   }
 
-  // ── 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"
-  }
-
-  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)
+  // ── Tick trang (menu) ─────────────────────────────────────────────────
+  const togglePage = (resource: string, checked: boolean) => {
+    const info = resourceInfo.get(resource)
+    if (!info) return
+    mutate((set) => {
+      if (checked) {
+        if (info.allowed.includes("view")) set.add(`view:${resource}`)
+      } else {
+        // mất menu → mọi quyền của trang tắt theo
+        info.allowed.forEach((a) => set.delete(`${a}:${resource}`))
       }
-      if (level === "full" && r.hasDelete) add("delete")
     })
   }
 
-  // ── 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}`)
-      }
-    },
-    [actionMeta]
-  )
-
-  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))
+  // ── Tick thao tác trong trang (requires 2 chiều) ──────────────────────
+  const toggleAction = (resource: string, code: string) => {
+    const info = resourceInfo.get(resource)
+    if (!info) return
+    const key = `${code}:${resource}`
+    if (formData.permissions.includes(key)) {
+      // tắt X → tắt luôn các thao tác phụ thuộc X
+      const dependents = info.allowed.filter((a) =>
+        (actionMeta?.[a]?.requires ?? []).includes(code)
       )
-      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
-        }
+      const on = dependents.filter((a) =>
+        formData.permissions.includes(`${a}:${resource}`)
+      )
+      mutate((set) => {
+        set.delete(key)
+        on.forEach((a) => set.delete(`${a}:${resource}`))
+      })
+      if (on.length > 0) {
+        toast.info(
+          `Đã tắt kèm: ${on.map((a) => actionName(a)).join(", ")} (phụ thuộc "${actionName(code)}")`
+        )
       }
-      return "custom"
-    },
-    [formData.permissions, canonicalForGroup]
-  )
-
-  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))
-    })
-  }
-
-  // ── 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(
+    const requires = (actionMeta?.[code]?.requires ?? []).filter(
       (req) =>
-        r.actions.includes(req) &&
-        !formData.permissions.includes(`${req}:${r.resource}`)
+        info.allowed.includes(req) &&
+        !formData.permissions.includes(`${req}:${resource}`)
     )
-    mutatePermissions((set) => {
+    mutate((set) => {
       set.add(key)
-      needed.forEach((req) => set.add(`${req}:${r.resource}`))
+      requires.forEach((req) => set.add(`${req}:${resource}`))
     })
-    if (needed.length > 0) {
+    if (requires.length > 0) {
       toast.info(
-        `Đã bật kèm quyền tiên quyết: ${needed
-          .map((c) => actionName(c))
+        `Đã bật kèm quyền tiên quyết: ${requires
+          .map((a) => actionName(a))
           .join(", ")}`
       )
     }
   }
 
-  // ── Đếm ───────────────────────────────────────────────────────────────
-  const groupPermissionCodes = React.useCallback(
-    (rows: MatrixRow[]) =>
-      rows.flatMap((r) => r.actions.map((a) => `${a}:${r.resource}`)),
-    []
-  )
+  // ── Tick cả nhóm menu ─────────────────────────────────────────────────
+  const sectionState = (section: MenuTreeSection) => {
+    const uniq = [...new Set(section.items.map((i) => i.resource))]
+    const on = uniq.filter((r) => has(r, "view")).length
+    return { total: uniq.length, on }
+  }
 
-  const countSelected = React.useCallback(
-    (codes: string[]) =>
-      codes.filter((p) => formData.permissions.includes(p)).length,
-    [formData.permissions]
+  const toggleSection = (section: MenuTreeSection, checked: boolean) => {
+    const uniq = [...new Set(section.items.map((i) => i.resource))]
+    uniq.forEach((r) => togglePageBatch(r, checked))
+    function togglePageBatch(resource: string, on: boolean) {
+      const info = resourceInfo.get(resource)
+      if (!info) return
+      mutate((set) => {
+        if (on) {
+          if (info.allowed.includes("view")) set.add(`view:${resource}`)
+        } else {
+          info.allowed.forEach((a) => set.delete(`${a}:${resource}`))
+        }
+      })
+    }
+  }
+
+  // ── Phạm vi dữ liệu chi nhánh (view-all-branches) ─────────────────────
+  const branchScopeResources = React.useMemo(
+    () =>
+      Array.from(resourceInfo.entries())
+        .filter(([, info]) => info.allowed.includes("view-all-branches"))
+        .map(([code]) => code),
+    [resourceInfo]
   )
 
+  const branchScope: "assigned" | "all" = React.useMemo(() => {
+    if (branchScopeResources.length === 0) return "assigned"
+    return branchScopeResources.every((r) => has(r, "view-all-branches"))
+      ? "all"
+      : "assigned"
+  }, [branchScopeResources, has])
+
+  const setBranchScope = (scope: "assigned" | "all") => {
+    mutate((set) => {
+      branchScopeResources.forEach((r) => {
+        if (scope === "all") set.add(`view-all-branches:${r}`)
+        else set.delete(`view-all-branches:${r}`)
+      })
+    })
+  }
 
   const applyTemplate = (templateCode: string) => {
     const tpl = roleTemplates?.find((t) => t.code === templateCode)
@@ -574,29 +448,24 @@ export function RoleFormPage({
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setIsSubmitting(true)
-
     try {
       const url =
         mode === "create" ? "/api/roles" : `/api/roles/${initialData?.id}`
       const method = mode === "create" ? "POST" : "PUT"
-
       const res = await fetch(url, {
         method,
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(formData),
       })
-
       if (!res.ok) {
         await throwFetchError(res, `Failed to ${mode} role`)
       }
-
       toast.success("Thành công", {
         description:
           mode === "create"
             ? "Đã tạo vai trò mới thành công"
             : "Đã cập nhật vai trò thành công",
       })
-
       router.push(`/${lang}/roles`)
       router.refresh()
     } catch (error: any) {
@@ -606,10 +475,199 @@ export function RoleFormPage({
     }
   }
 
-  const visibleGroups = Object.entries(groupedMatrix).filter(
-    ([, groupResources]) => groupResources.length > 0
+  // Mở trang: tự thu gọn các nhóm chưa có menu nào được cấp — trang ngắn hẳn.
+  const didInitCollapse = React.useRef(false)
+  React.useEffect(() => {
+    if (didInitCollapse.current) return
+    didInitCollapse.current = true
+    const zero = tree
+      .filter((section) => {
+        const uniq = [...new Set(section.items.map((i) => i.resource))]
+        return !uniq.some((r) => has(r, "view"))
+      })
+      .map((s) => s.title)
+    if (zero.length > 0) setCollapsed(new Set(zero))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const toggleCollapse = (title: string) => {
+    setCollapsed((prev) => {
+      const next = new Set(prev)
+      if (next.has(title)) next.delete(title)
+      else next.add(title)
+      return next
+    })
+  }
+
+  // ── Search: lọc theo tên menu / đường dẫn / tên thao tác ─────────────
+  const searching = searchTerm.trim().length > 0
+  const matchItem = React.useCallback(
+    (item: { title: string; href?: string; resource: string }) => {
+      if (!searching) return true
+      const q = searchTerm.trim().toLowerCase()
+      if (item.title.toLowerCase().includes(q)) return true
+      if (item.href?.toLowerCase().includes(q)) return true
+      if (item.resource.toLowerCase().includes(q)) return true
+      return pageActions(item.resource).some((code) =>
+        actionName(code).toLowerCase().includes(q)
+      )
+    },
+    [searching, searchTerm, pageActions, actionName]
   )
 
+  const visibleTree = React.useMemo(() => {
+    if (!searching) return tree
+    const q = searchTerm.trim().toLowerCase()
+    return tree
+      .map((section) => {
+        if (section.title.toLowerCase().includes(q)) return section
+        return { ...section, items: section.items.filter(matchItem) }
+      })
+      .filter((section) => section.items.length > 0)
+  }, [tree, searching, searchTerm, matchItem])
+
+  const visibleOffMenu = React.useMemo(() => {
+    if (!searching) return offMenuResources
+    const q = searchTerm.trim().toLowerCase()
+    return offMenuResources.filter((code) => {
+      const info = resourceInfo.get(code)
+      if (info?.name.toLowerCase().includes(q)) return true
+      if (code.toLowerCase().includes(q)) return true
+      return pageActions(code).some((c) =>
+        actionName(c).toLowerCase().includes(q)
+      )
+    })
+  }, [offMenuResources, searching, searchTerm, resourceInfo, pageActions, actionName])
+
+  const permLabel = React.useCallback(
+    (perm: string) => {
+      const [action, resource] = perm.split(":")
+      const rName = resourceInfo.get(resource)?.name || resource
+      return `${actionName(action)} · ${rName}`
+    },
+    [resourceInfo, actionName]
+  )
+
+  // Render 1 dòng trang menu + hàng thao tác của nó
+  const renderPageRow = (item: {
+    title: string
+    href?: string
+    icon?: string
+    resource: string
+    note?: string
+  }) => {
+    const info = resourceInfo.get(item.resource)
+    if (!info) return null
+    const pageOn = has(item.resource, "view")
+    const acts = pageActions(item.resource)
+    const actsOn = acts.filter((a) => has(item.resource, a)).length
+
+    return (
+      <li key={`${item.resource}:${item.title}`} className="px-4 py-2">
+        <label className="flex cursor-pointer items-center gap-2.5">
+          <Checkbox
+            checked={pageOn}
+            onCheckedChange={(c) => togglePage(item.resource, c === true)}
+            aria-label={`Menu ${item.title}`}
+          />
+          <DynamicIcon
+            name={(item.icon || info.icon) as any}
+            className="h-4 w-4 shrink-0 text-muted-foreground"
+          />
+          <span
+            className={cn(
+              "text-sm font-medium",
+              pageOn ? "text-foreground" : "text-muted-foreground"
+            )}
+          >
+            {item.title}
+          </span>
+          {item.href && (
+            <code className="hidden font-mono text-[10px] text-muted-foreground sm:inline">
+              {item.href}
+            </code>
+          )}
+          {item.note && (
+            <span className="hidden text-[10px] italic text-muted-foreground/80 sm:inline">
+              {item.note}
+            </span>
+          )}
+          {!pageOn && (
+            <span
+              className="text-[10px] text-muted-foreground/60"
+              title="Vai trò này không thấy menu và không vào được trang"
+            >
+              · ẩn
+            </span>
+          )}
+          {pageOn && acts.length > 0 && (
+            <span className="ml-auto text-[10px] tabular-nums text-muted-foreground">
+              {actsOn}/{acts.length} thao tác
+            </span>
+          )}
+        </label>
+
+        {/* Thao tác (nút) trong trang — nhóm theo LUỒNG, mỗi luồng 1 dòng */}
+        {pageOn && acts.length > 0 && (
+          <div className="mt-1.5 space-y-1 pl-7 sm:pl-9">
+            {(() => {
+              // "Chung" = CRUD chuẩn; còn lại theo actionMeta.flow
+              const flows = new Map<string, string[]>()
+              acts.forEach((code) => {
+                const flow = STANDARD_ORDER.includes(code)
+                  ? "Chung"
+                  : actionMeta?.[code]?.flow || "Khác"
+                const list = flows.get(flow) ?? []
+                list.push(code)
+                flows.set(flow, list)
+              })
+              return Array.from(flows.entries()).map(([flow, codes]) => (
+                <div
+                  key={flow}
+                  className="flex flex-wrap items-center gap-x-3 gap-y-1"
+                >
+                  <span className="w-24 shrink-0 text-[10px] uppercase tracking-wide text-muted-foreground/60">
+                    {flow}
+                  </span>
+                  {codes.map((code) => {
+                    const meta = actionMeta?.[code]
+                    const checked = has(item.resource, code)
+                    return (
+                      <label
+                        key={code}
+                        title={meta?.description || actionName(code)}
+                        className="flex cursor-pointer items-center gap-1.5"
+                      >
+                        <Checkbox
+                          checked={checked}
+                          onCheckedChange={() =>
+                            toggleAction(item.resource, code)
+                          }
+                          className="h-3.5 w-3.5"
+                          aria-label={`${actionName(code)} — ${item.title}`}
+                        />
+                        <span
+                          className={cn(
+                            "text-xs",
+                            checked
+                              ? "text-foreground"
+                              : "text-muted-foreground"
+                          )}
+                        >
+                          {actionName(code)}
+                        </span>
+                      </label>
+                    )
+                  })}
+                </div>
+              ))
+            })()}
+          </div>
+        )}
+      </li>
+    )
+  }
+
   return (
     <div className="flex flex-col">
       {/* ===== 1. Header bar navy 1 DÒNG ===== */}
@@ -719,322 +777,348 @@ export function RoleFormPage({
         </Button>
       </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 · đế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>
+      <div className="mt-3 flex items-start gap-3 lg:mx-3">
+      <div className="min-w-0 flex-1 overflow-hidden rounded-xl border border-border bg-card shadow-sm">
+        {/* ===== 2. Toolbar: mẫu + phạm vi chi nhánh + đếm ===== */}
+        <div className="flex flex-wrap items-center gap-2 border-b border-border px-3 py-2 sm:px-4">
+          <div className="relative min-w-[150px] flex-1 sm:max-w-64">
+            <Search className="absolute left-2.5 top-2 h-3.5 w-3.5 text-muted-foreground" />
+            <Input
+              placeholder="Tìm menu / thao tác..."
+              className="h-8 rounded-md border border-border bg-card pl-8 text-sm"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </div>
+          {mode === "create" && (roleTemplates?.length ?? 0) > 0 && (
+            <Select onValueChange={applyTemplate}>
+              <SelectTrigger className="h-8 w-48 rounded-md border border-border bg-card text-sm">
+                <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>
+          )}
+
+          {branchScopeResources.length > 0 && (
+            <div className="flex items-center gap-1.5">
+              <Building2 className="h-3.5 w-3.5 text-muted-foreground" />
+              <span className="text-xs text-muted-foreground">
+                Phạm vi dữ liệu:
+              </span>
+              <Select
+                value={branchScope}
+                onValueChange={(v) => setBranchScope(v as "assigned" | "all")}
+              >
+                <SelectTrigger className="h-8 w-52 rounded-md border border-border bg-card text-sm">
+                  <SelectValue>
+                    {branchScope === "all"
+                      ? "Tất cả chi nhánh"
+                      : "Chỉ chi nhánh được gán"}
+                  </SelectValue>
                 </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>
-                        )}
+                  <SelectItem value="assigned">
+                    <span className="flex flex-col">
+                      <span>Chỉ chi nhánh được gán</span>
+                      <span className="text-[11px] text-muted-foreground">
+                        Theo chi nhánh gán ở trang Người dùng
                       </span>
-                    </SelectItem>
-                  ))}
+                    </span>
+                  </SelectItem>
+                  <SelectItem value="all">
+                    <span className="flex flex-col">
+                      <span>Tất cả chi nhánh</span>
+                      <span className="text-[11px] text-muted-foreground">
+                        Xem dữ liệu mọi chi nhánh (quản lý vùng/kế toán tổng)
+                      </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>
+            </div>
+          )}
+
+          <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">/{totalAvailable}</span> quyền
+          </p>
+        </div>
 
-          {/* 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>
+        {/* Combo tự động — admin khỏi lo */}
+        <div className="flex items-start gap-2 border-b border-border bg-muted/30 px-4 py-1.5 text-[11px] text-muted-foreground">
+          <Info className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+          <span>
+            Ô chọn khách / sản phẩm / kho… trong các form <b>tự hoạt động</b> —
+            không cần cấp quyền ở đây.
+          </span>
         </div>
 
-        {/* ===== 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" />
-            <p className="text-sm text-muted-foreground">
-              Không có tài nguyên nào khớp bộ lọc.
-            </p>
-          </div>
-        ) : (
-          visibleGroups.map(([group, groupResources]) => {
-            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)
+        {/* ===== 3. Cây menu ===== */}
+        {searching && visibleTree.length === 0 && visibleOffMenu.length === 0 && (
+          <p className="px-4 py-8 text-center text-xs text-muted-foreground">
+            Không có menu / thao tác nào khớp "{searchTerm}".
+          </p>
+        )}
+        {visibleTree.map((section) => {
+          const { total, on } = sectionState(section)
+          const isCollapsed = !searching && collapsed.has(section.title)
+          return (
+            <section key={section.title}>
+              <div className="flex items-center gap-2 border-b border-border bg-muted/40 px-4 py-2">
+                <button
+                  type="button"
+                  onClick={() => toggleCollapse(section.title)}
+                  className="flex items-center gap-1.5 text-muted-foreground hover:text-foreground"
+                  aria-label={
+                    isCollapsed ? "Mở nhóm menu" : "Thu gọn nhóm menu"
+                  }
+                >
+                  {isCollapsed ? (
+                    <ChevronRight className="h-4 w-4" />
+                  ) : (
+                    <ChevronDown className="h-4 w-4" />
+                  )}
+                </button>
+                <Checkbox
+                  checked={
+                    on === 0 ? false : on === total ? true : "indeterminate"
+                  }
+                  onCheckedChange={(c) => toggleSection(section, c === true)}
+                  aria-label={`Cả nhóm ${section.title}`}
+                />
+                <DynamicIcon
+                  name={section.icon as any}
+                  className="h-4 w-4 shrink-0 text-muted-foreground"
+                />
+                <h3 className="text-sm font-semibold text-foreground">
+                  {section.title}
+                </h3>
+                <span
+                  className={cn(
+                    "text-[11px] tabular-nums",
+                    on === total && total > 0
+                      ? "font-medium text-emerald-600 dark:text-emerald-400"
+                      : "text-muted-foreground"
+                  )}
+                >
+                  {on}/{total} menu
+                </span>
+              </div>
+              {!isCollapsed && (
+                <ul className="divide-y divide-border/60 border-b border-border">
+                  {section.items.map(renderPageRow)}
+                </ul>
+              )}
+            </section>
+          )
+        })}
+
+        {/* ===== 4. Quyền không gắn menu (dialog / route ẩn) ===== */}
+        {visibleOffMenu.length > 0 && (
+          <section>
+            <div className="flex items-center gap-2 border-b border-border bg-muted/40 px-4 py-2">
+              <h3 className="text-sm font-semibold text-foreground">
+                Chức năng không có menu riêng
+              </h3>
+              <span className="text-[11px] text-muted-foreground">
+                dialog / thao tác nằm trong trang khác
+              </span>
+            </div>
+            <ul className="divide-y divide-border/60">
+              {visibleOffMenu.map((code) =>
+                renderPageRow({
+                  title: resourceInfo.get(code)?.name || code,
+                  resource: code,
+                })
+              )}
+            </ul>
+          </section>
+        )}
+      </div>
 
-            return (
-              <section key={group}>
-                <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
-                    className={cn(
-                      "whitespace-nowrap text-[11px] tabular-nums",
-                      isFull
-                        ? "font-medium text-emerald-600 dark:text-emerald-400"
-                        : "text-muted-foreground"
-                    )}
+      {/* ===== 🪞 PREVIEW SIDEBAR SỐNG — nhân viên mang vai trò này sẽ thấy ===== */}
+      <aside className="sticky top-4 hidden w-60 shrink-0 overflow-hidden rounded-xl border border-border shadow-sm xl:block">
+        <div className="border-b border-white/10 bg-sidebar px-3 py-2">
+          <p className="text-xs font-semibold text-primary-foreground">
+            Nhân viên sẽ thấy
+          </p>
+          <p className="text-[10px] text-primary-foreground/60">
+            Sidebar cập nhật theo từng ô tick
+          </p>
+        </div>
+        <div className="max-h-[70vh] overflow-y-auto bg-sidebar px-2 py-2 [scrollbar-width:thin]">
+          {(() => {
+            const visibleSections = tree
+              .map((section) => ({
+                ...section,
+                items: section.items.filter(
+                  (i) => !i.note && has(i.resource, "view")
+                ),
+              }))
+              .filter((sec) => sec.items.length > 0)
+            if (visibleSections.length === 0) {
+              return (
+                <p className="px-2 py-6 text-center text-[11px] text-primary-foreground/50">
+                  Chưa có menu nào —
+                  <br />
+                  vai trò này không thấy gì trên sidebar.
+                </p>
+              )
+            }
+            return visibleSections.map((sec) => (
+              <div key={sec.title} className="mb-1.5">
+                <p className="px-2 py-1 text-[9px] font-semibold uppercase tracking-wider text-primary-foreground/40">
+                  {sec.title}
+                </p>
+                {sec.items.map((i) => (
+                  <div
+                    key={`${i.resource}:${i.title}`}
+                    className="flex items-center gap-2 rounded-md px-2 py-1 text-primary-foreground/85"
                   >
-                    {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.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)
-                      }
-                    >
-                      <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"
-                      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"
-                    >
-                      {groupExpanded ? (
-                        <ChevronDown className="h-3 w-3" />
-                      ) : (
-                        <ChevronRight className="h-3 w-3" />
-                      )}
-                      Tùy chỉnh
-                    </button>
+                    <DynamicIcon
+                      name={i.icon as any}
+                      className="h-3.5 w-3.5 shrink-0 opacity-70"
+                    />
+                    <span className="truncate text-[11px]">{i.title}</span>
                   </div>
-                </div>
-
-                {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>
-                          </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(
-                                    "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"
-                                  )}
-                                >
-                                  {l.label}
-                                </button>
-                              )
-                            })}
-                          </div>
+                ))}
+              </div>
+            ))
+          })()}
+        </div>
+        {branchScopeResources.length > 0 && (
+          <div className="border-t border-white/10 bg-sidebar px-3 py-1.5 text-[10px] text-primary-foreground/60">
+            Dữ liệu:{" "}
+            {branchScope === "all"
+              ? "tất cả chi nhánh"
+              : "chi nhánh được gán"}
+          </div>
+        )}
+      </aside>
+      </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"
-                              )}
+      {/* ===== 🕓 Nhật ký thay đổi quyền ===== */}
+      {mode === "edit" && historyEndpoint && (
+        <div className="mt-3 overflow-hidden rounded-xl border border-border bg-card shadow-sm lg:mx-3">
+          <button
+            type="button"
+            onClick={() => setHistoryOpen((o) => !o)}
+            className="flex w-full items-center gap-2 px-4 py-2 text-left hover:bg-muted/30"
+          >
+            <History className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-semibold text-foreground">
+              Nhật ký thay đổi quyền
+            </span>
+            <span className="text-[11px] text-muted-foreground">
+              ai đổi gì, lúc nào
+            </span>
+            <span className="ml-auto text-xs text-muted-foreground">
+              {historyOpen ? "Thu gọn" : "Xem"}
+            </span>
+          </button>
+          {historyOpen && (
+            <div className="border-t border-border">
+              {history === null ? (
+                <p className="px-4 py-4 text-center text-xs text-muted-foreground">
+                  Đang tải...
+                </p>
+              ) : history.length === 0 ? (
+                <p className="px-4 py-4 text-center text-xs text-muted-foreground">
+                  Chưa có thay đổi nào được ghi nhận.
+                </p>
+              ) : (
+                <ul className="divide-y divide-border/60">
+                  {history.map((e) => (
+                    <li key={e.id} className="px-4 py-2 text-xs">
+                      <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
+                        <span className="tabular-nums text-muted-foreground">
+                          {new Date(e.at).toLocaleString("vi-VN", {
+                            hour: "2-digit",
+                            minute: "2-digit",
+                            day: "2-digit",
+                            month: "2-digit",
+                            year: "numeric",
+                          })}
+                        </span>
+                        {e.by && (
+                          <span className="font-medium text-foreground">
+                            {e.by}
+                          </span>
+                        )}
+                        {e.action === "create" && (
+                          <span className="text-muted-foreground">
+                            tạo vai trò
+                          </span>
+                        )}
+                        {e.nameChange && (
+                          <span className="text-muted-foreground">
+                            đổi tên "{e.nameChange.from}" → "{e.nameChange.to}"
+                          </span>
+                        )}
+                        {e.statusChange && (
+                          <span className="text-muted-foreground">
+                            {e.statusChange.to === "active"
+                              ? "mở khóa vai trò"
+                              : "khóa vai trò"}
+                          </span>
+                        )}
+                      </div>
+                      {(e.added?.length > 0 || e.removed?.length > 0) && (
+                        <div className="mt-1 flex flex-wrap gap-1">
+                          {e.added.slice(0, 8).map((p: string) => (
+                            <span
+                              key={p}
+                              className="rounded bg-emerald-50 px-1.5 py-0.5 text-[11px] text-emerald-700 dark:bg-emerald-950 dark:text-emerald-400"
                             >
-                              {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>
+                              +{permLabel(p)}
+                            </span>
+                          ))}
+                          {e.added.length > 8 && (
+                            <span className="text-[11px] text-muted-foreground">
+                              +{e.added.length - 8} quyền khác
+                            </span>
+                          )}
+                          {e.removed.slice(0, 8).map((p: string) => (
+                            <span
+                              key={p}
+                              className="rounded bg-rose-50 px-1.5 py-0.5 text-[11px] text-rose-700 line-through dark:bg-rose-950 dark:text-rose-400"
+                            >
+                              {permLabel(p)}
+                            </span>
+                          ))}
+                          {e.removed.length > 8 && (
+                            <span className="text-[11px] text-muted-foreground">
+                              −{e.removed.length - 8} quyền khác
+                            </span>
                           )}
                         </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>
-                    )
-                  })}
+                      )}
+                    </li>
+                  ))}
                 </ul>
-                )}
-              </section>
-            )
-          })
-        )}
-      </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
     </div>
   )
 }