\n \n \n \n\n",[],[89,121],"8c513f2c-a950-42a1-841c-ad8834f7d86e","favicon.svg","019f70f4-c933-741e-92e7-3e527ce95521",["D",1784306518202],"\n",[],[89,128],"f50fa858-87c9-4379-80b4-c3c3f1b571d1","components","019f70f4-c933-741e-92e7-39049856c834",["D",1784306518202],[140,141,142,143],[89,135],{"_35":168,"_13":169,"_64":170,"_66":136,"_67":68,"_69":171,"_70":71,"_37":172,"_17":73,"_74":116,"_76":173,"_78":50,"_79":-5,"_99":174,"_18":175},{"_35":160,"_13":161,"_64":162,"_66":136,"_67":68,"_69":163,"_70":71,"_37":164,"_17":92,"_74":116,"_76":165,"_78":50,"_79":-5,"_99":166,"_18":167},{"_35":152,"_13":153,"_64":154,"_66":136,"_67":68,"_69":155,"_70":71,"_37":156,"_17":92,"_74":116,"_76":157,"_78":50,"_79":-5,"_99":158,"_18":159},{"_35":144,"_13":145,"_64":146,"_66":136,"_67":68,"_69":147,"_70":71,"_37":148,"_17":92,"_74":116,"_76":149,"_78":50,"_79":-5,"_99":150,"_18":151},"48e2ce3e-80dc-4931-98ee-0f410d0d33ad","Summary.tsx","8c9865c0-81fe-11f1-a62f-1607ee4eb77e",6,["D",1784306570513],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface CategoryTotal {\n category: string;\n total: number;\n}\n\ninterface SummaryProps {\n total: number;\n byCategory: CategoryTotal[];\n}\n\nconst BAR_COLORS = [\n \"bg-blue-500\",\n \"bg-emerald-500\",\n \"bg-amber-500\",\n \"bg-purple-500\",\n \"bg-pink-500\",\n \"bg-cyan-500\",\n \"bg-rose-500\",\n \"bg-indigo-500\",\n \"bg-teal-500\",\n \"bg-gray-400\",\n];\n\nexport function Summary({ total, byCategory }: SummaryProps) {\n const maxCategory = byCategory.length > 0\n ? Math.max(...byCategory.map((c) => c.total))\n : 0;\n\n return (\n

Total Spent

\n ${total.toFixed(2)}\n

\n\n {byCategory.length > 0 && (\n

By Category

\n {byCategory.map((cat, i) => (\n

\n {cat.category}\n \n ${cat.total.toFixed(2)}\n \n

\n \n

\n ))}\n

\n )}\n

\n );\n}\n",[],[89,135,145],"a59edea9-13e8-44d5-ab74-988f5a106544","ExpenseList.tsx","8c91c238-81fe-11f1-99fb-1607ee4eb77e",5,["D",1784306570511],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport interface Expense {\n id: number;\n amount: number;\n category: string;\n description: string;\n date: string;\n}\n\ninterface ExpenseListProps {\n expenses: Expense[];\n onDelete: (id: number) => void;\n}\n\nfunction formatDate(iso: string): string {\n const d = new Date(iso + \"T00:00\");\n return d.toLocaleDateString(\"en-US\", {\n month: \"short\",\n day: \"numeric\",\n year: \"numeric\",\n });\n}\n\nexport function ExpenseList({ expenses, onDelete }: ExpenseListProps) {\n if (expenses.length === 0) {\n return (\n

🧾

\n No expenses yet. Add one above to get started!\n

