diff options
| -rw-r--r-- | frontend/app/page.tsx | 2 | ||||
| -rw-r--r-- | frontend/app/prism-shell.css | 8 | ||||
| -rw-r--r-- | frontend/components/prism/ValuationOverviewCard.tsx | 41 |
3 files changed, 51 insertions, 0 deletions
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx index 6253221..150aaff 100644 --- a/frontend/app/page.tsx +++ b/frontend/app/page.tsx @@ -12,6 +12,7 @@ import { Sidebar } from "@/components/prism/Sidebar"; import { TickerHeader } from "@/components/prism/TickerHeader"; import { TopBar } from "@/components/prism/TopBar"; import { QualityCard } from "@/components/prism/QualityCard"; +import { ValuationOverviewCard } from "@/components/prism/ValuationOverviewCard"; import { VolumeCard } from "@/components/prism/VolumeCard"; import { ApiError, api } from "@/lib/api"; import { deltaClass, fmtNumber, fmtPct } from "@/lib/format"; @@ -317,6 +318,7 @@ function OverviewClient() { <div className="psm-column"> <ProfileCard overview={overview} /> <ShortInterestCard overview={overview} /> + <ValuationOverviewCard overview={overview} /> <QualityCard overview={overview} /> </div> </div> diff --git a/frontend/app/prism-shell.css b/frontend/app/prism-shell.css index 0d7b4ac..56ca536 100644 --- a/frontend/app/prism-shell.css +++ b/frontend/app/prism-shell.css @@ -1880,3 +1880,11 @@ white-space: nowrap; min-width: 60px; } + +/* ── Shared utilities ───────────────────────────── */ + +.psm-divider { + border: 0; + border-top: 1px solid var(--line-1); + margin: var(--sp-4) 0 var(--sp-3); +} diff --git a/frontend/components/prism/ValuationOverviewCard.tsx b/frontend/components/prism/ValuationOverviewCard.tsx new file mode 100644 index 0000000..f85e443 --- /dev/null +++ b/frontend/components/prism/ValuationOverviewCard.tsx @@ -0,0 +1,41 @@ +import type { TickerOverview } from "@/types/api"; +import { fmtCurrency, fmtLarge, fmtNumber } from "@/lib/format"; + +type Props = { + overview: TickerOverview; +}; + +export function ValuationOverviewCard({ overview }: 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); + + 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> + )} + </section> + ); +} |