// ============================================================= // page-reefer.jsx — Reefer / Cold-Chain Intel // // Data: USDA AMS SC National Truck Rate Report (slug 2375) // Views: produce_currently_shipping, produce_calendar_seasons, // usda_reefer_lanes // Presentation: district cards + heatmap calendar + rate explorer // ============================================================= (function () { const { useState, useEffect, useMemo } = React; const SB_URL = "https://fspqxobtsgyzzcdvpqul.supabase.co"; const SB_KEY = "sb_publishable_0zNSihwdiVEKHD_HQj7Oqw_wEGGPFf6"; const SB_H = { apikey: SB_KEY, Authorization: `Bearer ${SB_KEY}` }; const MONTHS = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; // Inject CSS animations once (function injectReeferStyles() { if (document.getElementById("reefer-anim-css")) return; const s = document.createElement("style"); s.id = "reefer-anim-css"; s.textContent = ` @keyframes reeferPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.45; transform:scale(1.55); } } @keyframes reeferBarFill { from { width: 0% !important; } } @keyframes reeferFadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } } .reefer-pulse { animation: reeferPulse 1.6s ease-in-out infinite; } .reefer-bar { animation: reeferBarFill 0.7s cubic-bezier(0.22,1,0.36,1) both; } .reefer-card { animation: reeferFadeUp 0.4s ease both; } .reefer-cal-row:hover td { background: rgba(22,163,74,0.04) !important; } .reefer-cal-row:hover td:first-child { background: rgba(22,163,74,0.06) !important; } @keyframes flowOut { to { stroke-dashoffset: -18; } } @keyframes flowIn { to { stroke-dashoffset: 18; } } `; document.head.appendChild(s); })(); // Map long USDA district names → short display labels const DISTRICT_LABELS = [ ["CENTRAL AND SOUTH FLORIDA", "S. Florida"], ["SOUTH AND CENTRAL DISTRICT CALIFORNIA", "Central CA"], ["YAKIMA VALLEY AND WENATCHEE", "Yakima WA"], ["IMPERIAL, COACHELLA", "Imperial Valley"], ["MEXICO CROSSINGS THROUGH NOGALES", "Nogales AZ"], ["MEXICO CROSSINGS THROUGH SOUTH TEXAS", "S. Texas"], ["MEXICO CROSSINGS", "Mexico Crossing"], ["OXNARD DISTRICT", "Oxnard CA"], ["KERN DISTRICT", "Kern CA"], ["VIDALIA DISTRICT", "Vidalia GA"], ["LOWER RIO GRANDE", "Rio Grande TX"], ["NEW YORK", "New York"], ["MICHIGAN", "Michigan"], ["NORTH CAROLINA", "N. Carolina"], ["WISCONSIN", "Wisconsin"], ["IDAHO", "Idaho/E. Oregon"], ]; // Geographic coords for each USDA district (for map pins) const DISTRICT_COORDS = [ ["CENTRAL AND SOUTH FLORIDA", [25.8, -80.3]], ["SOUTH AND CENTRAL DISTRICT CALIFORNIA", [36.8, -120.5]], ["YAKIMA VALLEY AND WENATCHEE", [46.6, -120.5]], ["IMPERIAL, COACHELLA", [33.1, -115.5]], ["MEXICO CROSSINGS THROUGH NOGALES", [31.3, -110.9]], ["MEXICO CROSSINGS THROUGH SOUTH TEXAS", [26.2, -98.3]], ["MEXICO CROSSINGS", [31.3, -110.9]], ["OXNARD DISTRICT", [34.2, -119.2]], ["KERN DISTRICT", [35.4, -119.0]], ["VIDALIA DISTRICT", [32.2, -82.4]], ["LOWER RIO GRANDE", [26.2, -97.7]], ["NEW YORK", [40.7, -73.9]], ["MICHIGAN", [44.3, -85.5]], ["NORTH CAROLINA", [35.8, -78.6]], ["WISCONSIN", [44.5, -89.5]], ["IDAHO", [43.6, -116.2]], ]; function findCoords(market) { const up = (market || "").toUpperCase(); for (const [k, v] of DISTRICT_COORDS) { if (up.includes(k)) return v; } return null; } // ── Produce Origins Map ────────────────────────────────────── function ProduceOriginMap({ activeNow }) { const { useRef: useRefMap, useMemo: useMemoMap } = React; const mapRef = useRefMap(null); const elRef = useRefMap(null); const layerRef = useRefMap(null); const insetMapRef = useRefMap(null); const insetElRef = useRefMap(null); const insetLayerRef = useRefMap(null); // Summary counts for the stat strip below the map const summary = useMemoMap(() => { const districts = new Set(); let adequate = 0, slight = 0, shortage = 0, surplus = 0; for (const row of activeNow) { districts.add(row.origin_market); const a = (row.availability || "").toLowerCase(); if (a.includes("shortage") && a.includes("slight")) slight++; else if (a.includes("shortage")) shortage++; else if (a.includes("surplus")) surplus++; else adequate++; } return { districts: districts.size, commodities: activeNow.length, adequate, slight, shortage, surplus }; }, [activeNow]); useEffect(() => { if (!elRef.current || !window.L || mapRef.current) return; const map = window.L.map(elRef.current, { zoomControl: false, scrollWheelZoom: false, attributionControl: false, dragging: false, touchZoom: false, doubleClickZoom: false, boxZoom: false, keyboard: false, }).setView([38.5, -96], 4); window.L.tileLayer( "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png", { subdomains: "abcd", maxZoom: 12 } ).addTo(map); mapRef.current = map; setTimeout(() => map.invalidateSize(), 60); return () => { try { map.remove(); } catch {} mapRef.current = null; }; }, []); // Inset map — California detail (uses Pacific Ocean whitespace) useEffect(() => { if (!insetElRef.current || !window.L || insetMapRef.current) return; const map = window.L.map(insetElRef.current, { zoomControl: false, scrollWheelZoom: false, attributionControl: false, dragging: false, touchZoom: false, doubleClickZoom: false, boxZoom: false, keyboard: false, }).setView([35.2, -120.5], 6); window.L.tileLayer( "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png", { subdomains: "abcd", maxZoom: 14 } ).addTo(map); insetMapRef.current = map; setTimeout(() => map.invalidateSize(), 80); return () => { try { map.remove(); } catch {} insetMapRef.current = null; }; }, []); useEffect(() => { const map = mapRef.current; if (!map || !window.L) return; if (layerRef.current) { try { map.removeLayer(layerRef.current); } catch {} } const byDistrict = {}; for (const row of activeNow) { const k = row.origin_market; if (!byDistrict[k]) byDistrict[k] = { items: [], avail: row.availability }; byDistrict[k].items.push(row); } const markers = []; for (const [origin, data] of Object.entries(byDistrict)) { const coords = findCoords(origin); if (!coords) continue; const st = availStyle(data.avail); const n = data.items.length; const sz = Math.min(10 + n * 2, 30); const isShortage = data.avail && data.avail.toLowerCase().includes("shortage"); // Marker: solid fill + white border + shadow (same pattern as other site maps) const html = ``; const icon = window.L.divIcon({ className: "", html, iconSize: [sz + 6, sz + 6], iconAnchor: [(sz + 6) / 2, (sz + 6) / 2], }); const m = window.L.marker(coords, { icon }); m.bindPopup( `${shortDistrict(origin)}
` + `${st.label}
` + `${n} commodit${n === 1 ? "y" : "ies"} shipping` ); markers.push(m); } const layer = window.L.layerGroup(markers); layer.addTo(map); layerRef.current = layer; }, [activeNow]); // Sync inset markers whenever activeNow changes useEffect(() => { const map = insetMapRef.current; if (!map || !window.L) return; if (insetLayerRef.current) { try { map.removeLayer(insetLayerRef.current); } catch {} } const byDistrict = {}; for (const row of activeNow) { const k = row.origin_market; if (!byDistrict[k]) byDistrict[k] = { items: [], avail: row.availability }; byDistrict[k].items.push(row); } const insetMarkers = []; for (const [origin, data] of Object.entries(byDistrict)) { const coords = findCoords(origin); if (!coords) continue; const st = availStyle(data.avail); const n = data.items.length; const sz = Math.min(12 + n * 2, 28); const isShortage = data.avail && data.avail.toLowerCase().includes("shortage"); const html = ``; const icon = window.L.divIcon({ className: "", html, iconSize: [sz + 6, sz + 6], iconAnchor: [(sz + 6) / 2, (sz + 6) / 2] }); const m = window.L.marker(coords, { icon }); m.bindPopup( `${shortDistrict(origin)}
` + `${st.label}
` + `${n} commodit${n === 1 ? "y" : "ies"}` ); insetMarkers.push(m); } const insetLayer = window.L.layerGroup(insetMarkers); insetLayer.addTo(map); insetLayerRef.current = insetLayer; }, [activeNow]); if (!activeNow.length) return null; return (
Live shipping origins

Where produce is shipping from right now

{/* Map — same container style as other site maps */}
{/* California detail inset — top-right corner over Atlantic whitespace (was bottom-left, but it covered the CA/SW pins it was supposed to magnify) */}
{/* Inset label */}
California Detail
{/* Summary stat strip — like HubStatusMap */}
{[ { n: summary.districts, label: "Districts", color: "#16a34a", bg: "#f0fdf4" }, { n: summary.commodities, label: "Commodities", color: "#16a34a", bg: "#f0fdf4" }, { n: summary.adequate, label: "Adequate", color: "#15803d", bg: "#dcfce7" }, { n: summary.slight, label: "Slight shortage", color: "#ca8a04", bg: "#fef9c3" }, { n: summary.shortage, label: "Shortage", color: "#dc2626", bg: "#fee2e2" }, { n: summary.surplus, label: "Surplus trucks", color: "#1d4ed8", bg: "#dbeafe" }, ].map(({ n, label, color, bg }) => (
{n}
{label}
))}
{/* Legend row */}
{[ ["#22c55e", "Adequate"], ["#f59e0b", "Slight shortage"], ["#ef4444", "Shortage"], ["#3b82f6", "Surplus"], ].map(([color, label]) => (
{label}
))} Click a pin for details · Pin size = commodity count
); } function shortDistrict(market) { if (!market) return ""; const up = market.toUpperCase(); for (const [k, v] of DISTRICT_LABELS) { if (up.includes(k)) return v; } return market.split(",")[0].replace(/\s*(district|valley|crossings)\s*/gi, "").trim(); } function cap(s) { if (!s) return ""; return s.replace(/\b\w/g, c => c.toUpperCase()); } function fmtRate(low, high) { if (!low && !high) return null; const lo = low ? `$${Number(low).toLocaleString()}` : null; const hi = high ? `$${Number(high).toLocaleString()}` : null; if (lo && hi && lo !== hi) return `${lo} – ${hi}`; return lo || hi; } // Truck availability → color + short label function availStyle(avail) { const a = (avail || "").toLowerCase(); if (a.includes("shortage") && a.includes("slight")) return { bg: "#fff7e6", border: "#f59e0b", dot: "#f59e0b", label: "Slight Shortage" }; if (a.includes("shortage")) return { bg: "#fef2f2", border: "#ef4444", dot: "#ef4444", label: "Shortage" }; if (a.includes("surplus")) return { bg: "#eff6ff", border: "#3b82f6", dot: "#3b82f6", label: "Surplus" }; return { bg: "#f0fdf4", border: "#22c55e", dot: "#22c55e", label: "Adequate" }; } // ── District Cards ────────────────────────────────────────── function DistrictCards({ activeNow }) { // Group by origin district const districts = useMemo(() => { const map = {}; for (const row of activeNow) { const key = row.origin_market; if (!map[key]) map[key] = { origin: key, items: [] }; map[key].items.push(row); } return Object.values(map).sort((a, b) => b.items.length - a.items.length); }, [activeNow]); if (!districts.length) return null; return (
Active shipping districts

What's moving this week

{districts.map((d, di) => { // Dominant availability across commodities in this district const avails = d.items.map(i => i.availability).filter(Boolean); const dominant = avails.sort((a, b) => avails.filter(x => x === b).length - avails.filter(x => x === a).length )[0]; const st = availStyle(dominant); const rates = d.items.filter(i => i.avg_rate > 0); const lo = rates.length ? Math.min(...rates.map(i => i.avg_rate)) : null; const hi = rates.length ? Math.max(...rates.map(i => i.avg_rate)) : null; const topCommodities = d.items .sort((a, b) => b.avg_rate - a.avg_rate) .slice(0, 6) .map(i => cap(i.commodity)); return (
{/* District name */}
{shortDistrict(d.origin)}
{/* Availability badge */}
{st.label}
{/* Rate range */} {lo && hi && (
Rate range / load
${Number(lo).toLocaleString()} ${Number(hi).toLocaleString()}
)} {/* Commodities */}
{topCommodities.map(c => ( {c} ))} {d.items.length > 6 && ( +{d.items.length - 6} more )}
); })}
); } // ── Rate gate overlay ──────────────────────────────────────── function RateGate({ onNav }) { return (
📦
Lane rates are free — just sign in
Magic link email, no password. One click and you're in — same account works across all pages.
Already have an account? Same button.
); } // ── Blurred teaser rows (shown when not signed in) ─────────── function TeaserRows() { const widths = [ [55, 35, 70], [40, 55, 55], [65, 30, 80], [45, 60, 45], ]; return (
{widths.map(([c1, c2, bar], i) => (
))}
); } // ── Rate Explorer ──────────────────────────────────────────── function RateExplorer({ lanes, onNav }) { const [selOrigin, setSelOrigin] = useState("all"); const [selDest, setSelDest] = useState("all"); const signedIn = !!(window.SI_DB && window.SI_DB.auth && window.SI_DB.auth.readSession()); const origins = useMemo(() => { const s = new Set(lanes.map(l => l.origin_market)); return Array.from(s).sort(); }, [lanes]); const dests = useMemo(() => { const src = selOrigin === "all" ? lanes : lanes.filter(l => l.origin_market === selOrigin); const s = new Set(src.map(l => l.destination)); return Array.from(s).sort(); }, [lanes, selOrigin]); const filtered = useMemo(() => { return lanes .filter(l => selOrigin === "all" || l.origin_market === selOrigin) .filter(l => selDest === "all" || l.destination === selDest) .sort((a, b) => b.avg_rate - a.avg_rate) .slice(0, 60); }, [lanes, selOrigin, selDest]); const maxRate = useMemo(() => Math.max(...filtered.map(l => l.rate_high || l.avg_rate || 0)), [filtered]); if (!lanes.length) return null; return (
Lane rates

Rate Explorer

USDA reported rates, current 14-day window. Filter by origin or destination.

{/* Filters */}
{/* Rate cards — gated when not signed in */}
{signedIn ? ( <>
{filtered.map((lane, i) => { const st = availStyle(lane.availability); const barPct = maxRate > 0 ? ((lane.rate_high || lane.avg_rate) / maxRate) * 100 : 0; const loBarPct = maxRate > 0 ? ((lane.rate_low || lane.avg_rate) / maxRate) * 100 : 0; return (
{cap(lane.commodity)}
{shortDistrict(lane.origin_market)} → {lane.destination}
{fmtRate(lane.rate_low, lane.rate_high)}
{st.label}
); })}
{filtered.length === 0 && (
No lanes match this filter.
)} ) : ( <> )}
USDA AMS Market News · SC National Truck Rate Report · Updated weekly
); } // ── Lane Flow Map ───────────────────────────────────────────── const DEST_COORDS = { "Atlanta": [33.75, -84.39], "Baltimore": [39.29, -76.61], "Boston": [42.36, -71.06], "Chicago": [41.85, -87.65], "Dallas": [32.78, -96.80], "Los Angeles": [34.05, -118.24], "Miami": [25.77, -80.19], "New York": [40.71, -74.01], "Philadelphia": [39.95, -75.17], "Seattle": [47.61, -122.33], }; // All origin markets that appear in usda_reefer_lanes (exact DB strings) const LANE_ORIGIN_COORDS = [ ["SALINAS-WATSONVILLE", [36.70, -121.60]], ["SANTA MARIA", [34.95, -120.44]], ["SAN LUIS VALLEY", [37.70, -105.50]], ["SOUTH AND CENTRAL DISTRICT CALIFORNIA", [36.50, -120.50]], ["KERN DISTRICT", [35.40, -119.00]], ["OXNARD DISTRICT", [34.20, -119.20]], ["CENTRAL AND SOUTH FLORIDA", [25.80, -80.30]], ["IMPERIAL, COACHELLA", [33.10, -115.50]], ["MEXICO CROSSINGS THROUGH NOGALES", [31.30, -110.90]], ["MEXICO CROSSINGS THROUGH SOUTH TEXAS", [26.20, -98.30]], ["YAKIMA VALLEY AND WENATCHEE", [46.60, -120.50]], ["VIDALIA DISTRICT", [32.20, -82.40]], ["NEW YORK", [40.70, -73.90]], ]; function findLaneOriginCoords(market) { const up = (market || "").toUpperCase(); for (const [k, v] of LANE_ORIGIN_COORDS) { if (up.includes(k)) return v; } return null; } // ── Meat hauler lanes (DAT reefer data, May 2026) ──────────── const MEAT_ORIGIN_COORDS = { "GARDEN CITY, KS": [37.97, -100.87], "DODGE CITY, KS": [37.75, -100.02], "OMAHA, NE": [41.26, -95.94], "LEXINGTON, NE": [40.78, -99.74], "SIOUX FALLS, SD": [43.55, -96.73], }; const MEAT_LANES = [ { origin:"GARDEN CITY, KS", dest:"Los Angeles", miles:1238, avg_rate:2410, rate_low:1687, rate_high:2976, rpm:1.95 }, { origin:"GARDEN CITY, KS", dest:"Seattle", miles:1618, avg_rate:3356, rate_low:2349, rate_high:3859, rpm:2.07 }, { origin:"GARDEN CITY, KS", dest:"Chicago", miles: 900, avg_rate:2090, rate_low:1635, rate_high:2635, rpm:2.32 }, { origin:"DODGE CITY, KS", dest:"Chicago", miles: 843, avg_rate:2059, rate_low:1619, rate_high:2536, rpm:2.44 }, { origin:"DODGE CITY, KS", dest:"Dallas", miles: 461, avg_rate:1541, rate_low:1327, rate_high:1580, rpm:3.34 }, { origin:"OMAHA, NE", dest:"Boston", miles:1452, avg_rate:3285, rate_low:2300, rate_high:3828, rpm:2.26 }, { origin:"OMAHA, NE", dest:"New York", miles:1262, avg_rate:2988, rate_low:2092, rate_high:3648, rpm:2.37 }, { origin:"OMAHA, NE", dest:"Chicago", miles: 472, avg_rate:1741, rate_low:1337, rate_high:1864, rpm:3.69 }, { origin:"LEXINGTON, NE", dest:"Chicago", miles: 689, avg_rate:1822, rate_low:1553, rate_high:2369, rpm:2.65 }, { origin:"LEXINGTON, NE", dest:"Los Angeles", miles:1335, avg_rate:2698, rate_low:1888, rate_high:3413, rpm:2.02 }, { origin:"LEXINGTON, NE", dest:"Dallas", miles: 712, avg_rate:1882, rate_low:1612, rate_high:2447, rpm:2.64 }, { origin:"SIOUX FALLS, SD", dest:"Dallas", miles: 840, avg_rate:2324, rate_low:1830, rate_high:2778, rpm:2.77 }, { origin:"SIOUX FALLS, SD", dest:"Los Angeles", miles:1726, avg_rate:3034, rate_low:2308, rate_high:3771, rpm:1.76 }, { origin:"SIOUX FALLS, SD", dest:"New York", miles:1385, avg_rate:3894, rate_low:2726, rate_high:4478, rpm:2.81 }, { origin:"SIOUX FALLS, SD", dest:"Chicago", miles: 573, avg_rate:1734, rate_low:1580, rate_high:1953, rpm:3.03 }, ].map(l => ({ ...l, oCoords: MEAT_ORIGIN_COORDS[l.origin], dCoords: DEST_COORDS[l.dest], netPerMile: +(l.rpm - 2.10).toFixed(2), })).filter(l => l.oCoords && l.dCoords); function meatRpmColor(rpm) { if (!rpm) return "#9ca3af"; if (rpm >= 3.00) return "#15803d"; if (rpm >= 2.50) return "#22c55e"; if (rpm >= 2.10) return "#f59e0b"; return "#dc2626"; } // Industry owner-op reefer breakeven (ATBS / OOIDA data) const NATIONAL_CPM = 2.10; function haversineMiles(c1, c2) { const R = 3959; const lat1 = c1[0] * Math.PI / 180, lat2 = c2[0] * Math.PI / 180; const dlat = lat2 - lat1, dlon = (c2[1] - c1[1]) * Math.PI / 180; const a = Math.sin(dlat/2)**2 + Math.cos(lat1)*Math.cos(lat2)*Math.sin(dlon/2)**2; return R * 2 * Math.asin(Math.sqrt(a)); } function laneRateColor(rate) { if (!rate) return "#9ca3af"; if (rate >= 9500) return "#dc2626"; if (rate >= 8500) return "#f97316"; if (rate >= 7500) return "#f59e0b"; if (rate >= 6000) return "#22c55e"; return "#3b82f6"; } function LaneFlowMap({ lanes }) { const { useRef: useRefLF, useState: useStateLF, useMemo: useMemoLF } = React; const mapRef = useRefLF(null); const elRef = useRefLF(null); const layerRef = useRefLF(null); const [mode, setMode] = useStateLF("outbound"); const [commodity, setCommodity] = useStateLF("produce"); // Aggregate: one entry per unique origin×destination (best rate + commodity list) const grouped = useMemoLF(() => { const map = {}; for (const lane of lanes) { const dCoords = DEST_COORDS[lane.destination]; const oCoords = findLaneOriginCoords(lane.origin_market); if (!dCoords || !oCoords) continue; const key = `${lane.origin_market}||${lane.destination}`; if (!map[key]) { map[key] = { origin: lane.origin_market, dest: lane.destination, oCoords, dCoords, avg_rate: lane.avg_rate || 0, rate_low: lane.rate_low, rate_high: lane.rate_high, commodities: [], }; } if (lane.commodity) map[key].commodities.push(cap(lane.commodity)); if ((lane.avg_rate || 0) > map[key].avg_rate) { map[key].avg_rate = lane.avg_rate; map[key].rate_low = lane.rate_low; map[key].rate_high = lane.rate_high; } } // Enrich with mileage + profitability return Object.values(map).map(lane => { const miles = Math.round(haversineMiles(lane.oCoords, lane.dCoords)); const revPerMile = miles > 0 && lane.avg_rate > 0 ? lane.avg_rate / miles : null; const netPerMile = revPerMile !== null ? revPerMile - NATIONAL_CPM : null; return { ...lane, miles, revPerMile, netPerMile }; }); }, [lanes]); // Top 5 produce lanes by rate const topLanes = useMemoLF(() => [...grouped].sort((a, b) => b.avg_rate - a.avg_rate).slice(0, 5), [grouped]); // Top 5 meat lanes by RPM const meatTop5 = useMemoLF(() => [...MEAT_LANES].filter(l => l.oCoords && l.dCoords).sort((a, b) => b.rpm - a.rpm).slice(0, 5), []); useEffect(() => { if (!elRef.current || !window.L || mapRef.current) return; const map = window.L.map(elRef.current, { zoomControl: true, scrollWheelZoom: false, attributionControl: false, dragging: true, touchZoom: false, doubleClickZoom: false, boxZoom: false, keyboard: false, }).setView([38.5, -96], 4); window.L.tileLayer( "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png", { subdomains: "abcd", maxZoom: 12 } ).addTo(map); mapRef.current = map; setTimeout(() => map.invalidateSize(), 60); return () => { try { map.remove(); } catch {} mapRef.current = null; }; }, []); useEffect(() => { const map = mapRef.current; if (!map || !window.L) return; if (commodity === "produce" && !grouped.length) return; if (layerRef.current) { try { map.removeLayer(layerRef.current); } catch {} } const lg = window.L.layerGroup(); if (commodity === "meat") { const seenDest = new Set(); for (const lane of MEAT_LANES) { if (!lane.oCoords || !lane.dCoords) continue; const color = meatRpmColor(lane.rpm); const badge = lane.netPerMile >= 0 ? `✓ +$${lane.netPerMile.toFixed(2)}/mi above breakeven` : `⚠ $${Math.abs(lane.netPerMile).toFixed(2)}/mi below breakeven`; const pl = window.L.polyline([lane.oCoords, lane.dCoords], { color, weight: 2.5, opacity: 0.78 }); pl.on("add", function () { const el = this.getElement(); if (!el) return; el.style.strokeDasharray = "12 6"; el.style.animation = "flowOut 0.9s linear infinite"; }); pl.bindPopup( `
` + `🥩 ${lane.origin} → ${lane.dest}
` + `$${lane.avg_rate.toLocaleString()}` + `($${lane.rate_low.toLocaleString()}–$${lane.rate_high.toLocaleString()})
` + `
~${lane.miles.toLocaleString()} mi · $${lane.rpm.toFixed(2)}/mi RPM · Breakeven: $${NATIONAL_CPM.toFixed(2)}/mi
` + badge + `
` ); pl.addTo(lg); // Origin marker (packing plant dot) const oHtml = ``; window.L.marker(lane.oCoords, { icon: window.L.divIcon({ className: "", html: oHtml, iconSize: [13,13], iconAnchor: [6,6] }) }).bindTooltip(lane.origin, { permanent: false, direction: "top" }).addTo(lg); if (!seenDest.has(lane.dest)) { seenDest.add(lane.dest); window.L.circleMarker(lane.dCoords, { radius: 7, color: "#fff", fillColor: "#1e293b", fillOpacity: 0.85, weight: 2, }).bindTooltip(lane.dest, { permanent: false, direction: "top" }).addTo(lg); } } } else if (mode === "outbound") { const seenDest = new Set(); const seenOrigin = new Set(); for (const lane of grouped) { const { oCoords, dCoords, avg_rate, rate_low, rate_high, commodities, origin, dest } = lane; const color = laneRateColor(avg_rate); const weight = 1.2 + Math.min(commodities.length / 5, 2.8); const pl = window.L.polyline([oCoords, dCoords], { color, weight, opacity: 0.72 }); pl.on("add", function () { const el = this.getElement(); if (!el) return; el.style.strokeDasharray = "12 6"; el.style.animation = "flowOut 0.9s linear infinite"; }); const profBadge = lane.netPerMile !== null ? (lane.netPerMile >= 0 ? `✓ +$${lane.netPerMile.toFixed(2)}/mi above cost` : `⚠ $${lane.netPerMile.toFixed(2)}/mi — tight`) : ""; const milesLine = lane.miles ? `
~${lane.miles.toLocaleString()} mi · ` + `Rev/mi: $${(lane.revPerMile||0).toFixed(2)} · Avg reefer cost: $${NATIONAL_CPM.toFixed(2)}
` : ""; pl.bindPopup( `
` + `${shortDistrict(origin)} → ${dest}
` + `` + `$${Number(rate_low||0).toLocaleString()} – $${Number(rate_high||0).toLocaleString()}
` + milesLine + profBadge + `
${commodities.slice(0,6).join(", ")}` + `${commodities.length > 6 ? ` +${commodities.length-6} more` : ""}
` ); pl.addTo(lg); if (!seenDest.has(dest)) { seenDest.add(dest); window.L.circleMarker(dCoords, { radius: 7, color: "#fff", fillColor: "#1e293b", fillOpacity: 0.85, weight: 2, }).bindTooltip(dest, { permanent: false, direction: "top" }).addTo(lg); } if (!seenOrigin.has(origin)) { seenOrigin.add(origin); const sz = 10; const html = ``; window.L.marker(oCoords, { icon: window.L.divIcon({ className: "", html, iconSize: [14,14], iconAnchor: [7,7] }) }).bindTooltip(shortDistrict(origin), { permanent: false, direction: "top" }).addTo(lg); } } } else { // Return mode — one line per destination city back to CA hub (not per-lane) const CA_HUB = [35.8, -119.5]; // Central CA produce hub const byDest = {}; for (const lane of grouped) { if (!lane.dCoords) continue; if (!byDest[lane.dest]) byDest[lane.dest] = { dest: lane.dest, dCoords: lane.dCoords, rates: [] }; if (lane.avg_rate > 0) byDest[lane.dest].rates.push(lane.avg_rate); } for (const data of Object.values(byDest)) { const avgOut = data.rates.length ? Math.round(data.rates.reduce((s, v) => s + v, 0) / data.rates.length) : 0; const backhaulLo = Math.round(avgOut * 0.35 / 100) * 100; const backhaulHi = Math.round(avgOut * 0.50 / 100) * 100; const miles = Math.round(haversineMiles(data.dCoords, CA_HUB)); const pl = window.L.polyline([data.dCoords, CA_HUB], { color: "#6366f1", weight: 2.5, opacity: 0.6, }); pl.on("add", function () { const el = this.getElement(); if (!el) return; el.style.strokeDasharray = "4 10"; el.style.animation = "flowIn 1.4s linear infinite"; }); pl.bindPopup( `
` + `${data.dest} → California
` + `
~${miles.toLocaleString()} mi empty return
` + `
Est. backhaul $${backhaulLo.toLocaleString()}–$${backhaulHi.toLocaleString()}
` + `
35–50% of avg outbound ($${avgOut.toLocaleString()})
` + `
` ); pl.addTo(lg); window.L.circleMarker(data.dCoords, { radius: 7, color: "#fff", fillColor: "#6366f1", fillOpacity: 0.8, weight: 2, }).bindTooltip(data.dest, { permanent: false, direction: "top" }).addTo(lg); } // Single CA hub marker const hubHtml = ``; window.L.marker(CA_HUB, { icon: window.L.divIcon({ className: "", html: hubHtml, iconSize: [18,18], iconAnchor: [9,9] }) }).bindTooltip("California Produce Hub", { permanent: false, direction: "top" }).addTo(lg); } lg.addTo(map); layerRef.current = lg; }, [grouped, mode, commodity]); if (commodity === "produce" && !grouped.length) return null; return (
Truck corridors

{commodity === "meat" ? "Meat & protein hauler corridors — what the lanes pay" : "How produce gets to market — and what it pays"}

{commodity === "meat" ? "15 active reefer lanes from Midwest packing plants. DAT May 2026. Click any line for rate + RPM profitability." : "Live outbound reefer lanes from each shipping district. Click any line for rate + commodity detail."}

{/* Commodity toggle */}
{[ { id: "produce", label: "🥬 Produce", color: "#16a34a" }, { id: "meat", label: "🥩 Meat & Protein", color: "#b45309" }, ].map(({ id, label, color }) => ( ))}
{/* Mode toggle — produce only */} {commodity === "produce" && (
{[ { id: "outbound", label: "▶ Outbound — produce heading east", color: "#16a34a" }, { id: "return", label: "◀ Backhaul — empty trucks back to CA", color: "#6366f1" }, ].map(({ id, label, color }) => ( ))}
)} {/* Backhaul info banner — produce only */} {commodity === "produce" && mode === "return" && (
🔄
Where the empty trucks go. After dropping a produce load in a city, reefer trucks need to get back to California to pick up the next load. Each line shows one of those return corridors. Click any line to see the estimated backhaul rate.
)} {/* Map */}
{/* Legend + profitability benchmark */} {(commodity === "produce" ? mode === "outbound" : true) && (
Line color = {commodity === "meat" ? "rate per mile (RPM)" : "rate per truckload"}
{commodity === "meat" ? ( <> {[ ["#15803d", "≥ $3.00/mi (strong profit)"], ["#22c55e", "$2.50–$3.00 (healthy)"], ["#f59e0b", "$2.10–$2.50 (tight)"], ["#dc2626", "< $2.10 (below breakeven)"], ].map(([color, label]) => (
{label}
))} DAT May 2026 · Click lane for detail ) : ( <> {[ ["#dc2626", "$9,500+ (premium)"], ["#f97316", "$8,500–$9,500"], ["#f59e0b", "$7,500–$8,500"], ["#22c55e", "$6,000–$7,500"], ["#3b82f6", "< $6,000 (short hop / soft)"], ].map(([color, label]) => (
{label}
))} Line weight = commodity count · Click lane for detail )}
{/* National avg cost reference bar */}
📊 Profitability benchmark
National avg reefer cost: $2.10/mi (ATBS/OOIDA owner-op)
✓ above breakeven ⚠ tight / below
)} {/* Top lanes strip */} {commodity === "meat" ? ( meatTop5.length > 0 && (
Top meat hauler lanes by RPM
{meatTop5.map((lane, i) => { const color = meatRpmColor(lane.rpm); const profitable = lane.netPerMile >= 0; return (
🥩 {lane.origin.split(",")[0]} → {lane.dest} ~{lane.miles.toLocaleString()} mi
${lane.avg_rate.toLocaleString()} ${lane.rpm.toFixed(2)}/mi RPM
{profitable ? `✓ +$${lane.netPerMile.toFixed(2)}/mi profit` : `⚠ $${Math.abs(lane.netPerMile).toFixed(2)}/mi below breakeven`}
); })}
) ) : ( mode === "outbound" && topLanes.length > 0 && (
Top paying lanes right now
{topLanes.map((lane, i) => { const color = laneRateColor(lane.avg_rate); const profitable = lane.netPerMile !== null && lane.netPerMile >= 0; return (
{shortDistrict(lane.origin)} → {lane.dest} {lane.miles ? ~{lane.miles.toLocaleString()} mi : null}
${Number(lane.avg_rate).toLocaleString()}
{lane.netPerMile !== null && (
{profitable ? `✓ +$${lane.netPerMile.toFixed(2)}/mi profit` : `⚠ $${lane.netPerMile.toFixed(2)}/mi margin`}
)}
{lane.commodities.slice(0,3).join(", ")} {lane.commodities.length > 3 ? ` +${lane.commodities.length-3}` : ""}
); })}
) )}
); } // ── Calendar cell ───────────────────────────────────────────── const NOW_MONTH = new Date().getMonth() + 1; // 1-12 function CellBlock({ cell, monthIdx }) { const isNow = (monthIdx + 1) === NOW_MONTH; const colBg = isNow ? "rgba(251,191,36,0.08)" : "transparent"; if (!cell) { return (
); } const wc = cell.week_count || 0; const rate = cell.avg_rate; let bg, shadow, textColor; if (wc >= 4) { bg = "#14532d"; shadow = "0 0 10px rgba(20,83,45,0.55)"; textColor = "rgba(255,255,255,0.92)"; } else if (wc >= 3) { bg = "#16a34a"; shadow = "0 0 8px rgba(22,163,74,0.45)"; textColor = "rgba(255,255,255,0.88)"; } else if (wc >= 2) { bg = "#4ade80"; shadow = "none"; textColor = "#14532d"; } else { bg = "#bbf7d0"; shadow = "none"; textColor = "#166534"; } const rateLabel = wc >= 3 && rate ? `$${Math.round(rate / 1000)}k` : null; const tip = `${MONTHS[monthIdx]}: ${wc} week${wc === 1 ? "" : "s"} active${rate ? ` · ~$${Number(rate).toLocaleString()}/load avg` : ""}`; return (
{rateLabel}
); } // ── Main page ───────────────────────────────────────────────── window.ReeferPage = function ReeferPage({ onNav }) { const [activeNow, setActiveNow] = useState([]); const [calData, setCalData] = useState([]); const [laneData, setLaneData] = useState([]); const [loading, setLoading] = useState(true); const [calOrigin, setCalOrigin] = useState("all"); const [calSearch, setCalSearch] = useState(""); useEffect(() => { Promise.all([ fetch(`${SB_URL}/rest/v1/produce_currently_shipping?select=*&order=last_seen.desc,commodity`, { headers: SB_H }) .then(r => r.ok ? r.json() : []), fetch(`${SB_URL}/rest/v1/produce_calendar_seasons?select=*&order=commodity,origin_market,month_num`, { headers: SB_H }) .then(r => r.ok ? r.json() : []), fetch(`${SB_URL}/rest/v1/usda_reefer_lanes?select=*&order=avg_rate.desc`, { headers: SB_H }) .then(r => r.ok ? r.json() : []), ]).then(([active, cal, lanes]) => { setActiveNow(Array.isArray(active) ? active : []); setCalData(Array.isArray(cal) ? cal : []); setLaneData(Array.isArray(lanes) ? lanes : []); setLoading(false); }).catch(() => setLoading(false)); }, []); const calOrigins = useMemo(() => { const s = new Set(calData.map(d => d.origin_market).filter(Boolean)); return ["all", ...Array.from(s).sort()]; }, [calData]); const calRows = useMemo(() => { let src = calOrigin === "all" ? calData : calData.filter(d => d.origin_market === calOrigin); if (calSearch.trim()) { const q = calSearch.trim().toLowerCase(); src = src.filter(d => (d.commodity || "").toLowerCase().includes(q)); } const map = {}; for (const row of src) { const key = `${row.commodity}||${row.origin_market}`; if (!map[key]) map[key] = { commodity: row.commodity, origin: row.origin_market, months: Array(12).fill(null) }; const idx = (Number(row.month_num) || 1) - 1; if (idx >= 0 && idx < 12) map[key].months[idx] = row; } return Object.values(map).sort((a, b) => a.commodity.localeCompare(b.commodity)); }, [calData, calOrigin, calSearch]); if (loading) { return (
Loading reefer intel…
); } return (
{/* Header */}
Cold Chain

Reefer Intel

Which produce is shipping, from where, at what rate, and whether trucks are tight — built from USDA AMS federal market reports, updated weekly.

{/* Origins Map */} {/* District Cards */} {/* Rate Explorer */} {/* Lane Flow Map — how produce gets to market + profitability */} {/* Produce Calendar */}
Seasonal calendar

Produce Shipping Calendar

When each commodity ships by district. Hover any cell for week count and rate. ★ Current month highlighted

{/* Search + district filter row */}
setCalSearch(e.target.value)} style={{ fontFamily: "inherit", fontSize: 13, padding: "6px 10px 6px 30px", border: "1px solid #d0d0d0", borderRadius: 6, background: "#fff", color: "inherit", width: 180, outline: "none", }} /> ⌕
{calOrigins.length > 2 && calOrigins.map(o => ( ))}
{calRows.length === 0 ? (
{calSearch ? `No results for "${calSearch}"` : "Calendar data loads as weekly USDA reports are ingested."}
) : ( <>
{MONTHS.map((m, mi) => { const isNow = (mi + 1) === NOW_MONTH; return ( ); })} {calRows.map((row, ri) => { const activeMos = row.months.filter(Boolean).length; const rates = row.months.filter(c => c && c.avg_rate > 0).map(c => c.avg_rate); const avgRateAll = rates.length ? Math.round(rates.reduce((s, v) => s + v, 0) / rates.length) : null; return ( {row.months.map((cell, mi) => ( ))} ); })}
Commodity · District {calRows.length} shown
{m}
{isNow && (
NOW
)} 		Season
{cap(row.commodity)} · {shortDistrict(row.origin)} = 9 ? "#15803d" : activeMos >= 6 ? "#16a34a" : activeMos >= 3 ? "#ca8a04" : "#6b7280", background: activeMos >= 9 ? "#dcfce7" : activeMos >= 6 ? "#f0fdf4" : activeMos >= 3 ? "#fef9c3" : "#f3f4f6", borderRadius: 20, padding: "2px 8px", }}> {activeMos} mo {avgRateAll && ( ~${Math.round(avgRateAll / 1000)}k avg )}
{/* Legend */}
{[ { bg: "#14532d", label: "Peak · 4+ weeks", glow: true }, { bg: "#16a34a", label: "Strong · 3 weeks", glow: false }, { bg: "#4ade80", label: "Active · 2 weeks", glow: false }, { bg: "#bbf7d0", label: "Light · 1 week", glow: false }, { bg: "#efefef", label: "Off season", glow: false }, ].map(({ bg, label, glow }) => (
{label}
))} USDA AMS Market News · Updated weekly
)}
{/* Fuel-impact article callout */}
⛽ New · Markets desk
Diesel is eating the reefer rate
Why several West-Coast and short-haul protein lanes plot below the $2.10/mi breakeven right now — and what shippers should expect when the surcharge program lags the pump.
{/* Tools callout */}
Know the rate — now run the numbers
Fuel surcharge, load pay calculator, owner-op CPM — all free.
); }; })();