import React, { useEffect, useRef, useState } from "react"; import { callAI } from "call-ai"; import { useFireproof } from "use-fireproof"; import { useVibe, useViewer } from "use-vibes"; import { Badge, Button, Card, Empty, ErrorNote, Eyebrow, Field, Grid, Heading, Icon, IconButton, Input, NumberInput, Row, RowCard, Segmented, Spacer, Stack, Text, } from "@vibes.diy/pouf"; import { Select, Switch } from "@vibes.diy/pouf/interactive"; import { computeSplit, money, stagger } from "./lib/split.js"; const TIPS = [ { value: "15", label: "15%" }, { value: "18", label: "18%" }, { value: "20", label: "20%" }, { value: "25", label: "25%" }, { value: "custom", label: "Custom" }, ]; function readAsDataUrl(file) { return new Promise((resolve, reject) => { const r = new FileReader(); r.onload = () => resolve(r.result); r.onerror = () => reject(r.error); r.readAsDataURL(file); }); } function cleanItems(raw) { const list = Array.isArray(raw?.items) ? raw.items : []; return list .map((i) => ({ name: typeof i?.name === "string" ? i.name.trim() : "", quantity: Number.isFinite(i?.quantity) && i.quantity > 0 ? i.quantity : 1, price: Number.isFinite(i?.price) ? Math.round(i.price * 100) / 100 : NaN, })) .filter((i) => i.name && Number.isFinite(i.price)); } function ItemRow({ item, database, canEdit, canClaim, claimers, mine, onToggle, onDelete }) { const [editing, setEditing] = useState(false); const [name, setName] = useState(item.name); const [qty, setQty] = useState(String(item.quantity ?? 1)); const [price, setPrice] = useState(String(item.price)); async function save() { await database.put({ ...item, name: name.trim() || item.name, quantity: Number(qty) || 1, price: Number(price) || 0 }); setEditing(false); } return ( {item.name}{item.quantity > 1 ? ` x${item.quantity}` : ""} {money(item.price)} {claimers.length ? `Had by ${claimers.join(", ")}` : "Nobody has claimed this yet"} {canClaim && ( )} {canEdit && } {canEdit && } onClick={onDelete} />} {editing && ( {(id, d) => } {(id, d) => } {(id, d) => } )} ); } function BillView({ bill, database }) { const { useLiveQuery } = useFireproof("tabsnap"); const { me, can, ready } = useVibe("tabsnap"); const { HandleInput, ViewerTag } = useViewer(); const { docs } = useLiveQuery("billId", { key: bill._id }); const items = docs.filter((d) => d.type === "item"); const diners = docs.filter((d) => d.type === "diner"); const claims = docs.filter((d) => d.type === "claim"); const fileRef = useRef(null); const [scanning, setScanning] = useState(false); const [msg, setMsg] = useState(""); const [lastScan, setLastScan] = useState(); const [asId, setAsId] = useState(); const [nName, setNName] = useState(""); const [iName, setIName] = useState(""); const [iQty, setIQty] = useState("1"); const [iPrice, setIPrice] = useState(""); const [dName, setDName] = useState(""); const admin = can.edit(bill).ok; const handle = me?.userHandle; const myDiner = diners.find((d) => handle && d.userHandle === handle); const joinDraft = { type: "diner", billId: bill._id, userHandle: handle, name: me?.displayName || handle }; const activeId = asId ?? myDiner?._id ?? diners[0]?._id; const split = computeSplit(bill, items, diners, claims); const tipValue = bill.tipMode === "amount" ? "custom" : String(bill.tipPercent ?? 20); const photo = bill._files?.receipt?.url; const dinerName = (id) => diners.find((d) => d._id === id)?.name ?? "someone"; const patch = (fields) => database.put({ ...bill, ...fields }); const [copied, setCopied] = useState(false); async function copyLink() { const url = new URL(window.location.href); url.searchParams.set("tab", bill._id); try { await navigator.clipboard.writeText(url.toString()); setCopied(true); setTimeout(() => setCopied(false), 2000); } catch { window.prompt("Copy this link", url.toString()); } } async function toggleClaim(item) { if (!activeId) return; const existing = claims.find((c) => c.itemId === item._id && c.dinerId === activeId); if (existing) return database.del(existing._id); const claim = { _id: `claim:${item._id}:${activeId}`, type: "claim", billId: bill._id, itemId: item._id, dinerId: activeId, authorHandle: handle }; if (can.create(claim).ok) await database.put(claim); } async function deleteItem(item) { for (const c of claims.filter((c) => c.itemId === item._id)) await database.del(c._id); await database.del(item._id); } async function addItem(e) { e.preventDefault(); if (!iName.trim() || iPrice === "") return; await database.put({ type: "item", billId: bill._id, name: iName.trim(), quantity: Number(iQty) || 1, price: Number(iPrice) || 0, authorHandle: handle }); setIName(""); setIQty("1"); setIPrice(""); } async function addNamed(e) { e.preventDefault(); if (!dName.trim()) return; await database.put({ type: "diner", billId: bill._id, name: dName.trim(), userHandle: "", paid: false, authorHandle: handle }); setDName(""); } async function join() { await database.put({ _id: `diner:${bill._id}:${handle}`, ...joinDraft, paid: false, authorHandle: handle }); } async function invite(h) { if (!h) return; const member = { _id: `member:${bill._id}:${h}`, type: "member", billId: bill._id, userHandle: h, addedBy: handle }; if (can.create(member).ok) await database.put(member); } async function scan(file) { if (!file) return; setScanning(true); setMsg(""); const previous = bill; try { // The photo stays on the bill even if reading it fails. const withPhoto = { ...bill, _files: { ...(bill._files || {}), receipt: file } }; await database.put(withPhoto); const url = await readAsDataUrl(file); const res = await callAI( [ { type: "text", text: "Read this restaurant receipt. List every line item with its name, quantity, and the total line price as printed. Also give the printed subtotal, tax, and any printed tip or service charge (0 when none)." }, { type: "image_url", image_url: { url } }, ], { schema: { properties: { items: { type: "array", items: { type: "object", properties: { name: { type: "string" }, quantity: { type: "number" }, price: { type: "number" } } } }, subtotal: { type: "number" }, tax: { type: "number" }, tip: { type: "number" }, }, }, } ); const raw = JSON.parse(res); const found = cleanItems(raw); if (found.length === 0) throw new Error("No items could be read. Retry the scan, or add items by hand."); const created = []; for (const it of found) { const doc = { _id: crypto.randomUUID(), type: "item", billId: bill._id, ...it, authorHandle: handle }; await database.put(doc); created.push(doc._id); } const next = { ...withPhoto }; if (Number.isFinite(raw.tax)) next.taxAmount = String(raw.tax); if (Number.isFinite(raw.tip) && raw.tip > 0) { next.tipMode = "amount"; next.tipAmount = String(raw.tip); } if (Number.isFinite(raw.subtotal)) next.receiptSubtotal = raw.subtotal; await database.put(next); setLastScan({ created, previous }); } catch (err) { setMsg(err.reason === "refusal" ? "That photo could not be read. Try another shot." : err.message); } finally { setScanning(false); } } async function undoScan() { for (const id of lastScan.created) await database.del(id); await database.put(lastScan.previous); setLastScan(undefined); } const c = { photo: "w-full rounded-md", warn: "rounded-md bg-muted p-3" }; const options = (admin ? diners : diners.filter((d) => d._id === myDiner?._id)).map((d) => ({ value: d._id, label: d.name })); const matches = bill.receiptSubtotal === undefined || Math.abs(bill.receiptSubtotal - split.subtotal) < 0.02; const CHIP_TONES = ["info", "purple", "up", "warn", "down"]; return ( {bill.restaurant || "This dinner"} {money(split.grand)} {`Items ${money(split.subtotal)} - tax ${money(split.tax)} - tip ${money(split.tip)}`} {split.rows.length > 0 && ( {split.rows.map((r, i) => { const isPayer = bill.payerDinerId === r.diner._id; const label = isPayer ? `${r.diner.name} paid the bill` : `${r.diner.name} owes ${money(r.total)}${r.diner.paid ? " - paid" : ""}`; return {label}; })} {split.unclaimed > 0 && {`Unclaimed ${money(split.unclaimedTotal)}`}} )}

Receipt Snap the receipt {photo && Receipt for this dinner

} {admin ? ( { scan(e.target.files?.[0]); e.target.value = ""; }} /> {lastScan && } ) : ready ? ( Only whoever started this tab can scan the receipt. ) : null} {msg && {msg}} The photo stays on the tab, so you can retry or add missed items by hand.

Details Dinner, tax and tip {admin ? ( <> {(id, d) => patch({ restaurant: v })} />} {(id, d) => patch({ date: v })} />} {(id, d) => patch({ taxAmount: v })} step={0.25} min={0} />} v === "custom" ? patch({ tipMode: "amount", tipAmount: String(split.tip.toFixed(2)) }) : patch({ tipMode: "percent", tipPercent: Number(v) })} /> {bill.tipMode === "amount" && ( {(id, d) => patch({ tipAmount: v })} step={0.5} min={0} />} )} {diners.length > 0 && ( {(id, d) => } )} {ready && handle && !myDiner && can.create(joinDraft).ok && } {items.length === 0 && } {items.map((it, i) => (

x.itemId === it._id).map((x) => dinerName(x.dinerId))} mine={claims.some((x) => x.itemId === it._id && x.dinerId === activeId)} onToggle={() => toggleClaim(it)} onDelete={() => deleteItem(it)} />

))} {admin && ( )}

