/* ============================================================ contrato-editor.jsx — Editor do Contrato (Cliente | Montador) Layout IDÊNTICO ao PropostaEditor: topbar · tipo-tabs · pe__main (sidenav + form) · preview ============================================================ */ /* ---------- helpers ---------- */ function dataBR(iso) { if (!iso) return "__ de __________ de ____"; const [a, m, d] = iso.split('-'); const meses = ["janeiro","fevereiro","março","abril","maio","junho","julho","agosto","setembro","outubro","novembro","dezembro"]; return `${parseInt(d)} de ${meses[parseInt(m)-1]} de ${a}`; } const UF_LIST = ["AC","AL","AP","AM","BA","CE","DF","ES","GO","MA","MT","MS","MG","PA","PB","PR","PE","PI","RJ","RN","RS","RO","RR","SC","SP","SE","TO"]; /* parse "230.000,00" → 230000 ; format 92000 → "92.000,00" */ function parseBRL(s) { if (s == null || s === '') return 0; const n = parseFloat(String(s).replace(/\./g, '').replace(',', '.')); return isNaN(n) ? 0 : n; } function fmtBRLnum(n) { if (!isFinite(n)) return ''; return n.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); } /* valor da parcela = % × valor total */ function calcParcela(pct, total) { const p = parseFloat(String(pct).replace(',', '.')); const t = parseBRL(total); if (!p || !t) return ''; return fmtBRLnum(t * p / 100); } function makeDefaultDados(contrato) { const d = contrato?.dados || {}; const hoje = new Date().toISOString().slice(0,10); return { numero: d.numero || contrato?.id || '', dataEmissao: d.dataEmissao || contrato?.issued_date || hoje, propostaRef: d.propostaRef || contrato?.project_id || '', advogado: d.advogado || contrato?.lawyer || '', razaoSocial: d.razaoSocial || contrato?.client || '', cnpj: d.cnpj || '', logradouro: d.logradouro || '', numero_end: d.numero_end || '', bairro: d.bairro || '', cidade: d.cidade || '', estado: d.estado || 'SP', cep: d.cep || '', responsavel: d.responsavel || '', rg: d.rg || '', cpf: d.cpf || '', nacionalidade: d.nacionalidade || 'brasileiro(a)', estadoCivil: d.estadoCivil || '', profissao: d.profissao || 'empresário(a)', endRespRua: d.endRespRua || '', endRespNumero: d.endRespNumero || '', endRespBairro: d.endRespBairro || '', endRespCidade: d.endRespCidade || '', endRespEstado: d.endRespEstado || 'SP', qtdEquip: d.qtdEquip || '1', modeloEquip: d.modeloEquip || '', entregaRua: d.entregaRua || '', entregaNum: d.entregaNum || '', entregaBairro: d.entregaBairro || '', entregaCidade: d.entregaCidade || '', entregaEstado: d.entregaEstado || 'SP', entregaCep: d.entregaCep || '', valorTotal: d.valorTotal || '', valorExtenso: d.valorExtenso || '', parcelas: d.parcelas || [ { desc: 'Sinal — assinatura do contrato', pct: '40', valor: '' }, { desc: '1ª Parcela', pct: '', valor: '' }, { desc: '2ª Parcela', pct: '', valor: '' }, { desc: '3ª Parcela', pct: '', valor: '' }, ], cidadeAss: d.cidadeAss || 'São Paulo', dataAss: d.dataAss || hoje, test1Nome: d.test1Nome || '', test1Cpf: d.test1Cpf || '', test2Nome: d.test2Nome || '', test2Cpf: d.test2Cpf || '', }; } /* ---------- Seções de navegação ---------- */ const SECOES_CLIENTE = [ { id: 'dados', title: 'Dados do Contrato', icon: 'fileText', group: 'IDENTIFICAÇÃO' }, { id: 'comprador', title: 'Comprador', icon: 'user', group: 'IDENTIFICAÇÃO' }, { id: 'objeto', title: 'Objeto do Contrato', icon: 'package', group: 'ESCOPO' }, { id: 'preco', title: 'Preço e Pagamento', icon: 'dollar', group: 'COMERCIAL' }, { id: 'assinatura',title: 'Assinatura das Partes', icon: 'signature', group: 'FORMALIZAÇÃO' }, ]; function fillPct(dados) { const checks = [ dados.numero, dados.dataEmissao, dados.razaoSocial, dados.cnpj, dados.logradouro, dados.responsavel, dados.cpf, dados.modeloEquip, dados.entregaRua, dados.valorTotal, dados.valorExtenso, dados.cidadeAss, dados.dataAss, ]; const filled = checks.filter(Boolean).length; return Math.round((filled / checks.length) * 100); } function sectionFill(id, dados) { const checks = { dados: [dados.numero, dados.dataEmissao, dados.propostaRef], comprador: [dados.razaoSocial, dados.cnpj, dados.logradouro, dados.responsavel, dados.cpf], objeto: [dados.modeloEquip, dados.entregaRua, dados.qtdEquip], preco: [dados.valorTotal, dados.valorExtenso], assinatura:[dados.cidadeAss, dados.dataAss], }; const arr = checks[id] || []; const done = arr.filter(Boolean).length; if (done === arr.length && arr.length > 0) return 'full'; if (done > 0) return 'partial'; return 'empty'; } /* ============================================================ ContratoEditorPage — full-page editor (idêntico ao PropostaEditor) ============================================================ */ function ContratoEditorPage({ contrato, setRoute, onSaved }) { const [dados, setDados] = React.useState(() => makeDefaultDados(contrato)); const [tipoContrato] = React.useState(contrato?.tipo_contrato || 'cliente'); const [activeSection, setActiveSection] = React.useState('dados'); const [collapsed, setCollapsed] = React.useState({}); const [saving, setSaving] = React.useState(false); const [savedAt, setSavedAt] = React.useState(Date.now()); const [tick, setTick] = React.useState(0); const [propostas, setPropostas] = React.useState([]); const formRef = React.useRef(null); // Tick para "salvado há Xs" React.useEffect(() => { const t = setInterval(() => setTick(p => p+1), 5000); return () => clearInterval(t); }, []); // Carrega lista de propostas (cotações) para o autocompletar React.useEffect(() => { window.__VP_SB.sb.from('cotacoes').select('id,building,total,lead_id').order('date', { ascending: false }) .then(({ data }) => setPropostas(data || [])); }, []); // Herda dados da proposta (cotação + lead) ao preencher "Proposta de Referência" const herdarDaProposta = async (ref) => { const r = (ref || '').trim(); if (!r) return; const { data: cot } = await window.__VP_SB.sb.from('cotacoes').select('*').eq('id', r).maybeSingle(); if (!cot) return; // referência livre — sem correspondência, não faz nada let lead = null; if (cot.lead_id) { const lr = await window.__VP_SB.sb.from('leads').select('*').eq('id', cot.lead_id).maybeSingle(); lead = lr.data; } setDados(p => { const total = cot.total ? fmtBRLnum(cot.total) : p.valorTotal; const next = { ...p, razaoSocial: p.razaoSocial || cot.building || '', responsavel: p.responsavel || (lead?.contact || ''), modeloEquip: p.modeloEquip || (lead?.equip || ''), valorTotal: p.valorTotal || total || '', }; // recalcula parcelas com o novo total herdado if (!p.valorTotal && total) { next.parcelas = p.parcelas.map(par => ({ ...par, valor: calcParcela(par.pct, total) })); } return next; }); window.toast(`Dados herdados da proposta ${r}${lead ? ' (lead '+cot.lead_id+')' : ''}.`, 'success'); }; // Active section follows scroll React.useEffect(() => { const form = formRef.current; if (!form) return; const handler = () => { const top = form.scrollTop; let best = SECOES_CLIENTE[0].id; for (const s of SECOES_CLIENTE) { const el = document.getElementById('csec-' + s.id); if (el && el.offsetTop - 100 <= top) best = s.id; } setActiveSection(best); }; form.addEventListener('scroll', handler, { passive: true }); return () => form.removeEventListener('scroll', handler); }, []); const set = (k, v) => setDados(p => ({ ...p, [k]: v })); // valorTotal muda → recalcula o valor de todas as parcelas (% × total) const setValorTotal = (v) => setDados(p => ({ ...p, valorTotal: v, parcelas: p.parcelas.map(par => ({ ...par, valor: calcParcela(par.pct, v) })), })); // parcela muda → se for o %, recalcula seu valor automaticamente const setParcela = (i, k, v) => setDados(p => { const pars = [...p.parcelas]; pars[i] = { ...pars[i], [k]: v }; if (k === 'pct') pars[i].valor = calcParcela(v, p.valorTotal); return { ...p, parcelas: pars }; }); const addParcela = () => setDados(p => ({ ...p, parcelas: [...p.parcelas, { desc: `${p.parcelas.length}ª Parcela`, pct: '', valor: '' }] })); const removeParcela = (i) => setDados(p => ({ ...p, parcelas: p.parcelas.filter((_,idx) => idx !== i) })); const jump = (id) => { const el = document.getElementById('csec-' + id); if (el && formRef.current) formRef.current.scrollTo({ top: el.offsetTop - 20, behavior: 'smooth' }); setActiveSection(id); }; const save = async (novoStatus) => { setSaving(true); const upd = { dados, client: dados.razaoSocial || contrato?.client, project_id: dados.propostaRef || contrato?.project_id, lawyer: dados.advogado || contrato?.lawyer, value: dados.valorTotal ? parseFloat(dados.valorTotal.replace(/\./g,'').replace(',','.')) : contrato?.value, ...(novoStatus ? { status: novoStatus } : {}), }; const { error } = await window.__VP_SB.sb.from('contratos_venda_equipamentos').update(upd).eq('id', contrato.id); setSaving(false); if (error) return window.toast('Erro ao salvar: ' + error.message, 'error'); setSavedAt(Date.now()); if (novoStatus) window.toast(novoStatus === 'Em assinatura digital' ? 'Enviado para assinatura!' : 'Marcado como assinado — Compra desbloqueada!', 'success'); onSaved?.(); }; const pct = fillPct(dados); const fDone = SECOES_CLIENTE.filter(s => sectionFill(s.id, dados) === 'full').length; const preenchido = dados.razaoSocial && dados.cnpj && dados.modeloEquip && dados.valorTotal; // Groups for sidenav const groups = {}; SECOES_CLIENTE.forEach(s => { if (!groups[s.group]) groups[s.group] = []; groups[s.group].push(s); }); return (
{/* ===== TOP BAR ===== */}
Última edição: {Math.max(0, Math.floor((Date.now()-savedAt)/1000))}s atrás ● Salvamento ativo
Editor de Contrato

{contrato?.id || 'Novo Contrato'} {dados.razaoSocial || 'Sem cliente'} · {dados.propostaRef ? 'Proposta '+dados.propostaRef : 'Sem proposta'}

{/* TIPO TABS — Cliente | Montador */}
{/* ===== BODY (pe layout) ===== */}
{/* SIDENAV */} {/* FORM */}
setCollapsed(c => ({ ...c, dados: !c.dados }))}> setCollapsed(c => ({ ...c, comprador: !c.comprador }))}> setCollapsed(c => ({ ...c, objeto: !c.objeto }))}> setCollapsed(c => ({ ...c, preco: !c.preco }))}> setCollapsed(c => ({ ...c, assinatura: !c.assinatura }))}>
Salvo · {Math.max(0, Math.floor((Date.now()-savedAt)/1000))}s atrás
{/* PREVIEW */} save('Assinado')}/>
); } /* ---------- CSecao — igual ao PESection do PropostaEditor ---------- */ function CSecao({ id, num, title, sub, fill, collapsed, onToggle, children }) { const fillColor = fill === 'full' ? 'var(--vp-success)' : fill === 'partial' ? 'var(--vp-warning-ink)' : 'var(--border-strong)'; return (
{num}

{title}

{sub &&
{sub}
}
{React.createElement(collapsed ? Icon.chevDown : Icon.chevUp, { size: 14, color: 'var(--fg3)' })}
{!collapsed &&
{children}
}
); } /* ---------- Sub-formulários ---------- */ function SF_Dados({ dados, set, propostas = [], onInherit }) { return (
set('numero', v)} ph="CTR-001/2026"/>
set('dataEmissao', v)}/>
{ const v = e.target.value; set('propostaRef', v); // seleção via datalist (casa exatamente com uma proposta) → herda na hora if (onInherit && propostas.some(p => p.id === v)) onInherit(v); }} onBlur={e => onInherit && onInherit(e.target.value)}/> {propostas.map(p => ( ))} Selecione/insira a proposta e saia do campo — cliente, valor, responsável e equipamento serão preenchidos.
set('advogado', v)} ph="Nome do advogado"/>
); } function SF_Comprador({ dados, set }) { return (
set('razaoSocial', v)} ph="EMPRESA LTDA"/> set('cnpj', v)} ph="XX.XXX.XXX/XXXX-XX"/>
Endereço da Empresa
set('logradouro', v)} ph="Rua, Av…"/> set('numero_end', v)} ph="123"/>
set('bairro', v)}/> set('cidade', v)}/> set('estado', v)}/>
set('cep', v)} ph="XX.XXX-XX"/>
Representante Legal
set('responsavel', v)}/>
set('nacionalidade', v)}/> set('estadoCivil', v)}/> set('profissao', v)}/>
set('rg', v)} ph="XX.XXX.XXX-X"/> set('cpf', v)} ph="XXX.XXX.XXX-XX"/>
); } function SF_Objeto({ dados, set }) { return (
set('qtdEquip', v)} ph="1"/> set('propostaRef', v)} ph="PR-2026-001"/>