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

app/admin/challenges/page.tsx

@@ -0,0 +1,26 @@
+import ChallengeManagement from "@/components/admin/ChallengeManagement";
+import { Card } from "@/components/ui";
+import { challengeService } from "@/services/challenges/challenge.service";
+
+export const dynamic = "force-dynamic";
+
+export default async function AdminChallengesPage() {
+  const challenges = await challengeService.getAllChallenges();
+
+  // Sérialiser les dates pour le client
+  const serializedChallenges = challenges.map((challenge) => ({
+    ...challenge,
+    createdAt: challenge.createdAt.toISOString(),
+    acceptedAt: challenge.acceptedAt?.toISOString() ?? null,
+    completedAt: challenge.completedAt?.toISOString() ?? null,
+  }));
+
+  return (
+    <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 initialChallenges={serializedChallenges} />
+    </Card>
+  );
+}

app/admin/events/page.tsx

@@ -0,0 +1,34 @@
+import EventManagement from "@/components/admin/EventManagement";
+import { Card } from "@/components/ui";
+import { eventService } from "@/services/events/event.service";
+
+export const dynamic = "force-dynamic";
+
+export default async function AdminEventsPage() {
+  const events = await eventService.getEventsWithStatus();
+
+  // Transformer les données pour la sérialisation
+  const serializedEvents = events.map((event) => ({
+    id: event.id,
+    date: event.date.toISOString(),
+    name: event.name,
+    description: event.description,
+    type: event.type,
+    status: event.status,
+    room: event.room,
+    time: event.time,
+    maxPlaces: event.maxPlaces,
+    createdAt: event.createdAt.toISOString(),
+    updatedAt: event.updatedAt.toISOString(),
+    registrationsCount: event.registrationsCount,
+  }));
+
+  return (
+    <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 initialEvents={serializedEvents} />
+    </Card>
+  );
+}

app/admin/feedbacks/page.tsx

@@ -0,0 +1,77 @@
+import FeedbackManagement from "@/components/admin/FeedbackManagement";
+import { Card } from "@/components/ui";
+import { eventFeedbackService } from "@/services/events/event-feedback.service";
+
+export const dynamic = "force-dynamic";
+
+export default async function AdminFeedbacksPage() {
+  const [feedbacksRaw, statistics] = await Promise.all([
+    eventFeedbackService.getAllFeedbacks(),
+    eventFeedbackService.getFeedbackStatistics(),
+  ]);
+
+  // Type assertion car getAllFeedbacks inclut event et user par défaut
+  const feedbacks = feedbacksRaw as unknown as Array<{
+    id: string;
+    rating: number;
+    comment: string | null;
+    isRead: boolean;
+    createdAt: Date;
+    event: {
+      id: string;
+      name: string;
+      date: Date;
+      type: string;
+    };
+    user: {
+      id: string;
+      username: string;
+      email: string;
+      avatar: string | null;
+      score: number;
+    };
+  }>;
+
+  // Sérialiser les dates pour le client
+  const serializedFeedbacks = feedbacks.map((feedback) => ({
+    id: feedback.id,
+    rating: feedback.rating,
+    comment: feedback.comment,
+    isRead: feedback.isRead,
+    createdAt: feedback.createdAt.toISOString(),
+    event: {
+      id: feedback.event.id,
+      name: feedback.event.name,
+      date: feedback.event.date.toISOString(),
+      type: feedback.event.type,
+    },
+    user: {
+      id: feedback.user.id,
+      username: feedback.user.username,
+      email: feedback.user.email,
+      avatar: feedback.user.avatar,
+      score: feedback.user.score,
+    },
+  }));
+
+  const serializedStatistics = statistics.map((stat) => ({
+    eventId: stat.eventId,
+    eventName: stat.eventName,
+    eventDate: stat.eventDate?.toISOString() ?? null,
+    eventType: stat.eventType,
+    averageRating: stat.averageRating,
+    feedbackCount: stat.feedbackCount,
+  }));
+
+  return (
+    <Card variant="dark" className="p-6">
+      <h2 className="text-2xl font-gaming font-bold mb-6 text-pixel-gold">
+        Gestion des Feedbacks
+      </h2>
+      <FeedbackManagement
+        initialFeedbacks={serializedFeedbacks}
+        initialStatistics={serializedStatistics}
+      />
+    </Card>
+  );
+}

app/admin/houses/page.tsx

@@ -0,0 +1,90 @@
+import HouseManagement from "@/components/admin/HouseManagement";
+import { Card } from "@/components/ui";
+import { houseService } from "@/services/houses/house.service";
+import { Prisma } from "@/prisma/generated/prisma/client";
+
+export const dynamic = "force-dynamic";
+
+export default async function AdminHousesPage() {
+  type HouseWithIncludes = Prisma.HouseGetPayload<{
+    include: {
+      creator: {
+        select: {
+          id: true;
+          username: true;
+          avatar: true;
+        };
+      };
+      memberships: {
+        include: {
+          user: {
+            select: {
+              id: true;
+              username: true;
+              avatar: true;
+              score: true;
+              level: true;
+            };
+          };
+        };
+      };
+    };
+  }>;
+
+  const houses = (await houseService.getAllHouses({
+    include: {
+      creator: {
+        select: {
+          id: true,
+          username: true,
+          avatar: true,
+        },
+      },
+      memberships: {
+        include: {
+          user: {
+            select: {
+              id: true,
+              username: true,
+              avatar: true,
+              score: true,
+              level: true,
+            },
+          },
+        },
+        orderBy: [{ role: "asc" }, { joinedAt: "asc" }],
+      },
+    },
+    orderBy: {
+      createdAt: "desc",
+    },
+  })) as unknown as HouseWithIncludes[];
+
+  // Transformer les données pour la sérialisation
+  const serializedHouses = houses.map((house) => ({
+    id: house.id,
+    name: house.name,
+    description: house.description,
+    creatorId: house.creatorId,
+    creator: house.creator,
+    createdAt: house.createdAt.toISOString(),
+    updatedAt: house.updatedAt.toISOString(),
+    membersCount: house.memberships?.length || 0,
+    memberships:
+      house.memberships?.map((membership) => ({
+        id: membership.id,
+        role: membership.role,
+        joinedAt: membership.joinedAt.toISOString(),
+        user: membership.user,
+      })) || [],
+  }));
+
+  return (
+    <Card variant="dark" className="p-6">
+      <h2 className="text-2xl font-gaming font-bold mb-6 text-pixel-gold">
+        Gestion des Maisons
+      </h2>
+      <HouseManagement initialHouses={serializedHouses} />
+    </Card>
+  );
+}

