/* global React, Card, Badge, Button, Avatar, Icon, ICONS, Field, BudgetEditorModal, TemplateEditorModal, sb */
const { useState, useRef, useEffect } = React;
// ─── Data ─────────────────────────────────────────────────────────────────────
const BUDGET_STATUS_TONES = { aprovado:'success', enviado:'brand', visualizado:'cyan', rascunho:'neutral', recusado:'danger' };
function rowToBudget(row) {
const total = Number(row.total) || (row.items||[]).reduce((a,i) => a + (i.q||1)*(i.p||0), 0);
const fmtDate = d => d ? d.slice(5).split('-').reverse().join('/') : '—';
return {
id: row.id,
num: row.budget_num || '#' + (row.created_at || '').slice(-6).replace(/\D/g,''),
client: row.client_name || '',
clientEmail: row.client_email || '',
title: row.title || '',
desc: row.budget_desc || '',
value: total ? 'R$ ' + Number(total).toLocaleString('pt-BR') : '—',
rawValue: total,
sent: fmtDate(row.sent_at || row.created_at?.slice(0,10)),
valid: fmtDate(row.valid_until),
status: row.status || 'rascunho',
tone: BUDGET_STATUS_TONES[row.status] || 'neutral',
format: row.format || 'pdf',
payMethod: row.pay_method || 'PIX',
payTerms: row.pay_terms || '',
deliveryDays: row.delivery_days || 30,
items: row.items || [],
slideConfig: row.slide_config || null,
approvedBy: row.approved_by || null,
approvedAt: row.approved_at || null,
};
}
const FILTER_TABS = [
{ id:'todos', label:'Todos', match:()=>true },
{ id:'rascunho', label:'Rascunho', match:b=>b.status==='rascunho' },
{ id:'enviados', label:'Enviados', match:b=>b.status==='enviado' },
{ id:'visualizados', label:'Visualizados',match:b=>b.status==='visualizado' },
{ id:'aprovados', label:'Aprovados', match:b=>b.status==='aprovado' },
{ id:'recusados', label:'Recusados', match:b=>b.status==='recusado' },
];
const TEMPLATES_SEED = [
{ id:1, name:'Apresentação em Slides', type:'Apresentação em slides', isDefault:false },
{ id:2, name:'PDF Padrão', type:'Apresentação em slides', isDefault:true },
{ id:3, name:'Padrão Apresentação', type:'Apresentação em slides', isDefault:true },
{ id:4, name:'Padrão PDF', type:'PDF direto', isDefault:true },
{ id:5, name:'Proposta Interativa', type:'Apresentação em slides', isDefault:false },
];
const PALETTES = [
{ id:'sunset', name:'Sunset Glow', desc:'Vibrant and energetic', c1:'#FF6A00', c2:'#FFB800' },
{ id:'ocean', name:'Ocean Breeze', desc:'Tech and professional', c1:'#0EA5E9', c2:'#64748B' },
{ id:'purple', name:'Purple Haze', desc:'Modern and bold', c1:'#7C3AED', c2:'#EC4899' },
{ id:'cyber', name:'Cyber Night', desc:'Impactful, futuristic', c1:'#1D39C4', c2:'#7C3AED' },
{ id:'forest', name:'Forest Dream', desc:'Natural and trustworthy', c1:'#16A34A', c2:'#0D9488' },
{ id:'rose', name:'Rose Gold', desc:'Elegant and premium', c1:'#E11D48', c2:'#F97316' },
{ id:'electric', name:'Electric Blue', desc:'Innovative and dynamic', c1:'#0EA5E9', c2:'#06B6D4' },
{ id:'fire', name:'Fire & Ice', desc:'Impactful and contrast', c1:'#EF4444', c2:'#3B82F6' },
];
const DEFAULT_CONTRACT = `CONTRATO DE PRESTAÇÃO DE SERVIÇOS DE DESIGN
Entre {{Nome do Prestador}} (CONTRATADA), CNPJ {{CNPJ do Prestador}}, e o CONTRATANTE identificado abaixo:
Cliente: {{Nome do Cliente}}
CPF/CNPJ: {{CPF/CNPJ do Cliente}}
Endereço: {{Endereço do Cliente}}
1. OBJETO
Prestação de serviços de design referente ao projeto: {{Título do Projeto}}.
2. VALOR E PAGAMENTO
O valor total é de {{Valor Total}}. Condições: {{Condições de Pagamento}}.
3. PRAZO
Os serviços serão prestados conforme cronograma acordado entre as partes.
4. PROPRIEDADE INTELECTUAL
Após quitação integral, todos os direitos patrimoniais serão transferidos ao CONTRATANTE.
5. FORO
{{Cidade do Prestador}} — {{Estado do Prestador}}, {{Data do Contrato}}.
`;
const SHORTCODES = ['Nome do Prestador','CNPJ do Prestador','CPF/CNPJ do Prestador','Endereço do Prestador','Cidade do Prestador','Estado do Prestador','Nome do Cliente','CPF/CNPJ do Cliente','Endereço do Cliente','Título do Projeto','Valor Total','Condições de Pagamento','Data do Contrato','Número do Contrato'];
const INP = { width:'100%', padding:'9px 12px', borderRadius:8, border:'1px solid var(--border-subtle)', background:'var(--bg-elevated)', color:'var(--fg-primary)', fontFamily:'inherit', fontSize:13, outline:'none', boxSizing:'border-box' };
const BTN_GHOST = { padding:'7px 14px', borderRadius:8, border:'1px solid var(--border-subtle)', background:'var(--bg-elevated)', color:'var(--fg-secondary)', cursor:'pointer', fontSize:13, fontWeight:600, fontFamily:'inherit' };
// ─── Helpers ──────────────────────────────────────────────────────────────────
function Toggle({ value, onChange }) {
return (
onChange(!value)} style={{ width:40, height:22, borderRadius:999, cursor:'pointer', transition:'background 200ms', background:value?'var(--primary)':'var(--bg-elevated)', border:`1px solid ${value?'var(--primary)':'var(--border-subtle)'}`, position:'relative', flexShrink:0 }}>
{open &&
{children}
}
);
}
const FORMAT_LABEL = { pdf:'PDF', link:'Link', slides:'Slides' };
const FORMAT_TONE = { pdf:'neutral', link:'brand', slides:'cyan' };
// ─── VisualizarModal ──────────────────────────────────────────────────────────
function VisualizarModal({ budget: b, onClose }) {
const [nome, setNome] = useState('');
const [cpf, setCpf] = useState('');
const [email,setEmail]= useState('');
const [hasSig, setHasSig] = useState(false);
const canvasRef = useRef(null);
const drawing = useRef(false);
const total = b.items.reduce((a,i)=>a+i.q*i.p, 0);
const fmt = n => 'R$ ' + n.toLocaleString('pt-BR', {minimumFractionDigits:2});
const accentColor = '#FA541C';
useEffect(() => {
const canvas = canvasRef.current;
if (!canvas) return;
const rect = canvas.getBoundingClientRect();
canvas.width = rect.width * (window.devicePixelRatio || 1);
canvas.height = rect.height * (window.devicePixelRatio || 1);
const ctx = canvas.getContext('2d');
ctx.scale(window.devicePixelRatio || 1, window.devicePixelRatio || 1);
}, []);
function getPos(e) {
const canvas = canvasRef.current;
const rect = canvas.getBoundingClientRect();
const src = e.touches ? e.touches[0] : e;
const scaleX = canvas.width / (rect.width * (window.devicePixelRatio || 1));
const scaleY = canvas.height / (rect.height * (window.devicePixelRatio || 1));
return {
x: (src.clientX - rect.left) / scaleX,
y: (src.clientY - rect.top) / scaleY,
};
}
function startDraw(e) {
e.preventDefault();
const ctx = canvasRef.current.getContext('2d');
const pos = getPos(e);
ctx.beginPath();
ctx.moveTo(pos.x, pos.y);
drawing.current = true;
}
function draw(e) {
if (!drawing.current) return;
e.preventDefault();
const ctx = canvasRef.current.getContext('2d');
const pos = getPos(e);
ctx.lineTo(pos.x, pos.y);
ctx.strokeStyle = '#1a1a2e';
ctx.lineWidth = 2;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.stroke();
if (!hasSig) setHasSig(true);
}
function endDraw() { drawing.current = false; }
function clearCanvas() {
const canvas = canvasRef.current;
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
setHasSig(false);
}
function aprovar() {
if (!nome.trim() || !cpf.trim() || !hasSig) { window.__toast?.('Preencha nome, CPF e realize a assinatura para aprovar'); return; }
window.__toast?.('Proposta aprovada com assinatura digital!', {tone:'success'});
onClose();
}
const secCard = (children) => ({ padding:18, borderRadius:12, border:'1px solid rgba(255,255,255,0.07)', background:'var(--bg-elevated)', marginBottom:0 });
return (
e.stopPropagation()} style={{ maxWidth:800, margin:'0 auto', display:'flex', flexDirection:'column', gap:16 }}>
{/* Close */}
{/* Hero */}
Proposta Comercial
{b.title}
{b.num}
{/* Detalhes do projeto */}
Detalhes do projeto
{b.desc}
{/* Serviços + Info + Condições */}
Serviços Incluídos ({b.items.length})
{b.items.map((it,i) => (
{it.d}
{it.q} x {fmt(it.p)}
{fmt(it.q*it.p)}
))}
Total:
{fmt(total)}
Informações do Cliente
{b.client}
{b.clientEmail}
Condições
Forma:
{b.payMethod}
Condições:
{b.payTerms}
Prazo de Entrega:
{b.deliveryDays} dias
{/* Assinatura Digital */}
Assinatura Digital
Assinatura * (use o mouse, dedo ou caneta)
{hasSig &&
}
{!hasSig && (
Assine aqui
)}
{/* Footer */}
Orçamento criado em {b.sent}/2026 · Válido até {b.valid}/2026
);
}
// ─── PDFPreviewModal ──────────────────────────────────────────────────────────
function PDFPreviewModal({ budget: b, onClose }) {
const [showUnit, setShowUnit] = useState(true);
const [showParc, setShowParc] = useState(true);
const [parcText, setParcText] = useState(b.payTerms);
const [introText, setIntroText] = useState('');
const [techDetails, setTechDetails] = useState('');
const [rodape, setRodape] = useState('');
const total = b.items.reduce((a,i)=>a+i.q*i.p, 0);
const fmt = n => 'R$ ' + n.toLocaleString('pt-BR', {minimumFractionDigits:2});
const accentColor = '#FA541C';
return (
e.stopPropagation()} style={{ width:'min(980px,100%)', maxHeight:'90vh', display:'flex', flexDirection:'column', background:'var(--bg-surface)', border:'1px solid var(--border-strong)', borderRadius:18, boxShadow:'0 30px 80px rgba(0,0,0,0.55)', overflow:'hidden' }}>
Pré-visualização PDF
{/* Options */}
{[['Mostrar preço unitário',showUnit,setShowUnit],['Mostrar parcelamento',showParc,setShowParc]].map(([l,v,fn])=>(
{l}
))}
{showParc && (