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

app/analysis/page.tsx

@@ -26,14 +26,45 @@ import { getCompanyAnalysis } from '@/lib/api';
 import { asNumber, formatCompactCurrency, formatCurrency, formatPercent } from '@/lib/format';
 import type { CompanyAnalysis } from '@/lib/types';
 
+type FinancialPeriodFilter = 'quarterlyAndFiscalYearEnd' | 'quarterlyOnly' | 'fiscalYearEndOnly';
+
+type FinancialSeriesPoint = {
+  label: string;
+  filingType: '10-K' | '10-Q';
+  periodLabel: 'Quarter End' | 'Fiscal Year End';
+  revenue: number | null;
+  netIncome: number | null;
+  assets: number | null;
+};
+
+const FINANCIAL_PERIOD_FILTER_OPTIONS: Array<{ value: FinancialPeriodFilter; 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) {
   return format(new Date(value), 'MMM yyyy');
 }
 
-function hasFinancialSnapshot(filingType: CompanyAnalysis['filings'][number]['filing_type']) {
+function isFinancialSnapshotForm(
+  filingType: CompanyAnalysis['filings'][number]['filing_type']
+): filingType is '10-K' | '10-Q' {
   return filingType === '10-K' || filingType === '10-Q';
 }
 
+function includesFinancialPeriod(filingType: '10-K' | '10-Q', filter: FinancialPeriodFilter) {
+  if (filter === 'quarterlyOnly') {
+    return filingType === '10-Q';
+  }
+
+  if (filter === 'fiscalYearEndOnly') {
+    return filingType === '10-K';
+  }
+
+  return true;
+}
+
 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>}>
@@ -51,6 +82,7 @@ function AnalysisPageContent() {
   const [analysis, setAnalysis] = useState<CompanyAnalysis | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [financialPeriodFilter, setFinancialPeriodFilter] = useState<FinancialPeriodFilter>('quarterlyAndFiscalYearEnd');
 
   useEffect(() => {
     const fromQuery = searchParams.get('ticker');
@@ -95,18 +127,31 @@ function AnalysisPageContent() {
     }));
   }, [analysis?.priceHistory]);
 
-  const financialSeries = useMemo(() => {
+  const financialSeries = useMemo<FinancialSeriesPoint[]>(() => {
     return (analysis?.financials ?? [])
+      .filter((item): item is CompanyAnalysis['financials'][number] & { filingType: '10-K' | '10-Q' } => {
+        return isFinancialSnapshotForm(item.filingType);
+      })
       .slice()
-      .reverse()
+      .sort((a, b) => Date.parse(a.filingDate) - Date.parse(b.filingDate))
       .map((item) => ({
         label: formatShortDate(item.filingDate),
+        filingType: item.filingType,
+        periodLabel: item.filingType === '10-Q' ? 'Quarter End' : 'Fiscal Year End',
         revenue: item.revenue,
         netIncome: item.netIncome,
         assets: item.totalAssets
       }));
   }, [analysis?.financials]);
 
+  const filteredFinancialSeries = useMemo(() => {
+    return financialSeries.filter((point) => includesFinancialPeriod(point.filingType, financialPeriodFilter));
+  }, [financialSeries, financialPeriodFilter]);
+
+  const periodEndFilings = useMemo(() => {
+    return (analysis?.filings ?? []).filter((filing) => isFinancialSnapshotForm(filing.filing_type));
+  }, [analysis?.filings]);
+
   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>;
   }
@@ -204,15 +249,33 @@ function AnalysisPageContent() {
           )}
         </Panel>
 
-        <Panel title="Financial Trend" subtitle="Filing snapshots for revenue, net income, and assets.">
+        <Panel
+          title="Financial Trend"
+          subtitle="Quarter-end (10-Q) and fiscal-year-end (10-K) snapshots for revenue, net income, and assets."
+          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>
+          )}
+        >
           {loading ? (
             <p className="text-sm text-[color:var(--terminal-muted)]">Loading financials...</p>
-          ) : financialSeries.length === 0 ? (
+          ) : filteredFinancialSeries.length === 0 ? (
-            <p className="text-sm text-[color:var(--terminal-muted)]">No parsed filing metrics yet.</p>
+            <p className="text-sm text-[color:var(--terminal-muted)]">No filing metrics match the selected period filter.</p>
           ) : (
             <div className="h-[320px]">
               <ResponsiveContainer width="100%" height="100%">
-                <BarChart data={financialSeries}>
+                <BarChart data={filteredFinancialSeries}>
                   <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) => `$${Math.round(value / 1_000_000_000)}B`} />
