/* primitives.jsx — small reusable visual building blocks */ const { useState, useEffect, useRef, useMemo, useCallback } = React; // ============================================================ // useDarkMode — reactively tells us if the .dark class is on // ============================================================ function useDarkMode() { const [dark, setDark] = useState(() => typeof document !== "undefined" && document.documentElement.classList.contains("dark")); useEffect(() => { const obs = new MutationObserver(() => { setDark(document.documentElement.classList.contains("dark")); }); obs.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] }); return () => obs.disconnect(); }, []); return dark; } // ============================================================ // Icon (lucide) wrapper — falls back to a square if not found // ============================================================ function Icon({ name, className = "w-4 h-4", strokeWidth = 1.75 }) { const ref = useRef(null); useEffect(() => { if (!ref.current || !window.lucide) return; ref.current.innerHTML = ""; const pascal = String(name).replace(/(^|-)(\w)/g, (_, __, c) => c.toUpperCase()); const iconNode = window.lucide.icons?.[pascal] || window.lucide.icons?.[name] || window.lucide[pascal] || window.lucide.icons?.Square; if (!iconNode) return; try { const node = window.lucide.createElement(iconNode); node.setAttribute("class", className); node.setAttribute("stroke-width", String(strokeWidth)); ref.current.appendChild(node); } catch (e) { // silent — fall back to nothing } }, [name, className, strokeWidth]); return ; } // ============================================================ // Formatters (white-label generic, BRL-style numbers) // ============================================================ const fmt = { money: (v, opts = {}) => { if (v == null) return "—"; const { compact = false, currency = true } = opts; if (compact && Math.abs(v) >= 1000) { if (Math.abs(v) >= 1e9) return `${currency ? "R$ " : ""}${(v / 1e9).toFixed(2).replace(".", ",")}B`; if (Math.abs(v) >= 1e6) return `${currency ? "R$ " : ""}${(v / 1e6).toFixed(2).replace(".", ",")}M`; if (Math.abs(v) >= 1e3) return `${currency ? "R$ " : ""}${(v / 1e3).toFixed(1).replace(".", ",")}k`; } return new Intl.NumberFormat("pt-BR", { style: currency ? "currency" : "decimal", currency: "BRL", minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(v); }, int: (v) => v == null ? "—" : new Intl.NumberFormat("pt-BR").format(Math.round(v)), pct: (v, opts = {}) => { if (v == null) return "—"; const { signed = false, dec = 1 } = opts; const sign = signed && v > 0 ? "+" : ""; return `${sign}${v.toFixed(dec).replace(".", ",")}%`; }, num: (v, dec = 2) => v == null ? "—" : v.toFixed(dec).replace(".", ","), }; // ============================================================ // Mask helpers — placeholders that scream "white-label demo" // ============================================================ const PH = { stores: ["Filial 01", "Filial 02", "Filial 03", "Filial 04", "Filial 05", "Filial 06"], regions: ["Sul", "Sudeste", "Centro-Oeste", "Nordeste", "Norte"], reps: ["Operador A", "Operador B", "Operador C", "Operador D", "Operador E"], groups: ["Grupo Alpha", "Grupo Beta", "Grupo Gama", "Grupo Delta", "Grupo Épsilon"], products: [ "SKU-1042 · Item Padrão A", "SKU-1187 · Item Padrão B", "SKU-2210 · Item Premium C", "SKU-2451 · Item Promo D", "SKU-3309 · Item Sazonal E", "SKU-4012 · Item Top F", "SKU-5101 · Item Linha G", "SKU-6033 · Item Outlet H", ], suppliers: ["Fornecedor 01", "Fornecedor 02", "Fornecedor 03", "Fornecedor 04"], }; // ============================================================ // PrimaryButton, SecondaryButton, IconButton // ============================================================ function Btn({ children, variant = "secondary", icon, iconRight, className = "", ...rest }) { const variantClass = { primary: "btn btn-primary", secondary: "btn", ghost: "btn btn-ghost", danger: "btn btn-danger", }[variant] || "btn"; return ( ); } function IconBtn({ icon, label, onClick, className = "", active = false }) { return ( ); } // ============================================================ // Section header // ============================================================ function SectionHead({ title, subtitle, kicker, action, icon }) { return (
{kicker && (
{kicker}
)}

