// P&L page — full income/expense table with house breakdown. function PnlPage({ store }) { const { transactions, houses, year, setYear } = store; const [houseFilter, setHouseFilter] = React.useState('all'); let txns = filterByYear(transactions, year); if (houseFilter !== 'all') txns = txns.filter(t => t.houseId === houseFilter); const income = txns.filter(t => t.type === 'income'); const expense = txns.filter(t => t.type === 'expense'); // Revenue by house const revByHouse = houses.map(h => ({ house: h, total: income.filter(t => t.houseId === h.id).reduce((s, t) => s + t.amount, 0), bySource: CATEGORIES.income.map(src => ({ source: src, value: income.filter(t => t.houseId === h.id && t.category === src).reduce((s, t) => s + t.amount, 0), })), })); // Revenue by source overall const revBySource = CATEGORIES.income.map(src => ({ source: src, value: income.filter(t => t.category === src).reduce((s, t) => s + t.amount, 0), })); // Expense by category const expByCat = CATEGORIES.expense.map(c => ({ category: c, value: expense.filter(t => t.category === c).reduce((s, t) => s + t.amount, 0), })).filter(c => c.value > 0); const totalIncome = income.reduce((s, t) => s + t.amount, 0); const totalExpense = expense.reduce((s, t) => s + t.amount, 0); const net = totalIncome - totalExpense; const margin = totalIncome ? (net / totalIncome * 100) : 0; return ( <> h.id === houseFilter)?.name}`}>
Net income
{fmt$(net)}
= 0 ? 'var(--income)' : 'var(--expense)', fontWeight: 500 }}> {margin.toFixed(1)}% margin · {fmt$(totalIncome - totalExpense, { compact: true })} from {houseFilter === 'all' ? `${houses.length} properties` : '1 property'}
{/* Revenue section */} {houseFilter === 'all' && houses.map(h => ( ))} {CATEGORIES.income.map(src => ( {houseFilter === 'all' && houses.map(h => { const v = income.filter(t => t.houseId === h.id && t.category === src).reduce((s, t) => s + t.amount, 0); return ; })} ))} {houseFilter === 'all' && houses.map(h => { const v = revByHouse.find(r => r.house.id === h.id)?.total || 0; return ; })} {/* Expense header */} {expByCat.map(({ category, value }) => ( {houseFilter === 'all' && houses.map(h => { const v = expense.filter(t => t.houseId === h.id && t.category === category).reduce((s, t) => s + t.amount, 0); return ; })} ))} {houseFilter === 'all' && houses.map(h => { const v = expense.filter(t => t.houseId === h.id).reduce((s, t) => s + t.amount, 0); return ; })} {/* Net */} {houseFilter === 'all' && houses.map(h => { const v = (revByHouse.find(r => r.house.id === h.id)?.total || 0) - expense.filter(t => t.houseId === h.id).reduce((s, t) => s + t.amount, 0); return ( ); })}
Revenue{h.name}Total
{src}{v ? fmt$(v) : '—'}{fmt$(revBySource.find(r => r.source === src)?.value || 0)}
Total revenue{fmt$(v)}{fmt$(totalIncome)}
Operating expenses
{category}{v ? fmt$(v) : '—'}{fmt$(value)}
Total expenses{fmt$(v)}{fmt$(totalExpense)}
Net income= 0 ? 'var(--income)' : 'var(--expense)' }}> {fmt$(v)} = 0 ? 'var(--income)' : 'var(--expense)' }}> {fmt$(net)}
); } function PnlSummary({ label, value, color }) { return (
{label}
{fmt$(value)}
); } Object.assign(window, { PnlPage });