// reports.jsx — Reports screen (function () { const { Icon } = window; const PERIODS = ['Daily', 'Weekly', 'Monthly', 'Custom']; function rangeFor(period, offset) { const base = new Date(window.SEED.TODAY); let start, end, label; if (period === 'Daily') { start = new Date(base); start.setDate(base.getDate() + offset); end = new Date(start); end.setHours(23, 59, 59); label = start.toLocaleDateString('en-GB', { weekday: 'short', day: 'numeric', month: 'short' }); start.setHours(0, 0, 0, 0); } else if (period === 'Weekly') { const ws = new Date(base); ws.setDate(base.getDate() - ((base.getDay() + 6) % 7) + offset * 7); ws.setHours(0, 0, 0, 0); start = ws; end = new Date(ws); end.setDate(ws.getDate() + 6); end.setHours(23, 59, 59); const wk = Math.ceil(((start - new Date(start.getFullYear(), 0, 1)) / 86400000 + 1) / 7); label = 'Week ' + wk + ' · ' + start.toLocaleDateString('en-GB', { day: 'numeric', month: 'short' }) + '–' + end.toLocaleDateString('en-GB', { day: 'numeric', month: 'short' }); } else { const ms = new Date(base.getFullYear(), base.getMonth() + offset, 1); start = ms; end = new Date(base.getFullYear(), base.getMonth() + offset + 1, 0, 23, 59, 59); label = start.toLocaleDateString('en-GB', { month: 'long', year: 'numeric' }); } return { start, end, label }; } function Reports({ store, toast }) { const [period, setPeriod] = React.useState('Monthly'); const [offset, setOffset] = React.useState(0); const [animKey, setAnimKey] = React.useState(0); React.useEffect(() => { setAnimKey((k) => k + 1); }, [period, offset]); const { start, end, label } = rangeFor(period === 'Custom' ? 'Monthly' : period, offset); const inRange = store.txns.filter((t) => { const d = new Date(t.date); return d >= start && d <= end; }); const totalIn = inRange.filter((t) => t.type === 'income').reduce((s, t) => s + t.amount, 0); const totalOut = inRange.filter((t) => t.type === 'expense').reduce((s, t) => s + t.amount, 0); const net = totalIn - totalOut; // category breakdown (expenses) const breakdown = React.useMemo(() => { const m = new Map(); inRange.forEach((t) => { const k = t.cat + '|' + t.type; m.set(k, (m.get(k) || 0) + t.amount); }); const rows = [...m.entries()].map(([k, v]) => { const [cat, type] = k.split('|'); return { cat, type, value: v }; }); rows.sort((a, b) => b.value - a.value); return rows.slice(0, 6); }, [animKey]); const maxVal = Math.max(1, ...breakdown.map((b) => b.value)); const [bars, setBars] = React.useState(false); React.useEffect(() => { setBars(false); const t = setTimeout(() => setBars(true), 60); return () => clearTimeout(t); }, [animKey]); return React.createElement('div', { className: 'page', 'data-screen-label': 'Reports' }, [ React.createElement('h1', { key: 't', className: 'page-title', style: { marginBottom: 20 } }, 'Reports'), // Period selector React.createElement('div', { key: 'seg', className: 'segment', style: { width: '100%' } }, PERIODS.map((p) => React.createElement('button', { key: p, className: period === p ? 'active' : '', style: { flex: 1 }, onClick: () => { setPeriod(p); setOffset(0); }, }, p))), // Date nav React.createElement('div', { key: 'nav', className: 'report-nav' }, [ React.createElement('button', { key: 'p', onClick: () => setOffset((o) => o - 1), 'aria-label': 'Previous' }, React.createElement(Icon.chevL, { size: 18 })), React.createElement('div', { key: 'l', className: 'report-period display' }, label), React.createElement('button', { key: 'n', onClick: () => setOffset((o) => Math.min(0, o + 1)), 'aria-label': 'Next', disabled: offset >= 0, style: { opacity: offset >= 0 ? 0.35 : 1 } }, React.createElement(Icon.chevR, { size: 18 })), ]), // Summary cards React.createElement('div', { key: 'cards', className: 'report-cards' }, [ React.createElement('div', { key: 'in', className: 'card hoverable' }, [ React.createElement('div', { key: 'l', className: 'eyebrow' }, 'Income'), React.createElement('div', { key: 'v', className: 'display', style: { fontSize: 22, color: 'var(--mint)', marginTop: 8 } }, 'Rs. ' + window.fmt(totalIn)), ]), React.createElement('div', { key: 'out', className: 'card hoverable' }, [ React.createElement('div', { key: 'l', className: 'eyebrow' }, 'Expenses'), React.createElement('div', { key: 'v', className: 'display', style: { fontSize: 22, color: 'var(--red)', marginTop: 8 } }, 'Rs. ' + window.fmt(totalOut)), ]), React.createElement('div', { key: 'net', className: 'card hoverable', style: { borderColor: 'rgba(0,212,255,0.2)' } }, [ React.createElement('div', { key: 'l', className: 'eyebrow' }, 'Net Balance'), React.createElement('div', { key: 'v', className: 'display', style: { fontSize: 26, color: net >= 0 ? 'var(--mint)' : 'var(--red)', marginTop: 8 } }, (net < 0 ? '− ' : '') + 'Rs. ' + window.fmt(Math.abs(net))), ]), ]), // Breakdown React.createElement('div', { key: 'bd', className: 'card', style: { marginTop: 0, marginBottom: 16 } }, [ React.createElement('div', { key: 'h', className: 'eyebrow', style: { marginBottom: 8 } }, 'Category Breakdown'), breakdown.length === 0 ? React.createElement('div', { key: 'e', style: { padding: '24px 0', textAlign: 'center', color: 'var(--text-3)', fontSize: 13 } }, 'No activity in this period') : React.createElement('div', { key: 'rows' }, breakdown.map((b, i) => { const c = window.catById(b.cat); const fill = b.type === 'income' ? 'var(--mint)' : (i % 2 ? 'var(--amber)' : 'var(--red)'); return React.createElement('div', { key: b.cat + i, className: 'bar-row' }, [ React.createElement('div', { key: 'l', className: 'bar-label' }, [ React.createElement('span', { key: 'ic', className: 'bl-icon', style: { display: 'inline-flex' } }, React.createElement(Icon[c.icon] || Icon.tag, { size: 15, stroke: fill })), c.label, ]), React.createElement('div', { key: 'tr', className: 'bar-track' }, React.createElement('div', { className: 'bar-fill', style: { background: fill, width: bars ? (b.value / maxVal * 100) + '%' : '0%', transitionDelay: (i * 80) + 'ms' } })), React.createElement('div', { key: 'a', className: 'bar-amt' }, 'Rs. ' + window.fmt(b.value)), ]); })), ]), // Transaction list inRange.length > 0 && React.createElement('div', { key: 'list', className: 'card', style: { padding: '8px 12px 12px' } }, [ React.createElement('div', { key: 'h', className: 'eyebrow', style: { padding: '12px 8px 6px' } }, 'All Transactions'), ...inRange.slice(0, 12).map((tx) => { const c = window.catById(tx.cat); return React.createElement('div', { key: tx.id, className: 'txn-row', style: { borderLeft: '3px solid ' + (tx.type === 'income' ? 'var(--mint)' : 'var(--red)'), paddingLeft: 10, marginBottom: 2 }, }, [ React.createElement('div', { key: 'm', className: 'txn-mid' }, [ React.createElement('div', { key: 'r', className: 'txn-reason' }, tx.reason), React.createElement('div', { key: 'd', className: 'txn-meta' }, c.label + ' · ' + window.shortDate(tx.date)), ]), React.createElement('span', { key: 'a', className: 'txn-amt', style: { color: tx.type === 'income' ? 'var(--mint)' : 'var(--red)' } }, (tx.type === 'income' ? '+' : '−') + ' Rs. ' + window.fmt(tx.amount, true)), ]); }), ]), // Export React.createElement('button', { key: 'exp', className: 'btn btn-outline', style: { width: '100%', color: 'var(--accent-ink)', marginTop: 4 }, onClick: () => toast('Report exported as PDF', 'success'), }, [React.createElement(Icon.download, { key: 'i', size: 18 }), 'Export as PDF']), ]); } window.Reports = Reports; })();