Un tableau de bord pour le commerce multi-boutiques.
J’ai conçu NyxBoard autour de la file de commandes : filtrer entre plusieurs boutiques, examiner une commande sans perdre sa place et voir chaque changement d’état se répercuter sur l’ensemble du tableau de bord.
- Année
- 2026
- Type
- Projet personnel
- Stack
- React + TypeScript
- Focus
- UI opérationnelle & gestion d’état
Nécessite une décision opérationnelle avant expédition.
Commande active en attente de préparation.
Expédiée avec numéro de suivi ; le compteur s’incrémente et le taux d’expédition progresse.
Marquée comme annulée et exclue du chiffre d’affaires actif.
Garder le tableau de bord clair et lisible
NyxBoard réunit les commandes de plusieurs boutiques, avec leurs filtres, leurs détails et leurs changements de statut. Il fallait garder ces actions à portée de main sans remplir tout l’écran de contrôles.
J’ai gardé la liste et le détail des commandes dans le même espace. On peut filtrer, ouvrir une commande, changer son statut, puis reprendre la liste là où on l’a laissée.
La vue opérationnelle
La vue d’ensemble et la liste utilisent le même état enregistré. Les commandes annulées sortent du chiffre d’affaires actif.
Périmètre boutique
Changer de boutique filtre le tableau de bord tout en préservant la comparaison globale.
Santé des expéditions
La ligne supérieure met en avant les chiffres prioritaires : chiffre d’affaires, total des commandes, révisions en attente, volume de file et taux d’expédition.
Volume & distribution
Expédier une commande modifie la répartition des statuts, mais ne change pas la courbe du chiffre d’affaires sur 14 jours.
Métriques synchronisées
La vue d’ensemble et la liste utilisent le même état enregistré. Les commandes annulées sortent du chiffre d’affaires actif.
L’espace commandes
Recherche, boutique, statut, tri et pagination sont synchronisés dans l’URL. Actualiser ou partager l’écran conserve exactement la même vue au lieu de réinitialiser la liste.
Ouvrir une page dédiée ferait perdre le filtre actif et la position de défilement. NyxBoard conserve la liste en arrière-plan et ouvre la commande dans un volet latéral, permettant révision et expédition sans quitter la file.
Contexte filtré
La vue Non expédiées isole les commandes nécessitant une action, tandis que les filtres restent enregistrés dans l’URL.
Inspection en place
La commande ORD-98420 s’ouvre dans un volet latéral pendant que la liste filtrée reste visible derrière.
État mis à jour
Marquer la commande comme expédiée actualise son statut, génère un numéro de suivi et met à jour les indicateurs d’expédition depuis l’état local de démo.
Contexte filtré
La vue Non expédiées isole les commandes nécessitant une action, tandis que les filtres restent enregistrés dans l’URL.
Espace commandes filtré sur neuf commandes non expédiées, dont ORD-98420.Inspection en place
La commande ORD-98420 s’ouvre dans un volet latéral pendant que la liste filtrée reste visible derrière.
Commande ORD-98420 ouverte dans un volet latéral au-dessus de la liste filtrée, avec bouton Marquer comme expédiée disponible.État mis à jour
Marquer la commande comme expédiée actualise son statut, génère un numéro de suivi et met à jour les indicateurs d’expédition depuis l’état local de démo.
Commande ORD-98420 marquée comme Expédiée avec transporteur et numéro de suivi générés ; la liste reste visible derrière.Priorisation responsive
J’ai maintenu le tableau sur petit écran au lieu de basculer chaque ligne en carte. Les colonnes secondaires s’effacent progressivement pour préserver les informations indispensables à l’identification et au traitement d’une commande.
Ce qui reste visible quand l’espace se réduit.
Toujours visible et sert de déclencheur principal.
Réapparaît à partir du breakpoint xl lorsque l’espace le permet.
Fusionné sous la cellule Référence sur écran compact.
Réapparaît à partir de 2xl avec une largeur suffisante.
Réapparaît au breakpoint lg.
Réapparaît au breakpoint xl.
Toujours visible.
Toujours visible.
Action explicite sur grand écran ; sur mobile, un appui sur la ligne ouvre la commande.
Conçu avec rigueur
Une grande partie du travail est invisible sur une capture d’écran. Les filtres doivent survivre au rafraîchissement, chaque mise à jour doit atteindre les vues dépendantes et le volet doit restituer le focus clavier au bon endroit.
Actualisation de l’état partagé
Flux de mutation localeL’utilisateur clique sur « Marquer comme expédiée » dans le volet
Met à jour l’état local de démo avec un indicateur de chargement immédiat pour le retour visuel.
orderService.markAsShipped(id) → version++
Enregistre la commande modifiée localement et incrémente le compteur de version.
React + TypeScript strict
Garantit le typage explicite des commandes, filtres et mutations à travers toute l’application.
État d’espace de travail dans l’URL
Recherche, boutique, statut, tri et pagination sont inscrits dans l’URL et validés avant exécution.
État partagé & actualisation
Lorsqu’une commande change, OrdersContext recalcule les données dérivées pour le tableau, les compteurs, la barre latérale et la vue d’ensemble.OrdersContext
Couche de service
orderService.ts centralise le filtrage, le tri, la pagination, les calculs de KPI et les mutations locales.orderService.ts
Persistance & chargement
localStorage préserve les modifications de démo entre les recharges, tandis que routes et graphiques sont chargés à la demande.localStorage
Les statuts associent texte et couleur, avec un contraste vérifié pour chaque badge.
#047857 sur #ecfdf5NyxBoard utilise une interface claire et très contrastée. Le traitement sombre encre, violet et cyan est propre à cette étude de cas, non au produit lui-même.
Le volet de commande et sa boîte de dialogue de confirmation exigent tous deux un parcours clavier prévisible.
- Dialogues & tableaux sémantiquesStructure de tableau HTML native et boîtes de dialogue labellisées sans recourir à des div génériques.
- Navigation clavier & lien d’évitementCommandes accessibles au clavier, touche Échap pour fermer le volet et lien d’évitement au sommet de l’interface.
- Restauration du focusFermer le volet restitue le focus sur la commande correspondante ; fermer la confirmation renvoie au bouton déclencheur.
- Mouvement réduitTransitions du volet et graphiques respectent les préférences prefers-reduced-motion.
prefers-reduced-motion - Graphiques accessiblesRésumés textuels concis doublant chaque représentation visuelle SVG.
Ce qui fonctionne
Je garderais la file de commandes au cœur du produit. La vue d’ensemble aide à repérer le travail à faire, mais c’est dans la liste et le volet latéral qu’on examine et met à jour chaque commande.
NyxBoard est un projet front-end. Les données sont injectées en local, la persistance s’opère dans le navigateur et l’authentification est simulée. Une version de production nécessiterait un véritable backend, des permissions fines et des intégrations avec les systèmes métiers.
API Backend
Déplacer la gestion des commandes de orderService.ts vers des endpoints API sécurisés.orderService.ts
Données côté serveur
Traiter le filtrage, le tri et la pagination côté serveur lorsque le volume dépasse les capacités du navigateur.
Gestion des permissions
Définir des rôles précis pour l’expédition, l’annulation ou l’exportation au lieu d’un accès démo indifférencié.
Intégrations réelles
Remplacer les états d’expédition simulés par des événements réels de transporteurs ou de plateformes e-commerce.