Add ops tools for payment incident triage and resolution

2026-03-21 13:44:32 +08:00
parent 0425c237b1
commit e662ef7d3b
6 changed files with 454 additions and 12 deletions
@@ -0,0 +1,44 @@
+import { NextRequest, NextResponse } from "next/server";
+import {
+  applyAuthResponseCookies,
+  buildBackendRequestHeaders,
+} from "@/lib/backend-auth";
+
+const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
+
+type RouteContext = {
+  params: Promise<{ eventId: string }>;
+};
+
+export async function POST(req: NextRequest, context: RouteContext) {
+  if (!API_BASE) {
+    return NextResponse.json(
+      { error: "POLYWEATHER_API_BASE_URL is not configured" },
+      { status: 500 },
+    );
+  }
+
+  try {
+    const auth = await buildBackendRequestHeaders(req);
+    const { eventId } = await context.params;
+    const res = await fetch(`${API_BASE}/api/ops/payments/incidents/${eventId}/resolve`, {
+      method: "POST",
+      headers: auth.headers,
+      cache: "no-store",
+    });
+    const raw = await res.text();
+    const response = new NextResponse(raw, {
+      status: res.status,
+      headers: {
+        "Content-Type": res.headers.get("content-type") || "application/json",
+        "Cache-Control": "no-store",
+      },
+    });
+    return applyAuthResponseCookies(response, auth.response);
+  } catch (error) {
+    return NextResponse.json(
+      { error: "Failed to resolve payment incident", detail: String(error) },
+      { status: 500 },
+    );
+  }
+}
@@ -0,0 +1,42 @@
+import { NextRequest, NextResponse } from "next/server";
+import {
+  applyAuthResponseCookies,
+  buildBackendRequestHeaders,
+} from "@/lib/backend-auth";
+
+const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
+
+export async function GET(req: NextRequest) {
+  if (!API_BASE) {
+    return NextResponse.json(
+      { error: "POLYWEATHER_API_BASE_URL is not configured" },
+      { status: 500 },
+    );
+  }
+
+  try {
+    const auth = await buildBackendRequestHeaders(req);
+    const url = new URL(`${API_BASE}/api/ops/payments/incidents`);
+    const limit = req.nextUrl.searchParams.get("limit");
+    if (limit) url.searchParams.set("limit", limit);
+
+    const res = await fetch(url.toString(), {
+      headers: auth.headers,
+      cache: "no-store",
+    });
+    const raw = await res.text();
+    const response = new NextResponse(raw, {
+      status: res.status,
+      headers: {
+        "Content-Type": res.headers.get("content-type") || "application/json",
+        "Cache-Control": "no-store",
+      },
+    });
+    return applyAuthResponseCookies(response, auth.response);
+  } catch (error) {
+    return NextResponse.json(
+      { error: "Failed to fetch payment incidents", detail: String(error) },
+      { status: 500 },
+    );
+  }
+}
@@ -53,9 +53,32 @@ type PaymentRuntimePayload = {
    id: number;
    event_type: string;
    created_at: string;
+    payload?: {
+      reason?: string;
+      detail?: string;
+      tx_hash?: string;
+      receiver_actual?: string;
+      receiver_expected?: string;
+    };
  }>;
 };

