Fonctions du Dashboard
Filtres persistants, export CSV, refresh et recherche.
Les quatre fonctions qui transforment une liste en outil.
Un tableau qui s'affiche vs un tableau qu'on utilise
La leçon 11 a généré le dashboard visuellement. Il affiche des données. Maintenant, on le rend opérationnel : les utilisateurs doivent pouvoir filtrer, exporter, rafraîchir et chercher. Ce sont ces quatre fonctions qui transforment une page d'affichage en outil métier.
Les filtres survivent au rechargement
Le problème des filtres classiques : l'utilisateur sélectionne statut=Actif, recharge la page — le filtre disparaît. Solution : stocker les filtres dans les paramètres d'URL.
Vous : Ajoute des filtres persistants sur le tableau des missions : - Filtre par statut (Actif, Terminé, En attente) - Filtre par période (ce mois, trimestre, année) Les filtres doivent être stockés dans l'URL (ex: ?statut=actif&periode=mois) pour être partageable et survivre au rechargement. → Claude génère les composants Select → Câble la logique useSearchParams (Next.js) → Les filtres sont dans l'URL et persistants
Un bouton, un fichier
L'export CSV est la fonctionnalité la plus demandée dans les applications métier. Les utilisateurs veulent sortir les données dans Excel. Claude le génère en une demande.
Vous : Ajoute un bouton "Exporter CSV" dans l'en-tête du tableau. Au clic, il doit : - Exporter les lignes affichées (en tenant compte des filtres actifs) - Colonnes : client, statut, date début, date fin, montant - Nom de fichier : missions-[date du jour].csv - Encodage UTF-8 avec BOM (pour Excel) → Claude génère la fonction d'export → Déclenche le téléchargement via Blob + URL.createObjectURL → Le BOM évite les problèmes d'accents dans Excel
Sans BOM (Byte Order Mark), les accents français s'affichent en caractères illisibles dans Excel. Claude le sait si vous le précisez dans la demande. Toujours spécifier l'encodage UTF-8 BOM pour les exports destinés à Excel.
Données toujours fraîches
Pour les dashboards métier consultés tout au long de la journée, rafraîchir les données sans recharger la page est indispensable.
Trouver en tapant
La recherche plein texte dans un tableau est une fonctionnalité attendue. Deux variantes selon le besoin.
Recherche dans les données chargées
Filtre les lignes affichées par le texte saisi. Simple, instantané. Limite : ne cherche que dans les données déjà chargées (pagination).
Recherche dans toute la base
La requête Supabase utilise .ilike() ou la recherche full-text PostgreSQL. Cherche dans toutes les lignes. Plus lent, mais exhaustif.
Attendre la fin de frappe
Sans débounce, une requête Supabase est lancée à chaque touche. Avec débounce (300ms), la requête part 300ms après la dernière touche. Toujours demander le débounce.
Demande à Claude
« Ajoute une barre de recherche sur le nom du client avec débounce de 300ms et recherche côté serveur via .ilike(). »
Cap sur la leçon 13
Votre dashboard est fonctionnel : filtres, export, refresh, recherche. La leçon suivante couvre le post-MVP — tests, performance, refactoring et documentation.
Exercice — appropriation
Implémentez les quatre fonctions sur votre projet de référence. Pour chacune, utilisez Claude Code avec un prompt précis (comme les exemples de cette leçon). Notez ce qui a fonctionné directement, ce qui a demandé un ajustement, et ce qui a nécessité une correction manuelle.
Quiz · Fonctions du Dashboard
8 questions · une seule bonne réponse par question · vous pouvez recommencer autant de fois que nécessaire.