\n \n \n\n`));\n\napp.get(\"/manifest.json\", (c) => {\n c.header(\"Content-Type\", \"application/manifest+json\");\n return c.body(JSON.stringify({\n name: \"SplitTab\",\n short_name: \"SplitTab\",\n description: \"Split bills smarter, settle trips faster\",\n start_url: \"/\",\n scope: \"/\",\n display: \"standalone\",\n background_color: \"#FFFFFF\",\n theme_color: \"#D85A30\",\n orientation: \"portrait\",\n icons: [\n { src: \"/icon.svg\", sizes: \"any\", type: \"image/svg+xml\", purpose: \"any\" },\n { src: \"/icon-maskable.svg\", sizes: \"any\", type: \"image/svg+xml\", purpose: \"maskable\" },\n ],\n }));\n});\n\nconst ICON_SVG = ``;\n\nconst ICON_MASKABLE_SVG = ``;\n\napp.get(\"/icon.svg\", (c) => { c.header(\"Content-Type\", \"image/svg+xml\"); return c.body(ICON_SVG); });\napp.get(\"/icon-maskable.svg\", (c) => { c.header(\"Content-Type\", \"image/svg+xml\"); return c.body(ICON_MASKABLE_SVG); });\n\napp.get(\"/sw.js\", (c) => {\n c.header(\"Content-Type\", \"application/javascript\");\n return c.body(`\n const CACHE = \"splittab-v1\";\n self.addEventListener(\"install\", (e) => { self.skipWaiting(); });\n self.addEventListener(\"activate\", (e) => { self.clients.claim(); });\n // Network-first: always try the network (this is a live app), fall back to cache only if offline.\n self.addEventListener(\"fetch\", (e) => {\n if (e.request.method !== \"GET\") return;\n e.respondWith(\n fetch(e.request).then((res) => {\n const copy = res.clone();\n caches.open(CACHE).then((c) => c.put(e.request, copy));\n return res;\n }).catch(() => caches.match(e.request))\n );\n });\n `);\n});\n\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\nconst legalPage = (title: string, bodyHtml: string) => `\n\n${title} — SplitTab\n\n\n← Back to SplitTab\n

${bodyHtml}

\n`;\n\napp.get(\"/privacy\", (c) => c.html(legalPage(\"Privacy Policy\", `\n

Privacy Policy — SplitTab

Last updated: [DATE]

1. Who is responsible for your data

SplitTab is operated by [Your name or legal entity], based in [City, Netherlands]. Contact: [your-email@example.com].

2. What we collect

Username, email, password (hashed); group names, invite codes, and membership; expense titles, amounts, item names, who paid and who's assigned; receipt photos are sent to Google's Gemini API for scanning and are not stored afterward; session tokens; IP address is used only in-memory to rate-limit login attempts.

3. Legal basis

Processing is necessary to provide the service you signed up for (performance of a contract), and session/rate-limit data relies on our legitimate interest in keeping the service secure.

4. Who else sees your data

Google (Gemini API) for receipt scanning, and Val Town for hosting and database infrastructure. We do not sell your data or share it with advertisers.

5. Your rights

Under GDPR you can access, correct, delete, or export your data, object to processing, and complain to the Autoriteit Persoonsgegevens. Contact [your-email@example.com] to exercise these rights.

6. Cookies

We store a session token in your browser's local storage to keep you logged in. No tracking cookies or third-party analytics are used.

This is a draft. Full text with all sections is available in your project files — replace the [bracketed] placeholders before relying on this publicly.

\n`)));\n\napp.get(\"/terms\", (c) => c.html(legalPage(\"Terms of Service\", `\n

Terms of Service — SplitTab

Last updated: [DATE]

1. What SplitTab is

SplitTab helps groups track shared expenses and calculates who owes whom. SplitTab does not process payments or move money between users — settling up happens outside the app, by whatever method you agree on.

2. Your account

You're responsible for your password and account activity. You must provide a valid email and be at least 16 years old. One account per person.

3. Receipt scanning

Photos you upload are sent to a third-party AI service (Google Gemini) for extraction. We don't guarantee accuracy — review scanned items before saving.

4. No liability for financial disputes

We are not responsible for incorrect entries, disputes between users about who owes what, or financial loss from reliance on the app's calculations.

5. Governing law

These terms are governed by the laws of the Netherlands. Disputes are handled by the competent court in [your city].

This is a draft. Full text with all sections is available in your project files — replace the [bracketed] placeholders before relying on this publicly.

