initial commit

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

src/app/admin/campaigns/[id]/propositions/page.tsx

@@ -0,0 +1,241 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import { Campaign, Proposition } from '@/types';
+import { campaignService, propositionService } from '@/lib/services';
+import AddPropositionModal from '@/components/AddPropositionModal';
+import EditPropositionModal from '@/components/EditPropositionModal';
+import DeletePropositionModal from '@/components/DeletePropositionModal';
+
+// Force dynamic rendering to avoid SSR issues with Supabase
+export const dynamic = 'force-dynamic';
+
+export default function CampaignPropositionsPage() {
+  const params = useParams();
+  const campaignId = params.id as string;
+  
+  const [campaign, setCampaign] = useState<Campaign | null>(null);
+  const [propositions, setPropositions] = useState<Proposition[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [selectedProposition, setSelectedProposition] = useState<Proposition | null>(null);
+
+  useEffect(() => {
+    if (campaignId) {
+      loadData();
+    }
+  }, [campaignId]);
+
+  const loadData = async () => {
+    try {
+      setLoading(true);
+      const [campaignData, propositionsData] = await Promise.all([
+        campaignService.getAll().then(campaigns => campaigns.find(c => c.id === campaignId)),
+        propositionService.getByCampaign(campaignId)
+      ]);
+      
+      setCampaign(campaignData || null);
+      setPropositions(propositionsData);
+    } catch (error) {
+      console.error('Erreur lors du chargement des données:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handlePropositionAdded = () => {
+    setShowAddModal(false);
+    loadData();
+  };
+
+  const handlePropositionEdited = () => {
+    setShowEditModal(false);
+    setSelectedProposition(null);
+    loadData();
+  };
+
+  const handlePropositionDeleted = () => {
+    setShowDeleteModal(false);
+    setSelectedProposition(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 propositions...</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">Propositions</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 une proposition
+            </button>
+          </div>
+        </div>
+
+        {/* Propositions */}
+        {propositions.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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+            </svg>
+            <h3 className="mt-2 text-sm font-medium text-gray-900">Aucune proposition</h3>
+            <p className="mt-1 text-sm text-gray-500">Commencez par ajouter votre première proposition.</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 une proposition
+              </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">
+                Propositions ({propositions.length})
+              </h3>
+              <p className="mt-1 max-w-2xl text-sm text-gray-500">
+                Liste de toutes les propositions pour cette campagne
+              </p>
+            </div>
+            <ul className="divide-y divide-gray-200">
+              {propositions.map((proposition) => (
+                <li key={proposition.id} className="px-4 py-6 sm:px-6">
+                  <div className="flex items-center justify-between">
+                    <div className="flex-1 min-w-0">
+                      <h4 className="text-lg font-medium text-gray-900 mb-2">
+                        {proposition.title}
+                      </h4>
+                      <p className="text-sm text-gray-600 mb-3">
+                        {proposition.description}
+                      </p>
+                      <p className="text-xs text-gray-500">
+                        Créée le {new Date(proposition.created_at).toLocaleDateString('fr-FR')}
+                      </p>
+                    </div>
+                    <div className="flex items-center space-x-2 ml-6">
+                      <button
+                        onClick={() => {
+                          setSelectedProposition(proposition);
+                          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={() => {
+                          setSelectedProposition(proposition);
+                          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 && (
+        <AddPropositionModal
+          isOpen={showAddModal}
+          onClose={() => setShowAddModal(false)}
+          onSuccess={handlePropositionAdded}
+          campaignId={campaignId}
+          campaignTitle={campaign.title}
+        />
+      )}
+
+      {showEditModal && selectedProposition && (
+        <EditPropositionModal
+          isOpen={showEditModal}
+          onClose={() => setShowEditModal(false)}
+          onSuccess={handlePropositionEdited}
+          proposition={selectedProposition}
+        />
+      )}
+
+      {showDeleteModal && selectedProposition && (
+        <DeletePropositionModal
+          isOpen={showDeleteModal}
+          onClose={() => setShowDeleteModal(false)}
+          onSuccess={handlePropositionDeleted}
+          proposition={selectedProposition}
+        />
+      )}
+    </div>
+  );
+}

src/app/admin/page.tsx

@@ -0,0 +1,301 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { Campaign, CampaignWithStats } from '@/types';
+import { campaignService } from '@/lib/services';
+import CreateCampaignModal from '@/components/CreateCampaignModal';
+import EditCampaignModal from '@/components/EditCampaignModal';
+import DeleteCampaignModal from '@/components/DeleteCampaignModal';
+
+// Force dynamic rendering to avoid SSR issues with Supabase
+export const dynamic = 'force-dynamic';
+
+export default function AdminPage() {
+  const [campaigns, setCampaigns] = useState<CampaignWithStats[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [selectedCampaign, setSelectedCampaign] = useState<Campaign | null>(null);
+
+  useEffect(() => {
+    loadCampaigns();
+  }, []);
+
+  const loadCampaigns = async () => {
+    try {
+      const campaignsData = await campaignService.getAll();
+      
+      // Charger les statistiques pour chaque campagne
+      const campaignsWithStats = await Promise.all(
+        campaignsData.map(async (campaign) => {
+          const stats = await campaignService.getStats(campaign.id);
+          return {
+            ...campaign,
+            stats
+          };
+        })
+      );
+      
+      setCampaigns(campaignsWithStats);
+    } catch (error) {
+      console.error('Erreur lors du chargement des campagnes:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'deposit':
+        return 'bg-blue-100 text-blue-800';
+      case 'voting':
+        return 'bg-green-100 text-green-800';
+      case 'closed':
+        return 'bg-gray-100 text-gray-800';
+      default:
+        return 'bg-gray-100 text-gray-800';
+    }
+  };
+
+  const getStatusText = (status: string) => {
+    switch (status) {
+      case 'deposit':
+        return 'Dépôt de propositions';
+      case 'voting':
+        return 'En cours de vote';
+      case 'closed':
+        return 'Fermé';
+      default:
+        return status;
+    }
+  };
+
+  const handleCampaignCreated = () => {
+    setShowCreateModal(false);
+    loadCampaigns();
+  };
+
+  const handleCampaignEdited = () => {
+    setShowEditModal(false);
+    setSelectedCampaign(null);
+    loadCampaigns();
+  };
+
+  const handleCampaignDeleted = () => {
+    console.log('handleCampaignDeleted appelé');
+    setShowDeleteModal(false);
+    setSelectedCampaign(null);
+    console.log('Rechargement des campagnes...');
+    loadCampaigns();
+  };
+
+  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 campagnes...</p>
+        </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>
+              <h1 className="text-3xl font-bold text-gray-900">Administration</h1>
+              <p className="mt-2 text-gray-600">Gérez vos campagnes de budgets participatifs</p>
+            </div>
+            <div className="flex items-center space-x-4">
+              <Link
+                href="/"
+                className="inline-flex items-center px-4 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>
+              <button
+                onClick={() => setShowCreateModal(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>
+                Nouvelle campagne
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Campagnes */}
+        {campaigns.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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+            </svg>
+            <h3 className="mt-2 text-sm font-medium text-gray-900">Aucune campagne</h3>
+            <p className="mt-1 text-sm text-gray-500">Commencez par créer votre première campagne.</p>
+            <div className="mt-6">
+              <button
+                onClick={() => setShowCreateModal(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>
+                Créer une campagne
+              </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">
+                Campagnes ({campaigns.length})
+              </h3>
+              <p className="mt-1 max-w-2xl text-sm text-gray-500">
+                Liste de toutes vos campagnes de budgets participatifs
+              </p>
+            </div>
+            <ul className="divide-y divide-gray-200">
+              {campaigns.map((campaign) => (
+                <li key={campaign.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 justify-between mb-3">
+                        <div className="flex items-center space-x-3">
+                          <h3 className="text-lg font-medium text-gray-900">{campaign.title}</h3>
+                          <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusColor(campaign.status)}`}>
+                            {getStatusText(campaign.status)}
+                          </span>
+                        </div>
+                      </div>
+                      
+                      <p className="text-sm text-gray-600 mb-4">{campaign.description}</p>
+                      
+                      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-4">
+                        <div className="bg-gray-50 rounded-lg p-3">
+                          <div className="flex items-center">
+                            <svg className="w-5 h-5 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1" />
+                            </svg>
+                            <span className="text-sm font-medium text-gray-900">{campaign.budget_per_user}€</span>
+                          </div>
+                          <p className="text-xs text-gray-500 mt-1">Budget par utilisateur</p>
+                        </div>
+                        
+                        <div className="bg-blue-50 rounded-lg p-3">
+                          <div className="flex items-center">
+                            <svg className="w-5 h-5 text-blue-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                            </svg>
+                            <span className="text-sm font-medium text-blue-900">{campaign.stats.propositions}</span>
+                          </div>
+                          <p className="text-xs text-blue-600 mt-1">Propositions</p>
+                        </div>
+                        
+                        <div className="bg-green-50 rounded-lg p-3">
+                          <div className="flex items-center">
+                            <svg className="w-5 h-5 text-green-400 mr-2" 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>
+                            <span className="text-sm font-medium text-green-900">{campaign.stats.participants}</span>
+                          </div>
+                          <p className="text-xs text-green-600 mt-1">Participants</p>
+                        </div>
+                      </div>
+                      
+                      <div className="text-sm text-gray-500">
+                        <span className="font-medium">Paliers de dépenses:</span> {campaign.spending_tiers}
+                      </div>
+                    </div>
+                    
+                    <div className="flex items-center space-x-2 ml-6">
+                      <button
+                        onClick={() => {
+                          setSelectedCampaign(campaign);
+                          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>
+                      <Link
+                        href={`/admin/campaigns/${campaign.id}/propositions`}
+                        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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                        </svg>
+                        Propositions
+                      </Link>
+                      <Link
+                        href={`/admin/campaigns/${campaign.id}/participants`}
+                        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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                        </svg>
+                        Votants
+                      </Link>
+                      <button
+                        onClick={() => {
+                          setSelectedCampaign(campaign);
+                          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 */}
+      {showCreateModal && (
+        <CreateCampaignModal
+          isOpen={showCreateModal}
+          onClose={() => setShowCreateModal(false)}
+          onSuccess={handleCampaignCreated}
+        />
+      )}
+
+      {showEditModal && selectedCampaign && (
+        <EditCampaignModal
+          isOpen={showEditModal}
+          onClose={() => setShowEditModal(false)}
+          onSuccess={handleCampaignEdited}
+          campaign={selectedCampaign}
+        />
+      )}
+
+      {showDeleteModal && selectedCampaign && (
+        <DeleteCampaignModal
+          isOpen={showDeleteModal}
+          onClose={() => setShowDeleteModal(false)}
+          onSuccess={handleCampaignDeleted}
+          campaign={selectedCampaign}
+        />
+      )}
+    </div>
+  );
+}

src/app/layout.tsx

@@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Mes budgets participatifs",
+  description: "Votez pour les dépenses de votre collectif",
 };
 
 export default function RootLayout({

src/app/page.tsx

@@ -1,103 +1,64 @@
-import Image from "next/image";
+import Link from 'next/link';
 
-export default function Home() {
+export default function HomePage() {
   return (
-    <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
-              src/app/page.tsx
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center">
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+        <div className="bg-white rounded-2xl shadow-xl p-8 md:p-12">
+          <h1 className="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
+            Mes Budgets Participatifs
+          </h1>
+          
+          <p className="text-xl md:text-2xl text-gray-600 mb-8 leading-relaxed">
+            Participez aux décisions budgétaires de vos collectifs
+          </p>
+          
+          <div className="space-y-4">
+            <Link
+              href="/admin"
+              className="inline-flex items-center px-8 py-4 bg-indigo-600 text-white font-semibold rounded-lg hover:bg-indigo-700 transition-colors duration-200 shadow-lg hover:shadow-xl"
+            >
+              <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+              </svg>
+              Accès Admin
+            </Link>
+          </div>
+          
+          <div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6 text-left">
+            <div className="bg-blue-50 p-6 rounded-xl">
+              <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
+                <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                </svg>
+              </div>
+              <h3 className="font-semibold text-gray-900 mb-2">Déposez vos propositions</h3>
+              <p className="text-gray-600">Soumettez vos idées pour améliorer votre collectif</p>
+            </div>
+            
+            <div className="bg-green-50 p-6 rounded-xl">
+              <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
+                <svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              </div>
+              <h3 className="font-semibold text-gray-900 mb-2">Votez collectivement</h3>
+              <p className="text-gray-600">Participez aux décisions avec votre budget alloué</p>
+            </div>
+            
+            <div className="bg-purple-50 p-6 rounded-xl">
+              <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
+                <svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
+                </svg>
+              </div>
+              <h3 className="font-semibold text-gray-900 mb-2">Suivez les résultats</h3>
+              <p className="text-gray-600">Découvrez quelles propositions ont été sélectionnées</p>
+            </div>
+          </div>
         </div>
-      </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
+      </div>
     </div>
   );
 }

src/components/AddParticipantModal.tsx

@@ -0,0 +1,166 @@
+'use client';
+
+import { useState } from 'react';
+import { Dialog } from '@headlessui/react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import { participantService } from '@/lib/services';
+
+interface AddParticipantModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  campaignId: string;
+  campaignTitle: string;
+}
+
+export default function AddParticipantModal({ 
+  isOpen, 
+  onClose, 
+  onSuccess, 
+  campaignId, 
+  campaignTitle 
+}: AddParticipantModalProps) {
+  const [formData, setFormData] = useState({
+    first_name: '',
+    last_name: '',
+    email: ''
+  });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      await participantService.create({
+        campaign_id: campaignId,
+        first_name: formData.first_name,
+        last_name: formData.last_name,
+        email: formData.email
+      });
+      onSuccess();
+      // Reset form
+      setFormData({
+        first_name: '',
+        last_name: '',
+        email: ''
+      });
+    } catch (err) {
+      setError('Erreur lors de l\'ajout du participant');
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  return (
+    <Dialog open={isOpen} onClose={onClose} className="relative z-50">
+      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
+      
+      <div className="fixed inset-0 flex items-center justify-center p-4">
+        <Dialog.Panel className="mx-auto max-w-md w-full bg-white rounded-lg shadow-xl">
+          <div className="flex items-center justify-between p-6 border-b border-gray-200">
+            <Dialog.Title className="text-lg font-medium text-gray-900">
+              Ajouter un participant
+            </Dialog.Title>
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-600"
+            >
+              <XMarkIcon className="h-6 w-6" />
+            </button>
+          </div>
+
+          <div className="px-6 py-4 bg-green-50 border-b border-gray-200">
+            <p className="text-sm text-green-800">
+              <span className="font-medium">Campagne:</span> {campaignTitle}
+            </p>
+          </div>
+
+          <form onSubmit={handleSubmit} className="p-6 space-y-4">
+            {error && (
+              <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md">
+                {error}
+              </div>
+            )}
+
+            <div>
+              <label htmlFor="first_name" className="block text-sm font-medium text-gray-700 mb-1">
+                Prénom *
+              </label>
+              <input
+                type="text"
+                id="first_name"
+                name="first_name"
+                value={formData.first_name}
+                onChange={handleChange}
+                required
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+                placeholder="Prénom du participant"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="last_name" className="block text-sm font-medium text-gray-700 mb-1">
+                Nom *
+              </label>
+              <input
+                type="text"
+                id="last_name"
+                name="last_name"
+                value={formData.last_name}
+                onChange={handleChange}
+                required
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+                placeholder="Nom du participant"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+                Email *
+              </label>
+              <input
+                type="email"
+                id="email"
+                name="email"
+                value={formData.email}
+                onChange={handleChange}
+                required
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+                placeholder="email@exemple.com"
+              />
+            </div>
+
+            <div className="flex items-center justify-end space-x-3 pt-4">
+              <button
+                type="button"
+                onClick={onClose}
+                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
+              >
+                Annuler
+              </button>
+              <button
+                type="submit"
+                disabled={loading}
+                className="px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {loading ? 'Ajout...' : 'Ajouter le participant'}
+              </button>
+            </div>
+          </form>
+        </Dialog.Panel>
+      </div>
+    </Dialog>
+  );
+}

src/components/AddPropositionModal.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import { useState } from 'react';
+import { Dialog } from '@headlessui/react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import { propositionService } from '@/lib/services';
+
+interface AddPropositionModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  campaignId: string;
+  campaignTitle: string;
+}
+
+export default function AddPropositionModal({ 
+  isOpen, 
+  onClose, 
+  onSuccess, 
+  campaignId, 
+  campaignTitle 
+}: AddPropositionModalProps) {
+  const [formData, setFormData] = useState({
+    title: '',
+    description: ''
+  });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      await propositionService.create({
+        campaign_id: campaignId,
+        title: formData.title,
+        description: formData.description
+      });
+      onSuccess();
+      // Reset form
+      setFormData({
+        title: '',
+        description: ''
+      });
+    } catch (err) {
+      setError('Erreur lors de l\'ajout de la proposition');
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  return (
+    <Dialog open={isOpen} onClose={onClose} className="relative z-50">
+      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
+      
+      <div className="fixed inset-0 flex items-center justify-center p-4">
+        <Dialog.Panel className="mx-auto max-w-md w-full bg-white rounded-lg shadow-xl">
+          <div className="flex items-center justify-between p-6 border-b border-gray-200">
+            <Dialog.Title className="text-lg font-medium text-gray-900">
+              Ajouter une proposition
+            </Dialog.Title>
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-600"
+            >
+              <XMarkIcon className="h-6 w-6" />
+            </button>
+          </div>
+
+          <div className="px-6 py-4 bg-blue-50 border-b border-gray-200">
+            <p className="text-sm text-blue-800">
+              <span className="font-medium">Campagne:</span> {campaignTitle}
+            </p>
+          </div>
+
+          <form onSubmit={handleSubmit} className="p-6 space-y-4">
+            {error && (
+              <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md">
+                {error}
+              </div>
+            )}
+
+            <div>
+              <label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
+                Titre de la proposition *
+              </label>
+              <input
+                type="text"
+                id="title"
+                name="title"
+                value={formData.title}
+                onChange={handleChange}
+                required
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+                placeholder="Titre de la proposition"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
+                Description *
+              </label>
+              <textarea
+                id="description"
+                name="description"
+                value={formData.description}
+                onChange={handleChange}
+                required
+                rows={4}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+                placeholder="Décrivez votre proposition en détail..."
+              />
+            </div>
+
+            <div className="flex items-center justify-end space-x-3 pt-4">
+              <button
+                type="button"
+                onClick={onClose}
+                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
+              >
+                Annuler
+              </button>
+              <button
+                type="submit"
+                disabled={loading}
+                className="px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {loading ? 'Ajout...' : 'Ajouter la proposition'}
+              </button>
+            </div>
+          </form>
+        </Dialog.Panel>
+      </div>
+    </Dialog>
+  );
+}

src/components/CreateCampaignModal.tsx

@@ -0,0 +1,189 @@
+'use client';
+
+import { useState } from 'react';
+import { Dialog } from '@headlessui/react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import { campaignService } from '@/lib/services';
+import { CampaignStatus } from '@/types';
+
+interface CreateCampaignModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+export default function CreateCampaignModal({ isOpen, onClose, onSuccess }: CreateCampaignModalProps) {
+  const [formData, setFormData] = useState({
+    title: '',
+    description: '',
+    status: 'deposit' as CampaignStatus,
+    budget_per_user: 100,
+    spending_tiers: '10,25,50,100'
+  });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      await campaignService.create(formData);
+      onSuccess();
+      // Reset form
+      setFormData({
+        title: '',
+        description: '',
+        status: 'deposit',
+        budget_per_user: 100,
+        spending_tiers: '10,25,50,100'
+      });
+    } catch (err) {
+      setError('Erreur lors de la création de la campagne');
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: name === 'budget_per_user' ? parseInt(value) || 0 : value
+    }));
+  };
+
+  return (
+    <Dialog open={isOpen} onClose={onClose} className="relative z-50">
+      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
+      
+      <div className="fixed inset-0 flex items-center justify-center p-4">
+        <Dialog.Panel className="mx-auto max-w-md w-full bg-white rounded-lg shadow-xl">
+          <div className="flex items-center justify-between p-6 border-b border-gray-200">
+            <Dialog.Title className="text-lg font-medium text-gray-900">
+              Créer une nouvelle campagne
+            </Dialog.Title>
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-600"
+            >
+              <XMarkIcon className="h-6 w-6" />
+            </button>
+          </div>
+
+          <form onSubmit={handleSubmit} className="p-6 space-y-4">
+            {error && (
+              <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md">
+                {error}
+              </div>
+            )}
+
+            <div>
+              <label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
+                Titre *
+              </label>
+              <input
+                type="text"
+                id="title"
+                name="title"
+                value={formData.title}
+                onChange={handleChange}
+                required
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+                placeholder="Titre de la campagne"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
+                Description *
+              </label>
+              <textarea
+                id="description"
+                name="description"
+                value={formData.description}
+                onChange={handleChange}
+                required
+                rows={3}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+                placeholder="Description de la campagne"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="status" className="block text-sm font-medium text-gray-700 mb-1">
+                État initial
+              </label>
+              <select
+                id="status"
+                name="status"
+                value={formData.status}
+                onChange={handleChange}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+              >
+                <option value="deposit">Dépôt de propositions</option>
+                <option value="voting">En cours de vote</option>
+                <option value="closed">Fermé</option>
+              </select>
+            </div>
+
+            <div>
+              <label htmlFor="budget_per_user" className="block text-sm font-medium text-gray-700 mb-1">
+                Budget par utilisateur (€) *
+              </label>
+              <input
+                type="number"
+                id="budget_per_user"
+                name="budget_per_user"
+                value={formData.budget_per_user}
+                onChange={handleChange}
+                required
+                min="1"
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+                placeholder="100"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="spending_tiers" className="block text-sm font-medium text-gray-700 mb-1">
+                Paliers de dépenses (€) *
+              </label>
+              <input
+                type="text"
+                id="spending_tiers"
+                name="spending_tiers"
+                value={formData.spending_tiers}
+                onChange={handleChange}
+                required
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+                placeholder="10,25,50,100"
+              />
+              <p className="mt-1 text-sm text-gray-500">
+                Montants séparés par des virgules (ex: 10,25,50,100)
+              </p>
+            </div>
+
+            <div className="flex items-center justify-end space-x-3 pt-4">
+              <button
+                type="button"
+                onClick={onClose}
+                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
+              >
+                Annuler
+              </button>
+              <button
+                type="submit"
+                disabled={loading}
+                className="px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {loading ? 'Création...' : 'Créer la campagne'}
+              </button>
+            </div>
+          </form>
+        </Dialog.Panel>
+      </div>
+    </Dialog>
+  );
+}

src/components/DeleteCampaignModal.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import { useState } from 'react';
+import { Dialog } from '@headlessui/react';
+import { XMarkIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+import { campaignService } from '@/lib/services';
+import { Campaign } from '@/types';
+
+interface DeleteCampaignModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  campaign: Campaign;
+}
+
+export default function DeleteCampaignModal({ 
+  isOpen, 
+  onClose, 
+  onSuccess, 
+  campaign 
+}: DeleteCampaignModalProps) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleDelete = async () => {
+    console.log('Début de la suppression de la campagne:', campaign.id);
+    setLoading(true);
+    setError('');
+
+    try {
+      await campaignService.delete(campaign.id);
+      console.log('Suppression réussie, appel de onSuccess');
+      onSuccess();
+    } catch (err: any) {
+      console.error('Erreur dans le modal de suppression:', err);
+      const errorMessage = err?.message || err?.details || 'Erreur lors de la suppression de la campagne';
+      setError(`Erreur lors de la suppression de la campagne: ${errorMessage}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onClose={onClose} className="relative z-50">
+      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
+      
+      <div className="fixed inset-0 flex items-center justify-center p-4">
+        <Dialog.Panel className="mx-auto max-w-md w-full bg-white rounded-lg shadow-xl">
+          <div className="flex items-center justify-between p-6 border-b border-gray-200">
+            <Dialog.Title className="text-lg font-medium text-gray-900">
+              Supprimer la campagne
+            </Dialog.Title>
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-600"
+            >
+              <XMarkIcon className="h-6 w-6" />
+            </button>
+          </div>
+
+          <div className="p-6">
+            {error && (
+              <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md mb-4">
+                {error}
+              </div>
+            )}
+
+            <div className="flex items-start space-x-3">
+              <div className="flex-shrink-0">
+                <ExclamationTriangleIcon className="h-6 w-6 text-red-600" />
+              </div>
+              <div className="flex-1">
+                <h3 className="text-sm font-medium text-gray-900 mb-2">
+                  Êtes-vous sûr de vouloir supprimer cette campagne ?
+                </h3>
+                <div className="text-sm text-gray-500 space-y-2">
+                  <p>
+                    <strong>Campagne :</strong> {campaign.title}
+                  </p>
+                  <p>
+                    Cette action supprimera définitivement :
+                  </p>
+                  <ul className="list-disc list-inside ml-2 space-y-1">
+                    <li>La campagne et tous ses paramètres</li>
+                    <li>Toutes les propositions associées</li>
+                    <li>Tous les participants inscrits</li>
+                  </ul>
+                  <p className="text-red-600 font-medium mt-3">
+                    Cette action est irréversible !
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex items-center justify-end space-x-3 pt-6">
+              <button
+                type="button"
+                onClick={onClose}
+                disabled={loading}
+                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50"
+              >
+                Annuler
+              </button>
+              <button
+                type="button"
+                onClick={handleDelete}
+                disabled={loading}
+                className="px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-md hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {loading ? 'Suppression...' : 'Supprimer définitivement'}
+              </button>
+            </div>
+          </div>
+        </Dialog.Panel>
+      </div>
+    </Dialog>
+  );
+}

src/components/DeleteParticipantModal.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import { useState } from 'react';
+import { Dialog } from '@headlessui/react';
+import { XMarkIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+import { participantService } from '@/lib/services';
+import { Participant } from '@/types';
+
+interface DeleteParticipantModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  participant: Participant;
+}
+
+export default function DeleteParticipantModal({ 
+  isOpen, 
+  onClose, 
+  onSuccess, 
+  participant 
+}: DeleteParticipantModalProps) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleDelete = async () => {
+    setLoading(true);
+    setError('');
+
+    try {
+      await participantService.delete(participant.id);
+      onSuccess();
+    } catch (err: any) {
+      const errorMessage = err?.message || err?.details || 'Erreur lors de la suppression du participant';
+      setError(`Erreur lors de la suppression du participant: ${errorMessage}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onClose={onClose} className="relative z-50">
+      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
+      
+      <div className="fixed inset-0 flex items-center justify-center p-4">
+        <Dialog.Panel className="mx-auto max-w-md w-full bg-white rounded-lg shadow-xl">
+          <div className="flex items-center justify-between p-6 border-b border-gray-200">
+            <Dialog.Title className="text-lg font-medium text-gray-900">
+              Supprimer le participant
+            </Dialog.Title>
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-600"
+            >
+              <XMarkIcon className="h-6 w-6" />
+            </button>
+          </div>
+
+          <div className="p-6">
+            {error && (
+              <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md mb-4">
+                {error}
+              </div>
+            )}
+
+            <div className="flex items-start space-x-3">
+              <div className="flex-shrink-0">
+                <ExclamationTriangleIcon className="h-6 w-6 text-red-600" />
+              </div>
+              <div className="flex-1">
+                <h3 className="text-sm font-medium text-gray-900 mb-2">
+                  Êtes-vous sûr de vouloir supprimer ce participant ?
+                </h3>
+                <div className="text-sm text-gray-500 space-y-2">
+                  <p>
+                    <strong>Participant :</strong> {participant.first_name} {participant.last_name}
+                  </p>
+                  <p>
+                    <strong>Email :</strong> {participant.email}
+                  </p>
+                  <p>
+                    Cette action supprimera définitivement le participant et toutes les données associées.
+                  </p>
+                  <p className="text-red-600 font-medium mt-3">
+                    Cette action est irréversible !
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex items-center justify-end space-x-3 pt-6">
+              <button
+                type="button"
+                onClick={onClose}
+                disabled={loading}
+                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50"
+              >
+                Annuler
+              </button>
+              <button
+                type="button"
+                onClick={handleDelete}
+                disabled={loading}
+                className="px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-md hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {loading ? 'Suppression...' : 'Supprimer définitivement'}
+              </button>
+            </div>
+          </div>
+        </Dialog.Panel>
+      </div>
+    </Dialog>
+  );
+}

src/components/DeletePropositionModal.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { useState } from 'react';
+import { Dialog } from '@headlessui/react';
+import { XMarkIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+import { propositionService } from '@/lib/services';
+import { Proposition } from '@/types';
+
+interface DeletePropositionModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  proposition: Proposition;
+}
+
+export default function DeletePropositionModal({ 
+  isOpen, 
+  onClose, 
+  onSuccess, 
+  proposition 
+}: DeletePropositionModalProps) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleDelete = async () => {
+    setLoading(true);
+    setError('');
+
+    try {
+      await propositionService.delete(proposition.id);
+      onSuccess();
+    } catch (err: any) {
+      const errorMessage = err?.message || err?.details || 'Erreur lors de la suppression de la proposition';
+      setError(`Erreur lors de la suppression de la proposition: ${errorMessage}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onClose={onClose} className="relative z-50">
+      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
+      
+      <div className="fixed inset-0 flex items-center justify-center p-4">
+        <Dialog.Panel className="mx-auto max-w-md w-full bg-white rounded-lg shadow-xl">
+          <div className="flex items-center justify-between p-6 border-b border-gray-200">
+            <Dialog.Title className="text-lg font-medium text-gray-900">
+              Supprimer la proposition
+            </Dialog.Title>
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-600"
+            >
+              <XMarkIcon className="h-6 w-6" />
+            </button>
+          </div>
+
+          <div className="p-6">
+            {error && (
+              <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md mb-4">
+                {error}
+              </div>
+            )}
+
+            <div className="flex items-start space-x-3">
+              <div className="flex-shrink-0">
+                <ExclamationTriangleIcon className="h-6 w-6 text-red-600" />
+              </div>
+              <div className="flex-1">
+                <h3 className="text-sm font-medium text-gray-900 mb-2">
+                  Êtes-vous sûr de vouloir supprimer cette proposition ?
+                </h3>
+                <div className="text-sm text-gray-500 space-y-2">
+                  <p>
+                    <strong>Proposition :</strong> {proposition.title}
+                  </p>
+                  <p>
+                    Cette action supprimera définitivement la proposition et toutes les données associées.
+                  </p>
+                  <p className="text-red-600 font-medium mt-3">
+                    Cette action est irréversible !
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex items-center justify-end space-x-3 pt-6">
+              <button
+                type="button"
+                onClick={onClose}
+                disabled={loading}
+                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50"
+              >
+                Annuler
+              </button>
+              <button
+                type="button"
+                onClick={handleDelete}
+                disabled={loading}
+                className="px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-md hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {loading ? 'Suppression...' : 'Supprimer définitivement'}
+              </button>
+            </div>
+          </div>
+        </Dialog.Panel>
+      </div>
+    </Dialog>
+  );
+}

src/components/EditCampaignModal.tsx

@@ -0,0 +1,200 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Dialog } from '@headlessui/react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import { campaignService } from '@/lib/services';
+import { Campaign, CampaignStatus } from '@/types';
+
+interface EditCampaignModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  campaign: Campaign;
+}
+
+export default function EditCampaignModal({ 
+  isOpen, 
+  onClose, 
+  onSuccess, 
+  campaign 
+}: EditCampaignModalProps) {
+  const [formData, setFormData] = useState({
+    title: '',
+    description: '',
+    status: 'deposit' as CampaignStatus,
+    budget_per_user: 100,
+    spending_tiers: ''
+  });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  // Initialiser le formulaire avec les données de la campagne
+  useEffect(() => {
+    if (campaign) {
+      setFormData({
+        title: campaign.title,
+        description: campaign.description,
+        status: campaign.status,
+        budget_per_user: campaign.budget_per_user,
+        spending_tiers: campaign.spending_tiers
+      });
+    }
+  }, [campaign]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      await campaignService.update(campaign.id, formData);
+      onSuccess();
+    } catch (err) {
+      setError('Erreur lors de la modification de la campagne');
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: name === 'budget_per_user' ? parseInt(value) || 0 : value
+    }));
+  };
+
+  return (
+    <Dialog open={isOpen} onClose={onClose} className="relative z-50">
+      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
+      
+      <div className="fixed inset-0 flex items-center justify-center p-4">
+        <Dialog.Panel className="mx-auto max-w-md w-full bg-white rounded-lg shadow-xl">
+          <div className="flex items-center justify-between p-6 border-b border-gray-200">
+            <Dialog.Title className="text-lg font-medium text-gray-900">
+              Modifier la campagne
+            </Dialog.Title>
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-600"
+            >
+              <XMarkIcon className="h-6 w-6" />
+            </button>
+          </div>
+
+          <form onSubmit={handleSubmit} className="p-6 space-y-4">
+            {error && (
+              <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md">
+                {error}
+              </div>
+            )}
+
+            <div>
+              <label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
+                Titre *
+              </label>
+              <input
+                type="text"
+                id="title"
+                name="title"
+                value={formData.title}
+                onChange={handleChange}
+                required
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+                placeholder="Titre de la campagne"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
+                Description *
+              </label>
+              <textarea
+                id="description"
+                name="description"
+                value={formData.description}
+                onChange={handleChange}
+                required
+                rows={3}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+                placeholder="Description de la campagne"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="status" className="block text-sm font-medium text-gray-700 mb-1">
+                État
+              </label>
+              <select
+                id="status"
+                name="status"
+                value={formData.status}
+                onChange={handleChange}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+              >
+                <option value="deposit">Dépôt de propositions</option>
+                <option value="voting">En cours de vote</option>
+                <option value="closed">Fermé</option>
+              </select>
+            </div>
+
+            <div>
+              <label htmlFor="budget_per_user" className="block text-sm font-medium text-gray-700 mb-1">
+                Budget par utilisateur (€) *
+              </label>
+              <input
+                type="number"
+                id="budget_per_user"
+                name="budget_per_user"
+                value={formData.budget_per_user}
+                onChange={handleChange}
+                required
+                min="1"
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+                placeholder="100"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="spending_tiers" className="block text-sm font-medium text-gray-700 mb-1">
+                Paliers de dépenses (€) *
+              </label>
+              <input
+                type="text"
+                id="spending_tiers"
+                name="spending_tiers"
+                value={formData.spending_tiers}
+                onChange={handleChange}
+                required
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+                placeholder="10,25,50,100"
+              />
+              <p className="mt-1 text-sm text-gray-500">
+                Montants séparés par des virgules (ex: 10,25,50,100)
+              </p>
+            </div>
+
+            <div className="flex items-center justify-end space-x-3 pt-4">
+              <button
+                type="button"
+                onClick={onClose}
+                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
+              >
+                Annuler
+              </button>
+              <button
+                type="submit"
+                disabled={loading}
+                className="px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {loading ? 'Modification...' : 'Modifier la campagne'}
+              </button>
+            </div>
+          </form>
+        </Dialog.Panel>
+      </div>
+    </Dialog>
+  );
+}

src/components/EditParticipantModal.tsx

@@ -0,0 +1,159 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Dialog } from '@headlessui/react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import { participantService } from '@/lib/services';
+import { Participant } from '@/types';
+
+interface EditParticipantModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  participant: Participant;
+}
+
+export default function EditParticipantModal({ 
+  isOpen, 
+  onClose, 
+  onSuccess, 
+  participant 
+}: EditParticipantModalProps) {
+  const [formData, setFormData] = useState({
+    first_name: '',
+    last_name: '',
+    email: ''
+  });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  // Initialiser le formulaire avec les données du participant
+  useEffect(() => {
+    if (participant) {
+      setFormData({
+        first_name: participant.first_name,
+        last_name: participant.last_name,
+        email: participant.email
+      });
+    }
+  }, [participant]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      await participantService.update(participant.id, formData);
+      onSuccess();
+    } catch (err: any) {
+      const errorMessage = err?.message || err?.details || 'Erreur lors de la modification du participant';
+      setError(`Erreur lors de la modification du participant: ${errorMessage}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  return (
+    <Dialog open={isOpen} onClose={onClose} className="relative z-50">
+      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
+      
+      <div className="fixed inset-0 flex items-center justify-center p-4">
+        <Dialog.Panel className="mx-auto max-w-md w-full bg-white rounded-lg shadow-xl">
+          <div className="flex items-center justify-between p-6 border-b border-gray-200">
+            <Dialog.Title className="text-lg font-medium text-gray-900">
+              Modifier le participant
+            </Dialog.Title>
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-600"
+            >
+              <XMarkIcon className="h-6 w-6" />
+            </button>
+          </div>
+
+          <form onSubmit={handleSubmit} className="p-6 space-y-4">
+            {error && (
+              <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md">
+                {error}
+              </div>
+            )}
+
+            <div>
+              <label htmlFor="first_name" className="block text-sm font-medium text-gray-700 mb-1">
+                Prénom *
+              </label>
+              <input
+                type="text"
+                id="first_name"
+                name="first_name"
+                value={formData.first_name}
+                onChange={handleChange}
+                required
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+                placeholder="Prénom du participant"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="last_name" className="block text-sm font-medium text-gray-700 mb-1">
+                Nom *
+              </label>
+              <input
+                type="text"
+                id="last_name"
+                name="last_name"
+                value={formData.last_name}
+                onChange={handleChange}
+                required
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+                placeholder="Nom du participant"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+                Email *
+              </label>
+              <input
+                type="email"
+                id="email"
+                name="email"
+                value={formData.email}
+                onChange={handleChange}
+                required
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+                placeholder="email@exemple.com"
+              />
+            </div>
+
+            <div className="flex items-center justify-end space-x-3 pt-4">
+              <button
+                type="button"
+                onClick={onClose}
+                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
+              >
+                Annuler
+              </button>
+              <button
+                type="submit"
+                disabled={loading}
+                className="px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {loading ? 'Modification...' : 'Modifier le participant'}
+              </button>
+            </div>
+          </form>
+        </Dialog.Panel>
+      </div>
+    </Dialog>
+  );
+}

src/components/EditPropositionModal.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Dialog } from '@headlessui/react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import { propositionService } from '@/lib/services';
+import { Proposition } from '@/types';
+
+interface EditPropositionModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  proposition: Proposition;
+}
+
+export default function EditPropositionModal({ 
+  isOpen, 
+  onClose, 
+  onSuccess, 
+  proposition 
+}: EditPropositionModalProps) {
+  const [formData, setFormData] = useState({
+    title: '',
+    description: ''
+  });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  // Initialiser le formulaire avec les données de la proposition
+  useEffect(() => {
+    if (proposition) {
+      setFormData({
+        title: proposition.title,
+        description: proposition.description
+      });
+    }
+  }, [proposition]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      await propositionService.update(proposition.id, formData);
+      onSuccess();
+    } catch (err: any) {
+      const errorMessage = err?.message || err?.details || 'Erreur lors de la modification de la proposition';
+      setError(`Erreur lors de la modification de la proposition: ${errorMessage}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  return (
+    <Dialog open={isOpen} onClose={onClose} className="relative z-50">
+      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
+      
+      <div className="fixed inset-0 flex items-center justify-center p-4">
+        <Dialog.Panel className="mx-auto max-w-md w-full bg-white rounded-lg shadow-xl">
+          <div className="flex items-center justify-between p-6 border-b border-gray-200">
+            <Dialog.Title className="text-lg font-medium text-gray-900">
+              Modifier la proposition
+            </Dialog.Title>
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-600"
+            >
+              <XMarkIcon className="h-6 w-6" />
+            </button>
+          </div>
+
+          <form onSubmit={handleSubmit} className="p-6 space-y-4">
+            {error && (
+              <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md">
+                {error}
+              </div>
+            )}
+
+            <div>
+              <label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
+                Titre de la proposition *
+              </label>
+              <input
+                type="text"
+                id="title"
+                name="title"
+                value={formData.title}
+                onChange={handleChange}
+                required
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+                placeholder="Titre de la proposition"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
+                Description *
+              </label>
+              <textarea
+                id="description"
+                name="description"
+                value={formData.description}
+                onChange={handleChange}
+                required
+                rows={4}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+                placeholder="Décrivez votre proposition en détail..."
+              />
+            </div>
+
+            <div className="flex items-center justify-end space-x-3 pt-4">
+              <button
+                type="button"
+                onClick={onClose}
+                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
+              >
+                Annuler
+              </button>
+              <button
+                type="submit"
+                disabled={loading}
+                className="px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {loading ? 'Modification...' : 'Modifier la proposition'}
+              </button>
+            </div>
+          </form>
+        </Dialog.Panel>
+      </div>
+    </Dialog>
+  );
+}

src/lib/services.ts

@@ -0,0 +1,175 @@
+import { supabase } from './supabase';
+import { Campaign, Proposition, Participant } from '@/types';
+
+// Services pour les campagnes
+export const campaignService = {
+  async getAll(): Promise<Campaign[]> {
+    const { data, error } = await supabase
+      .from('campaigns')
+      .select('*')
+      .order('created_at', { ascending: false });
+    
+    if (error) throw error;
+    return data || [];
+  },
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  async create(campaign: any): Promise<Campaign> {
+    const { data, error } = await supabase
+      .from('campaigns')
+      .insert(campaign)
+      .select()
+      .single();
+    
+    if (error) throw error;
+    return data;
+  },
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  async update(id: string, updates: any): Promise<Campaign> {
+    const { data, error } = await supabase
+      .from('campaigns')
+      .update(updates)
+      .eq('id', id)
+      .select()
+      .single();
+    
+    if (error) throw error;
+    return data;
+  },
+
+  async delete(id: string): Promise<void> {
+    console.log('Tentative de suppression de la campagne:', id);
+    
+    // La suppression en cascade est gérée par la base de données
+    // grâce à ON DELETE CASCADE dans les contraintes de clés étrangères
+    const { error } = await supabase
+      .from('campaigns')
+      .delete()
+      .eq('id', id);
+    
+    if (error) {
+      console.error('Erreur lors de la suppression:', error);
+      throw error;
+    }
+    
+    console.log('Campagne supprimée avec succès');
+  },
+
+  async getStats(campaignId: string): Promise<{ propositions: number; participants: number }> {
+    const [propositionsResult, participantsResult] = await Promise.all([
+      supabase
+        .from('propositions')
+        .select('id', { count: 'exact', head: true })
+        .eq('campaign_id', campaignId),
+      supabase
+        .from('participants')
+        .select('id', { count: 'exact', head: true })
+        .eq('campaign_id', campaignId)
+    ]);
+
+    if (propositionsResult.error) throw propositionsResult.error;
+    if (participantsResult.error) throw participantsResult.error;
+
+    return {
+      propositions: propositionsResult.count || 0,
+      participants: participantsResult.count || 0
+    };
+  }
+};
+
+// Services pour les propositions
+export const propositionService = {
+  async getByCampaign(campaignId: string): Promise<Proposition[]> {
+    const { data, error } = await supabase
+      .from('propositions')
+      .select('*')
+      .eq('campaign_id', campaignId)
+      .order('created_at', { ascending: false });
+    
+    if (error) throw error;
+    return data || [];
+  },
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  async create(proposition: any): Promise<Proposition> {
+    const { data, error } = await supabase
+      .from('propositions')
+      .insert(proposition)
+      .select()
+      .single();
+    
+    if (error) throw error;
+    return data;
+  },
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  async update(id: string, updates: any): Promise<Proposition> {
+    const { data, error } = await supabase
+      .from('propositions')
+      .update(updates)
+      .eq('id', id)
+      .select()
+      .single();
+    
+    if (error) throw error;
+    return data;
+  },
+
+  async delete(id: string): Promise<void> {
+    const { error } = await supabase
+      .from('propositions')
+      .delete()
+      .eq('id', id);
+    
+    if (error) throw error;
+  }
+};
+
+// Services pour les participants
+export const participantService = {
+  async getByCampaign(campaignId: string): Promise<Participant[]> {
+    const { data, error } = await supabase
+      .from('participants')
+      .select('*')
+      .eq('campaign_id', campaignId)
+      .order('created_at', { ascending: false });
+    
+    if (error) throw error;
+    return data || [];
+  },
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  async create(participant: any): Promise<Participant> {
+    const { data, error } = await supabase
+      .from('participants')
+      .insert(participant)
+      .select()
+      .single();
+    
+    if (error) throw error;
+    return data;
+  },
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  async update(id: string, updates: any): Promise<Participant> {
+    const { data, error } = await supabase
+      .from('participants')
+      .update(updates)
+      .eq('id', id)
+      .select()
+      .single();
+    
+    if (error) throw error;
+    return data;
+  },
+
+  async delete(id: string): Promise<void> {
+    const { error } = await supabase
+      .from('participants')
+      .delete()
+      .eq('id', id);
+    
+    if (error) throw error;
+  }
+};

src/lib/supabase.ts

@@ -0,0 +1,6 @@
+import { createClient } from '@supabase/supabase-js';
+
+const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || 'https://placeholder.supabase.co';
+const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || 'placeholder-key';
+
+export const supabase = createClient(supabaseUrl, supabaseAnonKey);

src/types/index.ts

@@ -0,0 +1,58 @@
+export type CampaignStatus = 'deposit' | 'voting' | 'closed';
+
+export interface Campaign {
+  id: string;
+  title: string;
+  description: string;
+  status: CampaignStatus;
+  budget_per_user: number;
+  spending_tiers: string; // Montants séparés par des virgules
+  created_at: string;
+  updated_at: string;
+}
+
+export interface CampaignWithStats extends Campaign {
+  stats: {
+    propositions: number;
+    participants: number;
+  };
+}
+
+export interface Proposition {
+  id: string;
+  campaign_id: string;
+  title: string;
+  description: string;
+  created_at: string;
+}
+
+export interface Participant {
+  id: string;
+  campaign_id: string;
+  first_name: string;
+  last_name: string;
+  email: string;
+  created_at: string;
+}
+
+export interface Database {
+  public: {
+    Tables: {
+      campaigns: {
+        Row: Campaign;
+        Insert: Omit<Campaign, 'id' | 'created_at' | 'updated_at'>;
+        Update: Partial<Omit<Campaign, 'id' | 'created_at' | 'updated_at'>>;
+      };
+      propositions: {
+        Row: Proposition;
+        Insert: Omit<Proposition, 'id' | 'created_at'>;
+        Update: Partial<Omit<Proposition, 'id' | 'created_at'>>;
+      };
+      participants: {
+        Row: Participant;
+        Insert: Omit<Participant, 'id' | 'created_at'>;
+        Update: Partial<Omit<Participant, 'id' | 'created_at'>>;
+      };
+    };
+  };
+}