);
}
// Arquivados em blocos por motivo — "12 arquivados por Sem interesse". Clique filtra a lista.
function ArchiveReasonBlocks({ groups, active, onPick }) {
if (!groups) return
{[0, 1, 2, 3].map(i =>
)}
;
if (!groups.length) return null;
const label = window.archiveReasonLabel || (x => x);
const all = groups.reduce((a, g) => a + g.total, 0);
const fmtD = (t) => t ? new Date(t).toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: '2-digit' }) : '';
return (
{groups.map(g => (
))}
);
}
const CLI_PAGE_SIZE = 100;
const CLI_COLS = 'id,name,initials,seg,cat,phone,email,value,score,temp,col,broker,archived,created_at,updated_at';
// Filtros avançados lembrados entre aberturas (só no navegador)
const cliFxLoad = () => {
try { const v = JSON.parse(localStorage.getItem('horos-cli-fx') || 'null'); return v ? { ...CLI_FX_EMPTY, ...v } : CLI_FX_EMPTY; }
catch { return CLI_FX_EMPTY; }
};
function ClientesListPage({ onSelect }) {
const [filter, setFilter] = React.useState('all');
const [search, setSearch] = React.useState('');
const [fx, setFxState] = React.useState(cliFxLoad);
const [archived, setArchived] = React.useState(false);
// Arquivados só para gerente (equipe) e super — list_archived_leads devolve allowed:false para os demais
const [archAllowed, setArchAllowed] = React.useState(false);
const [canRestore, setCanRestore] = React.useState(false); // recuperar: só gerente e super
const [archCount, setArchCount] = React.useState(null);
const [restoring, setRestoring] = React.useState(null);
const [archReason, setArchReason] = React.useState(null); // bloco de motivo escolhido (null = todos)
const [archGroups, setArchGroups] = React.useState(null); // [{ reason, total, last_at }]
const { canEdit: arqEdit } = window.useArchiveReasons();
const [arqMgr, setArqMgr] = React.useState(false);
const [notice, setNotice] = React.useState(null); // { kind: 'ok'|'err', text }
const [exporting, setExporting] = React.useState(false);
const [dSearch, setDSearch] = React.useState('');
const [rows, setRows] = React.useState([]);
const [total, setTotal] = React.useState(0);
const [counts, setCounts] = React.useState({});
const [loading, setLoading] = React.useState(true);
const [loadingMore, setLoadingMore] = React.useState(false);
const debRef = React.useRef(null);
const noticeRef = React.useRef(null);
const sb = window.HOROS_SB;
const fxKey = JSON.stringify(fx);
const setFx = (v) => {
setFxState(v);
try { localStorage.setItem('horos-cli-fx', JSON.stringify(v)); } catch {}
};
// Debounce search: só dispara query 400ms após parar de digitar
React.useEffect(() => {
clearTimeout(debRef.current);
debRef.current = setTimeout(() => setDSearch(search), 400);
return () => clearTimeout(debRef.current);
}, [search]);
// Busca por nome, telefone (com ou sem máscara), e-mail ou região
const applySearch = (q, s) => {
s = s.trim().replace(/[,()]/g, ' ');
if (!s) return q;
const dig = s.replace(/\D/g, '');
const parts = [`name.ilike.%${s}%`, `phone.ilike.%${s}%`, `email.ilike.%${s}%`, `cat.ilike.%${s}%`];
if (dig.length >= 4 && dig !== s) parts.push(`phone.ilike.%${dig}%`);
return q.or(parts.join(','));
};
// Monta query Supabase com filtro + busca + filtros avançados aplicados no banco
const buildQ = (f, s) => {
let q = sb.from('leads')
.select(CLI_COLS, { count: 'exact' })
.eq('archived', false)
.order('updated_at', { ascending: false, nullsFirst: false });
if (f === 'hot') q = q.eq('temp', 'hot');
else if (f === 'analysis') q = q.in('col', ['em_analise', 'serasa']);
else if (f === 'visit') q = q.eq('col', 'agendado');
else if (f === 'approved') q = q.in('col', ['aprovado_final', 'arquivado_aprovado', 'fechado']);
else if (f === 'closed') q = q.eq('col', 'fechado');
return cliApplyFx(applySearch(q, s), fx);
};
const loadArchived = async (offset) => {
const { data, error } = await sb.rpc('list_archived_leads', { p_search: dSearch, p_limit: CLI_PAGE_SIZE, p_offset: offset, p_reason: archReason });
if (error || !data) return null;
await window.horosLoadArchiveReasons?.();
const label = window.archiveReasonLabel || (x => x);
return { rows: (data.rows || []).map(r => ({
...normalizeLeadAsCliente({ ...r, updated_at: r.archived_at || r.updated_at }),
archiveRecoverable: window.archiveReasonRecoverable ? window.archiveReasonRecoverable(r.reason) : true,
archiveReason: [label(r.reason), r.reason_note, r.archived_by_name && `por ${r.archived_by_name}`].filter(Boolean).join(' · '),
archiveAttempts: cliAttemptsText(r.attempts),
archiveHolder: r.holder_name || null,
})), total: data.total || 0 };
};
// Exporta TODOS os clientes do filtro atual (não só a página carregada)
const exportAll = async () => {
if (exporting) return;
setExporting(true);
try {
let all = [];
for (let page = 0; page < 30; page++) {
const { data, error } = await buildQ(filter, dSearch).range(page * 1000, page * 1000 + 999);
if (error || !data) break;
all = all.concat(data);
if (data.length < 1000) break;
}
window.exportLeadsCSV(all, `clientes-${new Date().toISOString().slice(0, 10)}.csv`);
} finally { setExporting(false); }
};
// Carrega primeira página ao mudar filtro, busca ou modo (ativos/arquivados)
React.useEffect(() => {
let cancelled = false;
(async () => {
setLoading(true);
setRows([]);
if (archived) {
const r = await loadArchived(0);
if (cancelled) return;
if (r) { setRows(r.rows); setTotal(r.total); if (!dSearch.trim() && !archReason) setArchCount(r.total); }
} else {
const { data, count, error } = await buildQ(filter, dSearch).range(0, CLI_PAGE_SIZE - 1);
if (cancelled) return;
if (!error && data) {
setRows(data.map(normalizeLeadAsCliente));
setTotal(count || 0);
}
}
setLoading(false);
})();
return () => { cancelled = true; };
}, [filter, dSearch, fxKey, archived, archReason]);
// Blocos por motivo (Arquivados)
const loadArchGroups = React.useCallback(() => {
sb.rpc('archived_reason_groups').then(({ data }) => setArchGroups(Array.isArray(data) ? data : []));
}, []);
React.useEffect(() => { if (archived) loadArchGroups(); else setArchReason(null); }, [archived]);
// Quantos arquivados (para o botão "Arquivados")
React.useEffect(() => {
sb.rpc('list_archived_leads', { p_search: '', p_limit: 1, p_offset: 0 })
.then(({ data }) => { if (data) { setArchCount(data.total || 0); setArchAllowed(data.allowed !== false); setCanRestore(!!data.can_restore); } });
}, []);
// Contagens para badges dos filtros (queries leves, só count) — respeitam busca e filtros avançados
React.useEffect(() => {
(async () => {
const base = () => cliApplyFx(applySearch(sb.from('leads').select('*', { count: 'exact', head: true }).eq('archived', false), dSearch), fx);
const [all, hot, analysis, visit, approved, closed] = await Promise.all([
base().then(r => r.count || 0),
base().eq('temp', 'hot').then(r => r.count || 0),
base().in('col', ['em_analise', 'serasa']).then(r => r.count || 0),
base().eq('col', 'agendado').then(r => r.count || 0),
base().in('col', ['aprovado_final', 'arquivado_aprovado', 'fechado']).then(r => r.count || 0),
base().eq('col', 'fechado').then(r => r.count || 0),
]);
setCounts({ all, hot, analysis, visit, approved, closed });
})();
}, [dSearch, fxKey]);
const loadMore = async () => {
setLoadingMore(true);
if (archived) {
const r = await loadArchived(rows.length);
if (r) setRows(prev => [...prev, ...r.rows]);
} else {
const { data, error } = await buildQ(filter, dSearch).range(rows.length, rows.length + CLI_PAGE_SIZE - 1);
if (!error && data) setRows(prev => [...prev, ...data.map(normalizeLeadAsCliente)]);
}
setLoadingMore(false);
};
const flash = (kind, text) => {
setNotice({ kind, text });
clearTimeout(noticeRef.current);
noticeRef.current = setTimeout(() => setNotice(null), 6000);
};
// Recupera um contato arquivado (volta para a etapa em que estava)
const restore = async (c) => {
if (restoring) return;
setRestoring(c.id);
const { data, error } = await sb.rpc('restore_lead', { p_id: c.id });
setRestoring(null);
if (error || !data?.ok) {
const e = data?.error;
flash('err', e === 'duplicate'
? `Não dá para recuperar: já existe um lead ativo com esse telefone (${data.name}).`
: e === 'forbidden' ? 'Você não tem permissão para recuperar este contato.'
: e === 'not_recoverable' ? 'Este contato foi arquivado com um motivo definitivo e não volta ao funil.'
: 'Não foi possível recuperar. Tente de novo.');
return;
}
setRows(prev => prev.filter(r => r.id !== c.id));
setTotal(t => Math.max(0, t - 1));
setArchCount(n => (n == null ? n : Math.max(0, n - 1)));
loadArchGroups();
setCounts(k => ({ ...k, all: (k.all || 0) + 1 }));
// Lead que estava numa etapa "Arquivado…" volta para a etapa de onde veio (data.col)
const backTo = data.col ? kanbanColTitle(data.col) : c.nextAction;
flash('ok', `${c.name} foi recuperado e voltou para "${backTo}".`);
// Avisa os Kanbans/listas abertos
const { data: lead } = await sb.from('leads').select(CLI_COLS).eq('id', c.id).maybeSingle();
if (lead) {
if (Array.isArray(window.LEADS) && !window.LEADS.some(l => l.id === lead.id)) window.LEADS.unshift(lead);
window.dispatchEvent(new CustomEvent('horos:lead-created', { detail: { ...lead, _restored: true } }));
}
};
// Insere/atualiza na lista local sem recarregar tudo
React.useEffect(() => {
const onCreate = (e) => {
if (!e.detail || e.detail._restored) return;
const row = normalizeLeadAsCliente(e.detail);
setRows(prev => [row, ...prev]);
setTotal(t => t + 1);
setCounts(c => ({ ...c, all: (c.all || 0) + 1 }));
};
const onUpdate = (e) => {
if (!e.detail) return;
setRows(prev => prev.map(r => r.id === e.detail.id ? normalizeLeadAsCliente({ ...r, ...e.detail }) : r));
};
window.addEventListener('horos:lead-created', onCreate);
window.addEventListener('horos:lead-updated', onUpdate);
const onArchived = (e) => { const ids = new Set(e.detail?.ids || []); if (ids.size) { setRows(prev => { const n = prev.filter(r => !ids.has(r.id)); setTotal(t => Math.max(0, t - (prev.length - n.length))); return n; }); if (Array.isArray(window.LEADS)) window.LEADS = window.LEADS.filter(l => !ids.has(l.id)); } };
window.addEventListener('horos:lead-archived', onArchived);
return () => {
window.removeEventListener('horos:lead-created', onCreate);
window.removeEventListener('horos:lead-updated', onUpdate);
window.removeEventListener('horos:lead-archived', onArchived);
};
}, []);
const filters = React.useMemo(() => CLIENTES_FILTERS.map(f => ({ ...f, count: counts[f.id] ?? 0 })), [counts]);
const hasMore = rows.length < total;
const anyFilter = dSearch.trim() || filter !== 'all' || cliFxCount(fx) > 0;
const linkBtn = { background:'none', border:'none', color:'var(--accent)', cursor:'pointer', fontSize:13, textDecoration:'underline', padding:0 };
return (
<>
{ setArchived(false); setFilter(f); }} search={search} onSearch={setSearch} filters={filters} onExport={exportAll}
archived={archived} archCount={archCount} onArchived={archAllowed ? () => setArchived(a => !a) : null} />
{notice && (
{archived
? (dSearch.trim() ? 'Nenhum arquivado encontrado com essa busca.' : 'Nenhum contato arquivado.')
: anyFilter
? <>Nenhum cliente encontrado com esses filtros.{' '}
{cliFxCount(fx) > 0 && }
: <>Nenhum lead cadastrado ainda.{' '}
}
)}
{hasMore && (
)}
)}
);
}
// Ficha do cliente na metade da tela — mesmo painel global de todas as telas (HorosLeadSheet em data.jsx)
function ClienteSheetDrawer({ leadId, onClose }) {
return ReactDOM.createPortal(, document.body);
}
window.ClientesListPage = ClientesListPage;
window.ClienteSheetDrawer = ClienteSheetDrawer;