{showTitle && (

{nine === 'back' ? 'Back Nine' : 'Front Nine'}

)}

{/* groups walk above the track */} {groups.map(g => { const frac = g.finished ? 1 : Math.min(1, (g.holeIdx + (STAGE_FRAC[g.stage] || 0.12)) / 9); return ; })} {/* the track */}

{/* tee marker */}

Tee

{/* hole checkpoints 1..9 */} {Array.from({ length: 9 }, (_, i) => { const holeN = base + i + 1; const left = ((i + 1) / 9) * 100; const isLast = i === 8; return (

{isLast ? `Hole ${holeN}` : holeN}

); })}

); } // ─── Board column — one shared shell for Coming Soon / On The Course / // Completed so the three read as ONE operational board (divider rows // inside a single bordered panel), not three separate floating cards. ── function BoardColumn({ title, icon, count, border, empty, emptyText, children }) { return (

{title} {count != null && {count}}

{empty ? (

{emptyText}

) : children}

); } // One queued group: tee time, nine, roster with SPP marks + SBX chips. function ComingRow({ c, first }) { return (

{timeLabel(c.teeISO)} {c.nine === 'back' ? 'Back 9' : 'Front 9'} {c.ghost && c.mode ? ` · ${c.mode}` : ''}{c.ghost ? ' · demo' : ''}

{c.players.map((p, i) => (

{p.member && SPP member

} {p.name} {p.sbx != null ? p.sbx.toFixed(3) : '—'}

))}

); } // One active group: avatars, live status text (from STAGE_LABEL), running clock. function OnCourseRow({ g, now, first }) { return (

{g.players.slice(0, 4).map((p, i) => )}

{groupStatusText(g)}

{g.teeISO ? `Off ${timeLabel(g.teeISO)}` : ''} · {elapsedLabel(g.startMs, now)} elapsed {g.leader ? ` · ${g.leader}` : ''} {g.ghost && g.mode ? ` · ${g.mode}` : ''}{g.ghost ? ' · demo' : ''}

); } // One finished round: quiet check state, no pulse. function CompletedRow({ g, now, first }) { return (

{g.players.slice(0, 4).map((p, i) => )}

Finished

{g.teeISO ? `Off ${timeLabel(g.teeISO)}` : ''}{g.endMs ? ` · done ${elapsedLabel(g.endMs, now)} ago` : ''} {g.leader ? ` · ${g.leader}` : ''} {g.ghost && g.mode ? ` · ${g.mode}` : ''}{g.ghost ? ' · demo' : ''}

); } function BoardSkeleton() { return (

); } function LiveBoard({ course }) { const [real, reload] = useLiveOnCourse(course.id); const [coming] = useComingSoon(course.id); const avgTime = useAvgRoundTime(course.id); const ghosts = useGhostGroups(); const demoMode = useDemoMode(); const [now, setNow] = React.useState(Date.now()); React.useEffect(() => { const iv = setInterval(() => setNow(Date.now()), 1000); return () => clearInterval(iv); }, []); // Demo-only: spawn a fabricated group that walks straight onto the course // right now (synthetic slot, starts_at = now → no "Coming Soon" wait). // Ghost emulator tops up the seats from its roster. Purely in-memory — // nothing is written to Supabase. `count` (2/3/4) picks the adaptive match // mode to demo — real tee-time tiles are still always a foursome today // (booking flow hasn't flipped the adaptive-modes flag), but this button // has no real booking underneath it, so it can show all three. const [liveEmulateCount, setLiveEmulateCount] = React.useState(4); function emulateLive() { const slot = { id: `demo-live-${Math.random().toString(36).slice(2, 9)}`, starts_at: new Date().toISOString() }; ghostEmulateSlot(slot, 'front', null, liveEmulateCount); } const { onCourse, completed, queuedGhosts } = boardGroups(real, ghosts, now); // Slots already playing or finished shouldn't also appear as "coming soon". const busySlots = new Set([...onCourse, ...completed].map(g => g.slotId).filter(Boolean)); // Coming soon = real booked-not-started tee times + queued ghost foursomes. const comingRows = [ ...(coming || []).filter(c => !busySlots.has(c.slotId)).map(c => ({ key: c.slotId, teeISO: c.teeISO, players: c.players, nine: getSlotNine(c.slotId), ghost: false })), ...queuedGhosts.map(g => ({ key: g.id, teeISO: g.teeISO, players: g.players, nine: g.nine, ghost: true, mode: g.mode || modeForCount(g.players.length) })), ].sort((a, b) => new Date(a.teeISO) - new Date(b.teeISO)); // Which nines get a line: every nine in play or queued; front by default. const nines = [...new Set([...onCourse.map(g => g.nine), ...comingRows.map(c => c.nine)])]; const lines = ['front', 'back'].filter(n => nines.includes(n)); if (!lines.length) lines.push('front'); const anyGhost = ghosts.length > 0; const loading = real === null && coming === null; const completedSorted = completed.slice().sort((a, b) => (b.endMs || b.startMs) - (a.endMs || a.startMs)); return (

Live · updates automatically

Avg Round {avgTime && avgTime.avgMin != null ? `${avgTime.avgMin} min` : '—'}

{/* Which adaptive match mode to fabricate. Real tee-time tiles are still always a foursome — the booking flow hasn't flipped that flag — but this button has no real booking under it, so it can show all three. Segmented rather than a select: three options, and the current one should be readable without opening it. */} {demoMode && (

{[[2, '1v1'], [3, '1v1v1'], [4, '2v2']].map(([n, label]) => { const on = liveEmulateCount === n; return ( ); })}

)} {demoMode && } {anyGhost && }

{loading ? : ( <> {/* The live map */}

{lines.map((n, i) => (

g.nine === n)} showTitle={lines.length > 1}/>

))} {onCourse.length === 0 && (

Nobody on the course — groups walk this line the moment they tee off.

)}

{/* One operational board: Coming Soon · On The Course · Completed */}

{comingRows.map((c, i) => )} {onCourse.map((g, i) => )} {completedSorted.length > 0 && ( {completedSorted.map((g, i) => )} )}

)}

); } // ─── Waitlist auto-fill ────────────────────────────────────────────────────── // UPDATED 2026-08-24: match_waitlist (described below) was retired in favor // of sandbox_sift + sandbox_lock — member-first seating, provisional slots, // cross-course conflict clearing, and 2/3/4-headcount formats instead of // foursome-only. This function does not replicate that engine and isn't // trying to any more: DemandPanel now calls it ONLY over demand the real // sift hasn't placed yet (no provisionalSlotId), and treats it purely as a // what-if suggestion tool — "if you add this time, this many more people // could fit" — never as a claim about who's actually seated. Ground truth // for who's seated comes from tee_waitlist.provisionalSlotId directly. See // docs/handoff/2026-08-24-match-waitlist-stale-rows.md for the full context. // // Original description of the retired engine's rules, left for reference — // this function's own logic below still mirrors it, since it's a reasonable // heuristic for suggestions even though it's no longer the real algorithm: // Client-side projection of the REAL matching engine (matching.sql — // match_waitlist): foursomes are formed by SBX proximity, not signup order. // Per open time (earliest first): seed with the longest-waiting eligible // golfer — priority (Sandbox+) list first — then seat the 3 closest-SBX // golfers, preferring their integer SBX band (the engine widens ±1.000/hr // for solos, ±1.000/30min for teams) and relaxing beyond it only when the // band can't fill the time (the same way the T-3h sweep opens bands fully). // Slots the course booked directly (blocked) are skipped — the "bump" path. function fillSchedule(slots, entries, blockedIds) { const open = (slots || []) .filter(s => s.status === 'open') .slice() .sort((a, b) => new Date(a.starts_at) - new Date(b.starts_at)); const seats = {}; open.forEach(s => { seats[s.id] = []; }); const pool = [...(entries || [])]; const sbxOf = (e) => (e.sbx != null ? e.sbx : 4); for (const slot of open) { if (blockedIds.has(slot.id)) continue; const m = minutesOfDay(slot.starts_at); const group = []; while (group.length < 4) { const eligible = pool.filter(e => m >= e.startMin && m <= e.endMin); if (!eligible.length) break; let pick; if (!group.length) { // Seed: priority list first, then longest waiting (ready_at order). pick = eligible.sort((a, b) => ((b.priority ? 1 : 0) - (a.priority ? 1 : 0)) || (a.createdAt - b.createdAt))[0]; } else { // Fill: closest SBX to the group's average — in-band (≤1.0) first, // mirroring attempt_pair's `abs(sbx diff) <= 1.0 order by diff`. const anchor = group.reduce((s, e) => s + sbxOf(e), 0) / group.length; const ranked = eligible.slice().sort((a, b) => (Math.abs(sbxOf(a) - anchor) - Math.abs(sbxOf(b) - anchor)) || (a.createdAt - b.createdAt)); pick = ranked.find(e => Math.abs(sbxOf(e) - anchor) <= 1.0) || ranked[0]; } group.push(pick); pool.splice(pool.indexOf(pick), 1); } // This simulation only ever proposes a full foursome — it's a "what // could seat if you add a time" suggestion tool, not the real engine // (which can lock in a trio or a pair at T-1h; see the header comment // above). Anything smaller than 4 goes back in the pool: those golfers // can still combine at a later time they share, and otherwise show as // "not yet pencilled" — which, for real golfers, is genuinely accurate, // since this only ever runs over people the real engine hasn't placed. if (group.length === 4) seats[slot.id] = group; else pool.push(...group); } // Split the leftovers: golfers with NO open time inside their window // (adding a time would seat them → drives the suggestions) vs golfers // who have a time available but not enough companions yet. const hasTime = (e) => open.some(s => { if (blockedIds.has(s.id)) return false; const m = minutesOfDay(s.starts_at); return m >= e.startMin && m <= e.endMin; }); const noFit = pool.filter(e => !hasTime(e)); const waitingMore = pool.filter(e => hasTime(e)); return { seats, unassigned: pool, noFit, waitingMore }; } // Times worth ADDING: half-hour marks inside the unassigned golfers' // windows that aren't live yet, ranked by how many they'd seat (max 4). function suggestTimes(unassigned, liveHMs) { const score = {}; for (const e of (unassigned || [])) { for (let m = Math.ceil(e.startMin / 30) * 30; m <= e.endMin; m += 30) { const hm = `${String(Math.floor(m / 60)).padStart(2, '0')}:${String(m % 60).padStart(2, '0')}`; if (liveHMs.has(hm)) continue; score[hm] = (score[hm] || 0) + 1; } } return Object.entries(score) .map(([hm, n]) => ({ hm, fills: Math.min(4, n) })) .sort((a, b) => b.fills - a.fills || toMin(a.hm) - toMin(b.hm)) .slice(0, 3); } // Single-value slider with the same circular thumb + forest track as the // range slider below, so every slider on the page matches. function SingleSlider({ min, max, step, value, onChange }) { const trackRef = React.useRef(null); const [drag, setDrag] = React.useState(false); const pct = ((value - min) / (max - min)) * 100; const valFromX = (clientX) => { const r = trackRef.current.getBoundingClientRect(); const f = Math.min(1, Math.max(0, (clientX - r.left) / r.width)); return Math.min(max, Math.max(min, Math.round((min + f * (max - min)) / step) * step)); }; React.useEffect(() => { if (!drag) return undefined; const move = (e) => onChange(valFromX(e.clientX)); const end = () => setDrag(false); window.addEventListener('mousemove', move); window.addEventListener('mouseup', end); return () => { window.removeEventListener('mousemove', move); window.removeEventListener('mouseup', end); }; }, [drag]); return (

