create-crm-tmp 1.1.2 → 2.0.0

package/template/src/app/(dashboard)/contacts/companies/[id]/page.tsx

@@ -0,0 +1,1703 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import Link from 'next/link';
+import {
+  ArrowLeft,
+  Building2,
+  Users,
+  Trash2,
+  RefreshCw,
+  Plus,
+  Activity,
+  X,
+  Phone,
+  Mail,
+} from 'lucide-react';
+import { cn, normalizePhoneNumber } from '@/lib/utils';
+import { useConfirm } from '@/hooks/use-confirm';
+import { useUserRole } from '@/hooks/use-user-role';
+import { ProtectedPage } from '@/components/protected-page';
+import AddressAutocomplete from '@/components/address-autocomplete';
+import { Spinner } from '@/components/skeleton';
+import { useAppToast } from '@/contexts/app-toast-context';
+
+interface CompanyContact {
+  id: string;
+  firstName: string | null;
+  lastName: string | null;
+  jobTitle: string | null;
+  phone: string;
+  email: string | null;
+  status: { id: string; name: string; color: string } | null;
+}
+
+interface CompanyDetail {
+  id: string;
+  name: string;
+  phone: string | null;
+  email: string | null;
+  address: string | null;
+  city: string | null;
+  postalCode: string | null;
+  website: string | null;
+  siret: string | null;
+  industry: string | null;
+  notes: string | null;
+  assignedCommercialId: string | null;
+  assignedCommercial: { id: string; name: string; email: string } | null;
+  assignedTeleproId: string | null;
+  assignedTelepro: { id: string; name: string; email: string } | null;
+  createdById: string | null;
+  createdBy: { id: string; name: string; email: string } | null;
+  createdAt: string;
+  updatedAt: string;
+  contacts: CompanyContact[];
+  _count: { contacts: number };
+}
+
+interface CompanyActivityItem {
+  id: string;
+  type: string;
+  title: string | null;
+  content: string;
+  metadata: unknown;
+  userId: string | null;
+  user: { id: string; name: string } | null;
+  createdAt: string;
+}
+
+interface Status {
+  id: string;
+  name: string;
+  color: string;
+}
+
+interface UserOption {
+  id: string;
+  name: string;
+  email: string;
+  role?: string;
+}
+
+type TabId = 'contacts' | 'activities';
+
+export default function CompanyDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const { hasPermission, isAdmin } = useUserRole();
+  const { confirm, ConfirmDialog } = useConfirm();
+  const toast = useAppToast();
+  const id = params.id as string;
+
+  const [company, setCompany] = useState<CompanyDetail | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [activeTab, setActiveTab] = useState<TabId>('contacts');
+  const [activities, setActivities] = useState<CompanyActivityItem[]>([]);
+  const [companyFormData, setCompanyFormData] = useState({
+    name: '',
+    phone: '',
+    email: '',
+    address: '',
+    city: '',
+    postalCode: '',
+    website: '',
+    siret: '',
+    industry: '',
+    notes: '',
+    assignedCommercialId: '',
+    assignedTeleproId: '',
+  });
+  const [isSavingCompany, setIsSavingCompany] = useState(false);
+  const [lastSavedCompany, setLastSavedCompany] = useState<Date | null>(null);
+  const [showAddContactModal, setShowAddContactModal] = useState(false);
+  const [contactModalMode, setContactModalMode] = useState<'create' | 'search'>('create');
+  const [newContactForm, setNewContactForm] = useState({
+    civility: '',
+    firstName: '',
+    lastName: '',
+    jobTitle: '',
+    phone: '',
+    email: '',
+    address: '',
+    city: '',
+    postalCode: '',
+    origin: '',
+    statusId: '',
+    assignedCommercialId: '',
+    assignedTeleproId: '',
+  });
+  const [savingContact, setSavingContact] = useState(false);
+  const [contactFormError, setContactFormError] = useState('');
+  const [statuses, setStatuses] = useState<Status[]>([]);
+  const [users, setUsers] = useState<UserOption[]>([]);
+  const [existingContactSearch, setExistingContactSearch] = useState('');
+  const [existingContactResults, setExistingContactResults] = useState<
+    {
+      id: string;
+      firstName: string | null;
+      lastName: string | null;
+      phone: string;
+      email: string | null;
+      company: { id: string; name: string } | null;
+    }[]
+  >([]);
+  const [addExistingSelectedId, setAddExistingSelectedId] = useState<string | null>(null);
+  const [addExistingJobTitle, setAddExistingJobTitle] = useState('');
+  const [addExistingLoading, setAddExistingLoading] = useState(false);
+  const [addExistingSearching, setAddExistingSearching] = useState(false);
+  const [addExistingError, setAddExistingError] = useState('');
+
+  const originalFormDataRef = useRef<typeof companyFormData | null>(null);
+
+  const canEdit = hasPermission('companies.edit') || hasPermission('contacts.edit');
+  const canDelete = hasPermission('companies.delete') || hasPermission('contacts.delete');
+  const canCreate = hasPermission('companies.create') || hasPermission('contacts.create');
+  const canViewActivities = hasPermission('companies.view_activities');
+
+  const fetchCompany = useCallback(async () => {
+    try {
+      setLoading(true);
+      const res = await fetch(`/api/companies/${id}`);
+      if (!res.ok) throw new Error('Entreprise non trouvée');
+      const data = await res.json();
+      setCompany(data);
+      const initialForm = {
+        name: data.name ?? '',
+        phone: data.phone ?? '',
+        email: data.email ?? '',
+        address: data.address ?? '',
+        city: data.city ?? '',
+        postalCode: data.postalCode ?? '',
+        website: data.website ?? '',
+        siret: data.siret ?? '',
+        industry: data.industry ?? '',
+        notes: data.notes ?? '',
+        assignedCommercialId: data.assignedCommercialId ?? '',
+        assignedTeleproId: data.assignedTeleproId ?? '',
+      };
+      setCompanyFormData(initialForm);
+      originalFormDataRef.current = { ...initialForm };
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Erreur');
+    } finally {
+      setLoading(false);
+    }
+  }, [id]);
+
+  const fetchActivities = useCallback(async () => {
+    if (!canViewActivities) return;
+    try {
+      const res = await fetch(`/api/companies/${id}/activities`);
+      if (res.ok) {
+        const data = await res.json();
+        setActivities(data);
+      }
+    } catch {
+      // ignore
+    }
+  }, [id, canViewActivities]);
+
+  useEffect(() => {
+    fetchCompany();
+  }, [fetchCompany]);
+
+  useEffect(() => {
+    if (company) fetchActivities();
+  }, [company, fetchActivities]);
+
+  useEffect(() => {
+    if (!canViewActivities && activeTab === 'activities') setActiveTab('contacts');
+  }, [canViewActivities, activeTab]);
+
+  useEffect(() => {
+    if (!error) return;
+    toast.error(error);
+    setError('');
+  }, [error, toast]);
+
+  useEffect(() => {
+    if (!contactFormError) return;
+    toast.error(contactFormError);
+    setContactFormError('');
+  }, [contactFormError, toast]);
+
+  useEffect(() => {
+    if (!addExistingError) return;
+    toast.error(addExistingError);
+    setAddExistingError('');
+  }, [addExistingError, toast]);
+
+  // Entreprise non trouvée → redirection
+  useEffect(() => {
+    if (loading) return;
+    if (error && !company) {
+      router.replace('/contacts?entity=companies');
+    }
+  }, [loading, error, company, router]);
+
+  useEffect(() => {
+    if (company && canEdit) {
+      void (async () => {
+        const response = await fetch('/api/users/list');
+        if (!response.ok) return;
+        const data = await response.json();
+        setUsers(data || []);
+      })();
+    }
+  }, [company, canEdit]);
+
+  const handleSaveCompany = useCallback(
+    async (silent = false) => {
+      if (!company || !canEdit) return;
+      setIsSavingCompany(true);
+      if (!silent) setError('');
+      try {
+        const payload = {
+          name: companyFormData.name || undefined,
+          phone: companyFormData.phone || null,
+          email: companyFormData.email || null,
+          address: companyFormData.address || null,
+          city: companyFormData.city || null,
+          postalCode: companyFormData.postalCode || null,
+          website: companyFormData.website || null,
+          siret: companyFormData.siret || null,
+          industry: companyFormData.industry || null,
+          notes: companyFormData.notes || null,
+          assignedCommercialId: companyFormData.assignedCommercialId || null,
+          assignedTeleproId: companyFormData.assignedTeleproId || null,
+        };
+        const res = await fetch(`/api/companies/${id}`, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload),
+        });
+        if (!res.ok) throw new Error("Erreur lors de l'enregistrement");
+        const updated = await res.json();
+        setCompany(updated);
+        setLastSavedCompany(new Date());
+        originalFormDataRef.current = { ...companyFormData };
+        await fetchActivities();
+      } catch (err: unknown) {
+        if (!silent) setError(err instanceof Error ? err.message : 'Erreur');
+      } finally {
+        setIsSavingCompany(false);
+      }
+    },
+    [company, canEdit, id, companyFormData, fetchActivities],
+  );
+
+  const hasFormDataChanged = useCallback(() => {
+    if (!originalFormDataRef.current) return false;
+    const o = originalFormDataRef.current;
+    return (
+      companyFormData.name !== o.name ||
+      companyFormData.phone !== o.phone ||
+      companyFormData.email !== o.email ||
+      companyFormData.address !== o.address ||
+      companyFormData.city !== o.city ||
+      companyFormData.postalCode !== o.postalCode ||
+      companyFormData.website !== o.website ||
+      companyFormData.siret !== o.siret ||
+      companyFormData.industry !== o.industry ||
+      companyFormData.notes !== o.notes ||
+      companyFormData.assignedCommercialId !== o.assignedCommercialId ||
+      companyFormData.assignedTeleproId !== o.assignedTeleproId
+    );
+  }, [companyFormData]);
+
+  const saveIfDirty = useCallback(async () => {
+    if (hasFormDataChanged()) await handleSaveCompany(true);
+  }, [hasFormDataChanged, handleSaveCompany]);
+
+  useEffect(() => {
+    const onBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (hasFormDataChanged()) e.preventDefault();
+    };
+    globalThis.addEventListener('beforeunload', onBeforeUnload);
+    return () => globalThis.removeEventListener('beforeunload', onBeforeUnload);
+  }, [hasFormDataChanged]);
+
+  useEffect(() => {
+    return () => {
+      const original = originalFormDataRef.current;
+      if (!original) return;
+      const changed =
+        companyFormData.name !== original.name ||
+        companyFormData.phone !== original.phone ||
+        companyFormData.email !== original.email ||
+        companyFormData.address !== original.address ||
+        companyFormData.city !== original.city ||
+        companyFormData.postalCode !== original.postalCode ||
+        companyFormData.website !== original.website ||
+        companyFormData.siret !== original.siret ||
+        companyFormData.industry !== original.industry ||
+        companyFormData.notes !== original.notes ||
+        companyFormData.assignedCommercialId !== original.assignedCommercialId ||
+        companyFormData.assignedTeleproId !== original.assignedTeleproId;
+      if (!changed) return;
+      fetch(`/api/companies/${id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: companyFormData.name || undefined,
+          phone: companyFormData.phone || null,
+          email: companyFormData.email || null,
+          address: companyFormData.address || null,
+          city: companyFormData.city || null,
+          postalCode: companyFormData.postalCode || null,
+          website: companyFormData.website || null,
+          siret: companyFormData.siret || null,
+          industry: companyFormData.industry || null,
+          notes: companyFormData.notes || null,
+          assignedCommercialId: companyFormData.assignedCommercialId || null,
+          assignedTeleproId: companyFormData.assignedTeleproId || null,
+        }),
+        keepalive: true,
+      });
+    };
+  }, [id, companyFormData]);
+
+  useEffect(() => {
+    originalFormDataRef.current = null;
+    setLastSavedCompany(null);
+  }, [id]);
+
+  const openAddContactModal = async (mode: 'create' | 'search' = 'create') => {
+    await saveIfDirty();
+    setContactModalMode(mode);
+    if (mode === 'create') {
+      setNewContactForm({
+        civility: '',
+        firstName: '',
+        lastName: '',
+        jobTitle: '',
+        phone: '',
+        email: '',
+        address: company?.address ?? '',
+        city: company?.city ?? '',
+        postalCode: company?.postalCode ?? '',
+        origin: '',
+        statusId: '',
+        assignedCommercialId: '',
+        assignedTeleproId: '',
+      });
+      setContactFormError('');
+      void (async () => {
+        const [statusesResponse, usersResponse] = await Promise.all([
+          fetch('/api/statuses'),
+          fetch('/api/users/list'),
+        ]);
+        if (statusesResponse.ok) {
+          const statusesData = await statusesResponse.json();
+          setStatuses(statusesData || []);
+        }
+        if (usersResponse.ok) {
+          const usersData = await usersResponse.json();
+          setUsers(usersData || []);
+        }
+      })();
+    } else {
+      setExistingContactSearch('');
+      setExistingContactResults([]);
+      setAddExistingSelectedId(null);
+      setAddExistingJobTitle('');
+      setAddExistingError('');
+    }
+    setShowAddContactModal(true);
+  };
+
+  const searchExistingContacts = useCallback(async () => {
+    if (!existingContactSearch.trim()) {
+      setExistingContactResults([]);
+      return;
+    }
+    setAddExistingSearching(true);
+    setAddExistingError('');
+    try {
+      const res = await fetch(
+        `/api/contacts?search=${encodeURIComponent(existingContactSearch.trim())}&limit=30&page=1`,
+      );
+      if (!res.ok) throw new Error('Recherche impossible');
+      const data = await res.json();
+      const alreadyInCompany = new Set((company?.contacts ?? []).map((c) => c.id));
+      const filtered = (data.contacts ?? []).filter(
+        (c: { id: string }) => !alreadyInCompany.has(c.id),
+      );
+      setExistingContactResults(filtered);
+    } catch {
+      setAddExistingError('Erreur lors de la recherche');
+      setExistingContactResults([]);
+    } finally {
+      setAddExistingSearching(false);
+    }
+  }, [existingContactSearch, company?.contacts]);
+
+  // Recherche en direct (debounce) quand on tape dans l'onglet « Rechercher un contact existant »
+  const searchDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => {
+    if (!showAddContactModal || contactModalMode !== 'search') return;
+    if (searchDebounceRef.current) clearTimeout(searchDebounceRef.current);
+    searchDebounceRef.current = setTimeout(() => {
+      searchDebounceRef.current = null;
+      searchExistingContacts();
+    }, 400);
+    return () => {
+      if (searchDebounceRef.current) clearTimeout(searchDebounceRef.current);
+    };
+  }, [existingContactSearch, showAddContactModal, contactModalMode, searchExistingContacts]);
+
+  const handleAddExistingContact = async () => {
+    if (!addExistingSelectedId || !company) return;
+    setAddExistingLoading(true);
+    setAddExistingError('');
+    try {
+      const res = await fetch(`/api/contacts/${addExistingSelectedId}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          companyId: id,
+          jobTitle: addExistingJobTitle.trim() || null,
+        }),
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        throw new Error(err.error || "Impossible d'ajouter le contact");
+      }
+      const updated = await res.json();
+      const contactName =
+        [updated.firstName, updated.lastName].filter(Boolean).join(' ') || 'Contact';
+      await fetch(`/api/companies/${id}/activities`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          type: 'CONTACT_ADDED',
+          title: 'Contact associé',
+          content: `${contactName} a été associé à l'entreprise.`,
+          metadata: { contactId: updated.id },
+        }),
+      });
+      await fetchCompany();
+      await fetchActivities();
+      setShowAddContactModal(false);
+    } catch (err: unknown) {
+      setAddExistingError(err instanceof Error ? err.message : 'Erreur');
+    } finally {
+      setAddExistingLoading(false);
+    }
+  };
+
+  const handleCreateContact = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setContactFormError('');
+    await saveIfDirty();
+    if (!newContactForm.phone?.trim()) {
+      setContactFormError('Le téléphone est obligatoire');
+      return;
+    }
+    setSavingContact(true);
+    try {
+      const res = await fetch('/api/contacts', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          ...newContactForm,
+          companyId: id,
+          civility: newContactForm.civility || null,
+          jobTitle: newContactForm.jobTitle || null,
+          assignedCommercialId: newContactForm.assignedCommercialId || null,
+          assignedTeleproId: newContactForm.assignedTeleproId || null,
+          statusId: newContactForm.statusId || null,
+        }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || 'Erreur');
+      const contactName =
+        [newContactForm.firstName, newContactForm.lastName].filter(Boolean).join(' ') ||
+        'Nouveau contact';
+      await fetch(`/api/companies/${id}/activities`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          type: 'CONTACT_ADDED',
+          title: 'Contact ajouté',
+          content: `${contactName} a été ajouté à l'entreprise.`,
+          metadata: { contactId: data.id },
+        }),
+      });
+      await fetchCompany();
+      await fetchActivities();
+      setShowAddContactModal(false);
+    } catch (err: unknown) {
+      setContactFormError(err instanceof Error ? err.message : 'Erreur');
+    } finally {
+      setSavingContact(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    const ok = await confirm({
+      title: "Supprimer l'entreprise",
+      description: `Êtes-vous sûr de vouloir supprimer "${company?.name}" ? Les contacts liés ne seront pas supprimés, mais le lien sera retiré.`,
+      confirmText: 'Supprimer',
+      variant: 'destructive',
+    });
+    if (!ok) return;
+
+    try {
+      const res = await fetch(`/api/companies/${id}`, { method: 'DELETE' });
+      if (!res.ok) throw new Error('Erreur lors de la suppression');
+      router.push('/contacts?entity=companies');
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Erreur');
+    }
+  };
+
+  if (loading && !company) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <div className="h-12 w-12 animate-spin rounded-full border-4 border-blue-200 border-t-blue-600" />
+      </div>
+    );
+  }
+
+  if (error && !company) return null;
+
+  if (!company) return null;
+
+  return (
+    <ProtectedPage
+      requiredPermission={[
+        'contacts.view_all',
+        'contacts.view_own',
+        'companies.view_all',
+        'companies.view_own',
+      ]}
+    >
+      <div className="flex h-full flex-col">
+        <ConfirmDialog />
+
+        {/* Header (même style que page contact) */}
+        <div className="border-b border-gray-200 bg-white px-4 py-3 sm:px-6 sm:py-3.5 lg:px-8">
+          <div className="flex items-center justify-between gap-3">
+            <div className="flex items-center gap-2 sm:gap-4">
+              <Link
+                href="/contacts?entity=companies"
+                className="flex cursor-pointer items-center gap-2 text-sm text-gray-600 hover:text-gray-900"
+              >
+                <ArrowLeft />
+              </Link>
+              <h1 className="text-base font-semibold text-gray-900 sm:text-lg">Entreprises</h1>
+            </div>
+            <div className="flex items-center gap-1 sm:gap-2">
+              <button
+                onClick={() => saveIfDirty().then(() => fetchCompany())}
+                className="cursor-pointer rounded-lg p-2 text-gray-600 transition-colors hover:bg-gray-100"
+                title="Actualiser"
+              >
+                <RefreshCw className="h-5 w-5" />
+              </button>
+              {canDelete && (
+                <button
+                  onClick={handleDelete}
+                  className="cursor-pointer rounded-lg p-2 text-red-600 transition-colors hover:bg-red-50"
+                  title="Supprimer l'entreprise"
+                >
+                  <Trash2 className="h-5 w-5" />
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Section Profil (avatar + nom + boutons d'action, comme contact) */}
+        <div className="border-b border-gray-200 bg-white px-4 py-3 sm:px-6 sm:py-4 lg:px-8">
+          <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+            <div className="flex items-center gap-3 sm:gap-4">
+              <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-blue-100 text-lg font-semibold text-blue-800 sm:h-16 sm:w-16 sm:text-xl">
+                <Building2 className="h-6 w-6 sm:h-8 sm:w-8" />
+              </div>
+              <div className="min-w-0">
+                <h2 className="truncate text-base font-bold text-gray-900 sm:text-lg">
+                  {company.name}
+                </h2>
+                <p className="mt-1 truncate text-xs text-gray-500 sm:text-sm">
+                  {company._count.contacts} contact{company._count.contacts !== 1 ? 's' : ''}{' '}
+                  associé
+                  {company._count.contacts !== 1 ? 's' : ''}
+                </p>
+              </div>
+            </div>
+            <div className="flex flex-wrap items-center gap-1.5 sm:gap-2">
+              {canCreate && (
+                <div className="flex flex-wrap items-center gap-1.5">
+                  {(canCreate || canEdit) && (
+                    <button
+                      type="button"
+                      onClick={() => openAddContactModal('create')}
+                      className="inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-blue-600 px-2 py-1.5 text-xs font-medium text-white transition-colors hover:bg-blue-700 sm:px-4 sm:py-2 sm:text-sm"
+                    >
+                      <Plus className="h-3 w-3 sm:h-4 sm:w-4" />
+                      <span className="hidden sm:inline">Ajouter un contact</span>
+                      <span className="sm:hidden">Ajouter</span>
+                    </button>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Contenu principal - Deux colonnes (comme page contact) */}
+        <div className="flex-1 overflow-y-auto">
+          <div className="flex flex-col gap-6 p-4 lg:flex-row lg:p-6">
+            {/* Colonne gauche - Formulaire entreprise éditable */}
+            <div className="w-full space-y-4 lg:sticky lg:top-6 lg:max-h-[calc(100vh-3rem)] lg:w-1/3 lg:self-start lg:overflow-y-auto lg:pb-4">
+              <div className="rounded-lg bg-white p-3 shadow sm:p-4">
+                {canEdit ? (
+                  <form
+                    className="space-y-3"
+                    onSubmit={(e) => {
+                      e.preventDefault();
+                      handleSaveCompany();
+                    }}
+                  >
+                    <div>
+                      <label
+                        htmlFor="company-name"
+                        className="mb-1 block text-sm font-medium text-gray-700"
+                      >
+                        Nom *
+                      </label>
+                      <input
+                        id="company-name"
+                        type="text"
+                        value={companyFormData.name}
+                        onChange={(e) =>
+                          setCompanyFormData({ ...companyFormData, name: e.target.value })
+                        }
+                        className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        required
+                      />
+                    </div>
+                    <div className="grid grid-cols-2 gap-2">
+                      <div>
+                        <label
+                          htmlFor="company-phone"
+                          className="mb-1 block text-sm font-medium text-gray-700"
+                        >
+                          Téléphone
+                        </label>
+                        <input
+                          id="company-phone"
+                          type="tel"
+                          value={companyFormData.phone}
+                          onChange={(e) =>
+                            setCompanyFormData({ ...companyFormData, phone: e.target.value })
+                          }
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        />
+                      </div>
+                      <div>
+                        <label
+                          htmlFor="company-email"
+                          className="mb-1 block text-sm font-medium text-gray-700"
+                        >
+                          Email
+                        </label>
+                        <input
+                          id="company-email"
+                          type="email"
+                          value={companyFormData.email}
+                          onChange={(e) =>
+                            setCompanyFormData({ ...companyFormData, email: e.target.value })
+                          }
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        />
+                      </div>
+                    </div>
+                    <div>
+                      <label
+                        htmlFor="company-address"
+                        className="mb-1 block text-sm font-medium text-gray-700"
+                      >
+                        Adresse
+                      </label>
+                      <AddressAutocomplete
+                        value={companyFormData.address}
+                        onChange={(address, components) => {
+                          if (components) {
+                            setCompanyFormData({
+                              ...companyFormData,
+                              address: components.street,
+                              city: components.city,
+                              postalCode: components.postalCode,
+                            });
+                          } else {
+                            setCompanyFormData({ ...companyFormData, address });
+                          }
+                        }}
+                        placeholder="Rechercher une adresse..."
+                      />
+                    </div>
+                    <div className="grid grid-cols-2 gap-2">
+                      <div>
+                        <label
+                          htmlFor="company-city"
+                          className="mb-1 block text-sm font-medium text-gray-700"
+                        >
+                          Ville
+                        </label>
+                        <input
+                          id="company-city"
+                          type="text"
+                          value={companyFormData.city}
+                          onChange={(e) =>
+                            setCompanyFormData({ ...companyFormData, city: e.target.value })
+                          }
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        />
+                      </div>
+                      <div>
+                        <label
+                          htmlFor="company-postalCode"
+                          className="mb-1 block text-sm font-medium text-gray-700"
+                        >
+                          Code postal
+                        </label>
+                        <input
+                          id="company-postalCode"
+                          type="text"
+                          value={companyFormData.postalCode}
+                          onChange={(e) =>
+                            setCompanyFormData({ ...companyFormData, postalCode: e.target.value })
+                          }
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        />
+                      </div>
+                    </div>
+                    <div>
+                      <label
+                        htmlFor="company-website"
+                        className="mb-1 block text-sm font-medium text-gray-700"
+                      >
+                        Site web
+                      </label>
+                      <input
+                        id="company-website"
+                        type="url"
+                        value={companyFormData.website}
+                        onChange={(e) =>
+                          setCompanyFormData({ ...companyFormData, website: e.target.value })
+                        }
+                        placeholder="https://"
+                        className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                      />
+                    </div>
+                    <div className="grid grid-cols-2 gap-2">
+                      <div>
+                        <label
+                          htmlFor="company-siret"
+                          className="mb-1 block text-sm font-medium text-gray-700"
+                        >
+                          SIRET
+                        </label>
+                        <input
+                          id="company-siret"
+                          type="text"
+                          value={companyFormData.siret}
+                          onChange={(e) =>
+                            setCompanyFormData({ ...companyFormData, siret: e.target.value })
+                          }
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        />
+                      </div>
+                      <div>
+                        <label
+                          htmlFor="company-industry"
+                          className="mb-1 block text-sm font-medium text-gray-700"
+                        >
+                          Secteur
+                        </label>
+                        <input
+                          id="company-industry"
+                          type="text"
+                          value={companyFormData.industry}
+                          onChange={(e) =>
+                            setCompanyFormData({ ...companyFormData, industry: e.target.value })
+                          }
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        />
+                      </div>
+                    </div>
+                    <div>
+                      <label
+                        htmlFor="company-notes"
+                        className="mb-1 block text-sm font-medium text-gray-700"
+                      >
+                        Notes
+                      </label>
+                      <textarea
+                        id="company-notes"
+                        value={companyFormData.notes}
+                        onChange={(e) =>
+                          setCompanyFormData({ ...companyFormData, notes: e.target.value })
+                        }
+                        rows={3}
+                        className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                      />
+                    </div>
+                    <div className="grid grid-cols-2 gap-2 border-t border-gray-100 pt-3">
+                      <div>
+                        <label
+                          htmlFor="company-commercial"
+                          className="mb-1 block text-xs font-medium text-gray-500"
+                        >
+                          Commercial
+                        </label>
+                        <select
+                          id="company-commercial"
+                          value={companyFormData.assignedCommercialId}
+                          onChange={(e) =>
+                            setCompanyFormData({
+                              ...companyFormData,
+                              assignedCommercialId: e.target.value,
+                            })
+                          }
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        >
+                          <option value="">Non attribué</option>
+                          {users.map((u) => (
+                            <option key={u.id} value={u.id}>
+                              {u.name}
+                            </option>
+                          ))}
+                        </select>
+                      </div>
+                      <div>
+                        <label
+                          htmlFor="company-telepro"
+                          className="mb-1 block text-xs font-medium text-gray-500"
+                        >
+                          Télépro
+                        </label>
+                        <select
+                          id="company-telepro"
+                          value={companyFormData.assignedTeleproId}
+                          onChange={(e) =>
+                            setCompanyFormData({
+                              ...companyFormData,
+                              assignedTeleproId: e.target.value,
+                            })
+                          }
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        >
+                          <option value="">Non attribué</option>
+                          {users.map((u) => (
+                            <option key={u.id} value={u.id}>
+                              {u.name}
+                            </option>
+                          ))}
+                        </select>
+                      </div>
+                    </div>
+                    <div className="flex items-center justify-between border-t border-gray-100 pt-3">
+                      <div className="text-xs text-gray-500">
+                        {company.createdBy?.name && `Créé par ${company.createdBy.name}`}
+                      </div>
+                      <div className="flex items-center gap-2">
+                        {lastSavedCompany && (
+                          <span className="text-xs text-green-600">
+                            Enregistré à{' '}
+                            {lastSavedCompany.toLocaleTimeString('fr-FR', {
+                              hour: '2-digit',
+                              minute: '2-digit',
+                            })}
+                          </span>
+                        )}
+                        <button
+                          type="submit"
+                          disabled={isSavingCompany}
+                          className="cursor-pointer rounded-lg bg-blue-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+                        >
+                          {isSavingCompany ? <Spinner size="sm" /> : 'Enregistrer'}
+                        </button>
+                      </div>
+                    </div>
+                  </form>
+                ) : (
+                  <div className="space-y-3">
+                    <div>
+                      <span className="mb-1 block text-sm font-medium text-gray-700">Nom</span>
+                      <p className="rounded-lg border border-gray-200 bg-gray-50 px-2 py-1.5 text-sm text-gray-900">
+                        {company.name}
+                      </p>
+                    </div>
+                    <div className="grid grid-cols-2 gap-2">
+                      <div>
+                        <span className="mb-1 block text-sm font-medium text-gray-700">
+                          Téléphone
+                        </span>
+                        <p className="rounded-lg border border-gray-200 bg-gray-50 px-2 py-1.5 text-sm text-gray-900">
+                          {company.phone || '-'}
+                        </p>
+                      </div>
+                      <div>
+                        <span className="mb-1 block text-sm font-medium text-gray-700">Email</span>
+                        <p className="truncate rounded-lg border border-gray-200 bg-gray-50 px-2 py-1.5 text-sm text-gray-900">
+                          {company.email || '-'}
+                        </p>
+                      </div>
+                    </div>
+                    {(company.address || company.city) && (
+                      <div>
+                        <span className="mb-1 block text-sm font-medium text-gray-700">
+                          Adresse
+                        </span>
+                        <p className="rounded-lg border border-gray-200 bg-gray-50 px-2 py-1.5 text-sm text-gray-900">
+                          {[company.address, company.city, company.postalCode]
+                            .filter(Boolean)
+                            .join(', ')}
+                        </p>
+                      </div>
+                    )}
+                    {company.website && (
+                      <div>
+                        <span className="mb-1 block text-sm font-medium text-gray-700">
+                          Site web
+                        </span>
+                        <a
+                          href={company.website}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="block truncate text-sm text-blue-600 hover:underline"
+                        >
+                          {company.website}
+                        </a>
+                      </div>
+                    )}
+                    {(company.siret || company.industry) && (
+                      <div className="grid grid-cols-2 gap-2">
+                        {company.siret && (
+                          <div>
+                            <span className="mb-1 block text-xs font-medium text-gray-500">
+                              SIRET
+                            </span>
+                            <p className="text-sm text-gray-900">{company.siret}</p>
+                          </div>
+                        )}
+                        {company.industry && (
+                          <div>
+                            <span className="mb-1 block text-xs font-medium text-gray-500">
+                              Secteur
+                            </span>
+                            <p className="text-sm text-gray-900">{company.industry}</p>
+                          </div>
+                        )}
+                      </div>
+                    )}
+                    {company.notes && (
+                      <div>
+                        <span className="mb-1 block text-sm font-medium text-gray-700">Notes</span>
+                        <p className="rounded-lg border border-gray-200 bg-gray-50 px-2 py-1.5 text-sm whitespace-pre-wrap text-gray-900">
+                          {company.notes}
+                        </p>
+                      </div>
+                    )}
+                    <div className="grid grid-cols-2 gap-2 border-t border-gray-100 pt-3">
+                      <div>
+                        <span className="mb-1 block text-xs font-medium text-gray-500">
+                          Commercial
+                        </span>
+                        <p className="text-sm text-gray-900">
+                          {company.assignedCommercial?.name || 'Non attribué'}
+                        </p>
+                      </div>
+                      <div>
+                        <span className="mb-1 block text-xs font-medium text-gray-500">
+                          Télépro
+                        </span>
+                        <p className="text-sm text-gray-900">
+                          {company.assignedTelepro?.name || 'Non attribué'}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="border-t border-gray-100 pt-3">
+                      <span className="mb-1 block text-xs font-medium text-gray-500">Créé par</span>
+                      <p className="text-sm text-gray-900">{company.createdBy?.name || '-'}</p>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Colonne droite - Onglets (Contacts associés / Activités) */}
+            <div className="flex-1">
+              <div className="rounded-lg bg-white shadow">
+                <div className="border-b border-gray-200">
+                  <nav className="flex flex-wrap" aria-label="Tabs">
+                    {[
+                      { id: 'contacts' as const, label: 'Contacts associés', icon: Users },
+                      ...(canViewActivities
+                        ? [{ id: 'activities' as const, label: 'Activités', icon: Activity }]
+                        : []),
+                    ].map((tab) => {
+                      const TabIcon = tab.icon;
+                      const contactsList = company?.contacts ?? [];
+                      return (
+                        <button
+                          key={tab.id}
+                          onClick={() => setActiveTab(tab.id)}
+                          className={cn(
+                            'flex cursor-pointer items-center gap-1.5 border-b-2 px-4 py-4 text-sm font-medium transition-colors sm:gap-2 sm:px-6',
+                            activeTab === tab.id
+                              ? 'border-blue-600 text-blue-600'
+                              : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
+                          )}
+                        >
+                          <TabIcon className="h-4 w-4 shrink-0" />
+                          <span className="whitespace-nowrap">{tab.label}</span>
+                          {tab.id === 'contacts' && contactsList.length > 0 && (
+                            <span className="rounded-full bg-gray-200 px-2 py-0.5 text-xs">
+                              {contactsList.length}
+                            </span>
+                          )}
+                        </button>
+                      );
+                    })}
+                  </nav>
+                </div>
+
+                <div className="p-4 sm:p-6">
+                  {activeTab === 'contacts' && (
+                    <div>
+                      <div className="mb-4 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+                        <h2 className="text-lg font-semibold text-gray-900">Contacts associés</h2>
+                      </div>
+
+                      {(company.contacts ?? []).length === 0 ? (
+                        <div className="rounded-lg border border-gray-200 bg-gray-50 py-12 text-center">
+                          <Users className="mx-auto h-12 w-12 text-gray-400" />
+                          <p className="mt-2 text-sm text-gray-600">
+                            Aucun contact associé à cette entreprise
+                          </p>
+                          {(canCreate || canEdit) && (
+                            <div className="mt-4 flex flex-wrap justify-center gap-2">
+                              {canCreate && (
+                                <button
+                                  type="button"
+                                  onClick={() => openAddContactModal('create')}
+                                  className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
+                                >
+                                  <Plus className="h-4 w-4" />
+                                  Ajouter un contact
+                                </button>
+                              )}
+                              {canEdit && (
+                                <button
+                                  type="button"
+                                  onClick={() => openAddContactModal('search')}
+                                  className="inline-flex cursor-pointer items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+                                >
+                                  <Plus className="h-4 w-4" />
+                                  Rechercher un contact existant
+                                </button>
+                              )}
+                            </div>
+                          )}
+                        </div>
+                      ) : (
+                        <div className="overflow-hidden rounded-lg border border-gray-200">
+                          <table className="min-w-full divide-y divide-gray-200 text-sm">
+                            <thead className="bg-gray-50">
+                              <tr>
+                                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase sm:px-6">
+                                  Contact
+                                </th>
+                                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase sm:px-6">
+                                  Poste
+                                </th>
+                                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase sm:px-6">
+                                  Téléphone
+                                </th>
+                                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase sm:px-6">
+                                  Email
+                                </th>
+                                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase sm:px-6">
+                                  Statut
+                                </th>
+                              </tr>
+                            </thead>
+                            <tbody className="divide-y divide-gray-200 bg-white">
+                              {(company.contacts ?? []).map((c) => (
+                                <tr
+                                  key={c.id}
+                                  onClick={() => router.push(`/contacts/${c.id}`)}
+                                  className="cursor-pointer transition-colors hover:bg-blue-50/50"
+                                >
+                                  <td className="px-4 py-3 font-medium text-gray-900 sm:px-6">
+                                    {c.firstName} {c.lastName}
+                                  </td>
+                                  <td className="px-4 py-3 text-gray-600 sm:px-6">
+                                    {c.jobTitle || '-'}
+                                  </td>
+                                  <td className="px-4 py-3 text-gray-600 sm:px-6">{c.phone}</td>
+                                  <td className="px-4 py-3 text-gray-600 sm:px-6">
+                                    {c.email || '-'}
+                                  </td>
+                                  <td className="px-4 py-3 sm:px-6">
+                                    {c.status ? (
+                                      <span
+                                        className="inline-flex rounded-full px-2 py-0.5 text-xs font-medium"
+                                        style={{
+                                          backgroundColor: `${c.status.color}20`,
+                                          color: c.status.color,
+                                        }}
+                                      >
+                                        {c.status.name}
+                                      </span>
+                                    ) : (
+                                      '-'
+                                    )}
+                                  </td>
+                                </tr>
+                              ))}
+                            </tbody>
+                          </table>
+                        </div>
+                      )}
+                    </div>
+                  )}
+
+                  {activeTab === 'activities' && (
+                    <div>
+                      <h2 className="mb-4 text-lg font-semibold text-gray-900">Activités</h2>
+                      {activities.length === 0 ? (
+                        <div className="py-12 text-center">
+                          <Activity className="mx-auto h-12 w-12 text-gray-400" />
+                          <p className="mt-2 text-sm text-gray-600">
+                            Aucune activité pour le moment.
+                          </p>
+                          <p className="mt-1 text-xs text-gray-500">
+                            Cliquez sur un contact dans l’onglet « Contacts associés » pour voir ses
+                            activités.
+                          </p>
+                        </div>
+                      ) : (
+                        <div className="space-y-2">
+                          {activities.map((act) => (
+                            <div
+                              key={act.id}
+                              className="rounded-lg border border-gray-200 bg-gray-50/50 p-3"
+                            >
+                              <div className="flex items-center justify-between gap-2">
+                                <p className="text-sm font-medium text-gray-900">
+                                  {act.title ||
+                                    (act.type === 'COMPANY_UPDATE'
+                                      ? 'Informations modifiées'
+                                      : act.type === 'CONTACT_ADDED'
+                                        ? 'Contact ajouté'
+                                        : act.type)}
+                                </p>
+                                <span className="text-xs text-gray-500">
+                                  {new Date(act.createdAt).toLocaleDateString('fr-FR', {
+                                    day: 'numeric',
+                                    month: 'short',
+                                    year: 'numeric',
+                                    hour: '2-digit',
+                                    minute: '2-digit',
+                                  })}
+                                </span>
+                              </div>
+                              {act.content && (
+                                <p className="mt-1 text-sm text-gray-700">{act.content}</p>
+                              )}
+                              {act.user && (
+                                <p className="mt-1 text-xs text-gray-500">Par {act.user.name}</p>
+                              )}
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {showAddContactModal && (
+          <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm">
+            <div className="flex max-h-[90vh] w-full max-w-lg flex-col rounded-lg bg-white shadow-xl">
+              <div className="shrink-0 border-b border-gray-200 px-6 py-4">
+                <div className="flex items-center justify-between">
+                  <h2 className="text-lg font-semibold text-gray-900">Ajouter un contact</h2>
+                  <button
+                    type="button"
+                    onClick={() => setShowAddContactModal(false)}
+                    className="cursor-pointer rounded-lg p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
+                  >
+                    <X className="h-5 w-5" />
+                  </button>
+                </div>
+                <div className="mt-3 flex gap-1 border-b border-gray-200">
+                  <button
+                    type="button"
+                    onClick={() => setContactModalMode('create')}
+                    className={cn(
+                      'cursor-pointer border-b-2 px-4 py-2 text-sm font-medium transition-colors',
+                      contactModalMode === 'create'
+                        ? 'border-blue-600 text-blue-600'
+                        : 'border-transparent text-gray-500 hover:text-gray-700',
+                    )}
+                  >
+                    Créer un nouveau contact
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setContactModalMode('search')}
+                    className={cn(
+                      'cursor-pointer border-b-2 px-4 py-2 text-sm font-medium transition-colors',
+                      contactModalMode === 'search'
+                        ? 'border-blue-600 text-blue-600'
+                        : 'border-transparent text-gray-500 hover:text-gray-700',
+                    )}
+                  >
+                    Rechercher un contact existant
+                  </button>
+                </div>
+              </div>
+              <div className="flex-1 overflow-y-auto">
+                {contactModalMode === 'create' ? (
+                  <form onSubmit={handleCreateContact} className="space-y-4 p-6">
+                    <p className="text-sm text-gray-600">
+                      Entreprise : <strong>{company.name}</strong>
+                    </p>
+                    <div className="grid grid-cols-2 gap-2">
+                      <div>
+                        <label
+                          htmlFor="new-civility"
+                          className="mb-1 block text-sm font-medium text-gray-700"
+                        >
+                          Civilité
+                        </label>
+                        <select
+                          id="new-civility"
+                          value={newContactForm.civility}
+                          onChange={(e) =>
+                            setNewContactForm({ ...newContactForm, civility: e.target.value })
+                          }
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        >
+                          <option value="">-</option>
+                          <option value="M">M.</option>
+                          <option value="MME">Mme</option>
+                          <option value="MLLE">Mlle</option>
+                        </select>
+                      </div>
+                    </div>
+                    <div className="grid grid-cols-2 gap-2">
+                      <div>
+                        <label
+                          htmlFor="new-firstName"
+                          className="mb-1 block text-sm font-medium text-gray-700"
+                        >
+                          Prénom
+                        </label>
+                        <input
+                          id="new-firstName"
+                          type="text"
+                          value={newContactForm.firstName}
+                          onChange={(e) =>
+                            setNewContactForm({ ...newContactForm, firstName: e.target.value })
+                          }
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        />
+                      </div>
+                      <div>
+                        <label
+                          htmlFor="new-lastName"
+                          className="mb-1 block text-sm font-medium text-gray-700"
+                        >
+                          Nom
+                        </label>
+                        <input
+                          id="new-lastName"
+                          type="text"
+                          value={newContactForm.lastName}
+                          onChange={(e) =>
+                            setNewContactForm({ ...newContactForm, lastName: e.target.value })
+                          }
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        />
+                      </div>
+                    </div>
+                    <div>
+                      <label
+                        htmlFor="new-jobTitle"
+                        className="mb-1 block text-sm font-medium text-gray-700"
+                      >
+                        Intitulé du poste
+                      </label>
+                      <input
+                        id="new-jobTitle"
+                        type="text"
+                        value={newContactForm.jobTitle}
+                        onChange={(e) =>
+                          setNewContactForm({ ...newContactForm, jobTitle: e.target.value })
+                        }
+                        placeholder="Ex. Directeur commercial, Assistant..."
+                        className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                      />
+                    </div>
+                    <div className="grid grid-cols-2 gap-2">
+                      <div>
+                        <label
+                          htmlFor="new-phone"
+                          className="mb-1 block text-sm font-medium text-gray-700"
+                        >
+                          Téléphone *
+                        </label>
+                        <input
+                          id="new-phone"
+                          type="tel"
+                          required
+                          value={newContactForm.phone}
+                          onChange={(e) =>
+                            setNewContactForm({ ...newContactForm, phone: e.target.value })
+                          }
+                          onBlur={(e) => {
+                            const n = normalizePhoneNumber(e.target.value);
+                            if (n) setNewContactForm((prev) => ({ ...prev, phone: n }));
+                          }}
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        />
+                      </div>
+                      <div>
+                        <label
+                          htmlFor="new-email"
+                          className="mb-1 block text-sm font-medium text-gray-700"
+                        >
+                          Email
+                        </label>
+                        <input
+                          id="new-email"
+                          type="email"
+                          value={newContactForm.email}
+                          onChange={(e) =>
+                            setNewContactForm({ ...newContactForm, email: e.target.value })
+                          }
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        />
+                      </div>
+                    </div>
+                    <div>
+                      <label
+                        htmlFor="new-address"
+                        className="mb-1 block text-sm font-medium text-gray-700"
+                      >
+                        Adresse
+                      </label>
+                      <AddressAutocomplete
+                        value={newContactForm.address}
+                        onChange={(address, components) =>
+                          setNewContactForm({
+                            ...newContactForm,
+                            address,
+                            city: components?.city ?? newContactForm.city,
+                            postalCode: components?.postalCode ?? newContactForm.postalCode,
+                          })
+                        }
+                        placeholder="Rechercher une adresse..."
+                      />
+                    </div>
+                    <div className="grid grid-cols-2 gap-2">
+                      <div>
+                        <label
+                          htmlFor="new-city"
+                          className="mb-1 block text-sm font-medium text-gray-700"
+                        >
+                          Ville
+                        </label>
+                        <input
+                          id="new-city"
+                          type="text"
+                          value={newContactForm.city}
+                          onChange={(e) =>
+                            setNewContactForm({ ...newContactForm, city: e.target.value })
+                          }
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        />
+                      </div>
+                      <div>
+                        <label
+                          htmlFor="new-postalCode"
+                          className="mb-1 block text-sm font-medium text-gray-700"
+                        >
+                          Code postal
+                        </label>
+                        <input
+                          id="new-postalCode"
+                          type="text"
+                          value={newContactForm.postalCode}
+                          onChange={(e) =>
+                            setNewContactForm({ ...newContactForm, postalCode: e.target.value })
+                          }
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        />
+                      </div>
+                    </div>
+                    <div>
+                      <label
+                        htmlFor="new-status"
+                        className="mb-1 block text-sm font-medium text-gray-700"
+                      >
+                        Statut
+                      </label>
+                      <select
+                        id="new-status"
+                        value={newContactForm.statusId}
+                        onChange={(e) =>
+                          setNewContactForm({ ...newContactForm, statusId: e.target.value })
+                        }
+                        className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                      >
+                        <option value="">Aucun statut</option>
+                        {statuses.map((s) => (
+                          <option key={s.id} value={s.id}>
+                            {s.name}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+                    <div className="grid grid-cols-2 gap-2">
+                      <div>
+                        <label
+                          htmlFor="new-commercial"
+                          className="mb-1 block text-sm font-medium text-gray-700"
+                        >
+                          Commercial
+                        </label>
+                        <select
+                          id="new-commercial"
+                          value={newContactForm.assignedCommercialId}
+                          onChange={(e) =>
+                            setNewContactForm({
+                              ...newContactForm,
+                              assignedCommercialId: e.target.value,
+                            })
+                          }
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        >
+                          <option value="">Non attribué</option>
+                          {(isAdmin
+                            ? users
+                            : users.filter(
+                                (u) =>
+                                  u.role === 'COMMERCIAL' ||
+                                  u.role === 'ADMIN' ||
+                                  u.role === 'MANAGER',
+                              )
+                          ).map((u) => (
+                            <option key={u.id} value={u.id}>
+                              {u.name}
+                            </option>
+                          ))}
+                        </select>
+                      </div>
+                      <div>
+                        <label
+                          htmlFor="new-telepro"
+                          className="mb-1 block text-sm font-medium text-gray-700"
+                        >
+                          Télépro
+                        </label>
+                        <select
+                          id="new-telepro"
+                          value={newContactForm.assignedTeleproId}
+                          onChange={(e) =>
+                            setNewContactForm({
+                              ...newContactForm,
+                              assignedTeleproId: e.target.value,
+                            })
+                          }
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        >
+                          <option value="">Non attribué</option>
+                          {(isAdmin
+                            ? users
+                            : users.filter(
+                                (u) =>
+                                  u.role === 'TELEPRO' ||
+                                  u.role === 'ADMIN' ||
+                                  u.role === 'MANAGER',
+                              )
+                          ).map((u) => (
+                            <option key={u.id} value={u.id}>
+                              {u.name}
+                            </option>
+                          ))}
+                        </select>
+                      </div>
+                    </div>
+                    <div className="flex justify-end gap-2 border-t border-gray-100 pt-4">
+                      <button
+                        type="button"
+                        onClick={() => setShowAddContactModal(false)}
+                        className="cursor-pointer rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+                      >
+                        Annuler
+                      </button>
+                      <button
+                        type="submit"
+                        disabled={savingContact}
+                        className="cursor-pointer rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+                      >
+                        {savingContact ? <Spinner size="sm" /> : 'Créer'}
+                      </button>
+                    </div>
+                  </form>
+                ) : (
+                  <div className="space-y-4 p-6">
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700">
+                        Rechercher un contact
+                      </label>
+                      <input
+                        type="text"
+                        value={existingContactSearch}
+                        onChange={(e) => setExistingContactSearch(e.target.value)}
+                        placeholder="Rechercher par nom, téléphone ou email..."
+                        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"
+                      />
+                      <p className="mt-1 text-xs text-gray-500">
+                        Tapez pour rechercher parmi les contacts existants
+                      </p>
+                    </div>
+                    {existingContactSearch.trim() &&
+                      !addExistingSearching &&
+                      existingContactResults.length === 0 && (
+                        <p className="text-sm text-gray-500">
+                          Aucun contact trouvé ou tous sont déjà associés à cette entreprise.
+                        </p>
+                      )}
+                    {existingContactResults.length > 0 && (
+                      <div className="space-y-2">
+                        <p className="text-xs text-gray-500">
+                          Sélectionnez le contact à associer dans la liste, ou tapez ci-dessus pour
+                          filtrer.
+                        </p>
+                        <p className="text-sm font-medium text-gray-700">
+                          {existingContactResults.length} contact(s) trouvé(s)
+                        </p>
+                        <div className="max-h-72 overflow-y-auto rounded-lg border border-gray-200">
+                          {existingContactResults.map((c) => {
+                            const isSelected = addExistingSelectedId === c.id;
+                            return (
+                              <div
+                                key={c.id}
+                                className={cn(
+                                  'flex cursor-pointer items-center gap-3 border-b border-gray-100 p-4 transition-colors last:border-b-0',
+                                  isSelected
+                                    ? 'bg-blue-50 hover:bg-blue-100'
+                                    : 'hover:bg-gray-50',
+                                )}
+                                onClick={() => setAddExistingSelectedId(isSelected ? null : c.id)}
+                              >
+                                <input
+                                  type="checkbox"
+                                  checked={isSelected}
+                                  onChange={() =>
+                                    setAddExistingSelectedId(isSelected ? null : c.id)
+                                  }
+                                  onClick={(e) => e.stopPropagation()}
+                                  className="h-4 w-4 cursor-pointer rounded border-gray-300 text-blue-600 focus:ring-gray-400/30"
+                                />
+                                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-blue-100 text-sm font-semibold text-blue-800">
+                                  {(c.firstName?.[0] || c.lastName?.[0] || '?').toUpperCase()}
+                                </div>
+                                <div className="min-w-0 flex-1">
+                                  <p className="truncate text-sm font-medium text-gray-900">
+                                    {[c.firstName, c.lastName].filter(Boolean).join(' ') ||
+                                      'Sans nom'}
+                                  </p>
+                                  <div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-gray-500">
+                                    {c.phone && (
+                                      <span className="flex items-center gap-1">
+                                        <Phone className="h-3 w-3" />
+                                        {c.phone}
+                                      </span>
+                                    )}
+                                    {c.email && (
+                                      <span className="flex items-center gap-1">
+                                        <Mail className="h-3 w-3" />
+                                        <span className="max-w-[200px] truncate">{c.email}</span>
+                                      </span>
+                                    )}
+                                  </div>
+                                </div>
+                              </div>
+                            );
+                          })}
+                        </div>
+                        {addExistingSelectedId && (
+                          <div className="border-t border-gray-100 pt-4">
+                            <label
+                              htmlFor="add-existing-jobTitle"
+                              className="mb-1 block text-sm font-medium text-gray-700"
+                            >
+                              Intitulé du poste (optionnel)
+                            </label>
+                            <input
+                              id="add-existing-jobTitle"
+                              type="text"
+                              value={addExistingJobTitle}
+                              onChange={(e) => setAddExistingJobTitle(e.target.value)}
+                              placeholder="Ex. Directeur commercial..."
+                              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"
+                            />
+                          </div>
+                        )}
+                      </div>
+                    )}
+                    {!existingContactSearch.trim() && existingContactResults.length === 0 && (
+                      <div className="rounded-lg border border-gray-200 bg-gray-50 p-8 text-center">
+                        <p className="text-sm text-gray-500">
+                          Tapez ci-dessus pour rechercher parmi les contacts existants.
+                        </p>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+              {contactModalMode === 'search' && (
+                <div className="shrink-0 border-t border-gray-100 px-6 pt-4 pb-6">
+                  <div className="flex justify-end gap-2">
+                    <button
+                      type="button"
+                      onClick={() => setShowAddContactModal(false)}
+                      className="cursor-pointer rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+                    >
+                      Fermer
+                    </button>
+                    <button
+                      type="button"
+                      onClick={handleAddExistingContact}
+                      disabled={!addExistingSelectedId || addExistingLoading}
+                      className="cursor-pointer rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+                    >
+                      {addExistingLoading ? <Spinner size="sm" /> : 'Associer'}
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </ProtectedPage>
+  );
+}