SpendSquad

Weekly Budget Tracker

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

m.handle && typeof openProfile === 'function' ? openProfile(m.handle) : null} style={{ width: 32, height: 32, borderRadius: '50%', marginLeft: i > 0 ? -12 : 0, border: '2px solid #F9F6F0', background: m.avatarUrl ? `url(${m.avatarUrl}) center/cover` : '#E2D9C8', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, cursor: m.handle ? 'pointer' : 'default', boxShadow: '0 2px 4px rgba(0,0,0,0.05)' }}> {!m.avatarUrl && '👤'}

))}

{/* Budget Meter */}

My Remaining

${remaining.toFixed(0)}

of my ${weeklyBudget}

{/* Motivation Message */}

{spentPercentage < 50 ? "✨ Looking good, bestie!" : spentPercentage < 80 ? "🌿 Pace yourself, still a few days left." : "🍄 Entering goblin mode. Spend carefully!"}

{/* Squad Rankings */}

🏆 Squad Leaderboard

{(squadStats || []).map((stat, idx) => (

#{idx + 1}

stat.handle && typeof openProfile === 'function' ? openProfile(stat.handle) : null} style={{ width: 32, height: 32, borderRadius: '50%', background: stat.avatarUrl ? `url(${stat.avatarUrl}) center/cover` : '#E2D9C8', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, cursor: stat.handle ? 'pointer' : 'default' }}> {!stat.avatarUrl && '👤'}

{stat.id === myUid ? 'You' : (stat.displayName || 'Someone')} ${stat.remaining.toFixed(0)} left of ${stat.budget}

90 ? '#D4A5A5' : '#8DA38B', width: `${Math.min(100, stat.percentage)}%`, borderRadius: 3, transition: 'width 0.5s ease' }} />

))}

{/* Expenses List */}

Recent Activity

{typeof share === 'function' && ( )}

{(displayExpenses || []).length === 0 ? (

🌸

A fresh start! No expenses yet.

) : (

{(displayExpenses || []).sort((a, b) => (b._timestamp || 0) - (a._timestamp || 0)).map((expense) => (

expense._user?.handle && typeof openProfile === 'function' ? openProfile(expense._user.handle) : null} style={{ width: 40, height: 40, borderRadius: '50%', background: expense._user?.profileImageUrl ? `url(${expense._user.profileImageUrl}) center/cover` : '#E2D9C8', marginRight: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, cursor: expense._user?.handle ? 'pointer' : 'default' }} > {!expense._user?.profileImageUrl && '👤'}

{expense.category.split(' ')[0]} {expense.note || expense.category.substring(2)} ${Number(expense.amount).toFixed(2)}

{expense.isDemo ? 'Demo • ' : ''}{expense._user?.displayName || 'Someone'} {new Date(expense._timestamp || Date.now()).toLocaleDateString([], { month: 'short', day: 'numeric' })}

))}

)}

{/* FAB */}

{/* Add Expense Bottom Sheet */}

setIsAddOpen(false)}>

e.stopPropagation()} style={{ position: 'absolute', bottom: 0, left: 0, right: 0, backgroundColor: '#FFFFFF', borderTopLeftRadius: 24, borderTopRightRadius: 24, paddingTop: 12, paddingBottom: 'calc(env(safe-area-inset-bottom, 20px) + 24px)', paddingLeft: 24, paddingRight: 24, transform: isAddOpen ? 'translateY(0)' : 'translateY(100%)', transition: 'transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1)' }} >

$ setAmount(e.target.value)} autoFocus={isAddOpen} style={{ flex: 1, border: 'none', outline: 'none', fontSize: 32, fontWeight: 700, color: '#3A403A', backgroundColor: 'transparent', padding: 0 }} />

{(CATEGORIES || []).map(cat => ( ))}

setNote(e.target.value)} style={{ width: '100%', padding: '16px', borderRadius: 12, border: '1px solid #E2D9C8', backgroundColor: '#F9F6F0', fontSize: 16, marginBottom: 24, boxSizing: 'border-box', outline: 'none', color: '#3A403A' }} />

{/* Settings Modal */}

setIsSettingsOpen(false)}>

e.stopPropagation()} style={{ width: '100%', maxWidth: 360, backgroundColor: '#FFFFFF', borderRadius: 24, padding: 24, boxSizing: 'border-box', transform: isSettingsOpen ? 'scale(1)' : 'scale(0.95)', transition: 'transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275)' }} >

Settings 🌿

My Weekly Budget

$ updateBudget(e.target.value)} style={{ flex: 1, border: 'none', background: 'transparent', padding: '16px 8px', fontSize: 16, outline: 'none' }} />

Finish the Week

Archive current expenses and start fresh with a full budget. (Normally happens automatically on Sundays!)

); }