Paid by

{memOf(group, payerId).name}

{cur}{eff.amount.toFixed(2)}

Owes

{owers.length === 0 ? just {memOf(group, payerId).name} : owers.map(id => ( {memOf(group, id).name} {cur}{Number(eff.split[id] || 0).toFixed(2)} ))}

); } // trust badge — reflects whether the entry's signer has a verified key function TrustDot({ verified, size = 16 }) { if (verified) return ( ); return ( ); } // deterministic safety code (Signal-style) so a member's code is stable across views const SAFE_WORDS = ['anchor', 'maple', 'cobalt', 'otter', 'velvet', 'ember', 'harbor', 'cedar', 'quartz', 'meadow', 'falcon', 'indigo', 'pebble', 'willow', 'garnet', 'sable']; function pubKeyHex(seed) { let h = 2166136261 >>> 0; for (let i = 0; i < seed.length; i++) { h ^= seed.charCodeAt(i); h = Math.imul(h, 16777619) >>> 0; } let out = ''; for (let i = 0; i < 16; i++) { h ^= h << 13; h >>>= 0; h ^= h >>> 17; h ^= h << 5; h >>>= 0; out += (h & 0xff).toString(16).padStart(2, '0'); } return (out.match(/.{1,4}/g) || []).join(' '); } function safetyCode(seedStr) { let h = 2166136261 >>> 0; for (let i = 0; i < seedStr.length; i++) { h ^= seedStr.charCodeAt(i); h = Math.imul(h, 16777619) >>> 0; } const out = []; for (let i = 0; i < 6; i++) { h ^= h << 13; h >>>= 0; h ^= h >>> 17; h ^= h << 5; h >>>= 0; const w = SAFE_WORDS[(h >>> 3) % SAFE_WORDS.length]; const n = (h & 0xff).toString(16).padStart(2, '0'); out.push([n, w]); } return out; } // home approval tile — your confirmation checkbox + the value that matters to you function RecentRow({ group, E, cur, onOpen, onToggle }) { const eff = effectiveEntry(group, E); const settle = E.type === 'settle'; const mineReq = requiredApprovers(E, group).includes(ME); const confirmed = !!(E.approvals || {})[ME]; const disputed = E.dispute && E.dispute.status === 'open'; const sl = stakeLine(group, E, cur); const title = settle ? `${memOf(group, eff.from).name} → ${memOf(group, eff.to).name}` : `${catEmoji(eff.category)} ${eff.desc || 'Untitled'}`; const accent = disputed ? C.red : (mineReq && !confirmed) ? C.orange : C.line; return (

{mineReq && !confirmed ? : }

{title} {disputed && disputed}

{group.emoji} {group.name} · {shortDate(E.date)}

{sl ?

{sl[0].charAt(0).toUpperCase() + sl[0].slice(1)}

{memOf(group, settle ? eff.from : eff.paidBy).name} paid {cur}{eff.amount.toFixed(2)}

} {mineReq && !confirmed &&

awaiting you

}

); } // standardized expense row/card — matches the Totals "who paid & shares" presentation function ExpenseCard({ group, E, cur, onClick, showGroup, hideWaiting, stakeOnly }) { const eff = effectiveEntry(group, E); const settle = E.type === 'settle'; const sl = stakeOnly ? stakeLine(group, E, cur) : null; const a = approvalOf(E, group); const ap = E.approvals || {}; const pendingIds = a.req.filter(id => !ap[id]); const disputed = E.dispute && E.dispute.status === 'open'; const accent = eff.voided ? C.faint : disputed ? C.red : a.done ? C.green : C.orange; const payer = settle ? memOf(group, eff.from) : memOf(group, eff.paidBy); const rec = recurringInfo(group, eff); return (

{settle ? `${payer.name} → ${memOf(group, eff.to).name}` : `${catEmoji(eff.category)} ${eff.desc || 'Untitled'}`} {showGroup && · {group.emoji}} {eff.amended && edited} {disputed && disputed} {payer.name} paid {cur}{eff.amount.toFixed(2)} {E.by !== ME && }

{shortDate(E.date)} {rec && {rec.freq} · next {shortDate(rec.next)}}

{!hideWaiting && !eff.voided && !a.done && (

waiting {pendingIds.slice(0, 3).map((id, i) => )}

)} {stakeOnly && sl && (

{sl[0].charAt(0).toUpperCase() + sl[0].slice(1)}

)} {!settle && !stakeOnly && }

); } // ── App shell + routing ─────────────────────────────────────── function App() { const [events, setEvents] = useState(() => { const ev = load(); const due = materializeDue(ev, Date.now()); return due.length ? [...ev, ...due] : ev; }); const [view, setView] = useState({ name: 'home' }); useEffect(() => { localStorage.setItem(window.EKEY, JSON.stringify({ events })); }, [events]); const db = useMemo(() => window.project(events), [events]); // ── sync wiring (T2) ────────────────────────────────────────── // Inbound merge: peer events arrive via the channel and are appended to the // SAME log, deduped by id so project() stays the single source of truth. const eventIdsRef = useRef(null); if (eventIdsRef.current === null) eventIdsRef.current = new Set(events.map(e => e.id)); const eventsRef = useRef(events); useEffect(() => { eventsRef.current = events; }, [events]); useEffect(() => { const sync = window.TallyGroupSync; if (!window.TALLY_SYNC_ENABLED || !sync) return; sync.attach({ hasEvent: (id) => eventIdsRef.current.has(id), getEvents: () => eventsRef.current, addEvent: (tallyEvent) => setEvents(es => { if (eventIdsRef.current.has(tallyEvent.id)) return es; // idempotent eventIdsRef.current.add(tallyEvent.id); return [...es, tallyEvent]; }), }); // DEV: inject local-only test data (fake same-named members + expenses) so the // disambiguation / remove UI can be exercised without creating real accounts. // Usage from the browser console: TALLY_seedTestData() → reload not needed. // Local only — never synced, never hits the backend. window.TALLY_seedTestData = () => { const now = Date.now(); const mk = (type, streamId, data, actor, ts) => ({ id: uid(), seq: 0, ts: ts || now, actor: actor || 'me', type, streamId, data: data || {} }); const batch = []; // Group 1: two "Alex" + one "Sam", with expenses const g1 = 'test_' + uid(); const alex1 = uid(), alex2 = uid(), sam = uid(); batch.push(mk('GroupCreated', g1, { name: 'Test · Same Names', emoji: '🧪' }, 'me', now - 5000)); batch.push(mk('MemberAdded', g1, { memberId: alex1, name: 'Alex', email: 'alex.rivera@gmail.com' }, 'me', now - 4900)); batch.push(mk('MemberAdded', g1, { memberId: alex2, name: 'Alex', email: 'alex.tan@outlook.com' }, 'me', now - 4800)); batch.push(mk('MemberAdded', g1, { memberId: sam, name: 'Sam', email: 'sam@work.io' }, 'me', now - 4700)); batch.push(mk('ExpenseAdded', g1, { expenseId: uid(), desc: 'Dinner', amount: 120, paidBy: alex1, split: { me: 30, [alex1]: 30, [alex2]: 30, [sam]: 30 }, category: 'food' }, 'me', now - 4000)); batch.push(mk('ExpenseAdded', g1, { expenseId: uid(), desc: 'Taxi', amount: 40, paidBy: sam, split: { me: 20, [sam]: 20 }, category: 'transport' }, 'me', now - 3000)); // Group 2: a couple of removable members (no expenses) to test remove const g2 = 'test_' + uid(); const jo = uid(), pat = uid(); batch.push(mk('GroupCreated', g2, { name: 'Test · Removable', emoji: '🧹' }, 'me', now - 2000)); batch.push(mk('MemberAdded', g2, { memberId: jo, name: 'Jo', email: 'jo@x.com' }, 'me', now - 1900)); batch.push(mk('MemberAdded', g2, { memberId: pat, name: 'Pat', email: 'pat@x.com' }, 'me', now - 1800)); batch.push(mk('ExpenseAdded', g2, { expenseId: uid(), desc: 'Snacks', amount: 10, paidBy: 'me', split: { me: 5, [jo]: 5 }, category: 'food' }, 'me', now - 1000)); // Jo has an expense (not removable); Pat has none (removable). Add a 3rd with none. const dana = uid(); batch.push(mk('MemberAdded', g2, { memberId: dana, name: 'Dana', email: 'dana@x.com' }, 'me', now - 900)); batch.forEach(ev => eventIdsRef.current.add(ev.id)); setEvents(es => [...es, ...batch]); console.log('[Tally] Injected local test data: 2 groups, same-named members, removable members. Local only — not synced.'); return 'ok'; }; return () => sync.closeAll && sync.closeAll(); }, []); // the UI never mutates state — it appends an event to the log const dispatch = (type, streamId, data, actor = ME) => { // when synced, the local account authors under its pubkey so peers attribute // the event correctly; offline it stays 'me'. (project() renders both as You.) const sync = window.TALLY_SYNC_ENABLED ? window.TallyGroupSync : null; const loggedIn = !!(window.TallySync && window.TallySync.myAuthorId); // author under pubkey if this group is synced OR is being created while synced const willSync = sync && loggedIn && (sync.isSynced(streamId) || type === 'GroupCreated'); const selfActor = (willSync && actor === ME) ? window.TallySync.myAuthorId : actor; const ev = { id: uid(), seq: events.length + 1, ts: Date.now(), actor: selfActor, type, streamId, data: data || {} }; eventIdsRef.current.add(ev.id); setEvents(es => [...es, ev]); if (sync) { // a new synced group must be registered server-side before its events flow if (type === 'GroupCreated') { sync.enableForGroup(streamId).then(() => sync.onLocalAppend(ev)).catch(e => console.warn('enableForGroup', e)); } else sync.onLocalAppend(ev); } }; const go = v => setView(v); const home = () => setView({ name: 'home' }); const group = view.name === 'group' ? db.groups.find(g => g.id === view.id) : null; const expGroup = view.name === 'expense' ? db.groups.find(g => g.id === view.gid) : null; const TABS = ['home', 'expenses', 'totals', 'people', 'activity']; const showTabs = TABS.includes(view.name); return (

