@goplusvn/core 0.1.76 → 0.1.78

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

@@ -1,19 +1,34 @@
 "use client";
 
-// Trang "Không gian làm việc" — cây tổ chức + thao tác nhánh.
+// Trang "Workspace" — hai khung: TRÁI chọn nơi, PHẢI làm việc với nơi đó.
 //
-// Dùng lại khung `RbacPageBar` / `RbacStickyToolbar` 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).
+// 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 { Network } from "lucide-react";
+import {
+  ChevronRight,
+  MoreHorizontal,
+  Network,
+  Plus,
+  Search,
+  X,
+} from "lucide-react";
 import { toast } from "sonner";
 
 import {
+  Badge,
   Button,
   ConfirmDialog,
   Dialog,
@@ -22,6 +37,11 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
   Input,
   Label,
   Select,
@@ -32,13 +52,16 @@ import {
   Skeleton,
 } from "../../ui";
 import { RbacPageBar } from "../../rbac/pages/lib/rbac-page-shell";
-import { Search, X } from "lucide-react";
 import { cn } from "../../utils";
-import {
-  countTreeNodes,
-  WorkspaceTreeView,
-} from "../components/workspace-tree-view";
+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 {
@@ -52,6 +75,14 @@ export interface WorkspaceListPageProps {
   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 {
@@ -87,6 +118,21 @@ function findNode(
   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[],
@@ -103,6 +149,30 @@ 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 = [],
@@ -110,29 +180,132 @@ export function WorkspaceListPage({
   canManageAll = false,
   canCreate = false,
   apiEndpoint = "/api/workspaces",
-  title = "Không gian làm việc",
+  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 không gian.");
+      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) => {
@@ -231,23 +404,47 @@ export function WorkspaceListPage({
     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={`${total} không gian`}
+        subtitle={`${tree.length} tổ chức · ${total} workspace · ${totalMembers} người`}
       >
         {canCreate ? (
           <Button size="sm" onClick={() => openCreate()} disabled={busy}>
-            Thêm không gian gốc
+            <Plus className="h-3.5 w-3.5" />
+            <span className="ml-1.5">Thêm tổ chức</span>
           </Button>
         ) : null}
       </RbacPageBar>
 
-      <div className="overflow-hidden rounded-xl border border-border bg-card lg:mx-3">
-        <div className="sticky top-0 z-20 flex flex-wrap items-center gap-2 border-b border-border bg-card/95 px-3 py-2 backdrop-blur sm:px-4">
-          <div className="relative min-w-[140px] flex-1 sm:max-w-72">
+      <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ã…"
@@ -266,43 +463,218 @@ export function WorkspaceListPage({
               </button>
             ) : null}
           </div>
-          <p className="ml-auto whitespace-nowrap text-xs text-muted-foreground">
-            <span className="font-semibold tabular-nums text-foreground">
-              {total}
-            </span>{" "}
-            không gian
-          </p>
-        </div>
+          {search ? (
+            <p className="px-0.5 text-xs tabular-nums text-muted-foreground">
+              {countTreeNodes(visibleRoots)}/{total} khớp
+            </p>
+          ) : null}
 
-        <div className={cn(busy && "pointer-events-none opacity-60")}>
           {busy && tree.length === 0 ? (
-            <div className="space-y-2 p-4">
-              <Skeleton className="h-6 w-full" />
-              <Skeleton className="h-6 w-5/6" />
+            <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>
           ) : (
-            <WorkspaceTreeView
-              nodes={tree}
-              adminIds={adminIds}
-              canManageAll={canManageAll}
-              search={search}
-              onAddChild={canCreate ? openCreate : undefined}
-              onEdit={(node) =>
-                setForm({
-                  mode: "edit",
-                  id: node.id,
-                  parentId: null,
-                  code: node.code,
-                  name: node.name,
-                  kind: node.kind ?? kinds[0]?.key ?? "unit",
-                })
-              }
-              onMove={(node) => {
-                setMoving(node);
-                setMoveTarget("__root__");
-              }}
-              onDeactivate={setDeactivating}
-            />
+            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>
@@ -314,7 +686,7 @@ export function WorkspaceListPage({
         <DialogContent>
           <DialogHeader>
             <DialogTitle>
-              {form?.mode === "create" ? "Thêm không gian" : "Sửa không gian"}
+              {form?.mode === "create" ? "Thêm workspace" : "Sửa workspace"}
             </DialogTitle>
             {form?.parentName ? (
               <DialogDescription>
@@ -399,7 +771,7 @@ export function WorkspaceListPage({
               <SelectItem value="__root__">— Cấp cao nhất —</SelectItem>
               {moveOptions.map((item) => (
                 <SelectItem key={item.id} value={item.id}>
-                  {" ".repeat(item.depth * 2)}
+                  {" ".repeat(item.depth * 2)}
                   {item.name}
                 </SelectItem>
               ))}
@@ -419,7 +791,7 @@ export function WorkspaceListPage({
       <ConfirmDialog
         open={deactivating !== null}
         onOpenChange={(open) => !open && setDeactivating(null)}
-        title="Ngừng hoạt động không gian?"
+        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"