create-crm-tmp 2.0.0 → 2.1.0

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import { useState, useEffect, useLayoutEffect, useRef, useMemo, useCallback } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useUserRole } from '@/hooks/use-user-role';
 import {
@@ -32,24 +32,31 @@ import {
   Target,
 } from 'lucide-react';
 import { ContactTableSkeleton, ContactCardsSkeleton } from '@/components/skeleton';
-import { cn, normalizePhoneNumber, formatDateTime } from '@/lib/utils';
+import { DatePicker } from '@/components/ui/date-picker';
+import { cn, normalizePhoneNumber, formatDateTime, devToast } from '@/lib/utils';
 import AddressAutocomplete from '@/components/address-autocomplete';
 import { ProtectedPage } from '@/components/protected-page';
 import { useConfirm } from '@/hooks/use-confirm';
-import {
-  getRegionFromPostalCode,
-  getDepartmentFromPostalCode,
-  FRENCH_REGIONS,
-  FRENCH_DEPARTMENTS,
-} from '@/lib/french-regions';
 import { useContactViews } from '@/hooks/use-contact-views';
 import { ViewsTabBar } from '@/components/contacts/views-tab-bar';
 import { FilterBar } from '@/components/contacts/filter-bar';
 import { FilterBuilder } from '@/components/contacts/filter-builder';
 import { SaveViewDialog } from '@/components/contacts/save-view-dialog';
+import { StatusSelect } from '@/components/ui/status-select';
 import type { ViewFilter, ContactViewData } from '@/types/contact-views';
 import { useSession } from '@/lib/auth-client';
 import { useAppToast } from '@/contexts/app-toast-context';
+import {
+  buildContactsListSearchParams,
+  canonicalSearchParamsString,
+  getContactsListUrlSearchParams,
+  contactsListColumnShowsActiveSort,
+  isContactsListDefaultSort,
+  parseContactsListFromSearchParams,
+  readContactsListFromLocationOrParams,
+  setsEqualToIds,
+} from '@/lib/contacts-list-url';
+import { FR_DEPARTMENTS, FR_REGIONS } from '@/lib/fr-geography';
 
 interface Status {
   id: string;
@@ -78,9 +85,12 @@ interface Contact {
   city: string | null;
   postalCode: string | null;
   origin: string | null;
+  companyName: string | null;
   companyId: string | null;
   company: { id: string; name: string } | null;
   jobTitle: string | null;
+  website: string | null;
+  socialNetworks: { platform: string; url: string }[] | null;
   statusId: string | null;
   status: Status | null;
   assignedCommercialId: string | null;
@@ -123,6 +133,18 @@ interface TableColumn {
   order: number;
 }
 
+type ContactsSortField =
+  | ''
+  | 'createdAt'
+  | 'updatedAt'
+  | 'status'
+  | 'commercial'
+  | 'telepro'
+  | 'postalCode'
+  | 'origin'
+  | 'region'
+  | 'department';
+
 const DEFAULT_COLUMNS: TableColumn[] = [
   { id: 'contact', label: 'Contact', visible: true, order: 0 },
   { id: 'phone', label: 'Téléphone', visible: true, order: 1 },
@@ -138,6 +160,9 @@ const DEFAULT_COLUMNS: TableColumn[] = [
   { id: 'updatedAt', label: 'MODIFIÉ LE', visible: true, order: 11 },
 ];
 
+/** Retour depuis une fiche : restaure le scroll du conteneur liste (sans scroll animé vers la ligne). */
+const CONTACTS_LIST_SCROLL_RESTORE_KEY = 'crm-template:contactsListScrollRestore:v1';
+
 const COMPANY_COLUMNS: TableColumn[] = [
   { id: 'companyName', label: 'Nom', visible: true, order: 0 },
   { id: 'phone', label: 'Téléphone', visible: true, order: 1 },
@@ -163,8 +188,7 @@ export default function ContactsPage() {
 
   // --- Entity selector (Contacts / Entreprises) ---
   const [viewEntity, setViewEntity] = useState<'contacts' | 'companies'>(() => {
-    const entity = searchParams.get('entity');
-    return entity === 'companies' ? 'companies' : 'contacts';
+    return readContactsListFromLocationOrParams(searchParams).viewEntity;
   });
   const [showEntitySelector, setShowEntitySelector] = useState(false);
   const entitySelectorRef = useRef<HTMLDivElement>(null);
@@ -457,21 +481,48 @@ export default function ContactsPage() {
   const [defaultOrigin, setDefaultOrigin] = useState('');
 
   // Filtres (multi-sélection via Set)
-  const [search, setSearch] = useState('');
-  const [statusFilter, setStatusFilter] = useState<Set<string>>(new Set());
-  const [originFilter, setOriginFilter] = useState<Set<string>>(new Set());
-  const [assignedCommercialFilter, setAssignedCommercialFilter] = useState<Set<string>>(new Set());
-  const [assignedTeleproFilter, setAssignedTeleproFilter] = useState<Set<string>>(new Set());
-  const [regionFilter, setRegionFilter] = useState<Set<string>>(new Set());
-  const [departmentFilter, setDepartmentFilter] = useState<Set<string>>(new Set());
+  const [search, setSearch] = useState(() => readContactsListFromLocationOrParams(searchParams).search);
+  const [statusFilter, setStatusFilter] = useState<Set<string>>(
+    () => new Set(readContactsListFromLocationOrParams(searchParams).statusIds),
+  );
+  const [originFilter, setOriginFilter] = useState<Set<string>>(
+    () => new Set(readContactsListFromLocationOrParams(searchParams).origins),
+  );
+  const [assignedCommercialFilter, setAssignedCommercialFilter] = useState<Set<string>>(
+    () => new Set(readContactsListFromLocationOrParams(searchParams).assignedCommercialIds),
+  );
+  const [assignedTeleproFilter, setAssignedTeleproFilter] = useState<Set<string>>(
+    () => new Set(readContactsListFromLocationOrParams(searchParams).assignedTeleproIds),
+  );
+  const [regionFilter, setRegionFilter] = useState<Set<string>>(
+    () => new Set(readContactsListFromLocationOrParams(searchParams).regionCodes),
+  );
+  const [departmentFilter, setDepartmentFilter] = useState<Set<string>>(
+    () => new Set(readContactsListFromLocationOrParams(searchParams).departmentCodes),
+  );
+
+  const [allOrigins, setAllOrigins] = useState<string[]>([]);
+  useEffect(() => {
+    if (viewEntity !== 'contacts') return;
+    let cancelled = false;
+    fetch('/api/contacts/origins')
+      .then((r) => (r.ok ? r.json() : { origins: [] }))
+      .then((d) => {
+        if (!cancelled && Array.isArray(d.origins)) setAllOrigins(d.origins);
+      })
+      .catch(() => {
+        if (!cancelled) setAllOrigins([]);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [viewEntity]);
 
   const originOptions = useMemo(() => {
-    const origins = new Set<string>();
-    for (const c of contacts) {
-      if (c.origin) origins.add(c.origin);
-    }
-    return Array.from(origins).sort();
-  }, [contacts]);
+    const s = new Set(allOrigins);
+    originFilter.forEach((o) => s.add(o));
+    return [...s].sort((a, b) => a.localeCompare(b, 'fr'));
+  }, [allOrigins, originFilter]);
 
   useEffect(() => {
     if (!success) return;
@@ -516,39 +567,58 @@ export default function ContactsPage() {
     top: number;
     left: number;
   } | null>(null);
-  const [createdAtStart, setCreatedAtStart] = useState('');
-  const [createdAtEnd, setCreatedAtEnd] = useState('');
-  const [updatedAtStart, setUpdatedAtStart] = useState('');
-  const [updatedAtEnd, setUpdatedAtEnd] = useState('');
+  const [createdAtStart, setCreatedAtStart] = useState(
+    () => readContactsListFromLocationOrParams(searchParams).createdAtStart,
+  );
+  const [createdAtEnd, setCreatedAtEnd] = useState(
+    () => readContactsListFromLocationOrParams(searchParams).createdAtEnd,
+  );
+  const [updatedAtStart, setUpdatedAtStart] = useState(
+    () => readContactsListFromLocationOrParams(searchParams).updatedAtStart,
+  );
+  const [updatedAtEnd, setUpdatedAtEnd] = useState(
+    () => readContactsListFromLocationOrParams(searchParams).updatedAtEnd,
+  );
 
   // Tri
-  const [sortField, setSortField] = useState<
-    | ''
-    | 'createdAt'
-    | 'updatedAt'
-    | 'status'
-    | 'commercial'
-    | 'telepro'
-    | 'postalCode'
-    | 'region'
-    | 'department'
-  >('');
-  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
+  const [sortField, setSortField] = useState<ContactsSortField>(() => {
+    const raw = readContactsListFromLocationOrParams(searchParams).sortField || 'createdAt';
+    const allowed: ContactsSortField[] = [
+      '',
+      'createdAt',
+      'updatedAt',
+      'status',
+      'commercial',
+      'telepro',
+      'postalCode',
+      'origin',
+      'region',
+      'department',
+    ];
+    return (allowed.includes(raw as ContactsSortField) ? raw : 'createdAt') as ContactsSortField;
+  });
+  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>(
+    () => readContactsListFromLocationOrParams(searchParams).sortOrder,
+  );
   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);
+  const listScrollContainerRef = useRef<HTMLDivElement | null>(null);
 
-  // Pagination
-  const [currentPage, setCurrentPage] = useState(1);
+  // Pagination (initialisée depuis window.location pour conserver la page au retour depuis une fiche contact)
+  const VALID_LIMITS = [25, 50, 100] as const;
+  const [currentPage, setCurrentPage] = useState(
+    () => readContactsListFromLocationOrParams(searchParams).currentPage,
+  );
   const [totalPages, setTotalPages] = useState(1);
   const [totalContacts, setTotalContacts] = useState(0);
-  const [limit, setLimit] = useState(25);
+  const [limit, setLimit] = useState(() => readContactsListFromLocationOrParams(searchParams).limit);
 
   // Entreprises state
   const [companies, setCompanies] = useState<CompanyItem[]>([]);
+  /** Évite d’appliquer une réponse réseau plus lente après une requête plus récente (liste qui « recule »). */
+  const listFetchGenerationRef = useRef(0);
   const [allCompanies, setAllCompanies] = useState<{ id: string; name: string }[]>([]);
   const [showCompanyModal, setShowCompanyModal] = useState(false);
   const [editingCompany, setEditingCompany] = useState<CompanyItem | null>(null);
@@ -567,9 +637,11 @@ export default function ContactsPage() {
     assignedTeleproId: '',
   });
 
-  // Vue (table ou cards) - Persistée dans localStorage
-  // Initialiser avec 'table' pour éviter l'erreur d'hydratation
-  const [viewMode, setViewMode] = useState<'table' | 'cards'>('table');
+  // Vue (table ou cards) - Initialisée depuis window.location puis localStorage pour restaurer au retour
+  const [viewMode, setViewMode] = useState<'table' | 'cards'>(() => {
+    const v = readContactsListFromLocationOrParams(searchParams).viewMode;
+    return v === 'cards' || v === 'table' ? v : 'table';
+  });
 
   // Gestion des colonnes du tableau (avec récupération initiale depuis localStorage)
   const [tableColumns, setTableColumns] = useState<TableColumn[]>(() => {
@@ -652,19 +724,36 @@ export default function ContactsPage() {
   const [showExportModal, setShowExportModal] = useState(false);
   const [exporting, setExporting] = useState(false);
   const [exportAll, setExportAll] = useState(false);
-  const hasTriggeredGoogleSheetSyncRef = useRef(false);
+  /** True pendant l’application de l’URL (retour navigateur) : évite replace + reset page intempestifs */
+  const hydratingFromContactsUrlRef = useRef(false);
+  const lastContactsListUrlCanonRef = useRef<string | null>(null);
+  /** Incrémenté sur popstate pour relancer l’hydratation si useSearchParams() tarde. */
+  const [contactsUrlHistoryTick, setContactsUrlHistoryTick] = useState(0);
 
-  // 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 onPopState = () => {
+      lastContactsListUrlCanonRef.current = null;
+      setContactsUrlHistoryTick((t) => t + 1);
+    };
+    globalThis.window?.addEventListener('popstate', onPopState);
+    return () => globalThis.window?.removeEventListener('popstate', onPopState);
+  }, []);
 
-    const savedLimit = localStorage.getItem('contactsPageLimit');
-    if (savedLimit && ['25', '50', '100'].includes(savedLimit)) {
-      setLimit(parseInt(savedLimit, 10));
+  // Charger les préférences depuis localStorage au premier montage (sans écraser si l'URL a déjà page/limit/view au retour)
+  useEffect(() => {
+    const urlView = searchParams.get('view');
+    const urlLimit = searchParams.get('limit');
+    if (!urlView && typeof window !== 'undefined') {
+      const savedView = localStorage.getItem('contactsViewMode');
+      if (savedView === 'cards' || savedView === 'table') setViewMode(savedView);
     }
+    if (!urlLimit && typeof window !== 'undefined') {
+      const savedLimit = localStorage.getItem('contactsPageLimit');
+      if (savedLimit && ['25', '50', '100'].includes(savedLimit)) {
+        setLimit(Number.parseInt(savedLimit, 10));
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- uniquement au montage pour ne pas écraser l'URL au retour
   }, []);
 
   // Formulaire
@@ -681,32 +770,14 @@ export default function ContactsPage() {
     origin: '',
     companyId: '',
     jobTitle: '',
+    website: '',
+    socialNetworks: [] as { platform: string; url: string }[],
     statusId: '',
     closingReason: '',
     assignedCommercialId: '',
     assignedTeleproId: '',
   });
 
-  // Synchronisation automatique Google Sheets
-  useEffect(() => {
-    if (hasTriggeredGoogleSheetSyncRef.current) {
-      return;
-    }
-    hasTriggeredGoogleSheetSyncRef.current = true;
-
-    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 () => {
@@ -761,6 +832,7 @@ export default function ContactsPage() {
   }, [groupContactInfo]);
 
   const fetchContacts = async () => {
+    const fetchGen = ++listFetchGenerationRef.current;
     try {
       setLoading(true);
       setSelectedContactIds(new Set());
@@ -783,12 +855,30 @@ export default function ContactsPage() {
       if (createdAtEnd) params.append('createdAtEnd', createdAtEnd);
       if (updatedAtStart) params.append('updatedAtStart', updatedAtStart);
       if (updatedAtEnd) params.append('updatedAtEnd', updatedAtEnd);
+      if (regionFilter.size > 0) {
+        params.append('regionCodes', Array.from(regionFilter).join(','));
+      }
+      if (departmentFilter.size > 0) {
+        params.append('departmentCodes', Array.from(departmentFilter).join(','));
+      }
+      if (sortField) {
+        params.append('sortField', sortField);
+        params.append('sortDir', sortOrder);
+      }
       params.append('page', currentPage.toString());
       params.append('limit', limit.toString());
 
-      const response = await fetch(`/api/contacts?${params.toString()}`);
+      const response = await fetch(`/api/contacts?${params.toString()}`, {
+        cache: 'no-store',
+      });
+      if (fetchGen !== listFetchGenerationRef.current) {
+        return;
+      }
       if (response.ok) {
         const data = await response.json();
+        if (fetchGen !== listFetchGenerationRef.current) {
+          return;
+        }
         setContacts(data.contacts || []);
         if (data.pagination) {
           setTotalPages(data.pagination.totalPages);
@@ -799,13 +889,18 @@ export default function ContactsPage() {
       }
     } catch (error) {
       console.error('Erreur:', error);
-      setError('Erreur lors du chargement des contacts');
+      if (fetchGen === listFetchGenerationRef.current) {
+        setError(devToast('Erreur lors du chargement des contacts', error));
+      }
     } finally {
-      setLoading(false);
+      if (fetchGen === listFetchGenerationRef.current) {
+        setLoading(false);
+      }
     }
   };
 
   const fetchCompanies = async () => {
+    const fetchGen = ++listFetchGenerationRef.current;
     try {
       setLoading(true);
       setSelectedContactIds(new Set());
@@ -814,9 +909,17 @@ export default function ContactsPage() {
       params.append('page', currentPage.toString());
       params.append('limit', limit.toString());
 
-      const response = await fetch(`/api/companies?${params.toString()}`);
+      const response = await fetch(`/api/companies?${params.toString()}`, {
+        cache: 'no-store',
+      });
+      if (fetchGen !== listFetchGenerationRef.current) {
+        return;
+      }
       if (response.ok) {
         const data = await response.json();
+        if (fetchGen !== listFetchGenerationRef.current) {
+          return;
+        }
         setCompanies(data.companies || []);
         if (data.pagination) {
           setTotalPages(data.pagination.totalPages);
@@ -827,12 +930,37 @@ export default function ContactsPage() {
       }
     } catch (error) {
       console.error('Erreur:', error);
-      setError('Erreur lors du chargement des entreprises');
+      if (fetchGen === listFetchGenerationRef.current) {
+        setError(devToast('Erreur lors du chargement des entreprises', error));
+      }
     } finally {
-      setLoading(false);
+      if (fetchGen === listFetchGenerationRef.current) {
+        setLoading(false);
+      }
+    }
+  };
+
+  /** Dernière fonction de rechargement liste (évite une closure périmée dans pageshow). */
+  const reloadContactsOrCompaniesRef = useRef<() => void>(() => {});
+  reloadContactsOrCompaniesRef.current = () => {
+    if (viewEntity === 'companies') {
+      void fetchCompanies();
+    } else {
+      void fetchContacts();
     }
   };
 
+  // Retour arrière / bfcache : la page peut être restaurée avec l’ancien state React sans remonter les effets.
+  useEffect(() => {
+    const onPageShow = (e: PageTransitionEvent) => {
+      if (e.persisted) {
+        reloadContactsOrCompaniesRef.current();
+      }
+    };
+    window.addEventListener('pageshow', onPageShow);
+    return () => window.removeEventListener('pageshow', onPageShow);
+  }, []);
+
   const fetchAllCompanies = async () => {
     try {
       const res = await fetch('/api/companies?all=true');
@@ -858,7 +986,10 @@ export default function ContactsPage() {
       setFormData((prev) => ({ ...prev, companyId: companyIdParam }));
       setShowModal(true);
       setEditingContact(null);
-      router.replace('/contacts', { scroll: false });
+      const p = new URLSearchParams(searchParams.toString());
+      p.delete('companyId');
+      const qs = p.toString();
+      router.replace(qs ? `/contacts?${qs}` : '/contacts', { scroll: false });
     } else if (editCompanyParam) {
       setViewEntity('companies');
       fetch(`/api/companies/${editCompanyParam}`)
@@ -882,19 +1013,39 @@ export default function ContactsPage() {
             setEditingCompany(data);
             setShowCompanyModal(true);
           }
-          router.replace('/contacts?entity=companies', { scroll: false });
+          const p = new URLSearchParams(searchParams.toString());
+          p.set('entity', 'companies');
+          p.delete('editCompany');
+          router.replace(`/contacts?${p.toString()}`, { scroll: false });
         });
     }
   }, [searchParams, router]);
 
-  // Réinitialiser à la page 1 quand les filtres ou le limit changent
+  // Réinitialiser à la page 1 quand les filtres ou le limit changent (mais pas au premier montage)
+  const filtersInitializedRef = useRef(false);
   useEffect(() => {
+    if (!filtersInitializedRef.current) {
+      filtersInitializedRef.current = true;
+      return;
+    }
+    if (hydratingFromContactsUrlRef.current) {
+      return;
+    }
+    // Au retour navigateur depuis une fiche contact, conserver la page de l'URL
+    // tant que la restauration du scroll liste n'a pas encore été consommée.
+    if (
+      typeof window !== 'undefined' &&
+      window.sessionStorage.getItem(CONTACTS_LIST_SCROLL_RESTORE_KEY)
+    ) {
+      return;
+    }
     if (currentPage !== 1) {
       setCurrentPage(1);
     }
   }, [
     search,
     statusFilter,
+    originFilter,
     assignedCommercialFilter,
     assignedTeleproFilter,
     createdAtStart,
@@ -904,8 +1055,136 @@ export default function ContactsPage() {
     limit,
     viewFilters,
     viewEntity,
+    regionFilter,
+    departmentFilter,
   ]);
 
+  // Hydratation depuis l’URL en useLayoutEffect : le state doit être à jour AVANT les useEffect
+  // (sinon l’effet d’écriture d’URL voit encore filtres vides et écrase statusIds au retour arrière).
+  useLayoutEffect(() => {
+    const sp = getContactsListUrlSearchParams(searchParams);
+    const canon = canonicalSearchParamsString(sp);
+    if (lastContactsListUrlCanonRef.current === canon) {
+      return;
+    }
+    lastContactsListUrlCanonRef.current = canon;
+
+    hydratingFromContactsUrlRef.current = true;
+    try {
+      const p = parseContactsListFromSearchParams(sp);
+
+      setViewEntity((prev) => (prev === p.viewEntity ? prev : p.viewEntity));
+      setCurrentPage((prev) => (prev === p.currentPage ? prev : p.currentPage));
+      setLimit((prev) => (prev === p.limit ? prev : p.limit));
+      setViewMode((prev) => (prev === p.viewMode ? prev : p.viewMode));
+      setSearch((prev) => (prev === p.search ? prev : p.search));
+      setStatusFilter((prev) =>
+        setsEqualToIds(prev, p.statusIds) ? prev : new Set(p.statusIds),
+      );
+      setOriginFilter((prev) => (setsEqualToIds(prev, p.origins) ? prev : new Set(p.origins)));
+      setAssignedCommercialFilter((prev) =>
+        setsEqualToIds(prev, p.assignedCommercialIds) ? prev : new Set(p.assignedCommercialIds),
+      );
+      setAssignedTeleproFilter((prev) =>
+        setsEqualToIds(prev, p.assignedTeleproIds) ? prev : new Set(p.assignedTeleproIds),
+      );
+      setRegionFilter((prev) =>
+        setsEqualToIds(prev, p.regionCodes) ? prev : new Set(p.regionCodes),
+      );
+      setDepartmentFilter((prev) =>
+        setsEqualToIds(prev, p.departmentCodes) ? prev : new Set(p.departmentCodes),
+      );
+      setCreatedAtStart((prev) => (prev === p.createdAtStart ? prev : p.createdAtStart));
+      setCreatedAtEnd((prev) => (prev === p.createdAtEnd ? prev : p.createdAtEnd));
+      setUpdatedAtStart((prev) => (prev === p.updatedAtStart ? prev : p.updatedAtStart));
+      setUpdatedAtEnd((prev) => (prev === p.updatedAtEnd ? prev : p.updatedAtEnd));
+      setSortField((prev) => {
+        const next = (p.sortField || 'createdAt') as typeof prev;
+        return prev === next ? prev : next;
+      });
+      setSortOrder((prev) => (prev === p.sortOrder ? prev : p.sortOrder));
+    } finally {
+      hydratingFromContactsUrlRef.current = false;
+    }
+  }, [searchParams, contactsUrlHistoryTick]);
+
+  // Écrit l’état liste dans l’URL pour que « Retour » depuis une fiche contact restaure filtres + page
+  const desiredContactsListCanon = useMemo(
+    () =>
+      canonicalSearchParamsString(
+        buildContactsListSearchParams({
+          viewEntity,
+          currentPage,
+          limit,
+          viewMode,
+          search,
+          statusFilter,
+          originFilter,
+          assignedCommercialFilter,
+          assignedTeleproFilter,
+          createdAtStart,
+          createdAtEnd,
+          updatedAtStart,
+          updatedAtEnd,
+          regionFilter,
+          departmentFilter,
+          sortField,
+          sortOrder,
+        }),
+      ),
+    [
+      viewEntity,
+      currentPage,
+      limit,
+      viewMode,
+      search,
+      statusFilter,
+      originFilter,
+      assignedCommercialFilter,
+      assignedTeleproFilter,
+      createdAtStart,
+      createdAtEnd,
+      updatedAtStart,
+      updatedAtEnd,
+      regionFilter,
+      departmentFilter,
+      sortField,
+      sortOrder,
+    ],
+  );
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    if (hydratingFromContactsUrlRef.current) {
+      return;
+    }
+    const cur = canonicalSearchParamsString(new URLSearchParams(window.location.search));
+    if (desiredContactsListCanon === cur) {
+      lastContactsListUrlCanonRef.current = cur;
+      return;
+    }
+    const p = buildContactsListSearchParams({
+      viewEntity,
+      currentPage,
+      limit,
+      viewMode,
+      search,
+      statusFilter,
+      originFilter,
+      assignedCommercialFilter,
+      assignedTeleproFilter,
+      createdAtStart,
+      createdAtEnd,
+      updatedAtStart,
+      updatedAtEnd,
+      regionFilter,
+      departmentFilter,
+      sortField,
+      sortOrder,
+    });
+    router.replace(`/contacts?${p.toString()}`, { scroll: false });
+  }, [desiredContactsListCanon, router, viewEntity, currentPage, limit, viewMode, search, statusFilter, originFilter, assignedCommercialFilter, assignedTeleproFilter, createdAtStart, createdAtEnd, updatedAtStart, updatedAtEnd, regionFilter, departmentFilter, sortField, sortOrder]);
+
   // Charger les contacts ou entreprises selon le mode
   useEffect(() => {
     if (viewEntity === 'companies') {
@@ -927,8 +1206,66 @@ export default function ContactsPage() {
     limit,
     viewFilters,
     viewEntity,
+    sortField,
+    sortOrder,
+    regionFilter,
+    departmentFilter,
   ]);
 
+  const navigateToContactDetail = useCallback(
+    (contactId: string) => {
+      try {
+        sessionStorage.setItem(
+          CONTACTS_LIST_SCROLL_RESTORE_KEY,
+          JSON.stringify({
+            scrollTop: listScrollContainerRef.current?.scrollTop ?? 0,
+          }),
+        );
+      } catch {
+        /* ignore */
+      }
+      router.push(`/contacts/${contactId}`);
+    },
+    [router],
+  );
+
+  // Au retour depuis une fiche contact : réappliquer le scroll du conteneur (pas d’animation)
+  useLayoutEffect(() => {
+    if (viewEntity !== 'contacts') return;
+    if (loading) return;
+    if (contacts.length === 0) return;
+
+    let raw: string | null = null;
+    try {
+      raw = sessionStorage.getItem(CONTACTS_LIST_SCROLL_RESTORE_KEY);
+    } catch {
+      return;
+    }
+    if (!raw) return;
+
+    let data: { scrollTop?: number };
+    try {
+      data = JSON.parse(raw) as { scrollTop?: number };
+    } catch {
+      sessionStorage.removeItem(CONTACTS_LIST_SCROLL_RESTORE_KEY);
+      return;
+    }
+
+    sessionStorage.removeItem(CONTACTS_LIST_SCROLL_RESTORE_KEY);
+
+    const runRestore = () => {
+      const container = listScrollContainerRef.current;
+      if (!container) return;
+      if (typeof data.scrollTop === 'number' && data.scrollTop >= 0) {
+        container.scrollTop = data.scrollTop;
+      }
+    };
+
+    requestAnimationFrame(() => {
+      requestAnimationFrame(runRestore);
+    });
+  }, [loading, viewEntity, contacts]);
+
   // Fermer la modal de filtre de date au clic en dehors
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -1030,7 +1367,7 @@ export default function ContactsPage() {
       const isLostStatus = selectedStatus?.requiresClosingReason === true;
 
       if (isLostStatus && !formData.closingReason) {
-        setError('Veuillez renseigner le motif de fermeture pour ce statut.');
+        toast.warning('Veuillez renseigner le motif de fermeture pour ce statut.');
         return;
       }
 
@@ -1070,6 +1407,8 @@ export default function ContactsPage() {
         origin: '',
         companyId: '',
         jobTitle: '',
+        website: '',
+        socialNetworks: [],
         statusId: '',
         closingReason: '',
         assignedCommercialId: '',
@@ -1079,7 +1418,7 @@ export default function ContactsPage() {
 
       setTimeout(() => setSuccess(''), 5000);
     } catch (err: any) {
-      setError(err.message);
+      setError(devToast("Erreur lors de l'enregistrement du contact", err));
     }
   };
 
@@ -1123,7 +1462,7 @@ export default function ContactsPage() {
 
       setTimeout(() => setSuccess(''), 5000);
     } catch (err: any) {
-      setError(err.message);
+      setError(devToast("Erreur lors de l'enregistrement de l'entreprise", err));
     }
   };
 
@@ -1149,6 +1488,7 @@ export default function ContactsPage() {
       | 'createdAt'
       | 'updatedAt'
       | 'postalCode'
+      | 'origin'
       | 'region'
       | 'department'
       | '',
@@ -1216,12 +1556,6 @@ export default function ContactsPage() {
     }
   };
 
-  const handleApplyDateFilter = () => {
-    setDateFilterModal(null);
-    setDateFilterPosition(null);
-    setCurrentPage(1);
-  };
-
   const handleClearDateFilter = (type: 'createdAt' | 'updatedAt') => {
     if (type === 'createdAt') {
       setCreatedAtStart('');
@@ -1249,7 +1583,7 @@ export default function ContactsPage() {
       !!createdAtEnd ||
       !!updatedAtStart ||
       !!updatedAtEnd ||
-      !!sortField
+      !isContactsListDefaultSort(sortField, sortOrder)
     );
   };
 
@@ -1266,90 +1600,28 @@ export default function ContactsPage() {
     setCreatedAtEnd('');
     setUpdatedAtStart('');
     setUpdatedAtEnd('');
-    setSortField('');
-    setSortOrder('asc');
+    setSortField('createdAt');
+    setSortOrder('desc');
     setCurrentPage(1);
     setListFilterModal(null);
     setDateFilterModal(null);
     setDateFilterPosition(null);
     setListFilterPosition(null);
+    lastContactsListUrlCanonRef.current = null;
   };
 
-  const contactGeoLookup = useMemo(() => {
-    const lookup = new Map<
-      string,
-      { region: string; regionCode: string; department: string; departmentCode: string }
-    >();
-    for (const c of contacts) {
-      if (c.postalCode) {
-        const region = getRegionFromPostalCode(c.postalCode);
-        const dept = getDepartmentFromPostalCode(c.postalCode);
-        lookup.set(c.id, {
-          region: region?.name || '',
-          regionCode: region?.code || '',
-          department: dept?.name || '',
-          departmentCode: dept?.code || '',
-        });
-      }
-    }
-    return lookup;
-  }, [contacts]);
-
-  const filteredByGeoContacts = useMemo(() => {
-    if (regionFilter.size === 0 && departmentFilter.size === 0) return contacts;
-    return contacts.filter((c) => {
-      const geo = contactGeoLookup.get(c.id);
-      if (regionFilter.size > 0 && !regionFilter.has(geo?.regionCode || '')) return false;
-      if (departmentFilter.size > 0 && !departmentFilter.has(geo?.departmentCode || ''))
-        return false;
-      return true;
-    });
-  }, [contacts, regionFilter, departmentFilter, contactGeoLookup]);
-
-  const sortedContacts = useMemo(() => {
-    if (!sortField) return filteredByGeoContacts;
-    const sorted = [...filteredByGeoContacts].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 if (sortField === 'postalCode') {
-        aValue = a.postalCode || '';
-        bValue = b.postalCode || '';
-      } else if (sortField === 'region') {
-        aValue = contactGeoLookup.get(a.id)?.region || '';
-        bValue = contactGeoLookup.get(b.id)?.region || '';
-      } else if (sortField === 'department') {
-        aValue = contactGeoLookup.get(a.id)?.department || '';
-        bValue = contactGeoLookup.get(b.id)?.department || '';
-      } else {
-        return 0;
-      }
+  const filteredByGeoContacts = contacts;
 
-      if (aValue < bValue) return sortOrder === 'asc' ? -1 : 1;
-      if (aValue > bValue) return sortOrder === 'asc' ? 1 : -1;
-      return 0;
-    });
-    return sorted;
-  }, [filteredByGeoContacts, sortField, sortOrder, contactGeoLookup]);
+  // Tri global : orderBy côté API (fetchContacts). Pas de re-tri client sur la page courante.
+  const sortedContacts = filteredByGeoContacts;
 
-  const filteredDepartmentsForFilter = useMemo(() => {
-    if (regionFilter.size === 0) return FRENCH_DEPARTMENTS;
-    return FRENCH_DEPARTMENTS.filter((d) => regionFilter.has(d.regionCode));
-  }, [regionFilter]);
+  // Source d'affichage pour la pagination : toujours dériver depuis l'URL (searchParams)
+  // pour éviter tout décalage avec le state.
+  const uiCurrentPage = useMemo(() => {
+    const raw = searchParams.get('page');
+    const fromUrl = Number.parseInt(raw || '1', 10);
+    return Number.isFinite(fromUrl) && fromUrl >= 1 ? fromUrl : 1;
+  }, [searchParams]);
 
   const handleNewContact = () => {
     setEditingContact(null);
@@ -1366,6 +1638,8 @@ export default function ContactsPage() {
       origin: '',
       companyId: '',
       jobTitle: '',
+      website: '',
+      socialNetworks: [],
       statusId: '',
       closingReason: '',
       assignedCommercialId: '',
@@ -1429,6 +1703,47 @@ export default function ContactsPage() {
       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'],
+      companyName: [
+        'société',
+        'societe',
+        'company',
+        'company name',
+        'company_name',
+        'company-name',
+        'companyname',
+        'organisation',
+        'organization',
+        'organisme',
+        'org',
+        'org name',
+        'org_name',
+        'org-name',
+        'business',
+        'business name',
+        'business_name',
+        'entreprise',
+        'nom entreprise',
+        'nom société',
+      ],
+      website: [
+        'site',
+        'site web',
+        'website',
+        'url',
+        'web',
+        'site internet',
+      ],
+      linkedin: ['linkedin', 'linkedin url', 'linkedin profile', 'linkedin profil', 'linkedin.com'],
+      facebook: ['facebook', 'facebook url', 'fb', 'facebook profile', 'facebook profil'],
+      twitter: ['twitter', 'twitter url', 'x', 'x.com', 'twitter profile', 'twitter profil'],
+      instagram: [
+        'instagram',
+        'instagram url',
+        'insta',
+        'instagram profile',
+        'instagram profil',
+        'instagram.com',
+      ],
     };
 
     headers.forEach((header) => {
@@ -1503,9 +1818,7 @@ export default function ContactsPage() {
       const autoMappings = autoMapHeaders(headers);
       setImportFieldMappings(autoMappings);
     } catch (err: unknown) {
-      setError(
-        `Erreur lors de la lecture du fichier: ${err instanceof Error ? err.message : 'Erreur inconnue'}`,
-      );
+      setError(devToast('Erreur lors de la lecture du fichier', err));
     }
   };
 
@@ -1532,7 +1845,7 @@ export default function ContactsPage() {
       const autoMappings = autoMapHeaders(data.headers || []);
       setImportFieldMappings(autoMappings);
     } catch (err: unknown) {
-      setError(`Erreur: ${err instanceof Error ? err.message : 'Erreur inconnue'}`);
+      setError(devToast('Erreur lors de la lecture de la feuille', err));
     }
   };
 
@@ -1558,7 +1871,7 @@ export default function ContactsPage() {
       const autoMappings = autoMapHeaders(data.headers || []);
       setImportFieldMappings(autoMappings);
     } catch (err: unknown) {
-      setError(`Erreur: ${err instanceof Error ? err.message : 'Erreur inconnue'}`);
+      setError(devToast('Erreur lors de la lecture', err));
     }
   };
 
@@ -1634,7 +1947,7 @@ export default function ContactsPage() {
       // Afficher la modal de résultats
       setShowImportResultModal(true);
     } catch (err: any) {
-      setError(err.message);
+      setError(devToast("Erreur lors de l'import", err));
     } finally {
       setImporting(false);
     }
@@ -1745,13 +2058,14 @@ export default function ContactsPage() {
       await Promise.all(updatePromises);
 
       setSuccess(`${selectedContactIds.size} contact(s) mis à jour avec succès !`);
+      toast.success('Commercial mis à jour pour ' + selectedContactIds.size + ' contact(s)');
       setShowBulkCommercialModal(false);
       setBulkCommercialId('');
       setSelectedContactIds(new Set());
       fetchContacts();
       setTimeout(() => setSuccess(''), 5000);
     } catch (err: any) {
-      setError(err.message || 'Erreur lors de la mise à jour');
+      setError(devToast('Erreur lors de la mise à jour du commercial', err));
     } finally {
       setBulkActionLoading(false);
     }
@@ -1787,13 +2101,14 @@ export default function ContactsPage() {
       await Promise.all(updatePromises);
 
       setSuccess(`${selectedContactIds.size} contact(s) mis à jour avec succès !`);
+      toast.success('Téléprospecteur mis à jour pour ' + selectedContactIds.size + ' contact(s)');
       setShowBulkTeleproModal(false);
       setBulkTeleproId('');
       setSelectedContactIds(new Set());
       fetchContacts();
       setTimeout(() => setSuccess(''), 5000);
     } catch (err: any) {
-      setError(err.message || 'Erreur lors de la mise à jour');
+      setError(devToast('Erreur lors de la mise à jour du télépro', err));
     } finally {
       setBulkActionLoading(false);
     }
@@ -1829,13 +2144,14 @@ export default function ContactsPage() {
       await Promise.all(updatePromises);
 
       setSuccess(`${selectedContactIds.size} contact(s) mis à jour avec succès !`);
+      toast.success('Statut mis à jour pour ' + selectedContactIds.size + ' contact(s)');
       setShowBulkStatusModal(false);
       setBulkStatusId('');
       setSelectedContactIds(new Set());
       fetchContacts();
       setTimeout(() => setSuccess(''), 5000);
     } catch (err: any) {
-      setError(err.message || 'Erreur lors de la mise à jour');
+      setError(devToast('Erreur lors de la mise à jour du statut', err));
     } finally {
       setBulkActionLoading(false);
     }
@@ -1881,11 +2197,12 @@ export default function ContactsPage() {
       await Promise.all(deletePromises);
 
       setSuccess(`${selectedContactIds.size} contact(s) supprimé(s) avec succès !`);
+      toast.success(selectedContactIds.size + ' contact(s) supprimé(s)');
       setSelectedContactIds(new Set());
       fetchContacts();
       setTimeout(() => setSuccess(''), 5000);
     } catch (err: any) {
-      setError(err.message || 'Erreur lors de la suppression');
+      setError(devToast('Erreur lors de la suppression', err));
     } finally {
       setBulkActionLoading(false);
     }
@@ -1936,13 +2253,14 @@ export default function ContactsPage() {
             ? `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 !`,
       );
+      toast.success('Export terminé');
       setShowExportModal(false);
       if (!isCompanies && !exportAll) {
         setSelectedContactIds(new Set());
       }
       setTimeout(() => setSuccess(''), 5000);
     } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : "Erreur lors de l'export");
+      setError(devToast("Erreur lors de l'export", err));
     } finally {
       setExporting(false);
     }
@@ -2013,10 +2331,10 @@ export default function ContactsPage() {
                     )}
                   </>
                 )}
-                {contact.company && (
+                {(contact.company || 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.company.name}
+                    {contact.company ? contact.company.name : contact.companyName}
                   </div>
                 )}
                 {contact.city && (
@@ -2117,30 +2435,6 @@ export default function ContactsPage() {
             )}
           </td>
         );
-      case 'region': {
-        const geo = contactGeoLookup.get(contact.id);
-        return (
-          <td key={contactId} className="px-3 py-4 text-base whitespace-nowrap sm:px-6">
-            {geo?.region ? (
-              <span className="text-gray-700">{geo.region}</span>
-            ) : (
-              <span className="text-gray-400">-</span>
-            )}
-          </td>
-        );
-      }
-      case 'department': {
-        const geo = contactGeoLookup.get(contact.id);
-        return (
-          <td key={contactId} className="px-3 py-4 text-base whitespace-nowrap sm:px-6">
-            {geo?.department ? (
-              <span className="text-gray-700">{geo.department}</span>
-            ) : (
-              <span className="text-gray-400">-</span>
-            )}
-          </td>
-        );
-      }
       case 'createdAt':
         return (
           <td
@@ -2174,83 +2468,73 @@ export default function ContactsPage() {
       ]}
     >
       <div className="kb-tab-scope bg-surface-page flex h-full flex-col">
-        {/* Titre et vues unifiés (z-50 quand un dropdown vues ou le menu contextuel est ouvert pour passer au-dessus de la barre de recherche et du tableau) */}
+        {/* Ligne 1 : Titre + Onglets + Actualiser */}
         <div
           className={cn(
-            'bg-background/95 backdrop-blur-sm',
-            (viewsDropdownOpen || viewsContextMenuOpen) && 'relative z-50',
+            'border-border bg-background/95 flex min-w-0 items-center gap-2 border-b backdrop-blur-sm px-4 py-1.5 sm:px-6 lg:px-8',
+            (viewsDropdownOpen || viewsContextMenuOpen || showEntitySelector) && 'relative z-50',
           )}
         >
-          <div className="flex items-center justify-between gap-3 px-4 py-2 sm:px-6 lg:px-8">
-            <div className="flex min-w-0 flex-1 items-center gap-2 sm:gap-3">
-              <div className="relative" ref={entitySelectorRef}>
+          <div className="relative flex shrink-0 items-center gap-2" ref={entitySelectorRef}>
+            <button
+              onClick={() => setShowEntitySelector(!showEntitySelector)}
+              className="border-border bg-card text-foreground hover:bg-muted focus-visible:ring-primary flex cursor-pointer items-center gap-1.5 rounded-lg border px-2.5 py-1 text-base font-bold transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none sm:px-3 sm:py-1.5 sm:text-lg"
+            >
+              {viewEntity === 'contacts' ? (
+                <Users className="h-4 w-4 text-blue-600" />
+              ) : (
+                <Building2 className="h-4 w-4 text-blue-600" />
+              )}
+              {viewEntity === 'contacts' ? 'Contacts' : 'Entreprises'}
+              <ChevronDown className="text-muted-foreground h-4 w-4" />
+            </button>
+            {showEntitySelector && (
+              <div className="border-border bg-popover ui-dropdown-enter absolute top-full left-0 z-50 mt-1 w-52 rounded-lg border py-1 shadow-(--shadow-dropdown)">
                 <button
-                  onClick={() => setShowEntitySelector(!showEntitySelector)}
-                  className="flex cursor-pointer items-center gap-1.5 rounded-lg border border-border bg-card px-3 py-1.5 text-lg font-bold text-foreground transition-colors duration-200 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 sm:text-xl"
+                  onClick={() => {
+                    setViewEntity('contacts');
+                    setSortField('createdAt');
+                    setSortOrder('desc');
+                    setShowEntitySelector(false);
+                    setCurrentPage(1);
+                  }}
+                  className={cn(
+                    'focus-visible:ring-primary/40 flex w-full cursor-pointer items-center gap-2.5 px-3 py-2 text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset',
+                    viewEntity === 'contacts'
+                      ? 'bg-blue-50 font-medium text-blue-700'
+                      : 'text-popover-foreground hover:bg-accent',
+                  )}
                 >
-                  {viewEntity === 'contacts' ? (
-                    <Users className="h-4 w-4 text-blue-600" />
-                  ) : (
-                    <Building2 className="h-4 w-4 text-blue-600" />
+                  <Users className="h-4 w-4" />
+                  Contacts
+                </button>
+                <button
+                  onClick={() => {
+                    setViewEntity('companies');
+                    setViewMode('table');
+                    setSortField('createdAt');
+                    setSortOrder('desc');
+                    setShowEntitySelector(false);
+                    setCurrentPage(1);
+                  }}
+                  className={cn(
+                    'focus-visible:ring-primary/40 flex w-full cursor-pointer items-center gap-2.5 px-3 py-2 text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset',
+                    viewEntity === 'companies'
+                      ? 'bg-blue-50 font-medium text-blue-700'
+                      : 'text-popover-foreground hover:bg-accent',
                   )}
-                  {viewEntity === 'contacts' ? 'Contacts' : 'Entreprises'}
-                  <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                >
+                  <Building2 className="h-4 w-4" />
+                  Entreprises
                 </button>
-                {showEntitySelector && (
-                  <div className="absolute top-full left-0 z-50 mt-1 w-52 rounded-lg border border-border bg-popover py-1 shadow-(--shadow-dropdown)">
-                    <button
-                      onClick={() => {
-                        setViewEntity('contacts');
-                        setSortField('');
-                        setSortOrder('asc');
-                        setShowEntitySelector(false);
-                        setCurrentPage(1);
-                        router.replace('/contacts', { scroll: false });
-                      }}
-                      className={cn(
-                        'flex w-full cursor-pointer items-center gap-2.5 px-3 py-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-inset',
-                        viewEntity === 'contacts'
-                          ? 'bg-blue-50 font-medium text-blue-700'
-                          : 'text-popover-foreground hover:bg-accent',
-                      )}
-                    >
-                      <Users className="h-4 w-4" />
-                      Contacts
-                    </button>
-                    <button
-                      onClick={() => {
-                        setViewEntity('companies');
-                        setViewMode('table');
-                        setSortField('');
-                        setSortOrder('asc');
-                        setShowEntitySelector(false);
-                        setCurrentPage(1);
-                        router.replace('/contacts?entity=companies', { scroll: false });
-                      }}
-                      className={cn(
-                        'flex w-full cursor-pointer items-center gap-2.5 px-3 py-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-inset',
-                        viewEntity === 'companies'
-                          ? 'bg-blue-50 font-medium text-blue-700'
-                          : 'text-popover-foreground hover:bg-accent',
-                      )}
-                    >
-                      <Building2 className="h-4 w-4" />
-                      Entreprises
-                    </button>
-                  </div>
-                )}
               </div>
-              <span className="shrink-0 rounded-full bg-blue-200 px-2 py-0.5 text-xs font-semibold text-blue-900 sm:text-sm">
-                {totalContacts}
-              </span>
-            </div>
-            <button
-              onClick={fetchContacts}
-              className="shrink-0 cursor-pointer rounded-lg p-1.5 text-muted-foreground transition-colors duration-200 hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
-              title="Actualiser"
+            )}
+            <span
+              key={totalContacts}
+              className="ui-count-pop shrink-0 rounded-full bg-blue-200 px-2 py-0.5 text-xs font-semibold text-blue-900"
             >
-              <RefreshCw className="h-4 w-4 sm:h-4" />
-            </button>
+              {totalContacts}
+            </span>
           </div>
           <ViewsTabBar
             views={views}
@@ -2269,11 +2553,19 @@ export default function ContactsPage() {
             hasUnsavedChanges={hasUnsavedViewChanges}
             activeFilters={viewFilters}
             entityType={viewEntity}
+            inline
           />
+          <button
+            onClick={fetchContacts}
+            className="text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:ring-primary shrink-0 cursor-pointer rounded-lg p-1.5 transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+            title="Actualiser"
+          >
+            <RefreshCw className="h-4 w-4" />
+          </button>
         </div>
 
-        {/* Filter bar */}
-        <div className="border-b border-border bg-background/95">
+        {/* Ligne 2 : Filtres avancés + Recherche + Trier + Date + Colonnes + Vue + Importer + Exporter + Ajouter */}
+        <div className="border-border bg-background/95 flex flex-wrap items-center gap-2 border-b px-4 py-2 sm:px-6 lg:px-8">
           <FilterBar
             filters={viewFilters}
             onRemoveFilter={handleRemoveViewFilter}
@@ -2285,337 +2577,299 @@ export default function ContactsPage() {
             isViewOwner={isViewOwner}
             statusOptions={statuses}
             userOptions={users}
+            inline
           />
-        </div>
-
-        {/* Barre d'outils avec recherche et filtres */}
-        <div className="border-b border-border bg-background/95 px-4 py-3 sm:px-6 lg:px-8">
-          <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-muted-foreground" />
-                <input
-                  type="text"
-                  value={search}
-                  onChange={(e) => setSearch(e.target.value)}
-                  placeholder="Rechercher"
-                  className="w-full rounded-lg border border-border bg-muted py-2 pr-3 pl-9 text-base text-foreground placeholder:text-muted-foreground focus:border-primary/50 focus:bg-background focus:ring-2 focus:ring-primary/20 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-border bg-card px-3 py-2 text-xs font-medium text-muted-foreground transition-colors duration-200 hover:bg-muted hover:text-foreground"
+          <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
+            <div className="relative min-w-[180px] max-w-[280px] flex-1 basis-0">
+              <Search className="text-muted-foreground pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
+              <input
+                type="text"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                placeholder="Rechercher"
+                className="border-border bg-muted text-foreground placeholder:text-muted-foreground focus:border-primary/50 focus:bg-background focus:ring-primary/20 w-full rounded-lg border py-1.5 pr-3 pl-9 text-sm focus:ring-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+              />
+            </div>
+            <div className="relative" ref={sortMenuRef}>
+              <button
+                type="button"
+                onClick={() => setShowSortMenu(!showSortMenu)}
+                className="border-border bg-card text-muted-foreground hover:bg-muted hover:text-foreground inline-flex cursor-pointer items-center gap-1.5 rounded-lg border px-3 py-2 text-xs font-medium transition-colors duration-200"
+              >
+                <ChevronsLeft className="h-3.5 w-3.5" />
+                <span>Trier par</span>
+              </button>
+              {showSortMenu && (
+                <div
+                  className="border-border bg-popover ui-dropdown-enter absolute top-full right-0 z-50 mt-2 w-48 rounded-lg border shadow-(--shadow-dropdown)"
+                  style={{ maxWidth: 'calc(100vw - 2rem)', right: '0' }}
                 >
-                  <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-border bg-popover shadow-(--shadow-dropdown)"
-                    style={{ maxWidth: 'calc(100vw - 2rem)', right: '0' }}
-                  >
-                    <div className="py-1">
+                  <div className="py-1">
+                    <button
+                      type="button"
+                      onClick={() => handleSortByField('postalCode')}
+                      className="w-full cursor-pointer px-4 py-2 text-left text-base text-gray-700 hover:bg-gray-100"
+                    >
+                      Code postal{' '}
+                      {sortField === 'postalCode' && (sortOrder === 'asc' ? '↑' : '↓')}
+                    </button>
+                    {viewEntity === 'contacts' && (
                       <button
                         type="button"
-                        onClick={() => handleSortByField('postalCode')}
+                        onClick={() => handleSortByField('region')}
                         className="w-full cursor-pointer px-4 py-2 text-left text-base text-gray-700 hover:bg-gray-100"
                       >
-                        Code postal{' '}
-                        {sortField === 'postalCode' && (sortOrder === 'asc' ? '↑' : '↓')}
+                        Région {sortField === 'region' && (sortOrder === 'asc' ? '↑' : '↓')}
                       </button>
-                      {viewEntity === 'contacts' && (
-                        <button
-                          type="button"
-                          onClick={() => handleSortByField('region')}
-                          className="w-full cursor-pointer px-4 py-2 text-left text-base text-gray-700 hover:bg-gray-100"
-                        >
-                          Région {sortField === 'region' && (sortOrder === 'asc' ? '↑' : '↓')}
-                        </button>
-                      )}
-                      {viewEntity === 'contacts' && (
-                        <button
-                          type="button"
-                          onClick={() => handleSortByField('department')}
-                          className="w-full cursor-pointer px-4 py-2 text-left text-base text-gray-700 hover:bg-gray-100"
-                        >
-                          Département{' '}
-                          {sortField === 'department' && (sortOrder === 'asc' ? '↑' : '↓')}
-                        </button>
-                      )}
-                      {viewEntity === 'contacts' && (
-                        <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>
-                      )}
+                    )}
+                    {viewEntity === 'contacts' && (
                       <button
                         type="button"
-                        onClick={() => handleSortByField('commercial')}
+                        onClick={() => handleSortByField('department')}
                         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' ? '↑' : '↓')}
+                        Département{' '}
+                        {sortField === 'department' && (sortOrder === 'asc' ? '↑' : '↓')}
                       </button>
+                    )}
+                    {viewEntity === 'contacts' && (
                       <button
                         type="button"
-                        onClick={() => handleSortByField('telepro')}
+                        onClick={() => handleSortByField('status')}
                         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' ? '↑' : '↓')}
+                        Statut {sortField === 'status' && (sortOrder === 'asc' ? '↑' : '↓')}
                       </button>
+                    )}
+                    {viewEntity === 'contacts' && (
                       <button
                         type="button"
-                        onClick={() => handleSortByField('createdAt')}
+                        onClick={() => handleSortByField('origin')}
                         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' ? '↑' : '↓')}
+                        Origine {sortField === 'origin' && (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{' '}
+                      {contactsListColumnShowsActiveSort('createdAt', sortField, sortOrder) &&
+                        (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>
+                    {!isContactsListDefaultSort(sortField, sortOrder) && (
                       <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"
+                        onClick={() => {
+                          setSortField('createdAt');
+                          setSortOrder('desc');
+                          setShowSortMenu(false);
+                        }}
+                        className="w-full cursor-pointer px-4 py-2 text-left text-base text-gray-500 hover:bg-gray-100"
                       >
-                        Date de modification{' '}
-                        {sortField === 'updatedAt' && (sortOrder === 'asc' ? '↑' : '↓')}
+                        Réinitialiser
                       </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:ring-2 focus:ring-gray-400/30 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:ring-2 focus:ring-gray-400/30 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-blue-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-blue-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' && (
+              <div className="relative" ref={datePickerRef}>
                 <button
-                  onClick={() => setShowColumnPanel(true)}
+                  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"
-                  title="Gérer les colonnes"
                 >
-                  Colonnes
+                  <Calendar className="h-3.5 w-3.5" />
+                  <span className="hidden sm:inline">
+                    {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>
-              )}
-              {/* Bouton Réinitialiser les filtres */}
-              {hasActiveFilters() && (
+                {showDatePicker && (
+                  <div
+                    className="ui-dropdown-enter absolute top-full right-0 z-50 mt-2 w-[min(22rem,calc(100vw-2rem))] max-w-[calc(100vw-2rem)] rounded-lg border border-gray-200 bg-white p-3 shadow-lg"
+                    style={{ right: '0' }}
+                  >
+                    <DatePicker
+                      embedded
+                      isPeriod
+                      startDate={createdAtStart}
+                      endDate={createdAtEnd}
+                      label="Période (création)"
+                      onDateChange={(start, end) => {
+                        if (start && end) {
+                          setCreatedAtStart(start);
+                          setCreatedAtEnd(end);
+                          setCurrentPage(1);
+                          setShowDatePicker(false);
+                        }
+                      }}
+                      onRequestClose={() => setShowDatePicker(false)}
+                      onClear={() => {
+                        setCreatedAtStart('');
+                        setCreatedAtEnd('');
+                        setCurrentPage(1);
+                      }}
+                    />
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setCreatedAtStart('');
+                        setCreatedAtEnd('');
+                        setUpdatedAtStart('');
+                        setUpdatedAtEnd('');
+                        setCurrentPage(1);
+                        setShowDatePicker(false);
+                        setTimeout(() => {
+                          fetchContacts();
+                        }, 0);
+                      }}
+                      className="mt-3 w-full 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 toutes les dates
+                    </button>
+                  </div>
+                )}
+              </div>
+              {(createdAtStart || createdAtEnd || updatedAtStart || updatedAtEnd) && (
                 <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"
+                  type="button"
+                  onClick={() => {
+                    // Réinitialiser tous les filtres de date
+                    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" />
-                  Réinitialiser
+                  <span className="hidden sm:inline">Réinitialiser</span>
                 </button>
               )}
-              {/* Groupe vue (liste / grille) - uniquement pour contacts */}
-              {viewEntity === 'contacts' && (
-                <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>
-              )}
-
-              {/* Importer des contacts (CSV / Excel) */}
-              {/* Importer des contacts */}
-              {canImport && (
+            </div>
+            {/* 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"
+              >
+                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) - uniquement pour contacts */}
+            {viewEntity === 'contacts' && (
+              <div className="flex items-center rounded-lg border border-gray-200 bg-white p-1">
                 <button
-                  type="button"
-                  onClick={() => setShowImportModal(true)}
-                  className="inline-flex cursor-pointer items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 focus-visible:ring-2 focus-visible:ring-gray-400/30 focus-visible:ring-offset-2 focus-visible:outline-none sm:text-sm"
+                  onClick={() => {
+                    setViewMode('table');
+                    const params = new URLSearchParams(searchParams.toString());
+                    params.set('view', 'table');
+                    router.replace(`/contacts?${params.toString()}`, { scroll: false });
+                  }}
+                  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"
                 >
-                  <Upload className="h-4 w-4" />
-                  Importer
+                  <List className="h-4 w-4" />
                 </button>
-              )}
-
-              {/* Exporter tous les contacts */}
-              {canExport && (
                 <button
                   onClick={() => {
-                    setExportAll(true);
-                    setShowExportModal(true);
+                    setViewMode('cards');
+                    const params = new URLSearchParams(searchParams.toString());
+                    params.set('view', 'cards');
+                    router.replace(`/contacts?${params.toString()}`, { scroll: false });
                   }}
-                  disabled={exporting}
-                  className="inline-flex cursor-pointer items-center gap-2 rounded-lg border border-blue-600 bg-white px-4 py-2 text-xs font-semibold text-blue-600 shadow-sm transition-colors hover:bg-blue-50 focus-visible:ring-2 focus-visible:ring-gray-400/30 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm"
+                  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"
                 >
-                  <Download className="h-4 w-4" />
-                  Exporter
+                  <LayoutGrid className="h-4 w-4" />
                 </button>
-              )}
+              </div>
+            )}
+
+            {/* Importer des contacts (CSV / Excel) */}
+            {/* Importer des contacts */}
+            {canImport && (
+              <button
+                type="button"
+                onClick={() => setShowImportModal(true)}
+                className="inline-flex cursor-pointer items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 focus-visible:ring-2 focus-visible:ring-gray-400/30 focus-visible:ring-offset-2 focus-visible:outline-none sm:text-sm"
+              >
+                <Upload className="h-4 w-4" />
+                Importer
+              </button>
+            )}
+
+            {/* Exporter tous les contacts */}
+            {canExport && (
+              <button
+                onClick={() => {
+                  setExportAll(true);
+                  setShowExportModal(true);
+                }}
+                disabled={exporting}
+                className="inline-flex cursor-pointer items-center gap-2 rounded-lg border border-blue-600 bg-white px-4 py-2 text-xs font-semibold text-blue-600 shadow-sm transition-colors hover:bg-blue-50 focus-visible:ring-2 focus-visible:ring-gray-400/30 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
+              </button>
+            )}
 
-              {/* Ajouter un contact / entreprise */}
-              {((viewEntity === 'contacts' && canCreate) ||
-                (viewEntity === 'companies' && canCreateCompany)) && (
+            {/* Ajouter un contact / entreprise */}
+            {((viewEntity === 'contacts' && canCreate) ||
+              (viewEntity === 'companies' && canCreateCompany)) && (
                 <button
                   onClick={viewEntity === 'companies' ? handleNewCompany : handleNewContact}
                   className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-xs font-semibold text-white shadow-sm transition-colors hover:bg-blue-700 focus-visible:ring-2 focus-visible:ring-gray-400/30 focus-visible:ring-offset-2 focus-visible:outline-none sm:text-sm"
@@ -2624,15 +2878,14 @@ export default function ContactsPage() {
                   {viewEntity === 'companies' ? 'Ajouter une entreprise' : 'Ajouter'}
                 </button>
               )}
-            </div>
           </div>
         </div>
 
         <div className="flex flex-1 flex-col overflow-hidden">
-          <div className="flex-1 overflow-auto">
+          <div ref={listScrollContainerRef} className="ui-fade-in flex-1 overflow-auto">
             {/* Barre d'actions groupées */}
             {selectedContactIds.size > 0 && (
-              <div className="mx-4 mt-4 flex items-center justify-between rounded-lg border border-blue-200 bg-blue-50 p-4 shadow-sm sm:mx-6 lg:mx-8">
+              <div className="ui-slide-up mx-4 mt-4 flex items-center justify-between rounded-lg border border-blue-200 bg-blue-50 p-4 shadow-sm sm:mx-6 lg:mx-8">
                 <div className="flex items-center gap-4">
                   <span className="text-sm font-medium text-blue-900">
                     {selectedContactIds.size} contact(s) sélectionné(s)
@@ -2705,18 +2958,16 @@ export default function ContactsPage() {
                 <ContactCardsSkeleton />
               )
             ) : (viewEntity === 'companies' ? companies.length : contacts.length) === 0 ? (
-              <div className="mx-4 mt-4 rounded-lg bg-white p-12 text-center shadow sm:mx-6 lg:mx-8">
+              <div className="ui-fade-in mx-4 mt-4 rounded-lg bg-white p-12 text-center shadow sm:mx-6 lg:mx-8">
                 <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.size > 0 ||
-                  assignedCommercialFilter.size > 0 ||
-                  assignedTeleproFilter.size > 0 ||
-                  regionFilter.size > 0 ||
-                  departmentFilter.size > 0
+                    statusFilter.size > 0 ||
+                    assignedCommercialFilter.size > 0 ||
+                    assignedTeleproFilter.size > 0
                     ? viewEntity === 'companies'
                       ? 'Aucune entreprise ne correspond à vos critères'
                       : 'Aucun contact ne correspond à vos critères'
@@ -2728,8 +2979,6 @@ export default function ContactsPage() {
                   statusFilter.size === 0 &&
                   assignedCommercialFilter.size === 0 &&
                   assignedTeleproFilter.size === 0 &&
-                  regionFilter.size === 0 &&
-                  departmentFilter.size === 0 &&
                   ((viewEntity === 'contacts' && canCreate) ||
                     (viewEntity === 'companies' && canCreateCompany)) && (
                     <button
@@ -2770,7 +3019,7 @@ export default function ContactsPage() {
                           key={company.id}
                           onClick={() => router.push(`/contacts/companies/${company.id}`)}
                           className={cn(
-                            'cursor-pointer transition-colors',
+                            'ui-row-hover cursor-pointer transition-colors',
                             index % 2 === 1
                               ? 'bg-gray-50/60 hover:bg-gray-100/80'
                               : 'bg-white hover:bg-gray-50',
@@ -2927,7 +3176,14 @@ export default function ContactsPage() {
                         </th>
                         {/* En-têtes dynamiques des colonnes */}
                         {visibleColumns.map((column) => {
-                          const isSortable = column.id === 'createdAt' || column.id === 'updatedAt';
+                          const isSortable =
+                            column.id === 'createdAt' ||
+                            column.id === 'updatedAt' ||
+                            column.id === 'postalCode' ||
+                            column.id === 'status' ||
+                            column.id === 'origin' ||
+                            column.id === 'commercial' ||
+                            column.id === 'telepro';
                           const showFilterIcon =
                             column.id === 'status' ||
                             column.id === 'origin' ||
@@ -2952,7 +3208,11 @@ export default function ContactsPage() {
                                       className="inline-flex cursor-pointer items-center gap-1"
                                     >
                                       <span>{column.label}</span>
-                                      {sortField === column.id && (
+                                      {contactsListColumnShowsActiveSort(
+                                        column.id,
+                                        sortField,
+                                        sortOrder,
+                                      ) && (
                                         <span className="text-blue-600">
                                           {sortOrder === 'asc' ? <ChevronDown /> : <ChevronUp />}
                                         </span>
@@ -2978,20 +3238,24 @@ export default function ContactsPage() {
                                     <Filter
                                       className={cn(
                                         'h-3 w-3',
-                                        (isSortable && sortField === column.id) ||
+                                        (isSortable &&
+                                          contactsListColumnShowsActiveSort(
+                                            column.id,
+                                            sortField,
+                                            sortOrder,
+                                          )) ||
                                           (column.id === 'createdAt' &&
                                             (createdAtStart || createdAtEnd)) ||
                                           (column.id === 'updatedAt' &&
                                             (updatedAtStart || updatedAtEnd)) ||
-                                          (column.id === 'region' && regionFilter.size > 0) ||
-                                          (column.id === 'department' &&
-                                            departmentFilter.size > 0) ||
                                           (column.id === 'status' && statusFilter.size > 0) ||
                                           (column.id === 'origin' && originFilter.size > 0) ||
                                           (column.id === 'commercial' &&
                                             assignedCommercialFilter.size > 0) ||
                                           (column.id === 'telepro' &&
-                                            assignedTeleproFilter.size > 0)
+                                            assignedTeleproFilter.size > 0) ||
+                                          (column.id === 'region' && regionFilter.size > 0) ||
+                                          (column.id === 'department' && departmentFilter.size > 0)
                                           ? 'text-blue-600'
                                           : 'text-gray-400',
                                       )}
@@ -3012,9 +3276,9 @@ export default function ContactsPage() {
                       {sortedContacts.map((contact, index) => (
                         <tr
                           key={contact.id}
-                          onClick={() => router.push(`/contacts/${contact.id}`)}
+                          onClick={() => navigateToContactDetail(contact.id)}
                           className={cn(
-                            'cursor-pointer transition-colors',
+                            'ui-row-hover cursor-pointer transition-colors',
                             selectedContactIds.has(contact.id)
                               ? 'bg-blue-50 hover:bg-blue-100'
                               : index % 2 === 1
@@ -3051,8 +3315,8 @@ export default function ContactsPage() {
                       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-blue-300 hover:shadow-md"
+                          onClick={() => navigateToContactDetail(contact.id)}
+                          className="ui-lift-hover relative cursor-pointer rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-[border-color,box-shadow] hover:border-blue-300 hover:shadow-md"
                         >
                           {/* En-tête avec trois points */}
                           <div className="mb-4 flex items-start justify-between">
@@ -3098,10 +3362,10 @@ export default function ContactsPage() {
                               <span className="font-medium">Email :</span>
                               <span className="ml-1">{contact.email || '-'}</span>
                             </div>
-                            {contact.company && (
+                            {(contact.company || contact.companyName) && (
                               <div className="flex items-center text-base text-gray-900">
                                 <Building2 className="mr-2 h-4 w-4 text-gray-400" />
-                                <span>{contact.company.name}</span>
+                                <span>{contact.company ? contact.company.name : contact.companyName}</span>
                               </div>
                             )}
                             {contact.city && (
@@ -3219,16 +3483,29 @@ export default function ContactsPage() {
             {totalPages > 1 ? (
               <div className="flex items-center gap-2">
                 <button
-                  onClick={() => setCurrentPage(1)}
-                  disabled={currentPage === 1}
+                  onClick={() => {
+                    const params = new URLSearchParams(searchParams.toString());
+                    params.set('page', '1');
+                    params.set('limit', String(limit));
+                    params.set('view', viewMode);
+                    router.replace(`/contacts?${params.toString()}`, { scroll: false });
+                  }}
+                  disabled={uiCurrentPage === 1}
                   className="cursor-pointer rounded-md border border-gray-300 bg-white px-2 py-1.5 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>
                 <button
-                  onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
-                  disabled={currentPage === 1}
+                  onClick={() => {
+                    const p = Math.max(1, uiCurrentPage - 1);
+                    const params = new URLSearchParams(searchParams.toString());
+                    params.set('page', String(p));
+                    params.set('limit', String(limit));
+                    params.set('view', viewMode);
+                    router.replace(`/contacts?${params.toString()}`, { scroll: false });
+                  }}
+                  disabled={uiCurrentPage === 1}
                   className="cursor-pointer rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
                 >
                   Précédent
@@ -3238,7 +3515,7 @@ export default function ContactsPage() {
                     .filter((page) => {
                       if (totalPages <= 7) return true;
                       if (page === 1 || page === totalPages) return true;
-                      return Math.abs(page - currentPage) <= 2;
+                      return Math.abs(page - uiCurrentPage) <= 2;
                     })
                     .map((page, idx, array) => {
                       const prevPage = array[idx - 1];
@@ -3247,10 +3524,18 @@ export default function ContactsPage() {
                         <div key={page} className="flex items-center gap-1">
                           {showEllipsis && <span className="px-1 text-gray-400">...</span>}
                           <button
-                            onClick={() => setCurrentPage(page)}
+                            onClick={() => {
+                              const params = new URLSearchParams(searchParams.toString());
+                              params.set('page', String(page));
+                              params.set('limit', String(limit));
+                              params.set('view', viewMode);
+                              router.replace(`/contacts?${params.toString()}`, {
+                                scroll: false,
+                              });
+                            }}
                             className={cn(
                               'cursor-pointer rounded-md border px-2.5 py-1.5 text-sm font-medium transition-colors',
-                              currentPage === page
+                              uiCurrentPage === page
                                 ? 'border-blue-600 bg-blue-600 text-white'
                                 : 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50',
                             )}
@@ -3262,15 +3547,28 @@ export default function ContactsPage() {
                     })}
                 </div>
                 <button
-                  onClick={() => setCurrentPage((prev) => Math.min(totalPages, prev + 1))}
-                  disabled={currentPage === totalPages}
+                  onClick={() => {
+                    const p = Math.min(totalPages, uiCurrentPage + 1);
+                    const params = new URLSearchParams(searchParams.toString());
+                    params.set('page', String(p));
+                    params.set('limit', String(limit));
+                    params.set('view', viewMode);
+                    router.replace(`/contacts?${params.toString()}`, { scroll: false });
+                  }}
+                  disabled={uiCurrentPage === totalPages}
                   className="cursor-pointer rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
                 >
                   Suivant
                 </button>
                 <button
-                  onClick={() => setCurrentPage(totalPages)}
-                  disabled={currentPage === totalPages}
+                  onClick={() => {
+                    const params = new URLSearchParams(searchParams.toString());
+                    params.set('page', String(totalPages));
+                    params.set('limit', String(limit));
+                    params.set('view', viewMode);
+                    router.replace(`/contacts?${params.toString()}`, { scroll: false });
+                  }}
+                  disabled={uiCurrentPage === totalPages}
                   className="cursor-pointer rounded-md border border-gray-300 bg-white px-2 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
                   title="Dernière page"
                 >
@@ -3284,10 +3582,16 @@ export default function ContactsPage() {
               <select
                 value={limit}
                 onChange={(e) => {
-                  setLimit(Number(e.target.value));
+                  const newLimit = Number(e.target.value);
+                  setLimit(newLimit);
                   setCurrentPage(1);
+                  const params = new URLSearchParams(searchParams.toString());
+                  params.set('limit', String(newLimit));
+                  params.set('page', '1');
+                  params.set('view', viewMode);
+                  router.replace(`/contacts?${params.toString()}`, { scroll: false });
                 }}
-                className="rounded-md border border-gray-300 bg-white px-2 py-1.5 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                className="rounded-md border border-gray-300 bg-white px-2 py-1.5 text-sm text-gray-700 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
               >
                 <option value={25}>25 par page</option>
                 <option value={50}>50 par page</option>
@@ -3407,8 +3711,8 @@ export default function ContactsPage() {
 
         {/* 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">
+          <div className="ui-fade-in fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm sm:p-6">
+            <div className="ui-scale-in 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">
@@ -3453,7 +3757,7 @@ export default function ContactsPage() {
                       <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:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                       >
                         <option value="">-</option>
                         <option value="M">M.</option>
@@ -3468,7 +3772,7 @@ export default function ContactsPage() {
                         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:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                         placeholder="Prénom"
                       />
                     </div>
@@ -3479,7 +3783,7 @@ export default function ContactsPage() {
                         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:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                         placeholder="Nom"
                       />
                     </div>
@@ -3503,7 +3807,7 @@ export default function ContactsPage() {
                             setFormData({ ...formData, phone: normalized });
                           }
                         }}
-                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                         placeholder="06 12 34 56 78"
                       />
                     </div>
@@ -3524,7 +3828,7 @@ export default function ContactsPage() {
                             setFormData({ ...formData, secondaryPhone: normalized });
                           }
                         }}
-                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                         placeholder="06 12 34 56 78"
                       />
                     </div>
@@ -3535,10 +3839,21 @@ export default function ContactsPage() {
                         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:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                         placeholder="email@exemple.com"
                       />
                     </div>
+
+                    <div className="md:col-span-2">
+                      <label className="block text-sm font-medium text-gray-700">Site internet</label>
+                      <input
+                        type="url"
+                        value={formData.website}
+                        onChange={(e) => setFormData({ ...formData, website: e.target.value })}
+                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                        placeholder="https://example.com"
+                      />
+                    </div>
                   </div>
                 </div>
 
@@ -3548,18 +3863,13 @@ export default function ContactsPage() {
                   <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                     <div>
                       <label className="block text-sm font-medium text-gray-700">Statut</label>
-                      <select
+                      <StatusSelect
+                        statuses={statuses}
                         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:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                      >
-                        <option value="">Aucun statut</option>
-                        {statuses.map((status) => (
-                          <option key={status.id} value={status.id}>
-                            {status.name}
-                          </option>
-                        ))}
-                      </select>
+                        onChange={(v) => setFormData({ ...formData, statusId: v })}
+                        placeholder="Aucun statut"
+                        className="mt-1"
+                      />
                     </div>
 
                     {/* Motif de fermeture (visible si le statut le requiert) */}
@@ -3576,7 +3886,7 @@ export default function ContactsPage() {
                             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:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                            className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                           >
                             <option value="">Sélectionnez un motif</option>
                             {closingReasons.map((reason) => (
@@ -3596,17 +3906,17 @@ export default function ContactsPage() {
                         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:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                       >
                         <option value="">Non assigné</option>
                         {(isAdmin
                           ? users.filter((u) => u.role !== 'USER')
                           : users.filter(
-                              (u) =>
-                                u.role === 'COMMERCIAL' ||
-                                u.role === 'ADMIN' ||
-                                u.role === 'MANAGER',
-                            )
+                            (u) =>
+                              u.role === 'COMMERCIAL' ||
+                              u.role === 'ADMIN' ||
+                              u.role === 'MANAGER',
+                          )
                         ).map((user) => (
                           <option key={user.id} value={user.id}>
                             {user.name}
@@ -3622,7 +3932,7 @@ export default function ContactsPage() {
                         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:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                       >
                         <option value="">Non assigné</option>
                         {(isAdmin
@@ -3667,7 +3977,7 @@ export default function ContactsPage() {
                           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:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                          className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                           placeholder="Paris"
                         />
                       </div>
@@ -3680,7 +3990,7 @@ export default function ContactsPage() {
                           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:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                          className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                           placeholder="75001"
                         />
                       </div>
@@ -3697,7 +4007,7 @@ export default function ContactsPage() {
                       <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:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                       >
                         <option value="">Aucune entreprise</option>
                         {allCompanies.map((company) => (
@@ -3716,7 +4026,7 @@ export default function ContactsPage() {
                           type="text"
                           value={formData.jobTitle}
                           onChange={(e) => setFormData({ ...formData, jobTitle: e.target.value })}
-                          className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                          className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                           placeholder="Ex. Directeur commercial, Assistant..."
                         />
                       </div>
@@ -3729,13 +4039,12 @@ export default function ContactsPage() {
                         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:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                         placeholder="Site web, recommandation, etc."
                       />
                     </div>
                   </div>
                 </div>
-
               </form>
 
               {/* Pied de modal fixe */}
@@ -3767,8 +4076,8 @@ export default function ContactsPage() {
 
         {/* Modal Entreprise */}
         {showCompanyModal && (
-          <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-2xl flex-col rounded-lg bg-white shadow-xl">
+          <div className="ui-fade-in fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm sm:p-6">
+            <div className="ui-scale-in flex max-h-[90vh] w-full max-w-2xl flex-col rounded-lg bg-white shadow-xl">
               <div className="shrink-0 border-b border-gray-100 px-6 py-4">
                 <div className="flex items-center justify-between">
                   <h2 className="text-xl font-bold text-gray-900">
@@ -3798,7 +4107,7 @@ export default function ContactsPage() {
                         onChange={(e) =>
                           setCompanyFormData({ ...companyFormData, name: e.target.value })
                         }
-                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                         required
                       />
                     </div>
@@ -3810,7 +4119,7 @@ export default function ContactsPage() {
                         onChange={(e) =>
                           setCompanyFormData({ ...companyFormData, phone: e.target.value })
                         }
-                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                       />
                     </div>
                     <div>
@@ -3821,7 +4130,7 @@ export default function ContactsPage() {
                         onChange={(e) =>
                           setCompanyFormData({ ...companyFormData, email: e.target.value })
                         }
-                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                       />
                     </div>
                     <div className="md:col-span-2">
@@ -3853,7 +4162,7 @@ export default function ContactsPage() {
                         onChange={(e) =>
                           setCompanyFormData({ ...companyFormData, city: e.target.value })
                         }
-                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                       />
                     </div>
                     <div>
@@ -3864,7 +4173,7 @@ export default function ContactsPage() {
                         onChange={(e) =>
                           setCompanyFormData({ ...companyFormData, postalCode: e.target.value })
                         }
-                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                       />
                     </div>
                     <div>
@@ -3875,7 +4184,7 @@ export default function ContactsPage() {
                         onChange={(e) =>
                           setCompanyFormData({ ...companyFormData, website: e.target.value })
                         }
-                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                         placeholder="https://"
                       />
                     </div>
@@ -3887,7 +4196,7 @@ export default function ContactsPage() {
                         onChange={(e) =>
                           setCompanyFormData({ ...companyFormData, siret: e.target.value })
                         }
-                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                       />
                     </div>
                     <div>
@@ -3898,7 +4207,7 @@ export default function ContactsPage() {
                         onChange={(e) =>
                           setCompanyFormData({ ...companyFormData, industry: e.target.value })
                         }
-                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                       />
                     </div>
                     <div>
@@ -3911,7 +4220,7 @@ export default function ContactsPage() {
                             assignedCommercialId: e.target.value,
                           })
                         }
-                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                       >
                         <option value="">Non attribué</option>
                         {users.map((u) => (
@@ -3931,7 +4240,7 @@ export default function ContactsPage() {
                             assignedTeleproId: e.target.value,
                           })
                         }
-                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                       >
                         <option value="">Non attribué</option>
                         {users.map((u) => (
@@ -3949,7 +4258,7 @@ export default function ContactsPage() {
                           setCompanyFormData({ ...companyFormData, notes: e.target.value })
                         }
                         rows={3}
-                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                       />
                     </div>
                   </div>
@@ -3983,8 +4292,8 @@ export default function ContactsPage() {
 
         {/* 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">
+          <div className="ui-fade-in fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm sm:p-6">
+            <div className="ui-scale-in 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">
@@ -4213,7 +4522,7 @@ export default function ContactsPage() {
                                   key={rowIdx}
                                   onClick={() => setImportHeaderRow(rowIdx)}
                                   className={cn(
-                                    'cursor-pointer transition-colors',
+                                    'ui-row-hover cursor-pointer transition-colors',
                                     importHeaderRow === rowIdx
                                       ? 'bg-blue-50 ring-2 ring-blue-500 ring-inset'
                                       : rowIdx < importHeaderRow
@@ -4299,18 +4608,14 @@ export default function ContactsPage() {
                           <label className="mb-1 block text-sm font-medium text-gray-700">
                             Statut par défaut
                           </label>
-                          <select
+                          <StatusSelect
+                            statuses={statuses}
                             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:ring-2 focus:ring-gray-400/30 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>
+                            onChange={setDefaultStatusId}
+                            placeholder="Aucun statut par défaut"
+                            className="w-full"
+                            size="sm"
+                          />
                         </div>
 
                         <div>
@@ -4320,7 +4625,7 @@ export default function ContactsPage() {
                           <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:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                            className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                           >
                             <option value="">Aucun commercial par défaut</option>
                             {users
@@ -4342,7 +4647,7 @@ export default function ContactsPage() {
                             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:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                            className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                           />
                         </div>
                       </div>
@@ -4420,7 +4725,7 @@ export default function ContactsPage() {
                                           },
                                         });
                                       }}
-                                      className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                                      className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                                     >
                                       <option value="map">Mapper vers un champ</option>
                                       <option value="note">Ajouter comme note</option>
@@ -4452,7 +4757,7 @@ export default function ContactsPage() {
                                             },
                                           });
                                         }}
-                                        className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                                        className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                                       >
                                         <option value="">Sélectionnez un champ</option>
                                         <option value="phone">Téléphone *</option>
@@ -4464,7 +4769,15 @@ export default function ContactsPage() {
                                         <option value="address">Adresse</option>
                                         <option value="city">Ville</option>
                                         <option value="postalCode">Code postal</option>
+                                        <option value="companyName">Société</option>
                                         <option value="origin">Origine</option>
+                                        <option value="website">Site internet</option>
+                                        <option value="jobTitle">Intitulé du poste</option>
+                                        <option value="createdAt">Date de création</option>
+                                        <option value="linkedin">LinkedIn</option>
+                                        <option value="facebook">Facebook</option>
+                                        <option value="twitter">Twitter</option>
+                                        <option value="instagram">Instagram</option>
                                       </select>
                                     </div>
                                   )}
@@ -4539,7 +4852,6 @@ export default function ContactsPage() {
                         </ul>
                       </div>
                     )}
-
                   </div>
                 )}
               </div>
@@ -4622,8 +4934,8 @@ export default function ContactsPage() {
 
         {/* 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="ui-fade-in fixed inset-0 z-50 flex min-h-dvh items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm">
+            <div className="ui-scale-in 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
@@ -4771,8 +5083,8 @@ export default function ContactsPage() {
 
         {/* 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="ui-fade-in fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm">
+            <div className="ui-scale-in 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
@@ -4797,7 +5109,7 @@ export default function ContactsPage() {
                 <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:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                  className="w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                 >
                   <option value="">Sélectionner un commercial</option>
                   {users
@@ -4834,8 +5146,8 @@ export default function ContactsPage() {
 
         {/* Modal - Changer télépro */}
         {showBulkTeleproModal && (
-          <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="ui-fade-in fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm">
+            <div className="ui-scale-in 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 télépro</h3>
                 <button
@@ -4860,7 +5172,7 @@ export default function ContactsPage() {
                 <select
                   value={bulkTeleproId}
                   onChange={(e) => setBulkTeleproId(e.target.value)}
-                  className="w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                  className="w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                 >
                   <option value="">Sélectionner un télépro</option>
                   {users
@@ -4897,8 +5209,8 @@ export default function ContactsPage() {
 
         {/* 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="ui-fade-in fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm">
+            <div className="ui-scale-in 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
@@ -4920,18 +5232,13 @@ export default function ContactsPage() {
                 <label className="mb-2 block text-sm font-medium text-gray-700">
                   Nouveau statut
                 </label>
-                <select
+                <StatusSelect
+                  statuses={statuses}
                   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:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                >
-                  <option value="">Sélectionner un statut</option>
-                  {statuses.map((status) => (
-                    <option key={status.id} value={status.id}>
-                      {status.name}
-                    </option>
-                  ))}
-                </select>
+                  onChange={setBulkStatusId}
+                  placeholder="Sélectionner un statut"
+                  className="w-full"
+                />
               </div>
 
               <div className="flex justify-end gap-3">
@@ -4960,7 +5267,7 @@ export default function ContactsPage() {
         {dateFilterModal && dateFilterPosition && (
           <div
             ref={dateFilterModalRef}
-            className="fixed z-50 w-72 rounded-lg border border-gray-200 bg-white p-4 shadow-xl"
+            className="ui-dropdown-enter 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">
@@ -4978,54 +5285,35 @@ export default function ContactsPage() {
                 {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:ring-2 focus:ring-gray-400/30 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:ring-2 focus:ring-gray-400/30 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-blue-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-blue-700"
-                >
-                  Filtrer
-                </button>
-              </div>
+              <DatePicker
+                embedded
+                isPeriod
+                startDate={
+                  dateFilterModal === 'createdAt' ? createdAtStart : updatedAtStart
+                }
+                endDate={
+                  dateFilterModal === 'createdAt' ? createdAtEnd : updatedAtEnd
+                }
+                label="Période"
+                onDateChange={(start, end) => {
+                  if (!start || !end) return;
+                  if (dateFilterModal === 'createdAt') {
+                    setCreatedAtStart(start);
+                    setCreatedAtEnd(end);
+                  } else {
+                    setUpdatedAtStart(start);
+                    setUpdatedAtEnd(end);
+                  }
+                  setCurrentPage(1);
+                  setDateFilterModal(null);
+                  setDateFilterPosition(null);
+                }}
+                onRequestClose={() => {
+                  setDateFilterModal(null);
+                  setDateFilterPosition(null);
+                }}
+                onClear={() => handleClearDateFilter(dateFilterModal)}
+              />
             </div>
           </div>
         )}
@@ -5034,7 +5322,7 @@ export default function ContactsPage() {
         {listFilterModal && listFilterPosition && (
           <div
             ref={listFilterModalRef}
-            className="fixed z-50 w-80 rounded-lg border border-gray-200 bg-white p-4 shadow-xl"
+            className="ui-dropdown-enter 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">
@@ -5078,7 +5366,6 @@ export default function ContactsPage() {
                       setAssignedTeleproFilter(new Set());
                     } else if (listFilterModal === 'region') {
                       setRegionFilter(new Set());
-                      setDepartmentFilter(new Set());
                     } else if (listFilterModal === 'department') {
                       setDepartmentFilter(new Set());
                     }
@@ -5122,13 +5409,7 @@ export default function ContactsPage() {
                   })}
 
                 {listFilterModal === 'origin' &&
-                  Array.from(
-                    new Set(
-                      contacts
-                        .map((c) => c.origin)
-                        .filter((o): o is string => Boolean(o && o.trim())),
-                    ),
-                  ).map((origin) => {
+                  originOptions.map((origin) => {
                     const checked = originFilter.has(origin);
                     return (
                       <button
@@ -5152,20 +5433,14 @@ export default function ContactsPage() {
                     );
                   })}
 
-                {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.has(value);
+                {listFilterModal === 'region' &&
+                  FR_REGIONS.map((r) => {
+                    const checked = regionFilter.has(r.code);
                     return (
                       <button
-                        key={item.id}
+                        key={r.code}
                         type="button"
-                        onClick={() => toggleFilterValue(setAssignedCommercialFilter, value)}
+                        onClick={() => toggleFilterValue(setRegionFilter, r.code)}
                         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">
@@ -5177,26 +5452,20 @@ export default function ContactsPage() {
                           >
                             {checked && <span className="text-[10px] text-white">✓</span>}
                           </div>
-                          <span className="text-sm text-gray-800">{item.name}</span>
+                          <span className="text-sm text-gray-800">{r.name}</span>
                         </div>
                       </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.has(value);
+                {listFilterModal === 'department' &&
+                  FR_DEPARTMENTS.map((d) => {
+                    const checked = departmentFilter.has(d.code);
                     return (
                       <button
-                        key={item.id}
+                        key={d.code}
                         type="button"
-                        onClick={() => toggleFilterValue(setAssignedTeleproFilter, value)}
+                        onClick={() => toggleFilterValue(setDepartmentFilter, d.code)}
                         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">
@@ -5208,20 +5477,28 @@ export default function ContactsPage() {
                           >
                             {checked && <span className="text-[10px] text-white">✓</span>}
                           </div>
-                          <span className="text-sm text-gray-800">{item.name}</span>
+                          <span className="text-sm text-gray-800">
+                            {d.code} — {d.name}
+                          </span>
                         </div>
                       </button>
                     );
                   })}
 
-                {listFilterModal === 'region' &&
-                  FRENCH_REGIONS.map((region) => {
-                    const checked = regionFilter.has(region.code);
+                {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.has(value);
                     return (
                       <button
-                        key={region.code}
+                        key={item.id}
                         type="button"
-                        onClick={() => toggleFilterValue(setRegionFilter, region.code)}
+                        onClick={() => toggleFilterValue(setAssignedCommercialFilter, value)}
                         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">
@@ -5233,20 +5510,26 @@ export default function ContactsPage() {
                           >
                             {checked && <span className="text-[10px] text-white">✓</span>}
                           </div>
-                          <span className="text-sm text-gray-800">{region.name}</span>
+                          <span className="text-sm text-gray-800">{item.name}</span>
                         </div>
                       </button>
                     );
                   })}
 
-                {listFilterModal === 'department' &&
-                  filteredDepartmentsForFilter.map((dept) => {
-                    const checked = departmentFilter.has(dept.code);
+                {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.has(value);
                     return (
                       <button
-                        key={dept.code}
+                        key={item.id}
                         type="button"
-                        onClick={() => toggleFilterValue(setDepartmentFilter, dept.code)}
+                        onClick={() => toggleFilterValue(setAssignedTeleproFilter, value)}
                         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">
@@ -5258,8 +5541,7 @@ export default function ContactsPage() {
                           >
                             {checked && <span className="text-[10px] text-white">✓</span>}
                           </div>
-                          <span className="text-xs font-medium text-gray-500">{dept.code}</span>
-                          <span className="text-sm text-gray-800">{dept.name}</span>
+                          <span className="text-sm text-gray-800">{item.name}</span>
                         </div>
                       </button>
                     );
@@ -5271,8 +5553,8 @@ export default function ContactsPage() {
 
         {/* 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="ui-fade-in fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm">
+            <div className="ui-scale-in 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">
                   {viewEntity === 'companies'