Planboard voor vrachtlogistiek

Opdrachtgever: TransportMaster
Sector: Agrarisch transport / veevoer
Type: Webapplicatie op maat
Technologie: JavaScript, HTML5 en CSS3

Een logistieke planningsapplicatie op maat voor een Nederlands agrarisch transportbedrijf. Planners delen chauffeursroutes in, beheren vrachtorders en sturen instructies rechtstreeks naar boordcomputers, vanuit één browserinterface.

De uitdaging

Het bedrijf vervoert veevoer en bulkgoederen. Planners beheerden de weekplanning, met wie waarheen rijdt, met welke lading en op welke dag, in spreadsheets en handgeschreven notities. Orders werden los van de planning bijgehouden en wijzigingen moesten handmatig aan chauffeurs worden doorgegeven.

Het doel was alles samen te brengen in één planbord op maat: een actueel weekoverzicht waarop orders aan de juiste chauffeur en dag worden toegewezen en instructies met één klik naar de boordcomputer kunnen worden gestuurd.

Ontwerp

De interface bestaat uit een weekraster, met chauffeurs verticaal en maandag tot en met zaterdag horizontaal. De planner ziet in één oogopslag de hele week: waar iedere chauffeur is ingepland, hoeveel kilometer die per dag rijdt en welke orders in de zijbalk nog niet zijn toegewezen.

Een consequent statussysteem met kleuren geeft direct terugkoppeling op iedere orderkaart:

• GL — Geladen — geel
• OL — Ongeladen — rood
• OLD — Dubbelset — blauw
• NEW — Nieuwe order — grijs
• DONE — Gereed — groen

Het ontwerpsysteem is volledig opgebouwd uit CSS custom properties: een gestructureerde verzameling ontwerpvariabelen voor tussenruimtes, kleuren, typografie, schaduwen en animatietijden. Dat zorgt voor consistentie tussen componenten zonder extern framework. Twee weergavedichtheden, compact en uitgebreid, laten planners wisselen tussen een globaal overzicht en gedetailleerdere kaarten, afhankelijk van het scherm en de taak.

Functies

• Plannen met slepen en neerzetten — Orders worden vanuit de zijbalk naar een chauffeur-dagvak gesleept. Terugslepen naar de zijbalk maakt de toewijzing ongedaan.
• Direct door weken navigeren — Planners bladeren vooruit en terug door de weken. Dagtellingen, zoals kilometers per chauffeur per dag, worden automatisch bijgewerkt.
• Paneel met ordergegevens — Een order openen toont een inschuivend paneel met klantgegevens, adressen, gewicht, prijzen, palletbeheer en chauffeursnotities.
• Webfleet-koppeling — Instructies voor de chauffeur kunnen worden bekeken en via de Webfleet API direct naar de boordcomputer worden gestuurd, met één klik per order.
• Orderbeheer — Vrachtorders kunnen volledig worden aangemaakt, bewerkt en verwijderd. Een tabelweergave geeft overzicht over alle openstaande orders.
• Chauffeursbeheer — Chauffeurs toevoegen, bewerken en verwijderen. Iedere chauffeur krijgt een eigen kleur om die op het planbord gemakkelijk te herkennen.
• Zoeken en filteren — De zijbalk zoekt direct op klantnaam, ordernummer of artikel. Filters beperken de lijst tot een statusgroep.
• Korte bevestigingsmeldingen — Meldingen bevestigen iedere actie, zoals opslaan, versturen of verwijderen, zonder de planner in het werk te onderbreken.

Ontwikkeling

De applicatie is geschreven in JavaScript met native ES6-modules, zonder bouwtools, bundlers of bibliotheken van derden. Dat was een bewuste keuze: het resultaat is een lichte, onderhoudbare codebase zonder risico door externe afhankelijkheden en zonder een voortdurende reeks verplichte upgrades.

De architectuur verdeelt de taken over gerichte modules, elk met één verantwoordelijkheid:

• Toestandsmodule — Eén centrale bron voor alle applicatiegegevens. Alle wijzigingen lopen via dezelfde plek, met automatische opslag in localStorage tussen sessies.
• Gebeurtenissenbus — Een licht publish/subscribe-systeem laat modules communiceren zonder elkaar rechtstreeks te importeren. Daardoor blijft elk bestand afzonderlijk testbaar.
• API-laag — Een dunne abstractielaag verpakt alle gegevensbewerkingen als Promises. Om voorbeeldgegevens door echte serveraanroepen te vervangen, hoeft alleen dit bestand te worden aangepast.
• Weergavemodules — Afzonderlijke modules verzorgen het planbordraster, de zijbalk, dialoogvensters, kaarten, slepen en neerzetten, het orderoverzicht en het chauffeursoverzicht: één taak per bestand.
• Ontwerpvariabelen — Alle visuele waarden voor kleur, afstand, afronding, schaduw en overgang zijn als CSS custom properties in één variabelenbestand vastgelegd. Zo blijft de interface consistent en eenvoudig bij te werken.

Het project is volledig opnieuw opgebouwd. Een prototype van 2.800 regels in één bestand is vervangen door een gestructureerde architectuur met meerdere bestanden, die eenvoudig kan worden uitgebreid en overgedragen. De applicatie wordt geleverd met volledige ontwikkelaarsdocumentatie, inclusief API-naslagwerk.

Technologie

HTML5, CSS3 Custom Properties, CSS Grid, Flexbox, JavaScript ES6, native ES-modules, Web Drag & Drop API, localStorage, Promises / async–await, Pub/Sub-gebeurtenissenbus en Webfleet API.

Geen frameworks, bundlers of externe bibliotheken. De volledige applicatie draait rechtstreeks in de browser en is daardoor eenvoudig te hosten, uit te rollen en te onderhouden.

Resultaat

Planners hebben nu één hulpmiddel voor het volledige dagelijkse werk: nieuwe orders ophalen, deze aan chauffeurs toewijzen, de week in één oogopslag bekijken en ritinstructies naar de cabine sturen, zonder tussen applicaties of systemen te wisselen.

Omdat de codebase modulair is en de API-laag volledig is afgeschermd, kan de applicatie eenvoudig worden gekoppeld aan een backenddatabase of uitgebreid met nieuwe functies, zonder bestaande logica opnieuw te schrijven.