// Reembolso → Calendário de Reembolso · gráficos (spec 2026-07-30).
// Três blocos: série de duas faixas, barras FE×UP e motivos.
//
// PREFIXO `rcc` em TODOS os identificadores de topo: os .jsx dividem um único escopo
// de script (Babel standalone) e colisão de nome derruba o app inteiro em silêncio.
//
// Paleta validada com o validador da skill dataviz (light, superfície #fff):
// #3B82F6 + #FD7119 -> ALL CHECKS PASS, CVD ΔE 30,3 (protan). var(--fenix-blue)
// (#303880) REPROVOU a banda de luminosidade como preenchimento (L 0,377) e
// var(--fenix-navy) reprovou também o piso de croma (lê como cinza) — por isso o
// lado esquerdo é #3B82F6, que já é cor de produção no projeto (Clickbank, LD_COLORS).
const RCC_A = '#3B82F6'; // 1ª janela
const RCC_B = '#FD7119'; // 2ª janela
const RCC_TAXA = '#FD7119';
const RCC_VOL = '#9AA3B5';
// Índices da série cobertos por uma janela (para a faixa sombreada). Compara ISO como
// string — 'YYYY-MM-DD' ordena lexicograficamente igual à data.
const rccFaixa = (serie, lado) => {
if (!lado || !serie.length) return null;
const d0 = String(lado.start).slice(0, 10), d1 = String(lado.end).slice(0, 10);
let i0 = -1, i1 = -1;
serie.forEach((p, i) => {
if (p.bucket >= d0 && p.bucket <= d1) { if (i0 < 0) i0 = i; i1 = i; }
});
return i0 < 0 ? null : { i0, i1 };
};
// 'T12:00:00' força parse LOCAL (date-only vira UTC midnight e em BRT o eixo X
// rotularia o dia anterior) — mesma regra do Leads.jsx.
const rccDia = (iso) => {
const d = new Date(iso + 'T12:00:00');
return String(d.getDate()).padStart(2, '0') + '/' + String(d.getMonth() + 1).padStart(2, '0');
};
const RCC_WD = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
const rccDiaLongo = (iso) => {
const d = new Date(iso + 'T12:00:00');
return `${RCC_WD[d.getDay()]} ${rccDia(iso)}`;
};
// Série de DUAS FAIXAS com eixo X compartilhado: taxa (%) em cima, volume (n) embaixo.
// Nunca eixo duplo — escalas incompatíveis pedem dois gráficos, não dois eixos.
const RccSerie = ({ serie = [], lados, onHoverDay }) => {
const [ref, w] = useWidth();
const [hover, setHover] = React.useState(null);
if (!serie.length) return
variação vs. a média do próprio produto nos 7 dias anteriores
)}
)}
);
};
// Cabeçalho compartilhado dos blocos: título + seletor de granularidade do drill.
// Desde a reforma de 30/jul cada bloco tem o SEU estado `detalhe` — um estado
// compartilhado fazia o toggle de um bloco trocar os outros (bug reportado).
const RccHead = ({ eye, titulo, detalhe, setDetalhe }) => (
{eye}
{titulo}
Detalhar por
);
const rccQuebra = (item, detalhe) => (detalhe === 'etapa' ? item.porEtapa : item.porFunil) || [];
// Cor POR ENTIDADE, idêntica nos DOIS donuts de um par (regra dataviz: a cor segue
// a entidade, nunca o rank dentro de cada donut). "Sem motivo informado" é cinza
// neutro deliberado, fora da paleta categórica. DONUT_PALETTE vem do KpiParts.jsx
// (escopo Babel compartilhado — mesmo precedente do LD_COLORS no LeadsEconomics).
const rccCorMap = (labels) => {
const map = {};
let i = 0;
labels.forEach(l => {
map[l] = l === 'Sem motivo informado'
? 'var(--gray-400)' : DONUT_PALETTE[i++ % DONUT_PALETTE.length];
});
return map;
};
// Tabela compacta da quebra (funil/etapa). NÃO estica 100% (feedback 30/jul: nada
// espremido na ponta do bloco): colunas com largura natural, agrupadas à esquerda.
// Hover padrão de linha (rodada 2, 31/jul): indigo wash da marca — vivo e
// semanticamente livre (não colide com verde/âmbar/vermelho nem com a seleção laranja).
const rccRowHover = {
onMouseEnter: (e) => { e.currentTarget.style.background = 'var(--fenix-blue-100)'; },
onMouseLeave: (e) => { e.currentTarget.style.background = 'transparent'; },
};
// `contagem` = colunas de vendas/reemb+cgbk/taxa (bloco 3); sem ela, shares e Δ (bloco 4).
const RccQuebraTabela = ({ item, detalhe, lados, contagem }) => {
const linhas = rccQuebra(item, detalhe);
return (
);
};
// Barra 100% empilhada FE|UP de UMA janela — +50% de altura (20→30px) e anotações
// AO LADO das barras, não na borda do bloco (feedback 30/jul). O rótulo direto
// dentro do segmento é obrigatório (o laranja fica abaixo de 3:1 contra o branco).
const RccBarraFeUp = ({ lado, d }) => {
if (!d || (d.feRefunds + d.upRefunds) === 0) {
return (
{lado}sem reemb+cgbk nesta janela
);
}
const tot = d.feRefunds + d.upRefunds;
const fePct = d.feRefunds / tot * 100;
return (
UP nas vendas {d.upPctVendas == null ? '—' : PCT(d.upPctVendas)}
0 ? 'var(--negative)' : 'var(--positive)' }}
title="Diferença entre o peso do upsell nos reemb+cgbk e nas vendas. Positivo = o upsell reembolsa acima do que vende.">
{d.upIndex == null ? '—'
: d.upIndex > 0 ? `UP reembolsa mais (+${d.upIndex.toFixed(1)} pp)`
: d.upIndex < 0 ? `UP reembolsa menos (${d.upIndex.toFixed(1)} pp)`
: 'proporcional'}
);
};
// Bloco 3 (reforma 30/jul): DOIS donuts — um por janela — com fatias = PRODUTOS
// (reemb+cgbk). A legenda traz as VENDAS junto (visíveis sem clicar). Clique num
// produto abre o funil dele: barras FE|UP gordas + quebra por funil/etapa — o
// padrão TopProductsFunnel da página de afiliado.
const RccFeUp = ({ produtos = [], lados, detalhe, setDetalhe }) => {
const [sel, setSel] = React.useState(null);
const cores = rccCorMap(produtos.map(p => p.label));
const p = produtos.find(x => x.key === sel) || null;
const donut = (k) => {
const K = k.toUpperCase();
const segs = produtos.map(x => ({
label: x.label, value: x['refunds' + K], color: cores[x.label], meta: x }));
const total = segs.reduce((s, x) => s + (x.value || 0), 0);
return (
Fatia = reemb+cgbk do produto na janela (produto sem devolução não vira fatia);
a legenda mostra as vendas junto. Cor de cada produto é a MESMA nos dois donuts.
No funil aberto: FE navy · UP laranja.
);
};
// Reembolsos por CANAL — só volume: o banco NÃO tem motivo para Tauk/Salesbound/
// Logicall (o chargebackReasonCode da Tauk está 98% vazio; o comparativo por motivo
// do Addendum trimestral foi classificação manual, fora do banco).
const RccParceiros = ({ parceiros = [], lados }) => {
const max = parceiros.reduce((m, p) => Math.max(m, p.refundsA, p.refundsB), 1);
return (
Só volume: nenhuma plataforma de recuperação grava MOTIVO no banco (o
comparativo por motivo do relatório trimestral foi classificação manual).
BuyGoods = os totais desta página; parceiros com janela pela data do pedido.
);
};
// Bloco 4 (reforma 30/jul): DOIS donuts — um por janela — com fatias = MOTIVOS.
// O share fecha 100% sobre os REEMB+CGBK da janela (nunca sobre vendas): as fatias
// somam exatamente o total do centro — é a resposta visual ao "fecha 100% de quê?".
const RccMotivos = ({ motivos = [], lados, kpis = {}, parceiros, detalhe, setDetalhe }) => {
const [sel, setSel] = React.useState(null);
const cores = rccCorMap(motivos.map(m => m.label));
const m = motivos.find(x => x.key === sel) || null;
const kpi = (k) => {
const K = k.toUpperCase();
return (
As fatias fecham 100% sobre os reemb+cgbk da janela (o total do centro) —
nunca sobre vendas; cancelamentos ficam fora da métrica (decisão 30/jul).
"Sem motivo informado" em cinza: chargeback formal nunca traz motivo, e só a
buygoods grava motivo (~60% das linhas). Na quebra aberta, o denominador é o
funil (ou a etapa): "que fatia dos reemb+cgbk deste funil carrega este motivo".