Please find attached your account statement for ${stmt.period} for ${inst.name} account ${inst.account}. Your ${stmt.amountLabel.toLowerCase()} is ${stmt.amount}.
This is a system-generated email. Please do not reply.
Source email preview · not available to send or forward in this demo.
`;
window.open(URL.createObjectURL(new Blob([html], { type:'text/html' })), '_blank');
}
// ---- Convert a statement into another record type ----
// A statement detected from the inbox isn't always an account statement: it may
// really be a payment receipt, or a credit-card bill that has to be paid. These
// builders turn the same record into a Receipt or a Bill object so it can be
// MOVED into those sections — the statement leaves Banking and lands there.
const RC_MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
const isoToShort = iso => { if (!iso) return ''; const d = new Date(iso); return isNaN(d) ? '' : `${RC_MONTHS[d.getMonth()]} ${d.getDate()}`; };
const convRef = stmt => ((stmt.id || 'tx').toUpperCase() + '-' + (stmt.periodISO || '').replace(/-/g, '')).replace(/[^A-Z0-9-]/g, '');
const filesToAttachments = stmt => (stmtFiles(stmt) || []).map((f, n) => ({ id: (stmt.id || 'st') + '-a' + n, name: f.name, size: f.size }));
// Statement -> Receipt (a payment/confirmation record filed under Receipts).
function statementToReceipt(inst, stmt, tm) {
const settled = stmt.status === 'paid' || stmt.status === 'reviewed';
return {
id: 'r-' + (stmt.id || Date.now()),
merchant: inst.name,
icon: inst.icon,
tint: tm.tint || 'teal',
detail: `${stmt.amountLabel} · ${stmt.period}`,
order: convRef(stmt),
items: [{ label: stmt.amountLabel, amt: stmt.amountVal }],
ccy: 'USD',
amountVal: stmt.amountVal,
date: isoToShort(stmt.periodISO),
dateISO: stmt.periodISO || new Date().toISOString().slice(0, 10),
cat: 'Banking',
type: settled ? 'purchase' : 'statement',
source: true,
mailbox: inst.mailbox,
sender: inst.sender,
attachments: filesToAttachments(stmt),
convertedFrom: { kind: 'statement', inst: inst.name, account: inst.account, mailbox: inst.mailbox },
};
}
// Statement -> Bill (a payable, filed under Bills with a due date).
function statementToBill(inst, stmt, tm) {
const status = stmt.status === 'paid' ? 'paid' : stmt.status === 'overdue' ? 'overdue' : 'pending';
return {
id: 'b-' + (stmt.id || Date.now()),
merchant: inst.name,
cat: 'Banking',
catId: 'banking',
catTint: tm.tint || 'gold',
icon: inst.icon,
ccy: 'USD',
amountVal: stmt.amountVal,
due: stmt.due || isoToShort(stmt.periodISO),
dueISO: stmt.periodISO || new Date().toISOString().slice(0, 10),
status,
account: inst.account,
confidence: 95,
mailbox: inst.mailbox,
sender: inst.sender,
items: [{ label: stmt.amountLabel, amt: stmt.amountVal }],
attachments: filesToAttachments(stmt),
convertedFrom: { kind: 'statement', inst: inst.name, account: inst.account, mailbox: inst.mailbox },
};
}
function fileSummary(files) {
if (files.length === 1) { const f = files[0]; return `${f.pages ? f.pages + '-page ' : ''}${f.kind || 'file'}`; }
const kinds = [...new Set(files.map(f => f.kind).filter(Boolean))].join(', ');
return `${files.length} files${kinds ? ' · ' + kinds : ''}`;
}
// Row download control — direct download for one file, a popover picker for many.
function StmtAttach({ files }) {
const [open, setOpen] = useState(false);
const [pos, setPos] = useState(null);
const btnRef = useRef(null);
useEffect(() => {
if (!open) return;
const close = () => setOpen(false);
const onKey = e => { if (e.key === 'Escape') setOpen(false); };
window.addEventListener('scroll', close, true);
window.addEventListener('resize', close);
document.addEventListener('keydown', onKey);
return () => { window.removeEventListener('scroll', close, true); window.removeEventListener('resize', close); document.removeEventListener('keydown', onKey); };
}, [open]);
if (files.length === 1)
return ;
const toggle = e => {
e.stopPropagation();
if (open) { setOpen(false); return; }
const r = btnRef.current.getBoundingClientRect();
const right = Math.max(12, window.innerWidth - r.right);
const estH = 54 + files.length * 44 + 42; // header + rows + "download all"
const spaceBelow = window.innerHeight - r.bottom;
const openUp = spaceBelow < estH + 16 && r.top > spaceBelow; // flip up when cramped below
setPos(openUp ? { right, bottom: window.innerHeight - r.top + 8 } : { right, top: r.bottom + 8 });
setOpen(true);
};
const pick = f => { openAttachment(f); setOpen(false); };
return (
{open && pos && ReactDOM.createPortal(
{ e.stopPropagation(); setOpen(false); }} />
e.stopPropagation()}>
{files.length} attachments · pick one to open
{files.map(f => (
))}
,
document.body
)}
);
}
// ---- Statement detail drawer (view + quick actions) ----
function StatementDrawer({ inst, stmt, typeMetaFn, onClose, onStatus, onDelete, onConvert }) {
const tm = typeMetaFn(inst.type);
const m = ST_META[stmt.status];
const files = stmtFiles(stmt);
// A detected "statement" is sometimes really a payment receipt, or a
// credit-card bill that has to be paid. Suggest the right destination from
// the amount label, but let the user move it either way.
const suggested = /due|payable|emi|minimum/i.test(stmt.amountLabel || '') ? 'bill'
: /paid|received|refund/i.test(stmt.amountLabel || '') ? 'receipt' : null;
const [dest, setDest] = useState(suggested || 'receipt');
const DEST = {
receipt: { note: 'Move this out of Banking and file it under Receipts as a payment record — for when the email is really a confirmation, not a statement.', label: 'Move to Receipts', icon: 'receipt' },
bill: { note: 'Move this out of Banking and file it under Bills as a payable, with its amount and due date — useful for credit-card statements you need to pay.', label: 'Move to Bills', icon: 'dollar-sign' },
};
const d = DEST[dest];
// A record can't be filed without a figure — Receipts and Bills both key off
// the amount. If the detected statement has none, intercept the move and ask
// for it inline, then complete the move with the value the user enters.
const hasAmount = stmt.amountVal != null && stmt.amountVal !== '';
const [asking, setAsking] = useState(false);
const [amt, setAmt] = useState('');
const [amtErr, setAmtErr] = useState('');
const amtRef = useRef(null);
useEffect(() => { if (asking && amtRef.current) amtRef.current.focus(); }, [asking]);
const tryMove = () => {
if (hasAmount) { onConvert(dest); return; } // amount present — move straight away
if (!asking) { setAsking(true); setAmtErr(''); return; } // no amount — reveal the inline prompt
const n = parseFloat(amt.replace(/[^0-9.\-]/g, ''));
if (!amt.trim() || !isFinite(n)) { setAmtErr('Enter an amount to file this record.'); return; }
onConvert(dest, n); // move with the amount the user added
};
return (