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

Add K/M/B scale toggles for financial displays

Browse Source
This commit is contained in:
francy51
2026-03-01 19:23:45 -05:00
parent 209b650658
commit b8309c9969
5 changed files with 519 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
app/analysis/page.tsx
View File

@@ -20,7 +20,13 @@ import { Input } from '@/components/ui/input';
import { Panel } from '@/components/ui/panel';
import { useAuthGuard } from '@/hooks/use-auth-guard';
import { getCompanyAnalysis } from '@/lib/api';
import { asNumber, formatCompactCurrency, formatCurrency, formatPercent } from '@/lib/format';
import {
asNumber,
formatCurrency,
formatCurrencyByScale,
formatPercent,
type NumberScaleUnit
} from '@/lib/format';
import type { CompanyAnalysis } from '@/lib/types';
type FinancialPeriodFilter = 'quarterlyAndFiscalYearEnd' | 'quarterlyOnly' | 'fiscalYearEndOnly';
@@ -41,6 +47,12 @@ const FINANCIAL_PERIOD_FILTER_OPTIONS: Array<{ value: FinancialPeriodFilter; lab
{ 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)' }
];
function formatShortDate(value: string) {
return format(new Date(value), 'MMM yyyy');
}
@@ -75,6 +87,17 @@ function includesFinancialPeriod(filingType: '10-K' | '10-Q', filter: FinancialP
return true;
}
function asScaledFinancialCurrency(
value: number | null | undefined,
scale: NumberScaleUnit
) {
if (value === null || value === undefined) {
return 'n/a';
}
return formatCurrencyByScale(value, scale);
}
export default function AnalysisPage() {
return (
<Suspense fallback={<div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">Loading analysis desk...</div>}>
@@ -93,6 +116,7 @@ function AnalysisPageContent() {
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [financialPeriodFilter, setFinancialPeriodFilter] = useState<FinancialPeriodFilter>('quarterlyAndFiscalYearEnd');
const [financialValueScale, setFinancialValueScale] = useState<NumberScaleUnit>('millions');
useEffect(() => {
const fromQuery = searchParams.get('ticker');
@@ -163,6 +187,10 @@ function AnalysisPageContent() {
return (analysis?.filings ?? []).filter((filing) => isFinancialSnapshotForm(filing.filing_type));
}, [analysis?.filings]);
const selectedFinancialScaleLabel = useMemo(() => {
return FINANCIAL_VALUE_SCALE_OPTIONS.find((option) => option.value === financialValueScale)?.label ?? 'Millions (M)';
}, [financialValueScale]);
if (isPending || !isAuthenticated) {
return <div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">Loading analysis desk...</div>;
}
@@ -262,20 +290,35 @@ function AnalysisPageContent() {
<Panel
title="Financial Table"
subtitle="Quarter-end (10-Q) and fiscal-year-end (10-K) snapshots for revenue, net income, assets, and margin."
subtitle={`Quarter-end (10-Q) and fiscal-year-end (10-K) snapshots for revenue, net income, assets, and margin. Values shown in ${selectedFinancialScaleLabel}.`}
actions={(
<div className="flex flex-wrap justify-end gap-2">
{FINANCIAL_PERIOD_FILTER_OPTIONS.map((option) => (
<Button
key={option.value}
type="button"
variant={option.value === financialPeriodFilter ? 'primary' : 'ghost'}
className="px-2 py-1 text-xs"
onClick={() => setFinancialPeriodFilter(option.value)}
>
{option.label}
</Button>
))}
<div className="flex flex-col items-end gap-2">
<div className="flex flex-wrap justify-end gap-2">
{FINANCIAL_PERIOD_FILTER_OPTIONS.map((option) => (
<Button
key={option.value}
type="button"
variant={option.value === financialPeriodFilter ? 'primary' : 'ghost'}
className="px-2 py-1 text-xs"
onClick={() => setFinancialPeriodFilter(option.value)}
>
{option.label}
</Button>
))}
</div>
<div className="flex flex-wrap justify-end gap-2">
{FINANCIAL_VALUE_SCALE_OPTIONS.map((option) => (
<Button
key={option.value}
type="button"
variant={option.value === financialValueScale ? 'primary' : 'ghost'}
className="px-2 py-1 text-xs"
onClick={() => setFinancialValueScale(option.value)}
>
{option.label}
</Button>
))}
</div>
</div>
)}
>
@@ -303,11 +346,11 @@ function AnalysisPageContent() {
<td>{formatLongDate(point.filingDate)}</td>
<td>{point.periodLabel}</td>
<td>{point.filingType}</td>
<td>{point.revenue === null ? 'n/a' : formatCompactCurrency(point.revenue)}</td>
<td>{asScaledFinancialCurrency(point.revenue, financialValueScale)}</td>
<td className={(point.netIncome ?? 0) >= 0 ? 'text-[#96f5bf]' : 'text-[#ff9f9f]'}>
{point.netIncome === null ? 'n/a' : formatCompactCurrency(point.netIncome)}
{asScaledFinancialCurrency(point.netIncome, financialValueScale)}
</td>
<td>{point.assets === null ? 'n/a' : formatCompactCurrency(point.assets)}</td>
<td>{asScaledFinancialCurrency(point.assets, financialValueScale)}</td>
<td>{point.netMargin === null ? 'n/a' : formatPercent(point.netMargin)}</td>
</tr>
))}
@@ -318,7 +361,10 @@ function AnalysisPageContent() {
</Panel>
</div>
<Panel title="Filings" subtitle={`${periodEndFilings.length} quarter-end and fiscal-year-end SEC records loaded.`}>
<Panel
title="Filings"
subtitle={`${periodEndFilings.length} quarter-end and fiscal-year-end SEC records loaded. Values shown in ${selectedFinancialScaleLabel}.`}
>
{loading ? (
<p className="text-sm text-[color:var(--terminal-muted)]">Loading filings...</p>
) : periodEndFilings.length === 0 ? (
@@ -343,9 +389,9 @@ function AnalysisPageContent() {
<td>{format(new Date(filing.filing_date), 'MMM dd, yyyy')}</td>
<td>{filing.filing_type === '10-Q' ? 'Quarter End' : 'Fiscal Year End'}</td>
<td>{filing.filing_type}</td>
<td>{filing.metrics?.revenue !== null && filing.metrics?.revenue !== undefined ? formatCompactCurrency(filing.metrics.revenue) : 'n/a'}</td>
<td>{filing.metrics?.netIncome !== null && filing.metrics?.netIncome !== undefined ? formatCompactCurrency(filing.metrics.netIncome) : 'n/a'}</td>
<td>{filing.metrics?.totalAssets !== null && filing.metrics?.totalAssets !== undefined ? formatCompactCurrency(filing.metrics.totalAssets) : 'n/a'}</td>
<td>{asScaledFinancialCurrency(filing.metrics?.revenue, financialValueScale)}</td>
<td>{asScaledFinancialCurrency(filing.metrics?.netIncome, financialValueScale)}</td>
<td>{asScaledFinancialCurrency(filing.metrics?.totalAssets, financialValueScale)}</td>
<td>
{filing.filing_url ? (
<a href={filing.filing_url} target="_blank" rel="noreferrer" className="text-xs text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]">