Refactor HousesPage and HouseManagement components: Introduce TypeScript types for house and invitation data structures to enhance type safety. Update data serialization logic for improved clarity and maintainability. Refactor UI components for better readability and consistency, including adjustments to conditional rendering and styling in HouseManagement. Optimize fetch logic in HousesSection with useCallback for performance improvements.

app/houses/page.tsx

@@ -5,9 +5,41 @@ import NavigationWrapper from "@/components/navigation/NavigationWrapper";
 import HousesSection from "@/components/houses/HousesSection";
 import { houseService } from "@/services/houses/house.service";
 import { prisma } from "@/services/database";
+import type { House, HouseMembership, HouseInvitation } from "@/prisma/generated/prisma/client";
 
 export const dynamic = "force-dynamic";
 
+// Types pour les données sérialisées
+type HouseWithRelations = House & {
+  creator?: {
+    id: string;
+    username: string;
+    avatar: string | null;
+  } | null;
+  creatorId?: string;
+  memberships?: Array<HouseMembership & {
+    user: {
+      id: string;
+      username: string;
+      avatar: string | null;
+      score: number | null;
+      level: number | null;
+    };
+  }>;
+};
+
+type InvitationWithRelations = HouseInvitation & {
+  house: {
+    id: string;
+    name: string;
+  };
+  inviter: {
+    id: string;
+    username: string;
+    avatar: string | null;
+  };
+};
+
 export default async function HousesPage() {
   const session = await auth();
 
@@ -90,12 +122,12 @@ export default async function HousesPage() {
   ]);
 
   // Sérialiser les données pour le client
-  const houses = (housesData as any[]).map((house: any) => ({
+  const houses = (housesData as HouseWithRelations[]).map((house: HouseWithRelations) => ({
     id: house.id,
     name: house.name,
     description: house.description,
-    creator: house.creator || { id: house.creatorId, username: "Unknown", avatar: null },
-    memberships: (house.memberships || []).map((m: any) => ({
+    creator: house.creator || { id: house.creatorId || "", username: "Unknown", avatar: null },
+    memberships: (house.memberships || []).map((m) => ({
       id: m.id,
       role: m.role,
       user: {
@@ -113,8 +145,8 @@ export default async function HousesPage() {
         id: myHouseData.id,
         name: myHouseData.name,
         description: myHouseData.description,
-        creator: (myHouseData as any).creator || { id: (myHouseData as any).creatorId, username: "Unknown", avatar: null },
-        memberships: ((myHouseData as any).memberships || []).map((m: any) => ({
+        creator: (myHouseData as HouseWithRelations).creator || { id: (myHouseData as HouseWithRelations).creatorId || "", username: "Unknown", avatar: null },
+        memberships: ((myHouseData as HouseWithRelations).memberships || []).map((m) => ({
           id: m.id,
           role: m.role,
           user: {
@@ -128,7 +160,7 @@ export default async function HousesPage() {
       }
     : null;
 
-  const invitations = invitationsData.map((inv: any) => ({
+  const invitations = (invitationsData as InvitationWithRelations[]).map((inv: InvitationWithRelations) => ({
     id: inv.id,
     house: {
       id: inv.house.id,