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

12
public/favicon.svg Normal file
View File

@@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
<!-- Fond de l'urne -->
<rect x="2" y="4" width="12" height="10" rx="1" fill="#3B82F6"/>
<!-- Fente pour voter -->
<rect x="4" y="2" width="8" height="2" rx="1" fill="#3B82F6"/>
<!-- Bulletin de vote -->
<rect x="3" y="6" width="10" height="1" rx="0.5" fill="white" opacity="0.9"/>
<rect x="3" y="8" width="8" height="1" rx="0.5" fill="white" opacity="0.7"/>
<rect x="3" y="10" width="6" height="1" rx="0.5" fill="white" opacity="0.5"/>
<!-- Coche de validation -->
<path d="M5 12l2 2 4-4" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 675 B

12
public/vote-icon.svg Normal file
View File

@@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#3B82F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<!-- Urne de vote -->
<rect x="4" y="6" width="16" height="14" rx="2" ry="2" fill="#EFF6FF" stroke="#3B82F6"/>
<!-- Fente pour voter -->
<rect x="8" y="4" width="8" height="2" rx="1" ry="1" fill="#3B82F6"/>
<!-- Bulletin de vote -->
<rect x="7" y="8" width="10" height="2" rx="1" ry="1" fill="#3B82F6" opacity="0.8"/>
<rect x="7" y="11" width="8" height="2" rx="1" ry="1" fill="#3B82F6" opacity="0.6"/>
<rect x="7" y="14" width="6" height="2" rx="1" ry="1" fill="#3B82F6" opacity="0.4"/>
<!-- Coche de validation -->
<path d="M9 16l2 2 4-4" stroke="#10B981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 805 B

176
src/app/admin/campaigns/[id]/participants/page.tsx
View File