{ onChange(valFromX(e.clientX)); setDrag(true); }} style={{ position: 'relative', height: 28, cursor: 'pointer' }}>

{ e.stopPropagation(); setDrag(true); }} style={{ position: 'absolute', top: '50%', left: `${pct}%`, transform: 'translate(-50%, -50%)', width: 22, height: 22, borderRadius: 999, background: 'var(--forest)', border: '2.5px solid var(--cream)', boxShadow: 'var(--shadow-sm)', cursor: 'grab', zIndex: 2, }}/>

); } // Dual-range slider (desktop) — pick the hour range the grid shows. function TimeRangeSlider({ min, max, step, value, onChange }) { const trackRef = React.useRef(null); const valueRef = React.useRef(value); valueRef.current = value; const [drag, setDrag] = React.useState(null); const pct = (v) => ((v - min) / (max - min)) * 100; const valFromX = (clientX) => { const r = trackRef.current.getBoundingClientRect(); const f = Math.min(1, Math.max(0, (clientX - r.left) / r.width)); return Math.min(max, Math.max(min, Math.round((min + f * (max - min)) / step) * step)); }; function onTrackDown(e) { const v = valFromX(e.clientX); const [a, b] = valueRef.current; const i = Math.abs(v - a) <= Math.abs(v - b) ? 0 : 1; if (i === 0) onChange([Math.min(v, b - step), b]); else onChange([a, Math.max(v, a + step)]); setDrag(i); } React.useEffect(() => { if (drag == null) return undefined; const move = (e) => { const v = valFromX(e.clientX); const [a, b] = valueRef.current; if (drag === 0) onChange([Math.min(v, b - step), b]); else onChange([a, Math.max(v, a + step)]); }; const end = () => setDrag(null); window.addEventListener('mousemove', move); window.addEventListener('mouseup', end); return () => { window.removeEventListener('mousemove', move); window.removeEventListener('mouseup', end); }; }, [drag]); const thumb = (i) => (

{ e.stopPropagation(); setDrag(i); }} style={{ position: 'absolute', top: '50%', left: `${pct(value[i])}%`, transform: 'translate(-50%, -50%)', width: 22, height: 22, borderRadius: 999, background: 'var(--paper)', border: '2.5px solid var(--forest)', boxShadow: 'var(--shadow-sm)', cursor: 'grab', zIndex: 2, }}/> ); return (

{thumb(0)}{thumb(1)}

); } // Multi-window allowed-time slider. Each window is a [start,end] pair on // one timeline; only the ACTIVE window's circles adjust (the manager picks // which by tapping its "Window N" label above the track). function MultiWindowSlider({ min, max, step, windows, active, onChange, onSelectActive }) { const trackRef = React.useRef(null); const winRef = React.useRef(windows); winRef.current = windows; const [drag, setDrag] = React.useState(null); // { win, edge } edge 0=start 1=end const pct = (v) => ((v - min) / (max - min)) * 100; const valFromX = (clientX) => { const r = trackRef.current.getBoundingClientRect(); const f = Math.min(1, Math.max(0, (clientX - r.left) / r.width)); return Math.min(max, Math.max(min, Math.round((min + f * (max - min)) / step) * step)); }; function setEdge(win, edge, v) { onChange(winRef.current.map((w, i) => { if (i !== win) return w; return edge === 0 ? [Math.min(v, w[1] - step), w[1]] : [w[0], Math.max(v, w[0] + step)]; })); } React.useEffect(() => { if (!drag) return undefined; const move = (e) => { const v = valFromX(e.clientX); if (drag.edge === 'whole') { const [a, b] = drag.origWin; const width = b - a; let ns = a + (v - drag.grabVal); ns = Math.min(max - width, Math.max(min, Math.round(ns / step) * step)); onChange(winRef.current.map((w, i) => i === drag.win ? [ns, ns + width] : w)); } else { setEdge(drag.win, drag.edge, v); } }; const end = () => setDrag(null); window.addEventListener('mousemove', move); window.addEventListener('mouseup', end); return () => { window.removeEventListener('mousemove', move); window.removeEventListener('mouseup', end); }; }, [drag]); // Grabbing a circle activates its window and starts dragging that edge. function grab(win, edge, e) { e.stopPropagation(); if (win !== active) onSelectActive(win); setDrag({ win, edge }); } // Dragging a Window N label moves the WHOLE window (both ends together). function grabWhole(win, e) { e.stopPropagation(); if (win !== active) onSelectActive(win); setDrag({ win, edge: 'whole', grabVal: valFromX(e.clientX), origWin: winRef.current[win].slice() }); } // Tapping the track: select the window under/nearest the click; if it's // already active, start dragging its closer edge. function onTrackDown(e) { const v = valFromX(e.clientX); let idx = windows.findIndex(([a, b]) => v >= a && v <= b); if (idx === -1) { let bd = Infinity; windows.forEach(([a, b], i) => { const d = v < a ? a - v : v - b; if (d < bd) { bd = d; idx = i; } }); } if (idx !== active) { onSelectActive(idx); return; } const [a, b] = windows[idx]; const edge = Math.abs(v - a) <= Math.abs(v - b) ? 0 : 1; setEdge(idx, edge, v); setDrag({ win: idx, edge }); } const COLORS = ['var(--cream)', 'var(--moss-light)', 'var(--sand)', 'var(--clay, #C98A4E)']; return (

{/* Window labels — tap to choose which window you're adjusting */}

{windows.map((w, i) => { const center = (pct(w[0]) + pct(w[1])) / 2; const on = i === active; const c = COLORS[i % COLORS.length]; return ( ); })}

{windows.map((w, i) => { const on = i === active; const c = COLORS[i % COLORS.length]; return (

{[0, 1].map(edge => (

grab(i, edge, e)} style={{ position: 'absolute', top: '50%', left: `${pct(w[edge])}%`, transform: 'translate(-50%, -50%)', width: on ? 22 : 15, height: on ? 22 : 15, borderRadius: 999, background: 'var(--forest-dark)', border: `2.5px solid ${c}`, boxShadow: on ? 'var(--shadow-sm)' : 'none', cursor: 'grab', opacity: on ? 1 : 0.65, zIndex: on ? 3 : 2, transition: 'width 0.15s ease, height 0.15s ease', }}/> ))} ); })}

); } // Light-switch pill — a two-option toggle with a springy sliding knob // (the "gooey" feel comes from the overshoot easing). function PillSwitch({ options, value, onChange, width = 168 }) { const n = options.length; const idx = Math.max(0, options.findIndex(o => o.key === value)); return (

