@goplusvn/core 0.1.76 → 0.1.78

package/src/workspace/components/workspace-org-block.tsx

@@ -0,0 +1,293 @@
+"use client";
+
+// Khung TRÁI của trang workspace: mỗi tổ chức là một khối, mỗi bộ phận là một
+// dòng chọn được. Chọn dòng nào thì khung PHẢI mở hồ sơ của dòng đó.
+//
+// Vì sao không phải cây thư mục: cây chỉ diễn tả được quan hệ "cha–con". Ở đây
+// hai nút gốc không cùng loại — một bên là đơn vị VẬN HÀNH (thấy mọi tổ chức),
+// bên kia là KHÁCH HÀNG (bị kẹp trong nhánh của mình). Vẽ cả hai bằng đúng một
+// kiểu dòng thụt lề thì người xem không đọc ra sự khác nhau đó, mà đây lại là
+// điều quan trọng nhất trên màn hình này.
+//
+// Vì sao khối này chỉ ĐIỀU HƯỚNG, không mang nút thao tác: cột trái hẹp, nhồi
+// thêm mã, cấp, nút "+", menu ba chấm vào từng dòng thì tên bộ phận — thứ duy
+// nhất người ta quét mắt tìm — bị ép còn vài chữ. Mã, cấp, nút bấm nằm ở khung
+// phải, nơi đang nói về đúng một nút và có đủ chỗ.
+
+import * as React from "react";
+
+import { Building2, Shield, Users } from "lucide-react";
+
+import { cn } from "../../utils";
+import type { WorkspaceTreeNode } from "./workspace-tree-view";
+
+/**
+ * Danh tính của một tổ chức gốc — 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 dưới dòng số liệu. */
+  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 WorkspaceOrgBlockProps {
+  root: WorkspaceTreeNode;
+  annotation?: WorkspaceOrgAnnotation;
+  /** Nút đang mở ở khung phải. */
+  activeId?: string | null;
+  onSelect?: (node: WorkspaceTreeNode) => void;
+  /**
+   * Nhãn cấp dưới của một nút, hoặc `null` nếu nút đó hết cấp — chỉ dùng để
+   * viết đúng chữ ("3 bộ phận" chứ không phải "3 cấp dưới"). Luật cấp nằm ở
+   * `kinds` của app nên trang cha quyết, khối chỉ hỏi.
+   */
+  childKindLabel?: (node: WorkspaceTreeNode) => string | null;
+}
+
+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.
+ *
+ * Con số ở tiêu đề khối phải là TỔNG, không phải số gán trực tiếp vào nút gốc:
+ * "Spartronics 2 người" trong khi ba bộ phận bên dưới có thêm 4 người nữa là
+ * câu trả lời sai cho câu hỏi người ta thực sự hỏi ("công ty này bao nhiêu
+ * người dùng?"). Số trực tiếp vẫn còn, nằm ở từng dòng.
+ */
+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);
+}
+
+/**
+ * Ô "2 người" ở cuối mỗi dòng.
+ *
+ * Có icon người đi kèm chứ không chỉ số trần: đây là dòng nhiều cột mà không có
+ * tiêu đề cột, con số một mình thì không tự nói ra nó đang đếm cái gì.
+ */
+function MemberStat({
+  members,
+  admins,
+  active,
+}: {
+  members: number;
+  admins: number;
+  active?: boolean;
+}) {
+  return (
+    <span
+      className={cn(
+        "flex shrink-0 items-center gap-1.5 text-xs",
+        active ? "text-foreground" : "text-muted-foreground",
+      )}
+    >
+      <Users className="h-3.5 w-3.5" />
+      <span className="tabular-nums">{members}</span>
+      {admins > 0 ? (
+        <Shield
+          className="h-3.5 w-3.5 text-primary"
+          aria-label={`${admins} quản trị`}
+        />
+      ) : null}
+    </span>
+  );
+}
+
+export function WorkspaceOrgBlock({
+  root,
+  annotation,
+  activeId,
+  onSelect,
+  childKindLabel,
+}: WorkspaceOrgBlockProps) {
+  const total = React.useMemo(() => rollupCounts(root), [root]);
+  const brand = annotation?.tone === "brand";
+  const rootChildLabel = childKindLabel?.(root) ?? null;
+  const rootActive = activeId === root.id;
+
+  const renderRow = (
+    node: WorkspaceTreeNode,
+    depth: number,
+  ): React.ReactNode => {
+    const active = activeId === node.id;
+
+    return (
+      <React.Fragment key={node.id}>
+        <button
+          type="button"
+          onClick={() => onSelect?.(node)}
+          aria-current={active ? "true" : undefined}
+          className={cn(
+            "flex w-full items-center gap-2 border-t border-border/60 py-2 pr-3 text-left text-sm transition-colors",
+            // Nền đậm hơn + chữ đậm, KHÔNG tô chữ bằng `text-primary`: ở chế độ
+            // tối màu primary ngả xanh lợt, chữ chìm hẳn. `/20` chứ không `/10`:
+            // trên nền tối, 10% primary gần như không phân biệt được với dòng
+            // thường.
+            active ? "bg-primary/20 font-medium" : "hover:bg-muted/50",
+            node.isActive === false && "opacity-55",
+          )}
+          style={{ paddingLeft: `${0.75 + depth * 1.25}rem` }}
+        >
+          <span className="min-w-0 flex-1 truncate">
+            {node.name}
+            {node.isActive === false ? (
+              <span className="ml-1.5 text-xs font-normal text-muted-foreground">
+                (ngừng)
+              </span>
+            ) : null}
+          </span>
+          <MemberStat
+            members={node.memberCount ?? 0}
+            admins={node.adminCount ?? 0}
+            active={active}
+          />
+        </button>
+
+        {node.children.map((child) => renderRow(child, depth + 1))}
+      </React.Fragment>
+    );
+  };
+
+  return (
+    <section
+      className={cn(
+        "overflow-hidden rounded-xl border bg-card",
+        brand ? "border-primary/25" : "border-border",
+        root.isActive === false && "opacity-60",
+      )}
+    >
+      {/* Cả đầu khối là một nút: tổ chức gốc cũng gán thành viên trực tiếp
+          được, nên nó phải chọn được hệt như bộ phận bên dưới. */}
+      <button
+        type="button"
+        onClick={() => onSelect?.(root)}
+        aria-current={rootActive ? "true" : undefined}
+        className={cn(
+          "flex w-full items-start gap-3 px-3 py-3 text-left transition-colors",
+          rootActive
+            ? "bg-primary/20"
+            : brand
+              ? "bg-primary/10 hover:bg-primary/20"
+              : "bg-muted/30 hover:bg-muted/60",
+        )}
+      >
+        <span
+          aria-hidden
+          className={cn(
+            "mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg",
+            brand
+              ? "bg-primary/15 text-primary"
+              : "bg-background text-muted-foreground ring-1 ring-border",
+          )}
+        >
+          <Building2 className="h-4 w-4" />
+        </span>
+
+        <span className="min-w-0 flex-1">
+          <span className="flex flex-wrap items-center gap-x-2 gap-y-1">
+            <span className="truncate text-[15px] font-semibold">
+              {root.name}
+            </span>
+            {annotation?.badge ? (
+              <span
+                className={cn(
+                  "inline-flex shrink-0 items-center rounded-full border px-2 py-0.5 text-[11px] font-medium",
+                  // Chữ `foreground` chứ không `primary`: nhãn này phải đọc
+                  // được ở cả hai chế độ, sắc thái brand để nền và viền lo.
+                  brand
+                    ? "border-primary/40 bg-primary/20 text-foreground"
+                    : "border-border bg-background text-muted-foreground",
+                )}
+              >
+                {annotation.badge}
+              </span>
+            ) : null}
+            {root.isActive === false ? (
+              <span className="text-xs text-muted-foreground">
+                (đã ngừng hoạt động)
+              </span>
+            ) : null}
+          </span>
+
+          {/* Số ở đây là TỔNG cả nhánh, số trên từng dòng là số trực tiếp. Nói
+              rõ "cả nhánh" khi có cấp dưới, không thì hai con số khác nhau trên
+              cùng màn hình mà không ai biết vì sao. */}
+          <span className="mt-0.5 flex flex-wrap items-center gap-x-2 text-xs text-muted-foreground">
+            <span className="tabular-nums">
+              {total.members} người{total.units > 0 ? " cả nhánh" : ""}
+            </span>
+            <span aria-hidden>·</span>
+            <span className="tabular-nums">{total.admins} quản trị</span>
+            <span aria-hidden>·</span>
+            <span className="tabular-nums">
+              {total.units} {(rootChildLabel ?? "cấp dưới").toLowerCase()}
+            </span>
+          </span>
+
+          {annotation?.hint ? (
+            <span className="mt-1 block text-xs leading-relaxed text-muted-foreground">
+              {annotation.hint}
+            </span>
+          ) : null}
+        </span>
+      </button>
+
+      {root.children.length > 0 ? (
+        <div>{root.children.map((child) => renderRow(child, 0))}</div>
+      ) : (
+        // Rỗng phải nói ra HỆ QUẢ, không chỉ báo trống: chưa có cấp dưới nghĩa
+        // là mọi người của tổ chức này dùng chung một phạm vi dữ liệu.
+        <p className="border-t border-border/60 px-3 py-2.5 text-xs text-muted-foreground">
+          Chưa chia {(rootChildLabel ?? "cấp dưới").toLowerCase()} — cả{" "}
+          {total.members} người dùng chung một phạm vi dữ liệu.
+        </p>
+      )}
+    </section>
+  );
+}

