redesign de la page /admin
This commit is contained in:
Yannick Le Duc
@@ -10,14 +10,13 @@ import DeleteParticipantModal from '@/components/DeleteParticipantModal';
|
||||
import ImportFileModal from '@/components/ImportFileModal';
|
||||
import SendParticipantEmailModal from '@/components/SendParticipantEmailModal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import Navigation from '@/components/Navigation';
|
||||
import AuthGuard from '@/components/AuthGuard';
|
||||
import { Users, User, Calendar, Mail, Vote, Copy, Check, Upload } from 'lucide-react';
|
||||
import { User, Calendar, Mail, Vote, Copy, Check, Upload } from 'lucide-react';
|
||||
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
@@ -148,8 +147,7 @@ function CampaignParticipantsPageContent() {
|
||||
);
|
||||
}
|
||||
|
||||
const votedCount = participants.filter(p => p.has_voted).length;
|
||||
const totalBudget = participants.reduce((sum, p) => sum + (p.total_voted_amount || 0), 0);
|
||||
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50 dark:bg-slate-900">
|
||||
@@ -179,73 +177,14 @@ function CampaignParticipantsPageContent() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Overview */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 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">Total Participants</p>
|
||||
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{participants.length}</p>
|
||||
</div>
|
||||
<div className="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
|
||||
<Users className="w-4 h-4 text-blue-600 dark:text-blue-300" />
|
||||
</div>
|
||||
</div>
|
||||
</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">Ont voté</p>
|
||||
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{votedCount}</p>
|
||||
</div>
|
||||
<div className="w-8 h-8 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center">
|
||||
<Vote className="w-4 h-4 text-green-600 dark:text-green-300" />
|
||||
</div>
|
||||
</div>
|
||||
</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">Taux de participation</p>
|
||||
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||
{participants.length > 0 ? Math.round((votedCount / participants.length) * 100) : 0}%
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-8 h-8 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center">
|
||||
<span className="text-purple-600 dark:text-purple-300">📊</span>
|
||||
</div>
|
||||
</div>
|
||||
</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">Budget total voté</p>
|
||||
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{totalBudget}€</p>
|
||||
</div>
|
||||
<div className="w-8 h-8 bg-yellow-100 dark:bg-yellow-900 rounded-lg flex items-center justify-center">
|
||||
<span className="text-yellow-600 dark:text-yellow-300">💰</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Participants List */}
|
||||
{participants.length === 0 ? (
|
||||
<Card className="border-dashed">
|
||||
<CardContent className="p-12 text-center">
|
||||
<div className="w-16 h-16 bg-slate-100 dark:bg-slate-800 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Users className="w-8 h-8 text-slate-400" />
|
||||
<User className="w-8 h-8 text-slate-400" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">
|
||||
Aucun participant
|
||||
@@ -273,9 +212,6 @@ function CampaignParticipantsPageContent() {
|
||||
{participant.has_voted ? 'A voté' : 'N\'a pas voté'}
|
||||
</Badge>
|
||||
</div>
|
||||
<CardDescription className="text-base">
|
||||
{participant.email}
|
||||
</CardDescription>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row gap-2">
|
||||
<Button
|
||||
@@ -331,62 +267,56 @@ function CampaignParticipantsPageContent() {
|
||||
|
||||
{/* Vote Link for voting campaigns */}
|
||||
{campaign.status === 'voting' && (
|
||||
<Card className="bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<h4 className="text-sm font-medium text-blue-900 dark:text-blue-100 mb-1">
|
||||
Lien de vote personnel
|
||||
</h4>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Input
|
||||
type="text"
|
||||
readOnly
|
||||
value={participant.short_id
|
||||
? `${window.location.origin}/v/${participant.short_id}`
|
||||
: 'Génération en cours...'
|
||||
}
|
||||
className="flex-1 text-xs bg-white dark:bg-slate-800 border-blue-300 dark:border-blue-600 text-blue-700 dark:text-blue-300 font-mono"
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => copyVoteLink(participant.id, participant.short_id)}
|
||||
className="text-xs"
|
||||
disabled={!participant.short_id}
|
||||
>
|
||||
{copiedParticipantId === participant.id ? (
|
||||
<>
|
||||
<Check className="w-3 h-3 mr-1" />
|
||||
Copié !
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy className="w-3 h-3 mr-1" />
|
||||
Copier
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-xs text-blue-700 dark:text-blue-300 mb-1">
|
||||
Lien de vote :
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Input
|
||||
type="text"
|
||||
readOnly
|
||||
value={participant.short_id
|
||||
? `${window.location.origin}/v/${participant.short_id}`
|
||||
: 'Génération en cours...'
|
||||
}
|
||||
className="flex-1 text-xs bg-white dark:bg-slate-800 border-blue-300 dark:border-blue-600 text-blue-700 dark:text-blue-300 font-mono"
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => copyVoteLink(participant.id, participant.short_id)}
|
||||
className="text-xs"
|
||||
disabled={!participant.short_id}
|
||||
>
|
||||
{copiedParticipantId === participant.id ? (
|
||||
<>
|
||||
<Check className="w-3 h-3 mr-1" />
|
||||
Copié !
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy className="w-3 h-3 mr-1" />
|
||||
Copier
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setSelectedParticipant(participant);
|
||||
setShowSendEmailModal(true);
|
||||
}}
|
||||
className="text-xs"
|
||||
>
|
||||
<Mail className="w-3 h-3 mr-1" />
|
||||
Envoyer un mail
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Email Button */}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setSelectedParticipant(participant);
|
||||
setShowSendEmailModal(true);
|
||||
}}
|
||||
className="text-xs"
|
||||
>
|
||||
<Mail className="w-3 h-3 mr-1" />
|
||||
Envoyer un mail
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
@@ -10,11 +10,11 @@ import DeletePropositionModal from '@/components/DeletePropositionModal';
|
||||
import ImportFileModal from '@/components/ImportFileModal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
|
||||
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||||
import Navigation from '@/components/Navigation';
|
||||
import AuthGuard from '@/components/AuthGuard';
|
||||
import { FileText, User, Calendar, Mail, Upload } from 'lucide-react';
|
||||
import { FileText, Calendar, Mail, Upload } from 'lucide-react';
|
||||
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
@@ -89,6 +89,8 @@ function CampaignPropositionsPageContent() {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
const getInitials = (firstName: string, lastName: string) => {
|
||||
return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
|
||||
};
|
||||
@@ -161,57 +163,11 @@ function CampaignPropositionsPageContent() {
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{/* Stats Overview */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 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">Total Propositions</p>
|
||||
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{propositions.length}</p>
|
||||
</div>
|
||||
<div className="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
|
||||
<FileText className="w-4 h-4 text-blue-600 dark:text-blue-300" />
|
||||
</div>
|
||||
</div>
|
||||
</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">Auteurs uniques</p>
|
||||
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||
{new Set(propositions.map(p => p.author_email)).size}
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-8 h-8 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center">
|
||||
<User className="w-4 h-4 text-green-600 dark:text-green-300" />
|
||||
</div>
|
||||
</div>
|
||||
</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">Statut Campagne</p>
|
||||
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||
{campaign.status === 'deposit' ? 'Dépôt' :
|
||||
campaign.status === 'voting' ? 'Vote' : 'Terminée'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-8 h-8 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center">
|
||||
<span className="text-purple-600 dark:text-purple-300">📊</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Propositions List */}
|
||||
{propositions.length === 0 ? (
|
||||
|
||||
Reference in New Issue
Block a user