All Settled!

Fresh start feels good.

)} {/* Header */}

💸

SplitSense

{(memberList || []).slice(0, 3).map(m => (

openProfile(m.handle)} style={{ width: 32, height: 32, borderRadius: '50%', border: '2px solid white', background: '#E5E7EB', overflow: 'hidden', marginLeft: -10, cursor: 'pointer', boxShadow: '0 2px 4px rgba(0,0,0,0.1)' }}> {m.avatarUrl ? {m.displayName}

👤

}

))} {isMultiplayer && ( )}

{/* 📊 Balance Board */}

Total Pot

${totalSpent.toFixed(2)}

Your share

${perPerson.toFixed(2)}

{myBalance === 0 ? '⚖️' : (isOwed ? '📈' : '📉')}

Current Status

{myBalance === 0 ? 'All square' : (isOwed ? `Get back $${Math.abs(myBalance).toFixed(2)}` : `You owe $${Math.abs(myBalance).toFixed(2)}`)}

{/* 🧾 Expenses List */}

Recent Activity

{(expenses ?? []).length === 0 ? (

🧘

No expenses yet. Total peace.

) : ( (expenses ?? []).map(item => (

💰

{item.desc}

Paid by {item.paidByName}

${parseFloat(item.amount).toFixed(2)}

)) )}

{/* Spacer for FAB */}

{/* FAB - Add Button */} {/* Success Toast */} {successMsg && (

{successMsg}

)} {/* Add Expense Sheet */} {isAddOpen && (

setIsAddOpen(false)} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.3)' }} />

New Expense

What was it? setNewExpense({...newExpense, desc: e.target.value})} style={{ width: '100%', fontSize: 18, padding: 12, borderRadius: 12, border: '1px solid #E5E5E5', outline: 'none', boxSizing: 'border-box' }} />

How much?

$ setNewExpense({...newExpense, amount: e.target.value})} style={{ width: '100%', fontSize: 18, padding: '12px 12px 12px 32px', borderRadius: 12, border: '1px solid #E5E5E5', outline: 'none', boxSizing: 'border-box' }} />

)} {/* Settle Sheet */} {isSettleOpen && (

setIsSettleOpen(false)} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.3)' }} />

Time to Settle Up?

This will clear all current expenses and reset balances to zero for everyone. {isMultiplayer ? ' Make sure everyone is ready!' : ''}

)}

); }