// Quote Builder — line-item editor · live preview · send & e-sign function qbParseJson(raw) { if (!raw) return null; let s = String(raw).trim().replace(/^```(?:json)?/i, '').replace(/```$/, '').trim(); const i = s.indexOf('{'); if (i > 0) s = s.slice(i); const j = s.lastIndexOf('}'); if (j !== -1) s = s.slice(0, j + 1); try { return JSON.parse(s); } catch (e) { return null; } } const QB_PRODUCTS = [ { id:'p1', cat:'Cabinets', name:'Base cabinet 600mm', unit:1, price:620 }, { id:'p2', cat:'Cabinets', name:'Wall cabinet 600mm', unit:1, price:480 }, { id:'p3', cat:'Cabinets', name:'Corner cabinet lazy susan', unit:1, price:890 }, { id:'p4', cat:'Cabinets', name:'Pantry tower 600×2100mm', unit:1, price:1240 }, { id:'p5', cat:'Benchtops', name:'Stone benchtop 20mm Calacatta', unit:'m²', price:480 }, { id:'p6', cat:'Benchtops', name:'Waterfall end panel', unit:1, price:680 }, { id:'p7', cat:'Benchtops', name:'Splashback 10mm toughened glass', unit:'m²', price:320 }, { id:'p8', cat:'Appliances', name:'Fisher & Paykel 60cm induction', unit:1, price:1890 }, { id:'p9', cat:'Appliances', name:'Integrated dishwasher 60cm', unit:1, price:1650 }, { id:'p10', cat:'Hardware', name:'Blum soft-close hinges (set)', unit:1, price:48 }, { id:'p11', cat:'Hardware', name:'Handle bar 160mm (each)', unit:1, price:22 }, { id:'p12', cat:'Installation', name:'Full installation & labour', unit:1, price:4200 }, { id:'p13', cat:'Installation', name:'Site preparation', unit:1, price:800 }, ]; const QB_STATES = ['building', 'preview', 'sent']; function QuoteBuilder({ deals, contacts, showToast }) { const toast = showToast || (() => {}); const LIVE = !!window.STAGEVO_AUTHED && !!window.StagevoData; const AI_OK = window.claude && typeof window.claude.complete === 'function'; const [qstate, setQstate] = React.useState('building'); const [selectedDeal, setSelectedDeal] = React.useState(deals.filter(d=>d.stage!=='sold'&&d.stage!=='lost')[0]); const [lineItems, setLineItems] = React.useState([ { id:'li1', productId:'p1', name:'Base cabinet 600mm', qty:8, unit:1, price:620, note:'' }, { id:'li2', productId:'p4', name:'Pantry tower 600×2100mm', qty:1, unit:1, price:1240, note:'' }, { id:'li5', productId:'p5', name:'Stone benchtop 20mm Calacatta', qty:7.2, unit:'m²', price:480, note:'Waterfall edge both ends' }, { id:'li8', productId:'p8', name:'Fisher & Paykel 60cm induction', qty:1, unit:1, price:1890, note:'' }, { id:'li12', productId:'p12', name:'Full installation & labour', qty:1, unit:1, price:4200, note:'' }, ]); const [showCatalog, setShowCatalog] = React.useState(false); const [discount, setDiscount] = React.useState(0); const [note, setNote] = React.useState(''); const [saving, setSaving] = React.useState(false); const [aiBusy, setAiBusy] = React.useState(false); const [aiTip, setAiTip] = React.useState(''); const subtotal = lineItems.reduce((a, li) => a + (li.price * li.qty), 0); const discountAmt = subtotal * discount / 100; const gst = (subtotal - discountAmt) * 0.1; const total = subtotal - discountAmt + gst; const fmt = v => '$' + v.toLocaleString('en-AU', {minimumFractionDigits:2, maximumFractionDigits:2}); const addProduct = (p) => { setLineItems(prev => [...prev, { id:'li'+Date.now(), productId:p.id, name:p.name, qty:1, unit:p.unit, price:p.price, note:'' }]); setShowCatalog(false); }; const removeItem = (id) => setLineItems(prev => prev.filter(li=>li.id!==id)); const updateItem = (id, field, val) => setLineItems(prev => prev.map(li => li.id===id ? {...li, [field]:val} : li)); const cats = [...new Set(QB_PRODUCTS.map(p=>p.cat))]; const activeDeal = selectedDeal; const STATUS_LABELS = { building:'Building', preview:'Preview', sent:'Sent / Signed' }; async function suggestDiscount() { if (!AI_OK || aiBusy) return; setAiBusy(true); try { const items = lineItems.map(li => `${li.qty}x ${li.name} @ $${li.price}`).join('; '); const prompt = `A kitchen/cabinetry quote for ${activeDeal ? activeDeal.customer : 'a customer'} totals $${subtotal.toFixed(0)} before discount. The deal estimate is $${(activeDeal && activeDeal.value) || 0}. Line items: ${items}. As a sales manager, recommend a single discount percentage between 0 and 15 that protects margin while helping the deal close. Return STRICT JSON only: {"pct":NUMBER,"why":"one short sentence"}.`; const raw = await window.claude.complete({ messages: [{ role: 'user', content: prompt }] }); const p = qbParseJson(raw); if (p && typeof p.pct === 'number') { setDiscount(Math.max(0, Math.min(30, Math.round(p.pct)))); if (p.why) setAiTip(p.why); } } catch (e) {} setAiBusy(false); } async function sendQuote() { if (saving) return; setSaving(true); try { if (LIVE && activeDeal) { const items = lineItems.map(li => ({ name: li.name, qty: li.qty, unit: typeof li.unit === 'string' ? li.unit : 'ea', unit_price: li.price, note: li.note })); const match = (contacts || []).find(c => activeDeal.contactId ? c.id === activeDeal.contactId : (c.name || '').toLowerCase() === (activeDeal.customer || '').toLowerCase()); const q = await window.StagevoData.createQuote(activeDeal.id, match ? match.id : null, items, { notes: note, discountPct: discount, validDays: 30 }); if (q && q.id) await window.StagevoData.updateQuoteStatus(q.id, 'sent'); } setQstate('sent'); } catch (e) { alert('Could not save the quote: ' + (e.message || e)); } setSaving(false); } return (
{/* Stage bar */}
{QB_STATES.map((s,i) => ( {i < QB_STATES.length - 1 &&
} ))}
{/* ── STAGE 1: Building ── */} {qstate === 'building' && (
{/* Deal selector */}
{activeDeal && (
Current deal value
${(activeDeal.value||0).toLocaleString()}
)}
{/* Line items */}
Line Items
{lineItems.map(li => ( ))}
Description Qty Unit Price Total
{li.name}
updateItem(li.id,'note',e.target.value)} placeholder="Add note…" style={{ border:'none', background:'none', fontSize:11, color:'var(--ink-3)', outline:'none', width:'100%', padding:0 }} /> 		updateItem(li.id,'qty',Number(e.target.value))} style={{ width:50, border:'1px solid var(--border)', borderRadius:4, padding:'3px 6px', fontSize:12, textAlign:'right', background:'var(--surface-2)' }} /> {typeof li.unit==='string'?li.unit:'ea'} {fmt(li.price)} {fmt(li.price*li.qty)}
{/* Totals */}
Subtotal{fmt(subtotal)}
Discount setDiscount(Number(e.target.value))} style={{ width:44, border:'1px solid var(--border)', borderRadius:4, padding:'2px 6px', fontSize:12, textAlign:'right' }} /> % ({fmt(discountAmt)})
GST 10%{fmt(gst)}
Total AUD{fmt(total)}
{/* Sidebar totals */}
Quote Summary
{fmt(total)}
{lineItems.length} line items · incl. GST
{activeDeal && (
(activeDeal.value||0) ? 'var(--warn-soft)' : 'var(--won-soft)', borderRadius:6 }}>
(activeDeal.value||0) ? 'var(--warn)' : 'var(--won)' }}> {total > (activeDeal.value||0) ? '↑ Quote above deal estimate' : '✓ Within deal estimate'}
Deal: ${(activeDeal.value||0).toLocaleString()}
)}
Quote Notes