@goplusvn/core 0.1.75 → 0.1.77

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

@@ -0,0 +1,139 @@
+"use client";
+
+// Bộ chuyển không gian — đứng ở header, cạnh tên người dùng.
+//
+// Chỉ hiện khi người dùng thuộc TỪ HAI không gian trở lên. Một không gian mà vẫn
+// đẩy một dropdown vào header là thêm một thứ để đọc mà không mang thông tin gì
+// (L11: mọi pixel phải mang dữ liệu).
+//
+// Đây là bộ lọc GIAO DIỆN, không phải hàng rào bảo mật: nó thu hẹp cái đang xem
+// trong phạm vi server đã cho phép. Đổi giá trị ở đây KHÔNG bao giờ mở rộng
+// được phạm vi — server luôn kẹp lại bằng `clampScopeFilter`.
+import * as React from "react";
+
+import { Building2, Check, ChevronsUpDown } from "lucide-react";
+
+import {
+  Button,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  ScrollArea,
+} from "../../ui";
+import { cn } from "../../utils";
+
+export interface WorkspaceOption {
+  id: string;
+  name: string;
+  /** Chữ nhãn đã dịch sẵn ("Chi nhánh", "Phòng ban") — hiện mờ bên phải. */
+  kindLabel?: string;
+  /** Độ sâu trong cây, để thụt đầu dòng. */
+  depth?: number;
+}
+
+export interface WorkspaceSwitcherProps {
+  options: WorkspaceOption[];
+  /** `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ộ. */
+  allowAll?: boolean;
+  allLabel?: string;
+  className?: string;
+}
+
+export function WorkspaceSwitcher({
+  options,
+  value,
+  onChange,
+  allowAll = false,
+  allLabel = "Tất cả workspace",
+  className,
+}: WorkspaceSwitcherProps) {
+  const [open, setOpen] = React.useState(false);
+
+  // Một lựa chọn duy nhất ⇒ không có gì để chuyển.
+  if (options.length <= 1 && !allowAll) return null;
+
+  const current = options.find((o) => o.id === value);
+  const label = current?.name ?? allLabel;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          role="combobox"
+          aria-expanded={open}
+          className={cn("h-8 max-w-52 justify-between gap-1.5", className)}
+        >
+          <Building2 className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+          <span className="truncate text-sm font-medium">{label}</span>
+          <ChevronsUpDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="start" className="w-64 p-1">
+        <ScrollArea className="max-h-72">
+          {allowAll ? (
+            <Row
+              label={allLabel}
+              selected={value === null}
+              onSelect={() => {
+                onChange(null);
+                setOpen(false);
+              }}
+            />
+          ) : null}
+          {options.map((option) => (
+            <Row
+              key={option.id}
+              label={option.name}
+              hint={option.kindLabel}
+              depth={option.depth}
+              selected={option.id === value}
+              onSelect={() => {
+                onChange(option.id);
+                setOpen(false);
+              }}
+            />
+          ))}
+        </ScrollArea>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function Row({
+  label,
+  hint,
+  depth = 1,
+  selected,
+  onSelect,
+}: {
+  label: string;
+  hint?: string;
+  depth?: number;
+  selected: boolean;
+  onSelect: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onSelect}
+      className={cn(
+        "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors",
+        selected ? "bg-muted font-medium" : "hover:bg-muted/60",
+      )}
+      style={{ paddingLeft: `${0.5 + Math.max(0, depth - 1) * 0.75}rem` }}
+    >
+      <Check
+        className={cn("h-3.5 w-3.5 shrink-0", selected ? "" : "opacity-0")}
+      />
+      <span className="min-w-0 flex-1 truncate">{label}</span>
+      {hint ? (
+        <span className="shrink-0 text-xs text-muted-foreground">{hint}</span>
+      ) : null}
+    </button>
+  );
+}