Planboard Freight Logistics

Client: TransportMaster
Sector: Agrarisch transport / veevoer
Type: Bespoke web application
Stack: Vanilla JavaScript, HTML5, CSS3

A custom-built logistics planning application for a Dutch agricultural transport company, enabling planners to schedule driver routes, manage freight orders, and push instructions directly to on-board fleet computers — all from a single browser-based interface.

The Challenge

The company specialises in animal feed and bulk cargo transport. Their planners managed the weekly driver schedule — who drives where, carrying what, on which day — using a mix of spreadsheets and handwritten notes. Orders were tracked separately from the schedule, and any changes had to be communicated to drivers manually.

The goal was to consolidate everything into one purpose-built planning board: a live overview of the full week where orders can be assigned to the right driver and day, and driver instructions can be sent directly to in-cab fleet computers with a single click.

Design

The interface is structured around a week-grid: drivers on the vertical axis, Monday through Saturday on the horizontal axis. A planner can see the entire week at a glance — which driver is scheduled where, how many kilometres they will cover that day, and which orders are still unassigned in the sidebar.

A consistent colour-coded status system gives instant visual feedback on every order card:

• GL — Geladen (loaded) — yellow
• OL — Ongeladen (unloaded) — red
• OLD — Dubbelset — blue
• NEW — Nieuwe order — grey
• DONE — Gereed — green

The design system is built entirely with CSS custom properties — a structured set of design tokens covering spacing, colour, typography, shadow, and animation timing. This ensures visual consistency across all components without relying on an external framework. Two view-density modes (compact and expanded) let planners switch between a high-level overview and a more detailed card layout depending on the screen size and the task at hand.

Features

• Drag-and-drop scheduling — Orders are dragged from the sidebar directly into any driver/day cell on the board. Dragging back to the sidebar unassigns the order.
• Live week navigation — Planners move forward and backward through weeks. Day totals — kilometres per driver per day — update automatically.
• Order detail panel — Clicking any order opens a slide-in panel with customer details, addresses, weight, pricing, pallet management, and driver notes.
• Webfleet integration — Driver instructions can be previewed and sent directly to on-board fleet computers via the Webfleet API — one click per order.
• Order management — Full create, edit, and delete functionality for freight orders. A tabular orders view provides an overview of the entire backlog.
• Driver management — Add, edit, and remove drivers. Each driver is assigned a unique colour for easy identification on the board.
• Search and filtering — The sidebar supports real-time search by customer name, order number, or article, with filters to narrow the list by status group.
• Toast notifications — Non-blocking feedback messages confirm every action (save, send, delete) without interrupting the planning workflow.

Development

The application is written in pure vanilla JavaScript using native ES6 modules — no build tools, no bundlers, no third-party libraries. This was a deliberate choice: the result is a lightweight, maintainable codebase with zero dependency risk and no upgrade treadmill.

The architecture separates concerns into focused modules, each with a single responsibility:

• State module — Single source of truth for all application data. All mutations flow through one place, with automatic localStorage persistence across sessions.
• Event bus — A lightweight publish/subscribe system that lets modules communicate without importing each other directly, keeping each file independently testable.
• API layer — A thin abstraction layer wraps all data operations as Promises. Swapping the mock data for real server calls requires changing only this one file.
• View modules — Separate modules handle the board grid, the sidebar, modals, cards, drag-and-drop, the orders view, and the drivers view — one concern per file.
• Design tokens — All visual values (colour, spacing, radius, shadow, transition) are defined as CSS custom properties in a single variables file, keeping the UI consistent and easy to update.

The project was rebuilt from scratch — replacing a monolithic 2,800-line single-file prototype — into a structured, multi-file architecture that is straightforward to extend and hand off. Full developer documentation, including an API reference, is shipped alongside the application.

Technology

HTML5, CSS3 Custom Properties, CSS Grid, Flexbox, Vanilla JavaScript ES6, Native ES Modules, Web Drag & Drop API, localStorage, Promises / async–await, Pub/Sub event bus, Webfleet API.

No frameworks. No bundlers. No external libraries. The entire application runs directly in the browser, making it straightforward to host, deploy, and maintain.

Outcome

Planners now have one tool that covers the full daily workflow: pulling in new orders, assigning them to drivers, reviewing the week at a glance, and sending route instructions to the cab — without switching between applications or systems.

Because the codebase is modular and the API layer is fully abstracted, connecting the application to a backend database or expanding it with new features is a straightforward next step that does not require rewriting existing logic.