create-crm-tmp 1.1.2 → 2.0.0

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

@@ -15,6 +15,10 @@ import {
   Eye,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import { PageLoader } from '@/components/skeleton';
+import { useUserRole } from '@/hooks/use-user-role';
+import { ProtectedPage } from '@/components/protected-page';
+import { useFetch } from '@/hooks/use-fetch';
 
 interface Status {
   id: string;
@@ -40,10 +44,8 @@ interface Contact {
   city: string | null;
   postalCode: string | null;
   origin: string | null;
-  companyName: string | null;
-  isCompany: boolean;
   companyId: string | null;
-  companyRelation: Contact | null;
+  company: { id: string; name: string | null } | null;
   statusId: string | null;
   status: Status | null;
   assignedCommercialId: string | null;
@@ -53,6 +55,10 @@ interface Contact {
   updatedAt?: string;
 }
 
+interface ContactsResponse {
+  contacts: Contact[];
+}
+
 interface ClosingColumn {
   id: string;
   statusId: string | null;
@@ -66,11 +72,11 @@ const MIN_WIDTH = 280;
 const MAX_WIDTH = 500;
 const LOCAL_STORAGE_KEY = 'closing_pipeline_columns_v1';
 
+const SCROLLBAR_HIDDEN = { scrollbarWidth: 'none' } as const;
+
 function formatRelativeDate(dateString: string): string {
   const date = new Date(dateString);
   const now = new Date();
-  const diffMs = now.getTime() - date.getTime();
-  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
 
   // Réinitialiser les heures pour comparer uniquement les dates
   const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
@@ -103,11 +109,13 @@ function KanbanContactCard({
   onDragStart,
   onDragEnd,
   isDragging,
+  canDrag = true,
 }: {
   contact: Contact;
   onDragStart: () => void;
   onDragEnd: () => void;
   isDragging: boolean;
+  canDrag?: boolean;
 }) {
   const fullName = `${contact.civility ? `${contact.civility}. ` : ''}${
     contact.firstName || ''
@@ -117,40 +125,37 @@ function KanbanContactCard({
 
   return (
     <div
-      draggable
-      onDragStart={onDragStart}
-      onDragEnd={onDragEnd}
+      draggable={canDrag}
+      onDragStart={canDrag ? onDragStart : undefined}
+      onDragEnd={canDrag ? onDragEnd : undefined}
       className={cn(
-        'relative rounded-lg border border-gray-200 bg-white p-4 text-[13px] shadow-sm transition-transform hover:-translate-y-0.5 hover:shadow',
-        'cursor-grab active:cursor-grabbing',
-        isDragging && 'opacity-80 ring-2 ring-indigo-400',
+        'relative rounded-lg border border-border bg-card p-4 text-[13px] shadow-(--shadow-card) transition-transform hover:-translate-y-0.5',
+        canDrag && 'cursor-grab active:cursor-grabbing',
+        !canDrag && 'cursor-default',
+        isDragging && 'opacity-80 ring-2 ring-blue-400',
       )}
     >
       {/* Icône Eye en haut à droite */}
       <Link
         href={`/contacts/${contact.id}`}
-        className="absolute top-2 right-2 z-10 rounded p-1 transition-colors hover:bg-gray-100"
+        className="absolute top-2 right-2 z-10 rounded p-1 transition-colors duration-200 hover:bg-muted"
         onClick={(e) => e.stopPropagation()}
       >
         <Eye className="h-4 w-4 stroke-gray-400" />
       </Link>
 
       <div className="block">
-        {contact.companyName && (
+        {contact.company?.name && (
           <p className="mb-1 truncate text-[10px] font-semibold text-gray-400 uppercase">
-            {contact.companyName}
+            {contact.company.name}
           </p>
         )}
         <div className="mb-3 flex items-center gap-3">
-          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-xs font-semibold text-indigo-600">
-            {contact.isCompany ? (
-              <span>🏢</span>
-            ) : (
-              (contact.firstName?.[0] || contact.lastName?.[0] || '?').toUpperCase()
-            )}
+          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-blue-100 text-xs font-semibold text-blue-700">
+            {(contact.firstName?.[0] || contact.lastName?.[0] || '?').toUpperCase()}
           </div>
           <div className="min-w-0 flex-1">
-            <p className="truncate text-sm font-semibold text-gray-900">{fullName || 'Sans nom'}</p>
+            <p className="truncate text-sm font-semibold text-foreground">{fullName || 'Sans nom'}</p>
           </div>
         </div>
 
@@ -224,11 +229,21 @@ function createDefaultColumns(statuses: Status[]): ClosingColumn[] {
 }
 
 export default function ClosingPage() {
-  const [statuses, setStatuses] = useState<Status[]>([]);
+  const { hasPermission, isLoading: roleLoading } = useUserRole();
+  const {
+    data: statuses = [],
+    isLoading: statusesLoading,
+    error: statusesError,
+  } = useFetch<Status[]>('/api/statuses');
+  const {
+    data: contactsData,
+    isLoading: contactsLoading,
+    error: contactsError,
+  } = useFetch<ContactsResponse>('/api/contacts?limit=500');
   const [contacts, setContacts] = useState<Contact[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
   const [columns, setColumns] = useState<ClosingColumn[]>([]);
+
+  const canManagePipeline = hasPermission('contacts.manage_pipeline');
   const [draggedCard, setDraggedCard] = useState<{
     contactId: string;
     fromStatusId: string | null;
@@ -246,64 +261,39 @@ export default function ClosingPage() {
   const [draggedColumnId, setDraggedColumnId] = useState<string | null>(null);
   const [dragOverColumnId, setDragOverColumnId] = useState<string | null>(null);
 
-  const [selectedCompanyId, setSelectedCompanyId] = useState<string | 'all'>('all');
+  const [selectedCompanyId] = useState<string | 'all'>('all');
   const [selectedPeriod, setSelectedPeriod] = useState<string>('all');
   const [selectedCommercialId, setSelectedCommercialId] = useState<string | 'all'>('all');
   const [selectedTeleproId, setSelectedTeleproId] = useState<string | 'all'>('all');
 
   useEffect(() => {
-    const fetchData = async () => {
-      try {
-        setLoading(true);
-        setError('');
-
-        const [statusRes, contactsRes] = await Promise.all([
-          fetch('/api/statuses'),
-          fetch('/api/contacts?limit=500'),
-        ]);
+    setContacts(contactsData?.contacts || []);
+  }, [contactsData]);
 
-        if (!statusRes.ok) {
-          throw new Error('Erreur lors du chargement des statuts');
-        }
-        if (!contactsRes.ok) {
-          throw new Error('Erreur lors du chargement des contacts');
-        }
+  useEffect(() => {
+    if (!statuses.length) return;
+    if (typeof window === 'undefined') {
+      setColumns(createDefaultColumns(statuses));
+      return;
+    }
 
-        const statusesJson: Status[] = await statusRes.json();
-        const contactsJson = await contactsRes.json();
-
-        setStatuses(statusesJson);
-        setContacts(contactsJson.contacts || []);
-
-        if (typeof window !== 'undefined') {
-          const stored = window.localStorage.getItem(LOCAL_STORAGE_KEY);
-          if (stored) {
-            try {
-              const parsed: ClosingColumn[] = JSON.parse(stored);
-              setColumns(
-                parsed
-                  .filter((c) => !c.statusId || statusesJson.some((s) => s.id === c.statusId))
-                  .sort((a, b) => a.order - b.order),
-              );
-            } catch {
-              setColumns(createDefaultColumns(statusesJson));
-            }
-          } else {
-            setColumns(createDefaultColumns(statusesJson));
-          }
-        } else {
-          setColumns(createDefaultColumns(statusesJson));
-        }
-      } catch (e: any) {
-        console.error(e);
-        setError(e.message || 'Erreur de chargement');
-      } finally {
-        setLoading(false);
-      }
-    };
+    const stored = window.localStorage.getItem(LOCAL_STORAGE_KEY);
+    if (!stored) {
+      setColumns(createDefaultColumns(statuses));
+      return;
+    }
 
-    fetchData();
-  }, []);
+    try {
+      const parsed: ClosingColumn[] = JSON.parse(stored);
+      setColumns(
+        parsed
+          .filter((c) => !c.statusId || statuses.some((s) => s.id === c.statusId))
+          .sort((a, b) => a.order - b.order),
+      );
+    } catch {
+      setColumns(createDefaultColumns(statuses));
+    }
+  }, [statuses]);
 
   const statusesById = useMemo(() => {
     const map: Record<string, Status> = {};
@@ -402,7 +392,7 @@ export default function ClosingPage() {
     setDraggingContactId(null);
     setDragOverStatusId(null);
 
-    if (targetStatusId) {
+    if (targetStatusId && canManagePipeline) {
       try {
         setIsSavingDrag(true);
         const res = await fetch(`/api/contacts/${contactId}`, {
@@ -554,447 +544,489 @@ export default function ClosingPage() {
     setConfigColumns(defaults);
   };
 
-  // Récupérer les entreprises uniques pour le filtre
-  const companies = useMemo(() => {
+  // Récupérer les entreprises uniques pour le filtre (réservé pour usage futur)
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- réservé pour filtre entreprise
+  const _companies = useMemo(() => {
     const companyMap = new Map<string, { id: string; name: string }>();
     contacts.forEach((c) => {
-      if (c.companyId && c.companyName) {
-        companyMap.set(c.companyId, { id: c.companyId, name: c.companyName });
+      if (c.companyId && c.company?.name) {
+        companyMap.set(c.companyId, { id: c.companyId, name: c.company.name });
       }
     });
     return Array.from(companyMap.values());
   }, [contacts]);
 
-  if (loading) {
-    return (
-      <div className="h-full">
-        <div className="border-b border-gray-200 bg-white px-4 py-4 sm:px-6 lg:px-8 lg:py-6">
-          <div>
-            <h1 className="text-xl font-bold text-gray-900 sm:text-2xl">Pipeline de Closing</h1>
-            <p className="mt-1 text-sm text-gray-600">
-              Visualisez et gérez vos opportunités commerciales
-            </p>
+  return (
+    <ProtectedPage requiredPermission="contacts.view_closing_pipeline">
+      {statusesLoading || contactsLoading || roleLoading ? (
+        <div className="h-full">
+          <div className="border-b border-border bg-background/95 px-4 py-4 backdrop-blur-sm sm:px-6 lg:px-8 lg:py-6">
+            <div className="flex items-start gap-3">
+              <div className="min-w-0 flex-1">
+                <h1 className="text-xl font-bold text-foreground sm:text-2xl">Pipeline de Closing</h1>
+                <p className="mt-1 text-sm text-muted-foreground">
+                  Visualisez et gérez vos opportunités commerciales
+                </p>
+              </div>
+            </div>
           </div>
-        </div>
-        <div className="p-4 sm:p-6 lg:p-8">
-          <div className="rounded-lg bg-white p-8 shadow">
-            <p className="text-gray-500">Chargement du pipeline...</p>
+          <div className="flex-1">
+            <PageLoader text="Chargement du pipeline..." />
           </div>
         </div>
-      </div>
-    );
-  }
+      ) : (
+        <div className="h-full">
+          {' '}
+          {/* md:overflow-y-hidden */}
+          {/* En-tête personnalisé avec filtres intégrés */}
+          <div className="border-b border-border bg-background/95 px-4 py-4 backdrop-blur-sm sm:px-6 lg:px-8 lg:py-6">
+            <div className="flex items-start gap-3">
+              <div className="flex min-w-0 flex-1 items-start justify-between gap-4">
+                <div className="min-w-0 flex-1">
+                  <h1 className="text-xl font-bold text-foreground sm:text-2xl">
+                    Pipeline de Closing
+                  </h1>
+                  <p className="mt-1 text-sm text-muted-foreground">
+                    Visualisez et gérez vos opportunités commerciales
+                  </p>
 
-  return (
-    <div className="h-full">
-      {' '}
-      {/* md:overflow-y-hidden */}
-      {/* En-tête personnalisé avec filtres intégrés */}
-      <div className="border-b border-gray-200 bg-white px-4 py-4 sm:px-6 lg:px-8 lg:py-6">
-        <div className="flex items-start gap-3">
-          <div className="flex min-w-0 flex-1 items-start justify-between gap-4">
-            <div className="min-w-0 flex-1">
-              <h1 className="text-xl font-bold text-gray-900 sm:text-2xl">Pipeline de Closing</h1>
-              <p className="mt-1 text-sm text-gray-600">
-                Visualisez et gérez vos opportunités commerciales
-              </p>
-
-              {/* Filtres intégrés dans l'en-tête */}
-              <div className="mt-4 flex flex-col gap-3 sm:flex-row">
-                <div className="flex items-center gap-2">
-                  <span className="text-xs font-medium text-gray-700">Période:</span>
-                  <div className="relative">
-                    <Filter className="absolute top-1/2 left-2 h-3.5 w-3.5 -translate-y-1/2 text-gray-400" />
-                    <select
-                      className="rounded-lg border border-gray-300 py-1.5 pr-2 pl-7 text-sm text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
-                      value={selectedPeriod}
-                      onChange={(e) => setSelectedPeriod(e.target.value)}
-                    >
-                      <option value="all">Toutes</option>
-                      <option value="today">Aujourd'hui</option>
-                      <option value="week">Cette semaine</option>
-                      <option value="month">Ce mois</option>
-                    </select>
-                  </div>
-                </div>
+                  {/* Filtres intégrés dans l'en-tête */}
+                  <div className="mt-4 flex flex-col gap-3 sm:flex-row">
+                    <div className="flex items-center gap-2">
+                      <span className="text-xs font-medium text-muted-foreground">Période:</span>
+                      <div className="relative">
+                        <Filter className="absolute top-1/2 left-2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+                        <select
+                          className="rounded-lg border border-border bg-card py-1.5 pr-2 pl-7 text-sm text-foreground focus:border-primary/50 focus:ring-2 focus:ring-primary/20 focus:outline-none"
+                          value={selectedPeriod}
+                          onChange={(e) => setSelectedPeriod(e.target.value)}
+                        >
+                          <option value="all">Toutes</option>
+                          <option value="today">Aujourd&apos;hui</option>
+                          <option value="week">Cette semaine</option>
+                          <option value="month">Ce mois</option>
+                        </select>
+                      </div>
+                    </div>
 
-                <div className="flex items-center gap-2">
-                  <span className="text-xs font-medium text-gray-700">Commercial:</span>
-                  <select
-                    className="rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
-                    value={selectedCommercialId}
-                    onChange={(e) =>
-                      setSelectedCommercialId(e.target.value === 'all' ? 'all' : e.target.value)
-                    }
-                  >
-                    <option value="all">Tous</option>
-                    {Array.from(
-                      new Map(
-                        contacts
-                          .filter((c) => c.assignedCommercial)
-                          .map((c) => [c.assignedCommercialId, c.assignedCommercial!]),
-                      ).values(),
-                    ).map((user) => (
-                      <option key={user.id} value={user.id}>
-                        {user.name}
-                      </option>
-                    ))}
-                  </select>
+                    <div className="flex items-center gap-2">
+                      <span className="text-xs font-medium text-muted-foreground">Commercial:</span>
+                      <select
+                        className="rounded-lg border border-border bg-card px-2 py-1.5 text-sm text-foreground focus:border-primary/50 focus:ring-2 focus:ring-primary/20 focus:outline-none"
+                        value={selectedCommercialId}
+                        onChange={(e) =>
+                          setSelectedCommercialId(e.target.value === 'all' ? 'all' : e.target.value)
+                        }
+                      >
+                        <option value="all">Tous</option>
+                        {Array.from(
+                          new Map(
+                            contacts
+                              .filter((c) => c.assignedCommercial)
+                              .map((c) => [c.assignedCommercialId, c.assignedCommercial!]),
+                          ).values(),
+                        ).map((user) => (
+                          <option key={user.id} value={user.id}>
+                            {user.name}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+
+                    <div className="flex items-center gap-2">
+                      <span className="text-xs font-medium text-muted-foreground">Télépro:</span>
+                      <select
+                        className="rounded-lg border border-border bg-card px-2 py-1.5 text-sm text-foreground focus:border-primary/50 focus:ring-2 focus:ring-primary/20 focus:outline-none"
+                        value={selectedTeleproId}
+                        onChange={(e) =>
+                          setSelectedTeleproId(e.target.value === 'all' ? 'all' : e.target.value)
+                        }
+                      >
+                        <option value="all">Tous</option>
+                        {Array.from(
+                          new Map(
+                            contacts
+                              .filter((c) => c.assignedTelepro)
+                              .map((c) => [c.assignedTeleproId, c.assignedTelepro!]),
+                          ).values(),
+                        ).map((user) => (
+                          <option key={user.id} value={user.id}>
+                            {user.name}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+
+                    {isSavingDrag && (
+                      <span className="self-end text-xs text-muted-foreground">
+                        Sauvegarde des changements…
+                      </span>
+                    )}
+                  </div>
                 </div>
 
-                <div className="flex items-center gap-2">
-                  <span className="text-xs font-medium text-gray-700">Télépro:</span>
-                  <select
-                    className="rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
-                    value={selectedTeleproId}
-                    onChange={(e) =>
-                      setSelectedTeleproId(e.target.value === 'all' ? 'all' : e.target.value)
-                    }
+                <div className="shrink-0">
+                  <button
+                    type="button"
+                    onClick={openConfigModal}
+                    className="inline-flex cursor-pointer items-center gap-2 rounded-lg border border-border bg-card px-3 py-2 text-sm font-semibold text-foreground shadow-sm transition-colors duration-200 hover:bg-muted focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:outline-none"
                   >
-                    <option value="all">Tous</option>
-                    {Array.from(
-                      new Map(
-                        contacts
-                          .filter((c) => c.assignedTelepro)
-                          .map((c) => [c.assignedTeleproId, c.assignedTelepro!]),
-                      ).values(),
-                    ).map((user) => (
-                      <option key={user.id} value={user.id}>
-                        {user.name}
-                      </option>
-                    ))}
-                  </select>
+                    <SettingsIcon className="h-4 w-4" />
+                    Configurer
+                  </button>
                 </div>
-
-                {isSavingDrag && (
-                  <span className="self-end text-xs text-gray-400">
-                    Sauvegarde des changements…
-                  </span>
-                )}
               </div>
             </div>
-
-            <div className="shrink-0">
-              <button
-                type="button"
-                onClick={openConfigModal}
-                className="inline-flex cursor-pointer items-center gap-2 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-semibold text-gray-700 shadow-sm transition-colors hover:bg-gray-50 focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-none"
-              >
-                <SettingsIcon className="h-4 w-4" />
-                Configurer
-              </button>
-            </div>
           </div>
-        </div>
-      </div>
-      {error && (
-        <div className="px-4 pt-4 sm:px-6 sm:pt-6">
-          <div className="mb-4 rounded-lg bg-red-50 p-4 text-sm text-red-600">{error}</div>
-        </div>
-      )}
-      {/* Board kanban : taille adaptée au contenu avec padding haut/bas */}
-      <div
-        className="flex gap-4 overflow-x-auto px-4 pt-4 pb-4 sm:px-6 sm:pt-6 sm:pb-6"
-        style={{ scrollbarWidth: 'none' as 'none' }} // for Firefox
-      >
-        <style jsx>{`
-          div::-webkit-scrollbar {
-            display: none;
-          }
-        `}</style>
-        {sortedColumns.map((column) => {
-          const columnContacts = contactsByStatusId.get(column.statusId) || [];
-          const status = column.statusId ? statusesById[column.statusId] : null;
-
-          return (
-            <div
-              key={column.id}
-              className={cn(
-                'flex shrink-0 flex-col rounded-xl bg-gray-50 shadow-sm transition-colors',
-                'h-auto max-h-[calc(100vh-220px)]',
-                dragOverStatusId === column.statusId && 'ring-2 ring-indigo-400 ring-offset-2',
-                dragOverColumnId === column.id &&
-                  draggedColumnId &&
-                  'ring-2 ring-indigo-500 ring-offset-2',
-              )}
-              style={{ width: column.width }}
-              onDragOver={(e) => {
-                // Gérer le drag des colonnes ET des contacts
-                if (draggedColumnId) {
-                  handleColumnHeaderDragOver(e, column.id);
-                } else {
-                  handleColumnDragOver(e, column.statusId);
-                }
-              }}
-              onDrop={(e) => {
-                e.preventDefault();
-                if (draggedColumnId) {
-                  handleColumnHeaderDrop(column.id);
-                } else {
-                  handleColumnDrop(column.statusId);
-                }
-              }}
-              onDragLeave={() => {
-                if (!draggedColumnId) {
-                  setDragOverStatusId(null);
-                }
-                if (draggedColumnId && dragOverColumnId === column.id) {
-                  setDragOverColumnId(null);
-                }
-              }}
-            >
-              <div
-                draggable
-                onDragStart={(e) => {
-                  // Ne pas drag si on drag déjà un contact
-                  if (!draggedCard && !draggingContactId) {
-                    handleColumnHeaderDragStart(column.id);
-                  } else {
-                    e.preventDefault();
-                  }
-                }}
-                onDragEnd={() => {
-                  setDraggedColumnId(null);
-                  setDragOverColumnId(null);
-                }}
-                className={cn(
-                  'flex shrink-0 items-center justify-between rounded-t-xl px-4 py-3 text-sm font-semibold text-white',
-                  'cursor-grab transition-opacity active:cursor-grabbing',
-                  draggedColumnId === column.id && 'opacity-50',
-                )}
-                style={{ backgroundColor: column.color || '#4f46e5' }}
-              >
-                <div className="flex items-center gap-2">
-                  <span>{column.title || status?.name || 'Colonne'}</span>
-                  <span className="rounded-full bg-white/20 px-2 py-0.5 text-xs font-medium">
-                    {columnContacts.length}
-                  </span>
-                </div>
-              </div>
-
-              <div
-                className="min-h-0 flex-1 space-y-3 overflow-y-auto p-3"
-                onDragStart={(e) => {
-                  // Empêcher le drag du header si on drag un contact
-                  if (draggingContactId || draggedCard) {
-                    e.stopPropagation();
-                  }
-                }}
-              >
-                {columnContacts.length === 0 ? (
-                  <div className="mt-4 rounded-lg border border-dashed border-gray-200 bg-white/40 p-4 text-center text-xs text-gray-400">
-                    Les contacts avec ce statut apparaîtront ici
-                  </div>
-                ) : (
-                  columnContacts.map((contact) => (
-                    <KanbanContactCard
-                      key={contact.id}
-                      contact={contact}
-                      isDragging={draggingContactId === contact.id}
-                      onDragStart={() => handleCardDragStart(contact.id, contact.statusId)}
-                      onDragEnd={() => {
-                        setDraggingContactId(null);
-                        setDragOverStatusId(null);
-                      }}
-                    />
-                  ))
-                )}
-              </div>
-            </div>
-          );
-        })}
-      </div>
-      {showConfigModal && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-500/30 p-4 backdrop-blur-sm">
-          <div className="flex w-full max-w-7xl flex-col rounded-2xl bg-white shadow-xl">
-            <div className="flex items-center justify-between border-b border-gray-200 px-6 py-4">
-              <div>
-                <h2 className="text-lg font-semibold text-gray-900">Configuration du Pipeline</h2>
-                <p className="mt-1 text-sm text-gray-500">
-                  Personnalisez les colonnes de votre pipeline de closing.
-                </p>
+          {(statusesError || contactsError) && (
+            <div className="px-4 pt-4 sm:px-6 sm:pt-6">
+              <div className="mb-4 rounded-lg bg-red-50 p-4 text-sm text-red-600">
+                Erreur de chargement des donnees du pipeline.
               </div>
-              <button
-                type="button"
-                onClick={() => setShowConfigModal(false)}
-                className="cursor-pointer rounded-lg p-2 text-gray-400 transition-colors hover:bg-gray-100"
-              >
-                <X className="h-5 w-5" />
-              </button>
             </div>
-
-            <div className="flex-1 overflow-y-auto px-6 py-4">
-              <div className="mb-3 flex items-center justify-between">
-                <div>
-                  <p className="text-sm text-gray-600">
-                    {configColumns.length} colonne
-                    {configColumns.length > 1 ? 's' : ''} configurée
-                    {configColumns.length > 1 ? 's' : ''}.
-                  </p>
-                  <p className="mt-1 text-xs text-gray-400">
-                    Glissez-déposez les colonnes ci-dessous pour organiser l&apos;ordre de votre
-                    pipeline.
+          )}
+          {/* Board kanban : taille adaptée au contenu avec padding haut/bas */}
+          <div
+            className="flex gap-4 overflow-x-auto px-4 pt-4 pb-4 sm:px-6 sm:pt-6 sm:pb-6"
+            style={SCROLLBAR_HIDDEN}
+          >
+            <style jsx>{`
+              div::-webkit-scrollbar {
+                display: none;
+              }
+            `}</style>
+            {sortedColumns.length === 0 ? (
+              <div className="flex w-full items-center justify-center py-16">
+                <div className="max-w-md rounded-xl border-2 border-dashed border-border bg-card p-8 text-center shadow-(--shadow-card)">
+                  <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/15">
+                    <Filter className="h-8 w-8 text-primary" />
+                  </div>
+                  <h3 className="mb-2 text-lg font-semibold text-foreground">
+                    Votre pipeline est vide
+                  </h3>
+                  <p className="mb-6 text-sm text-muted-foreground">
+                    Commencez par configurer les colonnes de votre pipeline de closing en cliquant
+                    sur le bouton ci-dessous.
                   </p>
-                </div>
-                <div className="flex items-center gap-2">
-                  <button
-                    type="button"
-                    onClick={resetToDefaultColumns}
-                    className="inline-flex cursor-pointer items-center gap-1 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-50"
-                  >
-                    Réinitialiser
-                  </button>
                   <button
                     type="button"
-                    onClick={addConfigColumn}
-                    className="inline-flex cursor-pointer items-center gap-2 rounded-lg border border-indigo-600 bg-white px-3 py-1.5 text-sm font-medium text-indigo-600 transition-colors hover:bg-indigo-50"
+                    onClick={openConfigModal}
+                    className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-primary px-4 py-2.5 text-sm font-semibold text-primary-foreground shadow-(--shadow-card) transition-colors duration-200 hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:outline-none"
                   >
-                    <Plus className="h-4 w-4" />
-                    Ajouter une colonne
+                    <SettingsIcon className="h-4 w-4" />
+                    Configurer ma pipeline
                   </button>
                 </div>
               </div>
+            ) : (
+              sortedColumns.map((column) => {
+                const columnContacts = contactsByStatusId.get(column.statusId) || [];
+                const status = column.statusId ? statusesById[column.statusId] : null;
 
-              <div className="flex gap-4 overflow-x-auto p-2">
-                {configColumns.map((column) => (
+                return (
                   <div
                     key={column.id}
-                    draggable
-                    onDragStart={() => setDraggedConfigColumnId(column.id)}
+                    className={cn(
+                      'flex shrink-0 flex-col rounded-xl bg-muted shadow-sm transition-colors',
+                      'h-auto max-h-[calc(100vh-220px)]',
+                      dragOverStatusId === column.statusId &&
+                        'ring-2 ring-blue-400 ring-offset-2',
+                      dragOverColumnId === column.id &&
+                        draggedColumnId &&
+                        'ring-2 ring-blue-500 ring-offset-2',
+                    )}
+                    style={{ width: column.width }}
                     onDragOver={(e) => {
-                      e.preventDefault();
-                      setDragOverConfigColumnId(column.id);
+                      // Gérer le drag des colonnes ET des contacts
+                      if (draggedColumnId) {
+                        handleColumnHeaderDragOver(e, column.id);
+                      } else {
+                        handleColumnDragOver(e, column.statusId);
+                      }
                     }}
                     onDrop={(e) => {
                       e.preventDefault();
-                      handleConfigColumnDrop(column.id);
+                      if (draggedColumnId) {
+                        handleColumnHeaderDrop(column.id);
+                      } else {
+                        handleColumnDrop(column.statusId);
+                      }
+                    }}
+                    onDragLeave={() => {
+                      if (!draggedColumnId) {
+                        setDragOverStatusId(null);
+                      }
+                      if (draggedColumnId && dragOverColumnId === column.id) {
+                        setDragOverColumnId(null);
+                      }
                     }}
-                    onDragLeave={() =>
-                      setDragOverConfigColumnId((current) =>
-                        current === column.id ? null : current,
-                      )
-                    }
-                    className={cn(
-                      'flex w-80 shrink-0 flex-col rounded-xl border border-gray-200 bg-gray-50',
-                      'cursor-grab transition-all duration-150 active:cursor-grabbing',
-                      'hover:-translate-y-1 hover:shadow-lg',
-                      dragOverConfigColumnId === column.id &&
-                        'ring-2 ring-indigo-400 ring-offset-2',
-                    )}
                   >
-                    <div className="p-4">
-                      <div className="mb-3 flex items-center justify-between">
-                        <input
-                          type="text"
-                          value={column.title}
-                          onChange={(e) => updateConfigColumn(column.id, { title: e.target.value })}
-                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
-                          placeholder="Nom de la colonne"
-                        />
-                        <button
-                          type="button"
-                          onClick={() => removeConfigColumn(column.id)}
-                          className="ml-2 cursor-pointer rounded-lg p-1 text-gray-400 transition-colors hover:bg-gray-200 hover:text-red-600"
-                        >
-                          <X className="h-4 w-4" />
-                        </button>
-                      </div>
-
-                      <label className="mb-2 block text-xs font-medium text-gray-600">
-                        Statut associé
-                      </label>
-                      <select
-                        value={column.statusId || ''}
-                        onChange={(e) =>
-                          updateConfigColumn(column.id, {
-                            statusId: e.target.value || null,
-                            title:
-                              e.target.value && statusesById[e.target.value]
-                                ? statusesById[e.target.value].name
-                                : column.title,
-                            color:
-                              e.target.value && statusesById[e.target.value]
-                                ? statusesById[e.target.value].color
-                                : column.color,
-                          })
+                    <div
+                      draggable
+                      onDragStart={(e) => {
+                        // Ne pas drag si on drag déjà un contact
+                        if (!draggedCard && !draggingContactId) {
+                          handleColumnHeaderDragStart(column.id);
+                        } else {
+                          e.preventDefault();
                         }
-                        className="mb-3 w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
-                      >
-                        <option value="">Sélectionnez un statut</option>
-                        {statuses.map((status) => (
-                          <option key={status.id} value={status.id}>
-                            {status.name}
-                          </option>
-                        ))}
-                      </select>
-
-                      <label className="mb-1 block text-xs font-medium text-gray-600">
-                        Couleur de la colonne
-                      </label>
-                      <div className="mb-3 flex items-center gap-2">
-                        <input
-                          type="color"
-                          value={column.color}
-                          onChange={(e) => updateConfigColumn(column.id, { color: e.target.value })}
-                          className="h-8 w-12 cursor-pointer rounded border border-gray-300 bg-white"
-                        />
-                        <input
-                          type="text"
-                          value={column.color}
-                          onChange={(e) => updateConfigColumn(column.id, { color: e.target.value })}
-                          className="flex-1 rounded-lg border border-gray-300 px-2 py-1.5 text-xs text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
-                        />
+                      }}
+                      onDragEnd={() => {
+                        setDraggedColumnId(null);
+                        setDragOverColumnId(null);
+                      }}
+                      className={cn(
+                        'flex shrink-0 items-center justify-between rounded-t-xl px-4 py-3 text-sm font-semibold text-white',
+                        'cursor-grab transition-opacity active:cursor-grabbing',
+                        draggedColumnId === column.id && 'opacity-50',
+                      )}
+                      style={{ backgroundColor: column.color || '#4f46e5' }}
+                    >
+                      <div className="flex items-center gap-2">
+                        <span>{column.title || status?.name || 'Colonne'}</span>
+                        <span className="rounded-full bg-white/20 px-2 py-0.5 text-xs font-medium">
+                          {columnContacts.length}
+                        </span>
                       </div>
+                    </div>
 
-                      <label className="mb-1 block text-xs font-medium text-gray-600">
-                        Largeur de la colonne (px)
-                      </label>
-                      <input
-                        type="range"
-                        min={MIN_WIDTH}
-                        max={MAX_WIDTH}
-                        value={column.width}
-                        onChange={(e) =>
-                          updateConfigColumn(column.id, {
-                            width: Number(e.target.value),
-                          })
+                    <div
+                      className="min-h-0 flex-1 space-y-3 overflow-y-auto p-3"
+                      onDragStart={(e) => {
+                        // Empêcher le drag du header si on drag un contact
+                        if (draggingContactId || draggedCard) {
+                          e.stopPropagation();
                         }
-                        className="w-full"
-                      />
-                      <div className="mt-1 text-right text-xs text-gray-500">{column.width}px</div>
+                      }}
+                    >
+                      {columnContacts.length === 0 ? (
+                        <div className="mt-4 rounded-lg border border-dashed border-gray-200 bg-white/40 p-4 text-center text-xs text-gray-400">
+                          Les contacts avec ce statut apparaîtront ici
+                        </div>
+                      ) : (
+                        columnContacts.map((contact) => (
+                          <KanbanContactCard
+                            key={contact.id}
+                            contact={contact}
+                            isDragging={draggingContactId === contact.id}
+                            canDrag={canManagePipeline}
+                            onDragStart={() => handleCardDragStart(contact.id, contact.statusId)}
+                            onDragEnd={() => {
+                              setDraggingContactId(null);
+                              setDragOverStatusId(null);
+                            }}
+                          />
+                        ))
+                      )}
                     </div>
-                    <div className="flex h-[250px] flex-col items-center justify-center rounded-b-xl bg-white">
-                      <div className="mb-4 flex h-20 w-20 items-center justify-center rounded-full bg-gray-100">
-                        <Filter className="h-8 w-8 text-gray-400" />
-                      </div>
-                      <p className="px-6 text-center text-sm font-medium text-gray-400">
-                        Les contacts avec ce statut apparaîtront ici
+                  </div>
+                );
+              })
+            )}
+          </div>
+          {showConfigModal && (
+            <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-500/30 p-4 backdrop-blur-sm">
+              <div className="flex w-full max-w-7xl flex-col rounded-2xl bg-white shadow-xl">
+                <div className="flex items-center justify-between border-b border-gray-200 px-6 py-4">
+                  <div>
+                    <h2 className="text-lg font-semibold text-gray-900">
+                      Configuration du Pipeline
+                    </h2>
+                    <p className="mt-1 text-sm text-gray-500">
+                      Personnalisez les colonnes de votre pipeline de closing.
+                    </p>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => setShowConfigModal(false)}
+                    className="cursor-pointer rounded-lg p-2 text-gray-400 transition-colors hover:bg-gray-100"
+                  >
+                    <X className="h-5 w-5" />
+                  </button>
+                </div>
+
+                <div className="flex-1 overflow-y-auto px-6 py-4">
+                  <div className="mb-3 flex items-center justify-between">
+                    <div>
+                      <p className="text-sm text-gray-600">
+                        {configColumns.length} colonne
+                        {configColumns.length > 1 ? 's' : ''} configurée
+                        {configColumns.length > 1 ? 's' : ''}.
+                      </p>
+                      <p className="mt-1 text-xs text-gray-400">
+                        Glissez-déposez les colonnes ci-dessous pour organiser l&apos;ordre de votre
+                        pipeline.
                       </p>
                     </div>
+                    <div className="flex items-center gap-2">
+                      <button
+                        type="button"
+                        onClick={resetToDefaultColumns}
+                        className="inline-flex cursor-pointer items-center gap-1 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-50"
+                      >
+                        Réinitialiser
+                      </button>
+                      <button
+                        type="button"
+                        onClick={addConfigColumn}
+                        className="inline-flex cursor-pointer items-center gap-2 rounded-lg border border-blue-600 bg-white px-3 py-1.5 text-sm font-medium text-blue-700 transition-colors hover:bg-blue-50"
+                      >
+                        <Plus className="h-4 w-4" />
+                        Ajouter une colonne
+                      </button>
+                    </div>
                   </div>
-                ))}
-              </div>
-            </div>
 
-            <div className="flex items-center justify-between border-t border-gray-200 px-6 py-4">
-              <button
-                type="button"
-                onClick={() => setShowConfigModal(false)}
-                className="cursor-pointer rounded-lg px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100"
-              >
-                Annuler
-              </button>
-              <button
-                type="button"
-                onClick={handleSaveConfig}
-                className="cursor-pointer rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-indigo-700"
-              >
-                Enregistrer la configuration
-              </button>
+                  <div className="flex gap-4 overflow-x-auto p-2">
+                    {configColumns.map((column) => (
+                      <div
+                        key={column.id}
+                        draggable
+                        onDragStart={() => setDraggedConfigColumnId(column.id)}
+                        onDragOver={(e) => {
+                          e.preventDefault();
+                          setDragOverConfigColumnId(column.id);
+                        }}
+                        onDrop={(e) => {
+                          e.preventDefault();
+                          handleConfigColumnDrop(column.id);
+                        }}
+                        onDragLeave={() =>
+                          setDragOverConfigColumnId((current) =>
+                            current === column.id ? null : current,
+                          )
+                        }
+                        className={cn(
+                          'flex w-80 shrink-0 flex-col rounded-xl border border-gray-200 bg-gray-50',
+                          'cursor-grab transition-all duration-150 active:cursor-grabbing',
+                          'hover:-translate-y-1 hover:shadow-lg',
+                          dragOverConfigColumnId === column.id &&
+                            'ring-2 ring-blue-400 ring-offset-2',
+                        )}
+                      >
+                        <div className="p-4">
+                          <div className="mb-3 flex items-center justify-between">
+                            <input
+                              type="text"
+                              value={column.title}
+                              onChange={(e) =>
+                                updateConfigColumn(column.id, { title: 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"
+                              placeholder="Nom de la colonne"
+                            />
+                            <button
+                              type="button"
+                              onClick={() => removeConfigColumn(column.id)}
+                              className="ml-2 cursor-pointer rounded-lg p-1 text-gray-400 transition-colors hover:bg-gray-200 hover:text-red-600"
+                            >
+                              <X className="h-4 w-4" />
+                            </button>
+                          </div>
+
+                          <label className="mb-2 block text-xs font-medium text-gray-600">
+                            Statut associé
+                          </label>
+                          <select
+                            value={column.statusId || ''}
+                            onChange={(e) =>
+                              updateConfigColumn(column.id, {
+                                statusId: e.target.value || null,
+                                title:
+                                  e.target.value && statusesById[e.target.value]
+                                    ? statusesById[e.target.value].name
+                                    : column.title,
+                                color:
+                                  e.target.value && statusesById[e.target.value]
+                                    ? statusesById[e.target.value].color
+                                    : column.color,
+                              })
+                            }
+                            className="mb-3 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="">Sélectionnez un statut</option>
+                            {statuses.map((status) => (
+                              <option key={status.id} value={status.id}>
+                                {status.name}
+                              </option>
+                            ))}
+                          </select>
+
+                          <label className="mb-1 block text-xs font-medium text-gray-600">
+                            Couleur de la colonne
+                          </label>
+                          <div className="mb-3 flex items-center gap-2">
+                            <input
+                              type="color"
+                              value={column.color}
+                              onChange={(e) =>
+                                updateConfigColumn(column.id, { color: e.target.value })
+                              }
+                              className="h-8 w-12 cursor-pointer rounded border border-gray-300 bg-white"
+                            />
+                            <input
+                              type="text"
+                              value={column.color}
+                              onChange={(e) =>
+                                updateConfigColumn(column.id, { color: e.target.value })
+                              }
+                              className="flex-1 rounded-lg border border-gray-300 px-2 py-1.5 text-xs text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                            />
+                          </div>
+
+                          <label className="mb-1 block text-xs font-medium text-gray-600">
+                            Largeur de la colonne (px)
+                          </label>
+                          <input
+                            type="range"
+                            min={MIN_WIDTH}
+                            max={MAX_WIDTH}
+                            value={column.width}
+                            onChange={(e) =>
+                              updateConfigColumn(column.id, {
+                                width: Number(e.target.value),
+                              })
+                            }
+                            className="w-full"
+                          />
+                          <div className="mt-1 text-right text-xs text-gray-500">
+                            {column.width}px
+                          </div>
+                        </div>
+                        <div className="flex h-[250px] flex-col items-center justify-center rounded-b-xl bg-white">
+                          <div className="mb-4 flex h-20 w-20 items-center justify-center rounded-full bg-gray-100">
+                            <Filter className="h-8 w-8 text-gray-400" />
+                          </div>
+                          <p className="px-6 text-center text-sm font-medium text-gray-400">
+                            Les contacts avec ce statut apparaîtront ici
+                          </p>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                <div className="flex items-center justify-between border-t border-gray-200 px-6 py-4">
+                  <button
+                    type="button"
+                    onClick={() => setShowConfigModal(false)}
+                    className="cursor-pointer rounded-lg px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100"
+                  >
+                    Annuler
+                  </button>
+                  <button
+                    type="button"
+                    onClick={handleSaveConfig}
+                    className="cursor-pointer rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground shadow-sm transition-colors hover:bg-primary/90"
+                  >
+                    Enregistrer la configuration
+                  </button>
+                </div>
+              </div>
             </div>
-          </div>
+          )}
         </div>
       )}
-    </div>
+    </ProtectedPage>
   );
 }