// KPI Cards + Kanban + AI Panel + Clients Table const KANBAN_PAGE_SIZE = 100; // ── KPI computation from live leads data ────────────────────────────────────── function computeKPIs(leads) { const now = Date.now(); const DAY = 86400000; const msAgo = d => now - d * DAY; const ts = l => l.created_at ? new Date(l.created_at).getTime() : 0; // 14-point sparkline: daily new-lead counts, index 0 = 13 days ago function spark(filterFn) { const counts = Array(14).fill(0); leads.filter(filterFn).forEach(l => { const d = Math.floor((now - ts(l)) / DAY); if (d >= 0 && d < 14) counts[13 - d]++; }); return counts; } // % change last 7d vs previous 7d (based on creation date) function delta(filterFn) { const recent = leads.filter(l => filterFn(l) && ts(l) >= msAgo(7)).length; const prev = leads.filter(l => filterFn(l) && ts(l) >= msAgo(14) && ts(l) < msAgo(7)).length; if (prev === 0) return recent > 0 ? 100 : 0; return Math.round((recent - prev) / prev * 100); } const isNew = l => ts(l) >= msAgo(30); const isHot = l => l.temp === 'hot'; const isActive = l => !ARCHIVED_COLS.has(l.col) && l.col !== 'fechado'; const isClosed = l => l.col === 'fechado'; const newCount = leads.filter(isNew).length; const hotCount = leads.filter(isHot).length; const activeCount = leads.filter(isActive).length; const closedCount = leads.filter(isClosed).length; const hotToday = leads.filter(l => isHot(l) && ts(l) >= msAgo(1)).length; const needAction = leads.filter(l => isActive(l) && l.temp === 'hot').length; const closedVal = leads.filter(isClosed).reduce((s, l) => s + (l.value || 0), 0); const revStr = closedVal >= 1e6 ? `R$ ${(closedVal/1e6).toFixed(1)}M em vendas` : closedVal > 0 ? `R$ ${(closedVal/1e3).toFixed(0)}k em vendas` : closedCount > 0 ? `${closedCount} negócio${closedCount !== 1 ? 's' : ''} fechado${closedCount !== 1 ? 's' : ''}` : 'Sem negócios fechados ainda'; return [ { key:'newLeads', label:'Novos Leads', value:newCount, delta:delta(isNew), sub:'últimos 30 dias', color:'#7EC8FF', glow:'rgba(31,147,255,0.22)', spark:spark(isNew) }, { key:'hotLeads', label:'Leads Quentes', value:hotCount, delta:delta(isHot), sub:`${hotToday} nas últimas 24h`, color:'#ff8a7a', glow:'rgba(255,90,78,0.18)', spark:spark(isHot) }, { key:'convs', label:'Conversas Ativas', value:activeCount, delta:delta(isActive), sub:`${needAction} aguardando ação`, color:'#7dd3fc', glow:'rgba(0,125,255,0.18)', spark:spark(isActive) }, { key:'won', label:'Negócios Fechados', value:closedCount, delta:delta(isClosed), sub:revStr, color:'#86efac', glow:'rgba(52,211,153,0.18)', spark:spark(isClosed) }, ]; } function KPICards() { const [cards, setCards] = React.useState(() => computeKPIs(window.LEADS || [])); React.useEffect(() => { const handler = (e) => { if (e.detail && window.LEADS && !window.LEADS.find(l => l.id === e.detail.id)) { window.LEADS = [e.detail, ...window.LEADS]; } setCards(computeKPIs(window.LEADS || [])); }; const onBatch = () => setCards(computeKPIs(window.LEADS || [])); window.addEventListener('horos:lead-created', handler); window.addEventListener('horos:batch-imported', onBatch); const onArchived = (e) => { const ids = new Set(e.detail?.ids || []); if (ids.size) { if (Array.isArray(window.LEADS)) window.LEADS = window.LEADS.filter(l => !ids.has(l.id)); setCards(computeKPIs(window.LEADS || [])); } }; window.addEventListener('horos:lead-archived', onArchived); window.addEventListener('horos:leads-refreshed', onBatch); return () => { window.removeEventListener('horos:lead-created', handler); window.removeEventListener('horos:batch-imported', onBatch); window.removeEventListener('horos:lead-archived', onArchived); window.removeEventListener('horos:leads-refreshed', onBatch); }; }, []); return (
{cards.map((c, i) => (
{c.label}
{c.value}
= 0 ? 'up' : 'down'}`}> = 0 ? "m3 7 3-3 3 3" : "m3 5 3 3 3-3"} stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /> {c.delta >= 0 ? '+' : ''}{c.delta}% {c.sub}
))}
); } const TempBadge = ({ t }) => { const map = { hot: { cls: 'hot', icon: 'flame', label: 'Quente' }, warm: { cls: 'warm', icon: 'drop', label: 'Morno' }, cold: { cls: 'cold', icon: 'snow', label: 'Frio' }, }; const m = map[t]; return ; }; const tempMap = { hot: { cls: 'hot', icon: 'flame', label: 'Quente' }, warm: { cls: 'warm', icon: 'drop', label: 'Morno' }, cold: { cls: 'cold', icon: 'snow', label: 'Frio' }, }; const TEMP_COLORS_DB = { hot: '#ff5a4e', warm: '#f5b544', cold: '#59c8ff' }; function daysInStageDash(lead) { if (!lead.updated_at) return 0; return Math.max(0, Math.floor((Date.now() - new Date(lead.updated_at)) / 86400000)); } function daysBadgeStyleDash(days) { if (days >= 7) return { color: '#ef4444', bg: 'rgba(239,68,68,0.12)', border: 'rgba(239,68,68,0.3)' }; if (days >= 4) return { color: '#f97316', bg: 'rgba(249,115,22,0.12)', border: 'rgba(249,115,22,0.3)' }; if (days >= 2) return { color: '#f5b544', bg: 'rgba(245,181,68,0.12)', border: 'rgba(245,181,68,0.3)' }; return null; } function LeadCard({ lead, onCardPointerDown, onClick, onDelete, onEdit, selectMode, selected, onToggleSelect }) { const [hovered, setHovered] = React.useState(false); const [confirming, setConfirming] = React.useState(false); const progress = lead.progress ?? COL_PROGRESS[lead.col] ?? 0; const handleDeleteClick = (e) => { e.stopPropagation(); onDelete(lead.id); // abre a janela do motivo (horosArchiveLeads) }; React.useEffect(() => { if (!hovered && confirming) { const t = setTimeout(() => setConfirming(false), 1500); return () => clearTimeout(t); } }, [hovered, confirming]); return (
onCardPointerDown(e, lead)} onClick={selectMode ? (e) => onToggleSelect(lead.id, e.shiftKey) : () => { if (!kbDragJustEnded()) onClick(); }} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)} > {selectMode && ( )} {/* Edit / Delete overlay */} {!selectMode && (hovered || confirming) && (
)}
); } function EditLeadModal({ lead, onClose, onSaved }) { const [form, setForm] = React.useState({ name: lead.name, phone: lead.phone || '', temp: lead.temp }); const [saving, setSaving] = React.useState(false); const [error, setError] = React.useState(''); const set = (k, v) => setForm(prev => ({ ...prev, [k]: v })); const maskPhone = (v) => { let d = v.replace(/\D/g, ''); if (d.length > 11) { const take = d.length === 12 ? 10 : 11; d = d.slice(d.length - take); } d = d.slice(0, 11); if (d.length <= 2) return d.length ? `(${d}` : ''; if (d.length <= 6) return `(${d.slice(0,2)}) ${d.slice(2)}`; if (d.length <= 10) return `(${d.slice(0,2)}) ${d.slice(2,6)}-${d.slice(6)}`; return `(${d.slice(0,2)}) ${d.slice(2,7)}-${d.slice(7)}`; }; const handleSubmit = async (e) => { e.preventDefault(); if (!form.name.trim()) { setError('Nome é obrigatório'); return; } if (!form.phone.trim()) { setError('Telefone é obrigatório'); return; } setSaving(true); setError(''); try { const initials = window.initials(form.name) || '?'; const updates = { name: form.name.trim(), initials, phone: form.phone.trim(), temp: form.temp }; if (window.HOROS_SB) { const { data: r, error: dbErr } = await window.HOROS_SB.rpc('update_lead_basic', { p_id: lead.id, p_name: updates.name, p_phone: updates.phone, p_temp: updates.temp }); if (dbErr) throw dbErr; if (r?.error === 'duplicate') { setError(`Já existe um lead com este telefone: ${r.name}`); setSaving(false); return; } if (r?.error) { setError('Você não tem permissão para editar este lead.'); setSaving(false); return; } } onSaved({ ...lead, ...updates }); onClose(); } catch (err) { setError('Ocorreu um erro ao salvar. Tente novamente ou fale com o suporte.'); setSaving(false); } }; const F = { label: { fontSize:12, fontWeight:600, color:'var(--fg)', display:'block', marginBottom:6 }, input: { width:'100%', boxSizing:'border-box', background:'var(--bg-1)', border:'1.5px solid var(--line-strong)', borderRadius:8, padding:'9px 12px', fontSize:13, color:'var(--fg)', outline:'none', fontFamily:'inherit', transition:'border-color .15s' }, }; const temps = [['hot','Quente','#ff5a4e','flame'],['warm','Morno','#f5b544','sun'],['cold','Frio','#59c8ff','snow']]; return (
Editar Lead
{lead.name}
set('name', e.target.value)} autoFocus />
set('phone', maskPhone(e.target.value))} />
{temps.map(([v, label, color]) => ( ))}
{error && (
{error}
)}
{ e.preventDefault(); onClose && onClose(); window.horosOpenLeadSheet(lead.id); }} style={{ display:'flex', alignItems:'center', gap:5, padding:'8px 12px', borderRadius:8, background:'var(--bg-1)', border:'1.5px solid var(--line-strong)', fontSize:12, fontWeight:600, color:'#1F93FF', textDecoration:'none', flexShrink:0 }}> Abrir ficha
); } function Kanban({ segment }) { const [leads, setLeads] = React.useState(() => (window.LEADS || []).map(normalizeLead) ); // Leads atualizados do banco chegando depois da abertura (db.jsx abre com o cache) React.useEffect(() => { const on = () => setLeads((window.LEADS || []).map(normalizeLead)); window.addEventListener('horos:leads-refreshed', on); return () => window.removeEventListener('horos:leads-refreshed', on); }, []); const [columns, setColumns] = React.useState(() => loadKanbanCols()); const [editOpen, setEditOpen] = React.useState(false); const [selectedLead, setSelectedLead] = React.useState(null); const [editingLead, setEditingLead] = React.useState(null); const [colPages, setColPages] = React.useState({}); const [bulkBusy, setBulkBusy] = React.useState(false); // Busca por etapa: { [colId]: texto } e quais colunas estão com a lupa aberta const [colSearch, setColSearch] = React.useState({}); const [colSearchOpen, setColSearchOpen] = React.useState({}); const closeColSearch = (id) => { setColSearch(p => ({ ...p, [id]: '' })); setColSearchOpen(p => ({ ...p, [id]: false })); }; const kanbanRef = React.useRef(null); const topBarRef = React.useRef(null); const syncing = React.useRef(false); const [phantomW, setPhantomW] = React.useState(9999); React.useEffect(() => { if (kanbanRef.current) setPhantomW(kanbanRef.current.scrollWidth); }, [leads]); const { selectMode, setSelectMode, selectedIds, setSelectedIds, toggleSelect, exitSelect, visRef: kbVisRef } = useKanbanSelection(undefined); const bulkMove = async (colId) => { const ids = [...selectedIds]; if (!ids.length) return; setBulkBusy(true); const ok = new Set(await runBulkLeadRpc(ids, 'move_lead', { p_col: colId })); const now = new Date().toISOString(); setLeads(prev => prev.map(l => ok.has(l.id) ? { ...l, col: colId, updated_at: now, progress: COL_PROGRESS[colId] ?? l.progress } : l)); if (Array.isArray(window.LEADS)) window.LEADS = window.LEADS.map(l => ok.has(l.id) ? { ...l, col: colId, updated_at: now } : l); setBulkBusy(false); if (ok.size < ids.length) window.HorosNotif?.notify({ title: 'Alguns leads não foram movidos', body: `${ids.length - ok.size} lead(s) sem permissão para mover.`, module: 'system', type: 'info', priority: 'low' }); exitSelect(); }; const bulkArchive = async () => { const ids = [...selectedIds]; if (!ids.length) return; const names = leads.filter(l => ids.includes(l.id)).map(l => l.name); const ok = new Set(await horosArchiveLeads(ids, { names })); if (!ok.size) return; setBulkBusy(true); setLeads(prev => prev.filter(l => !ok.has(l.id))); if (Array.isArray(window.LEADS)) window.LEADS = window.LEADS.filter(l => !ok.has(l.id)); setBulkBusy(false); exitSelect(); }; const bulkTransfer = async (toUserId, restart) => { const ids = [...selectedIds]; if (!ids.length) return; setBulkBusy(true); const { data, error } = await window.HOROS_SB.rpc('transfer_leads', { p_ids: ids, p_to: toUserId, p_restart: restart }); setBulkBusy(false); if (error) { window.HorosNotif?.notify({ title: 'Não foi possível passar os leads', body: error.message, module: 'system', type: 'info', priority: 'low' }); return; } exitSelect(); await handleRefreshRef.current?.(); window.HorosNotif?.notify({ title: 'Leads passados', body: `${data || 0} lead(s) transferidos.`, module: 'system', type: 'info', priority: 'low' }); }; const handleRefreshRef = React.useRef(null); const onKanbanScroll = (e) => { if (!syncing.current && topBarRef.current) { syncing.current = true; topBarRef.current.scrollLeft = e.target.scrollLeft; syncing.current = false; } }; const onTopBarScroll = (e) => { if (!syncing.current && kanbanRef.current) { syncing.current = true; kanbanRef.current.scrollLeft = e.target.scrollLeft; syncing.current = false; } }; const handleLeadClick = (lead) => { const allClients = window.CLIENTS || []; const client = allClients.find(c => c.name === lead.name); if (client) { setSelectedLead(client); } else { setSelectedLead({ ...lead, email: lead.email || null, phone: lead.phone || '—', status: COL_TO_STATUS[lead.col] || 'qualifying', messages: [], visits: [], timeline: [], creditScore: null, creditTier: null, }); } }; React.useEffect(() => { const onCreate = (e) => setLeads(prev => prev.some(l => l.id === e.detail.id) ? prev : [normalizeLead(e.detail), ...prev]); const onUpdate = (e) => { const upd = e.detail; setLeads(prev => prev.map(l => l.id === upd.id ? normalizeLead({ ...l, ...upd }) : l)); setSelectedLead(prev => prev && prev.id === upd.id ? normalizeLead({ ...prev, ...upd }) : prev); }; const onColsUpdated = (e) => setColumns(e.detail); const onBatch = (e) => { const byId = new Map((e.detail || []).map(l => [l.id, l])); setLeads(prev => [ ...[...byId.values()].map(l => normalizeLead({ ...(prev.find(p => p.id === l.id) || {}), ...l })), ...prev.filter(l => !byId.has(l.id)), ]); }; window.addEventListener('horos:lead-created', onCreate); window.addEventListener('horos:lead-updated', onUpdate); window.addEventListener('horos:columns-updated', onColsUpdated); window.addEventListener('horos:batch-imported', onBatch); return () => { window.removeEventListener('horos:lead-created', onCreate); window.removeEventListener('horos:lead-updated', onUpdate); window.removeEventListener('horos:columns-updated', onColsUpdated); window.removeEventListener('horos:batch-imported', onBatch); }; }, []); const handleEditSaved = (updatedLead) => { setLeads(prev => prev.map(l => l.id === updatedLead.id ? updatedLead : l)); }; // Lixeira do card: pede o motivo antes de arquivar const handleDelete = async (leadId) => { const lead = leads.find(l => l.id === leadId); const ok = await horosArchiveLeads([leadId], { names: [lead?.name] }); if (ok.length) setLeads(prev => prev.filter(l => l.id !== leadId)); }; // Arrastar: o lead vai para o topo da nova coluna (onde o Kanban abriu o espaço) const dnd = useKbDrag(async (id, colId) => { setLeads(prev => { const cur = prev.find(l => l.id === id); if (!cur) return prev; return [{ ...cur, col: colId, progress: COL_PROGRESS[colId] ?? cur.progress }, ...prev.filter(l => l.id !== id)]; }); if (window.HOROS_SB) await window.HOROS_SB.rpc('move_lead', { p_id: id, p_col: colId }); }); const [refreshing, setRefreshing] = React.useState(false); const [filterOpen, setFilterOpen] = React.useState(false); const [kanbanFilter, setKanbanFilter] = React.useState({ temp: 'all', score: 'all' }); const filterBtnRef = React.useRef(null); const handleRefresh = async () => { if (refreshing) return; setRefreshing(true); const sb = window.HOROS_SB; if (sb && window.reloadLeads) { // Todos os leads (paginado) já com as etapas do rodízio const fresh = await window.reloadLeads(); setLeads(fresh.map(normalizeLead)); } else if (sb) { const { data } = await sb.from('leads').select('*').eq('archived', false).order('created_at'); if (data) { const mapped = await enrichLeadStages(data.map(l => { const b = l.col === 'aprovado' ? { ...l, col: 'aprovado_final' } : l; return { ...b, broker: b.data?.corretor || b.broker || '' }; })); window.LEADS = mapped; setLeads(mapped.map(normalizeLead)); } } setRefreshing(false); }; handleRefreshRef.current = handleRefresh; React.useEffect(() => { if (!filterOpen) return; const close = (e) => { if (filterBtnRef.current && !filterBtnRef.current.closest('.kanban-filter-wrap')?.contains(e.target)) setFilterOpen(false); }; document.addEventListener('mousedown', close); return () => document.removeEventListener('mousedown', close); }, [filterOpen]); const activeFilters = (kanbanFilter.temp !== 'all' ? 1 : 0) + (kanbanFilter.score !== 'all' ? 1 : 0); const filtered = React.useMemo(() => { let list = segment === 'all' ? leads : leads.filter(l => l.seg === segment); if (kanbanFilter.temp !== 'all') list = list.filter(l => l.temp === kanbanFilter.temp); if (kanbanFilter.score === 'high') list = list.filter(l => (l.score || 0) >= 80); else if (kanbanFilter.score === 'mid') list = list.filter(l => (l.score || 0) >= 50 && (l.score || 0) < 80); else if (kanbanFilter.score === 'low') list = list.filter(l => (l.score || 0) < 50); return list; }, [leads, segment, kanbanFilter]); kbVisRef.current = filtered; // lista visível para Shift+clique / Ctrl+A const setColPage = (colId, fn) => setColPages(prev => { const cur = prev[colId] || 1; return { ...prev, [colId]: fn(cur) }; }); // Clique num cliente do Dashboard (leads esquecidos, assistente, últimos clientes) → vai até o card aqui. // Tira filtro/busca que o escondem e abre a página da coluna em que ele está. const focusRef = React.useRef(null); focusRef.current = (id) => { const lead = leads.find(l => l.id === id); if (!lead || !columns.some(c => c.id === lead.col)) return false; if (segment !== 'all' && lead.seg !== segment) return false; let list = filtered; if (!filtered.some(l => l.id === id)) { setKanbanFilter({ temp: 'all', score: 'all' }); list = segment === 'all' ? leads : leads.filter(l => l.seg === segment); } if (selectMode) exitSelect(); closeColSearch(lead.col); setColPages(p => ({ ...p, [lead.col]: kbLeadPage(list, lead, KANBAN_PAGE_SIZE) })); return kbScrollToCard(id); }; React.useEffect(() => { const fn = (id) => focusRef.current(id); window.horosKanbanFocus = fn; return () => { if (window.horosKanbanFocus === fn) delete window.horosKanbanFocus; }; }, []); const handleKanbanSave = async (newCols) => { const deletedIds = new Set(columns.filter(c => !newCols.find(n => n.id === c.id)).map(c => c.id)); const fallback = newCols[0]?.id || 'inbox'; if (deletedIds.size > 0) { setLeads(prev => prev.map(l => deletedIds.has(l.col) ? { ...l, col: fallback } : l)); if (window.HOROS_SB) { for (const colId of deletedIds) { await window.HOROS_SB.rpc('move_lead_col', { p_from_col: colId, p_to_col: fallback }); } } } setColumns(newCols); saveKanbanCols(newCols); setEditOpen(false); }; return (

Funil de Vendas {filtered.length} leads

{filterOpen && (
Temperatura
{[{v:'all',l:'Todos'},{v:'hot',l:'Quente',i:'flame'},{v:'warm',l:'Morno',i:'sun'},{v:'cold',l:'Frio',i:'snow'}].map(o => ( ))}
Score IA
0 ? 14 : 0 }}> {[{v:'all',l:'Todos'},{v:'high',l:'★ Alto ≥80'},{v:'mid',l:'Médio 50–79'},{v:'low',l:'Baixo <50'}].map(o => ( ))}
{activeFilters > 0 && ( )}
)}
{ m[l.col] = (m[l.col] || 0) + 1; return m; }, {})} />
(
)} />
{columns.map(col => { const colAll = filtered.filter(l => l.col === col.id); const colQ = colSearch[col.id] || ''; const allItems = colQ.trim() ? colAll.filter(l => kbLeadMatches(l, colQ)) : colAll; const colPage = colPages[col.id] || 1; const colTotalPages = Math.max(1, Math.ceil(allItems.length / KANBAN_PAGE_SIZE)); const items = allItems.slice((colPage - 1) * KANBAN_PAGE_SIZE, colPage * KANBAN_PAGE_SIZE); const total = isArchivedCol(col.id) ? 0 : allItems.reduce((s, l) => s + leadMoney(l), 0); const glow = col.color + '2e'; return (
{col.title} {colQ.trim() ? `${allItems.length}/${colAll.length}` : allItems.length} {!selectMode && colAll.length > 0 && ( colSearchOpen[col.id] ? closeColSearch(col.id) : setColSearchOpen(p => ({ ...p, [col.id]: true }))} /> )} {selectMode && allItems.length > 0 && }
{colSearchOpen[col.id] && ( { setColSearch(p => ({ ...p, [col.id]: v })); setColPages(p => ({ ...p, [col.id]: 1 })); }} onClose={() => closeColSearch(col.id)} /> )}
{!isArchivedCol(col.id) && R${fmtCurrency(total)}} {allItems.length === 1 ? 'lead' : 'leads'}
{colQ.trim() ? 'Nenhum lead encontrado nesta etapa' : 'Arraste leads aqui'}
} renderCard={(l) => ( handleLeadClick(l)} onDelete={handleDelete} onEdit={setEditingLead} selectMode={selectMode} selected={selectedIds.has(l.id)} onToggleSelect={toggleSelect} /> )} />
{colTotalPages > 1 && (
{colPage} de {colTotalPages}
)}
); })}
{selectMode && ( selectedIds.has(l.id))} onMove={bulkMove} onArchive={bulkArchive} onTransfer={bulkTransfer} onSelectAll={() => setSelectedIds(new Set(filtered.map(l => l.id)))} onClearSel={() => setSelectedIds(new Set())} onExit={exitSelect} /> )} {editOpen && setEditOpen(false)} />} {selectedLead && setSelectedLead(null)} />} {editingLead && setEditingLead(null)} onSaved={handleEditSaved} />}
); } // Converte um lead plano do Supabase em linha compatível com a tabela de clientes function normalizeLeadAsClient(l) { const hash = [...(l.id || l.name || '')].reduce((a, c) => a + c.charCodeAt(0), 0); const palette = AVATAR_PALETTES[hash % AVATAR_PALETTES.length]; const ts = l.updated_at || l.created_at; const colMeta = pipelineCols(leadPipeline(l)).find(c => c.id === l.col) || loadKanbanCols().find(c => c.id === l.col) || COLUMNS.find(c => c.id === l.col); const d = l.data || {}; let last = '—'; if (ts) { const diff = Math.floor((Date.now() - new Date(ts)) / 60000); if (diff < 60) last = `há ${diff}min`; else if (diff < 1440) last = `há ${Math.floor(diff / 60)}h`; else last = `há ${Math.floor(diff / 1440)}d`; } return { id: l.id, name: l.name || '—', initials: l.initials || (l.name || '?').split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase(), email: l.email || '—', phone: l.phone || '—', seg: l.seg || '—', cat: l.cat || '—', status: COL_TO_STATUS[l.col] || 'qualifying', score: l.score || 0, palette, action: colMeta ? colMeta.title : 'Em atendimento', when: ts ? new Date(ts).toLocaleDateString('pt-BR') : '—', urgency: l.temp === 'hot' ? 'asap' : '', // Campos extras para o Customer360 temp: l.temp, col: l.col, value: l.value, progress: COL_PROGRESS[l.col] ?? 0, last, messages: [], visits: [], timeline: [], creditScore: null, creditTier: null, creditDocs: window.buildCreditDocs ? window.buildCreditDocs(l.docs) : null, broker: d.corretor || l.broker || '', renda: d.rendaIndividual ? `R$ ${d.rendaIndividual}/mês` : null, region: d.regiaoDesejada || (l.cat && l.cat !== l.name ? l.cat : null), interesse: d.categoriaInteresse || l.cat || null, observacoes: d.obsInteresses || null, }; } function buildClientRows(q) { const leads = (window.LEADS || []).filter(l => !q || window.kbLeadMatches(l, q)); return [...leads] .sort((a, b) => new Date(b.updated_at || b.created_at || 0) - new Date(a.updated_at || a.created_at || 0)) .slice(0, 10) .map(normalizeLeadAsClient); } const STATUS_LABEL = { qualifying: 'Qualificando', engaged: 'Engajado', proposal: 'Em proposta', won: 'Ganho', lost: 'Perdido', }; function ClientsTable({ segment }) { const [selected, setSelected] = React.useState(null); const [rows, setRows] = React.useState(() => buildClientRows()); // "Filtrar": busca em TODOS os leads (nome, telefone, e-mail, região) e mostra os 10 mais recentes const [q, setQ] = React.useState(''); const [searchOpen, setSearchOpen] = React.useState(false); const qRef = React.useRef(''); qRef.current = q; React.useEffect(() => { setRows(buildClientRows(q)); }, [q]); const [menu, setMenu] = React.useState(null); // { lead, top, left } React.useEffect(() => { if (!menu) return; const close = (e) => { if (e.type !== 'keydown' || e.key === 'Escape') setMenu(null); }; const t = setTimeout(() => document.addEventListener('mousedown', close), 0); document.addEventListener('keydown', close); window.addEventListener('scroll', close, true); return () => { clearTimeout(t); document.removeEventListener('mousedown', close); document.removeEventListener('keydown', close); window.removeEventListener('scroll', close, true); }; }, [menu]); const openMenu = (e, lead) => { e.stopPropagation(); const r = e.currentTarget.getBoundingClientRect(); setMenu(m => (m && m.lead.id === lead.id) ? null : { lead, top: r.bottom + 4, left: Math.max(8, r.right - 200) }); }; const goCRM = (lead) => { try { sessionStorage.setItem('horos:highlight-lead', lead.id); } catch {} window.location.href = 'crm.html'; }; React.useEffect(() => { const handler = () => setRows(buildClientRows(qRef.current)); window.addEventListener('horos:lead-created', handler); window.addEventListener('horos:lead-updated', handler); window.addEventListener('horos:batch-imported', handler); return () => { window.removeEventListener('horos:lead-created', handler); window.removeEventListener('horos:lead-updated', handler); window.removeEventListener('horos:batch-imported', handler); }; }, []); const filtered = segment === 'all' ? rows : rows.filter(c => (c.seg || '').toLowerCase().includes(segment.slice(0, 5))); return (

Últimos clientes {filtered.length}

{searchOpen ? ( setQ(e.target.value)} onKeyDown={e => { if (e.key === 'Escape') { setQ(''); setSearchOpen(false); } }} onBlur={() => { if (!q) setSearchOpen(false); }} /> ) : ( )} Ver todos
{filtered.length === 0 ? (
{q ? <>Nenhum lead encontrado para "{q}". : <>Nenhum lead cadastrado ainda.{' '}}
) : ( {filtered.map((c, i) => ( c.id ? window.horosGoToLead(c.id) : setSelected(c)} style={{ cursor: 'pointer' }} title="Ver no funil"> ))}
Nome Telefone Categoria Status Score Última atividade
{c.initials}
{c.name} {c.email}
{fmtPhone(c.phone)} {c.seg} · {c.cat} {STATUS_LABEL[c.status] || c.status}
{c.score}
{c.action} {c.when}
)} {selected && setSelected(null)} />} {menu && ReactDOM.createPortal(
e.stopPropagation()}>
, document.body )}
); } window.KPICards = KPICards; window.Kanban = Kanban; window.ClientsTable = ClientsTable;