+type PaymentIncident = {
+  id: number;
+  event_type: string;
+  created_at: string;
+  payload?: {
+    reason?: string;
+    detail?: string;
+    tx_hash?: string;
+    receiver_actual?: string;
+    receiver_expected?: string;
+    plan_code?: string;
+    resolved_at?: string;
+    resolved_by?: string;
+  };
+};
+
 type AuthMePayload = {
  authenticated?: boolean;
  email?: string | null;
@@ -130,10 +153,14 @@ export function OpsDashboard() {
  const [searchQuery, setSearchQuery] = useState("");
  const [users, setUsers] = useState<OpsUser[]>([]);
  const [memberships, setMemberships] = useState<MembershipEntry[]>([]);
+  const [paymentIncidents, setPaymentIncidents] = useState<PaymentIncident[]>([]);
+  const [incidentReasonFilter, setIncidentReasonFilter] = useState("all");
  const [usersLoading, setUsersLoading] = useState(false);
  const [usersError, setUsersError] = useState<string | null>(null);
  const [leaderboard, setLeaderboard] = useState<WeeklyLeaderboardEntry[]>([]);
  const [membershipsLoading, setMembershipsLoading] = useState(false);
+  const [incidentsLoading, setIncidentsLoading] = useState(false);
+  const [resolvingIncidentId, setResolvingIncidentId] = useState<number | null>(null);
  const [grantEmail, setGrantEmail] = useState("");
  const [grantPoints, setGrantPoints] = useState("300");
  const [grantStatus, setGrantStatus] = useState<string | null>(null);
@@ -210,11 +237,47 @@ export function OpsDashboard() {
    }
  }, []);

+  const loadPaymentIncidents = useCallback(async (reasonFilter?: string) => {
+    setIncidentsLoading(true);
+    try {
+      const url = new URL("/api/ops/payments/incidents", window.location.origin);
+      url.searchParams.set("limit", "20");
+      const selectedReason = String(reasonFilter || incidentReasonFilter || "all");
+      if (selectedReason && selectedReason !== "all") {
+        url.searchParams.set("reason", selectedReason);
+      }
+      const data = await readJson<{ incidents?: PaymentIncident[] }>(url.toString());
+      setPaymentIncidents(data.incidents || []);
+    } catch {
+      setPaymentIncidents([]);
+    } finally {
+      setIncidentsLoading(false);
+    }
+  }, [incidentReasonFilter]);
+
  useEffect(() => {
    void loadUsers("");
    void loadLeaderboard();
    void loadMemberships();
-  }, [loadLeaderboard, loadMemberships, loadUsers]);
+    void loadPaymentIncidents(incidentReasonFilter);
+  }, [loadLeaderboard, loadMemberships, loadPaymentIncidents, loadUsers]);
+
+  const resolveIncident = useCallback(async (eventId: number) => {
+    setResolvingIncidentId(eventId);
+    try {
+      const response = await fetch(`/api/ops/payments/incidents/${eventId}/resolve`, {
+        method: "POST",
+      });
+      if (!response.ok) {
+        const raw = await response.text();
+        throw new Error(raw || `HTTP ${response.status}`);
+      }
+      await loadPaymentIncidents(incidentReasonFilter);
+      await load();
+    } finally {
+      setResolvingIncidentId(null);
+    }
+  }, [incidentReasonFilter, load, loadPaymentIncidents]);

  const rolloutDecision = status?.probability?.rollout?.decision;

@@ -256,12 +319,13 @@ export function OpsDashboard() {
      await loadUsers(searchQuery);
      await loadLeaderboard();
      await loadMemberships();
+      await loadPaymentIncidents(incidentReasonFilter);
    } catch (submitError) {
      setGrantError(String(submitError));
    } finally {
      setGrantLoading(false);
    }
