Loading analytics...

\n );\n }\n\n if (error) {\n return (\n

\n ⚠️\n

Error Loading Analytics

{error}

\n \n Try Again\n \n

\n );\n }\n\n return (\n

\n {/* Header */}\n

Analytics

Insights into your spending patterns

\n \n {/* Period Selector */}\n

\n {(['weekly', 'monthly', 'yearly'] as const).map((p) => (\n setPeriod(p)}\n className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${\n period === p\n ? 'bg-white text-blue-600 shadow-sm'\n : 'text-gray-600 hover:text-gray-900'\n }`}\n >\n {p.charAt(0).toUpperCase() + p.slice(1)}\n \n ))}\n

\n\n {/* Summary Stats */}\n {categoryData.length > 0 && (\n

Total Spent

\n {formatCurrency(categoryData.reduce((sum, item) => sum + item.spent, 0))}\n

💸

\n\n

Total Budget

\n {formatCurrency(categoryData.reduce((sum, item) => sum + item.budget, 0))}\n

🎯

\n\n

\n Spending by Category ({period})\n

\n )}\n\n {/* Monthly Trends Chart */}\n {trendsData.length > 0 && (\n

\n Monthly Trends\n

\n )}\n

\n\n {/* Category Details */}\n {categoryData.length > 0 && (\n

Category Breakdown

\n {categoryData.map((item, index) => (\n

{item.category}

\n {item.budget > 0 ? `${item.percentage.toFixed(1)}% of budget` : 'No budget set'}\n

{formatCurrency(item.spent)}

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

of {formatCurrency(item.budget)}

\n )}\n

\n ))}\n

\n )}\n\n {/* Empty State */}\n {categoryData.length === 0 && trendsData.length === 0 && (\n

📊

No Data Available

\n Start adding transactions to see your spending analytics.\n

\n \n

\n )}\n

\n );\n}",[],[241,248,255],{"_102":263,"_95":264,"_145":265,"_147":249,"_148":134,"_149":250,"_151":116,"_104":266,"_99":31,"_153":171,"_155":267,"_156":27,"_157":-5,"_158":268,"_98":269},"e0e780cc-37b1-11f0-a325-9e149126039e","App.tsx","e0e78176-37b1-11f0-a325-9e149126039e",["D",1747989757042],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { User } from \"../../shared/types.ts\";\nimport Dashboard from \"./Dashboard.tsx\";\nimport TransactionForm from \"./TransactionForm.tsx\";\nimport TransactionList from \"./TransactionList.tsx\";\nimport BudgetManager from \"./BudgetManager.tsx\";\nimport Analytics from \"./Analytics.tsx\";\nimport AuthForm from \"./AuthForm.tsx\";\n\n// Icons using Unicode symbols\nconst Icons = {\n home: \"🏠\",\n plus: \"➕\",\n list: \"📋\",\n budget: \"🎯\",\n chart: \"📊\",\n user: \"👤\",\n logout: \"🚪\",\n menu: \"☰\",\n close: \"✕\"\n};\n\ntype View = 'dashboard' | 'add-transaction' | 'transactions' | 'budgets' | 'analytics';\n\nexport default function App() {\n const [user, setUser] = useState(null);\n const [currentView, setCurrentView] = useState('dashboard');\n const [loading, setLoading] = useState(true);\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n\n // Check for existing session on load\n useEffect(() => {\n checkAuth();\n }, []);\n\n const checkAuth = async () => {\n try {\n const token = localStorage.getItem('budget_token');\n if (!token) {\n setLoading(false);\n return;\n }\n\n const response = await fetch('/api/auth/me', {\n headers: {\n 'Authorization': `Bearer ${token}`\n }\n });\n\n if (response.ok) {\n const data = await response.json();\n if (data.success) {\n setUser(data.user);\n } else {\n localStorage.removeItem('budget_token');\n }\n } else {\n localStorage.removeItem('budget_token');\n }\n } catch (error) {\n console.error('Auth check failed:', error);\n localStorage.removeItem('budget_token');\n } finally {\n setLoading(false);\n }\n };\n\n const handleLogin = (userData: User, token: string) => {\n setUser(userData);\n localStorage.setItem('budget_token', token);\n };\n\n const handleLogout = async () => {\n try {\n const token = localStorage.getItem('budget_token');\n if (token) {\n await fetch('/api/auth/logout', {\n method: 'POST',\n headers: {\n 'Authorization': `Bearer ${token}`\n }\n });\n }\n } catch (error) {\n console.error('Logout error:', error);\n } finally {\n localStorage.removeItem('budget_token');\n setUser(null);\n setCurrentView('dashboard');\n }\n };\n\n const navigationItems = [\n { id: 'dashboard', label: 'Dashboard', icon: Icons.home },\n { id: 'add-transaction', label: 'Add Transaction', icon: Icons.plus },\n { id: 'transactions', label: 'Transactions', icon: Icons.list },\n { id: 'budgets', label: 'Budgets', icon: Icons.budget },\n { id: 'analytics', label: 'Analytics', icon: Icons.chart },\n ] as const;\n\n if (loading) {\n return (\n

\n );\n }\n\n if (!user) {\n return ;\n }\n\n const renderCurrentView = () => {\n switch (currentView) {\n case 'dashboard':\n return ;\n case 'add-transaction':\n return setCurrentView('transactions')} />;\n case 'transactions':\n return ;\n case 'budgets':\n return ;\n case 'analytics':\n return ;\n default:\n return ;\n }\n };\n\n return (\n

\n {/* Mobile Header */}\n

💰 Budget Tracker

\n setMobileMenuOpen(!mobileMenuOpen)}\n className=\"p-2 text-gray-600 hover:text-gray-800\"\n >\n {mobileMenuOpen ? Icons.close : Icons.menu}\n \n

\n\n

\n {/* Sidebar */}\n

\n {/* Desktop Header */}\n

💰 Budget Tracker

Welcome, {user.username}!

\n\n {/* Navigation */}\n

\n {navigationItems.map((item) => (\n {\n setCurrentView(item.id);\n setMobileMenuOpen(false);\n }}\n className={`\n w-full flex items-center space-x-3 px-4 py-3 rounded-lg text-left transition-colors\n ${currentView === item.id \n ? 'bg-blue-50 text-blue-700 border border-blue-200' \n : 'text-gray-700 hover:bg-gray-50'\n }\n `}\n >\n {item.icon}\n {item.label}\n \n ))}\n

\n\n {/* User Menu */}\n

\n {Icons.user}\n

{user.username}

{user.email}

\n \n {Icons.logout}\n Logout\n \n

\n\n {/* Mobile Overlay */}\n {mobileMenuOpen && (\n

setMobileMenuOpen(false)}\n />\n )}\n\n {/* Main Content */}\n

\n {renderCurrentView()}\n

\n );\n}",[],[241,248,264],{"_102":271,"_95":272,"_145":273,"_147":249,"_148":134,"_149":274,"_151":116,"_104":275,"_99":31,"_153":171,"_155":276,"_156":27,"_157":-5,"_158":277,"_98":278},"f3246408-37b1-11f0-9dc0-9e149126039e","AuthForm.tsx","f32464c6-37b1-11f0-9dc0-9e149126039e",14,["D",1747989787643],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { User } from \"../../shared/types.ts\";\n\ninterface AuthFormProps {\n onLogin: (user: User, token: string) => void;\n}\n\nexport default function AuthForm({ onLogin }: AuthFormProps) {\n const [isLogin, setIsLogin] = useState(true);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState('');\n const [formData, setFormData] = useState({\n username: '',\n email: '',\n password: ''\n });\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setLoading(true);\n setError('');\n\n try {\n const endpoint = isLogin ? '/api/auth/login' : '/api/auth/register';\n const body = isLogin \n ? { email: formData.email, password: formData.password }\n : formData;\n\n const response = await fetch(endpoint, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(body)\n });\n\n const data = await response.json();\n\n if (data.success) {\n onLogin(data.user, data.token);\n } else {\n setError(data.message || 'Authentication failed');\n }\n } catch (error) {\n setError('Network error. Please try again.');\n console.error('Auth error:', error);\n } finally {\n setLoading(false);\n }\n };\n\n const handleInputChange = (e: React.ChangeEvent) => {\n setFormData(prev => ({\n ...prev,\n [e.target.name]: e.target.value\n }));\n };\n\n return (\n

\n {/* Header */}\n

💰

Budget Tracker

Take control of your finances

\n\n {/* Auth Form */}\n

\n setIsLogin(true)}\n className={`flex-1 py-2 px-4 rounded-l-lg font-medium transition-colors ${\n isLogin \n ? 'bg-white text-blue-600 shadow-sm' \n : 'text-white hover:bg-white hover:bg-opacity-10'\n }`}\n >\n Login\n \n setIsLogin(false)}\n className={`flex-1 py-2 px-4 rounded-r-lg font-medium transition-colors ${\n !isLogin \n ? 'bg-white text-blue-600 shadow-sm' \n : 'text-white hover:bg-white hover:bg-opacity-10'\n }`}\n >\n Sign Up\n \n

\n\n

\n {!isLogin && (\n

\n \n Username\n \n \n

\n )}\n\n

\n \n Email\n \n \n

\n\n

\n \n Password\n \n \n

\n\n {error && (\n

\n {error}\n

\n )}\n\n \n {loading ? (\n

\n {isLogin ? 'Signing In...' : 'Creating Account...'}\n

\n ) : (\n isLogin ? 'Sign In' : 'Create Account'\n )}\n \n \n\n

\n {isLogin ? \"Don't have an account? \" : \"Already have an account? \"}\n setIsLogin(!isLogin)}\n className=\"text-white font-medium hover:underline\"\n >\n {isLogin ? 'Sign up' : 'Sign in'}\n \n

\n\n {/* Features */}\n

📊

Analytics

🎯

Budgets

📱

Mobile Ready

\n );\n}",[],[241,248,272],{"_102":280,"_95":281,"_145":282,"_147":249,"_148":134,"_149":283,"_151":116,"_104":284,"_99":31,"_153":171,"_155":285,"_156":27,"_157":-5,"_158":286,"_98":287},"55869db4-37b2-11f0-8c3f-9e149126039e","BudgetManager.tsx","55869ecc-37b2-11f0-8c3f-9e149126039e",18,["D",1747989952704],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { Budget, CategorySpending } from \"../../shared/types.ts\";\nimport { EXPENSE_CATEGORIES } from \"../../shared/types.ts\";\n\nexport default function BudgetManager() {\n const [budgets, setBudgets] = useState([]);\n const [spending, setSpending] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState('');\n const [showForm, setShowForm] = useState(false);\n const [formData, setFormData] = useState({\n category: '',\n limitAmount: '',\n period: 'monthly' as 'weekly' | 'monthly' | 'yearly'\n });\n\n useEffect(() => {\n fetchData();\n }, []);\n\n const fetchData = async () => {\n try {\n const token = localStorage.getItem('budget_token');\n \n const [budgetsResponse, spendingResponse] = await Promise.all([\n fetch('/api/budgets', {\n headers: { 'Authorization': `Bearer ${token}` }\n }),\n fetch('/api/analytics/spending?period=monthly', {\n headers: { 'Authorization': `Bearer ${token}` }\n })\n ]);\n\n if (budgetsResponse.ok && spendingResponse.ok) {\n const budgetsData = await budgetsResponse.json();\n const spendingData = await spendingResponse.json();\n\n if (budgetsData.success) setBudgets(budgetsData.data);\n if (spendingData.success) setSpending(spendingData.data);\n } else {\n setError('Failed to load budget data');\n }\n } catch (error) {\n setError('Network error');\n console.error('Fetch budgets error:', error);\n } finally {\n setLoading(false);\n }\n };\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setError('');\n\n try {\n const token = localStorage.getItem('budget_token');\n const response = await fetch('/api/budgets', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': `Bearer ${token}`\n },\n body: JSON.stringify({\n ...formData,\n limitAmount: parseFloat(formData.limitAmount)\n })\n });\n\n const data = await response.json();\n\n if (data.success) {\n await fetchData();\n setFormData({ category: '', limitAmount: '', period: 'monthly' });\n setShowForm(false);\n } else {\n setError(data.message || 'Failed to save budget');\n }\n } catch (error) {\n setError('Network error');\n console.error('Save budget error:', error);\n }\n };\n\n const handleDelete = async (id: number) => {\n try {\n const token = localStorage.getItem('budget_token');\n const response = await fetch(`/api/budgets/${id}`, {\n method: 'DELETE',\n headers: {\n 'Authorization': `Bearer ${token}`\n }\n });\n\n if (response.ok) {\n await fetchData();\n } else {\n setError('Failed to delete budget');\n }\n } catch (error) {\n setError('Network error');\n console.error('Delete budget error:', error);\n }\n };\n\n const formatCurrency = (amount: number) => {\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD'\n }).format(amount);\n };\n\n const getBudgetStatus = (spent: number, budget: number) => {\n const percentage = budget > 0 ? (spent / budget) * 100 : 0;\n \n if (percentage >= 100) return { color: 'red', status: 'Over Budget', icon: '🚨' };\n if (percentage >= 80) return { color: 'yellow', status: 'Near Limit', icon: '⚠️' };\n return { color: 'green', status: 'On Track', icon: '✅' };\n };\n\n const getProgressColor = (percentage: number) => {\n if (percentage >= 100) return 'bg-red-500';\n if (percentage >= 80) return 'bg-yellow-500';\n return 'bg-green-500';\n };\n\n if (loading) {\n return (\n

Loading budgets...

\n );\n }\n\n return (\n

\n {/* Header */}\n

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}",[],[241,248,281],{"_102":289,"_95":290,"_145":291,"_147":249,"_148":134,"_149":292,"_151":116,"_104":293,"_99":31,"_153":171,"_155":294,"_156":27,"_157":-5,"_158":295,"_98":296},"0c8fef52-37b2-11f0-a0c6-9e149126039e","Dashboard.tsx","0c8ff010-37b2-11f0-a0c6-9e149126039e",15,["D",1747989830291],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { CategorySpending, MonthlyData } from \"../../shared/types.ts\";\n\ninterface DashboardData {\n balance: number;\n monthlyIncome: number;\n monthlyExpenses: number;\n monthlyNet: number;\n categorySpending: CategorySpending[];\n recentTrends: MonthlyData[];\n}\n\nexport default function Dashboard() {\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState('');\n\n useEffect(() => {\n fetchDashboardData();\n }, []);\n\n const fetchDashboardData = async () => {\n try {\n const token = localStorage.getItem('budget_token');\n const response = await fetch('/api/analytics/dashboard', {\n headers: {\n 'Authorization': `Bearer ${token}`\n }\n });\n\n if (response.ok) {\n const result = await response.json();\n if (result.success) {\n setData(result.data);\n } else {\n setError(result.message || 'Failed to load dashboard');\n }\n } else {\n setError('Failed to load dashboard data');\n }\n } catch (error) {\n setError('Network error');\n console.error('Dashboard error:', error);\n } finally {\n setLoading(false);\n }\n };\n\n const formatCurrency = (amount: number) => {\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD'\n }).format(amount);\n };\n\n const getBalanceColor = (balance: number) => {\n if (balance > 0) return 'text-green-600';\n if (balance < 0) return 'text-red-600';\n return 'text-gray-600';\n };\n\n const getBudgetColor = (percentage: number) => {\n if (percentage >= 100) return 'bg-red-500';\n if (percentage >= 80) return 'bg-yellow-500';\n return 'bg-green-500';\n };\n\n if (loading) {\n return (\n

Loading dashboard...

\n );\n }\n\n if (error) {\n return (\n

\n ⚠️\n

Error Loading Dashboard

{error}

\n \n Try Again\n \n

\n );\n }\n\n if (!data) {\n return (\n

No data available

\n );\n }\n\n return (\n

\n {/* Header */}\n

Dashboard

Overview of your financial status

\n\n {/* Summary Cards */}\n

\n {/* Total Balance */}\n

Total Balance

\n {formatCurrency(data.balance)}\n

💰

\n\n {/* Monthly Income */}\n

Monthly Income

\n {formatCurrency(data.monthlyIncome)}\n

📈

\n\n {/* Monthly Expenses */}\n

Monthly Expenses

\n {formatCurrency(data.monthlyExpenses)}\n

📉

\n\n {/* Monthly Net */}\n

Monthly Net

\n {formatCurrency(data.monthlyNet)}\n

⚖️

\n\n {/* Budget Overview */}\n {data.categorySpending.length > 0 && (\n

Budget Overview

\n {data.categorySpending.slice(0, 5).map((category, index) => (\n

\n {category.category}\n

\n \n {formatCurrency(category.spent)} / {formatCurrency(category.budget)}\n \n \n {category.percentage.toFixed(1)}%\n \n

\n ))}\n

\n )}\n\n {/* Recent Trends */}\n {data.recentTrends.length > 0 && (\n

Recent Trends

\n {data.recentTrends.map((trend, index) => (\n

\n \n {new Date(trend.month + '-01').toLocaleDateString('en-US', { \n year: 'numeric', \n month: 'long' \n })}\n \n

\n Income: {formatCurrency(trend.income)}\n

\n Expenses: {formatCurrency(trend.expenses)}\n

\n Net: {formatCurrency(trend.net)}\n

\n ))}\n

\n )}\n\n {/* Quick Actions */}\n

Quick Actions

\n \n \n \n \n

\n \n );\n}",[],[241,248,290],{"_102":298,"_95":299,"_145":300,"_147":249,"_148":134,"_149":301,"_151":116,"_104":302,"_99":31,"_153":171,"_155":303,"_156":27,"_157":-5,"_158":304,"_98":305},"20e945ca-37b2-11f0-8e1b-9e149126039e","TransactionForm.tsx","20e9466a-37b2-11f0-8e1b-9e149126039e",16,["D",1747989864430],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { EXPENSE_CATEGORIES, INCOME_CATEGORIES } from \"../../shared/types.ts\";\n\ninterface TransactionFormProps {\n onSuccess?: () => void;\n}\n\nexport default function TransactionForm({ onSuccess }: TransactionFormProps) {\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState('');\n const [success, setSuccess] = useState('');\n const [formData, setFormData] = useState({\n type: 'expense' as 'income' | 'expense',\n amount: '',\n category: '',\n description: '',\n date: new Date().toISOString().split('T')[0]\n });\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setLoading(true);\n setError('');\n setSuccess('');\n\n try {\n const token = localStorage.getItem('budget_token');\n const response = await fetch('/api/transactions', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': `Bearer ${token}`\n },\n body: JSON.stringify({\n ...formData,\n amount: parseFloat(formData.amount)\n })\n });\n\n const data = await response.json();\n\n if (data.success) {\n setSuccess('Transaction added successfully!');\n setFormData({\n type: 'expense',\n amount: '',\n category: '',\n description: '',\n date: new Date().toISOString().split('T')[0]\n });\n \n if (onSuccess) {\n setTimeout(onSuccess, 1500);\n }\n } else {\n setError(data.message || 'Failed to add transaction');\n }\n } catch (error) {\n setError('Network error. Please try again.');\n console.error('Transaction error:', error);\n } finally {\n setLoading(false);\n }\n };\n\n const handleInputChange = (e: React.ChangeEvent) => {\n const { name, value } = e.target;\n setFormData(prev => ({\n ...prev,\n [name]: value,\n // Reset category when type changes\n ...(name === 'type' ? { category: '' } : {})\n }));\n };\n\n const categories = formData.type === 'income' ? INCOME_CATEGORIES : EXPENSE_CATEGORIES;\n\n return (\n

\n {/* Header */}\n

Add Transaction

Record your income or expenses

\n\n {/* Form */}\n

\n {/* Transaction Type */}\n

\n \n Transaction Type\n \n

\n \n \n \n 📈\n Income\n \n \n \n \n \n 📉\n Expense\n \n \n

\n\n {/* Amount */}\n

\n \n Amount\n \n

\n $\n \n

\n\n {/* Category */}\n

\n \n Category\n \n \n \n {categories.map((category) => (\n \n ))}\n \n

\n\n {/* Description */}\n

\n \n Description\n \n \n

\n\n {/* Date */}\n

\n \n Date\n \n \n

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

\n ⚠️\n {error}\n

\n )}\n\n {/* Success Message */}\n {success && (\n

\n ✅\n {success}\n

\n )}\n\n {/* Submit Button */}\n \n {loading ? (\n

\n Adding Transaction...\n

\n ) : (\n `Add ${formData.type === 'income' ? 'Income' : 'Expense'}`\n )}\n \n \n

\n\n {/* Quick Amount Buttons */}\n

Quick Amounts

\n {[5, 10, 20, 50, 100, 200].map((amount) => (\n setFormData(prev => ({ ...prev, amount: amount.toString() }))}\n className=\"py-2 px-4 bg-gray-100 hover:bg-gray-200 rounded-lg text-gray-700 font-medium transition-colors\"\n >\n ${amount}\n \n ))}\n

\n );\n}",[],[241,248,299],{"_102":307,"_95":308,"_145":309,"_147":249,"_148":134,"_149":310,"_151":116,"_104":311,"_99":31,"_153":171,"_155":312,"_156":27,"_157":-5,"_158":313,"_98":314},"38cce66a-37b2-11f0-84c9-9e149126039e","TransactionList.tsx","38cce700-37b2-11f0-84c9-9e149126039e",17,["D",1747989904510],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { Transaction } from \"../../shared/types.ts\";\n\nexport default function TransactionList() {\n const [transactions, setTransactions] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState('');\n const [editingId, setEditingId] = useState(null);\n const [deleteConfirm, setDeleteConfirm] = useState(null);\n\n useEffect(() => {\n fetchTransactions();\n }, []);\n\n const fetchTransactions = async () => {\n try {\n const token = localStorage.getItem('budget_token');\n const response = await fetch('/api/transactions', {\n headers: {\n 'Authorization': `Bearer ${token}`\n }\n });\n\n if (response.ok) {\n const data = await response.json();\n if (data.success) {\n setTransactions(data.data);\n } else {\n setError(data.message || 'Failed to load transactions');\n }\n } else {\n setError('Failed to load transactions');\n }\n } catch (error) {\n setError('Network error');\n console.error('Fetch transactions error:', error);\n } finally {\n setLoading(false);\n }\n };\n\n const handleDelete = async (id: number) => {\n try {\n const token = localStorage.getItem('budget_token');\n const response = await fetch(`/api/transactions/${id}`, {\n method: 'DELETE',\n headers: {\n 'Authorization': `Bearer ${token}`\n }\n });\n\n if (response.ok) {\n const data = await response.json();\n if (data.success) {\n setTransactions(prev => prev.filter(t => t.id !== id));\n setDeleteConfirm(null);\n } else {\n setError(data.message || 'Failed to delete transaction');\n }\n } else {\n setError('Failed to delete transaction');\n }\n } catch (error) {\n setError('Network error');\n console.error('Delete transaction error:', error);\n }\n };\n\n const formatCurrency = (amount: number) => {\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD'\n }).format(amount);\n };\n\n const formatDate = (dateString: string) => {\n return new Date(dateString).toLocaleDateString('en-US', {\n year: 'numeric',\n month: 'short',\n day: 'numeric'\n });\n };\n\n const getTypeIcon = (type: string) => {\n return type === 'income' ? '📈' : '📉';\n };\n\n const getTypeColor = (type: string) => {\n return type === 'income' ? 'text-green-600' : 'text-red-600';\n };\n\n const getTypeBg = (type: string) => {\n return type === 'income' ? 'bg-green-50' : 'bg-red-50';\n };\n\n if (loading) {\n return (\n

Loading transactions...

\n );\n }\n\n if (error) {\n return (\n

\n ⚠️\n

Error Loading Transactions

{error}

\n \n Try Again\n \n

\n );\n }\n\n return (\n

\n {/* Header */}\n

Transactions

Manage your income and expenses

\n {transactions.length} transaction{transactions.length !== 1 ? 's' : ''}\n

\n\n {/* Transactions List */}\n {transactions.length === 0 ? (\n

📝

No Transactions Yet

Start by adding your first income or expense transaction.

\n \n

\n ) : (\n

\n {transactions.map((transaction) => (\n

\n {/* Transaction Info */}\n

\n {getTypeIcon(transaction.type)}\n

\n \n

{transaction.category}

\n \n {transaction.type === 'income' ? '+' : '-'}{formatCurrency(transaction.amount)}\n \n

\n \n {transaction.description && (\n

{transaction.description}

\n )}\n \n

{formatDate(transaction.date)}

\n\n {/* Actions */}\n

\n setEditingId(transaction.id)}\n className=\"p-2 text-gray-400 hover:text-blue-600 transition-colors\"\n title=\"Edit\"\n >\n ✏️\n \n setDeleteConfirm(transaction.id)}\n className=\"p-2 text-gray-400 hover:text-red-600 transition-colors\"\n title=\"Delete\"\n >\n 🗑️\n \n

\n\n {/* Delete Confirmation */}\n {deleteConfirm === transaction.id && (\n

Are you sure you want to delete this transaction?

\n handleDelete(transaction.id)}\n className=\"bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors text-sm\"\n >\n Delete\n \n setDeleteConfirm(null)}\n className=\"bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition-colors text-sm\"\n >\n Cancel\n \n

\n )}\n

\n ))}\n

\n )}\n\n {/* Summary */}\n {transactions.length > 0 && (\n

Summary

Total Income

\n {formatCurrency(\n transactions\n .filter(t => t.type === 'income')\n .reduce((sum, t) => sum + t.amount, 0)\n )}\n

Total Expenses

\n {formatCurrency(\n transactions\n .filter(t => t.type === 'expense')\n .reduce((sum, t) => sum + t.amount, 0)\n )}\n

Net Amount

\n sum + (t.type === 'income' ? t.amount : -t.amount), 0\n ) >= 0 ? 'text-green-600' : 'text-red-600'\n }`}>\n {formatCurrency(\n transactions.reduce((sum, t) => \n sum + (t.type === 'income' ? t.amount : -t.amount), 0\n )\n )}\n

\n )}\n

