@goplusvn/core 0.1.54 → 0.1.55

package/src/system/pages/system-audit-page.tsx

@@ -0,0 +1,532 @@
+"use client";
+
+import {
+  CalendarDays,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  Filter,
+  Loader2,
+  RefreshCw,
+  ScrollText,
+  Search,
+  X,
+} from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../ui";
+
+/**
+ * Trang "Nhật ký hệ thống" — đọc bảng `audit_logs` (feature `audit-logs`).
+ * Lọc SERVER-SIDE hết (search/action/resource/khoảng ngày + phân trang): bảng
+ * này nhanh chóng lên hàng triệu dòng, lọc ở client là tải chết trình duyệt.
+ *
+ * `actions`/`resources` là DỮ LIỆU CỦA APP (nhãn tiếng Việt + màu badge cho
+ * hành động nghiệp vụ riêng) — core chỉ thủ sẵn create/update/delete.
+ */
+
+export interface AuditActionOption {
+  value: string;
+  label: string;
+  /** Class nền badge, vd "bg-emerald-500". */
+  color?: string;
+}
+
+export interface AuditResourceOption {
+  value: string;
+  label: string;
+}
+
+/** Ba hành động extension tự sinh — app nào cũng có. */
+export const BASE_AUDIT_ACTIONS: AuditActionOption[] = [
+  { value: "create", label: "Tạo mới", color: "bg-emerald-500" },
+  { value: "update", label: "Cập nhật", color: "bg-blue-500" },
+  { value: "delete", label: "Xóa", color: "bg-red-500" },
+];
+
+interface AuditLogEntry {
+  id: string;
+  action: string;
+  resource: string;
+  resourceId: string | null;
+  userId: string | null;
+  description: string | null;
+  oldData: Record<string, unknown> | null;
+  newData: Record<string, unknown> | null;
+  createdAt: string;
+  user?: { id: string; name: string | null; email: string | null } | null;
+}
+
+interface AuditResponse {
+  data: AuditLogEntry[];
+  meta: { total: number; skip: number; take: number; hasMore: boolean };
+}
+
+const PAGE_SIZE = 30;
+
+function formatTime(dateStr: string) {
+  return new Date(dateStr).toLocaleString("vi-VN", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+}
+
+function DataChanges({
+  oldData,
+  newData,
+}: {
+  oldData: Record<string, unknown> | null;
+  newData: Record<string, unknown> | null;
+}) {
+  if (!oldData && !newData) return null;
+  const hideKeys = new Set([
+    "id",
+    "createdAt",
+    "updatedAt",
+    "updatedBy",
+    "createdBy",
+  ]);
+  const allKeys = Array.from(
+    new Set([...Object.keys(oldData || {}), ...Object.keys(newData || {})]),
+  ).filter((k) => !hideKeys.has(k));
+
+  const changedKeys = allKeys.filter((k) => {
+    const ov = oldData?.[k],
+      nv = newData?.[k];
+    if (JSON.stringify(ov) === JSON.stringify(nv)) return false;
+    if (typeof ov === "object" && typeof nv === "object") return false;
+    return true;
+  });
+
+  if (changedKeys.length === 0) return null;
+
+  return (
+    <div className="space-y-0.5 mt-1">
+      {changedKeys.slice(0, 8).map((key) => {
+        const ov = oldData?.[key],
+          nv = newData?.[key];
+        return (
+          <div key={key} className="flex items-start gap-1.5 text-xs">
+            <span className="text-muted-foreground font-medium min-w-[80px] shrink-0">
+              {key}:
+            </span>
+            {ov !== undefined && nv !== undefined ? (
+              <span>
+                <span className="text-destructive line-through mr-1">
+                  {String(ov ?? "—")}
+                </span>
+                <span className="text-muted-foreground mx-0.5">→</span>
+                <span className="text-emerald-600 font-medium">
+                  {String(nv ?? "—")}
+                </span>
+              </span>
+            ) : (
+              <span className="text-muted-foreground">
+                {String(nv ?? ov ?? "—")}
+              </span>
+            )}
+          </div>
+        );
+      })}
+      {changedKeys.length > 8 && (
+        <span className="text-xs text-muted-foreground">
+          +{changedKeys.length - 8} trường khác
+        </span>
+      )}
+    </div>
+  );
+}
+
+export interface SystemAuditPageProps {
+  /** Endpoint danh sách nhật ký. Mặc định /api/admin/system/audit. */
+  apiUrl?: string;
+  /** Hành động của app (nhãn + màu). Mặc định chỉ create/update/delete. */
+  actions?: AuditActionOption[];
+  /** Đối tượng của app. Rỗng thì ẩn hẳn bộ lọc đối tượng. */
+  resources?: AuditResourceOption[];
+}
+
+export function SystemAuditPage({
+  apiUrl = "/api/admin/system/audit",
+  actions = BASE_AUDIT_ACTIONS,
+  resources = [],
+}: SystemAuditPageProps = {}) {
+  const [data, setData] = useState<AuditResponse | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [page, setPage] = useState(0);
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
+
+  // Bộ lọc — tất cả đẩy xuống server
+  const [search, setSearch] = useState("");
+  const [searchInput, setSearchInput] = useState(""); // đệm debounce
+  const [actionFilter, setActionFilter] = useState("all");
+  const [resourceFilter, setResourceFilter] = useState("all");
+  const [startDate, setStartDate] = useState("");
+  const [endDate, setEndDate] = useState("");
+
+  const actionMap = new Map(actions.map((a) => [a.value, a]));
+  const resourceMap = new Map(resources.map((r) => [r.value, r.label]));
+
+  const searchTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const handleSearchInput = (val: string) => {
+    setSearchInput(val);
+    if (searchTimer.current) clearTimeout(searchTimer.current);
+    searchTimer.current = setTimeout(() => {
+      setSearch(val);
+      setPage(0);
+    }, 400);
+  };
+
+  const fetchLogs = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const params = new URLSearchParams();
+      params.set("skip", String(page * PAGE_SIZE));
+      params.set("take", String(PAGE_SIZE));
+      if (search) params.set("search", search);
+      if (actionFilter !== "all") params.set("action", actionFilter);
+      if (resourceFilter !== "all") params.set("resource", resourceFilter);
+      if (startDate) params.set("startDate", new Date(startDate).toISOString());
+      if (endDate)
+        params.set("endDate", new Date(endDate + "T23:59:59").toISOString());
+
+      const res = await fetch(`${apiUrl}?${params}`);
+      if (res.ok) setData(await res.json());
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [apiUrl, page, search, actionFilter, resourceFilter, startDate, endDate]);
+
+  useEffect(() => {
+    fetchLogs();
+  }, [fetchLogs]);
+
+  const clearFilters = () => {
+    setSearchInput("");
+    setSearch("");
+    setActionFilter("all");
+    setResourceFilter("all");
+    setStartDate("");
+    setEndDate("");
+    setPage(0);
+  };
+
+  const hasActiveFilters =
+    search ||
+    actionFilter !== "all" ||
+    resourceFilter !== "all" ||
+    startDate ||
+    endDate;
+
+  const totalPages = data ? Math.ceil(data.meta.total / PAGE_SIZE) : 0;
+
+  return (
+    <div className="p-4 sm:p-6 space-y-4 h-full flex flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-xl font-bold tracking-tight flex items-center gap-2">
+            <ScrollText className="h-5 w-5" />
+            Nhật ký hệ thống
+          </h1>
+          <p className="text-sm text-muted-foreground">
+            Theo dõi mọi thay đổi dữ liệu
+            {data && (
+              <span className="ml-1 text-xs">
+                ({data.meta.total.toLocaleString()} bản ghi)
+              </span>
+            )}
+          </p>
+        </div>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={fetchLogs}
+          disabled={isLoading}
+        >
+          <RefreshCw
+            className={`h-4 w-4 mr-1 ${isLoading ? "animate-spin" : ""}`}
+          />
+          Làm mới
+        </Button>
+      </div>
+
+      {/* Bộ lọc */}
+      <Card>
+        <CardHeader className="py-3">
+          <CardTitle className="text-sm font-medium flex items-center justify-between">
+            <span className="flex items-center gap-1.5">
+              <Filter className="h-3.5 w-3.5" />
+              Bộ lọc
+            </span>
+            {hasActiveFilters && (
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 text-xs"
+                onClick={clearFilters}
+              >
+                <X className="h-3 w-3 mr-1" /> Xóa bộ lọc
+              </Button>
+            )}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="pb-3">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
+            <div className="relative sm:col-span-2 lg:col-span-1">
+              <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+              <Input
+                placeholder="Tìm theo mô tả, ID, resource..."
+                value={searchInput}
+                onChange={(e) => handleSearchInput(e.target.value)}
+                className="h-8 text-sm pl-8"
+              />
+            </div>
+
+            <Select
+              value={actionFilter}
+              onValueChange={(v) => {
+                setActionFilter(v);
+                setPage(0);
+              }}
+            >
+              <SelectTrigger className="h-8 text-sm">
+                <SelectValue placeholder="Tất cả hành động" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">Tất cả hành động</SelectItem>
+                {actions.map((a) => (
+                  <SelectItem key={a.value} value={a.value}>
+                    {a.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+
+            {resources.length > 0 && (
+              <Select
+                value={resourceFilter}
+                onValueChange={(v) => {
+                  setResourceFilter(v);
+                  setPage(0);
+                }}
+              >
+                <SelectTrigger className="h-8 text-sm">
+                  <SelectValue placeholder="Tất cả đối tượng" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">Tất cả đối tượng</SelectItem>
+                  {resources.map((r) => (
+                    <SelectItem key={r.value} value={r.value}>
+                      {r.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+
+            <div className="flex items-center gap-2 sm:col-span-2 lg:col-span-1">
+              <CalendarDays className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+              <Input
+                type="date"
+                value={startDate}
+                onChange={(e) => {
+                  setStartDate(e.target.value);
+                  setPage(0);
+                }}
+                className="h-8 text-xs flex-1"
+              />
+              <span className="text-muted-foreground text-xs">—</span>
+              <Input
+                type="date"
+                value={endDate}
+                onChange={(e) => {
+                  setEndDate(e.target.value);
+                  setPage(0);
+                }}
+                className="h-8 text-xs flex-1"
+              />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Bảng */}
+      <Card className="flex-1 flex flex-col min-h-0">
+        <CardContent className="flex-1 overflow-auto p-0">
+          {isLoading ? (
+            <div className="flex items-center justify-center py-16">
+              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+              <span className="ml-2 text-sm text-muted-foreground">
+                Đang tải nhật ký...
+              </span>
+            </div>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-[150px]">Thời gian</TableHead>
+                  <TableHead className="w-[130px]">Hành động</TableHead>
+                  <TableHead className="w-[140px]">Đối tượng</TableHead>
+                  <TableHead className="w-[140px]">Người thực hiện</TableHead>
+                  <TableHead>Chi tiết</TableHead>
+                  <TableHead className="w-[36px]" />
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {(!data?.data || data.data.length === 0) && (
+                  <TableRow>
+                    <TableCell
+                      colSpan={6}
+                      className="text-center h-24 text-muted-foreground"
+                    >
+                      <ScrollText className="h-8 w-8 mx-auto mb-2 opacity-40" />
+                      Không tìm thấy nhật ký nào
+                    </TableCell>
+                  </TableRow>
+                )}
+                {data?.data.map((log) => {
+                  const actionCfg = actionMap.get(log.action);
+                  const isExpanded = expandedIds.has(log.id);
+                  const hasDetails =
+                    (log.oldData && Object.keys(log.oldData).length > 0) ||
+                    (log.newData && Object.keys(log.newData).length > 0);
+
+                  // Tên người: quan hệ user trước, không có thì bóc tiền tố
+                  // "[Tên]" mà logEntityAction/extension đã nhét vào mô tả.
+                  let userName = "Hệ thống";
+                  if (log.user?.name) userName = log.user.name;
+                  else if (log.user?.email) userName = log.user.email;
+                  else if (log.description) {
+                    const m = log.description.match(/^\[(.*?)\]/);
+                    if (m) userName = m[1];
+                  }
+
+                  const desc =
+                    log.description?.replace(/^\[.*?\]\s*/, "") || "";
+
+                  return (
+                    <TableRow key={log.id} className="align-top">
+                      <TableCell className="font-mono text-xs text-muted-foreground whitespace-nowrap">
+                        {formatTime(log.createdAt)}
+                      </TableCell>
+                      <TableCell>
+                        <Badge
+                          className={`text-[10px] text-white ${actionCfg?.color || "bg-slate-400"}`}
+                        >
+                          {actionCfg?.label || log.action}
+                        </Badge>
+                      </TableCell>
+                      <TableCell className="text-sm">
+                        <div>
+                          {resourceMap.get(log.resource) || log.resource}
+                        </div>
+                        {log.resourceId && (
+                          <div
+                            className="text-[10px] text-muted-foreground font-mono truncate max-w-[120px]"
+                            title={log.resourceId}
+                          >
+                            {log.resourceId}
+                          </div>
+                        )}
+                      </TableCell>
+                      <TableCell className="text-sm">{userName}</TableCell>
+                      <TableCell className="text-sm">
+                        <div className="text-muted-foreground">{desc}</div>
+                        {isExpanded && hasDetails && (
+                          <DataChanges
+                            oldData={log.oldData}
+                            newData={log.newData}
+                          />
+                        )}
+                      </TableCell>
+                      <TableCell>
+                        {hasDetails && (
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-6 w-6 p-0"
+                            onClick={() =>
+                              setExpandedIds((prev) => {
+                                const next = new Set(prev);
+                                if (next.has(log.id)) next.delete(log.id);
+                                else next.add(log.id);
+                                return next;
+                              })
+                            }
+                          >
+                            {isExpanded ? (
+                              <ChevronUp className="h-3 w-3" />
+                            ) : (
+                              <ChevronDown className="h-3 w-3" />
+                            )}
+                          </Button>
+                        )}
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+
+        {/* Phân trang */}
+        {totalPages > 1 && (
+          <div className="flex items-center justify-between px-4 py-2 border-t">
+            <span className="text-xs text-muted-foreground">
+              Trang {page + 1}/{totalPages} ·{" "}
+              {data?.meta.total.toLocaleString()} bản ghi
+            </span>
+            <div className="flex gap-1">
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-7"
+                disabled={page === 0}
+                onClick={() => setPage((p) => p - 1)}
+              >
+                <ChevronLeft className="h-3 w-3" />
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-7"
+                disabled={!data?.meta.hasMore}
+                onClick={() => setPage((p) => p + 1)}
+              >
+                <ChevronRight className="h-3 w-3" />
+              </Button>
+            </div>
+          </div>
+        )}
+      </Card>
+    </div>
+  );
+}