// Bills — professional commitments + receipts manager. // Sortable columns, search, category/status filters, and an edit panel with a category picker. function StatCard({ label, value, sub, icon, tint }) { return (
{label}
{value}
{sub}
); } const STATUS_OPTS = [ { value:'all', label:'All statuses' }, { value:'overdue', label:'Overdue', tint:'red' }, { value:'pending', label:'Pending', tint:'gold' }, { value:'paid', label:'Paid', tint:'green' }, ]; const stCls = s => s === 'overdue' ? 'b-red' : s === 'paid' ? 'b-green' : 'b-gold'; const statusRank = { overdue:0, pending:1, paid:2 }; // ---------- Edit / detail drawer ---------- function fmtSize(b) { if (!b) return ''; return b >= 1048576 ? (b / 1048576).toFixed(1) + ' MB' : Math.max(1, Math.round(b / 1024)) + ' KB'; } function attIcon(name) { const e = (name.split('.').pop() || '').toLowerCase(); if (['jpg','jpeg','png','gif','webp','heic'].includes(e)) return 'image'; if (e === 'pdf') return 'file-text'; return 'file'; } function openAttachment(a) { if (a.url) { window.open(a.url, '_blank'); return; } const ext = (a.name.split('.').pop() || 'FILE').toUpperCase(); const html = '' + a.name + '
' + ext + '
' + a.name + '
Preview not available in this demo
'; window.open(URL.createObjectURL(new Blob([html], { type:'text/html' })), '_blank'); } function AttachmentList({ items, onRemove, onAdd }) { return (
{(items || []).map(a => (
{a.name}
{fmtSize(a.size)}
{onRemove && }
))} {onAdd && }
); } function BillDrawer({ bill, editing, onClose, onSave, onEdit, onDelete, onIgnore, dismissed, creating }) { const D = window.ZD_DATA; const [form, setForm] = useState(bill); const fileRef = useRef(null); useEffect(() => { setForm(bill); }, [bill]); if (!bill) return null; const catOpts = D.billCategories.map(c => ({ value:c.id, label:c.label, icon:c.icon, tint:c.tint })); const ccyOpts = Object.keys(D.fx.rates).map(c => ({ value:c, label:c })); const set = (k, v) => setForm(f => ({ ...f, [k]: v })); const atts = form.attachments || []; const addFiles = e => { const picked = [...e.target.files].map(f => ({ id:'at' + Date.now() + Math.random().toString(36).slice(2,5), name:f.name, size:f.size, url:URL.createObjectURL(f) })); set('attachments', [...atts, ...picked]); e.target.value = ''; }; const removeAtt = id => set('attachments', atts.filter(a => a.id !== id)); const saveForm = () => { const cat = D.billCategories.find(c => c.id === form.catId) || {}; onSave({ ...form, cat: cat.label || form.cat, catTint: cat.tint || form.catTint, icon: cat.icon || form.icon, ccy: form.ccy || 'USD', amountVal: parseFloat(String(form.amountVal).replace(/[^0-9.]/g, '')) || 0 }); }; return (
{form.merchant || (creating ? 'New bill' : '')}
{creating ? 'Add a bill' : editing ? 'Editing bill' : form.cat}
{!editing ? ( /* ---------- VIEW ---------- */
Amount
{form.items && form.items.length > 0 && (
Itemized · what you’re billed for
)}
Status
{form.status}
Due date
{form.due}, 2026
Category
{form.cat}
Account
{form.account}
{form.recurring &&
Billing
Auto-renews monthly
} {atts.length > 0 && (
Attachments
)}
Detected from
Statement email · {form.merchant}
Source confidence
{form.confidence}% — matched amount, due date and account
{form.payLink && form.status !== 'paid' && } Edit details {dismissed ? 'Un-ignore' : 'Ignore'}
) : ( /* ---------- EDIT ---------- */
set('merchant', e.target.value)} placeholder="Who is this bill from?" />
{(CCY_META[form.ccy] || CCY_META.USD).sym} set('amountVal', e.target.value)} inputMode="decimal" placeholder="0.00" />
set('ccy', v)} minWidth={'100%'} />
{form.ccy && form.ccy !== D.fx.home && (
Display preview · {D.fx.home}
)}
set('dueISO', e.target.value)} />
set('payLink', e.target.value)} placeholder="https://… secure pay gateway" />
set('catId', v)} minWidth={'100%'} />
Auto-renew
Recurring charge every month
{['overdue','pending','paid'].map(s => ( ))}
set('account', e.target.value)} />
fileRef.current && fileRef.current.click()} />
Cancel {creating ? 'Add bill' : 'Save changes'}
)}
); } // ---------- Bills screen ---------- function Bills({ go }) { const D = window.ZD_DATA; const [bills, setBills] = useState(D.bills); const [tab, setTab] = useState('all'); const [q, setQ] = useState(''); const [catFilter, setCatFilter] = useState('all'); const [sel, setSel] = useState(null); // bill being viewed/edited const [editing, setEditing] = useState(false); const [creating, setCreating] = useState(false); const [dismissed, setDismissed] = useState(new Set()); const [showDismissed, setShowDismissed] = useState(false); const toggleDismiss = id => setDismissed(prev => { const n = new Set(prev); n.has(id) ? n.delete(id) : n.add(id); return n; }); const [page, setPage] = useState(1); const PAGE = 6; const sort = useSort('dueISO', 'asc'); const newBill = () => { const c = D.billCategories[0]; setSel({ id:'b' + Date.now(), merchant:'', cat:c.label, catId:c.id, catTint:c.tint, icon:c.icon, ccy:'USD', amountVal:0, due:'', dueISO:'', status:'pending', account:'', confidence:80, attachments:[], payLink:'', recurring:false, isNew:true }); setEditing(true); setCreating(true); }; useCreateShortcut(newBill); const counts = { all: bills.length, pending: bills.filter(b => b.status === 'pending').length, overdue: bills.filter(b => b.status === 'overdue').length, paid: bills.filter(b => b.status === 'paid').length, }; const catOpts = [{ value:'all', label:'All categories' }, ...D.billCategories.map(c => ({ value:c.id, label:c.label, tint:c.tint }))]; let rows = bills.filter(b => (tab === 'all' || b.status === tab) && (catFilter === 'all' || b.catId === catFilter) && (showDismissed || !dismissed.has(b.id)) && (b.merchant.toLowerCase().includes(q.toLowerCase()) || b.cat.toLowerCase().includes(q.toLowerCase())) ); rows = sort.apply(rows, { merchant: b => b.merchant.toLowerCase(), cat: b => b.cat.toLowerCase(), amountVal:b => toHome(b.amountVal, b.ccy), dueISO: b => b.dueISO, status: b => statusRank[b.status], }); // In the "All" view, keep paid bills at the very end so pending/overdue stay // front-and-centre — the active column sort still applies within each group. if (tab === 'all' && sort.sortKey !== 'status') { rows = [...rows].sort((a, b) => (a.status === 'paid' ? 1 : 0) - (b.status === 'paid' ? 1 : 0)); } const filtered = q || catFilter !== 'all' || tab !== 'all'; const total = rows.reduce((s, b) => s + toHome(b.amountVal, b.ccy), 0); const pageCount = Math.ceil(rows.length / PAGE) || 1; const pg = Math.min(page, pageCount); const paged = rows.slice((pg - 1) * PAGE, pg * PAGE); useEffect(() => { setPage(1); }, [q, catFilter, tab, sort.sortKey, sort.sortDir]); const saveBill = updated => { setBills(bs => bs.some(b => b.id === updated.id) ? bs.map(b => b.id === updated.id ? updated : b) : [{ ...updated, isNew:undefined }, ...bs]); setSel({ ...updated, isNew:undefined }); setEditing(false); setCreating(false); }; const delBill = id => { setBills(bs => bs.filter(b => b.id !== id)); setSel(null); setEditing(false); }; return (
b.status!=='paid').reduce((s,b)=>s+toHome(b.amountVal,b.ccy),0), D.fx.home)} sub={`${counts.pending+counts.overdue} active bills`} icon="dollar-sign" tint="gold" />
New bill} /> {/* ---- Pro filter bar ---- */}
setQ(e.target.value)} />{q && }
{/* status quick-tabs + result count */}
{[['all','All'],['pending','Pending'],['overdue','Overdue'],['paid','Paid']].map(([id,lbl]) => ( ))}
{rows.length} {rows.length === 1 ? 'bill' : 'bills'} · {fmtCcy(total, D.fx.home)} {dismissed.size > 0 && } {filtered && }
{paged.map(b => ( { setSel(b); setEditing(false); }} style={{ cursor:'pointer' }}> ))} {rows.length === 0 && }
Actions
{b.merchant}
{b.account}{b.attachments && b.attachments.length > 0 && { e.stopPropagation(); openAttachment(b.attachments[0]); }} style={{ cursor:'pointer' }}> {b.attachments.length}}{b.items && b.items.length > 0 && {b.items.length}}
 {b.cat} {b.due} {b.status}
e.stopPropagation()}>
No bills match your filters.
{sel && { setSel(null); setEditing(false); setCreating(false); }} onEdit={() => setEditing(true)} onSave={saveBill} onDelete={delBill} creating={creating} dismissed={dismissed.has(sel.id)} onIgnore={() => { toggleDismiss(sel.id); setSel(null); setEditing(false); }} />}
); } Object.assign(window, { Bills, StatCard });