{view.name === 'home' && } {view.name === 'group' && group && } {(view.name === 'activity' || view.name === 'ledger') && } {view.name === 'people' && } {view.name === 'pending' && } {view.name === 'payments' && } {view.name === 'expenses' && } {view.name === 'person' && setView(view.back || { name: 'people' })} />} {view.name === 'expense' && setView(view.back || { name: 'activity' })} />} {view.name === 'totals' && } {(view.name === 'group' && !group) && }

{showTabs && }

); } // ── Bottom tab bar ──────────────────────────────────────────── function TabBar({ active, go }) { const tabs = [ ['home', 'Home', ], ['expenses', 'Expenses', ], ['totals', 'Totals', ], ['people', 'People', ], ['activity', 'Activity', ], ]; return (

{tabs.map(([id, label, icon]) => { const on = active === id; return ( ); })}

); } // ── Activity hub: Ledger timeline / Audit table ─────────────── function ActivityHub({ state, events, cur, go, back, rootTab }) { const [mode, setMode] = useState('timeline'); return (

{[['timeline', 'Timeline'], ['table', 'Table']].map(([k, lbl]) => ( ))}

{mode === 'timeline' ? : }

); } // ── Home ────────────────────────────────────────────────────── function Home({ state, dispatch, go }) { const [addG, setAddG] = useState(false); const [gName, setGName] = useState(''); const [gMembers, setGMembers] = useState([]); const [showArchived, setShowArchived] = useState(false); const [menu, setMenu] = useState(false); const [addExp, setAddExp] = useState(false); const [pay, setPay] = useState(false); const [totSel, setTotSel] = useState('all'); const [simp, setSimp] = useState(false); const [showAllPairs, setShowAllPairs] = useState(false); const [expandRecent, setExpandRecent] = useState(false); const overall = useMemo(() => { let owed = 0, owe = 0; state.groups.forEach(g => { if (g.archived) return; const b = netBalances(g)[ME] || 0; if (b > 0) owed += b; else owe += -b; }); return { owed, owe, net: owed - owe }; }, [state]); const pendingNow = useMemo(() => pendingForMe(state, ME), [state]); // keep items the user just approved visible (greyed) until they navigate away & back const keyOf = p => p.type === 'groupdel' ? `gd-${p.g.id}` : `e-${p.g.id}-${p.e.id}`; const [approvedKeys, setApprovedKeys] = useState({}); const seenRef = useRef({ order: [], byKey: {} }); const sk = seenRef.current; pendingNow.forEach(p => { const k = keyOf(p); if (!(k in sk.byKey)) sk.order.push(k); sk.byKey[k] = p; }); const pendingDisplay = sk.order .filter(k => approvedKeys[k] || pendingNow.some(p => keyOf(p) === k)) .map(k => ({ k, p: sk.byKey[k], done: !!approvedKeys[k] })); // expense/payment confirmations now live in the Recent list (checkboxes); // this section only carries change-requests: edits, deletions, group removals const requestDisplay = pendingDisplay.filter(x => x.p.type === 'groupdel' || (x.p.e && (x.p.e.type === 'edit' || x.p.e.type === 'void'))); const approveNow = p => { setApprovedKeys(a => ({ ...a, [keyOf(p)]: true })); if (p.type === 'groupdel') approveDel(p.g.id); else approveEntry(p.g.id, p.e.id); }; const pairs = useMemo(() => globalPairwise(state), [state]); const recentApprovals = useMemo(() => { const out = []; state.groups.forEach(g => { if (g.archived) return; baseEntries(g).forEach(e => { if (e.type !== 'expense' && e.type !== 'settle') return; if (effectiveEntry(g, e).voided) return; const mineReq = requiredApprovers(e, g).includes(ME); const confirmed = !!(e.approvals || {})[ME]; out.push({ g, e, pendingMine: mineReq && !confirmed }); }); }); out.sort((a, b) => (a.pendingMine === b.pendingMine ? b.e.date - a.e.date : a.pendingMine ? -1 : 1)); return out; }, [state]); const unconfirmedCount = recentApprovals.filter(r => r.pendingMine).length; const disputed = useMemo(() => { const out = []; state.groups.forEach(g => { if (g.archived) return; baseEntries(g).forEach(e => { if (e.dispute && e.dispute.status === 'open' && !effectiveEntry(g, e).voided) out.push({ g, e }); }); }); return out.sort((a, b) => b.e.dispute.date - a.e.dispute.date); }, [state]); const totals = useMemo(() => { const gs = state.groups.filter(g => !g.archived && (totSel === 'all' || g.id === totSel)); const nameOf = (g, id) => (g.members.find(m => m.id === id) || { name: '?' }).name; const names = ['You']; gs.forEach(g => g.members.forEach(m => { if (!names.includes(m.name)) names.push(m.name); })); const tPaid = {}, tOwed = {}; names.forEach(n => { tPaid[n] = 0; tOwed[n] = 0; }); gs.forEach(g => baseEntries(g).forEach(e => { if (e.type !== 'expense') return; const eff = effectiveEntry(g, e); if (eff.voided) return; const payer = nameOf(g, eff.paidBy); tPaid[payer] = (tPaid[payer] || 0) + eff.amount; Object.entries(eff.split || {}).forEach(([mid, v]) => { const nm = nameOf(g, mid); tOwed[nm] = (tOwed[nm] || 0) + Number(v); }); })); const grand = names.reduce((s, n) => s + tPaid[n], 0); return { names: names.filter(n => tPaid[n] > 0.005 || tOwed[n] > 0.005), tPaid, tOwed, grand }; }, [state, totSel]); const approveEntry = (gid, eid) => dispatch('EntryConfirmationSet', gid, { entryId: eid, confirmed: true }); const approveDel = gid => dispatch('GroupDeletionApproved', gid, {}); return (

Tally

Your balance across {state.groups.filter(g => !g.archived).length} groups {Math.abs(overall.net) < 0.01 ? (

All settled up 🎉

) : (

= 0 ? '#D6F5E1' : '#FFE2CC' }}>{state.currency}{Math.abs(overall.net).toFixed(2)}

{overall.net >= 0 ? 'You are owed' : 'You owe'}

)}

{/* change-requests awaiting your approval (edits, deletions) */} {requestDisplay.length > 0 && (

Approvals needed {requestDisplay.filter(x => !x.done).length > 0 && {requestDisplay.filter(x => !x.done).length}}

{requestDisplay.filter(x => !x.done).length > 1 && ( )}

{requestDisplay.map(({ k, p, done }) => approveNow(p)} onOpen={() => { if (p.type === 'groupdel') go({ name: 'group', id: p.g.id }); else { const tid = (p.e.type === 'edit' || p.e.type === 'void') ? p.e.targetId : p.e.id; go({ name: 'expense', gid: p.g.id, eid: tid, back: { name: 'home' } }); } }} />)}

)} {/* ledger + nav cards moved to bottom */} {pairs.length > 0 && (() => { const owesYou = pairs.filter(p => p.to === 'You'); const youOwe = pairs.filter(p => p.from === 'You'); const others = pairs.filter(p => p.from !== 'You' && p.to !== 'You'); const PAIR_CAP = 4; const Col = ({ label, items, side, color }) => { const shown = showAllPairs ? items : items.slice(0, PAIR_CAP); const maxAmt = items.reduce((m, p) => Math.max(m, p.amount), 0) || 1; return (

{label}

{shown.length === 0 ?

—

: shown.map((p, i) => { const other = side === 'to' ? p.from : p.to; const sz = 13 + 3 * (p.amount / maxAmt); return (

go({ name: 'person', person: other, back: { name: 'home' } })} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 0', borderBottom: i < shown.length - 1 ? `1px solid ${C.soft}` : 'none', cursor: 'pointer' }}>

{other}

{state.currency}{p.amount.toFixed(2)}

); })}

); }; return (

Who owes who

{simp ? (() => { const nameBal = {}; pairs.forEach(p => { nameBal[p.from] = (nameBal[p.from] || 0) - p.amount; nameBal[p.to] = (nameBal[p.to] || 0) + p.amount; }); const tx = simplify(nameBal); if (tx.length === 0) return

Everyone's settled up 🎉

; const byTo = {}; tx.forEach(t => { (byTo[t.to] = byTo[t.to] || []).push(t); }); const recipients = Object.keys(byTo).sort((a, b) => (byTo[b].length - byTo[a].length) || (byTo[b].reduce((s, t) => s + t.amount, 0) - byTo[a].reduce((s, t) => s + t.amount, 0))); return (

This is the fewest payments that settle everyone — the totals are identical, just rerouted into fewer transfers.

{recipients.map((rcpt, ci) => ( {ci > 0 &&

}

Owes {rcpt}

{byTo[rcpt].sort((a, b) => b.amount - a.amount).map((t, i) => (

go({ name: 'person', person: t.from === 'You' ? rcpt : t.from, back: { name: 'home' } })} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 0', borderBottom: i < byTo[rcpt].length - 1 ? `1px solid ${C.soft}` : 'none', cursor: 'pointer' }}>

{t.from}

{state.currency}{t.amount.toFixed(2)}

))}

); })() : (<>

{(owesYou.length > PAIR_CAP || youOwe.length > PAIR_CAP || others.length > 0) && ( )} {showAllPairs && others.length > 0 && (

Between others

{others.map((p, i) => (

{p.from} owes {p.to}

{state.currency}{p.amount.toFixed(2)}

))}

)} )}

); })()} {disputed.length > 0 && (

Disputed {disputed.length}

{disputed.map(({ g, e }) => go({ name: 'expense', gid: g.id, eid: e.id, back: { name: 'home' } })} />)}

)} {recentApprovals.length > 0 && (

Recent {unconfirmedCount > 0 && {unconfirmedCount}}

{unconfirmedCount > 0 &&

Tap the circle to confirm your share — only you can confirm your own.

}

{recentApprovals.slice(0, 7).map(({ g, e }) => go({ name: 'expense', gid: g.id, eid: e.id, back: { name: 'home' } })} onToggle={() => dispatch('EntryConfirmationSet', g.id, { entryId: e.id, confirmed: !((e.approvals || {})[ME]) })} />)}

)}

