916 lines
34 KiB
TypeScript
916 lines
34 KiB
TypeScript
'use client';
|
|
|
|
import { useQueryClient } from '@tanstack/react-query';
|
|
import Link from 'next/link';
|
|
import { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
|
|
import { format } from 'date-fns';
|
|
import { useSearchParams } from 'next/navigation';
|
|
import {
|
|
Area,
|
|
AreaChart,
|
|
Bar,
|
|
BarChart,
|
|
CartesianGrid,
|
|
Legend,
|
|
Line,
|
|
LineChart,
|
|
ResponsiveContainer,
|
|
Tooltip,
|
|
XAxis,
|
|
YAxis
|
|
} from 'recharts';
|
|
import { ChartNoAxesCombined, RefreshCcw, Search } from 'lucide-react';
|
|
import { AppShell } from '@/components/shell/app-shell';
|
|
import { MetricCard } from '@/components/dashboard/metric-card';
|
|
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 {
|
|
formatCurrencyByScale,
|
|
formatPercent,
|
|
type NumberScaleUnit
|
|
} from '@/lib/format';
|
|
import { queryKeys } from '@/lib/query/keys';
|
|
import { companyAnalysisQueryOptions } from '@/lib/query/options';
|
|
import type { CompanyAnalysis } from '@/lib/types';
|
|
|
|
type StatementPeriodPoint = {
|
|
filingDate: string;
|
|
filingType: '10-K' | '10-Q';
|
|
periodLabel: 'Quarter End' | 'Fiscal Year End';
|
|
};
|
|
|
|
type FinancialSeriesPoint = StatementPeriodPoint & {
|
|
periodKind: 'quarterly' | 'fiscalYearEnd';
|
|
label: string;
|
|
revenue: number | null;
|
|
netIncome: number | null;
|
|
totalAssets: number | null;
|
|
cash: number | null;
|
|
debt: number | null;
|
|
netMargin: number | null;
|
|
debtToAssets: number | null;
|
|
};
|
|
|
|
type CompanyMetricPoint = StatementPeriodPoint & {
|
|
metrics: string[];
|
|
};
|
|
|
|
type StatementMatrixRow<TPoint extends StatementPeriodPoint> = {
|
|
key: string;
|
|
label: string;
|
|
value: (point: TPoint, index: number, series: TPoint[]) => string;
|
|
valueClassName?: (point: TPoint, index: number, series: TPoint[]) => string | undefined;
|
|
};
|
|
|
|
type ChartPeriodFilter = 'quarterlyAndFiscalYearEnd' | 'quarterlyOnly' | 'fiscalYearEndOnly';
|
|
|
|
const CHART_PERIOD_FILTER_OPTIONS: Array<{ value: ChartPeriodFilter; label: string }> = [
|
|
{ value: 'quarterlyAndFiscalYearEnd', label: 'Quarterly + Fiscal Year End' },
|
|
{ value: 'quarterlyOnly', label: 'Quarterly only' },
|
|
{ value: 'fiscalYearEndOnly', label: 'Fiscal Year End only' }
|
|
];
|
|
|
|
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 CHART_TEXT = '#e8fff8';
|
|
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 renderLegendLabel(value: string) {
|
|
return <span style={{ color: CHART_TEXT }}>{value}</span>;
|
|
}
|
|
|
|
function formatShortDate(value: string) {
|
|
const parsed = new Date(value);
|
|
if (Number.isNaN(parsed.getTime())) {
|
|
return 'Unknown';
|
|
}
|
|
|
|
return format(parsed, 'MMM yyyy');
|
|
}
|
|
|
|
function formatLongDate(value: string) {
|
|
const parsed = new Date(value);
|
|
if (Number.isNaN(parsed.getTime())) {
|
|
return 'Unknown';
|
|
}
|
|
|
|
return format(parsed, 'MMM dd, yyyy');
|
|
}
|
|
|
|
function ratioPercent(numerator: number | null, denominator: number | null) {
|
|
if (numerator === null || denominator === null || denominator === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (numerator / denominator) * 100;
|
|
}
|
|
|
|
function asDisplayCurrency(
|
|
value: number | null,
|
|
scale: NumberScaleUnit
|
|
) {
|
|
return value === null ? 'n/a' : formatCurrencyByScale(value, scale);
|
|
}
|
|
|
|
function asDisplayPercent(value: number | null) {
|
|
return value === null ? 'n/a' : formatPercent(value);
|
|
}
|
|
|
|
function asDisplayMultiple(value: number | null) {
|
|
return value === null ? 'n/a' : `${value.toFixed(2)}x`;
|
|
}
|
|
|
|
function asDisplaySignedCurrency(
|
|
value: number | null,
|
|
scale: NumberScaleUnit
|
|
) {
|
|
if (value === null) {
|
|
return 'n/a';
|
|
}
|
|
|
|
const formatted = formatCurrencyByScale(value, scale);
|
|
return value > 0 ? `+${formatted}` : formatted;
|
|
}
|
|
|
|
function normalizeTooltipValue(value: unknown) {
|
|
if (Array.isArray(value)) {
|
|
const [first] = value;
|
|
return typeof first === 'number' || typeof first === 'string' ? first : null;
|
|
}
|
|
|
|
if (typeof value === 'number' || typeof value === 'string') {
|
|
return value;
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
function asTooltipCurrency(
|
|
value: unknown,
|
|
scale: NumberScaleUnit
|
|
) {
|
|
const normalized = normalizeTooltipValue(value);
|
|
if (normalized === null) {
|
|
return 'n/a';
|
|
}
|
|
|
|
const numeric = Number(normalized);
|
|
if (!Number.isFinite(numeric)) {
|
|
return 'n/a';
|
|
}
|
|
|
|
return formatCurrencyByScale(numeric, scale);
|
|
}
|
|
|
|
function asAxisCurrencyTick(
|
|
value: number,
|
|
scale: NumberScaleUnit
|
|
) {
|
|
return formatCurrencyByScale(value, scale, { maximumFractionDigits: 1 });
|
|
}
|
|
|
|
function includesChartPeriod(point: FinancialSeriesPoint, filter: ChartPeriodFilter) {
|
|
if (filter === 'quarterlyOnly') {
|
|
return point.periodKind === 'quarterly';
|
|
}
|
|
|
|
if (filter === 'fiscalYearEndOnly') {
|
|
return point.periodKind === 'fiscalYearEnd';
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
function ratioMultiple(numerator: number | null, denominator: number | null) {
|
|
if (numerator === null || denominator === null || denominator === 0) {
|
|
return null;
|
|
}
|
|
|
|
return numerator / denominator;
|
|
}
|
|
|
|
function StatementMatrixTable<TPoint extends StatementPeriodPoint>({
|
|
points,
|
|
rows
|
|
}: {
|
|
points: TPoint[];
|
|
rows: Array<StatementMatrixRow<TPoint>>;
|
|
}) {
|
|
return (
|
|
<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>
|
|
{points.map((point, index) => (
|
|
<th key={`${point.filingDate}-${point.filingType}-${index}`}>
|
|
<div className="flex flex-col gap-1">
|
|
<span>{formatLongDate(point.filingDate)}</span>
|
|
<span className="text-[11px] normal-case tracking-normal text-[color:var(--terminal-muted)]">{point.filingType} · {point.periodLabel}</span>
|
|
</div>
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{rows.map((row) => (
|
|
<tr key={row.key}>
|
|
<td className="sticky left-0 z-10 whitespace-nowrap bg-[color:var(--panel)] font-medium text-[color:var(--terminal-bright)]">{row.label}</td>
|
|
{points.map((point, index, series) => (
|
|
<td
|
|
key={`${row.key}-${point.filingDate}-${point.filingType}-${index}`}
|
|
className={row.valueClassName?.(point, index, series)}
|
|
>
|
|
{row.value(point, index, series)}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function buildOperatingStatementRows(
|
|
scale: NumberScaleUnit
|
|
): Array<StatementMatrixRow<FinancialSeriesPoint>> {
|
|
return [
|
|
{
|
|
key: 'revenue',
|
|
label: 'Revenue',
|
|
value: (point) => asDisplayCurrency(point.revenue, scale)
|
|
},
|
|
{
|
|
key: 'net-income',
|
|
label: 'Net Income',
|
|
value: (point) => asDisplayCurrency(point.netIncome, scale),
|
|
valueClassName: (point) => {
|
|
if (point.netIncome === null) {
|
|
return undefined;
|
|
}
|
|
|
|
return point.netIncome >= 0 ? 'text-[#96f5bf]' : 'text-[#ff9f9f]';
|
|
}
|
|
},
|
|
{
|
|
key: 'net-margin',
|
|
label: 'Net Margin',
|
|
value: (point) => asDisplayPercent(point.netMargin)
|
|
}
|
|
];
|
|
}
|
|
|
|
function buildBalanceSheetRows(
|
|
scale: NumberScaleUnit
|
|
): Array<StatementMatrixRow<FinancialSeriesPoint>> {
|
|
return [
|
|
{
|
|
key: 'total-assets',
|
|
label: 'Total Assets',
|
|
value: (point) => asDisplayCurrency(point.totalAssets, scale)
|
|
},
|
|
{
|
|
key: 'cash',
|
|
label: 'Cash',
|
|
value: (point) => asDisplayCurrency(point.cash, scale)
|
|
},
|
|
{
|
|
key: 'debt',
|
|
label: 'Debt',
|
|
value: (point) => asDisplayCurrency(point.debt, scale)
|
|
},
|
|
{
|
|
key: 'debt-to-assets',
|
|
label: 'Debt / Assets',
|
|
value: (point) => asDisplayPercent(point.debtToAssets),
|
|
valueClassName: (point) => {
|
|
if (point.debtToAssets === null) {
|
|
return undefined;
|
|
}
|
|
|
|
return point.debtToAssets <= 60 ? 'text-[#96f5bf]' : 'text-[#ffd08a]';
|
|
}
|
|
}
|
|
];
|
|
}
|
|
|
|
function buildCashFlowProxyRows(
|
|
scale: NumberScaleUnit
|
|
): Array<StatementMatrixRow<FinancialSeriesPoint>> {
|
|
return [
|
|
{
|
|
key: 'ending-cash',
|
|
label: 'Ending Cash Balance',
|
|
value: (point) => asDisplayCurrency(point.cash, scale)
|
|
},
|
|
{
|
|
key: 'cash-change',
|
|
label: 'Cash Change vs Prior',
|
|
value: (point, index, series) => {
|
|
if (index === 0) {
|
|
return 'n/a';
|
|
}
|
|
|
|
const previous = series[index - 1];
|
|
if (point.cash === null || previous.cash === null) {
|
|
return 'n/a';
|
|
}
|
|
|
|
return asDisplaySignedCurrency(point.cash - previous.cash, scale);
|
|
},
|
|
valueClassName: (point, index, series) => {
|
|
if (index === 0) {
|
|
return undefined;
|
|
}
|
|
|
|
const previous = series[index - 1];
|
|
if (point.cash === null || previous.cash === null) {
|
|
return undefined;
|
|
}
|
|
|
|
return point.cash - previous.cash >= 0 ? 'text-[#96f5bf]' : 'text-[#ff9f9f]';
|
|
}
|
|
},
|
|
{
|
|
key: 'debt-change',
|
|
label: 'Debt Change vs Prior',
|
|
value: (point, index, series) => {
|
|
if (index === 0) {
|
|
return 'n/a';
|
|
}
|
|
|
|
const previous = series[index - 1];
|
|
if (point.debt === null || previous.debt === null) {
|
|
return 'n/a';
|
|
}
|
|
|
|
return asDisplaySignedCurrency(point.debt - previous.debt, scale);
|
|
},
|
|
valueClassName: (point, index, series) => {
|
|
if (index === 0) {
|
|
return undefined;
|
|
}
|
|
|
|
const previous = series[index - 1];
|
|
if (point.debt === null || previous.debt === null) {
|
|
return undefined;
|
|
}
|
|
|
|
return point.debt - previous.debt <= 0 ? 'text-[#96f5bf]' : 'text-[#ff9f9f]';
|
|
}
|
|
},
|
|
{
|
|
key: 'cash-to-debt',
|
|
label: 'Cash / Debt',
|
|
value: (point) => asDisplayMultiple(ratioMultiple(point.cash, point.debt))
|
|
}
|
|
];
|
|
}
|
|
|
|
function isFinancialPeriodForm(filingType: CompanyAnalysis['financials'][number]['filingType']): filingType is '10-K' | '10-Q' {
|
|
return filingType === '10-K' || filingType === '10-Q';
|
|
}
|
|
|
|
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 [analysis, setAnalysis] = useState<CompanyAnalysis | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [chartPeriodFilter, setChartPeriodFilter] = useState<ChartPeriodFilter>('quarterlyAndFiscalYearEnd');
|
|
const [financialValueScale, setFinancialValueScale] = useState<NumberScaleUnit>('millions');
|
|
|
|
useEffect(() => {
|
|
const fromQuery = searchParams.get('ticker');
|
|
if (!fromQuery) {
|
|
return;
|
|
}
|
|
|
|
const normalized = fromQuery.trim().toUpperCase();
|
|
if (!normalized) {
|
|
return;
|
|
}
|
|
|
|
setTickerInput(normalized);
|
|
setTicker(normalized);
|
|
}, [searchParams]);
|
|
|
|
const loadFinancials = useCallback(async (symbol: string) => {
|
|
const options = companyAnalysisQueryOptions(symbol);
|
|
|
|
if (!queryClient.getQueryData(options.queryKey)) {
|
|
setLoading(true);
|
|
}
|
|
|
|
setError(null);
|
|
|
|
try {
|
|
const response = await queryClient.ensureQueryData(options);
|
|
setAnalysis(response.analysis);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Unable to load financial history');
|
|
setAnalysis(null);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [queryClient]);
|
|
|
|
useEffect(() => {
|
|
if (!isPending && isAuthenticated) {
|
|
void loadFinancials(ticker);
|
|
}
|
|
}, [isPending, isAuthenticated, ticker, loadFinancials]);
|
|
|
|
const financialSeries = useMemo<FinancialSeriesPoint[]>(() => {
|
|
return (analysis?.financials ?? [])
|
|
.filter((entry): entry is CompanyAnalysis['financials'][number] & { filingType: '10-K' | '10-Q' } => {
|
|
return isFinancialPeriodForm(entry.filingType);
|
|
})
|
|
.slice()
|
|
.sort((a, b) => Date.parse(a.filingDate) - Date.parse(b.filingDate))
|
|
.map((entry) => ({
|
|
filingDate: entry.filingDate,
|
|
filingType: entry.filingType,
|
|
periodKind: entry.filingType === '10-Q' ? 'quarterly' : 'fiscalYearEnd',
|
|
periodLabel: entry.filingType === '10-Q' ? 'Quarter End' : 'Fiscal Year End',
|
|
label: formatShortDate(entry.filingDate),
|
|
revenue: entry.revenue ?? null,
|
|
netIncome: entry.netIncome ?? null,
|
|
totalAssets: entry.totalAssets ?? null,
|
|
cash: entry.cash ?? null,
|
|
debt: entry.debt ?? null,
|
|
netMargin: ratioPercent(entry.netIncome ?? null, entry.revenue ?? null),
|
|
debtToAssets: ratioPercent(entry.debt ?? null, entry.totalAssets ?? null)
|
|
}));
|
|
}, [analysis?.financials]);
|
|
|
|
const chartSeries = useMemo(() => {
|
|
return financialSeries.filter((point) => includesChartPeriod(point, chartPeriodFilter));
|
|
}, [financialSeries, chartPeriodFilter]);
|
|
|
|
const selectedChartFilterLabel = useMemo(() => {
|
|
return CHART_PERIOD_FILTER_OPTIONS.find((option) => option.value === chartPeriodFilter)?.label ?? 'Quarterly + Fiscal Year End';
|
|
}, [chartPeriodFilter]);
|
|
|
|
const selectedFinancialScaleLabel = useMemo(() => {
|
|
return FINANCIAL_VALUE_SCALE_OPTIONS.find((option) => option.value === financialValueScale)?.label ?? 'Millions (M)';
|
|
}, [financialValueScale]);
|
|
|
|
const latestSnapshot = financialSeries[financialSeries.length - 1] ?? null;
|
|
|
|
const liquidityRatio = useMemo(() => {
|
|
if (!latestSnapshot || latestSnapshot.cash === null || latestSnapshot.debt === null || latestSnapshot.debt === 0) {
|
|
return null;
|
|
}
|
|
|
|
return latestSnapshot.cash / latestSnapshot.debt;
|
|
}, [latestSnapshot]);
|
|
|
|
const coverage = useMemo(() => {
|
|
const total = chartSeries.length;
|
|
|
|
const asCoverage = (entries: number) => {
|
|
if (total === 0) {
|
|
return '0%';
|
|
}
|
|
|
|
return `${Math.round((entries / total) * 100)}%`;
|
|
};
|
|
|
|
return {
|
|
total,
|
|
revenue: asCoverage(chartSeries.filter((point) => point.revenue !== null).length),
|
|
netIncome: asCoverage(chartSeries.filter((point) => point.netIncome !== null).length),
|
|
assets: asCoverage(chartSeries.filter((point) => point.totalAssets !== null).length),
|
|
cash: asCoverage(chartSeries.filter((point) => point.cash !== null).length),
|
|
debt: asCoverage(chartSeries.filter((point) => point.debt !== null).length)
|
|
};
|
|
}, [chartSeries]);
|
|
|
|
const companyMetricSeries = useMemo<CompanyMetricPoint[]>(() => {
|
|
return (analysis?.filings ?? [])
|
|
.filter((entry): entry is CompanyAnalysis['filings'][number] & { filing_type: '10-K' | '10-Q' } => {
|
|
return isFinancialPeriodForm(entry.filing_type);
|
|
})
|
|
.slice()
|
|
.sort((a, b) => Date.parse(a.filing_date) - Date.parse(b.filing_date))
|
|
.map((entry) => ({
|
|
filingDate: entry.filing_date,
|
|
filingType: entry.filing_type,
|
|
periodLabel: entry.filing_type === '10-Q' ? 'Quarter End' : 'Fiscal Year End',
|
|
metrics: entry.analysis?.companyMetrics ?? []
|
|
}));
|
|
}, [analysis?.filings]);
|
|
|
|
const companyMetricRows = useMemo<Array<StatementMatrixRow<CompanyMetricPoint>>>(() => {
|
|
const rowCount = companyMetricSeries.reduce((max, point) => Math.max(max, point.metrics.length), 0);
|
|
return Array.from({ length: rowCount }, (_, index) => ({
|
|
key: `company-metric-${index + 1}`,
|
|
label: `Metric ${index + 1}`,
|
|
value: (point) => point.metrics[index] ?? 'n/a'
|
|
}));
|
|
}, [companyMetricSeries]);
|
|
|
|
const operatingStatementRows = useMemo(() => {
|
|
return buildOperatingStatementRows(financialValueScale);
|
|
}, [financialValueScale]);
|
|
|
|
const balanceSheetRows = useMemo(() => {
|
|
return buildBalanceSheetRows(financialValueScale);
|
|
}, [financialValueScale]);
|
|
|
|
const cashFlowProxyRows = useMemo(() => {
|
|
return buildCashFlowProxyRows(financialValueScale);
|
|
}, [financialValueScale]);
|
|
|
|
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="Explore 10-K and 10-Q fundamentals, profitability, and balance sheet dynamics by ticker."
|
|
activeTicker={analysis?.company.ticker ?? ticker}
|
|
actions={(
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => {
|
|
void queryClient.invalidateQueries({ queryKey: queryKeys.companyAnalysis(ticker.trim().toUpperCase()) });
|
|
void loadFinancials(ticker);
|
|
}}
|
|
>
|
|
<RefreshCcw className="size-4" />
|
|
Refresh
|
|
</Button>
|
|
)}
|
|
>
|
|
<Panel title="Company Selector" subtitle="Load the latest 10-K / 10-Q financial statement trend available in your filings index.">
|
|
<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>
|
|
{analysis ? (
|
|
<>
|
|
<Link
|
|
href={`/analysis?ticker=${analysis.company.ticker}`}
|
|
onMouseEnter={() => prefetchResearchTicker(analysis.company.ticker)}
|
|
onFocus={() => prefetchResearchTicker(analysis.company.ticker)}
|
|
className="text-sm text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]"
|
|
>
|
|
Open full analysis
|
|
</Link>
|
|
<Link
|
|
href={`/filings?ticker=${analysis.company.ticker}`}
|
|
onMouseEnter={() => prefetchResearchTicker(analysis.company.ticker)}
|
|
onFocus={() => prefetchResearchTicker(analysis.company.ticker)}
|
|
className="text-sm text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]"
|
|
>
|
|
Open filings stream
|
|
</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={latestSnapshot ? asDisplayCurrency(latestSnapshot.revenue, financialValueScale) : 'n/a'}
|
|
delta={latestSnapshot ? `${latestSnapshot.filingType} · ${formatLongDate(latestSnapshot.filingDate)}` : 'No filings loaded'}
|
|
/>
|
|
<MetricCard
|
|
label="Latest Net Income"
|
|
value={latestSnapshot ? asDisplayCurrency(latestSnapshot.netIncome, financialValueScale) : 'n/a'}
|
|
delta={latestSnapshot ? `Net margin ${asDisplayPercent(latestSnapshot.netMargin)}` : 'No filings loaded'}
|
|
positive={(latestSnapshot?.netIncome ?? 0) >= 0}
|
|
/>
|
|
<MetricCard
|
|
label="Latest Total Assets"
|
|
value={latestSnapshot ? asDisplayCurrency(latestSnapshot.totalAssets, financialValueScale) : 'n/a'}
|
|
delta={latestSnapshot ? `Debt/assets ${asDisplayPercent(latestSnapshot.debtToAssets)}` : 'No filings loaded'}
|
|
positive={latestSnapshot ? (latestSnapshot.debtToAssets ?? 0) <= 60 : true}
|
|
/>
|
|
<MetricCard
|
|
label="Cash / Debt"
|
|
value={liquidityRatio === null ? 'n/a' : `${liquidityRatio.toFixed(2)}x`}
|
|
delta={latestSnapshot ? `Cash ${asDisplayCurrency(latestSnapshot.cash, financialValueScale)} · Debt ${asDisplayCurrency(latestSnapshot.debt, financialValueScale)}` : 'No filings loaded'}
|
|
/>
|
|
</div>
|
|
|
|
<Panel title="Chart Period Filter" subtitle="Switch chart views between quarter-end and fiscal-year-end snapshots.">
|
|
<div className="flex flex-wrap gap-2">
|
|
{CHART_PERIOD_FILTER_OPTIONS.map((option) => (
|
|
<Button
|
|
key={option.value}
|
|
type="button"
|
|
variant={option.value === chartPeriodFilter ? 'primary' : 'ghost'}
|
|
onClick={() => setChartPeriodFilter(option.value)}
|
|
>
|
|
{option.label}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</Panel>
|
|
|
|
<Panel title="Financial Value Scale" subtitle={`Display revenue, net income, assets, cash, and debt in ${selectedFinancialScaleLabel}.`}>
|
|
<div className="flex flex-wrap gap-2">
|
|
{FINANCIAL_VALUE_SCALE_OPTIONS.map((option) => (
|
|
<Button
|
|
key={option.value}
|
|
type="button"
|
|
variant={option.value === financialValueScale ? 'primary' : 'ghost'}
|
|
onClick={() => setFinancialValueScale(option.value)}
|
|
>
|
|
{option.label}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</Panel>
|
|
|
|
<div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
|
|
<Panel title="Income Statement Trend" subtitle="Revenue and net income by filing period.">
|
|
{loading ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">Loading statement data...</p>
|
|
) : chartSeries.length === 0 ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">No filing metrics match the current chart period filter.</p>
|
|
) : (
|
|
<div className="h-[330px]">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart data={chartSeries}>
|
|
<CartesianGrid strokeDasharray="2 2" stroke={CHART_GRID} />
|
|
<XAxis
|
|
dataKey="label"
|
|
minTickGap={20}
|
|
stroke={CHART_MUTED}
|
|
fontSize={12}
|
|
axisLine={{ stroke: CHART_MUTED }}
|
|
tickLine={{ stroke: CHART_MUTED }}
|
|
tick={{ fill: CHART_MUTED }}
|
|
/>
|
|
<YAxis
|
|
stroke={CHART_MUTED}
|
|
fontSize={12}
|
|
axisLine={{ stroke: CHART_MUTED }}
|
|
tickLine={{ stroke: CHART_MUTED }}
|
|
tick={{ fill: CHART_MUTED }}
|
|
tickFormatter={(value: number) => asAxisCurrencyTick(value, financialValueScale)}
|
|
/>
|
|
<Tooltip
|
|
formatter={(value) => asTooltipCurrency(value, financialValueScale)}
|
|
contentStyle={{
|
|
backgroundColor: CHART_TOOLTIP_BG,
|
|
border: `1px solid ${CHART_TOOLTIP_BORDER}`,
|
|
borderRadius: '0.75rem'
|
|
}}
|
|
labelStyle={{ color: CHART_TEXT }}
|
|
itemStyle={{ color: CHART_TEXT }}
|
|
cursor={{ fill: 'rgba(104, 255, 213, 0.08)' }}
|
|
/>
|
|
<Legend wrapperStyle={{ paddingTop: '0.75rem' }} formatter={renderLegendLabel} />
|
|
<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>
|
|
</div>
|
|
)}
|
|
</Panel>
|
|
|
|
<Panel title="Balance Sheet Trend" subtitle="Assets, cash, and debt progression from filings.">
|
|
{loading ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">Loading balance sheet data...</p>
|
|
) : chartSeries.length === 0 ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">No balance sheet metrics match the current chart period filter.</p>
|
|
) : (
|
|
<div className="h-[330px]">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<AreaChart data={chartSeries}>
|
|
<defs>
|
|
<linearGradient id="assetsGradient" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="5%" stopColor="#68ffd5" stopOpacity={0.32} />
|
|
<stop offset="95%" stopColor="#68ffd5" stopOpacity={0} />
|
|
</linearGradient>
|
|
</defs>
|
|
<CartesianGrid strokeDasharray="2 2" stroke={CHART_GRID} />
|
|
<XAxis
|
|
dataKey="label"
|
|
minTickGap={20}
|
|
stroke={CHART_MUTED}
|
|
fontSize={12}
|
|
axisLine={{ stroke: CHART_MUTED }}
|
|
tickLine={{ stroke: CHART_MUTED }}
|
|
tick={{ fill: CHART_MUTED }}
|
|
/>
|
|
<YAxis
|
|
stroke={CHART_MUTED}
|
|
fontSize={12}
|
|
axisLine={{ stroke: CHART_MUTED }}
|
|
tickLine={{ stroke: CHART_MUTED }}
|
|
tick={{ fill: CHART_MUTED }}
|
|
tickFormatter={(value: number) => asAxisCurrencyTick(value, financialValueScale)}
|
|
/>
|
|
<Tooltip
|
|
formatter={(value) => asTooltipCurrency(value, financialValueScale)}
|
|
contentStyle={{
|
|
backgroundColor: CHART_TOOLTIP_BG,
|
|
border: `1px solid ${CHART_TOOLTIP_BORDER}`,
|
|
borderRadius: '0.75rem'
|
|
}}
|
|
labelStyle={{ color: CHART_TEXT }}
|
|
itemStyle={{ color: CHART_TEXT }}
|
|
cursor={{ fill: 'rgba(104, 255, 213, 0.08)' }}
|
|
/>
|
|
<Legend wrapperStyle={{ paddingTop: '0.75rem' }} formatter={renderLegendLabel} />
|
|
<Area type="monotone" dataKey="totalAssets" name="Total Assets" stroke="#68ffd5" fill="url(#assetsGradient)" 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>
|
|
</div>
|
|
)}
|
|
</Panel>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-6 xl:grid-cols-3">
|
|
<Panel title="Quality Ratios" subtitle="Profitability and leverage trend over time." className="xl:col-span-2">
|
|
{loading ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">Loading ratio trends...</p>
|
|
) : chartSeries.length === 0 ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">No ratio points match the current chart period filter.</p>
|
|
) : (
|
|
<div className="h-[300px]">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<LineChart data={chartSeries}>
|
|
<CartesianGrid strokeDasharray="2 2" stroke={CHART_GRID} />
|
|
<XAxis
|
|
dataKey="label"
|
|
minTickGap={20}
|
|
stroke={CHART_MUTED}
|
|
fontSize={12}
|
|
axisLine={{ stroke: CHART_MUTED }}
|
|
tickLine={{ stroke: CHART_MUTED }}
|
|
tick={{ fill: CHART_MUTED }}
|
|
/>
|
|
<YAxis
|
|
stroke={CHART_MUTED}
|
|
fontSize={12}
|
|
axisLine={{ stroke: CHART_MUTED }}
|
|
tickLine={{ stroke: CHART_MUTED }}
|
|
tick={{ fill: CHART_MUTED }}
|
|
tickFormatter={(value: number) => `${value.toFixed(0)}%`}
|
|
/>
|
|
<Tooltip
|
|
formatter={(value) => {
|
|
const normalized = normalizeTooltipValue(value);
|
|
if (normalized === null) {
|
|
return 'n/a';
|
|
}
|
|
|
|
const numeric = Number(normalized);
|
|
return Number.isFinite(numeric) ? `${numeric.toFixed(2)}%` : 'n/a';
|
|
}}
|
|
contentStyle={{
|
|
backgroundColor: CHART_TOOLTIP_BG,
|
|
border: `1px solid ${CHART_TOOLTIP_BORDER}`,
|
|
borderRadius: '0.75rem'
|
|
}}
|
|
labelStyle={{ color: CHART_TEXT }}
|
|
itemStyle={{ color: CHART_TEXT }}
|
|
cursor={{ stroke: 'rgba(104, 255, 213, 0.35)', strokeWidth: 1 }}
|
|
/>
|
|
<Legend wrapperStyle={{ paddingTop: '0.75rem' }} formatter={renderLegendLabel} />
|
|
<Line type="monotone" dataKey="netMargin" name="Net Margin" stroke="#68ffd5" strokeWidth={2} dot={false} connectNulls />
|
|
<Line type="monotone" dataKey="debtToAssets" name="Debt / Assets" stroke="#ffb980" strokeWidth={2} dot={false} connectNulls />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
)}
|
|
</Panel>
|
|
|
|
<Panel title="Data Coverage" subtitle={`${coverage.total} snapshots in chart view (${selectedChartFilterLabel}).`}>
|
|
<dl className="space-y-3">
|
|
<div className="flex items-center justify-between rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 text-sm">
|
|
<dt className="text-[color:var(--terminal-muted)]">Revenue coverage</dt>
|
|
<dd className="font-medium text-[color:var(--terminal-bright)]">{coverage.revenue}</dd>
|
|
</div>
|
|
<div className="flex items-center justify-between rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 text-sm">
|
|
<dt className="text-[color:var(--terminal-muted)]">Net income coverage</dt>
|
|
<dd className="font-medium text-[color:var(--terminal-bright)]">{coverage.netIncome}</dd>
|
|
</div>
|
|
<div className="flex items-center justify-between rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 text-sm">
|
|
<dt className="text-[color:var(--terminal-muted)]">Asset coverage</dt>
|
|
<dd className="font-medium text-[color:var(--terminal-bright)]">{coverage.assets}</dd>
|
|
</div>
|
|
<div className="flex items-center justify-between rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 text-sm">
|
|
<dt className="text-[color:var(--terminal-muted)]">Cash coverage</dt>
|
|
<dd className="font-medium text-[color:var(--terminal-bright)]">{coverage.cash}</dd>
|
|
</div>
|
|
<div className="flex items-center justify-between rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 text-sm">
|
|
<dt className="text-[color:var(--terminal-muted)]">Debt coverage</dt>
|
|
<dd className="font-medium text-[color:var(--terminal-bright)]">{coverage.debt}</dd>
|
|
</div>
|
|
</dl>
|
|
</Panel>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
|
|
<Panel title="Operating Statement" subtitle={`Dates are in the top row; operating metrics are listed down the left side. Values shown in ${selectedFinancialScaleLabel}.`}>
|
|
{loading ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">Loading operating statement...</p>
|
|
) : financialSeries.length === 0 ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">No operating statement rows are available for this ticker yet.</p>
|
|
) : (
|
|
<StatementMatrixTable points={financialSeries} rows={operatingStatementRows} />
|
|
)}
|
|
</Panel>
|
|
|
|
<Panel title="Balance Sheet" subtitle={`Balance sheet rows transposed by filing date for side-by-side period comparison. Values shown in ${selectedFinancialScaleLabel}.`}>
|
|
{loading ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">Loading balance sheet...</p>
|
|
) : financialSeries.length === 0 ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">No balance sheet rows are available for this ticker yet.</p>
|
|
) : (
|
|
<StatementMatrixTable points={financialSeries} rows={balanceSheetRows} />
|
|
)}
|
|
</Panel>
|
|
|
|
<Panel title="Cash Flow Statement" subtitle={`Proxy cash-flow view derived from period-end cash and debt until direct cash-flow tags are indexed. Values shown in ${selectedFinancialScaleLabel}.`}>
|
|
{loading ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">Loading cash flow statement...</p>
|
|
) : financialSeries.length === 0 ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">No cash flow statement rows are available for this ticker yet.</p>
|
|
) : (
|
|
<StatementMatrixTable points={financialSeries} rows={cashFlowProxyRows} />
|
|
)}
|
|
</Panel>
|
|
|
|
<Panel title="Company Metrics" subtitle="Company-specific KPI notes extracted from filings (same-store sales, ARPU, users, and similar metrics).">
|
|
{loading ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">Loading company metrics...</p>
|
|
) : companyMetricSeries.length === 0 ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">No filing periods are available for company metrics yet.</p>
|
|
) : companyMetricRows.length === 0 ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">No company-specific KPI metrics were extracted for the selected filings.</p>
|
|
) : (
|
|
<StatementMatrixTable points={companyMetricSeries} rows={companyMetricRows} />
|
|
)}
|
|
</Panel>
|
|
</div>
|
|
|
|
<Panel>
|
|
<div className="flex items-center gap-2 text-xs uppercase tracking-[0.24em] text-[color:var(--terminal-muted)]">
|
|
<ChartNoAxesCombined className="size-4" />
|
|
Financial lens: revenue + margin + balance sheet strength
|
|
</div>
|
|
</Panel>
|
|
</AppShell>
|
|
);
|
|
}
|