@goplusvn/core 0.1.53 → 0.1.55

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

@@ -0,0 +1,571 @@
+"use client";
+
+// Trang admin "Tác vụ định kỳ" dùng chung mọi app goerp (F1 batch 4) — hiển thị
+// job đang đăng ký trong tiến trình + trạng thái DB, bật/tắt, chạy tay, và mở
+// lịch sử thực thi từng lần. Engine: `@goerp/core/cron`
+// (`configureCronManager`) + feature `system-jobs` (goerp-features sync).
+// API do app cung cấp (mẫu vinhhoa: /api/admin/system/jobs).
+
+import { Fragment, useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import {
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../ui/primitives";
+import { CompactStatBar } from "../../ui/data-display/compact-stat-bar";
+import type { CompactStatItem } from "../../ui/data-display/compact-stat-bar";
+import {
+  Activity,
+  AlertTriangle,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  Clock,
+  Loader2,
+  Pause,
+  Play,
+  RefreshCw,
+  Terminal,
+  Timer,
+  Zap,
+} from "lucide-react";
+
+interface SystemJob {
+  name: string;
+  cronTime: string;
+  isRunning: boolean;
+  nextDate: string | null;
+  enabled: boolean;
+  status: "idle" | "running" | "failed" | "stopped";
+  lastRun: string | null;
+  nextRun: string | null;
+  error: string | null;
+  // False = job chỉ còn trong DB (lịch sử), không đăng ký trong tiến trình hiện
+  // tại → không thể chạy/tạm dừng, nhưng vẫn xem lại được lịch sử thực thi.
+  inMemory?: boolean;
+}
+
+interface ExecutionLog {
+  id: string;
+  jobName: string;
+  startedAt: string;
+  finishedAt: string | null;
+  durationMs: number | null;
+  status: "running" | "success" | "failed";
+  error: string | null;
+  summary: string | null;
+  actions: Array<{ time: string; action: string; details?: string }> | null;
+}
+
+function formatDuration(ms: number | null): string {
+  if (!ms) return "-";
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  return `${Math.floor(ms / 60000)}m ${Math.floor((ms % 60000) / 1000)}s`;
+}
+
+function formatDateTime(s: string | null): string {
+  if (!s) return "-";
+  return new Date(s).toLocaleString("vi-VN", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+}
+
+function StatusBadge({
+  status,
+}: {
+  status: SystemJob["status"] | ExecutionLog["status"];
+}) {
+  const map: Record<string, { label: string; className: string }> = {
+    idle: { label: "Chờ", className: "bg-muted text-muted-foreground" },
+    stopped: { label: "Dừng", className: "bg-muted text-muted-foreground" },
+    running: { label: "Đang chạy", className: "bg-info-subtle text-info-text" },
+    failed: { label: "Lỗi", className: "bg-danger-subtle text-danger-text" },
+    success: {
+      label: "Thành công",
+      className: "bg-success-subtle text-success-text",
+    },
+  };
+  const cfg = map[status] || {
+    label: status,
+    className: "bg-muted text-muted-foreground",
+  };
+  return (
+    <span
+      className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium ${cfg.className}`}
+    >
+      {status === "running" && <RefreshCw className="h-3 w-3 animate-spin" />}
+      {status === "failed" && <AlertTriangle className="h-3 w-3" />}
+      {cfg.label}
+    </span>
+  );
+}
+
+function ExecutionHistoryPanel({
+  jobName,
+  apiUrl,
+}: {
+  jobName: string;
+  apiUrl: string;
+}) {
+  const [logs, setLogs] = useState<ExecutionLog[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
+
+  const PAGE_SIZE = 10;
+
+  const fetchHistory = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(
+        `${apiUrl}/${encodeURIComponent(jobName)}/history?skip=${page * PAGE_SIZE}&take=${PAGE_SIZE}`,
+      );
+      if (res.ok) {
+        const data = await res.json();
+        setLogs(data.data || []);
+        setTotal(data.meta?.total || 0);
+      } else {
+        // Phân biệt "lỗi tải" với "không có dữ liệu" — tránh báo nhầm "chưa có lịch sử".
+        setError(`Không tải được lịch sử (HTTP ${res.status})`);
+      }
+    } catch {
+      setError("Không tải được lịch sử (lỗi kết nối)");
+    } finally {
+      setLoading(false);
+    }
+  }, [apiUrl, jobName, page]);
+
+  useEffect(() => {
+    fetchHistory();
+  }, [fetchHistory]);
+
+  const toggleExpand = (id: string) =>
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+
+  const totalPages = Math.ceil(total / PAGE_SIZE);
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <span className="text-xs text-muted-foreground">
+          {total} lần thực thi
+        </span>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-6 text-xs"
+          onClick={fetchHistory}
+        >
+          <RefreshCw className="h-3 w-3 mr-1" /> Tải lại
+        </Button>
+      </div>
+
+      {loading ? (
+        <div className="flex justify-center py-4">
+          <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+        </div>
+      ) : error ? (
+        <div className="flex items-center justify-center gap-1.5 py-6 text-xs text-destructive">
+          <AlertTriangle className="h-3.5 w-3.5" />
+          {error}
+        </div>
+      ) : logs.length === 0 ? (
+        <div className="text-center py-6 text-xs text-muted-foreground">
+          Chưa có lịch sử thực thi
+        </div>
+      ) : (
+        <div className="space-y-1">
+          {logs.map((log) => {
+            const isExpanded = expandedIds.has(log.id);
+            const actions = Array.isArray(log.actions) ? log.actions : [];
+            return (
+              <div key={log.id} className="rounded border bg-card text-sm">
+                <div
+                  className="flex items-center gap-3 px-3 py-2 cursor-pointer hover:bg-muted/40"
+                  onClick={() => toggleExpand(log.id)}
+                >
+                  <StatusBadge status={log.status} />
+                  <span className="text-xs text-muted-foreground font-mono">
+                    {formatDateTime(log.startedAt)}
+                  </span>
+                  <span className="flex items-center gap-1 text-xs text-muted-foreground ml-auto">
+                    <Timer className="h-3 w-3" />
+                    {formatDuration(log.durationMs)}
+                  </span>
+                  {actions.length > 0 && (
+                    <span className="text-xs text-muted-foreground">
+                      {actions.length} actions
+                    </span>
+                  )}
+                  {isExpanded ? (
+                    <ChevronUp className="h-3 w-3 text-muted-foreground" />
+                  ) : (
+                    <ChevronDown className="h-3 w-3 text-muted-foreground" />
+                  )}
+                </div>
+
+                {isExpanded && (
+                  <div className="border-t px-3 py-2 space-y-2 bg-muted/20">
+                    {log.error && (
+                      <div className="rounded bg-danger-subtle border border-danger-border px-2 py-1.5">
+                        <span className="text-xs font-medium text-danger-text">
+                          Lỗi:{" "}
+                        </span>
+                        <span className="text-xs text-danger-text">
+                          {log.error}
+                        </span>
+                      </div>
+                    )}
+                    {log.summary && (
+                      <p className="text-xs text-muted-foreground">
+                        {log.summary}
+                      </p>
+                    )}
+                    {actions.length > 0 && (
+                      <div className="space-y-0.5">
+                        <p className="text-xs font-medium text-muted-foreground mb-1">
+                          <Terminal className="h-3 w-3 inline mr-1" />
+                          Actions log:
+                        </p>
+                        {actions.map((a, i) => (
+                          <div key={i} className="flex gap-2 text-xs font-mono">
+                            <span className="text-muted-foreground shrink-0">
+                              {new Date(a.time).toLocaleTimeString("vi-VN")}
+                            </span>
+                            <span className="text-foreground">{a.action}</span>
+                            {a.details && (
+                              <span className="text-muted-foreground">
+                                {a.details}
+                              </span>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {totalPages > 1 && (
+        <div className="flex items-center justify-between pt-1">
+          <span className="text-xs text-muted-foreground">
+            Trang {page + 1}/{totalPages}
+          </span>
+          <div className="flex gap-1">
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-6 w-6 p-0"
+              disabled={page === 0}
+              onClick={() => setPage((p) => p - 1)}
+            >
+              <ChevronLeft className="h-3 w-3" />
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-6 w-6 p-0"
+              disabled={page >= totalPages - 1}
+              onClick={() => setPage((p) => p + 1)}
+            >
+              <ChevronRight className="h-3 w-3" />
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function SystemJobsPage({
+  apiUrl = "/api/admin/system/jobs",
+}: {
+  /** Endpoint app cung cấp: GET danh sách, POST {name, action}, GET <name>/history. */
+  apiUrl?: string;
+} = {}) {
+  const [jobs, setJobs] = useState<SystemJob[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [expandedJob, setExpandedJob] = useState<string | null>(null);
+  const [actionLoading, setActionLoading] = useState<string | null>(null);
+
+  // silent = poll nền: KHÔNG bật loading / KHÔNG toast lỗi → bảng không nhấp nháy.
+  const fetchJobs = useCallback(
+    async (silent = false) => {
+      if (!silent) setLoading(true);
+      try {
+        const res = await fetch(apiUrl);
+        if (res.ok) {
+          const data = await res.json();
+          setJobs(data.data || []);
+        }
+      } catch {
+        if (!silent) toast.error("Không thể tải danh sách jobs");
+      } finally {
+        if (!silent) setLoading(false);
+      }
+    },
+    [apiUrl],
+  );
+
+  useEffect(() => {
+    fetchJobs(); // lần đầu: hiện loading
+    const interval = setInterval(() => fetchJobs(true), 15000); // poll nền im lặng mỗi 15s
+    return () => clearInterval(interval);
+  }, [fetchJobs]);
+
+  const handleAction = async (name: string, action: "toggle" | "run") => {
+    setActionLoading(`${name}-${action}`);
+    try {
+      const res = await fetch(apiUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name, action }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        toast.success(data.message);
+        await fetchJobs();
+      } else {
+        toast.error(data.error || "Thao tác thất bại");
+      }
+    } catch {
+      toast.error("Lỗi kết nối máy chủ");
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
+  const totalJobs = jobs.length;
+  const runningJobs = jobs.filter((j) => j.isRunning).length;
+  const failedJobs = jobs.filter((j) => j.status === "failed").length;
+
+  const statItems: CompactStatItem[] = [
+    {
+      id: "total",
+      label: "TỔNG JOBS",
+      value: totalJobs,
+      icon: Clock,
+      colorTheme: "dark",
+    },
+    {
+      id: "running",
+      label: "ĐANG CHẠY",
+      value: runningJobs,
+      icon: Activity,
+      colorTheme: "blue",
+    },
+    {
+      id: "failed",
+      label: "LỖI",
+      value: failedJobs,
+      icon: AlertTriangle,
+      colorTheme: "destructive",
+    },
+  ];
+
+  return (
+    <div className="flex flex-col h-full gap-2 overflow-hidden">
+      <CompactStatBar items={statItems} />
+
+      {/* Toolbar */}
+      <div className="flex items-center justify-end shrink-0">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => fetchJobs()}
+          disabled={loading}
+        >
+          <RefreshCw
+            className={`h-4 w-4 mr-1 ${loading ? "animate-spin" : ""}`}
+          />
+          Làm mới
+        </Button>
+      </div>
+
+      {/* Jobs table */}
+      <div className="flex-1 min-h-0 overflow-auto border bg-card rounded-md shadow-sm">
+        {loading && jobs.length === 0 ? (
+          <div className="flex items-center justify-center py-16">
+            <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+            <span className="ml-2 text-sm text-muted-foreground">
+              Đang tải...
+            </span>
+          </div>
+        ) : (
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-8" />
+                <TableHead>Tên Job</TableHead>
+                <TableHead className="w-[140px]">Lịch chạy</TableHead>
+                <TableHead className="w-[110px]">Trạng thái</TableHead>
+                <TableHead className="w-[160px]">Lần chạy cuối</TableHead>
+                <TableHead className="w-[160px]">Lần chạy kế</TableHead>
+                <TableHead className="w-[130px] text-right">Thao tác</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {jobs.length === 0 ? (
+                <TableRow>
+                  <TableCell
+                    colSpan={7}
+                    className="text-center py-10 text-muted-foreground"
+                  >
+                    Chưa có jobs nào được đăng ký
+                  </TableCell>
+                </TableRow>
+              ) : (
+                jobs.map((job) => (
+                  <Fragment key={job.name}>
+                    <TableRow
+                      className="cursor-pointer"
+                      onClick={() =>
+                        setExpandedJob(
+                          expandedJob === job.name ? null : job.name,
+                        )
+                      }
+                    >
+                      <TableCell className="w-8 pr-0">
+                        {expandedJob === job.name ? (
+                          <ChevronUp className="h-3.5 w-3.5 text-muted-foreground" />
+                        ) : (
+                          <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+                        )}
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex items-center gap-1.5">
+                          <span className="font-medium text-sm">
+                            {job.name}
+                          </span>
+                          {job.inMemory === false && (
+                            <span
+                              className="rounded-full bg-warning-subtle px-1.5 py-0.5 text-[10px] font-medium text-warning-text"
+                              title="Job không đăng ký trong tiến trình này — chỉ xem lịch sử, không chạy/tạm dừng được"
+                            >
+                              Chỉ lịch sử
+                            </span>
+                          )}
+                        </div>
+                        {job.error && (
+                          <div
+                            className="text-xs text-destructive mt-0.5 truncate max-w-[220px]"
+                            title={job.error}
+                          >
+                            {job.error}
+                          </div>
+                        )}
+                      </TableCell>
+                      <TableCell>
+                        <code className="text-xs bg-muted px-1.5 py-0.5 rounded font-mono">
+                          {job.cronTime}
+                        </code>
+                      </TableCell>
+                      <TableCell>
+                        <StatusBadge status={job.status} />
+                      </TableCell>
+                      <TableCell className="text-xs text-muted-foreground font-mono">
+                        {formatDateTime(job.lastRun)}
+                      </TableCell>
+                      <TableCell className="text-xs text-muted-foreground font-mono">
+                        {formatDateTime(job.nextRun || job.nextDate)}
+                      </TableCell>
+                      <TableCell
+                        className="text-right"
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        <div className="flex items-center justify-end gap-1">
+                          {/* Chạy ngay */}
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            className="h-7 text-xs"
+                            disabled={!!actionLoading || job.inMemory === false}
+                            onClick={() => handleAction(job.name, "run")}
+                            title={
+                              job.inMemory === false
+                                ? "Không khả dụng — job không đăng ký trong tiến trình này"
+                                : "Chạy ngay"
+                            }
+                          >
+                            {actionLoading === `${job.name}-run` ? (
+                              <Loader2 className="h-3 w-3 animate-spin" />
+                            ) : (
+                              <Zap className="h-3 w-3" />
+                            )}
+                          </Button>
+                          {/* Bật/tắt */}
+                          <Button
+                            variant={job.enabled ? "default" : "outline"}
+                            size="sm"
+                            className="h-7 text-xs"
+                            disabled={!!actionLoading || job.inMemory === false}
+                            onClick={() => handleAction(job.name, "toggle")}
+                            title={
+                              job.inMemory === false
+                                ? "Không khả dụng — job không đăng ký trong tiến trình này"
+                                : job.enabled
+                                  ? "Tạm dừng"
+                                  : "Bật lại"
+                            }
+                          >
+                            {actionLoading === `${job.name}-toggle` ? (
+                              <Loader2 className="h-3 w-3 animate-spin" />
+                            ) : job.enabled ? (
+                              <Pause className="h-3 w-3" />
+                            ) : (
+                              <Play className="h-3 w-3" />
+                            )}
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+
+                    {/* Hàng lịch sử thực thi */}
+                    {expandedJob === job.name && (
+                      <TableRow>
+                        <TableCell />
+                        <TableCell
+                          colSpan={6}
+                          className="bg-muted/30 px-4 py-3"
+                        >
+                          <ExecutionHistoryPanel
+                            jobName={job.name}
+                            apiUrl={apiUrl}
+                          />
+                        </TableCell>
+                      </TableRow>
+                    )}
+                  </Fragment>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        )}
+      </div>
+    </div>
+  );
+}