/* ============================================================ logistica.jsx — Importação (ship map) + Importação Varejo + Email Inbox ============================================================ */ /* ---------- Armadores suportados pela Sinay/Safecube Container Tracking API (código SCAC = parâmetro "sealine" da API) — lista das principais linhas globais citadas na doc; a API cobre 170+, isso aqui é só o que o time usa. */ const EI_SEALINES = [ { code: 'MAEU', name: 'Maersk' }, { code: 'MSCU', name: 'MSC' }, { code: 'CMDU', name: 'CMA CGM' }, { code: 'HLCU', name: 'Hapag-Lloyd' }, { code: 'COSU', name: 'COSCO' }, { code: 'EGLV', name: 'Evergreen' }, { code: 'ONEY', name: 'ONE (Ocean Network Express)' }, { code: 'YMLU', name: 'Yang Ming' }, { code: 'HDMU', name: 'HMM' }, { code: 'ZIMU', name: 'ZIM' }, { code: 'PABV', name: 'Pan Ocean' }, { code: 'WHLC', name: 'Wan Hai' }, ]; function eiSealineName(code) { return (EI_SEALINES.find(s => s.code === code) || {}).name || code || ''; } /* ---------- Timeline padrão (9 fases do workflow de importação) ---------- */ function buildMilestones(status, etd, eta) { const phases = [ "Produção concluída", "Embarcado (gate-in / load)", "Saiu do porto de origem", "Em trânsito marítimo", "Chegada prevista (ETA)", "Atracação", "Desembaraço aduaneiro", "Transporte nacional", "Entregue na obra", ]; // índice da fase "atual" conforme o status escolhido const curIdx = status === "Entregue" ? 9 : status === "Aguardando liberação" ? 6 // desembaraço em andamento : 3; // Em trânsito → fase marítima return phases.map((label, i) => ({ label, date: i === 0 ? (etd || "—") : i === 4 ? (eta || "—") : "—", state: i < curIdx ? "done" : i === curIdx ? "current" : "future", })); } /* ---------- Diferença em dias entre 2 datas ISO (yyyy-mm-dd) ---------- */ function diffDiasISO(a, b) { if (!a || !b) return 0; const da = new Date(a + 'T00:00:00'); const db = new Date(b + 'T00:00:00'); return Math.round((da - db) / 86400000); } /* 11/09 — achado real: quando uma Edge Function responde com status de erro (4xx/5xx), o cliente supabase-js devolve um `error` com mensagem SEMPRE genérica ("Edge Function returned a non-2xx status code") — o JSON de erro de verdade que a função manda (ex.: "Falha ao enviar e-mail via SMTP", "Nenhum destinatário válido") fica escondido dentro de `error.context` (a Response crua), e o toast mostrava só a mensagem genérica, inútil pro usuário entender o que deu errado. Esta função lê o corpo real quando existe. */ async function extrairErroFuncao(error) { if (!error) return 'Erro desconhecido'; try { if (error.context && typeof error.context.json === 'function') { const body = await error.context.clone().json(); if (body && body.error) return body.error + (body.detail ? ' — ' + body.detail : ''); } } catch (e) { /* corpo não era JSON — segue pro fallback abaixo */ } return error.message || String(error); } /* 11/09 — confirmado via teste real (arquivo aleatório, não suposição): 2.5MB passa, 3.5MB estoura WORKER_RESOURCE_LIMIT na Edge Function send-email (denomailer construindo o MIME do anexo). Espelha o mesmo limite fixado lá — avisa aqui ANTES de tentar enviar. */ const MAX_ANEXO_TOTAL = 2.5 * 1024 * 1024; const EMAIL_VALIDO_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; function validarEmails(destinatariosStr) { const lista = String(destinatariosStr || '').split(',').map((s) => s.trim()).filter(Boolean); if (!lista.length) return 'Digite ao menos um e-mail de destino.'; const invalido = lista.find((e) => !EMAIL_VALIDO_RE.test(e)); if (invalido) return `"${invalido}" não parece um e-mail válido (formato esperado: nome@dominio.com).`; return null; } /* ---------- Sincronização AIS (Edge Function ais-sync) ---------- */ async function runAisSync() { const { data, error } = await window.__VP_SB.sb.functions.invoke('ais-sync'); if (error) { window.toast('Falha na sincronização AIS: ' + (error.message || error), 'error'); return null; } const reais = (data && data.real) || 0; if (reais > 0) window.toast(`Posições atualizadas: ${reais} navio(s) com leitura real.`, 'success'); else { let motivo = ''; try { const r = await window.__VP_SB.sb.from('embarques').select('tracking_erro').eq('teste', false).neq('status', 'Entregue').not('tracking_erro', 'is', null).limit(1); motivo = rtExplicaErro(r.data && r.data[0] && r.data[0].tracking_erro); } catch (e) { /* sem motivo */ } window.toast('Nenhuma leitura real obtida. ' + (motivo || 'A consulta de rastreio está com erro (veja o motivo no detalhe do embarque).'), 'error'); } return data; } /* ---------- Documentos do embarque (checklist persistente) ---------- */ // Aceita tanto o formato antigo (strings "BL ✓") quanto o novo ({nome, pronto}). function normDocs(docs) { return (docs || []).map(d => typeof d === "string" ? { nome: d.replace(/\s*✓\s*$/, "").trim() || d, pronto: d.includes("✓") } : { nome: d.nome, pronto: !!d.pronto }); } function DocsCard({ docs, onChange }) { const [novo, setNovo] = React.useState(""); const list = normDocs(docs); const prontos = list.filter(d => d.pronto).length; const toggle = (i) => onChange(list.map((d, idx) => idx === i ? { ...d, pronto: !d.pronto } : d)); const remove = (i) => onChange(list.filter((_, idx) => idx !== i)); const add = () => { const n = novo.trim(); if (!n) return; onChange([...list, { nome: n, pronto: false }]); setNovo(""); }; return (
{list.map((d, i) => (
toggle(i)} title="Clique para alternar pronto/pendente" style={{ padding: 12, background: d.pronto ? "var(--vp-success-tint)" : "var(--vp-gray-50)", border: "1px solid " + (d.pronto ? "var(--vp-success)" : "var(--border)"), display: "flex", alignItems: "center", gap: 10, cursor: "pointer" }}>
{d.nome}
{d.pronto ? "✓ pronto" : "pendente"}
))} {list.length === 0 ?
Nenhum documento. Adicione abaixo.
: null}
setNovo(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") add(); }} placeholder="Novo documento (ex.: Certificado de Origem)" style={{ flex: 1 }}/>
); } /* ---------- MODAL: Novo Embarque ---------- */ function ModalNovoEmbarque({ onClose, onSaved, prefill }) { const [f, setF] = React.useState({ client: prefill?.client || '', supplier: prefill?.supplier || '', vessel:'', imo:'', sealine:'', bl:'', invoiceNumber: prefill?.invoiceNumber || '', invoiceValue: prefill?.invoiceValue || '', invoiceCurrency: prefill?.invoiceCurrency || 'USD', containerNumber:'', seal:'', containers:'1', type:'40HC', freight:'FCL', from:'Xangai, CN', to:'Santos, BR', etd:'', eta:'', status:'Em trânsito', obraId:'', }); const [saving, setSaving] = React.useState(false); const [obras, setObras] = React.useState([]); const set = (k, v) => setF(p => ({ ...p, [k]: v })); React.useEffect(() => { window.__VP_SB.sb.from('dossier_obra').select('id,client_name,building_name,city,state') .then(({ data }) => setObras(data || [])); }, []); const save = async () => { if (!f.client.trim()) return window.toast('Cliente é obrigatório.', 'warning'); if (!f.eta) return window.toast('ETA é obrigatória.', 'warning'); setSaving(true); const id = 'EM-' + Date.now().toString().slice(-6); const { error } = await window.__VP_SB.sb.from('embarques').insert({ id, client: f.client, supplier: f.supplier || null, project_id: f.obraId || null, cotacao_fornecedor_id: prefill?.cotacaoFornecedorId || null, numero_cotacao: prefill?.numeroCotacao != null ? prefill.numeroCotacao : null, vessel: f.vessel || null, imo: f.imo || null, line: f.sealine ? eiSealineName(f.sealine) : null, sealine: f.sealine || null, bl: f.bl || null, invoice_number: f.invoiceNumber || null, invoice_value: f.invoiceValue ? parseFloat(f.invoiceValue) : null, invoice_currency: f.invoiceCurrency || 'USD', container_number: f.containerNumber || null, seal: f.seal || null, freight_condition: f.freight, origin: f.from, destination: f.to, etd: f.etd || null, eta: f.eta, eta_original: f.eta, status: f.status, containers: parseInt(f.containers) || 1, container_type: f.type, position: 0, lat: null, lng: null, speed: null, heading: null, channel: null, di_number: null, di_date: null, siscomex_status: f.status === "Entregue" ? "Desembaraçado" : f.status === "Aguardando liberação" ? "Em conferência aduaneira" : "Aguardando chegada do navio", milestones: buildMilestones(f.status, f.etd, f.eta), docs: [], }); setSaving(false); if (error) return window.toast('Erro: ' + error.message, 'error'); window.toast('Embarque criado!', 'success'); onSaved?.(); onClose(); // Posiciona o navio no mapa imediatamente (sem esperar o próximo sync manual). if (f.status !== 'Entregue') runAisSync(); }; const fld = (label, key, type='text', ph='', opts=null) => (
{opts ? : set(key, e.target.value)} placeholder={ph}/> }
); const sectionLabel = (t) => (
{t}
); return ( }>
{sectionLabel('Projeto & Fornecedor')}
{fld('Cliente *', 'client', 'text', 'Condomínio Ed. Itacolomi…')} {fld('Fornecedor', 'supplier', 'text', 'Ex.: Tianjin Control Systems')}
{sectionLabel('Invoice')}
{fld('Nº Invoice', 'invoiceNumber', 'text', 'HSL-2026-0418')} {fld('Valor', 'invoiceValue', 'number', '128400')} {fld('Moeda', 'invoiceCurrency', 'text', '', ['USD','EUR','CNY','BRL'])}
{sectionLabel('Navio & BL')}
{fld('Nome do navio', 'vessel', 'text', 'MSC ISABELLA')} {fld('IMO', 'imo', 'text', '9839430')}
{fld('BL (Bill of Lading)', 'bl', 'text', 'Ex.: COSU6789012345')} {sectionLabel('Container')}
{fld('Nº do Container', 'containerNumber', 'text', 'MSCU9382821')} {fld('Lacre (seal)', 'seal', 'text', 'SH4471092')}
{fld('Qtd. containers', 'containers', 'number', '1')} {fld('Tipo', 'type', 'text', '', ['20GP','40GP','40HC','20RF'])} {fld('Condição', 'freight', 'text', '', ['FCL','LCL'])}
{sectionLabel('Rota & Datas')}
{fld('Origem', 'from', 'text', 'Xangai, CN')} {fld('Destino', 'to', 'text', 'Santos, BR')}
{fld('ETD (saída)', 'etd', 'date')} {fld('ETA (chegada) *', 'eta', 'date')} {fld('Status', 'status', 'text', '', ['Em trânsito','Aguardando liberação','Entregue'])}
); } /* ---------- IMPORTAÇÃO listing ---------- */ function ImportacaoPage({ setRoute, setSubsel }) { const [embarques, setEmbarques] = React.useState([]); const [loading, setLoading] = React.useState(true); const [tab, setTab] = window.useRouteTab('importacao', 'embarques', ['embarques', 'documentos', 'aduana']); const [filter, setFilter] = React.useState("Todos"); const [filterPorto, setFilterPorto] = React.useState("Todos"); const [filterLinha, setFilterLinha] = React.useState("Todas"); const [showEmbarque, setShowEmbarque] = React.useState(null); // null | {} (branco) | prefill const [aguardando, setAguardando] = React.useState([]); const filterOptions = ["Todos", "Em trânsito", "Aguardando liberação", "Entregue"]; const reloadEmbarques = () => { setLoading(true); window.__VP_SB.sb.from('embarques').select('*').eq('teste', false).order('eta') .then(({ data }) => { setEmbarques(data || []); setLoading(false); }); if (window.CotacaoElevadorFornecedorStore?.listarComprasAguardandoEmbarque) { window.CotacaoElevadorFornecedorStore.listarComprasAguardandoEmbarque() .then(setAguardando).catch(() => setAguardando([])); } }; React.useEffect(() => { reloadEmbarques(); }, []); // Realtime (28/09): o cron ais-sync grava posição/status sem ninguém com a // tela aberta — sem isto, só via reload manual/F5 pra ver a mudança. React.useEffect(() => { const sb = window.__VP_SB?.sb; if (!sb) return; const canal = sb.channel('embarques-lista') .on('postgres_changes', { event: '*', schema: 'public', table: 'embarques' }, reloadEmbarques) .subscribe(); return () => sb.removeChannel(canal); }, []); if (loading) return
Carregando…
; const rows = embarques .filter(e => filter === "Todos" || e.status === filter) .filter(e => filterPorto === "Todos" || (e.origin || e.from) === filterPorto || (e.destination || e.to) === filterPorto) .filter(e => filterLinha === "Todas" || e.line === filterLinha); const portosDisponiveis = ["Todos", ...new Set(embarques.flatMap(e => [e.origin || e.from, e.destination || e.to]).filter(Boolean))]; const linhasDisponiveis = ["Todas", ...new Set(embarques.map(e => e.line).filter(Boolean))]; // KPIs derivados const emTransito = embarques.filter(e => e.status === "Em trânsito"); const ativos = embarques.filter(e => e.status !== "Entregue"); const alertasEta = embarques.filter(e => { const orig = e.eta_original || e.etaOriginal; return orig && e.eta && e.eta > orig; // ETA atual atrasada vs. original (ISO compara como string) }); const valorTransito = ativos.reduce((s, e) => s + (e.invoice_value || 0), 0); return (
Logística · Importação

Importação

Embarques em trânsito + rastreamento marítimo por AIS

{aguardando.length > 0 && (
Compras aguardando embarque ({aguardando.length})
Compra confirmada no fornecedor · ainda sem embarque na Importação
{aguardando.map((a) => ( ))}
CotaçãoFornecedorClienteFOB (USD)
{a.numeroCotacao != null ? window.MasterIdEngine.etapaId('cotacao', a.numeroCotacao) : (a.numeroDocumento || '—')}
{a.numeroDocumento}
 {a.fornecedor || '—'} {a.clienteNome || '—'} {a.fobUsd ? fmtUSD(a.fobUsd) : '—'}
)}
e.status === "Aguardando liberação").length} sub="aduana" icon="package"/>
{tab === "embarques" && <>
{filterOptions.map(s => ( ))}
{rows.length === 0 && ( )} {rows.map((e) => ( { setSubsel(e); setRoute("importacao-detail"); }}> ))}
Embarque Navio / BL Rota ETA Progresso Aduana Status
Nenhum registro {embarques.length ? 'com esse filtro' : 'cadastrado'}.
{e.id}
{e.client}
{e.vessel}
BL {e.bl} · {e.line}
{(e.from || e.origin || "—").split(" ")[0]} {(e.to || e.destination || "—").split(" ")[0]}
{e.containers}× {e.type || e.container_type}
{fmtDate(e.eta)}
{(e.etaOriginal || e.eta_original) && e.eta !== (e.etaOriginal || e.eta_original) ?
antes: {fmtDate(e.etaOriginal || e.eta_original)}
: null}
{Math.round(e.position * 100)}%
 {e.channel ? {e.channel} : —}
} {tab === "documentos" && (
{embarques.length === 0 && ( )} {embarques.map((e) => ( { setSubsel(e); setRoute("importacao-detail"); }}> ))}
EmbarqueNº InvoiceBLDocumentos anexados
Nenhum embarque cadastrado.
{e.id}
{e.client}
 {e.invoice_number || '—'} {e.bl || '—'} {(e.docs || []).length} documento{(e.docs || []).length === 1 ? '' : 's'}
)} {tab === "aduana" && (
{embarques.length === 0 && ( )} {embarques.map((e) => ( { setSubsel(e); setRoute("importacao-detail"); }}> ))}
EmbarqueCanalStatus SiscomexDI
Nenhum embarque cadastrado.
{e.id}
{e.client}
 {e.channel ? {e.channel} : —} {e.siscomex_status || '—'} {e.di_number || '—'}
)} {showEmbarque && setShowEmbarque(null)} onSaved={reloadEmbarques}/>}
); } /* ---------- IMPORTAÇÃO detail ---------- */ function ImportacaoDetail({ embarque, setRoute }) { const [e, setE] = React.useState(embarque); const [syncing, setSyncing] = React.useState(false); const [reportando, setReportando] = React.useState(false); const [mapaAberto, setMapaAberto] = React.useState(false); const [mostrarTodosEventos, setMostrarTodosEventos] = React.useState(false); React.useEffect(() => { setE(embarque); }, [embarque]); // Realtime (28/09): status/posição/docs atualizam sozinhos nesta tela // quando o cron ais-sync (ou outra aba) grava — sem isto, `e` ficava // congelado no snapshot passado por `subsel` na navegação. React.useEffect(() => { const sb = window.__VP_SB?.sb; if (!sb || !embarque?.id) return; const canal = sb.channel('embarque-detail-' + embarque.id) .on('postgres_changes', { event: '*', schema: 'public', table: 'embarques', filter: `id=eq.${embarque.id}` }, (payload) => { if (payload.new) setE(payload.new); }) .subscribe(); return () => sb.removeChannel(canal); }, [embarque?.id]); const refresh = async () => { setSyncing(true); await runAisSync(); const { data } = await window.__VP_SB.sb.from('embarques').select('*').eq('id', embarque.id).single(); if (data) setE(data); setSyncing(false); }; const onDocsChange = async (newDocs) => { setE(prev => ({ ...prev, docs: newDocs })); const { error } = await window.__VP_SB.sb.from('embarques').update({ docs: newDocs }).eq('id', embarque.id); if (error) window.toast('Erro ao salvar documentos: ' + error.message, 'error'); }; const reportarChegada = async () => { if (e.chegada_confirmada_em) return; if (!window.confirm(`Confirmar chegada do navio ${e.vessel || e.id} no Brasil?\n\nIsso cria tarefas para Engenharia e Instalação prepararem o recebimento de "${e.client}".`)) return; setReportando(true); const now = new Date().toISOString(); const dueTime = now.slice(0, 16).replace('T', ' '); const [{ error: errEmb }, { error: errEng }, { error: errInst }] = await Promise.all([ window.__VP_SB.sb.from('embarques').update({ chegada_confirmada_em: now }).eq('id', e.id), window.__VP_SB.sb.from('tarefas').insert({ title: `Chegada confirmada: preparar recebimento — ${e.client} (${e.id})`, module: 'Engenharia', priority: 'alta', due_time: dueTime, role: 'admin', done: false, }), window.__VP_SB.sb.from('tarefas').insert({ title: `Chegada confirmada: agendar instalação — ${e.client} (${e.id})`, module: 'Instalação', priority: 'alta', due_time: dueTime, role: 'admin', done: false, }), ]); setReportando(false); const err = errEmb || errEng || errInst; if (err) return window.toast('Erro ao reportar chegada: ' + err.message, 'error'); setE(prev => ({ ...prev, chegada_confirmada_em: now })); window.toast('Chegada reportada — tarefas criadas para Engenharia e Instalação.', 'success'); }; if (!e) { return setRoute("importacao")}/>; } return (
{e.id} · {e.line}

{e.vessel}

BL {e.bl} · {e.containers}× container {e.type || e.container_type} · {e.client}

{e.channel ? Canal {e.channel} : null} {e.last_ais_sync ? `AIS atualizado ${window.__VP_SB.timeAgo(e.last_ais_sync)}` : "AIS: aguardando 1ª sincronização"}
{(e.tracking_events || []).length > 0 ? ( setMapaAberto(true)}>Ver mapa}>
{(mostrarTodosEventos ? e.tracking_events : e.tracking_events.slice(0, 3)).map((ev, i) => ( ))}
DataDescriçãoLocalizaçãoNavio
{evDateTime(ev.date)} {ev.description || "—"} {ev.location || "—"} {ev.vessel || "—"}
{e.tracking_events.length > 3 ? (
) : null} ) : (
{(e.milestones || []).map((m, i) => (
{m.label}
{m.note ?
{m.note}
: null}
{m.date}
{i < (e.milestones || []).length - 1 ?
: null}
))}

Linha do tempo genérica — vira eventos reais (Container Arrival, Gate-In etc.) assim que a Sinay/Safecube sincronizar este embarque.

)} {(() => { const chegou = rtChegou(e), real = rtPosicaoReal(e), etaR = rtEta(e, rtHojeBrasilia()); const sub = (e.tracking_provider === 'sinay' ? 'Rastreio Sinay/Safecube · ' : 'Sem rastreio configurado · ') + (chegou ? 'chegada confirmada' : real ? 'leitura real ' + window.__VP_SB.timeAgo(e.tracking_updated_at) : 'rastreio parado'); return ( {syncing ? "Atualizando…" : "Atualizar"}}> {!chegou && !real && e.tracking_provider === 'sinay' ? (
⚠ Rastreio parado. O mapa mostra a última posição conhecida{rtUltimoEvento(e) ? ` (${rtUltimoEvento(e)})` : ''}, que não acompanha o navio. {e.tracking_erro ?
{rtExplicaErro(e.tracking_erro)} ({e.tracking_erro})
: null}
) : null}
{!chegou ? : }
{e.eta_original && e.eta_original !== e.eta ? : } {real && !chegou && e.speed != null ? : }
{e.tracking_provider !== 'sinay' ? ((e.bl || e.container_number) && e.sealine ?

Ainda não sincronizado com a Sinay — clique "Atualizar" ou aguarde a sincronização diária.

:

Preencha BL/Container + Armador (SCAC) para habilitar rastreio real via Sinay/Safecube.

) : null} ); })()}
Canal de parametrização {e.channel ? {e.channel} : —}
{e.channel === "Vermelho" ? (
Canal vermelho
Conferência documental + inspeção física
) : e.channel === "Amarelo" ? (
Canal amarelo
Conferência documental
) : e.channel === "Verde" ? (
Canal verde
Desembaraço automático previsto
) : null} {(e.etaOriginal || e.eta_original) && e.eta !== (e.etaOriginal || e.eta_original) ? (() => { const dias = diffDiasISO(e.eta, e.etaOriginal || e.eta_original); return (
Atraso detectado
Diferença: {dias > 0 ? "+" : ""}{dias} dia{Math.abs(dias) !== 1 ? "s" : ""}
Pode impactar o cronograma de instalação — avise Engenharia/Instalação.
); })() : null}
Gatilho de pagamento

