# language: fr @admin @moderation @dashboard Fonctionnalité: Dashboard modération pour modérateurs En tant que modérateur Je veux accéder à un dashboard centralisé de modération Afin de traiter efficacement les signalements et gérer les sanctions # 14.4 - Outils modérateurs - Dashboard Contexte: Étant donné que je suis connecté en tant que modérateur Et que j'ai accès au dashboard de modération # Vue d'ensemble du dashboard Scénario: Affichage du dashboard principal Étant donné que j'accède au dashboard de modération Quand la page se charge Alors je vois les sections principales: | section | position | contenu | | En-tête | Haut | Logo, nom utilisateur, rôle (Junior/Senior)| | Statistiques globales | Bandeau haut | Signalements en attente, traités aujourd'hui, temps moyen | | File d'attente prioritaire | Gauche | Signalements CRITIQUES et HAUTE priorité | | File d'attente normale | Centre | Signalements MOYENNE et BASSE priorité | | Fil d'activité | Droite | Actions récentes de l'équipe | | Navigation | Sidebar gauche | Signalements, Sanctions, Appels, Stats | Et toutes les sections sont chargées en <2 secondes Scénario: Statistiques globales en temps réel Étant donné que je consulte les statistiques du dashboard Quand je vérifie les KPIs affichés Alors je vois les métriques suivantes: | métrique | valeur exemple | mise à jour | | Signalements en attente | 42 | Temps réel | | Signalements traités aujourd'hui | 138 | Temps réel | | Temps moyen de traitement | 45 min | Toutes les 5min| | Mon temps moyen (personnel) | 38 min | Toutes les 5min| | SLA respecté (24h) | 94% | Temps réel | Et les métriques s'actualisent automatiquement Et un badge de notification clignote si >50 signalements en attente # Files d'attente séparées par priorité Scénario: File d'attente CRITIQUE (24/7) Étant donné que 5 signalements de priorité CRITIQUE sont en attente Quand j'affiche la file CRITIQUE Alors je vois une liste rouge avec les signalements: | colonne | contenu exemple | ordre tri | | Priorité score | 95 (badge rouge "URGENT") | Score décroissant| | Titre contenu | "Podcast #42" | - | | Catégorie IA | 🚫 Haine & violence (97%) | - | | Signalé par | @user123 (⭐ Or) + 3 autres | - | | Temps écoulé | "Il y a 45 min" (rouge si >1h) | - | | Actions rapides | [Écouter] [Valider] [Rejeter] | - | Et la file CRITIQUE est toujours visible en haut de page Et une alerte sonore se déclenche si nouveau signalement CRITIQUE Scénario: File d'attente HAUTE priorité Étant donné que 15 signalements de priorité HAUTE sont en attente Quand j'affiche la file HAUTE Alors je vois une liste orange avec les mêmes colonnes Et les signalements sont triés par score de priorité décroissant Et un compteur "⏰ 23h restantes pour SLA 24h" s'affiche Et la file s'actualise toutes les 30 secondes Scénario: File d'attente MOYENNE et BASSE Étant donné que 20 signalements MOYENNE et 10 BASSE sont en attente Quand j'affiche ces files Alors elles sont regroupées dans un onglet "Autres signalements" Et je peux filtrer par priorité MOYENNE ou BASSE Et ces signalements sont traités après les priorités hautes # Badge qualité du signaleur Scénario: Identification des signaleurs de confiance Étant donné qu'un signalement provient d'un utilisateur Badge Or Quand j'affiche la file d'attente Alors je vois le badge "⭐ Or" à côté du pseudo Et un tooltip s'affiche: """ Utilisateur de confiance Score fiabilité: 95/100 Historique: 54 signalements validés / 60 envoyés (90%) """ Et je sais que ce signalement est probablement pertinent Scénario: Signalements multiples du même contenu Étant donné qu'un contenu a été signalé par 6 utilisateurs Quand j'affiche le signalement Alors je vois "Signalé par @user1 + 5 autres" Et je peux cliquer pour voir la liste complète: | signaleur | badge | catégorie choisie | commentaire | | @user1 | Or | Haine & violence | "Propos à 2:30" | | @user2 | Argent| Haine & violence | "Discriminatoire" | | @user3 | - | Haine & violence | "" | | @user4 | Bronze| Fausse info | "Désinformation" | | @user5 | - | Autre | "Contenu choquant" | | @user6 | Or | Haine & violence | "Passage 2:25-2:45" | Et je vois que 5/6 signaleurs ont choisi la même catégorie Et cela renforce la probabilité de violation # Filtres et recherche Scénario: Filtrer les signalements par catégorie Étant donné que je suis sur le dashboard Quand je clique sur le filtre "Catégorie" Alors je vois les 7 catégories: | catégorie | nombre en attente | | 🚫 Haine & violence | 12 | | 🔞 Contenu sexuel | 5 | | ⚖️ Illégalité | 2 | | 🎵 Droits d'auteur | 8 | | 📧 Spam | 15 | | ❌ Fausse information | 7 | | 🔧 Autre | 3 | Et je peux cliquer pour filtrer par catégorie Et le filtre s'applique instantanément Scénario: Rechercher un signalement spécifique Étant donné que je veux rechercher un signalement Quand je tape "podcast" dans la barre de recherche Alors les résultats s'affichent en temps réel: | recherche dans | | Titre du contenu | | Pseudo du créateur | | Commentaires signaleurs | | Numéro de ticket | Et les résultats sont mis en évidence Et je peux cliquer pour ouvrir le signalement Scénario: Filtrer par assignation Étant donné que je suis modérateur junior Quand je clique sur le filtre "Assignation" Alors je vois les options: | option | nombre | | Assignés à moi | 8 | | Non assignés | 25 | | Assignés à d'autres | 9 | | Tous | 42 | Et je peux voir uniquement mes signalements Et je peux m'auto-assigner un signalement non assigné # Actions rapides depuis la liste Scénario: Actions rapides sans ouvrir le détail Étant donné que je vois un signalement évident (spam) Et que le score IA est de 98% Quand j'utilise les actions rapides Alors je peux cliquer sur: | action | raccourci clavier | effet | | Écouter | E | Lance le player audio | | Approuver | A | Valide le signalement | | Rejeter | R | Rejette le signalement | | Escalade | S (Senior) | Transfère à un modérateur senior| | Détails | D | Ouvre la page détaillée | Et l'action est immédiate Et le signalement disparaît de la liste Scénario: Validation rapide avec confirmation Étant donné que je clique sur "Approuver" (A) Quand l'action est déclenchée Alors une modal de confirmation s'affiche: """ Valider ce signalement ? Action: Retirer le contenu + Strike 1 au créateur Contenu: "Podcast #42" par @createur [Annuler] [Confirmer] """ Et je peux confirmer avec Entrée ou cliquer Et si je confirme, l'action est immédiate Et le signalement passe en "Traité" # Fil d'activité en temps réel Scénario: Affichage du fil d'activité de l'équipe Étant donné que je consulte le fil d'activité Quand je vérifie les dernières actions Alors je vois les actions récentes de l'équipe en temps réel: """ Il y a 2 min - @mod_alice a validé signalement #12345 (Spam) Il y a 5 min - @mod_bob a rejeté signalement #12344 (Non fondé) Il y a 8 min - @mod_charlie a escaladé signalement #12343 (Complexe) Il y a 12 min - @mod_alice a approuvé appel #APP-456 """ Et le fil se met à jour en temps réel (WebSocket) Et je vois qui travaille sur quoi Et cela améliore la collaboration Scénario: Collaboration sur cas complexes Étant donné qu'un modérateur senior travaille sur un cas complexe Quand il ajoute un commentaire interne Alors le commentaire apparaît dans le fil d'activité: """ @mod_senior a commenté le signalement #12350: "Besoin d'un second avis sur ce cas. Passage 3:42 borderline." """ Et je peux cliquer pour voir le signalement Et je peux répondre au commentaire Et cela facilite l'entraide entre modérateurs # Statistiques personnelles Scénario: Voir mes statistiques personnelles Étant donné que je clique sur mon profil modérateur Quand j'accède à mes statistiques Alors je vois: | métrique | valeur | période | | Signalements traités | 342 | Ce mois | | Temps moyen de traitement | 38 min | Ce mois | | Précision (appels rejetés) | 94% | Ce mois | | Signalements/jour | 18 | Moyenne 30j | | Médaille de performance | 🥈 Argent | - | Et je peux comparer avec la moyenne de l'équipe Et cela me motive à améliorer mes performances Plan du Scénario: Médailles de performance modérateur Étant donné que mon temps moyen est de min Et que ma précision est de % Quand le système calcule ma médaille Alors je reçois la médaille "" Exemples: | temps | precision | medaille | | 25 | 97 | 🥇 Or (Top performer) | | 35 | 92 | 🥈 Argent (Bon) | | 50 | 85 | 🥉 Bronze (Standard) | # Notifications et alertes Scénario: Alerte sonore pour signalement CRITIQUE Étant donné que je travaille sur le dashboard Quand un nouveau signalement CRITIQUE arrive Alors une alerte sonore se déclenche (bip urgent) Et une notification desktop s'affiche: """ 🚨 Nouveau signalement CRITIQUE Contenu: "Podcast #XX" - Violence [Traiter maintenant] """ Et le signalement apparaît en tête de liste (fond rouge) Et je suis immédiatement alerté Scénario: Notification si SLA bientôt dépassé Étant donné qu'un signalement HAUTE priorité est en attente depuis 22h Quand il reste 2h avant le SLA de 24h Alors une notification s'affiche: """ ⚠️ SLA bientôt dépassé Signalement #12345 - Haine & violence Deadline dans 2h [Prendre en charge] """ Et le signalement est mis en évidence en orange Et je peux cliquer pour le traiter en priorité # Auto-refresh et temps réel Scénario: Actualisation automatique des données Étant donné que je suis sur le dashboard Quand de nouvelles données arrivent Alors le dashboard s'actualise automatiquement: | donnée | fréquence actualisation | | File d'attente | 30 secondes | | Statistiques globales | 5 minutes | | Fil d'activité | Temps réel (WebSocket) | | Mon temps moyen | 5 minutes | Et je n'ai pas besoin de rafraîchir manuellement Et les changements s'affichent avec une animation subtile # Responsive et performance Scénario: Dashboard responsive pour écrans larges Étant donné que j'utilise un écran 27" (2560x1440) Quand j'affiche le dashboard Alors les 3 colonnes sont affichées côte à côte: | colonne | largeur | | File prioritaire | 30% | | File normale | 45% | | Fil d'activité | 25% | Et je vois tout en un seul coup d'œil Et je peux travailler efficacement Scénario: Dashboard sur écran standard (1920x1080) Étant donné que j'utilise un écran Full HD Quand j'affiche le dashboard Alors les colonnes s'adaptent: | colonne | largeur | position | | File prioritaire | 60% | Gauche | | Fil d'activité | 40% | Droite | Et je peux basculer entre files avec onglets Et l'UX reste fluide Scénario: Performance du dashboard Étant donné que 100 signalements sont en attente Quand je charge le dashboard Alors le chargement initial prend <2 secondes Et l'affichage est fluide (60 FPS) Et la pagination charge 20 signalements à la fois Et le scroll est instantané Et la mémoire utilisée reste <500 MB # Dark mode pour modérateurs Scénario: Support du dark mode Étant donné que je travaille de nuit Quand j'active le dark mode Alors les couleurs s'adaptent: | élément | couleur light | couleur dark | | Fond page | Blanc | Noir (#1E1E1E) | | Cartes signalements | Gris clair | Gris foncé | | Badge CRITIQUE | Rouge vif | Rouge (#FF4444) | | Badge HAUTE | Orange | Orange (#FFA500) | | Texte principal | Noir | Blanc | Et le contraste reste optimal Et mes yeux sont moins fatigués # Accessibilité Scénario: Raccourcis clavier pour productivité Étant donné que je suis sur le dashboard Quand j'utilise les raccourcis clavier Alors je peux naviguer rapidement: | raccourci | action | | A | Approuver le signalement sélectionné| | R | Rejeter le signalement sélectionné | | E | Écouter le contenu | | D | Ouvrir les détails | | S | Escalader (modérateur senior) | | ↑ / ↓ | Naviguer dans la liste | | Entrée | Ouvrir le signalement sélectionné | | Échap | Fermer la modal/retour | Et je gagne en productivité (×2-3) # Coût infrastructure Scénario: Coût du dashboard de modération Étant donné que le dashboard est développé et déployé Quand on évalue le coût Alors le coût de développement est: | composant | technologie | coût | | Frontend | React + TanStack Table | 0€ (interne) | | Backend API | Go (existant) | 0€ | | WebSocket temps réel | Go + Redis | 0-20€/mois | | Hébergement dashboard | OVH (serveur existant) | 0€ (mutualisé) | Et le coût total est de 0-20€/mois Et c'est inclus dans l'infrastructure existante