rend + simple à lire la page des statistiques

.gitignore

@@ -39,3 +39,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+test-74-yald.ods

package-lock.json

@@ -1,16 +1,17 @@
 {
   "name": "mes-budgets-participatifs",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mes-budgets-participatifs",
-      "version": "0.1.0",
+      "version": "0.2.0",
       "dependencies": {
         "@headlessui/react": "^2.2.7",
         "@heroicons/react": "^2.2.0",
         "@radix-ui/react-avatar": "^1.1.10",
+        "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-label": "^2.1.7",
         "@radix-ui/react-progress": "^1.1.7",
@@ -3004,6 +3005,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz",
+      "integrity": "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mes-budgets-participatifs",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
@@ -19,6 +19,7 @@
     "@headlessui/react": "^2.2.7",
     "@heroicons/react": "^2.2.0",
     "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-progress": "^1.1.7",

src/app/admin/campaigns/[id]/send-emails/page.tsx

@@ -2,8 +2,8 @@
 
 import { useState, useEffect } from 'react';
 import { useParams, useRouter } from 'next/navigation';
-import { Campaign, Participant } from '@/types';
+import { Campaign, Participant, ParticipantWithVoteStatus } from '@/types';
-import { campaignService, participantService, settingsService } from '@/lib/services';
+import { campaignService, participantService, settingsService, voteService } from '@/lib/services';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Textarea } from '@/components/ui/textarea';
@@ -11,6 +11,7 @@ import { Label } from '@/components/ui/label';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Progress } from '@/components/ui/progress';
 import { Badge } from '@/components/ui/badge';
+import { Checkbox } from '@/components/ui/checkbox';
 import { ArrowLeft, Mail, Send, CheckCircle, XCircle, Clock, Users } from 'lucide-react';
 import AuthGuard from '@/components/AuthGuard';
 import Footer from '@/components/Footer';
@@ -29,13 +30,14 @@ function SendEmailsPageContent() {
   const campaignId = params.id as string;
   
   const [campaign, setCampaign] = useState<Campaign | null>(null);
-  const [participants, setParticipants] = useState<Participant[]>([]);
+  const [participants, setParticipants] = useState<ParticipantWithVoteStatus[]>([]);
   const [loading, setLoading] = useState(true);
   const [sending, setSending] = useState(false);
   const [emailProgress, setEmailProgress] = useState<EmailProgress[]>([]);
   const [defaultSubject, setDefaultSubject] = useState('');
   const [defaultMessage, setDefaultMessage] = useState('');
   const [smtpConfigured, setSmtpConfigured] = useState(false);
+  const [onlyNonVoters, setOnlyNonVoters] = useState(true);
 
   useEffect(() => {
     loadData();
@@ -46,7 +48,7 @@ function SendEmailsPageContent() {
       setLoading(true);
       const [campaignData, participantsData, smtpSettings] = await Promise.all([
         campaignService.getById(campaignId),
-        participantService.getByCampaign(campaignId),
+        voteService.getParticipantVoteStatus(campaignId),
         settingsService.getSmtpSettings()
       ]);
       
@@ -85,15 +87,24 @@ Cordialement,`);
     }
   };
 
+  // Fonction pour obtenir les participants filtrés selon l'option sélectionnée
+  const getFilteredParticipants = () => {
+    if (onlyNonVoters) {
+      return participants.filter(participant => !participant.has_voted);
+    }
+    return participants;
+  };
+
   const handleSendAllEmails = async () => {
     if (!campaign || !defaultSubject.trim() || !defaultMessage.trim()) {
       return;
     }
 
     setSending(true);
+    const filteredParticipants = getFilteredParticipants();
     
-    for (let i = 0; i < participants.length; i++) {
+    for (let i = 0; i < filteredParticipants.length; i++) {
-      const participant = participants[i];
+      const participant = filteredParticipants[i];
       
       // Mettre à jour le statut à "sending"
       setEmailProgress(prev => prev.map(p => 
@@ -157,7 +168,7 @@ Cordialement,`);
       }
 
       // Attendre 1 seconde avant l'email suivant
-      if (i < participants.length - 1) {
+      if (i < filteredParticipants.length - 1) {
         await new Promise(resolve => setTimeout(resolve, 1000));
       }
     }
@@ -191,9 +202,10 @@ Cordialement,`);
     }
   };
 
+  const filteredParticipants = getFilteredParticipants();
   const sentCount = emailProgress.filter(p => p.status === 'sent').length;
   const errorCount = emailProgress.filter(p => p.status === 'error').length;
-  const progressPercentage = participants.length > 0 ? (sentCount / participants.length) * 100 : 0;
+  const progressPercentage = filteredParticipants.length > 0 ? (sentCount / filteredParticipants.length) * 100 : 0;
 
   if (loading) {
     return (
@@ -308,7 +320,7 @@ Cordialement,`);
           </div>
 
           {/* Statistiques */}
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
             <Card>
               <CardContent className="p-6">
                 <div className="flex items-center">
@@ -321,6 +333,18 @@ Cordialement,`);
               </CardContent>
             </Card>
             
+            <Card>
+              <CardContent className="p-6">
+                <div className="flex items-center">
+                  <Users className="h-8 w-8 text-blue-600 dark:text-blue-400 mr-3" />
+                  <div>
+                    <p className="text-sm font-medium text-slate-600 dark:text-slate-400">Destinataires</p>
+                    <p className="text-2xl font-bold text-blue-600">{filteredParticipants.length}</p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+            
             <Card>
               <CardContent className="p-6">
                 <div className="flex items-center">
@@ -379,14 +403,25 @@ Cordialement,`);
                 />
               </div>
               
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id="only-non-voters"
+                  checked={onlyNonVoters}
+                  onCheckedChange={(checked) => setOnlyNonVoters(checked as boolean)}
+                />
+                <Label htmlFor="only-non-voters" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+                  N'envoyer qu'aux participants n'ayant pas encore voté
+                </Label>
+              </div>
+              
               <div className="flex gap-4">
                 <Button 
                   onClick={handleSendAllEmails}
