techniker-me/personal-finance
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Cashflow feature to frontend-web

Browse Source 
- Introduced CashflowPage component for managing income and expenses, including detailed summaries and transaction tracking.
- Updated App component to include routing for the new CashflowPage.
- Enhanced Layout component with navigation for Cashflow.
- Created Redux slice for cashflow management, including actions for income sources, expenses, and transactions.
- Integrated mock data for initial cashflow setup to facilitate development and testing.
This commit is contained in:
Alexander Zinn
2025-12-07 11:16:25 -05:00
parent 043f0bd316
commit afe17846f7
6 changed files with 379 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
frontend-web/src/pages/CashflowPage.tsx Normal file
View File

@@ -0,0 +1,214 @@
import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
import {Button} from '@/components/ui/button';
import {useAppSelector} from '@/store';
export default function CashflowPage() {
const {incomeSources, expenses, transactions} = useAppSelector(state => state.cashflow);
// Calculate monthly totals
const getMonthlyAmount = (amount: number, frequency: string) => {
switch (frequency) {
case 'weekly': return amount * 4.33;
case 'biweekly': return amount * 2.17;
case 'monthly': return amount;
case 'quarterly': return amount / 3;
case 'yearly': return amount / 12;
default: return 0;
}
};
const monthlyIncome = incomeSources
.filter(i => i.isActive)
.reduce((sum, i) => sum + getMonthlyAmount(i.amount, i.frequency), 0);
const monthlyExpenses = expenses
.filter(e => e.isActive)
.reduce((sum, e) => sum + getMonthlyAmount(e.amount, e.frequency), 0);
const monthlySavings = monthlyIncome - monthlyExpenses;
const savingsRate = monthlyIncome > 0 ? (monthlySavings / monthlyIncome) * 100 : 0;
const essentialExpenses = expenses.filter(e => e.isActive && e.isEssential);
const discretionaryExpenses = expenses.filter(e => e.isActive && !e.isEssential);
const essentialTotal = essentialExpenses.reduce((sum, e) => sum + getMonthlyAmount(e.amount, e.frequency), 0);
const discretionaryTotal = discretionaryExpenses.reduce((sum, e) => sum + getMonthlyAmount(e.amount, e.frequency), 0);
const fmt = (value: number) =>
new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD', maximumFractionDigits: 0}).format(value);
// Group expenses by category
const expensesByCategory = expenses.filter(e => e.isActive).reduce((acc, e) => {
const monthly = getMonthlyAmount(e.amount, e.frequency);
acc[e.category] = (acc[e.category] || 0) + monthly;
return acc;
}, {} as Record<string, number>);
const sortedCategories = Object.entries(expensesByCategory).sort((a, b) => b[1] - a[1]);
return (
<div className="p-6">
{/* Header */}
<div className="mb-5 flex items-center justify-between">
<h1 className="text-xl font-medium">Cashflow</h1>
<div className="flex gap-2">
<Button variant="secondary" size="sm">Add Income</Button>
<Button size="sm">Add Expense</Button>
</div>
</div>
{/* Summary Cards */}
<div className="mb-5 grid grid-cols-4 gap-4">
<Card className="card-elevated">
<CardHeader className="pb-1 pt-3 px-4">
<p className="text-xs text-muted-foreground">Monthly Income</p>
</CardHeader>
<CardContent className="pb-3 px-4">
<p className="text-xl font-semibold text-green-400">{fmt(monthlyIncome)}</p>
</CardContent>
</Card>
<Card className="card-elevated">
<CardHeader className="pb-1 pt-3 px-4">
<p className="text-xs text-muted-foreground">Monthly Expenses</p>
</CardHeader>
<CardContent className="pb-3 px-4">
<p className="text-xl font-semibold">{fmt(monthlyExpenses)}</p>
</CardContent>
</Card>
<Card className="card-elevated">
<CardHeader className="pb-1 pt-3 px-4">
<p className="text-xs text-muted-foreground">Monthly Savings</p>
</CardHeader>
<CardContent className="pb-3 px-4">
<p className={`text-xl font-semibold ${monthlySavings >= 0 ? 'text-green-400' : 'text-red-400'}`}>
{fmt(monthlySavings)}
</p>
</CardContent>
</Card>
<Card className="card-elevated">
<CardHeader className="pb-1 pt-3 px-4">
<p className="text-xs text-muted-foreground">Savings Rate</p>
</CardHeader>
<CardContent className="pb-3 px-4">
<p className={`text-xl font-semibold ${savingsRate >= 20 ? 'text-green-400' : savingsRate >= 10 ? 'text-yellow-400' : 'text-red-400'}`}>
{savingsRate.toFixed(0)}%
</p>
</CardContent>
</Card>
</div>
<div className="grid gap-5 lg:grid-cols-2">
{/* Income Sources */}
<Card className="card-elevated">
<CardHeader className="flex flex-row items-center justify-between pb-2 pt-3 px-4">
<CardTitle className="text-sm font-medium">Income Sources</CardTitle>
<span className="text-sm font-semibold text-green-400">{fmt(monthlyIncome)}/mo</span>
</CardHeader>
<CardContent className="px-4 pb-3">
<div className="divide-y divide-border rounded-md border border-border">
{incomeSources.filter(i => i.isActive).map(income => (
<div key={income.id} className="flex items-center justify-between px-3 py-2.5">
<div>
<p className="text-sm font-medium">{income.name}</p>
<p className="text-xs text-muted-foreground">{income.category} · {income.frequency}</p>
</div>
<div className="text-right">
<p className="text-sm font-medium">{fmt(income.amount)}</p>
<p className="text-xs text-muted-foreground">{fmt(getMonthlyAmount(income.amount, income.frequency))}/mo</p>
</div>
</div>
))}
</div>
</CardContent>
</Card>
{/* Expenses by Category */}
<Card className="card-elevated">
<CardHeader className="flex flex-row items-center justify-between pb-2 pt-3 px-4">
<CardTitle className="text-sm font-medium">Expenses by Category</CardTitle>
<span className="text-sm font-semibold">{fmt(monthlyExpenses)}/mo</span>
</CardHeader>
<CardContent className="px-4 pb-3">
<div className="space-y-2">
{sortedCategories.map(([category, amount]) => {
const pct = (amount / monthlyExpenses) * 100;
return (
<div key={category} className="flex items-center gap-3">
<div className="flex-1">
<div className="flex justify-between text-sm mb-1">
<span>{category}</span>
<span className="font-medium">{fmt(amount)}</span>
</div>
<div className="h-1.5 overflow-hidden rounded-full bg-secondary">
<div className="h-full bg-foreground/50" style={{width: `${pct}%`}} />
</div>
</div>
<span className="text-xs text-muted-foreground w-8">{pct.toFixed(0)}%</span>
</div>
);
})}
</div>
</CardContent>
</Card>
{/* Essential vs Discretionary */}
<Card className="card-elevated">
<CardHeader className="pb-2 pt-3 px-4">
<CardTitle className="text-sm font-medium">Essential vs Discretionary</CardTitle>
</CardHeader>
<CardContent className="px-4 pb-3">
<div className="grid grid-cols-2 gap-4 mb-4">
<div className="rounded-md border border-border p-3 text-center">
<p className="text-xs text-muted-foreground mb-1">Essential</p>
<p className="text-lg font-semibold">{fmt(essentialTotal)}</p>
<p className="text-xs text-muted-foreground">{((essentialTotal / monthlyExpenses) * 100).toFixed(0)}% of expenses</p>
</div>
<div className="rounded-md border border-border p-3 text-center">
<p className="text-xs text-muted-foreground mb-1">Discretionary</p>
<p className="text-lg font-semibold">{fmt(discretionaryTotal)}</p>
<p className="text-xs text-muted-foreground">{((discretionaryTotal / monthlyExpenses) * 100).toFixed(0)}% of expenses</p>
</div>
</div>
<div className="divide-y divide-border rounded-md border border-border max-h-48 overflow-y-auto">
{expenses.filter(e => e.isActive).sort((a, b) => getMonthlyAmount(b.amount, b.frequency) - getMonthlyAmount(a.amount, a.frequency)).map(expense => (
<div key={expense.id} className="flex items-center justify-between px-3 py-2">
<div className="flex items-center gap-2">
<span className="text-sm">{expense.name}</span>
{expense.isEssential && (
<span className="rounded bg-secondary px-1.5 py-0.5 text-[10px] text-muted-foreground">Essential</span>
)}
</div>
<span className="text-sm font-medium">{fmt(getMonthlyAmount(expense.amount, expense.frequency))}</span>
</div>
))}
</div>
</CardContent>
</Card>
{/* Recent Transactions */}
<Card className="card-elevated">
<CardHeader className="flex flex-row items-center justify-between pb-2 pt-3 px-4">
<CardTitle className="text-sm font-medium">Recent Transactions</CardTitle>
<Button variant="secondary" size="sm">Add</Button>
</CardHeader>
<CardContent className="px-4 pb-3">
<div className="divide-y divide-border rounded-md border border-border">
{transactions.slice(0, 8).map(tx => (
<div key={tx.id} className="flex items-center justify-between px-3 py-2">
<div>
<p className="text-sm">{tx.name}</p>
<p className="text-xs text-muted-foreground">{tx.category} · {tx.date}</p>
</div>
<span className={`text-sm font-medium ${tx.type === 'income' ? 'text-green-400' : ''}`}>
{tx.type === 'income' ? '+' : '-'}{fmt(tx.amount)}
</span>
</div>
))}
</div>
</CardContent>
</Card>
</div>
</div>
);
}