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

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