Add admin challenge management features: Implement functions for canceling and reactivating challenges, enhance error handling, and update the ChallengeManagement component to support these actions. Update API to retrieve all challenge statuses for admin and improve UI to display active challenges count.

components/navigation/ChallengeBadge.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+
+interface ChallengeBadgeProps {
+  initialCount?: number;
+  onNavigate?: () => void;
+}
+
+export default function ChallengeBadge({
+  initialCount = 0,
+  onNavigate,
+}: ChallengeBadgeProps) {
+  const [count, setCount] = useState(initialCount);
+
+  useEffect(() => {
+    // Récupérer le nombre de défis actifs
+    const fetchActiveCount = async () => {
+      try {
+        const response = await fetch("/api/challenges/active-count");
+        const data = await response.json();
+        setCount(data.count || 0);
+      } catch (error) {
+        console.error("Error fetching active challenges count:", error);
+      }
+    };
+
+    fetchActiveCount();
+
+    // Rafraîchir toutes les 30 secondes
+    const interval = setInterval(fetchActiveCount, 30000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <Link
+      href="/challenges"
+      onClick={onNavigate}
+      className={`inline-flex items-center gap-1.5 transition text-xs font-normal uppercase tracking-widest ${
+        onNavigate ? "py-2" : ""
+      }`}
+      style={{ color: "var(--foreground)" }}
+      onMouseEnter={(e) =>
+        (e.currentTarget.style.color = "var(--accent-color)")
+      }
+      onMouseLeave={(e) =>
+        (e.currentTarget.style.color = "var(--foreground)")
+      }
+      title={
+        count > 0
+          ? `${count} défi${count > 1 ? "s" : ""} actif${count > 1 ? "s" : ""}`
+          : "Défis"
+      }
+    >
+      <span>DÉFIS</span>
+      {count > 0 && (
+        <span
+          className="flex h-5 w-5 min-w-[20px] items-center justify-center rounded-full text-[10px] font-bold leading-none"
+          style={{
+            backgroundColor: "var(--accent)",
+            color: "var(--background)",
+          }}
+        >
+          {count > 9 ? "9+" : count}
+        </span>
+      )}
+    </Link>
+  );
+}
+