{options.map(o => ( ))}

); } // When a group stops being movable. // // Play is bucketed into half-hour windows: a golfer the sift puts at 5:35 // is playing the 5:30–6:00 window. The lock is an hour before that // WINDOW opens, not an hour before their own tee time — so 5:35 locks at // 4:30, the same moment as everyone else in that window, rather than at // 4:35. That's what makes a window lock as one unit: the whole field is // told their exact time together, and from then on the match is set and // re-sorting isn't the course's call. // // A time with nobody on it is never locked — there's no one to move. const LOCK_LEAD_MS = 3600e3; const PLAY_WINDOW_MIN = 30; const PLAY_WINDOW_MS = PLAY_WINDOW_MIN * 60000; // Floored on the RAW epoch, deliberately — this mirrors the golfer app's // floor_to_30min() exactly (their migration 20260826030000), and the two // have to agree to the millisecond or a manager gets offered a bump on a // group the engine has already locked. // // Flooring local clock minutes instead would match only where the timezone // offset is a whole number of half-hours. Miami always is, but the browser // decides this, not the course — a manager on India time (+5:30) or Nepal // (+5:45) would compute a different boundary from the server. Epoch // flooring has no such dependency. const playWindowStart = (iso) => Math.floor(new Date(iso).getTime() / PLAY_WINDOW_MS) * PLAY_WINDOW_MS; const slotLocked = (slot) => !!slot && Date.now() >= playWindowStart(slot.starts_at) - LOCK_LEAD_MS; // One finished board as a sentence: "R. Piacenti def. B. Young 3&2". // Names come from the tee time's own roster, so nothing extra is fetched — // a seat we can't name falls back to "Player" rather than a raw uuid. function boardLine(m, roster) { const nameOf = (id) => { const p = (roster || []).find(x => x.id === id); return p ? playerName(p) : 'Player'; }; const teamA = [m.player_a, m.player_a2].filter(Boolean).map(nameOf).join(' & '); const teamB = [m.player_b, m.player_b2].filter(Boolean).map(nameOf).join(' & '); if (m.status !== 'completed') { return `${teamA} v ${teamB} — ${m.status === 'active' ? 'still playing' : m.status}`; } if (m.result === 'H') return `${teamA} halved with ${teamB}`; const margin = m.final_margin ? ` ${m.final_margin}` : ''; if (m.result === 'A') return `${teamA} def. ${teamB}${margin}`; if (m.result === 'B') return `${teamB} def. ${teamA}${margin}`; return `${teamA} v ${teamB} — no result recorded`; } // "the 5:30 window" — the same boundary as above, rendered in the course's // local clock for reading. const playWindowLabel = (iso) => timeLabel(new Date(playWindowStart(iso)).toISOString()); // One time in the Live Tee Times grid: booked players layered above the // card, tap to disable (a booked foursome bumps to the next open slot). // State recipe: Open reads quiet (outline only), Filling picks up a faint // forest tint, Booked is the one state allowed to read strong (solid // forest), Disabled/Bumped is muted red. Hover swaps the native title // tooltip for a small popover — the roster on a filled slot, or the tap // hint on an empty one. function LiveTimeCard({ t, slot, players, fillSeats, disabled, blockedDirect, play, onToggle }) { const real = (players || []).filter(p => p.status !== 'cancelled'); const seats = [ ...real.map(p => ({ kind: 'real', key: p.id, p })), ...(fillSeats || []).map(e => ({ kind: 'fill', key: e.id, e })), ].slice(0, 4); const booked = seats.length >= 4; const filling = seats.length > 0 && !booked; const status = blockedDirect ? 'Bumped' : booked ? 'Booked' : filling ? `${seats.length}/4 Filling` : 'Open'; const [hover, setHover] = React.useState(false); const [focusIn, setFocusIn] = React.useState(false); const [info, setInfo] = React.useState(false); const names = seats.map(s => s.kind === 'real' ? playerName(s.p) : s.e.user.name); // The controls are hover-revealed, but a keyboard user never hovers — so // focus inside the card counts as well, otherwise they are unreachable. const showControls = hover || focusIn || info; const locked = slotLocked(slot); // Already teed off. A separate idea from `locked`: locked means the match // is set and can't be re-sorted, played means the round has begun or is // over and there is nothing to re-sort at all. Both block the ✕, but they // are different sentences and the preview shows different things. const started = !!slot && Date.now() >= new Date(slot.starts_at).getTime(); const finishedAt = play && play.completedAt; // The preview is pinned to the VIEWPORT, not to the card. The grid these // cards sit in is a scroll container ~118px per column, so a 246px panel // positioned inside it gets clipped on the first and last column — which // is most of the time. Fixed positioning escapes the clip; the trade is // that it has to be re-measured whenever anything moves under it. const wrapRef = React.useRef(null); const [pos, setPos] = React.useState(null); React.useLayoutEffect(() => { if (!info || !wrapRef.current) { setPos(null); return undefined; } const W = 246; const place = () => { const el = wrapRef.current; if (!el) return; const r = el.getBoundingClientRect(); const left = Math.min(Math.max(8, r.left + r.width / 2 - W / 2), window.innerWidth - W - 8); // Above by default; below when there isn't room above for it. const above = r.top > 300; setPos(above ? { left, bottom: window.innerHeight - r.top + 10, width: W } : { left, top: r.bottom + 10, width: W }); }; place(); window.addEventListener('resize', place); window.addEventListener('scroll', place, true); return () => { window.removeEventListener('resize', place); window.removeEventListener('scroll', place, true); }; }, [info]); // Who ARRIVED together — the thing that decides whether closing this time // splits up friends. Everyone on a tee time plays together regardless. // // partySize comes from the golfer app's own party record, not inferred. // match_type is deliberately NOT used for this: it is the FORMAT a group // ends up playing, not who booked with whom. Three strangers the sift // seats together also play '1v1v1', and three friends who pick up a // fourth become '2v2' — reading a party off it is wrong both ways. // // A party only gets a slot_id once locked, so absence means "not // recorded", never "booked alone". An unpaired seat is therefore left // UNMARKED unless it explicitly says it's still looking (needs_partner): // stamping "solo" on three friends is the one error that would push a // manager to split a party. const realIds = new Set(real.map(p => p.id)); const PARTY_WORD = { 2: 'PAIR', 3: 'TRIO', 4: 'GROUP' }; const seatGroupLabel = (p) => { if (p.partySize >= 2) return PARTY_WORD[Math.min(4, p.partySize)]; if (p.matchType === '2v2' && p.partnerId && realIds.has(p.partnerId)) return 'PAIR'; if (p.needsPartner) return 'SOLO'; return null; }; // Distinct booked parties on this time, largest first. const partySizes = [...new Map( real.filter(p => p.partyId && p.partySize >= 2).map(p => [p.partyId, p.partySize]) ).values()].sort((a, b) => b - a); const pairSeats = real.filter(p => !p.partyId && p.matchType === '2v2' && p.partnerId && realIds.has(p.partnerId)).length; const unknownSeats = real.filter(p => seatGroupLabel(p) === null).length; const format = (real.find(p => p.matchType) || {}).matchType || null; const memberCount = real.filter(p => normalTier(p.tier) === 'plus').length; const recipe = disabled ? { bg: 'rgba(155,58,46,0.14)', border: '1px solid rgba(231,184,167,0.4)', color: 'var(--loss-soft)' } : booked ? { bg: 'var(--cream)', border: '1px solid var(--cream)', color: 'var(--forest)' } : filling ? { bg: 'rgba(234,226,206,0.07)', border: '1px solid rgba(234,226,206,0.24)', color: 'var(--paper)' } : { bg: 'var(--surface)', border: '1px solid var(--line-strong)', color: 'var(--ink-soft)' }; // Every card is the same size: the time never wraps, the status sits on its // own line, and the bottom strip is always reserved (avatars or not) so // spacing stays uniform whether or not a time is booked. const corner = (side) => ({ position: 'absolute', top: -8, [side]: -8, zIndex: 4, width: 22, height: 22, borderRadius: 999, padding: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 800, lineHeight: 1, cursor: 'pointer', border: '1px solid var(--line-strong)', background: 'var(--forest-dark)', color: 'var(--paper)', boxShadow: 'var(--shadow-xs)', opacity: showControls ? 1 : 0, pointerEvents: showControls ? 'auto' : 'none', transition: 'opacity var(--dur-fast) var(--ease)', }); return (

setHover(true)} // Closing the preview on the way out keeps two cards from leaving two // panels floating over the grid at once. A keyboard user holding // focus inside keeps theirs. onMouseLeave={() => { setHover(false); if (!focusIn) setInfo(false); }} onFocus={() => setFocusIn(true)} onBlur={(e) => { if (!e.currentTarget.contains(e.relatedTarget)) { setFocusIn(false); setInfo(false); } }}>

{hmLabel(toMin(t))} {disabled ? 'Off' : status}

{/* ⓘ — what's actually on this tee time */} {/* ✕ — close this time (or reopen it). Re-sorting real players is gated at T-1h, when the lock has already formed the group. */} {/* Foursome avatars straddle the BOTTOM edge (space reserved above) */} {seats.length > 0 && (

{seats.map((s, i) => (

{s.kind === 'real' ? : ( s.e.user.avatar_url ? ( {s.e.user.name}

) : (

{s.e.user.initials}

) )}

))}

)} {/* Light hover tooltip — only while the full preview is closed, so the two never stack on top of each other in the same spot. */} {hover && !info && (

{names.length ? names.join(', ') : disabled ? 'Closed' : 'Open — nobody on it yet'}

)} {/* ⓘ preview — the roster, how they got here, and who's a member */} {info && pos && (

{hmLabel(toMin(t))} {disabled ? 'Closed' : status}

{seats.length === 0 ? (

Nobody on this tee time yet.

) : (

{seats.map(s => { const isReal = s.kind === 'real'; const nm = isReal ? playerName(s.p) : s.e.user.name; const plus = isReal ? normalTier(s.p.tier) === 'plus' : !!s.e.priority; const groupWord = isReal ? seatGroupLabel(s.p) : null; return (

{nm} {isReal && s.p.handle && ( @{String(s.p.handle).replace(/^@/, '')} )} {plus && ( SBX+ )} {isReal ? groupWord : 'PROJECTED'}

); })}

)} {seats.length > 0 && (

{(() => { const bits = []; const word = { 2: 'A pair', 3: 'A threesome', 4: 'A foursome' }; partySizes.forEach(n => bits.push(`${word[Math.min(4, n)]} booked together — keep them together.`)); if (pairSeats >= 2) { const pairs = pairSeats / 2; bits.push(`${pairs === 1 ? 'A pair' : `${pairs} pairs`} booked together.`); } // Never claim "solo" for a seat we can't actually check. if (unknownSeats >= 2) bits.push(`${unknownSeats} seats have no party on record.`); else if (unknownSeats === 1) bits.push('One seat has no party on record.'); if (!bits.length && !partySizes.length && !pairSeats) bits.push('Everyone here signed up on their own.'); return bits.join(' '); })()} {format && ` Format: ${format}.`} {memberCount > 0 && ` ${memberCount} SBX+ member${memberCount === 1 ? '' : 's'}.`} {real.length === 0 && ' These seats are a projection, not real bookings.'}

)} {/* Played, or playing — what happened rather than who might move */} {started && play && play.boards.length > 0 && (

{finishedAt ? 'Round' : 'In progress'}

{play.startedAt ? timeLabel(play.startedAt) : '—'} {finishedAt ? ` → ${timeLabel(finishedAt)}` : ' → still out'} {play.durationMin != null && ` · ${Math.floor(play.durationMin / 60)}h ${String(play.durationMin % 60).padStart(2, '0')}m`}

{play.boards.map(b => (

{boardLine(b, real)}

))}

)} {started && seats.length > 0 && !(play && play.boards.length) && (

This time has passed, but no match was ever recorded against it.

)} {!started && locked && seats.length > 0 && (

Locked — the {slot ? playWindowLabel(slot.starts_at) : ''} window closed to changes an hour before it opened. These players have been told their exact time.

)}

); } // ─── SuggestedPriceCallout ─────────────────────────────────────────────────── // Sits under the Price Per Golfer slider and answers the question the slider // itself cannot: what should this actually be? Sandbox's recommendation is a // share of what the course already charges the public in that window, so the // callout has two states. // // With a rate on file it is a pill showing the number, and tapping it moves // the slider there — a recommendation you have to copy across by hand is one // most people will ignore. Without one it asks for the rate instead of // guessing, because a suggestion whose stated basis is "40% of your rate" // cannot be shown next to a rate we do not have. // // The rate stays editable either way: courses run seasonal and weekday / // weekend pricing, so this is a number that moves. function SuggestedPriceCallout({ course, price, onApply }) { const [rack, setRack] = useRackRate(course); const [editing, setEditing] = React.useState(false); const [draft, setDraft] = React.useState(''); const inputRef = React.useRef(null); React.useEffect(() => { if (editing && inputRef.current) inputRef.current.focus(); }, [editing]); const open = () => { setDraft(rack != null ? String(rack) : ''); setEditing(true); }; const commit = () => { const n = Number(draft); setRack(Number.isFinite(n) && n > 0 ? Math.round(n) : 0); setEditing(false); }; const pct = Math.round(TWILIGHT_SHARE * 100); const wrap = { display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', marginTop: 10, padding: '9px 11px', borderRadius: 'var(--r-sm)', background: 'var(--surface-sunken)', border: '1px solid var(--line-soft)', }; const note = { fontSize: 11.5, lineHeight: 1.35, color: 'var(--ink-muted)' }; const linkBtn = { background: 'none', border: 'none', padding: 0, font: 'inherit', fontSize: 11.5, color: 'var(--ink-muted)', textDecoration: 'underline', cursor: 'pointer', }; // The price column is narrow (min 190px), so the editor stacks rather than // sitting on one line, and Cancel is the same text link as "Edit rate" // instead of a second button that would wrap on its own. if (editing) { return (

Your normal rate

$ setDraft(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); commit(); } if (e.key === 'Escape') { e.preventDefault(); setEditing(false); } }} style={{ width: 64, padding: '5px 8px', fontSize: 13, fontFamily: 'var(--font-mono)' }}/>

