@goplusvn/core 0.1.75 → 0.1.77

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

@@ -0,0 +1,802 @@
+"use client";
+
+// Trang "Workspace" — hai khung: TRÁI chọn nơi, PHẢI làm việc với nơi đó.
+//
+// Vì sao hai khung: trang này trả lời hai câu hỏi khác cấp nhau — "cơ cấu tổ
+// chức trông ra sao" và "trong bộ phận này có ai". Nhét cả hai vào một cột thì
+// mở người lên là cơ cấu bị đẩy khuất, mà so hai bộ phận lại phải nhớ bằng đầu.
+// Tách ra: cột trái luôn còn nguyên để đối chiếu và nhảy qua lại, cột phải chỉ
+// nói về đúng một nút nên có chỗ cho mã, cấp, số liệu, nút thao tác và danh
+// sách người — không phải bóp lại cho vừa một dòng.
+//
+// Dùng lại khung `RbacPageBar` của các trang RBAC thay vì tự dựng bar riêng:
+// đây là trang quản trị cùng họ, lệch khung một chút là người dùng nhận ra ngay
+// (L1 — tái dùng, không hand-roll).
+//
+// API contract: GET/POST `/api/workspaces`, PATCH/DELETE `/api/workspaces/:id`,
+// POST `/api/workspaces/:id/move`.
+import * as React from "react";
+
+import {
+  ChevronRight,
+  MoreHorizontal,
+  Network,
+  Plus,
+  Search,
+  X,
+} from "lucide-react";
+import { toast } from "sonner";
+
+import {
+  Badge,
+  Button,
+  ConfirmDialog,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Skeleton,
+} from "../../ui";
+import { RbacPageBar } from "../../rbac/pages/lib/rbac-page-shell";
+import { cn } from "../../utils";
+import { countTreeNodes } from "../components/workspace-tree-view";
+import type { WorkspaceTreeNode } from "../components/workspace-tree-view";
+import {
+  WorkspaceOrgBlock,
+  filterWorkspaceTree,
+  rollupCounts,
+} from "../components/workspace-org-block";
+import type { WorkspaceOrgAnnotation } from "../components/workspace-org-block";
+import { WorkspaceMembersPanel } from "../components/workspace-members-panel";
+import type { WorkspaceKindConfig } from "../types";
+
+export interface WorkspaceListPageProps {
+  /** Cây đã dựng sẵn ở server (`buildTree`) — trang này không tự gọi API lần đầu. */
+  initialTree: WorkspaceTreeNode[];
+  /** Nhãn cấp của app; rỗng = ẩn ô chọn cấp, mọi nút cùng một loại. */
+  kinds?: WorkspaceKindConfig[];
+  /** Nhánh người dùng được uỷ quyền quản trị (đã bung con cháu). */
+  adminIds?: string[];
+  canManageAll?: boolean;
+  canCreate?: boolean;
+  apiEndpoint?: string;
+  title?: string;
+  /**
+   * Danh tính từng tổ chức gốc, tra theo `code` (không theo id: id đổi theo môi
+   * trường, mã thì không).
+   *
+   * Core không tự biết gốc nào là bên vận hành, gốc nào là khách hàng — trong
+   * 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>;
+}
+
+interface FormState {
+  mode: "create" | "edit";
+  id?: string;
+  parentId: string | null;
+  parentName?: string;
+  code: string;
+  name: string;
+  kind: string;
+}
+
+/** Nhãn con hợp lệ dưới một nút — theo `childKinds` của cấp cha. */
+function allowedChildKinds(
+  kinds: WorkspaceKindConfig[],
+  parentKind?: string,
+): WorkspaceKindConfig[] {
+  if (!parentKind) return kinds;
+  const parent = kinds.find((k) => k.key === parentKind);
+  if (!parent?.childKinds) return kinds;
+  return kinds.filter((k) => parent.childKinds?.includes(k.key));
+}
+
+function findNode(
+  nodes: WorkspaceTreeNode[],
+  id: string,
+): WorkspaceTreeNode | null {
+  for (const node of nodes) {
+    if (node.id === id) return node;
+    const hit = findNode(node.children, id);
+    if (hit) return hit;
+  }
+  return null;
+}
+
+/** Đường đi từ gốc tới một nút — để khung phải nói rõ nó đang ở nhánh nào. */
+function pathTo(
+  nodes: WorkspaceTreeNode[],
+  id: string,
+  trail: WorkspaceTreeNode[] = [],
+): WorkspaceTreeNode[] | null {
+  for (const node of nodes) {
+    const next = [...trail, node];
+    if (node.id === id) return next;
+    const hit = pathTo(node.children, id, next);
+    if (hit) return hit;
+  }
+  return null;
+}
+
+/** Làm phẳng cây thành danh sách chọn "chuyển vào nhánh nào". */
+function flatten(
+  nodes: WorkspaceTreeNode[],
+  depth = 0,
+): { id: string; name: string; depth: number }[] {
+  return nodes.flatMap((node) => [
+    { id: node.id, name: node.name, depth },
+    ...flatten(node.children, depth + 1),
+  ]);
+}
+
+/** Nút và toàn bộ con cháu — không cho chuyển một nhánh vào chính nó. */
+function subtreeIds(node: WorkspaceTreeNode): string[] {
+  return [node.id, ...node.children.flatMap(subtreeIds)];
+}
+
+/**
+ * Dải số liệu của nút đang chọn.
+ *
+ * Tách "gán trực tiếp" khỏi "cả nhánh" chứ không gộp một số: hai con số này
+ * lệch nhau là chuyện thường (công ty 2 người, cả nhánh 7 người) và người đọc
+ * chỉ hiểu được nếu nhìn thấy cả hai cạnh nhau có nhãn rõ.
+ */
+function StatStrip({ items }: { items: { label: string; value: number }[] }) {
+  return (
+    // `w-fit` chứ không kéo hết bề ngang: hai ô số kéo giãn ra 700px là 700px
+    // gần như trống, trong khi bảng thành viên ngay dưới mới là phần chính.
+    <dl className="flex w-fit max-w-full flex-wrap divide-x divide-border overflow-hidden rounded-lg border border-border bg-muted/20">
+      {items.map((item) => (
+        <div key={item.label} className="min-w-[6.5rem] px-3 py-2">
+          <dd className="text-base font-semibold tabular-nums">{item.value}</dd>
+          <dt className="mt-0.5 truncate text-[11px] text-muted-foreground">
+            {item.label}
+          </dt>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
+export function WorkspaceListPage({
+  initialTree,
+  kinds = [],
+  adminIds,
+  canManageAll = false,
+  canCreate = false,
+  apiEndpoint = "/api/workspaces",
+  title = "Workspace",
+  rootAnnotations,
+}: WorkspaceListPageProps) {
+  const [tree, setTree] = React.useState(initialTree);
+  const [search, setSearch] = React.useState("");
+  const [busy, setBusy] = React.useState(false);
+  const [selectedId, setSelectedId] = React.useState<string | null>(
+    initialTree[0]?.id ?? null,
+  );
+  const [form, setForm] = React.useState<FormState | null>(null);
+  const [moving, setMoving] = React.useState<WorkspaceTreeNode | null>(null);
+  const [moveTarget, setMoveTarget] = React.useState<string>("");
+  const [deactivating, setDeactivating] =
+    React.useState<WorkspaceTreeNode | null>(null);
+  const detailRef = React.useRef<HTMLDivElement | null>(null);
+
+  const total = React.useMemo(() => countTreeNodes(tree), [tree]);
+
+  /** Tổng người trên toàn cây — con số duy nhất trả lời "hệ thống có bao nhiêu người dùng có phạm vi". */
+  const totalMembers = React.useMemo(
+    () => tree.reduce((sum, root) => sum + rollupCounts(root).members, 0),
+    [tree],
+  );
+
+  const visibleRoots = React.useMemo(
+    () => filterWorkspaceTree(tree, search),
+    [tree, search],
+  );
+
+  const selected = React.useMemo(
+    () => (selectedId ? findNode(tree, selectedId) : null),
+    [tree, selectedId],
+  );
+
+  // Nút đang chọn biến mất (vừa xoá, vừa chuyển nhánh, cây tải lại) thì rơi về
+  // gốc đầu tiên — khung phải trống trơn không nói được gì cho ai.
+  React.useEffect(() => {
+    if (selected) return;
+    setSelectedId(tree[0]?.id ?? null);
+  }, [selected, tree]);
+
+  const canManageSelected =
+    canManageAll || (selected ? (adminIds ?? []).includes(selected.id) : false);
+  const selectedKindLabel = selected
+    ? (selected.kindLabel ?? kinds.find((k) => k.key === selected.kind)?.label)
+    : undefined;
+  const breadcrumb = React.useMemo(
+    () => (selectedId ? (pathTo(tree, selectedId) ?? []) : []),
+    [selectedId, tree],
+  );
+  const selectedRollup = React.useMemo(
+    () => (selected ? rollupCounts(selected) : null),
+    [selected],
+  );
+
+  /**
+   * Nhãn cấp con hợp lệ của một nút, `null` nếu nút đó hết cấp.
+   *
+   * Trả về nhãn chứ không trả `true/false`: nút "Thêm bộ phận" phải gọi đúng
+   * tên cấp mà app đặt. Hết cấp thì ẩn hẳn — mời bấm rồi báo lỗi là cách chắc
+   * chắn làm người dùng tưởng hệ thống hỏng.
+   */
+  const addChildLabelOf = React.useCallback(
+    (node: WorkspaceTreeNode): string | null => {
+      if (kinds.find((k) => k.key === node.kind)?.canHaveChildren === false) {
+        return null;
+      }
+      return allowedChildKinds(kinds, node.kind)[0]?.label ?? null;
+    },
+    [kinds],
+  );
+  const flat = React.useMemo(() => flatten(tree), [tree]);
+
+  const reload = React.useCallback(async () => {
+    const res = await fetch(apiEndpoint, { cache: "no-store" });
+    if (!res.ok) {
+      toast.error("Không tải lại được danh sách workspace.");
+      return;
+    }
+    setTree(await res.json());
+  }, [apiEndpoint]);
+
+  /**
+   * Số thành viên trên cây do khung phải báo về.
+   *
+   * Con số trong `initialTree` là ảnh chụp lúc server render. Thêm/gỡ người chỉ
+   * gọi API members, không đụng gì tới cây, nên nếu không đồng bộ ở đây thì hai
+   * nửa màn hình nói hai con số khác nhau — khung phải "1 thành viên" trong khi
+   * cây bên trái vẫn "0". Cập nhật tại chỗ thay vì `reload()` cả cây: ô tìm
+   * kiếm và vị trí cuộn phải giữ nguyên.
+   */
+  const applyMemberCount = React.useCallback(
+    (workspaceId: string, count: number) => {
+      setTree((prev) => {
+        let changed = false;
+        const walk = (nodes: WorkspaceTreeNode[]): WorkspaceTreeNode[] =>
+          nodes.map((node) => {
+            if (node.id === workspaceId) {
+              if (node.memberCount === count) return node;
+              changed = true;
+              return { ...node, memberCount: count };
+            }
+            if (node.children.length === 0) return node;
+            const children = walk(node.children);
+            return children === node.children ? node : { ...node, children };
+          });
+        const next = walk(prev);
+        return changed ? next : prev;
+      });
+    },
+    [],
+  );
+
+  /**
+   * Chọn một nút.
+   *
+   * Trên màn hẹp hai khung xếp chồng, khung phải nằm dưới màn hình — bấm xong
+   * mà không kéo tới thì trông như không có gì xảy ra.
+   */
+  const selectNode = React.useCallback((node: WorkspaceTreeNode) => {
+    setSelectedId(node.id);
+    if (typeof window !== "undefined" && window.innerWidth < 1024) {
+      detailRef.current?.scrollIntoView({ block: "start" });
+    }
+  }, []);
+
+  /** Mọi lời gọi ghi đi qua đây để thông báo lỗi của server tới thẳng người dùng. */
+  const submit = React.useCallback(
+    async (url: string, method: string, body?: unknown) => {
+      setBusy(true);
+      try {
+        const res = await fetch(url, {
+          method,
+          headers: { "Content-Type": "application/json" },
+          body: body ? JSON.stringify(body) : undefined,
+        });
+        if (!res.ok) {
+          const payload = await res.json().catch(() => null);
+          throw new Error(payload?.error ?? "Thao tác không thành công.");
+        }
+        await reload();
+        return true;
+      } catch (error) {
+        toast.error(
+          error instanceof Error ? error.message : "Thao tác không thành công.",
+        );
+        return false;
+      } finally {
+        setBusy(false);
+      }
+    },
+    [reload],
+  );
+
+  const openCreate = (parent?: WorkspaceTreeNode) => {
+    const options = allowedChildKinds(kinds, parent?.kind);
+    setForm({
+      mode: "create",
+      parentId: parent?.id ?? null,
+      parentName: parent?.name,
+      code: "",
+      name: "",
+      kind: options[0]?.key ?? kinds[0]?.key ?? "unit",
+    });
+  };
+
+  const saveForm = async () => {
+    if (!form) return;
+    if (!form.code.trim() || !form.name.trim()) {
+      toast.error("Mã và tên không được để trống.");
+      return;
+    }
+    const ok =
+      form.mode === "create"
+        ? await submit(apiEndpoint, "POST", {
+            code: form.code.trim(),
+            name: form.name.trim(),
+            kind: form.kind,
+            parentId: form.parentId,
+          })
+        : await submit(`${apiEndpoint}/${form.id}`, "PATCH", {
+            code: form.code.trim(),
+            name: form.name.trim(),
+            kind: form.kind,
+          });
+    if (ok) {
+      toast.success(form.mode === "create" ? "Đã thêm." : "Đã cập nhật.");
+      setForm(null);
+    }
+  };
+
+  const confirmMove = async () => {
+    if (!moving) return;
+    const ok = await submit(`${apiEndpoint}/${moving.id}/move`, "POST", {
+      newParentId: moveTarget === "__root__" ? null : moveTarget,
+    });
+    if (ok) {
+      toast.success("Đã chuyển nhánh.");
+      setMoving(null);
+    }
+  };
+
+  const confirmDeactivate = async () => {
+    if (!deactivating) return;
+    const ok = await submit(`${apiEndpoint}/${deactivating.id}`, "DELETE");
+    if (ok) {
+      toast.success("Đã ngừng hoạt động cả nhánh.");
+      setDeactivating(null);
+    }
+  };
+
+  // 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 [];
+    const banned = new Set(subtreeIds(moving));
+    return flat.filter((item) => !banned.has(item.id));
+  }, [moving, flat]);
+
+  const kindOptions = React.useMemo(() => {
+    if (!form) return kinds;
+    const parent = form.parentId ? findNode(tree, form.parentId) : null;
+    return allowedChildKinds(kinds, parent?.kind);
+  }, [form, kinds, tree]);
+
+  const selectedChildLabel = selected ? addChildLabelOf(selected) : null;
+
+  const stats =
+    selected && selectedRollup
+      ? [
+          { label: "Gán trực tiếp", value: selected.memberCount ?? 0 },
+          { label: "Quản trị", value: selected.adminCount ?? 0 },
+          ...(selectedRollup.units > 0
+            ? [
+                {
+                  label: (selectedChildLabel ?? "Cấp dưới") as string,
+                  value: selectedRollup.units,
+                },
+                { label: "Cả nhánh", value: selectedRollup.members },
+              ]
+            : []),
+        ]
+      : [];
+
+  return (
+    <div className="space-y-3">
+      <RbacPageBar
+        icon={<Network className="h-5 w-5 text-primary-foreground" />}
+        title={title}
+        subtitle={`${tree.length} tổ chức · ${total} workspace · ${totalMembers} người`}
+      >
+        {canCreate ? (
+          <Button size="sm" onClick={() => openCreate()} disabled={busy}>
+            <Plus className="h-3.5 w-3.5" />
+            <span className="ml-1.5">Thêm tổ chức</span>
+          </Button>
+        ) : null}
+      </RbacPageBar>
+
+      <div className="grid gap-3 lg:mx-3 lg:grid-cols-[minmax(0,20rem)_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
+          className={cn("space-y-2", busy && "pointer-events-none opacity-60")}
+        >
+          <div className="relative">
+            <Search className="pointer-events-none absolute left-2.5 top-2 h-3.5 w-3.5 text-muted-foreground" />
+            <Input
+              placeholder="Tìm theo tên hoặc mã…"
+              className="h-8 w-full rounded-md border border-border bg-card pl-8 pr-8 text-sm"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+            />
+            {search ? (
+              <button
+                type="button"
+                onClick={() => setSearch("")}
+                className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                title="Xóa tìm kiếm"
+              >
+                <X className="h-3.5 w-3.5" />
+              </button>
+            ) : null}
+          </div>
+          {search ? (
+            <p className="px-0.5 text-xs tabular-nums text-muted-foreground">
+              {countTreeNodes(visibleRoots)}/{total} khớp
+            </p>
+          ) : null}
+
+          {busy && tree.length === 0 ? (
+            <div className="space-y-2 rounded-xl border border-border bg-card p-4">
+              <Skeleton className="h-9 w-full" />
+              <Skeleton className="h-9 w-5/6" />
+            </div>
+          ) : visibleRoots.length === 0 ? (
+            // Trạng thái rỗng phải DẠY việc: trang này dùng vài lần một năm,
+            // không ai nhớ workspace để làm gì và ai mới cần đặt làm quản trị.
+            <div className="rounded-xl border border-border bg-card px-5 py-10 text-center">
+              <Network className="mx-auto h-8 w-8 text-muted-foreground/60" />
+              <p className="mt-3 text-sm font-medium">
+                {search
+                  ? "Không có workspace nào khớp."
+                  : "Chưa có workspace nào."}
+              </p>
+              <p className="mx-auto mt-1.5 text-[13px] leading-relaxed text-muted-foreground">
+                Mỗi workspace là một phạm vi dữ liệu riêng. Người được gán vào
+                đó chỉ thấy dữ liệu của đúng phạm vi ấy; ai được đặt làm{" "}
+                <strong className="font-medium text-foreground">
+                  quản trị
+                </strong>{" "}
+                thì tự tạo tài khoản và phân quyền được cho người trong phạm vi
+                của mình.
+              </p>
+              {canCreate && !search ? (
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="mt-4"
+                  onClick={() => openCreate()}
+                  disabled={busy}
+                >
+                  <Plus className="h-3.5 w-3.5" />
+                  <span className="ml-1.5">Thêm tổ chức</span>
+                </Button>
+              ) : null}
+            </div>
+          ) : (
+            visibleRoots.map((root) => (
+              <WorkspaceOrgBlock
+                key={root.id}
+                root={root}
+                annotation={rootAnnotations?.[root.code]}
+                activeId={selectedId}
+                onSelect={selectNode}
+                childKindLabel={addChildLabelOf}
+              />
+            ))
+          )}
+        </div>
+
+        {/* KHUNG PHẢI — hồ sơ của đúng một nút. Dính trên khi cuộn: cột trái có
+            thể dài hơn màn hình, mà thứ người ta đang làm việc là ở đây. */}
+        <div
+          ref={detailRef}
+          className={cn(
+            // Gạch dưới trong `calc` PHẢI có dấu cách hai bên (`100dvh_-_7rem`):
+            // `calc(100dvh-7rem)` là CSS sai, Tailwind bỏ qua cả class mà không
+            // báo gì — sinh ra khung phải cao vượt màn hình rất khó truy.
+            "flex min-h-[24rem] flex-col overflow-hidden rounded-xl border border-border bg-card lg:sticky lg:top-3 lg:max-h-[calc(100dvh_-_7rem)]",
+            busy && "pointer-events-none opacity-60",
+          )}
+        >
+          {selected ? (
+            <>
+              <div className="space-y-3 border-b border-border p-4">
+                {breadcrumb.length > 1 ? (
+                  <nav className="flex flex-wrap items-center gap-0.5 text-xs text-muted-foreground">
+                    {breadcrumb.slice(0, -1).map((node) => (
+                      <React.Fragment key={node.id}>
+                        <button
+                          type="button"
+                          onClick={() => setSelectedId(node.id)}
+                          className="rounded px-1 py-0.5 hover:bg-muted hover:text-foreground"
+                        >
+                          {node.name}
+                        </button>
+                        <ChevronRight className="h-3 w-3" />
+                      </React.Fragment>
+                    ))}
+                    <span className="px-1 py-0.5 text-foreground">
+                      {selected.name}
+                    </span>
+                  </nav>
+                ) : null}
+
+                <div className="flex flex-wrap items-start gap-x-3 gap-y-2">
+                  <div className="min-w-0 flex-1">
+                    <h2 className="truncate text-lg font-semibold">
+                      {selected.name}
+                    </h2>
+                    {/* `div` chứ không `p`: `Badge` render ra `div`, lồng trong
+                        `p` là HTML sai và Next sẽ báo lệch hydrate. */}
+                    <div className="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
+                      <span className="tabular-nums">{selected.code}</span>
+                      {selectedKindLabel ? (
+                        <>
+                          <span aria-hidden>·</span>
+                          <Badge variant="outline">{selectedKindLabel}</Badge>
+                        </>
+                      ) : null}
+                      {selected.isActive === false ? (
+                        <>
+                          <span aria-hidden>·</span>
+                          <span>đã ngừng hoạt động</span>
+                        </>
+                      ) : null}
+                    </div>
+                  </div>
+
+                  {canManageSelected ? (
+                    <div className="flex shrink-0 items-center gap-1.5">
+                      {canCreate && selectedChildLabel ? (
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          className="h-8"
+                          onClick={() => openCreate(selected)}
+                        >
+                          <Plus className="h-3.5 w-3.5" />
+                          <span className="ml-1.5">
+                            Thêm {selectedChildLabel.toLowerCase()}
+                          </span>
+                        </Button>
+                      ) : null}
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 w-8 p-0 text-muted-foreground"
+                            title="Thao tác khác"
+                          >
+                            <MoreHorizontal className="h-4 w-4" />
+                          </Button>
+                        </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",
+                              })
+                            }
+                          >
+                            Sửa thông tin
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            onClick={() => {
+                              setMoving(selected);
+                              setMoveTarget("__root__");
+                            }}
+                          >
+                            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}
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </div>
+                  ) : (
+                    // Nói THẲNG là chỉ xem, đừng để nút biến mất im lặng: người
+                    // dùng sẽ đi tìm nút "Thêm" mà không hiểu vì sao không có.
+                    <p className="shrink-0 self-center rounded-md border border-border bg-muted/40 px-2 py-1 text-xs text-muted-foreground">
+                      Chỉ xem — ngoài phạm vi quản trị của bạn
+                    </p>
+                  )}
+                </div>
+
+                <StatStrip items={stats} />
+              </div>
+
+              <WorkspaceMembersPanel
+                key={selected.id}
+                workspaceId={selected.id}
+                workspaceName={selected.name}
+                kindLabel={selectedKindLabel}
+                canManage={canManageSelected}
+                apiEndpoint={apiEndpoint}
+                onCountChange={applyMemberCount}
+              />
+            </>
+          ) : (
+            <div className="m-auto max-w-sm px-6 py-12 text-center">
+              <Network className="mx-auto h-8 w-8 text-muted-foreground/60" />
+              <p className="mt-3 text-sm font-medium">
+                Chọn một tổ chức hoặc bộ phận
+              </p>
+              <p className="mt-1.5 text-[13px] leading-relaxed text-muted-foreground">
+                Bấm vào một dòng bên trái để xem ai đang ở trong phạm vi dữ liệu
+                đó và thêm người vào.
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <Dialog
+        open={form !== null}
+        onOpenChange={(open) => !open && setForm(null)}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              {form?.mode === "create" ? "Thêm workspace" : "Sửa workspace"}
+            </DialogTitle>
+            {form?.parentName ? (
+              <DialogDescription>
+                Đặt dưới <strong>{form.parentName}</strong>
+              </DialogDescription>
+            ) : null}
+          </DialogHeader>
+          <div className="space-y-3">
+            <div className="space-y-1.5">
+              <Label htmlFor="ws-code">Mã</Label>
+              <Input
+                id="ws-code"
+                value={form?.code ?? ""}
+                onChange={(e) =>
+                  setForm((f) => (f ? { ...f, code: e.target.value } : f))
+                }
+                placeholder="VD: SPA-QC"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="ws-name">Tên</Label>
+              <Input
+                id="ws-name"
+                value={form?.name ?? ""}
+                onChange={(e) =>
+                  setForm((f) => (f ? { ...f, name: e.target.value } : f))
+                }
+                placeholder="VD: Phòng QC"
+              />
+            </div>
+            {kindOptions.length > 1 ? (
+              <div className="space-y-1.5">
+                <Label htmlFor="ws-kind">Cấp</Label>
+                <Select
+                  value={form?.kind}
+                  onValueChange={(v) =>
+                    setForm((f) => (f ? { ...f, kind: v } : f))
+                  }
+                >
+                  <SelectTrigger id="ws-kind">
+                    <SelectValue placeholder="Chọn cấp" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {kindOptions.map((kind) => (
+                      <SelectItem key={kind.key} value={kind.key}>
+                        {kind.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            ) : null}
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setForm(null)}>
+              Hủy
+            </Button>
+            <Button onClick={saveForm} disabled={busy}>
+              Lưu
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog
+        open={moving !== null}
+        onOpenChange={(open) => !open && setMoving(null)}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Chuyển nhánh</DialogTitle>
+            <DialogDescription>
+              Chuyển <strong>{moving?.name}</strong> cùng toàn bộ cấp dưới sang
+              nhánh khác.
+            </DialogDescription>
+          </DialogHeader>
+          <Select value={moveTarget} onValueChange={setMoveTarget}>
+            <SelectTrigger>
+              <SelectValue placeholder="Chọn nhánh cha" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="__root__">— Cấp cao nhất —</SelectItem>
+              {moveOptions.map((item) => (
+                <SelectItem key={item.id} value={item.id}>
+                  {" ".repeat(item.depth * 2)}
+                  {item.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setMoving(null)}>
+              Hủy
+            </Button>
+            <Button onClick={confirmMove} disabled={busy}>
+              Chuyển
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <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"
+        variant="destructive"
+        onConfirm={confirmDeactivate}
+      />
+    </div>
+  );
+}