Ajout page statistiques

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

@@ -0,0 +1,338 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams } from 'next/navigation';
+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 { Badge } from '@/components/ui/badge';
+import { Progress } from '@/components/ui/progress';
+import Navigation from '@/components/Navigation';
+import AuthGuard from '@/components/AuthGuard';
+import { 
+  BarChart3, 
+  Users, 
+  Vote as VoteIcon, 
+  TrendingUp, 
+  Target, 
+  Award,
+  FileText,
+  Calendar,
+  ArrowLeft
+} from 'lucide-react';
+
+export const dynamic = 'force-dynamic';
+
+interface PropositionStats {
+  proposition: Proposition;
+  voteCount: number;
+  averageAmount: number;
+  minAmount: number;
+  maxAmount: number;
+}
+
+function CampaignStatsPageContent() {
+  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 [propositionStats, setPropositionStats] = useState<PropositionStats[]>([]);
+
+  useEffect(() => {
+    if (campaignId) {
+      loadData();
+    }
+  }, [campaignId]);
+
+  const loadData = async () => {
+    try {
+      setLoading(true);
+      const [campaigns, participantsData, propositionsData, votesData] = await Promise.all([
+        campaignService.getAll(),
+        participantService.getByCampaign(campaignId),
+        propositionService.getByCampaign(campaignId),
+        voteService.getByCampaign(campaignId)
+      ]);
+      
+      const campaignData = campaigns.find(c => c.id === campaignId);
+      if (!campaignData) {
+        throw new Error('Campagne non trouvée');
+      }
+      
+      setCampaign(campaignData);
+      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);
+        
+        return {
+          proposition,
+          voteCount: propositionVotes.length,
+          averageAmount: amounts.length > 0 ? Math.round(amounts.reduce((sum, amount) => sum + amount, 0) / amounts.length) : 0,
+          minAmount: amounts.length > 0 ? Math.min(...amounts) : 0,
+          maxAmount: amounts.length > 0 ? Math.max(...amounts) : 0
+        };
+      });
+      
+      setPropositionStats(stats);
+    } catch (error) {
+      console.error('Erreur lors du chargement des données:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  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 (
+      <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
+        <div className="container mx-auto px-4 py-8">
+          <Navigation showBackButton backUrl="/admin" />
+          <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 (!campaign) {
+    return (
+      <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
+        <div className="container mx-auto px-4 py-8">
+          <Navigation showBackButton backUrl="/admin" />
+          <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">
+                Campagne introuvable
+              </h3>
+              <p className="text-slate-600 dark:text-slate-300 mb-6">
+                La campagne que vous recherchez n'existe pas ou a été supprimée.
+              </p>
+              <Button asChild>
+                <Link href="/admin">Retour à l'administration</Link>
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    );
+  }
+
+  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">
+        <Navigation showBackButton backUrl="/admin" />
+        
+        {/* Header */}
+        <div className="mb-8">
+          <div className="flex items-center gap-4 mb-4">
+            <Button variant="outline" size="sm" asChild>
+              <Link href="/admin">
+                <ArrowLeft className="w-4 h-4 mr-2" />
+                Retour
+              </Link>
+            </Button>
+            <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
+              </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>
+
+        {/* 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>
+            <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>
+          </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">
+                {propositionStats
+                  .sort((a, b) => b.averageAmount - a.averageAmount) // Trier par moyenne décroissante
+                  .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-2">
+                            <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>
+                          <p className="text-slate-600 dark:text-slate-300 text-sm">
+                            {stat.proposition.description}
+                          </p>
+                        </div>
+                                                 {index === 0 && stat.averageAmount > 0 && (
+                           <Badge className="bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
+                             <Award className="w-3 h-3 mr-1" />
+                             Préférée
+                           </Badge>
+                         )}
+                      </div>
+
+                      <div className="grid grid-cols-2 md:grid-cols-4 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-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>
+
+                      {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>
+    </div>
+  );
+}
+
+export default function CampaignStatsPage() {
+  return (
+    <AuthGuard>
+      <CampaignStatsPageContent />
+    </AuthGuard>
+  );
+}

src/app/admin/page.tsx

@@ -13,7 +13,7 @@ import { Input } from '@/components/ui/input';
 import { Progress } from '@/components/ui/progress';
 import Navigation from '@/components/Navigation';
 import AuthGuard from '@/components/AuthGuard';
-import { FolderOpen, Users, FileText, CheckCircle, Clock, Plus } from 'lucide-react';
+import { FolderOpen, Users, FileText, CheckCircle, Clock, Plus, BarChart3 } from 'lucide-react';
 
 export const dynamic = 'force-dynamic';
 
@@ -323,6 +323,14 @@ function AdminPageContent() {
                         Votants ({campaign.stats.participants})
                       </Link>
                     </Button>
+                    {(campaign.status === 'voting' || campaign.status === 'closed') && (
+                      <Button asChild variant="default" className="flex-1">
+                        <Link href={`/admin/campaigns/${campaign.id}/stats`}>
+                          <BarChart3 className="w-4 h-4 mr-2" />
+                          Statistiques
+                        </Link>
+                      </Button>
+                    )}
                   </div>
                 </CardContent>
               </Card>

src/lib/services.ts

@@ -242,6 +242,16 @@ export const voteService = {
     if (error) throw error;
   },
 
+  async getByCampaign(campaignId: string): Promise<Vote[]> {
+    const { data, error } = await supabase
+      .from('votes')
+      .select('*')
+      .eq('campaign_id', campaignId);
+    
+    if (error) throw error;
+    return data || [];
+  },
+
   async getParticipantVoteStatus(campaignId: string): Promise<ParticipantWithVoteStatus[]> {
     const { data: participants, error: participantsError } = await supabase
       .from('participants')