/* global React, Icon, money, PageSkeleton, DemoChip, Spinner, ConfirmDialog,
useGolfers, useStaff, GOLFER_SORTS, sortGolfers, golfersCsv, ACTIVITY_DAYS,
useManagerIds, useCourses, addCourseManager, removeCourseManager,
CreateManagerForm, MigrationNeeded, userName, tierLabel, TIERS, normalTier,
MembershipCard, AccessCard, GuestPassesCard, DangerZone,
useMatchHistory, useMatchTrend, sendPasswordReset, setUserPassword, useUserEmail, MatchEditor, deleteMatches, CourseCard, useSbxCourses,
TabBar, TrendChart */
// People — the golfer database, and who has keys to which course.
//
// The detail panel is the existing UserDetail mounted with `embedded`. Every
// control it carries — membership tier, admin toggle, guest passes and their
// allowance maths, course access, the delete path — is behaviour that already
// works and has nothing to gain from being retyped. This file replaces the
// list around it, not the thing itself.
// Two tiers now. Legacy values in the database still normalise to one of
// these, so a row saved before sql/people-admin.sql still lands in a bucket.
const MEMBER_TIER_KEYS = ['free', 'plus'];
const LEGACY = { walkup: 'free', stats: 'free', league: 'plus', plus: 'plus', free: 'free' };
const tierKey = (t) => LEGACY[t] || 'free';
function initialsOf(name) {
return String(name || '').split(' ').filter(Boolean).slice(0, 2)
.map(s => s[0].toUpperCase()).join('') || '·';
}
function relativeDay(iso) {
if (!iso) return 'Never';
const days = Math.floor((Date.now() - new Date(iso).getTime()) / 864e5);
if (days <= 0) return 'Today';
if (days === 1) return 'Yesterday';
if (days < 30) return `${days}d ago`;
if (days < 365) return `${Math.round(days / 30)}mo ago`;
return `${Math.floor(days / 365)}y ago`;
}
// ─── PersonAvatar ───────────────────────────────────────────────────────────
// The picture when there is one, initials when there isn't. onError matters:
// an avatar_url that 404s would otherwise leave a broken-image glyph in
// every row, which looks worse than never having tried.
function PersonAvatar({ src, name, size = 28 }) {
const [failed, setFailed] = React.useState(false);
const show = src && !failed;
return (
{show
? setFailed(true)}
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}/>
: initialsOf(name)}
);
}
// ─── RolePill ─────────────────────────────────────────────────────────
// Filled for admin, outlined for manager, nothing at all for a regular
// golfer — most rows are regular, and a badge on every one is noise.
function RolePill({ role }) {
if (role === 'regular') return null;
const s = role === 'admin'
? { background: 'var(--cream)', color: 'var(--forest)', border: '1px solid var(--cream)' }
: { background: 'transparent', color: 'var(--ink)', border: '1px solid var(--ink-faint)' };
return {role};
}
// ─── Filter chips ─────────────────────────────────────────────────────
function Chips({ options, value, onChange }) {
return (
);
}
// Sortable column header. The arrow shows both which column is sorted and
// which way, so the table never leaves you guessing why the order changed.
function Th({ id, label, sort, onSort, align = 'left' }) {
const on = sort.key === id;
return (
{state.error || (debounced ? `Nobody matches “${debounced}”.` : 'No golfers match these filters.')}
)}
Rounds and spend cover the last 12 months and exclude cancellations and no-shows.
);
}
// ─── MatchHistory ─────────────────────────────────────────────────────
// Result is shape as well as fill, matching how the app renders match play
// everywhere else: W filled, L outlined, H a dashed outline.
function ResultBadge({ outcome }) {
const map = {
W: { background: 'var(--cream)', color: 'var(--forest)', border: '1px solid var(--cream)', label: 'W' },
L: { background: 'transparent', color: 'var(--ink-soft)', border: '1px solid var(--ink-faint)', label: 'L' },
H: { background: 'transparent', color: 'var(--ink-muted)', border: '1px dashed var(--ink-faint)', label: 'H' },
}[outcome];
if (!map) return —;
return (
{map.label}
);
}
function MatchHistory({ user }) {
const [pages, setPages] = React.useState(1);
const hist = useMatchHistory(user.id, pages);
// Which match is open for editing. MatchEditor + its data layer come from
// the monorepo (components/matches-data.jsx); this screen is the only
// place the admin dashboard can reach them, so the rows are the way in.
const [editing, setEditing] = React.useState(null);
// Bulk cleanup — the reason this exists is test/junk matches skewing a
// real golfer's SBX rating, and those rarely come one at a time.
const [selectMode, setSelectMode] = React.useState(false);
const [selected, setSelected] = React.useState(() => new Set());
const [confirmBulk, setConfirmBulk] = React.useState(false);
const [busy, setBusy] = React.useState(false);
const [err, setErr] = React.useState('');
// GolferCards does not remount this component when the admin switches to
// a different golfer's page (no `key` on the tree above it) — so without
// this, a page number or a stale selection from the last golfer viewed
// would carry over onto the next one.
React.useEffect(() => {
setPages(1); setSelectMode(false); setSelected(new Set()); setErr('');
}, [user.id]);
if (editing) {
return (
Match history isn’t visible to admins yet.{' '}
The golfer app’s row-level security lets a player read only their own matches. Run{' '}
sql/people-admin.sql in Supabase to
add read-only admin access.
{m.status !== 'completed' && (
{m.status}
)}
);
const rowStyle = {
display: 'flex', alignItems: 'center', gap: 12, padding: '11px 0',
borderTop: i ? '1px solid var(--line)' : 'none',
width: '100%', textAlign: 'left', font: 'inherit',
background: isSelected ? 'rgba(234,226,206,0.05)' : 'transparent',
border: 'none', borderRadius: 0, cursor: 'pointer',
};
// Reapply the top hairline over the selection tint, since the
// background override above would otherwise paint over it.
if (i) rowStyle.borderTop = '1px solid var(--line)';
return (
);
})}
{hist.hasMore && !selectMode && (
)}
)}
{confirmBulk && (
This permanently deletes {selected.size} match{selected.size === 1 ? '' : 'es'} and their
hole-by-hole scores{selectedCourses.length
? <> — {selectedCourses.slice(0, 3).join(', ')}{selectedCourses.length > 3 ? `, +${selectedCourses.length - 3} more` : ''}
: null}. There is no undo.
SBX ratings are recomputed on a schedule, not instantly — the golfer’s rating will
catch up to this once that job next runs, not the moment you click delete.
);
}
// ─── CopyField ────────────────────────────────────────────────────────
// A value you are meant to take away with you, with a copy button that
// confirms it worked. navigator.clipboard only exists in a secure context,
// so there is a fallback for plain http.
function CopyField({ value, label }) {
const [copied, setCopied] = React.useState(false);
async function copy() {
let ok = false;
try {
if (navigator.clipboard && window.isSecureContext) {
await navigator.clipboard.writeText(value);
ok = true;
}
} catch (_) { ok = false; }
if (!ok) {
// Fallback: a hidden textarea and the old execCommand path.
try {
const ta = document.createElement('textarea');
ta.value = value;
ta.setAttribute('readonly', '');
ta.style.cssText = 'position:fixed;top:-1000px;opacity:0';
document.body.appendChild(ta);
ta.select();
ok = document.execCommand('copy');
ta.remove();
} catch (_) { ok = false; }
}
if (ok) { setCopied(true); setTimeout(() => setCopied(false), 2000); }
}
return (
{label &&
{label}
}
{value}
);
}
// ─── PasswordPanel ────────────────────────────────────────────────────
// A reset link and a direct set are genuinely different operations here,
// and the panel says which is which rather than presenting two buttons that
// look equivalent.
function PasswordPanel({ user }) {
const known = useUserEmail(user.id); // undefined while looking, null if unavailable
const [email, setEmail] = React.useState('');
const [touched, setTouched] = React.useState(false);
// Fill it in once the lookup lands, unless the admin has already typed.
React.useEffect(() => { if (known && !touched) setEmail(known); }, [known, touched]);
const [pw, setPw] = React.useState('');
const [busy, setBusy] = React.useState('');
const [err, setErr] = React.useState('');
const [note, setNote] = React.useState('');
const [confirm, setConfirm] = React.useState(false);
const [done, setDone] = React.useState(null); // { password, email, emailConfirmed }
function generate() {
// Readable and shareable — three short chunks. It is a temporary
// password the account holder is expected to change, not a secret we
// are protecting, so Math.random is adequate here.
const chunk = () => Math.random().toString(36).slice(2, 6);
setPw(`${chunk()}-${chunk()}-${chunk()}`);
setErr(''); setNote('');
}
async function reset() {
setBusy('reset'); setErr(''); setNote('');
try {
const addr = await sendPasswordReset(email);
setNote(`Reset link sent to ${addr}. It expires, so tell them to look now.`);
setEmail('');
} catch (e) { setErr(e.message); }
setBusy('');
}
async function apply() {
setBusy('set'); setErr(''); setNote('');
try {
const res = await setUserPassword(user.id, pw);
// The password stays on screen until it is dismissed. Clearing it on
// success was the original behaviour and it was a trap: a generated
// password nobody had copied yet vanished the moment it was set.
setDone({ password: pw, email: res.email, emailConfirmed: res.emailConfirmed !== false });
} catch (e) { setErr(e.message); }
setBusy(''); setConfirm(false);
}
if (done) {
return (
Password
Password set{done.email ? <> for {done.email} : null}.
Copy it now — it is not stored anywhere and this is the only time it is shown.
Send it over something private, not email.
{!done.emailConfirmed && (
This account’s email has never been confirmed, so Supabase will refuse an
email-and-password sign-in even with the right password. Confirm it in
Authentication → Users, or turn off “Confirm email” for the project.
)}
);
}
return (
Password
Send a reset link
They set their own password and you never see it.
{known === undefined
? ' Fetching the address on file…'
: known
? ' Their address is filled in below; change it if you need to send it somewhere else.'
: ' Their address needs typing in — run sql/people-admin.sql and it will fill itself in.'}
{ setEmail(e.target.value); setTouched(true); }}
placeholder={known === undefined ? 'Looking up their email…' : 'their@email.com'}
aria-label="Email for the reset link"
style={{ flex: '1 1 160px', minWidth: 150 }}/>
Set one directly
For a course account you’re handing over in person. Goes through an Edge Function,
because changing someone else’s password needs a key that must never be in a browser.
);
}
// ─── Golfer detail tabs ───────────────────────────────────────────────
// Three tabs, split by what you came to do rather than by which table the
// data lives in:
// Overview — who is this person (read-only), plus the password
// controls, which are the one thing you reach for
// without wanting to change anything about the account
// Player history — what they have actually done: form over time, and
// every match
// Settings — everything that CHANGES the account, including the
// irreversible bit, behind one deliberate click
//
// Membership appears in both, deliberately and differently: a read-only
// card on Overview because "what tier are they" is a question you ask far
// more often than you change it, and the editable one in Settings. Reading
// it should not put a control that alters billing under the cursor.
const GOLFER_TABS = [
{ id: 'overview', label: 'Overview', hint: 'Who this golfer is' },
{ id: 'history', label: 'Player History', hint: 'Form over time, and every match' },
{ id: 'settings', label: 'Settings', hint: 'Membership, passes, access, deletion' },
];
// A labelled value, or a muted em-dash. Rows whose value is missing are
// dropped by the caller rather than rendered blank, so the card never shows
// a column of dashes.
function FactRow({ label, children }) {
return (
<>
{label}
{children}
);
}
// Membership, stated not offered. The editable control is in Settings.
function TierReadout({ tier }) {
const key = normalTier(tier);
const plus = key === 'plus';
return (
Membership
{tierLabel(key)}
{plus ? 'Priority seeding in the sift, and guest passes.' : 'Pays per round, no priority seeding.'}
Change this under Settings.
);
}
function OverviewTabPanel({ user }) {
const email = useUserEmail(user.id); // undefined while looking, null if unavailable
const display = user.handle ? `@${String(user.handle).replace(/^@/, '')}` : null;
const real = [user.first_name, user.last_name].filter(Boolean).join(' ').trim();
const joined = user.created_at
? new Date(user.created_at).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })
: null;
// gender / birthday are rendered only if the row actually carries them.
// `profiles` has neither column today and fetchGolfers selects an explicit
// list, so these never appear — but naming a column that doesn't exist in
// that select would fail the whole golfer query (which is exactly how the
// `tier` migration broke this screen once). So: no schema guesswork, and
// the rows light up on their own if the columns are ever added.
const facts = [
display && ['Display name', display],
real && ['Real name', real],
user.gender && ['Gender', String(user.gender)],
user.birthday && ['Birthday', new Date(user.birthday).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })],
['SBX rating', user.sbx != null ? Number(user.sbx).toFixed(3) : 'Not rated yet'],
joined && ['Joined', joined],
['Email', email === undefined ? 'Looking it up…' : (email || 'Not available — run sql/people-admin.sql')],
].filter(Boolean);
return (
Identity
{facts.map(([k, v]) => {v})}
);
}
// ─── Player history ───────────────────────────────────────────────────
const TREND_WINDOWS = [
{ key: '7d', label: '1W', days: 7 },
{ key: '30d', label: '1M', days: 30 },
{ key: '6m', label: '6M', days: 182 },
{ key: '1y', label: '1Y', days: 365 },
{ key: 'all', label: 'All', days: null },
];
function PlayerHistoryPanel({ user }) {
const trend = useMatchTrend(user.id);
const sbxHist = useSbxHistory(user.id, user.sbx);
const [win, setWin] = React.useState('6m');
// SBX is the headline; Form is the fallback that works from day one,
// since SBX history only starts accumulating from the day the table
// went in and a brand-new trail is a single dot.
const [mode, setMode] = React.useState('sbx');
// A different golfer starts from the same defaults rather than inheriting
// whatever was open on the last one.
React.useEffect(() => { setWin('6m'); setMode('sbx'); }, [user.id]);
const chosen = TREND_WINDOWS.find(w => w.key === win) || TREND_WINDOWS[2];
const since = chosen.days == null ? null : Date.now() - chosen.days * 864e5;
// Cumulative win-loss differential, running from the golfer's very first
// match — then sliced to the window. Cumulative rather than per-match so
// the line reads as form (climbing = winning more than losing), and built
// from the full series rather than the window so the curve entering the
// window starts where the golfer actually was, not at zero.
const series = React.useMemo(() => {
if (!trend || !trend.points.length) return [];
let run = 0;
return trend.points.map(p => {
if (p.outcome === 'W') run += 1;
else if (p.outcome === 'L') run -= 1;
return { at: p.at, y: run, outcome: p.outcome };
});
}, [trend]);
const inWindow = React.useMemo(
() => (since == null ? series : series.filter(p => p.at >= since)),
[series, since]
);
const sbxSeries = (sbxHist && sbxHist.points) || [];
const sbxInWindow = React.useMemo(
() => (since == null ? sbxSeries : sbxSeries.filter(p => p.at >= since)),
[sbxSeries, since]
);
if (!trend || !sbxHist) {
return
;
}
// Window delta = where the value ended minus where it stood going in. The
// point immediately BEFORE the window is the true baseline; with none, the
// series starts inside the window, so its own first point is the baseline
// (for form that's a differential of zero — genuinely where they started;
// for a rating it's simply the earliest reading we hold).
function deltaOf(all, windowed, zeroBase) {
if (!windowed.length) return 0;
const firstIdx = since == null ? 0 : all.findIndex(p => p.at >= since);
const base = (since == null || firstIdx <= 0)
? (zeroBase ? 0 : windowed[0].y)
: all[firstIdx - 1].y;
return windowed[windowed.length - 1].y - base;
}
const isSbx = mode === 'sbx';
const sbxDelta = deltaOf(sbxSeries, sbxInWindow, false);
const formDelta = deltaOf(series, inWindow, true);
const delta = isSbx ? sbxDelta : formDelta;
const deltaText = isSbx
? `${sbxDelta > 0 ? '+' : sbxDelta < 0 ? '−' : ''}${Math.abs(sbxDelta).toFixed(3)}`
: (formDelta > 0 ? `+${formDelta}` : String(formDelta));
const played = inWindow.length;
const w = inWindow.filter(p => p.outcome === 'W').length;
const l = inWindow.filter(p => p.outcome === 'L').length;
const h = inWindow.filter(p => p.outcome === 'H').length;
const decided = w + l;
const winRate = decided ? Math.round((w / decided) * 100) : null;
const deltaColor = delta > 0 ? 'var(--cream)' : delta < 0 ? 'var(--loss-soft, #E7B8A7)' : 'var(--ink-muted)';
const stat = { fontFamily: 'var(--font-display)', fontSize: 25, color: 'var(--paper)', marginTop: 3, lineHeight: 1.1 };
const modeBtn = (on) => ({
padding: '5px 12px', font: 'inherit', fontSize: 11, fontWeight: 700,
fontFamily: 'var(--font-mono)', cursor: 'pointer', border: 'none',
background: on ? 'var(--cream)' : 'transparent',
color: on ? 'var(--forest)' : 'var(--ink-muted)',
});
return (
{isSbx ? 'SBX Rating Over Time' : 'Form Over Time'}
{isSbx
? <>Sandbox Rating™ as recorded, one reading per day it changed. Currently{' '}
{user.sbx != null ? Number(user.sbx).toFixed(3) : '—'}
.
: <>Running win-loss differential — every win takes it up one, every loss down one.
Halved matches hold it level.}
{TREND_WINDOWS.map(t => (
))}
Change
{deltaText}
{isSbx ? 'SBX over the window' : 'Net over the window'}
{sbxSeries.length
? <>Only one reading so far{sbxInWindow.length ? '' : ` — none inside the last ${chosen.label}`}.
A line needs a second one, which lands the next time their rating moves.
: <>No readings yet for this golfer.}
{series.length
? `No completed matches in the last ${chosen.label}.`
: 'No completed matches yet — the curve starts at their first result.'}
)}
{/* Both worth saying out loud rather than letting someone infer them
from numbers that look more complete than they are. */}
{isSbx
? <>Rating history starts the day it was switched on — there is no record of where
anyone sat before that, and nothing here back-fills one. Record, matches and win
rate above always describe match results, not the rating.
: <>This is match record, not SBX — switch to SBX for the rating itself.}
{' '}Matches where this golfer sat in a 2v2’s second seat aren’t counted here,
matching the list below.
This is your own account — the delete control is hidden here on purpose.
) : }
);
}
function GolferCards({ user, adminId, onGone }) {
const [tab, setTab] = React.useState('overview');
// Switching golfers returns to Overview rather than dropping the admin
// into the previous golfer's Settings tab — this component is reused, not
// remounted, when the open golfer changes.
React.useEffect(() => { setTab('overview'); }, [user.id]);
return (
);
}
// ─── StaffBoard ───────────────────────────────────────────────────────
// Access read by course rather than by person, because "who can get into
// Melreese" is the question you ask when somebody leaves.
// ─── StaffBoard ───────────────────────────────────────────────────────
// Courses as tiles with their own photograph, because "which course is this"
// is answered by a picture far faster than by a name in a list — and the
// picture is the one the golfers already see, so the two halves of the
// product look like the same company.
//
// The card carries the operational answer too: who holds the keys, or a
// blunt "No manager assigned" when nobody does. A course with no manager
// cannot publish tee times, so that is the state worth spotting from across
// the room rather than reading for.
function StaffBoard({ adminId }) {
const [staff, reload] = useStaff();
const [courses] = useCourses();
const [golfers] = useGolfers('');
// Which courses actually have a Sandbox 9 on them. The card draws the same
// distinction the map pins do, and a badge that appears on one surface and
// not the other is worse than no badge at all.
const sbxIds = useSbxCourses();
const [query, setQuery] = React.useState('');
const [openId, setOpenId] = React.useState(null);
if (!staff || !courses) return ;
const byCourse = staff.byCourse;
// The managers of one course, in the shape CourseCard wants.
const managersOf = (courseId) => {
const entry = byCourse[courseId];
return (entry ? entry.managers : []).map(m => ({
id: m.id,
userId: m.user_id,
link: m,
name: m.user ? userName(m.user) : 'Unknown account',
handle: m.user && m.user.handle ? `@${String(m.user.handle).replace(/^@/, '')}` : null,
initials: initialsOf(m.user ? userName(m.user) : '?'),
avatar_url: m.user ? m.user.avatar_url : null,
since: m.created_at ? String(m.created_at).slice(0, 10) : null,
}));
};
// undefined until the lookup lands, so the card says nothing rather than
// wrongly claiming a course has no Sandbox setup.
const withSbx = (c) => (sbxIds ? { ...c, hasSbx: sbxIds.has(c.id) } : c);
const open = openId ? courses.find(c => c.id === openId) : null;
if (open) {
return { setOpenId(null); reload(); }} onChanged={reload}/>;
}
// One search box over both halves of the question — "who runs Melreese"
// and "what does Marco run" are the same lookup from the user's side, so
// they should not be two different controls.
const term = query.trim().toLowerCase();
const shown = courses.filter(c => {
if (!term) return true;
const mgrs = managersOf(c.id);
return [c.name, c.short_name, c.city, c.state].some(v => String(v || '').toLowerCase().includes(term))
|| mgrs.some(m => `${m.name} ${m.handle || ''}`.toLowerCase().includes(term));
});
const unstaffed = courses.filter(c => !managersOf(c.id).length);
return (
setQuery(e.target.value)}
placeholder="Search by course or manager" aria-label="Search courses and managers"
style={{ paddingLeft: 32 }}/>
{shown.length} of {courses.length} course{courses.length === 1 ? '' : 's'}
{!!unstaffed.length && !term && (
{unstaffed.length} course{unstaffed.length === 1 ? ' has' : 's have'} nobody with portal access
{' '}
— {unstaffed.map(c => c.short_name || c.name).join(', ')}. Nobody there can publish tee times or set yardages.
)}
{shown.length ? (
{shown.map(c => (
setOpenId(c.id)}/>
))}
) : (
Nothing matches “{query}”.
Search runs over course names, cities and the people who manage them.
)}
);
}
// ─── One course's keys ────────────────────────────────────────────────
// The grant/revoke behaviour is unchanged; it just has a page of its own now
// instead of being stacked inside every row of a list.
function CourseStaffPanel({ course, managers, adminId, people, loadingPeople, onBack, onChanged }) {
const [pick, setPick] = React.useState('');
const [busy, setBusy] = React.useState('');
const [err, setErr] = React.useState('');
const [confirm, setConfirm] = React.useState(null);
const already = new Set(managers.map(m => m.userId));
const candidates = people.filter(p => !already.has(p.id));
async function grant() {
if (!pick) return;
setBusy('grant'); setErr('');
try { await addCourseManager({ userId: pick, courseId: course.id, createdBy: adminId }); setPick(''); onChanged(); }
catch (e) { setErr(e.message); }
setBusy('');
}
async function revoke(m) {
setBusy(m.id); setErr('');
try { await removeCourseManager(m.id); onChanged(); }
catch (e) { setErr(e.message); }
setBusy(''); setConfirm(null);
}
return (
{course.short_name || course.name}
{[course.city, course.state].filter(Boolean).join(', ') || 'Location not set'}
Portal access
{managers.length ? (
{managers.map((m, i) => (
{m.name}
{m.handle || '—'}{m.since ? ` · since ${m.since}` : ''}
))}
) : (
Nobody can sign in to the partner portal for this course, so no tee times or yardages
can be published here.