\n {initialData ? 'Edit Your Budget' : 'Create Your Budget'}\n

\n Enter your income sources and expenses to get personalized financial advice\n

\n\n {/* Income Section */}\n

💰 Income Sources

\n \n Add Income\n \n

\n\n {formData.income.length === 0 ? (\n

No income sources added yet. Click \"Add Income\" to get started.

\n ) : (\n

\n {formData.income.map((income, index) => (\n

\n \n Source Name\n \n updateIncomeSource(index, 'name', e.target.value)}\n placeholder=\"e.g., Salary, Freelance\"\n className=\"form-input w-full px-3 py-2 border border-gray-300 rounded-md\"\n />\n

\n \n Amount\n \n updateIncomeSource(index, 'amount', parseFloat(e.target.value) || 0)}\n placeholder=\"0\"\n className=\"form-input w-full px-3 py-2 border border-gray-300 rounded-md\"\n />\n

\n \n Frequency\n \n updateIncomeSource(index, 'frequency', e.target.value)}\n className=\"form-input w-full px-3 py-2 border border-gray-300 rounded-md\"\n >\n \n \n \n \n \n

\n \n Category\n \n updateIncomeSource(index, 'category', e.target.value)}\n className=\"form-input w-full px-3 py-2 border border-gray-300 rounded-md\"\n >\n \n \n \n \n \n \n

\n removeIncomeSource(index)}\n className=\"btn-danger bg-red-500 text-white px-3 py-2 rounded-md w-full\"\n >\n Remove\n \n

\n ))}\n

\n )}\n

\n\n {/* Expenses Section */}\n

💸 Expenses

\n \n Add Expense\n \n

\n\n {formData.expenses.length === 0 ? (\n

No expenses added yet. Click \"Add Expense\" to get started.

\n ) : (\n

\n {formData.expenses.map((expense, index) => (\n

\n \n Expense Name\n \n updateExpense(index, 'name', e.target.value)}\n placeholder=\"e.g., Rent, Groceries\"\n className=\"form-input w-full px-3 py-2 border border-gray-300 rounded-md\"\n />\n

\n \n Amount\n \n updateExpense(index, 'amount', parseFloat(e.target.value) || 0)}\n placeholder=\"0\"\n className=\"form-input w-full px-3 py-2 border border-gray-300 rounded-md\"\n />\n

\n \n Frequency\n \n updateExpense(index, 'frequency', e.target.value)}\n className=\"form-input w-full px-3 py-2 border border-gray-300 rounded-md\"\n >\n \n \n \n \n \n

\n \n Category\n \n updateExpense(index, 'category', e.target.value)}\n className=\"form-input w-full px-3 py-2 border border-gray-300 rounded-md\"\n >\n \n \n \n \n \n \n \n \n \n \n \n

\n \n Necessity\n \n updateExpense(index, 'necessity', e.target.value)}\n className=\"form-input w-full px-3 py-2 border border-gray-300 rounded-md\"\n >\n \n \n \n \n

\n removeExpense(index)}\n className=\"btn-danger bg-red-500 text-white px-3 py-2 rounded-md w-full\"\n >\n Remove\n \n

\n ))}\n

\n )}\n

\n\n {/* Savings Goal Section */}\n

🎯 Savings Goal

\n \n Target Savings Amount (Optional)\n \n setFormData(prev => ({ ...prev, savingsGoal: parseFloat(e.target.value) || 0 }))}\n placeholder=\"e.g., 10000\"\n className=\"form-input w-full px-3 py-2 border border-gray-300 rounded-md\"\n />\n

\n Set a savings target to track your progress and get goal-oriented advice.\n

\n\n {/* Action Buttons */}\n

\n handleSubmit('save')}\n disabled={!isFormValid || loading}\n className=\"btn-primary text-white px-8 py-3 rounded-lg font-medium disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n {loading ? 'Saving...' : 'Save Budget'}\n \n handleSubmit('analyze')}\n disabled={!isFormValid || loading}\n className=\"btn-secondary bg-white border border-gray-300 text-gray-700 px-8 py-3 rounded-lg font-medium disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n {loading ? 'Analyzing...' : 'Save & Analyze'}\n \n

\n\n {!isFormValid && (\n

\n Please add at least one income source and one expense to continue.\n

\n )}\n

\n );\n}","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/Benmichaelx/Budget/code/frontend/components/BudgetForm.tsx","extension","actionData","errors"]