); // 💰 FORMATTER const formatMoney = (amount) => { return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0 }).format(amount); }; return (

{/* 🎊 CONFETTI OVERLAY */} {showConfetti && (

{Array.from({ length: 30 }).map((_, i) => (

{['💰', '🧧', '✨', '🏮'][Math.floor(Math.random() * 4)]}

))}

)} {/* 🔔 TOAST NOTIFICATION */} {toast && (

{toast}

)} {/* 🏯 HEADER */}

LUNAR NEW YEAR 2025

Red Packet Fortune

{isMultiplayer && (

👥 Family: {(memberList || []).length}

)}

{/* 🖥️ MAIN VIEW SWITCHER */} {view === 'dashboard' && (

{/* 🦁 MASCOT & NET FORTUNE */}

{myStats.net > 0 ? '🐲' : (myStats.net === 0 ? '🐠' : '🐱')}

NET FORTUNE

= 0 ? THEME.gold : THEME.cream, textShadow: '0 2px 10px rgba(0,0,0,0.3)', margin: '8px 0' }}> {myStats.net < 0 ? '-' : '+'}{formatMoney(Math.abs(myStats.net))}

{myStats.net > 0 ? "The Dragon of Prosperity smiles upon you!" : (myStats.net === 0 ? "Balance brings harmony like the Koi." : "Generosity is the seed of future wealth!")}

{/* 🧧 STATS CARDS */}

🧧

RECEIVED

{formatMoney(myStats.received)}

🤲

GIVEN

{formatMoney(myStats.given)}

{/* 📜 RECENT ACTIVITY */}

Recent Activity

{getMyTransactions().slice(0, 3).map(t => (

{t.type === 'in' ? '🧧' : '💸'}

{t.person}

{t.group}

{t.type === 'in' ? '+' : '-'}{formatMoney(t.amount)}

{new Date(t.date).toLocaleDateString()}

))} {getMyTransactions().length === 0 && (

No transactions yet. Tap + to add one!

)}

{/* 🏮 MULTIPLAYER TEASER */} {(!isMultiplayer || (memberList || []).length < 2) && (

👨‍👩‍👧‍👦

Track Family Fortune?

Invite family to see who is the most prosperous!

)}

)} {/* 📋 LOG VIEW */} {view === 'log' && (

Transaction Scroll

{getMyTransactions().sort((a,b) => b.date - a.date).map(t => (

{t.type === 'in' ? '🧧' : '🤝'}

{t.person}

{t.group} • {t.note || 'No note'}

{t.type === 'in' ? '+' : '-'}{formatMoney(t.amount)}

))}

)} {/* 🏆 LEADERBOARD VIEW */} {view === 'leaderboard' && (

Prosperity Scroll

Who has the favor of the Fortune God?

{(() => { // Group transactions by user const userStats = {}; (transactions || []).forEach(t => { const uid = t._user?.id || 'unknown'; if (!userStats[uid]) { userStats[uid] = { id: uid, name: t._user?.displayName || 'Unknown', avatar: members?.find(m => m.id === uid)?.avatarUrl, handle: members?.find(m => m.id === uid)?.handle, net: 0, received: 0 }; } const amt = Number(t.amount); if (t.type === 'in') { userStats[uid].net += amt; userStats[uid].received += amt; } else { userStats[uid].net -= amt; } }); const sortedUsers = Object.values(userStats || {}).sort((a,b) => b.net - a.net); if ((sortedUsers || []).length === 0) return

No records yet. Start the competition!

; return (sortedUsers || []).map((u, i) => (

{i === 0 ? '👑' : i + 1}

{!u.avatar && '👤'}

u.handle && openProfile && openProfile(u.handle)}>

{u.name} {i === 0 && Highest Fortune!}

Received total: {formatMoney(u.received)}

= 0 ? THEME.jade : THEME.red }}> {u.net >= 0 ? '+' : ''}{formatMoney(u.net)}

)); })()}

{isMultiplayer ? ( ) : ( )}

)} {/* ➕ ADD MODAL (Bottom Sheet) */} {view === 'add' && (

Record Red Packet

{/* Type Toggle */}

{/* Form Fields */}

Amount ($) setNewTx({ ...newTx, amount: e.target.value })} style={{ width: '100%', padding: 12, fontSize: 24, borderRadius: 12, border: '1px solid #ddd', outline: 'none', color: THEME.red, fontWeight: 'bold', boxSizing: 'border-box' }} />

{newTx.type === 'in' ? 'From' : 'To'} Who? setNewTx({ ...newTx, person: e.target.value })} style={{ width: '100%', padding: 12, fontSize: 16, borderRadius: 12, border: '1px solid #ddd', outline: 'none', boxSizing: 'border-box' }} />

Group

Note (Optional) setNewTx({ ...newTx, note: e.target.value })} style={{ width: '100%', padding: 12, fontSize: 16, borderRadius: 12, border: '1px solid #ddd', outline: 'none', boxSizing: 'border-box' }} />

)} {/* 🧭 BOTTOM NAV */}

setView('dashboard')} theme={THEME} />

setView('leaderboard')} theme={THEME} />

); } function NavBtn({ label, icon, active, onClick, theme }) { return ( ); }