app/admin/layout.tsx

@@ -0,0 +1,52 @@
+import { redirect } from "next/navigation";
+import { auth } from "@/lib/auth";
+import { Role } from "@/prisma/generated/prisma/client";
+import NavigationWrapper from "@/components/navigation/NavigationWrapper";
+import AdminNavigation from "@/components/admin/AdminNavigation";
+import { SectionTitle } from "@/components/ui";
+
+export const dynamic = "force-dynamic";
+
+export default async function AdminLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const session = await auth();
+
+  if (!session?.user) {
+    redirect("/login");
+  }
+
+  if (session.user.role !== Role.ADMIN) {
+    redirect("/");
+  }
+
+  return (
+    <main className="min-h-screen bg-black relative">
+      {/* Background Image */}
+      <div
+        className="fixed inset-0 bg-cover bg-center bg-no-repeat"
+        style={{
+          backgroundImage: `url('/got-light.jpg')`,
+        }}
+      >
+        {/* Dark overlay for readability */}
+        <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/60 to-black/80"></div>
+      </div>
+      <NavigationWrapper />
+      <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>
+
+          <AdminNavigation />
+
+          {children}
+        </div>
+      </section>
+    </main>
+  );
+}
+

app/admin/page.tsx

@@ -1,41 +1,7 @@
 import { redirect } from "next/navigation";
-import { auth } from "@/lib/auth";
-import { sitePreferencesService } from "@/services/preferences/site-preferences.service";
-import { Role } from "@/prisma/generated/prisma/client";
-import NavigationWrapper from "@/components/navigation/NavigationWrapper";
-import AdminPanel from "@/components/admin/AdminPanel";
 
 export const dynamic = "force-dynamic";
 
 export default async function AdminPage() {
-  const session = await auth();
-
-  if (!session?.user) {
-    redirect("/login");
-  }
-
-  if (session.user.role !== Role.ADMIN) {
-    redirect("/");
-  }
-
-  // Récupérer les préférences globales du site (ou créer si elles n'existent pas)
-  const sitePreferences =
-    await sitePreferencesService.getOrCreateSitePreferences();
-
-  return (
-    <main className="min-h-screen bg-black relative">
-      {/* Background Image */}
-      <div
-        className="fixed inset-0 bg-cover bg-center bg-no-repeat"
-        style={{
-          backgroundImage: `url('/got-light.jpg')`,
-        }}
-      >
-        {/* Dark overlay for readability */}
-        <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/60 to-black/80"></div>
-      </div>
-      <NavigationWrapper />
-      <AdminPanel initialPreferences={sitePreferences} />
-    </main>
-  );
+  redirect("/admin/preferences");
 }

app/admin/preferences/page.tsx

@@ -0,0 +1,30 @@
+import { sitePreferencesService } from "@/services/preferences/site-preferences.service";
+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 { Card } from "@/components/ui";
+
+export const dynamic = "force-dynamic";
+
+export default async function AdminPreferencesPage() {
+  const sitePreferences =
+    await sitePreferencesService.getOrCreateSitePreferences();
+
+  return (
+    <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={sitePreferences} />
+        <EventPointsPreferences initialPreferences={sitePreferences} />
+        <EventFeedbackPointsPreferences initialPreferences={sitePreferences} />
+        <HousePointsPreferences initialPreferences={sitePreferences} />
+      </div>
+    </Card>
+  );
+}
+

app/admin/users/page.tsx

@@ -0,0 +1,42 @@
+import UserManagement from "@/components/admin/UserManagement";
+import { Card } from "@/components/ui";
+import { userService } from "@/services/users/user.service";
+
+export const dynamic = "force-dynamic";
+
+export default async function AdminUsersPage() {
+  const users = await userService.getAllUsers({
+    orderBy: {
+      score: "desc",
+    },
+    select: {
+      id: true,
+      username: true,
+      email: true,
+      role: true,
+      score: true,
+      level: true,
+      hp: true,
+      maxHp: true,
+      xp: true,
+      maxXp: true,
+      avatar: true,
+      createdAt: true,
+    },
+  });
+
+  // Sérialiser les dates pour le client
+  const serializedUsers = users.map((user) => ({
+    ...user,
+    createdAt: user.createdAt.toISOString(),
+  }));
+
+  return (
+    <Card variant="dark" className="p-6">
+      <h2 className="text-2xl font-gaming font-bold mb-6 text-pixel-gold">
+        Gestion des Utilisateurs
+      </h2>
+      <UserManagement initialUsers={serializedUsers} />
+    </Card>
+  );
+}

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",