import { useState, useEffect } from 'react';
import { Button } from "@/components/ui/button";
export default function BudgetApp() {
const [incomeSources, setIncomeSources] = useState([{ name: '', amount: '' }]);
const [expenses, setExpenses] = useState([{ name: '', amount: '' }]);
const [bankAccounts, setBankAccounts] = useState([{ name: '', amount: '' }]);
const [debts, setDebts] = useState([{ name: '', amount: '' }]);
const [summary, setSummary] = useState({ income: 0, expenses: 0, net: 0 });
useEffect(() => {
const incomeTotal = incomeSources.reduce((sum, item) => sum + Number(item.amount || 0), 0);
const expenseTotal = expenses.reduce((sum, item) => sum + Number(item.amount || 0), 0);
setSummary({ income: incomeTotal, expenses: expenseTotal, net: incomeTotal - expenseTotal });
}, [incomeSources, expenses]);
const handleChange = (setter, index, field, value) => {
setter(prev => {
const updated = [...prev];
updated[index][field] = value;
return updated;
});
};
const addField = (setter) => setter(prev => [...prev, { name: '', amount: '' }]);
const generateCSV = () => {
let rows = [['Category', 'Name', 'Amount']];
incomeSources.forEach(i => rows.push(['Income', i.name, i.amount]));
bankAccounts.forEach(b => rows.push(['Bank Account', b.name, b.amount]));
debts.forEach(d => rows.push(['Debt', d.name, d.amount]));
expenses.forEach(e => rows.push(['Expense', e.name, e.amount]));
rows.push(['Summary', 'Total Income', summary.income]);
rows.push(['Summary', 'Total Expenses', summary.expenses]);
rows.push(['Summary', 'Net', summary.net]);
const csvContent = 'data:text/csv;charset=utf-8,' + rows.map(e => e.join(",")).join("\n");
const encodedUri = encodeURI(csvContent);
const link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "budget_summary.csv");
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
const Section = ({ title, data, setter }) => (
);
return (
);
}
{title}
{data.map((item, index) => (
handleChange(setter, index, 'name', e.target.value)}
className="flex-1 rounded border px-2 py-1 bg-black text-white border-green-800"
/>
handleChange(setter, index, 'amount', e.target.value)}
className="w-32 rounded border px-2 py-1 bg-black text-white border-green-800"
/>
))}
Monthly Budget Planner
Summary
Total Income: ${summary.income.toFixed(2)}
Total Expenses: ${summary.expenses.toFixed(2)}
Net: ${summary.net.toFixed(2)}