chore: merge admin repo history into monorepo at admin/

git-subtree-dir: admin git-subtree-mainline: 35f5084005 git-subtree-split: 9f1eccd2f7
2026-09-27 10:30:47 +03:30
parent 35f5084005 9f1eccd2f7
commit 75a0ba593d
49 changed files with 11446 additions and 0 deletions
@@ -0,0 +1,203 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { Activity, AlertTriangle, Clock, Gauge, RefreshCw, Zap } from "lucide-react";
+import { Card } from "@/components/ui/Card";
+import { Badge } from "@/components/ui/Badge";
+import { Button } from "@/components/ui/Button";
+import { ErrorBanner } from "@/components/ui/ErrorBanner";
+import { FullScreenLoader } from "@/components/ui/FullScreenLoader";
+import { formatApiError } from "@/lib/hooks";
+import {
+  MonitoringSummary,
+  RequestLogEntry,
+  getMonitoringSummary,
+  getRecentRequests,
+} from "@/lib/api";
+
+const POLL_MS = 8_000;
+
+function StatCard({
+  icon,
+  label,
+  value,
+  tone = "neutral",
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: string;
+  tone?: "neutral" | "warning" | "error";
+}) {
+  const toneClasses =
+    tone === "error"
+      ? "text-(--color-status-error)"
+      : tone === "warning"
+        ? "text-amber-600"
+        : "text-(--color-brand-600)";
+  return (
+    <Card className="flex items-center gap-3">
+      <div className={`w-10 h-10 rounded-(--radius-md) bg-(--color-bg-secondary) flex items-center justify-center shrink-0 ${toneClasses}`}>
+        {icon}
+      </div>
+      <div>
+        <p className="text-[12px] text-(--color-content-tertiary)">{label}</p>
+        <p className="text-[19px] font-extrabold text-(--color-content-primary)">{value}</p>
+      </div>
+    </Card>
+  );
+}
+
+function statusTone(code: number): "success" | "warning" | "error" | "neutral" {
+  if (code >= 500) return "error";
+  if (code >= 400) return "warning";
+  if (code >= 200 && code < 300) return "success";
+  return "neutral";
+}
+
+function formatUptime(seconds: number): string {
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  if (h > 0) return `${h} ساعت و ${m} دقیقه`;
+  return `${m} دقیقه`;
+}
+
+export default function MonitoringPage() {
+  const [summary, setSummary] = useState<MonitoringSummary | null>(null);
+  const [requests, setRequests] = useState<RequestLogEntry[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    try {
+      const [s, r] = await Promise.all([getMonitoringSummary(), getRecentRequests(50)]);
+      setSummary(s);
+      setRequests(r);
+      setError(null);
+    } catch (err) {
+      setError(formatApiError(err));
+    }
+  }, []);
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    load();
+    const interval = setInterval(load, POLL_MS);
+    return () => clearInterval(interval);
+  }, [load]);
+
+  if (!summary || !requests) {
+    if (error) {
+      return (
+        <div className="max-w-2xl">
+          <ErrorBanner message={error} />
+        </div>
+      );
+    }
+    return <FullScreenLoader label="آمار سرور رو میاریم..." />;
+  }
+
+  return (
+    <div className="flex flex-col gap-6 max-w-5xl">
+      <div className="flex items-center justify-between flex-wrap gap-3">
+        <div>
+          <h1 className="font-[var(--font-display)] font-extrabold text-[26px]">
+            مانیتورینگ سرور 📡
+          </h1>
+          <p className="text-[14px] text-(--color-content-secondary) mt-1">
+            وضعیت زنده‌ی بک‌اند — هر {POLL_MS / 1000} ثانیه خودکار به‌روز می‌شه.
+          </p>
+        </div>
+        <Button variant="tertiary" size="sm" icon={<RefreshCw size={14} />} onClick={load}>
+          تازه‌سازی
+        </Button>
+      </div>
+
+      {error && <ErrorBanner message={error} />}
+
+      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        <StatCard
+          icon={<Activity size={18} />}
+          label="کل درخواست‌ها (از زمان اجرا)"
+          value={summary.total_requests.toLocaleString("fa-IR")}
+        />
+        <StatCard
+          icon={<Zap size={18} />}
+          label="درخواست در دقیقه‌ی اخیر"
+          value={summary.requests_last_min.toLocaleString("fa-IR")}
+        />
+        <StatCard
+          icon={<Clock size={18} />}
+          label="زمان پاسخ میانگین"
+          value={`${summary.avg_latency_ms.toFixed(1)} ms`}
+        />
+        <StatCard
+          icon={<Gauge size={18} />}
+          label="زمان پاسخ p95"
+          value={`${summary.p95_latency_ms.toFixed(1)} ms`}
+        />
+        <StatCard
+          icon={<AlertTriangle size={18} />}
+          label="نرخ خطا"
+          value={`${summary.error_rate_pct.toFixed(1)}%`}
+          tone={summary.error_rate_pct > 5 ? "error" : summary.error_rate_pct > 0 ? "warning" : "neutral"}
+        />
+        <StatCard
+          icon={<Activity size={18} />}
+          label="مدت زمان روشن بودن سرور"
+          value={formatUptime(summary.uptime_seconds)}
+        />
+      </div>
+
+      <Card padded={false} className="overflow-hidden">
+        <div className="px-5 py-4 border-b border-(--color-border-subtle)">
+          <h2 className="font-bold text-[15px]">آخرین درخواست‌ها</h2>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="w-full text-[13px]">
+            <thead>
+              <tr className="text-(--color-content-tertiary) text-[11px] border-b border-(--color-border-subtle)">
+                <th className="text-right font-semibold px-5 py-2.5">متد</th>
+                <th className="text-right font-semibold px-5 py-2.5">مسیر</th>
+                <th className="text-right font-semibold px-5 py-2.5">وضعیت</th>
+                <th className="text-right font-semibold px-5 py-2.5">مدت</th>
+                <th className="text-right font-semibold px-5 py-2.5">IP</th>
+                <th className="text-right font-semibold px-5 py-2.5">زمان</th>
+              </tr>
+            </thead>
+            <tbody>
+              {requests.length === 0 ? (
+                <tr>
+                  <td colSpan={6} className="text-center text-(--color-content-tertiary) py-8">
+                    هنوز درخواستی ثبت نشده
+                  </td>
+                </tr>
+              ) : (
+                requests.map((r, i) => (
+                  <tr key={i} className="border-b border-(--color-border-subtle) last:border-0">
+                    <td className="px-5 py-2.5 font-bold" dir="ltr">
+                      {r.method}
+                    </td>
+                    <td className="px-5 py-2.5 font-mono text-[12px] text-(--color-content-secondary)" dir="ltr">
+                      {r.path || "—"}
+                    </td>
+                    <td className="px-5 py-2.5">
+                      <Badge tone={statusTone(r.status_code)}>{r.status_code}</Badge>
+                    </td>
+                    <td className="px-5 py-2.5" dir="ltr">
+                      {r.duration_ms.toFixed(1)} ms
+                    </td>
+                    <td className="px-5 py-2.5 text-(--color-content-tertiary)" dir="ltr">
+                      {r.client_ip}
+                    </td>
+                    <td className="px-5 py-2.5 text-(--color-content-tertiary)">
+                      {new Date(r.time).toLocaleTimeString("fa-IR")}
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+    </div>
+  );
+}