initial commit

2025-08-25 14:38:13 +02:00
parent 02197190e9
commit e0f86a8845
25 changed files with 3336 additions and 128 deletions
--- a/src/app/admin/campaigns/[id]/participants/page.tsx
+++ b/src/app/admin/campaigns/[id]/participants/page.tsx
@@ -0,0 +1,252 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import { Campaign, Participant } from '@/types';
+import { campaignService, participantService } from '@/lib/services';
+import AddParticipantModal from '@/components/AddParticipantModal';
+import EditParticipantModal from '@/components/EditParticipantModal';
+import DeleteParticipantModal from '@/components/DeleteParticipantModal';
+
+// Force dynamic rendering to avoid SSR issues with Supabase
+export const dynamic = 'force-dynamic';
+
+export default function CampaignParticipantsPage() {
+  const params = useParams();
+  const campaignId = params.id as string;
+  
+  const [campaign, setCampaign] = useState<Campaign | null>(null);
+  const [participants, setParticipants] = useState<Participant[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [selectedParticipant, setSelectedParticipant] = useState<Participant | null>(null);
+
+  useEffect(() => {
+    if (campaignId) {
+      loadData();
+    }
+  }, [campaignId]);
+
+  const loadData = async () => {
+    try {
+      setLoading(true);
+      const [campaignData, participantsData] = await Promise.all([
+        campaignService.getAll().then(campaigns => campaigns.find(c => c.id === campaignId)),
+        participantService.getByCampaign(campaignId)
+      ]);
+      
+      setCampaign(campaignData || null);
+      setParticipants(participantsData);
+    } catch (error) {
+      console.error('Erreur lors du chargement des données:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleParticipantAdded = () => {
+    setShowAddModal(false);
+    loadData();
+  };
+
+  const handleParticipantEdited = () => {
+    setShowEditModal(false);
+    setSelectedParticipant(null);
+    loadData();
+  };
+
+  const handleParticipantDeleted = () => {
+    setShowDeleteModal(false);
+    setSelectedParticipant(null);
+    loadData();
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto"></div>
+          <p className="mt-4 text-gray-600">Chargement des participants...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!campaign) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="text-center">
+          <h2 className="text-xl font-semibold text-gray-900">Campagne non trouvée</h2>
+          <p className="mt-2 text-gray-600">La campagne demandée n'existe pas.</p>
+          <Link
+            href="/admin"
+            className="mt-4 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700"
+          >
+            Retour à l'administration
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Header */}
+        <div className="mb-8">
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="flex items-center space-x-4">
+                <Link
+                  href="/admin"
+                  className="inline-flex items-center px-3 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
+                >
+                  <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+                  </svg>
+                  Retour
+                </Link>
+                <div>
+                  <h1 className="text-3xl font-bold text-gray-900">Participants</h1>
+                  <p className="mt-2 text-gray-600">
+                    Campagne : <span className="font-medium">{campaign.title}</span>
+                  </p>
+                </div>
+              </div>
+            </div>
+            <button
+              onClick={() => setShowAddModal(true)}
+              className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700"
+            >
+              <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+              </svg>
+              Ajouter un participant
+            </button>
+          </div>
+        </div>
+
+        {/* Participants */}
+        {participants.length === 0 ? (
+          <div className="text-center py-12">
+            <svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+            </svg>
+            <h3 className="mt-2 text-sm font-medium text-gray-900">Aucun participant</h3>
+            <p className="mt-1 text-sm text-gray-500">Commencez par ajouter votre premier participant.</p>
+            <div className="mt-6">
+              <button
+                onClick={() => setShowAddModal(true)}
+                className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
+              >
+                <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                </svg>
+                Ajouter un participant
+              </button>
+            </div>
+          </div>
+        ) : (
+          <div className="bg-white shadow overflow-hidden sm:rounded-lg">
+            <div className="px-4 py-5 sm:px-6 border-b border-gray-200">
+              <h3 className="text-lg leading-6 font-medium text-gray-900">
+                Participants ({participants.length})
+              </h3>
+              <p className="mt-1 max-w-2xl text-sm text-gray-500">
+                Liste de tous les participants pour cette campagne
+              </p>
+            </div>
+            <ul className="divide-y divide-gray-200">
+              {participants.map((participant) => (
+                <li key={participant.id} className="px-4 py-6 sm:px-6">
+                  <div className="flex items-center justify-between">
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center space-x-3 mb-2">
+                        <div className="flex-shrink-0">
+                          <div className="h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center">
+                            <span className="text-sm font-medium text-indigo-600">
+                              {participant.first_name.charAt(0)}{participant.last_name.charAt(0)}
+                            </span>
+                          </div>
+                        </div>
+                        <div>
+                          <h4 className="text-lg font-medium text-gray-900">
+                            {participant.first_name} {participant.last_name}
+                          </h4>
+                          <p className="text-sm text-gray-600">
+                            {participant.email}
+                          </p>
+                        </div>
+                      </div>
+                      <p className="text-xs text-gray-500">
+                        Inscrit le {new Date(participant.created_at).toLocaleDateString('fr-FR')}
+                      </p>
+                    </div>
+                    <div className="flex items-center space-x-2 ml-6">
+                      <button
+                        onClick={() => {
+                          setSelectedParticipant(participant);
+                          setShowEditModal(true);
+                        }}
+                        className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                      >
+                        <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                        </svg>
+                        Modifier
+                      </button>
+                      <button
+                        onClick={() => {
+                          setSelectedParticipant(participant);
+                          setShowDeleteModal(true);
+                        }}
+                        className="inline-flex items-center px-3 py-2 border border-red-300 shadow-sm text-sm leading-4 font-medium rounded-md text-red-700 bg-white hover:bg-red-50"
+                      >
+                        <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                        </svg>
+                        Supprimer
+                      </button>
+                    </div>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+
+      {/* Modals */}
+      {showAddModal && (
+        <AddParticipantModal
+          isOpen={showAddModal}
+          onClose={() => setShowAddModal(false)}
+          onSuccess={handleParticipantAdded}
+          campaignId={campaignId}
+          campaignTitle={campaign.title}
+        />
+      )}
+
+      {showEditModal && selectedParticipant && (
+        <EditParticipantModal
+          isOpen={showEditModal}
+          onClose={() => setShowEditModal(false)}
+          onSuccess={handleParticipantEdited}
+          participant={selectedParticipant}
+        />
+      )}
+
+      {showDeleteModal && selectedParticipant && (
+        <DeleteParticipantModal
+          isOpen={showDeleteModal}
+          onClose={() => setShowDeleteModal(false)}
+          onSuccess={handleParticipantDeleted}
+          participant={selectedParticipant}
+        />
+      )}
+    </div>
+  );
+}