// Setor de Afiliados → SOP dos Três Gatilhos → Alertas (spec 2026-09-10-sop-tres-gatilhos-design,
// Tasks 15-17). Fila de CASOS: cada ticket é um par afiliado×oferta que acendeu pelo menos um
// dos três gatilhos. Uma pessoa pega, fala com o afiliado, resolve com a alavanca aplicada.
// Molde Leads.jsx / irmã GatilhosPainel.jsx (prefixo gtp) — aqui o prefixo é gta. Self-contained,
// SEM mock (fila operacional: número inventado aqui vira conversa errada com afiliado).
//
// Decisões de leitura do domínio (não pedir, decidir e documentar — pedido já é detalhado):
// - `snapshot` é a LINHA DO PAINEL congelada (payload_insert em gatilhos_tickets.py faz
// `json.dumps(linha, default=str)`), ou seja `snapshot.aov/.refund/.take` já chegam como
// objetos {valor, cor, ...} — não como número solto. Normalizamos defensivamente mesmo assim
// (gtaMetric) para o card nunca quebrar se o shape mudar.
// - O baseline NUMÉRICO da oferta mora só no payload do Painel (`data.baselines`), nunca foi
// persistido dentro do ticket — não existe campo para "puxar" um número aqui sem inventar.
// O jeito honesto de mostrar "o baseline ao lado" é a legenda por cor (o `cor` de cada campo
// JÁ é o resultado da comparação contra o baseline no momento da abertura — cap. 2.2 da Bíblia).
// - `dado_fechou_em` é o instante em que a varredura rodou (main.py: `dado_fechou_em=agora`) —
// a base do prazo é ELE, não `criado_em` (que no banco tende a ser o mesmo valor, mas o
// contrato semântico é "quando o dado fechou", não "quando a linha foi gravada").
// ---------------------------------------------------------------------------
// Réguas de cor — CÓPIAS com prefixo próprio (não depender da ordem de carga de
// GatilhosPainel.jsx, mesmo os dois lendo a mesma Bíblia).
const GTA_COR = { verde: 'var(--positive)', amarelo: 'var(--warning)', vermelho: 'var(--negative)' };
const GTA_COR_REFUND = { verde: 'var(--positive)', alerta: 'var(--warning)', pausa: 'var(--negative)', desligar: 'var(--negative)' };
const GTA_PRAZO_LABEL = { mesmo_dia: 'Hoje', '24h': '24h', '48h': '48h' };
const GTA_PRAZO_COR = { mesmo_dia: 'var(--negative)', '24h': 'var(--warning)', '48h': 'var(--warning)' };
const GTA_ESTADOS = [
{ key: 'aberto', label: 'Abertos' },
{ key: 'em_atendimento', label: 'Em atendimento' },
{ key: 'observacao', label: 'Em observação' },
{ key: 'resolvido', label: 'Resolvidos' },
];
const GTA_VAZIO = {
aberto: 'Nenhum caso aberto. A fila é recalculada ao abrir a tela e a cada 10 minutos.',
em_atendimento: 'Ninguém com caso em atendimento agora.',
observacao: 'Nenhum caso em observação no momento.',
resolvido: 'Nenhum caso resolvido nesta janela.',
};
// Legenda por cor — o que cada uma significa vs. o baseline da oferta (cap. 2.2/2.3),
// já que o número do baseline em si não sobrevive no ticket (só o veredito colorido).
const GTA_AOV_CAPTION = {
verde: 'no nível do AOV da oferta', amarelo: 'entre 85% e 100% do AOV da oferta',
vermelho: 'abaixo de 85% do AOV da oferta',
};
const GTA_TAKE_CAPTION = {
verde: 'no nível do Take Rate da oferta', amarelo: 'entre 85% e 100% do baseline',
vermelho: 'abaixo de 85% do baseline',
};
const GTA_REFUND_CAPTION = {
verde: 'dentro do teto da oferta', alerta: 'acima do teto — alerta',
pausa: 'acima do teto — pausar CPA', desligar: 'acima do teto — desligar oferta',
};
const GTA_ESTADO_LABEL = { aberto: 'Aberto', em_atendimento: 'Em atendimento', observacao: 'Em observação', resolvido: 'Resolvido' };
const GTA_ESTADO_COR = { aberto: 'var(--fenix-blue)', em_atendimento: 'var(--warning)', observacao: 'var(--info)', resolvido: 'var(--positive)' };
const GTA_EVENTO_VERBO = {
criado: 'abriu o caso', checkpoint: 'abriu o checkpoint D+8', pegar: 'pegou o caso',
devolver: 'devolveu para a fila', resolver: 'resolveu', reabrir: 'reabriu o caso',
encerrado: 'encerrou o caso', nota: 'escreveu',
};
const GTA_NOTA_MAX = 2000;
// Complemento curto da linha de ação: o QUE mudou, lido de `dados`.
const gtaDetalheEvento = (ev) => {
const d = ev.dados || {};
if (ev.tipo === 'resolver' && d.alavanca) return `Alavanca: ${d.alavanca}`;
if (ev.tipo === 'reabrir' && d.de) return `${GTA_ESTADO_LABEL[d.de] || d.de} → Aberto`;
if (ev.tipo === 'encerrado' && d.motivo) return d.motivo;
if (ev.tipo === 'checkpoint' && d.checkpoint_de != null) return `retomada do caso #${d.checkpoint_de}`;
return null;
};
// ---------------------------------------------------------------------------
// Datas/horas. `observacao_ate` é DATE puro (sem hora) — precisa do sufixo T12:00:00
// (gotcha do projeto: sem ele, o parse UTC-midnight some um dia em fuso negativo).
const gtaFmtDiaSolo = (iso) => iso
? new Date(iso + 'T12:00:00').toLocaleDateString('pt-BR', { day: '2-digit', month: 'short', year: 'numeric' })
: '—';
const gtaFmtDataHora = (iso) => iso
? new Date(iso).toLocaleDateString('pt-BR', { day: '2-digit', month: 'short', year: 'numeric' })
: '—';
// Linha do tempo do caso: dia E hora ("quem fez o quê, quando" — spec 2026-09-23).
const gtaFmtCarimbo = (iso) => iso
? new Date(iso).toLocaleString('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })
: '—';
const gtaFmtHora = (iso) => iso
? new Date(iso).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })
: '—';
// Prazo = tempo máximo para o primeiro contato, contado a partir de quando o dado
// fechou (cap. 5.2). mesmo_dia = até o fim do dia de `dado_fechou_em`; 24h/48h somam
// horas corridas.
function gtaDeadline(dadoFechouEm, prazo) {
if (!dadoFechouEm || !prazo) return null;
const base = new Date(dadoFechouEm);
if (Number.isNaN(base.getTime())) return null;
if (prazo === 'mesmo_dia') {
const fim = new Date(base);
fim.setHours(23, 59, 59, 999);
return fim;
}
const horas = prazo === '24h' ? 24 : prazo === '48h' ? 48 : null;
return horas == null ? null : new Date(base.getTime() + horas * 3600000);
}
const gtaDurTxt = (ms) => {
const abs = Math.abs(ms);
const dias = Math.floor(abs / 86400000);
const h = Math.floor((abs % 86400000) / 3600000);
const m = Math.floor((abs % 3600000) / 60000);
if (dias > 0) return `${dias}d${h > 0 ? ` ${h}h` : ''}`;
if (h > 0) return `${h}h${m > 0 ? ` ${m}min` : ''}`;
return `${Math.max(m, 1)}min`;
};
function gtaPrazoTexto(dadoFechouEm, prazo) {
const dl = gtaDeadline(dadoFechouEm, prazo);
if (!dl) return '';
const diff = dl.getTime() - Date.now();
return diff > 0 ? `vence em ${gtaDurTxt(diff)}` : `vencido há ${gtaDurTxt(diff)}`;
}
// Normalização defensiva do snapshot: aceita objeto {valor,cor,...} (shape real, é a
// linha do painel congelada) OU número solto, sem quebrar o card se o backend mudar.
const gtaMetric = (v) => {
if (v == null) return { valor: null, cor: null };
if (typeof v === 'object') return v;
return { valor: v, cor: null };
};
// ---------------------------------------------------------------------------
// `legivel === false` (spec 14/set): a métrica não tem a massa que aquele gatilho
// exige. O valor aparece igual, mas SEM cor (nem pílula de desligar) — nunca
// pintar de verde/vermelho por falta de amostra — e a legenda declara o "N de M".
const GtaMetricCard = ({ label, valor, fmt, cor, corMap, caption, aceso, legivel, massa, massaMin, badge }) => {
const semMassa = legivel === false;
const tom = semMassa ? null : corMap[cor];
const pill = !semMassa && cor === 'desligar';
const legenda = semMassa && massaMin != null
? `sem massa: ${NUM(massa || 0)} de ${NUM(massaMin)} pedidos`
: caption;
return (
);
};
// As três métricas congeladas no snapshot — usadas pelo cartão e pelo pop-up do caso.
const GtaMetricsRow = ({ t }) => {
const snap = t.snapshot || {};
const aov = gtaMetric(snap.aov);
const refund = gtaMetric(snap.refund);
const take = gtaMetric(snap.take);
const acesos = t.gatilhos_acesos || [];
// Baselines congelados na abertura do ticket (ausentes nos criados antes de 11/set).
const base = snap.baselines || {};
return (
teto provisório
)} />
);
};
// Cartão do ticket — mostra os três gatilhos E a alavanca juntos, de propósito (cap. 4
// da Bíblia): olhar só o número acesso e recomendar a alavanca errada é o erro central
// que esta tela existe para evitar.
const GtaCard = ({ t, alavancas, busy, onPegar, onDevolver, onResolverClick, onOpen, onReabrirClick }) => {
const snap = t.snapshot || {};
const prazoCor = GTA_PRAZO_COR[t.prazo] || 'var(--fg-3)';
return (
{NUM(t.volume_recente || 0)} pedidos de front em 7d
{/* Desde 11/set o snapshot congela os baselines da oferta no momento da
abertura: o cartão mostra o NÚMERO contra o qual a decisão foi tomada.
Tickets anteriores caem na legenda por cor. */}