SplitTab

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_220":221,"_222":223},"routes/_app.x.$handle.$name",{"_101":100,"_32":46,"_110":91,"_27":111,"_13":14,"_112":-5,"_11":113,"_114":115,"_116":117,"_118":119,"_120":121,"_20":-5,"_122":-5,"_123":-5,"_124":25,"_125":126,"_127":60,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":25},"version",49,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"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 \"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 }, []);\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 Free plan\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","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 }, []);\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","createdAt",["D",1787404311067],"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",{"_101":100,"_109":105},"org",{"_101":100,"_102":103,"_104":105,"_18":56,"_106":107,"_108":25},"branch",{"_13":90,"_32":91,"_44":43,"_92":45,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":46,"_99":100},"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",{"_44":45,"_32":46,"_39":215,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":216,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":217,"_85":218,"_87":219,"_89":25},"tree",[169,172,175],"files",[169,170,171,172,173,174,175],"counts",{"_159":64,"_160":156,"_161":64,"_162":163,"_164":165},"contents",[132,133,134],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":153,"_32":154,"_30":155,"_137":-5,"_42":43,"_41":156,"_139":60,"_39":157,"_13":64,"_34":151,"_36":-5,"_24":25,"_144":-5,"_27":158},{"_44":146,"_32":147,"_30":148,"_137":-5,"_42":43,"_41":149,"_139":60,"_39":150,"_13":64,"_34":151,"_36":-5,"_24":25,"_144":-5,"_27":152},{"_44":135,"_32":136,"_30":58,"_137":-5,"_42":43,"_41":138,"_139":25,"_39":140,"_13":141,"_34":142,"_36":143,"_24":25,"_144":-5,"_27":145},"6ff25803-43e5-4fac-8f76-47c44603eb19","main.tsx","parentId",26,"latest",["D",1787261455319],3,"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\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
\n
Last updated: [DATE]
\n
1. Who is responsible for your data
\n
SplitTab is operated by [Your name or legal entity], based in [City, Netherlands]. Contact: [your-email@example.com].
\n
2. What we collect
\n
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.
\n
3. Legal basis
\n
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.
\n
4. Who else sees your data
\n
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.
\n
5. Your rights
\n
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.
\n
6. Cookies
\n
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.
\n
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
\n
Last updated: [DATE]
\n
1. What SplitTab is
\n
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.
\n
2. Your account
\n
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.
\n
3. Receipt scanning
\n
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.
\n
4. No liability for financial disputes
\n
We are not responsible for incorrect entries, disputes between users about who owes what, or financial loss from reliance on the app's calculations.
\n
5. Governing law
\n
These terms are governed by the laws of the Netherlands. Disputes are handled by the competent court in [your city].
\n
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","label",[136],"2b8d6bc0-9601-4c41-8a24-ab432de5c747","frontend","465745f8-01f3-4c3d-a8d2-8f90d74bd38c",4,["D",1787221202545],"directory",[147],"6e8cc8d4-4f31-4636-aaf7-92b99311ade0","backend","a9a6b58a-2656-4264-815f-80df2ed2f808",1,["D",1787221159123],[154],"pulls","branches","forks","envVars",{"_166":64,"_168":64},"connections",{"_166":64,"_167":64},"count","unfilledCount","emptyCount",{"_44":153,"_32":154,"_30":155,"_137":-5,"_42":43,"_41":156,"_139":60,"_39":212,"_13":64,"_34":151,"_36":-5,"_24":25,"_144":-5,"_177":213,"_27":214},{"_44":204,"_32":205,"_30":206,"_137":155,"_42":43,"_41":207,"_139":60,"_39":208,"_13":183,"_34":35,"_36":209,"_24":25,"_144":-5,"_177":210,"_27":211},{"_44":196,"_32":197,"_30":198,"_137":155,"_42":43,"_41":199,"_139":60,"_39":200,"_13":190,"_34":35,"_36":201,"_24":25,"_144":-5,"_177":202,"_27":203},{"_44":146,"_32":147,"_30":148,"_137":-5,"_42":43,"_41":149,"_139":60,"_39":193,"_13":64,"_34":151,"_36":-5,"_24":25,"_144":-5,"_177":194,"_27":195},{"_44":188,"_32":33,"_30":31,"_137":148,"_42":43,"_41":14,"_139":25,"_39":189,"_13":190,"_34":35,"_36":38,"_24":25,"_144":-5,"_177":191,"_27":192},{"_44":180,"_32":181,"_30":182,"_137":148,"_42":43,"_41":183,"_139":60,"_39":184,"_13":156,"_34":35,"_36":185,"_24":25,"_144":-5,"_177":186,"_27":187},{"_44":135,"_32":136,"_30":58,"_137":-5,"_42":43,"_41":138,"_139":25,"_39":176,"_13":141,"_34":142,"_36":143,"_24":25,"_144":-5,"_177":178,"_27":179},["D",1787261455319],"children",[],[136],"d3781c88-8a35-486f-8410-fae5e6594c7d","index.tsx","b4a55a04-9c80-11f1-81f3-1607ee4eb77e",8,["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",[],[147,181],"ab634ba9-b3a1-4afe-9bc6-7d5254033cff",["D",1787404311067],16,[],[147,33],["D",1787221202545],[173,174],[147],"98f42bae-35a2-4278-b0fe-d5ecad778882","routes.ts","ad907758-9c80-11f1-a9f0-1607ee4eb77e",46,["D",1787404289620],"import { Hono } from \"npm:hono\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { email as sendEmail } from \"https://esm.town/v/std/email\";\n// @ts-ignore\nimport Stripe from \"npm:stripe\";\nimport {\n uid, hashPassword, verifyPassword, createSession, getValidSession,\n isValidEmail, createPasswordReset, consumePasswordReset,\n getUserPlan, countUserGroups, countScansThisMonth, recordScan, PLAN_LIMITS,\n} from \"./db.ts\";\n\nconst stripe = Deno.env.get(\"STRIPE_SECRET_KEY\") ? new Stripe(Deno.env.get(\"STRIPE_SECRET_KEY\")!) : null;\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 userId = await getValidSession(token);\n if (!userId) return null;\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// ---- simple in-memory rate limiting ----\n// Note: resets on redeploy/restart; fine as a first line of defense against bots and brute force.\nconst rateBuckets = new Map();\nfunction rateLimit(bucket: string, key: string, max: number, windowMs: number) {\n const k = `${bucket}:${key}`;\n const now = Date.now();\n const entry = rateBuckets.get(k);\n if (!entry || entry.resetAt < now) {\n rateBuckets.set(k, { count: 1, resetAt: now + windowMs });\n return true;\n }\n if (entry.count >= max) return false;\n entry.count++;\n return true;\n}\nfunction clientIp(c: any) {\n return c.req.header(\"x-forwarded-for\")?.split(\",\")[0].trim() || c.req.header(\"cf-connecting-ip\") || \"unknown\";\n}\nasync function rateLimited(c: any, next: any) {\n const bucket = c.req.path;\n if (!rateLimit(bucket, clientIp(c), 10, 60_000)) {\n return c.json({ error: \"Too many attempts, try again shortly.\" }, 429);\n }\n await next();\n}\n\n// ---- auth ----\napi.post(\"/signup\", rateLimited, async (c) => {\n const { username, email, password } = await c.req.json();\n if (!username?.trim() || !email?.trim() || !password?.trim()) return c.json({ error: \"Fill in all fields.\" }, 400);\n if (!isValidEmail(email.trim())) return c.json({ error: \"Enter a valid email address.\" }, 400);\n if (password.length < 8) return c.json({ error: \"Password must be at least 8 characters.\" }, 400);\n const existingUsername = await sqlite.execute({\n sql: \"SELECT id FROM users WHERE LOWER(username) = LOWER(?)\",\n args: [username.trim()],\n });\n if (existingUsername.rows.length > 0) return c.json({ error: \"Username already taken.\" }, 400);\n const existingEmail = await sqlite.execute({\n sql: \"SELECT id FROM users WHERE LOWER(email) = LOWER(?)\",\n args: [email.trim()],\n });\n if (existingEmail.rows.length > 0) return c.json({ error: \"An account with this email already exists.\" }, 400);\n const id = uid();\n const hash = await hashPassword(password);\n await sqlite.execute({\n sql: \"INSERT INTO users (id, username, email, password_hash, created_at) VALUES (?, ?, ?, ?, ?)\",\n args: [id, username.trim(), email.trim().toLowerCase(), hash, Date.now()],\n });\n const token = await createSession(id);\n return c.json({ token, user: { id, username: username.trim() } });\n});\n\napi.post(\"/login\", rateLimited, 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 ok = await verifyPassword(password, row.password_hash);\n if (!ok) return c.json({ error: \"Wrong username or password.\" }, 401);\n // transparently upgrade any legacy SHA-256 hash to bcrypt now that we have the plaintext\n if (/^[a-f0-9]{64}$/i.test(row.password_hash)) {\n const upgraded = await hashPassword(password);\n await sqlite.execute({ sql: \"UPDATE users SET password_hash = ? WHERE id = ?\", args: [upgraded, row.id] });\n }\n const token = await createSession(row.id);\n return c.json({ token, user: { id: row.id, username: row.username } });\n});\n\napi.post(\"/forgot-password\", rateLimited, async (c) => {\n const { email } = await c.req.json();\n if (!email?.trim()) return c.json({ error: \"Enter your email.\" }, 400);\n const res = await sqlite.execute({\n sql: \"SELECT id, username FROM users WHERE LOWER(email) = LOWER(?)\",\n args: [email.trim()],\n });\n // Always return success, whether or not the email exists — avoids leaking which emails are registered.\n if (res.rows.length > 0) {\n const row = res.rows[0] as any;\n const token = await createPasswordReset(row.id);\n const resetUrl = `${new URL(c.req.url).origin}/?reset=${token}`;\n try {\n await sendEmail({\n to: email.trim(),\n subject: \"Reset your SplitTab password\",\n text: `Hi ${row.username},\\n\\nSomeone requested a password reset for your SplitTab account. If this was you, click the link below within the next hour:\\n\\n${resetUrl}\\n\\nIf you didn't request this, you can ignore this email.`,\n });\n } catch { /* don't leak email delivery failures to the client */ }\n }\n return c.json({ ok: true });\n});\n\napi.post(\"/reset-password\", rateLimited, async (c) => {\n const { token, password } = await c.req.json();\n if (!token || !password?.trim()) return c.json({ error: \"Missing token or password.\" }, 400);\n if (password.length < 8) return c.json({ error: \"Password must be at least 8 characters.\" }, 400);\n const userId = await consumePasswordReset(token);\n if (!userId) return c.json({ error: \"This reset link is invalid or has expired.\" }, 400);\n const hash = await hashPassword(password);\n await sqlite.execute({ sql: \"UPDATE users SET password_hash = ? WHERE id = ?\", args: [hash, userId] });\n // invalidate all existing sessions for this user as a safety measure\n await sqlite.execute({ sql: \"DELETE FROM sessions WHERE user_id = ?\", args: [userId] });\n return c.json({ ok: true });\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 const user = c.get(\"user\") as any;\n const plan = await getUserPlan(user.id);\n const groupCount = await countUserGroups(user.id);\n const scansThisMonth = await countScansThisMonth(user.id);\n const limits = PLAN_LIMITS[plan];\n return c.json({\n user, plan,\n usage: {\n groups: groupCount, maxGroups: limits.maxGroups === Infinity ? null : limits.maxGroups,\n scansThisMonth, maxScansPerMonth: limits.maxScansPerMonth === Infinity ? null : limits.maxScansPerMonth,\n },\n });\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 plan = await getUserPlan(user.id);\n const limits = PLAN_LIMITS[plan];\n const groupCount = await countUserGroups(user.id);\n if (groupCount >= limits.maxGroups) {\n return c.json({ error: `Free plan is limited to ${limits.maxGroups} active groups. Upgrade to Pro for unlimited groups.`, code: \"LIMIT_REACHED\" }, 402);\n }\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, rateLimited, async (c) => {\n const user = c.get(\"user\") as any;\n const plan = await getUserPlan(user.id);\n const limits = PLAN_LIMITS[plan];\n const groupCount = await countUserGroups(user.id);\n if (groupCount >= limits.maxGroups) {\n return c.json({ error: `Free plan is limited to ${limits.maxGroups} active groups. Upgrade to Pro for unlimited groups.`, code: \"LIMIT_REACHED\" }, 402);\n }\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 user = c.get(\"user\") as any;\n const plan = await getUserPlan(user.id);\n const limits = PLAN_LIMITS[plan];\n const scansThisMonth = await countScansThisMonth(user.id);\n if (scansThisMonth >= limits.maxScansPerMonth) {\n return c.json({ error: `Free plan is limited to ${limits.maxScansPerMonth} receipt scans per month. Upgrade to Pro for unlimited scans.`, code: \"LIMIT_REACHED\" }, 402);\n }\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(\"GEMINI_API_KEY\");\n if (!apiKey) return c.json({ error: \"Server not configured for receipt scanning.\" }, 500);\n try {\n const res = await fetch(\n `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent`,\n {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"x-goog-api-key\": apiKey,\n },\n body: JSON.stringify({\n contents: [{\n parts: [\n { inline_data: { mime_type: mediaType || \"image/jpeg\", data: imageBase64 } },\n {\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 generationConfig: { responseMimeType: \"application/json\" },\n }),\n },\n );\n const data = await res.json();\n if (data.error) throw new Error(data.error.message || \"Gemini API error\");\n const text = data.candidates?.[0]?.content?.parts?.[0]?.text?.trim() || \"\";\n const cleaned = text.replace(/```json\\n?|```\\n?/g, \"\").trim();\n const parsed = JSON.parse(cleaned);\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 await recordScan(user.id);\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\n// ---- billing (Stripe) ----\napi.post(\"/billing/checkout\", requireAuth, async (c) => {\n const user = c.get(\"user\") as any;\n if (!stripe) return c.json({ error: \"Billing is not configured yet.\" }, 500);\n const priceId = Deno.env.get(\"STRIPE_PRICE_ID\");\n if (!priceId) return c.json({ error: \"Billing is not configured yet.\" }, 500);\n\n const row = (await sqlite.execute({ sql: \"SELECT email, stripe_customer_id FROM users WHERE id = ?\", args: [user.id] })).rows[0] as any;\n let customerId = row?.stripe_customer_id;\n if (!customerId) {\n const customer = await stripe.customers.create({ email: row?.email || undefined, metadata: { userId: user.id } });\n customerId = customer.id;\n await sqlite.execute({ sql: \"UPDATE users SET stripe_customer_id = ? WHERE id = ?\", args: [customerId, user.id] });\n }\n\n const origin = new URL(c.req.url).origin;\n const session = await stripe.checkout.sessions.create({\n customer: customerId,\n mode: \"subscription\",\n line_items: [{ price: priceId, quantity: 1 }],\n client_reference_id: user.id,\n metadata: { userId: user.id },\n success_url: `${origin}/?upgraded=1`,\n cancel_url: `${origin}/`,\n allow_promotion_codes: true,\n });\n return c.json({ url: session.url });\n});\n\napi.post(\"/billing/portal\", requireAuth, async (c) => {\n const user = c.get(\"user\") as any;\n if (!stripe) return c.json({ error: \"Billing is not configured yet.\" }, 500);\n const row = (await sqlite.execute({ sql: \"SELECT stripe_customer_id FROM users WHERE id = ?\", args: [user.id] })).rows[0] as any;\n if (!row?.stripe_customer_id) return c.json({ error: \"No billing account found.\" }, 400);\n const origin = new URL(c.req.url).origin;\n const session = await stripe.billingPortal.sessions.create({\n customer: row.stripe_customer_id,\n return_url: `${origin}/`,\n });\n return c.json({ url: session.url });\n});\n\n// Stripe webhook — no auth, verified via signature instead. Keep this route's\n// body untouched (no JSON-parsing middleware) since signature checking needs the raw text.\napi.post(\"/webhooks/stripe\", async (c) => {\n if (!stripe) return c.json({ error: \"Billing is not configured.\" }, 500);\n const webhookSecret = Deno.env.get(\"STRIPE_WEBHOOK_SECRET\");\n const signature = c.req.header(\"Stripe-Signature\");\n const body = await c.req.text();\n let event: any;\n try {\n event = await stripe.webhooks.constructEventAsync(body, signature!, webhookSecret!);\n } catch (err: any) {\n return c.json({ error: `Webhook signature verification failed: ${err.message}` }, 400);\n }\n\n try {\n switch (event.type) {\n case \"checkout.session.completed\": {\n const session = event.data.object;\n const userId = session.client_reference_id || session.metadata?.userId;\n if (userId) {\n await sqlite.execute({\n sql: \"UPDATE users SET plan = 'pro', stripe_subscription_id = ? WHERE id = ?\",\n args: [session.subscription, userId],\n });\n }\n break;\n }\n case \"customer.subscription.updated\":\n case \"customer.subscription.deleted\": {\n const sub = event.data.object;\n const isActive = sub.status === \"active\" || sub.status === \"trialing\";\n await sqlite.execute({\n sql: \"UPDATE users SET plan = ? WHERE stripe_customer_id = ?\",\n args: [isActive ? \"pro\" : \"free\", sub.customer],\n });\n break;\n }\n }\n } catch (err) {\n // Don't fail the webhook (Stripe will retry pointlessly) — log and move on.\n console.error(\"Stripe webhook handling error\", err);\n }\n\n return c.json({ received: true });\n});\n\nexport default api;\n",[],[154,197],"41f64663-09fd-4c41-9de5-b41c46d04e41","db.ts","9ac2f920-9c80-11f1-9834-1607ee4eb77e",44,["D",1787404269741],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport bcrypt from \"npm:bcryptjs\";\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 email TEXT UNIQUE,\n password_hash TEXT NOT NULL,\n plan TEXT NOT NULL DEFAULT 'free',\n stripe_customer_id TEXT,\n stripe_subscription_id TEXT,\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 expires_at INTEGER NOT NULL\n )`,\n `CREATE TABLE IF NOT EXISTS password_resets (\n token TEXT PRIMARY KEY,\n user_id TEXT NOT NULL,\n created_at INTEGER NOT NULL,\n expires_at INTEGER NOT NULL,\n used INTEGER NOT NULL DEFAULT 0\n )`,\n `CREATE TABLE IF NOT EXISTS receipt_scans (\n id TEXT PRIMARY KEY,\n user_id TEXT NOT NULL,\n created_at INTEGER NOT NULL\n )`,\n ]);\n // migrate older tables that predate these columns\n try {\n await sqlite.execute(\"ALTER TABLE sessions ADD COLUMN expires_at INTEGER NOT NULL DEFAULT 0\");\n } catch { /* column already exists */ }\n try {\n await sqlite.execute(\"ALTER TABLE users ADD COLUMN email TEXT\");\n } catch { /* column already exists */ }\n try {\n await sqlite.execute(\"ALTER TABLE users ADD COLUMN plan TEXT NOT NULL DEFAULT 'free'\");\n } catch { /* column already exists */ }\n try {\n await sqlite.execute(\"ALTER TABLE users ADD COLUMN stripe_customer_id TEXT\");\n } catch { /* column already exists */ }\n try {\n await sqlite.execute(\"ALTER TABLE users ADD COLUMN stripe_subscription_id TEXT\");\n } catch { /* column already exists */ }\n}\n\n// ---- plan limits ----\nexport const PLAN_LIMITS = {\n free: { maxGroups: 2, maxScansPerMonth: 10 },\n pro: { maxGroups: Infinity, maxScansPerMonth: Infinity },\n} as const;\n\nexport async function getUserPlan(userId: string): Promise<\"free\" | \"pro\"> {\n const res = await sqlite.execute({ sql: \"SELECT plan FROM users WHERE id = ?\", args: [userId] });\n return (res.rows[0] as any)?.plan === \"pro\" ? \"pro\" : \"free\";\n}\n\nexport async function countUserGroups(userId: string): Promise {\n const res = await sqlite.execute({\n sql: \"SELECT COUNT(*) as n FROM group_members WHERE user_id = ?\",\n args: [userId],\n });\n return Number((res.rows[0] as any)?.n || 0);\n}\n\nexport async function countScansThisMonth(userId: string): Promise {\n const now = new Date();\n const monthStart = Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), 1);\n const res = await sqlite.execute({\n sql: \"SELECT COUNT(*) as n FROM receipt_scans WHERE user_id = ? AND created_at >= ?\",\n args: [userId, monthStart],\n });\n return Number((res.rows[0] as any)?.n || 0);\n}\n\nexport async function recordScan(userId: string): Promise {\n await sqlite.execute({\n sql: \"INSERT INTO receipt_scans (id, user_id, created_at) VALUES (?, ?, ?)\",\n args: [uid(), userId, Date.now()],\n });\n}\n\nexport const uid = () => crypto.randomUUID();\n\nconst SESSION_TTL_MS = 30 * 24 * 60 * 60 * 1000; // 30 days\n\nexport async function hashPassword(password: string): Promise {\n return await bcrypt.hash(password, 10);\n}\n\nexport async function verifyPassword(password: string, hash: string): Promise {\n // Support old unsalted SHA-256 hashes (64 hex chars) from before the bcrypt migration,\n // so existing accounts aren't locked out; they get upgraded to bcrypt on next login.\n if (/^[a-f0-9]{64}$/i.test(hash)) {\n const data = new TextEncoder().encode(password);\n const digest = await crypto.subtle.digest(\"SHA-256\", data);\n const legacyHash = Array.from(new Uint8Array(digest)).map(b => b.toString(16).padStart(2, \"0\")).join(\"\");\n return legacyHash === hash;\n }\n return await bcrypt.compare(password, hash);\n}\n\nexport async function createSession(userId: string): Promise {\n const token = uid();\n const now = Date.now();\n await sqlite.execute({\n sql: \"INSERT INTO sessions (token, user_id, created_at, expires_at) VALUES (?, ?, ?, ?)\",\n args: [token, userId, now, now + SESSION_TTL_MS],\n });\n return token;\n}\n\nexport async function getValidSession(token: string) {\n const res = await sqlite.execute({\n sql: \"SELECT user_id, expires_at FROM sessions WHERE token = ?\",\n args: [token],\n });\n if (res.rows.length === 0) return null;\n const row = res.rows[0] as any;\n if (row.expires_at && row.expires_at < Date.now()) {\n await sqlite.execute({ sql: \"DELETE FROM sessions WHERE token = ?\", args: [token] });\n return null;\n }\n return row.user_id as string;\n}\n\nconst RESET_TTL_MS = 60 * 60 * 1000; // 1 hour\n\nexport function isValidEmail(email: string): boolean {\n return /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email);\n}\n\nexport async function createPasswordReset(userId: string): Promise {\n const token = uid();\n const now = Date.now();\n await sqlite.execute({\n sql: \"INSERT INTO password_resets (token, user_id, created_at, expires_at, used) VALUES (?, ?, ?, ?, 0)\",\n args: [token, userId, now, now + RESET_TTL_MS],\n });\n return token;\n}\n\nexport async function consumePasswordReset(token: string): Promise {\n const res = await sqlite.execute({\n sql: \"SELECT user_id, expires_at, used FROM password_resets WHERE token = ?\",\n args: [token],\n });\n if (res.rows.length === 0) return null;\n const row = res.rows[0] as any;\n if (row.used || row.expires_at < Date.now()) return null;\n await sqlite.execute({ sql: \"UPDATE password_resets SET used = 1 WHERE token = ?\", args: [token] });\n return row.user_id as string;\n}\n",[],[154,205],["D",1787221159123],[170,171],[154],["D",1787221101901],["D",1789479081816],{"_101":100,"_109":105},{"_101":100,"_102":103,"_104":105,"_18":56,"_106":107,"_108":25},{"_13":90,"_32":91,"_44":43,"_92":45,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":46,"_99":100},"ctx",{"_83":-5,"_129":253,"_254":255,"_256":257,"_258":25,"_259":25,"_260":25,"_261":60,"_262":-5,"_263":-7,"_264":-7,"_265":64,"_266":25,"_267":25,"_268":-5,"_269":25,"_270":25,"_271":25,"_272":-5},"ENV",{"_224":225,"_226":227,"_228":91,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252},"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 · v49