Groups

{state.groups.filter(g => !g.archived && !g.deletion).map(g => { const myBal = netBalances(g)[ME] || 0; const count = baseEntries(g).filter(e => e.type === 'expense' && !effectiveEntry(g, e).voided).length; return (

go({ name: 'group', id: g.id })} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: 14, borderRadius: 18, border: `1px solid ${C.line}`, cursor: 'pointer', background: C.bg }}>

{g.emoji || '👥'}

{g.name}{g.deletion && deletion pending}

{g.members.length} people · {count} expenses

{Math.abs(myBal) < 0.01 ? 'settled' : myBal > 0 ? 'you lent' : 'you owe'}

0 ? C.green : C.orange }}>{Math.abs(myBal) < 0.01 ? '—' : `${state.currency}${Math.abs(myBal).toFixed(2)}`}

); })}

{state.groups.filter(g => g.archived || g.deletion).length > 0 && (

{showArchived && (

{state.groups.filter(g => g.archived || g.deletion).map(g => { const pending = !g.archived && g.deletion; const appr = g.deletion ? g.members.filter(m => g.deletion.approvals[m.id]).length : 0; return (

go({ name: 'group', id: g.id })} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: 14, cursor: 'pointer' }}>

{g.emoji || '👥'}

{g.name}

{pending ? `⚠ deletion needs approval · ${appr}/${g.members.length}` : `deleted · ${g.members.length} people`}

); })}

)}

)} {/* nav cards + ledger — bottom of homepage */} { setAddG(false); setGMembers([]); }} title="New group"> Group name

{(() => { const known = []; state.groups.filter(g => !g.archived).forEach(g => g.members.forEach(m => { if (m.name !== 'You' && !known.some(k => k.name === m.name)) known.push({ name: m.name, email: m.email || (state.profiles && state.profiles[m.name] && state.profiles[m.name].email) || '' }); })); known.sort((a, b) => a.name.localeCompare(b.name)); if (known.length === 0) return null; const toggle = nm => setGMembers(ms => ms.includes(nm) ? ms.filter(x => x !== nm) : [...ms, nm]); return (

Add people (from your other groups)

{known.map(k => { const on = gMembers.includes(k.name); return ( ); })}

); })()} { const gid = uid(); dispatch('GroupCreated', gid, { name: gName.trim() }); const known = {}; state.groups.filter(g => !g.archived).forEach(g => g.members.forEach(m => { if (m.name !== 'You') known[m.name] = m.email || (state.profiles && state.profiles[m.name] && state.profiles[m.name].email) || ''; })); gMembers.forEach(nm => dispatch('MemberAdded', gid, { memberId: uid(), name: nm, email: known[nm] || '' })); setGName(''); setGMembers([]); setAddG(false); go({ name: 'group', id: gid }); }}>Create group setMenu(false)} title="Quick actions"> {(() => { const Row = ({ icon, label, sub, color, onClick }) => ( ); const nav = v => { setMenu(false); go(v); }; return (

{ setMenu(false); setAddExp(true); }} icon={} /> { setMenu(false); setPay(true); }} icon={} /> { setMenu(false); setAddG(true); }} icon={} />

Go to

nav({ name: 'people' })} icon={} /> nav({ name: 'totals' })} icon={} /> nav({ name: 'payments' })} icon={} /> nav({ name: 'pending' })} icon={} /> nav({ name: 'activity' })} icon={} />

); })()} setAddExp(false)} state={state} dispatch={dispatch} /> setPay(false)} state={state} dispatch={dispatch} />

); } // ── Global add-expense: pick a group, then the editor ───────── function GlobalAddExpense({ open, onClose, state, dispatch }) { const groups = state.groups.filter(g => !g.archived); const [gid, setGid] = useState(null); useEffect(() => { if (open) setGid(groups.length === 1 ? groups[0].id : null); }, [open]); const group = groups.find(g => g.id === gid); return ( {!group ? (

Which group?

{groups.length === 0 && } {groups.map(g => ( ))}

) : (

{groups.length > 1 && } { addExpenseFrom(dispatch, group.id, d); onClose(); }} />

)} ); } // ── Global record-payment: who paid whom, in which group ────── function GlobalRecordPayment({ open, onClose, state, dispatch, initialPerson }) { const groups = state.groups.filter(g => !g.archived && (!initialPerson || g.members.some(m => m.name === initialPerson))); const [gid, setGid] = useState(null); const [from, setFrom] = useState(ME); const [to, setTo] = useState(null); const [amt, setAmt] = useState(''); useEffect(() => { if (open) { setGid(groups.length === 1 ? groups[0].id : null); setFrom(ME); setTo(null); setAmt(''); } }, [open]); const group = groups.find(g => g.id === gid); useEffect(() => { if (open && initialPerson && group) { const m = group.members.find(mm => mm.name === initialPerson); if (m) setTo(m.id); } }, [gid, open]); const cur = state.currency; const A = parseFloat(amt) || 0; const valid = group && from && to && from !== to && A > 0; return ( {!group ? (

Which group?

{groups.length === 0 && } {groups.map(g => ( ))}

) : (

{groups.length > 1 && } Who paid?

{group.members.map(m => )}

Paid to

{group.members.filter(m => m.id !== from).map(m => )}

Amount

{ dispatch('PaymentRecorded', group.id, { paymentId: uid(), from, to, amount: r2(A) }); onClose(); }}>Record payment

)} ); } function NavCard({ onClick, title, sub, icon, color }) { return ( ); } // personal stake line ("you owe…" / "you paid…") function stakeLine(g, e, cur) { if (e.type === 'expense') { const eff = effectiveEntry(g, e); if (eff.paidBy === ME) return ['you paid ' + cur + eff.amount.toFixed(2), C.green]; if (eff.split[ME] != null) return ['you owe ' + cur + Number(eff.split[ME]).toFixed(2), C.orange]; return null; } if (e.type === 'settle') { if (e.from === ME) return ['you paid ' + cur + e.amount.toFixed(2), C.green]; if (e.to === ME) return ['you receive ' + cur + e.amount.toFixed(2), C.green]; return null; } return null; } // short text summary of what an edit changed function fmtDiffs(g, e, cur) { const diffs = editDiffs(g, e); if (!diffs.length) return 'details updated'; return diffs.map(d => d[3] === 'money' ? `amount ${cur}${Number(d[1]).toFixed(2)} → ${cur}${Number(d[2]).toFixed(2)}` : d[3] === 'text' ? `“${d[1]}” → “${d[2]}”` : d[3] === 'meta' ? `${d[0].toLowerCase()} “${d[1]}” → “${d[2]}”` : d[3] === 'person' ? `paid by ${memOf(g, d[1]).name} → ${memOf(g, d[2]).name}` : 'shares ' + splitDeltas(g, d[1], d[2]).map(r => `${r[0]} ${cur}${r[1].toFixed(2)}→${cur}${r[2].toFixed(2)}`).join(', ')).join(' · '); } function PendingItem({ p, cur, onApprove, onOpen, done }) { const isExpenseLike = p.type !== 'groupdel' && (p.e.type === 'expense' || p.e.type === 'settle'); let icon, title, sub, detail = null, detailColor = C.sub, accent = C.blue; if (p.type === 'groupdel') { icon = '🗑'; title = `Delete “${p.g.name}”`; sub = `${p.g.emoji} group · requested by ${memOf(p.g, p.g.deletion.by).name}`; detail = 'removes the group for everyone'; detailColor = C.red; accent = C.red; } else if (!isExpenseLike) { const e = p.e; const tgt = p.g.entries.find(x => x.id === e.targetId); if (e.type === 'edit') { icon = '✎'; title = `Change to “${tgt ? (tgt.desc || 'Untitled') : '—'}”`; sub = `${p.g.emoji} ${p.g.name} · by ${memOf(p.g, e.by).name}`; detail = fmtDiffs(p.g, e, cur); detailColor = C.blue; accent = C.blue; } else { icon = '🗑'; title = `Delete “${tgt ? (tgt.desc || 'Untitled') : '—'}”`; sub = `${p.g.emoji} ${p.g.name} · by ${memOf(p.g, e.by).name}`; detail = 'removes it from balances'; detailColor = C.red; accent = C.red; } } const confirmBtn = ( ); return (

