function MainComponent() { const [income, setIncome] = React.useState(''); const [incomeFrequency, setIncomeFrequency] = React.useState(''); const [payDateDayOfWeek, setPayDateDayOfWeek] = React.useState(''); const [expenses, setExpenses] = React.useState([]); const [expenseAmount, setExpenseAmount] = React.useState(''); const [expenseFrequency, setExpenseFrequency] = React.useState(''); const [expenseType, setExpenseType] = React.useState(''); const [dueDate, setDueDate] = React.useState(''); const [customExpenseName, setCustomExpenseName] = React.useState(''); const handleIncomeSubmit = (e)=>{ e.preventDefault(); setIncomes([ ...incomes, { amount: income, frequency: incomeFrequency, payDateDayOfWeek: incomeFrequency === 'Weekly' || incomeFrequency === 'Bi-weekly' ? payDateDayOfWeek : undefined } ]); setIncome(''); setIncomeFrequency(''); setPayDateDayOfWeek(''); }; const handleExpenseSubmit = (e)=>{ e.preventDefault(); const expenseName = expenseType === 'Custom' ? customExpenseName : expenseType; setExpenses([ ...expenses, { amount: expenseAmount, frequency: expenseFrequency, type: expenseName, dueDate } ]); setExpenseAmount(''); setExpenseFrequency(''); setExpenseType(''); setDueDate(''); setCustomExpenseName(''); }; const incomes = React.useRef([]).current; const setIncomes = (newIncomes)=>{ incomes.splice(0, incomes.length, ...newIncomes); }; const expenseOptions = [ 'Rent', 'Mortgage', 'Internet', 'Phone', 'Car Insurance', 'Health Insurance', 'Utilities', 'Custom' ]; const frequencyOptions = [ 'Weekly', 'Bi-weekly', 'Monthly', 'Semi-monthly', 'Annual' ]; const daysOfWeek = [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ]; // Pay dates and recommended payment dates calculation return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen bg-[#1F2937] text-white font-roboto", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 p-4", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleIncomeSubmit, className: "space-y-6 bg-[#2D3748] p-4 shadow rounded-lg", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border rounded", type: "number", placeholder: "Income Amount", name: "income", value: income, onChange: (e)=>setIncome(e.target.value), __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("select", { className: "w-full p-2 border rounded", name: "incomeFrequency", value: incomeFrequency, onChange: (e)=>setIncomeFrequency(e.target.value), __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, frequencyOptions.map((frequency)=>/*#__PURE__*/ React.createElement("option", { key: frequency, value: frequency, __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, frequency))), [ 'Weekly', 'Bi-weekly' ].includes(incomeFrequency) && /*#__PURE__*/ React.createElement("select", { className: "w-full p-2 border rounded", name: "payDateDayOfWeek", value: payDateDayOfWeek, onChange: (e)=>setPayDateDayOfWeek(e.target.value), __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, daysOfWeek.map((day)=>/*#__PURE__*/ React.createElement("option", { key: day, value: day, __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }, day))), /*#__PURE__*/ React.createElement("button", { className: "block w-full py-3 bg-[#4FD1C5] rounded-md shadow", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "Add Income")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleExpenseSubmit, className: "space-y-6 bg-[#2D3748] p-4 shadow rounded-lg", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border rounded", type: "number", placeholder: "Expense Amount", name: "expenseAmount", value: expenseAmount, onChange: (e)=>setExpenseAmount(e.target.value), __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("select", { className: "w-full p-2 border rounded", name: "expenseFrequency", value: expenseFrequency, onChange: (e)=>setExpenseFrequency(e.target.value), __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, frequencyOptions.map((frequency)=>/*#__PURE__*/ React.createElement("option", { key: frequency, value: frequency, __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, frequency))), /*#__PURE__*/ React.createElement("select", { className: "w-full p-2 border rounded", name: "expenseType", value: expenseType, onChange: (e)=>setExpenseType(e.target.value), __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, expenseOptions.map((type)=>/*#__PURE__*/ React.createElement("option", { key: type, value: type, __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, type))), expenseType === 'Custom' && /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border rounded", type: "text", placeholder: "Custom Expense Name", name: "customExpenseName", value: customExpenseName, onChange: (e)=>setCustomExpenseName(e.target.value), __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border rounded", type: "date", name: "dueDate", value: dueDate, onChange: (e)=>setDueDate(e.target.value), __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "block w-full py-3 bg-[#4FD1C5] rounded-md shadow", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "Add Expense"))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-auto p-4", __source: { fileName: "", lineNumber: 94, columnNumber: 7 }, __self: this })); }