create-crm-tmp 1.0.0

package/template/src/app/(dashboard)/contacts/page.tsx

@@ -0,0 +1,3713 @@
+'use client';
+
+import { useState, useEffect, useRef, useMemo } from 'react';
+import { useRouter } from 'next/navigation';
+import { useUserRole } from '@/hooks/use-user-role';
+import { useMobileMenuContext } from '@/contexts/mobile-menu-context';
+import {
+  Search,
+  Plus,
+  Trash2,
+  Phone,
+  Mail,
+  MapPin,
+  Upload,
+  X,
+  Filter,
+  LayoutGrid,
+  List,
+  ChevronsLeft,
+  ChevronsRight,
+  Eye,
+  EyeOff,
+  GripVertical,
+  Users,
+  Tag,
+  ArrowRight,
+  Download,
+  RefreshCw,
+  Calendar,
+  Building2,
+  ChevronDown,
+  ChevronUp,
+} from 'lucide-react';
+import { ContactTableSkeleton, ContactCardsSkeleton } from '@/components/skeleton';
+import { cn, normalizePhoneNumber } from '@/lib/utils';
+
+interface Status {
+  id: string;
+  name: string;
+  color: string;
+}
+
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  role?: string;
+}
+
+interface Contact {
+  id: string;
+  civility: string | null;
+  firstName: string | null;
+  lastName: string | null;
+  phone: string;
+  secondaryPhone: string | null;
+  email: string | null;
+  address: string | null;
+  city: string | null;
+  postalCode: string | null;
+  origin: string | null;
+  companyName: string | null;
+  isCompany: boolean;
+  companyId: string | null;
+  companyRelation: Contact | null;
+  statusId: string | null;
+  status: Status | null;
+  assignedCommercialId: string | null;
+  assignedCommercial: User | null;
+  assignedTeleproId: string | null;
+  assignedTelepro: User | null;
+  createdById: string;
+  createdBy: User;
+  createdAt: string;
+  updatedAt: string;
+}
+
+interface TableColumn {
+  id: string;
+  label: string;
+  visible: boolean;
+  order: number;
+}
+
+const DEFAULT_COLUMNS: TableColumn[] = [
+  { id: 'contact', label: 'Contact', visible: true, order: 0 },
+  { id: 'phone', label: 'Téléphone', visible: true, order: 1 },
+  { id: 'email', label: 'Email', visible: true, order: 2 },
+  { id: 'status', label: 'Statut', visible: true, order: 3 },
+  { id: 'origin', label: 'Origine', visible: true, order: 4 },
+  { id: 'commercial', label: 'Commercial', visible: true, order: 5 },
+  { id: 'telepro', label: 'Télépro', visible: true, order: 6 },
+  { id: 'createdAt', label: 'CRÉÉ LE', visible: true, order: 7 },
+  { id: 'updatedAt', label: 'MODIFIÉ LE', visible: true, order: 8 },
+];
+
+export default function ContactsPage() {
+  const router = useRouter();
+  const { isAdmin } = useUserRole();
+  const { toggle: toggleMobileMenu, isOpen: isMobileMenuOpen } = useMobileMenuContext();
+
+  // Fonction pour formater les dates en français
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return new Intl.DateTimeFormat('fr-FR', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    }).format(date);
+  };
+  const [contacts, setContacts] = useState<Contact[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showModal, setShowModal] = useState(false);
+  const [editingContact, setEditingContact] = useState<Contact | null>(null);
+  const [statuses, setStatuses] = useState<Status[]>([]);
+  const [users, setUsers] = useState<User[]>([]);
+  const [closingReasons, setClosingReasons] = useState<{ id: string; name: string }[]>([]);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+  const [showImportModal, setShowImportModal] = useState(false);
+  const [importFile, setImportFile] = useState<File | null>(null);
+  const [importPreview, setImportPreview] = useState<any[]>([]);
+  const [importHeaders, setImportHeaders] = useState<string[]>([]);
+  const [importFieldMappings, setImportFieldMappings] = useState<
+    Record<
+      string,
+      {
+        action: 'map' | 'note' | 'ignore';
+        crmField?: string;
+      }
+    >
+  >({});
+  const [importSkipFirstRow, setImportSkipFirstRow] = useState(false);
+  const [importing, setImporting] = useState(false);
+  const [importResult, setImportResult] = useState<any>(null);
+  const [showImportResultModal, setShowImportResultModal] = useState(false);
+  const [importResultData, setImportResultData] = useState<any>(null);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+  // Valeurs par défaut pour l'import
+  const [defaultStatusId, setDefaultStatusId] = useState('');
+  const [defaultCommercialId, setDefaultCommercialId] = useState('');
+  const [defaultOrigin, setDefaultOrigin] = useState('');
+
+  // Filtres
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState<string>('');
+  const [originFilter, setOriginFilter] = useState<string>('');
+  const [assignedCommercialFilter, setAssignedCommercialFilter] = useState<string>('');
+  const [assignedTeleproFilter, setAssignedTeleproFilter] = useState<string>('');
+
+  // Filtres de date
+  const [dateFilterModal, setDateFilterModal] = useState<'createdAt' | 'updatedAt' | null>(null);
+  const [dateFilterPosition, setDateFilterPosition] = useState<{
+    top: number;
+    left: number;
+  } | null>(null);
+  const dateFilterModalRef = useRef<HTMLDivElement>(null);
+  const listFilterModalRef = useRef<HTMLDivElement>(null);
+  const [listFilterModal, setListFilterModal] = useState<
+    null | 'status' | 'origin' | 'commercial' | 'telepro'
+  >(null);
+  const [listFilterPosition, setListFilterPosition] = useState<{
+    top: number;
+    left: number;
+  } | null>(null);
+  const [createdAtStart, setCreatedAtStart] = useState('');
+  const [createdAtEnd, setCreatedAtEnd] = useState('');
+  const [updatedAtStart, setUpdatedAtStart] = useState('');
+  const [updatedAtEnd, setUpdatedAtEnd] = useState('');
+
+  // Tri
+  const [sortField, setSortField] = useState<
+    '' | 'createdAt' | 'updatedAt' | 'status' | 'commercial' | 'telepro'
+  >('');
+  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
+  const [showSortMenu, setShowSortMenu] = useState(false);
+  const [showDatePicker, setShowDatePicker] = useState(false);
+  const [dateRangeStart, setDateRangeStart] = useState('');
+  const [dateRangeEnd, setDateRangeEnd] = useState('');
+  const sortMenuRef = useRef<HTMLDivElement>(null);
+  const datePickerRef = useRef<HTMLDivElement>(null);
+
+  // Pagination
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [totalContacts, setTotalContacts] = useState(0);
+  const [limit, setLimit] = useState(25);
+
+  // Vue (table ou cards) - Persistée dans localStorage
+  // Initialiser avec 'table' pour éviter l'erreur d'hydratation
+  const [viewMode, setViewMode] = useState<'table' | 'cards'>('table');
+
+  // Gestion des colonnes du tableau (avec récupération initiale depuis localStorage)
+  const [tableColumns, setTableColumns] = useState<TableColumn[]>(() => {
+    if (typeof window === 'undefined') {
+      return DEFAULT_COLUMNS;
+    }
+
+    try {
+      const saved = window.localStorage.getItem('contactsTableColumns');
+      if (!saved) {
+        return DEFAULT_COLUMNS;
+      }
+      const parsed = JSON.parse(saved) as TableColumn[];
+      const byId = new Map(parsed.map((col) => [col.id, col]));
+
+      // On merge toujours avec DEFAULT_COLUMNS pour intégrer les nouvelles colonnes éventuelles
+      const merged = DEFAULT_COLUMNS.map((col) => {
+        const savedCol = byId.get(col.id);
+        if (!savedCol) return col;
+        return {
+          ...col,
+          ...savedCol,
+          // S'assurer que l'id reste celui du défaut
+          id: col.id,
+        };
+      });
+
+      return merged;
+    } catch (e) {
+      console.error('Erreur lors du chargement des colonnes depuis localStorage:', e);
+      return DEFAULT_COLUMNS;
+    }
+  });
+  const [showColumnPanel, setShowColumnPanel] = useState(false);
+  const [draggedColumn, setDraggedColumn] = useState<string | null>(null);
+
+  // Regroupement des informations de contact
+  const [groupContactInfo, setGroupContactInfo] = useState<boolean>(() => {
+    if (typeof window === 'undefined') {
+      return false;
+    }
+    try {
+      const saved = window.localStorage.getItem('contactsGroupContactInfo');
+      return saved === 'true';
+    } catch (e) {
+      return false;
+    }
+  });
+
+  // Sélection multiple et actions groupées
+  const [selectedContactIds, setSelectedContactIds] = useState<Set<string>>(new Set());
+  const [showBulkCommercialModal, setShowBulkCommercialModal] = useState(false);
+  const [showBulkStatusModal, setShowBulkStatusModal] = useState(false);
+  const [bulkCommercialId, setBulkCommercialId] = useState('');
+  const [bulkStatusId, setBulkStatusId] = useState('');
+  const [bulkActionLoading, setBulkActionLoading] = useState(false);
+  const [showExportModal, setShowExportModal] = useState(false);
+  const [exporting, setExporting] = useState(false);
+  const [exportAll, setExportAll] = useState(false);
+
+  // Charger les préférences depuis localStorage après le montage
+  useEffect(() => {
+    const savedView = localStorage.getItem('contactsViewMode');
+    if (savedView === 'cards' || savedView === 'table') {
+      setViewMode(savedView);
+    }
+
+    const savedLimit = localStorage.getItem('contactsPageLimit');
+    if (savedLimit && ['25', '50', '100'].includes(savedLimit)) {
+      setLimit(parseInt(savedLimit, 10));
+    }
+  }, []);
+
+  // Formulaire
+  const [formData, setFormData] = useState({
+    civility: '',
+    firstName: '',
+    lastName: '',
+    phone: '',
+    secondaryPhone: '',
+    email: '',
+    address: '',
+    city: '',
+    postalCode: '',
+    origin: '',
+    company: '',
+    isCompany: false,
+    companyId: '',
+    statusId: '',
+    closingReason: '',
+    assignedCommercialId: '',
+    assignedTeleproId: '',
+  });
+
+  // Synchronisation automatique Google Sheets
+  useEffect(() => {
+    const syncGoogleSheet = async () => {
+      try {
+        await fetch('/api/integrations/google-sheet/sync', {
+          method: 'POST',
+        });
+      } catch (err) {
+        console.error('Erreur lors de la synchronisation Google Sheets:', err);
+      }
+    };
+
+    syncGoogleSheet();
+  }, []);
+
+  // Charger les statuts et utilisateurs
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const [statusesRes, usersRes, closingReasonsRes] = await Promise.all([
+          fetch('/api/statuses'),
+          fetch('/api/users/list'),
+          fetch('/api/closing-reasons'),
+        ]);
+
+        if (statusesRes.ok) {
+          const statusesData = await statusesRes.json();
+          setStatuses(statusesData);
+        }
+
+        if (usersRes.ok) {
+          const usersData = await usersRes.json();
+          setUsers(usersData);
+        }
+
+        if (closingReasonsRes.ok) {
+          const reasonsData = await closingReasonsRes.json();
+          setClosingReasons(reasonsData || []);
+        }
+      } catch (error) {
+        console.error('Erreur lors du chargement des données:', error);
+      }
+    };
+    fetchData();
+  }, []);
+
+  // Persister les préférences
+  useEffect(() => {
+    localStorage.setItem('contactsViewMode', viewMode);
+  }, [viewMode]);
+
+  useEffect(() => {
+    localStorage.setItem('contactsPageLimit', limit.toString());
+  }, [limit]);
+
+  useEffect(() => {
+    localStorage.setItem('contactsTableColumns', JSON.stringify(tableColumns));
+  }, [tableColumns]);
+
+  // Sauvegarder le regroupement dans localStorage quand il change
+  useEffect(() => {
+    localStorage.setItem('contactsGroupContactInfo', String(groupContactInfo));
+  }, [groupContactInfo]);
+
+  const fetchContacts = async () => {
+    try {
+      setLoading(true);
+      setSelectedContactIds(new Set()); // Réinitialiser la sélection lors du chargement
+      const params = new URLSearchParams();
+      if (search) params.append('search', search);
+      if (statusFilter) params.append('statusId', statusFilter);
+      if (originFilter) params.append('origin', originFilter);
+      if (assignedCommercialFilter) params.append('assignedCommercialId', assignedCommercialFilter);
+      if (assignedTeleproFilter) params.append('assignedTeleproId', assignedTeleproFilter);
+      if (createdAtStart) params.append('createdAtStart', createdAtStart);
+      if (createdAtEnd) params.append('createdAtEnd', createdAtEnd);
+      if (updatedAtStart) params.append('updatedAtStart', updatedAtStart);
+      if (updatedAtEnd) params.append('updatedAtEnd', updatedAtEnd);
+      params.append('page', currentPage.toString());
+      params.append('limit', limit.toString());
+
+      const response = await fetch(`/api/contacts?${params.toString()}`);
+      if (response.ok) {
+        const data = await response.json();
+        setContacts(data.contacts || []);
+        if (data.pagination) {
+          setTotalPages(data.pagination.totalPages);
+          setTotalContacts(data.pagination.total);
+        }
+      } else {
+        setError('Erreur lors du chargement des contacts');
+      }
+    } catch (error) {
+      console.error('Erreur:', error);
+      setError('Erreur lors du chargement des contacts');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Réinitialiser à la page 1 quand les filtres ou le limit changent
+  useEffect(() => {
+    if (currentPage !== 1) {
+      setCurrentPage(1);
+    }
+  }, [
+    search,
+    statusFilter,
+    assignedCommercialFilter,
+    assignedTeleproFilter,
+    createdAtStart,
+    createdAtEnd,
+    updatedAtStart,
+    updatedAtEnd,
+    limit,
+  ]);
+
+  // Charger les contacts quand la page, les filtres ou le limit changent
+  useEffect(() => {
+    fetchContacts();
+  }, [
+    currentPage,
+    search,
+    statusFilter,
+    originFilter,
+    assignedCommercialFilter,
+    assignedTeleproFilter,
+    createdAtStart,
+    createdAtEnd,
+    updatedAtStart,
+    updatedAtEnd,
+    limit,
+  ]);
+
+  // Fermer la modal de filtre de date au clic en dehors
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dateFilterModalRef.current &&
+        !dateFilterModalRef.current.contains(event.target as Node)
+      ) {
+        // Vérifier si le clic n'est pas sur l'icône de filtre elle-même
+        const target = event.target as HTMLElement;
+        if (!target.closest('button[data-date-filter-icon]')) {
+          setDateFilterModal(null);
+          setDateFilterPosition(null);
+        }
+      }
+    };
+
+    if (dateFilterModal) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [dateFilterModal]);
+
+  // Fermer la modal de filtre de liste (statut, origine, commercial, télépro) au clic en dehors
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        listFilterModalRef.current &&
+        !listFilterModalRef.current.contains(event.target as Node)
+      ) {
+        const target = event.target as HTMLElement;
+        if (!target.closest('button[data-date-filter-icon]')) {
+          setListFilterModal(null);
+          setListFilterPosition(null);
+        }
+      }
+    };
+
+    if (listFilterModal) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [listFilterModal]);
+
+  // Fermer le menu de tri au clic en dehors
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (sortMenuRef.current && !sortMenuRef.current.contains(event.target as Node)) {
+        setShowSortMenu(false);
+      }
+    };
+
+    if (showSortMenu) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [showSortMenu]);
+
+  // Fermer le sélecteur de date au clic en dehors
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (datePickerRef.current && !datePickerRef.current.contains(event.target as Node)) {
+        setShowDatePicker(false);
+      }
+    };
+
+    if (showDatePicker) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [showDatePicker]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setSuccess('');
+
+    if (!formData.phone) {
+      setError('Le téléphone est obligatoire');
+      return;
+    }
+
+    try {
+      const url = editingContact ? `/api/contacts/${editingContact.id}` : '/api/contacts';
+      const method = editingContact ? 'PUT' : 'POST';
+
+      const selectedStatus = statuses.find((s) => s.id === formData.statusId);
+      const isLostStatus = selectedStatus?.name?.toLowerCase() === 'fermé';
+
+      if (isLostStatus && !formData.closingReason) {
+        setError('Veuillez renseigner le motif de fermeture pour un contact fermé.');
+        return;
+      }
+
+      const response = await fetch(url, {
+        method,
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          ...formData,
+          civility: formData.civility || null,
+          companyName: formData.company || null,
+          isCompany: formData.isCompany || false,
+          companyId: formData.companyId || null,
+          closingReason: isLostStatus ? formData.closingReason || null : null,
+          assignedCommercialId: formData.assignedCommercialId || null,
+          assignedTeleproId: formData.assignedTeleproId || null,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Erreur lors de la sauvegarde');
+      }
+
+      setSuccess(editingContact ? 'Contact modifié avec succès !' : 'Contact créé avec succès !');
+      setShowModal(false);
+      setEditingContact(null);
+      setFormData({
+        civility: '',
+        firstName: '',
+        lastName: '',
+        phone: '',
+        secondaryPhone: '',
+        email: '',
+        address: '',
+        city: '',
+        postalCode: '',
+        origin: '',
+        company: '',
+        isCompany: false,
+        companyId: '',
+        statusId: '',
+        closingReason: '',
+        assignedCommercialId: '',
+        assignedTeleproId: '',
+      });
+      fetchContacts();
+
+      setTimeout(() => setSuccess(''), 5000);
+    } catch (err: any) {
+      setError(err.message);
+    }
+  };
+
+  const handleSort = (field: string) => {
+    setCurrentPage(1);
+
+    if (sortField === field) {
+      // Même colonne : toggle l'ordre
+      setSortOrder((prevOrder) => (prevOrder === 'asc' ? 'desc' : 'asc'));
+    } else {
+      // Nouvelle colonne : définir la colonne et mettre l'ordre à 'asc'
+      setSortField(field as any);
+      setSortOrder('asc');
+    }
+    setShowSortMenu(false);
+  };
+
+  const handleSortByField = (
+    field: 'status' | 'commercial' | 'telepro' | 'createdAt' | 'updatedAt' | '',
+  ) => {
+    handleSort(field);
+  };
+
+  const handleDateFilterClick = (e: React.MouseEvent, contactId: string) => {
+    e.stopPropagation();
+    if (contactId === 'createdAt' || contactId === 'updatedAt') {
+      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+      const modalWidth = 288; // w-72 = 18rem = 288px
+      const padding = 16; // Padding pour éviter que la modal touche les bords
+
+      // Position initiale (centrée sous l'icône)
+      let left = rect.left + rect.width / 2 - modalWidth / 2;
+
+      // Vérifier si la modal dépasse à droite
+      if (left + modalWidth > window.innerWidth - padding) {
+        left = window.innerWidth - modalWidth - padding;
+      }
+
+      // Vérifier si la modal dépasse à gauche
+      if (left < padding) {
+        left = padding;
+      }
+
+      setDateFilterPosition({
+        top: rect.bottom + 18,
+        left,
+      });
+      setDateFilterModal(contactId as 'createdAt' | 'updatedAt');
+    }
+  };
+
+  const handleListFilterClick = (e: React.MouseEvent, contactId: string) => {
+    e.stopPropagation();
+    if (
+      contactId === 'status' ||
+      contactId === 'origin' ||
+      contactId === 'commercial' ||
+      contactId === 'telepro'
+    ) {
+      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+      const modalWidth = 320;
+      const padding = 16;
+
+      let left = rect.left + rect.width / 2 - modalWidth / 2;
+      if (left + modalWidth > window.innerWidth - padding) {
+        left = window.innerWidth - modalWidth - padding;
+      }
+      if (left < padding) {
+        left = padding;
+      }
+
+      setListFilterPosition({
+        top: rect.bottom + 8,
+        left,
+      });
+      setListFilterModal(contactId as 'status' | 'origin' | 'commercial' | 'telepro');
+    }
+  };
+
+  const handleApplyDateFilter = () => {
+    setDateFilterModal(null);
+    setDateFilterPosition(null);
+    setCurrentPage(1);
+  };
+
+  const handleClearDateFilter = (type: 'createdAt' | 'updatedAt') => {
+    if (type === 'createdAt') {
+      setCreatedAtStart('');
+      setCreatedAtEnd('');
+    } else {
+      setUpdatedAtStart('');
+      setUpdatedAtEnd('');
+    }
+    setDateFilterModal(null);
+    setDateFilterPosition(null);
+    setCurrentPage(1);
+  };
+
+  // Vérifier si des filtres sont actifs
+  const hasActiveFilters = () => {
+    return (
+      !!search ||
+      !!statusFilter ||
+      !!originFilter ||
+      !!assignedCommercialFilter ||
+      !!assignedTeleproFilter ||
+      !!createdAtStart ||
+      !!createdAtEnd ||
+      !!updatedAtStart ||
+      !!updatedAtEnd ||
+      !!sortField
+    );
+  };
+
+  // Réinitialiser tous les filtres
+  const handleResetAllFilters = () => {
+    setSearch('');
+    setStatusFilter('');
+    setOriginFilter('');
+    setAssignedCommercialFilter('');
+    setAssignedTeleproFilter('');
+    setCreatedAtStart('');
+    setCreatedAtEnd('');
+    setUpdatedAtStart('');
+    setUpdatedAtEnd('');
+    setSortField('');
+    setSortOrder('asc');
+    setCurrentPage(1);
+    setListFilterModal(null);
+    setDateFilterModal(null);
+    setDateFilterPosition(null);
+    setListFilterPosition(null);
+  };
+
+  const sortedContacts = useMemo(() => {
+    if (!sortField) return contacts;
+    const sorted = [...contacts].sort((a, b) => {
+      let aValue: any;
+      let bValue: any;
+
+      if (sortField === 'createdAt' || sortField === 'updatedAt') {
+        aValue = new Date(a[sortField]);
+        bValue = new Date(b[sortField]);
+        const diff = aValue.getTime() - bValue.getTime();
+        return sortOrder === 'asc' ? diff : -diff;
+      } else if (sortField === 'status') {
+        aValue = a.status?.name || '';
+        bValue = b.status?.name || '';
+      } else if (sortField === 'commercial') {
+        aValue = a.assignedCommercial?.name || '';
+        bValue = b.assignedCommercial?.name || '';
+      } else if (sortField === 'telepro') {
+        aValue = a.assignedTelepro?.name || '';
+        bValue = b.assignedTelepro?.name || '';
+      } else {
+        return 0;
+      }
+
+      if (aValue < bValue) return sortOrder === 'asc' ? -1 : 1;
+      if (aValue > bValue) return sortOrder === 'asc' ? 1 : -1;
+      return 0;
+    });
+    return sorted;
+  }, [contacts, sortField, sortOrder]);
+
+  const handleNewContact = () => {
+    setEditingContact(null);
+    setFormData({
+      civility: '',
+      firstName: '',
+      lastName: '',
+      phone: '',
+      secondaryPhone: '',
+      email: '',
+      address: '',
+      city: '',
+      postalCode: '',
+      origin: '',
+      isCompany: false,
+      companyId: '',
+      company: '',
+      statusId: '',
+      closingReason: '',
+      assignedCommercialId: '',
+      assignedTeleproId: '',
+    });
+    setShowModal(true);
+    setError('');
+    setSuccess('');
+  };
+
+  // Fonctions d'import
+  // Fonction d'auto-mapping intelligent
+  const autoMapHeaders = (headers: string[]) => {
+    const mappings: Record<
+      string,
+      {
+        action: 'map' | 'note' | 'ignore';
+        crmField?: string;
+      }
+    > = {};
+
+    // Définir les correspondances possibles pour chaque champ
+    const fieldMappings: { [key: string]: string[] } = {
+      phone: ['téléphone', 'telephone', 'phone', 'tel', 'tél', 'mobile', 'portable'],
+      firstName: ['prénom', 'prenom', 'firstname', 'first name', 'first_name'],
+      lastName: ['nom', 'lastname', 'last name', 'last_name', 'nom de famille', 'surname'],
+      email: ['email', 'e-mail', 'mail', 'courriel'],
+      civility: ['civilité', 'civilite', 'civility', 'titre', 'title'],
+      secondaryPhone: [
+        'téléphone 2',
+        'telephone 2',
+        'tel 2',
+        'tél 2',
+        'secondary phone',
+        'phone 2',
+        'téléphone secondaire',
+        'telephone secondaire',
+      ],
+      address: ['adresse', 'address', 'rue', 'street'],
+      city: ['ville', 'city', 'localité', 'locality'],
+      postalCode: ['code postal', 'postal code', 'cp', 'zip', 'zipcode', 'code_postal'],
+      origin: ['origine', 'origin', 'source', 'campagne', 'campaign', 'origine de la campagne'],
+    };
+
+    headers.forEach((header) => {
+      const normalizedHeader = header.toLowerCase().trim();
+      let mapped = false;
+
+      // Chercher une correspondance pour chaque champ
+      for (const [field, aliases] of Object.entries(fieldMappings)) {
+        if (
+          aliases.some(
+            (alias) => normalizedHeader.includes(alias) || alias.includes(normalizedHeader),
+          )
+        ) {
+          mappings[header] = { action: 'map', crmField: field };
+          mapped = true;
+          break;
+        }
+      }
+
+      // Si aucune correspondance trouvée, ignorer par défaut
+      if (!mapped) {
+        mappings[header] = { action: 'ignore' };
+      }
+    });
+
+    return mappings;
+  };
+
+  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    setImportFile(file);
+    setImportResult(null);
+    setError('');
+
+    try {
+      // Parser le fichier pour obtenir les en-têtes et un aperçu
+      const fileName = file.name.toLowerCase();
+      const fileExtension = fileName.split('.').pop();
+
+      if (fileExtension === 'csv') {
+        const text = await file.text();
+        const lines = text.split('\n').filter((line) => line.trim() !== '');
+        if (lines.length === 0) {
+          setError('Le fichier est vide');
+          return;
+        }
+
+        const delimiter = lines[0].includes(';') ? ';' : ',';
+        const headers = lines[0].split(delimiter).map((h) => h.trim().replace(/^"|"$/g, ''));
+        setImportHeaders(headers);
+
+        // Auto-mapper les colonnes
+        const autoMappings = autoMapHeaders(headers);
+        setImportFieldMappings(autoMappings);
+
+        // Prévisualiser les 5 premières lignes
+        const preview: any[] = [];
+        for (let i = 1; i < Math.min(6, lines.length); i++) {
+          const values = lines[i].split(delimiter).map((v) => v.trim().replace(/^"|"$/g, ''));
+          const row: any = {};
+          headers.forEach((header, index) => {
+            row[header] = values[index] || '';
+          });
+          preview.push(row);
+        }
+        setImportPreview(preview);
+      } else if (fileExtension === 'xlsx' || fileExtension === 'xls') {
+        // Pour Excel, on a besoin de xlsx
+        try {
+          const XLSX = require('xlsx');
+          const buffer = await file.arrayBuffer();
+          const workbook = XLSX.read(buffer, { type: 'array' });
+          const sheetName = workbook.SheetNames[0];
+          const worksheet = workbook.Sheets[sheetName];
+          const data = XLSX.utils.sheet_to_json(worksheet, { raw: false });
+
+          if (data.length === 0) {
+            setError('Le fichier est vide');
+            return;
+          }
+
+          const headers: any = Object.keys(data[0] as any);
+          setImportHeaders(headers);
+          setImportPreview(data.slice(0, 5));
+
+          // Auto-mapper les colonnes pour Excel
+          const autoMappings = autoMapHeaders(headers);
+          setImportFieldMappings(autoMappings);
+        } catch (error) {
+          setError(
+            'Erreur lors du parsing Excel. Assurez-vous que xlsx est installé (npm install xlsx)',
+          );
+        }
+      } else {
+        setError('Format de fichier non supporté. Utilisez CSV ou Excel (.xlsx, .xls)');
+        return;
+      }
+    } catch (error: any) {
+      setError(`Erreur lors de la lecture du fichier: ${error.message}`);
+    }
+  };
+
+  const handleImport = async () => {
+    if (!importFile) {
+      setError('Veuillez sélectionner un fichier');
+      return;
+    }
+
+    // Vérifier qu'au moins un champ téléphone est mappé
+    const phoneMapped = Object.entries(importFieldMappings).some(
+      ([header, mapping]) => mapping.action === 'map' && mapping.crmField === 'phone',
+    );
+
+    if (!phoneMapped) {
+      setError('Le mapping du téléphone est obligatoire');
+      return;
+    }
+
+    setImporting(true);
+    setError('');
+    setImportResult(null);
+
+    try {
+      const formData = new FormData();
+      formData.append('file', importFile);
+      formData.append('fieldMappings', JSON.stringify(importFieldMappings));
+      formData.append('skipFirstRow', importSkipFirstRow.toString());
+
+      // Ajouter les valeurs par défaut
+      if (defaultStatusId) {
+        formData.append('defaultStatusId', defaultStatusId);
+      }
+      if (defaultCommercialId) {
+        formData.append('defaultCommercialId', defaultCommercialId);
+      }
+      if (defaultOrigin) {
+        formData.append('defaultOrigin', defaultOrigin);
+      }
+
+      const response = await fetch('/api/contacts/import', {
+        method: 'POST',
+        body: formData,
+      });
+
+      const result = await response.json();
+
+      if (!response.ok) {
+        throw new Error(result.error || "Erreur lors de l'import");
+      }
+
+      setImportResult(result);
+      fetchContacts();
+
+      // Stocker les résultats et fermer la modal d'import
+      setImportResultData(result);
+      setShowImportModal(false);
+      setImportFile(null);
+      setImportPreview([]);
+      setImportHeaders([]);
+      setImportFieldMappings({});
+      setImportResult(null);
+      setDefaultStatusId('');
+      setDefaultCommercialId('');
+      setDefaultOrigin('');
+      setSuccess('');
+
+      // Afficher la modal de résultats
+      setShowImportResultModal(true);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setImporting(false);
+    }
+  };
+
+  // Fonctions de gestion des colonnes
+  const toggleColumnVisibility = (contactId: string) => {
+    setTableColumns((prev) =>
+      prev.map((col) => (col.id === contactId ? { ...col, visible: !col.visible } : col)),
+    );
+  };
+
+  const handleDragStart = (contactId: string) => {
+    setDraggedColumn(contactId);
+  };
+
+  const handleDragOver = (e: React.DragEvent, contactId: string) => {
+    e.preventDefault();
+    if (!draggedColumn || draggedColumn === contactId) return;
+
+    const draggedIndex = tableColumns.findIndex((col) => col.id === draggedColumn);
+    const targetIndex = tableColumns.findIndex((col) => col.id === contactId);
+
+    const newColumns = [...tableColumns];
+    const [removed] = newColumns.splice(draggedIndex, 1);
+    newColumns.splice(targetIndex, 0, removed);
+
+    // Réordonner les order
+    newColumns.forEach((col, idx) => {
+      col.order = idx;
+    });
+
+    setTableColumns(newColumns);
+  };
+
+  const handleDragEnd = () => {
+    setDraggedColumn(null);
+  };
+
+  const resetColumns = () => {
+    setTableColumns(DEFAULT_COLUMNS);
+  };
+
+  // Gestion de la sélection multiple
+  const handleSelectAll = () => {
+    if (selectedContactIds.size === contacts.length) {
+      setSelectedContactIds(new Set());
+    } else {
+      setSelectedContactIds(new Set(contacts.map((c) => c.id)));
+    }
+  };
+
+  const handleSelectContact = (contactId: string) => {
+    const newSelected = new Set(selectedContactIds);
+    if (newSelected.has(contactId)) {
+      newSelected.delete(contactId);
+    } else {
+      newSelected.add(contactId);
+    }
+    setSelectedContactIds(newSelected);
+  };
+
+  const handleDeselectAll = () => {
+    setSelectedContactIds(new Set());
+  };
+
+  // Actions groupées
+  const handleBulkChangeCommercial = async () => {
+    if (!bulkCommercialId) {
+      setError('Veuillez sélectionner un commercial');
+      return;
+    }
+
+    setBulkActionLoading(true);
+    setError('');
+
+    try {
+      const updatePromises = Array.from(selectedContactIds).map(async (contactId) => {
+        const response = await fetch(`/api/contacts/${contactId}`, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ assignedCommercialId: bulkCommercialId }),
+        });
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.error || `Erreur lors de la mise à jour du contact ${contactId}`,
+          );
+        }
+
+        return response.json();
+      });
+
+      await Promise.all(updatePromises);
+
+      setSuccess(`${selectedContactIds.size} contact(s) mis à jour avec succès !`);
+      setShowBulkCommercialModal(false);
+      setBulkCommercialId('');
+      setSelectedContactIds(new Set());
+      fetchContacts();
+      setTimeout(() => setSuccess(''), 5000);
+    } catch (err: any) {
+      setError(err.message || 'Erreur lors de la mise à jour');
+    } finally {
+      setBulkActionLoading(false);
+    }
+  };
+
+  const handleBulkChangeStatus = async () => {
+    if (!bulkStatusId) {
+      setError('Veuillez sélectionner un statut');
+      return;
+    }
+
+    setBulkActionLoading(true);
+    setError('');
+
+    try {
+      const updatePromises = Array.from(selectedContactIds).map(async (contactId) => {
+        const response = await fetch(`/api/contacts/${contactId}`, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ statusId: bulkStatusId }),
+        });
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.error || `Erreur lors de la mise à jour du contact ${contactId}`,
+          );
+        }
+
+        return response.json();
+      });
+
+      await Promise.all(updatePromises);
+
+      setSuccess(`${selectedContactIds.size} contact(s) mis à jour avec succès !`);
+      setShowBulkStatusModal(false);
+      setBulkStatusId('');
+      setSelectedContactIds(new Set());
+      fetchContacts();
+      setTimeout(() => setSuccess(''), 5000);
+    } catch (err: any) {
+      setError(err.message || 'Erreur lors de la mise à jour');
+    } finally {
+      setBulkActionLoading(false);
+    }
+  };
+
+  const handleBulkDelete = async () => {
+    if (!isAdmin) {
+      setError('Seuls les administrateurs peuvent supprimer des contacts');
+      return;
+    }
+
+    if (
+      !confirm(
+        `Êtes-vous sûr de vouloir supprimer ${selectedContactIds.size} contact(s) ? Cette action est irréversible.`,
+      )
+    ) {
+      return;
+    }
+
+    setBulkActionLoading(true);
+    setError('');
+
+    try {
+      const deletePromises = Array.from(selectedContactIds).map(async (contactId) => {
+        const response = await fetch(`/api/contacts/${contactId}`, {
+          method: 'DELETE',
+        });
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.error || `Erreur lors de la suppression du contact ${contactId}`,
+          );
+        }
+
+        return response.json();
+      });
+
+      await Promise.all(deletePromises);
+
+      setSuccess(`${selectedContactIds.size} contact(s) supprimé(s) avec succès !`);
+      setSelectedContactIds(new Set());
+      fetchContacts();
+      setTimeout(() => setSuccess(''), 5000);
+    } catch (err: any) {
+      setError(err.message || 'Erreur lors de la suppression');
+    } finally {
+      setBulkActionLoading(false);
+    }
+  };
+
+  // Fonction d'export
+  const handleExport = async (format: 'csv' | 'excel') => {
+    if (!isAdmin) {
+      setError('Seuls les administrateurs peuvent exporter des contacts');
+      return;
+    }
+
+    setExporting(true);
+    setError('');
+
+    try {
+      const contactIds = exportAll ? null : Array.from(selectedContactIds);
+
+      const response = await fetch('/api/contacts/export', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ contactIds, format }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.error || "Erreur lors de l'export");
+      }
+
+      // Récupérer le blob
+      const blob = await response.blob();
+
+      // Créer un lien de téléchargement
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `contacts_${new Date().toISOString().split('T')[0]}.${format === 'csv' ? 'csv' : 'xlsx'}`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      window.URL.revokeObjectURL(url);
+
+      setSuccess(
+        exportAll
+          ? `Tous les contacts ont été exportés en ${format.toUpperCase()} avec succès !`
+          : `${selectedContactIds.size} contact(s) exporté(s) en ${format.toUpperCase()} avec succès !`,
+      );
+      setShowExportModal(false);
+      if (!exportAll) {
+        setSelectedContactIds(new Set());
+      }
+      setTimeout(() => setSuccess(''), 5000);
+    } catch (err: any) {
+      setError(err.message || "Erreur lors de l'export");
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  // Obtenir les colonnes visibles triées par ordre
+  const visibleColumns = tableColumns
+    .filter((col) => {
+      // Si le regroupement est activé, masquer phone et email
+      if (groupContactInfo && (col.id === 'phone' || col.id === 'email')) {
+        return false;
+      }
+      return col.visible;
+    })
+    .sort((a, b) => a.order - b.order);
+
+  // Rendu d'une cellule de tableau en fonction de la colonne
+  const renderTableCell = (contactId: string, contact: Contact) => {
+    switch (contactId) {
+      case 'contact':
+        return (
+          <td key={contactId} className="px-3 py-4 whitespace-nowrap sm:px-6">
+            <div className="flex items-center">
+              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-indigo-600">
+                {contact.isCompany ? (
+                  <span className="text-xs font-bold">🏢</span>
+                ) : (
+                  (contact.firstName?.[0] || contact.lastName?.[0] || '?').toUpperCase()
+                )}
+              </div>
+              <div className="ml-3 min-w-0 sm:ml-4">
+                <div className="flex items-center gap-2">
+                  <span className="text-base font-medium text-gray-900">
+                    {contact.civility && `${contact.civility}. `}
+                    {contact.firstName} {contact.lastName}
+                  </span>
+                  {contact.isCompany && (
+                    <span className="inline-flex rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800">
+                      Entreprise
+                    </span>
+                  )}
+                </div>
+                {groupContactInfo && (
+                  <>
+                    {contact.email && (
+                      <div className="mt-1 flex items-center text-sm text-gray-600">
+                        <Mail className="mr-1 h-3.5 w-3.5 text-gray-400" />
+                        <span className="max-w-[200px]">{contact.email}</span>
+                      </div>
+                    )}
+                    {contact.phone && (
+                      <div className="mt-1 flex items-center text-sm text-gray-600">
+                        <Phone className="mr-1 h-3.5 w-3.5 text-gray-400" />
+                        {contact.phone}
+                      </div>
+                    )}
+                  </>
+                )}
+                {contact.companyName && (
+                  <div className="flex items-center text-sm text-gray-500">
+                    <Building2 className="mr-1 h-3.5 w-3.5 text-gray-400" />
+                    {contact.companyName}
+                  </div>
+                )}
+                {!contact.companyName && contact.companyRelation && (
+                  <div className="flex items-center text-sm text-gray-500">
+                    <Building2 className="mr-1 h-3.5 w-3.5 text-gray-400" />
+                    {contact.companyRelation.firstName ||
+                      contact.companyRelation.lastName ||
+                      'Sans nom'}
+                  </div>
+                )}
+                {contact.city && (
+                  <div className="flex items-center text-sm text-gray-500">
+                    <MapPin className="mr-1 h-3.5 w-3.5" />
+                    {contact.city}
+                    {contact.postalCode && ` ${contact.postalCode}`}
+                  </div>
+                )}
+              </div>
+            </div>
+          </td>
+        );
+      case 'phone':
+        return (
+          <td key={contactId} className="px-3 py-4 text-base whitespace-nowrap sm:px-6">
+            <div className="flex items-center text-gray-900">
+              <Phone className="mr-2 h-4 w-4 text-gray-400" />
+              {contact.phone}
+            </div>
+            {contact.secondaryPhone && (
+              <div className="mt-1 text-sm text-gray-500">{contact.secondaryPhone}</div>
+            )}
+          </td>
+        );
+      case 'email':
+        return (
+          <td key={contactId} className="px-3 py-4 text-base whitespace-nowrap sm:px-6">
+            {contact.email ? (
+              <div className="flex items-center text-gray-900">
+                <Mail className="mr-2 h-4 w-4 text-gray-400" />
+                <span className="max-w-[200px]">{contact.email}</span>
+              </div>
+            ) : (
+              <span className="text-gray-400">-</span>
+            )}
+          </td>
+        );
+      case 'status':
+        return (
+          <td key={contactId} className="px-3 py-4 whitespace-nowrap sm:px-6">
+            {contact.status ? (
+              <span
+                className="inline-flex rounded-full px-2 py-1 text-sm font-semibold"
+                style={{
+                  backgroundColor: `${contact.status.color}20`,
+                  color: contact.status.color,
+                }}
+              >
+                {contact.status.name}
+              </span>
+            ) : (
+              <span className="text-gray-400">-</span>
+            )}
+          </td>
+        );
+      case 'origin':
+        return (
+          <td key={contactId} className="px-3 py-4 text-base whitespace-nowrap sm:px-6">
+            {contact.origin ? (
+              <span className="text-gray-700">{contact.origin}</span>
+            ) : (
+              <span className="text-gray-400">Non renseigné</span>
+            )}
+          </td>
+        );
+      case 'commercial':
+        return (
+          <td key={contactId} className="px-3 py-4 whitespace-nowrap sm:px-6">
+            {contact.assignedCommercial ? (
+              <span className="text-base text-gray-900">{contact.assignedCommercial.name}</span>
+            ) : (
+              <span className="inline-flex rounded-full border border-orange-300 bg-orange-50 px-2 py-1 text-sm font-medium text-orange-800">
+                Non Attribué
+              </span>
+            )}
+          </td>
+        );
+      case 'telepro':
+        return (
+          <td key={contactId} className="px-3 py-4 whitespace-nowrap sm:px-6">
+            {contact.assignedTelepro ? (
+              <span className="text-base text-gray-900">{contact.assignedTelepro.name}</span>
+            ) : (
+              <span className="inline-flex rounded-full border border-orange-300 bg-orange-50 px-2 py-1 text-sm font-medium text-orange-800">
+                Non Attribué
+              </span>
+            )}
+          </td>
+        );
+      case 'createdAt':
+        return (
+          <td
+            key={contactId}
+            className="px-3 py-4 text-base whitespace-nowrap text-gray-500 sm:px-6"
+          >
+            {contact.createdAt ? formatDate(contact.createdAt) : '-'}
+          </td>
+        );
+      case 'updatedAt':
+        return (
+          <td
+            key={contactId}
+            className="px-3 py-4 text-base whitespace-nowrap text-gray-500 sm:px-6"
+          >
+            {contact.updatedAt ? formatDate(contact.updatedAt) : '-'}
+          </td>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="bg-crms-bg flex h-full flex-col">
+      {/* Header avec titre, badge et breadcrumbs */}
+      <div className="border-b border-gray-200 bg-white px-4 py-4 sm:px-6 lg:px-8">
+        <div className="mb-3 flex items-start justify-between gap-3">
+          {/* Mobile menu button */}
+          <button
+            onClick={toggleMobileMenu}
+            className="mt-1 shrink-0 cursor-pointer rounded-lg p-2 text-gray-700 transition-colors hover:bg-gray-100 lg:hidden"
+            aria-label="Toggle menu"
+          >
+            <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              {isMobileMenuOpen ? (
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              ) : (
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 6h16M4 12h16M4 18h16"
+                />
+              )}
+            </svg>
+          </button>
+
+          {/* Titre et breadcrumbs */}
+          <div className="flex-1">
+            <div className="mb-1 flex items-center gap-2">
+              <h1 className="text-2xl font-bold text-gray-900">Contacts</h1>
+              <span className="rounded-full bg-indigo-100 px-2.5 py-0.5 text-sm font-semibold text-indigo-600">
+                {totalContacts}
+              </span>
+            </div>
+            <p className="text-base text-gray-500">Home &gt; Contacts</p>
+          </div>
+
+          <button
+            onClick={fetchContacts}
+            className="cursor-pointer rounded-lg p-2 text-gray-600 transition-colors hover:bg-gray-100"
+            title="Actualiser"
+          >
+            <RefreshCw className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* Barre d'outils avec recherche et filtres */}
+        <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+          {/* Recherche et filtres à gauche */}
+          <div className="flex flex-1 flex-wrap items-center gap-2">
+            <div className="relative min-w-[200px] flex-1">
+              <Search className="pointer-events-none absolute top-2.5 left-3 h-4 w-4 text-gray-400" />
+              <input
+                type="text"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                placeholder="Rechercher"
+                className="w-full rounded-lg border border-gray-200 bg-gray-50 py-2 pr-3 pl-9 text-base text-gray-900 placeholder:text-gray-400 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-500/30 focus:outline-none"
+              />
+            </div>
+            <div className="relative" ref={sortMenuRef}>
+              <button
+                type="button"
+                onClick={() => setShowSortMenu(!showSortMenu)}
+                className="inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-50"
+              >
+                <ChevronsLeft className="h-3.5 w-3.5" />
+                <span>Trier par</span>
+              </button>
+              {showSortMenu && (
+                <div
+                  className="absolute top-full right-0 z-50 mt-2 w-48 rounded-lg border border-gray-200 bg-white shadow-lg"
+                  style={{ maxWidth: 'calc(100vw - 2rem)', right: '0' }}
+                >
+                  <div className="py-1">
+                    <button
+                      type="button"
+                      onClick={() => handleSortByField('status')}
+                      className="w-full cursor-pointer px-4 py-2 text-left text-base text-gray-700 hover:bg-gray-100"
+                    >
+                      Statut {sortField === 'status' && (sortOrder === 'asc' ? '↑' : '↓')}
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => handleSortByField('commercial')}
+                      className="w-full cursor-pointer px-4 py-2 text-left text-base text-gray-700 hover:bg-gray-100"
+                    >
+                      Commercial {sortField === 'commercial' && (sortOrder === 'asc' ? '↑' : '↓')}
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => handleSortByField('telepro')}
+                      className="w-full cursor-pointer px-4 py-2 text-left text-base text-gray-700 hover:bg-gray-100"
+                    >
+                      Télépro {sortField === 'telepro' && (sortOrder === 'asc' ? '↑' : '↓')}
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => handleSortByField('createdAt')}
+                      className="w-full cursor-pointer px-4 py-2 text-left text-base text-gray-700 hover:bg-gray-100"
+                    >
+                      Date de création{' '}
+                      {sortField === 'createdAt' && (sortOrder === 'asc' ? '↑' : '↓')}
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => handleSortByField('updatedAt')}
+                      className="w-full cursor-pointer px-4 py-2 text-left text-base text-gray-700 hover:bg-gray-100"
+                    >
+                      Date de modification{' '}
+                      {sortField === 'updatedAt' && (sortOrder === 'asc' ? '↑' : '↓')}
+                    </button>
+                    {sortField && (
+                      <button
+                        type="button"
+                        onClick={() => {
+                          setSortField('');
+                          setSortOrder('asc');
+                          setShowSortMenu(false);
+                        }}
+                        className="w-full cursor-pointer px-4 py-2 text-left text-base text-gray-500 hover:bg-gray-100"
+                      >
+                        Réinitialiser
+                      </button>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="relative" ref={datePickerRef}>
+                <button
+                  type="button"
+                  onClick={() => setShowDatePicker(!showDatePicker)}
+                  className="inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-50"
+                >
+                  <Calendar className="h-3.5 w-3.5" />
+                  <span className="hidden sm:inline">
+                    {dateRangeStart && dateRangeEnd
+                      ? `${new Date(dateRangeStart + 'T00:00:00').toLocaleDateString('fr-FR', { day: '2-digit', month: 'short', year: 'numeric' })} - ${new Date(dateRangeEnd + 'T00:00:00').toLocaleDateString('fr-FR', { day: '2-digit', month: 'short', year: 'numeric' })}`
+                      : createdAtStart && createdAtEnd
+                        ? `${new Date(createdAtStart + 'T00:00:00').toLocaleDateString('fr-FR', { day: '2-digit', month: 'short', year: 'numeric' })} - ${new Date(createdAtEnd + 'T00:00:00').toLocaleDateString('fr-FR', { day: '2-digit', month: 'short', year: 'numeric' })}`
+                        : 'Sélectionner une date'}
+                  </span>
+                  <span className="sm:hidden">Date</span>
+                </button>
+                {showDatePicker && (
+                  <div
+                    className="absolute top-full right-0 z-50 mt-2 w-72 rounded-lg border border-gray-200 bg-white p-4 shadow-lg"
+                    style={{ maxWidth: 'calc(100vw - 2rem)', right: '0' }}
+                  >
+                    <div className="space-y-3">
+                      <div>
+                        <label className="mb-1 block text-xs font-medium text-gray-700">Du</label>
+                        <input
+                          type="date"
+                          value={dateRangeStart}
+                          onChange={(e) => setDateRangeStart(e.target.value)}
+                          className="w-full rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                        />
+                      </div>
+                      <div>
+                        <label className="mb-1 block text-xs font-medium text-gray-700">Au</label>
+                        <input
+                          type="date"
+                          value={dateRangeEnd}
+                          onChange={(e) => setDateRangeEnd(e.target.value)}
+                          className="w-full rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                        />
+                      </div>
+                      <div className="flex justify-between gap-2">
+                        <button
+                          type="button"
+                          onClick={() => {
+                            // Réinitialiser tous les filtres de date
+                            setDateRangeStart('');
+                            setDateRangeEnd('');
+                            setCreatedAtStart('');
+                            setCreatedAtEnd('');
+                            setUpdatedAtStart('');
+                            setUpdatedAtEnd('');
+                            setCurrentPage(1);
+                            setShowDatePicker(false);
+                            // Recharger les contacts sans filtres de date
+                            setTimeout(() => {
+                              fetchContacts();
+                            }, 0);
+                          }}
+                          className="cursor-pointer rounded-md border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-50"
+                        >
+                          Réinitialiser
+                        </button>
+                        <div className="flex gap-2">
+                          <button
+                            type="button"
+                            onClick={() => {
+                              setDateRangeStart('');
+                              setDateRangeEnd('');
+                              setShowDatePicker(false);
+                            }}
+                            className="cursor-pointer rounded-md border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-50"
+                          >
+                            Effacer
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => {
+                              if (dateRangeStart && dateRangeEnd) {
+                                // Valider que les dates sont valides
+                                const start = new Date(dateRangeStart + 'T00:00:00');
+                                const end = new Date(dateRangeEnd + 'T00:00:00');
+                                if (
+                                  !isNaN(start.getTime()) &&
+                                  !isNaN(end.getTime()) &&
+                                  start <= end
+                                ) {
+                                  setCreatedAtStart(dateRangeStart);
+                                  setCreatedAtEnd(dateRangeEnd);
+                                  setCurrentPage(1);
+                                  setShowDatePicker(false);
+                                } else {
+                                  setError('Les dates sélectionnées sont invalides');
+                                }
+                              } else {
+                                setShowDatePicker(false);
+                              }
+                            }}
+                            className="cursor-pointer rounded-md bg-indigo-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-indigo-700"
+                          >
+                            Appliquer
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+              {(createdAtStart || createdAtEnd || updatedAtStart || updatedAtEnd) && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    // Réinitialiser tous les filtres de date
+                    setDateRangeStart('');
+                    setDateRangeEnd('');
+                    setCreatedAtStart('');
+                    setCreatedAtEnd('');
+                    setUpdatedAtStart('');
+                    setUpdatedAtEnd('');
+                    setCurrentPage(1);
+                    // Recharger les contacts sans filtres de date
+                    setTimeout(() => {
+                      fetchContacts();
+                    }, 0);
+                  }}
+                  className="inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-50"
+                  title="Réinitialiser les filtres de date"
+                >
+                  <X className="h-3.5 w-3.5" />
+                  <span className="hidden sm:inline">Réinitialiser</span>
+                </button>
+              )}
+            </div>
+          </div>
+
+          {/* Actions à droite */}
+          <div className="flex items-center gap-2">
+            {/* Gérer les colonnes */}
+            {viewMode === 'table' && (
+              <button
+                onClick={() => setShowColumnPanel(true)}
+                className="inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-50"
+                title="Gérer les colonnes"
+              >
+                Gérer les colonnes
+              </button>
+            )}
+            {/* Bouton Réinitialiser les filtres */}
+            {hasActiveFilters() && (
+              <button
+                onClick={handleResetAllFilters}
+                className="inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-50"
+                title="Réinitialiser tous les filtres"
+              >
+                <X className="h-3.5 w-3.5" />
+                Réinitialiser
+              </button>
+            )}
+            {/* Groupe vue (liste / grille) */}
+            <div className="flex items-center rounded-lg border border-gray-200 bg-white p-1">
+              <button
+                onClick={() => setViewMode('table')}
+                className={cn(
+                  'cursor-pointer rounded-md px-2 py-1.5 text-gray-600 transition-colors',
+                  viewMode === 'table' ? 'bg-gray-100 text-gray-900' : 'hover:bg-gray-50',
+                )}
+                title="Vue liste"
+              >
+                <List className="h-4 w-4" />
+              </button>
+              <button
+                onClick={() => setViewMode('cards')}
+                className={cn(
+                  'cursor-pointer rounded-md px-2 py-1.5 text-gray-600 transition-colors',
+                  viewMode === 'cards' ? 'bg-gray-100 text-gray-900' : 'hover:bg-gray-50',
+                )}
+                title="Vue grille"
+              >
+                <LayoutGrid className="h-4 w-4" />
+              </button>
+            </div>
+
+            {/* Exporter tous les contacts (admin uniquement) */}
+            {isAdmin && (
+              <button
+                onClick={() => {
+                  setExportAll(true);
+                  setShowExportModal(true);
+                }}
+                disabled={exporting}
+                className="inline-flex cursor-pointer items-center gap-2 rounded-lg border border-indigo-600 bg-white px-4 py-2 text-xs font-semibold text-indigo-600 shadow-sm transition-colors hover:bg-indigo-50 focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm"
+              >
+                <Download className="h-4 w-4" />
+                Exporter tous
+              </button>
+            )}
+
+            {/* Ajouter un contact */}
+            <button
+              onClick={handleNewContact}
+              className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-xs font-semibold text-white shadow-sm transition-colors hover:bg-indigo-700 focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-none sm:text-sm"
+            >
+              <Plus className="h-4 w-4" />
+              Ajouter un contact
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8">
+        {success && (
+          <div className="mb-4 rounded-lg bg-green-50 p-4 text-sm text-green-600">{success}</div>
+        )}
+
+        {error && <div className="mb-4 rounded-lg bg-red-50 p-4 text-sm text-red-600">{error}</div>}
+
+        {/* Barre d'actions groupées */}
+        {selectedContactIds.size > 0 && (
+          <div className="mb-4 flex items-center justify-between rounded-lg border border-indigo-200 bg-indigo-50 p-4 shadow-sm">
+            <div className="flex items-center gap-4">
+              <span className="text-sm font-medium text-indigo-900">
+                {selectedContactIds.size} contact(s) sélectionné(s)
+              </span>
+              <button
+                onClick={handleDeselectAll}
+                className="cursor-pointer text-sm text-indigo-600 hover:text-indigo-700 hover:underline"
+              >
+                Désélectionner tout
+              </button>
+            </div>
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => setShowBulkCommercialModal(true)}
+                className="flex cursor-pointer items-center gap-2 rounded-lg bg-orange-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-orange-700"
+              >
+                <Users className="h-4 w-4" />
+                Changer commercial
+              </button>
+              <button
+                onClick={() => setShowBulkStatusModal(true)}
+                className="flex cursor-pointer items-center gap-2 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700"
+              >
+                <Tag className="h-4 w-4" />
+                Changer statut
+              </button>
+              {isAdmin && (
+                <>
+                  <button
+                    onClick={() => {
+                      setExportAll(false);
+                      setShowExportModal(true);
+                    }}
+                    disabled={bulkActionLoading || exporting}
+                    className="flex cursor-pointer items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
+                  >
+                    <Download className="h-4 w-4" />
+                    Exporter
+                  </button>
+                  <button
+                    onClick={handleBulkDelete}
+                    disabled={bulkActionLoading}
+                    className="flex cursor-pointer items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                    Supprimer
+                  </button>
+                </>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Liste des contacts */}
+        {loading ? (
+          viewMode === 'table' ? (
+            <ContactTableSkeleton />
+          ) : (
+            <ContactCardsSkeleton />
+          )
+        ) : contacts.length === 0 ? (
+          <div className="rounded-lg bg-white p-12 text-center shadow">
+            <div className="text-4xl sm:text-6xl">👥</div>
+            <h2 className="mt-4 text-lg font-semibold text-gray-900 sm:text-xl">
+              Aucun contact trouvé
+            </h2>
+            <p className="mt-2 text-sm text-gray-600 sm:text-base">
+              {search || statusFilter || assignedCommercialFilter || assignedTeleproFilter
+                ? 'Aucun contact ne correspond à vos critères'
+                : 'Commencez par ajouter votre premier contact'}
+            </p>
+            {!search && !statusFilter && !assignedCommercialFilter && !assignedTeleproFilter && (
+              <button
+                onClick={handleNewContact}
+                className="mt-6 cursor-pointer rounded-lg bg-indigo-600 px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-700 sm:text-base"
+              >
+                Ajouter un contact
+              </button>
+            )}
+          </div>
+        ) : (
+          <>
+            {/* Vue Tableau */}
+            {viewMode === 'table' && (
+              <div className="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
+                <div className="overflow-x-auto">
+                  <table className="min-w-full divide-y divide-gray-100 text-sm">
+                    <thead className="bg-gray-50/60">
+                      <tr>
+                        {/* Checkbox pour tout sélectionner */}
+                        <th className="px-3 py-3 text-left sm:px-6">
+                          <input
+                            type="checkbox"
+                            checked={
+                              contacts.length > 0 && selectedContactIds.size === contacts.length
+                            }
+                            onChange={handleSelectAll}
+                            className="h-4 w-4 cursor-pointer rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                          />
+                        </th>
+                        {/* En-têtes dynamiques des colonnes */}
+                        {visibleColumns.map((column) => {
+                          const isSortable = column.id === 'createdAt' || column.id === 'updatedAt';
+                          const showFilterIcon =
+                            column.id === 'status' ||
+                            column.id === 'origin' ||
+                            column.id === 'commercial' ||
+                            column.id === 'telepro' ||
+                            column.id === 'createdAt' ||
+                            column.id === 'updatedAt';
+
+                          return (
+                            <th
+                              key={column.id}
+                              className="px-3 py-3 text-left text-sm font-medium tracking-wider text-gray-500 uppercase sm:px-6"
+                            >
+                              {showFilterIcon ? (
+                                <div className="inline-flex items-center gap-1">
+                                  {isSortable ? (
+                                    <button
+                                      type="button"
+                                      onClick={() => handleSort(column.id)}
+                                      className="inline-flex cursor-pointer items-center gap-1"
+                                    >
+                                      <span>{column.label}</span>
+                                      {sortField === column.id && (
+                                        <span className="text-indigo-600">
+                                          {sortOrder === 'asc' ? <ChevronDown /> : <ChevronUp />}
+                                        </span>
+                                      )}
+                                    </button>
+                                  ) : (
+                                    <span>{column.label}</span>
+                                  )}
+                                  <button
+                                    type="button"
+                                    data-date-filter-icon={
+                                      column.id === 'createdAt' || column.id === 'updatedAt'
+                                        ? true
+                                        : undefined
+                                    }
+                                    onClick={(e) =>
+                                      column.id === 'createdAt' || column.id === 'updatedAt'
+                                        ? handleDateFilterClick(e, column.id)
+                                        : handleListFilterClick(e, column.id)
+                                    }
+                                    className="cursor-pointer"
+                                  >
+                                    <Filter
+                                      className={cn(
+                                        'h-3 w-3',
+                                        (isSortable && sortField === column.id) ||
+                                          (column.id === 'createdAt' &&
+                                            (createdAtStart || createdAtEnd)) ||
+                                          (column.id === 'updatedAt' &&
+                                            (updatedAtStart || updatedAtEnd))
+                                          ? 'text-indigo-600'
+                                          : 'text-gray-400',
+                                      )}
+                                    />
+                                  </button>
+                                </div>
+                              ) : column.id === 'contact' && groupContactInfo ? (
+                                'Contact'
+                              ) : (
+                                column.label
+                              )}
+                            </th>
+                          );
+                        })}
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-gray-200">
+                      {sortedContacts.map((contact) => (
+                        <tr
+                          key={contact.id}
+                          onClick={() => router.push(`/contacts/${contact.id}`)}
+                          className={cn(
+                            'cursor-pointer transition-colors hover:bg-gray-50',
+                            selectedContactIds.has(contact.id) && 'bg-indigo-50',
+                          )}
+                        >
+                          {/* Checkbox pour sélectionner ce contact */}
+                          <td
+                            className="px-3 py-4 whitespace-nowrap sm:px-6"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                            }}
+                          >
+                            <input
+                              type="checkbox"
+                              checked={selectedContactIds.has(contact.id)}
+                              onChange={() => handleSelectContact(contact.id)}
+                              className="h-4 w-4 cursor-pointer rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                            />
+                          </td>
+                          {/* Cellules dynamiques */}
+                          {visibleColumns.map((column) => renderTableCell(column.id, contact))}
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            )}
+
+            {/* Vue Cartes */}
+            {viewMode === 'cards' ? (
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                {sortedContacts.map((contact) => {
+                  return (
+                    <div
+                      key={contact.id}
+                      onClick={() => router.push(`/contacts/${contact.id}`)}
+                      className="relative cursor-pointer rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-all hover:border-indigo-300 hover:shadow-md"
+                    >
+                      {/* En-tête avec trois points */}
+                      <div className="mb-4 flex items-start justify-between">
+                        <div className="flex items-center gap-3">
+                          <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-lg font-semibold text-indigo-600">
+                            {contact.isCompany ? (
+                              <span>🏢</span>
+                            ) : (
+                              (contact.firstName?.[0] || contact.lastName?.[0] || '?').toUpperCase()
+                            )}
+                          </div>
+                          <div className="min-w-0">
+                            <h3 className="text-lg font-semibold text-gray-900">
+                              {contact.civility && `${contact.civility}. `}
+                              {contact.firstName} {contact.lastName}
+                            </h3>
+                            <p className="text-sm text-gray-500">
+                              CRÉÉ LE :{' '}
+                              {new Date(contact.createdAt).toLocaleDateString('fr-FR', {
+                                day: 'numeric',
+                                month: 'short',
+                                year: 'numeric',
+                              })}
+                            </p>
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* Informations de contact */}
+                      <div className="mb-4 space-y-2">
+                        <div className="flex items-center text-base text-gray-900">
+                          <Phone className="mr-2 h-4 w-4 text-gray-400" />
+                          <span className="font-medium">Tél. :</span>
+                          <span className="ml-1">{contact.phone}</span>
+                        </div>
+                        {contact.secondaryPhone && (
+                          <div className="text-sm text-gray-500">
+                            Tél. secondaire : {contact.secondaryPhone}
+                          </div>
+                        )}
+                        <div className="flex items-center text-base text-gray-900">
+                          <Mail className="mr-2 h-4 w-4 text-gray-400" />
+                          <span className="font-medium">Email :</span>
+                          <span className="ml-1">{contact.email || '-'}</span>
+                        </div>
+                        {(contact.companyName || contact.companyRelation) && (
+                          <div className="flex items-center text-base text-gray-900">
+                            <Building2 className="mr-2 h-4 w-4 text-gray-400" />
+                            <span>
+                              {contact.companyName ||
+                                (contact.companyRelation &&
+                                  (contact.companyRelation.firstName ||
+                                    contact.companyRelation.lastName ||
+                                    'Sans nom'))}
+                            </span>
+                          </div>
+                        )}
+                        {contact.city && (
+                          <div className="flex items-center text-base text-gray-500">
+                            <MapPin className="mr-2 h-4 w-4 text-gray-400" />
+                            <span className="font-medium">Localisation :</span>
+                            <span className="ml-1">
+                              {contact.city}
+                              {contact.postalCode && `, ${contact.postalCode}`}
+                            </span>
+                          </div>
+                        )}
+                        {contact.origin && (
+                          <div className="flex items-center text-base text-gray-500">
+                            <span className="mr-2 text-sm">🎯</span>
+                            <span className="font-medium">Origine :</span>
+                            <span className="ml-1">{contact.origin}</span>
+                          </div>
+                        )}
+                      </div>
+
+                      {/* Badges et statut */}
+                      <div className="mb-4 flex flex-wrap items-center gap-2">
+                        {contact.status && (
+                          <span
+                            className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold"
+                            style={{
+                              backgroundColor: `${contact.status.color}20`,
+                              color: contact.status.color,
+                            }}
+                          >
+                            {contact.status.name}
+                          </span>
+                        )}
+                        {contact.isCompany && (
+                          <span className="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-semibold text-blue-800">
+                            Entreprise
+                          </span>
+                        )}
+                        {!contact.assignedCommercial && (
+                          <span className="inline-flex items-center rounded-full border border-orange-300 bg-orange-50 px-2.5 py-0.5 text-xs font-semibold text-orange-800">
+                            Non Attribué
+                          </span>
+                        )}
+                      </div>
+
+                      {/* Pied de carte avec utilisateurs assignés */}
+                      <div className="flex items-start justify-between border-t border-gray-100 pt-4">
+                        <div className="space-y-2">
+                          {/* Commercial */}
+                          {contact.assignedCommercial && (
+                            <div className="flex items-center gap-2">
+                              <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-xs font-semibold text-indigo-600">
+                                {contact.assignedCommercial.name
+                                  .split(' ')
+                                  .map((n) => n[0])
+                                  .join('')
+                                  .slice(0, 2)
+                                  .toUpperCase()}
+                              </div>
+                              <div className="min-w-0 flex-1">
+                                <div className="flex items-center gap-1.5">
+                                  <span className="text-xs font-medium text-gray-900">
+                                    {contact.assignedCommercial.name}
+                                  </span>
+                                  <span className="inline-flex items-center rounded-full bg-blue-100 px-1.5 py-0.5 text-[10px] font-medium text-blue-700">
+                                    Commercial
+                                  </span>
+                                </div>
+                              </div>
+                            </div>
+                          )}
+
+                          {/* Télépro */}
+                          {contact.assignedTelepro && (
+                            <div className="flex items-center gap-2">
+                              <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-purple-100 text-xs font-semibold text-purple-600">
+                                {contact.assignedTelepro.name
+                                  .split(' ')
+                                  .map((n) => n[0])
+                                  .join('')
+                                  .slice(0, 2)
+                                  .toUpperCase()}
+                              </div>
+                              <div className="min-w-0 flex-1">
+                                <div className="flex items-center gap-1.5">
+                                  <span className="text-xs font-medium text-gray-900">
+                                    {contact.assignedTelepro.name}
+                                  </span>
+                                  <span className="inline-flex items-center rounded-full bg-purple-100 px-1.5 py-0.5 text-[10px] font-medium text-purple-700">
+                                    Télépro
+                                  </span>
+                                </div>
+                              </div>
+                            </div>
+                          )}
+
+                          {/* Aucun utilisateur assigné */}
+                          {!contact.assignedCommercial && !contact.assignedTelepro && (
+                            <div className="text-xs text-gray-400">Aucun utilisateur assigné</div>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            ) : null}
+
+            {/* Pagination */}
+            {totalPages > 1 && (
+              <div className="mt-6 flex items-center justify-center gap-2">
+                {/* Première page */}
+                <button
+                  onClick={() => setCurrentPage(1)}
+                  disabled={currentPage === 1}
+                  className={cn(
+                    'cursor-pointer rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50',
+                  )}
+                  title="Première page"
+                >
+                  <ChevronsLeft className="h-4 w-4" />
+                </button>
+
+                {/* Page précédente */}
+                <button
+                  onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
+                  disabled={currentPage === 1}
+                  className={cn(
+                    'cursor-pointer rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50',
+                  )}
+                >
+                  Précédent
+                </button>
+
+                {/* Numéros de pages */}
+                <div className="flex items-center gap-2">
+                  {Array.from({ length: totalPages }, (_, i) => i + 1)
+                    .filter((page) => {
+                      // Afficher les 5 pages autour de la page actuelle
+                      if (totalPages <= 7) return true;
+                      if (page === 1 || page === totalPages) return true;
+                      return Math.abs(page - currentPage) <= 2;
+                    })
+                    .map((page, idx, array) => {
+                      // Ajouter des ellipses si nécessaire
+                      const prevPage = array[idx - 1];
+                      const showEllipsis = prevPage && page - prevPage > 1;
+
+                      return (
+                        <div key={page} className="flex items-center gap-2">
+                          {showEllipsis && <span className="text-gray-400">...</span>}
+                          <button
+                            onClick={() => setCurrentPage(page)}
+                            className={cn(
+                              'cursor-pointer rounded-lg border px-3 py-2 text-sm font-medium transition-colors',
+                              currentPage === page
+                                ? 'border-indigo-600 bg-indigo-600 text-white'
+                                : 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50',
+                            )}
+                          >
+                            {page}
+                          </button>
+                        </div>
+                      );
+                    })}
+                </div>
+
+                {/* Page suivante */}
+                <button
+                  onClick={() => setCurrentPage((prev) => Math.min(totalPages, prev + 1))}
+                  disabled={currentPage === totalPages}
+                  className={cn(
+                    'cursor-pointer rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50',
+                  )}
+                >
+                  Suivant
+                </button>
+
+                {/* Dernière page */}
+                <button
+                  onClick={() => setCurrentPage(totalPages)}
+                  disabled={currentPage === totalPages}
+                  className={cn(
+                    'cursor-pointer rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50',
+                  )}
+                  title="Dernière page"
+                >
+                  <ChevronsRight className="h-4 w-4" />
+                </button>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+
+      {/* Panneau de gestion des colonnes */}
+      {showColumnPanel && (
+        <>
+          {/* Overlay */}
+          <div
+            className="fixed inset-0 z-40 bg-black/30"
+            onClick={() => setShowColumnPanel(false)}
+          />
+          {/* Panneau */}
+          <div className="fixed top-0 right-0 z-50 h-full w-full max-w-md bg-white shadow-xl">
+            <div className="flex h-full flex-col">
+              {/* En-tête */}
+              <div className="flex items-center justify-between border-b border-gray-200 p-6">
+                <h2 className="text-lg font-semibold text-gray-900">Gérer les colonnes</h2>
+                <button
+                  onClick={() => setShowColumnPanel(false)}
+                  className="cursor-pointer rounded-lg p-2 text-gray-400 transition-colors hover:bg-gray-100"
+                >
+                  <X className="h-5 w-5" />
+                </button>
+              </div>
+
+              {/* Liste des colonnes */}
+              <div className="flex-1 overflow-y-auto p-6">
+                {/* Option de regroupement */}
+                <div className="mb-6 rounded-lg border border-gray-200 bg-gray-50 p-4">
+                  <h3 className="mb-3 text-sm font-semibold text-gray-900">
+                    Regrouper les informations de contact
+                  </h3>
+                  <label className="flex cursor-pointer items-center gap-3">
+                    <input
+                      type="checkbox"
+                      checked={groupContactInfo}
+                      onChange={(e) => setGroupContactInfo(e.target.checked)}
+                      className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                    />
+                    <span className="text-sm text-gray-700">
+                      Afficher nom, prénom, email et téléphone dans une seule colonne
+                    </span>
+                  </label>
+                </div>
+
+                <p className="mb-4 text-sm text-gray-600">
+                  Cliquez sur l'œil pour masquer/afficher une colonne. Glissez-déposez pour
+                  réorganiser.
+                </p>
+                <div className="space-y-2">
+                  {tableColumns
+                    .sort((a, b) => a.order - b.order)
+                    .map((contact) => (
+                      <div
+                        key={contact.id}
+                        draggable
+                        onDragStart={() => handleDragStart(contact.id)}
+                        onDragOver={(e) => handleDragOver(e, contact.id)}
+                        onDragEnd={handleDragEnd}
+                        className={cn(
+                          'flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3 transition-colors',
+                          draggedColumn === contact.id
+                            ? 'opacity-50'
+                            : 'cursor-move hover:bg-gray-50',
+                        )}
+                      >
+                        {/* Poignée de drag */}
+                        <GripVertical className="h-5 w-5 text-gray-400" />
+
+                        {/* Label */}
+                        <span className="flex-1 text-sm font-medium text-gray-900">
+                          {contact.label}
+                        </span>
+
+                        {/* Toggle visibilité */}
+                        <button
+                          onClick={() => toggleColumnVisibility(contact.id)}
+                          className="cursor-pointer rounded-lg p-1 text-gray-400 transition-colors hover:bg-gray-200"
+                          title={contact.visible ? 'Masquer' : 'Afficher'}
+                        >
+                          {contact.visible ? (
+                            <Eye className="h-5 w-5 text-indigo-600" />
+                          ) : (
+                            <EyeOff className="h-5 w-5" />
+                          )}
+                        </button>
+                      </div>
+                    ))}
+                </div>
+              </div>
+
+              {/* Pied */}
+              <div className="border-t border-gray-200 p-6">
+                <div className="flex flex-col gap-3 sm:flex-row sm:justify-between">
+                  <button
+                    onClick={resetColumns}
+                    className="cursor-pointer rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50"
+                  >
+                    Réinitialiser
+                  </button>
+                  <button
+                    onClick={() => setShowColumnPanel(false)}
+                    className="cursor-pointer rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
+                  >
+                    Appliquer
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+
+      {/* Modal de création/édition */}
+      {showModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm sm:p-6">
+          <div className="flex max-h-[90vh] w-full max-w-5xl flex-col rounded-lg bg-white p-6 shadow-xl sm:p-8">
+            {/* En-tête fixe */}
+            <div className="shrink-0 border-b border-gray-100 pb-4">
+              <div className="flex items-center justify-between">
+                <h2 className="text-xl font-bold text-gray-900 sm:text-2xl">
+                  {editingContact ? 'Modifier le contact' : 'Nouveau contact'}
+                </h2>
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowModal(false);
+                    setEditingContact(null);
+                    setError('');
+                  }}
+                  className="cursor-pointer rounded-lg p-2 text-gray-400 transition-colors hover:bg-gray-100"
+                >
+                  <svg className="h-6 w-6" 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 scrollable */}
+            <form
+              id="contact-form"
+              onSubmit={handleSubmit}
+              className="flex-1 space-y-6 overflow-y-auto pt-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+            >
+              {/* Informations personnelles */}
+              <div>
+                <h3 className="mb-4 text-lg font-semibold text-gray-900">
+                  Informations personnelles
+                </h3>
+                <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700">Civilité</label>
+                    <select
+                      value={formData.civility}
+                      onChange={(e) => setFormData({ ...formData, civility: e.target.value })}
+                      className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                    >
+                      <option value="">-</option>
+                      <option value="M">M.</option>
+                      <option value="MME">Mme</option>
+                      <option value="MLLE">Mlle</option>
+                    </select>
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700">Prénom</label>
+                    <input
+                      type="text"
+                      value={formData.firstName}
+                      onChange={(e) => setFormData({ ...formData, firstName: e.target.value })}
+                      className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                      placeholder="Prénom"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700">Nom</label>
+                    <input
+                      type="text"
+                      value={formData.lastName}
+                      onChange={(e) => setFormData({ ...formData, lastName: e.target.value })}
+                      className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                      placeholder="Nom"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {/* Coordonnées */}
+              <div>
+                <h3 className="mb-4 text-lg font-semibold text-gray-900">Coordonnées</h3>
+                <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700">Téléphone *</label>
+                    <input
+                      type="tel"
+                      required
+                      value={formData.phone}
+                      onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
+                      onBlur={(e) => {
+                        const normalized = normalizePhoneNumber(e.target.value);
+                        if (normalized) {
+                          setFormData({ ...formData, phone: normalized });
+                        }
+                      }}
+                      className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                      placeholder="06 12 34 56 78"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700">
+                      Téléphone secondaire
+                    </label>
+                    <input
+                      type="tel"
+                      value={formData.secondaryPhone}
+                      onChange={(e) => setFormData({ ...formData, secondaryPhone: e.target.value })}
+                      onBlur={(e) => {
+                        const normalized = normalizePhoneNumber(e.target.value);
+                        if (normalized) {
+                          setFormData({ ...formData, secondaryPhone: normalized });
+                        }
+                      }}
+                      className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                      placeholder="06 12 34 56 78"
+                    />
+                  </div>
+
+                  <div className="md:col-span-2">
+                    <label className="block text-sm font-medium text-gray-700">Email</label>
+                    <input
+                      type="email"
+                      value={formData.email}
+                      onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                      className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                      placeholder="email@exemple.com"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {/* Adresse */}
+              <div>
+                <h3 className="mb-4 text-lg font-semibold text-gray-900">Adresse</h3>
+                <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+                  <div className="md:col-span-3">
+                    <label className="block text-sm font-medium text-gray-700">
+                      Adresse complète
+                    </label>
+                    <input
+                      type="text"
+                      value={formData.address}
+                      onChange={(e) => setFormData({ ...formData, address: e.target.value })}
+                      className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                      placeholder="123 Rue de la République"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700">Ville</label>
+                    <input
+                      type="text"
+                      value={formData.city}
+                      onChange={(e) => setFormData({ ...formData, city: e.target.value })}
+                      className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                      placeholder="Paris"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700">Code postal</label>
+                    <input
+                      type="text"
+                      value={formData.postalCode}
+                      onChange={(e) => setFormData({ ...formData, postalCode: e.target.value })}
+                      className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                      placeholder="75001"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {/* Entreprise */}
+              <div>
+                <h3 className="mb-4 text-lg font-semibold text-gray-900">Entreprise</h3>
+                <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                  <div className="flex items-center">
+                    <input
+                      type="checkbox"
+                      id="isCompany"
+                      checked={formData.isCompany}
+                      onChange={(e) =>
+                        setFormData({
+                          ...formData,
+                          isCompany: e.target.checked,
+                          companyId: e.target.checked ? formData.companyId : '',
+                        })
+                      }
+                      className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                    />
+                    <label htmlFor="isCompany" className="ml-2 text-sm font-medium text-gray-700">
+                      Ce contact est une entreprise
+                    </label>
+                  </div>
+
+                  {!formData.isCompany && (
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700">
+                        Entreprise associée
+                      </label>
+                      <select
+                        value={formData.companyId}
+                        onChange={(e) => setFormData({ ...formData, companyId: e.target.value })}
+                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                      >
+                        <option value="">Aucune entreprise</option>
+                        {contacts
+                          .filter((c) => c.isCompany)
+                          .map((company) => (
+                            <option key={company.id} value={company.id}>
+                              {company.firstName || company.lastName || 'Entreprise sans nom'}
+                            </option>
+                          ))}
+                      </select>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* Autres informations */}
+              <div>
+                <h3 className="mb-4 text-lg font-semibold text-gray-900">Autres informations</h3>
+                <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700">Entreprise</label>
+                    <input
+                      type="text"
+                      value={formData.company}
+                      onChange={(e) => setFormData({ ...formData, company: e.target.value })}
+                      className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                      placeholder="Nom de l'entreprise"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700">
+                      Origine du contact
+                    </label>
+                    <input
+                      type="text"
+                      value={formData.origin}
+                      onChange={(e) => setFormData({ ...formData, origin: e.target.value })}
+                      className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                      placeholder="Site web, recommandation, etc."
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700">Statut</label>
+                    <select
+                      value={formData.statusId}
+                      onChange={(e) => setFormData({ ...formData, statusId: e.target.value })}
+                      className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                    >
+                      <option value="">Aucun statut</option>
+                      {statuses.map((status) => (
+                        <option key={status.id} value={status.id}>
+                          {status.name}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+
+                  {/* Motif de fermeture (visible uniquement si statut = Fermé) */}
+                  {(() => {
+                    const selectedStatus = statuses.find((s) => s.id === formData.statusId);
+                    const isLostStatus = selectedStatus?.name?.toLowerCase() === 'fermé';
+                    if (!isLostStatus) return null;
+                    return (
+                      <div>
+                        <label className="block text-sm font-medium text-gray-700">
+                          Motif de fermeture *
+                        </label>
+                        <select
+                          value={formData.closingReason}
+                          onChange={(e) =>
+                            setFormData({ ...formData, closingReason: e.target.value })
+                          }
+                          className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                        >
+                          <option value="">Sélectionnez un motif</option>
+                          {closingReasons.map((reason) => (
+                            <option key={reason.id} value={reason.name}>
+                              {reason.name}
+                            </option>
+                          ))}
+                        </select>
+                      </div>
+                    );
+                  })()}
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700">Commercial</label>
+                    <select
+                      value={formData.assignedCommercialId}
+                      onChange={(e) =>
+                        setFormData({ ...formData, assignedCommercialId: e.target.value })
+                      }
+                      className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                    >
+                      <option value="">Non assigné</option>
+                      {(isAdmin
+                        ? users.filter((u) => u.role !== 'USER')
+                        : users.filter(
+                            (u) =>
+                              u.role === 'COMMERCIAL' || u.role === 'ADMIN' || u.role === 'MANAGER',
+                          )
+                      ).map((user) => (
+                        <option key={user.id} value={user.id}>
+                          {user.name}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700">Télépro</label>
+                    <select
+                      value={formData.assignedTeleproId}
+                      onChange={(e) =>
+                        setFormData({ ...formData, assignedTeleproId: e.target.value })
+                      }
+                      className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                    >
+                      <option value="">Non assigné</option>
+                      {(isAdmin
+                        ? users.filter((u) => u.role !== 'USER')
+                        : users.filter(
+                            (u) =>
+                              u.role === 'TELEPRO' || u.role === 'ADMIN' || u.role === 'MANAGER',
+                          )
+                      ).map((user) => (
+                        <option key={user.id} value={user.id}>
+                          {user.name}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                </div>
+              </div>
+
+              {error && (
+                <div className="rounded-lg bg-red-50 p-4 text-sm text-red-600">{error}</div>
+              )}
+            </form>
+
+            {/* Pied de modal fixe */}
+            <div className="shrink-0 border-t border-gray-100 pt-4">
+              <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowModal(false);
+                    setEditingContact(null);
+                    setError('');
+                  }}
+                  className="w-full cursor-pointer rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 sm:w-auto"
+                >
+                  Annuler
+                </button>
+                <button
+                  type="submit"
+                  form="contact-form"
+                  className="w-full cursor-pointer rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-700 sm:w-auto"
+                >
+                  {editingContact ? 'Modifier' : 'Créer'}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Modal d'import */}
+      {showImportModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm sm:p-6">
+          <div className="flex max-h-[90vh] w-full max-w-5xl flex-col rounded-lg bg-white shadow-xl">
+            {/* En-tête */}
+            <div className="shrink-0 border-b border-gray-100 px-6 py-4">
+              <div className="flex items-center justify-between">
+                <h2 className="text-lg font-semibold text-gray-900">Importer des contacts</h2>
+                <button
+                  onClick={() => {
+                    setShowImportModal(false);
+                    setImportFile(null);
+                    setImportPreview([]);
+                    setImportHeaders([]);
+                    setImportFieldMappings({});
+                    setImportResult(null);
+                    setDefaultStatusId('');
+                    setDefaultCommercialId('');
+                    setDefaultOrigin('');
+                    setError('');
+                  }}
+                  className="cursor-pointer rounded-lg p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
+                >
+                  <X className="h-5 w-5" />
+                </button>
+              </div>
+            </div>
+
+            {/* Contenu */}
+            <div className="flex-1 overflow-y-auto px-6 py-4">
+              {!importFile ? (
+                <div>
+                  <label className="mb-2 block text-sm font-medium text-gray-700">
+                    Sélectionner un fichier (CSV ou Excel)
+                  </label>
+                  <div
+                    className="mt-1 flex cursor-pointer justify-center rounded-lg border-2 border-dashed border-gray-300 px-6 py-10 transition-colors hover:border-indigo-400 hover:bg-indigo-50/40"
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => fileInputRef.current?.click()}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        fileInputRef.current?.click();
+                      }
+                    }}
+                  >
+                    <div className="text-center">
+                      <Upload className="mx-auto h-12 w-12 text-gray-400" />
+                      <div className="mt-4 flex text-sm leading-6 text-gray-600">
+                        <span className="relative rounded-md bg-white font-semibold text-indigo-600">
+                          Téléverser un fichier
+                        </span>
+                        <p className="pl-1">ou glissez-déposez</p>
+                      </div>
+                      <p className="text-xs leading-5 text-gray-600">
+                        CSV, XLSX ou XLS jusqu'à 10MB
+                      </p>
+                      <input
+                        ref={fileInputRef}
+                        type="file"
+                        accept=".csv,.xlsx,.xls"
+                        onChange={handleFileSelect}
+                        className="sr-only"
+                      />
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <div className="space-y-6">
+                  {/* Fichier sélectionné */}
+                  <div className="rounded-lg border border-gray-200 p-4">
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <p className="text-sm font-medium text-gray-900">{importFile.name}</p>
+                        <p className="text-xs text-gray-500">
+                          {(importFile.size / 1024).toFixed(2)} KB
+                        </p>
+                      </div>
+                      <button
+                        onClick={() => {
+                          setImportFile(null);
+                          setImportPreview([]);
+                          setImportHeaders([]);
+                          setImportFieldMappings({});
+                          setImportResult(null);
+                          setDefaultStatusId('');
+                          setDefaultCommercialId('');
+                          setDefaultOrigin('');
+                        }}
+                        className="cursor-pointer rounded-lg p-1 text-gray-400 transition-colors hover:text-gray-600"
+                      >
+                        <X className="h-5 w-5" />
+                      </button>
+                    </div>
+                  </div>
+
+                  {/* Options */}
+                  <div>
+                    <label className="flex items-center gap-2">
+                      <input
+                        type="checkbox"
+                        checked={importSkipFirstRow}
+                        onChange={(e) => setImportSkipFirstRow(e.target.checked)}
+                        className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                      />
+                      <span className="text-sm text-gray-700">
+                        La seconde ligne contient les en-têtes
+                      </span>
+                    </label>
+                  </div>
+
+                  {/* Valeurs par défaut */}
+                  <div>
+                    <h3 className="mb-3 text-sm font-semibold text-gray-900">
+                      Valeurs par défaut (optionnel)
+                    </h3>
+                    <p className="mb-3 text-xs text-gray-600">
+                      Ces valeurs seront appliquées aux contacts qui n'ont pas ces informations dans
+                      le fichier
+                    </p>
+                    <div className="space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-4">
+                      <div>
+                        <label className="mb-1 block text-sm font-medium text-gray-700">
+                          Statut par défaut
+                        </label>
+                        <select
+                          value={defaultStatusId}
+                          onChange={(e) => setDefaultStatusId(e.target.value)}
+                          className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                        >
+                          <option value="">Aucun statut par défaut</option>
+                          {statuses.map((status) => (
+                            <option key={status.id} value={status.id}>
+                              {status.name}
+                            </option>
+                          ))}
+                        </select>
+                      </div>
+
+                      <div>
+                        <label className="mb-1 block text-sm font-medium text-gray-700">
+                          Commercial par défaut
+                        </label>
+                        <select
+                          value={defaultCommercialId}
+                          onChange={(e) => setDefaultCommercialId(e.target.value)}
+                          className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                        >
+                          <option value="">Aucun commercial par défaut</option>
+                          {users
+                            .filter((u) => u.role !== 'USER')
+                            .map((user) => (
+                              <option key={user.id} value={user.id}>
+                                {user.name}
+                              </option>
+                            ))}
+                        </select>
+                      </div>
+
+                      <div>
+                        <label className="mb-1 block text-sm font-medium text-gray-700">
+                          Origine de la campagne par défaut
+                        </label>
+                        <input
+                          type="text"
+                          value={defaultOrigin}
+                          onChange={(e) => setDefaultOrigin(e.target.value)}
+                          placeholder="Ex: Facebook Ads, Google Ads, etc."
+                          className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Correspondance des champs */}
+                  {importHeaders.length > 0 && (
+                    <div>
+                      <h3 className="mb-2 text-base font-semibold text-gray-900">
+                        Correspondance des champs
+                      </h3>
+                      <p className="mb-4 text-sm text-gray-600">
+                        Vérifiez et ajustez les correspondances automatiques entre vos colonnes et
+                        les champs du CRM.
+                      </p>
+                      <div className="space-y-3">
+                        {importHeaders.map((header) => {
+                          const mapping = importFieldMappings[header] || { action: 'ignore' };
+                          const exampleValue =
+                            importPreview.length > 0 && importPreview[0][header]
+                              ? importPreview[0][header]
+                              : '';
+
+                          return (
+                            <div
+                              key={header}
+                              className="rounded-lg border border-gray-200 bg-gray-50 p-4"
+                            >
+                              <div className="flex items-start gap-3">
+                                {/* Colonne du fichier */}
+                                <div className="flex-1">
+                                  <div className="mb-2">
+                                    <span className="text-xs font-medium text-gray-500">
+                                      Colonne du fichier
+                                    </span>
+                                    <p className="mt-1 text-sm font-semibold text-gray-900">
+                                      {header}
+                                    </p>
+                                    {exampleValue && (
+                                      <p className="mt-1 text-xs text-gray-500">
+                                        Exemple: {String(exampleValue).substring(0, 50)}
+                                        {String(exampleValue).length > 50 ? '...' : ''}
+                                      </p>
+                                    )}
+                                  </div>
+                                </div>
+
+                                {/* Flèche */}
+                                <div className="mt-8 flex items-center">
+                                  <ArrowRight className="h-5 w-5 text-gray-400" />
+                                </div>
+
+                                {/* Action */}
+                                <div className="flex-1">
+                                  <label className="mb-2 block text-xs font-medium text-gray-500">
+                                    Action
+                                  </label>
+                                  <select
+                                    value={mapping.action}
+                                    onChange={(e) => {
+                                      const newAction = e.target.value as 'map' | 'note' | 'ignore';
+                                      setImportFieldMappings({
+                                        ...importFieldMappings,
+                                        [header]: {
+                                          action: newAction,
+                                          crmField:
+                                            newAction === 'map' && mapping.crmField
+                                              ? mapping.crmField
+                                              : newAction === 'map'
+                                                ? 'firstName'
+                                                : undefined,
+                                        },
+                                      });
+                                    }}
+                                    className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                                  >
+                                    <option value="map">Mapper vers un champ</option>
+                                    <option value="note">Ajouter comme note</option>
+                                    <option value="ignore">Ignorer</option>
+                                  </select>
+                                </div>
+
+                                {/* Flèche (si action = map) */}
+                                {mapping.action === 'map' && (
+                                  <div className="mt-8 flex items-center">
+                                    <ArrowRight className="h-5 w-5 text-gray-400" />
+                                  </div>
+                                )}
+
+                                {/* Champ du CRM (si action = map) */}
+                                {mapping.action === 'map' && (
+                                  <div className="flex-1">
+                                    <label className="mb-2 block text-xs font-medium text-gray-500">
+                                      Champ du CRM
+                                    </label>
+                                    <select
+                                      value={mapping.crmField || ''}
+                                      onChange={(e) => {
+                                        setImportFieldMappings({
+                                          ...importFieldMappings,
+                                          [header]: {
+                                            action: 'map',
+                                            crmField: e.target.value,
+                                          },
+                                        });
+                                      }}
+                                      className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                                    >
+                                      <option value="">Sélectionnez un champ</option>
+                                      <option value="phone">Téléphone *</option>
+                                      <option value="firstName">Prénom</option>
+                                      <option value="lastName">Nom</option>
+                                      <option value="email">Email</option>
+                                      <option value="civility">Civilité</option>
+                                      <option value="secondaryPhone">Téléphone secondaire</option>
+                                      <option value="address">Adresse</option>
+                                      <option value="city">Ville</option>
+                                      <option value="postalCode">Code postal</option>
+                                      <option value="origin">Origine</option>
+                                    </select>
+                                  </div>
+                                )}
+                              </div>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Prévisualisation */}
+                  {importPreview.length > 0 && (
+                    <div>
+                      <h3 className="mb-3 text-sm font-semibold text-gray-900">
+                        Aperçu (5 premières lignes)
+                      </h3>
+                      <div className="overflow-x-auto rounded-lg border border-gray-200">
+                        <table className="min-w-full divide-y divide-gray-200">
+                          <thead className="bg-gray-50">
+                            <tr>
+                              {importHeaders.map((header) => (
+                                <th
+                                  key={header}
+                                  className="px-4 py-2 text-left text-xs font-medium text-gray-700"
+                                >
+                                  {header}
+                                </th>
+                              ))}
+                            </tr>
+                          </thead>
+                          <tbody className="divide-y divide-gray-200 bg-white">
+                            {importPreview.map((row, idx) => (
+                              <tr key={idx}>
+                                {importHeaders.map((header) => (
+                                  <td
+                                    key={header}
+                                    className="px-4 py-2 text-xs whitespace-nowrap text-gray-900"
+                                  >
+                                    {row[header] || '-'}
+                                  </td>
+                                ))}
+                              </tr>
+                            ))}
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Résultat de l'import */}
+                  {importResult && (
+                    <div className="rounded-lg border border-green-200 bg-green-50 p-4">
+                      <h3 className="mb-2 text-sm font-semibold text-green-900">
+                        Résultat de l'import
+                      </h3>
+                      <ul className="space-y-1 text-sm text-green-800">
+                        <li>✓ {importResult.imported} contact(s) importé(s)</li>
+                        {importResult.skipped > 0 && (
+                          <li className="text-yellow-700">
+                            ⚠ {importResult.skipped} ligne(s) ignorée(s)
+                          </li>
+                        )}
+                        {importResult.duplicates > 0 && (
+                          <li className="text-orange-700">
+                            ⚠ {importResult.duplicates} doublon(s) détecté(s)
+                          </li>
+                        )}
+                        {importResult.errors > 0 && (
+                          <li className="text-red-700">✗ {importResult.errors} erreur(s)</li>
+                        )}
+                      </ul>
+                    </div>
+                  )}
+
+                  {error && (
+                    <div className="rounded-lg bg-red-50 p-4 text-sm text-red-600">{error}</div>
+                  )}
+                </div>
+              )}
+            </div>
+
+            {/* Pied de modal */}
+            {importFile && (
+              <div className="shrink-0 border-t border-gray-100 px-6 py-4">
+                <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setShowImportModal(false);
+                      setImportFile(null);
+                      setImportPreview([]);
+                      setImportHeaders([]);
+                      setImportFieldMappings({});
+                      setImportResult(null);
+                      setDefaultStatusId('');
+                      setDefaultCommercialId('');
+                      setDefaultOrigin('');
+                      setError('');
+                    }}
+                    className="w-full cursor-pointer rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 sm:w-auto"
+                    disabled={importing}
+                  >
+                    Annuler
+                  </button>
+                  <button
+                    type="button"
+                    onClick={handleImport}
+                    disabled={
+                      importing ||
+                      !Object.entries(importFieldMappings).some(
+                        ([, mapping]) => mapping.action === 'map' && mapping.crmField === 'phone',
+                      )
+                    }
+                    className="w-full cursor-pointer rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
+                  >
+                    {importing ? 'Import en cours...' : 'Importer'}
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Modal de résultats d'import */}
+      {showImportResultModal && importResultData && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm">
+          <div className="w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
+            <div className="mb-4 flex items-center justify-between">
+              <h3 className="text-lg font-semibold text-gray-900">Résultat de l'import</h3>
+              <button
+                onClick={() => {
+                  setShowImportResultModal(false);
+                  setImportResultData(null);
+                }}
+                className="cursor-pointer rounded-lg p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
+              >
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+
+            <div className="space-y-4">
+              {/* Contacts importés */}
+              <div className="flex items-start gap-3 rounded-lg border border-green-200 bg-green-50 p-4">
+                <div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-green-100">
+                  <svg
+                    className="h-5 w-5 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>
+                </div>
+                <div className="flex-1">
+                  <p className="text-sm font-semibold text-green-900">
+                    {importResultData.imported} contact(s) importé(s)
+                  </p>
+                  <p className="mt-1 text-xs text-green-700">
+                    Les contacts ont été ajoutés avec succès à votre base de données.
+                  </p>
+                </div>
+              </div>
+
+              {/* Doublons fusionnés */}
+              {importResultData.duplicates > 0 && (
+                <div className="flex items-start gap-3 rounded-lg border border-orange-200 bg-orange-50 p-4">
+                  <div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-orange-100">
+                    <svg
+                      className="h-5 w-5 text-orange-600"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"
+                      />
+                    </svg>
+                  </div>
+                  <div className="flex-1">
+                    <p className="text-sm font-semibold text-orange-900">
+                      {importResultData.duplicates} doublon(s) fusionné(s)
+                    </p>
+                    <p className="mt-1 text-xs text-orange-700">
+                      Ces contacts existaient déjà et ont été fusionnés avec les données existantes.
+                    </p>
+                  </div>
+                </div>
+              )}
+
+              {/* Lignes ignorées */}
+              {importResultData.skipped > 0 && (
+                <div className="flex items-start gap-3 rounded-lg border border-yellow-200 bg-yellow-50 p-4">
+                  <div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-yellow-100">
+                    <svg
+                      className="h-5 w-5 text-yellow-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>
+                  </div>
+                  <div className="flex-1">
+                    <p className="text-sm font-semibold text-yellow-900">
+                      {importResultData.skipped} ligne(s) ignorée(s)
+                    </p>
+                    <p className="mt-1 text-xs text-yellow-700">
+                      Ces lignes n'ont pas pu être importées (téléphone manquant ou invalide).
+                    </p>
+                  </div>
+                </div>
+              )}
+
+              {/* Erreurs */}
+              {importResultData.errors > 0 && (
+                <div className="flex items-start gap-3 rounded-lg border border-red-200 bg-red-50 p-4">
+                  <div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-red-100">
+                    <svg
+                      className="h-5 w-5 text-red-600"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+                      />
+                    </svg>
+                  </div>
+                  <div className="flex-1">
+                    <p className="text-sm font-semibold text-red-900">
+                      {importResultData.errors} erreur(s)
+                    </p>
+                    <p className="mt-1 text-xs text-red-700">
+                      Certaines lignes ont rencontré des erreurs lors de l'import.
+                    </p>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            <div className="mt-6 flex justify-end">
+              <button
+                onClick={() => {
+                  setShowImportResultModal(false);
+                  setImportResultData(null);
+                }}
+                className="cursor-pointer rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
+              >
+                Fermer
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Modal - Changer commercial */}
+      {showBulkCommercialModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm">
+          <div className="w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
+            <div className="mb-4 flex items-center justify-between">
+              <h3 className="text-lg font-semibold text-gray-900">Changer le commercial</h3>
+              <button
+                onClick={() => {
+                  setShowBulkCommercialModal(false);
+                  setBulkCommercialId('');
+                }}
+                className="cursor-pointer rounded-lg p-2 text-gray-400 transition-colors hover:bg-gray-100"
+              >
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+
+            <p className="mb-4 text-sm text-gray-600">
+              {selectedContactIds.size} contact(s) sélectionné(s)
+            </p>
+
+            <div className="mb-4">
+              <label className="mb-2 block text-sm font-medium text-gray-700">
+                Nouveau commercial
+              </label>
+              <select
+                value={bulkCommercialId}
+                onChange={(e) => setBulkCommercialId(e.target.value)}
+                className="w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+              >
+                <option value="">Sélectionner un commercial</option>
+                {users
+                  .filter((u) => u.role !== 'USER')
+                  .map((user) => (
+                    <option key={user.id} value={user.id}>
+                      {user.name}
+                    </option>
+                  ))}
+              </select>
+            </div>
+
+            <div className="flex justify-end gap-3">
+              <button
+                onClick={() => {
+                  setShowBulkCommercialModal(false);
+                  setBulkCommercialId('');
+                }}
+                className="cursor-pointer rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50"
+              >
+                Annuler
+              </button>
+              <button
+                onClick={handleBulkChangeCommercial}
+                disabled={bulkActionLoading || !bulkCommercialId}
+                className="cursor-pointer rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                {bulkActionLoading ? 'En cours...' : 'Appliquer'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Modal - Changer statut */}
+      {showBulkStatusModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm">
+          <div className="w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
+            <div className="mb-4 flex items-center justify-between">
+              <h3 className="text-lg font-semibold text-gray-900">Changer le statut</h3>
+              <button
+                onClick={() => {
+                  setShowBulkStatusModal(false);
+                  setBulkStatusId('');
+                }}
+                className="cursor-pointer rounded-lg p-2 text-gray-400 transition-colors hover:bg-gray-100"
+              >
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+
+            <p className="mb-4 text-sm text-gray-600">
+              {selectedContactIds.size} contact(s) sélectionné(s)
+            </p>
+
+            <div className="mb-4">
+              <label className="mb-2 block text-sm font-medium text-gray-700">Nouveau statut</label>
+              <select
+                value={bulkStatusId}
+                onChange={(e) => setBulkStatusId(e.target.value)}
+                className="w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+              >
+                <option value="">Sélectionner un statut</option>
+                {statuses.map((status) => (
+                  <option key={status.id} value={status.id}>
+                    {status.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div className="flex justify-end gap-3">
+              <button
+                onClick={() => {
+                  setShowBulkStatusModal(false);
+                  setBulkStatusId('');
+                }}
+                className="cursor-pointer rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50"
+              >
+                Annuler
+              </button>
+              <button
+                onClick={handleBulkChangeStatus}
+                disabled={bulkActionLoading || !bulkStatusId}
+                className="cursor-pointer rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                {bulkActionLoading ? 'En cours...' : 'Appliquer'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Popover de filtre de date (sous l'icône) */}
+      {dateFilterModal && dateFilterPosition && (
+        <div
+          ref={dateFilterModalRef}
+          className="fixed z-50 w-72 rounded-lg border border-gray-200 bg-white p-4 shadow-xl"
+          style={{ top: dateFilterPosition.top, left: dateFilterPosition.left }}
+        >
+          <div className="relative">
+            <button
+              onClick={() => {
+                setDateFilterModal(null);
+                setDateFilterPosition(null);
+              }}
+              className="absolute top-0 right-0 cursor-pointer rounded-lg p-1.5 text-gray-400 transition-colors hover:bg-gray-100"
+            >
+              <X className="h-4 w-4" />
+            </button>
+
+            <h3 className="mb-3 pr-6 text-sm font-semibold text-gray-900">
+              {dateFilterModal === 'createdAt' ? 'Date de création' : 'Date de modification'}
+            </h3>
+
+            <div className="space-y-3">
+              <div>
+                <label className="mb-1 block text-xs font-medium text-gray-700">Du</label>
+                <input
+                  type="date"
+                  value={dateFilterModal === 'createdAt' ? createdAtStart : updatedAtStart}
+                  onChange={(e) => {
+                    if (dateFilterModal === 'createdAt') {
+                      setCreatedAtStart(e.target.value);
+                    } else {
+                      setUpdatedAtStart(e.target.value);
+                    }
+                  }}
+                  className="w-full rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                />
+              </div>
+
+              <div>
+                <label className="mb-1 block text-xs font-medium text-gray-700">Au</label>
+                <input
+                  type="date"
+                  value={dateFilterModal === 'createdAt' ? createdAtEnd : updatedAtEnd}
+                  onChange={(e) => {
+                    if (dateFilterModal === 'createdAt') {
+                      setCreatedAtEnd(e.target.value);
+                    } else {
+                      setUpdatedAtEnd(e.target.value);
+                    }
+                  }}
+                  className="w-full rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                />
+              </div>
+            </div>
+
+            <div className="mt-4 flex justify-end gap-2">
+              <button
+                onClick={() => handleClearDateFilter(dateFilterModal)}
+                className="cursor-pointer rounded-md border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-50"
+              >
+                Effacer
+              </button>
+              <button
+                onClick={handleApplyDateFilter}
+                className="cursor-pointer rounded-md bg-indigo-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-indigo-700"
+              >
+                Filtrer
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Popover de filtre de liste (Statut, Origine, Commercial, Télépro) */}
+      {listFilterModal && listFilterPosition && (
+        <div
+          ref={listFilterModalRef}
+          className="fixed z-50 w-80 rounded-lg border border-gray-200 bg-white p-4 shadow-xl"
+          style={{ top: listFilterPosition.top, left: listFilterPosition.left }}
+        >
+          <div className="relative">
+            <button
+              onClick={() => {
+                setListFilterModal(null);
+                setListFilterPosition(null);
+              }}
+              className="absolute top-0 right-0 cursor-pointer rounded-lg p-1.5 text-gray-400 transition-colors hover:bg-gray-100"
+            >
+              <X className="h-4 w-4" />
+            </button>
+
+            {/* Titre */}
+            <h3 className="mb-3 pr-6 text-sm font-semibold text-gray-900">
+              {listFilterModal === 'status'
+                ? 'Status'
+                : listFilterModal === 'origin'
+                  ? 'Origine'
+                  : listFilterModal === 'commercial'
+                    ? 'Commercial'
+                    : 'Télépro'}
+            </h3>
+
+            {/* Boutons tout cocher / tout décocher */}
+            <div className="mb-3 flex gap-2">
+              <button
+                type="button"
+                onClick={() => {
+                  if (listFilterModal === 'status') {
+                    setStatusFilter('');
+                  } else if (listFilterModal === 'origin') {
+                    setOriginFilter('');
+                  } else if (listFilterModal === 'commercial') {
+                    setAssignedCommercialFilter('');
+                  } else if (listFilterModal === 'telepro') {
+                    setAssignedTeleproFilter('');
+                  }
+                  setCurrentPage(1);
+                }}
+                className="flex-1 cursor-pointer rounded-md bg-indigo-50 px-3 py-1.5 text-center text-xs font-medium text-indigo-700"
+              >
+                Tout cocher
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  if (listFilterModal === 'status') {
+                    setStatusFilter('');
+                  } else if (listFilterModal === 'origin') {
+                    setOriginFilter('');
+                  } else if (listFilterModal === 'commercial') {
+                    setAssignedCommercialFilter('');
+                  } else if (listFilterModal === 'telepro') {
+                    setAssignedTeleproFilter('');
+                  }
+                  setCurrentPage(1);
+                }}
+                className="flex-1 cursor-pointer rounded-md bg-gray-50 px-3 py-1.5 text-center text-xs font-medium text-gray-700"
+              >
+                Tout décocher
+              </button>
+            </div>
+
+            {/* Liste des options */}
+            <div className="max-h-72 space-y-2 overflow-y-auto pt-1">
+              {listFilterModal === 'status' &&
+                statuses.map((status) => {
+                  const checked = statusFilter === status.id;
+                  return (
+                    <button
+                      key={status.id}
+                      type="button"
+                      onClick={() => {
+                        setStatusFilter(checked ? '' : status.id);
+                        setCurrentPage(1);
+                      }}
+                      className="flex w-full cursor-pointer items-center justify-between rounded-md px-2 py-1.5 text-left text-sm hover:bg-gray-50"
+                    >
+                      <div className="flex items-center gap-2">
+                        <span
+                          className="inline-block h-3 w-3 rounded-full"
+                          style={{ backgroundColor: status.color || '#E5E7EB' }}
+                        />
+                        <span className="text-sm text-gray-800">{status.name}</span>
+                      </div>
+                      {checked && <span className="text-indigo-600">✓</span>}
+                    </button>
+                  );
+                })}
+
+              {listFilterModal === 'origin' &&
+                Array.from(
+                  new Set(
+                    contacts
+                      .map((c) => c.origin)
+                      .filter((o): o is string => Boolean(o && o.trim())),
+                  ),
+                ).map((origin) => {
+                  const checked = originFilter === origin;
+                  return (
+                    <button
+                      key={origin}
+                      type="button"
+                      onClick={() => {
+                        setOriginFilter(checked ? '' : origin);
+                        setCurrentPage(1);
+                      }}
+                      className="flex w-full cursor-pointer items-center justify-between rounded-md px-2 py-1.5 text-left text-sm hover:bg-gray-50"
+                    >
+                      <span className="text-sm text-gray-800">{origin}</span>
+                      {checked && <span className="text-indigo-600">✓</span>}
+                    </button>
+                  );
+                })}
+
+              {listFilterModal === 'commercial' &&
+                [
+                  { id: 'unassigned', name: 'NON ATTRIBUÉ' },
+                  ...users
+                    .filter((u) => u.role !== 'USER')
+                    .map((u) => ({ id: u.id, name: u.name || u.email || 'Utilisateur' })),
+                ].map((item) => {
+                  const value = item.id === 'unassigned' ? 'UNASSIGNED' : item.id;
+                  const checked = assignedCommercialFilter === value;
+                  return (
+                    <button
+                      key={item.id}
+                      type="button"
+                      onClick={() => {
+                        setAssignedCommercialFilter(checked ? '' : value);
+                        setCurrentPage(1);
+                      }}
+                      className="flex w-full cursor-pointer items-center justify-between rounded-md px-2 py-1.5 text-left text-sm hover:bg-gray-50"
+                    >
+                      <span className="text-sm text-gray-800">{item.name}</span>
+                      {checked && <span className="text-indigo-600">✓</span>}
+                    </button>
+                  );
+                })}
+
+              {listFilterModal === 'telepro' &&
+                [
+                  { id: 'unassigned', name: 'NON ATTRIBUÉ' },
+                  ...users
+                    .filter((u) => u.role !== 'USER')
+                    .map((u) => ({ id: u.id, name: u.name || u.email || 'Utilisateur' })),
+                ].map((item) => {
+                  const value = item.id === 'unassigned' ? 'UNASSIGNED' : item.id;
+                  const checked = assignedTeleproFilter === value;
+                  return (
+                    <button
+                      key={item.id}
+                      type="button"
+                      onClick={() => {
+                        setAssignedTeleproFilter(checked ? '' : value);
+                        setCurrentPage(1);
+                      }}
+                      className="flex w-full cursor-pointer items-center justify-between rounded-md px-2 py-1.5 text-left text-sm hover:bg-gray-50"
+                    >
+                      <span className="text-sm text-gray-800">{item.name}</span>
+                      {checked && <span className="text-indigo-600">✓</span>}
+                    </button>
+                  );
+                })}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Modal d'export */}
+      {showExportModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm">
+          <div className="w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
+            <div className="mb-4 flex items-center justify-between">
+              <h3 className="text-lg font-semibold text-gray-900">
+                {exportAll
+                  ? 'Exporter tous les contacts'
+                  : `Exporter ${selectedContactIds.size} contact(s)`}
+              </h3>
+              <button
+                onClick={() => {
+                  setShowExportModal(false);
+                  setExportAll(false);
+                }}
+                className="cursor-pointer rounded-lg p-2 text-gray-400 transition-colors hover:bg-gray-100"
+              >
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+
+            <p className="mb-4 text-sm text-gray-600">Choisissez le format d'export :</p>
+
+            <div className="mb-4 space-y-3">
+              <button
+                onClick={() => handleExport('csv')}
+                disabled={exporting}
+                className="flex w-full cursor-pointer items-center justify-between rounded-lg border-2 border-gray-200 bg-white p-4 transition-colors hover:border-indigo-500 hover:bg-indigo-50 disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                <div className="flex items-center gap-3">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-green-100">
+                    <Download className="h-5 w-5 text-green-600" />
+                  </div>
+                  <div className="text-left">
+                    <div className="font-medium text-gray-900">CSV</div>
+                    <div className="text-xs text-gray-500">Format texte séparé par virgules</div>
+                  </div>
+                </div>
+                {exporting && <div className="text-sm text-gray-500">Export en cours...</div>}
+              </button>
+
+              <button
+                onClick={() => handleExport('excel')}
+                disabled={exporting}
+                className="flex w-full cursor-pointer items-center justify-between rounded-lg border-2 border-gray-200 bg-white p-4 transition-colors hover:border-indigo-500 hover:bg-indigo-50 disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                <div className="flex items-center gap-3">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100">
+                    <Download className="h-5 w-5 text-blue-600" />
+                  </div>
+                  <div className="text-left">
+                    <div className="font-medium text-gray-900">Excel</div>
+                    <div className="text-xs text-gray-500">Format Microsoft Excel (.xlsx)</div>
+                  </div>
+                </div>
+                {exporting && <div className="text-sm text-gray-500">Export en cours...</div>}
+              </button>
+            </div>
+
+            <div className="flex justify-end gap-3">
+              <button
+                onClick={() => {
+                  setShowExportModal(false);
+                  setExportAll(false);
+                }}
+                disabled={exporting}
+                className="cursor-pointer rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                Annuler
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}