import { Head, router, usePage } from '@inertiajs/react'; import { useState } from 'react'; import { PortfolioTabs, LocationFilter, money } from '@/components/portfolio/PortfolioTabs'; import { DollarSign, Download } from 'lucide-react'; type Row = { location: string; income: number; transactions: number }; type Cat = { category: string; income: number; transactions: number }; export default function Income() { const props = usePage().props as unknown as { rows: Row[]; total: number; transactionCount: number; categories: Cat[]; period: { start: string; end: string }; location: string | null; locationOptions: { id: number; name: string }[]; }; const { rows, total, transactionCount, categories, period, location, locationOptions } = props; const [start, setStart] = useState(period.start); const [end, setEnd] = useState(period.end); const apply = (extra: Record = {}) => router.get('/portfolio/income', { start, end, location: location ?? '', ...extra }, { preserveState: true }); const quick = (days: number) => { const e = new Date(); const s = new Date(); s.setDate(s.getDate() - days); const fmtD = (d: Date) => d.toISOString().slice(0, 10); setStart(fmtD(s)); setEnd(fmtD(e)); router.get('/portfolio/income', { start: fmtD(s), end: fmtD(e), location: location ?? '' }, { preserveState: true }); }; const exportCsv = () => { const csv = [['Location','Income','Transactions'], ...rows.map(r => [r.location, r.income, r.transactions])] .map(r => r.map(c => `"${String(c)}"`).join(',')).join('\n'); const url = URL.createObjectURL(new Blob([csv], { type: 'text/csv' })); const a = document.createElement('a'); a.href = url; a.download = `income-${period.start}_${period.end}.csv`; a.click(); URL.revokeObjectURL(url); }; return ( <>

Income

Money received, from the Rentec bank ledger.

setStart(e.target.value)} className="rounded-md border border-border bg-background px-2.5 py-1.5 text-sm" />
setEnd(e.target.value)} className="rounded-md border border-border bg-background px-2.5 py-1.5 text-sm" />
{[7, 30, 90].map((d) => ( ))}
apply({ location: v })} />
{rows.map((r) => ( ))} {rows.length > 0 && ( )} {rows.length === 0 && ( )}
Location Transactions Income
{r.location} {r.transactions} {money(r.income)}
Total {transactionCount} {money(total)}
No income in this period. If transactions haven't been synced yet, run a Rentec sync including the transactions resource.
{categories.length > 0 && (

By category

{categories.map((c) => (
{c.category} {money(c.income)}
))}
)}
); } function Card({ label, value, big, small }: { label: string; value: string; big?: boolean; small?: boolean }) { return (

{label}

{value}

); }