/* Stratum Leads — Operations Console. Wallet & Billing: the platform-wide
Strata ledger and failed-payment queue. Financial ops only — ticket and
account detail live on their own pages; this one only links out to them. */
/* Design-system components — each Babel script has its own scope, so every
ops-*.jsx file must destructure what it needs from the namespace. */
const { NavItem, IconButton, WalletPill, Tabs, LeadCard, Button, Field, Card, Metric, StatusChip, TierBadge, ContactQuality, ProgressBar, StrataAmount, Checkbox, Switch, Avatar, AvatarStack, SegmentedControl, GateCard, EmptyState, Toast } = window.StratumLeadsDesignSystem_6367ed;
const { I, fmtStrata, fmtSigned, getCustomer, Spinner, IconRefreshCw, IconTrendArrow } = window.OpsShared;
const FINANCE = window.STRATUM_OPS.FINANCE;
const NOW_TS = window.STRATUM_OPS.NOW_TS;
const DAY_MS = 86400000;
const fmtUSD = (n) => "$" + fmtStrata(n);
const DATE_WINDOWS = [
{ value: "day", label: "Day" },
{ value: "week", label: "Week" },
{ value: "month", label: "Month" },
{ value: "year", label: "Year" },
{ value: "ytd", label: "YTD" }];
function windowStartMs(key) {
const d = new Date(NOW_TS);
if (key === "day") return NOW_TS - DAY_MS;
if (key === "week") return NOW_TS - 7 * DAY_MS;
if (key === "month") return NOW_TS - 30 * DAY_MS;
if (key === "year") return NOW_TS - 365 * DAY_MS;
if (key === "ytd") return new Date(d.getFullYear(), 0, 1).getTime();
return 0;
}
function downloadCsv(filename, rows) {
const csv = rows.map((row) => row.map((v) => {
const s = String(v ?? "");
return /[",\n]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s;
}).join(",")).join("\n");
const blob = new Blob([csv], { type: "text/csv" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;a.download = filename;
document.body.appendChild(a);a.click();document.body.removeChild(a);
setTimeout(() => URL.revokeObjectURL(url), 2000);
}
const LEDGER_TYPE_LABEL = { reload: "Reload", spend: "Bid spend", refund: "Refund", credit: "Support credit", chargeback: "Chargeback", debit: "Debit / correction" };
const LEDGER_TYPE_TONE = { reload: "info", spend: "neutral", refund: "success", credit: "violet", chargeback: "danger", debit: "warning" };
/* ---- lightweight customer picker used only for "New Adjustment" ---- */
function CustomerPicker({ customers, onPick }) {
const [query, setQuery] = React.useState("");
const [open, setOpen] = React.useState(false);
const q = query.trim().toLowerCase();
const matches = q.length > 0 ? customers.filter((c) => c.name.toLowerCase().includes(q) || c.id.toLowerCase().includes(q)).slice(0, 6) : [];
return (
{setQuery(e.target.value);setOpen(true);}} onFocus={() => setOpen(true)} onBlur={() => setTimeout(() => setOpen(false), 150)} />
{open && matches.length > 0 &&
{matches.map((c) =>
)}
}
);
}
function LedgerRow({ r, onOpenCustomer }) {
const cust = getCustomer(r.customerId);
return (
{r.createdAt}
{r.note}
{LEDGER_TYPE_LABEL[r.type]}
{fmtSigned(r.amount)}
{fmtStrata(r.balanceAfter)}
{r.status}
);
}
function LedgerTab({ ledger, onOpenCustomer }) {
const [type, setType] = React.useState("all");
const [query, setQuery] = React.useState("");
const q = query.trim().toLowerCase();
const rows = ledger.
filter((r) => type === "all" || r.type === type).
filter((r) => {
if (q === "") return true;
const cust = getCustomer(r.customerId);
return r.id.toLowerCase().includes(q) || cust && cust.name.toLowerCase().includes(q) || r.note.toLowerCase().includes(q);
});
return (
setType(e.target.value)} style={{ width: 200 }}>
{Object.keys(LEDGER_TYPE_LABEL).map((t) => )}
setQuery(e.target.value)} />
DateCustomer / noteTypeAmountBalanceStatus
{rows.length === 0 ?
: rows.map((r) =>
)}
);
}
function FailedPaymentsTab({ ledger, onRetryCharge, onOpenAdjustWallet, onOpenCustomer }) {
const rows = ledger.filter((r) => r.status === "failed");
const [retryingId, setRetryingId] = React.useState(null);
const retry = (id) => {
setRetryingId(id);
setTimeout(() => {onRetryCharge(id);setRetryingId(null);}, 1100);
};
return (
{rows.length === 0 ?
:
rows.map((r, i) => {
const cust = getCustomer(r.customerId);
const retrying = retryingId === r.id;
return (
{r.note}
{r.createdAt}
: } onClick={() => retry(r.id)}>{retrying ? "Retrying…" : "Retry Charge"}
);
})
}
{t.date}
{t.source}
{inbound ? "In" : "Out"}
{inbound ? "+" : "\u2212"}{fmtUSD(t.amount)}
{t.status}
);
}
function MoneyRow({ icon, label, value, sub, tone = "in" }) {
return (
{icon}
{label}{sub && {sub}}
{value}
);
}
function FinanceOverviewTab({ customers, ledger }) {
const [period, setPeriod] = React.useState("month");
const [sortKey, setSortKey] = React.useState("ts");
const [sortDir, setSortDir] = React.useState("desc");
React.useEffect(refresh, [period, sortKey, sortDir]);
const since = windowStartMs(period);
const periodLabel = (DATE_WINDOWS.find((w) => w.value === period) || {}).label || period;
// Point-in-time balances are NOT filtered by the date window — only flows are.
const circulation = customers.reduce((s, c) => s + c.wallet.available, 0);
const reloadVolume = ledger.filter((r) => r.type === "reload" && r.status === "succeeded" && r.ts >= since).reduce((s, r) => s + r.amount, 0);
const creditsIssued = ledger.filter((r) => (r.type === "credit" || r.type === "refund") && r.status === "succeeded" && r.ts >= since).reduce((s, r) => s + r.amount, 0);
const subscriptionRevenue = customers.flatMap((c) => c.invoices).filter((i) => i.status === "paid" && i.ts >= since).reduce((s, i) => s + i.amount, 0);
const newAccounts = customers.filter((c) => Math.min(new Date(c.createdAt).getTime(), NOW_TS) >= since).length;
const periodTransfers = FINANCE.transfers.filter((t) => t.ts >= since);
const transferredIn = periodTransfers.filter((t) => t.direction === "in" && t.status === "completed").reduce((s, t) => s + t.amount, 0);
const transferredOut = periodTransfers.filter((t) => t.direction === "out" && t.status === "completed").reduce((s, t) => s + t.amount, 0);
const pendingOut = periodTransfers.filter((t) => t.direction === "out" && t.status === "requested").reduce((s, t) => s + t.amount, 0);
const sortedTransfers = [...periodTransfers].sort((a, b) => {
let av = a[sortKey],bv = b[sortKey];
if (sortKey === "source") {av = a.source.toLowerCase();bv = b.source.toLowerCase();}
if (av < bv) return sortDir === "asc" ? -1 : 1;
if (av > bv) return sortDir === "asc" ? 1 : -1;
return 0;
});
const toggleSort = (key) => {
if (sortKey === key) setSortDir((d) => d === "asc" ? "desc" : "asc");else {setSortKey(key);setSortDir("desc");}
};
const sortIcon = (key) => sortKey === key ? : null;
const exportCsv = () => {
const rows = [["Date", "Description", "Direction", "Amount (USD)", "Status"]];
sortedTransfers.forEach((t) => rows.push([new Date(t.ts).toISOString().slice(0, 10), t.source, t.direction, t.amount.toFixed(2), t.status]));
downloadCsv(`stratum-bank-transfers-${period}.csv`, rows);
};
const moneyIn = subscriptionRevenue + transferredIn;
const netUsd = moneyIn - transferredOut;
const COLS = "100px 1.4fr 90px 130px 110px";
return (
{fmtUSD(FINANCE.bankAccount.balance)}
Operating balance as of {FINANCE.bankAccount.asOf}{" — a snapshot, not affected by the date window"}
= 0 ? "var(--success)" : "var(--danger)" }}>{netUsd >= 0 ? "+" : "\u2212"}{fmtUSD(Math.abs(netUsd))}
= 0 ? "up" : "down"} size={16} style={{ color: netUsd >= 0 ? "var(--success)" : "var(--danger)" }} />
Money in minus money out, this period
Showing
{fmtUSD(moneyIn)}
{fmtUSD(transferredOut)}
0 ? "Awaiting bank confirmation" : null} />
Export CSV
}>
{[["ts", "Date"], ["source", "Description"], ["direction", "Direction"], ["amount", "Amount"], ["status", "Status"]].map(([key, label]) =>
)}
{sortedTransfers.length === 0 ?
:
sortedTransfers.map((t) =>
)
}
);
}
function WalletOpsPage({ ledger, customers, onOpenAdjustWallet, onRetryCharge, onOpenCustomer }) {
const [tab, setTab] = React.useState("overview");
const failedCount = ledger.filter((r) => r.status === "failed").length;
React.useEffect(refresh, [tab]);
return (
onOpenAdjustWallet({ customerId: id })} />
} />
{tab === "overview" && }
{tab === "ledger" && }
{tab === "failed" && }
);
}
Object.assign(window, { OpsWalletOps: { WalletOpsPage } });