ajout envoi smtp (paramètres, test envois, envoi à 1 participant). protège vue mot de passe

- ajout filtre page statistiques

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

@@ -8,6 +8,7 @@ import AddParticipantModal from '@/components/AddParticipantModal';
 import EditParticipantModal from '@/components/EditParticipantModal';
 import DeleteParticipantModal from '@/components/DeleteParticipantModal';
 import ImportCSVModal from '@/components/ImportCSVModal';
+import SendParticipantEmailModal from '@/components/SendParticipantEmailModal';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
@@ -29,6 +30,7 @@ function CampaignParticipantsPageContent() {
   const [showEditModal, setShowEditModal] = useState(false);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [showImportModal, setShowImportModal] = useState(false);
+  const [showSendEmailModal, setShowSendEmailModal] = useState(false);
   const [selectedParticipant, setSelectedParticipant] = useState<Participant | null>(null);
   const [copiedParticipantId, setCopiedParticipantId] = useState<string | null>(null);
 
@@ -357,6 +359,18 @@ function CampaignParticipantsPageContent() {
                                   </>
                                 )}
                               </Button>
+                              <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => {
+                                  setSelectedParticipant(participant);
+                                  setShowSendEmailModal(true);
+                                }}
+                                className="text-xs"
+                              >
+                                <Mail className="w-3 h-3 mr-1" />
+                                Envoyer un mail
+                              </Button>
                             </div>
                           </div>
                         </div>
@@ -402,6 +416,15 @@ function CampaignParticipantsPageContent() {
           type="participants"
           campaignTitle={campaign?.title}
         />
+
+        {selectedParticipant && campaign && (
+          <SendParticipantEmailModal
+            isOpen={showSendEmailModal}
+            onClose={() => setShowSendEmailModal(false)}
+            participant={selectedParticipant}
+            campaign={campaign}
+          />
+        )}
       </div>
     </div>
   );

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

