@goplusvn/core 0.1.21 → 0.1.23

package/src/rbac/pages/action-list-page.tsx

@@ -1,25 +1,587 @@
-import { EntityCrudPage } from "../../crud/pages/entity-crud-page";
+"use client";
 
-interface ActionListPageProps {
-  lang: string;
-  session: any;
-  dictionary: any;
-  config: any;
+// Trang "Quản lý hành động" — danh sách hành động RBAC kèm ngữ cảnh sử dụng
+// (tài nguyên · vai trò · người dùng). Bề mặt trắng (bg-card), nút tác vụ
+// LUÔN hiển thị (không ẩn sau hover — mobile không có hover).
+//
+// API contract: GET/POST/PUT/DELETE /api/actions, GET /api/actions/usage
+// (usage là optional — trang vẫn chạy khi endpoint không tồn tại).
+
+import { useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import {
+  ChevronRight,
+  Pencil,
+  Plus,
+  RefreshCw,
+  Search,
+  Trash2,
+  X,
+  Zap,
+} from "lucide-react";
+
+import {
+  Badge,
+  Button,
+  ConfirmDialog,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+  PageHeader,
+  Skeleton,
+  Textarea,
+} from "../../ui";
+import { cn } from "../../utils";
+import { errorMessage, throwFetchError } from "../lib/fetch-error";
+
+// --- Types ---
+interface Action {
+  id: string;
+  code: string;
+  name: string;
+  description?: string;
+  isDefault?: boolean;
+}
+
+interface UsageEntry {
+  resources: { code: string; name: string }[];
+  roles: { code: string; name: string }[];
+  users: { id: string; name: string | null; email: string }[];
+}
+
+type UsageMap = Record<string, UsageEntry>;
+
+const EMPTY_USAGE: UsageEntry = { resources: [], roles: [], users: [] };
+
+const normalize = (s: string) =>
+  (s || "")
+    .toLowerCase()
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .replace(/đ/g, "d");
+
+interface Permissions {
+  create?: boolean;
+  update?: boolean;
+  delete?: boolean;
+}
+
+export interface ActionListPageProps {
+  permissions?: Permissions;
+}
+
+export function ActionListPage({ permissions = {} }: ActionListPageProps) {
+  const [loading, setLoading] = useState(true);
+  const [actions, setActions] = useState<Action[]>([]);
+  const [usage, setUsage] = useState<UsageMap>({});
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set());
+
+  // Create/Edit dialog
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [editing, setEditing] = useState<Action | null>(null);
+  const [formData, setFormData] = useState({
+    code: "",
+    name: "",
+    description: "",
+  });
+
+  // Delete confirm
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [toDelete, setToDelete] = useState<Action | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const canCreate = !!permissions.create;
+  const canUpdate = !!permissions.update;
+  const canDelete = !!permissions.delete;
+
+  const fetchData = async () => {
+    try {
+      setLoading(true);
+      const [resActions, resUsage] = await Promise.all([
+        fetch("/api/actions?pageSize=1000"),
+        fetch("/api/actions/usage"),
+      ]);
+      if (!resActions.ok) throw new Error("Không tải được danh sách hành động");
+
+      const actionsData = await resActions.json();
+      setActions(actionsData.items || []);
+
+      if (resUsage.ok) {
+        const usageData = await resUsage.json();
+        setUsage(usageData.usage || {});
+      }
+    } catch (error) {
+      toast.error(errorMessage(error, "Lỗi tải dữ liệu"));
+    } finally {
+      setLoading(false);
+      setIsRefreshing(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleRefresh = () => {
+    setIsRefreshing(true);
+    fetchData();
+  };
+
+  const toggleRow = (id: string) => {
+    setExpandedRows((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const filtered = useMemo(() => {
+    const q = normalize(searchTerm.trim());
+    const list = q
+      ? actions.filter(
+          (a) =>
+            normalize(a.name).includes(q) ||
+            normalize(a.code).includes(q) ||
+            normalize(a.description || "").includes(q),
+        )
+      : actions;
+    return [...list].sort((a, b) => a.name.localeCompare(b.name, "vi"));
+  }, [actions, searchTerm]);
+
+  // --- CRUD ---
+  const openNew = () => {
+    setEditing(null);
+    setFormData({ code: "", name: "", description: "" });
+    setIsDialogOpen(true);
+  };
+
+  const openEdit = (action: Action) => {
+    setEditing(action);
+    setFormData({
+      code: action.code,
+      name: action.name,
+      description: action.description || "",
+    });
+    setIsDialogOpen(true);
+  };
+
+  const handleSubmit = async () => {
+    if (!formData.code || !formData.name) {
+      toast.error("Vui lòng nhập Mã và Tên hành động");
+      return;
+    }
+    try {
+      const payload = { ...formData, status: "active" };
+      const res = await fetch("/api/actions", {
+        method: editing ? "PUT" : "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(editing ? { id: editing.id, ...payload } : payload),
+      });
+      if (!res.ok) {
+        await throwFetchError(res, "Operation failed");
+      }
+      const saved = await res.json();
+      if (editing) {
+        setActions((prev) => prev.map((a) => (a.id === saved.id ? saved : a)));
+        toast.success("Cập nhật hành động thành công");
+      } else {
+        setActions((prev) => [saved, ...prev]);
+        toast.success("Tạo hành động thành công");
+      }
+      setIsDialogOpen(false);
+    } catch (error) {
+      toast.error(errorMessage(error, "Có lỗi xảy ra"));
+    }
+  };
+
+  const requestDelete = (action: Action) => {
+    setToDelete(action);
+    setConfirmOpen(true);
+  };
+
+  const handleConfirmDelete = async () => {
+    if (!toDelete) return;
+    setIsDeleting(true);
+    try {
+      const res = await fetch(`/api/actions?id=${toDelete.id}`, {
+        method: "DELETE",
+      });
+      if (!res.ok) {
+        await throwFetchError(res, "Delete failed");
+      }
+      setActions((prev) => prev.filter((a) => a.id !== toDelete.id));
+      toast.success("Xóa hành động thành công");
+      setConfirmOpen(false);
+      setToDelete(null);
+    } catch (error) {
+      toast.error(errorMessage(error, "Không thể xóa hành động"));
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const isSearching = searchTerm.trim().length > 0;
+
+  return (
+    <section className="w-full space-y-4 px-4 pb-6 pt-2 md:px-6 lg:px-8">
+      <PageHeader
+        title="Quản lý hành động"
+        description="Danh sách hành động và ngữ cảnh sử dụng (tài nguyên · vai trò · người dùng)"
+        icon={<Zap className="h-5 w-5" />}
+        actions={
+          canCreate ? (
+            <Button
+              variant="accent"
+              onClick={openNew}
+              prependIcon={<Plus className="h-4 w-4" />}
+            >
+              <span className="hidden sm:inline">Thêm hành động</span>
+              <span className="sm:hidden">Thêm</span>
+            </Button>
+          ) : undefined
+        }
+      />
+
+      {/* Search + refresh */}
+      <div className="flex flex-wrap items-center gap-2">
+        <div className="relative min-w-0 flex-1 sm:max-w-sm sm:flex-none">
+          <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            placeholder="Tìm hành động (tên, mã, mô tả)…"
+            className="h-9 w-full bg-card pl-9 pr-9"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+          {searchTerm && (
+            <button
+              type="button"
+              onClick={() => setSearchTerm("")}
+              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-4 w-4" />
+            </button>
+          )}
+        </div>
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={handleRefresh}
+          disabled={isRefreshing}
+          title="Làm mới"
+        >
+          <RefreshCw className={cn("h-4 w-4", isRefreshing && "animate-spin")} />
+        </Button>
+        {isSearching && (
+          <Badge variant="secondary" className="ml-auto font-normal sm:ml-1">
+            {filtered.length} hành động
+          </Badge>
+        )}
+      </div>
+
+      {/* Body */}
+      {loading && !isRefreshing ? (
+        <div className="space-y-2 rounded-lg border border-border bg-card p-4">
+          {Array.from({ length: 8 }).map((_, i) => (
+            <Skeleton key={i} className="h-14 w-full" />
+          ))}
+        </div>
+      ) : filtered.length === 0 ? (
+        <div className="flex flex-col items-center justify-center rounded-lg border border-dashed border-border bg-card py-20 text-center">
+          <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-muted">
+            <Search className="h-6 w-6 text-muted-foreground" />
+          </div>
+          <h3 className="text-base font-semibold text-foreground">
+            {isSearching ? "Không tìm thấy hành động" : "Chưa có hành động nào"}
+          </h3>
+          <p className="mt-1 max-w-sm text-sm text-muted-foreground">
+            {isSearching
+              ? "Thử từ khóa khác."
+              : "Tạo hành động đầu tiên để bắt đầu phân quyền."}
+          </p>
+        </div>
+      ) : (
+        <div className="overflow-hidden rounded-lg border border-border bg-card shadow-sm">
+          <ul className="divide-y divide-border">
+            {filtered.map((action) => (
+              <ActionRow
+                key={action.id}
+                action={action}
+                usage={usage[action.code] || EMPTY_USAGE}
+                expanded={expandedRows.has(action.id)}
+                canUpdate={canUpdate}
+                canDelete={canDelete}
+                onToggleExpand={() => toggleRow(action.id)}
+                onEdit={openEdit}
+                onDelete={requestDelete}
+              />
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {/* Create / Edit dialog */}
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent className="sm:max-w-[460px]">
+          <DialogHeader>
+            <DialogTitle>
+              {editing ? "Chỉnh sửa hành động" : "Thêm hành động mới"}
+            </DialogTitle>
+          </DialogHeader>
+          <div className="grid gap-4 py-2">
+            <div className="grid gap-2">
+              <Label htmlFor="action-code">Mã hành động</Label>
+              <Input
+                id="action-code"
+                placeholder="vd: view-report"
+                value={formData.code}
+                onChange={(e) =>
+                  setFormData({ ...formData, code: e.target.value })
+                }
+                disabled={!!editing}
+              />
+              <p className="text-[11px] text-muted-foreground">
+                Mã duy nhất dùng để kiểm tra quyền.
+              </p>
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="action-name">Tên hiển thị</Label>
+              <Input
+                id="action-name"
+                placeholder="vd: Xem báo cáo"
+                value={formData.name}
+                onChange={(e) =>
+                  setFormData({ ...formData, name: e.target.value })
+                }
+              />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="action-desc">Mô tả</Label>
+              <Textarea
+                id="action-desc"
+                placeholder="Mô tả chi tiết về hành động này…"
+                value={formData.description}
+                onChange={(e) =>
+                  setFormData({ ...formData, description: e.target.value })
+                }
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsDialogOpen(false)}>
+              Hủy
+            </Button>
+            <Button variant="accent" onClick={handleSubmit}>
+              {editing ? "Cập nhật" : "Tạo mới"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <ConfirmDialog
+        open={confirmOpen}
+        onOpenChange={setConfirmOpen}
+        title="Xác nhận xóa"
+        description={`Bạn có chắc chắn muốn xóa hành động "${toDelete?.name}" không? Hành động này không thể hoàn tác.`}
+        onConfirm={handleConfirmDelete}
+        loading={isDeleting}
+      />
+    </section>
+  );
+}
+
+// --- Một dòng hành động (editorial): tên + mã·mô tả; số liệu dạng chữ; bung ra
+// hiển thị quan hệ dạng DANH SÁCH CHỮ. Nút sửa/xóa hiển thị thường trực để
+// dùng được trên mobile (không có trạng thái hover). ---
+function ActionRow({
+  action,
+  usage,
+  expanded,
+  canUpdate,
+  canDelete,
+  onToggleExpand,
+  onEdit,
+  onDelete,
+}: {
+  action: Action;
+  usage: UsageEntry;
+  expanded: boolean;
+  canUpdate: boolean;
+  canDelete: boolean;
+  onToggleExpand: () => void;
+  onEdit: (a: Action) => void;
+  onDelete: (a: Action) => void;
+}) {
+  return (
+    <li>
+      <div
+        role="button"
+        tabIndex={0}
+        aria-expanded={expanded}
+        onClick={onToggleExpand}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onToggleExpand();
+          }
+        }}
+        className="flex cursor-pointer items-center gap-3 bg-card px-4 py-3 transition-colors hover:bg-muted/40"
+      >
+        {/* Tên + mã · mô tả */}
+        <div className="min-w-0 flex-1">
+          <div className="truncate text-sm font-medium text-foreground">
+            {action.name}
+          </div>
+          <p className="mt-0.5 truncate text-xs text-muted-foreground">
+            <code className="font-mono text-foreground/70">{action.code}</code>
+            {action.description ? ` · ${action.description}` : ""}
+          </p>
+        </div>
+
+        {/* Số liệu — chữ thường, không pill, không icon */}
+        <Metrics usage={usage} className="hidden sm:block" />
+
+        {/* Tác vụ — luôn hiện (mobile không có hover) */}
+        {canUpdate && (
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              onEdit(action);
+            }}
+            className="shrink-0 rounded-md border border-border bg-card p-1.5 text-muted-foreground shadow-sm transition-colors hover:bg-muted hover:text-foreground"
+            title="Sửa hành động"
+          >
+            <Pencil className="h-3.5 w-3.5" />
+          </button>
+        )}
+        {canDelete && (
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              onDelete(action);
+            }}
+            className="shrink-0 rounded-md border border-border bg-card p-1.5 text-muted-foreground shadow-sm transition-colors hover:border-destructive/30 hover:bg-destructive/10 hover:text-destructive"
+            title="Xóa hành động"
+          >
+            <Trash2 className="h-3.5 w-3.5" />
+          </button>
+        )}
+        <ChevronRight
+          className={cn(
+            "h-4 w-4 shrink-0 text-muted-foreground/50 transition-transform",
+            expanded && "rotate-90",
+          )}
+        />
+      </div>
+
+      {/* Bung: quan hệ dạng danh sách chữ (definition list) — nền trắng */}
+      {expanded && (
+        <div className="space-y-2.5 border-t border-border bg-card px-4 py-3.5">
+          <Metrics usage={usage} className="block sm:hidden" />
+          <DefRow
+            label="Tài nguyên"
+            empty="Chưa gán cho tài nguyên nào"
+            items={usage.resources.map((r) => ({ key: r.code, text: r.name }))}
+          />
+          <DefRow
+            label="Vai trò"
+            empty="Chưa thuộc vai trò nào"
+            items={usage.roles.map((r) => ({ key: r.code, text: r.name }))}
+          />
+          <DefRow
+            label="Người dùng"
+            empty="Chưa có người dùng nào được cấp"
+            items={usage.users.map((u) => ({
+              key: u.id,
+              text: u.name || u.email,
+              title: u.email,
+            }))}
+          />
+        </div>
+      )}
+    </li>
+  );
+}
+
+// Số liệu kiểu chữ: "30 tài nguyên · 8 vai trò · 30 người dùng" (số tabular,
+// đậm khi > 0; nhãn + dấu chấm phân tách màu nhạt).
+function Metrics({
+  usage,
+  className,
+}: {
+  usage: UsageEntry;
+  className?: string;
+}) {
+  const parts = [
+    { n: usage.resources.length, label: "tài nguyên" },
+    { n: usage.roles.length, label: "vai trò" },
+    { n: usage.users.length, label: "người dùng" },
+  ];
+  return (
+    <div
+      className={cn(
+        "shrink-0 whitespace-nowrap text-xs text-muted-foreground",
+        className,
+      )}
+    >
+      {parts.map((p, i) => (
+        <span key={p.label}>
+          {i > 0 && <span className="mx-1.5 text-border">·</span>}
+          <span
+            className={cn(
+              "tabular-nums",
+              p.n > 0 && "font-medium text-foreground",
+            )}
+          >
+            {p.n}
+          </span>{" "}
+          {p.label}
+        </span>
+      ))}
+    </div>
+  );
 }
 
-export function ActionListPage({
-  lang,
-  session,
-  dictionary,
-  config,
-}: ActionListPageProps) {
+// 1 dòng quan hệ: nhãn (small caps) + số đếm | danh sách tên phân tách dấu phẩy.
+function DefRow({
+  label,
+  empty,
+  items,
+}: {
+  label: string;
+  empty: string;
+  items: { key: string; text: string; title?: string }[];
+}) {
   return (
-    <EntityCrudPage
-      entity="actions"
-      lang={lang}
-      session={session}
-      dictionary={dictionary}
-      config={config}
-    />
+    <div className="flex flex-col gap-0.5 sm:flex-row sm:gap-4">
+      <div className="flex w-28 shrink-0 items-baseline gap-1.5 pt-px text-[11px] uppercase tracking-wide text-muted-foreground">
+        <span className="font-medium">{label}</span>
+        <span className="tabular-nums text-muted-foreground/60">
+          {items.length}
+        </span>
+      </div>
+      <div className="flex-1 text-xs leading-relaxed text-foreground/80">
+        {items.length === 0 ? (
+          <span className="italic text-muted-foreground">{empty}</span>
+        ) : (
+          items.map((it, i) => (
+            <span key={it.key}>
+              {i > 0 ? ", " : ""}
+              <span title={it.title}>{it.text}</span>
+            </span>
+          ))
+        )}
+      </div>
+    </div>
   );
 }

package/src/rbac/pages/index.ts

@@ -0,0 +1,13 @@
+// Barrel CLIENT-SAFE cho các trang RBAC — import qua `@goerp/core/rbac/pages`
+// để không kéo theo phần server (cache, service) của `@goerp/core/rbac`.
+
+export { RoleListPage } from "./role-list-page";
+export type { RoleListPageProps } from "./role-list-page";
+export { RoleFormPage } from "./role-form-page";
+export type {
+  RoleFormPageProps,
+  ActionLabelConfig,
+} from "./role-form-page";
+export { ResourceListPage } from "./resource-list-page";
+export { ActionListPage } from "./action-list-page";
+export type { ActionListPageProps } from "./action-list-page";