/* ================================================================
Tracker FMN — Funis v3
Sala de controle do quiz Fotógrafo Protegido.
Pizza padrão interativa, abandono e série refeitos, métricas e
cruzamentos, comparação com período anterior e insight do dia.
================================================================ */
const { useState, useEffect } = React;
const { LucideIcon, CardKPI, SectionCard, TopBar } = window;
const nf = n => (n == null ? '—' : Number(n).toLocaleString('pt-BR'));
const pc = (a, b) => (b ? Math.round((a / b) * 100) : 0);
const PALETTE = ['#eaaa41', '#60a5fa', '#4ade80', '#f472b6', '#a78bfa', '#34d399', '#fbbf24', '#f87171'];
const DOW = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
const PERIODOS = [
{ id: 'tudo', label: 'Tudo', dias: null },
{ id: '12m', label: '12 meses', dias: 365 },
{ id: '30d', label: '30 dias', dias: 30 },
{ id: '7d', label: '7 dias', dias: 7 },
];
function rangeFromPeriodo(dias) {
if (!dias) return { p_from: null, p_to: null };
const to = new Date(); const from = new Date(); from.setDate(from.getDate() - dias);
const iso = d => d.toISOString().slice(0, 10);
return { p_from: iso(from), p_to: iso(to) };
}
/* ── arco de rosca ── */
function arcPath(cx, cy, R, r, a0, a1) {
const p = (a, rad) => [cx + rad * Math.cos(a), cy + rad * Math.sin(a)];
const large = (a1 - a0) > Math.PI ? 1 : 0;
const [x0, y0] = p(a0, R), [x1, y1] = p(a1, R), [x2, y2] = p(a1, r), [x3, y3] = p(a0, r);
return `M${x0},${y0} A${R},${R} 0 ${large} 1 ${x1},${y1} L${x2},${y2} A${r},${r} 0 ${large} 0 ${x3},${y3} Z`;
}
function Donut({ items, hov, setHov }) {
const data = (items || []).slice(0, 8);
const sum = data.reduce((a, b) => a + b.n, 0) || 1;
const R = 92, r = 52, cx = 100, cy = 100;
let ang = -Math.PI / 2;
const slices = data.map((it, i) => {
const frac = it.n / sum, a0 = ang, a1 = ang + frac * 2 * Math.PI; ang = a1;
const mid = (a0 + a1) / 2, lr = (R + r) / 2;
return { ...it, i, a0, a1, frac, lx: cx + lr * Math.cos(mid), ly: cy + lr * Math.sin(mid) };
});
return (
{slices.map(s => {
const dim = hov != null && hov !== s.i;
return (
setHov(s.i)} onMouseLeave={() => setHov(null)} />
);
})}
{slices.filter(s => s.frac >= 0.07).map(s => (
{Math.round(s.frac * 100)}%
))}
{nf(sum)}
menções
);
}
/* ── card com troca pizza/barras (tamanho fixo, cores sincronizadas) ── */
function VizCard({ title, hint, items, total }) {
const [view, setView] = useState('pizza');
const [hov, setHov] = useState(null);
const data = (items || []).slice(0, 8);
const sum = data.reduce((a, b) => a + b.n, 0) || 1;
const base = total || sum;
const max = Math.max(1, ...data.map(i => i.n));
const Toggle = ({ id, icon }) => (
setView(id)} title={id === 'pizza' ? 'Pizza' : 'Barras'}
style={{ width: 27, height: 24, borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
background: view === id ? 'rgba(234,170,65,.15)' : 'transparent',
border: `1px solid ${view === id ? 'rgba(234,170,65,.3)' : 'var(--app-border)'}`,
color: view === id ? 'var(--fmn-gold)' : 'var(--text-3)' }}>
);
return (
{hint}
}
{!data.length ?
Sem dados no período.
: view === 'pizza' ? (
{data.map((it, i) => (
setHov(i)} onMouseLeave={() => setHov(null)}
style={{ display: 'flex', alignItems: 'center', gap: 7, fontSize: 11.5, opacity: hov != null && hov !== i ? 0.4 : 1, transition: 'opacity .15s' }}>
{it.val}
{Math.round(it.n / sum * 100)}%
))}
) : (
{data.map((it, i) => (
setHov(i)} onMouseLeave={() => setHov(null)}
style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '4px 0', opacity: hov != null && hov !== i ? 0.4 : 1, transition: 'opacity .15s' }}>
{it.val}
{Math.round(it.n / base * 100)}%
{nf(it.n)}
))}
)}
{label}
{pctVal != null ? pctVal + '%' : nf(n)}
{sub && {sub} }
);
}
/* ── abandono refeito ── */
function FunnelRow({ it, prev, max, biggest }) {
const [hov, setHov] = useState(false);
const retain = pc(it.n, max);
const drop = prev ? prev.n - it.n : 0;
const dropPct = prev ? pc(drop, prev.n) : 0;
const isCap = it.etapa === 'Captura de e-mail';
const isBig = biggest && it.etapa === biggest;
return (
setHov(true)} onMouseLeave={() => setHov(false)}>
{hov && (
{it.pergunta}
{nf(it.n)} chegaram aqui · {retain}% do início{prev && drop > 0 && · caíram {nf(drop)} ({dropPct}%) vindo de “{prev.etapa}” }
)}
{it.etapa}
{retain}%
{prev ? (drop > 0 ? `↓ ${dropPct}%${isBig ? ' ◀ maior' : ''}` : '—') : 'início'}
Abandono por etapa
do início até virar lead você retém {pc(lead, max)}%
passe o mouse na etapa para ver a pergunta completa
{items.map((it, i) =>
)}
);
}
/* ── série temporal em colunas ── */
function SeriesChart({ serie }) {
const data = serie || [];
const max = Math.max(1, ...data.map(d => d.leads));
return (
barra cheia = respostas · parte dourada = viraram e-mail
16 ? 2 : 6, height: 150, paddingTop: 8 }}>
{data.map((d, i) => (
12 ? 'rotate(-45deg)' : 'none', transformOrigin: 'center' }}>{d.rotulo}
))}
);
}
/* ── insight do dia ── */
function InsightCard({ onNavigate }) {
const [ins, setIns] = useState(null);
const [busy, setBusy] = useState(false);
useEffect(() => {
if (!window.db) return;
window.db.from('quiz_insights').select('*').order('dia', { ascending: false }).limit(1)
.then(({ data }) => { if (data && data[0]) setIns(data[0]); });
}, []);
if (!ins) return null;
const usar = async () => {
setBusy(true);
try {
await window.db.from('ideias').insert({ title: ins.titulo, description: (ins.gancho || '') + (ins.detalhe ? '\n\n' + ins.detalhe : ''), status: 'Ideia', formats: ins.formato ? [ins.formato] : [] });
await window.db.from('quiz_insights').update({ usado: true }).eq('id', ins.id);
} catch (e) { console.warn(e); }
setBusy(false);
if (onNavigate) onNavigate('ideias');
};
return (
Insight do dia
{ins.titulo}
{ins.gancho}
);
}
/* ── tabela cruzada compacta ── */
function CrossList({ title, hint, rows, render, color }) {
return (
{hint && {hint}
}
{(!rows || !rows.length) ? Sem dados.
: rows.map(render)}
);
}
function FunisScreen({ onNavigate }) {
const [periodo, setPeriodo] = useState('tudo');
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
if (!window.db) return;
setLoading(true);
const { p_from, p_to } = rangeFromPeriodo(PERIODOS.find(p => p.id === periodo).dias);
window.db.rpc('quiz_funis_dashboard', { p_from, p_to }).then(({ data, error }) => { if (!error) setData(data); setLoading(false); });
}, [periodo]);
const k = data?.kpis || {};
const total = k.total || 0;
const taxa = pc(k.com_email, total);
const periodoTxt = k.periodo_min ? `${k.periodo_min.slice(0, 10).split('-').reverse().join('/')} a ${k.periodo_max.slice(0, 10).split('-').reverse().join('/')}` : '—';
const dTotal = k.prev_total ? total - k.prev_total : undefined;
const dLeads = k.prev_com_email ? (k.com_email || 0) - k.prev_com_email : undefined;
const secTitle = t => {t}
;
return (
{PERIODOS.map(p => ( setPeriodo(p.id)}
style={{ padding: '5px 11px', borderRadius: 6, cursor: 'pointer', background: periodo === p.id ? 'rgba(234,170,65,.15)' : 'transparent', border: `1px solid ${periodo === p.id ? 'rgba(234,170,65,.2)' : 'transparent'}`, color: periodo === p.id ? 'var(--fmn-gold)' : 'rgba(255,255,255,.42)', fontFamily: 'Roboto,sans-serif', fontWeight: 700, fontSize: 11 }}>{p.label} ))}
} />
{loading &&
}
{!loading && data && (<>
{secTitle('Pesquisa de público (voz do cliente, troque entre pizza e barras no canto)')}
{secTitle('Risco e intenção de compra')}
pc(b.leads, b.total) - pc(a.leads, a.total))}
render={(r, i) => r.intencao === 'Totalmente, manda logo pra cá!').sort((a, b) => b.n - a.n)}
render={(r, i) => x.n))} pctVal={null} sub="muito quentes" color="#f87171" />} />
{secTitle('Ângulos de copy (insights de venda)')}
dizem que usam contrato sempre, mas não dominam nada ou usam só Word
{pc(data.contradicao?.contradizem, data.contradicao?.total_usa_sempre)}%
de {nf(data.contradicao?.total_usa_sempre)} que dizem "uso sempre" estão com falsa sensação de proteção
x.n))} pctVal={null} sub={nf(r.n)} color="#a78bfa" />} />
x.n))} pctVal={null} sub={nf(r.n)} color="var(--clr-neg)" />} />
{secTitle('Aquisição e timing')}
x.n))} pctVal={null} sub={nf(r.n)} color="var(--clr-info)" />} />
b.n - a.n).slice(0, 8)}
render={(r, i) => x.n))} pctVal={null} sub={nf(r.n)} color="var(--clr-info)" />} />
x.leads))} pctVal={null} sub={`${nf(r.leads)} · ${pc(r.alto, r.leads)}% alto risco`} color="var(--fmn-gold)" />} />
Base histórica do inLead + novos leads da vitrine própria. Todos os blocos respeitam o filtro de período acima.
)}