;\n}\n\nfunction App() {\n const [transactions, setTransactions] = useState([]);\n const [description, setDescription] = useState(\"\");\n const [amount, setAmount] = useState(\"\");\n const [category, setCategory] = useState(CATEGORIES[0]);\n const [transactionType, setTransactionType] = useState('expense');\n const [transactionDate, setTransactionDate] = useState(new Date().toISOString().split('T')[0]);\n const [total, setTotal] = useState(0);\n const [analysis, setAnalysis] = useState({\n monthlyIncome: 0,\n monthlyExpenses: 0,\n monthlySavings: 0,\n topIncomeCategories: [],\n topExpenseCategories: []\n });\n const [editingTransaction, setEditingTransaction] = useState(null);\n\n useEffect(() => {\n fetchTransactions();\n }, []);\n\n const fetchTransactions = async () => {\n try {\n const response = await fetch('/transactions');\n const data = await response.json();\n setTransactions(data.transactions);\n setTotal(data.total);\n setAnalysis(data.analysis);\n } catch (error) {\n console.error(\"Failed to fetch transactions\", error);\n }\n };\n\n const addTransaction = async (e) => {\n e.preventDefault();\n try {\n const response = await fetch('/transactions', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ \n description, \n amount: parseFloat(amount),\n category,\n type: transactionType,\n date: transactionDate\n })\n });\n const result = await response.json();\n setTransactions(result.transactions);\n setTotal(result.total);\n setAnalysis(result.analysis);\n setDescription(\"\");\n setAmount(\"\");\n setTransactionDate(new Date().toISOString().split('T')[0]);\n } catch (error) {\n console.error(\"Failed to add transaction\", error);\n }\n };\n\n const resetTracking = async () => {\n if (window.confirm(\"Are you sure you want to reset all transactions? This cannot be undone.\")) {\n try {\n const response = await fetch('/transactions/reset', { method: 'POST' });\n const result = await response.json();\n setTransactions([]);\n setTotal(0);\n setAnalysis({\n monthlyIncome: 0,\n monthlyExpenses: 0,\n monthlySavings: 0,\n topIncomeCategories: [],\n topExpenseCategories: []\n });\n } catch (error) {\n console.error(\"Failed to reset transactions\", error);\n }\n }\n };\n\n return (\n

💰 Budget Tracker

\n \n

Monthly Overview

Income: ₦{analysis.monthlyIncome.toFixed(2)}

Expenses: ₦{analysis.monthlyExpenses.toFixed(2)}

Savings: ₦{analysis.monthlySavings.toFixed(2)}

\n \n

\n\n

\n \n setDescription(e.target.value)}\n placeholder=\"Transaction Description\" \n required \n />\n setAmount(e.target.value)}\n placeholder=\"Amount\" \n step=\"0.01\" \n min=\"0\" \n required \n />\n \n setTransactionDate(e.target.value)}\n required \n />\n \n

\n\n

Recent Transactions

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

\n {new Date(transaction.transaction_date).toLocaleDateString()}\n {transaction.description}\n {transaction.category}\n

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

\n ))}\n

\n\n

Top Income Categories

\n {analysis.topIncomeCategories.map((cat, index) => (\n

\n {cat.category}\n ₦{cat.total.toFixed(2)}\n

\n ))}\n

Top Expense Categories

\n {analysis.topExpenseCategories.map((cat, index) => (\n

\n {cat.category}\n ₦{cat.total.toFixed(2)}\n

\n ))}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"budgetTrackerApplication\";\n const SCHEMA_VERSION = 4;\n\n // Updated table schema to include type, date\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_transactions_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n description TEXT NOT NULL,\n amount REAL NOT NULL,\n type TEXT NOT NULL CHECK(type IN ('income', 'expense')),\n category TEXT NOT NULL,\n transaction_date DATE NOT NULL,\n timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n const url = new URL(request.url);\n\n // Root path handler\n if (url.pathname === '/' || url.pathname === '') {\n return new Response(`\n \n \n Budget Tracker\n \n \n \n \n

