[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_282":283,"_284":285},"routes/_app.x.$handle.$name",{"_109":108,"_38":50,"_118":95,"_33":119,"_13":14,"_120":-5,"_11":121,"_122":123,"_124":125,"_126":127,"_128":129,"_26":-5,"_130":131,"_132":133,"_134":31,"_135":136,"_137":65,"_138":-5,"_139":-5,"_140":141},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_38":50,"_43":51,"_52":-5,"_53":31,"_54":55,"_56":55,"_57":58,"_59":60,"_19":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":89,"_90":91,"_92":93,"_94":31},"version",10,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","000ecc75-0fb9-4281-833f-f0ae41041721","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":34,"_39":26,"_40":42,"_43":44,"_45":14,"_46":47,"_30":31},"previous",{"_36":37,"_38":34,"_39":26,"_40":41},"deleted",false,"deletedHere","path","README.md","latestPath","fileId","019f36ec-801a-7379-875c-f26ca8918f74","name","fileType","content","# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n index.html ← HTML shell (loads Twind + React)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/index.html`** loads Twind and the React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n","# 💰 Expense Tracker\n\nA full-stack expense tracker built with React + Hono + SQLite on Val Town.\n\n## Features\n\n- **Add expenses** — amount, description, category, and date\n- **Summary cards** — total spending, this month's total, transaction count\n- **Category breakdown** — visual bars showing spending by category\n- **Filter by category** — clickable chips to filter the expense list\n- **Delete expenses** — remove entries with one click\n- **Persistent storage** — all data saved in val-scoped SQLite\n\n## Live URL\n\nClick the val's HTTP endpoint URL to open the app in your browser.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|fetch /api/*| API[\"Hono API routes\"]\n API -->|SQL queries| DB[\"SQLite (val-scoped)\"]\n App --> SummaryCards\n App --> ExpenseForm\n App --> ExpenseList\n App --> CategoryBreakdown\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n index.html ← HTML shell (loads Twind + React)\n index.tsx ← React entrypoint\n favicon.svg ← App icon\n components/\n App.tsx ← Root layout, data fetching, state\n SummaryCards.tsx ← Total / this month / transaction count\n ExpenseForm.tsx ← Add new expense form\n ExpenseList.tsx ← Expense list with category filter + delete\n CategoryBreakdown.tsx ← Spending by category with progress bars\n```\n\n## API\n\n| Method | Route | Description |\n| ------ | -------------------- | ------------------------------- |\n| GET | `/api/expenses` | List all expenses |\n| POST | `/api/expenses` | Create a new expense |\n| DELETE | `/api/expenses/:id` | Delete an expense |\n| GET | `/api/stats` | Summary stats + category totals |\n","createdAt",["D",1783332974077],"branchVersion","branchId","7cec75b9-183e-4f8b-86a7-41a4d07bb769","id","134ad6df-dbe0-41a1-aba7-6d59d94c03ff","expense-tracker",["D",1783332896707],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Track expenses with categories, summary stats, and filtering","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789541999&sig=8fad4d8ed521ff338d1e7bb443f46241d1f9e0e657d24a41f82306e6eb92823c","3bea85c2-2e83-4b2b-9385-e52f3bcbacb3","pinnedFileId","019f36ec-801a-7379-875c-f5b0e1aced4e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019ecc67-a99f-778d-b099-1c5208eb27c3","tursoName","134ad6dfdbe041a1aba76d59d94c03ff","tursoHostname","134ad6dfdbe041a1aba76d59d94c03ff-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789521041830],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_109":108,"_117":113},"org",{"_109":108,"_110":111,"_112":113,"_19":61,"_114":115,"_116":31},"branch",{"_13":14,"_38":95,"_48":47,"_96":49,"_97":98,"_99":100,"_101":55,"_102":103,"_104":105,"_106":50,"_107":108},"isOwned","main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",89,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","abhinavmishra","handle","displayName","ABHINAV MISHRA","avatar","https://lh3.googleusercontent.com/a/ACg8ocLYvudjTR1rKny-GCxSaxkEDQ6mM4TwYKB67lSThbzilecSbQ=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_48":49,"_38":50,"_43":277,"_52":-5,"_53":31,"_54":55,"_56":55,"_57":58,"_59":60,"_19":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":278,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":279,"_90":280,"_92":281,"_94":31},"tree",[186,196,197],"files",[186,187,188,189,190,191,192,193,194,195,196,197],"counts",{"_176":69,"_177":162,"_178":69,"_179":180,"_181":182},"contents",[153,154,155],"upstreamProject",{"_48":103,"_38":149,"_57":150,"_59":60,"_54":55,"_88":151},"upstreamBranch",{"_48":98,"_43":142,"_143":144,"_38":95,"_96":103,"_13":145,"_97":-5,"_99":-5,"_146":147,"_52":-5,"_94":31,"_54":55,"_107":148,"_70":105,"_106":149},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter","Starter template with client-side React & Hono server",{"_109":148,"_117":152},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789541999&sig=156ae2b8ac752fc06f52d45eab428b512e0d31e2aab99a830d8bb32149c64f0f",{"_48":170,"_38":171,"_36":172,"_158":-5,"_46":47,"_45":162,"_160":65,"_43":173,"_13":69,"_39":174,"_40":-5,"_30":31,"_165":-5,"_33":175},{"_48":167,"_38":34,"_36":37,"_158":-5,"_46":47,"_45":14,"_160":65,"_43":168,"_13":162,"_39":26,"_40":42,"_30":31,"_165":-5,"_33":169},{"_48":156,"_38":157,"_36":63,"_158":-5,"_46":47,"_45":159,"_160":65,"_43":161,"_13":162,"_39":163,"_40":164,"_30":31,"_165":-5,"_33":166},"61c2a357-4414-4d25-b175-8965552c6921","index.ts","parentId",2,"latest",["D",1783332915084],1,"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nconst app = new Hono();\n\n// ── Database setup ──────────────────────────────────────────────\nawait sqlite.execute(`\n CREATE TABLE IF NOT EXISTS expenses (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n amount REAL NOT NULL,\n description TEXT NOT NULL,\n category TEXT NOT NULL DEFAULT 'General',\n date TEXT NOT NULL,\n created_at TEXT DEFAULT (datetime('now'))\n )\n`);\n\n// ── Serve frontend ──────────────────────────────────────────────\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// ── API routes ──────────────────────────────────────────────────\n\n// List expenses (optional ?category= filter)\napp.get(\"/api/expenses\", async (c) => {\n const category = c.req.query(\"category\");\n if (category && category !== \"All\") {\n const result = await sqlite.execute({\n sql: \"SELECT * FROM expenses WHERE category = ? ORDER BY date DESC, id DESC\",\n args: [category],\n });\n return c.json(result.rows);\n }\n const result = await sqlite.execute(\n \"SELECT * FROM expenses ORDER BY date DESC, id DESC\",\n );\n return c.json(result.rows);\n});\n\n// Create a new expense\napp.post(\"/api/expenses\", async (c) => {\n const body = await c.req.json();\n const { amount, description, category, date } = body;\n\n if (!amount || !description || !date) {\n return c.json({ error: \"amount, description, and date are required\" }, 400);\n }\n\n const result = await sqlite.execute({\n sql: `INSERT INTO expenses (amount, description, category, date) VALUES (?, ?, ?, ?)`,\n args: [Number(amount), String(description), String(category || \"General\"), String(date)],\n });\n\n const row = await sqlite.execute({\n sql: \"SELECT * FROM expenses WHERE id = ?\",\n args: [result.lastInsertRowid],\n });\n\n return c.json(row.rows[0], 201);\n});\n\n// Delete an expense\napp.delete(\"/api/expenses/:id\", async (c) => {\n const id = c.req.param(\"id\");\n await sqlite.execute({\n sql: \"DELETE FROM expenses WHERE id = ?\",\n args: [Number(id)],\n });\n return c.json({ success: true });\n});\n\n// Summary statistics\napp.get(\"/api/stats\", async (c) => {\n const total = await sqlite.execute(\n \"SELECT COALESCE(SUM(amount), 0) as total FROM expenses\",\n );\n const thisMonth = await sqlite.execute({\n sql: `SELECT COALESCE(SUM(amount), 0) as total FROM expenses \n WHERE strftime('%Y-%m', date) = strftime('%Y-%m', 'now')`,\n });\n const byCategory = await sqlite.execute(\n `SELECT category, SUM(amount) as total, COUNT(*) as count \n FROM expenses GROUP BY category ORDER BY total DESC`,\n );\n const count = await sqlite.execute(\n \"SELECT COUNT(*) as count FROM expenses\",\n );\n\n return c.json({\n total: total.rows[0].total,\n thisMonth: thisMonth.rows[0].total,\n count: count.rows[0].count,\n byCategory: byCategory.rows,\n });\n});\n\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","label",[157],"4818d65d-018d-44ae-8f61-fc3059c2b4a6",["D",1783332974077],[34],"e3840a29-37e7-4b27-9018-b0a52921b834","frontend","019f36ec-801a-7379-875c-edd7ca4b522c",["D",1783332896707],"directory",[171],"pulls","branches","forks","envVars",{"_183":69,"_185":69},"connections",{"_183":69,"_184":69},"count","unfilledCount","emptyCount",{"_48":170,"_38":171,"_36":172,"_158":-5,"_46":47,"_45":162,"_160":65,"_43":274,"_13":69,"_39":174,"_40":-5,"_30":31,"_165":-5,"_199":275,"_33":276},{"_48":270,"_38":237,"_36":231,"_158":172,"_46":47,"_45":162,"_160":65,"_43":271,"_13":69,"_39":174,"_40":-5,"_30":31,"_165":-5,"_199":272,"_33":273},{"_48":262,"_38":263,"_36":264,"_158":231,"_46":47,"_45":265,"_160":65,"_43":266,"_13":162,"_39":209,"_40":267,"_30":31,"_165":-5,"_199":268,"_33":269},{"_48":254,"_38":255,"_36":256,"_158":231,"_46":47,"_45":257,"_160":65,"_43":258,"_13":69,"_39":209,"_40":259,"_30":31,"_165":-5,"_199":260,"_33":261},{"_48":246,"_38":247,"_36":248,"_158":231,"_46":47,"_45":249,"_160":65,"_43":250,"_13":69,"_39":209,"_40":251,"_30":31,"_165":-5,"_199":252,"_33":253},{"_48":238,"_38":239,"_36":240,"_158":231,"_46":47,"_45":241,"_160":65,"_43":242,"_13":69,"_39":209,"_40":243,"_30":31,"_165":-5,"_199":244,"_33":245},{"_48":228,"_38":229,"_36":230,"_158":231,"_46":47,"_45":232,"_160":65,"_43":233,"_13":69,"_39":209,"_40":234,"_30":31,"_165":-5,"_199":235,"_33":236},{"_48":221,"_38":222,"_36":223,"_158":172,"_46":47,"_45":162,"_160":65,"_43":224,"_13":69,"_39":26,"_40":225,"_30":31,"_165":-5,"_199":226,"_33":227},{"_48":213,"_38":214,"_36":215,"_158":172,"_46":47,"_45":216,"_160":65,"_43":217,"_13":162,"_39":26,"_40":218,"_30":31,"_165":-5,"_199":219,"_33":220},{"_48":205,"_38":206,"_36":207,"_158":172,"_46":47,"_45":162,"_160":65,"_43":208,"_13":69,"_39":209,"_40":210,"_30":31,"_165":-5,"_199":211,"_33":212},{"_48":167,"_38":34,"_36":37,"_158":-5,"_46":47,"_45":14,"_160":65,"_43":202,"_13":162,"_39":26,"_40":42,"_30":31,"_165":-5,"_199":203,"_33":204},{"_48":156,"_38":157,"_36":63,"_158":-5,"_46":47,"_45":159,"_160":65,"_43":198,"_13":162,"_39":163,"_40":164,"_30":31,"_165":-5,"_199":200,"_33":201},["D",1783332915084],"children",[],[157],["D",1783332974077],[],[34],"e70fe79a-cb84-49d0-b607-18865667379d","index.tsx","019f36ec-801a-7379-875c-e923d03d8eab",["D",1783332896707],"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[171,206],"9ba4a08f-d9d4-478c-8ee2-e0a704835628","index.html","019f36ec-801a-7379-875c-e59e5302a5d0",3,["D",1783332921488],"\n\n \n \n \n 💰 Expense Tracker\n \n \n \n \n

