);
}
// DSP / platform breakdown — drills into the line-level data of every real statement
// in the active period, so Spotify, Apple Music, YouTube etc. surface as their own
// rows even though they arrive bundled inside RSD or HFA statements. This is the
// "where did the money come from at the platform level" view.
function DSPBreakdown({ stmts }) {
const idx = window.__STMT_INDEX;
if (!idx || !stmts.length) return null;
// For each line in each real statement, derive a "platform" key based on parser:
// rsd-distributor → l.dsp (Spotify, Apple Music, YouTube, etc.)
// bmi → l.perfSource
// ascap-intl → l.musicUser || l.perfSource
// ascap-foreign → l.licensor (society of origin abroad)
// hfa-mech → l.licenseeName (Spotify USA, LyricFind, etc.)
// tiktok-mri → 'TikTok'
const byPlatform = new Map();
stmts.filter((s) => s.isReal).forEach((s) => {
const real = idx.statements.find((r) => r.id === s.realStmtId);
if (!real) return;
real.lines.forEach((l) => {
let key, terr;
if (real.parser === 'rsd-distributor') {key = l.dsp || 'Unknown';terr = l.territory;} else
if (real.parser === 'bmi') {key = l.perfSource || 'Unknown';terr = l.country;} else
if (real.parser === 'ascap-intl') {key = l.musicUser || l.perfSource || 'Unknown';terr = l.territory;} else
if (real.parser === 'ascap-foreign') {key = l.licensor || 'Unknown';terr = l.country || l.territory;} else
if (real.parser === 'hfa-mech') {key = l.licenseeName || 'Unknown';terr = l.territory;} else
if (real.parser === 'tiktok-mri') {key = 'TikTok';terr = null;} else
{key = 'Unknown';terr = null;}
if (!byPlatform.has(key)) byPlatform.set(key, { name: key, gross: 0, lines: 0, sources: new Set(), territories: new Set() });
const x = byPlatform.get(key);
x.gross += l.royaltyUsd || l.grossAmount || l.royaltyAmount || 0;
x.lines += 1;
x.sources.add(real.sourceName);
if (terr) x.territories.add(terr);
});
});
const rows = [...byPlatform.values()].sort((a, b) => b.gross - a.gross);
if (!rows.length) return null;
const total = rows.reduce((a, r) => a + r.gross, 0) || 1;
return (
By platform · per-line drilldown
{rows.length} PLATFORMS · {fmt.cur(total)} CONSOLIDATED · derived from {stmts.filter((s) => s.isReal).reduce((a, s) => a + s.realLines, 0).toLocaleString()} statement lines
{Math.round(rows.filter((r) => r.ccy !== 'USD').reduce((a, r) => a + r.usd, 0) / totalUsd * 100)}% of gross is non-USD. Consider FX hedging on EUR/GBP/JPY positions before payout.
}
);
}
// ─────────────────────────── main screen
function ScreenRoyalties({ go }) {
const allStmts = useMemo(buildStatements, []);
const [period, setPeriod] = useState('2025Q4');
const [kindFilter, setKindFilter] = useState('all'); // all | DSP | PRO | MRO | NRO
const [statusFilter, setStatusFilter] = useState('all');
const [sourceFilter, setSourceFilter] = useState('all');
const [search, setSearch] = useState('');
const [sort, setSort] = useState({ k: 'gross', dir: 'desc' });
// Statement-inbox drawer — opens from the "STATEMENTS" pill in the hero.
// The page's primary view is now analytical ("what did I earn?"); ingest /
// reconcile detail lives in this slide-out drawer ("did the money arrive?").
const [drawerOpen, setDrawerOpen] = useState(false);
// Re-render when the statement drawer mutates a decision (e.g. mark reconciled)
const [, forceTick] = useState(0);
React.useEffect(() => {
const onChange = () => forceTick((x) => x + 1);
window.addEventListener('astro-stmt-decisions-changed', onChange);
return () => window.removeEventListener('astro-stmt-decisions-changed', onChange);
}, []);
const stmts = useMemo(() => allStmts.filter((s) => s.period.id === period), [allStmts, period]);
const filtered = useMemo(() => {
let r = stmts;
if (kindFilter !== 'all') r = r.filter((s) => s.source.kind === kindFilter);
if (statusFilter !== 'all') r = r.filter((s) => effStatus(s) === statusFilter);
if (sourceFilter !== 'all') r = r.filter((s) => s.source.id === sourceFilter);
if (search.trim()) {
const q = search.toLowerCase();
r = r.filter((s) => s.source.name.toLowerCase().includes(q));
}
r = [...r].sort((a, b) => {
const dir = sort.dir === 'asc' ? 1 : -1;
if (sort.k === 'gross') return (a.grossUsd - b.grossUsd) * dir;
if (sort.k === 'lines') return (a.lines - b.lines) * dir;
if (sort.k === 'source') return a.source.name.localeCompare(b.source.name) * dir;
if (sort.k === 'status') return a.status.localeCompare(b.status) * dir;
return 0;
});
return r;
}, [stmts, kindFilter, statusFilter, sourceFilter, search, sort]);
// Hero metrics
const totals = useMemo(() => {
const grossUsd = stmts.reduce((a, s) => a + s.grossUsd, 0);
const linesTotal = stmts.reduce((a, s) => a + s.lines, 0);
const reconciled = stmts.filter((s) => ['reconciled', 'paid'].includes(effStatus(s)));
const reconciledUsd = reconciled.reduce((a, s) => a + s.grossUsd, 0);
const awaiting = stmts.filter((s) => ['parsed', 'matched', 'received', 'parsing'].includes(effStatus(s)));
const flags = stmts.filter((s) => ['failed', 'late'].includes(effStatus(s))).length +
stmts.reduce((a, s) => a + (s.anomalies > 4 ? 1 : 0), 0);
return { grossUsd, linesTotal, reconciled: reconciled.length, reconciledUsd, awaiting: awaiting.length, flags };
}, [stmts]);
// Non-pipeline metrics for the stat strip — things the funnel can't tell you.
const insights = useMemo(() => {
// Variance vs prior period
const periodIdx = PERIODS.findIndex((p) => p.id === period);
const prior = periodIdx >= 0 && periodIdx < PERIODS.length - 1 ? PERIODS[periodIdx + 1] : null;
const priorTotal = prior ? allStmts.filter((s) => s.period.id === prior.id).reduce((a, s) => a + s.grossUsd, 0) : 0;
const grossUsd = stmts.reduce((a, s) => a + s.grossUsd, 0);
const variancePct = priorTotal ? Math.round((grossUsd - priorTotal) / priorTotal * 100) : null;
// FX exposure: % of gross arriving in non-USD
const nonUsdUsd = stmts.filter((s) => s.currency !== 'USD').reduce((a, s) => a + s.grossUsd, 0);
const fxPct = grossUsd ? Math.round(nonUsdUsd / grossUsd * 100) : 0;
// Oldest stuck statement (parsed/matched but not reconciled)
const stuck = stmts.filter((s) => ['parsed', 'matched'].includes(effStatus(s)) && s.processedAt);
const oldest = stuck.sort((a, b) => a.processedAt - b.processedAt)[0];
const oldestDays = oldest ? Math.round((new Date('2026-04-30') - oldest.processedAt) / 86400000) : null;
// Top source by gross
const bySource = {};
stmts.forEach((s) => {bySource[s.source.id] = (bySource[s.source.id] || 0) + s.grossUsd;});
const topId = Object.keys(bySource).sort((a, b) => bySource[b] - bySource[a])[0];
const topSrc = topId ? getAllSources().find((x) => x.id === topId) : null;
const topShare = topSrc && grossUsd ? Math.round(bySource[topSrc.id] / grossUsd * 100) : 0;
// Avg days from period close to processed (for arrived statements)
const arrived = stmts.filter((s) => s.processedAt);
const avgDays = arrived.length ? Math.round(arrived.reduce((a, s) => {
return a + Math.round((s.processedAt - new Date(s.period.end)) / 86400000);
}, 0) / arrived.length) : null;
return { variancePct, priorLabel: prior ? prior.label : null, fxPct, oldestDays, oldestSrc: oldest ? oldest.source.name : null, topSrc, topShare, avgDays };
}, [stmts, allStmts, period]);
const reconcilePct = totals.grossUsd ? Math.round(totals.reconciledUsd / totals.grossUsd * 100) : 0;
const toggleSort = (k) => setSort((s) => s.k === k ? { k, dir: s.dir === 'asc' ? 'desc' : 'asc' } : { k, dir: 'desc' });
return (
No statements have arrived for {PERIODS.find((p) => p.id === period).label} yet. DSPs typically deliver 30–60 days after period close
({PERIODS.find((p) => p.id === period).end}); PROs run 90–120 days behind. Switch to{' '}
setPeriod('2025Q4')}>2025 Q4{' '}
to see closed statements, or go('analytics')}>view earnings →
{/* ─────── Analytics primary: by source / by currency / over time / anomalies.
Operational pipeline + statement inbox table now live in the StatementsDrawer
(toggled from the "Statements" pill in the hero). The page's job here is
"what did I earn"; reconciliation detail is one click away. */}
{/* By source — full width (was sidebar). The "Earnings" question's first answer:
which sources brought what, ranked. */}
{/* Two-up: by currency + over-time trend. Rounds out the analytical picture. */}
{/* Per-DSP / platform drilldown — derived from line-level data. Surfaces Spotify,
Apple Music, YouTube, etc. as their own rows even though they ride into the
inbox bundled inside RSD or HFA statements. */}
{/* Anomalies — demoted to the bottom. Real ops work, but lower than analytics
on the page because the StatementsDrawer is the canonical home for it. */}
{/* ─────── Statements slide-out drawer */}
setDrawerOpen(false)}
stmts={stmts}
filtered={filtered}
period={period}
kindFilter={kindFilter} setKindFilter={setKindFilter}
statusFilter={statusFilter} setStatusFilter={setStatusFilter}
search={search} setSearch={setSearch}
sort={sort} toggleSort={toggleSort} />
);
}
// ─────────────────────────── Earnings trend (over time)
// Sparkline-style bar chart of gross USD across all 4 known periods.
// Click a bar to swap the active period — this is the only "time travel" affordance
// on the Earnings page; the period switcher in the hero is the chart's twin.
function EarningsTrend({ allStmts, currentPeriod, onPickPeriod }) {
const byPeriod = PERIODS.map((p) => {
const periodStmts = allStmts.filter((s) => s.period.id === p.id);
const gross = periodStmts.reduce((a, s) => a + s.grossUsd, 0);
return { period: p, gross, count: periodStmts.filter((s) => s.grossUsd > 0).length };
}).reverse(); // oldest → newest left → right
const max = Math.max(1, ...byPeriod.map((b) => b.gross));
// Variance vs prior period — same calculation as hero stat strip but shown as a delta line per bar
return (
Earnings over time
TRAILING {byPeriod.length} QUARTERS · USD CONSOLIDATED · click a bar to switch period
{/* Pipeline funnel — operational. Lives inside the drawer because it's
about "where in the ingest pipeline is each statement", not earnings. */}
{/* Filter bar */}
TOTAL · {filtered.length} OF {stmts.length}{filtered.reduce((a, s) => a + s.lines, 0).toLocaleString()}{fmt.cur(filtered.reduce((a, s) => a + s.grossUsd, 0))}
Parser identifies columns, extracts {detected.source.kind === 'DSP' ? '~9,000' : '~400'} lines, and matches each to a Work or Recording. Anomalies queue for review.
}
{step === 3 &&
···
QUEUING FOR PARSE
}
{step === 2 &&
}
);
}
// ─────────────────────────── Source history mini-drawer
// Shows a single source across all 4 periods — answers "how is ASCAP trending?"
function SourceHistoryDrawer() {
const [srcId, setSrcId] = useState(null);
React.useEffect(() => {
const onOpen = (e) => setSrcId(e.detail.id);
window.addEventListener('astro-open-source-history', onOpen);
return () => window.removeEventListener('astro-open-source-history', onOpen);
}, []);
if (!srcId) return null;
const src = getAllSources().find((s) => s.id === srcId);
if (!src) return null;
const all = buildStatements().filter((s) => s.source.id === srcId).sort((a, b) => PERIODS.findIndex((p) => p.id === a.period.id) - PERIODS.findIndex((p) => p.id === b.period.id));
const max = Math.max(1, ...all.map((s) => s.grossUsd));
const close = () => setSrcId(null);
return (