// City Report Card Page
const { useState: useStateR, useEffect: useEffectR, useMemo: useMemoR } = React;
// Per-metro qualitative read used as the editorial topline. These are
// directional reads of the local freight market, not scores. The verdict
// shows above the live signal data so the page leads with a human take and
// then backs it with the data that drove it.
const METRO_VERDICTS = {
"new-york": "Ports + LTL congestion drives most of the signal here. Network-wide carriers struggle with five-borough density; regional LTLs win on consistency.",
"chicago": "Continental crossroads — what breaks here ripples nationwide. Cross-dock delays and rail-side detention dominate the operator log.",
"dallas": "Largest non-coastal LTL hub. Heat-related detention spikes May–Sep; weather-driven lane disruption is the dominant signal.",
"atlanta": "UPS hometown — small-package supremacy is institutional. The story to watch is regional LTL share-shift away from incumbents.",
"phoenix": "Last-mile-heavy, parcel-skewed. OnTrac and regional couriers visible in the data; thin LTL coverage relative to volume.",
"seattle": "Port + Amazon shadow. Longshore actions and weather-route closures (I-90, Snoqualmie) drive most of the high-severity signal.",
"miami": "Hurricane-season variance dominates. Port of Miami detention + cold-storage handoffs are the recurring pain points.",
"denver": "Mountain-corridor exposure. I-70 closures and Front Range capacity tightness are the persistent operator signals.",
"boston": "Density-constrained metro; light signal volume so far. Provisional read: regional LTLs outperform nationals on consistency.",
"houston": "Petrochem-corridor + port. Hazmat-tied detention and Galveston port congestion are the recurring intel patterns.",
"philly": "I-95 + port-of-Philadelphia signal mix. LTL-dominant; small-package carriers cluster around Lehigh Valley.",
"memphis": "FedEx World Hub gravity. Air-cargo handoffs dominate; the operator signal is heavily night-shift weighted.",
"louisville": "UPS Worldport gravity. Same shape as Memphis: air-hub handoffs drive the cycle, with regional LTL on the periphery.",
"indianapolis": "Crossroads of America — every continental lane crosses here. FedEx Ground, FedEx Express, and rail intermodal all visible.",
"cincinnati": "DHL Americas hub presence. Light signal volume so far; air-cargo-tied with secondary LTL coverage.",
"anchorage": "Air-cargo waypoint between Asia and the lower-48. Operator network is thin but every signal here is supply-chain-grade.",
};
// MetroProvisional — provisional metro report card backed by live signal
// data. Replaces the old "Q3 2026 sign-up" stub. Pulls the last 30d of
// verified+public intel for the city, computes severity mix + top types +
// top carriers/facilities, and frames it with an honest "full scorecard
// pending field validation" disclaimer. Each metro reads from the same DB
// — no per-city hard-coded fakery.
function MetroProvisional({ cityId, onNav }) {
const cities = (window.SI_DATA && window.SI_DATA.FEATURED_CITIES) || [];
const allCities = (window.SI_DATA && window.SI_DATA.ALL_CITIES) || cities;
const meta = allCities.find(c => c.id === cityId)
|| { name: cityId, state: "" };
const [rows, setRows] = useStateR([]);
const [lanes, setLanes] = useStateR([]);
const [topShippers, setTopShippers] = useStateR([]);
const [loading, setLoading] = useStateR(true);
useEffectR(() => {
let alive = true;
async function load() {
if (!window.SI_DB || !window.SI_DB.raw) { setLoading(false); return; }
try {
// Pull intel + lanes + nearby shippers in parallel so the page
// shows a fuller picture of the metro, not just signals.
const cityName = meta.name || "";
const cityState = meta.state || "";
const cityNameEnc = encodeURIComponent(cityName);
const stateEnc = encodeURIComponent(cityState);
const [intel, laneA, laneB, shippers] = await Promise.all([
window.SI_DB.raw.select(
"intel_submissions",
`select=id,parsed_carrier,parsed_intel_type,severity,raw_text,created_at,source_url,notes`
+ `&city_id=eq.${encodeURIComponent(cityId)}`
+ `&status=eq.verified&visibility=eq.public`
+ `&order=created_at.desc&limit=200`
).catch(() => []),
window.SI_DB.raw.select(
"dat_lane_rates",
`select=*&origin_city=eq.${cityNameEnc}&order=lane_rate_per_mi.desc&limit=20`
).catch(() => []),
window.SI_DB.raw.select(
"dat_lane_rates",
`select=*&dest_city=eq.${cityNameEnc}&order=lane_rate_per_mi.desc&limit=20`
).catch(() => []),
cityState
? window.SI_DB.raw.select(
"shippers",
`select=id,canonical_name,slug,size_band,description,hq_state&hq_state=eq.${stateEnc}&order=size_band.asc&limit=10`
).catch(() => [])
: Promise.resolve([]),
]);
if (!alive) return;
setRows(Array.isArray(intel) ? intel : []);
// Combine outbound + inbound lanes; tag direction so we render both.
const lanesOut = (Array.isArray(laneA) ? laneA : []).map(l => ({ ...l, _dir: "out" }));
const lanesIn = (Array.isArray(laneB) ? laneB : []).map(l => ({ ...l, _dir: "in" }));
setLanes([...lanesOut, ...lanesIn].slice(0, 8));
setTopShippers(Array.isArray(shippers) ? shippers : []);
} catch (e) {
console.warn("[metro-provisional] load failed", e);
} finally {
if (alive) setLoading(false);
}
}
load();
return () => { alive = false; };
}, [cityId]);
const now = Date.now();
const day = 24 * 3600 * 1000;
const within30d = rows.filter(r => now - new Date(r.created_at).getTime() < 30 * day);
const sev = (r) => r.severity || "low";
const highCount = within30d.filter(r => sev(r) === "high" || sev(r) === "critical").length;
const byType = {};
const byCarrier = {};
within30d.forEach(r => {
const t = r.parsed_intel_type || "other";
byType[t] = (byType[t] || 0) + 1;
if (r.parsed_carrier) byCarrier[r.parsed_carrier] = (byCarrier[r.parsed_carrier] || 0) + 1;
});
const topTypes = Object.entries(byType).sort((a,b)=>b[1]-a[1]).slice(0, 4);
const topCarriers = Object.entries(byCarrier).sort((a,b)=>b[1]-a[1]).slice(0, 5);
const recentTop = within30d.slice(0, 8);
function fmtDate(s) {
const d = new Date(s);
const days = Math.round((now - d.getTime()) / day);
if (days === 0) return "today";
if (days === 1) return "yesterday";
if (days < 7) return `${days}d ago`;
return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
}
function prettyType(t) {
return t.replace(/_/g, " ");
}
function prettyCarrier(slug) {
return slug.split("-").map(w => w[0].toUpperCase() + w.slice(1)).join(" ");
}
const verdict = METRO_VERDICTS[cityId];
return (
)}
{/* Lane heat in/out of this metro — pulls live from dat_lane_rates.
Shows both directions so the asymmetry is visible at a glance. */}
{lanes.length > 0 && (
)}
{/* Top shippers in this metro — surfaces the directory inline so the
metro page reads as a real intelligence dossier, not a stub. */}
{topShippers.length > 0 && (
Where the major carriers run their networks in {meta.name}.
)}
{/* Cross-links — get visitors out of this metro page and into the
rest of the graph: the rates engine for lanes touching this metro,
the shipper directory for who ships from/to here, verification
for any carrier they're considering. */}
7 AM local. Every signal worth knowing about, the night before it hits your dock.
);
}
function ReportPage({ onNav, onCarrier, cityId = "los-angeles" }) {
// Defensive guard: if data.jsx hasn't loaded yet (Babel scripts compile
// out-of-order), show a brief loading state instead of crashing on the
// destructure. This is what made /#/report appear to lock up on cold load.
if (!window.SI_DATA || !window.SI_DATA.LA_REPORT) {
return (
Loading report…
);
}
// LA is the only metro with a full carrier-level scorecard seeded today.
// For every other metro we show a *provisional* verdict driven by live
// operator-network signal — recent intel volume, severity mix, top
// patterns — instead of faking a scorecard. Honest framing: "we'll
// publish a full carrier scorecard once we have enough field data."
if (cityId && cityId !== "los-angeles") {
return ;
}
const { LA_REPORT, SHIPPING_CATEGORIES, METRICS, scoreToLetter } = window.SI_DATA;
const [activeCat, setActiveCat] = useStateR("small");
const [expanded, setExpanded] = useStateR(null);
const [sortKey, setSortKey] = useStateR("score");
const [sortDir, setSortDir] = useStateR("desc");
const [compareMode, setCompareMode] = useStateR(false);
const [compareIds, setCompareIds] = useStateR([]);
const r = LA_REPORT;
const carriers = r.carriers[activeCat] || [];
const sortedCarriers = useMemoR(() => {
const arr = [...carriers];
arr.sort((a, b) => {
let av, bv;
if (sortKey === "score") { av = a.score; bv = b.score; }
else if (sortKey === "name") { av = a.name; bv = b.name; }
else if (sortKey === "shipments") {
av = parseFloat(a.shipments); bv = parseFloat(b.shipments);
} else if (sortKey === "trend") { av = a.trend; bv = b.trend; }
else { av = a.scores[sortKey]; bv = b.scores[sortKey]; }
if (typeof av === "string") return sortDir === "asc" ? av.localeCompare(bv) : bv.localeCompare(av);
return sortDir === "asc" ? av - bv : bv - av;
});
return arr;
}, [carriers, sortKey, sortDir]);
const toggleSort = (k) => {
if (sortKey === k) setSortDir(sortDir === "asc" ? "desc" : "asc");
else { setSortKey(k); setSortDir(k === "name" ? "asc" : "desc"); }
};
const toggleCompare = (id) => {
setCompareIds(prev => {
if (prev.includes(id)) return prev.filter(i => i !== id);
if (prev.length >= 2) return [prev[1], id];
return [...prev, id];
});
};
const overallScore = r.overall[activeCat];
const activeCatLabel = SHIPPING_CATEGORIES.find(c => c.id === activeCat)?.label;
return (
{r.metroPop} metro population · {r.zips} ZIP codes tracked · {r.shipmentsTracked} shipments analyzed
TL;DR
UPS edges out FedEx for small-package supremacy; Old Dominion dominates LTL with a near-flawless damage record. USPS continues to slip on tracking and service. Saia is the carrier to watch — quietly climbing every quarter.
{/* Methodology footer */}
{/* Cross-dock terminal directory for this metro — surfaced before
the methodology section so shippers + drivers see the actual
handoff facilities under each carrier's grade. */}
{window.CrossDocksByCity && (
Cross-dock terminals
Where the freight actually changes hands in LA.
)}
Methodology
How we graded LA.
Grades are derived from {r.shipmentsTracked} tracked shipments across {r.zips} LA-area ZIP codes during {r.reportPeriod}. We weight 8 metrics — on-time delivery, damage rate, customer service responsiveness, tracking accuracy, transit vs. promise, pricing competitiveness, pickup reliability, and driver professionalism — and produce a 0–100 Insight Score per carrier per category. Sponsored placements are clearly labeled and never affect grades.
Metric weights
{METRICS.map(m => (
{m.label}{Math.round(m.weight*100)}%
))}
);
}
function SortInd({ active, dir }) {
if (!active) return ↕;
return {dir === "asc" ? "↑" : "↓"};
}
function CarrierRow({ c, rank, expanded, onExpand, compareMode, compared, onCompare, onCarrier }) {
return (