// ===== Cotizaciones: presupuestos independientes de una orden ===== // Sirve para: presupuestar antes de recibir el equipo, o cotizar la venta de un producto. function quoteStatus(q){ const created = new Date(q.createdAt); const until = new Date(created.getTime() + (q.validDays||15)*86400000); return { until, vigente: Date.now() <= until.getTime() }; } function quoteTotal(q){ return (q.items||[]).reduce((s,i)=> s + (+i.qty||0)*(+i.price||0), 0); } // ===== Vista principal ===== function Cotizaciones({ quotes, onCreate, onUpdate, onDelete, currentUser, onSaveClient, orders }){ const [view, setView] = React.useState("list"); // list | new | detail const [selId, setSelId] = React.useState(null); const [q, setQ] = React.useState(""); const isAdmin = currentUser.roleId === "admin"; const sel = quotes.find(x=>x.id===selId); let rows = [...quotes].sort((a,b)=> new Date(b.createdAt)-new Date(a.createdAt)); if(q.trim()){ const s = q.trim().toLowerCase(); rows = rows.filter(v => (v.num+" "+v.clientName+" "+(v.brand||"")+" "+(v.model||"")).toLowerCase().includes(s)); } function openNew(){ setView("new"); } function openDetail(id){ setSelId(id); setView("detail"); } function back(){ setView("list"); setSelId(null); } function handleCreate(q){ onCreate(q); openDetail(q.id); } if(view==="new") return ; if(view==="detail" && sel) return { onDelete(sel.id); back(); }} isAdmin={isAdmin} />; return (
setQ(e.target.value)} placeholder="Buscar cotización, cliente o equipo…" style={{ width:"100%", padding:"9px 12px 9px 37px", fontSize:13.5, borderRadius:10, border:"1px solid var(--line)", background:"var(--surface-2)", outline:"none", color:"var(--ink)" }} />
Nueva cotización
{["Cotización","Cliente","Detalle","Total","Validez",""].map((h,i)=>( ))} {rows.map((v,idx)=>{ const { until, vigente } = quoteStatus(v); const total = quoteTotal(v); return ( openDetail(v.id)} style={{ height:60, borderBottom: idxe.currentTarget.style.background="var(--surface-2)"} onMouseLeave={e=>e.currentTarget.style.background="transparent"}> ); })} {rows.length===0 && ( )}
{h}
#{v.num}
{fmtDate(v.createdAt)}
{v.clientName||"Cliente sin nombre"}
{v.clientPhone &&
{v.clientPhone}
} 		{v.kind==="reparacion" ? [v.brand,v.model].filter(Boolean).join(" ")||"Equipo" : "Producto / servicio"}
{(v.items||[]).length} línea{(v.items||[]).length!==1?"s":""}
 {fmtMoney(total)} {vigente ? `Vigente hasta ${fmtDate(until)}` : "Vencida"} e.stopPropagation()}>
