Planboard voor vrachtlogistiek

Klant: TransportMaster
Sector: Landbouwvervoer / veevoer
Type: Specifieke webtoepassing
Stapel: Vanilla JavaScript, HTML5, CSS3

Een op maat gemaakte logistieke planning applicatie voor een Nederlandse landbouwvervoersbedrijf, waarmee planners de route van de bestuurder kunnen plannen, vrachtbestellingen kunnen beheren en instructies direct aan boord van de vlootcomputers kunnen sturen allemaal vanuit een enkele browsergebaseerde interface.

De uitdaging

Het bedrijf is gespecialiseerd in diervoeder en bulk vrachttransport. Hun planners beheerden het wekelijkse bestuurder schema wie reist waar, wat, op welke dag met behulp van een mix van spreadsheets en handgeschreven notities. Bestellingen werden apart van het schema gevolgd, en eventuele wijzigingen moesten handmatig worden meegedeeld aan bestuurders.

Het doel was om alles te combineren in één speciaal ontworpen planningsbord: een live overzicht van de hele week waarbij bestellingen aan de juiste bestuurder en dag kunnen worden toegewezen, en de instructies van de bestuurder met één klik direct kunnen worden verzonden naar de computers van de cabinevloot.

Ontwerp

De interface is gestructureerd rond een weekgrid: bestuurders op de verticale as, maandag tot en met zaterdag op de horizontale as. Een planner kan de hele week in één oogopslag zien welke bestuurder is gepland waar, hoeveel kilometers ze die dag zullen afleggen en welke bestellingen nog niet zijn toegewezen in de zijbalk.

Een consistent, gekodeerd statusstelsel geeft onmiddellijke visuele feedback op elke bestelkaart:

• GL Geladen (geladen) geel
• OL Onbelast (ontladen) rood
• OUD Dubbelset blauw
• Nieuwe orde Nieuwe orde Nieuwe orde Nieuwe orde Nieuwe orde Nieuwe orde Nieuwe orde Nieuwe orde Nieuwe orde Nieuwe orde Nieuwe orde Nieuwe orde Nieuwe orde Nieuwe orde Nieuwe orde Nieuwe orde Nieuwe orde Nieuwe orde Nieuwe orde Nieuwe orde Nieuwe orde Grijs
• Gedaan Gereed groen

Het ontwerp systeem is volledig gebouwd met CSS aangepaste eigenschappen een gestructureerde set van design tokens die ruimte, kleur, typografie, schaduw en animatie timing omvatten. Dit zorgt voor visuele consistentie over alle componenten zonder afhankelijk te zijn van een extern kader. Met twee modus voor beelddichtheid (compact en uitgebreid) kunnen planners wisselen tussen een hoogwaardig overzicht en een meer gedetailleerde kaartlijst, afhankelijk van de schermgrootte en de taak.

Kenmerken

• Draag-en-drop-planning Bestellingen worden vanaf de zijbalk rechtstreeks naar elke bestuurder/dagcel op het bord gesleept.
• Live weeknavigatie De planners gaan wekenlang vooruit en achteruit. De dagelijkse totaal kilometer per bestuurder per dag wordt automatisch bijgewerkt.
• Bestel detailpaneel Door op een bestelling te klikken, wordt een slide-in-paneel geopend met klantgegevens, adressen, gewicht, prijzen, paletbeheer en driversnootjes.
• Webfleet integratie De instructies van de bestuurder kunnen worden bekeken en via de Webfleet API één klik per bestelling rechtstreeks naar de aan boord van de vlootcomputers worden verzonden.
• Bestelbeheer Volledige functionaliteit voor het maken, bewerken en verwijderen van vrachtbestellingen.
• Bestuur van bestuurders Voeg, bewerken en verwijderen van bestuurders. Aan elke bestuurder wordt een unieke kleur toegewezen voor gemakkelijke identificatie op het bord.
• Zoeken en filteren De zijbalk ondersteunt real-time zoeken naar klantnaam, bestelnummer of artikel, met filters om de lijst naar statusgroep te beperken.
• Toastmeldingen Niet-blokkerende feedbackberichten bevestigen elke actie (opslaan, sturen, verwijderen) zonder de planning workflow te onderbreken.

Ontwikkeling

De applicatie is geschreven in pure vanille JavaScript met behulp van inheemse ES6-modules geen bouwgereedschappen, geen bundlers, geen bibliotheken van derden. Dit was een opzettelijke keuze: het resultaat is een lichtgewicht, onderhoudbare codebase met nul afhankelijkheidsrisico en geen upgraden loopband.

De architectuur verdeelt de problemen in gefocuste modules, elk met een enkele verantwoordelijkheid:

• Staatsmodule Een enkele bron van waarheid voor alle applicatiegegevens. Alle mutaties stromen door één plaats, met automatische localStorage persistentie over sessies heen.
• Evenementenbus Een lichtgewicht publish/subscribe systeem waarmee modules communiceren zonder elkaar rechtstreeks te importeren, waardoor elk bestand onafhankelijk kan worden getest.
• API-laag Een dunne abstractielaag omhult alle gegevensoperaties als Promises. Het wisselen van de mock-data voor echte serveroproepen vereist dat alleen dit één bestand wordt gewijzigd.
• Beziensmodules Afzonderlijke modules behandelen het bordgrid, de zijbalk, modalen, kaarten, sleep-en-drop, de orderweergave en de driversweergave één probleem per bestand.
• Ontwerp tokens Alle visuele waarden (kleur, afstand, radius, schaduw, overgang) worden gedefinieerd als CSS-op maat eigenschappen in een enkel variabele bestand, waardoor de UI consistent en gemakkelijk te updaten is.

Het project werd opnieuw gebouwd vanaf het niets vervangen van een monolithische 2,800-lijnen single-file prototype in een gestructureerde, multi-file architectuur die eenvoudig te uitbreiden en uit te geven is.

Technologie

HTML5, CSS3 Custom Properties, CSS Grid, Flexbox, Vanilla JavaScript ES6, Native ES Modules, Web Drag & Drop API, localStorage, Promises/asyncwait, Pub/Sub evenementenbus, Webfleet API.

Geen frameworks, geen bundlers, geen externe bibliotheken, de hele applicatie loopt rechtstreeks in de browser, waardoor het eenvoudig te hosten, te implementeren en te onderhouden is.

Het resultaat

De planners hebben nu één tool die de volledige dagelijkse workflow omvat: nieuwe bestellingen inhalen, aan bestuurders toewijzen, de week op een oogopslag bekijken en routininstructies naar de cabine sturen zonder tussen toepassingen of systemen te schakelen.

Omdat de codebase modulair is en de API-laag volledig is geabstraheerd, is het verbinden van de toepassing met een backend-database of het uitbreiden ervan met nieuwe functies een eenvoudige volgende stap die geen herschrijving van bestaande logica vereist.