"use client"; import { useCallback, useEffect, useMemo, useState } from "react"; import { Wallet, BadgeCheck, Inbox, CheckCircle2, Download } from "lucide-react"; import { api } from "@/lib/api"; import { PageHeader, StatCard, Card, Button, Badge, Skeleton } from "@/components/ui"; import { DataTable, type Column } from "@/components/data-table"; import { useConfirm } from "@/components/modal"; import { useToast } from "@/components/toast"; type Owed = { id: string; name: string; email: string; balance: number }; type HistoryRow = { id: string; affiliate: string; amount: number; method: string; reference: string | null; date: string }; type Payouts = { minPayout: number; owed: Owed[]; requests: { id: string; affiliate: string; amount: number; date: string }[]; totalPaid: number; methodBreakdown: { method: string; count: number; amount: number }[]; history: HistoryRow[]; }; const inr = (n: number) => "₹" + n.toLocaleString("en-IN"); const methodLabel = (m: string) => (m === "STORE_CREDIT" ? "Store credit" : m === "PAYPAL" ? "PayPal" : "Manual"); const methodTone = (m: string): "brand" | "info" | "neutral" => (m === "STORE_CREDIT" ? "brand" : m === "PAYPAL" ? "info" : "neutral"); export default function PayoutsPage() { const toast = useToast(); const confirm = useConfirm(); const [data, setData] = useState(null); const load = useCallback(async () => setData(await api.get("/admin/payouts")), []); useEffect(() => { load(); }, [load]); const markPaid = async (row: Owed) => { if (!(await confirm({ title: `Pay ${row.name}?`, message: `Mark ${inr(row.balance)} as paid. This clears their balance.`, confirmText: "Mark paid" }))) return; try { await api.post(`/admin/affiliates/${row.id}/mark-paid`); toast.success(`Paid ${inr(row.balance)} to ${row.name}.`); load(); } catch (e) { toast.error((e as Error).message); } }; const payAllEligible = async () => { if (!data) return; const list = data.owed.filter((a) => a.balance >= data.minPayout); if (list.length === 0) return; if (!(await confirm({ title: `Pay all ${list.length} eligible?`, message: `Mark ${inr(list.reduce((s, a) => s + a.balance, 0))} paid across ${list.length} affiliates.`, confirmText: "Pay all" }))) return; let ok = 0; for (const a of list) { try { await api.post(`/admin/affiliates/${a.id}/mark-paid`); ok++; } catch { /* keep going */ } } toast.success(`Paid ${ok} of ${list.length} affiliates.`); load(); }; const downloadInvoice = async (payoutId: string) => { try { const inv = await api.get(`/admin/payouts/${payoutId}/invoice`); const html = `${inv.invoiceNumber}

${inv.program}

Payout invoice · ${inv.invoiceNumber} · ${inv.date}

Affiliate${inv.affiliate} (${inv.email})
Method${inv.method}${inv.reference ? " · " + inv.reference : ""}
Status${inv.status}
Amount paid₹${Number(inv.amount).toLocaleString("en-IN")}

Generated by Partner Nook · ${inv.shop}

`; const blob = new Blob([html], { type: "text/html" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = `${inv.invoiceNumber}.html`; a.click(); URL.revokeObjectURL(url); } catch (e) { toast.error((e as Error).message); } }; const totalOwed = useMemo(() => data?.owed.reduce((s, a) => s + a.balance, 0) ?? 0, [data]); const eligible = useMemo(() => data?.owed.filter((a) => a.balance >= (data?.minPayout ?? 0)).length ?? 0, [data]); const owedColumns: Column[] = [ { key: "name", header: "Affiliate", sortable: true, accessor: (r) => r.name, render: (r) => (
{r.name}
{r.email}
), }, { key: "balance", header: "Balance", sortable: true, align: "right", accessor: (r) => r.balance, render: (r) => {inr(r.balance)} }, { key: "eligible", header: "Eligible", align: "center", accessor: (r) => (r.balance >= (data?.minPayout ?? 0) ? 1 : 0), render: (r) => (r.balance >= (data?.minPayout ?? 0) ? Eligible : Below min), }, { key: "actions", header: "", align: "right", render: (r) => ( ), }, ]; const historyColumns: Column[] = [ { key: "affiliate", header: "Affiliate", sortable: true, accessor: (r) => r.affiliate, render: (r) => {r.affiliate} }, { key: "amount", header: "Amount", sortable: true, align: "right", accessor: (r) => r.amount, render: (r) => inr(r.amount) }, { key: "method", header: "Method", accessor: (r) => r.method, render: (r) => {methodLabel(r.method)} }, { key: "reference", header: "Reference", accessor: (r) => r.reference ?? "", render: (r) => (r.reference ? {r.reference} : —) }, { key: "date", header: "Date", sortable: true, accessor: (r) => r.date, render: (r) => {r.date} }, { key: "invoice", header: "", align: "right", render: (r) => ( ), }, ]; return (
Pay all eligible ({eligible})} />
{!data ? ( Array.from({ length: 4 }).map((_, i) => ) ) : ( <> } accent="#d97706" /> } accent="#16a34a" /> } accent="#2563eb" /> } accent="#1A3C6E" /> )}
{data && data.requests.length > 0 && (
    {data.requests.map((r) => (
  • {r.affiliate} {inr(r.amount)} {r.date}
    • ))}
)} {data && data.methodBreakdown.length > 0 && (
    {data.methodBreakdown.map((m) => (
  • {methodLabel(m.method)} {m.count} payout{m.count === 1 ? "" : "s"} {inr(m.amount)}
    • ))}
)}

Pending balances

r.id} loading={!data} exportName="payouts-owed" searchPlaceholder="Search affiliate…" empty={{ icon: , title: "Nothing to pay out", description: "Affiliates with a pending balance will appear here." }} />

Payment history

r.id} loading={!data} exportName="payouts-history" searchPlaceholder="Search affiliate…" empty={{ icon: , title: "No payments yet", description: "Paid payouts — with downloadable invoices — will appear here." }} />
); }