From dfec7587305fee59f8304000994ca16a495f7389 Mon Sep 17 00:00:00 2001
From: Tyler Hoang <tyler@tylerhoang.xyz>
Date: Mon, 29 Jun 2026 01:41:22 -0700
Subject: feat: update financial overview components

---
 frontend/components/prism/FinancialsCard.tsx   | 16 ++++++++++------
 frontend/components/prism/PriceVsValueCard.tsx |  8 ++++----
 frontend/components/prism/TickerHeader.tsx     | 14 ++++++++------
 3 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/frontend/components/prism/FinancialsCard.tsx b/frontend/components/prism/FinancialsCard.tsx
index 43a2dc2..6e2fe01 100644
--- a/frontend/components/prism/FinancialsCard.tsx
+++ b/frontend/components/prism/FinancialsCard.tsx
@@ -1,6 +1,7 @@
 "use client";
 import type { FinancialRow, FinancialsResponse } from "@/types/api";
 import { fmtLarge } from "@/lib/format";
+import { CurrencyWarning } from "./CurrencyWarning";
 
 type StatementKey = "income" | "balance" | "cash_flow";
 type PeriodKey = "annual" | "quarterly";
@@ -12,13 +13,13 @@ type Props = {
   onChangePeriod: (p: PeriodKey) => void;
 };
 