\n );\n }\n\n return (\n

Recent Expenses

\n \n {exp.category.split(\" \")[0]}\n \n

\n \n {exp.category.split(\" \").slice(1).join(\" \")}\n \n {exp.description && (\n \n — {exp.description}\n \n )}\n

{formatDate(exp.date)}

\n \n ${exp.amount.toFixed(2)}\n \n onDelete(exp.id)}\n class=\"text-gray-300 hover:text-red-500 transition-colors text-xl leading-none p-1\"\n title=\"Delete\"\n >\n ✕\n \n \n ))}\n

\n );\n}\n",[],[89,135,153],"cfdb9055-b99e-49c4-aa7f-d40395204771","ExpenseForm.tsx","83993d3c-81fe-11f1-b689-1607ee4eb77e",4,["D",1784306555458],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nconst CATEGORIES = [\n \"🍽️ Food\",\n \"🚗 Transport\",\n \"🏠 Housing\",\n \"🛍️ Shopping\",\n \"🎬 Entertainment\",\n \"💊 Health\",\n \"📚 Education\",\n \"💼 Work\",\n \"✈️ Travel\",\n \"📦 Other\",\n];\n\ninterface ExpenseFormProps {\n onAdd: () => void;\n}\n\nexport function ExpenseForm({ onAdd }: ExpenseFormProps) {\n const [amount, setAmount] = useState(\"\");\n const [category, setCategory] = useState(CATEGORIES[0]);\n const [description, setDescription] = useState(\"\");\n const [date, setDate] = useState(new Date().toISOString().split(\"T\")[0]);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(\"\");\n\n async function handleSubmit(e: React.FormEvent) {\n e.preventDefault();\n const parsed = parseFloat(amount);\n if (!parsed || parsed <= 0) {\n setError(\"Please enter a valid amount\");\n return;\n }\n\n setLoading(true);\n setError(\"\");\n\n try {\n await fetch(\"/api/expenses\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n amount: parsed,\n category,\n description: description.trim(),\n date,\n }),\n });\n setAmount(\"\");\n setDescription(\"\");\n onAdd();\n } catch {\n setError(\"Failed to add expense. Please try again.\");\n } finally {\n setLoading(false);\n }\n }\n\n return (\n \n

➕ Add Expense

\n\n {error && (\n

{error}

\n )}\n\n

\n \n Amount\n \n

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

\n\n

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

\n\n

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

\n\n

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

\n\n \n {loading ? \"Adding...\" : \"Add Expense\"}\n \n \n );\n}\n",[],[89,135,161],"0af3a991-805f-4743-b20a-c28e7383d045","App.tsx","019f70f4-c932-773f-882f-8386e5e772f7",7,["D",1784306587014],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { ExpenseForm } from \"./ExpenseForm.tsx\";\nimport { ExpenseList, type Expense } from \"./ExpenseList.tsx\";\nimport { Summary } from \"./Summary.tsx\";\n\nexport function App() {\n const [expenses, setExpenses] = useState([]);\n const [total, setTotal] = useState(0);\n const [byCategory, setByCategory] = useState<{ category: string; total: number }[]>([]);\n\n const fetchData = useCallback(async () => {\n const [expRes, sumRes] = await Promise.all([\n fetch(\"/api/expenses\"),\n fetch(\"/api/summary\"),\n ]);\n const expData = await expRes.json();\n const sumData = await sumRes.json();\n setExpenses(expData);\n setTotal(sumData.total);\n setByCategory(sumData.byCategory);\n }, []);\n\n useEffect(() => {\n fetchData();\n }, [fetchData]);\n\n const handleDelete = async (id: number) => {\n await fetch(`/api/expenses/${id}`, { method: \"DELETE\" });\n fetchData();\n };\n\n return (\n

\n 💰 Expenses Tracker\n

Track your spending, see where it goes.

\n\n

\n \n \n

\n\n \n

\n );\n}\n",[],[89,135,169],"4e418b59-ab97-4108-b1fa-6201c9efa5a0",["D",1784306518202],"legacyEnvVars","httpPrivacy","description","Track expenses with categories, amounts, and a summary dashboard","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789549199&sig=78a5bc27f03474c98a49b09a954e18cc6dd63f22ba19ce3e096717a88d3522b5","userId","7c1318b7-a61a-42ba-b56d-1c91b3511153","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019f70ed-cc64-70ba-bd3d-918542477ad7","tursoName","4e418b59ab974108b1fa6201c9efa5a0","tursoHostname","4e418b59ab974108b1fa6201c9efa5a0-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789472446807],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_225":221},"org",{"_11":12,"_218":219,"_220":221,"_184":185,"_222":223,"_224":50},"branch",{"_17":84,"_13":16,"_35":68,"_41":176,"_44":36,"_45":214,"_215":52,"_216":42,"_217":56,"_57":14,"_53":12},89,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","Rizma Farhana S","avatar","https://lh3.googleusercontent.com/a/ACg8ocLod4s2OWCSx1qq0JGisFRzjNW2gIoJezW0PrVZLhOqA_fbT3g=s96-c","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":176,"_13":14,"_37":299,"_48":-5,"_178":50,"_51":52,"_179":52,"_180":181,"_182":183,"_184":185,"_186":65,"_187":71,"_188":-5,"_189":-5,"_190":92,"_55":191,"_192":193,"_194":195,"_196":300,"_198":-5,"_199":200,"_201":200,"_202":203,"_204":203,"_205":203,"_206":200,"_207":200,"_208":301,"_210":302,"_212":303,"_49":50},[266,275,276],"files",[266,267,268,269,270,271,272,273,274,275,276],"counts",{"_257":92,"_258":73,"_259":92,"_34":260,"_261":262},[251,252,253],"upstreamProject",{"_35":42,"_13":58,"_180":248,"_182":183,"_51":52,"_208":249},"upstreamBranch",{"_35":36,"_37":246,"_39":247,"_13":16,"_41":42,"_17":43,"_44":-5,"_45":-5,"_46":47,"_48":-5,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],"Starter template with client-side React & Hono server",{"_11":54,"_225":250},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789549199&sig=85ec03bbe2ae9af315fa5e89fceebe840b59020b3ec43df39e2ab37ef0d215ad",{"_35":88,"_13":89,"_64":90,"_66":-5,"_67":68,"_69":73,"_70":71,"_37":91,"_17":92,"_74":93,"_76":-5,"_78":50,"_79":-5,"_18":256},{"_35":81,"_13":82,"_64":83,"_66":-5,"_67":68,"_69":84,"_70":71,"_37":85,"_17":73,"_74":24,"_76":86,"_78":50,"_79":-5,"_18":255},{"_35":62,"_13":63,"_64":65,"_66":-5,"_67":68,"_69":33,"_70":71,"_37":72,"_17":73,"_74":75,"_76":77,"_78":50,"_79":-5,"_18":254},[63],[82],[89],"pulls","branches","forks",{"_263":92,"_265":92},"connections",{"_263":92,"_264":92},"count","unfilledCount","emptyCount",{"_35":88,"_13":89,"_64":90,"_66":-5,"_67":68,"_69":73,"_70":71,"_37":105,"_17":92,"_74":93,"_76":-5,"_78":50,"_79":-5,"_99":297,"_18":298},{"_35":134,"_13":135,"_64":136,"_66":90,"_67":68,"_69":73,"_70":71,"_37":137,"_17":92,"_74":93,"_76":-5,"_78":50,"_79":-5,"_99":295,"_18":296},{"_35":168,"_13":169,"_64":170,"_66":136,"_67":68,"_69":171,"_70":71,"_37":172,"_17":73,"_74":116,"_76":173,"_78":50,"_79":-5,"_99":293,"_18":294},{"_35":160,"_13":161,"_64":162,"_66":136,"_67":68,"_69":163,"_70":71,"_37":164,"_17":92,"_74":116,"_76":165,"_78":50,"_79":-5,"_99":291,"_18":292},{"_35":152,"_13":153,"_64":154,"_66":136,"_67":68,"_69":155,"_70":71,"_37":156,"_17":92,"_74":116,"_76":157,"_78":50,"_79":-5,"_99":289,"_18":290},{"_35":144,"_13":145,"_64":146,"_66":136,"_67":68,"_69":147,"_70":71,"_37":148,"_17":92,"_74":116,"_76":149,"_78":50,"_79":-5,"_99":287,"_18":288},{"_35":127,"_13":128,"_64":129,"_66":90,"_67":68,"_69":73,"_70":71,"_37":130,"_17":92,"_74":24,"_76":131,"_78":50,"_79":-5,"_99":285,"_18":286},{"_35":120,"_13":121,"_64":122,"_66":90,"_67":68,"_69":31,"_70":71,"_37":123,"_17":73,"_74":24,"_76":124,"_78":50,"_79":-5,"_99":283,"_18":284},{"_35":112,"_13":113,"_64":114,"_66":90,"_67":68,"_69":73,"_70":71,"_37":115,"_17":92,"_74":116,"_76":117,"_78":50,"_79":-5,"_99":281,"_18":282},{"_35":81,"_13":82,"_64":83,"_66":-5,"_67":68,"_69":84,"_70":71,"_37":102,"_17":73,"_74":24,"_76":86,"_78":50,"_79":-5,"_99":279,"_18":280},{"_35":62,"_13":63,"_64":65,"_66":-5,"_67":68,"_69":33,"_70":71,"_37":98,"_17":73,"_74":75,"_76":77,"_78":50,"_79":-5,"_99":277,"_18":278},[],[63],[],[82],[],[89,113],[],[89,121],[],[89,128],[],[89,135,145],[],[89,135,153],[],[89,135,161],[],[89,135,169],[268,269,270,271],[89,135],[267,272,273,274],[89],["D",1784306518202],["D",1789472446807],{"_11":12,"_225":221},{"_11":12,"_218":219,"_220":221,"_184":185,"_222":223,"_224":50},{"_17":84,"_13":16,"_35":68,"_41":176,"_44":36,"_45":214,"_215":52,"_216":42,"_217":56,"_57":14,"_53":12},"ctx",{"_208":-5,"_243":337,"_338":339,"_340":341,"_342":50,"_343":50,"_344":50,"_345":71,"_346":-5,"_347":-7,"_348":-7,"_349":92,"_350":50,"_351":50,"_352":-5,"_353":50,"_354":50,"_355":50,"_356":-5},"ENV",{"_308":309,"_310":311,"_312":16,"_313":314,"_315":316,"_317":318,"_319":320,"_321":322,"_323":324,"_325":326,"_327":328,"_329":330,"_331":332,"_333":334,"_335":336},"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"]

Code