// ============================================================================ // KoiFi Dashboard prototype — WIDGET REGISTRY (S / M / L variants) — ELEVATED // Warm, premium, restrained. Gradient-accented data viz; clean white cards; // one gradient "moment" (Add / Mascot). Cormorant display + Inter utility. // Depends on: primitives.jsx (Icon, Pill), tokens.js (window.KOI) // ============================================================================ const PC = () => window.KOI[window.__koiTheme || 'light']; const PSERIF = "'Cormorant Garamond', serif"; const PSANS = "'Inter', system-ui, sans-serif"; const PGRAD = 'linear-gradient(135deg,#DFBBA1 0%,#C9987E 52%,#B0855F 100%)'; const fmt = (v) => v.toLocaleString('en-US'); let _uid = 0; const uid = () => `k${++_uid}`; // one-time keyframes for tasteful motion (function injectKeyframes() { if (document.getElementById('koi-kf')) return; const s = document.createElement('style'); s.id = 'koi-kf'; s.textContent = ` @keyframes koiSheen { 0%{transform:translateX(-120%)} 60%,100%{transform:translateX(220%)} } @keyframes koiPulse { 0%,100%{opacity:.55;transform:scale(1)} 50%{opacity:.9;transform:scale(1.06)} } @keyframes koiRise { from{transform:translateY(12px)} to{transform:none} } @keyframes koiWiggle { 0%,86%,100%{transform:rotate(0)} 90%{transform:rotate(-9deg)} 94%{transform:rotate(9deg)} } .koi-press { transition: transform .12s ease, box-shadow .12s ease; } .koi-press:active { transform: scale(.975); } .koi-private .koi-fig { filter: blur(8px); transition: filter .2s; } @media (prefers-reduced-motion: no-preference) { .koi-stagger > * { animation: koiRise .5s cubic-bezier(0.2,0,0,1) both; } .koi-stagger > *:nth-child(1){animation-delay:.03s} .koi-stagger > *:nth-child(2){animation-delay:.07s} .koi-stagger > *:nth-child(3){animation-delay:.12s} .koi-stagger > *:nth-child(4){animation-delay:.17s} .koi-stagger > *:nth-child(5){animation-delay:.22s} .koi-stagger > *:nth-child(6){animation-delay:.27s} .koi-stagger > *:nth-child(7){animation-delay:.32s} .koi-stagger > *:nth-child(8){animation-delay:.37s} .koi-stagger > *:nth-child(n+9){animation-delay:.42s} } `; document.head.appendChild(s); })(); // —— card shell: hairline + warm layered shadow + faint top sheen —— const PCard = ({ children, pad = 16, style = {}, glow = false }) => { const c = PC(); return (
{children}
); }; const PLabel = ({ children, icon, accent = false }) => { const c = PC(); return (
{icon && }{children}
); }; // delta chip with soft tint const Delta = ({ up = true, children, size = 12 }) => { const c = PC(); const col = up ? c.success : c.danger; return ( {up ? '▲' : '▼'}{children} ); }; // gradient ring with soft glow + rounded cap const PRing = ({ pct, size = 56, stroke = 5, from = '#D8B098', to = '#B0855F', track, children }) => { const c = PC(); const id = uid(); const r = size / 2 - stroke; const circ = 2 * Math.PI * r; return (
{children}
); }; // area sparkline with gradient fill + glowing endpoint const PSpark = ({ from = '#4A9B6F', h = 44, area = true, glow = true, pts }) => { const id = uid(); const line = pts || 'M0 38 C40 36 70 30 110 27 S190 18 300 8'; const endM = (pts || line).match(/([\d.]+)\s+([\d.]+)\s*$/); const ex = endM ? parseFloat(endM[1]) : 300; const ey = endM ? parseFloat(endM[2]) : 8; return ( {area && } {glow && } {glow && } ); }; const PPeriods = ({ sel = 2 }) => { const c = PC(); return (
{['1D', '1W', '1M', '3M', '6M', '1Y'].map((p, i) => (
{p}
))}
); }; // count-up animation for money figures (ease-out cubic) const Count = ({ value, dur = 950, decimals = 0 }) => { // Init to target so an off-screen/throttled iframe (website hero) never shows a stuck 0. // When on-screen, the rAF below fires and animates 0→value normally. const [v, setV] = React.useState(value); React.useEffect(() => { let raf; const t0 = performance.now(); const tick = (t) => { const p = Math.min(1, (t - t0) / dur); const e = 1 - Math.pow(1 - p, 3); setV(value * e); if (p < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [value]); return {v.toLocaleString('en-US', { minimumFractionDigits: decimals, maximumFractionDigits: decimals })}; }; // ============================================================================ // ADD TRANSACTION — hero launchpad (the gradient moment) // ============================================================================ const brandBg = () => window.__koiTheme === 'dark' ? 'linear-gradient(135deg,#B58A64 0%,#8A6547 52%,#664A34 100%)' : PGRAD; const wAddExpense = (size) => { const compact = size === 'S'; const GB = brandBg(); const Plus = ({ s }) => (
); if (compact) return (
Add
); return (
{/* decorative koi ripples */}
{/* sheen sweep */}
Add a transaction
Log spending in a tap
{/* quick actions */}
{[['arrowD', 'Expense'], ['arrowU', 'Income'], ['camera', 'Scan']].map(([ic, t]) => (
{t}
))}
); }; // ============================================================================ // NET WORTH (Large = live period pills) // ============================================================================ const NW_PERIODS = [ { k: '1D', label: 'today', delta: '0.3%', up: true, pts: 'M0 30 L50 34 L100 26 L150 33 L200 23 L250 29 L300 21' }, { k: '1W', label: '7 days', delta: '1.1%', up: true, pts: 'M0 40 L60 37 L120 39 L180 31 L240 27 L300 24' }, { k: '1M', label: '30 days', delta: '₴4,280', up: true, pts: 'M0 46 C40 44 70 36 110 32 S190 20 300 10' }, { k: '3M', label: '3 months', delta: '5.8%', up: true, pts: 'M0 50 C60 48 120 40 180 30 S260 14 300 8' }, { k: '6M', label: '6 months', delta: '9.2%', up: true, pts: 'M0 52 C70 50 130 44 190 28 S270 12 300 6' }, { k: '1Y', label: '1 year', delta: '14.6%', up: true, pts: 'M0 54 C80 52 140 42 200 22 S280 8 300 4' }, ]; const NetWorthLive = () => { const c = PC(); const [pi, setPi] = React.useState(2); const p = NW_PERIODS[pi]; return (
Net worth
₴
{p.delta}
past {p.label}today
{NW_PERIODS.map((x, i) => (
setPi(i)} className="koi-press" style={{ cursor: 'pointer', flex: 1, textAlign: 'center', fontSize: 11.5, padding: '6px 0', borderRadius: 8, background: i === pi ? 'rgba(201,152,126,0.16)' : 'transparent', color: i === pi ? c.koiGoldDark : c.ts, fontWeight: i === pi ? 700 : 500 }}>{x.k}
))}
); }; const wNetWorth = (size) => { const c = PC(); if (size === 'L') return ; if (size === 'S') return ( Net worth
₴142.8k
2.4%
 ); return (
Net worth
₴
2.4%
▲ ₴4,280 over 30 days
); }; // ============================================================================ // CASH FLOW // ============================================================================ const wCashFlow = (size) => { const c = PC(); if (size === 'S') return ( Cash flow
+₴21.9k
net this month
 ); const flowRow = (
{[['Income', '₴54,000', c.success, 'arrowU'], ['Expenses', '₴32,140', c.danger, 'arrowD']].map(([l, v, col, ic]) => (
{l}
{v}
))}
); return (
Cash flow
+₴21,860
{flowRow} {size === 'L' && (
{[[3200, 2400], [3400, 2800], [4100, 2600], [5100, 3400], [4800, 2900], [5400, 3120]].map(([inc, exp], i) => (
{['Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr'][i]}
))}
)} ); }; // ============================================================================ // BUDGET // ============================================================================ const wBudget = (size) => { const c = PC(); if (size === 'S') return ( Budget
72
Good
3 of 6 on track
 ); return ( Quick budget
72
Good shape
3 on track 2 close 1 over
{size === 'L' && (
{[['Groceries', 0.92, c.danger], ['Transport', 0.78, '#C9872A'], ['Dining', 0.45, c.success]].map(([n, p, col]) => (
{n}{Math.round(p * 100)}%
))}
)} ); }; // ============================================================================ // PORTFOLIO // ============================================================================ const ALLOC = [['Stocks', 50, '#B0855F'], ['Crypto', 25, '#5E9E86'], ['Bonds', 15, '#7A95B8'], ['Other', 10, '#9B84C4']]; const wPortfolio = (size) => { const c = PC(); if (size === 'S') return ( Portfolio
₴284.5k
12.4%
 ); const bar = (
{ALLOC.map(([n, p, col]) =>
)}
); return (
Portfolio
12.4%
₴284,500
{size === 'L' &&
} {bar}
{ALLOC.map(([n, p, col]) => ( {n} {p}% ))}
); }; // ============================================================================ // GOALS // ============================================================================ const GOALS = [['Emergency Fund', 4200, 10000, 0.42, 'on track'], ['Vacation', 1200, 3000, 0.40, 'on track'], ['New Laptop', 800, 2500, 0.32, 'behind']]; const wGoals = (size) => { const c = PC(); if (size === 'S') { const rings = [[0.42, '#B0855F'], [0.40, '#C9987E'], [0.32, '#D8B098']]; return ( Goals
{rings.map(([pp, col], i) => { const r = 21 - i * 7; const circ = 2 * Math.PI * r; return ( ); })}
3
3 goals
38% funded
 ); } return ( Goals
{GOALS.map(([n, cur, tgt, p, tag], i) => (
{Math.round(p * 100)}%
{n}
{tag}
₴{fmt(cur)} / ₴{fmt(tgt)}
{i < GOALS.length - 1 &&
}
))}
); }; // ============================================================================ // FINANCIAL HEALTH // ============================================================================ const DIMS = [['Emergency fund', 38, '#C94A4A'], ['Debt', 55, '#C9872A'], ['Spending', 72, '#8FB339'], ['Savings', 80, '#4A9B6F'], ['Goals', 84, '#3A9B6F']]; const wHealth = (size) => { const c = PC(); if (size === 'S') return ( Health
78
On the right
track
 ); return (
78
Financial health
On the right track
{DIMS.map(([n, v, col]) => (
{n}
{v}%
))}
); }; // ============================================================================ // WATCHLIST // ============================================================================ const WL = [['AAPL', 'NASDAQ', '$228.40', 1.2, 'M8 20 L14 15 L20 17 L26 9 L32 12'], ['BTC', 'crypto', '$68,120', -2.4, 'M8 10 L14 13 L20 11 L26 16 L32 18'], ['TSLA', 'NASDAQ', '$251.10', 3.1, 'M8 19 L14 16 L20 14 L26 11 L32 6'], ['ETH', 'crypto', '$3,540', 0.8, 'M8 14 L14 13 L20 15 L26 11 L32 12']]; const wWatchlist = (size) => { const c = PC(); if (size === 'S') { const [s, k, p, ch] = WL[0]; return ( Watchlist
{s}
{p}
= 0} size={11}>{Math.abs(ch)}%
 ); } return (
Watchlist
{WL.map(([s, k, p, ch, spark], i) => { const up = ch >= 0; const col = up ? c.success : c.danger; return (
{s}
{k}
{p}
{Math.abs(ch)}%
); })}
); }; // ============================================================================ // WISDOM // ============================================================================ const wWisdom = () => { const c = PC(); const dark = (window.__koiTheme === 'dark'); return (
“
Wisdom of the day
Do not save what is left after spending, but spend what is left after saving.
— Warren Buffett
); }; // ============================================================================ // NEWS BRIEF // ============================================================================ const wNews = (size) => { const c = PC(); if (size === 'S') return ( Today's brief
Markets edge up; UAH steady
Read →
 ); return (
Today's brief
Markets
Markets edge up on rate-cut hopes; the hryvnia holds steady against the dollar.
3 stories · 2 min read
Read →
); }; // ============================================================================ // REPORTS // ============================================================================ // warm heat scale n100 → koiGold-dark const heatCol = (t) => { const dark = (window.__koiTheme === 'dark'); const a = dark ? [48, 44, 40] : [243, 235, 225], b = [176, 133, 95]; const l = (i) => Math.round(a[i] + (b[i] - a[i]) * t); return `rgb(${l(0)},${l(1)},${l(2)})`; }; const wReports = (size) => { const c = PC(); if (size === 'S') return (
Reports
 ); // Insight card: a headline auto-insight + supporting mini chart + report shortcuts return (
