[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_110":111,"_112":113},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","fhaddad","name","splittab","path","frontend/App.tsx","project",{"_22":48,"_11":12,"_35":49,"_50":-5,"_51":44,"_52":53,"_54":53,"_55":56,"_57":-5,"_58":59,"_60":61,"_62":34,"_63":-5,"_64":-5,"_65":66,"_67":68,"_69":70,"_71":72,"_73":74,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":86,"_87":88,"_89":90,"_91":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/fhaddad/splittab/code/frontend/App.tsx","extension","id","23d25096-d37d-4f3e-a1a5-409cd5432fed","App.tsx","fileId","f60712bc-9c80-11f1-bfba-1607ee4eb77e","parentId","465745f8-01f3-4c3d-a8d2-8f90d74bd38c","branchId","c697c2f1-8952-43c1-bb72-ac0b37be5f2a","branchVersion",50,"latest",true,"createdAt",["D",1787404315466],"version",17,"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 if (params.get(\"upgraded\")) { window.history.replaceState({}, \"\", window.location.pathname); }\n }, []);\n\n useEffect(() => {\n (async () => {\n const token = localStorage.getItem(TOKEN_KEY);\n if (token) {\n try {\n const { user, usage } = await api(\"/me\");\n setSess(user);\n setUsage(usage);\n await loadGroups();\n setView(\"home\");\n } catch {\n localStorage.removeItem(TOKEN_KEY);\n }\n }\n setBooting(false);\n })();\n }, []);\n\n const loadGroups = async () => {\n try {\n const { groups } = await api(\"/groups\");\n setGroups(groups);\n return groups;\n } catch { return []; }\n };\n\n const doAuth = async () => {\n setAErr(\"\");\n const { username, email, password } = aForm;\n if (aMode === \"signup\" && (!username.trim() || !email.trim() || !password.trim())) { setAErr(\"Fill in all fields.\"); return; }\n if (aMode === \"login\" && (!username.trim() || !password.trim())) { setAErr(\"Fill in all fields.\"); return; }\n setABusy(true);\n try {\n const body: any = aMode === \"signup\" ? { username: username.trim(), email: email.trim(), password } : { username: username.trim(), password };\n const { token, user } = await api(aMode === \"signup\" ? \"/signup\" : \"/login\", { method: \"POST\", body });\n localStorage.setItem(TOKEN_KEY, token);\n setSess(user);\n const { usage } = await api(\"/me\");\n setUsage(usage);\n await loadGroups();\n setView(\"home\");\n } catch (e: any) {\n setAErr(e.message || \"Something went wrong, try again.\");\n }\n setABusy(false);\n };\n\n const doForgotPassword = async () => {\n setAErr(\"\"); setAMsg(\"\");\n if (!aForm.email.trim()) { setAErr(\"Enter your email.\"); return; }\n setABusy(true);\n try {\n await api(\"/forgot-password\", { method: \"POST\", body: { email: aForm.email.trim() } });\n setAMsg(\"If that email is registered, a reset link is on its way.\");\n } catch (e: any) {\n setAErr(e.message || \"Something went wrong, try again.\");\n }\n setABusy(false);\n };\n\n const doResetPassword = async () => {\n setAErr(\"\"); setAMsg(\"\");\n if (!newPassword.trim()) { setAErr(\"Enter a new password.\"); return; }\n setABusy(true);\n try {\n await api(\"/reset-password\", { method: \"POST\", body: { token: resetToken, password: newPassword } });\n setAMsg(\"Password updated — you can log in now.\");\n setAMode(\"login\");\n window.history.replaceState({}, \"\", window.location.pathname);\n } catch (e: any) {\n setAErr(e.message || \"Something went wrong, try again.\");\n }\n setABusy(false);\n };\n\n const doLogout = async () => {\n try { await api(\"/logout\", { method: \"POST\" }); } catch {}\n localStorage.removeItem(TOKEN_KEY);\n setSess(null); setGroups([]); setGrp(null); setView(\"auth\");\n };\n\n const doCreateGroup = async () => {\n if (!newGrp.name.trim()) return;\n try {\n const { group } = await api(\"/groups\", { method: \"POST\", body: newGrp });\n setGroups((p) => [...p, group]);\n setShowCreate(false); setNewGrp({ name: \"\", currency: \"€\" });\n const { usage } = await api(\"/me\"); setUsage(usage);\n } catch (e: any) {\n if (e.code === \"LIMIT_REACHED\") { if (confirm(`${e.message}\\n\\nGo to upgrade page now?`)) doUpgrade(); }\n else alert(e.message);\n }\n };\n\n const doJoinGroup = async () => {\n const code = joinCode.trim().toUpperCase();\n if (!code) return;\n try {\n const { group } = await api(\"/groups/join\", { method: \"POST\", body: { code } });\n setGroups((p) => [...p, group]);\n setShowJoin(false); setJoinCode(\"\");\n const { usage } = await api(\"/me\"); setUsage(usage);\n } catch (e: any) {\n if (e.code === \"LIMIT_REACHED\") { if (confirm(`${e.message}\\n\\nGo to upgrade page now?`)) doUpgrade(); }\n else alert(e.message);\n }\n };\n\n const doUpgrade = async () => {\n try {\n const { url } = await api(\"/billing/checkout\", { method: \"POST\" });\n window.location.href = url;\n } catch (e: any) { alert(e.message); }\n };\n\n const doManageBilling = async () => {\n try {\n const { url } = await api(\"/billing/portal\", { method: \"POST\" });\n window.location.href = url;\n } catch (e: any) { alert(e.message); }\n };\n\n const openGroup = async (g: any) => {\n try {\n const { group } = await api(`/groups/${g.id}`);\n setGrp(group);\n } catch { setGrp(g); }\n setTab(\"expenses\"); setView(\"group\");\n };\n\n const refreshGroup = async (groupId: string) => {\n const { group } = await api(`/groups/${groupId}`);\n setGrp(group);\n setGroups((p) => p.map((g) => (g.id === group.id ? group : g)));\n };\n\n const startExpense = () => {\n setEStep(1); setEInfo({ title: \"\", paidBy: sess.id });\n setEItems([]); setEAssign({}); setEErr(\"\");\n setMItem({ name: \"\", price: \"\" }); setView(\"add-expense\");\n };\n\n const scanReceipt = async (file: File) => {\n if (!file.type.startsWith(\"image/\")) { setEErr(\"Upload an image file.\"); return; }\n setEScan(true); setEErr(\"\");\n const reader = new FileReader();\n reader.onload = async (e: any) => {\n const base64 = e.target.result.split(\",\")[1];\n try {\n const { items } = await api(\"/scan-receipt\", {\n method: \"POST\",\n body: { imageBase64: base64, mediaType: file.type },\n });\n const newItems = items.map((it: any, i: number) => ({\n id: `item-${Date.now()}-${i}`, name: it.name, price: it.price,\n }));\n const init: any = {};\n newItems.forEach((it: any) => { init[it.id] = grp.members.map((m: any) => m.id); });\n setEItems((p) => [...p, ...newItems]);\n setEAssign((p: any) => ({ ...p, ...init }));\n } catch (err: any) {\n if (err.code === \"LIMIT_REACHED\") {\n setEErr(err.message);\n } else {\n setEErr(err.message || \"Could not read the receipt. Add items manually.\");\n }\n }\n setEScan(false);\n try { const { usage } = await api(\"/me\"); setUsage(usage); } catch {}\n };\n reader.readAsDataURL(file);\n };\n\n const addManualItem = () => {\n const name = mItem.name.trim();\n const price = Math.round(parseFloat(mItem.price) * 100) / 100;\n if (!name || isNaN(price)) return;\n const id = `item-${Date.now()}`;\n setEItems((p) => [...p, { id, name, price }]);\n setEAssign((p: any) => ({ ...p, [id]: grp.members.map((m: any) => m.id) }));\n setMItem({ name: \"\", price: \"\" });\n };\n\n const toggleAssign = (itemId: string, memberId: string) => {\n setEAssign((p: any) => {\n const cur = p[itemId] || [];\n return { ...p, [itemId]: cur.includes(memberId) ? cur.filter((x: string) => x !== memberId) : [...cur, memberId] };\n });\n };\n\n const saveExpense = async () => {\n try {\n await api(`/groups/${grp.id}/expenses`, {\n method: \"POST\",\n body: {\n title: eInfo.title, paidBy: eInfo.paidBy,\n items: eItems.map((it) => ({ ...it, assigned: eAssign[it.id] || [] })),\n },\n });\n await refreshGroup(grp.id);\n setView(\"group\");\n } catch (e: any) { alert(e.message); }\n };\n\n const deleteExpense = async (expId: string) => {\n if (!confirm(\"Delete this expense?\")) return;\n try {\n await api(`/groups/${grp.id}/expenses/${expId}`, { method: \"DELETE\" });\n await refreshGroup(grp.id);\n } catch (e: any) { alert(e.message); }\n };\n\n const getMember = (id: string) => grp?.members?.find((m: any) => m.id === id);\n const getMemberIdx = (id: string) => { const i = grp?.members?.findIndex((m: any) => m.id === id); return i >= 0 ? i : 0; };\n const ccy = grp?.currency || \"€\";\n const fmtC = (n: number) => `${ccy}${Math.abs(n).toFixed(2)}`;\n const eTotal = eItems.reduce((s, i) => s + i.price, 0);\n\n const copyCode = async (code: string) => {\n try { await navigator.clipboard.writeText(code); } catch {}\n setCopied(true); setTimeout(() => setCopied(false), 2200);\n };\n\n const btnPrimary = \"bg-orange-600 hover:bg-orange-700 text-white border-none disabled:opacity-40 disabled:cursor-not-allowed\";\n const cardBase = \"bg-white border border-gray-200 rounded-xl\";\n const inputBase = \"w-full box-border border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-300\";\n\n if (booting) {\n return (\n

\n \n

\n );\n }\n\n if (view === \"auth\") {\n if (aMode === \"forgot\") {\n return (\n
\n
\n
\n \n
\n
Reset password
\n
We'll email you a reset link
\n
\n
\n setAForm((p) => ({ ...p, email: e.target.value }))}\n onKeyDown={(e) => e.key === \"Enter\" && doForgotPassword()} className={inputBase} autoFocus />\n {aErr &&
{aErr}
}\n {aMsg &&
{aMsg}
}\n \n \n
\n
\n );\n }\n\n if (aMode === \"reset\") {\n return (\n
\n
\n
\n \n
\n
Set new password
\n
Choose a new password for your account
\n
\n
\n setNewPassword(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && doResetPassword()} className={inputBase} autoFocus />\n {aErr &&
{aErr}
}\n {aMsg &&
{aMsg}
}\n \n
\n
\n );\n }\n\n return (\n
\n
\n
\n \n
\n
SplitTab
\n
Split bills smarter, settle trips faster
\n
\n
\n
\n {[\"login\", \"signup\"].map((m) => (\n \n ))}\n
\n
\n setAForm((p) => ({ ...p, username: e.target.value }))}\n onKeyDown={(e) => e.key === \"Enter\" && doAuth()} className={inputBase} autoFocus />\n {aMode === \"signup\" && (\n setAForm((p) => ({ ...p, email: e.target.value }))}\n onKeyDown={(e) => e.key === \"Enter\" && doAuth()} className={inputBase} />\n )}\n setAForm((p) => ({ ...p, password: e.target.value }))}\n onKeyDown={(e) => e.key === \"Enter\" && doAuth()} className={inputBase} />\n
\n {aErr &&
{aErr}
}\n \n {aMode === \"login\" && (\n \n )}\n {aMode === \"signup\" && (\n
\n By creating an account you agree to our Terms and Privacy Policy.\n
\n )}\n
\n
\n view source\n
\n
\n );\n }\n\n if (view === \"home\") {\n return (\n
\n
\n
\n
Your groups
\n
Hi, {sess.username}
\n
\n \n
\n\n {usage && usage.maxGroups !== null && (\n
\n {usage.groups}/{usage.maxGroups} groups · {usage.scansThisMonth}/{usage.maxScansPerMonth} scans this month\n \n
\n )}\n {usage && usage.maxGroups === null && (\n
\n SplitTab Pro — unlimited groups & scans\n \n
\n )}\n\n {groups.length === 0 && !showCreate && !showJoin && (\n
\n \n
No groups yet
\n
Create one for your trip, or join with an invite code
\n
\n )}\n\n {groups.map((g, i) => {\n const spent = (g.expenses || []).reduce((s: number, e: any) => s + e.totalAmount, 0);\n const c = clr(i);\n return (\n
openGroup(g)}\n className={`${cardBase} px-4 py-3.5 mb-2 cursor-pointer flex items-center gap-3 hover:border-gray-300`}>\n
\n \n
\n
\n
{g.name}
\n
\n {g.members?.length || 1} member{(g.members?.length || 1) !== 1 ? \"s\" : \"\"} · {g.expenses?.length || 0} expense{(g.expenses?.length || 0) !== 1 ? \"s\" : \"\"}\n
\n
\n
\n
{g.currency}{spent.toFixed(2)}
\n
total spent
\n
\n
\n );\n })}\n\n {showCreate && (\n
\n
New group
\n setNewGrp((p) => ({ ...p, name: e.target.value }))}\n onKeyDown={(e) => e.key === \"Enter\" && doCreateGroup()} className={`${inputBase} mb-2`} autoFocus />\n
\n {[\"€\", \"$\", \"£\", \"¥\", \"kr\"].map((c) => (\n \n ))}\n
\n
\n \n \n
\n
\n )}\n\n {showJoin && (\n
\n
Join with invite code
\n
\n setJoinCode(e.target.value.toUpperCase())}\n onKeyDown={(e) => e.key === \"Enter\" && doJoinGroup()}\n maxLength={6} className={`flex-1 font-mono tracking-widest uppercase ${inputBase}`} autoFocus />\n \n \n
\n
\n )}\n\n {!showCreate && !showJoin && (\n
0 ? \"mt-4\" : \"\"}`}>\n \n \n
\n )}\n
\n );\n }\n\n if (view === \"group\" && grp) {\n const { txs, bal } = computeSettlement(grp.expenses || [], grp.members || []);\n const myBal = Math.round((bal[sess.id] || 0) * 100) / 100;\n\n return (\n
\n
\n \n
{grp.name}
\n \n
\n\n {(grp.expenses || []).length > 0 && (\n
0 ? \"bg-emerald-50 border-emerald-400\" : myBal < 0 ? \"bg-orange-50 border-orange-400\" : \"bg-gray-50 border-gray-200\"}`}>\n Your balance\n 0 ? \"text-emerald-700\" : myBal < 0 ? \"text-orange-800\" : \"text-gray-400\"}`}>\n {myBal > 0 ? `+${fmtC(myBal)} — you are owed` : myBal < 0 ? `-${fmtC(myBal)} — you owe` : \"All even ✓\"}\n \n
\n )}\n\n
\n {[\n { key: \"expenses\", icon: \"ti-list\", label: `Expenses${(grp.expenses?.length || 0) > 0 ? ` (${grp.expenses.length})` : \"\"}` },\n { key: \"settle\", icon: \"ti-arrows-exchange\", label: `Settle up${txs.length > 0 ? ` (${txs.length})` : \"\"}` },\n { key: \"members\", icon: \"ti-users\", label: `Members (${grp.members?.length || 1})` },\n ].map((t) => (\n \n ))}\n
\n\n {tab === \"expenses\" && (\n <>\n \n {(grp.expenses || []).length === 0 ? (\n
\n \n
No expenses yet — add the first one!
\n
\n ) : (\n
\n {[...(grp.expenses || [])].reverse().map((exp: any) => {\n const payer = getMember(exp.paidBy);\n const c = clr(getMemberIdx(exp.paidBy));\n return (\n
\n
\n
{exp.title}
\n
\n \n {payer?.username || \"?\"}\n \n paid · {dateFmt(exp.date)}\n
\n
\n
\n
{fmtC(exp.totalAmount)}
\n
{exp.items?.length || 0} item{(exp.items?.length || 0) !== 1 ? \"s\" : \"\"}
\n
\n {exp.createdBy === sess.id && (\n \n )}\n
\n );\n })}\n
\n )}\n \n )}\n\n {tab === \"settle\" && (\n <>\n {(grp.expenses || []).length === 0 ? (\n
Add some expenses first to see the settlement.
\n ) : (\n <>\n
\n
Net balances
\n {(grp.members || []).map((m: any, i: number) => {\n const b = Math.round((bal[m.id] || 0) * 100) / 100;\n const c = clr(i);\n return (\n
\n
\n {ini(m.username)}\n
\n \n {m.username}{m.id === sess.id ? \" (you)\" : \"\"}\n \n 0 ? \"text-emerald-700\" : b < 0 ? \"text-orange-800\" : \"text-gray-400\"}`}>\n {b > 0 ? \"+\" : b < 0 ? \"-\" : \"\"}{ccy}{Math.abs(b).toFixed(2)}\n \n
\n );\n })}\n
\n\n {txs.length === 0 ? (\n
\n \n
All settled up! 🎉
\n
Everyone is even
\n
\n ) : (\n <>\n
\n Minimum {txs.length} payment{txs.length !== 1 ? \"s\" : \"\"} to settle everything\n
\n
\n {txs.map((tx, i) => {\n const fromM = getMember(tx.from);\n const toM = getMember(tx.to);\n const fromC = clr(getMemberIdx(tx.from));\n const toC = clr(getMemberIdx(tx.to));\n const isMyDebt = tx.from === sess.id;\n const isMyCred = tx.to === sess.id;\n return (\n
\n
\n {ini(fromM?.username)}\n
\n
\n {fromM?.username || \"?\"}{isMyDebt ? \" (you)\" : \"\"} pays {toM?.username || \"?\"}{isMyCred ? \" (you)\" : \"\"}\n
\n
\n {ini(toM?.username)}\n
\n \n {fmtC(tx.amount)}\n \n
\n );\n })}\n
\n
Debts are automatically simplified — cross-payments cancel each other out
\n \n )}\n \n )}\n \n )}\n\n {tab === \"members\" && (\n
\n {(grp.members || []).map((m: any, i: number) => {\n const c = clr(i);\n return (\n
\n
\n {ini(m.username)}\n
\n \n {m.username}{m.id === sess.id ? \" (you)\" : \"\"}\n \n {i === 0 && Creator}\n
\n );\n })}\n
\n
Invite others
\n
Share this code — others can join from the home screen
\n
\n \n {grp.inviteCode}\n \n \n
\n
\n
\n )}\n
\n );\n }\n\n if (view === \"add-expense\" && grp) {\n if (eStep === 1) return (\n
\n
\n \n
New expense
\n
\n What was this for?\n setEInfo((p: any) => ({ ...p, title: e.target.value }))}\n className={`${inputBase} mb-5`} autoFocus />\n Who paid?\n
\n {grp.members.map((m: any, i: number) => {\n const c = clr(i);\n const sel = eInfo.paidBy === m.id;\n return (\n \n );\n })}\n
\n \n
\n );\n\n if (eStep === 2) return (\n
\n
\n \n
Add items
\n
\n\n { e.preventDefault(); setDragOver(true); }}\n onDragLeave={() => setDragOver(false)}\n onDrop={(e) => { e.preventDefault(); setDragOver(false); const f = e.dataTransfer.files[0]; if (f) scanReceipt(f); }}\n onClick={() => !eScan && fileRef.current?.click()}\n className={`border-2 border-dashed rounded-xl p-6 text-center mb-4 transition-colors ${\n eScan ? \"cursor-wait\" : \"cursor-pointer\"} ${dragOver ? \"border-orange-500 bg-orange-50\" : \"border-gray-300 bg-gray-50\"}`}>\n {eScan ? (\n <>\n \n
Scanning & translating…
\n
Extracting items from the receipt
\n \n ) : (\n <>\n \n
Upload receipt photo
\n
Auto-extracts items · translates to English if needed
\n \n )}\n
\n { const f = e.target.files?.[0]; if (f) scanReceipt(f); }} />\n\n {eErr && (\n
\n {eErr}\n
\n )}\n\n
\n
\n Items {eItems.length > 0 && ({eItems.length})}\n
\n {eItems.length > 0 && {ccy}{eTotal.toFixed(2)}}\n
\n\n {eItems.length > 0 && (\n
\n {eItems.map((item, i) => (\n
\n setEItems((p) => p.map((it) => (it.id === item.id ? { ...it, name: e.target.value } : it)))}\n className=\"flex-1 border-none px-1 py-0.5 text-sm bg-transparent outline-none\" />\n {ccy}\n setEItems((p) => p.map((it) => (it.id === item.id ? { ...it, price: Math.round(parseFloat(e.target.value) * 100) / 100 || 0 } : it)))}\n className=\"w-14 border-none text-right px-0.5 py-0.5 text-sm font-mono bg-transparent outline-none\" min=\"0\" step=\"0.01\" />\n \n
\n ))}\n
\n )}\n\n
\n setMItem((p) => ({ ...p, name: e.target.value }))}\n onKeyDown={(e) => e.key === \"Enter\" && addManualItem()} className={`flex-1 ${inputBase}`} />\n
\n {ccy}\n setMItem((p) => ({ ...p, price: e.target.value }))}\n onKeyDown={(e) => e.key === \"Enter\" && addManualItem()}\n className=\"w-14 border-none outline-none px-0.5 py-1 text-sm font-mono bg-transparent\" min=\"0\" step=\"0.01\" />\n
\n \n
\n\n \n \n );\n\n if (eStep === 3) return (\n
\n
\n \n
Who had what?
\n
\n
Tap names to toggle. Multiple people can share one item.
\n\n
\n {eItems.map((item) => {\n const assigned = eAssign[item.id] || [];\n const perPerson = assigned.length > 0 ? item.price / assigned.length : 0;\n const allSel = assigned.length === grp.members.length;\n return (\n
\n
\n {item.name}\n
\n {fmtC(item.price)}\n {assigned.length > 1 &&
{fmtC(perPerson)} each
}\n
\n
\n
\n {grp.members.map((m: any, i: number) => {\n const c = clr(i);\n const isOn = assigned.includes(m.id);\n return (\n \n );\n })}\n \n
\n {assigned.length === 0 &&
No one assigned
}\n
\n );\n })}\n
\n\n
\n
This expense: {fmtC(eTotal)} total
\n
\n {grp.members.map((m: any, i: number) => {\n const c = clr(i);\n let share = 0;\n eItems.forEach((it) => { const as = eAssign[it.id] || []; if (as.includes(m.id)) share += it.price / as.length; });\n return (\n
\n
\n {ini(m.username)}\n
\n {m.username}\n {fmtC(share)}\n
\n );\n })}\n
\n
\n\n \n
\n );\n }\n\n return null;\n}\n","deleted",false,"label",[47,24],"frontend","cbe729ca-86bd-485c-9de3-dc5e67c71f71",["D",1787221101901],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Split bills and expenses with groups, receipt scanning","imageUrl","userId","9de9736c-cf5d-4d8f-8c52-9805e5a8bc38","pinnedFileId","b19384da-9c80-11f1-9efb-1607ee4eb77e","pinPreview","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",{"_9":10,"_109":105},"org",{"_9":10,"_102":103,"_104":105,"_58":59,"_106":107,"_108":44},"branch",{"_37":92,"_11":93,"_22":30,"_94":48,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":12,"_101":10},"isOwned",53,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","F Haddad","avatar","https://lh3.googleusercontent.com/a/ACg8ocKWAFvWR5vFVvudBriPaQTEAgSOR2liRWlZCdoiZvdih_zDzE8z=s96-c","tier","free","canRestrictVals","profileImageUrl","ctx",{"_85":-5,"_143":144,"_145":146,"_147":148,"_149":44,"_150":44,"_151":44,"_152":34,"_153":-5,"_154":-7,"_155":-7,"_156":66,"_157":44,"_158":44,"_159":-5,"_160":44,"_161":44,"_162":44,"_163":-5},"ENV",{"_114":115,"_116":117,"_118":93,"_119":120,"_121":122,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":136,"_137":138,"_139":140,"_141":142},"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","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]