@goplusvn/core 0.1.78 → 0.1.79

package/CHANGELOG.md

@@ -1,5 +1,61 @@
 # Changelog
 
+## 0.1.79 — Vai trò cũng có phạm vi: quản trị viên đơn vị chỉ thấy & sửa vai trò của mình
+
+Lỗ hổng đối xứng của đợt 0.1.76: người dùng đã bị kẹp theo workspace, còn VAI
+TRÒ thì không. Chặn *gán* vai trò mạnh (D4) mà để ngỏ đường *tạo* vai trò mạnh
+chỉ là hàng rào có cửa sau — admin đơn vị tạo "Trợ lý" kèm `role:update` rồi tự
+gán cho tài khoản mình vừa lập. Toàn bộ đợt này **ADDITIVE**: app không truyền
+`getDelegationActor` / `scope` chạy y như trước.
+
+- `workspace/delegation.ts` — thêm `assertCanManageRole`, `assertCanDeleteRole`,
+  `canManageRole`, `defaultRoleWorkspaceIdFor`, type `RoleDraft`. Vai trò mới bị
+  đóng dấu `workspaceId` của người tạo, ép `rank > actor.rank`, chặn quyền nguy
+  hiểm (D4) và quyền vượt trần của chính người tạo (D2).
+- `rbac/role-service.ts` — `getRolesData(db, params, schema, scope?)` nhận
+  `RoleQueryScope`: lọc theo `adminWorkspaceIds` (+ vai trò dùng chung, chỉ
+  đọc), kẹp cả mảng `users[]` nhúng trong mỗi vai trò bằng `userWhere` — trước
+  đó trang vai trò là cửa hậu xem toàn bộ danh bạ. Trả thêm `workspaceId` /
+  `isSystem` / `rank` / `canManage`.
+- `rbac/route-handlers.ts` — dep tuỳ chọn `getDelegationActor`. GET lọc theo
+  phạm vi; GET một vai trò ngoài phạm vi trả **404** (403 là xác nhận nó tồn
+  tại); POST/PUT/DELETE đi qua cổng uỷ quyền, từ chối trả 403 kèm mã D1/D2/D4.
+- `user/user-service.ts` — `getAssignableRoles(db, actor)`: ô chọn vai trò trong
+  hộp thoại người dùng chỉ hiện vai trò GÁN ĐƯỢC (D2∧D4), không còn kiểu chọn
+  xong bấm lưu mới ăn 403.
+- `rbac/pages/role-form-page.tsx` — prop `grantablePermissions`: ma trận quyền
+  cắt theo trần quyền người tạo ngay tại `resourceInfo.allowed` (mọi thứ dựng
+  trên nó tự tuân theo), mẫu vai trò cũng bị kẹp. Quyền đã cấp nằm ngoài trần
+  thì KHÔNG hiện và KHÔNG bị xoá — API từ chối lưu, thà chặn còn hơn âm thầm
+  tước quyền.
+- `rbac` UI — `Role.canManage` tắt nút Sửa/Xoá và ô nhiệt trong danh sách, kèm
+  huy hiệu "Dùng chung" / "Hệ thống" để người dùng hiểu vì sao nút biến mất.
+
+### Cô lập DỮ LIỆU theo vai trò (`Role.dataScope` → nấc phạm vi)
+
+Nửa còn lại: 0.1.76 kẹp *người dùng*, phần trên kẹp *vai trò*, nhưng **dữ liệu
+nghiệp vụ** vẫn mở. Thang 5 nấc `none | own | workspace | subtree | all` (Δ1,
+kiểu Dynamics 365) trước đây là code chết — nay được đấu vào phạm vi thật.
+
+Quyết định thiết kế đáng nhớ: bốn nấc `none/workspace/subtree/all` được **gấp
+thẳng vào `canViewAll` + `allowedIds` lúc dựng phạm vi**, nên mọi `scopedWhere`
+/ `memberScopeWhere` / guard lớp 2 đang có tự tuân theo — **không call-site nào
+phải sửa**. Chỉ nấc `own` cần biết cột chủ sở hữu nên phải khai ở call-site.
+
+- `workspace/types.ts` — `WorkspaceScope` thêm `level?` + `userId?`;
+  `WorkspaceScopeConfig` thêm `getScopeLevel?(session)` và `ownerField?`.
+- `workspace/scope.ts` — `getWorkspaceScope` áp nấc: `all` → bỏ cô lập kể cả khi
+  không có quyền view-all; `none` → sentinel; `workspace` → **không** bung con
+  cháu; `subtree`/bỏ trống → y hệt hôm nay. `scopedWhere(scope, { ownerField })`
+  và `memberScopeWhere` hiểu nấc `own`; **thiếu `ownerField` là fail-closed**
+  (khớp sentinel) chứ không âm thầm nới lên `subtree`.
+- `rbac/route-handlers.ts` — đọc/ghi `Role.dataScope` (dò cột bằng
+  `role.fields`, app chưa có cột thì bỏ qua). **Chỉ vai vận hành**
+  (`actor.canManageAll`) đặt được nấc: admin đơn vị gửi `dataScope` lên thì
+  field bị bỏ im lặng, nếu không họ tự nới tầm nhìn của chính mình.
+- `rbac/pages/role-form-page.tsx` — ô chọn "Cô lập dữ liệu" sau prop
+  `showDataScope` (app truyền `canViewAllWorkspaces(session)`).
+
 ## 0.1.76 — Multi-tenant + workspace: một cây tổ chức/chi nhánh/phòng ban, uỷ quyền cấp tài khoản trong phạm vi
 
 Nguồn: `docs/WORKSPACE-MULTITENANT-PLAN.md` + `docs/WORKSPACE-RESEARCH-IAM.md`

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

