@goplusvn/core 0.1.79 → 0.1.82

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

@@ -121,19 +121,17 @@ export function assertWorkspacesInScope(
   requestedWorkspaceIds: readonly string[],
 ): void {
   if (actor.canManageAll) return;
-  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.",
-    );
-  }
+  
+  // [MODIFIED] Relaxed rule: allow users to operate in workspaces they are members of, 
+  // without requiring explicit 'admin' privileges over them.
   const outside = requestedWorkspaceIds.filter(
-    (id) => !isWorkspaceAdmin(actor.scope, id),
+    (id) => !isWorkspaceAdmin(actor.scope, id) && !actor.scope.memberIds.includes(id),
   );
+  
   if (outside.length > 0) {
     throw new DelegationError(
       "D1_OUT_OF_SCOPE",
-      `Ngoài phạm vi quản trị của bạn: ${outside.join(", ")}.`,
+      `Ngoài phạm vi của bạn: ${outside.join(", ")}. Bạn phải là thành viên hoặc quản trị viên của đơn vị này.`,
     );
   }
 }

package/src/workspace/index.ts

@@ -130,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,

package/src/workspace/pages/workspace-list-page.tsx

@@ -56,12 +56,13 @@ import { cn } from "../../utils";
 import { countTreeNodes } from "../components/workspace-tree-view";
 import type { WorkspaceTreeNode } from "../components/workspace-tree-view";
 import {
-  WorkspaceOrgBlock,
+  WorkspaceTreePanel,
   filterWorkspaceTree,
   rollupCounts,
-} from "../components/workspace-org-block";
-import type { WorkspaceOrgAnnotation } from "../components/workspace-org-block";
+} from "../components/workspace-tree-panel";
+import type { WorkspaceOrgAnnotation } from "../components/workspace-tree-panel";
 import { WorkspaceMembersPanel } from "../components/workspace-members-panel";
