💰 Room Financial Tracker

Total Income

₹{totalSummary.totalIncome.toFixed(2)}

Total Outcome

₹{totalSummary.totalOutcome.toFixed(2)}

Net Balance

₹{totalSummary.netBalance.toFixed(2)}

\n\n

\n \n

📊 Income by Room (Pie Chart)

📈 Income vs Outcome by Room (Bar Chart)

\n\n

Transactions

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

Type	Amount	Room	Description	Date	Actions
\n \n	\n setEditingTransaction({...editingTransaction, amount: e.target.value})}\n />\n	\n setEditingTransaction({...editingTransaction, room: e.target.value})}\n />\n	\n setEditingTransaction({...editingTransaction, description: e.target.value})}\n />\n	{new Date(transaction.timestamp).toLocaleString()}	\n \n \n
{transaction.type === 'income' ? '📈' : '📉'}	₹{transaction.amount}	{transaction.room}	{transaction.description}	{new Date(transaction.timestamp).toLocaleString()}	\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 = \"righteousSilverLandfowl\";\n const SCHEMA_VERSION = 4;\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_transactions_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n type TEXT NOT NULL,\n amount REAL NOT NULL,\n room TEXT NOT NULL,\n description TEXT,\n timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n if (request.method === 'POST' && new URL(request.url).pathname === '/add-transaction') {\n const transaction = await request.json();\n await sqlite.execute(`\n INSERT INTO ${KEY}_transactions_${SCHEMA_VERSION} \n (type, amount, room, description) \n VALUES (?, ?, ?, ?)\n `, [transaction.type, transaction.amount, transaction.room, transaction.description]);\n return new Response(JSON.stringify({ success: true }), { \n headers: { 'Content-Type': 'application/json' } \n });\n }\n\n if (request.method === 'POST' && new URL(request.url).pathname === '/update-transaction') {\n const transaction = await request.json();\n await sqlite.execute(`\n UPDATE ${KEY}_transactions_${SCHEMA_VERSION} \n SET type = ?, amount = ?, room = ?, description = ?\n WHERE id = ?\n `, [transaction.type, transaction.amount, transaction.room, transaction.description, transaction.id]);\n return new Response(JSON.stringify({ success: true }), { \n headers: { 'Content-Type': 'application/json' } \n });\n }\n\n if (request.method === 'POST' && new URL(request.url).pathname === '/delete-transaction') {\n const { id } = await request.json();\n await sqlite.execute(`\n DELETE FROM ${KEY}_transactions_${SCHEMA_VERSION} \n WHERE id = ?\n `, [id]);\n return new Response(JSON.stringify({ success: true }), { \n headers: { 'Content-Type': 'application/json' } \n });\n }\n\n if (request.method === 'GET' && new URL(request.url).pathname === '/transactions') {\n const result = await sqlite.execute(`\n SELECT * FROM ${KEY}_transactions_${SCHEMA_VERSION} \n ORDER BY timestamp DESC \n LIMIT 50\n `);\n return new Response(JSON.stringify(result.rows), { \n headers: { 'Content-Type': 'application/json' } \n });\n }\n\n return new Response(`\n \n \n Room Financial Tracker\n \n \n \n

\n \n \n \n \n `, {\n headers: { 'Content-Type': 'text/html' }\n });\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n max-width: 1000px;\n margin: 0 auto;\n padding: 20px;\n background-color: #f4f4f4;\n}\n.container {\n background-color: white;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n.total-summary {\n display: flex;\n justify-content: space-between;\n margin-bottom: 20px;\n}\n.summary-card {\n flex: 1;\n margin: 0 10px;\n padding: 15px;\n border-radius: 8px;\n text-align: center;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n.summary-card.income {\n background-color: #e6ffe6;\n}\n.summary-card.outcome {\n background-color: #ffe6e6;\n}\n.summary-card.balance {\n background-color: #e6f2ff;\n}\n.summary-card h3 {\n margin: 0 0 10px;\n color: #333;\n}\n.summary-card p {\n font-size: 1.5em;\n font-weight: bold;\n margin: 0;\n}\n.transaction-form {\n margin-bottom: 20px;\n}\nform {\n display: flex;\n gap: 10px;\n}\ninput, select {\n padding: 8px;\n flex-grow: 1;\n}\ntable {\n width: 100%;\n border-collapse: collapse;\n}\nth, td {\n border: 1px solid #ddd;\n padding: 8px;\n text-align: left;\n}\n.income { background-color: #e6ffe6; }\n.outcome { background-color: #ffe6e6; }\n.chart-section {\n display: flex;\n justify-content: space-between;\n margin-bottom: 20px;\n}\n.chart-container {\n width: 48%;\n}\n.chart-container canvas {\n max-width: 100%;\n height: auto;\n}\ntable button {\n margin-right: 5px;\n padding: 4px 8px;\n cursor: pointer;\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/Hemant700/righteousSilverLandfowl/code/main.tsx","extension","actionData","errors"]