/* global React, Icon, money, Dial, PageSkeleton, sbx, useRcCourses,
CourseEditor, RcEditor, TierPill, AlertDot, PARTNER_TIERS,
saveCourseLocation, saveCourseBasics, placeFromAddress, addressQuery, DADE,
OnboardingPanel, useOnboarding, useRcTeeCourseIds, teesFor, onboardingProgress, isOnboarding,
ProgressBar, addBasemap, StickySave */
// The admin course page — one course, everything about it, behind tabs.
//
// "Full course" and "SBX course" are genuinely two different records: the
// real 18-hole layout with tees, rating and slope lives in rc_courses, and
// the Sandbox-9 pitch-and-putt setup lives in courses. They were reached
// from two separate buttons on a list; here they are two tabs on one page,
// which is what they always were conceptually.
//
// The editors themselves are the existing ones, mounted with `embedded` so
// they drop their own back button. Nothing about how a course is saved
// changes — this is a container, not a rewrite.
// Location used to be its own tab; it now lives inside Overview (below the
// stats/partnership cards) since "how is this course doing" and "where is
// it" are both things you'd check on the same first glance, not two clicks.
const COURSE_TABS = [
{ id: 'overview', label: 'Overview', hint: 'How this course is doing, and where it is' },
{ id: 'onboarding', label: 'Onboarding', hint: 'Everything this course still needs, and the way to go live' },
{ id: 'sbx', label: 'SBX Course', hint: 'Sandbox-9 layout, pricing & status' },
{ id: 'full', label: 'Regular Course', hint: 'Real tees, yardage, rating & slope' },
];
function TabBar({ tabs, value, onChange }) {
return (
);
}
// ─── Location section (lives under Overview) ──────────────────────────
// City/state/address plus a coordinate, all in one place — they used to be
// split across the SBX Course tab (city/state/address, plain text) and a
// separate Location tab (lat/lng, on a map), which meant "where is this
// course" had two different answers to maintain in two different places.
// Address-first ordering here matches the coordinate picker below it: look
// it up from the address already on file, drag the pin, or type the numbers.
function LocationSection({ course, onSaved }) {
const [city, setCity] = React.useState(course.city || '');
const [state, setState] = React.useState(course.state || '');
const [address, setAddress] = React.useState(course.address || '');
const [basicsBusy, setBasicsBusy] = React.useState(false);
const [basicsErr, setBasicsErr] = React.useState('');
const [basicsMsg, setBasicsMsg] = React.useState('');
// Opening a different course re-renders this component rather than
// remounting it, so without this the previous course's address would
// stay in the boxes — and worse, could be saved onto the new one.
React.useEffect(() => {
setCity(course.city || ''); setState(course.state || ''); setAddress(course.address || '');
setBasicsErr(''); setBasicsMsg('');
}, [course.id]); // eslint-disable-line react-hooks/exhaustive-deps
const dirty = (city || '') !== (course.city || '')
|| (state || '') !== (course.state || '')
|| (address || '') !== (course.address || '');
async function saveBasics() {
setBasicsBusy(true); setBasicsErr(''); setBasicsMsg('');
try {
await saveCourseBasics(course.id, { city, state, address });
setBasicsMsg('Saved.');
onSaved();
} catch (e) { setBasicsErr(e.message || 'Could not save.'); }
setBasicsBusy(false);
}
const holder = React.useRef(null);
const mapRef = React.useRef(null);
const markerRef = React.useRef(null);
const [lat, setLat] = React.useState(course.lat != null ? String(course.lat) : '');
const [lng, setLng] = React.useState(course.lng != null ? String(course.lng) : '');
const [busy, setBusy] = React.useState('');
const [err, setErr] = React.useState('');
const [note, setNote] = React.useState('');
const hasLeaflet = typeof window.L !== 'undefined';
// Built from what's in the boxes, not from the saved row — the address
// fields sit directly above the lookup button now, so the hint has to
// describe what you're about to look up rather than what was last saved.
const query = addressQuery({ ...course, city, state, address });
const place = React.useCallback((la, ln) => {
setLat(String(la)); setLng(String(ln));
if (mapRef.current) {
mapRef.current.setView([la, ln], Math.max(mapRef.current.getZoom(), 15));
if (markerRef.current) markerRef.current.setLatLng([la, ln]);
}
}, []);
React.useEffect(() => {
if (!hasLeaflet || !holder.current || mapRef.current) return undefined;
const L = window.L;
const start = [
course.lat != null ? Number(course.lat) : DADE.lat,
course.lng != null ? Number(course.lng) : DADE.lng,
];
const map = L.map(holder.current, { zoomControl: false })
.setView(start, course.lat != null ? 15 : 10);
const basemap = addBasemap(map, { maxZoom: 19 });
L.control.zoom({ position: 'bottomright' }).addTo(map);
const icon = L.divIcon({
className: 'sbx-pin-wrap',
html: '
',
iconSize: [34, 34], iconAnchor: [17, 34],
});
const marker = L.marker(start, { icon, draggable: true }).addTo(map);
marker.on('dragend', () => {
const p = marker.getLatLng();
setLat(p.lat.toFixed(6)); setLng(p.lng.toFixed(6)); setNote(''); setErr('');
});
map.on('click', (e) => {
marker.setLatLng(e.latlng);
setLat(e.latlng.lat.toFixed(6)); setLng(e.latlng.lng.toFixed(6)); setNote(''); setErr('');
});
mapRef.current = map; markerRef.current = marker;
return () => { basemap.destroy(); map.remove(); mapRef.current = null; markerRef.current = null; };
}, [hasLeaflet, course.lat, course.lng]);
async function fromAddress() {
setBusy('geo'); setErr(''); setNote(''); setBasicsErr(''); setBasicsMsg('');
try {
// Persist any unsaved edits first, then geocode those same values.
// Skipping this would look up the OLD address while the new one is
// on screen — a trap that only appeared once these two controls were
// put in the same card.
if (dirty) await saveCourseBasics(course.id, { city, state, address });
const hit = await placeFromAddress({ ...course, city, state, address });
place(hit.lat, hit.lng);
setNote(`Matched "${hit.label}". Drag the pin if it's not exactly right.`);
onSaved();
} catch (e) { setErr(e.message); }
setBusy('');
}
async function save() {
setBusy('save'); setErr(''); setNote('');
try {
const la = Number(lat), ln = Number(lng);
if (!Number.isFinite(la) || !Number.isFinite(ln)) throw new Error('Latitude and longitude both need to be numbers.');
if (la < -90 || la > 90) throw new Error('Latitude has to be between -90 and 90.');
if (ln < -180 || ln > 180) throw new Error('Longitude has to be between -180 and 180.');
await saveCourseLocation(course.id, la, ln);
setNote('Location saved.');
onSaved();
} catch (e) { setErr(e.message); }
setBusy('');
}
async function clear() {
setBusy('clear'); setErr(''); setNote('');
try {
await saveCourseLocation(course.id, null, null);
setLat(''); setLng('');
setNote('Location cleared. This course is back in the unplaced list.');
onSaved();
} catch (e) { setErr(e.message); }
setBusy('');
}
const inputStyle = { width: 130, padding: '8px 10px', fontSize: 13, fontFamily: 'var(--font-mono)' };
return (<>
{/* Only the address gets a bar. The coordinate save sits beside the two
boxes it writes, and those change on every drag of the pin — a bar
tracking them would spend the whole session flickering in and out. */}
{
setCity(course.city || ''); setState(course.state || '');
setAddress(course.address || ''); setBasicsErr('');
}}/>
{hasLeaflet
?
:
The map library didn’t load.
}
Address
{/* Not / here: those split evenly with a 140px floor
each, which in this ~340px column forces City and State onto
separate lines. A two-letter state never needed half the width
of a city name anyway. */}
);
}
// ─── AdminCourseDetail ────────────────────────────────────────────────
// ─── CourseBanner ─────────────────────────────────────────────────────
// A wide strip of the course at the top of its page. Short on purpose: it
// is there to say "this is the place", not to be the page. The name sits on
// it so the picture carries the heading rather than pushing it down the
// screen, and a wash underneath keeps that text readable over whatever the
// photograph happens to be doing.
function CourseBanner({ src, course }) {
const [failed, setFailed] = React.useState(false);
if (failed) return null; // a broken image is worse than no banner
return (
{[course.city, course.state].filter(Boolean).join(', ') || 'Location not set'}
);
}
// Shown in place of Overview for a course we hold a scorecard for and have
// not onboarded. There is no revenue, no split and no contract to report, so
// the tab says what it is and offers the one thing you would want to do.
function NotOnboarded({ course, rc, onOnboard }) {
const tees = rc && rc.holes ? `${rc.holes} holes` : null;
return (
Not on Sandbox
We hold a scorecard for this course, nothing more
{[course.city, course.state].filter(Boolean).join(', ') || 'No location on file'}
{tees ? ` · ${tees}` : ''}
. Its real tees and yardages are on the Regular Course tab. Onboarding
it creates the Sandbox record — pricing, split, and the Sandbox 9 laid
over it — and it starts as a draft until the readiness gate passes.
);
}
// The percentage, wherever you are on the course. Its own small loader rather
// than lifting state up: the header should not wait on a tab it may never open.
function HeaderProgress({ course, rc }) {
const [loaded] = useOnboarding(course.id);
const [rcTeeIds] = useRcTeeCourseIds();
if (!loaded) return null;
const p = onboardingProgress({ course, rc, rcTees: teesFor(rc, rcTeeIds), ...loaded });
if (!isOnboarding(course, p.pct)) return null;
return (
Onboarding {p.pct}%
);
}
function AdminCourseDetail({ course, onBack, onChanged, onOnboarded, adminId }) {
// A course reached from the list may have no `courses` row at all — it is
// a scorecard we hold and have not onboarded. Everything downstream keys
// off that: a null id means there is nothing to show revenue, partnership
// or a readiness gate for, and the Sandbox tab is a create form.
const onboarded = !!course.id;
// Opened from "start onboarding", or opened mid-onboarding: land on the
// work rather than on a page of zeroes.
const [tab, setTab] = React.useState(
course.onboarding ? 'onboarding' : onboarded ? 'overview' : 'full');
const [rcCourses] = useRcCourses();
// The full-course record is a different table with no foreign key to the
// SBX one, so they are matched by name — the same join the courses list
// has always done. The list has usually done it already; take its answer
// when it has one rather than waiting on a second fetch.
const rc = React.useMemo(() => {
if (course.rc !== undefined) return course.rc;
if (!rcCourses) return undefined;
const key = (course.name || '').trim().toLowerCase();
return rcCourses.find(c => (c.name || '').trim().toLowerCase() === key) || null;
}, [rcCourses, course.rc, course.name]);
// The banner is the *secondary* picture — render_img, the drawn flyover —
// deliberately not the hero. The hero is already doing its job on the card
// that got you here; repeating it makes the detail page look like the tile
// you just clicked. Falls back to the hero only when there is no second
// image, since a banner is better than a gap.
const banner = course.render_img || course.hero_img || null;
return (