+import type { CandidateFilter } from "../components/workspace-members-panel";
 import type { WorkspaceKindConfig } from "../types";
 
 export interface WorkspaceListPageProps {
@@ -83,6 +84,11 @@ export interface WorkspaceListPageProps {
    * bảng chúng là hai dòng y hệt nhau. Bỏ trống thì mọi khối vẽ trung tính.
    */
   rootAnnotations?: Record<string, WorkspaceOrgAnnotation>;
+  /**
+   * Trục lọc cho chế độ gán hàng loạt ở panel thành viên (chi nhánh, bộ phận…).
+   * Bỏ trống thì panel giữ nguyên hành vi thêm từng người một.
+   */
+  memberFilters?: CandidateFilter[];
 }
 
 interface FormState {
@@ -182,6 +188,7 @@ export function WorkspaceListPage({
   apiEndpoint = "/api/workspaces",
   title = "Workspace",
   rootAnnotations,
+  memberFilters,
 }: WorkspaceListPageProps) {
   const [tree, setTree] = React.useState(initialTree);
   const [search, setSearch] = React.useState("");
@@ -386,11 +393,44 @@ export function WorkspaceListPage({
     if (!deactivating) return;
     const ok = await submit(`${apiEndpoint}/${deactivating.id}`, "DELETE");
     if (ok) {
-      toast.success("Đã ngừng hoạt động cả nhánh.");
+      toast.success("Đã xoá cả nhánh khỏi danh sách đang dùng.");
       setDeactivating(null);
     }
   };
 
+  /** Bật lại một nhánh đã xoá — cùng đường PATCH, đi cả nhánh ở phía server. */
+  const restore = async (node: WorkspaceTreeNode) => {
+    const ok = await submit(`${apiEndpoint}/${node.id}`, "PATCH", {
+      isActive: true,
+    });
+    if (ok) toast.success("Đã khôi phục cả nhánh.");
+  };
+
+  /** Nút nào người đang đăng nhập ghi được — dùng cho menu trên từng dòng cây. */
+  const canManageNode = React.useCallback(
+    (node: WorkspaceTreeNode) =>
+      canManageAll || (adminIds ?? []).includes(node.id),
+    [canManageAll, adminIds],
+  );
+
+  const openEdit = React.useCallback(
+    (node: WorkspaceTreeNode) =>
+      setForm({
+        mode: "edit",
+        id: node.id,
+        parentId: null,
+        code: node.code,
+        name: node.name,
+        kind: node.kind ?? kinds[0]?.key ?? "unit",
+      }),
+    [kinds],
+  );
+
+  const openMove = React.useCallback((node: WorkspaceTreeNode) => {
+    setMoving(node);
+    setMoveTarget("__root__");
+  }, []);
+
   // Không cho chuyển vào chính mình hay con cháu — chặn ở dropdown luôn cho gọn.
   const moveOptions = React.useMemo(() => {
     if (!moving) return [];
@@ -438,7 +478,7 @@ export function WorkspaceListPage({
         ) : null}
       </RbacPageBar>
 
-      <div className="grid gap-3 lg:mx-3 lg:grid-cols-[minmax(0,20rem)_minmax(0,1fr)] lg:items-start">
+      <div className="grid gap-3 lg:mx-3 lg:grid-cols-[minmax(0,23rem)_minmax(0,1fr)] lg:items-start">
         {/* KHUNG TRÁI — điều hướng. Ô tìm kiếm ở đây chứ không ở đầu trang: nó
             lọc cây, không lọc thứ đang mở bên phải. */}
         <div
@@ -507,16 +547,22 @@ export function WorkspaceListPage({
               ) : null}
             </div>
           ) : (
-            visibleRoots.map((root) => (
-              <WorkspaceOrgBlock
-                key={root.id}
-                root={root}
-                annotation={rootAnnotations?.[root.code]}
-                activeId={selectedId}
-                onSelect={selectNode}
-                childKindLabel={addChildLabelOf}
-              />
-            ))
+            <WorkspaceTreePanel
+              nodes={visibleRoots}
+              annotations={rootAnnotations}
+              activeId={selectedId}
+              onSelect={selectNode}
+              // Đang lọc thì mở hết: nút khớp thường nằm ở cấp sâu, để nguyên
+              // trạng thái gấp thì người dùng gõ đúng tên mà màn hình không đổi.
+              expandAll={Boolean(search)}
+              childKindLabel={addChildLabelOf}
+              canManage={canManageNode}
+              onAddChild={openCreate}
+              onEdit={openEdit}
+              onMove={openMove}
+              onDelete={setDeactivating}
+              onRestore={(node) => void restore(node)}
+            />
           )}
         </div>
 
@@ -607,38 +653,32 @@ export function WorkspaceListPage({
                         </DropdownMenuTrigger>
                         <DropdownMenuContent align="end">
                           <DropdownMenuItem
-                            onClick={() =>
-                              setForm({
-                                mode: "edit",
-                                id: selected.id,
-                                parentId: null,
-                                code: selected.code,
-                                name: selected.name,
-                                kind: selected.kind ?? kinds[0]?.key ?? "unit",
-                              })
-                            }
+                            onClick={() => openEdit(selected)}
                           >
-                            Sửa thông tin
+                            Sửa tên / mã
                           </DropdownMenuItem>
-                          <DropdownMenuItem
-                            onClick={() => {
-                              setMoving(selected);
-                              setMoveTarget("__root__");
-                            }}
-                          >
+                          <DropdownMenuItem onClick={() => openMove(selected)}>
                             Chuyển nhánh
                           </DropdownMenuItem>
-                          {selected.isActive !== false ? (
-                            <>
-                              <DropdownMenuSeparator />
-                              <DropdownMenuItem
-                                className="text-destructive focus:text-destructive"
-                                onClick={() => setDeactivating(selected)}
-                              >
-                                Ngừng hoạt động
-                              </DropdownMenuItem>
-                            </>
-                          ) : null}
+                          <DropdownMenuSeparator />
+                          {selected.isActive === false ? (
+                            <DropdownMenuItem
+                              onClick={() => void restore(selected)}
+                            >
+                              Khôi phục
+                            </DropdownMenuItem>
+                          ) : (
+                            // Chữ "Xoá" phải có mặt: người đi tìm chức năng xoá
+                            // 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 rồi kết luận là
+                            // trang không có xoá.
+                            <DropdownMenuItem
+                              className="text-destructive focus:text-destructive"
+                              onClick={() => setDeactivating(selected)}
+                            >
+                              Xoá workspace
+                            </DropdownMenuItem>
+                          )}
                         </DropdownMenuContent>
                       </DropdownMenu>
                     </div>
@@ -652,6 +692,16 @@ export function WorkspaceListPage({
                 </div>
 
                 <StatStrip items={stats} />
+
+                {/* Câu giải thích phạm vi ở ĐÂY chứ không trên cây: cột trái
+                    là danh sách để quét mắt, một đoạn ba dòng chen giữa các
+                    dòng làm mất luôn nhịp đọc. Bên này đang nói về đúng một
+                    nút nên có chỗ. */}
+                {rootAnnotations?.[selected.code]?.hint ? (
+                  <p className="text-[13px] leading-relaxed text-muted-foreground">
+                    {rootAnnotations[selected.code].hint}
+                  </p>
+                ) : null}
               </div>
 
               <WorkspaceMembersPanel
@@ -662,6 +712,12 @@ export function WorkspaceListPage({
                 canManage={canManageSelected}
                 apiEndpoint={apiEndpoint}
                 onCountChange={applyMemberCount}
+                bulkFilters={memberFilters}
+                // Cây làm phẳng: hộp thêm thành viên lọc được "đang ở bộ phận
+                // nào", trục mà người dùng thật sự dùng ("chuyển cả tổ QC sang
+                // Kho"). Cây đầy đủ chứ không phải cây đã lọc — ô tìm bên trái
+                // lọc cây điều hướng, không lọc bộ lọc của hộp thoại.
+                workspaceOptions={flat}
               />
             </>
           ) : (
@@ -791,9 +847,13 @@ export function WorkspaceListPage({
       <ConfirmDialog
         open={deactivating !== null}
         onOpenChange={(open) => !open && setDeactivating(null)}
-        title="Ngừng hoạt động workspace?"
-        description={`"${deactivating?.name}" và toàn bộ cấp dưới sẽ ngừng hoạt động. Dữ liệu cũ giữ nguyên, không bị xóa.`}
-        confirmText="Ngừng hoạt động"
+        title="Xoá workspace?"
+        // Nói rõ đây là xoá MỀM: dữ liệu cũ tham chiếu tới nút này (chứng từ,
+        // hồ sơ) vẫn còn nguyên phạm vi, và khôi phục lại được — nếu không nói
+        // ra thì người dùng hoặc sợ không dám bấm, hoặc bấm xong tưởng mất dữ
+        // liệu thật.
+        description={`"${deactivating?.name}" và toàn bộ cấp dưới sẽ bị gỡ khỏi danh sách đang dùng. Dữ liệu cũ giữ nguyên và khôi phục lại được.`}
+        confirmText="Xoá"
         variant="destructive"
         onConfirm={confirmDeactivate}
       />