/* global React, I, fmt, fmt0, SEED, Badge, Button, PhoneShell, api */ const { useState, useEffect, useMemo, useRef, useCallback } = React; // ─── Debounce utility for API saves ──────────────────────────── function useDebouncedSave(saveFn, delay = 800) { const timeoutRef = useRef(null); const savingRef = useRef(false); const [saving, setSaving] = useState(false); const debouncedSave = useCallback((data) => { if (timeoutRef.current) { clearTimeout(timeoutRef.current); } timeoutRef.current = setTimeout(async () => { if (savingRef.current) return; savingRef.current = true; setSaving(true); try { await saveFn(data); } catch (err) { console.error('Auto-save failed:', err); } finally { savingRef.current = false; setSaving(false); } }, delay); }, [saveFn, delay]); useEffect(() => { return () => { if (timeoutRef.current) { clearTimeout(timeoutRef.current); } }; }, []); return { debouncedSave, saving }; } // ─── Pricing Builder ────────────────────────────────────────── // Pricing model: // manufacturerCost = sum(hardware) + sum(extras) (read-only here) // target = manufacturerCost × multiplier (default 4) // user adjusts: materials lines, labour hours, profit (slider) // labour = hours × rate × crew // internalCost = manufacturer + materials + labour // finalCustomerPrice = internalCost + profit (i.e. profit is the explicit margin) // gross margin % = profit / finalPrice // minimum recommended = (materials + labour) × 1.5 applied to the non-hardware portion function PricingScreen({ onBack, onContinue, hardwareTotal, multiplier, setMultiplier, progress, quoteId }) { const [loading, setLoading] = useState(!!quoteId); const [loadError, setLoadError] = useState(null); // Quoted Materials = hardwareTotal (fixed, doesn't scale) // At ×3.5 default: total = hardware × 3.5 // Quoted Materials: hardware (28.57%) // Gross Profit: 28.57% of total // Sundry Materials: 7% // Subcontractors: 3% // Labour: ~32.86% (remainder) const baseTotal = hardwareTotal * 3.5; const initial = useMemo(() => ({ profit: baseTotal * 0.2857, sundries: baseTotal * 0.07, subs: baseTotal * 0.03, labour: baseTotal - hardwareTotal - baseTotal * 0.2857 - baseTotal * 0.07 - baseTotal * 0.03 }), [hardwareTotal, baseTotal]); const [profit, setProfit] = useState(initial.profit); const [sundries, setSundries] = useState(initial.sundries); const [subs, setSubs] = useState(initial.subs); const [labour, setLabour] = useState(initial.labour); const [activeBucket, setActiveBucket] = useState('master'); // API integration: save pricing changes with debounce const savePricing = useCallback(async (pricingData) => { if (!quoteId || typeof api === 'undefined') return; await api.updatePricing(quoteId, pricingData); }, [quoteId]); const { debouncedSave, saving } = useDebouncedSave(savePricing, 800); // Auto-save when values change useEffect(() => { if (!quoteId || loading) return; const currentTotal = hardwareTotal + profit + sundries + subs + labour; const currentMultiplier = hardwareTotal > 0 ? currentTotal / hardwareTotal : 0; debouncedSave({ profit, sundries, subs, labour, multiplier: currentMultiplier }); }, [profit, sundries, subs, labour, quoteId, loading, hardwareTotal]); // Load real pricing data from API useEffect(() => { if (!quoteId || typeof api === 'undefined') { setLoading(false); return; } let cancelled = false; (async () => { try { const data = await api.getPricing(quoteId); if (cancelled) return; if (data.profit !== undefined) setProfit(data.profit); if (data.sundries !== undefined) setSundries(data.sundries); if (data.subs !== undefined) setSubs(data.subs); if (data.labour !== undefined) setLabour(data.labour); } catch (err) { if (!cancelled) setLoadError(err.message); } finally { if (!cancelled) setLoading(false); } })(); return () => { cancelled = true; }; }, [quoteId]); const total = hardwareTotal + profit + sundries + subs + labour; const liveMultiplier = hardwareTotal > 0 ? total / hardwareTotal : 0; // Master slider: scale all non-hardware buckets uniformly to hit a new target multiplier const setMasterMultiplier = (newMult) => { const newTotal = hardwareTotal * newMult; const targetNonHardware = Math.max(0, newTotal - hardwareTotal); const currentNonHardware = profit + sundries + subs + labour; if (currentNonHardware <= 0) return; const k = targetNonHardware / currentNonHardware; setProfit(profit * k); setSundries(sundries * k); setSubs(subs * k); setLabour(labour * k); }; const sliderRef = useRef(null); const [dragging, setDragging] = useState(false); const min = 2,max = 6; // Per-bucket independent ranges (scale 0…maxBucket) const bucketMaxFor = (key) => { const baseAtLoad = key === 'profit' ? initial.profit : key === 'sundries' ? initial.sundries : key === 'subs' ? initial.subs : initial.labour; return Math.max(baseAtLoad * 3, hardwareTotal * 1.5); }; const setFromClientX = (clientX) => { const r = sliderRef.current.getBoundingClientRect(); const ratio = Math.max(0, Math.min(1, (clientX - r.left) / r.width)); if (activeBucket === 'master') { const raw = min + ratio * (max - min); const snapped = +(Math.round(raw / 0.05) * 0.05).toFixed(2); setMasterMultiplier(snapped); } else { const b = buckets.find((x) => x.key === activeBucket); if (!b || b.locked) return; const max$ = bucketMaxFor(activeBucket); b.set(Math.round(ratio * max$ / 50) * 50); } }; const buckets = [ { key: 'hardware', label: 'Quoted Materials', value: hardwareTotal, color: '#06B6D4', locked: true }, { key: 'sundries', label: 'Sundry Materials', value: sundries, color: '#3B82F6', set: setSundries }, { key: 'subs', label: 'Subcontractors', value: subs, color: '#8B5CF6', set: setSubs }, { key: 'labour', label: 'Labour', value: labour, color: '#22C55E', set: setLabour }, { key: 'profit', label: 'Gross Profit', value: profit, color: '#F97322', set: setProfit }]; const pct = (v) => total > 0 ? v / total * 100 : 0; const active = buckets.find((b) => b.key === activeBucket); const isMaster = activeBucket === 'master'; const sliderColor = isMaster ? '#FEC230' : (active ? active.color : '#FEC230'); const sliderProgress = isMaster ? Math.max(0, Math.min(1, (liveMultiplier - min) / (max - min))) : (active && !active.locked ? Math.max(0, Math.min(1, active.value / bucketMaxFor(active.key))) : 0); const grossMargin = total > 0 ? profit / total : 0; const finalPrice = total; // Loading state if (loading) { return (
Loading pricing data...
 ); } // Error state if (loadError) { return (
