SCAC	Empty
{s}	{n}

SCAC

Empty

{s}

{n}

Ref #	Dir	Carrier	Status	Age
{r[0]}	{r[1]}	{r[2]}	{r[3]}	{r[4]}

Ref #

Dir

Carrier

Status

Age

{r[0]}

{r[1]}

{r[2]}

{r[3]}

{r[4]}

Driver Name ↑	Shipment	Trailer #	SCAC	Type	Shipment Type	Trailer Status	Appointment	Check-in	MDT	Status
{r[0]}	{r[1]}	{r[2]}	{r[3]}	{r[4] === 'OB' ? 'Outbound' : 'Inbound'}	{r[5]}	{r[6]}	{r[7]}	{r[8]}	{r[9]}	{r[10]}

Driver Name ↑

Shipment

Trailer #

SCAC

Type

Shipment Type

Trailer Status

Appointment

Check-in

MDT

Status

{r[0]}

{r[1]}

{r[2]}

{r[3]}

{r[4] === 'OB' ? 'Outbound' : 'Inbound'}

{r[5]}

{r[6]}

{r[7]}

{r[8]}

{r[9]}

{r[10]}

Trailer / SCAC	Status	Shipment Ref	Check-In Time	Current Location	Actions
{r.trailer}{r.locked && LOCKED} {r.scac}	{r.status}	{r.ref}	{r.time}	{r.loc}	{r.locked && }

Trailer / SCAC

Status

Shipment Ref

Check-In Time

Current Location

Actions

{r.trailer}{r.locked && LOCKED}

{r.scac}

{r.status}

{r.ref}

{r.time}

{r.loc}

{r.locked && }

T#	SCAC	Trailer	Dir	Type	Trailer Status	Appointment	Current Location	State	Actions
{r.t}	{r.scac}	{r.trailer}	{r.dir === 'OB' ? 'Outbound' : 'Inbound'}	{r.kind}	{r.status === 'EMPTY' ? EMPTY : r.status === 'LOADED' ? LOADED : {r.status}}	{r.appt}	{r.loc}	{r.state}

SCAC

Trailer

Dir

Type

Trailer Status

Appointment

Current Location

State

Actions

{r.t}

{r.scac}

{r.trailer}

{r.dir === 'OB' ? 'Outbound' : 'Inbound'}

{r.kind}

{r.status === 'EMPTY' ? EMPTY : r.status === 'LOADED' ? LOADED : {r.status}}

{r.appt}

{r.loc}

{r.state}

Timestamp	Event	Actor	Location	Detail
{e.ts}	{e.ev}	{e.actor}	{e.loc}	{e.det}

Timestamp

Event

Actor

Location

Detail

{e.ts}

{e.ev}

{e.actor}

{e.loc}

{e.det}

Task ID	Type	From → To	Trailer / SCAC	Assignee	Created	State	Actions
{r.id}	{r.type}	{r.from} → {r.to}	{r.trailer} · {r.scac}	{r.assignee}	{r.created}	{stateChip(r.state)}	{r.state === 'OPEN' && }

Task ID

Type

From → To

Trailer / SCAC

Assignee

Created

State

Actions

{r.id}

{r.type}

{r.from} → {r.to}

{r.trailer} · {r.scac}

{r.assignee}

{r.created}

{stateChip(r.state)}

{r.state === 'OPEN' && }

Code	Facility	City	Region	Docks	Yard Spots	Status	Actions
{f.code}	{f.name}	{f.city}	{f.region}	{f.docks}	{f.spots}	{statusChip(f.status)}

Code

Facility

City

Region

Docks

Yard Spots

Status

Actions

{f.code}

{f.name}

{f.city}

{f.region}

{f.docks}

{f.spots}

{statusChip(f.status)}

{ if (e.target === e.currentTarget) setDrilled(null); }}>

{f.code} · {f.name}

{f.city} · {f.region} setDrilled(null)}>✕

Status: {status === 'op' && ● Operational} {status === 'warn' && ● Throughput strain} {status === 'crit' && ● Critical} Throughput: {status === 'crit' ? '52% capacity' : status === 'warn' ? '78% capacity' : '94% capacity'} Docks: {f.docks} ({Math.round(f.docks * (status === 'crit' ? 0.95 : 0.70))} occupied) Yard spots: {f.spots} ({Math.round(f.spots * (status === 'crit' ? 0.88 : 0.55))} occupied) Active drivers: {status === 'crit' ? 47 : status === 'warn' ? 28 : 19} on site Pending tasks: {status === 'crit' ? 38 : status === 'warn' ? 12 : 5} in spotter queue

Live feeds

{/* flowTWIN mini-tile */}

flowTWIN ● LIVE

{[1,2,3,4,5].map(i => (

))}

● FRAME 1,247 · 3.0 km/h

{/* flowGATE mini-tile */}

flowGATE ● LIVE

SETTLED · trailer 498625

Last sync · 14:42:08 UTC

); })()} ); }; // VIEW · User Management const UserMgtView = () => { const initials = (n) => n.split(' ').map(p => p[0]).slice(0,2).join(''); const users = [ { name: 'Allison Stafford', email: 'allison.stafford@primobrands.com', role: 'Ops Lead', facility: 'PWN-04', lastLogin: '2 min ago', status: 'Active' }, { name: 'Michael Okafor', email: 'michael.okafor@primobrands.com', role: 'Spotter', facility: 'PWN-04', lastLogin: '14 min ago', status: 'Active' }, { name: 'Joon Park', email: 'joon.park@primobrands.com', role: 'Gate Guard', facility: 'PWN-04', lastLogin: '22 min ago', status: 'Active' }, { name: 'Rosa Alvarez', email: 'rosa.alvarez@primobrands.com', role: 'Dock Office Mgr', facility: 'PWN-12', lastLogin: '1 hr ago', status: 'Active' }, { name: 'Devin Hall', email: 'devin.hall@primobrands.com', role: 'Network Admin', facility: 'All', lastLogin: 'Yesterday', status: 'Active' }, { name: 'Casey Larkin', email: 'casey@freightroll.com', role: 'FreightRoll Admin', facility: 'All', lastLogin: '3 min ago', status: 'Active' }, { name: 'Witold Podolak', email: 'witold.p@external.io', role: 'Driver', facility: 'PWN-04', lastLogin: '5 days ago', status: 'Suspended' }, { name: 'Etwone Offord', email: 'etwone.offord@external.io', role: 'Driver', facility: 'PWN-04', lastLogin: '2 hr ago', status: 'Active' }, ]; const statusChip = (s) => s === 'Active' ? ● Active : s === 'Suspended'? ● Suspended : s === 'Invited' ? ● Invited : {s}; const roleChip = (r) => { if (r.includes('Admin')) return {r}; if (r === 'Ops Lead') return {r}; if (r === 'Driver') return {r}; return {r}; }; return ( <>

