Module 4 — Développement assisté

Fonctions du Dashboard

Capsule 5 min Type pratique Modalité e-learning Niveau maîtrise

Objectif opérationnel

À l'issue de cette leçon, le stagiaire ajoute les quatre fonctions opérationnelles à un dashboard (filtres, export, refresh, recherche) qui transforment un poster en outil de pilotage.

§ 01

Un dashboard sans fonction est un poster

Le dashboard généré en leçon 11 est joli. Il ne sert à rien. Sans fonctions opérationnelles, il n'est qu'un poster décoratif que l'utilisateur consulte une fois puis abandonne.

Quatre fonctions de base transforment le poster en outil de pilotage quotidien : filtres, export, rafraîchissement, recherche. C'est l'objet de cette leçon. Chacune se met en place en 5 à 10 minutes via Claude.

§ 02

Fonction 1 — Filtres persistants

Trois filtres standard couvrent la plupart des besoins :

Période : 7 jours, 30 jours, 90 jours, année en cours, plage personnalisée
Segmentation : par client, par catégorie, par équipe, par statut
Statut : en cours, terminé, annulé, en attente

Persistance dans l'URL — exigence critique

Les filtres doivent être persistants dans l'URL ou dans l'état applicatif. Si un utilisateur applique un filtre, recharge la page, et que le filtre disparaît, l'expérience est cassée. Tout le monde déteste ça. Demandez-le explicitement à Claude dans votre prompt.

→ Ajoute un sélecteur de période en haut du dashboard
   avec les options : 7 jours / 30 jours / 90 jours /
   année en cours / plage personnalisée.

   IMPÉRATIF : le filtre doit être persistant dans l'URL
   (paramètre query string). Au rechargement de la page,
   le filtre choisi doit être restauré.

§ 03

Fonction 2 — Export CSV (ou Excel)

L'export CSV ou Excel est attendu par défaut. Pour un dashboard B2B, c'est presque obligatoire. Vos utilisateurs veulent récupérer la donnée pour la retraiter ailleurs : présentation, calcul, archivage.

Critère critique

L'export doit respecter les filtres en cours. Ce que l'utilisateur voit à l'écran doit correspondre à ce qu'il télécharge. Sinon l'utilisateur perd confiance dans l'outil — il ne sait plus si le fichier exporté correspond à ce qu'il regarde.

→ Ajoute un bouton Export CSV en haut à droite du tableau.

   Contraintes :
   - exporte les données FILTRÉES en cours, pas tout le dataset
   - format CSV avec en-têtes de colonnes en première ligne
   - encodage UTF-8 BOM (pour Excel français)
   - nom du fichier : dashboard-AAAA-MM-JJ.csv

Une fonction exportToCSV qui produit un fichier téléchargeable côté navigateur tient en quelques dizaines de lignes — Claude la génère sans difficulté. Le BOM UTF-8 évite les caractères mal affichés à l'ouverture sur Excel français.

§ 04

Fonction 3 — Rafraîchissement

Un bouton Refresh manuel rassure plus qu'un rafraîchissement automatique invisible. L'utilisateur veut contrôler quand il actualise — c'est un acte conscient qui lui permet de vérifier qu'il regarde bien la dernière version.

Pour les données critiques en temps réel, ajoutez en plus un rafraîchissement automatique toutes les 30 secondes, ou utilisez les abonnements temps réel de Supabase (vus en leçon 08).

→ Ajoute un bouton Refresh en haut à droite
   (icône rotation, à côté du bouton Export).

   Comportement :
   - relance les requêtes de données
   - affiche un spinner pendant le rechargement
   - timestamp du dernier refresh visible
     (« mis à jour il y a 5 secondes »)

§ 05

Fonction 4 — Recherche dans le tableau

Un champ de recherche en haut du tableau, qui filtre les lignes au fur et à mesure de la frappe. Une fonctionnalité simple à mettre en place qui change radicalement l'utilisabilité.

Si votre dashboard a un tableau, il doit avoir cette recherche. Pas optionnel. Sans elle, l'utilisateur qui cherche une ligne précise dans 200 entrées est bloqué.

→ Ajoute un champ de recherche au-dessus du tableau.

   Comportement :
   - filtre les lignes en temps réel pendant la frappe
   - insensible à la casse
   - recherche sur toutes les colonnes texte simultanément
   - vide initial = aucun filtre
   - icône loupe à gauche du champ
   - bouton X pour effacer rapidement la recherche

§ 06

Test de bout en bout — enchaîner les quatre fonctions

Appliquer un filtre période (par exemple : 30 derniers jours). Vérifier que les KPI, graphiques et tableau se mettent à jour cohéremment.
Segmenter par client (ou autre dimension selon votre dashboard). Le filtre s'ajoute au précédent — les deux s'appliquent simultanément.
Rechercher un mot dans le tableau. Le filtre de recherche s'applique en plus des filtres globaux. Le tableau ne montre que les lignes correspondantes.
Cliquer Export CSV. Ouvrir le fichier téléchargé. Vérifier qu'il reflète exactement ce qui était à l'écran : période, segmentation, recherche tous appliqués. Si écart, c'est une régression à corriger immédiatement.

Exercice — appropriation

Une cinquième fonction propre à votre métier

Au-delà des quatre fonctions standard, identifiez UNE cinquième fonction propre à votre métier. Quelques exemples : assignation d'une ligne à un collaborateur, marquage d'une ligne pour suivi, génération d'un PDF récapitulatif, envoi d'un e-mail à partir des données filtrées, ajout rapide d'une nouvelle entrée depuis le dashboard. Faites-la implémenter par Claude en mode plan (Module 4 leçon 10). Documentez le résultat.

Cet exercice est à conserver dans votre dossier de stagiaire. Il n'est pas évalué mais il est tracé.

Sources officielles consultées

recharts.org graphiques React, supportent les mises à jour réactives
supabase.com/docs — Realtime abonnements temps réel Supabase pour rafraîchissement live

Vous savez ajouter les 4 fonctions opérationnelles (filtres persistants, export filtré, refresh, recherche) à un dashboard ?