Add financials page and navigation links

app/financials/page.tsx

@@ -0,0 +1,456 @@
+'use client';
+
+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 { getCompanyAnalysis } from '@/lib/api';
+import { formatCompactCurrency, formatCurrency, formatPercent } from '@/lib/format';
+import type { CompanyAnalysis } from '@/lib/types';
+
+type FinancialSeriesPoint = {
+  filingDate: string;
+  filingType: '10-K' | '10-Q' | '8-K';
+  label: string;
+  revenue: number | null;
+  netIncome: number | null;
+  totalAssets: number | null;
+  cash: number | null;
+  debt: number | null;
+  netMargin: number | null;
+  debtToAssets: number | null;
+};
+
+const AXIS_CURRENCY = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+  notation: 'compact',
+  maximumFractionDigits: 1
+});
+
+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) {
+  return value === null ? 'n/a' : formatCurrency(value);
+}
+
+function asDisplayPercent(value: number | null) {
+  return value === null ? 'n/a' : formatPercent(value);
+}
+
+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) {
+  const normalized = normalizeTooltipValue(value);
+  if (normalized === null) {
+    return 'n/a';
+  }
+
+  const numeric = Number(normalized);
+  if (!Number.isFinite(numeric)) {
+    return 'n/a';
+  }
+
+  return formatCompactCurrency(numeric);
+}
+
+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 [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);
+
+  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) => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await getCompanyAnalysis(symbol);
+      setAnalysis(response.analysis);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unable to load financial history');
+      setAnalysis(null);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!isPending && isAuthenticated) {
+      void loadFinancials(ticker);
+    }
+  }, [isPending, isAuthenticated, ticker, loadFinancials]);
+
+  const financialSeries = useMemo<FinancialSeriesPoint[]>(() => {
+    return (analysis?.financials ?? [])
+      .slice()
+      .sort((a, b) => Date.parse(a.filingDate) - Date.parse(b.filingDate))
+      .map((entry) => ({
+        filingDate: entry.filingDate,
+        filingType: entry.filingType,
+        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 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 = financialSeries.length;
+
+    const asCoverage = (entries: number) => {
+      if (total === 0) {
+        return '0%';
+      }
+
+      return `${Math.round((entries / total) * 100)}%`;
+    };
+
+    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)
+    };
+  }, [financialSeries]);
+
+  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 filing-derived fundamentals, profitability, and balance sheet dynamics by ticker."
+      actions={(
+        <Button variant="secondary" onClick={() => void loadFinancials(ticker)}>
+          <RefreshCcw className="size-4" />
+          Refresh
+        </Button>
+      )}
+    >
+      <Panel title="Company Selector" subtitle="Load the latest 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}`} className="text-sm text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]">
+                Open full analysis
+              </Link>
+              <Link href={`/filings?ticker=${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) : 'n/a'}
+          delta={latestSnapshot ? `${latestSnapshot.filingType} · ${formatLongDate(latestSnapshot.filingDate)}` : 'No filings loaded'}
+        />
+        <MetricCard
+          label="Latest Net Income"
+          value={latestSnapshot ? asDisplayCurrency(latestSnapshot.netIncome) : '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) : '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)} · Debt ${asDisplayCurrency(latestSnapshot.debt)}` : 'No filings loaded'}
+        />
+      </div>
+
+      <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>
+          ) : (
+            <div className="h-[330px]">
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart data={financialSeries}>
+                  <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)} />
+                  <Tooltip formatter={(value) => asTooltipCurrency(value)} />
+                  <Legend />
+                  <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>
+          ) : financialSeries.length === 0 ? (
+            <p className="text-sm text-[color:var(--terminal-muted)]">No balance sheet metrics available yet.</p>
+          ) : (
+            <div className="h-[330px]">
+              <ResponsiveContainer width="100%" height="100%">
+                <AreaChart data={financialSeries}>
+                  <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="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)} />
+                  <Tooltip formatter={(value) => asTooltipCurrency(value)} />
+                  <Legend />
+                  <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>
+          ) : financialSeries.length === 0 ? (
+            <p className="text-sm text-[color:var(--terminal-muted)]">No ratio data available yet.</p>
+          ) : (
+            <div className="h-[300px]">
+              <ResponsiveContainer width="100%" height="100%">
+                <LineChart data={financialSeries}>
+                  <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)}%`} />
+                  <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';
+                    }}
+                  />
+                  <Legend />
+                  <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} filing snapshots in view.`}>
+          <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>
+
+      <Panel title="Filing Metrics Table" subtitle="Raw statement points extracted from filing metadata.">
+        {loading ? (
+          <p className="text-sm text-[color:var(--terminal-muted)]">Loading table...</p>
+        ) : financialSeries.length === 0 ? (
+          <p className="text-sm text-[color:var(--terminal-muted)]">No financial rows are available for this ticker yet.</p>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="data-table min-w-[960px]">
+              <thead>
+                <tr>
+                  <th>Filed</th>
+                  <th>Form</th>
+                  <th>Revenue</th>
+                  <th>Net Income</th>
+                  <th>Total Assets</th>
+                  <th>Cash</th>
+                  <th>Debt</th>
+                  <th>Net Margin</th>
+                </tr>
+              </thead>
+              <tbody>
+                {financialSeries.map((point) => (
+                  <tr key={`${point.filingDate}-${point.filingType}`}>
+                    <td>{formatLongDate(point.filingDate)}</td>
+                    <td>{point.filingType}</td>
+                    <td>{asDisplayCurrency(point.revenue)}</td>
+                    <td className={(point.netIncome ?? 0) >= 0 ? 'text-[#96f5bf]' : 'text-[#ff9f9f]'}>{asDisplayCurrency(point.netIncome)}</td>
+                    <td>{asDisplayCurrency(point.totalAssets)}</td>
+                    <td>{asDisplayCurrency(point.cash)}</td>
+                    <td>{asDisplayCurrency(point.debt)}</td>
+                    <td>{asDisplayPercent(point.netMargin)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </Panel>
+
+      <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>
+  );
+}

app/page.tsx

@@ -202,11 +202,15 @@ export default function CommandCenterPage() {
       </div>
 
       <Panel title="Quick Links" subtitle="Feature modules">
-        <div className="grid grid-cols-1 gap-3 md:grid-cols-4">
+        <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-5">
           <Link className="rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-4 transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-bright)]" href="/analysis">
             <p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Analysis</p>
             <p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Inspect one company across prices, filings, financials, and AI reports.</p>
           </Link>
+          <Link className="rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-4 transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-bright)]" href="/financials">
+            <p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Financials</p>
+            <p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Focus on multi-period filing metrics, margins, leverage, and balance sheet composition.</p>
+          </Link>
           <Link className="rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-4 transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-bright)]" href="/filings">
             <p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Filings</p>
             <p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Sync SEC filings and trigger AI memo analysis.</p>

components/shell/app-shell.tsx

@@ -3,7 +3,7 @@
 import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
 import { useState } from 'react';
-import { Activity, BookOpenText, ChartCandlestick, Eye, LineChart, LogOut } from 'lucide-react';
+import { Activity, BookOpenText, ChartCandlestick, Eye, Landmark, LineChart, LogOut } from 'lucide-react';
 import { authClient } from '@/lib/auth-client';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
@@ -18,6 +18,7 @@ type AppShellProps = {
 const NAV_ITEMS = [
   { href: '/', label: 'Command Center', icon: Activity },
   { href: '/analysis', label: 'Company Analysis', icon: LineChart },
+  { href: '/financials', label: 'Financials', icon: Landmark },
   { href: '/filings', label: 'Filings Stream', icon: BookOpenText },
   { href: '/portfolio', label: 'Portfolio Matrix', icon: ChartCandlestick },
   { href: '/watchlist', label: 'Watchlist', icon: Eye }