// marketing-campaign-detail.jsx — Campaign detail drawer
// Opens at 80vw; shows campaign metrics, performance, recipient sample and timeline.
(function () {
// ── helpers ──────────────────────────────────────────────────────────
const pct = (n) => `${(n * 100).toFixed(1).replace('.', ',')}%`;
const fmtN = (n) => (n || 0).toLocaleString('pt-BR');
const ChannelChip = ({ kind }) => {
const map = {
whatsapp: { icon: 'whatsapp', label: 'WhatsApp', color: '#16A34A', bg: '#DCFCE7' },
email: { icon: 'mail', label: 'E-mail', color: '#1D4ED8', bg: '#DBEAFE' },
sms: { icon: 'phone', label: 'SMS', color: '#7C3AED', bg: '#EDE9FE' }
};
const m = map[kind] || map.email;
return (
);
};
const StatusBadge = ({ s }) => {
const map = {
active: { cls: 'badge-success', label: 'Ativa' },
scheduled: { cls: 'badge-info', label: 'Agendada' },
completed: { cls: 'badge-neutral', label: 'Concluída' },
draft: { cls: 'badge-warning', label: 'Rascunho' },
paused: { cls: 'badge-danger', label: 'Pausada' }
};
const m = map[s] || map.draft;
return {m.label} ;
};
// Deterministic synthetic daily timeseries based on campaign
function buildSeries(c) {
const seed = c.id.charCodeAt(c.id.length - 1) || 1;
const days = 14;
const out = [];
for (let i = 0; i < days; i++) {
const t = (i + seed) * 0.7;
const base = c.sent / days;
const wave = Math.sin(t) * .35 + Math.cos(t / 1.6) * .25;
const sent = Math.max(0, Math.round(base * (1 + wave) * (c.status === 'paused' && i > 7 ? 0 : 1)));
const opened = Math.round(sent * (c.open || 0));
const clicked = Math.round(sent * (c.click || 0));
const conv = Math.round(sent * (c.conv || 0));
out.push({ d: i + 1, sent, opened, clicked, conv });
}
return out;
}
// ── Tiny multi-series area chart (SVG) ───────────────────────────────
function PerfChart({ series }) {
const [hover, setHover] = React.useState(null);
const W = 560, H = 200, P = { l: 36, r: 12, t: 14, b: 24 };
const max = Math.max(1, ...series.map((s) => s.sent));
const lines = [
{ key: 'sent', color: '#0EA5E9', label: 'Enviados', fill: 'rgba(14,165,233,.12)' },
{ key: 'opened', color: '#16A34A', label: 'Aberturas', fill: 'rgba(22,163,74,.12)' },
{ key: 'clicked', color: '#F59E0B', label: 'Cliques', fill: 'none' },
{ key: 'conv', color: '#7C3AED', label: 'Conversões', fill: 'none' }
];
const x = (i) => P.l + (i / (series.length - 1)) * (W - P.l - P.r);
const y = (v) => P.t + (1 - v / max) * (H - P.t - P.b);
const path = (key) => series.map((s, i) => `${i === 0 ? 'M' : 'L'} ${x(i)},${y(s[key])}`).join(' ');
const area = (key) => `${path(key)} L ${x(series.length - 1)},${H - P.b} L ${x(0)},${H - P.b} Z`;
const onMove = (e) => {
const rect = e.currentTarget.getBoundingClientRect();
const px = ((e.clientX - rect.left) / rect.width) * W;
const i = Math.round(((px - P.l) / (W - P.l - P.r)) * (series.length - 1));
setHover(Math.max(0, Math.min(series.length - 1, i)));
};
return (
setHover(null)}>
{/* Y gridlines */}
{[0, 0.25, 0.5, 0.75, 1].map((t, i) =>
{Math.round(max * t)}
)}
{/* Series */}
{lines.map((ln) =>
{ln.fill !== 'none' && )}
{/* Hover */}
{hover !== null &&
}
{/* X labels (every 2 days) */}
{series.map((s, i) => i % 2 === 0 &&
D{s.d} )}
{/* Tooltip */}
{hover !== null &&
Dia {series[hover].d}
{lines.map((ln) =>
{ln.label}
{fmtN(series[hover][ln.key])}
)}
}
{/* Legend */}
{lines.map((ln) =>
)}
);
}
// ── Funnel bars ──────────────────────────────────────────────────────
function Funnel({ c }) {
const stages = [
{ label: 'Enviadas', count: c.sent, color: '#0EA5E9' },
{ label: 'Entregues', count: Math.round(c.sent * 0.97), color: '#0284C7' },
{ label: 'Abertas', count: Math.round(c.sent * c.open), color: '#16A34A' },
{ label: 'Clicadas', count: Math.round(c.sent * c.click),color: '#F59E0B' },
{ label: 'Converteram', count: Math.round(c.sent * c.conv), color: '#7C3AED' }
].filter((s) => s.count > 0);
if (!stages.length) return Sem dados de funil ainda.
;
const top = stages[0].count;
return (
{stages.map((s, i) => {
const w = (s.count / top) * 100;
const prev = i > 0 ? stages[i - 1].count : null;
const dropRate = prev ? ((prev - s.count) / prev) : null;
return (
{s.label}
{pct(s.count / top)}
{dropRate !== null &&
−{pct(dropRate)} vs. anterior
}
);
})}
{data.map((d, i) =>
{d.label}
{pct(d.v / max * (d.total || 1))}
)}
{icon &&
}
{label}
{value}
{hint &&
{hint}
}
);
}
// ── Recipients sample ────────────────────────────────────────────────
const RECIPIENT_NAMES = [
'Aurora Cosméticos', 'Studio Glam', 'Espaço Vitória', 'Beleza Natural ME', 'Lumière Estética',
'Mariana Castro', 'Salão Bella Rosa', 'Camila Andrade', 'Carolina Mendes', 'Fernanda Costa',
'Renata Souza', 'Patrícia Lima', 'Atelier Aurora', 'Studio Maquiagem RJ', 'Beleza & Cia',
'Daniela Rocha', 'Juliana Pereira', 'Letícia Albuquerque', 'Sofía Vieira', 'Beatriz Moreira',
'Empresa Verde Vivo', 'Luiza Fontes', 'Studio Pink', 'Bella Linda Studio', 'Camilla Ferraz',
'Lorena Diniz', 'Thaís Magalhães', 'Vanessa Castro', 'Esmalteria Glow', 'Centro Estético Lux',
'Pri Cabeleireira', 'Mônica Tavóra', 'Ana Beatriz Lima', 'Loja da Suê', 'Aline Bittencourt',
'Bruna Pacheco', 'Cláudia Mello', 'Esmaltería Rosa', 'Fernanda Borges', 'Glamour Studio',
'Hérica Sampaio', 'Indústria Bella', 'Joana Cardoso', 'Kelly Nogueira', 'Larissa Domingues',
'Marta Reis', 'Nádia Soares', 'Olívia Cardim', 'Paula Vasconcelos', 'Quitanda Beleza',
'Raquel Tavares', 'Sandra Pinheiro', 'Tatiane Oliveira', 'Ursula Ramos', 'Vitória Castro'
];
const STATUSES = ['delivered', 'opened', 'clicked', 'converted', 'failed', 'pending'];
const STATUS_CFG = {
delivered: { label: 'Entregue', color: '#0EA5E9', icon: 'check' },
opened: { label: 'Abriu', color: '#16A34A', icon: 'mail' },
clicked: { label: 'Clicou', color: '#F59E0B', icon: 'arrow-up-right' },
converted: { label: 'Converteu', color: '#7C3AED', icon: 'star' },
failed: { label: 'Falhou', color: '#DC2626', icon: 'x' },
pending: { label: 'Pendente', color: '#94A3B8', icon: 'clock' }
};
// Simple deterministic PRNG so each campaign id gets a stable but distinct distribution
function makeRng(seed) {
let s = seed >>> 0;
return () => { s = (s * 1664525 + 1013904223) >>> 0; return s / 0xffffffff; };
}
function buildRecipients(c) {
const seed = c.id.split('').reduce((a, ch) => a * 31 + ch.charCodeAt(0), 7) >>> 0;
const rng = makeRng(seed);
if (c.status === 'draft') return [];
// Target distribution based on the campaign's metrics. Always include at least one of each
// major status so the user sees the spectrum.
const total = RECIPIENT_NAMES.length;
const targetConv = Math.max(1, Math.round(total * (c.conv || 0.05)));
const targetClickOnly = Math.max(1, Math.round(total * Math.max(0, (c.click || 0.15) - (c.conv || 0.05))));
const targetOpenOnly = Math.max(2, Math.round(total * Math.max(0, (c.open || 0.55) - (c.click || 0.15))));
const targetFailed = Math.max(1, Math.round(total * 0.04));
const targetPending = c.status === 'scheduled' ? total :
c.status === 'active' ? Math.max(2, Math.round(total * 0.10)) :
Math.max(1, Math.round(total * 0.02));
// Remaining are delivered-only
const usedNonDelivered = targetConv + targetClickOnly + targetOpenOnly + targetFailed + targetPending;
const targetDelivered = Math.max(1, total - usedNonDelivered);
const seq = [];
const pushN = (n, st) => { for (let i = 0; i < n; i++) seq.push(st); };
if (c.status === 'scheduled') {
pushN(total, 'pending');
} else {
pushN(targetConv, 'converted');
pushN(targetClickOnly, 'clicked');
pushN(targetOpenOnly, 'opened');
pushN(targetDelivered, 'delivered');
pushN(targetFailed, 'failed');
pushN(targetPending, 'pending');
}
// Shuffle deterministically
for (let i = seq.length - 1; i > 0; i--) {
const j = Math.floor(rng() * (i + 1));
[seq[i], seq[j]] = [seq[j], seq[i]];
}
return RECIPIENT_NAMES.slice(0, seq.length).map((name, i) => {
const day = Math.max(1, 14 - Math.floor(i / 5));
const hh = String(8 + Math.floor(rng() * 12)).padStart(2, '0');
const mm = String(Math.floor(rng() * 60)).padStart(2, '0');
const phone = `(${11 + (i % 88)}) 9${String(1000 + Math.floor(rng() * 8999)).slice(0, 4)}-${String(1000 + Math.floor(rng() * 8999)).slice(0, 4)}`;
return { name, st: seq[i], day, time: `${hh}:${mm}`, phone };
});
}
function RecipientList({ c }) {
const [filter, setFilter] = React.useState('all');
const all = React.useMemo(() => buildRecipients(c), [c]);
const shown = filter === 'all' ? all : all.filter((r) => r.st === filter);
const counts = React.useMemo(() => {
const m = { all: all.length };
STATUSES.forEach((s) => { m[s] = all.filter((r) => r.st === s).length; });
return m;
}, [all]);
if (!all.length) {
return
Esta campanha ainda não foi disparada — nenhum destinatário na lista.
;
}
return (
<>
{[['all', 'Todos']].concat(STATUSES.map((s) => [s, STATUS_CFG[s].label])).map(([id, l]) =>
setFilter(id)} className="chip" style={{
cursor: 'pointer', padding: '4px 10px', height: 26, fontSize: 11.5,
background: filter === id ? 'var(--accent-soft)' : 'var(--surface-3)',
color: filter === id ? 'var(--accent-700)' : 'var(--text-muted)',
fontWeight: filter === id ? 700 : 500
}}>
{l} {counts[id] || 0}
)}
{/* Sticky column header */}
Destinatário
Contato
Status
{/* Scrollable body */}
{shown.map((r, i) => {
const cfg = STATUS_CFG[r.st];
const initials = r.name.split(' ').filter(Boolean).slice(0, 2).map((p) => p[0]).join('').toUpperCase();
return (
{initials}
{r.name}
D{r.day} · {r.time}
{r.phone}
);
})}
{!shown.length &&
Nenhum destinatário nesta categoria.
}
{preview}
Quero meu cupom ›
09:32 ✓✓
);
}
// ── Section heading ──────────────────────────────────────────────────
function H({ icon, children, action }) {
return (
{icon &&
{children}
{isLive ? 'Acompanhe os resultados em tempo real.' : 'Histórico finalizado.'}
{[
{ id: 'overview', label: 'Visão geral', icon: 'reports' },
{ id: 'audience', label: 'Destinatários', icon: 'team' },
{ id: 'message', label: 'Mensagem', icon: 'chat' },
{ id: 'timeline', label: 'Histórico', icon: 'clock' }
].map((t) =>
setTab(t.id)} style={{
padding: '10px 16px', cursor: 'pointer',
fontSize: 13.5, fontWeight: 600,
color: tab === t.id ? 'var(--accent-700)' : 'var(--text-muted)',
borderBottom: '2px solid ' + (tab === t.id ? 'var(--accent)' : 'transparent'),
marginBottom: -1,
display: 'flex', alignItems: 'center', gap: 6
}}>
)}
{/* KPI tiles */}
{/* Chart */}
}>Performance ao longo do tempo
Aberturas por dispositivo
Origem dos cliques
}
{tab === 'audience' &&
}>Destinatários ({fmtN(RECIPIENT_NAMES.length)} de {fmtN(sent)})
}
{tab === 'message' &&
{channelLabel}
{campaign.audience}
{campaign.scheduled}
Quero meu cupom · atende.ia/cupom-volta
utm_campaign={campaign.id}, utm_medium={campaign.channel}, utm_source=atende-ia
Ativado · 3 dias após sem resposta
{campaign.id === 'c1' ? 'Variante B venceu por +12%' : 'Desativado'}
}
{tab === 'timeline' &&
Histórico da campanha
}
);
}
function InsightItem({ color, icon, title, body }) {
return (
);
}
function KeyVal({ label, children }) {
return (
{label}
{children}
);
}
window.CampaignDetailDrawer = CampaignDetailDrawer;
})();