Lire toutes les conversations de votre chatbot au même endroit
Vos conversations de chatbot dorment dans une table, vos leads qualifiés dans une autre. Pour savoir ce qui se passe sur votre site, vous ouvrez votre base et vous faites défiler des lignes brutes. Et le jour où vous bricolez une page pour tout voir d'un coup, elle affiche des emails et des conversations privées, accessible à quiconque devine l'adresse.
Cette masterclass vous donne la page admin qui réunit tout en une seule vue : quatre zones (métriques en haut, lecteur de conversations au milieu, tableau de leads en bas, export propre), construites à partir de votre propre schéma, et verrouillées pour que vous seul puissiez y accéder.
Ce que vous saurez faire à la fin
- Dessiner le schéma en quatre zones de votre dashboard : métriques, lecteur de conversations, tableau de leads, export.
- Protéger une page admin avant toute chose : accès réservé au rôle admin, redirection des autres, balise noindex.
- Exporter vos leads filtrés dans un fichier propre : point-virgule, encodage UTF-8 avec BOM, accents intacts.
- Niveau membre· le prompt prêt à coller qui transforme votre schéma en cahier des charges puis en code commenté, avec un mode interview si vous partez de zéro.
La protection se construit et se teste d'abord. Les quatre zones viennent ensuite, dans l'ordre de lecture de la page.
Une page, quatre zones, et la sécurité avant tout
Un dashboard admin n'est pas une page comme les autres : elle affiche des emails et des conversations privées. La méthode tient donc en un principe et quatre zones. Le principe : la protection d'accès se construit et se teste avant tout le reste. Les zones : métriques en haut, lecteur de conversations au milieu, tableau de leads en bas, export propre. Chaque zone répond à une question précise, et rien n'y est inventé : tout part de votre schéma et de vos tables réelles.
1La protection d'accès, d'aborddoute : « pourquoi commencer par là ? »
Seul un utilisateur au rôle admin peut voir la page ; tout autre visiteur est redirigé vers l'accueil. Ajoutez une balise noindex pour que la page ne soit jamais indexée par les moteurs de recherche. C'est la première chose à construire et la première à tester, avant la moindre zone : tant que ce verrou n'est pas vérifié, la page expose des données personnelles.
2La zone métriques : quatre chiffres, quatre questionsdoute : « quels chiffres choisir ? »
Quatre métriques en haut de page, pas plus. Chacune existe parce qu'elle répond à une question que vous vous posez vraiment. Pour chaque métrique : la requête qui la calcule, exécutée côté serveur (fonction RPC) si le volume de données est important, et la tendance par rapport à la période précédente, pour voir d'un coup d'oeil si ça monte ou si ça descend.
3Le lecteur de conversations : liste à gauche, détail à droitedoute : « comment lire sans se noyer ? »
À gauche, la liste des conversations : date, nombre de messages, profil détecté. À droite, le détail : les messages dans l'ordre, le visiteur d'un côté, le chatbot de l'autre, comme une messagerie. Ajoutez un filtre par date et par profil, et une recherche dans le contenu : c'est ce qui transforme un tas de lignes en outil de lecture.
4Le tableau de leads : vos colonnes, pas des colonnes génériquesdoute : « et si j'ai beaucoup de leads ? »
Le tableau affiche les colonnes exactes que vous avez choisies, ni plus ni moins. Trois propriétés non négociables : triables, filtrables, paginées. C'est la pagination et les filtres qui font tenir le tableau quand les leads s'accumulent.
5L'export propre : tout ce qui est filtré, pas seulement l'écrandoute : « pourquoi pas un copier-coller ? »
La fonction d'export prend tous les leads filtrés, pas seulement la page affichée à l'écran. Le fichier utilise le point-virgule comme séparateur et l'encodage UTF-8 avec BOM : c'est ce détail qui garde les accents intacts à l'ouverture dans un tableur. Le nom du fichier porte la date du jour, pour ne jamais confondre deux exports.
À vous de jouer : votre schéma en quatre zones
Prenez une feuille. C'est la matière exacte que le prompt vous demandera : tout ce que vous posez ici, il ne le devinera pas.
Le prompt prêt à coller
# RÔLE Tu es un développeur produit senior, spécialiste des dashboards d'administration sur Next.js et Supabase. Tu as un goût marqué pour les interfaces sobres et lisibles, et une obsession pour la sécurité des données personnelles. Tu ne t'appuies QUE sur ce que je te donne. Tout ce qui manque (nom d'une table, d'une colonne, d'un champ), tu me le demandes, tu ne l'inventes jamais. Si tu n'es pas sûr d'un point technique, tu le signales au lieu d'affirmer. # CONTEXTE Je construis une page admin privée sur mon site, qui réunit en une seule vue toutes les conversations de mon chatbot et tous mes leads qualifiés. Cette page est protégée : moi seul dois pouvoir y accéder. Elle s'organise en quatre zones : métriques en haut, lecteur de conversations au milieu, tableau de leads en bas, export propre des leads. Ma matière (si j'en ai) :
Le prompt transforme votre schéma en quatre zones en cahier des charges complet, puis en code commenté, protection d'accès en tête. Et si vous partez de zéro, son mode interview vous pose les questions zone par zone. Laissez votre email, je vous l'envoie.
Vérifiez que c'est à vous
Le code de votre dashboard vient d'être généré. Que testez-vous en premier, avant même de vérifier si les métriques sont justes ?
D'abord avec vos mots, sans regarder les options :
Expliquez-le pour l'ancrer
En une phrase, à un confrère qui veut bricoler sa page admin ce week-end : pourquoi la protection d'accès se construit et se teste avant les quatre zones ? Si vous savez le dire simplement, c'est à vous.
Ce que vous savez faire maintenant
- Structurer un dashboard admin en quatre zones qui répondent chacune à une question précise.
- Verrouiller une page sensible avant de la remplir : rôle admin, redirection, balise noindex, et le test qui le prouve.
- Préparer la matière exacte (métriques, colonnes, tables réelles) pour que le code soit généré sans rien inventer.
Commencez par la protection d'accès et testez-la avant de construire le reste : votre page affiche des emails et des conversations privées.
Continuez seul
Le dashboard lit des données sensibles, il ne doit jamais les exposer. Vérifiez en parallèle que vos règles de lecture protègent vos clients à la racine :
Protéger vos données à la racine →