feat: integrate ConfirmModal for delete confirmations across components

- Added `ConfirmModal` to `TaskCard`, `JiraConfigForm`, `TfsConfigForm`, and `TagsManagement` for improved user experience during delete actions.
- Replaced direct confirmation prompts with modals, enhancing UI consistency and usability.
- Updated state management to handle modal visibility and confirmation logic effectively.

src/components/ui-showcase/sections/FeedbackSection.tsx

@@ -6,14 +6,39 @@ import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
 import { ProgressBar } from '@/components/ui/ProgressBar';
 import { EmptyState } from '@/components/ui/EmptyState';
 import { DropZone } from '@/components/ui/DropZone';
+import { Modal } from '@/components/ui/Modal';
+import { ConfirmModal } from '@/components/ui/ConfirmModal';
+import { Button } from '@/components/ui/Button';
+import { useState } from 'react';
 
 export function FeedbackSection() {
+  const [showModal, setShowModal] = useState(false);
+  const [showConfirmModal, setShowConfirmModal] = useState(false);
+  const [showDestructiveConfirm, setShowDestructiveConfirm] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
   const alertItems: AlertItem[] = [
     { id: '1', title: 'Tâche critique', icon: '🔴', urgency: 'critical', metadata: 'Dans 1 jour' },
     { id: '2', title: 'Réunion urgente', icon: '🟠', urgency: 'high', metadata: 'Dans 2 jours' },
     { id: '3', title: 'Rappel', icon: '🟡', urgency: 'medium', metadata: 'Dans 5 jours' }
   ];
 
+  const handleConfirm = () => {
+    setIsLoading(true);
+    setTimeout(() => {
+      setIsLoading(false);
+      setShowConfirmModal(false);
+    }, 2000);
+  };
+
+  const handleDestructiveConfirm = () => {
+    setIsLoading(true);
+    setTimeout(() => {
+      setIsLoading(false);
+      setShowDestructiveConfirm(false);
+    }, 2000);
+  };
+
   return (
     <section id="feedback" className="space-y-8">
       <h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] border-b border-[var(--border)] pb-3">
@@ -169,6 +194,37 @@ export function FeedbackSection() {
           </div>
         </div>
 
+        {/* Modals */}
+        <div className="space-y-4">
+          <h3 className="text-lg font-medium text-[var(--foreground)]">Modals</h3>
+          <div className="space-y-4">
+            <div>
+              <p className="text-sm text-[var(--muted-foreground)] mb-3">Modal de base</p>
+              <Button onClick={() => setShowModal(true)}>
+                Ouvrir Modal
+              </Button>
+            </div>
+            
+            <div>
+              <p className="text-sm text-[var(--muted-foreground)] mb-3">Modal de confirmation</p>
+              <div className="flex gap-2">
+                <Button 
+                  variant="primary" 
+                  onClick={() => setShowConfirmModal(true)}
+                >
+                  Confirmation Standard
+                </Button>
+                <Button 
+                  variant="destructive" 
+                  onClick={() => setShowDestructiveConfirm(true)}
+                >
+                  Confirmation Destructive
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+
         {/* Drop Zone */}
         <div className="space-y-4">
           <h3 className="text-lg font-medium text-[var(--foreground)]">Drop Zone</h3>
@@ -183,6 +239,49 @@ export function FeedbackSection() {
           </DropZone>
         </div>
       </div>
+
+      {/* Modals */}
+      <Modal 
+        isOpen={showModal} 
+        onClose={() => setShowModal(false)} 
+        title="Modal de démonstration"
+        size="md"
+      >
+        <div className="space-y-4">
+          <p className="text-[var(--foreground)]">
+            Ceci est un exemple de modal de base. Vous pouvez y mettre n&apos;importe quel contenu.
+          </p>
+          <div className="flex justify-end">
+            <Button onClick={() => setShowModal(false)}>
+              Fermer
+            </Button>
+          </div>
+        </div>
+      </Modal>
+
+      <ConfirmModal
+        isOpen={showConfirmModal}
+        onClose={() => setShowConfirmModal(false)}
+        onConfirm={handleConfirm}
+        title="Confirmer l'action"
+        message="Êtes-vous sûr de vouloir effectuer cette action ?"
+        confirmText="Confirmer"
+        cancelText="Annuler"
+        variant="primary"
+        isLoading={isLoading}
+      />
+
+      <ConfirmModal
+        isOpen={showDestructiveConfirm}
+        onClose={() => setShowDestructiveConfirm(false)}
+        onConfirm={handleDestructiveConfirm}
+        title="Supprimer définitivement"
+        message="Cette action est irréversible. Êtes-vous sûr de vouloir continuer ?"
+        confirmText="Supprimer"
+        cancelText="Annuler"
+        variant="destructive"
+        isLoading={isLoading}
+      />
     </section>
   );
 }