\n \n \n \n\n",[],[160,201],"8c513f2c-a950-42a1-841c-ad8834f7d86e","favicon.svg","019f70f4-c933-741e-92e7-3e527ce95521",["D",1784306518202],"\n",[],[160,209],"48e2ce3e-80dc-4931-98ee-0f410d0d33ad","Summary.tsx","8c9865c0-81fe-11f1-a62f-1607ee4eb77e","019f70f4-c933-741e-92e7-39049856c834",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",[],[160,224,216],"components","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",[],[160,224,226],"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",[],[160,224,234],"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",[],[160,224,242],"f50fa858-87c9-4379-80b4-c3c3f1b571d1",["D",1784306518202],[176,177,178,179],[160,224],["D",1784306518202],[175,180,181,182],[160],["D",1784306518202],["D",1789472446807],{"_11":12,"_97":93},{"_11":12,"_90":91,"_92":93,"_48":49,"_94":95,"_96":40},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":32,"_33":34,"_83":42,"_84":85,"_86":87,"_88":14,"_89":12},"ctx",{"_76":-5,"_121":294,"_295":296,"_297":298,"_299":40,"_300":40,"_301":40,"_302":53,"_303":-5,"_304":-7,"_305":-7,"_306":57,"_307":40,"_308":40,"_309":-5,"_310":40,"_311":40,"_312":40,"_313":-5},"ENV",{"_265":266,"_267":268,"_269":26,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293},"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"]

Branches1

Branches
1