feat(financials): add compact surface UI and graphing states
This commit is contained in:
174
components/financials/statement-row-inspector.tsx
Normal file
174
components/financials/statement-row-inspector.tsx
Normal file
@@ -0,0 +1,174 @@
|
||||
'use client';
|
||||
|
||||
import { Panel } from '@/components/ui/panel';
|
||||
import type {
|
||||
DetailFinancialRow,
|
||||
DimensionBreakdownRow,
|
||||
FinancialStatementPeriod,
|
||||
FinancialSurfaceKind,
|
||||
SurfaceFinancialRow
|
||||
} from '@/lib/types';
|
||||
import type { ResolvedStatementSelection } from '@/lib/financials/statement-view-model';
|
||||
|
||||
type StatementRowInspectorProps = {
|
||||
selection: ResolvedStatementSelection | null;
|
||||
dimensionRows: DimensionBreakdownRow[];
|
||||
periods: FinancialStatementPeriod[];
|
||||
surfaceKind: Extract<FinancialSurfaceKind, 'income_statement' | 'balance_sheet' | 'cash_flow_statement'>;
|
||||
renderValue: (row: SurfaceFinancialRow | DetailFinancialRow, periodId: string, previousPeriodId: string | null) => string;
|
||||
renderDimensionValue: (value: number | null, rowKey: string, unit: SurfaceFinancialRow['unit']) => string;
|
||||
};
|
||||
|
||||
function InspectorCard(props: {
|
||||
label: string;
|
||||
value: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
|
||||
<p className="text-[color:var(--terminal-muted)]">{props.label}</p>
|
||||
<p className="font-semibold text-[color:var(--terminal-bright)]">{props.value}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function renderList(values: string[]) {
|
||||
return values.length > 0 ? values.join(', ') : 'n/a';
|
||||
}
|
||||
|
||||
export function StatementRowInspector(props: StatementRowInspectorProps) {
|
||||
const selection = props.selection;
|
||||
|
||||
return (
|
||||
<Panel
|
||||
title="Row Details"
|
||||
subtitle="Inspect compact-surface resolution, raw drill-down rows, and dimensional evidence."
|
||||
variant="surface"
|
||||
>
|
||||
{!selection ? (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">Select a compact surface row or raw detail row to inspect details.</p>
|
||||
) : selection.kind === 'surface' ? (
|
||||
<div className="space-y-4 text-sm">
|
||||
<div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-4">
|
||||
<InspectorCard label="Label" value={selection.row.label} />
|
||||
<InspectorCard label="Key" value={selection.row.key} />
|
||||
<InspectorCard label="Resolution" value={selection.row.resolutionMethod ?? 'direct'} />
|
||||
<InspectorCard label="Confidence" value={selection.row.confidence ?? 'high'} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-3 md:grid-cols-2">
|
||||
<InspectorCard label="Source Row Keys" value={renderList(selection.row.sourceRowKeys)} />
|
||||
<InspectorCard label="Source Concepts" value={renderList(selection.row.sourceConcepts)} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-3 md:grid-cols-2">
|
||||
<InspectorCard label="Source Fact IDs" value={selection.row.sourceFactIds.length > 0 ? selection.row.sourceFactIds.join(', ') : 'n/a'} />
|
||||
<InspectorCard label="Warning Codes" value={renderList(selection.row.warningCodes ?? [])} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-3 md:grid-cols-2">
|
||||
<InspectorCard label="Child Surface Rows" value={selection.childSurfaceRows.length > 0 ? selection.childSurfaceRows.map((row) => row.label).join(', ') : 'None'} />
|
||||
<InspectorCard label="Raw Detail Rows" value={String(selection.detailRows.length)} />
|
||||
</div>
|
||||
|
||||
{selection.detailRows.length > 0 ? (
|
||||
<div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-3">
|
||||
<p className="text-[color:var(--terminal-muted)]">Raw Detail Labels</p>
|
||||
<div className="mt-2 flex flex-wrap gap-2">
|
||||
{selection.detailRows.map((row) => (
|
||||
<span
|
||||
key={`${selection.row.key}-${row.key}`}
|
||||
className="rounded-full border border-[color:var(--line-weak)] bg-[rgba(88,102,122,0.16)] px-3 py-1 text-xs text-[color:var(--terminal-bright)]"
|
||||
>
|
||||
{row.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{selection.row.hasDimensions ? (
|
||||
props.dimensionRows.length === 0 ? (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">No dimensional facts were returned for the selected compact row.</p>
|
||||
) : (
|
||||
<div className="data-table-wrap">
|
||||
<table className="data-table min-w-[760px]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Period</th>
|
||||
<th>Axis</th>
|
||||
<th>Member</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{props.dimensionRows.map((row, index) => (
|
||||
<tr key={`${selection.row.key}-${row.periodId}-${row.axis}-${row.member}-${index}`}>
|
||||
<td>{props.periods.find((period) => period.id === row.periodId)?.periodLabel ?? row.periodId}</td>
|
||||
<td>{row.axis}</td>
|
||||
<td>{row.member}</td>
|
||||
<td>{props.renderDimensionValue(row.value, selection.row.key, selection.row.unit)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">No dimensional drill-down is available for this compact surface row.</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4 text-sm">
|
||||
<div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-4">
|
||||
<InspectorCard label="Label" value={selection.row.label} />
|
||||
<InspectorCard label="Key" value={selection.row.key} />
|
||||
<InspectorCard label="Parent Surface" value={selection.parentSurfaceRow?.label ?? selection.row.parentSurfaceKey} />
|
||||
<InspectorCard label="Residual" value={selection.row.residualFlag ? 'Yes' : 'No'} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-3 md:grid-cols-2">
|
||||
<InspectorCard label="Concept Key" value={selection.row.conceptKey} />
|
||||
<InspectorCard label="QName" value={selection.row.qname} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-3 md:grid-cols-2">
|
||||
<InspectorCard label="Local Name" value={selection.row.localName} />
|
||||
<InspectorCard label="Source Fact IDs" value={selection.row.sourceFactIds.length > 0 ? selection.row.sourceFactIds.join(', ') : 'n/a'} />
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
|
||||
<p className="text-[color:var(--terminal-muted)]">Dimensions Summary</p>
|
||||
<p className="font-semibold text-[color:var(--terminal-bright)]">{renderList(selection.row.dimensionsSummary)}</p>
|
||||
</div>
|
||||
|
||||
{props.dimensionRows.length === 0 ? (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">No dimensional facts were returned for the selected raw detail row.</p>
|
||||
) : (
|
||||
<div className="data-table-wrap">
|
||||
<table className="data-table min-w-[760px]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Period</th>
|
||||
<th>Axis</th>
|
||||
<th>Member</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{props.dimensionRows.map((row, index) => (
|
||||
<tr key={`${selection.row.parentSurfaceKey}-${selection.row.key}-${row.periodId}-${index}`}>
|
||||
<td>{props.periods.find((period) => period.id === row.periodId)?.periodLabel ?? row.periodId}</td>
|
||||
<td>{row.axis}</td>
|
||||
<td>{row.member}</td>
|
||||
<td>{props.renderDimensionValue(row.value, selection.row.key, props.surfaceKind === 'balance_sheet' ? 'currency' : 'currency')}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user