Enhance challenge management and badge components: Implement event dispatch for refreshing challenge badges after various actions (acceptance, rejection, deletion, cancellation) in ChallengeManagement and ChallengesSection. Update ChallengeBadge to listen for refresh events, ensuring accurate challenge count display and improved user experience.

components/admin/ChallengeManagement.tsx

@@ -100,6 +100,8 @@ export default function ChallengeManagement() {
         setWinnerId("");
         setAdminComment("");
         fetchChallenges();
+        // Rafraîchir le badge des défis
+        window.dispatchEvent(new Event("refreshChallenges"));
         setTimeout(() => setSuccessMessage(null), 5000);
       } else {
         setErrorMessage(result.error || "Erreur lors de la validation");
@@ -126,6 +128,8 @@ export default function ChallengeManagement() {
         setSelectedChallenge(null);
         setAdminComment("");
         fetchChallenges();
+        // Rafraîchir le badge des défis
+        window.dispatchEvent(new Event("refreshChallenges"));
         setTimeout(() => setSuccessMessage(null), 5000);
       } else {
         setErrorMessage(result.error || "Erreur lors du rejet");
@@ -181,6 +185,8 @@ export default function ChallengeManagement() {
       if (result.success) {
         setSuccessMessage("Défi supprimé avec succès");
         fetchChallenges();
+        // Rafraîchir le badge des défis
+        window.dispatchEvent(new Event("refreshChallenges"));
         setTimeout(() => setSuccessMessage(null), 5000);
       } else {
         setErrorMessage(result.error || "Erreur lors de la suppression");
@@ -200,6 +206,8 @@ export default function ChallengeManagement() {
       if (result.success) {
         setSuccessMessage("Défi annulé avec succès");
         fetchChallenges();
+        // Rafraîchir le badge des défis
+        window.dispatchEvent(new Event("refreshChallenges"));
         setTimeout(() => setSuccessMessage(null), 5000);
       } else {
         setErrorMessage(result.error || "Erreur lors de l'annulation");
@@ -219,6 +227,8 @@ export default function ChallengeManagement() {
       if (result.success) {
         setSuccessMessage("Défi réactivé avec succès");
         fetchChallenges();
+        // Rafraîchir le badge des défis
+        window.dispatchEvent(new Event("refreshChallenges"));
         setTimeout(() => setSuccessMessage(null), 5000);
       } else {
         setErrorMessage(result.error || "Erreur lors de la réactivation");
@@ -242,6 +252,8 @@ export default function ChallengeManagement() {
       if (result.success) {
         setSuccessMessage("Défi accepté avec succès");
         fetchChallenges();
+        // Rafraîchir le badge des défis
+        window.dispatchEvent(new Event("refreshChallenges"));
         setTimeout(() => setSuccessMessage(null), 5000);
       } else {
         setErrorMessage(result.error || "Erreur lors de l'acceptation");

components/challenges/ChallengesSection.tsx

@@ -90,6 +90,8 @@ export default function ChallengesSection({
         setSuccessMessage("Défi créé avec succès !");
         setShowCreateForm(false);
         fetchChallenges();
+        // Rafraîchir le badge des défis
+        window.dispatchEvent(new Event("refreshChallenges"));
         setTimeout(() => setSuccessMessage(null), 5000);
       } else {
         setErrorMessage(result.error || "Erreur lors de la création du défi");
@@ -107,6 +109,8 @@ export default function ChallengesSection({
           "Défi accepté ! En attente de désignation du gagnant."
         );
         fetchChallenges();
+        // Rafraîchir le badge des défis
+        window.dispatchEvent(new Event("refreshChallenges"));
         setTimeout(() => setSuccessMessage(null), 5000);
       } else {
         setErrorMessage(result.error || "Erreur lors de l'acceptation");
@@ -122,6 +126,8 @@ export default function ChallengesSection({
       if (result.success) {
         setSuccessMessage("Défi annulé");
         fetchChallenges();
+        // Rafraîchir le badge des défis
+        window.dispatchEvent(new Event("refreshChallenges"));
         setTimeout(() => setSuccessMessage(null), 5000);
       } else {
         setErrorMessage(result.error || "Erreur lors de l'annulation");

components/navigation/ChallengeBadge.tsx

@@ -14,15 +14,14 @@ export default function ChallengeBadge({
 }: ChallengeBadgeProps) {
   const [count, setCount] = useState(initialCount);
 
+  // Utiliser le count initial (déjà récupéré côté serveur)
   useEffect(() => {
-    // Si on a déjà un initialCount, l'utiliser et ne pas faire d'appel immédiat
-    // On rafraîchit seulement après un délai pour éviter les appels redondants
-    if (initialCount > 0) {
     setCount(initialCount);
-    }
+  }, [initialCount]);
 
-    // Récupérer le nombre de défis actifs (seulement si pas d'initialCount ou pour rafraîchir)
+  // Écouter les événements de refresh des défis (déclenché après acceptation/annulation)
-    const fetchActiveCount = async () => {
+  useEffect(() => {
+    const handleRefreshChallenges = async () => {
       try {
         const response = await fetch("/api/challenges/active-count");
         const data = await response.json();
@@ -32,16 +31,11 @@ export default function ChallengeBadge({
       }
     };
 
-    // Si pas d'initialCount, charger immédiatement, sinon attendre 30s avant le premier refresh
+    window.addEventListener("refreshChallenges", handleRefreshChallenges);
-    if (initialCount === 0) {
+    return () => {
-      fetchActiveCount();
+      window.removeEventListener("refreshChallenges", handleRefreshChallenges);
-    }
+    };
-
+  }, []);
-    // Rafraîchir toutes les 30 secondes
-    const interval = setInterval(fetchActiveCount, 30000);
-
-    return () => clearInterval(interval);
-  }, [initialCount]);
 
   return (
     <Link