/* ── LAYOUT: Shell, Sidebar, Topbar ─────────────────────────────────────── */ const { useState, useEffect, useRef, useCallback } = React; /* ── Icons (inline SVG helpers) ── */ const Icon = { dashboard: () => , carteiras: () => , comp: () => , findings: () => , receitas: () => , import: () => , users: () => , chevron: () => , close: () => , plus: () => , pdf: () => , check: () => , alert: () => , export: () => , back: () => , burger: () => , }; /* ── Sidebar ── */ function Sidebar({ view, setView, currentMonth, months, onMonthChange, user, onLogout, open, onClose }) { const pick = (fn) => (...args) => { fn(...args); if (onClose) onClose(); }; return ( ); } /* ── Topbar ── */ function Topbar({ title, subtitle, currentMonth, actions, onBurgerClick }) { return (
{onBurgerClick && ( )}
{title}
{subtitle && {subtitle}} {currentMonth && ( {currentMonth.label} )} {actions}
); } /* ── Shell (orchestrates layout) ── */ function Shell({ view, setView, currentMonth, months, onMonthChange, user, onLogout, children, topbarTitle, topbarSub, topbarActions }) { const [menuOpen, setMenuOpen] = useState(false); // Fechar o drawer com tecla Escape (acessibilidade) useEffect(() => { if (!menuOpen) return; const onKey = (e) => { if (e.key === 'Escape') setMenuOpen(false); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [menuOpen]); return (
setMenuOpen(false)} aria-hidden="true" /> setMenuOpen(false)} />
setMenuOpen(true)} />
{children}
); } /* ── Spark Line SVG ── */ function SparkLine({ values = [], width = 60, height = 22, color = 'var(--green)', positive = true }) { if (!values || values.length < 2) return —; const min = Math.min(...values); const max = Math.max(...values); const range = max - min || 1; const pts = values.map((v, i) => { const x = (i / (values.length - 1)) * width; const y = height - ((v - min) / range) * (height - 2) - 1; return `${x},${y}`; }).join(' '); const last = values[values.length - 1]; const first = values[0]; const c = last >= first ? 'var(--green)' : 'var(--red)'; return ( ); } /* ── Mini line chart (for carteira history) ── */ function LineChart({ data, width = '100%', height = 180, color = 'var(--navy)' }) { if (!data || data.length < 2) return
Dados insuficientes
; const vals = data.map(d => d.value); const labels = data.map(d => d.label); const min = Math.min(...vals); const max = Math.max(...vals); const range = max - min || 1; const W = 600, H = height; const pad = { t: 16, r: 20, b: 28, l: 20 }; const iW = W - pad.l - pad.r; const iH = H - pad.t - pad.b; const x = i => pad.l + (i / (vals.length - 1)) * iW; const y = v => pad.t + iH - ((v - min) / range) * iH; const pts = vals.map((v, i) => `${x(i)},${y(v)}`).join(' '); const areaClose = ` L${x(vals.length-1)},${H-pad.b} L${x(0)},${H-pad.b} Z`; const pathD = `M ${pts.replace(' ',' ').split(' ').join(' L ')}`; const areaD = pathD + areaClose; const positive = vals[vals.length-1] >= vals[0]; const c = positive ? 'var(--green)' : 'var(--red)'; return ( {vals.map((v, i) => ( ))} {labels.map((l, i) => ( {l} ))} ); } /* ── Modal wrapper ── */ function Modal({ open, onClose, title, children, footer }) { if (!open) return null; return (
e.target === e.currentTarget && onClose()}>

{title}

{children}
{footer &&
{footer}
}
); } Object.assign(window, { Sidebar, Topbar, Shell, SparkLine, LineChart, Modal, Icon });