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

Meilleur design via Shadcn/ui

Browse Source
This commit is contained in:
Yannick Le Duc
2025-08-25 15:50:16 +02:00
parent 4e8b592feb
commit 46993d2c9f
31 changed files with 3536 additions and 1664 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
src/components/AddParticipantModal.tsx
View File

@@ -1,8 +1,9 @@
'use client';
import { useState } from 'react';
import { Dialog } from '@headlessui/react';
import { XMarkIcon } from '@heroicons/react/24/outline';
import { Button } from '@/components/ui/button';
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';
interface AddParticipantModalProps {
@@ -10,16 +11,10 @@ interface AddParticipantModalProps {
onClose: () => void;
onSuccess: () => void;
campaignId: string;
campaignTitle: string;
campaignTitle?: string;
}
export default function AddParticipantModal({
isOpen,
onClose,
onSuccess,
campaignId,
campaignTitle
}: AddParticipantModalProps) {
export default function AddParticipantModal({ isOpen, onClose, onSuccess, campaignId, campaignTitle }: AddParticipantModalProps) {
const [formData, setFormData] = useState({
first_name: '',
last_name: '',
@@ -40,8 +35,8 @@ export default function AddParticipantModal({
last_name: formData.last_name,
email: formData.email
});
onSuccess();
// Reset form
setFormData({
first_name: '',
last_name: '',
@@ -56,111 +51,78 @@ export default function AddParticipantModal({
};
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setFormData(prev => ({
...prev,
[name]: value
[e.target.name]: e.target.value
}));
};
return (
<Dialog open={isOpen} onClose={onClose} className="relative z-50">
<div className="fixed inset-0 bg-black/30" aria-hidden="true" />
<div className="fixed inset-0 flex items-center justify-center p-4">
<Dialog.Panel className="mx-auto max-w-md w-full bg-white rounded-lg shadow-xl">
<div className="flex items-center justify-between p-6 border-b border-gray-200">
<Dialog.Title className="text-lg font-medium text-gray-900">
Ajouter un participant
</Dialog.Title>
<button
onClick={onClose}
className="text-gray-400 hover:text-gray-600"
>
<XMarkIcon className="h-6 w-6" />
</button>
</div>
<div className="px-6 py-4 bg-green-50 border-b border-gray-200">
<p className="text-sm text-green-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="first_name" className="block text-sm font-medium text-gray-700 mb-1">
Prénom *
</label>
<input
type="text"
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="sm:max-w-[500px]">
<DialogHeader>
<DialogTitle>Ajouter un participant</DialogTitle>
<DialogDescription>
{campaignTitle && `Ajoutez un nouveau participant à la campagne "${campaignTitle}".`}
{!campaignTitle && 'Ajoutez un nouveau participant à cette campagne.'}
</DialogDescription>
</DialogHeader>
<form onSubmit={handleSubmit} className="space-y-4">
{error && (
<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>
</div>
)}
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div className="space-y-2">
<Label htmlFor="first_name">Prénom *</Label>
<Input
id="first_name"
name="first_name"
value={formData.first_name}
onChange={handleChange}
placeholder="Prénom"
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>
<label htmlFor="last_name" className="block text-sm font-medium text-gray-700 mb-1">
Nom *
</label>
<input
type="text"
<div className="space-y-2">
<Label htmlFor="last_name">Nom *</Label>
<Input
id="last_name"
name="last_name"
value={formData.last_name}
onChange={handleChange}
placeholder="Nom"
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>
<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
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 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 ? 'Ajout...' : 'Ajouter le participant'}
</button>
</div>
</form>
</Dialog.Panel>
</div>
</div>
<div className="space-y-2">
<Label htmlFor="email">Email *</Label>
<Input
id="email"
name="email"
type="email"
value={formData.email}
onChange={handleChange}
placeholder="email@example.com"
required
/>
</div>
<DialogFooter>
<Button type="button" variant="outline" onClick={onClose}>
Annuler
</Button>
<Button type="submit" disabled={loading}>
{loading ? 'Ajout...' : 'Ajouter le participant'}
</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
);
}

244
src/components/AddPropositionModal.tsx
View File

@@ -1,8 +1,10 @@
'use client';
import { useState } from 'react';
import { Dialog } from '@headlessui/react';
import { XMarkIcon } from '@heroicons/react/24/outline';
import { Button } from '@/components/ui/button';
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';
interface AddPropositionModalProps {
@@ -10,16 +12,9 @@ interface AddPropositionModalProps {
onClose: () => void;
onSuccess: () => void;
campaignId: string;
campaignTitle: string;
}
export default function AddPropositionModal({
isOpen,
onClose,
onSuccess,
campaignId,
campaignTitle
}: AddPropositionModalProps) {
export default function AddPropositionModal({ isOpen, onClose, onSuccess, campaignId }: AddPropositionModalProps) {
const [formData, setFormData] = useState({
title: '',
description: '',
@@ -44,17 +39,17 @@ export default function AddPropositionModal({
author_last_name: formData.author_last_name,
author_email: formData.author_email
});
onSuccess();
// Reset form
setFormData({
title: '',
description: '',
author_first_name: '',
author_last_name: '',
author_email: ''
author_first_name: 'admin',
author_last_name: 'admin',
author_email: 'admin@example.com'
});
} catch (err) {
setError('Erreur lors de l\'ajout de la proposition');
setError('Erreur lors de la création de la proposition');
console.error(err);
} finally {
setLoading(false);
@@ -62,149 +57,106 @@ export default function AddPropositionModal({
};
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const { name, value } = e.target;
setFormData(prev => ({
...prev,
[name]: value
[e.target.name]: e.target.value
}));
};
return (
<Dialog open={isOpen} onClose={onClose} className="relative z-50">
<div className="fixed inset-0 bg-black/30" aria-hidden="true" />
<div className="fixed inset-0 flex items-center justify-center p-4">
<Dialog.Panel className="mx-auto max-w-md w-full bg-white rounded-lg shadow-xl">
<div className="flex items-center justify-between p-6 border-b border-gray-200">
<Dialog.Title className="text-lg font-medium text-gray-900">
Ajouter une proposition
</Dialog.Title>
<button
onClick={onClose}
className="text-gray-400 hover:text-gray-600"
>
<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"
/>
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="sm:max-w-[500px]">
<DialogHeader>
<DialogTitle>Ajouter une proposition</DialogTitle>
<DialogDescription>
Créez une nouvelle proposition pour cette campagne de budget participatif.
</DialogDescription>
</DialogHeader>
<form onSubmit={handleSubmit} className="space-y-4">
{error && (
<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>
</div>
<div>
<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}
)}
<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 className="space-y-2">
<Label htmlFor="description">Description *</Label>
<Textarea
id="description"
name="description"
value={formData.description}
onChange={handleChange}
placeholder="Décrivez votre proposition en détail..."
rows={4}
required
/>
</div>
<div className="border-t border-slate-200 dark:border-slate-700 pt-4">
<h3 className="text-sm font-medium text-slate-900 dark:text-slate-100 mb-3">
Informations de l'auteur
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div className="space-y-2">
<Label htmlFor="author_first_name">Prénom *</Label>
<Input
id="author_first_name"
name="author_first_name"
value={formData.author_first_name}
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
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 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 ? 'Ajout...' : 'Ajouter la proposition'}
</button>
<div className="space-y-2 mt-3">
<Label htmlFor="author_email">Email *</Label>
<Input
id="author_email"
name="author_email"
type="email"
value={formData.author_email}
onChange={handleChange}
placeholder="email@example.com"
required
/>
</div>
</form>
</Dialog.Panel>
</div>
</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>
);
}

243
src/components/CreateCampaignModal.tsx
View File

@@ -1,10 +1,11 @@
'use client';
import { useState } from 'react';
import { Dialog } from '@headlessui/react';
import { XMarkIcon } from '@heroicons/react/24/outline';
import { Button } from '@/components/ui/button';
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 { CampaignStatus } from '@/types';
interface CreateCampaignModalProps {
isOpen: boolean;
@@ -16,9 +17,8 @@ export default function CreateCampaignModal({ isOpen, onClose, onSuccess }: Crea
const [formData, setFormData] = useState({
title: '',
description: '',
status: 'deposit' as CampaignStatus,
budget_per_user: 100,
spending_tiers: '10,25,50,100'
budget_per_user: '',
spending_tiers: ''
});
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
@@ -29,16 +29,16 @@ export default function CreateCampaignModal({ isOpen, onClose, onSuccess }: Crea
setError('');
try {
await campaignService.create(formData);
onSuccess();
// Reset form
setFormData({
title: '',
description: '',
status: 'deposit',
budget_per_user: 100,
spending_tiers: '10,25,50,100'
await campaignService.create({
title: formData.title,
description: formData.description,
budget_per_user: parseInt(formData.budget_per_user),
spending_tiers: formData.spending_tiers,
status: 'deposit'
});
onSuccess();
setFormData({ title: '', description: '', budget_per_user: '', spending_tiers: '' });
} catch (err) {
setError('Erreur lors de la création de la campagne');
console.error(err);
@@ -47,143 +47,94 @@ export default function CreateCampaignModal({ isOpen, onClose, onSuccess }: Crea
}
};
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
const { name, value } = e.target;
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
setFormData(prev => ({
...prev,
[name]: name === 'budget_per_user' ? parseInt(value) || 0 : value
[e.target.name]: e.target.value
}));
};
return (
<Dialog open={isOpen} onClose={onClose} className="relative z-50">
<div className="fixed inset-0 bg-black/30" aria-hidden="true" />
<div className="fixed inset-0 flex items-center justify-center p-4">
<Dialog.Panel className="mx-auto max-w-md w-full bg-white rounded-lg shadow-xl">
<div className="flex items-center justify-between p-6 border-b border-gray-200">
<Dialog.Title className="text-lg font-medium text-gray-900">
Créer une nouvelle campagne
</Dialog.Title>
<button
onClick={onClose}
className="text-gray-400 hover:text-gray-600"
>
<XMarkIcon className="h-6 w-6" />
</button>
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="sm:max-w-[500px]">
<DialogHeader>
<DialogTitle>Créer une nouvelle campagne</DialogTitle>
<DialogDescription>
Configurez les paramètres de votre campagne de budget participatif.
</DialogDescription>
</DialogHeader>
<form onSubmit={handleSubmit} className="space-y-4">
{error && (
<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>
</div>
)}
<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>
<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 *
</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 campagne"
/>
</div>
<div>
<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={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"
placeholder="Description de la campagne"
/>
</div>
<div>
<label htmlFor="status" className="block text-sm font-medium text-gray-700 mb-1">
État initial
</label>
<select
id="status"
name="status"
value={formData.status}
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"
>
<option value="deposit">Dépôt de propositions</option>
<option value="voting">En cours de vote</option>
<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>
<div className="space-y-2">
<Label htmlFor="description">Description *</Label>
<Textarea
id="description"
name="description"
value={formData.description}
onChange={handleChange}
placeholder="Décrivez l'objectif de cette campagne..."
rows={3}
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="budget_per_user">Budget par utilisateur (€) *</Label>
<Input
id="budget_per_user"
name="budget_per_user"
type="number"
value={formData.budget_per_user}
onChange={handleChange}
placeholder="100"
min="1"
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="spending_tiers">Paliers de dépense *</Label>
<Input
id="spending_tiers"
name="spending_tiers"
value={formData.spending_tiers}
onChange={handleChange}
placeholder="Ex: 0, 10, 25, 50, 100"
required
/>
<p className="text-xs text-slate-500 dark:text-slate-400">
Séparez les montants par des virgules (ex: 0, 10, 25, 50, 100)
</p>
</div>
<DialogFooter>
<Button type="button" variant="outline" onClick={onClose}>
Annuler
</Button>
<Button type="submit" disabled={loading}>
{loading ? 'Création...' : 'Créer la campagne'}
</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
);
}

148
src/components/DeleteCampaignModal.tsx
View File

@@ -1,8 +1,8 @@
'use client';
import { useState } from 'react';
import { Dialog } from '@headlessui/react';
import { XMarkIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { AlertTriangle } from 'lucide-react';
import { campaignService } from '@/lib/services';
import { Campaign } from '@/types';
@@ -10,109 +10,85 @@ interface DeleteCampaignModalProps {
isOpen: boolean;
onClose: () => void;
onSuccess: () => void;
campaign: Campaign;
campaign: Campaign | null;
}
export default function DeleteCampaignModal({
isOpen,
onClose,
onSuccess,
campaign
}: DeleteCampaignModalProps) {
export default function DeleteCampaignModal({ isOpen, onClose, onSuccess, campaign }: DeleteCampaignModalProps) {
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const handleDelete = async () => {
console.log('Début de la suppression de la campagne:', campaign.id);
if (!campaign) return;
setLoading(true);
setError('');
try {
await campaignService.delete(campaign.id);
console.log('Suppression réussie, appel de onSuccess');
onSuccess();
} catch (err: any) {
console.error('Erreur dans le modal de suppression:', err);
const errorMessage = err?.message || err?.details || 'Erreur lors de la suppression de la campagne';
setError(`Erreur lors de la suppression de la campagne: ${errorMessage}`);
} catch (err) {
setError('Erreur lors de la suppression de la campagne');
console.error(err);
} finally {
setLoading(false);
}
};
if (!campaign) return null;
return (
<Dialog open={isOpen} onClose={onClose} className="relative z-50">
<div className="fixed inset-0 bg-black/30" aria-hidden="true" />
<div className="fixed inset-0 flex items-center justify-center p-4">
<Dialog.Panel className="mx-auto max-w-md w-full bg-white rounded-lg shadow-xl">
<div className="flex items-center justify-between p-6 border-b border-gray-200">
<Dialog.Title className="text-lg font-medium text-gray-900">
Supprimer la campagne
</Dialog.Title>
<button
onClick={onClose}
className="text-gray-400 hover:text-gray-600"
>
<XMarkIcon className="h-6 w-6" />
</button>
</div>
<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>
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<AlertTriangle className="h-5 w-5 text-red-500" />
Supprimer la campagne
</DialogTitle>
<DialogDescription>
Cette action est irréversible. Toutes les données associées à cette campagne seront définitivement supprimées.
</DialogDescription>
</DialogHeader>
<div className="space-y-4">
{error && (
<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>
</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>
</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>
);
}

143
src/components/DeleteParticipantModal.tsx
View File

@@ -1,8 +1,8 @@
'use client';
import { useState } from 'react';
import { Dialog } from '@headlessui/react';
import { XMarkIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { AlertTriangle } from 'lucide-react';
import { participantService } from '@/lib/services';
import { Participant } from '@/types';
@@ -10,104 +10,85 @@ interface DeleteParticipantModalProps {
isOpen: boolean;
onClose: () => void;
onSuccess: () => void;
participant: Participant;
participant: Participant | null;
}
export default function DeleteParticipantModal({
isOpen,
onClose,
onSuccess,
participant
}: DeleteParticipantModalProps) {
export default function DeleteParticipantModal({ isOpen, onClose, onSuccess, participant }: DeleteParticipantModalProps) {
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const handleDelete = async () => {
if (!participant) return;
setLoading(true);
setError('');
try {
await participantService.delete(participant.id);
onSuccess();
} catch (err: any) {
const errorMessage = err?.message || err?.details || 'Erreur lors de la suppression du participant';
setError(`Erreur lors de la suppression du participant: ${errorMessage}`);
} catch (err) {
setError('Erreur lors de la suppression du participant');
console.error(err);
} finally {
setLoading(false);
}
};
if (!participant) return null;
return (
<Dialog open={isOpen} onClose={onClose} className="relative z-50">
<div className="fixed inset-0 bg-black/30" aria-hidden="true" />
<div className="fixed inset-0 flex items-center justify-center p-4">
<Dialog.Panel className="mx-auto max-w-md w-full bg-white rounded-lg shadow-xl">
<div className="flex items-center justify-between p-6 border-b border-gray-200">
<Dialog.Title className="text-lg font-medium text-gray-900">
Supprimer le participant
</Dialog.Title>
<button
onClick={onClose}
className="text-gray-400 hover:text-gray-600"
>
<XMarkIcon className="h-6 w-6" />
</button>
</div>
<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>
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<AlertTriangle className="h-5 w-5 text-red-500" />
Supprimer le participant
</DialogTitle>
<DialogDescription>
Cette action est irréversible. Le participant sera définitivement supprimé.
</DialogDescription>
</DialogHeader>
<div className="space-y-4">
{error && (
<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>
</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>
</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>
);
}

143
src/components/DeletePropositionModal.tsx
View File

@@ -1,8 +1,8 @@
'use client';
import { useState } from 'react';
import { Dialog } from '@headlessui/react';
import { XMarkIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { AlertTriangle } from 'lucide-react';
import { propositionService } from '@/lib/services';
import { Proposition } from '@/types';
@@ -10,101 +10,88 @@ interface DeletePropositionModalProps {
isOpen: boolean;
onClose: () => void;
onSuccess: () => void;
proposition: Proposition;
proposition: Proposition | null;
}
export default function DeletePropositionModal({
isOpen,
onClose,
onSuccess,
proposition
}: DeletePropositionModalProps) {
export default function DeletePropositionModal({ isOpen, onClose, onSuccess, proposition }: DeletePropositionModalProps) {
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const handleDelete = async () => {
if (!proposition) return;
setLoading(true);
setError('');
try {
await propositionService.delete(proposition.id);
onSuccess();
} catch (err: any) {
const errorMessage = err?.message || err?.details || 'Erreur lors de la suppression de la proposition';
setError(`Erreur lors de la suppression de la proposition: ${errorMessage}`);
} catch (err) {
setError('Erreur lors de la suppression de la proposition');
console.error(err);
} finally {
setLoading(false);
}
};
if (!proposition) return null;
return (
<Dialog open={isOpen} onClose={onClose} className="relative z-50">
<div className="fixed inset-0 bg-black/30" aria-hidden="true" />
<div className="fixed inset-0 flex items-center justify-center p-4">
<Dialog.Panel className="mx-auto max-w-md w-full bg-white rounded-lg shadow-xl">
<div className="flex items-center justify-between p-6 border-b border-gray-200">
<Dialog.Title className="text-lg font-medium text-gray-900">
Supprimer la proposition
</Dialog.Title>
<button
onClick={onClose}
className="text-gray-400 hover:text-gray-600"
>
<XMarkIcon className="h-6 w-6" />
</button>
</div>
<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>
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<AlertTriangle className="h-5 w-5 text-red-500" />
Supprimer la proposition
</DialogTitle>
<DialogDescription>
Cette action est irréversible. La proposition sera définitivement supprimée.
</DialogDescription>
</DialogHeader>
<div className="space-y-4">
{error && (
<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>
</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>
</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>
);
}

268
src/components/EditCampaignModal.tsx
View File

@@ -1,8 +1,11 @@
'use client';
import { useState, useEffect } from 'react';
import { Dialog } from '@headlessui/react';
import { XMarkIcon } from '@heroicons/react/24/outline';
import { Button } from '@/components/ui/button';
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 { Campaign, CampaignStatus } from '@/types';
@@ -10,33 +13,27 @@ interface EditCampaignModalProps {
isOpen: boolean;
onClose: () => void;
onSuccess: () => void;
campaign: Campaign;
campaign: Campaign | null;
}
export default function EditCampaignModal({
isOpen,
onClose,
onSuccess,
campaign
}: EditCampaignModalProps) {
export default function EditCampaignModal({ isOpen, onClose, onSuccess, campaign }: EditCampaignModalProps) {
const [formData, setFormData] = useState({
title: '',
description: '',
status: 'deposit' as CampaignStatus,
budget_per_user: 100,
budget_per_user: '',
spending_tiers: ''
});
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
// Initialiser le formulaire avec les données de la campagne
useEffect(() => {
if (campaign) {
setFormData({
title: campaign.title,
description: campaign.description,
status: campaign.status,
budget_per_user: campaign.budget_per_user,
budget_per_user: campaign.budget_per_user.toString(),
spending_tiers: campaign.spending_tiers
});
}
@@ -44,11 +41,20 @@ export default function EditCampaignModal({
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!campaign) return;
setLoading(true);
setError('');
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();
} catch (err) {
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 { name, value } = e.target;
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
setFormData(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 (
<Dialog open={isOpen} onClose={onClose} className="relative z-50">
<div className="fixed inset-0 bg-black/30" aria-hidden="true" />
<div className="fixed inset-0 flex items-center justify-center p-4">
<Dialog.Panel className="mx-auto max-w-md w-full bg-white rounded-lg shadow-xl">
<div className="flex items-center justify-between p-6 border-b border-gray-200">
<Dialog.Title className="text-lg font-medium text-gray-900">
Modifier la campagne
</Dialog.Title>
<button
onClick={onClose}
className="text-gray-400 hover:text-gray-600"
>
<XMarkIcon className="h-6 w-6" />
</button>
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="sm:max-w-[500px]">
<DialogHeader>
<DialogTitle>Modifier la campagne</DialogTitle>
<DialogDescription>
Modifiez les paramètres de votre campagne de budget participatif.
</DialogDescription>
</DialogHeader>
<form onSubmit={handleSubmit} className="space-y-4">
{error && (
<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>
</div>
)}
<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>
<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 *
</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 campagne"
/>
</div>
<div>
<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={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"
placeholder="Description de la campagne"
/>
</div>
<div>
<label htmlFor="status" className="block text-sm font-medium text-gray-700 mb-1">
État
</label>
<select
id="status"
name="status"
value={formData.status}
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"
>
<option value="deposit">Dépôt de propositions</option>
<option value="voting">En cours de vote</option>
<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 ? 'Modification...' : 'Modifier la campagne'}
</button>
</div>
</form>
</Dialog.Panel>
</div>
<div className="space-y-2">
<Label htmlFor="description">Description *</Label>
<Textarea
id="description"
name="description"
value={formData.description}
onChange={handleChange}
placeholder="Décrivez l'objectif de cette campagne..."
rows={3}
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="status">Statut de la campagne</Label>
<Select value={formData.status} onValueChange={handleStatusChange}>
<SelectTrigger>
<SelectValue placeholder="Sélectionnez un statut" />
</SelectTrigger>
<SelectContent>
<SelectItem value="deposit">Dépôt de propositions</SelectItem>
<SelectItem value="voting">En cours de vote</SelectItem>
<SelectItem value="closed">Terminée</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label htmlFor="budget_per_user">Budget par utilisateur (€) *</Label>
<Input
id="budget_per_user"
name="budget_per_user"
type="number"
value={formData.budget_per_user}
onChange={handleChange}
placeholder="100"
min="1"
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="spending_tiers">Paliers de dépense *</Label>
<Input
id="spending_tiers"
name="spending_tiers"
value={formData.spending_tiers}
onChange={handleChange}
placeholder="Ex: 0, 10, 25, 50, 100"
required
/>
<p className="text-xs text-slate-500 dark:text-slate-400">
Séparez les montants par des virgules (ex: 0, 10, 25, 50, 100)
</p>
</div>
<DialogFooter>
<Button type="button" variant="outline" onClick={onClose}>
Annuler
</Button>
<Button type="submit" disabled={loading}>
{loading ? 'Modification...' : 'Modifier la campagne'}
</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
);
}

162
src/components/EditParticipantModal.tsx
View File

@@ -1,8 +1,9 @@
'use client';
import { useState, useEffect } from 'react';
import { Dialog } from '@headlessui/react';
import { XMarkIcon } from '@heroicons/react/24/outline';
import { Button } from '@/components/ui/button';
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 { Participant } from '@/types';
@@ -10,15 +11,10 @@ interface EditParticipantModalProps {
isOpen: boolean;
onClose: () => void;
onSuccess: () => void;
participant: Participant;
participant: Participant | null;
}
export default function EditParticipantModal({
isOpen,
onClose,
onSuccess,
participant
}: EditParticipantModalProps) {
export default function EditParticipantModal({ isOpen, onClose, onSuccess, participant }: EditParticipantModalProps) {
const [formData, setFormData] = useState({
first_name: '',
last_name: '',
@@ -27,7 +23,6 @@ export default function EditParticipantModal({
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
// Initialiser le formulaire avec les données du participant
useEffect(() => {
if (participant) {
setFormData({
@@ -40,120 +35,101 @@ export default function EditParticipantModal({
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!participant) return;
setLoading(true);
setError('');
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();
} catch (err: any) {
const errorMessage = err?.message || err?.details || 'Erreur lors de la modification du participant';
setError(`Erreur lors de la modification du participant: ${errorMessage}`);
} catch (err) {
setError('Erreur lors de la modification du participant');
console.error(err);
} finally {
setLoading(false);
}
};
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setFormData(prev => ({
...prev,
[name]: value
[e.target.name]: e.target.value
}));
};
if (!participant) return null;
return (
<Dialog open={isOpen} onClose={onClose} className="relative z-50">
<div className="fixed inset-0 bg-black/30" aria-hidden="true" />
<div className="fixed inset-0 flex items-center justify-center p-4">
<Dialog.Panel className="mx-auto max-w-md w-full bg-white rounded-lg shadow-xl">
<div className="flex items-center justify-between p-6 border-b border-gray-200">
<Dialog.Title className="text-lg font-medium text-gray-900">
Modifier le participant
</Dialog.Title>
<button
onClick={onClose}
className="text-gray-400 hover:text-gray-600"
>
<XMarkIcon className="h-6 w-6" />
</button>
</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"
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="sm:max-w-[500px]">
<DialogHeader>
<DialogTitle>Modifier le participant</DialogTitle>
<DialogDescription>
Modifiez les informations de ce participant.
</DialogDescription>
</DialogHeader>
<form onSubmit={handleSubmit} className="space-y-4">
{error && (
<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>
</div>
)}
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div className="space-y-2">
<Label htmlFor="first_name">Prénom *</Label>
<Input
id="first_name"
name="first_name"
value={formData.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"
required
/>
</div>
<div>
<label htmlFor="last_name" className="block text-sm font-medium text-gray-700 mb-1">
Nom *
</label>
<input
type="text"
<div className="space-y-2">
<Label htmlFor="last_name">Nom *</Label>
<Input
id="last_name"
name="last_name"
value={formData.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>
<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
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 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 le participant'}
</button>
</div>
</form>
</Dialog.Panel>
</div>
</div>
<div className="space-y-2">
<Label htmlFor="email">Email *</Label>
<Input
id="email"
name="email"
type="email"
value={formData.email}
onChange={handleChange}
placeholder="email@example.com"
required
/>
</div>
<DialogFooter>
<Button type="button" variant="outline" onClick={onClose}>
Annuler
</Button>
<Button type="submit" disabled={loading}>
{loading ? 'Modification...' : 'Modifier le participant'}
</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
);
}

248
src/components/EditPropositionModal.tsx
View File

@@ -1,8 +1,10 @@
'use client';
import { useState, useEffect } from 'react';
import { Dialog } from '@headlessui/react';
import { XMarkIcon } from '@heroicons/react/24/outline';
import { Button } from '@/components/ui/button';
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 { Proposition } from '@/types';
@@ -10,15 +12,10 @@ interface EditPropositionModalProps {
isOpen: boolean;
onClose: () => void;
onSuccess: () => void;
proposition: Proposition;
proposition: Proposition | null;
}
export default function EditPropositionModal({
isOpen,
onClose,
onSuccess,
proposition
}: EditPropositionModalProps) {
export default function EditPropositionModal({ isOpen, onClose, onSuccess, proposition }: EditPropositionModalProps) {
const [formData, setFormData] = useState({
title: '',
description: '',
@@ -29,7 +26,6 @@ export default function EditPropositionModal({
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
// Initialiser le formulaire avec les données de la proposition
useEffect(() => {
if (proposition) {
setFormData({
@@ -44,158 +40,132 @@ export default function EditPropositionModal({
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!proposition) return;
setLoading(true);
setError('');
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();
} catch (err: any) {
const errorMessage = err?.message || err?.details || 'Erreur lors de la modification de la proposition';
setError(`Erreur lors de la modification de la proposition: ${errorMessage}`);
} catch (err) {
setError('Erreur lors de la modification de la proposition');
console.error(err);
} finally {
setLoading(false);
}
};
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const { name, value } = e.target;
setFormData(prev => ({
...prev,
[name]: value
[e.target.name]: e.target.value
}));
};
if (!proposition) return null;
return (
<Dialog open={isOpen} onClose={onClose} className="relative z-50">
<div className="fixed inset-0 bg-black/30" aria-hidden="true" />
<div className="fixed inset-0 flex items-center justify-center p-4">
<Dialog.Panel className="mx-auto max-w-md w-full bg-white rounded-lg shadow-xl">
<div className="flex items-center justify-between p-6 border-b border-gray-200">
<Dialog.Title className="text-lg font-medium text-gray-900">
Modifier la proposition
</Dialog.Title>
<button
onClick={onClose}
className="text-gray-400 hover:text-gray-600"
>
<XMarkIcon className="h-6 w-6" />
</button>
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="sm:max-w-[500px]">
<DialogHeader>
<DialogTitle>Modifier la proposition</DialogTitle>
<DialogDescription>
Modifiez les détails de cette proposition.
</DialogDescription>
</DialogHeader>
<form onSubmit={handleSubmit} className="space-y-4">
{error && (
<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>
</div>
)}
<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>
<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>
<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}
<div className="space-y-2">
<Label htmlFor="description">Description *</Label>
<Textarea
id="description"
name="description"
value={formData.description}
onChange={handleChange}
placeholder="Décrivez votre proposition en détail..."
rows={4}
required
/>
</div>
<div className="border-t border-slate-200 dark:border-slate-700 pt-4">
<h3 className="text-sm font-medium text-slate-900 dark:text-slate-100 mb-3">
Informations de l'auteur
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div className="space-y-2">
<Label htmlFor="author_first_name">Prénom *</Label>
<Input
id="author_first_name"
name="author_first_name"
value={formData.author_first_name}
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
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 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 proposition'}
</button>
<div className="space-y-2 mt-3">
<Label htmlFor="author_email">Email *</Label>
<Input
id="author_email"
name="author_email"
type="email"
value={formData.author_email}
onChange={handleChange}
placeholder="email@example.com"
required
/>
</div>
</form>
</Dialog.Panel>
</div>
</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>
);
}

68
src/components/Navigation.tsx Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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 }