User Management

{users.length} users · manage roles, facility access, and login state

{users.length} users

{users.map(u => ( ))}

User	Role	Facility	Last Login	Status	Actions
{initials(u.name)} {u.name} {u.email}	{roleChip(u.role)}	{u.facility}	{u.lastLogin}	{statusChip(u.status)}

); }; // ══════════════════════════════════════════════════════════════════ // MODAL SYSTEM // ══════════════════════════════════════════════════════════════════ const Modal = ({ title, sub, onClose, footer, wide = false, children }) => { useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); document.body.style.overflow = 'hidden'; return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = ''; }; }, [onClose]); return (

{ if (e.target === e.currentTarget) onClose(); }}>

{title}

{sub && {sub}}

{children}

{footer &&

{footer}

}

); }; const DestinationTypes = [ { key: 'dock', label: 'Dock' }, { key: 'yard', label: 'Yard' }, { key: 'facility',label: 'Facility' }, { key: 'leave', label: 'Leave Facility' }, ]; // — Move Trailer modal ------------------------------------------------ const MoveTrailerModal = ({ ctx, onClose }) => { const [dest, setDest] = useState(ctx?.suggestedDest || 'yard'); const [loc, setLoc] = useState(''); const options = { dock: ['D03', 'D04', 'D05', 'D12', 'D21', 'D25', 'D26', 'D28'], yard: ['Yard: 02', 'Yard: 05', 'Yard: 11', 'Yard: 15', 'Yard: 20', 'Yard: 22'], facility: ['PWN-12 · Hollis', 'PWN-21 · Allentown', 'PWN-33 · Madison DC'], leave: ['Gate G01 · Outbound'], }; return ( Only available destinations are shown } > {ctx && (

Trailer: {ctx.trailer || '—'} SCAC: {ctx.scac || '—'} Status: {ctx.status || 'EMPTY'} Current loc: {ctx.from || '—'}

)}

Destination Type *

{DestinationTypes.map(t => (

{ setDest(t.key); setLoc(''); }}> {t.label}

))}

Destination Location *

Notes (optional)

); }; // — Add Trailer modal ------------------------------------------------- const AddTrailerModal = ({ onClose }) => { const [dest, setDest] = useState('yard'); const [status, setStatus] = useState('EMPTY'); const options = { dock: ['D03', 'D04', 'D05', 'D12', 'D21', 'D25', 'D26', 'D28'], yard: ['Yard: 02', 'Yard: 05', 'Yard: 11', 'Yard: 15'], facility: ['PWN-12 · Hollis', 'PWN-21 · Allentown'], leave: ['Gate G01 · Outbound'], }; return ( } >

Trailer # *

SCAC *

Trailer Status *

{['EMPTY','LOADED','OOS'].map(s => (

setStatus(s)}>{s}

))}

Destination Type *

{DestinationTypes.map(t => (

setDest(t.key)}>{t.label}

))}

Destination Location *

Shipment Ref # (optional)

); }; // — Reset Driver Check-In modal -------------------------------------- const ResetCheckInModal = ({ ctx, onClose }) => { const ship = ctx || { t: 'T920272501', scac: 'TTFD', trailer: '301', dir: 'Outbound', kind: 'Live', status: 'EMPTY', driver: 'Abdelghani Kenzi', appt: '01/13/2026, 3:00 AM', checkin: '01/13/2026, 3:09:29 PM', mdt: '01/13/2026, 4:04:00 PM', loc: 'Dock: D14', }; return ( All chain-of-custody events for this shipment will be preserved } >

Shipment

{ship.t}

Status

Checked In

Driver

{ship.driver}

Direction

{ship.dir} {ship.kind}

SCAC · Trailer #

{ship.scac} · {ship.trailer}

Trailer Status

{ship.status}

Appointment

{ship.appt}

Current Location

{ship.loc}

Check-in Time

{ship.checkin}

Must Depart Time

{ship.mdt}

Resetting check-in clears driver assignment The driver will be returned to the unassigned queue. The trailer stays at {ship.loc}. Use this when a driver no-shows or you need to reassign the dock.

); }; // — Create Task modal ------------------------------------------------ const CreateTaskModal = ({ onClose }) => { const [type, setType] = useState('MOVE_TRAILER'); return ( } >

Task Type *

{['MOVE_TRAILER','SAFETY_CHECK','SEAL_CHECK'].map(t => (

setType(t)}>{t}

))}

From Location *

To Location *

Trailer # *

SCAC *

Assign To

Priority

Notes (optional)

); }; // — Prioritize Tasks modal ------------------------------------------- const PrioritizeTasksModal = ({ onClose }) => { const [list, setList] = useState([ { id: 'M-2218', nm: 'MOVE_TRAILER · D02 → Yard: 21', meta: 'KUCD16638 · KUCD' }, { id: 'M-2219', nm: 'MOVE_TRAILER · STG-A12 → D04', meta: 'T-1412' }, { id: 'M-2220', nm: 'MOVE_TRAILER · GATE → STG-B07', meta: 'T-1419' }, { id: 'M-2221', nm: 'SAFETY_CHECK · D11', meta: 'BT6026 · CVBG' }, { id: 'M-2222', nm: 'MOVE_TRAILER · D14 → Yard: 12', meta: 'W91916 · HIRS' }, { id: 'M-2223', nm: 'MOVE_TRAILER · D09 → Staging', meta: 'PTLZ260055 · GSWA' }, ]); const move = (i, dir) => { const j = i + dir; if (j < 0 || j >= list.length) return; const next = [...list]; [next[i], next[j]] = [next[j], next[i]]; setList(next); }; return ( Drag to reorder, or use the arrows. Tasks will be served to spotters in this sequence. } >