@@ -10,14 +10,13 @@ import DeleteParticipantModal from '@/components/DeleteParticipantModal';
import ImportFileModal from '@/components/ImportFileModal'; import ImportFileModal from '@/components/ImportFileModal';
import SendParticipantEmailModal from '@/components/SendParticipantEmailModal'; import SendParticipantEmailModal from '@/components/SendParticipantEmailModal';
import { Button } from '@/components/ui/button'; 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 { Badge } from '@/components/ui/badge';
import { Avatar, AvatarFallback } from '@/components/ui/avatar'; import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import Navigation from '@/components/Navigation'; import Navigation from '@/components/Navigation';
import AuthGuard from '@/components/AuthGuard'; 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'; 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 ( return (
<div className="min-h-screen bg-slate-50 dark:bg-slate-900"> <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
@@ -179,73 +177,14 @@ function CampaignParticipantsPageContent() {
</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 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 List */}
{participants.length === 0 ? ( {participants.length === 0 ? (
<Card className="border-dashed"> <Card className="border-dashed">
<CardContent className="p-12 text-center"> <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"> <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> </div>
<h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2"> <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">
Aucun participant Aucun participant
@@ -273,9 +212,6 @@ function CampaignParticipantsPageContent() {
{participant.has_voted ? 'A voté' : 'N\'a pas voté'} {participant.has_voted ? 'A voté' : 'N\'a pas voté'}
</Badge> </Badge>
</div> </div>
<CardDescription className="text-base">
{participant.email}
</CardDescription>
</div> </div>
<div className="flex flex-col sm:flex-row gap-2"> <div className="flex flex-col sm:flex-row gap-2">
<Button <Button
@@ -331,62 +267,56 @@ function CampaignParticipantsPageContent() {
{/* Vote Link for voting campaigns */} {/* Vote Link for voting campaigns */}
{campaign.status === 'voting' && ( {campaign.status === 'voting' && (
<Card className="bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800"> <div className="flex items-center space-x-2">
<CardContent className="p-4"> <div className="flex-1 min-w-0">
<div className="flex items-center justify-between"> <div className="text-xs text-blue-700 dark:text-blue-300 mb-1">
<div className="flex-1"> Lien de vote :
<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> </div>
</CardContent> <div className="flex items-center space-x-2">
</Card> <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> </CardContent>
</Card> </Card>
))} ))}

58
src/app/admin/campaigns/[id]/propositions/page.tsx
View File

@@ -10,11 +10,11 @@ import DeletePropositionModal from '@/components/DeletePropositionModal';
import ImportFileModal from '@/components/ImportFileModal'; import ImportFileModal from '@/components/ImportFileModal';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Avatar, AvatarFallback } from '@/components/ui/avatar'; import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import Navigation from '@/components/Navigation'; import Navigation from '@/components/Navigation';
import AuthGuard from '@/components/AuthGuard'; 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'; export const dynamic = 'force-dynamic';
@@ -89,6 +89,8 @@ function CampaignPropositionsPageContent() {
} }
}; };
const getInitials = (firstName: string, lastName: string) => { const getInitials = (firstName: string, lastName: string) => {
return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase(); return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
}; };
@@ -161,57 +163,11 @@ function CampaignPropositionsPageContent() {
</Button> </Button>
</div> </div>
</div> </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 List */}
{propositions.length === 0 ? ( {propositions.length === 0 ? (

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

@@ -3,18 +3,18 @@ import { useState, useEffect } from 'react';
import Link from 'next/link'; import Link from 'next/link';
import { Campaign, CampaignWithStats } from '@/types'; import { Campaign, CampaignWithStats } from '@/types';
import { campaignService } from '@/lib/services'; import { campaignService } from '@/lib/services';
import { authService } from '@/lib/auth';
import CreateCampaignModal from '@/components/CreateCampaignModal'; import CreateCampaignModal from '@/components/CreateCampaignModal';
import EditCampaignModal from '@/components/EditCampaignModal'; import EditCampaignModal from '@/components/EditCampaignModal';
import DeleteCampaignModal from '@/components/DeleteCampaignModal'; import DeleteCampaignModal from '@/components/DeleteCampaignModal';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge'; 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 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'; export const dynamic = 'force-dynamic';
@@ -25,7 +25,7 @@ function AdminPageContent() {
const [showEditModal, setShowEditModal] = useState(false); const [showEditModal, setShowEditModal] = useState(false);
const [showDeleteModal, setShowDeleteModal] = useState(false); const [showDeleteModal, setShowDeleteModal] = useState(false);
const [selectedCampaign, setSelectedCampaign] = useState<Campaign | null>(null); const [selectedCampaign, setSelectedCampaign] = useState<Campaign | null>(null);
const [searchTerm, setSearchTerm] = useState('');
const [copiedCampaignId, setCopiedCampaignId] = useState<string | null>(null); const [copiedCampaignId, setCopiedCampaignId] = useState<string | null>(null);
useEffect(() => { useEffect(() => {
@@ -68,6 +68,23 @@ function AdminPageContent() {
loadCampaigns(); 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) => { const getStatusBadge = (status: string) => {
switch (status) { switch (status) {
case 'deposit': 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) => { const copyToClipboard = async (text: string, campaignId: string) => {
try { 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) { if (loading) {
return ( return (
<div className="min-h-screen bg-slate-50 dark:bg-slate-900"> <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
<div className="container mx-auto px-4 py-8"> <div className="container mx-auto px-4 py-8">
<Navigation />
<div className="flex items-center justify-center h-64"> <div className="flex items-center justify-center h-64">
<div className="text-center"> <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> <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 ( return (
<div className="min-h-screen bg-slate-50 dark:bg-slate-900"> <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
<div className="container mx-auto px-4 py-8"> <div className="container mx-auto px-4 py-8">
<Navigation />
{/* Header */} {/* Header */}
<div className="mb-8"> <div className="mb-10">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4"> <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> <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))]" />
<h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">Administration</h1> <div className="relative p-8">
<p className="text-slate-600 dark:text-slate-300 mt-2">Gérez vos campagnes de budget participatif</p> <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
</div> <div className="space-y-2">
<div className="flex gap-2"> <div className="flex items-center gap-3">
<Button asChild variant="outline" size="lg"> <div className="w-10 h-10 bg-slate-100 dark:bg-slate-800 rounded-xl flex items-center justify-center">
<Link href="/admin/settings"> <svg className="w-5 h-5 text-slate-600 dark:text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<Settings className="w-4 h-4 mr-2" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
Paramètres </svg>
</Link> </div>
</Button> <div>
<Button onClick={() => setShowCreateModal(true)} size="lg"> <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">
<Plus className="w-4 h-4 mr-2" /> Mes Budgets Participatifs
Nouvelle campagne </h1>
</Button> <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> </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 */} {/* Campaigns List */}
{filteredCampaigns.length === 0 ? ( {campaigns.length === 0 ? (
<Card className="border-dashed"> <div className="text-center py-16">
<CardContent className="p-12 text-center"> <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">
<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-10 h-10 text-slate-600 dark:text-slate-400" />
<FolderOpen className="w-8 h-8 text-slate-400" /> </div>
</div> <h3 className="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-3">
<h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2"> Aucune campagne
{searchTerm ? 'Aucune campagne trouvée' : 'Aucune campagne'} </h3>
</h3> <p className="text-slate-600 dark:text-slate-400 mb-8 max-w-md mx-auto">
<p className="text-slate-600 dark:text-slate-300 mb-6"> Créez votre première campagne de budget participatif pour commencer à collecter les idées de votre communauté
{searchTerm </p>
? 'Aucune campagne ne correspond à votre recherche.' <Button
: 'Commencez par créer votre première campagne de budget participatif.' onClick={() => setShowCreateModal(true)}
} size="lg"
</p> className="bg-slate-900 hover:bg-slate-800 text-white shadow-lg hover:shadow-xl transition-all duration-200"
{!searchTerm && ( >
<Button onClick={() => setShowCreateModal(true)}> <Plus className="w-4 h-4 mr-2" />
<Plus className="w-4 h-4 mr-2" /> Créer une campagne
Créer une campagne </Button>
</Button> </div>
)}
</CardContent>
</Card>
) : ( ) : (
<div className="grid gap-6"> <div className="grid gap-6">
{filteredCampaigns.map((campaign) => ( {campaigns.map((campaign) => (
<Card key={campaign.id} className="hover:shadow-lg transition-shadow duration-200"> <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">
<CardHeader> <div className="relative">
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
<div className="flex-1"> <CardHeader className="pb-4">
<div className="flex items-center gap-3 mb-2"> <div className="flex items-start justify-between">
<CardTitle className="text-xl">{campaign.title}</CardTitle> <div className="flex-1 space-y-4">
{getStatusBadge(campaign.status)} <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> </div>
<CardDescription className="text-base">{campaign.description}</CardDescription>
</div> {/* Boutons discrets en haut à droite */}
<div className="flex flex-col sm:flex-row gap-2"> <div className="flex gap-1 ml-4">
<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"
/>
<Button <Button
variant={copiedCampaignId === campaign.id ? "default" : "outline"} variant="ghost"
size="sm" 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={() => { 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> </Button>
</div> </div>
</div> </div>
)} </CardHeader>
{/* Action Buttons */} <CardContent className="pt-0">
<div className="flex flex-col sm:flex-row gap-2 mt-4"> {/* Section actions - même espace pour lien public et statistiques */}
<Button asChild variant="outline" className="flex-1"> <div className="space-y-4">
<Link href={`/admin/campaigns/${campaign.id}/propositions`}> {/* Lien public OU Bouton Statistiques */}
<FileText className="w-4 h-4 mr-2" /> {campaign.status === 'deposit' ? (
Propositions ({campaign.stats.propositions}) /* Lien public pour les campagnes en dépôt */
</Link> <div className="p-3 bg-slate-50 dark:bg-slate-800/30 border border-slate-200 dark:border-slate-700 rounded-lg">
</Button> <div className="flex items-center justify-between">
<Button asChild variant="outline" className="flex-1"> <div className="flex items-center gap-2">
<Link href={`/admin/campaigns/${campaign.id}/participants`}> <svg className="w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<Users className="w-4 h-4 mr-2" /> <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" />
Votants ({campaign.stats.participants}) </svg>
</Link> <span className="text-sm text-slate-600 dark:text-slate-400">Lien public pour déposer une proposition</span>
</Button> </div>
{(campaign.status === 'voting' || campaign.status === 'closed') && ( <div className="flex items-center gap-2">
<Button asChild variant="default" className="flex-1"> <div className="text-xs text-slate-500 dark:text-slate-400 font-mono">
<Link href={`/admin/campaigns/${campaign.id}/stats`}> {`${window.location.origin}/p/${campaign.slug || 'campagne'}`}
<BarChart3 className="w-4 h-4 mr-2" /> </div>
Statistiques <Button
</Link> variant="ghost"
</Button> size="sm"
)} className="h-7 w-7 p-0 text-slate-400 hover:text-slate-600"
</div> onClick={() => {
</CardContent> 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> </Card>
))} ))}
</div> </div>

4
src/app/campaigns/[id]/propose/page.tsx
View File

@@ -192,7 +192,9 @@ export default function PublicProposePage() {
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<h3 className="text-sm font-medium text-slate-600 dark:text-slate-300 mb-2">Description</h3> <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>
</div> </div>
</CardContent> </CardContent>

15
src/app/globals.css
View File

@@ -187,3 +187,18 @@
@apply bg-background text-foreground; @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;
}

3
src/app/layout.tsx
View File

@@ -15,6 +15,9 @@ const geistMono = Geist_Mono({
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Mes budgets participatifs", title: "Mes budgets participatifs",
description: "Votez pour les dépenses de votre collectif", description: "Votez pour les dépenses de votre collectif",
icons: {
icon: '/favicon.svg',
},
}; };
export default function RootLayout({ export default function RootLayout({

269
src/app/p/[slug]/page.tsx
View File

@@ -1,285 +1,88 @@
'use client'; 'use client';
import { useState, useEffect } from 'react'; import { useEffect, useState } from 'react';
import { useParams, useRouter } from 'next/navigation'; import { useParams, useRouter } from 'next/navigation';
import { Campaign } from '@/types';
import { campaignService } from '@/lib/services'; import { campaignService } from '@/lib/services';
import { Button } from '@/components/ui/button'; import { Loader2 } from 'lucide-react';
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';
// Force dynamic rendering to avoid SSR issues with Supabase // Force dynamic rendering to avoid SSR issues with Supabase
export const dynamic = 'force-dynamic'; export const dynamic = 'force-dynamic';
export default function ShortProposePage() { export default function ShortProposeRedirect() {
const params = useParams(); const params = useParams();
const router = useRouter(); const router = useRouter();
const slug = params.slug as string; const slug = params.slug as string;
const [campaign, setCampaign] = useState<Campaign | null>(null);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [submitting, setSubmitting] = useState(false);
const [error, setError] = useState(''); const [error, setError] = useState('');
const [success, setSuccess] = useState(false);
const [formData, setFormData] = useState({
title: '',
description: '',
author_first_name: '',
author_last_name: '',
author_email: ''
});
useEffect(() => { useEffect(() => {
if (slug) { if (slug) {
loadCampaign(); redirectToProposePage();
} }
}, [slug]); }, [slug]);
const loadCampaign = async () => { const redirectToProposePage = async () => {
try { try {
setLoading(true); 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'); setError('Campagne non trouvée');
return; return;
} }
if (campaignData.status !== 'deposit') { if (campaign.status !== 'deposit') {
setError('Cette campagne n\'accepte plus de propositions'); setError('Cette campagne n\'accepte plus de propositions');
return; return;
} }
setCampaign(campaignData); // Rediriger vers la route avec l'ID complet
const proposeUrl = `/campaigns/${campaign.id}/propose`;
router.replace(proposeUrl);
} catch (error) { } 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'); setError('Erreur lors du chargement de la campagne');
} finally { } finally {
setLoading(false); 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) { if (loading) {
return ( 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"> <div className="text-center">
<Loader2 className="w-8 h-8 animate-spin mx-auto mb-4 text-blue-600 dark:text-blue-400" /> <Loader2 className="w-8 h-8 animate-spin mx-auto mb-4 text-indigo-600" />
<p className="text-gray-600 dark:text-gray-400">Chargement de la campagne...</p> <p className="text-gray-600">Redirection vers la page de dépôt de propositions...</p>
</div> </div>
</div> </div>
); );
} }
if (error && !campaign) { if (error) {
return ( 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">
<Card className="w-full max-w-md"> <div className="text-center">
<CardContent className="p-6"> <div className="bg-white rounded-lg shadow-lg p-8 max-w-md mx-auto">
<div className="text-center"> <svg className="mx-auto h-12 w-12 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<AlertCircle className="w-12 h-12 text-red-500 mx-auto mb-4" /> <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" />
<h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2"> </svg>
Erreur <h2 className="mt-4 text-lg font-medium text-gray-900">Erreur</h2>
</h2> <p className="mt-2 text-sm text-gray-600">{error}</p>
<p className="text-gray-600 dark:text-gray-400">{error}</p> <button
</div> onClick={() => router.push('/')}
</CardContent> 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"
</Card> >
Retour à l'accueil
</button>
</div>
</div>
</div> </div>
); );
} }
if (success) { return null;
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>
);
} }

17
src/components/AuthGuard.tsx
View File

@@ -96,6 +96,8 @@ export default function AuthGuard({ children, requireSuperAdmin = false }: AuthG
} }
}; };
if (isLoading) { if (isLoading) {
return ( return (
<div className="min-h-screen flex items-center justify-center"> <div className="min-h-screen flex items-center justify-center">
@@ -218,21 +220,6 @@ export default function AuthGuard({ children, requireSuperAdmin = false }: AuthG
return ( return (
<div> <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} {children}
</div> </div>
); );

50
src/components/Navigation.tsx
View File

@@ -1,9 +1,9 @@
'use client'; 'use client';
import Link from 'next/link'; import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card'; import { Card } from '@/components/ui/card';
import { Home, Settings, Users, FileText, ArrowLeft } from 'lucide-react'; import { Settings, ArrowLeft } from 'lucide-react';
interface NavigationProps { interface NavigationProps {
showBackButton?: boolean; showBackButton?: boolean;
@@ -11,11 +11,6 @@ interface NavigationProps {
} }
export default function Navigation({ showBackButton = false, backUrl = '/' }: NavigationProps) { export default function Navigation({ showBackButton = false, backUrl = '/' }: NavigationProps) {
const pathname = usePathname();
const isActive = (path: string) => {
return pathname === path;
};
return ( return (
<Card className="mb-6 border-0 shadow-sm"> <Card className="mb-6 border-0 shadow-sm">
@@ -30,36 +25,23 @@ export default function Navigation({ showBackButton = false, backUrl = '/' }: Na
</Link> </Link>
</Button> </Button>
)} )}
<h1 className="text-xl font-semibold text-slate-900 dark:text-slate-100">
<div className="flex items-center space-x-1"> Mes Budgets Participatifs - Admin
<Button </h1>
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>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<div className="text-sm text-slate-600 dark:text-slate-300"> <Button asChild variant="ghost" size="sm">
Mes Budgets Participatifs <Link href="/admin/settings">
</div> <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> </div>
</div> </div>

133
src/components/StatusSwitch.tsx Normal file
View 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>
);
}