SplitTab

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_214":215,"_216":217},"routes/_app.x.$handle.$name",{"_99":98,"_31":44,"_108":89,"_26":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_20":-5,"_120":-5,"_121":-5,"_122":24,"_123":124,"_125":58,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_31":44,"_37":45,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":24},"version",5,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","frontend/App.tsx","latestPath","fileId","f60712bc-9c80-11f1-bfba-1607ee4eb77e","name","App.tsx","fileType","script","content","import React, { useState, useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\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) throw new Error(data.error || \"Something went wrong.\");\n return data;\n}\n\nexport default function App() {\n const [sess, setSess] = 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\");\n const [aForm, setAForm] = useState({ username: \"\", password: \"\" });\n const [aErr, setAErr] = useState(\"\");\n const [aBusy, setABusy] = useState(false);\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 (async () => {\n const token = localStorage.getItem(TOKEN_KEY);\n if (token) {\n try {\n const { user } = await api(\"/me\");\n setSess(user);\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, password } = aForm;\n if (!username.trim() || !password.trim()) { setAErr(\"Fill in all fields.\"); return; }\n setABusy(true);\n try {\n const { token, user } = await api(aMode === \"signup\" ? \"/signup\" : \"/login\", {\n method: \"POST\",\n body: { username: username.trim(), password },\n });\n localStorage.setItem(TOKEN_KEY, token);\n setSess(user);\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 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 } catch (e: any) { alert(e.message); }\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 } 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 setEErr(err.message || \"Could not read the receipt. Add items manually.\");\n }\n setEScan(false);\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 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 setAForm((p) => ({ ...p, password: e.target.value }))}\n onKeyDown={(e) => e.key === \"Enter\" && doAuth()} className={inputBase} />\n
\n {aErr &&
{aErr}
}\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 {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","createdAt",["D",1787221312239],"branchVersion","branchId","c697c2f1-8952-43c1-bb72-ac0b37be5f2a","id","cbe729ca-86bd-485c-9de3-dc5e67c71f71","splittab",["D",1787221101901],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Split bills and expenses with groups, receipt scanning","imageUrl","9de9736c-cf5d-4d8f-8c52-9805e5a8bc38","pinnedFileId","b19384da-9c80-11f1-9efb-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"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",{"_99":98,"_107":103},"org",{"_99":98,"_100":101,"_102":103,"_18":54,"_104":105,"_106":24},"branch",{"_13":88,"_31":89,"_42":41,"_90":43,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":44,"_97":98},"isOwned",53,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","fhaddad","handle","displayName","F Haddad","avatar","https://lh3.googleusercontent.com/a/ACg8ocKWAFvWR5vFVvudBriPaQTEAgSOR2liRWlZCdoiZvdih_zDzE8z=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_31":44,"_37":209,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":210,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":211,"_83":212,"_85":213,"_87":24},"tree",[166,169,172],"files",[166,167,168,169,170,171,172],"counts",{"_156":62,"_157":153,"_158":62,"_159":160,"_161":162},"contents",[130,131,132],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":150,"_31":151,"_29":152,"_135":-5,"_40":41,"_39":153,"_137":58,"_37":154,"_13":62,"_33":148,"_35":-5,"_23":24,"_141":-5,"_26":155},{"_42":143,"_31":144,"_29":145,"_135":-5,"_40":41,"_39":146,"_137":58,"_37":147,"_13":62,"_33":148,"_35":-5,"_23":24,"_141":-5,"_26":149},{"_42":133,"_31":134,"_29":56,"_135":-5,"_40":41,"_39":136,"_137":24,"_37":138,"_13":62,"_33":139,"_35":140,"_23":24,"_141":-5,"_26":142},"2dce7a0b-f943-406f-85e4-6e4584d53953","main.tsx","parentId",3,"latest",["D",1787221197410],"http","import { Hono } from \"npm:hono\";\nimport { parseVal, serveFile, serveImmutableFile, immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\nimport { initDb } from \"./backend/db.ts\";\nimport api from \"./backend/routes.ts\";\n\nawait initDb();\n\nconst app = new Hono();\n\napp.route(\"/api\", api);\n\napp.get(\"/\", (c) => c.html(`\n\n\n \n \n SplitTab\n 🧾\" />\n \n \n\n\n
\n \n\n`));\n\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\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","label",[134],"2b8d6bc0-9601-4c41-8a24-ab432de5c747","frontend","465745f8-01f3-4c3d-a8d2-8f90d74bd38c",4,["D",1787221202545],"directory",[144],"6e8cc8d4-4f31-4636-aaf7-92b99311ade0","backend","a9a6b58a-2656-4264-815f-80df2ed2f808",1,["D",1787221159123],[151],"pulls","branches","forks","envVars",{"_163":62,"_165":62},"connections",{"_163":62,"_164":62},"count","unfilledCount","emptyCount",{"_42":150,"_31":151,"_29":152,"_135":-5,"_40":41,"_39":153,"_137":58,"_37":206,"_13":62,"_33":148,"_35":-5,"_23":24,"_141":-5,"_174":207,"_26":208},{"_42":199,"_31":200,"_29":201,"_135":152,"_40":41,"_39":153,"_137":24,"_37":202,"_13":62,"_33":34,"_35":203,"_23":24,"_141":-5,"_174":204,"_26":205},{"_42":191,"_31":192,"_29":193,"_135":152,"_40":41,"_39":194,"_137":24,"_37":195,"_13":62,"_33":34,"_35":196,"_23":24,"_141":-5,"_174":197,"_26":198},{"_42":143,"_31":144,"_29":145,"_135":-5,"_40":41,"_39":146,"_137":58,"_37":188,"_13":62,"_33":148,"_35":-5,"_23":24,"_141":-5,"_174":189,"_26":190},{"_42":184,"_31":32,"_29":30,"_135":145,"_40":41,"_39":14,"_137":24,"_37":185,"_13":62,"_33":34,"_35":36,"_23":24,"_141":-5,"_174":186,"_26":187},{"_42":177,"_31":178,"_29":179,"_135":145,"_40":41,"_39":146,"_137":24,"_37":180,"_13":62,"_33":34,"_35":181,"_23":24,"_141":-5,"_174":182,"_26":183},{"_42":133,"_31":134,"_29":56,"_135":-5,"_40":41,"_39":136,"_137":24,"_37":173,"_13":62,"_33":139,"_35":140,"_23":24,"_141":-5,"_174":175,"_26":176},["D",1787221197410],"children",[],[134],"009a6628-f4c4-4aaf-af38-295363992726","index.tsx","b4a55a04-9c80-11f1-81f3-1607ee4eb77e",["D",1787221202545],"import React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();\n",[],[144,178],"19415276-df6b-4cdf-8585-0c2091197788",["D",1787221312239],[],[144,32],["D",1787221202545],[170,171],[144],"dd180936-64e5-4cb6-b342-19f68168515f","routes.ts","ad907758-9c80-11f1-a9f0-1607ee4eb77e",2,["D",1787221190664],"import { Hono } from \"npm:hono\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { uid, hashPassword } from \"./db.ts\";\n\nconst api = new Hono();\n\n// ---- auth helpers ----\nasync function getSession(c: any) {\n const token = c.req.header(\"Authorization\")?.replace(\"Bearer \", \"\");\n if (!token) return null;\n const res = await sqlite.execute({ sql: \"SELECT user_id FROM sessions WHERE token = ?\", args: [token] });\n if (res.rows.length === 0) return null;\n const userId = res.rows[0].user_id as string;\n const u = await sqlite.execute({ sql: \"SELECT id, username FROM users WHERE id = ?\", args: [userId] });\n return u.rows[0] || null;\n}\n\nasync function requireAuth(c: any, next: any) {\n const user = await getSession(c);\n if (!user) return c.json({ error: \"Not authenticated\" }, 401);\n c.set(\"user\", user);\n await next();\n}\n\n// ---- auth ----\napi.post(\"/signup\", async (c) => {\n const { username, password } = await c.req.json();\n if (!username?.trim() || !password?.trim()) return c.json({ error: \"Fill in all fields.\" }, 400);\n const existing = await sqlite.execute({\n sql: \"SELECT id FROM users WHERE LOWER(username) = LOWER(?)\",\n args: [username.trim()],\n });\n if (existing.rows.length > 0) return c.json({ error: \"Username already taken.\" }, 400);\n const id = uid();\n const hash = await hashPassword(password);\n await sqlite.execute({\n sql: \"INSERT INTO users (id, username, password_hash, created_at) VALUES (?, ?, ?, ?)\",\n args: [id, username.trim(), hash, Date.now()],\n });\n const token = uid();\n await sqlite.execute({\n sql: \"INSERT INTO sessions (token, user_id, created_at) VALUES (?, ?, ?)\",\n args: [token, id, Date.now()],\n });\n return c.json({ token, user: { id, username: username.trim() } });\n});\n\napi.post(\"/login\", async (c) => {\n const { username, password } = await c.req.json();\n if (!username?.trim() || !password?.trim()) return c.json({ error: \"Fill in all fields.\" }, 400);\n const res = await sqlite.execute({\n sql: \"SELECT id, username, password_hash FROM users WHERE LOWER(username) = LOWER(?)\",\n args: [username.trim()],\n });\n if (res.rows.length === 0) return c.json({ error: \"Wrong username or password.\" }, 401);\n const row = res.rows[0] as any;\n const hash = await hashPassword(password);\n if (hash !== row.password_hash) return c.json({ error: \"Wrong username or password.\" }, 401);\n const token = uid();\n await sqlite.execute({\n sql: \"INSERT INTO sessions (token, user_id, created_at) VALUES (?, ?, ?)\",\n args: [token, row.id, Date.now()],\n });\n return c.json({ token, user: { id: row.id, username: row.username } });\n});\n\napi.post(\"/logout\", requireAuth, async (c) => {\n const token = c.req.header(\"Authorization\")?.replace(\"Bearer \", \"\");\n await sqlite.execute({ sql: \"DELETE FROM sessions WHERE token = ?\", args: [token] });\n return c.json({ ok: true });\n});\n\napi.get(\"/me\", requireAuth, async (c) => {\n return c.json({ user: c.get(\"user\") });\n});\n\n// ---- groups ----\nasync function fullGroup(groupId: string) {\n const g = await sqlite.execute({ sql: \"SELECT * FROM groups WHERE id = ?\", args: [groupId] });\n if (g.rows.length === 0) return null;\n const group = g.rows[0] as any;\n const members = await sqlite.execute({\n sql: `SELECT u.id, u.username FROM group_members gm\n JOIN users u ON u.id = gm.user_id WHERE gm.group_id = ? ORDER BY gm.joined_at ASC`,\n args: [groupId],\n });\n const expenses = await sqlite.execute({\n sql: \"SELECT * FROM expenses WHERE group_id = ? ORDER BY created_at ASC\",\n args: [groupId],\n });\n const expensesFull = await Promise.all(expenses.rows.map(async (e: any) => {\n const items = await sqlite.execute({ sql: \"SELECT * FROM expense_items WHERE expense_id = ?\", args: [e.id] });\n return {\n id: e.id, title: e.title, paidBy: e.paid_by, totalAmount: e.total_amount,\n createdBy: e.created_by, date: e.created_at,\n items: items.rows.map((it: any) => ({\n id: it.id, name: it.name, price: it.price, assigned: JSON.parse(it.assigned_to || \"[]\"),\n })),\n };\n }));\n return {\n id: group.id, name: group.name, currency: group.currency, inviteCode: group.invite_code,\n memberIds: members.rows.map((m: any) => m.id),\n members: members.rows.map((m: any) => ({ id: m.id, username: m.username })),\n expenses: expensesFull, createdAt: group.created_at,\n };\n}\n\napi.get(\"/groups\", requireAuth, async (c) => {\n const user = c.get(\"user\") as any;\n const res = await sqlite.execute({\n sql: `SELECT g.id FROM groups g JOIN group_members gm ON gm.group_id = g.id WHERE gm.user_id = ?`,\n args: [user.id],\n });\n const groups = await Promise.all(res.rows.map((r: any) => fullGroup(r.id)));\n return c.json({ groups: groups.filter(Boolean) });\n});\n\napi.post(\"/groups\", requireAuth, async (c) => {\n const user = c.get(\"user\") as any;\n const { name, currency } = await c.req.json();\n if (!name?.trim()) return c.json({ error: \"Name required.\" }, 400);\n const id = uid();\n const inviteCode = Math.random().toString(36).slice(2, 8).toUpperCase();\n const now = Date.now();\n await sqlite.batch([\n {\n sql: \"INSERT INTO groups (id, name, currency, invite_code, created_by, created_at) VALUES (?, ?, ?, ?, ?, ?)\",\n args: [id, name.trim(), currency || \"€\", inviteCode, user.id, now],\n },\n { sql: \"INSERT INTO group_members (group_id, user_id, joined_at) VALUES (?, ?, ?)\", args: [id, user.id, now] },\n ]);\n return c.json({ group: await fullGroup(id) });\n});\n\napi.post(\"/groups/join\", requireAuth, async (c) => {\n const user = c.get(\"user\") as any;\n const { code } = await c.req.json();\n const res = await sqlite.execute({ sql: \"SELECT id FROM groups WHERE invite_code = ?\", args: [(code || \"\").trim().toUpperCase()] });\n if (res.rows.length === 0) return c.json({ error: \"Group not found. Check the code.\" }, 404);\n const groupId = (res.rows[0] as any).id;\n const existing = await sqlite.execute({\n sql: \"SELECT 1 FROM group_members WHERE group_id = ? AND user_id = ?\",\n args: [groupId, user.id],\n });\n if (existing.rows.length > 0) return c.json({ error: \"You're already in this group!\" }, 400);\n await sqlite.execute({\n sql: \"INSERT INTO group_members (group_id, user_id, joined_at) VALUES (?, ?, ?)\",\n args: [groupId, user.id, Date.now()],\n });\n return c.json({ group: await fullGroup(groupId) });\n});\n\napi.get(\"/groups/:id\", requireAuth, async (c) => {\n const user = c.get(\"user\") as any;\n const groupId = c.req.param(\"id\");\n const member = await sqlite.execute({\n sql: \"SELECT 1 FROM group_members WHERE group_id = ? AND user_id = ?\",\n args: [groupId, user.id],\n });\n if (member.rows.length === 0) return c.json({ error: \"Not a member of this group.\" }, 403);\n const group = await fullGroup(groupId);\n if (!group) return c.json({ error: \"Group not found.\" }, 404);\n return c.json({ group });\n});\n\n// ---- expenses ----\napi.post(\"/groups/:id/expenses\", requireAuth, async (c) => {\n const user = c.get(\"user\") as any;\n const groupId = c.req.param(\"id\");\n const member = await sqlite.execute({\n sql: \"SELECT 1 FROM group_members WHERE group_id = ? AND user_id = ?\",\n args: [groupId, user.id],\n });\n if (member.rows.length === 0) return c.json({ error: \"Not a member of this group.\" }, 403);\n const { title, paidBy, items } = await c.req.json();\n if (!Array.isArray(items) || items.length === 0) return c.json({ error: \"At least one item required.\" }, 400);\n const total = Math.round(items.reduce((s: number, i: any) => s + (Number(i.price) || 0), 0) * 100) / 100;\n const expenseId = uid();\n const now = Date.now();\n const statements = [\n {\n sql: \"INSERT INTO expenses (id, group_id, title, paid_by, total_amount, created_by, created_at) VALUES (?, ?, ?, ?, ?, ?, ?)\",\n args: [expenseId, groupId, (title || \"Expense\").trim(), paidBy, total, user.id, now],\n },\n ...items.map((it: any) => ({\n sql: \"INSERT INTO expense_items (id, expense_id, name, price, assigned_to) VALUES (?, ?, ?, ?, ?)\",\n args: [uid(), expenseId, it.name, Math.round((Number(it.price) || 0) * 100) / 100, JSON.stringify(it.assigned || [])],\n })),\n ];\n await sqlite.batch(statements);\n return c.json({ group: await fullGroup(groupId) });\n});\n\napi.delete(\"/groups/:id/expenses/:expId\", requireAuth, async (c) => {\n const user = c.get(\"user\") as any;\n const groupId = c.req.param(\"id\");\n const expId = c.req.param(\"expId\");\n const exp = await sqlite.execute({ sql: \"SELECT created_by FROM expenses WHERE id = ? AND group_id = ?\", args: [expId, groupId] });\n if (exp.rows.length === 0) return c.json({ error: \"Expense not found.\" }, 404);\n if ((exp.rows[0] as any).created_by !== user.id) return c.json({ error: \"Only the creator can delete this.\" }, 403);\n await sqlite.batch([\n { sql: \"DELETE FROM expense_items WHERE expense_id = ?\", args: [expId] },\n { sql: \"DELETE FROM expenses WHERE id = ?\", args: [expId] },\n ]);\n return c.json({ group: await fullGroup(groupId) });\n});\n\n// ---- receipt scanning (server-side, key never reaches the client) ----\napi.post(\"/scan-receipt\", requireAuth, async (c) => {\n const { imageBase64, mediaType } = await c.req.json();\n if (!imageBase64) return c.json({ error: \"No image provided.\" }, 400);\n const apiKey = Deno.env.get(\"ANTHROPIC_API_KEY\");\n if (!apiKey) return c.json({ error: \"Server not configured for receipt scanning.\" }, 500);\n try {\n const res = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n },\n body: JSON.stringify({\n model: \"claude-sonnet-4-6\",\n max_tokens: 1000,\n messages: [{\n role: \"user\",\n content: [\n { type: \"image\", source: { type: \"base64\", media_type: mediaType || \"image/jpeg\", data: imageBase64 } },\n {\n type: \"text\",\n text: \"Extract all ordered items from this receipt. If any item names are not in English, translate them to English. Return ONLY a raw JSON array with no markdown, no backticks, no preamble. Format: [{\\\"name\\\":\\\"Item name in English\\\",\\\"price\\\":0.00}]. List each item individually. Skip totals, subtotals, taxes, tips, service charges, and discounts.\",\n },\n ],\n }],\n }),\n });\n const data = await res.json();\n if (data.error) throw new Error(data.error.message || \"Anthropic API error\");\n const text = data.content[0].text.trim().replace(/```json\\n?|```\\n?/g, \"\").trim();\n const parsed = JSON.parse(text);\n const items = parsed.map((it: any) => ({\n name: String(it.name || \"\").slice(0, 200),\n price: Math.round((parseFloat(it.price) || 0) * 100) / 100,\n }));\n return c.json({ items });\n } catch (e) {\n return c.json({ error: \"Could not read the receipt. Add items manually.\" }, 502);\n }\n});\n\nexport default api;\n",[],[151,192],"7a593594-8d72-4738-9d48-af543abe92ae","db.ts","9ac2f920-9c80-11f1-9834-1607ee4eb77e",["D",1787221159123],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nexport async function initDb() {\n await sqlite.batch([\n `CREATE TABLE IF NOT EXISTS users (\n id TEXT PRIMARY KEY,\n username TEXT UNIQUE NOT NULL,\n password_hash TEXT NOT NULL,\n created_at INTEGER NOT NULL\n )`,\n `CREATE TABLE IF NOT EXISTS groups (\n id TEXT PRIMARY KEY,\n name TEXT NOT NULL,\n currency TEXT NOT NULL DEFAULT '€',\n invite_code TEXT UNIQUE NOT NULL,\n created_by TEXT NOT NULL,\n created_at INTEGER NOT NULL\n )`,\n `CREATE TABLE IF NOT EXISTS group_members (\n group_id TEXT NOT NULL,\n user_id TEXT NOT NULL,\n joined_at INTEGER NOT NULL,\n PRIMARY KEY (group_id, user_id)\n )`,\n `CREATE TABLE IF NOT EXISTS expenses (\n id TEXT PRIMARY KEY,\n group_id TEXT NOT NULL,\n title TEXT NOT NULL,\n paid_by TEXT NOT NULL,\n total_amount REAL NOT NULL,\n created_by TEXT NOT NULL,\n created_at INTEGER NOT NULL\n )`,\n `CREATE TABLE IF NOT EXISTS expense_items (\n id TEXT PRIMARY KEY,\n expense_id TEXT NOT NULL,\n name TEXT NOT NULL,\n price REAL NOT NULL,\n assigned_to TEXT NOT NULL DEFAULT '[]'\n )`,\n `CREATE TABLE IF NOT EXISTS sessions (\n token TEXT PRIMARY KEY,\n user_id TEXT NOT NULL,\n created_at INTEGER NOT NULL\n )`,\n ]);\n}\n\nexport const uid = () => crypto.randomUUID();\n\nexport async function hashPassword(password: string): Promise {\n const data = new TextEncoder().encode(password);\n const digest = await crypto.subtle.digest(\"SHA-256\", data);\n return Array.from(new Uint8Array(digest)).map(b => b.toString(16).padStart(2, \"0\")).join(\"\");\n}\n",[],[151,200],["D",1787221159123],[167,168],[151],["D",1787221101901],["D",1789479081816],{"_99":98,"_107":103},{"_99":98,"_100":101,"_102":103,"_18":54,"_104":105,"_106":24},{"_13":88,"_31":89,"_42":41,"_90":43,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":44,"_97":98},"ctx",{"_81":-5,"_127":247,"_248":249,"_250":251,"_252":24,"_253":24,"_254":24,"_255":58,"_256":-5,"_257":-7,"_258":-7,"_259":62,"_260":24,"_261":24,"_262":-5,"_263":24,"_264":24,"_265":24,"_266":-5},"ENV",{"_218":219,"_220":221,"_222":89,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246},"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 · v5