Refactor management components to remove loading state: Eliminate unused loading state and related conditional rendering from ChallengeManagement, EventManagement, FeedbackManagement, HouseManagement, and UserManagement components, simplifying the code and improving readability.

actions/admin/houses.ts

@@ -0,0 +1,139 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { auth } from "@/lib/auth";
+import { houseService } from "@/services/houses/house.service";
+import { Role } from "@/prisma/generated/prisma/client";
+import {
+  ValidationError,
+  NotFoundError,
+  ConflictError,
+  ForbiddenError,
+} from "@/services/errors";
+
+function checkAdminAccess() {
+  return async () => {
+    const session = await auth();
+    if (!session?.user || session.user.role !== Role.ADMIN) {
+      throw new Error("Accès refusé");
+    }
+    return session;
+  };
+}
+
+export async function updateHouse(
+  houseId: string,
+  data: {
+    name?: string;
+    description?: string | null;
+  }
+) {
+  try {
+    await checkAdminAccess()();
+
+    // L'admin peut modifier n'importe quelle maison sans vérifier les permissions normales
+    // On utilise directement le service mais on bypass les vérifications de propriétaire/admin
+    const house = await houseService.getHouseById(houseId);
+    if (!house) {
+      return { success: false, error: "Maison non trouvée" };
+    }
+
+    // Utiliser le service avec le creatorId pour bypass les vérifications
+    const updatedHouse = await houseService.updateHouse(
+      houseId,
+      house.creatorId, // Utiliser le creatorId pour bypass
+      data
+    );
+
+    revalidatePath("/admin");
+    revalidatePath("/houses");
+
+    return { success: true, data: updatedHouse };
+  } catch (error) {
+    console.error("Error updating house:", error);
+
+    if (error instanceof ValidationError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof ConflictError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof Error && error.message === "Accès refusé") {
+      return { success: false, error: "Accès refusé" };
+    }
+
+    return {
+      success: false,
+      error: "Erreur lors de la mise à jour de la maison",
+    };
+  }
+}
+
+export async function deleteHouse(houseId: string) {
+  try {
+    await checkAdminAccess()();
+
+    const house = await houseService.getHouseById(houseId);
+    if (!house) {
+      return { success: false, error: "Maison non trouvée" };
+    }
+
+    // L'admin peut supprimer n'importe quelle maison
+    // On utilise le creatorId pour bypass les vérifications
+    await houseService.deleteHouse(houseId, house.creatorId);
+
+    revalidatePath("/admin");
+    revalidatePath("/houses");
+
+    return { success: true };
+  } catch (error) {
+    console.error("Error deleting house:", error);
+
+    if (error instanceof NotFoundError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof ForbiddenError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof Error && error.message === "Accès refusé") {
+      return { success: false, error: "Accès refusé" };
+    }
+
+    return {
+      success: false,
+      error: "Erreur lors de la suppression de la maison",
+    };
+  }
+}
+
+export async function removeMember(houseId: string, memberId: string) {
+  try {
+    await checkAdminAccess()();
+
+    // L'admin peut retirer n'importe quel membre (sauf le propriétaire)
+    await houseService.removeMemberAsAdmin(houseId, memberId);
+
+    revalidatePath("/admin");
+    revalidatePath("/houses");
+
+    return { success: true, message: "Membre retiré de la maison" };
+  } catch (error) {
+    console.error("Error removing member:", error);
+
+    if (error instanceof NotFoundError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof ForbiddenError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof Error && error.message === "Accès refusé") {
+      return { success: false, error: "Accès refusé" };
+    }
+
+    return {
+      success: false,
+      error: "Erreur lors du retrait du membre",
+    };
+  }
+}
+

actions/admin/preferences.ts

@@ -20,6 +20,8 @@ export async function updateSitePreferences(data: {
   eventsBackground?: string | null;
   leaderboardBackground?: string | null;
   challengesBackground?: string | null;
+  profileBackground?: string | null;
+  houseBackground?: string | null;
   eventRegistrationPoints?: number;
   eventFeedbackPoints?: number;
   houseJoinPoints?: number;
@@ -34,6 +36,8 @@ export async function updateSitePreferences(data: {
       eventsBackground: data.eventsBackground,
       leaderboardBackground: data.leaderboardBackground,
       challengesBackground: data.challengesBackground,
+      profileBackground: data.profileBackground,
+      houseBackground: data.houseBackground,
       eventRegistrationPoints: data.eventRegistrationPoints,
       eventFeedbackPoints: data.eventFeedbackPoints,
       houseJoinPoints: data.houseJoinPoints,
@@ -46,6 +50,8 @@ export async function updateSitePreferences(data: {
     revalidatePath("/events");
     revalidatePath("/leaderboard");
     revalidatePath("/challenges");
+    revalidatePath("/profile");
+    revalidatePath("/houses");
 
     return { success: true, data: preferences };
   } catch (error) {

actions/challenges/create.ts

@@ -127,3 +127,5 @@ export async function cancelChallenge(challengeId: string) {
     };
   }
 }
+
+

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>
+  );
+}

app/api/admin/houses/route.ts

@@ -0,0 +1,99 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+import { houseService } from "@/services/houses/house.service";
+import { Role, Prisma } from "@/prisma/generated/prisma/client";
+
+export async function GET() {
+  try {
+    const session = await auth();
+
+    if (!session?.user || session.user.role !== Role.ADMIN) {
+      return NextResponse.json({ error: "Accès refusé" }, { status: 403 });
+    }
+
+    // Récupérer toutes les maisons avec leurs membres
+    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" }, // OWNER, ADMIN, MEMBER
+            { joinedAt: "asc" },
+          ],
+        },
+      },
+      orderBy: {
+        createdAt: "desc",
+      },
+    })) as unknown as HouseWithIncludes[];
+
+    // Transformer les données pour la sérialisation
+    const housesWithData = 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 NextResponse.json(housesWithData);
+  } catch (error) {
+    console.error("Error fetching houses:", error);
+    return NextResponse.json(
+      { error: "Erreur lors de la récupération des maisons" },
+      { status: 500 }
+    );
+  }
+}

app/api/challenges/route.ts

@@ -27,3 +27,5 @@ export async function GET() {
     );
   }
 }
+
+

app/api/preferences/route.ts

@@ -13,6 +13,8 @@ export async function GET() {
         eventsBackground: null,
         leaderboardBackground: null,
         challengesBackground: null,
+        profileBackground: null,
+        houseBackground: null,
       });
     }
 
@@ -21,6 +23,8 @@ export async function GET() {
       eventsBackground: sitePreferences.eventsBackground,
       leaderboardBackground: sitePreferences.leaderboardBackground,
       challengesBackground: sitePreferences.challengesBackground,
+      profileBackground: sitePreferences.profileBackground,
+      houseBackground: sitePreferences.houseBackground,
     });
   } catch (error) {
     console.error("Error fetching preferences:", error);
@@ -30,6 +34,8 @@ export async function GET() {
         eventsBackground: null,
         leaderboardBackground: null,
         challengesBackground: null,
+        profileBackground: null,
+        houseBackground: null,
       },
       { status: 200 }
     );