{icon && } {title}

{subtitle &&

{subtitle}

}
{action}
); } // ============================================================ // Delta indicator (positive/negative %) // ============================================================ function Delta({ value, suffix = "", inline = false, dec = 1 }) { if (value == null) return —; const pos = value >= 0; const cls = pos ? "text-[var(--pos)]" : "text-[var(--neg)]"; const arrow = pos ? "trending-up" : "trending-down"; return ( {pos ? "+" : ""}{value.toFixed(dec).replace(".", ",")}%{suffix} ); } // ============================================================ // KPI Tile // ============================================================ function KPI({ label, value, delta, hint, icon, accent = false, compact = false, format = "money", target, info }) { const display = useMemo(() => { if (typeof value === "string") return value; if (format === "money") return fmt.money(value, { compact }); if (format === "int") return fmt.int(value); if (format === "pct") return fmt.pct(value); if (format === "num") return fmt.num(value); return value; }, [value, format, compact]); return (
{icon && } {label} {info && (
{info.title}
{info.desc}
} /> )}
{target && meta {target}}
{display}
{delta != null && } {hint && {hint}}
); } // ============================================================ // Tabs // ============================================================ function Tabs({ items, value, onChange, className = "" }) { return (
{items.map((it) => { const id = typeof it === "string" ? it : it.id; const label = typeof it === "string" ? it : it.label; const count = typeof it === "string" ? null : it.count; const active = value === id; return ( ); })}
); } // ============================================================ // Modal // ============================================================ function Modal({ open, onClose, title, children, footer, maxWidth = "max-w-2xl" }) { useEffect(() => { if (!open) return; const onEsc = (e) => e.key === "Escape" && onClose(); document.addEventListener("keydown", onEsc); return () => document.removeEventListener("keydown", onEsc); }, [open, onClose]); if (!open) return null; return (
e.stopPropagation()} >

{title}