{isExpenseLike ? {} : onOpen} /> : (

{icon}

{title}

{sub}

{detail &&

{detail}

}

)} {confirmBtn}

); } // ── Group detail ────────────────────────────────────────────── function GroupView({ group, cur, dispatch, go, back, state }) { const [addExp, setAddExp] = useState(false); const [addMem, setAddMem] = useState(false); const [menu, setMenu] = useState(false); const [verifyMem, setVerifyMem] = useState(null); const [invite, setInvite] = useState(null); // { link } when the invite sheet is open const [copied, setCopied] = useState(false); const [removeMem, setRemoveMem] = useState(null); // member pending removal confirmation const syncOn = !!(typeof window !== 'undefined' && window.TALLY_SYNC_ENABLED && window.TallyGroupSync && window.TallyGroupSync.isSynced && window.TallyGroupSync.isSynced(group.id)); const openInvite = () => { try { const inv = window.TallyGroupSync.createInvite(group.id); setInvite(inv); setCopied(false); } catch (e) { setInvite({ error: String(e && e.message || e) }); } }; const entries = baseEntries(group).slice().sort((a, b) => b.date - a.date); const activeEntries = entries.filter(e => !effectiveEntry(group, e).voided); const deletedEntries = entries.filter(e => effectiveEntry(group, e).voided); const others = group.members.filter(m => m.id !== ME); const unverified = others.filter(m => !m.verified); const verifiedCount = group.members.filter(m => m.verified || m.id === ME).length; const requestDelete = () => { setMenu(false); dispatch('GroupDeletionRequested', group.id, {}); back(); }; const cancelDelete = () => dispatch('GroupDeletionCancelled', group.id, {}); const approveDelete = () => dispatch('GroupDeletionApproved', group.id, {}); const delA = group.deletion ? { approved: group.members.filter(m => group.deletion.approvals[m.id]).length, total: group.members.length } : null; return (

setMenu(true)} style={{ width: 38, height: 38, borderRadius: 11, background: C.soft, border: `1px solid ${C.line}`, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>} /> {group.deletion && (

🗑

Deletion requested · {delA.approved}/{delA.total} approved

{group.deletion.by === ME ? : !group.deletion.approvals[ME] && }

)} {/* members */}

{group.members.map(m => { const removable = m.id !== ME && !memberHasActivity(group, m.id); return (

go({ name: 'person', person: m.name, back: { name: 'group', id: group.id } })} style={{ display: 'flex', alignItems: 'center', gap: 7 }}> {m.name} {m.dupName && m.email && · {m.email}} {removable && }

); })} {syncOn && }

{/* key-verification nudge */} {unverified.length > 0 && (

{unverified.length} {unverified.length === 1 ? 'key' : 'keys'} not verified yet {verifiedCount}/{group.members.length} verified

{unverified.map(m => (

{m.name}

Entries count, but aren’t trust-checked.

))}

)} {others.length > 0 && unverified.length === 0 && (

Everyone in this group is verified.

)} {/* totals (folds balances + settle) */}

{group.recurring && group.recurring.filter(r => r.active).length > 0 && (

Recurring

{group.recurring.filter(r => r.active).map(r => (

{r.desc}

{cur}{Number(r.amount).toFixed(2)} · {r.frequency} · {memOf(group, r.paidBy).name} pays

))}

)}

{activeEntries.length === 0 && deletedEntries.length === 0 && } {activeEntries.map(E => go({ name: 'expense', gid: group.id, eid: E.id, back: { name: 'group', id: group.id } })} />)} {deletedEntries.length > 0 && (

Deleted expenses

{deletedEntries.map(E => go({ name: 'expense', gid: group.id, eid: E.id, back: { name: 'group', id: group.id } })} />)}

)}

setAddExp(false)} title="Add expense"> {addExp && { addExpenseFrom(dispatch, group.id, d); setAddExp(false); }} />} setAddMem(false)} dispatch={dispatch} group={group} state={state} /> setRemoveMem(null)} title={removeMem ? `Remove ${removeMem.name}?` : ''}> {removeMem && (

{removeMem.name} will be removed from “{group.name}”. You can only remove people who have no expenses yet, so nothing in the balances changes. They can be re-added or re-invited later.

{ dispatch('MemberRemoved', group.id, { memberId: removeMem.id }); setRemoveMem(null); }}>Remove {removeMem.name}

setRemoveMem(null)}>Cancel

)} setInvite(null)} title="Invite to this group"> {invite && invite.error &&

{invite.error}

} {invite && !invite.error && (

Share this link. Anyone who opens it can join “{group.name}” and see its shared ledger — treat it like a secret.

{invite.link}

{ try { navigator.clipboard.writeText(invite.link); setCopied(true); } catch (e) {} }}> {copied ? 'Copied ✓' : 'Copy invite link'}

)} setVerifyMem(null)} title={verifyMem ? `Verify ${verifyMem.name}` : ''}> {verifyMem && (

Compare this code with {verifyMem.name} in person or on a call. If it matches, their signing key is genuine.

{safetyCode(verifyMem.id + verifyMem.name).map(([n, w], i) => (

{n} {w}

))}

{ dispatch('MemberVerified', group.id, { memberId: verifyMem.id }); setVerifyMem(null); }}> They match setVerifyMem(null)}>They don’t match

)} setMenu(false)} title="Group options"> {others.length === 0 ? 'Delete group' : 'Request group deletion'} {others.length > 0 &&

Everyone in the group must approve before it's removed. Nothing is deleted from the ledger.

}

); } // ── Totals page — GLOBAL across all groups, approved / awaiting tables ── function GroupTotalsPage({ state, cur, initialGid, go, back, rootTab, dispatch }) { const groups = state.groups.filter(g => !g.archived); const [sel, setSel] = useState(initialGid && groups.some(g => g.id === initialGid) ? initialGid : 'all'); const [settle, setSettle] = useState(null); const nameOf = (g, id) => (g.members.find(m => m.id === id) || { name: '?' }).name; const shownGroups = sel === 'all' ? groups : groups.filter(g => g.id === sel); const nmeSet = []; shownGroups.forEach(g => g.members.forEach(m => { if (!nmeSet.includes(m.name)) nmeSet.push(m.name); })); const names = ['You', ...nmeSet.filter(n => n !== 'You')]; const all = []; shownGroups.forEach(g => baseEntries(g).filter(e => e.type === 'expense').forEach(e => { const eff = effectiveEntry(g, e); if (!eff.voided) all.push({ g, e, eff, mine: !!(e.approvals || {})[ME] }); })); all.sort((a, b) => (a.mine - b.mine) || (b.e.date - a.e.date)); const awaiting = all.filter(x => !x.mine).length; const openExp = (gid, eid) => go({ name: 'expense', gid, eid, back: { name: 'totals', gid: sel === 'all' ? undefined : sel, back: { name: 'home' } } }); return (

{[{ id: 'all', label: 'All groups', emoji: '📒' }, ...groups.map(g => ({ id: g.id, label: g.name, emoji: g.emoji }))].map(opt => { const on = sel === opt.id; return ( ); })}

{awaiting > 0 &&

{awaiting} awaiting your approval

} {sel !== 'all' && shownGroups[0] && (() => { const g = shownGroups[0]; const bal = netBalances(g); const tx = simplify(bal); return (

Suggested payments

{tx.length === 0 ?

Everyone's settled up 🎉

: (

{tx.map((t, i) => (

{memOf(g, t.from).name} pays {memOf(g, t.to).name}

{cur}{t.amount.toFixed(2)}

{dispatch && }

))}

)}

); })()}

● needs your approval · ● approved · tap a row to review

{dispatch && settle && setSettle(null)} group={groups.find(g => g.id === settle.gid)} cur={cur} dispatch={dispatch} />}

); } function TotalsList({ rows, names, nameOf, cur, onRow, mode }) { const paidOf = (x, name) => nameOf(x.g, x.eff.paidBy) === name ? x.eff.amount : 0; const owedOf = (x, name) => Object.entries(x.eff.split || {}).reduce((s, [mid, v]) => s + (nameOf(x.g, mid) === name ? Number(v) : 0), 0); const tPaid = {}, tOwed = {}; names.forEach(n => { tPaid[n] = rows.reduce((s, x) => s + paidOf(x, n), 0); tOwed[n] = rows.reduce((s, x) => s + owedOf(x, n), 0); }); const grand = rows.reduce((s, x) => s + x.eff.amount, 0); if (rows.length === 0) return ; const COL_PAID = 82, COL_OWED = 82, COL_NET = 80; return (

{/* TOTALS card — on top */}

Totals {cur}{grand.toFixed(2)}

Paid Expenses Net

{names.map(n => { const net = r2(tPaid[n] - tOwed[n]); return (

{n} 0.005 ? C.green : C.faint }}>{tPaid[n] > 0.005 ? `${cur}${tPaid[n].toFixed(2)}` : '—'} 0.005 ? C.orangeDk : C.faint }}>{tOwed[n] > 0.005 ? `${cur}${tOwed[n].toFixed(2)}` : '—'} 0 ? C.green : C.orange }}>{Math.abs(net) < 0.01 ? '—' : (net > 0 ? '+' : '−') + cur + Math.abs(net).toFixed(2)}

); })}