app/api/users/route.ts

@@ -39,3 +39,5 @@ export async function GET() {
     );
   }
 }
+
+

app/houses/page.tsx

@@ -125,7 +125,7 @@ export default async function HousesPage() {
           username: "asc",
         },
       }),
-      getBackgroundImage("challenges", "/got-2.jpg"),
+      getBackgroundImage("houses", "/got-2.jpg"),
     ]);
 
   // Sérialiser les données pour le client

app/profile/page.tsx

@@ -29,7 +29,7 @@ export default async function ProfilePage() {
       score: true,
       createdAt: true,
     }),
-    getBackgroundImage("home", "/got-background.jpg"),
+    getBackgroundImage("profile", "/got-background.jpg"),
   ]);
 
   if (!user) {

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,149 +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 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";
-
-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>
-        </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>
-        )}
-      </div>
-    </section>
-  );
-}

components/admin/BackgroundPreferences.tsx

@@ -11,6 +11,8 @@ interface SitePreferences {
   eventsBackground: string | null;
   leaderboardBackground: string | null;
   challengesBackground: string | null;
+  profileBackground: string | null;
+  houseBackground: string | null;
   eventRegistrationPoints?: number;
 }
 
@@ -23,6 +25,8 @@ const DEFAULT_IMAGES = {
   events: "/got-2.jpg",
   leaderboard: "/leaderboard-bg.jpg",
   challenges: "/got-2.jpg",
+  profile: "/got-background.jpg",
+  houses: "/got-2.jpg",
 };
 
 export default function BackgroundPreferences({
@@ -64,6 +68,14 @@ export default function BackgroundPreferences({
         initialPreferences.challengesBackground,
         DEFAULT_IMAGES.challenges
       ),
+      profileBackground: getFormValue(
+        initialPreferences.profileBackground,
+        DEFAULT_IMAGES.profile
+      ),
+      houseBackground: getFormValue(
+        initialPreferences.houseBackground,
+        DEFAULT_IMAGES.houses
+      ),
     }),
     [initialPreferences]
   );
@@ -101,6 +113,14 @@ export default function BackgroundPreferences({
           formData.challengesBackground,
           DEFAULT_IMAGES.challenges
         ),
+        profileBackground: getApiValue(
+          formData.profileBackground,
+          DEFAULT_IMAGES.profile
+        ),
+        houseBackground: getApiValue(
+          formData.houseBackground,
+          DEFAULT_IMAGES.houses
+        ),
       };
 
       const result = await updateSitePreferences(apiData);
@@ -125,6 +145,14 @@ export default function BackgroundPreferences({
             result.data.challengesBackground,
             DEFAULT_IMAGES.challenges
           ),
+          profileBackground: getFormValue(
+            result.data.profileBackground,
+            DEFAULT_IMAGES.profile
+          ),
+          houseBackground: getFormValue(
+            result.data.houseBackground,
+            DEFAULT_IMAGES.houses
+          ),
         });
         setIsEditing(false);
       } else {
@@ -157,6 +185,14 @@ export default function BackgroundPreferences({
           preferences.challengesBackground,
           DEFAULT_IMAGES.challenges
         ),
+        profileBackground: getFormValue(
+          preferences.profileBackground,
+          DEFAULT_IMAGES.profile
+        ),
+        houseBackground: getFormValue(
+          preferences.houseBackground,
+          DEFAULT_IMAGES.houses
+        ),
       });
     }
   };
@@ -226,6 +262,26 @@ export default function BackgroundPreferences({
             }
             label="Background Challenges"
           />
+          <ImageSelector
+            value={formData.profileBackground}
+            onChange={(url) =>
+              setFormData({
+                ...formData,
+                profileBackground: url,
+              })
+            }
+            label="Background Profile"
+          />
+          <ImageSelector
+            value={formData.houseBackground}
+            onChange={(url) =>
+              setFormData({
+                ...formData,
+                houseBackground: url,
+              })
+            }
+            label="Background Houses"
+          />
           <div className="flex flex-col sm:flex-row gap-2 pt-4">
             <Button onClick={handleSave} variant="success" size="md">
               Enregistrer
@@ -461,6 +517,118 @@ export default function BackgroundPreferences({
               );
             })()}
           </div>
+          <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
+            <span className="text-pixel-gold font-bold text-sm sm:text-base min-w-0 sm:min-w-[120px] flex-shrink-0">
+              Profile:
+            </span>
+            {(() => {
+              const currentImage =
+                preferences?.profileBackground &&
+                preferences.profileBackground.trim() !== ""
+                  ? preferences.profileBackground
+                  : DEFAULT_IMAGES.profile;
+              const isDefault =
+                !preferences?.profileBackground ||
+                preferences.profileBackground.trim() === "";
+
+              return (
+                <div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
+                  <div className="relative w-16 h-10 sm:w-20 sm:h-12 rounded border border-pixel-gold/30 overflow-hidden bg-black/60 flex-shrink-0">
+                    <img
+                      src={currentImage}
+                      alt="Profile background"
+                      className="w-full h-full object-cover"
+                      onError={(e) => {
+                        const target = e.currentTarget;
+                        const currentSrc = target.src;
+                        const fallbackSrc = "/got-background.jpg";
+                        if (!currentSrc.includes(fallbackSrc)) {
+                          target.src = fallbackSrc;
+                        } else {
+                          target.style.display = "none";
+                          const fallbackDiv =
+                            target.nextElementSibling as HTMLElement;
+                          if (fallbackDiv) {
+                            fallbackDiv.classList.remove("hidden");
+                          }
+                        }
+                      }}
+                    />
+                    <div className="absolute inset-0 flex items-center justify-center bg-black/60 text-gray-500 text-xs hidden">
+                      No image
+                    </div>
+                  </div>
+                  <div className="flex flex-col min-w-0 flex-1">
+                    <span className="text-xs text-gray-400 truncate min-w-0">
+                      {isDefault ? "Par défaut: " : ""}
+                      {currentImage}
+                    </span>
+                    {isDefault && (
+                      <span className="text-[10px] text-gray-500 italic">
+                        (Image par défaut)
+                      </span>
+                    )}
+                  </div>
+                </div>
+              );
+            })()}
+          </div>
+          <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
+            <span className="text-pixel-gold font-bold text-sm sm:text-base min-w-0 sm:min-w-[120px] flex-shrink-0">
+              Houses:
+            </span>
+            {(() => {
+              const currentImage =
+                preferences?.houseBackground &&
+                preferences.houseBackground.trim() !== ""
+                  ? preferences.houseBackground
+                  : DEFAULT_IMAGES.houses;
+              const isDefault =
+                !preferences?.houseBackground ||
+                preferences.houseBackground.trim() === "";
+
+              return (
+                <div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
+                  <div className="relative w-16 h-10 sm:w-20 sm:h-12 rounded border border-pixel-gold/30 overflow-hidden bg-black/60 flex-shrink-0">
+                    <img
+                      src={currentImage}
+                      alt="Houses background"
+                      className="w-full h-full object-cover"
+                      onError={(e) => {
+                        const target = e.currentTarget;
+                        const currentSrc = target.src;
+                        const fallbackSrc = "/got-2.jpg";
+                        if (!currentSrc.includes(fallbackSrc)) {
+                          target.src = fallbackSrc;
+                        } else {
+                          target.style.display = "none";
+                          const fallbackDiv =
+                            target.nextElementSibling as HTMLElement;
+                          if (fallbackDiv) {
+                            fallbackDiv.classList.remove("hidden");
+                          }
+                        }
+                      }}
+                    />
+                    <div className="absolute inset-0 flex items-center justify-center bg-black/60 text-gray-500 text-xs hidden">
+                      No image
+                    </div>
+                  </div>
+                  <div className="flex flex-col min-w-0 flex-1">
+                    <span className="text-xs text-gray-400 truncate min-w-0">
+                      {isDefault ? "Par défaut: " : ""}
+                      {currentImage}
+                    </span>
+                    {isDefault && (
+                      <span className="text-[10px] text-gray-500 italic">
+                        (Image par défaut)
+                      </span>
+                    )}
+                  </div>
+                </div>
+              );
+            })()}
+          </div>
         </div>
       )}
     </Card>

