// DashboardPage.jsx — The Club Tennis Coach Dashboard const DashboardPage = ({ onNavigate }) => { const today = new Date(); const dayNames = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']; const todayName = dayNames[today.getDay()]; const sessionMap = { Monday: { type: 'Regular Group', color: '#FF2D8A' }, Tuesday: { type: 'L5 Group + Blast Movement', color: '#39FF14' }, Wednesday: { type: 'Regular Group', color: '#FF2D8A' }, Thursday: { type: 'L5 Group', color: '#39FF14' }, Friday: { type: 'L5 Group', color: '#39FF14' }, Saturday: { type: 'Regular Group', color: '#FF2D8A' }, Sunday: null, }; const todaySession = sessionMap[todayName]; const players = [ { name: 'Mia Chen', tier: 'Unlimited', payment: 'Paid', waiver: 'Signed', waiverExp: '2026-08-12', status: 'Active', present: false, tournament: true, ustaRating: '4.5' }, { name: 'Jordan Park', tier: 'Monthly', payment: 'Paid', waiver: 'Signed', waiverExp: '2026-11-04', status: 'Active', present: false, tournament: false }, { name: 'Ethan Rivera', tier: 'Drop-In', payment: 'Pending', waiver: 'Signed', waiverExp: '2026-05-20', status: 'Active', present: false, tournament: false }, { name: 'Sofia Andrade', tier: 'Unlimited', payment: 'Paid', waiver: 'Not Signed', waiverExp: null, status: 'Active', present: false, tournament: true, ustaRating: '5.0' }, { name: 'Caleb Williams', tier: 'Monthly', payment: 'Failed', waiver: 'Signed', waiverExp: '2026-09-30', status: 'Active', present: false, tournament: false, failedDays: 3 }, { name: 'Ava Thompson', tier: 'Unlimited', payment: 'Paid', waiver: 'Signed', waiverExp: '2026-05-10', status: 'Active', present: false, tournament: true, ustaRating: '4.5' }, { name: 'Noah Patel', tier: 'Monthly', payment: 'Paid', waiver: 'Signed', waiverExp: '2027-01-15', status: 'Paused', present: false, tournament: false }, { name: 'Lily Garcia', tier: 'Drop-In', payment: 'Paid', waiver: 'Not Signed', waiverExp: null, status: 'Active', present: false, tournament: false }, { name: 'Marcus Lee', tier: 'Unlimited', payment: 'Paid', waiver: 'Signed', waiverExp: '2026-12-08', status: 'Active', present: false, tournament: true, ustaRating: '4.0' }, { name: 'Zoe Kim', tier: 'Monthly', payment: 'Failed', waiver: 'Signed', waiverExp: '2026-04-30', status: 'Active', present: false, tournament: false, failedDays: 6 }, ]; const [attendance, setAttendance] = React.useState(players.map(p => ({ ...p }))); const [showAlert, setShowAlert] = React.useState(null); const toggleAttend = (i) => { const next = [...attendance]; next[i].present = !next[i].present; setAttendance(next); }; const paymentBadge = (status) => { const map = { Paid: ['#39FF14', 'rgba(57,255,20,0.1)'], Overdue: ['#FF2D8A', 'rgba(255,45,138,0.1)'], Failed: ['#FF2D8A', 'rgba(255,45,138,0.1)'], Pending: ['#F5A623', 'rgba(245,166,35,0.1)'] }; const [color, bg] = map[status] || ['#888', '#1A1A1A']; return {status}; }; const statusBadge = (status) => { const map = { Active: ['#39FF14','rgba(57,255,20,0.08)'], Paused: ['#F5A623','rgba(245,166,35,0.08)'], Comped: ['#39FF14','rgba(57,255,20,0.08)'], Cancelled: ['#888','#1A1A1A'] }; const [color, bg] = map[status] || ['#888','#1A1A1A']; return {status}; }; const daysUntil = (iso) => { if (!iso) return null; const diff = Math.round((new Date(iso) - new Date()) / 86400000); return diff; }; const waiverBadge = (status) => { const signed = status === 'Signed'; return {status}; }; const upcomingDays = [ { day: 'Mon', session: 'Regular', count: 9, color: '#FF2D8A' }, { day: 'Tue', session: 'L5 + Blast', count: 7, color: '#39FF14' }, { day: 'Wed', session: 'Regular', count: 8, color: '#FF2D8A' }, { day: 'Thu', session: 'L5', count: 6, color: '#39FF14' }, { day: 'Fri', session: 'L5', count: 10, color: '#39FF14' }, { day: 'Sat', session: 'Regular', count: 9, color: '#FF2D8A' }, { day: 'Sun', session: null, count: 0, color: '#333' }, ]; return (
{/* Top Bar */}
The Club Tennis
Coach Dashboard
Logged in as Bo Hardt
{/* Alert banner */} {showAlert && (
✓ {showAlert} sent to all registered families.
)} {/* Bo header */}
Bo Hardt
Welcome back, Bo.
Head Coach & Founder, The Club Tennis
{today.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}
{/* Quick Actions */}
{/* Summary Cards */}
{[ { label: 'Active Players', value: '50', sub: 'Total roster', color: '#F5F5F5' }, { label: 'Revenue This Month', value: '$18,240', sub: 'All tiers combined', color: '#39FF14' }, { label: 'Failed Payments', value: '2', sub: 'Cards declined, needs review', color: '#FF2D8A' }, { label: 'Unsigned Waivers', value: '2', sub: 'Action required', color: '#F5A623' }, ].map((card, i) => (
{card.label}
{card.value}
{card.sub}
))}
{/* MRR / Stripe Row */}
{[ { label: 'MRR', value: '$15,840', sub: '+$720 vs last month', color: '#39FF14', tag: 'Stripe' }, { label: 'New This Month', value: '4', sub: '3 Monthly · 1 Unlimited', color: '#F5F5F5', tag: 'Stripe' }, { label: 'Churn', value: '1', sub: '−$360 MRR lost', color: '#FF2D8A', tag: 'Stripe' }, { label: 'Renewals (7d)', value: '11', sub: 'Auto-charging this week', color: '#F5F5F5', tag: 'Stripe' }, ].map((card, i) => (
{card.tag}
{card.label}
{card.value}
{card.sub}
))}
{/* Failed Payments Queue + Waiver Expirations side-by-side */}
{/* Failed Payments */}
⚠
Failed Payments
2 cards declined
{attendance.filter(p => p.payment === 'Failed').map((p, i) => (
{p.name}
{p.tier} · ${p.tier === 'Unlimited' ? '1,120' : p.tier === 'Monthly' ? '360' : '100'} · Failed {p.failedDays}d ago
))}
{/* Waiver Expirations */}
Waivers
Expiring or unsigned
{[ ...attendance.filter(p => p.waiver === 'Not Signed').map(p => ({ ...p, urgency: 'unsigned' })), ...attendance.filter(p => p.waiver === 'Signed' && daysUntil(p.waiverExp) !== null && daysUntil(p.waiverExp) < 60).map(p => ({ ...p, urgency: 'expiring' })), ].slice(0, 5).map((p, i) => { const days = daysUntil(p.waiverExp); return (
{p.name}
{p.urgency === 'unsigned' ? 'Never signed' : (days < 0 ? `Expired ${-days}d ago` : `Expires in ${days}d`)}
); })}
{/* Today's Session */}
Today: {todayName}
{todaySession ? todaySession.type : 'No Session'}
{todaySession && ( 5:30-7:30 PM )}
Attendance ({attendance.filter(p=>p.present).length}/{attendance.length})
{attendance.map((p, i) => (
toggleAttend(i)} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 24px', cursor: 'pointer', background: p.present ? 'rgba(57,255,20,0.04)' : 'transparent', borderLeft: p.present ? '3px solid #39FF14' : '3px solid transparent', transition: 'all 120ms' }}>
{p.present && ✓}
{p.name} {p.tier}
))}
{/* Upcoming Week */}
Upcoming
This Week
{upcomingDays.map((d, i) => (
{d.day}
{d.session ? {d.session} : REST }
{d.session && (
{d.count}
players
)}
))}
{/* Full Roster Table */}
Roster Overview
{['Player','Tier','Status','Payment','Waiver','Actions'].map(h => ( ))} {attendance.map((p, i) => ( e.currentTarget.style.background = '#1A1A1A'} onMouseLeave={e => e.currentTarget.style.background = 'transparent'}> ))}
{h}
{p.name} {p.tier} {statusBadge(p.status)} {paymentBadge(p.payment)} {waiverBadge(p.waiver)}
{/* Spain Camp Signups */} {(() => { const spainSignups = [ { player: 'Ava Thompson', age: 14, parent: 'Lisa Thompson', email: 'parent1@example.com', phone: '(310) 555-0100', usta: '4.5', depositPaid: true }, { player: 'Marcus Lee', age: 16, parent: 'David Lee', email: 'parent2@example.com', phone: '(818) 555-0100', usta: '4.0', depositPaid: false }, { player: 'Sofia Andrade', age: 13, parent: 'Carlos Andrade', email: 'parent3@example.com', phone: '(424) 555-0100', usta: '5.0', depositPaid: true }, ]; return (
Summer 2026
Spain Camp Signups ({spainSignups.length} / 6 spots)
{spainSignups.filter(s => s.depositPaid).length}
deposits paid
{['Player','Age','Parent','Email','USTA','Deposit'].map(h => ( ))} {spainSignups.map((s, i) => ( e.currentTarget.style.background = '#1A1A1A'} onMouseLeave={e => e.currentTarget.style.background = 'transparent'}> ))}
{h}
{s.player} {s.age} {s.parent} {s.email} {s.usta} {s.depositPaid ? 'Paid' : 'Pending'}
{6 - spainSignups.length} spots remaining
); })()} {/* Tournament Team Roster */}
Tournament Team
USTA Travel Roster ({attendance.filter(p => p.tournament).length} players)
{['Player','USTA Rating','Tier','Season Fee'].map(h => ( ))} {attendance.filter(p => p.tournament).map((p, i) => ( ))}
{h}
{p.name} {p.ustaRating} {p.tier} $500 paid
); }; Object.assign(window, { DashboardPage });