{/* expense cards */} {rows.map(({ g, e, eff, mine }) => { const involved = involvedOf(e, g); const accent = mine ? C.green : C.orange; const payer = nameOf(g, eff.paidBy); return (

onRow(g.id, e.id)} style={{ border: `1px solid ${C.line}`, borderLeft: `3px solid ${accent}`, borderRadius: 14, padding: '11px 13px', cursor: 'pointer' }}>

{catEmoji(eff.category)} {eff.desc} · {g.emoji} {cur}{eff.amount.toFixed(2)}

{payer} paid {cur}{eff.amount.toFixed(2)}

{involved.map(id => { const name = nameOf(g, id); const isPayer = eff.paidBy === id; const share = Number(eff.split[id] || 0); const net = r2((isPayer ? eff.amount : 0) - share); const val = mode === 'shares' ? { txt: share > 0.005 ? `${cur}${share.toFixed(2)}` : '—', col: C.ink } : { txt: net > 0.005 ? `+${cur}${net.toFixed(2)}` : net < -0.005 ? `−${cur}${Math.abs(net).toFixed(2)}` : '—', col: net > 0.005 ? C.green : net < -0.005 ? C.orangeDk : C.faint }; return ( {name}{mode === 'shares' ? '' : ' ·'} {val.txt} ); })}

); })}

); } function GroupEntryRow({ E, group, cur, onClick }) { const eff = effectiveEntry(group, E); const settle = E.type === 'settle'; const involved = involvedOf(E, group).map(id => memOf(group, id)); const a = approvalOf(E, group); const ap = E.approvals || {}; const pendingIds = a.req.filter(id => !ap[id]); const mine = !settle && eff.split[ME] != null; const lent = settle ? (eff.from === ME ? eff.amount : eff.to === ME ? -eff.amount : 0) : (eff.paidBy === ME ? eff.amount - (mine ? eff.split[ME] : 0) : (mine ? -eff.split[ME] : 0)); return (

{settle ? : catEmoji(eff.category)}

{settle ? `${memOf(group, eff.from).name} → ${memOf(group, eff.to).name}` : eff.desc} {eff.amended && edited by {memOf(group, eff.editedBy).name}} {eff.pendingVoid && deletion pending}

{settle ? 'payment' : `${memOf(group, eff.paidBy).name} paid`} · {relDate(E.date)}

0 ? C.green : C.orange }}>{settle ? `${cur}${eff.amount.toFixed(2)}` : Math.abs(lent) < 0.01 ? '—' : `${cur}${Math.abs(lent).toFixed(2)}`}

{!eff.voided && !a.done && (

waiting {pendingIds.slice(0, 3).map((id, i) => )}

)}

{!settle && (

{Object.keys(eff.split).map(id => { const name = memOf(group, id).name; const isPayer = eff.paidBy === id; const share = Number(eff.split[id] || 0); return ( {name} {cur}{share.toFixed(2)} ); })}

)}

); } function AddMember({ open, onClose, dispatch, group, state }) { const [name, setName] = useState(''); const [email, setEmail] = useState(''); const [picked, setPicked] = useState([]); const [invite, setInvite] = useState(null); const [copied, setCopied] = useState(false); useEffect(() => { if (open) { setName(''); setEmail(''); setPicked([]); setInvite(null); setCopied(false); } }, [open]); const syncOn = !!(typeof window !== 'undefined' && window.TALLY_SYNC_ENABLED && window.TallyGroupSync && window.TallyGroupSync.isSynced && window.TallyGroupSync.isSynced(group.id)); const existing = group.members.map(m => m.name); const known = []; (state.groups || []).filter(g => !g.archived).forEach(g => g.members.forEach(m => { if (m.name !== 'You' && !existing.includes(m.name) && !known.some(k => k.name === m.name)) known.push({ name: m.name, email: m.email || (state.profiles && state.profiles[m.name] && state.profiles[m.name].email) || '' }); })); known.sort((a, b) => a.name.localeCompare(b.name)); const toggle = nm => setPicked(p => p.includes(nm) ? p.filter(x => x !== nm) : [...p, nm]); const emailValid = /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email.trim()); const addExisting = () => { const emap = {}; known.forEach(k => { emap[k.name] = k.email; }); picked.forEach(nm => dispatch('MemberAdded', group.id, { memberId: uid(), name: nm, email: emap[nm] || '', verified: true })); onClose(); }; const inviteNew = () => { // New people must be invited by email. Synced group → produce an invite link to // share (we can't send email yet). Offline group → add a local member by email. if (syncOn) { try { const inv = window.TallyGroupSync.createInvite(group.id); setInvite(inv); } catch (e) { setInvite({ error: String(e && e.message || e) }); } } else { dispatch('MemberAdded', group.id, { memberId: uid(), name: name.trim() || email.trim().split('@')[0], email: email.trim() }); onClose(); } }; return ( {known.length > 0 && (

Add a friend (from your other groups)

{known.map(k => { const on = picked.includes(k.name); return ( ); })}

{picked.length > 0 && <>

{`Add ${picked.length} to group`}}

or invite someone new

)} {invite ? ( invite.error ?

{invite.error}

Send this invite link to {email.trim() || 'your friend'}. When they open it and sign in, they'll join “{group.name}”.

{invite.link}

{ try { navigator.clipboard.writeText(invite.link); setCopied(true); } catch (e) {} }}>{copied ? 'Copied ✓' : 'Copy invite link'}

) : (

Email (required)

Name (optional)

{syncOn ? 'Create invite link' : 'Add to group'} {!emailValid && email.length > 0 &&

Enter a valid email address.

}

)} ); } // ── Settle (manual, no payment links) ───────────────────────── function PayEditor({ group, cur, eff, onSubmit }) { const [from, setFrom] = useState(eff.from); const [to, setTo] = useState(eff.to); const [amt, setAmt] = useState(String(eff.amount)); const A = parseFloat(amt) || 0; const valid = from && to && from !== to && A > 0; return (

Edits apply right away and are flagged for everyone involved to re-confirm.

Who paid?

{group.members.map(m => )}

Paid to

{group.members.filter(m => m.id !== from).map(m => )}

Amount

onSubmit({ from, to, amount: r2(A) })}>Save changes

); } function SettleSheet({ tx, onClose, group, cur, dispatch }) { const [amt, setAmt] = useState(''); useEffect(() => { if (tx) setAmt(String(tx.amount)); }, [tx]); if (!tx) return null; const from = memOf(group, tx.from), to = memOf(group, tx.to); const A = parseFloat(amt) || 0; const partial = A > 0 && A < tx.amount - 0.005; const record = () => { dispatch('PaymentRecorded', group.id, { paymentId: uid(), from: tx.from, to: tx.to, amount: r2(A) }); onClose(); }; return (

{from.name}

{to.name}

Amount paid

{partial ? `Partial — ${cur}${r2(tx.amount - A).toFixed(2)} will still be owed` : `Full amount owed: ${cur}${tx.amount.toFixed(2)}`}

Records that {from.name} paid {to.name} outside the app. Both must confirm it on the ledger.

Record payment ); } // ── Shared entry editor (add + request change) ──────────────── function EntryEditor({ group, cur, initial, onSubmit, submitLabel }) { const [desc, setDesc] = useState(initial ? initial.desc : ''); const [amount, setAmount] = useState(initial && initial.amount ? String(initial.amount) : ''); const [paidBy, setPaidBy] = useState(initial ? initial.paidBy : ME); const [category, setCategory] = useState(initial && initial.category ? initial.category : 'general'); const [note, setNote] = useState(initial && initial.note ? initial.note : ''); const [parts, setParts] = useState(() => initial && initial.split ? Object.keys(initial.split) : group.members.map(m => m.id)); const [mode, setMode] = useState(initial && initial.unequal ? 'amounts' : 'equal'); const [amts, setAmts] = useState(() => { const o = {}; group.members.forEach(m => { o[m.id] = initial && initial.split && initial.split[m.id] != null ? String(initial.split[m.id]) : ''; }); return o; }); const [pcts, setPcts] = useState({}); const [shrs, setShrs] = useState({}); const [items, setItems] = useState(() => initial && initial.items ? initial.items.map(it => ({ ...it, amount: String(it.amount), sharedBy: [...(it.sharedBy || [])] })) : []); const [repeat, setRepeat] = useState(initial && initial.repeat ? initial.repeat : 'none'); const A = parseFloat(amount) || 0; const num = v => parseFloat(v) || 0; const toggle = id => setParts(p => p.includes(id) ? p.filter(x => x !== id) : [...p, id]); let split = {}, msg = '', ok = true, itemsTotal = 0; if (mode === 'items') { const acc = {}; items.forEach(it => { const amt = num(it.amount); itemsTotal += amt; const sb = (it.sharedBy && it.sharedBy.length) ? it.sharedBy : []; sb.forEach(id => { acc[id] = (acc[id] || 0) + amt / sb.length; }); }); Object.keys(acc).forEach(id => { acc[id] = r2(acc[id]); }); const ks = Object.keys(acc); if (ks.length) fixRound(acc, r2(itemsTotal), ks); split = acc; ok = items.length > 0 && items.every(it => num(it.amount) > 0 && it.sharedBy && it.sharedBy.length > 0); msg = ok ? `${cur}${r2(itemsTotal).toFixed(2)} · ${items.length} item${items.length === 1 ? '' : 's'}` : 'Add items with amounts & who shares'; } else if (mode === 'equal') split = equalSplit(A, parts); else if (mode === 'amounts') { let s = 0; parts.forEach(id => { split[id] = r2(num(amts[id])); s += num(amts[id]); }); const rem = r2(A - s); ok = Math.abs(rem) < 0.005; msg = ok ? 'Splits add up ✓' : (rem > 0 ? `${cur}${rem.toFixed(2)} left` : `${cur}${Math.abs(rem).toFixed(2)} over`); } else if (mode === 'percent') { let tot = 0; parts.forEach(id => { tot += num(pcts[id]); }); parts.forEach(id => { split[id] = r2(A * num(pcts[id]) / 100); }); fixRound(split, A, parts); const d = r2(100 - tot); ok = Math.abs(d) < 0.05; msg = ok ? '100% allocated ✓' : (d > 0 ? `${d.toFixed(0)}% left` : `${Math.abs(d).toFixed(0)}% over`); } else { let tot = 0; parts.forEach(id => { tot += num(shrs[id]); }); parts.forEach(id => { split[id] = tot > 0 ? r2(A * num(shrs[id]) / tot) : 0; }); fixRound(split, A, parts); ok = tot > 0; msg = ok ? `${tot} share${tot === 1 ? '' : 's'} total` : 'Add shares'; } const finalAmount = mode === 'items' ? r2(itemsTotal) : r2(A); const valid = desc.trim() && finalAmount > 0 && Object.keys(split).length > 0 && ok; const modes = [['equal', 'Equal'], ['amounts', cur], ['percent', '%'], ['shares', 'Shares'], ['items', 'Items']]; const setVal = (id, v) => mode === 'amounts' ? setAmts(a => ({ ...a, [id]: v })) : mode === 'percent' ? setPcts(a => ({ ...a, [id]: v })) : setShrs(a => ({ ...a, [id]: v })); const getVal = id => mode === 'amounts' ? amts[id] : mode === 'percent' ? pcts[id] : shrs[id]; const addItem = () => setItems(its => [...its, { id: uid(), name: '', amount: '', sharedBy: [paidBy] }]); const setItem = (id, patch) => setItems(its => its.map(it => it.id === id ? { ...it, ...patch } : it)); const itemShare = (it, mid) => { const sb = it.sharedBy || []; return sb.includes(mid) && num(it.amount) ? num(it.amount) / sb.length : 0; }; return (

