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 ? (
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -192,7 +192,9 @@ export default function PublicProposePage() {
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-slate-600 dark:text-slate-300 mb-2">Description</h3>
|
||||
<p className="text-slate-900 dark:text-slate-100 whitespace-pre-wrap">{campaign?.description}</p>
|
||||
<div className="text-slate-900 dark:text-slate-100 whitespace-pre-wrap leading-relaxed">
|
||||
{campaign?.description}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
@@ -187,3 +187,18 @@
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
/* Motif de grille pour le header */
|
||||
.bg-grid-slate-100 {
|
||||
background-image:
|
||||
linear-gradient(rgba(148, 163, 184, 0.1) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(148, 163, 184, 0.1) 1px, transparent 1px);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
|
||||
.bg-grid-slate-800 {
|
||||
background-image:
|
||||
linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
|
||||
@@ -15,6 +15,9 @@ const geistMono = Geist_Mono({
|
||||
export const metadata: Metadata = {
|
||||
title: "Mes budgets participatifs",
|
||||
description: "Votez pour les dépenses de votre collectif",
|
||||
icons: {
|
||||
icon: '/favicon.svg',
|
||||
},
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
|
||||
@@ -1,285 +1,88 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { Campaign } from '@/types';
|
||||
import { campaignService } from '@/lib/services';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { Loader2, CheckCircle, AlertCircle } from 'lucide-react';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
|
||||
// Force dynamic rendering to avoid SSR issues with Supabase
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
export default function ShortProposePage() {
|
||||
export default function ShortProposeRedirect() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const slug = params.slug as string;
|
||||
|
||||
const [campaign, setCampaign] = useState<Campaign | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [success, setSuccess] = useState(false);
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
title: '',
|
||||
description: '',
|
||||
author_first_name: '',
|
||||
author_last_name: '',
|
||||
author_email: ''
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (slug) {
|
||||
loadCampaign();
|
||||
redirectToProposePage();
|
||||
}
|
||||
}, [slug]);
|
||||
|
||||
const loadCampaign = async () => {
|
||||
const redirectToProposePage = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const campaignData = await campaignService.getBySlug(slug);
|
||||
|
||||
if (!campaignData) {
|
||||
// Récupérer la campagne par slug
|
||||
const campaign = await campaignService.getBySlug(slug);
|
||||
|
||||
if (!campaign) {
|
||||
setError('Campagne non trouvée');
|
||||
return;
|
||||
}
|
||||
|
||||
if (campaignData.status !== 'deposit') {
|
||||
if (campaign.status !== 'deposit') {
|
||||
setError('Cette campagne n\'accepte plus de propositions');
|
||||
return;
|
||||
}
|
||||
|
||||
setCampaign(campaignData);
|
||||
// Rediriger vers la route avec l'ID complet
|
||||
const proposeUrl = `/campaigns/${campaign.id}/propose`;
|
||||
router.replace(proposeUrl);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement de la campagne:', error);
|
||||
console.error('Erreur lors de la redirection:', error);
|
||||
setError('Erreur lors du chargement de la campagne');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!campaign) return;
|
||||
|
||||
// Validation basique
|
||||
if (!formData.title.trim() || !formData.description.trim() ||
|
||||
!formData.author_first_name.trim() || !formData.author_last_name.trim() ||
|
||||
!formData.author_email.trim()) {
|
||||
setError('Veuillez remplir tous les champs obligatoires');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validation email basique
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(formData.author_email)) {
|
||||
setError('Veuillez saisir une adresse email valide');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setSubmitting(true);
|
||||
setError('');
|
||||
|
||||
const { propositionService } = await import('@/lib/services');
|
||||
|
||||
await propositionService.create({
|
||||
campaign_id: campaign.id,
|
||||
title: formData.title.trim(),
|
||||
description: formData.description.trim(),
|
||||
author_first_name: formData.author_first_name.trim(),
|
||||
author_last_name: formData.author_last_name.trim(),
|
||||
author_email: formData.author_email.trim()
|
||||
});
|
||||
|
||||
setSuccess(true);
|
||||
setFormData({
|
||||
title: '',
|
||||
description: '',
|
||||
author_first_name: '',
|
||||
author_last_name: '',
|
||||
author_email: ''
|
||||
});
|
||||
|
||||
// Rediriger vers la page de succès après 3 secondes
|
||||
setTimeout(() => {
|
||||
router.push(`/p/${slug}/success`);
|
||||
}, 3000);
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('Erreur lors de la soumission:', error);
|
||||
setError(error.message || 'Erreur lors de la soumission de la proposition');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputChange = (field: string, value: string) => {
|
||||
setFormData(prev => ({ ...prev, [field]: value }));
|
||||
if (error) setError(''); // Effacer l'erreur quand l'utilisateur commence à taper
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-slate-900 dark:to-slate-800 flex items-center justify-center">
|
||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<Loader2 className="w-8 h-8 animate-spin mx-auto mb-4 text-blue-600 dark:text-blue-400" />
|
||||
<p className="text-gray-600 dark:text-gray-400">Chargement de la campagne...</p>
|
||||
<Loader2 className="w-8 h-8 animate-spin mx-auto mb-4 text-indigo-600" />
|
||||
<p className="text-gray-600">Redirection vers la page de dépôt de propositions...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error && !campaign) {
|
||||
if (error) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-slate-900 dark:to-slate-800 flex items-center justify-center">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardContent className="p-6">
|
||||
<div className="text-center">
|
||||
<AlertCircle className="w-12 h-12 text-red-500 mx-auto mb-4" />
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
|
||||
Erreur
|
||||
</h2>
|
||||
<p className="text-gray-600 dark:text-gray-400">{error}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="bg-white rounded-lg shadow-lg p-8 max-w-md mx-auto">
|
||||
<svg className="mx-auto h-12 w-12 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
||||
</svg>
|
||||
<h2 className="mt-4 text-lg font-medium text-gray-900">Erreur</h2>
|
||||
<p className="mt-2 text-sm text-gray-600">{error}</p>
|
||||
<button
|
||||
onClick={() => router.push('/')}
|
||||
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'accueil
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (success) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-slate-900 dark:to-slate-800 flex items-center justify-center">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardContent className="p-6">
|
||||
<div className="text-center">
|
||||
<CheckCircle className="w-12 h-12 text-green-500 mx-auto mb-4" />
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
|
||||
Proposition soumise avec succès !
|
||||
</h2>
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
Votre proposition a été enregistrée. Vous allez être redirigé...
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-slate-900 dark:to-slate-800 py-8 px-4">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<Card className="shadow-lg">
|
||||
<CardHeader className="text-center">
|
||||
<CardTitle className="text-2xl font-bold text-gray-900 dark:text-gray-100">
|
||||
Dépôt de proposition
|
||||
</CardTitle>
|
||||
<CardDescription className="text-lg">
|
||||
{campaign?.title}
|
||||
</CardDescription>
|
||||
{campaign?.description && (
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-2">
|
||||
{campaign.description}
|
||||
</p>
|
||||
)}
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="p-6">
|
||||
{error && (
|
||||
<Alert className="mb-6 border-red-200 bg-red-50 dark:bg-red-900/20 dark:border-red-800">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription className="text-red-700 dark:text-red-300">
|
||||
{error}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="author_first_name">Prénom *</Label>
|
||||
<Input
|
||||
id="author_first_name"
|
||||
value={formData.author_first_name}
|
||||
onChange={(e) => handleInputChange('author_first_name', e.target.value)}
|
||||
placeholder="Votre prénom"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="author_last_name">Nom *</Label>
|
||||
<Input
|
||||
id="author_last_name"
|
||||
value={formData.author_last_name}
|
||||
onChange={(e) => handleInputChange('author_last_name', e.target.value)}
|
||||
placeholder="Votre nom"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="author_email">Email *</Label>
|
||||
<Input
|
||||
id="author_email"
|
||||
type="email"
|
||||
value={formData.author_email}
|
||||
onChange={(e) => handleInputChange('author_email', e.target.value)}
|
||||
placeholder="votre.email@exemple.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="title">Titre de la proposition *</Label>
|
||||
<Input
|
||||
id="title"
|
||||
value={formData.title}
|
||||
onChange={(e) => handleInputChange('title', e.target.value)}
|
||||
placeholder="Titre de votre proposition"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="description">Description *</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
value={formData.description}
|
||||
onChange={(e) => handleInputChange('description', e.target.value)}
|
||||
placeholder="Décrivez votre proposition en détail..."
|
||||
rows={6}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full"
|
||||
disabled={submitting}
|
||||
>
|
||||
{submitting ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
Envoi en cours...
|
||||
</>
|
||||
) : (
|
||||
'Soumettre ma proposition'
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -96,6 +96,8 @@ export default function AuthGuard({ children, requireSuperAdmin = false }: AuthG
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
@@ -218,21 +220,6 @@ export default function AuthGuard({ children, requireSuperAdmin = false }: AuthG
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Barre de navigation admin */}
|
||||
<div className="bg-white border-b px-4 py-2 flex justify-between items-center">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Lock className="h-4 w-4 text-blue-600" />
|
||||
<span className="font-medium text-sm">Administration</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleLogout}
|
||||
>
|
||||
Déconnexion
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
'use client';
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Home, Settings, Users, FileText, ArrowLeft } from 'lucide-react';
|
||||
import { Settings, ArrowLeft } from 'lucide-react';
|
||||
|
||||
interface NavigationProps {
|
||||
showBackButton?: boolean;
|
||||
@@ -11,11 +11,6 @@ interface NavigationProps {
|
||||
}
|
||||
|
||||
export default function Navigation({ showBackButton = false, backUrl = '/' }: NavigationProps) {
|
||||
const pathname = usePathname();
|
||||
|
||||
const isActive = (path: string) => {
|
||||
return pathname === path;
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="mb-6 border-0 shadow-sm">
|
||||
@@ -30,36 +25,23 @@ export default function Navigation({ showBackButton = false, backUrl = '/' }: Na
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<div className="flex items-center space-x-1">
|
||||
<Button
|
||||
asChild
|
||||
variant={isActive('/') ? 'default' : 'ghost'}
|
||||
size="sm"
|
||||
>
|
||||
<Link href="/">
|
||||
<Home className="w-4 h-4 mr-2" />
|
||||
Accueil
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
asChild
|
||||
variant={isActive('/admin') ? 'default' : 'ghost'}
|
||||
size="sm"
|
||||
>
|
||||
<Link href="/admin">
|
||||
<Settings className="w-4 h-4 mr-2" />
|
||||
Administration
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
<h1 className="text-xl font-semibold text-slate-900 dark:text-slate-100">
|
||||
Mes Budgets Participatifs - Admin
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="text-sm text-slate-600 dark:text-slate-300">
|
||||
Mes Budgets Participatifs
|
||||
</div>
|
||||
<Button asChild variant="ghost" size="sm">
|
||||
<Link href="/admin/settings">
|
||||
<Settings className="w-4 h-4 mr-2" />
|
||||
Paramètres
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild variant="ghost" size="sm">
|
||||
<Link href="/api/auth/signout">
|
||||
Déconnexion
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
133
src/components/StatusSwitch.tsx
Normal file
133
src/components/StatusSwitch.tsx
Normal file
@@ -0,0 +1,133 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { FileText, Vote, CheckCircle, Check } from 'lucide-react';
|
||||
|
||||
interface StatusSwitchProps {
|
||||
currentStatus: 'deposit' | 'voting' | 'closed';
|
||||
onStatusChange: (newStatus: 'deposit' | 'voting' | 'closed') => Promise<void>;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const statusConfig = {
|
||||
deposit: {
|
||||
label: 'Dépôt',
|
||||
icon: FileText,
|
||||
color: 'bg-blue-500',
|
||||
hoverColor: 'hover:bg-blue-600',
|
||||
activeColor: 'bg-blue-600',
|
||||
textColor: 'text-blue-600',
|
||||
bgColor: 'bg-blue-50',
|
||||
borderColor: 'border-blue-200'
|
||||
},
|
||||
voting: {
|
||||
label: 'Vote',
|
||||
icon: Vote,
|
||||
color: 'bg-orange-500',
|
||||
hoverColor: 'hover:bg-orange-600',
|
||||
activeColor: 'bg-orange-600',
|
||||
textColor: 'text-orange-600',
|
||||
bgColor: 'bg-orange-50',
|
||||
borderColor: 'border-orange-200'
|
||||
},
|
||||
closed: {
|
||||
label: 'Terminée',
|
||||
icon: CheckCircle,
|
||||
color: 'bg-green-500',
|
||||
hoverColor: 'hover:bg-green-600',
|
||||
activeColor: 'bg-green-600',
|
||||
textColor: 'text-green-600',
|
||||
bgColor: 'bg-green-50',
|
||||
borderColor: 'border-green-200'
|
||||
}
|
||||
};
|
||||
|
||||
export default function StatusSwitch({ currentStatus, onStatusChange, disabled = false }: StatusSwitchProps) {
|
||||
const [localStatus, setLocalStatus] = useState(currentStatus);
|
||||
const [isChanging, setIsChanging] = useState(false);
|
||||
const [showSuccess, setShowSuccess] = useState(false);
|
||||
|
||||
// Synchroniser l'état local avec les props
|
||||
useEffect(() => {
|
||||
setLocalStatus(currentStatus);
|
||||
}, [currentStatus]);
|
||||
|
||||
const handleStatusChange = async (newStatus: 'deposit' | 'voting' | 'closed') => {
|
||||
if (disabled || isChanging || newStatus === localStatus) return;
|
||||
|
||||
setIsChanging(true);
|
||||
try {
|
||||
// Mettre à jour l'état local immédiatement pour un feedback visuel instantané
|
||||
setLocalStatus(newStatus);
|
||||
|
||||
// Appeler la fonction de mise à jour
|
||||
await onStatusChange(newStatus);
|
||||
|
||||
// Afficher la notification de succès
|
||||
setShowSuccess(true);
|
||||
setTimeout(() => setShowSuccess(false), 2000);
|
||||
|
||||
} catch (error) {
|
||||
// En cas d'erreur, revenir à l'état précédent
|
||||
setLocalStatus(currentStatus);
|
||||
console.error('Erreur lors du changement de statut:', error);
|
||||
} finally {
|
||||
setIsChanging(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
{/* Notification de succès */}
|
||||
{showSuccess && (
|
||||
<div className="absolute -top-12 left-1/2 transform -translate-x-1/2 z-10">
|
||||
<div className="bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg flex items-center gap-2 animate-in slide-in-from-top-2 duration-300">
|
||||
<Check className="w-4 h-4" />
|
||||
<span className="text-sm font-medium">Statut mis à jour !</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center bg-slate-100 dark:bg-slate-800 rounded-xl p-1 shadow-inner">
|
||||
{(['deposit', 'voting', 'closed'] as const).map((status, index) => {
|
||||
const config = statusConfig[status];
|
||||
const Icon = config.icon;
|
||||
const isActive = localStatus === status;
|
||||
|
||||
return (
|
||||
<Button
|
||||
key={status}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
disabled={disabled || isChanging}
|
||||
onClick={() => handleStatusChange(status)}
|
||||
className={`
|
||||
relative flex-1 h-10 px-3 rounded-lg transition-all duration-300 ease-out
|
||||
${isActive
|
||||
? `${config.activeColor} text-white shadow-lg transform scale-105`
|
||||
: `${config.hoverColor} ${config.textColor} hover:text-white`
|
||||
}
|
||||
${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
|
||||
${isChanging ? 'animate-pulse' : ''}
|
||||
`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Icon className={`w-4 h-4 transition-transform duration-300 ${isActive ? 'scale-110' : ''}`} />
|
||||
<span className="text-sm font-medium">{config.label}</span>
|
||||
</div>
|
||||
|
||||
{/* Indicateur de progression */}
|
||||
{isActive && (
|
||||
<div className="absolute inset-0 rounded-lg bg-gradient-to-r from-transparent via-white/20 to-transparent animate-pulse" />
|
||||
)}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Effet de brillance au survol */}
|
||||
<div className="absolute inset-0 rounded-xl bg-gradient-to-r from-transparent via-white/10 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user