Planboard : planification du transport de marchandises

Client : TransportMaster
Secteur : Transport agricole / alimentation animale
Type : Application web sur mesure
Technologies : JavaScript natif, HTML5, CSS3

Une application de planification logistique sur mesure pour une entreprise néerlandaise de transport agricole. Les exploitants planifient les tournées des chauffeurs, gèrent les ordres de transport et transmettent les consignes directement aux ordinateurs de bord, depuis une interface unique dans le navigateur.

Le défi

L’entreprise est spécialisée dans le transport d’aliments pour animaux et de marchandises en vrac. Les exploitants géraient le planning hebdomadaire des chauffeurs — qui se rend où, avec quelle cargaison et quel jour — à l’aide de tableurs et de notes manuscrites. Les ordres de transport étaient suivis séparément du planning et toute modification devait être communiquée manuellement aux chauffeurs.

L’objectif était de tout réunir dans un tableau de planification sur mesure : une vue actualisée de la semaine complète, permettant d’affecter les ordres au bon chauffeur et au bon jour, puis d’envoyer les consignes directement aux ordinateurs de bord en un clic.

Design

L’interface s’organise autour d’une grille hebdomadaire : les chauffeurs sur l’axe vertical, les jours du lundi au samedi sur l’axe horizontal. L’exploitant voit toute la semaine d’un coup d’œil : où chaque chauffeur est affecté, combien de kilomètres il doit parcourir dans la journée et quels ordres restent à affecter dans la barre latérale.

Un système cohérent de couleurs permet d’identifier immédiatement l’état de chaque carte d’ordre de transport :

• GL — Geladen (chargé) — jaune
• OL — Ongeladen (non chargé) — rouge
• OLD — Dubbelset — bleu
• NEW — Nieuwe order (nouvel ordre) — gris
• DONE — Gereed (terminé) — vert

Le système de design repose entièrement sur des propriétés personnalisées CSS : un ensemble structuré de variables couvrant les espacements, les couleurs, la typographie, les ombres et la durée des animations. Tous les composants restent ainsi visuellement cohérents sans framework externe. Deux densités d’affichage, compacte et étendue, permettent de choisir entre une vue d’ensemble et des cartes plus détaillées selon la taille de l’écran et la tâche en cours.

Fonctionnalités

• Planification par glisser-déposer — Les ordres sont déplacés depuis la barre latérale vers une cellule chauffeur/jour du tableau. Les ramener dans la barre latérale supprime leur affectation.
• Navigation entre les semaines — Les exploitants passent aux semaines précédentes ou suivantes. Les totaux kilométriques par chauffeur et par jour s’actualisent automatiquement.
• Panneau de détail des ordres — Sélectionner un ordre ouvre un panneau latéral contenant les informations client, les adresses, le poids, les tarifs, la gestion des palettes et les notes destinées au chauffeur.
• Intégration Webfleet — Les consignes peuvent être prévisualisées puis envoyées directement aux ordinateurs de bord via l’API Webfleet, en un clic par ordre.
• Gestion des ordres de transport — Création, modification et suppression complètes des ordres. Une vue tabulaire présente l’ensemble des ordres en attente.
• Gestion des chauffeurs — Ajout, modification et suppression des chauffeurs. Chacun possède une couleur propre pour être facilement identifié dans le tableau.
• Recherche et filtres — La barre latérale permet une recherche instantanée par nom de client, numéro d’ordre ou article, avec des filtres par groupe de statuts.
• Notifications discrètes — Des messages non bloquants confirment chaque action — enregistrement, envoi ou suppression — sans interrompre la planification.

Développement

L’application est écrite en JavaScript natif avec des modules ES6, sans outil de compilation, outil de regroupement ni bibliothèque tierce. Ce choix délibéré produit une base de code légère et maintenable, sans risque lié aux dépendances et sans course permanente aux mises à niveau.

L’architecture répartit les responsabilités dans des modules ciblés, chacun chargé d’un seul rôle :

• Module d’état — Source de référence unique pour les données de l’application. Toutes les modifications passent par un point central, avec conservation automatique dans localStorage entre les sessions.
• Bus d’événements — Un système léger de publication/abonnement permet aux modules de communiquer sans s’importer directement les uns les autres. Chaque fichier reste testable indépendamment.
• Couche API — Une fine couche d’abstraction expose toutes les opérations de données sous forme de promesses. Remplacer les données simulées par de vrais appels serveur ne nécessite de modifier que ce fichier.
• Modules de vue — Des modules distincts gèrent la grille, la barre latérale, les fenêtres modales, les cartes, le glisser-déposer, la vue des ordres et celle des chauffeurs : une responsabilité par fichier.
• Variables de design — Toutes les valeurs visuelles — couleurs, espacements, rayons, ombres et transitions — sont définies comme propriétés personnalisées CSS dans un seul fichier, ce qui facilite la cohérence et les mises à jour de l’interface.

Le projet a été entièrement reconstruit : le prototype monolithique de 2 800 lignes dans un seul fichier a été remplacé par une architecture structurée en plusieurs fichiers, facile à étendre et à transmettre. Une documentation complète pour les développeurs, comprenant une référence de l’API, accompagne l’application.

Technologies

HTML5, propriétés personnalisées CSS3, CSS Grid, Flexbox, JavaScript natif ES6, modules ES natifs, API web Drag & Drop, localStorage, Promises / async–await, bus d’événements Pub/Sub, API Webfleet.

Aucun framework, aucun outil de regroupement et aucune bibliothèque externe. L’application entière fonctionne directement dans le navigateur, ce qui simplifie l’hébergement, le déploiement et la maintenance.

Résultat

Les exploitants disposent désormais d’un outil unique pour toute leur journée : intégrer de nouveaux ordres, les affecter aux chauffeurs, consulter la semaine d’un coup d’œil et transmettre les consignes de tournée aux cabines, sans changer d’application ni de système.

Grâce à la modularité du code et à l’abstraction complète de la couche API, relier l’application à une base de données serveur ou ajouter des fonctions constitue une étape simple, qui ne nécessite pas de réécrire la logique existante.