What for?

Amount {mode === 'items' ?

{cur}{r2(itemsTotal).toFixed(2)} from items

: }

Category

{Object.entries(CATS).map(([k, [nm, em]]) => ( ))}

Paid by

{group.members.map(m => )}

Split

{modes.map(([k, lbl]) => ( ))}

{mode === 'items' ? (

{items.length === 0 &&

No items yet — add each line of the receipt and who shared it.

} {items.map(it => (

setItem(it.id, { name: v })} placeholder="Item" style={{ height: 44 }} />

setItem(it.id, { amount: v })} placeholder="0.00" prefix={cur} type="number" style={{ height: 44 }} />

{group.members.map(m => { const on = (it.sharedBy || []).includes(m.id); return ( ); })}

))}

{msg}

) : mode === 'equal' ? (

{group.members.map(m => { const on = parts.includes(m.id); return ( ); })}

) : (

{group.members.map(m => { const on = parts.includes(m.id); return (

{on &&

setVal(m.id, v)} placeholder={mode === 'percent' ? '%' : mode === 'shares' ? 'shares' : '0.00'} prefix={mode === 'amounts' ? cur : undefined} type="number" style={{ height: 44 }} />

}

); })}

{msg}

)}

Note (optional)

Repeat

{[['none', "Doesn't repeat"], ['weekly', 'Weekly'], ['monthly', 'Monthly']].map(([k, lbl]) => ( ))}

{repeat !== 'none' &&

A new expense will be added automatically every {repeat === 'weekly' ? 'week' : 'month'}.

}

onSubmit({ desc: desc.trim(), amount: finalAmount, paidBy, split, unequal: mode !== 'equal', category, note: note.trim(), items: mode === 'items' ? items.map(it => ({ id: it.id, name: it.name.trim() || 'Item', amount: r2(num(it.amount)), sharedBy: it.sharedBy })) : null, repeat })}>{submitLabel}

); } // ── Ledger ──────────────────────────────────────────────────── function Ledger({ state, cur, go, back, embedded }) { const [q, setQ] = useState(''); const rows = useMemo(() => { const all = []; state.groups.forEach(g => { if (g.archived) return; g.entries.forEach(e => all.push({ e, g })); }); return all.sort((x, y) => y.e.date - x.e.date); }, [state]); const ql = q.trim().toLowerCase(); const shown = ql ? rows.filter(({ e, g }) => { const names = involvedOf(e, g).map(id => memOf(g, id).name).join(' '); const t = e.type === 'expense' ? e.desc : e.type === 'settle' ? 'payment settle' : e.type; return `${t} ${g.name} ${names} ${e.type === 'expense' ? catName(e.category || 'general') : ''}`.toLowerCase().includes(ql); }) : rows; const exportCsv = () => { const esc = v => `"${String(v == null ? '' : v).replace(/"/g, '""')}"`; const lines = [['Date', 'Group', 'Type', 'Description', 'Category', 'Paid by', 'Amount', 'Confirmed'].join(',')]; rows.forEach(({ e, g }) => { const desc = e.type === 'expense' ? e.desc : e.type === 'settle' ? `${memOf(g, e.from).name} -> ${memOf(g, e.to).name}` : e.type === 'edit' ? 'change request' : 'deletion request'; const cat = e.type === 'expense' ? catName(e.category || 'general') : ''; const paid = e.type === 'expense' ? memOf(g, e.paidBy).name : e.type === 'settle' ? memOf(g, e.from).name : ''; const amt = e.amount != null ? e.amount : (e.patch && e.patch.amount) || ''; lines.push([new Date(e.date).toLocaleString(), g.name, e.type, desc, cat, paid, amt, approvalOf(e, g).done ? 'yes' : 'no'].map(esc).join(',')); }); const blob = new Blob([lines.join('\n')], { type: 'text/csv' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'tally-ledger.csv'; a.click(); setTimeout(() => URL.revokeObjectURL(url), 1000); }; const csvBtn = ; return (

{!embedded && }

{embedded && csvBtn}

{shown.length === 0 && }

{shown.map(({ e, g }) => { const tid = (e.type === 'edit' || e.type === 'void') ? e.targetId : e.id; go({ name: 'expense', gid: g.id, eid: tid, back: { name: 'activity' } }); }} />)}

); } function LedgerRow({ e, g, cur, onClick }) { const a = approvalOf(e, g); const involved = involvedOf(e, g).map(id => memOf(g, id)); const tgt = (e.type === 'edit' || e.type === 'void') ? g.entries.find(x => x.id === e.targetId) : null; let icon, iconBg, title, meta, amount; if (e.type === 'expense') { icon = catEmoji(e.category); iconBg = C.soft2; title = e.desc; meta = `${memOf(g, e.paidBy).name} paid`; amount = e.amount; } else if (e.type === 'settle') { icon = '✓'; iconBg = `${C.green}14`; title = `${memOf(g, e.from).name} → ${memOf(g, e.to).name}`; meta = 'payment'; amount = e.amount; } else if (e.type === 'edit') { icon = '✎'; iconBg = `${C.blue}14`; title = `Change to “${tgt ? tgt.desc : '—'}”`; meta = `by ${memOf(g, e.by).name}`; amount = e.patch && e.patch.amount; } else { icon = '🗑'; iconBg = `${C.red}12`; title = `Delete “${tgt ? tgt.desc : '—'}”`; meta = `by ${memOf(g, e.by).name}`; amount = null; } return (

{e.type === 'settle' ? : icon}

{title}

{involved.map(m => m.name).join(', ') || '—'}

{g.emoji} {g.name} · {meta} · {relDate(e.date)}

{amount != null &&

{cur}{amount.toFixed(2)}

}

); } // ── Expense / settle detail + requests + approvals ──────────── function ExpenseDetail({ group, eid, cur, dispatch, back }) { const [editing, setEditing] = useState(false); const [editPay, setEditPay] = useState(false); const [confirmDel, setConfirmDel] = useState(false); const [comment, setComment] = useState(''); const [menu, setMenu] = useState(false); const [disputeOpen, setDisputeOpen] = useState(false); const [disputeReason, setDisputeReason] = useState(''); const E = group && group.entries.find(x => x.id === eid); if (!group || !E) return

