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
|
"use client";
import { useEffect, useState } from "react";
import { api } from "@/lib/api";
import { buildKpis } from "@/lib/overview";
import { ValuationCard } from "@/components/prism/ValuationCard";
import { KPIStrip } from "@/components/prism/KPIStrip";
import { TickerHeader } from "@/components/prism/TickerHeader";
import type { TickerOverview, ValuationResponse, WaccResponse } from "@/types/api";
type ValState = "loading" | "ready" | "error";
type Props = {
ticker: string;
overview: TickerOverview;
isSaved: boolean;
onToggleWatchlist: () => void;
};
export function ValuationPage({ ticker, overview, isSaved, onToggleWatchlist }: Props) {
const [data, setData] = useState<ValuationResponse | null>(null);
const [waccData, setWaccData] = useState<WaccResponse | null>(null);
const [seedRevenue, setSeedRevenue] = useState<number | null>(null);
const [valState, setValState] = useState<ValState>("loading");
const kpis = buildKpis(overview);
useEffect(() => {
let cancelled = false;
setValState("loading");
setData(null);
setWaccData(null);
setSeedRevenue(null);
Promise.all([api.valuation(ticker), api.wacc(ticker), api.financials(ticker)])
.then(([valuationRes, waccRes, financialsRes]) => {
if (!cancelled) {
const revenueRow = financialsRes?.income?.rows?.find(
(r) => r.label === "Total Revenue"
);
const latestRevenue = revenueRow?.values?.[0] ?? null;
setData(valuationRes);
setWaccData(waccRes);
setSeedRevenue(latestRevenue);
setValState("ready");
}
})
.catch(() => {
if (!cancelled) setValState("error");
});
return () => {
cancelled = true;
};
}, [ticker]);
return (
<>
<TickerHeader overview={overview} isSaved={isSaved} onToggleWatchlist={onToggleWatchlist} />
<KPIStrip items={kpis} />
{valState === "loading" && (
<section className="psm-card psm-skeleton" style={{ minHeight: 320 }} />
)}
{valState === "error" && (
<section className="psm-card">
<p className="psm-muted-copy">Valuation data unavailable for {ticker}.</p>
</section>
)}
{valState === "ready" && data && <ValuationCard data={data} waccData={waccData} seedRevenue={seedRevenue} />}
</>
);
}
|