\n \n \n \n\n",[],[171,214],"b4fe503e-e0ed-4074-885b-790a502abbaa","favicon.svg","019f36ec-801a-7379-875c-e0eecf054872",["D",1783332896707],"\n",[],[171,222],"1b7a1e15-16ac-4e89-bb19-71a547dd4e12","SummaryCards.tsx","a3d1907e-7923-11f1-896f-1607ee4eb77e","019f36ec-801a-7379-875c-dfac8a715355",4,["D",1783332940420],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nfunction formatCurrency(n: number) {\n return new Intl.NumberFormat(\"en-US\", {\n style: \"currency\",\n currency: \"USD\",\n minimumFractionDigits: 2,\n }).format(n);\n}\n\nexport function SummaryCards({ stats }: {\n stats: {\n total: number;\n thisMonth: number;\n count: number;\n };\n}) {\n const cards = [\n {\n label: \"Total Spending\",\n value: formatCurrency(stats.total),\n icon: \"💸\",\n color: \"bg-indigo-50 text-indigo-700 border-indigo-200\",\n },\n {\n label: \"This Month\",\n value: formatCurrency(stats.thisMonth),\n icon: \"📅\",\n color: \"bg-emerald-50 text-emerald-700 border-emerald-200\",\n },\n {\n label: \"Transactions\",\n value: String(stats.count),\n icon: \"🧾\",\n color: \"bg-amber-50 text-amber-700 border-amber-200\",\n },\n ];\n\n return (\n