; const settle = E.type === 'settle'; const eff = effectiveEntry(group, E); const a = approvalOf(E, group); const ap = E.approvals || {}; const involved = settle ? [eff.from, eff.to].filter((v, i, arr) => arr.indexOf(v) === i) : [eff.paidBy, ...Object.keys(eff.split || {})].filter((v, i, arr) => arr.indexOf(v) === i); const payer = settle ? memOf(group, eff.from) : memOf(group, eff.paidBy); const latestPendingEdit = (() => { const eds = group.entries.filter(x => x.type === 'edit' && x.targetId === E.id).sort((a, b) => a.date - b.date); const l = eds[eds.length - 1]; return l && !approvalOf(l, group).done ? l : null; })(); const pendingVoids = group.entries.filter(x => x.type === 'void' && x.targetId === E.id && !approvalOf(x, group).done); const effObj = { type: E.type, desc: eff.desc, amount: eff.amount, paidBy: eff.paidBy, from: eff.from, to: eff.to, split: eff.split, category: eff.category, note: eff.note }; const toggle = mid => dispatch('EntryConfirmationSet', group.id, { entryId: E.id, confirmed: !ap[mid] }, mid); const approveReq = rid => dispatch('EntryConfirmationSet', group.id, { entryId: rid, confirmed: true }); const submitEdit = d => { const { repeat, ...fields } = d; const info = recurringInfo(group, eff); const curFreq = info ? info.freq : 'none'; const patch = { ...fields }; if (repeat !== curFreq) { if (info) dispatch('RecurringStopped', group.id, { recurringId: info.rule.id }); if (repeat !== 'none') { const rid = uid(); dispatch('RecurringAdded', group.id, { recurringId: rid, desc: fields.desc, amount: fields.amount, paidBy: fields.paidBy, split: fields.split, category: fields.category, note: fields.note, items: fields.items, frequency: repeat, anchorTs: E.date }); patch.recurringId = rid; } else { patch.recurringId = null; } } dispatch('ExpenseEditRequested', group.id, { editId: uid(), targetId: E.id, patch }); setEditing(false); }; const requestVoid = () => { dispatch('ExpenseVoidRequested', group.id, { voidId: uid(), targetId: E.id }); setConfirmDel(false); }; const addComment = () => { if (!comment.trim()) return; dispatch('CommentPosted', group.id, { entryId: E.id, commentId: uid(), text: comment.trim() }); setComment(''); }; const dispute = E.dispute && E.dispute.status === 'open' ? E.dispute : null; const raiseDispute = () => { if (!disputeReason.trim()) return; dispatch('EntryDisputed', group.id, { entryId: E.id, reason: disputeReason.trim() }); setDisputeReason(''); setDisputeOpen(false); }; const resolveDispute = () => dispatch('DisputeResolved', group.id, { entryId: E.id }); const DiffLine = ({ d }) => { if (d[3] === 'split') return (

Shares changed

{splitDeltas(group, d[1], d[2]).map((r, i) => (

{r[0]} {cur}{r[1].toFixed(2)} r[1] ? C.orange : C.green, fontWeight: 700 }}>{cur}{r[2].toFixed(2)}

))}

); const fmt = v => d[3] === 'money' ? `${cur}${Number(v).toFixed(2)}` : d[3] === 'person' ? memOf(group, v).name : `“${String(v) || '—'}”`; return (

{d[0]} {fmt(d[1])} {fmt(d[2])}

); }; // full append-only history of this entry, newest first const fmtDiffShort = ds => ds.map(d => d[3] === 'split' ? 'shares: ' + splitDeltas(group, d[1], d[2]).map(r => `${r[0]} ${cur}${r[1].toFixed(2)}→${cur}${r[2].toFixed(2)}`).join(', ') : d[3] === 'meta' ? `${String(d[0]).toLowerCase()} “${d[1]}”→“${d[2]}”` : `${String(d[0]).toLowerCase()} ${d[3] === 'money' ? cur + Number(d[1]).toFixed(2) : d[3] === 'person' ? memOf(group, d[1]).name : d[1]}→${d[3] === 'money' ? cur + Number(d[2]).toFixed(2) : d[3] === 'person' ? memOf(group, d[2]).name : d[2]}`).join('; '); const history = (() => { const h = []; h.push({ ts: E.date, who: E.by, kind: 'add', text: settle ? 'recorded this payment' : 'added this expense', detail: describeEntry(group, E, cur) }); Object.entries(E.approvals || {}).forEach(([id, ts]) => { if (id !== E.by) h.push({ ts: typeof ts === 'number' ? ts : E.date, who: id, kind: 'confirm', text: 'confirmed the entry' }); }); group.entries.filter(x => x.type === 'edit' && x.targetId === E.id).forEach(ed => { const ds = editDiffs(group, ed); h.push({ ts: ed.date, who: ed.by, kind: 'edit', text: 'edited the entry', detail: ds.length ? fmtDiffShort(ds) : 'details updated' }); Object.entries(ed.approvals || {}).forEach(([id, ts]) => { if (id !== ed.by) h.push({ ts: typeof ts === 'number' ? ts : ed.date, who: id, kind: 'confirm', text: 'approved the change' }); }); }); group.entries.filter(x => x.type === 'void' && x.targetId === E.id).forEach(v => { h.push({ ts: v.date, who: v.by, kind: 'void', text: 'requested deletion' }); Object.entries(v.approvals || {}).forEach(([id, ts]) => { if (id !== v.by) h.push({ ts: typeof ts === 'number' ? ts : v.date, who: id, kind: 'void', text: 'approved deletion' }); }); }); (E.comments || []).forEach(c => h.push({ ts: c.date, who: c.by, kind: 'comment', text: 'commented', detail: `“${c.text}”` })); return h.sort((x, y) => y.ts - x.ts); })(); const histColor = k => k === 'add' ? C.blue : k === 'edit' ? C.orange : k === 'void' ? C.red : k === 'comment' ? C.sub : C.green; return (

{!settle && } {settle && }

: undefined} />

{settle ? `${payer.name} → ${memOf(group, eff.to).name}` : eff.desc}{!settle && · {catEmoji(eff.category)} {catName(eff.category)}}

{cur}{eff.amount.toFixed(2)}

{payer.name} paid

{new Date(E.date).toLocaleDateString(undefined, { weekday: 'short', month: 'long', day: 'numeric', year: 'numeric' })}

{(() => { const rec = recurringInfo(group, eff); return rec ? (

Repeats {rec.freq} · next {shortDate(rec.next)}

) : null; })()}

{eff.voided && (

{eff.pendingVoid ? '🗑 Deleted · deletion needs approval from everyone involved' : 'This entry was deleted. It stays in the ledger for history.'}

)} {eff.note && (

NOTE

{eff.note}

)} {/* dispute banner */} {dispute && !eff.voided && (

Disputed by {memOf(group, dispute.by).name}{dispute.by === ME ? ' (you)' : ''} {relDate(dispute.date)}

{dispute.reason &&

“{dispute.reason}”

}

The amount still stands in balances — resolve it by editing the entry, recording a correction, or clearing the flag once you agree.

{dispute.by === ME ?

Withdraw dispute

: <> {!settle &&

setEditing(true)} style={{ height: 44 }}>Edit to fix

}

Mark resolved

}

)} {/* pending requests */} {pendingVoids.length > 0 && (

Pending requests

{pendingVoids.map(v => { const va = approvalOf(v, group); return ( approveReq(v.id)}>

Removes this entry from balances once everyone approves.

); })}

)} {/* itemized receipt breakdown */} {!eff.voided && !settle && eff.items && eff.items.length > 0 && (

Items

{eff.items.map(it => (

{it.name} {cur}{Number(it.amount).toFixed(2)}

{(it.sharedBy || []).map(mid => ( {memOf(group, mid).name} {cur}{(it.sharedBy.length ? Number(it.amount) / it.sharedBy.length : 0).toFixed(2)} ))}

))}

)} {/* split & confirmations — one combined list */} {!eff.voided && (

{settle ? 'Payment' : `Split between ${Object.keys(eff.split).length}`}

Confirm your own share below — everyone else confirms from their own device.

{involved.map(id => { const ok = !!ap[id]; const share = Number(eff.split[id] || 0); const isPayer = settle ? id === eff.from : id === eff.paidBy; const isMe = id === ME; return (

toggle(ME) : undefined} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '11px 0', borderBottom: `1px solid ${C.soft}`, cursor: isMe ? 'pointer' : 'default' }}>

{memOf(group, id).name}{isMe && · you}

{settle ? (id === eff.from ? `paid ${cur}${eff.amount.toFixed(2)}` : `received ${cur}${eff.amount.toFixed(2)}`) : (isPayer ? `paid ${cur}${eff.amount.toFixed(2)} · share ${cur}${share.toFixed(2)}` : `share ${cur}${share.toFixed(2)}`)}

{!ok && {isMe ? 'tap to confirm' : 'awaiting'}} {ok ? : }

); })} {involved.includes(ME) && !ap[ME] && (

toggle(ME)}>Approve this entry

)}

)} {/* history */}

History

{history.map((h, i) => (

{i < history.length - 1 && }

{memOf(group, h.who).name} {h.text}

{h.detail &&

{h.detail}

}

{new Date(h.ts).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })} · {new Date(h.ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}

))}

{/* comments */}

Comments

{(E.comments || []).length === 0 &&

No comments yet.

} {(E.comments || []).map((c, i) => (

{memOf(group, c.by).name} · {relDate(c.date)}{c.dispute && DISPUTE}

{c.text}

))}

{/* actions moved to the header ⋮ menu */} setMenu(false)} title="Entry options"> {!settle && <> { setMenu(false); setEditing(true); }} style={{ justifyContent: 'flex-start', paddingLeft: 16 }}>Edit expense

} {!dispute && <> { setMenu(false); setDisputeOpen(true); }} style={{ color: C.orangeDk, justifyContent: 'flex-start', paddingLeft: 16 }}>Dispute this {settle ? 'payment' : 'expense'}

} { setMenu(false); setConfirmDel(true); }} disabled={eff.pendingVoid} style={{ color: C.red, justifyContent: 'flex-start', paddingLeft: 16 }}>{eff.pendingVoid ? 'Deletion already requested' : 'Request deletion'} setEditing(false)} title="Edit expense">

Your change is saved right away and logged. It's flagged as needing approval until everyone involved confirms it.

{editing && } setEditPay(false)} title="Edit payment"> {editPay && { dispatch('ExpenseEditRequested', group.id, { editId: uid(), targetId: E.id, patch: d }); setEditPay(false); }} />} setConfirmDel(false)} title="Request deletion">

This proposes voiding {settle ? 'this payment' : `“${eff.desc}”`}. The entry is never erased — once everyone involved approves, it's marked void and removed from balances.

Request deletion setDisputeOpen(false)} title={`Dispute ${settle ? 'payment' : 'expense'}`}>

Flag this entry as wrong and tell the group why. It stays in the ledger and in balances, but everyone sees it's contested until it's resolved.

setDisputeReason(e.target.value)} autoFocus placeholder="What's wrong? e.g. I wasn't on this one / amount looks too high" rows={3}
          style={{ width: '100%', boxSizing: 'border-box', border: `1.5px solid ${C.line}`, borderRadius: 14, padding: '12px 14px', fontSize: 15, color: C.ink, fontFamily: 'inherit', resize: 'none', outline: 'none', lineHeight: 1.45 }} />
        <div style={{ height: 14 }} />
        <Btn color={C.red} onClick={raiseDispute} disabled={!disputeReason.trim()}>Raise dispute</Btn>
      </Sheet>
    </div>
  );
}

