@goplusvn/core 0.1.78 → 0.1.81

package/CHANGELOG.md

@@ -1,5 +1,130 @@
 # Changelog
 
+## 0.1.81 — Cây workspace kiểu explorer, xoá/khôi phục lộ ra, thêm thành viên bằng dialog
+
+Vẫn **ADDITIVE**: prop mới đều tuỳ chọn, app không truyền thì màn hình vẫn chạy.
+
+- `workspace/components/workspace-tree-panel.tsx` (MỚI, thay
+  `workspace-org-block.tsx` đã xoá) — cây thu gọn được kiểu explorer: một kiểu
+  dòng duy nhất cho mọi cấp, chevron riêng, vạch dẫn con, nút gọn thì cộng dồn
+  số người của cả nhánh. Chọn dòng bằng `bg-accent` + vạch `primary` bên trái
+  thay vì nền đậm. Mỗi dòng có menu `⋯`: thêm cấp con, sửa tên/mã, chuyển
+  nhánh, và **“Xoá workspace”** — trước đây thao tác xoá nấp sau chữ “Ngừng
+  hoạt động” nên nhìn vào không ai thấy màn hình có chức năng xoá.
+  Tên cũ (`WorkspaceOrgAnnotation`, `filterWorkspaceTree`, `rollupCounts`,
+  `WorkspaceRollup`) vẫn export được từ module này.
+- `workspace/service.ts` — `reactivateSubtree()` đối xứng với
+  `deactivateSubtree()`; `PATCH { isActive: true }` bật lại CẢ NHÁNH. Xoá là
+  cửa hai chiều: không có đường về thì nút đã xoá nằm lại vĩnh viễn.
+- `workspace/components/workspace-member-picker-dialog.tsx` (MỚI) — “Thêm thành
+  viên” chuyển từ khối chèn trong trang sang **dialog** theo đúng khuôn dialog
+  chọn của vinhhoa (`h-[85vh]`, header/toolbar dính, vùng cuộn `bg-muted/30`,
+  footer hành động). Tìm theo họ tên · mã nhân viên · email; lọc theo chi nhánh,
+  vai trò (app truyền) và **“đang ở bộ phận nào”** (core tự phục vụ bằng chính
+  bảng `userWorkspace`). Tick nhiều dòng, gán một lượt; dòng nào hỏng thì giữ
+  dialog và chọn lại đúng những người đó.
+- `workspace/route-handlers.ts` — dep tuỳ chọn `candidateSearch(query)` (nhánh
+  tìm THÊM của app, ví dụ mã nhân viên) và tham số `inWorkspaceId`;
+  `memberIdentity.describe` trả thêm `code` để hiện mã nhân viên cạnh tên.
+
+## 0.1.80 — Gán người vào workspace: hàng loạt theo bộ lọc, và nhìn ra người đó là ai
+
+Đợt 0.1.76–0.1.79 dựng xong hàng rào; đợt này là phần THAO TÁC — chỗ người ta
+thực sự ngồi làm. Toàn bộ **ADDITIVE**: mọi prop và dep mới đều tuỳ chọn, app
+không truyền thì màn hình chạy y như 0.1.79.
+
+- `workspace/components/workspace-members-panel.tsx`
+  - **Gán hàng loạt** (bật bằng prop `bulkFilters`): lọc → tick nhiều dòng →
+    chuyển một lần. Hai nút, hai nghĩa: **“Chuyển”** (`mode: "move"`) GỠ mọi
+    không gian khác của người được chọn, **“Thêm”** giữ nguyên nơi cũ. Đây là
+    điểm dễ hiểu nhầm nhất của cả tính năng: phạm vi đọc là HỢP các không gian
+    một người thuộc về, nên chỉ THÊM thì người vừa “gán vào bộ phận Kho” vẫn
+    còn membership gốc và vẫn thấy toàn hệ thống — bấm xong tưởng đã cô lập mà
+    thực ra không đổi gì. Vì vậy “Chuyển” là mặc định, không phải “Thêm”.
+  - **Danh tính mỗi dòng**: chi nhánh · vai trò · các không gian đang thuộc về,
+    cho cả thành viên lẫn ứng viên. Tên với email không trả lời được câu hỏi
+    thật của người đang gán (“ông này là ai, đang nằm ở đâu, có phải quản trị
+    không”), mà gán nhầm là cắt mất tầm nhìn của một người thật.
+- `workspace/route-handlers.ts`
+  - Dep tuỳ chọn `candidateFilter(params)` — app dịch tham số URL thành mảnh
+    `where` của Prisma. Mảnh này **chồng thêm** vào `memberScopeWhere(...,
+    adminOnly)`, không thay thế: không dùng nó để với ra ngoài phạm vi quản trị
+    được.
+  - Dep tuỳ chọn `memberIdentity { select, describe }` — “chi nhánh”/“vai trò”
+    là quan hệ của app, nhét thẳng `userBranches`/`userRoles` vào truy vấn thì
+    app nào không có đúng hai quan hệ đó sẽ vỡ lúc chạy. Các không gian đang
+    thuộc về thì core tự đọc (đã trừ nút đang mở).
+  - POST nhận `{ userIds[], mode }`; từng dòng hỏng trả lý do RIÊNG (ngoài phạm
+    vi, tài khoản được bảo vệ…) thay vì gộp thành một câu “có lỗi”.
+- `workspace/components/workspace-org-block.tsx` — cây con **nằm trong** nút
+  gốc: thụt lề mọc ra từ tim ô icon của khối (1.75rem) kèm vạch dọc nối các nút
+  cùng cấp. Trước đó cấp đầu tiên chỉ lùi 0.75rem — ít hơn cả lề của tiêu đề
+  khối — nên đơn vị con nhìn ra thành ngang hàng với tổ chức, đúng thứ màn hình
+  này không được phép nói. Prop `annotations` (tra theo `code`) gắn được huy
+  hiệu cho cả nút CON, cần khi cây có một nút gốc phủ toàn hệ thống và “vận
+  hành”/“khách hàng” tụt xuống làm con.
+- `rbac` — `Role.workspaceName` giải sẵn ở server (một câu SQL cho cả trang,
+  không `include` lồng: quan hệ `workspace` có thể chưa khai trên `Role`).
+  `PUT /api/roles/[id]` cho **chuyển chủ sở hữu** vai trò, nhưng chỉ ghi khi
+  client CÓ gửi `workspaceId` — ghi vô điều kiện thì vai trò dùng chung do vai
+  vận hành sửa sẽ lặng lẽ rơi vào một đơn vị.
+
+## 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.81",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org",

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