{children}
{footer &&
{footer}
}
); } // ============================================================ // Toast helper (single instance) // ============================================================ const ToastCtx = React.createContext({ push: () => {} }); function ToastProvider({ children }) { const [toasts, setToasts] = useState([]); const push = useCallback((t) => { const id = Date.now() + Math.random(); setToasts((prev) => [...prev, { id, ...t }]); setTimeout(() => setToasts((prev) => prev.filter((x) => x.id !== id)), t.duration || 3200); }, []); return ( {children}
{toasts.map((t) => (

{t.title}

{t.desc &&

{t.desc}

}
))}
); } const useToast = () => React.useContext(ToastCtx); // ============================================================ // Spark line — tiny SVG // ============================================================ function Spark({ points, color = "var(--accent)", height = 32, width = 90, fill = true }) { if (!points || points.length === 0) return null; const min = Math.min(...points), max = Math.max(...points); const span = max - min || 1; const step = width / (points.length - 1); const pts = points.map((p, i) => [i * step, height - ((p - min) / span) * (height - 4) - 2]); const d = pts.map((p, i) => `${i === 0 ? "M" : "L"}${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(" "); const fillPath = fill ? `${d} L ${width},${height} L 0,${height} Z` : null; return ( {fillPath && ( <> )} ); } // ============================================================ // Bar chart (categorical, vertical) — pure SVG // ============================================================ function BarChart({ data, height = 220, valueKey = "value", labelKey = "label", color = "var(--accent)", showValues = true, format }) { const dark = useDarkMode(); const max = Math.max(...data.map((d) => d[valueKey])) || 1; return (
{data.map((d, i) => { const h = (d[valueKey] / max) * (height - 36); const v = d[valueKey]; return (
{showValues && ( {format ? format(v) : v} )}
{d[labelKey]}
); })}
); } // ============================================================ // Line chart — pure SVG with grid + axis // ============================================================ function LineChart({ series, labels, height = 220, colors, formatY }) { // series: [{ name, data: [n] }] const w = 800, h = height, pad = { l: 36, r: 12, t: 10, b: 22 }; const allVals = series.flatMap((s) => s.data); const max = Math.max(...allVals) * 1.1 || 1; const min = Math.min(0, Math.min(...allVals)); const span = max - min || 1; const n = labels.length; const xStep = (w - pad.l - pad.r) / (n - 1); const yTo = (v) => pad.t + (h - pad.t - pad.b) * (1 - (v - min) / span); const fmtY = formatY || ((v) => fmt.money(v, { compact: true })); const ticks = 4; const tickVals = Array.from({ length: ticks + 1 }, (_, i) => min + (span * i) / ticks); return ( {/* Grid lines */} {tickVals.map((tv, i) => ( {fmtY(tv)} ))} {/* X labels */} {labels.map((lbl, i) => { if (i % Math.ceil(n / 10) !== 0 && i !== n - 1) return null; return ( {lbl} ); })} {/* Series */} {series.map((s, si) => { const c = (colors && colors[si]) || s.color || ["var(--accent)", "var(--accent-2)", "var(--pink)"][si % 3]; const d = s.data.map((v, i) => `${i === 0 ? "M" : "L"} ${pad.l + i * xStep} ${yTo(v)}`).join(" "); const fillD = `${d} L ${pad.l + (n - 1) * xStep} ${yTo(min)} L ${pad.l} ${yTo(min)} Z`; return ( {si === 0 && } {s.data.map((v, i) => ( ))} ); })} ); } // ============================================================ // Progress bar // ============================================================ function Progress({ value, max = 100, color = "var(--accent)", label, height = 6, showVal = false }) { const dark = useDarkMode(); const pct = Math.min(100, Math.max(0, (value / max) * 100)); return (
{(label || showVal) && (
{label && {label}} {showVal && {pct.toFixed(0)}%}
)}
); } // ============================================================ // Empty state // ============================================================ function Empty({ icon = "inbox", title, desc, action }) { return (

{title}

