// Job detail, invoice, simple list screens function JobDetail({ state, setState }) { const trade = TRADES[state.tradeId]; const job = FOCUS_JOB[state.tradeId]; const allJobs = JOBS_BY_TRADE[state.tradeId]; const pipelineJob = allJobs.find(j => j.id === job.id) || allJobs[3]; return (
{job.id} {trade.label} Approved
Edit setState(s => ({ ...s, screen: 'invoice' }))}>Generate invoice

{job.title}

{job.customer} {job.address} {job.customerPhone}
{/* Stage strip */}
{STAGES.map((s, i) => { const idx = STAGES.findIndex(x => x.id === pipelineJob.stage); const done = i <= idx; const current = i === idx; return (
{s.label}
); })}
{/* Tabs */}
{['Overview', 'Photos & notes', 'Quote', 'Invoice', 'Activity', 'Files'].map((t, i) => ( ))}

{job.description}

 Thu 18 Apr · 9:00am}>
Dan Hartley - 4h allocated
Dinesh Nair - 2h electrical (L2)
Next: {allJobs.find(j => j.scheduledFor)?.title || 'Next scheduled job'}
{job.photos.map((p, i) => )}
Approved 12:12pm} wide>
{fmtAUDcents(QUOTE_STREAMS[state.tradeId].summary.total)}
inc-GST · 14-day terms · 11 line items
setState(s => ({ ...s, screen: 'ai-quote' }))}>Open quote
{ACTIVITY.map((a, i) => (
{a.what}
{a.who} · {a.when}
))}
{/* Side panel */}
); } function Card({ title, children, right, wide }) { return (
{title}
{right}
{children}
); } // Invoice + Payment screen function InvoiceView({ state, setState }) { const trade = TRADES[state.tradeId]; const job = FOCUS_JOB[state.tradeId]; const summary = QUOTE_STREAMS[state.tradeId].summary; const items = QUOTE_STREAMS[state.tradeId].items; const [paid, setPaid] = React.useState(false); const [paying, setPaying] = React.useState(false); const pay = () => { setPaying(true); setTimeout(() => { setPaying(false); setPaid(true); }, 1400); }; return (
INV-{job.id.replace('J-', '')} {paid ? Paid · Apr 17 : Awaiting payment}
PDF Re-send
{/* Invoice doc */}
{BUSINESS.name}
ABN {BUSINESS.abn}
{BUSINESS.city}, {BUSINESS.suburb}
{BUSINESS.phone}
Tax Invoice
INV-{job.id.replace('J-', '')}
Issued 17 Apr 2026
Due 1 May 2026
Bill to
{job.customer}
{job.address}
Job reference
{job.id} · {job.title}
Completed Thu 18 Apr
Description
Qty
Rate
Amount
{items.slice(0, 9).map((item, i) => (
{item.text}
{item.qty}{item.unit ? ` ${item.unit}` : ''}
{item.rate ? fmtAUDcents(item.rate) : '-'}
{fmtAUDcents(item.total)}
))}
Payment options
PayID
{BUSINESS.email}
BPAY
Biller 118204
Ref INV{job.id.replace('J-', '')}
Card
Stripe link in email
(surcharge 1.4%)
{/* Payment side panel */}
); } // Simple list screens reused: quotes, invoices, customers, schedule, reports function QuotesList({ state, onOpen }) { const trade = TRADES[state.tradeId]; const jobs = JOBS_BY_TRADE[state.tradeId].filter(j => ['quoting', 'approved', 'scheduled'].includes(j.stage)); return ; } function InvoicesList({ state, onOpen }) { const trade = TRADES[state.tradeId]; const jobs = JOBS_BY_TRADE[state.tradeId].filter(j => ['invoiced', 'paid'].includes(j.stage)); return ; } function CustomersList({ state }) { const trade = TRADES[state.tradeId]; const jobs = JOBS_BY_TRADE[state.tradeId]; const customers = {}; jobs.forEach(j => { customers[j.customer] = customers[j.customer] || { name: j.customer, address: j.address, count: 0, value: 0 }; customers[j.customer].count++; customers[j.customer].value += j.value || 0; }); return (
{Object.values(customers).map((c, i) => (
{c.name}
{c.address} · {c.count} jobs · {fmtAUD(c.value)} lifetime
Open
))}
); } function Schedule({ state }) { const jobs = JOBS_BY_TRADE[state.tradeId].filter(j => j.scheduledFor || j.stage === 'scheduled' || j.stage === 'in-progress'); const days = ['Mon 15', 'Tue 16', 'Wed 17', 'Thu 18', 'Fri 19']; return (
{days.map(d =>
{d}
)}
{['Dan H', 'Dinesh N', 'Kyle L'].map((tech, ti) => (
x[0]).join('')} size={22}/>{tech}
{days.map((d, di) => (
{ti === 0 && di === 3 && } {ti === 1 && di === 3 && } {ti === 0 && di === 4 && } {ti === 2 && di === 2 && }
))}
))}
); } function MiniScheduleBlock({ job, half }) { if (!job) return null; return
{job.id}
{job.title}
{job.address}
; } function Reports({ state }) { return (
{[ { t: 'Revenue this month', v: '$42,680', d: '+12% vs last month' }, { t: 'Quotes sent · win rate', v: '61%', d: '17 of 28 approved' }, { t: 'Avg quote response time', v: '1.4 hr', d: 'target: <2 hr' }, { t: 'BAS quarter - GST collected', v: '$8,420', d: 'export ready Q3' }, ].map(c => (
{c.t}
{c.v}
{c.d}
{Array.from({ length: 20 }).map((_, i) =>
15 ? 'var(--accent)' : 'var(--surface-3)', borderRadius: 2 }}/>)}
))}
); } function SimpleList({ title, jobs, trade, onOpen, valueLabel }) { return (
Ref
{valueLabel}
Customer
Status
Total
Action
{jobs.map((j, i) => (
{valueLabel === 'Invoice' ? 'INV-' : 'Q-'}{j.id.replace('J-', '')} {j.title} {j.customer} {STAGES.find(s => s.id === j.stage).label} {fmtAUD(j.value)} Open
))}
); } Object.assign(window, { JobDetail, InvoiceView, QuotesList, InvoicesList, CustomersList, Schedule, Reports });