-function fmtFinVal(val: number | null | undefined, isMargin: boolean): string {
+function fmtFinVal(val: number | null | undefined, isMargin: boolean, currency: string): string {
   if (val === null || val === undefined) return "—";
   if (isMargin) return `${(val * 100).toFixed(1)}%`;
-  return fmtLarge(val);
+  return fmtLarge(val, currency);
 }
 
-function FinRow({ row, lastColIdx }: { row: FinancialRow; lastColIdx: number }) {
+function FinRow({ row, lastColIdx, currency }: { row: FinancialRow; lastColIdx: number; currency: string }) {
   if (row.is_section) {
     return (
       <tr className="psm-fin-section-row">
@@ -52,7 +53,7 @@ function FinRow({ row, lastColIdx }: { row: FinancialRow; lastColIdx: number })
             .filter(Boolean)
             .join(" ")}
         >
-          {fmtFinVal(val, row.is_margin)}
+          {fmtFinVal(val, row.is_margin, currency)}
         </td>
       ))}
     </tr>
@@ -92,7 +93,10 @@ export function FinancialsCard({
           <table className="psm-fin-table">
             <thead>
               <tr>
-                <th className="psm-fin-label-col">USD (millions)</th>
+                <th className="psm-fin-label-col">
+                  {data.currency} (millions)
+                  <CurrencyWarning warning={data.currency_warning} />
+                </th>
                 {stmt.columns.map((col, i) => (
                   <th
                     key={i}
@@ -105,7 +109,7 @@ export function FinancialsCard({
             </thead>
             <tbody>
               {stmt.rows.map((row, i) => (
-                <FinRow key={i} row={row} lastColIdx={lastColIdx} />
+                <FinRow key={i} row={row} lastColIdx={lastColIdx} currency={data.currency} />
               ))}
             </tbody>
           </table>
diff --git a/frontend/components/prism/PriceVsValueCard.tsx b/frontend/components/prism/PriceVsValueCard.tsx
index cf5a3c7..5d9291c 100644
--- a/frontend/components/prism/PriceVsValueCard.tsx
+++ b/frontend/components/prism/PriceVsValueCard.tsx
@@ -48,8 +48,8 @@ export function PriceVsValueCard({ overview, valuation, valState }: Props) {
     : `Trading at ${Math.abs(pct).toFixed(1)}% discount to DCF`;
 
   const [leftLabel, rightLabel] = isPremium
-    ? [`IV ${fmtCurrency(iv)}`, `Price ${fmtCurrency(price)}`]
-    : [`Price ${fmtCurrency(price)}`, `IV ${fmtCurrency(iv)}`];
+    ? [`IV ${fmtCurrency(iv, 2, valuation?.currency ?? overview.currency)}`, `Price ${fmtCurrency(price, 2, overview.currency)}`]
+    : [`Price ${fmtCurrency(price, 2, overview.currency)}`, `IV ${fmtCurrency(iv, 2, valuation?.currency ?? overview.currency)}`];
 
   return (
     <section className="psm-card">
@@ -60,9 +60,9 @@ export function PriceVsValueCard({ overview, valuation, valState }: Props) {
         </div>
       </div>
       <div className="psm-pvv-figures">
-        <span className="psm-pvv-current">{fmtCurrency(price)}</span>
+        <span className="psm-pvv-current">{fmtCurrency(price, 2, overview.currency)}</span>
         <span className={`psm-pvv-iv ${isPremium ? "negative" : "positive"}`}>
-          IV {fmtCurrency(iv)}
+          IV {fmtCurrency(iv, 2, valuation?.currency ?? overview.currency)}
         </span>
       </div>
       <div className="psm-pvv-rail">
diff --git a/frontend/components/prism/TickerHeader.tsx b/frontend/components/prism/TickerHeader.tsx
index 804ffc0..c47f67f 100644
--- a/frontend/components/prism/TickerHeader.tsx
+++ b/frontend/components/prism/TickerHeader.tsx
@@ -1,6 +1,7 @@
 import { deltaClass, fmtCurrency, fmtPct } from "@/lib/format";
 import { rangePercent } from "@/lib/overview";
 import type { TickerOverview } from "@/types/api";
+import { CurrencyWarning } from "./CurrencyWarning";
 
 type Props = {
   overview: TickerOverview;
@@ -25,15 +26,16 @@ export function TickerHeader({ overview, onToggleWatchlist, isSaved }: Props) {
         <div className="psm-head-meta">
           {overview.profile.exchange ? <span className="psm-tag">{overview.profile.exchange}</span> : null}
           {overview.meta.is_partial ? <span className="psm-partial-chip">Partial Data</span> : null}
+          <CurrencyWarning warning={overview.currency_warning} />
         </div>
       </div>
 
       <div className="psm-range">
         <div className="psm-eyebrow">52 Week Range</div>
         <div className="psm-range-values">
-          <span>{fmtCurrency(overview.range_52w.low)}</span>
-          <span className="psm-range-spot">{fmtCurrency(overview.range_52w.price ?? overview.quote.price)}</span>
-          <span>{fmtCurrency(overview.range_52w.high)}</span>
+          <span>{fmtCurrency(overview.range_52w.low, 2, overview.currency)}</span>
+          <span className="psm-range-spot">{fmtCurrency(overview.range_52w.price ?? overview.quote.price, 2, overview.currency)}</span>
+          <span>{fmtCurrency(overview.range_52w.high, 2, overview.currency)}</span>
         </div>
         <div className="psm-range-rail" aria-hidden>
           {pct != null ? <span className="psm-range-indicator" style={{ left: `${pct}%` }} /> : null}
@@ -42,11 +44,11 @@ export function TickerHeader({ overview, onToggleWatchlist, isSaved }: Props) {
       </div>
 
       <div className="psm-price-stack">
-        <span className="psm-price">{fmtCurrency(overview.quote.price)}</span>
+        <span className="psm-price">{fmtCurrency(overview.quote.price, 2, overview.currency)}</span>
         <span className={`psm-change ${deltaClass(overview.quote.change_pct)}`}>
-          {fmtCurrency(overview.quote.change)} · {fmtPct(overview.quote.change_pct, 2, true)}
+          {fmtCurrency(overview.quote.change, 2, overview.currency)} · {fmtPct(overview.quote.change_pct, 2, true)}
         </span>
-        <span className="psm-quote-line">Prev close {fmtCurrency(overview.quote.prev_close)}</span>
+        <span className="psm-quote-line">Prev close {fmtCurrency(overview.quote.prev_close, 2, overview.currency)}</span>
         {lastSource ? <span className="psm-quote-line">Source {lastSource.replaceAll("_", " ")}</span> : null}
         <button type="button" className={`psm-primary-action${isSaved ? " subtle" : ""}`} onClick={onToggleWatchlist}>
           {isSaved ? "Remove From Watchlist" : "Save To Watchlist"}
-- 
cgit v1.3-2-g0d8e