@@ -9,6 +9,7 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Progress } from '@/components/ui/progress';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import Navigation from '@/components/Navigation';
 import AuthGuard from '@/components/AuthGuard';
 import { 
@@ -20,7 +21,12 @@ import {
   Award,
   FileText,
   Calendar,
-  ArrowLeft
+  ArrowLeft,
+  SortAsc,
+  TrendingDown,
+  Users2,
+  Target as TargetIcon,
+  Hash
 } from 'lucide-react';
 
 export const dynamic = 'force-dynamic';
@@ -31,8 +37,29 @@ interface PropositionStats {
   averageAmount: number;
   minAmount: number;
   maxAmount: number;
+  totalAmount: number;
+  participationRate: number;
+  voteDistribution: number;
+  consensusScore: number;
 }
 
+type SortOption = 
+  | 'popularity' 
+  | 'total_impact' 
+  | 'consensus' 
+  | 'engagement' 
+  | 'distribution' 
+  | 'alphabetical';
+
+const sortOptions = [
+  { value: 'popularity', label: 'Popularité', icon: TrendingUp, description: 'Moyenne décroissante puis nombre de votants' },
+  { value: 'total_impact', label: 'Impact total', icon: Target, description: 'Somme totale investie décroissante' },
+  { value: 'consensus', label: 'Consensus', icon: Users2, description: 'Plus petit écart-type = plus de consensus' },
+  { value: 'engagement', label: 'Engagement', icon: Users, description: 'Taux de participation décroissant' },
+  { value: 'distribution', label: 'Répartition', icon: BarChart3, description: 'Nombre de votes différents' },
+  { value: 'alphabetical', label: 'Alphabétique', icon: Hash, description: 'Ordre alphabétique par titre' }
+];
+
 function CampaignStatsPageContent() {
   const params = useParams();
   const campaignId = params.id as string;
@@ -43,6 +70,7 @@ function CampaignStatsPageContent() {
   const [votes, setVotes] = useState<Vote[]>([]);
   const [loading, setLoading] = useState(true);
   const [propositionStats, setPropositionStats] = useState<PropositionStats[]>([]);
+  const [sortBy, setSortBy] = useState<SortOption>('popularity');
 
   useEffect(() => {
     if (campaignId) {
@@ -74,13 +102,33 @@ function CampaignStatsPageContent() {
       const stats = propositionsData.map(proposition => {
         const propositionVotes = votesData.filter(vote => vote.proposition_id === proposition.id && vote.amount > 0);
         const amounts = propositionVotes.map(vote => vote.amount);
+        const totalAmount = amounts.reduce((sum, amount) => sum + amount, 0);
+        
+        // Calculer l'écart-type pour le consensus
+        const mean = amounts.length > 0 ? totalAmount / amounts.length : 0;
+        const variance = amounts.length > 0 
+          ? amounts.reduce((sum, amount) => sum + Math.pow(amount - mean, 2), 0) / amounts.length 
+          : 0;
+        const consensusScore = Math.sqrt(variance);
+        
+        // Calculer le taux de participation pour cette proposition
+        const participationRate = participantsData.length > 0 
+          ? (propositionVotes.length / participantsData.length) * 100 
+          : 0;
+        
+        // Calculer la répartition des votes (nombre de montants différents)
+        const uniqueAmounts = new Set(amounts).size;
         
         return {
           proposition,
           voteCount: propositionVotes.length,
-          averageAmount: amounts.length > 0 ? Math.round(amounts.reduce((sum, amount) => sum + amount, 0) / amounts.length) : 0,
+          averageAmount: amounts.length > 0 ? Math.round(totalAmount / amounts.length) : 0,
           minAmount: amounts.length > 0 ? Math.min(...amounts) : 0,
-          maxAmount: amounts.length > 0 ? Math.max(...amounts) : 0
+          maxAmount: amounts.length > 0 ? Math.max(...amounts) : 0,
+          totalAmount,
+          participationRate: Math.round(participationRate * 100) / 100,
+          voteDistribution: uniqueAmounts,
+          consensusScore: Math.round(consensusScore * 100) / 100
         };
       });
       
@@ -92,6 +140,38 @@ function CampaignStatsPageContent() {
     }
   };
 
+  const getSortedStats = () => {
+    const sorted = [...propositionStats];
+    
+    switch (sortBy) {
+      case 'popularity':
+        return sorted.sort((a, b) => {
+          if (b.averageAmount !== a.averageAmount) {
+            return b.averageAmount - a.averageAmount;
+          }
+          return b.voteCount - a.voteCount;
+        });
+      
+      case 'total_impact':
+        return sorted.sort((a, b) => b.totalAmount - a.totalAmount);
+      
+      case 'consensus':
+        return sorted.sort((a, b) => a.consensusScore - b.consensusScore);
+      
+      case 'engagement':
+        return sorted.sort((a, b) => b.participationRate - a.participationRate);
+      
+      case 'distribution':
+        return sorted.sort((a, b) => b.voteDistribution - a.voteDistribution);
+      
+      case 'alphabetical':
+        return sorted.sort((a, b) => a.proposition.title.localeCompare(b.proposition.title));
+      
+      default:
+        return sorted;
+    }
+  };
+
   const getParticipationRate = () => {
     if (participants.length === 0) return 0;
     const votedParticipants = participants.filter(p => {
@@ -101,8 +181,6 @@ function CampaignStatsPageContent() {
     return Math.round((votedParticipants.length / participants.length) * 100);
   };
 
-
-
   const getAverageVotesPerProposition = () => {
     if (propositions.length === 0) return 0;
     const totalVotes = votes.filter(v => v.amount > 0).length;
@@ -230,13 +308,42 @@ function CampaignStatsPageContent() {
         {/* Propositions Stats */}
         <Card>
           <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <VoteIcon className="w-5 h-5" />
-              Préférences par proposition
-            </CardTitle>
-            <CardDescription>
-              Statistiques des montants exprimés par les participants pour chaque proposition
-            </CardDescription>
+            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+              <div>
+                <CardTitle className="flex items-center gap-2">
+                  <VoteIcon className="w-5 h-5" />
+                  Préférences par proposition
+                </CardTitle>
+                <CardDescription>
+                  Statistiques des montants exprimés par les participants pour chaque proposition
+                </CardDescription>
+              </div>
+              
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-medium text-slate-600 dark:text-slate-300">Trier par :</span>
+                <Select value={sortBy} onValueChange={(value: SortOption) => setSortBy(value)}>
+                  <SelectTrigger className="w-48">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {sortOptions.map((option) => {
+                      const IconComponent = option.icon;
+                      return (
+                        <SelectItem key={option.value} value={option.value}>
+                          <div className="flex items-center gap-2">
+                            <IconComponent className="w-4 h-4" />
+                            <div>
+                              <div className="font-medium">{option.label}</div>
+                              <div className="text-xs text-slate-500">{option.description}</div>
+                            </div>
+                          </div>
+                        </SelectItem>
+                      );
+                    })}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
           </CardHeader>
           <CardContent>
             {propositionStats.length === 0 ? (
@@ -251,9 +358,7 @@ function CampaignStatsPageContent() {
               </div>
             ) : (
               <div className="space-y-6">
-                {propositionStats
-                  .sort((a, b) => b.averageAmount - a.averageAmount) // Trier par moyenne décroissante
-                  .map((stat, index) => (
+                {getSortedStats().map((stat, index) => (
                     <div key={stat.proposition.id} className="border rounded-lg p-6 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
                       <div className="flex items-start justify-between mb-4">
                         <div className="flex-1">
@@ -269,15 +374,19 @@ function CampaignStatsPageContent() {
                             {stat.proposition.description}
                           </p>
                         </div>
-                                                 {index === 0 && stat.averageAmount > 0 && (
-                           <Badge className="bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
-                             <Award className="w-3 h-3 mr-1" />
-                             Préférée
-                           </Badge>
-                         )}
+                        {index === 0 && stat.averageAmount > 0 && (
+                          <Badge className="bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
+                            <Award className="w-3 h-3 mr-1" />
+                            {sortBy === 'popularity' ? 'Préférée' : 
+                             sortBy === 'total_impact' ? 'Plus d\'impact' :
+                             sortBy === 'consensus' ? 'Plus de consensus' :
+                             sortBy === 'engagement' ? 'Plus d\'engagement' :
+                             sortBy === 'distribution' ? 'Plus de répartition' : 'Première'}
+                          </Badge>
+                        )}
                       </div>
 
-                      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
                         <div className="text-center">
                           <p className="text-2xl font-bold text-blue-600 dark:text-blue-400">
                             {stat.voteCount}
@@ -292,6 +401,12 @@ function CampaignStatsPageContent() {
                           </p>
                           <p className="text-xs text-slate-500 dark:text-slate-400">Moyenne</p>
                         </div>
+                        <div className="text-center">
+                          <p className="text-2xl font-bold text-purple-600 dark:text-purple-400">
+                            {stat.totalAmount}€
+                          </p>
+                          <p className="text-xs text-slate-500 dark:text-slate-400">Total</p>
+                        </div>
                         <div className="text-center">
                           <p className="text-2xl font-bold text-orange-600 dark:text-orange-400">
                             {stat.minAmount}€
@@ -304,6 +419,34 @@ function CampaignStatsPageContent() {
                           </p>
                           <p className="text-xs text-slate-500 dark:text-slate-400">Maximum</p>
                         </div>
+                        <div className="text-center">
+                          <p className="text-2xl font-bold text-indigo-600 dark:text-indigo-400">
+                            {stat.participationRate}%
+                          </p>
+                          <p className="text-xs text-slate-500 dark:text-slate-400">Participation</p>
+                        </div>
+                      </div>
+
+                      {/* Métriques avancées */}
+                      <div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div className="flex items-center justify-between p-3 bg-slate-50 dark:bg-slate-800 rounded-lg">
+                          <div className="flex items-center gap-2">
+                            <Users2 className="w-4 h-4 text-slate-500" />
+                            <span className="text-sm text-slate-600 dark:text-slate-300">Consensus</span>
+                          </div>
+                          <Badge variant="outline" className="text-xs">
+                            Écart-type: {stat.consensusScore}€
+                          </Badge>
+                        </div>
+                        <div className="flex items-center justify-between p-3 bg-slate-50 dark:bg-slate-800 rounded-lg">
+                          <div className="flex items-center gap-2">
+                            <BarChart3 className="w-4 h-4 text-slate-500" />
+                            <span className="text-sm text-slate-600 dark:text-slate-300">Répartition</span>
+                          </div>
+                          <Badge variant="outline" className="text-xs">
+                            {stat.voteDistribution} montants différents
+                          </Badge>
+                        </div>
                       </div>
 
                       {stat.voteCount > 0 && (

src/app/admin/page.tsx

@@ -13,7 +13,7 @@ import { Input } from '@/components/ui/input';
 import { Progress } from '@/components/ui/progress';
 import Navigation from '@/components/Navigation';
 import AuthGuard from '@/components/AuthGuard';
-import { FolderOpen, Users, FileText, CheckCircle, Clock, Plus, BarChart3 } from 'lucide-react';
+import { FolderOpen, Users, FileText, CheckCircle, Clock, Plus, BarChart3, Settings } from 'lucide-react';
 
 export const dynamic = 'force-dynamic';
 
@@ -123,10 +123,18 @@ function AdminPageContent() {
               <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">Administration</h1>
               <p className="text-slate-600 dark:text-slate-300 mt-2">Gérez vos campagnes de budget participatif</p>
             </div>
-            <Button onClick={() => setShowCreateModal(true)} size="lg">
-              <Plus className="w-4 h-4 mr-2" />
-              Nouvelle campagne
-            </Button>
+            <div className="flex gap-2">
+              <Button asChild variant="outline" size="lg">
+                <Link href="/admin/settings">
+                  <Settings className="w-4 h-4 mr-2" />
+                  Paramètres
+                </Link>
+              </Button>
+              <Button onClick={() => setShowCreateModal(true)} size="lg">
+                <Plus className="w-4 h-4 mr-2" />
+                Nouvelle campagne
+              </Button>
+            </div>
           </div>
         </div>
 

src/app/admin/settings/page.tsx

@@ -0,0 +1,181 @@
+'use client';
+import { useState, useEffect } from 'react';
+import { Setting } from '@/types';
+import { settingsService } from '@/lib/services';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+import Navigation from '@/components/Navigation';
+import AuthGuard from '@/components/AuthGuard';
+import SmtpSettingsForm from '@/components/SmtpSettingsForm';
+import { Settings, Monitor, Save, CheckCircle, Mail } from 'lucide-react';
+
+export const dynamic = 'force-dynamic';
+
+function SettingsPageContent() {
+  const [settings, setSettings] = useState<Setting[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [randomizePropositions, setRandomizePropositions] = useState(false);
+
+  useEffect(() => {
+    loadSettings();
+  }, []);
+
+  const loadSettings = async () => {
+    try {
+      setLoading(true);
+      const settingsData = await settingsService.getAll();
+      setSettings(settingsData);
+      
+      // Charger la valeur du paramètre d'ordre aléatoire
+      const randomizeValue = await settingsService.getBooleanValue('randomize_propositions', false);
+      setRandomizePropositions(randomizeValue);
+    } catch (error) {
+      console.error('Erreur lors du chargement des paramètres:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleRandomizeChange = async (checked: boolean) => {
+    setRandomizePropositions(checked);
+  };
+
+  const handleSave = async () => {
+    try {
+      setSaving(true);
+      await settingsService.setBooleanValue('randomize_propositions', randomizePropositions);
+      setSaved(true);
+      setTimeout(() => setSaved(false), 2000);
+    } catch (error) {
+      console.error('Erreur lors de la sauvegarde des paramètres:', error);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
+        <div className="container mx-auto px-4 py-8">
+          <Navigation />
+          <div className="flex items-center justify-center h-64">
+            <div className="text-center">
+              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-slate-900 dark:border-slate-100 mx-auto mb-4"></div>
+              <p className="text-slate-600 dark:text-slate-300">Chargement des paramètres...</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
+      <div className="container mx-auto px-4 py-8">
+        <Navigation />
+        
+        {/* Header */}
+        <div className="mb-8">
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+            <div>
+              <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">Paramètres</h1>
+              <p className="text-slate-600 dark:text-slate-300 mt-2">Configurez les paramètres de l'application</p>
+            </div>
+            <Button 
+              onClick={handleSave} 
+              disabled={saving}
+              className="flex items-center gap-2"
+            >
+              {saving ? (
+                <>
+                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                  Sauvegarde...
+                </>
+              ) : saved ? (
+                <>
+                  <CheckCircle className="w-4 h-4" />
+                  Sauvegardé
+                </>
+              ) : (
+                <>
+                  <Save className="w-4 h-4" />
+                  Sauvegarder
+                </>
+              )}
+            </Button>
+          </div>
+        </div>
+
+        {/* Settings Categories */}
+        <div className="space-y-8">
+          {/* Affichage Category */}
+          <Card>
+            <CardHeader>
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
+                  <Monitor className="w-5 h-5 text-blue-600 dark:text-blue-300" />
+                </div>
+                <div>
+                  <CardTitle className="text-xl">Affichage</CardTitle>
+                  <CardDescription>
+                    Paramètres d'affichage de l'interface utilisateur
+                  </CardDescription>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              {/* Randomize Propositions Setting */}
+              <div className="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-800 rounded-lg">
+                <div className="flex-1">
+                  <Label htmlFor="randomize-propositions" className="text-base font-medium">
+                    Afficher les propositions dans un ordre aléatoire lors du vote
+                  </Label>
+                  <p className="text-sm text-slate-600 dark:text-slate-300 mt-1">
+                    Lorsque activé, les propositions seront affichées dans un ordre aléatoire pour chaque participant lors du vote.
+                  </p>
+                </div>
+                <Switch
+                  id="randomize-propositions"
+                  checked={randomizePropositions}
+                  onCheckedChange={handleRandomizeChange}
+                  className="ml-4"
+                />
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Email Category */}
+          <SmtpSettingsForm onSave={() => {
+            setSaved(true);
+            setTimeout(() => setSaved(false), 2000);
+          }} />
+
+          {/* Future Categories Placeholder */}
+          <Card className="border-dashed">
+            <CardContent className="p-8 text-center">
+              <Settings className="w-12 h-12 text-slate-400 mx-auto mb-4" />
+              <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">
+                Plus de catégories à venir
+              </h3>
+              <p className="text-slate-600 dark:text-slate-300">
+                D'autres catégories de paramètres seront ajoutées prochainement.
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function SettingsPage() {
+  return (
+    <AuthGuard>
+      <SettingsPageContent />
+    </AuthGuard>
+  );
+}