Meilleur design via Shadcn/ui

src/components/DeleteCampaignModal.tsx

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