/* ============================================================================= screen_comercial_rpc_sdr_ai.jsx — Tab SDR AI (isolado para Costa) ============================================================================= Container autónomo: faz os seus próprios fetches, gere o seu próprio estado. Entry point: window.SdrAITab({ selAno, sdrList }) ============================================================================= */ // ─── Constantes locais (não colidem com o parent) ───────────────────────────── const SDR_AI_MESES = ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez']; const SDR_AI_DESDE_MES = 8; function sdrAiNoPeriodo(lead) { return SDR_AI_MESES.indexOf(lead.mes) >= SDR_AI_DESDE_MES; } const SDR_AI_METAS = { taxa_contacto: 70, taxa_qualif: 40, }; const SDR_AI_SOURCES = [ { id: 'ADS', label: 'ADS' }, { id: 'WEB', label: 'WEB' }, { id: 'NEWSLETTER', label: 'NEWSLETTER' }, ]; const SDR_AI_ACTIONS = [ { id: 'ADS AQUANOSTRA', source: 'ADS' }, { id: 'ADS DECAL', source: 'ADS' }, { id: 'ADS MIMAKI', source: 'ADS' }, { id: 'ADS NETSCREEN', source: 'ADS' }, { id: 'INBOUND AQUA', source: 'WEB' }, { id: 'INBOUND BRANDDIGITAL', source: 'WEB' }, { id: 'INBOUND DECAL', source: 'WEB' }, { id: 'INBOUND MIMAKI', source: 'WEB' }, { id: 'INBOUND NETSCREEN', source: 'WEB' }, { id: 'WEBSITE AQUA', source: 'WEB' }, { id: 'WEBSITE BRANDDIGITAL', source: 'WEB' }, { id: 'WEBSITE DECAL', source: 'WEB' }, { id: 'WEBSITE DIGIDELTA', source: 'WEB' }, { id: 'WEBSITE NETSCREEN', source: 'WEB' }, { id: 'NEWSLETTER AQUA', source: 'NEWSLETTER' }, { id: 'NEWSLETTER BRAND DIGITAL', source: 'NEWSLETTER' }, { id: 'NEWSLETTER DECAL', source: 'NEWSLETTER' }, { id: 'NEWSLETTER MIMAKI', source: 'NEWSLETTER' }, { id: 'NEWSLETTER NETSCREEN', source: 'NEWSLETTER' }, ]; const SDR_AI_ACTION_POR_MARCA = { ADS: { Mimaki: 'ADS MIMAKI', Decal: 'ADS DECAL', NetScreen: 'ADS NETSCREEN', Aqua: 'ADS AQUANOSTRA' }, WEB: { Mimaki: 'INBOUND MIMAKI', Decal: 'INBOUND DECAL', NetScreen: 'INBOUND NETSCREEN', Aqua: 'INBOUND AQUA', BrandDigital: 'INBOUND BRANDDIGITAL', Digidelta: 'WEBSITE DIGIDELTA' }, NEWSLETTER: { Mimaki: 'NEWSLETTER MIMAKI', Decal: 'NEWSLETTER DECAL', NetScreen: 'NEWSLETTER NETSCREEN', Aqua: 'NEWSLETTER AQUA', BrandDigital: 'NEWSLETTER BRAND DIGITAL' }, }; const SDR_AI_STAGES = ['LEAD', 'INTERESSE', 'EVENTO', 'DEMO', 'AG DECISAO', 'AG FINANCEIRO', 'APROVADO FINANCIAMENTO']; function sdrAiActionId(lead) { return SDR_AI_ACTION_POR_MARCA[lead.source]?.[lead.marca] || null; } const SDR_AI_STATUS_CFG = { atribuido: { label:'Atribuído', color:'#64748b', bg:'#f1f5f9', border:'#cbd5e1' }, contactado: { label:'Contactado', color:'#1d4ed8', bg:'#eff6ff', border:'#bfdbfe' }, em_qualificacao: { label:'Em Qualificação', color:'#92400e', bg:'#fffbeb', border:'#fde68a' }, bant_completo: { label:'Qualificado BANT', color:'#166534', bg:'#f0fdf4', border:'#bbf7d0' }, passado_comercial: { label:'Passado ao Comercial', color:'#1d4ed8', bg:'#eff6ff', border:'#bfdbfe' }, nao_qualificado: { label:'Não Qualificado', color:'#991b1b', bg:'#fef2f2', border:'#fecaca' }, passado_humano: { label:'Passado ao Humano', color:'#166534', bg:'#f0fdf4', border:'#bbf7d0' }, }; function aiSdrPct(num, den) { if (!den) return null; return Math.round(num / den * 1000) / 10; } function aiSdrColor(val, meta, higherIsBetter = true) { if (val === null || val === undefined) return 'var(--dgd-fg-3)'; return higherIsBetter ? (val >= meta ? '#166534' : '#991b1b') : (val <= meta ? '#166534' : '#991b1b'); } function aiSdrBg(val, meta, higherIsBetter = true) { if (val === null || val === undefined) return 'transparent'; const ok = higherIsBetter ? val >= meta : val <= meta; return ok ? 'color-mix(in oklch,#22c55e 8%,transparent)' : 'color-mix(in oklch,#ef4444 8%,transparent)'; } // ─── Sub-components ─────────────────────────────────────────────────────────── const SdrAISectionRow = ({ children, cols }) => ( {children} ); // ─── Modal lista de leads SDR AI ────────────────────────────────────────────── const SdrAILeadsModal = ({ title, leads, onClose }) => (
{ if (e.target === e.currentTarget) onClose(); }} style={{ position:'fixed', inset:0, zIndex:2000, background:'rgba(0,0,0,0.35)', display:'flex', alignItems:'center', justifyContent:'center', padding:24 }}>
{title}
{leads === null ? (
A carregar...
) : leads.length === 0 ? (
Sem leads para este critério neste mês.
) : ( {['Nome','Empresa','Segmento','Status','Ult. Acção'].map(h => ( ))} {leads.map(l => { const sc = SDR_AI_STATUS_CFG[l.status] || {}; return ( ); })}
{h}
{l.nome} {l.empresa} {l.segmento} {sc.label || l.status} {l.ultimo_wa || '—'}
)}
{leads !== null && (
{leads.length} lead{leads.length !== 1 ? 's' : ''}
)}
); // ─── Tabela Funil SDR AI ────────────────────────────────────────────────────── const SdrAIFunilTable = ({ rows, onCellClick }) => { const mesIdx = (() => { const m = SDR_AI_MESES[new Date().getMonth()]; const i = rows.findIndex(r => r.mes === m); return i >= 0 ? i : rows.length - 1; })(); const nCols = rows.length + 3; const fv = (val, i) => i > mesIdx ? '—' : val; const temRegra = rows.some(r => r.nao_qualificados != null); const ytd = rows.reduce((s, r) => ({ atribuidos: s.atribuidos + (r.atribuidos || 0), contactados: s.contactados + (r.contactados || 0), qualificados: s.qualificados + (r.qualificados || 0), em_qualificacao: s.em_qualificacao + (r.em_qualificacao || 0), nao_qualificados: s.nao_qualificados + (r.nao_qualificados != null ? r.nao_qualificados : 0), chamadas: s.chamadas + (r.chamadas || 0), whatsapp: s.whatsapp + (r.whatsapp || 0), sem_contacto: s.sem_contacto + (r.sem_contacto || 0), elegiveis: s.elegiveis + (r.elegiveis || 0), contactos_digi: s.contactos_digi + (r.contactos_digi || 0), na_chamada: s.na_chamada + (r.na_chamada || 0), nurturing: s.nurturing + (r.nurturing || 0), nurturing_contactos: s.nurturing_contactos + (r.nurturing_contactos || 0), nurturing_demos: s.nurturing_demos + (r.nurturing_demos || 0), nurturing_ganhas: s.nurturing_ganhas + (r.nurturing_ganhas || 0), }), { atribuidos:0, contactados:0, qualificados:0, em_qualificacao:0, nao_qualificados:0, chamadas:0, whatsapp:0, sem_contacto:0, elegiveis:0, contactos_digi:0, na_chamada:0, nurturing:0, nurturing_contactos:0, nurturing_demos:0, nurturing_ganhas:0 }); const tcYTD = aiSdrPct(ytd.contactados, ytd.elegiveis); const tqYTD = aiSdrPct(ytd.qualificados, ytd.na_chamada); const tnYTD = aiSdrPct(ytd.nurturing_contactos, ytd.nurturing); const th = { padding:'8px 10px', textAlign:'right', fontSize:11, color:'var(--dgd-fg-3)', fontFamily:'inherit', fontWeight:600, borderBottom:'1px solid var(--dgd-border-1)', whiteSpace:'nowrap' }; const thL = { ...th, textAlign:'left' }; const tdBase = { padding:'9px 10px', fontSize:14, fontFamily:'inherit', fontWeight:600, fontVariantNumeric:'tabular-nums', borderBottom:'1px solid var(--dgd-border-1)', whiteSpace:'nowrap', textAlign:'right', color:'var(--dgd-fg-2)' }; const tdL = { ...tdBase, textAlign:'left', fontSize:12.5, color:'var(--dgd-fg-1)' }; const clickStyle = { cursor:'pointer', textDecoration:'underline', textDecorationStyle:'dotted' }; const cl = (metric, mes, val) => onCellClick ? { onClick: () => onCellClick(metric, mes, val) } : {}; return (
{rows.map((r, i) => ( ))} {rows.map((r,i) => )} {rows.map((r,i) => )} {rows.map((r,i) => )} {rows.map((r,i) => { const v = i > mesIdx ? null : aiSdrPct(r.contactados, r.elegiveis || 0); return ; })} {rows.map((r,i) => )} {rows.map((r,i) => { const v = i > mesIdx ? null : aiSdrPct(r.qualificados, r.na_chamada || 0); return ; })} {rows.map((r,i) => { const v = i > mesIdx ? '—' : (r.nao_qualificados != null ? r.nao_qualificados : r.contactados - r.qualificados); return ; })} {rows.map((r,i) => )} {rows.map((r,i) => )} {rows.map((r,i) => )} {rows.map((r,i) => { const v = i > mesIdx ? null : aiSdrPct(r.nurturing_contactos || 0, r.nurturing || 0); return ; })} {rows.map((r,i) => )} {rows.map((r,i) => )}
Métrica Obj.{r.mes}YTD
Qualificação de Leads
Leads Atribuídos --{fv(r.atribuidos, i)}{ytd.atribuidos}
Elegíveis --{fv(r.elegiveis || 0, i)}{ytd.elegiveis}
Leads Contactados --{fv(r.contactados, i)}{ytd.contactados}
Taxa de Contacto >={SDR_AI_METAS.taxa_contacto}%{v === null ? '—' : `${v}%`}{tcYTD === null ? '—' : `${tcYTD}%`}
Qualificados BANT --{fv(r.qualificados, i)}{ytd.qualificados}
Taxa de Qualificação BANT >={SDR_AI_METAS.taxa_qualif}%{v === null ? '—' : `${v}%`}{tqYTD === null ? '—' : `${tqYTD}%`}
Não Qualificados BANT --{v}{temRegra ? ytd.nao_qualificados : ytd.contactados - ytd.qualificados}
Sem contacto --{fv(r.sem_contacto || 0, i)}{ytd.sem_contacto}
Nurturing de Oportunidades
Oportunidades em nurturing --{fv(r.nurturing || 0, i)}{ytd.nurturing}
Contactos feitos --{fv(r.nurturing_contactos || 0, i)}{ytd.nurturing_contactos}
Taxa de Contacto >={SDR_AI_METAS.taxa_contacto}%{v === null ? '—' : `${v}%`}{tnYTD === null ? '—' : `${tnYTD}%`}
Demos ou visitas confirmadas --{fv(r.nurturing_demos || 0, i)}{ytd.nurturing_demos}
Ganhas --{fv(r.nurturing_ganhas || 0, i)}{ytd.nurturing_ganhas}
); }; // ─── Revisão humana — não altera a classification nem o handoff ─────────────── const SdrAIRevisao = ({ lead, onRevisao }) => { const [aEnviar, setAEnviar] = React.useState(null); const [erro, setErro] = React.useState(''); const actual = lead.revisao?.veredicto || ''; const marcar = async (veredicto) => { setAEnviar(veredicto); setErro(''); let res; try { res = await fetch('/api/comercial/sdr/ai/revisao', { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ visitor_id: lead.id, veredicto }), }); } catch { setAEnviar(null); setErro('A revisão não ficou gravada.'); return; } const body = await res.json().catch(() => ({})); setAEnviar(null); if (!res.ok) { setErro('A revisão não ficou gravada.'); return; } onRevisao?.(lead.id, body); }; const btn = (id, label, on) => ( ); return (
Revisão humana
{btn('confere', 'Confere', actual === 'confere')} {btn('nao_confere', 'Não confere', actual === 'nao_confere')} {lead.revisao?.revisor_nome && ( {lead.revisao.revisor_nome} )}
{erro &&
{erro}
}
); }; // ─── Painel de Leads SDR AI ─────────────────────────────────────────────────── const SdrAILeadsPanel = ({ initialStatus, initialMes, allLeads = [], selAno, sdrList = [], pelaRegra = false, onRevisao, onPassou }) => { const [search, setSearch] = React.useState(''); const [filterSt, setFilterSt] = React.useState(initialStatus || 'all'); const [filterMes, setFilterMes] = React.useState(initialMes || SDR_AI_MESES[new Date().getMonth()]); const [expandedId, setExpandedId] = React.useState(null); const [leadTab, setLeadTab] = React.useState('info'); const [passando, setPassando] = React.useState(null); const [selSdrPass, setSelSdrPass] = React.useState(''); const [passOk, setPassOk] = React.useState({}); React.useEffect(() => { const currentMes = SDR_AI_MESES[new Date().getMonth()]; const currentAno = new Date().getFullYear(); setFilterMes(selAno === currentAno || selAno == null ? currentMes : 'all'); }, [selAno]); const mesesComLeads = [...new Set(allLeads.map(l => l.mes))]; const handlePassarSDR = async (lead) => { if (!selSdrPass) return; const r = await fetch('/api/comercial/sdr/ai-to-humano', { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ visitor_id: lead.id, sdr_email: selSdrPass }), }).then(r => r.json()).catch(() => ({ error: 'network' })); if (r.ok) { setPassOk(prev => ({ ...prev, [lead.id]: true })); setPassando(null); setSelSdrPass(''); onPassou?.(lead.id); } }; const filtered = allLeads.filter(l => { if (filterSt !== 'all' && l.status !== filterSt) return false; if (filterMes !== 'all' && l.mes !== filterMes) return false; if (search) { const q = search.toLowerCase(); if (!l.nome.toLowerCase().includes(q) && !l.empresa.toLowerCase().includes(q)) return false; } return true; }); const pillBase = { padding:'3px 11px', fontSize:11.5, borderRadius:20, border:'1px solid var(--dgd-border-1)', cursor:'pointer', whiteSpace:'nowrap', background:'none', fontWeight:400, color:'var(--dgd-fg-2)' }; const pillOn = { ...pillBase, background:'var(--dgd-fg-1)', color:'white', borderColor:'var(--dgd-fg-1)', fontWeight:600 }; const statusPills = [ { id:'all', label:'Todos' }, { id:'atribuido', label:'Atribuído' }, { id:'contactado', label:'Contactado' }, { id:'em_qualificacao',label:'Em Qualificação' }, ...(pelaRegra ? [{ id:'bant_completo', label:'Qualificado BANT' }] : []), { id:'passado_humano', label:'Passado ao Humano' }, { id:'nao_qualificado',label:'Não Qualificado' }, ]; const BantIcon = ({ ok }) => ok === true ? S : ok === false ? N : ?; return (
{/* Filtros */}
setSearch(e.target.value)} placeholder="Pesquisar nome / empresa..." style={{ padding:'4px 10px', fontSize:12, border:'1px solid var(--dgd-border-1)', borderRadius:6, outline:'none', width:200, color:'var(--dgd-fg-1)', background:'var(--dgd-bg-app,#f8fafc)' }} />
{statusPills.map(p => ( ))}
{/* Lista */} {filtered.length === 0 ? (
Sem leads para os filtros seleccionados.
) : (
{filtered.map(lead => { const sc = SDR_AI_STATUS_CFG[lead.status] || {}; const exp = expandedId === lead.id; return (
{ setExpandedId(exp ? null : lead.id); setLeadTab('info'); }} style={{ display:'flex', alignItems:'center', gap:12, padding:'10px 14px', borderBottom:'1px solid var(--dgd-border-1)', cursor:'pointer', background: exp ? 'color-mix(in oklch,#112954 3%,transparent)' : 'transparent' }} onMouseEnter={e => { if (!exp) e.currentTarget.style.background = 'var(--dgd-bg-app,#f8fafc)'; }} onMouseLeave={e => { if (!exp) e.currentTarget.style.background = 'transparent'; }} >
{lead.nome}
{lead.empresa}
{lead.segmento}
{sc.label} {pelaRegra && typeof lead.bant_n === 'number' && (
{lead.bant_n}/4 BANT
)}
= 70 ? '#166534' : lead.score >= 40 ? '#92400e' : '#991b1b' }}> {lead.score != null ? lead.score : '—'}
{lead.mes}
{lead.ultimo_wa || '—'}
e.stopPropagation()}> {passOk[lead.id] ? ( Passado ) : passando === lead.id ? (
) : ( )} { e.stopPropagation(); setExpandedId(exp ? null : lead.id); setLeadTab('info'); }}>
{exp && (
{/* Mini tabs */}
{[{id:'info',label:'Info Lead'},{id:'conversa',label:'Conversa WA'},{id:'historico',label:'Histórico'}].map(t => ( ))}
{leadTab === 'info' && (
e.stopPropagation()}>
Dados do Lead
{[ ['Nome', lead.nome], ['Empresa', lead.empresa], ['Cargo', lead.cargo], ['Marca', lead.segmento], ['Campanha', lead.campanha], ['País', lead.pais], ['Canal', lead.canal], ['Score', lead.score != null ? String(lead.score) : null], ['Ult. WA', lead.ultimo_wa], ].filter(([,v]) => v).map(([k,v]) => (
{k} {v}
))}
BANT{typeof lead.bant_n === 'number' ? ` ${lead.bant_n}/4` : ''}
{[['Budget','budget'],['Authority','authority'],['Need','need'],['Timeline','timeline']].map(([label,key]) => (
{label} {lead.bant_valores ? ( {lead.bant_valores[key] || '—'} ) : ( )}
))} {pelaRegra && }
{(lead.recomendacao || lead.objecao || lead.equipamento) && (
{lead.recomendacao && (<>
Recomendação Digi
{lead.recomendacao}
)} {lead.objecao && (<>
Objecção Principal
{lead.objecao}
)} {lead.equipamento && (<>
Equipamento Actual
{lead.equipamento}
)}
)}
)} {leadTab === 'conversa' && (
e.stopPropagation()}> {(!lead.conversa || lead.conversa.length === 0) ? (
Ainda sem conversas iniciadas.
) : (
{lead.conversa.map((msg, i) => (
{msg.msg}
{msg.de === 'ai' ? 'digi.ai' : lead.nome} · {msg.ts}
))}
)}
)} {leadTab === 'historico' && (
e.stopPropagation()}> {(!lead.historico || lead.historico.length === 0) ? (
Sem interações anteriores registadas.
) : ( {['Data','Campanha','Canal','Interação','Resultado'].map(h => ( ))} {lead.historico.map((h, i) => ( ))}
{h}
{h.data} {h.campanha} {h.canal} {h.interacao} {h.resultado}
)}
)}
)} ); })}
)}
{filtered.length} lead{filtered.length !== 1 ? 's' : ''}
); }; // ─── Inbound de marketing — a fila que entra para a Digi qualificar ─────────── const SDR_AI_ORDEM_MARCAS = ['Mimaki', 'BIOND', 'Decal', 'AllDecor', 'Sensek', 'NetScreen', 'Digidelta']; const SDR_AI_MES_LONGO = { Jan:'Janeiro', Fev:'Fevereiro', Mar:'Março', Abr:'Abril', Mai:'Maio', Jun:'Junho', Jul:'Julho', Ago:'Agosto', Set:'Setembro', Out:'Outubro', Nov:'Novembro', Dez:'Dezembro' }; function sdrAiDataLead(lead, ano) { const m = String(lead.data || '').match(/^(\d{2})\/(\d{2})$/); if (!m) return null; return new Date(Number(ano) || new Date().getFullYear(), Number(m[2]) - 1, Number(m[1])); } function sdrAiDia(d) { return new Date(d.getFullYear(), d.getMonth(), d.getDate()); } function sdrAiChao(ano) { return new Date(Number(ano) || new Date().getFullYear(), SDR_AI_DESDE_MES, 1); } function sdrAiTecto(ano) { const hoje = sdrAiDia(new Date()); const fimAno = new Date(Number(ano) || hoje.getFullYear(), 11, 31); return hoje < fimAno ? hoje : fimAno; } function sdrAiPeriodoTodo(ano) { return { preset: 'all', start: sdrAiChao(ano), end: sdrAiTecto(ano) }; } function sdrAiIntervalo(id, ano) { const hoje = sdrAiDia(new Date()); const chao = sdrAiChao(ano); const tecto = sdrAiTecto(ano); let s = hoje; let e = hoje; if (id === 'yesterday') s = e = new Date(hoje.getFullYear(), hoje.getMonth(), hoje.getDate() - 1); else if (id === 'last_7d') s = new Date(hoje.getFullYear(), hoje.getMonth(), hoje.getDate() - 6); else if (id === 'last_28d') s = new Date(hoje.getFullYear(), hoje.getMonth(), hoje.getDate() - 27); else if (id === 'last_30d') s = new Date(hoje.getFullYear(), hoje.getMonth(), hoje.getDate() - 29); else if (id === 'last_90d') s = new Date(hoje.getFullYear(), hoje.getMonth(), hoje.getDate() - 89); else if (id === 'this_month') s = new Date(hoje.getFullYear(), hoje.getMonth(), 1); else if (id === 'last_month') { s = new Date(hoje.getFullYear(), hoje.getMonth() - 1, 1); e = new Date(hoje.getFullYear(), hoje.getMonth(), 0); } else if (id === 'qtd') s = new Date(hoje.getFullYear(), Math.floor(hoje.getMonth() / 3) * 3, 1); if (s < chao) s = chao; if (e > tecto) e = tecto; if (s > e) return null; return { preset: id, start: s, end: e }; } function sdrAiIntervaloMes(mes, ano) { const i = SDR_AI_MESES.indexOf(mes); if (i < 0) return sdrAiPeriodoTodo(ano); const s = new Date(Number(ano), i, 1); let e = new Date(Number(ano), i + 1, 0); const tecto = sdrAiTecto(ano); if (e > tecto && s <= tecto) e = tecto; return { preset: 'custom', start: s, end: e }; } function sdrAiNoPeriodoFiltro(lead, periodo, ano) { if (!periodo || periodo.preset === 'all' || !periodo.start || !periodo.end) return true; const dia = sdrAiDataLead(lead, ano); if (!dia) return false; return dia >= sdrAiDia(periodo.start) && dia <= sdrAiDia(periodo.end); } function sdrAiContactoDigi(lead) { const fase = lead.circuito?.fase; return fase === 'atendeu' || fase === 'recusou' || fase === 'wa_respondeu' || lead.circuito?.resultado === 'atendeu'; } function sdrAiDigitosTel(v) { return String(v || '').replace(/\D/g, ''); } function sdrAiMercado(lead) { const d = sdrAiDigitosTel(lead?.telefone); const pais = String(lead?.pais || '').toLowerCase(); const dizEs = /espan|spain|^es$/.test(pais); const dizPt = /portug|^pt$/.test(pais); let nacional = d; let prefixo = ''; if (d.startsWith('00351')) { prefixo = 'PT'; nacional = d.slice(5); } else if (d.startsWith('0034')) { prefixo = 'ES'; nacional = d.slice(4); } else if (d.startsWith('351') && d.length >= 12) { prefixo = 'PT'; nacional = d.slice(3); } else if (d.startsWith('34') && d.length >= 11) { prefixo = 'ES'; nacional = d.slice(2); } if (prefixo === 'PT') return /^[29]\d{8}$/.test(nacional) ? 'PT' : 'OUTRO'; if (prefixo === 'ES') return /^[6789]\d{8}$/.test(nacional) ? 'ES' : 'OUTRO'; if (nacional.length === 9) { if (dizEs && /^[6789]/.test(nacional)) return 'ES'; if (/^[67]/.test(nacional) || nacional.startsWith('8')) return 'ES'; if (nacional.startsWith('2') || nacional.startsWith('9')) return dizEs ? 'ES' : 'PT'; } if (dizEs) return 'ES'; if (dizPt) return 'PT'; return 'OUTRO'; } function sdrAiForaDoPedido(lead) { const fase = lead.circuito?.fase; const motivo = lead.circuito?.motivo || ''; if (fase === 'assistencia' || motivo === 'assistencia' || motivo === 'recrutamento' || motivo === 'pediu_email') return true; if (lead.source !== 'WEB') return false; const texto = `${lead.pedido || ''} ${lead.form_nome || ''}`.toLowerCase(); if (/recrut|candidat|emprego/.test(texto)) return true; if (/avaria|m[aá]quina parada|n[aã]o imprime|assist[eê]ncia|suporte t[eé]cnico/.test(texto)) return true; if (/n[aã]o me liguem|s[oó] por e-?mail|prefiro e-?mail/.test(texto)) return true; return false; } function sdrAiElegivel(lead) { const mercado = sdrAiMercado(lead); if (mercado !== 'PT' && mercado !== 'ES') return false; if (sdrAiDigitosTel(lead.telefone).length < 9) return false; return !sdrAiForaDoPedido(lead); } function sdrAiFicouNaChamada(lead) { const fase = lead.circuito?.fase; if (fase === 'recusou' || fase === 'wa_respondeu') return false; return fase === 'atendeu' || !!lead.respondeu; } function sdrAiQualificadaBant(lead) { if ((lead.bant_n || 0) < 4) return false; const prazo = String(lead.bant_valores?.timeline || '').trim(); return /^(0-3m|3-6m|6-12m)$/i.test(prazo); } function sdrAiGanha(lead) { return lead?.op_status === 'WON' || lead?.oportunidade === 'Ganha'; } function sdrAiTemOportunidade(lead) { return !!(lead?.stage || lead?.oportunidade); } function sdrAiEstadoNurturing(lead) { if (sdrAiGanha(lead)) return { label: 'Ganha', cor: '#166534' }; return { label: 'Em nurturing', cor: '#92400e' }; } function sdrAiEstadoOk(lead, estado) { if (!estado || estado === 'all' || estado === 'atribuidos') return true; if (estado === 'contactados') return !!lead.respondeu || sdrAiContactoDigi(lead); if (estado === 'elegiveis') return sdrAiElegivel(lead); if (estado === 'qualificados') return sdrAiQualificadaBant(lead); if (estado === 'nao_qualificados') return !!lead.recusa; if (estado === 'chamadas') return !!lead.circuito?.chamada; if (estado === 'whatsapp') return lead.circuito?.wa_estado === 'enviado'; if (estado === 'sem_contacto') return lead.circuito?.fase === 'sem_contacto'; if (estado === 'nurturing') return sdrAiTemOportunidade(lead) && !sdrAiGanha(lead); if (estado === 'nurturing_ganhas') return sdrAiGanha(lead); if (estado === 'nurturing_contactos' || estado === 'nurturing_demos') return false; return true; } function sdrAiOportOk(lead, oport) { if (!oport || oport === 'all') return true; if (oport === 'sem') return !lead.stage && !lead.oportunidade; return lead.stage === oport; } const SDR_AI_COLUNAS = [ { id: 'nome', label: 'Nome', w: 160 }, { id: 'empresa', label: 'Empresa', w: 160 }, { id: 'email', label: 'Email', w: 200 }, { id: 'telefone', label: 'Telefone', w: 130 }, { id: 'origem', label: 'Origem', w: 240 }, { id: 'estado', label: 'Estado', w: 140 }, { id: 'bant', label: 'BANT', w: 90 }, { id: 'oportunidade', label: 'Oportunidade', w: 150 }, ]; const SDR_AI_COLUNAS_NURTURING = [ { id: 'empresa', label: 'Empresa', w: 180 }, { id: 'contacto', label: 'Contacto', w: 160 }, { id: 'oportunidade', label: 'Oportunidade', w: 180 }, { id: 'stage', label: 'Stage', w: 150 }, { id: 'proximo', label: 'Próximo', w: 120 }, { id: 'estado', label: 'Estado', w: 140 }, { id: 'valor', label: 'Valor', w: 110 }, ]; function sdrAiDirInicial(ordem) { return ordem === 'recentes' || ordem === 'bant' || ordem === 'valor' ? 'desc' : 'asc'; } function sdrAiLargurasIniciais() { const base = {}; SDR_AI_COLUNAS.concat(SDR_AI_COLUNAS_NURTURING).forEach(c => { base[c.id] = c.w; }); try { const gravado = JSON.parse(localStorage.getItem('sdr-ai-lista-larguras') || '{}'); SDR_AI_COLUNAS.concat(SDR_AI_COLUNAS_NURTURING).forEach(c => { const n = Number(gravado[c.id]); if (n >= 56 && n <= 640) base[c.id] = n; }); } catch { /* larguras de origem */ } return base; } function sdrAiOrdenar(lista, ordem, ano, dir, modo) { const out = lista.slice(); const sentido = dir || sdrAiDirInicial(ordem); const vazio = (v) => v == null || v === '' || v === '—'; const cmp = (a, b) => { if (vazio(a) && vazio(b)) return 0; if (vazio(a)) return 1; if (vazio(b)) return -1; const r = typeof a === 'number' && typeof b === 'number' ? a - b : String(a).localeCompare(String(b), 'pt', { numeric: true, sensitivity: 'base' }); return sentido === 'asc' ? r : -r; }; const valorDe = (lead) => { if (ordem === 'nome') return sdrAiNomeLista(lead); if (ordem === 'empresa') return lead.empresa; if (ordem === 'email') return lead.email; if (ordem === 'telefone') return lead.telefone; if (ordem === 'origem') return sdrAiOrigemChave(lead); if (ordem === 'estado') return (modo === 'nurturing' ? sdrAiEstadoNurturing(lead) : sdrAiEstadoConsulta(lead)).label; if (ordem === 'bant') return lead.bant_n; if (ordem === 'contacto') return sdrAiNomeLista(lead); if (ordem === 'stage') return lead.stage; if (ordem === 'proximo') return null; if (ordem === 'valor') return lead.valor > 1 ? Number(lead.valor) : null; if (ordem === 'oportunidade') { const ganha = lead.op_status === 'WON' || lead.oportunidade === 'Ganha'; return lead.stage || (ganha ? 'Ganha' : lead.oportunidade) || null; } return sdrAiDataLead(lead, ano)?.getTime() || null; }; out.sort((a, b) => cmp(valorDe(a), valorDe(b))); return out; } const SdrAIFiltro = ({ label, value, options, onChange, marcado = false, menuMinWidth = 180, menuMaxHeight = 320 }) => { const [open, setOpen] = React.useState(false); const [over, setOver] = React.useState(false); const [overItem, setOverItem] = React.useState(null); const ref = React.useRef(null); React.useEffect(() => { if (!open) return; const fechar = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener('mousedown', fechar); return () => document.removeEventListener('mousedown', fechar); }, [open]); const current = options.find(o => o.value === value) || { value, label: value || '—' }; const vazio = options[0]?.value; const activoVisual = marcado || open; const azul = 'var(--ai-500, #3859D0)'; return (
{open && (
{options.map((o, i) => { const activo = o.value === value || overItem === o.value; const header = o.grupo && o.grupo !== options[i - 1]?.grupo; return ( {header &&
{o.grupo}
} ); })}
)}
); }; const SDR_AI_PERIODO_PRESETS = [ { id: 'all', label: 'Todo o período' }, { id: 'custom', label: 'Personalizado' }, { id: 'today', label: 'Hoje' }, { id: 'yesterday', label: 'Ontem' }, { id: 'last_7d', label: 'Últimos 7 dias' }, { id: 'last_28d', label: 'Últimos 28 dias' }, { id: 'last_30d', label: 'Últimos 30 dias' }, { id: 'this_month', label: 'Este mês' }, { id: 'last_month', label: 'Mês passado' }, { id: 'last_90d', label: 'Últimos 90 dias' }, { id: 'qtd', label: 'Trimestre actual' }, ]; const SdrAIPeriodo = ({ value, onChange, ano }) => { const ref = React.useRef(null); const [open, setOpen] = React.useState(false); const [over, setOver] = React.useState(false); const [overPreset, setOverPreset] = React.useState(null); const [overBtn, setOverBtn] = React.useState(null); const [draftStart, setDraftStart] = React.useState(value.start); const [draftEnd, setDraftEnd] = React.useState(value.end); const [draftPreset, setDraftPreset] = React.useState(value.preset); const [pickStart, setPickStart] = React.useState(true); const [anchor, setAnchor] = React.useState(() => { const d = new Date(value.end || sdrAiTecto(ano)); return new Date(d.getFullYear(), d.getMonth() - 1, 1); }); const chao = sdrAiChao(ano); const tecto = sdrAiTecto(ano); const labels = Object.fromEntries(SDR_AI_PERIODO_PRESETS.map(p => [p.id, p.label])); const fmt = (d) => d ? d.toLocaleDateString('pt-PT', { day: 'numeric', month: 'short', year: 'numeric' }).replace('.', '') : '—'; const fmtCurto = (d) => d ? d.toLocaleDateString('pt-PT', { day: 'numeric', month: 'short' }).replace('.', '') : ''; React.useEffect(() => { if (!open) return; const fechar = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener('mousedown', fechar); return () => document.removeEventListener('mousedown', fechar); }, [open]); React.useEffect(() => { if (!open) return; setDraftStart(value.start || chao); setDraftEnd(value.end || tecto); setDraftPreset(value.preset || 'all'); const d = new Date(value.end || tecto); setAnchor(new Date(d.getFullYear(), d.getMonth() - 1, 1)); setPickStart(true); }, [open]); const aplicarPreset = (id) => { if (id === 'custom') { setDraftPreset('custom'); return; } if (id === 'all') { setDraftPreset('all'); setDraftStart(chao); setDraftEnd(tecto); setAnchor(new Date(tecto.getFullYear(), tecto.getMonth() - 1, 1)); setPickStart(true); return; } const r = sdrAiIntervalo(id, ano); if (!r) return; setDraftPreset(r.preset); setDraftStart(r.start); setDraftEnd(r.end); setAnchor(new Date(r.end.getFullYear(), r.end.getMonth() - 1, 1)); setPickStart(true); }; const escolherDia = (d) => { if (d < chao || d > tecto) return; if (pickStart || !draftStart || (draftEnd && d < draftStart)) { setDraftStart(d); setDraftEnd(d); setPickStart(false); setDraftPreset('custom'); } else { setDraftEnd(d < draftStart ? draftStart : d); if (d < draftStart) setDraftStart(d); setPickStart(true); setDraftPreset('custom'); } }; const aplicar = () => { if (draftPreset === 'all') onChange(sdrAiPeriodoTodo(ano)); else onChange({ preset: draftPreset, start: draftStart, end: draftEnd }); setOpen(false); }; const marcado = value.preset && value.preset !== 'all'; const azul = 'var(--ai-500, #3859D0)'; const trigger = labels[value.preset] || 'Personalizado'; const intervalo = marcado && value.start && value.end ? `${fmtCurto(value.start)} – ${fmt(value.end)}` : ''; const Mes = ({ date }) => { const y = date.getFullYear(); const m = date.getMonth(); const primeiro = new Date(y, m, 1).getDay(); const dias = new Date(y, m + 1, 0).getDate(); const cells = []; for (let i = 0; i < primeiro; i++) cells.push(null); for (let d = 1; d <= dias; d++) cells.push(new Date(y, m, d)); const noIntervalo = (d) => draftStart && draftEnd && d >= sdrAiDia(draftStart) && d <= sdrAiDia(draftEnd); const igual = (d, outro) => outro && d.getTime() === sdrAiDia(outro).getTime(); return (
{date.toLocaleDateString('pt-PT', { month: 'long', year: 'numeric' }).toUpperCase()}
{cells.map((d, i) => { if (!d) return
; const fora = d < chao || d > tecto; const dentro = noIntervalo(d); const extremo = igual(d, draftStart) || igual(d, draftEnd); return ( ); })}
); }; const seguinte = new Date(anchor.getFullYear(), anchor.getMonth() + 1, 1); return (
{open && (
{SDR_AI_PERIODO_PRESETS.map(p => { const activo = draftPreset === p.id || overPreset === p.id; return ( ); })}
Data início
{fmt(draftStart)}
—
Data fim
{fmt(draftEnd)}
{['D', 'S', 'T', 'Q', 'Q', 'S', 'S'].map((d, i) => (
{d}
))}
{draftPreset === 'all' ? 'Sem limite de datas' : (draftStart && draftEnd ? `${Math.round((sdrAiDia(draftEnd) - sdrAiDia(draftStart)) / 86400000) + 1} dias` : '')}
)}
); }; function sdrAiEntradasDe(leads) { return SDR_AI_MESES.map(mes => { const rows = leads.filter(l => l.mes === mes); return { mes, entradas: rows.length, ads: rows.filter(l => l.source === 'ADS').length, web: rows.filter(l => l.source === 'WEB').length, newsletter: rows.filter(l => l.source === 'NEWSLETTER').length, }; }); } const SdrAIInboundTable = ({ rows, onCellClick }) => { const mesIdx = (() => { const m = SDR_AI_MESES[new Date().getMonth()]; const i = rows.findIndex(r => r.mes === m); return i >= 0 ? i : rows.length - 1; })(); const nCols = rows.length + 2; const fv = (val, i) => i > mesIdx ? '—' : val; const ytd = rows.reduce((s, r) => ({ entradas: s.entradas + (r.entradas || 0), ads: s.ads + (r.ads || 0), web: s.web + (r.web || 0), newsletter: s.newsletter + (r.newsletter || 0), }), { entradas: 0, ads: 0, web: 0, newsletter: 0 }); const th = { padding: '7px 8px', textAlign: 'right', fontSize: 11, color: 'var(--dgd-fg-3)', fontFamily: 'var(--dgd-font-mono,monospace)', borderBottom: '1px solid var(--dgd-border-1)', whiteSpace: 'nowrap', fontWeight: 600 }; const thL = { ...th, textAlign: 'left' }; const tdBase = { padding: '6px 8px', fontSize: 12, fontFamily: 'var(--dgd-font-mono,monospace)', borderBottom: '1px solid var(--dgd-border-1)', whiteSpace: 'nowrap', textAlign: 'right', color: 'var(--dgd-fg-2)' }; const tdL = { ...tdBase, textAlign: 'left' }; const clickStyle = { cursor: 'pointer', textDecoration: 'underline', textDecorationStyle: 'dotted' }; const linha = (label, metric, key) => ( {label} {rows.map((r, i) => ( onCellClick && onCellClick(metric, r.mes)}>{fv(r[key] || 0, i)} ))} {ytd[key]} ); return (
{rows.map((r, i) => ( ))} Entradas de marketing {linha('Entradas', 'entradas', 'entradas')} {linha('ADS', 'ADS', 'ads')} {linha('WEB', 'WEB', 'web')} {linha('NEWSLETTER', 'NEWSLETTER', 'newsletter')}
Métrica{r.mes}YTD
); }; function sdrAiNomeLista(lead) { if (/^\[your-name\]$/i.test(lead.nome || '')) return lead.email || 'Sem nome'; return lead.nome; } function sdrAiOrigem(lead) { const nome = String(lead.action || '').trim(); return nome && nome !== '—' ? nome : '—'; } function sdrAiSite(lead) { const raw = String(lead.page_url || '').trim(); if (!raw) return ''; try { return new URL(raw.includes('://') ? raw : `https://${raw}`).hostname.replace(/^www\./i, ''); } catch { return ''; } } function sdrAiOrigemChave(lead) { const nome = sdrAiOrigem(lead); if (lead.source !== 'WEB') return nome; const site = sdrAiSite(lead); return site ? `${nome} · ${site}` : nome; } function sdrAiOrigemCanal(lead) { const source = lead.source_label || lead.source || ''; const canal = lead.canal || ''; if (lead.source === 'ADS' && canal && canal !== source) return `${source} · ${canal}`; if (lead.source === 'WEB') { const site = sdrAiSite(lead); return site ? `WEB · ${site}` : 'WEB'; } return source; } function sdrAiGrupoOrigem(lead) { if (lead.source === 'WEB') return 'Formulários'; if (lead.source === 'NEWSLETTER') return 'Newsletters'; return 'Campanhas'; } function sdrAiDetalhe(lead) { if (lead.source === 'ADS') return lead.canal || '—'; if (lead.source === 'WEB' && /footer/i.test(lead.action || '') && !lead.pedido) return 'Só email'; const texto = String(lead.pedido || lead.assunto || '').replace(/\s+/g, ' ').trim(); return texto ? texto.slice(0, 90) : '—'; } function sdrAiValorCampo(lead, re) { for (const c of lead.campos || []) { if (re.test(String(c.label || '').trim()) && c.value) return String(c.value).trim(); } return ''; } function sdrAiCidade(lead) { return sdrAiValorCampo(lead, /^(city|cidade)$/i); } function sdrAiRespostaForm(lead) { const inv = sdrAiValorCampo(lead, /estimativa de investimento/i); const prob = sdrAiValorCampo(lead, /informa[cç][õo]es sobre o problema/i); if (inv && prob) return `Investimento: ${inv}\nProblema: ${prob}`; return inv || prob || ''; } function SdrAICelula({ texto, style, title }) { const v = texto && String(texto).trim() ? String(texto).trim() : '—'; const tip = title && String(title).trim() ? String(title).trim() : (v !== '—' ? v : undefined); return
{v}
; } function sdrAiTemTelefone(lead) { return String(lead.telefone || '').replace(/\D/g, '').length >= 9; } function sdrAiEuros(valor) { if (valor == null || valor <= 1) return '—'; return new Intl.NumberFormat('pt-PT', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }).format(valor); } const SdrAIBantLetras = ({ lead }) => { const fields = [['B', 'budget', 'Budget'], ['A', 'authority', 'Authority'], ['N', 'need', 'Need'], ['T', 'timeline', 'Timeline']]; return (
{fields.map(([label, key, nome]) => { const texto = lead.bant_valores?.[key]; const flag = lead.bant?.[key]; const v = flag === false ? false : (texto || flag === true ? true : null); const color = v === true ? '#166534' : v === false ? '#991b1b' : '#94a3b8'; const bg = v === true ? '#f0fdf4' : v === false ? '#fef2f2' : '#f1f5f9'; const border = v === true ? '#bbf7d0' : v === false ? '#fecaca' : '#e2e8f0'; const title = v === true ? `${nome}: ${texto || 'sim'}` : v === false ? `${nome}: não` : nome; return {label}; })}
); }; const SdrAIInboundPanel = ({ leads: leadsTodas = [], sdrList = [], foco, selAno, recorte, onAbrir, onPassou, onLista, passados = {}, modo = 'qualificacao', onModo, nQual = 0, nNurt = 0 }) => { const [search, setSearch] = React.useState(''); const [marca, setMarca] = React.useState('Todas'); const [source, setSource] = React.useState('all'); const [action, setAction] = React.useState('all'); const [origem, setOrigem] = React.useState('all'); const [estado, setEstado] = React.useState('all'); const [oport, setOport] = React.useState('all'); const [pais, setPais] = React.useState('all'); const [ordem, setOrdem] = React.useState('recentes'); const [ordemDir, setOrdemDir] = React.useState('desc'); const [larguras, setLarguras] = React.useState(sdrAiLargurasIniciais); const arrastou = React.useRef(false); const [periodo, setPeriodo] = React.useState(() => sdrAiPeriodoTodo(selAno)); const [sel, setSel] = React.useState({}); const [sdrLote, setSdrLote] = React.useState(''); const [aPassar, setAPassar] = React.useState(false); const [resumoPassar, setResumoPassar] = React.useState(''); const [verArquivo, setVerArquivo] = React.useState(false); const [confirmarApagar, setConfirmarApagar] = React.useState(false); const [busca, setBusca] = React.useState(false); const [menuAberto, setMenuAberto] = React.useState(false); const menuRef = React.useRef(null); React.useEffect(() => { if (!menuAberto) return undefined; const fechar = (e) => { if (menuRef.current && !menuRef.current.contains(e.target)) setMenuAberto(false); }; document.addEventListener('mousedown', fechar); return () => document.removeEventListener('mousedown', fechar); }, [menuAberto]); const headScrollRef = React.useRef(null); const bodyScrollRef = React.useRef(null); const leads = leadsTodas.filter(l => { if (verArquivo ? !l.arquivada : !!l.arquivada) return false; if (modo === 'nurturing' && !sdrAiTemOportunidade(l)) return false; return true; }); const modoVisto = React.useRef(modo); React.useEffect(() => { if (modoVisto.current === modo) return; modoVisto.current = modo; setEstado('all'); setOport('all'); setPais('all'); setSel({}); setConfirmarApagar(false); setPeriodo(sdrAiPeriodoTodo(selAno)); }, [modo]); const limparLista = () => { setMarca('Todas'); setSource('all'); setAction('all'); setOrigem('all'); setEstado('all'); setOport('all'); setPais('all'); setOrdem('recentes'); setOrdemDir('desc'); setPeriodo(sdrAiPeriodoTodo(selAno)); setSearch(''); }; const anoVisto = React.useRef(selAno); React.useEffect(() => { if (anoVisto.current !== selAno) { anoVisto.current = selAno; limparLista(); return; } if (!recorte) return; setMarca('Todas'); setSource('all'); setAction('all'); setOrigem('all'); setOport('all'); setPais('all'); setOrdem('recentes'); setOrdemDir('desc'); setSearch(''); setPeriodo(recorte.mes ? sdrAiIntervaloMes(recorte.mes, selAno) : sdrAiPeriodoTodo(selAno)); setEstado(['contactados', 'qualificados', 'nao_qualificados', 'chamadas', 'whatsapp', 'sem_contacto', 'elegiveis', 'nurturing', 'nurturing_contactos', 'nurturing_demos', 'nurturing_ganhas'].includes(recorte.metrica) ? recorte.metrica : 'all'); }, [recorte, selAno]); React.useEffect(() => { if (!foco) return; setSource(foco.source || 'all'); setPeriodo(foco.mes ? sdrAiIntervaloMes(foco.mes, selAno) : sdrAiPeriodoTodo(selAno)); }, [foco]); const aceita = (lead, skip) => { if (skip !== 'marca' && marca !== 'Todas' && lead.marca !== marca) return false; if (skip !== 'source' && source !== 'all' && lead.source !== source) return false; if (skip !== 'action' && action !== 'all' && sdrAiActionId(lead) !== action) return false; if (skip !== 'origem' && origem !== 'all' && sdrAiOrigemChave(lead) !== origem) return false; if (skip !== 'estado' && !sdrAiEstadoOk(lead, estado)) return false; if (skip !== 'oport' && !sdrAiOportOk(lead, oport)) return false; if (skip !== 'pais' && pais !== 'all' && sdrAiMercado(lead) !== pais) return false; if (skip !== 'periodo' && !sdrAiNoPeriodoFiltro(lead, periodo, selAno)) return false; return true; }; const contar = (skip, pred) => leads.reduce((n, lead) => n + (aceita(lead, skip) && pred(lead) ? 1 : 0), 0); const opcoesMarca = [{ value: 'Todas', label: 'Todas', n: contar('marca', () => true) }].concat( SDR_AI_ORDEM_MARCAS .map(nome => ({ value: nome, label: nome, n: contar('marca', l => l.marca === nome) })) .filter(o => o.n > 0) ); const opcoesSource = [{ value: 'all', label: 'Todas', n: contar('source', () => true) }].concat( SDR_AI_SOURCES.map(s => ({ value: s.id, label: s.label, n: contar('source', l => l.source === s.id) })) ); const opcoesAction = [{ value: 'all', label: 'Todas', n: contar('action', () => true) }].concat( SDR_AI_ACTIONS .filter(a => source === 'all' || a.source === source) .map(a => ({ value: a.id, label: a.id, grupo: source === 'all' ? a.source : undefined, n: contar('action', l => sdrAiActionId(l) === a.id), })) ); const origemMap = new Map(); leads.forEach(lead => { if (!aceita(lead, 'origem')) return; const nome = sdrAiOrigemChave(lead); if (!nome || nome === '—') return; const prev = origemMap.get(nome) || { n: 0, grupo: sdrAiGrupoOrigem(lead) }; prev.n += 1; origemMap.set(nome, prev); }); const ordemGrupo = { Campanhas: 0, Formulários: 1, Newsletters: 2 }; const opcoesOrigem = [{ value: 'all', label: 'Todas', n: contar('origem', () => true) }].concat( [...origemMap.entries()] .sort((a, b) => (source === 'all' ? (ordemGrupo[a[1].grupo] - ordemGrupo[b[1].grupo]) : 0) || b[1].n - a[1].n || a[0].localeCompare(b[0], 'pt')) .map(([nome, info]) => ({ value: nome, label: nome, n: info.n, grupo: source === 'all' ? info.grupo : undefined })) ); const etiquetaOrigem = source === 'WEB' ? 'Formulário' : source === 'ADS' ? 'Campanha' : 'Origem'; const opcoesEstado = (modo === 'nurturing' ? [ ['all', 'Oportunidades', () => true], ['nurturing', 'Em nurturing', l => sdrAiTemOportunidade(l) && !sdrAiGanha(l)], ['nurturing_ganhas', 'Ganhas', sdrAiGanha], ['nurturing_contactos', 'Contactos feitos', () => false], ['nurturing_demos', 'Demos ou visitas', () => false], ] : [ ['all', 'Leads Atribuídos', () => true], ['elegiveis', 'Elegíveis', sdrAiElegivel], ['contactados', 'Leads Contactados', l => !!l.respondeu || sdrAiContactoDigi(l)], ['qualificados', 'Qualificados BANT', sdrAiQualificadaBant], ['nao_qualificados', 'Não Qualificados BANT', l => !!l.recusa], ['chamadas', 'Chamadas', l => !!l.circuito?.chamada], ['whatsapp', 'WhatsApp após falha', l => l.circuito?.wa_estado === 'enviado'], ['sem_contacto', 'Sem contacto', l => l.circuito?.fase === 'sem_contacto'], ]).map(([value, label, pred]) => ({ value, label, n: contar('estado', pred) })); const opcoesOport = [{ value: 'all', label: 'Todas', n: contar('oport', () => true) }] .concat(SDR_AI_STAGES.map(st => ({ value: st, label: st, n: contar('oport', l => l.stage === st) }))) .concat([{ value: 'sem', label: 'Sem oportunidade', n: contar('oport', l => !l.stage && !l.oportunidade) }]); const opcoesPais = [ ['all', 'Todos', () => true], ['PT', 'Portugal', l => sdrAiMercado(l) === 'PT'], ['ES', 'Espanha', l => sdrAiMercado(l) === 'ES'], ['OUTRO', 'Outros', l => sdrAiMercado(l) === 'OUTRO'], ].map(([value, label, pred]) => ({ value, label, n: contar('pais', pred) })); const mudarOrdem = (key) => { setOrdem(key); setOrdemDir(sdrAiDirInicial(key)); }; React.useEffect(() => { if (action !== 'all' && source !== 'all' && !SDR_AI_ACTIONS.some(a => a.id === action && a.source === source)) setAction('all'); }, [action, source]); React.useEffect(() => { if (origem === 'all') return; const existe = leads.some(l => (marca === 'Todas' || l.marca === marca) && (source === 'all' || l.source === source) && (action === 'all' || sdrAiActionId(l) === action) && sdrAiOrigemChave(l) === origem); if (!existe) setOrigem('all'); }, [origem, marca, source, action, leads]); const jaPassadoDe = (lead) => passados[lead.id] || (lead.passado ? { nome: lead.passado_sdr || '' } : null); const filtered = sdrAiOrdenar(leads.filter(lead => aceita(lead)).map(lead => { const p = jaPassadoDe(lead); return p ? { ...lead, passado: true, passado_sdr: p.nome || lead.passado_sdr } : lead; }), ordem, selAno, ordemDir, modo); const colBox = (id) => ({ flex: `0 0 ${larguras[id]}px`, width: larguras[id], minWidth: 0, maxWidth: larguras[id], overflow: 'hidden' }); const clicarColuna = (id) => { if (arrastou.current) { arrastou.current = false; return; } if (ordem !== id) { mudarOrdem(id); return; } const inicial = sdrAiDirInicial(id); if (ordemDir === inicial) setOrdemDir(inicial === 'asc' ? 'desc' : 'asc'); else { setOrdem('recentes'); setOrdemDir('desc'); } }; const iniciarArrasto = (id, e) => { e.preventDefault(); e.stopPropagation(); const inicioX = e.clientX; const inicioW = larguras[id]; arrastou.current = false; const mover = (ev) => { const dx = ev.clientX - inicioX; if (Math.abs(dx) > 2) arrastou.current = true; const n = Math.max(56, Math.min(640, inicioW + dx)); setLarguras(prev => ({ ...prev, [id]: n })); }; const soltar = () => { window.removeEventListener('mousemove', mover); window.removeEventListener('mouseup', soltar); document.body.style.cursor = ''; document.body.style.userSelect = ''; setLarguras(prev => { try { localStorage.setItem('sdr-ai-lista-larguras', JSON.stringify(prev)); } catch { /* sem gravar */ } return prev; }); }; document.body.style.cursor = 'col-resize'; document.body.style.userSelect = 'none'; window.addEventListener('mousemove', mover); window.addEventListener('mouseup', soltar); }; const seleccionadas = filtered.filter(lead => sel[lead.id]); const allSelected = filtered.length > 0 && seleccionadas.length === filtered.length; const toggleSel = (id) => { setResumoPassar(''); setConfirmarApagar(false); setSel(prev => ({ ...prev, [id]: !prev[id] })); }; const toggleAll = () => { setResumoPassar(''); setConfirmarApagar(false); if (allSelected) setSel({}); else { const next = {}; filtered.forEach(lead => { next[lead.id] = true; }); setSel(next); } }; const aplicarLista = async (accao) => { if (!seleccionadas.length) return; if (accao === 'apagar' && !confirmarApagar) { setConfirmarApagar(true); return; } setAPassar(true); setResumoPassar(''); const ids = seleccionadas.map(lead => lead.id); const r = await fetch('/api/comercial/sdr/ai/lista', { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ contacto_ids: ids, accao }), }).then(res => res.ok ? res.json() : null).catch(() => null); setAPassar(false); setConfirmarApagar(false); if (!r?.ok) { setResumoPassar('Não ficou gravado.'); return; } onLista?.(ids, accao); setSel({}); const n = r.n || ids.length; setResumoPassar(accao === 'apagar' ? `${n} apagada${n === 1 ? '' : 's'} desta lista.` : accao === 'arquivar' ? `${n} arquivada${n === 1 ? '' : 's'}.` : `${n} reposta${n === 1 ? '' : 's'} na lista.`); }; const passarLote = async () => { if (!sdrLote || !seleccionadas.length) return; setAPassar(true); setResumoPassar(''); const paraPassar = seleccionadas.filter(lead => sdrAiTemTelefone(lead) && !jaPassadoDe(lead)); const deFora = seleccionadas.length - paraPassar.length; if (!paraPassar.length) { setAPassar(false); setResumoPassar('Nenhuma das seleccionadas pode ser passada. Falta telefone ou já foi passada.'); return; } let ok = 0; let falha = 0; let nome = sdrList.find(s => s.email === sdrLote)?.nome || ''; for (const lead of paraPassar) { const r = await fetch('/api/comercial/sdr/ai/passar', { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ contacto_id: lead.id, sdr_email: sdrLote, ano: selAno }), }).then(res => res.ok ? res.json() : null).catch(() => null); if (r?.ok) { ok += 1; nome = r.sdr_nome || nome; onPassou?.(lead.id, { nome: r.sdr_nome || nome }); } else falha += 1; } setAPassar(false); setSel({}); const nOk = `${ok} passada${ok === 1 ? '' : 's'}`; const foraTxt = deFora ? `, ${deFora} de fora` : ''; setResumoPassar(falha === 0 ? `${nOk} a ${nome}${foraTxt}.` : `${nOk}, ${falha} não ${falha === 1 ? 'passou' : 'passaram'}${foraTxt}.`); }; const head = { fontSize: 10, color: 'var(--dgd-fg-3)', fontFamily: 'var(--dgd-font-mono,monospace)', letterSpacing: '0.06em', textTransform: 'uppercase' }; const cell = { whiteSpace: 'pre-wrap', wordBreak: 'break-word', lineHeight: 1.35 }; return (
{[['qualificacao', 'Qualificação', nQual], ['nurturing', 'Nurturing', nNurt]].map(([id, label, n]) => ( ))}
{menuAberto && (
)}
{(seleccionadas.length > 0 || resumoPassar) && (
{seleccionadas.length > 0 && ( <>
{seleccionadas.length} seleccionada{seleccionadas.length === 1 ? '' : 's'} {confirmarApagar ? ( <> Apagar desta lista? ) : ( <> )}
)} {resumoPassar && {resumoPassar}}
)}
{ if (el) el.indeterminate = seleccionadas.length > 0 && !allSelected; }} onChange={toggleAll} style={{ width: 14, height: 14, cursor: filtered.length ? 'pointer' : 'default', accentColor: '#3859D0' }} />
{(modo === 'nurturing' ? SDR_AI_COLUNAS_NURTURING : SDR_AI_COLUNAS).map(col => (
clicarColuna(col.id)} style={{ ...head, ...colBox(col.id), position: 'relative', overflow: 'visible', cursor: 'pointer', userSelect: 'none' }}> {col.label}{ordem === col.id ? (ordemDir === 'asc' ? ' ↑' : ' ↓') : ''} iniciarArrasto(col.id, e)} onClick={e => e.stopPropagation()} title="Arrastar para ajustar a largura" style={{ position: 'absolute', top: -8, right: -8, width: 10, bottom: -8, cursor: 'col-resize' }} />
))}
{ if (headScrollRef.current && bodyScrollRef.current) headScrollRef.current.scrollLeft = bodyScrollRef.current.scrollLeft; }} style={{ overflowX: 'auto', background: 'var(--dgd-bg-card,white)', border: '1px solid var(--dgd-border-1)', borderTop: 'none', borderRadius: '0 0 8px 8px' }}> {filtered.length === 0 ? (
{verArquivo ? (modo === 'nurturing' ? 'Sem oportunidades arquivadas.' : 'Sem leads arquivadas.') : modo === 'nurturing' && leads.length === 0 ? 'Sem oportunidades em nurturing. Entram quando a lead aceita a demo ou a visita.' : modo === 'nurturing' ? 'Sem oportunidades para este filtro.' : 'Sem leads para os filtros seleccionados.'}
) : filtered.map(lead => { const passadoInfo = jaPassadoDe(lead); const jaPassado = !!passadoInfo; const estadoLead = sdrAiEstadoConsulta({ ...lead, passado: jaPassado }); const origemTxt = lead.source === 'NEWSLETTER' && lead.assunto ? lead.assunto : sdrAiOrigem(lead); const canalTxt = sdrAiOrigemCanal(lead); const ganha = lead.op_status === 'WON' || lead.oportunidade === 'Ganha'; const oportTxt = lead.stage || (ganha ? 'Ganha' : lead.oportunidade) || ''; const valorTxt = sdrAiEuros(lead.valor); return (
onAbrir && onAbrir(lead, filtered)} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, padding: '10px 14px', borderBottom: '1px solid var(--dgd-border-1)', cursor: 'pointer', background: 'transparent', minWidth: 'max-content' }} onMouseEnter={e => { e.currentTarget.style.background = 'var(--dgd-bg-app,#f8fafc)'; }} onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}>
e.stopPropagation()}> toggleSel(lead.id)} style={{ width: 14, height: 14, cursor: 'pointer', accentColor: '#3859D0' }} />
{modo === 'nurturing' ? ( <> ) : ( <> {sdrAiTemTelefone(lead) ? : }
{canalTxt &&
{canalTxt}
}
{jaPassado && passadoInfo.nome &&
{passadoInfo.nome}
}
{valorTxt !== '—' &&
{valorTxt}
}
)}
); })}
{filtered.length} {modo === 'nurturing' ? `oportunidade${filtered.length === 1 ? '' : 's'}` : `lead${filtered.length === 1 ? '' : 's'}`}
{busca && !l.apagada)} onClose={() => setBusca(false)} onAbrir={(lead) => { setBusca(false); onAbrir?.(lead, [lead]); }} />}
); }; const SdrAIBusca = ({ leads, onClose, onAbrir }) => { const [q, setQ] = React.useState(''); const [foco, setFoco] = React.useState(0); const campo = React.useRef(null); React.useEffect(() => { campo.current?.focus(); }, []); React.useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose?.(); }; document.addEventListener('keydown', onKey); return () => document.removeEventListener('keydown', onKey); }, [onClose]); const termo = q.trim().toLowerCase(); const rows = termo.length < 2 ? [] : leads.filter(lead => { const blob = [sdrAiNomeLista(lead), lead.empresa, lead.email, lead.telefone, lead.pais].filter(Boolean).join(' ').toLowerCase(); return blob.includes(termo); }).slice(0, 8); const mercado = (lead) => ({ PT: 'Portugal', ES: 'Espanha', OUTRO: 'Outro' }[sdrAiMercado(lead)] || ''); const abrir = (lead) => { if (lead) onAbrir?.(lead); }; const onKeyDown = (e) => { if (e.key === 'ArrowDown') { e.preventDefault(); setFoco(i => Math.min(Math.max(rows.length - 1, 0), i + 1)); } if (e.key === 'ArrowUp') { e.preventDefault(); setFoco(i => Math.max(0, i - 1)); } if (e.key === 'Enter') { e.preventDefault(); abrir(rows[foco]); } }; return (
e.stopPropagation()} style={{ width: 'min(920px, 100%)' }}>
{ setQ(e.target.value); setFoco(0); }} onKeyDown={onKeyDown} placeholder="Procurar" aria-label="Procurar" style={{ flex: 1, height: 48, border: 'none', outline: 'none', background: 'transparent', color: '#fff', fontSize: 22, fontFamily: 'inherit' }} />
{termo.length >= 2 && (
{!rows.length &&
Nenhuma lead.
} {rows.map((lead, i) => ( ))}
)}
); }; // ─── Entry point — exportado para window ────────────────────────────────────── function sdrAiFunilDe(leads) { return SDR_AI_MESES.map(mes => { const rows = leads.filter(l => l.mes === mes); const contactados = rows.filter(l => l.respondeu || l.status !== 'atribuido'); return { mes, atribuidos: rows.length, contactados: contactados.length, qualificados: rows.filter(l => (l.bant_n || 0) >= 4).length, em_qualificacao: rows.filter(l => l.status === 'em_qualificacao').length, nao_qualificados: rows.filter(l => l.status === 'nao_qualificado').length, }; }); } function sdrAiFunilDaLista(leads) { return SDR_AI_MESES.map(mes => { const rows = leads.filter(l => l.mes === mes); const elegiveis = rows.filter(sdrAiElegivel); return { mes, atribuidos: rows.length, contactados: rows.filter(l => l.respondeu || sdrAiContactoDigi(l)).length, qualificados: rows.filter(sdrAiQualificadaBant).length, nao_qualificados: rows.filter(l => l.recusa || (l.circuito?.fase === 'atendeu' && !sdrAiQualificadaBant(l))).length, chamadas: rows.filter(l => l.circuito?.chamada).length, whatsapp: rows.filter(l => l.circuito?.wa_estado === 'enviado').length, sem_contacto: rows.filter(l => l.circuito?.fase === 'sem_contacto').length, elegiveis: elegiveis.length, na_chamada: rows.filter(sdrAiFicouNaChamada).length, contactos_digi: rows.filter(sdrAiContactoDigi).length, nurturing: rows.filter(l => sdrAiTemOportunidade(l) && !sdrAiGanha(l)).length, nurturing_contactos: 0, nurturing_demos: 0, nurturing_ganhas: rows.filter(sdrAiGanha).length, }; }); } const SDR_AI_CARDS_ACTIVOS = false; function sdrAiCards(leads) { if (!SDR_AI_CARDS_ACTIVOS) { return [ { l:'Taxa de Contacto', v:'0%', d:'Obj. >= 70%', c: aiSdrColor(0, 70) }, { l:'Qualificação BANT', v:'0%', d:'Obj. >= 40%', c: aiSdrColor(0, 40) }, { l:'Oportunidades Passadas', v:0, d:'0 desde Set · 0 demos', c:'var(--dgd-fg-1)' }, { l:'Taxa qualif. comercial', v:'0%', d:'Obj. >= 40%', c: aiSdrColor(0, 40) }, { l:'Pipeline Gerado', v:'0k', d:'0k desde Set', c:'#1d4ed8' }, ]; } const mes = SDR_AI_MESES[new Date().getMonth()]; const agora = leads.filter(l => l.mes === mes); const conta = (rows) => ({ a: rows.length, c: rows.filter(l => l.respondeu).length, q: rows.filter(l => (l.bant_n || 0) >= 4).length, p: rows.filter(l => l.passado).length, }); const m = conta(agora); const y = conta(leads); const tc = aiSdrPct(m.c, m.a) ?? 0; const tq = aiSdrPct(m.q, m.c) ?? 0; const tqc = aiSdrPct(m.p, m.q) ?? 0; return [ { l:'Taxa de Contacto', v:`${tc}%`, d:'Obj. >= 70%', c: aiSdrColor(tc, 70) }, { l:'Qualificação BANT', v:`${tq}%`, d:'Obj. >= 40%', c: aiSdrColor(tq, 40) }, { l:'Oportunidades Passadas', v: m.p, d:`${y.p} desde Set · 0 demos`, c:'var(--dgd-fg-1)' }, { l:'Taxa qualif. comercial', v:`${tqc}%`, d:'Obj. >= 40%', c: aiSdrColor(tqc, 40) }, { l:'Pipeline Gerado', v:'0k', d:'0k desde Set', c:'#1d4ed8' }, ]; } const SDR_AI_DIAS = ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado']; function sdrAiDiaUtilAnterior(hoje = new Date()) { const d = new Date(hoje.getFullYear(), hoje.getMonth(), hoje.getDate()); d.setDate(d.getDate() - 1); while (d.getDay() === 0 || d.getDay() === 6) d.setDate(d.getDate() - 1); return d; } function sdrAiIso(d) { return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`; } function sdrAiJuntar(items) { if (items.length <= 1) return items[0] || ''; return `${items.slice(0, -1).join(', ')} e ${items[items.length - 1]}`; } function sdrAiResumoTexto(leads, ano) { const dia = sdrAiDiaUtilAnterior(); const nome = SDR_AI_DIAS[dia.getDay()]; const doDia = leads.filter(l => { const d = sdrAiDataLead(l, ano); return d && d.getFullYear() === dia.getFullYear() && d.getMonth() === dia.getMonth() && d.getDate() === dia.getDate(); }); const n = doDia.length; const partes = ['ADS', 'WEB', 'NEWSLETTER'].map(s => ({ s, n: doDia.filter(l => l.source === s).length })).filter(p => p.n > 0); const detalhe = partes.length === 0 ? '' : partes.length === 1 ? (n === 1 ? `, de ${partes[0].s}` : ` de ${partes[0].s}`) : `, ${sdrAiJuntar(partes.map(p => `${p.n} ${p.s}`))}`; const entrada = n === 0 ? `${nome} não entrou nenhuma lead.` : n === 1 ? `${nome} entrou 1 lead${detalhe}.` : `${nome} entraram ${n} leads${detalhe}.`; if (!SDR_AI_CARDS_ACTIVOS) { return { data: sdrAiIso(dia), texto: `${entrada} A Digi não contactou nenhuma. Nada passou a humano. Nenhuma qualificação nova.` }; } const c = doDia.filter(l => l.respondeu).length; const q = doDia.filter(l => (l.bant_n || 0) >= 4).length; const rec = doDia.filter(l => l.recusa).length; const p = doDia.filter(l => l.passado).length; const op = doDia.filter(l => l.stage || l.oportunidade).length; return { data: sdrAiIso(dia), texto: `${entrada} A Digi contactou ${c} por WhatsApp, ${q} com BANT completo e ${rec} não qualificadas. ${p} passaram a humano. ${op} com oportunidade no Gestor.`, }; } const SdrAIResumo = ({ leads, ano }) => { const r = sdrAiResumoTexto(leads, ano); return (
DIGI AI · {r.data}