\n {cards.map((card) => (\n \n

\n {card.label}\n {card.icon}\n

{card.value}

\n ))}\n \n );\n}\n",[],[171,237,229],"components","cddb1656-e944-43e5-87e8-027bd1fd9201","ExpenseList.tsx","a92e70be-7923-11f1-b059-1607ee4eb77e",7,["D",1783332949429],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nconst CATEGORIES = [\n \"All\",\n \"General\",\n \"Food\",\n \"Transport\",\n \"Shopping\",\n \"Bills\",\n \"Entertainment\",\n \"Health\",\n \"Other\",\n];\n\nconst CATEGORY_BADGES: Record = {\n Food: \"bg-orange-100 text-orange-700\",\n Transport: \"bg-blue-100 text-blue-700\",\n Shopping: \"bg-pink-100 text-pink-700\",\n Bills: \"bg-red-100 text-red-700\",\n Entertainment: \"bg-purple-100 text-purple-700\",\n Health: \"bg-green-100 text-green-700\",\n General: \"bg-gray-100 text-gray-700\",\n Other: \"bg-yellow-100 text-yellow-700\",\n};\n\nfunction formatCurrency(n: number) {\n return new Intl.NumberFormat(\"en-US\", {\n style: \"currency\",\n currency: \"USD\",\n minimumFractionDigits: 2,\n }).format(n);\n}\n\nfunction formatDate(d: string) {\n return new Date(d + \"T00:00:00\").toLocaleDateString(\"en-US\", {\n month: \"short\",\n day: \"numeric\",\n year: \"numeric\",\n });\n}\n\nexport interface Expense {\n id: number;\n amount: number;\n description: string;\n category: string;\n date: string;\n}\n\nexport function ExpenseList({\n expenses,\n onDelete,\n}: {\n expenses: Expense[];\n onDelete: (id: number) => void;\n}) {\n const [filter, setFilter] = useState(\"All\");\n\n const filtered = filter === \"All\"\n ? expenses\n : expenses.filter((e) => e.category === filter);\n\n return (\n

