);
}
// ═══════════════════════════════════════════════════════════════
// DASHBOARD
// ═══════════════════════════════════════════════════════════════
function DashboardScreen({ ctx }) {
const [tab, setTab] = React.useState('activity'); // activity | balance
const [me] = useMe();
const myName = ctx.myName || (me.name || 'Du');
// Trip's home currency (frozen at create-name) and FX snapshot.
const homeCurrency = (ctx.pot && ctx.pot.homeCurrency) || 'SEK';
const fxRates = (ctx.pot && ctx.pot.fxRates) || null;
// Helper: amount in home currency for a given expense (canonical for math).
const homeAmt = (e) => (e.home != null ? Number(e.home) : Number(e.sek)) || 0;
const totals = ctx.expenses.reduce((acc, e) => acc + homeAmt(e), 0);
// SEK reference for the totals — derived from the trip's frozen FX snapshot.
const totalsSek = (window.convertFx
? window.convertFx(totals, homeCurrency, 'SEK', fxRates, homeCurrency)
: totals);
// Compute per-person balance in HOME currency across the pot's actual members.
// Each expense splits evenly across ALL current crew members (pot.members),
// not just whoever was in splitWith when it was created — this way new joiners
// get their share of earlier expenses without needing data backfills.
const potMembers = (ctx.pot && ctx.pot.members && ctx.pot.members.length) ? ctx.pot.members : [myName];
const perPerson = {};
potMembers.forEach(p => perPerson[p] = 0);
for (const e of ctx.expenses) {
const amt = homeAmt(e);
const share = amt / potMembers.length;
for (const p of potMembers) perPerson[p] -= share;
if (perPerson[e.paidBy] !== undefined) perPerson[e.paidBy] += amt;
}
// Build crew list from the pot's members (no hardcoded friends).
const palette = [PEOPLE_COLORS.E, PEOPLE_COLORS.M, PEOPLE_COLORS.S, PEOPLE_COLORS.L, PEOPLE_COLORS.Y];
const crews = potMembers.map((name, i) => {
const isMe = name === myName;
const display = name;
return {
name: display,
initial: display.trim().charAt(0).toUpperCase() || '?',
color: isMe ? PEOPLE_COLORS.Y : palette[i % palette.length],
balance: Math.round(perPerson[name] || 0),
isMe,
photo: isMe ? me.photo : undefined,
};
});
const catIcon = { food: '🍴', drinks: '🥃', lodging: '🏠', transit: '🚆', fuel: '⛽', tickets: '🎫', other: '•••' };
const catLabel = { food: 'Food', drinks: 'Drinks', lodging: 'Lodging', transit: 'Travel', fuel: 'Fuel', tickets: 'Tickets', other: 'Other' };
return (
ctx.go('home')}
title={ctx.pot.name ? ctx.pot.name.toUpperCase() : 'NEW TRIP'}
right={(() => {
// Only render crew in the header if there's actually more than just "me".
const others = potMembers.filter(m => m !== myName);
return (