What a walk-up pays you for this window on a normal day. Only used to work out the suggestion.

); } if (rack == null) { return (

We suggest a price once we know it — we recommend about {pct}% of your normal tee time rate for this window.

); } const s = suggestedPrice(course, null, null, rack); const atSuggestion = Number(price) === s.suggested; return (

About {pct}% of your ${rack} tee time rate for this window.{' '}

); } // ─── Tee times & pricing ───────────────────────────────────────────────────── // Left: waitlist demand (requested windows, unmet demand, suggested times). // Right: date strip · interval/price/cart · allowed-window slider · Save · // collapsible "Disable Specific Tee Times" blocklist grid · collapsible // "Available tee times" with the waitlist auto-fill + bump. // // BLOCKLIST MODEL: every grid time inside the Allowed Tee Time Window is live // by default; the course only marks the few exceptions it does NOT want (red). // Save makes the day's schedule exactly window-minus-disabled — the window is // authoritative, so live times outside it come down too (booked protected). function TeeTimesPanel({ course }) { const [dateStr, setDateStr] = React.useState(todayStr()); const [intervalMin, setIntervalMin] = React.useState(5); const [includesCart, setIncludesCart] = React.useState(false); const [price, setPrice] = React.useState(Math.min(75, course.suggested_price || 22)); const [windows, setWindows] = React.useState([[16 * 60, 20 * 60]]); // allowed windows (twilight default) const [activeWin, setActiveWin] = React.useState(0); const [disabled, setDisabled] = React.useState(() => new Set()); // 'HH:MM' the course blocked (red) const [forced, setForced] = React.useState(() => new Set()); // 'HH:MM' added from demand suggestions const [blocked, setBlocked] = React.useState(() => new Set()); // slot ids tapped to block — PENDING until Save const [committedBlocked, setCommittedBlocked] = React.useState(() => new Set()); // blocks that have actually been saved → drive the bump const [timesOpen, setTimesOpen] = React.useState(true); // collapsible live-times section const [gridOpen, setGridOpen] = React.useState(false); // "Disable Specific Tee Times" — collapsed by default const [showFormula, setShowFormula] = React.useState(false); const [confirmClose, setConfirmClose] = React.useState(null); // { t, slot, seats } const [busy, setBusy] = React.useState(false); const [err, setErr] = React.useState(''); const [msg, setMsg] = React.useState(''); const [dirty, setDirty] = React.useState(false); // has the manager touched a control since last save/day-change? const markDirty = () => { setDirty(true); setMsg(''); }; const [slots, reload] = useDaySlots(course.id, dateStr); const [fields] = useDayFields(course.id, dateStr); const [dayPlay] = useDayPlay(course.id, dateStr); const [fill] = useCourseFillRate(course.id); const [realDemand] = useCourseWaitlist(course.id, dateStr); const ghostDemand = useGhostDemand(dateStr); // sandbox_lock forms a real booking straight from a tee_waitlist row and // doesn't clear the row it read — so a golfer who's actually booked at // THIS course keeps showing here as still waiting. Drop anyone who already // has a real seat here today before the panel (and fillSchedule's counts) // ever see them; ghost entries have no user.id, so this can't touch them. const bookedUserIds = React.useMemo(() => { const s = new Set(); Object.values(fields || {}).forEach(players => (players || []).forEach(p => { if (p.id) s.add(p.id); })); return s; }, [fields]); // Same idea, cross-course: golfers_booked_elsewhere (PR #299, gated RPC — // see docs/handoff/2026-08-24-cross-course-conflict-rpc.md) flags anyone // sandbox_sift has already excluded for holding a seat at a DIFFERENT // course today. Retire those rows the same way — they're dead, not // "waiting" — rather than folding them into the pencilled/not-pencilled // distinction, which means something else entirely (still being worked vs. // done for good). const demand = React.useMemo( () => [...(realDemand || []), ...ghostDemand].filter(e => !(e.user && e.user.id && (bookedUserIds.has(e.user.id) || e.bookedElsewhere)) ), [realDemand, ghostDemand, bookedUserIds] ); // Which nine golfers see for the day — auto-defaults to the nine Sandbox // measured (course_holes quadrants), overridable via the pill. const [dayHoles] = useDailyYardages(course.id, dateStr); const measuredF = (dayHoles || []).some(h => h.hole_number <= 9 && Array.isArray(h.quadrants) && h.quadrants.some(x => x != null && x !== '')); const measuredB = (dayHoles || []).some(h => h.hole_number > 9 && Array.isArray(h.quadrants) && h.quadrants.some(x => x != null && x !== '')); const [dayNine, setDayNineState] = React.useState('front'); React.useEffect(() => { const stored = getDayNine(course.id, dateStr); setDayNineState(stored || (measuredB && !measuredF ? 'back' : 'front')); }, [dateStr, measuredF, measuredB]); function chooseNine(v) { setDayNineState(v); setDayNine(course.id, dateStr, v); } // Waitlist → open times projection (and what can't fit). // Bumps only take effect once SAVED — the projection (and the persisted // reassignments below) read committedBlocked, not the pending `blocked` set. // // Only run the projection over people sandbox_sift hasn't already placed. // A real waitlist row with provisionalSlotId set is ground truth — the // real engine already seated them — and re-simulating it here could // disagree (this projection doesn't replicate the real band-widening or // cross-course logic) and show a contradiction exactly like the one that // started this: someone real and pencilled, displayed as still waiting. // Ghost entries have no real placement to defer to, so they always run // through the simulation. const notYetPlaced = React.useMemo( () => (demand || []).filter(e => e.ghost || !e.provisionalSlotId), [demand] ); const filled = React.useMemo( () => fillSchedule(slots, notYetPlaced, committedBlocked), [slots, notYetPlaced, committedBlocked] ); // Which tee time a real, already-pencilled entry is actually sitting in — // sandbox_sift can place someone anywhere inside their consented window, // not necessarily the exact time they first asked for. const slotTimeById = React.useMemo(() => { const m = {}; (slots || []).forEach(s => { m[s.id] = s.starts_at; }); return m; }, [slots]); const liveHMs = React.useMemo(() => { const s = new Set(); (slots || []).forEach(x => { if (x.status === 'open') s.add(slotHM(x.starts_at)); }); return s; }, [slots]); const suggestions = React.useMemo( () => suggestTimes(filled.noFit, liveHMs), [filled, liveHMs] ); // NOTE: the board no longer writes tee_assignments. The automated matcher // (sandbox_sift on the half hour, sandbox_lock at T-1h) is the sole author // of foursomes/trios/pairs — it forms real bookings + matches + assignments // straight from tee_waitlist. Auto-writing 'booked' assignments here used // to make the old engine SKIP those golfers (it ignored anyone who already // had a booked/rescheduled assignment), so they never got a real, playable // match. The board is a live view + bump control only; the fill projection // below is a what-if preview for unplaced demand and persists nothing. // Candidate times = interval grid across the allowed window, PLUS any // existing live slots inside it (so they always show up), PLUS any times // added from demand suggestions. const inAnyWindow = React.useCallback( (m) => windows.some(([a, b]) => m >= a && m < b), [windows] ); const candidates = React.useMemo(() => { const set = new Set(); windows.forEach(([a, b]) => genTimes(a, b, intervalMin).forEach(t => set.add(t))); (slots || []).forEach(s => { const m = minutesOfDay(s.starts_at); if (s.status === 'open' && inAnyWindow(m)) set.add(slotHM(s.starts_at)); }); forced.forEach(t => { if (inAnyWindow(toMin(t))) set.add(t); }); return [...set].sort((a, b) => toMin(a) - toMin(b)); }, [windows, intervalMin, slots, forced, inAnyWindow]); const liveSet = React.useMemo(() => { const s = new Set(); (slots || []).forEach(x => { if (x.status === 'open') s.add(slotHM(x.starts_at)); }); return s; }, [slots]); // On first load of a day that already has live times: reconstruct the // window shape, match the interval to the schedule's spacing, and mark // any gaps as disabled (red) — the page always tells the truth about the // day. Live Supabase data is always the source of truth for WHICH times // are actually live. Only when a day has NO live slots yet do we fall // back to this date's saved override, then the course's shared template // (from "Apply to next 10 days"), so a fresh date starts from what the // manager already set up rather than the hardcoded twilight default. const snappedFor = React.useRef(null); React.useEffect(() => { if (slots === null || snappedFor.current === dateStr) return; snappedFor.current = dateStr; const mins = (slots || []).filter(s => s.status === 'open').map(s => minutesOfDay(s.starts_at)).sort((a, b) => a - b); const override = loadTTOverride(course.id, dateStr); if (!mins.length) { const cfg = override || loadTTTemplate(course.id); if (cfg) { setIntervalMin(cfg.intervalMin); setPrice(cfg.price); setIncludesCart(cfg.includesCart); setWindows(cfg.windows); setActiveWin(0); setDisabled(new Set()); } return; } const gapCount = {}; for (let i = 1; i < mins.length; i++) { const g = mins[i] - mins[i - 1]; if (g >= 3 && g <= 15) gapCount[g] = (gapCount[g] || 0) + 1; } const best = Object.entries(gapCount).sort((a, b) => b[1] - a[1])[0]; const iv = best ? Number(best[0]) : 5; if (best) setIntervalMin(iv); // This exact date was saved through this panel before — trust its saved // window shape (could be 2+ separate windows) instead of re-deriving a // single span from the raw slot times. That's what stops a day saved // with, say, a 9-11am window AND a 4-8pm window from coming back as one // combined 9am-8pm window with everything between marked "disabled". if (override && Array.isArray(override.windows) && override.windows.length) { const ovIv = override.intervalMin || iv; setIntervalMin(ovIv); setWindows(override.windows); setActiveWin(0); const live = new Set((slots || []).filter(s => s.status === 'open').map(s => slotHM(s.starts_at))); const candidateSet = new Set(); override.windows.forEach(([a, b]) => genTimes(a, b, ovIv).forEach(t => candidateSet.add(t))); setDisabled(new Set([...candidateSet].filter(t => !live.has(t)))); return; } // No saved override for this date (slots from before this system, or // from somewhere else) — best-effort reconstruction: split the live // times into separate windows wherever there's a large gap, rather than // always collapsing everything into one span. A gap only counts as a // window break once it's both >60min AND >6x the detected interval, so // a cluster of merely-disabled slots in the middle of one window // doesn't get misread as two windows. const breakGap = Math.max(60, iv * 6); const clusters = []; let clusterStart = mins[0], prev = mins[0]; for (let i = 1; i <= mins.length; i++) { const m = mins[i]; if (m === undefined || m - prev > breakGap) { clusters.push([clusterStart, prev]); clusterStart = m; } prev = m; } const newWindows = clusters.map(([a, b]) => [ Math.max(6 * 60, Math.floor(a / 30) * 30), Math.min(22 * 60, Math.max(Math.floor(a / 30) * 30 + 30, Math.ceil((b + iv) / 30) * 30)), ]); setWindows(newWindows); setActiveWin(0); const live = new Set((slots || []).filter(s => s.status === 'open').map(s => slotHM(s.starts_at))); const candidateSet = new Set(); newWindows.forEach(([a, b]) => genTimes(a, b, iv).forEach(t => candidateSet.add(t))); setDisabled(new Set([...candidateSet].filter(t => !live.has(t)))); }, [slots, dateStr]); // Blocklist: every candidate is live unless the course disabled it. const isEnabled = (t) => !disabled.has(t); const selectedTimes = candidates.filter(isEnabled); const selectedSet = new Set(selectedTimes); const disabledInView = candidates.filter(t => disabled.has(t)); // Live "expected daily revenue" from this course's real fill rate. const rate = (fill && fill.rate != null && fill.sampleSlots >= 4) ? fill.rate : null; const seats = selectedTimes.length * 4; const full = seats * (Number(price) || 0); const expected = rate != null ? Math.round(seats * rate * (Number(price) || 0)) : null; const revenue = expected != null ? expected : full; // Tap a chip to toggle its block: red = disabled, won't be offered. function toggleTime(t) { markDirty(); setDisabled(p => { const n = new Set(p); if (n.has(t)) n.delete(t); else n.add(t); return n; }); } // Live-grid tap: flip the block, and when disabling a booked time bump its // foursome (re-enabling clears the bump). function applyToggle(t, slot, hasPlayers) { const willDisable = !disabled.has(t); toggleTime(t); if (!slot) return; // Only a time with real players needs a bump on save; an empty one just // stops being published. if (willDisable && hasPlayers) setBlocked(p => new Set(p).add(slot.id)); else if (!willDisable) setBlocked(p => { const n = new Set(p); n.delete(slot.id); return n; }); } // The ✕ on a card. Closing an empty time is immediate; closing one with // people on it asks first, because confirming means moving real golfers to // a different tee time. function toggleLiveTime(t, slot, seats, locked) { const reopening = disabled.has(t); const n = (seats || []).length; if (reopening || n === 0) { applyToggle(t, slot, false); return; } if (locked) return; // past T-1h — the ✕ is inert setConfirmClose({ t, slot, seats }); } // Bulk: re-enable everything red in view, or block everything in view. function toggleAll() { if (disabledInView.length) setDisabled(p => { const n = new Set(p); disabledInView.forEach(t => n.delete(t)); return n; }); else setDisabled(p => { const n = new Set(p); candidates.forEach(t => n.add(t)); return n; }); } // Demand panel "+ Add" — pull the suggested time into the allowed window // (widening it if needed) and clear any block on it; the manager still saves. function addSuggestedTime(hm) { const m = toMin(hm); setWindows(ws => { if (ws.some(([a, b]) => m >= a && m < b)) return ws; // already covered const lo = Math.floor(m / 60) * 60, hi = Math.ceil((m + 30) / 60) * 60; let bi = 0, bd = Infinity; ws.forEach(([a, b], i) => { const d = m < a ? a - m : m >= b ? m - b : 0; if (d < bd) { bd = d; bi = i; } }); return ws.map((w, i) => i === bi ? [Math.min(w[0], lo), Math.max(w[1], hi)] : w); }); setForced(p => new Set(p).add(hm)); setDisabled(p => { const n = new Set(p); n.delete(hm); return n; }); markDirty(); } // Add another allowed window — drops a 2-hour window into the biggest // free gap on the timeline and makes it the active one to adjust. function addWindow() { const MINH = 6 * 60, MAXH = 22 * 60; setWindows(ws => { const sorted = [...ws].sort((a, b) => a[0] - b[0]); const gaps = []; let cursor = MINH; sorted.forEach(([a, b]) => { if (a - cursor >= 60) gaps.push([cursor, a]); cursor = Math.max(cursor, b); }); if (MAXH - cursor >= 60) gaps.push([cursor, MAXH]); const g = gaps.sort((x, y) => (y[1] - y[0]) - (x[1] - x[0]))[0] || [MINH, MAXH]; const start = g[0], end = Math.min(g[1], start + 120); return [...ws, [start, end]]; }); setActiveWin(windows.length); // the new one markDirty(); } function removeWindow(i) { setWindows(ws => ws.length > 1 ? ws.filter((_, j) => j !== i) : ws); setActiveWin(a => (i < a || a >= windows.length - 1) ? Math.max(0, a - 1) : a); markDirty(); } // Save makes the day's live schedule EXACTLY window-minus-disabled: publish // every enabled time in the window; remove live times that are disabled OR // outside the allowed window (the window is authoritative for the day) — // keeping any that already have players booked. async function saveChanges() { setBusy(true); setErr(''); setMsg(''); try { const dayLive = (slots || []).filter(s => s.status === 'open'); const toRemove = dayLive.filter(s => !selectedSet.has(slotHM(s.starts_at))); const removable = toRemove.filter(s => !(fields[s.id] && fields[s.id].length)); // protect booked const keptBooked = toRemove.length - removable.length; if (selectedTimes.length) { await publishDayTimes({ courseId: course.id, dateStr, times: selectedTimes, price, includesCart }); } for (const s of removable) { await deleteSlot(s.id); } // eslint-disable-line no-await-in-loop // Bumps: move each blocked booked foursome to the next open slot. This is // a real server-side reschedule (reschedule_foursome) — the golfers' real // bookings + assignments move and they get a "tee time moved" card. // Member-affected times go FIRST. The golfer app tells a bumped SBX+ // member "you were re-seated first", and with several closures in one // save that is only true if we actually call them in that order — two // displaced groups can compete for the same later slot, and the RPC // sees one slot per call, so whoever we ask for first wins it. Their // side flagged this rather than let the copy quietly overpromise. const bumpOrder = [...blocked].sort((a, b) => { const plus = (id) => ((fields[id] || []).some(p => normalTier(p.tier) === 'plus') ? 1 : 0); return plus(b) - plus(a); }); let bumped = 0; let released = 0; const bumpErrs = []; for (const slotId of bumpOrder) { try { // null = no later time had room. Not a failure any more: the app // cancels those bookings and notifies the players. const moved = await rescheduleFoursome(slotId, 'manager_override'); // eslint-disable-line no-await-in-loop if (moved) bumped++; else released++; } catch (e) { bumpErrs.push(e.message || 'bump failed'); } } setBlocked(new Set()); setCommittedBlocked(new Set()); const parts = [`${selectedTimes.length} tee time${selectedTimes.length === 1 ? '' : 's'} live`]; if (removable.length) parts.push(`${removable.length} removed`); if (keptBooked) parts.push(`${keptBooked} kept (booked)`); if (bumped) parts.push(`${bumped} moved`); if (released) parts.push(`${released} cancelled`); setMsg('Saved — ' + parts.join(' · ') + '.'); // A cancellation is an outcome worth stating on its own, not a number // buried in the save line: real golfers were told their round is off. if (released) { setErr(`${released} group${released === 1 ? '' : 's'} had no later time with room, so ` + `${released === 1 ? 'its' : 'their'} booking${released === 1 ? ' was' : 's were'} cancelled and ` + `${released === 1 ? 'that group has' : 'those groups have'} been notified. Nothing was charged.`); } else if (bumpErrs.length) { setErr(`${bumpErrs.length} tee time${bumpErrs.length === 1 ? '' : 's'} could not be re-sorted — ` + `those players are unchanged. (${bumpErrs[0]})`); } setDirty(false); // Saving a specific date pins it: an override always wins over the // shared template, so this date won't get overwritten by a later // "Apply to next 10 days" or reset when the manager just revisits it. saveTTOverride(course.id, dateStr, { intervalMin, price, includesCart, windows }); reload(); } catch (e) { setErr(e.message || 'Could not save.'); } setBusy(false); } // Push the current interval/price/cart/windows to 10 days as the course's // shared template. This actually UPDATES each day to match — publishing // the new times and removing whatever's live outside them (never a booked // slot, that's always protected) — so changing the interval really does // replace the old schedule instead of layering on top of it. Other days // that already have their OWN saved override (the manager customized and // saved that specific date) are left untouched. // // The run is anchored at the date currently open, not at today: the setup // being pushed is the one on screen for THAT date, so rolling it forward // from there is what the manager means — and it guarantees the open date // is included, which an always-from-today range silently failed to do // whenever they were looking further than 10 days out. const APPLY_DAYS = 10; const [applying, setApplying] = React.useState(false); const [confirmApply, setConfirmApply] = React.useState(false); const applyDays = React.useMemo(() => { const anchor = new Date(`${dateStr}T00:00:00`); return Array.from({ length: APPLY_DAYS }, (_, i) => isoFromDate(addCalendarDays(anchor, i))); }, [dateStr]); const shortDate = (iso) => new Date(`${iso}T00:00:00`).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }); const applyRangeLabel = `${shortDate(applyDays[0])} – ${shortDate(applyDays[applyDays.length - 1])}`; async function applyToNextDays() { setConfirmApply(false); setApplying(true); setErr(''); setMsg(''); try { saveTTTemplate(course.id, { intervalMin, price, includesCart, windows }); const times = [...new Set(windows.flatMap(([a, b]) => genTimes(a, b, intervalMin)))]; // The open date always applies (running this while looking at it is an // explicit act on that date); every other customized date is skipped. const targetDays = applyDays.filter(d => d === dateStr || !loadTTOverride(course.id, d)); const skipped = applyDays.length - targetDays.length; const { daysChanged, protectedCount } = await applyScheduleAcrossDays({ courseId: course.id, dates: targetDays, times, price, includesCart, }); // This date now matches the template, so it is no longer "customized" — // drop its override, otherwise the banner keeps claiming otherwise and // a later apply from another date would needlessly skip it. clearTTOverride(course.id, dateStr); const parts = [`Applied to ${daysChanged} day${daysChanged === 1 ? '' : 's'}`]; if (skipped) parts.push(`${skipped} customized day${skipped === 1 ? '' : 's'} left alone`); if (protectedCount) parts.push(`${protectedCount} booked time${protectedCount === 1 ? '' : 's'} kept`); setMsg(parts.join(' · ') + '.'); setDirty(false); setDisabled(new Set()); setForced(new Set()); reload(); } catch (e) { setErr(e.message || 'Could not apply.'); } setApplying(false); } // The live-times list shows the whole day's schedule, soonest first. const daySlots = (slots || []).slice().sort((a, b) => new Date(a.starts_at) - new Date(b.starts_at)); const dateIsCustomized = !!loadTTOverride(course.id, dateStr); // Shared look for both sliders. const sliderHeading = { fontWeight: 700, fontSize: 13.5, color: 'var(--ink)' }; const sliderBig = { fontFamily: 'var(--font-display)', fontSize: 34, color: 'var(--paper)', lineHeight: 1, fontVariantNumeric: 'tabular-nums' }; return (