📝 Expenses

\n {filtered.length} entries\n

\n\n {/* Category filter chips */}\n

\n {CATEGORIES.map((cat) => (\n setFilter(cat)}\n class={`px-3 py-1 text-xs font-medium rounded-full transition-colors cursor-pointer ${\n filter === cat\n ? \"bg-indigo-600 text-white\"\n : \"bg-gray-100 text-gray-600 hover:bg-gray-200\"\n }`}\n >\n {cat}\n \n ))}\n

\n\n {filtered.length === 0\n ? (\n

📭

\n {expenses.length === 0\n ? \"No expenses yet — add one above!\"\n : \"No expenses in this category.\"}\n

\n )\n : (\n

\n {filtered.map((e) => (\n \n

\n {e.description}\n

\n \n {e.category}\n \n \n {formatDate(e.date)}\n \n

\n \n {formatCurrency(e.amount)}\n \n onDelete(e.id)}\n class=\"text-gray-300 hover:text-red-500 transition-colors cursor-pointer p-1\"\n title=\"Delete\"\n >\n ✕\n \n

\n ))}\n

\n )}\n \n );\n}\n",[],[171,237,239],"77a38ec1-9a5a-4cae-bcb7-7fdaac88b08e","ExpenseForm.tsx","a8d4d25c-7923-11f1-9043-1607ee4eb77e",5,["D",1783332948838],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nconst CATEGORIES = [\n \"General\",\n \"Food\",\n \"Transport\",\n \"Shopping\",\n \"Bills\",\n \"Entertainment\",\n \"Health\",\n \"Other\",\n];\n\nfunction todayISO() {\n return new Date().toISOString().slice(0, 10);\n}\n\nexport function ExpenseForm({ onAdd }: { onAdd: () => void }) {\n const [amount, setAmount] = useState(\"\");\n const [description, setDescription] = useState(\"\");\n const [category, setCategory] = useState(\"General\");\n const [date, setDate] = useState(todayISO());\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(\"\");\n\n async function handleSubmit(e: Event) {\n e.preventDefault();\n setError(\"\");\n\n if (!amount || !description || !date) {\n setError(\"All fields are required\");\n return;\n }\n\n setLoading(true);\n try {\n const res = await fetch(\"/api/expenses\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n amount: parseFloat(amount),\n description,\n category,\n date,\n }),\n });\n if (!res.ok) {\n const data = await res.json();\n throw new Error(data.error || \"Failed to add expense\");\n }\n setAmount(\"\");\n setDescription(\"\");\n setCategory(\"General\");\n setDate(todayISO());\n onAdd();\n } catch (err) {\n setError(err.message);\n } finally {\n setLoading(false);\n }\n }\n\n return (\n \n