@@ -145,3 +145,255 @@ 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");
+  });
+
+  // ── Chủ sở hữu vai trò (`Role.workspaceId`) — ô "Đơn vị sở hữu" trên form ──
+  // Khác `dataScope`: cái này trả lời "vai trò của ai, AI SỬA ĐƯỢC", không phải
+  // "người mang vai trò thấy dữ liệu tới đâu".
+
+  it("POST nhận đơn vị do vai vận hành chọn thay vì tự đóng dấu", async () => {
+    const { deps, actor, created } = tenantDb();
+    actor.canManageAll = true;
+    const res = await createRolesCollectionHandlers(deps as any).POST(
+      post({
+        code: "qc_lead",
+        name: "Trưởng QC",
+        workspaceId: "spa-qc",
+        permissions: ["view:meal-order"],
+      })
+    );
+
+    expect(res.status).toBe(201);
+    expect(created[0].workspaceId).toBe("spa-qc");
+  });
+
+  it("POST vai vận hành chọn 'dùng chung' thì workspaceId là null", async () => {
+    const { deps, actor, created } = tenantDb();
+    actor.canManageAll = true;
+    const res = await createRolesCollectionHandlers(deps as any).POST(
+      post({ code: "chung", name: "Dùng chung", workspaceId: null, permissions: [] })
+    );
+
+    expect(res.status).toBe(201);
+    expect(created[0].workspaceId).toBeNull();
+  });
+
+  it("PUT KHÔNG gửi workspaceId thì không đóng dấu lại (vai trò dùng chung ở yên)", async () => {
+    // Đây là hồi quy thật: ghi `gate.workspaceId` vô điều kiện thì mỗi lần vai
+    // vận hành sửa một vai trò dùng chung là nó lặng lẽ rơi vào một đơn vị.
+    const { deps, actor, updated } = tenantDb({ workspaceId: null });
+    actor.canManageAll = true;
+    const res = await createRoleItemHandlers(deps as any).PUT(
+      put({ name: "Đổi tên", permissions: [] }),
+      ctx as any
+    );
+
+    expect(res.status).toBe(200);
+    expect(updated[0]).not.toHaveProperty("workspaceId");
+  });
+
+  it("PUT vai vận hành chuyển vai trò sang đơn vị khác", async () => {
+    const { deps, actor, updated } = tenantDb();
+    actor.canManageAll = true;
+    const res = await createRoleItemHandlers(deps as any).PUT(
+      put({ name: "Tổ trưởng", workspaceId: "tanloc", permissions: [] }),
+      ctx as any
+    );
+
+    expect(res.status).toBe(200);
+    expect(updated[0].workspaceId).toBe("tanloc");
+  });
+
+  it("PUT quản trị viên đơn vị KHÔNG chuyển được vai trò ra ngoài nhánh mình", async () => {
+    const { deps, updated } = tenantDb();
+    const res = await createRoleItemHandlers(deps as any).PUT(
+      put({ name: "Tổ trưởng", workspaceId: "tanloc", permissions: ["view:meal-order"] }),
+      ctx as any
+    );
+
+    expect(res.status).toBe(403);
+    expect((await res.json()).code).toBe("D1_OUT_OF_SCOPE");
+    expect(updated).toHaveLength(0);
+  });
+
+  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,25 @@ 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;
+
+  // ĐƠN VỊ SỞ HỮU — chỉ ở app multi-tenant. Phân biệt `undefined` (app một tổ
+  // chức, không có khái niệm này) với `null` (có, và là vai trò dùng chung):
+  // gộp hai cái là app cũ tự nhiên mọc thêm huy hiệu "Dùng chung" vô nghĩa.
+  const multiTenant = "workspaceId" in role;
+  // Người không sửa được đã có nhãn riêng ở trên rồi, đừng dán hai huy hiệu
+  // cùng nghĩa cạnh nhau.
+  const ownerLabel =
+    multiTenant && !readOnlyLabel
+      ? (role.workspaceName ?? (role.workspaceId ? "Đơn vị khác" : "Dùng chung"))
+      : null;
 
   const handleEdit = useCallback(() => {
     router.push(`/${lang}/roles/${role.id}/edit`);
@@ -77,21 +96,45 @@ 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>
+            )}
+            {ownerLabel && (
+              <Badge
+                variant="outline"
+                className="bg-muted text-muted-foreground border-border text-[10px] px-2 py-0 h-5 font-semibold max-w-[9rem] truncate"
+                title={
+                  role.workspaceId
+                    ? "Đơn vị sở hữu vai trò — chỉ quản trị đơn vị này sửa được"
+                    : "Vai trò dùng chung — mọi đơn vị đều gán được, chỉ cấp vận hành sửa"
+                }
+              >
+                {ownerLabel}
+              </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 +162,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 +184,7 @@ export const RoleCard = memo(function RoleCard({
               Chép
             </Button>
           )}
-          {canDelete && (
+          {canDelete && managed && (
             <Button
               variant="outline"
               size="sm"