Ajout page statistiques
This commit is contained in:
Yannick Le Duc
338
src/app/admin/campaigns/[id]/stats/page.tsx
Normal file
338
src/app/admin/campaigns/[id]/stats/page.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -13,7 +13,7 @@ import { Input } from '@/components/ui/input';
|
|||||||
import { Progress } from '@/components/ui/progress';
|
import { Progress } from '@/components/ui/progress';
|
||||||
import Navigation from '@/components/Navigation';
|
import Navigation from '@/components/Navigation';
|
||||||
import AuthGuard from '@/components/AuthGuard';
|
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';
|
export const dynamic = 'force-dynamic';
|
||||||
|
|
||||||
@@ -323,6 +323,14 @@ function AdminPageContent() {
|
|||||||
Votants ({campaign.stats.participants})
|
Votants ({campaign.stats.participants})
|
||||||
</Link>
|
</Link>
|
||||||
</Button>
|
</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>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|||||||
@@ -242,6 +242,16 @@ export const voteService = {
|
|||||||
if (error) throw error;
|
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[]> {
|
async getParticipantVoteStatus(campaignId: string): Promise<ParticipantWithVoteStatus[]> {
|
||||||
const { data: participants, error: participantsError } = await supabase
|
const { data: participants, error: participantsError } = await supabase
|
||||||
.from('participants')
|
.from('participants')
|
||||||
|
|||||||
Reference in New Issue
Block a user