// Coach web dashboard — sidebar nav + multiple views const { useState: cUseState, useMemo: cUseMemo } = React; // ────────────── Coach wallpaper (lighter for web) ────────────── function CoachWallpaper({ variant }) { return variant === "pure" ?
:
; } // ────────────── Sidebar ────────────── function Sidebar({ view, setView, athleteOpen, setAthleteOpen }) { const items = [ { id: "roster", label: "Roster", icon: Ic.Users, count: 8 }, { id: "calendar", label: "Calendar", icon: Ic.Calendar }, { id: "plans", label: "Plan builder", icon: Ic.Library }, { id: "analytics", label: "Analytics", icon: Ic.Trend }, { id: "messages", label: "Messages", icon: Ic.Chat, count: 3 }, ]; return (
{/* Brand */}
Run
Coach · M. Webb
{/* Nav */}
{items.map(item => { const active = view === item.id && !athleteOpen; return ( ); })}
{/* Section: Athletes */}
ATHLETES
{RUN_DATA.roster.slice(0, 6).map((a, i) => ( ))}
Marcus Webb
Boulder Track Club
); } // ────────────── Topbar ────────────── function Topbar({ title, subtitle, right }) { return (
{subtitle &&
{subtitle}
}
{title}
{right}
); } function SearchPill({ placeholder = "Search…" }) { return (
{placeholder} ⌘K
); } function GBtn({ children, primary, onClick, style }) { return ( ); } // ════════════════════════════════════════════════════════════════════ // ROSTER VIEW // ════════════════════════════════════════════════════════════════════ function RosterView({ onOpenAthlete }) { const roster = RUN_DATA.roster; const greenCount = roster.filter(a => a.status === "green").length; const yellowCount = roster.filter(a => a.status === "yellow").length; const redCount = roster.filter(a => a.status === "red").length; return (
Filter Invite } /> {/* Summary cards */}
{greenCount} / {yellowCount} {redCount}
} sub="green · caution · over" />
{/* Roster table */}
ATHLETE
GROUP
LAST RUN
LOAD (ATL)
TREND
NEXT RACE
{roster.map((a, i) => ( ))}
); } function SummaryCard({ label, value, sub, highlight }) { return ( {highlight &&
}
{label}
{value}
{sub}
); } // ════════════════════════════════════════════════════════════════════ // ATHLETE DEEP-DIVE // ════════════════════════════════════════════════════════════════════ function AthleteDetail({ idx, onBack }) { const a = RUN_DATA.roster[idx]; const t = RUN_DATA.trends; return (
BACK TO ROSTER} title={a.name} right={ <> Message Voice note Add session } /> {/* Profile band */}
{a.status.toUpperCase()}} />
{/* Charts row */}
{/* Load over time */}
FITNESS / FATIGUE
ATL 86 · CTL 78 · Form +8
Fitness Fatigue
{/* Pace progression */}
5K PACE TREND
6:01▼ 8s / mi
{/* Race readiness */}
RACE READINESS
Boulder 10K · 28d
Projected target: 38:40 — 39:10
{/* AI recommendation */}
AI · WEEKLY RECOMMENDATION
Maya's recovery is strong (HRV +4 days, ATL/CTL ratio 1.10). Consider nudging Saturday's tempo to 6:45/mi from 6:50, and adding a 6th rep to Tuesday's 1K set. Hold long-run volume — high but in band.
Apply suggestions Modify Dismiss
{/* Recent sessions */}
Recent sessions
{RUN_DATA.week.filter(d => d.status === "done").map((s, i, arr) => (
{s.day.slice(0,3).toUpperCase()}
{s.title}
{s.actual}
Hit target
))}
Training heatmap
); } function Metric({ label, value, sub }) { return (
{label}
{value}
{sub &&
{sub}
}
); } function FitnessChart() { // 8 weeks of data const fit = [62, 65, 68, 72, 74, 76, 77, 78]; const fat = [55, 60, 58, 65, 62, 68, 64, 42]; const max = 90; const w = 280, h = 100; const stepX = w / (fit.length - 1); const toPath = (arr) => arr.map((v, i) => `${i === 0 ? 'M' : 'L'} ${i * stepX} ${h - (v / max) * h}`).join(" "); return ( {fit.map((v, i) => ( ))} ); } function PaceChart() { // Lower is better (pace) const pace = [382, 378, 375, 368, 365, 363, 361, 361]; // seconds const min = 355, max = 385; const w = 220, h = 70; const stepX = w / (pace.length - 1); const path = pace.map((v, i) => `${i === 0 ? 'M' : 'L'} ${i * stepX} ${((v - min) / (max - min)) * h}`).join(" "); return ( {pace.map((v, i) => ( ))} ); } // ════════════════════════════════════════════════════════════════════ // CALENDAR VIEW (week view) // ════════════════════════════════════════════════════════════════════ function CalendarView() { const days = ["Mon May 12", "Tue May 13", "Wed May 14", "Thu May 15", "Fri May 16", "Sat May 17", "Sun May 18"]; const athletes = RUN_DATA.roster.slice(0, 5); return (
← This week →
Add session } /> {/* Header row */}
ATHLETE
{days.map((d, i) => { const isToday = i === 3; return (
{d.split(" ")[0].toUpperCase()}
{d.split(" ")[2]}
); })}
{/* Athletes rows */} {athletes.map((a, ai) => (
{a.name}
{a.group}
{[0,1,2,3,4,5,6].map(di => { const session = sampleSession(ai, di); return (
{session && (
{session.type}
{session.title}
{session.detail}
)}
); })}
))}
); } function sampleSession(athleteIdx, dayIdx) { // Deterministic distribution const matrix = [ // Mon Tue Wed Thu Fri Sat Sun ["easy", "speed", "easy", "speed", null, "long", "easy"], ["easy", "tempo", "easy", "speed", null, "long", "rest"], [null, "speed", "easy", null, "tempo", "long", "easy"], ["easy", "tempo", "rest", "speed", null, "long", "easy"], ["easy", "speed", "easy", "tempo", null, "long", "easy"], ]; const t = matrix[athleteIdx]?.[dayIdx]; if (!t) return null; const M = { easy: { type: "Easy", title: "5–6 mi", detail: "8:30/mi", color: "rgba(255,182,39,0.10)", fg: "#A36B00", border: "rgba(255,182,39,0.3)" }, speed: { type: "Speed", title: "8×400", detail: "85s/400", color: "rgba(255,107,53,0.12)", fg: "#C8431A", border: "rgba(255,107,53,0.3)" }, tempo: { type: "Tempo", title: "4 mi @ T", detail: "6:45/mi", color: "rgba(255,107,53,0.08)", fg: "#C8431A", border: "rgba(255,107,53,0.22)" }, long: { type: "Long", title: "10–12 mi", detail: "Last 4 fast", color: "rgba(255,59,48,0.10)", fg: "#B0211B", border: "rgba(255,59,48,0.28)" }, rest: { type: "Rest", title: "Mobility", detail: "—", color: "rgba(28,25,23,0.04)", fg: "var(--ink-3)", border: "rgba(28,25,23,0.08)" }, }; return M[t]; } // ════════════════════════════════════════════════════════════════════ // PLAN BUILDER // ════════════════════════════════════════════════════════════════════ function PlanBuilder() { const w = RUN_DATA.todayWorkout; return (
Library Save as template Publish to athletes } />
{/* Builder canvas */} {/* Title row */}
SPEED · 5K PACE
{w.title}
~57 min · 6.5 mi
{/* Steps */}
{w.structure.map((s, i) => (
⋮⋮
{i + 1}
{s.label}
{s.detail}
{s.duration}
{s.pace}
))}
{/* Coach note */}
COACH NOTE
"{w.coachNote}"
Record voice note
{/* Right rail */}
ASSIGN TO
{RUN_DATA.roster.slice(0, 5).map((a, i) => (
); } // ════════════════════════════════════════════════════════════════════ // ANALYTICS VIEW // ════════════════════════════════════════════════════════════════════ function AnalyticsView() { return (
This season Group Export } />
Team weekly mileage
Sum across all 8 athletes
{["12w", "6m", "1y"].map((p, i) => ( ))}
Load distribution
Current ATL across roster
{RUN_DATA.roster.map((a, i) => (
{a.name.split(" ")[0]}
100 ? "var(--accent-3)" : a.load > 90 ? "var(--accent-2)" : "var(--accent)", borderRadius: 3, }} />
{a.load}
))}
Team heatmap · last 7 weeks
AI insights
{[ { color: "var(--accent-3)", title: "Jordan: 3-day load spike", body: "ATL 104 with HRV dropping — recommend rest or substitution Thursday." }, { color: "var(--accent-2)", title: "Sophie peaking nicely", body: "Form rising into Boulder 5K (14d). Maintain volume; sharpen Wednesday." }, { color: "#1A7A36", title: "Aïsha streak: 6 PRs in 6 weeks", body: "Confidence + consistency strong. Consider testing 1500m PR." }, ].map((insight, i) => (
0 ? "0.5px solid var(--line)" : "none" }}>
{insight.title}
{insight.body}
))}
); } function TeamMileageChart() { const data = [228, 245, 252, 268, 274, 261, 278, 286, 271, 282, 274, 284]; const max = 300; const w = 500, h = 140; const stepX = w / (data.length - 1); const path = data.map((v, i) => `${i === 0 ? 'M' : 'L'} ${i * stepX} ${h - (v / max) * h}`).join(" "); return ( {/* gridlines */} {[0.25, 0.5, 0.75].map(g => ( ))} {data.map((v, i) => ( ))} ); } // ════════════════════════════════════════════════════════════════════ // MESSAGES VIEW (coach side) // ════════════════════════════════════════════════════════════════════ function CoachMessagesView() { const [selected, setSelected] = cUseState(0); const conversations = RUN_DATA.roster.map((a, i) => ({ ...a, lastMsg: i === 0 ? "Got it. Heading to the track at 4." : i === 1 ? "Saw the long run notes — quick Q on Sat" : i === 2 ? "Felt great today, ready for tomorrow!" : i === 3 ? "Hamstring still tight after Tuesday." : "Thanks coach 🙌", unread: i === 1 || i === 3 || i === 4, when: i === 0 ? "9:18 AM" : i === 1 ? "8:34 AM" : i === 2 ? "Y'day" : i === 3 ? "Y'day" : "2d", })); return (
Voice broadcast} /> {/* Conv list */}
{conversations.map((c, i) => ( ))}
{/* Thread */}
{conversations[selected].name}
{conversations[selected].group} · {conversations[selected].races[0]} in {conversations[selected].nextRace}
Profile
{RUN_DATA.messages.map((m, i) => { const isMe = m.from !== "me"; // flipped on coach side — "me" in athlete data is coach // actually: in coach view, "coach" = me, "me" (athlete) = them const fromCoach = m.from === "coach"; return (
{m.voice ? (
{[6,9,12,8,14,10,16,7,12,10,14,8,11,9,13,6,10,8].map((h, idx) => (
))}
{m.duration}
) : m.text}
); })}
Message Maya…
); } // ════════════════════════════════════════════════════════════════════ // Coach App shell // ════════════════════════════════════════════════════════════════════ function CoachApp({ variant }) { const [view, setView] = cUseState("roster"); const [athleteOpen, setAthleteOpen] = cUseState(null); let content; if (view === "roster" && athleteOpen !== null) content = setAthleteOpen(null)} />; else if (view === "roster") content = setAthleteOpen(i)} />; else if (view === "calendar") content = ; else if (view === "plans") content = ; else if (view === "analytics") content = ; else if (view === "messages") content = ; return (
{content}
); } Object.assign(window, { CoachApp });