/* Clear Mint — Investment Portfolio "Command Center" Wired to live state: every figure is derived from CM.S.investments (the same localStorage S the rest of the app reads/writes). The "Refresh prices" control hits the serverless /api/quote service and writes currentPrice / marketValue back through CM.mutate so the whole app stays consistent. window.PageInvestments overrides the legacy fallback in cm-pages-money.jsx (loaded AFTER it). Depends on cm-charts + cm-components + cm-app-kit + cm-an-charts + cm-data. */ (function () { const { ChartCard, DonutChart, Legend, DataTable } = window; const MiniSpark = window.AnMiniSpark, ANI = window.ANI; const { G, PU, AM, BL, SL, RD, TEAL, PINK, INDIGO } = window.CMC; const GOLD = '#D4A95D'; /* ───────────────── classification / palette ───────────────── */ const TYPE_META = { etf: { label:'ETFs', color:PU }, stock: { label:'Stocks', color:BL }, mutual_fund: { label:'Mutual Funds', color:G }, crypto: { label:'Crypto', color:GOLD }, bond: { label:'Bonds', color:SL }, real_estate: { label:'Real Estate', color:RD }, cash: { label:'Cash', color:TEAL }, other: { label:'Other', color:TEAL }, }; const typeMeta = t => TYPE_META[t] || TYPE_META.other; const ACCT_COLORS = { TFSA:G, RRSP:BL, RESP:AM, FHSA:PINK, LIRA:TEAL, RRIF:INDIGO, 'Non-Registered':PU }; const acctColor = a => ACCT_COLORS[a] || SL; const REGISTERED = /TFSA|RRSP|RESP|LIRA|RRIF|FHSA/i; const CCY_COLORS = { CAD:G, USD:BL, EUR:PU, GBP:AM }; const ccyColor = c => CCY_COLORS[c] || SL; /* tiny eased ramp for sparkline context (endpoints are the real values) */ function ramp(a, b, n = 9) { const out = []; for (let i = 0; i < n; i++) { const t = i / (n - 1); const e = t * t * (3 - 2 * t); out.push(a + (b - a) * e); } return out; } /* USD↔CAD conversion for the "Show in CAD / USD" toggle (other currencies pass through). */ function fxConv(value, fromCcy, displayCcy, usdToCad) { fromCcy = (fromCcy || 'CAD').toUpperCase(); if (fromCcy === displayCcy || !usdToCad) return value; if (fromCcy === 'USD' && displayCcy === 'CAD') return value * usdToCad; if (fromCcy === 'CAD' && displayCcy === 'USD') return value / usdToCad; return value; } /* ───────────────── unified normalize + writers (the 3 source paths converge here) ───────────────── Statement import, integration, and manual entry all build records through these, so every holding / account carries the same shape — including source + inputMethod ("statement"|"integration"|"manual") + excluded. Writers mutate S.investments / S.investmentAccounts (persisted by cm-data save/load and, because cm-sync reuses that same blob, the cloud snapshot too). */ function normalizeHolding(raw, opts) { opts = opts || {}; const ccy = (raw.currency || 'CAD').toUpperCase(); const ticker = String(raw.symbol || raw.ticker || '').trim().toUpperCase(); const shares = +raw.shares || +raw.units || 0; const price = raw.currentPrice != null ? +raw.currentPrice : (raw.price != null ? +raw.price : 0); const mv = raw.marketValue != null ? +raw.marketValue : (raw.value != null ? +raw.value : Math.round(shares * price * 100) / 100); const isFund = raw.isFund != null ? !!raw.isFund : !ticker; const inputMethod = opts.inputMethod || raw.inputMethod || 'manual'; return { symbol: ticker || '—', name: raw.name || raw.fundName || ticker || 'Holding', type: raw.type || (isFund ? 'mutual_fund' : 'stock'), shares, avgCost: raw.avgCost != null ? +raw.avgCost : price, currentPrice: price, marketValue: mv, account: raw.account || raw.planType || 'Non-Registered', broker: raw.broker || opts.source || 'Brokerage', currency: ccy, isFund, source: opts.source || raw.source || null, inputMethod, excluded: !!raw.excluded, fromStatement: inputMethod === 'statement' || !!raw.fromStatement, }; } function normalizeAccount(raw, opts) { opts = opts || {}; const inputMethod = opts.inputMethod || raw.inputMethod || 'statement'; return { provider: opts.source || raw.provider || raw.source || 'Statement', source: opts.source || raw.source || 'Statement', planType: raw.planType, planName: raw.planName || raw.planType, register: raw.planType, registered: raw.registered !== false, currency: (raw.currency || 'CAD').toUpperCase(), balance: raw.closingValue != null ? +raw.closingValue : (+raw.balance || 0), holdings: Array.isArray(raw.holdings) ? raw.holdings : [], inputMethod, fromStatement: inputMethod === 'statement', importedAt: opts.importedAt || null, }; } /* Writers — the single place S.investments / S.investmentAccounts get appended. */ function writeHoldings(CM, list) { if (!list || !list.length) return; CM.mutate(function () { const arr = (CM.S.investments = CM.S.investments || []); list.forEach(h => arr.push(h)); }); } function writeAccounts(CM, list, replaceSource) { if (!list || !list.length) return; CM.mutate(function () { let arr = (CM.S.investmentAccounts || []); if (replaceSource) arr = arr.filter(a => a.source !== replaceSource); // re-import replaces same provider list.forEach(a => arr.push(a)); CM.S.investmentAccounts = arr; }); } /* ───────────────── derive everything from holdings ───────────────── */ function derive(invs, displayCcy, usdToCad) { displayCcy = displayCcy || 'CAD'; const rows = invs.map((i, _i) => { const ccy = (i.currency || 'CAD').toUpperCase(); const cv = (v) => fxConv(v, ccy, displayCcy, usdToCad); // native → display currency const mvN = i.marketValue != null ? +i.marketValue : (+i.shares || 0) * (+i.currentPrice || 0); const costN = i.costBasis != null ? +i.costBasis : (+i.shares || 0) * (+i.avgCost || 0); const mv = cv(mvN), cost = cv(costN), gain = mv - cost; return { symbol:i.symbol || '—', name:i.name || i.symbol || 'Holding', type:i.type || 'other', broker:i.broker || 'Brokerage', account:i.account || 'Non-Registered', currency: ccy, shares:+i.shares || 0, avgCost: cv(+i.avgCost || 0), price: cv(+i.currentPrice || 0), mv, cost, gain, gainPct: cost ? gain / cost * 100 : 0, mvNative: mvN, _i, excluded: !!i.excluded, fromStatement: !!i.fromStatement, }; }); const active = rows.filter(r => !r.excluded); // excluded holdings drop out of every total/chart/allocation const totalMV = active.reduce((s, r) => s + r.mv, 0); const totalCost = active.reduce((s, r) => s + r.cost, 0); rows.forEach(r => r.weight = (!r.excluded && totalMV) ? r.mv / totalMV : 0); rows.sort((a, b) => (a.excluded - b.excluded) || (b.mv - a.mv)); // excluded sink to the bottom of the list active.sort((a, b) => b.mv - a.mv); const group = key => { const m = {}; active.forEach(r => { const k = r[key]; m[k] = (m[k] || 0) + r.mv; }); return Object.keys(m).map(k => ({ key:k, value:m[k] })).sort((a, b) => b.value - a.value); }; const byType = group('type').map(g => ({ ...g, ...typeMeta(g.key) })); const byBroker = group('broker').map(g => ({ ...g, label:g.key })); const byAccount = group('account').map(g => ({ ...g, label:g.key, color:acctColor(g.key) })); const byCcy = group('currency').map(g => ({ ...g, label:g.key, color:ccyColor(g.key) })); const crypto = active.filter(r => r.type === 'crypto').reduce((s, r) => s + r.mv, 0); const registered = active.filter(r => REGISTERED.test(r.account)).reduce((s, r) => s + r.mv, 0); const top3 = active.slice(0, 3).reduce((s, r) => s + r.mv, 0); const topW = active.length ? active[0].weight : 0; const cryptoW = totalMV ? crypto / totalMV : 0; // concentration / volatility proxy → 0..100 (higher = riskier) const risk = Math.max(8, Math.min(96, Math.round(22 + cryptoW * 100 * 0.55 + topW * 100 * 0.40))); const riskBand = risk < 30 ? ['Low', G] : risk < 50 ? ['Moderate', '#B5740F'] : risk < 70 ? ['Elevated', '#C77A24'] : ['High', RD]; const movers = [...active].sort((a, b) => b.gainPct - a.gainPct); return { rows, totalMV, totalCost, totalGain: totalMV - totalCost, gainPct: totalCost ? (totalMV - totalCost) / totalCost * 100 : 0, byType, byBroker, byAccount, byCcy, crypto, cryptoW, registered, registeredW: totalMV ? registered / totalMV : 0, top3, top3W: totalMV ? top3 / totalMV : 0, topW, best: movers[0], worst: movers[movers.length - 1], movers, risk, riskBand, brokers:byBroker.length, }; } /* ───────────────── small building blocks ───────────────── */ function Badge({ ini, color }) { return {ini}; } function ViewLink({ children = 'View Details', onClick }) { return {children} ; } function KpiTile({ feat, icon, tint, col, label, value, delta, foot, spark }) { return (
{icon} {label}
{value}
{delta ? <>{delta.neg ? : }{delta.v} {delta.sub && {delta.sub}} {foot} : {foot}}
); } /* portfolio value vs invested cost — endpoints are real, interior is an eased path */ function PerfChart({ vals, inv, fmt, height = 300 }) { const W = 760, H = height, P = { l:54, r:16, t:14, b:28 }; const n = vals.length, yMax = (Math.max(...vals, ...inv) * 1.12) || 1; const X = i => P.l + (i / (n - 1)) * (W - P.l - P.r); const Y = v => P.t + (1 - v / yMax) * (H - P.t - P.b); const path = a => a.map((v, i) => `${i ? 'L' : 'M'}${X(i).toFixed(1)},${Y(v).toFixed(1)}`).join(' '); const area = `${path(vals)} L${X(n - 1)},${H - P.b} L${X(0)},${H - P.b} Z`; const ticks = [1, .75, .5, .25, 0].map(f => f * yMax); const months = ['', 'Jul', '', 'Sep', '', 'Nov', '', 'Jan', '', 'Mar', '', 'May', '']; return ( {ticks.map((v, i) => { const y = Y(v); return ( {fmt(v)}); })} {vals.map((v, i) => i % 2 === 0 && )} {months.map((m, i) => m && {m})} ); } /* horizontal bar list (broker / account-type / currency) */ function BarList({ rows, total, fmt }) { const max = Math.max(...rows.map(r => r.value), 1); return (
{rows.map((r, i) => (
{r.label}{r.tag && {r.tag}}
{fmt(r.value)}
{(r.value / total * 100).toFixed(1)}%
))}
); } /* gain / loss by holding — diverging bars */ function GainBars({ rows }) { const maxAbs = Math.max(...rows.map(r => Math.abs(r.gainPct)), 1); return (
{rows.map((r, i) => (
{r.symbol} ·{r.type === 'mutual_fund' ? 'fund' : r.type} = 0 ? G : RD }}/> = 0 ? G : RD, width:58, flex:'0 0 58px' }}>{(r.gain >= 0 ? '+' : '') + r.gainPct.toFixed(1)}%
))}
); } /* risk gauge — multicolor semicircle + needle */ function RiskGauge({ score = 62, size = 240 }) { const W = size, H = size * 0.62, cx = W / 2, cy = H - 8, r = W * 0.40, stroke = W * 0.075; const segs = [['#E04044', 0, .25], ['#FBA834', .25, .5], ['#F2C94C', .5, .7], ['#5AB97E', .7, .85], ['#10915F', .85, 1]]; const polar = f => { const a = Math.PI - f * Math.PI; return [cx + Math.cos(a) * r, cy - Math.sin(a) * r]; }; const arcSeg = (f0, f1) => { const [x0, y0] = polar(f0), [x1, y1] = polar(f1); return `M ${x0} ${y0} A ${r} ${r} 0 0 1 ${x1} ${y1}`; }; const f = Math.max(0, Math.min(1, score / 100)); const na = Math.PI - f * Math.PI, nlen = r - stroke * 0.3; const nx = cx + Math.cos(na) * nlen, ny = cy - Math.sin(na) * nlen; return (
{segs.map(([c, a, b], i) => )} Low Moderate High
); } const FOOT = [ { icon:, t:'10,000+ Institutions', s:'Connect with banks, brokerages and wealth platforms.' }, { icon:, t:'Secure & Private', s:'Your data is encrypted and never shared.' }, { icon:, t:'Live Market Prices', s:'Refresh quotes from the market on demand.' }, { icon:, t:'AI-Powered Insights', s:'Smart insights to help you grow your wealth.' }, ]; /* ───────────────── PAGE ───────────────── */ function PageInvestments() { const CM = window.useStore ? window.useStore() : window.CM; const fmt = CM.M0, fmt2 = CM.M; const tabs = ['Portfolio', 'Holdings', 'Performance', 'Allocation', 'Market Context']; const [tab, setTab] = React.useState('Portfolio'); const [busy, setBusy] = React.useState(false); const [stamp, setStamp] = React.useState(null); const [note, setNote] = React.useState(null); const [hq, setHq] = React.useState(''); const [hType, setHType] = React.useState(''); const [hAcct, setHAcct] = React.useState(''); const [hCcy, setHCcy] = React.useState(''); const [hSort, setHSort] = React.useState('value'); const [holdModal, setHoldModal] = React.useState(null); // null | {idx:-1} add | {idx} edit const [delHold, setDelHold] = React.useState(null); // null | {idx, name} const [srcPick, setSrcPick] = React.useState(false); // source-picker (3 paths) open const [importPrev, setImportPrev] = React.useState(null); // null | parsed statement data (preview) const [connectOpen, setConnectOpen] = React.useState(false); // integrations modal open const [impBusy, setImpBusy] = React.useState(false); const [impErr, setImpErr] = React.useState(null); const [displayCcy, setDisplayCcy] = React.useState('CAD'); // "Show in CAD / USD" — never assume CAD const [fxRate, setFxRate] = React.useState(0); // USD→CAD (Bank of Canada via /api/fx) React.useEffect(() => { let alive = true; fetch((window.CM_API_BASE || '/api') + '/fx?base=USD"e=CAD').then(r => r.json()) .then(d => { if (alive && d && d.rate) setFxRate(+d.rate); }).catch(() => {}); return () => { alive = false; }; }, []); const usdToCad = fxRate || 1.35; // sensible fallback if FX is briefly unavailable const toggleExclude = (i) => CM.mutate(() => { const x = (CM.S.investments || [])[i]; if (x) x.excluded = !x.excluded; }); const invs = CM.S.investments || []; const D = derive(invs, displayCcy, usdToCad); function refreshPrices() { const syms = invs.map(i => i.symbol).filter(Boolean).join(','); if (!syms) return; setBusy(true); setNote(null); CM.api.quote(syms).then(d => { const list = (d && d.quotes) || []; // /api/quote returns { quotes:[{symbol,price,…}] } const q = {}; list.forEach(r => { if (r && r.symbol) q[r.symbol] = r; }); let hit = 0; CM.mutate(() => { (CM.S.investments || []).forEach(i => { const row = q[i.symbol]; const px = row && (row.price || row.regularMarketPrice || row.c || (typeof row === 'number' ? row : null)); if (px) { i.currentPrice = +px; i.marketValue = Math.round(+px * (+i.shares || 0) * 100) / 100; hit++; } }); }); setStamp(new Date()); setNote(hit ? { ok:true, msg:`Updated ${hit} holding${hit > 1 ? 's' : ''} from the market.` } : { ok:false, msg:'Quote service returned no matches — prices unchanged.' }); }).catch(() => { setNote({ ok:false, msg:'Live prices aren’t connected in this preview. Wired server-side on deploy.' }); }).finally(() => setBusy(false)); } // "+ Add Investment" opens the source picker; cm:add-holding still opens the manual modal directly. React.useEffect(() => { const openPick = () => { setImpErr(null); setSrcPick(true); }; const openManual = () => setHoldModal({ idx: -1 }); window.addEventListener('cm:add-investment', openPick); window.addEventListener('cm:add-holding', openManual); return () => { window.removeEventListener('cm:add-investment', openPick); window.removeEventListener('cm:add-holding', openManual); }; }, []); // Statement import (shared by the source picker): parse → preview. Merge happens on confirm. const importFromFile = (file) => { setImpBusy(true); setImpErr(null); const reader = new FileReader(); reader.onerror = () => { setImpBusy(false); setImpErr('Could not read that file.'); }; reader.onload = () => { const b64 = String(reader.result).split(',')[1] || ''; fetch((window.CM_API_BASE || '/api') + '/parse-statement', { method:'POST', headers:{ 'Content-Type':'application/json' }, body:JSON.stringify({ pdf:b64 }) }) .then(r => r.json()).then(d => { const hasAccts = d && Array.isArray(d.subAccounts) && d.subAccounts.length; if (!hasAccts && !(d && d.docType === 'insurance')) { setImpErr((d && d.issuer && d.issuer !== 'Unknown') ? (d.issuer + ' document read, but no investment accounts were found.') : ((d && d.warnings && d.warnings[0]) || 'No investment accounts found in that document.')); return; } setSrcPick(false); setImportPrev(d); }) .catch(() => setImpErr('Could not read that statement — try a PDF export from your provider.')) .finally(() => setImpBusy(false)); }; reader.readAsDataURL(file); }; // The unified "Add Investment" flow (source picker → import preview / connect / manual). Rendered in // both the empty state and the populated page so "+ Add Investment" works either way. const addFlows = ( <> {srcPick && { setSrcPick(false); setHoldModal({ idx:-1 }); }} onConnect={() => { setSrcPick(false); setConnectOpen(true); }} onFile={importFromFile} onClose={() => setSrcPick(false)}/>} {importPrev && setImportPrev(null)}/>} {connectOpen && setConnectOpen(false)}/>} ); if (!invs.length) { return ( <> {addFlows}
No holdings yet
Add an investment or import a brokerage statement to see your portfolio.
 {holdModal && = 0 ? invs[holdModal.idx] : null} onClose={() => setHoldModal(null)}/>} ); } const gp = D.gainPct, gpStr = (gp >= 0 ? '+' : '') + gp.toFixed(2) + '%'; const KPIS = [ { feat:true, icon:, label:'Total Portfolio Value', value:fmt2(D.totalMV), delta:{ v:gpStr, sub:` · ${D.totalGain >= 0 ? '+' : '-'}${fmt(Math.abs(D.totalGain)).replace('$', '$')}`, neg:gp < 0 }, foot:'', spark:ramp(D.totalCost * 0.92, D.totalMV, 9) }, { icon:, tint:'var(--mint-100)', col:G, label:'Total Gain / Loss', value:(D.totalGain >= 0 ? '+' : '-') + fmt2(Math.abs(D.totalGain)).replace('$', '$'), delta:{ v:gpStr, neg:gp < 0 }, foot:'unrealized', spark:ramp(0, Math.max(1, D.totalGain), 9) }, { icon:, tint:'#E7EEFE', col:BL, label:'Invested Amount', value:fmt2(D.totalCost), foot:'total cost basis', spark:ramp(D.totalCost * 0.78, D.totalCost, 9) }, { icon:, tint:'#EDE7F9', col:PU, label:'Portfolio Return', value:gpStr, foot:'on cost basis', spark:ramp(0, Math.max(0.5, gp), 9) }, { icon:, tint:'var(--mint-100)', col:G, label:'Best Performer', value:D.best.symbol, delta:{ v:(D.best.gainPct >= 0 ? '+' : '') + D.best.gainPct.toFixed(1) + '%', neg:D.best.gainPct < 0 }, foot:'top mover', spark:ramp(D.best.cost * 0.9, D.best.mv, 9) }, { icon:, tint:'#FEF1DD', col:'#B5740F', label:'Holdings', value:String(D.rows.length), foot:`across ${D.brokers} account${D.brokers > 1 ? 's' : ''}`, spark:ramp(Math.max(1, D.rows.length - 2), D.rows.length, 9) }, ]; const perfVals = ramp(D.totalCost * 0.90, D.totalMV, 13); const perfInv = ramp(D.totalCost * 0.76, D.totalCost, 13); const donutType = D.byType.map(t => ({ color:t.color, label:t.label, value:fmt(t.value), pct:(t.value / D.totalMV * 100).toFixed(1) + '%', v:t.value, })); const brokerRows = D.byBroker.map(b => ({ ini:b.label.replace(/[^A-Za-z]/g, '').slice(0, 2).toUpperCase() || 'BR', label:b.label, color:G, value:b.value })); const accountRows = D.byAccount.map(a => ({ ini:(a.label === 'Non-Registered' ? 'NR' : a.label.slice(0, 4)), label:a.label, tag:REGISTERED.test(a.label) ? 'Registered' : null, color:a.color, value:a.value })); const ccyRows = D.byCcy.map(c => ({ ini:c.label, label:c.label === 'CAD' ? 'Canadian Dollar' : c.label === 'USD' ? 'US Dollar' : c.label, color:c.color, value:c.value })); /* AI insights — computed from the real portfolio shape */ const insights = []; if (D.topW >= 0.5) insights.push({ col:'#B5740F', bg:'#FEF1DD', icon:, t:'Concentration is high', s:`${D.rows[0].symbol} is ${(D.topW * 100).toFixed(0)}% of your portfolio. Consider trimming to reduce single-name risk.` }); else insights.push({ col:G, bg:'var(--mint-100)', icon:, t:'Reasonably diversified', s:`Your largest position (${D.rows[0].symbol}) is ${(D.topW * 100).toFixed(0)}% — risk is spread across ${D.rows.length} holdings.` }); if (D.cryptoW >= 0.15) insights.push({ col:'#B5740F', bg:'#FEF1DD', icon:, t:'Elevated crypto exposure', s:`Crypto is ${(D.cryptoW * 100).toFixed(0)}% of holdings — expect higher volatility than a typical balanced book.` }); insights.push({ col:G, bg:'var(--mint-100)', icon:, t:'Tax-sheltered share', s:`${(D.registeredW * 100).toFixed(0)}% of your portfolio sits in registered (TFSA/RRSP) accounts — keep growth assets here.` }); if (D.best) insights.push({ col:G, bg:'var(--mint-100)', icon:, t:`${D.best.symbol} is your top mover`, s:`Up ${D.best.gainPct.toFixed(1)}% on cost — ${fmt(D.best.gain)} of unrealized gain.` }); const insights3 = insights.slice(0, 3); /* holdings table (Holdings tab) */ const cols = [ { header:'Holding', cell:r => } primary={r.symbol} sub={r.name}/> }, { header:'Type', cell:r => {typeMeta(r.type).label} }, { header:'Account', cell:r => }, { header:'Shares', cell:r => {r.shares} }, { header:'Avg Cost', cell:r => {fmt2(r.avgCost)} }, { header:'Price', cell:r => {fmt2(r.price)} }, { header:'Market Value', cell:r => {fmt(r.mv)} }, { header:'Gain / Loss', cell:r => = 0 ? 'var(--green-600)' : 'var(--red-500)'} strong={(r.gain >= 0 ? '+' : '-') + fmt(Math.abs(r.gain)).replace('$', '$')} meta={(r.gain >= 0 ? '+' : '') + r.gainPct.toFixed(1) + '%'}/> }, { header:'', align:'right', cell:r => (
{r.fromStatement && STMT}
) }, ]; /* Holdings tab — filter / search / sort options (ported from reference build) */ const acctOpts = [...new Set(D.rows.map(r => r.broker))]; const ccyOpts = [...new Set(D.rows.map(r => r.currency))]; const hRows = D.rows.filter(r => { if (hType && r.type !== hType) return false; if (hAcct && r.broker !== hAcct) return false; if (hCcy && r.currency !== hCcy) return false; if (hq) { const s = hq.toLowerCase(); if (((r.symbol || '') + ' ' + (r.name || '')).toLowerCase().indexOf(s) < 0) return false; } return true; }).sort((a, b) => hSort === 'gain' ? b.gainPct - a.gainPct : hSort === 'name' ? a.symbol.localeCompare(b.symbol) : b.mv - a.mv); const asOf = stamp instanceof Date ? `Updated ${stamp.toLocaleTimeString('en-CA', { hour:'numeric', minute:'2-digit' })}` : `As of ${CM.FD(new Date())}`; /* ─── shared header (tabs + live controls) ─── */ const Tabs = (
{tabs.map(t =>
setTab(t)}>{t}
)}
{['CAD', 'USD'].map(c => )}
{asOf}
); const NoteBar = note && (
{note.ok ? : }{note.msg}
); return (
{Tabs} {NoteBar} {addFlows} {holdModal && = 0 ? invs[holdModal.idx] : null} onClose={() => setHoldModal(null)}/>} {delHold && { CM.mutate(() => (CM.S.investments || []).splice(delHold.idx, 1)); setDelHold(null); }} onClose={() => setDelHold(null)}/>} {tab === 'Portfolio' && <>
{KPIS.map((k, i) => )}
Portfolio Performance
Value vs invested cost · last 12 months
{['1M', '3M', '6M', 'YTD', '1Y'].map(t => )}
Portfolio Value Invested Cost
Asset Allocation
({ value:a.v, color:a.color }))} center={{ value:fmt(D.totalMV), label:'Total Value' }}/>
{D.byType.length} asset classes setTab('Analysis')}>Analyze
Holdings by Account
By brokerage
setTab('Holdings')}>View all
Account Type
Registered vs non-registered
{(D.registeredW * 100).toFixed(0)}% tax-sheltered
Currency Exposure
By holding value
Top Holdings
% of portfolio
setTab('Holdings')}>View all
{D.rows.slice(0, 5).map((h, i) => (
{h.name}
{h.symbol} · {h.account}
{(h.weight * 100).toFixed(1)}%
= 0 ? G : RD, display:'inline-flex', alignItems:'center', gap:2 }}> {h.gain >= 0 ? : }{Math.abs(h.gainPct).toFixed(1)}%
))}
Gain / Loss by Holding
% on cost
AI Investment Insights
Live
{insights3.map((it, i) => (
{it.icon}
{it.t}
{it.s}
))}
} {tab === 'Holdings' && <>
{fmt(D.totalMV)}
Market value · {D.rows.length} holdings
{fmt(D.totalCost)}
Total invested
= 0 ? G : RD }}>{(D.totalGain >= 0 ? '+' : '-') + fmt(Math.abs(D.totalGain)).replace('$', '$')}
Unrealized gain/loss
{D.brokers}
Brokerage accounts
{busy ? 'Refreshing…' : 'Refresh prices'}}>
setHq(e.target.value)}/>
{hRows.length} of {D.rows.length}
{hRows.length ? r.excluded ? { opacity:.45 } : undefined}/> :
No holdings match your filters.
} } {tab === 'Performance' && <>
Portfolio Performance
Value vs invested cost · last 12 months
{['1M', '3M', '6M', 'YTD', '1Y'].map(t => )}
Portfolio Value Invested Cost
Risk & Concentration
Concentration score (single-name + crypto weighting)
{D.risk}
{D.riskBand[0]}
{[ ['Largest position', `${D.rows[0].symbol} · ${(D.topW * 100).toFixed(1)}%`], ['Top 3 concentration', `${(D.top3W * 100).toFixed(1)}%`], ['Crypto allocation', `${(D.cryptoW * 100).toFixed(1)}%`], ['Registered (tax-sheltered)', `${(D.registeredW * 100).toFixed(1)}%`], ['Unrealized return', `${(D.gainPct >= 0 ? '+' : '') + D.gainPct.toFixed(1)}%`], ].map(([k, v], i) => (
{k} {v}
))}
Allocation by Asset Class
({ value:a.v, color:a.color }))} center={{ value:fmt(D.totalMV), label:'Total Value' }}/>
Gain / Loss by Holding
% on cost
AI Investment Insights
Live
{insights.map((it, i) => (
{it.icon}
{it.t}
{it.s}
))}
} {tab === 'Allocation' && <>
Asset Allocation
By asset class
({ value:a.v, color:a.color }))} center={{ value:fmt(D.totalMV), label:'Total Value' }}/>
Holdings by Account
By brokerage
{(D.registeredW * 100).toFixed(0)}% tax-sheltered
Account Type
Registered vs non-registered
Currency Exposure
By holding value
} {tab === 'Market Context' && } {/* footer feature band */}
{FOOT.map((f, i) => (
{f.icon}
{f.t}
{f.s}
))}
); } /* ───────────────── Market Context tab ───────────────── Live macro context for the portfolio: GoC yields, CAD/USD FX, plain-English drivers, and holding-aware market news. Lazy-loaded on first open, cached in MC_CACHE for the session. */ let MC_CACHE = null; function mcRelTime(iso) { const t = Date.parse(iso || ''); if (!t) return ''; const s = Math.max(0, (Date.now() - t) / 1000); if (s < 3600) return Math.round(s / 60) + 'm ago'; if (s < 86400) return Math.round(s / 3600) + 'h ago'; return Math.round(s / 86400) + 'd ago'; } const MC_SENT = { bullish: { bg:'var(--mint-100)', col:'var(--green-600)', label:'Bullish' }, bearish: { bg:'#FBE9E7', col:'#C0392B', label:'Bearish' }, neutral: { bg:'#EEF1EF', col:'var(--ink-500)', label:'Neutral' }, }; function McSkeleton({ h = 120 }) { return
; } /* Small SVG yield curve (2Y/5Y/10Y/30Y) in the file's existing line-chart style. */ function McYieldCurve({ data }) { const pts = data.filter(d => d && isFinite(d.value)); if (pts.length < 2) return null; const W = 320, H = 132, padX = 30, padY = 26; const vals = pts.map(p => p.value); const min = Math.min(...vals), max = Math.max(...vals), span = (max - min) || 1; const x = i => padX + i * ((W - padX * 2) / (pts.length - 1)); const y = v => H - padY - ((v - min) / span) * (H - padY * 2); const line = pts.map((p, i) => `${i ? 'L' : 'M'}${x(i).toFixed(1)} ${y(p.value).toFixed(1)}`).join(' '); return ( {pts.map((p, i) => ( {p.value.toFixed(2)}% {p.label} ))} ); } function McExplain({ children }) { return
{children}
; } function McNewsList({ articles }) { const [n, setN] = React.useState(8); return (
{articles.slice(0, n).map((a, i) => { const s = MC_SENT[a.sentiment] || MC_SENT.neutral; return (
{a.title}
{a.source}{a.publishedAt ? (' · ' + mcRelTime(a.publishedAt)) : ''}
{s.label} ); })} {n < articles.length && (
)}
); } function MarketContext({ invs }) { const [st, setSt] = React.useState(MC_CACHE || { loading:true }); React.useEffect(() => { if (MC_CACHE) { setSt(MC_CACHE); return; } let alive = true; const tickers = (invs || []).map(i => i.symbol).filter(Boolean).slice(0, 10).join(','); const getJSON = u => fetch(u).then(r => r.json()).catch(() => null); Promise.all([ getJSON('/api/yields'), getJSON('/api/fx?base=USD"e=CAD'), getJSON('/api/news' + (tickers ? ('?tickers=' + encodeURIComponent(tickers)) : '')), ]).then(([yields, fx, news]) => { if (!alive) return; const out = { loading:false, yields, fx, news }; MC_CACHE = out; setSt(out); }).catch(() => { if (alive) setSt({ loading:false }); }); return () => { alive = false; }; }, []); const yData = (st.yields && st.yields.data) ? ['2Y', '5Y', '10Y', '30Y', 'Long'].map(k => { const o = st.yields.data[k]; return o && o.value != null ? { label: k === 'Long' ? '30Y' : k, value:+o.value } : null; }).filter(Boolean) : []; const y10 = yData.find(d => d.label === '10Y'); const fxRate = st.fx && st.fx.rate; const fxAsOf = st.fx && st.fx.ts ? new Date(st.fx.ts).toISOString().slice(0, 10) : null; const articles = (st.news && Array.isArray(st.news.articles)) ? st.news.articles : []; return (
Government of Canada Bond Yields
{st.yields && st.yields.asOf ? ('Benchmark curve · ' + st.yields.asOf) : 'Benchmark curve'}
{st.loading ? : yData.length ? :
Yield data unavailable right now.
} Rising government yields make bonds more attractive and can pressure stock valuations.
USD → CAD Exchange Rate
{fxAsOf ? ('As of ' + fxAsOf) : 'Live rate'}
{st.loading ? : fxRate ?
{(+fxRate).toFixed(4)}
CAD per 1 USD
:
Exchange rate unavailable right now.
} A weaker Canadian dollar increases the CAD value of your US holdings, and vice versa.
What's Moving Markets
{[ { ic:, t:'Interest Rates', s: y10 ? `Canada's 10-year yield is ${y10.value.toFixed(2)}%. Higher rates lift borrowing costs and tend to weigh on stock and bond prices.` : 'Central-bank rates set borrowing costs; when they rise, stock and bond prices usually come under pressure.' }, { ic:, t:'Inflation', s:'When prices rise faster than expected, central banks keep rates higher for longer — a headwind for richly-valued growth stocks.' }, { ic:, t:'Currency', s: fxRate ? `At ${(+fxRate).toFixed(4)} CAD/USD, every US dollar of holdings converts to about $${(+fxRate).toFixed(2)} CAD.` : 'A weaker loonie lifts the CAD value of your US holdings; a stronger loonie trims it.' }, ].map((c, i) => (
{c.ic}
{c.t}
{c.s}
 ))}
Market News
{articles.length ? ('Latest headlines' + (st.news && st.news.source ? (' · ' + st.news.source) : '')) : 'Headlines for your holdings'}
{st.loading ?
: articles.length ? :
Market news unavailable right now.
}
); } /* ───────────────── Add / Edit Holding modal ───────────────── Inline mint modal (matches the CardModal pattern) — replaces the old native prompt() flow. Ticker blank → isFund:true (live quote/news are skipped for it). Value auto-calcs units×price but stays editable. `account` = register type, `broker` = account/source (matches derive()). */ const HOLD_TYPES = [['stock', 'Stock'], ['etf', 'ETF'], ['mutual_fund', 'Mutual Fund'], ['bond', 'Bond'], ['crypto', 'Crypto'], ['cash', 'Cash'], ['other', 'Other']]; const HOLD_SOURCES = ['Wealthsimple', 'Questrade', 'Sun Life', 'Manulife', 'Moomoo', 'TD', 'RBC', 'BMO', 'Scotiabank', 'CIBC', 'National Bank']; const HOLD_REGISTERS = ['Non-registered', 'RRSP', 'TFSA', 'FHSA', 'RESP', 'DPSP', 'Pension', 'LIRA']; /* row-action icons + inline confirm modal (no native confirm) */ const ICON_BTN = { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 28, height: 28, borderRadius: 8, border: '1px solid var(--line)', background: '#fff', color: 'var(--ink-500)', cursor: 'pointer', padding: 0 }; const ICON_BTN_DANGER = Object.assign({}, ICON_BTN, { color: RD }); function IcEdit() { return ; } function IcEye() { return ; } function IcEyeOff() { return ; } function IcTrash() { return ; } function ConfirmModal({ title, message, confirmLabel, onConfirm, onClose }) { return (
e.stopPropagation()} className="cm-card" style={{ width: 420, maxWidth: '100%', borderRadius: 18, padding: '22px 24px', boxShadow: '0 24px 64px rgba(13,42,33,.28)' }}>
{title}
{message}
); } /* ───────────────── Investment Accounts (imported from statements) ───────────────── */ const REG_COLORS_INV = { TFSA: G, RRSP: BL, RESP: AM, FHSA: PINK, LIRA: TEAL, RRIF: INDIGO, DPSP: PU, MBC: '#B5740F', Pension: PU }; function InvestmentAccountsCard({ CM, fmt, displayCcy, usdToCad }) { const accts = CM.S.investmentAccounts || []; const conv = (v, ccy) => fxConv(v, ccy, displayCcy || 'CAD', usdToCad || 0); const [busy, setBusy] = React.useState(false); const [note, setNote] = React.useState(null); const [open, setOpen] = React.useState({}); const fileRef = React.useRef(null); const onFile = (e) => { const file = e.target.files && e.target.files[0]; e.target.value = ''; if (!file) return; setBusy(true); setNote(null); const reader = new FileReader(); reader.onerror = () => { setBusy(false); setNote({ ok: false, msg: 'Could not read that file.' }); }; reader.onload = () => { const b64 = String(reader.result).split(',')[1] || ''; fetch((window.CM_API_BASE || '/api') + '/parse-statement', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ pdf: b64 }) }) .then(r => r.json()).then(d => { // Insurance document → store as a policy (Insurance tab reads S.insurance; premium monthly). if (d && d.docType === 'insurance' && d.insurance) { const ins = d.insurance; const cov = ins.type === 'auto' ? [ins.vehicle && ins.vehicle.description, (ins.deductibles && (ins.deductibles.collision || ins.deductibles.comprehensive)) ? ('Deductible $' + (ins.deductibles.collision || ins.deductibles.comprehensive)) : null, (ins.coverages || []).join(', ')].filter(Boolean).join(' · ') : ((ins.coverages || []).join(', ') || (ins.type + ' policy')); CM.mutate(() => { (CM.S.insurance = CM.S.insurance || []).push({ name: ins.insurer + (ins.type === 'home' ? ' Home' : ins.type === 'auto' ? ' Auto' : '') + ' Insurance', type: ins.type, provider: ins.insurer, premium: ins.premium ? Math.round(ins.premium / 12 * 100) / 100 : 0, frequency: 'Monthly', renewal: ins.renewalDate || ins.expiryDate || null, coverage: 0, coverageText: cov, policyNum: ins.policyNumber, policy: ins.policyNumber, effectiveDate: ins.effectiveDate, expiryDate: ins.expiryDate, termPremium: ins.premium, vehicle: ins.vehicle, deductibles: ins.deductibles, coverages: ins.coverages, fromStatement: true, }); }); try { CM.logActivity && CM.logActivity('imported an insurance policy', ins.insurer + ' · ' + ins.type, { cat: 'insurance' }); } catch (e) {} setNote({ ok: true, msg: 'Imported a ' + ins.type + ' insurance policy from ' + ins.insurer + ' — see the Insurance tab.' }); return; } const subs = (d && d.subAccounts) || []; if (!subs.length) { setNote({ ok: false, msg: (d && d.issuer && d.issuer !== 'Unknown') ? (d.issuer + ' statement read, but no investment accounts were found.') : ((d && d.warnings && d.warnings[0]) || 'No investment accounts found in that statement.') }); return; } const src = d.provider || d.issuer || 'Statement'; CM.mutate(() => { let list = (CM.S.investmentAccounts || []).filter(a => a.source !== src); // re-import replaces same provider for (const sa of subs) list.push(normalizeAccount(sa, { inputMethod: 'statement', source: src, importedAt: Date.now() })); CM.S.investmentAccounts = list; }); try { CM.logActivity && CM.logActivity('imported a statement', src + ' · ' + subs.length + ' accounts', { cat: 'investments' }); } catch (e) {} setNote({ ok: true, msg: 'Imported ' + subs.length + ' account' + (subs.length > 1 ? 's' : '') + ' from ' + (d.issuer || src) + '.' }); }) .catch(() => setNote({ ok: false, msg: 'Could not read that statement — try a PDF export from your provider.' })) .finally(() => setBusy(false)); }; reader.readAsDataURL(file); }; const removeAcct = (i) => CM.mutate(() => (CM.S.investmentAccounts || []).splice(i, 1)); const total = accts.reduce((s, a) => s + conv(+a.balance || 0, a.currency), 0); return (
Investment Accounts
{accts.length ? (accts.length + ' account' + (accts.length > 1 ? 's' : '') + ' · ' + fmt(total)) : 'Import a brokerage or group-retirement statement'}
{note &&
{note.msg}
} {!accts.length ?
No imported accounts yet. Import a PDF statement (Sun Life, Questrade, Wealthsimple…) to pull in your plans & holdings.
: accts.map((a, i) => { const reg = REG_COLORS_INV[a.planType] || SL; const isOpen = !!open[i]; return (
{a.planType}
{a.planName}{a.fromStatement && STMT}
{a.source} · {a.currency}{a.registered ? ' · Registered' : ''}{a.holdings && a.holdings.length ? ' · ' + a.holdings.length + ' holdings' : ''}
{fmt(conv(+a.balance || 0, a.currency))}
{a.holdings && a.holdings.length ? : null}
{isOpen && a.holdings && a.holdings.length ? (
{a.holdings.map((h, j) => (
{h.fundName}{h.assetClass ? · {h.assetClass} : null} {fmt(conv(+h.value || 0, h.currency || a.currency))}
))}
Subtotal{fmt(a.holdings.reduce((s, h) => s + conv(+h.value || 0, h.currency || a.currency), 0))}
) : null}
); })} ); } function AddHoldingModal({ CM, idx, holding, onClose }) { const adding = idx == null || idx < 0; const h = holding || {}; const num = (v) => (v != null && v !== '' ? String(v) : ''); const [f, setF] = React.useState(() => ({ name: h.name || '', ticker: h.symbol && h.symbol !== '—' ? h.symbol : '', currency: (h.currency || 'CAD').toUpperCase(), type: h.type || 'stock', source: h.broker || 'Wealthsimple', register: h.account || 'Non-registered', units: num(h.shares), price: num(h.currentPrice != null ? h.currentPrice : h.avgCost), value: num(h.marketValue), })); const [valTouched, setValTouched] = React.useState(h.marketValue != null); const [err, setErr] = React.useState(''); React.useEffect(() => { if (valTouched) return; const u = parseFloat(f.units), p = parseFloat(f.price); if (isNaN(u) || isNaN(p)) return; setF((s) => ({ ...s, value: String(Math.round(u * p * 100) / 100) })); }, [f.units, f.price]); const set = (k) => (e) => { if (k === 'value') setValTouched(true); setF((s) => ({ ...s, [k]: e.target.value })); }; // Ticker auto-fill: on blur, look up the live price via /api/quote and fill it. Quote returns price // only (no currency/exchange), so currency stays a manual field. Not found → manual price + isFund. const [live, setLive] = React.useState(null); // null | 'loading' | 'ok' | 'miss' const onTickerBlur = () => { const t = (f.ticker || '').trim().toUpperCase(); if (!t) { setLive(null); return; } setLive('loading'); CM.api.quote(t).then((d) => { const row = ((d && d.quotes) || []).find((q) => q && String(q.symbol).toUpperCase() === t); const px = row && (row.price || row.regularMarketPrice || row.c); if (px) { setLive('ok'); setValTouched(false); setF((s) => ({ ...s, price: String(+px) })); } else { setLive('miss'); } }).catch(() => setLive('miss')); }; const inp = { width: '100%', fontFamily: 'inherit', fontSize: 13.5, color: 'var(--ink-900)', border: '1px solid var(--line)', borderRadius: 10, padding: '9px 11px', background: '#fff', outline: 'none', boxSizing: 'border-box' }; const lab = { fontSize: 11, fontWeight: 700, letterSpacing: '.06em', textTransform: 'uppercase', color: 'var(--ink-400)', margin: '0 0 5px' }; const Field = ({ label, children, full }) =>
{label}
{children}
; const save = () => { if (!f.name.trim()) { setErr('Investment name is required.'); return; } const ticker = (f.ticker || '').trim().toUpperCase(); const units = parseFloat(f.units) || 0, price = parseFloat(f.price) || 0; const value = f.value !== '' ? (parseFloat(f.value) || 0) : Math.round(units * price * 100) / 100; // Converge through the shared normalizer so manual records match imported/integration ones. const rec = normalizeHolding({ symbol: ticker, name: f.name.trim(), type: f.type, shares: units, avgCost: (h.avgCost != null ? +h.avgCost : price), currentPrice: price, marketValue: value, account: f.register, broker: f.source, currency: f.currency, isFund: !ticker, excluded: !!h.excluded, }, { inputMethod: (!adding && h.inputMethod) ? h.inputMethod : 'manual', source: f.source }); if (!adding && h.fromStatement) rec.fromStatement = true; // keep statement origin when editing an import CM.mutate(function () { const arr = (CM.S.investments = CM.S.investments || []); if (adding) arr.push(rec); else Object.assign(arr[idx], rec); }); try { CM.logActivity && CM.logActivity(adding ? 'added a holding' : 'updated a holding', rec.name, { cat: 'investments' }); } catch (e) {} onClose(); }; return (
e.stopPropagation()} className="cm-card" style={{ width: 600, maxWidth: '100%', maxHeight: '92vh', overflowY: 'auto', borderRadius: 18, padding: '22px 24px', boxShadow: '0 24px 64px rgba(13,42,33,.28)' }}>
{adding ? 'Add Holding' : 'Edit Holding'}
Leave the ticker blank for mutual funds — Clear Mint skips live quotes & news for those.
{err &&
{err}
}
{ setLive(null); set('ticker')(e); }} onBlur={onTickerBlur} placeholder="blank for funds"/> {live === 'loading' &&
Looking up price…
} {live === 'ok' &&
live price ✓
} {live === 'miss' &&
No live quote — enter price manually.
} {HOLD_SOURCES.map((s) =>
); } /* ───────────────── unified "Add Investment" entry: source picker (3 paths) ───────────────── */ function SourcePickerModal({ onManual, onConnect, onFile, busy, error, onClose }) { const fileRef = React.useRef(null); React.useEffect(() => { const onKey = e => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [onClose]); const pick = (e) => { const file = e.target.files && e.target.files[0]; e.target.value = ''; if (file) onFile(file); }; const Card = ({ icon, title, sub, onClick, tint, color }) => ( ); return (
e.stopPropagation()} className="cm-card" style={{ width:520, maxWidth:'100%', borderRadius:18, padding:'22px 24px', boxShadow:'0 24px 64px rgba(13,42,33,.28)' }}>
Add Investment
Choose how to add holdings — all three keep your portfolio in one place.
{error &&
{error}
}
: } tint="var(--mint-100)" color={G} title={busy ? 'Reading statement…' : 'Import from statement'} sub="Upload a PDF, OFX or CSV — we’ll parse accounts & holdings for you to review." onClick={() => !busy && fileRef.current && fileRef.current.click()}/> } tint="#E7EEFE" color={BL} title="Connect an account" sub="Wealthsimple, Questrade, Sun Life, Manulife, Moomoo and more." onClick={onConnect}/> } tint="#EDE7F9" color={PU} title="Add manually" sub="Enter a holding by hand — type a ticker to auto-fill its live price." onClick={onManual}/>
); } /* Statement import → review/select before merge. Investment statements list accounts + holdings with checkboxes (default all on); confirming writes the selection to S.investmentAccounts via writeAccounts. */ function ImportPreviewModal({ data, CM, onClose }) { const accts = (data && data.subAccounts) || []; const source = (data && (data.provider || data.issuer)) || 'Statement'; const warnings = (data && data.warnings) || []; const isInsurance = data && data.docType === 'insurance'; const [sel, setSel] = React.useState(() => accts.map(a => ({ on:true, holds:(a.holdings || []).map(() => true) }))); React.useEffect(() => { const onKey = e => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [onClose]); const toggleAcc = i => setSel(s => s.map((x, j) => j === i ? Object.assign({}, x, { on:!x.on }) : x)); const toggleHold = (i, k) => setSel(s => s.map((x, j) => j === i ? Object.assign({}, x, { holds:x.holds.map((b, m) => m === k ? !b : b) }) : x)); const chosenCount = sel.filter(x => x.on).length; const confirm = () => { const chosen = accts.map((a, i) => ({ a, s:sel[i] })).filter(p => p.s && p.s.on).map(p => { const holds = (p.a.holdings || []).filter((_, k) => p.s.holds[k]); return normalizeAccount(Object.assign({}, p.a, { holdings: holds }), { inputMethod:'statement', source, importedAt: Date.now() }); }); writeAccounts(CM, chosen, source); try { CM.logActivity && CM.logActivity('imported a statement', source + ' · ' + chosen.length + ' account' + (chosen.length === 1 ? '' : 's'), { cat:'investments' }); } catch (e) {} onClose(); }; const fmtMoney = (v, ccy) => (ccy === 'USD' ? 'US$' : '$') + Number(v || 0).toLocaleString('en-CA', { minimumFractionDigits:2, maximumFractionDigits:2 }); return (
e.stopPropagation()} className="cm-card" style={{ width:600, maxWidth:'100%', maxHeight:'90vh', overflowY:'auto', borderRadius:18, padding:'22px 24px', boxShadow:'0 24px 64px rgba(13,42,33,.28)' }}>
Review import
Parsed from {source} — untick anything you don’t want to import.
{warnings.length > 0 && (
Parser notes
{warnings.map((w, i) =>
• {w}
)}
)} {isInsurance ? (
This looks like an insurance policy, not an investment statement. Import it from the Insurance tab instead.
) : !accts.length ? (
No investment accounts were found in this document.
) : (
{accts.map((a, i) => (
{a.holdings && a.holdings.length ? (
{a.holdings.map((h, k) => ( ))}
) : null}
))}
)}
{!isInsurance && accts.length > 0 && }
); } /* "Connect an account" — integrations. No live broker connection exists yet, so this is an honest Coming-soon + waitlist (interest stored in S.brokerWaitlist), NOT a faked OAuth flow. connectBroker() is the single pluggable hook: wiring Flinks Connect later means filling it in and flipping LIVE — the cards already exist, so no UI rewrite. (Project note: Flinks Connect is the preferred provider.) */ const BROKERS = [ { id:'wealthsimple', name:'Wealthsimple' }, { id:'questrade', name:'Questrade' }, { id:'sunlife', name:'Sun Life' }, { id:'manulife', name:'Manulife' }, { id:'moomoo', name:'Moomoo' }, { id:'flinks', name:'Other (Flinks)' }, ]; const INTEGRATIONS_LIVE = false; // flip to true once connectBroker() is wired to Flinks Connect function connectBroker(/* providerId, CM */) { // TODO(integration): launch Flinks Connect, e.g. window.open(flinksConnectUrl(providerId), 'cm-connect'). // On success, run parsed accounts/holdings through normalizeAccount/normalizeHolding + writeAccounts. } function ConnectAccountModal({ CM, onClose }) { React.useEffect(() => { const onKey = e => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [onClose]); const waitlist = (CM.S && CM.S.brokerWaitlist) || {}; const [, force] = React.useState(0); const toggleWait = (id) => { CM.mutate(() => { const w = (CM.S.brokerWaitlist = CM.S.brokerWaitlist || {}); w[id] = !w[id]; }); force(n => n + 1); }; const onConnect = (id) => { if (INTEGRATIONS_LIVE) connectBroker(id, CM); }; return (
e.stopPropagation()} className="cm-card" style={{ width:540, maxWidth:'100%', maxHeight:'90vh', overflowY:'auto', borderRadius:18, padding:'22px 24px', boxShadow:'0 24px 64px rgba(13,42,33,.28)' }}>
Connect an account
Secure bank-grade connections are coming soon. Join the waitlist and we’ll turn yours on first.
{BROKERS.map(b => { const on = !!waitlist[b.id]; return (
{b.name.replace(/[^A-Za-z]/g, '').slice(0, 2).toUpperCase()}
{b.name}
{INTEGRATIONS_LIVE ? 'Ready to connect' : 'Coming soon'}
{INTEGRATIONS_LIVE ? : }
); })}
); } window.PageInvestments = PageInvestments; /* "+ Add Investment" (app header / empty state) → open the unified source picker (import / connect / manual). PageInvestments listens for cm:add-investment. No native prompts. */ window.addInvestmentPrompt = function(){ if(window.CMAccess && !CMAccess.requirePremium('investments','Investment tracking')) return; try{ window.dispatchEvent(new CustomEvent('cm:add-investment')); }catch(e){} }; })();