{periodNote && (
{periodNote}
)}
}
>
{/* Statement drill-through banner */}
{(drillCodes.length > 0 || (initialDrill && initialDrill.label)) && (
{backToSource && (
)}
Drilled in from {(initialDrill && initialDrill.label) || 'a statement line'}
{drillCodes.length > 0 && <> · {drillCodes.length} account{drillCodes.length === 1 ? '' : 's'}}
{(customRange.start || customRange.end) && <> · {customRange.start || '…'} → {customRange.end || '…'}}
)}
{/* Filter bar */}
setSearch(e.target.value)}
style={{ minWidth: 220, flex: '0 0 auto' }}
/>
{def.dateCol && (
<>
{ setCustomRange(r => ({ ...r, start: e.target.value })); setMonthSel('__all__'); }}
style={{ minWidth: 130 }} title="From date" />
{ setCustomRange(r => ({ ...r, end: e.target.value })); setMonthSel('__all__'); }}
style={{ minWidth: 130 }} title="To date" />
)}
{(def.filters || []).map(f => (
))}
{activeFilters > 0 && (
)}
{/* Result summary */}
{loading
? 'Loading…'
: err
? Error: {err}
: <>
{total.toLocaleString()} row{total === 1 ? '' : 's'}
{total > 0 && <> · page {page + 1} of {totalPages.toLocaleString()}}
}
{/* The grid */}
{def.columns.map(c => (
| handleSort(c.key)} title={`Sort by ${c.label}`}>
{c.label}
{sort.col === c.key ? (sort.dir === 'asc' ? '▲' : '▼') : '↕'}
|
))}
{rows.length === 0 && !loading && (
|
{activeFilters ? 'No rows match these filters.' : 'No rows.'}
|
)}
{rows.map((r, i) => (
{def.columns.map(c => (
|
{fmtCellDisplay(r[c.key], c)}
|
))}
))}
{/* Footer pagination repeated for convenience on long pages */}
{total > pageSize && (
Page {page + 1} of {totalPages.toLocaleString()}
)}
);
}
// ── Top-level Data Room page (index ↔ table viewer) ─────────────────────
function DataRoomPage({ scopedCompanyId, periodResolved, companyProfile, setPage, drill, tableSlug }) {
const companyId = dr2UseCompanyId(scopedCompanyId);
// A drill-through opens a specific table. Two URL conventions are honored:
// • `drill` (?dr= query) = { t: tableKey, codes?, start?, end?, label? } —
// statement line drills, carry an account-code + period filter.
// • `tableSlug` (path segment, e.g. /data-room/gl-transactions) — selects a
// table with no filter (synthesis "View details", direct links). Dash and
// underscore are normalized so the router slug matches the table key.
const slugTable = tableSlug ? (DR_TABLE_BY_KEY[tableSlug] ? tableSlug
: (DR_TABLE_BY_KEY[String(tableSlug).replace(/-/g, '_')] ? String(tableSlug).replace(/-/g, '_') : null)) : null;
const drillTable = (drill && DR_TABLE_BY_KEY[drill.t]) ? drill.t : slugTable;
const [active, setActive] = useDR2State(drillTable); // tableKey or null = index
const [drillFilter, setDrillFilter] = useDR2State((drill && DR_TABLE_BY_KEY[drill.t]) ? drill : null);
const drillSig = (drill ? JSON.stringify(drill) : '') + '|' + (slugTable || '');
// A new deep-link (?dr= filter or path slug) opens its table.
useDR2Effect(() => {
if (drillTable) {
setActive(drillTable);
setDrillFilter((drill && DR_TABLE_BY_KEY[drill.t]) ? drill : null);
}
}, [drillSig]);
// Reset selection when the scoped company changes — unless a drill targets it.
useDR2Effect(() => { if (!drillTable) { setActive(null); setDrillFilter(null); } }, [companyId]);
if (!companyId) {
return (