patch({ slug: v.toLowerCase().replace(/[^a-z0-9-_]/g, '-') })}
placeholder="Ex.: empresa-acme"
style={{ minWidth: 200, flex: 1 }}
/>
patch({ linkMode: v })}
options={[
{ value: 'short', label: 'Link Curto (Recomendado)' },
{ value: 'full', label: 'Link Completo (Offline / Embarcado)' }
]}
style={{ maxWidth: 220 }}
/>
set('expiraDias', Number(v))} options={[
{ value: '3', label: '3 dias' }, { value: '7', label: '7 dias' }, { value: '10', label: '10 dias' }, { value: '30', label: '30 dias' }, { value: '0', label: 'Nunca' }]} style={{ maxWidth: 160 }} />
set('senha', v)} placeholder="Sem senha" style={{ maxWidth: 180 }} />
set('download', v)} label="Permitir download" />
set('impressao', v)} label="Permitir impressão" />
Acessos ({(link.views || []).length})
{(link.views || []).length === 0
?
Nenhum acesso ainda — cada abertura da proposta é registrada aqui.
:
{link.views.slice().reverse().map((v, i) => (
{new Date(v.ts).toLocaleString('pt-BR')}{v.device}
))}
}
);
}
function PropostasPage({ db, update, highlight, go }) {
const [open, setOpen] = React.useState(highlight || null);
const [confirm, setConfirm] = React.useState(null);
const [copied, setCopied] = React.useState(null);
const [manual, setManual] = React.useState(null);
const patchP = (id, changes) => {
const nextPropostas = db.propostas.map(p => p.id === id ? { ...p, ...changes } : p);
update({ propostas: nextPropostas });
const pUpdated = nextPropostas.find(x => x.id === id);
if(pUpdated) syncApi(pUpdated);
};
const fileFor = (p) => p.template === 'completa' ? 'Proposta.html' : 'Proposta START.html';
const slim = (p) => {
const leve = v => !(typeof v === 'string' && v.startsWith('data:') && v.length > 6000);
const o = JSON.parse(JSON.stringify(p));
if(o.owner && !leve(o.owner.heroImg)) o.owner.heroImg = '';
o.depoimentos = (o.depoimentos || []).filter(d => leve(d.img));
o.portfolio = (o.portfolio || []).filter(x => leve(x.img));
return o;
};
const encode = (p) => btoa(unescape(encodeURIComponent(JSON.stringify(slim(p))))).replace(/\+/g, '-').replace(/\//g, '_');
const slugOf = (p) => (p.slug || StartDB.makeSlug(p.cliente, p.empresa, db.propostas, p.id)).toLowerCase().replace(/[^a-z0-9-_]/g, '-');
const shortUrlFor = (p) => new URL(`${fileFor(p)}?p=${slugOf(p)}`, location.href).href;
const fullUrlFor = (p) => new URL(`${fileFor(p)}?p=${slugOf(p)}&id=${p.id}#p=${encode(p)}`, location.href).href;
const urlFor = (p) => (p.linkMode === 'full' ? fullUrlFor(p) : shortUrlFor(p));
const syncApi = (p) => {
try {
fetch('/api/propostas', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(p)
}).catch(() => {});
} catch(e) {}
};
const copiar = async (p) => {
syncApi(p);
const url = urlFor(p);
let ok = false;
try {
if (navigator.clipboard && window.isSecureContext) { await navigator.clipboard.writeText(url); ok = true; }
} catch (e) { ok = false; }
if (!ok) {
const ta = document.createElement('textarea');
ta.value = url; ta.setAttribute('readonly', '');
ta.style.cssText = 'position:fixed;top:0;left:0;opacity:0';
document.body.appendChild(ta); ta.select(); ta.setSelectionRange(0, url.length);
try { ok = document.execCommand('copy'); } catch (e) { ok = false; }
ta.remove();
}
if (ok) { setCopied(p.id); setTimeout(() => setCopied(null), 2000); }
else setManual({ id: p.id, url });
};
const totalDe = (p) => {
const unico = p.servicos.filter(s => s.rec !== 'mensal').reduce((a, s) => a + Number(s.preco || 0), 0);
const mensal = p.servicos.filter(s => s.rec === 'mensal').reduce((a, s) => a + Number(s.preco || 0), 0);
return [unico ? StartDB.brl(unico) : null, mensal ? StartDB.brl(mensal) + '/mês' : null].filter(Boolean).join(' + ') || 'A definir';
};
const statusTone = { 'Enviada': 'primary', 'Visualizada': 'warning', 'Aprovada': 'success', 'Perdida': 'error', 'Expirada': 'neutral' };
return (
Link Curto Personalizado: Você pode editar a slug de cada proposta (ex: /empresa-acme) para enviar um link curto e profissional.
{db.propostas.length === 0 &&
Nenhuma proposta ainda. Crie a primeira em "Nova proposta".}
{db.propostas.map(p => (
{p.cliente}{p.empresa ? ' — ' + p.empresa : ''}
/{slugOf(p)} · #{p.id} · {new Date(p.criadoEm).toLocaleDateString('pt-BR')} · {p.servicos.length} serviços · {totalDe(p)} · template {p.template === 'dark' ? 'Dark neon' : p.template === 'completa' ? 'Completa' : 'START INC'}
{p.link?.status || 'Enviada'}
{(p.link?.views || []).length} views
Abrir
copiar(p)}>{copied === p.id ? 'Copiado ✓' : 'Copiar link'}
window.open(`${fileFor(p)}?p=${slugOf(p)}&id=${p.id}&print=1#p=${encode(p)}`, '_blank')}>Baixar PDF
go('editor', null, p)}>Editar
{
const novoId = StartDB.uid();
const copia = { ...p, id: novoId, slug: StartDB.makeSlug(p.cliente + ' copia', p.empresa, db.propostas, novoId), criadoEm: new Date().toISOString(), link: { ...(p.link || {}), status: 'Enviada', views: [] } };
update({ propostas: [copia, ...db.propostas] });
syncApi(copia);
}}>Duplicar
setOpen(open === p.id ? null : p.id)}>{open === p.id ? 'Fechar' : 'Controles'}
{open === p.id && (
patchP(p.id, c)} />
patchP(p.id, { link: { ...p.link, status: v } })}
options={['Enviada', 'Visualizada', 'Aprovada', 'Perdida', 'Expirada'].map(s => ({ value: s, label: 'Status: ' + s }))} style={{ maxWidth: 220 }} />
setConfirm(p)}>Excluir proposta
)}
))}
{manual && (
setManual(null)} width={560}
actions={ setManual(null)}>Fechar}>
O navegador bloqueou a cópia automática. Selecione o link abaixo e copie (Ctrl/Cmd + C):