setH(true)} onMouseLeave={() => setH(false)} style={{ position: 'relative', borderRadius: 13, padding: pad, background: T.glassGrad, border: `1px solid ${h && hover ? T.borderHi : T.border}`, backdropFilter: 'blur(20px) saturate(140%)', WebkitBackdropFilter: 'blur(20px) saturate(140%)', boxShadow: h && hover ? T.cardShadowHover : T.cardShadow, cursor: onClick ? 'pointer' : 'default', transition: 'border-color .2s, box-shadow .2s, transform .2s', transform: h && hover ? 'translateY(-1px)' : 'none', overflow: 'hidden', ...style, }}>

{children}

); } // Selo de status function Pill({ children, tone = 'mute', style }) { const map = { red: { bg: T.redBg, fg: T.redBright, bd: 'rgba(255,19,48,0.35)' }, green: { bg: T.greenBg, fg: T.green, bd: 'rgba(0,230,140,0.35)' }, yellow:{ bg: T.yellowBg, fg: T.yellow, bd: 'rgba(255,200,61,0.4)' }, mute: { bg: T.pillMuteBg, fg: T.mute, bd: T.border }, white: { bg: T.pillWhiteBg, fg: T.text, bd: T.borderHi }, }; const c = map[tone]; return ( {children} ); } // Delta com seta (verde p/ baixo = bom, vermelho p/ cima = ruim, amarelo ~0 = neutro) function Delta({ pct, size = 12.5 }) { if (pct == null) return —; // igual ao custo (diferença zero) → amarelo com "=" if (pct === 0 || Math.abs(pct) < 0.005) return = 0,0%; const down = pct < 0; // mais barato = bom const c = down ? T.green : T.redBright; return ( {Math.abs(pct).toFixed(1)}% ); } // ── Gráfico de barras ─────────────────────────────────────────────────── function BarChart({ data, height = 200 }) { const max = Math.max(...data.map(d => d.value)); return (

{data.map((d, i) => { const h = (d.value / max) * (height - 36); return (

{window.IC.fmtK(d.value)}

{d.cat}

); })}

); } // ── Gráfico de linha (variação de custo) ──────────────────────────────── function LineChart({ data, height = 200 }) { const w = 560, pad = 28; const ys = data.map(d => d.idx); const min = Math.min(...ys) - 1, max = Math.max(...ys) + 1; const X = i => pad + (i / (data.length - 1)) * (w - pad * 2); const Y = v => (height - 30) - ((v - min) / (max - min)) * (height - 56); const pts = data.map((d, i) => [X(i), Y(d.idx)]); const line = pts.map((p, i) => (i ? 'L' : 'M') + p[0] + ' ' + p[1]).join(' '); const area = line + ` L ${X(data.length-1)} ${height-30} L ${X(0)} ${height-30} Z`; return ( ); } // ── Número animado (count up) ─────────────────────────────────────────── function CountUp({ value, prefix = '', suffix = '', decimals = 0, dur = 1100, style }) { const [v, setV] = useState(0); const ref = useRef(); useEffect(() => { let raf, start; const from = ref.current ?? 0; const step = (t) => { if (!start) start = t; const p = Math.min(1, (t - start) / dur); const e = 1 - Math.pow(1 - p, 3); setV(from + (value - from) * e); if (p < 1) raf = requestAnimationFrame(step); else ref.current = value; }; raf = requestAnimationFrame(step); return () => cancelAnimationFrame(raf); }, [value]); return {prefix}{v.toLocaleString('pt-BR', { minimumFractionDigits: decimals, maximumFractionDigits: decimals })}{suffix}; } // ── Donut / Pizza ─────────────────────────────────────────────────────── function Donut({ data, size = 168, thickness = 30 }) { const total = data.reduce((s, d) => s + d.value, 0); const r = (size - thickness) / 2, cx = size / 2, cy = size / 2, C = 2 * Math.PI * r; let acc = 0; return (

{data.map((d, i) => (

{d.label} {Math.round(d.value / total * 100)}%

))}

); } // ── Barras horizontais (ranking) ──────────────────────────────────────── function HBars({ data }) { const max = Math.max(...data.map(d => d.value)); return (

{data.map((d, i) => (

{d.label} {d.display ?? d.value}

))}

); } // ── Sparkline (mini histórico) ────────────────────────────────────────── function SparkLine({ data, w = 86, h = 26, color }) { if (!data || data.length < 2) return null; const min = Math.min(...data), max = Math.max(...data), rng = max - min || 1; const X = i => (i / (data.length - 1)) * w; const Y = v => h - 3 - ((v - min) / rng) * (h - 6); const d = data.map((v, i) => (i ? 'L' : 'M') + X(i).toFixed(1) + ' ' + Y(v).toFixed(1)).join(' '); const down = data[data.length - 1] <= data[0]; const c = color || (down ? T.green : T.redBright); return ( ); } Object.assign(window, { T, Icon, Glass, Pill, Delta, BarChart, LineChart, CountUp, Donut, HBars, SparkLine });