{list.map((t, i) => (

{i + 1}

{t.nm}

{t.id} · {t.meta}

))}

); }; // ═══════════════════════════════════════════════════════════════════ // VIEW · flowTWIN — Machine Vision RTLS / Yard Scan // ═══════════════════════════════════════════════════════════════════ const FlowTwinView = () => { const [driving, setDriving] = useState(true); const [frame, setFrame] = useState(429); const [hoveredSpot, setHoveredSpot] = useState(10); useEffect(() => { if (!driving) return; const t = setInterval(() => { setFrame(f => f + Math.floor(Math.random() * 3) + 1); }, 240); return () => clearInterval(t); }, [driving]); const spots = [ { n: 1, trailer: '197218', brand: 'WALM', matched: true }, { n: 2, trailer: '33019', brand: 'RGND', matched: true }, { n: 3, trailer: '6327234', brand: 'NELO', matched: true }, { n: 4, trailer: '4050L', brand: 'SCDS', matched: true }, { n: 5, trailer: 'TA178437', brand: 'TRGE', matched: true }, { n: 6, trailer: '379944', brand: 'HORW', matched: true }, { n: 7, trailer: '154275', brand: 'WALM', matched: true }, { n: 8, trailer: '168485', brand: 'WALM', matched: true }, { n: 9, trailer: '9510', brand: 'NELO', matched: true }, { n: 10, trailer: null, brand: null, matched: false }, { n: 11, trailer: '2234', brand: 'HRMN', matched: true }, { n: 12, trailer: null, brand: null, matched: false }, { n: 13, trailer: '57128', brand: 'WALM', matched: true }, { n: 14, trailer: '419932', brand: 'GSWA', matched: true }, ]; const detected = [ { trailer: '197218', brand: 'Walmart', matched: true, sightings: 6, colors: ['Gray', 'Silver', 'Black'], lat: '40.57175', lng: '-75.62599' }, { trailer: '33019', brand: 'Reg. Transport', matched: true, sightings: 3, colors: ['Brown', 'Silver'], lat: '40.57182', lng: '-75.62614' }, { trailer: 'Unknown', brand: 'Walmart', matched: false, sightings: 2, colors: ['Gray', 'Silver', 'Black'], lat: '40.57189', lng: '-75.62627' }, { trailer: '6327234', brand: 'New Era Logistics', matched: true, sightings: 5, colors: ['Dark Green', 'Silver'], lat: '40.57194', lng: '-75.62631' }, { trailer: 'Unknown', brand: 'Hoffman', matched: false, sightings: 1, colors: ['Gray', 'Black'], lat: '40.57203', lng: '-75.62644' }, { trailer: '4050L', brand: 'Schneider', matched: true, sightings: 4, colors: ['Brown', 'Silver'], lat: '40.57211', lng: '-75.62658' }, ]; return ( <>

flowTWIN · Machine Vision RTLS

Camera mounted on the yard spotter vehicle — the truck that moves trailers inside the yard, never leaves · streams to vision engine · trailer locations auto-update as the spotter does its normal work

jake · N6ns4eY9T9Y PWN-21 · Allentown

{/* ─── Controls rail ─── */}

Capture

Video

IMG_2276.MP4

Frame range

IN [497]

OUT [540]

Every

3 frames

Processing pipeline

colors

object_color

detect

yolo11m

PASSIVE RTLS Driver does their normal work. We update the YMS as they pass each trailer.

{/* ─── Live camera frame (spotter POV) ─── */}

Spotter Camera

position left · bearing 187° {driving ? `● FRAME ${frame}` : '○ STOPPED'}

position left · bearing 187°

{driving && } 13:16:52 · pin: corrected · pair lag 73ms

00:00 / 05:44 · 3.0 km/h

{/* ─── Satellite map with movement track ─── */}

Satellite · Movement Track

GPS + bearing · 4,359 frames

40.57359, -75.627799 · PWN-21

Maxar / Airbus 2026

{/* ─── Yard Spots list (right rail) ─── */}

Yard Spots

[41/62]

PARKING SPOT [41/62]

{spots.map(s => (

setHoveredSpot(s.n)} >

{s.matched ? : '○'}

{s.trailer || 'EMPTY'}

{s.n} {s.brand && {s.brand}}

))}

{/* ─── DETECTED panel (bottom strip) ─── */}

Detected

[173] raw model output · color extractor + yolo11m

{detected.map((d, i) => (

{d.trailer} {d.matched ? 'MATCHED' : 'UNKNOWN'} {d.sightings} sightings

{d.brand}

{d.colors.map(c => {c})}

{d.lat}, {d.lng}

))}

); }; // ═══════════════════════════════════════════════════════════════════ // VIEW · flowGATE — Machine Vision Gate Automation // ═══════════════════════════════════════════════════════════════════ const GATE_PAYLOAD = { appearance: { color: 'white', make: 'Freightliner' }, asset_type: 'truck', id: 3, identity: { carrier: 'CUSTOMIZED TRUCKING', unit_number: '10003', usdot: '4386382' }, linkage: { best_frame_id: 2564, camera_role: 'outbound', current_pass_id: 57, location: 'Exit Gate' }, sightings: [{ first_seen_at: '2026-05-28T02:05:35.209940Z', last_classified_in_pass: 57, last_seen_at: '2026-05-28T15:16:28.980205Z', pass_count: 9, viewed_in_current_pass: true }], }; const GATE_FRAMES = [ { t: '+4s', score: 33.7, dim: '73×41' }, { t: '+5s', score: 30.6, dim: '86×39', best: true, vlm: true }, { t: '+5s', score: 22.7, dim: '92×32', vlm: true }, { t: '+7s', score: 20.2, dim: '75×31', vlm: true }, { t: '+10s', score: 14.1, dim: '61×28' }, { t: '+13s', score: 11.8, dim: '58×24' }, ]; const FlowGateView = ({ setActive }) => { const [reading, setReading] = useState(false); const [showJson, setShowJson] = useState(false); const [synced, setSynced] = useState(false); const reread = () => { setReading(true); setTimeout(() => setReading(false), 1600); }; return ( <>

