// Afiliados → DRE Afiliados (spec 2026-07-24-dre-afiliados-design): demonstrativo de
// resultado por competência (coorte date_created), por afiliado ou consolidado ("Todos"),
// com cascata de produto. SEM seletor de Reembolso — fixo em `pedido` (nota fixa abaixo do
// filtro). UI espelha o Funnel Sales Tracker (ProductFunnel.jsx): card com borderCollapse,
// números fenix-num mono tabulares, subtotais com fundo cinza e negrito, deduções em
// var(--negative), bloco final destacado em var(--positive-bg)/var(--negative-bg), ROAS em
// linha navy. TODAS as contas vêm prontas do backend (inclusive `pct`) — aqui é só formatação.
// Identificadores top-level com prefixo `dre` (escopo Babel compartilhado entre .jsx — grep
// antes de adicionar nomes novos).
const dreFmtPct = (v) => (v == null ? '—' : PCT(v));
// Zero renderiza "0" apagado (spec: linhas de plataforma/custo com valor 0).
const dreMoney = (v) => (v === 0 ? 0 : USD(v));
// Deduções (chargeback/reembolso): sempre ABS, sempre "− " em vermelho — nunca voltam.
const dreDeductionValue = (v) => (
v > 0
? {'− ' + USD(v)}
: 0
);
// Projeção pode devolver receita (realizado acima da média dos 2 meses anteriores) — nesse
// caso é positiva na tela (var(--positive), prefixo "+"); do contrário é dedução (var(--negative)).
const dreProjecaoValue = (v) => (
v > 0 ? {'− ' + USD(v)}
: v < 0 ? {'+ ' + USD(Math.abs(v))}
: 0
);
const dreRecTitle = (r) => `Atribuído ${USD(r.atribuido)} + rateio (não atribuído) ${USD(r.rateio)}`;
// Uma linha da tabela — função (não componente JSX) chamada dentro de um array, com key.
// opts: { bg, bold, sub (nota sob o rótulo), title (tooltip), rl (sublinha "% RL"), color
// (cor só do valor), rowColor (cor da linha inteira — usada pela linha final ROAS) }.
const dreRow = (key, label, valueNode, pctNode, opts = {}) => {
const labelColor = opts.rowColor || (opts.bold ? 'var(--fg-1)' : 'var(--fg-2)');
const valueColor = opts.rowColor || opts.color || (opts.bold ? 'var(--fg-1)' : 'var(--fg-2)');
const pctColor = opts.rowColor || 'var(--fg-3)';
return (
{label}
{opts.sub &&
{opts.sub}
}
{valueNode}
{pctNode}
{opts.rl != null &&
% RL {dreFmtPct(opts.rl)}
}
);
};
const DreAfiliadosView = ({ rosterAll = [], families = [] }) => {
const [period, setPeriod] = React.useState('30d');
const [customRange, setCustomRange] = React.useState(null);
const [affiliate, setAffiliate] = React.useState('todos');
const [product, setProduct] = React.useState('todos');
const [funnel, setFunnel] = React.useState('todos');
const [data, setData] = React.useState(null);
const [demo, setDemo] = React.useState(false);
const fullLoading = useFullLoading();
const withLoad = (fn) => (...a) => { fullLoading.mark(); fn(...a); };
const handleProductChange = (p) => { withLoad(setProduct)(p); setFunnel('todos'); };
React.useEffect(() => {
const began = fullLoading.begin();
let cancelled = false;
fetchDreAPI({ period, affiliate, product, funnel, start: customRange?.start, end: customRange?.end })
.then(d => { if (cancelled) return; setData(d); setDemo(false); })
.catch(() => { if (cancelled) return; setData(buildDreMock(period, affiliate, product, funnel)); setDemo(true); })
.finally(() => { fullLoading.end(began); });
return () => { cancelled = true; };
}, [period, customRange, affiliate, product, funnel]);
// Cascata de produto — mesmo padrão do FilterBar (families = /product-families).
const sortedFamilies = React.useMemo(() => [...families].sort((a, b) => a.name.localeCompare(b.name)), [families]);
const variants = product !== 'todos' ? (families.find(f => f.name === product)?.variants || []) : [];
// Dropdown de afiliado — `rosterAll` é o roster do /affiliates SEM os filtros globais de
// plataforma/tráfego (a DRE esconde o FilterBar; usar `rows` filtrado faria o dropdown
// sumir com afiliados se outra aba tivesse deixado Plataforma/Tráfego setados). "Todos"
// primeiro = DRE consolidada. Ordem preservada (revenue-desc herdada do endpoint/mock) —
// deliberado, não reordena por nome.
const affiliateOptions = React.useMemo(() => {
const seen = new Set();
const opts = [{ key: 'todos', label: 'Todos' }];
rosterAll.forEach(r => {
if (r.name && r.name !== 'Não atribuído' && !seen.has(r.name)) { seen.add(r.name); opts.push({ key: r.name, label: r.name }); }
});
return opts;
}, [rosterAll]);
return (