Meilleur design via Shadcn/ui
This commit is contained in:
Yannick Le Duc
21
components.json
Normal file
21
components.json
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://ui.shadcn.com/schema.json",
|
||||||
|
"style": "new-york",
|
||||||
|
"rsc": true,
|
||||||
|
"tsx": true,
|
||||||
|
"tailwind": {
|
||||||
|
"config": "",
|
||||||
|
"css": "src/app/globals.css",
|
||||||
|
"baseColor": "slate",
|
||||||
|
"cssVariables": true,
|
||||||
|
"prefix": ""
|
||||||
|
},
|
||||||
|
"aliases": {
|
||||||
|
"components": "@/components",
|
||||||
|
"utils": "@/lib/utils",
|
||||||
|
"ui": "@/components/ui",
|
||||||
|
"lib": "@/lib",
|
||||||
|
"hooks": "@/hooks"
|
||||||
|
},
|
||||||
|
"iconLibrary": "lucide"
|
||||||
|
}
|
||||||
909
package-lock.json
generated
909
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
14
package.json
14
package.json
@@ -11,10 +11,21 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@headlessui/react": "^2.2.7",
|
"@headlessui/react": "^2.2.7",
|
||||||
"@heroicons/react": "^2.2.0",
|
"@heroicons/react": "^2.2.0",
|
||||||
|
"@radix-ui/react-avatar": "^1.1.10",
|
||||||
|
"@radix-ui/react-dialog": "^1.1.15",
|
||||||
|
"@radix-ui/react-label": "^2.1.7",
|
||||||
|
"@radix-ui/react-progress": "^1.1.7",
|
||||||
|
"@radix-ui/react-select": "^2.2.6",
|
||||||
|
"@radix-ui/react-slot": "^1.2.3",
|
||||||
|
"@radix-ui/react-tabs": "^1.1.13",
|
||||||
"@supabase/supabase-js": "^2.56.0",
|
"@supabase/supabase-js": "^2.56.0",
|
||||||
|
"class-variance-authority": "^0.7.1",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"lucide-react": "^0.541.0",
|
||||||
"next": "15.5.0",
|
"next": "15.5.0",
|
||||||
"react": "19.1.0",
|
"react": "19.1.0",
|
||||||
"react-dom": "19.1.0"
|
"react-dom": "19.1.0",
|
||||||
|
"tailwind-merge": "^3.3.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/eslintrc": "^3",
|
"@eslint/eslintrc": "^3",
|
||||||
@@ -25,6 +36,7 @@
|
|||||||
"eslint": "^9",
|
"eslint": "^9",
|
||||||
"eslint-config-next": "15.5.0",
|
"eslint-config-next": "15.5.0",
|
||||||
"tailwindcss": "^4",
|
"tailwindcss": "^4",
|
||||||
|
"tw-animate-css": "^1.3.7",
|
||||||
"typescript": "^5"
|
"typescript": "^5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { useParams } from 'next/navigation';
|
import { useParams } from 'next/navigation';
|
||||||
@@ -8,14 +7,19 @@ import { campaignService, participantService, voteService } from '@/lib/services
|
|||||||
import AddParticipantModal from '@/components/AddParticipantModal';
|
import AddParticipantModal from '@/components/AddParticipantModal';
|
||||||
import EditParticipantModal from '@/components/EditParticipantModal';
|
import EditParticipantModal from '@/components/EditParticipantModal';
|
||||||
import DeleteParticipantModal from '@/components/DeleteParticipantModal';
|
import DeleteParticipantModal from '@/components/DeleteParticipantModal';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import Navigation from '@/components/Navigation';
|
||||||
|
import { Users, User, Calendar, Mail, Vote, Copy, Check } from 'lucide-react';
|
||||||
|
|
||||||
// Force dynamic rendering to avoid SSR issues with Supabase
|
|
||||||
export const dynamic = 'force-dynamic';
|
export const dynamic = 'force-dynamic';
|
||||||
|
|
||||||
export default function CampaignParticipantsPage() {
|
export default function CampaignParticipantsPage() {
|
||||||
const params = useParams();
|
const params = useParams();
|
||||||
const campaignId = params.id as string;
|
const campaignId = params.id as string;
|
||||||
|
|
||||||
const [campaign, setCampaign] = useState<Campaign | null>(null);
|
const [campaign, setCampaign] = useState<Campaign | null>(null);
|
||||||
const [participants, setParticipants] = useState<ParticipantWithVoteStatus[]>([]);
|
const [participants, setParticipants] = useState<ParticipantWithVoteStatus[]>([]);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
@@ -26,20 +30,19 @@ export default function CampaignParticipantsPage() {
|
|||||||
const [copiedParticipantId, setCopiedParticipantId] = useState<string | null>(null);
|
const [copiedParticipantId, setCopiedParticipantId] = useState<string | null>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (campaignId) {
|
loadData();
|
||||||
loadData();
|
|
||||||
}
|
|
||||||
}, [campaignId]);
|
}, [campaignId]);
|
||||||
|
|
||||||
const loadData = async () => {
|
const loadData = async () => {
|
||||||
try {
|
try {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
const [campaigns, participantsWithVoteStatus] = await Promise.all([
|
const [campaigns, participantsWithVoteStatus] = await Promise.all([
|
||||||
campaignService.getAll().then(campaigns => campaigns.find(c => c.id === campaignId)),
|
campaignService.getAll(),
|
||||||
voteService.getParticipantVoteStatus(campaignId)
|
voteService.getParticipantVoteStatus(campaignId)
|
||||||
]);
|
]);
|
||||||
|
|
||||||
setCampaign(campaigns || null);
|
const campaignData = campaigns.find(c => c.id === campaignId);
|
||||||
|
setCampaign(campaignData || null);
|
||||||
setParticipants(participantsWithVoteStatus);
|
setParticipants(participantsWithVoteStatus);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Erreur lors du chargement des données:', error);
|
console.error('Erreur lors du chargement des données:', error);
|
||||||
@@ -55,22 +58,36 @@ export default function CampaignParticipantsPage() {
|
|||||||
|
|
||||||
const handleParticipantEdited = () => {
|
const handleParticipantEdited = () => {
|
||||||
setShowEditModal(false);
|
setShowEditModal(false);
|
||||||
setSelectedParticipant(null);
|
|
||||||
loadData();
|
loadData();
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleParticipantDeleted = () => {
|
const handleParticipantDeleted = () => {
|
||||||
setShowDeleteModal(false);
|
setShowDeleteModal(false);
|
||||||
setSelectedParticipant(null);
|
|
||||||
loadData();
|
loadData();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const getInitials = (firstName: string, lastName: string) => {
|
||||||
|
return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
|
||||||
|
};
|
||||||
|
|
||||||
|
const copyVoteLink = (participantId: string) => {
|
||||||
|
const voteUrl = `${window.location.origin}/campaigns/${campaignId}/vote/${participantId}`;
|
||||||
|
navigator.clipboard.writeText(voteUrl);
|
||||||
|
setCopiedParticipantId(participantId);
|
||||||
|
setTimeout(() => setCopiedParticipantId(null), 2000);
|
||||||
|
};
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
<div className="min-h-screen bg-slate-50 dark:bg-slate-900">
|
||||||
<div className="text-center">
|
<div className="container mx-auto px-4 py-8">
|
||||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto"></div>
|
<Navigation showBackButton backUrl="/admin" />
|
||||||
<p className="mt-4 text-gray-600">Chargement des participants...</p>
|
<div className="flex items-center justify-center h-64">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-slate-900 dark:border-slate-100 mx-auto mb-4"></div>
|
||||||
|
<p className="text-slate-600 dark:text-slate-300">Chargement des participants...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -78,232 +95,277 @@ export default function CampaignParticipantsPage() {
|
|||||||
|
|
||||||
if (!campaign) {
|
if (!campaign) {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
<div className="min-h-screen bg-slate-50 dark:bg-slate-900">
|
||||||
<div className="text-center">
|
<div className="container mx-auto px-4 py-8">
|
||||||
<h2 className="text-xl font-semibold text-gray-900">Campagne non trouvée</h2>
|
<Navigation showBackButton backUrl="/admin" />
|
||||||
<p className="mt-2 text-gray-600">La campagne demandée n'existe pas.</p>
|
<Card className="border-dashed">
|
||||||
<Link
|
<CardContent className="p-12 text-center">
|
||||||
href="/admin"
|
<div className="w-16 h-16 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
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"
|
<span className="text-2xl">❌</span>
|
||||||
>
|
</div>
|
||||||
Retour à l'administration
|
<h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">
|
||||||
</Link>
|
Campagne introuvable
|
||||||
|
</h3>
|
||||||
|
<p className="text-slate-600 dark:text-slate-300 mb-6">
|
||||||
|
La campagne que vous recherchez n'existe pas ou a été supprimée.
|
||||||
|
</p>
|
||||||
|
<Button asChild>
|
||||||
|
<Link href="/admin">Retour à l'administration</Link>
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const votedCount = participants.filter(p => p.has_voted).length;
|
||||||
|
const totalBudget = participants.reduce((sum, p) => sum + (p.total_voted_amount || 0), 0);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50">
|
<div className="min-h-screen bg-slate-50 dark:bg-slate-900">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
<div className="container mx-auto px-4 py-8">
|
||||||
|
<Navigation showBackButton backUrl="/admin" />
|
||||||
|
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="mb-8">
|
<div className="mb-8">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||||
<div>
|
<div>
|
||||||
<div className="flex items-center space-x-4">
|
<h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">
|
||||||
<Link
|
Participants
|
||||||
href="/admin"
|
</h1>
|
||||||
className="inline-flex items-center px-3 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
|
<p className="text-slate-600 dark:text-slate-300 mt-2">
|
||||||
>
|
{campaign.title}
|
||||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
</p>
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
|
||||||
</svg>
|
|
||||||
Retour
|
|
||||||
</Link>
|
|
||||||
<div>
|
|
||||||
<h1 className="text-3xl font-bold text-gray-900">Participants</h1>
|
|
||||||
<p className="mt-2 text-gray-600">
|
|
||||||
Campagne : <span className="font-medium">{campaign.title}</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<button
|
<Button onClick={() => setShowAddModal(true)} size="lg">
|
||||||
onClick={() => setShowAddModal(true)}
|
✨ Nouveau participant
|
||||||
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700"
|
</Button>
|
||||||
>
|
|
||||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
|
||||||
</svg>
|
|
||||||
Ajouter un participant
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Participants */}
|
{/* Stats Overview */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-slate-600 dark:text-slate-300">Total Participants</p>
|
||||||
|
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{participants.length}</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
|
||||||
|
<Users className="w-4 h-4 text-blue-600 dark:text-blue-300" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-slate-600 dark:text-slate-300">Ont voté</p>
|
||||||
|
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{votedCount}</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-8 h-8 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center">
|
||||||
|
<Vote className="w-4 h-4 text-green-600 dark:text-green-300" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-slate-600 dark:text-slate-300">Taux de participation</p>
|
||||||
|
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||||
|
{participants.length > 0 ? Math.round((votedCount / participants.length) * 100) : 0}%
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-8 h-8 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center">
|
||||||
|
<span className="text-purple-600 dark:text-purple-300">📊</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-slate-600 dark:text-slate-300">Budget total voté</p>
|
||||||
|
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{totalBudget}€</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-8 h-8 bg-yellow-100 dark:bg-yellow-900 rounded-lg flex items-center justify-center">
|
||||||
|
<span className="text-yellow-600 dark:text-yellow-300">💰</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Participants List */}
|
||||||
{participants.length === 0 ? (
|
{participants.length === 0 ? (
|
||||||
<div className="text-center py-12">
|
<Card className="border-dashed">
|
||||||
<svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<CardContent className="p-12 text-center">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
<div className="w-16 h-16 bg-slate-100 dark:bg-slate-800 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
</svg>
|
<Users className="w-8 h-8 text-slate-400" />
|
||||||
<h3 className="mt-2 text-sm font-medium text-gray-900">Aucun participant</h3>
|
</div>
|
||||||
<p className="mt-1 text-sm text-gray-500">Commencez par ajouter votre premier participant.</p>
|
<h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">
|
||||||
<div className="mt-6">
|
Aucun participant
|
||||||
<button
|
|
||||||
onClick={() => setShowAddModal(true)}
|
|
||||||
className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
|
|
||||||
>
|
|
||||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
|
||||||
</svg>
|
|
||||||
Ajouter un participant
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="bg-white shadow overflow-hidden sm:rounded-lg">
|
|
||||||
<div className="px-4 py-5 sm:px-6 border-b border-gray-200">
|
|
||||||
<h3 className="text-lg leading-6 font-medium text-gray-900">
|
|
||||||
Participants ({participants.length})
|
|
||||||
</h3>
|
</h3>
|
||||||
<p className="mt-1 max-w-2xl text-sm text-gray-500">
|
<p className="text-slate-600 dark:text-slate-300 mb-6">
|
||||||
Liste de tous les participants pour cette campagne
|
Aucun participant n'a encore été ajouté à cette campagne.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
<Button onClick={() => setShowAddModal(true)}>
|
||||||
<ul className="divide-y divide-gray-200">
|
Ajouter un participant
|
||||||
{participants.map((participant) => (
|
</Button>
|
||||||
<li key={participant.id} className="px-4 py-6 sm:px-6">
|
</CardContent>
|
||||||
<div className="flex items-center justify-between">
|
</Card>
|
||||||
<div className="flex-1 min-w-0">
|
) : (
|
||||||
<div className="flex items-center space-x-3 mb-2">
|
<div className="grid gap-6">
|
||||||
<div className="flex-shrink-0">
|
{participants.map((participant) => (
|
||||||
<div className="h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center">
|
<Card key={participant.id} className="hover:shadow-lg transition-shadow duration-200">
|
||||||
<span className="text-sm font-medium text-indigo-600">
|
<CardHeader>
|
||||||
{participant.first_name.charAt(0)}{participant.last_name.charAt(0)}
|
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
|
||||||
</span>
|
<div className="flex-1">
|
||||||
</div>
|
<div className="flex items-center gap-3 mb-2">
|
||||||
</div>
|
<CardTitle className="text-xl">
|
||||||
<div>
|
{participant.first_name} {participant.last_name}
|
||||||
<h4 className="text-lg font-medium text-gray-900">
|
</CardTitle>
|
||||||
{participant.first_name} {participant.last_name}
|
<Badge variant={participant.has_voted ? 'default' : 'secondary'}>
|
||||||
</h4>
|
|
||||||
<p className="text-sm text-gray-600">
|
|
||||||
{participant.email}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-4 text-xs text-gray-500">
|
|
||||||
<span>
|
|
||||||
<strong>Inscrit le :</strong> {new Date(participant.created_at).toLocaleDateString('fr-FR')}
|
|
||||||
</span>
|
|
||||||
<span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
|
|
||||||
participant.has_voted
|
|
||||||
? 'bg-green-100 text-green-800'
|
|
||||||
: 'bg-yellow-100 text-yellow-800'
|
|
||||||
}`}>
|
|
||||||
{participant.has_voted ? 'A voté' : 'N\'a pas voté'}
|
{participant.has_voted ? 'A voté' : 'N\'a pas voté'}
|
||||||
</span>
|
</Badge>
|
||||||
{participant.has_voted && participant.total_voted_amount && (
|
|
||||||
<span>
|
|
||||||
<strong>Total voté :</strong> {participant.total_voted_amount}€
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
<CardDescription className="text-base">
|
||||||
{campaign?.status === 'voting' && (
|
{participant.email}
|
||||||
<div className="mt-4 p-3 bg-blue-50 rounded-lg border border-blue-200">
|
</CardDescription>
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div className="flex-1">
|
|
||||||
<h4 className="text-sm font-medium text-blue-900 mb-1">Lien de vote personnel</h4>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
readOnly
|
|
||||||
value={`${window.location.origin}/campaigns/${campaignId}/vote/${participant.id}`}
|
|
||||||
className="flex-1 text-xs bg-white border border-blue-300 rounded px-2 py-1 text-blue-700 font-mono"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
navigator.clipboard.writeText(`${window.location.origin}/campaigns/${campaignId}/vote/${participant.id}`);
|
|
||||||
setCopiedParticipantId(participant.id);
|
|
||||||
setTimeout(() => setCopiedParticipantId(null), 2000);
|
|
||||||
}}
|
|
||||||
className="inline-flex items-center px-2 py-1 border border-blue-300 rounded text-xs font-medium text-blue-700 bg-white hover:bg-blue-50"
|
|
||||||
title="Copier le lien"
|
|
||||||
>
|
|
||||||
{copiedParticipantId === participant.id ? (
|
|
||||||
<>
|
|
||||||
<svg className="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
||||||
</svg>
|
|
||||||
Copié !
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
|
||||||
</svg>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center space-x-2 ml-6">
|
<div className="flex flex-col sm:flex-row gap-2">
|
||||||
<button
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setSelectedParticipant(participant);
|
setSelectedParticipant(participant);
|
||||||
setShowEditModal(true);
|
setShowEditModal(true);
|
||||||
}}
|
}}
|
||||||
className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
|
||||||
>
|
>
|
||||||
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
✏️ Modifier
|
||||||
<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" />
|
</Button>
|
||||||
</svg>
|
<Button
|
||||||
Modifier
|
variant="outline"
|
||||||
</button>
|
size="sm"
|
||||||
<button
|
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setSelectedParticipant(participant);
|
setSelectedParticipant(participant);
|
||||||
setShowDeleteModal(true);
|
setShowDeleteModal(true);
|
||||||
}}
|
}}
|
||||||
className="inline-flex items-center px-3 py-2 border border-red-300 shadow-sm text-sm leading-4 font-medium rounded-md text-red-700 bg-white hover:bg-red-50"
|
|
||||||
>
|
>
|
||||||
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
🗑️ Supprimer
|
||||||
<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" />
|
</Button>
|
||||||
</svg>
|
|
||||||
Supprimer
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</CardHeader>
|
||||||
))}
|
|
||||||
</ul>
|
<CardContent>
|
||||||
|
<div className="flex items-center gap-4 mb-4">
|
||||||
|
<Avatar className="w-10 h-10">
|
||||||
|
<AvatarFallback className="bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300">
|
||||||
|
{getInitials(participant.first_name, participant.last_name)}
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-4 text-sm text-slate-600 dark:text-slate-300">
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Mail className="w-3 h-3" />
|
||||||
|
{participant.email}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Calendar className="w-3 h-3" />
|
||||||
|
{new Date(participant.created_at).toLocaleDateString('fr-FR')}
|
||||||
|
</div>
|
||||||
|
{participant.has_voted && participant.total_voted_amount !== undefined && (
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Vote className="w-3 h-3" />
|
||||||
|
{participant.total_voted_amount}€ votés
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Vote Link for voting campaigns */}
|
||||||
|
{campaign.status === 'voting' && (
|
||||||
|
<Card className="bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800">
|
||||||
|
<CardContent className="p-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex-1">
|
||||||
|
<h4 className="text-sm font-medium text-blue-900 dark:text-blue-100 mb-1">
|
||||||
|
Lien de vote personnel
|
||||||
|
</h4>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
readOnly
|
||||||
|
value={`${window.location.origin}/campaigns/${campaignId}/vote/${participant.id}`}
|
||||||
|
className="flex-1 text-xs bg-white dark:bg-slate-800 border-blue-300 dark:border-blue-600 text-blue-700 dark:text-blue-300 font-mono"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => copyVoteLink(participant.id)}
|
||||||
|
className="text-xs"
|
||||||
|
>
|
||||||
|
{copiedParticipantId === participant.id ? (
|
||||||
|
<>
|
||||||
|
<Check className="w-3 h-3 mr-1" />
|
||||||
|
Copié !
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Copy className="w-3 h-3 mr-1" />
|
||||||
|
Copier
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Modals */}
|
{/* Modals */}
|
||||||
{showAddModal && (
|
|
||||||
<AddParticipantModal
|
<AddParticipantModal
|
||||||
isOpen={showAddModal}
|
isOpen={showAddModal}
|
||||||
onClose={() => setShowAddModal(false)}
|
onClose={() => setShowAddModal(false)}
|
||||||
onSuccess={handleParticipantAdded}
|
onSuccess={handleParticipantAdded}
|
||||||
campaignId={campaignId}
|
campaignId={campaignId}
|
||||||
campaignTitle={campaign.title}
|
|
||||||
/>
|
/>
|
||||||
)}
|
|
||||||
|
{selectedParticipant && (
|
||||||
{showEditModal && selectedParticipant && (
|
<EditParticipantModal
|
||||||
<EditParticipantModal
|
isOpen={showEditModal}
|
||||||
isOpen={showEditModal}
|
onClose={() => setShowEditModal(false)}
|
||||||
onClose={() => setShowEditModal(false)}
|
onSuccess={handleParticipantEdited}
|
||||||
onSuccess={handleParticipantEdited}
|
participant={selectedParticipant}
|
||||||
participant={selectedParticipant}
|
/>
|
||||||
/>
|
)}
|
||||||
)}
|
|
||||||
|
{selectedParticipant && (
|
||||||
{showDeleteModal && selectedParticipant && (
|
<DeleteParticipantModal
|
||||||
<DeleteParticipantModal
|
isOpen={showDeleteModal}
|
||||||
isOpen={showDeleteModal}
|
onClose={() => setShowDeleteModal(false)}
|
||||||
onClose={() => setShowDeleteModal(false)}
|
onSuccess={handleParticipantDeleted}
|
||||||
onSuccess={handleParticipantDeleted}
|
participant={selectedParticipant}
|
||||||
participant={selectedParticipant}
|
/>
|
||||||
/>
|
)}
|
||||||
)}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { useParams } from 'next/navigation';
|
import { useParams } from 'next/navigation';
|
||||||
@@ -8,14 +7,18 @@ import { campaignService, propositionService } from '@/lib/services';
|
|||||||
import AddPropositionModal from '@/components/AddPropositionModal';
|
import AddPropositionModal from '@/components/AddPropositionModal';
|
||||||
import EditPropositionModal from '@/components/EditPropositionModal';
|
import EditPropositionModal from '@/components/EditPropositionModal';
|
||||||
import DeletePropositionModal from '@/components/DeletePropositionModal';
|
import DeletePropositionModal from '@/components/DeletePropositionModal';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||||||
|
import Navigation from '@/components/Navigation';
|
||||||
|
import { FileText, User, Calendar, Mail } from 'lucide-react';
|
||||||
|
|
||||||
// Force dynamic rendering to avoid SSR issues with Supabase
|
|
||||||
export const dynamic = 'force-dynamic';
|
export const dynamic = 'force-dynamic';
|
||||||
|
|
||||||
export default function CampaignPropositionsPage() {
|
export default function CampaignPropositionsPage() {
|
||||||
const params = useParams();
|
const params = useParams();
|
||||||
const campaignId = params.id as string;
|
const campaignId = params.id as string;
|
||||||
|
|
||||||
const [campaign, setCampaign] = useState<Campaign | null>(null);
|
const [campaign, setCampaign] = useState<Campaign | null>(null);
|
||||||
const [propositions, setPropositions] = useState<Proposition[]>([]);
|
const [propositions, setPropositions] = useState<Proposition[]>([]);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
@@ -25,19 +28,18 @@ export default function CampaignPropositionsPage() {
|
|||||||
const [selectedProposition, setSelectedProposition] = useState<Proposition | null>(null);
|
const [selectedProposition, setSelectedProposition] = useState<Proposition | null>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (campaignId) {
|
loadData();
|
||||||
loadData();
|
|
||||||
}
|
|
||||||
}, [campaignId]);
|
}, [campaignId]);
|
||||||
|
|
||||||
const loadData = async () => {
|
const loadData = async () => {
|
||||||
try {
|
try {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
const [campaignData, propositionsData] = await Promise.all([
|
const [campaigns, propositionsData] = await Promise.all([
|
||||||
campaignService.getAll().then(campaigns => campaigns.find(c => c.id === campaignId)),
|
campaignService.getAll(),
|
||||||
propositionService.getByCampaign(campaignId)
|
propositionService.getByCampaign(campaignId)
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
const campaignData = campaigns.find(c => c.id === campaignId);
|
||||||
setCampaign(campaignData || null);
|
setCampaign(campaignData || null);
|
||||||
setPropositions(propositionsData);
|
setPropositions(propositionsData);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
@@ -54,22 +56,29 @@ export default function CampaignPropositionsPage() {
|
|||||||
|
|
||||||
const handlePropositionEdited = () => {
|
const handlePropositionEdited = () => {
|
||||||
setShowEditModal(false);
|
setShowEditModal(false);
|
||||||
setSelectedProposition(null);
|
|
||||||
loadData();
|
loadData();
|
||||||
};
|
};
|
||||||
|
|
||||||
const handlePropositionDeleted = () => {
|
const handlePropositionDeleted = () => {
|
||||||
setShowDeleteModal(false);
|
setShowDeleteModal(false);
|
||||||
setSelectedProposition(null);
|
|
||||||
loadData();
|
loadData();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const getInitials = (firstName: string, lastName: string) => {
|
||||||
|
return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
|
||||||
|
};
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
<div className="min-h-screen bg-slate-50 dark:bg-slate-900">
|
||||||
<div className="text-center">
|
<div className="container mx-auto px-4 py-8">
|
||||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto"></div>
|
<Navigation showBackButton backUrl="/admin" />
|
||||||
<p className="mt-4 text-gray-600">Chargement des propositions...</p>
|
<div className="flex items-center justify-center h-64">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-slate-900 dark:border-slate-100 mx-auto mb-4"></div>
|
||||||
|
<p className="text-slate-600 dark:text-slate-300">Chargement des propositions...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -77,173 +86,212 @@ export default function CampaignPropositionsPage() {
|
|||||||
|
|
||||||
if (!campaign) {
|
if (!campaign) {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
<div className="min-h-screen bg-slate-50 dark:bg-slate-900">
|
||||||
<div className="text-center">
|
<div className="container mx-auto px-4 py-8">
|
||||||
<h2 className="text-xl font-semibold text-gray-900">Campagne non trouvée</h2>
|
<Navigation showBackButton backUrl="/admin" />
|
||||||
<p className="mt-2 text-gray-600">La campagne demandée n'existe pas.</p>
|
<Card className="border-dashed">
|
||||||
<Link
|
<CardContent className="p-12 text-center">
|
||||||
href="/admin"
|
<div className="w-16 h-16 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
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"
|
<span className="text-2xl">❌</span>
|
||||||
>
|
</div>
|
||||||
Retour à l'administration
|
<h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">
|
||||||
</Link>
|
Campagne introuvable
|
||||||
|
</h3>
|
||||||
|
<p className="text-slate-600 dark:text-slate-300 mb-6">
|
||||||
|
La campagne que vous recherchez n'existe pas ou a été supprimée.
|
||||||
|
</p>
|
||||||
|
<Button asChild>
|
||||||
|
<Link href="/admin">Retour à l'administration</Link>
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50">
|
<div className="min-h-screen bg-slate-50 dark:bg-slate-900">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
<div className="container mx-auto px-4 py-8">
|
||||||
|
<Navigation showBackButton backUrl="/admin" />
|
||||||
|
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="mb-8">
|
<div className="mb-8">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||||
<div>
|
<div>
|
||||||
<div className="flex items-center space-x-4">
|
<h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">
|
||||||
<Link
|
Propositions
|
||||||
href="/admin"
|
</h1>
|
||||||
className="inline-flex items-center px-3 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
|
<p className="text-slate-600 dark:text-slate-300 mt-2">
|
||||||
>
|
{campaign.title}
|
||||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
</p>
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
|
||||||
</svg>
|
|
||||||
Retour
|
|
||||||
</Link>
|
|
||||||
<div>
|
|
||||||
<h1 className="text-3xl font-bold text-gray-900">Propositions</h1>
|
|
||||||
<p className="mt-2 text-gray-600">
|
|
||||||
Campagne : <span className="font-medium">{campaign.title}</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<button
|
<Button onClick={() => setShowAddModal(true)} size="lg">
|
||||||
onClick={() => setShowAddModal(true)}
|
✨ Nouvelle proposition
|
||||||
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700"
|
</Button>
|
||||||
>
|
|
||||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
|
||||||
</svg>
|
|
||||||
Ajouter une proposition
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Propositions */}
|
{/* Stats Overview */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-slate-600 dark:text-slate-300">Total Propositions</p>
|
||||||
|
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{propositions.length}</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
|
||||||
|
<FileText className="w-4 h-4 text-blue-600 dark:text-blue-300" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-slate-600 dark:text-slate-300">Auteurs uniques</p>
|
||||||
|
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||||
|
{new Set(propositions.map(p => p.author_email)).size}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-8 h-8 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center">
|
||||||
|
<User className="w-4 h-4 text-green-600 dark:text-green-300" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-slate-600 dark:text-slate-300">Statut Campagne</p>
|
||||||
|
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||||
|
{campaign.status === 'deposit' ? 'Dépôt' :
|
||||||
|
campaign.status === 'voting' ? 'Vote' : 'Terminée'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-8 h-8 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center">
|
||||||
|
<span className="text-purple-600 dark:text-purple-300">📊</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Propositions List */}
|
||||||
{propositions.length === 0 ? (
|
{propositions.length === 0 ? (
|
||||||
<div className="text-center py-12">
|
<Card className="border-dashed">
|
||||||
<svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<CardContent className="p-12 text-center">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
<div className="w-16 h-16 bg-slate-100 dark:bg-slate-800 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
</svg>
|
<FileText className="w-8 h-8 text-slate-400" />
|
||||||
<h3 className="mt-2 text-sm font-medium text-gray-900">Aucune proposition</h3>
|
</div>
|
||||||
<p className="mt-1 text-sm text-gray-500">Commencez par ajouter votre première proposition.</p>
|
<h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">
|
||||||
<div className="mt-6">
|
Aucune proposition
|
||||||
<button
|
|
||||||
onClick={() => setShowAddModal(true)}
|
|
||||||
className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
|
|
||||||
>
|
|
||||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
|
||||||
</svg>
|
|
||||||
Ajouter une proposition
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="bg-white shadow overflow-hidden sm:rounded-lg">
|
|
||||||
<div className="px-4 py-5 sm:px-6 border-b border-gray-200">
|
|
||||||
<h3 className="text-lg leading-6 font-medium text-gray-900">
|
|
||||||
Propositions ({propositions.length})
|
|
||||||
</h3>
|
</h3>
|
||||||
<p className="mt-1 max-w-2xl text-sm text-gray-500">
|
<p className="text-slate-600 dark:text-slate-300 mb-6">
|
||||||
Liste de toutes les propositions pour cette campagne
|
Aucune proposition n'a encore été soumise pour cette campagne.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
<Button onClick={() => setShowAddModal(true)}>
|
||||||
<ul className="divide-y divide-gray-200">
|
Ajouter une proposition
|
||||||
{propositions.map((proposition) => (
|
</Button>
|
||||||
<li key={proposition.id} className="px-4 py-6 sm:px-6">
|
</CardContent>
|
||||||
<div className="flex items-center justify-between">
|
</Card>
|
||||||
<div className="flex-1 min-w-0">
|
) : (
|
||||||
<h4 className="text-lg font-medium text-gray-900 mb-2">
|
<div className="grid gap-6">
|
||||||
{proposition.title}
|
{propositions.map((proposition) => (
|
||||||
</h4>
|
<Card key={proposition.id} className="hover:shadow-lg transition-shadow duration-200">
|
||||||
<p className="text-sm text-gray-600 mb-3">
|
<CardHeader>
|
||||||
|
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
|
||||||
|
<div className="flex-1">
|
||||||
|
<CardTitle className="text-xl mb-2">{proposition.title}</CardTitle>
|
||||||
|
<CardDescription className="text-base">
|
||||||
{proposition.description}
|
{proposition.description}
|
||||||
</p>
|
</CardDescription>
|
||||||
<div className="flex items-center space-x-4 text-xs text-gray-500">
|
|
||||||
<span>
|
|
||||||
<strong>Auteur :</strong> {proposition.author_first_name} {proposition.author_last_name}
|
|
||||||
</span>
|
|
||||||
<span>
|
|
||||||
<strong>Email :</strong> {proposition.author_email}
|
|
||||||
</span>
|
|
||||||
<span>
|
|
||||||
<strong>Créée le :</strong> {new Date(proposition.created_at).toLocaleDateString('fr-FR')}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center space-x-2 ml-6">
|
<div className="flex flex-col sm:flex-row gap-2">
|
||||||
<button
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setSelectedProposition(proposition);
|
setSelectedProposition(proposition);
|
||||||
setShowEditModal(true);
|
setShowEditModal(true);
|
||||||
}}
|
}}
|
||||||
className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
|
||||||
>
|
>
|
||||||
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
✏️ Modifier
|
||||||
<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" />
|
</Button>
|
||||||
</svg>
|
<Button
|
||||||
Modifier
|
variant="outline"
|
||||||
</button>
|
size="sm"
|
||||||
<button
|
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setSelectedProposition(proposition);
|
setSelectedProposition(proposition);
|
||||||
setShowDeleteModal(true);
|
setShowDeleteModal(true);
|
||||||
}}
|
}}
|
||||||
className="inline-flex items-center px-3 py-2 border border-red-300 shadow-sm text-sm leading-4 font-medium rounded-md text-red-700 bg-white hover:bg-red-50"
|
|
||||||
>
|
>
|
||||||
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
🗑️ Supprimer
|
||||||
<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" />
|
</Button>
|
||||||
</svg>
|
|
||||||
Supprimer
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</CardHeader>
|
||||||
))}
|
|
||||||
</ul>
|
<CardContent>
|
||||||
|
<div className="flex items-center gap-4 mb-4">
|
||||||
|
<Avatar className="w-10 h-10">
|
||||||
|
<AvatarFallback className="bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300">
|
||||||
|
{getInitials(proposition.author_first_name, proposition.author_last_name)}
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<div className="flex-1">
|
||||||
|
<p className="font-medium text-slate-900 dark:text-slate-100">
|
||||||
|
{proposition.author_first_name} {proposition.author_last_name}
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-4 text-sm text-slate-600 dark:text-slate-300">
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Mail className="w-3 h-3" />
|
||||||
|
{proposition.author_email}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Calendar className="w-3 h-3" />
|
||||||
|
{new Date(proposition.created_at).toLocaleDateString('fr-FR')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Modals */}
|
{/* Modals */}
|
||||||
{showAddModal && (
|
|
||||||
<AddPropositionModal
|
<AddPropositionModal
|
||||||
isOpen={showAddModal}
|
isOpen={showAddModal}
|
||||||
onClose={() => setShowAddModal(false)}
|
onClose={() => setShowAddModal(false)}
|
||||||
onSuccess={handlePropositionAdded}
|
onSuccess={handlePropositionAdded}
|
||||||
campaignId={campaignId}
|
campaignId={campaignId}
|
||||||
campaignTitle={campaign.title}
|
|
||||||
/>
|
/>
|
||||||
)}
|
|
||||||
|
{selectedProposition && (
|
||||||
{showEditModal && selectedProposition && (
|
<EditPropositionModal
|
||||||
<EditPropositionModal
|
isOpen={showEditModal}
|
||||||
isOpen={showEditModal}
|
onClose={() => setShowEditModal(false)}
|
||||||
onClose={() => setShowEditModal(false)}
|
onSuccess={handlePropositionEdited}
|
||||||
onSuccess={handlePropositionEdited}
|
proposition={selectedProposition}
|
||||||
proposition={selectedProposition}
|
/>
|
||||||
/>
|
)}
|
||||||
)}
|
|
||||||
|
{selectedProposition && (
|
||||||
{showDeleteModal && selectedProposition && (
|
<DeletePropositionModal
|
||||||
<DeletePropositionModal
|
isOpen={showDeleteModal}
|
||||||
isOpen={showDeleteModal}
|
onClose={() => setShowDeleteModal(false)}
|
||||||
onClose={() => setShowDeleteModal(false)}
|
onSuccess={handlePropositionDeleted}
|
||||||
onSuccess={handlePropositionDeleted}
|
proposition={selectedProposition}
|
||||||
proposition={selectedProposition}
|
/>
|
||||||
/>
|
)}
|
||||||
)}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState, useEffect } from 'react';
|
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';
|
||||||
@@ -7,8 +6,13 @@ import { campaignService } from '@/lib/services';
|
|||||||
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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Progress } from '@/components/ui/progress';
|
||||||
|
import Navigation from '@/components/Navigation';
|
||||||
|
|
||||||
// Force dynamic rendering to avoid SSR issues with Supabase
|
|
||||||
export const dynamic = 'force-dynamic';
|
export const dynamic = 'force-dynamic';
|
||||||
|
|
||||||
export default function AdminPage() {
|
export default function AdminPage() {
|
||||||
@@ -26,9 +30,8 @@ export default function AdminPage() {
|
|||||||
|
|
||||||
const loadCampaigns = async () => {
|
const loadCampaigns = async () => {
|
||||||
try {
|
try {
|
||||||
|
setLoading(true);
|
||||||
const campaignsData = await campaignService.getAll();
|
const campaignsData = await campaignService.getAll();
|
||||||
|
|
||||||
// Charger les statistiques pour chaque campagne
|
|
||||||
const campaignsWithStats = await Promise.all(
|
const campaignsWithStats = await Promise.all(
|
||||||
campaignsData.map(async (campaign) => {
|
campaignsData.map(async (campaign) => {
|
||||||
const stats = await campaignService.getStats(campaign.id);
|
const stats = await campaignService.getStats(campaign.id);
|
||||||
@@ -38,7 +41,6 @@ export default function AdminPage() {
|
|||||||
};
|
};
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
setCampaigns(campaignsWithStats);
|
setCampaigns(campaignsWithStats);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Erreur lors du chargement des campagnes:', error);
|
console.error('Erreur lors du chargement des campagnes:', error);
|
||||||
@@ -47,32 +49,6 @@ export default function AdminPage() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const getStatusColor = (status: string) => {
|
|
||||||
switch (status) {
|
|
||||||
case 'deposit':
|
|
||||||
return 'bg-blue-100 text-blue-800';
|
|
||||||
case 'voting':
|
|
||||||
return 'bg-green-100 text-green-800';
|
|
||||||
case 'closed':
|
|
||||||
return 'bg-gray-100 text-gray-800';
|
|
||||||
default:
|
|
||||||
return 'bg-gray-100 text-gray-800';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getStatusText = (status: string) => {
|
|
||||||
switch (status) {
|
|
||||||
case 'deposit':
|
|
||||||
return 'Dépôt de propositions';
|
|
||||||
case 'voting':
|
|
||||||
return 'En cours de vote';
|
|
||||||
case 'closed':
|
|
||||||
return 'Fermé';
|
|
||||||
default:
|
|
||||||
return status;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCampaignCreated = () => {
|
const handleCampaignCreated = () => {
|
||||||
setShowCreateModal(false);
|
setShowCreateModal(false);
|
||||||
loadCampaigns();
|
loadCampaigns();
|
||||||
@@ -80,262 +56,287 @@ export default function AdminPage() {
|
|||||||
|
|
||||||
const handleCampaignEdited = () => {
|
const handleCampaignEdited = () => {
|
||||||
setShowEditModal(false);
|
setShowEditModal(false);
|
||||||
setSelectedCampaign(null);
|
|
||||||
loadCampaigns();
|
loadCampaigns();
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleCampaignDeleted = () => {
|
const handleCampaignDeleted = () => {
|
||||||
console.log('handleCampaignDeleted appelé');
|
|
||||||
setShowDeleteModal(false);
|
setShowDeleteModal(false);
|
||||||
setSelectedCampaign(null);
|
|
||||||
console.log('Rechargement des campagnes...');
|
|
||||||
loadCampaigns();
|
loadCampaigns();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const getStatusBadge = (status: string) => {
|
||||||
|
const statusConfig = {
|
||||||
|
deposit: { label: 'Dépôt de propositions', variant: 'secondary' as const },
|
||||||
|
voting: { label: 'En cours de vote', variant: 'default' as const },
|
||||||
|
closed: { label: 'Terminée', variant: 'destructive' as const }
|
||||||
|
};
|
||||||
|
const config = statusConfig[status as keyof typeof statusConfig];
|
||||||
|
return <Badge variant={config.variant}>{config.label}</Badge>;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getSpendingTiersDisplay = (tiers: string) => {
|
||||||
|
return tiers.split(',').map(tier => tier.trim()).join('€, ') + '€';
|
||||||
|
};
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
<div className="min-h-screen bg-slate-50 dark:bg-slate-900">
|
||||||
<div className="text-center">
|
<div className="container mx-auto px-4 py-8">
|
||||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto"></div>
|
<div className="flex items-center justify-center h-64">
|
||||||
<p className="mt-4 text-gray-600">Chargement des campagnes...</p>
|
<div className="text-center">
|
||||||
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-slate-900 dark:border-slate-100 mx-auto mb-4"></div>
|
||||||
|
<p className="text-slate-600 dark:text-slate-300">Chargement des campagnes...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50">
|
<div className="min-h-screen bg-slate-50 dark:bg-slate-900">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
<div className="container mx-auto px-4 py-8">
|
||||||
|
<Navigation />
|
||||||
|
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="mb-8">
|
<div className="mb-8">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-3xl font-bold text-gray-900">Administration</h1>
|
<h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">
|
||||||
<p className="mt-2 text-gray-600">Gérez vos campagnes de budgets participatifs</p>
|
Administration
|
||||||
</div>
|
</h1>
|
||||||
<div className="flex items-center space-x-4">
|
<p className="text-slate-600 dark:text-slate-300 mt-2">
|
||||||
<Link
|
Gérez vos campagnes de budget participatif
|
||||||
href="/"
|
</p>
|
||||||
className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
|
|
||||||
>
|
|
||||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
|
||||||
</svg>
|
|
||||||
Retour
|
|
||||||
</Link>
|
|
||||||
<button
|
|
||||||
onClick={() => setShowCreateModal(true)}
|
|
||||||
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700"
|
|
||||||
>
|
|
||||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
|
||||||
</svg>
|
|
||||||
Nouvelle campagne
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
<Button onClick={() => setShowCreateModal(true)} size="lg">
|
||||||
|
✨ Nouvelle campagne
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Campagnes */}
|
{/* Stats Overview */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-slate-600 dark:text-slate-300">Total Campagnes</p>
|
||||||
|
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{campaigns.length}</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
|
||||||
|
<span className="text-blue-600 dark:text-blue-300">📊</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-slate-600 dark:text-slate-300">En cours</p>
|
||||||
|
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||||
|
{campaigns.filter(c => c.status === 'voting').length}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-8 h-8 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center">
|
||||||
|
<span className="text-green-600 dark:text-green-300">🗳️</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-slate-600 dark:text-slate-300">Dépôt</p>
|
||||||
|
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||||
|
{campaigns.filter(c => c.status === 'deposit').length}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-8 h-8 bg-yellow-100 dark:bg-yellow-900 rounded-lg flex items-center justify-center">
|
||||||
|
<span className="text-yellow-600 dark:text-yellow-300">📝</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-slate-600 dark:text-slate-300">Terminées</p>
|
||||||
|
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||||
|
{campaigns.filter(c => c.status === 'closed').length}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-8 h-8 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center">
|
||||||
|
<span className="text-purple-600 dark:text-purple-300">✅</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Campaigns List */}
|
||||||
{campaigns.length === 0 ? (
|
{campaigns.length === 0 ? (
|
||||||
<div className="text-center py-12">
|
<Card className="border-dashed">
|
||||||
<svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<CardContent className="p-12 text-center">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
<div className="w-16 h-16 bg-slate-100 dark:bg-slate-800 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
</svg>
|
<span className="text-2xl">📋</span>
|
||||||
<h3 className="mt-2 text-sm font-medium text-gray-900">Aucune campagne</h3>
|
</div>
|
||||||
<p className="mt-1 text-sm text-gray-500">Commencez par créer votre première campagne.</p>
|
<h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">
|
||||||
<div className="mt-6">
|
Aucune campagne créée
|
||||||
<button
|
|
||||||
onClick={() => setShowCreateModal(true)}
|
|
||||||
className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
|
|
||||||
>
|
|
||||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
|
||||||
</svg>
|
|
||||||
Créer une campagne
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="bg-white shadow overflow-hidden sm:rounded-lg">
|
|
||||||
<div className="px-4 py-5 sm:px-6 border-b border-gray-200">
|
|
||||||
<h3 className="text-lg leading-6 font-medium text-gray-900">
|
|
||||||
Campagnes ({campaigns.length})
|
|
||||||
</h3>
|
</h3>
|
||||||
<p className="mt-1 max-w-2xl text-sm text-gray-500">
|
<p className="text-slate-600 dark:text-slate-300 mb-6">
|
||||||
Liste de toutes vos campagnes de budgets participatifs
|
Commencez par créer votre première campagne de budget participatif
|
||||||
</p>
|
</p>
|
||||||
</div>
|
<Button onClick={() => setShowCreateModal(true)}>
|
||||||
<ul className="divide-y divide-gray-200">
|
Créer une campagne
|
||||||
{campaigns.map((campaign) => (
|
</Button>
|
||||||
<li key={campaign.id} className="px-4 py-6 sm:px-6">
|
</CardContent>
|
||||||
<div className="flex items-center justify-between">
|
</Card>
|
||||||
<div className="flex-1 min-w-0">
|
) : (
|
||||||
<div className="flex items-center justify-between mb-3">
|
<div className="grid gap-6">
|
||||||
<div className="flex items-center space-x-3">
|
{campaigns.map((campaign) => (
|
||||||
<h3 className="text-lg font-medium text-gray-900">{campaign.title}</h3>
|
<Card key={campaign.id} className="hover:shadow-lg transition-shadow duration-200">
|
||||||
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusColor(campaign.status)}`}>
|
<CardHeader>
|
||||||
{getStatusText(campaign.status)}
|
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
|
||||||
</span>
|
<div className="flex-1">
|
||||||
</div>
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
<CardTitle className="text-xl">{campaign.title}</CardTitle>
|
||||||
|
{getStatusBadge(campaign.status)}
|
||||||
</div>
|
</div>
|
||||||
|
<CardDescription className="text-base">
|
||||||
<p className="text-sm text-gray-600 mb-4">{campaign.description}</p>
|
{campaign.description}
|
||||||
|
</CardDescription>
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-4">
|
|
||||||
<div className="bg-gray-50 rounded-lg p-3">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<svg className="w-5 h-5 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1" />
|
|
||||||
</svg>
|
|
||||||
<span className="text-sm font-medium text-gray-900">{campaign.budget_per_user}€</span>
|
|
||||||
</div>
|
|
||||||
<p className="text-xs text-gray-500 mt-1">Budget par utilisateur</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-blue-50 rounded-lg p-3">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<svg className="w-5 h-5 text-blue-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
||||||
</svg>
|
|
||||||
<span className="text-sm font-medium text-blue-900">{campaign.stats.propositions}</span>
|
|
||||||
</div>
|
|
||||||
<p className="text-xs text-blue-600 mt-1">Propositions</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-green-50 rounded-lg p-3">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<svg className="w-5 h-5 text-green-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
|
||||||
</svg>
|
|
||||||
<span className="text-sm font-medium text-green-900">{campaign.stats.participants}</span>
|
|
||||||
</div>
|
|
||||||
<p className="text-xs text-green-600 mt-1">Participants</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
{campaign.status === 'deposit' && (
|
|
||||||
<div className="mt-4 p-3 bg-blue-50 rounded-lg border border-blue-200">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div className="flex-1">
|
|
||||||
<h4 className="text-sm font-medium text-blue-900 mb-1">Lien public pour déposer des propositions</h4>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
readOnly
|
|
||||||
value={`${window.location.origin}/campaigns/${campaign.id}/propose`}
|
|
||||||
className="flex-1 text-xs bg-white border border-blue-300 rounded px-2 py-1 text-blue-700 font-mono"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
navigator.clipboard.writeText(`${window.location.origin}/campaigns/${campaign.id}/propose`);
|
|
||||||
setCopiedCampaignId(campaign.id);
|
|
||||||
setTimeout(() => setCopiedCampaignId(null), 2000);
|
|
||||||
}}
|
|
||||||
className="inline-flex items-center px-2 py-1 border border-blue-300 rounded text-xs font-medium text-blue-700 bg-white hover:bg-blue-50"
|
|
||||||
title="Copier le lien"
|
|
||||||
>
|
|
||||||
{copiedCampaignId === campaign.id ? (
|
|
||||||
<>
|
|
||||||
<svg className="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
||||||
</svg>
|
|
||||||
Copié !
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
|
||||||
</svg>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="flex flex-col sm:flex-row gap-2">
|
||||||
<div className="flex items-center space-x-2 ml-6">
|
<Button
|
||||||
<button
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setSelectedCampaign(campaign);
|
setSelectedCampaign(campaign);
|
||||||
setShowEditModal(true);
|
setShowEditModal(true);
|
||||||
}}
|
}}
|
||||||
className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
|
||||||
>
|
>
|
||||||
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
✏️ Modifier
|
||||||
<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" />
|
</Button>
|
||||||
</svg>
|
<Button
|
||||||
Modifier
|
variant="outline"
|
||||||
</button>
|
size="sm"
|
||||||
<Link
|
|
||||||
href={`/admin/campaigns/${campaign.id}/propositions`}
|
|
||||||
className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
|
||||||
>
|
|
||||||
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
||||||
</svg>
|
|
||||||
Propositions
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
href={`/admin/campaigns/${campaign.id}/participants`}
|
|
||||||
className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
|
||||||
>
|
|
||||||
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
|
||||||
</svg>
|
|
||||||
Votants
|
|
||||||
</Link>
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setSelectedCampaign(campaign);
|
setSelectedCampaign(campaign);
|
||||||
setShowDeleteModal(true);
|
setShowDeleteModal(true);
|
||||||
}}
|
}}
|
||||||
className="inline-flex items-center px-3 py-2 border border-red-300 shadow-sm text-sm leading-4 font-medium rounded-md text-red-700 bg-white hover:bg-red-50"
|
|
||||||
>
|
>
|
||||||
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
🗑️ Supprimer
|
||||||
<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" />
|
</Button>
|
||||||
</svg>
|
|
||||||
Supprimer
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</CardHeader>
|
||||||
))}
|
|
||||||
</ul>
|
<CardContent>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
|
||||||
|
<div className="text-center p-3 bg-slate-50 dark:bg-slate-800 rounded-lg">
|
||||||
|
<p className="text-sm text-slate-600 dark:text-slate-300">Budget par utilisateur</p>
|
||||||
|
<p className="text-lg font-semibold text-slate-900 dark:text-slate-100">{campaign.budget_per_user}€</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center p-3 bg-slate-50 dark:bg-slate-800 rounded-lg">
|
||||||
|
<p className="text-sm text-slate-600 dark:text-slate-300">Propositions</p>
|
||||||
|
<p className="text-lg font-semibold text-slate-900 dark:text-slate-100">{campaign.stats.propositions}</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center p-3 bg-slate-50 dark:bg-slate-800 rounded-lg">
|
||||||
|
<p className="text-sm text-slate-600 dark:text-slate-300">Participants</p>
|
||||||
|
<p className="text-lg font-semibold text-slate-900 dark:text-slate-100">{campaign.stats.participants}</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center p-3 bg-slate-50 dark:bg-slate-800 rounded-lg">
|
||||||
|
<p className="text-sm text-slate-600 dark:text-slate-300">Paliers de dépense</p>
|
||||||
|
<p className="text-sm font-semibold text-slate-900 dark:text-slate-100">{getSpendingTiersDisplay(campaign.spending_tiers)}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Public URL for deposit campaigns */}
|
||||||
|
{campaign.status === 'deposit' && (
|
||||||
|
<Card className="bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800">
|
||||||
|
<CardContent className="p-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex-1">
|
||||||
|
<h4 className="text-sm font-medium text-blue-900 dark:text-blue-100 mb-1">
|
||||||
|
Lien public pour déposer des propositions
|
||||||
|
</h4>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
readOnly
|
||||||
|
value={`${window.location.origin}/campaigns/${campaign.id}/propose`}
|
||||||
|
className="flex-1 text-xs bg-white dark:bg-slate-800 border-blue-300 dark:border-blue-600 text-blue-700 dark:text-blue-300 font-mono"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => {
|
||||||
|
navigator.clipboard.writeText(`${window.location.origin}/campaigns/${campaign.id}/propose`);
|
||||||
|
setCopiedCampaignId(campaign.id);
|
||||||
|
setTimeout(() => setCopiedCampaignId(null), 2000);
|
||||||
|
}}
|
||||||
|
className="text-xs"
|
||||||
|
>
|
||||||
|
{copiedCampaignId === campaign.id ? 'Copié !' : '📋 Copier'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Action Buttons */}
|
||||||
|
<div className="flex flex-col sm:flex-row gap-2 mt-4">
|
||||||
|
<Button asChild variant="outline" className="flex-1">
|
||||||
|
<Link href={`/admin/campaigns/${campaign.id}/propositions`}>
|
||||||
|
📝 Propositions ({campaign.stats.propositions})
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
<Button asChild variant="outline" className="flex-1">
|
||||||
|
<Link href={`/admin/campaigns/${campaign.id}/participants`}>
|
||||||
|
👥 Votants ({campaign.stats.participants})
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Modals */}
|
{/* Modals */}
|
||||||
{showCreateModal && (
|
|
||||||
<CreateCampaignModal
|
<CreateCampaignModal
|
||||||
isOpen={showCreateModal}
|
isOpen={showCreateModal}
|
||||||
onClose={() => setShowCreateModal(false)}
|
onClose={() => setShowCreateModal(false)}
|
||||||
onSuccess={handleCampaignCreated}
|
onSuccess={handleCampaignCreated}
|
||||||
/>
|
/>
|
||||||
)}
|
|
||||||
|
{selectedCampaign && (
|
||||||
{showEditModal && selectedCampaign && (
|
<EditCampaignModal
|
||||||
<EditCampaignModal
|
isOpen={showEditModal}
|
||||||
isOpen={showEditModal}
|
onClose={() => setShowEditModal(false)}
|
||||||
onClose={() => setShowEditModal(false)}
|
onSuccess={handleCampaignEdited}
|
||||||
onSuccess={handleCampaignEdited}
|
campaign={selectedCampaign}
|
||||||
campaign={selectedCampaign}
|
/>
|
||||||
/>
|
)}
|
||||||
)}
|
|
||||||
|
{selectedCampaign && (
|
||||||
{showDeleteModal && selectedCampaign && (
|
<DeleteCampaignModal
|
||||||
<DeleteCampaignModal
|
isOpen={showDeleteModal}
|
||||||
isOpen={showDeleteModal}
|
onClose={() => setShowDeleteModal(false)}
|
||||||
onClose={() => setShowDeleteModal(false)}
|
onSuccess={handleCampaignDeleted}
|
||||||
onSuccess={handleCampaignDeleted}
|
campaign={selectedCampaign}
|
||||||
campaign={selectedCampaign}
|
/>
|
||||||
/>
|
)}
|
||||||
)}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,28 +1,46 @@
|
|||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
|
@import "tw-animate-css";
|
||||||
|
|
||||||
:root {
|
@custom-variant dark (&:is(.dark *));
|
||||||
--background: #ffffff;
|
|
||||||
--foreground: #171717;
|
|
||||||
}
|
|
||||||
|
|
||||||
@theme inline {
|
@theme inline {
|
||||||
--color-background: var(--background);
|
--color-background: var(--background);
|
||||||
--color-foreground: var(--foreground);
|
--color-foreground: var(--foreground);
|
||||||
--font-sans: var(--font-geist-sans);
|
--font-sans: var(--font-geist-sans);
|
||||||
--font-mono: var(--font-geist-mono);
|
--font-mono: var(--font-geist-mono);
|
||||||
}
|
--color-sidebar-ring: var(--sidebar-ring);
|
||||||
|
--color-sidebar-border: var(--sidebar-border);
|
||||||
@media (prefers-color-scheme: dark) {
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||||
:root {
|
--color-sidebar-accent: var(--sidebar-accent);
|
||||||
--background: #0a0a0a;
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||||
--foreground: #ededed;
|
--color-sidebar-primary: var(--sidebar-primary);
|
||||||
}
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||||
}
|
--color-sidebar: var(--sidebar);
|
||||||
|
--color-chart-5: var(--chart-5);
|
||||||
body {
|
--color-chart-4: var(--chart-4);
|
||||||
background: var(--background);
|
--color-chart-3: var(--chart-3);
|
||||||
color: var(--foreground);
|
--color-chart-2: var(--chart-2);
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
--color-chart-1: var(--chart-1);
|
||||||
|
--color-ring: var(--ring);
|
||||||
|
--color-input: var(--input);
|
||||||
|
--color-border: var(--border);
|
||||||
|
--color-destructive: var(--destructive);
|
||||||
|
--color-accent-foreground: var(--accent-foreground);
|
||||||
|
--color-accent: var(--accent);
|
||||||
|
--color-muted-foreground: var(--muted-foreground);
|
||||||
|
--color-muted: var(--muted);
|
||||||
|
--color-secondary-foreground: var(--secondary-foreground);
|
||||||
|
--color-secondary: var(--secondary);
|
||||||
|
--color-primary-foreground: var(--primary-foreground);
|
||||||
|
--color-primary: var(--primary);
|
||||||
|
--color-popover-foreground: var(--popover-foreground);
|
||||||
|
--color-popover: var(--popover);
|
||||||
|
--color-card-foreground: var(--card-foreground);
|
||||||
|
--color-card: var(--card);
|
||||||
|
--radius-sm: calc(var(--radius) - 4px);
|
||||||
|
--radius-md: calc(var(--radius) - 2px);
|
||||||
|
--radius-lg: var(--radius);
|
||||||
|
--radius-xl: calc(var(--radius) + 4px);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Styles personnalisés pour le slider */
|
/* Styles personnalisés pour le slider */
|
||||||
@@ -89,3 +107,81 @@ body {
|
|||||||
transform: scale(1.1);
|
transform: scale(1.1);
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--radius: 0.625rem;
|
||||||
|
--background: oklch(1 0 0);
|
||||||
|
--foreground: oklch(0.129 0.042 264.695);
|
||||||
|
--card: oklch(1 0 0);
|
||||||
|
--card-foreground: oklch(0.129 0.042 264.695);
|
||||||
|
--popover: oklch(1 0 0);
|
||||||
|
--popover-foreground: oklch(0.129 0.042 264.695);
|
||||||
|
--primary: oklch(0.208 0.042 265.755);
|
||||||
|
--primary-foreground: oklch(0.984 0.003 247.858);
|
||||||
|
--secondary: oklch(0.968 0.007 247.896);
|
||||||
|
--secondary-foreground: oklch(0.208 0.042 265.755);
|
||||||
|
--muted: oklch(0.968 0.007 247.896);
|
||||||
|
--muted-foreground: oklch(0.554 0.046 257.417);
|
||||||
|
--accent: oklch(0.968 0.007 247.896);
|
||||||
|
--accent-foreground: oklch(0.208 0.042 265.755);
|
||||||
|
--destructive: oklch(0.577 0.245 27.325);
|
||||||
|
--border: oklch(0.929 0.013 255.508);
|
||||||
|
--input: oklch(0.929 0.013 255.508);
|
||||||
|
--ring: oklch(0.704 0.04 256.788);
|
||||||
|
--chart-1: oklch(0.646 0.222 41.116);
|
||||||
|
--chart-2: oklch(0.6 0.118 184.704);
|
||||||
|
--chart-3: oklch(0.398 0.07 227.392);
|
||||||
|
--chart-4: oklch(0.828 0.189 84.429);
|
||||||
|
--chart-5: oklch(0.769 0.188 70.08);
|
||||||
|
--sidebar: oklch(0.984 0.003 247.858);
|
||||||
|
--sidebar-foreground: oklch(0.129 0.042 264.695);
|
||||||
|
--sidebar-primary: oklch(0.208 0.042 265.755);
|
||||||
|
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
|
||||||
|
--sidebar-accent: oklch(0.968 0.007 247.896);
|
||||||
|
--sidebar-accent-foreground: oklch(0.208 0.042 265.755);
|
||||||
|
--sidebar-border: oklch(0.929 0.013 255.508);
|
||||||
|
--sidebar-ring: oklch(0.704 0.04 256.788);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--background: oklch(0.129 0.042 264.695);
|
||||||
|
--foreground: oklch(0.984 0.003 247.858);
|
||||||
|
--card: oklch(0.208 0.042 265.755);
|
||||||
|
--card-foreground: oklch(0.984 0.003 247.858);
|
||||||
|
--popover: oklch(0.208 0.042 265.755);
|
||||||
|
--popover-foreground: oklch(0.984 0.003 247.858);
|
||||||
|
--primary: oklch(0.929 0.013 255.508);
|
||||||
|
--primary-foreground: oklch(0.208 0.042 265.755);
|
||||||
|
--secondary: oklch(0.279 0.041 260.031);
|
||||||
|
--secondary-foreground: oklch(0.984 0.003 247.858);
|
||||||
|
--muted: oklch(0.279 0.041 260.031);
|
||||||
|
--muted-foreground: oklch(0.704 0.04 256.788);
|
||||||
|
--accent: oklch(0.279 0.041 260.031);
|
||||||
|
--accent-foreground: oklch(0.984 0.003 247.858);
|
||||||
|
--destructive: oklch(0.704 0.191 22.216);
|
||||||
|
--border: oklch(1 0 0 / 10%);
|
||||||
|
--input: oklch(1 0 0 / 15%);
|
||||||
|
--ring: oklch(0.551 0.027 264.364);
|
||||||
|
--chart-1: oklch(0.488 0.243 264.376);
|
||||||
|
--chart-2: oklch(0.696 0.17 162.48);
|
||||||
|
--chart-3: oklch(0.769 0.188 70.08);
|
||||||
|
--chart-4: oklch(0.627 0.265 303.9);
|
||||||
|
--chart-5: oklch(0.645 0.246 16.439);
|
||||||
|
--sidebar: oklch(0.208 0.042 265.755);
|
||||||
|
--sidebar-foreground: oklch(0.984 0.003 247.858);
|
||||||
|
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||||
|
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
|
||||||
|
--sidebar-accent: oklch(0.279 0.041 260.031);
|
||||||
|
--sidebar-accent-foreground: oklch(0.984 0.003 247.858);
|
||||||
|
--sidebar-border: oklch(1 0 0 / 10%);
|
||||||
|
--sidebar-ring: oklch(0.551 0.027 264.364);
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@apply border-border outline-ring/50;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
@apply bg-background text-foreground;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
147
src/app/page.tsx
147
src/app/page.tsx
@@ -1,63 +1,108 @@
|
|||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
|
||||||
export default function HomePage() {
|
export default function HomePage() {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center">
|
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800">
|
||||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
<div className="container mx-auto px-4 py-16">
|
||||||
<div className="bg-white rounded-2xl shadow-xl p-8 md:p-12">
|
{/* Hero Section */}
|
||||||
<h1 className="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
|
<div className="text-center mb-16">
|
||||||
|
<Badge variant="secondary" className="mb-4 text-sm">
|
||||||
|
🗳️ Démocratie Participative
|
||||||
|
</Badge>
|
||||||
|
<h1 className="text-4xl md:text-6xl font-bold text-slate-900 dark:text-slate-100 mb-6">
|
||||||
Mes Budgets Participatifs
|
Mes Budgets Participatifs
|
||||||
</h1>
|
</h1>
|
||||||
|
<p className="text-xl text-slate-600 dark:text-slate-300 max-w-3xl mx-auto mb-8">
|
||||||
<p className="text-xl md:text-2xl text-gray-600 mb-8 leading-relaxed">
|
Participez aux décisions budgétaires de vos collectifs.
|
||||||
Participez aux décisions budgétaires de vos collectifs
|
Votez pour les projets qui vous tiennent à cœur et façonnez ensemble l'avenir de votre communauté.
|
||||||
</p>
|
</p>
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||||
<div className="space-y-4">
|
<Button asChild size="lg" className="text-lg px-8 py-6">
|
||||||
<Link
|
<Link href="/admin">
|
||||||
href="/admin"
|
🛠️ Espace Administration
|
||||||
className="inline-flex items-center px-8 py-4 bg-indigo-600 text-white font-semibold rounded-lg hover:bg-indigo-700 transition-colors duration-200 shadow-lg hover:shadow-xl"
|
</Link>
|
||||||
>
|
</Button>
|
||||||
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<Button asChild variant="outline" size="lg" className="text-lg px-8 py-6">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
<Link href="#features">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
📋 Découvrir les fonctionnalités
|
||||||
</svg>
|
</Link>
|
||||||
Accès Admin
|
</Button>
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6 text-left">
|
|
||||||
<div className="bg-blue-50 p-6 rounded-xl">
|
|
||||||
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
|
|
||||||
<svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3 className="font-semibold text-gray-900 mb-2">Déposez vos propositions</h3>
|
|
||||||
<p className="text-gray-600">Soumettez vos idées pour améliorer votre collectif</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-green-50 p-6 rounded-xl">
|
|
||||||
<div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
|
|
||||||
<svg className="w-6 h-6 text-green-600" 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>
|
|
||||||
<h3 className="font-semibold text-gray-900 mb-2">Votez collectivement</h3>
|
|
||||||
<p className="text-gray-600">Participez aux décisions avec votre budget alloué</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-purple-50 p-6 rounded-xl">
|
|
||||||
<div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
|
|
||||||
<svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3 className="font-semibold text-gray-900 mb-2">Suivez les résultats</h3>
|
|
||||||
<p className="text-gray-600">Découvrez quelles propositions ont été sélectionnées</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Features Section */}
|
||||||
|
<div id="features" className="grid md:grid-cols-3 gap-8 mb-16">
|
||||||
|
<Card className="border-0 shadow-lg hover:shadow-xl transition-shadow duration-300">
|
||||||
|
<CardHeader className="text-center">
|
||||||
|
<div className="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||||
|
<span className="text-2xl">📝</span>
|
||||||
|
</div>
|
||||||
|
<CardTitle className="text-xl">Propositions</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Soumettez et découvrez des projets innovants pour votre collectif
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="text-center">
|
||||||
|
<p className="text-slate-600 dark:text-slate-300">
|
||||||
|
Partagez vos idées et consultez les propositions de la communauté
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="border-0 shadow-lg hover:shadow-xl transition-shadow duration-300">
|
||||||
|
<CardHeader className="text-center">
|
||||||
|
<div className="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||||
|
<span className="text-2xl">🗳️</span>
|
||||||
|
</div>
|
||||||
|
<CardTitle className="text-xl">Vote</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Votez pour les projets qui vous semblent prioritaires
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="text-center">
|
||||||
|
<p className="text-slate-600 dark:text-slate-300">
|
||||||
|
Répartissez votre budget entre les différentes propositions
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="border-0 shadow-lg hover:shadow-xl transition-shadow duration-300">
|
||||||
|
<CardHeader className="text-center">
|
||||||
|
<div className="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||||
|
<span className="text-2xl">📊</span>
|
||||||
|
</div>
|
||||||
|
<CardTitle className="text-xl">Résultats</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Suivez en temps réel l'évolution des votes
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="text-center">
|
||||||
|
<p className="text-slate-600 dark:text-slate-300">
|
||||||
|
Visualisez les projets les plus populaires et les résultats finaux
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* CTA Section */}
|
||||||
|
<Card className="border-0 shadow-xl bg-gradient-to-r from-blue-600 to-purple-600 text-white">
|
||||||
|
<CardContent className="p-8 text-center">
|
||||||
|
<h2 className="text-3xl font-bold mb-4">
|
||||||
|
Prêt à participer ?
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl mb-6 opacity-90">
|
||||||
|
Rejoignez votre collectif et prenez part aux décisions qui vous concernent
|
||||||
|
</p>
|
||||||
|
<Button asChild size="lg" variant="secondary" className="text-lg px-8 py-6">
|
||||||
|
<Link href="/admin">
|
||||||
|
Commencer maintenant
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,8 +1,9 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { Dialog } from '@headlessui/react';
|
import { Button } from '@/components/ui/button';
|
||||||
import { XMarkIcon } from '@heroicons/react/24/outline';
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
import { participantService } from '@/lib/services';
|
import { participantService } from '@/lib/services';
|
||||||
|
|
||||||
interface AddParticipantModalProps {
|
interface AddParticipantModalProps {
|
||||||
@@ -10,16 +11,10 @@ interface AddParticipantModalProps {
|
|||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
onSuccess: () => void;
|
onSuccess: () => void;
|
||||||
campaignId: string;
|
campaignId: string;
|
||||||
campaignTitle: string;
|
campaignTitle?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function AddParticipantModal({
|
export default function AddParticipantModal({ isOpen, onClose, onSuccess, campaignId, campaignTitle }: AddParticipantModalProps) {
|
||||||
isOpen,
|
|
||||||
onClose,
|
|
||||||
onSuccess,
|
|
||||||
campaignId,
|
|
||||||
campaignTitle
|
|
||||||
}: AddParticipantModalProps) {
|
|
||||||
const [formData, setFormData] = useState({
|
const [formData, setFormData] = useState({
|
||||||
first_name: '',
|
first_name: '',
|
||||||
last_name: '',
|
last_name: '',
|
||||||
@@ -40,8 +35,8 @@ export default function AddParticipantModal({
|
|||||||
last_name: formData.last_name,
|
last_name: formData.last_name,
|
||||||
email: formData.email
|
email: formData.email
|
||||||
});
|
});
|
||||||
|
|
||||||
onSuccess();
|
onSuccess();
|
||||||
// Reset form
|
|
||||||
setFormData({
|
setFormData({
|
||||||
first_name: '',
|
first_name: '',
|
||||||
last_name: '',
|
last_name: '',
|
||||||
@@ -56,111 +51,78 @@ export default function AddParticipantModal({
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
const { name, value } = e.target;
|
|
||||||
setFormData(prev => ({
|
setFormData(prev => ({
|
||||||
...prev,
|
...prev,
|
||||||
[name]: value
|
[e.target.name]: e.target.value
|
||||||
}));
|
}));
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog open={isOpen} onClose={onClose} className="relative z-50">
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||||
<div className="fixed inset-0 bg-black/30" aria-hidden="true" />
|
<DialogContent className="sm:max-w-[500px]">
|
||||||
|
<DialogHeader>
|
||||||
<div className="fixed inset-0 flex items-center justify-center p-4">
|
<DialogTitle>Ajouter un participant</DialogTitle>
|
||||||
<Dialog.Panel className="mx-auto max-w-md w-full bg-white rounded-lg shadow-xl">
|
<DialogDescription>
|
||||||
<div className="flex items-center justify-between p-6 border-b border-gray-200">
|
{campaignTitle && `Ajoutez un nouveau participant à la campagne "${campaignTitle}".`}
|
||||||
<Dialog.Title className="text-lg font-medium text-gray-900">
|
{!campaignTitle && 'Ajoutez un nouveau participant à cette campagne.'}
|
||||||
Ajouter un participant
|
</DialogDescription>
|
||||||
</Dialog.Title>
|
</DialogHeader>
|
||||||
<button
|
|
||||||
onClick={onClose}
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
className="text-gray-400 hover:text-gray-600"
|
{error && (
|
||||||
>
|
<div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
||||||
<XMarkIcon className="h-6 w-6" />
|
<p className="text-sm text-red-600 dark:text-red-400">{error}</p>
|
||||||
</button>
|
</div>
|
||||||
</div>
|
)}
|
||||||
|
|
||||||
<div className="px-6 py-4 bg-green-50 border-b border-gray-200">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||||
<p className="text-sm text-green-800">
|
<div className="space-y-2">
|
||||||
<span className="font-medium">Campagne:</span> {campaignTitle}
|
<Label htmlFor="first_name">Prénom *</Label>
|
||||||
</p>
|
<Input
|
||||||
</div>
|
|
||||||
|
|
||||||
<form onSubmit={handleSubmit} className="p-6 space-y-4">
|
|
||||||
{error && (
|
|
||||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md">
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="first_name" className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Prénom *
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="first_name"
|
id="first_name"
|
||||||
name="first_name"
|
name="first_name"
|
||||||
value={formData.first_name}
|
value={formData.first_name}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
|
placeholder="Prénom"
|
||||||
required
|
required
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
|
||||||
placeholder="Prénom du participant"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
<div>
|
<Label htmlFor="last_name">Nom *</Label>
|
||||||
<label htmlFor="last_name" className="block text-sm font-medium text-gray-700 mb-1">
|
<Input
|
||||||
Nom *
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="last_name"
|
id="last_name"
|
||||||
name="last_name"
|
name="last_name"
|
||||||
value={formData.last_name}
|
value={formData.last_name}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
|
placeholder="Nom"
|
||||||
required
|
required
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
|
||||||
placeholder="Nom du participant"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div>
|
|
||||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
|
<div className="space-y-2">
|
||||||
Email *
|
<Label htmlFor="email">Email *</Label>
|
||||||
</label>
|
<Input
|
||||||
<input
|
id="email"
|
||||||
type="email"
|
name="email"
|
||||||
id="email"
|
type="email"
|
||||||
name="email"
|
value={formData.email}
|
||||||
value={formData.email}
|
onChange={handleChange}
|
||||||
onChange={handleChange}
|
placeholder="email@example.com"
|
||||||
required
|
required
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
/>
|
||||||
placeholder="email@exemple.com"
|
</div>
|
||||||
/>
|
|
||||||
</div>
|
<DialogFooter>
|
||||||
|
<Button type="button" variant="outline" onClick={onClose}>
|
||||||
<div className="flex items-center justify-end space-x-3 pt-4">
|
Annuler
|
||||||
<button
|
</Button>
|
||||||
type="button"
|
<Button type="submit" disabled={loading}>
|
||||||
onClick={onClose}
|
{loading ? 'Ajout...' : 'Ajouter le participant'}
|
||||||
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
|
</Button>
|
||||||
>
|
</DialogFooter>
|
||||||
Annuler
|
</form>
|
||||||
</button>
|
</DialogContent>
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={loading}
|
|
||||||
className="px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
||||||
>
|
|
||||||
{loading ? 'Ajout...' : 'Ajouter le participant'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</Dialog.Panel>
|
|
||||||
</div>
|
|
||||||
</Dialog>
|
</Dialog>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,10 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { Dialog } from '@headlessui/react';
|
import { Button } from '@/components/ui/button';
|
||||||
import { XMarkIcon } from '@heroicons/react/24/outline';
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
import { propositionService } from '@/lib/services';
|
import { propositionService } from '@/lib/services';
|
||||||
|
|
||||||
interface AddPropositionModalProps {
|
interface AddPropositionModalProps {
|
||||||
@@ -10,16 +12,9 @@ interface AddPropositionModalProps {
|
|||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
onSuccess: () => void;
|
onSuccess: () => void;
|
||||||
campaignId: string;
|
campaignId: string;
|
||||||
campaignTitle: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function AddPropositionModal({
|
export default function AddPropositionModal({ isOpen, onClose, onSuccess, campaignId }: AddPropositionModalProps) {
|
||||||
isOpen,
|
|
||||||
onClose,
|
|
||||||
onSuccess,
|
|
||||||
campaignId,
|
|
||||||
campaignTitle
|
|
||||||
}: AddPropositionModalProps) {
|
|
||||||
const [formData, setFormData] = useState({
|
const [formData, setFormData] = useState({
|
||||||
title: '',
|
title: '',
|
||||||
description: '',
|
description: '',
|
||||||
@@ -44,17 +39,17 @@ export default function AddPropositionModal({
|
|||||||
author_last_name: formData.author_last_name,
|
author_last_name: formData.author_last_name,
|
||||||
author_email: formData.author_email
|
author_email: formData.author_email
|
||||||
});
|
});
|
||||||
|
|
||||||
onSuccess();
|
onSuccess();
|
||||||
// Reset form
|
|
||||||
setFormData({
|
setFormData({
|
||||||
title: '',
|
title: '',
|
||||||
description: '',
|
description: '',
|
||||||
author_first_name: '',
|
author_first_name: 'admin',
|
||||||
author_last_name: '',
|
author_last_name: 'admin',
|
||||||
author_email: ''
|
author_email: 'admin@example.com'
|
||||||
});
|
});
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
setError('Erreur lors de l\'ajout de la proposition');
|
setError('Erreur lors de la création de la proposition');
|
||||||
console.error(err);
|
console.error(err);
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
@@ -62,149 +57,106 @@ export default function AddPropositionModal({
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||||
const { name, value } = e.target;
|
|
||||||
setFormData(prev => ({
|
setFormData(prev => ({
|
||||||
...prev,
|
...prev,
|
||||||
[name]: value
|
[e.target.name]: e.target.value
|
||||||
}));
|
}));
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog open={isOpen} onClose={onClose} className="relative z-50">
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||||
<div className="fixed inset-0 bg-black/30" aria-hidden="true" />
|
<DialogContent className="sm:max-w-[500px]">
|
||||||
|
<DialogHeader>
|
||||||
<div className="fixed inset-0 flex items-center justify-center p-4">
|
<DialogTitle>Ajouter une proposition</DialogTitle>
|
||||||
<Dialog.Panel className="mx-auto max-w-md w-full bg-white rounded-lg shadow-xl">
|
<DialogDescription>
|
||||||
<div className="flex items-center justify-between p-6 border-b border-gray-200">
|
Créez une nouvelle proposition pour cette campagne de budget participatif.
|
||||||
<Dialog.Title className="text-lg font-medium text-gray-900">
|
</DialogDescription>
|
||||||
Ajouter une proposition
|
</DialogHeader>
|
||||||
</Dialog.Title>
|
|
||||||
<button
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
onClick={onClose}
|
{error && (
|
||||||
className="text-gray-400 hover:text-gray-600"
|
<div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
||||||
>
|
<p className="text-sm text-red-600 dark:text-red-400">{error}</p>
|
||||||
<XMarkIcon className="h-6 w-6" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="px-6 py-4 bg-blue-50 border-b border-gray-200">
|
|
||||||
<p className="text-sm text-blue-800">
|
|
||||||
<span className="font-medium">Campagne:</span> {campaignTitle}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form onSubmit={handleSubmit} className="p-6 space-y-4">
|
|
||||||
{error && (
|
|
||||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md">
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Titre de la proposition *
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="title"
|
|
||||||
name="title"
|
|
||||||
value={formData.title}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
|
||||||
placeholder="Titre de la proposition"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
<div>
|
|
||||||
<label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
|
<div className="space-y-2">
|
||||||
Description *
|
<Label htmlFor="title">Titre de la proposition *</Label>
|
||||||
</label>
|
<Input
|
||||||
<textarea
|
id="title"
|
||||||
id="description"
|
name="title"
|
||||||
name="description"
|
value={formData.title}
|
||||||
value={formData.description}
|
onChange={handleChange}
|
||||||
onChange={handleChange}
|
placeholder="Ex: Installation de bancs dans le parc"
|
||||||
required
|
required
|
||||||
rows={4}
|
/>
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
</div>
|
||||||
placeholder="Décrivez votre proposition en détail..."
|
|
||||||
/>
|
<div className="space-y-2">
|
||||||
</div>
|
<Label htmlFor="description">Description *</Label>
|
||||||
|
<Textarea
|
||||||
<div className="border-t border-gray-200 pt-4">
|
id="description"
|
||||||
<h3 className="text-sm font-medium text-gray-900 mb-3">Informations de l'auteur</h3>
|
name="description"
|
||||||
|
value={formData.description}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
onChange={handleChange}
|
||||||
<div>
|
placeholder="Décrivez votre proposition en détail..."
|
||||||
<label htmlFor="author_first_name" className="block text-sm font-medium text-gray-700 mb-1">
|
rows={4}
|
||||||
Prénom *
|
required
|
||||||
</label>
|
/>
|
||||||
<input
|
</div>
|
||||||
type="text"
|
|
||||||
id="author_first_name"
|
<div className="border-t border-slate-200 dark:border-slate-700 pt-4">
|
||||||
name="author_first_name"
|
<h3 className="text-sm font-medium text-slate-900 dark:text-slate-100 mb-3">
|
||||||
value={formData.author_first_name}
|
Informations de l'auteur
|
||||||
onChange={handleChange}
|
</h3>
|
||||||
required
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
<div className="space-y-2">
|
||||||
placeholder="Prénom"
|
<Label htmlFor="author_first_name">Prénom *</Label>
|
||||||
/>
|
<Input
|
||||||
</div>
|
id="author_first_name"
|
||||||
|
name="author_first_name"
|
||||||
<div>
|
value={formData.author_first_name}
|
||||||
<label htmlFor="author_last_name" className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Nom *
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="author_last_name"
|
|
||||||
name="author_last_name"
|
|
||||||
value={formData.author_last_name}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
|
||||||
placeholder="Nom"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-3">
|
|
||||||
<label htmlFor="author_email" className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Email *
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="author_email"
|
|
||||||
name="author_email"
|
|
||||||
value={formData.author_email}
|
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
|
placeholder="Prénom"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="author_last_name">Nom *</Label>
|
||||||
|
<Input
|
||||||
|
id="author_last_name"
|
||||||
|
name="author_last_name"
|
||||||
|
value={formData.author_last_name}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder="Nom"
|
||||||
required
|
required
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
|
||||||
placeholder="email@exemple.com"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="space-y-2 mt-3">
|
||||||
<div className="flex items-center justify-end space-x-3 pt-4">
|
<Label htmlFor="author_email">Email *</Label>
|
||||||
<button
|
<Input
|
||||||
type="button"
|
id="author_email"
|
||||||
onClick={onClose}
|
name="author_email"
|
||||||
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
|
type="email"
|
||||||
>
|
value={formData.author_email}
|
||||||
Annuler
|
onChange={handleChange}
|
||||||
</button>
|
placeholder="email@example.com"
|
||||||
<button
|
required
|
||||||
type="submit"
|
/>
|
||||||
disabled={loading}
|
|
||||||
className="px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
||||||
>
|
|
||||||
{loading ? 'Ajout...' : 'Ajouter la proposition'}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</div>
|
||||||
</Dialog.Panel>
|
|
||||||
</div>
|
<DialogFooter>
|
||||||
|
<Button type="button" variant="outline" onClick={onClose}>
|
||||||
|
Annuler
|
||||||
|
</Button>
|
||||||
|
<Button type="submit" disabled={loading}>
|
||||||
|
{loading ? 'Création...' : 'Créer la proposition'}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,11 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { Dialog } from '@headlessui/react';
|
import { Button } from '@/components/ui/button';
|
||||||
import { XMarkIcon } from '@heroicons/react/24/outline';
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
import { campaignService } from '@/lib/services';
|
import { campaignService } from '@/lib/services';
|
||||||
import { CampaignStatus } from '@/types';
|
|
||||||
|
|
||||||
interface CreateCampaignModalProps {
|
interface CreateCampaignModalProps {
|
||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
@@ -16,9 +17,8 @@ export default function CreateCampaignModal({ isOpen, onClose, onSuccess }: Crea
|
|||||||
const [formData, setFormData] = useState({
|
const [formData, setFormData] = useState({
|
||||||
title: '',
|
title: '',
|
||||||
description: '',
|
description: '',
|
||||||
status: 'deposit' as CampaignStatus,
|
budget_per_user: '',
|
||||||
budget_per_user: 100,
|
spending_tiers: ''
|
||||||
spending_tiers: '10,25,50,100'
|
|
||||||
});
|
});
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [error, setError] = useState('');
|
const [error, setError] = useState('');
|
||||||
@@ -29,16 +29,16 @@ export default function CreateCampaignModal({ isOpen, onClose, onSuccess }: Crea
|
|||||||
setError('');
|
setError('');
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await campaignService.create(formData);
|
await campaignService.create({
|
||||||
onSuccess();
|
title: formData.title,
|
||||||
// Reset form
|
description: formData.description,
|
||||||
setFormData({
|
budget_per_user: parseInt(formData.budget_per_user),
|
||||||
title: '',
|
spending_tiers: formData.spending_tiers,
|
||||||
description: '',
|
status: 'deposit'
|
||||||
status: 'deposit',
|
|
||||||
budget_per_user: 100,
|
|
||||||
spending_tiers: '10,25,50,100'
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
onSuccess();
|
||||||
|
setFormData({ title: '', description: '', budget_per_user: '', spending_tiers: '' });
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
setError('Erreur lors de la création de la campagne');
|
setError('Erreur lors de la création de la campagne');
|
||||||
console.error(err);
|
console.error(err);
|
||||||
@@ -47,143 +47,94 @@ export default function CreateCampaignModal({ isOpen, onClose, onSuccess }: Crea
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||||
const { name, value } = e.target;
|
|
||||||
setFormData(prev => ({
|
setFormData(prev => ({
|
||||||
...prev,
|
...prev,
|
||||||
[name]: name === 'budget_per_user' ? parseInt(value) || 0 : value
|
[e.target.name]: e.target.value
|
||||||
}));
|
}));
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog open={isOpen} onClose={onClose} className="relative z-50">
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||||
<div className="fixed inset-0 bg-black/30" aria-hidden="true" />
|
<DialogContent className="sm:max-w-[500px]">
|
||||||
|
<DialogHeader>
|
||||||
<div className="fixed inset-0 flex items-center justify-center p-4">
|
<DialogTitle>Créer une nouvelle campagne</DialogTitle>
|
||||||
<Dialog.Panel className="mx-auto max-w-md w-full bg-white rounded-lg shadow-xl">
|
<DialogDescription>
|
||||||
<div className="flex items-center justify-between p-6 border-b border-gray-200">
|
Configurez les paramètres de votre campagne de budget participatif.
|
||||||
<Dialog.Title className="text-lg font-medium text-gray-900">
|
</DialogDescription>
|
||||||
Créer une nouvelle campagne
|
</DialogHeader>
|
||||||
</Dialog.Title>
|
|
||||||
<button
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
onClick={onClose}
|
{error && (
|
||||||
className="text-gray-400 hover:text-gray-600"
|
<div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
||||||
>
|
<p className="text-sm text-red-600 dark:text-red-400">{error}</p>
|
||||||
<XMarkIcon className="h-6 w-6" />
|
</div>
|
||||||
</button>
|
)}
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="title">Titre de la campagne *</Label>
|
||||||
|
<Input
|
||||||
|
id="title"
|
||||||
|
name="title"
|
||||||
|
value={formData.title}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder="Ex: Amélioration des espaces verts"
|
||||||
|
required
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form onSubmit={handleSubmit} className="p-6 space-y-4">
|
<div className="space-y-2">
|
||||||
{error && (
|
<Label htmlFor="description">Description *</Label>
|
||||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md">
|
<Textarea
|
||||||
{error}
|
id="description"
|
||||||
</div>
|
name="description"
|
||||||
)}
|
value={formData.description}
|
||||||
|
onChange={handleChange}
|
||||||
<div>
|
placeholder="Décrivez l'objectif de cette campagne..."
|
||||||
<label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
|
rows={3}
|
||||||
Titre *
|
required
|
||||||
</label>
|
/>
|
||||||
<input
|
</div>
|
||||||
type="text"
|
|
||||||
id="title"
|
<div className="space-y-2">
|
||||||
name="title"
|
<Label htmlFor="budget_per_user">Budget par utilisateur (€) *</Label>
|
||||||
value={formData.title}
|
<Input
|
||||||
onChange={handleChange}
|
id="budget_per_user"
|
||||||
required
|
name="budget_per_user"
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
type="number"
|
||||||
placeholder="Titre de la campagne"
|
value={formData.budget_per_user}
|
||||||
/>
|
onChange={handleChange}
|
||||||
</div>
|
placeholder="100"
|
||||||
|
min="1"
|
||||||
<div>
|
required
|
||||||
<label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
|
/>
|
||||||
Description *
|
</div>
|
||||||
</label>
|
|
||||||
<textarea
|
<div className="space-y-2">
|
||||||
id="description"
|
<Label htmlFor="spending_tiers">Paliers de dépense *</Label>
|
||||||
name="description"
|
<Input
|
||||||
value={formData.description}
|
id="spending_tiers"
|
||||||
onChange={handleChange}
|
name="spending_tiers"
|
||||||
required
|
value={formData.spending_tiers}
|
||||||
rows={3}
|
onChange={handleChange}
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
placeholder="Ex: 0, 10, 25, 50, 100"
|
||||||
placeholder="Description de la campagne"
|
required
|
||||||
/>
|
/>
|
||||||
</div>
|
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||||
|
Séparez les montants par des virgules (ex: 0, 10, 25, 50, 100)
|
||||||
<div>
|
</p>
|
||||||
<label htmlFor="status" className="block text-sm font-medium text-gray-700 mb-1">
|
</div>
|
||||||
État initial
|
|
||||||
</label>
|
<DialogFooter>
|
||||||
<select
|
<Button type="button" variant="outline" onClick={onClose}>
|
||||||
id="status"
|
Annuler
|
||||||
name="status"
|
</Button>
|
||||||
value={formData.status}
|
<Button type="submit" disabled={loading}>
|
||||||
onChange={handleChange}
|
{loading ? 'Création...' : 'Créer la campagne'}
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
</Button>
|
||||||
>
|
</DialogFooter>
|
||||||
<option value="deposit">Dépôt de propositions</option>
|
</form>
|
||||||
<option value="voting">En cours de vote</option>
|
</DialogContent>
|
||||||
<option value="closed">Fermé</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="budget_per_user" className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Budget par utilisateur (€) *
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
id="budget_per_user"
|
|
||||||
name="budget_per_user"
|
|
||||||
value={formData.budget_per_user}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
min="1"
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
|
||||||
placeholder="100"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="spending_tiers" className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Paliers de dépenses (€) *
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="spending_tiers"
|
|
||||||
name="spending_tiers"
|
|
||||||
value={formData.spending_tiers}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
|
||||||
placeholder="10,25,50,100"
|
|
||||||
/>
|
|
||||||
<p className="mt-1 text-sm text-gray-500">
|
|
||||||
Montants séparés par des virgules (ex: 10,25,50,100)
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center justify-end space-x-3 pt-4">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={onClose}
|
|
||||||
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
|
|
||||||
>
|
|
||||||
Annuler
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={loading}
|
|
||||||
className="px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
||||||
>
|
|
||||||
{loading ? 'Création...' : 'Créer la campagne'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</Dialog.Panel>
|
|
||||||
</div>
|
|
||||||
</Dialog>
|
</Dialog>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { Dialog } from '@headlessui/react';
|
import { Button } from '@/components/ui/button';
|
||||||
import { XMarkIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||||
|
import { AlertTriangle } from 'lucide-react';
|
||||||
import { campaignService } from '@/lib/services';
|
import { campaignService } from '@/lib/services';
|
||||||
import { Campaign } from '@/types';
|
import { Campaign } from '@/types';
|
||||||
|
|
||||||
@@ -10,109 +10,85 @@ interface DeleteCampaignModalProps {
|
|||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
onSuccess: () => void;
|
onSuccess: () => void;
|
||||||
campaign: Campaign;
|
campaign: Campaign | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function DeleteCampaignModal({
|
export default function DeleteCampaignModal({ isOpen, onClose, onSuccess, campaign }: DeleteCampaignModalProps) {
|
||||||
isOpen,
|
|
||||||
onClose,
|
|
||||||
onSuccess,
|
|
||||||
campaign
|
|
||||||
}: DeleteCampaignModalProps) {
|
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [error, setError] = useState('');
|
const [error, setError] = useState('');
|
||||||
|
|
||||||
const handleDelete = async () => {
|
const handleDelete = async () => {
|
||||||
console.log('Début de la suppression de la campagne:', campaign.id);
|
if (!campaign) return;
|
||||||
|
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
setError('');
|
setError('');
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await campaignService.delete(campaign.id);
|
await campaignService.delete(campaign.id);
|
||||||
console.log('Suppression réussie, appel de onSuccess');
|
|
||||||
onSuccess();
|
onSuccess();
|
||||||
} catch (err: any) {
|
} catch (err) {
|
||||||
console.error('Erreur dans le modal de suppression:', err);
|
setError('Erreur lors de la suppression de la campagne');
|
||||||
const errorMessage = err?.message || err?.details || 'Erreur lors de la suppression de la campagne';
|
console.error(err);
|
||||||
setError(`Erreur lors de la suppression de la campagne: ${errorMessage}`);
|
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
if (!campaign) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog open={isOpen} onClose={onClose} className="relative z-50">
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||||
<div className="fixed inset-0 bg-black/30" aria-hidden="true" />
|
<DialogContent className="sm:max-w-[425px]">
|
||||||
|
<DialogHeader>
|
||||||
<div className="fixed inset-0 flex items-center justify-center p-4">
|
<DialogTitle className="flex items-center gap-2">
|
||||||
<Dialog.Panel className="mx-auto max-w-md w-full bg-white rounded-lg shadow-xl">
|
<AlertTriangle className="h-5 w-5 text-red-500" />
|
||||||
<div className="flex items-center justify-between p-6 border-b border-gray-200">
|
Supprimer la campagne
|
||||||
<Dialog.Title className="text-lg font-medium text-gray-900">
|
</DialogTitle>
|
||||||
Supprimer la campagne
|
<DialogDescription>
|
||||||
</Dialog.Title>
|
Cette action est irréversible. Toutes les données associées à cette campagne seront définitivement supprimées.
|
||||||
<button
|
</DialogDescription>
|
||||||
onClick={onClose}
|
</DialogHeader>
|
||||||
className="text-gray-400 hover:text-gray-600"
|
|
||||||
>
|
<div className="space-y-4">
|
||||||
<XMarkIcon className="h-6 w-6" />
|
{error && (
|
||||||
</button>
|
<div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
||||||
</div>
|
<p className="text-sm text-red-600 dark:text-red-400">{error}</p>
|
||||||
|
|
||||||
<div className="p-6">
|
|
||||||
{error && (
|
|
||||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md mb-4">
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex items-start space-x-3">
|
|
||||||
<div className="flex-shrink-0">
|
|
||||||
<ExclamationTriangleIcon className="h-6 w-6 text-red-600" />
|
|
||||||
</div>
|
|
||||||
<div className="flex-1">
|
|
||||||
<h3 className="text-sm font-medium text-gray-900 mb-2">
|
|
||||||
Êtes-vous sûr de vouloir supprimer cette campagne ?
|
|
||||||
</h3>
|
|
||||||
<div className="text-sm text-gray-500 space-y-2">
|
|
||||||
<p>
|
|
||||||
<strong>Campagne :</strong> {campaign.title}
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Cette action supprimera définitivement :
|
|
||||||
</p>
|
|
||||||
<ul className="list-disc list-inside ml-2 space-y-1">
|
|
||||||
<li>La campagne et tous ses paramètres</li>
|
|
||||||
<li>Toutes les propositions associées</li>
|
|
||||||
<li>Tous les participants inscrits</li>
|
|
||||||
</ul>
|
|
||||||
<p className="text-red-600 font-medium mt-3">
|
|
||||||
Cette action est irréversible !
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center justify-end space-x-3 pt-6">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={onClose}
|
|
||||||
disabled={loading}
|
|
||||||
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50"
|
|
||||||
>
|
|
||||||
Annuler
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={handleDelete}
|
|
||||||
disabled={loading}
|
|
||||||
className="px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-md hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
||||||
>
|
|
||||||
{loading ? 'Suppression...' : 'Supprimer définitivement'}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="p-4 bg-slate-50 dark:bg-slate-800 rounded-lg">
|
||||||
|
<h4 className="font-medium text-slate-900 dark:text-slate-100 mb-2">
|
||||||
|
Campagne à supprimer :
|
||||||
|
</h4>
|
||||||
|
<p className="text-sm text-slate-600 dark:text-slate-300">
|
||||||
|
<strong>Titre :</strong> {campaign.title}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-slate-600 dark:text-slate-300">
|
||||||
|
<strong>Description :</strong> {campaign.description}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</Dialog.Panel>
|
|
||||||
</div>
|
<div className="p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg">
|
||||||
|
<p className="text-sm text-amber-700 dark:text-amber-300">
|
||||||
|
⚠️ Cette action supprimera également toutes les propositions et participants associés à cette campagne.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button type="button" variant="outline" onClick={onClose}>
|
||||||
|
Annuler
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="destructive"
|
||||||
|
onClick={handleDelete}
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
{loading ? 'Suppression...' : 'Supprimer définitivement'}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { Dialog } from '@headlessui/react';
|
import { Button } from '@/components/ui/button';
|
||||||
import { XMarkIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||||
|
import { AlertTriangle } from 'lucide-react';
|
||||||
import { participantService } from '@/lib/services';
|
import { participantService } from '@/lib/services';
|
||||||
import { Participant } from '@/types';
|
import { Participant } from '@/types';
|
||||||
|
|
||||||
@@ -10,104 +10,85 @@ interface DeleteParticipantModalProps {
|
|||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
onSuccess: () => void;
|
onSuccess: () => void;
|
||||||
participant: Participant;
|
participant: Participant | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function DeleteParticipantModal({
|
export default function DeleteParticipantModal({ isOpen, onClose, onSuccess, participant }: DeleteParticipantModalProps) {
|
||||||
isOpen,
|
|
||||||
onClose,
|
|
||||||
onSuccess,
|
|
||||||
participant
|
|
||||||
}: DeleteParticipantModalProps) {
|
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [error, setError] = useState('');
|
const [error, setError] = useState('');
|
||||||
|
|
||||||
const handleDelete = async () => {
|
const handleDelete = async () => {
|
||||||
|
if (!participant) return;
|
||||||
|
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
setError('');
|
setError('');
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await participantService.delete(participant.id);
|
await participantService.delete(participant.id);
|
||||||
onSuccess();
|
onSuccess();
|
||||||
} catch (err: any) {
|
} catch (err) {
|
||||||
const errorMessage = err?.message || err?.details || 'Erreur lors de la suppression du participant';
|
setError('Erreur lors de la suppression du participant');
|
||||||
setError(`Erreur lors de la suppression du participant: ${errorMessage}`);
|
console.error(err);
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
if (!participant) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog open={isOpen} onClose={onClose} className="relative z-50">
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||||
<div className="fixed inset-0 bg-black/30" aria-hidden="true" />
|
<DialogContent className="sm:max-w-[425px]">
|
||||||
|
<DialogHeader>
|
||||||
<div className="fixed inset-0 flex items-center justify-center p-4">
|
<DialogTitle className="flex items-center gap-2">
|
||||||
<Dialog.Panel className="mx-auto max-w-md w-full bg-white rounded-lg shadow-xl">
|
<AlertTriangle className="h-5 w-5 text-red-500" />
|
||||||
<div className="flex items-center justify-between p-6 border-b border-gray-200">
|
Supprimer le participant
|
||||||
<Dialog.Title className="text-lg font-medium text-gray-900">
|
</DialogTitle>
|
||||||
Supprimer le participant
|
<DialogDescription>
|
||||||
</Dialog.Title>
|
Cette action est irréversible. Le participant sera définitivement supprimé.
|
||||||
<button
|
</DialogDescription>
|
||||||
onClick={onClose}
|
</DialogHeader>
|
||||||
className="text-gray-400 hover:text-gray-600"
|
|
||||||
>
|
<div className="space-y-4">
|
||||||
<XMarkIcon className="h-6 w-6" />
|
{error && (
|
||||||
</button>
|
<div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
||||||
</div>
|
<p className="text-sm text-red-600 dark:text-red-400">{error}</p>
|
||||||
|
|
||||||
<div className="p-6">
|
|
||||||
{error && (
|
|
||||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md mb-4">
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex items-start space-x-3">
|
|
||||||
<div className="flex-shrink-0">
|
|
||||||
<ExclamationTriangleIcon className="h-6 w-6 text-red-600" />
|
|
||||||
</div>
|
|
||||||
<div className="flex-1">
|
|
||||||
<h3 className="text-sm font-medium text-gray-900 mb-2">
|
|
||||||
Êtes-vous sûr de vouloir supprimer ce participant ?
|
|
||||||
</h3>
|
|
||||||
<div className="text-sm text-gray-500 space-y-2">
|
|
||||||
<p>
|
|
||||||
<strong>Participant :</strong> {participant.first_name} {participant.last_name}
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<strong>Email :</strong> {participant.email}
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Cette action supprimera définitivement le participant et toutes les données associées (votes, etc.).
|
|
||||||
</p>
|
|
||||||
<p className="text-red-600 font-medium mt-3">
|
|
||||||
Cette action est irréversible !
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center justify-end space-x-3 pt-6">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={onClose}
|
|
||||||
disabled={loading}
|
|
||||||
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50"
|
|
||||||
>
|
|
||||||
Annuler
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={handleDelete}
|
|
||||||
disabled={loading}
|
|
||||||
className="px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-md hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
||||||
>
|
|
||||||
{loading ? 'Suppression...' : 'Supprimer définitivement'}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="p-4 bg-slate-50 dark:bg-slate-800 rounded-lg">
|
||||||
|
<h4 className="font-medium text-slate-900 dark:text-slate-100 mb-2">
|
||||||
|
Participant à supprimer :
|
||||||
|
</h4>
|
||||||
|
<p className="text-sm text-slate-600 dark:text-slate-300">
|
||||||
|
<strong>Nom :</strong> {participant.first_name} {participant.last_name}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-slate-600 dark:text-slate-300">
|
||||||
|
<strong>Email :</strong> {participant.email}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</Dialog.Panel>
|
|
||||||
</div>
|
<div className="p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg">
|
||||||
|
<p className="text-sm text-amber-700 dark:text-amber-300">
|
||||||
|
⚠️ Cette action supprimera également tous les votes associés à ce participant.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button type="button" variant="outline" onClick={onClose}>
|
||||||
|
Annuler
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="destructive"
|
||||||
|
onClick={handleDelete}
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
{loading ? 'Suppression...' : 'Supprimer définitivement'}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { Dialog } from '@headlessui/react';
|
import { Button } from '@/components/ui/button';
|
||||||
import { XMarkIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||||
|
import { AlertTriangle } from 'lucide-react';
|
||||||
import { propositionService } from '@/lib/services';
|
import { propositionService } from '@/lib/services';
|
||||||
import { Proposition } from '@/types';
|
import { Proposition } from '@/types';
|
||||||
|
|
||||||
@@ -10,101 +10,88 @@ interface DeletePropositionModalProps {
|
|||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
onSuccess: () => void;
|
onSuccess: () => void;
|
||||||
proposition: Proposition;
|
proposition: Proposition | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function DeletePropositionModal({
|
export default function DeletePropositionModal({ isOpen, onClose, onSuccess, proposition }: DeletePropositionModalProps) {
|
||||||
isOpen,
|
|
||||||
onClose,
|
|
||||||
onSuccess,
|
|
||||||
proposition
|
|
||||||
}: DeletePropositionModalProps) {
|
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [error, setError] = useState('');
|
const [error, setError] = useState('');
|
||||||
|
|
||||||
const handleDelete = async () => {
|
const handleDelete = async () => {
|
||||||
|
if (!proposition) return;
|
||||||
|
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
setError('');
|
setError('');
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await propositionService.delete(proposition.id);
|
await propositionService.delete(proposition.id);
|
||||||
onSuccess();
|
onSuccess();
|
||||||
} catch (err: any) {
|
} catch (err) {
|
||||||
const errorMessage = err?.message || err?.details || 'Erreur lors de la suppression de la proposition';
|
setError('Erreur lors de la suppression de la proposition');
|
||||||
setError(`Erreur lors de la suppression de la proposition: ${errorMessage}`);
|
console.error(err);
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
if (!proposition) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog open={isOpen} onClose={onClose} className="relative z-50">
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||||
<div className="fixed inset-0 bg-black/30" aria-hidden="true" />
|
<DialogContent className="sm:max-w-[425px]">
|
||||||
|
<DialogHeader>
|
||||||
<div className="fixed inset-0 flex items-center justify-center p-4">
|
<DialogTitle className="flex items-center gap-2">
|
||||||
<Dialog.Panel className="mx-auto max-w-md w-full bg-white rounded-lg shadow-xl">
|
<AlertTriangle className="h-5 w-5 text-red-500" />
|
||||||
<div className="flex items-center justify-between p-6 border-b border-gray-200">
|
Supprimer la proposition
|
||||||
<Dialog.Title className="text-lg font-medium text-gray-900">
|
</DialogTitle>
|
||||||
Supprimer la proposition
|
<DialogDescription>
|
||||||
</Dialog.Title>
|
Cette action est irréversible. La proposition sera définitivement supprimée.
|
||||||
<button
|
</DialogDescription>
|
||||||
onClick={onClose}
|
</DialogHeader>
|
||||||
className="text-gray-400 hover:text-gray-600"
|
|
||||||
>
|
<div className="space-y-4">
|
||||||
<XMarkIcon className="h-6 w-6" />
|
{error && (
|
||||||
</button>
|
<div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
||||||
</div>
|
<p className="text-sm text-red-600 dark:text-red-400">{error}</p>
|
||||||
|
|
||||||
<div className="p-6">
|
|
||||||
{error && (
|
|
||||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md mb-4">
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex items-start space-x-3">
|
|
||||||
<div className="flex-shrink-0">
|
|
||||||
<ExclamationTriangleIcon className="h-6 w-6 text-red-600" />
|
|
||||||
</div>
|
|
||||||
<div className="flex-1">
|
|
||||||
<h3 className="text-sm font-medium text-gray-900 mb-2">
|
|
||||||
Êtes-vous sûr de vouloir supprimer cette proposition ?
|
|
||||||
</h3>
|
|
||||||
<div className="text-sm text-gray-500 space-y-2">
|
|
||||||
<p>
|
|
||||||
<strong>Proposition :</strong> {proposition.title}
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Cette action supprimera définitivement la proposition et toutes les données associées.
|
|
||||||
</p>
|
|
||||||
<p className="text-red-600 font-medium mt-3">
|
|
||||||
Cette action est irréversible !
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center justify-end space-x-3 pt-6">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={onClose}
|
|
||||||
disabled={loading}
|
|
||||||
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50"
|
|
||||||
>
|
|
||||||
Annuler
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={handleDelete}
|
|
||||||
disabled={loading}
|
|
||||||
className="px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-md hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
||||||
>
|
|
||||||
{loading ? 'Suppression...' : 'Supprimer définitivement'}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="p-4 bg-slate-50 dark:bg-slate-800 rounded-lg">
|
||||||
|
<h4 className="font-medium text-slate-900 dark:text-slate-100 mb-2">
|
||||||
|
Proposition à supprimer :
|
||||||
|
</h4>
|
||||||
|
<p className="text-sm text-slate-600 dark:text-slate-300">
|
||||||
|
<strong>Titre :</strong> {proposition.title}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-slate-600 dark:text-slate-300">
|
||||||
|
<strong>Auteur :</strong> {proposition.author_first_name} {proposition.author_last_name}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-slate-600 dark:text-slate-300">
|
||||||
|
<strong>Email :</strong> {proposition.author_email}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</Dialog.Panel>
|
|
||||||
</div>
|
<div className="p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg">
|
||||||
|
<p className="text-sm text-amber-700 dark:text-amber-300">
|
||||||
|
⚠️ Cette action supprimera également tous les votes associés à cette proposition.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button type="button" variant="outline" onClick={onClose}>
|
||||||
|
Annuler
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="destructive"
|
||||||
|
onClick={handleDelete}
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
{loading ? 'Suppression...' : 'Supprimer définitivement'}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,11 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
import { Dialog } from '@headlessui/react';
|
import { Button } from '@/components/ui/button';
|
||||||
import { XMarkIcon } from '@heroicons/react/24/outline';
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
import { campaignService } from '@/lib/services';
|
import { campaignService } from '@/lib/services';
|
||||||
import { Campaign, CampaignStatus } from '@/types';
|
import { Campaign, CampaignStatus } from '@/types';
|
||||||
|
|
||||||
@@ -10,33 +13,27 @@ interface EditCampaignModalProps {
|
|||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
onSuccess: () => void;
|
onSuccess: () => void;
|
||||||
campaign: Campaign;
|
campaign: Campaign | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function EditCampaignModal({
|
export default function EditCampaignModal({ isOpen, onClose, onSuccess, campaign }: EditCampaignModalProps) {
|
||||||
isOpen,
|
|
||||||
onClose,
|
|
||||||
onSuccess,
|
|
||||||
campaign
|
|
||||||
}: EditCampaignModalProps) {
|
|
||||||
const [formData, setFormData] = useState({
|
const [formData, setFormData] = useState({
|
||||||
title: '',
|
title: '',
|
||||||
description: '',
|
description: '',
|
||||||
status: 'deposit' as CampaignStatus,
|
status: 'deposit' as CampaignStatus,
|
||||||
budget_per_user: 100,
|
budget_per_user: '',
|
||||||
spending_tiers: ''
|
spending_tiers: ''
|
||||||
});
|
});
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [error, setError] = useState('');
|
const [error, setError] = useState('');
|
||||||
|
|
||||||
// Initialiser le formulaire avec les données de la campagne
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (campaign) {
|
if (campaign) {
|
||||||
setFormData({
|
setFormData({
|
||||||
title: campaign.title,
|
title: campaign.title,
|
||||||
description: campaign.description,
|
description: campaign.description,
|
||||||
status: campaign.status,
|
status: campaign.status,
|
||||||
budget_per_user: campaign.budget_per_user,
|
budget_per_user: campaign.budget_per_user.toString(),
|
||||||
spending_tiers: campaign.spending_tiers
|
spending_tiers: campaign.spending_tiers
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -44,11 +41,20 @@ export default function EditCampaignModal({
|
|||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
if (!campaign) return;
|
||||||
|
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
setError('');
|
setError('');
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await campaignService.update(campaign.id, formData);
|
await campaignService.update(campaign.id, {
|
||||||
|
title: formData.title,
|
||||||
|
description: formData.description,
|
||||||
|
status: formData.status,
|
||||||
|
budget_per_user: parseInt(formData.budget_per_user),
|
||||||
|
spending_tiers: formData.spending_tiers
|
||||||
|
});
|
||||||
|
|
||||||
onSuccess();
|
onSuccess();
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
setError('Erreur lors de la modification de la campagne');
|
setError('Erreur lors de la modification de la campagne');
|
||||||
@@ -58,143 +64,117 @@ export default function EditCampaignModal({
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||||
const { name, value } = e.target;
|
|
||||||
setFormData(prev => ({
|
setFormData(prev => ({
|
||||||
...prev,
|
...prev,
|
||||||
[name]: name === 'budget_per_user' ? parseInt(value) || 0 : value
|
[e.target.name]: e.target.value
|
||||||
}));
|
}));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleStatusChange = (value: string) => {
|
||||||
|
setFormData(prev => ({
|
||||||
|
...prev,
|
||||||
|
status: value as CampaignStatus
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!campaign) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog open={isOpen} onClose={onClose} className="relative z-50">
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||||
<div className="fixed inset-0 bg-black/30" aria-hidden="true" />
|
<DialogContent className="sm:max-w-[500px]">
|
||||||
|
<DialogHeader>
|
||||||
<div className="fixed inset-0 flex items-center justify-center p-4">
|
<DialogTitle>Modifier la campagne</DialogTitle>
|
||||||
<Dialog.Panel className="mx-auto max-w-md w-full bg-white rounded-lg shadow-xl">
|
<DialogDescription>
|
||||||
<div className="flex items-center justify-between p-6 border-b border-gray-200">
|
Modifiez les paramètres de votre campagne de budget participatif.
|
||||||
<Dialog.Title className="text-lg font-medium text-gray-900">
|
</DialogDescription>
|
||||||
Modifier la campagne
|
</DialogHeader>
|
||||||
</Dialog.Title>
|
|
||||||
<button
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
onClick={onClose}
|
{error && (
|
||||||
className="text-gray-400 hover:text-gray-600"
|
<div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
||||||
>
|
<p className="text-sm text-red-600 dark:text-red-400">{error}</p>
|
||||||
<XMarkIcon className="h-6 w-6" />
|
</div>
|
||||||
</button>
|
)}
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="title">Titre de la campagne *</Label>
|
||||||
|
<Input
|
||||||
|
id="title"
|
||||||
|
name="title"
|
||||||
|
value={formData.title}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder="Ex: Amélioration des espaces verts"
|
||||||
|
required
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form onSubmit={handleSubmit} className="p-6 space-y-4">
|
<div className="space-y-2">
|
||||||
{error && (
|
<Label htmlFor="description">Description *</Label>
|
||||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md">
|
<Textarea
|
||||||
{error}
|
id="description"
|
||||||
</div>
|
name="description"
|
||||||
)}
|
value={formData.description}
|
||||||
|
onChange={handleChange}
|
||||||
<div>
|
placeholder="Décrivez l'objectif de cette campagne..."
|
||||||
<label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
|
rows={3}
|
||||||
Titre *
|
required
|
||||||
</label>
|
/>
|
||||||
<input
|
</div>
|
||||||
type="text"
|
|
||||||
id="title"
|
<div className="space-y-2">
|
||||||
name="title"
|
<Label htmlFor="status">Statut de la campagne</Label>
|
||||||
value={formData.title}
|
<Select value={formData.status} onValueChange={handleStatusChange}>
|
||||||
onChange={handleChange}
|
<SelectTrigger>
|
||||||
required
|
<SelectValue placeholder="Sélectionnez un statut" />
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
</SelectTrigger>
|
||||||
placeholder="Titre de la campagne"
|
<SelectContent>
|
||||||
/>
|
<SelectItem value="deposit">Dépôt de propositions</SelectItem>
|
||||||
</div>
|
<SelectItem value="voting">En cours de vote</SelectItem>
|
||||||
|
<SelectItem value="closed">Terminée</SelectItem>
|
||||||
<div>
|
</SelectContent>
|
||||||
<label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
|
</Select>
|
||||||
Description *
|
</div>
|
||||||
</label>
|
|
||||||
<textarea
|
<div className="space-y-2">
|
||||||
id="description"
|
<Label htmlFor="budget_per_user">Budget par utilisateur (€) *</Label>
|
||||||
name="description"
|
<Input
|
||||||
value={formData.description}
|
id="budget_per_user"
|
||||||
onChange={handleChange}
|
name="budget_per_user"
|
||||||
required
|
type="number"
|
||||||
rows={3}
|
value={formData.budget_per_user}
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
onChange={handleChange}
|
||||||
placeholder="Description de la campagne"
|
placeholder="100"
|
||||||
/>
|
min="1"
|
||||||
</div>
|
required
|
||||||
|
/>
|
||||||
<div>
|
</div>
|
||||||
<label htmlFor="status" className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
État
|
<div className="space-y-2">
|
||||||
</label>
|
<Label htmlFor="spending_tiers">Paliers de dépense *</Label>
|
||||||
<select
|
<Input
|
||||||
id="status"
|
id="spending_tiers"
|
||||||
name="status"
|
name="spending_tiers"
|
||||||
value={formData.status}
|
value={formData.spending_tiers}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
placeholder="Ex: 0, 10, 25, 50, 100"
|
||||||
>
|
required
|
||||||
<option value="deposit">Dépôt de propositions</option>
|
/>
|
||||||
<option value="voting">En cours de vote</option>
|
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||||
<option value="closed">Fermé</option>
|
Séparez les montants par des virgules (ex: 0, 10, 25, 50, 100)
|
||||||
</select>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<DialogFooter>
|
||||||
<label htmlFor="budget_per_user" className="block text-sm font-medium text-gray-700 mb-1">
|
<Button type="button" variant="outline" onClick={onClose}>
|
||||||
Budget par utilisateur (€) *
|
Annuler
|
||||||
</label>
|
</Button>
|
||||||
<input
|
<Button type="submit" disabled={loading}>
|
||||||
type="number"
|
{loading ? 'Modification...' : 'Modifier la campagne'}
|
||||||
id="budget_per_user"
|
</Button>
|
||||||
name="budget_per_user"
|
</DialogFooter>
|
||||||
value={formData.budget_per_user}
|
</form>
|
||||||
onChange={handleChange}
|
</DialogContent>
|
||||||
required
|
|
||||||
min="1"
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
|
||||||
placeholder="100"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="spending_tiers" className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Paliers de dépenses (€) *
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="spending_tiers"
|
|
||||||
name="spending_tiers"
|
|
||||||
value={formData.spending_tiers}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
|
||||||
placeholder="10,25,50,100"
|
|
||||||
/>
|
|
||||||
<p className="mt-1 text-sm text-gray-500">
|
|
||||||
Montants séparés par des virgules (ex: 10,25,50,100)
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center justify-end space-x-3 pt-4">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={onClose}
|
|
||||||
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
|
|
||||||
>
|
|
||||||
Annuler
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={loading}
|
|
||||||
className="px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
||||||
>
|
|
||||||
{loading ? 'Modification...' : 'Modifier la campagne'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</Dialog.Panel>
|
|
||||||
</div>
|
|
||||||
</Dialog>
|
</Dialog>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,9 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
import { Dialog } from '@headlessui/react';
|
import { Button } from '@/components/ui/button';
|
||||||
import { XMarkIcon } from '@heroicons/react/24/outline';
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
import { participantService } from '@/lib/services';
|
import { participantService } from '@/lib/services';
|
||||||
import { Participant } from '@/types';
|
import { Participant } from '@/types';
|
||||||
|
|
||||||
@@ -10,15 +11,10 @@ interface EditParticipantModalProps {
|
|||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
onSuccess: () => void;
|
onSuccess: () => void;
|
||||||
participant: Participant;
|
participant: Participant | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function EditParticipantModal({
|
export default function EditParticipantModal({ isOpen, onClose, onSuccess, participant }: EditParticipantModalProps) {
|
||||||
isOpen,
|
|
||||||
onClose,
|
|
||||||
onSuccess,
|
|
||||||
participant
|
|
||||||
}: EditParticipantModalProps) {
|
|
||||||
const [formData, setFormData] = useState({
|
const [formData, setFormData] = useState({
|
||||||
first_name: '',
|
first_name: '',
|
||||||
last_name: '',
|
last_name: '',
|
||||||
@@ -27,7 +23,6 @@ export default function EditParticipantModal({
|
|||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [error, setError] = useState('');
|
const [error, setError] = useState('');
|
||||||
|
|
||||||
// Initialiser le formulaire avec les données du participant
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (participant) {
|
if (participant) {
|
||||||
setFormData({
|
setFormData({
|
||||||
@@ -40,120 +35,101 @@ export default function EditParticipantModal({
|
|||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
if (!participant) return;
|
||||||
|
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
setError('');
|
setError('');
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await participantService.update(participant.id, formData);
|
await participantService.update(participant.id, {
|
||||||
|
first_name: formData.first_name,
|
||||||
|
last_name: formData.last_name,
|
||||||
|
email: formData.email
|
||||||
|
});
|
||||||
|
|
||||||
onSuccess();
|
onSuccess();
|
||||||
} catch (err: any) {
|
} catch (err) {
|
||||||
const errorMessage = err?.message || err?.details || 'Erreur lors de la modification du participant';
|
setError('Erreur lors de la modification du participant');
|
||||||
setError(`Erreur lors de la modification du participant: ${errorMessage}`);
|
console.error(err);
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
const { name, value } = e.target;
|
|
||||||
setFormData(prev => ({
|
setFormData(prev => ({
|
||||||
...prev,
|
...prev,
|
||||||
[name]: value
|
[e.target.name]: e.target.value
|
||||||
}));
|
}));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
if (!participant) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog open={isOpen} onClose={onClose} className="relative z-50">
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||||
<div className="fixed inset-0 bg-black/30" aria-hidden="true" />
|
<DialogContent className="sm:max-w-[500px]">
|
||||||
|
<DialogHeader>
|
||||||
<div className="fixed inset-0 flex items-center justify-center p-4">
|
<DialogTitle>Modifier le participant</DialogTitle>
|
||||||
<Dialog.Panel className="mx-auto max-w-md w-full bg-white rounded-lg shadow-xl">
|
<DialogDescription>
|
||||||
<div className="flex items-center justify-between p-6 border-b border-gray-200">
|
Modifiez les informations de ce participant.
|
||||||
<Dialog.Title className="text-lg font-medium text-gray-900">
|
</DialogDescription>
|
||||||
Modifier le participant
|
</DialogHeader>
|
||||||
</Dialog.Title>
|
|
||||||
<button
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
onClick={onClose}
|
{error && (
|
||||||
className="text-gray-400 hover:text-gray-600"
|
<div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
||||||
>
|
<p className="text-sm text-red-600 dark:text-red-400">{error}</p>
|
||||||
<XMarkIcon className="h-6 w-6" />
|
</div>
|
||||||
</button>
|
)}
|
||||||
</div>
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||||
<form onSubmit={handleSubmit} className="p-6 space-y-4">
|
<div className="space-y-2">
|
||||||
{error && (
|
<Label htmlFor="first_name">Prénom *</Label>
|
||||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md">
|
<Input
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="first_name" className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Prénom *
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="first_name"
|
id="first_name"
|
||||||
name="first_name"
|
name="first_name"
|
||||||
value={formData.first_name}
|
value={formData.first_name}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
required
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
|
||||||
placeholder="Prénom"
|
placeholder="Prénom"
|
||||||
|
required
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
<div>
|
<Label htmlFor="last_name">Nom *</Label>
|
||||||
<label htmlFor="last_name" className="block text-sm font-medium text-gray-700 mb-1">
|
<Input
|
||||||
Nom *
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="last_name"
|
id="last_name"
|
||||||
name="last_name"
|
name="last_name"
|
||||||
value={formData.last_name}
|
value={formData.last_name}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
required
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
|
||||||
placeholder="Nom"
|
placeholder="Nom"
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Email *
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
value={formData.email}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
required
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
|
||||||
placeholder="email@exemple.com"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div className="flex items-center justify-end space-x-3 pt-4">
|
|
||||||
<button
|
<div className="space-y-2">
|
||||||
type="button"
|
<Label htmlFor="email">Email *</Label>
|
||||||
onClick={onClose}
|
<Input
|
||||||
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
|
id="email"
|
||||||
>
|
name="email"
|
||||||
Annuler
|
type="email"
|
||||||
</button>
|
value={formData.email}
|
||||||
<button
|
onChange={handleChange}
|
||||||
type="submit"
|
placeholder="email@example.com"
|
||||||
disabled={loading}
|
required
|
||||||
className="px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
/>
|
||||||
>
|
</div>
|
||||||
{loading ? 'Modification...' : 'Modifier le participant'}
|
|
||||||
</button>
|
<DialogFooter>
|
||||||
</div>
|
<Button type="button" variant="outline" onClick={onClose}>
|
||||||
</form>
|
Annuler
|
||||||
</Dialog.Panel>
|
</Button>
|
||||||
</div>
|
<Button type="submit" disabled={loading}>
|
||||||
|
{loading ? 'Modification...' : 'Modifier le participant'}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,10 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
import { Dialog } from '@headlessui/react';
|
import { Button } from '@/components/ui/button';
|
||||||
import { XMarkIcon } from '@heroicons/react/24/outline';
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
import { propositionService } from '@/lib/services';
|
import { propositionService } from '@/lib/services';
|
||||||
import { Proposition } from '@/types';
|
import { Proposition } from '@/types';
|
||||||
|
|
||||||
@@ -10,15 +12,10 @@ interface EditPropositionModalProps {
|
|||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
onSuccess: () => void;
|
onSuccess: () => void;
|
||||||
proposition: Proposition;
|
proposition: Proposition | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function EditPropositionModal({
|
export default function EditPropositionModal({ isOpen, onClose, onSuccess, proposition }: EditPropositionModalProps) {
|
||||||
isOpen,
|
|
||||||
onClose,
|
|
||||||
onSuccess,
|
|
||||||
proposition
|
|
||||||
}: EditPropositionModalProps) {
|
|
||||||
const [formData, setFormData] = useState({
|
const [formData, setFormData] = useState({
|
||||||
title: '',
|
title: '',
|
||||||
description: '',
|
description: '',
|
||||||
@@ -29,7 +26,6 @@ export default function EditPropositionModal({
|
|||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [error, setError] = useState('');
|
const [error, setError] = useState('');
|
||||||
|
|
||||||
// Initialiser le formulaire avec les données de la proposition
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (proposition) {
|
if (proposition) {
|
||||||
setFormData({
|
setFormData({
|
||||||
@@ -44,158 +40,132 @@ export default function EditPropositionModal({
|
|||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
if (!proposition) return;
|
||||||
|
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
setError('');
|
setError('');
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await propositionService.update(proposition.id, formData);
|
await propositionService.update(proposition.id, {
|
||||||
|
title: formData.title,
|
||||||
|
description: formData.description,
|
||||||
|
author_first_name: formData.author_first_name,
|
||||||
|
author_last_name: formData.author_last_name,
|
||||||
|
author_email: formData.author_email
|
||||||
|
});
|
||||||
|
|
||||||
onSuccess();
|
onSuccess();
|
||||||
} catch (err: any) {
|
} catch (err) {
|
||||||
const errorMessage = err?.message || err?.details || 'Erreur lors de la modification de la proposition';
|
setError('Erreur lors de la modification de la proposition');
|
||||||
setError(`Erreur lors de la modification de la proposition: ${errorMessage}`);
|
console.error(err);
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||||
const { name, value } = e.target;
|
|
||||||
setFormData(prev => ({
|
setFormData(prev => ({
|
||||||
...prev,
|
...prev,
|
||||||
[name]: value
|
[e.target.name]: e.target.value
|
||||||
}));
|
}));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
if (!proposition) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog open={isOpen} onClose={onClose} className="relative z-50">
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||||
<div className="fixed inset-0 bg-black/30" aria-hidden="true" />
|
<DialogContent className="sm:max-w-[500px]">
|
||||||
|
<DialogHeader>
|
||||||
<div className="fixed inset-0 flex items-center justify-center p-4">
|
<DialogTitle>Modifier la proposition</DialogTitle>
|
||||||
<Dialog.Panel className="mx-auto max-w-md w-full bg-white rounded-lg shadow-xl">
|
<DialogDescription>
|
||||||
<div className="flex items-center justify-between p-6 border-b border-gray-200">
|
Modifiez les détails de cette proposition.
|
||||||
<Dialog.Title className="text-lg font-medium text-gray-900">
|
</DialogDescription>
|
||||||
Modifier la proposition
|
</DialogHeader>
|
||||||
</Dialog.Title>
|
|
||||||
<button
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
onClick={onClose}
|
{error && (
|
||||||
className="text-gray-400 hover:text-gray-600"
|
<div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
||||||
>
|
<p className="text-sm text-red-600 dark:text-red-400">{error}</p>
|
||||||
<XMarkIcon className="h-6 w-6" />
|
</div>
|
||||||
</button>
|
)}
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="title">Titre de la proposition *</Label>
|
||||||
|
<Input
|
||||||
|
id="title"
|
||||||
|
name="title"
|
||||||
|
value={formData.title}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder="Ex: Installation de bancs dans le parc"
|
||||||
|
required
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form onSubmit={handleSubmit} className="p-6 space-y-4">
|
<div className="space-y-2">
|
||||||
{error && (
|
<Label htmlFor="description">Description *</Label>
|
||||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md">
|
<Textarea
|
||||||
{error}
|
id="description"
|
||||||
</div>
|
name="description"
|
||||||
)}
|
value={formData.description}
|
||||||
|
onChange={handleChange}
|
||||||
<div>
|
placeholder="Décrivez votre proposition en détail..."
|
||||||
<label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
|
rows={4}
|
||||||
Titre de la proposition *
|
required
|
||||||
</label>
|
/>
|
||||||
<input
|
</div>
|
||||||
type="text"
|
|
||||||
id="title"
|
<div className="border-t border-slate-200 dark:border-slate-700 pt-4">
|
||||||
name="title"
|
<h3 className="text-sm font-medium text-slate-900 dark:text-slate-100 mb-3">
|
||||||
value={formData.title}
|
Informations de l'auteur
|
||||||
onChange={handleChange}
|
</h3>
|
||||||
required
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
<div className="space-y-2">
|
||||||
placeholder="Titre de la proposition"
|
<Label htmlFor="author_first_name">Prénom *</Label>
|
||||||
/>
|
<Input
|
||||||
</div>
|
id="author_first_name"
|
||||||
|
name="author_first_name"
|
||||||
<div>
|
value={formData.author_first_name}
|
||||||
<label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Description *
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
id="description"
|
|
||||||
name="description"
|
|
||||||
value={formData.description}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
rows={4}
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
|
||||||
placeholder="Décrivez votre proposition en détail..."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="border-t border-gray-200 pt-4">
|
|
||||||
<h3 className="text-sm font-medium text-gray-900 mb-3">Informations de l'auteur</h3>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
||||||
<div>
|
|
||||||
<label htmlFor="author_first_name" className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Prénom *
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="author_first_name"
|
|
||||||
name="author_first_name"
|
|
||||||
value={formData.author_first_name}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
|
||||||
placeholder="Prénom"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="author_last_name" className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Nom *
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="author_last_name"
|
|
||||||
name="author_last_name"
|
|
||||||
value={formData.author_last_name}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
|
||||||
placeholder="Nom"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-3">
|
|
||||||
<label htmlFor="author_email" className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Email *
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="author_email"
|
|
||||||
name="author_email"
|
|
||||||
value={formData.author_email}
|
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
|
placeholder="Prénom"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="author_last_name">Nom *</Label>
|
||||||
|
<Input
|
||||||
|
id="author_last_name"
|
||||||
|
name="author_last_name"
|
||||||
|
value={formData.author_last_name}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder="Nom"
|
||||||
required
|
required
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
|
||||||
placeholder="email@exemple.com"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="space-y-2 mt-3">
|
||||||
<div className="flex items-center justify-end space-x-3 pt-4">
|
<Label htmlFor="author_email">Email *</Label>
|
||||||
<button
|
<Input
|
||||||
type="button"
|
id="author_email"
|
||||||
onClick={onClose}
|
name="author_email"
|
||||||
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
|
type="email"
|
||||||
>
|
value={formData.author_email}
|
||||||
Annuler
|
onChange={handleChange}
|
||||||
</button>
|
placeholder="email@example.com"
|
||||||
<button
|
required
|
||||||
type="submit"
|
/>
|
||||||
disabled={loading}
|
|
||||||
className="px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
||||||
>
|
|
||||||
{loading ? 'Modification...' : 'Modifier la proposition'}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</div>
|
||||||
</Dialog.Panel>
|
|
||||||
</div>
|
<DialogFooter>
|
||||||
|
<Button type="button" variant="outline" onClick={onClose}>
|
||||||
|
Annuler
|
||||||
|
</Button>
|
||||||
|
<Button type="submit" disabled={loading}>
|
||||||
|
{loading ? 'Modification...' : 'Modifier la proposition'}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
68
src/components/Navigation.tsx
Normal file
68
src/components/Navigation.tsx
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
'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';
|
||||||
|
|
||||||
|
interface NavigationProps {
|
||||||
|
showBackButton?: boolean;
|
||||||
|
backUrl?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
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">
|
||||||
|
<div className="p-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
{showBackButton && (
|
||||||
|
<Button asChild variant="ghost" size="sm">
|
||||||
|
<Link href={backUrl}>
|
||||||
|
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||||
|
Retour
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<div className="text-sm text-slate-600 dark:text-slate-300">
|
||||||
|
Mes Budgets Participatifs
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
53
src/components/ui/avatar.tsx
Normal file
53
src/components/ui/avatar.tsx
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as AvatarPrimitive from "@radix-ui/react-avatar"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Avatar({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<AvatarPrimitive.Root
|
||||||
|
data-slot="avatar"
|
||||||
|
className={cn(
|
||||||
|
"relative flex size-8 shrink-0 overflow-hidden rounded-full",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AvatarImage({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
|
||||||
|
return (
|
||||||
|
<AvatarPrimitive.Image
|
||||||
|
data-slot="avatar-image"
|
||||||
|
className={cn("aspect-square size-full", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AvatarFallback({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
|
||||||
|
return (
|
||||||
|
<AvatarPrimitive.Fallback
|
||||||
|
data-slot="avatar-fallback"
|
||||||
|
className={cn(
|
||||||
|
"bg-muted flex size-full items-center justify-center rounded-full",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Avatar, AvatarImage, AvatarFallback }
|
||||||
46
src/components/ui/badge.tsx
Normal file
46
src/components/ui/badge.tsx
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import { Slot } from "@radix-ui/react-slot"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const badgeVariants = cva(
|
||||||
|
"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
|
||||||
|
secondary:
|
||||||
|
"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
||||||
|
destructive:
|
||||||
|
"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||||
|
outline:
|
||||||
|
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
function Badge({
|
||||||
|
className,
|
||||||
|
variant,
|
||||||
|
asChild = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"span"> &
|
||||||
|
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
||||||
|
const Comp = asChild ? Slot : "span"
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="badge"
|
||||||
|
className={cn(badgeVariants({ variant }), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Badge, badgeVariants }
|
||||||
59
src/components/ui/button.tsx
Normal file
59
src/components/ui/button.tsx
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import { Slot } from "@radix-ui/react-slot"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const buttonVariants = cva(
|
||||||
|
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
|
||||||
|
destructive:
|
||||||
|
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||||
|
outline:
|
||||||
|
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||||
|
secondary:
|
||||||
|
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
|
||||||
|
ghost:
|
||||||
|
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||||
|
link: "text-primary underline-offset-4 hover:underline",
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||||
|
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||||
|
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||||
|
icon: "size-9",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
size: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
function Button({
|
||||||
|
className,
|
||||||
|
variant,
|
||||||
|
size,
|
||||||
|
asChild = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"button"> &
|
||||||
|
VariantProps<typeof buttonVariants> & {
|
||||||
|
asChild?: boolean
|
||||||
|
}) {
|
||||||
|
const Comp = asChild ? Slot : "button"
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="button"
|
||||||
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Button, buttonVariants }
|
||||||
92
src/components/ui/card.tsx
Normal file
92
src/components/ui/card.tsx
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card"
|
||||||
|
className={cn(
|
||||||
|
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-header"
|
||||||
|
className={cn(
|
||||||
|
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-title"
|
||||||
|
className={cn("leading-none font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-description"
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-action"
|
||||||
|
className={cn(
|
||||||
|
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-content"
|
||||||
|
className={cn("px-6", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-footer"
|
||||||
|
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardFooter,
|
||||||
|
CardTitle,
|
||||||
|
CardAction,
|
||||||
|
CardDescription,
|
||||||
|
CardContent,
|
||||||
|
}
|
||||||
143
src/components/ui/dialog.tsx
Normal file
143
src/components/ui/dialog.tsx
Normal file
@@ -0,0 +1,143 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
||||||
|
import { XIcon } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Dialog({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
|
||||||
|
return <DialogPrimitive.Root data-slot="dialog" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
|
||||||
|
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogPortal({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
|
||||||
|
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogClose({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
|
||||||
|
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogOverlay({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
|
||||||
|
return (
|
||||||
|
<DialogPrimitive.Overlay
|
||||||
|
data-slot="dialog-overlay"
|
||||||
|
className={cn(
|
||||||
|
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogContent({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
showCloseButton = true,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
|
||||||
|
showCloseButton?: boolean
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<DialogPortal data-slot="dialog-portal">
|
||||||
|
<DialogOverlay />
|
||||||
|
<DialogPrimitive.Content
|
||||||
|
data-slot="dialog-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
{showCloseButton && (
|
||||||
|
<DialogPrimitive.Close
|
||||||
|
data-slot="dialog-close"
|
||||||
|
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
|
||||||
|
>
|
||||||
|
<XIcon />
|
||||||
|
<span className="sr-only">Close</span>
|
||||||
|
</DialogPrimitive.Close>
|
||||||
|
)}
|
||||||
|
</DialogPrimitive.Content>
|
||||||
|
</DialogPortal>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="dialog-header"
|
||||||
|
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="dialog-footer"
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogTitle({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
|
||||||
|
return (
|
||||||
|
<DialogPrimitive.Title
|
||||||
|
data-slot="dialog-title"
|
||||||
|
className={cn("text-lg leading-none font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogDescription({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
|
||||||
|
return (
|
||||||
|
<DialogPrimitive.Description
|
||||||
|
data-slot="dialog-description"
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Dialog,
|
||||||
|
DialogClose,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogOverlay,
|
||||||
|
DialogPortal,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
}
|
||||||
21
src/components/ui/input.tsx
Normal file
21
src/components/ui/input.tsx
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
type={type}
|
||||||
|
data-slot="input"
|
||||||
|
className={cn(
|
||||||
|
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||||
|
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
||||||
|
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Input }
|
||||||
24
src/components/ui/label.tsx
Normal file
24
src/components/ui/label.tsx
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as LabelPrimitive from "@radix-ui/react-label"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Label({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<LabelPrimitive.Root
|
||||||
|
data-slot="label"
|
||||||
|
className={cn(
|
||||||
|
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Label }
|
||||||
31
src/components/ui/progress.tsx
Normal file
31
src/components/ui/progress.tsx
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ProgressPrimitive from "@radix-ui/react-progress"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Progress({
|
||||||
|
className,
|
||||||
|
value,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<ProgressPrimitive.Root
|
||||||
|
data-slot="progress"
|
||||||
|
className={cn(
|
||||||
|
"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ProgressPrimitive.Indicator
|
||||||
|
data-slot="progress-indicator"
|
||||||
|
className="bg-primary h-full w-full flex-1 transition-all"
|
||||||
|
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
|
||||||
|
/>
|
||||||
|
</ProgressPrimitive.Root>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Progress }
|
||||||
185
src/components/ui/select.tsx
Normal file
185
src/components/ui/select.tsx
Normal file
@@ -0,0 +1,185 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as SelectPrimitive from "@radix-ui/react-select"
|
||||||
|
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Select({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
|
||||||
|
return <SelectPrimitive.Root data-slot="select" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectGroup({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
|
||||||
|
return <SelectPrimitive.Group data-slot="select-group" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectValue({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
|
||||||
|
return <SelectPrimitive.Value data-slot="select-value" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectTrigger({
|
||||||
|
className,
|
||||||
|
size = "default",
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
|
||||||
|
size?: "sm" | "default"
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Trigger
|
||||||
|
data-slot="select-trigger"
|
||||||
|
data-size={size}
|
||||||
|
className={cn(
|
||||||
|
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<SelectPrimitive.Icon asChild>
|
||||||
|
<ChevronDownIcon className="size-4 opacity-50" />
|
||||||
|
</SelectPrimitive.Icon>
|
||||||
|
</SelectPrimitive.Trigger>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectContent({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
position = "popper",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Portal>
|
||||||
|
<SelectPrimitive.Content
|
||||||
|
data-slot="select-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
|
||||||
|
position === "popper" &&
|
||||||
|
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
position={position}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<SelectScrollUpButton />
|
||||||
|
<SelectPrimitive.Viewport
|
||||||
|
className={cn(
|
||||||
|
"p-1",
|
||||||
|
position === "popper" &&
|
||||||
|
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</SelectPrimitive.Viewport>
|
||||||
|
<SelectScrollDownButton />
|
||||||
|
</SelectPrimitive.Content>
|
||||||
|
</SelectPrimitive.Portal>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectLabel({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Label
|
||||||
|
data-slot="select-label"
|
||||||
|
className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectItem({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Item
|
||||||
|
data-slot="select-item"
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="absolute right-2 flex size-3.5 items-center justify-center">
|
||||||
|
<SelectPrimitive.ItemIndicator>
|
||||||
|
<CheckIcon className="size-4" />
|
||||||
|
</SelectPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||||
|
</SelectPrimitive.Item>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectSeparator({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Separator
|
||||||
|
data-slot="select-separator"
|
||||||
|
className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectScrollUpButton({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.ScrollUpButton
|
||||||
|
data-slot="select-scroll-up-button"
|
||||||
|
className={cn(
|
||||||
|
"flex cursor-default items-center justify-center py-1",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ChevronUpIcon className="size-4" />
|
||||||
|
</SelectPrimitive.ScrollUpButton>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectScrollDownButton({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.ScrollDownButton
|
||||||
|
data-slot="select-scroll-down-button"
|
||||||
|
className={cn(
|
||||||
|
"flex cursor-default items-center justify-center py-1",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ChevronDownIcon className="size-4" />
|
||||||
|
</SelectPrimitive.ScrollDownButton>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectGroup,
|
||||||
|
SelectItem,
|
||||||
|
SelectLabel,
|
||||||
|
SelectScrollDownButton,
|
||||||
|
SelectScrollUpButton,
|
||||||
|
SelectSeparator,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
}
|
||||||
139
src/components/ui/sheet.tsx
Normal file
139
src/components/ui/sheet.tsx
Normal file
@@ -0,0 +1,139 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as SheetPrimitive from "@radix-ui/react-dialog"
|
||||||
|
import { XIcon } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
|
||||||
|
return <SheetPrimitive.Root data-slot="sheet" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
|
||||||
|
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetClose({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
|
||||||
|
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetPortal({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
|
||||||
|
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetOverlay({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
|
||||||
|
return (
|
||||||
|
<SheetPrimitive.Overlay
|
||||||
|
data-slot="sheet-overlay"
|
||||||
|
className={cn(
|
||||||
|
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetContent({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
side = "right",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
|
||||||
|
side?: "top" | "right" | "bottom" | "left"
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<SheetPortal>
|
||||||
|
<SheetOverlay />
|
||||||
|
<SheetPrimitive.Content
|
||||||
|
data-slot="sheet-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
||||||
|
side === "right" &&
|
||||||
|
"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
|
||||||
|
side === "left" &&
|
||||||
|
"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
|
||||||
|
side === "top" &&
|
||||||
|
"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
|
||||||
|
side === "bottom" &&
|
||||||
|
"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
|
||||||
|
<XIcon className="size-4" />
|
||||||
|
<span className="sr-only">Close</span>
|
||||||
|
</SheetPrimitive.Close>
|
||||||
|
</SheetPrimitive.Content>
|
||||||
|
</SheetPortal>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sheet-header"
|
||||||
|
className={cn("flex flex-col gap-1.5 p-4", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sheet-footer"
|
||||||
|
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetTitle({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
|
||||||
|
return (
|
||||||
|
<SheetPrimitive.Title
|
||||||
|
data-slot="sheet-title"
|
||||||
|
className={cn("text-foreground font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetDescription({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
|
||||||
|
return (
|
||||||
|
<SheetPrimitive.Description
|
||||||
|
data-slot="sheet-description"
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Sheet,
|
||||||
|
SheetTrigger,
|
||||||
|
SheetClose,
|
||||||
|
SheetContent,
|
||||||
|
SheetHeader,
|
||||||
|
SheetFooter,
|
||||||
|
SheetTitle,
|
||||||
|
SheetDescription,
|
||||||
|
}
|
||||||
66
src/components/ui/tabs.tsx
Normal file
66
src/components/ui/tabs.tsx
Normal file
@@ -0,0 +1,66 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as TabsPrimitive from "@radix-ui/react-tabs"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Tabs({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<TabsPrimitive.Root
|
||||||
|
data-slot="tabs"
|
||||||
|
className={cn("flex flex-col gap-2", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function TabsList({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof TabsPrimitive.List>) {
|
||||||
|
return (
|
||||||
|
<TabsPrimitive.List
|
||||||
|
data-slot="tabs-list"
|
||||||
|
className={cn(
|
||||||
|
"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function TabsTrigger({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
|
||||||
|
return (
|
||||||
|
<TabsPrimitive.Trigger
|
||||||
|
data-slot="tabs-trigger"
|
||||||
|
className={cn(
|
||||||
|
"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function TabsContent({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<TabsPrimitive.Content
|
||||||
|
data-slot="tabs-content"
|
||||||
|
className={cn("flex-1 outline-none", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Tabs, TabsList, TabsTrigger, TabsContent }
|
||||||
18
src/components/ui/textarea.tsx
Normal file
18
src/components/ui/textarea.tsx
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
|
||||||
|
return (
|
||||||
|
<textarea
|
||||||
|
data-slot="textarea"
|
||||||
|
className={cn(
|
||||||
|
"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Textarea }
|
||||||
6
src/lib/utils.ts
Normal file
6
src/lib/utils.ts
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
import { clsx, type ClassValue } from "clsx"
|
||||||
|
import { twMerge } from "tailwind-merge"
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs))
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user