-  }, [grantEmail, grantPoints, loadLeaderboard, loadMemberships, loadUsers, searchQuery]);
+  }, [grantEmail, grantPoints, incidentReasonFilter, loadLeaderboard, loadMemberships, loadPaymentIncidents, loadUsers, searchQuery]);

  return (
    <main className="min-h-screen bg-slate-950 px-4 py-8 text-slate-100 sm:px-6 lg:px-8">
@@ -419,6 +483,18 @@ export function OpsDashboard() {
                      <span className="text-xs text-slate-500">#{item.id}</span>
                    </div>
                    <div className="mt-1 text-xs text-slate-500">{formatDateTime(item.created_at)}</div>
+                    {item.payload?.reason ? (
+                      <div className="mt-2 space-y-1 text-xs text-amber-300">
+                        <div>原因: {item.payload.reason}</div>
+                        {item.payload.tx_hash ? <div>Tx: {maskUrl(item.payload.tx_hash)}</div> : null}
+                        {item.payload.receiver_actual ? (
+                          <div>实际收款: {maskUrl(item.payload.receiver_actual)}</div>
+                        ) : null}
+                        {item.payload.receiver_expected ? (
+                          <div>期望收款: {maskUrl(item.payload.receiver_expected)}</div>
+                        ) : null}
+                      </div>
+                    ) : null}
                  </div>
                ))}
                {!payments?.recent_audit_events?.length ? (
@@ -429,6 +505,83 @@ export function OpsDashboard() {
          </Card>
        </section>

+        <Card>
+          <CardHeader>
+            <div className="flex items-center justify-between gap-3">
+              <div>
+                <CardTitle>支付异常单</CardTitle>
+                <CardDescription>只显示已明确标记失败的支付确认事故。</CardDescription>
+              </div>
+              <div className="flex items-center gap-2">
+                <select
+                  className="rounded-xl border border-slate-700 bg-slate-950 px-3 py-2 text-sm text-slate-200"
+                  value={incidentReasonFilter}
+                  onChange={(event) => {
+                    const next = event.target.value;
+                    setIncidentReasonFilter(next);
+                    void loadPaymentIncidents(next);
+                  }}
+                >
+                  <option value="all">全部原因</option>
+                  <option value="receiver_mismatch">receiver_mismatch</option>
+                  <option value="sender_mismatch">sender_mismatch</option>
+                  <option value="event_mismatch">event_mismatch</option>
+                  <option value="tx_reverted">tx_reverted</option>
+                </select>
+                <Button variant="secondary" onClick={() => void loadPaymentIncidents(incidentReasonFilter)} disabled={incidentsLoading}>
+                  {incidentsLoading ? "加载中" : "刷新异常"}
+                </Button>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="overflow-x-auto rounded-2xl border border-slate-800 bg-slate-950/70">
+              <table className="min-w-full divide-y divide-slate-800 text-left text-sm">
+                <thead className="bg-slate-900/80 text-xs uppercase tracking-[0.14em] text-slate-500">
+                  <tr>
+                    <th className="px-4 py-3">时间</th>
+                    <th className="px-4 py-3">原因</th>
+                    <th className="px-4 py-3">套餐</th>
+                    <th className="px-4 py-3">Tx</th>
+                    <th className="px-4 py-3">实际收款</th>
+                    <th className="px-4 py-3">期望收款</th>
+                    <th className="px-4 py-3">操作</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-slate-800">
+                  {paymentIncidents.map((item) => (
+                    <tr key={item.id}>
+                      <td className="px-4 py-3">{formatDateTime(item.created_at)}</td>
+                      <td className="px-4 py-3">{item.payload?.reason || "-"}</td>
+                      <td className="px-4 py-3">{item.payload?.plan_code || "-"}</td>
+                      <td className="px-4 py-3">{maskUrl(item.payload?.tx_hash)}</td>
+                      <td className="px-4 py-3">{maskUrl(item.payload?.receiver_actual)}</td>
+                      <td className="px-4 py-3">{maskUrl(item.payload?.receiver_expected)}</td>
+                      <td className="px-4 py-3">
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => void resolveIncident(item.id)}
+                          disabled={resolvingIncidentId === item.id}
+                        >
+                          {resolvingIncidentId === item.id ? "处理中" : "标记已处理"}
+                        </Button>
+                      </td>
+                    </tr>
+                  ))}
+                  {!paymentIncidents.length ? (
+                    <tr>
+                      <td className="px-4 py-4 text-slate-500" colSpan={7}>
+                        暂无支付异常单
+                      </td>
+                    </tr>
+                  ) : null}
+                </tbody>
+              </table>
+            </div>
+          </CardContent>
+        </Card>
+
        <Card>
          <CardHeader>
            <CardTitle>当前会员</CardTitle>