import React, { useState } from "react"; export default function BudgetPlanner() { const [incomeTotal, setIncomeTotal] = useState(11617); const [expenseTotal, setExpenseTotal] = useState(3525); const [savingsTotal, setSavingsTotal] = useState(4600); const [debtTotal, setDebtTotal] = useState(3150); const remaining = incomeTotal - expenseTotal - savingsTotal - debtTotal; return (

Monthly Budget Planner – January 2025

{/* Tables Layout */}

{/* Summary */}

Summary

Income: ₹{incomeTotal}

Expenses: ₹{expenseTotal}

Savings: ₹{savingsTotal}

Debt: ₹{debtTotal}

{remaining >= 0 ? (

Balance: ₹{remaining}

) : (

Overdue: ₹{Math.abs(remaining)}

)}

{/* Image */}

); } function BudgetTable({ title, rows, total, setTotal }) { return (

{title}

{rows.map((r, i) => ( ))}

Name	Date	Amount
{r[0]}	{r[1]}	₹{r[2]}
Total		setTotal(Number(e.target.value))} className="w-24 text-right border rounded px-1" />

); }