// ───────────────────────────────────────────────────────────────────── // UPLOAD RECEIPT — steps 2-3 + the flow controller. // ReviewStep · what the archive read (totals locked to the document) // AllocateStep· per-line ledger → car (make/model/VIN) / many / overhead // AllocatorSheet · the per-line target picker // DoneStep · records written + reimbursement roll-up // ReceiptFlow · state machine wiring it together // ───────────────────────────────────────────────────────────────────── const { useState: useRcA } = React; // member + vehicle helpers ------------------------------------------------ const memberById = (id) => RECEIPT.members.find(m => m.id === id) || RECEIPT.paidBy; const ownerOf = (vid) => memberById(RECEIPT.vehicleOwner[vid]); const ledgerName = (v) => (v && v.status === 'In Restoration' ? 'Restoration ledger' : 'Service ledger'); // ── editable, "correct a misread" header field ────────────────────────── function EditableField({ label, value, onChange, mono, conf = 'High' }) { const [editing, setEditing] = useRcA(false); return (
{label}
{editing ? ( onChange(e.target.value)} onBlur={() => setEditing(false)} onKeyDown={(e) => { if (e.key === 'Enter') setEditing(false); }} style={{ width: '100%', marginTop: 4, background: 'transparent', border: 'none', borderBottom: `1px solid ${P.gold}`, outline: 'none', color: P.paper, fontFamily: mono ? T.mono : T.body, fontSize: 12.5, padding: '2px 0', }} /> ) : (
setEditing(true)} style={{ fontFamily: mono ? T.mono : T.body, fontSize: 12.5, color: P.paper, marginTop: 4, cursor: 'text', }}>{value}
)}
); } // ───────────────────────────────────────────────────────────────────── // STEP 2 — REVIEW // ───────────────────────────────────────────────────────────────────── function ReviewStep({ header, setHeader, onContinue }) { const { currency } = RECEIPT; const tot = receiptTotals(); return (
EXTRACTED · {RECEIPT.lines.length} LINE ITEMS
REVIEW THE
EXTRACTION
{/* original preserved */}
{RECEIPT.intake.file}
ORIGINAL PRESERVED · VAULT
{/* header fields */} VENDOR & DOCUMENT
setHeader(h => ({ ...h, vendor: v }))} />
setHeader(h => ({ ...h, date: v }))} mono />
Vendor type
{RECEIPT.vendor.kind}
Invoice no.
{RECEIPT.vendor.invoiceNo}
VAT-ID
{RECEIPT.vendor.vatId}
Tap any field to correct a misread.
{/* currency */} CURRENCY
{currency.symbol}
{currency.code}
ORIGINAL
Home ledger {currency.home}
{currency.symbol}1 = {currency.homeSymbol}{currency.rate} · {currency.rateDate} · {currency.rateSource}
{/* line items */} LINE ITEMS
{RECEIPT.lines.map((l, i) => (
{l.desc}
{l.qty} {l.unit.toUpperCase()}
{eur(l.net)}
{usd(toHome(l.net))}
))}
{/* totals — locked */}
{[['Subtotal', tot.sub], [`VAT · ${Math.round(RECEIPT.vatRate * 100)}%`, tot.vat]].map(([k, v]) => (
{k} {eur(v)}
))}
Total {usd(tot.home)} HOME
{eur(tot.total)}
Totals are read from the document — never keyed by hand.
{/* CTA */}
); } // ── target chip (shown on a ledger row) ───────────────────────────────── function TargetChip({ alloc, vehiclesById }) { if (!alloc) { return Choose target ; } if (alloc.mode === 'split') { const n = (alloc.splits || []).length; return Split · {n} {n === 1 ? 'vehicle' : 'vehicles'} ; } if (alloc.mode === 'overhead') { return Collection Overhead ; } if (alloc.mode === 'none') { return No assignment ; } const v = vehiclesById[alloc.vehicleId]; if (!v) return null; return ( {v.year} {v.make} · {v.vin.slice(-4)} ); } // ───────────────────────────────────────────────────────────────────── // STEP 3 — ALLOCATE // ───────────────────────────────────────────────────────────────────── function AllocateStep({ vehicles, targets, onEditLine, onContinue }) { const vehiclesById = {}; vehicles.forEach(v => { vehiclesById[v.id] = v; }); const { byTarget, unallocated } = rollUp(targets); const tot = receiptTotals(); const allocatedNet = RECEIPT.lines.reduce((s, l) => s + (targets[l.id] ? l.net : 0), 0); const pct = Math.round((allocatedNet / tot.sub) * 100); const complete = unallocated.length === 0; // ordered roll-up: vehicles first, then overhead, then review const targetIds = Object.keys(byTarget).sort((a, b) => (a === 'overhead' || a === 'review' ? 1 : 0) - (b === 'overhead' || b === 'review' ? 1 : 0)); return (
STEP 3 · COST ALLOCATION
ALLOCATE
THE COST
Send each line to a specific car, several cars, or shared overhead. The archive pre-assigned what it was confident about — confirm or change.
{/* progress */}
{RECEIPT.lines.length - unallocated.length} of {RECEIPT.lines.length} lines allocated {pct}%
{/* ledger */} THE LEDGER
{RECEIPT.lines.map(l => { const a = targets[l.id]; return ( ); })}
{/* roll-up */}
ALLOCATION SUMMARY
{targetIds.map(id => { const t = byTarget[id]; const isOver = id === 'overhead'; const isReview = id === 'review'; const v = vehiclesById[id]; return (
{isReview ? 'No assignment' : isOver ? 'Collection Overhead' : `${v.year} ${v.make} ${v.model}`}
{isReview ? 'FLAGGED FOR REVIEW' : isOver ? 'SHARED EXPENSE' : `OWNER · ${ownerOf(id).name.toUpperCase()}`} · {t.lineIds.length} LINE{t.lineIds.length === 1 ? '' : 'S'}
{eur(t.grossE)}
{usd(t.homeUsd)}
); })}
Figures include VAT, distributed proportionally. Home values at {RECEIPT.currency.symbol}1 = {RECEIPT.currency.homeSymbol}{RECEIPT.currency.rate}.
{/* CTA */}
{!complete && {unallocated.length} line{unallocated.length === 1 ? '' : 's'} still need a target}
); } Object.assign(window, { ReviewStep, AllocateStep, TargetChip, EditableField, memberById, ownerOf, ledgerName });