components/admin/ChallengeManagement.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState, useTransition } from "react";
+import { useState, useTransition } from "react";
 import {
   validateChallenge,
   rejectChallenge,
@@ -42,9 +42,12 @@ 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 [selectedChallenge, setSelectedChallenge] = useState<Challenge | null>(
     null
   );
@@ -60,10 +63,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 +72,6 @@ export default function ChallengeManagement() {
       }
     } catch (error) {
       console.error("Error fetching challenges:", error);
-    } finally {
-      setLoading(false);
     }
   };
 
@@ -262,12 +259,6 @@ export default function ChallengeManagement() {
     });
   };
 
-  if (loading) {
-    return (
-      <div className="text-center text-pixel-gold py-8">Chargement...</div>
-    );
-  }
-
   if (challenges.length === 0) {
     return <div className="text-center text-gray-400 py-8">Aucun défi</div>;
   }

components/admin/EventManagement.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useTransition } from "react";
+import { useState, useTransition } from "react";
 import { calculateEventStatus } from "@/lib/eventStatus";
 import { createEvent, updateEvent, deleteEvent } from "@/actions/admin/events";
 import {
@@ -92,9 +92,12 @@ 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 [editingEvent, setEditingEvent] = useState<Event | null>(null);
   const [isCreating, setIsCreating] = useState(false);
   const [saving, setSaving] = useState(false);
@@ -116,10 +119,6 @@ export default function EventManagement() {
     maxPlaces: undefined,
   });
 
-  useEffect(() => {
-    fetchEvents();
-  }, []);
-
   const fetchEvents = async () => {
     try {
       const response = await fetch("/api/admin/events");
@@ -129,8 +128,6 @@ export default function EventManagement() {
       }
     } catch (error) {
       console.error("Error fetching events:", error);
-    } finally {
-      setLoading(false);
     }
   };
 
@@ -306,10 +303,6 @@ export default function EventManagement() {
     });
   };
 
-  if (loading) {
-    return <div className="text-center text-gray-400 py-8">Chargement...</div>;
-  }
-
   return (
     <div className="space-y-4">
       <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 mb-4">

components/admin/FeedbackManagement.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import {
   addFeedbackBonusPoints,
   markFeedbackAsRead,
@@ -38,10 +38,17 @@ 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 [error, setError] = useState("");
   const [selectedEvent, setSelectedEvent] = useState<string | null>(null);
   const [addingPoints, setAddingPoints] = useState<Record<string, boolean>>(
@@ -49,10 +56,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 +68,6 @@ export default function FeedbackManagement() {
       setStatistics(data.statistics || []);
     } catch {
       setError("Erreur lors du chargement des feedbacks");
-    } finally {
-      setLoading(false);
     }
   };
 
@@ -159,14 +160,6 @@ export default function FeedbackManagement() {
     );
   });
 