package/src/rbac/__tests__/route-handlers.test.ts

@@ -145,3 +145,186 @@ describe("roles route handlers — landingPath", () => {
     expect(await res.json()).toMatchObject({ landingPath: null });
   });
 });
+
+// ── Uỷ quyền vai trò (app multi-tenant) ────────────────────────────────────
+// Chặn *gán* vai trò mạnh mà để ngỏ đường *tạo* vai trò mạnh là hàng rào có
+// cửa sau: quản trị viên đơn vị chỉ cần tạo "Trợ lý" kèm `role:update`.
+
+function tenantDb(role: Partial<Record<string, any>> = {}) {
+  const existing = {
+    id: "r1",
+    code: "to_truong",
+    name: "Tổ trưởng",
+    description: "",
+    status: "active",
+    landingPath: null,
+    workspaceId: "spa",
+    rank: 100,
+    isSystem: false,
+    rolePermissions: [{ resourceCode: "meal-order", actionCode: "view" }],
+    _count: { userRoles: 0 },
+    ...role,
+  };
+  const created: any[] = [];
+  const updated: any[] = [];
+  const deleted: string[] = [];
+
+  const tx = {
+    role: {
+      create: async ({ data }: any) => {
+        created.push(data);
+        return { ...existing, ...data };
+      },
+      update: async ({ data }: any) => {
+        updated.push(data);
+        return { ...existing, ...data };
+      },
+      delete: async ({ where }: any) => {
+        deleted.push(where.id);
+      },
+    },
+    rolePermission: {
+      deleteMany: async () => undefined,
+      createMany: async () => undefined,
+    },
+  };
+
+  const prisma: any = {
+    role: {
+      findUnique: async () => existing,
+      fields: {
+        workspaceId: { name: "workspaceId" },
+        rank: { name: "rank" },
+        isSystem: { name: "isSystem" },
+      },
+    },
+    systemConfig: { upsert: async () => undefined },
+    $transaction: async (fn: any) => fn(tx),
+  };
+
+  const actor = {
+    userId: "u-spa",
+    scope: {
+      canViewAll: false,
+      rootIds: ["spa"],
+      allowedIds: ["spa"],
+      adminIds: ["spa"],
+      defaultId: "spa",
+    },
+    canManageAll: false,
+    permissions: new Set(["meal-order:view", "meal-order:create"]),
+    rank: 50,
+  };
+
+  const deps = {
+    prisma,
+    getSession: async () => ({ user: { id: "u-spa" } }),
+    getCrudPermissions: async () => ({
+      read: true,
+      create: true,
+      update: true,
+      delete: true,
+    }),
+    getDelegationActor: async () => actor,
+  };
+
+  return { deps, actor, created, updated, deleted };
+}
+
+describe("roles route handlers — uỷ quyền", () => {
+  it("POST đóng dấu đơn vị của người tạo, không để vai trò dùng chung", async () => {
+    const { deps, created } = tenantDb();
+    const res = await createRolesCollectionHandlers(deps as any).POST(
+      post({ code: "ca_truong", name: "Ca trưởng", rank: 90, permissions: ["view:meal-order"] })
+    );
+
+    expect(res.status).toBe(201);
+    expect(created[0].workspaceId).toBe("spa");
+    expect(created[0].rank).toBe(90);
+  });
+
+  it("POST từ chối quyền quản trị hệ thống (403 kèm mã D4)", async () => {
+    const { deps, created } = tenantDb();
+    const res = await createRolesCollectionHandlers(deps as any).POST(
+      post({ code: "tro_ly", name: "Trợ lý", rank: 90, permissions: ["create:role"] })
+    );
+
+    expect(res.status).toBe(403);
+    expect((await res.json()).code).toBe("D4_DANGEROUS_ROLE");
+    expect(created).toHaveLength(0);
+  });
+
+  it("POST từ chối quyền vượt trần của chính người tạo", async () => {
+    const { deps } = tenantDb();
+    const res = await createRolesCollectionHandlers(deps as any).POST(
+      post({ code: "kt", name: "Kế toán", rank: 90, permissions: ["view:payroll"] })
+    );
+
+    expect(res.status).toBe(403);
+    expect((await res.json()).code).toBe("D2_EXCEEDS_CEILING");
+  });
+
+  it("PUT chặn sửa vai trò DÙNG CHUNG (workspaceId null)", async () => {
+    const { deps, updated } = tenantDb({ workspaceId: null });
+    const res = await createRoleItemHandlers(deps as any).PUT(
+      put({ name: "Đổi tên", permissions: ["view:meal-order"] }),
+      ctx as any
+    );
+
+    expect(res.status).toBe(403);
+    expect(updated).toHaveLength(0);
+  });
+
+  it("PUT chặn sửa vai trò của đơn vị khác", async () => {
+    const { deps } = tenantDb({ workspaceId: "tanloc" });
+    const res = await createRoleItemHandlers(deps as any).PUT(
+      put({ name: "Đổi tên", permissions: [] }),
+      ctx as any
+    );
+
+    expect(res.status).toBe(403);
+  });
+
+  it("PUT sửa vai trò trong nhánh mình thì qua", async () => {
+    const { deps, updated } = tenantDb();
+    const res = await createRoleItemHandlers(deps as any).PUT(
+      put({ name: "Tổ trưởng bếp", permissions: ["view:meal-order"] }),
+      ctx as any
+    );
+
+    expect(res.status).toBe(200);
+    expect(updated[0].name).toBe("Tổ trưởng bếp");
+  });
+
+  it("DELETE chặn vai trò hệ thống", async () => {
+    const { deps, deleted } = tenantDb({ isSystem: true });
+    const res = await createRoleItemHandlers(deps as any).DELETE(
+      new Request("http://app.test/api/roles/r1", { method: "DELETE" }),
+      ctx as any
+    );
+
+    expect(res.status).toBe(403);
+    expect(deleted).toHaveLength(0);
+  });
+
+  it("GET vai trò ngoài phạm vi trả 404 chứ không phải 403 (đừng xác nhận nó tồn tại)", async () => {
+    const { deps } = tenantDb({ workspaceId: "tanloc" });
+    const res = await createRoleItemHandlers(deps as any).GET(
+      new Request("http://app.test/api/roles/r1"),
+      ctx as any
+    );
+
+    expect(res.status).toBe(404);
+  });
+
+  it("GET vai trò dùng chung: xem được, canManage = false", async () => {
+    const { deps } = tenantDb({ workspaceId: null });
+    const res = await createRoleItemHandlers(deps as any).GET(
+      new Request("http://app.test/api/roles/r1"),
+      ctx as any
+    );
+
+    expect(res.status).toBe(200);
+    expect(await res.json()).toMatchObject({ canManage: false });
+  });
+});

