; const W = 640, H = 160, padL = 34, padB = 20, padT = 10; const maxV = Math.max(...data.map(d => Math.max(d.fat || 0, d.gasto || 0)), 1); const stepX = (W - padL) / Math.max(data.length - 1, 1); const y = v => H - padB - (v / maxV) * (H - padB - padT); const x = i => padL + i * stepX; const linha = campo => data.map((d, i) => `${i === 0 ? 'M' : 'L'} ${x(i)} ${y(d[campo] || 0)}`).join(' '); const area = campo => `${linha(campo)} L ${x(data.length - 1)} ${H - padB} L ${x(0)} ${H - padB} Z`; return ( ); } /* ── Conteúdo do relatório ──────────────────────────────────────────── */ function RelatorioConteudo({ destinatario, rangeFrom, rangeTo, dados }) { const dest = DESTINATARIOS[destinatario]; const fmt = window.fmtBRL; const { data, chartDays, weeklySales, periodHeatmap, salesByProduct, salesBySource, } = dados; const fat = data?.fat || 0, lucro = data?.lucro || 0, gasto = data?.gasto || 0; const margem = data?.margem || 0, totalVendas = data?.totalVendas || 0; const cpaMedio = data?.cpaMedio ?? null, roas = data?.roas ?? null, roi = data?.roi ?? null; const cac = data?.cac ?? null, ticketMedio = data?.ticketMedio ?? null, ltv = data?.ltv ?? null; const bkRows = data?.breakdownRows || []; const funnelSteps = data?.funnelSteps || null; const FotoMap = window.SalesMapWidget || null; const BreakdownTable = window.BreakdownTable, FlowFunnel = window.FlowFunnel; const WeeklySalesChart = window.WeeklySalesChart, SalesByPeriod = window.SalesByPeriod; const SalesList = window.SalesList, CircularProgress = window.CircularProgress; const totalOrigem = (salesBySource || []).reduce((s, o) => s + o.sales, 0) || 1; return (

{/* ── Cabeçalho: marca, período, destinatário ── */}

Tracker FMN

Relatório Financeiro

Período: {fmtDataBR(rangeFrom)} a {fmtDataBR(rangeTo)}

Preparado para

{dest.nome}

{dest.subtitulo && (

{dest.subtitulo}

)} {/* ── KPIs ── */}

{/* ── Gasto x Faturamento + Detalhamento ── */}

{BreakdownTable ? : null}

{/* ── Funil: sempre no topo de uma folha nova ── */} {funnelSteps && ( {FlowFunnel ? : null} )} {/* ── Grade final: dia da semana / período / mapa, fonte / produto — também começa em folha nova, é o bloco mais alto do relatório. ── */}

{WeeklySalesChart && weeklySales ? : null} {SalesByPeriod && periodHeatmap ? : null}

{FotoMap ? : null}

{SalesList && CircularProgress && salesBySource?.length ? (

{salesBySource.map((o, i) => (

{o.name} {o.sales} {o.pct.toFixed(1)}%

))}

) :

Sem dados no período.

} {SalesList && salesByProduct?.length ? (

{salesByProduct.map((p, i) => (

{p.name} {p.sales} {p.pct.toFixed(1)}%

))}

) :

Sem dados no período.

}

Gerado pelo Tracker FMN em {new Date().toLocaleDateString('pt-BR')}

); } /* ── Overlay de impressão ───────────────────────────────────────────── Cobre a tela inteira só quando exportando. O CSS de impressão injetado uma vez esconde TUDO fora de .relatorio-print (visibility:hidden em tudo, visibility:visible só dentro do relatório) e força as cores de fundo a aparecerem no PDF — sem isso o Chrome imprime fundo branco por padrão e o texto claro fica invisível em cima dele. */ function garantirCssImpressao() { if (document.getElementById('relatorio-print-css')) return; const style = document.createElement('style'); style.id = 'relatorio-print-css'; style.textContent = ` @media print { html, body { background: #0f1013 !important; /* tokens.css trava overflow:hidden e height:100% no app inteiro (pra tela normal), o que soma no corte de página junto com o fixed abaixo. Vira documento normal só durante a impressão. */ overflow: visible !important; height: auto !important; } /* #root não precisa mais de tratamento especial: o relatório agora é um portal direto pro (ver RelatorioOverlay), então não vive mais dentro da árvore do #root em nenhum momento — inclusive na impressão. Esconder #root evita que o app inteiro (invisível, mas ainda ocupando espaço em overflow:visible) empurre o relatório pra baixo ou deixe folha em branco antes dele. */ #root { display: none !important; } body * { visibility: hidden !important; } .relatorio-print, .relatorio-print * { visibility: visible !important; } /* A CAUSA REAL DO CORTE: .relatorio-overlay-print é position:fixed na tela (pra cobrir tudo com um fundo escuro). Motor de impressão do Chrome trata position:fixed como preso a UMA página só — reserva a altura da tela e descarta tudo que passa disso, nunca gera 2ª folha. Aqui ele volta a ser um bloco normal do documento, que é o que permite o conteúdo fluir e paginar de verdade. */ .relatorio-overlay-print { position: static !important; inset: auto !important; overflow: visible !important; height: auto !important; padding: 0 !important; background: transparent !important; } .relatorio-print { position: static !important; width: 100% !important; margin: 0 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .relatorio-print * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .no-print { display: none !important; } @page { size: A4; margin: 10mm; } } `; document.head.appendChild(style); } function RelatorioOverlay({ destinatario, rangeFrom, rangeTo, dados, onClose }) { // Portal direto pro , IRMÃO de #root, não filho dele. // // Por que isso é obrigatório e não só "mais limpo": o relatório nasce // dentro da árvore normal do React, lá no fundo de DashboardScreen. Na // TELA isso não incomoda, porque position:fixed escapa visualmente de // qualquer ancestral. Mas na IMPRESSÃO, quando ele precisa voltar a ser // position:static pra poder paginar, ele volta a ficar sujeito à altura e // ao overflow de TODOS os ancestrais reais — não só o #root (que corrigi // antes), mas qualquer wrapper de tela no meio do caminho também. Corrigir // ancestral por ancestral é jogo de gato e rato; o portal elimina o // problema inteiro, porque não existe mais ancestral nenhum entre o // relatório e o pra travar altura. const [portalNode] = useState(() => { const el = document.createElement('div'); el.id = 'relatorio-portal'; return el; }); useEffect(() => { document.body.appendChild(portalNode); garantirCssImpressao(); // Pequeno atraso: garante que o mapa (SVG grande) e os gráficos já // pintaram antes de abrir o diálogo de impressão. const t = setTimeout(() => window.print(), 350); const aoTerminar = () => onClose(); window.addEventListener('afterprint', aoTerminar); return () => { clearTimeout(t); window.removeEventListener('afterprint', aoTerminar); document.body.removeChild(portalNode); }; }, []); return createPortal((

), portalNode); } /* ── Botão "Exportar Relatório" com o menu Felipe / Samuel ───────────── */ function RelatorioButton({ rangeFrom, rangeTo, dados }) { const [menuAberto, setMenuAberto] = useState(false); const [ativo, setAtivo] = useState(null); // 'felipe' | 'samuel' | null return ( <>

{menuAberto && ( <>

setMenuAberto(false)}/>

{Object.entries(DESTINATARIOS).map(([key, d]) => ( ))}

)}

{ativo && ( setAtivo(null)}/> )} ); } window.RelatorioButton = RelatorioButton;