-  if (loading) {
-    return (
-      <div className="bg-black/60 border border-pixel-gold/30 rounded-lg p-4 sm:p-8">
-        <p className="text-gray-400 text-center text-sm">Chargement...</p>
-      </div>
-    );
-  }
-
   return (
     <div className="space-y-4 sm:space-y-6">
       {/* Statistiques par événement */}

components/admin/HouseManagement.tsx

@@ -0,0 +1,447 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import {
+  Input,
+  Textarea,
+  Button,
+  Card,
+  Badge,
+  Modal,
+  CloseButton,
+  Avatar,
+} from "@/components/ui";
+import { updateHouse, deleteHouse, removeMember } from "@/actions/admin/houses";
+
+interface House {
+  id: string;
+  name: string;
+  description: string | null;
+  creatorId: string;
+  creator: {
+    id: string;
+    username: string;
+    avatar: string | null;
+  };
+  createdAt: string;
+  updatedAt: string;
+  membersCount: number;
+  memberships: Array<{
+    id: string;
+    role: string;
+    joinedAt: string;
+    user: {
+      id: string;
+      username: string;
+      avatar: string | null;
+      score: number;
+      level: number;
+    };
+  }>;
+}
+
+interface HouseFormData {
+  name: string;
+  description: string;
+}
+
+const getRoleLabel = (role: string) => {
+  switch (role) {
+    case "OWNER":
+      return "👑 Propriétaire";
+    case "ADMIN":
+      return "⚡ Admin";
+    case "MEMBER":
+      return "👤 Membre";
+    default:
+      return role;
+  }
+};
+
+const getRoleColor = (role: string) => {
+  switch (role) {
+    case "OWNER":
+      return "var(--accent)";
+    case "ADMIN":
+      return "var(--primary)";
+    case "MEMBER":
+      return "var(--muted-foreground)";
+    default:
+      return "var(--gray)";
+  }
+};
+
+interface HouseManagementProps {
+  initialHouses: House[];
+}
+
+export default function HouseManagement({ initialHouses }: HouseManagementProps) {
+  const [houses, setHouses] = useState<House[]>(initialHouses);
+  const [editingHouse, setEditingHouse] = useState<House | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [deletingHouseId, setDeletingHouseId] = useState<string | null>(null);
+  const [viewingMembers, setViewingMembers] = useState<House | null>(null);
+  const [removingMemberId, setRemovingMemberId] = useState<string | null>(null);
+  const [formData, setFormData] = useState<HouseFormData>({
+    name: "",
+    description: "",
+  });
+  const [, startTransition] = useTransition();
+
+  const fetchHouses = async () => {
+    try {
+      const response = await fetch("/api/admin/houses");
+      if (response.ok) {
+        const data = await response.json();
+        setHouses(data);
+      }
+    } catch (error) {
+      console.error("Error fetching houses:", error);
+    }
+  };
+
+  const handleEdit = (house: House) => {
+    setEditingHouse(house);
+    setFormData({
+      name: house.name,
+      description: house.description || "",
+    });
+  };
+
+  const handleSave = async () => {
+    if (!editingHouse) return;
+
+    setSaving(true);
+    startTransition(async () => {
+      try {
+        const result = await updateHouse(editingHouse.id, {
+          name: formData.name,
+          description: formData.description || null,
+        });
+
+        if (result.success) {
+          await fetchHouses();
+          setEditingHouse(null);
+          setFormData({ name: "", description: "" });
+        } else {
+          alert(result.error || "Erreur lors de la mise à jour");
+        }
+      } catch (error) {
+        console.error("Error updating house:", error);
+        alert("Erreur lors de la mise à jour");
+      } finally {
+        setSaving(false);
+      }
+    });
+  };
+
+  const handleDelete = async (houseId: string) => {
+    if (
+      !confirm(
+        "Êtes-vous sûr de vouloir supprimer cette maison ? Cette action est irréversible et supprimera tous les membres."
+      )
+    ) {
+      return;
+    }
+
+    setDeletingHouseId(houseId);
+    startTransition(async () => {
+      try {
+        const result = await deleteHouse(houseId);
+
+        if (result.success) {
+          await fetchHouses();
+        } else {
+          alert(result.error || "Erreur lors de la suppression");
+        }
+      } catch (error) {
+        console.error("Error deleting house:", error);
+        alert("Erreur lors de la suppression");
+      } finally {
+        setDeletingHouseId(null);
+      }
+    });
+  };
+
+  const handleCancel = () => {
+    setEditingHouse(null);
+    setFormData({ name: "", description: "" });
+  };
+
+  const handleRemoveMember = async (houseId: string, memberId: string) => {
+    if (
+      !confirm(
+        "Êtes-vous sûr de vouloir retirer ce membre de la maison ? Cette action lui retirera des points."
+      )
+    ) {
+      return;
+    }
+
+    setRemovingMemberId(memberId);
+    startTransition(async () => {
+      try {
+        const result = await removeMember(houseId, memberId);
+
+        if (result.success) {
+          // Récupérer les maisons mises à jour
+          const response = await fetch("/api/admin/houses");
+          if (response.ok) {
+            const updatedHouses = await response.json();
+            setHouses(updatedHouses);
+            // Mettre à jour la modal si elle est ouverte
+            if (viewingMembers) {
+              const updatedHouse = updatedHouses.find((h: House) => h.id === houseId);
+              if (updatedHouse) {
+                setViewingMembers(updatedHouse);
+              } else {
+                // Si la maison n'existe plus, fermer la modal
+                setViewingMembers(null);
+              }
+            }
+          }
+        } else {
+          alert(result.error || "Erreur lors du retrait du membre");
+        }
+      } catch (error) {
+        console.error("Error removing member:", error);
+        alert("Erreur lors du retrait du membre");
+      } finally {
+        setRemovingMemberId(null);
+      }
+    });
+  };
+
+  const formatNumber = (num: number) => {
+    return num.toLocaleString("en-US");
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 mb-4">
+        <h3 className="text-lg sm:text-xl font-gaming font-bold text-pixel-gold break-words">
+          Maisons ({houses.length})
+        </h3>
+      </div>
+
+      {/* Modal d'édition */}
+      {editingHouse && (
+        <Modal isOpen={!!editingHouse} onClose={handleCancel} size="lg">
+          <div className="p-6">
+            <div className="flex items-center justify-between mb-4">
+              <h4 className="text-pixel-gold font-bold text-base sm:text-lg break-words">
+                Modifier la maison
+              </h4>
+              <CloseButton onClick={handleCancel} size="lg" />
+            </div>
+            <div className="space-y-4">
+              <Input
+                type="text"
+                label="Nom de la maison"
+                value={formData.name}
+                onChange={(e) =>
+                  setFormData({ ...formData, name: e.target.value })
+                }
+                placeholder="Nom de la maison"
+                className="text-xs sm:text-sm px-3 py-2"
+              />
+              <Textarea
+                label="Description"
+                value={formData.description}
+                onChange={(e) =>
+                  setFormData({ ...formData, description: e.target.value })
+                }
+                placeholder="Description de la maison"
+                rows={4}
+                className="text-xs sm:text-sm px-3 py-2"
+              />
+              <div className="flex flex-col sm:flex-row gap-2">
+                <Button
+                  onClick={handleSave}
+                  variant="success"
+                  size="md"
+                  disabled={saving}
+                >
+                  {saving ? "Enregistrement..." : "Enregistrer"}
+                </Button>
+                <Button onClick={handleCancel} variant="secondary" size="md">
+                  Annuler
+                </Button>
+              </div>
+            </div>
+          </div>
+        </Modal>
+      )}
+
+      {/* Modal des membres */}
+      {viewingMembers && (
+        <Modal
+          isOpen={!!viewingMembers}
+          onClose={() => setViewingMembers(null)}
+          size="lg"
+        >
+          <div className="p-6">
+            <div className="flex items-center justify-between mb-4">
+              <h4 className="text-pixel-gold font-bold text-base sm:text-lg break-words">
+                Membres de &quot;{viewingMembers.name}&quot;
+              </h4>
+              <CloseButton onClick={() => setViewingMembers(null)} size="lg" />
+            </div>
+
+            {viewingMembers.memberships.length === 0 ? (
+              <div className="text-center text-gray-400 py-8">
+                Aucun membre dans cette maison
+              </div>
+            ) : (
+              <div className="space-y-3 max-h-[60vh] overflow-y-auto">
+                {viewingMembers.memberships.map((membership) => {
+                  const roleColor = getRoleColor(membership.role);
+                  return (
+                    <Card
+                      key={membership.id}
+                      variant="default"
+                      className="p-3 sm:p-4"
+                    >
+                      <div className="flex flex-col sm:flex-row sm:items-center gap-3">
+                        <div className="flex items-center gap-3 flex-1 min-w-0">
+                          <Avatar
+                            src={membership.user.avatar}
+                            username={membership.user.username}
+                            size="md"
+                            borderClassName="border-2"
+                            style={{
+                              borderColor: roleColor,
+                            }}
+                          />
+                          <div className="flex-1 min-w-0">
+                            <h5 className="text-pixel-gold font-bold text-sm sm:text-base break-words">
+                              {membership.user.username}
+                            </h5>
+                            <p className="text-gray-400 text-xs sm:text-sm">
+                              Niveau {membership.user.level} • Score:{" "}
+                              {formatNumber(membership.user.score)}
+                            </p>
+                          </div>
+                        </div>
+                        <div className="flex items-center gap-2 flex-shrink-0">
+                          <Badge
+                            variant="default"
+                            size="sm"
+                            style={{
+                              color: roleColor,
+                              backgroundColor: `color-mix(in srgb, ${roleColor} 15%, transparent)`,
+                              borderColor: `color-mix(in srgb, ${roleColor} 30%, transparent)`,
+                            }}
+                          >
+                            {getRoleLabel(membership.role)}
+                          </Badge>
+                          {membership.role !== "OWNER" && (
+                            <Button
+                              onClick={() =>
+                                handleRemoveMember(
+                                  viewingMembers.id,
+                                  membership.user.id
+                                )
+                              }
+                              variant="danger"
+                              size="sm"
+                              disabled={removingMemberId === membership.user.id}
+                              className="whitespace-nowrap"
+                            >
+                              {removingMemberId === membership.user.id
+                                ? "..."
+                                : "Retirer"}
+                            </Button>
+                          )}
+                        </div>
+                      </div>
+                    </Card>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </Modal>
+      )}
+
+      {houses.length === 0 ? (
+        <div className="text-center text-gray-400 py-8">
+          Aucune maison trouvée
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {houses.map((house) => {
+            return (
+              <Card key={house.id} variant="default" className="p-3 sm:p-4">
+                <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-3">
+                  <div className="flex-1 min-w-0">
+                    <div className="flex flex-wrap items-center gap-2 sm:gap-3 mb-2">
+                      <h4 className="text-pixel-gold font-bold text-base sm:text-lg break-words">
+                        {house.name}
+                      </h4>
+                      <Badge variant="info" size="sm">
+                        {house.membersCount} membre
+                        {house.membersCount !== 1 ? "s" : ""}
+                      </Badge>
+                    </div>
+                    {house.description && (
+                      <p className="text-gray-400 text-xs sm:text-sm mb-2 break-words">
+                        {house.description}
+                      </p>
+                    )}
+                    <div className="flex flex-wrap items-center gap-2 sm:gap-4 mt-2">
+                      <div className="flex items-center gap-2">
+                        <Avatar
+                          src={house.creator.avatar}
+                          username={house.creator.username}
+                          size="sm"
+                          borderClassName="border border-pixel-gold/50"
+                        />
+                        <p className="text-gray-500 text-[10px] sm:text-xs">
+                          Créée par {house.creator.username}
+                        </p>
+                      </div>
+                      <p className="text-gray-500 text-[10px] sm:text-xs whitespace-nowrap">
+                        Créée le{" "}
+                        {new Date(house.createdAt).toLocaleDateString("fr-FR")}
+                      </p>
+                    </div>
+                  </div>
+                  {!editingHouse && (
+                    <div className="flex gap-2 sm:ml-4 flex-shrink-0 flex-wrap">
+                      <Button
+                        onClick={() => setViewingMembers(house)}
+                        variant="primary"
+                        size="sm"
+                        className="whitespace-nowrap"
+                      >
+                        Membres ({house.membersCount})
+                      </Button>
+                      <Button
+                        onClick={() => handleEdit(house)}
+                        variant="primary"
+                        size="sm"
+                        className="whitespace-nowrap"
+                      >
+                        Modifier
+                      </Button>
+                      <Button
+                        onClick={() => handleDelete(house.id)}
+                        variant="danger"
+                        size="sm"
+                        disabled={deletingHouseId === house.id}
+                        className="whitespace-nowrap"
+                      >
+                        {deletingHouseId === house.id ? "..." : "Supprimer"}
+                      </Button>
+                    </div>
+                  )}
+                </div>
+              </Card>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+

components/admin/UserManagement.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useTransition } from "react";
+import { useState, useTransition } from "react";
 import {
   Avatar,
   Input,
@@ -37,19 +37,18 @@ 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 [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 +58,6 @@ export default function UserManagement() {
       }
     } catch (error) {
       console.error("Error fetching users:", error);
-    } finally {
-      setLoading(false);
     }
   };
 
@@ -185,10 +182,6 @@ export default function UserManagement() {
       ? Math.max(0, currentEditingUserData.xp + editingUser.xpDelta)
       : 0;
 
-  if (loading) {
-    return <div className="text-center text-gray-400 py-8">Chargement...</div>;
-  }
-
   return (
     <div className="space-y-4">
       {users.length === 0 ? (

components/ui/Avatar.tsx

@@ -10,6 +10,7 @@ interface AvatarProps {
   className?: string;
   borderClassName?: string;
   fallbackText?: string;
+  style?: React.CSSProperties;
 }
 
 const sizeClasses = {
@@ -28,6 +29,7 @@ export default function Avatar({
   className = "",
   borderClassName = "",
   fallbackText,
+  style,
 }: AvatarProps) {
   const [avatarError, setAvatarError] = useState(false);
   const prevSrcRef = useRef<string | null | undefined>(undefined);
@@ -53,6 +55,7 @@ export default function Avatar({
       style={{
         backgroundColor: "var(--card)",
         borderColor: "var(--border)",
+        ...style,
       }}
     >
       {displaySrc ? (

components/ui/Button.tsx

@@ -1,13 +1,17 @@
 "use client";
 
 import { ButtonHTMLAttributes, ReactNode, ElementType } 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",

hooks/usePreferences.ts

@@ -6,6 +6,8 @@ interface Preferences {
   eventsBackground: string | null;
   leaderboardBackground: string | null;
   challengesBackground: string | null;
+  profileBackground: string | null;
+  houseBackground: string | null;
 }
 
 export function usePreferences() {
@@ -23,6 +25,8 @@ export function usePreferences() {
             eventsBackground: null,
             leaderboardBackground: null,
             challengesBackground: null,
+            profileBackground: null,
+            houseBackground: null,
           }
         );
         setLoading(false);
@@ -33,6 +37,8 @@ export function usePreferences() {
           eventsBackground: null,
           leaderboardBackground: null,
           challengesBackground: null,
+          profileBackground: null,
+          houseBackground: null,
         });
         setLoading(false);
       });
@@ -42,7 +48,7 @@ export function usePreferences() {
 }
 
 export function useBackgroundImage(
-  page: "home" | "events" | "leaderboard" | "challenges",
+  page: "home" | "events" | "leaderboard" | "challenges" | "profile" | "houses",
   defaultImage: string
 ) {
   const { preferences } = usePreferences();
@@ -51,7 +57,9 @@ export function useBackgroundImage(
 
   useEffect(() => {
     if (preferences) {
-      const imageKey = `${page}Background` as keyof Preferences;
+      // Mapping spécial pour "houses" -> "house" (car la colonne est houseBackground)
+      const dbPage = page === "houses" ? "house" : page;
+      const imageKey = `${dbPage}Background` as keyof Preferences;
       const customImage = preferences[imageKey];
       const rawImage = customImage || defaultImage;
       // Normaliser l'URL pour utiliser l'API si nécessaire

lib/preferences.ts

@@ -1,7 +1,7 @@
 import { sitePreferencesService } from "@/services/preferences/site-preferences.service";
 
 export async function getBackgroundImage(
-  page: "home" | "events" | "leaderboard" | "challenges",
+  page: "home" | "events" | "leaderboard" | "challenges" | "profile" | "houses",
   defaultImage: string
 ): Promise<string> {
   return sitePreferencesService.getBackgroundImage(page, defaultImage);

prisma/generated/prisma/internal/prismaNamespace.ts

@@ -1349,6 +1349,8 @@ export const SitePreferencesScalarFieldEnum = {
   eventsBackground: 'eventsBackground',
   leaderboardBackground: 'leaderboardBackground',
   challengesBackground: 'challengesBackground',
+  profileBackground: 'profileBackground',
+  houseBackground: 'houseBackground',
   eventRegistrationPoints: 'eventRegistrationPoints',
   eventFeedbackPoints: 'eventFeedbackPoints',
   houseJoinPoints: 'houseJoinPoints',

prisma/generated/prisma/internal/prismaNamespaceBrowser.ts

@@ -162,6 +162,8 @@ export const SitePreferencesScalarFieldEnum = {
   eventsBackground: 'eventsBackground',
   leaderboardBackground: 'leaderboardBackground',
   challengesBackground: 'challengesBackground',
+  profileBackground: 'profileBackground',
+  houseBackground: 'houseBackground',
   eventRegistrationPoints: 'eventRegistrationPoints',
   eventFeedbackPoints: 'eventFeedbackPoints',
   houseJoinPoints: 'houseJoinPoints',

prisma/generated/prisma/models/SitePreferences.ts

@@ -48,6 +48,8 @@ export type SitePreferencesMinAggregateOutputType = {
   eventsBackground: string | null
   leaderboardBackground: string | null
   challengesBackground: string | null
+  profileBackground: string | null
+  houseBackground: string | null
   eventRegistrationPoints: number | null
   eventFeedbackPoints: number | null
   houseJoinPoints: number | null
@@ -63,6 +65,8 @@ export type SitePreferencesMaxAggregateOutputType = {
   eventsBackground: string | null
   leaderboardBackground: string | null
   challengesBackground: string | null
+  profileBackground: string | null
+  houseBackground: string | null
   eventRegistrationPoints: number | null
   eventFeedbackPoints: number | null
   houseJoinPoints: number | null
@@ -78,6 +82,8 @@ export type SitePreferencesCountAggregateOutputType = {
   eventsBackground: number
   leaderboardBackground: number
   challengesBackground: number
+  profileBackground: number
+  houseBackground: number
   eventRegistrationPoints: number
   eventFeedbackPoints: number
   houseJoinPoints: number
@@ -111,6 +117,8 @@ export type SitePreferencesMinAggregateInputType = {
   eventsBackground?: true
   leaderboardBackground?: true
   challengesBackground?: true
+  profileBackground?: true
+  houseBackground?: true
   eventRegistrationPoints?: true
   eventFeedbackPoints?: true
   houseJoinPoints?: true
@@ -126,6 +134,8 @@ export type SitePreferencesMaxAggregateInputType = {
   eventsBackground?: true
   leaderboardBackground?: true
   challengesBackground?: true
+  profileBackground?: true
+  houseBackground?: true
   eventRegistrationPoints?: true
   eventFeedbackPoints?: true
   houseJoinPoints?: true
@@ -141,6 +151,8 @@ export type SitePreferencesCountAggregateInputType = {
   eventsBackground?: true
   leaderboardBackground?: true
   challengesBackground?: true
+  profileBackground?: true
+  houseBackground?: true
   eventRegistrationPoints?: true
   eventFeedbackPoints?: true
   houseJoinPoints?: true
@@ -243,6 +255,8 @@ export type SitePreferencesGroupByOutputType = {
   eventsBackground: string | null
   leaderboardBackground: string | null
   challengesBackground: string | null
+  profileBackground: string | null
+  houseBackground: string | null
   eventRegistrationPoints: number
   eventFeedbackPoints: number
   houseJoinPoints: number
@@ -281,6 +295,8 @@ export type SitePreferencesWhereInput = {
   eventsBackground?: Prisma.StringNullableFilter<"SitePreferences"> | string | null
   leaderboardBackground?: Prisma.StringNullableFilter<"SitePreferences"> | string | null
   challengesBackground?: Prisma.StringNullableFilter<"SitePreferences"> | string | null
+  profileBackground?: Prisma.StringNullableFilter<"SitePreferences"> | string | null
+  houseBackground?: Prisma.StringNullableFilter<"SitePreferences"> | string | null
   eventRegistrationPoints?: Prisma.IntFilter<"SitePreferences"> | number
   eventFeedbackPoints?: Prisma.IntFilter<"SitePreferences"> | number
   houseJoinPoints?: Prisma.IntFilter<"SitePreferences"> | number
@@ -296,6 +312,8 @@ export type SitePreferencesOrderByWithRelationInput = {
   eventsBackground?: Prisma.SortOrderInput | Prisma.SortOrder
   leaderboardBackground?: Prisma.SortOrderInput | Prisma.SortOrder
   challengesBackground?: Prisma.SortOrderInput | Prisma.SortOrder
+  profileBackground?: Prisma.SortOrderInput | Prisma.SortOrder
+  houseBackground?: Prisma.SortOrderInput | Prisma.SortOrder
   eventRegistrationPoints?: Prisma.SortOrder
   eventFeedbackPoints?: Prisma.SortOrder
   houseJoinPoints?: Prisma.SortOrder
@@ -314,6 +332,8 @@ export type SitePreferencesWhereUniqueInput = Prisma.AtLeast<{
   eventsBackground?: Prisma.StringNullableFilter<"SitePreferences"> | string | null
   leaderboardBackground?: Prisma.StringNullableFilter<"SitePreferences"> | string | null
   challengesBackground?: Prisma.StringNullableFilter<"SitePreferences"> | string | null
+  profileBackground?: Prisma.StringNullableFilter<"SitePreferences"> | string | null
+  houseBackground?: Prisma.StringNullableFilter<"SitePreferences"> | string | null
   eventRegistrationPoints?: Prisma.IntFilter<"SitePreferences"> | number
   eventFeedbackPoints?: Prisma.IntFilter<"SitePreferences"> | number
   houseJoinPoints?: Prisma.IntFilter<"SitePreferences"> | number
@@ -329,6 +349,8 @@ export type SitePreferencesOrderByWithAggregationInput = {
   eventsBackground?: Prisma.SortOrderInput | Prisma.SortOrder
   leaderboardBackground?: Prisma.SortOrderInput | Prisma.SortOrder
   challengesBackground?: Prisma.SortOrderInput | Prisma.SortOrder
+  profileBackground?: Prisma.SortOrderInput | Prisma.SortOrder
+  houseBackground?: Prisma.SortOrderInput | Prisma.SortOrder
   eventRegistrationPoints?: Prisma.SortOrder
   eventFeedbackPoints?: Prisma.SortOrder
   houseJoinPoints?: Prisma.SortOrder
@@ -352,6 +374,8 @@ export type SitePreferencesScalarWhereWithAggregatesInput = {
   eventsBackground?: Prisma.StringNullableWithAggregatesFilter<"SitePreferences"> | string | null
   leaderboardBackground?: Prisma.StringNullableWithAggregatesFilter<"SitePreferences"> | string | null
   challengesBackground?: Prisma.StringNullableWithAggregatesFilter<"SitePreferences"> | string | null
+  profileBackground?: Prisma.StringNullableWithAggregatesFilter<"SitePreferences"> | string | null
+  houseBackground?: Prisma.StringNullableWithAggregatesFilter<"SitePreferences"> | string | null
   eventRegistrationPoints?: Prisma.IntWithAggregatesFilter<"SitePreferences"> | number
   eventFeedbackPoints?: Prisma.IntWithAggregatesFilter<"SitePreferences"> | number
   houseJoinPoints?: Prisma.IntWithAggregatesFilter<"SitePreferences"> | number
@@ -367,6 +391,8 @@ export type SitePreferencesCreateInput = {
   eventsBackground?: string | null
   leaderboardBackground?: string | null
   challengesBackground?: string | null
+  profileBackground?: string | null
+  houseBackground?: string | null
   eventRegistrationPoints?: number
   eventFeedbackPoints?: number
   houseJoinPoints?: number
@@ -382,6 +408,8 @@ export type SitePreferencesUncheckedCreateInput = {
   eventsBackground?: string | null
   leaderboardBackground?: string | null
   challengesBackground?: string | null
+  profileBackground?: string | null
+  houseBackground?: string | null
   eventRegistrationPoints?: number
   eventFeedbackPoints?: number
   houseJoinPoints?: number
@@ -397,6 +425,8 @@ export type SitePreferencesUpdateInput = {
   eventsBackground?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
   leaderboardBackground?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
   challengesBackground?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
+  profileBackground?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
+  houseBackground?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
   eventRegistrationPoints?: Prisma.IntFieldUpdateOperationsInput | number
   eventFeedbackPoints?: Prisma.IntFieldUpdateOperationsInput | number
   houseJoinPoints?: Prisma.IntFieldUpdateOperationsInput | number
@@ -412,6 +442,8 @@ export type SitePreferencesUncheckedUpdateInput = {
   eventsBackground?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
   leaderboardBackground?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
   challengesBackground?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
+  profileBackground?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
+  houseBackground?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
   eventRegistrationPoints?: Prisma.IntFieldUpdateOperationsInput | number
   eventFeedbackPoints?: Prisma.IntFieldUpdateOperationsInput | number
   houseJoinPoints?: Prisma.IntFieldUpdateOperationsInput | number
@@ -427,6 +459,8 @@ export type SitePreferencesCreateManyInput = {
   eventsBackground?: string | null
   leaderboardBackground?: string | null
   challengesBackground?: string | null
+  profileBackground?: string | null
+  houseBackground?: string | null
   eventRegistrationPoints?: number
   eventFeedbackPoints?: number
   houseJoinPoints?: number
@@ -442,6 +476,8 @@ export type SitePreferencesUpdateManyMutationInput = {
   eventsBackground?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
   leaderboardBackground?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
   challengesBackground?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
+  profileBackground?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
+  houseBackground?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
   eventRegistrationPoints?: Prisma.IntFieldUpdateOperationsInput | number
   eventFeedbackPoints?: Prisma.IntFieldUpdateOperationsInput | number
   houseJoinPoints?: Prisma.IntFieldUpdateOperationsInput | number
@@ -457,6 +493,8 @@ export type SitePreferencesUncheckedUpdateManyInput = {
   eventsBackground?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
   leaderboardBackground?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
   challengesBackground?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
+  profileBackground?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
+  houseBackground?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
   eventRegistrationPoints?: Prisma.IntFieldUpdateOperationsInput | number
   eventFeedbackPoints?: Prisma.IntFieldUpdateOperationsInput | number
   houseJoinPoints?: Prisma.IntFieldUpdateOperationsInput | number
@@ -472,6 +510,8 @@ export type SitePreferencesCountOrderByAggregateInput = {
   eventsBackground?: Prisma.SortOrder
   leaderboardBackground?: Prisma.SortOrder
   challengesBackground?: Prisma.SortOrder
+  profileBackground?: Prisma.SortOrder
+  houseBackground?: Prisma.SortOrder
   eventRegistrationPoints?: Prisma.SortOrder
   eventFeedbackPoints?: Prisma.SortOrder
   houseJoinPoints?: Prisma.SortOrder
@@ -495,6 +535,8 @@ export type SitePreferencesMaxOrderByAggregateInput = {
   eventsBackground?: Prisma.SortOrder
   leaderboardBackground?: Prisma.SortOrder
   challengesBackground?: Prisma.SortOrder
+  profileBackground?: Prisma.SortOrder
+  houseBackground?: Prisma.SortOrder
   eventRegistrationPoints?: Prisma.SortOrder
   eventFeedbackPoints?: Prisma.SortOrder
   houseJoinPoints?: Prisma.SortOrder
@@ -510,6 +552,8 @@ export type SitePreferencesMinOrderByAggregateInput = {
   eventsBackground?: Prisma.SortOrder
   leaderboardBackground?: Prisma.SortOrder
   challengesBackground?: Prisma.SortOrder
+  profileBackground?: Prisma.SortOrder
+  houseBackground?: Prisma.SortOrder
   eventRegistrationPoints?: Prisma.SortOrder
   eventFeedbackPoints?: Prisma.SortOrder
   houseJoinPoints?: Prisma.SortOrder
@@ -535,6 +579,8 @@ export type SitePreferencesSelect<ExtArgs extends runtime.Types.Extensions.Inter
   eventsBackground?: boolean
   leaderboardBackground?: boolean
   challengesBackground?: boolean
+  profileBackground?: boolean
+  houseBackground?: boolean
   eventRegistrationPoints?: boolean
   eventFeedbackPoints?: boolean
   houseJoinPoints?: boolean
@@ -550,6 +596,8 @@ export type SitePreferencesSelectCreateManyAndReturn<ExtArgs extends runtime.Typ
   eventsBackground?: boolean
   leaderboardBackground?: boolean
   challengesBackground?: boolean
+  profileBackground?: boolean
+  houseBackground?: boolean
   eventRegistrationPoints?: boolean
   eventFeedbackPoints?: boolean
   houseJoinPoints?: boolean
@@ -565,6 +613,8 @@ export type SitePreferencesSelectUpdateManyAndReturn<ExtArgs extends runtime.Typ
   eventsBackground?: boolean
   leaderboardBackground?: boolean
   challengesBackground?: boolean
+  profileBackground?: boolean
+  houseBackground?: boolean
   eventRegistrationPoints?: boolean
   eventFeedbackPoints?: boolean
   houseJoinPoints?: boolean
@@ -580,6 +630,8 @@ export type SitePreferencesSelectScalar = {
   eventsBackground?: boolean
   leaderboardBackground?: boolean
   challengesBackground?: boolean
+  profileBackground?: boolean
+  houseBackground?: boolean
   eventRegistrationPoints?: boolean
   eventFeedbackPoints?: boolean
   houseJoinPoints?: boolean
@@ -589,7 +641,7 @@ export type SitePreferencesSelectScalar = {
   updatedAt?: boolean
 }
 
-export type SitePreferencesOmit<ExtArgs extends runtime.Types.Extensions.InternalArgs = runtime.Types.Extensions.DefaultArgs> = runtime.Types.Extensions.GetOmit<"id" | "homeBackground" | "eventsBackground" | "leaderboardBackground" | "challengesBackground" | "eventRegistrationPoints" | "eventFeedbackPoints" | "houseJoinPoints" | "houseLeavePoints" | "houseCreatePoints" | "createdAt" | "updatedAt", ExtArgs["result"]["sitePreferences"]>
+export type SitePreferencesOmit<ExtArgs extends runtime.Types.Extensions.InternalArgs = runtime.Types.Extensions.DefaultArgs> = runtime.Types.Extensions.GetOmit<"id" | "homeBackground" | "eventsBackground" | "leaderboardBackground" | "challengesBackground" | "profileBackground" | "houseBackground" | "eventRegistrationPoints" | "eventFeedbackPoints" | "houseJoinPoints" | "houseLeavePoints" | "houseCreatePoints" | "createdAt" | "updatedAt", ExtArgs["result"]["sitePreferences"]>
 
 export type $SitePreferencesPayload<ExtArgs extends runtime.Types.Extensions.InternalArgs = runtime.Types.Extensions.DefaultArgs> = {
   name: "SitePreferences"
@@ -600,6 +652,8 @@ export type $SitePreferencesPayload<ExtArgs extends runtime.Types.Extensions.Int
     eventsBackground: string | null
     leaderboardBackground: string | null
     challengesBackground: string | null
+    profileBackground: string | null
+    houseBackground: string | null
     eventRegistrationPoints: number
     eventFeedbackPoints: number
     houseJoinPoints: number
@@ -1035,6 +1089,8 @@ export interface SitePreferencesFieldRefs {
   readonly eventsBackground: Prisma.FieldRef<"SitePreferences", 'String'>
   readonly leaderboardBackground: Prisma.FieldRef<"SitePreferences", 'String'>
   readonly challengesBackground: Prisma.FieldRef<"SitePreferences", 'String'>
+  readonly profileBackground: Prisma.FieldRef<"SitePreferences", 'String'>
+  readonly houseBackground: Prisma.FieldRef<"SitePreferences", 'String'>
   readonly eventRegistrationPoints: Prisma.FieldRef<"SitePreferences", 'Int'>
   readonly eventFeedbackPoints: Prisma.FieldRef<"SitePreferences", 'Int'>
   readonly houseJoinPoints: Prisma.FieldRef<"SitePreferences", 'Int'>

prisma/migrations/20250116000000_add_profile_background/migration.sql

@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "SitePreferences" ADD COLUMN "profileBackground" TEXT;
+

prisma/migrations/20250116000001_add_house_background/migration.sql

@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "SitePreferences" ADD COLUMN "houseBackground" TEXT;
+

prisma/schema.prisma

@@ -107,6 +107,8 @@ model SitePreferences {
   eventsBackground      String?
   leaderboardBackground String?
   challengesBackground  String?
+  profileBackground     String?
+  houseBackground       String?
   eventRegistrationPoints Int    @default(100)
   eventFeedbackPoints  Int      @default(100)
   houseJoinPoints      Int      @default(100)

services/houses/house.service.ts

@@ -981,6 +981,62 @@ export class HouseService {
     });
   }
 
+  /**
+   * Retire un membre d'une maison (par un admin du site)
+   * Bypass les vérifications normales de permissions
+   */
+  async removeMemberAsAdmin(
+    houseId: string,
+    memberIdToRemove: string
+  ): Promise<void> {
+    const memberToRemoveMembership = await prisma.houseMembership.findUnique({
+      where: {
+        houseId_userId: {
+          houseId,
+          userId: memberIdToRemove,
+        },
+      },
+    });
+
+    if (!memberToRemoveMembership) {
+      throw new NotFoundError("Membre");
+    }
+
+    // Un OWNER ne peut pas être retiré même par un admin
+    if (memberToRemoveMembership.role === "OWNER") {
+      throw new ForbiddenError("Le propriétaire ne peut pas être retiré");
+    }
+
+    // Récupérer les points à enlever depuis les préférences du site
+    const sitePreferences =
+      await sitePreferencesService.getOrCreateSitePreferences();
+    const pointsToDeduct =
+      (sitePreferences as SitePreferencesWithHousePoints).houseLeavePoints ??
+      100;
+
+    // Supprimer le membership et enlever les points
+    await prisma.$transaction(async (tx) => {
+      await tx.houseMembership.delete({
+        where: {
+          houseId_userId: {
+            houseId,
+            userId: memberIdToRemove,
+          },
+        },
+      });
+
+      // Enlever les points à l'utilisateur retiré
+      await tx.user.update({
+        where: { id: memberIdToRemove },
+        data: {
+          score: {
+            decrement: pointsToDeduct,
+          },
+        },
+      });
+    });
+  }
+
   /**
    * Quitte une maison
    */

services/preferences/site-preferences.service.ts

@@ -14,6 +14,8 @@ export interface UpdateSitePreferencesInput {
   eventsBackground?: string | null;
   leaderboardBackground?: string | null;
   challengesBackground?: string | null;
+  profileBackground?: string | null;
+  houseBackground?: string | null;
   eventRegistrationPoints?: number;
   eventFeedbackPoints?: number;
   houseJoinPoints?: number;
@@ -50,6 +52,8 @@ export class SitePreferencesService {
           eventsBackground: null,
           leaderboardBackground: null,
           challengesBackground: null,
+          profileBackground: null,
+          houseBackground: null,
           eventRegistrationPoints: 100,
           eventFeedbackPoints: 100,
           houseJoinPoints: 100,
@@ -93,6 +97,14 @@ export class SitePreferencesService {
           data.challengesBackground === ""
             ? null
             : (data.challengesBackground ?? undefined),
+        profileBackground:
+          data.profileBackground === ""
+            ? null
+            : (data.profileBackground ?? undefined),
+        houseBackground:
+          data.houseBackground === ""
+            ? null
+            : (data.houseBackground ?? undefined),
         eventRegistrationPoints:
           data.eventRegistrationPoints !== undefined
             ? data.eventRegistrationPoints
@@ -126,6 +138,12 @@ export class SitePreferencesService {
           data.challengesBackground === ""
             ? null
             : (data.challengesBackground ?? null),
+        profileBackground:
+          data.profileBackground === ""
+            ? null
+            : (data.profileBackground ?? null),
+        houseBackground:
+          data.houseBackground === "" ? null : (data.houseBackground ?? null),
         eventRegistrationPoints: data.eventRegistrationPoints ?? 100,
         eventFeedbackPoints: data.eventFeedbackPoints ?? 100,
         houseJoinPoints: data.houseJoinPoints ?? 100,
@@ -139,7 +157,13 @@ export class SitePreferencesService {
    * Récupère l'image de fond pour une page donnée
    */
   async getBackgroundImage(
-    page: "home" | "events" | "leaderboard" | "challenges",
+    page:
+      | "home"
+      | "events"
+      | "leaderboard"
+      | "challenges"
+      | "profile"
+      | "houses",
     defaultImage: string
   ): Promise<string> {
     try {
@@ -151,7 +175,9 @@ export class SitePreferencesService {
         return defaultImage;
       }
 
-      const imageKey = `${page}Background` as keyof typeof sitePreferences;
+      // Mapping spécial pour "houses" -> "house" (car la colonne est houseBackground)
+      const dbPage = page === "houses" ? "house" : page;
+      const imageKey = `${dbPage}Background` as keyof typeof sitePreferences;
       const customImage = sitePreferences[imageKey];
 
       const imageUrl = (customImage as string | null) || defaultImage;