flowGATE · Carrier Accountability

Every gate pass now reads the truck, the chassis, and the timestamp — so you know who took what, and when. Not just where the chassis is — who's accountable for it.

● Camera Live IMG_0594.MOV · DONE

Detected · 2 objects in 1 group Pass #57 · outbound · 31 frames · 15:15:38

TRUCK

Customized Trucking

USDOT4386382

Unit #10003

CabWhite · Freightliner

CHASSIS

Chassis CMCZ150496

ColorMaroon

Length53 ft (vlm_visual)

Markswhite reflective tape · "MOUNT GEARET HERE"

WHO Customized Trucking USDOT 4386382 · unit 10003

WHAT Chassis CMCZ150496 53 ft · Maroon

WHEN 15:15:38 2026-05-28 · conf 0.95

Top YOLO-ranked frames · 6 shown · 3 sent to VLM

{GATE_FRAMES.map((f, i) => (

{f.score} {f.vlm && VLM} {f.dim} · {f.t}

))}

Pass #57 outbound

Exit Gate · ex_KkkLzMv6DUw

YARD SYNC · OUT {synced ? 'synced' : 'not in yard'}

{synced ? (

CMCZ150496 reconciled · flagged to carrier audit for Customized Trucking.

) : ( <>

CMCZ150496 is exiting but isn't in the yard — no matching inbound or staged load.

trailer # CMCZ150496

)}

Carrier Watch Carol's flag

Customized Trucking · USDOT 4386382

chassis pulls · 7 days

left w/o matched load

31h

avg dwell before use

Flagged: chassis leaving the gate without a matched outbound load. Follow up before it hurts asset-utilization ratios.

{showJson && (

{JSON.stringify(GATE_PAYLOAD, null, 2)}

)}

); }; // ═════════════════════════════════════════════════════════════════ // VIEW · flowSIM — Digital-Twin Scenario Sandbox // ═════════════════════════════════════════════════════════════════ const SIM_SCENARIOS = [ { key: 'normal', label: 'Normal Ops', inbound: 120, punctuality: 82, weather: 1.0, docks: 8, blurb: 'A typical Tuesday at Naperville — steady inbound, no disruptions.' }, { key: 'surge', label: 'Peak Surge', inbound: 186, punctuality: 74, weather: 1.0, docks: 8, blurb: 'Promo build week — +40% inbound as retail pulls holiday cookie volume.' }, { key: 'noshow', label: 'Carrier No-Show', inbound: 140, punctuality: 54, weather: 1.0, docks: 8, blurb: 'Three inbound carriers miss windows and arrive bunched after 10:00.' }, { key: 'dockdown', label: 'Dock Offline', inbound: 132, punctuality: 80, weather: 1.0, docks: 6, blurb: 'A leveler failure pulls 2 doors offline 10:00–14:00, right at peak.' }, { key: 'storm', label: 'Winter Storm', inbound: 108, punctuality: 46, weather: 1.45, docks: 8, blurb: 'Lake-effect snow scatters arrivals and slows every yard move.' }, ]; const SIM_HOURS = ['6a','7a','8a','9a','10a','11a','12p','1p','2p','3p','4p','5p']; // ── v2 ROI model — mirrors yardflow.ai/roi + the sales deck (per-site $K/yr) ── // Throughput value scales with margin/shipment; hard savings are margin-independent. const ROI_ARCHETYPES = { yms: { label: 'YMS site', hard: 188, thru1k: 2363, cost: 15 }, dropsNoYms: { label: 'Drops · no YMS', hard: 100, thru1k: 1474, cost: 10 }, noDrops: { label: 'No drops', hard: 54, thru1k: 473, cost: 5 }, }; const ROI_LEGACY = { hard: 100, thru1k: 204 }; const ROI_OPDAYS = 250; // operating days / yr const ROI_IMPL_PER_SITE = 81.4; // $K one-time implementation function roiForSite(key, margin) { const a = ROI_ARCHETYPES[key]; const mf = margin / 1000; const thru = a.thru1k * mf; // $K/yr throughput value (margin-driven) const hard = a.hard; // $K/yr hard savings const total = thru + hard; // $K/yr total value const sub = a.cost; // $K/yr subscription const hardReturn = hard / sub; // × subscription returned by hard savings alone const annualLoads = a.thru1k; // incremental loads / yr (≈ $K at $1k each) const sustainedUplift = a.thru1k / ROI_OPDAYS; // avg extra loads / shift const paybackHardMo = Math.max(0.3, (ROI_IMPL_PER_SITE / hard) * 12); const paybackAllMo = Math.max(0.2, (ROI_IMPL_PER_SITE / total) * 12); const legacy = key === 'yms' ? (ROI_LEGACY.hard + ROI_LEGACY.thru1k * mf) : 0; return { thru, hard, total, sub, hardReturn, annualLoads, sustainedUplift, paybackHardMo, paybackAllMo, legacy, mf }; } const roiFmt = (k) => k >= 1000 ? '$' + (k / 1000).toFixed(2).replace(/\.?0+$/, '') + 'M' : '$' + Math.round(k) + 'K'; const SimSlider = ({ label, val, set, min, max, step, fmt }) => (

{label}{fmt ? fmt(val) : val}