\n`)));\n\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\n\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","children",[],[77],"2b8d6bc0-9601-4c41-8a24-ab432de5c747","frontend","465745f8-01f3-4c3d-a8d2-8f90d74bd38c",4,["D",1787221202545],[94,95,96],[88],{"_35":112,"_13":113,"_38":114,"_40":89,"_42":43,"_44":115,"_46":47,"_48":116,"_17":117,"_51":52,"_53":118,"_55":56,"_57":-5,"_84":119,"_18":120},{"_35":105,"_13":106,"_38":107,"_40":89,"_42":43,"_44":64,"_46":47,"_48":108,"_17":71,"_51":52,"_53":109,"_55":56,"_57":-5,"_84":110,"_18":111},{"_35":97,"_13":98,"_38":99,"_40":89,"_42":43,"_44":100,"_46":47,"_48":101,"_17":69,"_51":24,"_53":102,"_55":56,"_57":-5,"_84":103,"_18":104},"3a932c12-60c2-462e-8f6a-26624e117bda","manifest.json","8c8abd8a-9eeb-11f1-a82d-1607ee4eb77e",51,["D",1787486993748],"{\n \"name\": \"SplitTab\",\n \"short_name\": \"SplitTab\",\n \"description\": \"Split bills smarter, settle trips faster\",\n \"start_url\": \"/\",\n \"scope\": \"/\",\n \"display\": \"standalone\",\n \"background_color\": \"#FFFFFF\",\n \"theme_color\": \"#D85A30\",\n \"orientation\": \"portrait\",\n \"icons\": [\n { \"src\": \"/icon.svg\", \"sizes\": \"any\", \"type\": \"image/svg+xml\", \"purpose\": \"any\" },\n { \"src\": \"/icon-maskable.svg\", \"sizes\": \"any\", \"type\": \"image/svg+xml\", \"purpose\": \"maskable\" }\n ]\n}\n",[],[88,98],"d3781c88-8a35-486f-8410-fae5e6594c7d","index.tsx","b4a55a04-9c80-11f1-81f3-1607ee4eb77e",["D",1787221487625],"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();\n",[],[88,106],"23d25096-d37d-4f3e-a1a5-409cd5432fed","App.tsx","f60712bc-9c80-11f1-bfba-1607ee4eb77e",50,["D",1787404315466],17,"import React, { useState, useEffect, useRef } from \"react\";\n\nconst COLORS = [\n { bg: \"bg-orange-50\", text: \"text-orange-800\", border: \"border-orange-400\", dot: \"bg-orange-500\" },\n { bg: \"bg-emerald-50\", text: \"text-emerald-800\", border: \"border-emerald-400\", dot: \"bg-emerald-500\" },\n { bg: \"bg-blue-50\", text: \"text-blue-800\", border: \"border-blue-400\", dot: \"bg-blue-500\" },\n { bg: \"bg-pink-50\", text: \"text-pink-800\", border: \"border-pink-400\", dot: \"bg-pink-500\" },\n { bg: \"bg-amber-50\", text: \"text-amber-800\", border: \"border-amber-400\", dot: \"bg-amber-500\" },\n { bg: \"bg-indigo-50\", text: \"text-indigo-800\", border: \"border-indigo-400\", dot: \"bg-indigo-500\" },\n { bg: \"bg-lime-50\", text: \"text-lime-800\", border: \"border-lime-500\", dot: \"bg-lime-500\" },\n { bg: \"bg-stone-100\", text: \"text-stone-700\", border: \"border-stone-400\", dot: \"bg-stone-500\" },\n];\nconst clr = (i: number) => COLORS[i % COLORS.length];\nconst ini = (n: string) => (n || \"?\").trim().split(/\\s+/).map((w) => w[0]).join(\"\").toUpperCase().slice(0, 2);\nconst dateFmt = (ts: number) => {\n const d = new Date(ts);\n return `${String(d.getDate()).padStart(2, \"0\")}/${String(d.getMonth() + 1).padStart(2, \"0\")}/${d.getFullYear()}`;\n};\n\nfunction computeSettlement(expenses: any[], members: any[]) {\n const bal: Record = {};\n members.forEach((m) => { bal[m.id] = 0; });\n (expenses || []).forEach((exp) => {\n if (bal[exp.paidBy] !== undefined) bal[exp.paidBy] += exp.totalAmount;\n (exp.items || []).forEach((item: any) => {\n const as = (item.assigned || []).filter((id: string) => bal[id] !== undefined);\n if (!as.length) return;\n const share = item.price / as.length;\n as.forEach((id: string) => { bal[id] -= share; });\n });\n });\n Object.keys(bal).forEach((k) => { bal[k] = Math.round(bal[k] * 100) / 100; });\n let pos: any[] = [], neg: any[] = [];\n Object.entries(bal).forEach(([id, b]) => {\n if (b > 0.005) pos.push({ id, amount: b });\n else if (b < -0.005) neg.push({ id, amount: -b });\n });\n pos.sort((a, b) => b.amount - a.amount);\n neg.sort((a, b) => b.amount - a.amount);\n const txs: any[] = [];\n let ci = 0, di = 0;\n while (ci < pos.length && di < neg.length) {\n const amt = Math.min(pos[ci].amount, neg[di].amount);\n if (amt > 0.005) txs.push({ from: neg[di].id, to: pos[ci].id, amount: Math.round(amt * 100) / 100 });\n pos[ci].amount -= amt; neg[di].amount -= amt;\n if (pos[ci].amount < 0.005) ci++;\n if (neg[di].amount < 0.005) di++;\n }\n return { txs, bal };\n}\n\nconst TOKEN_KEY = \"splittab_token\";\n\nasync function api(path: string, opts: any = {}) {\n const token = localStorage.getItem(TOKEN_KEY);\n const res = await fetch(`/api${path}`, {\n ...opts,\n headers: {\n \"Content-Type\": \"application/json\",\n ...(token ? { Authorization: `Bearer ${token}` } : {}),\n ...(opts.headers || {}),\n },\n body: opts.body ? JSON.stringify(opts.body) : undefined,\n });\n const data = await res.json();\n if (!res.ok) {\n const err: any = new Error(data.error || \"Something went wrong.\");\n err.code = data.code;\n throw err;\n }\n return data;\n}\n\nexport default function App() {\n const [sess, setSess] = useState(null);\n const [usage, setUsage] = useState(null);\n const [view, setView] = useState(\"auth\");\n const [groups, setGroups] = useState([]);\n const [grp, setGrp] = useState(null);\n const [tab, setTab] = useState(\"expenses\");\n const [booting, setBooting] = useState(true);\n\n const [aMode, setAMode] = useState(\"login\"); // login | signup | forgot | reset\n const [aForm, setAForm] = useState({ username: \"\", email: \"\", password: \"\" });\n const [aErr, setAErr] = useState(\"\");\n const [aMsg, setAMsg] = useState(\"\");\n const [aBusy, setABusy] = useState(false);\n const [resetToken, setResetToken] = useState(\"\");\n const [newPassword, setNewPassword] = useState(\"\");\n\n const [showCreate, setShowCreate] = useState(false);\n const [showJoin, setShowJoin] = useState(false);\n const [newGrp, setNewGrp] = useState({ name: \"\", currency: \"€\" });\n const [joinCode, setJoinCode] = useState(\"\");\n const [copied, setCopied] = useState(false);\n\n const [eStep, setEStep] = useState(1);\n const [eInfo, setEInfo] = useState({ title: \"\", paidBy: \"\" });\n const [eItems, setEItems] = useState([]);\n const [eAssign, setEAssign] = useState({});\n const [eScan, setEScan] = useState(false);\n const [eErr, setEErr] = useState(\"\");\n const [mItem, setMItem] = useState({ name: \"\", price: \"\" });\n const [dragOver, setDragOver] = useState(false);\n const fileRef = useRef(null);\n\n useEffect(() => {\n const params = new URLSearchParams(window.location.search);\n const rt = params.get(\"reset\");\n if (rt) { setResetToken(rt); setAMode(\"reset\"); }\n if (params.get(\"upgraded\")) { window.history.replaceState({}, \"\", window.location.pathname); }\n }, []);\n\n useEffect(() => {\n (async () => {\n const token = localStorage.getItem(TOKEN_KEY);\n if (token) {\n try {\n const { user, usage } = await api(\"/me\");\n setSess(user);\n setUsage(usage);\n await loadGroups();\n setView(\"home\");\n } catch {\n localStorage.removeItem(TOKEN_KEY);\n }\n }\n setBooting(false);\n })();\n }, []);\n\n const loadGroups = async () => {\n try {\n const { groups } = await api(\"/groups\");\n setGroups(groups);\n return groups;\n } catch { return []; }\n };\n\n const doAuth = async () => {\n setAErr(\"\");\n const { username, email, password } = aForm;\n if (aMode === \"signup\" && (!username.trim() || !email.trim() || !password.trim())) { setAErr(\"Fill in all fields.\"); return; }\n if (aMode === \"login\" && (!username.trim() || !password.trim())) { setAErr(\"Fill in all fields.\"); return; }\n setABusy(true);\n try {\n const body: any = aMode === \"signup\" ? { username: username.trim(), email: email.trim(), password } : { username: username.trim(), password };\n const { token, user } = await api(aMode === \"signup\" ? \"/signup\" : \"/login\", { method: \"POST\", body });\n localStorage.setItem(TOKEN_KEY, token);\n setSess(user);\n const { usage } = await api(\"/me\");\n setUsage(usage);\n await loadGroups();\n setView(\"home\");\n } catch (e: any) {\n setAErr(e.message || \"Something went wrong, try again.\");\n }\n setABusy(false);\n };\n\n const doForgotPassword = async () => {\n setAErr(\"\"); setAMsg(\"\");\n if (!aForm.email.trim()) { setAErr(\"Enter your email.\"); return; }\n setABusy(true);\n try {\n await api(\"/forgot-password\", { method: \"POST\", body: { email: aForm.email.trim() } });\n setAMsg(\"If that email is registered, a reset link is on its way.\");\n } catch (e: any) {\n setAErr(e.message || \"Something went wrong, try again.\");\n }\n setABusy(false);\n };\n\n const doResetPassword = async () => {\n setAErr(\"\"); setAMsg(\"\");\n if (!newPassword.trim()) { setAErr(\"Enter a new password.\"); return; }\n setABusy(true);\n try {\n await api(\"/reset-password\", { method: \"POST\", body: { token: resetToken, password: newPassword } });\n setAMsg(\"Password updated — you can log in now.\");\n setAMode(\"login\");\n window.history.replaceState({}, \"\", window.location.pathname);\n } catch (e: any) {\n setAErr(e.message || \"Something went wrong, try again.\");\n }\n setABusy(false);\n };\n\n const doLogout = async () => {\n try { await api(\"/logout\", { method: \"POST\" }); } catch {}\n localStorage.removeItem(TOKEN_KEY);\n setSess(null); setGroups([]); setGrp(null); setView(\"auth\");\n };\n\n const doCreateGroup = async () => {\n if (!newGrp.name.trim()) return;\n try {\n const { group } = await api(\"/groups\", { method: \"POST\", body: newGrp });\n setGroups((p) => [...p, group]);\n setShowCreate(false); setNewGrp({ name: \"\", currency: \"€\" });\n const { usage } = await api(\"/me\"); setUsage(usage);\n } catch (e: any) {\n if (e.code === \"LIMIT_REACHED\") { if (confirm(`${e.message}\\n\\nGo to upgrade page now?`)) doUpgrade(); }\n else alert(e.message);\n }\n };\n\n const doJoinGroup = async () => {\n const code = joinCode.trim().toUpperCase();\n if (!code) return;\n try {\n const { group } = await api(\"/groups/join\", { method: \"POST\", body: { code } });\n setGroups((p) => [...p, group]);\n setShowJoin(false); setJoinCode(\"\");\n const { usage } = await api(\"/me\"); setUsage(usage);\n } catch (e: any) {\n if (e.code === \"LIMIT_REACHED\") { if (confirm(`${e.message}\\n\\nGo to upgrade page now?`)) doUpgrade(); }\n else alert(e.message);\n }\n };\n\n const doUpgrade = async () => {\n try {\n const { url } = await api(\"/billing/checkout\", { method: \"POST\" });\n window.location.href = url;\n } catch (e: any) { alert(e.message); }\n };\n\n const doManageBilling = async () => {\n try {\n const { url } = await api(\"/billing/portal\", { method: \"POST\" });\n window.location.href = url;\n } catch (e: any) { alert(e.message); }\n };\n\n const openGroup = async (g: any) => {\n try {\n const { group } = await api(`/groups/${g.id}`);\n setGrp(group);\n } catch { setGrp(g); }\n setTab(\"expenses\"); setView(\"group\");\n };\n\n const refreshGroup = async (groupId: string) => {\n const { group } = await api(`/groups/${groupId}`);\n setGrp(group);\n setGroups((p) => p.map((g) => (g.id === group.id ? group : g)));\n };\n\n const startExpense = () => {\n setEStep(1); setEInfo({ title: \"\", paidBy: sess.id });\n setEItems([]); setEAssign({}); setEErr(\"\");\n setMItem({ name: \"\", price: \"\" }); setView(\"add-expense\");\n };\n\n const scanReceipt = async (file: File) => {\n if (!file.type.startsWith(\"image/\")) { setEErr(\"Upload an image file.\"); return; }\n setEScan(true); setEErr(\"\");\n const reader = new FileReader();\n reader.onload = async (e: any) => {\n const base64 = e.target.result.split(\",\")[1];\n try {\n const { items } = await api(\"/scan-receipt\", {\n method: \"POST\",\n body: { imageBase64: base64, mediaType: file.type },\n });\n const newItems = items.map((it: any, i: number) => ({\n id: `item-${Date.now()}-${i}`, name: it.name, price: it.price,\n }));\n const init: any = {};\n newItems.forEach((it: any) => { init[it.id] = grp.members.map((m: any) => m.id); });\n setEItems((p) => [...p, ...newItems]);\n setEAssign((p: any) => ({ ...p, ...init }));\n } catch (err: any) {\n if (err.code === \"LIMIT_REACHED\") {\n setEErr(err.message);\n } else {\n setEErr(err.message || \"Could not read the receipt. Add items manually.\");\n }\n }\n setEScan(false);\n try { const { usage } = await api(\"/me\"); setUsage(usage); } catch {}\n };\n reader.readAsDataURL(file);\n };\n\n const addManualItem = () => {\n const name = mItem.name.trim();\n const price = Math.round(parseFloat(mItem.price) * 100) / 100;\n if (!name || isNaN(price)) return;\n const id = `item-${Date.now()}`;\n setEItems((p) => [...p, { id, name, price }]);\n setEAssign((p: any) => ({ ...p, [id]: grp.members.map((m: any) => m.id) }));\n setMItem({ name: \"\", price: \"\" });\n };\n\n const toggleAssign = (itemId: string, memberId: string) => {\n setEAssign((p: any) => {\n const cur = p[itemId] || [];\n return { ...p, [itemId]: cur.includes(memberId) ? cur.filter((x: string) => x !== memberId) : [...cur, memberId] };\n });\n };\n\n const saveExpense = async () => {\n try {\n await api(`/groups/${grp.id}/expenses`, {\n method: \"POST\",\n body: {\n title: eInfo.title, paidBy: eInfo.paidBy,\n items: eItems.map((it) => ({ ...it, assigned: eAssign[it.id] || [] })),\n },\n });\n await refreshGroup(grp.id);\n setView(\"group\");\n } catch (e: any) { alert(e.message); }\n };\n\n const deleteExpense = async (expId: string) => {\n if (!confirm(\"Delete this expense?\")) return;\n try {\n await api(`/groups/${grp.id}/expenses/${expId}`, { method: \"DELETE\" });\n await refreshGroup(grp.id);\n } catch (e: any) { alert(e.message); }\n };\n\n const getMember = (id: string) => grp?.members?.find((m: any) => m.id === id);\n const getMemberIdx = (id: string) => { const i = grp?.members?.findIndex((m: any) => m.id === id); return i >= 0 ? i : 0; };\n const ccy = grp?.currency || \"€\";\n const fmtC = (n: number) => `${ccy}${Math.abs(n).toFixed(2)}`;\n const eTotal = eItems.reduce((s, i) => s + i.price, 0);\n\n const copyCode = async (code: string) => {\n try { await navigator.clipboard.writeText(code); } catch {}\n setCopied(true); setTimeout(() => setCopied(false), 2200);\n };\n\n const btnPrimary = \"bg-orange-600 hover:bg-orange-700 text-white border-none disabled:opacity-40 disabled:cursor-not-allowed\";\n const cardBase = \"bg-white border border-gray-200 rounded-xl\";\n const inputBase = \"w-full box-border border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-300\";\n\n if (booting) {\n return (\n

\n \n

\n );\n }\n\n if (view === \"auth\") {\n if (aMode === \"forgot\") {\n return (\n
\n
\n
\n \n
\n
Reset password
\n
We'll email you a reset link
\n
\n
\n setAForm((p) => ({ ...p, email: e.target.value }))}\n onKeyDown={(e) => e.key === \"Enter\" && doForgotPassword()} className={inputBase} autoFocus />\n {aErr &&
{aErr}
}\n {aMsg &&
{aMsg}
}\n \n \n
\n
\n );\n }\n\n if (aMode === \"reset\") {\n return (\n
\n
\n
\n \n
\n
Set new password
\n
Choose a new password for your account
\n
\n
\n setNewPassword(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && doResetPassword()} className={inputBase} autoFocus />\n {aErr &&
{aErr}
}\n {aMsg &&
{aMsg}
}\n \n
\n
\n );\n }\n\n return (\n
\n
\n
\n \n
\n
SplitTab
\n
Split bills smarter, settle trips faster
\n
\n
\n
\n {[\"login\", \"signup\"].map((m) => (\n \n ))}\n
\n
\n setAForm((p) => ({ ...p, username: e.target.value }))}\n onKeyDown={(e) => e.key === \"Enter\" && doAuth()} className={inputBase} autoFocus />\n {aMode === \"signup\" && (\n setAForm((p) => ({ ...p, email: e.target.value }))}\n onKeyDown={(e) => e.key === \"Enter\" && doAuth()} className={inputBase} />\n )}\n setAForm((p) => ({ ...p, password: e.target.value }))}\n onKeyDown={(e) => e.key === \"Enter\" && doAuth()} className={inputBase} />\n
\n {aErr &&
{aErr}
}\n \n {aMode === \"login\" && (\n \n )}\n {aMode === \"signup\" && (\n
\n By creating an account you agree to our Terms and Privacy Policy.\n
\n )}\n
\n
\n view source\n
\n
\n );\n }\n\n if (view === \"home\") {\n return (\n
\n
\n
\n
Your groups
\n
Hi, {sess.username}
\n
\n \n
\n\n {usage && usage.maxGroups !== null && (\n
\n {usage.groups}/{usage.maxGroups} groups · {usage.scansThisMonth}/{usage.maxScansPerMonth} scans this month\n \n
\n )}\n {usage && usage.maxGroups === null && (\n
\n SplitTab Pro — unlimited groups & scans\n \n
\n )}\n\n {groups.length === 0 && !showCreate && !showJoin && (\n
\n \n
No groups yet
\n
Create one for your trip, or join with an invite code
\n
\n )}\n\n {groups.map((g, i) => {\n const spent = (g.expenses || []).reduce((s: number, e: any) => s + e.totalAmount, 0);\n const c = clr(i);\n return (\n
openGroup(g)}\n className={`${cardBase} px-4 py-3.5 mb-2 cursor-pointer flex items-center gap-3 hover:border-gray-300`}>\n
\n \n
\n
\n
{g.name}
\n
\n {g.members?.length || 1} member{(g.members?.length || 1) !== 1 ? \"s\" : \"\"} · {g.expenses?.length || 0} expense{(g.expenses?.length || 0) !== 1 ? \"s\" : \"\"}\n
\n
\n
\n
{g.currency}{spent.toFixed(2)}
\n
total spent
\n
\n
\n );\n })}\n\n {showCreate && (\n
\n
New group
\n setNewGrp((p) => ({ ...p, name: e.target.value }))}\n onKeyDown={(e) => e.key === \"Enter\" && doCreateGroup()} className={`${inputBase} mb-2`} autoFocus />\n
\n {[\"€\", \"$\", \"£\", \"¥\", \"kr\"].map((c) => (\n \n ))}\n
\n
\n \n \n
\n
\n )}\n\n {showJoin && (\n
\n
Join with invite code
\n
\n setJoinCode(e.target.value.toUpperCase())}\n onKeyDown={(e) => e.key === \"Enter\" && doJoinGroup()}\n maxLength={6} className={`flex-1 font-mono tracking-widest uppercase ${inputBase}`} autoFocus />\n \n \n
\n
\n )}\n\n {!showCreate && !showJoin && (\n
0 ? \"mt-4\" : \"\"}`}>\n \n \n
\n )}\n
\n );\n }\n\n if (view === \"group\" && grp) {\n const { txs, bal } = computeSettlement(grp.expenses || [], grp.members || []);\n const myBal = Math.round((bal[sess.id] || 0) * 100) / 100;\n\n return (\n
\n
\n \n
{grp.name}
\n \n
\n\n {(grp.expenses || []).length > 0 && (\n
0 ? \"bg-emerald-50 border-emerald-400\" : myBal < 0 ? \"bg-orange-50 border-orange-400\" : \"bg-gray-50 border-gray-200\"}`}>\n Your balance\n 0 ? \"text-emerald-700\" : myBal < 0 ? \"text-orange-800\" : \"text-gray-400\"}`}>\n {myBal > 0 ? `+${fmtC(myBal)} — you are owed` : myBal < 0 ? `-${fmtC(myBal)} — you owe` : \"All even ✓\"}\n \n
\n )}\n\n
\n {[\n { key: \"expenses\", icon: \"ti-list\", label: `Expenses${(grp.expenses?.length || 0) > 0 ? ` (${grp.expenses.length})` : \"\"}` },\n { key: \"settle\", icon: \"ti-arrows-exchange\", label: `Settle up${txs.length > 0 ? ` (${txs.length})` : \"\"}` },\n { key: \"members\", icon: \"ti-users\", label: `Members (${grp.members?.length || 1})` },\n ].map((t) => (\n \n ))}\n
\n\n {tab === \"expenses\" && (\n <>\n \n {(grp.expenses || []).length === 0 ? (\n
\n \n
No expenses yet — add the first one!
\n
\n ) : (\n
\n {[...(grp.expenses || [])].reverse().map((exp: any) => {\n const payer = getMember(exp.paidBy);\n const c = clr(getMemberIdx(exp.paidBy));\n return (\n
\n
\n
{exp.title}
\n
\n \n {payer?.username || \"?\"}\n \n paid · {dateFmt(exp.date)}\n
\n
\n
\n
{fmtC(exp.totalAmount)}
\n
{exp.items?.length || 0} item{(exp.items?.length || 0) !== 1 ? \"s\" : \"\"}
\n
\n {exp.createdBy === sess.id && (\n \n )}\n
\n );\n })}\n
\n )}\n \n )}\n\n {tab === \"settle\" && (\n <>\n {(grp.expenses || []).length === 0 ? (\n
Add some expenses first to see the settlement.
\n ) : (\n <>\n
\n
Net balances
\n {(grp.members || []).map((m: any, i: number) => {\n const b = Math.round((bal[m.id] || 0) * 100) / 100;\n const c = clr(i);\n return (\n
\n
\n {ini(m.username)}\n
\n \n {m.username}{m.id === sess.id ? \" (you)\" : \"\"}\n \n 0 ? \"text-emerald-700\" : b < 0 ? \"text-orange-800\" : \"text-gray-400\"}`}>\n {b > 0 ? \"+\" : b < 0 ? \"-\" : \"\"}{ccy}{Math.abs(b).toFixed(2)}\n \n
\n );\n })}\n
\n\n {txs.length === 0 ? (\n
\n \n
All settled up! 🎉
\n
Everyone is even
\n
\n ) : (\n <>\n
\n Minimum {txs.length} payment{txs.length !== 1 ? \"s\" : \"\"} to settle everything\n
\n
\n {txs.map((tx, i) => {\n const fromM = getMember(tx.from);\n const toM = getMember(tx.to);\n const fromC = clr(getMemberIdx(tx.from));\n const toC = clr(getMemberIdx(tx.to));\n const isMyDebt = tx.from === sess.id;\n const isMyCred = tx.to === sess.id;\n return (\n
\n
\n {ini(fromM?.username)}\n
\n
\n {fromM?.username || \"?\"}{isMyDebt ? \" (you)\" : \"\"} pays {toM?.username || \"?\"}{isMyCred ? \" (you)\" : \"\"}\n
\n
\n {ini(toM?.username)}\n
\n \n {fmtC(tx.amount)}\n \n
\n );\n })}\n
\n
Debts are automatically simplified — cross-payments cancel each other out
\n \n )}\n \n )}\n \n )}\n\n {tab === \"members\" && (\n
\n {(grp.members || []).map((m: any, i: number) => {\n const c = clr(i);\n return (\n
\n
\n {ini(m.username)}\n
\n \n {m.username}{m.id === sess.id ? \" (you)\" : \"\"}\n \n {i === 0 && Creator}\n
\n );\n })}\n
\n
Invite others
\n
Share this code — others can join from the home screen
\n
\n \n {grp.inviteCode}\n \n \n
\n
\n
\n )}\n
\n );\n }\n\n if (view === \"add-expense\" && grp) {\n if (eStep === 1) return (\n
\n
\n \n
New expense
\n
\n What was this for?\n setEInfo((p: any) => ({ ...p, title: e.target.value }))}\n className={`${inputBase} mb-5`} autoFocus />\n Who paid?\n
\n {grp.members.map((m: any, i: number) => {\n const c = clr(i);\n const sel = eInfo.paidBy === m.id;\n return (\n \n );\n })}\n
\n \n
\n );\n\n if (eStep === 2) return (\n
\n
\n \n
Add items
\n
\n\n { e.preventDefault(); setDragOver(true); }}\n onDragLeave={() => setDragOver(false)}\n onDrop={(e) => { e.preventDefault(); setDragOver(false); const f = e.dataTransfer.files[0]; if (f) scanReceipt(f); }}\n onClick={() => !eScan && fileRef.current?.click()}\n className={`border-2 border-dashed rounded-xl p-6 text-center mb-4 transition-colors ${\n eScan ? \"cursor-wait\" : \"cursor-pointer\"} ${dragOver ? \"border-orange-500 bg-orange-50\" : \"border-gray-300 bg-gray-50\"}`}>\n {eScan ? (\n <>\n \n
Scanning & translating…
\n
Extracting items from the receipt
\n \n ) : (\n <>\n \n
Upload receipt photo
\n
Auto-extracts items · translates to English if needed
\n \n )}\n
\n { const f = e.target.files?.[0]; if (f) scanReceipt(f); }} />\n\n {eErr && (\n
\n {eErr}\n
\n )}\n\n
\n
\n Items {eItems.length > 0 && ({eItems.length})}\n
\n {eItems.length > 0 && {ccy}{eTotal.toFixed(2)}}\n
\n\n {eItems.length > 0 && (\n
\n {eItems.map((item, i) => (\n
\n setEItems((p) => p.map((it) => (it.id === item.id ? { ...it, name: e.target.value } : it)))}\n className=\"flex-1 border-none px-1 py-0.5 text-sm bg-transparent outline-none\" />\n {ccy}\n setEItems((p) => p.map((it) => (it.id === item.id ? { ...it, price: Math.round(parseFloat(e.target.value) * 100) / 100 || 0 } : it)))}\n className=\"w-14 border-none text-right px-0.5 py-0.5 text-sm font-mono bg-transparent outline-none\" min=\"0\" step=\"0.01\" />\n \n
\n ))}\n
\n )}\n\n
\n setMItem((p) => ({ ...p, name: e.target.value }))}\n onKeyDown={(e) => e.key === \"Enter\" && addManualItem()} className={`flex-1 ${inputBase}`} />\n
\n {ccy}\n setMItem((p) => ({ ...p, price: e.target.value }))}\n onKeyDown={(e) => e.key === \"Enter\" && addManualItem()}\n className=\"w-14 border-none outline-none px-0.5 py-1 text-sm font-mono bg-transparent\" min=\"0\" step=\"0.01\" />\n
\n \n
\n\n \n \n );\n\n if (eStep === 3) return (\n
\n
\n \n
Who had what?
\n
\n
Tap names to toggle. Multiple people can share one item.
\n\n
\n {eItems.map((item) => {\n const assigned = eAssign[item.id] || [];\n const perPerson = assigned.length > 0 ? item.price / assigned.length : 0;\n const allSel = assigned.length === grp.members.length;\n return (\n
\n
\n {item.name}\n
\n {fmtC(item.price)}\n {assigned.length > 1 &&
{fmtC(perPerson)} each
}\n
\n
\n
\n {grp.members.map((m: any, i: number) => {\n const c = clr(i);\n const isOn = assigned.includes(m.id);\n return (\n \n );\n })}\n \n
\n {assigned.length === 0 &&
No one assigned
}\n
\n );\n })}\n
\n\n
\n
This expense: {fmtC(eTotal)} total
\n
\n {grp.members.map((m: any, i: number) => {\n const c = clr(i);\n let share = 0;\n eItems.forEach((it) => { const as = eAssign[it.id] || []; if (as.includes(m.id)) share += it.price / as.length; });\n return (\n
\n
\n {ini(m.username)}\n
\n {m.username}\n {fmtC(share)}\n
\n );\n })}\n
\n
\n\n \n
\n );\n }\n\n return null;\n}\n",[],[88,113],["D",1787221159123],[124,125],[19],{"_35":59,"_13":60,"_38":61,"_40":41,"_42":43,"_44":62,"_46":47,"_48":129,"_17":64,"_51":52,"_53":65,"_55":56,"_57":-5,"_84":130,"_18":131},{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":126,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_84":127,"_18":128},["D",1787404289620],[],[19,37],["D",1787404269741],[],[19,60],"cbe729ca-86bd-485c-9de3-dc5e67c71f71",["D",1787221101901],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Split bills and expenses with groups, receipt scanning","imageUrl","userId","9de9736c-cf5d-4d8f-8c52-9805e5a8bc38","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","01a01eac-cdd8-7258-a69b-0a59a72e22ba","tursoName","cbe729ca86bd485c9de3dc5e67c71f71","tursoHostname","cbe729ca86bd485c9de3dc5e67c71f71-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789479081816],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_189":185},"org",{"_11":12,"_182":183,"_184":185,"_142":143,"_186":187,"_188":56},"branch",{"_17":79,"_13":16,"_35":43,"_174":132,"_175":-5,"_176":-5,"_177":-5,"_178":-5,"_179":-5,"_180":14,"_181":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","F Haddad","avatar","https://lh3.googleusercontent.com/a/ACg8ocKWAFvWR5vFVvudBriPaQTEAgSOR2liRWlZCdoiZvdih_zDzE8z=s96-c","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":132,"_13":14,"_48":248,"_134":-5,"_135":56,"_136":137,"_138":137,"_139":140,"_141":-5,"_142":143,"_144":78,"_145":47,"_146":-5,"_147":-5,"_148":69,"_149":150,"_151":152,"_153":154,"_155":249,"_157":-5,"_158":159,"_160":159,"_161":162,"_163":162,"_164":162,"_165":159,"_166":159,"_167":250,"_169":251,"_171":252,"_173":56},[224,227,231],"files",[224,225,226,227,228,229,230,231],"counts",{"_215":69,"_216":71,"_217":69,"_32":218,"_219":220},[211,212],{"_35":67,"_13":19,"_38":41,"_40":-5,"_42":43,"_44":71,"_46":47,"_48":209,"_17":69,"_51":68,"_53":-5,"_55":56,"_57":-5,"_18":210},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1787221159123],[19],{"_35":59,"_13":60,"_38":61,"_40":41,"_42":43,"_44":62,"_46":47,"_48":63,"_17":64,"_51":52,"_53":65,"_55":56,"_57":-5,"_18":214},{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_18":213},[19,37],[19,60],"pulls","branches","forks",{"_221":69,"_223":69},"connections",{"_221":69,"_222":69},"count","unfilledCount","emptyCount",{"_35":67,"_13":19,"_38":41,"_40":-5,"_42":43,"_44":71,"_46":47,"_48":121,"_17":69,"_51":68,"_53":-5,"_55":56,"_57":-5,"_84":246,"_18":247},{"_35":59,"_13":60,"_38":61,"_40":41,"_42":43,"_44":62,"_46":47,"_48":129,"_17":64,"_51":52,"_53":65,"_55":56,"_57":-5,"_84":244,"_18":245},{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":126,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_84":242,"_18":243},{"_35":87,"_13":88,"_38":89,"_40":-5,"_42":43,"_44":90,"_46":47,"_48":91,"_17":69,"_51":68,"_53":-5,"_55":56,"_57":-5,"_84":240,"_18":241},{"_35":112,"_13":113,"_38":114,"_40":89,"_42":43,"_44":115,"_46":47,"_48":116,"_17":117,"_51":52,"_53":118,"_55":56,"_57":-5,"_84":238,"_18":239},{"_35":105,"_13":106,"_38":107,"_40":89,"_42":43,"_44":64,"_46":47,"_48":108,"_17":71,"_51":52,"_53":109,"_55":56,"_57":-5,"_84":236,"_18":237},{"_35":97,"_13":98,"_38":99,"_40":89,"_42":43,"_44":100,"_46":47,"_48":101,"_17":69,"_51":24,"_53":102,"_55":56,"_57":-5,"_84":234,"_18":235},{"_35":76,"_13":77,"_38":78,"_40":-5,"_42":43,"_44":79,"_46":47,"_48":80,"_17":81,"_51":82,"_53":83,"_55":56,"_57":-5,"_84":232,"_18":233},[],[77],[],[88,98],[],[88,106],[],[88,113],[228,229,230],[88],[],[19,37],[],[19,60],[225,226],[19],["D",1787221101901],["D",1789479081816],{"_11":12,"_189":185},{"_11":12,"_182":183,"_184":185,"_142":143,"_186":187,"_188":56},{"_17":79,"_13":16,"_35":43,"_174":132,"_175":-5,"_176":-5,"_177":-5,"_178":-5,"_179":-5,"_180":14,"_181":12},"ctx",{"_167":-5,"_206":286,"_287":288,"_289":290,"_291":56,"_292":56,"_293":56,"_294":47,"_295":-5,"_296":-7,"_297":-7,"_298":69,"_299":56,"_300":56,"_301":-5,"_302":56,"_303":56,"_304":56,"_305":-5},"ENV",{"_257":258,"_259":260,"_261":16,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285},"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"]