\n \n \n \n \n `, {\n headers: { 'Content-Type': 'text/html' }\n });\n }\n\n // Fetch transactions endpoint\n if (url.pathname === '/transactions' && request.method === 'GET') {\n const transactionsResult = await sqlite.execute(`\n SELECT * FROM ${KEY}_transactions_${SCHEMA_VERSION} \n ORDER BY transaction_date DESC\n LIMIT 50\n `);\n\n const monthlyIncomeResult = await sqlite.execute(`\n SELECT SUM(amount) as monthly_income \n FROM ${KEY}_transactions_${SCHEMA_VERSION} \n WHERE type = 'income' AND transaction_date >= date('now', '-30 days')\n `);\n const monthlyIncome = monthlyIncomeResult.rows[0].monthly_income || 0;\n\n const monthlyExpensesResult = await sqlite.execute(`\n SELECT SUM(amount) as monthly_expenses \n FROM ${KEY}_transactions_${SCHEMA_VERSION} \n WHERE type = 'expense' AND transaction_date >= date('now', '-30 days')\n `);\n const monthlyExpenses = monthlyExpensesResult.rows[0].monthly_expenses || 0;\n\n const topIncomeCategoriesResult = await sqlite.execute(`\n SELECT category, SUM(amount) as total \n FROM ${KEY}_transactions_${SCHEMA_VERSION} \n WHERE type = 'income'\n GROUP BY category \n ORDER BY total DESC \n LIMIT 5\n `);\n\n const topExpenseCategoriesResult = await sqlite.execute(`\n SELECT category, SUM(amount) as total \n FROM ${KEY}_transactions_${SCHEMA_VERSION} \n WHERE type = 'expense'\n GROUP BY category \n ORDER BY total DESC \n LIMIT 5\n `);\n\n return new Response(JSON.stringify({\n transactions: transactionsResult.rows,\n total: monthlyIncome - monthlyExpenses,\n analysis: {\n monthlyIncome,\n monthlyExpenses,\n monthlySavings: monthlyIncome - monthlyExpenses,\n topIncomeCategories: topIncomeCategoriesResult.rows,\n topExpenseCategories: topExpenseCategoriesResult.rows\n }\n }), {\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Add transaction endpoint\n if (url.pathname === '/transactions' && request.method === 'POST') {\n const { description, amount, category, type, date } = await request.json();\n await sqlite.execute(`\n INSERT INTO ${KEY}_transactions_${SCHEMA_VERSION} \n (description, amount, category, type, transaction_date) \n VALUES (?, ?, ?, ?, ?)\n `, [description, amount, category, type, date]);\n\n // Fetch transactions and compute analysis\n const transactionsResult = await sqlite.execute(`\n SELECT * FROM ${KEY}_transactions_${SCHEMA_VERSION} \n ORDER BY transaction_date DESC\n LIMIT 50\n `);\n\n const monthlyIncomeResult = await sqlite.execute(`\n SELECT SUM(amount) as monthly_income \n FROM ${KEY}_transactions_${SCHEMA_VERSION} \n WHERE type = 'income' AND transaction_date >= date('now', '-30 days')\n `);\n const monthlyIncome = monthlyIncomeResult.rows[0].monthly_income || 0;\n\n const monthlyExpensesResult = await sqlite.execute(`\n SELECT SUM(amount) as monthly_expenses \n FROM ${KEY}_transactions_${SCHEMA_VERSION} \n WHERE type = 'expense' AND transaction_date >= date('now', '-30 days')\n `);\n const monthlyExpenses = monthlyExpensesResult.rows[0].monthly_expenses || 0;\n\n const topIncomeCategoriesResult = await sqlite.execute(`\n SELECT category, SUM(amount) as total \n FROM ${KEY}_transactions_${SCHEMA_VERSION} \n WHERE type = 'income'\n GROUP BY category \n ORDER BY total DESC \n LIMIT 5\n `);\n\n const topExpenseCategoriesResult = await sqlite.execute(`\n SELECT category, SUM(amount) as total \n FROM ${KEY}_transactions_${SCHEMA_VERSION} \n WHERE type = 'expense'\n GROUP BY category \n ORDER BY total DESC \n LIMIT 5\n `);\n\n return new Response(JSON.stringify({\n transactions: transactionsResult.rows,\n total: monthlyIncome - monthlyExpenses,\n analysis: {\n monthlyIncome,\n monthlyExpenses,\n monthlySavings: monthlyIncome - monthlyExpenses,\n topIncomeCategories: topIncomeCategoriesResult.rows,\n topExpenseCategories: topExpenseCategoriesResult.rows\n }\n }), {\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Reset transactions endpoint\n if (url.pathname === '/transactions/reset' && request.method === 'POST') {\n await sqlite.execute(`DELETE FROM ${KEY}_transactions_${SCHEMA_VERSION}`);\n return new Response(JSON.stringify({ \n transactions: [], \n total: 0, \n analysis: { \n monthlyIncome: 0,\n monthlyExpenses: 0,\n monthlySavings: 0,\n topIncomeCategories: [],\n topExpenseCategories: []\n } \n }), {\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Default response for any unhandled routes\n return new Response('Not Found', { status: 404 });\n}\n\nconst css = `\n:root {\n --primary-color: #4A90E2;\n --secondary-color: #50E3C2;\n --background-light: #F7F9FC;\n --text-dark: #2C3E50;\n --accent-color: #FF6B6B;\n}\n\nbody {\n font-family: 'Inter', sans-serif;\n background-color: var(--background-light);\n margin: 0;\n display: flex;\n justify-content: center;\n padding: 20px;\n color: var(--text-dark);\n line-height: 1.6;\n}\n\n.budget-container {\n background-color: white;\n border-radius: 16px;\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);\n padding: 30px;\n width: 100%;\n max-width: 800px;\n transition: all 0.3s ease;\n}\n\n.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n}\n\nh1 {\n text-align: center;\n color: var(--primary-color);\n margin: 0;\n font-size: 2rem;\n}\n\n.reset-btn {\n background-color: var(--accent-color);\n color: white;\n border: none;\n padding: 10px 15px;\n border-radius: 8px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.reset-btn:hover {\n background-color: #FF5252;\n}\n\n.analysis-summary {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 30px;\n gap: 20px;\n}\n\n.total-display {\n background-color: var(--background-light);\n padding: 20px;\n border-radius: 12px;\n text-align: center;\n flex: 1;\n}\n\n.chart-container {\n flex: 1;\n max-width: 100%;\n overflow: hidden;\n}\n\n.transaction-form {\n display: grid;\n grid-template-columns: repeat(3, 1fr) auto;\n gap: 10px;\n margin-bottom: 30px;\n}\n\n.transaction-form input, \n.transaction-form select {\n padding: 12px;\n border: 1px solid #E0E0E0;\n border-radius: 8px;\n font-size: 16px;\n width: 100%;\n box-sizing: border-box;\n}\n\n.transaction-type-select,\n.category-select {\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.add-btn {\n background-color: var(--secondary-color);\n color: white;\n border: none;\n padding: 12px 20px;\n border-radius: 8px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n white-space: nowrap;\n}\n\n.add-btn:hover {\n background-color: #40D3B5;\n}\n\n.transaction-list, .top-categories {\n background-color: var(--background-light);\n border-radius: 12px;\n padding: 20px;\n margin-top: 20px;\n}\n\n.transaction-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 0;\n border-bottom: 1px solid #E0E0E0;\n}\n\n.transaction-details {\n display: flex;\n flex-direction: column;\n gap: 5px;\n}\n\n.transaction-date {\n color: #666;\n font-size: 0.8em;\n}\n\n.transaction-category {\n color: #888;\n font-size: 0.9em;\n}\n\n.transaction-amount.income {\n color: green;\n}\n\n.transaction-amount.expense {\n color: red;\n}\n\n.top-categories {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 20px;\n}\n\n@media (max-width: 600px) {\n .transaction-form {\n grid-template-columns: 1fr;\n }\n \n .analysis-summary {\n flex-direction: column;\n }\n \n .top-categories {\n grid-template-columns: 1fr;\n }\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/techdoctorP/budgetTrackerApplication/code/main.tsx","extension","actionData","errors"]