set(Number(e.target.value))} />

); const FlowSimView = ({ setActive }) => { const [scenarioKey, setScenarioKey] = useState('surge'); const sc = SIM_SCENARIOS.find(s => s.key === scenarioKey); const [inbound, setInbound] = useState(sc.inbound); const [spotters, setSpotters] = useState(3); const [docks, setDocks] = useState(sc.docks); const [punctuality, setPunctuality] = useState(sc.punctuality); const [weather, setWeather] = useState(sc.weather); const [margin, setMargin] = useState(1000); const [running, setRunning] = useState(false); const [progress, setProgress] = useState(1); const [ran, setRan] = useState(true); const rafRef = useRef(null); const pickScenario = (k) => { const s = SIM_SCENARIOS.find(x => x.key === k); setScenarioKey(k); setInbound(s.inbound); setPunctuality(s.punctuality); setDocks(s.docks); setWeather(s.weather); runSweep(); }; const runSweep = () => { cancelAnimationFrame(rafRef.current); setRunning(true); setRan(false); setProgress(0); const start = Date.now(), dur = 1400; const tick = () => { const p = Math.min(1, (Date.now() - start) / dur); setProgress(p); if (p < 1) rafRef.current = requestAnimationFrame(tick); else { setRunning(false); setRan(true); } }; rafRef.current = requestAnimationFrame(tick); }; useEffect(() => () => cancelAnimationFrame(rafRef.current), []); // ── Deterministic twin model ── const m = useMemo(() => { const volF = inbound / 120; const punF = (100 - punctuality) / 40; const dockF = (8 - docks) / 8; const spotF = (3 - spotters) / 3; const sev = Math.min(1.35, Math.max(0.12, 0.55 * (volF - 1) + 0.85 * punF + 0.7 * dockF + 0.5 * spotF + 0.7 * (weather - 1) + 0.30)); const peakReact = Math.round(Math.min(118, 58 + sev * 46)); const peakOrch = Math.round(Math.min(88, 50 + sev * 15)); const round = (n, step) => Math.round(n / step) * step; const detReact = round(sev * 3100, 50); const detOrch = round(sev * 440, 20); const loadsBase = Math.round(inbound * 0.92); const loadsReact = Math.round(loadsBase * (1 - sev * 0.12)); const loadsOrch = Math.round(loadsBase * (1 + 0.05 + sev * 0.02)); const milesReact = Math.round(38 + sev * 46); const milesOrch = Math.round(25 + sev * 9); const overReact = Math.max(0, Math.round((peakReact - 100) / 3)); const onTimeReact = Math.round(Math.max(46, 96 - sev * 44)); const onTimeOrch = Math.round(Math.max(86, 99 - sev * 8)); const curve = (peak, base, sigma) => Array.from({ length: 12 }, (_, t) => { const d = t - 5.2; return Math.round(base + (peak - base) * Math.exp(-(d * d) / (2 * sigma * sigma))); }); return { sev, peakReact, peakOrch, detReact, detOrch, loadsReact, loadsOrch, milesReact, milesOrch, overReact, onTimeReact, onTimeOrch, reactCurve: curve(peakReact, 20, 2.1), orchCurve: curve(peakOrch, 24, 3.3), }; }, [inbound, spotters, docks, punctuality, weather]); // ── Chart geometry ── const W = 720, H = 230, padL = 30, padR = 14, padT = 12, padB = 22, maxY = 120; const xFor = (i) => padL + (i / 11) * (W - padL - padR); const yFor = (v) => padT + (1 - v / maxY) * (H - padT - padB); const pts = (arr) => arr.map((v, i) => `${xFor(i).toFixed(1)},${yFor(v).toFixed(1)}`).join(' '); const area = (arr) => `${xFor(0)},${yFor(0)} ${pts(arr)} ${xFor(11)},${yFor(0)}`; const capY = yFor(100); const fmt$ = (n) => '$' + n.toLocaleString(); // ── v2 ROI roll-up for this facility (Drops · no YMS archetype) ── const roi = useMemo(() => roiForSite('dropsNoYms', margin), [margin]); // Bridge: today's recovered loads → annualized throughput at this margin const recoveredToday = m.loadsOrch - m.loadsReact; const thruPct = Math.round((roi.thru / roi.total) * 100); return ( <>

flowSIM · Digital-Twin Sandbox

Stress-test the yard before it happens. Inject a disruption and the twin projects the shift reactive ops vs. YardFlow-orchestrated — calibrated to this site's 14-day actuals.

MDZ · Naperville Bakery DC Twin · 62 spots · 8 docks

{/* ─── Control panel ─── */}

Scenario

{SIM_SCENARIOS.map(s => ( ))}

{sc.blurb}

Parameters

v + '%'} /> v <= 1.02 ? 'Clear' : v < 1.25 ? 'Rain' : 'Snow'} /> '$' + v.toLocaleString()} /> {running &&

}

{/* ─── Results ─── */}

flowSIM recovers {m.loadsOrch - m.loadsReact} loads and avoids {fmt$(m.detReact - m.detOrch)} in detention vs. reactive ops — peak yard fill held to {m.peakOrch}% instead of {m.peakReact}%.

{[ { k: 'Loads shipped / shift', r: m.loadsReact, o: m.loadsOrch, d: `+${m.loadsOrch - m.loadsReact}`, up: true }, { k: 'Peak yard fill', r: m.peakReact + '%', o: m.peakOrch + '%', d: `−${m.peakReact - m.peakOrch}pt`, up: false }, { k: 'Detention exposure', r: fmt$(m.detReact), o: fmt$(m.detOrch), d: `−${fmt$(m.detReact - m.detOrch)}`, up: false }, { k: 'On-time departures', r: m.onTimeReact + '%', o: m.onTimeOrch + '%', d: `+${m.onTimeOrch - m.onTimeReact}pt`, up: true }, { k: 'Spotter miles', r: m.milesReact + ' mi', o: m.milesOrch + ' mi', d: `−${m.milesReact - m.milesOrch} mi`, up: false }, { k: 'Overflow events', r: m.overReact, o: 0, d: m.overReact > 0 ? `−${m.overReact}` : 'none', up: false }, ].map(c => (

{c.k}

Reactive{c.r}

flowSIM{c.o}

{c.d}

))}

Projected Yard Occupancy

% of 62 spots · 06:00–18:00 Reactive (today) flowSIM orchestrated

Twin calibrated to 14-day actuals · {sc.label} scenario · severity {(m.sev).toFixed(2)} setActive && setActive('appointments')}>Push winning plan to flowSCHEDULE →

{/* ─── Annual ROI roll-up (v2 model) ─── */}

Annual ROI · This Facility
Drops · no YMS archetype v2 model · mirrors yardflow.ai/roi

