\n \n \n \n\n",[],[156,199],"b4fe503e-e0ed-4074-885b-790a502abbaa","favicon.svg","019f36ec-801a-7379-875c-e0eecf054872",["D",1783332896707],"\n",[],[156,207],"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",[],[156,222,214],"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",[],[156,222,224],"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",[],[156,222,232],"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",[],[156,222,240],"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",[],[156,222,248],"32b40557-9796-4ce5-809a-743e9b065371",["D",1783332896707],[173,174,175,176,177],[156,222],["D",1783332896707],[172,178,179,180],[156],["D",1783332896707],["D",1789521041830],{"_16":17,"_92":88},{"_16":17,"_85":86,"_87":88,"_34":35,"_89":90,"_91":26},{"_69":70,"_20":71,"_18":72,"_73":19,"_74":75,"_76":77,"_78":28,"_79":80,"_81":82,"_83":21,"_84":17},"ctx",{"_62":-5,"_115":300,"_301":302,"_303":304,"_305":26,"_306":26,"_307":26,"_308":39,"_309":-5,"_310":-7,"_311":-7,"_312":43,"_313":26,"_314":26,"_315":-5,"_316":26,"_317":26,"_318":26,"_319":-5},"ENV",{"_271":272,"_273":274,"_275":71,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297,"_298":299},"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"]

Search