{desc &&

{desc}

} {action &&
{action}
}
); } // ============================================================ // Donut chart (single value) // ============================================================ function Donut({ value, max = 100, size = 100, stroke = 8, color = "var(--accent)", label, sub }) { const dark = useDarkMode(); const r = (size - stroke) / 2; const c = 2 * Math.PI * r; const pct = Math.min(100, Math.max(0, (value / max) * 100)); const dash = (pct / 100) * c; return (
{label || `${pct.toFixed(0)}%`} {sub && {sub}}
); } // Export to window so other babel files can use Object.assign(window, { fmt, PH, Icon, Btn, IconBtn, SectionHead, Delta, KPI, Tabs, Modal, ToastProvider, useToast, Spark, BarChart, LineChart, Progress, Empty, Donut, useDarkMode, DualDelta, KPIDual, HealthScore, RadarChart, Narrative, PeriodPills, Tooltip, InfoDot, GLOSSARY, }); // ============================================================ // Tooltip — lightweight hover/focus popup (positioned on top) // ============================================================ function Tooltip({ children, content, side = "top", width = 260, delay = 200 }) { const [show, setShow] = useState(false); const ref = useRef(null); const timer = useRef(null); const open = useCallback(() => { clearTimeout(timer.current); timer.current = setTimeout(() => setShow(true), delay); }, [delay]); const close = useCallback(() => { clearTimeout(timer.current); setShow(false); }, []); useEffect(() => () => clearTimeout(timer.current), []); return ( {children} {show && ( {content} {/* arrow */} )} ); } // ============================================================ // InfoDot — small (i) icon that shows a tooltip with the explanation // ============================================================ function InfoDot({ children, content, side = "top", width = 280 }) { return ( Info ); } // ============================================================ // GLOSSARY — central source of truth for metric definitions // Used by Tooltip / InfoDot throughout the app. // ============================================================ const GLOSSARY = { pa: { title: "P.A. · Peças por Atendimento", desc: "Média de peças vendidas por cliente atendido. Quanto maior, melhor o cross-sell." }, tkm: { title: "T.K.M. · Ticket Médio do Atendimento", desc: "Faturamento total ÷ número de atendimentos. Indica o valor médio gasto por cliente." }, pm: { title: "P.M. · Preço Médio", desc: "Faturamento total ÷ peças vendidas. Reflete posicionamento e mix vendido." }, mkp: { title: "MKP · Markup", desc: "Preço de venda ÷ custo. 2,42× significa que o preço é 2,42 vezes o custo. Quanto maior, melhor a margem." }, yoy: { title: "YoY · Year over Year", desc: "Comparativo com o mesmo período do ano anterior. Indica o crescimento real, descontada a sazonalidade." }, cobertura: { title: "Cobertura de estoque", desc: "Estoque atual ÷ venda média diária. Em quantos dias o estoque atual aguenta se a venda continuar no ritmo médio." }, ruptura: { title: "Ruptura", desc: "SKUs com estoque zerado ÷ SKUs ativos. Mede a indisponibilidade da rede e impacto direto em vendas perdidas." }, conv: { title: "Conversão", desc: "Atendimentos com venda ÷ total de atendimentos. Mede a eficiência da equipe em fechar a venda." }, mape: { title: "MAPE · Mean Absolute Percentage Error", desc: "Erro médio absoluto em % entre o previsto e o realizado. Quanto menor, mais preciso o modelo." }, meta: { title: "Meta", desc: "Objetivo de venda definido para o período. Cobrança proporcional ao dia/semana corrente." }, margem: { title: "Margem", desc: "(Venda - custo) ÷ venda. Diferente de MKP, expressa o percentual de lucro sobre o preço final." }, health: { title: "Saúde da operação", desc: (
Nota composta de 0 a 100, atualizada a cada 15 min:
  • • Vendas vs. meta · 30%
  • • Crescimento YoY · 25%
  • • Ruptura (inversa) · 20%
  • • Cobertura · 15%
  • • MKP médio · 10%
) }, confianca: { title: "Confiança da previsão", desc: "Probabilidade de o valor real cair dentro do intervalo previsto. 90% significa que em 9 de 10 períodos a venda real ficará entre os limites Lo e Hi." }, }; // ============================================================ // DualDelta — two stacked YoY values (vs período anterior + vs ano anterior) // ============================================================ function DualDelta({ vsPrev, vsYear, prevLabel = "vs. anterior", yearLabel = "vs. 2025", inversed = false }) { // inversed: when "down is good" (e.g., ruptura) const colorOf = (v) => { const positive = inversed ? v <= 0 : v >= 0; return positive ? "var(--pos)" : "var(--neg)"; }; const arrowOf = (v) => { if (inversed) return v <= 0 ? "trending-down" : "trending-up"; return v >= 0 ? "trending-up" : "trending-down"; }; const Row = ({ v, label }) => (
{v > 0 ? "+" : ""}{v.toFixed(1)}% {label}
); return (
{vsPrev != null && } {vsYear != null && }
); } // ============================================================ // KPIDual — KPI tile with dual YoY (vs prev + vs year) // ============================================================ function KPIDual({ label, value, vsPrev, vsYear, icon, accent = false, format = "money", compact = true, hint, inversed = false, info }) { const display = typeof value === "string" ? value : format === "money" ? fmt.money(value, { compact }) : format === "int" ? fmt.int(value) : format === "pct" ? fmt.pct(value) : format === "num" ? fmt.num(value) : value; return (
{icon && } {label} {info && (
{info.title}
{info.desc}
} /> )}
{display}
{hint &&
{hint}
}
); } // ============================================================ // HealthScore — single visual indicator (gauge + stars) // ============================================================ function HealthScore({ score = 78, size = 120, label = "Saúde da operação" }) { const dark = useDarkMode(); // score 0-100 const stroke = 9; const r = (size - stroke) / 2; const c = 2 * Math.PI * r; const dash = (Math.min(100, Math.max(0, score)) / 100) * c; const color = score >= 80 ? "var(--pos)" : score >= 60 ? "var(--accent)" : score >= 40 ? "var(--warn)" : "var(--neg)"; const label_ = score >= 90 ? "Excepcional" : score >= 80 ? "Muito boa" : score >= 70 ? "Saudável" : score >= 60 ? "Atenção" : score >= 40 ? "Risco" : "Crítica"; const stars = Math.round((score / 100) * 5); return (
{score} /100
{label}
{label_}
{[1, 2, 3, 4, 5].map((i) => ( ))}
Combina vendas, meta, ruptura, cobertura e MKP em uma única nota — atualizada a cada 15 min.
); } // ============================================================ // RadarChart — multi-dim performance spider // ============================================================ function RadarChart({ axes, value, target, size = 240, color = "var(--accent)" }) { const dark = useDarkMode(); // axes: [{ key, label, max }] // value: { key: number, ... } (current) // target: { key: number, ... } (optional baseline/target) const cx = size / 2, cy = size / 2; const radius = (size / 2) - 28; const n = axes.length; const pointFor = (val, max, i) => { const angle = (Math.PI * 2 * i) / n - Math.PI / 2; const r = (Math.min(val, max) / max) * radius; return [cx + r * Math.cos(angle), cy + r * Math.sin(angle)]; }; const valuePoints = axes.map((a, i) => pointFor(value[a.key] || 0, a.max, i)); const targetPoints = target ? axes.map((a, i) => pointFor(target[a.key] || 0, a.max, i)) : null; const polyPath = (pts) => pts.map((p, i) => `${i === 0 ? "M" : "L"} ${p[0]} ${p[1]}`).join(" ") + " Z"; const labels = axes.map((a, i) => { const angle = (Math.PI * 2 * i) / n - Math.PI / 2; const r = radius + 16; return { x: cx + r * Math.cos(angle), y: cy + r * Math.sin(angle), label: a.label, key: a.key }; }); return ( {/* Concentric rings */} {[0.25, 0.5, 0.75, 1.0].map((s, i) => ( { const angle = (Math.PI * 2 * j) / n - Math.PI / 2; return `${cx + radius * s * Math.cos(angle)},${cy + radius * s * Math.sin(angle)}`; }).join(" ")} fill="none" stroke="var(--border-soft)" strokeWidth="1" strokeDasharray={i === 3 ? "0" : "2 3"} /> ))} {/* Spokes */} {axes.map((_, i) => { const angle = (Math.PI * 2 * i) / n - Math.PI / 2; return ; })} {/* Target polygon */} {targetPoints && ( )} {/* Value polygon */} {/* Points */} {valuePoints.map((p, i) => )} {/* Labels */} {labels.map((l, i) => ( {l.label} ))} ); } // ============================================================ // Narrative — storytelling banner with auto-generated sentence // ============================================================ function Narrative({ tone = "neutral", icon = "sparkles", children, kicker, action }) { const tones = { positive: { bg: "color-mix(in oklch, var(--pos) 8%, var(--panel))", border: "color-mix(in oklch, var(--pos) 30%, var(--border))", dot: "var(--pos)" }, warn: { bg: "color-mix(in oklch, var(--warn) 8%, var(--panel))", border: "color-mix(in oklch, var(--warn) 30%, var(--border))", dot: "var(--warn)" }, negative: { bg: "color-mix(in oklch, var(--neg) 8%, var(--panel))", border: "color-mix(in oklch, var(--neg) 30%, var(--border))", dot: "var(--neg)" }, neutral: { bg: "var(--panel)", border: "var(--border)", dot: "var(--accent)" }, }; const t = tones[tone] || tones.neutral; return (
{kicker &&
{kicker}
}
{children}
{action}
); } // ============================================================ // PeriodPills — Dia / Semana / Mês / YTD selector // ============================================================ function PeriodPills({ value, onChange, options = ["Dia", "Semana", "Mês", "YTD"] }) { return (
{options.map((opt) => { const active = value === opt; return ( ); })}
); }