package/src/rbac/components/roles/role-card.tsx

@@ -49,6 +49,14 @@ export const RoleCard = memo(function RoleCard({
   const router = useRouter();
   const permissionsCount = role.permissions.length;
   const roleColor = roleColors[role.code] || "bg-indigo-500";
+  // Vai trò dùng chung / vai trò hệ thống / vai trò đơn vị khác: XEM được (để
+  // biết mình đang gán gì) nhưng không sửa. `undefined` = app không xét.
+  const managed = role.canManage !== false;
+  const readOnlyLabel = role.isSystem
+    ? "Hệ thống"
+    : role.canManage === false && !role.workspaceId
+      ? "Dùng chung"
+      : null;
 
   const handleEdit = useCallback(() => {
     router.push(`/${lang}/roles/${role.id}/edit`);
@@ -77,21 +85,32 @@ export const RoleCard = memo(function RoleCard({
               </CardDescription>
             </div>
           </div>
-          {role.status === "active" ? (
-            <Badge
-              variant="outline"
-              className="bg-emerald-50 text-emerald-600 border-emerald-200 dark:bg-emerald-500/10 dark:text-emerald-400 dark:border-emerald-500/20 text-[10px] px-2 py-0 h-5 font-semibold"
-            >
-              Hoạt động
-            </Badge>
-          ) : (
-            <Badge
-              variant="outline"
-              className="bg-muted text-muted-foreground border-border text-[10px] px-2 py-0 h-5 font-semibold"
-            >
-              Khóa
-            </Badge>
-          )}
+          <div className="flex items-center gap-1.5">
+            {readOnlyLabel && (
+              <Badge
+                variant="outline"
+                className="bg-muted text-muted-foreground border-border text-[10px] px-2 py-0 h-5 font-semibold"
+                title="Vai trò do cấp trên quản lý — bạn xem được nhưng không sửa"
+              >
+                {readOnlyLabel}
+              </Badge>
+            )}
+            {role.status === "active" ? (
+              <Badge
+                variant="outline"
+                className="bg-emerald-50 text-emerald-600 border-emerald-200 dark:bg-emerald-500/10 dark:text-emerald-400 dark:border-emerald-500/20 text-[10px] px-2 py-0 h-5 font-semibold"
+              >
+                Hoạt động
+              </Badge>
+            ) : (
+              <Badge
+                variant="outline"
+                className="bg-muted text-muted-foreground border-border text-[10px] px-2 py-0 h-5 font-semibold"
+              >
+                Khóa
+              </Badge>
+            )}
+          </div>
         </div>
       </CardHeader>
       <CardContent className="p-4 pt-0 space-y-3">
@@ -119,7 +138,7 @@ export const RoleCard = memo(function RoleCard({
         </div>
 
         <div className="flex gap-2 pt-2">
-          {canUpdate && (
+          {canUpdate && managed && (
             <Button
               variant="outline"
               size="sm"
@@ -141,7 +160,7 @@ export const RoleCard = memo(function RoleCard({
               Chép
             </Button>
           )}
-          {canDelete && (
+          {canDelete && managed && (
             <Button
               variant="outline"
               size="sm"

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

@@ -46,6 +46,7 @@ import {
   Info,
   LayoutTemplate,
   Save,
+  ShieldCheck,
   X,
 } from "lucide-react"
 
@@ -80,6 +81,46 @@ const STANDARD_ORDER = ["create", "update", "delete", "export", "import"]
 /** Radix Select không nhận value rỗng — dùng mã riêng cho "tự suy ra". */
 const LANDING_AUTO = "__auto__"
 
+/** Cùng lý do: "" = theo mặc định của app (`subtree`). */
+const DATA_SCOPE_DEFAULT = "__default__"
+
+/**
+ * Thang 5 nấc của `@goerp/core/workspace` (Δ1). Chữ ở đây cố ý nói theo NGƯỜI
+ * DÙNG chứ không theo tên kỹ thuật: người tick quyền không biết "subtree" là gì.
+ */
+const DATA_SCOPE_OPTIONS: { value: string; label: string; hint: string }[] = [
+  {
+    value: DATA_SCOPE_DEFAULT,
+    label: "Theo mặc định",
+    hint: "Workspace được gán + cấp dưới",
+  },
+  {
+    value: "all",
+    label: "Tất cả dữ liệu",
+    hint: "Không cô lập — thấy mọi workspace",
+  },
+  {
+    value: "subtree",
+    label: "Workspace + cấp dưới",
+    hint: "Đơn vị được gán và các bộ phận con",
+  },
+  {
+    value: "workspace",
+    label: "Chỉ workspace được gán",
+    hint: "Không thấy dữ liệu của bộ phận con",
+  },
+  {
+    value: "own",
+    label: "Chỉ bản ghi của mình",
+    hint: "Cần app khai cột chủ sở hữu; thiếu thì không thấy gì",
+  },
+  {
+    value: "none",
+    label: "Không thấy dữ liệu",
+    hint: "Vai trò chỉ thao tác, không đọc danh sách",
+  },
+]
+
 /** Bộ quyền mẫu áp khi TẠO vai trò mới (consumer định nghĩa). */
 export interface RoleTemplate {
   code: string
@@ -142,6 +183,8 @@ export interface RoleFormPageProps {
     permissions: string[]
     /** Trang mở đầu của vai trò. Null/undefined = tự suy ra. */
     landingPath?: string | null
+    /** Nấc cô lập dữ liệu. Null = mặc định của app (`subtree`). */
+    dataScope?: string | null
   }
   actionLabels?: Record<string, ActionLabelConfig>
   roleTemplates?: RoleTemplate[]
@@ -151,6 +194,24 @@ export interface RoleFormPageProps {
   menuTree?: MenuTreeSection[]
   /** Endpoint nhật ký đổi quyền (edit mode) — vd /api/roles/{id}/history. */
   historyEndpoint?: string
+  /**
+   * TRẦN QUYỀN của người đang tạo/sửa vai trò, dạng `"action:resource"`.
+   *
+   * Bỏ trống = không giới hạn (app một tổ chức, hành vi cũ). Truyền vào thì ma
+   * trận chỉ hiện thứ họ tự có — cùng luật D2 mà API đang chặn, để người dùng
+   * không tick đủ thứ rồi mới ăn 403 lúc bấm lưu.
+   *
+   * Quyền đã cấp sẵn nằm ngoài trần thì KHÔNG hiện và cũng KHÔNG bị xoá; API sẽ
+   * từ chối lưu — thà chặn còn hơn âm thầm tước quyền của vai trò.
+   */
+  grantablePermissions?: string[]
+  /**
+   * Hiện ô CÔ LẬP DỮ LIỆU (`Role.dataScope`). Chỉ bật cho vai vận hành: quản
+   * trị viên đơn vị mà tự đặt được nấc này thì họ chỉ cần tạo một vai trò "Tất
+   * cả dữ liệu" rồi tự gán, và việc cô lập thành ra tuỳ chọn. API cũng bỏ qua
+   * trường này nếu người gửi không phải vai vận hành — đây chỉ là lớp hiển thị.
+   */
+  showDataScope?: boolean
 }
 
 export function RoleFormPage({
@@ -167,9 +228,16 @@ export function RoleFormPage({
   resourcePages,
   menuTree,
   historyEndpoint,
+  grantablePermissions,
+  showDataScope,
 }: RoleFormPageProps) {
   const router = useRouter()
 
+  const grantable = React.useMemo(
+    () => (grantablePermissions ? new Set(grantablePermissions) : null),
+    [grantablePermissions]
+  )
+
   const mergedActionLabels = React.useMemo(
     () => ({ ...DEFAULT_ACTION_LABELS, ...actionLabels }),
     [actionLabels]
@@ -199,6 +267,12 @@ export function RoleFormPage({
     landingPath: initialData?.landingPath || "",
   })
 
+  // Tách khỏi `formData` vì payload gửi thẳng cả object: vai trò không được
+  // phép đặt nấc này thì trường phải KHÔNG có mặt, chứ không phải gửi rỗng.
+  const [dataScope, setDataScope] = React.useState<string>(
+    initialData?.dataScope ?? ""
+  )
+
   const getLocalizedName = React.useCallback(
     (key: string | null) => {
       if (!key) return ""
@@ -258,6 +332,17 @@ export function RoleFormPage({
       } catch {
         allowed = actions.map((a) => a.code).filter((c) => fallback.includes(c))
       }
+      // TRẦN QUYỀN (D2): người tạo vai trò không cấp được thứ chính mình không
+      // có. Cắt ngay ở `allowed` nên mọi thứ dựng trên nó — hàng thao tác, tick
+      // trang, mẫu vai trò, phạm vi chi nhánh — tự động tuân theo; lọc riêng ở
+      // từng chỗ vẽ là kiểu bỏ sót một chỗ rồi không ai biết.
+      if (grantable) {
+        allowed = allowed.filter((a) => grantable.has(`${a}:${resource.code}`))
+      }
+      // Trang không cấp được gì thì biến khỏi ma trận luôn: một dòng có mỗi cái
+      // tick trang bị khoá chỉ tổ gây hiểu lầm là "đang bật".
+      if (grantable && allowed.length === 0) return
+
       map.set(resource.code, {
         name: getLocalizedName(resource.name),
         icon: resource.icon,
@@ -265,7 +350,7 @@ export function RoleFormPage({
       })
     })
     return map
-  }, [resources, actions, getLocalizedName])
+  }, [resources, actions, getLocalizedName, grantable])
 
   /** 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. */
@@ -471,9 +556,17 @@ export function RoleFormPage({
   const applyTemplate = (templateCode: string) => {
     const tpl = roleTemplates?.find((t) => t.code === templateCode)
     if (!tpl) return
-    setFormData((prev) => ({ ...prev, permissions: [...tpl.permissions] }))
+    // Mẫu là bộ quyền dựng sẵn cho TOÀN hệ thống — kẹp lại theo trần quyền của
+    // người đang tạo, không thì bấm một cái là vượt trần và API từ chối.
+    const applied = grantable
+      ? tpl.permissions.filter((p) => grantable.has(p))
+      : [...tpl.permissions]
+    setFormData((prev) => ({ ...prev, permissions: applied }))
     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.`,
+      description:
+        applied.length === tpl.permissions.length
+          ? `${tpl.permissions.length} quyền — chỉnh tiếp rồi bấm Lưu.`
+          : `${applied.length}/${tpl.permissions.length} quyền (phần còn lại ngoài phạm vi của bạn).`,
     })
   }
 
@@ -487,7 +580,9 @@ export function RoleFormPage({
       const res = await fetch(url, {
         method,
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(formData),
+        body: JSON.stringify(
+          showDataScope ? { ...formData, dataScope: dataScope || null } : formData
+        ),
       })
       if (!res.ok) {
         await throwFetchError(res, `Failed to ${mode} role`)
@@ -886,6 +981,42 @@ export function RoleFormPage({
             </div>
           )}
 
+          {/* Cô lập dữ liệu — vai trò này nhìn thấy dữ liệu của những ai */}
+          {showDataScope && (
+            <div className="flex items-center gap-1.5">
+              <ShieldCheck className="h-3.5 w-3.5 text-muted-foreground" />
+              <span className="text-xs text-muted-foreground">
+                Cô lập dữ liệu:
+              </span>
+              <Select
+                value={dataScope || DATA_SCOPE_DEFAULT}
+                onValueChange={(v) =>
+                  setDataScope(v === DATA_SCOPE_DEFAULT ? "" : v)
+                }
+              >
+                <SelectTrigger className="h-8 w-56 rounded-md border border-border bg-card text-sm">
+                  <SelectValue>
+                    {DATA_SCOPE_OPTIONS.find(
+                      (o) => o.value === (dataScope || DATA_SCOPE_DEFAULT)
+                    )?.label ?? dataScope}
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent className="rounded-lg">
+                  {DATA_SCOPE_OPTIONS.map((o) => (
+                    <SelectItem key={o.value} value={o.value}>
+                      <span className="flex flex-col">
+                        <span>{o.label}</span>
+                        <span className="text-[11px] text-muted-foreground">
+                          {o.hint}
+                        </span>
+                      </span>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+
           {/* Trang mở đầu — nơi vai trò này hạ cánh sau khi đăng nhập */}
           <div className="flex items-center gap-1.5">
             <House className="h-3.5 w-3.5 text-muted-foreground" />

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

@@ -174,11 +174,14 @@ function RolePermissionHeatmap({
                 {groups.map((g) => {
                   const { granted, total } = cellFor(role, g)
                   const ratio = total > 0 ? granted / total : 0
+                  // Ô nhiệt là lối tắt sang trang sửa — vai trò không sửa được
+                  // thì đừng mời bấm rồi để trang sửa từ chối.
+                  const editable = canUpdate && role.canManage !== false
                   return (
                     <td key={g} className="px-1 py-1 text-center">
                       <button
                         type="button"
-                        disabled={!canUpdate}
+                        disabled={!editable}
                         onClick={() =>
                           router.push(`/${lang}/roles/${role.id}/edit`)
                         }
@@ -186,7 +189,7 @@ function RolePermissionHeatmap({
                         className={cn(
                           "mx-auto block h-5 w-10 rounded",
                           shade(ratio),
-                          canUpdate && "cursor-pointer hover:ring-2 hover:ring-primary/40"
+                          editable && "cursor-pointer hover:ring-2 hover:ring-primary/40"
                         )}
                         aria-label={`${role.name} — ${g}: ${granted}/${total} quyền`}
                       />