{/* ✨ ANIMATION OVERLAY */} {showChaChing && (

💸

Cha-Ching!

)} {/* 🌸 HEADER */}

PennyPals 🎀

Savings Sprint

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

0 ? -16 : 0, zIndex: 10 - i, background: m.avatarUrl ? `url(${m.avatarUrl})` : VIBE_COLORS.primary, backgroundSize: 'cover', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 2px 5px rgba(0,0,0,0.1)', cursor: 'pointer' }} onClick={() => m.handle && openProfile && openProfile(m.handle)}> {!m.avatarUrl && 🌸}

))} {(memberList || []).length > 3 && (

+{(memberList || []).length - 3}

)}

{/* 🎀 TABS */}

{/* 👛 MY DIARY TAB */} {activeTab === 'me' && (

{/* PROGRESS DASHBOARD */}

Weekly Budget

{isEditingBudget ? (

setNewBudget(e.target.value)} style={{ width: 80, padding: 4, borderRadius: 8, border: `1px solid ${VIBE_COLORS.border}`, textAlign: 'right' }} />

) : ( )}

${mySpent.toFixed(2)} spent

{/* PROGRESS BAR ✨ WOW FACTOR */}

{myPercent < 100 ? `$${(myBudget - mySpent).toFixed(2)} left 🕊️` : 'Over budget! 🥺'} {myPercent.toFixed(0)}%

{/* ✨ INLINE QUICK ADD */}

Quick Log 🎀

{/* EXPENSE LIST */}

Recent Splurges ✨

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

🎀

No splurges yet! You're saving so well.

) : (

{(myExpenses || []).map(exp => (

{exp.category.split(' ')[1] || '🎀'}

{exp.isDemo ? Demo : null}{exp.desc}

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

${exp.amount.toFixed(2)}

))}

)}

)} {/* 🏆 LEADERBOARD TAB */} {activeTab === 'leaderboard' && (

Savings Sprint 🏁

Who's keeping their purse strings tightest?

{(leaderboardStats || []).map((stat, index) => (

setSelectedFriend(stat)} style={{ background: VIBE_COLORS.cardBg, borderRadius: 20, padding: 16, display: 'flex', alignItems: 'center', gap: 16, cursor: 'pointer', boxShadow: index === 0 ? '0 8px 24px rgba(244, 143, 177, 0.25)' : '0 2px 10px rgba(0,0,0,0.05)', border: index === 0 ? `2px solid ${VIBE_COLORS.primary}` : 'none', transform: index === 0 ? 'scale(1.02)' : 'scale(1)', transition: 'transform 0.2s ease' }} >

{index === 0 ? '👑' : `#${index + 1}`}

{!stat.avatarUrl && 🌸}

{stat.displayName} {stat.percent.toFixed(0)}% spent

{/* Mini progress bar */}

))}

{/* Multiplayer hint if solo */} {isMultiplayer && (memberList || []).length === 1 && (

💌

Invite your friends to turn saving into a fun challenge!

)}

{/* ➕ QUICK ADD FAB */} {/* 🎀 FRIEND SUMMARY MODAL (BOTTOM SHEET) */} {selectedFriend && (

{/* Backdrop */}

setSelectedFriend(null)} /> {/* Sheet */}

{!selectedFriend.avatarUrl && 🌸}

{selectedFriend.displayName}

Has spent ${selectedFriend.spent.toFixed(2)} of their budget.

Tea Spilled ☕

Spending heavily on:
{selectedFriend.topCategory}

)} {/* 💸 QUICK ADD MODAL (BOTTOM SHEET) */}

setIsQuickAddOpen(false)} />

Log a Splurge 🎀

{/* Name Input */}

What did you buy? setExpenseForm({...expenseForm, desc: e.target.value})} placeholder="e.g. Iced Matcha" style={{ width: '100%', height: 52, padding: '0 16px', borderRadius: 16, border: `1px solid ${VIBE_COLORS.border}`, fontSize: 16, background: VIBE_COLORS.bg, boxSizing: 'border-box' }} required />

{/* Amount Input */}

How much? ($) setExpenseForm({...expenseForm, amount: e.target.value})} placeholder="0.00" style={{ width: '100%', height: 52, padding: '0 16px', borderRadius: 16, border: `1px solid ${VIBE_COLORS.border}`, fontSize: 16, background: VIBE_COLORS.bg, boxSizing: 'border-box' }} required />

{/* Category Chips */}