Failed to load pricing
{loadError}
 ); } return (
{/* Auto-save indicator */} {saving && (
Saving...
)} {/* Big total number */}
Quote total · ex GST
{fmt0(finalPrice)}
{fmt0(hardwareTotal)} × {liveMultiplier.toFixed(2)}
{/* Stacked allocation bar */}
{buckets.map((b) =>
!b.locked && setActiveBucket(b.key)} style={{ width: `${pct(b.value)}%`, background: b.color, cursor: b.locked ? 'default' : 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#000', fontSize: 11, fontWeight: 700, outline: activeBucket === b.key ? '2px solid #fff' : 'none', outlineOffset: -2, overflow: 'hidden' }}> {pct(b.value) > 7 ? `${pct(b.value).toFixed(0)}%` : ''}
)}
{/* Legend / segment selector */}
{buckets.map((b) => { const isActive = activeBucket === b.key; return ( ); })}
{/* Context slider — master or per-bucket */}
{isMaster ? 'Quote value' : `Adjust ${active.label.toLowerCase()}`}
{isMaster ? `×${liveMultiplier.toFixed(2)}` : fmt0(active.value)}
{e.target.setPointerCapture?.(e.pointerId);setDragging(true);setFromClientX(e.clientX);}} onPointerMove={(e) => {if (dragging) setFromClientX(e.clientX);}} onPointerUp={() => setDragging(false)} onPointerCancel={() => setDragging(false)} style={{ position: 'relative', height: 44, cursor: 'pointer', display: 'flex', alignItems: 'center', touchAction: 'none' }}>
{isMaster ? <>×2.0×3.5×6.0 : <>$0{fmt0(bucketMaxFor(activeBucket) / 2)}{fmt0(bucketMaxFor(activeBucket))} }
{/* Sticky footer */}
); } const stepperBtn = { width: 44, height: 44, borderRadius: 8, background: '#171717', border: '1px solid #404040', color: '#fff', fontSize: 22, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }; // ── Final price hero card with multiplier toggle function FinalPriceCard({ finalPrice, grossMargin, marginOk, target, multiplier, setMultiplier, hardwareTotal }) { return (
CUSTOMER PRICE
{fmt0(finalPrice)}
ex GST · {(grossMargin * 100).toFixed(1)}% gross margin
{marginOk ? 'Healthy' : 'Below 33%'}
{/* Multiplier toggle */}
Default target multiplier
{fmt0(hardwareTotal)} × {multiplier} = {fmt0(target)}
{[3.5, 4].map((m) => )}
); } // ── Generic expanding section function Section({ open, onToggle, icon, iconBg, iconColor, label, sub, value, children, warning }) { return (
{open &&
{children}
}
); } function ExpandRow({ icon, iconBg, iconColor, label, sub, value, locked }) { return (
{icon}
{label} {locked && FROM PDF }
{sub}
{fmt0(value)}
); } // ── Material card (editable) — TRAiDMIN list-item card pattern function MaterialCard({ m, editing, onEditStart, onEditEnd, onChange, onRemove }) { return (
{editing ? onChange({ name: e.target.value })} style={{ ...editInput, fontWeight: 600, color: '#fff' }} /> :
{m.name}
} {editing ? onChange({ desc: e.target.value })} style={{ ...editInput, fontSize: 12, color: '#B8B8B8', marginTop: 4 }} /> :
{m.desc}
}
Allowance
{editing ? onChange({ qty: e.target.value })} style={{ ...editInput, marginTop: 2, fontSize: 13 }} /> :
{m.qty}
}
Cost
{editing ? onChange({ cost: Math.max(0, +e.target.value || 0) })} style={{ ...editInput, marginTop: 2, fontSize: 14, fontWeight: 700, textAlign: 'right', fontVariantNumeric: 'tabular-nums' }} /> :
{fmt0(m.cost)}
}
{editing && }
); } const editInput = { background: '#262626', border: '1px solid #404040', borderRadius: 4, color: '#fff', fontFamily: 'inherit', padding: '4px 8px', outline: 'none', width: '100%', boxSizing: 'border-box', fontSize: 13 }; // ── Labour editor with slider function LabourEditor({ hours, setHours, rate, crew, total }) { return (
Total hours
{hours} h
4 h80 h
{hours} × ${rate} × {crew} {fmt0(total)}
); } function KV({ label, value }) { return (
{label}
{value}
); } // ── Profit editor with slider + warning function ProfitEditor({ profit, setProfit, installerCost, hardwareTotal, minRecommendedFinal, finalPrice, grossMargin, marginOk }) { // slider over profit value const min = 0; const max = Math.max(installerCost * 5 + hardwareTotal, profit * 1.4, 50000); return (
Profit
{fmt0(profit)}
$0{fmt0(max)}
{!marginOk &&
Margin below 33%. Recommended minimum final price is {fmt0(minRecommendedFinal)} — installer-supplied portion should clear (materials + labour) × 1.5.
}
); } // ── Slider primitive (yellow themed) function Slider({ min, max, step, value, onChange }) { const pct = (value - min) / (max - min) * 100; return (
onChange(+e.target.value)} style={{ position: 'absolute', inset: 0, width: '100%', opacity: 0, cursor: 'pointer', margin: 0, height: '100%' }} />
); } // ── Stacked split bar visualisation function SplitBar({ hardware, materials, labour, profit }) { const total = hardware + materials + labour + profit; const segs = [ { label: 'Hardware', value: hardware, color: '#FEC230' }, { label: 'Materials', value: materials, color: '#3B82F6' }, { label: 'Labour', value: labour, color: '#22C55E' }, { label: 'Profit', value: profit, color: '#DC6C3D' }]; return (
WHERE THE MONEY GOES
{segs.map((s) =>
)}
{segs.map((s) =>
{s.label}
{fmt0(s.value)} · {(s.value / total * 100).toFixed(0)}%
)}
); } window.PricingScreen = PricingScreen; // ─── Set Price (Step 1: total target) ──────────────────────── function SetPriceScreen({ onBack, onContinue, hardwareTotal, multiplier }) { const [unit, setUnit] = useState('dollar'); const finalPrice = hardwareTotal * multiplier; return (
{['dollar', 'percent'].map((u) => { const active = unit === u; return ( ); })}
{unit === 'dollar' ? fmt0(finalPrice) : `${(multiplier * 100).toFixed(0)}%`}
{unit === 'dollar' ? `${fmt0(hardwareTotal)} hardware × ${multiplier.toFixed(2)}` : `${fmt0(finalPrice)} customer price`}
); } // ─── Quote Summary ─────────────────────────────────────────── function PriceSummaryScreen({ onBack, onContinue, onAddClient, onEditProfit, onEditMaterials, onEditLabour, onEditCopy, hardwareTotal, multiplier, progress, quoteId, v3Pricing }) { const [loading, setLoading] = useState(!!quoteId && !v3Pricing); const [loadError, setLoadError] = useState(null); const [pricingData, setPricingData] = useState(null); const [quoteDetails, setQuoteDetails] = useState(null); // These must be at the top level before any conditional returns (React hooks rule) const [matsOpen, setMatsOpen] = useState(true); const [labourOpen, setLabourOpen] = useState(true); const [profitOpen, setProfitOpen] = useState(false); // GST toggle - default to including GST const [includeGst, setIncludeGst] = useState(true); // V3 pricing state for when we need to fetch it ourselves const [localV3Pricing, setLocalV3Pricing] = useState(null); // Load pricing data and quote details from API useEffect(() => { if (!quoteId || typeof api === 'undefined') { setLoading(false); return; } let cancelled = false; (async () => { try { // Always load quote details const quoteResponse = await api.getQuote(quoteId); if (cancelled) return; setQuoteDetails(quoteResponse?.data || quoteResponse); // If v3Pricing was passed from HardwareScreen, use it if (v3Pricing) { setLoading(false); return; } // Otherwise, fetch V3 pricing ourselves (for existing quotes opened from dashboard) let v3Success = false; try { const v3Data = await api.calculateV3Pricing(quoteId, 15, 3.5); if (v3Data.success && v3Data.data) { setLocalV3Pricing(v3Data.data); v3Success = true; } } catch (v3Err) { console.warn('V3 pricing fetch failed:', v3Err); } // Fall back to old pricing API if V3 didn't work if (!v3Success) { try { const pricingResponse = await api.getPricing(quoteId); const data = pricingResponse?.data || pricingResponse; setPricingData(data); } catch (pricingErr) { console.warn('Old pricing fetch failed:', pricingErr); } } } catch (err) { if (!cancelled) setLoadError(err.message); } finally { if (!cancelled) setLoading(false); } })(); return () => { cancelled = true; }; }, [quoteId, v3Pricing]); // V3: Use v3Pricing (from props) or localV3Pricing (fetched here) if available const effectiveV3Pricing = v3Pricing || localV3Pricing; const isV3 = !!effectiveV3Pricing; const effectiveHardwareTotal = isV3 ? effectiveV3Pricing.pricing.breakdown.hardware : (pricingData?.hardware_total || hardwareTotal || 0); const effectiveMultiplier = isV3 ? (effectiveV3Pricing.pricing.totalQuoteValue / effectiveV3Pricing.pricing.breakdown.hardware) : (pricingData?.multiplier || multiplier || 4.0); // Calculate final price with proper fallbacks let finalPrice = isV3 ? effectiveV3Pricing.pricing.totalQuoteValue : pricingData?.final_price; if (!finalPrice || finalPrice <= 0) { finalPrice = effectiveHardwareTotal * effectiveMultiplier; } const profit = isV3 ? effectiveV3Pricing.pricing.breakdown.profit : (pricingData?.gross_profit || (finalPrice - effectiveHardwareTotal) || 0); const materialsTotal = isV3 ? effectiveV3Pricing.pricing.breakdown.materials : (pricingData?.materials_total || 0); const labourTotal = isV3 ? effectiveV3Pricing.pricing.breakdown.labour : (pricingData?.labour_total || 0); const marginPct = isV3 ? Math.round(effectiveV3Pricing.pricing.grossMarginPercent) : (finalPrice > 0 ? Math.round((profit / finalPrice) * 100) : 0); // Loading state if (loading) { return (
Loading quote summary...
 ); } // Error state if (loadError) { return (
