1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
"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 { RatiosPage } from "@/components/prism/RatiosPage";
import { TickerHeader } from "@/components/prism/TickerHeader";
import type { FinancialsResponse, TickerOverview } from "@/types/api";
type StatementKey = "income" | "balance" | "cash_flow" | "ratios";
type FinancialStatementKey = Exclude<StatementKey, "ratios">;
type PeriodKey = "annual" | "quarterly";
type FinState = "loading" | "ready" | "error";
type Props = {
ticker: string;
overview: TickerOverview;
isSaved: boolean;
onToggleWatchlist: () => void;
};
const STATEMENT_LABELS: Record<StatementKey, string> = {
income: "INCOME",
balance: "BALANCE",
cash_flow: "CASH FLOW",
ratios: "RATIOS",
};
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(() => {
if (statement === "ratios") {
return;
}
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, statement]);
return (
<>
<TickerHeader overview={overview} isSaved={isSaved} onToggleWatchlist={onToggleWatchlist} />
<KPIStrip items={kpis} />
<section className="psm-fin-tab-bar">
<div className="psm-fin-tabs">
{(["income", "balance", "cash_flow", "ratios"] as StatementKey[]).map((key) => (
<button
key={key}
type="button"
className={`psm-fin-tab${statement === key ? " active" : ""}`}
onClick={() => setStatement(key)}
>
{STATEMENT_LABELS[key]}
</button>
))}
</div>
</section>
{statement === "ratios" ? (
<RatiosPage ticker={ticker} />
) : (
<>
{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 as FinancialStatementKey}
period={period}
onChangePeriod={setPeriod}
/>
)}
</>
)}
</>
);
}
|
