yannick.leduc/mes-budgets-participatifs
1
1
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

redesign de la page /admin

Browse Source
This commit is contained in:
Yannick Le Duc
2025-08-26 23:39:58 +02:00
parent caf0478e02
commit 4ce52f300f
12 changed files with 577 additions and 685 deletions
Download Patch File Download Diff File Expand all files Collapse all files

513
src/app/admin/page.tsx
View File

@@ -3,18 +3,18 @@ import { useState, useEffect } from 'react';
import Link from 'next/link';
import { Campaign, CampaignWithStats } from '@/types';
import { campaignService } from '@/lib/services';
import { authService } from '@/lib/auth';
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 { Label } from '@/components/ui/label';
import { Progress } from '@/components/ui/progress';
import Navigation from '@/components/Navigation';
import AuthGuard from '@/components/AuthGuard';
import { FolderOpen, Users, FileText, CheckCircle, Clock, Plus, BarChart3, Settings } from 'lucide-react';
import { FolderOpen, Users, FileText, Plus, BarChart3, Settings, Check, Copy } from 'lucide-react';
import StatusSwitch from '@/components/StatusSwitch';
export const dynamic = 'force-dynamic';
@@ -25,7 +25,7 @@ function AdminPageContent() {
const [showEditModal, setShowEditModal] = useState(false);
const [showDeleteModal, setShowDeleteModal] = useState(false);
const [selectedCampaign, setSelectedCampaign] = useState<Campaign | null>(null);
const [searchTerm, setSearchTerm] = useState('');
const [copiedCampaignId, setCopiedCampaignId] = useState<string | null>(null);
useEffect(() => {
@@ -68,6 +68,23 @@ function AdminPageContent() {
loadCampaigns();
};
const handleStatusChange = async (campaignId: string, newStatus: 'deposit' | 'voting' | 'closed') => {
try {
await campaignService.update(campaignId, { status: newStatus });
// Mettre à jour l'état local sans recharger toute la page
setCampaigns(prevCampaigns =>
prevCampaigns.map(campaign =>
campaign.id === campaignId
? { ...campaign, status: newStatus }
: campaign
)
);
} catch (error) {
console.error('Erreur lors du changement de statut:', error);
throw error; // Propager l'erreur pour que le composant puisse la gérer
}
};
const getStatusBadge = (status: string) => {
switch (status) {
case 'deposit':
@@ -81,9 +98,7 @@ function AdminPageContent() {
}
};
const getSpendingTiersDisplay = (tiers: string) => {
return tiers.split(',').map(tier => `${tier.trim()}€`).join(', ');
};
const copyToClipboard = async (text: string, campaignId: string) => {
try {
@@ -108,23 +123,14 @@ function AdminPageContent() {
}
};
const filteredCampaigns = campaigns.filter(campaign =>
campaign.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
campaign.description.toLowerCase().includes(searchTerm.toLowerCase())
);
const stats = {
total: campaigns.length,
deposit: campaigns.filter(c => c.status === 'deposit').length,
voting: campaigns.filter(c => c.status === 'voting').length,
closed: campaigns.filter(c => c.status === 'closed').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 />
<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>
@@ -139,233 +145,284 @@ function AdminPageContent() {
return (
<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 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">Administration</h1>
<p className="text-slate-600 dark:text-slate-300 mt-2">Gérez vos campagnes de budget participatif</p>
</div>
<div className="flex gap-2">
<Button asChild variant="outline" size="lg">
<Link href="/admin/settings">
<Settings className="w-4 h-4 mr-2" />
Paramètres
</Link>
</Button>
<Button onClick={() => setShowCreateModal(true)} size="lg">
<Plus className="w-4 h-4 mr-2" />
Nouvelle campagne
</Button>
{/* Header */}
<div className="mb-10">
<div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-slate-50 via-white to-gray-50 dark:from-slate-800 dark:via-slate-900 dark:to-slate-800 border border-slate-200 dark:border-slate-700">
<div className="absolute inset-0 bg-grid-slate-100 dark:bg-grid-slate-800 [mask-image:linear-gradient(0deg,white,rgba(255,255,255,0.6))] dark:[mask-image:linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.05))]" />
<div className="relative p-8">
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
<div className="space-y-2">
<div className="flex items-center gap-3">
<div className="w-10 h-10 bg-slate-100 dark:bg-slate-800 rounded-xl flex items-center justify-center">
<svg className="w-5 h-5 text-slate-600 dark:text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div>
<h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">
Mes Budgets Participatifs
</h1>
<p className="text-slate-600 dark:text-slate-400 font-medium">Administration</p>
</div>
</div>
<p className="text-slate-600 dark:text-slate-400 max-w-2xl">
Gérez vos campagnes de budget participatif, suivez les votes et analysez les résultats
</p>
</div>
<div className="flex flex-col sm:flex-row gap-3">
<Button
onClick={() => setShowCreateModal(true)}
size="lg"
className="bg-slate-900 hover:bg-slate-800 text-white shadow-lg hover:shadow-xl transition-all duration-200"
>
<Plus className="w-4 h-4 mr-2" />
Nouvelle campagne
</Button>
<div className="flex gap-2">
<Button
asChild
variant="outline"
size="lg"
className="border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 transition-all duration-200"
>
<Link href="/admin/settings">
<Settings className="w-4 h-4 mr-2" />
Paramètres
</Link>
</Button>
<Button
variant="outline"
size="lg"
className="border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 transition-all duration-200"
onClick={async () => {
try {
await authService.signOut();
window.location.href = '/';
} catch (error) {
console.error('Erreur lors de la déconnexion:', error);
}
}}
>
Déconnexion
</Button>
</div>
</div>
</div>
</div>
</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 Campagnes</p>
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{stats.total}</p>
</div>
<div className="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
<FolderOpen 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">En cours</p>
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{stats.voting}</p>
</div>
<div className="w-8 h-8 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center">
<Clock 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">Dépôt</p>
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{stats.deposit}</p>
</div>
<div className="w-8 h-8 bg-yellow-100 dark:bg-yellow-900 rounded-lg flex items-center justify-center">
<FileText className="w-4 h-4 text-yellow-600 dark:text-yellow-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">Terminées</p>
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{stats.closed}</p>
</div>
<div className="w-8 h-8 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center">
<CheckCircle className="w-4 h-4 text-purple-600 dark:text-purple-300" />
</div>
</div>
</CardContent>
</Card>
</div>
{/* Search */}
<div className="mb-6">
<Input
type="text"
placeholder="Rechercher une campagne..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="max-w-md"
/>
</div>
{/* Campaigns List */}
{filteredCampaigns.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">
<FolderOpen className="w-8 h-8 text-slate-400" />
</div>
<h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">
{searchTerm ? 'Aucune campagne trouvée' : 'Aucune campagne'}
</h3>
<p className="text-slate-600 dark:text-slate-300 mb-6">
{searchTerm
? 'Aucune campagne ne correspond à votre recherche.'
: 'Commencez par créer votre première campagne de budget participatif.'
}
</p>
{!searchTerm && (
<Button onClick={() => setShowCreateModal(true)}>
<Plus className="w-4 h-4 mr-2" />
Créer une campagne
</Button>
)}
</CardContent>
</Card>
{campaigns.length === 0 ? (
<div className="text-center py-16">
<div className="w-20 h-20 bg-gradient-to-br from-slate-50 to-gray-100 dark:from-slate-800 dark:to-slate-700 rounded-2xl flex items-center justify-center mx-auto mb-6">
<FolderOpen className="w-10 h-10 text-slate-600 dark:text-slate-400" />
</div>
<h3 className="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-3">
Aucune campagne
</h3>
<p className="text-slate-600 dark:text-slate-400 mb-8 max-w-md mx-auto">
Créez votre première campagne de budget participatif pour commencer à collecter les idées de votre communauté
</p>
<Button
onClick={() => setShowCreateModal(true)}
size="lg"
className="bg-slate-900 hover:bg-slate-800 text-white shadow-lg hover:shadow-xl transition-all duration-200"
>
<Plus className="w-4 h-4 mr-2" />
Créer une campagne
</Button>
</div>
) : (
<div className="grid gap-6">
{filteredCampaigns.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)}
{campaigns.map((campaign) => (
<Card key={campaign.id} className="group hover:shadow-xl hover:shadow-slate-100 dark:hover:shadow-slate-900/20 transition-all duration-300 border-slate-200 dark:border-slate-700 overflow-hidden">
<div className="relative">
<CardHeader className="pb-4">
<div className="flex items-start justify-between">
<div className="flex-1 space-y-4">
<div className="flex items-start gap-3">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-3 mb-2">
<CardTitle className="text-xl font-bold text-slate-900 dark:text-slate-100 group-hover:text-slate-600 dark:group-hover:text-slate-400 transition-colors duration-200">
{campaign.title}
</CardTitle>
</div>
<CardDescription className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed mb-4">
{campaign.description}
</CardDescription>
{/* Status Switch */}
<div className="mb-4">
<StatusSwitch
currentStatus={campaign.status}
onStatusChange={(newStatus) => handleStatusChange(campaign.id, newStatus)}
/>
</div>
</div>
</div>
{/* Stats avec icônes modernes et boutons intégrés */}
<div className="mb-3">
<p className="text-xs text-slate-500 dark:text-slate-400 text-center">
Cliquez sur les éléments pour les gérer
</p>
</div>
<div className="grid grid-cols-3 gap-4 pt-2">
<Button
asChild
variant="ghost"
className="h-auto p-3 bg-slate-50 dark:bg-slate-800/50 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg border-0 group relative"
>
<Link href={`/admin/campaigns/${campaign.id}/propositions`}>
<div className="flex items-center gap-2 w-full">
<div className="w-8 h-8 bg-slate-100 dark:bg-slate-800 rounded-lg flex items-center justify-center">
<FileText className="w-4 h-4 text-slate-600 dark:text-slate-400" />
</div>
<div className="text-left">
<div className="text-lg font-bold text-slate-900 dark:text-slate-100">
{campaign.stats.propositions}
</div>
<div className="text-xs text-slate-500 dark:text-slate-400">Propositions</div>
</div>
<div className="ml-auto opacity-0 group-hover:opacity-100 transition-opacity duration-200">
<svg className="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg>
</div>
</div>
</Link>
</Button>
<Button
asChild
variant="ghost"
className="h-auto p-3 bg-slate-50 dark:bg-slate-800/50 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg border-0 group relative"
>
<Link href={`/admin/campaigns/${campaign.id}/participants`}>
<div className="flex items-center gap-2 w-full">
<div className="w-8 h-8 bg-slate-100 dark:bg-slate-800 rounded-lg flex items-center justify-center">
<Users className="w-4 h-4 text-slate-600 dark:text-slate-400" />
</div>
<div className="text-left">
<div className="text-lg font-bold text-slate-900 dark:text-slate-100">
{campaign.stats.participants}
</div>
<div className="text-xs text-slate-500 dark:text-slate-400">Participants</div>
</div>
<div className="ml-auto opacity-0 group-hover:opacity-100 transition-opacity duration-200">
<svg className="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg>
</div>
</div>
</Link>
</Button>
<div className="flex items-center gap-2 p-3 bg-slate-50 dark:bg-slate-800/50 rounded-lg">
<div className="w-8 h-8 bg-slate-100 dark:bg-slate-800 rounded-lg flex items-center justify-center">
<BarChart3 className="w-4 h-4 text-slate-600 dark:text-slate-400" />
</div>
<div>
<div className="text-lg font-bold text-slate-900 dark:text-slate-100">
{campaign.budget_per_user}€
</div>
<div className="text-xs text-slate-500 dark:text-slate-400">Budget</div>
</div>
</div>
</div>
</div>
<CardDescription className="text-base">{campaign.description}</CardDescription>
</div>
<div className="flex flex-col sm:flex-row gap-2">
<Button
variant="outline"
size="sm"
onClick={() => {
setSelectedCampaign(campaign);
setShowEditModal(true);
}}
>
✏️ Modifier
</Button>
<Button
variant="outline"
size="sm"
onClick={() => {
setSelectedCampaign(campaign);
setShowDeleteModal(true);
}}
>
🗑️ Supprimer
</Button>
</div>
</div>
</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">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">Budget/participant</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">Paliers</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' && (
<div className="mb-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
<h4 className="text-sm font-medium text-blue-900 dark:text-blue-100 mb-2">
Lien public pour le dépôt de propositions :
</h4>
<div className="flex items-center space-x-2">
<Input
type="text"
readOnly
value={`${window.location.origin}/p/${campaign.slug || 'campagne'}`}
className="flex-1 text-sm bg-white dark:bg-slate-800 border-blue-300 dark:border-blue-600 text-blue-700 dark:text-blue-300 font-mono"
/>
{/* Boutons discrets en haut à droite */}
<div className="flex gap-1 ml-4">
<Button
variant={copiedCampaignId === campaign.id ? "default" : "outline"}
variant="ghost"
size="sm"
className="h-8 w-8 p-0 text-slate-400 hover:text-slate-600 hover:bg-slate-100 dark:hover:bg-slate-800"
onClick={() => {
copyToClipboard(`${window.location.origin}/p/${campaign.slug || 'campagne'}`, campaign.id);
setSelectedCampaign(campaign);
setShowEditModal(true);
}}
className="text-xs"
>
{copiedCampaignId === campaign.id ? '✓ Copié !' : 'Copier'}
<svg className="w-4 h-4" 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>
</Button>
<Button
variant="ghost"
size="sm"
className="h-8 w-8 p-0 text-slate-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20"
onClick={() => {
setSelectedCampaign(campaign);
setShowDeleteModal(true);
}}
>
<svg className="w-4 h-4" 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>
</Button>
</div>
</div>
)}
{/* 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`}>
<FileText className="w-4 h-4 mr-2" />
Propositions ({campaign.stats.propositions})
</Link>
</Button>
<Button asChild variant="outline" className="flex-1">
<Link href={`/admin/campaigns/${campaign.id}/participants`}>
<Users className="w-4 h-4 mr-2" />
Votants ({campaign.stats.participants})
</Link>
</Button>
{(campaign.status === 'voting' || campaign.status === 'closed') && (
<Button asChild variant="default" className="flex-1">
<Link href={`/admin/campaigns/${campaign.id}/stats`}>
<BarChart3 className="w-4 h-4 mr-2" />
Statistiques
</Link>
</Button>
)}
</div>
</CardContent>
</CardHeader>
<CardContent className="pt-0">
{/* Section actions - même espace pour lien public et statistiques */}
<div className="space-y-4">
{/* Lien public OU Bouton Statistiques */}
{campaign.status === 'deposit' ? (
/* Lien public pour les campagnes en dépôt */
<div className="p-3 bg-slate-50 dark:bg-slate-800/30 border border-slate-200 dark:border-slate-700 rounded-lg">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<svg className="w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
</svg>
<span className="text-sm text-slate-600 dark:text-slate-400">Lien public pour déposer une proposition</span>
</div>
<div className="flex items-center gap-2">
<div className="text-xs text-slate-500 dark:text-slate-400 font-mono">
{`${window.location.origin}/p/${campaign.slug || 'campagne'}`}
</div>
<Button
variant="ghost"
size="sm"
className="h-7 w-7 p-0 text-slate-400 hover:text-slate-600"
onClick={() => {
copyToClipboard(`${window.location.origin}/p/${campaign.slug || 'campagne'}`, campaign.id);
}}
>
{copiedCampaignId === campaign.id ? (
<Check className="w-3 h-3" />
) : (
<Copy className="w-3 h-3" />
)}
</Button>
</div>
</div>
</div>
) : (campaign.status === 'voting' || campaign.status === 'closed') ? (
/* Bouton Statistiques pour les campagnes en vote/fermées */
<div className="flex justify-center">
<Button asChild variant="outline" className="border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-300">
<Link href={`/admin/campaigns/${campaign.id}/stats`}>
<BarChart3 className="w-4 h-4 mr-2" />
Voir les statistiques
</Link>
</Button>
</div>
) : (
/* Espace vide pour les autres statuts */
<div className="h-12"></div>
)}
</div>
</CardContent>
</div>
</Card>
))}
</div>