Francy51/Neon-Desk
2
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(financials): add compact surface UI and graphing states

Browse Source
This commit is contained in:
francy51
2026-03-12 15:25:21 -04:00
parent c274f4d55b
commit 33ce48f53c
13 changed files with 1941 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
components/financials/normalization-summary.tsx Normal file
View File

@@ -0,0 +1,58 @@
'use client';
import { AlertTriangle } from 'lucide-react';
import { Panel } from '@/components/ui/panel';
import type { NormalizationMetadata } from '@/lib/types';
import { cn } from '@/lib/utils';
type NormalizationSummaryProps = {
normalization: NormalizationMetadata;
};
function SummaryCard(props: {
label: string;
value: string;
tone?: 'default' | 'warning';
}) {
return (
<div
className={cn(
'data-surface px-3 py-3',
props.tone === 'warning' && 'border-[#7f6250] bg-[linear-gradient(180deg,rgba(80,58,41,0.92),rgba(38,27,21,0.78))]'
)}
>
<p className="panel-heading text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">{props.label}</p>
<p className="mt-1 text-sm font-semibold text-[color:var(--terminal-bright)]">{props.value}</p>
</div>
);
}
export function NormalizationSummary({ normalization }: NormalizationSummaryProps) {
const hasMaterialUnmapped = normalization.materialUnmappedRowCount > 0;
return (
<Panel
title="Normalization Summary"
subtitle="Pack, parser, and residual mapping health for the compact statement surface."
variant="surface"
>
<div className="grid gap-3 md:grid-cols-2 xl:grid-cols-5">
<SummaryCard label="Pack" value={normalization.fiscalPack ?? 'unknown'} />
<SummaryCard label="Regime" value={normalization.regime} />
<SummaryCard label="Parser" value={`fiscal-xbrl ${normalization.parserVersion}`} />
<SummaryCard label="Unmapped Rows" value={String(normalization.unmappedRowCount)} />
<SummaryCard
label="Material Unmapped"
value={String(normalization.materialUnmappedRowCount)}
tone={hasMaterialUnmapped ? 'warning' : 'default'}
/>
</div>
{hasMaterialUnmapped ? (
<div className="mt-3 flex items-start gap-2 rounded-xl border border-[#7f6250] bg-[rgba(91,66,46,0.18)] px-3 py-3 text-sm text-[#f5d5c0]">
<AlertTriangle className="mt-0.5 size-4 shrink-0" />
<p>Material unmapped rows were detected for this filing set. Use the inspector and detail rows before relying on cross-company comparisons.</p>
</div>
) : null}
</Panel>
);
}

208
components/financials/statement-matrix.tsx Normal file
View File

