// NO PROD JSON API (bucket B — feed is a DataTables render payload or
// {"html":...}, not data) — mock until backend (see PROD_API_INVENTORY.md)
// Represents: GET /payments/dashboard/ · AdminPaymentsController::show('dashboard') → dashboardData() — see docs/ISYSTEM_REFERENCE.md §Batch 10.1
/* Traced Aug 2026 (architecture item 2). The PayBO landing section — a real
isystem surface, not a prototype invention. Note it is NOT the host
dashboard: that is DashboardController → admin.dashboard.index, built
separately as HostDashboard.jsx. The toConfirmCount this section carries
comes from CascadeHoldService::pendingCount(), i.e. the To Confirm queue
(PayboToConfirm.jsx), not from transaction statuses. */
/* Small badge that tells the operator how a widget reacts to the
dashboard's main filters (timeframe + brand). The native title attribute
gives a hover-tooltip with the full explanation. Rendered on the shared
`.chip` tone ramp (canon §2.9) — the former inline pill dialect is gone;
"brand" maps to chip--info, the closest tone the ramp carries. */
const FilterTag = ({ scope }) => {
const cfg = {
window: { label:"Follows filters", icon:"check", chip:"chip--ok", tip:"This widget reflects BOTH the dashboard timeframe and brand selection." },
brand: { label:"Brand only", icon:"flag", chip:"chip--info", tip:"This widget reflects the brand selection but ignores the timeframe (uses its own window)." },
partial: { label:"Partial scope", icon:"sliders", chip:"chip--warn", tip:"This widget reflects the brand but uses its own fixed time window." },
static: { label:"Static", icon:"info", chip:"chip--neutral", tip:"This widget shows global aggregates and does NOT change with the dashboard filters." },
};
const c = cfg[scope] || cfg.static;
return (
{c.label}
);
};
/* Adaptive bar panel — hourly/daily volume over the dashboard window.
Chart body is the shared ui.jsx BarChart (canon §2.11) — the former
hand-rolled div-bar column chart with its own dark tooltip and
onMouseEnter hover mutation is gone; BarChart carries the hover
tooltip itself. Footer still surfaces total + peak bucket. */
const VolumeBarPanel = ({ title, data, labels, color, peakColor, currency }) => {
const total = data.reduce((a,b)=>a+b, 0);
const peakIdx = data.indexOf(Math.max(...data));
const fmt = (n) => n >= 1000 ? `${(n/1000).toFixed(1)}K` : Math.round(n).toString();
return (
total · {currency} {fmt(total)}peak · {labels[peakIdx]}
);
};
/* By-country breakdown — counts + volumes per country in the window.
Chart body is the shared ui.jsx BarChart (canon §2.11): two series
(deposit / withdrawal amounts) per country, colored from the --chart-*
ramp. The former hand-rolled grouped bars, gridlines, dark tooltip and
onMouseEnter hover mutation are gone; BarChart's own tooltip shows the
per-series amounts (the per-country tx counts the old tooltip carried
are not part of the shared primitive). */
const CountryBreakdown = ({ scoped, windowStart, windowEnd, currency }) => {
const data = (() => {
const map = {};
for (const t of scoped) {
if (t.created_at < windowStart || t.created_at > windowEnd) continue;
const k = t.country || "??";
if (!map[k]) map[k] = { code:k, dep:0, depAmt:0, wd:0, wdAmt:0 };
if (t.type === "Deposit") { map[k].dep += 1; map[k].depAmt += t.amount; }
else if (t.type === "Withdrawal") { map[k].wd += 1; map[k].wdAmt += t.amount; }
}
return Object.values(map).sort((a,b) => (b.depAmt + b.wdAmt) - (a.depAmt + a.wdAmt)).slice(0, 8);
})();
if (data.length === 0) {
return
No transactions in this window.
;
}
return (
c.depAmt), data.map(c => c.wdAmt)]}
labels={data.map(c => c.code)}
colors={["var(--chart-1)", "var(--chart-2)"]}
seriesLabels={["Deposits","Withdrawals"]}
currency={currency}
height={150}/>
{/* X axis — country codes */}
{data.map(c => (
{c.code}
))}
DEPOSITSWITHDRAWALS
);
};
/* Decline reasons widget with drill-down — click a reason to reveal its
per-method AND per-PSP breakdown so an operator can tell whether the
failure is concentrated on one rail or one provider. */
const METHOD_NAMES = {
visa:"Visa", mastercard:"Mastercard", bankwire:"Bank Wire", bitcoin:"Bitcoin",
ethereum:"Ethereum", skrill:"Skrill", neteller:"Neteller", paysafe:"Paysafe",
other:"Other",
};
const PROVIDER_NAMES = {
stripe:"Stripe", adyen:"Adyen", checkout:"Checkout", worldpay:"Worldpay",
trustly:"Trustly", skrillpsp:"Skrill PSP", coinify:"Coinify", paysafe:"Paysafe",
nuvei:"Nuvei", braintree:"Braintree",
};
const DeclineReasonsBody = ({ reasons }) => {
const [expanded, setExpanded] = React.useState(null);
const total = reasons.reduce((a, r) => a + r.count, 0);
/* Empty window used to render a bare gray bar plus "Click any row…"
instructions over nothing — say so instead (canon §2.7). */
if (reasons.length === 0) {
return
Click any row to drill into per-method and per-provider counts.
);
};
/* Transaction status — driven by the Dashboard's own timeframe selector.
No internal controls. Visual treatment:
· hero row · total count + headline approval rate
· stacked bar grouping statuses into success / in-flight / failure
· 3-column grid of per-status pills with proportional bars */
const StatusTimeframeWidget = ({ scoped, windowStart, windowEnd, windowLabel }) => {
const inWindow = scoped.filter(t => t.created_at >= windowStart && t.created_at <= windowEnd);
/* THE STATUS LIST COMES FROM THE ROWS, not from a fixed set of eight. The two
request tables have their own lookups (`deposit_request_statuses` /
`withdrawal_request_statuses`), and the old MOCK list matched neither — so
a status the platform actually records could fall through `counts[k] !==
undefined` and be counted nowhere, silently lowering the denominator that
the approval rate is computed from.
Anything unrecognised is counted under its own key rather than dropped; the
config table below supplies a tone when it knows one and a neutral default
when it does not. A status nobody has recorded simply does not appear. */
const counts = {};
inWindow.forEach(t => {
const k = t.status === "completed" ? "balanced"
: t.status === "review" ? "to_confirm"
: t.status === "cancelled" ? "declined" : t.status;
if (!k) return;
counts[k] = (counts[k] || 0) + 1;
});
const STATUS_KEYS = Object.keys(counts).sort();
const STATUSES = STATUS_KEYS;
const total = inWindow.length;
const STATUS_CFG = {
balanced: { icon:"check", tone:"var(--ok-600)", bg:"var(--ok-50)", group:"success" },
approved: { icon:"check", tone:"var(--ok-500)", bg:"var(--ok-50)", group:"success" },
pending: { icon:"clock", tone:"var(--warn-600)", bg:"var(--warn-50)", group:"inflight" },
created: { icon:"plus", tone:"var(--text-secondary)", bg:"var(--n-50)", group:"inflight" },
to_confirm: { icon:"flag", tone:"var(--info-500)", bg:"var(--info-50)", group:"inflight" },
declined: { icon:"x", tone:"var(--err-500)", bg:"var(--err-50)", group:"failure" },
failed: { icon:"alert", tone:"var(--err-600)", bg:"var(--err-50)", group:"failure" },
rejected: { icon:"x", tone:"var(--err-700)", bg:"var(--err-50)", group:"failure" },
};
/* An unknown status groups as in-flight rather than as success or failure —
the approval rate is the headline number on this widget, and guessing a
new status into either end of it moves that number on nothing. */
const groupTotals = STATUS_KEYS.reduce((acc, k) => {
const g = STATUS_CFG[k]?.group || "inflight";
acc[g] = (acc[g] || 0) + counts[k];
return acc;
}, { success: 0, inflight: 0, failure: 0 });
const successPct = total ? (groupTotals.success / total) * 100 : 0;
const failurePct = total ? (groupTotals.failure / total) * 100 : 0;
const inflightPct = total ? (groupTotals.inflight / total) * 100 : 0;
// Order statuses within their group so the cards read top→bottom in a
// predictable funnel. Cards with zero count get pushed to the end.
const orderedKeys = [
"balanced","approved",
"pending","created","to_confirm",
"declined","failed","rejected",
];
const sortedKeys = orderedKeys
.slice()
.sort((a, b) => (counts[b] - counts[a]) || (orderedKeys.indexOf(a) - orderedKeys.indexOf(b)));
const GROUPS = [
{ id:"success", label:"Success", tone:"var(--ok-500)", total: groupTotals.success, pct: successPct,
members:[{ k:"balanced", s:STATUSES.balanced }, { k:"approved", s:STATUSES.approved }] },
{ id:"inflight", label:"In-flight",tone:"var(--warn-500)", total: groupTotals.inflight, pct: inflightPct,
members:[{ k:"pending", s:STATUSES.pending }, { k:"created", s:STATUSES.created }, { k:"to_confirm", s:STATUSES.to_confirm }] },
{ id:"failure", label:"Failure", tone:"var(--err-500)", total: groupTotals.failure, pct: failurePct,
members:[{ k:"declined", s:STATUSES.declined }, { k:"failed", s:STATUSES.failed }, { k:"rejected", s:STATUSES.rejected }] },
];
return (
{/* Header bar — gradient strip with hero KPIs inline */}
{/* Donut — the shared ui.jsx Donut (canon §2.11) replaces the
hand-rolled three-arc SVG that used to live here. */}
{/* 3 columns — one per group, with their status pills inside */}
{GROUPS.map(g => (
{g.label}
{g.total} · {g.pct.toFixed(1)}%
{g.members.map(({k, s}) => {
const cfg = STATUS_CFG[k];
if (!cfg || !s) return null;
const n = counts[k];
const pct = total ? (n / total) * 100 : 0;
const isOn = n > 0;
return (
{s.label}
{n}{pct.toFixed(1)}%
);
})}
))}
Approved/Rejected = operator decision (auto or manual) · Balanced = PSP confirmed the transaction settled (terminal success)
);
};
const Dashboard = ({ brand, viewCurrency, onNav }) => {
window.useLocale && window.useLocale();
const T = window.T || ((k, fb) => fb || k);
/* THE PAYMENTS THEMSELVES, from the two request tables — reusing
Transactions.jsx's mappers rather than writing a third pair. Three mappers
over the same tables is three places for the Dashboard, the Reports page
and the Transactions list to disagree about what a fee or a status is. */
const dashDepFeed = useHrsFetch(() => window.sb.list("depositRequests", { limit: 3000 }), []);
const dashWdFeed = useHrsFetch(() => window.sb.list("withdrawalRequests", { limit: 3000 }), []);
const dashMethodFeed = useHrsFetch(() => window.sb.list("paymentMethods", { limit: 300 }), []);
const dashBusy = dashDepFeed.loading || dashWdFeed.loading;
const dashErr = dashDepFeed.error || dashWdFeed.error;
const TRANSACTIONS = useMemo(
() => (dashDepFeed.data || []).map(txRowFromDeposit)
.concat((dashWdFeed.data || []).map(txRowFromWithdrawal))
.sort((a, b) => b.created_at - a.created_at),
[dashDepFeed.data, dashWdFeed.data]);
const METHODS = useMemo(
() => (dashMethodFeed.data || []).map(m => ({ id: Number(m.id), name: m.name, kind: m.code })),
[dashMethodFeed.data]);
// The Payments subnav's "View in" picker lets an operator convert this
// brand's own-currency figures into another currency for display. Only
// applies to a single selected brand — "All brands" has no one currency
// to convert from, so its aggregate stays as-is.
const dispCur = (!brand.isAll && viewCurrency) || brand.currency;
const toDisp = (amount) => brand.isAll ? amount : window.fxConvert(amount, brand.currency, dispCur);
// Dashboard timeframe — segmented preset plus a Custom popover. The
// selected window drives every widget on the page, including the
// Transaction status panel (no per-widget selectors).
const TF = [
{ id:"24h", label:"24h", days:1 },
{ id:"7d", label:"7d", days:7 },
{ id:"14d", label:"14d", days:14 },
{ id:"30d", label:"30d", days:30 },
{ id:"90d", label:"90d", days:90 },
];
const [tf, setTf] = useState("14d");
const [customRange, setCustomRange] = useState(null); // { startMs, endMs, label, mode }
const [customOpen, setCustomOpen] = useState(false);
const tfMeta = TF.find(x => x.id === tf) || TF[2];
const windowEnd = (tf === "custom" && customRange) ? customRange.endMs : Date.now();
const windowStart = (tf === "custom" && customRange) ? customRange.startMs : windowEnd - tfMeta.days * 86400_000;
const windowMs = Math.max(60_000, windowEnd - windowStart);
const windowLabel = (tf === "custom" && customRange) ? customRange.label : `last ${tfMeta.label}`;
// tfDays drives the bar-chart bucket count and series slicing. For custom
// windows we ceiling to days so the chart still renders sensibly.
const tfDays = Math.max(1, Math.ceil(windowMs / 86400_000));
const scoped = brand.isAll ? TRANSACTIONS : TRANSACTIONS.filter(t => t.brand === brand.id);
const sum = (arr) => arr.reduce((a,b)=>a+b, 0);
// Bucket the brand-scoped transactions into the selected window — hourly
// grain for short windows (≤48h), daily otherwise, same convention as
// volumeSeries below. Deposits/withdrawals count only successful
// (balanced/approved) transactions per the KPI tooltips; approvals/
// declines count the operator-decision outcome. Replaces the previous
// approach of slicing a single global, brand-agnostic, always-14-day
// DASH series that never actually changed with the brand or timeframe.
const grainMs = windowMs <= 48 * 3600_000 ? 3600_000 : 86400_000;
const buckets = Math.max(1, Math.ceil(windowMs / grainMs));
const depSeries = new Array(buckets).fill(0);
const wdSeries = new Array(buckets).fill(0);
const apvSeries = new Array(buckets).fill(0);
const decSeries = new Array(buckets).fill(0);
for (const t of scoped) {
if (t.created_at < windowStart || t.created_at > windowEnd) continue;
const idx = Math.min(buckets - 1, Math.floor((t.created_at - windowStart) / grainMs));
if (t.status === "balanced" || t.status === "approved") {
if (t.type === "Deposit") depSeries[idx] += t.amount;
else if (t.type === "Withdrawal") wdSeries[idx] += t.amount;
apvSeries[idx] += 1;
} else if (t.status === "declined" || t.status === "rejected" || t.status === "failed") {
decSeries[idx] += 1;
}
}
const totalDep = sum(depSeries);
const totalWd = sum(wdSeries);
const net = totalDep - totalWd;
const apv = sum(apvSeries);
const dec = sum(decSeries);
const apvRate = (apv + dec) > 0 ? ((apv / (apv+dec)) * 100).toFixed(1) : "0.0";
const methodColors = {
visa: "var(--p-500)",
mastercard: "var(--err-500)",
bankwire: "var(--slate)",
bitcoin: "var(--warn-500)",
ethereum: "var(--purple-500)",
skrill: "var(--purple-500)",
neteller: "var(--ok-500)",
paysafe: "var(--teal-500)",
};
/* THE METHOD MIX, COUNTED — it was a pre-baked `DASH.methods_mix` series
that never moved with the brand or the timeframe, sitting beside KPIs that
did. Computed from the same scoped rows every other widget uses, so the
donut and the numbers above it can no longer disagree. */
const methodsMix = (() => {
const by = {};
scoped.forEach(t => {
if (t.created_at < windowStart || t.created_at > windowEnd) return;
const k = t.method_name || "—";
by[k] = (by[k] || 0) + t.amount;
});
return Object.keys(by).map(k => ({ label: k, value: by[k] })).sort((a, b) => b.value - a.value);
})();
const donut = (methodsMix || [])
.map(m => {
const meta = METHODS.find(x => x.id === m.id);
return meta ? { ...m, color: methodColors[m.id] || meta.color, name: meta.name } : null;
})
.filter(Boolean);
const recent = scoped.slice(0, 8);
// Volume buckets over the dashboard window. Auto-picks an hourly grain
// for short windows (≤ 48h) and a daily grain for anything longer so
// the chart stays readable at every timeframe. Both deposit and
// withdrawal series are computed once and rendered as side-by-side
// widgets in the analytics row.
const volumeSeries = (() => {
const ms = Math.max(60_000, windowEnd - windowStart);
const hourly = ms <= 48 * 3600_000;
const grainMs = hourly ? 3600_000 : 86400_000;
const buckets = Math.max(1, Math.ceil(ms / grainMs));
const dep = new Array(buckets).fill(0);
const wd = new Array(buckets).fill(0);
for (const t of scoped) {
if (t.created_at < windowStart || t.created_at > windowEnd) continue;
const idx = Math.min(buckets - 1, Math.floor((t.created_at - windowStart) / grainMs));
if (t.type === "Deposit") dep[idx] += t.amount;
else if (t.type === "Withdrawal") wd[idx] += t.amount;
}
const labels = Array.from({length: buckets}).map((_, i) => {
const d = new Date(windowStart + i * grainMs);
return hourly
? d.toLocaleTimeString("en-GB", { hour:"2-digit", minute:"2-digit" })
: d.toLocaleDateString("en-GB", { day:"2-digit", month:"short" });
});
return { dep, wd, labels, grain: hourly ? "hourly" : "daily" };
})();
// Decline reasons mix — pulled from the pre-aggregated DECLINE_REASONS
// series so the widget renders even when the seeded TX window is small.
/* WAS a pre-aggregated series kept precisely so "the widget renders even
when the seeded TX window is small" — a panel built to look populated
regardless of the data. Counted from the scoped rows now; an empty window
shows an empty panel, which is the true answer. */
const declineReasons = (() => {
const by = {};
scoped.forEach(t => {
if (t.created_at < windowStart || t.created_at > windowEnd) return;
const raw = t._raw || {};
const code = raw.decline_reason_code || raw.decline_reason;
if (!code) return;
by[code] = (by[code] || 0) + 1;
});
const rows = Object.keys(by).map(k => ({ reason: k, label: k, count: by[k] }))
.sort((a, b) => b.count - a.count).slice(0, 6);
const total = rows.reduce((a, r) => a + r.count, 0);
return rows.map(r => ({ ...r, pct: total ? Math.round((r.count / total) * 100) : 0 }));
})();
// PSP wallet liquidity — read Provider profiles, compute position
// between floor and ceiling. Treasury at-a-glance.
/* NO PSP WALLET BALANCE EXISTS IN THIS SCHEMA. The panel told an operator to
"Top up" or "Sweep" a provider based on an invented wallet, a floor and a
ceiling — a treasury instruction derived from nothing. Empty, with the
panel saying what it would need. Same gap the Reports page's Liquidity tab
records; one table closes both.
*/
const pspLiquidity = [];
// Labels for the bucket series above — anchored to windowStart (not
// Date.now()) so a custom range that doesn't end today still labels its
// bars/CSV export with the actual picked dates.
const labels = Array.from({length: buckets}).map((_, i) => {
const d = new Date(windowStart + i * grainMs);
return grainMs === 3600_000
? d.toLocaleTimeString("en-GB", { hour:"2-digit", minute:"2-digit" })
: d.toLocaleDateString("en-GB", { day:"2-digit", month:"short" });
});
const rangeLabel = (() => {
if (tf === "custom" && customRange) return customRange.label;
const start = new Date(windowStart);
const end = new Date(windowEnd);
const fmt = (d) => d.toLocaleDateString("en-GB", { day:"2-digit", month:"short" });
return tfDays === 1 ? `Last 24h` : `${fmt(start)} – ${fmt(end)}`;
})();
/* Both section "more" buttons now render disabled (NoBackend) naming the
missing dependency; the toast helper that used to imply an
export/share/rename menu existed was deleted rather than left dead. */
/* EVERY NUMBER ON THIS PAGE IS A SUM OVER `scoped`, and an empty array sums
to zero — so while the two feeds are in flight the Dashboard renders a
complete-looking set of zeros: no deposits, no withdrawals, a 0% approval
rate. That is not a slower version of the truth, it is a different claim.
The whole page waits. */
if (dashBusy) {
return (
{T("page.dashboard","Dashboard")}
);
}
if (dashErr) {
return (
{T("page.dashboard","Dashboard")}
{ dashDepFeed.retry(); dashWdFeed.retry(); }} />
);
}
return (
{T("page.dashboard","Dashboard")}
The Dashboard is the home page of the back office. Every number here is filtered by the timeframe you pick on the right and by the brand selector in the top-right corner (which acts like an auto-login when set to a specific tenant). Use it to spot daily anomalies in deposits, withdrawals, approval rates and method performance.
Deposits — money players paid in, in the selected window.,
<>Withdrawals — money paid out to players, in the selected window.,
<>Net = Deposits − Withdrawals. Positive = casino took in more than it paid; negative = players cashed out more.,
<>Balanced — terminal success state: the PSP confirmed the transaction settled.,
<>Approval rate — measures the operator decision step, not the PSP outcome. Approved transactions (auto-approved or operator-approved) ÷ (approved + rejected). Approved txs still have to be processed by the PSP — they then turn into Balanced or Failed.,
]}>
The home dashboard of PayBO. Every number on this page is filtered by the timeframe on the right and by the brand selector at the top (which acts like an auto-login when set to a specific tenant). Use it to spot daily anomalies in volume, approval rate, and method performance.
{/* KPIs */}
Key metrics
Deposits ({tf})
Deposits = total money players paid in to the casino through the brand's payment methods during the window. Sum of every successful Deposit transaction. Excludes failed / declined / pending attempts.
{/* The static "▲ 12.4% vs prev" delta chip was an invented number —
no feed provides a prior-window comparison, so no delta renders
(honesty canon §2.17). Same on the two KPIs below. */}
Withdrawals ({tf})
Withdrawals = total money players cashed out during the window. Sum of every successful Withdrawal transaction. To-Confirm and pending withdrawals are not counted until they settle.
Net GGR (approx)
Net = Deposits − Withdrawals. Positive means the casino took in more money than it paid out in this window. Negative means players cashed out more than they deposited (common around big wins or weekend payouts). This is an approximation of GGR — it excludes fees and bonuses.
Approval rate
Approval rate measures the operator decision, not the PSP outcome. It counts the transactions our auto-approval engine or a human operator approved (passed through to the PSP) divided by all transactions that went through that decision step (approved + rejected). After approval the transaction still has to be processed by the PSP — it can then turn into Balanced (settled) or Failed.
{/* scope tag was "static" — stale: the mix is counted from the same
scoped/windowed rows as every other widget since the data-wiring
pass, so the honest tag is "Follows filters". */}
Payment method mix
{/* Donut used to fall back to its legacy "€412K / TOTAL VOLUME"
placeholder center — an invented number (honesty canon §2.17).
Center now carries nothing but real data, and an empty window
says so instead of rendering a bare ring. */}
{donut.length === 0 ? (