Ainda não existe gatilho financeiro automático ligado a embarques — o módulo de Gatilhos hoje cobre só a etapa comercial (formulário, precificação, proposta, fornecedor).

{e.invoice_value != null ? (
Valor da invoice (referência)
{e.invoice_currency === "BRL" ? fmtBRL(e.invoice_value) : fmtUSD(e.invoice_value)}
) : null}
{mapaAberto ? setMapaAberto(false)}/> : null}
); } /* ---------- IMPORTAÇÃO · MAPA DE NAVIOS ====================== */ /* ---------- Rastreamento de navios (pente fino 06/10/2026) ---------- - ETA vencida (previsão passou e o navio não chegou) e ETA adiada (maior que a original) são "atrasos"; o filtro "Atrasados" pega os dois. - Mapa real (Leaflet) com todos os navios, rota marítima (eiRouteWaypoints) e portos; sem origem/destino NÃO inventa rota. - Detalhe com armador (line ou sealine), BL/container, última leitura, status do rastreio e últimos eventos. - A sincronização automática (ais-sync) roda 1x/dia; passou de 26h sem leitura = aviso na tela. - Exporta CSV. Data de hoje no fuso de Brasília. Só leitura (o único efeito é o botão Atualizar chamar ais-sync). */ const rtHojeBrasilia = () => new Date(Date.now() - 3 * 3600 * 1000).toISOString().slice(0, 10); const rtHoras = (iso) => iso ? (Date.now() - new Date(iso).getTime()) / 3.6e6 : Infinity; function rtEta(s, hoje) { const encerrado = s.status === 'Entregue' || !!s.chegada_confirmada_em; const vencidaDias = !encerrado && s.eta && s.eta < hoje ? diffDiasISO(hoje, s.eta) : 0; const orig = s.eta_original || s.etaOriginal; const adiadaDias = orig && s.eta && s.eta > orig ? diffDiasISO(s.eta, orig) : 0; return { encerrado, vencidaDias, adiadaDias, atrasado: vencidaDias > 0 || adiadaDias > 0 }; } const rtSituacaoEta = (r) => r.encerrado ? 'Chegou' : r.vencidaDias ? `ETA vencida há ${r.vencidaDias} dia(s)` : r.adiadaDias ? `ETA adiada em ${r.adiadaDias} dia(s)` : 'No prazo'; const rtArmador = (s) => s.line || s.sealine || '—'; // Posição REAL = última consulta à Sinay deu certo (status diferente de ERROR/RATE_LIMITED) e tem menos de 72h. Senão a função ais-sync // está SIMULANDO a posição (avanço de ~2%/dia, velocidade e rumo sorteados): nunca apresentar isso como dado real. const rtPosicaoReal = (s) => s.tracking_provider === 'sinay' && !['ERROR', 'RATE_LIMITED'].includes(String(s.tracking_status || '').toUpperCase()) && rtHoras(s.tracking_updated_at) <= 72; const rtChegou = (s) => !!s.chegada_confirmada_em || s.status === 'Entregue'; const rtStatusEfetivo = (s) => s.chegada_confirmada_em ? 'Entregue' : s.status; const rtDataBR = (iso) => iso ? new Date(iso).toLocaleDateString('pt-BR', { timeZone: 'America/Sao_Paulo' }) : '—'; // Último evento REAL (isActual) vindo da Sinay — a única "posição" confiável quando o rastreio está parado. const rtUltimoEvento = (s) => { const ev = Array.isArray(s.tracking_events) ? s.tracking_events.find(e => e.isActual) : null; return ev ? `${ev.description || 'Evento'}${ev.location ? ' em ' + ev.location : ''} (${rtDataBR(ev.date)})` : null; }; // Traduz o erro bruto gravado pelo ais-sync em uma frase para quem usa o sistema. function rtExplicaErro(txt) { const s = String(txt || ''); if (!s) return ''; if (/expired|4003|403/i.test(s)) return 'A chave da Sinay expirou — avise a TI para renovar (secret SINAY_API_KEY no Supabase).'; if (/401|invalid|unauthor/i.test(s)) return 'A chave da Sinay foi recusada — avise a TI para conferir a chave.'; if (/402|credit|quota|saldo/i.test(s)) return 'Os créditos da Sinay acabaram — avise a TI/Financeiro.'; if (/429|limite|rate/i.test(s)) return 'A Sinay limitou as consultas — o sistema tenta de novo na próxima rodada.'; if (/SINAY_API_KEY/i.test(s)) return 'A chave da Sinay não está configurada no Supabase — avise a TI.'; return s; } // true quando a janela é estreita (celular): o mapa e a lista passam a ficar um embaixo do outro. function useRtEstreito(px = 900) { const [e, setE] = React.useState(() => window.innerWidth < px); React.useEffect(() => { const f = () => setE(window.innerWidth < px); window.addEventListener('resize', f); return () => window.removeEventListener('resize', f); }, [px]); return e; } const rtDoc = (s) => s.bl || s.container_number || null; const rtSemRota = (s) => !(eiPortCoords(s.origin || s.from) && eiPortCoords(s.destination || s.to)); function RastreamentoMapa({ ships, activeId, onSelect }) { const elRef = React.useRef(null); const mapRef = React.useRef(null); const grpRef = React.useRef(null); const tileRef = React.useRef(null); const [estilo, setEstilo] = React.useState("claro"); const chave = ships.map(s => s.id).join(","); React.useEffect(() => { if (!window.L || !elRef.current) return undefined; const map = window.L.map(elRef.current, { zoomControl: true, worldCopyJump: true }); mapRef.current = map; grpRef.current = window.L.layerGroup().addTo(map); map.setView([-5, -20], 2); const t = setTimeout(() => map.invalidateSize(), 150); return () => { clearTimeout(t); map.remove(); mapRef.current = null; }; }, []); React.useEffect(() => { const map = mapRef.current; if (!map || !window.L) return; const cfg = EI_MAP_STYLES.find(s => s.key === estilo) || EI_MAP_STYLES[0]; if (tileRef.current) map.removeLayer(tileRef.current); tileRef.current = window.L.tileLayer(cfg.url, { attribution: cfg.attribution, subdomains: cfg.subdomains || "abc", maxZoom: 19 }).addTo(map); tileRef.current.bringToBack(); }, [estilo]); React.useEffect(() => { const map = mapRef.current, grp = grpRef.current; if (!map || !grp || !window.L) return; grp.clearLayers(); ships.forEach(s => { const ativo = s.id === activeId; const origem = eiPortCoords(s.origin || s.from), destino = eiPortCoords(s.destination || s.to); if (origem && destino) { window.L.polyline(eiRouteWaypoints(origem, destino), { color: ativo ? "#000" : "#64748b", weight: ativo ? 3 : 1.5, opacity: ativo ? 0.9 : 0.6, dashArray: "1 8", lineCap: "round", smoothFactor: 2 }).addTo(grp); const porto = (p, cor, nome) => window.L.marker(p, { icon: window.L.divIcon({ className: "", html: `
`, iconSize: [10, 10], iconAnchor: [5, 5] }) }).addTo(grp).bindTooltip(nome); porto(origem, "#334155", s.origin || s.from || "Origem"); porto(destino, "#dc2626", s.destination || s.to || "Destino"); } const chegou = rtChegou(s) && destino; const pos = chegou ? destino : (s.lat != null && s.lng != null ? [s.lat, s.lng] : null); if (pos) { const tam = ativo ? 30 : 22, estimada = !chegou && !rtPosicaoReal(s); const icone = window.L.divIcon({ className: "", html: `
🚢
`, iconSize: [tam, tam], iconAnchor: [tam / 2, tam / 2] }); window.L.marker(pos, { icon: icone, zIndexOffset: ativo ? 2000 : 1000 }).addTo(grp).bindTooltip((s.vessel || s.id) + (chegou ? ' — chegou' : estimada ? ' — ' + (rtUltimoEvento(s) || 'sem leitura real') + ' · rastreio parado' : '')).on("click", () => onSelect && onSelect(s.id)); } }); }, [ships, activeId]); React.useEffect(() => { const map = mapRef.current; if (!map || !window.L) return; const pts = ships.filter(s => s.lat != null && s.lng != null).map(s => [s.lat, s.lng]); ships.forEach(s => { const o = eiPortCoords(s.origin || s.from), d = eiPortCoords(s.destination || s.to); if (o && d) { pts.push(o); pts.push(d); } }); if (pts.length > 1) map.fitBounds(window.L.latLngBounds(pts), { padding: [40, 40], maxZoom: 5 }); else if (pts.length === 1) map.setView(pts[0], 4); }, [chave]); if (!window.L) return
O mapa não carregou (biblioteca Leaflet indisponível). A lista ao lado continua funcionando.
; return (
); } function ImportacaoRastreamento({ setRoute, setSubsel }) { const estreito = useRtEstreito(); const [embarques, setEmbarques] = React.useState([]); const [loading, setLoading] = React.useState(true); const [active, setActive] = React.useState(null); const [syncing, setSyncing] = React.useState(false); const [grande, setGrande] = React.useState(false); const [filterStatus, setFilterStatus] = React.useState("Todos"); const [filterEta, setFilterEta] = React.useState("Todos"); const statusOptions = ["Todos", "Em trânsito", "Aguardando liberação", "Entregue"]; const etaOptions = ["Todos", "Próximos 7 dias", "Próximos 30 dias", "Atrasados"]; const load = React.useCallback(() => { return window.__VP_SB.sb.from('embarques').select('*').eq('teste', false).order('eta') .then(({ data }) => { setEmbarques(data || []); setLoading(false); }); }, []); React.useEffect(() => { load(); }, [load]); // Realtime (28/09): a posição do navio (lat/lng/heading/speed) e o status // atualizam sozinhos no mapa e na lista quando o cron ais-sync grava — // sem isto só via "Atualizar" manual. React.useEffect(() => { const sb = window.__VP_SB?.sb; if (!sb) return; const canal = sb.channel('embarques-rastreamento') .on('postgres_changes', { event: '*', schema: 'public', table: 'embarques' }, () => load()) .subscribe(); return () => sb.removeChannel(canal); }, [load]); const onSync = async () => { setSyncing(true); await runAisSync(); await load(); setSyncing(false); }; if (loading) return
Carregando…
; const hoje = rtHojeBrasilia(); const comPosicao = embarques.filter(e => e.lat !== null && e.lat !== undefined); const ships = comPosicao .filter(e => filterStatus === "Todos" || rtStatusEfetivo(e) === filterStatus) .filter(e => { if (filterEta === "Todos") return true; if (filterEta === "Atrasados") return rtEta(e, hoje).atrasado; if (!e.eta) return false; const dias = diffDiasISO(e.eta, hoje); if (filterEta === "Próximos 7 dias") return dias >= 0 && dias <= 7; if (filterEta === "Próximos 30 dias") return dias >= 0 && dias <= 30; return true; }); const ativos = ships.filter(s => !rtChegou(s)); const entregues = ships.filter(rtChegou); const noMapa = filterStatus === "Entregue" ? ships : ativos; const activeId = (active && ships.some(s => s.id === active)) ? active : ((ativos[0] || ships[0]) && (ativos[0] || ships[0]).id) || null; const activeShip = ships.find(s => s.id === activeId); const lastSync = comPosicao.filter(e => !rtChegou(e)).map(s => s.last_ais_sync).filter(Boolean).sort().pop(); const horasSync = rtHoras(lastSync); const nAtrasados = comPosicao.filter(e => rtEta(e, hoje).atrasado).length; const estimadas = comPosicao.filter(e => !rtChegou(e) && !rtPosicaoReal(e)); const ultimaReal = comPosicao.filter(e => !rtChegou(e)).map(e => e.tracking_updated_at).filter(Boolean).sort().pop(); const exportar = () => { const cel = (v) => { const s = String(v ?? ''); return /[;"\n]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s; }; const linhas = [['Embarque', 'Navio', 'Armador', 'BL', 'Container', 'Origem', 'Destino', 'Status', 'ETA', 'ETA original', 'Situação do ETA', 'Progresso %', 'Posição', 'Latitude', 'Longitude', 'Velocidade (kn)', 'Rumo', 'Última leitura real', 'Última tentativa do robô', 'Status do rastreio', 'Motivo do erro', 'Dias de atraso do ETA', 'Chegada confirmada']] .concat(ships.map(s => [s.id, s.vessel || '', rtArmador(s) === '—' ? '' : rtArmador(s), s.bl || '', s.container_number || '', s.origin || s.from || '', s.destination || s.to || '', s.status || '', s.eta ? fmtDate(s.eta) : '', (s.eta_original || s.etaOriginal) ? fmtDate(s.eta_original || s.etaOriginal) : '', rtSituacaoEta(rtEta(s, hoje)), rtChegou(s) ? 100 : Math.round((s.position || 0) * 100), rtChegou(s) ? 'chegou' : rtPosicaoReal(s) ? 'real' : 'desatualizada (rastreio parado)', s.lat ?? '', s.lng ?? '', rtPosicaoReal(s) ? (s.speed ?? '') : '', rtPosicaoReal(s) ? (s.heading ?? '') : '', s.tracking_updated_at ? new Date(s.tracking_updated_at).toLocaleString('pt-BR') : '', s.last_ais_sync ? new Date(s.last_ais_sync).toLocaleString('pt-BR') : '', s.tracking_status || '', rtChegou(s) ? '' : rtExplicaErro(s.tracking_erro), rtEta(s, hoje).vencidaDias || rtEta(s, hoje).adiadaDias || '', s.chegada_confirmada_em ? rtDataBR(s.chegada_confirmada_em) : ''])); const texto = '' + linhas.map(l => l.map(cel).join(';')).join('\r\n'); const url = URL.createObjectURL(new Blob([texto], { type: 'text/csv;charset=utf-8' })); const a = document.createElement('a'); a.href = url; a.download = `rastreamento-navios-${hoje}.csv`; document.body.appendChild(a); a.click(); a.remove(); setTimeout(() => URL.revokeObjectURL(url), 2000); }; const detalheEta = activeShip ? rtEta(activeShip, hoje) : null; const eventos = activeShip && Array.isArray(activeShip.tracking_events) ? activeShip.tracking_events.slice(0, 3) : []; return (
{grande && activeShip ? setGrande(false)}/> : null}
Logística · Rastreamento

Mapa Marítimo

{ativos.length} navio{ativos.length !== 1 ? 's' : ''} em trânsito{entregues.length ? ` · ${entregues.length} entregue${entregues.length !== 1 ? 's' : ''}` : ''}{nAtrasados ? ` · ${nAtrasados} com ETA atrasada` : ''} · {ultimaReal ? `última leitura real em ${rtDataBR(ultimaReal)}` : 'nenhuma leitura real ainda'}{lastSync ? ` · robô tentou ${window.__VP_SB.timeAgo(lastSync)}` : ''}

{estimadas.length ? (
⚠ Rastreio parado em {estimadas.length} navio(s) — a consulta à Sinay/Safecube está falhando{ultimaReal ? ` (última leitura real em ${rtDataBR(ultimaReal)})` : ''}. O mapa mostra a última posição conhecida, que não acompanha o navio; confira no site do armador. O motivo do erro está no detalhe de cada embarque (peça à TI para verificar a chave da Sinay).
) : null} {horasSync > 26 ? (
⚠ Posições desatualizadas — {lastSync ? `última sincronização há ${Math.round(horasSync)} h` : 'nenhuma sincronização ainda'}. A automática roda uma vez por dia (06:00 UTC); clique em "Atualizar".
) : null}
{statusOptions.map(s => ( ))}
{etaOptions.map(s => ( ))}
setActive(id)}/>
{[['Navios em trânsito', ativos, ativos.length + ' ativos'], ['Entregues', entregues, entregues.length + ' entregue' + (entregues.length !== 1 ? 's' : '')]].filter(([, l], i) => i === 0 || l.length).map(([titulo, lista, subt]) => (
{lista.length === 0 ?
Nenhum navio neste filtro.
: null} {lista.map((s) => { const r = rtEta(s, hoje), sel = activeId === s.id, doc = rtDoc(s), chegou = rtChegou(s), real = rtPosicaoReal(s); return (
setActive(s.id)} style={{ padding: 12, background: sel ? "var(--vp-black)" : "var(--bg)", color: sel ? "var(--bg)" : "var(--fg1)", border: "1px solid " + (sel ? "var(--vp-black)" : "var(--border)"), cursor: "pointer", position: "relative", }}> {sel ? : null}
{s.vessel}
{chegou ? '100%' : real ? Math.round(s.position * 100) + '%' : '—'}
{rtArmador(s)} · {doc ? (s.bl ? `BL ${s.bl}` : `Cont. ${s.container_number}`) : 'sem BL/container'}
{real && !chegou ? (s.speed != null ? `${s.speed} kn · rumo ${s.heading}°` : 'posição real') : chegou ? '' : (rtUltimoEvento(s) || 'sem leitura real')} ETA {fmtDate(s.eta)}
{chegou ?
✓ Chegada confirmada{s.chegada_confirmada_em ? ' em ' + rtDataBR(s.chegada_confirmada_em) : ''}
: null} {!chegou && (s.eta_original || s.etaOriginal) && (s.eta_original || s.etaOriginal) !== s.eta ?
ETA original {fmtDate(s.eta_original || s.etaOriginal)}{r.adiadaDias ? ` · adiada ${r.adiadaDias}d` : ''}
: null} {r.atrasado && !chegou ?
{r.vencidaDias ? '⚠ ' : ''}{rtSituacaoEta(r)}
: null} {rtSemRota(s) ?
sem origem/destino: rota não desenhada
: null}
); })}
))} {activeShip ? ( {(activeShip.eta_original && activeShip.eta_original !== activeShip.eta) ? : null} {activeShip.tracking_erro && !rtChegou(activeShip) ? : null} 72 && !rtChegou(activeShip) ? ' ⚠' : ''}` : 'nenhuma'}/> {!rtChegou(activeShip) ? 26 ? ' ⚠' : ''}` : 'aguardando 1ª sync'}/> : null} {eventos.length ? (
Últimos eventos
{eventos.map((ev, i) =>
{evDateTime(ev.date)} · {ev.description || '—'}{ev.location ? ` (${ev.location})` : ''}
)}
) : null}
) : null}
); } /* ---------- Portos conhecidos (espelho client-side do PORTS da edge function ais-sync — só pra desenhar origem/destino no mapa real). ------ */ const EI_PORTS = { shanghai: [31.2, 121.5], xangai: [31.2, 121.5], shangai: [31.2, 121.5], ningbo: [29.8, 121.5], qingdao: [36.0, 120.4], hamburg: [53.55, 9.99], hamburgo: [53.55, 9.99], santos: [-23.95, -46.3], itaguai: [-22.86, -43.75], "itaguaí": [-22.86, -43.75], }; function eiPortCoords(nome) { if (!nome) return null; const k = nome.toLowerCase(); for (const p in EI_PORTS) if (k.includes(p)) return EI_PORTS[p]; return null; } /* ---------- Waypoints de rota marítima real (não em linha reta!) --------- Uma reta lat/lng entre Xangai e Santos corta direto o continente africano — navio não anda em terra seca. Os pontos abaixo seguem corredores de navegação reais (Estreito de Malaca → Oceano Índico → Cabo da Boa Esperança → Atlântico Sul), permanecendo sempre sobre água. */ function eiRouteWaypoints(origin, destino) { if (!origin || !destino) return [origin, destino].filter(Boolean); const isAsia = (p) => p[1] > 90; const isBrasil = (p) => p[0] < 5 && p[1] < -30; const isEuropa = (p) => p[0] > 40 && p[1] > -15 && p[1] < 35; if ((isAsia(origin) && isBrasil(destino)) || (isBrasil(origin) && isAsia(destino))) { const asia = isAsia(origin) ? origin : destino; const brasil = isBrasil(origin) ? origin : destino; // Estreito de Malaca → Índico → Cabo da Boa Esperança → Atlântico Sul. const chain = [asia, [1.3, 103.8], [-6, 78], [-34.8, 20], [-25, -8], brasil]; return isAsia(origin) ? chain : chain.slice().reverse(); } if ((isEuropa(origin) && isBrasil(destino)) || (isBrasil(origin) && isEuropa(destino))) { const europa = isEuropa(origin) ? origin : destino; const brasil = isBrasil(origin) ? origin : destino; const chain = [europa, [43, -10], [15, -22], brasil]; return isEuropa(origin) ? chain : chain.slice().reverse(); } return [origin, destino]; } /* ---------- Formata datetime de evento real da Sinay (ISO completo ou só data) no padrão "AAAA-MM-DD HH:mm" que o Safecube usa. ------------- */ function evDateTime(v) { if (!v) return "—"; const d = new Date(v); if (isNaN(d.getTime())) return String(v).slice(0, 16).replace("T", " "); const pad = (n) => String(n).padStart(2, "0"); return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`; } /* ---------- Modal grande: mapa real (Leaflet) com trocador de estilo Claro/Escuro/Ruas/Satélite — engenharia reversa do "Ver mapa" do Safecube/Sinay (fornecedor da nossa API de rastreio). ------------------ */ const EI_MAP_STYLES = [ { key: "claro", label: "Claro", url: "https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}", attribution: "Tiles © Esri — Esri, HERE, Garmin, FAO, NOAA, USGS", tms: false, routeColor: "#334155" }, { key: "escuro", label: "Escuro", url: "https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/{z}/{y}/{x}", attribution: "Tiles © Esri — Esri, HERE, Garmin, FAO, NOAA, USGS", tms: false, routeColor: "#e5e7eb" }, { key: "ruas", label: "Ruas", url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", attribution: "© OpenStreetMap contributors", subdomains: "abc", routeColor: "#1d4ed8" }, { key: "satelite", label: "Satélite", url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", attribution: "Tiles © Esri — Source: Esri, Maxar, Earthstar Geographics", routeColor: "#facc15" }, ]; function EmbarqueMapaModal({ embarque: e, onClose }) { const mapElRef = React.useRef(null); const shellRef = React.useRef(null); const mapRef = React.useRef(null); const layerRef = React.useRef(null); const routeRef = React.useRef(null); const [styleKey, setStyleKey] = React.useState("escuro"); const [pickerOpen, setPickerOpen] = React.useState(false); const [fullscreen, setFullscreen] = React.useState(false); React.useEffect(() => { const fn = (ev) => { if (ev.key === "Escape") onClose?.(); }; window.addEventListener("keydown", fn); return () => window.removeEventListener("keydown", fn); }, [onClose]); // Cria o mapa uma única vez. React.useEffect(() => { if (!window.L || !mapElRef.current || mapRef.current) return; const map = window.L.map(mapElRef.current, { zoomControl: true, attributionControl: true }); mapRef.current = map; const origin = eiPortCoords(e.origin || e.from); const destino = eiPortCoords(e.destination || e.to); const chegou = rtChegou(e), real = rtPosicaoReal(e); const atual = chegou && destino ? destino : ((e.lat != null && e.lng != null) ? [e.lat, e.lng] : null); const rota = eiRouteWaypoints(origin, destino); const pontos = [...rota, atual].filter(Boolean); const shipIcon = window.L.divIcon({ className: "", html: `
🚢
`, iconSize: [22, 22], iconAnchor: [11, 11], }); const portIcon = (cor) => window.L.divIcon({ className: "", html: `
`, iconSize: [12, 12], iconAnchor: [6, 6], }); if (origin) window.L.marker(origin, { icon: portIcon("#334155") }).addTo(map).bindTooltip(e.origin || e.from || "Origem"); if (destino) window.L.marker(destino, { icon: portIcon("#dc2626") }).addTo(map).bindTooltip(e.destination || e.to || "Destino"); if (atual) window.L.marker(atual, { icon: shipIcon, zIndexOffset: 1000 }).addTo(map).bindTooltip((e.vessel || "Navio") + (chegou ? " — chegou" : real ? "" : " — última posição conhecida (rastreio parado)"), { permanent: false }); if (pontos.length >= 2) map.fitBounds(window.L.latLngBounds(pontos), { padding: [60, 60] }); else if (pontos.length === 1) map.setView(pontos[0], 4); else map.setView([10, 30], 2); return () => { map.remove(); mapRef.current = null; }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); // Troca de tile layer + cor da rota conforme o estilo escolhido. React.useEffect(() => { const map = mapRef.current; if (!map || !window.L) return; const cfg = EI_MAP_STYLES.find((s) => s.key === styleKey) || EI_MAP_STYLES[0]; if (layerRef.current) map.removeLayer(layerRef.current); layerRef.current = window.L.tileLayer(cfg.url, { attribution: cfg.attribution, subdomains: cfg.subdomains || "abc", maxZoom: 19, }).addTo(map); layerRef.current.bringToBack(); if (routeRef.current) map.removeLayer(routeRef.current); const origin = eiPortCoords(e.origin || e.from); const destino = eiPortCoords(e.destination || e.to); if (origin && destino) { routeRef.current = window.L.polyline(eiRouteWaypoints(origin, destino), { color: cfg.routeColor, weight: 2, opacity: 0.85, dashArray: "1 8", lineCap: "round", smoothFactor: 2, }).addTo(map); } }, [styleKey]); // Reflow do mapa quando o modal terminou de animar/redimensionar. React.useEffect(() => { const t = setTimeout(() => mapRef.current?.invalidateSize(), 120); return () => clearTimeout(t); }, [fullscreen]); const toggleFullscreen = () => { const el = shellRef.current; if (!el) return; if (!document.fullscreenElement) { el.requestFullscreen?.(); setFullscreen(true); } else { document.exitFullscreen?.(); setFullscreen(false); } }; React.useEffect(() => { const fn = () => setFullscreen(!!document.fullscreenElement); document.addEventListener("fullscreenchange", fn); return () => document.removeEventListener("fullscreenchange", fn); }, []); return (
ev.stopPropagation()} style={{ width: "min(1180px, 94vw)", height: "min(760px, 90vh)", background: "var(--vp-gray-900)", display: "flex", flexDirection: "column", overflow: "hidden", boxShadow: "0 24px 64px rgba(0,0,0,.45)", }}>
{e.id} · {e.line || e.sealine}
{e.vessel || "Rastreamento marítimo"}
{rtChegou(e) ? `✓ Chegada confirmada${e.chegada_confirmada_em ? " em " + rtDataBR(e.chegada_confirmada_em) : ""}` : rtPosicaoReal(e) ? `Posição real · leitura ${rtDataBR(e.tracking_updated_at)}` : `⚠ Rastreio parado — última posição conhecida${rtUltimoEvento(e) ? ": " + rtUltimoEvento(e) : ""}`}
{(e.origin || e.from || "—")} → {(e.destination || e.to || "—")}
{pickerOpen ? (
{EI_MAP_STYLES.map((s) => (
{ setStyleKey(s.key); setPickerOpen(false); }} style={{ padding: "9px 14px", fontSize: 13, cursor: "pointer", color: "var(--vp-white)", background: styleKey === s.key ? "var(--vp-gray-700)" : "transparent", }}> {s.label}
))}
) : null}
); } /* ---------- Ship map (simplified world-map SVG) ============= */ function ShipMap({ mainShip, ships = [], onClick, active }) { // Project lat/lng → x/y inside a fake map area. // Map covers lat -50..50, lng -100..150 (China + Brazil corridor) const project = (lat, lng) => { const minLng = -75, maxLng = 130; const minLat = -40, maxLat = 50; const x = ((lng - minLng) / (maxLng - minLng)) * 100; const y = ((maxLat - lat) / (maxLat - minLat)) * 100; return { x: Math.max(2, Math.min(98, x)), y: Math.max(4, Math.min(96, y)) }; }; const portShanghai = project(31.2, 121.5); const portSantos = project(-23.95, -46.3); const portItaguai = project(-22.86, -43.75); const portNingbo = project(29.8, 121.5); const portQingdao = project(36.0, 120.4); const allShips = ships.length ? ships : (mainShip ? [mainShip] : []); return ( <>
{/* Landmasses (very simplified) */} {/* Asia */}
{/* Indonesia / SEA islands */}
{/* Africa */}
{/* South America */}
{/* Australia */}
{/* Ports */}
Shanghai
Ningbo
Qingdao
Santos
Itaguaí
{/* Routes for all ships */} {allShips.map((s) => { const from = s.from || s.origin || ""; const to = s.to || s.destination || ""; const start = from.startsWith("Shanghai") || from.startsWith("Xangai") ? portShanghai : from.startsWith("Ningbo") ? portNingbo : from.startsWith("Qingdao") ? portQingdao : portShanghai; const end = to.startsWith("Itaguaí") || to.startsWith("Itaguai") ? portItaguai : portSantos; const cur = project(s.lat, s.lng); return ( onClick?.(s)}/> ); })} {/* Legend */}
Navio ativo
Porto
Rota
Rastreamento AIS
{/* Info card */} {mainShip ? (

{mainShip.vessel}

BL
{mainShip.bl}
Linha
{mainShip.line}
Velocidade
{mainShip.speed} kn
Rumo
{mainShip.heading}°
Lat/Lng
{mainShip.lat}, {mainShip.lng}
ETA
{fmtDate(mainShip.eta)}
) : null} ); } function RouteAndShip({ start, end, cur, ship, isActive, onClick }) { // distance & angle for route line const dx = end.x - start.x; const dy = end.y - start.y; const length = Math.sqrt(dx * dx + dy * dy); const angle = Math.atan2(dy, dx) * 180 / Math.PI; return ( <>
{isActive ?
: null}
{(ship.vessel || 'Navio a definir').replace("MV ", "")}
); } /* ---------- IMPORTAÇÃO VAREJO — movida pra src/importacao-varejo.jsx = 29/09/2026: a casca vazia que existia aqui (ex-"Compras Nacional", esvaziada no PR #496 pra reserva de processo novo) virou o módulo real de estoque/sugestão de compra (`ImportacaoVarejoPage`, arquivo próprio `src/importacao-varejo.jsx` + `-store.js`, Edge Functions list-importacao-varejo/sync-importacao-varejo/ criar-requisicao-compra-importacao-varejo). Rota/menu continuam com o id interno `compras` — ver `case "compras"` em app.jsx/print-app.jsx. */ /* ---------- EMAIL INBOX (Importação + Compras) ============== */ /* 30/09 — pedido do usuário: "as respostas dos fornecedores devem aparecer dentro do Inbox". O fornecedor (ex.: Glarie) costuma responder pelo FORMULÁRIO do link (cotacoes_elevador_fornecedor.respostas), nunca pela caixa suporte@ — então essas respostas não apareciam aqui, só as por e-mail. Bloco SOMENTE LEITURA, separado da lista de e-mails: não toca em emails_projeto, vínculo, matching nem soft-delete. */ function InboxRespostasFormulario({ onAbrir, verOk, liberado }) { const [itens, setItens] = React.useState(null); React.useEffect(() => { const sb = window.__VP_SB && window.__VP_SB.sb; if (!sb) { setItens([]); return; } let vivo = true; sb.from('cotacoes_elevador_fornecedor') .select('id, numero_documento, fornecedor, responded_at, respostas, dados_envio') .not('responded_at', 'is', null).is('excluido_em', null) .order('responded_at', { ascending: false }).limit(6) .then(async ({ data }) => { const linhas = data || []; /* 04/10 — Inbox fase 1: estas respostas (com preço) não passam por emails_projeto, então a regra de dono também vale aqui: o dono é o vendedor da cotação (formularios_elevador.created_by). */ const nums = [...new Set(linhas.map((c) => c.dados_envio && c.dados_envio.header ? c.dados_envio.header.numero_cotacao : null).filter((n) => n != null))]; let donos = {}; if (nums.length) { const { data: fs } = await sb.from('formularios_elevador').select('numero_cotacao, created_by').in('numero_cotacao', nums); (fs || []).forEach((f) => { donos[f.numero_cotacao] = f.created_by ? String(f.created_by).toLowerCase() : null; }); } if (vivo) setItens(linhas.filter((c) => { const n = c.dados_envio && c.dados_envio.header ? c.dados_envio.header.numero_cotacao : null; return !verOk || verOk(n != null ? (donos[n] || null) : null); })); }) .catch(() => { if (vivo) setItens([]); }); return () => { vivo = false; }; }, [liberado]); if (!itens || itens.length === 0) return null; return (
Respostas de fornecedores pelo formulário (link)
{itens.map((c) => { const num = c.dados_envio && c.dados_envio.header ? c.dados_envio.header.numero_cotacao : null; const total = ((c.respostas && c.respostas.itens) || []).reduce((t, it) => t + (Number(it.preco_total) || 0), 0); const moeda = (c.respostas && c.respostas.moeda) || 'USD'; return (
num != null && onAbrir(ev, num)}> {c.fornecedor} respondeu {c.numero_documento}{total > 0 ? ` — ${moeda} ${total.toLocaleString('pt-BR')}` : ''} {c.responded_at ? new Date(c.responded_at).toLocaleString('pt-BR') : ''}
); })}
); } /* 01/10 — rótulo curto por `referencia_tipo`, só pra deixar visível na lista/detalhe de qual documento veio o e-mail (RFQ/Proposta/Contrato/ Tratativa) — antes só se via o Nº da cotação, sem saber qual dos 4+ fluxos que compartilham o mesmo Nº gerou aquele e-mail específico. Puramente de exibição — não influencia nenhum vínculo/matching. */ const INBOX_REFERENCIA_TIPO_LABEL = { cotacao_fornecedor: 'RFQ ao fornecedor', proposta: 'Proposta', contrato_venda: 'Contrato de Venda', contrato_instalador: 'Contrato Instalador', tratativa_cotacao: 'Tratativa', }; /* 07/10 — MÃO DUPLA Inbox ⇄ Tratativas (cotação a fornecedor). A Tratativa de cada cotação a fornecedor (Comercial → Cotação a Fornecedor → Tratativas) mostra os e-mails daqui ligados a ela (por referencia_id). Estes dois helpers só LEEM emails_projeto/cotacoes_elevador_fornecedor: • inboxRefCotacaoFornecedor — devolve a cotação a fornecedor à qual o e-mail está ligado (ou null); • quem responde a um e-mail assim herda a ligação (a resposta também aparece nas Tratativas). Nenhuma lógica de vínculo/matching/soft-delete do read-inbox foi tocada. */ const INBOX_TIPOS_COTACAO_FORNECEDOR = ['cotacao_fornecedor', 'tratativa_cotacao']; async function inboxRefCotacaoFornecedor(sb, msg) { try { if (!sb || !msg || !msg.id) return null; const { data } = await sb.from('emails_projeto').select('referencia_id, referencia_tipo, numero_cotacao').eq('id', msg.id).maybeSingle(); if (data && data.referencia_id && INBOX_TIPOS_COTACAO_FORNECEDOR.includes(data.referencia_tipo)) return { id: data.referencia_id }; return null; } catch (e) { return null; } } function inboxIrParaRota(caminho) { try { window.history.pushState({}, '', caminho); window.dispatchEvent(new PopStateEvent('popstate')); } catch (e) { window.location.assign(caminho); } } /* 10/09 — IMAP conectado de verdade (Edge Function read-inbox, mesma caixa suporte@vpsistema.com usada pra enviar em send-email). Movida do módulo Comercial pro módulo Geral no mesmo dia — pedido do usuário: é uma caixa só, compartilhada por Comercial/Compras/Importação/quem mais precisar, não faz sentido morar dentro de um módulo específico. Botão "Inbox" dentro de Importação/Compras aponta pra cá também (mesma rota). Sem categorização automática por módulo ainda (não fabrica um filtro que não existe). Sem cron: busca só quando a tela abre/atualiza. */ function EmailInbox({ setRoute, setSubsel, subsel }) { const [emailsBase, setEmails] = React.useState([]); const [loading, setLoading] = React.useState(true); const [erro, setErro] = React.useState(null); const [activeId, setActiveId] = React.useState(null); const [folder, setFolder] = React.useState("inbox"); const [enviadosBase, setEnviados] = React.useState([]); const [carregandoEnviados, setCarregandoEnviados] = React.useState(false); const [limiteEnv, setLimiteEnv] = React.useState(50); // fase 4B: "Carregar mais" nos Enviados /* Fase 4B (04/10): a pesquisa também olha o HISTÓRICO COMPLETO no banco (inbox-historico.jsx). As linhas achadas entram na lista junto das carregadas (sem duplicar); tudo mais (pastas, permissões, marcadores) trata como e-mail comum. */ const [busca, setBusca] = React.useState(''); const consulta = window.InboxBusca ? window.InboxBusca.parseConsulta(busca) : null; const buscando = !!(consulta && !window.InboxBusca.vazia(consulta)); const hist = (window.useInboxHistorico || (() => ({ entrada: [], saida: [], carregando: false, truncado: false })))(consulta, buscando); const emails = React.useMemo(() => { const ids = new Set(emailsBase.map((e) => e.id)); return hist.entrada.length ? [...emailsBase, ...hist.entrada.filter((e) => !ids.has(e.id))] : emailsBase; }, [emailsBase, hist.entrada]); const enviados = React.useMemo(() => { const ids = new Set(enviadosBase.map((e) => e.id)); return hist.saida.length ? [...enviadosBase, ...hist.saida.filter((e) => !ids.has(e.id)).map((n) => ({ id: n.id, direcao: 'saida', dono_email: n.dono, atribuido_a: n.atribuido, para: n.to, assunto: n.subject, corpo_texto: n.preview, corpo_html: n.html, data_mensagem: n.date, numero_cotacao: n.numeroCotacao, vinculo_confianca: n.vinculoConfianca, referencia_tipo: n.referenciaTipo, anexos: n.anexos }))] : enviadosBase; }, [enviadosBase, hist.saida]); /* 04/10 — Inbox fase 1: DONO do e-mail + permissões (Administração › Alçadas › Inbox). Quem vê o quê vem de src/inbox-visibilidade.js (regras testadas): é meu → vejo; senão pelas alçadas ver_todos/equipe/departamento/áreas/triagem. Começa liberado para todos. `perm` = undefined enquanto carrega, null se falhou (aí mostra tudo: organização na tela, não isolamento — ver CLAUDE.md/#571). Não toca leitura/vínculo/envio. */ const meta = (window.useInboxMeta || (() => ({ ia: {}, dono: {}, pronto: true })))(emails); const perm = (window.useInboxPermissoes || (() => null))(); const verOk = (dono, atribuido) => !perm || !window.InboxVisibilidade || window.InboxVisibilidade.podeVer(dono, perm, atribuido); const pode = (c) => !perm || !!(perm.flags && perm.flags[c]); const podeExcluirDe = (dono) => !perm || (pode('excluir') && String(dono || '').toLowerCase() === perm.eu) || pode('excluir_de_outros'); /* Normaliza as linhas de emails_projeto (saida) pro mesmo formato que read-inbox devolve — reusa a mesma lista/detalhe sem duplicar JSX. "Para" vira o indicador principal (não "De", que seria sempre a própria caixa suporte@vpsistema.com — inútil pra escanear a lista). */ const enviadosNormalizados = React.useMemo(() => enviados.filter((e) => perm === undefined ? false : verOk(e.dono_email || null, e.atribuido_a || null)).map((e) => ({ id: e.id, _pasta: 'sent', dono: e.dono_email || null, atribuido: e.atribuido_a || null, from: (e.para && e.para[0]) || '', fromName: 'Para: ' + ((e.para || []).join(', ') || '—'), subject: e.assunto || '(sem assunto)', date: e.data_mensagem, unread: false, preview: (e.corpo_texto || '').slice(0, 2000), html: e.corpo_html || null, numeroCotacao: e.numero_cotacao, vinculoConfianca: e.vinculo_confianca, referenciaTipo: e.referencia_tipo, anexos: (e.anexos || []).map((a) => ({ ...a, url: a.url || null })), to: e.para || [], cc: [], })), [enviados, perm]); /* 22/09 — lixeira: soft-delete só no site (excluido_em em emails_projeto), NUNCA mexe na caixa real via IMAP. Caixa de entrada vem de um fetch ao vivo (read-inbox), que não sabe de exclusões — por isso filtra aqui, contra a lista de ids já marcados como excluídos no banco. */ const [excluidos, setExcluidos] = React.useState([]); const carregarExcluidos = React.useCallback(() => { window.__VP_SB.sb.from('emails_projeto').select('id').not('excluido_em', 'is', null).limit(500) .then(({ data }) => setExcluidos((data || []).map((d) => d.id))); }, []); React.useEffect(() => { carregarExcluidos(); }, [carregarExcluidos]); const emailsVisiveis = React.useMemo(() => (perm === undefined || !meta.pronto) ? [] : emails.filter((e) => !excluidos.includes(e.id)).filter((e) => verOk(meta.dono[e.id] || null, (meta.atribuido || {})[e.id] || null)), [emails, excluidos, meta, perm]); /* 04/10 — triagem silenciosa (estilo JEV, só regras; autorizada pelo usuário): a decisão (assunto/departamento/ prioridade/confiança) é calculada no banco e só LIDA aqui (inbox-triagem.jsx). Esconde apenas e-mail automático com confiança suficiente (nunca apaga; "ver tudo" devolve) e destaca o que precisa de resposta. Sem classificação, a tela se comporta exatamente como antes. Não toca leitura/vínculo/envio/exclusão. */ const iaMapa = meta.ia; /* Fase 2 (04/10): lido/estrela POR PESSOA, troca de responsável, aviso ao responder e-mail de outro, pop-up de vínculo. */ const { estado, marcarLido, definirLido, alternarEstrela, arquivar, adiar } = (window.useInboxEstado || (() => ({ estado: {}, marcarLido() {}, definirLido() {}, alternarEstrela() {}, arquivar: async () => false, adiar: async () => false })))([...emails, ...enviados]); /* Fase 4A (04/10): marcadores (pessoal/equipe), arquivar e suspender POR PESSOA, spam compartilhado — ver inbox-organizar*.js */ const mk = (window.useInboxMarcadores || (() => ({ marcadores: [], porEmail: {}, pronto: true, criar: async () => 'Marcadores indisponíveis.', apagar: async () => null, aplicar: async () => null })))([...emails, ...enviados]); const [modalMarcador, setModalMarcador] = React.useState(false); const [, setTick] = React.useState(0); React.useEffect(() => { const t = setInterval(() => setTick((x) => x + 1), 60000); return () => clearInterval(t); }, []); // e-mail suspenso volta sozinho na hora marcada, com a tela aberta const naoLida = (m) => (window.InboxTriagem ? window.InboxTriagem.naoLidaPara(m.unread, estado[m.id]) : m.unread); const [atribuirAberto, setAtribuirAberto] = React.useState(false); const [avisoOutro, setAvisoOutro] = React.useState(null); // { modo, responsavel } const [popupVinculo, setPopupVinculo] = React.useState(null); // resultado de inboxBuscarSugestao const avisoConfirmado = React.useRef({}); // e-mails de outra pessoa que já confirmei responder const numeroForcado = React.useRef(null); const vinculoDecidido = React.useRef(false); const [foco, setFoco] = React.useState(true); const politicaDe = (m) => (window.InboxTriagem ? window.InboxTriagem.politica(iaMapa[m.id], { vinculado: m.numeroCotacao != null }) : 'normal'); const silenciosos = folder === 'inbox' ? emailsVisiveis.filter((m) => politicaDe(m) === 'silencioso') : []; const importantes = folder === 'inbox' ? emailsVisiveis.filter((m) => politicaDe(m) === 'precisa_de_voce').map((m) => ({ ...m, decisao: iaMapa[m.id] })) : []; /* Fase 2: responsável (dono ou atribuído), sugestão de cotação (JEV) e vínculo em 1 clique. */ const donoDe = (m) => (m ? ((m.dono !== undefined ? m.dono : meta.dono[m.id]) || null) : null); const atribuidoDe = (m) => (m ? ((m.atribuido !== undefined ? m.atribuido : (meta.atribuido || {})[m.id]) || null) : null); /* Fase 3 (04/10) — fluxo de lista estilo Gmail: pasta → pesquisa (operadores) → ordem → seleção em massa. Pasta + pesquisa olham o que já está carregado na tela (Caixa de entrada + Enviados); histórico completo = fase 4. */ const [prefs, atualizarPrefs] = (window.useInboxPrefs || (() => [{ densidade: 'padrao', painel: 'direita', ordem: 'padrao' }, () => {}]))(); const [configAberta, setConfigAberta] = React.useState(false); const [ajudaAba, setAjudaAba] = React.useState(null); // null | 'guia' | 'passo' const [novoInicial, setNovoInicial] = React.useState(null); // { para, assunto } — ex.: feedback const [selecionados, setSelecionados] = React.useState(() => new Set()); const eu = perm ? perm.eu : String((window.__VP_USER || {}).email || '').toLowerCase(); const ehEnviado = (m) => !!m && m._pasta === 'sent'; const respDe = (m) => (window.InboxTriagem ? window.InboxTriagem.responsavelDe(donoDe(m), atribuidoDe(m)) : null); const estrelaDe = (m) => !!(estado[m.id] && estado[m.id].estrela); const todasLinhas = [...emailsVisiveis, ...enviadosNormalizados]; /* Fase 4C (04/10): CONVERSAS — uma linha por conversa (cabeçalho In-Reply-To; senão mesmo assunto + mesma ponta externa). Ações da barra (arquivar, suspender, spam, marcador, lida, excluir) agem na conversa toda; o e-mail aberto mostra as demais mensagens. */ const usaConversas = prefs.conversas !== false; const conv = (window.useInboxConversas || (() => ({ porId: {} })))(todasLinhas, usaConversas); const conversaDe = (m) => (usaConversas && m ? conv.porId[m.id] : null) || null; const expandirConv = (ids) => { const out = new Set(); (ids || []).forEach((id) => { const c = usaConversas ? conv.porId[id] : null; (c ? c.ids : [id]).forEach((x) => out.add(x)); }); return [...out]; }; const eMeu = (m) => !!respDe(m) && respDe(m) === eu; const semResp = (m) => !ehEnviado(m) && !donoDe(m) && !atribuidoDe(m); const O = window.InboxOrganizar; const spamDe = (m) => !!(meta.spam && meta.spam[m.id]); const marcadorPorId = Object.fromEntries((mk.marcadores || []).map((x) => [x.id, x])); const mkArvore = O ? O.arvoreMarcadores(mk.marcadores || []) : []; const capsOrg = { editar: pode('editar'), triagem: !perm || !!(perm.caps && perm.caps.triagem), ver_todos: !perm || !!(perm.caps && perm.caps.ver_todos) }; /* quem aparece em cada pasta (arquivado/suspenso/spam/marcador) vem de inbox-organizar-calc.js — regra única e testada */ const ctxPasta = { ehEnviado, estado: (m) => estado[m.id], spam: spamDe, eMeu, semResp, marcadores: (m) => mk.porEmail[m.id] || [], agora: new Date() }; const pastaLinhas = (id) => { const base = id === 'inbox' ? (foco ? emailsVisiveis.filter((m) => politicaDe(m) !== 'silencioso') : emailsVisiveis) : todasLinhas; return O ? base.filter((m) => O.visivelNaPasta(m, id, ctxPasta)) : base; }; const pastaEfetiva = buscando ? (consulta.em || 'all') : folder; // pesquisar sem "em:" olha todas as mensagens, como no Gmail const listaAtual = pastaLinhas(pastaEfetiva); // nos Enviados o remetente é a nossa caixa e a outra ponta é o destinatário (`de:` e `para:` precisam refletir isso) const paraBusca = (m) => ({ ...m, ...(ehEnviado(m) ? { from: 'suporte@vpsistema.com', fromName: 'VerticalParts' } : {}), naoLida: naoLida(m), estrela: estrelaDe(m), marcadoresNomes: (mk.porEmail[m.id] || []).map((id) => marcadorPorId[id] && marcadorPorId[id].nome).filter(Boolean) }); const listaFiltrada0 = buscando ? listaAtual.filter((m) => window.InboxBusca.aplicar(paraBusca(m), consulta)) : listaAtual; const listaOrdenada = window.InboxBusca ? window.InboxBusca.ordenar(listaFiltrada0, prefs.ordem, { naoLida, estrela: estrelaDe, importante: (m) => politicaDe(m) === 'precisa_de_voce' }) : listaFiltrada0; // uma linha por conversa: a primeira da ordem (a mais recente, ou a mais relevante pelo tipo de caixa) representa as demais const listaFiltrada = (() => { if (!usaConversas) return listaOrdenada; const vistos = new Set(); return listaOrdenada.filter((m) => { const c = conv.porId[m.id]; if (!c) return true; if (vistos.has(c.chave)) return false; vistos.add(c.chave); return true; }); })(); const naoLidaConv = (m) => { const c = conversaDe(m); return c ? c.ids.some((id) => { const x = todasLinhas.find((y) => y.id === id); return x && naoLida(x); }) : naoLida(m); }; const active = listaFiltrada.find((e) => e.id === activeId) || todasLinhas.find((e) => e.id === activeId); // o e-mail aberto continua aberto mesmo que a pesquisa o esconda /* "Pedir decisão" (04/10): decisão ligada ao e-mail aberto na Central de Decisões. Também é o destino do "Ver documento" do cartão (subsel = id do e-mail): abre o e-mail; se ele não está nas listas carregadas, pesquisa o assunto no histórico e abre. */ const [pedirDecisaoAberto, setPedirDecisaoAberto] = React.useState(false); const [precoEmailAberto, setPrecoEmailAberto] = React.useState(false); // "Extrair preço" (04/10): propõe preço/condições do e-mail do fornecedor; só grava após conferência const [tickDecisao, setTickDecisao] = React.useState(0); const decisoesDoEmail = (window.useDecisoesDoEmail || (() => []))(active ? active.id : null, tickDecisao); const idParaAbrir = typeof subsel === 'string' && /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(subsel) ? subsel : null; const buscouParaAbrir = React.useRef(null); React.useEffect(() => { if (!idParaAbrir || perm === undefined || loading) return; if (todasLinhas.some((m) => m.id === idParaAbrir)) { setFolder('all'); setActiveId(idParaAbrir); if (setSubsel) setSubsel(null); return; } if (buscouParaAbrir.current === idParaAbrir) return; buscouParaAbrir.current = idParaAbrir; window.__VP_SB.sb.from('emails_projeto').select('assunto').eq('id', idParaAbrir).maybeSingle().then(({ data }) => { if (data && data.assunto) setBusca('assunto:"' + String(data.assunto).replace(/["]/g, ' ').trim() + '"'); else { window.toast?.('Não encontrei este e-mail (pode ter sido excluído).', 'warning'); if (setSubsel) setSubsel(null); } }); }, [idParaAbrir, todasLinhas.length, perm, loading]); const nomeDe = (email) => { const p = ((perm && perm.colaboradores) || []).find((x) => String(x.email).toLowerCase() === String(email || '').toLowerCase()); return (p && p.nome) || email; }; const pontaAtiva = active ? (ehEnviado(active) ? (active.to || []).join(',') : active.from) : ''; const sugAtiva = (window.useSugestaoVinculo || (() => null))(active, pontaAtiva); const [vinculandoSug, setVinculandoSug] = React.useState(false); const vincularA = async (numero) => { if (!active) return; if (!pode('editar')) { window.toast?.('Sem permissão para vincular (alçada Inbox › Editar).', 'warning'); return; } setVinculandoSug(true); try { const { error } = await window.__VP_SB.sb.from('emails_projeto').update({ numero_cotacao: numero, vinculo_confianca: 'certo' }).eq('id', active.id); if (error) throw error; window.toast?.(`Vinculado à Cotação Nº ${numero}.`, 'success'); carregar(); carregarEnviados(); if (meta.recarregar) meta.recarregar(); } catch (e) { window.toast?.('Erro ao vincular: ' + (e.message || e), 'error'); } finally { setVinculandoSug(false); } }; /* 28/09 — pedido do usuário: campo de busca no Inbox (não existia nenhum, só filtro por pasta e por Nº Cotação pra vínculo manual). Filtro em memória sobre a lista já carregada (assunto/remetente/preview/nº cotação) — não é busca no histórico completo de emails_projeto, só na janela recente que read-inbox/Enviados já trazem. Limpa ao trocar de pasta pra não confundir "sem resultado" com "pasta vazia". */ /* 04/10 (fase 3): `busca`, `consulta` e `listaFiltrada` agora vivem no fluxo de lista mais acima (operadores estilo Gmail, inbox-busca-calc.js). A seleção em massa zera quando a pasta ou a pesquisa muda. */ React.useEffect(() => { setSelecionados(new Set()); }, [folder, busca]); const [respondendo, setRespondendo] = React.useState(false); const [modoCompose, setModoCompose] = React.useState('responder'); // 'responder' | 'responder-todos' | 'encaminhar' const [destinatarioEncaminhar, setDestinatarioEncaminhar] = React.useState(''); const [respostaTexto, setRespostaTexto] = React.useState(''); const [enviandoResposta, setEnviandoResposta] = React.useState(false); const [sugerindoIA, setSugerindoIA] = React.useState(false); const [vinculando, setVinculando] = React.useState(false); const [vincularInput, setVincularInput] = React.useState(''); const [salvandoVinculo, setSalvandoVinculo] = React.useState(false); const [anexosResposta, setAnexosResposta] = React.useState([]); const [gatilhoAberto, setGatilhoAberto] = React.useState(null); const [marcandoGatilho, setMarcandoGatilho] = React.useState(false); const [novoEmailAberto, setNovoEmailAberto] = React.useState(false); const carregar = React.useCallback(() => { setLoading(true); setErro(null); window.__VP_SB.sb.functions.invoke('read-inbox', { body: { limit: 25 } }).then(({ data, error }) => { if (error) { setErro(error.message || String(error)); setEmails([]); return; } if (data && data.error) { setErro(data.error); setEmails([]); return; } setEmails((data && data.messages) || []); }).catch((e) => setErro(e.message || String(e))).finally(() => setLoading(false)); }, []); React.useEffect(() => { carregar(); }, [carregar]); /* Realtime (28/09, área blindada — CLAUDE.md): o cron read-inbox-poll já grava resposta de fornecedor em emails_projeto (direcao='entrada') a cada 10 min mesmo sem ninguém com a tela aberta; sem isto, quem já estava com a Inbox aberta só via a resposta nova fechando e reabrindo a tela. NÃO troca a leitura por emails_projeto (isso sim mexeria na lógica de vínculo/matching) — só chama de novo o mesmíssimo `carregar` acima (a mesma chamada do refresh manual, via read-inbox/IMAP). `active` é só um id (linha ~1390), então a thread aberta e a resposta em digitação (`respondendo`/`respostaTexto`) não são afetadas por este refetch. */ React.useEffect(() => { const sb = window.__VP_SB?.sb; if (!sb) return; const canal = sb.channel('emails-projeto-entrada') .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'emails_projeto', filter: 'direcao=eq.entrada' }, carregar) .subscribe(); return () => sb.removeChannel(canal); }, [carregar]); /* 11/09 — achado real do usuário: mandou o RFQ pra fornecedora, não apareceu em lugar nenhum ("não vi ela na inbox") — na verdade tinha sido enviado com sucesso (confirmado em emails_projeto), só que "Enviados" era um placeholder que nunca lia dado real. E-mail que a gente manda não passa pelo IMAP de entrada — vem direto de emails_projeto (direcao='saida'), gravado pelo próprio send-email. */ /* 14/09 — achado real (auditoria do tour.md): anexos de "Enviados" nunca tinham link de download (badge sem href), mesmo com o arquivo salvo de verdade no Storage — só a Caixa de Entrada gerava link (via read-inbox, que assina com a chave de serviço do Supabase, não a chave anônima). O bucket emails-anexos nega SELECT pra anon (só authenticated/chave de serviço), então o navegador não consegue assinar sozinho: precisa da edge function sign-email-anexos, que faz exatamente o mesmo que read-inbox já fazia pros anexos recebidos. */ const carregarEnviados = React.useCallback(() => { setCarregandoEnviados(true); window.__VP_SB.sb.from('emails_projeto').select('*').eq('direcao', 'saida').is('excluido_em', null) .order('data_mensagem', { ascending: false }).limit(limiteEnv) .then(async ({ data }) => { const rows = data || []; const paths = [...new Set(rows.flatMap((r) => (r.anexos || []).map((a) => a.path).filter(Boolean)))]; if (!paths.length) { setEnviados(rows); return; } try { const { data: signed, error } = await window.__VP_SB.sb.functions.invoke('sign-email-anexos', { body: { paths } }); const urls = (!error && signed && signed.urls) || {}; setEnviados(rows.map((r) => ({ ...r, anexos: (r.anexos || []).map((a) => ({ ...a, url: (a.path && urls[a.path]) || null })), }))); } catch (e) { console.warn('[Inbox] falha ao assinar anexos de Enviados', e); setEnviados(rows); } }).finally(() => setCarregandoEnviados(false)); }, [limiteEnv]); React.useEffect(() => { carregarEnviados(); }, [carregarEnviados]); React.useEffect(() => { setRespondendo(false); setModoCompose('responder'); setDestinatarioEncaminhar(''); setRespostaTexto(''); setVinculando(false); setVincularInput(''); setAnexosResposta([]); setGatilhoAberto(null); }, [activeId]); /* Sugestão de gatilho (10/09) — não dispara sozinho: um e-mail chegando não prova que É a resposta do fornecedor (pode ser só "recebido, aguarde"). Só avisa quando existe um nó SLA_FORNECEDOR aberto pra essa cotação, e deixa o vendedor decidir clicando. */ React.useEffect(() => { if (!active || active.numeroCotacao == null) { setGatilhoAberto(null); return; } let cancelado = false; window.__VP_SB.sb.from('gatilhos').select('id, alvo_id') .eq('numero_cotacao', active.numeroCotacao).eq('evento_key', 'SLA_FORNECEDOR').is('concluido_em', null).maybeSingle() .then(({ data }) => { if (!cancelado) setGatilhoAberto(data || null); }); return () => { cancelado = true; }; }, [active && active.id, active && active.numeroCotacao]); /* 22/09 — pedido do usuário: botão de lixeira, mas NUNCA exclui sem perguntar antes. Soft-delete (excluido_em) — o e-mail continua na caixa real (IMAP)/no banco, só some da lista do site. */ const excluirEmail = async (ev, email) => { if (ev) ev.stopPropagation(); if (!email) return; if (!podeExcluirDe(email.dono !== undefined ? email.dono : meta.dono[email.id])) { window.toast?.('Você não tem permissão para excluir este e-mail (só o dono, ou quem tem a alçada "Exclui e-mails de outras pessoas").', 'warning'); return; } const assunto = email.subject || '(sem assunto)'; const cv = conversaDe(email); if (!window.confirm(`Tem certeza que deseja excluir este e-mail?${cv && cv.total > 1 ? `\n\n(Só esta mensagem — a conversa tem ${cv.total}. Para a conversa toda, marque a linha e use Excluir na barra.)` : ''}\n\n"${assunto}"\n\nEle continua existindo na caixa de e-mail real — isso só remove da lista do site.`)) return; try { const user = window.__VP_USER || {}; const { error } = await window.__VP_SB.sb.from('emails_projeto') .update({ excluido_em: new Date().toISOString(), excluido_por: user.email || null }) .eq('id', email.id); if (error) throw error; if (ehEnviado(email)) setEnviados((prev) => prev.filter((e) => e.id !== email.id)); else setExcluidos((prev) => [...prev, email.id]); if (activeId === email.id) setActiveId(null); window.toast?.('E-mail excluído da lista.', 'success'); if (window.VPLog) window.VPLog.registrar({ modulo: 'Inbox de E-mail', acao: 'Excluiu e-mail da lista (soft-delete)', alvo: assunto, alvo_id: email.id, }); } catch (e) { window.toast?.('Erro ao excluir: ' + e.message, 'error'); } }; const marcarComoRespostaFornecedor = async () => { if (!active || !gatilhoAberto) return; setMarcandoGatilho(true); try { await window.EventosFluxo.registrar({ evento: 'FORNECEDOR_RESPONDEU', numeroCotacao: active.numeroCotacao, alvoId: gatilhoAberto.alvo_id || null, }); window.toast?.('Marcado — gatilho "Aguardando resposta do Fornecedor" fechado.', 'success'); setGatilhoAberto(null); } catch (e) { window.toast?.('Erro ao marcar gatilho: ' + (e.message || e), 'error'); } finally { setMarcandoGatilho(false); } }; const lerArquivoBase64 = (file) => new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(String(reader.result).split(',')[1] || ''); reader.onerror = reject; reader.readAsDataURL(file); }); const anexarArquivos = async (fileList) => { const arquivos = Array.from(fileList || []); if (!arquivos.length) return; const totalAtual = anexosResposta.reduce((s, a) => s + a.size, 0); const totalNovo = arquivos.reduce((s, f) => s + f.size, 0); if (totalAtual + totalNovo > MAX_ANEXO_TOTAL) { window.toast?.(`Anexos somam mais de ${MAX_ANEXO_TOTAL / 1024 / 1024}MB — limite real do ambiente de envio (confirmado em teste). Remova algum antes de adicionar mais.`, 'warning'); return; } const novos = await Promise.all(arquivos.map(async (f) => ({ filename: f.name, contentType: f.type || 'application/octet-stream', size: f.size, base64: await lerArquivoBase64(f), }))); setAnexosResposta((prev) => [...prev, ...novos]); }; const verNaLinhaDoTempo = (e, numeroCotacao) => { e.stopPropagation(); if (setSubsel) setSubsel(numeroCotacao); setRoute('linha-do-tempo'); }; /* 10/09 — "Responder"/"Vincular" eram botões desabilitados desde que o Inbox foi criado, só com título "em desenvolvimento". Pedido do usuário (com print do site em produção): precisa funcionar de verdade. Responder reusa a mesma send-email (mesma caixa suporte@ vpsistema.com); se o e-mail original já estava vinculado a uma cotação, a resposta herda o vínculo automaticamente. */ const NOSSO_EMAIL = 'suporte@vpsistema.com'; // caixa própria — nunca incluir como destinatário em "responder a todos" const enviarCompose = async () => { if (!active || !respostaTexto.trim()) return; if (modoCompose === 'encaminhar' && !destinatarioEncaminhar.trim()) { window.toast?.('Digite o e-mail de quem vai receber o encaminhamento.', 'warning'); return; } setEnviandoResposta(true); try { const sb = window.__VP_SB.sb; let to, subject, text; if (modoCompose === 'encaminhar') { to = destinatarioEncaminhar.trim(); subject = /^fwd:/i.test(active.subject || '') ? active.subject : `Fwd: ${active.subject || ''}`; text = `${respostaTexto}\n\n---------- Mensagem encaminhada ----------\nDe: ${active.fromName || active.from} <${active.from}>\nAssunto: ${active.subject}\n\n${active.preview || ''}`; } else if (modoCompose === 'responder-todos') { const todos = [active.from, ...(active.to || []), ...(active.cc || [])] .map((e) => String(e).toLowerCase()) .filter((e, i, arr) => e && e !== NOSSO_EMAIL && arr.indexOf(e) === i); to = todos.join(', '); subject = /^re:/i.test(active.subject || '') ? active.subject : `Re: ${active.subject || ''}`; text = respostaTexto; } else { to = active.from; subject = /^re:/i.test(active.subject || '') ? active.subject : `Re: ${active.subject || ''}`; text = respostaTexto; } const erroValidacao = validarEmails(to); if (erroValidacao) { window.toast?.(erroValidacao, 'warning'); setEnviandoResposta(false); return; } /* Fase 2 (JEV): sem Nº de cotação, sugere uma — o pop-up só aparece se há evidência (forte/perguntar). */ if (active.numeroCotacao == null && numeroForcado.current == null && !vinculoDecidido.current && window.inboxBuscarSugestao) { const r = await window.inboxBuscarSugestao(modoCompose === 'encaminhar' ? to : active.from, subject); if (r.politica !== 'silencio') { setPopupVinculo(r); setEnviandoResposta(false); return; } } const numeroEfetivo = active.numeroCotacao ?? numeroForcado.current ?? undefined; /* 07/10 — resposta a e-mail de cotação a fornecedor herda a ligação (aparece também nas Tratativas) */ const refForn = modoCompose !== 'encaminhar' ? await inboxRefCotacaoFornecedor(sb, active) : null; const { data, error } = await sb.functions.invoke('send-email', { body: { to, subject, text, numeroCotacao: numeroEfetivo, referenciaTipo: refForn ? 'tratativa_cotacao' : (numeroEfetivo != null ? 'resposta_inbox' : undefined), referenciaId: refForn ? refForn.id : undefined, attachments: anexosResposta.length ? anexosResposta.map((a) => ({ filename: a.filename, contentType: a.contentType, base64: a.base64 })) : undefined, }, }); if (error) { window.toast?.('Erro ao enviar: ' + await extrairErroFuncao(error), 'error'); return; } if (data && data.avisoPersistencia) window.toast?.(data.avisoPersistencia, 'warning'); window.toast?.(modoCompose === 'encaminhar' ? 'E-mail encaminhado.' : 'Resposta enviada.', 'success'); /* Fase 2: vínculo confirmado no pop-up vale também para o e-mail original; e quem era o responsável é avisado. */ if (numeroForcado.current != null && !ehEnviado(active)) { sb.from('emails_projeto').update({ numero_cotacao: numeroForcado.current, vinculo_confianca: 'certo' }).eq('id', active.id).then(() => { if (meta.recarregar) meta.recarregar(); }); } numeroForcado.current = null; vinculoDecidido.current = false; const respAnterior = window.InboxTriagem ? window.InboxTriagem.avisoOutroDono({ dono: donoDe(active), atribuido: atribuidoDe(active), eu: perm ? perm.eu : String((window.__VP_USER || {}).email || '').toLowerCase() }) : null; if (respAnterior && window.inboxNotificar) window.inboxNotificar(respAnterior, 'Responderam um e-mail seu', `${nomeDe(String((window.__VP_USER || {}).email || ''))} respondeu "${active.subject || '(sem assunto)'}".`); if (window.VPLog) window.VPLog.registrar({ modulo: 'Inbox de E-mail', acao: modoCompose === 'encaminhar' ? 'Encaminhou e-mail' : modoCompose === 'responder-todos' ? 'Respondeu a todos' : 'Respondeu e-mail', alvo: subject, alvo_id: active.id, detalhe: { para: to, numeroCotacao: active.numeroCotacao ?? null }, }); setRespondendo(false); setRespostaTexto(''); setAnexosResposta([]); setDestinatarioEncaminhar(''); carregar(); } catch (e) { window.toast?.('Erro ao enviar: ' + await extrairErroFuncao(e), 'error'); } finally { setEnviandoResposta(false); } }; const abrirCompose = (modo) => { if (!pode('editar')) { window.toast?.('Sem permissão para responder ou encaminhar (alçada Inbox › Editar).', 'warning'); return; } /* Fase 2: e-mail de OUTRA pessoa (dono ou atribuído) → aviso antes de responder; o responsável é avisado depois do envio. */ const outroResp = active && window.InboxTriagem ? window.InboxTriagem.avisoOutroDono({ dono: donoDe(active), atribuido: atribuidoDe(active), eu: perm ? perm.eu : String((window.__VP_USER || {}).email || '').toLowerCase() }) : null; if (outroResp && !avisoConfirmado.current[active.id]) { setAvisoOutro({ modo, responsavel: outroResp }); return; } setModoCompose(modo); setRespondendo(true); setVinculando(false); if (modo !== 'encaminhar') setDestinatarioEncaminhar(''); }; /* Sugestão de resposta por IA (10/09) — pedido do usuário, botão que já existia desabilitado. Manda o corpo real do e-mail (texto puro, sem tags HTML) pra suggest-email-reply e só preenche o campo — o vendedor sempre revisa/edita antes de enviar, nunca envia sozinho. */ const sugerirResposta = async () => { if (!active) return; if (!pode('editar')) { window.toast?.('Sem permissão para responder (alçada Inbox › Editar).', 'warning'); return; } const outroResp = window.InboxTriagem ? window.InboxTriagem.avisoOutroDono({ dono: donoDe(active), atribuido: atribuidoDe(active), eu: perm ? perm.eu : String((window.__VP_USER || {}).email || '').toLowerCase() }) : null; if (outroResp && !avisoConfirmado.current[active.id]) { setAvisoOutro({ modo: 'responder', responsavel: outroResp }); return; } setSugerindoIA(true); try { const sb = window.__VP_SB.sb; const bodyText = active.preview || (active.html || '').replace(/<[^>]+>/g, ' '); const { data, error } = await sb.functions.invoke('suggest-email-reply', { body: { subject: active.subject, fromName: active.fromName, from: active.from, bodyText, numeroCotacao: active.numeroCotacao ?? undefined }, }); if (error) throw error; if (data && data.error) throw new Error(data.error); setModoCompose((m) => (m === 'encaminhar' ? m : 'responder')); setRespondendo(true); setRespostaTexto(data.sugestao || ''); window.toast?.('Sugestão gerada — revise antes de enviar.', 'success'); } catch (e) { window.toast?.('Erro ao sugerir resposta: ' + (e.message || e), 'error'); } finally { setSugerindoIA(false); } }; /* Vínculo manual — cobre o caso do vínculo automático (Message-ID ou regex no assunto) não ter achado nada, ou ter achado errado. Marca como 'certo' porque é confirmação humana, mais confiável que qualquer heurística automática. */ const salvarVinculo = async () => { if (!active) return; if (!pode('editar')) { window.toast?.('Sem permissão para vincular (alçada Inbox › Editar).', 'warning'); return; } const numero = parseInt(String(vincularInput).replace(/\D/g, ''), 10); if (!numero) { window.toast?.('Digite um Nº Cotação válido (ex.: 950).', 'warning'); return; } setSalvandoVinculo(true); try { const sb = window.__VP_SB.sb; const { data: existe } = await sb.from('formularios_elevador').select('numero_cotacao').eq('numero_cotacao', numero).maybeSingle(); if (!existe) { window.toast?.(`Não existe Cotação Nº ${numero} no sistema.`, 'error'); return; } const { error } = await sb.from('emails_projeto').update({ numero_cotacao: numero, vinculo_confianca: 'certo' }).eq('id', active.id); if (error) throw error; window.toast?.(`Vinculado à Cotação Nº ${numero}.`, 'success'); setVinculando(false); setVincularInput(''); carregar(); } catch (e) { window.toast?.('Erro ao vincular: ' + (e.message || e), 'error'); } finally { setSalvandoVinculo(false); } }; /* ---- Fase 3: ações do layout Gmail (todas funcionam com o backend de hoje) ---- */ const abrirEscrever = () => { if (!pode('criar')) { window.toast?.('Sem permissão para escrever e-mails (alçada Inbox › Criar).', 'warning'); return; } setNovoInicial(null); setNovoEmailAberto(true); }; const abrirAjuda = (aba) => { if (aba === 'feedback') { // feedback vira um e-mail para a caixa de suporte (mesmo fluxo de envio, fica no histórico) if (!pode('criar')) { window.toast?.('Sem permissão para escrever e-mails (alçada Inbox › Criar).', 'warning'); return; } setNovoInicial({ para: 'suporte@vpsistema.com', assunto: '[Feedback Inbox] ' }); setNovoEmailAberto(true); return; } setAjudaAba(aba); }; const alternarSel = (id) => setSelecionados((prev) => { const n = new Set(prev); if (n.has(id)) n.delete(id); else n.add(id); return n; }); const alternarTodas = () => setSelecionados(listaFiltrada.length > 0 && listaFiltrada.every((m) => selecionados.has(m.id)) ? new Set() : new Set(listaFiltrada.map((m) => m.id))); const marcarSelecionados = (lido) => { if (!pode('editar')) { window.toast?.('Sem permissão (alçada Inbox › Editar).', 'warning'); return; } const n = selecionados.size; expandirConv([...selecionados]).forEach((id) => definirLido(id, lido)); setSelecionados(new Set()); window.toast?.(`${n} e-mail(s) marcado(s) como ${lido ? 'lido(s)' : 'não lido(s)'} para você.`, 'success'); }; const excluirSelecionados = async () => { const idsConv = new Set(expandirConv([...selecionados])); const linhas = todasLinhas.filter((m) => idsConv.has(m.id)); const permitidas = linhas.filter((m) => podeExcluirDe(donoDe(m))); if (!permitidas.length) { window.toast?.('Você não tem permissão para excluir os e-mails selecionados (só o dono, ou quem tem a alçada “Exclui e-mails de outras pessoas”).', 'warning'); return; } const pulados = linhas.length - permitidas.length; if (!window.confirm(`Excluir ${permitidas.length} e-mail(s) da lista?\n\nEles continuam na caixa de e-mail real — isso só remove da lista do site.${pulados ? `\n\n${pulados} selecionado(s) de outra pessoa será(ão) mantido(s).` : ''}`)) return; try { const ids = permitidas.map((m) => m.id); const { data, error } = await window.__VP_SB.sb.from('emails_projeto') .update({ excluido_em: new Date().toISOString(), excluido_por: (window.__VP_USER || {}).email || null }).in('id', ids).select('id'); if (error) throw error; const feitos = new Set((data || []).map((r) => r.id)); setEnviados((prev) => prev.filter((e) => !feitos.has(e.id))); setExcluidos((prev) => [...prev, ...feitos]); if (activeId && feitos.has(activeId)) setActiveId(null); setSelecionados(new Set()); if (window.VPLog) window.VPLog.registrar({ modulo: 'Inbox de E-mail', acao: 'Excluiu e-mails da lista (soft-delete, em massa)', alvo: `${feitos.size} e-mail(s)` }); window.toast?.(`${feitos.size} e-mail(s) excluído(s) da lista.`, 'success'); } catch (e) { window.toast?.('Erro ao excluir: ' + (e.message || e), 'error'); } }; /* ---- Fase 4A: Arquivar, Spam, Suspender e Marcadores. Agem nos e-mails MARCADOS ou, se nada estiver marcado, no e-mail ABERTO. ---- */ const alvosIds = expandirConv(selecionados.size ? [...selecionados] : (active ? [active.id] : [])); const alvosLinhas = alvosIds.map((id) => todasLinhas.find((m) => m.id === id)).filter(Boolean); const todosArquivados = alvosLinhas.length > 0 && alvosLinhas.every((m) => estado[m.id] && estado[m.id].arquivado); const concluirAcao = (msg) => { setSelecionados(new Set()); if (msg) window.toast?.(msg, 'success'); }; const semPermissaoEditar = () => { window.toast?.('Sem permissão (alçada Inbox › Editar).', 'warning'); }; const arquivarAlvos = async () => { if (!pode('editar')) return semPermissaoEditar(); const desfazer = todosArquivados; if (await arquivar(alvosIds, !desfazer)) { if (!desfazer && activeId && alvosIds.includes(activeId)) setActiveId(null); concluirAcao(`${alvosIds.length} e-mail(s) ${desfazer ? 'de volta à Caixa de entrada' : 'arquivado(s) — continuam em “Todos os e-mails”'}.`); } }; const spamAlvos = async (marcar) => { if (!pode('editar')) return semPermissaoEditar(); let ids = alvosIds; if (marcar) { const veredito = alvosLinhas.map((m) => ({ m, r: O.podeMarcarSpam(m, ehEnviado(m)) })); ids = veredito.filter((x) => x.r.ok).map((x) => x.m.id); const barrados = veredito.filter((x) => !x.r.ok); if (!ids.length) { window.toast?.(`Não dá para marcar como spam: ${barrados[0] ? barrados[0].r.motivo : 'nada selecionado'}.`, 'warning'); return; } if (barrados.length) window.toast?.(`${barrados.length} e-mail(s) ficaram de fora do spam (ligados a cotação/documento ou enviados por nós).`, 'info'); } try { const n = await window.inboxMarcarSpam(ids, marcar); if (meta.recarregar) meta.recarregar(); if (activeId && ids.includes(activeId)) setActiveId(null); concluirAcao(marcar ? `${n} e-mail(s) marcado(s) como spam (aparece em “Spam”, para todos).` : `${n} e-mail(s) tirado(s) do spam.`); } catch (e) { window.toast?.('Erro: ' + (e.message || e), 'error'); } }; const adiarAlvos = async (quando) => { if (!pode('editar')) return semPermissaoEditar(); if (await adiar(alvosIds, quando)) { if (quando && activeId && alvosIds.includes(activeId)) setActiveId(null); concluirAcao(quando ? `${alvosIds.length} e-mail(s) suspenso(s) até ${new Date(quando).toLocaleString('pt-BR', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' })}.` : 'Adiamento cancelado — de volta à Caixa de entrada.'); } }; const estadoMarcador = (id) => { if (!alvosIds.length) return 'nenhum'; const n = alvosIds.filter((e) => (mk.porEmail[e] || []).includes(id)).length; return n === 0 ? 'nenhum' : n === alvosIds.length ? 'todos' : 'alguns'; }; const aplicarMarcador = async (mc, st) => { if (!O.podeAplicarMarcador(mc, eu, capsOrg)) { window.toast?.('Você não pode usar este marcador.', 'warning'); return; } const err = await mk.aplicar(alvosIds, mc.id, st !== 'todos'); if (err) window.toast?.(err, 'error'); }; const moverPara = async (mc) => { if (!O.podeAplicarMarcador(mc, eu, capsOrg)) { window.toast?.('Você não pode usar este marcador.', 'warning'); return; } const err = await mk.aplicar(alvosIds, mc.id, true); if (err) { window.toast?.(err, 'error'); return; } await arquivar(alvosIds, true); if (activeId && alvosIds.includes(activeId)) setActiveId(null); concluirAcao(`${alvosIds.length} e-mail(s) movido(s) para “${mc.nome}”.`); }; const apagarMarcador = async (mc) => { if (!window.confirm(`Apagar o marcador “${mc.nome}”?\n\nOs e-mails não são apagados — só perdem este marcador.`)) return; const err = await mk.apagar(mc.id); if (err) { window.toast?.(err, 'error'); return; } if (folder === 'm:' + mc.id) setFolder('inbox'); window.toast?.('Marcador apagado.', 'success'); }; const contaPasta = (pasta, soNaoLidas) => (O ? todasLinhas.filter((m) => O.visivelNaPasta(m, pasta, ctxPasta) && (!soNaoLidas || naoLida(m))).length : 0); const mostrarTriagem = !perm || !!(perm.caps && (perm.caps.triagem || perm.caps.ver_todos)); const folders = [ { id: "inbox", label: "Caixa de entrada", icon: "mail", count: contaPasta('inbox', true) }, { id: "starred", label: "Com estrela", icon: "star" }, { id: "adiados", label: "Adiados", icon: "clock", count: contaPasta('adiados', false) }, { id: "mine", label: "Atribuídos a mim", icon: "users", count: contaPasta('mine', true) }, ...(mostrarTriagem ? [{ id: "triagem", label: "Sem responsável", icon: "inbox", count: contaPasta('triagem', true) }] : []), { id: "sent", label: "Enviados", icon: "send" }, { id: "all", label: "Todos os e-mails", icon: "layers" }, { id: "spam", label: "Spam", icon: "warning", count: contaPasta('spam', true) }, ]; if (perm && !pode('ver')) { return (

Inbox

Você não tem acesso ao Inbox. Peça ao administrador a alçada Inbox › Ver (Administração › Alçadas).

); } return (
Inbox {window.InboxBarraBusca && abrirAjuda('guia')}/>}
{erro ? Erro na conexão : Conectado}
{erro ? `Falha ao conectar: ${erro}` : 'Caixa suporte@vpsistema.com — compartilhada por Comercial, Compras e Importação.'}
{novoEmailAberto && { setNovoEmailAberto(false); setNovoInicial(null); }} onEnviado={() => { carregar(); carregarEnviados(); }}/>} {avisoOutro && window.InboxAvisoOutroDono && ( setAvisoOutro(null)} onConfirmar={() => { if (active) avisoConfirmado.current[active.id] = true; const m = avisoOutro.modo; setAvisoOutro(null); abrirCompose(m); }}/> )} {popupVinculo && window.InboxPopupVinculoEnvio && ( setPopupVinculo(null)} onSemVinculo={() => { vinculoDecidido.current = true; setPopupVinculo(null); enviarCompose(); }} onEscolher={(n) => { numeroForcado.current = n; vinculoDecidido.current = true; setPopupVinculo(null); enviarCompose(); }}/> )} {modalMarcador && window.InboxModalMarcador && ( setModalMarcador(false)}/> )} {precoEmailAberto && active && window.InboxModalPrecoEmail && ( setPrecoEmailAberto(false)} onRegistrado={() => { setPrecoEmailAberto(false); }}/> )} {pedirDecisaoAberto && active && window.InboxModalPedirDecisao && ( setPedirDecisaoAberto(false)} onCriada={() => setTickDecisao((t) => t + 1)}/> )} {atribuirAberto && active && window.InboxModalAtribuir && ( setAtribuirAberto(false)} onSalvo={() => { setAtribuirAberto(false); if (meta.recarregar) meta.recarregar(); carregarEnviados(); }}/> )}
{folders.map((f) => { const I = Icon[f.icon] || Icon.mail; return (
{ setBusca(''); setFolder(f.id); setActiveId(null); }}> {f.label} {f.count ? {f.count} : null}
); })} {window.InboxSecaoMarcadores && O && ( { setBusca(''); setFolder(id); setActiveId(null); }} onNovo={() => setModalMarcador(true)} contagem={(id) => todasLinhas.filter((m) => (mk.porEmail[m.id] || []).includes(id) && naoLida(m) && !spamDe(m)).length} podeGerir={(m) => O.podeGerirMarcador(m, eu, capsOrg)} onApagar={apagarMarcador}/> )}
{(prefs.painel !== 'sem' || !active) && (
{window.InboxToolbarLista && ( {pastaEfetiva === 'spam' ? : (<> )} {pastaEfetiva === 'adiados' ? : } moverPara(mc)} onNovo={() => setModalMarcador(true)} desabilitado={!pode('editar')}/> setModalMarcador(true)} desabilitado={!pode('editar')}/> ) : null} todasMarcadas={listaFiltrada.length > 0 && listaFiltrada.every((m) => selecionados.has(m.id))} onToggleTodas={alternarTodas} onLida={() => marcarSelecionados(true)} onNaoLida={() => marcarSelecionados(false)} onExcluir={excluirSelecionados} onAtualizar={() => { carregar(); carregarEnviados(); }} carregando={loading} podeEditar={pode('editar')}/> )}
{buscando ? 'Resultados da pesquisa' : (folders.find((f) => f.id === folder)?.label || folder)} {listaFiltrada.length}
{folder === "inbox" && !buscando && window.InboxFaixaImportante && ( setFoco((f) => !f)} onAbrir={setActiveId}/> )} {folder === "inbox" && !buscando && perm !== undefined && } {folder === "inbox" && !buscando && !loading && emails.length === 0 && (
{erro ? 'Não foi possível carregar' : 'Nenhuma mensagem'}
{erro || 'A caixa está vazia.'}
)} {pastaEfetiva === "sent" && !buscando && !carregandoEnviados && enviadosNormalizados.length === 0 && (
Nenhum e-mail enviado ainda
Aparece aqui assim que você mandar um pelo Responder, Escrever ou Cotação a Fornecedor.
)} {buscando && (hist.carregando || hist.entrada.length > 0 || hist.saida.length > 0) && (
{hist.carregando ? 'Pesquisando em todo o histórico…' : `Pesquisa no histórico completo: ${hist.entrada.length + hist.saida.length} resultado(s)${hist.truncado ? ' (mostrando os 100 mais recentes — refine a pesquisa)' : ''}.`}
)} {listaFiltrada.length === 0 && (buscando || (folder !== 'inbox' && folder !== 'sent')) && (
{buscando ? <>Nenhum resultado para “{busca}”. { ev.preventDefault(); setBusca(''); }}>Limpar pesquisa : folder === 'starred' ? 'Nenhum e-mail com estrela. Clique na ☆ de uma mensagem para marcá-la (só você vê).' : folder === 'mine' ? 'Nenhum e-mail atribuído a você.' : folder === 'triagem' ? 'Nenhum e-mail sem responsável. Tudo tem dono.' : folder === 'adiados' ? 'Nada suspenso. Use “Suspender” para um e-mail voltar à Caixa de entrada na hora que você escolher.' : folder === 'spam' ? 'Nenhum spam. E-mails ligados a cotação ou documento nunca vão para cá.' : String(folder).startsWith('m:') ? 'Nenhum e-mail com este marcador. Selecione e-mails e use “Marcadores”.' : 'Nenhuma mensagem.'}
)} {listaFiltrada.map((m) => { const sent = ehEnviado(m); const sel = selecionados.has(m.id); const est = estrelaDe(m); return (
{ setActiveId(m.id); marcarLido(m.id); }}> { ev.stopPropagation(); alternarEstrela(m.id, est); }}>{est ? '★' : '☆'} {m.fromName || m.from}{conversaDe(m) && conversaDe(m).total > 1 ? {conversaDe(m).total} : null} {m.subject}{m.preview ? — {String(m.preview).replace(/\s+/g, ' ').slice(0, 160)} : null} {m.anexos && m.anexos.length > 0 ? : null} {window.InboxChipsMarcadores && } {!sent && window.InboxChip && iaMapa[m.id] && } {m.numeroCotacao != null && ( verNaLinhaDoTempo(ev, m.numeroCotacao)} style={{ cursor: 'pointer' }}> Cotação Nº {m.numeroCotacao}{m.vinculoConfianca === 'provavel' ? ' (provável)' : ''} )} {INBOX_REFERENCIA_TIPO_LABEL[m.referenciaTipo] && {INBOX_REFERENCIA_TIPO_LABEL[m.referenciaTipo]}} {window.igQuando ? window.igQuando(m.date) : ''}
); })} {pastaEfetiva === 'sent' && !buscando && !carregandoEnviados && enviadosBase.length >= limiteEnv && (
)}
)} {(prefs.painel !== 'sem' || active) && (
{prefs.painel === 'sem' && active && (
)} {active ? ( <>

{active.subject}

{active.numeroCotacao != null && ( verNaLinhaDoTempo(ev, active.numeroCotacao)} style={{ cursor: 'pointer', marginTop: 6 }}> Ver na Linha do Tempo — Cotação Nº {active.numeroCotacao}{active.vinculoConfianca === 'provavel' ? ' (vínculo provável)' : ''} )} {INBOX_REFERENCIA_TIPO_LABEL[active.referenciaTipo] && ( {INBOX_REFERENCIA_TIPO_LABEL[active.referenciaTipo]} )} {(donoDe(active) || atribuidoDe(active)) ? (
Responsável: {nomeDe(atribuidoDe(active) || donoDe(active))} {atribuidoDe(active) && donoDe(active) && atribuidoDe(active) !== donoDe(active) ? <> · autor original: {nomeDe(donoDe(active))} : null}
) : (folder === 'inbox' &&
Sem responsável — fica na fila de triagem até alguém atribuir.
)} {window.InboxSugestaoBarra && } {window.InboxFaixaConversa && { setActiveId(id); marcarLido(id); }} quando={window.igQuando}/>} {gatilhoAberto && (
Nova mensagem na Cotação Nº {active.numeroCotacao} — o gatilho "Aguardando resposta do Fornecedor" ainda está aberto.
Confirme se este e-mail é a resposta técnica/comercial antes de marcar — um e-mail pode ser só "recebido, aguarde".
)}
{(active.fromName || active.from || "").split(/[\s.\-_]/).filter(Boolean).slice(0,2).map(w => (w[0]||"").toUpperCase()).join("") || "?"}
{active.fromName || active.from}
{active.from}
{active.date ? new Date(active.date).toLocaleString('pt-BR') : ''}
{perm && window.InboxVisibilidade && window.InboxVisibilidade.podeAtribuir(donoDe(active), atribuidoDe(active), perm) && ( )} {pode('editar') && !ehEnviado(active) && (active.numeroCotacao != null || active.referenciaTipo === 'cotacao_fornecedor') && window.InboxModalPrecoEmail && ( )} {INBOX_TIPOS_COTACAO_FORNECEDOR.includes(active.referenciaTipo) && ( )} {pode('editar') && window.InboxModalPedirDecisao && ( )}
{window.InboxFaixaDecisao && } {vinculando && (
setVincularInput(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && salvarVinculo()}/>
)}
{active.anexos && active.anexos.length > 0 && (
{active.anexos.map((a, i) => ( a.url ? ( {a.filename} ({Math.round((a.size || 0) / 1024)}kb) ) : ( {a.filename} ) ))}
)} {respondendo && (
{modoCompose === 'encaminhar' && ( setDestinatarioEncaminhar(e.target.value)}/> )} {modoCompose === 'responder-todos' && (
Para: {[active.from, ...(active.to || []), ...(active.cc || [])].map((e) => String(e).toLowerCase()).filter((e, i, arr) => e && e !== NOSSO_EMAIL && arr.indexOf(e) === i).join(', ')}
)}