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
|
import type { TickerOverview, ValuationResponse } from "@/types/api";
import { fmtCurrency, fmtLarge, fmtNumber, fmtPct } from "@/lib/format";
type ValState = "idle" | "loading" | "ready" | "error";
type Props = {
overview: TickerOverview;
valuation: ValuationResponse | null;
valState: ValState;
};
export function ValuationOverviewCard({ overview, valuation, valState }: Props) {
const rows = [
{ label: "Market Cap", value: fmtLarge(overview.stats.market_cap), missing: overview.stats.market_cap == null },
{ label: "P/E TTM", value: overview.stats.trailing_pe == null ? "-" : `${fmtNumber(overview.stats.trailing_pe)}x`, missing: overview.stats.trailing_pe == null },
{ label: "EPS TTM", value: fmtCurrency(overview.stats.trailing_eps), missing: overview.stats.trailing_eps == null },
{ label: "P/B", value: overview.ratios.price_to_book == null ? "-" : `${fmtNumber(overview.ratios.price_to_book)}x`, missing: overview.ratios.price_to_book == null },
{ label: "P/S", value: overview.ratios.price_to_sales == null ? "-" : `${fmtNumber(overview.ratios.price_to_sales)}x`, missing: overview.ratios.price_to_sales == null },
{ label: "EV/Sales", value: overview.ratios.ev_to_sales == null ? "-" : `${fmtNumber(overview.ratios.ev_to_sales)}x`, missing: overview.ratios.ev_to_sales == null },
{ label: "EV/EBITDA", value: overview.ratios.ev_to_ebitda == null ? "-" : `${fmtNumber(overview.ratios.ev_to_ebitda)}x`, missing: overview.ratios.ev_to_ebitda == null },
];
const visible = rows.filter((r) => !r.missing);
const dcf = valuation?.dcf;
const showDcf = dcf?.available && dcf.intrinsic_value_per_share != null;
return (
<section className="psm-card">
<div className="psm-card-head">
<div>
<div className="psm-eyebrow">Valuation</div>
<h2 className="psm-card-title">Valuation</h2>
</div>
</div>
{visible.length > 0 && (
<div className="psm-stat-list">
{visible.map((row) => (
<div key={row.label} className="psm-stat-row">
<span className="psm-stat-label">{row.label}</span>
<span className="psm-stat-value">{row.value}</span>
</div>
))}
</div>
)}
{valState === "loading" && (
<>
<hr className="psm-divider" />
<div className="psm-stat-list">
<div className="psm-stat-row">
<span className="psm-stat-label psm-skeleton" style={{ width: "120px", height: "14px", display: "inline-block" }} />
<span className="psm-stat-value psm-skeleton" style={{ width: "60px", height: "14px", display: "inline-block" }} />
</div>
<div className="psm-stat-row">
<span className="psm-stat-label psm-skeleton" style={{ width: "100px", height: "14px", display: "inline-block" }} />
<span className="psm-stat-value psm-skeleton" style={{ width: "48px", height: "14px", display: "inline-block" }} />
</div>
</div>
</>
)}
{valState === "ready" && showDcf && dcf && (
<>
<hr className="psm-divider" />
<div className="psm-stat-list">
<div className="psm-stat-row">
<span className="psm-stat-label">DCF Intrinsic Value</span>
<span className="psm-stat-value">{fmtCurrency(dcf.intrinsic_value_per_share)}</span>
</div>
{dcf.growth_rate_used != null && (
<div className="psm-stat-row">
<span className="psm-stat-label">FCF Growth Used</span>
<span className="psm-stat-value">{fmtPct(dcf.growth_rate_used)}</span>
</div>
)}
</div>
</>
)}
</section>
);
}
|