{roiFmt(roi.total)}/yr value unlocked

Throughput {roiFmt(roi.thru)}

Hard {roiFmt(roi.hard)}

Throughput is the lever: at {fmt$(margin)}/shipment, a sustained +{roi.sustainedUplift.toFixed(1)} loads/shift avg is {roi.annualLoads.toLocaleString()} more loads/yr. Today's {sc.label} shift recovered {recoveredToday} — peak days run hotter than the average.

{roiFmt(roi.sub)}/yr

YardFlow subscription

{roi.hardReturn.toFixed(0)}×

Hard savings return on subscription

{roi.paybackHardMo.toFixed(1)} mo

Payback · hard savings only

$0

Legacy YMS captures here — it won't deploy to a no-YMS drop yard

); }; // ═════════════════════════════════════════════════════════════════ // VIEW · Appointments — flowSCHEDULE (orchestrated dock scheduling) // ═════════════════════════════════════════════════════════════════ const SC_START = 360; // 06:00 in minutes const SC_END = 960; // 16:00 const SC_SPAN = SC_END - SC_START; const scX = (t) => ((t - SC_START) / SC_SPAN) * 100; const scW = (d) => (d / SC_SPAN) * 100; const scClamp = (t) => Math.max(SC_START, Math.min(SC_END, t)); const scFmt = (t) => { const h = Math.floor(t / 60), m = Math.round(t % 60); const ap = h >= 12 ? 'p' : 'a'; let hh = h % 12; if (hh === 0) hh = 12; return `${hh}:${String(m).padStart(2, '0')}${ap}`; }; // Dock doors for the Mondelēz Naperville bakery DC demo const SC_DOORS = [ { id: 'D01', zone: 'IN' }, { id: 'D02', zone: 'IN' }, { id: 'D03', zone: 'IN' }, { id: 'D04', zone: 'OUT' }, { id: 'D05', zone: 'OUT' }, { id: 'D06', zone: 'OUT' }, { id: 'D07', zone: 'FLEX' }, { id: 'D08', zone: 'FLEX' }, ]; // Each appt: orchestrated start (tO) is spread; carrier-requested start (tC) // clusters into the 8–11a band the way first-come booking actually behaves. const SC_APPTS_0 = [ { id: 'a1', door: 'D01', dir: 'IN', carrier: 'Schneider', scac: 'SNDR', load: 'Flour · bulk', po: 'PO-44715', dur: 90, tO: 372, tC: 480 }, { id: 'a2', door: 'D05', dir: 'IN', carrier: 'Werner', scac: 'WERN', load: 'Cane sugar', po: 'PO-44702', dur: 60, tO: 360, tC: 420 }, { id: 'a3', door: 'D02', dir: 'IN', carrier: 'J.B. Hunt', scac: 'JBHT', load: 'Cocoa + sweetener', po: 'PO-44730', dur: 90, tO: 450, tC: 510 }, { id: 'a4', door: 'D04', dir: 'OUT', carrier: 'Knight', scac: 'KNX', load: 'Oreo · Chips Ahoy!', po: 'SO-88142', dst: 'Walmart DC 6094', dur: 120, tO: 480, tC: 540 }, { id: 'a5', door: 'D03', dir: 'IN', carrier: 'XPO', scac: 'XPOL', load: 'Corrugate + film', po: 'PO-44751', dur: 60, tO: 600, tC: 600 }, { id: 'a6', door: 'D05', dir: 'OUT', carrier: 'C.R. England', scac: 'CRST', load: 'Ritz · Wheat Thins', po: 'SO-88150', dst: 'Target DC T-3812', dur: 90, tO: 630, tC: 510 }, { id: 'a7', door: 'D06', dir: 'OUT', carrier: 'Maverick', scac: 'MAVL', load: 'belVita · Triscuit', po: 'SO-88163', dst: 'Kroger DC K-22', dur: 90, tO: 720, tC: 555 }, { id: 'a8', door: 'D07', dir: 'OUT', carrier: 'Old Dominion', scac: 'ODFL', load: 'Honey Maid · Nutter Butter', po: 'SO-88170', dst: 'Costco DC 412', dur: 90, tO: 810, tC: 630 }, { id: 'a9', door: 'D02', dir: 'OUT', carrier: 'Schneider', scac: 'SNDR', load: 'Sour Patch Kids', po: 'SO-88181', dst: 'Albertsons DC', dur: 90, tO: 780, tC: 585 }, { id: 'a10', door: 'D04', dir: 'OUT', carrier: 'J.B. Hunt', scac: 'JBHT', load: 'Wheat Thins', po: 'SO-88190', dst: 'Walmart DC 6094', dur: 90, tO: 870, tC: 660 }, ]; const SC_REQUESTS_0 = [ { id: 'r1', carrier: 'J.B. Hunt', scac: 'JBHT', dir: 'IN', load: 'Flour · bulk', po: 'PO-44766', reqT: 660, reqDoorPref: 'any', rec: { door: 'D01', dur: 90, t: 558 }, why: ['Lands before the 11:00a inbound peak', 'D01 silo line idle 9:00–10:30', 'SNDR unload crew already staged'], score: 96, thru: 1, det: 320, alts: [{ door: 'D03', t: 690, score: 71 }, { door: 'D01', t: 660, score: 58 }] }, { id: 'r2', carrier: 'Knight', scac: 'KNX', dir: 'OUT', load: 'Oreo · 24 plt', po: 'SO-88210', dst: 'Walmart DC 6094', reqT: 600, reqDoorPref: 'D04', rec: { door: 'D07', dur: 120, t: 690 }, why: ['Walmart DC receiving opens 14:00 — 13:30 dispatch hits the window', 'Avoids stacking on D04 behind the live Knight load', 'Finished-goods stage lane clear at 11:30'], score: 93, thru: 1, det: 480, alts: [{ door: 'D06', t: 660, score: 74 }, { door: 'D04', t: 600, score: 49 }] }, { id: 'r3', carrier: 'Werner', scac: 'WERN', dir: 'IN', load: 'Packaging film', po: 'PO-44771', reqT: 540, reqDoorPref: 'any', rec: { door: 'D03', dur: 60, t: 540 }, why: ['Film line changeover at 10:00 needs stock by 9:45', 'D03 inbound bay open 9:00–10:30', 'No yard move required — direct to staging'], score: 90, thru: 1, det: 220, alts: [{ door: 'D02', t: 600, score: 68 }, { door: 'D03', t: 720, score: 61 }] }, { id: 'r4', carrier: 'Maverick', scac: 'MAVL', dir: 'OUT', load: 'belVita · 18 plt', po: 'SO-88224', dst: 'Kroger DC K-22', reqT: 690, reqDoorPref: 'any', rec: { door: 'D03', dur: 90, t: 870 }, why: ['Kroger appointment is 16:30 — 14:30 dispatch is on time, not early', 'Keeps midday concurrency at 3 docks', 'Trailer pool: empty staged in Zone A spot 11'], score: 88, thru: 1, det: 360, alts: [{ door: 'D06', t: 690, score: 64 }, { door: 'D07', t: 810, score: 72 }] }, ]; const SC_KPIS = { orchestrated: [ { k: 'Dock utilization', v: '86%', tone: 'neon', sub: 'no idle gaps > 25 min' }, { k: 'On-time to appt', v: '94%', tone: 'success', sub: 'carrier + receiver windows' }, { k: 'Peak concurrency', v: '3 docks', tone: 'success', sub: 'within crew capacity (4)' }, { k: 'Detention exposure', v: '$310', tone: 'success', sub: 'today, projected' }, { k: 'Throughput vs plan', v: '+12%', tone: 'neon', sub: 'loads shipped / shift' }, { k: 'Yard congestion', v: 'LOW', tone: 'success', sub: 'spotter moves balanced' }, ], carrier: [ { k: 'Dock utilization', v: '71%', tone: 'warn', sub: 'gaps + double-books' }, { k: 'On-time to appt', v: '78%', tone: 'ember', sub: '5 windows at risk' }, { k: 'Peak concurrency', v: '6 docks', tone: 'ember', sub: 'crew capacity is 4' }, { k: 'Detention exposure', v: '$2,940', tone: 'ember', sub: 'today, projected' }, { k: 'Throughput vs plan', v: '−9%', tone: 'ember', sub: 'loads shipped / shift' }, { k: 'Yard congestion', v: 'HIGH', tone: 'ember', sub: 'gridlock 10:30–11:30' }, ], }; const ScheduleView = () => { const [mode, setMode] = useState('orchestrated'); const [appts, setAppts] = useState(SC_APPTS_0); const [requests, setRequests] = useState(SC_REQUESTS_0); const [selReq, setSelReq] = useState('r1'); const [hover, setHover] = useState(null); const [toast, setToast] = useState(null); const [protectedTotal, setProtectedTotal] = useState(0); const SC_MARGIN = 1000; // $/shipment · matches flowSIM + yardflow.ai/roi baseline const [secs, setSecs] = useState(10 * 3600 + 38 * 60 + 12); // 10:38:12 local useEffect(() => { const t = setInterval(() => setSecs(s => s + 1), 1000); return () => clearInterval(t); }, []); const nowMin = secs / 60; const clockStr = (() => { const h = Math.floor(secs / 3600), m = Math.floor((secs % 3600) / 60), s = secs % 60; const ap = h >= 12 ? 'PM' : 'AM'; let hh = h % 12; if (hh === 0) hh = 12; return `${hh}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')} ${ap}`; })(); const startOf = (a) => (mode === 'carrier' ? a.tC : a.tO); // Concurrency per 30-min bucket → congestion bars + at-risk flags const buckets = useMemo(() => { const out = []; for (let t = SC_START; t < SC_END; t += 30) { const load = appts.filter(a => { const s = startOf(a); return s < t + 30 && s + a.dur > t; }).length; out.push({ t, load }); } return out; }, [appts, mode]); const peakLoad = Math.max(1, ...buckets.map(b => b.load)); const apptAtRisk = (a) => { if (mode !== 'carrier') return false; const s = startOf(a); return buckets.some(b => b.load >= 5 && s < b.t + 30 && s + a.dur > b.t); }; const apptState = (a) => { const s = startOf(a), e = s + a.dur; if (apptAtRisk(a)) return 'risk'; if (nowMin >= s && nowMin < e) return 'live'; if (e <= nowMin) return 'done'; return 'confirmed'; }; const kpis = SC_KPIS[mode]; const selected = requests.find(r => r.id === selReq) || null; const confirmReq = (req) => { setAppts(a => [...a, { id: 'bk-' + req.id, door: req.rec.door, dir: req.dir, carrier: req.carrier, scac: req.scac, load: req.load, po: req.po, dst: req.dst, dur: req.rec.dur, tO: req.rec.t, tC: req.rec.t, justAdded: true, }]); setRequests(rs => { const remaining = rs.filter(x => x.id !== req.id); setSelReq(remaining[0]?.id || null); return remaining; }); setToast(`Booked · ${req.scac} → ${req.rec.door} @ ${scFmt(req.rec.t)}`); setProtectedTotal(p => p + req.thru * SC_MARGIN + req.det); setTimeout(() => setToast(null), 3400); }; const hourTicks = []; for (let t = SC_START; t <= SC_END; t += 60) hourTicks.push(t); return ( <>