\n );\n}",[],[241,248,308],[241,248],{"_102":317,"_95":318,"_145":319,"_147":242,"_148":134,"_149":243,"_151":116,"_104":320,"_99":31,"_153":321,"_155":322,"_156":27,"_157":-5,"_158":323,"_98":324},"cc009cd4-37b1-11f0-9dcc-9e149126039e","index.html","cc009d7e-37b1-11f0-9dcc-9e149126039e",["D",1747989721975],"file","\n\n\n \n \n Budget Tracker\n \n \n \n \n \n \n \n \n \n 💰\">\n \n \n \n \n \n \n \n \n \n \n \n\n\n

\n \n

Loading Budget Tracker...

\n \n \n \n\n",[],[241,318],{"_102":326,"_95":327,"_145":328,"_147":242,"_148":134,"_149":329,"_151":116,"_104":330,"_99":31,"_153":171,"_155":331,"_156":27,"_157":-5,"_158":332,"_98":333},"ce8ead38-37b1-11f0-93a6-9e149126039e","index.tsx","ce8eadec-37b1-11f0-93a6-9e149126039e",12,["D",1747989726264],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./components/App.tsx\";\n\n// Initialize the React app\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[241,327],[241],{"_102":336,"_95":337,"_145":338,"_147":-5,"_148":134,"_149":339,"_151":116,"_104":340,"_99":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":341,"_98":350},"707ebfb2-37b1-11f0-a65a-9e149126039e","shared","4918b545-b616-49b1-9ffc-937519d5d7b2",3,["D",1747989568426],[342],{"_102":343,"_95":344,"_145":345,"_147":338,"_148":134,"_149":339,"_151":116,"_104":346,"_99":31,"_153":171,"_155":347,"_156":27,"_157":-5,"_158":348,"_98":349},"707e949c-37b1-11f0-a65a-9e149126039e","types.ts","707e9564-37b1-11f0-a65a-9e149126039e",["D",1747989568426],"// Shared types for the budget tracking app\n\nexport interface User {\n id: number;\n username: string;\n email: string;\n created_at: string;\n}\n\nexport interface Transaction {\n id: number;\n user_id: number;\n type: 'income' | 'expense';\n amount: number;\n category: string;\n description: string;\n date: string;\n created_at: string;\n}\n\nexport interface Budget {\n id: number;\n user_id: number;\n category: string;\n limit_amount: number;\n period: 'weekly' | 'monthly' | 'yearly';\n created_at: string;\n}\n\nexport interface CategorySpending {\n category: string;\n spent: number;\n budget: number;\n percentage: number;\n}\n\nexport interface MonthlyData {\n month: string;\n income: number;\n expenses: number;\n net: number;\n}\n\nexport interface AuthResponse {\n success: boolean;\n user?: User;\n token?: string;\n message?: string;\n}\n\nexport interface ApiResponse {\n success: boolean;\n data?: T;\n message?: string;\n}\n\n// Common expense categories\nexport const EXPENSE_CATEGORIES = [\n 'Food & Dining',\n 'Transportation',\n 'Shopping',\n 'Entertainment',\n 'Bills & Utilities',\n 'Healthcare',\n 'Education',\n 'Travel',\n 'Groceries',\n 'Housing',\n 'Insurance',\n 'Savings',\n 'Other'\n] as const;\n\n// Common income categories\nexport const INCOME_CATEGORIES = [\n 'Salary',\n 'Freelance',\n 'Business',\n 'Investments',\n 'Gifts',\n 'Other'\n] as const;\n\nexport type ExpenseCategory = typeof EXPENSE_CATEGORIES[number];\nexport type IncomeCategory = typeof INCOME_CATEGORIES[number];",[],[337,344],[337],{"_102":352,"_95":353,"_145":354,"_147":-5,"_148":134,"_149":355,"_151":116,"_104":356,"_99":31,"_153":321,"_155":357,"_156":27,"_157":-5,"_158":358,"_98":359},"6aaef124-37b1-11f0-86ff-9e149126039e","README.md","6aaef1f6-37b1-11f0-86ff-9e149126039e",2,["D",1747989558701],"# Budget Tracker App\n\nA comprehensive budget tracking web application built for Val Town with mobile-first design.\n\n## Features\n\n- 📱 Mobile-responsive design\n- 💰 Income and expense tracking\n- 📊 Budget categories and spending limits\n- 📈 Visual analytics with charts\n- 💾 SQLite data persistence\n- 🔒 Simple user authentication\n- 📱 PWA capabilities for app-like experience\n\n## Project Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Database schema setup\n│ │ └── queries.ts # Database query functions\n│ ├── routes/\n│ │ ├── auth.ts # Authentication routes\n│ │ ├── transactions.ts # Transaction CRUD operations\n│ │ ├── budgets.ts # Budget management\n│ │ └── analytics.ts # Analytics and reporting\n│ └── index.ts # Main Hono app entry point\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main app component\n│ │ ├── Dashboard.tsx # Dashboard overview\n│ │ ├── TransactionForm.tsx\n│ │ ├── TransactionList.tsx\n│ │ ├── BudgetManager.tsx\n│ │ └── Analytics.tsx\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend entry point\n│ └── style.css # Custom styles\n└── shared/\n └── types.ts # Shared TypeScript types\n```\n\n## Tech Stack\n\n- **Backend**: TypeScript with Hono framework\n- **Frontend**: React 18.2.0 with TypeScript\n- **Database**: SQLite\n- **Styling**: TailwindCSS\n- **Charts**: Chart.js\n- **Icons**: Lucide React\n\n## Getting Started\n\n1. Set the backend trigger to HTTP\n2. The app will automatically set up the database on first run\n3. Access the app through the HTTP endpoint\n4. Create an account and start tracking your budget!\n\n## API Endpoints\n\n- `POST /api/auth/register` - User registration\n- `POST /api/auth/login` - User login\n- `GET /api/transactions` - Get user transactions\n- `POST /api/transactions` - Create new transaction\n- `PUT /api/transactions/:id` - Update transaction\n- `DELETE /api/transactions/:id` - Delete transaction\n- `GET /api/budgets` - Get user budgets\n- `POST /api/budgets` - Create/update budget\n- `GET /api/analytics` - Get spending analytics",[],[353],{"_102":361,"_95":362,"_145":114,"_147":-5,"_148":134,"_149":233,"_151":116,"_104":363,"_99":31,"_153":234,"_155":364,"_156":27,"_157":-5,"_158":365,"_98":366},"9ed454a2-275e-11f0-86ff-569c3dd06744","main.tsx",["D",1744615428602],"export default async function (req: Request): Promise {\n return Response.json({ ok: true })\n}",[],[362],"files",[142,160,166,175,185,192,201,209,218,228,239,246,253,262,270,279,288,297,306,316,325,335,342,351,360],"counts",{"_371":31,"_372":233,"_373":31,"_374":31},"pulls","branches","forks","envVars","contents",[377,380,383,386,389],{"_102":143,"_95":144,"_145":146,"_147":-5,"_148":134,"_149":150,"_151":116,"_104":378,"_99":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_98":379},["D",1747989578472],[144],{"_102":240,"_95":241,"_145":242,"_147":-5,"_148":134,"_149":243,"_151":116,"_104":381,"_99":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_98":382},["D",1747989721975],[241],{"_102":336,"_95":337,"_145":338,"_147":-5,"_148":134,"_149":339,"_151":116,"_104":384,"_99":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_98":385},["D",1747989568426],[337],{"_102":352,"_95":353,"_145":354,"_147":-5,"_148":134,"_149":355,"_151":116,"_104":387,"_99":31,"_153":321,"_155":357,"_156":27,"_157":-5,"_98":388},["D",1747989558701],[353],{"_102":361,"_95":362,"_145":114,"_147":-5,"_148":134,"_149":233,"_151":116,"_104":390,"_99":31,"_153":234,"_155":364,"_156":27,"_157":-5,"_98":391},["D",1744615428602],[362],"upstream","emptyEnvVars","isNew","routes/_app.x.$handle.$name.branch.$branch.history",{"_93":94,"_95":96,"_97":41,"_100":397,"_401":402,"_523":31,"_524":27},{"_102":103,"_95":96,"_104":398,"_106":-5,"_107":27,"_108":109,"_110":-5,"_111":-5,"_12":112,"_113":114,"_115":116,"_117":118,"_119":31,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":27,"_21":399,"_132":400},["D",1746194779342],{"_93":94,"_130":131},{"_99":118,"_95":41,"_102":134,"_135":103,"_136":-5,"_137":-5,"_138":-5,"_139":-5},"history",[403,408,413,418,423,428,433,438,446,451,459,466,471,476,481,489,494,505,513,518],{"_145":231,"_99":118,"_104":404,"_148":134,"_367":405},["D",1747990009645],[406],{"_102":229,"_148":134,"_145":231,"_95":230,"_155":235,"_153":234,"_99":233,"_147":146,"_104":404,"_149":118,"_157":-5,"_151":116,"_156":27,"_98":407},[144,230],{"_145":256,"_99":257,"_104":409,"_148":134,"_367":410},["D",1747990004964],[411],{"_102":254,"_148":134,"_145":256,"_95":255,"_155":259,"_153":171,"_99":31,"_147":249,"_104":409,"_149":257,"_157":-5,"_151":116,"_156":27,"_98":412},[241,248,255],{"_145":282,"_99":283,"_104":414,"_148":134,"_367":415},["D",1747989952704],[416],{"_102":280,"_148":134,"_145":282,"_95":281,"_155":285,"_153":171,"_99":31,"_147":249,"_104":414,"_149":283,"_157":-5,"_151":116,"_156":27,"_98":417},[241,248,281],{"_145":309,"_99":310,"_104":419,"_148":134,"_367":420},["D",1747989904510],[421],{"_102":307,"_148":134,"_145":309,"_95":308,"_155":312,"_153":171,"_99":31,"_147":249,"_104":419,"_149":310,"_157":-5,"_151":116,"_156":27,"_98":422},[241,248,308],{"_145":300,"_99":301,"_104":424,"_148":134,"_367":425},["D",1747989864430],[426],{"_102":298,"_148":134,"_145":300,"_95":299,"_155":303,"_153":171,"_99":31,"_147":249,"_104":424,"_149":301,"_157":-5,"_151":116,"_156":27,"_98":427},[241,248,299],{"_145":291,"_99":292,"_104":429,"_148":134,"_367":430},["D",1747989830291],[431],{"_102":289,"_148":134,"_145":291,"_95":290,"_155":294,"_153":171,"_99":31,"_147":249,"_104":429,"_149":292,"_157":-5,"_151":116,"_156":27,"_98":432},[241,248,290],{"_145":273,"_99":274,"_104":434,"_148":134,"_367":435},["D",1747989787643],[436],{"_102":271,"_148":134,"_145":273,"_95":272,"_155":276,"_153":171,"_99":31,"_147":249,"_104":434,"_149":274,"_157":-5,"_151":116,"_156":27,"_98":437},[241,248,272],{"_145":265,"_99":250,"_104":439,"_148":134,"_367":440},["D",1747989757042],[441,443],{"_102":263,"_148":134,"_145":265,"_95":264,"_155":267,"_153":171,"_99":31,"_147":249,"_104":439,"_149":250,"_157":-5,"_151":116,"_156":27,"_98":442},[241,248,264],{"_102":247,"_148":134,"_145":249,"_95":248,"_155":-5,"_153":154,"_99":31,"_147":242,"_104":444,"_149":250,"_157":-5,"_151":116,"_156":27,"_98":445},["D",1747989757042],[241,248],{"_145":328,"_99":329,"_104":447,"_148":134,"_367":448},["D",1747989726264],[449],{"_102":326,"_148":134,"_145":328,"_95":327,"_155":331,"_153":171,"_99":31,"_147":242,"_104":447,"_149":329,"_157":-5,"_151":116,"_156":27,"_98":450},[241,327],{"_145":319,"_99":243,"_104":452,"_148":134,"_367":453},["D",1747989721975],[454,456],{"_102":317,"_148":134,"_145":319,"_95":318,"_155":322,"_153":321,"_99":31,"_147":242,"_104":452,"_149":243,"_157":-5,"_151":116,"_156":27,"_98":455},[241,318],{"_102":240,"_148":134,"_145":242,"_95":241,"_155":-5,"_153":154,"_99":31,"_147":-5,"_104":457,"_149":243,"_157":-5,"_151":116,"_156":27,"_98":458},["D",1747989721975],[241],{"_145":231,"_99":460,"_104":461,"_148":134,"_367":462},10,["D",1747989704896],[463],{"_102":464,"_148":134,"_145":231,"_95":230,"_155":235,"_153":171,"_99":31,"_147":146,"_104":461,"_149":460,"_157":-5,"_151":27,"_156":27,"_98":465},"c1d288b2-37b1-11f0-b71b-9e149126039e",[144,230],{"_145":195,"_99":196,"_104":467,"_148":134,"_367":468},["D",1747989693433],[469],{"_102":193,"_148":134,"_145":195,"_95":194,"_155":198,"_153":171,"_99":31,"_147":188,"_104":467,"_149":196,"_157":-5,"_151":116,"_156":27,"_98":470},[144,187,194],{"_145":212,"_99":213,"_104":472,"_148":134,"_367":473},["D",1747989668887],[474],{"_102":210,"_148":134,"_145":212,"_95":211,"_155":215,"_153":171,"_99":31,"_147":188,"_104":472,"_149":213,"_157":-5,"_151":116,"_156":27,"_98":475},[144,187,211],{"_145":221,"_99":222,"_104":477,"_148":134,"_367":478},["D",1747989651890],[479],{"_102":219,"_148":134,"_145":221,"_95":220,"_155":224,"_153":171,"_99":31,"_147":188,"_104":477,"_149":222,"_157":-5,"_151":116,"_156":27,"_98":480},[144,187,220],{"_145":204,"_99":189,"_104":482,"_148":134,"_367":483},["D",1747989627946],[484,486],{"_102":202,"_148":134,"_145":204,"_95":203,"_155":206,"_153":171,"_99":31,"_147":188,"_104":482,"_149":189,"_157":-5,"_151":116,"_156":27,"_98":485},[144,187,203],{"_102":186,"_148":134,"_145":188,"_95":187,"_155":-5,"_153":154,"_99":31,"_147":146,"_104":487,"_149":189,"_157":-5,"_151":116,"_156":27,"_98":488},["D",1747989627946],[144,187],{"_145":178,"_99":179,"_104":490,"_148":134,"_367":491},["D",1747989604360],[492],{"_102":176,"_148":134,"_145":178,"_95":177,"_155":181,"_153":171,"_99":31,"_147":163,"_104":490,"_149":179,"_157":-5,"_151":116,"_156":27,"_98":493},[144,162,177],{"_145":163,"_99":150,"_104":495,"_148":134,"_367":496},["D",1747989578472],[497,499,502],{"_102":161,"_148":134,"_145":163,"_95":162,"_155":-5,"_153":154,"_99":31,"_147":146,"_104":495,"_149":150,"_157":-5,"_151":116,"_156":27,"_98":498},[144,162],{"_102":167,"_148":134,"_145":169,"_95":168,"_155":172,"_153":171,"_99":31,"_147":163,"_104":500,"_149":150,"_157":-5,"_151":116,"_156":27,"_98":501},["D",1747989578472],[144,162,168],{"_102":143,"_148":134,"_145":146,"_95":144,"_155":-5,"_153":154,"_99":31,"_147":-5,"_104":503,"_149":150,"_157":-5,"_151":116,"_156":27,"_98":504},["D",1747989578472],[144],{"_145":345,"_99":339,"_104":506,"_148":134,"_367":507},["D",1747989568426],[508,510],{"_102":343,"_148":134,"_145":345,"_95":344,"_155":347,"_153":171,"_99":31,"_147":338,"_104":506,"_149":339,"_157":-5,"_151":116,"_156":27,"_98":509},[337,344],{"_102":336,"_148":134,"_145":338,"_95":337,"_155":-5,"_153":154,"_99":31,"_147":-5,"_104":511,"_149":339,"_157":-5,"_151":116,"_156":27,"_98":512},["D",1747989568426],[337],{"_145":354,"_99":355,"_104":514,"_148":134,"_367":515},["D",1747989558701],[516],{"_102":352,"_148":134,"_145":354,"_95":353,"_155":357,"_153":321,"_99":31,"_147":-5,"_104":514,"_149":355,"_157":-5,"_151":116,"_156":27,"_98":517},[353],{"_145":114,"_99":233,"_104":519,"_148":134,"_367":520},["D",1744615428602],[521],{"_102":361,"_148":134,"_145":114,"_95":362,"_155":364,"_153":234,"_99":31,"_147":-5,"_104":519,"_149":233,"_157":-5,"_151":116,"_156":27,"_98":522},[362],"page","hasNext","routes/_app","actionData","errors"]

History