ajout de la possibilité de partager publiquement la page statistiques d'une campagne

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

@@ -6,61 +6,23 @@ import Link from 'next/link';
 import { Campaign, Proposition, Participant, Vote } from '@/types';
 import { campaignService, propositionService, participantService, voteService } from '@/lib/services';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Card, CardContent } 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 { 
   BarChart3, 
-  Users, 
-  Vote as VoteIcon, 
-  TrendingUp, 
-  Target, 
-  Award,
-  FileText,
-  Calendar,
-  ArrowLeft,
-  SortAsc,
-  TrendingDown,
-  Users2,
-  Target as TargetIcon,
-  Hash
+  ArrowLeft
 } from 'lucide-react';
 import { ExportStatsButton } from '@/components/ExportStatsButton';
+import { SharePublicStatsButton } from '@/components/SharePublicStatsButton';
+import { StatsDisplay } from '@/components/StatsDisplay';
+import { useStatsCalculation } from '@/hooks/useStatsCalculation';
+import Footer from '@/components/Footer';
+import VersionDisplay from '@/components/VersionDisplay';
 
 export const dynamic = 'force-dynamic';
 
-interface PropositionStats {
-  proposition: Proposition;
-  voteCount: number;
-  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: 'total_impact', label: 'Impact total', icon: Target, description: 'Somme totale investie' },
-  { value: 'popularity', label: 'Popularité', icon: TrendingUp, description: 'Moyenne puis nombre de votants' },
-  { value: 'consensus', label: 'Consensus', icon: Users2, description: 'Plus petit écart-type' },
-  { value: 'engagement', label: 'Engagement', icon: Users, description: 'Taux de participation' },
-  { value: 'distribution', label: 'Répartition', icon: BarChart3, description: 'Nombre de votes différents' },
-  { value: 'alphabetical', label: 'Alphabétique', icon: Hash, description: 'Ordre alphabétique' }
-];
-
 function CampaignStatsPageContent() {
   const params = useParams();
   const campaignId = params.id as string;
@@ -70,8 +32,8 @@ function CampaignStatsPageContent() {
   const [propositions, setPropositions] = useState<Proposition[]>([]);
   const [votes, setVotes] = useState<Vote[]>([]);
   const [loading, setLoading] = useState(true);
-  const [propositionStats, setPropositionStats] = useState<PropositionStats[]>([]);
-  const [sortBy, setSortBy] = useState<SortOption>('total_impact');
+
+  const { propositionStats } = useStatsCalculation(campaign, participants, propositions, votes);
 
   useEffect(() => {
     // Vérifier la configuration Supabase
@@ -110,42 +72,6 @@ function CampaignStatsPageContent() {
       setParticipants(participantsData);
       setPropositions(propositionsData);
       setVotes(votesData);
-      
-      // Calculer les statistiques des propositions
-      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(totalAmount / amounts.length) : 0,
-          minAmount: amounts.length > 0 ? Math.min(...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
-        };
-      });
-      
-      setPropositionStats(stats);
     } catch (error) {
       console.error('Erreur lors du chargement des données:', error);
     } finally {
@@ -153,52 +79,6 @@ 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 => {
-      const participantVotes = votes.filter(v => v.participant_id === p.id);
-      return participantVotes.some(v => v.amount > 0);
-    });
-    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;
-    return Math.round(totalVotes / propositions.length);
-  };
 
   if (loading) {
     return (
@@ -242,9 +122,6 @@ function CampaignStatsPageContent() {
     );
   }
 
-  const participationRate = getParticipationRate();
-  const averageVotesPerProposition = getAverageVotesPerProposition();
-
   return (
     <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
       <div className="container mx-auto px-4 py-8">
@@ -279,6 +156,10 @@ function CampaignStatsPageContent() {
             </div>
             
             <div className="flex gap-2">
+              <SharePublicStatsButton
+                campaignId={campaignId}
+                disabled={loading}
+              />
               <ExportStatsButton
                 campaignTitle={campaign.title}
                 propositions={propositions}
@@ -292,203 +173,22 @@ function CampaignStatsPageContent() {
           </div>
         </div>
 
-        {/* Overview Stats */}
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
-          <Card>
-            <CardContent className="p-6">
-              <div className="flex items-center justify-between">
-                <div>
-                  <p className="text-sm font-medium text-slate-600 dark:text-slate-300">Taux de participation</p>
-                  <p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{participationRate}%</p>
-                </div>
-                <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
-                  <Users className="w-6 h-6 text-blue-600 dark:text-blue-300" />
-                </div>
-              </div>
-              <Progress value={participationRate} className="mt-4" />
-              <p className="text-xs text-slate-500 dark:text-slate-400 mt-2">
-                {participants.filter(p => votes.some(v => v.participant_id === p.id && v.amount > 0)).length} / {participants.length} participants
-              </p>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardContent className="p-6">
-              <div className="flex items-center justify-between">
-                <div>
-                  <p className="text-sm font-medium text-slate-600 dark:text-slate-300">Propositions</p>
-                  <p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{propositions.length}</p>
-                </div>
-                <div className="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center">
-                  <FileText className="w-6 h-6 text-purple-600 dark:text-purple-300" />
-                </div>
-              </div>
-              <p className="text-xs text-slate-500 dark:text-slate-400 mt-2">
-                {averageVotesPerProposition} votes moy. par proposition
-              </p>
-            </CardContent>
-          </Card>
-        </div>
-
-        {/* Propositions Stats */}
-        <Card>
-          <CardHeader>
-            <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-56">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent className="w-80">
-                    {sortOptions.map((option) => {
-                      const IconComponent = option.icon;
-                      return (
-                        <SelectItem key={option.value} value={option.value} className="py-3">
-                          <div className="flex items-center gap-3 w-full">
-                            <IconComponent className="w-4 h-4 flex-shrink-0" />
-                            <div className="min-w-0 flex-1">
-                              <div className="font-medium truncate">{option.label}</div>
-                              <div className="text-xs text-slate-500 truncate">{option.description}</div>
-                            </div>
-                          </div>
-                        </SelectItem>
-                      );
-                    })}
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-          </CardHeader>
-          <CardContent>
-            {propositionStats.length === 0 ? (
-              <div className="text-center py-12">
-                <FileText 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">
-                  Aucune proposition
-                </h3>
-                <p className="text-slate-600 dark:text-slate-300">
-                  Aucune proposition n'a été soumise pour cette campagne.
-                </p>
-              </div>
-            ) : (
-              <div className="space-y-6">
-                {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">
-                          <div className="flex items-center gap-3 mb-4">
-                            <Badge variant="outline" className="text-xs">
-                              #{index + 1}
-                            </Badge>
-                            <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
-                              {stat.proposition.title}
-                            </h3>
-                          </div>
-                        </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" />
-                            {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-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}
-                          </p>
-                          <p className="text-xs text-slate-500 dark:text-slate-400">
-                            {stat.voteCount === 1 ? 'Votant' : 'Votants'}
-                          </p>
-                        </div>
-                        <div className="text-center">
-                          <p className="text-2xl font-bold text-green-600 dark:text-green-400">
-                            {stat.averageAmount}€
-                          </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}€
-                          </p>
-                          <p className="text-xs text-slate-500 dark:text-slate-400">Minimum</p>
-                        </div>
-                        <div className="text-center">
-                          <p className="text-2xl font-bold text-red-600 dark:text-red-400">
-                            {stat.maxAmount}€
-                          </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 && (
-                        <div className="mt-4">
-                          <div className="flex justify-between text-xs text-slate-500 dark:text-slate-400 mb-1">
-                            <span>Répartition des préférences</span>
-                            <span>{stat.voteCount} {stat.voteCount === 1 ? 'votant' : 'votants'}</span>
-                          </div>
-                          <Progress 
-                            value={(stat.averageAmount / campaign.budget_per_user) * 100} 
-                            className="h-2"
+        {/* Stats Display */}
+        <StatsDisplay
+          campaign={campaign}
+          participants={participants}
+          propositions={propositions}
+          votes={votes}
+          propositionStats={propositionStats}
+          showSorting={true}
+          showExportButton={false}
         />
-                        </div>
-                      )}
-                    </div>
-                  ))}
-              </div>
-            )}
-          </CardContent>
-        </Card>
+
+        {/* Footer */}
+        <Footer />
+        
+        {/* Version Display */}
+        <VersionDisplay />
       </div>
     </div>
   );

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