function RequestCard({ color, title, a, canApprove, onApprove, children }) {
  return (
    <div style={{ border: `1px solid ${color}33`, background: `${color}08`, borderRadius: 16, padding: 14, marginBottom: 10 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
        <span style={{ fontSize: 14, fontWeight: 700, color: C.ink, flex: 1 }}>{title}</span>
        <ApprovalPill a={a} />
      </div>
      {children}
      {canApprove && <button onClick={onApprove} style={{ marginTop: 12, width: '100%', background: color, color: '#fff', border: 'none', borderRadius: 11, padding: '10px', fontSize: 14, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit' }}>Approve request</button>}
    </div>
  );
}

// ── Audit log: spreadsheet of every change & addition ─────────
function actType(text) {
  const w = text.split(' ')[0];
  if (/added|created/.test(w)) return ['Add', C.green];
  if (/confirmed|approved/.test(w)) return ['Approve', C.blue];
  if (/requested/.test(w)) return ['Request', C.orangeDk];
  if (/recorded/.test(w)) return ['Payment', '#0891B2'];
  if (/commented/.test(w)) return ['Comment', C.sub];
  if (/cancelled|withdrew|deleted/.test(w)) return ['Revert', C.red];
  return ['Event', C.sub];
}
function Activity({ state, events, embedded }) {
  const log = (events || []).slice().sort((a, b) => b.ts - a.ts || (b.seq || 0) - (a.seq || 0));
  const items = (state.activity || []).slice().sort((a, b) => b.ts - a.ts);
  // group/member name lookups for rendering raw events readably
  const gName = sid => { const g = state.groups.find(x => x.id === sid); return g ? `${g.emoji} ${g.name}` : sid; };
  const personName = (sid, id) => { const g = state.groups.find(x => x.id === sid); const m = g && g.members.find(x => x.id === id); return m ? m.name : (id === 'me' ? 'You' : id); };
  const exportCsv = () => {
    const esc = v => `"${String(v == null ? '' : v).replace(/"/g, '""')}"`;
    const lines = [['seq', 'iso_timestamp', 'event_id', 'actor', 'event_type', 'stream_id', 'data_json'].join(',')];
    log.slice().reverse().forEach((e, i) => lines.push([i + 1, new Date(e.ts).toISOString(), e.id, e.actor, e.type, e.streamId, JSON.stringify(e.data || {})].map(esc).join(',')));
    const blob = new Blob([lines.join('\n')], { type: 'text/csv' });
    const url = URL.createObjectURL(blob); const el = document.createElement('a'); el.href = url; el.download = 'tally-eventlog.csv'; el.click(); setTimeout(() => URL.revokeObjectURL(url), 1000);
  };
  const exportJson = () => {
    const blob = new Blob([JSON.stringify({ events }, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob); const el = document.createElement('a'); el.href = url; el.download = 'tally-eventlog.json'; el.click(); setTimeout(() => URL.revokeObjectURL(url), 1000);
  };
  const th = { textAlign: 'left', fontSize: 11, fontWeight: 700, color: C.sub, textTransform: 'uppercase', letterSpacing: 0.4, padding: '9px 12px', borderBottom: `1.5px solid ${C.line}`, whiteSpace: 'nowrap', position: 'sticky', top: 0, background: C.bg, zIndex: 1 };
  const td = { fontSize: 12.5, color: C.ink, padding: '10px 12px', borderBottom: `1px solid ${C.soft}`, whiteSpace: 'nowrap', verticalAlign: 'top' };
  const mono = { fontVariantNumeric: 'tabular-nums' };
  // readable rendering of an event's data payload
  const renderData = (e) => {
    const d = e.data || {}; const P = id => personName(e.streamId, id);
    const parts = [];
    if (e.type === 'GroupCreated') parts.push(`name: ${d.name}`);
    else if (e.type === 'MemberAdded') parts.push(`${d.name}${d.email ? ` <${d.email}>` : ''}`);
    else if (e.type === 'ProfileSet') parts.push(`${d.name}${d.email !== undefined ? ` email: ${d.email || '—'}` : ''}`);
    else if (e.type === 'ExpenseAdded') { parts.push(`“${d.desc}” ${formatCur(d.amount)}`); parts.push(`paid by ${P(d.paidBy)}`); if (d.category) parts.push(d.category); if (d.recurringId) parts.push('recurring'); parts.push('split: ' + Object.entries(d.split || {}).map(([id, v]) => `${P(id)} ${formatCur(v)}`).join(', ')); if (d.note) parts.push(`note: ${d.note}`); if (d.items) parts.push(`${d.items.length} items`); }
    else if (e.type === 'PaymentRecorded') parts.push(`${P(d.from)} → ${P(d.to)} ${formatCur(d.amount)}`);
    else if (e.type === 'ExpenseEditRequested') { parts.push(`edit of ${d.targetId.slice(0, 6)}`); Object.entries(d.patch || {}).forEach(([k, v]) => parts.push(`${k}: ${k === 'split' ? Object.entries(v).map(([id, a]) => `${P(id)} ${formatCur(a)}`).join('/') : k === 'paidBy' ? P(v) : typeof v === 'number' ? formatCur(v) : String(v)}`)); }
    else if (e.type === 'ExpenseVoidRequested') parts.push(`void ${d.targetId.slice(0, 6)}`);
    else if (e.type === 'EntryRestored') parts.push(`restore ${d.targetId.slice(0, 6)}`);
    else if (e.type === 'EntryConfirmationSet') parts.push(`${d.confirmed ? 'confirm' : 'unconfirm'} ${(d.entryId || '').slice(0, 6)}`);
    else if (e.type === 'CommentPosted') parts.push(`“${d.text}”`);
    else if (e.type === 'RecurringAdded') parts.push(`${d.desc} ${formatCur(d.amount)} ${d.frequency}`);
    else if (e.type === 'RecurringStopped') parts.push(`stop ${(d.recurringId || '').slice(0, 6)}`);
    else if (e.type.startsWith('GroupDeletion')) parts.push(e.type.replace('GroupDeletion', '').toLowerCase());
    return parts.join(' · ');
  };
  function formatCur(v) { return v == null ? '' : '$' + Number(v).toFixed(2); }
  const csvBtn = <button onClick={exportCsv} style={{ height: 38, padding: '0 12px', borderRadius: 11, background: C.soft, border: `1px solid ${C.line}`, cursor: 'pointer', fontFamily: 'inherit', fontSize: 13, fontWeight: 700, color: C.ink, display: 'flex', alignItems: 'center', gap: 6 }}>CSV</button>;
  const jsonBtn = <button onClick={exportJson} style={{ height: 38, padding: '0 12px', borderRadius: 11, background: C.ink, border: 'none', cursor: 'pointer', fontFamily: 'inherit', fontSize: 13, fontWeight: 700, color: '#fff', display: 'flex', alignItems: 'center', gap: 6 }}>JSON</button>;
  const tools = <div style={{ display: 'flex', gap: 8 }}>{csvBtn}{jsonBtn}</div>;
  return (
    <div style={{ paddingBottom: embedded ? 8 : 40 }}>
      {!embedded
        ? <PageHead title="Audit log" sub={`${log.length} events · complete & replayable`} back={back} right={tools} />
        : <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 20px 0' }}><span style={{ fontSize: 12, color: C.faint, flex: 1, lineHeight: 1.4 }}>Every event, in order — this is the complete source of truth.</span>{tools}</div>}
      {log.length === 0 && <Empty text="Nothing logged yet." />}
      {log.length > 0 && (
        <div style={{ marginTop: 14, overflowX: 'auto' }}>
          <table style={{ borderCollapse: 'collapse', width: '100%', minWidth: 760 }}>
            <thead><tr>
              <th style={{ ...th, paddingLeft: 20 }}>#</th>
              <th style={th}>Date</th>
              <th style={th}>Time</th>
              <th style={th}>Actor</th>
              <th style={th}>Event</th>
              <th style={th}>Group</th>
              <th style={{ ...th, paddingRight: 20 }}>Data</th>
            </tr></thead>
            <tbody>
              {log.map((e, i) => { const d = new Date(e.ts); return (
                <tr key={e.id} style={{ background: i % 2 ? `${C.soft}55` : C.bg }}>
                  <td style={{ ...td, ...mono, color: C.faint, paddingLeft: 20 }}>{log.length - i}</td>
                  <td style={{ ...td, ...mono, color: C.sub }}>{d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}</td>
                  <td style={{ ...td, ...mono, color: C.sub }}>{d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</td>
                  <td style={td}><span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}><Avatar name={e.actor === 'me' ? 'You' : personName(e.streamId, e.actor)} size={20} /><b style={{ fontWeight: 700 }}>{e.actor === 'me' ? 'You' : personName(e.streamId, e.actor)}</b></span></td>
                  <td style={td}><span style={{ fontSize: 11, fontWeight: 700, color: C.blue, background: `${C.blue}12`, padding: '2px 8px', borderRadius: 6, fontFamily: 'monospace' }}>{e.type}</span></td>
                  <td style={{ ...td, color: C.sub }}>{gName(e.streamId)}</td>
                  <td style={{ ...td, whiteSpace: 'normal', minWidth: 280, color: C.ink }}>{renderData(e)}</td>
                </tr>
              ); })}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(
  window.AuthGate ? <window.AuthGate><App /></window.AuthGate> : <App />
);