// End-of-window Holdings card. Two parts: // // 1. Top strip — three KPI tiles (Total Portfolio / Cash on Hold / // Equity Value) sitting next to a small donut that visualises // the cash vs equity split. // // 2. Bottom table — one row per stock still held on the end-date, // with avg buy price, current price, absolute profit, profit %. // // Theme parity is the brief: this should look indistinguishable from // the Trades-table card already on the dashboard. Same `.card` shell, // same header layout, same Th sort + Hint pattern, same `.mono` // numerics, same up/down colour tokens. function HoldingsCard({ summary }) { const positions = summary.positions || []; const totalValue = summary.totalValue || 0; const equityValue = summary.equityValue || 0; const cashOnHold = (summary.portfolio && summary.portfolio.cashBalance != null ? Number(summary.portfolio.cashBalance.amount ?? summary.portfolio.cashBalance) : Math.max(0, totalValue - equityValue)); const [sortBy, setSortBy] = React.useState({ key: 'value', dir: 'desc' }); // Normalise once. Each row carries the bits the table needs; // derived fields (value, profit, profit%) are pre-computed here so // the sort comparator stays trivial. const rows = React.useMemo(() => positions.map((p, i) => { const qty = Number(p.quantity); const avg = Number(p.averagePrice); const cur = Number(p.currentPrice); const value = qty * cur; return { id: `${p.symbol}-${i}`, symbol: p.symbol, companyName: p.companyName, upstoxUrl: p.upstoxUrl, qty, avg, cur, value, profit: typeof p.profit === 'number' ? p.profit : (cur - avg) * qty, profitPct: typeof p.profitPercentage === 'number' ? p.profitPercentage : (avg > 0 ? (cur / avg - 1) * 100 : 0), }; }), [positions]); const sorted = React.useMemo(() => { const copy = rows.slice(); const dir = sortBy.dir === 'asc' ? 1 : -1; copy.sort((a, b) => { const k = sortBy.key; if (k === 'stock') return a.symbol.localeCompare(b.symbol) * dir; if (k === 'profitPct') return (a.profitPct - b.profitPct) * dir; // numeric default (value, profit, qty, avg, cur) return ((a[k] ?? 0) - (b[k] ?? 0)) * dir; }); return copy; }, [rows, sortBy]); const toggleSort = (key) => { setSortBy((prev) => prev.key === key ? { key, dir: prev.dir === 'asc' ? 'desc' : 'asc' } : { key, dir: 'desc' }); }; const Th = ({ col, label, align = 'left', hint }) => ( toggleSort(col)}> {label} {sortBy.key === col && ( {sortBy.dir === 'asc' ? '▲' : '▼'} )} {hint && ( e.stopPropagation()}> {hint} )} ); return (
{/* ── Top strip: three KPI tiles + donut ────────────────────── */}
Total Portfolio — what the account is worth on the end-date: cash on hold + equity value. Same number as the headline above the chart. } /> Cash on Hold — un-deployed cash sitting in the simulated account on the end-date. Includes proceeds from sells the strategy hasn't yet redeployed. } /> 0} hint={<> Equity Value — mark-to-market value of every open lot on the end-date (sum of qty × close price). The table below itemises which stocks make this up. } />
{/* ── Holdings table ───────────────────────────────────────── */}
Holdings on end-date
{rows.length} {rows.length === 1 ? 'position' : 'positions'} marked-to-market
{rows.length === 0 ? (
No open positions on end-date — strategy fully exited.
) : (
{sorted.map((r) => ( ))}
Unrealised P&L — open-position profit if you sold every lot at the end-date close: (current − avg buy) × qty. Excludes taxes/brokerage. } /> Profit % — relative gain on cost basis:{' '} (current / avg buy − 1) × 100. Treats the position like a single buy at the average cost — doesn't care when individual lots were purchased. } />
{r.qty.toLocaleString('en-IN')} ₹{r.avg.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ₹{r.cur.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} {UI.fmtINR(r.value)} = 0 ? 'var(--up)' : 'var(--down)', }}> {r.profit >= 0 ? '+' : ''}{UI.fmtINR(r.profit)} = 0 ? 'var(--up)' : 'var(--down)', }}> {UI.fmtPct(r.profitPct)}
)}
); } // Two-slice donut: equity vs cash. Matches the chart-line palette so // the Holdings card visually rhymes with the timeline above it // (chart-2 = equity, chart-3 = cash on hold). function SplitDonut({ equityValue, cashOnHold }) { const total = Math.max(0.0001, equityValue + cashOnHold); const equityFrac = equityValue / total; const size = 140; const stroke = 18; const r = (size - stroke) / 2; const c = 2 * Math.PI * r; const equityLen = c * equityFrac; const cashLen = c - equityLen; return (
{/* Cash slice — drawn first as the full ring background. */} 0 ? 1 : 0.25} /> {/* Equity slice on top, measured from 12 o'clock. */} {equityValue > 0 && ( )}
Equity
{(equityFrac * 100).toFixed(0)}%
); } function DonutLegendRow({ color, label, pct }) { return (
{label} {pct.toFixed(0)}%
); } window.HoldingsCard = HoldingsCard;