Settle up Who owes what {(() => { const owing = split.rows.filter((r) => r.diner._id !== bill.payerDinerId); const done = owing.filter((r) => r.diner.paid).length; return owing.length > 0 ? ( {`${done} of ${owing.length} paid back`} {done === owing.length && All settled up} ) : null; })()} {split.rows.length === 0 && } {split.rows.map((r) => { const isPayer = bill.payerDinerId === r.diner._id; return ( {r.diner.name} {isPayer ? money(0) : money(r.total)} {`Items ${money(r.items)} - tax ${money(r.tax)} - tip ${money(r.tip)}`} {isPayer ? `Paid the bill, total share ${money(r.total)}` : `Owes ${dinerName(bill.payerDinerId) === "someone" ? "the payer" : dinerName(bill.payerDinerId)}`} {!isPayer && (admin || (handle && r.diner.userHandle === handle)) && ( database.put({ ...r.diner, paid: v, paidAt: v ? new Date().toISOString() : "" })} /> )} {!isPayer && r.diner.paid && Paid back} ); })} {split.unclaimed > 0 && (

Unclaimed {money(split.unclaimedTotal)} still needs an owner {items.filter((i) => split.unclaimedIds.includes(i._id)).map((i) => i.name).join(", ")}

)} {`Bill total ${money(split.grand)}`} {split.balanced && matches ? "Totals match" : "Check the totals"}