Reports & insights
this month's highlight · 12 reports
Groceries is up 16% vs March.
₴11,200 · your biggest category
{[['chart', 'Spending'], ['wallet', 'Net worth'], ['trendingUp', 'Gains'], ['piggy', 'Cash flow']].map(([ic, t]) => (
{t}
))}
); }; // ============================================================================ // MASCOT / COACH — the second gradient moment (soft) // ============================================================================ const wMascot = () => { const c = PC(); const dark = (window.__koiTheme === 'dark'); return (
{window.KOI_MASCOT_SRC ? KoiFi : 🐟}
KOIFI · LV 3
You stayed under your Dining budget 3 weeks running. Nice work!
See details
); }; // ============================================================================ // REGISTRY // ============================================================================ const WIDGETS = { add_expense: { title: 'Add a transaction', icon: 'plus', sizes: ['S', 'M'], render: wAddExpense }, net_worth: { title: 'Net worth', icon: 'wallet', sizes: ['S', 'M', 'L'], render: wNetWorth }, cash_flow: { title: 'Cash flow', icon: 'arrowU', sizes: ['S', 'M', 'L'], render: wCashFlow }, budget: { title: 'Budget pulse', icon: 'piggy', sizes: ['S', 'M', 'L'], render: wBudget }, portfolio: { title: 'Portfolio', icon: 'trendingUp', sizes: ['S', 'M', 'L'], render: wPortfolio }, goals: { title: 'Goals', icon: 'target', sizes: ['S', 'M'], render: wGoals }, financial_health: { title: 'Financial health', icon: 'heart', sizes: ['S', 'M'], render: wHealth }, mascot: { title: 'Mascot insight', icon: 'smile', sizes: ['M'], render: wMascot }, watchlist: { title: 'Watchlist', icon: 'eye', sizes: ['S', 'M'], render: wWatchlist }, wisdom: { title: 'Wisdom of the day', icon: 'book', sizes: ['M'], render: wWisdom }, news_brief: { title: 'News brief', icon: 'compass', sizes: ['S', 'M'], render: wNews }, reports: { title: 'Reports', icon: 'chart', sizes: ['S', 'M'], render: wReports }, }; Object.assign(window, { WIDGETS, PCard, PRing, PSpark, PGRAD, PSERIF, PSANS });