package/src/workspace/components/workspace-switcher.tsx

@@ -33,7 +33,7 @@ export interface WorkspaceOption {
 
 export interface WorkspaceSwitcherProps {
   options: WorkspaceOption[];
-  /** `null` = "Tất cả không gian" (chỉ hiện khi `allowAll`). */
+  /** `null` = "Tất cả workspace" (chỉ hiện khi `allowAll`). */
   value: string | null;
   onChange: (workspaceId: string | null) => void;
   /** Cho chọn "Tất cả" — chỉ bật cho người có quyền xem toàn bộ. */
@@ -47,7 +47,7 @@ export function WorkspaceSwitcher({
   value,
   onChange,
   allowAll = false,
-  allLabel = "Tất cả không gian",
+  allLabel = "Tất cả workspace",
   className,
 }: WorkspaceSwitcherProps) {
   const [open, setOpen] = React.useState(false);

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

@@ -38,6 +38,15 @@ export interface WorkspaceTreeNode {
 
 export interface WorkspaceTreeViewProps {
   nodes: WorkspaceTreeNode[];
+  /**
+   * `nav` — cột điều hướng hẹp: chỉ tên + số thành viên, mọi thao tác nằm ở
+   * vùng chi tiết bên phải. `board` — bảng đầy đủ (mã, cấp, menu từng dòng).
+   *
+   * Cây tổ chức thường chỉ vài chục dòng còn danh sách người có thể hàng trăm;
+   * nhồi mã + nhãn cấp + hai con số vào cột hẹp thì cột nào cũng cụt và không có
+   * tiêu đề để hiểu con số đang đọc là gì.
+   */
+  variant?: "nav" | "board";
   /** Nhánh người dùng được uỷ quyền quản trị (đã bung con cháu). */
   adminIds?: string[];
   /** Xem-tất: mọi nút đều thao tác được. */
@@ -83,6 +92,7 @@ function collectIds(nodes: WorkspaceTreeNode[], out: Set<string>): Set<string> {
 
 export function WorkspaceTreeView({
   nodes,
+  variant = "board",
   adminIds,
   canManageAll = false,
   selectedId,
@@ -92,7 +102,7 @@ export function WorkspaceTreeView({
   onMove,
   onDeactivate,
   search = "",
-  emptyMessage = "Chưa có không gian nào.",
+  emptyMessage = "Chưa có workspace nào.",
 }: WorkspaceTreeViewProps) {
   const visible = React.useMemo(
     () => filterTree(nodes, search),
@@ -120,25 +130,42 @@ export function WorkspaceTreeView({
   if (visible.length === 0) {
     return (
       <p className="px-4 py-10 text-center text-sm text-muted-foreground">
-        {searching ? "Không có không gian nào khớp." : emptyMessage}
+        {searching ? "Không có workspace nào khớp." : emptyMessage}
       </p>
     );
   }
 
+  const nav = variant === "nav";
+
   const render = (node: WorkspaceTreeNode, depth: number): React.ReactNode => {
     const hasChildren = node.children.length > 0;
     const isOpen = searching || !collapsed.has(node.id);
     const manageable = canManage(node.id);
+    const isSelected = selectedId === node.id;
 
     return (
       <React.Fragment key={node.id}>
         <div
           className={cn(
-            "group flex items-center gap-2 border-b border-border/60 px-2 py-1.5 text-sm transition-colors last:border-b-0",
-            selectedId === node.id ? "bg-muted" : "hover:bg-muted/50",
+            "group flex items-center gap-2 text-sm transition-colors",
+            nav
+              ? // Cột điều hướng: dòng bo góc rời nhau, không kẻ ngang — kẻ ngang
+                // làm nó trông như bảng dữ liệu và người dùng chờ có tiêu đề cột.
+                "mx-1 rounded-md px-2 py-1.5"
+              : "border-b border-border/60 px-2 py-1.5 last:border-b-0",
+            isSelected
+              ? // Đang chọn phải NHÌN RA ngay: nền đậm + chữ đậm. `bg-muted` một
+                // mình quá nhạt, người dùng không biết panel bên phải đang nói về
+                // dòng nào.
+                "bg-primary/10 font-medium text-foreground"
+              : "hover:bg-muted/60",
             node.isActive === false && "opacity-55",
           )}
-          style={{ paddingLeft: `${0.5 + depth * 1.25}rem` }}
+          style={{
+            paddingLeft: nav
+              ? `${0.5 + depth * 0.875}rem`
+              : `${0.5 + depth * 1.25}rem`,
+          }}
         >
           {hasChildren ? (
             <button
@@ -171,31 +198,45 @@ export function WorkspaceTreeView({
             ) : null}
           </button>
 
-          <span className="hidden shrink-0 text-xs tabular-nums text-muted-foreground sm:inline">
-            {node.code}
-          </span>
-
-          {node.kindLabel ? (
-            <Badge variant="outline" className="hidden shrink-0 md:inline-flex">
-              {node.kindLabel}
-            </Badge>
+          {!nav ? (
+            <>
+              <span className="hidden shrink-0 text-xs tabular-nums text-muted-foreground sm:inline">
+                {node.code}
+              </span>
+              {node.kindLabel ? (
+                <Badge
+                  variant="outline"
+                  className="hidden shrink-0 md:inline-flex"
+                >
+                  {node.kindLabel}
+                </Badge>
+              ) : null}
+            </>
           ) : null}
 
           {node.memberCount !== undefined ? (
-            <span
-              className="w-16 shrink-0 text-right text-xs tabular-nums text-muted-foreground"
-              title={
-                node.adminCount !== undefined
-                  ? `${node.memberCount} thành viên, ${node.adminCount} quản trị`
-                  : `${node.memberCount} thành viên`
-              }
-            >
-              {node.memberCount}
-              {node.adminCount ? ` · ${node.adminCount}` : ""}
+            // Con số trần giữa dòng không nói được nó là gì. Ở cột hẹp thì kèm
+            // luôn đơn vị; số quản trị đã có ở vùng chi tiết, không nhồi tiếp.
+            <span className="shrink-0 text-xs tabular-nums text-muted-foreground">
+              {nav ? (
+                <>{node.memberCount} người</>
+              ) : (
+                <span
+                  className="inline-block w-16 text-right"
+                  title={
+                    node.adminCount !== undefined
+                      ? `${node.memberCount} thành viên, ${node.adminCount} quản trị`
+                      : `${node.memberCount} thành viên`
+                  }
+                >
+                  {node.memberCount}
+                  {node.adminCount ? ` · ${node.adminCount}` : ""}
+                </span>
+              )}
             </span>
           ) : null}
 
-          {manageable ? (
+          {manageable && !nav ? (
             <div className="flex shrink-0 items-center opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100">
               {onAddChild ? (
                 <Button
@@ -203,7 +244,7 @@ export function WorkspaceTreeView({
                   size="icon"
                   className="h-7 w-7"
                   onClick={() => onAddChild(node)}
-                  title="Thêm không gian con"
+                  title="Thêm workspace con"
                 >
                   <Plus className="h-3.5 w-3.5" />
                 </Button>

package/src/workspace/delegation.ts

@@ -124,7 +124,7 @@ export function assertWorkspacesInScope(
   if (actor.scope.adminIds.length === 0) {
     throw new DelegationError(
       "NO_DELEGATION",
-      "Bạn không được uỷ quyền quản trị không gian nào.",
+      "Bạn không được uỷ quyền quản trị workspace nào.",
     );
   }
   const outside = requestedWorkspaceIds.filter(
@@ -152,7 +152,7 @@ export function assertNotSelf(
   if (actor.userId === targetUserId) {
     throw new DelegationError(
       "D3_SELF_ESCALATION",
-      "Không thể tự sửa vai trò hoặc không gian của chính mình.",
+      "Không thể tự sửa vai trò hoặc workspace của chính mình.",
     );
   }
 }
@@ -176,13 +176,13 @@ export function assertFullyOwned(
   if (outside.length > 0) {
     throw new DelegationError(
       "D5_NOT_FULLY_OWNED",
-      "Người dùng này còn thuộc không gian ngoài phạm vi của bạn — bạn xem được nhưng không sửa được.",
+      "Người dùng này còn thuộc workspace ngoài phạm vi của bạn — bạn xem được nhưng không sửa được.",
     );
   }
   if (target.workspaceIds.length === 0) {
     throw new DelegationError(
       "D5_NOT_FULLY_OWNED",
-      "Người dùng này chưa thuộc không gian nào nên không nằm trong phạm vi quản trị của bạn.",
+      "Người dùng này chưa thuộc workspace nào nên không nằm trong phạm vi quản trị của bạn.",
     );
   }
 }
@@ -258,7 +258,7 @@ export function assertRoleAssignable(
   if (role.workspaceId && !isWorkspaceAdmin(actor.scope, role.workspaceId)) {
     throw new DelegationError(
       "D1_OUT_OF_SCOPE",
-      `Vai trò "${role.code}" thuộc không gian ngoài phạm vi của bạn.`,
+      `Vai trò "${role.code}" thuộc workspace ngoài phạm vi của bạn.`,
     );
   }
 }
@@ -354,7 +354,7 @@ export function assertBoundaryIntact(
     if (removed.length > 0) {
       throw new DelegationError(
         "D7_BOUNDARY_TAMPER",
-        "Không thể gỡ người dùng khỏi không gian nằm ngoài phạm vi quản trị của bạn.",
+        "Không thể gỡ người dùng khỏi workspace nằm ngoài phạm vi quản trị của bạn.",
       );
     }
   }
@@ -388,7 +388,7 @@ export function assertCanCreateUser(
   if (!actor.canManageAll && workspaceIds.length === 0) {
     throw new DelegationError(
       "D1_OUT_OF_SCOPE",
-      "Phải chọn ít nhất một không gian trong phạm vi quản trị của bạn.",
+      "Phải chọn ít nhất một workspace trong phạm vi quản trị của bạn.",
     );
   }
   for (const role of roles) assertRoleAssignable(actor, role);

package/src/workspace/index.ts

@@ -112,6 +112,7 @@ export {
 export {
   createWorkspaceCollectionHandlers,
   createWorkspaceItemHandlers,
+  createWorkspaceMemberHandlers,
   createWorkspaceMoveHandler,
   type WorkspaceHandlerDeps,
 } from "./route-handlers";
@@ -123,6 +124,21 @@ export {
   type WorkspaceTreeViewProps,
 } from "./components/workspace-tree-view";
 
+export {
+  WorkspaceOrgBlock,
+  filterWorkspaceTree,
+  rollupCounts,
+  type WorkspaceOrgAnnotation,
+  type WorkspaceOrgBlockProps,
+  type WorkspaceRollup,
+} from "./components/workspace-org-block";
+
+export {
+  WorkspaceMembersPanel,
+  type WorkspaceMember,
+  type WorkspaceMembersPanelProps,
+} from "./components/workspace-members-panel";
+
 export {
   WorkspaceSwitcher,
   type WorkspaceOption,