import { Head, Link } from "@inertiajs/react"; import { useEffect, useState } from "react"; import { Activity, CreditCard, DollarSign, Gauge, RefreshCw, Users, WalletCards, XCircle, } from "lucide-react"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; import { useI18n } from "@/lib/i18n"; type Payment = { id: number; reference: string; status: string; amount: string | number; currency: string; created_at: string; user?: { id: number; name: string; email: string } | null; plan?: string | null; gateway?: string | null; }; type Overview = { stats: { customers: number; active_subscriptions: number; pending_payments: number; paid_today: number; revenue_today: number; failed_payments: number; }; configuration: { active_plans: number; active_gateways: number; active_market_providers: number; active_integrations: number; }; recent_payments: Payment[]; }; const money = (value: number, currency = "USD") => new Intl.NumberFormat("en-US", { style: "currency", currency, maximumFractionDigits: 2, }).format(Number(value)); const date = (value: string) => new Intl.DateTimeFormat("en-US", { dateStyle: "medium", timeStyle: "short", }).format(new Date(value)); const statusVariant = (status: string) => status === "paid" ? "default" : status === "failed" ? "destructive" : "outline"; export default function AdminDashboard() { const { t } = useI18n(); const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(""); const load = async () => { setLoading(true); setError(""); try { const response = await fetch("/admin/overview/data", { headers: { Accept: "application/json" }, }); if (!response.ok) throw new Error("Unable to load admin overview."); setData(await response.json()); } catch (err) { setError( err instanceof Error ? err.message : "Unable to load overview.", ); } finally { setLoading(false); } }; useEffect(() => { void load(); }, []); const stats = data?.stats; const config = data?.configuration; return ( <>

{t("Admin Overview")}

{t("Monitor customers, revenue, payments, and platform configuration.")}

{error && ( {error} )}
{t("Platform configuration")} {t("Quick actions")}
{t("Recent payments")}
{t("Reference")} {t("Customer")} {t("Plan")} {t("Gateway")} {t("Status")} {t("Amount")} {t("Created")} {(data?.recent_payments ?? []).map( (payment) => ( {payment.reference} {payment.user?.name ?? "—"} {payment.plan ?? "—"} {payment.gateway ?? "—"} {payment.status} {money( Number(payment.amount), payment.currency, )} {date(payment.created_at)} ), )} {!loading && (data?.recent_payments.length ?? 0) === 0 && ( {t("Belum ada payment.")} )}
); } function StatCard({ title, value, icon: Icon, }: { title: string; value: string | number; icon: typeof Users; }) { return (
{title}
{value}
 ); } function ConfigItem({ label, value, href, }: { label: string; value: number; href: string; }) { return (
{label}
{value}
); }