1100 lines
41 KiB
TypeScript
1100 lines
41 KiB
TypeScript
'use client';
|
|
|
|
import { useQueryClient } from '@tanstack/react-query';
|
|
import Link from 'next/link';
|
|
import { Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
import { format } from 'date-fns';
|
|
import { useSearchParams } from 'next/navigation';
|
|
import {
|
|
Area,
|
|
AreaChart,
|
|
Bar,
|
|
BarChart,
|
|
CartesianGrid,
|
|
Line,
|
|
ResponsiveContainer,
|
|
Tooltip,
|
|
XAxis,
|
|
YAxis
|
|
} from 'recharts';
|
|
import {
|
|
AlertTriangle,
|
|
ChartNoAxesCombined,
|
|
ChevronDown,
|
|
Download,
|
|
GitCompareArrows,
|
|
RefreshCcw,
|
|
Search
|
|
} from 'lucide-react';
|
|
import { AppShell } from '@/components/shell/app-shell';
|
|
import { MetricCard } from '@/components/dashboard/metric-card';
|
|
import {
|
|
FinancialControlBar,
|
|
type FinancialControlAction,
|
|
type FinancialControlSection
|
|
} from '@/components/financials/control-bar';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Panel } from '@/components/ui/panel';
|
|
import { useAuthGuard } from '@/hooks/use-auth-guard';
|
|
import { useLinkPrefetch } from '@/hooks/use-link-prefetch';
|
|
import { queueFilingSync } from '@/lib/api';
|
|
import {
|
|
formatCurrencyByScale,
|
|
formatPercent,
|
|
type NumberScaleUnit
|
|
} from '@/lib/format';
|
|
import { queryKeys } from '@/lib/query/keys';
|
|
import { companyFinancialStatementsQueryOptions } from '@/lib/query/options';
|
|
import type {
|
|
CompanyFinancialStatementsResponse,
|
|
DimensionBreakdownRow,
|
|
FinancialHistoryWindow,
|
|
FinancialStatementSurfaceKind,
|
|
FinancialStatementKind,
|
|
StandardizedStatementRow,
|
|
TaxonomyStatementRow
|
|
} from '@/lib/types';
|
|
|
|
type LoadOptions = {
|
|
cursor?: string | null;
|
|
append?: boolean;
|
|
};
|
|
|
|
type OverviewPoint = {
|
|
periodId: string;
|
|
filingDate: string;
|
|
periodEnd: string | null;
|
|
label: string;
|
|
revenue: number | null;
|
|
netIncome: number | null;
|
|
totalAssets: number | null;
|
|
cash: number | null;
|
|
debt: number | null;
|
|
};
|
|
|
|
type DisplayRow = TaxonomyStatementRow | StandardizedStatementRow;
|
|
|
|
const FINANCIAL_VALUE_SCALE_OPTIONS: Array<{ value: NumberScaleUnit; label: string }> = [
|
|
{ value: 'thousands', label: 'Thousands (K)' },
|
|
{ value: 'millions', label: 'Millions (M)' },
|
|
{ value: 'billions', label: 'Billions (B)' }
|
|
];
|
|
|
|
const STATEMENT_OPTIONS: Array<{ value: FinancialStatementKind; label: string }> = [
|
|
{ value: 'income', label: 'Income' },
|
|
{ value: 'balance', label: 'Balance Sheet' },
|
|
{ value: 'cash_flow', label: 'Cash Flow' },
|
|
{ value: 'equity', label: 'Equity' },
|
|
{ value: 'comprehensive_income', label: 'Comprehensive Income' }
|
|
];
|
|
|
|
const WINDOW_OPTIONS: Array<{ value: FinancialHistoryWindow; label: string }> = [
|
|
{ value: '10y', label: '10 Years' },
|
|
{ value: 'all', label: 'Full Available' }
|
|
];
|
|
|
|
const SURFACE_OPTIONS: Array<{ value: FinancialStatementSurfaceKind; label: string }> = [
|
|
{ value: 'standardized', label: 'Standardized' },
|
|
{ value: 'faithful', label: 'Filing-faithful' }
|
|
];
|
|
|
|
const CHART_MUTED = '#b4ced9';
|
|
const CHART_GRID = 'rgba(126, 217, 255, 0.24)';
|
|
const CHART_TOOLTIP_BG = 'rgba(6, 17, 24, 0.95)';
|
|
const CHART_TOOLTIP_BORDER = 'rgba(123, 255, 217, 0.45)';
|
|
|
|
function formatLongDate(value: string) {
|
|
const parsed = new Date(value);
|
|
if (Number.isNaN(parsed.getTime())) {
|
|
return 'Unknown';
|
|
}
|
|
|
|
return format(parsed, 'MMM dd, yyyy');
|
|
}
|
|
|
|
function formatShortDate(value: string) {
|
|
const parsed = new Date(value);
|
|
if (Number.isNaN(parsed.getTime())) {
|
|
return 'Unknown';
|
|
}
|
|
|
|
return format(parsed, 'MMM yyyy');
|
|
}
|
|
|
|
function asDisplayCurrency(value: number | null, scale: NumberScaleUnit) {
|
|
return value === null ? 'n/a' : formatCurrencyByScale(value, scale);
|
|
}
|
|
|
|
function asAxisCurrencyTick(value: number, scale: NumberScaleUnit) {
|
|
return formatCurrencyByScale(value, scale, { maximumFractionDigits: 1 });
|
|
}
|
|
|
|
function asTooltipCurrency(value: unknown, scale: NumberScaleUnit) {
|
|
const numeric = Number(value);
|
|
if (!Number.isFinite(numeric)) {
|
|
return 'n/a';
|
|
}
|
|
|
|
return formatCurrencyByScale(numeric, scale);
|
|
}
|
|
|
|
function ratioPercent(numerator: number | null, denominator: number | null) {
|
|
if (numerator === null || denominator === null || denominator === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (numerator / denominator) * 100;
|
|
}
|
|
|
|
function rowValue(row: { values: Record<string, number | null> }, periodId: string) {
|
|
return periodId in row.values ? row.values[periodId] : null;
|
|
}
|
|
|
|
function isFaithfulRow(row: DisplayRow): row is TaxonomyStatementRow {
|
|
return 'localName' in row;
|
|
}
|
|
|
|
function isStandardizedRow(row: DisplayRow): row is StandardizedStatementRow {
|
|
return 'sourceRowKeys' in row;
|
|
}
|
|
|
|
function mergeSurfaceRows<T extends { key: string; values: Record<string, number | null>; hasDimensions: boolean }>(
|
|
rows: T[],
|
|
mergeRow: (existing: T, row: T) => void
|
|
) {
|
|
const rowMap = new Map<string, T>();
|
|
|
|
for (const row of rows) {
|
|
const existing = rowMap.get(row.key);
|
|
if (!existing) {
|
|
rowMap.set(row.key, structuredClone(row));
|
|
continue;
|
|
}
|
|
|
|
mergeRow(existing, row);
|
|
}
|
|
|
|
return [...rowMap.values()];
|
|
}
|
|
|
|
function mergeFinancialPages(
|
|
base: CompanyFinancialStatementsResponse | null,
|
|
next: CompanyFinancialStatementsResponse
|
|
) {
|
|
if (!base) {
|
|
return next;
|
|
}
|
|
|
|
const periods = [...base.periods, ...next.periods]
|
|
.filter((period, index, list) => list.findIndex((item) => item.id === period.id) === index)
|
|
.sort((a, b) => Date.parse(a.filingDate) - Date.parse(b.filingDate));
|
|
|
|
const faithfulRows = mergeSurfaceRows(
|
|
[...base.surfaces.faithful.rows, ...next.surfaces.faithful.rows],
|
|
(existing, row) => {
|
|
existing.hasDimensions = existing.hasDimensions || row.hasDimensions;
|
|
existing.order = Math.min(existing.order, row.order);
|
|
existing.depth = Math.min(existing.depth, row.depth);
|
|
if (!existing.parentKey && row.parentKey) {
|
|
existing.parentKey = row.parentKey;
|
|
}
|
|
|
|
for (const [periodId, value] of Object.entries(row.values)) {
|
|
if (!(periodId in existing.values)) {
|
|
existing.values[periodId] = value;
|
|
}
|
|
}
|
|
|
|
for (const [periodId, unit] of Object.entries(row.units)) {
|
|
if (!(periodId in existing.units)) {
|
|
existing.units[periodId] = unit;
|
|
}
|
|
}
|
|
|
|
for (const factId of row.sourceFactIds) {
|
|
if (!existing.sourceFactIds.includes(factId)) {
|
|
existing.sourceFactIds.push(factId);
|
|
}
|
|
}
|
|
}
|
|
).sort((left, right) => {
|
|
if (left.order !== right.order) {
|
|
return left.order - right.order;
|
|
}
|
|
|
|
return left.label.localeCompare(right.label);
|
|
});
|
|
|
|
const standardizedRows = mergeSurfaceRows(
|
|
[...base.surfaces.standardized.rows, ...next.surfaces.standardized.rows],
|
|
(existing, row) => {
|
|
existing.hasDimensions = existing.hasDimensions || row.hasDimensions;
|
|
existing.order = Math.min(existing.order, row.order);
|
|
|
|
for (const [periodId, value] of Object.entries(row.values)) {
|
|
if (!(periodId in existing.values)) {
|
|
existing.values[periodId] = value;
|
|
}
|
|
}
|
|
|
|
for (const [periodId, sourceRowKey] of Object.entries(row.resolvedSourceRowKeys)) {
|
|
if (!(periodId in existing.resolvedSourceRowKeys)) {
|
|
existing.resolvedSourceRowKeys[periodId] = sourceRowKey;
|
|
}
|
|
}
|
|
|
|
for (const concept of row.sourceConcepts) {
|
|
if (!existing.sourceConcepts.includes(concept)) {
|
|
existing.sourceConcepts.push(concept);
|
|
}
|
|
}
|
|
|
|
for (const rowKey of row.sourceRowKeys) {
|
|
if (!existing.sourceRowKeys.includes(rowKey)) {
|
|
existing.sourceRowKeys.push(rowKey);
|
|
}
|
|
}
|
|
|
|
for (const factId of row.sourceFactIds) {
|
|
if (!existing.sourceFactIds.includes(factId)) {
|
|
existing.sourceFactIds.push(factId);
|
|
}
|
|
}
|
|
}
|
|
).sort((left, right) => {
|
|
if (left.order !== right.order) {
|
|
return left.order - right.order;
|
|
}
|
|
|
|
return left.label.localeCompare(right.label);
|
|
});
|
|
|
|
const dimensionBreakdown = (() => {
|
|
if (!base.dimensionBreakdown && !next.dimensionBreakdown) {
|
|
return null;
|
|
}
|
|
|
|
const map = new Map<string, DimensionBreakdownRow[]>();
|
|
for (const source of [base.dimensionBreakdown, next.dimensionBreakdown]) {
|
|
if (!source) {
|
|
continue;
|
|
}
|
|
|
|
for (const [key, rows] of Object.entries(source)) {
|
|
const existing = map.get(key);
|
|
if (existing) {
|
|
existing.push(...rows);
|
|
} else {
|
|
map.set(key, [...rows]);
|
|
}
|
|
}
|
|
}
|
|
|
|
return Object.fromEntries(map.entries());
|
|
})();
|
|
|
|
return {
|
|
...next,
|
|
periods,
|
|
surfaces: {
|
|
faithful: {
|
|
kind: 'faithful' as const,
|
|
rows: faithfulRows
|
|
},
|
|
standardized: {
|
|
kind: 'standardized' as const,
|
|
rows: standardizedRows
|
|
}
|
|
},
|
|
nextCursor: next.nextCursor,
|
|
coverage: {
|
|
...next.coverage,
|
|
filings: periods.length,
|
|
rows: faithfulRows.length
|
|
},
|
|
dataSourceStatus: {
|
|
...next.dataSourceStatus,
|
|
queuedSync: base.dataSourceStatus.queuedSync || next.dataSourceStatus.queuedSync
|
|
},
|
|
dimensionBreakdown
|
|
};
|
|
}
|
|
|
|
function findFaithfulRowByLocalNames(rows: TaxonomyStatementRow[], localNames: string[]) {
|
|
const normalizedNames = localNames.map((name) => name.toLowerCase());
|
|
const exact = rows.find((row) => normalizedNames.includes(row.localName.toLowerCase()));
|
|
if (exact) {
|
|
return exact;
|
|
}
|
|
|
|
return rows.find((row) => {
|
|
const haystack = `${row.key} ${row.label} ${row.localName} ${row.qname}`.toLowerCase();
|
|
return normalizedNames.some((name) => haystack.includes(name));
|
|
}) ?? null;
|
|
}
|
|
|
|
function findStandardizedRow(rows: StandardizedStatementRow[], key: string) {
|
|
return rows.find((row) => row.key === key) ?? null;
|
|
}
|
|
|
|
function buildOverviewSeries(
|
|
incomeData: CompanyFinancialStatementsResponse | null,
|
|
balanceData: CompanyFinancialStatementsResponse | null
|
|
): OverviewPoint[] {
|
|
const periodMap = new Map<string, { filingDate: string; periodEnd: string | null }>();
|
|
|
|
for (const source of [incomeData, balanceData]) {
|
|
for (const period of source?.periods ?? []) {
|
|
periodMap.set(period.id, {
|
|
filingDate: period.filingDate,
|
|
periodEnd: period.periodEnd
|
|
});
|
|
}
|
|
}
|
|
|
|
const periods = [...periodMap.entries()]
|
|
.map(([periodId, data]) => ({
|
|
periodId,
|
|
filingDate: data.filingDate,
|
|
periodEnd: data.periodEnd
|
|
}))
|
|
.sort((a, b) => Date.parse(a.periodEnd ?? a.filingDate) - Date.parse(b.periodEnd ?? b.filingDate));
|
|
|
|
const incomeStandardized = incomeData?.surfaces.standardized.rows ?? [];
|
|
const balanceStandardized = balanceData?.surfaces.standardized.rows ?? [];
|
|
const incomeFaithful = incomeData?.surfaces.faithful.rows ?? [];
|
|
const balanceFaithful = balanceData?.surfaces.faithful.rows ?? [];
|
|
|
|
const revenueRow = findStandardizedRow(incomeStandardized, 'revenue')
|
|
?? findFaithfulRowByLocalNames(incomeFaithful, ['RevenueFromContractWithCustomerExcludingAssessedTax', 'Revenues', 'SalesRevenueNet', 'Revenue']);
|
|
const netIncomeRow = findStandardizedRow(incomeStandardized, 'net-income')
|
|
?? findFaithfulRowByLocalNames(incomeFaithful, ['NetIncomeLoss', 'ProfitLoss']);
|
|
const assetsRow = findStandardizedRow(balanceStandardized, 'total-assets')
|
|
?? findFaithfulRowByLocalNames(balanceFaithful, ['Assets']);
|
|
const cashRow = findStandardizedRow(balanceStandardized, 'cash-and-equivalents')
|
|
?? findFaithfulRowByLocalNames(balanceFaithful, ['CashAndCashEquivalentsAtCarryingValue', 'CashAndShortTermInvestments', 'Cash']);
|
|
const debtRow = findStandardizedRow(balanceStandardized, 'total-debt')
|
|
?? findFaithfulRowByLocalNames(balanceFaithful, ['LongTermDebt', 'Debt', 'LongTermDebtNoncurrent']);
|
|
|
|
return periods.map((period) => ({
|
|
periodId: period.periodId,
|
|
filingDate: period.filingDate,
|
|
periodEnd: period.periodEnd,
|
|
label: formatShortDate(period.periodEnd ?? period.filingDate),
|
|
revenue: revenueRow ? rowValue(revenueRow, period.periodId) : null,
|
|
netIncome: netIncomeRow ? rowValue(netIncomeRow, period.periodId) : null,
|
|
totalAssets: assetsRow ? rowValue(assetsRow, period.periodId) : null,
|
|
cash: cashRow ? rowValue(cashRow, period.periodId) : null,
|
|
debt: debtRow ? rowValue(debtRow, period.periodId) : null
|
|
}));
|
|
}
|
|
|
|
function groupDimensionRows(
|
|
rows: DimensionBreakdownRow[],
|
|
surface: FinancialStatementSurfaceKind
|
|
) {
|
|
if (surface === 'faithful') {
|
|
return rows;
|
|
}
|
|
|
|
return [...rows].sort((left, right) => {
|
|
if (left.periodId !== right.periodId) {
|
|
return left.periodId.localeCompare(right.periodId);
|
|
}
|
|
|
|
return `${left.sourceLabel ?? ''}${left.concept ?? ''}`.localeCompare(`${right.sourceLabel ?? ''}${right.concept ?? ''}`);
|
|
});
|
|
}
|
|
|
|
function ChartFrame({ children }: { children: React.ReactNode }) {
|
|
const containerRef = useRef<HTMLDivElement | null>(null);
|
|
const [ready, setReady] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const element = containerRef.current;
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
const observer = new ResizeObserver((entries) => {
|
|
const next = entries[0];
|
|
if (!next) {
|
|
return;
|
|
}
|
|
|
|
const { width, height } = next.contentRect;
|
|
setReady(width > 0 && height > 0);
|
|
});
|
|
|
|
observer.observe(element);
|
|
return () => observer.disconnect();
|
|
}, []);
|
|
|
|
return (
|
|
<div ref={containerRef} className="h-[320px]">
|
|
{ready ? children : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function FinancialsPage() {
|
|
return (
|
|
<Suspense fallback={<div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">Loading financial terminal...</div>}>
|
|
<FinancialsPageContent />
|
|
</Suspense>
|
|
);
|
|
}
|
|
|
|
function FinancialsPageContent() {
|
|
const { isPending, isAuthenticated } = useAuthGuard();
|
|
const searchParams = useSearchParams();
|
|
const queryClient = useQueryClient();
|
|
const { prefetchResearchTicker } = useLinkPrefetch();
|
|
|
|
const [tickerInput, setTickerInput] = useState('MSFT');
|
|
const [ticker, setTicker] = useState('MSFT');
|
|
const [statement, setStatement] = useState<FinancialStatementKind>('income');
|
|
const [window, setWindow] = useState<FinancialHistoryWindow>('10y');
|
|
const [surface, setSurface] = useState<FinancialStatementSurfaceKind>('standardized');
|
|
const [valueScale, setValueScale] = useState<NumberScaleUnit>('millions');
|
|
const [financials, setFinancials] = useState<CompanyFinancialStatementsResponse | null>(null);
|
|
const [overviewIncome, setOverviewIncome] = useState<CompanyFinancialStatementsResponse | null>(null);
|
|
const [overviewBalance, setOverviewBalance] = useState<CompanyFinancialStatementsResponse | null>(null);
|
|
const [selectedRowKey, setSelectedRowKey] = useState<string | null>(null);
|
|
const [dimensionsEnabled, setDimensionsEnabled] = useState(false);
|
|
const [loading, setLoading] = useState(true);
|
|
const [loadingMore, setLoadingMore] = useState(false);
|
|
const [syncingFinancials, setSyncingFinancials] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
const fromQuery = searchParams.get('ticker');
|
|
if (!fromQuery) {
|
|
return;
|
|
}
|
|
|
|
const normalized = fromQuery.trim().toUpperCase();
|
|
if (!normalized) {
|
|
return;
|
|
}
|
|
|
|
setTickerInput(normalized);
|
|
setTicker(normalized);
|
|
}, [searchParams]);
|
|
|
|
const loadOverview = useCallback(async (symbol: string, selectedWindow: FinancialHistoryWindow) => {
|
|
const [incomeResponse, balanceResponse] = await Promise.all([
|
|
queryClient.ensureQueryData(companyFinancialStatementsQueryOptions({
|
|
ticker: symbol,
|
|
statement: 'income',
|
|
window: selectedWindow,
|
|
includeDimensions: false,
|
|
includeFacts: false,
|
|
limit: selectedWindow === 'all' ? 120 : 80
|
|
})),
|
|
queryClient.ensureQueryData(companyFinancialStatementsQueryOptions({
|
|
ticker: symbol,
|
|
statement: 'balance',
|
|
window: selectedWindow,
|
|
includeDimensions: false,
|
|
includeFacts: false,
|
|
limit: selectedWindow === 'all' ? 120 : 80
|
|
}))
|
|
]);
|
|
|
|
setOverviewIncome(incomeResponse.financials);
|
|
setOverviewBalance(balanceResponse.financials);
|
|
}, [queryClient]);
|
|
|
|
const loadFinancials = useCallback(async (symbol: string, options?: LoadOptions) => {
|
|
const normalizedTicker = symbol.trim().toUpperCase();
|
|
const nextCursor = options?.cursor ?? null;
|
|
const includeDimensions = dimensionsEnabled || selectedRowKey !== null;
|
|
|
|
if (!options?.append) {
|
|
setLoading(true);
|
|
} else {
|
|
setLoadingMore(true);
|
|
}
|
|
|
|
setError(null);
|
|
|
|
try {
|
|
const response = await queryClient.ensureQueryData(companyFinancialStatementsQueryOptions({
|
|
ticker: normalizedTicker,
|
|
statement,
|
|
window,
|
|
includeDimensions,
|
|
includeFacts: false,
|
|
cursor: nextCursor,
|
|
limit: window === 'all' ? 60 : 80
|
|
}));
|
|
|
|
setFinancials((current) => {
|
|
if (options?.append) {
|
|
return mergeFinancialPages(current, response.financials);
|
|
}
|
|
|
|
return response.financials;
|
|
});
|
|
|
|
await loadOverview(normalizedTicker, window);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Unable to load financial history');
|
|
if (!options?.append) {
|
|
setFinancials(null);
|
|
}
|
|
} finally {
|
|
setLoading(false);
|
|
setLoadingMore(false);
|
|
}
|
|
}, [
|
|
dimensionsEnabled,
|
|
loadOverview,
|
|
queryClient,
|
|
selectedRowKey,
|
|
statement,
|
|
window
|
|
]);
|
|
|
|
const syncFinancials = useCallback(async () => {
|
|
const targetTicker = (financials?.company.ticker ?? ticker).trim().toUpperCase();
|
|
if (!targetTicker) {
|
|
return;
|
|
}
|
|
|
|
setSyncingFinancials(true);
|
|
setError(null);
|
|
|
|
try {
|
|
await queueFilingSync({ ticker: targetTicker, limit: 20 });
|
|
void queryClient.invalidateQueries({ queryKey: queryKeys.recentTasks(20) });
|
|
void queryClient.invalidateQueries({ queryKey: ['filings'] });
|
|
void queryClient.invalidateQueries({ queryKey: ['financials-v3'] });
|
|
await loadFinancials(targetTicker);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : `Failed to queue financial sync for ${targetTicker}`);
|
|
} finally {
|
|
setSyncingFinancials(false);
|
|
}
|
|
}, [financials?.company.ticker, loadFinancials, queryClient, ticker]);
|
|
|
|
useEffect(() => {
|
|
if (!isPending && isAuthenticated) {
|
|
void loadFinancials(ticker);
|
|
}
|
|
}, [isPending, isAuthenticated, loadFinancials, ticker]);
|
|
|
|
const periods = useMemo(() => {
|
|
return [...(financials?.periods ?? [])]
|
|
.sort((a, b) => Date.parse(a.filingDate) - Date.parse(b.filingDate));
|
|
}, [financials?.periods]);
|
|
|
|
const faithfulRows = useMemo(() => financials?.surfaces.faithful.rows ?? [], [financials?.surfaces.faithful.rows]);
|
|
const standardizedRows = useMemo(() => financials?.surfaces.standardized.rows ?? [], [financials?.surfaces.standardized.rows]);
|
|
const statementRows = useMemo<DisplayRow[]>(() => {
|
|
return surface === 'standardized' ? standardizedRows : faithfulRows;
|
|
}, [faithfulRows, standardizedRows, surface]);
|
|
|
|
const overviewSeries = useMemo(() => {
|
|
return buildOverviewSeries(overviewIncome, overviewBalance);
|
|
}, [overviewIncome, overviewBalance]);
|
|
|
|
const latestOverview = overviewSeries[overviewSeries.length - 1] ?? null;
|
|
const latestTaxonomyMetrics = financials?.metrics.taxonomy
|
|
?? overviewIncome?.metrics.taxonomy
|
|
?? overviewBalance?.metrics.taxonomy
|
|
?? null;
|
|
|
|
const latestStandardizedIncome = overviewIncome?.surfaces.standardized.rows ?? [];
|
|
const latestStandardizedBalance = overviewBalance?.surfaces.standardized.rows ?? [];
|
|
const latestRevenue = latestOverview?.revenue
|
|
?? findStandardizedRow(latestStandardizedIncome, 'revenue')?.values[periods[periods.length - 1]?.id ?? '']
|
|
?? latestTaxonomyMetrics?.revenue
|
|
?? null;
|
|
const latestNetIncome = latestOverview?.netIncome
|
|
?? findStandardizedRow(latestStandardizedIncome, 'net-income')?.values[periods[periods.length - 1]?.id ?? '']
|
|
?? latestTaxonomyMetrics?.netIncome
|
|
?? null;
|
|
const latestTotalAssets = latestOverview?.totalAssets
|
|
?? findStandardizedRow(latestStandardizedBalance, 'total-assets')?.values[periods[periods.length - 1]?.id ?? '']
|
|
?? latestTaxonomyMetrics?.totalAssets
|
|
?? null;
|
|
const latestCash = latestOverview?.cash
|
|
?? findStandardizedRow(latestStandardizedBalance, 'cash-and-equivalents')?.values[periods[periods.length - 1]?.id ?? '']
|
|
?? latestTaxonomyMetrics?.cash
|
|
?? null;
|
|
const latestDebt = latestOverview?.debt
|
|
?? findStandardizedRow(latestStandardizedBalance, 'total-debt')?.values[periods[periods.length - 1]?.id ?? '']
|
|
?? latestTaxonomyMetrics?.debt
|
|
?? null;
|
|
const latestReferenceDate = latestOverview?.filingDate ?? periods[periods.length - 1]?.filingDate ?? null;
|
|
|
|
const selectedRow = useMemo(() => {
|
|
if (!selectedRowKey) {
|
|
return null;
|
|
}
|
|
|
|
return statementRows.find((row) => row.key === selectedRowKey) ?? null;
|
|
}, [selectedRowKey, statementRows]);
|
|
|
|
const dimensionRows = useMemo(() => {
|
|
if (!selectedRow || !financials?.dimensionBreakdown) {
|
|
return [];
|
|
}
|
|
|
|
const direct = financials.dimensionBreakdown[selectedRow.key] ?? [];
|
|
return groupDimensionRows(direct, surface);
|
|
}, [financials?.dimensionBreakdown, selectedRow, surface]);
|
|
|
|
const selectedScaleLabel = useMemo(() => {
|
|
return FINANCIAL_VALUE_SCALE_OPTIONS.find((option) => option.value === valueScale)?.label ?? 'Millions (M)';
|
|
}, [valueScale]);
|
|
|
|
const controlSections = useMemo<FinancialControlSection[]>(() => [
|
|
{
|
|
id: 'statement',
|
|
label: 'Statement',
|
|
value: statement,
|
|
options: STATEMENT_OPTIONS,
|
|
onChange: (nextValue) => {
|
|
setStatement(nextValue as FinancialStatementKind);
|
|
setSelectedRowKey(null);
|
|
}
|
|
},
|
|
{
|
|
id: 'history',
|
|
label: 'Window',
|
|
value: window,
|
|
options: WINDOW_OPTIONS,
|
|
onChange: (nextValue) => {
|
|
setWindow(nextValue as FinancialHistoryWindow);
|
|
setSelectedRowKey(null);
|
|
}
|
|
},
|
|
{
|
|
id: 'scale',
|
|
label: 'Scale',
|
|
value: valueScale,
|
|
options: FINANCIAL_VALUE_SCALE_OPTIONS,
|
|
onChange: (nextValue) => setValueScale(nextValue as NumberScaleUnit)
|
|
}
|
|
], [statement, valueScale, window]);
|
|
|
|
const controlActions = useMemo<FinancialControlAction[]>(() => {
|
|
const actions: FinancialControlAction[] = [];
|
|
|
|
if (window === '10y') {
|
|
actions.push({
|
|
id: 'load-full-history',
|
|
label: 'Load Full History',
|
|
variant: 'secondary',
|
|
onClick: () => {
|
|
setWindow('all');
|
|
setSelectedRowKey(null);
|
|
}
|
|
});
|
|
}
|
|
|
|
if (window === 'all' && financials?.nextCursor) {
|
|
actions.push({
|
|
id: 'load-older-periods',
|
|
label: loadingMore ? 'Loading Older...' : 'Load Older Periods',
|
|
variant: 'secondary',
|
|
disabled: loadingMore,
|
|
onClick: () => {
|
|
if (!financials.nextCursor) {
|
|
return;
|
|
}
|
|
|
|
void loadFinancials(ticker, {
|
|
cursor: financials.nextCursor,
|
|
append: true
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
return actions;
|
|
}, [financials?.nextCursor, loadFinancials, loadingMore, ticker, window]);
|
|
|
|
if (isPending || !isAuthenticated) {
|
|
return <div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">Loading financial terminal...</div>;
|
|
}
|
|
|
|
return (
|
|
<AppShell
|
|
title="Financials"
|
|
subtitle="Filing-faithful financial statements with a standardized comparison surface and PDF metric validation."
|
|
activeTicker={financials?.company.ticker ?? ticker}
|
|
actions={(
|
|
<div className="flex w-full flex-wrap items-center justify-end gap-2 sm:w-auto">
|
|
<Button
|
|
variant="secondary"
|
|
disabled={syncingFinancials}
|
|
onClick={() => {
|
|
void syncFinancials();
|
|
}}
|
|
>
|
|
<Download className="size-4" />
|
|
{syncingFinancials ? 'Syncing...' : 'Sync Financials'}
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => {
|
|
void loadFinancials(ticker);
|
|
}}
|
|
>
|
|
<RefreshCcw className="size-4" />
|
|
Refresh
|
|
</Button>
|
|
</div>
|
|
)}
|
|
>
|
|
<Panel title="Company Selector" subtitle="Load statement history by ticker. The standardized comparison view is the default surface.">
|
|
<form
|
|
className="flex flex-wrap items-center gap-3"
|
|
onSubmit={(event) => {
|
|
event.preventDefault();
|
|
const normalized = tickerInput.trim().toUpperCase();
|
|
if (!normalized) {
|
|
return;
|
|
}
|
|
setTicker(normalized);
|
|
}}
|
|
>
|
|
<Input
|
|
value={tickerInput}
|
|
onChange={(event) => setTickerInput(event.target.value.toUpperCase())}
|
|
placeholder="Ticker (AAPL)"
|
|
className="max-w-xs"
|
|
/>
|
|
<Button type="submit">
|
|
<Search className="size-4" />
|
|
Load Financials
|
|
</Button>
|
|
{financials ? (
|
|
<Link
|
|
href={`/analysis?ticker=${financials.company.ticker}`}
|
|
onMouseEnter={() => prefetchResearchTicker(financials.company.ticker)}
|
|
onFocus={() => prefetchResearchTicker(financials.company.ticker)}
|
|
className="text-sm text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]"
|
|
>
|
|
Open analysis
|
|
</Link>
|
|
) : null}
|
|
</form>
|
|
</Panel>
|
|
|
|
{error ? (
|
|
<Panel>
|
|
<p className="text-sm text-[#ffb5b5]">{error}</p>
|
|
</Panel>
|
|
) : null}
|
|
|
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
|
|
<MetricCard
|
|
label="Latest Revenue"
|
|
value={asDisplayCurrency(latestRevenue, valueScale)}
|
|
delta={latestReferenceDate ? formatLongDate(latestReferenceDate) : 'No history'}
|
|
/>
|
|
<MetricCard
|
|
label="Latest Net Income"
|
|
value={asDisplayCurrency(latestNetIncome, valueScale)}
|
|
delta={latestReferenceDate ? `Net margin ${formatPercent(ratioPercent(latestNetIncome, latestRevenue) ?? 0)}` : 'No history'}
|
|
positive={(latestNetIncome ?? 0) >= 0}
|
|
/>
|
|
<MetricCard
|
|
label="Latest Total Assets"
|
|
value={asDisplayCurrency(latestTotalAssets, valueScale)}
|
|
delta={latestReferenceDate ? `Debt ${asDisplayCurrency(latestDebt, valueScale)}` : 'No history'}
|
|
/>
|
|
<MetricCard
|
|
label="Cash / Debt"
|
|
value={latestCash !== null && latestDebt !== null && latestDebt !== 0
|
|
? `${(latestCash / latestDebt).toFixed(2)}x`
|
|
: 'n/a'}
|
|
delta={latestReferenceDate ? `Cash ${asDisplayCurrency(latestCash, valueScale)}` : 'No history'}
|
|
/>
|
|
</div>
|
|
|
|
<FinancialControlBar
|
|
title="Financial Controls"
|
|
subtitle={`Current display scale: ${selectedScaleLabel}. Choose between standardized comparison and filing-faithful rendering below.`}
|
|
sections={controlSections}
|
|
actions={controlActions}
|
|
/>
|
|
|
|
<Panel title="Statement Surface" subtitle="Standardized rows flatten curated GAAP aliases for comparison while the faithful view preserves the filing's presentation.">
|
|
<div className="flex flex-wrap gap-2">
|
|
{SURFACE_OPTIONS.map((option) => (
|
|
<Button
|
|
key={option.value}
|
|
variant={surface === option.value ? 'primary' : 'ghost'}
|
|
onClick={() => {
|
|
setSurface(option.value);
|
|
setSelectedRowKey(null);
|
|
}}
|
|
>
|
|
{option.value === 'standardized' ? <GitCompareArrows className="size-4" /> : <ChartNoAxesCombined className="size-4" />}
|
|
{option.label}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</Panel>
|
|
|
|
<div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
|
|
<Panel title="Income Trend" subtitle="Overview chart sourced from standardized statement rows first, then taxonomy metrics as fallback.">
|
|
{loading ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">Loading overview chart...</p>
|
|
) : overviewSeries.length === 0 ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">No income history available yet.</p>
|
|
) : (
|
|
<ChartFrame>
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart data={overviewSeries}>
|
|
<CartesianGrid strokeDasharray="2 2" stroke={CHART_GRID} />
|
|
<XAxis dataKey="label" stroke={CHART_MUTED} fontSize={12} minTickGap={20} />
|
|
<YAxis stroke={CHART_MUTED} fontSize={12} tickFormatter={(value: number) => asAxisCurrencyTick(value, valueScale)} />
|
|
<Tooltip
|
|
formatter={(value) => asTooltipCurrency(value, valueScale)}
|
|
contentStyle={{
|
|
backgroundColor: CHART_TOOLTIP_BG,
|
|
border: `1px solid ${CHART_TOOLTIP_BORDER}`,
|
|
borderRadius: '0.75rem'
|
|
}}
|
|
/>
|
|
<Bar dataKey="revenue" name="Revenue" fill="#68ffd5" radius={[4, 4, 0, 0]} />
|
|
<Bar dataKey="netIncome" name="Net Income" fill="#5fd3ff" radius={[4, 4, 0, 0]} />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</ChartFrame>
|
|
)}
|
|
</Panel>
|
|
|
|
<Panel title="Balance Trend" subtitle="Assets, cash, and debt sourced from standardized balance rows for cleaner period-over-period comparison.">
|
|
{loading ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">Loading balance chart...</p>
|
|
) : overviewSeries.length === 0 ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">No balance history available yet.</p>
|
|
) : (
|
|
<ChartFrame>
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<AreaChart data={overviewSeries}>
|
|
<CartesianGrid strokeDasharray="2 2" stroke={CHART_GRID} />
|
|
<XAxis dataKey="label" stroke={CHART_MUTED} fontSize={12} minTickGap={20} />
|
|
<YAxis stroke={CHART_MUTED} fontSize={12} tickFormatter={(value: number) => asAxisCurrencyTick(value, valueScale)} />
|
|
<Tooltip
|
|
formatter={(value) => asTooltipCurrency(value, valueScale)}
|
|
contentStyle={{
|
|
backgroundColor: CHART_TOOLTIP_BG,
|
|
border: `1px solid ${CHART_TOOLTIP_BORDER}`,
|
|
borderRadius: '0.75rem'
|
|
}}
|
|
/>
|
|
<Area type="monotone" dataKey="totalAssets" name="Total Assets" stroke="#68ffd5" fill="rgba(104,255,213,0.18)" strokeWidth={2} />
|
|
<Line type="monotone" dataKey="cash" name="Cash" stroke="#8bd3ff" strokeWidth={2} dot={false} />
|
|
<Line type="monotone" dataKey="debt" name="Debt" stroke="#ffd08a" strokeWidth={2} dot={false} />
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</ChartFrame>
|
|
)}
|
|
</Panel>
|
|
</div>
|
|
|
|
<Panel
|
|
title="Statement Matrix"
|
|
subtitle={surface === 'standardized'
|
|
? `Standardized ${statement.replace('_', ' ')} rows merge curated GAAP aliases for comparison while preserving source provenance.`
|
|
: `Filing-faithful ${statement.replace('_', ' ')} rows preserve issuer taxonomy, ordering, extensions, and dimensional detail.`}
|
|
>
|
|
{loading ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">Loading statement matrix...</p>
|
|
) : periods.length === 0 || statementRows.length === 0 ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">No statement rows available for the selected filters yet.</p>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<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.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>
|
|
{statementRows.map((row) => (
|
|
<tr
|
|
key={row.key}
|
|
className={selectedRowKey === row.key ? 'bg-[color:var(--panel-soft)]' : undefined}
|
|
onClick={() => {
|
|
setSelectedRowKey(row.key);
|
|
if (row.hasDimensions && !dimensionsEnabled) {
|
|
setDimensionsEnabled(true);
|
|
}
|
|
}}
|
|
>
|
|
<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: `${isFaithfulRow(row) ? Math.min(row.depth, 10) * 12 : 0}px` }}>{row.label}</span>
|
|
{isFaithfulRow(row) && row.isExtension ? (
|
|
<span className="rounded border border-[color:var(--line-weak)] px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-[color:var(--terminal-muted)]">Ext</span>
|
|
) : null}
|
|
{row.hasDimensions ? <ChevronDown className="size-3 text-[color:var(--accent)]" /> : null}
|
|
</div>
|
|
{isStandardizedRow(row) ? (
|
|
<details className="text-xs text-[color:var(--terminal-muted)]">
|
|
<summary className="cursor-pointer list-none">
|
|
Mapped from {row.sourceConcepts.length} concept{row.sourceConcepts.length === 1 ? '' : 's'}
|
|
</summary>
|
|
<div className="mt-1 flex flex-wrap gap-1">
|
|
{row.sourceConcepts.map((concept) => (
|
|
<span key={`${row.key}-${concept}`} className="rounded border border-[color:var(--line-weak)] px-1.5 py-0.5">
|
|
{concept}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</details>
|
|
) : null}
|
|
</div>
|
|
</td>
|
|
{periods.map((period) => (
|
|
<td key={`${row.key}-${period.id}`}>
|
|
{asDisplayCurrency(rowValue(row, period.id), valueScale)}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</Panel>
|
|
|
|
<Panel
|
|
title="Dimension Drill-down"
|
|
subtitle={surface === 'standardized'
|
|
? 'Standardized rows aggregate dimensional facts across every mapped source concept.'
|
|
: 'Filing-faithful rows show the exact dimensional facts attached to the selected concept.'}
|
|
>
|
|
{!selectedRow ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">Select a statement row to inspect dimensional facts.</p>
|
|
) : !selectedRow.hasDimensions ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">No dimensional data is available for {selectedRow.label}.</p>
|
|
) : !dimensionsEnabled ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">Enable dimensions by selecting the row again.</p>
|
|
) : dimensionRows.length === 0 ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">Dimensions are still loading or unavailable for this row.</p>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="data-table min-w-[860px]">
|
|
<thead>
|
|
<tr>
|
|
<th>Period</th>
|
|
{surface === 'standardized' ? <th>Source</th> : null}
|
|
<th>Axis</th>
|
|
<th>Member</th>
|
|
<th>Value</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{dimensionRows.map((row, index) => {
|
|
const period = periods.find((item) => item.id === row.periodId);
|
|
return (
|
|
<tr key={`${row.rowKey}-${row.periodId}-${row.axis}-${row.member}-${index}`}>
|
|
<td>{period ? formatLongDate(period.filingDate) : row.periodId}</td>
|
|
{surface === 'standardized' ? <td>{row.sourceLabel ?? row.concept ?? 'Unknown source'}</td> : null}
|
|
<td>{row.axis}</td>
|
|
<td>{row.member}</td>
|
|
<td>{asDisplayCurrency(row.value, valueScale)}</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</Panel>
|
|
|
|
{financials ? (
|
|
<Panel title="Metric Validation" subtitle="The standardized taxonomy surface is the canonical financial layer; PDF LLM extraction is used only to validate selected metrics.">
|
|
<div className="mb-3 flex items-center gap-2 text-sm text-[color:var(--terminal-muted)]">
|
|
<AlertTriangle className="size-4" />
|
|
<span>Overall status: {financials.metrics.validation?.status ?? 'not_run'}</span>
|
|
</div>
|
|
{(financials.metrics.validation?.checks.length ?? 0) === 0 ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">No validation checks available yet.</p>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="data-table min-w-[760px]">
|
|
<thead>
|
|
<tr>
|
|
<th>Metric</th>
|
|
<th>Taxonomy</th>
|
|
<th>LLM (PDF)</th>
|
|
<th>Status</th>
|
|
<th>Pages</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{financials.metrics.validation?.checks.map((check) => (
|
|
<tr key={check.metricKey}>
|
|
<td>{check.metricKey}</td>
|
|
<td>{asDisplayCurrency(check.taxonomyValue, valueScale)}</td>
|
|
<td>{asDisplayCurrency(check.llmValue, valueScale)}</td>
|
|
<td>{check.status}</td>
|
|
<td>{check.evidencePages.join(', ') || 'n/a'}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</Panel>
|
|
) : null}
|
|
|
|
{financials ? (
|
|
<Panel title="Data Source Status" subtitle="Hydration and taxonomy parsing status for filing snapshots powering both financial statement surfaces.">
|
|
<div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-5">
|
|
<div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 text-sm">
|
|
<p className="text-[color:var(--terminal-muted)]">Hydrated</p>
|
|
<p className="font-semibold text-[color:var(--terminal-bright)]">{financials.dataSourceStatus.hydratedFilings}</p>
|
|
</div>
|
|
<div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 text-sm">
|
|
<p className="text-[color:var(--terminal-muted)]">Partial</p>
|
|
<p className="font-semibold text-[color:var(--terminal-bright)]">{financials.dataSourceStatus.partialFilings}</p>
|
|
</div>
|
|
<div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 text-sm">
|
|
<p className="text-[color:var(--terminal-muted)]">Failed</p>
|
|
<p className="font-semibold text-[color:var(--terminal-bright)]">{financials.dataSourceStatus.failedFilings}</p>
|
|
</div>
|
|
<div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 text-sm">
|
|
<p className="text-[color:var(--terminal-muted)]">Pending</p>
|
|
<p className="font-semibold text-[color:var(--terminal-bright)]">{financials.dataSourceStatus.pendingFilings}</p>
|
|
</div>
|
|
<div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 text-sm">
|
|
<p className="text-[color:var(--terminal-muted)]">Background Sync</p>
|
|
<p className="font-semibold text-[color:var(--terminal-bright)]">{financials.dataSourceStatus.queuedSync ? 'Queued' : 'Idle'}</p>
|
|
</div>
|
|
</div>
|
|
</Panel>
|
|
) : null}
|
|
|
|
<Panel>
|
|
<div className="flex items-center gap-2 text-xs uppercase tracking-[0.24em] text-[color:var(--terminal-muted)]">
|
|
<ChartNoAxesCombined className="size-4" />
|
|
Financial Statements V3: faithful filing reconstruction + standardized taxonomy comparison
|
|
</div>
|
|
</Panel>
|
|
</AppShell>
|
|
);
|
|
}
|