130 lines
3.9 KiB
JavaScript
130 lines
3.9 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Button } from './ui/button.js';
|
|
|
|
|
|
function ExpensesWizard({ onClose, onExpensesCalculated }) {
|
|
const [housing, setHousing] = useState('');
|
|
const [utilities, setUtilities] = useState('');
|
|
const [groceries, setGroceries] = useState('');
|
|
const [transportation, setTransportation] = useState('');
|
|
const [insurance, setInsurance] = useState('');
|
|
const [misc, setMisc] = useState('');
|
|
|
|
const calculateTotal = () => {
|
|
const sum =
|
|
(parseFloat(housing) || 0) +
|
|
(parseFloat(utilities) || 0) +
|
|
(parseFloat(groceries) || 0) +
|
|
(parseFloat(transportation) || 0) +
|
|
(parseFloat(insurance) || 0) +
|
|
(parseFloat(misc) || 0);
|
|
|
|
return sum;
|
|
};
|
|
|
|
const handleFinish = () => {
|
|
const total = calculateTotal();
|
|
onExpensesCalculated(total);
|
|
onClose();
|
|
};
|
|
|
|
const totalExpenses = calculateTotal();
|
|
|
|
return (
|
|
<div className="p-4 bg-white rounded shadow-md">
|
|
<h2 className="text-xl font-semibold mb-4">Monthly Expenses Wizard</h2>
|
|
<p className="text-sm mb-4">
|
|
Enter approximate amounts for each category below. We'll sum them up to estimate
|
|
your monthly expenses.
|
|
</p>
|
|
|
|
<div className="mb-2">
|
|
<label className="block text-sm font-medium">
|
|
Housing (Rent/Mortgage)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
className="border p-2 rounded w-full"
|
|
value={housing}
|
|
onChange={(e) => setHousing(e.target.value)}
|
|
placeholder="e.g. 1500"
|
|
/>
|
|
</div>
|
|
|
|
<div className="mb-2">
|
|
<label className="block text-sm font-medium">Utilities</label>
|
|
<input
|
|
type="number"
|
|
className="border p-2 rounded w-full"
|
|
value={utilities}
|
|
onChange={(e) => setUtilities(e.target.value)}
|
|
placeholder="Water, electricity, gas, etc. (e.g. 200)"
|
|
/>
|
|
</div>
|
|
|
|
<div className="mb-2">
|
|
<label className="block text-sm font-medium">Food</label>
|
|
<input
|
|
type="number"
|
|
className="border p-2 rounded w-full"
|
|
value={groceries}
|
|
onChange={(e) => setGroceries(e.target.value)}
|
|
placeholder="Groceries, dining out, etc. (e.g. 300)"
|
|
/>
|
|
</div>
|
|
|
|
<div className="mb-2">
|
|
<label className="block text-sm font-medium">Transportation</label>
|
|
<input
|
|
type="number"
|
|
className="border p-2 rounded w-full"
|
|
value={transportation}
|
|
onChange={(e) => setTransportation(e.target.value)}
|
|
placeholder="Car payment, gas, train, bus, uber fare e.g. 500"
|
|
/>
|
|
</div>
|
|
|
|
<div className="mb-2">
|
|
<label className="block text-sm font-medium">Insurance</label>
|
|
<input
|
|
type="number"
|
|
className="border p-2 rounded w-full"
|
|
value={insurance}
|
|
onChange={(e) => setInsurance(e.target.value)}
|
|
placeholder="Car, house, rental, health insurance not deducted from paycheck (e.g. 200)"
|
|
/>
|
|
</div>
|
|
|
|
<div className="mb-2">
|
|
<label className="block text-sm font-medium">Miscellaneous</label>
|
|
<input
|
|
type="number"
|
|
className="border p-2 rounded w-full"
|
|
value={misc}
|
|
onChange={(e) => setMisc(e.target.value)}
|
|
placeholder="Subscriptions, Phone, any recurring cost not covered elsewhere e.g. 250"
|
|
/>
|
|
</div>
|
|
|
|
{/* Show the user the current total */}
|
|
<p className="text-sm mb-4">
|
|
<strong>Current Total:</strong> ${totalExpenses.toFixed(2)}
|
|
</p>
|
|
|
|
<div className="mt-4 flex justify-between">
|
|
<Button
|
|
className="bg-gray-200 text-gray-800 hover:bg-gray-300"
|
|
onClick={onClose}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button className="bg-blue-600 hover:bg-blue-700" onClick={handleFinish}>
|
|
Use This Total
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ExpensesWizard;
|