diff options
Diffstat (limited to 'frontend/app/page.tsx')
| -rw-r--r-- | frontend/app/page.tsx | 581 |
1 files changed, 296 insertions, 285 deletions
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx index 0658929..f47d49a 100644 --- a/frontend/app/page.tsx +++ b/frontend/app/page.tsx @@ -1,27 +1,25 @@ "use client"; -import { FormEvent, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react"; -import { BookmarkMinus, BookmarkPlus, Search } from "lucide-react"; +import { FormEvent, Suspense, startTransition, useCallback, useEffect, useMemo, useRef, useState } from "react"; +import Image from "next/image"; import { useRouter, useSearchParams } from "next/navigation"; -import { PriceChart } from "@/components/PriceChart"; +import { AppShell } from "@/components/prism/AppShell"; +import { ChartCard } from "@/components/prism/ChartCard"; +import { KPIStrip } from "@/components/prism/KPIStrip"; +import { Sidebar } from "@/components/prism/Sidebar"; +import { TickerHeader } from "@/components/prism/TickerHeader"; +import { TopBar } from "@/components/prism/TopBar"; import { ApiError, api } from "@/lib/api"; import { deltaClass, fmtCurrency, fmtLarge, fmtNumber, fmtPct } from "@/lib/format"; +import { availableFieldSummary, buildKpis, marketClock, OVERVIEW_NAV_ITEMS, signalTone, sortIndices, unavailableFields } from "@/lib/overview"; import type { HistoryPoint, MarketIndex, SearchResult, TickerOverview, WatchlistResponse } from "@/types/api"; -const PERIODS = [ - { key: "1m", label: "1M" }, - { key: "3m", label: "3M" }, - { key: "6m", label: "6M" }, - { key: "1y", label: "1Y" }, - { key: "5y", label: "5Y" } -]; - type LoadState = "idle" | "loading" | "ready" | "invalid" | "error"; type ChartState = "idle" | "loading" | "ready" | "error"; export default function OverviewPage() { return ( - <Suspense fallback={<main className="shell"><section className="content"><div className="empty-panel">Loading Prism...</div></section></main>}> + <Suspense fallback={<LoadingShell />}> <OverviewClient /> </Suspense> ); @@ -46,24 +44,37 @@ function OverviewClient() { const [chartState, setChartState] = useState<ChartState>("idle"); const [chartError, setChartError] = useState<string | null>(null); const [watchlistError, setWatchlistError] = useState<string | null>(null); + const [clockSnapshot, setClockSnapshot] = useState(() => marketClock()); const watchlistSymbols = useMemo(() => new Set(watchlist.items.map((item) => item.symbol)), [watchlist]); const isSaved = selectedTicker ? watchlistSymbols.has(selectedTicker) : false; + const marketCards = useMemo(() => sortIndices(market), [market]); + const kpis = useMemo(() => (overview ? buildKpis(overview) : []), [overview]); + const missingFields = useMemo(() => (overview ? unavailableFields(overview) : []), [overview]); - const selectTicker = useCallback( + useEffect(() => { + const timer = window.setInterval(() => setClockSnapshot(marketClock()), 60_000); + return () => window.clearInterval(timer); + }, []); + + const navigateToTicker = useCallback( (symbol: string) => { const normalized = symbol.trim().toUpperCase(); if (!normalized) return; + setResults([]); setQuery(""); + setOverview(null); + setHistory([]); setOverviewError(null); setChartError(null); setWatchlistError(null); setOverviewState("loading"); setChartState("loading"); - setOverview(null); - setHistory([]); - router.push(`/?ticker=${encodeURIComponent(normalized)}`); + + startTransition(() => { + router.push(`/?ticker=${encodeURIComponent(normalized)}`); + }); }, [router] ); @@ -76,7 +87,9 @@ function OverviewClient() { setWatchlistError(null); setOverviewState("idle"); setChartState("idle"); - router.push("/"); + startTransition(() => { + router.push("/"); + }); }, [router]); const refreshWatchlist = useCallback(async () => { @@ -95,10 +108,13 @@ function OverviewClient() { useEffect(() => { if (query.trim().length < 2) { setResults([]); + setSearching(false); return; } + let cancelled = false; setSearching(true); + const timer = window.setTimeout(() => { api .search(query) @@ -112,6 +128,7 @@ function OverviewClient() { if (!cancelled) setSearching(false); }); }, 250); + return () => { cancelled = true; window.clearTimeout(timer); @@ -125,18 +142,17 @@ function OverviewClient() { setHistory([]); setOverviewError(null); setChartError(null); - setWatchlistError(null); setOverviewState("idle"); setChartState("idle"); return; } + if (lastTickerRef.current === selectedTicker) return; let cancelled = false; lastTickerRef.current = selectedTicker; setOverviewState("loading"); setOverviewError(null); - setWatchlistError(null); setOverview(null); api @@ -149,13 +165,15 @@ function OverviewClient() { .catch((exc: Error) => { if (cancelled) return; setOverview(null); + setChartState("idle"); + setHistory([]); + if (exc instanceof ApiError && exc.status === 404) { setOverviewState("invalid"); setOverviewError("Ticker not found"); - setChartState("idle"); - setHistory([]); return; } + setOverviewState("error"); setOverviewError(exc.message || "Ticker data unavailable"); }); @@ -167,6 +185,7 @@ function OverviewClient() { useEffect(() => { if (!selectedTicker) return; + let cancelled = false; setChartState("loading"); setChartError(null); @@ -193,11 +212,14 @@ function OverviewClient() { async function onSearchSubmit(event: FormEvent<HTMLFormElement>) { event.preventDefault(); - if (results[0]) selectTicker(results[0].symbol); - else if (query.trim()) selectTicker(query); + if (results[0]) { + navigateToTicker(results[0].symbol); + return; + } + if (query.trim()) navigateToTicker(query); } - async function toggleWatchlist() { + async function addOrRemoveCurrentTicker() { if (!selectedTicker) return; try { const next = isSaved ? await api.removeWatchlist(selectedTicker) : await api.addWatchlist(selectedTicker); @@ -208,323 +230,312 @@ function OverviewClient() { } } - const summaryTicker = overview?.profile.symbol || selectedTicker; - const summaryName = - overviewState === "invalid" - ? "Ticker not found" - : overview?.profile.name || (selectedTicker ? "Loading ticker..." : "No ticker selected"); - - return ( - <main className="shell"> - <aside className="sidebar"> - <div className="brand"> - <div className="brand-mark">P</div> - <div> - <div className="brand-name">Prism</div> - <div className="brand-sub">Overview</div> - </div> - </div> + async function removeFromWatchlist(symbol: string) { + try { + const next = await api.removeWatchlist(symbol); + setWatchlist(next); + setWatchlistError(null); + } catch (exc) { + setWatchlistError(exc instanceof Error ? exc.message : "Could not update watchlist"); + } + } - <form className="search-form" onSubmit={onSearchSubmit}> - <label htmlFor="ticker-search">Ticker Search</label> - <div className="search-box"> - <Search size={16} aria-hidden /> - <input id="ticker-search" value={query} onChange={(event) => setQuery(event.target.value)} placeholder="AAPL, Microsoft..." /> - </div> - {query.trim().length >= 2 && ( - <div className="search-results"> - {searching && <div className="muted-row">Searching...</div>} - {!searching && results.length === 0 && <div className="muted-row">No matches</div>} - {results.map((result) => ( - <button key={`${result.symbol}-${result.exchange}`} type="button" onClick={() => selectTicker(result.symbol)}> - <span>{result.symbol}</span> - <small>{result.name}</small> - </button> - ))} + const shell = ( + <AppShell + sidebar={ + <Sidebar + navItems={OVERVIEW_NAV_ITEMS} + selectedKey="overview" + currentTicker={selectedTicker} + watchlist={watchlist} + watchlistError={watchlistError} + onSelectTicker={navigateToTicker} + onRemoveTicker={removeFromWatchlist} + /> + } + topbar={ + <TopBar + query={query} + searching={searching} + results={results} + marketStatus={clockSnapshot} + onChangeQuery={setQuery} + onSubmit={onSearchSubmit} + onSelectTicker={navigateToTicker} + /> + } + > + <MarketStrip indices={marketCards} /> + {!selectedTicker ? <EmptyOverviewState watchlist={watchlist} onSelectTicker={navigateToTicker} /> : null} + {selectedTicker && overviewState === "loading" ? <LoadingOverviewState symbol={selectedTicker} /> : null} + {selectedTicker && overviewState === "invalid" ? <InvalidTickerState symbol={selectedTicker} onClear={clearTicker} /> : null} + {selectedTicker && overviewState === "error" ? <ErrorOverviewState message={overviewError || "Ticker data unavailable"} /> : null} + {overview && overviewState === "ready" ? ( + <> + <TickerHeader overview={overview} onToggleWatchlist={addOrRemoveCurrentTicker} isSaved={isSaved} /> + <KPIStrip items={kpis} /> + <div className="psm-main-grid"> + <div className="psm-column"> + <ChartCard symbol={overview.profile.symbol} period={period} points={history} chartState={chartState} chartError={chartError} onChangePeriod={setPeriod} /> + <SignalCard overview={overview} /> </div> - )} - </form> - - <section className="selected-summary"> - <div className="section-label">Selected</div> - <div className="summary-symbol">{summaryTicker || "-"}</div> - <div className="summary-name">{summaryName}</div> - {overview ? ( - <> - <div className="summary-price"> - {fmtCurrency(overview.quote.price)} - <span className={deltaClass(overview.quote.change_pct)}>{fmtPct(overview.quote.change_pct, 2, true)}</span> - </div> - <button className="watch-action" type="button" onClick={toggleWatchlist}> - {isSaved ? <BookmarkMinus size={16} aria-hidden /> : <BookmarkPlus size={16} aria-hidden />} - {isSaved ? "Remove" : "Save"} - </button> - </> - ) : selectedTicker ? ( - <div className="empty-copy">{overviewState === "loading" ? "Fetching overview..." : "Search for another ticker."}</div> - ) : ( - <div className="empty-copy">No ticker selected</div> - )} - {watchlistError && <div className="inline-note error-copy">{watchlistError}</div>} - </section> - - <section className="watchlist"> - <div className="section-label">Watchlist</div> - {watchlist.items.length === 0 && <div className="empty-copy">No saved tickers</div>} - {watchlist.items.map((item) => ( - <button key={item.symbol} type="button" className="watch-row" onClick={() => selectTicker(item.symbol)}> - <span>{item.symbol}</span> - <span>{fmtCurrency(item.quote?.price)}</span> - <span className={deltaClass(item.quote?.change_pct)}>{fmtPct(item.quote?.change_pct, 2, true)}</span> - </button> - ))} - <div className="watch-count"> - {watchlist.items.length}/{watchlist.limit} - </div> - </section> - </aside> - - <section className="content"> - <MarketBar indices={market} /> - {!selectedTicker && <EmptyState watchlist={watchlist} onSelect={selectTicker} />} - {selectedTicker && overviewState === "loading" && <div className="empty-panel">Loading {selectedTicker}...</div>} - {selectedTicker && overviewState === "invalid" && <InvalidTickerState symbol={selectedTicker} onClear={clearTicker} />} - {selectedTicker && overviewState === "error" && <div className="error-panel">{overviewError || "Ticker data unavailable"}</div>} - {overview && overviewState === "ready" && ( - <article className="overview"> - <header className="company-header"> - <div> - <div className="eyebrow">{overview.profile.exchange || "Ticker"}</div> - <div className="header-title-row"> - <h1>{overview.profile.name}</h1> - {overview.meta.is_partial && <span className="status-chip">Partial Data</span>} - </div> - <p>{identityLine(overview)}</p> - </div> - <div className="quote-block"> - <span>{fmtCurrency(overview.quote.price)}</span> - <strong className={deltaClass(overview.quote.change_pct)}>{fmtPct(overview.quote.change_pct, 2, true)}</strong> - <small>Prev close {fmtCurrency(overview.quote.prev_close)}</small> - </div> - </header> - - {overview.meta.is_partial && <div className="inline-note">Some fields are unavailable for this ticker. Available data is still shown below.</div>} - - <section className="signal-grid"> - {overview.signals.map((signal) => ( - <div className={`signal ${signal.state}`} key={signal.key}> - <span>{signal.key}</span> - <strong>{signal.value}</strong> - <small>{signal.description}</small> - </div> - ))} - </section> - - <section className="stat-grid"> - <Stat label="Market Cap" value={fmtLarge(overview.stats.market_cap)} missing={overview.stats.market_cap == null} /> - <Stat label="P/E TTM" value={fmtNumber(overview.stats.trailing_pe)} missing={overview.stats.trailing_pe == null} /> - <Stat label="EPS TTM" value={fmtCurrency(overview.stats.trailing_eps)} missing={overview.stats.trailing_eps == null} /> - <Stat label="Volume" value={fmtNumber(overview.stats.volume, 0)} missing={overview.stats.volume == null} /> - <Stat label="Avg Volume" value={fmtNumber(overview.stats.average_volume, 0)} missing={overview.stats.average_volume == null} /> - <Stat label="Beta" value={fmtNumber(overview.stats.beta)} missing={overview.stats.beta == null} /> - </section> - - <section className="split-row"> - <RangeCard overview={overview} /> - <ShortInterest overview={overview} /> - </section> - - <section className="split-row"> + <div className="psm-column"> + <DataStatusCard overview={overview} missingFields={missingFields} /> <ProfileCard overview={overview} /> - <SourceCard overview={overview} /> - </section> - - <section className="chart-shell"> - <div className="chart-head"> - <div> - <div className="section-label">Price History</div> - <strong>{overview.profile.symbol}</strong> - </div> - <div className="segmented"> - {PERIODS.map((option) => ( - <button key={option.key} type="button" className={period === option.key ? "active" : ""} onClick={() => setPeriod(option.key)}> - {option.label} - </button> - ))} - </div> - </div> - {chartState === "loading" && <div className="empty-panel compact-panel">Loading {period.toUpperCase()} history...</div>} - {chartState === "error" && <div className="error-panel compact-panel">{chartError || "Could not load chart history"}</div>} - {chartState === "ready" && <PriceChart symbol={overview.profile.symbol} points={history} />} - </section> - </article> - )} - </section> - </main> + <ShortInterestCard overview={overview} /> + <StatsCard overview={overview} /> + </div> + </div> + </> + ) : null} + </AppShell> ); + + return shell; } -function MarketBar({ indices }: { indices: MarketIndex[] }) { - if (!indices.length) return <div className="market-bar empty">Market data unavailable</div>; +function MarketStrip({ indices }: { indices: MarketIndex[] }) { + if (!indices.length) { + return <section className="psm-card-empty psm-market-card">Market data is temporarily unavailable.</section>; + } + return ( - <section className="market-bar"> + <section className="psm-market-strip" aria-label="Market indices"> {indices.map((index) => ( - <div className="market-item" key={index.name}> - <span>{index.name}</span> - <strong>{fmtNumber(index.price)}</strong> - <small className={deltaClass(index.change_pct)}>{fmtPct(index.change_pct, 2, true)}</small> - </div> + <article key={index.name} className="psm-market-card"> + <span className="psm-market-name">{index.name}</span> + <span className="psm-market-price">{fmtNumber(index.price)}</span> + <span className={`psm-market-change ${deltaClass(index.change_pct)}`}>{fmtPct(index.change_pct, 2, true)}</span> + </article> ))} </section> ); } -function EmptyState({ watchlist, onSelect }: { watchlist: WatchlistResponse; onSelect: (symbol: string) => void }) { +function EmptyOverviewState({ watchlist, onSelectTicker }: { watchlist: WatchlistResponse; onSelectTicker: (symbol: string) => void }) { return ( - <section className="empty-state"> - <h1>Overview</h1> + <section className="psm-state-panel"> + <div className="psm-state-title">Overview</div> + <h1>Choose a ticker to enter the workbench.</h1> + <p>Search from the top bar or jump into one of your saved symbols from the sidebar watchlist.</p> {watchlist.items.length ? ( - <> - <p>Select a saved ticker to load its company profile, quote, stats, and chart.</p> - <div className="watch-table"> - {watchlist.items.map((item) => ( - <button key={item.symbol} type="button" onClick={() => onSelect(item.symbol)}> - <span>{item.symbol}</span> - <span>{fmtCurrency(item.quote?.price)}</span> - <span className={deltaClass(item.quote?.change_pct)}>{fmtPct(item.quote?.change_pct, 2, true)}</span> - </button> - ))} - </div> - </> - ) : ( - <p>Search for a ticker to begin.</p> - )} + <div className="psm-stack"> + {watchlist.items.map((item) => ( + <button key={item.symbol} type="button" className="psm-ghost-action" onClick={() => onSelectTicker(item.symbol)}> + {item.symbol} + </button> + ))} + </div> + ) : null} </section> ); } +function LoadingOverviewState({ symbol }: { symbol: string }) { + return ( + <div className="psm-loading-shell"> + <section className="psm-state-panel"> + <div className="psm-state-title">Loading</div> + <h1>{symbol}</h1> + <p>Fetching quote, profile, signals, and supporting metrics.</p> + </section> + <section className="psm-card psm-skeleton" /> + <section className="psm-card psm-skeleton" /> + </div> + ); +} + function InvalidTickerState({ symbol, onClear }: { symbol: string; onClear: () => void }) { return ( - <section className="error-panel invalid-state"> + <section className="psm-state-panel"> + <span className="psm-status-chip invalid">Invalid Ticker</span> <h1>{symbol}</h1> - <p>This ticker could not be resolved to usable market data.</p> - <button type="button" className="ghost-action" onClick={onClear}> - Back to Search + <p>This symbol could not be resolved into usable market data. Try another search or return to the empty workspace.</p> + <button type="button" className="psm-ghost-action" onClick={onClear}> + Clear Selection </button> </section> ); } -function Stat({ label, value, missing = false }: { label: string; value: string; missing?: boolean }) { +function ErrorOverviewState({ message }: { message: string }) { return ( - <div className="stat"> - <span>{label}</span> - <strong className={missing ? "missing-value" : undefined}>{missing ? "Unavailable" : value}</strong> - </div> + <section className="psm-state-panel"> + <span className="psm-status-chip invalid">Data Error</span> + <h1>Overview unavailable</h1> + <p>{message}</p> + </section> ); } -function RangeCard({ overview }: { overview: TickerOverview }) { - const low = overview.range_52w.low; - const high = overview.range_52w.high; - const price = overview.range_52w.price; - const pct = low != null && high != null && price != null && high > low ? Math.max(0, Math.min(100, ((price - low) / (high - low)) * 100)) : null; +function SignalCard({ overview }: { overview: TickerOverview }) { return ( - <div className="detail-panel"> - <div className="section-label">52 Week Range</div> - {pct === null ? ( - <div className="empty-copy">Range unavailable</div> - ) : ( - <> - <div className="range-values"> - <span>{fmtCurrency(low)}</span> - <strong>{fmtCurrency(price)}</strong> - <span>{fmtCurrency(high)}</span> - </div> - <div className="range-rail"> - <span style={{ width: `${pct}%` }} /> - <i style={{ left: `${pct}%` }} /> - </div> - </> - )} - </div> + <section className="psm-card"> + <div className="psm-card-head"> + <div> + <div className="psm-eyebrow">Signals</div> + <h2 className="psm-card-title">Readthrough</h2> + </div> + </div> + <div className="psm-signal-grid"> + {overview.signals.map((signal) => ( + <article key={signal.key} className={`psm-signal ${signalTone(signal.state)}`}> + <span className="psm-signal-key">{signal.key}</span> + <span className="psm-signal-value">{signal.value}</span> + <span className="psm-signal-copy">{signal.description}</span> + </article> + ))} + </div> + </section> ); } -function ShortInterest({ overview }: { overview: TickerOverview }) { - const short = overview.short_interest; +function DataStatusCard({ overview, missingFields }: { overview: TickerOverview; missingFields: string[] }) { + const entries = Object.entries(overview.meta.sources).slice(0, 6); + return ( - <div className="detail-panel"> - <div className="section-label">Short Interest</div> - <div className="mini-grid"> - <Stat label="Short Float" value={fmtPct(short.short_percent_of_float)} missing={short.short_percent_of_float == null} /> - <Stat label="Days Cover" value={fmtNumber(short.short_ratio)} missing={short.short_ratio == null} /> - <Stat label="Shares Short" value={fmtNumber(short.shares_short, 0)} missing={short.shares_short == null} /> - <Stat label="Prior Delta" value={fmtPct(short.shares_short_delta_pct, 1, true)} missing={short.shares_short_delta_pct == null} /> + <section className="psm-card"> + <div className="psm-card-head"> + <div> + <div className="psm-eyebrow">Data Quality</div> + <h2 className="psm-card-title">Coverage</h2> + </div> + <span className={`psm-status-chip${overview.meta.is_partial ? " partial" : ""}`}>{overview.meta.status}</span> </div> - </div> + <p className="psm-quality-copy">{availableFieldSummary(overview)}</p> + {overview.meta.is_partial ? ( + <div className="psm-stack"> + {missingFields.length ? missingFields.slice(0, 8).map((field) => <span key={field} className="psm-field-tag missing">{field}</span>) : null} + </div> + ) : null} + <div className="psm-source-list"> + {entries.length ? ( + entries.map(([field, source]) => ( + <div className="psm-source-row" key={field}> + <span className="psm-source-key">{field}</span> + <span className="psm-source-value">{source}</span> + </div> + )) + ) : ( + <div className="psm-source-row"> + <span className="psm-source-key">Sources</span> + <span className="psm-source-value">Unavailable</span> + </div> + )} + </div> + </section> ); } function ProfileCard({ overview }: { overview: TickerOverview }) { return ( - <div className="detail-panel"> - <div className="section-label">Company Profile</div> - <div className="profile-list"> + <section className="psm-card"> + <div className="psm-card-head"> <div> - <span>Sector</span> - <strong className={!overview.profile.sector ? "missing-value" : undefined}>{overview.profile.sector || "Unavailable"}</strong> + <div className="psm-eyebrow">Company Profile</div> + <h2 className="psm-card-title">Context</h2> </div> - <div> - <span>Industry</span> - <strong className={!overview.profile.industry ? "missing-value" : undefined}>{overview.profile.industry || "Unavailable"}</strong> + </div> + <div className="psm-profile-list"> + <div className="psm-profile-row"> + <span className="psm-profile-key">Sector</span> + <span className="psm-profile-value">{overview.profile.sector || "Unavailable"}</span> + </div> + <div className="psm-profile-row"> + <span className="psm-profile-key">Industry</span> + <span className="psm-profile-value">{overview.profile.industry || "Unavailable"}</span> + </div> + <div className="psm-profile-row"> + <span className="psm-profile-key">Exchange</span> + <span className="psm-profile-value">{overview.profile.exchange || "Unavailable"}</span> </div> + <div className="psm-profile-row"> + <span className="psm-profile-key">Website</span> + <span className="psm-profile-value"> + {overview.profile.website ? ( + <a href={overview.profile.website} target="_blank" rel="noreferrer" className="psm-link"> + {overview.profile.website} + </a> + ) : ( + "Unavailable" + )} + </span> + </div> + </div> + <p className="psm-profile-summary">{overview.profile.summary || "Business summary unavailable."}</p> + </section> + ); +} + +function ShortInterestCard({ overview }: { overview: TickerOverview }) { + const short = overview.short_interest; + return ( + <section className="psm-card"> + <div className="psm-card-head"> <div> - <span>Website</span> - {overview.profile.website ? ( - <a href={overview.profile.website} target="_blank" rel="noreferrer"> - {overview.profile.website} - </a> - ) : ( - <strong className="missing-value">Unavailable</strong> - )} + <div className="psm-eyebrow">Short Interest</div> + <h2 className="psm-card-title">Pressure</h2> </div> </div> - <p className={overview.profile.summary ? "profile-summary" : "profile-summary missing-value"}> - {overview.profile.summary || "Business summary unavailable."} - </p> - </div> + <div className="psm-detail-grid"> + <DetailItem label="Short Float" value={fmtPct(short.short_percent_of_float)} missing={short.short_percent_of_float == null} /> + <DetailItem label="Days Cover" value={fmtNumber(short.short_ratio)} missing={short.short_ratio == null} /> + <DetailItem label="Shares Short" value={fmtNumber(short.shares_short, 0)} missing={short.shares_short == null} /> + <DetailItem label="Prior Delta" value={fmtPct(short.shares_short_delta_pct, 1, true)} missing={short.shares_short_delta_pct == null} /> + </div> + </section> ); } -function SourceCard({ overview }: { overview: TickerOverview }) { - const fields = Object.entries(overview.meta.sources).slice(0, 6); +function StatsCard({ overview }: { overview: TickerOverview }) { return ( - <div className="detail-panel"> - <div className="section-label">Data Quality</div> - <div className="quality-copy"> - Status <strong>{overview.meta.status}</strong> + <section className="psm-card"> + <div className="psm-card-head"> + <div> + <div className="psm-eyebrow">Overview Stats</div> + <h2 className="psm-card-title">Reference</h2> + </div> </div> - <div className="profile-list compact-list"> - {fields.length ? ( - fields.map(([field, source]) => ( - <div key={field}> - <span>{field}</span> - <strong>{source}</strong> - </div> - )) - ) : ( - <div> - <span>Sources</span> - <strong className="missing-value">Unavailable</strong> - </div> - )} + <div className="psm-stat-list"> + <StatRow label="Market Cap" value={fmtLarge(overview.stats.market_cap)} missing={overview.stats.market_cap == null} /> + <StatRow label="P/E TTM" value={fmtNumber(overview.stats.trailing_pe)} missing={overview.stats.trailing_pe == null} /> + <StatRow label="EPS TTM" value={fmtCurrency(overview.stats.trailing_eps)} missing={overview.stats.trailing_eps == null} /> + <StatRow label="Volume" value={fmtNumber(overview.stats.volume, 0)} missing={overview.stats.volume == null} /> + <StatRow label="Avg Volume" value={fmtNumber(overview.stats.average_volume, 0)} missing={overview.stats.average_volume == null} /> + <StatRow label="Beta" value={fmtNumber(overview.stats.beta)} missing={overview.stats.beta == null} /> </div> + </section> + ); +} + +function DetailItem({ label, value, missing = false }: { label: string; value: string; missing?: boolean }) { + return ( + <article className="psm-detail-item"> + <span className="psm-stat-label">{label}</span> + <span className={`psm-detail-value${missing ? " missing" : ""}`}>{missing ? "Unavailable" : value}</span> + </article> + ); +} + +function StatRow({ label, value, missing = false }: { label: string; value: string; missing?: boolean }) { + return ( + <div className="psm-stat-row"> + <span className="psm-stat-label">{label}</span> + <span className={`psm-stat-value${missing ? " missing" : ""}`}>{missing ? "Unavailable" : value}</span> </div> ); } -function identityLine(overview: TickerOverview) { - const parts = [overview.profile.symbol, overview.profile.sector, overview.profile.industry].filter(Boolean); - return parts.length ? parts.join(" · ") : overview.profile.symbol; +function LoadingShell() { + return ( + <AppShell + sidebar={<aside className="psm-side"><div className="psm-brand"><Image className="psm-brand-mark" src="/design-system/logo-monogram.svg" alt="" width={34} height={34} /><div className="psm-brand-copy"><div className="psm-brand-name">Prism</div><div className="psm-brand-sub">Loading</div></div></div></aside>} + topbar={<header className="psm-top"><div className="psm-search-form"><span className="psm-icon icon-search" aria-hidden /><span className="psm-muted-copy">Loading Prism…</span></div></header>} + > + <div className="psm-loading-shell"> + <section className="psm-card psm-skeleton" /> + <section className="psm-card psm-skeleton" /> + </div> + </AppShell> + ); } |