➕ Add Expense

\n\n {error && (\n

\n {error}\n

\n )}\n\n

\n \n Amount\n \n

\n \n $\n \n setAmount((e.target as HTMLInputElement).value)}\n placeholder=\"0.00\"\n class=\"w-full pl-7 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-400 focus:border-transparent outline-none\"\n required\n />\n

\n \n Date\n \n setDate((e.target as HTMLInputElement).value)}\n class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-400 focus:border-transparent outline-none\"\n required\n />\n

\n\n

\n \n Description\n \n \n setDescription((e.target as HTMLInputElement).value)}\n placeholder=\"What was it for?\"\n class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-400 focus:border-transparent outline-none\"\n required\n />\n

\n\n

\n \n Category\n \n \n setCategory((e.target as HTMLSelectElement).value)}\n class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-400 focus:border-transparent outline-none bg-white\"\n >\n {CATEGORIES.map((cat) => (\n \n ))}\n \n

\n\n \n {loading ? \"Adding…\" : \"Add Expense\"}\n \n

\n \n );\n}\n",[],[171,237,247],"32f7d7d4-e608-450f-b5b8-27467940827d","CategoryBreakdown.tsx","a9001e08-7923-11f1-b059-1607ee4eb77e",6,["D",1783332949122],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nfunction formatCurrency(n: number) {\n return new Intl.NumberFormat(\"en-US\", {\n style: \"currency\",\n currency: \"USD\",\n minimumFractionDigits: 2,\n }).format(n);\n}\n\nconst CATEGORY_COLORS: Record = {\n Food: \"bg-orange-400\",\n Transport: \"bg-blue-400\",\n Shopping: \"bg-pink-400\",\n Bills: \"bg-red-400\",\n Entertainment: \"bg-purple-400\",\n Health: \"bg-green-400\",\n General: \"bg-gray-400\",\n Other: \"bg-yellow-400\",\n};\n\nexport function CategoryBreakdown({ categories }: {\n categories: Array<{ category: string; total: number; count: number }>;\n}) {\n if (!categories.length) {\n return (\n

