Added few functions to the platform

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 ?')) {
-      return;
-    }
+    setConfirmDeleteModal({
+      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">