// ─── Ruptura ──────────────────────────────────────────────────────────────────
// Produtos zerados (ruptura) e prestes a zerar (risco), por filial. Lê o retrato que o
// coletor grava em loja/{cnpj}/ruptura/atual e os nomes em .../ruptura/catalogo.
//
// O retrato traz só número: estoque, venda/dia, curva, preço e as datas da última compra
// e da última venda. "Zera em N dias", "sem comprar há N dias" e "sem vender há N dias"
// são calculados AQUI — subir o número pronto o deixaria velho já no primeiro dia,
// enquanto a divisão custa nada.
const RUP_CURVAS = ['A', 'B', 'C'];
// Janela de venda que o Coletor usa para calcular o venda/dia (RupturaBuilder.
// DiasHistoricoVenda). Ele grava Math.Round(venda90 / 90, 3), então o total do período
// volta multiplicando — não precisa mandar mais um número por produto num doc que já
// tem 14 mil itens. Se mudar lá, mude aqui: o número vira mentira silenciosamente.
const RUP_DIAS_HIST = 90;
// ── Conserto de acento quebrado nos nomes vindos do Farmax ───────────────────
// O byte cp1252 do acento foi lido como UTF-8 em algum ponto e virou U+FFFD ("�").
// O caractere original SE PERDEU — não dá para decodificar de volta, só reconhecer
// o padrão. Por isso: dicionário primeiro (decisão segura, palavra a palavra) e
// regras genéricas só onde o português não é ambíguo. Nesta base são 40 nomes de
// 5.564 (0,7%); o certo é consertar na origem (o coletor deveria ler cp1252), e
// quando isso acontecer estas regras viram inócuas — nada mais terá "�".
const RUP_PALAVRAS = [
// -ÃO: indistinguível de -ÇO sem saber a palavra (VERÃO × LENÇO), então vai na mão
[/UNI�O/gi, 'UNIÃO'], [/REGI�O/gi, 'REGIÃO'], [/VER�O/gi, 'VERÃO'],
[/SAB�O/gi, 'SABÃO'], [/ALGOD�O/gi, 'ALGODÃO'],[/CARV�O/gi, 'CARVÃO'],
[/LIM�O/gi, 'LIMÃO'], [/MAM�O/gi, 'MAMÃO'], [/MEL�O/gi, 'MELÃO'],
[/PADR�O/gi, 'PADRÃO'], [/LE�O/gi, 'LEÃO'],
// -ÇO/-ÇA com consoante antes: o genérico não alcança
// LENÇO antes de NÃO: senão "LEN�O" casa em "N�O" e vira "LENÃO"
[/LEN�O/gi, 'LENÇO'], [/SERVI�O/gi, 'SERVIÇO'], [/\bN�O\b/gi, 'NÃO'],
// vogais acentuadas soltas
[/�GUA/gi, 'ÁGUA'], [/\bG�S\b/gi, 'GÁS'], [/CAN�RIO/gi, 'CANÁRIO'],
[/IMPERME�VEL/gi, 'IMPERMEÁVEL'], [/HORTEL�/gi, 'HORTELÃ'],
[/MA��(?=\s|$)/gi, 'MAÇÃ'], [/\bCAF�\b/gi, 'CAFÉ'], [/\bBEB�\b/gi, 'BEBÊ'],
[/�LCOOL/gi, 'ÁLCOOL'], [/�LEO/gi, 'ÓLEO'], [/PROTE�NA/gi, 'PROTEÍNA'],
];
// Genéricas, só onde não há ambiguidade em português:
// letra + � + A → Ç (segurança, força, pinça, postiça)
// A|O + � + O → Ç (braço, palhaço, poço) — "aão"/"oão" não existem
// letra + �� + O → ÇÃO (prestação, aplicação, cognição)
// dígito + � → ° (360°)
// "E�O" (preço × leão) e "I�O" (serviço × união) ficam de fora: sem a palavra,
// chutar troca uma pela outra — e um "�" na tela é menos pior que a palavra errada.
function rupFixTexto(s) {
let t = String(s ?? '');
if (!t.includes('�')) return t;
for (const [re, sub] of RUP_PALAVRAS) t = t.replace(re, sub);
t = t.replace(/(\d)�/g, '$1°');
t = t.replace(/([A-Za-zÀ-ÿ])��([oO])/g, (m, p1, p2) => p1 + (p2 === 'O' ? 'ÇÃ' : 'çã') + p2);
t = t.replace(/([A-Za-zÀ-ÿ])�([aA])/g, (m, p1, p2) => p1 + (p2 === 'A' ? 'Ç' : 'ç') + p2);
t = t.replace(/([AaOo])�([oO])/g, (m, p1, p2) => p1 + (p2 === 'O' ? 'Ç' : 'ç') + p2);
return t;
}
// Amarelo só da barra por curva. O token --warning é laranja escuro (#B3640A) porque
// serve de cor de TEXTO no resto do site; como preenchimento de barra ao lado do
// vermelho os dois se confundem. Aqui é bloco de cor, então amarelo aberto separa melhor.
const RUP_AMARELO = '#EAB308';
// Uma linha por curva (A, B, C), cada uma com seus pontos. Empilhado escondia a curva
// individual — e a pergunta aqui é "quanto a curva A está sangrando", não a soma.
// O eixo X NÃO é o calendário: é o tempo que o item está sem reposição (ver perdaPorTempo).
// `sel` é um CONJUNTO de células período×curva ("2|A"), não um ponto só: a pergunta de
// quem compra costuma ser "o que está parado há mais de 30 dias" (dois períodos) ou "tudo
// que é curva A" (uma linha inteira), e não uma bolinha isolada. Clique alterna: no ponto
// pega a célula, na coluna o período inteiro, na legenda a curva inteira.
function RupLinhasCurva({ dados, metrica, sel = new Set(), onSel, onFiltrar, filtroRot }) {
const [hover, setHover] = React.useState(null); // { k, i }
const f = dados.faixas;
const W = 320, H = 168, padL = 40, padR = 10, padT = 12, padB = 26;
const iw = W - padL - padR, ih = H - padT - padB;
const CURVAS = [
{ k: 'A', cor: 'var(--danger)' },
{ k: 'B', cor: RUP_AMARELO },
{ k: 'C', cor: 'var(--ink-300)' },
];
const valor = (x, k) => (metrica === 'reais' ? x.reais[k] : x.unid[k]);
// Célula = período × curva. A chave carrega o índice da faixa, e faixa que sumiu (porque
// outro filtro esvaziou o período) simplesmente não é desenhada nem contada — as leituras
// sempre partem de `f`, então índice velho no conjunto é ignorado em vez de quebrar.
const chave = (i, k) => `${i}|${k}`;
const marcado = (i, k) => sel.has(chave(i, k));
const alternar = (celulas) => {
const n = new Set(sel);
// Tudo já marcado → o clique desmarca. É o que faz o mesmo botão servir de liga e
// desliga, sem precisar de tecla modificadora (que em toque não existe).
const todas = celulas.every(c => n.has(chave(c.i, c.k)));
for (const c of celulas) {
const kk = chave(c.i, c.k);
if (todas) n.delete(kk); else n.add(kk);
}
onSel?.(n);
};
const celulasDaFaixa = (i) => CURVAS.map(c => ({ i, k: c.k }));
const celulasDaCurva = (k) => f.map((_, i) => ({ i, k }));
// Resumo do que está marcado, para a frase e para o botão.
const marcadas = [];
f.forEach((x, i) => CURVAS.forEach(c => { if (marcado(i, c.k)) marcadas.push({ i, k: c.k, x }); }));
const somaQtd = marcadas.reduce((s, m) => s + (m.x.qtd[m.k] ?? 0), 0);
const somaVal = marcadas.reduce((s, m) => s + valor(m.x, m.k), 0);
const periodos = new Set(marcadas.map(m => m.i)).size;
// Escala pelo MAIOR ponto individual: sem empilhar, o topo é o pico de uma curva só.
const max = Math.max(1, ...f.flatMap(x => CURVAS.map(c => valor(x, c.k))));
const px = (i) => padL + (f.length === 1 ? iw / 2 : (i / (f.length - 1)) * iw);
const py = (v) => padT + ih - (v / max) * ih;
// Desempate horizontal: onde duas ou três curvas caem no MESMO valor — o caso do "até
// 7d", em que as três costumam estar em zero — os pontos ficavam um dentro do outro e
// só o último desenhado recebia o clique. Aqui eles se abrem em leque de 6,5px dentro
// da própria faixa. A linha usa o mesmo deslocamento, senão o ponto sairia de cima dela.
// Agrupa por PROXIMIDADE, não por valor idêntico: em "até 7d" as três curvas raramente
// dão o mesmo número, mas caem a um ou dois pixels umas das outras — visualmente é o
// mesmo ponto, e clicar pegava sempre a última desenhada (a C).
const dx = f.map((x) => {
const pts = CURVAS.map(c => ({ k: c.k, y: py(valor(x, c.k)) })).sort((a, b) => a.y - b.y);
const off = {};
let grupo = [];
const fechar = () => {
grupo.forEach((p, j) => { off[p.k] = grupo.length === 1 ? 0 : (j - (grupo.length - 1) / 2) * 8; });
grupo = [];
};
for (const p of pts) {
if (grupo.length && Math.abs(p.y - grupo[grupo.length - 1].y) > 7) fechar();
grupo.push(p);
}
fechar();
return off;
});
const cx = (i, k) => px(i) + (dx[i]?.[k] ?? 0);
const ticks = [0, 0.25, 0.5, 0.75, 1].map(p => p * max);
const fmtY = (v) => metrica === 'reais'
? (v >= 1000 ? `${(v / 1000).toFixed(0)}k` : Math.round(v).toString())
: Math.round(v).toString();
const fmtV = (v) => (metrica === 'reais' ? BRL(v) : `${NUM(Math.round(v))} un`);
// Frase padrão: o ponto que mais sangra. É a informação que o usuário procuraria sozinho.
const pior = (() => {
let melhor = null;
f.forEach((x, i) => CURVAS.forEach(c => {
const v = valor(x, c.k);
if (v > 0 && (!melhor || v > melhor.v)) melhor = { k: c.k, i, v, qtd: x.qtd[c.k], rot: x.rot };
}));
return melhor;
})();
// Ordem de precedência da frase: o que o mouse aponta, senão a seleção, senão o pior
// ponto. Com uma célula só a frase é a detalhada; com várias vira resumo, porque listar
// "curva A em 16–30d, curva B em 31–60d…" numa linha de 11px não se lê.
const foco = hover && hover.i < f.length ? hover : null;
const alvo = foco
? { ...foco, v: valor(f[foco.i], foco.k), qtd: f[foco.i].qtd[foco.k], rot: f[foco.i].rot }
: marcadas.length === 1
? { i: marcadas[0].i, k: marcadas[0].k, v: valor(marcadas[0].x, marcadas[0].k),
qtd: marcadas[0].x.qtd[marcadas[0].k], rot: marcadas[0].x.rot }
: marcadas.length > 1 ? null : pior;
return (
{/* Frase: o que está apontado ou marcado, em português */}
{alvo && alvo.v > 0 ? (
<>
Produtos curva {alvo.k}
{alvo.rot === 'nunca' ? ' nunca comprados' : ` há ${alvo.rot} sem reposição`}:{' '}
{NUM(alvo.qtd)} {alvo.qtd === 1 ? 'item deixando' : 'itens deixando'} de vender{' '}
{fmtV(alvo.v)} por dia.
) : marcadas.length > 1 ? (
<>
{NUM(marcadas.length)} seleções em{' '}
{NUM(periodos)} {periodos === 1 ? 'período' : 'períodos'}:{' '}
{NUM(somaQtd)} itens deixando de vender{' '}
{fmtV(somaVal)} por dia.
) : 'Nenhum item zerado com venda no filtro atual.'}
{/* O gráfico só dizia onde dói; daqui se chega nos itens. O clique seleciona, o
botão aplica — separado de propósito, senão passar o mouse pelo gráfico ficaria
trocando a lista embaixo do usuário. */}
{(marcadas.length > 0 || filtroRot) && (
)}
{/* A legenda também é controle: clicar em "curva A" marca (ou desmarca) a curva
inteira, em todos os períodos — é o atalho para "quero tudo que é A". */}
);
}
// Retratos da REDE, não só o da matriz. Numa rede interligada (filiais tipo I) cada loja
// tem CNPJ e banco próprios, e grava o seu `loja/{cnpjFilial}/ruptura/atual` chaveado pelo
// cd_filial LOCAL — quase sempre "1". Lendo só o CNPJ do login, a tela mostrava a matriz e
// mais nada, e o filtro de loja do topo não casava com ninguém (caso rede FUX 02940497000153,
// 8 filiais tipo I). Aqui cada CNPJ vira um bloco com o retrato e o catálogo DELE: os códigos
// de produto são de cadastros diferentes e não podem ser somados entre lojas — o mesmo 006603
// é GARDENAL numa e HUGGIES noutra.
function useRuptura(user) {
const [blocos, setBlocos] = React.useState([]); // [{ cnpj, storeKey, snap, catalogo, codigos, recebido }]
const [loading, setLoading] = React.useState(true);
React.useEffect(() => {
if (!user?.cnpj) return;
let cancelado = false;
// O coletor grava o corpo como STRING JSON, não como mapa: com 13 mil produtos o
// Firestore recusava o documento por passar de 40 mil entradas de índice. Nada aqui
// é consultado por dentro — o doc é sempre lido inteiro —, então string serve.
const parse = (d) => {
if (!d?.dados) return null;
try { return JSON.parse(d.dados); } catch { return null; }
};
// Guarda por CNPJ e republica: os listeners chegam em ordem imprevisível.
const porCnpj = new Map();
const publicar = () => { if (!cancelado) setBlocos([...porCnpj.values()]); };
const colRup = (cnpj) => SF.db.collection('loja').doc(cnpj).collection('ruptura');
// ── Por que este hook é assim: os documentos são GRANDES ─────────────────
// Medido em 29/08/2026: `atual` vai a 866 KB e `catalogo` a 631 KB. O Firestore cobra
// transferência de saída por BYTE, e essa linha é a maior da fatura do projeto (65 GiB
// no mês). Cada entrega de listener aqui é o documento INTEIRO de novo — não existe
// entrega parcial. Numa rede de 8 filiais, com o coletor reescrevendo o retrato de 2
// em 2 horas das 08h às 20h, uma aba esquecida aberta baixava 9 × 390 KB × 7 = 24 MB
// por dia sem ninguém olhando. Daí as duas regras abaixo.
// ── Catálogo: leitura única, rebuscado só quando o retrato traz código novo ──
// Era `onSnapshot` na loja do login, "porque é o que muda quando o coletor atualiza a
// versão". O que de fato interessa dessa atualização é produto NOVO — e isso dá para
// detectar de graça, olhando se o retrato cita código que o catálogo em mãos não tem.
// Só aí paga-se a releitura. Renomear um produto no ERP sem que ele saia do retrato é
// o único caso que passa a esperar o próximo carregamento da tela.
const buscandoCat = new Set();
const carregarCatalogo = (cnpj) => {
if (cancelado || buscandoCat.has(cnpj)) return;
buscandoCat.add(cnpj);
colRup(cnpj).doc('catalogo').get()
.then(s => {
buscandoCat.delete(cnpj);
const b = porCnpj.get(cnpj);
if (!b || cancelado) return;
SF.medir('Ruptura · catálogo', s.exists ? s.data() : null);
b.catalogo = s.exists ? parse(s.data()) : null;
b.codigos = new Set((b.catalogo?.produtos ?? []).map(c => c[0]));
publicar();
})
.catch(() => { buscandoCat.delete(cnpj); /* sem catálogo, a tela mostra o código */ });
};
// ── Remanejamento: quem tem sobrando o que falta em outra filial ─────────
// Documento irmão do retrato (loja/{cnpj}/ruptura/remanejamento), escrito pelo Coletor
// 1.0.4.62 no MESMO tick — por isso é rebuscado quando o retrato chega, e não por
// listener próprio: dois listeners entregariam o par em ordens diferentes e a tela
// mostraria doador de produto que a lista já não tem.
//
// Custo: ~267 KB por leitura na rede medida, contra os 866 KB do retrato. Como o
// retrato muda de 2 em 2 horas, uma aba aberta o dia todo paga ~45% a mais de saída.
// Se um dia pesar, o caminho é adiar para a primeira abertura do painel de doadores —
// mas aí a coluna da tabela não poderia existir, que é justamente o que dá o aviso
// sem ninguém procurar.
const buscandoRem = new Set();
const carregarRemanejamento = (cnpj) => {
if (cancelado || buscandoRem.has(cnpj)) return;
buscandoRem.add(cnpj);
colRup(cnpj).doc('remanejamento').get()
.then(s => {
buscandoRem.delete(cnpj);
const b = porCnpj.get(cnpj);
if (!b || cancelado) return;
// Coletor anterior à 1.0.4.62 não grava este documento: fica null e a tela
// esconde a coluna em vez de mostrar "0 doadores", que seria afirmação falsa.
SF.medir('Ruptura · remanejamento', s.exists ? s.data() : null);
b.remanejamento = s.exists ? parse(s.data()) : null;
publicar();
})
.catch(() => { buscandoRem.delete(cnpj); /* sem doadores, a tela segue sem a coluna */ });
};
const catalogoVelho = (b) => {
// Sem catálogo (ou catálogo vazio) não há o que comparar: a tela mostra o código, que
// é o comportamento de sempre. Sem esta guarda, loja sem o doc rebuscaria um documento
// inexistente a cada entrega do retrato.
if (!b.codigos || !b.codigos.size) return false;
// `codigos` nulo = o get() ainda está em curso e vai resolver sozinho.
for (const lista of Object.values(b.snap ?? {})) {
if (!Array.isArray(lista)) continue;
for (const pr of lista) if (!b.codigos.has(pr[0])) return true;
}
return false;
};
// ── Retrato ao vivo, mas só enquanto a aba está à vista ──────────────────
// A tela continua se atualizando sozinha exatamente como antes para quem está olhando.
// O que deixa de acontecer é a aba em segundo plano receber megabytes o dia inteiro.
const alvos = []; // [{ cnpj, storeKey }]
const offsAtual = new Map(); // cnpj → unsub
const ligarRetrato = (cnpj) => {
if (cancelado || offsAtual.has(cnpj)) return;
offsAtual.set(cnpj, colRup(cnpj).doc('atual').onSnapshot(
s => {
SF.medir('Ruptura · retrato', s.exists ? s.data() : null);
const b = porCnpj.get(cnpj);
// `recebido` separa "ainda carregando" de "esta loja não tem retrato": é o que
// permite avisar na tela quais lojas da rede estão fora sem piscar o aviso na
// abertura. Loja em Coletor anterior ao retrato de ruptura cai aqui.
if (b) {
b.snap = s.exists ? parse(s.data()) : null;
// Quando o coletor gravou ESTE retrato. A tela precisa disso porque a ruptura
// não é tempo real: entre janelas o estoque do ERP anda e o daqui não.
b.updatedAt = s.exists ? (s.data()?.updatedAt?.toDate?.() ?? null) : null;
b.recebido = true;
if (catalogoVelho(b)) carregarCatalogo(cnpj);
// Retrato novo = remanejamento novo: o Coletor grava os dois no mesmo tick.
carregarRemanejamento(cnpj);
publicar();
}
if (cnpj === user.cnpj) setLoading(false);
},
() => { if (cnpj === user.cnpj) setLoading(false); }));
};
const ligarRetratos = () => { for (const a of alvos) ligarRetrato(a.cnpj); };
const desligarRetratos = () => {
for (const off of offsAtual.values()) { try { off(); } catch { /* já desinscrito */ } }
offsAtual.clear();
};
// ── Por que a carência é de 2 HORAS, e não de um minuto ──────────────────
// Reassinar entrega o documento inteiro de novo. Então pausar só compensa se, no tempo
// em que a aba ficou escondida, tivessem chegado MAIS entregas do que o download único
// que a volta custa. O coletor publica o retrato de 2 em 2 horas: escondido por H horas,
// ficar ao vivo custa H/2 downloads e pausar custa exatamente 1. Empata em H = 2h.
//
// Com carência de 1 minuto — que foi a primeira ideia — quem alterna de aba 20 vezes ao
// dia pagaria 20 downloads no lugar dos 7 do dia inteiro ao vivo: a "otimização" sairia
// três vezes mais cara. Em 2h a conta nunca fica negativa, e é o caso que interessa de
// verdade: a aba esquecida aberta a noite toda, que hoje baixa o retrato de hora em hora
// sem ninguém na frente.
let timerOculto = null;
const OCULTO_MS = 2 * 60 * 60 * 1000;
const aoMudarVisibilidade = () => {
if (document.hidden) {
if (!timerOculto) timerOculto = setTimeout(() => { timerOculto = null; desligarRetratos(); }, OCULTO_MS);
} else {
if (timerOculto) { clearTimeout(timerOculto); timerOculto = null; }
ligarRetratos(); // volta a ficar ao vivo já com o estado atual
}
};
document.addEventListener('visibilitychange', aoMudarVisibilidade);
const registrar = (cnpj, storeKey) => {
porCnpj.set(cnpj, { cnpj, storeKey, snap: null, catalogo: null, codigos: null, remanejamento: null, recebido: false });
alvos.push({ cnpj, storeKey });
carregarCatalogo(cnpj);
};
registrar(user.cnpj, null);
ligarRetrato(user.cnpj);
// Filiais com doc próprio. loadFiliaisMap já descarta a auto-referência, então a
// matriz nunca é assinada duas vezes.
SF.loadFiliaisMap(user.cnpj).then(() => {
if (cancelado) return;
for (const [storeKey, cnpjFilial] of Object.entries(SF.getFiliaisMap())) {
if (!cnpjFilial || cnpjFilial === user.cnpj || porCnpj.has(cnpjFilial)) continue;
registrar(cnpjFilial, storeKey);
// ligarRetrato é idempotente por CNPJ: as filiais entram sem reassinar a matriz,
// o que custaria outro download do retrato dela.
ligarRetrato(cnpjFilial);
}
publicar();
}).catch(() => { /* sem mapa de filiais, segue só com a loja do login */ });
return () => {
cancelado = true;
if (timerOculto) clearTimeout(timerOculto);
document.removeEventListener('visibilitychange', aoMudarVisibilidade);
desligarRetratos();
};
}, [user?.cnpj]);
return { blocos, loading };
}
// Retrato mais NOVO da rede. Com filiais em coletores diferentes cada uma manda na sua
// hora; o mais recente é o que responde "quão velho é o que estou vendo" no melhor caso —
// e o rodapé avisa quando as lojas divergem.
function rupRetratoEm(blocos) {
const ds = blocos.map(b => b.updatedAt).filter(Boolean).map(d => d.getTime());
return ds.length ? new Date(Math.max(...ds)) : null;
}
// Seletor de vários valores: botão que abre a lista com caixas de marcação. Nativo
//