Failed to load quote
{loadError}
 ); } // Check if quote is still processing (no pricing data available) const quoteStatus = quoteDetails?.status; const isProcessing = quoteStatus && !['draft', 'Draft'].includes(quoteStatus); if (isProcessing && finalPrice === 0 && !isV3) { return (
Quote Still Processing
This quote hasn't finished processing yet.
Status: {quoteStatus}
); } const fmt2 = (n) => '$' + (n || 0).toLocaleString('en-AU', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); return (
{/* Client / status row */}
No client assigned
Draft
No job location added
Last updated today
{/* Billing */}
Billing
{/* GST Toggle */}
{fmt2(includeGst ? finalPrice * 1.1 : finalPrice)}
{includeGst ? 'inc GST' : 'ex GST'}
{/* Price breakdown header */}
Price breakdown
{/* Materials - VRV System + auto-allocated materials combined */}
{/* Labour - Click to edit */}
{/* Net Profit - Click to edit */}
{/* Job overview */}
Job overview
{/* Client details */}
Client details
); } window.SetPriceScreen = SetPriceScreen; window.PriceSummaryScreen = PriceSummaryScreen; // ─── Client Details ────────────────────────────────────────── function ClientDetailsScreen({ onBack, onFinish, quoteId }) { const [name, setName] = React.useState(''); const [email, setEmail] = React.useState(''); const [phone, setPhone] = React.useState(''); const [billing, setBilling] = React.useState(''); const [sameAddress, setSameAddress] = React.useState(true); const [saving, setSaving] = React.useState(false); const [loading, setLoading] = React.useState(!!quoteId); // Load existing client data React.useEffect(() => { if (!quoteId || typeof api === 'undefined') { setLoading(false); return; } (async () => { try { const response = await api.getClient(quoteId); if (response?.data) { setName(response.data.name || ''); setEmail(response.data.email || ''); setPhone(response.data.phone || ''); setBilling(response.data.billing_address || ''); } } catch (err) { console.warn('Failed to load client:', err); } finally { setLoading(false); } })(); }, [quoteId]); const handleFinish = async () => { if (quoteId && typeof api !== 'undefined') { setSaving(true); try { await api.updateClient(quoteId, { name: name.trim(), email: email.trim(), phone: phone.trim(), billing_address: billing.trim(), }); } catch (err) { console.error('Failed to save client:', err); } setSaving(false); } onFinish(); }; const labelStyle = { color: '#fff', fontSize: 14, fontWeight: 500, marginBottom: 8 }; const inputStyle = { width: '100%', background: '#262626', border: '1px solid #2C2C2C', borderRadius: 10, padding: '14px 14px', color: '#fff', fontSize: 14, fontFamily: 'inherit', outline: 'none', boxSizing: 'border-box', }; const placeholderColor = '#737373'; return (
{/* Header */}
Client Details
{/* Yellow progress bar (1/3) */}
{/* Body */}
Client Details
Review and confirm client details
Billing details
Name
setName(e.target.value)} placeholder="Enter clients first name and surname" style={inputStyle}/>
Email
setEmail(e.target.value)} type="email" placeholder="Enter clients email address" style={inputStyle}/>
Phone
setPhone(e.target.value)} type="tel" placeholder="Enter clients phone number" style={inputStyle}/>
Billing address
setBilling(e.target.value)} placeholder="Enter clients billing address" style={inputStyle}/>
Site address
{/* Footer */}
); } window.ClientDetailsScreen = ClientDetailsScreen; // ─── Net Profit (edit) ─────────────────────────────────────── function NetProfitScreen({ onBack, onSave, hardwareCost = 0, materialsTotal = 2577, labourTotal = 800, initialProfit = 1688, finalPrice, quoteId, v3Pricing }) { const [profit, setProfit] = React.useState(initialProfit); const [mode, setMode] = React.useState('pct'); // 'pct' | 'dollar' // Update profit when initialProfit changes (e.g., when V3 data loads) React.useEffect(() => { if (initialProfit > 0) { setProfit(initialProfit); } }, [initialProfit]); // Auto-save when going back (no API call needed) const handleBack = () => { if (onSave) onSave(profit); else onBack(); }; // V3: Total is fixed (Hardware × Multiplier), not calculated from components // External costs = Hardware + Materials (what you pay suppliers) const externalCosts = hardwareCost + materialsTotal; const total = finalPrice || (externalCosts + labourTotal + profit); const taxTotal = total * 1.10; // Calculate percentages based on the fixed total const extPct = total > 0 ? Math.round((externalCosts / total) * 100) : 0; const labPct = total > 0 ? Math.round((labourTotal / total) * 100) : 0; const profPct = Math.max(0, 100 - extPct - labPct); const marginPct = total > 0 ? Math.round((profit / total) * 100) : 0; const fmt = (n) => '$' + Number(n).toLocaleString('en-AU', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); const fmt0 = (n) => '$' + Math.round(n).toLocaleString('en-AU'); // Slider 0..max profit — derive from finalPrice if provided, else fall back to 3× initial const maxProfit = finalPrice ? Math.max(finalPrice - externalCosts - labourTotal, initialProfit * 1.2, 1000) : Math.max(initialProfit * 3, 5000); return (
{/* Body */}
{/* $ / % toggle */}
{[ { key: 'dollar', label: '$' }, { key: 'pct', label: '%' }, ].map(o => { const active = mode === o.key; return ( ); })}
{/* Big number card */}
{mode === 'pct' ? `${marginPct}%` : fmt(profit)}
{mode === 'pct' ? `${fmt(profit)} net profit` : `${marginPct}% margin`}
{/* Segmented bar */}
{mode === 'pct' ? `${extPct}%` : fmt0(externalCosts)}
{mode === 'pct' ? `${labPct}%` : fmt0(labourTotal)}
{mode === 'pct' ? `${profPct}%` : fmt0(profit)}
{/* Legend */}
{[ { c: '#F97316', label: 'External costs' }, { c: '#3B82F6', label: 'Internal labour' }, { c: '#22C55E', label: 'Net profit' }, ].map((row, i) => (
{row.label}
))}
{/* Slider */}
Adjust net profit
{(() => { const pct = Math.max(0, Math.min(100, (profit / maxProfit) * 100)); return (
setProfit(Number(e.target.value))} style={{ position: 'relative', zIndex: 2, width: '100%', appearance: 'none', WebkitAppearance: 'none', background: 'transparent', height: 28, margin: 0, cursor: 'pointer', opacity: 0, }} />
); })()}
{/* Summary */}
Summary
{[ ['External costs', externalCosts], ['Internal labour', labourTotal], ['Net profit', profit], ].map(([label, v], i) => (
{label} {fmt(v)}
))}
Total estimate {fmt(total)}
Inclusive of tax {fmt(taxTotal)}
); } window.NetProfitScreen = NetProfitScreen; // ─── Item Cost Editor (Materials / Labour) ─────────────────── function ItemCostScreen({ title, total, items, setItems, unitNoun, onBack, onSave }) { const list = items; const subtotal = list.reduce((s, it) => s + (it.qty * it.unit), 0); const fmt2 = (n) => '$' + Number(n).toLocaleString('en-AU', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); const updateItem = (id, patch) => setItems(l => l.map(it => it.id === id ? { ...it, ...patch } : it)); // Auto-save when going back - just update parent state, no API call const handleBack = () => { if (onSave) onSave(list); else onBack(); }; return (
{/* Body */}
{/* Section header with + */}
{unitNoun === 'employee' ? 'Roles' : 'Material'}
{list.map(it => { const lineTotal = it.qty * it.unit; return (
{it.name}
{/* Employee/Subcontractor toggle for labour items */} {unitNoun === 'employee' && (
)}
{/* Quantity */}
Quantity ({it.unitLabel || (unitNoun === 'employee' ? 'employees' : 'units')})
{ const v = Number(e.target.value.replace(/\D/g, '')); updateItem(it.id, { qty: isNaN(v) ? 0 : v }); }} style={{ flex: 1, minWidth: 0, height: 38, background: '#171717', border: '1px solid #2C2C2C', borderRadius: 8, color: '#fff', textAlign: 'center', fontFamily: 'inherit', fontSize: 14, fontVariantNumeric: 'tabular-nums', outline: 'none', }} />
{/* Est. cost per unit */}
{unitNoun === 'employee' ? 'Est. hourly rate' : 'Est. cost per unit'}
$ { const v = parseFloat(e.target.value.replace(/[^0-9.]/g, '')); updateItem(it.id, { unit: isNaN(v) ? 0 : v }); }} style={{ width: '100%', height: 38, background: '#171717', border: '1px solid #2C2C2C', borderRadius: 8, color: '#fff', padding: '0 12px 0 24px', textAlign: 'right', fontFamily: 'inherit', fontSize: 14, fontVariantNumeric: 'tabular-nums', outline: 'none', boxSizing: 'border-box', }} />
Item subtotal {fmt2(lineTotal)}
); })}
); } // Pre-seeded data matching the screenshot's vibe (mirrors PriceSummaryScreen totals) const MATERIAL_ITEMS = [ { id: 'm1', name: 'Daikin Inverter Ducted 8.5kW', qty: 1, unit: 2678.40, unitLabel: 'units' }, { id: 'm2', name: 'Plenum Box', qty: 1, unit: 224.00, unitLabel: 'units' }, { id: 'm3', name: 'Return Air Allowance', qty: 1, unit: 200.00, unitLabel: 'units' }, { id: 'm4', name: 'Copper Pipe Allowance', qty: 12, unit: 20.00, unitLabel: 'metres' }, { id: 'm5', name: 'Outlet Allowance (incl. grille and ducting)', qty: 1, unit: 450.00, unitLabel: 'units' }, { id: 'm6', name: 'Feet / Polyslab', qty: 1, unit: 80.00, unitLabel: 'units' }, { id: 'm7', name: '20A Circuit Breaker', qty: 1, unit: 16.00, unitLabel: 'units' }, { id: 'm8', name: '20A Isolator Switch', qty: 1, unit: 24.00, unitLabel: 'units' }, { id: 'm9', name: '2.5mm² Power Cable', qty: 4, unit: 2.00, unitLabel: 'metres' }, ]; const LABOUR_ITEMS = [ { id: 'l1', name: 'HVAC Technician', qty: 8, unit: 100.00, unitLabel: 'hours' }, { id: 'l2', name: 'Apprentice', qty: 8, unit: 50.00, unitLabel: 'hours' }, ]; function MaterialsScreen({ onBack, onSave, items, setItems, quoteId }) { const [loading, setLoading] = useState(!!quoteId && (!items || items.length === 0)); const [loadError, setLoadError] = useState(null); const [localItems, setLocalItems] = useState(items && items.length > 0 ? items : []); // Load V3 pricing and hardware data if quoteId provided and no items passed in useEffect(() => { if (!quoteId || typeof api === 'undefined') { setLoading(false); return; } // If items were passed from parent with V3 data, use them if (items && items.length > 0 && (items[0].id?.startsWith('hw') || items[0].id?.startsWith('v3m'))) { setLocalItems(items); setLoading(false); return; } let cancelled = false; (async () => { try { const allMaterials = []; let hardwareTotal = 0; // 1. Fetch V3 pricing first to get the hardware total and allocated materials try { const v3Data = await api.calculateV3Pricing(quoteId, 15, 3.5); if (!cancelled && v3Data?.data) { // Get hardware total from V3 pricing (this comes from extracted_hardware.manufacturer_total) hardwareTotal = v3Data.data.pricing?.breakdown?.hardware || 0; // Add VRV System as a single line item with the total if (hardwareTotal > 0) { allMaterials.push({ id: 'hw0', name: 'VRV System (from supplier quote)', qty: 1, unit: hardwareTotal, unitLabel: 'system', }); } // Add V3 allocated materials if (v3Data.data.allocation?.materials) { v3Data.data.allocation.materials.forEach((mat, i) => { allMaterials.push({ id: `v3m${i}`, name: mat.name, qty: mat.quantity, unit: mat.unitPrice, unitLabel: mat.unit || 'each', }); }); } } } catch (v3Err) { console.warn('Failed to load V3 pricing:', v3Err); // Fallback: try to load hardware items directly try { const hwData = await api.getHardware(quoteId); if (!cancelled && hwData?.items) { hwData.items.forEach((hw, i) => { if (!hw.deleted && !hw.is_deleted) { allMaterials.push({ id: `hw${i}`, name: hw.name || hw.model || hw.description || 'VRV Equipment', qty: hw.qty || hw.quantity || 1, unit: hw.unit || hw.price || 0, unitLabel: 'units', }); } }); } } catch (hwErr) { console.warn('Failed to load hardware:', hwErr); } } if (!cancelled) { if (allMaterials.length > 0) { setLocalItems(allMaterials); } else { // Fallback to default items if nothing loaded setLocalItems(MATERIAL_ITEMS); } } } catch (err) { if (!cancelled) setLoadError(err.message); } finally { if (!cancelled) setLoading(false); } })(); return () => { cancelled = true; }; }, [quoteId, items]); // Save updates parent state and navigates back (no API call needed) const handleSave = (updatedItems) => { if (setItems) setItems(updatedItems); onBack(); }; if (loading) { return (
Loading materials...
); } if (loadError) { return (
Failed to load materials
{loadError}
); } return ; } function LabourScreen({ onBack, onSave, items, setItems, quoteId }) { const [loading, setLoading] = useState(!!quoteId && (!items || items.length === 0)); const [loadError, setLoadError] = useState(null); const [localItems, setLocalItems] = useState(items && items.length > 0 ? items : []); // Load V3 labour data if quoteId provided and no items passed in useEffect(() => { if (!quoteId || typeof api === 'undefined') { setLoading(false); return; } // If items were passed from parent with V3 data, use them if (items && items.length > 0 && items[0].id?.startsWith('v3l')) { setLocalItems(items); setLoading(false); return; } let cancelled = false; (async () => { try { // Fetch V3 pricing to get labour breakdown const v3Data = await api.calculateV3Pricing(quoteId, 15, 3.5); if (!cancelled && v3Data?.data?.labourBreakdown) { const v3Labour = v3Data.data.labourBreakdown.map((tech, i) => ({ id: `v3l${i}`, name: tech.role, qty: tech.hours, unit: tech.rate, unitLabel: 'hours', type: 'Employee', })); setLocalItems(v3Labour); } else { // Fallback to default setLocalItems(LABOUR_ITEMS); } } catch (err) { console.warn('Failed to load V3 labour:', err); // Fallback to default if (!cancelled) setLocalItems(LABOUR_ITEMS); } finally { if (!cancelled) setLoading(false); } })(); return () => { cancelled = true; }; }, [quoteId, items]); // Save updates parent state and navigates back (no API call needed) const handleSave = (updatedItems) => { if (setItems) setItems(updatedItems); onBack(); }; if (loading) { return (
Loading labour costs...
); } if (loadError) { return (
Failed to load labour
{loadError}
); } return ; } window.DEFAULT_MATERIAL_ITEMS = MATERIAL_ITEMS; window.DEFAULT_LABOUR_ITEMS = LABOUR_ITEMS; window.MaterialsScreen = MaterialsScreen; window.LabourScreen = LabourScreen;