{/* Only Save rides the bar. "Apply to N days" is not a save of pending edits — it republishes the setup forward — and putting the two side by side at the top of every screen is how someone reaches for one and hits the other. */} {/* Date strip — a full-width scroll bar across the whole top of the panel (not squeezed into a column); everything else lives below it, so picking a day always reads as the first, page-wide act. */}

Set The Tee Sheet For The Day

{dateIsCustomized && ( Customized for this date · won't follow your default schedule )}

{ setDateStr(d); setDisabled(new Set()); setForced(new Set()); setBlocked(new Set()); setCommittedBlocked(new Set()); setMsg(''); setDirty(false); }}/> {/* Requested Times sits next to the schedule-controls card — both are "decide what to do with this date" tools, read together. */}

clearTeeAssignments(course.id, dateStr)} allowedWindows={windows} />

{/* 2 - Tee time details */}

Tee Time Interval

{intervalMin}minutes apart

{ setIntervalMin(v); markDirty(); }}/>

3 Min15 Min

Price Per Golfer

${price}per golfer

{ setPrice(v); markDirty(); }}/>

$0$75

{ setPrice(v); markDirty(); }}/>

Expected Daily Revenue

${revenue.toLocaleString('en-US')}

Based on your average booking rate

{showFormula && (

How This Is Calculated

Tee times x 4 players x price x avg booking rate

{selectedTimes.length} x 4 x ${Number(price) || 0}{rate != null ? ` x ${Math.round(rate * 100)}%` : ''} = ${revenue.toLocaleString('en-US')}

{rate != null ? `Avg booking rate is ${Math.round(rate * 100)}% from ${course.short_name}'s last 90 days (${fill.booked}/${fill.seats} seats).` : `No booking history yet - showing full potential ($${full.toLocaleString('en-US')}).`}

)}

