// crm-chart-view.jsx — CRM funnel dashboard (charts & KPIs)
(function () {
const C = {
green: '#22C55E',
greenStrong: '#16A34A',
greenSoft: '#DCFCE7',
greenSofter: '#E7F6ED',
red: '#EF4444',
redSoft: '#FEE2E2',
blue: '#3B82F6',
blueDeep: '#1E40AF',
blueSky: '#38BDF8',
blueSoft: '#DBEAFE',
pink: '#F43F5E',
coral: '#FB7185',
orange: '#F97316',
orangeLight: '#FB923C',
teal: '#14B8A6',
purple: '#7C3AED',
yellow: '#FACC15',
text: 'var(--text)',
muted: 'var(--text-muted)',
faint: 'var(--text-faint)',
border: 'var(--border)',
surface: 'var(--surface)',
surface2: 'var(--surface-2)',
surface3: 'var(--surface-3)'
};
const fmtBRL = (v, d = 2) =>
'R$ ' + Number(v || 0).toLocaleString('pt-BR', { minimumFractionDigits: d, maximumFractionDigits: d });
const fmtNum = (v) => Number(v || 0).toLocaleString('pt-BR');
const fmtK = (v) => v >= 1000 ? `${(v / 1000).toLocaleString('pt-BR', { maximumFractionDigits: 1 })} mil` : Math.round(v).toString();
// — Card wrapper ————————————————————————————————————————
function Card({ title, icon, right, children, style, bodyStyle, dense, headerStyle }) {
return (
{(title || right) &&
{icon &&
}
{title &&
{title}}
{right}
}
{children}
setH(true)}
onMouseLeave={() => setH(false)}
style={{
background: C.surface, border: '1px solid ' + C.border, borderRadius: 12,
padding: '12px 14px', display: 'flex', flexDirection: 'column', gap: 6,
minWidth: 0,
transform: h ? 'translateY(-2px)' : 'translateY(0)',
boxShadow: h ?
'0 14px 28px -14px rgba(15,23,42,.20), 0 4px 8px -4px rgba(15,23,42,.08)' :
'0 1px 2px rgba(15,23,42,.03)',
borderColor: h ? C.greenStrong : C.border,
transition: 'transform .18s ease, box-shadow .18s ease, border-color .18s ease'
}}>
{label}
{value}
{delta &&
}
setH(true)}
onMouseLeave={() => setH(false)}
title={`${done} de ${total} negócios concluídos`}
style={{
height: 12, borderRadius: 999, background: C.surface3, overflow: 'hidden',
cursor: 'help', position: 'relative'
}}>
Total {fmtNum(done)} de {fmtNum(total)}
);
}
function SubTile({ label, value, delta, dir, neutral, icon, iconRotate, countLabel, accent }) {
const [h, setH] = React.useState(false);
return (
setH(true)}
onMouseLeave={() => setH(false)}
style={{
border: '1px solid ' + C.border, borderRadius: 10, padding: '10px 12px',
background: C.surface, display: 'flex', flexDirection: 'column', gap: 5,
minWidth: 0,
transform: h ? 'translateY(-2px)' : 'translateY(0)',
boxShadow: h ? '0 10px 24px -12px rgba(15,23,42,.18)' : 'none',
borderColor: h ? accent : C.border,
transition: 'transform .18s ease, box-shadow .18s ease, border-color .18s ease'
}}>
{label}
{value}
{countLabel}
{/* Funnel column — stack of rounded blocks of decreasing width */}
{stages.map((s, i) => {
const isH = hover === s.id;
return (
setHover(s.id)}
onMouseLeave={() => setHover(null)}
title={`${s.label}: ${fmtNum(s.count)} negócios`}
style={{
flex: 1, minHeight: 0,
width: `${widthAt(i)}%`,
background: s.color,
borderRadius: 22,
display: 'flex', flexDirection: 'column',
alignItems: 'center', justifyContent: 'center',
color: '#fff', cursor: 'default',
transform: isH ? 'scale(1.015)' : 'scale(1)',
filter: isH ? 'brightness(1.06) saturate(1.05)' : 'brightness(1)',
boxShadow: isH ?
`0 10px 24px -8px ${s.color}66, 0 2px 6px rgba(15,23,42,.08)` :
'0 2px 6px rgba(15,23,42,.06)',
transition: 'transform .2s ease, filter .2s ease, box-shadow .2s ease'
}}>
4 ? 10 : 11, fontWeight: 700, letterSpacing: '.08em', opacity: .95, padding: '0 12px', textAlign: 'center', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: '100%' }}>{s.label}
4 ? 26 : 30, fontWeight: 800, letterSpacing: '-.04em', lineHeight: 1 }}>{fmtNum(s.count)}
4 ? 10 : 11, opacity: .85, marginTop: 2 }}>Negócios
);
})}
{/* Transitions column — small cards positioned via percentages between stages */}
{transitions.map((t, i) => {
const pctTop = 100 / n * (i + 1);
return (
);
})}
{/* Top connector: from funnel side (10px gap) → right to card center → down (ends 10px above card top) */}
{/* Card — 10px margins on all sides */}
setH(true)}
onMouseLeave={() => setH(false)}
style={{
position: 'absolute',
top: 10, left: 10, right: 10, bottom: 10,
background: C.surface, border: `1px solid ${h ? tone : C.border}`,
borderRadius: 10, padding: '6px 9px',
display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 2,
boxShadow: h ? '0 10px 20px -10px rgba(15,23,42,.22)' : '0 1px 2px rgba(15,23,42,.04)',
transform: h ? 'translateY(-1px)' : 'translateY(0)',
transition: 'transform .18s ease, box-shadow .18s ease, border-color .18s ease',
pointerEvents: 'auto',
overflow: 'hidden'
}}>
{pct}% conversão
{value}
Tempo de Espera: {wait}
{/* Bottom connector: from below card center (10px gap) → down → left toward funnel (10px gap from wrapper edge) */}
{/* Tooltip — follows mouse, always above cursor */}
{hover && mouse &&
(() => {
const d = data[hover.idx];
const meta = SEG_META[hover.seg];
const totalAll = d.total + d.won + d.lost || 1;
const segValue = d[meta.key];
// synthesize a count for display (mock data has only values)
const segCount = Math.round(segValue / 1000);
const cw = containerRef.current?.clientWidth || 0;
// Clamp horizontal anchor so tooltip stays on-screen
const TW = 180; // approx tooltip width
let translateX = '-50%';
if (mouse.x - TW / 2 < 4) translateX = '0%';else
if (mouse.x + TW / 2 > cw - 4) translateX = '-100%';
return (
{meta.label}
{d.label}/26
{fmtBRL(segValue)}
Total {fmtNum(segCount)}
·
{(segValue / totalAll * 100).toFixed(2).replace('.', ',')}%
);
})()
}
);
}
// — Vertical bar chart (Receita Mensal) ———————————————
function VBars({ data, color = C.green, formatVal }) {
const [hover, setHover] = React.useState(null);
const containerRef = React.useRef(null);
const [size, setSize] = React.useState({ w: 460, h: 220 });
React.useEffect(() => {
if (!containerRef.current) return;
const ro = new ResizeObserver((entries) => {
const r = entries[0].contentRect;
if (r.width > 0 && r.height > 0) setSize({ w: r.width, h: r.height });
});
ro.observe(containerRef.current);
return () => ro.disconnect();
}, []);
const max = Math.max(...data.map((d) => d.v)) * 1.18;
const padL = 36,padR = 8,padT = 22,padB = 26;
const W = size.w,H = size.h;
const innerW = W - padL - padR,innerH = H - padT - padB;
const step = innerW / data.length;
const barW = Math.min(22, step - 6);
const ticks = [0, .25, .5, .75, 1].map((p) => Math.round(p * max));
return (
);
}
// — Donut chart (Origem Dos Leads) ————————————————————
function Donut({ data, size = 180, thickness = 30 }) {
const [hover, setHover] = React.useState(null);
const [mouse, setMouse] = React.useState(null);
const containerRef = React.useRef(null);
const total = data.reduce((s, d) => s + d.v, 0);
const r = size / 2 - 4;
const cx = size / 2, cy = size / 2;
const innerR = r - thickness;
let acc = 0;
const slices = data.map((d, idx) => {
const s0 = acc / total * Math.PI * 2 - Math.PI / 2;
acc += d.v;
const s1 = acc / total * Math.PI * 2 - Math.PI / 2;
const large = s1 - s0 > Math.PI ? 1 : 0;
const x1 = cx + r * Math.cos(s0), y1 = cy + r * Math.sin(s0);
const x2 = cx + r * Math.cos(s1), y2 = cy + r * Math.sin(s1);
const x3 = cx + innerR * Math.cos(s1), y3 = cy + innerR * Math.sin(s1);
const x4 = cx + innerR * Math.cos(s0), y4 = cy + innerR * Math.sin(s0);
const path = `M${x1},${y1} A${r},${r} 0 ${large} 1 ${x2},${y2} L${x3},${y3} A${innerR},${innerR} 0 ${large} 0 ${x4},${y4} Z`;
const mid = (s0 + s1) / 2;
return { path, color: d.color, mid, label: d.label, v: d.v, idx };
});
const updateMouse = (e) => {
const rect = containerRef.current?.getBoundingClientRect();
if (rect) setMouse({ x: e.clientX - rect.left, y: e.clientY - rect.top });
};
return (
{hover !== null && mouse && (() => {
const s = slices[hover];
const pct = (s.v / total * 100).toFixed(1).replace('.', ',');
return (
{s.label}
{pct}%
);
})()}
);
}
// — Tiny stacked sparkline (legend area for Negócio Mensal) ——
function MiniStacked({ a, b, color1 = C.green, color2 = C.coral }) {
// 36 micro vertical bars stacked
const bars = Array.from({ length: 36 }, (_, i) => ({
h1: 0.4 + 0.6 * Math.abs(Math.sin(i * 0.7)),
h2: 0.2 + 0.55 * Math.abs(Math.cos(i * 0.5 + 1))
}));
return (
);
}
// — Main view ————————————————————————————————————————
function CRMChartView({ phases, cards }) {
// Responsive width detection
const wrapRef = React.useRef(null);
const [w, setW] = React.useState(1240);
React.useEffect(() => {
if (!wrapRef.current) return;
const ro = new ResizeObserver((entries) => {
setW(entries[0].contentRect.width);
});
ro.observe(wrapRef.current);
return () => ro.disconnect();
}, []);
const narrow = w < 1100; // stack the two main rows into single column each
const veryNarrow = w < 700; // also stack the 8 KPIs into 2 cols and Origem/Receita stack
// Derive dynamics from data where reasonable
const totalValue = cards.reduce((s, c) => s + (c.value || 0), 0);
const cardCount = cards.length;
const wonCount = cards.filter((c) => /fech|ganho/i.test(c.phase)).length || 17;
const lostCount = 36;
const openCount = Math.max(cardCount - wonCount, 0) || 527;
// ── 8 KPIs (top-right) ───────────────────────────────
const kpiTop = [
{ label: 'ROI (RET)', value: '1,78', delta: '12,25%', dir: 'up', icon: 'reports' },
{ label: 'CPA', value: 'R$ 56,69', delta: '8,54%', dir: 'down', icon: 'cart' },
{ label: 'Taxa de Conversão', value: '47,60%', delta: '8,31%', dir: 'up', icon: 'zap' },
{ label: 'LTV Estimado', value: 'R$ 1.840', delta: '3,12%', dir: 'up', icon: 'star' },
{ label: 'Ticket Médio', value: fmtBRL(2940, 0), delta: '8,06%', dir: 'up', icon: 'finance' },
{ label: 'Taxa de Clique (CTR)', value: '6,25%', delta: '1,84%', dir: 'up', icon: 'activity' },
{ label: 'CPC', value: 'R$ 416,93', delta: '5,01%', dir: 'down', icon: 'finance' },
{ label: 'Vendas 🚀', value: '474', delta: '12,25%', dir: 'up', icon: 'arrow-up-right' }];
// ── Funnel stages — derived dynamically from board's phases + cards ──
const stages = (phases || []).map((p) => {
const inPhase = (cards || []).filter((c) => c.phase === p.id);
return {
id: p.id,
label: (p.label || '').toUpperCase(),
count: inPhase.length,
value: inPhase.reduce((s, c) => s + (c.value || 0), 0),
color: p.color
};
});
// ── Transitions between consecutive stages (n-1) ─────
const waitOptions = ['3 Dias', '5 Dias', '7 Dias', '12 Dias', '2 Semanas'];
const transitions = stages.slice(0, -1).map((s, i) => {
const next = stages[i + 1];
const ratio = s.count > 0 ? next.count / s.count : 0;
const pct = Math.round(ratio * 100);
return {
pct,
dir: ratio >= 0.4 ? 'up' : 'down',
value: fmtBRL(next.value || 0),
wait: waitOptions[i % waitOptions.length]
};
});
// ── Monthly stacked data (Negócio Mensal) ────────────
const months = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'];
const stacked = months.map((m, i) => {
const base = [32, 52, 46, 68, 18, 46, 66, 42, 52, 32, 46, 58][i] * 1000;
const won = [22, 28, 20, 30, 6, 18, 26, 18, 22, 16, 24, 28][i] * 1000;
const lost = [18, 20, 24, 30, 12, 4, 18, 14, 18, 8, 16, 22][i] * 1000;
return { label: m, total: base, won, lost };
});
// ── Origem dos Leads (donut) ─────────────────────────
const origin = [
{ label: 'Orgânico', v: 35.6, color: C.green },
{ label: 'Paid Ads', v: 28.7, color: C.blue },
{ label: 'Referência', v: 17.8, color: C.purple },
{ label: 'Direto', v: 10.9, color: C.orangeLight },
{ label: 'Outros', v: 7.0, color: C.pink }];
// ── Leads Gerados (green bars) ───────────────────────
const leadsMensais = [
{ label: 'Jan', v: 286 },
{ label: 'Fev', v: 542 },
{ label: 'Mar', v: 418 },
{ label: 'Abr', v: 467 },
{ label: 'Mai', v: 521 },
{ label: 'Jun', v: 394 },
{ label: 'Jul', v: 348 },
{ label: 'Ago', v: 362 },
{ label: 'Set', v: 312 },
{ label: 'Out', v: 436 },
{ label: 'Nov', v: 241 },
{ label: 'Dez', v: 408 }];
const totalLeads = leadsMensais.reduce((s, d) => s + d.v, 0);
return (
{/* ─── Row 1: Negócios + 8 KPIs ─── */}
{/* ─── Row 2: Funnel + (Monthly + (Origem | Receita)) ─── */}
{/* Funnel */}
{/* Right column */}
Negócio Mensal
{fmtBRL(563236.26)}
}
right={
}
bodyStyle={{ paddingTop: 4, flex: 1, minHeight: 0 }}>
{fmtNum(totalLeads)} Leads}>
fmtNum(v)} />
{label}
{right && {right}}
);
}
function LegendRow({ color, label, pct }) {
const [h, setH] = React.useState(false);
return (
setH(true)}
onMouseLeave={() => setH(false)}
style={{
display: 'flex', alignItems: 'center', gap: 8,
padding: '6px 8px', borderRadius: 8,
background: h ? C.surface2 : 'transparent',
transition: 'background .15s ease',
cursor: 'default'
}}>
{label}
{pct.toFixed(1)}%
);
}
window.CRMChartView = CRMChartView;
})();