Budget Manager

Set spending limits and track your progress

\n setShowForm(!showForm)}\n className=\"bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors flex items-center space-x-2\"\n >\n ➕\n Add Budget\n \n

\n\n {/* Error Message */}\n {error && (\n

\n ⚠️\n {error}\n

\n )}\n\n {/* Add Budget Form */}\n {showForm && (\n

Add New Budget

\n \n Category\n \n setFormData(prev => ({ ...prev, category: e.target.value }))}\n required\n className=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n >\n \n {EXPENSE_CATEGORIES.map((category) => (\n \n ))}\n \n

\n\n

\n \n Budget Limit\n \n

\n $\n setFormData(prev => ({ ...prev, limitAmount: e.target.value }))}\n required\n min=\"0.01\"\n step=\"0.01\"\n className=\"w-full pl-8 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n placeholder=\"0.00\"\n />\n

\n\n

\n \n Period\n \n setFormData(prev => ({ ...prev, period: e.target.value as any }))}\n className=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n >\n \n \n \n \n

\n\n

\n \n Save Budget\n \n setShowForm(false)}\n className=\"bg-gray-300 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-400 transition-colors\"\n >\n Cancel\n \n

\n )}\n\n {/* Budget Overview */}\n {spending.length > 0 && (\n

Current Month Overview

\n {spending.map((item, index) => {\n const status = getBudgetStatus(item.spent, item.budget);\n const percentage = item.budget > 0 ? Math.min((item.spent / item.budget) * 100, 100) : 0;\n\n return (\n

\n {status.icon}\n

{item.category}

{status.status}

\n {formatCurrency(item.spent)} / {formatCurrency(item.budget)}\n

\n {item.percentage.toFixed(1)}% used\n

\n\n {item.budget > 0 && (\n

\n )}\n\n {item.budget === 0 && (\n

\n No budget set for this category\n

\n )}\n

\n );\n })}\n

\n )}\n\n {/* Saved Budgets */}\n {budgets.length > 0 && (\n

Saved Budgets

\n {budgets.map((budget) => (\n

{budget.category}

\n {formatCurrency(budget.limit_amount)} per {budget.period.replace('ly', '')}\n

\n handleDelete(budget.id)}\n className=\"text-red-600 hover:text-red-800 transition-colors p-2\"\n title=\"Delete budget\"\n >\n 🗑️\n \n

\n ))}\n

\n )}\n\n {/* Empty State */}\n {budgets.length === 0 && spending.length === 0 && (\n

🎯

No Budgets Set

\n Create your first budget to start tracking your spending limits.\n

\n setShowForm(true)}\n className=\"bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors\"\n >\n Create Budget\n \n

\n )}\n \n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/beekay/support_case/code/frontend/components/BudgetManager.tsx","extension","actionData","errors"]