create-crm-tmp 1.0.0

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

@@ -0,0 +1,1052 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import Link from 'next/link';
+import {
+  Filter,
+  Settings as SettingsIcon,
+  Phone,
+  Mail,
+  MapPin,
+  Users,
+  X,
+  Plus,
+  Calendar,
+  Eye,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useMobileMenuContext } from '@/contexts/mobile-menu-context';
+
+interface Status {
+  id: string;
+  name: string;
+  color: string;
+}
+
+interface User {
+  id: string;
+  name: string;
+  email: string;
+}
+
+interface Contact {
+  id: string;
+  civility: string | null;
+  firstName: string | null;
+  lastName: string | null;
+  phone: string;
+  secondaryPhone: string | null;
+  email: string | null;
+  address: string | null;
+  city: string | null;
+  postalCode: string | null;
+  origin: string | null;
+  companyName: string | null;
+  isCompany: boolean;
+  companyId: string | null;
+  companyRelation: Contact | null;
+  statusId: string | null;
+  status: Status | null;
+  assignedCommercialId: string | null;
+  assignedCommercial: User | null;
+  assignedTeleproId: string | null;
+  assignedTelepro: User | null;
+  updatedAt?: string;
+}
+
+interface ClosingColumn {
+  id: string;
+  statusId: string | null;
+  title: string;
+  color: string;
+  width: number;
+  order: number;
+}
+
+const MIN_WIDTH = 280;
+const MAX_WIDTH = 500;
+const LOCAL_STORAGE_KEY = 'closing_pipeline_columns_v1';
+
+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());
+  const dateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  const daysDiff = Math.floor((today.getTime() - dateOnly.getTime()) / (1000 * 60 * 60 * 24));
+
+  if (daysDiff === 0) {
+    return "Aujourd'hui";
+  }
+  if (daysDiff === 1) {
+    return 'Hier';
+  }
+  if (daysDiff < 7) {
+    return `Il y a ${daysDiff} jour${daysDiff > 1 ? 's' : ''}`;
+  }
+  const weeks = Math.floor(daysDiff / 7);
+  if (weeks < 4) {
+    return `Il y a ${weeks} semaine${weeks > 1 ? 's' : ''}`;
+  }
+  const months = Math.floor(daysDiff / 30);
+  if (months < 12) {
+    return `Il y a ${months} mois`;
+  }
+  const years = Math.floor(daysDiff / 365);
+  return `Il y a ${years} an${years > 1 ? 's' : ''}`;
+}
+
+function KanbanContactCard({
+  contact,
+  onDragStart,
+  onDragEnd,
+  isDragging,
+}: {
+  contact: Contact;
+  onDragStart: () => void;
+  onDragEnd: () => void;
+  isDragging: boolean;
+}) {
+  const fullName = `${contact.civility ? `${contact.civility}. ` : ''}${
+    contact.firstName || ''
+  } ${contact.lastName || ''}`.trim();
+
+  const formattedUpdatedAt = contact.updatedAt && formatRelativeDate(contact.updatedAt);
+
+  return (
+    <div
+      draggable
+      onDragStart={onDragStart}
+      onDragEnd={onDragEnd}
+      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',
+      )}
+    >
+      {/* 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"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <Eye className="h-4 w-4 stroke-gray-400" />
+      </Link>
+
+      <div className="block">
+        {contact.companyName && (
+          <p className="mb-1 truncate text-[10px] font-semibold text-gray-400 uppercase">
+            {contact.companyName}
+          </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>
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-semibold text-gray-900">{fullName || 'Sans nom'}</p>
+          </div>
+        </div>
+
+        {contact.email && (
+          <div className="mt-1 flex items-center text-[11px] text-gray-700">
+            <Mail className="mr-1 h-3 w-3 text-gray-400" />
+            <span className="truncate">{contact.email}</span>
+          </div>
+        )}
+
+        {contact.phone && (
+          <div className="mt-1 flex items-center text-[11px] text-gray-700">
+            <Phone className="mr-1 h-3 w-3 text-gray-400" />
+            {contact.phone}
+          </div>
+        )}
+
+        {contact.secondaryPhone && (
+          <div className="mt-1 flex items-center text-[11px] text-gray-500">
+            <Phone className="mr-1 h-3 w-3 text-gray-300" />
+            {contact.secondaryPhone}
+          </div>
+        )}
+
+        {contact.city && (
+          <div className="mt-1 flex items-center text-[11px] text-gray-500">
+            <MapPin className="mr-1 h-3 w-3 text-gray-400" />
+            {contact.city}
+            {contact.postalCode && ` ${contact.postalCode}`}
+          </div>
+        )}
+
+        {contact.assignedTelepro && (
+          <div className="mt-1 flex items-center text-[11px] text-emerald-700">
+            <Users className="mr-1 h-3 w-3 text-emerald-500" />
+            <span className="font-medium">Télépro:&nbsp;</span>
+            <span className="truncate">{contact.assignedTelepro.name}</span>
+          </div>
+        )}
+
+        {contact.assignedCommercial && (
+          <div className="mt-1 flex items-center text-[11px] text-sky-700">
+            <Users className="mr-1 h-3 w-3 text-sky-500" />
+            <span className="font-medium">Commercial:&nbsp;</span>
+            <span className="truncate">{contact.assignedCommercial.name}</span>
+          </div>
+        )}
+
+        <div className="mt-2 w-full border-[0.2px] border-gray-300" />
+
+        {formattedUpdatedAt && (
+          <div className="mt-2 flex items-center text-[11px] text-gray-400">
+            <Calendar className="mr-1 h-3 w-3 text-gray-400" />
+            <span>{formattedUpdatedAt}</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function createDefaultColumns(statuses: Status[]): ClosingColumn[] {
+  return statuses.map((status, idx) => ({
+    id: status.id,
+    statusId: status.id,
+    title: status.name,
+    color: status.color || '#4f46e5',
+    width: 320,
+    order: idx,
+  }));
+}
+
+export default function ClosingPage() {
+  const { toggle: toggleMobileMenu, isOpen: isMobileMenuOpen } = useMobileMenuContext();
+  const [statuses, setStatuses] = useState<Status[]>([]);
+  const [contacts, setContacts] = useState<Contact[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [columns, setColumns] = useState<ClosingColumn[]>([]);
+  const [draggedCard, setDraggedCard] = useState<{
+    contactId: string;
+    fromStatusId: string | null;
+  } | null>(null);
+  const [draggingContactId, setDraggingContactId] = useState<string | null>(null);
+  const [dragOverStatusId, setDragOverStatusId] = useState<string | null>(null);
+  const [isSavingDrag, setIsSavingDrag] = useState(false);
+
+  const [showConfigModal, setShowConfigModal] = useState(false);
+  const [configColumns, setConfigColumns] = useState<ClosingColumn[]>([]);
+  const [draggedConfigColumnId, setDraggedConfigColumnId] = useState<string | null>(null);
+  const [dragOverConfigColumnId, setDragOverConfigColumnId] = useState<string | null>(null);
+
+  // États pour le drag & drop des colonnes dans le board
+  const [draggedColumnId, setDraggedColumnId] = useState<string | null>(null);
+  const [dragOverColumnId, setDragOverColumnId] = useState<string | null>(null);
+
+  const [selectedCompanyId, setSelectedCompanyId] = 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'),
+        ]);
+
+        if (!statusRes.ok) {
+          throw new Error('Erreur lors du chargement des statuts');
+        }
+        if (!contactsRes.ok) {
+          throw new Error('Erreur lors du chargement des contacts');
+        }
+
+        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);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  const statusesById = useMemo(() => {
+    const map: Record<string, Status> = {};
+    statuses.forEach((s) => {
+      map[s.id] = s;
+    });
+    return map;
+  }, [statuses]);
+
+  const sortedColumns = useMemo(() => [...columns].sort((a, b) => a.order - b.order), [columns]);
+
+  const filteredContacts = useMemo(() => {
+    return contacts.filter((c) => {
+      if (selectedCompanyId !== 'all' && c.companyId !== selectedCompanyId) {
+        return false;
+      }
+      if (selectedCommercialId !== 'all' && c.assignedCommercialId !== selectedCommercialId) {
+        return false;
+      }
+      if (selectedTeleproId !== 'all' && c.assignedTeleproId !== selectedTeleproId) {
+        return false;
+      }
+      // Filtre par période (basé sur updatedAt)
+      if (selectedPeriod !== 'all') {
+        const updatedDate = c.updatedAt ? new Date(c.updatedAt) : null;
+        if (!updatedDate) return false;
+        const now = new Date();
+        const daysDiff = Math.floor(
+          (now.getTime() - updatedDate.getTime()) / (1000 * 60 * 60 * 24),
+        );
+
+        switch (selectedPeriod) {
+          case 'today':
+            if (daysDiff !== 0) return false;
+            break;
+          case 'week':
+            if (daysDiff > 7) return false;
+            break;
+          case 'month':
+            if (daysDiff > 30) return false;
+            break;
+        }
+      }
+      return true;
+    });
+  }, [contacts, selectedCompanyId, selectedPeriod, selectedCommercialId, selectedTeleproId]);
+
+  const contactsByStatusId = useMemo(() => {
+    const map = new Map<string | null, Contact[]>();
+    sortedColumns.forEach((col) => {
+      map.set(col.statusId, []);
+    });
+
+    filteredContacts.forEach((contact) => {
+      const key = contact.statusId || null;
+      if (!map.has(key)) {
+        return;
+      }
+      map.get(key)!.push(contact);
+    });
+
+    return map;
+  }, [filteredContacts, sortedColumns]);
+
+  const handleCardDragStart = (contactId: string, fromStatusId: string | null) => {
+    setDraggedCard({ contactId, fromStatusId });
+    setDraggingContactId(contactId);
+  };
+
+  const handleColumnDragOver = (e: React.DragEvent<HTMLDivElement>, statusId: string | null) => {
+    e.preventDefault();
+    setDragOverStatusId(statusId);
+  };
+
+  const handleColumnDrop = async (targetStatusId: string | null) => {
+    if (!draggedCard) return;
+
+    const { contactId, fromStatusId } = draggedCard;
+    if (fromStatusId === targetStatusId) {
+      setDraggedCard(null);
+      return;
+    }
+
+    setContacts((prev) =>
+      prev.map((c) =>
+        c.id === contactId
+          ? {
+              ...c,
+              statusId: targetStatusId,
+              status: targetStatusId ? statusesById[targetStatusId] || c.status : c.status,
+            }
+          : c,
+      ),
+    );
+    setDraggedCard(null);
+    setDraggingContactId(null);
+    setDragOverStatusId(null);
+
+    if (targetStatusId) {
+      try {
+        setIsSavingDrag(true);
+        const res = await fetch(`/api/contacts/${contactId}`, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ statusId: targetStatusId }),
+        });
+        if (!res.ok) {
+          throw new Error('Erreur lors de la mise à jour du statut');
+        }
+      } catch (e) {
+        console.error(e);
+      } finally {
+        setIsSavingDrag(false);
+      }
+    }
+  };
+
+  // Handlers pour le drag & drop des colonnes dans le board
+  const handleColumnHeaderDragStart = (columnId: string) => {
+    setDraggedColumnId(columnId);
+  };
+
+  const handleColumnHeaderDragOver = (e: React.DragEvent<HTMLDivElement>, columnId: string) => {
+    e.preventDefault();
+    if (draggedColumnId && draggedColumnId !== columnId) {
+      setDragOverColumnId(columnId);
+    }
+  };
+
+  const handleColumnHeaderDrop = (targetColumnId: string) => {
+    if (!draggedColumnId || draggedColumnId === targetColumnId) {
+      setDraggedColumnId(null);
+      setDragOverColumnId(null);
+      return;
+    }
+
+    const draggedIndex = sortedColumns.findIndex((c) => c.id === draggedColumnId);
+    const targetIndex = sortedColumns.findIndex((c) => c.id === targetColumnId);
+
+    if (draggedIndex === -1 || targetIndex === -1) {
+      setDraggedColumnId(null);
+      setDragOverColumnId(null);
+      return;
+    }
+
+    // Réorganiser les colonnes
+    const newColumns = [...sortedColumns];
+    const [removed] = newColumns.splice(draggedIndex, 1);
+    newColumns.splice(targetIndex, 0, removed);
+
+    // Mettre à jour l'ordre
+    const reorderedColumns = newColumns.map((col, idx) => ({
+      ...col,
+      order: idx,
+    }));
+
+    setColumns(reorderedColumns);
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(reorderedColumns));
+    }
+
+    setDraggedColumnId(null);
+    setDragOverColumnId(null);
+  };
+
+  const openConfigModal = () => {
+    setConfigColumns([...columns].sort((a, b) => a.order - b.order));
+    setShowConfigModal(true);
+  };
+
+  const addConfigColumn = () => {
+    const usedStatusIds = new Set(configColumns.map((c) => c.statusId).filter(Boolean) as string[]);
+    const availableStatus = statuses.find((s) => !usedStatusIds.has(s.id));
+    const statusId = availableStatus?.id || null;
+
+    const newCol: ClosingColumn = {
+      id: `tmp-${Date.now()}`,
+      statusId,
+      title: availableStatus?.name || 'Nouvelle colonne',
+      color: availableStatus?.color || '#e5e7eb',
+      width: 320,
+      order: configColumns.length,
+    };
+    setConfigColumns((prev) => [...prev, newCol]);
+  };
+
+  const updateConfigColumn = (id: string, patch: Partial<ClosingColumn>) => {
+    setConfigColumns((prev) => prev.map((col) => (col.id === id ? { ...col, ...patch } : col)));
+  };
+
+  const removeConfigColumn = (id: string) => {
+    setConfigColumns((prev) =>
+      prev
+        .filter((col) => col.id !== id)
+        .map((col, idx) => ({
+          ...col,
+          order: idx,
+        })),
+    );
+  };
+
+  const handleSaveConfig = () => {
+    const normalized = [...configColumns]
+      .filter((col) => col.statusId)
+      .map((col, idx) => ({
+        ...col,
+        order: idx,
+        id: col.id.startsWith('tmp-') ? `${Date.now()}-${idx}` : col.id,
+      }));
+
+    setColumns(normalized);
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(normalized));
+    }
+    setShowConfigModal(false);
+  };
+
+  const handleConfigColumnDrop = (targetId: string) => {
+    if (!draggedConfigColumnId || draggedConfigColumnId === targetId) {
+      setDraggedConfigColumnId(null);
+      setDragOverConfigColumnId(null);
+      return;
+    }
+
+    setConfigColumns((prev) => {
+      const fromIndex = prev.findIndex((c) => c.id === draggedConfigColumnId);
+      const toIndex = prev.findIndex((c) => c.id === targetId);
+      if (fromIndex === -1 || toIndex === -1 || fromIndex === toIndex) {
+        return prev;
+      }
+
+      const updated = [...prev];
+      const [moved] = updated.splice(fromIndex, 1);
+      updated.splice(toIndex, 0, moved);
+
+      return updated.map((col, idx) => ({
+        ...col,
+        order: idx,
+      }));
+    });
+
+    setDraggedConfigColumnId(null);
+    setDragOverConfigColumnId(null);
+  };
+
+  const resetToDefaultColumns = () => {
+    const defaults = createDefaultColumns(statuses);
+    setConfigColumns(defaults);
+  };
+
+  // Récupérer les entreprises uniques pour le filtre
+  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 });
+      }
+    });
+    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 className="flex items-start gap-3">
+            {/* Mobile menu button */}
+            <button
+              onClick={toggleMobileMenu}
+              className="mt-1 shrink-0 cursor-pointer rounded-lg p-2 text-gray-700 transition-colors hover:bg-gray-100 lg:hidden"
+              aria-label="Toggle menu"
+            >
+              <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                {isMobileMenuOpen ? (
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                ) : (
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M4 6h16M4 12h16M4 18h16"
+                  />
+                )}
+              </svg>
+            </button>
+            <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>
+            </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>
+        </div>
+      </div>
+    );
+  }
+
+  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">
+          {/* Mobile menu button */}
+          <button
+            onClick={toggleMobileMenu}
+            className="mt-1 shrink-0 cursor-pointer rounded-lg p-2 text-gray-700 transition-colors hover:bg-gray-100 lg:hidden"
+            aria-label="Toggle menu"
+          >
+            <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              {isMobileMenuOpen ? (
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              ) : (
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 6h16M4 12h16M4 18h16"
+                />
+              )}
+            </svg>
+          </button>
+          <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>
+
+                <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>
+
+                <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)
+                    }
+                  >
+                    <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-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>
+              </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-indigo-600 bg-white px-3 py-1.5 text-sm font-medium text-indigo-600 transition-colors hover:bg-indigo-50"
+                  >
+                    <Plus className="h-4 w-4" />
+                    Ajouter une colonne
+                  </button>
+                </div>
+              </div>
+
+              <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-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,
+                          })
+                        }
+                        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"
+                        />
+                      </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-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>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}