// ─── Freight Map View — restyled to match Infomatics reference ───────
const { useState, useMemo, useEffect, useRef, useCallback } = React;
/* ─── Geofence (red zone) constants & helpers ─────────────────────── */
const DEFAULT_RZ_RADIUS_M = 250; // Samsara-style default: 250m around geocoded point
const MIN_RZ_RADIUS_M = 50;
const MAX_RZ_RADIUS_M = 5000;
const INITIAL_POLYGON_VERTICES = 12; // when user converts circle → polygon
const MAX_POLYGON_VERTICES = 40; // hard cap per geofence
// Parse "lat, lng" coordinate strings. Returns [lat, lng] or null.
const parseCoords = (str) => {
const m = (str || '').trim().match(/^(-?\d{1,2}(?:\.\d+)?)\s*[,\s]\s*(-?\d{1,3}(?:\.\d+)?)$/);
if (!m) return null;
const lat = parseFloat(m[1]);
const lng = parseFloat(m[2]);
if (Math.abs(lat) > 90 || Math.abs(lng) > 180) return null;
return [lat, lng];
};
// Convert a circle (center + radius in meters) to a polygon of N vertices.
const circleToPolygon = (center, radius_m, count) => {
const lat0 = center[0] * Math.PI / 180;
const earth = 6378137;
const dLat = (radius_m / earth) * (180 / Math.PI);
const dLng = (radius_m / (earth * Math.cos(lat0))) * (180 / Math.PI);
const out = [];
for (let i = 0; i < count; i++) {
const a = (i / count) * 2 * Math.PI - Math.PI / 2;
out.push([
center[0] + Math.sin(a) * dLat,
center[1] + Math.cos(a) * dLng
]);
}
return out;
};
// East-edge point of a circle, used as the radius drag handle's position.
const circleEastPoint = (center, radius_m) => {
const lat0 = center[0] * Math.PI / 180;
const earth = 6378137;
const dLng = (radius_m / (earth * Math.cos(lat0))) * (180 / Math.PI);
return [center[0], center[1] + dLng];
};
// Polygon centroid (simple arithmetic mean — fine for visual handle anchoring).
const polygonCentroid = (verts) => {
if (!verts || !verts.length) return [0, 0];
let y = 0, x = 0;
verts.forEach((p) => { y += p[0]; x += p[1]; });
return [y / verts.length, x / verts.length];
};
// Format a radius value for the toolbar.
const formatRadius = (m) => {
if (m == null) return '—';
if (m >= 1000) return (m / 1000).toFixed(m >= 10000 ? 0 : 2).replace(/\.00$/, '') + ' km';
return Math.round(m) + ' m';
};
/* ─── City coordinates ───────────────────────────────────────────── */
const CITY = {
'Rancho Cucamonga, CA': [34.106, -117.593],
'Carson, CA': [33.831, -118.282],
'Ontario, CA': [34.064, -117.651],
'Los Angeles, CA': [34.052, -118.244],
'Long Beach, CA': [33.770, -118.190],
'Pittsburgh, PA': [40.441, -79.996],
'Mechanicsburg, PA': [40.213, -77.005],
'Columbus, OH': [39.961, -82.998],
'Fayetteville, NC': [35.052, -78.878],
'Killingly, CT': [41.846, -71.866],
'Dallas, TX': [32.776, -96.797],
'Houston, TX': [29.760, -95.370],
'San Antonio, TX': [29.424, -98.494],
'Chicago, IL': [41.878, -87.629],
'Memphis, TN': [35.149, -90.049],
'Portland, OR': [45.515, -122.678],
'Las Vegas, NV': [36.169, -115.139],
'Atlanta, GA': [33.749, -84.388],
'Charlotte, NC': [35.227, -80.843],
'Phoenix, AZ': [33.448, -112.074],
'Seattle, WA': [47.606, -122.332],
'Salt Lake City, UT': [40.760, -111.891],
'Louisville, KY': [38.252, -85.758],
'Nashville, TN': [36.162, -86.781],
'Denver, CO': [39.739, -104.990],
'Kansas City, MO': [39.099, -94.578],
'Minneapolis, MN': [44.978, -93.265],
'Indianapolis, IN': [39.768, -86.158],
'Richmond, VA': [37.541, -77.434],
'Miami, FL': [25.762, -80.192],
'Tampa, FL': [27.951, -82.457],
'Boston, MA': [42.361, -71.057]
};
/* ─── Status map ─────────────────────────────────────────────────── */
const STATUS_MAP = {
order_created: { label: 'Order Created' },
pickup: { label: 'Pickup' },
in_transit: { label: 'In Transit' },
out_for_delivery: { label: 'Out for Delivery' },
delivered: { label: 'Delivered' },
billing: { label: 'Billing' },
invoiced: { label: 'Invoiced' }
};
/* ─── Shipment data (unchanged) ──────────────────────────────────── */
const SHIPMENTS = [
{ id: 1, status: 'pickup', bol: 'SHOWCASE-006', origin: 'Rancho Cucamonga, CA', dest: 'Pittsburgh, PA', refs: ['21250176697'], eta: '2026-05-26T14:00:00Z', pct: 22, mabd: '2026-05-27T00:00:00Z', appt: '2026-05-26T10:00:00Z', pallets: 4, cartons: 12, wt: 1840, shipper: 'LogiWest Distribution Center', consignee: 'Rocky Mountain Logistics', carriers: [{ name: 'XPO Logistics', active: true }] },
{ id: 2, status: 'in_transit', bol: 'SHOWCASE-LTL-007', origin: 'Carson, CA', dest: 'Pittsburgh, PA', refs: ['32250000646', 'PO-44821'], eta: '2026-05-26T18:00:00Z', pct: 55, mabd: '2026-05-27T00:00:00Z', appt: '2026-05-27T08:00:00Z', pallets: 2, cartons: 8, wt: 960, shipper: 'ASUS-SBG c/o Prime Freight', consignee: 'Pittsburgh Gateway Hub', carriers: [{ name: 'Old Dominion', active: true }, { name: 'XPO Logistics', active: false }] },
{ id: 3, status: 'order_created', bol: 'NC00000634', origin: 'Carson, CA', dest: 'Columbus, OH', refs: ['21260076426', '21260076427', '21260076428'], eta: null, pct: 0, mabd: '2026-05-29T00:00:00Z', appt: '2026-05-29T09:00:00Z', pallets: 6, cartons: 24, wt: 3200, shipper: 'Carson Fulfillment Co.', consignee: 'STAPLES-US-C-DC895', carriers: [{ name: 'Estes Express', active: true }] },
{ id: 4, status: 'order_created', bol: 'NC00000635', origin: 'Carson, CA', dest: 'Mechanicsburg, PA', refs: ['21260076415'], eta: null, pct: 0, mabd: '2026-05-24T20:00:00Z', appt: '2026-05-29T10:00:00Z', pallets: 3, cartons: 15, wt: 1450, shipper: 'Carson Fulfillment Co.', consignee: 'STAPLES-US-C-DC994', carriers: [{ name: 'R+L Carriers', active: true }] },
{ id: 5, status: 'in_transit', bol: 'NC00000636', redZone: true, origin: 'Carson, CA', dest: 'Fayetteville, NC', refs: ['21260076411', 'SO-77021'], eta: '2026-05-27T14:00:00Z', pct: 62, mabd: '2026-05-28T00:00:00Z', appt: '2026-05-27T14:00:00Z', pallets: 5, cartons: 18, wt: 2100, shipper: 'Carson Fulfillment Co.', consignee: 'STAPLES-US-C-DC799', carriers: [{ name: 'ABF Freight', active: true }, { name: 'Saia LTL', active: false }] },
{ id: 6, status: 'billing', bol: 'NC00000637', podMissing: true, origin: 'Carson, CA', dest: 'Killingly, CT', refs: ['21260076416', 'PO-33021', 'SO-77120', 'REF-91044', '21260077000'], eta: null, pct: 100, mabd: '2026-05-20T00:00:00Z', appt: '2026-05-20T08:00:00Z', pallets: 8, cartons: 32, wt: 4800, shipper: 'Carson Fulfillment Co.', consignee: 'STAPLES-US-C-DC580', carriers: [{ name: 'XPO Logistics', active: true }] },
{ id: 7, status: 'invoiced', bol: 'INVLTL-2201', podMissing: true, origin: 'Ontario, CA', dest: 'Dallas, TX', refs: ['PO-88821-C'], eta: null, pct: 100, mabd: '2026-05-15T00:00:00Z', appt: '2026-05-15T11:00:00Z', pallets: 10, cartons: 42, wt: 5900, shipper: 'Pacific Coast Distributors', consignee: 'Target DC – Dallas', carriers: [{ name: 'Saia LTL', active: true }] },
{ id: 8, status: 'out_for_delivery', bol: 'BL-44892', redZone: true, origin: 'Memphis, TN', dest: 'Chicago, IL', refs: ['PO-77612', 'REF-20901'], eta: '2026-05-25T16:00:00Z', pct: 94, mabd: '2026-05-25T00:00:00Z', appt: '2026-05-25T15:00:00Z', pallets: 3, cartons: 9, wt: 870, shipper: 'Mid-South Logistics', consignee: 'Amazon FBA – ORD4', carriers: [{ name: 'FedEx Freight', active: true }] },
{ id: 9, status: 'pickup', bol: 'LTL-99021', origin: 'Portland, OR', dest: 'Las Vegas, NV', refs: ['SO-12045'], eta: '2026-05-27T09:00:00Z', pct: 18, mabd: '2026-05-28T00:00:00Z', appt: '2026-05-27T08:00:00Z', pallets: 2, cartons: 6, wt: 530, shipper: 'Northwest Freight Partners', consignee: 'Costco – Las Vegas DC', carriers: [{ name: 'Old Dominion', active: true }] },
{ id: 10, status: 'out_for_delivery', bol: 'RL-20044', arrivingEarly: true, origin: 'Atlanta, GA', dest: 'Charlotte, NC', refs: ['REF-45892'], eta: '2026-05-25T11:00:00Z', pct: 97, isEarly: true, mabd: '2026-05-26T00:00:00Z', appt: '2026-05-26T08:00:00Z', pallets: 1, cartons: 4, wt: 320, shipper: 'Southeast Express LLC', consignee: 'Home Depot – Charlotte', carriers: [{ name: 'R+L Carriers', active: true }] },
{ id: 11, status: 'billing', bol: 'BL-55001', podMissing: true, origin: 'Houston, TX', dest: 'Phoenix, AZ', refs: ['PO-90044', 'PO-90045', 'PO-90046', 'SO-11200'], eta: null, pct: 100, mabd: '2026-05-18T00:00:00Z', appt: '2026-05-18T10:00:00Z', pallets: 7, cartons: 28, wt: 3800, shipper: 'Gulf Coast Shipping LLC', consignee: 'Walmart DC – Phoenix', carriers: [{ name: 'TForce Freight', active: true }, { name: 'XPO Logistics', active: false }] },
{ id: 12, status: 'invoiced', bol: 'INV-88001', origin: 'Seattle, WA', dest: 'Salt Lake City, UT', refs: ['REF-31200'], eta: null, pct: 100, mabd: '2026-05-10T00:00:00Z', appt: '2026-05-10T09:00:00Z', pallets: 4, cartons: 16, wt: 2200, shipper: 'Pacific NW Logistics', consignee: "Smith's Food Distribution", carriers: [{ name: 'Estes Express', active: true }] },
{ id: 13, status: 'in_transit', bol: 'LTL-44120', arrivingEarly: true, origin: 'Louisville, KY', dest: 'Nashville, TN', refs: ['PO-55612'], eta: '2026-05-25T20:00:00Z', pct: 80, mabd: '2026-05-26T00:00:00Z', appt: '2026-05-25T22:00:00Z', pallets: 5, cartons: 20, wt: 2600, shipper: 'Bluegrass Distribution', consignee: 'Dollar General DC', carriers: [{ name: 'ABF Freight', active: true }] },
{ id: 14, status: 'in_transit', bol: 'NC-88500', redZone: true, origin: 'Denver, CO', dest: 'Kansas City, MO', refs: ['21260099100', 'REF-20021', 'PO-60014', 'SO-44892', '21260099101', '21260099102'], eta: '2026-05-27T15:00:00Z', pct: 40, isDelayed: true, mabd: '2026-05-26T00:00:00Z', appt: '2026-05-26T09:00:00Z', pallets: 9, cartons: 36, wt: 5100, shipper: 'Rocky Mtn. Supply Chain', consignee: 'CVS Distribution', carriers: [{ name: 'Old Dominion', active: true }, { name: 'J.B. Hunt', active: false }] },
{ id: 15, status: 'in_transit', bol: 'FT-22891', origin: 'Phoenix, AZ', dest: 'San Antonio, TX', refs: ['PO-44102', 'SO-88310'], eta: '2026-05-28T12:00:00Z', pct: 28, isDelayed: true, mabd: '2026-05-27T00:00:00Z', appt: '2026-05-27T10:00:00Z', pallets: 6, cartons: 22, wt: 3100, shipper: 'Desert SW Shipping Inc.', consignee: 'H-E-B DC – San Antonio', carriers: [{ name: 'Werner Enterprises', active: true }] },
{ id: 16, status: 'billing', bol: 'BILL-99401', podMissing: true, origin: 'Minneapolis, MN', dest: 'Indianapolis, IN', refs: ['PO-33021'], eta: null, pct: 100, mabd: '2026-05-19T00:00:00Z', appt: '2026-05-19T13:00:00Z', pallets: 4, cartons: 18, wt: 2400, shipper: 'Northstar Freight LLC', consignee: 'Target DC – Indianapolis', carriers: [{ name: 'Schneider', active: true }] },
{ id: 17, status: 'invoiced', bol: 'INV-77002', podMissing: true, origin: 'Columbus, OH', dest: 'Richmond, VA', refs: ['REF-10044', 'REF-10045', 'REF-10046'], eta: null, pct: 100, mabd: '2026-05-12T00:00:00Z', appt: '2026-05-12T09:00:00Z', pallets: 3, cartons: 10, wt: 1100, shipper: 'Great Lakes Logistics', consignee: "Lowe's DC – Richmond", carriers: [{ name: 'XPO Logistics', active: true }] },
{ id: 18, status: 'in_transit', bol: 'SPOT-40012', redZone: true, origin: 'Chicago, IL', dest: 'Miami, FL', refs: ['SO-88203'], eta: '2026-05-28T10:00:00Z', pct: 44, mabd: null, appt: '2026-05-28T09:00:00Z', pallets: 3, cartons: 11, wt: 1320, shipper: 'Midwest Spot Freight Inc.', consignee: 'Port Miami Distribution', carriers: [{ name: 'J.B. Hunt', active: true }] },
{ id: 19, status: 'pickup', bol: 'SPOT-40013', origin: 'Kansas City, MO', dest: 'Tampa, FL', refs: ['SO-88204'], eta: '2026-05-29T08:00:00Z', pct: 12, mabd: null, appt: '2026-05-29T08:00:00Z', pallets: 2, cartons: 7, wt: 690, shipper: 'Heartland Express Co.', consignee: 'Suncoast Wholesale LLC', carriers: [{ name: 'Schneider', active: true }] },
{ id: 20, status: 'order_created', bol: 'NC00000701', origin: 'Los Angeles, CA', dest: 'Boston, MA', refs: ['PO-12241'], eta: null, pct: 0, mabd: null, appt: '2026-06-02T10:00:00Z', apptEnd: '2026-06-02T10:30:00Z', pallets: 5, cartons: 21, wt: 2750, shipper: 'Pacific Rim Logistics', consignee: 'New England DC', carriers: [{ name: 'Old Dominion', active: true }, { name: 'XPO Logistics', active: false }, { name: 'Estes Express', active: false }] },
{ id: 21, status: 'delivered', bol: 'NC00000720', origin: 'Carson, CA', dest: 'Phoenix, AZ', refs: ['21260076500', 'PO-44120'], eta: '2026-05-23T15:30:00Z', pct: 100, mabd: '2026-05-24T00:00:00Z', appt: '2026-05-23T14:00:00Z', pallets: 4, cartons: 16, wt: 2080, shipper: 'Carson Fulfillment Co.', consignee: 'STAPLES-US-C-DC410', carriers: [{ name: 'Old Dominion', active: true }] },
{ id: 22, status: 'delivered', bol: 'RL-20088', arrivingEarly: true, origin: 'Atlanta, GA', dest: 'Nashville, TN', refs: ['REF-45920'], eta: '2026-05-24T09:15:00Z', pct: 100, isEarly: true, mabd: '2026-05-24T00:00:00Z', appt: '2026-05-24T10:00:00Z', pallets: 2, cartons: 8, wt: 640, shipper: 'Southeast Express LLC', consignee: 'Dollar General DC', carriers: [{ name: 'R+L Carriers', active: true }] },
{ id: 23, status: 'delivered', bol: 'BL-44910', origin: 'Memphis, TN', dest: 'Indianapolis, IN', refs: ['PO-77700', 'REF-21044'], eta: '2026-05-22T17:45:00Z', pct: 100, mabd: '2026-05-23T00:00:00Z', appt: '2026-05-22T16:00:00Z', pallets: 6, cartons: 24, wt: 3120, shipper: 'Mid-South Logistics', consignee: 'Target DC – Indianapolis', carriers: [{ name: 'FedEx Freight', active: true }] }];
/* ── Atlanta hub demo cluster ─────────────────────────────────────
22 in-transit shipments freshly departed the Atlanta DC, all sitting
at virtually the same pixel on the map. Used to showcase the
cluster-breakdown popover + spider-fan UI for large stacked clusters. */
const HUB_DESTS = [
['Miami, FL', 'Coastal Distribution Inc.'],
['Tampa, FL', 'Suncoast Wholesale LLC'],
['Charlotte, NC', 'Home Depot – Charlotte'],
['Nashville, TN', 'Dollar General DC'],
['Richmond, VA', "Lowe's DC – Richmond"],
['Memphis, TN', 'Mid-South Logistics'],
['Louisville, KY', 'Bluegrass Distribution']];
const HUB_CARRIERS = ['XPO Logistics', 'Old Dominion', 'ABF Freight', 'Estes Express', 'R+L Carriers', 'FedEx Freight', 'Saia LTL'];
const HUB_DEMO = Array.from({ length: 22 }, (_, i) => {
const [dest, consignee] = HUB_DESTS[i % HUB_DESTS.length];
const carrier = HUB_CARRIERS[i % HUB_CARRIERS.length];
const isDelayed = i === 3 || i === 9 || i === 17;
const podMissing = false;
const arrivingEarly = i === 6;
const redZone = i === 12 || i === 19;
return {
id: 100 + i,
status: 'in_transit',
bol: `ATL-HUB-${String(8200 + i).padStart(4, '0')}`,
origin: 'Atlanta, GA',
dest,
refs: [`PO-${48000 + i}`],
eta: `2026-05-27T${String(8 + i % 12).padStart(2, '0')}:00:00Z`,
pct: 3 + i % 4,
isDelayed,
arrivingEarly,
redZone,
mabd: '2026-05-27T00:00:00Z',
appt: `2026-05-27T${String(9 + i % 10).padStart(2, '0')}:00:00Z`,
pallets: 2 + i % 6,
cartons: 8 + i % 14,
wt: 600 + i * 75,
shipper: 'Southeast Express LLC',
consignee,
carriers: [{ name: carrier, active: true }]
};
});
SHIPMENTS.push(...HUB_DEMO);
/* ── Phoenix DC delivered cluster ────────────────────────────────
28 shipments recently delivered to the Phoenix consignee — sits on top
of the same destination point so the green delivered pin rolls up into
a counted cluster, matching the truck-cluster UX. */
const DELIV_ORIGINS = [
['Houston, TX', 'Gulf Coast Shipping LLC'],
['Dallas, TX', 'Pacific Coast Distributors'],
['Las Vegas, NV', 'Northwest Freight Partners'],
['Salt Lake City, UT', 'Pacific NW Logistics'],
['Los Angeles, CA', 'Pacific Rim Logistics'],
['Carson, CA', 'Carson Fulfillment Co.'],
['Denver, CO', 'Rocky Mtn. Supply Chain']];
const DELIV_CARRIERS = ['XPO Logistics', 'Old Dominion', 'ABF Freight', 'Estes Express', 'R+L Carriers', 'FedEx Freight', 'TForce Freight'];
const DELIV_DEMO = Array.from({ length: 28 }, (_, i) => {
const [origin, shipper] = DELIV_ORIGINS[i % DELIV_ORIGINS.length];
const carrier = DELIV_CARRIERS[i % DELIV_CARRIERS.length];
const day = 18 + i % 6; // delivered between May 18-23
return {
id: 200 + i,
status: 'delivered',
bol: `PHX-DLV-${String(7300 + i).padStart(4, '0')}`,
origin,
dest: 'Phoenix, AZ',
refs: [`PO-${52000 + i}`],
eta: `2026-05-${String(day).padStart(2, '0')}T${String(10 + i % 9).padStart(2, '0')}:${String((i * 7) % 60).padStart(2, '0')}:00Z`,
pct: 100,
mabd: `2026-05-${String(day).padStart(2, '0')}T00:00:00Z`,
appt: `2026-05-${String(day).padStart(2, '0')}T${String(9 + i % 9).padStart(2, '0')}:00:00Z`,
pallets: 2 + i % 7,
cartons: 6 + i % 18,
wt: 480 + i * 95,
shipper,
consignee: 'Walmart DC – Phoenix',
carriers: [{ name: carrier, active: true }]
};
});
SHIPMENTS.push(...DELIV_DEMO);
/* ─── Helpers ───────────────────────────────────────────────────── */
/* Multi-leg routes — each shipment may have intermediate transit hubs
between origin and destination, with a different carrier+driver per leg.
Shipments without an entry default to a single leg. */
const LEGS_BY_ID = {
1: [
{ to: 'Dallas, TX', carrier: 'XPO Logistics', driver: 'Mark M.' },
{ to: 'Indianapolis, IN', carrier: 'Old Dominion', driver: 'Tania R.' },
{ to: 'Pittsburgh, PA', carrier: 'R+L Carriers', driver: 'James K.' }],
2: [
{ to: 'Dallas, TX', carrier: 'Old Dominion', driver: 'Tania R.' },
{ to: 'Columbus, OH', carrier: 'XPO Logistics', driver: 'Sandra L.' },
{ to: 'Pittsburgh, PA', carrier: 'Old Dominion', driver: 'James K.' }],
20: [
{ to: 'Chicago, IL', carrier: 'Old Dominion', driver: 'Jenna Q.' },
{ to: 'Columbus, OH', carrier: 'XPO Logistics', driver: 'Adam W.' },
{ to: 'Boston, MA', carrier: 'Estes Express', driver: 'Olivia T.' }]
};
/* Before a shipment is planned there's no ETA, so the card falls back to the
commitment date it does have — MABD when set, otherwise the appointment.
Past due reads red, still-upcoming reads orange. */
const fmtDateOnly = (iso) => iso ? new Date(iso).toLocaleDateString('en-US', { timeZone: 'UTC', month: 'short', day: 'numeric' }) : '—';
const fmtTimeOnly = (iso) => iso ? new Date(iso).toLocaleTimeString('en-US', { timeZone: 'UTC', hour: 'numeric', minute: '2-digit' }) : '';
const apptFallback = (s) => {
if (!s || s.status !== 'order_created' || s.eta) return null;
const iso = s.mabd || s.appt;
if (!iso) return null;
const past = new Date(iso).getTime() < NOW_TL;
const window = !s.mabd && s.apptEnd ? ` – ${fmtTimeOnly(s.apptEnd)}` : '';
const when = `${fmtDateTime(iso)}${window}`;
return { label: `Appt: ${when}`, cls: past ? 'is-mabd-past' : 'is-mabd-due', past, iso, when };
};
const fmtDateTime = (iso) => {
if (!iso) return '—';
return new Date(iso).toLocaleString('en-US', { timeZone: 'UTC', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
};
const cityShort = (full) => full.split(',')[0] + ',' + full.split(',')[1];
const primaryCarrier = (s) => s.carriers && s.carriers.find((c) => c.active) ? s.carriers.find((c) => c.active).name : s.carriers && s.carriers[0] ? s.carriers[0].name : '—';
const interpolate = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
/* Deterministic seeded jitter — same shipment + tracker always gets the
same wandering breadcrumb trail, so paths are stable across re-renders. */
const seeded = (seed) => {
let x = (seed * 9301 + 49297) % 233280;
return () => {x = (x * 9301 + 49297) % 233280;return x / 233280;};
};
/* Generate a wandering breadcrumb path of ping points from `start` to `end`.
`side` (+1 / -1) biases the wander direction so two trackers on the same
shipment trace visibly distinct trails. */
const breadcrumbPath = (start, end, seed, side) => {
const STEPS = 22;
const rand = seeded(seed);
const dy = end[0] - start[0];
const dx = end[1] - start[1];
const len = Math.hypot(dy, dx) || 1;
// unit perpendicular vector in [lat, lng] space
const perp = [-dx / len, dy / len];
const pts = [start];
for (let i = 1; i < STEPS; i++) {
const t = i / STEPS;
const mid = interpolate(start, end, t);
// bell-shaped envelope so the path bulges in the middle, hugs endpoints
const env = Math.sin(t * Math.PI);
// wander amplitude scales with route length (in degrees)
const amp = len * 0.06 * env * side;
// small random wobble layered on top
const wobble = (rand() - 0.5) * len * 0.025 * env;
const off = amp + wobble;
pts.push([mid[0] + perp[0] * off, mid[1] + perp[1] * off]);
}
pts.push(end);
return pts;
};
/* ─── Route legs / stops ───────────────────────────────────────── */
/* Default leg when no LEGS_BY_ID entry exists — origin straight to dest with
the shipment's primary carrier. */
const getLegs = (s) => LEGS_BY_ID[s.id] || [
{ to: s.dest, carrier: primaryCarrier(s), driver: 'Mark M.' }];
/* Ordered stops along the route: [origin, leg1.to, leg2.to, ..., dest]. */
const getStops = (s) => {
const legs = getLegs(s);
return [s.origin, ...legs.map((l) => l.to)];
};
/* Which leg is currently in progress, given the shipment's overall pct. */
const activeLegIndex = (s) => {
const legs = getLegs(s);
if (s.status === 'delivered' || s.pct >= 100) return legs.length; // all past
const i = Math.floor(s.pct / 100 * legs.length);
return Math.max(0, Math.min(i, legs.length - 1));
};
/* Walk a multi-point polyline at parameter t∈[0,1] of the cumulative length. */
const interpolateRoute = (points, t) => {
if (points.length < 2) return points[0];
const lens = [];
let total = 0;
for (let i = 0; i < points.length - 1; i++) {
const dy = points[i + 1][0] - points[i][0];
const dx = points[i + 1][1] - points[i][1];
const l = Math.hypot(dy, dx);
lens.push(l);total += l;
}
if (total === 0) return points[0];
const target = total * Math.max(0, Math.min(1, t));
let acc = 0;
for (let i = 0; i < lens.length; i++) {
if (acc + lens[i] >= target) {
const local = (target - acc) / lens[i];
return interpolate(points[i], points[i + 1], local);
}
acc += lens[i];
}
return points[points.length - 1];
};
/* Resolve all stops to [lat,lng] using CITY lookup. */
const routePoints = (s) => getStops(s).map((c) => CITY[c]).filter(Boolean);
/* Split a multi-point polyline at parameter t∈[0,1] of the cumulative length
into [completedPoints, remainingPoints] sharing the interpolated split
point. Used to draw completed-route as solid and remaining-route as dotted. */
const splitRouteAt = (points, t) => {
if (points.length < 2) return [points.slice(), []];
const tt = Math.max(0, Math.min(1, t));
if (tt <= 0) return [[], points.slice()];
if (tt >= 1) return [points.slice(), []];
const lens = [];
let total = 0;
for (let i = 0; i < points.length - 1; i++) {
const dy = points[i + 1][0] - points[i][0];
const dx = points[i + 1][1] - points[i][1];
const l = Math.hypot(dy, dx);
lens.push(l);total += l;
}
if (total === 0) return [points.slice(), []];
const target = total * tt;
let acc = 0;
for (let i = 0; i < lens.length; i++) {
if (acc + lens[i] >= target) {
const local = (target - acc) / lens[i];
const mid = interpolate(points[i], points[i + 1], local);
return [[...points.slice(0, i + 1), mid], [mid, ...points.slice(i + 1)]];
}
acc += lens[i];
}
return [points.slice(), []];
};
/* ─── Red Zone organic blob shapes ──────────────────────────────── */
const makeBlob = (centerLat, centerLng, radiusLng, radiusLat, seed, n) => {
const rng = seeded(seed);
const raw = [];
for (let i = 0; i < n; i++) raw.push(0.65 + rng() * 0.7);
let s = raw;
for (let pass = 0; pass < 5; pass++) {
s = s.map((v, i) => s[(i - 1 + n) % n] * 0.25 + v * 0.5 + s[(i + 1) % n] * 0.25);
}
return s.map((v, i) => {
const a = i / n * Math.PI * 2;
return [centerLat + radiusLat * v * Math.sin(a), centerLng + radiusLng * v * Math.cos(a)];
});
};
const RED_ZONES = [
makeBlob(45.5, -93, 5, 3, 42, 48), // Minnesota/Wisconsin zone
makeBlob(34.8, -84.5, 3.5, 2, 77, 40), // Tennessee/Georgia zone
makeBlob(47.5, -117, 3, 2, 63, 44), // Washington/Idaho zone
makeBlob(35.5, -108, 3.5, 2.2, 91, 40) // New Mexico/Arizona zone
];
const RED_ZONE_NAMES = ['Upper Midwest', 'Southeast', 'Pacific Northwest', 'Southwest Border'];
const zoneCentroid = (coords) => {
let cx = 0, cy = 0;
coords.forEach((p) => { cx += p[0]; cy += p[1]; });
return [cx / coords.length, cy / coords.length];
};
/* Spider-fan position algorithm: returns [{ dx, dy }] container-pixel offsets
for `n` items arranged in concentric rings around (0,0). First ring sits at
~58px so the popover doesn't collide with the fanned pins; subsequent rings
step out by 52px each. Works up to ~80 items before rings get tight. */
const computeFanPositions = (n) => {
const positions = [];
let placed = 0;
let ring = 1;
while (placed < n) {
const radius = 58 + (ring - 1) * 52;
const circumference = 2 * Math.PI * radius;
const ringCap = Math.max(6, Math.floor(circumference / 34));
const inRing = Math.min(n - placed, ringCap);
const step = (2 * Math.PI) / inRing;
const offset = ring % 2 === 0 ? step / 2 : 0;
for (let i = 0; i < inRing; i++) {
const a = i * step + offset - Math.PI / 2;
positions.push({ dx: Math.cos(a) * radius, dy: Math.sin(a) * radius });
placed++;
}
ring++;
}
return positions;
};
/* Greedy pixel-space clustering: items within `threshold` px of an existing
cluster's average center collapse into that cluster. Used for grouping
nearby in-transit truck markers at the current map zoom. */
const clusterByPixel = (map, items, threshold) => {
const pts = items.map((it) => ({ ...it, px: map.latLngToContainerPoint(it.pos) }));
const clusters = [];
const used = new Array(pts.length).fill(false);
for (let i = 0; i < pts.length; i++) {
if (used[i]) continue;
const group = [pts[i]];
used[i] = true;
let cx = pts[i].px.x,cy = pts[i].px.y;
for (let j = i + 1; j < pts.length; j++) {
if (used[j]) continue;
if (Math.hypot(pts[j].px.x - cx, pts[j].px.y - cy) < threshold) {
group.push(pts[j]);
used[j] = true;
cx = group.reduce((s, p) => s + p.px.x, 0) / group.length;
cy = group.reduce((s, p) => s + p.px.y, 0) / group.length;
}
}
clusters.push(group);
}
return clusters;
};
/* ─── Icons ─────────────────────────────────────────────────────── */
// Icons sourced from Lucide (https://lucide.dev/icons/)
const I = {
mark:
;
/* ─── Filter tabs (status) ──────────────────────────────────────── */
const TABS = [
{ key: 'in_transit', label: 'In Transit' },
{ key: 'pickup', label: 'Pickup' },
{ key: 'out_for_delivery', label: 'Out for Delivery' },
{ key: 'order_created', label: 'Order Created' },
{ key: 'delivered', label: 'Delivered' }];
const DEFAULT_TABS = ['in_transit', 'pickup', 'out_for_delivery'];
/* ─── Needs-attention stats (interactive) ───────────────────────── */
const STATS = [
{ key: 'delayed', label: 'Delayed', value: '8', tone: 'red' },
{ key: 'tracking', label: 'Tracking issues', value: '7', tone: 'red' },
{ key: 'redzone', label: 'Red Zone', value: '4', tone: 'red' },
{ key: 'pod', label: 'POD missing', value: '5', tone: 'red' },
{ key: 'early', label: 'Arriving early', value: '2', tone: 'blue' }];
/* match a shipment against a needs-attention tag */
const STAT_MATCH = {
delayed: (s) => !!s.isDelayed,
tracking: (s) => isNoTracking(s),
redzone: (s) => !!s.redZone,
pod: (s) => !!s.podMissing,
early: (s) => !!s.arrivingEarly
};
/* ─── Transport mode (drives the Mode filter) ───────────────────── */
/* Stable per-shipment mode so the Mode pills narrow the list meaningfully. */
const SHIPMENT_MODE = {
7: 'sea', 11: 'sea', 12: 'sea', 16: 'sea',
8: 'air', 10: 'air', 13: 'air', 18: 'air'
};
const modeOf = (s) => SHIPMENT_MODE[s.id] || 'ground';
/* ─── Date-range filter ─────────────────────────────────────────── */
/* Anchored to the dataset's "now" so Last 7 / Last 30 / Last 3 months return results. */
const DATE_NOW = new Date('2026-05-26T17:30:00Z');
const sameDay = (a, b) =>
a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
const matchesDate = (s, range, pick) => {
if (!range && !pick) return true;
if (!s.appt) return false;
const d = new Date(s.appt);
if (pick) return sameDay(d, new Date(pick + 'T00:00:00'));
if (range === 'all') return true;
if (range === 'today') return sameDay(d, DATE_NOW);
const days = range === '7' ? 7 : range === '90' ? 90 : 30;
const start = new Date(DATE_NOW.getTime() - days * 86400000);
return d >= start && d <= DATE_NOW;
};
const RETAILER_OPTS = ['Amazon', 'Costco', 'Home Depot', 'Target', 'Walmart'];
SHIPMENTS.forEach((s) => { if (!s.retailer) s.retailer = RETAILER_OPTS[s.id % RETAILER_OPTS.length]; });
const EMPTY_FILTERS = { carrier: [], retailer: [], origin: [], dest: [], transit: [], modes: [], dateRange: 'all', datePick: '' };
const anyFilterActive = (f) =>
!!(f.carrier && f.carrier.length || f.retailer && f.retailer.length || f.origin && f.origin.length || f.dest && f.dest.length || f.transit && f.transit.length || f.modes && f.modes.length || f.dateRange && f.dateRange !== 'all' || f.datePick);
// Unique origin / destination options, derived from the shipment set.
const ORIGIN_OPTS = [...new Set(SHIPMENTS.map((s) => s.origin).filter(Boolean))].sort();
const DEST_OPTS = [...new Set(SHIPMENTS.map((s) => s.dest).filter(Boolean))].sort();
const TRANSIT_OPTS = [...new Set(SHIPMENTS.flatMap((s) => [s.origin, s.dest]).filter(Boolean))].sort();
const CARRIER_OPTS = [...new Set(SHIPMENTS.flatMap((s) => (s.carriers || []).map((c) => c.name)).filter(Boolean))].sort();
const EMPTY_SORT = { groupBy: 'none', sortBy: 'none' };
const riskScore = (s) => {
if (s.redZone) return 4;
if (s.isDelayed) return 3;
if (s.podMissing) return 2;
if (s.arrivingEarly) return 1;
return 0;
};
const groupKeyFor = (s, key) => {
if (key === 'broker') return s.shipper || '—';
if (key === 'carrier') return primaryCarrier(s);
if (key === 'consignee') return s.consignee || '—';
return null;
};
const sortComparator = (key) => {
if (key === 'appt') return (a, b) => (a.appt || '\uffff').localeCompare(b.appt || '\uffff');
if (key === 'eta') return (a, b) => (a.eta || '\uffff').localeCompare(b.eta || '\uffff');
if (key === 'risk') return (a, b) => riskScore(b) - riskScore(a);
if (key === 'created') return (a, b) => b.id - a.id; // newest first (id is monotonic w/ creation)
return null;
};
/* ─── Shipment mode icons (ground / air / ocean) ───────────────── */
const MODE_ICON = {
ground: { src: 'uploads/truck.svg', h: 12 },
air: { src: 'uploads/plane.svg', h: 16 },
sea: { src: 'uploads/ship.svg', h: 18 }
};
const modeIconOf = (s) => MODE_ICON[modeOf(s)] || MODE_ICON.ground;
/* ─── Shipment card ─────────────────────────────────────────────── */
function ShipmentCard({ s, isSelected, onSelect, isPinned, onTogglePin, activeStats }) {
const showTruck = s.pct > 4 && s.pct < 99;
const rzActive = !!(activeStats && activeStats.includes('redzone') && s.redZone);
return (
onSelect(s.id)}>
{e.stopPropagation();onTogglePin(s.id);}}>
{I.pin}
{s.bol}
{isNoTracking(s) && No tracking }
{rzActive
? Red Zone
: s.isDelayed && Major Delay }
{cityShort(s.origin)}→ {cityShort(s.dest)}
{STATUS_MAP[s.status].label} • {primaryCarrier(s)} • {getLegs(s).length} {getLegs(s).length === 1 ? 'leg' : 'legs'}
{(s.shipper || s.consignee) &&
{s.shipper && <>Shipper {s.shipper} }
{s.consignee && <>Consignee {s.consignee} }
}
Last updated: just now
{apptFallback(s)
? {apptFallback(s).label}
: ETA: {fmtDateTime(s.eta)} }
{ if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onFocus(); } } : undefined}
style={clickable ? { cursor: 'pointer' } : undefined}
title={clickable ? 'Zoom to tracker on map' : undefined}>
{I.crosshair}
Hardware tracker
{hw.model} · {hw.id}
Temperature
10 ? ' is-warn' : ''}`}>{fmtTemp(hw.temp)}
Battery
{fmtBatt(hw.battery)}
{ if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onFocus(); } } : undefined}
style={clickable ? { cursor: 'pointer' } : undefined}
title={clickable ? 'Zoom to ELD on map' : undefined}>
{I.truck}
ELD
{eld.provider} · Truck {eld.truck}
ETA · {eta ? fmtDateTime(eta) : '—'}
{ if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onFocus(); } } : undefined}
style={clickable ? { cursor: 'pointer' } : undefined}
title={clickable ? 'Zoom to driver on map' : undefined}>
{I.phone}
Driver app
{driver.name}
Last ping · {fmtAgo(driver.lastTs)}
{ if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onFocus(); } } : undefined}
style={clickable ? { cursor: 'pointer' } : undefined}
title={clickable ? 'Show ELD ping trail on map' : undefined}>
{I.truck}
ELD
{ded.provider} · Truck {ded.truck}
Last ping · {fmtDateTime(ded.lastPingTs)}
{ if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onFocus(); } } : undefined}
style={clickable ? { cursor: 'pointer' } : undefined}
title={clickable ? 'Show driver history on map' : undefined}>
{I.phone}
Driver app
{dd.name}
Arrived · {fmtDateTime(dd.arrivedTs)}
{s.bol}
{I.ext}
{I.close}
{s.isDelayed ? 'At hub' : STATUS_MAP[s.status].label}
{STATUS_MAP[s.status].label}
{cityShort(s.origin)}→ {cityShort(s.dest)}
{(() => {
const fmtDurAbs = (ms) => {
const totalMin = Math.max(1, Math.round(Math.abs(ms) / 60000));
const d = Math.floor(totalMin / (60 * 24));
const h = Math.floor((totalMin % (60 * 24)) / 60);
const m = totalMin % 60;
if (d > 0) return `${d} day${d === 1 ? '' : 's'} ${h} hour${h === 1 ? '' : 's'}`;
if (h > 0) return `${h} hour${h === 1 ? '' : 's'} ${m} minute${m === 1 ? '' : 's'}`;
return `${m} minute${m === 1 ? '' : 's'}`;
};
const apptMs = s.appt ? new Date(s.appt).getTime() : null;
const etaMs = s.eta ? new Date(s.eta).getTime() : null;
const issues = [];
if (s.podMissing) issues.push({
icon: I.file,
title: 'POD missing',
desc: apptMs ? `No POD since ${fmtDurAbs(NOW_TL - apptMs)} of arrival` : 'Proof of delivery has not been received yet.'
});
if (s.arrivingEarly) issues.push({
icon: I.clock,
title: 'Arriving Early',
desc: apptMs && etaMs ? `Arriving ${fmtDurAbs(apptMs - etaMs)} before scheduled time` : 'Arriving before scheduled time.'
});
if (s.isDelayed) {
const isDelivered = s.status === 'delivered' || s.pct >= 100;
let delayDesc;
if (apptMs && etaMs && etaMs > apptMs) {
const late = fmtDurAbs(etaMs - apptMs);
delayDesc = isDelivered ? `Late by ${late}` : `Delayed by ${late}`;
} else if (isDelivered && apptMs) {
delayDesc = `Late by ${fmtDurAbs(NOW_TL - apptMs)}`;
} else {
delayDesc = `Appointment: ${fmtDateTime(s.appt)}`;
}
issues.push({
icon: I.alertTri,
title: 'Critical Delay',
desc: delayDesc
});
}
const mi = apptFallback(s);
if (mi && mi.past) issues.push({
icon: I.alertTri,
title: 'Appointment date passed',
desc: `Appt: ${mi.when}`
});
if (mi && !mi.past) issues.push({
icon: I.clock,
title: 'Appointment coming up',
desc: `Appt: ${mi.when} — plan the pickup to meet it`,
soft: true
});
if (s.redZone) issues.push({
icon: I.crosshair,
title: 'Red Zone entry',
desc: `Entered Red Zone ${'ABCD'[s.id % 4]} ${15 + s.id % 4 * 10} mins ago`
});
if (isNoTracking(s, hwStatus, driverStatus, eldStatus)) issues.push({
icon: I.wifiOff,
title: 'No Tracking',
desc: 'No location data received from driver for 3 hours.'
});
if (issues.length === 0) return null;
const n = issues.filter((x) => !x.soft).length;
return (
{n === 0 ? 'Heads up' : `${n} ${n === 1 ? 'issue needs' : 'issues need'} attention`}
{issues.map((iss, i) =>
{iss.icon}
{iss.title}
{iss.desc}
)}
);
})()}
{[['details', 'Details'], ['timeline', 'Timeline'], ['documents', 'Documents']].map(([k, lbl]) =>
setTab(k)} style={{ fontSize: "11px" }}>{lbl}
)}
{tab === 'timeline' ?
Timeline
{buildTimeline(s).map((ev, i) =>
{ev.title}
{ev.loc}
{fmtDateTime(new Date(ev.time).toISOString())}
{agoLabel(ev.time)}
)}
:
tab === 'documents' ?
(() => {
const podFile = `BOL-${s.id * 8675309 % 90000000 + 10000000}.pdf`;
const bolFile = `${s.bol}.pdf`;
const docs = [
{ kind: 'bol', name: 'BOL', file: bolFile, sub: bolFile },
...(!s.podMissing ? [{ kind: 'pod', name: 'Proof of Delivery', file: podFile, sub: podFile }] : [])
];
return (
Documents
{docs.map((d) =>
setDocPreview({ ...d, s })}
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setDocPreview({ ...d, s }); } }}>
{I.file}
{d.name}
{d.sub}
e.stopPropagation()}>{I.download}
)}
{s.podMissing &&
POD not yet available
}
{docPreview &&
setDocPreview(null)} />}
);
})() :
Route Details
{(() => {
const legs = getLegs(s);
const stops = getStops(s);
const active = activeLegIndex(s);
const noTracking = isNoTracking(s, hwStatus, driverStatus, eldStatus);
const isDelivered = s.status === 'delivered' || s.pct >= 100 && active >= stops.length - 1;
const stopKind = (i) => {
if (isDelivered) return 'past';
if (i < active) return 'past';
if (i === active) return 'current';
return 'future';
};
const mi = apptFallback(s);
const timeLabel = (i, isLast, kind) => {
// Past stops report the actual completed event, not a forward-looking ETA.
if (i === 0) return `${kind === 'past' ? 'Picked up' : 'Pickup'}: ${fmtDateTime(s.appt)}`;
if (mi) return isLast ? mi.label : '';
if (kind === 'past') return `${isLast ? 'Delivered' : 'Arrived'}: ${fmtDateTime(s.eta)}`;
return `ETA: ${fmtDateTime(s.eta)}`;
};
const els = stops.map((name, i) => {
const kind = stopKind(i);
const isLast = i === stops.length - 1;
const leg = isLast ? null : legs[i] || legs[legs.length - 1];
const showNoTrack = kind === 'current' && noTracking;
// Position class drives marker shape: origin = small dot,
// transit = numbered circle, dest = teardrop pin. State
// (past/current/future) drives color. Mirrors the map markers.
const isOrigin = i === 0;
const isDest = i === stops.length - 1;
const pos = isOrigin ? 'origin' : isDest ? 'dest' : 'transit';
return (
{pos === 'transit' && i}
{pos === 'dest' &&
}
{name}
{showNoTrack && No tracking }
{timeLabel(i, isLast, kind) &&
0 ? ' ' + mi.cls : ''}`}>{timeLabel(i, isLast, kind)} }
{leg &&
Carrier: {leg.carrier} }
{leg &&
Driver: {leg.driver} }
{kind === 'past' && Past }
{showNoTrack && !tracking &&
setTracking(true)}>Track
}
{showNoTrack && tracking &&
Requested
}
{kind === 'current' &&
setActionsOpen(true)} aria-label="More actions">
}
);
});
// Natural route order: origin → transit stops (numbered) → destination.
return els;
})()}
Tracking Sources
{(() => {
const t = trackersOf(s);
const hws = hwListOf(s);
const dd = deliveredDriverOf(s);
const ded = deliveredEldOf(s);
if (hws.length === 0 && !t.driver && !t.eld && !dd && !ded) {
return
No tracking sources configured
;
}
return (
{hws.map((hw) => );
})()}
}
{ if (e.target === e.currentTarget) setActionsOpen(false); }}>
setActionsOpen(false)}>More actions
{ setTracking(true); setActionsOpen(false); onViewOnMap && onViewOnMap(); }}>Track
{ setActionsOpen(false); onViewOnMap && onViewOnMap(); }}>View on Map
);
}
/* ─── Cluster breakdown popover ─────────────────────────────────── */
/* Compact summary card anchored to a cluster pin. Lists every shipment
in the cluster (scrollable) and exposes "spread on map" + "zoom" actions. */
function ClusterPopover({ cluster, onSelect, onClose, onSpread, onCollapse, onZoom, spread }) {
if (!cluster) return null;
const items = cluster.ids
.map((id) => SHIPMENTS.find((x) => x.id === id))
.filter(Boolean);
// Best-effort label for "where is this cluster" — most-common origin city
// among the cluster's shipments.
const originCounts = items.reduce((acc, s) => {
acc[s.origin] = (acc[s.origin] || 0) + 1;
return acc;
}, {});
const topOrigin = Object.entries(originCounts).sort((a, b) => b[1] - a[1])[0];
const label = topOrigin && topOrigin[1] >= Math.ceil(items.length * 0.6) ?
`Near ${topOrigin[0].split(',')[0]}` :
'Multiple shipments';
const delayed = items.filter((x) => x.isDelayed).length;
const noTrk = items.filter((x) => isNoTracking(x)).length;
const sub = [
`${items.length} shipments`,
delayed > 0 ? `${delayed} delayed` : null,
noTrk > 0 ? `${noTrk} no tracking` : null
].filter(Boolean).join(' \u00b7 ');
return (
{I.truck}
{items.length}
{label}
{sub}
{I.close}
{items.map((s, i) => {
const noTrack = isNoTracking(s);
return (
onSelect(s.id)}>
{String(i + 1).padStart(2, '0')}
{s.bol}
{cityShort(s.origin)} → {cityShort(s.dest)} · {primaryCarrier(s)}
{s.isDelayed &&
Delayed }
{!s.isDelayed && s.redZone &&
Red Zone }
{!s.isDelayed && !s.redZone && noTrack &&
No tracking }
{!s.isDelayed && !s.redZone && !noTrack && s.arrivingEarly &&
Early }
);
})}
{spread ?
{I.crosshair} Collapse
:
{I.shuffle} Spread out
}
{I.zoomIn} Zoom
);
}
/* ─── Map ───────────────────────────────────────────────────────── */
function MapView({ shipments, selectedId, loadingId, onSelect, onClusterClick, mapApiRef, hwStatus, driverStatus, eldStatus, overlays, customRedZones, addRedZoneMode, onMapClickAddRedZone, draftZone, onDraftChange, clusterPopover, onPopoverClose, onSpread, onCollapse, onZoomCluster, spiderIds }) {
const mapEl = useRef(null);
const mapRef = useRef(null);
const [zoomTick, setZoomTick] = useState(0);
const layerRef = useRef({ origins: null, dests: null, currents: null, routes: null, trackers: null, trackPaths: null, transits: null });
const fitDoneRef = useRef(false);
useEffect(() => {
if (mapRef.current || !mapEl.current) return;
const map = window.L.map(mapEl.current, {
center: [39.5, -96], zoom: 4, zoomControl: false, attributionControl: false
});
window.L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
subdomains: 'abcd', maxZoom: 20
}).addTo(map);
mapRef.current = map;
if (mapApiRef) mapApiRef.current = map;
layerRef.current.routes = window.L.layerGroup().addTo(map);
layerRef.current.trackPaths = window.L.layerGroup().addTo(map);
layerRef.current.transits = window.L.layerGroup().addTo(map);
layerRef.current.origins = window.L.layerGroup().addTo(map);
layerRef.current.dests = window.L.layerGroup().addTo(map);
layerRef.current.currents = window.L.layerGroup().addTo(map);
layerRef.current.spiders = window.L.layerGroup().addTo(map);
layerRef.current.trackers = window.L.layerGroup().addTo(map);
layerRef.current.redZones = window.L.layerGroup().addTo(map);
layerRef.current.draft = window.L.layerGroup().addTo(map);
requestAnimationFrame(() => map.invalidateSize());
setTimeout(() => map.invalidateSize(), 160);
// Re-cluster trucks whenever the viewport changes.
const bump = () => setZoomTick((v) => v + 1);
map.on('zoomend', bump);
map.on('moveend', bump);
}, []);
useEffect(() => {
const map = mapRef.current;
if (!map) return;
const { routes, origins, dests, currents, transits } = layerRef.current;
routes.clearLayers();origins.clearLayers();dests.clearLayers();currents.clearLayers();transits.clearLayers();
const allPts = [];
// While the clicked shipment's data is still being fetched, behave as if
// nothing is selected so the existing fleet map stays put. The route line,
// transit/origin/dest pins, and tracker pins only render once loading
// clears — the thin top progress bar signals that work is in flight.
const isLoadingSel = loadingId === selectedId && selectedId != null;
const effSelectedId = isLoadingSel ? null : selectedId;
// When a shipment is selected, only render markers/route for that one
// shipment — every other shipment's pins and route line are hidden.
const renderList = effSelectedId != null ?
shipments.filter((s) => s.id === effSelectedId) :
shipments;
// Collect truck positions for clustering after the loop.
const truckItems = [];
// Collect delivered-shipment destinations for clustering after the loop.
const deliveredItems = [];
renderList.forEach((s) => {
const o = CITY[s.origin];const d = CITY[s.dest];
if (!o || !d) return;
const isSel = s.id === effSelectedId;
allPts.push(o, d);
// Multi-leg route: build the polyline through origin → transit stops → dest.
const pts = routePoints(s);
// State-aware stop classifier — mirrors the ShipmentDetail route
// timeline so map markers and popup markers stay in lockstep
// (Map Detail Popup Guide · section 6 · parity).
const activeIdx = activeLegIndex(s);
const isDelivered = s.status === 'delivered' || s.pct >= 100;
const stopKind = (idx) => {
if (isDelivered) return 'past';
if (idx < activeIdx) return 'past';
if (idx === activeIdx) return 'current';
return 'future';
};
// Only draw the route line when this shipment is the selected one —
// by default (nothing selected) the map shows just origin/dest pins.
if (isSel) {
// Split the route at the shipment's progress: completed portion
// draws as a SOLID grey line, the remaining portion as a DASHED
// black line (per popup guide line states).
const pct = Math.max(0, Math.min(1, (s.pct || 0) / 100));
const [donePts, restPts] = splitRouteAt(pts, pct);
if (donePts.length >= 2) {
const doneLine = window.L.polyline(donePts, {
color: '#A9A9A9',
weight: 2,
opacity: 1,
lineCap: 'round',
lineJoin: 'round'
});
doneLine.on('click', () => onSelect(s.id));
doneLine.addTo(routes);
}
if (restPts.length >= 2) {
const restLine = window.L.polyline(restPts, {
color: '#14121D',
weight: 1.5,
opacity: 0.85,
dashArray: '6 6',
lineCap: 'round',
lineJoin: 'round'
});
restLine.on('click', () => onSelect(s.id));
restLine.addTo(routes);
}
// Transit-hub pins between origin and destination — drawn only for the
// selected shipment so the unselected map stays clean.
const transitStops = pts.slice(1, -1);
const transitNames = getStops(s).slice(1, -1);
transitStops.forEach((p, i) => {
const name = transitNames[i] || '';
// pts index for this transit stop
const stopIdx = i + 1;
const kind = stopKind(stopIdx);
const tIcon = window.L.divIcon({
html: `${i + 1}
${name.split(',')[0]}
`,
className: '', iconSize: [18, 18], iconAnchor: [9, 9]
});
window.L.marker(p, { icon: tIcon }).on('click', () => onSelect(s.id)).addTo(transits);
});
}
// Origin/destination pins only render for the selected shipment —
// by default (nothing selected) the map shows just the live truck pins.
if (isSel) {
const oKind = stopKind(0);
const dKind = stopKind(pts.length - 1);
const oPin = window.L.divIcon({ html: `
`, className: '', iconSize: [12, 12], iconAnchor: [6, 6] });
window.L.marker(o, { icon: oPin }).on('click', () => onSelect(s.id)).addTo(origins);
const dPin = window.L.divIcon({ html: ``, className: '', iconSize: [18, 23], iconAnchor: [9, 22] });
window.L.marker(d, { icon: dPin }).on('click', () => onSelect(s.id)).addTo(dests);
}
// Delivered shipments — collect their destination positions; clustered
// and rendered below so dozens of deliveries at one DC roll up into a
// single counted pin.
if (effSelectedId == null && s.status === 'delivered') {
deliveredItems.push({ id: s.id, pos: d });
}
// The live truck pin only renders in the high-level view (nothing
// selected). When a shipment is selected, the dedicated tracker
// pins (HW / Driver / ELD) take over and the generic truck is hidden.
const isLive = ['pickup', 'in_transit', 'out_for_delivery'].includes(s.status);
if (effSelectedId == null && isLive && s.pct > 0 && s.pct < 100) {
const cur = interpolateRoute(pts, s.pct / 100);
truckItems.push({ id: s.id, pos: cur, isSel, redZone: !!s.redZone });
}
});
// ── Cluster nearby trucks based on current viewport pixel distance ──
// Trucks within CLUSTER_PX of each other collapse into one marker with
// a count badge; clicking the cluster filters the list to those
// shipments and zooms to their bounds.
const CLUSTER_PX = 44;
const truckGroups = clusterByPixel(map, truckItems, CLUSTER_PX);
truckGroups.forEach((g) => {
if (g.length === 1) {
const it = g[0];
const cPin = window.L.divIcon({
html: ``,
className: '', iconSize: [24, 24], iconAnchor: [12, 12]
});
window.L.marker(it.pos, { icon: cPin }).on('click', () => onSelect(it.id)).addTo(currents);
} else {
const center = [
g.reduce((s, p) => s + p.pos[0], 0) / g.length,
g.reduce((s, p) => s + p.pos[1], 0) / g.length];
const ids = g.map((p) => p.id);
const bounds = g.map((p) => p.pos);
const isOpen = clusterPopover && JSON.stringify([...clusterPopover.ids].sort()) === JSON.stringify([...ids].sort());
// Hide the cluster pin entirely while it's spread out (the spider
// pins take its place; we still show the popover anchored to center).
if (isOpen && spiderIds && spiderIds.length === ids.length) return;
// Size tier scales the pin so 25 / 50 shipment clusters read at a
// glance vs. small 2-4 clusters.
const sizeCls =
g.length >= 25 ? 'is-xl' :
g.length >= 10 ? 'is-lg' :
g.length >= 5 ? 'is-md' : '';
const openCls = isOpen ? ' is-open' : '';
const countLabel = g.length > 99 ? '99+' : String(g.length);
const cPin = window.L.divIcon({
html: ``,
className: '', iconSize: [30, 30], iconAnchor: [15, 15]
});
window.L.marker(center, { icon: cPin, zIndexOffset: 500 }).
on('click', () => onClusterClick && onClusterClick(ids, bounds, center)).
addTo(currents);
}
});
// ── Cluster delivered shipments by destination ───────────────────
// Many shipments often deliver to the same DC; roll them up by pixel
// distance into a single green pin with a count badge.
const deliveredGroups = clusterByPixel(map, deliveredItems, CLUSTER_PX);
deliveredGroups.forEach((g) => {
if (g.length === 1) {
const it = g[0];
const delivIcon = window.L.divIcon({
html: ``,
className: '', iconSize: [22, 22], iconAnchor: [11, 11]
});
window.L.marker(it.pos, { icon: delivIcon }).on('click', () => onSelect(it.id)).addTo(currents);
} else {
const center = [
g.reduce((s, p) => s + p.pos[0], 0) / g.length,
g.reduce((s, p) => s + p.pos[1], 0) / g.length];
const ids = g.map((p) => p.id);
const bounds = g.map((p) => p.pos);
const isOpen = clusterPopover && JSON.stringify([...clusterPopover.ids].sort()) === JSON.stringify([...ids].sort());
if (isOpen && spiderIds && spiderIds.length === ids.length) return;
const sizeCls =
g.length >= 25 ? 'is-xl' :
g.length >= 10 ? 'is-lg' :
g.length >= 5 ? 'is-md' : '';
const openCls = isOpen ? ' is-open' : '';
const countLabel = g.length > 99 ? '99+' : String(g.length);
const cPin = window.L.divIcon({
html: ``,
className: '', iconSize: [28, 28], iconAnchor: [14, 14]
});
window.L.marker(center, { icon: cPin, zIndexOffset: 500 }).
on('click', () => onClusterClick && onClusterClick(ids, bounds, center)).
addTo(currents);
}
});
if (allPts.length && !fitDoneRef.current) {
map.fitBounds(allPts, { padding: [50, 50] });
fitDoneRef.current = true;
}
}, [shipments, selectedId, loadingId, onSelect, onClusterClick, zoomTick, clusterPopover, spiderIds]);
/* Selected-shipment tracker pins + breadcrumb paths: each live source
gets its own wandering breadcrumb trail from origin to current position. */
useEffect(() => {
const map = mapRef.current;
if (!map) return;
const trkLayer = layerRef.current.trackers;
const pathLayer = layerRef.current.trackPaths;
if (!trkLayer || !pathLayer) return;
trkLayer.clearLayers();
pathLayer.clearLayers();
if (selectedId == null) return;
const s = SHIPMENTS.find((x) => x.id === selectedId);
if (!s) return;
const o = CITY[s.origin],d = CITY[s.dest];
if (!o || !d) return;
const pts = routePoints(s);
const pct = (s.pct || 50) / 100;
const cur = interpolateRoute(pts, Math.max(0.02, Math.min(0.98, pct)));
// While the shipment's data is still being fetched, hide tracker pins and
// breadcrumbs entirely. A thin progress bar at the top of the map
// communicates the loading state instead of a per-marker spinner.
if (loadingId === selectedId) {
return;
}
const t = trackersOf(s);
const live = liveTrackers(s, hwStatus, driverStatus, eldStatus);
const rzCls = s.redZone ? ' is-redzone' : '';
if (live.hw) {
const hws = hwListOf(s);
hws.forEach((hw, hwIdx) => {
// Stagger multiple HW trackers around the base HW offset so they don't overlap.
const fan = hws.length > 1 ? (hwIdx - (hws.length - 1) / 2) * 0.42 : 0;
const pos = [cur[0] + HW_OFFSET[0] + fan, cur[1] + HW_OFFSET[1] + fan * 0.6];
const path = breadcrumbPath(o, pos, s.id * 13 + 7 + hwIdx * 31, 1);
window.L.polyline(path, { color: '#34C759', weight: 3, opacity: 0.85, lineCap: 'round', lineJoin: 'round' }).addTo(pathLayer);
const icon = window.L.divIcon({
html: `${hw.id}
`,
className: '', iconSize: [26, 26], iconAnchor: [13, 13]
});
window.L.marker(pos, { icon, zIndexOffset: 1000 + hwIdx }).addTo(trkLayer);
});
}
if (live.driver) {
const pos = [cur[0] + DRIVER_OFFSET[0], cur[1] + DRIVER_OFFSET[1]];
const path = breadcrumbPath(o, pos, s.id * 17 + 23, -1);
window.L.polyline(path, { color: '#007AFF', weight: 3, opacity: 0.85, lineCap: 'round', lineJoin: 'round' }).addTo(pathLayer);
const icon = window.L.divIcon({
html: `${t.driver.name}
`,
className: '', iconSize: [26, 26], iconAnchor: [13, 13]
});
window.L.marker(pos, { icon, zIndexOffset: 1001 }).addTo(trkLayer);
}
if (live.eld) {
const pos = [cur[0] + ELD_OFFSET[0], cur[1] + ELD_OFFSET[1]];
const path = breadcrumbPath(o, pos, s.id * 23 + 11, 1);
const handoff = t.eld && t.eld.handoff;
if (handoff && path.length >= 3) {
// Split the breadcrumb at the handoff point so we can draw two truck legs:
// the previous truck's leg (ended) muted, and the current truck's leg live.
const at = Math.max(0.15, Math.min(0.85, handoff.at));
const idx = Math.max(1, Math.min(path.length - 2, Math.round(path.length * at)));
const handoffPos = path[idx];
const donePath = path.slice(0, idx + 1);
const restPath = path.slice(idx);
// First truck's completed leg — muted gray, thinner
window.L.polyline(donePath, { color: '#8C8C8C', weight: 2.5, opacity: 0.9, lineCap: 'round', lineJoin: 'round' }).addTo(pathLayer);
// Second (current) truck's active leg — brand gold
window.L.polyline(restPath, { color: '#FFCC00', weight: 3, opacity: 0.9, lineCap: 'round', lineJoin: 'round' }).addTo(pathLayer);
// Marker for the ended truck parked at the handoff point
const prevIcon = window.L.divIcon({
html: `${handoff.prevTruck || 'Prev truck'} · ended
`,
className: '', iconSize: [26, 26], iconAnchor: [13, 13]
});
window.L.marker(handoffPos, { icon: prevIcon, zIndexOffset: 1000 }).addTo(trkLayer);
} else {
window.L.polyline(path, { color: '#FFCC00', weight: 3, opacity: 0.85, lineCap: 'round', lineJoin: 'round' }).addTo(pathLayer);
}
const icon = window.L.divIcon({
html: `${t.eld.truck || t.eld.id}
`,
className: '', iconSize: [26, 26], iconAnchor: [13, 13]
});
window.L.marker(pos, { icon, zIndexOffset: 1002 }).addTo(trkLayer);
}
/* Delivered-driver history: full trail from origin to the destination
(the phone stopped pinging when the driver arrived and closed the
load), a driver marker planted at the drop, and a POD upload point.
The POD often lands on top of the destination — sometimes it drifts
away because the driver forgot to hit "upload" until later. */
const dd = deliveredDriverOf(s);
if (dd) {
const path = breadcrumbPath(o, d, s.id * 17 + 23, -1);
// The polyline visualizes the *en-route* pings only. It starts at the
// first ping (a real checkpoint) so the beginning of the line has a
// visible dot on it, and the origin marker (representing the "opened
// link" state change, not a location) stays visually detached.
const LINE_START_T = 0.05;
const linePath = [
interpolateRoute(path, LINE_START_T),
...path.filter((_, idx) => idx / (path.length - 1) > LINE_START_T)];
window.L.polyline(linePath, {
color: '#007AFF', weight: 3, opacity: 0.85,
lineCap: 'round', lineJoin: 'round'
}).addTo(pathLayer);
/* Ping-trail beads — each event that the driver app reported
materializes as a small dot along the recorded breadcrumb. The two
"en route to pickup" pings and the pickup / BOL cluster sit near
the origin; the destination-side pings spread along the drive. The
"opened link" event is *not* on the polyline — it's a state change,
not a location — so it's rendered separately as the origin driver
marker below. Event 8 (arrived at destination) is represented by
the driver marker at the endpoint; event 9 (POD) has its own icon. */
if (dd.pingTrail && dd.pingTrail.length && path.length >= 2) {
/* Events that share a location (same t) — e.g. "Arrived at pickup"
and "Signed BOL" both happen at the pickup dock — collapse into ONE
stacked bead with a count badge and a combined chronological
tooltip, instead of two dots faked apart along the route. */
const trailStops = [
{ i: 1, t: 0.05, kind: 'ping' },
{ i: 2, t: 0.11, kind: 'ping' },
{ i: 3, t: 0.17, kind: 'arrive' },
{ i: 4, t: 0.17, kind: 'doc' },
{ i: 5, t: 0.48, kind: 'ping' },
{ i: 6, t: 0.78, kind: 'ping' }];
const byT = new Map();
trailStops.forEach((stopDef) => {
const ev = dd.pingTrail[stopDef.i];
if (!ev) return;
const k = String(stopDef.t);
if (!byT.has(k)) byT.set(k, []);
byT.get(k).push({ ...stopDef, ev });
});
byT.forEach((group) => {
const p = interpolateRoute(path, group[0].t);
const evRow = (ev) =>
`${ev.label}
` +
`${ev.ts ? fmtDateTime(ev.ts) : 'Pending'}
` +
(ev.sub ? `${ev.sub}
` : '');
let dot, tipHtml;
if (group.length === 1) {
dot = window.L.divIcon({
html: `
`,
className: '', iconSize: [10, 10], iconAnchor: [5, 5]
});
tipHtml = `${evRow(group[0].ev)}
`;
} else {
// Stacked bead: primary kind styling + event-count badge.
const kindCls = group.map((g) => `is-${g.kind}`).join(' ');
dot = window.L.divIcon({
html: `${group.length}
`,
className: '', iconSize: [14, 14], iconAnchor: [7, 7]
});
tipHtml =
`` +
`
${group.length} events · same location
` +
group.map((g) => `
${evRow(g.ev)}
`).join('') +
`
` +
`
Truck assigned
` +
`
${fmtDateTime(eldAssignedEv.ts)}
` +
`
${ded.provider} · Truck ${ded.truck}
` +
`
${ded.provider} · Truck ${ded.truck}
`,
className: '', iconSize: [26, 26], iconAnchor: [-15, 13]
});
const eldOriginMarker = window.L.marker(o, { icon: eldOriginIcon, zIndexOffset: 1000 });
if (eldAssignedTipHtml) {
eldOriginMarker.bindTooltip(eldAssignedTipHtml, {
direction: 'top', offset: [0, -14], opacity: 1,
className: 'fmx-ping-tip-wrap', sticky: false
});
}
eldOriginMarker.addTo(trkLayer);
ded.pingTrail.forEach((ev) => {
const p = interpolateRoute(eldPath, ev.t);
const dot = window.L.divIcon({
html: `
`,
className: '', iconSize: [10, 10], iconAnchor: [5, 5]
});
const tipHtml = ev.status ?
`` +
`
${ev.status}
` +
`
${fmtDateTime(ev.ts)}
` +
`
` +
`
ELD location ping
` +
`
${fmtDateTime(ev.ts)}
` +
`
${ded.provider} · ${ev.speed} mph
` +
`
` +
`
Driver opened link
` +
`
${fmtDateTime(openedEv.ts)}
` +
`
${dd.name}
`,
className: '', iconSize: [26, 26], iconAnchor: [13, 13]
});
const originMarker = window.L.marker(o, { icon: originIcon, zIndexOffset: 1000 });
if (openedTipHtml) {
originMarker.bindTooltip(openedTipHtml, {
direction: 'top', offset: [0, -14], opacity: 1,
className: 'fmx-ping-tip-wrap', sticky: false
});
}
originMarker.addTo(trkLayer);
// When the POD upload landed exactly at the destination the two markers
// sit on the same lat/lng — offset the driver icon a bit to the left so
// both icons stay visible side-by-side. The driver's label sits below
// the icon by default (may partially collide with the POD label below);
// hovering the driver marker pops it above the icon so it's readable.
const driverOverlapsPod = !dd.missing && dd.podAtDest;
const driverAnchor = driverOverlapsPod ? [28, 13] : [13, 13];
const driverLblCls = driverOverlapsPod ? 'fmx-trk-lbl is-above-on-hover' : 'fmx-trk-lbl';
const driverIcon = window.L.divIcon({
html: `${dd.name}
`,
className: '', iconSize: [26, 26], iconAnchor: driverAnchor
});
// Endpoint tooltip mirrors the ping-trail tips: "Arrived at destination"
// + timestamp, so hovering either end of the trail reveals the event.
const arrivedEv = dd.pingTrail && dd.pingTrail[7];
const arrivedTipHtml = arrivedEv ?
`` +
`
Arrived at destination
` +
`
${fmtDateTime(arrivedEv.ts)}
` +
`
POD uploaded
`,
className: '', iconSize: [26, 26], iconAnchor: podAnchor
});
const podEv = dd.pingTrail && dd.pingTrail[8];
const podSub = dd.podAtDest ? '' : `${fmtOffsetMi(dd.podOffset)} from destination
`;
const podTipHtml =
`` +
`
POD uploaded
` +
`
${podEv && podEv.ts ? fmtDateTime(podEv.ts) : fmtDateTime(dd.podTs)}
` +
podSub +
`
`,
className: '', iconSize: [10, 10], iconAnchor: [5, 5]
});
window.L.marker(center, { icon: centerIcon, zIndexOffset: 1500 }).addTo(spiderLayer);
spiderIds.forEach((id, i) => {
const s = SHIPMENTS.find((x) => x.id === id);
if (!s) return;
const off = offsets[i];
const pinPx = window.L.point(centerPx.x + off.dx, centerPx.y + off.dy);
const latLng = map.containerPointToLatLng(pinPx);
// Connector line
window.L.polyline([center, latLng], {
color: '#14121D',
weight: 1,
opacity: 0.32,
dashArray: '2,4',
interactive: false
}).addTo(spiderLayer);
const cls =
s.isDelayed ? 'is-delay' :
s.redZone ? 'is-redzone' :
isNoTracking(s, hwStatus, driverStatus, eldStatus) ? 'is-track' : '';
const showLabel = spiderIds.length <= 30;
const icon = window.L.divIcon({
html: `${i + 1}
${showLabel ? `${s.bol}
` : ''}`,
className: '', iconSize: [24, 24], iconAnchor: [12, 12]
});
window.L.marker(latLng, { icon, zIndexOffset: 1700 + i })
.on('click', () => onSelect(id))
.addTo(spiderLayer);
});
}, [spiderIds, clusterPopover, zoomTick, hwStatus, driverStatus, eldStatus, onSelect]);
/* Red zone overlay polygons + custom circles */
useEffect(() => {
const map = mapRef.current;
if (!map) return;
const rzLayer = layerRef.current.redZones;
if (!rzLayer) return;
rzLayer.clearLayers();
// Base red-zone polygons render only when the overlay is enabled.
if (overlays && overlays.redzone) {
RED_ZONES.forEach((coords, i) => {
window.L.polygon(coords, {
color: 'transparent',
weight: 0,
fillColor: '#FF1100',
fillOpacity: 0.10,
smoothFactor: 2
}).addTo(rzLayer);
window.L.marker(zoneCentroid(coords), {
interactive: false,
keyboard: false,
icon: window.L.divIcon({
className: '',
html: '' + RED_ZONE_NAMES[i] + '
',
iconSize: [0, 0]
})
}).addTo(rzLayer);
});
// Custom user-added zones — circles or polygons depending on z.shape.
(customRedZones || []).forEach((z) => {
const style = {
color: '#FF1100',
weight: 1.5,
opacity: 0.55,
fillColor: '#FF1100',
fillOpacity: 0.14,
dashArray: '4 4'
};
if (z.shape === 'polygon' && z.vertices && z.vertices.length >= 3) {
window.L.polygon(z.vertices, style).addTo(rzLayer);
} else {
window.L.circle(z.center, { ...style, radius: z.radius_m || DEFAULT_RZ_RADIUS_M }).addTo(rzLayer);
}
const labelPos = (z.shape === 'polygon' && z.vertices && z.vertices.length >= 3)
? zoneCentroid(z.vertices) : z.center;
if (z.name && labelPos) {
window.L.marker(labelPos, {
interactive: false,
keyboard: false,
icon: window.L.divIcon({
className: '',
html: '' + z.name + '
',
iconSize: [0, 0]
})
}).addTo(rzLayer);
}
});
}
// When the user selects a shipment that's currently inside a red zone,
// draw a highlighted polygon centered on the truck so the truck + tracker
// pins visibly sit inside the zone — independent of whether the global
// red-zone overlay is on.
const sel = shipments.find((x) => x.id === selectedId);
if (sel && sel.redZone) {
const pts = routePoints(sel);
if (pts && pts.length >= 2) {
const truckPos = interpolateRoute(pts, Math.max(0.02, Math.min(0.98, (sel.pct || 50) / 100)));
// Find the nearest base polygon to borrow its organic shape; then
// translate that shape so its centroid lands on the truck position
// (the original polygons aren't guaranteed to contain the truck).
let bestIdx = -1;
let bestD = Infinity;
const centroids = RED_ZONES.map((coords) => {
let cx = 0;
let cy = 0;
coords.forEach((p) => { cx += p[0]; cy += p[1]; });
return [cx / coords.length, cy / coords.length];
});
centroids.forEach(([cx, cy], idx) => {
const d = Math.hypot(truckPos[0] - cx, truckPos[1] - cy);
if (d < bestD) { bestD = d; bestIdx = idx; }
});
if (bestIdx >= 0) {
const [cx, cy] = centroids[bestIdx];
const dx = truckPos[0] - cx;
const dy = truckPos[1] - cy;
// Scale shape down a bit so it reads as a contained zone around the
// truck instead of a vast region.
const scale = 0.35;
const shifted = RED_ZONES[bestIdx].map(([lat, lng]) => [
cx + (lat - cx) * scale + dx,
cy + (lng - cy) * scale + dy
]);
window.L.polygon(shifted, {
color: 'transparent',
weight: 0,
fillColor: '#FF1100',
fillOpacity: 0.10,
smoothFactor: 2
}).addTo(rzLayer);
}
}
}
}, [overlays && overlays.redzone, customRedZones, selectedId, shipments]);
/* Deselect the currently-chosen shipment when the user clicks empty
map (not a pin or cluster). Marker clicks do NOT propagate to the map
in Leaflet by default, so this only fires on true background clicks. */
useEffect(() => {
const map = mapRef.current;
if (!map) return;
if (addRedZoneMode || draftZone) return; // don't interfere with placement
const handler = () => { if (selectedId != null && onSelect) onSelect(null); };
map.on('click', handler);
return () => map.off('click', handler);
}, [selectedId, onSelect, addRedZoneMode, draftZone]);
/* Add-red-zone draw mode: when active, the next map click registers a
new draft zone at that location (the toolbar then takes over). */
useEffect(() => {
const map = mapRef.current;
if (!map) return;
if (!addRedZoneMode) return;
const handler = (e) => {
if (onMapClickAddRedZone) onMapClickAddRedZone([e.latlng.lat, e.latlng.lng]);
};
map.on('click', handler);
return () => map.off('click', handler);
}, [addRedZoneMode, onMapClickAddRedZone]);
/* Draft zone overlay — renders the unsaved geofence with interactive
handles (drag center / radius / vertices). Live drags mutate the leaflet
layers directly for smoothness; final values are committed to React
state on dragend so the rest of the UI (toolbar, etc.) stays in sync. */
useEffect(() => {
const map = mapRef.current;
if (!map) return;
const layer = layerRef.current.draft;
if (!layer) return;
layer.clearLayers();
if (!draftZone) return;
const sharedStyle = {
color: '#FF1100',
weight: 2,
opacity: 0.9,
fillColor: '#FF1100',
fillOpacity: 0.10,
dashArray: '6 4'
};
if (draftZone.shape === 'circle') {
const circle = window.L.circle(draftZone.center, {
...sharedStyle,
radius: draftZone.radius_m || DEFAULT_RZ_RADIUS_M,
interactive: false
}).addTo(layer);
// Center handle — drag to move the whole geofence.
const centerMarker = window.L.marker(draftZone.center, {
icon: window.L.divIcon({
className: '',
html: '
',
iconSize: [14, 14],
iconAnchor: [7, 7]
}),
draggable: true,
zIndexOffset: 2000
}).addTo(layer);
let radiusMarker = null;
const placeRadius = () => {
const pos = circleEastPoint(
[centerMarker.getLatLng().lat, centerMarker.getLatLng().lng],
circle.getRadius()
);
if (radiusMarker) radiusMarker.setLatLng(pos);
};
centerMarker.on('drag', (e) => {
const ll = e.target.getLatLng();
circle.setLatLng(ll);
placeRadius();
});
centerMarker.on('dragend', (e) => {
const ll = e.target.getLatLng();
onDraftChange((d) => d && d.shape === 'circle' ? { ...d, center: [ll.lat, ll.lng] } : d);
});
// Radius handle — east of the center, drag east/west to resize.
const radPos = circleEastPoint(draftZone.center, draftZone.radius_m || DEFAULT_RZ_RADIUS_M);
radiusMarker = window.L.marker(radPos, {
icon: window.L.divIcon({
className: '',
html: '
',
iconSize: [14, 14],
iconAnchor: [7, 7]
}),
draggable: true,
zIndexOffset: 2001
}).addTo(layer);
radiusMarker.on('drag', (e) => {
const c = centerMarker.getLatLng();
const ll = e.target.getLatLng();
const r = map.distance(c, ll);
const clamped = Math.max(MIN_RZ_RADIUS_M, Math.min(MAX_RZ_RADIUS_M, r));
circle.setRadius(clamped);
});
radiusMarker.on('dragend', (e) => {
const c = centerMarker.getLatLng();
const ll = e.target.getLatLng();
const r = map.distance(c, ll);
const clamped = Math.max(MIN_RZ_RADIUS_M, Math.min(MAX_RZ_RADIUS_M, r));
onDraftChange((d) => d && d.shape === 'circle' ? { ...d, radius_m: clamped } : d);
});
} else if (draftZone.shape === 'polygon' && draftZone.vertices) {
const verts = draftZone.vertices;
const poly = window.L.polygon(verts, { ...sharedStyle, interactive: false }).addTo(layer);
// Vertex handles — drag to reshape; shift-click or right-click to remove
// (subject to the 3-vertex floor).
verts.forEach((vp, idx) => {
const m = window.L.marker(vp, {
icon: window.L.divIcon({
className: '',
html: '
',
iconSize: [12, 12],
iconAnchor: [6, 6]
}),
draggable: true,
zIndexOffset: 2100 + idx
}).addTo(layer);
m.on('drag', (e) => {
const ll = e.target.getLatLng();
const latlngs = poly.getLatLngs()[0].slice();
latlngs[idx] = ll;
poly.setLatLngs(latlngs);
});
m.on('dragend', (e) => {
const ll = e.target.getLatLng();
onDraftChange((d) => {
if (!d || d.shape !== 'polygon') return d;
const nv = d.vertices.slice();
nv[idx] = [ll.lat, ll.lng];
return { ...d, vertices: nv };
});
});
const removeVertex = (e) => {
window.L.DomEvent.stop(e);
onDraftChange((d) => {
if (!d || d.shape !== 'polygon') return d;
if (d.vertices.length <= 3) return d;
const nv = d.vertices.slice();
nv.splice(idx, 1);
return { ...d, vertices: nv };
});
};
m.on('contextmenu', removeVertex);
m.on('click', (e) => {
if (e.originalEvent && e.originalEvent.shiftKey) removeVertex(e);
});
});
// Midpoint “+” handles between consecutive vertices — click to insert a
// new vertex at that point (up to the MAX_POLYGON_VERTICES cap).
if (verts.length < MAX_POLYGON_VERTICES) {
for (let i = 0; i < verts.length; i++) {
const a = verts[i];
const b = verts[(i + 1) % verts.length];
const mid = [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];
const insertAt = i + 1;
const mm = window.L.marker(mid, {
icon: window.L.divIcon({
className: '',
html: '
',
iconSize: [10, 10],
iconAnchor: [5, 5]
}),
draggable: false,
zIndexOffset: 1900 + i,
keyboard: false
}).addTo(layer);
mm.on('click', (e) => {
window.L.DomEvent.stop(e);
onDraftChange((d) => {
if (!d || d.shape !== 'polygon') return d;
if (d.vertices.length >= MAX_POLYGON_VERTICES) return d;
const nv = d.vertices.slice();
nv.splice(insertAt, 0, mid);
return { ...d, vertices: nv };
});
});
}
}
}
}, [draftZone, onDraftChange]);
/* Cluster popover positioning: write transform directly to the DOM node on
every map move/zoom so the popover stays glued to the cluster's
geographic anchor without triggering React re-renders during pan. */
const popoverRef = useRef(null);
useEffect(() => {
const map = mapRef.current;
if (!map || !clusterPopover) return;
const update = () => {
const el = popoverRef.current;
if (!el) return;
const px = map.latLngToContainerPoint(clusterPopover.latLng);
el.style.transform = `translate3d(${Math.round(px.x - el.offsetWidth / 2)}px, ${Math.round(px.y - el.offsetHeight - 28)}px, 0)`;
};
update();
// run after layout has been measured (popover height needs to be known)
const raf = requestAnimationFrame(update);
map.on('move', update);
map.on('zoom', update);
map.on('resize', update);
return () => {
cancelAnimationFrame(raf);
map.off('move', update);
map.off('zoom', update);
map.off('resize', update);
};
}, [clusterPopover, zoomTick]);
return (
{clusterPopover &&
}
);
}
/* ─── Saved-zone row with click-to-rename ──────────────────── */
function ZoneRow({ zone, onRename, onRemove, onZoom }) {
const [editing, setEditing] = useState(false);
const [draft, setDraft] = useState(zone.name);
const inputRef = useRef(null);
useEffect(() => {
if (editing && inputRef.current) {
inputRef.current.focus();
inputRef.current.select();
}
}, [editing]);
const commit = () => {
const trimmed = (draft || '').trim();
if (trimmed && trimmed !== zone.name && onRename) onRename(zone.id, trimmed);
setEditing(false);
setDraft(trimmed || zone.name);
};
const cancel = () => {
setEditing(false);
setDraft(zone.name);
};
return (
onZoom && onZoom(zone)}>
{zone.name}
}
{!editing &&
setEditing(true)}>
{I.pencil}
}
onRemove && onRemove(zone.id)}>
{I.trash}
);
}
/* ─── Confirm dialog ─────────────────────────────────────────── */
/* ─── Document viewer ────────────────────────────────────────────
Full-screen modal that renders a realistic mock of a shipment
document (Bill of Lading / Proof of Delivery) drawn from the
shipment's own data. Rendered into document.body so it floats
above the detail panel. */
function DocViewer({ doc, onClose }) {
const [zoom, setZoom] = useState(1);
useEffect(() => {
const onKey = (e) => {
if (e.key === 'Escape') { e.preventDefault(); onClose && onClose(); }
else if ((e.key === '+' || e.key === '=') && (e.metaKey || e.ctrlKey)) { e.preventDefault(); setZoom((z) => Math.min(2, +(z + 0.25).toFixed(2))); }
else if (e.key === '-' && (e.metaKey || e.ctrlKey)) { e.preventDefault(); setZoom((z) => Math.max(0.5, +(z - 0.25).toFixed(2))); }
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [onClose]);
const zoomOut = () => setZoom((z) => Math.max(0.5, +(z - 0.25).toFixed(2)));
const zoomIn = () => setZoom((z) => Math.min(2, +(z + 0.25).toFixed(2)));
const s = doc.s;
const isPOD = doc.kind === 'pod';
const fmtDate = (iso) => iso ? new Date(iso).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : '—';
const fmtDateTime = (iso) => iso ? new Date(iso).toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit' }) : '—';
const carrier = (s.carriers && s.carriers.find((c) => c.active)) || (s.carriers && s.carriers[0]);
const carrierName = carrier ? carrier.name : 'Assigned Carrier';
const proNumber = `PRO ${1000000 + (s.id * 748301 % 8999999)}`;
return ReactDOM.createPortal(
{ if (e.target === e.currentTarget) onClose && onClose(); }}>
{I.file}
{doc.name}
{doc.file}
setZoom(1)} title="Reset zoom">{Math.round(zoom * 100)}%
= 2} aria-label="Zoom in">
{I.download}
{I.close}
IF
Infomatics Freight
Uniform Straight Bill of Lading
{isPOD ? 'PROOF OF DELIVERY' : 'BILL OF LADING'}
{s.bol}
Ship From
{s.shipper}
{s.origin}
Ship To (Consignee)
{s.consignee}
{s.dest}
Carrier {carrierName}
Pro No. {proNumber}
{isPOD ? 'Delivered' : 'Pickup Appt'} {isPOD ? fmtDateTime(s.eta) : fmtDateTime(s.appt)}
References {(s.refs || []).join(', ') || '—'}
Handling Units Package Type Description of Articles Weight (lb)
{s.pallets || 1}
Pallet{(s.pallets || 1) > 1 ? 's' : ''}
{s.cartons ? `${s.cartons} cartons — general commodities, palletized` : 'General commodities, palletized'}
{s.wt ? s.wt.toLocaleString() : '—'}
Total
{s.wt ? `${s.wt.toLocaleString()} lb` : '—'}
{isPOD ?
{s.consignee.split(' ').map((w) => w[0]).join('')} · Received
Received in good condition by
{fmtDateTime(s.eta)}
Date & time of delivery
:
Freight Charge Terms
Received, subject to individually determined rates or contracts that have been agreed upon in writing between the carrier and shipper. This is to certify that the above named materials are properly classified, described, packaged, marked and labeled, and are in proper condition for transportation.
}
{doc.file} · Generated {fmtDate(new Date().toISOString())} · Page 1 of 1
{
// backdrop click cancels; ignore clicks that started inside the card
if (e.target === e.currentTarget) onCancel && onCancel();
}}>
{title}
{message &&
{message}
}
{cancelLabel || 'Cancel'}
{confirmLabel || 'Confirm'}
setOpen((v) => !v)}
aria-pressed={open}
aria-haspopup="menu">
{I.gear}
{open &&
Red zones
{ setOpen(false); onAddRedZone(); }}>
{I.plus}
Add red zone
Search an address or click the map.
{hasCustomZones &&
{zones.length === 1 ? '1 zone' : zones.length + ' zones'}
{zones.length > 1 &&
setPending({ kind: 'all' })}>
Clear all
}
{zones.map((z) =>
setPending({ kind: 'one', id, name: z.name })}
onZoom={zoomToZone} />
)}
}
}
{pending &&
setPending(null)}
onConfirm={() => {
if (pending.kind === 'all') onClearRedZones();
else if (pending.kind === 'one') onRemoveZone(pending.id);
setPending(null);
}} />}
);
}
/* ─── Placement banner ─────────────────────────────────────────
Appears at top of map BEFORE a draft exists. Lets the user search
an address or coordinates to drop a 250m draft, or just click the
map. */
function PlacementBanner({ onPick, onCancel }) {
const [query, setQuery] = useState('');
const inputRef = useRef(null);
useEffect(() => {
// autofocus the search so the user can start typing right away
if (inputRef.current) inputRef.current.focus();
}, []);
const coords = parseCoords(query);
const suggestions = useMemo(() => {
if (coords) return [];
const q = query.trim().toLowerCase();
if (!q) return [];
return Object.keys(CITY).filter((c) => c.toLowerCase().includes(q)).slice(0, 6);
}, [query, coords]);
const pickCity = (cityName) => {
const c = CITY[cityName];
if (!c) return;
onPick(c, cityName);
};
const submit = () => {
if (coords) {
// Coordinates don't get a meaningful auto-name — let the parent
// assign a numbered "Zone N" instead of pasting raw lat/lng.
onPick(coords);
return;
}
if (suggestions.length > 0) pickCity(suggestions[0]);
};
return (
{I.crosshair}
Place red zone
{I.search}
setQuery(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') { e.preventDefault(); submit(); }
else if (e.key === 'Escape') { e.preventDefault(); onCancel(); }
}} />
{(coords || suggestions.length > 0 || query.trim()) &&
{coords &&
{ e.preventDefault(); onPick(coords); }}>
{I.crosshair}
{coords[0].toFixed(4)}, {coords[1].toFixed(4)}
Coords
}
{!coords && suggestions.map((c) =>
{ e.preventDefault(); pickCity(c); }}>
{I.mapPin}
{c}
Address
)}
{!coords && suggestions.length === 0 && query.trim() &&
No matches. Try a city or "lat, lng".
}
}
Cancel
);
}
/* ─── Drawing toolbar ──────────────────────────────────────────
Once a draft zone exists, this toolbar lets the user tune the
geofence: rename it, switch between Circle and Polygon shapes,
adjust the radius (circle), or see the vertex count (polygon).
Save commits it to the saved-zones list; Cancel discards it. */
/* ─── Tooltip ───────────────────────────────────────────────────── */
/* Small portal-based tooltip used inside overflow:hidden toolbars where
a CSS ::after can't escape the bounding box. Anchors to the wrapping
span and positions itself above on hover/focus. */
function Tip({ text, children }) {
const ref = useRef(null);
const [pos, setPos] = useState(null);
const show = () => {
const el = ref.current;
if (!el) return;
const r = el.getBoundingClientRect();
setPos({ left: r.left + r.width / 2, top: r.top });
};
const hide = () => setPos(null);
return (
{children}
{pos && ReactDOM.createPortal(
{text}
,
document.body
)}
);
}
/* ─── DrawToolbar ───────────────────────────────────────────────── */
function DrawToolbar({ draft, onNameChange, onShapeChange, onRadiusChange, onSave, onCancel }) {
if (!draft) return null;
const isCircle = draft.shape === 'circle';
const isPoly = draft.shape === 'polygon';
const vcount = isPoly && draft.vertices ? draft.vertices.length : 0;
const atVertexCap = vcount >= MAX_POLYGON_VERTICES;
return (
{/* Row 1 — identity + save/cancel actions (always reachable) */}
{/* Row 2 — shape + measure */}
onShapeChange('circle')}
aria-pressed={isCircle}>
{I.circleShape}Circle
onShapeChange('polygon')}
aria-pressed={isPoly}
title="Polygon — up to 40 vertices">
{I.polygonShape}Polygon
{isCircle ?
:
Vertices
{vcount} / {MAX_POLYGON_VERTICES}
Drag to reshape
{I.info}
}
Map Overlays
{rows.map((r) =>
{r.ico}
{r.label}
setOverlays({ ...overlays, [r.key]: !overlays[r.key] })}
aria-pressed={overlays[r.key]} />
)}
);
}
/* ─── View Switcher (shared style with Freight Table) ─────────── */
function ViewSwitcher() {
const [active, setActive] = useState('map');
const views = [
{ key: 'table', label: 'Table View', href: 'Freight Table.html' },
{ key: 'map', label: 'Map View', href: 'Freight Map.html' }];
return (
{views.map((v) => {
const isActive = active === v.key;
const cls = `view-switcher-btn${isActive ? ' is-active' : ''}`;
if (v.href && !isActive) {
return
{v.label} ;
}
return (
setActive(v.key)} className={cls}>
{v.label}
);
})}
{icon}
setOpen((o) => !o)}
style={{ textAlign: 'left', cursor: 'pointer', width: '100%' }}>
{displayLabel}
{open &&
{value.length > 0 &&
onChange([])}
style={{
background: 'transparent', border: 0, borderBottom: '1px solid var(--line)',
padding: '6px 10px', fontSize: 11, fontWeight: 600,
color: 'var(--blue)', cursor: 'pointer', textAlign: 'left',
fontFamily: 'inherit'
}}>
Clear all
}
{visible.map((opt) => {
const checked = value.includes(opt);
return (
toggle(opt)}
style={{
display: 'flex', alignItems: 'center', gap: 8,
padding: '5px 10px', cursor: 'pointer',
background: checked ? 'rgba(255,214,2,0.12)' : 'transparent',
transition: 'background 80ms', fontSize: 12, color: 'var(--ink)'
}}
onMouseEnter={(e) => {if (!checked) e.currentTarget.style.background = '#fafafa';}}
onMouseLeave={(e) => {if (!checked) e.currentTarget.style.background = 'transparent';}}>
{opt}
);
})}
{visible.length === 0 &&
No matches
}
}
);
}
/* ─── Calendar popover (custom, styled) ────────────────────────── */
function formatDateLabel(iso) {
if (!iso) return '';
const [y, m, d] = iso.split('-').map(Number);
const dt = new Date(y, m - 1, d);
return dt.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
}
function pad2(n) { return String(n).padStart(2, '0'); }
function toIso(y, m, d) { return `${y}-${pad2(m + 1)}-${pad2(d)}`; }
function CalendarPopover({ value, onPick, onClear }) {
const today = new Date();
const seed = value ? new Date(value + 'T00:00:00') : today;
const [view, setView] = useState({ y: seed.getFullYear(), m: seed.getMonth() });
const firstOfMonth = new Date(view.y, view.m, 1);
const startDay = (firstOfMonth.getDay() + 6) % 7; // Monday-first
const daysInMonth = new Date(view.y, view.m + 1, 0).getDate();
const daysInPrev = new Date(view.y, view.m, 0).getDate();
const cells = [];
for (let i = 0; i < startDay; i++) cells.push({ d: daysInPrev - startDay + 1 + i, out: true, before: true });
for (let d = 1; d <= daysInMonth; d++) cells.push({ d, out: false });
while (cells.length % 7 !== 0 || cells.length < 42) cells.push({ d: cells.length - startDay - daysInMonth + 1, out: true, after: true });
const monthLabel = firstOfMonth.toLocaleDateString(undefined, { month: 'long', year: 'numeric' });
const nav = (delta) => setView((v) => {
const nm = v.m + delta;
return { y: v.y + Math.floor(nm / 12), m: (nm % 12 + 12) % 12 };
});
const isToday = (d) => today.getFullYear() === view.y && today.getMonth() === view.m && today.getDate() === d;
const isSelected = (d) => value === toIso(view.y, view.m, d);
return (
nav(-1)} aria-label="Previous month">
{monthLabel}
nav(1)} aria-label="Next month">
{['M','T','W','T','F','S','S'].map((w, i) => {w} )}
{cells.map((c, i) => {
if (c.out) return {c.d} ;
const cls = ['fmx-cal-cell'];
if (isToday(c.d)) cls.push('is-today');
if (isSelected(c.d)) cls.push('is-sel');
return (
onPick(toIso(view.y, view.m, c.d))}>
{c.d}
);
})}
onPick(toIso(today.getFullYear(), today.getMonth(), today.getDate()))}>Today
{value && Clear }
);
}
/* ─── Filter panel (overlays the shipment list) ─────────────────── */
function FilterPanel({ filters, setFilters, onClose, resultCount }) {
const set = (patch) => setFilters((f) => ({ ...f, ...patch }));
const [dpOpen, setDpOpen] = useState(false);
const dpRef = useRef(null);
useEffect(() => {
if (!dpOpen) return;
const onDoc = (e) => { if (dpRef.current && !dpRef.current.contains(e.target)) setDpOpen(false); };
document.addEventListener('mousedown', onDoc);
return () => document.removeEventListener('mousedown', onDoc);
}, [dpOpen]);
const toggleMode = (m) => setFilters((f) => ({
...f, modes: f.modes.includes(m) ? f.modes.filter((x) => x !== m) : [...f.modes, m]
}));
return (
Filter
{anyFilterActive(filters) && setFilters({ ...EMPTY_FILTERS })}>Reset All }
{I.close}
{/* Broker section — mobile-only per Figma */}
Carrier
set({ carrier: v })} />
Retailer
set({ retailer: v })} />
Locations
set({ origin: v })} />
set({ dest: v })} />
set({ transit: v })} />
Mode
{[['air', 'Air'], ['ground', 'Ground'], ['sea', 'Sea']].map(([k, l]) =>
toggleMode(k)}>{l}
)}
Date Range
{[['all', 'All Time'], ['7', 'Last 7 days'], ['30', 'Last 30 days'], ['90', 'Last 3 months']].map(([k, l]) =>
)}
{I.calendar}
setDpOpen((o) => !o)}
aria-haspopup="dialog"
aria-expanded={dpOpen}>
{filters.datePick ? formatDateLabel(filters.datePick) : 'Pick a date'}
{dpOpen &&
{ set({ datePick: iso, dateRange: '' }); setDpOpen(false); }}
onClear={() => { set({ datePick: '' }); setDpOpen(false); }} />
}
);
}
/* ─── Sort panel (overlays the shipment list) ───────────────────── */
function SortPanel({ sort, setSort, onClose }) {
const set = (patch) => setSort((s) => ({ ...s, ...patch }));
const groupOpts = [['none', 'None'], ['broker', 'Broker'], ['carrier', 'Carrier'], ['consignee', 'Consignee']];
const sortOpts = [['none', 'None'], ['appt', 'Appointment date'], ['eta', 'ETA'], ['risk', 'Risk Level'], ['created', 'BOL date']];
return (
Sort & Group
{(sort.groupBy !== 'none' || sort.sortBy !== 'none') && setSort({ ...EMPTY_SORT })}>Reset All }
{I.close}
);
}
/* ─── App ───────────────────────────────────────────────────────── */
function App() {
const [tw, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
// Mirror to a global so standalone helpers (STAT_MATCH / ShipmentCard) can
// see current tweak state without prop-drilling.
window.__fmxTweaks = tw;
const [search, setSearch] = useState('');
const [activeTabs, setActiveTabs] = useState(DEFAULT_TABS);
const [selectedId, setSelectedId] = useState(null);
// Simulated data-fetch loading state. When a card is clicked we kick off a
// short delay before the tracker / detail data is "ready"; during that
// window a thin progress bar at the top of the map signals loading,
// mirroring the latency of the real backend.
const [loadingId, setLoadingId] = useState(null);
const loadingTimerRef = useRef(null);
const handleSelect = useCallback((id) => {
setDetailHidden(false);
if (loadingTimerRef.current) {
clearTimeout(loadingTimerRef.current);
loadingTimerRef.current = null;
}
if (id == null) {
setLoadingId(null);
setSelectedId(null);
return;
}
setSelectedId(id);
setLoadingId(id);
// Simulated fetch. Default is a random-ish 900–1500ms so the loading bar
// shows realistically; the Loading simulation tweak can slow it down,
// skip it, or hold it open indefinitely.
const mode = (latencyRef.current in FETCH_LATENCY) ? latencyRef.current : 'default';
const delay = FETCH_LATENCY[mode]();
if (delay === null) return; // held open until the tweak changes or another card is clicked
loadingTimerRef.current = setTimeout(() => {
setLoadingId((cur) => cur === id ? null : cur);
loadingTimerRef.current = null;
}, delay);
}, []);
const latencyRef = useRef(tw.fetchLatency);
latencyRef.current = tw.fetchLatency;
// Leaving 'stuck' releases whatever load is being held open.
useEffect(() => {
if (tw.fetchLatency !== 'stuck') return;
return () => setLoadingId(null);
}, [tw.fetchLatency]);
const selectedIdRef = useRef(null);
selectedIdRef.current = selectedId;
const replayLoading = useCallback(() => {
if (selectedIdRef.current != null) handleSelect(selectedIdRef.current);
}, [handleSelect]);
useEffect(() => () => {
if (loadingTimerRef.current) clearTimeout(loadingTimerRef.current);
}, []);
const [overlays, setOverlays] = useState({ redzone: false, traffic: false, weather: false });
// Custom red zones the user has SAVED. Each entry is
// { id, name, shape: 'circle'|'polygon', center, radius_m, vertices } —
// shape determines which fields are populated. New zones go to the front so
// the most-recent zone is listed first in the settings menu.
const [customRedZones, setCustomRedZones] = useState([]);
// The in-progress (unsaved) zone being placed/adjusted. Same shape as a
// saved zone but lives separately so Save/Cancel can commit or discard.
const [draftZone, setDraftZone] = useState(null);
// `addRedZoneMode` is the placement entry state: the user has hit "Add red
// zone" but no point has been dropped yet. The next map click or address
// search promotes things to a draft. Once a draft exists, the drawing
// toolbar takes over and `addRedZoneMode` is no longer relevant.
const [addRedZoneMode, setAddRedZoneMode] = useState(false);
const startAddRedZone = useCallback(() => {
setAddRedZoneMode(true);
// Auto-enable the red-zone overlay so the new zone is immediately visible.
setOverlays((o) => o.redzone ? o : { ...o, redzone: true });
}, []);
const cancelAddRedZone = useCallback(() => {
setAddRedZoneMode(false);
setDraftZone(null);
}, []);
// Find the nearest CITY entry to a click point so a zone has a meaningful name.
const nearestCityName = useCallback((center) => {
let best = null;
let bestD = Infinity;
const [lat, lng] = center;
for (const name of Object.keys(CITY)) {
const [clat, clng] = CITY[name];
const dy = (clat - lat);
const dx = (clng - lng) * Math.cos(lat * Math.PI / 180);
const d = dy * dy + dx * dx;
if (d < bestD) { bestD = d; best = name; }
}
// Roughly 1.5° at mid-latitudes — if the click is far from any known city,
// fall back to a generic label.
if (bestD > 2.25) return null;
return best;
}, []);
// Start a fresh draft at `center`, autoname it, and zoom the map in so the
// 250m default circle is actually visible. This is the entry point used by
// BOTH the map-click and address-search flows. Map clicks have no explicit
// name and get an incrementing "Zone N" label rather than coordinates.
const beginDraftAt = useCallback((center, explicitName) => {
const nextZoneName = () => {
// Find the highest existing "Zone N" suffix among saved zones so the
// next draft picks the next free number.
let max = 0;
(customRedZones || []).forEach((z) => {
const m = /^Zone\s+(\d+)$/i.exec((z.name || '').trim());
if (m) max = Math.max(max, parseInt(m[1], 10));
});
return `Zone ${max + 1}`;
};
const name = explicitName || nextZoneName();
const makeDraft = () => setDraftZone({
name,
shape: 'circle',
center,
radius_m: DEFAULT_RZ_RADIUS_M,
vertices: null
});
setAddRedZoneMode(false);
// Make sure the red-zone overlay is on so the draft is rendered.
setOverlays((o) => o.redzone ? o : { ...o, redzone: true });
const map = mapApiRef.current;
if (map) {
// Smoothly fly in first, then drop the red zone draft once we've
// landed at the new zoom — otherwise the circle pops in at the
// current (zoomed-out) view and flashes red across the map.
const targetZoom = Math.max(map.getZoom() || 5, 14);
map.once('moveend', makeDraft);
map.flyTo(center, targetZoom, { duration: 1.1, easeLinearity: 0.25 });
} else {
makeDraft();
}
}, [customRedZones]);
// Convert the in-progress draft between circle and polygon shapes,
// preserving area as well as possible across the switch.
const setDraftShape = useCallback((shape) => {
setDraftZone((d) => {
if (!d || d.shape === shape) return d;
if (shape === 'polygon') {
const verts = circleToPolygon(
d.center,
d.radius_m || DEFAULT_RZ_RADIUS_M,
INITIAL_POLYGON_VERTICES
);
return { ...d, shape: 'polygon', vertices: verts, radius_m: null };
} else {
// polygon → circle: use centroid + mean radius
const c = polygonCentroid(d.vertices || []);
const lat0 = c[0] * Math.PI / 180;
const earth = 6378137;
let sum = 0;
(d.vertices || []).forEach((p) => {
const dlat = (p[0] - c[0]) * Math.PI / 180;
const dlng = (p[1] - c[1]) * Math.PI / 180;
const dy = dlat * earth;
const dx = dlng * earth * Math.cos(lat0);
sum += Math.sqrt(dy * dy + dx * dx);
});
const r = (sum / ((d.vertices || []).length || 1)) || DEFAULT_RZ_RADIUS_M;
return { ...d, shape: 'circle', center: c, radius_m: r, vertices: null };
}
});
}, []);
const updateDraftRadius = useCallback((r) => {
setDraftZone((d) => {
if (!d || d.shape !== 'circle') return d;
const clamped = Math.max(MIN_RZ_RADIUS_M, Math.min(MAX_RZ_RADIUS_M, r));
return { ...d, radius_m: clamped };
});
}, []);
const updateDraftName = useCallback((name) => {
setDraftZone((d) => d ? { ...d, name } : d);
}, []);
const commitDraft = useCallback(() => {
setDraftZone((d) => {
if (!d) return d;
const safeName = (d.name || '').trim() || 'New red zone';
setCustomRedZones((zs) => [{
id: 'rz-' + Date.now(),
name: safeName,
shape: d.shape,
center: d.center,
radius_m: d.radius_m,
vertices: d.vertices
}, ...zs]);
return null;
});
}, []);
const cancelDraft = useCallback(() => {
setDraftZone(null);
setAddRedZoneMode(false);
}, []);
// Click on map either places the very first point of a draft (addRedZoneMode)
// or, if a draft already exists in polygon mode, is a no-op (vertex edits
// happen via the per-vertex handles to avoid stray clicks adding points).
const handleMapClickAddRedZone = useCallback((center) => {
if (draftZone) return;
if (!addRedZoneMode) return;
beginDraftAt(center);
}, [addRedZoneMode, draftZone, beginDraftAt]);
const removeRedZone = useCallback((id) => {
setCustomRedZones((zs) => zs.filter((z) => z.id !== id));
}, []);
const renameRedZone = useCallback((id, name) => {
const trimmed = (name || '').trim();
if (!trimmed) return;
setCustomRedZones((zs) => zs.map((z) => z.id === id ? { ...z, name: trimmed } : z));
}, []);
const clearCustomRedZones = useCallback(() => setCustomRedZones([]), []);
// Esc cancels either the placement step or the in-progress draft.
useEffect(() => {
if (!addRedZoneMode && !draftZone) return;
const onKey = (e) => {
if (e.key === 'Escape') {
setAddRedZoneMode(false);
setDraftZone(null);
}
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [addRedZoneMode, draftZone]);
const [activeStats, setActiveStats] = useState([]);
const [filters, setFilters] = useState({ ...EMPTY_FILTERS });
const [clusterFilter, setClusterFilter] = useState(null);
const [filtersOpen, setFiltersOpen] = useState(false);
const [sortOpen, setSortOpen] = useState(false);
// Mobile bottom-sheet collapsed state — starts collapsed on narrow viewports
const [listCollapsed, setListCollapsed] = useState(
typeof window !== 'undefined' && window.innerWidth <= 768
);
// Mobile-only: whether the Map Overlays popover is open
const [mobileOverlaysOpen, setMobileOverlaysOpen] = useState(false);
// Info-hint tooltip on the map
const [infoHintOpen, setInfoHintOpen] = useState(false);
const [infoHintPos, setInfoHintPos] = useState(null); // {top, left, targetRect}
// When info hint opens, locate a cluster pin, highlight it, and anchor
// the callout above-left of it.
useEffect(() => {
if (!infoHintOpen) { setInfoHintPos(null); return; }
const compute = () => {
const mapEl = document.querySelector('.fmx-map');
if (!mapEl) return;
const mapRect = mapEl.getBoundingClientRect();
// Prefer a cluster; fall back to any current pin
const pins = Array.from(mapEl.querySelectorAll('.fmx-pin.is-current.is-cluster'));
const chosen = pins[0] || mapEl.querySelector('.fmx-pin.is-current');
if (!chosen) return;
// Mark it for the red ring
mapEl.querySelectorAll('.fmx-pin.is-hinted').forEach((n) => n.classList.remove('is-hinted'));
chosen.classList.add('is-hinted');
const pinRect = chosen.getBoundingClientRect();
const relLeft = pinRect.left - mapRect.left;
const relTop = pinRect.top - mapRect.top;
// Place callout above and slightly to the left of the pin
const calloutW = Math.min(320, mapRect.width - 32);
let left = relLeft + pinRect.width / 2 - calloutW + 30;
left = Math.max(12, Math.min(left, mapRect.width - calloutW - 12));
const top = Math.max(12, relTop - 12 - 130);
setInfoHintPos({ top, left, width: calloutW, tailLeft: (relLeft + pinRect.width / 2) - left });
};
compute();
const onResize = () => compute();
window.addEventListener('resize', onResize);
const t = setInterval(compute, 500); // re-anchor if the map pans/zooms
return () => {
window.removeEventListener('resize', onResize);
clearInterval(t);
document.querySelectorAll('.fmx-pin.is-hinted').forEach((n) => n.classList.remove('is-hinted'));
};
}, [infoHintOpen]);
const [sort, setSort] = useState({ ...EMPTY_SORT });
const [pinnedIds, setPinnedIds] = useState([]);
const [collapsedGroups, setCollapsedGroups] = useState({});
const [clusterPopover, setClusterPopover] = useState(null);
const [spiderIds, setSpiderIds] = useState(null);
const toggleGroup = (label) => setCollapsedGroups((c) => ({ ...c, [label]: !c[label] }));
const mapApiRef = useRef(null);
const filtered = useMemo(() => {
let arr = SHIPMENTS;
// Cluster filter wins over everything else — it represents an explicit
// drilldown into a group of nearby shipments on the map.
if (clusterFilter && clusterFilter.length) {
arr = arr.filter((s) => clusterFilter.includes(s.id));
} else if (activeStats.length) {
// Needs-attention tags drive the list (OR among active tags). When none
// are active, fall back to the status tabs.
arr = arr.filter((s) => activeStats.some((k) => STAT_MATCH[k] && STAT_MATCH[k](s)));
} else if (activeTabs.length) {
arr = arr.filter((s) => activeTabs.includes(s.status));
}
if (search.trim()) {
const q = search.trim().toLowerCase();
arr = arr.filter((s) => [s.bol, s.origin, s.dest, s.shipper, s.consignee, ...(s.refs || [])].join(' ').toLowerCase().includes(q));
}
// Filter-panel criteria (broker / carrier / mode / date) — AND on top.
if (filters.carrier && filters.carrier.length) {
arr = arr.filter((s) => (s.carriers || []).some((c) => filters.carrier.includes(c.name)));
}
if (filters.retailer && filters.retailer.length) {
arr = arr.filter((s) => filters.retailer.includes(s.retailer));
}
if (filters.origin && filters.origin.length) {
arr = arr.filter((s) => filters.origin.includes(s.origin));
}
if (filters.dest && filters.dest.length) {
arr = arr.filter((s) => filters.dest.includes(s.dest));
}
if (filters.transit && filters.transit.length) {
arr = arr.filter((s) => filters.transit.includes(s.origin) || filters.transit.includes(s.dest));
}
if (filters.modes.length) {
arr = arr.filter((s) => filters.modes.includes(modeOf(s)));
}
if (filters.dateRange || filters.datePick) {
arr = arr.filter((s) => matchesDate(s, filters.dateRange, filters.datePick));
}
return arr;
}, [search, activeTabs, activeStats, clusterFilter, filters]);
// Pinned shipments are surfaced at the top and stay visible regardless of
// the active filters; the rest follow in normal filtered order.
const displayList = useMemo(() => {
let base = filtered;
const cmp = sortComparator(sort.sortBy);
if (cmp) base = [...base].sort(cmp);
if (!pinnedIds.length) return base;
const pinnedSet = new Set(pinnedIds);
const pinned = pinnedIds.map((id) => SHIPMENTS.find((x) => x.id === id)).filter(Boolean);
const rest = base.filter((s) => !pinnedSet.has(s.id));
return [...pinned, ...rest];
}, [filtered, pinnedIds, sort.sortBy]);
// When grouping is active, partition the displayList into ordered groups
// (first-seen wins) so the list visibly reorders under section headers.
const groupedList = useMemo(() => {
if (sort.groupBy === 'none') return null;
const map = new Map();
displayList.forEach((s) => {
const k = groupKeyFor(s, sort.groupBy);
if (!map.has(k)) map.set(k, []);
map.get(k).push(s);
});
return Array.from(map, ([label, items]) => ({ label, items }));
}, [displayList, sort.groupBy]);
const togglePin = (id) => setPinnedIds((cur) => cur.includes(id) ? cur.filter((x) => x !== id) : [...cur, id]);
const filtersActive = anyFilterActive(filters);
const clearFilters = () => setFilters({ ...EMPTY_FILTERS });
const toggleTab = (key) => setActiveTabs((cur) => cur.includes(key) ? cur.filter((k) => k !== key) : [...cur, key]);
const toggleStat = (key) => setActiveStats((cur) => cur.includes(key) ? cur.filter((k) => k !== key) : [...cur, key]);
const reset = () => {setActiveStats([]);setActiveTabs([]);setSearch('');setClusterFilter(null);setClusterPopover(null);setSpiderIds(null);};
const onClusterClick = useCallback((ids, bounds, center) => {
setClusterFilter(ids);
setSelectedId(null);
setSpiderIds(null);
// Use the cluster center as the popover anchor (not bounds — many
// clusters have all pins at the same lat/lng so bounds is degenerate).
setClusterPopover({
ids,
bounds,
latLng: window.L.latLng(center[0], center[1])
});
// Also zoom in on the cluster area so the user lands focused on it. If
// every pin sits at the same lat/lng (degenerate bounds), just bump zoom
// around the cluster center instead of fitting to a zero-area box.
const map = mapApiRef.current;
if (!map) return;
const dy = bounds && bounds.length ? Math.max(...bounds.map((p) => p[0])) - Math.min(...bounds.map((p) => p[0])) : 0;
const dx = bounds && bounds.length ? Math.max(...bounds.map((p) => p[1])) - Math.min(...bounds.map((p) => p[1])) : 0;
const isDegenerate = dy < 0.05 && dx < 0.05;
if (bounds && bounds.length > 1 && !isDegenerate) {
map.flyToBounds(bounds, { padding: [160, 160], duration: 0.5, maxZoom: 11 });
} else {
const target = Math.min(11, Math.max((map.getZoom() || 4) + 2, 8));
map.flyTo([center[0], center[1]], target, { duration: 0.5 });
}
}, []);
const closeClusterPopover = useCallback(() => {
setClusterPopover(null);
setSpiderIds(null);
}, []);
const spreadCluster = useCallback(() => {
if (!clusterPopover) return;
setSpiderIds(clusterPopover.ids);
}, [clusterPopover]);
const collapseCluster = useCallback(() => {
setSpiderIds(null);
}, []);
const zoomCluster = useCallback(() => {
if (!clusterPopover) return;
const map = mapApiRef.current;
if (!map) return;
const { bounds } = clusterPopover;
if (bounds && bounds.length > 1) {
// Add tiny jitter so degenerate (all-identical) bounds still pan to point
const padded = bounds.map((p, i) => [p[0] + i * 1e-5, p[1] + i * 1e-5]);
map.flyToBounds(padded, { padding: [120, 120], duration: 0.5, maxZoom: 12 });
} else {
map.flyTo(clusterPopover.latLng, Math.min(12, (map.getZoom() || 4) + 3), { duration: 0.5 });
}
}, [clusterPopover]);
useEffect(() => {
const onKey = (e) => {
if (e.key !== 'Escape') return;
if (clusterPopover) {
setClusterPopover(null);
setSpiderIds(null);
return;
}
setSelectedId(null);
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [clusterPopover]);
// Clear popover/spider whenever the user selects a shipment (the right
// panel takes over and per-shipment trackers replace the spider pins).
useEffect(() => {
if (selectedId != null) {
setClusterPopover(null);
setSpiderIds(null);
}
}, [selectedId]);
// Deep-link handler: ?bol=...&openDetail=true selects a shipment, opens its
// detail panel, and scrolls the matching card into view in the left list.
useEffect(() => {
const params = new URLSearchParams(window.location.search);
const bolParam = params.get('bol');
const openDetail = params.get('openDetail') === 'true';
if (!bolParam) return;
const match = SHIPMENTS.find((x) => x.bol === bolParam);
if (!match) return;
if (openDetail) setSelectedId(match.id);
// Defer scroll until cards have rendered.
const tries = [60, 180, 360];
tries.forEach((delay) => setTimeout(() => {
const card = document.querySelector(`.fmx-card[data-bol="${CSS.escape(bolParam)}"]`);
const list = document.querySelector('.fmx-cards');
if (card && list) {
const offset = card.offsetTop - list.offsetTop - 16;
list.scrollTop = Math.max(0, offset);
}
}, delay));
}, []);
// Command Center "View on map" bridge: the CC iframe posts { ccViewOnMap: ref };
// resolve it to a shipment (by bol/ref, else the first red-zone unit) and open it.
useEffect(() => {
const onMsg = (e) => {
if (!e.data || !e.data.ccViewOnMap) return;
const ref = String(e.data.ccViewOnMap);
let match = SHIPMENTS.find((x) => x.bol === ref || (x.refs || []).includes(ref));
if (!match) match = SHIPMENTS.find((x) => x.redZone);
if (!match) return;
setClusterPopover(null);
setSpiderIds(null);
handleSelect(match.id);
};
window.addEventListener('message', onMsg);
return () => window.removeEventListener('message', onMsg);
}, [handleSelect]);
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const [detailHidden, setDetailHidden] = useState(false);
const [railExpanded, setRailExpanded] = useState(() => {
try { return localStorage.getItem('fmx-rail-expanded') === '1'; } catch (e) { return false; }
});
useEffect(() => {
try { localStorage.setItem('fmx-rail-expanded', railExpanded ? '1' : '0'); } catch (e) {}
}, [railExpanded]);
const [sbCollapsed, setSbCollapsed] = useState(() => {
try { const v = localStorage.getItem('broker-sidebar-collapsed'); return v === null ? true : v === '1'; } catch (e) { return true; }
});
const toggleSb = () => setSbCollapsed((c) => {
const n = !c;
try { localStorage.setItem('broker-sidebar-collapsed', n ? '1' : '0'); } catch (e) {}
return n;
});
const [shipmentsOpen, setShipmentsOpen] = useState(true);
const RAIL_NAV = [
{ ico: I.map, label: 'Map', active: true, href: 'Freight Map.html' },
{ ico: I.layers, label: 'Table', href: 'Freight Table.html' },
{ ico: I.pkg, label: 'Shipments', href: 'Freight Table.html' },
{ ico: I.chart, label: 'Analytics', href: '#' },
{ ico: I.users, label: 'Team', href: '#' },
{ ico: I.shuffle, label: 'Routing', href: '#' },
{ ico: I.gear, label: 'Settings', href: '#' }];
return (
{/* Broker sidebar — shared with Freight Table etc. */}
DV
Diana Vega Broker · Alfred Logistics
{/* Mobile black status bar with menu (hidden on desktop) */}
setMobileMenuOpen(true)}>
{mobileMenuOpen &&
{ if (e.target === e.currentTarget) setMobileMenuOpen(false); }}>
}
{/* Mobile topbar: breadcrumb + notifications.
Hidden on desktop via CSS. */}
All Shipments
Freight
e.preventDefault()}>
3
{/* Header: brand + needs attention */}
{/* Body */}
{/* Icon toolbar */}
{setSortOpen(false);setFiltersOpen((o) => !o);}}>{I.filter}
{setFiltersOpen(false);setSortOpen((o) => !o);}}>{I.sort}
{I.plus}
{/* Filter / Sort panels — sit between toolbar and list, never replace it */}
{filtersOpen &&
setFiltersOpen(false)}
resultCount={filtered.length} />
}
{sortOpen &&
setSortOpen(false)} />
}
{/* Shipment list */}
{
const el = e.currentTarget;
el._dragY = e.clientY;
el._dragMoved = false;
try { el.setPointerCapture(e.pointerId); } catch (_) {}
}}
onPointerMove={(e) => {
const el = e.currentTarget;
if (el._dragY == null) return;
const dy = e.clientY - el._dragY;
if (Math.abs(dy) > 6) {
el._dragMoved = true;
if (dy < 0 && listCollapsed) setListCollapsed(false);
else if (dy > 0 && !listCollapsed) setListCollapsed(true);
el._dragY = null;
}
}}
onPointerUp={(e) => {
const el = e.currentTarget;
try { el.releasePointerCapture(e.pointerId); } catch (_) {}
if (!el._dragMoved) setListCollapsed((c) => !c);
el._dragY = null;
el._dragMoved = false;
}}>
Shipments
{filtered.length} of {SHIPMENTS.length}
{clusterFilter && clusterFilter.length > 0 &&
Cluster view · {clusterFilter.length} shipments
setClusterFilter(null)}>Clear
}
{I.search}
{TABS.map((t) =>
toggleTab(t.key)}>
{t.label}
)}
{const el = e.currentTarget;el.classList.add('is-scrolling');clearTimeout(el._st);el._st = setTimeout(() => el.classList.remove('is-scrolling'), 700);}}>
{displayList.length === 0 &&
No shipments match.
}
{groupedList ?
groupedList.map((g) => {
const collapsed = !!collapsedGroups[g.label];
const delayed = g.items.filter((x) => x.isDelayed).length;
const noTrk = g.items.filter((x) => isNoTracking(x)).length;
return (
toggleGroup(g.label)}>
{I.chevron}
{g.label}
{g.items.length}
{(noTrk > 0 || delayed > 0) &&
{noTrk > 0 && {noTrk} no tracking }
{delayed > 0 && {delayed} delayed }
}
{!collapsed && g.items.map((s) =>
);
}) :
displayList.map((s) =>
)
}
{/* Shipment detail panel */}
{selectedId != null && !detailHidden &&
x.id === selectedId)}
onClose={() => handleSelect(null)}
onViewOnMap={() => {
setDetailHidden(true);
setListCollapsed(true);
// After the sheet collapses, Leaflet needs to remeasure
// and re-fit the shipment's origin↔destination bounds.
setTimeout(() => {
const map = mapApiRef.current;
if (!map) return;
map.invalidateSize();
const s = SHIPMENTS.find((x) => x.id === selectedId);
if (!s) return;
const o = CITY[s.origin]; const d = CITY[s.dest];
if (o && d) map.flyToBounds([o, d], { padding: [70, 70], duration: 0.5 });
}, 260);
}}
hwStatus={tw.hwStatus}
driverStatus={tw.driverStatus}
eldStatus={tw.eldStatus}
mapApiRef={mapApiRef} />
}
{/* Map */}
{loadingId === selectedId && selectedId != null &&
}
{addRedZoneMode && !draftZone &&
beginDraftAt(center, name)}
onCancel={cancelAddRedZone} />
}
{draftZone &&
setMobileOverlaysOpen(false)} />
{/* Mobile-only: layers button that opens the overlays popover */}
setMobileOverlaysOpen((o) => !o)}>
{const el = document.querySelector('.fmx-map');if (el && el.requestFullscreen) el.requestFullscreen();}}>{I.maximize}
mapApiRef.current && mapApiRef.current.zoomIn()}>{I.zoomIn}
mapApiRef.current && mapApiRef.current.zoomOut()}>{I.zoomOut}
setInfoHintOpen((o) => !o)} aria-pressed={infoHintOpen}>{I.info}
{infoHintOpen && infoHintPos &&
The red icon with a number shows the total number of shipments. If the icon is red, it means that some of these shipments have alerts that need your attention.
1/1
setInfoHintOpen(false)}>{I.close}
}
{/* Tweaks panel */}
setTweak('hwStatus', v)} />
setTweak('driverStatus', v)} />
setTweak('eldStatus', v)} />
setTweak('fetchLatency', v)} />
{/* Mobile home indicator — hidden on desktop */}