// ─────────────────────────────────────────────────────────────────────
// UPLOAD RECEIPT — single-screen flow. Capture → Review → Archive.
//
// Deliberately NOT a wizard. One screen: drop a document, it extracts,
// you glance over what it read, optionally re-assign a line or jot a
// note, and file it. Built for restorers / mechanics / assistants who
// want a receipt into the archive in seconds — not an accounting task.
//
// Line items are assigned INLINE (tap a line → lightweight action sheet:
// one car, several cars, or collection overhead). No percentage math.
// ─────────────────────────────────────────────────────────────────────
const { useState: useRcF, useRef: useRcRef } = React;
// What the archive understands automatically — preview states shown on the
// Capture screen to communicate value BEFORE extraction occurs.
const EXTRACT_FIELDS = [
{ k: 'Vendor', v: 'Auto-detected', icon: 'Building2' },
{ k: 'Date', v: 'Auto-detected', icon: 'Calendar' },
{ k: 'Currency', v: 'Auto-detected', icon: 'Coins' },
{ k: 'Amount', v: 'Auto-detected', icon: 'CircleDollarSign' },
{ k: 'Category', v: 'Classified', icon: 'Tags' },
{ k: 'Tax / VAT', v: 'Parsed', icon: 'Percent' },
];
const NOTE_CHIPS = [
'Seller included additional parts not listed on the invoice',
'Work performed on the matching-numbers engine',
'Parts purchased but not yet installed',
'Expense approved by collection owner',
];
// ── header (simple — no step rail) ──────────────────────────────────────
function RcTopBar({ eyebrow, onBack, title = 'Upload Receipt' }) {
return (
{title}
{eyebrow}
);
}
// ── small parts for the scalable assignment sheet ───────────────────────
// A vehicle's thumbnail: real hero when we have one, otherwise a quiet
// marque monogram so a list of hundreds stays light.
function MarqueThumb({ v }) {
if (v && v.hero) {
return (
);
}
const code = (v && v.make ? v.make : '').replace(/[^A-Za-z]/g, '').slice(0, 2).toUpperCase();
return (
{code}
);
}
// Confidence pill — the archive's certainty, growing as it learns.
function ConfChip({ level }) {
const high = level === 'High';
return (
{high ? 'High confidence' : 'Worth a look'}
);
}
// One selectable vehicle row — radio (single) or checkbox (multi).
function AllocVehRow({ v, multi, selected, onClick, mb = 8 }) {
return (
);
}
// A vehicle already in the split — no checkbox; a gray × on the right removes it.
function SplitSelectedRow({ v, onRemove }) {
return (
{v.year} {v.make} {v.model}
);
}
function AllocSectionLabel({ children, right }) {
return (
{children}
{right}
);
}
// Lightweight one-tap shortcut row — recents & search results. Deliberately
// lighter than the Suggested Match hero: no boxed border, just a hairline
// divider and a trailing arrow that reads "tap to assign".
function ShortcutVehRow({ v, onClick, selected }) {
return (
);
}
// Small descending-confidence meter (3 bars) for alternative recommendations.
function ConfMeter({ level = 0 }) {
return (
{[0, 1, 2].map(i => (
))}
);
}
// One row in the assignment selection list — radio + thumb + label + right slot.
function SelectRow({ selected, onClick, thumb, title, sub, right, last, onRemove }) {
return (
);
}
// VIN · status/project sub-line used inside SelectRow.
function VehSub({ v }) {
return (
VIN ···{(v.vin || '').slice(-4)}{v.project ? v.project : v.status}
);
}
//
// Scales to a collection of hundreds: the AI suggestion stays the primary
// recommendation up top, a search field finds any vehicle, and the list
// surfaces only the suggestion + recently-assigned cars + search results —
// never an endless manual scroll. Collection Overhead is always available.
// One vehicle · several vehicles (shared, divided evenly) · overhead.
// ─────────────────────────────────────────────────────────────────────
function AllocatorSheet({ line, vehicles, value, onApply, onClose, money }) {
const suggestedId = line.suggest;
const init = value && value.mode
? { ...value, splits: value.splits ? value.splits.map(s => ({ ...s })) : null }
: (suggestedId === 'overhead' ? { mode: 'overhead' } : { mode: 'vehicle', vehicleId: suggestedId });
const [alloc, setAlloc] = useRcF(init);
const [query, setQuery] = useRcF('');
const [added, setAdded] = useRcF([]); // vehicles pulled into the list via search
const [removed, setRemoved] = useRcF([]); // vehicle ids the user removed from the list
const [splitAdded, setSplitAdded] = useRcF([]); // split cars pulled in via search
const [splitEntered, setSplitEntered] = useRcF(init.mode === 'split'); // entered the multi editor yet?
// Pending non-vehicle destination chosen from the split editor's OR REASSIGN
// section. Held separately so the split layout stays intact until the user
// taps Assign. 'overhead' | 'none' | null.
const [reassignTo, setReassignTo] = useRcF(null);
// When reassignTo === 'single', the specific vehicle picked from the search
// results below (chosen in-place, without leaving the split screen).
const [reassignSingleId, setReassignSingleId] = useRcF(null);
// "A Single Car" picked from the Reassign list on the decision screen →
// CONTINUE leads to a dedicated single-car search step.
const [singleMode, setSingleMode] = useRcF(false);
const [singleEntered, setSingleEntered] = useRcF(false);
const multi = alloc.mode === 'split';
const inMultiUI = multi && splitEntered; // multi-vehicle editor vs. the decision screen
// Resolve everything against the full collection pool.
const byIdLocal = {};
vehicles.forEach(v => { byIdLocal[v.id] = v; });
const poolCount = vehicles.length;
const suggestedVehicle = suggestedId && suggestedId !== 'overhead' ? byIdLocal[suggestedId] : null;
const suggestedSelected = suggestedId === 'overhead'
? alloc.mode === 'overhead'
: (alloc.mode === 'vehicle' && alloc.vehicleId === suggestedId);
// CURRENT ASSIGNMENT reflects the line's ACTUAL current target (init), not
// the AI guess — whatever this line is allocated to is shown at the top.
const currentMode = init.mode; // 'vehicle' | 'overhead' | 'none' | 'split'
const currentVehicleId = init.mode === 'vehicle' ? init.vehicleId : null;
const currentVehicle = currentVehicleId ? byIdLocal[currentVehicleId] : null;
const selectCurrent = () => setAlloc(currentMode === 'vehicle' ? { mode: 'vehicle', vehicleId: currentVehicleId } : { mode: currentMode });
// Match reasoning only makes sense when the current target IS the AI suggestion.
const showReasoning = currentMode === 'vehicle' && currentVehicleId === suggestedId;
const recents = (typeof COLLECTION_RECENT_IDS !== 'undefined' ? COLLECTION_RECENT_IDS : [])
.map(id => byIdLocal[id]).filter(Boolean).filter(v => v.id !== suggestedId && !removed.includes(v.id)).slice(0, suggestedVehicle ? 2 : 3);
const recentIdSet = new Set(recents.map(v => v.id));
// Vehicles the user pulled in from search — shown in the main list below recents.
const addedVehicles = added
.map(id => byIdLocal[id])
.filter(Boolean)
.filter(v => v.id !== suggestedId && !recentIdSet.has(v.id) && !removed.includes(v.id));
const results = query.trim() ? searchVehicles(vehicles, query) : [];
const RESULT_CAP = 24;
const shownResults = results.slice(0, RESULT_CAP);
const moreResults = Math.max(0, results.length - RESULT_CAP);
const pickVehicle = (id) => setAlloc({ mode: 'vehicle', vehicleId: id });
const pickOverhead = () => setAlloc({ mode: 'overhead' });
const pickNone = () => setAlloc({ mode: 'none' });
// Search is a selection tool, not a list builder: picking a result becomes
// the new assignment outright and deselects whatever was chosen before.
const selectFromSearch = (id) => setAlloc({ mode: 'vehicle', vehicleId: id });
// Split view: add a searched car to the selected set, then clear search.
const addSplitFromSearch = (id) => {
setAlloc(a => {
if (a.mode !== 'split') return a;
if (a.splits.some(s => s.id === id)) return a;
const ids = [...a.splits.map(s => s.id), id];
const pct = Math.round(100 / ids.length);
return { mode: 'split', splits: ids.map(x => ({ id: x, pct })) };
});
setSplitAdded(s => s.includes(id) ? s : [...s, id]);
setQuery('');
};
// One-tap confirm helpers — the express path the redesign is built around.
const assignVehicle = (id) => { onApply({ mode: 'vehicle', vehicleId: id }); onClose(); };
const assignOverhead = () => { onApply({ mode: 'overhead' }); onClose(); };
// Split view: CLEAR is active once the user has added at least one car from
// search. Clicking it empties the split so they can start over.
const splitClearActive = multi && alloc.splits.length > 0;
const clearSplitAll = () => {
setAlloc(a => a.mode === 'split' ? { mode: 'split', splits: [] } : a);
setSplitAdded([]);
};
const selectSuggested = () => suggestedId === 'overhead' ? pickOverhead() : pickVehicle(suggestedId);
const inMulti = (id) => multi && alloc.splits.some(s => s.id === id);
// Entering the split editor starts with an empty selection — the user
// searches and picks the cars to divide this expense across.
const enterMulti = () => setAlloc({ mode: 'split', splits: [] });
const exitMulti = () => { setReassignTo(null); setReassignSingleId(null); setSplitEntered(false); selectSuggested(); };
// Back from the split editor returns to wherever the user came from:
// · opened a line that ALREADY had a split → they never saw the decision
// screen, so go straight back out to the line-items list (onClose).
// · chose "split" on the change-assignment screen → return to it (exitMulti).
const splitBack = () => { if (init.mode === 'split') { onClose && onClose(); } else { exitMulti(); } };
const toggleMulti = (id) => { setReassignTo(null); setReassignSingleId(null); setAlloc(a => {
const has = a.splits.some(s => s.id === id);
const ids = has ? a.splits.filter(s => s.id !== id).map(s => s.id) : [...a.splits.map(s => s.id), id];
const pct = ids.length ? Math.round(100 / ids.length) : 0;
return { mode: 'split', splits: ids.map(x => ({ id: x, pct })) };
}); };
const splitCount = multi ? alloc.splits.length : 0;
const selectedSplitVehicles = multi ? alloc.splits.map(s => byIdLocal[s.id]).filter(Boolean) : [];
// Cars in the split besides the current assignment — these stay visible in
// the allocation regardless of what's typed in the search field.
const extraSelected = selectedSplitVehicles.filter(v => v.id !== suggestedId);
// Search is the only way to add cars now: results exclude ones already in
// the split (they live in their own visible section above).
const splitResults = shownResults.filter(v => !inMulti(v.id));
// In multi mode the browse list excludes already-selected cars.
const browseSource = query.trim() ? shownResults : recents;
const multiBrowse = browseSource.filter(v => !inMulti(v.id));
// Has the user changed the assignment away from what it started as?
// The Assign button stays disabled until they pick something different.
const allocsEqual = (a, b) => {
if (!a || !b || a.mode !== b.mode) return false;
if (a.mode === 'overhead') return true;
if (a.mode === 'none') return true;
if (a.mode === 'vehicle') return a.vehicleId === b.vehicleId;
if (a.mode === 'split') {
const sa = a.splits || [], sb = b.splits || [];
if (sa.length !== sb.length) return false;
const key = s => s.id + ':' + s.pct;
const setB = new Set(sb.map(key));
return sa.every(s => setB.has(key(s)));
}
return false;
};
// Split is a destination choice: picking it selects the radio and turns the
// primary action into CONTINUE — tapping CONTINUE enters the multi editor.
const splitPending = multi && !splitEntered;
const singlePending = inMultiUI && reassignTo === 'single';
// "A Single Car" picked on the decision screen: CONTINUE → single-car search step.
const singleDecisionPending = singleMode && !singleEntered;
const primaryLabel = (!singleEntered && (splitPending || singlePending || singleDecisionPending)) ? 'Continue' : 'Assign';
const primaryEnabled = singleEntered ? (alloc.mode === 'vehicle')
: singleDecisionPending ? true
: splitPending ? true
: inMultiUI ? (reassignTo === 'single' ? true : reassignTo ? true : alloc.splits.length >= 2)
: !allocsEqual(alloc, init);
const onPrimary = () => {
if (!primaryEnabled) return;
if (singleEntered) { onApply(alloc); onClose(); return; }
if (singleDecisionPending) { setSingleEntered(true); return; }
if (splitPending) { setSplitEntered(true); return; }
if (singlePending) { setSingleEntered(true); return; }
let applied = alloc;
if (inMultiUI && (reassignTo === 'overhead' || reassignTo === 'none')) applied = { mode: reassignTo };
onApply(applied); onClose();
};
// Closing the search (× or emptying the field) without assigning a picked
// result snaps the selection back to the current assignment at the top.
const searchSelectionPending = !multi && alloc.mode === 'vehicle' && alloc.vehicleId !== suggestedId;
const clearSearch = () => {
setQuery('');
if (searchSelectionPending) selectSuggested();
};
// Reusable search field (single fallback + multi browse).
const searchField = (
)
)}
) : inMultiUI ? (
/* ════ SPLIT ACROSS MULTIPLE CARS — current assignment + search ════ */
{/* page title — sits at the top, above the selected vehicles */}
Select Vehicles for Split
{/* ── ADDED TO SPLIT — cars the user picked from search; hidden until then ── */}
{selectedSplitVehicles.length > 0 && (
{init.mode === 'split' && CURRENT ASSIGNMENT}
)}
)}
) : null}
{/* ── REASSIGN AWAY FROM THE SPLIT — only when this line opened
with a PRE-EXISTING split (the decision screen was skipped).
A new split has Back/Cancel, so it doesn't need this. ── */}
{init.mode === 'split' && (
OR REASSIGN
setReassignTo(reassignTo === 'single' ? null : 'single')}
thumb={}
title="A Single Vehicle"
sub={Assign the whole line to one vehicle} />
setReassignTo(reassignTo === 'overhead' ? null : 'overhead')}
thumb={}
title="Collection Overhead"
sub={Shared expense · not vehicle-specific} />
setReassignTo(reassignTo === 'none' ? null : 'none')}
last
thumb={}
title="No Assignment"
sub={Leave unassigned · explain with a note on the report} />
)}
) : (
/* ════ CHANGE ASSIGNMENT — edit an existing assignment, not browse ════ */
{/* ── CURRENT ASSIGNMENT — the archive's single recommendation ── */}
CURRENT ASSIGNMENT
{ setSingleMode(false); selectCurrent(); }}
last
thumb={currentVehicle
?
: }
title={currentVehicle ? `${currentVehicle.year} ${currentVehicle.make} ${currentVehicle.model}` : currentMode === 'none' ? 'No Assignment' : 'Collection Overhead'}
sub={currentVehicle
?
: {currentMode === 'none' ? 'Leave unassigned · explain with a note on the report' : 'Shared expense · not vehicle-specific'}}
/>
{/* match reasoning — only when the current target is the AI suggestion */}
{showReasoning && (line.why || line.learned) && (
{/* ── SELECT A DIFFERENT CAR — only when the current assignment is
already a single car; otherwise reassigning to a car goes
through the "A Single Car" → Continue step in Reassign. ── */}
{currentMode === 'vehicle' && (
SELECT A DIFFERENT VEHICLE
{searchField}
{/* search results — selecting one becomes the new assignment outright */}
{query.trim() ? (