Added few functions to the platform

components/AdherentForm.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import AlertModal from './AlertModal';
 
 interface Adherent {
   id: string;
@@ -26,6 +27,12 @@ interface AdherentFormProps {
 
 export default function AdherentForm({ adherent, onClose }: AdherentFormProps) {
   const [loading, setLoading] = useState(false);
+  const [alertModal, setAlertModal] = useState<{
+    show: boolean;
+    type: 'success' | 'error' | 'info' | 'warning';
+    title: string;
+    message: string;
+  } | null>(null);
   const [options, setOptions] = useState<{
     situation: Array<{ id: string; value: string }>;
     prescripteur: Array<{ id: string; value: string }>;
@@ -126,11 +133,21 @@ export default function AdherentForm({ adherent, onClose }: AdherentFormProps) {
         onClose();
       } else {
         const error = await response.json();
-        alert(error.error || 'Une erreur est survenue');
+        setAlertModal({
+          show: true,
+          type: 'error',
+          title: 'Erreur',
+          message: error.error || 'Une erreur est survenue',
+        });
       }
     } catch (error) {
       console.error('Erreur:', error);
-      alert('Une erreur est survenue');
+      setAlertModal({
+        show: true,
+        type: 'error',
+        title: 'Erreur',
+        message: 'Une erreur est survenue',
+      });
     } finally {
       setLoading(false);
     }
@@ -492,6 +509,17 @@ export default function AdherentForm({ adherent, onClose }: AdherentFormProps) {
           </div>
         </form>
       </div>
+
+      {/* Modal d'alerte */}
+      {alertModal && (
+        <AlertModal
+          isOpen={alertModal.show}
+          type={alertModal.type}
+          title={alertModal.title}
+          message={alertModal.message}
+          onClose={() => setAlertModal(null)}
+        />
+      )}
     </div>
   );
 }

components/AdherentsTable.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import AdherentForm from './AdherentForm';
+import ConfirmModal from './ConfirmModal';
 
 interface Adherent {
   id: string;
@@ -14,6 +15,7 @@ interface Adherent {
   situation?: string | null;
   prescripteur?: string | null;
   facturation?: string | null;
+  forfait?: string | null;
   commentaire?: string | null;
   telephoneSecondaire?: string | null;
   instructions?: string | null;
@@ -26,6 +28,19 @@ export default function AdherentsTable() {
   const [showForm, setShowForm] = useState(false);
   const [editingAdherent, setEditingAdherent] = useState<Adherent | null>(null);
   const [viewingAdherent, setViewingAdherent] = useState<Adherent | null>(null);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [showImportModal, setShowImportModal] = useState(false);
+  const [resultModal, setResultModal] = useState<{
+    show: boolean;
+    type: 'success' | 'error' | 'info';
+    title: string;
+    message: string;
+    details?: string[];
+  } | null>(null);
+  const [confirmDeleteModal, setConfirmDeleteModal] = useState<{
+    show: boolean;
+    id: string | null;
+  } | null>(null);
 
   const fetchAdherents = async (searchTerm: string = '') => {
     setLoading(true);
@@ -58,23 +73,46 @@ export default function AdherentsTable() {
   }, []);
 
   const handleDelete = async (id: string) => {
-    if (!confirm('Êtes-vous sûr de vouloir supprimer cet adhérent ?')) {
+    setConfirmDeleteModal({
-      return;
+      show: true,
-    }
+      id,
+    });
+  };
+
+  const confirmDelete = async () => {
+    if (!confirmDeleteModal?.id) return;
 
     try {
-      const response = await fetch(`/api/adherents/${id}`, {
+      const response = await fetch(`/api/adherents/${confirmDeleteModal.id}`, {
         method: 'DELETE',
       });
 
       if (response.ok) {
         fetchAdherents(search);
+        setResultModal({
+          show: true,
+          type: 'success',
+          title: 'Suppression réussie',
+          message: 'L\'adhérent a été supprimé avec succès',
+        });
       } else {
-        alert('Erreur lors de la suppression');
+        setResultModal({
+          show: true,
+          type: 'error',
+          title: 'Erreur',
+          message: 'Erreur lors de la suppression',
+        });
       }
     } catch (error) {
       console.error('Erreur lors de la suppression:', error);
-      alert('Erreur lors de la suppression');
+      setResultModal({
+        show: true,
+        type: 'error',
+        title: 'Erreur',
+        message: 'Erreur lors de la suppression',
+      });
+    } finally {
+      setConfirmDeleteModal(null);
     }
   };
 
@@ -110,6 +148,556 @@ export default function AdherentsTable() {
     return date.toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric' });
   };
 
+  const handleSelectAll = (checked: boolean) => {
+    if (checked) {
+      setSelectedIds(new Set(adherents.map(a => a.id)));
+    } else {
+      setSelectedIds(new Set());
+    }
+  };
+
+  const handleSelectOne = (id: string, checked: boolean) => {
+    const newSelected = new Set(selectedIds);
+    if (checked) {
+      newSelected.add(id);
+    } else {
+      newSelected.delete(id);
+    }
+    setSelectedIds(newSelected);
+  };
+
+  const handleExport = () => {
+    if (selectedIds.size === 0) {
+      setResultModal({
+        show: true,
+        type: 'info',
+        title: 'Aucune sélection',
+        message: 'Veuillez sélectionner au moins un adhérent à exporter',
+      });
+      return;
+    }
+
+    const selectedAdherents = adherents.filter(a => selectedIds.has(a.id));
+    
+    // Créer les en-têtes CSV avec tous les champs disponibles
+    const headers = [
+      'Nom',
+      'Prénom',
+      'Date de naissance',
+      'Adresse',
+      'Email',
+      'Téléphone',
+      'Téléphone secondaire',
+      'Situation',
+      'Prescripteur',
+      'Facturation',
+      'Forfait',
+      'Commentaire',
+      'Instructions'
+    ];
+
+    // Créer les lignes CSV
+    const rows = selectedAdherents.map(adherent => {
+      const formatDateForCSV = (dateString: string) => {
+        const date = new Date(dateString);
+        return date.toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric' });
+      };
+
+      return [
+        adherent.nom || '',
+        adherent.prenom || '',
+        formatDateForCSV(adherent.dateNaissance),
+        adherent.adresse || '',
+        adherent.email || '',
+        adherent.telephone || '',
+        adherent.telephoneSecondaire || '',
+        adherent.situation || '',
+        adherent.prescripteur || '',
+        adherent.facturation || '',
+        adherent.forfait || '',
+        (adherent.commentaire || '').replace(/"/g, '""'), // Échapper les guillemets
+        (adherent.instructions || '').replace(/"/g, '""') // Échapper les guillemets
+      ];
+    });
+
+    // Créer le contenu CSV
+    const csvContent = [
+      headers.join(','),
+      ...rows.map(row => row.map(cell => `"${cell}"`).join(','))
+    ].join('\n');
+
+    // Créer le blob et télécharger
+    const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' }); // BOM pour Excel
+    const link = document.createElement('a');
+    const url = URL.createObjectURL(blob);
+    link.setAttribute('href', url);
+    link.setAttribute('download', `adherents_export_${new Date().toISOString().split('T')[0]}.csv`);
+    link.style.visibility = 'hidden';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    
+    // Réinitialiser la sélection
+    setSelectedIds(new Set());
+  };
+
+  const handleDownloadTemplate = () => {
+    const headers = [
+      'Nom',
+      'Prénom',
+      'Date de naissance',
+      'Adresse',
+      'Email',
+      'Téléphone',
+      'Téléphone secondaire',
+      'Situation',
+      'Prescripteur',
+      'Facturation',
+      'Forfait',
+      'Commentaire',
+      'Instructions'
+    ];
+
+    // Ligne d'exemple
+    const exampleRow = [
+      'Dupont',
+      'Jean',
+      '15/03/1980',
+      '123 Rue de la Paix, 75001 Paris',
+      'jean.dupont@example.com',
+      '0123456789',
+      '0987654321',
+      'Aucun',
+      'Aucun',
+      'Aucun',
+      'Aucun',
+      '',
+      ''
+    ];
+
+    const csvContent = [
+      headers.join(','),
+      exampleRow.map(cell => `"${cell}"`).join(',')
+    ].join('\n');
+
+    const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' });
+    const link = document.createElement('a');
+    const url = URL.createObjectURL(blob);
+    link.setAttribute('href', url);
+    link.setAttribute('download', 'modele_import_adherents.csv');
+    link.style.visibility = 'hidden';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = async (e) => {
+      const text = e.target?.result as string;
+      const lines = text.split('\n').filter(line => line.trim());
+      
+      if (lines.length < 2) {
+        setResultModal({
+          show: true,
+          type: 'error',
+          title: 'Fichier invalide',
+          message: 'Le fichier CSV doit contenir au moins une ligne d\'en-tête et une ligne de données',
+        });
+        return;
+      }
+
+      // Charger les options existantes
+      let existingOptions: {
+        situation: Array<{ id: string; value: string }>;
+        prescripteur: Array<{ id: string; value: string }>;
+        facturation: Array<{ id: string; value: string }>;
+        forfait: Array<{ id: string; value: string }>;
+      } = {
+        situation: [],
+        prescripteur: [],
+        facturation: [],
+        forfait: [],
+      };
+
+      try {
+        const optionsResponse = await fetch('/api/settings/adherent-options');
+        if (optionsResponse.ok) {
+          const optionsData = await optionsResponse.json();
+          existingOptions = {
+            situation: optionsData.situation || [],
+            prescripteur: optionsData.prescripteur || [],
+            facturation: optionsData.facturation || [],
+            forfait: optionsData.forfait || [],
+          };
+        }
+      } catch (error) {
+        console.error('Erreur lors du chargement des options:', error);
+      }
+
+      // Fonction pour créer une nouvelle option si elle n'existe pas
+      const ensureOptionExists = async (type: 'situation' | 'prescripteur' | 'facturation' | 'forfait', value: string): Promise<boolean> => {
+        if (!value || value.trim() === '') return true; // Valeur vide, pas besoin de créer
+        
+        const existing = existingOptions[type].find(opt => opt.value.toLowerCase() === value.toLowerCase());
+        if (existing) return true; // L'option existe déjà
+
+        try {
+          const response = await fetch('/api/settings/adherent-options', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              type,
+              value: value.trim(),
+            }),
+          });
+
+          if (response.ok) {
+            const newOption = await response.json();
+            existingOptions[type].push(newOption);
+            return true;
+          } else {
+            // Si l'option existe déjà (erreur 400), c'est OK
+            const errorData = await response.json();
+            if (errorData.error?.includes('existe déjà')) {
+              return true;
+            }
+            return false;
+          }
+        } catch (error) {
+          console.error(`Erreur lors de la création de l'option ${type}:`, error);
+          return false;
+        }
+      };
+
+      // Détecter le séparateur (virgule ou point-virgule)
+      const detectSeparator = (firstLine: string): string => {
+        const commaCount = (firstLine.match(/,/g) || []).length;
+        const semicolonCount = (firstLine.match(/;/g) || []).length;
+        // Utiliser le séparateur le plus fréquent, ou point-virgule par défaut pour les fichiers français
+        return semicolonCount >= commaCount ? ';' : ',';
+      };
+
+      // Parser le CSV (gestion simple des guillemets avec détection automatique du séparateur)
+      const parseCSVLine = (line: string, separator: string): string[] => {
+        const result: string[] = [];
+        let current = '';
+        let inQuotes = false;
+        
+        for (let i = 0; i < line.length; i++) {
+          const char = line[i];
+          if (char === '"') {
+            if (inQuotes && line[i + 1] === '"') {
+              current += '"';
+              i++;
+            } else {
+              inQuotes = !inQuotes;
+            }
+          } else if (char === separator && !inQuotes) {
+            result.push(current.trim());
+            current = '';
+          } else {
+            current += char;
+          }
+        }
+        result.push(current.trim());
+        return result;
+      };
+
+      // Détecter le séparateur depuis la première ligne
+      const separator = detectSeparator(lines[0]);
+      
+      const headers = parseCSVLine(lines[0], separator);
+      const dataLines = lines.slice(1);
+
+      // Fonction pour normaliser les noms de colonnes (enlever accents, espaces, mettre en minuscule)
+      const normalizeHeader = (header: string): string => {
+        return header
+          .toLowerCase()
+          .normalize('NFD')
+          .replace(/[\u0300-\u036f]/g, '') // Enlever les accents
+          .replace(/\s+/g, '') // Enlever les espaces
+          .trim();
+      };
+
+      // Fonction pour trouver une colonne avec plusieurs variantes possibles
+      const findColumnIndex = (patterns: string[], excludePatterns: string[] = []): number => {
+        for (let i = 0; i < headers.length; i++) {
+          const normalized = normalizeHeader(headers[i]);
+          const matchesPattern = patterns.some(pattern => normalized.includes(pattern));
+          const matchesExclude = excludePatterns.some(pattern => normalized.includes(pattern));
+          
+          if (matchesPattern && !matchesExclude) {
+            return i;
+          }
+        }
+        return -1;
+      };
+
+      // Mapping des colonnes avec leurs noms d'affichage
+      const nomIndex = findColumnIndex(['nom'], ['prenom', 'prénom']);
+      const nomHeader = nomIndex >= 0 ? headers[nomIndex] : 'Nom';
+      const prenomIndex = findColumnIndex(['prenom', 'prénom']);
+      const prenomHeader = prenomIndex >= 0 ? headers[prenomIndex] : 'Prénom';
+      
+      // Pour la date de naissance, chercher une colonne qui contient "date" ET "naissance" ou des variantes
+      const dateNaissanceIndex = (() => {
+        for (let i = 0; i < headers.length; i++) {
+          const normalized = normalizeHeader(headers[i]);
+          if ((normalized.includes('date') || normalized.includes('naissance') || normalized.includes('birth') || normalized.includes('dob')) &&
+              (normalized.includes('naissance') || normalized.includes('birth') || normalized.includes('dob') || normalized.includes('date'))) {
+            return i;
+          }
+        }
+        return -1;
+      })();
+      const dateNaissanceHeader = dateNaissanceIndex >= 0 ? headers[dateNaissanceIndex] : 'Date de naissance';
+      const adresseIndex = findColumnIndex(['adresse']);
+      const adresseHeader = adresseIndex >= 0 ? headers[adresseIndex] : 'Adresse';
+      const emailIndex = findColumnIndex(['email', 'mail', 'courriel']);
+      const emailHeader = emailIndex >= 0 ? headers[emailIndex] : 'Email';
+      const telephoneIndex = findColumnIndex(['telephone', 'téléphone', 'tel', 'phone'], ['secondaire', 'sec']);
+      const telephoneHeader = telephoneIndex >= 0 ? headers[telephoneIndex] : 'Téléphone';
+      const telephoneSecondaireIndex = findColumnIndex(['telephone', 'téléphone', 'tel', 'phone'], []); // Trouver celui qui contient "secondaire"
+      const telephoneSecondaireHeader = (() => {
+        for (let i = 0; i < headers.length; i++) {
+          const normalized = normalizeHeader(headers[i]);
+          if ((normalized.includes('telephone') || normalized.includes('tel') || normalized.includes('phone')) && 
+              (normalized.includes('secondaire') || normalized.includes('sec') || normalized.includes('2'))) {
+            return headers[i];
+          }
+        }
+        return 'Téléphone secondaire';
+      })();
+      const situationIndex = findColumnIndex(['situation']);
+      const situationHeader = situationIndex >= 0 ? headers[situationIndex] : 'Situation';
+      const prescripteurIndex = findColumnIndex(['prescripteur']);
+      const prescripteurHeader = prescripteurIndex >= 0 ? headers[prescripteurIndex] : 'Prescripteur';
+      const facturationIndex = findColumnIndex(['facturation']);
+      const facturationHeader = facturationIndex >= 0 ? headers[facturationIndex] : 'Facturation';
+      const forfaitIndex = findColumnIndex(['forfait']);
+      const forfaitHeader = forfaitIndex >= 0 ? headers[forfaitIndex] : 'Forfait';
+      const commentaireIndex = findColumnIndex(['commentaire', 'comment']);
+      const commentaireHeader = commentaireIndex >= 0 ? headers[commentaireIndex] : 'Commentaire';
+      const instructionsIndex = findColumnIndex(['instructions', 'instruction']);
+      const instructionsHeader = instructionsIndex >= 0 ? headers[instructionsIndex] : 'Instructions';
+
+      // Vérifier que les colonnes obligatoires sont présentes (après le mapping)
+      const missingRequiredColumns: string[] = [];
+      if (nomIndex === -1) missingRequiredColumns.push('Nom');
+      if (prenomIndex === -1) missingRequiredColumns.push('Prénom');
+      if (dateNaissanceIndex === -1) missingRequiredColumns.push('Date de naissance');
+      if (adresseIndex === -1) missingRequiredColumns.push('Adresse');
+      if (emailIndex === -1) missingRequiredColumns.push('Email');
+      if (telephoneIndex === -1) missingRequiredColumns.push('Téléphone');
+
+      if (missingRequiredColumns.length > 0) {
+        // Afficher les colonnes disponibles pour aider au débogage
+        const availableColumns = headers.length > 0 ? headers : ['Aucune colonne détectée'];
+        setResultModal({
+          show: true,
+          type: 'error',
+          title: 'Colonnes manquantes',
+          message: `Le fichier CSV ne contient pas les colonnes obligatoires suivantes : ${missingRequiredColumns.join(', ')}`,
+          details: [
+            'Colonnes détectées dans le fichier :',
+            ...availableColumns.map(col => `  • ${col}`),
+            '',
+            'Conseil : Vérifiez que les noms de colonnes correspondent exactement au modèle (les accents et la casse sont importants).'
+          ],
+        });
+        return;
+      }
+
+      let successCount = 0;
+      let errorCount = 0;
+      const errors: string[] = [];
+      const newOptionsCreated: string[] = [];
+
+      for (let i = 0; i < dataLines.length; i++) {
+        const row = parseCSVLine(dataLines[i], separator);
+        if (row.length === 0) continue;
+
+        const nom = nomIndex >= 0 ? (row[nomIndex] || '').trim() : '';
+        const prenom = prenomIndex >= 0 ? (row[prenomIndex] || '').trim() : '';
+        const dateNaissance = dateNaissanceIndex >= 0 ? (row[dateNaissanceIndex] || '').trim() : '';
+        const adresse = adresseIndex >= 0 ? (row[adresseIndex] || '').trim() : '';
+        const email = emailIndex >= 0 ? (row[emailIndex] || '').trim() : '';
+        const telephone = telephoneIndex >= 0 ? (row[telephoneIndex] || '').trim() : '';
+
+        // Validation des champs obligatoires avec identification précise des colonnes manquantes
+        const missingFields: string[] = [];
+        if (!nom) missingFields.push(nomHeader);
+        if (!prenom) missingFields.push(prenomHeader);
+        if (!dateNaissance) missingFields.push(dateNaissanceHeader);
+        if (!adresse) missingFields.push(adresseHeader);
+        if (!email) missingFields.push(emailHeader);
+        if (!telephone) missingFields.push(telephoneHeader);
+
+        if (missingFields.length > 0) {
+          errorCount++;
+          const fieldsList = missingFields.join(', ');
+          errors.push(`Ligne ${i + 2}: Colonnes manquantes ou vides : ${fieldsList}`);
+          continue;
+        }
+
+        // Convertir la date au format ISO
+        let dateISO = '';
+        try {
+          const dateParts = dateNaissance.split('/');
+          if (dateParts.length === 3) {
+            dateISO = `${dateParts[2]}-${dateParts[1]}-${dateParts[0]}`;
+          } else {
+            dateISO = new Date(dateNaissance).toISOString().split('T')[0];
+          }
+        } catch {
+          errorCount++;
+          errors.push(`Ligne ${i + 2}: Colonne "${dateNaissanceHeader}" - Format de date invalide (attendu: JJ/MM/AAAA)`);
+          continue;
+        }
+
+        // Récupérer les valeurs des champs optionnels
+        const situationValue = situationIndex >= 0 ? row[situationIndex]?.trim() : '';
+        const prescripteurValue = prescripteurIndex >= 0 ? row[prescripteurIndex]?.trim() : '';
+        const facturationValue = facturationIndex >= 0 ? row[facturationIndex]?.trim() : '';
+        const forfaitValue = forfaitIndex >= 0 ? row[forfaitIndex]?.trim() : '';
+
+        // Créer les options manquantes avant de créer l'adhérent
+        if (situationValue) {
+          const existed = existingOptions.situation.find(opt => opt.value.toLowerCase() === situationValue.toLowerCase());
+          if (!existed) {
+            const created = await ensureOptionExists('situation', situationValue);
+            if (created) {
+              newOptionsCreated.push(`Situation: "${situationValue}"`);
+            }
+          }
+        }
+
+        if (prescripteurValue) {
+          const existed = existingOptions.prescripteur.find(opt => opt.value.toLowerCase() === prescripteurValue.toLowerCase());
+          if (!existed) {
+            const created = await ensureOptionExists('prescripteur', prescripteurValue);
+            if (created) {
+              newOptionsCreated.push(`Prescripteur: "${prescripteurValue}"`);
+            }
+          }
+        }
+
+        if (facturationValue) {
+          const existed = existingOptions.facturation.find(opt => opt.value.toLowerCase() === facturationValue.toLowerCase());
+          if (!existed) {
+            const created = await ensureOptionExists('facturation', facturationValue);
+            if (created) {
+              newOptionsCreated.push(`Facturation: "${facturationValue}"`);
+            }
+          }
+        }
+
+        if (forfaitValue) {
+          const existed = existingOptions.forfait.find(opt => opt.value.toLowerCase() === forfaitValue.toLowerCase());
+          if (!existed) {
+            const created = await ensureOptionExists('forfait', forfaitValue);
+            if (created) {
+              newOptionsCreated.push(`Forfait: "${forfaitValue}"`);
+            }
+          }
+        }
+
+        try {
+          const response = await fetch('/api/adherents', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              nom,
+              prenom,
+              dateNaissance: dateISO,
+              adresse,
+              email,
+              telephone,
+              telephoneSecondaire: telephoneSecondaireIndex >= 0 ? row[telephoneSecondaireIndex]?.trim() || null : null,
+              situation: situationValue || null,
+              prescripteur: prescripteurValue || null,
+              facturation: facturationValue || null,
+              forfait: forfaitValue || null,
+              commentaire: commentaireIndex >= 0 ? row[commentaireIndex]?.trim() || null : null,
+              instructions: instructionsIndex >= 0 ? row[instructionsIndex]?.trim() || null : null,
+            }),
+          });
+
+          if (response.ok) {
+            successCount++;
+          } else {
+            errorCount++;
+            try {
+              const errorData = await response.json();
+              // Essayer d'identifier les champs problématiques depuis le message d'erreur
+              let errorMsg = errorData.error || 'Erreur lors de l\'import';
+              if (errorMsg.includes('champs obligatoires')) {
+                // Si l'erreur vient du serveur, on peut ajouter plus de contexte
+                errorMsg = `Erreur de validation : ${errorMsg}`;
+              }
+              errors.push(`Ligne ${i + 2}: ${errorMsg}`);
+            } catch {
+              errors.push(`Ligne ${i + 2}: Erreur serveur lors de l'import`);
+            }
+          }
+        } catch (error) {
+          errorCount++;
+          errors.push(`Ligne ${i + 2}: Erreur réseau - ${error instanceof Error ? error.message : 'Connexion impossible'}`);
+        }
+      }
+
+      // Afficher les résultats dans une modale
+      const title = errorCount > 0 
+        ? `Import terminé avec ${errorCount} erreur(s)`
+        : 'Import réussi';
+      
+      let message = errorCount === 0
+        ? `${successCount} adhérent(s) importé(s) avec succès`
+        : `${successCount} adhérent(s) importé(s) avec succès, ${errorCount} erreur(s)`;
+
+      // Ajouter les informations sur les nouvelles options créées
+      if (newOptionsCreated.length > 0) {
+        message += `\n\n${newOptionsCreated.length} nouvelle(s) option(s) ajoutée(s) aux sélecteurs.`;
+      }
+
+      // Combiner les erreurs et les nouvelles options dans les détails
+      const details: string[] = [];
+      if (newOptionsCreated.length > 0) {
+        details.push('Nouvelles options créées :');
+        details.push(...newOptionsCreated);
+        if (errors.length > 0) {
+          details.push('');
+          details.push('Erreurs :');
+        }
+      }
+      if (errors.length > 0) {
+        details.push(...errors);
+      }
+
+      setResultModal({
+        show: true,
+        type: errorCount === 0 ? 'success' : 'error',
+        title,
+        message,
+        details: details.length > 0 ? details : undefined,
+      });
+
+      // Rafraîchir la liste
+      fetchAdherents(search);
+      setShowImportModal(false);
+    };
+
+    reader.readAsText(file, 'UTF-8');
+  };
+
   return (
     <>
       {/* Barre de recherche et actions */}
@@ -147,17 +735,24 @@ export default function AdherentsTable() {
               </svg>
               Nouvel adhérent
             </button>
-            <button className="flex items-center gap-2 px-4 py-2 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors">
+            <button 
+              onClick={() => setShowImportModal(true)}
+              className="flex items-center gap-2 px-4 py-2 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors"
+            >
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
               </svg>
               Importer
             </button>
-            <button className="flex items-center gap-2 px-4 py-2 bg-lorange text-white rounded-lg hover:bg-dorange transition-colors">
+            <button 
+              onClick={handleExport}
+              disabled={selectedIds.size === 0}
+              className="flex items-center gap-2 px-4 py-2 bg-lorange text-white rounded-lg hover:bg-dorange transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4-4m0 0l-4-4m4 4V4" />
               </svg>
-              Exporter
+              Exporter {selectedIds.size > 0 && `(${selectedIds.size})`}
             </button>
           </div>
         </div>
@@ -174,6 +769,14 @@ export default function AdherentsTable() {
             <table className="min-w-full divide-y divide-gray-200">
               <thead className="bg-gray-50">
                 <tr>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    <input
+                      type="checkbox"
+                      checked={adherents.length > 0 && selectedIds.size === adherents.length}
+                      onChange={(e) => handleSelectAll(e.target.checked)}
+                      className="w-4 h-4 text-lblue border-gray-300 rounded focus:ring-lblue"
+                    />
+                  </th>
                   <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">NOM</th>
                   <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CONTACT</th>
                   <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ADRESSE</th>
@@ -185,6 +788,14 @@ export default function AdherentsTable() {
               <tbody className="bg-white divide-y divide-gray-200">
                 {adherents.map((adherent) => (
                   <tr key={adherent.id} className="hover:bg-gray-50">
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <input
+                        type="checkbox"
+                        checked={selectedIds.has(adherent.id)}
+                        onChange={(e) => handleSelectOne(adherent.id, e.target.checked)}
+                        className="w-4 h-4 text-lblue border-gray-300 rounded focus:ring-lblue"
+                      />
+                    </td>
                     <td className="px-6 py-4 whitespace-nowrap">
                       <div className="flex items-center gap-3">
                         <div className="w-10 h-10 rounded-full bg-lgreen flex items-center justify-center text-white font-semibold">
@@ -285,6 +896,242 @@ export default function AdherentsTable() {
         />
       )}
 
+      {/* Modal import */}
+      {showImportModal && (
+        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-fadeIn">
+          <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full animate-slideUp border border-gray-200">
+            {/* Header */}
+            <div className="border-b border-gray-200 px-6 py-5 bg-white">
+              <div className="flex items-center justify-between">
+                <div>
+                  <h2 className="text-xl font-semibold text-gray-900">
+                    Importer des adhérents
+                  </h2>
+                  <p className="text-sm text-gray-500 mt-1">
+                    Téléchargez le modèle d'exemple, remplissez-le et importez-le ici
+                  </p>
+                </div>
+                <button
+                  onClick={() => setShowImportModal(false)}
+                  className="text-gray-400 hover:text-gray-600 transition-colors p-1.5 hover:bg-gray-100 rounded"
+                >
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+
+            {/* Contenu */}
+            <div className="px-6 py-6">
+              <div className="space-y-6">
+                {/* Télécharger le modèle */}
+                <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+                  <div className="flex items-start gap-3">
+                    <svg className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    <div className="flex-1">
+                      <h3 className="text-sm font-semibold text-blue-900 mb-1">
+                        Télécharger le modèle d'exemple
+                      </h3>
+                      <p className="text-sm text-blue-700 mb-3">
+                        Téléchargez le fichier CSV modèle pour voir le format attendu et remplir vos données.
+                      </p>
+                      <button
+                        onClick={handleDownloadTemplate}
+                        className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm"
+                      >
+                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                        </svg>
+                        Télécharger le modèle CSV
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Upload fichier */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Sélectionner le fichier CSV à importer
+                  </label>
+                  <div className="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-lblue transition-colors">
+                    <div className="space-y-1 text-center">
+                      <svg className="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
+                        <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+                      </svg>
+                      <div className="flex text-sm text-gray-600">
+                        <label htmlFor="file-upload" className="relative cursor-pointer bg-white rounded-md font-medium text-lblue hover:text-dblue focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-lblue">
+                          <span>Cliquez pour sélectionner un fichier</span>
+                          <input
+                            id="file-upload"
+                            name="file-upload"
+                            type="file"
+                            accept=".csv"
+                            onChange={handleFileUpload}
+                            className="sr-only"
+                          />
+                        </label>
+                        <p className="pl-1">ou glissez-déposez</p>
+                      </div>
+                      <p className="text-xs text-gray-500">CSV jusqu'à 10MB</p>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Instructions */}
+                <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
+                  <h3 className="text-sm font-semibold text-gray-900 mb-2">
+                    Instructions :
+                  </h3>
+                  <ul className="text-sm text-gray-600 space-y-1 list-disc list-inside">
+                    <li>Les champs Nom, Prénom, Date de naissance, Adresse, Email et Téléphone sont obligatoires</li>
+                    <li>Le format de date attendu est JJ/MM/AAAA</li>
+                    <li>Les autres champs sont optionnels</li>
+                    <li>Assurez-vous que le fichier utilise l'encodage UTF-8</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+
+            {/* Footer */}
+            <div className="border-t border-gray-200 px-6 py-4 bg-gray-50/50">
+              <div className="flex justify-end">
+                <button
+                  onClick={() => setShowImportModal(false)}
+                  className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors"
+                >
+                  Fermer
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Modal résultat */}
+      {resultModal && resultModal.show && (
+        <div 
+          className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-[60] p-4 animate-fadeIn"
+          onClick={() => setResultModal(null)}
+        >
+          <div 
+            className="bg-white rounded-lg shadow-xl max-w-lg w-full animate-slideUp border border-gray-200"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Header */}
+            <div className={`border-b border-gray-200 px-6 py-5 ${
+              resultModal.type === 'success' ? 'bg-green-50' :
+              resultModal.type === 'error' ? 'bg-red-50' :
+              'bg-blue-50'
+            }`}>
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  {resultModal.type === 'success' && (
+                    <svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                  )}
+                  {resultModal.type === 'error' && (
+                    <svg className="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                  )}
+                  {resultModal.type === 'info' && (
+                    <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                  )}
+                  <h2 className={`text-xl font-semibold ${
+                    resultModal.type === 'success' ? 'text-green-900' :
+                    resultModal.type === 'error' ? 'text-red-900' :
+                    'text-blue-900'
+                  }`}>
+                    {resultModal.title}
+                  </h2>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => setResultModal(null)}
+                  className="text-gray-400 hover:text-gray-600 transition-colors p-1.5 hover:bg-white/50 rounded"
+                >
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+
+            {/* Contenu */}
+            <div className="px-6 py-6">
+              <p className={`text-sm font-medium mb-4 ${
+                resultModal.type === 'success' ? 'text-green-800' :
+                resultModal.type === 'error' ? 'text-red-800' :
+                'text-blue-800'
+              }`}>
+                {resultModal.message}
+              </p>
+
+              {resultModal.details && resultModal.details.length > 0 && (
+                <div className="mt-4">
+                  <h3 className="text-sm font-semibold text-gray-900 mb-2">
+                    Erreurs :
+                  </h3>
+                  <div className="bg-red-50 border border-red-200 rounded-lg p-4 max-h-64 overflow-y-auto">
+                    <ul className="space-y-1">
+                      {resultModal.details.slice(0, 10).map((error, index) => (
+                        <li key={index} className="text-sm text-red-800">
+                          {error}
+                        </li>
+                      ))}
+                      {resultModal.details.length > 10 && (
+                        <li className="text-sm text-red-600 italic">
+                          ... et {resultModal.details.length - 10} autre(s) erreur(s)
+                        </li>
+                      )}
+                    </ul>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Footer */}
+            <div className="border-t border-gray-200 px-6 py-4 bg-gray-50/50">
+              <div className="flex justify-end">
+                <button
+                  type="button"
+                  onClick={() => setResultModal(null)}
+                  className={`px-6 py-2 text-sm font-medium rounded-lg transition-colors ${
+                    resultModal.type === 'success' 
+                      ? 'bg-green-600 text-white hover:bg-green-700' :
+                      resultModal.type === 'error'
+                      ? 'bg-red-600 text-white hover:bg-red-700' :
+                      'bg-blue-600 text-white hover:bg-blue-700'
+                  }`}
+                >
+                  OK
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Modal de confirmation de suppression */}
+      {confirmDeleteModal && (
+        <ConfirmModal
+          isOpen={confirmDeleteModal.show}
+          title="Supprimer l'adhérent"
+          message="Êtes-vous sûr de vouloir supprimer cet adhérent ?"
+          confirmText="Supprimer"
+          cancelText="Annuler"
+          confirmColor="danger"
+          onConfirm={confirmDelete}
+          onCancel={() => setConfirmDeleteModal(null)}
+        />
+      )}
+
       {/* Modal vue détaillée */}
       {viewingAdherent && (
         <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-fadeIn">
@@ -418,6 +1265,17 @@ export default function AdherentsTable() {
                     </div>
                   )}
 
+                  {viewingAdherent.forfait && (
+                    <div className="flex items-center py-3 border-b border-gray-100">
+                      <div className="w-32 flex-shrink-0">
+                        <span className="text-xs font-medium text-gray-500 uppercase tracking-wide">Forfait</span>
+                      </div>
+                      <div className="flex-1">
+                        <span className="text-sm text-gray-900 font-medium">{viewingAdherent.forfait}</span>
+                      </div>
+                    </div>
+                  )}
+
                   {viewingAdherent.telephoneSecondaire && (
                     <div className="flex items-center py-3 border-b border-gray-100">
                       <div className="w-32 flex-shrink-0">

components/AlertModal.tsx

@@ -0,0 +1,127 @@
+'use client';
+
+interface AlertModalProps {
+  isOpen: boolean;
+  type: 'success' | 'error' | 'info' | 'warning';
+  title: string;
+  message: string;
+  onClose: () => void;
+}
+
+export default function AlertModal({
+  isOpen,
+  type,
+  title,
+  message,
+  onClose,
+}: AlertModalProps) {
+  if (!isOpen) return null;
+
+  const getStyles = () => {
+    switch (type) {
+      case 'success':
+        return {
+          bg: 'bg-green-50',
+          titleColor: 'text-green-900',
+          messageColor: 'text-green-800',
+          icon: (
+            <svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          ),
+          button: 'bg-green-600 text-white hover:bg-green-700',
+        };
+      case 'error':
+        return {
+          bg: 'bg-red-50',
+          titleColor: 'text-red-900',
+          messageColor: 'text-red-800',
+          icon: (
+            <svg className="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          ),
+          button: 'bg-red-600 text-white hover:bg-red-700',
+        };
+      case 'warning':
+        return {
+          bg: 'bg-orange-50',
+          titleColor: 'text-orange-900',
+          messageColor: 'text-orange-800',
+          icon: (
+            <svg className="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+          ),
+          button: 'bg-orange-600 text-white hover:bg-orange-700',
+        };
+      default:
+        return {
+          bg: 'bg-blue-50',
+          titleColor: 'text-blue-900',
+          messageColor: 'text-blue-800',
+          icon: (
+            <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          ),
+          button: 'bg-blue-600 text-white hover:bg-blue-700',
+        };
+    }
+  };
+
+  const styles = getStyles();
+
+  return (
+    <div 
+      className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-[60] p-4 animate-fadeIn"
+      onClick={onClose}
+    >
+      <div 
+        className="bg-white rounded-lg shadow-xl max-w-md w-full animate-slideUp border border-gray-200"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className={`border-b border-gray-200 px-6 py-5 ${styles.bg}`}>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              {styles.icon}
+              <h2 className={`text-xl font-semibold ${styles.titleColor}`}>
+                {title}
+              </h2>
+            </div>
+            <button
+              type="button"
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-600 transition-colors p-1.5 hover:bg-white/50 rounded"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="px-6 py-6">
+          <p className={`text-sm font-medium ${styles.messageColor}`}>
+            {message}
+          </p>
+        </div>
+
+        {/* Footer */}
+        <div className="border-t border-gray-200 px-6 py-4 bg-gray-50/50">
+          <div className="flex justify-end">
+            <button
+              type="button"
+              onClick={onClose}
+              className={`px-6 py-2 text-sm font-medium rounded-lg transition-colors ${styles.button}`}
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/ChatWindow.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect, useRef } from 'react';
 import useSWR from 'swr';
+import AlertModal from './AlertModal';
 
 interface User {
   id: string;
@@ -61,6 +62,12 @@ export default function ChatWindow({
   const [currentUser, setCurrentUser] = useState<User | null>(null);
   const [typingUsers, setTypingUsers] = useState<User[]>([]);
   const [readReceipts, setReadReceipts] = useState<Record<string, Date | null>>({});
+  const [alertModal, setAlertModal] = useState<{
+    show: boolean;
+    type: 'success' | 'error' | 'info' | 'warning';
+    title: string;
+    message: string;
+  } | null>(null);
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const typingTimeoutRef = useRef<NodeJS.Timeout | null>(null);
@@ -198,11 +205,21 @@ export default function ChatWindow({
         }).catch(console.error);
       } else {
         const error = await response.json();
-        alert(error.error || 'Erreur lors de l\'envoi du message');
+        setAlertModal({
+          show: true,
+          type: 'error',
+          title: 'Erreur',
+          message: error.error || 'Erreur lors de l\'envoi du message',
+        });
       }
     } catch (error) {
       console.error('Erreur:', error);
-      alert('Erreur lors de l\'envoi du message');
+      setAlertModal({
+        show: true,
+        type: 'error',
+        title: 'Erreur',
+        message: 'Erreur lors de l\'envoi du message',
+      });
     } finally {
       setIsSending(false);
     }
@@ -584,6 +601,17 @@ export default function ChatWindow({
           </button>
         </div>
       </div>
+
+      {/* Modal d'alerte */}
+      {alertModal && (
+        <AlertModal
+          isOpen={alertModal.show}
+          type={alertModal.type}
+          title={alertModal.title}
+          message={alertModal.message}
+          onClose={() => setAlertModal(null)}
+        />
+      )}
     </div>
   );
 }

components/ChauffeurForm.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import AlertModal from './AlertModal';
 
 interface Chauffeur {
   id: string;
@@ -24,6 +25,12 @@ interface ChauffeurFormProps {
 
 export default function ChauffeurForm({ chauffeur, onClose }: ChauffeurFormProps) {
   const [loading, setLoading] = useState(false);
+  const [alertModal, setAlertModal] = useState<{
+    show: boolean;
+    type: 'success' | 'error' | 'info' | 'warning';
+    title: string;
+    message: string;
+  } | null>(null);
   const [formData, setFormData] = useState({
     nom: '',
     prenom: '',
@@ -83,11 +90,21 @@ export default function ChauffeurForm({ chauffeur, onClose }: ChauffeurFormProps
         onClose();
       } else {
         const error = await response.json();
-        alert(error.error || 'Une erreur est survenue');
+        setAlertModal({
+          show: true,
+          type: 'error',
+          title: 'Erreur',
+          message: error.error || 'Une erreur est survenue',
+        });
       }
     } catch (error) {
       console.error('Erreur:', error);
-      alert('Une erreur est survenue');
+      setAlertModal({
+        show: true,
+        type: 'error',
+        title: 'Erreur',
+        message: 'Une erreur est survenue',
+      });
     } finally {
       setLoading(false);
     }
@@ -355,6 +372,17 @@ export default function ChauffeurForm({ chauffeur, onClose }: ChauffeurFormProps
           </div>
         </form>
       </div>
+
+      {/* Modal d'alerte */}
+      {alertModal && (
+        <AlertModal
+          isOpen={alertModal.show}
+          type={alertModal.type}
+          title={alertModal.title}
+          message={alertModal.message}
+          onClose={() => setAlertModal(null)}
+        />
+      )}
     </div>
   );
 }

components/ChauffeursTable.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import ChauffeurForm from './ChauffeurForm';
+import ConfirmModal from './ConfirmModal';
 
 interface Chauffeur {
   id: string;
@@ -25,6 +26,19 @@ export default function ChauffeursTable() {
   const [showForm, setShowForm] = useState(false);
   const [editingChauffeur, setEditingChauffeur] = useState<Chauffeur | null>(null);
   const [viewingChauffeur, setViewingChauffeur] = useState<Chauffeur | null>(null);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [showImportModal, setShowImportModal] = useState(false);
+  const [resultModal, setResultModal] = useState<{
+    show: boolean;
+    type: 'success' | 'error' | 'info';
+    title: string;
+    message: string;
+    details?: string[];
+  } | null>(null);
+  const [confirmDeleteModal, setConfirmDeleteModal] = useState<{
+    show: boolean;
+    id: string | null;
+  } | null>(null);
 
   const fetchChauffeurs = async (searchTerm: string = '') => {
     setLoading(true);
@@ -57,23 +71,46 @@ export default function ChauffeursTable() {
   }, []);
 
   const handleDelete = async (id: string) => {
-    if (!confirm('Êtes-vous sûr de vouloir supprimer ce chauffeur ?')) {
+    setConfirmDeleteModal({
-      return;
+      show: true,
-    }
+      id,
+    });
+  };
+
+  const confirmDelete = async () => {
+    if (!confirmDeleteModal?.id) return;
 
     try {
-      const response = await fetch(`/api/chauffeurs/${id}`, {
+      const response = await fetch(`/api/chauffeurs/${confirmDeleteModal.id}`, {
         method: 'DELETE',
       });
 
       if (response.ok) {
         fetchChauffeurs(search);
+        setResultModal({
+          show: true,
+          type: 'success',
+          title: 'Suppression réussie',
+          message: 'Le chauffeur a été supprimé avec succès',
+        });
       } else {
-        alert('Erreur lors de la suppression');
+        setResultModal({
+          show: true,
+          type: 'error',
+          title: 'Erreur',
+          message: 'Erreur lors de la suppression',
+        });
       }
     } catch (error) {
       console.error('Erreur lors de la suppression:', error);
-      alert('Erreur lors de la suppression');
+      setResultModal({
+        show: true,
+        type: 'error',
+        title: 'Erreur',
+        message: 'Erreur lors de la suppression',
+      });
+    } finally {
+      setConfirmDeleteModal(null);
     }
   };
 
@@ -127,6 +164,435 @@ export default function ChauffeursTable() {
     return ((total - restantes) / total) * 100;
   };
 
+  const handleSelectAll = (checked: boolean) => {
+    if (checked) {
+      setSelectedIds(new Set(chauffeurs.map(c => c.id)));
+    } else {
+      setSelectedIds(new Set());
+    }
+  };
+
+  const handleSelectOne = (id: string, checked: boolean) => {
+    const newSelected = new Set(selectedIds);
+    if (checked) {
+      newSelected.add(id);
+    } else {
+      newSelected.delete(id);
+    }
+    setSelectedIds(newSelected);
+  };
+
+  const handleExport = () => {
+    if (selectedIds.size === 0) {
+      setResultModal({
+        show: true,
+        type: 'info',
+        title: 'Aucune sélection',
+        message: 'Veuillez sélectionner au moins un chauffeur à exporter',
+      });
+      return;
+    }
+
+    const selectedChauffeurs = chauffeurs.filter(c => selectedIds.has(c.id));
+    
+    // Créer les en-têtes CSV avec tous les champs disponibles
+    const headers = [
+      'Nom',
+      'Prénom',
+      'Date de naissance',
+      'Téléphone',
+      'Email',
+      'Adresse',
+      'Heures contrat',
+      'Date début contrat',
+      'Date fin contrat',
+      'Status'
+    ];
+
+    // Créer les lignes CSV
+    const rows = selectedChauffeurs.map(chauffeur => {
+      const formatDateForCSV = (dateString: string) => {
+        const date = new Date(dateString);
+        return date.toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric' });
+      };
+
+      return [
+        chauffeur.nom || '',
+        chauffeur.prenom || '',
+        formatDateForCSV(chauffeur.dateNaissance),
+        chauffeur.telephone || '',
+        chauffeur.email || '',
+        chauffeur.adresse || '',
+        chauffeur.heuresContrat?.toString() || '',
+        formatDateForCSV(chauffeur.dateDebutContrat),
+        chauffeur.dateFinContrat ? formatDateForCSV(chauffeur.dateFinContrat) : '',
+        chauffeur.status || 'Disponible'
+      ];
+    });
+
+    // Créer le contenu CSV
+    const csvContent = [
+      headers.join(','),
+      ...rows.map(row => row.map(cell => `"${cell.replace(/"/g, '""')}"`).join(','))
+    ].join('\n');
+
+    // Créer le blob et télécharger
+    const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' }); // BOM pour Excel
+    const link = document.createElement('a');
+    const url = URL.createObjectURL(blob);
+    link.setAttribute('href', url);
+    link.setAttribute('download', `chauffeurs_export_${new Date().toISOString().split('T')[0]}.csv`);
+    link.style.visibility = 'hidden';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    
+    // Réinitialiser la sélection
+    setSelectedIds(new Set());
+  };
+
+  const handleDownloadTemplate = () => {
+    const headers = [
+      'Nom',
+      'Prénom',
+      'Date de naissance',
+      'Téléphone',
+      'Email',
+      'Adresse',
+      'Heures contrat',
+      'Date début contrat',
+      'Date fin contrat',
+      'Status'
+    ];
+
+    // Ligne d'exemple
+    const exampleRow = [
+      'Dupont',
+      'Jean',
+      '15/03/1980',
+      '0123456789',
+      'jean.dupont@example.com',
+      '123 Rue de la Paix, 75001 Paris',
+      '35',
+      '01/01/2024',
+      '',
+      'Disponible'
+    ];
+
+    const csvContent = [
+      headers.join(','),
+      exampleRow.map(cell => `"${cell}"`).join(',')
+    ].join('\n');
+
+    const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' });
+    const link = document.createElement('a');
+    const url = URL.createObjectURL(blob);
+    link.setAttribute('href', url);
+    link.setAttribute('download', 'modele_import_chauffeurs.csv');
+    link.style.visibility = 'hidden';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = async (e) => {
+      const text = e.target?.result as string;
+      const lines = text.split('\n').filter(line => line.trim());
+      
+      if (lines.length < 2) {
+        setResultModal({
+          show: true,
+          type: 'error',
+          title: 'Fichier invalide',
+          message: 'Le fichier CSV doit contenir au moins une ligne d\'en-tête et une ligne de données',
+        });
+        return;
+      }
+
+      // Détecter le séparateur (virgule ou point-virgule)
+      const detectSeparator = (firstLine: string): string => {
+        const commaCount = (firstLine.match(/,/g) || []).length;
+        const semicolonCount = (firstLine.match(/;/g) || []).length;
+        return semicolonCount >= commaCount ? ';' : ',';
+      };
+
+      // Parser le CSV (gestion simple des guillemets avec détection automatique du séparateur)
+      const parseCSVLine = (line: string, separator: string): string[] => {
+        const result: string[] = [];
+        let current = '';
+        let inQuotes = false;
+        
+        for (let i = 0; i < line.length; i++) {
+          const char = line[i];
+          if (char === '"') {
+            if (inQuotes && line[i + 1] === '"') {
+              current += '"';
+              i++;
+            } else {
+              inQuotes = !inQuotes;
+            }
+          } else if (char === separator && !inQuotes) {
+            result.push(current.trim());
+            current = '';
+          } else {
+            current += char;
+          }
+        }
+        result.push(current.trim());
+        return result;
+      };
+
+      // Fonction pour normaliser les noms de colonnes
+      const normalizeHeader = (header: string): string => {
+        return header
+          .toLowerCase()
+          .normalize('NFD')
+          .replace(/[\u0300-\u036f]/g, '')
+          .replace(/\s+/g, '')
+          .trim();
+      };
+
+      // Fonction pour trouver une colonne avec plusieurs variantes possibles
+      const findColumnIndex = (patterns: string[], excludePatterns: string[] = []): number => {
+        for (let i = 0; i < headers.length; i++) {
+          const normalized = normalizeHeader(headers[i]);
+          const matchesPattern = patterns.some(pattern => normalized.includes(pattern));
+          const matchesExclude = excludePatterns.some(pattern => normalized.includes(pattern));
+          
+          if (matchesPattern && !matchesExclude) {
+            return i;
+          }
+        }
+        return -1;
+      };
+
+      // Détecter le séparateur depuis la première ligne
+      const separator = detectSeparator(lines[0]);
+      
+      const headers = parseCSVLine(lines[0], separator);
+      const dataLines = lines.slice(1);
+
+      // Mapping des colonnes avec leurs noms d'affichage
+      const nomIndex = findColumnIndex(['nom'], ['prenom', 'prénom']);
+      const nomHeader = nomIndex >= 0 ? headers[nomIndex] : 'Nom';
+      const prenomIndex = findColumnIndex(['prenom', 'prénom']);
+      const prenomHeader = prenomIndex >= 0 ? headers[prenomIndex] : 'Prénom';
+      
+      // Pour la date de naissance
+      const dateNaissanceIndex = (() => {
+        for (let i = 0; i < headers.length; i++) {
+          const normalized = normalizeHeader(headers[i]);
+          if ((normalized.includes('date') || normalized.includes('naissance') || normalized.includes('birth') || normalized.includes('dob')) &&
+              (normalized.includes('naissance') || normalized.includes('birth') || normalized.includes('dob') || normalized.includes('date'))) {
+            return i;
+          }
+        }
+        return -1;
+      })();
+      const dateNaissanceHeader = dateNaissanceIndex >= 0 ? headers[dateNaissanceIndex] : 'Date de naissance';
+      
+      const telephoneIndex = findColumnIndex(['telephone', 'téléphone', 'tel', 'phone']);
+      const telephoneHeader = telephoneIndex >= 0 ? headers[telephoneIndex] : 'Téléphone';
+      const emailIndex = findColumnIndex(['email', 'mail', 'courriel']);
+      const emailHeader = emailIndex >= 0 ? headers[emailIndex] : 'Email';
+      const adresseIndex = findColumnIndex(['adresse']);
+      const adresseHeader = adresseIndex >= 0 ? headers[adresseIndex] : 'Adresse';
+      const heuresContratIndex = findColumnIndex(['heures', 'contrat'], ['debut', 'début', 'fin']);
+      const heuresContratHeader = heuresContratIndex >= 0 ? headers[heuresContratIndex] : 'Heures contrat';
+      const dateDebutContratIndex = findColumnIndex(['debut', 'début'], ['fin']);
+      const dateDebutContratHeader = dateDebutContratIndex >= 0 ? headers[dateDebutContratIndex] : 'Date début contrat';
+      const dateFinContratIndex = findColumnIndex(['fin'], ['debut', 'début']);
+      const dateFinContratHeader = dateFinContratIndex >= 0 ? headers[dateFinContratIndex] : 'Date fin contrat';
+      const statusIndex = findColumnIndex(['status', 'statut']);
+      const statusHeader = statusIndex >= 0 ? headers[statusIndex] : 'Status';
+
+      // Vérifier que les colonnes obligatoires sont présentes
+      const missingRequiredColumns: string[] = [];
+      if (nomIndex === -1) missingRequiredColumns.push('Nom');
+      if (prenomIndex === -1) missingRequiredColumns.push('Prénom');
+      if (dateNaissanceIndex === -1) missingRequiredColumns.push('Date de naissance');
+      if (telephoneIndex === -1) missingRequiredColumns.push('Téléphone');
+      if (emailIndex === -1) missingRequiredColumns.push('Email');
+      if (adresseIndex === -1) missingRequiredColumns.push('Adresse');
+      if (heuresContratIndex === -1) missingRequiredColumns.push('Heures contrat');
+      if (dateDebutContratIndex === -1) missingRequiredColumns.push('Date début contrat');
+
+      if (missingRequiredColumns.length > 0) {
+        const availableColumns = headers.length > 0 ? headers : ['Aucune colonne détectée'];
+        setResultModal({
+          show: true,
+          type: 'error',
+          title: 'Colonnes manquantes',
+          message: `Le fichier CSV ne contient pas les colonnes obligatoires suivantes : ${missingRequiredColumns.join(', ')}`,
+          details: [
+            'Colonnes détectées dans le fichier :',
+            ...availableColumns.map(col => `  • ${col}`),
+            '',
+            'Conseil : Vérifiez que les noms de colonnes correspondent exactement au modèle (les accents et la casse sont importants).'
+          ],
+        });
+        return;
+      }
+
+      let successCount = 0;
+      let errorCount = 0;
+      const errors: string[] = [];
+
+      for (let i = 0; i < dataLines.length; i++) {
+        const row = parseCSVLine(dataLines[i], separator);
+        if (row.length === 0) continue;
+
+        const nom = nomIndex >= 0 ? (row[nomIndex] || '').trim() : '';
+        const prenom = prenomIndex >= 0 ? (row[prenomIndex] || '').trim() : '';
+        const dateNaissance = dateNaissanceIndex >= 0 ? (row[dateNaissanceIndex] || '').trim() : '';
+        const telephone = telephoneIndex >= 0 ? (row[telephoneIndex] || '').trim() : '';
+        const email = emailIndex >= 0 ? (row[emailIndex] || '').trim() : '';
+        const adresse = adresseIndex >= 0 ? (row[adresseIndex] || '').trim() : '';
+        const heuresContrat = heuresContratIndex >= 0 ? (row[heuresContratIndex] || '').trim() : '';
+        const dateDebutContrat = dateDebutContratIndex >= 0 ? (row[dateDebutContratIndex] || '').trim() : '';
+        const dateFinContrat = dateFinContratIndex >= 0 ? (row[dateFinContratIndex] || '').trim() : '';
+        const status = statusIndex >= 0 ? (row[statusIndex] || '').trim() : 'Disponible';
+
+        // Validation des champs obligatoires avec identification précise des colonnes manquantes
+        const missingFields: string[] = [];
+        if (!nom) missingFields.push(nomHeader);
+        if (!prenom) missingFields.push(prenomHeader);
+        if (!dateNaissance) missingFields.push(dateNaissanceHeader);
+        if (!telephone) missingFields.push(telephoneHeader);
+        if (!email) missingFields.push(emailHeader);
+        if (!adresse) missingFields.push(adresseHeader);
+        if (!heuresContrat) missingFields.push(heuresContratHeader);
+        if (!dateDebutContrat) missingFields.push(dateDebutContratHeader);
+
+        if (missingFields.length > 0) {
+          errorCount++;
+          const fieldsList = missingFields.join(', ');
+          errors.push(`Ligne ${i + 2}: Colonnes manquantes ou vides : ${fieldsList}`);
+          continue;
+        }
+
+        // Convertir les dates au format ISO
+        let dateNaissanceISO = '';
+        let dateDebutContratISO = '';
+        let dateFinContratISO: string | null = null;
+
+        try {
+          const dateParts = dateNaissance.split('/');
+          if (dateParts.length === 3) {
+            dateNaissanceISO = `${dateParts[2]}-${dateParts[1]}-${dateParts[0]}`;
+          } else {
+            dateNaissanceISO = new Date(dateNaissance).toISOString().split('T')[0];
+          }
+        } catch {
+          errorCount++;
+          errors.push(`Ligne ${i + 2}: Colonne "${dateNaissanceHeader}" - Format de date invalide (attendu: JJ/MM/AAAA)`);
+          continue;
+        }
+
+        try {
+          const dateParts = dateDebutContrat.split('/');
+          if (dateParts.length === 3) {
+            dateDebutContratISO = `${dateParts[2]}-${dateParts[1]}-${dateParts[0]}`;
+          } else {
+            dateDebutContratISO = new Date(dateDebutContrat).toISOString().split('T')[0];
+          }
+        } catch {
+          errorCount++;
+          errors.push(`Ligne ${i + 2}: Colonne "${dateDebutContratHeader}" - Format de date invalide (attendu: JJ/MM/AAAA)`);
+          continue;
+        }
+
+        if (dateFinContrat) {
+          try {
+            const dateParts = dateFinContrat.split('/');
+            if (dateParts.length === 3) {
+              dateFinContratISO = `${dateParts[2]}-${dateParts[1]}-${dateParts[0]}`;
+            } else {
+              dateFinContratISO = new Date(dateFinContrat).toISOString().split('T')[0];
+            }
+          } catch {
+            // Si la date de fin est invalide, on continue sans elle (elle est optionnelle)
+          }
+        }
+
+        // Valider les heures contrat
+        const heuresContratNum = parseInt(heuresContrat, 10);
+        if (isNaN(heuresContratNum) || heuresContratNum <= 0) {
+          errorCount++;
+          errors.push(`Ligne ${i + 2}: Colonne "${heuresContratHeader}" - Doit être un nombre positif`);
+          continue;
+        }
+
+        try {
+          const response = await fetch('/api/chauffeurs', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              nom,
+              prenom,
+              dateNaissance: dateNaissanceISO,
+              telephone,
+              email,
+              adresse,
+              heuresContrat: heuresContratNum,
+              dateDebutContrat: dateDebutContratISO,
+              dateFinContrat: dateFinContratISO,
+            }),
+          });
+
+          if (response.ok) {
+            successCount++;
+          } else {
+            errorCount++;
+            try {
+              const errorData = await response.json();
+              let errorMsg = errorData.error || 'Erreur lors de l\'import';
+              if (errorMsg.includes('champs obligatoires')) {
+                errorMsg = `Erreur de validation : ${errorMsg}`;
+              }
+              errors.push(`Ligne ${i + 2}: ${errorMsg}`);
+            } catch {
+              errors.push(`Ligne ${i + 2}: Erreur serveur lors de l'import`);
+            }
+          }
+        } catch (error) {
+          errorCount++;
+          errors.push(`Ligne ${i + 2}: Erreur réseau - ${error instanceof Error ? error.message : 'Connexion impossible'}`);
+        }
+      }
+
+      // Afficher les résultats dans une modale
+      const title = errorCount > 0 
+        ? `Import terminé avec ${errorCount} erreur(s)`
+        : 'Import réussi';
+      
+      const message = errorCount === 0
+        ? `${successCount} chauffeur(s) importé(s) avec succès`
+        : `${successCount} chauffeur(s) importé(s) avec succès, ${errorCount} erreur(s)`;
+
+      setResultModal({
+        show: true,
+        type: errorCount === 0 ? 'success' : 'error',
+        title,
+        message,
+        details: errors.length > 0 ? errors : undefined,
+      });
+
+      // Rafraîchir la liste
+      fetchChauffeurs(search);
+      setShowImportModal(false);
+    };
+
+    reader.readAsText(file, 'UTF-8');
+  };
+
   return (
     <>
       {/* Barre de recherche et actions */}
@@ -164,17 +630,24 @@ export default function ChauffeursTable() {
               </svg>
               Nouveau chauffeur
             </button>
-            <button className="flex items-center gap-2 px-4 py-2 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors">
+            <button 
+              onClick={() => setShowImportModal(true)}
+              className="flex items-center gap-2 px-4 py-2 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors"
+            >
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
               </svg>
               Importer
             </button>
-            <button className="flex items-center gap-2 px-4 py-2 bg-lorange text-white rounded-lg hover:bg-dorange transition-colors">
+            <button 
+              onClick={handleExport}
+              disabled={selectedIds.size === 0}
+              className="flex items-center gap-2 px-4 py-2 bg-lorange text-white rounded-lg hover:bg-dorange transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4-4m0 0l-4-4m4 4V4" />
               </svg>
-              Exporter
+              Exporter {selectedIds.size > 0 && `(${selectedIds.size})`}
             </button>
           </div>
         </div>
@@ -191,6 +664,14 @@ export default function ChauffeursTable() {
             <table className="min-w-full divide-y divide-gray-200">
               <thead className="bg-gray-50">
                 <tr>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    <input
+                      type="checkbox"
+                      checked={chauffeurs.length > 0 && selectedIds.size === chauffeurs.length}
+                      onChange={(e) => handleSelectAll(e.target.checked)}
+                      className="w-4 h-4 text-lblue border-gray-300 rounded focus:ring-lblue"
+                    />
+                  </th>
                   <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">NOM</th>
                   <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CONTACT</th>
                   <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ADRESSE</th>
@@ -202,6 +683,14 @@ export default function ChauffeursTable() {
               <tbody className="bg-white divide-y divide-gray-200">
                 {chauffeurs.map((chauffeur) => (
                   <tr key={chauffeur.id} className="hover:bg-gray-50">
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <input
+                        type="checkbox"
+                        checked={selectedIds.has(chauffeur.id)}
+                        onChange={(e) => handleSelectOne(chauffeur.id, e.target.checked)}
+                        className="w-4 h-4 text-lblue border-gray-300 rounded focus:ring-lblue"
+                      />
+                    </td>
                     <td className="px-6 py-4 whitespace-nowrap">
                       <div className="flex items-center gap-3">
                         <div className="w-10 h-10 rounded-full bg-lorange flex items-center justify-center text-white font-semibold">
@@ -294,6 +783,241 @@ export default function ChauffeursTable() {
         />
       )}
 
+      {/* Modal import */}
+      {showImportModal && (
+        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-fadeIn">
+          <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full animate-slideUp border border-gray-200">
+            {/* Header */}
+            <div className="border-b border-gray-200 px-6 py-5 bg-white">
+              <div className="flex items-center justify-between">
+                <div>
+                  <h2 className="text-xl font-semibold text-gray-900">
+                    Importer des chauffeurs
+                  </h2>
+                  <p className="text-sm text-gray-500 mt-1">
+                    Téléchargez le modèle d'exemple, remplissez-le et importez-le ici
+                  </p>
+                </div>
+                <button
+                  onClick={() => setShowImportModal(false)}
+                  className="text-gray-400 hover:text-gray-600 transition-colors p-1.5 hover:bg-gray-100 rounded"
+                >
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+
+            {/* Contenu */}
+            <div className="px-6 py-6">
+              <div className="space-y-6">
+                {/* Télécharger le modèle */}
+                <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+                  <div className="flex items-start gap-3">
+                    <svg className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    <div className="flex-1">
+                      <h3 className="text-sm font-semibold text-blue-900 mb-1">
+                        Télécharger le modèle d'exemple
+                      </h3>
+                      <p className="text-sm text-blue-700 mb-3">
+                        Téléchargez le fichier CSV modèle pour voir le format attendu et remplir vos données.
+                      </p>
+                      <button
+                        onClick={handleDownloadTemplate}
+                        className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm"
+                      >
+                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                        </svg>
+                        Télécharger le modèle CSV
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Upload fichier */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Sélectionner le fichier CSV à importer
+                  </label>
+                  <div className="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-lblue transition-colors">
+                    <div className="space-y-1 text-center">
+                      <svg className="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
+                        <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+                      </svg>
+                      <div className="flex text-sm text-gray-600">
+                        <label htmlFor="file-upload-chauffeur" className="relative cursor-pointer bg-white rounded-md font-medium text-lblue hover:text-dblue focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-lblue">
+                          <span>Cliquez pour sélectionner un fichier</span>
+                          <input
+                            id="file-upload-chauffeur"
+                            name="file-upload-chauffeur"
+                            type="file"
+                            accept=".csv"
+                            onChange={handleFileUpload}
+                            className="sr-only"
+                          />
+                        </label>
+                        <p className="pl-1">ou glissez-déposez</p>
+                      </div>
+                      <p className="text-xs text-gray-500">CSV jusqu'à 10MB</p>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Instructions */}
+                <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
+                  <h3 className="text-sm font-semibold text-gray-900 mb-2">
+                    Instructions :
+                  </h3>
+                  <ul className="text-sm text-gray-600 space-y-1 list-disc list-inside">
+                    <li>Les champs Nom, Prénom, Date de naissance, Téléphone, Email, Adresse, Heures contrat et Date début contrat sont obligatoires</li>
+                    <li>Le format de date attendu est JJ/MM/AAAA</li>
+                    <li>Les champs Date fin contrat et Status sont optionnels</li>
+                    <li>Assurez-vous que le fichier utilise l'encodage UTF-8</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+
+            {/* Footer */}
+            <div className="border-t border-gray-200 px-6 py-4 bg-gray-50/50">
+              <div className="flex justify-end">
+                <button
+                  onClick={() => setShowImportModal(false)}
+                  className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors"
+                >
+                  Fermer
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Modal résultat */}
+      {resultModal && resultModal.show && (
+        <div 
+          className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-[60] p-4 animate-fadeIn"
+          onClick={() => setResultModal(null)}
+        >
+          <div 
+            className="bg-white rounded-lg shadow-xl max-w-lg w-full animate-slideUp border border-gray-200"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Header */}
+            <div className={`border-b border-gray-200 px-6 py-5 ${
+              resultModal.type === 'success' ? 'bg-green-50' :
+              resultModal.type === 'error' ? 'bg-red-50' :
+              'bg-blue-50'
+            }`}>
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  {resultModal.type === 'success' && (
+                    <svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                  )}
+                  {resultModal.type === 'error' && (
+                    <svg className="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                  )}
+                  {resultModal.type === 'info' && (
+                    <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                  )}
+                  <h2 className={`text-xl font-semibold ${
+                    resultModal.type === 'success' ? 'text-green-900' :
+                    resultModal.type === 'error' ? 'text-red-900' :
+                    'text-blue-900'
+                  }`}>
+                    {resultModal.title}
+                  </h2>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => setResultModal(null)}
+                  className="text-gray-400 hover:text-gray-600 transition-colors p-1.5 hover:bg-white/50 rounded"
+                >
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+
+            {/* Contenu */}
+            <div className="px-6 py-6">
+              <p className={`text-sm font-medium mb-4 ${
+                resultModal.type === 'success' ? 'text-green-800' :
+                resultModal.type === 'error' ? 'text-red-800' :
+                'text-blue-800'
+              }`}>
+                {resultModal.message}
+              </p>
+
+              {resultModal.details && resultModal.details.length > 0 && (
+                <div className="mt-4">
+                  <h3 className="text-sm font-semibold text-gray-900 mb-2">
+                    {resultModal.details[0].includes('Colonnes détectées') ? 'Détails :' : 'Erreurs :'}
+                  </h3>
+                  <div className={`border rounded-lg p-4 max-h-64 overflow-y-auto ${
+                    resultModal.type === 'error' ? 'bg-red-50 border-red-200' : 'bg-gray-50 border-gray-200'
+                  }`}>
+                    <ul className="space-y-1">
+                      {resultModal.details.map((detail, index) => (
+                        <li key={index} className={`text-sm ${
+                          resultModal.type === 'error' ? 'text-red-800' : 'text-gray-800'
+                        }`}>
+                          {detail}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Footer */}
+            <div className="border-t border-gray-200 px-6 py-4 bg-gray-50/50">
+              <div className="flex justify-end">
+                <button
+                  type="button"
+                  onClick={() => setResultModal(null)}
+                  className={`px-6 py-2 text-sm font-medium rounded-lg transition-colors ${
+                    resultModal.type === 'success' 
+                      ? 'bg-green-600 text-white hover:bg-green-700' :
+                      resultModal.type === 'error'
+                      ? 'bg-red-600 text-white hover:bg-red-700' :
+                      'bg-blue-600 text-white hover:bg-blue-700'
+                  }`}
+                >
+                  OK
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Modal de confirmation de suppression */}
+      {confirmDeleteModal && (
+        <ConfirmModal
+          isOpen={confirmDeleteModal.show}
+          title="Supprimer le chauffeur"
+          message="Êtes-vous sûr de vouloir supprimer ce chauffeur ?"
+          confirmText="Supprimer"
+          cancelText="Annuler"
+          confirmColor="danger"
+          onConfirm={confirmDelete}
+          onCancel={() => setConfirmDeleteModal(null)}
+        />
+      )}
+
       {/* Modal vue détaillée */}
       {viewingChauffeur && (
         <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-fadeIn">

components/ConfigurationContent.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, useCallback, memo } from 'react';
 import { useRouter } from 'next/navigation';
 import { useNotification } from './NotificationProvider';
 import { AVAILABLE_PAGES } from '@/lib/pages';
+import ConfirmModal from './ConfirmModal';
 
 interface AdherentOption {
   id: string;
@@ -185,6 +186,18 @@ export default function ConfigurationContent() {
     facturation: '',
     forfait: '',
   });
+  const [confirmDeleteOptionModal, setConfirmDeleteOptionModal] = useState<{
+    show: boolean;
+    id: string | null;
+  } | null>(null);
+  const [confirmDeleteUserModal, setConfirmDeleteUserModal] = useState<{
+    show: boolean;
+    userId: string | null;
+  } | null>(null);
+  const [confirmDeleteRoleModal, setConfirmDeleteRoleModal] = useState<{
+    show: boolean;
+    roleId: string | null;
+  } | null>(null);
 
   const fetchOptions = useCallback(async () => {
     setLoading(true);
@@ -286,13 +299,20 @@ export default function ConfigurationContent() {
     setEditingValue('');
   }, []);
 
-  const handleDelete = useCallback(async (id: string) => {
+  const handleDelete = useCallback((id: string) => {
-    if (!confirm('Êtes-vous sûr de vouloir supprimer cette option ?')) {
+    setConfirmDeleteOptionModal({
-      return;
+      show: true,
-    }
+      id,
+    });
+  }, []);
+
+  const confirmDeleteOption = useCallback(async () => {
+    if (!confirmDeleteOptionModal?.id) return;
+
+    const idToDelete = confirmDeleteOptionModal.id;
 
     try {
-      const response = await fetch(`/api/settings/adherent-options/${id}`, {
+      const response = await fetch(`/api/settings/adherent-options/${idToDelete}`, {
         method: 'DELETE',
       });
 
@@ -306,8 +326,10 @@ export default function ConfigurationContent() {
     } catch (error) {
       console.error('Erreur:', error);
       showNotification('Erreur lors de la suppression', 'error');
+    } finally {
+      setConfirmDeleteOptionModal(null);
     }
-  }, [showNotification, fetchOptions]);
+  }, [confirmDeleteOptionModal, fetchOptions, showNotification]);
 
   const handleNewValueChange = useCallback((type: 'situation' | 'prescripteur' | 'facturation' | 'forfait', value: string) => {
     setNewValue((prev) => ({ ...prev, [type]: value }));
@@ -375,13 +397,18 @@ export default function ConfigurationContent() {
       }
     };
 
-    const handleDeleteUser = async (userId: string) => {
+    const handleDeleteUser = (userId: string) => {
-      if (!confirm('Êtes-vous sûr de vouloir supprimer cet utilisateur ? Cette action est irréversible.')) {
+      setConfirmDeleteUserModal({
-        return;
+        show: true,
-      }
+        userId,
+      });
+    };
+
+    const confirmDeleteUser = async () => {
+      if (!confirmDeleteUserModal?.userId) return;
 
       try {
-        const response = await fetch(`/api/users/${userId}`, {
+        const response = await fetch(`/api/users/${confirmDeleteUserModal.userId}`, {
           method: 'DELETE',
         });
 
@@ -599,6 +626,20 @@ export default function ConfigurationContent() {
             </div>
           </div>
         )}
+
+        {/* Modal de confirmation de suppression utilisateur */}
+        {confirmDeleteUserModal && (
+          <ConfirmModal
+            isOpen={confirmDeleteUserModal.show}
+            title="Supprimer l'utilisateur"
+            message="Êtes-vous sûr de vouloir supprimer cet utilisateur ? Cette action est irréversible."
+            confirmText="Supprimer"
+            cancelText="Annuler"
+            confirmColor="danger"
+            onConfirm={confirmDeleteUser}
+            onCancel={() => setConfirmDeleteUserModal(null)}
+          />
+        )}
       </>
     );
   };
@@ -800,13 +841,18 @@ export default function ConfigurationContent() {
       }
     };
 
-    const handleDeleteRole = async (roleId: string) => {
+    const handleDeleteRole = (roleId: string) => {
-      if (!confirm('Êtes-vous sûr de vouloir supprimer ce rôle ?')) {
+      setConfirmDeleteRoleModal({
-        return;
+        show: true,
-      }
+        roleId,
+      });
+    };
+
+    const confirmDeleteRole = async () => {
+      if (!confirmDeleteRoleModal?.roleId) return;
 
       try {
-        const response = await fetch(`/api/roles/${roleId}`, {
+        const response = await fetch(`/api/roles/${confirmDeleteRoleModal.roleId}`, {
           method: 'DELETE',
         });
 
@@ -820,6 +866,8 @@ export default function ConfigurationContent() {
       } catch (error) {
         console.error('Erreur:', error);
         showNotification('Erreur lors de la suppression', 'error');
+      } finally {
+        setConfirmDeleteRoleModal(null);
       }
     };
 
@@ -1023,6 +1071,19 @@ export default function ConfigurationContent() {
           </div>
         )}
 
+        {/* Modal de confirmation de suppression rôle */}
+        {confirmDeleteRoleModal && (
+          <ConfirmModal
+            isOpen={confirmDeleteRoleModal.show}
+            title="Supprimer le rôle"
+            message="Êtes-vous sûr de vouloir supprimer ce rôle ?"
+            confirmText="Supprimer"
+            cancelText="Annuler"
+            confirmColor="danger"
+            onConfirm={confirmDeleteRole}
+            onCancel={() => setConfirmDeleteRoleModal(null)}
+          />
+        )}
       </>
     );
   };
@@ -1216,6 +1277,46 @@ export default function ConfigurationContent() {
           </div>
         </div>
       </div>
+
+      {/* Modales de confirmation */}
+      {confirmDeleteOptionModal && (
+        <ConfirmModal
+          isOpen={confirmDeleteOptionModal.show}
+          title="Supprimer l'option"
+          message="Êtes-vous sûr de vouloir supprimer cette option ?"
+          confirmText="Supprimer"
+          cancelText="Annuler"
+          confirmColor="danger"
+          onConfirm={confirmDeleteOption}
+          onCancel={() => setConfirmDeleteOptionModal(null)}
+        />
+      )}
+
+      {confirmDeleteUserModal && (
+        <ConfirmModal
+          isOpen={confirmDeleteUserModal.show}
+          title="Supprimer l'utilisateur"
+          message="Êtes-vous sûr de vouloir supprimer cet utilisateur ? Cette action est irréversible."
+          confirmText="Supprimer"
+          cancelText="Annuler"
+          confirmColor="danger"
+          onConfirm={confirmDeleteUser}
+          onCancel={() => setConfirmDeleteUserModal(null)}
+        />
+      )}
+
+      {confirmDeleteRoleModal && (
+        <ConfirmModal
+          isOpen={confirmDeleteRoleModal.show}
+          title="Supprimer le rôle"
+          message="Êtes-vous sûr de vouloir supprimer ce rôle ?"
+          confirmText="Supprimer"
+          cancelText="Annuler"
+          confirmColor="danger"
+          onConfirm={confirmDeleteRole}
+          onCancel={() => setConfirmDeleteRoleModal(null)}
+        />
+      )}
     </div>
   );
 }

components/ConfirmModal.tsx

@@ -35,8 +35,14 @@ export default function ConfirmModal({
   };
 
   return (
-    <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-fadeIn">
+    <div 
-      <div className="bg-white rounded-lg shadow-xl max-w-md w-full animate-slideUp border border-gray-200">
+      className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-fadeIn"
+      onClick={onCancel}
+    >
+      <div 
+        className="bg-white rounded-lg shadow-xl max-w-md w-full animate-slideUp border border-gray-200"
+        onClick={(e) => e.stopPropagation()}
+      >
         {/* Header */}
         <div className="border-b border-gray-200 px-6 py-5 bg-white">
           <h2 className="text-xl font-semibold text-gray-900">{title}</h2>

components/GroupSettingsModal.tsx

@@ -2,6 +2,8 @@
 
 import { useState, useEffect } from 'react';
 import useSWR from 'swr';
+import AlertModal from './AlertModal';
+import ConfirmModal from './ConfirmModal';
 
 interface User {
   id: string;
@@ -41,6 +43,16 @@ export default function GroupSettingsModal({
   const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
   const [isUpdating, setIsUpdating] = useState(false);
   const [isAdding, setIsAdding] = useState(false);
+  const [alertModal, setAlertModal] = useState<{
+    show: boolean;
+    type: 'success' | 'error' | 'info' | 'warning';
+    title: string;
+    message: string;
+  } | null>(null);
+  const [confirmModal, setConfirmModal] = useState<{
+    show: boolean;
+    userId: string | null;
+  } | null>(null);
 
   const { data: users, error } = useSWR<User[]>(
     search ? `/api/users?search=${encodeURIComponent(search)}` : null,
@@ -51,7 +63,12 @@ export default function GroupSettingsModal({
 
   const handleUpdateName = async () => {
     if (!groupName.trim()) {
-      alert('Le nom du groupe ne peut pas être vide');
+      setAlertModal({
+        show: true,
+        type: 'warning',
+        title: 'Nom requis',
+        message: 'Le nom du groupe ne peut pas être vide',
+      });
       return;
     }
 
@@ -70,11 +87,21 @@ export default function GroupSettingsModal({
         onClose();
       } else {
         const error = await response.json();
-        alert(error.error || 'Erreur lors de la mise à jour');
+        setAlertModal({
+          show: true,
+          type: 'error',
+          title: 'Erreur',
+          message: error.error || 'Erreur lors de la mise à jour',
+        });
       }
     } catch (error) {
       console.error('Erreur:', error);
-      alert('Erreur lors de la mise à jour');
+      setAlertModal({
+        show: true,
+        type: 'error',
+        title: 'Erreur',
+        message: 'Erreur lors de la mise à jour',
+      });
     } finally {
       setIsUpdating(false);
     }
@@ -82,7 +109,12 @@ export default function GroupSettingsModal({
 
   const handleAddParticipants = async () => {
     if (selectedUsers.length === 0) {
-      alert('Veuillez sélectionner au moins un utilisateur');
+      setAlertModal({
+        show: true,
+        type: 'warning',
+        title: 'Sélection requise',
+        message: 'Veuillez sélectionner au moins un utilisateur',
+      });
       return;
     }
 
@@ -102,24 +134,39 @@ export default function GroupSettingsModal({
         onUpdate();
       } else {
         const error = await response.json();
-        alert(error.error || 'Erreur lors de l\'ajout des participants');
+        setAlertModal({
+          show: true,
+          type: 'error',
+          title: 'Erreur',
+          message: error.error || 'Erreur lors de l\'ajout des participants',
+        });
       }
     } catch (error) {
       console.error('Erreur:', error);
-      alert('Erreur lors de l\'ajout des participants');
+      setAlertModal({
+        show: true,
+        type: 'error',
+        title: 'Erreur',
+        message: 'Erreur lors de l\'ajout des participants',
+      });
     } finally {
       setIsAdding(false);
     }
   };
 
   const handleRemoveParticipant = async (userId: string) => {
-    if (!confirm('Êtes-vous sûr de vouloir retirer cet utilisateur du groupe ?')) {
+    setConfirmModal({
-      return;
+      show: true,
-    }
+      userId,
+    });
+  };
+
+  const confirmRemoveParticipant = async () => {
+    if (!confirmModal?.userId) return;
 
     try {
       const response = await fetch(
-        `/api/conversations/${conversation.id}/participants?userId=${userId}`,
+        `/api/conversations/${conversation.id}/participants?userId=${confirmModal.userId}`,
         {
           method: 'DELETE',
         }
@@ -127,13 +174,26 @@ export default function GroupSettingsModal({
 
       if (response.ok) {
         onUpdate();
+        setConfirmModal(null);
       } else {
         const error = await response.json();
-        alert(error.error || 'Erreur lors du retrait du participant');
+        setAlertModal({
+          show: true,
+          type: 'error',
+          title: 'Erreur',
+          message: error.error || 'Erreur lors du retrait du participant',
+        });
+        setConfirmModal(null);
       }
     } catch (error) {
       console.error('Erreur:', error);
-      alert('Erreur lors du retrait du participant');
+      setAlertModal({
+        show: true,
+        type: 'error',
+        title: 'Erreur',
+        message: 'Erreur lors du retrait du participant',
+      });
+      setConfirmModal(null);
     }
   };
 
@@ -295,6 +355,31 @@ export default function GroupSettingsModal({
           </button>
         </div>
       </div>
+
+      {/* Modal d'alerte */}
+      {alertModal && (
+        <AlertModal
+          isOpen={alertModal.show}
+          type={alertModal.type}
+          title={alertModal.title}
+          message={alertModal.message}
+          onClose={() => setAlertModal(null)}
+        />
+      )}
+
+      {/* Modal de confirmation */}
+      {confirmModal && (
+        <ConfirmModal
+          isOpen={confirmModal.show}
+          title="Retirer un participant"
+          message="Êtes-vous sûr de vouloir retirer cet utilisateur du groupe ?"
+          confirmText="Retirer"
+          cancelText="Annuler"
+          confirmColor="danger"
+          onConfirm={confirmRemoveParticipant}
+          onCancel={() => setConfirmModal(null)}
+        />
+      )}
     </div>
   );
 }

components/NewConversationModal.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import useSWR from 'swr';
+import AlertModal from './AlertModal';
 
 interface User {
   id: string;
@@ -25,6 +26,12 @@ export default function NewConversationModal({
   const [conversationType, setConversationType] = useState<'direct' | 'group'>('direct');
   const [groupName, setGroupName] = useState('');
   const [isCreating, setIsCreating] = useState(false);
+  const [alertModal, setAlertModal] = useState<{
+    show: boolean;
+    type: 'success' | 'error' | 'info' | 'warning';
+    title: string;
+    message: string;
+  } | null>(null);
 
   // Récupérer l'utilisateur actuel
   const { data: currentUser } = useSWR<User>('/api/auth/me', fetcher);
@@ -47,12 +54,22 @@ export default function NewConversationModal({
 
   const handleCreate = async () => {
     if (selectedUsers.length === 0) {
-      alert('Veuillez sélectionner au moins un utilisateur');
+      setAlertModal({
+        show: true,
+        type: 'warning',
+        title: 'Sélection requise',
+        message: 'Veuillez sélectionner au moins un utilisateur',
+      });
       return;
     }
 
     if (conversationType === 'group' && !groupName.trim()) {
-      alert('Veuillez entrer un nom pour le groupe');
+      setAlertModal({
+        show: true,
+        type: 'warning',
+        title: 'Nom requis',
+        message: 'Veuillez entrer un nom pour le groupe',
+      });
       return;
     }
 
@@ -75,11 +92,21 @@ export default function NewConversationModal({
         onConversationCreated(conversation.id);
       } else {
         const error = await response.json();
-        alert(error.error || 'Erreur lors de la création de la conversation');
+        setAlertModal({
+          show: true,
+          type: 'error',
+          title: 'Erreur',
+          message: error.error || 'Erreur lors de la création de la conversation',
+        });
       }
     } catch (error) {
       console.error('Erreur:', error);
-      alert('Erreur lors de la création de la conversation');
+      setAlertModal({
+        show: true,
+        type: 'error',
+        title: 'Erreur',
+        message: 'Erreur lors de la création de la conversation',
+      });
     } finally {
       setIsCreating(false);
     }
@@ -234,6 +261,17 @@ export default function NewConversationModal({
           </button>
         </div>
       </div>
+
+      {/* Modal d'alerte */}
+      {alertModal && (
+        <AlertModal
+          isOpen={alertModal.show}
+          type={alertModal.type}
+          title={alertModal.title}
+          message={alertModal.message}
+          onClose={() => setAlertModal(null)}
+        />
+      )}
     </div>
   );
 }

components/ParametresContent.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { useNotification } from './NotificationProvider';
 import useSWR from 'swr';
+import ConfirmModal from './ConfirmModal';
 
 interface User {
   id: string;
@@ -49,6 +50,10 @@ export default function ParametresContent() {
     prescripteur: '',
     facturation: '',
   });
+  const [confirmDeleteModal, setConfirmDeleteModal] = useState<{
+    show: boolean;
+    id: string | null;
+  } | null>(null);
 
   useEffect(() => {
     fetchOptions();
@@ -148,13 +153,18 @@ export default function ParametresContent() {
     setEditingValue('');
   };
 
-  const handleDelete = async (id: string) => {
+  const handleDelete = (id: string) => {
-    if (!confirm('Êtes-vous sûr de vouloir supprimer cette option ?')) {
+    setConfirmDeleteModal({
-      return;
+      show: true,
-    }
+      id,
+    });
+  };
+
+  const confirmDelete = async () => {
+    if (!confirmDeleteModal?.id) return;
 
     try {
-      const response = await fetch(`/api/settings/adherent-options/${id}`, {
+      const response = await fetch(`/api/settings/adherent-options/${confirmDeleteModal.id}`, {
         method: 'DELETE',
       });
 
@@ -168,6 +178,8 @@ export default function ParametresContent() {
     } catch (error) {
       console.error('Erreur:', error);
       showNotification('Erreur lors de la suppression', 'error');
+    } finally {
+      setConfirmDeleteModal(null);
     }
   };
 
@@ -366,6 +378,20 @@ export default function ParametresContent() {
           </div>
         )}
       </div>
+
+      {/* Modal de confirmation de suppression */}
+      {confirmDeleteModal && (
+        <ConfirmModal
+          isOpen={confirmDeleteModal.show}
+          title="Supprimer l'option"
+          message="Êtes-vous sûr de vouloir supprimer cette option ?"
+          confirmText="Supprimer"
+          cancelText="Annuler"
+          confirmColor="danger"
+          onConfirm={confirmDelete}
+          onCancel={() => setConfirmDeleteModal(null)}
+        />
+      )}
     </div>
   );
 }

components/UniversProForm.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import AlertModal from './AlertModal';
 
 interface UniversPro {
   id: string;
@@ -19,6 +20,12 @@ interface UniversProFormProps {
 
 export default function UniversProForm({ contact, onClose }: UniversProFormProps) {
   const [loading, setLoading] = useState(false);
+  const [alertModal, setAlertModal] = useState<{
+    show: boolean;
+    type: 'success' | 'error' | 'info' | 'warning';
+    title: string;
+    message: string;
+  } | null>(null);
   const [formData, setFormData] = useState({
     nom: '',
     prenom: '',
@@ -61,11 +68,21 @@ export default function UniversProForm({ contact, onClose }: UniversProFormProps
         onClose();
       } else {
         const error = await response.json();
-        alert(error.error || 'Une erreur est survenue');
+        setAlertModal({
+          show: true,
+          type: 'error',
+          title: 'Erreur',
+          message: error.error || 'Une erreur est survenue',
+        });
       }
     } catch (error) {
       console.error('Erreur:', error);
-      alert('Une erreur est survenue');
+      setAlertModal({
+        show: true,
+        type: 'error',
+        title: 'Erreur',
+        message: 'Une erreur est survenue',
+      });
     } finally {
       setLoading(false);
     }
@@ -241,6 +258,17 @@ export default function UniversProForm({ contact, onClose }: UniversProFormProps
           </div>
         </form>
       </div>
+
+      {/* Modal d'alerte */}
+      {alertModal && (
+        <AlertModal
+          isOpen={alertModal.show}
+          type={alertModal.type}
+          title={alertModal.title}
+          message={alertModal.message}
+          onClose={() => setAlertModal(null)}
+        />
+      )}
     </div>
   );
 }

components/UniversProTable.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import UniversProForm from './UniversProForm';
+import ConfirmModal from './ConfirmModal';
 
 interface UniversPro {
   id: string;
@@ -20,6 +21,19 @@ export default function UniversProTable() {
   const [showForm, setShowForm] = useState(false);
   const [editingContact, setEditingContact] = useState<UniversPro | null>(null);
   const [viewingContact, setViewingContact] = useState<UniversPro | null>(null);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [showImportModal, setShowImportModal] = useState(false);
+  const [resultModal, setResultModal] = useState<{
+    show: boolean;
+    type: 'success' | 'error' | 'info';
+    title: string;
+    message: string;
+    details?: string[];
+  } | null>(null);
+  const [confirmDeleteModal, setConfirmDeleteModal] = useState<{
+    show: boolean;
+    id: string | null;
+  } | null>(null);
 
   const fetchContacts = async (searchTerm: string = '') => {
     setLoading(true);
@@ -52,23 +66,46 @@ export default function UniversProTable() {
   }, []);
 
   const handleDelete = async (id: string) => {
-    if (!confirm('Êtes-vous sûr de vouloir supprimer ce contact ?')) {
+    setConfirmDeleteModal({
-      return;
+      show: true,
-    }
+      id,
+    });
+  };
+
+  const confirmDelete = async () => {
+    if (!confirmDeleteModal?.id) return;
 
     try {
-      const response = await fetch(`/api/univers-pro/${id}`, {
+      const response = await fetch(`/api/univers-pro/${confirmDeleteModal.id}`, {
         method: 'DELETE',
       });
 
       if (response.ok) {
         fetchContacts(search);
+        setResultModal({
+          show: true,
+          type: 'success',
+          title: 'Suppression réussie',
+          message: 'Le contact a été supprimé avec succès',
+        });
       } else {
-        alert('Erreur lors de la suppression');
+        setResultModal({
+          show: true,
+          type: 'error',
+          title: 'Erreur',
+          message: 'Erreur lors de la suppression',
+        });
       }
     } catch (error) {
       console.error('Erreur lors de la suppression:', error);
-      alert('Erreur lors de la suppression');
+      setResultModal({
+        show: true,
+        type: 'error',
+        title: 'Erreur',
+        message: 'Erreur lors de la suppression',
+      });
+    } finally {
+      setConfirmDeleteModal(null);
     }
   };
 
@@ -99,6 +136,331 @@ export default function UniversProTable() {
     return `${prenom.charAt(0)}${nom.charAt(0)}`.toUpperCase();
   };
 
+  const handleSelectAll = (checked: boolean) => {
+    if (checked) {
+      setSelectedIds(new Set(contacts.map(c => c.id)));
+    } else {
+      setSelectedIds(new Set());
+    }
+  };
+
+  const handleSelectOne = (id: string, checked: boolean) => {
+    const newSelected = new Set(selectedIds);
+    if (checked) {
+      newSelected.add(id);
+    } else {
+      newSelected.delete(id);
+    }
+    setSelectedIds(newSelected);
+  };
+
+  const handleExport = () => {
+    if (selectedIds.size === 0) {
+      setResultModal({
+        show: true,
+        type: 'info',
+        title: 'Aucune sélection',
+        message: 'Veuillez sélectionner au moins un contact à exporter',
+      });
+      return;
+    }
+
+    const selectedContacts = contacts.filter(c => selectedIds.has(c.id));
+    
+    // Créer les en-têtes CSV avec tous les champs disponibles
+    const headers = [
+      'Nom',
+      'Prénom',
+      'Téléphone',
+      'Email',
+      'Adresse',
+      'Nom entreprise'
+    ];
+
+    // Créer les lignes CSV
+    const rows = selectedContacts.map(contact => {
+      return [
+        contact.nom || '',
+        contact.prenom || '',
+        contact.telephone || '',
+        contact.email || '',
+        contact.adresse || '',
+        contact.nomEntreprise || ''
+      ];
+    });
+
+    // Créer le contenu CSV
+    const csvContent = [
+      headers.join(','),
+      ...rows.map(row => row.map(cell => `"${cell.replace(/"/g, '""')}"`).join(','))
+    ].join('\n');
+
+    // Créer le blob et télécharger
+    const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' }); // BOM pour Excel
+    const link = document.createElement('a');
+    const url = URL.createObjectURL(blob);
+    link.setAttribute('href', url);
+    link.setAttribute('download', `contacts_pro_export_${new Date().toISOString().split('T')[0]}.csv`);
+    link.style.visibility = 'hidden';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    
+    // Réinitialiser la sélection
+    setSelectedIds(new Set());
+  };
+
+  const handleDownloadTemplate = () => {
+    const headers = [
+      'Nom',
+      'Prénom',
+      'Téléphone',
+      'Email',
+      'Adresse',
+      'Nom entreprise'
+    ];
+
+    // Ligne d'exemple
+    const exampleRow = [
+      'Dupont',
+      'Jean',
+      '0123456789',
+      'jean.dupont@example.com',
+      '123 Rue de la Paix, 75001 Paris',
+      'BNP Paribas'
+    ];
+
+    const csvContent = [
+      headers.join(','),
+      exampleRow.map(cell => `"${cell}"`).join(',')
+    ].join('\n');
+
+    const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' });
+    const link = document.createElement('a');
+    const url = URL.createObjectURL(blob);
+    link.setAttribute('href', url);
+    link.setAttribute('download', 'modele_import_contacts_pro.csv');
+    link.style.visibility = 'hidden';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = async (e) => {
+      const text = e.target?.result as string;
+      const lines = text.split('\n').filter(line => line.trim());
+      
+      if (lines.length < 2) {
+        setResultModal({
+          show: true,
+          type: 'error',
+          title: 'Fichier invalide',
+          message: 'Le fichier CSV doit contenir au moins une ligne d\'en-tête et une ligne de données',
+        });
+        return;
+      }
+
+      // Détecter le séparateur (virgule ou point-virgule)
+      const detectSeparator = (firstLine: string): string => {
+        const commaCount = (firstLine.match(/,/g) || []).length;
+        const semicolonCount = (firstLine.match(/;/g) || []).length;
+        return semicolonCount >= commaCount ? ';' : ',';
+      };
+
+      // Parser le CSV (gestion simple des guillemets avec détection automatique du séparateur)
+      const parseCSVLine = (line: string, separator: string): string[] => {
+        const result: string[] = [];
+        let current = '';
+        let inQuotes = false;
+        
+        for (let i = 0; i < line.length; i++) {
+          const char = line[i];
+          if (char === '"') {
+            if (inQuotes && line[i + 1] === '"') {
+              current += '"';
+              i++;
+            } else {
+              inQuotes = !inQuotes;
+            }
+          } else if (char === separator && !inQuotes) {
+            result.push(current.trim());
+            current = '';
+          } else {
+            current += char;
+          }
+        }
+        result.push(current.trim());
+        return result;
+      };
+
+      // Fonction pour normaliser les noms de colonnes
+      const normalizeHeader = (header: string): string => {
+        return header
+          .toLowerCase()
+          .normalize('NFD')
+          .replace(/[\u0300-\u036f]/g, '')
+          .replace(/\s+/g, '')
+          .trim();
+      };
+
+      // Fonction pour trouver une colonne avec plusieurs variantes possibles
+      const findColumnIndex = (patterns: string[], excludePatterns: string[] = []): number => {
+        for (let i = 0; i < headers.length; i++) {
+          const normalized = normalizeHeader(headers[i]);
+          const matchesPattern = patterns.some(pattern => normalized.includes(pattern));
+          const matchesExclude = excludePatterns.some(pattern => normalized.includes(pattern));
+          
+          if (matchesPattern && !matchesExclude) {
+            return i;
+          }
+        }
+        return -1;
+      };
+
+      // Détecter le séparateur depuis la première ligne
+      const separator = detectSeparator(lines[0]);
+      
+      const headers = parseCSVLine(lines[0], separator);
+      const dataLines = lines.slice(1);
+
+      // Mapping des colonnes avec leurs noms d'affichage
+      const nomIndex = findColumnIndex(['nom'], ['prenom', 'prénom']);
+      const nomHeader = nomIndex >= 0 ? headers[nomIndex] : 'Nom';
+      const prenomIndex = findColumnIndex(['prenom', 'prénom']);
+      const prenomHeader = prenomIndex >= 0 ? headers[prenomIndex] : 'Prénom';
+      const telephoneIndex = findColumnIndex(['telephone', 'téléphone', 'tel', 'phone']);
+      const telephoneHeader = telephoneIndex >= 0 ? headers[telephoneIndex] : 'Téléphone';
+      const emailIndex = findColumnIndex(['email', 'mail', 'courriel']);
+      const emailHeader = emailIndex >= 0 ? headers[emailIndex] : 'Email';
+      const adresseIndex = findColumnIndex(['adresse']);
+      const adresseHeader = adresseIndex >= 0 ? headers[adresseIndex] : 'Adresse';
+      const nomEntrepriseIndex = findColumnIndex(['entreprise', 'company', 'societe', 'société']);
+      const nomEntrepriseHeader = nomEntrepriseIndex >= 0 ? headers[nomEntrepriseIndex] : 'Nom entreprise';
+
+      // Vérifier que les colonnes obligatoires sont présentes
+      const missingRequiredColumns: string[] = [];
+      if (nomIndex === -1) missingRequiredColumns.push('Nom');
+      if (prenomIndex === -1) missingRequiredColumns.push('Prénom');
+      if (telephoneIndex === -1) missingRequiredColumns.push('Téléphone');
+      if (emailIndex === -1) missingRequiredColumns.push('Email');
+      if (adresseIndex === -1) missingRequiredColumns.push('Adresse');
+      if (nomEntrepriseIndex === -1) missingRequiredColumns.push('Nom entreprise');
+
+      if (missingRequiredColumns.length > 0) {
+        const availableColumns = headers.length > 0 ? headers : ['Aucune colonne détectée'];
+        setResultModal({
+          show: true,
+          type: 'error',
+          title: 'Colonnes manquantes',
+          message: `Le fichier CSV ne contient pas les colonnes obligatoires suivantes : ${missingRequiredColumns.join(', ')}`,
+          details: [
+            'Colonnes détectées dans le fichier :',
+            ...availableColumns.map(col => `  • ${col}`),
+            '',
+            'Conseil : Vérifiez que les noms de colonnes correspondent exactement au modèle (les accents et la casse sont importants).'
+          ],
+        });
+        return;
+      }
+
+      let successCount = 0;
+      let errorCount = 0;
+      const errors: string[] = [];
+
+      for (let i = 0; i < dataLines.length; i++) {
+        const row = parseCSVLine(dataLines[i], separator);
+        if (row.length === 0) continue;
+
+        const nom = nomIndex >= 0 ? (row[nomIndex] || '').trim() : '';
+        const prenom = prenomIndex >= 0 ? (row[prenomIndex] || '').trim() : '';
+        const telephone = telephoneIndex >= 0 ? (row[telephoneIndex] || '').trim() : '';
+        const email = emailIndex >= 0 ? (row[emailIndex] || '').trim() : '';
+        const adresse = adresseIndex >= 0 ? (row[adresseIndex] || '').trim() : '';
+        const nomEntreprise = nomEntrepriseIndex >= 0 ? (row[nomEntrepriseIndex] || '').trim() : '';
+
+        // Validation des champs obligatoires avec identification précise des colonnes manquantes
+        const missingFields: string[] = [];
+        if (!nom) missingFields.push(nomHeader);
+        if (!prenom) missingFields.push(prenomHeader);
+        if (!telephone) missingFields.push(telephoneHeader);
+        if (!email) missingFields.push(emailHeader);
+        if (!adresse) missingFields.push(adresseHeader);
+        if (!nomEntreprise) missingFields.push(nomEntrepriseHeader);
+
+        if (missingFields.length > 0) {
+          errorCount++;
+          const fieldsList = missingFields.join(', ');
+          errors.push(`Ligne ${i + 2}: Colonnes manquantes ou vides : ${fieldsList}`);
+          continue;
+        }
+
+        try {
+          const response = await fetch('/api/univers-pro', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              nom,
+              prenom,
+              telephone,
+              email,
+              adresse,
+              nomEntreprise,
+            }),
+          });
+
+          if (response.ok) {
+            successCount++;
+          } else {
+            errorCount++;
+            try {
+              const errorData = await response.json();
+              let errorMsg = errorData.error || 'Erreur lors de l\'import';
+              if (errorMsg.includes('champs obligatoires')) {
+                errorMsg = `Erreur de validation : ${errorMsg}`;
+              }
+              errors.push(`Ligne ${i + 2}: ${errorMsg}`);
+            } catch {
+              errors.push(`Ligne ${i + 2}: Erreur serveur lors de l'import`);
+            }
+          }
+        } catch (error) {
+          errorCount++;
+          errors.push(`Ligne ${i + 2}: Erreur réseau - ${error instanceof Error ? error.message : 'Connexion impossible'}`);
+        }
+      }
+
+      // Afficher les résultats dans une modale
+      const title = errorCount > 0 
+        ? `Import terminé avec ${errorCount} erreur(s)`
+        : 'Import réussi';
+      
+      const message = errorCount === 0
+        ? `${successCount} contact(s) importé(s) avec succès`
+        : `${successCount} contact(s) importé(s) avec succès, ${errorCount} erreur(s)`;
+
+      setResultModal({
+        show: true,
+        type: errorCount === 0 ? 'success' : 'error',
+        title,
+        message,
+        details: errors.length > 0 ? errors : undefined,
+      });
+
+      // Rafraîchir la liste
+      fetchContacts(search);
+      setShowImportModal(false);
+    };
+
+    reader.readAsText(file, 'UTF-8');
+  };
+
   return (
     <>
       {/* Barre de recherche et actions */}
@@ -136,17 +498,24 @@ export default function UniversProTable() {
               </svg>
               Nouveau contact
             </button>
-            <button className="flex items-center gap-2 px-4 py-2 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors">
+            <button 
+              onClick={() => setShowImportModal(true)}
+              className="flex items-center gap-2 px-4 py-2 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors"
+            >
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
               </svg>
               Importer
             </button>
-            <button className="flex items-center gap-2 px-4 py-2 bg-lorange text-white rounded-lg hover:bg-dorange transition-colors">
+            <button 
+              onClick={handleExport}
+              disabled={selectedIds.size === 0}
+              className="flex items-center gap-2 px-4 py-2 bg-lorange text-white rounded-lg hover:bg-dorange transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4-4m0 0l-4-4m4 4V4" />
               </svg>
-              Exporter
+              Exporter {selectedIds.size > 0 && `(${selectedIds.size})`}
             </button>
           </div>
         </div>
@@ -163,6 +532,14 @@ export default function UniversProTable() {
             <table className="min-w-full divide-y divide-gray-200">
               <thead className="bg-gray-50">
                 <tr>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    <input
+                      type="checkbox"
+                      checked={contacts.length > 0 && selectedIds.size === contacts.length}
+                      onChange={(e) => handleSelectAll(e.target.checked)}
+                      className="w-4 h-4 text-lblue border-gray-300 rounded focus:ring-lblue"
+                    />
+                  </th>
                   <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">NOM</th>
                   <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CONTACT</th>
                   <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ADRESSE</th>
@@ -173,6 +550,14 @@ export default function UniversProTable() {
               <tbody className="bg-white divide-y divide-gray-200">
                 {contacts.map((contact) => (
                   <tr key={contact.id} className="hover:bg-gray-50">
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <input
+                        type="checkbox"
+                        checked={selectedIds.has(contact.id)}
+                        onChange={(e) => handleSelectOne(contact.id, e.target.checked)}
+                        className="w-4 h-4 text-lblue border-gray-300 rounded focus:ring-lblue"
+                      />
+                    </td>
                     <td className="px-6 py-4 whitespace-nowrap">
                       <div className="flex items-center gap-3">
                         <div className="w-10 h-10 rounded-full bg-lblue flex items-center justify-center text-white font-semibold">
@@ -243,6 +628,240 @@ export default function UniversProTable() {
         />
       )}
 
+      {/* Modal import */}
+      {showImportModal && (
+        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-fadeIn">
+          <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full animate-slideUp border border-gray-200">
+            {/* Header */}
+            <div className="border-b border-gray-200 px-6 py-5 bg-white">
+              <div className="flex items-center justify-between">
+                <div>
+                  <h2 className="text-xl font-semibold text-gray-900">
+                    Importer des contacts
+                  </h2>
+                  <p className="text-sm text-gray-500 mt-1">
+                    Téléchargez le modèle d'exemple, remplissez-le et importez-le ici
+                  </p>
+                </div>
+                <button
+                  onClick={() => setShowImportModal(false)}
+                  className="text-gray-400 hover:text-gray-600 transition-colors p-1.5 hover:bg-gray-100 rounded"
+                >
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+
+            {/* Contenu */}
+            <div className="px-6 py-6">
+              <div className="space-y-6">
+                {/* Télécharger le modèle */}
+                <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+                  <div className="flex items-start gap-3">
+                    <svg className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    <div className="flex-1">
+                      <h3 className="text-sm font-semibold text-blue-900 mb-1">
+                        Télécharger le modèle d'exemple
+                      </h3>
+                      <p className="text-sm text-blue-700 mb-3">
+                        Téléchargez le fichier CSV modèle pour voir le format attendu et remplir vos données.
+                      </p>
+                      <button
+                        onClick={handleDownloadTemplate}
+                        className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm"
+                      >
+                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                        </svg>
+                        Télécharger le modèle CSV
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Upload fichier */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Sélectionner le fichier CSV à importer
+                  </label>
+                  <div className="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-lblue transition-colors">
+                    <div className="space-y-1 text-center">
+                      <svg className="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
+                        <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+                      </svg>
+                      <div className="flex text-sm text-gray-600">
+                        <label htmlFor="file-upload-pro" className="relative cursor-pointer bg-white rounded-md font-medium text-lblue hover:text-dblue focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-lblue">
+                          <span>Cliquez pour sélectionner un fichier</span>
+                          <input
+                            id="file-upload-pro"
+                            name="file-upload-pro"
+                            type="file"
+                            accept=".csv"
+                            onChange={handleFileUpload}
+                            className="sr-only"
+                          />
+                        </label>
+                        <p className="pl-1">ou glissez-déposez</p>
+                      </div>
+                      <p className="text-xs text-gray-500">CSV jusqu'à 10MB</p>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Instructions */}
+                <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
+                  <h3 className="text-sm font-semibold text-gray-900 mb-2">
+                    Instructions :
+                  </h3>
+                  <ul className="text-sm text-gray-600 space-y-1 list-disc list-inside">
+                    <li>Tous les champs sont obligatoires : Nom, Prénom, Téléphone, Email, Adresse, Nom entreprise</li>
+                    <li>Assurez-vous que le fichier utilise l'encodage UTF-8</li>
+                    <li>Le séparateur peut être une virgule (,) ou un point-virgule (;)</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+
+            {/* Footer */}
+            <div className="border-t border-gray-200 px-6 py-4 bg-gray-50/50">
+              <div className="flex justify-end">
+                <button
+                  onClick={() => setShowImportModal(false)}
+                  className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors"
+                >
+                  Fermer
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Modal résultat */}
+      {resultModal && resultModal.show && (
+        <div 
+          className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-[60] p-4 animate-fadeIn"
+          onClick={() => setResultModal(null)}
+        >
+          <div 
+            className="bg-white rounded-lg shadow-xl max-w-lg w-full animate-slideUp border border-gray-200"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Header */}
+            <div className={`border-b border-gray-200 px-6 py-5 ${
+              resultModal.type === 'success' ? 'bg-green-50' :
+              resultModal.type === 'error' ? 'bg-red-50' :
+              'bg-blue-50'
+            }`}>
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  {resultModal.type === 'success' && (
+                    <svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                  )}
+                  {resultModal.type === 'error' && (
+                    <svg className="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                  )}
+                  {resultModal.type === 'info' && (
+                    <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                  )}
+                  <h2 className={`text-xl font-semibold ${
+                    resultModal.type === 'success' ? 'text-green-900' :
+                    resultModal.type === 'error' ? 'text-red-900' :
+                    'text-blue-900'
+                  }`}>
+                    {resultModal.title}
+                  </h2>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => setResultModal(null)}
+                  className="text-gray-400 hover:text-gray-600 transition-colors p-1.5 hover:bg-white/50 rounded"
+                >
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+
+            {/* Contenu */}
+            <div className="px-6 py-6">
+              <p className={`text-sm font-medium mb-4 ${
+                resultModal.type === 'success' ? 'text-green-800' :
+                resultModal.type === 'error' ? 'text-red-800' :
+                'text-blue-800'
+              }`}>
+                {resultModal.message}
+              </p>
+
+              {resultModal.details && resultModal.details.length > 0 && (
+                <div className="mt-4">
+                  <h3 className="text-sm font-semibold text-gray-900 mb-2">
+                    {resultModal.details[0].includes('Colonnes détectées') ? 'Détails :' : 'Erreurs :'}
+                  </h3>
+                  <div className={`border rounded-lg p-4 max-h-64 overflow-y-auto ${
+                    resultModal.type === 'error' ? 'bg-red-50 border-red-200' : 'bg-gray-50 border-gray-200'
+                  }`}>
+                    <ul className="space-y-1">
+                      {resultModal.details.map((detail, index) => (
+                        <li key={index} className={`text-sm ${
+                          resultModal.type === 'error' ? 'text-red-800' : 'text-gray-800'
+                        }`}>
+                          {detail}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Footer */}
+            <div className="border-t border-gray-200 px-6 py-4 bg-gray-50/50">
+              <div className="flex justify-end">
+                <button
+                  type="button"
+                  onClick={() => setResultModal(null)}
+                  className={`px-6 py-2 text-sm font-medium rounded-lg transition-colors ${
+                    resultModal.type === 'success' 
+                      ? 'bg-green-600 text-white hover:bg-green-700' :
+                      resultModal.type === 'error'
+                      ? 'bg-red-600 text-white hover:bg-red-700' :
+                      'bg-blue-600 text-white hover:bg-blue-700'
+                  }`}
+                >
+                  OK
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Modal de confirmation de suppression */}
+      {confirmDeleteModal && (
+        <ConfirmModal
+          isOpen={confirmDeleteModal.show}
+          title="Supprimer le contact"
+          message="Êtes-vous sûr de vouloir supprimer ce contact ?"
+          confirmText="Supprimer"
+          cancelText="Annuler"
+          confirmColor="danger"
+          onConfirm={confirmDelete}
+          onCancel={() => setConfirmDeleteModal(null)}
+        />
+      )}
+
       {/* Modal vue détaillée */}
       {viewingContact && (
         <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-fadeIn">