\n {saveStatus.message && (\n

\n {saveStatus.message}\n

\n )}\n\n {/* Previous expense form remains the same */}\n\n

Transaction History

\n {selectedTransactions.length > 0 && (\n \n Delete Selected ({selectedTransactions.length})\n \n )}\n \n Delete All Transactions\n \n

\n {transactions.map((transaction) => (\n \n {editingTransaction && editingTransaction.id === transaction.id\n ? (\n

\n \n setEditingTransaction({\n ...editingTransaction,\n amount: Number(e.target.value),\n })}\n placeholder=\"Amount\"\n required\n />\n \n setEditingTransaction({\n ...editingTransaction,\n reason: e.target.value,\n subReason: \"\", // Reset subcategory when main category changes\n })}\n required\n >\n \n {Object.keys(EXPENSE_CATEGORIES).map((category) => (\n \n ))}\n \n\n {editingTransaction.reason && (\n \n setEditingTransaction({\n ...editingTransaction,\n subReason: e.target.value,\n })}\n required\n >\n \n {EXPENSE_CATEGORIES[editingTransaction.reason].map((subCategory) => (\n \n ))}\n \n )}\n\n \n setEditingTransaction({\n ...editingTransaction,\n date: e.target.value,\n })}\n required\n />\n \n setEditingTransaction({\n ...editingTransaction,\n userValue: Number(e.target.value),\n })}\n placeholder=\"User Value\"\n />\n

\n \n \n

\n )\n : (\n <>\n toggleTransactionSelection(transaction.id)}\n className=\"transaction-checkbox\"\n />\n \n {transaction.type === \"expense\" ? \"💸\" : \"💰\"}\n {transaction.type === \"expense\" ? \"-\" : \"+\"}\n ₹{transaction.amount} - {transaction.reason} - {transaction.sub_reason}\n {transaction.user_value !== null && ` (User Value: ${transaction.user_value})`}\n {transaction.date && ` on ${transaction.date}`}\n \n handleEditTransaction(transaction)}\n className=\"edit-transaction-btn\"\n >\n ✏️\n \n \n )}\n

\n ))}\n\n {/* Previous pagination and email sections remain the same */}\n

\n \n );\n}\n\n// Server-side modifications\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const { email } = await import(\"https://esm.town/v/std/email\");\n const KEY = \"roomManagementApp\";\n const SCHEMA_VERSION = 17;\n\n // Previous database setup code remains the same\n\n if (request.method === \"POST\") {\n const body = await request.json();\n\n // New route for editing transactions\n if (request.url.includes(\"/edit-transaction\")) {\n try {\n // Update transaction details\n await sqlite.execute(\n `\n UPDATE ${KEY}_transactions_${SCHEMA_VERSION}\n SET \n amount = ?, \n reason = ?, \n sub_reason = ?, \n date = ?, \n user_value = ?\n WHERE id = ?\n `,\n [\n body.amount,\n body.reason,\n body.subReason,\n body.date,\n body.userValue || null,\n body.id,\n ],\n );\n\n return new Response(\n JSON.stringify({\n success: true,\n message: \"Transaction updated successfully\",\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n } catch (err) {\n return new Response(\n JSON.stringify({\n success: false,\n message: \"Failed to update transaction: \" + err.message,\n }),\n {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n }\n\n // Previous POST routes remain the same\n }\n\n // Previous GET and other routes remain the same\n}\n\n// CSS modifications\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n background-color: #f4f4f4;\n}\n\n.container {\n background: white;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n position: relative;\n}\n\n.transaction-item {\n display: flex;\n align-items: center;\n background-color: #f9f9f9;\n padding: 10px;\n border-bottom: 1px solid #e0e0e0;\n position: relative;\n}\n\n.transaction-details {\n flex-grow: 1;\n margin-left: 10px;\n}\n\n.edit-transaction-btn {\n background: none;\n border: none;\n cursor: pointer;\n font-size: 16px;\n}\n\n.edit-transaction-form {\n display: flex;\n flex-direction: column;\n gap: 10px;\n width: 100%;\n}\n\n.edit-transaction-form input,\n.edit-transaction-form select {\n padding: 8px;\n border: 1px solid #ddd;\n border-radius: 4px;\n}\n\n.edit-actions {\n display: flex;\n gap: 10px;\n}\n\n.edit-actions button {\n padding: 8px 12px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n\n.edit-actions button:first-child {\n background-color: #28a745;\n color: white;\n}\n\n.edit-actions .cancel-btn {\n background-color: #6c757d;\n color: white;\n}\n\n/* Previous CSS remains the same */\n`;","deleted","label",[99],"permalink","https://www.val.town/x/Hemant700/roomManagementApp/code/main.tsx","extension","actionData","errors"]