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

Focus financial views on quarter/FY ends and add period filters

Browse Source
This commit is contained in:
francy51
2026-03-01 18:43:48 -05:00
parent 2a5b548d89
commit 75408f8559
2 changed files with 158 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
app/financials/page.tsx
View File

@@ -31,7 +31,9 @@ import type { CompanyAnalysis } from '@/lib/types';
type FinancialSeriesPoint = {
filingDate: string;
filingType: '10-K' | '10-Q' | '8-K';
filingType: '10-K' | '10-Q';
periodKind: 'quarterly' | 'fiscalYearEnd';
periodLabel: 'Quarter End' | 'Fiscal Year End';
label: string;
revenue: number | null;
netIncome: number | null;
@@ -42,6 +44,8 @@ type FinancialSeriesPoint = {
debtToAssets: number | null;
};
type ChartPeriodFilter = 'quarterlyAndFiscalYearEnd' | 'quarterlyOnly' | 'fiscalYearEndOnly';
const AXIS_CURRENCY = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
@@ -49,6 +53,12 @@ const AXIS_CURRENCY = new Intl.NumberFormat('en-US', {
maximumFractionDigits: 1
});
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' }
];
function formatShortDate(value: string) {
const parsed = new Date(value);
if (Number.isNaN(parsed.getTime())) {
@@ -110,6 +120,22 @@ function asTooltipCurrency(value: unknown) {
return formatCompactCurrency(numeric);
}
function includesChartPeriod(point: FinancialSeriesPoint, filter: ChartPeriodFilter) {
if (filter === 'quarterlyOnly') {
return point.periodKind === 'quarterly';
}
if (filter === 'fiscalYearEndOnly') {
return point.periodKind === 'fiscalYearEnd';
}
return true;
}
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>}>
@@ -127,6 +153,7 @@ function FinancialsPageContent() {
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');
useEffect(() => {
const fromQuery = searchParams.get('ticker');
@@ -166,11 +193,16 @@ function FinancialsPageContent() {
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,
@@ -182,6 +214,14 @@ function FinancialsPageContent() {
}));
}, [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 latestSnapshot = financialSeries[financialSeries.length - 1] ?? null;
const liquidityRatio = useMemo(() => {
@@ -193,7 +233,7 @@ function FinancialsPageContent() {
}, [latestSnapshot]);
const coverage = useMemo(() => {
const total = financialSeries.length;
const total = chartSeries.length;
const asCoverage = (entries: number) => {
if (total === 0) {
@@ -205,13 +245,13 @@ function FinancialsPageContent() {
return {
total,
revenue: asCoverage(financialSeries.filter((point) => point.revenue !== null).length),
netIncome: asCoverage(financialSeries.filter((point) => point.netIncome !== null).length),
assets: asCoverage(financialSeries.filter((point) => point.totalAssets !== null).length),
cash: asCoverage(financialSeries.filter((point) => point.cash !== null).length),
debt: asCoverage(financialSeries.filter((point) => point.debt !== null).length)
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)
};
}, [financialSeries]);
}, [chartSeries]);
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>;
@@ -294,16 +334,31 @@ function FinancialsPageContent() {
/>
</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>
<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>
) : financialSeries.length === 0 ? (
<p className="text-sm text-[color:var(--terminal-muted)]">No parsed filing metrics available yet for this ticker.</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={financialSeries}>
<BarChart data={chartSeries}>
<CartesianGrid strokeDasharray="2 2" stroke="rgba(126, 217, 255, 0.2)" />
<XAxis dataKey="label" minTickGap={20} stroke="#8cb6c5" fontSize={12} />
<YAxis stroke="#8cb6c5" fontSize={12} tickFormatter={(value: number) => AXIS_CURRENCY.format(value)} />
@@ -320,12 +375,12 @@ function FinancialsPageContent() {
<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>
) : financialSeries.length === 0 ? (
<p className="text-sm text-[color:var(--terminal-muted)]">No balance sheet metrics available yet.</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={financialSeries}>
<AreaChart data={chartSeries}>
<defs>
<linearGradient id="assetsGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#68ffd5" stopOpacity={0.32} />
@@ -351,12 +406,12 @@ function FinancialsPageContent() {
<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>
) : financialSeries.length === 0 ? (
<p className="text-sm text-[color:var(--terminal-muted)]">No ratio data available yet.</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={financialSeries}>
<LineChart data={chartSeries}>
<CartesianGrid strokeDasharray="2 2" stroke="rgba(126, 217, 255, 0.2)" />
<XAxis dataKey="label" minTickGap={20} stroke="#8cb6c5" fontSize={12} />
<YAxis stroke="#8cb6c5" fontSize={12} tickFormatter={(value: number) => `${value.toFixed(0)}%`} />
@@ -380,7 +435,7 @@ function FinancialsPageContent() {
)}
</Panel>
<Panel title="Data Coverage" subtitle={`${coverage.total} filing snapshots in view.`}>
<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>
@@ -406,7 +461,7 @@ function FinancialsPageContent() {
</Panel>
</div>
<Panel title="Filing Metrics Table" subtitle="Raw statement points extracted from filing metadata.">
<Panel title="Period-End Metrics Table" subtitle="Quarter-end (10-Q) and fiscal-year-end (10-K) statement points extracted from filing metadata.">
{loading ? (
<p className="text-sm text-[color:var(--terminal-muted)]">Loading table...</p>
) : financialSeries.length === 0 ? (
@@ -417,6 +472,7 @@ function FinancialsPageContent() {
<thead>
<tr>
<th>Filed</th>
<th>Period</th>
<th>Form</th>
<th>Revenue</th>
<th>Net Income</th>
@@ -427,9 +483,10 @@ function FinancialsPageContent() {
</tr>
</thead>
<tbody>
{financialSeries.map((point) => (
<tr key={`${point.filingDate}-${point.filingType}`}>
{financialSeries.map((point, index) => (
<tr key={`${point.filingDate}-${point.filingType}-${index}`}>
<td>{formatLongDate(point.filingDate)}</td>
<td>{point.periodLabel}</td>
<td>{point.filingType}</td>
<td>{asDisplayCurrency(point.revenue)}</td>
<td className={(point.netIncome ?? 0) >= 0 ? 'text-[#96f5bf]' : 'text-[#ff9f9f]'}>{asDisplayCurrency(point.netIncome)}</td>