Refactor AdminPage and remove AdminPanel component: Simplify admin navigation by redirecting to preferences page and eliminating the AdminPanel component, streamlining the admin interface.

components/admin/AdminNavigation.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Button } from "@/components/ui";
+
+const adminSections = [
+  { id: "preferences", label: "Préférences UI", path: "/admin/preferences" },
+  { id: "users", label: "Utilisateurs", path: "/admin/users" },
+  { id: "events", label: "Événements", path: "/admin/events" },
+  { id: "feedbacks", label: "Feedbacks", path: "/admin/feedbacks" },
+  { id: "challenges", label: "Défis", path: "/admin/challenges" },
+  { id: "houses", label: "Maisons", path: "/admin/houses" },
+];
+
+export default function AdminNavigation() {
+  const pathname = usePathname();
+
+  return (
+    <div className="flex gap-4 mb-8 justify-center flex-wrap">
+      {adminSections.map((section) => {
+        const isActive = pathname === section.path || 
+          (section.path === "/admin/preferences" && pathname === "/admin");
+        
+        return (
+          <Button
+            key={section.id}
+            as={Link}
+            href={section.path}
+            variant={isActive ? "primary" : "secondary"}
+            size="md"
+            className={isActive ? "bg-pixel-gold/10" : ""}
+          >
+            {section.label}
+          </Button>
+        );
+      })}
+    </div>
+  );
+}
+

components/admin/AdminPanel.tsx

@@ -1,168 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import UserManagement from "@/components/admin/UserManagement";
-import EventManagement from "@/components/admin/EventManagement";
-import FeedbackManagement from "@/components/admin/FeedbackManagement";
-import ChallengeManagement from "@/components/admin/ChallengeManagement";
-import HouseManagement from "@/components/admin/HouseManagement";
-import BackgroundPreferences from "@/components/admin/BackgroundPreferences";
-import EventPointsPreferences from "@/components/admin/EventPointsPreferences";
-import EventFeedbackPointsPreferences from "@/components/admin/EventFeedbackPointsPreferences";
-import HousePointsPreferences from "@/components/admin/HousePointsPreferences";
-import { Button, Card, SectionTitle } from "@/components/ui";
-
-interface SitePreferences {
-  id: string;
-  homeBackground: string | null;
-  eventsBackground: string | null;
-  leaderboardBackground: string | null;
-  challengesBackground: string | null;
-  eventRegistrationPoints: number;
-  eventFeedbackPoints: number;
-  houseJoinPoints: number;
-  houseLeavePoints: number;
-  houseCreatePoints: number;
-}
-
-interface AdminPanelProps {
-  initialPreferences: SitePreferences;
-}
-
-type AdminSection =
-  | "preferences"
-  | "users"
-  | "events"
-  | "feedbacks"
-  | "challenges"
-  | "houses";
-
-export default function AdminPanel({ initialPreferences }: AdminPanelProps) {
-  const [activeSection, setActiveSection] =
-    useState<AdminSection>("preferences");
-
-  return (
-    <section className="relative w-full min-h-screen flex flex-col items-center overflow-hidden pt-24 pb-16">
-      <div className="relative z-10 w-full max-w-6xl mx-auto px-8 py-16">
-        <SectionTitle variant="gradient" size="md" className="mb-16 text-center">
-          ADMIN
-        </SectionTitle>
-
-        {/* Navigation Tabs */}
-        <div className="flex gap-4 mb-8 justify-center flex-wrap">
-          <Button
-            onClick={() => setActiveSection("preferences")}
-            variant={activeSection === "preferences" ? "primary" : "secondary"}
-            size="md"
-            className={
-              activeSection === "preferences" ? "bg-pixel-gold/10" : ""
-            }
-          >
-            Préférences UI
-          </Button>
-          <Button
-            onClick={() => setActiveSection("users")}
-            variant={activeSection === "users" ? "primary" : "secondary"}
-            size="md"
-            className={activeSection === "users" ? "bg-pixel-gold/10" : ""}
-          >
-            Utilisateurs
-          </Button>
-          <Button
-            onClick={() => setActiveSection("events")}
-            variant={activeSection === "events" ? "primary" : "secondary"}
-            size="md"
-            className={activeSection === "events" ? "bg-pixel-gold/10" : ""}
-          >
-            Événements
-          </Button>
-          <Button
-            onClick={() => setActiveSection("feedbacks")}
-            variant={activeSection === "feedbacks" ? "primary" : "secondary"}
-            size="md"
-            className={activeSection === "feedbacks" ? "bg-pixel-gold/10" : ""}
-          >
-            Feedbacks
-          </Button>
-          <Button
-            onClick={() => setActiveSection("challenges")}
-            variant={activeSection === "challenges" ? "primary" : "secondary"}
-            size="md"
-            className={activeSection === "challenges" ? "bg-pixel-gold/10" : ""}
-          >
-            Défis
-          </Button>
-          <Button
-            onClick={() => setActiveSection("houses")}
-            variant={activeSection === "houses" ? "primary" : "secondary"}
-            size="md"
-            className={activeSection === "houses" ? "bg-pixel-gold/10" : ""}
-          >
-            Maisons
-          </Button>
-        </div>
-
-        {activeSection === "preferences" && (
-          <Card variant="dark" className="p-4 sm:p-6">
-            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
-              <h2 className="text-xl sm:text-2xl font-gaming font-bold text-pixel-gold break-words">
-                Préférences UI Globales
-              </h2>
-            </div>
-            <div className="space-y-4">
-              <BackgroundPreferences initialPreferences={initialPreferences} />
-              <EventPointsPreferences initialPreferences={initialPreferences} />
-              <EventFeedbackPointsPreferences initialPreferences={initialPreferences} />
-              <HousePointsPreferences initialPreferences={initialPreferences} />
-            </div>
-          </Card>
-        )}
-
-        {activeSection === "users" && (
-          <Card variant="dark" className="p-6">
-            <h2 className="text-2xl font-gaming font-bold mb-6 text-pixel-gold">
-              Gestion des Utilisateurs
-            </h2>
-            <UserManagement />
-          </Card>
-        )}
-
-        {activeSection === "events" && (
-          <Card variant="dark" className="p-6">
-            <h2 className="text-2xl font-gaming font-bold mb-6 text-pixel-gold">
-              Gestion des Événements
-            </h2>
-            <EventManagement />
-          </Card>
-        )}
-
-        {activeSection === "feedbacks" && (
-          <Card variant="dark" className="p-6">
-            <h2 className="text-2xl font-gaming font-bold mb-6 text-pixel-gold">
-              Gestion des Feedbacks
-            </h2>
-            <FeedbackManagement />
-          </Card>
-        )}
-
-        {activeSection === "challenges" && (
-          <Card variant="dark" className="p-6">
-            <h2 className="text-2xl font-gaming font-bold mb-6 text-pixel-gold">
-              Gestion des Défis
-            </h2>
-            <ChallengeManagement />
-          </Card>
-        )}
-
-        {activeSection === "houses" && (
-          <Card variant="dark" className="p-6">
-            <h2 className="text-2xl font-gaming font-bold mb-6 text-pixel-gold">
-              Gestion des Maisons
-            </h2>
-            <HouseManagement />
-          </Card>
-        )}
-      </div>
-    </section>
-  );
-}