{/* Allowed windows */}

Allowed Tee Time Window{windows.length > 1 ? 's' : ''}

{windows.slice().sort((a, b) => a[0] - b[0]).map(w => `${hmLabel(w[0])}-${hmLabel(w[1])}`).join(' ')}

{ setWindows(w); markDirty(); }} onSelectActive={setActiveWin}/>

6 AM10 PM

{windows.length > 1 && ( )}

{/* Golfer-facing settings: cart + which nine */}

Cart

{ setIncludesCart(v === 'cart'); markDirty(); }} width={200}/>

Which Nine - Shown To Golfers

{measuredF && measuredB ? 'Both nines measured - your pick.' : measuredB && !measuredF ? 'Auto: back nine (only one measured).' : 'Auto: front nine.'}

{/* 3 - The two things you can do with this setup, in one place: save it to this date only, or roll it forward as the default. Both stay rendered (Save just disables when there's nothing to save) so the row never reflows and neither action hides. */}

{dirty && {selectedTimes.length} tee time{selectedTimes.length === 1 ? '' : 's'} will be live - 4 players per time - {includesCart ? 'cart included' : 'walk only'}} {msg && {msg}}

{/* Live Tee Times lives in this same right-hand column, right after the schedule card — not as a separate full-width section below everything. Requested Times (to the left) often runs taller than this column; keeping the grid here means it starts filling space the moment the schedule card ends instead of leaving a dead gap while it waits for the taller left column to finish. */}

Live Tee Times · {selectedTimes.length}

Open Filling Booked

Tap a time to disable it — a booked foursome gets bumped to the next open slot.

{slots === null ? : candidates.length === 0 ? (

No tee times in your window yet - widen the window above.

) : (() => { const slotByHM = {}; (slots || []).forEach(s => { if (s.status === 'open') slotByHM[slotHM(s.starts_at)] = s; }); return (

{candidates.map(t => { const slot = slotByHM[t]; return ( toggleLiveTime(t, slot, seats, locked)}/> ); })}

); })()}

{/* Closing a tee time that has players on it. Nothing moves until the manager saves — this only marks it — so the wording says that rather than implying the golfers have already been told. */} {confirmClose && (() => { const names = confirmClose.seats.map(s => s.kind === 'real' ? playerName(s.p) : s.e.user.name); const realCount = confirmClose.seats.filter(s => s.kind === 'real').length; return ( {names.join(', ')} {names.length === 1 ? 'is' : 'are'} on this time. Closing it moves {names.length === 1 ? 'them' : 'them all'} to the next open tee time on this day. {realCount === 0 && (

These seats are a projection, not real bookings yet — nothing will actually be rescheduled.

)} {realCount > 0 && ( // The golfer app cancels-and-notifies when no later time // has room (it used to raise and leave them put). Say what // actually happens to a real person, since it's the worse // of the two outcomes and the manager is choosing it.

If no later time has room their booking is cancelled and they’re told — nothing is charged either way.

)}

Nothing moves until you hit Save Changes.

} confirmLabel="Close and re-sort" onConfirm={() => { applyToggle(confirmClose.t, confirmClose.slot, realCount > 0); setConfirmClose(null); }} onCancel={() => setConfirmClose(null)} /> ); })()} setConfirmApply(false)} />

); } // ─── One live tee time (pill card) ────────────────────────────────────────── // Time + the foursome's four seats (real bookings, then the SBX matchmaking // fill), a Booked/Open status, front/back nine + cart labels (neutral look — // they don't light up either way), Rebook (move the foursome when the course // books the slot directly) and ✕ (remove the time entirely). function TeeTimePill({ slot, players = [], fillSeats = [], blockedDirect, onBump, onUnbump, onSaved, onError }) { const [nine, setNine] = React.useState(() => getSlotNine(slot.id)); const [cart, setCart] = React.useState(!!slot.includes_cart); const [busy, setBusy] = React.useState(false); const [emulated, setEmulated] = React.useState(false); const real = players.filter(p => p.status !== 'cancelled'); const seatList = [ ...real.map(p => ({ kind: 'real', key: p.id, p })), ...fillSeats.map(e => ({ kind: 'fill', key: e.id, e })), ].slice(0, 4); const status = blockedDirect ? 'Bumped' : seatList.length >= 4 ? 'Booked' : 'Open'; function toggleNine() { const v = nine === 'front' ? 'back' : 'front'; setSlotNine(slot.id, v); setNine(v); } async function toggleCart() { const v = !cart; setCart(v); try { await saveSlot({ ...slot, includes_cart: v }); onSaved(); } catch (e) { setCart(!v); onError(e.message || 'Could not save.'); } } // Emulate walks THIS tile's exact foursome onto the live map — the real // booked golfers (avatars and all) plus the matchmaking fill; any missing // seats top up with roster ghosts inside the emulator. function emulate() { const seatPlayers = seatList.map(s => s.kind === 'real' ? { id: s.p.id, name: playerName(s.p), initials: initials(s.p), avatar_url: s.p.avatar_url || null, member: true } : { id: s.e.id, name: s.e.user.name, initials: s.e.user.initials, avatar_url: s.e.user.avatar_url || null, sbx: s.e.sbx, member: !!s.e.priority }); ghostEmulateSlot(slot, nine, seatPlayers); setEmulated(true); window.setTimeout(() => setEmulated(false), 2000); } async function remove() { // The FK is ON DELETE RESTRICT as of 2026-08-26 (it used to CASCADE and // silently delete the booking rows, which is what this dialog used to // claim was a cancellation). A booked time now refuses to delete, so // this promises removal only for an empty one and lets the error speak // for the rest. if (!window.confirm(`Remove the ${timeLabel(slot.starts_at)} tee time? A time with players on it can’t be removed — close it instead so they get re-sorted.`)) return; setBusy(true); onError(''); try { await deleteSlot(slot.id); onSaved(); } catch (e) { onError(e.message || 'Could not remove.'); } setBusy(false); } // Neutral pill look for every control — no fill-color flip on toggle. const miniBtn = { padding: '5px 11px', borderRadius: 999, cursor: 'pointer', fontSize: 11, fontWeight: 700, border: '1px solid rgba(14,28,19,0.22)', background: 'var(--paper)', color: 'var(--ink)', }; return (

{timeLabel(slot.starts_at)} {status}

{/* The foursome — 4 overlapping seats, filled by the SBX matchmaking */}

{Array.from({ length: 4 }).map((_, i) => { const s = seatList[i]; const wrap = { marginLeft: i ? -8 : 0 }; if (!s) return

; if (s.kind === 'real') return

; const e = s.e; const label = `${e.user.name}${e.sbx != null ? ` · SBX ${Number(e.sbx).toFixed(3)}` : ''}${e.priority ? ' · Priority (Sandbox+)' : ''}`; return (

{e.user.avatar_url ? ( {e.user.name}

) : (

{e.user.initials}

)}

); })} {blockedDirect && ( Booked Direct )}

); } // ─── Sift / lock countdown ──────────────────────────────────────────────── // The two crons that actually run seating: sandbox_sift pencils people into // slots on the half hour, sandbox_lock checks every 5 minutes and finalizes // anything whose tee time has reached T-1h into a real booking. Both are // wall-clock cron schedules, not tied to this course or date — so the // countdown is just "next time each one fires," not "next time something // happens to this page." const nextAligned = (nowMs, stepMin) => { const stepMs = stepMin * 60000; return Math.ceil((nowMs + 1) / stepMs) * stepMs; }; const fmtCountdown = (ms) => { const s = Math.max(0, Math.floor(ms / 1000)); const m = Math.floor(s / 60), sec = s % 60; return `${m}:${String(sec).padStart(2, '0')}`; }; function SiftCountdown() { const [now, setNow] = React.useState(() => Date.now()); React.useEffect(() => { const iv = setInterval(() => setNow(Date.now()), 1000); return () => clearInterval(iv); }, []); return (