{r.texto}

); }; const SdrAIListaModal = ({ title, leads, onClose, onAbrir }) => (
{ if (e.target === e.currentTarget) onClose(); }} style={{ position: 'fixed', inset: 0, zIndex: 2000, background: 'rgba(0,0,0,0.35)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
{title}
{leads.length === 0 ? (
Sem leads para este critério neste mês.
) : ( {['Nome', 'Empresa', 'Source', 'Origem', 'BANT', 'Data'].map(h => ( ))} {leads.map(l => ( onAbrir(l, leads)} style={{ borderBottom: '1px solid var(--dgd-border-1)', cursor: 'pointer' }} onMouseEnter={e => { e.currentTarget.style.background = 'var(--dgd-bg-app,#f8fafc)'; }} onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}> ))}
{h}
{sdrAiNomeLista(l)} {l.empresa} {l.source_label} {sdrAiOrigem(l)} {l.bant_n == null ? '—' : `${l.bant_n}/4`} {l.data || '—'}
)}
{leads.length} lead{leads.length !== 1 ? 's' : ''}
); function sdrAiEstadoConsulta(lead) { const fase = lead.circuito?.fase; if ((lead.bant_n || 0) >= 4) return { label: 'Qualificada', cor: '#166534', bg: '#f0fdf4' }; if (lead.recusa) return { label: 'Não qualificada', cor: '#991b1b', bg: '#fef2f2' }; if (fase === 'sem_contacto') return { label: 'Sem contacto', cor: '#991b1b', bg: '#fef2f2' }; if (fase === 'assistencia') return { label: 'Assistência', cor: '#9a3412', bg: '#fff7ed' }; if (fase === 'recusou') return { label: 'Recusou a Digi', cor: '#9a3412', bg: '#fff7ed' }; if (fase === 'wa_respondeu') return { label: 'Respondeu no WhatsApp', cor: '#1d4ed8', bg: '#eff6ff' }; if (lead.passado) return { label: 'Passada ao SDR', cor: '#166534', bg: '#f0fdf4' }; if ((lead.bant_n || 0) >= 1 || fase === 'atendeu') return { label: 'Em qualificação', cor: '#92400e', bg: '#fffbeb' }; if (lead.respondeu) return { label: 'Contactada', cor: '#1d4ed8', bg: '#eff6ff' }; if (lead.circuito?.wa_estado === 'enviado') return { label: 'WhatsApp enviado', cor: '#1d4ed8', bg: '#eff6ff' }; if (lead.circuito?.chamada) return { label: 'Chamada sem resposta', cor: '#92400e', bg: '#fffbeb' }; if (fase === 'fora') return { label: 'Sem chamada automática', cor: '#64748b', bg: '#f1f5f9' }; if (fase === 'espera' || fase === 'espera_2') return { label: 'À espera da hora', cor: '#64748b', bg: '#f1f5f9' }; return { label: 'Por qualificar', cor: '#64748b', bg: '#f1f5f9' }; } function sdrAiEntradaCampos(lead) { const promoNome = [ [/estimativa de investimento/i, 'Investimento'], [/informa[cç][õo]es sobre o problema/i, 'Problema'], ]; const extraAds = [/^city$/i, /^cidade$/i, /^mercado$/i]; const promo = []; const extra = []; for (const c of lead.campos || []) { const label = String(c.label || '').trim(); if (!label || !c.value) continue; if (/job title|inbox url|first name|last name|^your message$|^cargo$/i.test(label)) continue; const nome = promoNome.find(([re]) => re.test(label)); if (lead.source === 'ADS' && nome) promo.push({ label: nome[1], value: c.value }); else if (lead.source === 'ADS' && extraAds.some(re => re.test(label))) extra.push({ label: /^city$/i.test(label) ? 'Cidade' : label.charAt(0).toUpperCase() + label.slice(1), value: c.value }); else if (lead.source !== 'ADS') extra.push({ label: label.charAt(0).toUpperCase() + label.slice(1), value: c.value }); } return { promo, extra }; } function sdrAiQuando(ts) { if (!ts) return ''; const d = new Date(ts); if (Number.isNaN(d.getTime())) return ''; const dia = d.toLocaleDateString('pt-PT', { day: '2-digit', month: '2-digit', timeZone: 'Europe/Lisbon' }); const hora = d.toLocaleTimeString('pt-PT', { hour: '2-digit', minute: '2-digit', timeZone: 'Europe/Lisbon' }); return hora && hora !== 'Invalid Date' ? `${dia} · ${hora}` : dia; } function sdrAiEventosFala(data) { if (Array.isArray(data?.eventos)) return data.eventos; const canais = Array.isArray(data?.canais) ? data.canais : []; return canais.flatMap(c => (c.mensagens || []).map(m => ({ tipo: 'mensagem', ts: m.ts || null, canal: c.canal, de: m.de, titulo: c.canal, detalhe: m.msg, }))); } function sdrAiQuem(de) { if (de === 'ai') return 'Digi'; if (de === 'humano') return 'Humano'; return 'Lead'; } const SdrAIFicha = ({ lead, sdrList = [], ano, navLeads = [], onIr, onClose, onNota, onPassou, onRevisao, vista = 'qualificacao' }) => { const [nota, setNota] = React.useState(lead.nota?.texto || ''); const [notaEstado, setNotaEstado] = React.useState('idle'); const [fala, setFala] = React.useState(null); const [revisao, setRevisao] = React.useState(lead.revisao || null); const [revErro, setRevErro] = React.useState(''); const [tab, setTab] = React.useState('qualificacao'); const raiz = React.useRef(null); React.useEffect(() => { raiz.current?.scrollIntoView({ block: 'start' }); }, [lead.id]); const head = { fontSize: 10, color: 'var(--dgd-fg-3)', fontFamily: 'var(--dgd-font-mono,monospace)', letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 8 }; const linha = (k, v) => v ? (
{k} {v}
) : null; React.useEffect(() => { let vivo = true; fetch(`/api/comercial/sdr/ai/fala?contacto_id=${encodeURIComponent(lead.id)}`, { credentials: 'include' }) .then(r => r.ok ? r.json() : { canais: [] }) .catch(() => ({ canais: [] })) .then(data => { if (vivo) setFala(data && typeof data === 'object' ? data : { canais: [], eventos: [] }); }); return () => { vivo = false; }; }, [lead.id]); const guardarNota = async () => { setNotaEstado('a-guardar'); const r = await fetch('/api/comercial/sdr/ai/nota', { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ contacto_id: lead.id, nota }), }).then(res => res.ok ? res.json() : null).catch(() => null); if (!r) { setNotaEstado('erro'); return; } setNotaEstado('gravada'); onNota?.(lead.id, r); }; const marcar = async (veredicto) => { setRevErro(''); const res = await fetch('/api/comercial/sdr/ai/revisao', { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ contacto_id: lead.id, visitor_id: lead.visitor_id || '', veredicto }), }).then(r => r.ok ? r.json() : null).catch(() => null); if (!res) { setRevErro('A revisão não ficou gravada.'); return; } setRevisao(res); onRevisao?.(lead.id, res); }; const estado = sdrAiEstadoConsulta(lead); const entrada = sdrAiEntradaCampos(lead); const fichaCampanha = lead.ficha_campanha || null; const campanhaLista = sdrAiOrigem(lead); const origemLista = lead.source === 'NEWSLETTER' && lead.assunto ? lead.assunto : campanhaLista; const navIdx = navLeads.findIndex(l => String(l.id) === String(lead.id)); const anterior = navIdx > 0 ? navLeads[navIdx - 1] : null; const seguinte = navIdx >= 0 && navIdx < navLeads.length - 1 ? navLeads[navIdx + 1] : null; React.useEffect(() => { const onKey = (e) => { const tag = document.activeElement && document.activeElement.tagName; if (tag === 'TEXTAREA' || tag === 'INPUT' || tag === 'SELECT') return; if (e.key === 'Escape') { onClose?.(); return; } if (e.key === 'ArrowLeft' && anterior) onIr?.(anterior); if (e.key === 'ArrowRight' && seguinte) onIr?.(seguinte); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [anterior, seguinte, onIr, onClose]); const titulo = lead.empresa && lead.empresa !== '—' ? lead.empresa : sdrAiNomeLista(lead); const subtitulo = [ titulo !== sdrAiNomeLista(lead) ? sdrAiNomeLista(lead) : null, origemLista !== '—' ? origemLista : null, lead.source === 'WEB' ? sdrAiSite(lead) : null, lead.source === 'ADS' && lead.canal && lead.canal !== (lead.source_label || lead.source) ? lead.canal : null, ].filter(Boolean).join(' · '); const seta = (activo) => ({ width: 28, height: 28, borderRadius: 6, border: '1px solid #dde3ef', background: '#fff', color: activo ? '#112954' : '#cbd5e1', cursor: activo ? 'pointer' : 'default', fontSize: 16, lineHeight: 1, }); const btn = { padding: '7px 14px', borderRadius: 6, fontSize: 12.5, cursor: 'pointer', fontWeight: 600 }; const bloco = (k, v) => v ? (
{k}
{v}
) : null; const listaTxt = (titulo, itens) => itens?.length ? (
{titulo}
{itens.map(item =>
{item}
)}
) : null; const caixa = { border: '1px solid var(--dgd-border-1)', borderRadius: 8, padding: 14, background: '#fff' }; const jaMostrado = /^(p[aá]gina|page|pa[ií]s|country|cidade|city|assunto|an[uú]ncio|formul[aá]rio|pedido)$/i; const letraBant = (key, label) => { const texto = lead.bant_valores?.[key]; const flag = lead.bant?.[key]; const v = flag === false ? false : (texto || flag === true ? true : null); const color = v === true ? '#166534' : v === false ? '#991b1b' : '#94a3b8'; const bg = v === true ? '#f0fdf4' : v === false ? '#fef2f2' : '#f1f5f9'; const border = v === true ? '#bbf7d0' : v === false ? '#fecaca' : '#e2e8f0'; return {label}; }; return (
SDR AI · {estado.label}
{lead.circuito?.nota &&
{lead.circuito.nota}
}
{titulo}
{subtitulo &&
{subtitulo}
}
{navLeads.length > 1 && navIdx >= 0 && (
{navIdx + 1} / {navLeads.length}
)}
{[['qualificacao', 'Qualificação'], ['contacto', 'Contacto'], ['origem', 'Origem'], ['conversao', 'Conversão'], ['notas', 'Notas']].map(([id, label]) => ( ))}
{tab === 'contacto' && (
Contacto
{linha('Nome', sdrAiNomeLista(lead) || '—')} {linha('Cargo', lead.cargo || '—')} {linha('Email', lead.email || '—')} {linha('Telefone', sdrAiTemTelefone(lead) ? lead.telefone : 'Sem telefone')} {linha('País', lead.pais || '—')} {linha('Empresa', lead.empresa || '—')}
Entrada
{linha('Marca', lead.marca !== '—' ? lead.marca : '—')} {linha('Origem', origemLista !== '—' ? origemLista : '—')} {linha('Canal', sdrAiOrigemCanal(lead) || '—')}
)} {tab === 'origem' && (
Origem
{linha('Marca', lead.marca !== '—' ? lead.marca : null)} {linha('Source', lead.source_label)} {linha('Action', sdrAiActionId(lead))} {linha('Origem', origemLista !== '—' ? origemLista : null)} {linha('Canal', sdrAiOrigemCanal(lead))} {linha('Página', lead.page_url)} {linha('País', lead.pais)} {linha('Cidade', sdrAiCidade(lead))} {linha('Anúncio', lead.ad_nome && lead.ad_nome !== campanhaLista ? lead.ad_nome : null)} {linha('Assunto', lead.assunto && lead.assunto !== origemLista ? lead.assunto : null)} {bloco('Pedido', lead.pedido)} {entrada.promo.map(c => bloco(c.label, c.value))} {entrada.extra.filter(c => !jaMostrado.test(c.label)).map(c => linha(c.label, c.value))}
Ficha da campanha
{fichaCampanha ? ( <>
{fichaCampanha.titulo}{fichaCampanha.versao ? ` · v${fichaCampanha.versao}` : ''}
{bloco('Oferta', fichaCampanha.oferta)} {bloco('Mensagem-chave', fichaCampanha.mensagem)} {listaTxt('Perguntas', fichaCampanha.perguntas)} {listaTxt('Não dizer', fichaCampanha.nao_dizer)} {bloco('Critério de handoff', fichaCampanha.handoff)} ) : (
Sem ficha de campanha. A Digi qualifica só com o framework.
)}
)} {tab === 'qualificacao' && (
Histórico
{fala === null ? (
A carregar o histórico...
) : ( )} {!SDR_AI_CARDS_ACTIVOS && sdrAiEventosFala(fala || {}).some(e => e.tipo === 'mensagem') && (
Conversa de teste. A qualificação da Digi ainda não está ligada.
)}
{vista === 'nurturing' ? ( <>
Oportunidade
{linha('Stage', lead.stage || '—')} {linha('Oportunidade', lead.oportunidade || '—')} {linha('Valor', sdrAiEuros(lead.valor))} {linha('Estado', sdrAiEstadoNurturing(lead).label)}
) : null}
BANT · {lead.bant_n == null ? '—' : `${lead.bant_n}/4`}
{[['B', 'Budget', 'budget'], ['A', 'Authority', 'authority'], ['N', 'Need', 'need'], ['T', 'Timeline', 'timeline']].map(([letra, label, key]) => (
{letraBant(key, letra)}
{label}
{lead.bant_valores?.[key] || '—'}
))} {linha('Classificação', lead.classificacao)} {bloco('Recomendação', lead.recomendacao)} {bloco('Objecção', lead.objecao)} {bloco('Equipamento', lead.equipamento)}
)} {tab === 'conversao' && (
Conversão
Estado {estado.label}
{lead.passado &&
Passada ao SDR{lead.passado_sdr ? ` · ${lead.passado_sdr}` : ''}
} {(lead.stage || lead.oportunidade) ? ( <> {linha('Stage', lead.stage)} {linha('Oportunidade', lead.oportunidade)} {linha('Valor', lead.valor ? sdrAiEuros(lead.valor) : null)} ) : (
Sem oportunidade no Gestor.
)}
)} {tab === 'notas' && (
Notas