Develop

admin/app/clubs/page.tsx

@@ -1,8 +1,11 @@
 "use client";
 
-import { Building, Edit, ExternalLink, MapPin, Plus, Trash2, Users } from "lucide-react";
+import { useState } from "react";
+import { Building, Edit, ExternalLink, MapPin, Plus, Settings2, Trash2, Users, Calendar } from "lucide-react";
 import Image from "next/image";
 import ClubModal from "@/components/ClubModal";
+import ClubOwnersModal from "@/components/ClubOwnersModal";
+import { ReservationItemsModal } from "@/components/ReservationItemsModal";
 import { useClubs, useDeleteClub } from "@/lib/hooks";
 import { useAppStore } from "@/lib/stores/appStore";
 import type { Club, ClubWithResponsible } from "@/lib/types";
@@ -12,6 +15,10 @@ export default function ClubsPage() {
   const deleteClubMutation = useDeleteClub();
 
   const { clubModalOpen, editingClub, openClubModal, closeClubModal } = useAppStore();
+  const [ownersModalOpen, setOwnersModalOpen] = useState(false);
+  const [selectedClubId, setSelectedClubId] = useState<number | null>(null);
+  const [selectedClubName, setSelectedClubName] = useState("");
+  const [reservationItemsModalOpen, setReservationItemsModalOpen] = useState(false);
 
   const handleCreateClub = () => {
     openClubModal();
@@ -21,6 +28,18 @@ export default function ClubsPage() {
     openClubModal(club);
   };
 
+  const handleManageOwners = (club: Club) => {
+    setSelectedClubId(club.id_clubs);
+    setSelectedClubName(club.name);
+    setOwnersModalOpen(true);
+  };
+
+  const handleManageReservationItems = (club: Club) => {
+    setSelectedClubId(club.id_clubs);
+    setSelectedClubName(club.name);
+    setReservationItemsModalOpen(true);
+  };
+
   const handleDeleteClub = async (club: Club) => {
     if (!confirm(`Êtes-vous sûr de vouloir supprimer "${club.name}" ?`)) {
       return;
@@ -81,7 +100,7 @@ export default function ClubsPage() {
                   Membres
                 </th>
                 <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  Responsable
+                  Responsable(s)
                 </th>
                 <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                   Actions
@@ -144,14 +163,29 @@ export default function ClubsPage() {
                   <td className="px-6 py-4 whitespace-nowrap">
                     <div className="text-sm text-gray-900">
                       {(club as ClubWithResponsible).responsible
-                        ? `${(club as ClubWithResponsible).responsible?.first_name} ${
-                            (club as ClubWithResponsible).responsible?.last_name
-                          }`
-                        : "-"}
+                        ? `${(club as ClubWithResponsible).responsible?.first_name} ${(club as ClubWithResponsible).responsible?.last_name
+                        }`
+                        : "Aucun"}
                     </div>
                   </td>
                   <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                    <div className="flex space-x-2">
+                    <div className="flex space-x-2 justify-end">
+                      <button
+                        type="button"
+                        onClick={() => handleManageOwners(club)}
+                        className="text-blue-600 hover:text-blue-800"
+                        title="Gérer les responsables"
+                      >
+                        <Settings2 className="h-4 w-4" />
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => handleManageReservationItems(club)}
+                        className="text-green-600 hover:text-green-800"
+                        title="Gérer les messages de réservation"
+                      >
+                        <Calendar className="h-4 w-4" />
+                      </button>
                       <button
                         type="button"
                         onClick={() => handleEditClub(club)}
@@ -187,8 +221,22 @@ export default function ClubsPage() {
         isOpen={clubModalOpen}
         onClose={closeClubModal}
         club={editingClub}
-        onSave={() => {}}
+        onSave={() => { }}
+      />
+      <ClubOwnersModal
+        isOpen={ownersModalOpen}
+        onClose={() => setOwnersModalOpen(false)}
+        clubId={selectedClubId}
+        clubName={selectedClubName}
       />
+      {selectedClubId && (
+        <ReservationItemsModal
+          clubId={selectedClubId}
+          clubName={selectedClubName}
+          isOpen={reservationItemsModalOpen}
+          onClose={() => setReservationItemsModalOpen(false)}
+        />
+      )}
     </div>
   );
 }