The table Who is dining {diners.map((d) => {d.name})} {admin && ( <> {ready && can.create({ type: "member", billId: bill._id, userHandle: "x", addedBy: handle }).ok && ( {() => } )} )} Invited friends open it on their phone, tap what they had and mark when they've paid you back. {!admin && bill.creatorHandle && Started by}

); } export default function App() { const { database, useLiveQuery } = useFireproof("tabsnap"); const { me, can, ready } = useVibe("tabsnap"); const { requestLogin, isViewerPending, ViewerTag } = useViewer(); const { docs: bills } = useLiveQuery("type", { key: "bill" }); const [pickedId, setPickedId] = useState(() => { try { return new URLSearchParams(window.location.search).get("tab") || undefined; } catch { return undefined; } }); const ensured = useRef(false); const ownId = me?.userHandle ? `default-${me.userHandle}` : undefined; // The person's own tab is in place on arrival. useEffect(() => { if (!ready || !ownId || ensured.current) return; ensured.current = true; if (bills.some((b) => b._id === ownId)) return; const bill = { _id: ownId, type: "bill", creatorHandle: me.userHandle, restaurant: "Tonight's dinner", date: new Date().toISOString().slice(0, 10), taxAmount: "0", tipMode: "percent", tipPercent: 20, payerDinerId: `diner:${ownId}:${me.userHandle}` }; if (!can.create(bill).ok) { ensured.current = false; return; } (async () => { await database.put(bill); await database.put({ _id: `diner:${ownId}:${me.userHandle}`, type: "diner", billId: ownId, userHandle: me.userHandle, name: me.displayName || me.userHandle, paid: false, authorHandle: me.userHandle }); })(); }, [ready, ownId, bills, can, database, me]); const bill = bills.find((b) => b._id === pickedId) ?? bills.find((b) => b._id === ownId) ?? bills[0]; const c = { page: "min-h-screen bg-background text-foreground font-sans p-6", wrap: "mx-auto max-w-5xl" }; return (

{!isViewerPending && !me && ( Sign in to start a tab for your dinner and invite the table. )}

Your tabs Dinners {bills.length === 0 && } {bills.map((b, i) => (

setPickedId(b._id)}> {b.restaurant || "Untitled dinner"} {b.date}{b.creatorHandle !== me?.userHandle && }

))}

{bill && (

)}

); }