// Trip Planner — Top Boats leaderboard (left) + upcoming open-party trips (right) // Per-landing booking URL pattern. Returns null if we can't build a usable link // (e.g. unknown landing). Discovered by inspecting the booking buttons on each // landing's schedule page during scraper development. function bookingUrl(s) { switch (s.landing) { case 'Point Loma Sportfishing': return `https://pointloma.fishingreservations.net/sales/user.php?trip_id=${encodeURIComponent(s.sourceId)}`; case 'Seaforth Sportfishing': return `https://seaforth.fishingreservations.net/sales/user.php?trip_id=${encodeURIComponent(s.sourceId)}`; case "Fisherman's Landing": return `https://fishermanslanding.fishingreservations.net/resos/user.php?trip_id=${encodeURIComponent(s.sourceId)}`; case 'H&M Landing': { // H&M's xola integration doesn't give per-trip URLs, so we link to the // boat page where the "Book" widget for upcoming trips lives. const slug = (s.boat || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, ''); return slug ? `https://www.hmlanding.com/boat/${slug}#tab-open-trips` : null; } default: return null; } } // Boat stats lookup: for each boat with any history, compute its career // trophy/angler/day. The Trip Finder uses this to rank upcoming trips by // expected catch-per-dollar. Computed once from window.SD.TRIPS. function buildBoatStats() { const out = {}; for (const t of (window.SD.TRIPS || [])) { const days = t.tripLengthDays > 0 ? t.tripLengthDays : 1; const s = out[t.boat] || (out[t.boat] = { trophy: 0, anglerDays: 0, trips: 0 }); s.trophy += t.totalTuna || 0; s.anglerDays += (t.anglers || 0) * days; s.trips++; } Object.values(out).forEach(s => { s.avgTPAPerDay = s.anglerDays > 0 ? s.trophy / s.anglerDays : 0; }); return out; } function TripPlanner({ filters, setFilters, navigate, tweaks }) { const trips = useMemo(() => SDA.filterTrips(filters), [filters]); const { rows: leaderboard, fleetMedianTPAPerDay } = useMemo( () => SDA.boatLeaderboard(trips, filters.species, filters.minTrips), [trips, filters.species, filters.minTrips] ); const eligibleBoats = leaderboard.filter(r => r.tripCount >= filters.minTrips); const topBoatLimit = tweaks.density === 'compact' ? 15 : 12; const topBoats = eligibleBoats.slice(0, topBoatLimit); const maxTPAPerDay = topBoats[0]?.avgTPAPerDay || 1; const speciesActive = filters.species && filters.species !== 'all'; const speciesLabel = speciesActive ? filters.species : 'Tuna'; // Filter the schedule: only future trips that respect any relevant filters. // Year, Species, and Min Trips don't apply to scheduled trips (year is always // forward, schedule has no species data, min-trips is a leaderboard concept). const SEASONS = { spring: [3,4,5], summer: [6,7,8], fall: [9,10,11], winter: [12,1,2] }; // Filter value may be 'all', a single string, or an array of strings (multi-select). const _matches = (val, filter) => { if (filter == null || filter === 'all' || filter === '') return true; const sel = Array.isArray(filter) ? filter : [filter]; return sel.length === 0 || sel.map(String).includes(String(val)); }; const schedule = useMemo(() => { const now = new Date(); const all = (window.SD.SCHEDULE || []).filter(s => { const dep = new Date(s.departureAt); if (dep < now) return false; if (!_matches(s.landing, filters.landing)) return false; if (!_matches(s.boat, filters.boat)) return false; if (!_matches(s.tripLength, filters.tripLength)) return false; if (!_matches(dep.getMonth() + 1, filters.month)) return false; if (filters.season && filters.season !== 'all') { const sel = Array.isArray(filters.season) ? filters.season : [filters.season]; const months = sel.flatMap(s2 => SEASONS[s2] || []); if (months.length > 0 && !months.includes(dep.getMonth() + 1)) return false; } return true; }); all.sort((a, b) => a.departureAt.localeCompare(b.departureAt)); return all; }, [filters]); // Group by departure date so the column has subtle date dividers. const grouped = useMemo(() => { const out = []; let lastDate = null; for (const s of schedule) { const d = s.departureAt.slice(0, 10); if (d !== lastDate) { out.push({ kind: 'header', date: d }); lastDate = d; } out.push({ kind: 'trip', s }); } return out; }, [schedule]); const [finderOpen, setFinderOpen] = useState(false); return ( navigate('dashboard') }, { label: 'Plan' }, { label: 'Trip Planner' }, ]}/>

Trip Planner