📊 By Category

No data yet — add an expense!

\n );\n }\n\n const maxTotal = Math.max(...categories.map((c) => c.total));\n\n return (\n

📊 By Category

\n {categories.map((c) => (\n

\n {c.category}\n \n {formatCurrency(c.total)} · {c.count}{\" \"}\n {c.count === 1 ? \"item\" : \"items\"}\n \n

\n \n

\n ))}\n

\n \n );\n}\n",[],[171,237,255],"891cb42c-cba0-4e28-9922-195899a0bf5b","App.tsx","019f36ec-801a-7379-875c-d6344678b863",8,["D",1783332954404],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { SummaryCards } from \"./SummaryCards.tsx\";\nimport { ExpenseForm } from \"./ExpenseForm.tsx\";\nimport { ExpenseList, type Expense } from \"./ExpenseList.tsx\";\nimport { CategoryBreakdown } from \"./CategoryBreakdown.tsx\";\n\ninterface Stats {\n total: number;\n thisMonth: number;\n count: number;\n byCategory: Array<{ category: string; total: number; count: number }>;\n}\n\nexport function App() {\n const [expenses, setExpenses] = useState([]);\n const [stats, setStats] = useState({\n total: 0,\n thisMonth: 0,\n count: 0,\n byCategory: [],\n });\n\n const refresh = useCallback(async () => {\n const [expRes, statRes] = await Promise.all([\n fetch(\"/api/expenses\"),\n fetch(\"/api/stats\"),\n ]);\n setExpenses(await expRes.json());\n setStats(await statRes.json());\n }, []);\n\n useEffect(() => {\n refresh();\n }, [refresh]);\n\n const handleDelete = useCallback(async (id: number) => {\n await fetch(`/api/expenses/${id}`, { method: \"DELETE\" });\n refresh();\n }, [refresh]);\n\n return (\n

\n {/* Header */}\n

\n 💰 Expense Tracker\n

\n Track your spending, spot patterns, stay on budget.\n

\n\n {/* Summary cards */}\n

\n \n

\n\n {/* Main grid: form + breakdown (left), list (right) */}\n

\n \n \n

\n \n

\n\n {/* Footer */}\n \n

\n );\n}\n",[],[171,237,263],"32b40557-9796-4ce5-809a-743e9b065371",["D",1783332896707],[188,189,190,191,192],[171,237],["D",1783332896707],[187,193,194,195],[171],["D",1783332896707],["D",1789521041830],{"_109":108,"_117":113},{"_109":108,"_110":111,"_112":113,"_19":61,"_114":115,"_116":31},{"_13":14,"_38":95,"_48":47,"_96":49,"_97":98,"_99":100,"_101":55,"_102":103,"_104":105,"_106":50,"_107":108},"ctx",{"_88":-5,"_139":315,"_316":317,"_318":319,"_320":31,"_321":31,"_322":31,"_323":65,"_324":-5,"_325":-7,"_326":-7,"_327":69,"_328":31,"_329":31,"_330":-5,"_331":31,"_332":31,"_333":31,"_334":-5},"ENV",{"_286":287,"_288":289,"_290":95,"_291":292,"_293":294,"_295":296,"_297":298,"_299":300,"_301":302,"_303":304,"_305":306,"_307":308,"_309":310,"_311":312,"_313":314},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v10