// ============================================================ // IUVENIS · Shared components + icons // ============================================================ const { useState, useEffect, useMemo, useRef, useCallback } = React; // ---------- ICONS (Lucide-style, 16px default) ---------- const I = { home: (p) => , social: (p) => , money: (p) => , users: (p) => , mail: (p) => , pipe: (p) => , book: (p) => , check: (p) => , checks: (p) => , search: (p) => , bell: (p) => , sun: (p) => , moon: (p) => , plus: (p) => , x: (p) => , arrow: (p) => , up: (p) => , down: (p) => , chev: (p) => , filter: (p) => , ext: (p) => , more: (p) => , send: (p) => , sparkle:(p) => , cal: (p) => , play: (p) => , doc: (p) => , inst: (p) => , yt: (p) => , tt: (p) => , li: (p) => , }; function iconProps(p={}) { return { width: p.size||16, height: p.size||16, viewBox:"0 0 24 24", fill:"none", stroke:"currentColor", strokeWidth:1.7, strokeLinecap:"round", strokeLinejoin:"round", className: "ico " + (p.className||""), style: p.style, }; } // ---------- Helpers ---------- const fmtBRL = (v) => "R$ " + Math.round(v).toLocaleString("pt-BR"); const fmtCompact = (v) => { if (v >= 1_000_000) return (v/1_000_000).toFixed(1).replace(/\.0$/,"")+"M"; if (v >= 1_000) return (v/1_000).toFixed(1).replace(/\.0$/,"")+"k"; return ""+v; }; const fmtPct = (v) => (v>=0?"+":"") + v.toFixed(1) + "%"; function Delta({ value, suffix="%" }) { const c = value > 0 ? "up" : value < 0 ? "down" : "flat"; const Arrow = value > 0 ? I.up : value < 0 ? I.down : null; return ( {Arrow && } {(value>=0?"+":"") + value.toFixed(1) + suffix} ); } function Avatar({ name, color }) { const init = name.split(" ").map(w=>w[0]).slice(0,2).join("").toUpperCase(); // Deterministic color from name const palette = ["#1B4DD8","#6A47C7","#137DA0","#0F9D58","#D63384","#B7791F","#C8332B","#3F6ED9","#0E7AA1","#7C4FCF"]; const idx = (name.charCodeAt(0) + name.charCodeAt(name.length-1)) % palette.length; return

{init}

; } // ---------- Charts (pure SVG) ---------- function LineChart({ data, height=220, gradientId="lg", color="var(--brand)", showXLabels=true, showGrid=true, secondary=null, secondaryColor="var(--text-3)" }) { const w = 800, h = height, pad = { l: 36, r: 12, t: 12, b: showXLabels?28:12 }; const innerW = w - pad.l - pad.r, innerH = h - pad.t - pad.b; const max = Math.max(...data.map(d=>d.v), ...(secondary?secondary.map(d=>d.v):[0])) * 1.1; const min = 0; const x = i => pad.l + (i/(data.length-1)) * innerW; const y = v => pad.t + innerH - ((v-min)/(max-min||1)) * innerH; const pathD = data.map((d,i)=> (i===0?"M":"L")+x(i)+","+y(d.v)).join(" "); const areaD = pathD + ` L${x(data.length-1)},${y(min)} L${x(0)},${y(min)} Z`; const sec = secondary ? secondary.map((d,i)=> (i===0?"M":"L")+x(i)+","+y(d.v)).join(" ") : null; const ticks = 4; return ( ); } function BarChart({ data, height=220, color="var(--brand)" }) { const w = 800, h = height, pad = { l: 36, r: 12, t: 12, b: 28 }; const innerW = w-pad.l-pad.r, innerH = h-pad.t-pad.b; const max = Math.max(...data.map(d=>d.v)) * 1.1; const bw = innerW / data.length * 0.6; const step = innerW / data.length; const ticks = 4; return ( ); } function ComboChart({ data, height=260 }) { // data: [{mes, receita, despesa}] const w = 800, h = height, pad = { l: 44, r: 12, t: 16, b: 30 }; const innerW = w-pad.l-pad.r, innerH = h-pad.t-pad.b; const max = Math.max(...data.map(d=>Math.max(d.receita,d.despesa))) * 1.15; const step = innerW / data.length; const bw = step*0.32; const x = i => pad.l + i*step + step/2; const y = v => pad.t + innerH - (v/max)*innerH; const lucroLine = data.map((d,i)=> (i===0?"M":"L")+x(i)+","+y(d.receita-d.despesa)).join(" "); const ticks = 4; return ( ); } function Sparkline({ data, color="var(--brand)", height=32 }) { const w = 200, h = height; const max = Math.max(...data), min = Math.min(...data); const range = max-min || 1; const path = data.map((v,i)=>{ const x = (i/(data.length-1))*w; const y = h - ((v-min)/range)*(h-4) - 2; return (i===0?"M":"L")+x+","+y; }).join(" "); return ( ); } function Donut({ segments, size=140, thickness=18, centerLabel, centerSub }) { const r = size/2 - thickness/2; const C = 2*Math.PI*r; const total = segments.reduce((s,x)=>s+x.value,0); let acc = 0; return (

{centerLabel &&

{centerLabel}

{centerSub &&

{centerSub}

}

); } // ---------- PeriodFilter ---------- function PeriodFilter({ value, onChange }) { const opts = ["7d","30d","90d","Ano"]; return (

{opts.map(o => ( ))}

); } // ---------- SocialIcon ---------- function SocialIcon({ rede, size=22 }) { const map = { instagram: { cls:"sn-ig", ico: }, tiktok: { cls:"sn-tt", ico: }, youtube: { cls:"sn-yt", ico: }, linkedin: { cls:"sn-li", ico: }, }; const m = map[rede]; return {m.ico}; } // ---------- Stat card ---------- function StatCard({ label, value, delta, unit, spark, accent="var(--brand)" }) { return (

{label}

{typeof value==="number" ? value.toLocaleString("pt-BR") : value}{unit||""}

{delta !== undefined && }

{spark &&

}

); } // ---------- Modal ---------- function Modal({ title, sub, children, onClose, footer, wide }) { useEffect(()=>{ const h = e => e.key === "Escape" && onClose(); window.addEventListener("keydown", h); return () => window.removeEventListener("keydown", h); },[onClose]); return (

e.stopPropagation()} style={ wide ? { width:"min(880px,94vw)" } : null }>

{title}

{sub &&

{sub}

}

{children}

{footer &&

{footer}

}

); } // Expose globals Object.assign(window, { I, fmtBRL, fmtCompact, fmtPct, Delta, Avatar, LineChart, BarChart, ComboChart, Sparkline, Donut, PeriodFilter, SocialIcon, StatCard, Modal });