Delivery dashboard: Depo

The task

Depo is a city delivery service: 12 couriers on the road, 58 orders per shift, one dispatcher in front of a single monitor for 6-12 hours. The dashboard has to show where the couriers are and which orders are drifting toward their deadline, so the dispatcher can step in before a deadline slips, not investigate after. It is a working tool, not a showcase: information density and split-second status reading matter more than whitespace and illustrations. A demo project: the company is fictional, the brief is real.

The solution

A five-screen SPA: shift overview, couriers, orders, zones, analytics. Next.js 15 with static export, state in Zustand, no backend - everything runs in the browser.

• The data is a deterministic mock: a custom seeded PRNG, and “now” is a constant rather than Date.now(). Every run paints the same picture, so screenshots are reproducible.
• Real-time is simulated: a ticker fires every 5 seconds, moves couriers, advances order statuses and appends events to the feed. A toggle in the header freezes the picture for demos and screenshots.
• The zone map is hand-drawn SVG with no mapping libraries: dot color is the courier’s status, fill saturation is the zone’s load, and clicking a zone opens its card.
• Lateness is a derived state, not a separate order status: otherwise an order would be both “in transit” and “late” at once, and the table would start lying.
• Three urgency thresholds instead of a binary ok/late: comfortable, tight, alarm. The signal is color plus icon plus text, never color alone.
• Tables with sorting, filters and search; a courier panel, an order card, bulk assignment; every action is confirmed by a toast with an undo button.

Details that are easy to miss

• Data states are treated as work of their own: loading, an empty filter result, an error screen, a closed morning shift and a night shift that has not started yet, complete with an empty map.
• The simulation ticker pauses on prefers-reduced-motion and when the tab is hidden - a background tab does not burn battery for nothing.
• Accessibility is verified by a scripted scenario: focus stays trapped inside the order modal, Escape closes the slide-out panel, sort controls and close buttons carry aria-labels, and screen readers hear “updated N seconds ago”.
• The login is demonstrative and honest: a login screen with hinted demo credentials, client-side checks, a session in sessionStorage - it shows access separation without pretending to be real security.
• Demo legal hygiene: a “demonstration materials” notice in the sidebar, a disclaimer page, noindex in the metadata and an X-Robots-Tag header on the deployment.
• There is no dedicated mobile layout on purpose: a dispatcher dashboard is a desktop tool. On narrow screens the tables turn into cards and the map folds into an accordion; there are dark and light themes, and the theme choice is remembered.

The numbers

Everything is counted from the demo data: 5 screens, 12 couriers and 58 orders in the simulated shift, 5 zones on a hand-drawn SVG map. The simulation refreshes the picture every 5 seconds; dark and light themes are included and the choice is saved.