/* global React, mountCourseCard, Icon, money, Sparkline, Dial, PageSkeleton, DemoChip,
useNetwork, useStaff, saveCourseLocation, placeAllFromAddress, addressQuery,
PARTNER_TIERS, DADE, addBasemap */
// Network Overview + Map View — the two screens that answer "how is the
// whole network doing", which the admin portal has never had.
const pct = (v) => (v == null ? '—' : `${Math.round(v * 100)}%`);
// ─── TierPill ─────────────────────────────────────────────────────────
// Tier is shape as well as fill: Embed is solid, Growth outlined, Pilot a
// dashed outline. The same rule the match-result pills follow, so the tier
// still reads on a screenshot, in print, or to anyone who can't separate
// the greens.
function TierPill({ tier, founding }) {
const style = {
embed: { background: 'var(--cream)', color: 'var(--forest)', border: '1px solid var(--cream)' },
growth: { background: 'transparent', color: 'var(--ink)', border: '1px solid var(--ink-faint)' },
pilot: { background: 'transparent', color: 'var(--ink-muted)', border: '1px dashed var(--ink-faint)' },
}[tier] || {};
return (
{(PARTNER_TIERS[tier] || {}).label || tier}{founding ? ' · ★' : ''}
);
}
// ─── AlertDot ─────────────────────────────────────────────────────────
// Critical is a filled ring, warn is hollow — again shape first.
function AlertDot({ severity, size = 7 }) {
const critical = severity === 'critical';
return (
);
}
// ─── KPI tile ─────────────────────────────────────────────────────────
function NetKpi({ label, value, sub, points }) {
return (
{label}
{value}
{sub &&
{sub}
}
{points && points.length > 1 && (
)}
);
}
// ─── Course tile ──────────────────────────────────────────────────────
// One per partner. Everything you'd ask about a course at a glance, and a
// click opens it. Built as a button so it's keyboard-reachable — a grid of
// clickable divs is the classic way a dashboard becomes unusable without a
// mouse.
function CourseTile({ course, onOpen }) {
const s = course.stat || {};
const worst = course.alerts.some(a => a.severity === 'critical') ? 'critical'
: course.alerts.length ? 'warn' : null;
return (
);
}
// ─── Attention feed ───────────────────────────────────────────────────
function AttentionFeed({ courses, onOpen }) {
const items = [];
courses.forEach(c => c.alerts.forEach(a => items.push({ course: c, ...a })));
items.sort((a, b) => (a.severity === b.severity ? 0 : a.severity === 'critical' ? -1 : 1));
return (
Needs Attention
{items.length}
{!items.length ? (
Nothing flagged. Every course has times published for tomorrow, yardages set today, and a location on the map.
) : (
{items.slice(0, 12).map((it, i) => (
))}
)}
);
}
// ─── NetworkOverview ──────────────────────────────────────────────────
function NetworkOverview({ onOpenCourse }) {
const [net] = useNetwork();
if (!net) return ;
const t = net.totals || {};
return (
{net.demo &&
}
{!net.migrated && (
Partnership data isn't in the database yet.{' '}
Tier is being inferred from each course's revenue split, and map locations can't be
saved. Run sql/admin-overhaul.sql in
Supabase to make it real.
)}
The Network
{net.courses.map(c => )}
{!net.courses.length && (
No courses yet. Add one from SBX Courses.
)}
);
}
// ─── Map View ─────────────────────────────────────────────────────────
// Leaflet with a muted dark basemap, and the Sandbox monogram as the pin
// rather than Leaflet's default blue marker — the courses should read as
// ours at a glance.
//
// Courses with no coordinates are not dropped at 0,0 (which is in the Gulf
// of Guinea); they sit in a rail beside the map, and clicking one arms
// placement so the next click on the map sets it. That turns a data gap
// into the one screen where it's easiest to fix.
function pinHtml(course, armed) {
const critical = course.alerts.some(a => a.severity === 'critical');
// Two kinds of pin, because they are two different businesses:
//
// forest disc = an official partner. A Sandbox 9 is laid out on the
// ground here — mats down, yardages set.
// cream disc = a golf course we list so people can play it, with no
// SBX setup on it.
//
// Each disc carries the monogram drawn for it — cream mark on forest,
// forest mark on cream. A single masked asset was tried first so one file
// could take either colour; the mask fills the counters inside the
// letterforms and the mark becomes a blob at 21px.
const ring = critical ? 'rgba(155,58,46,0.95)' : armed ? 'var(--forest)' : 'rgba(14,40,24,0.55)';
const kind = course.hasSbx ? ' sbx-pin--partner' : ' sbx-pin--listed';
const title = course.hasSbx ? 'Sandbox partner course' : 'Non-partner course — no Sandbox 9 set up';
return `
`;
}
function MapView({ onOpenCourse }) {
const [net, reload] = useNetwork();
// The hover card names who holds the keys, and useNetwork does not carry
// that. Without it every pin would claim "No manager assigned", which is
// worse than saying nothing — one small query buys an honest card.
const [staff] = useStaff();
const holder = React.useRef(null);
const mapRef = React.useRef(null);
const layerRef = React.useRef(null);
const [arming, setArming] = React.useState(null); // course awaiting a click
const [err, setErr] = React.useState('');
const [busy, setBusy] = React.useState(false);
const [geo, setGeo] = React.useState(null); // geocoding progress
const [pinFilter, setPinFilter] = React.useState('all'); // all | partner | listed
const [listQuery, setListQuery] = React.useState('');
const armingRef = React.useRef(null);
armingRef.current = arming;
const hasLeaflet = typeof window.L !== 'undefined';
// Create the map once — but only once the container is actually in the
// DOM. This effect first runs while the skeleton is still up, when the
// holder ref is null; without `ready` in the dependencies it would bail
// then and never run again, leaving an empty box where the map goes.
const ready = !!net;
React.useEffect(() => {
if (!hasLeaflet || !ready || !holder.current || mapRef.current) return undefined;
const L = window.L;
const map = L.map(holder.current, { zoomControl: false, attributionControl: true })
.setView([DADE.lat, DADE.lng], 10);
const basemap = addBasemap(map, { maxZoom: 19 });
L.control.zoom({ position: 'bottomright' }).addTo(map);
layerRef.current = L.layerGroup().addTo(map);
mapRef.current = map;
map.on('click', async (e) => {
const course = armingRef.current;
if (!course) return;
setBusy(true); setErr('');
try {
await saveCourseLocation(course.id, e.latlng.lat, e.latlng.lng);
setArming(null);
reload();
} catch (ex) {
setErr(ex.message || 'Could not save the location.');
} finally {
setBusy(false);
}
});
return () => { basemap.destroy(); map.remove(); mapRef.current = null; layerRef.current = null; };
}, [hasLeaflet, ready, reload]);
// Redraw pins whenever the network or the armed course changes.
// One predicate for the pins and for the list beneath them, so pressing a
// legend row cannot leave the two disagreeing about what is on screen.
const matchesFilter = React.useCallback(
(c) => pinFilter === 'all' || (pinFilter === 'partner' ? !!c.hasSbx : !c.hasSbx),
[pinFilter]);
// course_managers → the shape CourseCard wants. Empty until useStaff
// resolves, which is why `staff` is in this effect's dependencies: the
// pins are rebuilt once the names are in, rather than caching a card that
// says nobody has access.
const managersFor = React.useCallback((courseId) => {
const entry = staff && staff.byCourse && staff.byCourse[courseId];
return (entry ? entry.managers : []).map(m => {
const nm = m.user
? ([m.user.first_name, m.user.last_name].filter(Boolean).join(' ').trim()
|| (m.user.handle ? `@${String(m.user.handle).replace(/^@/, '')}` : 'Unknown'))
: 'Unknown account';
return {
id: m.id, name: nm, avatar_url: m.user ? m.user.avatar_url : null,
initials: nm.split(' ').filter(Boolean).slice(0, 2).map(x => x[0].toUpperCase()).join('') || '·',
};
});
}, [staff]);
React.useEffect(() => {
if (!mapRef.current || !layerRef.current || !net) return;
const L = window.L;
const layer = layerRef.current;
layer.clearLayers();
const placed = net.courses.filter(c => c.geo && matchesFilter(c));
placed.forEach(c => {
const icon = L.divIcon({
className: 'sbx-pin-wrap',
html: pinHtml(c, arming && arming.id === c.id),
iconSize: [34, 34], iconAnchor: [17, 34], popupAnchor: [0, -32],
});
const marker = L.marker([c.geo.lat, c.geo.lng], { icon, title: c.short_name || c.name, keyboard: true })
.on('click', () => { if (!armingRef.current) onOpenCourse(c); })
.addTo(layer);
// Hover preview: the same CourseCard the Course Staff grid uses, not a
// second hand-written popup. Leaflet wants a DOM node, so the real
// component is mounted into one — a duplicate HTML version would drift
// from the card within a week and nobody would notice.
//
// Built lazily on first hover and kept on the marker afterwards: most
// pins are never hovered, and mounting a React root per pin up front
// would cost more than the feature is worth.
// Keep the card inside the map. Leaflet's own answer is autoPan, which
// moves the map out from under the cursor on a mere hover — so instead
// the popup's offset is computed from where the pin actually sits in
// the container: flipped below the pin when there is no room above,
// and nudged sideways when it would run off an edge.
//
// The height is measured from the rendered popup rather than assumed,
// because it varies — a course with three managers is taller than one
// with none — and cached on the marker so later hovers place it right
// the first time.
const CARD_W = 216, PAD = 10, PIN_LIFT = 32;
// A popup that has just opened measures 1px tall: Leaflet has created
// the element but React has not painted the card inside it yet. Taking
// that at face value made the second pass decide there was plenty of
// room and undo the first pass's flip — the bug that kept the card off
// the top of the map. Anything implausibly short is ignored in favour
// of the last good measurement.
const measure = () => {
const popup = marker.getPopup();
const el = popup && popup.getElement();
const h = Math.max(el ? el.offsetHeight : 0, marker.__sbxNode ? marker.__sbxNode.offsetHeight : 0);
if (h > 40) marker.__sbxH = h;
return marker.__sbxH || 210;
};
const place = () => {
const map = mapRef.current;
const popup = marker.getPopup();
if (!map || !popup) return;
const h = measure();
const size = map.getSize();
const pt = map.latLngToContainerPoint(marker.getLatLng());
// Above by default; below when the top would clear the map's edge.
let dy = -6;
if (pt.y - PIN_LIFT - 6 - h < PAD) dy = PIN_LIFT + h + 16;
// Leaflet centres the popup on the anchor, so an edge pin needs a
// horizontal nudge rather than a flip.
let dx = 0;
const half = CARD_W / 2;
if (pt.x - half < PAD) dx = Math.round(PAD + half - pt.x);
else if (pt.x + half > size.x - PAD) dx = Math.round(size.x - PAD - half - pt.x);
const cur = popup.options.offset;
if (!cur || cur.x !== dx || cur.y !== dy) {
popup.options.offset = window.L.point(dx, dy);
popup.update();
}
};
const preview = () => {
if (!marker.__sbxNode) {
const node = document.createElement('div');
node.className = 'map-card';
mountCourseCard(node, { course: c, managers: managersFor(c.id), compact: true });
marker.__sbxNode = node;
marker.bindPopup(node, {
className: 'sbx-map-popup', closeButton: false, autoPan: false,
offset: [0, -6], minWidth: CARD_W, maxWidth: CARD_W,
});
}
place(); // right first time once the height is known
marker.openPopup();
// Nothing exists to measure until it is open, and the card inside
// paints a frame or two later, so correct twice and then stop. Both
// are no-ops once the height has been cached.
requestAnimationFrame(place);
clearTimeout(marker.__sbxFit);
marker.__sbxFit = setTimeout(place, 80);
};
marker.on('mouseover', preview);
marker.on('focus', preview);
// A small grace period so crossing the gap between pin and popup does
// not flicker it shut.
marker.on('mouseout', () => {
clearTimeout(marker.__sbxHide);
marker.__sbxHide = setTimeout(() => marker.closePopup(), 140);
});
marker.on('blur', () => marker.closePopup());
});
if (placed.length) {
const bounds = L.latLngBounds(placed.map(c => [c.geo.lat, c.geo.lng]));
mapRef.current.fitBounds(bounds, { padding: [56, 56], maxZoom: 13 });
}
}, [net, arming, onOpenCourse, managersFor, matchesFilter]);
if (!net) return ;
const sbxCount = net.courses.filter(c => c.hasSbx).length;
const listedCount = net.courses.length - sbxCount;
const unplaced = net.courses.filter(c => !c.placed);
// Courses we can look up rather than ask someone to point at.
const withAddress = unplaced.filter(c => !!addressQuery(c));
async function geocodeAll() {
setErr(''); setGeo({ i: 0, total: withAddress.length });
const { done, failed } = await placeAllFromAddress(withAddress, setGeo);
setGeo(null);
reload();
if (failed.length) {
setErr(`Placed ${done.length} of ${withAddress.length}. ${failed.map(f => `${f.course.short_name || f.course.name}: ${f.message}`).join(' ')}`);
}
}
const placedAll = net.courses.filter(c => c.geo);
const shownOnMap = placedAll.filter(matchesFilter);
const term = listQuery.trim().toLowerCase();
const listed = shownOnMap.filter(c => !term
|| [c.short_name, c.name, c.city, c.state].some(v => String(v || '').toLowerCase().includes(term)));
const LEGEND = [
{ key: 'all', n: net.courses.length, label: 'All courses', sub: 'Everything on the map' },
{ key: 'partner', n: sbxCount, label: 'Partner courses', sub: 'Sandbox 9 on the ground' },
{ key: 'listed', n: listedCount, label: 'Non-partner courses', sub: 'No Sandbox setup yet' },
];
return (
{net.demo &&
}
{!hasLeaflet && (
The map library didn’t load. Check the network connection and refresh.
)}
{hasLeaflet && (<>
{arming && (
{busy ? 'Saving\u2026' : <>Click the map to place {arming.short_name || arming.name}.}
)}
{/* Right rail. The placement queue only appears when something is
actually waiting — an "everything is fine" card every day is
furniture you stop reading. */}
{err && (
{err}
)}
Courses
{/* The key doubles as the filter: the thing that explains the
colours is the thing you press to isolate one, so there is
no second control to learn. */}
${(course.short_name || course.name || '').replace(/[<>&]/g, '')}