Improve financial statement value formatting

app/financials/page.tsx

@@ -37,6 +37,7 @@ import { useLinkPrefetch } from '@/hooks/use-link-prefetch';
 import { queueFilingSync } from '@/lib/api';
 import {
   formatCurrencyByScale,
+  formatFinancialStatementValue,
   formatPercent,
   type NumberScaleUnit
 } from '@/lib/format';
@@ -121,32 +122,62 @@ function rowValue(row: DisplayRow, periodId: string) {
   return row.values[periodId] ?? null;
 }
 
-function formatMetricValue(value: number | null, unit: FinancialUnit, scale: NumberScaleUnit) {
-  if (value === null) {
-    return 'n/a';
+function isStatementSurfaceKind(surfaceKind: FinancialSurfaceKind) {
+  return surfaceKind === 'income_statement' || surfaceKind === 'balance_sheet' || surfaceKind === 'cash_flow_statement';
+}
+
+function formatMetricValue(input: {
+  value: number | null;
+  unit: FinancialUnit;
+  scale: NumberScaleUnit;
+  rowKey?: string | null;
+  surfaceKind: FinancialSurfaceKind;
+  isPercentChange?: boolean;
+  isCommonSize?: boolean;
+}) {
+  if (input.value === null) {
+    return isStatementSurfaceKind(input.surfaceKind) ? '—' : 'n/a';
   }
 
-  switch (unit) {
+  if (isStatementSurfaceKind(input.surfaceKind)) {
+    return formatFinancialStatementValue({
+      value: input.value,
+      unit: input.unit,
+      scale: input.scale,
+      rowKey: input.rowKey,
+      surfaceKind: input.surfaceKind,
+      isPercentChange: input.isPercentChange,
+      isCommonSize: input.isCommonSize
+    });
+  }
+
+  switch (input.unit) {
     case 'currency':
-      return formatCurrencyByScale(value, scale);
+      return formatCurrencyByScale(input.value, input.scale);
     case 'percent':
-      return formatPercent(value * 100);
+      return formatPercent(input.value * 100);
     case 'shares':
     case 'count':
-      return new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 2 }).format(value);
+      return new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 2 }).format(input.value);
     case 'ratio':
-      return `${value.toFixed(2)}x`;
+      return `${input.value.toFixed(2)}x`;
     default:
-      return String(value);
+      return String(input.value);
   }
 }
 
