Add HouseManagement integration to AdminPanel and implement removeMemberAsAdmin feature in HouseService: Enhance admin capabilities with new section for house management and functionality to remove members from houses by admins, including points deduction logic.

components/admin/AdminPanel.tsx

@@ -5,6 +5,7 @@ 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";
@@ -33,7 +34,8 @@ type AdminSection =
   | "users"
   | "events"
   | "feedbacks"
-  | "challenges";
+  | "challenges"
+  | "houses";
 
 export default function AdminPanel({ initialPreferences }: AdminPanelProps) {
   const [activeSection, setActiveSection] =
@@ -90,6 +92,14 @@ export default function AdminPanel({ initialPreferences }: AdminPanelProps) {
           >
             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" && (
@@ -143,6 +153,15 @@ export default function AdminPanel({ initialPreferences }: AdminPanelProps) {
             <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/HouseManagement.tsx

@@ -0,0 +1,454 @@
+"use client";
+
+import { useState, useEffect, 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)";
+  }
+};
+
+export default function HouseManagement() {
+  const [houses, setHouses] = useState<House[]>([]);
+  const [loading, setLoading] = useState(true);
+  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();
+
+  useEffect(() => {
+    fetchHouses();
+  }, []);
+
+  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);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  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");
+  };
+
+  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">
+        <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/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 ? (