/* ───────────────────────────────────────────────────────────
Peak Athlete · Performance Lab v03 prototype
Leaderboards (v00.58)
Mirrors the live dashboard's competition-leaderboards pattern:
1. Load athlete pool via v_competition_athletes (RLS-gated —
only athletes the signed-in user is allowed to see end up
in the result).
2. Query each kpi view filtered by athlete_uuid IN (pool).
3. Group by athlete, take min(metric) per athlete (best PB).
4. Sort + take top 5.
Three boards on this v1: Fastest Start, Fastest Turn, Best Race
Time. Race PB is "any event" for now — future iteration adds
per-event filters.
When viewer is admin/coach (onPickAthlete prop is wired), a
row click fires the impersonation hook so the user can drill
into any leader's full trial set. For regular athletes who
don't have that hook, rows are read-only.
Read-only. No new RPCs / views.
─────────────────────────────────────────────────────────── */
const {
useState: useBoardState,
useEffect: useBoardEffect,
useMemo: useBoardMemo,
} = React;
// ── Data loaders ─────────────────────────────────────────────
// v_competition_athletes returns a flat list of every athlete
// the user is allowed to view, with display fields for the row.
async function loadCompAthletes(genderFilter) {
try {
let q = window.supabaseClient
.from('v_competition_athletes')
.select('athlete_uuid, first_name, last_name, team_name, gender');
if (genderFilter && genderFilter !== 'all') {
q = q.eq('gender', genderFilter);
}
const { data, error } = await q;
if (error) return { data: [], error };
return { data: data || [], error: null };
} catch (e) {
return { data: [], error: e };
}
}
// v01.43 — Team mode loader. Returns athletes scoped to the
// caller's own team (active members only — PA_ADMIN.loadAthletes
// already filters by membership_status='active' since v01.37).
// Gender filter applied client-side. The team_name field is
// stamped from the caller-provided value so the row shape
// matches loadCompAthletes for the rest of the board pipeline.
async function loadTeamAthletes(genderFilter, teamUuid, teamName) {
if (!teamUuid) return { data: [], error: null };
try {
const { data, error } = await window.PA_ADMIN.loadAthletes(teamUuid);
if (error) return { data: [], error };
let rows = data || [];
if (genderFilter && genderFilter !== 'all') {
rows = rows.filter(a =>
String(a.gender || '').toLowerCase() === genderFilter
);
}
return {
data: rows.map(a => ({
athlete_uuid: a.athlete_uuid,
first_name: a.first_name,
last_name: a.last_name,
team_name: teamName || null,
gender: a.gender || null,
})),
error: null,
};
} catch (e) {
return { data: [], error: e };
}
}
// v01.45 — view selector by mode. Competition mode reads from
// the v_competition_*_kpis views which JOIN competition_entries
// and filter by enrolled=true. So per-event toggles ACTUALLY
// affect what shows on each board (athletes who toggle off a
// specific event drop off that board only). Team mode reads
// the regular kpi views — no opt-in concept inside a team.
function viewForMode(mode, modality) {
// modality: 'start' | 'turn' | 'race'
if (mode === 'competition') {
if (modality === 'start') return 'v_competition_start_kpis';
if (modality === 'turn') return 'v_competition_turn_kpis';
if (modality === 'race') return 'v_competition_race_kpis';
}
if (modality === 'start') return 'v_start_kpis';
if (modality === 'turn') return 'v_turn_kpis';
if (modality === 'race') return 'v_race_kpis';
return null;
}
// Generic "best per athlete" loader. Pulls all rows for the given
// view + metric column, groups client-side, returns top N by
// metric ascending.
//
// v01.47 — accepts `sinceDate` (ISO yyyy-mm-dd) to time-window
// the leaderboards. null = no filter (All time).
async function loadBestPerAthlete({ view, metric, athleteUuids, n = 5, sinceDate }) {
if (!athleteUuids || !athleteUuids.length) return [];
try {
let q = window.supabaseClient
.from(view)
.select('athlete_uuid, ' + metric + ', source_date')
.in('athlete_uuid', athleteUuids)
.not(metric, 'is', null);
if (sinceDate) q = q.gte('source_date', sinceDate);
const { data, error } = await q;
if (error) return [];
const best = {};
(data || []).forEach(r => {
const v = parseFloat(r[metric]);
if (isNaN(v)) return;
if (!best[r.athlete_uuid] || v < best[r.athlete_uuid]) {
best[r.athlete_uuid] = v;
}
});
return Object.entries(best)
.map(([uuid, value]) => ({ uuid, value }))
.sort((a, b) => a.value - b.value)
.slice(0, n);
} catch (e) {
return [];
}
}
// ── Race-event-aware loaders (v00.59) ───────────────────────
// The Race PB card needs per-event filtering — "Best Race Time ·
// any event" is misleading since longer races have longer times
// and a 50 free always tops the board. We pull all race rows
// once with metadata, then filter + aggregate client-side as the
// user picks an event from the dropdown.
// Pull all race rows for the athlete pool with the metadata
// needed to (a) filter by event and (b) derive an event picker.
async function loadAllRaceRows(athleteUuids, view, sinceDate) {
// v01.45 — accept view name so Competition mode can use
// v_competition_race_kpis (which respects per-event opt-in
// for the best_race_pb key) instead of the unfiltered
// v_race_kpis. Defaults to v_race_kpis to preserve previous
// call-site behavior.
// v01.47 — sinceDate filter for the time-period selector.
if (!athleteUuids || !athleteUuids.length) return [];
const viewName = view || 'v_race_kpis';
try {
let q = window.supabaseClient
.from(viewName)
.select('athlete_uuid, race_time_s, distance_m, style, course, source_date')
.in('athlete_uuid', athleteUuids)
.not('race_time_s', 'is', null);
if (sinceDate) q = q.gte('source_date', sinceDate);
const { data, error } = await q;
if (error) return [];
return data || [];
} catch (e) {
return [];
}
}
// Distinct event tuples derived from a row set. Each option:
// { key, distance_m, style, course, label, count }
// `key` is a stable string for React keys + dropdown values.
// `count` is the number of rows in that event — used to size
// the dropdown options ("100 Freestyle · LCM (12)") so the user
// can pick the events with enough data to be interesting.
function deriveRaceEvents(rows) {
const buckets = new Map();
rows.forEach(r => {
const dist = r.distance_m ? Number(r.distance_m) : null;
const style = r.style ? String(r.style).toLowerCase() : null;
const course = r.course ? String(r.course).toUpperCase() : null;
if (!dist || !style) return; // event must have at least dist + style
const key = dist + '|' + style + '|' + (course || '');
if (!buckets.has(key)) {
buckets.set(key, {
key, distance_m: dist, style, course,
label: dist + ' ' + style.charAt(0).toUpperCase() + style.slice(1)
+ (course ? ' · ' + course : ''),
count: 0,
});
}
buckets.get(key).count += 1;
});
return Array.from(buckets.values()).sort((a, b) => {
if (a.distance_m !== b.distance_m) return a.distance_m - b.distance_m;
return a.label.localeCompare(b.label);
});
}
// Client-side aggregator. Given race rows + optional event
// filter, returns top N athletes by best (lowest) race_time_s.
function aggregateBestRaces(rows, eventFilter, n) {
const limit = (n != null) ? n : 5;
const filtered = (() => {
if (!eventFilter || !eventFilter.key) return rows;
return rows.filter(r =>
Number(r.distance_m) === eventFilter.distance_m &&
String(r.style || '').toLowerCase() === eventFilter.style &&
(eventFilter.course
? String(r.course || '').toUpperCase() === eventFilter.course
: true)
);
})();
const best = {};
filtered.forEach(r => {
const v = parseFloat(r.race_time_s);
if (isNaN(v)) return;
if (!best[r.athlete_uuid] || v < best[r.athlete_uuid]) {
best[r.athlete_uuid] = v;
}
});
return Object.entries(best)
.map(([uuid, value]) => ({ uuid, value }))
.sort((a, b) => a.value - b.value)
.slice(0, limit);
}
// ── Medal & podium atoms (v01.47) ────────────────────────────
//
// Locked decisions Q6=A and Q7=A: gold/silver/bronze medals on
// top 3, with top 3 styled as a podium and ranks 4+ as a flat
// list below.
//
// Color choices use cultural medal hues rather than Ink & Signal
// tokens because gold/silver/bronze read as universal symbols.
const MEDAL_COLOR = {
1: '#f5c518', // gold
2: '#c0c8cf', // silver
3: '#cd7f32', // bronze
};
const MedalBadge = ({ rank, size = 22 }) => {
const color = MEDAL_COLOR[rank] || 'var(--tx-lo)';
return (
{/* v01.43 — Mode tabs (Team / Competition). When the user
has no team, the Team tab is disabled with a subtle
hint. Coaches without a team won't usually hit this
page (CoachDeck routes them to the join CTA), but
athletes without a team can still use Competition. */}
{!hasTeam && mode === 'competition' && (
{t('board.noTeamHint')}
)}
{/* Filter pills row — gender + time period (v01.47) */}
{/* v01.45 — Competition opt-in panel. Athletes only; coaches
see nothing here. The panel internally branches on
isPro: free → upsell strip, Pro → toggle + per-event
grid. onChanged bumps the board refetch token so the
v_competition_* views re-query after a write. */}
{mode === 'competition' && role === 'athlete' && profile?.athlete_uuid && (
setBoardRefetch(n => n + 1)}/>
)}
{/* Three-card grid */}
{/* v01.45 — Best Reaction board. Open-to-all-ages event
meant to lower the barrier to entry on Competition.
Reaction time uses 3-decimal formatting (vs 2 for
other start metrics). */}
v != null ? v.toFixed(3) + ' s' : '—'}
onPickAthlete={onPickAthlete}
/>
0 ? (
) : null}
rows={bestRaces}
athleteIndex={athleteIndex}
fmtValue={fmtTime}
onPickAthlete={onPickAthlete}
/>
{/* Loading / empty */}
{loading && (
Loading leaderboards…
)}
{!loading && athletes.length === 0 && (
NO COMPETITION POOL
No athletes are currently visible in the leaderboards pool. This
is RLS-controlled — leaderboards populate as the
v_competition_athletes view exposes athletes you can compare against.