💰 Enterprise Expense Management

\n \n

\n setNewExpense(prev => ({ ...prev, amount: Number(e.target.value) }))}\n />\n \n

setNewExpense(prev => ({ ...prev, description: e.target.value }))}\n        />\n        <input \n          type=\"date\" \n          value={newExpense.date || ''} \n          onChange={(e) => setNewExpense(prev => ({ ...prev, date: e.target.value }))}\n        />\n        <button onClick={submitExpense}>Submit Expense</button>\n      </div>\n\n      <div>\n        <h2>Expense Report</h2>\n        <table style={{ width: '100%', borderCollapse: 'collapse' }}>\n          <thead>\n            <tr style={{ backgroundColor: '#f4f4f4' }}>\n              <th>Date</th>\n              <th>Category</th>\n              <th>Amount</th>\n              <th>Status</th>\n            </tr>\n          </thead>\n          <tbody>\n            {expenses.map(expense => (\n              <tr key={expense.id} style={{ borderBottom: '1px solid #ddd' }}>\n                <td>{expense.date}</td>\n                <td>{expense.category}</td>\n                <td>${expense.amount.toFixed(2)}</td>\n                <td>{expense.status}</td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n      <a \n        href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n        target=\"_top\" \n        style={{ color: '#888', textDecoration: 'none', fontSize: '0.8em' }}\n      >\n        View Source\n      </a>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n  const KEY = \"enterpriseExpenseManagement\";\n  const SCHEMA_VERSION = 3;\n\n  // Create expenses table\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_expenses_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      employeeId TEXT NOT NULL,\n      amount REAL NOT NULL,\n      category TEXT NOT NULL,\n      description TEXT,\n      date TEXT NOT NULL,\n      status TEXT NOT NULL\n    )\n  `);\n\n  // Handle different routes\n  if (request.method === 'GET' && new URL(request.url).pathname === '/expenses') {\n    const expenses = await sqlite.execute(`\n      SELECT * FROM ${KEY}_expenses_${SCHEMA_VERSION} \n      ORDER BY date DESC \n      LIMIT 50\n    `);\n    return new Response(JSON.stringify(expenses.rows), {\n      headers: { 'Content-Type': 'application/json' }\n    });\n  }\n\n  if (request.method === 'POST' && new URL(request.url).pathname === '/submit-expense') {\n    const expense = await request.json();\n    await sqlite.execute(`\n      INSERT INTO ${KEY}_expenses_${SCHEMA_VERSION} \n      (employeeId, amount, category, description, date, status) \n      VALUES (?, ?, ?, ?, ?, ?)\n    `, [\n      expense.employeeId, \n      expense.amount, \n      expense.category, \n      expense.description, \n      expense.date, \n      expense.status\n    ]);\n    return new Response(JSON.stringify({ success: true }), {\n      headers: { 'Content-Type': 'application/json' }\n    });\n  }\n\n  // Serve HTML for the main page\n  return new Response(`\n    <html>\n      <head>\n        <title>Enterprise Expense Management</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        <script src=\"https://esm.town/v/std/catch\"></script>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: { 'Content-Type': 'text/html' }\n  });\n}","deleted","label",[99],"permalink","https://www.val.town/x/ashh/enterpriseExpenseManagement/code/main.tsx","extension","actionData","errors"]
</article></body></html>