@goplusvn/core 0.1.78 → 0.1.81

package/src/workspace/components/workspace-tree-panel.tsx

@@ -0,0 +1,369 @@
+"use client";
+
+// Khung TRÁI của trang Không gian làm việc: cơ cấu tổ chức, dạng cây gấp mở
+// được — mỗi nút MỘT DÒNG, mọi dòng cùng một khuôn.
+//
+// Vì sao không còn "khối tổ chức" (mỗi gốc một thẻ có nền màu, tiêu đề to, câu
+// giải thích ba dòng): khuôn đó vẽ nút gốc bằng một ngôn ngữ, nút con bằng một
+// ngôn ngữ khác, nên cây đọc ra thành "một cái thẻ, và mấy dòng dính dưới nó"
+// chứ không phải một cây. Thêm nữa mỗi gốc chiếm gần nửa màn hình cho phần
+// trang trí, trong khi thứ người ta quét mắt tìm chỉ là tên bộ phận.
+//
+// Khuôn mới mượn từ trình duyệt tệp, thứ ai cũng đã đọc quen:
+//   ▾ Toàn hệ thống                      Nút gốc   15 👤
+//     ▾ Nhà ăn Tấn Lộc                   Vận hành   3 👤
+//         Bếp                                       2 👤
+//       Spartronics                    Khách hàng   8 👤
+// Mũi tên gấp mở nói ra quan hệ cha–con rõ hơn mọi mức thụt lề, và gấp lại được
+// nghĩa là cây 60 bộ phận vẫn xem được mà không phải cuộn.
+//
+// Mỗi dòng mang luôn MENU THAO TÁC của chính nó (thêm cấp dưới, sửa, chuyển
+// nhánh, xoá). Trước đây thao tác chỉ nằm ở khung phải sau một nút ba chấm
+// không nhãn — người dùng tìm chức năng xoá không ra. Menu hiện khi rê chuột
+// hoặc khi dòng đang được chọn, nên lúc bình thường cây vẫn sạch.
+
+import * as React from "react";
+
+import {
+  ChevronRight,
+  MoreHorizontal,
+  Pencil,
+  Plus,
+  RotateCcw,
+  Shield,
+  Trash2,
+  Users,
+} from "lucide-react";
+
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../../ui";
+import { cn } from "../../utils";
+import type { WorkspaceTreeNode } from "./workspace-tree-view";
+
+/**
+ * Danh tính của một nút — thứ core KHÔNG tự suy ra được.
+ *
+ * "Đơn vị vận hành" với "khách hàng" trong dữ liệu là hai dòng `workspace` y hệt
+ * nhau; cái phân biệt chúng là quyền `view-all-workspaces` nằm ở tầng vai trò
+ * của từng app. Nên app phải tự nói ra, core chỉ vẽ.
+ */
+export interface WorkspaceOrgAnnotation {
+  /** Huy hiệu cạnh tên, ví dụ "Vận hành" / "Khách hàng". */
+  badge?: string;
+  /** Một câu giải thích phạm vi — hiện ở KHUNG PHẢI, nơi có chỗ để đọc. */
+  hint?: string;
+  /** `brand` = tổ chức của chính mình; `neutral` = tổ chức bên ngoài. */
+  tone?: "brand" | "neutral";
+}
+
+export interface WorkspaceRollup {
+  /** Tổng thành viên của cả nhánh, kể cả nút gốc. */
+  members: number;
+  admins: number;
+  /** Số nút con cháu, KHÔNG tính chính nó. */
+  units: number;
+}
+
+/**
+ * Cộng dồn cả nhánh.
+ *
+ * Dùng cho dòng đã GẤP LẠI: gấp một nhánh có 4 bộ phận mà con số tụt từ 12
+ * xuống 2 thì người dùng tưởng vừa làm mất người. Dòng mở thì hiện số gán trực
+ * tiếp, dòng gấp thì hiện tổng cả nhánh — và nói ra bằng dấu ngoặc.
+ */
+export function rollupCounts(node: WorkspaceTreeNode): WorkspaceRollup {
+  return node.children.reduce<WorkspaceRollup>(
+    (acc, child) => {
+      const sub = rollupCounts(child);
+      return {
+        members: acc.members + sub.members,
+        admins: acc.admins + sub.admins,
+        units: acc.units + sub.units + 1,
+      };
+    },
+    {
+      members: node.memberCount ?? 0,
+      admins: node.adminCount ?? 0,
+      units: 0,
+    },
+  );
+}
+
+/** Giữ nhánh nào có ÍT NHẤT một hậu duệ khớp — cắt cha thì mất ngữ cảnh. */
+export function filterWorkspaceTree(
+  nodes: WorkspaceTreeNode[],
+  term: string,
+): WorkspaceTreeNode[] {
+  const needle = term.trim().toLowerCase();
+  if (!needle) return nodes;
+  const walk = (node: WorkspaceTreeNode): WorkspaceTreeNode | null => {
+    const children = node.children
+      .map(walk)
+      .filter((n): n is WorkspaceTreeNode => n !== null);
+    const hit =
+      node.name.toLowerCase().includes(needle) ||
+      node.code.toLowerCase().includes(needle);
+    if (!hit && children.length === 0) return null;
+    return { ...node, children };
+  };
+  return nodes.map(walk).filter((n): n is WorkspaceTreeNode => n !== null);
+}
+
+/** Mọi id trong cây — để mở sẵn toàn bộ khi đang lọc. */
+function allIds(nodes: WorkspaceTreeNode[]): string[] {
+  return nodes.flatMap((node) => [node.id, ...allIds(node.children)]);
+}
+
+export interface WorkspaceTreeActions {
+  /** `null` = nút này hết cấp, ẩn mục "Thêm…". Chuỗi = nhãn cấp con. */
+  childKindLabel?: (node: WorkspaceTreeNode) => string | null;
+  /** Người dùng có ghi được ĐÚNG nút này không. */
+  canManage?: (node: WorkspaceTreeNode) => boolean;
+  onAddChild?: (node: WorkspaceTreeNode) => void;
+  onEdit?: (node: WorkspaceTreeNode) => void;
+  onMove?: (node: WorkspaceTreeNode) => void;
+  onDelete?: (node: WorkspaceTreeNode) => void;
+  onRestore?: (node: WorkspaceTreeNode) => void;
+}
+
+export interface WorkspaceTreePanelProps extends WorkspaceTreeActions {
+  nodes: WorkspaceTreeNode[];
+  /** Danh tính từng nút, tra theo `code` (không theo id: id đổi theo môi trường). */
+  annotations?: Record<string, WorkspaceOrgAnnotation>;
+  activeId?: string | null;
+  onSelect?: (node: WorkspaceTreeNode) => void;
+  /** Đang lọc: mở sẵn mọi nhánh, vì kết quả khớp thường nằm ở cấp sâu. */
+  expandAll?: boolean;
+}
+
+/** Thụt lề mỗi cấp. Cột trái hẹp — lùi to là tên bộ phận hết chỗ. */
+const INDENT = 1.125;
+
+export function WorkspaceTreePanel({
+  nodes,
+  annotations,
+  activeId,
+  onSelect,
+  expandAll = false,
+  childKindLabel,
+  canManage,
+  onAddChild,
+  onEdit,
+  onMove,
+  onDelete,
+  onRestore,
+}: WorkspaceTreePanelProps) {
+  // Mặc định MỞ HẾT: cây tổ chức của một công ty là vài chục dòng, và người mở
+  // trang này đang đi tìm một bộ phận cụ thể chứ không ngắm cơ cấu. Gấp lại là
+  // việc người dùng chủ động làm khi cây đã dài.
+  const [collapsed, setCollapsed] = React.useState<Set<string>>(new Set());
+
+  const forced = React.useMemo(
+    () => (expandAll ? new Set(allIds(nodes)) : null),
+    [expandAll, nodes],
+  );
+
+  const isOpen = (id: string) => (forced ? true : !collapsed.has(id));
+
+  const toggle = (id: string) =>
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+
+  const renderRow = (
+    node: WorkspaceTreeNode,
+    depth: number,
+  ): React.ReactNode => {
+    const active = activeId === node.id;
+    const hasChildren = node.children.length > 0;
+    const open = isOpen(node.id);
+    const annotation = annotations?.[node.code];
+    const total = rollupCounts(node);
+    // Dòng gấp lại nói TỔNG cả nhánh, dòng mở nói số gán trực tiếp — con số kia
+    // đã nằm ngay dưới ở các dòng con rồi, lặp lại thành cộng hai lần.
+    const showRollup = hasChildren && !open;
+    const members = showRollup ? total.members : (node.memberCount ?? 0);
+    const admins = showRollup ? total.admins : (node.adminCount ?? 0);
+    const manage = canManage?.(node) ?? false;
+    const addLabel = childKindLabel?.(node) ?? null;
+    const inactive = node.isActive === false;
+
+    return (
+      <React.Fragment key={node.id}>
+        <div
+          className={cn(
+            "group relative flex items-center gap-1 pr-1.5 text-sm transition-colors",
+            // Vạch chọn bên trái thay cho nền màu đậm: nền `primary/20` phủ cả
+            // dòng làm cột trái loang một mảng tím, mà đây là danh sách điều
+            // hướng — nó chỉ cần chỉ ra một dòng, không cần hét.
+            active
+              ? "bg-accent font-medium before:absolute before:inset-y-0 before:left-0 before:w-0.5 before:bg-primary"
+              : "hover:bg-muted/60",
+            inactive && "opacity-55",
+          )}
+          style={{ paddingLeft: `${0.375 + depth * INDENT}rem` }}
+        >
+          {/* Mũi tên là nút RIÊNG, không gộp vào nút chọn: gấp một nhánh để
+              nhìn cho gọn không có nghĩa là muốn mở hồ sơ của nó. */}
+          {hasChildren ? (
+            <button
+              type="button"
+              onClick={() => toggle(node.id)}
+              disabled={Boolean(forced)}
+              aria-label={open ? "Thu gọn" : "Mở rộng"}
+              aria-expanded={open}
+              className="flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-background hover:text-foreground disabled:opacity-40"
+            >
+              <ChevronRight
+                className={cn(
+                  "h-3.5 w-3.5 transition-transform",
+                  open && "rotate-90",
+                )}
+              />
+            </button>
+          ) : (
+            <span aria-hidden className="h-5 w-5 shrink-0" />
+          )}
+
+          <button
+            type="button"
+            onClick={() => onSelect?.(node)}
+            aria-current={active ? "true" : undefined}
+            className="flex min-w-0 flex-1 items-center gap-2 py-1.5 text-left"
+          >
+            <span className="min-w-0 flex-1 truncate">
+              {node.name}
+              {inactive ? (
+                <span className="ml-1.5 text-xs font-normal text-muted-foreground">
+                  (đã ngừng)
+                </span>
+              ) : null}
+            </span>
+
+            {annotation?.badge ? (
+              <span
+                className={cn(
+                  "shrink-0 rounded border px-1.5 py-px text-[10px] font-medium",
+                  annotation.tone === "brand"
+                    ? "border-primary/30 bg-primary/10 text-foreground"
+                    : "border-border bg-muted text-muted-foreground",
+                )}
+              >
+                {annotation.badge}
+              </span>
+            ) : null}
+
+            {/* Có icon người đi kèm chứ không chỉ số trần: dòng nhiều cột mà
+                không có tiêu đề cột thì con số một mình không tự nói ra nó
+                đang đếm cái gì. */}
+            <span
+              className={cn(
+                "flex shrink-0 items-center gap-1 text-xs tabular-nums",
+                active ? "text-foreground" : "text-muted-foreground",
+              )}
+              title={
+                showRollup
+                  ? `${total.members} người cả nhánh`
+                  : `${members} người gán trực tiếp`
+              }
+            >
+              <Users className="h-3.5 w-3.5" />
+              {showRollup ? `(${members})` : members}
+              {admins > 0 ? (
+                <Shield
+                  className="h-3.5 w-3.5 text-primary"
+                  aria-label={`${admins} quản trị`}
+                />
+              ) : null}
+            </span>
+          </button>
+
+          {/* Menu chỉ hiện khi rê chuột / dòng đang chọn / đang focus bàn phím:
+              hiện thường trực thì cả cột đầy dấu ba chấm, mà cột này để đọc cơ
+              cấu là chính. `focus-within` giữ đường đi bằng bàn phím. */}
+          {manage ? (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  title="Thao tác"
+                  className={cn(
+                    "h-6 w-6 shrink-0 p-0 text-muted-foreground opacity-0 focus-visible:opacity-100 group-hover:opacity-100 data-[state=open]:opacity-100",
+                    active && "opacity-100",
+                  )}
+                >
+                  <MoreHorizontal className="h-3.5 w-3.5" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-48">
+                {addLabel && !inactive ? (
+                  <DropdownMenuItem onClick={() => onAddChild?.(node)}>
+                    <Plus className="h-3.5 w-3.5" />
+                    <span className="ml-2">Thêm {addLabel.toLowerCase()}</span>
+                  </DropdownMenuItem>
+                ) : null}
+                <DropdownMenuItem onClick={() => onEdit?.(node)}>
+                  <Pencil className="h-3.5 w-3.5" />
+                  <span className="ml-2">Sửa tên / mã</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => onMove?.(node)}>
+                  <ChevronRight className="h-3.5 w-3.5" />
+                  <span className="ml-2">Chuyển nhánh</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                {inactive ? (
+                  <DropdownMenuItem onClick={() => onRestore?.(node)}>
+                    <RotateCcw className="h-3.5 w-3.5" />
+                    <span className="ml-2">Khôi phục</span>
+                  </DropdownMenuItem>
+                ) : (
+                  // Chữ "Xoá" phải có mặt: người đi tìm chức năng xoá gõ/quét
+                  // mắt tìm đúng chữ đó, "Ngừng hoạt động" họ đọc thành một
+                  // trạng thái nào khác và kết luận là trang không có xoá.
+                  <DropdownMenuItem
+                    className="text-destructive focus:text-destructive"
+                    onClick={() => onDelete?.(node)}
+                  >
+                    <Trash2 className="h-3.5 w-3.5" />
+                    <span className="ml-2">Xoá workspace</span>
+                  </DropdownMenuItem>
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ) : (
+            <span aria-hidden className="h-6 w-6 shrink-0" />
+          )}
+        </div>
+
+        {hasChildren && open ? (
+          // Vạch dọc mọc ra từ tim mũi tên của dòng cha: thụt lề một mình vẫn
+          // đọc được thành các dòng lệch nhau, nhất là khi tên dài rồi bị cắt.
+          <div className="relative">
+            <span
+              aria-hidden
+              className="absolute inset-y-0 w-px bg-border"
+              style={{ left: `${0.375 + depth * INDENT + 0.625}rem` }}
+            />
+            {node.children.map((child) => renderRow(child, depth + 1))}
+          </div>
+        ) : null}
+      </React.Fragment>
+    );
+  };
+
+  return (
+    <div className="overflow-hidden rounded-xl border border-border bg-card py-1">
+      {nodes.map((node) => renderRow(node, 0))}
+    </div>
+  );
+}

package/src/workspace/delegation.ts

@@ -278,6 +278,154 @@ export function assignableRoles<T extends DelegationRole>(
   });
 }
 