components/admin/ChallengeManagement.tsx

@@ -42,9 +42,13 @@ interface Challenge {
   acceptedAt: string | null;
 }
 
-export default function ChallengeManagement() {
-  const [challenges, setChallenges] = useState<Challenge[]>([]);
-  const [loading, setLoading] = useState(true);
+interface ChallengeManagementProps {
+  initialChallenges: Challenge[];
+}
+
+export default function ChallengeManagement({ initialChallenges }: ChallengeManagementProps) {
+  const [challenges, setChallenges] = useState<Challenge[]>(initialChallenges);
+  const [loading, setLoading] = useState(false);
   const [selectedChallenge, setSelectedChallenge] = useState<Challenge | null>(
     null
   );
@@ -60,10 +64,6 @@ export default function ChallengeManagement() {
   const [successMessage, setSuccessMessage] = useState<string | null>(null);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
-  useEffect(() => {
-    fetchChallenges();
-  }, []);
-
   const fetchChallenges = async () => {
     try {
       const response = await fetch("/api/admin/challenges");
@@ -73,8 +73,6 @@ export default function ChallengeManagement() {
       }
     } catch (error) {
       console.error("Error fetching challenges:", error);
-    } finally {
-      setLoading(false);
     }
   };
 

components/admin/EventManagement.tsx

@@ -92,9 +92,13 @@ const getStatusLabel = (status: Event["status"]) => {
   }
 };
 
-export default function EventManagement() {
-  const [events, setEvents] = useState<Event[]>([]);
-  const [loading, setLoading] = useState(true);
+interface EventManagementProps {
+  initialEvents: Event[];
+}
+
+export default function EventManagement({ initialEvents }: EventManagementProps) {
+  const [events, setEvents] = useState<Event[]>(initialEvents);
+  const [loading, setLoading] = useState(false);
   const [editingEvent, setEditingEvent] = useState<Event | null>(null);
   const [isCreating, setIsCreating] = useState(false);
   const [saving, setSaving] = useState(false);
@@ -116,10 +120,6 @@ export default function EventManagement() {
     maxPlaces: undefined,
   });
 
-  useEffect(() => {
-    fetchEvents();
-  }, []);
-
   const fetchEvents = async () => {
     try {
       const response = await fetch("/api/admin/events");
@@ -129,8 +129,6 @@ export default function EventManagement() {
       }
     } catch (error) {
       console.error("Error fetching events:", error);
-    } finally {
-      setLoading(false);
     }
   };
 

components/admin/FeedbackManagement.tsx

@@ -38,10 +38,18 @@ interface EventStatistics {
   feedbackCount: number;
 }
 
-export default function FeedbackManagement() {
-  const [feedbacks, setFeedbacks] = useState<Feedback[]>([]);
-  const [statistics, setStatistics] = useState<EventStatistics[]>([]);
-  const [loading, setLoading] = useState(true);
+interface FeedbackManagementProps {
+  initialFeedbacks: Feedback[];
+  initialStatistics: EventStatistics[];
+}
+
+export default function FeedbackManagement({
+  initialFeedbacks,
+  initialStatistics,
+}: FeedbackManagementProps) {
+  const [feedbacks, setFeedbacks] = useState<Feedback[]>(initialFeedbacks);
+  const [statistics, setStatistics] = useState<EventStatistics[]>(initialStatistics);
+  const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
   const [selectedEvent, setSelectedEvent] = useState<string | null>(null);
   const [addingPoints, setAddingPoints] = useState<Record<string, boolean>>(
@@ -49,10 +57,6 @@ export default function FeedbackManagement() {
   );
   const [markingRead, setMarkingRead] = useState<Record<string, boolean>>({});
 
-  useEffect(() => {
-    fetchFeedbacks();
-  }, []);
-
   const fetchFeedbacks = async () => {
     try {
       const response = await fetch("/api/admin/feedback");
@@ -65,8 +69,6 @@ export default function FeedbackManagement() {
       setStatistics(data.statistics || []);
     } catch {
       setError("Erreur lors du chargement des feedbacks");
-    } finally {
-      setLoading(false);
     }
   };
 

components/admin/HouseManagement.tsx

@@ -71,9 +71,13 @@ const getRoleColor = (role: string) => {
   }
 };
 
-export default function HouseManagement() {
-  const [houses, setHouses] = useState<House[]>([]);
-  const [loading, setLoading] = useState(true);
+interface HouseManagementProps {
+  initialHouses: House[];
+}
+
+export default function HouseManagement({ initialHouses }: HouseManagementProps) {
+  const [houses, setHouses] = useState<House[]>(initialHouses);
+  const [loading, setLoading] = useState(false);
   const [editingHouse, setEditingHouse] = useState<House | null>(null);
   const [saving, setSaving] = useState(false);
   const [deletingHouseId, setDeletingHouseId] = useState<string | null>(null);
@@ -85,10 +89,6 @@ export default function HouseManagement() {
   });
   const [, startTransition] = useTransition();
 
-  useEffect(() => {
-    fetchHouses();
-  }, []);
-
   const fetchHouses = async () => {
     try {
       const response = await fetch("/api/admin/houses");
@@ -98,8 +98,6 @@ export default function HouseManagement() {
       }
     } catch (error) {
       console.error("Error fetching houses:", error);
-    } finally {
-      setLoading(false);
     }
   };
 

components/admin/UserManagement.tsx

@@ -37,19 +37,19 @@ interface EditingUser {
   role: string | null;
 }
 
-export default function UserManagement() {
-  const [users, setUsers] = useState<User[]>([]);
-  const [loading, setLoading] = useState(true);
+interface UserManagementProps {
+  initialUsers: User[];
+}
+
+export default function UserManagement({ initialUsers }: UserManagementProps) {
+  const [users, setUsers] = useState<User[]>(initialUsers);
+  const [loading, setLoading] = useState(false);
   const [editingUser, setEditingUser] = useState<EditingUser | null>(null);
   const [saving, setSaving] = useState(false);
   const [deletingUserId, setDeletingUserId] = useState<string | null>(null);
   const [, startTransition] = useTransition();
   const [uploadingAvatar, setUploadingAvatar] = useState<string | null>(null);
 
-  useEffect(() => {
-    fetchUsers();
-  }, []);
-
   const fetchUsers = async () => {
     try {
       const response = await fetch("/api/admin/users");
@@ -59,8 +59,6 @@ export default function UserManagement() {
       }
     } catch (error) {
       console.error("Error fetching users:", error);
-    } finally {
-      setLoading(false);
     }
   };
 

components/ui/Button.tsx

@@ -1,13 +1,17 @@
 "use client";
 
-import { ButtonHTMLAttributes, ReactNode, ElementType } from "react";
+import { ButtonHTMLAttributes, ReactNode, ElementType, AnchorHTMLAttributes } from "react";
+import Link from "next/link";
 
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   variant?: "primary" | "secondary" | "success" | "danger" | "ghost";
   size?: "sm" | "md" | "lg";
   children: ReactNode;
   as?: ElementType;
-}
+} & (
+  | { as?: Exclude<ElementType, typeof Link> }
+  | { as: typeof Link; href: string }
+);
 
 const variantClasses = {
   primary: "btn-primary border transition-colors",