Meilleur design via Shadcn/ui

src/components/CreateCampaignModal.tsx

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