openDetail(v.id)} />
{q ? "Sin resultados para tu búsqueda" : "Aún no hay cotizaciones"}
{!q &&
Crea la primera con "Nueva cotización".
}
); } // ===== Formulario: nueva cotización ===== function QuoteForm({ quotes, currentUser, onSaveClient, onCreate, onCancel }){ const nextNum = String(Math.max(...quotes.map(q=>+q.num).filter(n=>!isNaN(n)), 0) + 1); const [kind, setKind] = React.useState("reparacion"); // reparacion | producto const [clientMode, setClientMode] = React.useState("existing"); const [clientId, setClientId] = React.useState(""); const [clientQuery, setClientQuery] = React.useState(""); const [newClient, setNewClient] = React.useState({ name:"", phone:"", email:"" }); const [brand, setBrand] = React.useState(""); const [model, setModel] = React.useState(""); const [issue, setIssue] = React.useState(""); const [items, setItems] = React.useState([{ desc:"", qty:1, price:"" }]); const [validDays, setValidDays] = React.useState(15); const [notes, setNotes] = React.useState(""); const [touched, setTouched] = React.useState(false); function upItem(i, patch){ setItems(prev=>prev.map((it,idx)=> idx===i ? {...it, ...patch} : it)); } function addItem(){ setItems(prev=>[...prev, { desc:"", qty:1, price:"" }]); } function removeItem(i){ setItems(prev=> prev.length>1 ? prev.filter((_,idx)=>idx!==i) : prev); } const total = items.reduce((s,i)=> s + (+i.qty||0)*(+i.price||0), 0); const validItems = items.some(i=> i.desc.trim() && (+i.price||0) >= 0); const hasClientName = clientMode==="existing" ? !!clientId : !!newClient.name.trim(); function submit(){ setTouched(true); if(!hasClientName || !validItems) return; let cl = null; if(clientMode==="existing") cl = CLIENTS.find(c=>c.id===clientId); else if(newClient.name.trim()) cl = onSaveClient({ name:newClient.name.trim(), phone:newClient.phone.trim(), email:newClient.email.trim() }); const quote = { id:"q"+Date.now(), num:nextNum, createdAt:new Date().toISOString(), createdBy:currentUser.name, kind, clientId: cl?.id||null, clientName: cl?.name||"", clientPhone: cl?.phone||"", clientEmail: cl?.email||"", brand: kind==="reparacion" ? brand.trim() : "", model: kind==="reparacion" ? model.trim() : "", issue: kind==="reparacion" ? issue.trim() : "", items: items.filter(i=>i.desc.trim()).map(i=>({ desc:i.desc.trim(), qty:+i.qty||1, price:+i.price||0 })), validDays: +validDays||15, notes: notes.trim(), }; onCreate(quote); } return (

Nueva cotización

Tipo de cotización

{[["reparacion","Reparación de equipo","tools"],["producto","Producto / servicio","box"]].map(([id,l,ic])=>{ const active = kind===id; return ( ); })}

Cliente

{[["existing","Existente"],["new","Nuevo"]].map(([id,l])=>{ const active = clientMode===id; return ; })}
{clientMode==="existing" ? (
setClientQuery(e.target.value)} placeholder="Buscar por nombre, teléfono o cédula…" style={{ ...inputStyle, paddingLeft:38, paddingRight:clientQuery?34:14 }} /> {clientQuery && }
{(()=>{ const norm = s => (s||"").toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g,""); const qq = norm(clientQuery.trim()); const digits = clientQuery.replace(/\D/g,""); let list = CLIENTS; if(qq){ list = CLIENTS.filter(c=>{ const nameHit = norm(c.name).includes(qq); const phoneHit = digits && ((c.phone||"").replace(/\D/g,"").includes(digits) || (c.phone2||"").replace(/\D/g,"").includes(digits)); const cedHit = digits && (c.cedula||"").replace(/\D/g,"").includes(digits); return nameHit || phoneHit || cedHit; }); } const selClient = clientId ? CLIENTS.find(c=>c.id===clientId) : null; if(selClient && !list.some(c=>c.id===clientId)) list = [selClient, ...list]; const total = list.length; const shown = list.slice(0,40); if(total===0) return (
No se encontró ningún cliente con “{clientQuery}”.
); return ( <>
{shown.map(c=>{ const sel = clientId===c.id; return ( ); })}
{qq ? `${total} resultado${total!==1?"s":""}${total>40?" · mostrando 40, afina la búsqueda":""}` : `${CLIENTS.length.toLocaleString("es")} clientes · escribe para buscar`}
); })()} {touched && !clientId &&
Selecciona un cliente.
}
) : (
setNewClient({...newClient,name:e.target.value})} placeholder="Nombre del cliente" style={touched&&!newClient.name.trim()?{borderColor:"var(--danger)"}:{}} /> setNewClient({...newClient,phone:e.target.value})} placeholder="+503 7000-0000" /> setNewClient({...newClient,email:e.target.value})} placeholder="correo@ejemplo.com" />
)} {kind==="reparacion" && (

Equipo

setBrand(e.target.value)} placeholder="Apple, Samsung…" /> setModel(e.target.value)} placeholder="iPhone 13, Galaxy A54…" />