@wopr-network/platform-ui-core 1.0.0

package/src/components/admin/billing-health-dashboard.tsx

@@ -0,0 +1,416 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { toUserMessage } from "@/lib/errors";
+import { trpcVanilla } from "@/lib/trpc";
+import { cn } from "@/lib/utils";
+
+const POLL_INTERVAL_MS = 15_000;
+
+// ---------------------------------------------------------------------------
+// Types (mirrors admin.billingHealth return shape)
+// ---------------------------------------------------------------------------
+
+interface PaymentChecks {
+  stripeApi: { ok: boolean; latencyMs: number | null; error?: string };
+  webhookFreshness: { ok: boolean; lastEventAgeMs: number | null };
+  creditLedger: { ok: boolean; negativeBalanceTenants: number };
+  meterDlq: { ok: boolean; depth: number };
+  gatewayMetrics: { ok: boolean; errorRate: number; creditFailures: number };
+  alerts: { ok: boolean; firingCount: number; firingNames: string[] };
+}
+
+interface BillingHealthData {
+  timestamp: number;
+  overall: "healthy" | "degraded" | "outage";
+  severity: string | null;
+  reasons: string[];
+  gateway: {
+    last5m: {
+      totalRequests: number;
+      totalErrors: number;
+      errorRate: number;
+      byCapability: Record<string, { requests: number; errors: number; errorRate: number }>;
+    };
+    last60m: { totalRequests: number; totalErrors: number; errorRate: number };
+  };
+  paymentChecks: PaymentChecks | null;
+  alerts: Array<{ name: string; firing: boolean; message: string }>;
+  system: {
+    cpuLoad1m: number;
+    cpuCount: number;
+    memoryUsedBytes: number;
+    memoryTotalBytes: number;
+    diskUsedBytes: number;
+    diskTotalBytes: number;
+  } | null;
+  fleet: { activeBots: number | null };
+  business: {
+    creditsConsumed24h: number | null;
+    activeTenantCount: number | null;
+    revenueToday: number | null;
+    capabilityBreakdown: Array<{ capability: string; eventCount: number; totalCharge: number }>;
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Sub-components
+// ---------------------------------------------------------------------------
+
+type OverallStatus = "healthy" | "degraded" | "outage";
+
+function StatusBadge({ status }: { status: OverallStatus }) {
+  const colors: Record<OverallStatus, string> = {
+    healthy: "bg-green-500/15 text-green-400 border-green-500/20",
+    degraded: "bg-yellow-500/15 text-yellow-400 border-yellow-500/20",
+    outage: "bg-red-500/15 text-red-400 border-red-500/20",
+  };
+  return (
+    <Badge variant="secondary" className={cn("text-sm px-3 py-1 border", colors[status])}>
+      {status.toUpperCase()}
+    </Badge>
+  );
+}
+
+function CheckRow({ ok, label, detail }: { ok: boolean; label: string; detail?: string }) {
+  return (
+    <div className="flex items-center justify-between py-2 border-b border-border/50 last:border-0">
+      <div className="flex items-center gap-2">
+        <div
+          className={cn("w-2 h-2 rounded-full flex-shrink-0", ok ? "bg-green-500" : "bg-red-500")}
+        />
+        <span className="text-sm">{label}</span>
+      </div>
+      {detail && <span className="text-xs text-muted-foreground">{detail}</span>}
+    </div>
+  );
+}
+
+function MetricCard({ label, value, sub }: { label: string; value: string; sub?: string }) {
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-xs text-muted-foreground font-normal">{label}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold">{value}</div>
+        {sub && <div className="text-xs text-muted-foreground mt-1">{sub}</div>}
+      </CardContent>
+    </Card>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function formatBytes(bytes: number): string {
+  if (bytes >= 1_073_741_824) return `${(bytes / 1_073_741_824).toFixed(1)} GB`;
+  return `${Math.round(bytes / 1_048_576)} MB`;
+}
+
+function formatCents(cents: number | null): string {
+  if (cents === null) return "N/A";
+  return `$${(cents / 100).toFixed(2)}`;
+}
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+export function BillingHealthDashboard() {
+  const [data, setData] = useState<BillingHealthData | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
+
+  useEffect(() => {
+    let active = true;
+
+    async function poll() {
+      try {
+        const result = (await trpcVanilla.admin.billingHealth.query(
+          undefined,
+        )) as BillingHealthData;
+        if (active) {
+          setData(result);
+          setError(null);
+          setLastUpdated(new Date());
+        }
+      } catch (err) {
+        if (active) setError(toUserMessage(err, "Failed to fetch billing health"));
+      }
+    }
+
+    poll();
+    const timer = setInterval(poll, POLL_INTERVAL_MS);
+    return () => {
+      active = false;
+      clearInterval(timer);
+    };
+  }, []);
+
+  if (error) {
+    return (
+      <Card className="border-red-500/20 bg-red-500/5">
+        <CardContent className="pt-4">
+          <p className="text-sm text-red-400">Error loading billing health: {error}</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (!data) {
+    return (
+      <div className="space-y-6">
+        <Skeleton className="h-8 w-32" />
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          {(["requests", "error-rate", "bots", "revenue"] as const).map((id) => (
+            <Skeleton key={id} className="h-24" />
+          ))}
+        </div>
+        <Skeleton className="h-48" />
+      </div>
+    );
+  }
+
+  const capabilityEntries = Object.entries(data.gateway.last5m.byCapability);
+
+  return (
+    <div className="space-y-6">
+      {/* Header row */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <StatusBadge status={data.overall} />
+          {data.severity && (
+            <span className="text-sm text-muted-foreground font-medium">{data.severity}</span>
+          )}
+        </div>
+        {lastUpdated && (
+          <span className="text-xs text-muted-foreground">
+            Updated {lastUpdated.toLocaleTimeString()} · refreshes every 15s
+          </span>
+        )}
+      </div>
+
+      {/* Reason banners */}
+      {data.reasons.length > 0 && (
+        <Card className="border-red-500/20 bg-red-500/5">
+          <CardContent className="pt-4">
+            <ul className="space-y-1">
+              {data.reasons.map((reason) => (
+                <li key={reason} className="text-sm text-red-400">
+                  — {reason}
+                </li>
+              ))}
+            </ul>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Key metrics */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <MetricCard
+          label="Requests (5m)"
+          value={String(data.gateway.last5m.totalRequests)}
+          sub={`${data.gateway.last5m.totalErrors} errors`}
+        />
+        <MetricCard
+          label="Error Rate (5m)"
+          value={`${(data.gateway.last5m.errorRate * 100).toFixed(1)}%`}
+          sub={data.gateway.last5m.errorRate > 0.05 ? "above threshold" : "within threshold"}
+        />
+        <MetricCard
+          label="Active Bots"
+          value={data.fleet.activeBots !== null ? String(data.fleet.activeBots) : "N/A"}
+        />
+        <MetricCard
+          label="Revenue (24h)"
+          value={formatCents(data.business.revenueToday)}
+          sub={
+            data.business.activeTenantCount !== null
+              ? `${data.business.activeTenantCount} active tenants`
+              : undefined
+          }
+        />
+      </div>
+
+      {/* Payment health checks */}
+      {data.paymentChecks && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-sm">Payment Health Checks</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <CheckRow
+              ok={data.paymentChecks.stripeApi.ok}
+              label="Stripe API"
+              detail={
+                data.paymentChecks.stripeApi.latencyMs !== null
+                  ? `${data.paymentChecks.stripeApi.latencyMs}ms`
+                  : data.paymentChecks.stripeApi.error
+              }
+            />
+            <CheckRow
+              ok={data.paymentChecks.webhookFreshness.ok}
+              label="Webhook Freshness"
+              detail={
+                data.paymentChecks.webhookFreshness.lastEventAgeMs !== null
+                  ? `${Math.round(data.paymentChecks.webhookFreshness.lastEventAgeMs / 60_000)}m ago`
+                  : "no events"
+              }
+            />
+            <CheckRow
+              ok={data.paymentChecks.creditLedger.ok}
+              label="Credit Ledger"
+              detail={`${data.paymentChecks.creditLedger.negativeBalanceTenants} negative balances`}
+            />
+            <CheckRow
+              ok={data.paymentChecks.meterDlq.ok}
+              label="Meter DLQ"
+              detail={`${data.paymentChecks.meterDlq.depth} pending`}
+            />
+            <CheckRow
+              ok={data.paymentChecks.gatewayMetrics.ok}
+              label="Gateway Metrics"
+              detail={`${(data.paymentChecks.gatewayMetrics.errorRate * 100).toFixed(1)}% errors, ${data.paymentChecks.gatewayMetrics.creditFailures} credit failures`}
+            />
+            <CheckRow
+              ok={data.paymentChecks.alerts.ok}
+              label="Alerts"
+              detail={
+                data.paymentChecks.alerts.firingCount > 0
+                  ? data.paymentChecks.alerts.firingNames.join(", ")
+                  : "none firing"
+              }
+            />
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Alert statuses */}
+      {data.alerts.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-sm">Alert Status</CardTitle>
+          </CardHeader>
+          <CardContent>
+            {data.alerts.map((alert) => (
+              <CheckRow
+                key={alert.name}
+                ok={!alert.firing}
+                label={alert.name}
+                detail={alert.message}
+              />
+            ))}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* System resources */}
+      {data.system && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-sm">System Resources</CardTitle>
+          </CardHeader>
+          <CardContent className="grid grid-cols-3 gap-6">
+            <div>
+              <div className="text-xs text-muted-foreground mb-1">CPU</div>
+              <div className="text-lg font-medium">
+                {(data.system.cpuCount > 0
+                  ? (data.system.cpuLoad1m / data.system.cpuCount) * 100
+                  : 0
+                ).toFixed(0)}
+                %
+              </div>
+              <div className="text-xs text-muted-foreground">
+                Load {data.system.cpuLoad1m.toFixed(2)} / {data.system.cpuCount} cores
+              </div>
+            </div>
+            <div>
+              <div className="text-xs text-muted-foreground mb-1">Memory</div>
+              <div className="text-lg font-medium">
+                {(data.system.memoryTotalBytes > 0
+                  ? (data.system.memoryUsedBytes / data.system.memoryTotalBytes) * 100
+                  : 0
+                ).toFixed(0)}
+                %
+              </div>
+              <div className="text-xs text-muted-foreground">
+                {formatBytes(data.system.memoryUsedBytes)} /{" "}
+                {formatBytes(data.system.memoryTotalBytes)}
+              </div>
+            </div>
+            <div>
+              <div className="text-xs text-muted-foreground mb-1">Disk</div>
+              <div className="text-lg font-medium">
+                {(data.system.diskTotalBytes > 0
+                  ? (data.system.diskUsedBytes / data.system.diskTotalBytes) * 100
+                  : 0
+                ).toFixed(0)}
+                %
+              </div>
+              <div className="text-xs text-muted-foreground">
+                {formatBytes(data.system.diskUsedBytes)} / {formatBytes(data.system.diskTotalBytes)}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Capability breakdown */}
+      {capabilityEntries.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-sm">Capability Breakdown (5m)</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-0">
+              {capabilityEntries.map(([cap, stats]) => (
+                <div
+                  key={cap}
+                  className="flex justify-between items-center text-sm py-2 border-b border-border/50 last:border-0"
+                >
+                  <span className="font-mono text-xs">{cap}</span>
+                  <span className="text-muted-foreground">
+                    {stats.requests} req · {(stats.errorRate * 100).toFixed(1)}% err
+                  </span>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* 60m summary */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-sm">Gateway (60m Window)</CardTitle>
+        </CardHeader>
+        <CardContent className="grid grid-cols-3 gap-4">
+          <div>
+            <div className="text-xs text-muted-foreground mb-1">Total Requests</div>
+            <div className="text-lg font-medium">{data.gateway.last60m.totalRequests}</div>
+          </div>
+          <div>
+            <div className="text-xs text-muted-foreground mb-1">Total Errors</div>
+            <div className="text-lg font-medium">{data.gateway.last60m.totalErrors}</div>
+          </div>
+          <div>
+            <div className="text-xs text-muted-foreground mb-1">Error Rate</div>
+            <div
+              className={cn(
+                "text-lg font-medium",
+                data.gateway.last60m.errorRate > 0.05 ? "text-red-400" : "text-green-400",
+              )}
+            >
+              {(data.gateway.last60m.errorRate * 100).toFixed(1)}%
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/components/admin/bulk-actions-bar.test.tsx

@@ -0,0 +1,92 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { BulkActionsBar } from "./bulk-actions-bar";
+
+const defaultProps = {
+  selectedCount: 3,
+  allMatchingSelected: false,
+  hasSuspendedInSelection: false,
+  onGrantCredits: vi.fn(),
+  onExport: vi.fn(),
+  onSuspend: vi.fn(),
+  onReactivate: vi.fn(),
+  onClearSelection: vi.fn(),
+};
+
+describe("BulkActionsBar", () => {
+  it("renders nothing when selectedCount is 0", () => {
+    const { container } = render(<BulkActionsBar {...defaultProps} selectedCount={0} />);
+    expect(container.textContent).toBe("");
+  });
+
+  it("shows selected count and action buttons", () => {
+    render(<BulkActionsBar {...defaultProps} />);
+    expect(screen.getByText("3 selected")).toBeInTheDocument();
+    expect(screen.getByText("Grant Credits")).toBeInTheDocument();
+    expect(screen.getByText("Export CSV")).toBeInTheDocument();
+    expect(screen.getByText("Suspend")).toBeInTheDocument();
+    expect(screen.getByText("Clear")).toBeInTheDocument();
+  });
+
+  it("shows '(all matching filters)' when allMatchingSelected is true", () => {
+    render(<BulkActionsBar {...defaultProps} allMatchingSelected={true} />);
+    expect(screen.getByText("(all matching filters)")).toBeInTheDocument();
+  });
+
+  it("hides Reactivate button when no suspended in selection", () => {
+    render(<BulkActionsBar {...defaultProps} hasSuspendedInSelection={false} />);
+    expect(screen.queryByText("Reactivate")).toBeNull();
+  });
+
+  it("shows Reactivate button when suspended accounts in selection", () => {
+    render(<BulkActionsBar {...defaultProps} hasSuspendedInSelection={true} />);
+    expect(screen.getByText("Reactivate")).toBeInTheDocument();
+  });
+
+  it("fires onGrantCredits when Grant Credits clicked", async () => {
+    const user = userEvent.setup();
+    const onGrantCredits = vi.fn();
+    render(<BulkActionsBar {...defaultProps} onGrantCredits={onGrantCredits} />);
+    await user.click(screen.getByText("Grant Credits"));
+    expect(onGrantCredits).toHaveBeenCalledOnce();
+  });
+
+  it("fires onExport when Export CSV clicked", async () => {
+    const user = userEvent.setup();
+    const onExport = vi.fn();
+    render(<BulkActionsBar {...defaultProps} onExport={onExport} />);
+    await user.click(screen.getByText("Export CSV"));
+    expect(onExport).toHaveBeenCalledOnce();
+  });
+
+  it("fires onSuspend when Suspend clicked", async () => {
+    const user = userEvent.setup();
+    const onSuspend = vi.fn();
+    render(<BulkActionsBar {...defaultProps} onSuspend={onSuspend} />);
+    await user.click(screen.getByText("Suspend"));
+    expect(onSuspend).toHaveBeenCalledOnce();
+  });
+
+  it("fires onClearSelection when Clear clicked", async () => {
+    const user = userEvent.setup();
+    const onClearSelection = vi.fn();
+    render(<BulkActionsBar {...defaultProps} onClearSelection={onClearSelection} />);
+    await user.click(screen.getByText("Clear"));
+    expect(onClearSelection).toHaveBeenCalledOnce();
+  });
+
+  it("fires onReactivate when Reactivate clicked", async () => {
+    const user = userEvent.setup();
+    const onReactivate = vi.fn();
+    render(
+      <BulkActionsBar
+        {...defaultProps}
+        hasSuspendedInSelection={true}
+        onReactivate={onReactivate}
+      />,
+    );
+    await user.click(screen.getByText("Reactivate"));
+    expect(onReactivate).toHaveBeenCalledOnce();
+  });
+});

package/src/components/admin/bulk-actions-bar.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { Download, Gift, ShieldBan, ShieldCheck, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface BulkActionsBarProps {
+  selectedCount: number;
+  allMatchingSelected: boolean;
+  hasSuspendedInSelection: boolean;
+  onGrantCredits: () => void;
+  onExport: () => void;
+  onSuspend: () => void;
+  onReactivate: () => void;
+  onClearSelection: () => void;
+}
+
+function BulkActionsBar({
+  selectedCount,
+  allMatchingSelected,
+  hasSuspendedInSelection,
+  onGrantCredits,
+  onExport,
+  onSuspend,
+  onReactivate,
+  onClearSelection,
+}: BulkActionsBarProps) {
+  return (
+    <AnimatePresence>
+      {selectedCount > 0 && (
+        <motion.div
+          initial={{ y: 80 }}
+          animate={{ y: 0 }}
+          exit={{ y: 80, opacity: 0 }}
+          transition={{ type: "spring", stiffness: 400, damping: 30 }}
+          className="fixed bottom-0 left-0 right-0 z-40 h-14 bg-card/95 backdrop-blur-sm border-t border-terminal/20 flex items-center justify-between px-6"
+        >
+          <div className="flex items-center gap-2">
+            <span className="text-lg font-semibold text-terminal">{selectedCount} selected</span>
+            {allMatchingSelected && (
+              <span className="text-sm text-muted-foreground">(all matching filters)</span>
+            )}
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Button variant="terminal" size="sm" onClick={onGrantCredits}>
+              <Gift className="size-4" />
+              Grant Credits
+            </Button>
+            <Button variant="outline" size="sm" onClick={onExport}>
+              <Download className="size-4" />
+              Export CSV
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              className="border-amber-500/40 text-amber-500 hover:bg-amber-500/10 hover:border-amber-500"
+              onClick={onSuspend}
+            >
+              <ShieldBan className="size-4" />
+              Suspend
+            </Button>
+            {hasSuspendedInSelection && (
+              <Button variant="outline" size="sm" onClick={onReactivate}>
+                <ShieldCheck className="size-4" />
+                Reactivate
+              </Button>
+            )}
+            <Button variant="ghost" size="sm" onClick={onClearSelection}>
+              <X className="size-4" />
+              Clear
+            </Button>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
+
+export { BulkActionsBar };

package/src/components/admin/bulk-export-dialog.test.tsx

@@ -0,0 +1,75 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { BulkExportDialog } from "./bulk-export-dialog";
+
+const defaultProps = {
+  open: true,
+  onOpenChange: vi.fn(),
+  selectedCount: 5,
+  onConfirm: vi.fn(),
+  isLoading: false,
+};
+
+describe("BulkExportDialog", () => {
+  it("renders dialog title with tenant count", () => {
+    render(<BulkExportDialog {...defaultProps} />);
+    expect(screen.getByText(/Export data for 5 tenants/)).toBeInTheDocument();
+  });
+
+  it("renders all standard export field checkboxes", () => {
+    render(<BulkExportDialog {...defaultProps} />);
+    expect(screen.getByText("Account info")).toBeInTheDocument();
+    expect(screen.getByText("Credit balance")).toBeInTheDocument();
+    expect(screen.getByText("Monthly products")).toBeInTheDocument();
+    expect(screen.getByText("Lifetime spend")).toBeInTheDocument();
+    expect(screen.getByText("Last seen")).toBeInTheDocument();
+  });
+
+  it("renders large field (transaction history) with large badge", () => {
+    render(<BulkExportDialog {...defaultProps} />);
+    expect(screen.getByText("Full transaction history")).toBeInTheDocument();
+    expect(screen.getByText("large")).toBeInTheDocument();
+  });
+
+  it("calls onConfirm with field config when Generate export clicked", async () => {
+    const user = userEvent.setup();
+    const onConfirm = vi.fn();
+    render(<BulkExportDialog {...defaultProps} onConfirm={onConfirm} />);
+    await user.click(screen.getByText("Generate export"));
+    expect(onConfirm).toHaveBeenCalledOnce();
+    const fields = onConfirm.mock.calls[0][0] as Array<{ key: string; enabled: boolean }>;
+    expect(fields).toHaveLength(6);
+    expect(fields.find((f) => f.key === "account_info")?.enabled).toBe(true);
+    expect(fields.find((f) => f.key === "transaction_history")?.enabled).toBe(false);
+  });
+
+  it("disables Generate export when all fields unchecked", async () => {
+    const user = userEvent.setup();
+    render(<BulkExportDialog {...defaultProps} />);
+    for (const label of [
+      "Account info",
+      "Credit balance",
+      "Monthly products",
+      "Lifetime spend",
+      "Last seen",
+    ]) {
+      await user.click(screen.getByLabelText(label));
+    }
+    expect(screen.getByText("Generate export").closest("button")).toBeDisabled();
+  });
+
+  it("calls onOpenChange(false) when Cancel clicked", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    render(<BulkExportDialog {...defaultProps} onOpenChange={onOpenChange} />);
+    await user.click(screen.getByText("Cancel"));
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("disables buttons when isLoading", () => {
+    render(<BulkExportDialog {...defaultProps} isLoading={true} />);
+    expect(screen.getByText("Cancel").closest("button")).toBeDisabled();
+    expect(screen.getByText("Generate export").closest("button")).toBeDisabled();
+  });
+});