// ───────────────────────────────────────────────────────────────────── // MONTHLY EXPENSE REPORT — expense sheet · document preview · email. // The back half of the flow. The document is rendered from the same // records the workspace edits — change a record, the report changes. // ───────────────────────────────────────────────────────────────────── const { useState: useRS } = React; // ── The original document — pulled from the Vault, shown as captured ── function OriginalViewerSheet({ expense, onClose }) { const x = expense; const isPhoto = x.fileKind === 'photo'; const baseId = x.baseId || x.id; // Every line item captured from this same document (invoice-level view). const lines = REPORT_EXPENSES.filter(e => e.vendor === x.vendor && e.date === x.date && e.period === x.period); const total = lines.reduce((s, e) => s + e.amount, 0); // Cream "scan" palette — reads as a real captured document, not UI chrome. const PAPER = '#f2ecdd', PINK = '#26221a', PRULE = '#cdbf9f', PMUTE = '#8a8068', PGOLD = '#8a6a30'; const docLabel = { fontFamily: T.mono, fontSize: 7, letterSpacing: '0.16em', textTransform: 'uppercase', color: PMUTE }; const invNo = (x.file || '').replace(/\.[a-z]+$/i, ''); const paper = (
{/* scanner light-band + torn top edge sell the "captured original" read */}
{/* faint diagonal ORIGINAL watermark */} {/* letterhead */}
{x.vendor}
{isPhoto ? 'Sales receipt' : 'Vendor invoice'}
{isPhoto ? 'Receipt' : 'Invoice'} №
{invNo}
{x.date}, 2026
Description Amount · USD
{lines.map(e => { const hit = e.id === baseId; return (
{e.desc} {hit && ← this expense} {rMoney(e.amount)}
); })}
TOTAL {rMoney(total)}
{/* signature row — a tell of a real document */}
{x.vendor.split(' ')[0]}
Authorized signature
{/* scan/vault provenance strip beneath the sheet */}
{isPhoto ? 'Photographed' : 'Scanned'} original · {x.file} · captured via Upload Expense · preserved in the Vault
); const node = (
{x.file}
{isPhoto ? 'PHOTO CAPTURE' : 'PDF'} · ORIGINAL PRESERVED · VAULT
{paper}
); const stage = (typeof document !== 'undefined') ? document.getElementById('proto-stage') : null; return stage ? ReactDOM.createPortal(node, stage) : node; } // ── Expense sheet — review / edit / exclude / delete, from any phase ── function ReportExpenseSheet({ expense, locked = false, onClose }) { const store = useReportStore(); // Split shares carry a baseId — all record state lives on the base expense. const baseId = expense.baseId || expense.id; const x = { ...expense, ...(expense.baseId ? {} : (store.edits[baseId] || {})) }; const excluded = !!store.excluded[baseId]; const [mode, setMode] = useRS('view'); // view | edit | assign | confirm-delete const [desc, setDesc] = useRS(x.desc); const [amount, setAmount] = useRS(String(x.fullAmount || x.amount)); const [note, setNote] = useRS(x.note || ''); const [viewing, setViewing] = useRS(false); const tgt = reportTarget(x.vehicleId); // The invoice this expense was filed from — every line item captured together. const invoiceRows = REPORT_EXPENSES.filter(e => e.vendor === x.vendor && e.date === x.date && e.period === x.period); const saveEdit = () => { ReportStore.setIn('edits', baseId, { ...(store.edits[baseId] || {}), desc, amount: parseFloat(amount) || x.amount, note: note.trim() || null, }); setMode('view'); }; const inputStyle = { width: '100%', background: P.ink, border: `1px solid ${P.slate}`, padding: '10px 12px', color: P.paper, outline: 'none', fontFamily: T.body, fontSize: 12.5, }; const actionRow = (icon, label, onClick, danger = false) => ( ); const node = (
{/* header */}
{x.category} · {tgt.short}
{x.vendor}
{x.date}, 2026 · {x.contributor ? `Submitted by ${x.contributor}` : 'Uploaded by you'}
{rMoney(x.amount)}
{x.desc}
{x.note && (
"{x.note}"
)} {/* original */}
{/* actions */} {locked ? (
Part of a sent report — archived exactly as delivered.
) : mode === 'edit' ? (
Description setDesc(e.target.value)} style={inputStyle} />
Amount (USD) setAmount(e.target.value)} inputMode="decimal" style={inputStyle} />
Note · printed on the report