Concept Prototype 🖥️ Web demo · React

PTMS 🚜

Cascading Push-Offer Forklift Dispatch

A clickable pitch prototype for a Port Transport Management System. Instead of dropping orders into a pool and hoping a driver picks them up, the system pushes each order to the best-fit forklift, waits 20 seconds, and cascades to the next one, then tracks the job to a PIN-verified handover.

Live Demo

Click inside, then press Space / → to advance, ← to go back
15 steps · 5 scenes
PTMS demo: cascading offer to forklift FL-03 with dispatch log Best viewed on a larger screen. Tap to open the demo ↗

The UI copy is in Bahasa Indonesia, as it would be for yard staff. The stage renders at 1440×810 and scales to fit; most steps can also be triggered by tapping inside the devices.

The Problem

Moving cargo across a 570,000 m² yard still runs on radio calls and whoever answers first.

📞

Dispatch by phone

Requesters call around to find a free forklift, with no view of which unit is nearby or has the capacity for the load.

⏳

Unbounded wait

In a pool model, an order sits until someone notices it, and heavy or awkward jobs get skipped for easier ones.

🧾

No proof of handover

Without checkpoints, it’s hard to show where cargo was picked up, where it was dropped, and who received it.

Scene Walkthrough

One order, ORD-0142: four pallets of urea, Gudang B to Lapangan C, from request to delivery in eleven minutes.

Scene 1 · Requester: Order in five taps
Scene 1 · Requester

Order in five taps

Origin is auto-detected from the rack QR, the destination snaps to a zone on the yard map, and live capacity shows how many forklifts can carry the load before the order is sent. An optional handover PIN locks delivery to the named receiver.

Open demo at this scene ↗
Scene 2 · Cascading offer: One driver at a time, 20 seconds each
Scene 2 · Cascading offer

One driver at a time, 20 seconds each

The dispatcher filters by capacity and STANDBY status, ranks by distance, then pushes the offer to the best unit. When FL-03 doesn’t respond, the offer cascades to FL-07 automatically, and every step is written to the dispatch log.

Open demo at this scene ↗
Scene 3 · Track & quick messages: Live tracking without phone calls
Scene 3 · Track & quick messages

Live tracking without phone calls

The requester follows the forklift on the yard map and sends one-tap quick messages. The driver tablet locks while moving, and QR scans at origin and destination prove the unit was physically there.

Open demo at this scene ↗
Scene 4 · Handover PIN: Three-layer proof of delivery
Scene 4 · Handover PIN

Three-layer proof of delivery

Origin QR, destination QR, and a PIN only the receiver knows. The driver enters it on the tablet, the server verifies, the order flips to DELIVERED with timestamps, and FL-07 returns to STANDBY.

Open demo at this scene ↗
Scene 5 · Executive summary: Plan A vs Plan B
Scene 5 · Executive summary

Plan A vs Plan B

A side-by-side comparison for decision makers, plus hybrid escalation rules: fall back to the open pool when the cascade is exhausted, alert a supervisor after two minutes, and use parallel offers for priority vessel work.

Open demo at this scene ↗

Plan A vs Plan B

Recommendation: Plan B by default, Plan A as the escalation path
AspectPlan A · PoolPlan B · Push Offer
How it worksOrder goes to a pool; drivers pick for themselvesSystem offers sequentially to the best-fit forklift
Unit selectionFirst come, first served; capacity can mismatchAuto-filter: capacity ≥ load, STANDBY, nearest first
Response timeUnbounded; depends on a driver noticingBounded: max 20 s per offer, then auto-cascade
SafetyDrivers scan a list while movingOne notification, one tap; screen locks while moving
Load balancing“Easy” orders get grabbed, heavy ones lingerRule-based order; large units held as reserve
AccountabilityHard to see who ignored an orderOffer/timeout log + timestamped QR and PIN
Build complexityLowMedium: needs a dispatch engine and ranking rules

How It’s Built

A presentation-grade prototype, not a backend
FrameworkReact 19 · TypeScript · Vite
Styling & MotionTailwind CSS · Framer Motion
StateSingle global step machine (0–14) with keyboard controls & deep links
Yard MapHand-built SVG schematic of the Nanindah yard
StageFixed 1440×810 canvas scaled to any screen
DevicesRequester phone · driver tablet · receiver phone

Yard schematic adapted from the publicly available Paxocean Nanindah yard plan. Orders, fleet, and people are fictional demo data.

See the full flow Fifteen steps, from order request to delivered, driven with the spacebar.