@@ -0,0 +1,208 @@
'use client';
import { Fragment } from 'react';
import { ChevronDown, ChevronRight } from 'lucide-react';
import type { FinancialStatementPeriod, SurfaceFinancialRow, DetailFinancialRow } from '@/lib/types';
import { cn } from '@/lib/utils';
import type {
StatementInspectorSelection,
StatementTreeNode,
StatementTreeSection
} from '@/lib/financials/statement-view-model';
type MatrixRow = SurfaceFinancialRow | DetailFinancialRow;
type StatementMatrixProps = {
periods: FinancialStatementPeriod[];
sections: StatementTreeSection[];
selectedRowRef: StatementInspectorSelection | null;
onToggleRow: (key: string) => void;
onSelectRow: (selection: StatementInspectorSelection) => void;
renderCellValue: (row: MatrixRow, periodId: string, previousPeriodId: string | null) => string;
periodLabelFormatter: (value: string) => string;
};
function isSurfaceNode(node: StatementTreeNode): node is Extract<StatementTreeNode, { kind: 'surface' }> {
return node.kind === 'surface';
}
function rowSelected(
node: StatementTreeNode,
selectedRowRef: StatementInspectorSelection | null
) {
if (!selectedRowRef) {
return false;
}
if (node.kind === 'surface') {
return selectedRowRef.kind === 'surface' && selectedRowRef.key === node.row.key;
}
return selectedRowRef.kind === 'detail'
&& selectedRowRef.key === node.row.key
&& selectedRowRef.parentKey === node.parentSurfaceKey;
}
function surfaceBadges(node: Extract<StatementTreeNode, { kind: 'surface' }>) {
const badges: Array<{ label: string; tone: 'default' | 'warning' | 'muted' }> = [];
if (node.row.resolutionMethod === 'formula_derived') {
badges.push({ label: 'Formula', tone: node.row.confidence === 'low' ? 'warning' : 'default' });
}
if (node.row.resolutionMethod === 'not_meaningful') {
badges.push({ label: 'N/M', tone: 'muted' });
}
if (node.row.confidence === 'low') {
badges.push({ label: 'Low confidence', tone: 'warning' });
}
const detailCount = node.row.detailCount ?? node.directDetailCount;
if (detailCount > 0) {
badges.push({ label: `${detailCount} details`, tone: 'default' });
}
return badges;
}
function badgeClass(tone: 'default' | 'warning' | 'muted') {
if (tone === 'warning') {
return 'border-[#84614f] bg-[rgba(112,76,54,0.22)] text-[#ffd7bf]';
}
if (tone === 'muted') {
return 'border-[color:var(--line-weak)] bg-[rgba(80,85,92,0.16)] text-[color:var(--terminal-muted)]';
}
return 'border-[color:var(--line-weak)] bg-[rgba(88,102,122,0.16)] text-[color:var(--terminal-bright)]';
}
function renderNodes(props: StatementMatrixProps & { nodes: StatementTreeNode[] }) {
return props.nodes.map((node) => {
const isSelected = rowSelected(node, props.selectedRowRef);
const labelIndent = node.kind === 'detail' ? node.level * 18 + 18 : node.level * 18;
const canToggle = isSurfaceNode(node) && node.expandable;
const nextSelection: StatementInspectorSelection = node.kind === 'surface'
? { kind: 'surface', key: node.row.key }
: { kind: 'detail', key: node.row.key, parentKey: node.parentSurfaceKey };
return (
<Fragment key={node.id}>
<tr className={cn(isSelected && 'bg-[color:rgba(70,77,87,0.48)]')}>
<td className="sticky left-0 z-10 bg-[color:var(--panel)]">
<div className="flex min-w-[260px] items-start gap-2" style={{ paddingLeft: `${labelIndent}px` }}>
{canToggle ? (
<button
type="button"
aria-label={`${node.expanded ? 'Collapse' : 'Expand'} ${node.row.label} details`}
aria-expanded={node.expanded}
aria-controls={`statement-children-${node.id}`}
className="mt-0.5 inline-flex size-11 shrink-0 items-center justify-center rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] text-[color:var(--terminal-bright)] transition hover:border-[color:var(--line-strong)]"
onClick={(event) => {
event.stopPropagation();
props.onToggleRow(node.row.key);
}}
>
{node.expanded ? <ChevronDown className="size-4" /> : <ChevronRight className="size-4" />}
</button>
) : (
<span className="inline-flex size-11 shrink-0 items-center justify-center text-[color:var(--terminal-muted)]" aria-hidden="true">
{node.kind === 'detail' ? '·' : ''}
</span>
)}
<button
type="button"
className="flex min-w-0 flex-1 flex-col items-start gap-1 py-2 text-left"
onClick={() => props.onSelectRow(nextSelection)}
>
<span className={cn(
'text-sm text-[color:var(--terminal-bright)]',
node.kind === 'detail' && 'text-[13px] text-[color:var(--terminal-soft)]',
node.kind === 'surface' && node.level > 0 && 'text-[color:var(--terminal-soft)]'
)}>
{node.row.label}
</span>
{node.kind === 'detail' ? (
<span className="text-xs text-[color:var(--terminal-muted)]">
{node.row.localName}
{node.row.residualFlag ? ' · residual' : ''}
</span>
) : (
<div className="flex flex-wrap gap-1">
{surfaceBadges(node).map((badge) => (
<span
key={`${node.row.key}-${badge.label}`}
className={cn(
'rounded-full border px-2 py-0.5 text-[10px] uppercase tracking-[0.14em]',
badgeClass(badge.tone)
)}
>
{badge.label}
</span>
))}
</div>
)}
</button>
</div>
</td>
{props.periods.map((period, index) => (
<td key={`${node.id}-${period.id}`}>
{props.renderCellValue(node.row, period.id, index > 0 ? props.periods[index - 1]?.id ?? null : null)}
</td>
))}
</tr>
{isSurfaceNode(node) && node.expanded ? (
<>
<tr id={`statement-children-${node.id}`} className="sr-only">
<td colSpan={props.periods.length + 1}>Expanded children for {node.row.label}</td>
</tr>
{renderNodes({
...props,
nodes: node.children
})}
</>
) : null}
</Fragment>
);
});
}
export function StatementMatrix(props: StatementMatrixProps) {
return (
<div className="data-table-wrap">
<table className="data-table min-w-[1040px]">
<thead>
<tr>
<th className="sticky left-0 z-10 bg-[color:var(--panel)]">Metric</th>
{props.periods.map((period) => (
<th key={period.id}>
<div className="flex flex-col gap-1">
<span>{props.periodLabelFormatter(period.periodEnd ?? period.filingDate)}</span>
<span className="text-[11px] normal-case tracking-normal text-[color:var(--terminal-muted)]">{period.filingType} · {period.periodLabel}</span>
</div>
</th>
))}
</tr>
</thead>
<tbody>
{props.sections.map((section) => (
<Fragment key={section.key}>
{section.label ? (
<tr className="bg-[color:var(--panel-soft)]">
<td colSpan={props.periods.length + 1} className="font-semibold text-[color:var(--terminal-bright)]">
{section.label}
</td>
</tr>
) : null}
{renderNodes({
...props,
nodes: section.nodes
})}
</Fragment>
))}
</tbody>
</table>
</div>
);
}

174
components/financials/statement-row-inspector.tsx Normal file
View 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>
);
}