/* ───────────────────────────────────────────────────────────
Peak Athlete · Performance Lab v03 prototype
The Deck — athlete home page
Pulls real races from v_race_kpis via PA_DATA, feeds the
story engine (PA_STORY) for the headline, and renders:
- HeadlineStory (ported from design-reference)
· Pill eyebrow + date range
· Large display sentence (from PA_STORY.pickStory)
· Supporting paragraph (kind-aware)
· Three micro-stats (Latest · vs prior · Best)
· HeroTrendChart (last 12 same-event times · median baseline)
· Corner lightning mark
- Recent races list (last 5)
- Coach notes placeholder (no surface yet)
- Next session placeholder
Coach persona renders a minimal "Squad in Phase 4" placeholder.
─────────────────────────────────────────────────────────── */
const { useState: useDeckState, useEffect: useDeckEffect } = React;
// ── Small presentation helpers ───────────────────────────────
function storyEyebrow(kind) {
const map = {
new_pb: 'NEW PERSONAL BEST',
coach_message: 'NOTE FROM YOUR COACH',
metric_delta: 'VS. YOUR USUAL',
trend: 'TREND',
streak: 'STREAK',
recent_race: 'RECENT RACE',
welcome: 'TODAY',
};
return map[kind] || 'TODAY';
}
// Sub-paragraph beneath the display sentence. Pure-English, never
// surfaces sigma/z-scores. Returns '' when nothing useful to add.
function storySubtext({ story, latest, prior, best, sameEventCount }) {
if (!story || !latest) return '';
const event = latest.event || 'this event';
const k = story.kind;
if (k === 'new_pb' && best && prior) {
return `Your fastest ${event} to date — the previous best stood since ${shortDate(best.priorDate || prior.date)}.`;
}
if (k === 'metric_delta') {
const bucket = story.meta?.bucket;
if (bucket === 'standout' || bucket === 'ahead' || bucket === 'above') {
return `A step up from your recent ${event}s. Keep the same prep the next time out and see if it holds.`;
}
if (bucket === 'touch' || bucket === 'behind' || bucket === 'off') {
return `Worth a look against your warm-up, sleep, and race prep. One race isn't a trend — two in a row is worth asking your coach about.`;
}
return '';
}
if (k === 'recent_race') {
if (sameEventCount >= 3) {
return `Sits in range with your last ${sameEventCount - 1} ${event} races. Nothing jumps out — solid and expected.`;
}
if (sameEventCount === 2) {
return `Second ${event} on record. Your picture fills in with each race.`;
}
return `Your first ${event} on the Deck. The next one builds the comparison.`;
}
if (k === 'trend' || k === 'streak') {
return `A consistent line across your last few ${event}s.`;
}
if (k === 'welcome') {
return `Upload or sync a session to light up your numbers.`;
}
return '';
}
// Inline-color the punchy phrase inside the display sentence.
// Returns an array of React nodes (strings + a colored span).
// If highlight is falsy or not found, returns the plain sentence.
function renderSentenceWithHighlight(sentence, highlight, color) {
if (!sentence) return '';
if (!highlight || !sentence.includes(highlight)) return sentence;
const idx = sentence.indexOf(highlight);
const before = sentence.slice(0, idx);
const after = sentence.slice(idx + highlight.length);
return [
before,
{highlight},
after,
];
}
function shortDate(iso) {
if (!iso) return '—';
const d = new Date(iso);
if (isNaN(d)) return '—';
return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
}
function longMonthDay(iso) {
if (!iso) return '';
const d = new Date(iso);
if (isNaN(d)) return '';
return d.toLocaleDateString(undefined, { day: '2-digit', month: 'short' }).toUpperCase();
}
function median(values) {
if (!values.length) return null;
const s = [...values].sort((a, b) => a - b);
const m = Math.floor(s.length / 2);
return s.length % 2 ? s[m] : (s[m - 1] + s[m]) / 2;
}
// ── HeroTrendChart ───────────────────────────────────────────
// Custom SVG line + area, median baseline, newest point highlighted.
const HeroTrendChart = ({ data, avg }) => {
if (!data || data.length < 2) return null;
const W = 420, H = 130;
const pad = 0.04;
const max = Math.max(...data) + (Math.max(...data) - Math.min(...data)) * pad + 0.01;
const min = Math.min(...data) - (Math.max(...data) - Math.min(...data)) * pad - 0.01;
const span = (max - min) || 1;
const xs = (i) => (i / (data.length - 1)) * W;
const ys = (v) => H - ((v - min) / span) * H;
const path = window.PA_SVG.smoothPath(data.map((v, i) => [xs(i), ys(v)]));
const area = path + ` L${W},${H} L0,${H} Z`;
const last = data[data.length - 1];
return (
);
};
// ── HeadlineStory ────────────────────────────────────────────
// Full-width hero card. Two-column grid when we have a chart to
// show, single-column when we only have a sentence.
// ── YourRequestsCard ─────────────────────────────────────────
// Right-column card showing the last 5 race_requests with status
// chips. Chips mirror the live dashboard's states:
// pending -> amber "In queue"
// processing -> signal "Analyzing"
// completed -> lime "Ready"
// failed -> flag "Failed"
function statusChipStyle(status) {
const base = {
display: 'inline-flex', alignItems: 'center', gap: 4,
padding: '2px 7px', borderRadius: 5,
font: '700 9px var(--font-ui)',
letterSpacing: '0.08em', textTransform: 'uppercase',
};
switch (status) {
case 'completed':
return { ...base, background: 'color-mix(in oklch, var(--lime-eff) 18%, transparent)', color: 'var(--lime-eff)' };
case 'processing':
return { ...base, background: 'color-mix(in oklch, var(--signal-eff) 16%, transparent)', color: 'var(--signal-eff)' };
case 'failed':
return { ...base, background: 'color-mix(in oklch, var(--flag-eff) 14%, transparent)', color: 'var(--flag-eff)' };
case 'pending':
default:
return { ...base, background: 'var(--bg-3)', color: 'var(--tx-md)' };
}
}
// v01.23 — `t` is now a parameter so callers can supply the
// translation function. Falls back to English-ish keys when no t
// is passed (callers that haven't been updated still work).
function statusLabel(status, t) {
const _t = t || ((k) => k);
switch (status) {
case 'completed': return _t('deck.status.completed');
case 'processing': return _t('deck.status.processing');
case 'failed': return _t('deck.status.failed');
case 'pending':
default: return _t('deck.status.pending');
}
}
// v01.29 — admin notes, "check Races" hint, retry button.
//
// Live's Race Analysis Card renders three pieces the prototype was
// missing: the admin's note when a request is processed, a nudge to
// the Races tab on completed rows, and a way out of a failed upload.
// All three live here now.
//
// Retry dispatches `pa:open-modal` with `{ modal: 'upload', prefill }`
// — the AthleteDeck listener captures the prefill and forwards it
// to UploadModal. The original failed row stays in history.
const YourRequestsCard = ({ requestsState }) => {
const R = window.PA_REQUESTS;
const t = (window.useT || (() => (k) => k))();
const rows = (requestsState.requests || []).slice(0, 5);
// Build the prefill payload from a failed row so the user lands
// in UploadModal with the same metadata they used last time.
const onRetry = (r) => {
const prefill = {
eventName: r.event_name || '',
eventDate: r.event_date || '',
distance: r.distance_m != null ? String(r.distance_m) : '',
style: r.style || '',
course: r.course || 'LCM',
lane: r.lane_number != null ? String(r.lane_number) : '',
notes: '',
};
try {
window.dispatchEvent(new CustomEvent('pa:open-modal', {
detail: { modal: 'upload', prefill },
}));
} catch (_) {}
};
return (
{shortDate(r.created_at)}
{/* Admin note — surfaces analyst feedback to the
athlete (e.g. "video too dark, please re-upload").
Tone slightly varies on failed rows so the cause
reads as a real signal, not a chip caption. */}
{note && (
{t('deck.requests.adminNoteLabel')}
{note}
)}
{/* "Check the Races tab for results" — only shown
when the request completed AND no admin note set
(the note already gives a clear signal). */}
{showCompletedHint && (
{t('deck.requests.checkRaces')}
)}
{/* Retry button — locked decision from the audit Q9.
Pre-fills the upload modal with the prior row's
metadata so the user only has to pick a new file
+ adjust whatever was wrong. */}
{isFailed && (
)}
);
})}
)}
);
};
// ── RequestAnalysisButton ────────────────────────────────────
// Lives where the decorative lightning used to be (top-right of
// hero). Copy + tone shift with quota state: green when the user
// has quota, amber when they've run out, ghost when there's no
// subscription at all. The caption underneath is the readout —
// "2 of 3 used" / "No subscription" / "Trial — 4 days left".
const RequestAnalysisButton = ({ nextAction, quota, isTrialing, trialDays, isPolling, onClick }) => {
const t = (window.useT || (() => (k) => k))();
const label =
nextAction === 'upload' ? t('deck.requestBtn.upload') :
nextAction === 'buy' ? t('deck.requestBtn.buy') :
nextAction === 'try' ? t('deck.requestBtn.try') :
/* loading */ t('deck.requestBtn.loading');
// Tone by action
const tone =
nextAction === 'upload' ? { bg: 'var(--signal-eff)', fg: 'var(--ink)', border: 'transparent' } :
nextAction === 'buy' ? { bg: 'transparent', fg: 'var(--flag-eff)', border: 'color-mix(in oklch, var(--flag-eff) 50%, transparent)' } :
{ bg: 'transparent', fg: 'var(--signal-eff)', border: 'color-mix(in oklch, var(--signal-eff) 50%, transparent)' };
const R = window.PA_REQUESTS;
const caption = (() => {
if (isPolling) return t('deck.requestBtn.checking');
if (!quota) return '';
// The trial caption + quotaLabel come from PA_REQUESTS (`requests.js`)
// which is still English-only. Translation of those small strings
// lands together with the requests.js i18n pass (low priority — they
// already read fine in either language).
if (isTrialing && Number.isFinite(trialDays)) return `Trial · ${trialDays}d left`;
if (quota.status === 'none') return t('deck.requestBtn.noSubscription');
return R ? R.quotaLabel(quota) : `${quota.used} of ${quota.limit} used`;
})();
return (
Your deck lights up with your first race. Request your first analysis
from the button above — once processed, you'll see how you stacked up,
what moved, and where to look next.
{actionSlot}
);
// ── FocusCards (v00.60) ───────────────────────────────────────
// Three modality summary cards on the AthleteDeck — Starts /
// Turns / Races. Each card surfaces the headline metric + a small
// sparkline of recent values + delta vs 30 d avg.
//
// Mirrors the design-reference `FocusCards` (web-deck.jsx
// lines 106-140) but data-driven from the athlete's own trial
// stream rather than the static mock the design used.
//
// Lives between the hero and the 2-col grid in `AthleteDeck`.
// Inline sparkline. ~88 px wide, normalizes to its own min/max
// with a small headroom so the line never slams the top/bottom.
const FocusSpark = ({ data, color, width, height }) => {
if (!data || data.length < 2) {
return —;
}
const W = width || 88;
const H = height || 34;
const PAD = 3;
const min = Math.min(...data);
const max = Math.max(...data);
const range = (max - min) || 1;
const xOf = (i) => PAD + (i / (data.length - 1)) * (W - 2 * PAD);
const yOf = (v) => PAD + (1 - (v - min) / range) * (H - 2 * PAD);
const path = window.PA_SVG.smoothPath(data.map((v, i) => [xOf(i), yOf(v)]));
return (
);
};
// Per-modality data loader. Returns the headline payload the
// FocusCard renders, or null when no data is available.
//
// { latest, spark, delta30d, isPB, eventLabel? }
//
// `latest` is the most recent metric value (in the trailing 90 d
// window so the sparkline has enough history to be meaningful).
// `spark` is up to the last 8 values in chronological order.
// `delta30d` is `latest - avg(last_30d)`. `isPB` flags when the
// latest value is the lowest in the loaded window — a soft PB
// proxy without doing a separate all-time-best query.
async function loadFocusModality({ view, metric, athleteUuid, sameEventOnly }) {
if (!athleteUuid) return null;
try {
const sinceDate = new Date(Date.now() - 90 * 86400000)
.toISOString().slice(0, 10);
const select = sameEventOnly
? `${metric}, source_date, style, distance_m, course`
: `${metric}, source_date`;
const { data, error } = await window.supabaseClient
.from(view)
.select(select)
.eq('athlete_uuid', athleteUuid)
.not(metric, 'is', null)
.gte('source_date', sinceDate)
.order('source_date', { ascending: false })
.limit(30);
if (error || !data || !data.length) return null;
let rows = data;
let eventLabel = null;
// For races, filter the trailing window to the latest race's
// event so the sparkline + delta are apples-to-apples. A 50
// free spark next to a 1500 spark would show a fake recovery.
if (sameEventOnly) {
const latest = data[0];
rows = data.filter(r =>
Number(r.distance_m) === Number(latest.distance_m) &&
String(r.style || '').toLowerCase() ===
String(latest.style || '').toLowerCase()
);
const dist = latest.distance_m;
const style = latest.style;
const course = latest.course;
eventLabel = (dist ? dist + ' ' : '')
+ (style ? style.charAt(0).toUpperCase() + style.slice(1) : '')
+ (course ? ' · ' + course : '');
}
if (!rows.length) return null;
const values = rows.map(r => parseFloat(r[metric])).filter(v => !isNaN(v));
if (!values.length) return null;
const latest = values[0];
// 30-day average for the delta line.
const cutoff30 = new Date(Date.now() - 30 * 86400000)
.toISOString().slice(0, 10);
const within30 = rows
.filter(r => r.source_date >= cutoff30)
.map(r => parseFloat(r[metric]))
.filter(v => !isNaN(v));
const avg30 = within30.length
? within30.reduce((s, v) => s + v, 0) / within30.length
: latest;
// Sparkline — chronological order (oldest left, newest right).
const spark = values.slice(0, 8).reverse();
// Soft PB detection — latest matches the loaded-window
// minimum within tolerance. Not all-time, but a coachable
// recent-best signal.
const minVal = Math.min(...values);
const isPB = Math.abs(latest - minVal) < 0.005 && values.length >= 2;
return {
latest, spark,
delta30d: +(latest - avg30).toFixed(2),
isPB,
eventLabel,
};
} catch (e) {
return null;
}
}
const FocusCard = ({ label, metric, value, unit, delta, spark, isPB,
eventLabel, sparkColor, fmtFn }) => {
const tone = delta == null || delta === 0 ? 'var(--tx-lo)'
: delta < 0 ? 'var(--lime-eff)' : 'var(--flag-eff)';
const valueColor = isPB ? 'var(--lime-eff)' : 'var(--tx-hi)';
return (
{/* Lime accent bar at the top edge when PB */}
{isPB && }
{/* Right stack — Your requests → Next focus → From your coach → Next session */}
{/* v00.63: NextFocus card — coachable gap surfaced from
recent trials across starts / turns / races, with a
stroke filter. */}
From your coach
No notes yet.
Next session
Not scheduled.
{/* ── Modals ────────────────────────────────────────────── */}
{/* v01.73 — 'buy' branch lifted to App level (index.html). The
BuyAnalysisModal now mounts at App so it's reachable from the
sidebar Request Analysis button on any tab, not just AthleteDeck. */}
{modal === 'upload' && (
{ setModal(null); setDevOverride(null); }}/>
)}
{state.error && (
Could not load races: {state.error.message || 'unknown error'}
)}
);
};
// ── Coach Deck — minimal placeholder for now ─────────────────
// ── Coach helpers (v00.56 / v00.57) ───────────────────────────
// initials(athlete) — 2-letter avatar fill from first + last
const coachInitials = (a) => {
const f = (a?.first_name || '').trim();
const l = (a?.last_name || '').trim();
return ((f[0] || '') + (l[0] || '')).toUpperCase() || '?';
};
// Human-readable "X days ago" / "today" for a YYYY-MM-DD source_date.
const relativeDate = (iso) => {
if (!iso) return null;
const today = new Date(); today.setHours(0,0,0,0);
const then = new Date(iso + 'T00:00:00');
if (isNaN(then.getTime())) return iso;
const diffDays = Math.floor((today - then) / 86400000);
if (diffDays <= 0) return 'today';
if (diffDays === 1) return 'yesterday';
if (diffDays < 7) return diffDays + 'd ago';
if (diffDays < 30) return Math.floor(diffDays / 7) + 'w ago';
return Math.floor(diffDays / 30) + 'mo ago';
};
// Activity status flag from per-athlete stats. Drives the colored
// dot on the roster card + the row tag in TeamRosterPage.
// active — at least one trial in 7 days
// recent — at least one trial in 30 days
// dormant — nothing in 30 days
const activityStatus = (stats) => {
if (!stats || stats.trials_30d === 0) return 'dormant';
if (stats.trials_7d > 0) return 'active';
return 'recent';
};
const STATUS_LABELS = { active: 'Active', recent: 'Recent', dormant: 'Dormant' };
const STATUS_COLORS = {
active: 'var(--lime-eff)',
recent: 'var(--signal-eff)',
dormant: 'var(--tx-lo)',
};
// ── useTeamData (v00.57) ──────────────────────────────────────
// Shared data loader for CoachDeck and TeamRosterPage. Pulls
// athletes once, then calls loadTeamActivity to aggregate
// last-30-day stats per athlete.
const useTeamData = (teamUuid) => {
const [athletes, setAthletes] = useDeckState([]);
const [activity, setActivity] = useDeckState({ byAthlete: {}, totals: {} });
const [loading, setLoading] = useDeckState(true);
useDeckEffect(() => {
let cancelled = false;
if (!teamUuid) { setLoading(false); return () => { cancelled = true; }; }
(async () => {
const { data } = await window.PA_ADMIN.loadAthletes(teamUuid);
if (cancelled) return;
const list = data || [];
setAthletes(list);
const uuids = list.map(a => a.athlete_uuid).filter(Boolean);
const act = await window.PA_ADMIN.loadTeamActivity(uuids, 30);
if (cancelled) return;
setActivity(act);
setLoading(false);
})();
return () => { cancelled = true; };
}, [teamUuid]);
return { athletes, activity, loading };
};
// ── SquadFocus (v00.65 — coach macroview of NextFocus) ────────
//
// Coach-facing equivalent of the athlete NextFocus card. Where
// NextFocus picks ONE coachable gap for ONE athlete, SquadFocus
// picks ONE squad-wide attention pattern: which modality has the
// most athletes slipping vs their 30 d average?
//
// Picker: window.PA_ADMIN.loadSquadFocus(athletes, strokeFilter).
// 3 batched RLS-filtered queries total — never per-athlete.
//
// Visual differs from NextFocus on purpose. There is no "team
// target" the way an athlete has a personal best, so the bar
// shows DISTRIBUTION (improving / holding / slipping) instead of
// CURRENT vs TARGET.
//
// Stroke filter: same constraint as athlete-side. Filter narrows
// races only; starts/turns are pooled (no `style` column on
// v_start_kpis / v_turn_kpis).
const SquadFocus = ({ athletes }) => {
const t = (window.useT || (() => (k) => k))();
const [strokeFilter, setStrokeFilter] = useDeckState('all');
const [state, setState] = useDeckState({ focus: null, loading: true });
useDeckEffect(() => {
let cancelled = false;
if (!athletes || !athletes.length) {
setState({ focus: null, loading: false });
return () => { cancelled = true; };
}
setState(prev => ({ ...prev, loading: true }));
(async () => {
const focus = await window.PA_ADMIN.loadSquadFocus(athletes, strokeFilter);
if (cancelled) return;
setState({ focus, loading: false });
})();
return () => { cancelled = true; };
}, [athletes, strokeFilter]);
const strokes = [
{ key: 'all', label: t('deck.strokes.all') },
{ key: 'free', label: t('deck.strokes.free') },
{ key: 'back', label: t('deck.strokes.back') },
{ key: 'breast', label: t('deck.strokes.breast') },
{ key: 'fly', label: t('deck.strokes.fly') },
];
const f = state.focus;
const total = f?.total || 1;
const segImproving = f ? f.improving.length / total : 0;
const segHolding = f ? f.holding.length / total : 0;
const segSlipping = f ? f.slipping.length / total : 0;
const NameList = ({ label, names, color }) => {
if (!names || !names.length) return null;
const shown = names.slice(0, 3);
const more = names.length - shown.length;
return (
);
};
// ── GenderChip (v01.33 — Batch 7b) ──────────────────────────
//
// Small attention pill rendered next to a roster row's name when
// `athletes.gender` is null/empty. Coaches can quickly spot
// athletes missing this field — required for gender-filtered
// leaderboards (Batch 8). Clickable: opens RosterRowMenu directly
// to the gender sub-menu.
const GenderChip = ({ onClick }) => {
const t = (window.useT || (() => (k) => k))();
return (
);
};
// ── RosterRowMenu (v01.33 — Batch 7b) ───────────────────────
//
// 3-dot trigger that opens a small dropdown panel. Two action
// groups: Set gender (with submenu Male / Female / Clear) and
// Remove from team (danger). Used inline on roster rows in both
// CoachRoster cards and TeamRosterPage table rows.
//
// Click outside to dismiss. Esc to dismiss. Auto-dismisses after
// any action fires its confirm dialog.
//
// Props:
// athlete: row from athletes table (athlete_uuid, first_name,
// last_name, gender)
// onChange: optional callback fired after a successful
// remove/gender update so the parent can refetch.
const RosterRowMenu = ({ athlete, onChange, canRemove = false }) => {
const t = (window.useT || (() => (k) => k))();
const [open, setOpen] = useDeckState(false);
const [submenu, setSubmenu] = useDeckState(null); // null | 'gender'
const [busy, setBusy] = useDeckState(false);
// v01.34 — pos in viewport coords. Lets the dropdown escape
// any overflow:hidden ancestor (the roster table card clips
// its overflow for the rounded bottom corners). Recomputed on
// open + scroll + resize so the menu tracks the trigger.
const [pos, setPos] = useDeckState({ top: 0, right: 0, openUp: false });
const wrapperRef = React.useRef(null);
const triggerRef = React.useRef(null);
// v01.34 — gender immutability. Once a gender is set, coaches
// cannot change or clear it from this menu (locked decision
// 2026-05-07). The amber "?" chip only renders when gender is
// unset, so this is visually consistent.
const hasGender = athlete?.gender === 'male' || athlete?.gender === 'female';
// v01.35 — when the menu would be empty (gender already set
// AND user isn't the team owner so can't Remove), don't render
// the trigger at all. Cleaner row + saves a useless click.
const showGenderEntry = !hasGender;
const showRemoveEntry = !!canRemove;
const hasAnyAction = showGenderEntry || showRemoveEntry;
if (!hasAnyAction) return null;
const recomputePos = () => {
const el = triggerRef.current;
if (!el) return;
const r = el.getBoundingClientRect();
// Estimated menu dimensions — height varies by submenu state
// but a single value works for both since the gap from trigger
// is generous.
const MENU_HEIGHT = 130;
const openUp = (r.bottom + MENU_HEIGHT + 8) > window.innerHeight
&& (r.top - MENU_HEIGHT - 8) > 0;
setPos({
top: openUp ? Math.max(8, r.top - MENU_HEIGHT - 4) : r.bottom + 4,
// Right-anchored: keep menu's right edge aligned with the
// trigger's right edge regardless of menu width.
right: Math.max(8, window.innerWidth - r.right),
openUp,
});
};
// Click-outside + Esc + recompute-on-scroll/resize.
useDeckEffect(() => {
if (!open) return undefined;
recomputePos();
const onDoc = (e) => {
if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
setOpen(false); setSubmenu(null);
}
};
const onKey = (e) => {
if (e.key === 'Escape') { setOpen(false); setSubmenu(null); }
};
const onScrollResize = () => recomputePos();
document.addEventListener('mousedown', onDoc);
window.addEventListener('keydown', onKey);
window.addEventListener('scroll', onScrollResize, true);
window.addEventListener('resize', onScrollResize);
return () => {
document.removeEventListener('mousedown', onDoc);
window.removeEventListener('keydown', onKey);
window.removeEventListener('scroll', onScrollResize, true);
window.removeEventListener('resize', onScrollResize);
};
}, [open]);
const fullName = [athlete?.first_name, athlete?.last_name]
.filter(Boolean).join(' ').trim() || '—';
const onRemove = async () => {
setOpen(false); setSubmenu(null);
const proceed = await window.PA_CONFIRM?.ask({
title: t('team.manage.removeConfirmTitle'),
message: t('team.manage.removeConfirmBody', { name: fullName }),
isDanger: true,
});
if (!proceed) return;
setBusy(true);
const { ok } = await window.PA_TEAMS.removeMember(
athlete.athlete_uuid, 'athlete'
);
setBusy(false);
if (!ok) {
try { window.PA_TOAST?.show(t('team.manage.toastRemoveError'), { type: 'error' }); } catch (_) {}
return;
}
try { window.PA_TOAST?.show(t('team.manage.toastRemoved', { name: fullName }), { type: 'success' }); } catch (_) {}
try { window.dispatchEvent(new CustomEvent('pa:profile-changed')); } catch (_) {}
onChange?.();
};
const onSetGender = async (value) => {
setOpen(false); setSubmenu(null);
setBusy(true);
const { ok } = await window.PA_TEAMS.updateAthleteGender(
athlete.athlete_uuid, value
);
setBusy(false);
if (!ok) {
try { window.PA_TOAST?.show(t('team.manage.toastGenderError'), { type: 'error' }); } catch (_) {}
return;
}
try { window.PA_TOAST?.show(t('team.manage.toastGenderSaved', { name: fullName }), { type: 'success' }); } catch (_) {}
onChange?.();
};
const itemBase = {
display: 'flex', alignItems: 'center', gap: 8,
width: '100%', padding: '8px 12px',
background: 'transparent', border: 'none',
color: 'var(--tx-md)',
font: '500 12px var(--font-ui)',
cursor: 'pointer', textAlign: 'left',
};
return (
{open && (
{submenu === 'gender' ? (
<>
{/* v01.34 — Clear option removed per locked rule:
once gender is set, it cannot be changed or
cleared from the coach UI. */}
) : (
<>
{/* v01.34 — Set gender entry only renders when the
athlete has no gender yet. Once set, it's locked
in from this surface. */}
{showGenderEntry && (
)}
{/* v01.35 — Remove entry only when the current user
is the team owner. Server-side RLS gates the
UPDATE to owners only; hiding the affordance
prevents the 403. */}
{showGenderEntry && showRemoveEntry && (
)}
{showRemoveEntry && (
)}
)}
)}
);
};
// ── CoachesList (v01.33 — Batch 7b) ─────────────────────────
//
// Read-only section listing all coaches on a team. Active +
// pending statuses both render with status pills. The current
// user's own row is tagged "You" (and " · Owner" if they're the
// team_owner_uuid match). Active coaches list is sorted by
// coach_name; pending coaches sit at the bottom in a subtle
// separator group.
//
// teamUuid: required.
// myAuthId: optional — when supplied, the current user gets a
// "You" tag. Pulled from session.user.id by parent.
const CoachesList = ({ teamUuid, myAuthId, ownerAuthId }) => {
const t = (window.useT || (() => (k) => k))();
const [state, setState] = useDeckState({ rows: [], loading: true, error: null });
useDeckEffect(() => {
if (!teamUuid || !window.PA_TEAMS?.listTeamCoaches) {
setState({ rows: [], loading: false, error: null });
return undefined;
}
let cancelled = false;
setState((p) => ({ ...p, loading: true, error: null }));
(async () => {
const { coaches, error } = await window.PA_TEAMS.listTeamCoaches(teamUuid);
if (cancelled) return;
setState({ rows: coaches, loading: false, error });
})();
const onChange = () => {
(async () => {
const { coaches, error } = await window.PA_TEAMS.listTeamCoaches(teamUuid);
if (!cancelled) setState({ rows: coaches, loading: false, error });
})();
};
window.addEventListener('pa:profile-changed', onChange);
return () => {
cancelled = true;
window.removeEventListener('pa:profile-changed', onChange);
};
}, [teamUuid]);
if (state.loading) {
return (
{t('team.coaches.title')}
{t('team.coaches.loading')}
);
}
if (!state.rows.length) {
return (
{t('team.coaches.title')}
{t('team.coaches.empty')}
);
}
// Sort: active first then pending; within each group alpha.
const sorted = [...state.rows].sort((a, b) => {
if (a.membership_status !== b.membership_status) {
if (a.membership_status === 'active') return -1;
if (b.membership_status === 'active') return 1;
}
return (a.coach_name || '').localeCompare(b.coach_name || '');
});
const statusPill = (status) => {
const accent = status === 'active' ? 'var(--lime-eff)' : 'var(--amber-eff)';
const label = status === 'active'
? t('team.coaches.statusActive')
: t('team.coaches.statusPending');
return (
{label}
);
};
return (
);
};
// ── AthleteTeamPage (v01.31 — Batch 7a-bridge) ──────────────
//
// What an athlete sees on the "Equipo / Team" route. Three states
// driven by their own profile row:
//
// No team → empty state + "Join a team" CTA → opens
// TeamOnboardingModal in 'join' mode (athlete-
// flavored: no Create option, request lands in
// pending status).
// Pending → status card "Waiting for {team} to approve".
// Cancel-request button is a stub here; the real
// wiring lands in Batch 7b (leave team write).
// Active → minimal placeholder. Full team info (coaches
// list, leave team, etc.) ships in 7b.
//
// Coaches don't hit this page — the route still routes coach
// users to TeamRosterPage as before.
const AthleteTeamPage = ({ profile }) => {
const t = (window.useT || (() => (k) => k))();
const [modalOpen, setModalOpen] = useDeckState(false);
const teamUuid = profile?.team_uuid || null;
const teamName = (profile?.team_name || '').trim() || null;
const status = profile?.membership_status || (teamUuid ? 'active' : 'inactive');
// v01.38 — treat 'inactive' the same as "no team". When the
// athlete was removed/rejected/left, status flips to 'inactive'
// but team_uuid stays linked (RLS WITH-CHECK constraint, see
// v01.36). Without this guard, the page would render "You're
// on {team}" even though their access was revoked. The Join CTA
// path lets them re-request a team — joinTeamAsAthlete
// overwrites team_uuid + sets status='pending' on their own row
// via the auth.uid()-gated policy.
const isInactive = status === 'inactive';
// ── State 1: No team (or removed/inactive) ───────────────
if (!teamUuid || isInactive) {
return (
<>
{/* v01.33 — Cancel request button. Same write as leave;
just different copy + toast. */}
);
}
// ── State 3: Active member ───────────────────────────────
// v01.33 — full team view: coaches list + leave-team button.
// Full athletes list comes in a later polish batch (currently
// it's a coach-only surface on TeamRosterPage).
return (
{/* v01.33 — coaches list visible to athletes too. Lets them
see who their coaches are at a glance. */}
{/* v01.39 — teammates list. Read-only view of squadmates,
with self pinned to the top, activity dot per athlete,
and last-session date. Same useTeamData hook coaches use,
so the data is consistent across views. */}
{/* v01.33 — leave-team button. Sits at the bottom so it's
out of the way for normal browsing. */}
);
};
// ── PendingApprovalAlert (v01.30 — Batch 7a) ────────────────
//
// Owner-coach-only banner that surfaces pending member requests
// (athletes + coaches with `membership_status='pending'`) on the
// CoachDeck. Click navigates to the team roster page where the
// PendingMembersPanel handles approve/reject. Mirrors live's
// `approvalAlert` div with the "X Pending Approval(s)" copy.
//
// Renders nothing when count is 0 — no hover-able dead space.
//
// Note: this is the read-only banner. The actual approve/reject
// writes happen in PendingMembersPanel below.
const PendingApprovalAlert = ({ count, onClick }) => {
const t = (window.useT || (() => (k) => k))();
if (!count || count <= 0) return null;
const titleKey = count === 1 ? 'team.pending.bannerTitleOne' : 'team.pending.bannerTitleN';
const bodyKey = count === 1 ? 'team.pending.bannerBodyOne' : 'team.pending.bannerBodyN';
return (
);
};
// ── PendingMembersPanel (v01.30 — Batch 7a) ─────────────────
//
// Panel rendered at the top of TeamRosterPage. Lists pending
// athletes + coaches with approve/reject buttons. Each action
// fires a confirm dialog (PA_CONFIRM), then PA_TEAMS UPDATE,
// then a toast (PA_TOAST), then dispatches `pa:profile-changed`
// so the sidebar badge + Deck banner re-fetch.
//
// Owner-only. Self-approval blocked (filtered out at the
// listPendingMembers query level).
const PendingMembersPanel = ({ teamUuid, onChange }) => {
const t = (window.useT || (() => (k) => k))();
const [state, setState] = useDeckState({
athletes: [], coaches: [], loading: true, error: null,
});
const [busyId, setBusyId] = useDeckState(null); // id currently being approved/rejected
const [token, setToken] = useDeckState(0);
useDeckEffect(() => {
if (!teamUuid || !window.PA_TEAMS?.listPendingMembers) {
setState({ athletes: [], coaches: [], loading: false, error: null });
return;
}
let cancelled = false;
setState((p) => ({ ...p, loading: true, error: null }));
(async () => {
const res = await window.PA_TEAMS.listPendingMembers(teamUuid);
if (cancelled) return;
setState({
athletes: res.athletes || [],
coaches: res.coaches || [],
loading: false,
error: res.error || null,
});
})();
return () => { cancelled = true; };
}, [teamUuid, token]);
const totalPending = state.athletes.length + state.coaches.length;
const fmtName = (m) => {
if (m.type === 'athlete') {
return [m.first_name, m.last_name].filter(Boolean).join(' ').trim() || '—';
}
return (m.coach_name || '—').trim();
};
const fmtRequestedAt = (iso) => {
if (!iso) return '';
try {
const lang = window.PA_I18N?.getLang?.() || 'en';
const d = new Date(iso);
return d.toLocaleDateString(lang === 'es' ? 'es-ES' : 'en-US', {
month: 'short', day: 'numeric',
});
} catch (_) { return ''; }
};
const onApprove = async (m) => {
if (busyId) return;
const name = fmtName(m);
const proceed = await window.PA_CONFIRM?.ask({
title: t('team.pending.confirmApproveTitle'),
message: t('team.pending.confirmApproveBody', { name }),
isDanger: false,
});
if (!proceed) return;
setBusyId(m.id);
const { ok, error } = await window.PA_TEAMS.approveMember(m.id, m.type);
setBusyId(null);
if (!ok) {
try { window.PA_TOAST?.show(t('team.pending.toastError'), { type: 'error' }); } catch (_) {}
try { console.warn('[PendingMembersPanel] approve error:', error); } catch (_) {}
return;
}
try { window.PA_TOAST?.show(t('team.pending.toastApproved', { name }), { type: 'success' }); } catch (_) {}
setToken((n) => n + 1);
try { window.dispatchEvent(new CustomEvent('pa:profile-changed')); } catch (_) {}
onChange?.();
};
const onReject = async (m) => {
if (busyId) return;
const name = fmtName(m);
const proceed = await window.PA_CONFIRM?.ask({
title: t('team.pending.confirmRejectTitle'),
message: t('team.pending.confirmRejectBody', { name }),
isDanger: true,
});
if (!proceed) return;
setBusyId(m.id);
const { ok, error } = await window.PA_TEAMS.rejectMember(m.id, m.type);
setBusyId(null);
if (!ok) {
try { window.PA_TOAST?.show(t('team.pending.toastError'), { type: 'error' }); } catch (_) {}
try { console.warn('[PendingMembersPanel] reject error:', error); } catch (_) {}
return;
}
try { window.PA_TOAST?.show(t('team.pending.toastRejected', { name }), { type: 'success' }); } catch (_) {}
setToken((n) => n + 1);
try { window.dispatchEvent(new CustomEvent('pa:profile-changed')); } catch (_) {}
onChange?.();
};
// ── Render ────────────────────────────────────────────────
if (state.loading) {
return (
{t('team.pending.panelTitle')}
{t('team.pending.loading')}
);
}
// Don't render anything when zero — prevents an "0 pending" anchor
// from cluttering the team page on a healthy quiet day.
if (totalPending === 0) return null;
// Build merged list w/ display type for rendering.
const items = [
...state.athletes.map(a => ({
id: a.athlete_uuid, type: 'athlete',
first_name: a.first_name, last_name: a.last_name,
created_at: a.created_at, code: a.athlete_code, email: a.email,
})),
...state.coaches.map(c => ({
id: c.coach_uuid, type: 'coach',
coach_name: c.coach_name,
created_at: c.created_at,
})),
];
return (
);
};
// ── CoachDeck (v00.57 — hero sentence + KPI rail + roster) ────
const CoachDeck = ({ profile, onPickAthlete, teamPendingCount, onNavigateTeam }) => {
const teamUuid = profile?.team_uuid || null;
const coachName = (profile?.first_name || profile?.coach_name || '').trim() || null;
const teamName = (profile?.team_name || '').trim() || null;
const t = (window.useT || (() => (k) => k))();
// v01.14 — Batch 1c. Coaches without a team see a CTA card that
// launches the TeamOnboardingModal in either join or create mode.
// The modal dispatches `pa:profile-changed` on success; AuthGate's
// listener re-runs refreshProfile() so v_my_coach picks up the
// new team_uuid and CoachDeck re-renders with real squad data.
const [onbMode, setOnbMode] = useDeckState(null); // null | 'pick' | 'join' | 'create'
const { athletes, activity, loading } = useTeamData(teamUuid);
const totals = activity?.totals || {};
const rosterSize = athletes.length;
// Data-driven hero sentence. Branches on the most actionable
// signal we have: an active week (sessions_7d > 0), a quiet
// week (rosterSize > 0 but sessions_7d == 0), or a fresh team.
// v01.23 — translated. Plural "trial" vs "trials" handled with
// separate dict keys (deck.coach.trialWordSingular / Plural)
// since Spanish has identical singular/plural for "prueba"/"pruebas"
// and English needs the inflection.
const heroNarrative = (() => {
if (!teamUuid) return <>{t('deck.coach.noTeamLine')};
if (loading) return <>{t('deck.coach.loadingSquad')};
if (!rosterSize) return <>{t('deck.coach.rosterEmptyHero')};
const a7 = totals.active_7d || 0;
const s7 = totals.sessions_7d || 0;
if (a7 === 0) return <>{t('deck.coach.noSessions7d')};
const trialWord = s7 === 1
? t('deck.coach.trialWordSingular')
: t('deck.coach.trialWordPlural');
if (a7 === rosterSize) {
return (
{t('deck.coach.allActiveLine', {
n: rosterSize, s: s7, trialWord,
}).split('—')[0].trim()}
{' — '}
{t('deck.coach.allActiveLine', {
n: rosterSize, s: s7, trialWord,
}).split('—').slice(1).join('—').trim()}
);
}
return (
{t('deck.coach.someActiveLine', {
a: a7, n: rosterSize, s: s7, trialWord,
}).split('—')[0].trim()}
{' — '}
{t('deck.coach.someActiveLine', {
a: a7, n: rosterSize, s: s7, trialWord,
}).split('—').slice(1).join('—').trim()}
);
})();
return (
{/* v01.30 — Pending approval alert. Owner-coach-only, only
renders when there are pending members. Click navigates
to the team roster page where the panel handles the
actual approve/reject. */}
{teamPendingCount > 0 && (
onNavigateTeam?.()}/>
)}
{/* Hero — free-standing, no card. Mirrors athlete deck pattern. */}
{/* "Welcome, Eric." / "Bienvenido, entrenador." — comma-separated
so the same JSX works for both languages. */}
{t('deck.coach.welcome')}
{', '}
{coachName || t('deck.coach.welcomeFallback')}
{'.'}
{heroNarrative}
{/* Summary KPI rail — 4 tiles. Always renders so the layout
is stable; loading just shows zeros until aggregation completes. */}
{/* v00.65: Squad Focus — coachable team-wide signal.
Surfaces the modality with the most athletes slipping
vs their 30 d average. Pairs with the athlete-side
NextFocus card. */}
{teamUuid && rosterSize > 0 && (
)}
{/* v01.28: Team Activity feed — recent sessions across the
squad, click-through to the athlete's analysis page.
Renders even when empty so the section is a stable
layout anchor while data trickles in. Replaces live's
"Recent Team Activity" collapsible section. */}
{teamUuid && rosterSize > 0 && (
)}
{/* Roster grid */}
{teamUuid && rosterSize > 0 && (
)}
{/* Empty / no-team states inline — shown only when relevant.
Keep the hero + KPIs visible even in these states so the
page never renders as a single empty card. */}
{!teamUuid && (
{t('deck.coach.noTeamEyebrow')}
{t('deck.coach.noTeamTitle')}
{t('deck.coach.noTeamBody')}
)}
{/* v01.14 — TeamOnboardingModal mounts when onbMode is set.
window.TeamOnboardingModal comes from src/components/
team-onboarding.jsx (loaded BEFORE web-deck.jsx). The
belt-and-suspenders guard skips the modal cleanly if
Babel hasn't compiled it yet on first paint. */}
{!teamUuid && onbMode && window.TeamOnboardingModal && (
setOnbMode(null)}
onComplete={() => setOnbMode(null)}/>
)}
{teamUuid && !loading && !rosterSize && (
{t('deck.coach.emptyRoster')}
{t('deck.coach.emptyRosterBody')}
)}
);
};
// ── TeamRosterPage (v00.57) ───────────────────────────────────
// Full-page roster table. Columns: Name, Status, Last session,
// Sessions this month. Click anywhere on a row to drill into
// that athlete via the same impersonation hook.
const TeamRosterPage = ({ profile, onPickAthlete, sessionUserId, isTeamOwner }) => {
const teamUuid = profile?.team_uuid || null;
const teamName = (profile?.team_name || '').trim() || null;
const { athletes, activity, loading } = useTeamData(teamUuid);
if (loading) {
return (
Loading roster…
);
}
if (!teamUuid) {
return (
NO TEAM YET
Once your team's set up in Peak Athlete, the roster table will
populate here.
{athletes.length} {athletes.length === 1 ? 'athlete' : 'athletes'}
{totals.active_7d != null && (
· {totals.active_7d} active this week
)}
{/* v01.30 — pending member approvals. Owner-only; auto-hides
when count is zero so the rest of the roster page is the
primary surface on a quiet day. */}
{window.PA_ADMIN.athleteName(a)}
{/* v01.33 — gender attention chip when unset */}
{!a.gender && (
e.stopPropagation()}>
{/* opens menu via the row's menu — chip is just an indicator */}}/>
)}
View as →
{/* v01.33 — 3-dot menu (Set gender + Remove).
stopPropagation so menu interactions don't
trigger the row's view-as onClick. */}
e.stopPropagation()}>
);
})}
{sorted.length === 0 && (
No athletes on your team yet.
)}
{/* v01.33 — Coaches list section. Coach view shows everyone
on the team with "You" tag for self. */}
{/* v01.33 — Leave team. Footer-aligned so it's out of the
way for normal browsing. Last-coach guard runs inside
the button (counts active coaches before allowing). */}
);
};
// ── Entry ────────────────────────────────────────────────────
const WebDeck = ({ profile, role, fallbackEmail, authUserId, adminAthleteUuid, onPickAthlete, teamPendingCount, onNavigateTeam }) => {
const persona = role === 'coach' ? 'coach' : 'athlete';
// v00.48: when admin impersonation is active, render the
// AthleteDeck regardless of role — the data is scoped to a
// single athlete, so the coach/team dashboard isn't relevant.
if (persona === 'coach' && !adminAthleteUuid) {
// v00.56: CoachDeck gets onPickAthlete so the roster cards
// can drive the same impersonation state the AdminBar does.
return ;
}
return ;
};
// Expose -------------------------------------------------------
Object.assign(window, {
WebDeck, AthleteDeck, CoachDeck, TeamRosterPage,
HeadlineStory, HeroTrendChart, HeadlineEmpty,
RequestAnalysisButton, YourRequestsCard,
FocusCards, FocusCard, FocusSpark,
NextFocus, SquadFocus, TeamActivityFeed,
PendingApprovalAlert, PendingMembersPanel,
AthleteTeamPage,
CoachesList, RosterRowMenu, GenderChip, LeaveTeamButton,
TeammatesList,
});
try { console.log('[web-deck] loaded (v01.39)'); } catch (_) {}