@goplusvn/core 0.1.39 → 0.1.40

package/package.json

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

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

@@ -2,7 +2,11 @@
 
 // Trang tạo/sửa VAI TRÒ — bar navy 1 DÒNG kiểu chi tiết đơn bán hàng.
 //
-// Ma trận quyền v3 ("Mức truy cập 5 nấc" — chốt với chủ app 2026-07):
+// 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ì
@@ -106,6 +110,24 @@ const LEVELS: Array<{ key: AccessLevel; label: string; hint: string }> = [
   { 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<{
@@ -156,6 +178,8 @@ export interface ActionMetaEntry {
   description?: string
   flow?: string
   requires?: string[]
+  /** Mức tầng-phân-hệ chứa action này: staff (Nhân viên) | manager (Quản lý). */
+  level?: "staff" | "manager"
 }
 
 export interface RoleFormPageProps {
@@ -228,10 +252,21 @@ export function RoleFormPage({
     permissions: initialData?.permissions || ([] as string[]),
   })
 
-  const [activeGroup, setActiveGroup] = React.useState<string>("all")
   const [expandedRows, setExpandedRows] = React.useState<Set<string>>(
     () => new Set()
   )
+  const [expandedGroups, setExpandedGroups] = React.useState<Set<string>>(
+    () => new Set()
+  )
+
+  const toggleGroupExpand = (g: string) => {
+    setExpandedGroups((prev) => {
+      const next = new Set(prev)
+      if (next.has(g)) next.delete(g)
+      else next.add(g)
+      return next
+    })
+  }
 
   const toggleRowExpand = (code: string) => {
     setExpandedRows((prev) => {
@@ -360,20 +395,8 @@ export function RoleFormPage({
     return groups
   }, [filteredMatrix])
 
-  const allGroups = React.useMemo(() => {
-    const seen: string[] = []
-    permissionMatrix.forEach((r) => {
-      if (!seen.includes(r.group)) seen.push(r.group)
-    })
-    return seen
-  }, [permissionMatrix])
-
-  React.useEffect(() => {
-    if (activeGroup !== "all" && !allGroups.includes(activeGroup)) {
-      setActiveGroup("all")
-    }
-  }, [allGroups, activeGroup])
 
+  // Đang search → mọi nhóm khớp tự bung phần chi tiết.
   const searching = searchTerm.trim().length > 0
 
   const has = React.useCallback(
@@ -435,6 +458,70 @@ export function RoleFormPage({
     })
   }
 
+  // ── 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))
+      )
+      for (const l of GROUP_LEVELS) {
+        const canonical = canonicalForGroup(rows, l.key)
+        if (
+          canonical.length === current.size &&
+          canonical.every((c) => current.has(c))
+        ) {
+          return l.key
+        }
+      }
+      return "custom"
+    },
+    [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}`
@@ -474,24 +561,6 @@ export function RoleFormPage({
     [formData.permissions]
   )
 
-  const toggleAllForGroup = (rows: MatrixRow[], enable: boolean) => {
-    const codes = groupPermissionCodes(rows)
-    mutatePermissions((set) => {
-      if (enable) codes.forEach((c) => set.add(c))
-      else codes.forEach((c) => set.delete(c))
-    })
-  }
-
-  const groupTabCount = React.useCallback(
-    (groupName: string) => {
-      const rows = permissionMatrix.filter((r) => r.group === groupName)
-      const codes = rows.flatMap((r) =>
-        r.actions.map((a) => `${a}:${r.resource}`)
-      )
-      return { selected: countSelected(codes), total: codes.length }
-    },
-    [permissionMatrix, countSelected]
-  )
 
   const applyTemplate = (templateCode: string) => {
     const tpl = roleTemplates?.find((t) => t.code === templateCode)
@@ -538,9 +607,7 @@ export function RoleFormPage({
   }
 
   const visibleGroups = Object.entries(groupedMatrix).filter(
-    ([group, groupResources]) =>
-      groupResources.length > 0 &&
-      (searching || activeGroup === "all" || activeGroup === group)
+    ([, groupResources]) => groupResources.length > 0
   )
 
   return (
@@ -698,61 +765,9 @@ export function RoleFormPage({
             </p>
           </div>
 
-          {/* Thanh TAB phân hệ */}
-          <div className="flex items-center gap-1 overflow-x-auto px-3 pb-2 sm:px-4 [scrollbar-width:thin]">
-            <button
-              type="button"
-              onClick={() => setActiveGroup("all")}
-              className={cn(
-                "shrink-0 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors",
-                activeGroup === "all" && !searching
-                  ? "border-primary bg-primary text-primary-foreground"
-                  : "border-border bg-card text-muted-foreground hover:border-primary/40 hover:text-foreground"
-              )}
-            >
-              Tất cả
-            </button>
-            {allGroups.map((group) => {
-              const { selected, total } = groupTabCount(group)
-              const active = activeGroup === group && !searching
-              return (
-                <button
-                  key={group}
-                  type="button"
-                  onClick={() => {
-                    setActiveGroup(group)
-                    setSearchTerm("")
-                  }}
-                  className={cn(
-                    "flex shrink-0 items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors",
-                    active
-                      ? "border-primary bg-primary text-primary-foreground"
-                      : "border-border bg-card text-muted-foreground hover:border-primary/40 hover:text-foreground"
-                  )}
-                >
-                  {group}
-                  <span
-                    className={cn(
-                      "rounded-full px-1 text-[10px] tabular-nums",
-                      active
-                        ? "bg-primary-foreground/20"
-                        : selected > 0
-                          ? selected === total
-                            ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-400"
-                            : "bg-muted text-foreground"
-                          : "bg-muted"
-                    )}
-                  >
-                    {selected}/{total}
-                  </span>
-                </button>
-              )
-            })}
-          </div>
-
-          {/* Chú giải 5 nấc — 1 dòng mảnh */}
-          <div className="hidden items-center gap-3 border-t border-border/60 px-4 py-1 text-[11px] text-muted-foreground md:flex">
-            {LEVELS.map((l) => (
+          {/* 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>
@@ -775,11 +790,13 @@ export function RoleFormPage({
             const selected = countSelected(codes)
             const total = codes.length
             const isFull = total > 0 && selected === total
+            const groupLevel = deriveGroupLevel(groupResources)
+            const groupExpanded = searching || expandedGroups.has(group)
 
             return (
               <section key={group}>
-                <div className="flex items-center gap-2 border-b border-border bg-muted/40 px-4 py-2">
-                  <h3 className="truncate text-xs font-semibold uppercase tracking-wide text-foreground">
+                <div className="flex flex-wrap items-center gap-2 border-b border-border bg-muted/40 px-4 py-2">
+                  <h3 className="truncate text-sm font-semibold text-foreground">
                     {group}
                   </h3>
                   <span
@@ -793,30 +810,53 @@ export function RoleFormPage({
                     {groupResources.length} tài nguyên · {selected}/{total}
                     {isFull && <Check className="ml-0.5 inline h-3 w-3" />}
                   </span>
-                  <div className="ml-auto flex shrink-0 items-center gap-1">
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => toggleAllForGroup(groupResources, false)}
-                      disabled={selected === 0}
-                      className="h-6 px-2 text-xs text-muted-foreground hover:text-destructive"
+                  <div className="ml-auto flex shrink-0 items-center gap-1.5">
+                    {groupLevel === "custom" && (
+                      <Badge
+                        variant="outline"
+                        className="h-6 border-amber-300 bg-amber-50 px-1.5 text-[10px] font-medium text-amber-700 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-400"
+                      >
+                        Tùy chỉnh
+                      </Badge>
+                    )}
+                    <Select
+                      value={groupLevel === "custom" ? undefined : groupLevel}
+                      onValueChange={(v) =>
+                        setGroupLevel(groupResources, v as GroupLevel)
+                      }
                     >
-                      Bỏ chọn
-                    </Button>
-                    <Button
+                      <SelectTrigger className="h-7 w-40 rounded-md border border-border bg-card text-xs">
+                        <SelectValue placeholder="Tùy chỉnh..." />
+                      </SelectTrigger>
+                      <SelectContent className="rounded-lg">
+                        {GROUP_LEVELS.map((l) => (
+                          <SelectItem key={l.key} value={l.key}>
+                            <span className="flex flex-col">
+                              <span>{l.label}</span>
+                              <span className="text-[10px] text-muted-foreground">
+                                {l.hint}
+                              </span>
+                            </span>
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <button
                       type="button"
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => toggleAllForGroup(groupResources, true)}
-                      disabled={isFull}
-                      className="h-6 px-2 text-xs font-semibold text-primary hover:text-primary"
+                      onClick={() => toggleGroupExpand(group)}
+                      className="flex h-7 items-center gap-1 rounded-md border border-border bg-card px-2 text-[11px] font-medium text-muted-foreground transition-colors hover:text-foreground"
                     >
-                      Chọn tất cả
-                    </Button>
+                      {groupExpanded ? (
+                        <ChevronDown className="h-3 w-3" />
+                      ) : (
+                        <ChevronRight className="h-3 w-3" />
+                      )}
+                      Tùy chỉnh
+                    </button>
                   </div>
                 </div>
 
+                {groupExpanded && (
                 <ul className="divide-y divide-border/60 border-b border-border">
                   {groupResources.map((r) => {
                     const level = deriveLevel(r)
@@ -989,6 +1029,7 @@ export function RoleFormPage({
                     )
                   })}
                 </ul>
+                )}
               </section>
             )
           })