Appointments · flowSCHEDULE

Dock appointments scored against live yard state — capacity, labor, trailer pool, and receiver windows — not just an open calendar slot.

MDZ · Naperville Bakery DC Tue · Jan 13 {clockStr}

{/* ─── Booking-logic toggle (the wedge) ─── */}

Booking logic

{mode === 'carrier' ? <>6 trucks stacked 10:30–11:30a. Crew capacity is 4 docks — yard gridlocks, spotters fall behind, ~$2,630 detention & 9% throughput lost. This is what an open booking calendar produces. : <>Same loads, same carriers — re-slotted against live yard state. Concurrency held to 3 docks, receiver windows still hit, +12% loads shipped this shift.}

{/* ─── KPI strip ─── */}
{kpis.map(s => (

{s.v}

{s.k}

{s.sub}

))}

{/* ─── Schedule board ─── */}

Dock Schedule
8 doors · 06:00–16:00 · {appts.length} appointments At dock Confirmed At risk Complete
{/* hour axis */}

{hourTicks.map(t => ( {scFmt(t).replace(':00', '')} ))}
NOW

{/* door rows */}
{SC_DOORS.map(d => (

{d.id} {d.zone}

{/* now line within each track */}
{/* ghost recommendation preview */} {selected && selected.rec.door === d.id && (
flowAI slot
)} {appts.filter(a => a.door === d.id).map(a => { const st = apptState(a); const s = startOf(a); return (
setHover({ ...a, st, s })} onMouseLeave={() => setHover(null)} > {a.scac} {a.load} {scFmt(s)}–{scFmt(s + a.dur)}
); })}

))}
{/* congestion bars */}