Top performing boats matched against {fmt.n(schedule.length)} upcoming open-party trips
setFinderOpen(false)}/>
{/* LEFT: Top Boats panel (mirrors the dashboard widget) */} navigate('boats')}>View All →}> {topBoats.length === 0 ? (
No boats meet the minimum trip threshold for these filters.
) : (
Consistent / Avg performer One-off spike Fleet median ({fmt.tpa(fleetMedianTPAPerDay)})
{topBoats.map((b, i) => { const wpct = (b.avgTPAPerDay / maxTPAPerDay) * 100; const medLinePct = (fleetMedianTPAPerDay / maxTPAPerDay) * 100; return (
navigate('boat', { boat: b.boat })}>
{i + 1}
{b.boat}
{b.landing.replace(' Sportfishing','').replace(' Landing','')} · {b.tripCount} trips
{b.label && ( {b.label === 'Consistent' ? 'Consistent' : 'Spike'} )}
{fmt.tpa(b.avgTPAPerDay)}
); })}
)} {/* RIGHT: Upcoming Trips */}
); } // Shared grid template so the header row and data rows always line up. const SCHEDULE_GRID = { display: 'grid', gridTemplateColumns: '1fr 92px 110px 50px 64px 48px', gap: 8, alignItems: 'center', }; function fmtDateShort(d) { return d.toLocaleDateString([], { month: 'short', day: 'numeric' }); } function fmtTime(d) { return d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }); } function ScheduleRow({ s }) { const dep = new Date(s.departureAt); const ret = s.returnAt ? new Date(s.returnAt) : null; const depStr = `${fmtDateShort(dep)} ${fmtTime(dep)}`; const retStr = ret ? `${fmtDateShort(ret)} ${fmtTime(ret)}` : '—'; const price = s.price != null ? `$${s.price.toFixed(0)}` : '—'; const load = s.capacity != null ? String(s.capacity) : '—'; const landingShort = s.landing.replace(' Sportfishing', '').replace(' Landing', ''); const url = bookingUrl(s); const boatLabel = url ? ( e.currentTarget.style.color = 'var(--ss-darkseagreen-500)'} onMouseLeave={e => e.currentTarget.style.color = 'var(--ss-black)'}> {s.boat} ) : s.boat; return (
{boatLabel}
{s.tripLength} · {landingShort}
{depStr} {retStr} {load} {price} {s.openSpots}
); } // ---- Trip Finder modal ---------------------------------------------------- // Lets the user enter a target departure date range + trip lengths and shows // a ranked list of upcoming open-party trips. Ranking metric: // value = (boat's career trophy/angler/day) × tripLengthDays / price // i.e. "expected tuna caught per dollar spent". Higher = better. Boats with no // history fall to the bottom (their value defaults to 0). const TOMORROW_ISO = () => { const d = new Date(); d.setDate(d.getDate() + 1); return d.toISOString().slice(0, 10); }; const PLUS_DAYS_ISO = (n) => { const d = new Date(); d.setDate(d.getDate() + n); return d.toISOString().slice(0, 10); }; function TripFinderModal({ open, onClose }) { const [start, setStart] = useState(TOMORROW_ISO()); const [end, setEnd] = useState(PLUS_DAYS_ISO(30)); const [lengths, setLengths] = useState('all'); const [submitted, setSubmitted] = useState(false); // Close on Escape. useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === 'Escape') onClose(); }; document.addEventListener('keydown', onKey); return () => document.removeEventListener('keydown', onKey); }, [open, onClose]); // Reset the "submitted" state when reopening the modal. useEffect(() => { if (open) setSubmitted(false); }, [open]); const boatStats = useMemo(buildBoatStats, []); const results = useMemo(() => { if (!submitted) return []; const startD = new Date(start + 'T00:00:00'); const endD = new Date(end + 'T23:59:59'); const selLens = Array.isArray(lengths) ? lengths : (lengths === 'all' ? [] : [lengths]); const out = []; for (const s of (window.SD.SCHEDULE || [])) { const dep = new Date(s.departureAt); if (dep < startD || dep > endD) continue; if (selLens.length > 0 && !selLens.includes(s.tripLength)) continue; const stats = boatStats[s.boat] || { avgTPAPerDay: 0, trips: 0 }; const expected = stats.avgTPAPerDay * (s.tripLengthDays || 1); const valuePer$ = (s.price && s.price > 0) ? expected / s.price : 0; out.push({ ...s, _expected: expected, _value: valuePer$, _stats: stats }); } // Rank desc by value. Boats with no history (_value=0) go to the bottom. out.sort((a, b) => b._value - a._value); return out; }, [submitted, start, end, lengths, boatStats]); if (!open) return null; return (
e.stopPropagation()}>

Find Best Deals

Trips ranked by expected catch per dollar — boat's historical trophy/angler/day × trip length ÷ price.
{/* Filter form */}
setStart(e.target.value)}/>
setEnd(e.target.value)}/>
{/* Results */} {!submitted ? (
Pick a date range and trip length(s) above, then click Search.
) : results.length === 0 ? (
No open-party trips match your criteria in that date range.
) : (
{results.length} bookable trips. Top of the list = best expected catch for the price.
{results.map((s, i) => { const dep = new Date(s.departureAt); const ret = s.returnAt ? new Date(s.returnAt) : null; const url = bookingUrl(s); const fmtDate = (d) => d.toLocaleDateString([], { month: 'short', day: 'numeric' }); const fmtTime = (d) => d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }); const valueLabel = s._value > 0 ? s._value.toFixed(4) : '—'; const expectedLabel = s._expected > 0 ? s._expected.toFixed(2) : '—'; const avgLabel = s._stats.trips > 0 ? `${s._stats.avgTPAPerDay.toFixed(2)} (${s._stats.trips}t)` : 'no history'; return ( ); })}
# Boat Trip Length Depart Return Price Open Boat avg/day Expected Value
{i + 1} {url ? ( {s.boat} ) : {s.boat}}
{s.landing.replace(' Sportfishing','').replace(' Landing','')}
{s.tripLength} {fmtDate(dep)} {fmtTime(dep)} {ret ? `${fmtDate(ret)} ${fmtTime(ret)}` : '—'} {s.price != null ? `$${s.price.toFixed(0)}` : '—'} {s.openSpots} {avgLabel} {expectedLabel} tuna 0 ? 'var(--ss-darkseagreen-500)' : 'var(--ss-gray-2)', }}>{valueLabel}
)}
); } Object.assign(window, { TripPlanner, TripFinderModal });