feat: add FinancialsPage data-fetching wrapper

1 files changed, 73 insertions, 0 deletions

diff --git a/frontend/components/prism/FinancialsPage.tsx b/frontend/components/prism/FinancialsPage.tsx
new file mode 100644
index 0000000..fcd2763
--- /dev/null
+++ b/frontend/components/prism/FinancialsPage.tsx
@@ -0,0 +1,73 @@
+"use client";
+import { useEffect, useState } from "react";
+import { api } from "@/lib/api";
+import { buildKpis } from "@/lib/overview";
+import { FinancialsCard } from "@/components/prism/FinancialsCard";
+import { KPIStrip } from "@/components/prism/KPIStrip";
+import { TickerHeader } from "@/components/prism/TickerHeader";
+import type { FinancialsResponse, TickerOverview } from "@/types/api";
+
+type StatementKey = "income" | "balance" | "cash_flow";
+type PeriodKey = "annual" | "quarterly";
+type FinState = "loading" | "ready" | "error";
+
+type Props = {
+  ticker: string;
+  overview: TickerOverview;
+  isSaved: boolean;
+  onToggleWatchlist: () => void;
+};
+
+export function FinancialsPage({ ticker, overview, isSaved, onToggleWatchlist }: Props) {
+  const [statement, setStatement] = useState<StatementKey>("income");
+  const [period, setPeriod] = useState<PeriodKey>("annual");
+  const [data, setData] = useState<FinancialsResponse | null>(null);
+  const [finState, setFinState] = useState<FinState>("loading");
+  const kpis = buildKpis(overview);
+
+  useEffect(() => {
+    let cancelled = false;
+    setFinState("loading");
+    setData(null);
+
+    api
+      .financials(ticker, period)
+      .then((res) => {
+        if (!cancelled) {
+          setData(res);
+          setFinState("ready");
+        }
+      })
+      .catch(() => {
+        if (!cancelled) setFinState("error");
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [ticker, period]);
+
+  return (
+    <>
+      <TickerHeader overview={overview} isSaved={isSaved} onToggleWatchlist={onToggleWatchlist} />
+      <KPIStrip items={kpis} />
+      {finState === "loading" && (
+        <section className="psm-card psm-skeleton" style={{ minHeight: 320 }} />
+      )}
+      {finState === "error" && (
+        <section className="psm-card">
+          <p className="psm-muted-copy">Financial statements unavailable for {ticker}.</p>
+        </section>
+      )}
+      {finState === "ready" && data && (
+        <FinancialsCard
+          data={data}
+          statement={statement}
+          period={period}
+          onChangeStatement={setStatement}
+          onChangePeriod={setPeriod}
+        />
+      )}
+    </>
+  );
+}