// Simple Pro Mobile — Extra screens: Conversations (calls+messages unified), Estimates+detail, Customer forms const { useState } = React; // ── CONVERSATIONS DATA ──────────────────────────────────────── const THREADS = [ { id:'sms-1', name:'Maria Ramos', preview:'Got it, see you at 11:30!', time:'10:42 AM', unread:1, avatar:'MR', color:'#e8f2fd', tc:'#0071e3', belle:true, kind:'sms' }, { id:'sms-2', name:'Steinberg Corp', preview:'The crew can access through the back.', time:'9:15 AM', unread:0, avatar:'SC', color:'#e6f7ef', tc:'#1a9e5c', kind:'sms' }, { id:'sms-3', name:'Chen Family', preview:'Thank you! Payment sent.', time:'Yesterday',unread:0, avatar:'CF', color:'#fef3e2', tc:'#d97706', kind:'sms' }, { id:'sms-4', name:'Jake Torres', preview:'On my way to Steinberg now.', time:'Yesterday',unread:0, avatar:'JT', color:'#f3f4f6', tc:'#6b7280', kind:'sms' }, { id:'sms-5', name:'Nguyen Group', preview:'Can we reschedule to Friday?', time:'Apr 19', unread:2, avatar:'NG', color:'#fef2f2', tc:'#dc2626', belle:true, kind:'sms' }, { id:'sms-6', name:'Park Residence', preview:'Confirmed for Tuesday at 10 AM.', time:'Apr 18', unread:0, avatar:'PR', color:'#f5f0ff', tc:'#7c3aed', kind:'sms' }, ]; const THREAD_MESSAGES = [ { from:'customer', text:"Hi, just confirming the appointment for today at 11:30?", time:'10:28 AM' }, { from:'me', text:"Yes! I'll be there around 11:30. See you then.", time:'10:31 AM' }, { from:'customer', text:"Got it, see you at 11:30!", time:'10:42 AM' }, ]; const CALLS_DATA = [ { id:'call-1', name:'Maria Ramos', type:'inbound', duration:'3:42', time:'10:28 AM', status:'answered', job:'Drain Clog — Kitchen', phone:'(415) 555-0192', belle:true, summary:'Confirmed access and asked for ETA before the tech arrived.' }, { id:'call-2', name:'Steinberg Corp', type:'outbound', duration:'1:15', time:'9:02 AM', status:'answered', job:'Full Bath Re-pipe', phone:'(415) 555-0271' }, { id:'call-3', name:'Unknown', type:'inbound', duration:'—', time:'8:44 AM', status:'missed', job:null, phone:'(415) 555-0918', belle:true, summary:'Belle flagged the caller as a likely new customer asking about a clogged kitchen line.' }, { id:'call-4', name:'Nguyen Group', type:'outbound', duration:'0:32', time:'Yesterday',status:'voicemail', job:'Sewer Inspection', phone:'(415) 555-0445' }, { id:'call-5', name:'Chen Family', type:'inbound', duration:'5:11', time:'Yesterday',status:'answered', job:'Water Heater Install', phone:'(415) 555-0388' }, ]; // Build a unified inbox of SMS threads + calls, newest-first-ish (preserve input order). const CONVERSATIONS = [ ...THREADS.map(t => ({ ...t, kind:'sms' })), ...CALLS_DATA.map(c => ({ id: c.id, name: c.name, time: c.time, kind:'call', call: c, preview: (c.status==='missed' ? '⚠ Missed call' : c.type==='inbound' ? '↙ Inbound call' : '↗ Outbound call') + ' · ' + c.duration + (c.job ? ` · ${c.job}` : ''), unread: c.status==='missed' ? 1 : 0, belle: c.belle, avatar: c.name.split(' ').map(w=>w[0]).slice(0,2).join(''), color: c.status==='missed' ? '#fef2f2' : '#e8f2fd', tc: c.status==='missed' ? '#dc2626' : '#0071e3', })), ]; // ── CONVERSATIONS SCREEN (unified calls + messages inbox) ───── function ConversationsScreen({ onNav }) { const [filter, setFilter] = useState('All'); const [search, setSearch] = useState(''); const filters = ['All','Messages','Calls','Unread']; const list = CONVERSATIONS.filter(c => { if (filter === 'Messages' && c.kind !== 'sms') return false; if (filter === 'Calls' && c.kind !== 'call') return false; if (filter === 'Unread' && !c.unread) return false; if (search && !c.name.toLowerCase().includes(search.toLowerCase())) return false; return true; }); return (
onNav('belle', {prompt:'Compose a new message'})} style={{width:32,height:32,borderRadius:'50%',background:'rgba(255,255,255,0.12)', display:'flex',alignItems:'center',justifyContent:'center',cursor:'pointer'}}>
} />
setSearch(e.target.value)} placeholder="Search calls or messages…" style={{flex:1,border:'none',background:'transparent',fontSize:14,color:'#111',outline:'none',fontFamily:'inherit'}}/>
{filters.map(f => (
setFilter(f)} style={{flexShrink:0,height:30,padding:'0 13px',borderRadius:999, background: filter===f ? '#0071e3' : 'white', color: filter===f ? 'white' : 'rgba(0,0,0,0.6)', border: `1px solid ${filter===f ? '#0071e3' : 'rgba(0,0,0,0.1)'}`, fontSize:13,fontWeight: filter===f ? 600 : 400, display:'flex',alignItems:'center',cursor:'pointer'}}> {f}
))}
{list.length === 0 ? ( onNav('belle', {prompt:'Send a message to a customer'})} onManual={() => onNav('belle', {prompt:'Compose a new message manually'})} icon={} /> ) : ( {list.map((c,i) => (
onNav('conversation-detail', {conversation: c})} style={{padding:'12px 16px',display:'flex',alignItems:'center',gap:12, borderBottom: i
{c.avatar}
{c.unread > 0 && (
{c.unread}
)} {/* Kind indicator */}
{c.kind === 'call' ? ( ) : ( )}
{c.name} {c.time}
{c.preview}
))} )} ); } // ── CONVERSATION DETAIL — routes to SMS thread or call transcript function ConversationDetailScreen({ onNav, params }) { const conv = params?.conversation; if (!conv) return ; if (conv.kind === 'call') { return ; } return ; } function SmsThreadScreen({ onNav, thread }) { const [draft, setDraft] = useState(''); return (
onNav('belle', {prompt:`Call ${thread.name}`})} style={{width:32,height:32,borderRadius:'50%',background:'rgba(255,255,255,0.12)', display:'flex',alignItems:'center',justifyContent:'center',color:'rgba(255,255,255,0.7)',cursor:'pointer'}}> {Icons.phone}
} />
{THREAD_MESSAGES.map((m,i) => (
{m.text}
{m.time}
))}
{/* Belle suggest strip */}
Belle can reply: "I'm on my way, see you at 11:30"
setDraft("I'm on my way, see you at 11:30!")} style={{fontSize:12,fontWeight:600,color:'#7c3aed',cursor:'pointer'}}>Use
{/* Input */}
setDraft(e.target.value)} placeholder="Message…" style={{flex:1,border:'none',background:'transparent',fontSize:14,color:'#111', outline:'none',fontFamily:'inherit'}}/>
setDraft('')} style={{width:36,height:36,borderRadius:'50%', background: draft.trim() ? '#0071e3' : '#e2e2e6', display:'flex',alignItems:'center',justifyContent:'center',cursor:'pointer',flexShrink:0}}>
); } // ── ESTIMATES DATA (used by BillingScreen) ──────────────────── const ESTIMATES_DATA = [ { id:'EST-0098', client:'Nguyen Group', amount:'$550', status:'approved', date:'Apr 20', job:'Sewer Line Inspection' }, { id:'EST-0097', client:'Torres LLC', amount:'$890', status:'draft', date:'Apr 19', job:'Gas Line Repair' }, { id:'EST-0096', client:'Park Residence', amount:'$180', status:'sent', date:'Apr 17', job:'Backflow Preventer Test' }, { id:'EST-0095', client:'Adams Home', amount:'$420', status:'approved', date:'Apr 16', job:'Toilet Replacement' }, { id:'EST-0094', client:'Steinberg Corp', amount:'$2,800', status:'draft', date:'Apr 14', job:'Full Bath Re-pipe' }, { id:'EST-0093', client:'Chen Family', amount:'$1,450', status:'sent', date:'Apr 10', job:'Water Heater Install' }, ]; // ── ESTIMATE DETAIL ─────────────────────────────────────────── function EstimateDetailScreen({ onNav, params }) { const est = (params && params.estimate) || ESTIMATES_DATA[0]; const [converted, setConverted] = useState(false); // Tier-2 overflow: void, force-send, convert to job manually const overflow = ( onNav('new-job', {fromEstimate: est.id}) }, { label:'Edit line items', sub:'(manual)' }, ]}/> ); return (
{est.amount}
{est.client} · {est.date}
{!converted && est.status==='approved' && ( onNav('belle', {prompt:`Convert estimate ${est.id} to invoice`})} onManual={() => setConverted(true)}/> )} {!converted && est.status==='sent' && ( onNav('belle', {prompt:`Check customer approval for ${est.id}`})}/> )} {converted && (
{Icons.check} Invoice Created
)} {est.status==='draft' && ( onNav('belle', {prompt:`Send estimate ${est.id} to ${est.client}`})} onManual={() => onNav('belle', {prompt:`Manually send estimate ${est.id} to ${est.client}`})}/> )}
{[ { desc:'Labor — ' + est.job, qty:'3 hrs', rate:'$95/hr', total: '$285' }, { desc:'Materials', qty:'—', rate:'—', total: est.status==='approved' ? '$165' : '$35' }, ].map((line,i,arr) => (
{line.desc}
{line.total}
{line.qty} · {line.rate}
))}
Total {est.amount}
); } // ── CUSTOMER FORM SCREENS ───────────────────────────────────── function CustomerFormScreen({ title, onNav, customer, submitLabel }) { const [form, setForm] = useState({ firstName: customer?.firstName || customer?.name?.split(' ')[0] || 'Maria', lastName: customer?.lastName || customer?.name?.split(' ').slice(1).join(' ') || 'Ramos', company: customer?.company || 'Ramos Residence', phone: customer?.phone || '(415) 555-0192', email: customer?.email || 'maria@ramosresidence.com', address: customer?.address || '104 Oakmont Ave, San Francisco, CA', notes: customer?.notes || 'Gate code 2840. Prefers text updates before arrival.', }); const fields = [ { key:'firstName', label:'First name' }, { key:'lastName', label:'Last name' }, { key:'company', label:'Company / property' }, { key:'phone', label:'Phone' }, { key:'email', label:'Email' }, { key:'address', label:'Service address' }, ]; return (
{fields.map(field => (
{field.label}
setForm(prev => ({ ...prev, [field.key]: e.target.value }))} style={{width:'100%',border:'none',outline:'none',fontSize:15,color:'#111',background:'transparent',fontFamily:'inherit',padding:0}} />
))}
Notes