Next sift {fmtCountdown(nextAligned(now, 30) - now)} Next lock check {fmtCountdown(nextAligned(now, 5) - now)}

); } // ─── Requested tee times (left panel) ─────────────────────────────────────── // What the waitlist is asking for on this date: each requested window with a // head count, how much of it the current schedule seats, and — when demand // can't fit — the times worth adding to catch the rest. function DemandPanel({ demand, filled, suggestions, slotTimeById, dateStr, loading, onAddTime, onClearDemo, allowedWindows }) { // Group identical windows ("6–7pm × 4 waiting"). const windows = React.useMemo(() => { const m = {}; for (const e of demand) { const k = `${e.startMin}-${e.endMin}`; (m[k] = m[k] || { startMin: e.startMin, endMin: e.endMin, entries: [] }).entries.push(e); } return Object.values(m).sort((a, b) => a.startMin - b.startMin || a.endMin - b.endMin); }, [demand]); // Seated = ground truth for a real golfer (sandbox_sift already set // provisionalSlotId — no need to guess) union whatever the projection // seated for ghosts, which have no real placement to defer to. const seatedIds = React.useMemo(() => { const s = new Set(); (demand || []).forEach(e => { if (!e.ghost && e.provisionalSlotId) s.add(e.id); }); Object.values(filled.seats).flat().forEach(e => s.add(e.id)); return s; }, [demand, filled]); const seated = demand.filter(e => seatedIds.has(e.id)).length; const pencilledTime = (e) => { if (e.ghost || !e.provisionalSlotId) return null; const iso = slotTimeById && slotTimeById[e.provisionalSlotId]; return iso ? timeLabel(iso) : null; }; return (

Requested Times

{dayLabel(`${dateStr}T12:00`)}

Waitlist windows golfers gave for this day. sandbox_sift pencils people in on the half hour; sandbox_lock finalizes a group into a real booking at T-1h.

{loading && !demand.length ? : windows.length === 0 ? (

No requests yet for this day.

) : (

{windows.map(w => { const pri = w.entries.filter(e => e.priority).length; // How much of this window is actually pencilled: solid forest // when everyone in it has a real provisionalSlotId (or, for // ghosts, the projection seated them), outlined otherwise. // Still not a booking — nothing here is final until // sandbox_lock fires at T-1h. const pencilled = w.entries.filter(e => seatedIds.has(e.id)).length; const fullyPencilled = pencilled === w.entries.length; return (

{hmLabel(w.startMin)}–{hmLabel(w.endMin)} {pencilled}/{w.entries.length} pencilled

{w.entries.map((e, i) => { const at = pencilledTime(e); return ( {i > 0 && ', '} {e.user.name}{e.ghost ? '*' : ''}{at ? ` (${at})` : ''} ); })}

{pri > 0 && (

★ {pri} priority (Sandbox+)

)}

); })}

)} {demand.length > 0 && (

{seated}/{demand.length} pencilled in

)} {/* Partial demand — golfers this projection hasn't placed yet. Not a guarantee they need a fourth: sandbox_lock forms a foursome first but will lock in a trio or a pair at T-1h if that's all a window has, so someone here can still end up with a real tee time. */} {filled.waitingMore.length > 0 && (

{filled.waitingMore.length} not yet pencilled

{filled.waitingMore.map((e, i) => ( {i > 0 && ', '} {e.user.name}{e.ghost ? '*' : ''} ))}

sandbox_sift favors a foursome when one's available, but will pencil in a trio or a pair at T-1h rather than leave an open window empty.

)} {/* Unmet demand → the times worth adding */} {filled.noFit.length > 0 && (

{filled.noFit.length} can't fit your current times

{suggestions.length > 0 && (

{suggestions.map(s => (

{hmLabel(toMin(s.hm))} fills {s.fills}

))}

)}

Adding a time selects it in the grid — hit Save to make it live.

)}

{demand.some(e => e.ghost) && (

* fabricated demo demand, not a real golfer

)} {/* Demo the demand side without real golfers */}

); } // Multi-select time-of-day window filter (All day / Morning / … / Night). function WindowFilter({ selected, onToggle, hint }) { return (

View {TIME_WINDOWS.map(w => { const on = selected.has(w.key); return ( ); })} {hint && {hint}}

); } // Horizontal date picker, mirroring the golfer app's Play date strip. // A genuinely scrollable strip — 60 days out, not just next-10 — sized to // fill the same width as the cards beneath it rather than shrinking to fit // a handful of chips, with scroll-snap so it settles cleanly. function DateStrip({ value, onChange }) { const days = React.useMemo(() => { const out = [], today = new Date(); today.setHours(0, 0, 0, 0); for (let i = 0; i < 60; i++) { const d = addCalendarDays(today, i); out.push({ str: isoFromDate(d), d, i }); } return out; }, []); // Click-and-drag scrolling ("spin the wheel") instead of a visible native // scrollbar. Drag state lives in a ref (not React state) so mousemove can // write scrollLeft directly every frame without a re-render; a small // pixel threshold (`moved`) is tracked so a plain click on a date chip // doesn't get swallowed by drag logic. const scrollerRef = React.useRef(null); const drag = React.useRef({ active: false, moved: false, startX: 0, startScroll: 0 }); const [grabbing, setGrabbing] = React.useState(false); const onMouseDown = (e) => { const el = scrollerRef.current; if (!el) return; drag.current = { active: true, moved: false, startX: e.pageX, startScroll: el.scrollLeft }; setGrabbing(true); }; React.useEffect(() => { const onMove = (e) => { const st = drag.current; if (!st.active) return; const el = scrollerRef.current; if (!el) return; const dx = e.pageX - st.startX; if (Math.abs(dx) > 4) st.moved = true; el.scrollLeft = st.startScroll - dx; }; const onUp = () => { if (drag.current.active) { drag.current.active = false; setGrabbing(false); } }; window.addEventListener('mousemove', onMove); window.addEventListener('mouseup', onUp); return () => { window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); }; }, []); // Carousel-style Previous/Next paging (same idea as shadcn's // CarouselPrevious/CarouselNext) layered on top of the drag/scroll strip. // The strip itself stays exactly the width of the cards beneath it — the // arrows just overlay its edges and page by ~one viewport at a time, // disabling themselves at the start/end of the 60-day range. const [atStart, setAtStart] = React.useState(true); const [atEnd, setAtEnd] = React.useState(false); const updateEdges = React.useCallback(() => { const el = scrollerRef.current; if (!el) return; setAtStart(el.scrollLeft <= 2); setAtEnd(el.scrollLeft >= el.scrollWidth - el.clientWidth - 2); }, []); React.useEffect(() => { const el = scrollerRef.current; if (!el) return; updateEdges(); el.addEventListener('scroll', updateEdges, { passive: true }); window.addEventListener('resize', updateEdges); return () => { el.removeEventListener('scroll', updateEdges); window.removeEventListener('resize', updateEdges); }; }, [updateEdges]); const page = (dir) => { const el = scrollerRef.current; if (!el) return; el.scrollBy({ left: dir * el.clientWidth * 0.85, behavior: 'smooth' }); }; const arrowBtn = (side, disabled, onClick) => ( ); return (

{arrowBtn('left', atStart, () => page(-1))}

{days.map(({ str, d, i }) => { const on = str === value; return ( ); })}

{arrowBtn('right', atEnd, () => page(1))}

); } // Auto status from who's signed up + play state (a tee time = a foursome of 4): // open · searching for N more · booked · in progress · closed // Derived live; the manager only manually opens/closes. function teeStatus(slot, players) { if (slot.status === 'closed' || slot.status === 'cancelled') return { label: 'closed', tone: 'mute' }; const n = players.length; const anyPlaying = players.some(p => p.status === 'playing'); const allDone = n > 0 && players.every(p => p.status === 'completed'); if (allDone) return { label: 'closed', tone: 'mute' }; if (anyPlaying) return { label: 'in progress', tone: 'live' }; if (n >= 4) return { label: 'booked', tone: 'booked' }; if (n === 0) return { label: 'open', tone: 'open' }; return { label: `searching for ${4 - n} more`, tone: 'search' }; } // Avatar stack + the auto status badge for a tee time's field (out of 4). function FieldStack({ slot, players }) { const st = teeStatus(slot, players); const tones = { open: { background: 'transparent', color: 'var(--forest)', border: '1px solid var(--forest)' }, search: { background: 'rgba(14,28,19,0.06)', color: 'var(--ink-soft)', border: '1px solid transparent' }, booked: { background: 'var(--forest)', color: 'var(--cream)', border: '1px solid var(--forest)' }, live: { background: 'var(--forest)', color: 'var(--cream)', border: '1px solid var(--forest)' }, mute: { background: 'rgba(14,28,19,0.06)', color: 'var(--ink-soft)', border: '1px solid transparent' }, }; const tone = tones[st.tone] || tones.search; return (

{st.tone === 'live' && } {st.label}

{Array.from({ length: 4 }).map((_, i) => { const p = players[i]; return

{p ? : }

; })}

); } function Avatar({ player }) { const ring = '2px solid var(--paper)'; if (player.avatar_url) { return {playerName(player)}

; } return (

{initials(player)}

); } function EmptySeat() { return

; } function playerName(p) { return [p.first_name, p.last_name].filter(Boolean).join(' ') || (p.handle ? '@' + String(p.handle).replace(/^@/, '') : 'Player'); } function initials(p) { const a = (p.first_name || '').trim(), b = (p.last_name || '').trim(); if (a || b) return ((a[0] || '') + (b[0] || '')).toUpperCase(); const h = (p.handle || '').replace(/^@/, ''); return (h[0] || '?').toUpperCase(); } // ─── Daily yardages ────────────────────────────────────────────────────────── // The draggable marker on a yardage row: a golf flag (SPP monogram on the // pennant) whose base sits on the line — drag it to set the pin distance. function FlagThumb({ w = 34, fill = false }) { const h = Math.round(w / 34 * 50); const wrap = fill ? { position: 'relative', width: '100%', filter: 'drop-shadow(0 3px 4px rgba(14,28,19,0.4))' } : { position: 'relative', width: w, height: h, filter: 'drop-shadow(0 2px 3px rgba(14,28,19,0.35))' }; return (

); } // Front 9 / Back 9 pill switch (shared by both yardage flows). function NineToggle({ nine, onChange }) { const seg = (key, label) => { const on = nine === key; return ( ); }; return (