@@ -0,0 +1,173 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams } from 'next/navigation';
+import { Campaign, Proposition, Participant, Vote } from '@/types';
+import { campaignService, propositionService, participantService, voteService } from '@/lib/services';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { BarChart3 } from 'lucide-react';
+import { StatsDisplay } from '@/components/StatsDisplay';
+import { useStatsCalculation } from '@/hooks/useStatsCalculation';
+import Footer from '@/components/Footer';
+import VersionDisplay from '@/components/VersionDisplay';
+
+export const dynamic = 'force-dynamic';
+
+function PublicStatsPageContent() {
+  const params = useParams();
+  const campaignId = params.id as string;
+  
+  const [campaign, setCampaign] = useState<Campaign | null>(null);
+  const [participants, setParticipants] = useState<Participant[]>([]);
+  const [propositions, setPropositions] = useState<Proposition[]>([]);
+  const [votes, setVotes] = useState<Vote[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const { propositionStats } = useStatsCalculation(campaign, participants, propositions, votes);
+
+  useEffect(() => {
+    // Vérifier la configuration Supabase
+    const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+    const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+    
+    // Si pas de configuration ou valeurs par défaut, rediriger vers setup
+    if (!supabaseUrl || !supabaseAnonKey || 
+        supabaseUrl === 'https://placeholder.supabase.co' || 
+        supabaseAnonKey === 'your-anon-key') {
+      console.log('🔧 Configuration Supabase manquante, redirection vers /setup');
+      window.location.href = '/setup';
+      return;
+    }
+    
+    if (campaignId) {
+      loadData();
+    }
+  }, [campaignId]);
+
+  const loadData = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      
+      const [campaignData, participantsData, propositionsData, votesData] = await Promise.all([
+        campaignService.getById(campaignId),
+        participantService.getByCampaign(campaignId),
+        propositionService.getByCampaign(campaignId),
+        voteService.getByCampaign(campaignId)
+      ]);
+      
+      if (!campaignData) {
+        throw new Error('Campagne non trouvée');
+      }
+      
+      // Vérifier que la campagne est en cours de vote ou terminée pour permettre l'accès public
+      if (campaignData.status !== 'voting' && campaignData.status !== 'closed') {
+        throw new Error('Les statistiques ne sont pas encore disponibles pour cette campagne');
+      }
+      
+      setCampaign(campaignData);
+      setParticipants(participantsData);
+      setPropositions(propositionsData);
+      setVotes(votesData);
+    } catch (error) {
+      console.error('Erreur lors du chargement des données:', error);
+      setError(error instanceof Error ? error.message : 'Une erreur est survenue');
+    } finally {
+      setLoading(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">
+          <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 statistiques...</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !campaign) {
+    return (
+      <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
+        <div className="container mx-auto px-4 py-8">
+          <Card className="border-dashed">
+            <CardContent className="p-12 text-center">
+              <div className="w-16 h-16 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center mx-auto mb-4">
+                <span className="text-2xl">❌</span>
+              </div>
+              <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">
+                {error || 'Campagne introuvable'}
+              </h3>
+              <p className="text-slate-600 dark:text-slate-300 mb-6">
+                {error === 'Campagne non trouvée' 
+                  ? 'La campagne que vous recherchez n\'existe pas ou a été supprimée.'
+                  : error === 'Les statistiques ne sont pas encore disponibles pour cette campagne'
+                  ? 'Cette campagne n\'a pas encore commencé ou les statistiques ne sont pas encore disponibles.'
+                  : 'Une erreur est survenue lors du chargement des données.'}
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
+      <div className="container mx-auto px-4 py-8">
+        {/* Header */}
+        <div className="mb-8">
+          <div className="flex items-center gap-4 mb-4">
+            <Badge variant={campaign.status === 'voting' ? 'default' : 'secondary'}>
+              {campaign.status === 'voting' ? 'En cours de vote' : 'Terminée'}
+            </Badge>
+          </div>
+          
+          <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 flex items-center gap-3">
+                <BarChart3 className="w-8 h-8 text-blue-600" />
+                Statistiques publiques
+              </h1>
+              <p className="text-slate-600 dark:text-slate-300 mt-2">
+                {campaign.title}
+              </p>
+              <p className="text-sm text-slate-500 dark:text-slate-400 mt-1">
+                {campaign.description}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Stats Display */}
+        <StatsDisplay
+          campaign={campaign}
+          participants={participants}
+          propositions={propositions}
+          votes={votes}
+          propositionStats={propositionStats}
+          showSorting={true}
+          showExportButton={false}
+        />
+
+        {/* Footer */}
+        <Footer />
+        
+        {/* Version Display */}
+        <VersionDisplay />
+      </div>
+    </div>
+  );
+}
+
+export default function PublicStatsPage() {
+  return <PublicStatsPageContent />;
+}

src/components/SharePublicStatsButton.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Share2, Check } from 'lucide-react';
+
+interface SharePublicStatsButtonProps {
+  campaignId: string;
+  disabled?: boolean;
+}
+
+export function SharePublicStatsButton({
+  campaignId,
+  disabled = false
+}: SharePublicStatsButtonProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleShare = async () => {
+    if (disabled) return;
+
+    try {
+      const publicUrl = `${window.location.origin}/stats/${campaignId}`;
+      await navigator.clipboard.writeText(publicUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (error) {
+      console.error('Erreur lors de la copie:', error);
+      // Fallback pour les navigateurs qui ne supportent pas clipboard API
+      const textArea = document.createElement('textarea');
+      textArea.value = `${window.location.origin}/stats/${campaignId}`;
+      document.body.appendChild(textArea);
+      textArea.select();
+      document.execCommand('copy');
+      document.body.removeChild(textArea);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  return (
+    <Button
+      onClick={handleShare}
+      disabled={disabled}
+      variant="outline"
+      className="gap-2"
+    >
+      {copied ? (
+        <>
+          <Check className="h-4 w-4" />
+          URL copiée !
+        </>
+      ) : (
+        <>
+          <Share2 className="h-4 w-4" />
+          Partager publiquement
+        </>
+      )}
+    </Button>
+  );
+}

src/components/StatsDisplay.tsx

@@ -0,0 +1,332 @@
+'use client';
+
+import { useState } from 'react';
+import { Campaign, Proposition, Participant, Vote } from '@/types';
+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 { 
+  BarChart3, 
+  Users, 
+  Vote as VoteIcon, 
+  TrendingUp, 
+  Target, 
+  Award,
+  FileText,
+  SortAsc,
+  TrendingDown,
+  Users2,
+  Target as TargetIcon,
+  Hash
+} from 'lucide-react';
+
+export interface PropositionStats {
+  proposition: Proposition;
+  voteCount: number;
+  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: 'total_impact', label: 'Impact total', icon: Target, description: 'Somme totale investie' },
+  { value: 'popularity', label: 'Popularité', icon: TrendingUp, description: 'Moyenne puis nombre de votants' },
+  { value: 'consensus', label: 'Consensus', icon: Users2, description: 'Plus petit écart-type' },
+  { value: 'engagement', label: 'Engagement', icon: Users, description: 'Taux de participation' },
+  { value: 'distribution', label: 'Répartition', icon: BarChart3, description: 'Nombre de votes différents' },
+  { value: 'alphabetical', label: 'Alphabétique', icon: Hash, description: 'Ordre alphabétique' }
+];
+
+interface StatsDisplayProps {
+  campaign: Campaign;
+  participants: Participant[];
+  propositions: Proposition[];
+  votes: Vote[];
+  propositionStats: PropositionStats[];
+  showSorting?: boolean;
+  showExportButton?: boolean;
+  exportButton?: React.ReactNode;
+}
+
+export function StatsDisplay({
+  campaign,
+  participants,
+  propositions,
+  votes,
+  propositionStats,
+  showSorting = true,
+  showExportButton = false,
+  exportButton
+}: StatsDisplayProps) {
+  const [sortBy, setSortBy] = useState<SortOption>('total_impact');
+
+  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 => {
+      const participantVotes = votes.filter(v => v.participant_id === p.id);
+      return participantVotes.some(v => v.amount > 0);
+    });
+    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;
+    return Math.round(totalVotes / propositions.length);
+  };
+
+  const participationRate = getParticipationRate();
+  const averageVotesPerProposition = getAverageVotesPerProposition();
+
+  return (
+    <div className="space-y-8">
+      {/* Overview Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium text-slate-600 dark:text-slate-300">Taux de participation</p>
+                <p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{participationRate}%</p>
+              </div>
+              <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
+                <Users className="w-6 h-6 text-blue-600 dark:text-blue-300" />
+              </div>
+            </div>
+            <Progress value={participationRate} className="mt-4" />
+            <p className="text-xs text-slate-500 dark:text-slate-400 mt-2">
+              {participants.filter(p => votes.some(v => v.participant_id === p.id && v.amount > 0)).length} / {participants.length} participants
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium text-slate-600 dark:text-slate-300">Propositions</p>
+                <p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{propositions.length}</p>
+              </div>
+              <div className="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center">
+                <FileText className="w-6 h-6 text-purple-600 dark:text-purple-300" />
+              </div>
+            </div>
+            <p className="text-xs text-slate-500 dark:text-slate-400 mt-2">
+              {averageVotesPerProposition} votes moy. par proposition
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Propositions Stats */}
+      <Card>
+        <CardHeader>
+          <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">
+              {showSorting && (
+                <>
+                  <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-56">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent className="w-80">
+                      {sortOptions.map((option) => {
+                        const IconComponent = option.icon;
+                        return (
+                          <SelectItem key={option.value} value={option.value} className="py-3">
+                            <div className="flex items-center gap-3 w-full">
+                              <IconComponent className="w-4 h-4 flex-shrink-0" />
+                              <div className="min-w-0 flex-1">
+                                <div className="font-medium truncate">{option.label}</div>
+                                <div className="text-xs text-slate-500 truncate">{option.description}</div>
+                              </div>
+                            </div>
+                          </SelectItem>
+                        );
+                      })}
+                    </SelectContent>
+                  </Select>
+                </>
+              )}
+              {showExportButton && exportButton}
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          {propositionStats.length === 0 ? (
+            <div className="text-center py-12">
+              <FileText 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">
+                Aucune proposition
+              </h3>
+              <p className="text-slate-600 dark:text-slate-300">
+                Aucune proposition n'a été soumise pour cette campagne.
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-6">
+              {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">
+                      <div className="flex items-center gap-3 mb-4">
+                        <Badge variant="outline" className="text-xs">
+                          #{index + 1}
+                        </Badge>
+                        <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
+                          {stat.proposition.title}
+                        </h3>
+                      </div>
+                    </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" />
+                        {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-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}
+                      </p>
+                      <p className="text-xs text-slate-500 dark:text-slate-400">
+                        {stat.voteCount === 1 ? 'Votant' : 'Votants'}
+                      </p>
+                    </div>
+                    <div className="text-center">
+                      <p className="text-2xl font-bold text-green-600 dark:text-green-400">
+                        {stat.averageAmount}€
+                      </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}€
+                      </p>
+                      <p className="text-xs text-slate-500 dark:text-slate-400">Minimum</p>
+                    </div>
+                    <div className="text-center">
+                      <p className="text-2xl font-bold text-red-600 dark:text-red-400">
+                        {stat.maxAmount}€
+                      </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 && (
+                    <div className="mt-4">
+                      <div className="flex justify-between text-xs text-slate-500 dark:text-slate-400 mb-1">
+                        <span>Répartition des préférences</span>
+                        <span>{stat.voteCount} {stat.voteCount === 1 ? 'votant' : 'votants'}</span>
+                      </div>
+                      <Progress 
+                        value={(stat.averageAmount / campaign.budget_per_user) * 100} 
+                        className="h-2"
+                      />
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/hooks/useStatsCalculation.ts

@@ -0,0 +1,49 @@
+import { useMemo } from 'react';
+import { Campaign, Proposition, Participant, Vote } from '@/types';
+import { PropositionStats } from '@/components/StatsDisplay';
+
+export function useStatsCalculation(
+  campaign: Campaign | null,
+  participants: Participant[],
+  propositions: Proposition[],
+  votes: Vote[]
+) {
+  const propositionStats = useMemo((): PropositionStats[] => {
+    if (!campaign) return [];
+
+    return propositions.map(proposition => {
+      const propositionVotes = votes.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 = participants.length > 0 
+        ? (propositionVotes.length / participants.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(totalAmount / amounts.length) : 0,
+        minAmount: amounts.length > 0 ? Math.min(...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
+      };
+    });
+  }, [campaign, participants, propositions, votes]);
+
+  return { propositionStats };
+}