-function chartTickFormatter(value: number, unit: FinancialUnit, scale: NumberScaleUnit) {
+function chartTickFormatter(
+  value: number,
+  unit: FinancialUnit,
+  scale: NumberScaleUnit,
+  surfaceKind: FinancialSurfaceKind,
+  rowKey?: string | null
+) {
   if (!Number.isFinite(value)) {
-    return 'n/a';
+    return isStatementSurfaceKind(surfaceKind) ? '—' : 'n/a';
   }
 
-  return formatMetricValue(value, unit, scale);
+  return formatMetricValue({ value, unit, scale, surfaceKind, rowKey });
 }
 
 function buildDisplayValue(input: {
@@ -165,10 +196,17 @@ function buildDisplayValue(input: {
   if (input.showPercentChange && input.previousPeriodId) {
     const previous = rowValue(input.row, input.previousPeriodId);
     if (current === null || previous === null || previous === 0) {
-      return 'n/a';
+      return isStatementSurfaceKind(input.surfaceKind) ? '—' : 'n/a';
     }
 
-    return formatPercent(((current - previous) / previous) * 100);
+    return formatMetricValue({
+      value: (current - previous) / previous,
+      unit: 'percent',
+      scale: input.scale,
+      rowKey: input.row.key,
+      surfaceKind: input.surfaceKind,
+      isPercentChange: true
+    });
   }
 
   if (input.showCommonSize) {
@@ -177,21 +215,34 @@ function buildDisplayValue(input: {
     }
 
     if (input.displayMode === 'faithful') {
-      return 'n/a';
+      return isStatementSurfaceKind(input.surfaceKind) ? '—' : 'n/a';
     }
 
     const denominator = input.commonSizeRow ? rowValue(input.commonSizeRow, input.periodId) : null;
     if (current === null || denominator === null || denominator === 0) {
-      return 'n/a';
+      return isStatementSurfaceKind(input.surfaceKind) ? '—' : 'n/a';
     }
 
-    return formatPercent((current / denominator) * 100);
+    return formatMetricValue({
+      value: current / denominator,
+      unit: 'percent',
+      scale: input.scale,
+      rowKey: input.row.key,
+      surfaceKind: input.surfaceKind,
+      isCommonSize: true
+    });
   }
 
   const unit = isTaxonomyRow(input.row)
     ? 'currency'
     : input.row.unit;
-  return formatMetricValue(current, unit, input.scale);
+  return formatMetricValue({
+    value: current,
+    unit,
+    scale: input.scale,
+    rowKey: input.row.key,
+    surfaceKind: input.surfaceKind
+  });
 }
 
 function groupRows(rows: DisplayRow[], categories: CompanyFinancialStatementsResponse['categories']) {
@@ -694,13 +745,25 @@ function FinancialsPageContent() {
                 <YAxis
                   stroke={CHART_MUTED}
                   fontSize={12}
-                  tickFormatter={(value: number) => chartTickFormatter(value, trendSeries[0]?.unit ?? 'currency', valueScale)}
+                  tickFormatter={(value: number) => chartTickFormatter(
+                    value,
+                    trendSeries[0]?.unit ?? 'currency',
+                    valueScale,
+                    surfaceKind,
+                    trendSeries[0]?.key ?? null
+                  )}
                 />
                 <Tooltip
                   formatter={(value: unknown, _name, entry) => {
                     const numeric = Number(value);
-                    const unit = trendSeries.find((series) => series.key === entry.dataKey)?.unit ?? 'currency';
-                    return formatMetricValue(Number.isFinite(numeric) ? numeric : null, unit, valueScale);
+                    const series = trendSeries.find((candidate) => candidate.key === entry.dataKey);
+                    return formatMetricValue({
+                      value: Number.isFinite(numeric) ? numeric : null,
+                      unit: series?.unit ?? 'currency',
+                      scale: valueScale,
+                      rowKey: series?.key ?? null,
+                      surfaceKind
+                    });
                   }}
                   contentStyle={{
                     backgroundColor: CHART_TOOLTIP_BG,
@@ -736,70 +799,77 @@ function FinancialsPageContent() {
         ) : periods.length === 0 || filteredRows.length === 0 ? (
           <p className="text-sm text-[color:var(--terminal-muted)]">No rows available for the selected filters yet.</p>
         ) : (
-          <div className="data-table-wrap">
-            <table className="data-table min-w-[980px]">
-              <thead>
-                <tr>
-                  <th className="sticky left-0 z-10 bg-[color:var(--panel)]">Metric</th>
-                  {periods.map((period) => (
-                    <th key={period.id}>
-                      <div className="flex flex-col gap-1">
-                        <span>{formatLongDate(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>
-                {groupedRows.map((group) => (
-                  <Fragment key={group.label ?? 'ungrouped'}>
-                    {group.label ? (
-                      <tr className="bg-[color:var(--panel-soft)]">
-                        <td colSpan={periods.length + 1} className="font-semibold text-[color:var(--terminal-bright)]">{group.label}</td>
-                      </tr>
-                    ) : null}
-                    {group.rows.map((row) => (
-                      <tr
-                        key={row.key}
-                        className={selectedRowKey === row.key ? 'bg-[color:var(--panel-soft)]' : undefined}
-                        onClick={() => setSelectedRowKey(row.key)}
-                      >
-                        <td className="sticky left-0 z-10 bg-[color:var(--panel)]">
-                          <div className="flex flex-col gap-1">
-                            <div className="flex items-center gap-2">
-                              <span style={{ paddingLeft: `${isTaxonomyRow(row) ? Math.min(row.depth, 10) * 12 : 0}px` }}>{row.label}</span>
-                              {'hasDimensions' in row && row.hasDimensions ? <ChevronDown className="size-3 text-[color:var(--accent)]" /> : null}
-                            </div>
-                            {isDerivedRow(row) && row.formulaKey ? (
-                              <span className="text-xs text-[color:var(--terminal-muted)]">Formula: {row.formulaKey}</span>
-                            ) : null}
-                            {isKpiRow(row) ? (
-                              <span className="text-xs text-[color:var(--terminal-muted)]">Provenance: {row.provenanceType}</span>
-                            ) : null}
-                          </div>
-                        </td>
-                        {periods.map((period, index) => (
-                          <td key={`${row.key}-${period.id}`}>
-                            {buildDisplayValue({
-                              row,
-                              periodId: period.id,
-                              previousPeriodId: index > 0 ? periods[index - 1]?.id ?? null : null,
-                              commonSizeRow,
-                              displayMode,
-                              showPercentChange,
-                              showCommonSize,
-                              scale: valueScale,
-                              surfaceKind
-                            })}
-                          </td>
-                        ))}
-                      </tr>
+          <div className="space-y-3">
+            {isStatementSurfaceKind(surfaceKind) ? (
+              <p className="text-xs uppercase tracking-[0.24em] text-[color:var(--terminal-muted)]">
+                USD · {FINANCIAL_VALUE_SCALE_OPTIONS.find((option) => option.value === valueScale)?.label ?? valueScale}
+              </p>
+            ) : null}
+            <div className="data-table-wrap">
+              <table className="data-table min-w-[980px]">
+                <thead>
+                  <tr>
+                    <th className="sticky left-0 z-10 bg-[color:var(--panel)]">Metric</th>
+                    {periods.map((period) => (
+                      <th key={period.id}>
+                        <div className="flex flex-col gap-1">
+                          <span>{formatLongDate(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>
                     ))}
-                  </Fragment>
-                ))}
-              </tbody>
-            </table>
+                  </tr>
+                </thead>
+                <tbody>
+                  {groupedRows.map((group) => (
+                    <Fragment key={group.label ?? 'ungrouped'}>
+                      {group.label ? (
+                        <tr className="bg-[color:var(--panel-soft)]">
+                          <td colSpan={periods.length + 1} className="font-semibold text-[color:var(--terminal-bright)]">{group.label}</td>
+                        </tr>
+                      ) : null}
+                      {group.rows.map((row) => (
+                        <tr
+                          key={row.key}
+                          className={selectedRowKey === row.key ? 'bg-[color:var(--panel-soft)]' : undefined}
+                          onClick={() => setSelectedRowKey(row.key)}
+                        >
+                          <td className="sticky left-0 z-10 bg-[color:var(--panel)]">
+                            <div className="flex flex-col gap-1">
+                              <div className="flex items-center gap-2">
+                                <span style={{ paddingLeft: `${isTaxonomyRow(row) ? Math.min(row.depth, 10) * 12 : 0}px` }}>{row.label}</span>
+                                {'hasDimensions' in row && row.hasDimensions ? <ChevronDown className="size-3 text-[color:var(--accent)]" /> : null}
+                              </div>
+                              {isDerivedRow(row) && row.formulaKey ? (
+                                <span className="text-xs text-[color:var(--terminal-muted)]">Formula: {row.formulaKey}</span>
+                              ) : null}
+                              {isKpiRow(row) ? (
+                                <span className="text-xs text-[color:var(--terminal-muted)]">Provenance: {row.provenanceType}</span>
+                              ) : null}
+                            </div>
+                          </td>
+                          {periods.map((period, index) => (
+                            <td key={`${row.key}-${period.id}`}>
+                              {buildDisplayValue({
+                                row,
+                                periodId: period.id,
+                                previousPeriodId: index > 0 ? periods[index - 1]?.id ?? null : null,
+                                commonSizeRow,
+                                displayMode,
+                                showPercentChange,
+                                showCommonSize,
+                                scale: valueScale,
+                                surfaceKind
+                              })}
+                            </td>
+                          ))}
+                        </tr>
+                      ))}
+                    </Fragment>
+                  ))}
+                </tbody>
+              </table>
+            </div>
           </div>
         )}
       </Panel>
@@ -870,7 +940,13 @@ function FinancialsPageContent() {
                         <td>{periods.find((period) => period.id === row.periodId)?.periodLabel ?? row.periodId}</td>
                         <td>{row.axis}</td>
                         <td>{row.member}</td>
-                        <td>{formatMetricValue(row.value, 'currency', valueScale)}</td>
+                        <td>{formatMetricValue({
+                          value: row.value,
+                          unit: isTaxonomyRow(selectedRow) ? 'currency' : selectedRow.unit,
+                          scale: valueScale,
+                          rowKey: selectedRow.key,
+                          surfaceKind
+                        })}</td>
                       </tr>
                     ))}
                   </tbody>
@@ -905,8 +981,20 @@ function FinancialsPageContent() {
                   {financials.metrics.validation?.checks.map((check) => (
                     <tr key={check.metricKey}>
                       <td>{check.metricKey}</td>
-                      <td>{formatMetricValue(check.taxonomyValue, 'currency', valueScale)}</td>
-                      <td>{formatMetricValue(check.llmValue, 'currency', valueScale)}</td>
+                      <td>{formatMetricValue({
+                        value: check.taxonomyValue,
+                        unit: 'currency',
+                        scale: valueScale,
+                        rowKey: check.metricKey,
+                        surfaceKind
+                      })}</td>
+                      <td>{formatMetricValue({
+                        value: check.llmValue,
+                        unit: 'currency',
+                        scale: valueScale,
+                        rowKey: check.metricKey,
+                        surfaceKind
+                      })}</td>
                       <td>{check.status}</td>
                       <td>{check.evidencePages.join(', ') || 'n/a'}</td>
                     </tr>