{seg('front', 'Front 9')}{seg('back', 'Back 9')}

); } const inNine = (h, nine) => nine === 'back' ? h.hole_number > 9 : h.hole_number <= 9; // One hole: number + par on the left, the flag slider on the shared track, // and the yardage with ‹ › nudge arrows on the right. A faint tick marks // the standard distance; dragging the flag sets a custom pin for the day. function YardageRow({ h, index, onChange, min, max }) { const trackRef = React.useRef(null); const [drag, setDrag] = React.useState(false); const base = (h.base_yards != null && h.base_yards !== '') ? Number(h.base_yards) : null; const value = (h.yards != null && h.yards !== '') ? Number(h.yards) : (base != null ? base : Math.round((min + max) / 2)); const pct = (v) => ((Math.min(max, Math.max(min, v)) - min) / (max - min)) * 100; const valFromX = (clientX) => { const r = trackRef.current.getBoundingClientRect(); const f = Math.min(1, Math.max(0, (clientX - r.left) / r.width)); return Math.round(min + f * (max - min)); }; React.useEffect(() => { if (!drag) return undefined; const move = (e) => { const cx = (e.touches ? e.touches[0] : e).clientX; onChange(index, valFromX(cx)); if (e.cancelable) e.preventDefault(); }; const up = () => setDrag(false); window.addEventListener('mousemove', move); window.addEventListener('mouseup', up); window.addEventListener('touchmove', move, { passive: false }); window.addEventListener('touchend', up); return () => { window.removeEventListener('mousemove', move); window.removeEventListener('mouseup', up); window.removeEventListener('touchmove', move); window.removeEventListener('touchend', up); }; }, [drag]); const nudge = (d) => onChange(index, Math.min(max, Math.max(min, value + d))); const overridden = (h.yards != null && h.yards !== '') && Number(h.yards) !== base; const arrow = { width: 28, height: 28, borderRadius: 'var(--r-xs)', border: '1px solid var(--line-strong)', background: 'var(--surface)', cursor: 'pointer', fontSize: 17, fontWeight: 700, color: 'var(--paper)', lineHeight: 1, flexShrink: 0, transition: 'border-color var(--dur-fast) var(--ease)' }; return (

{h.hole_number}

PAR {h.par}

{ onChange(index, valFromX(e.clientX)); setDrag(true); }} onTouchStart={(e) => { onChange(index, valFromX(e.touches[0].clientX)); setDrag(true); }} style={{ position: 'relative', flex: 1, height: 54, cursor: 'pointer', touchAction: 'none' }}>

{ e.stopPropagation(); setDrag(true); }} onTouchStart={(e) => { e.stopPropagation(); setDrag(true); }} style={{ position: 'absolute', left: `${pct(value)}%`, bottom: 13, transform: 'translateX(-50%)', cursor: 'grab', zIndex: 2 }}>

{value} yds

{overridden ? 'CUSTOM' : '·'}

); } // Plain-English today, e.g. "Wednesday, July 8, 2026". function todayEnglish() { return new Date().toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' }); } // The green as a 3×3 tic-tac-toe of pin positions (index 0..8, left→right, // top→bottom). In select mode a tap sets the day's pin to that quadrant's // pre-measured yardage; in edit mode each cell is an input for the measured // distance from the tee mat. // One hole card: number up top, the green as a 3×3 pin selector (no numbers // shown), the SPP flag planted on the chosen quadrant, and the approximate // yardage underneath. Forest-green "green" with cream accents = on brand. function QuadrantCard({ h, editing, draftQuads, onSelect, onEditCell }) { const quads = editing ? draftQuads : h.quadrants; const has = Array.isArray(quads); const sel = editing ? null : h.selectedQuadrant; const row = sel != null ? Math.floor(sel / 3) : 0; const col = sel != null ? sel % 3 : 0; return (

Hole {h.hole_number} PAR {h.par}

{/* The green — an organic silhouette sitting in a fairway-toned frame, instead of a flat rectangle, so it reads as an actual green. The organic shape + grid need overflow:hidden to clip cleanly, but the flag does NOT — it lives on this outer, unclipped layer so it can stick up past the green's edge (a top-row pin) instead of getting cut off flush with the boundary. */}

{/* tic-tac-toe dividers */} {[1, 2].map(k =>

)} {[1, 2].map(k =>

)} {/* cells */}

{Array.from({ length: 9 }).map((_, q) => { if (editing) { const v = has ? quads[q] : ''; return ( onEditCell(q, e.target.value)} /* No outline:none here — it removes the only cue a keyboard user has about which cell they are in. */ style={{ border: 'none', background: 'rgba(234,226,206,0.9)', color: 'var(--forest)', textAlign: 'center', fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700, borderRadius: 6, minWidth: 0, width: '100%', boxSizing: 'border-box' }}/> ); } const disabled = !has || quads[q] == null || quads[q] === ''; const on = sel === q; return (

{/* SPP flag planted on the selected quadrant — a soft ground shadow first (grounds it, sells the "sticking up" depth), then the flag itself. Positioning transform stays on this outer element; the rise+fade on quadrant change lives on an INNER wrapper instead, so the entrance animation's own transform never clobbers the anchor. */} {!editing && sel != null && (

)}

{/* Yardage / hint */}

{editing ? Yards per quadrant : (sel != null ? {h.yards != null ? h.yards : '—'}yds : {has ? 'Tap the pin position' : 'Measure first (Edit)'})}

); } function quadrantsFromAnchor(a) { const rowOff = [-5, 0, 5]; // front · middle · back const colOff = [-1, 0, 1]; // left · center · right const out = []; for (let r = 0; r < 3; r++) for (let c = 0; c < 3; c++) out.push(Math.max(10, Math.round(a + rowOff[r] + colOff[c]))); return out; } const holeAnchor = (h) => (h.yards != null && h.yards !== '') ? Number(h.yards) : (h.base_yards != null ? Number(h.base_yards) : 60); // Pin-placement flow: pick the quadrant each hole's pin is on today. Edit mode // captures the one-time measured yardages per quadrant. function PinPlacement({ course, onBack }) { const dateStr = todayStr(); const [holes, reload] = useDailyYardages(course.id, dateStr); const [err, setErr] = React.useState(''); const [nine, setNine] = React.useState('front'); async function selectQuadrant(hole, q, yards) { setErr(''); try { await setDailyPin(course.id, dateStr, hole.hole_number, q, yards); reload(); } catch (e) { setErr(e.message || 'Could not set the pin.'); } } const measured = (h) => Array.isArray(h.quadrants) && h.quadrants.some(x => x != null && x !== ''); const hasFront = (holes || []).some(h => h.hole_number <= 9 && measured(h)); const hasBack = (holes || []).some(h => h.hole_number > 9 && measured(h)); // Managers only see the nine(s) Sandbox has pre-measured. Default to a // measured nine; only show the pill when BOTH nines have quadrants. React.useEffect(() => { if (!holes) return; if (nine === 'front' && !hasFront && hasBack) setNine('back'); if (nine === 'back' && !hasBack && hasFront) setNine('front'); }, [hasFront, hasBack]); const shown = (holes || []).filter(h => inNine(h, nine) && measured(h)); const pinsSet = shown.filter(h => h.selectedQuadrant != null).length; return (

Pin Placement · {todayEnglish()}

Where's the pin today?

{shown.length > 0 && (

{pinsSet} of {shown.length} set

)} {hasFront && hasBack && }

{err &&

{err}

} {holes === null ? : (!hasFront && !hasBack) ? (

This course's pin quadrants haven't been measured yet — Sandbox sets those up.

) : !shown.length ? (

This course's {nine === 'back' ? 'back' : 'front'} nine isn't measured yet.

) : (

{shown.map(h => ( selectQuadrant(h, q, v)} onEditCell={() => {}} /> ))}

Tap the quadrant each pin sits on today. Golfers get the pre-measured distance — no rangefinder needed.

)}

); } // Manual flow: the draggable flag sliders (one row per hole). function ManualYardages({ course, onBack }) { const dateStr = todayStr(); const [holes, reload] = useDailyYardages(course.id, dateStr); const [draft, setDraft] = React.useState(null); const [busy, setBusy] = React.useState(false); const [err, setErr] = React.useState(''); const [msg, setMsg] = React.useState(''); const [nine, setNine] = React.useState('front'); const pristine = React.useRef(null); React.useEffect(() => { const next = holes ? holes.map(h => ({ ...h })) : null; setDraft(next); pristine.current = next; }, [holes]); const dirty = useDirty(draft, pristine); const setYard = (i, v) => setDraft(d => d.map((h, j) => j === i ? { ...h, yards: v } : h)); async function save() { setBusy(true); setErr(''); setMsg(''); try { await saveDailyYardages(course.id, dateStr, draft); pristine.current = draft; setMsg('Saved — golfers starting today play these.'); reload(); } catch (e) { setErr(e.message || 'Could not save.'); } setBusy(false); } return (

{ setDraft(pristine.current); setErr(''); }}/>

Manual Yardages · {todayEnglish()}

Drag each hole's flag to set where the pin is today. A match picks these up when the group starts play.

{draft === null ? : draft.length === 0 ? (

This course has no hole layout yet. Ask an admin to add the Sandbox 9 in Courses.

) : ( <>

{draft.map((h, i) => ({ h, i })).filter(x => inNine(x.h, nine)).map(({ h, i }, r) => (

))} {draft.filter(h => inNine(h, nine)).length === 0 && (

This course's {nine === 'back' ? 'back' : 'front'} nine isn't set up yet.

)}

Drag the flag to set each pin · ‹ › nudge by a yard.

)}

); } // One selectable row on the Yardages entry screen — an icon, a title, a // description, and a chevron. Quiet by default, picks up a forest border // and a slight lift on hover. Replaces the old pair of gradient hero cards. function YardageModeOption({ icon, title, sub, onClick }) { const [hover, setHover] = React.useState(false); return ( ); } // Entry: choose how to input today's yardages, then route to the flow. function YardagesPanel({ course }) { const [mode, setMode] = React.useState(null); // null | 'manual' | 'pins' if (mode === 'manual') return setMode(null)}/>; if (mode === 'pins') return setMode(null)}/>; return (

{todayEnglish()}

How do you want to set today's pins?

setMode('manual')}/> setMode('pins')}/>

); } Object.assign(window, { ManagerPortal, QuadrantCard, NineToggle, inNine, quadrantsFromAnchor, holeAnchor });