@goplusvn/core 0.1.37 → 0.1.38

package/package.json

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

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

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

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

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

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

@@ -2,15 +2,23 @@
 
 // Trang tạo/sửa VAI TRÒ — bar navy 1 DÒNG kiểu chi tiết đơn bán hàng
 // (← tên inline · chip mã + copy · CHIP TRẠNG THÁI màu bấm-đổi · mô tả ·
-// Hủy/Lưu), full width; khối trắng: toolbar sticky (đếm x/y quyền realtime),
-// nhóm = dòng mảnh, tài nguyên = dòng + CHIP quyền (checkbox + icon lucide
-// theo loại action, prop actionLabels bổ sung nhãn nghiệp vụ app).
-// API contract: POST /api/roles, PUT /api/roles/:id.
+// Hủy/Lưu), full width.
+//
+// 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.
+// API contract giữ nguyên: POST /api/roles, PUT /api/roles/:id, quyền dạng
+// `${action}:${resource}`.
 import * as React from "react"
 import { useRouter } from "next/navigation"
 import {
   Badge,
   Button,
+  Checkbox,
   DynamicIcon,
   Input,
   Select,
@@ -28,11 +36,10 @@ import {
   Ban,
   Bot,
   Check,
-  ChevronDown,
-  ChevronRight,
   Copy,
   Download,
   Eye,
+  LayoutTemplate,
   PenLine,
   Pencil,
   Plus,
@@ -73,8 +80,21 @@ const DEFAULT_ACTION_LABELS: Record<string, ActionLabelConfig> = {
   delete_items: { label: "Xóa chi tiết", icon: "❌", color: "text-rose-600" },
 }
 
-// --- Icon + màu theo LOẠI action (suy từ mã, giống ACTION_TONES trang tài
-// nguyên) — mọi action đều có icon mà không cần cấu hình từng cái. ---
+// 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" },
+]
+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à không cần cấu hình từng cái. ---
 const ACTION_VISUAL_RULES: Array<{
   re: RegExp
   icon: LucideIcon
@@ -86,7 +106,7 @@ const ACTION_VISUAL_RULES: Array<{
   { re: /^(delete|remove)/, icon: Trash2, cls: "text-rose-500" },
   { re: /^(cancel|void|reject)/, icon: Ban, cls: "text-rose-500" },
   {
-    re: /^(approve|confirm|verify|accept)/,
+    re: /^(approve|confirm|verify|accept|complete)/,
     icon: BadgeCheck,
     cls: "text-violet-500",
   },
@@ -94,8 +114,8 @@ const ACTION_VISUAL_RULES: Array<{
   { re: /^import/, icon: Download, cls: "text-purple-500" },
   { re: /^export/, icon: Upload, cls: "text-indigo-500" },
   { re: /^print/, icon: Printer, cls: "text-cyan-600" },
-  { re: /^sync/, icon: RefreshCw, cls: "text-cyan-600" },
-  { re: /^(manage|config)/, icon: Settings2, cls: "text-orange-500" },
+  { re: /^(sync|unlink)/, icon: RefreshCw, cls: "text-cyan-600" },
+  { re: /^(manage|config|close|reopen)/, icon: Settings2, cls: "text-orange-500" },
   { re: /^auto/, icon: Bot, cls: "text-purple-500" },
 ]
 
@@ -105,6 +125,15 @@ 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}`. */
+export interface RoleTemplate {
+  code: string
+  label: string
+  description?: string
+  permissions: string[]
+}
+
 export interface RoleFormPageProps {
   dictionary: any
   permissions?: CrudPermissions
@@ -136,6 +165,8 @@ 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[]
 }
 
 export function RoleFormPage({
@@ -147,6 +178,7 @@ export function RoleFormPage({
   mode,
   initialData,
   actionLabels,
+  roleTemplates,
 }: RoleFormPageProps) {
   const router = useRouter()
 
@@ -166,17 +198,7 @@ export function RoleFormPage({
     permissions: initialData?.permissions || ([] as string[]),
   })
 
-  const [activeGroup, setActiveGroup] = React.useState<string | null>("all")
-  const [collapsedGroups, setCollapsedGroups] = React.useState<
-    Record<string, boolean>
-  >({})
-
-  const toggleGroupCollapse = (groupName: string) => {
-    setCollapsedGroups((prev) => ({
-      ...prev,
-      [groupName]: !prev[groupName],
-    }))
-  }
+  const [activeGroup, setActiveGroup] = React.useState<string>("all")
 
   const getLocalizedName = React.useCallback(
     (key: string | null) => {
@@ -197,6 +219,14 @@ export function RoleFormPage({
     [dictionary]
   )
 
+  const actionName = React.useCallback(
+    (code: string) => {
+      const fromDb = actions.find((a) => a.code === code)?.name
+      return fromDb || mergedActionLabels[code]?.label || code
+    },
+    [actions, mergedActionLabels]
+  )
+
   const permissionMatrix = React.useMemo(() => {
     return resources.map((resource) => {
       let allowedActions: string[] = []
@@ -243,6 +273,7 @@ export function RoleFormPage({
         group: getLocalizedName(resource.group) || "Khác",
         description: resource.description,
         actions: allowedActions,
+        extraActions: allowedActions.filter((a) => !STANDARD_CODES.has(a)),
       }
     })
   }, [resources, actions, getLocalizedName])
@@ -276,19 +307,23 @@ 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(() => {
-    const groups = Object.keys(groupedMatrix)
-    if (groups.length > 0) {
-      if (
-        activeGroup !== "all" &&
-        (!activeGroup || !groups.includes(activeGroup))
-      ) {
-        setActiveGroup("all")
-      }
-    } else {
-      setActiveGroup(null)
+    if (activeGroup !== "all" && !allGroups.includes(activeGroup)) {
+      setActiveGroup("all")
     }
-  }, [groupedMatrix, activeGroup])
+  }, [allGroups, activeGroup])
+
+  // Đang search → hiện mọi nhóm khớp, bỏ qua tab đang chọn.
+  const searching = searchTerm.trim().length > 0
 
   const hasPermission = (resource: string, action: string): boolean => {
     return formData.permissions.includes(`${action}:${resource}`)
@@ -310,12 +345,10 @@ export function RoleFormPage({
     (groupName: string) => {
       const groupResources = groupedMatrix[groupName] || []
       return groupResources.flatMap((r) =>
-        actions
-          .filter((a) => r.actions.includes(a.code))
-          .map((a) => `${a.code}:${r.resource}`)
+        r.actions.map((a) => `${a}:${r.resource}`)
       )
     },
-    [groupedMatrix, actions]
+    [groupedMatrix]
   )
 
   const toggleAllForGroup = (groupName: string, enable: boolean) => {
@@ -334,12 +367,57 @@ export function RoleFormPage({
     setFormData({ ...formData, permissions: newPermissions })
   }
 
-  const groupSelectedCount = (groupName: string) => {
-    const codes = groupPermissionCodes(groupName)
-    return {
-      selected: codes.filter((p) => formData.permissions.includes(p)).length,
-      total: codes.length,
+  const groupSelectedCount = React.useCallback(
+    (groupName: string) => {
+      const codes = groupPermissionCodes(groupName)
+      return {
+        selected: codes.filter((p) => formData.permissions.includes(p)).length,
+        total: codes.length,
+      }
+    },
+    [groupPermissionCodes, formData.permissions]
+  )
+
+  // Đế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,
+      }
+    },
+    [permissionMatrix, formData.permissions]
+  )
+
+  // 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 toggleColumnForGroup = (groupName: string, actionCode: string) => {
+    const rows = (groupedMatrix[groupName] || []).filter((r) =>
+      r.actions.includes(actionCode)
+    )
+    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]
     }
+    setFormData({ ...formData, permissions: newPermissions })
   }
 
   const toggleAllForResource = (
@@ -371,6 +449,15 @@ export function RoleFormPage({
     )
   }
 
+  const applyTemplate = (templateCode: string) => {
+    const tpl = roleTemplates?.find((t) => t.code === templateCode)
+    if (!tpl) return
+    setFormData((prev) => ({ ...prev, permissions: [...tpl.permissions] }))
+    toast.success(`Đã áp bộ quyền mẫu "${tpl.label}"`, {
+      description: `${tpl.permissions.length} quyền — chỉnh tiếp rồi bấm Lưu.`,
+    })
+  }
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setIsSubmitting(true)
@@ -409,7 +496,7 @@ export function RoleFormPage({
   const visibleGroups = Object.entries(groupedMatrix).filter(
     ([group, groupResources]) =>
       groupResources.length > 0 &&
-      !(activeGroup && activeGroup !== "all" && activeGroup !== group)
+      (searching || activeGroup === "all" || activeGroup === group)
   )
 
   return (
@@ -526,44 +613,105 @@ export function RoleFormPage({
       </div>
 
       <div className="mt-3 overflow-hidden rounded-xl border border-border bg-card shadow-sm lg:mx-3">
-        {/* ===== 2. Toolbar sticky ===== */}
-        <div className="sticky top-0 z-20 flex flex-wrap items-center gap-2 border-b border-border bg-card/95 px-3 py-2 backdrop-blur supports-[backdrop-filter]:bg-card/85 sm:px-4">
-          <div className="relative min-w-[140px] flex-1 sm:max-w-64">
-            <Search className="absolute left-2.5 top-2 h-3.5 w-3.5 text-muted-foreground" />
-            <Input
-              placeholder="Tìm kiếm tài nguyên..."
-              className="h-8 rounded-md border border-border bg-card pl-8 text-sm"
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-            />
+        {/* ===== 2. Toolbar sticky: search · bộ quyền mẫu (create) · đếm ===== */}
+        <div className="sticky top-0 z-20 border-b border-border bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/85">
+          <div className="flex flex-wrap items-center gap-2 px-3 py-2 sm:px-4">
+            <div className="relative min-w-[140px] flex-1 sm:max-w-64">
+              <Search className="absolute left-2.5 top-2 h-3.5 w-3.5 text-muted-foreground" />
+              <Input
+                placeholder="Tìm kiếm tài nguyên..."
+                className="h-8 rounded-md border border-border bg-card pl-8 text-sm"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+            </div>
+            {mode === "create" && (roleTemplates?.length ?? 0) > 0 && (
+              <Select onValueChange={applyTemplate}>
+                <SelectTrigger className="h-8 w-44 rounded-md border border-border bg-card text-sm sm:w-52">
+                  <span className="flex items-center gap-1.5 truncate">
+                    <LayoutTemplate className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                    <SelectValue placeholder="Bộ quyền mẫu..." />
+                  </span>
+                </SelectTrigger>
+                <SelectContent className="rounded-lg">
+                  {roleTemplates!.map((tpl) => (
+                    <SelectItem key={tpl.code} value={tpl.code}>
+                      <span className="flex flex-col">
+                        <span>{tpl.label}</span>
+                        {tpl.description && (
+                          <span className="text-[11px] text-muted-foreground">
+                            {tpl.description}
+                          </span>
+                        )}
+                      </span>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+            <p className="ml-auto whitespace-nowrap text-xs text-muted-foreground">
+              <span className="font-semibold tabular-nums text-foreground">
+                {formData.permissions.length}
+              </span>
+              <span className="tabular-nums">/{totalAvailablePermissions}</span>{" "}
+              quyền
+            </p>
           </div>
-          <Select
-            value={activeGroup || "all"}
-            onValueChange={(val) => setActiveGroup(val === "all" ? null : val)}
-          >
-            <SelectTrigger className="h-8 w-36 rounded-md border border-border bg-card text-sm sm:w-44">
-              <SelectValue placeholder="Tất cả nhóm" />
-            </SelectTrigger>
-            <SelectContent className="rounded-lg">
-              <SelectItem value="all">Tất cả nhóm</SelectItem>
-              {Object.keys(groupedMatrix).map((group) => (
-                <SelectItem key={group} value={group}>
+
+          {/* Thanh TAB phân hệ — 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}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          <p className="ml-auto whitespace-nowrap text-xs text-muted-foreground">
-            {filteredMatrix.length} tài nguyên ·{" "}
-            <span className="font-semibold tabular-nums text-foreground">
-              {formData.permissions.length}
-            </span>
-            <span className="tabular-nums">/{totalAvailablePermissions}</span>{" "}
-            quyền
-          </p>
+                  <span
+                    className={cn(
+                      "rounded-full px-1 text-[10px] tabular-nums",
+                      active
+                        ? "bg-primary-foreground/20"
+                        : selected > 0
+                          ? selected === total
+                            ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-400"
+                            : "bg-muted text-foreground"
+                          : "bg-muted"
+                    )}
+                  >
+                    {selected}/{total}
+                  </span>
+                </button>
+              )
+            })}
+          </div>
         </div>
 
-        {/* ===== 3. Nhóm + tài nguyên dạng dòng ===== */}
+        {/* ===== 3. Bảng quyền theo phân hệ ===== */}
         {visibleGroups.length === 0 ? (
           <div className="flex flex-col items-center justify-center py-16 text-center">
             <Search className="mb-3 h-6 w-6 text-muted-foreground" />
@@ -573,30 +721,13 @@ export function RoleFormPage({
           </div>
         ) : (
           visibleGroups.map(([group, groupResources]) => {
-            const collapsed = !!collapsedGroups[group]
             const { selected, total } = groupSelectedCount(group)
             const isFull = total > 0 && selected === total
 
             return (
               <section key={group}>
-                {/* Dòng tiêu đề nhóm — mảnh, không đóng khung */}
-                <div
-                  role="button"
-                  tabIndex={0}
-                  onClick={() => toggleGroupCollapse(group)}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault()
-                      toggleGroupCollapse(group)
-                    }
-                  }}
-                  className="flex cursor-pointer select-none items-center gap-2 border-b border-border bg-card px-4 py-2 transition-colors hover:bg-muted/40"
-                >
-                  {collapsed ? (
-                    <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground" />
-                  ) : (
-                    <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground" />
-                  )}
+                {/* 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">
                     {group}
                   </h3>
@@ -611,10 +742,7 @@ export function RoleFormPage({
                     {groupResources.length} tài nguyên · {selected}/{total}
                     {isFull && <Check className="ml-0.5 inline h-3 w-3" />}
                   </span>
-                  <div
-                    className="ml-auto flex shrink-0 items-center gap-1"
-                    onClick={(e) => e.stopPropagation()}
-                  >
+                  <div className="ml-auto flex shrink-0 items-center gap-1">
                     <Button
                       type="button"
                       variant="ghost"
@@ -638,26 +766,172 @@ export function RoleFormPage({
                   </div>
                 </div>
 
-                {/* Các dòng tài nguyên */}
-                {!collapsed && (
-                  <ul className="divide-y divide-border/70 border-b border-border">
-                    {groupResources.map((resource) => (
-                      <li key={resource.resource} className="px-4 py-2.5">
-                        <div className="flex items-center gap-2">
-                          <DynamicIcon
-                            name={resource.icon as any}
-                            className="h-4 w-4 shrink-0 text-muted-foreground"
-                          />
-                          <span className="truncate text-sm font-medium text-foreground">
-                            {resource.name}
-                          </span>
-                          <code className="hidden shrink-0 font-mono text-[11px] text-muted-foreground sm:inline">
-                            {resource.resource}
-                          </code>
-                          <label className="ml-auto flex shrink-0 cursor-pointer items-center gap-1.5">
-                            <span className="hidden text-[10px] font-medium uppercase text-muted-foreground sm:inline">
-                              Tất cả
-                            </span>
+                {/* 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>
+                              </div>
+                            </div>
+                          </td>
+                          {STANDARD_COLUMNS.map((col) => {
+                            const declared = resource.actions.includes(col.code)
+                            if (!declared) {
+                              return (
+                                <td
+                                  key={col.code}
+                                  className="px-1 py-2 text-center text-muted-foreground/30"
+                                >
+                                  ·
+                                </td>
+                              )
+                            }
+                            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
+                                        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>
+                            )}
+                          </td>
+                          <td className="px-2 py-2 text-right">
                             <Switch
                               checked={isResourceFullPermission(
                                 resource.resource,
@@ -671,73 +945,14 @@ export function RoleFormPage({
                                 )
                               }
                               className="origin-right scale-75"
+                              aria-label={`Toàn quyền ${resource.name}`}
                             />
-                          </label>
-                        </div>
-
-                        {/* Chip quyền — icon theo loại action, bấm để bật/tắt */}
-                        <div className="mt-1.5 flex flex-wrap gap-1.5 sm:pl-6">
-                          {actions.map((action) => {
-                            if (!resource.actions.includes(action.code))
-                              return null
-                            const isChecked = hasPermission(
-                              resource.resource,
-                              action.code
-                            )
-                            const label =
-                              action.name ||
-                              mergedActionLabels[action.code]?.label ||
-                              action.code
-                            const visual = getActionVisual(action.code)
-                            const ActionIcon = visual.icon
-
-                            return (
-                              <button
-                                key={action.code}
-                                type="button"
-                                onClick={() =>
-                                  togglePermission(
-                                    resource.resource,
-                                    action.code
-                                  )
-                                }
-                                className={cn(
-                                  "inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs font-medium transition-colors",
-                                  isChecked
-                                    ? "border-primary/40 bg-primary/10 text-primary"
-                                    : "border-border bg-card text-muted-foreground hover:border-primary/30 hover:text-foreground"
-                                )}
-                              >
-                                {/* Ô tick tường minh — nhìn là biết đã cấp hay chưa */}
-                                <span
-                                  className={cn(
-                                    "flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-[4px] border transition-colors",
-                                    isChecked
-                                      ? "border-primary bg-primary text-primary-foreground"
-                                      : "border-border bg-card text-transparent"
-                                  )}
-                                >
-                                  <Check
-                                    className="h-2.5 w-2.5"
-                                    strokeWidth={3}
-                                  />
-                                </span>
-                                <ActionIcon
-                                  className={cn(
-                                    "h-3.5 w-3.5 shrink-0",
-                                    visual.cls,
-                                    !isChecked && "opacity-55"
-                                  )}
-                                />
-                                {label}
-                              </button>
-                            )
-                          })}
-                        </div>
-                      </li>
-                    ))}
-                  </ul>
-                )}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
               </section>
             )
           })