Meilleur design via Shadcn/ui

src/components/EditCampaignModal.tsx

@@ -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>
   );
 }