492 lines
21 KiB
TypeScript
492 lines
21 KiB
TypeScript
'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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import Navigation from '@/components/Navigation';
|
|
import AuthGuard from '@/components/AuthGuard';
|
|
import {
|
|
BarChart3,
|
|
Users,
|
|
Vote as VoteIcon,
|
|
TrendingUp,
|
|
Target,
|
|
Award,
|
|
FileText,
|
|
Calendar,
|
|
ArrowLeft,
|
|
SortAsc,
|
|
TrendingDown,
|
|
Users2,
|
|
Target as TargetIcon,
|
|
Hash
|
|
} from 'lucide-react';
|
|
import { ExportStatsButton } from '@/components/ExportStatsButton';
|
|
|
|
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;
|
|
|
|
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[]>([]);
|
|
const [sortBy, setSortBy] = useState<SortOption>('total_impact');
|
|
|
|
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);
|
|
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 {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
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 (
|
|
<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 className="flex gap-2">
|
|
<ExportStatsButton
|
|
campaignTitle={campaign.title}
|
|
propositions={propositions}
|
|
participants={participants}
|
|
votes={votes}
|
|
budgetPerUser={campaign.budget_per_user}
|
|
propositionStats={propositionStats}
|
|
disabled={loading}
|
|
/>
|
|
</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>
|
|
<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>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function CampaignStatsPage() {
|
|
return (
|
|
<AuthGuard>
|
|
<CampaignStatsPageContent />
|
|
</AuthGuard>
|
|
);
|
|
}
|