-                  disabled={sending || !defaultSubject.trim() || !defaultMessage.trim() || participants.length === 0}
+                  disabled={sending || !defaultSubject.trim() || !defaultMessage.trim() || filteredParticipants.length === 0}
                   className="flex-1"
                 >
                   <Send className="w-4 h-4 mr-2" />
-                  {sending ? 'Envoi en cours...' : 'Envoyer à tous'}
+                  {sending ? 'Envoi en cours...' : `Envoyer à ${filteredParticipants.length} participant${filteredParticipants.length > 1 ? 's' : ''}`}
                 </Button>
               </div>
             </CardContent>
@@ -402,7 +437,7 @@ Cordialement,`);
                 <div className="space-y-4">
                   <div className="flex items-center justify-between">
                     <span className="text-sm text-slate-600 dark:text-slate-400">
-                      {sentCount} / {participants.length} emails envoyés
+                      {sentCount} / {filteredParticipants.length} emails envoyés
                     </span>
                     <span className="text-sm text-slate-600 dark:text-slate-400">
                       {Math.round(progressPercentage)}%
@@ -424,14 +459,28 @@ Cordialement,`);
             </CardHeader>
             <CardContent>
               <div className="space-y-3">
-                {emailProgress.map((progress) => (
+                {emailProgress
+                  .filter(progress => {
+                    const participant = participants.find(p => p.id === progress.participant.id);
+                    return participant && (!onlyNonVoters || !participant.has_voted);
+                  })
+                  .map((progress) => {
+                    const participant = participants.find(p => p.id === progress.participant.id);
+                    return (
                       <div key={progress.participant.id} className="flex items-center justify-between p-3 border border-slate-200 dark:border-slate-700 rounded-lg">
                         <div className="flex items-center space-x-3">
                           {getStatusIcon(progress.status)}
                           <div>
+                            <div className="flex items-center gap-2">
                               <p className="font-medium text-slate-900 dark:text-slate-100">
                                 {progress.participant.first_name} {progress.participant.last_name}
                               </p>
+                              {participant?.has_voted && (
+                                <Badge variant="secondary" className="text-xs">
+                                  A voté
+                                </Badge>
+                              )}
+                            </div>
                             <p className="text-sm text-slate-600 dark:text-slate-400">
                               {progress.participant.email}
                             </p>
@@ -444,7 +493,8 @@ Cordialement,`);
                         </div>
                         {getStatusBadge(progress.status)}
                       </div>
-                ))}
+                    );
+                  })}
               </div>
             </CardContent>
           </Card>

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, 
+  ArrowLeft
-  Vote as VoteIcon, 
-  TrendingUp, 
-  Target, 
-  Award,
-  FileText,
-  Calendar,
-  ArrowLeft,
-  SortAsc,
-  TrendingDown,
-  Users2,
-  Target as TargetIcon,
-  Hash
 } 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 */}
+        {/* Stats Display */}
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+        <StatsDisplay
-          <Card>
+          campaign={campaign}
-            <CardContent className="p-6">
+          participants={participants}
-              <div className="flex items-center justify-between">
+          propositions={propositions}
-                <div>
+          votes={votes}
-                  <p className="text-sm font-medium text-slate-600 dark:text-slate-300">Taux de participation</p>
+          propositionStats={propositionStats}
-                  <p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{participationRate}%</p>
+          showSorting={true}
-                </div>
+          showExportButton={false}
-                <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"
         />
-                        </div>
+
-                      )}
+        {/* Footer */}
-                    </div>
+        <Footer />
-                  ))}
+        
-              </div>
+        {/* Version Display */}
-            )}
+        <VersionDisplay />
-          </CardContent>
-        </Card>
       </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/ImportFileModal.tsx

@@ -8,7 +8,7 @@ import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Upload, FileText, Download, AlertCircle } from 'lucide-react';
 import { BaseModal } from './base/BaseModal';
 import { ErrorDisplay } from './base/ErrorDisplay';
-import { parseCSV, parseExcel, getExpectedColumns, downloadTemplate, validateFileType } from '@/lib/file-utils';
+import { parseCSV, parseExcel, getExpectedColumns, downloadTemplate, validateFileType, normalizeParsedData } from '@/lib/file-utils';
 
 interface ImportFileModalProps {
   isOpen: boolean;
@@ -52,7 +52,9 @@ export default function ImportFileModal({
         return;
       }
       
-      setPreview(result.data.slice(0, 5)); // Afficher les 5 premières lignes
+      // Normaliser les données pour correspondre aux colonnes attendues
+      const normalizedData = normalizeParsedData(result.data, type);
+      setPreview(normalizedData.slice(0, 5)); // Afficher les 5 premières lignes
     }
   };
 
@@ -69,7 +71,9 @@ export default function ImportFileModal({
         return;
       }
       
-      onImport(result.data);
+      // Normaliser les données pour correspondre aux colonnes attendues
+      const normalizedData = normalizeParsedData(result.data, type);
+      onImport(normalizedData);
       onClose();
       setFile(null);
       setPreview([]);

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,333 @@
+'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;
+  averagePerTotalVoters: 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-purple-600 dark:text-purple-400">
+                        {stat.averagePerTotalVoters}€
+                      </p>
+                      <p className="text-xs text-slate-500 dark:text-slate-400">Moyenne / total votants</p>
+                    </div>
+                    <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 ? 'Soutien' : 'Soutiens'}
+                      </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 des soutiens</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/components/VersionDisplay.tsx

@@ -12,7 +12,7 @@ export default function VersionDisplay() {
       .then(data => setVersion(data.version))
       .catch(() => {
         // Fallback si le fichier n'est pas accessible
-        setVersion('0.2.0');
+        setVersion('0.2.1');
       });
   }, []);
 

src/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

src/hooks/useStatsCalculation.ts

@@ -0,0 +1,55 @@
+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;
+      
+      // Calculer la moyenne par rapport au nombre total de votants
+      const averagePerTotalVoters = participants.length > 0 
+        ? Math.round(totalAmount / participants.length) 
+        : 0;
+      
+      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,
+        averagePerTotalVoters
+      };
+    });
+  }, [campaign, participants, propositions, votes]);
+
+  return { propositionStats };
+}

src/lib/export-utils.ts

@@ -39,6 +39,7 @@ export interface PropositionStats {
   participationRate: number;
   voteDistribution: number;
   consensusScore: number;
+  averagePerTotalVoters: number;
 }
 
 export async function generateVoteExport(data: ExportData): Promise<{ data: Uint8Array | string; format: ExportFileFormat }> {

src/lib/file-utils.ts

@@ -132,6 +132,55 @@ export function getExpectedColumns(type: 'propositions' | 'participants'): strin
   }
 }
 
+/**
+ * Normalise les noms de colonnes pour améliorer la compatibilité
+ */
+export function normalizeColumnName(columnName: string): string {
+  if (!columnName) return '';
+  
+  const normalized = columnName.toLowerCase().trim();
+  
+  // Mappings pour les colonnes communes
+  const mappings: { [key: string]: string } = {
+    'email': 'Email',
+    'e-mail': 'Email',
+    'mail': 'Email',
+    'courriel': 'Email',
+    'prénom': 'Prénom',
+    'prenom': 'Prénom',
+    'firstname': 'Prénom',
+    'first_name': 'Prénom',
+    'nom': 'Nom',
+    'lastname': 'Nom',
+    'last_name': 'Nom',
+    'titre': 'Titre',
+    'title': 'Titre',
+    'description': 'Description',
+    'desc': 'Description'
+  };
+  
+  return mappings[normalized] || columnName;
+}
+
+/**
+ * Normalise les données parsées pour correspondre aux colonnes attendues
+ */
+export function normalizeParsedData(data: any[], type: 'propositions' | 'participants'): any[] {
+  const expectedColumns = getExpectedColumns(type);
+  
+  return data.map(row => {
+    const normalizedRow: any = {};
+    
+    // Normaliser chaque colonne
+    Object.keys(row).forEach(key => {
+      const normalizedKey = normalizeColumnName(key);
+      normalizedRow[normalizedKey] = row[key];
+    });
+    
+    return normalizedRow;
+  });
+}
+
 export async function downloadTemplate(type: 'propositions' | 'participants'): Promise<void> {
   const columns = getExpectedColumns(type);