@@ -228,17 +291,18 @@ function AnalysisPageContent() {
         </Panel>
       </div>
 
-      <Panel title="Filings" subtitle={`${analysis?.filings.length ?? 0} recent SEC records loaded.`}>
+      <Panel title="Filings" subtitle={`${periodEndFilings.length} quarter-end and fiscal-year-end SEC records loaded.`}>
         {loading ? (
           <p className="text-sm text-[color:var(--terminal-muted)]">Loading filings...</p>
-        ) : !analysis || analysis.filings.length === 0 ? (
+        ) : periodEndFilings.length === 0 ? (
-          <p className="text-sm text-[color:var(--terminal-muted)]">No filings available for this ticker.</p>
+          <p className="text-sm text-[color:var(--terminal-muted)]">No 10-K or 10-Q filings available for this ticker.</p>
         ) : (
           <div className="overflow-x-auto">
             <table className="data-table min-w-[860px]">
               <thead>
                 <tr>
                   <th>Filed</th>
+                  <th>Period</th>
                   <th>Type</th>
                   <th>Revenue</th>
                   <th>Net Income</th>
@@ -247,13 +311,14 @@ function AnalysisPageContent() {
                 </tr>
               </thead>
               <tbody>
-                {analysis.filings.map((filing) => (
+                {periodEndFilings.map((filing) => (
                   <tr key={filing.accession_number}>
                     <td>{format(new Date(filing.filing_date), 'MMM dd, yyyy')}</td>
-                    <td>{filing.filing_type}{hasFinancialSnapshot(filing.filing_type) ? '' : ' (Qualitative)'}</td>
+                    <td>{filing.filing_type === '10-Q' ? 'Quarter End' : 'Fiscal Year End'}</td>
-                    <td>{hasFinancialSnapshot(filing.filing_type) ? (filing.metrics?.revenue ? formatCompactCurrency(filing.metrics.revenue) : 'n/a') : 'qualitative only'}</td>
+                    <td>{filing.filing_type}</td>
-                    <td>{hasFinancialSnapshot(filing.filing_type) ? (filing.metrics?.netIncome ? formatCompactCurrency(filing.metrics.netIncome) : 'n/a') : 'qualitative only'}</td>
+                    <td>{filing.metrics?.revenue !== null && filing.metrics?.revenue !== undefined ? formatCompactCurrency(filing.metrics.revenue) : 'n/a'}</td>
-                    <td>{hasFinancialSnapshot(filing.filing_type) ? (filing.metrics?.totalAssets ? formatCompactCurrency(filing.metrics.totalAssets) : 'n/a') : 'qualitative only'}</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>
                       {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)]">

app/financials/page.tsx

@@ -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),
+      revenue: asCoverage(chartSeries.filter((point) => point.revenue !== null).length),
-      netIncome: asCoverage(financialSeries.filter((point) => point.netIncome !== null).length),
+      netIncome: asCoverage(chartSeries.filter((point) => point.netIncome !== null).length),
-      assets: asCoverage(financialSeries.filter((point) => point.totalAssets !== null).length),
+      assets: asCoverage(chartSeries.filter((point) => point.totalAssets !== null).length),
-      cash: asCoverage(financialSeries.filter((point) => point.cash !== null).length),
+      cash: asCoverage(chartSeries.filter((point) => point.cash !== null).length),
-      debt: asCoverage(financialSeries.filter((point) => point.debt !== 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 ? (
+          ) : chartSeries.length === 0 ? (
-            <p className="text-sm text-[color:var(--terminal-muted)]">No parsed filing metrics available yet for this ticker.</p>
+            <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 ? (
+          ) : chartSeries.length === 0 ? (
-            <p className="text-sm text-[color:var(--terminal-muted)]">No balance sheet metrics available yet.</p>
+            <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 ? (
+          ) : chartSeries.length === 0 ? (
-            <p className="text-sm text-[color:var(--terminal-muted)]">No ratio data available yet.</p>
+            <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) => (
+                {financialSeries.map((point, index) => (
-                  <tr key={`${point.filingDate}-${point.filingType}`}>
+                  <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>