Meilleur design via Shadcn/ui
This commit is contained in:
Yannick Le Duc
@@ -1,5 +1,4 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useParams } from 'next/navigation';
|
||||
@@ -8,14 +7,19 @@ import { campaignService, participantService, voteService } from '@/lib/services
|
||||
import AddParticipantModal from '@/components/AddParticipantModal';
|
||||
import EditParticipantModal from '@/components/EditParticipantModal';
|
||||
import DeleteParticipantModal from '@/components/DeleteParticipantModal';
|
||||
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 { Input } from '@/components/ui/input';
|
||||
import Navigation from '@/components/Navigation';
|
||||
import { Users, User, Calendar, Mail, Vote, Copy, Check } from 'lucide-react';
|
||||
|
||||
// Force dynamic rendering to avoid SSR issues with Supabase
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
export default function CampaignParticipantsPage() {
|
||||
const params = useParams();
|
||||
const campaignId = params.id as string;
|
||||
|
||||
const [campaign, setCampaign] = useState<Campaign | null>(null);
|
||||
const [participants, setParticipants] = useState<ParticipantWithVoteStatus[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
@@ -26,20 +30,19 @@ export default function CampaignParticipantsPage() {
|
||||
const [copiedParticipantId, setCopiedParticipantId] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (campaignId) {
|
||||
loadData();
|
||||
}
|
||||
loadData();
|
||||
}, [campaignId]);
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const [campaigns, participantsWithVoteStatus] = await Promise.all([
|
||||
campaignService.getAll().then(campaigns => campaigns.find(c => c.id === campaignId)),
|
||||
campaignService.getAll(),
|
||||
voteService.getParticipantVoteStatus(campaignId)
|
||||
]);
|
||||
|
||||
setCampaign(campaigns || null);
|
||||
const campaignData = campaigns.find(c => c.id === campaignId);
|
||||
setCampaign(campaignData || null);
|
||||
setParticipants(participantsWithVoteStatus);
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement des données:', error);
|
||||
@@ -55,22 +58,36 @@ export default function CampaignParticipantsPage() {
|
||||
|
||||
const handleParticipantEdited = () => {
|
||||
setShowEditModal(false);
|
||||
setSelectedParticipant(null);
|
||||
loadData();
|
||||
};
|
||||
|
||||
const handleParticipantDeleted = () => {
|
||||
setShowDeleteModal(false);
|
||||
setSelectedParticipant(null);
|
||||
loadData();
|
||||
};
|
||||
|
||||
const getInitials = (firstName: string, lastName: string) => {
|
||||
return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
|
||||
};
|
||||
|
||||
const copyVoteLink = (participantId: string) => {
|
||||
const voteUrl = `${window.location.origin}/campaigns/${campaignId}/vote/${participantId}`;
|
||||
navigator.clipboard.writeText(voteUrl);
|
||||
setCopiedParticipantId(participantId);
|
||||
setTimeout(() => setCopiedParticipantId(null), 2000);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto"></div>
|
||||
<p className="mt-4 text-gray-600">Chargement des participants...</p>
|
||||
<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 participants...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -78,232 +95,277 @@ export default function CampaignParticipantsPage() {
|
||||
|
||||
if (!campaign) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h2 className="text-xl font-semibold text-gray-900">Campagne non trouvée</h2>
|
||||
<p className="mt-2 text-gray-600">La campagne demandée n'existe pas.</p>
|
||||
<Link
|
||||
href="/admin"
|
||||
className="mt-4 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700"
|
||||
>
|
||||
Retour à l'administration
|
||||
</Link>
|
||||
<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 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-gray-50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<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 justify-between">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<Link
|
||||
href="/admin"
|
||||
className="inline-flex items-center px-3 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
</svg>
|
||||
Retour
|
||||
</Link>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">Participants</h1>
|
||||
<p className="mt-2 text-gray-600">
|
||||
Campagne : <span className="font-medium">{campaign.title}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">
|
||||
Participants
|
||||
</h1>
|
||||
<p className="text-slate-600 dark:text-slate-300 mt-2">
|
||||
{campaign.title}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowAddModal(true)}
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
Ajouter un participant
|
||||
</button>
|
||||
<Button onClick={() => setShowAddModal(true)} size="lg">
|
||||
✨ Nouveau participant
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Participants */}
|
||||
{/* 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 ? (
|
||||
<div className="text-center py-12">
|
||||
<svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
<h3 className="mt-2 text-sm font-medium text-gray-900">Aucun participant</h3>
|
||||
<p className="mt-1 text-sm text-gray-500">Commencez par ajouter votre premier participant.</p>
|
||||
<div className="mt-6">
|
||||
<button
|
||||
onClick={() => setShowAddModal(true)}
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
Ajouter un participant
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white shadow overflow-hidden sm:rounded-lg">
|
||||
<div className="px-4 py-5 sm:px-6 border-b border-gray-200">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900">
|
||||
Participants ({participants.length})
|
||||
<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" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">
|
||||
Aucun participant
|
||||
</h3>
|
||||
<p className="mt-1 max-w-2xl text-sm text-gray-500">
|
||||
Liste de tous les participants pour cette campagne
|
||||
<p className="text-slate-600 dark:text-slate-300 mb-6">
|
||||
Aucun participant n'a encore été ajouté à cette campagne.
|
||||
</p>
|
||||
</div>
|
||||
<ul className="divide-y divide-gray-200">
|
||||
{participants.map((participant) => (
|
||||
<li key={participant.id} className="px-4 py-6 sm:px-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center space-x-3 mb-2">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center">
|
||||
<span className="text-sm font-medium text-indigo-600">
|
||||
{participant.first_name.charAt(0)}{participant.last_name.charAt(0)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-lg font-medium text-gray-900">
|
||||
{participant.first_name} {participant.last_name}
|
||||
</h4>
|
||||
<p className="text-sm text-gray-600">
|
||||
{participant.email}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4 text-xs text-gray-500">
|
||||
<span>
|
||||
<strong>Inscrit le :</strong> {new Date(participant.created_at).toLocaleDateString('fr-FR')}
|
||||
</span>
|
||||
<span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
|
||||
participant.has_voted
|
||||
? 'bg-green-100 text-green-800'
|
||||
: 'bg-yellow-100 text-yellow-800'
|
||||
}`}>
|
||||
<Button onClick={() => setShowAddModal(true)}>
|
||||
Ajouter un participant
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="grid gap-6">
|
||||
{participants.map((participant) => (
|
||||
<Card key={participant.id} className="hover:shadow-lg transition-shadow duration-200">
|
||||
<CardHeader>
|
||||
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<CardTitle className="text-xl">
|
||||
{participant.first_name} {participant.last_name}
|
||||
</CardTitle>
|
||||
<Badge variant={participant.has_voted ? 'default' : 'secondary'}>
|
||||
{participant.has_voted ? 'A voté' : 'N\'a pas voté'}
|
||||
</span>
|
||||
{participant.has_voted && participant.total_voted_amount && (
|
||||
<span>
|
||||
<strong>Total voté :</strong> {participant.total_voted_amount}€
|
||||
</span>
|
||||
)}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{campaign?.status === 'voting' && (
|
||||
<div className="mt-4 p-3 bg-blue-50 rounded-lg border border-blue-200">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<h4 className="text-sm font-medium text-blue-900 mb-1">Lien de vote personnel</h4>
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
type="text"
|
||||
readOnly
|
||||
value={`${window.location.origin}/campaigns/${campaignId}/vote/${participant.id}`}
|
||||
className="flex-1 text-xs bg-white border border-blue-300 rounded px-2 py-1 text-blue-700 font-mono"
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(`${window.location.origin}/campaigns/${campaignId}/vote/${participant.id}`);
|
||||
setCopiedParticipantId(participant.id);
|
||||
setTimeout(() => setCopiedParticipantId(null), 2000);
|
||||
}}
|
||||
className="inline-flex items-center px-2 py-1 border border-blue-300 rounded text-xs font-medium text-blue-700 bg-white hover:bg-blue-50"
|
||||
title="Copier le lien"
|
||||
>
|
||||
{copiedParticipantId === participant.id ? (
|
||||
<>
|
||||
<svg className="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
Copié !
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<CardDescription className="text-base">
|
||||
{participant.email}
|
||||
</CardDescription>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2 ml-6">
|
||||
<button
|
||||
<div className="flex flex-col sm:flex-row gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setSelectedParticipant(participant);
|
||||
setShowEditModal(true);
|
||||
}}
|
||||
className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||
</svg>
|
||||
Modifier
|
||||
</button>
|
||||
<button
|
||||
✏️ Modifier
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setSelectedParticipant(participant);
|
||||
setShowDeleteModal(true);
|
||||
}}
|
||||
className="inline-flex items-center px-3 py-2 border border-red-300 shadow-sm text-sm leading-4 font-medium rounded-md text-red-700 bg-white hover:bg-red-50"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
Supprimer
|
||||
</button>
|
||||
🗑️ Supprimer
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<Avatar className="w-10 h-10">
|
||||
<AvatarFallback className="bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300">
|
||||
{getInitials(participant.first_name, participant.last_name)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-4 text-sm text-slate-600 dark:text-slate-300">
|
||||
<div className="flex items-center gap-1">
|
||||
<Mail className="w-3 h-3" />
|
||||
{participant.email}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Calendar className="w-3 h-3" />
|
||||
{new Date(participant.created_at).toLocaleDateString('fr-FR')}
|
||||
</div>
|
||||
{participant.has_voted && participant.total_voted_amount !== undefined && (
|
||||
<div className="flex items-center gap-1">
|
||||
<Vote className="w-3 h-3" />
|
||||
{participant.total_voted_amount}€ votés
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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={`${window.location.origin}/campaigns/${campaignId}/vote/${participant.id}`}
|
||||
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)}
|
||||
className="text-xs"
|
||||
>
|
||||
{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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Modals */}
|
||||
{showAddModal && (
|
||||
{/* Modals */}
|
||||
<AddParticipantModal
|
||||
isOpen={showAddModal}
|
||||
onClose={() => setShowAddModal(false)}
|
||||
onSuccess={handleParticipantAdded}
|
||||
campaignId={campaignId}
|
||||
campaignTitle={campaign.title}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showEditModal && selectedParticipant && (
|
||||
<EditParticipantModal
|
||||
isOpen={showEditModal}
|
||||
onClose={() => setShowEditModal(false)}
|
||||
onSuccess={handleParticipantEdited}
|
||||
participant={selectedParticipant}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showDeleteModal && selectedParticipant && (
|
||||
<DeleteParticipantModal
|
||||
isOpen={showDeleteModal}
|
||||
onClose={() => setShowDeleteModal(false)}
|
||||
onSuccess={handleParticipantDeleted}
|
||||
participant={selectedParticipant}
|
||||
/>
|
||||
)}
|
||||
|
||||
{selectedParticipant && (
|
||||
<EditParticipantModal
|
||||
isOpen={showEditModal}
|
||||
onClose={() => setShowEditModal(false)}
|
||||
onSuccess={handleParticipantEdited}
|
||||
participant={selectedParticipant}
|
||||
/>
|
||||
)}
|
||||
|
||||
{selectedParticipant && (
|
||||
<DeleteParticipantModal
|
||||
isOpen={showDeleteModal}
|
||||
onClose={() => setShowDeleteModal(false)}
|
||||
onSuccess={handleParticipantDeleted}
|
||||
participant={selectedParticipant}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useParams } from 'next/navigation';
|
||||
@@ -8,14 +7,18 @@ import { campaignService, propositionService } from '@/lib/services';
|
||||
import AddPropositionModal from '@/components/AddPropositionModal';
|
||||
import EditPropositionModal from '@/components/EditPropositionModal';
|
||||
import DeletePropositionModal from '@/components/DeletePropositionModal';
|
||||
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 { FileText, User, Calendar, Mail } from 'lucide-react';
|
||||
|
||||
// Force dynamic rendering to avoid SSR issues with Supabase
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
export default function CampaignPropositionsPage() {
|
||||
const params = useParams();
|
||||
const campaignId = params.id as string;
|
||||
|
||||
const [campaign, setCampaign] = useState<Campaign | null>(null);
|
||||
const [propositions, setPropositions] = useState<Proposition[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
@@ -25,19 +28,18 @@ export default function CampaignPropositionsPage() {
|
||||
const [selectedProposition, setSelectedProposition] = useState<Proposition | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (campaignId) {
|
||||
loadData();
|
||||
}
|
||||
loadData();
|
||||
}, [campaignId]);
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const [campaignData, propositionsData] = await Promise.all([
|
||||
campaignService.getAll().then(campaigns => campaigns.find(c => c.id === campaignId)),
|
||||
const [campaigns, propositionsData] = await Promise.all([
|
||||
campaignService.getAll(),
|
||||
propositionService.getByCampaign(campaignId)
|
||||
]);
|
||||
|
||||
const campaignData = campaigns.find(c => c.id === campaignId);
|
||||
setCampaign(campaignData || null);
|
||||
setPropositions(propositionsData);
|
||||
} catch (error) {
|
||||
@@ -54,22 +56,29 @@ export default function CampaignPropositionsPage() {
|
||||
|
||||
const handlePropositionEdited = () => {
|
||||
setShowEditModal(false);
|
||||
setSelectedProposition(null);
|
||||
loadData();
|
||||
};
|
||||
|
||||
const handlePropositionDeleted = () => {
|
||||
setShowDeleteModal(false);
|
||||
setSelectedProposition(null);
|
||||
loadData();
|
||||
};
|
||||
|
||||
const getInitials = (firstName: string, lastName: string) => {
|
||||
return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto"></div>
|
||||
<p className="mt-4 text-gray-600">Chargement des propositions...</p>
|
||||
<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 propositions...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -77,173 +86,212 @@ export default function CampaignPropositionsPage() {
|
||||
|
||||
if (!campaign) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h2 className="text-xl font-semibold text-gray-900">Campagne non trouvée</h2>
|
||||
<p className="mt-2 text-gray-600">La campagne demandée n'existe pas.</p>
|
||||
<Link
|
||||
href="/admin"
|
||||
className="mt-4 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700"
|
||||
>
|
||||
Retour à l'administration
|
||||
</Link>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<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 justify-between">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<Link
|
||||
href="/admin"
|
||||
className="inline-flex items-center px-3 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
</svg>
|
||||
Retour
|
||||
</Link>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">Propositions</h1>
|
||||
<p className="mt-2 text-gray-600">
|
||||
Campagne : <span className="font-medium">{campaign.title}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">
|
||||
Propositions
|
||||
</h1>
|
||||
<p className="text-slate-600 dark:text-slate-300 mt-2">
|
||||
{campaign.title}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowAddModal(true)}
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
Ajouter une proposition
|
||||
</button>
|
||||
<Button onClick={() => setShowAddModal(true)} size="lg">
|
||||
✨ Nouvelle proposition
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Propositions */}
|
||||
{/* 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 ? (
|
||||
<div className="text-center py-12">
|
||||
<svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
<h3 className="mt-2 text-sm font-medium text-gray-900">Aucune proposition</h3>
|
||||
<p className="mt-1 text-sm text-gray-500">Commencez par ajouter votre première proposition.</p>
|
||||
<div className="mt-6">
|
||||
<button
|
||||
onClick={() => setShowAddModal(true)}
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
Ajouter une proposition
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white shadow overflow-hidden sm:rounded-lg">
|
||||
<div className="px-4 py-5 sm:px-6 border-b border-gray-200">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900">
|
||||
Propositions ({propositions.length})
|
||||
<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">
|
||||
<FileText className="w-8 h-8 text-slate-400" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">
|
||||
Aucune proposition
|
||||
</h3>
|
||||
<p className="mt-1 max-w-2xl text-sm text-gray-500">
|
||||
Liste de toutes les propositions pour cette campagne
|
||||
<p className="text-slate-600 dark:text-slate-300 mb-6">
|
||||
Aucune proposition n'a encore été soumise pour cette campagne.
|
||||
</p>
|
||||
</div>
|
||||
<ul className="divide-y divide-gray-200">
|
||||
{propositions.map((proposition) => (
|
||||
<li key={proposition.id} className="px-4 py-6 sm:px-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4 className="text-lg font-medium text-gray-900 mb-2">
|
||||
{proposition.title}
|
||||
</h4>
|
||||
<p className="text-sm text-gray-600 mb-3">
|
||||
<Button onClick={() => setShowAddModal(true)}>
|
||||
Ajouter une proposition
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="grid gap-6">
|
||||
{propositions.map((proposition) => (
|
||||
<Card key={proposition.id} className="hover:shadow-lg transition-shadow duration-200">
|
||||
<CardHeader>
|
||||
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
|
||||
<div className="flex-1">
|
||||
<CardTitle className="text-xl mb-2">{proposition.title}</CardTitle>
|
||||
<CardDescription className="text-base">
|
||||
{proposition.description}
|
||||
</p>
|
||||
<div className="flex items-center space-x-4 text-xs text-gray-500">
|
||||
<span>
|
||||
<strong>Auteur :</strong> {proposition.author_first_name} {proposition.author_last_name}
|
||||
</span>
|
||||
<span>
|
||||
<strong>Email :</strong> {proposition.author_email}
|
||||
</span>
|
||||
<span>
|
||||
<strong>Créée le :</strong> {new Date(proposition.created_at).toLocaleDateString('fr-FR')}
|
||||
</span>
|
||||
</div>
|
||||
</CardDescription>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2 ml-6">
|
||||
<button
|
||||
<div className="flex flex-col sm:flex-row gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setSelectedProposition(proposition);
|
||||
setShowEditModal(true);
|
||||
}}
|
||||
className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||
</svg>
|
||||
Modifier
|
||||
</button>
|
||||
<button
|
||||
✏️ Modifier
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setSelectedProposition(proposition);
|
||||
setShowDeleteModal(true);
|
||||
}}
|
||||
className="inline-flex items-center px-3 py-2 border border-red-300 shadow-sm text-sm leading-4 font-medium rounded-md text-red-700 bg-white hover:bg-red-50"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
Supprimer
|
||||
</button>
|
||||
🗑️ Supprimer
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<Avatar className="w-10 h-10">
|
||||
<AvatarFallback className="bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300">
|
||||
{getInitials(proposition.author_first_name, proposition.author_last_name)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<p className="font-medium text-slate-900 dark:text-slate-100">
|
||||
{proposition.author_first_name} {proposition.author_last_name}
|
||||
</p>
|
||||
<div className="flex items-center gap-4 text-sm text-slate-600 dark:text-slate-300">
|
||||
<div className="flex items-center gap-1">
|
||||
<Mail className="w-3 h-3" />
|
||||
{proposition.author_email}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Calendar className="w-3 h-3" />
|
||||
{new Date(proposition.created_at).toLocaleDateString('fr-FR')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Modals */}
|
||||
{showAddModal && (
|
||||
{/* Modals */}
|
||||
<AddPropositionModal
|
||||
isOpen={showAddModal}
|
||||
onClose={() => setShowAddModal(false)}
|
||||
onSuccess={handlePropositionAdded}
|
||||
campaignId={campaignId}
|
||||
campaignTitle={campaign.title}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showEditModal && selectedProposition && (
|
||||
<EditPropositionModal
|
||||
isOpen={showEditModal}
|
||||
onClose={() => setShowEditModal(false)}
|
||||
onSuccess={handlePropositionEdited}
|
||||
proposition={selectedProposition}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showDeleteModal && selectedProposition && (
|
||||
<DeletePropositionModal
|
||||
isOpen={showDeleteModal}
|
||||
onClose={() => setShowDeleteModal(false)}
|
||||
onSuccess={handlePropositionDeleted}
|
||||
proposition={selectedProposition}
|
||||
/>
|
||||
)}
|
||||
|
||||
{selectedProposition && (
|
||||
<EditPropositionModal
|
||||
isOpen={showEditModal}
|
||||
onClose={() => setShowEditModal(false)}
|
||||
onSuccess={handlePropositionEdited}
|
||||
proposition={selectedProposition}
|
||||
/>
|
||||
)}
|
||||
|
||||
{selectedProposition && (
|
||||
<DeletePropositionModal
|
||||
isOpen={showDeleteModal}
|
||||
onClose={() => setShowDeleteModal(false)}
|
||||
onSuccess={handlePropositionDeleted}
|
||||
proposition={selectedProposition}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { Campaign, CampaignWithStats } from '@/types';
|
||||
@@ -7,8 +6,13 @@ import { campaignService } from '@/lib/services';
|
||||
import CreateCampaignModal from '@/components/CreateCampaignModal';
|
||||
import EditCampaignModal from '@/components/EditCampaignModal';
|
||||
import DeleteCampaignModal from '@/components/DeleteCampaignModal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import Navigation from '@/components/Navigation';
|
||||
|
||||
// Force dynamic rendering to avoid SSR issues with Supabase
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
export default function AdminPage() {
|
||||
@@ -26,9 +30,8 @@ export default function AdminPage() {
|
||||
|
||||
const loadCampaigns = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const campaignsData = await campaignService.getAll();
|
||||
|
||||
// Charger les statistiques pour chaque campagne
|
||||
const campaignsWithStats = await Promise.all(
|
||||
campaignsData.map(async (campaign) => {
|
||||
const stats = await campaignService.getStats(campaign.id);
|
||||
@@ -38,7 +41,6 @@ export default function AdminPage() {
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
setCampaigns(campaignsWithStats);
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement des campagnes:', error);
|
||||
@@ -47,32 +49,6 @@ export default function AdminPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'deposit':
|
||||
return 'bg-blue-100 text-blue-800';
|
||||
case 'voting':
|
||||
return 'bg-green-100 text-green-800';
|
||||
case 'closed':
|
||||
return 'bg-gray-100 text-gray-800';
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-800';
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusText = (status: string) => {
|
||||
switch (status) {
|
||||
case 'deposit':
|
||||
return 'Dépôt de propositions';
|
||||
case 'voting':
|
||||
return 'En cours de vote';
|
||||
case 'closed':
|
||||
return 'Fermé';
|
||||
default:
|
||||
return status;
|
||||
}
|
||||
};
|
||||
|
||||
const handleCampaignCreated = () => {
|
||||
setShowCreateModal(false);
|
||||
loadCampaigns();
|
||||
@@ -80,262 +56,287 @@ export default function AdminPage() {
|
||||
|
||||
const handleCampaignEdited = () => {
|
||||
setShowEditModal(false);
|
||||
setSelectedCampaign(null);
|
||||
loadCampaigns();
|
||||
};
|
||||
|
||||
const handleCampaignDeleted = () => {
|
||||
console.log('handleCampaignDeleted appelé');
|
||||
setShowDeleteModal(false);
|
||||
setSelectedCampaign(null);
|
||||
console.log('Rechargement des campagnes...');
|
||||
loadCampaigns();
|
||||
};
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
const statusConfig = {
|
||||
deposit: { label: 'Dépôt de propositions', variant: 'secondary' as const },
|
||||
voting: { label: 'En cours de vote', variant: 'default' as const },
|
||||
closed: { label: 'Terminée', variant: 'destructive' as const }
|
||||
};
|
||||
const config = statusConfig[status as keyof typeof statusConfig];
|
||||
return <Badge variant={config.variant}>{config.label}</Badge>;
|
||||
};
|
||||
|
||||
const getSpendingTiersDisplay = (tiers: string) => {
|
||||
return tiers.split(',').map(tier => tier.trim()).join('€, ') + '€';
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto"></div>
|
||||
<p className="mt-4 text-gray-600">Chargement des campagnes...</p>
|
||||
<div className="min-h-screen bg-slate-50 dark:bg-slate-900">
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<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 campagnes...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div className="min-h-screen bg-slate-50 dark:bg-slate-900">
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<Navigation />
|
||||
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">Administration</h1>
|
||||
<p className="mt-2 text-gray-600">Gérez vos campagnes de budgets participatifs</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<Link
|
||||
href="/"
|
||||
className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
</svg>
|
||||
Retour
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => setShowCreateModal(true)}
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
Nouvelle campagne
|
||||
</button>
|
||||
<h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">
|
||||
Administration
|
||||
</h1>
|
||||
<p className="text-slate-600 dark:text-slate-300 mt-2">
|
||||
Gérez vos campagnes de budget participatif
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={() => setShowCreateModal(true)} size="lg">
|
||||
✨ Nouvelle campagne
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Campagnes */}
|
||||
{/* 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 Campagnes</p>
|
||||
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{campaigns.length}</p>
|
||||
</div>
|
||||
<div className="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
|
||||
<span className="text-blue-600 dark:text-blue-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">En cours</p>
|
||||
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||
{campaigns.filter(c => c.status === 'voting').length}
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-8 h-8 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center">
|
||||
<span className="text-green-600 dark:text-green-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">Dépôt</p>
|
||||
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||
{campaigns.filter(c => c.status === 'deposit').length}
|
||||
</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>
|
||||
|
||||
<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">Terminées</p>
|
||||
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||
{campaigns.filter(c => c.status === 'closed').length}
|
||||
</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>
|
||||
|
||||
{/* Campaigns List */}
|
||||
{campaigns.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
<h3 className="mt-2 text-sm font-medium text-gray-900">Aucune campagne</h3>
|
||||
<p className="mt-1 text-sm text-gray-500">Commencez par créer votre première campagne.</p>
|
||||
<div className="mt-6">
|
||||
<button
|
||||
onClick={() => setShowCreateModal(true)}
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
Créer une campagne
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white shadow overflow-hidden sm:rounded-lg">
|
||||
<div className="px-4 py-5 sm:px-6 border-b border-gray-200">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900">
|
||||
Campagnes ({campaigns.length})
|
||||
<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">
|
||||
<span className="text-2xl">📋</span>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">
|
||||
Aucune campagne créée
|
||||
</h3>
|
||||
<p className="mt-1 max-w-2xl text-sm text-gray-500">
|
||||
Liste de toutes vos campagnes de budgets participatifs
|
||||
<p className="text-slate-600 dark:text-slate-300 mb-6">
|
||||
Commencez par créer votre première campagne de budget participatif
|
||||
</p>
|
||||
</div>
|
||||
<ul className="divide-y divide-gray-200">
|
||||
{campaigns.map((campaign) => (
|
||||
<li key={campaign.id} className="px-4 py-6 sm:px-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<h3 className="text-lg font-medium text-gray-900">{campaign.title}</h3>
|
||||
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusColor(campaign.status)}`}>
|
||||
{getStatusText(campaign.status)}
|
||||
</span>
|
||||
</div>
|
||||
<Button onClick={() => setShowCreateModal(true)}>
|
||||
Créer une campagne
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="grid gap-6">
|
||||
{campaigns.map((campaign) => (
|
||||
<Card key={campaign.id} className="hover:shadow-lg transition-shadow duration-200">
|
||||
<CardHeader>
|
||||
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<CardTitle className="text-xl">{campaign.title}</CardTitle>
|
||||
{getStatusBadge(campaign.status)}
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-gray-600 mb-4">{campaign.description}</p>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-4">
|
||||
<div className="bg-gray-50 rounded-lg p-3">
|
||||
<div className="flex items-center">
|
||||
<svg className="w-5 h-5 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1" />
|
||||
</svg>
|
||||
<span className="text-sm font-medium text-gray-900">{campaign.budget_per_user}€</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-1">Budget par utilisateur</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-blue-50 rounded-lg p-3">
|
||||
<div className="flex items-center">
|
||||
<svg className="w-5 h-5 text-blue-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
<span className="text-sm font-medium text-blue-900">{campaign.stats.propositions}</span>
|
||||
</div>
|
||||
<p className="text-xs text-blue-600 mt-1">Propositions</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-green-50 rounded-lg p-3">
|
||||
<div className="flex items-center">
|
||||
<svg className="w-5 h-5 text-green-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
<span className="text-sm font-medium text-green-900">{campaign.stats.participants}</span>
|
||||
</div>
|
||||
<p className="text-xs text-green-600 mt-1">Participants</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{campaign.status === 'deposit' && (
|
||||
<div className="mt-4 p-3 bg-blue-50 rounded-lg border border-blue-200">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<h4 className="text-sm font-medium text-blue-900 mb-1">Lien public pour déposer des propositions</h4>
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
type="text"
|
||||
readOnly
|
||||
value={`${window.location.origin}/campaigns/${campaign.id}/propose`}
|
||||
className="flex-1 text-xs bg-white border border-blue-300 rounded px-2 py-1 text-blue-700 font-mono"
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(`${window.location.origin}/campaigns/${campaign.id}/propose`);
|
||||
setCopiedCampaignId(campaign.id);
|
||||
setTimeout(() => setCopiedCampaignId(null), 2000);
|
||||
}}
|
||||
className="inline-flex items-center px-2 py-1 border border-blue-300 rounded text-xs font-medium text-blue-700 bg-white hover:bg-blue-50"
|
||||
title="Copier le lien"
|
||||
>
|
||||
{copiedCampaignId === campaign.id ? (
|
||||
<>
|
||||
<svg className="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
Copié !
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<CardDescription className="text-base">
|
||||
{campaign.description}
|
||||
</CardDescription>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2 ml-6">
|
||||
<button
|
||||
<div className="flex flex-col sm:flex-row gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setSelectedCampaign(campaign);
|
||||
setShowEditModal(true);
|
||||
}}
|
||||
className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||
</svg>
|
||||
Modifier
|
||||
</button>
|
||||
<Link
|
||||
href={`/admin/campaigns/${campaign.id}/propositions`}
|
||||
className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
Propositions
|
||||
</Link>
|
||||
<Link
|
||||
href={`/admin/campaigns/${campaign.id}/participants`}
|
||||
className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
Votants
|
||||
</Link>
|
||||
<button
|
||||
✏️ Modifier
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setSelectedCampaign(campaign);
|
||||
setShowDeleteModal(true);
|
||||
}}
|
||||
className="inline-flex items-center px-3 py-2 border border-red-300 shadow-sm text-sm leading-4 font-medium rounded-md text-red-700 bg-white hover:bg-red-50"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
Supprimer
|
||||
</button>
|
||||
🗑️ Supprimer
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
|
||||
<div className="text-center p-3 bg-slate-50 dark:bg-slate-800 rounded-lg">
|
||||
<p className="text-sm text-slate-600 dark:text-slate-300">Budget par utilisateur</p>
|
||||
<p className="text-lg font-semibold text-slate-900 dark:text-slate-100">{campaign.budget_per_user}€</p>
|
||||
</div>
|
||||
<div className="text-center p-3 bg-slate-50 dark:bg-slate-800 rounded-lg">
|
||||
<p className="text-sm text-slate-600 dark:text-slate-300">Propositions</p>
|
||||
<p className="text-lg font-semibold text-slate-900 dark:text-slate-100">{campaign.stats.propositions}</p>
|
||||
</div>
|
||||
<div className="text-center p-3 bg-slate-50 dark:bg-slate-800 rounded-lg">
|
||||
<p className="text-sm text-slate-600 dark:text-slate-300">Participants</p>
|
||||
<p className="text-lg font-semibold text-slate-900 dark:text-slate-100">{campaign.stats.participants}</p>
|
||||
</div>
|
||||
<div className="text-center p-3 bg-slate-50 dark:bg-slate-800 rounded-lg">
|
||||
<p className="text-sm text-slate-600 dark:text-slate-300">Paliers de dépense</p>
|
||||
<p className="text-sm font-semibold text-slate-900 dark:text-slate-100">{getSpendingTiersDisplay(campaign.spending_tiers)}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Public URL for deposit campaigns */}
|
||||
{campaign.status === 'deposit' && (
|
||||
<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 public pour déposer des propositions
|
||||
</h4>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Input
|
||||
type="text"
|
||||
readOnly
|
||||
value={`${window.location.origin}/campaigns/${campaign.id}/propose`}
|
||||
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={() => {
|
||||
navigator.clipboard.writeText(`${window.location.origin}/campaigns/${campaign.id}/propose`);
|
||||
setCopiedCampaignId(campaign.id);
|
||||
setTimeout(() => setCopiedCampaignId(null), 2000);
|
||||
}}
|
||||
className="text-xs"
|
||||
>
|
||||
{copiedCampaignId === campaign.id ? 'Copié !' : '📋 Copier'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex flex-col sm:flex-row gap-2 mt-4">
|
||||
<Button asChild variant="outline" className="flex-1">
|
||||
<Link href={`/admin/campaigns/${campaign.id}/propositions`}>
|
||||
📝 Propositions ({campaign.stats.propositions})
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" className="flex-1">
|
||||
<Link href={`/admin/campaigns/${campaign.id}/participants`}>
|
||||
👥 Votants ({campaign.stats.participants})
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Modals */}
|
||||
{showCreateModal && (
|
||||
{/* Modals */}
|
||||
<CreateCampaignModal
|
||||
isOpen={showCreateModal}
|
||||
onClose={() => setShowCreateModal(false)}
|
||||
onSuccess={handleCampaignCreated}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showEditModal && selectedCampaign && (
|
||||
<EditCampaignModal
|
||||
isOpen={showEditModal}
|
||||
onClose={() => setShowEditModal(false)}
|
||||
onSuccess={handleCampaignEdited}
|
||||
campaign={selectedCampaign}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showDeleteModal && selectedCampaign && (
|
||||
<DeleteCampaignModal
|
||||
isOpen={showDeleteModal}
|
||||
onClose={() => setShowDeleteModal(false)}
|
||||
onSuccess={handleCampaignDeleted}
|
||||
campaign={selectedCampaign}
|
||||
/>
|
||||
)}
|
||||
|
||||
{selectedCampaign && (
|
||||
<EditCampaignModal
|
||||
isOpen={showEditModal}
|
||||
onClose={() => setShowEditModal(false)}
|
||||
onSuccess={handleCampaignEdited}
|
||||
campaign={selectedCampaign}
|
||||
/>
|
||||
)}
|
||||
|
||||
{selectedCampaign && (
|
||||
<DeleteCampaignModal
|
||||
isOpen={showDeleteModal}
|
||||
onClose={() => setShowDeleteModal(false)}
|
||||
onSuccess={handleCampaignDeleted}
|
||||
campaign={selectedCampaign}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user