Concurrent
docks

crew cap · 4
{buckets.map(b => { const tone = b.load >= 5 ? 'ember' : b.load >= 3 ? 'warn' : 'neon'; return (
); })}

{/* ─── flowAI booking assistant ─── */}

flowAI Booking
{requests.length} pending

Carrier slot requests, scored against the live yard. Pick one to see the optimal slot and why.

Value protected today

${protectedTotal.toLocaleString()}

throughput + detention · @ ${SC_MARGIN.toLocaleString()}/shipment

{requests.map(r => (
setSelReq(r.id)}>
{r.dir} {r.carrier} {r.scac}

{r.load}{r.dst ? ` → ${r.dst}` : ''}

asked {scFmt(r.reqT)} → flowAI {r.rec.door} {scFmt(r.rec.t)}

))} {requests.length === 0 && (
All requests slotted. Yard stays fluid.
)}
{selected && (

Recommended slot {selected.score}/100

{selected.rec.door} {scFmt(selected.rec.t)} – {scFmt(selected.rec.t + selected.rec.dur)} {selected.reqT !== selected.rec.t && ( moved from {scFmt(selected.reqT)} )}

{selected.why.map((w, i) =>
{w}
)}

ROI impact vs. requested slot
+${(selected.thru * SC_MARGIN).toLocaleString()}throughput protected −${selected.det}detention avoided

{selected.alts.map((al, i) => (
{al.door} · {scFmt(al.t)} {al.score}
))}

)}

{hover && (

{hover.dir}{hover.carrier} · {hover.scac}

{hover.load}

Door{hover.door} Window{scFmt(hover.s)}–{scFmt(hover.s + hover.dur)} Ref{hover.po} {hover.dst && <>Receiver{hover.dst}} State{hover.st === 'risk' ? 'At risk' : hover.st}

)} {toast &&
{toast}
} ); }; const Placeholder = ({ label }) => ( <>

{label}

View wired in nav · screen recreation pending.

Screen recreation in progress.

); // ─── App shell ───────────────────────────────────────────────────── const App = () => { const validKeys = [...NAV, ...NAV_FOOT].map(n => n.key); const hashKey = (typeof location !== 'undefined' ? (location.hash || '').replace('#', '') : ''); const [active, setActive] = useState(validKeys.includes(hashKey) ? hashKey : 'dashboard'); const [autoRefresh, setAutoRefresh] = useState(true); const [activeFacility, setActiveFacility] = useState('PWN-04'); const [compact, setCompact] = useState(false); const [theme, setTheme] = useState(() => { try { return localStorage.getItem('yf-theme') || 'dark'; } catch (e) { return 'dark'; } }); useEffect(() => { document.body.classList.toggle('theme-light', theme === 'light'); try { localStorage.setItem('yf-theme', theme); } catch (e) {} }, [theme]); const [modal, setModal] = useState(null); useEffect(() => { window.openOpModal = (kind, ctx) => setModal({ kind, ctx }); window.openOpFacility = (code) => { setActiveFacility(code); setActive('dashboard'); }; return () => { delete window.openOpModal; delete window.openOpFacility; }; }, []); const closeModal = () => setModal(null); const activeLabel = useMemo(() => { return ([...NAV, ...NAV_FOOT].find(n => n.key === active)?.label) || 'Dashboard'; }, [active]); return (

{active === 'dashboard' && } {active === 'dock-mgt' && } {active === 'yard-spot' && } {active === 'whiteboard' && } {active === 'driver-comms' && } {active === 'driver-mgt' && } {active === 'trailers' && } {active === 'task-app' && } {active === 'shipments' && } {active === 'appointments' && } {active === 'trailer-hist' && } {active === 'task-hist' && } {active === 'facility-mgt' && } {active === 'user-mgt' && } {active === 'flow-sim' && } {active === 'flow-twin' && } {active === 'flow-gate' && } {!['dashboard','dock-mgt','yard-spot','whiteboard','driver-comms','driver-mgt','trailers','task-app','shipments','appointments','trailer-hist','task-hist','facility-mgt','user-mgt','flow-sim','flow-twin','flow-gate'].includes(active) && }

{modal?.kind === 'move' && } {modal?.kind === 'add' && } {modal?.kind === 'reset' && } {modal?.kind === 'task-new' && } {modal?.kind === 'prioritize' && } {modal?.kind === 'assign-driver'&& }
); }; ReactDOM.createRoot(document.getElementById('root')).render();

Operations Dashboard

Drivers Needing Attention

Tasks Needing Attention

Doors Needing Attention

Customer Feedback

Driver Messages

Empty Trailers by SCAC

BOL Awaiting Signature

Dock Management

Yard Spot Management

Driver Board

Driver Comms

Drivers

Unassigned Drivers

Available Spots

Trailers

Task App

Shipments

Trailer History

Task History

Facility Management · Yard Network System

{f.code} · {f.name}

User Management

{title}

flowTWIN · Machine Vision RTLS

Capture

Spotter Camera

Satellite · Movement Track

Yard Spots

Detected

flowGATE · Carrier Accountability

flowSIM · Digital-Twin Sandbox

Projected Yard Occupancy

Annual ROI · This Facility

Appointments · flowSCHEDULE

Dock Schedule

flowAI Booking

{label}