+/**
+ * Vai trò đang được TẠO hoặc SỬA — đầu vào của đường quản trị vai trò.
+ *
+ * Khác `DelegationRole` (thứ đã có trong DB, dùng để hỏi "gán đi được không"):
+ * đây là bản nháp người dùng vừa bấm lưu, chưa qua cổng nào.
+ */
+export interface RoleDraft {
+  code: string;
+  /** Bỏ trống = để engine đóng dấu theo nhánh của người tạo. */
+  workspaceId?: string | null;
+  rank?: number | null;
+  isSystem?: boolean;
+  permissions: readonly string[];
+}
+
+/**
+ * Vai trò DÙNG CHUNG (`workspaceId === null`) là của cấp vận hành: admin nhánh
+ * NHÌN thấy để biết mình đang gán gì, nhưng không sửa được — một nhánh sửa thì
+ * mọi đơn vị khác lãnh đủ.
+ */
+export function canManageRole(
+  actor: DelegationActor,
+  role: Pick<DelegationRole, "workspaceId" | "isSystem">,
+): boolean {
+  if (actor.canManageAll) return true;
+  if (role.isSystem) return false;
+  if (!role.workspaceId) return false;
+  return isWorkspaceAdmin(actor.scope, role.workspaceId);
+}
+
+/**
+ * Nhánh mà vai trò mới sẽ mang dấu. Người quản trị nhiều nhánh thì lấy nhánh
+ * mặc định nếu nó nằm trong quyền quản trị, không thì nhánh đầu tiên.
+ */
+export function defaultRoleWorkspaceIdFor(
+  actor: DelegationActor,
+): string | null {
+  if (actor.canManageAll) return null;
+  const { defaultId, adminIds } = actor.scope;
+  if (defaultId && adminIds.includes(defaultId)) return defaultId;
+  return adminIds[0] ?? null;
+}
+
+/**
+ * Cổng đầy đủ cho đường TẠO / SỬA một vai trò (D1 + D2 + D4).
+ *
+ * Đây là lỗ hổng đối xứng với `assertCanCreateUser`: chặn *gán* vai trò mạnh mà
+ * để ngỏ đường *tạo* vai trò mạnh thì admin nhánh chỉ cần đi vòng một bước —
+ * tạo vai trò "Trợ lý" có `role:update` rồi tự gán cho tài khoản mình vừa lập.
+ *
+ * `existing` là vai trò trong DB (null khi tạo mới). Trả về `workspaceId` +
+ * `rank` đã chuẩn hoá để route ghi thẳng, khỏi tự suy lại rồi suy sai.
+ */
+export function assertCanManageRole(
+  actor: DelegationActor,
+  existing: DelegationRole | null,
+  draft: RoleDraft,
+): { workspaceId: string | null; rank: number } {
+  const requestedRank = draft.rank ?? existing?.rank ?? 100;
+
+  if (actor.canManageAll) {
+    return {
+      workspaceId:
+        draft.workspaceId !== undefined
+          ? draft.workspaceId
+          : (existing?.workspaceId ?? null),
+      rank: requestedRank,
+    };
+  }
+
+  if (actor.scope.adminIds.length === 0) {
+    throw new DelegationError(
+      "NO_DELEGATION",
+      "Bạn không được uỷ quyền quản trị workspace nào.",
+    );
+  }
+
+  if (existing && !canManageRole(actor, existing)) {
+    throw new DelegationError(
+      existing.isSystem ? "D4_DANGEROUS_ROLE" : "D1_OUT_OF_SCOPE",
+      existing.isSystem
+        ? `Vai trò "${existing.code}" là vai trò hệ thống — chỉ quản trị toàn hệ thống sửa được.`
+        : `Vai trò "${existing.code}" ${existing.workspaceId ? "thuộc đơn vị ngoài phạm vi của bạn" : "là vai trò dùng chung của cấp trên"} — bạn xem được nhưng không sửa được.`,
+    );
+  }
+
+  if (draft.isSystem) {
+    throw new DelegationError(
+      "D4_DANGEROUS_ROLE",
+      "Không thể đánh dấu vai trò là vai trò hệ thống.",
+    );
+  }
+
+  // Đóng dấu nhánh: vai trò không mang dấu là vai trò DÙNG CHUNG, tức là admin
+  // nhánh vừa tạo ra thứ mà mọi đơn vị khác cũng gán được.
+  const workspaceId =
+    draft.workspaceId ??
+    existing?.workspaceId ??
+    defaultRoleWorkspaceIdFor(actor);
+  if (!workspaceId || !isWorkspaceAdmin(actor.scope, workspaceId)) {
+    throw new DelegationError(
+      "D1_OUT_OF_SCOPE",
+      "Vai trò phải thuộc một đơn vị trong phạm vi quản trị của bạn.",
+    );
+  }
+
+  // D2 lúc TẠO: vai trò yếu hơn chính người tạo. Không có luật này thì họ tạo
+  // vai trò rank 0 rồi nhờ người khác gán ngược lại cho mình.
+  if (requestedRank <= actor.rank) {
+    throw new DelegationError(
+      "D2_EXCEEDS_CEILING",
+      `Vai trò phải có cấp thấp hơn bạn (rank > ${actor.rank}).`,
+    );
+  }
+
+  const dangerous = draft.permissions.filter(isDangerousPermission);
+  if (dangerous.length > 0) {
+    throw new DelegationError(
+      "D4_DANGEROUS_ROLE",
+      `Không thể đưa quyền quản trị hệ thống vào vai trò: ${dangerous.join(", ")}.`,
+    );
+  }
+
+  const exceeded = draft.permissions.filter((p) => !actor.permissions.has(p));
+  if (exceeded.length > 0) {
+    throw new DelegationError(
+      "D2_EXCEEDS_CEILING",
+      `Vai trò chứa quyền bạn không có: ${exceeded.slice(0, 5).join(", ")}${exceeded.length > 5 ? "…" : ""}.`,
+    );
+  }
+
+  return { workspaceId, rank: requestedRank };
+}
+
+/** Cổng cho đường XOÁ vai trò — cùng luật với sửa, không có phần bộ quyền. */
+export function assertCanDeleteRole(
+  actor: DelegationActor,
+  role: DelegationRole,
+): void {
+  if (actor.canManageAll) return;
+  if (!canManageRole(actor, role)) {
+    throw new DelegationError(
+      role.isSystem ? "D4_DANGEROUS_ROLE" : "D1_OUT_OF_SCOPE",
+      `Vai trò "${role.code}" nằm ngoài phạm vi quản trị của bạn — không xoá được.`,
+    );
+  }
+}
+
 /**
  * D2 bản CHẠY — quyền hiệu lực = GIAO của quyền vai trò và trần quyền.
  *

package/src/workspace/index.ts

@@ -97,6 +97,10 @@ export {
   assertNotProtected,
   assertRoleAssignable,
   assignableRoles,
+  canManageRole,
+  defaultRoleWorkspaceIdFor,
+  assertCanManageRole,
+  assertCanDeleteRole,
   applyPermissionCeiling,
   assertBoundaryIntact,
   assertCanUpdateUser,
@@ -107,6 +111,7 @@ export {
   type DelegationTarget,
   type DelegationRole,
   type DelegationChanges,
+  type RoleDraft,
 } from "./delegation";
 
 export {
@@ -125,13 +130,23 @@ export {
 } from "./components/workspace-tree-view";
 
 export {
-  WorkspaceOrgBlock,
+  WorkspaceTreePanel,
   filterWorkspaceTree,
   rollupCounts,
   type WorkspaceOrgAnnotation,
-  type WorkspaceOrgBlockProps,
+  type WorkspaceTreeActions,
+  type WorkspaceTreePanelProps,
   type WorkspaceRollup,
-} from "./components/workspace-org-block";
+} from "./components/workspace-tree-panel";
+
+export {
+  WorkspaceMemberPickerDialog,
+  WorkspaceIdentityLine,
+  type CandidateFilter,
+  type WorkspaceCandidate,
+  type WorkspaceUserIdentity,
+  type WorkspaceMemberPickerDialogProps,
+} from "./components/workspace-member-picker-dialog";
 
 export {
   WorkspaceMembersPanel,