💰 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 = new URL(import.meta.url).pathname.split(\"/\").at(-1);\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}",["D",1740455506201],"version","currentUserHasLiked","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_96":97,"_101":102},"forkedVal","interval","description","latestEvaluation","slug","ashh/enterpriseExpenseManagement","versions",[156],{"_98":157,"_140":31,"_158":159},["D",1740455506201],"n","1",{"_120":161,"_122":162},"9de8bb80-f32b-11ef-af47-569c3dd06744",{"_124":163,"_126":95,"_120":161,"_127":-5,"_105":-5,"_128":129,"_130":-5,"_132":133,"_134":164,"_136":26,"_94":164,"_137":165,"_98":166,"_140":31,"_141":26,"_107":31,"_142":31,"_143":31,"_144":31,"_108":31,"_145":31,"_146":-5,"_20":167,"_148":-5,"_149":-7,"_150":168,"_151":-5,"_152":169,"_154":170},"lovingWhiteGoldfish","9dec83fa-f32b-11ef-af47-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 **/\nimport { renderToString } from \"https://esm.sh/react-dom@18.2.0/server\";\n\nexport default (req: Request) => {\n  return new Response(\n    renderToString(\n      <html>\n        <link rel=\"stylesheet\" href=\"https://unpkg.com/missing.css@1.1.1\" />\n        <main>\n          <h1>Hello ashh!</h1>\n          <p>This is your first val. Edit this text!</p>\n        </main>\n      </html>,\n    ),\n    { headers: { \"Content-Type\": \"text/html\" } },\n  );\n};",["D",1740455413013],{"_96":97,"_101":102},"@jsxImportSource https://esm.sh/react@18.2.0","ashh/lovingWhiteGoldfish",[171],{"_98":172,"_140":31,"_158":159},["D",1740455413013],"hasNext","filters",{"_176":177,"_178":179,"_128":129},"sort","newest","type","all","routes/_app","actionData","errors"]
</article></body></html>