@goplusvn/core 0.1.75 → 0.1.77

package/src/workspace/components/workspace-members-panel.tsx

@@ -0,0 +1,454 @@
+"use client";
+
+// Cột "Thành viên" của trang Không gian làm việc.
+//
+// Đây là chỗ DUY NHẤT trên giao diện ghi bảng membership. Nút bị ẩn ở đây không
+// phải hàng rào — hàng rào nằm ở `createWorkspaceMemberHandlers`; panel này chỉ
+// có nhiệm vụ đừng mời người dùng bấm vào thứ chắc chắn 403.
+
+import * as React from "react";
+
+import {
+  Loader2,
+  MoreHorizontal,
+  Search,
+  Shield,
+  Trash2,
+  UserPlus,
+  Users,
+  X,
+} from "lucide-react";
+import { toast } from "sonner";
+
+import {
+  Badge,
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Input,
+  Skeleton,
+} from "../../ui";
+import { cn } from "../../utils";
+
+/** Chữ cái đầu cho ô avatar — hai ký tự là đủ nhận diện, ba trở lên thành rối. */
+function initials(name?: string | null, email?: string | null): string {
+  const source = (name ?? email ?? "?").trim();
+  const words = source.split(/\s+/).filter(Boolean);
+  if (words.length >= 2) {
+    return (
+      words[words.length - 2][0] + words[words.length - 1][0]
+    ).toUpperCase();
+  }
+  return source.slice(0, 2).toUpperCase();
+}
+
+export interface WorkspaceMember {
+  userId: string;
+  name: string | null;
+  email: string | null;
+  isActive?: boolean;
+  isAdmin?: boolean;
+  isDefault?: boolean;
+}
+
+interface Candidate {
+  id: string;
+  name: string | null;
+  email: string | null;
+  isActive?: boolean;
+}
+
+export interface WorkspaceMembersPanelProps {
+  /** Nút đang chọn trên cây; `null` = chưa chọn gì. */
+  workspaceId: string | null;
+  workspaceName?: string | null;
+  /** Nhãn cấp của app ("Đơn vị" / "Phòng ban" / "Chi nhánh") — core không tự đặt tên. */
+  kindLabel?: string;
+  /** Người dùng có quản trị được ĐÚNG nút này không (đã tính ở server). */
+  canManage?: boolean;
+  apiEndpoint?: string;
+  /**
+   * Báo số thành viên THẬT sau mỗi lần tải/thêm/gỡ, để cây bên trái cập nhật.
+   *
+   * Không có nó thì con số trên cây là ảnh chụp lúc server render: thêm người
+   * xong, panel hiện 1 mà cây vẫn "0 người" — người dùng đọc hai con số mâu
+   * thuẫn trên cùng một màn hình và không biết tin cái nào.
+   */
+  onCountChange?: (workspaceId: string, count: number) => void;
+}
+
+export function WorkspaceMembersPanel({
+  workspaceId,
+  workspaceName,
+  kindLabel,
+  canManage = false,
+  apiEndpoint = "/api/workspaces",
+  onCountChange,
+}: WorkspaceMembersPanelProps) {
+  const [members, setMembers] = React.useState<WorkspaceMember[]>([]);
+  const [loading, setLoading] = React.useState(false);
+  const [busyUserId, setBusyUserId] = React.useState<string | null>(null);
+  const [adding, setAdding] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+  const [candidates, setCandidates] = React.useState<Candidate[]>([]);
+  const [searching, setSearching] = React.useState(false);
+
+  const base = workspaceId ? `${apiEndpoint}/${workspaceId}/members` : null;
+
+  // Giữ callback trong ref: trang cha thường truyền hàm inline, để nó vào deps
+  // của `reload` là mỗi lần cha render lại thì panel gọi API lại một vòng.
+  const countRef = React.useRef(onCountChange);
+  React.useEffect(() => {
+    countRef.current = onCountChange;
+  }, [onCountChange]);
+
+  const reload = React.useCallback(async () => {
+    if (!base) {
+      setMembers([]);
+      return;
+    }
+    setLoading(true);
+    try {
+      const res = await fetch(base, { cache: "no-store" });
+      if (!res.ok) throw new Error((await res.json())?.error ?? "Lỗi tải");
+      const list: WorkspaceMember[] = await res.json();
+      setMembers(list);
+      if (workspaceId) countRef.current?.(workspaceId, list.length);
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Không tải được thành viên.",
+      );
+      setMembers([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [base, workspaceId]);
+
+  React.useEffect(() => {
+    void reload();
+    // Đổi nút thì đóng luôn ô thêm — để mở là người dùng tưởng đang thêm vào nút cũ.
+    setAdding(false);
+    setQuery("");
+    setCandidates([]);
+  }, [reload]);
+
+  // Tìm ứng viên: gõ tới đâu hỏi tới đó, có hoãn để không bắn mỗi phím một request.
+  React.useEffect(() => {
+    if (!adding || !base) return;
+    let cancelled = false;
+    setSearching(true);
+    const timer = setTimeout(async () => {
+      try {
+        const url = `${base}?candidates=1&q=${encodeURIComponent(query)}`;
+        const res = await fetch(url, { cache: "no-store" });
+        if (!res.ok) throw new Error((await res.json())?.error ?? "Lỗi tìm");
+        const data = await res.json();
+        if (!cancelled) setCandidates(data);
+      } catch (error) {
+        if (!cancelled) {
+          setCandidates([]);
+          toast.error(
+            error instanceof Error
+              ? error.message
+              : "Không tìm được người dùng.",
+          );
+        }
+      } finally {
+        if (!cancelled) setSearching(false);
+      }
+    }, 250);
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [adding, query, base]);
+
+  async function mutate(
+    init: RequestInit & { url: string },
+    userId: string,
+    okMessage: string,
+  ) {
+    setBusyUserId(userId);
+    try {
+      const res = await fetch(init.url, init);
+      const payload = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        // Câu từ server là câu giải thích VÌ SAO (D1/D3/D5/D7) — hiển thị nguyên
+        // văn, đừng nuốt thành "Có lỗi xảy ra".
+        throw new Error(payload?.error ?? "Thao tác không thành công.");
+      }
+      toast.success(okMessage);
+      await reload();
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Thao tác lỗi.");
+    } finally {
+      setBusyUserId(null);
+    }
+  }
+
+  const add = (userId: string) =>
+    mutate(
+      {
+        url: base!,
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ userId }),
+      },
+      userId,
+      "Đã thêm vào " + (kindLabel?.toLowerCase() ?? "workspace"),
+    );
+
+  const toggleAdmin = (member: WorkspaceMember) =>
+    mutate(
+      {
+        url: base!,
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          userId: member.userId,
+          isAdmin: !member.isAdmin,
+          isDefault: member.isDefault,
+        }),
+      },
+      member.userId,
+      member.isAdmin ? "Đã bỏ quyền quản trị." : "Đã đặt làm quản trị.",
+    );
+
+  const remove = (userId: string) =>
+    mutate(
+      { url: `${base}?userId=${encodeURIComponent(userId)}`, method: "DELETE" },
+      userId,
+      "Đã gỡ khỏi " + (kindLabel?.toLowerCase() ?? "workspace"),
+    );
+
+  if (!workspaceId) {
+    return (
+      <div className="flex h-full min-h-40 items-center justify-center p-6 text-center text-sm text-muted-foreground">
+        Chọn một {kindLabel?.toLowerCase() ?? "workspace"} ở bên trái để xem và
+        gán người dùng.
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Thanh của DANH SÁCH, không phải của không gian: tên/mã/cấp đã nằm ở
+          đầu vùng chi tiết bên trên, lặp lại ở đây chỉ tốn dòng. */}
+      <div className="flex items-center gap-2 border-b border-border px-3 py-2">
+        <Users className="h-4 w-4 shrink-0 text-muted-foreground" />
+        <p className="text-sm font-medium">
+          Thành viên
+          {!loading ? (
+            <span className="ml-1.5 tabular-nums text-muted-foreground">
+              {members.length}
+            </span>
+          ) : null}
+        </p>
+        {canManage ? (
+          <Button
+            size="sm"
+            variant={adding ? "secondary" : "default"}
+            className="ml-auto"
+            onClick={() => setAdding((v) => !v)}
+          >
+            {adding ? (
+              <X className="h-3.5 w-3.5" />
+            ) : (
+              <UserPlus className="h-3.5 w-3.5" />
+            )}
+            <span className="ml-1.5">
+              {adding ? "Đóng" : "Thêm thành viên"}
+            </span>
+          </Button>
+        ) : null}
+      </div>
+
+      {/* Nền + vạch dưới của ô thêm là BẮT BUỘC: ngay bên dưới là danh sách
+          thành viên hiện có, cũng gồm tên + email. Bỏ ranh giới thì người vừa
+          được thêm hiện hai lần sát nhau (một dòng ứng viên, một dòng thành
+          viên) mà không có gì nói đó là hai danh sách khác nhau. */}
+      {adding ? (
+        <div className="border-b border-border bg-muted/30 p-3">
+          <div className="relative max-w-md">
+            <Search className="pointer-events-none absolute left-2.5 top-2 h-3.5 w-3.5 text-muted-foreground" />
+            <Input
+              autoFocus
+              placeholder="Tìm theo tên hoặc email…"
+              className="h-8 pl-8 text-sm"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+            />
+          </div>
+          <div className="mt-2 max-h-56 max-w-md space-y-0.5 overflow-y-auto">
+            {searching ? (
+              <p className="px-2 py-3 text-xs text-muted-foreground">
+                Đang tìm…
+              </p>
+            ) : candidates.length === 0 ? (
+              // Danh sách rỗng ở đây gần như luôn là "ngoài phạm vi", không phải
+              // "hệ thống không có ai" — nói thẳng để khỏi tưởng mất dữ liệu.
+              <p className="px-2 py-3 text-xs text-muted-foreground">
+                Không có người dùng nào trong phạm vi quản trị của bạn khớp tìm
+                kiếm.
+              </p>
+            ) : (
+              candidates.map((c) => (
+                <button
+                  key={c.id}
+                  type="button"
+                  disabled={busyUserId === c.id}
+                  onClick={() => add(c.id)}
+                  className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left hover:bg-accent disabled:opacity-50"
+                >
+                  <span className="min-w-0 flex-1">
+                    <span className="block truncate text-sm">
+                      {c.name ?? c.email}
+                    </span>
+                    {c.name && c.email ? (
+                      <span className="block truncate text-xs text-muted-foreground">
+                        {c.email}
+                      </span>
+                    ) : null}
+                  </span>
+                  {busyUserId === c.id ? (
+                    <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                  ) : (
+                    <UserPlus className="h-3.5 w-3.5 text-muted-foreground" />
+                  )}
+                </button>
+              ))
+            )}
+          </div>
+        </div>
+      ) : null}
+
+      <div className="min-h-0 flex-1 overflow-y-auto">
+        {loading ? (
+          <div className="space-y-2 p-3">
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-10 w-5/6" />
+          </div>
+        ) : members.length === 0 ? (
+          // Đang mở ô thêm thì bảng hướng dẫn im lặng: người dùng đã làm đúng
+          // việc nó bảo làm, để lại chỉ tổ tranh chỗ với danh sách ứng viên.
+          adding ? null : (
+            // Trạng thái rỗng phải DẠY việc, không chỉ báo trống: nói thêm người
+            // vào đây thì họ được gì, và ai mới cần đặt làm quản trị.
+            <div className="mx-auto max-w-sm px-6 py-12 text-center">
+              <Users className="mx-auto h-8 w-8 text-muted-foreground/60" />
+              <p className="mt-3 text-sm font-medium">
+                Chưa có ai trong {kindLabel?.toLowerCase() ?? "workspace"} này
+              </p>
+              <p className="mt-1.5 text-[13px] leading-relaxed text-muted-foreground">
+                Người được thêm vào đây sẽ thấy dữ liệu của{" "}
+                {workspaceName ?? "workspace này"}. Đặt một người làm{" "}
+                <strong className="font-medium text-foreground">
+                  quản trị
+                </strong>{" "}
+                thì họ tự tạo được tài khoản và phân quyền trong phạm vi đó.
+              </p>
+              {canManage ? (
+                <Button
+                  size="sm"
+                  className="mt-4"
+                  onClick={() => setAdding(true)}
+                >
+                  <UserPlus className="h-3.5 w-3.5" />
+                  <span className="ml-1.5">Thêm thành viên</span>
+                </Button>
+              ) : null}
+            </div>
+          )
+        ) : (
+          <ul>
+            {members.map((m) => (
+              <li
+                key={m.userId}
+                className={cn(
+                  "flex items-center gap-3 border-b border-border/60 px-3 py-2 last:border-b-0",
+                  busyUserId === m.userId && "opacity-50",
+                )}
+              >
+                <span
+                  aria-hidden
+                  className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted text-[11px] font-semibold text-muted-foreground"
+                >
+                  {initials(m.name, m.email)}
+                </span>
+
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate text-sm font-medium">
+                    {m.name ?? m.email}
+                    {m.isActive === false ? (
+                      <span className="ml-1.5 text-xs font-normal text-muted-foreground">
+                        (ngừng hoạt động)
+                      </span>
+                    ) : null}
+                  </span>
+                  {m.name && m.email ? (
+                    <span className="block truncate text-xs text-muted-foreground">
+                      {m.email}
+                    </span>
+                  ) : null}
+                </span>
+
+                {/* Cột vai trò: mọi dòng đều có chữ, không chỉ dòng quản trị —
+                    có chữ ở cả hai trạng thái thì mới đọc ra đây là một CỘT. */}
+                <span className="shrink-0">
+                  {m.isAdmin ? (
+                    <Badge variant="secondary" className="gap-1">
+                      <Shield className="h-3 w-3" />
+                      Quản trị
+                    </Badge>
+                  ) : (
+                    <span className="text-xs text-muted-foreground">
+                      Thành viên
+                    </span>
+                  )}
+                </span>
+
+                {canManage ? (
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        className="h-7 w-7 shrink-0 p-0 text-muted-foreground"
+                        disabled={busyUserId === m.userId}
+                        title="Thao tác"
+                      >
+                        {busyUserId === m.userId ? (
+                          <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                        ) : (
+                          <MoreHorizontal className="h-3.5 w-3.5" />
+                        )}
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem onClick={() => toggleAdmin(m)}>
+                        {m.isAdmin ? "Bỏ quyền quản trị" : "Đặt làm quản trị"}
+                      </DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem
+                        className="text-destructive focus:text-destructive"
+                        onClick={() => remove(m.userId)}
+                      >
+                        <Trash2 className="h-3.5 w-3.5" />
+                        <span className="ml-2">
+                          Gỡ khỏi {kindLabel?.toLowerCase() ?? "workspace"}
+                        </span>
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                ) : null}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}