create-crm-tmp 1.0.0

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

@@ -0,0 +1,3051 @@
+'use client';
+
+import { useState, useEffect, useRef, useMemo } from 'react';
+import { useUserRole } from '@/hooks/use-user-role';
+import { cn } from '@/lib/utils';
+import {
+  Calendar,
+  Clock,
+  User,
+  CheckCircle2,
+  Circle,
+  ChevronLeft,
+  ChevronRight,
+  Video,
+  ExternalLink,
+  X,
+  Bookmark,
+} from 'lucide-react';
+import { Editor, type DefaultTemplateRef } from '@/components/editor';
+import Link from 'next/link';
+import { AgendaMonthSkeleton, AgendaWeekSkeleton, AgendaDaySkeleton } from '@/components/skeleton';
+
+interface Task {
+  id: string;
+  type: 'CALL' | 'MEETING' | 'EMAIL' | 'OTHER' | 'VIDEO_CONFERENCE';
+  title: string | null;
+  description: string;
+  priority: 'LOW' | 'MEDIUM' | 'HIGH' | 'URGENT';
+  scheduledAt: string;
+  completed: boolean;
+  reminderMinutesBefore?: number | null;
+  googleMeetLink?: string | null;
+  durationMinutes?: number | null;
+  contact: {
+    id: string;
+    firstName: string | null;
+    lastName: string | null;
+  } | null;
+  assignedUser: {
+    id: string;
+    name: string;
+  };
+}
+
+const PRIORITY_COLORS = {
+  LOW: '#10B981', // Vert
+  MEDIUM: '#3B82F6', // Bleu
+  HIGH: '#F59E0B', // Orange
+  URGENT: '#EF4444', // Rouge
+};
+
+const PRIORITY_LABELS = {
+  LOW: 'Faible',
+  MEDIUM: 'Moyenne',
+  HIGH: 'Haute',
+  URGENT: 'Urgente',
+};
+
+// Couleurs par type d'événement
+const TYPE_COLORS = {
+  CALL: '#8B5CF6', // Violet pour les appels
+  EMAIL: '#6366F1', // Indigo pour les emails
+  OTHER: '#64748B', // Gris pour autres tâches
+  MEETING: '#3B82F6', // Bleu pour les rendez-vous
+  VIDEO_CONFERENCE: '#10B981', // Vert pour Google Meet
+};
+
+const TASK_TYPE_LABELS = {
+  CALL: 'Appel téléphonique',
+  MEETING: 'RDV',
+  EMAIL: 'Email',
+  OTHER: 'Autre',
+  VIDEO_CONFERENCE: 'Google Meet',
+};
+
+const HOURS = Array.from({ length: 17 }, (_, i) => i + 6); // 6h à 22h
+
+const formatHourLabel = (hour: number) => {
+  return new Date(0, 0, 0, hour).toLocaleTimeString('fr-FR', {
+    hour: 'numeric',
+    minute: '2-digit',
+  });
+};
+
+export default function AgendaPage() {
+  const { isAdmin } = useUserRole();
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [currentDate, setCurrentDate] = useState(new Date());
+  const [view, setView] = useState<'month' | 'week' | 'day'>('week');
+  const [showCreateTaskModal, setShowCreateTaskModal] = useState(false);
+  const [googleConnected, setGoogleConnected] = useState(false);
+  const [currentTime, setCurrentTime] = useState<Date | null>(null);
+
+  // Mettre à jour l'heure actuelle en continu côté client uniquement
+  useEffect(() => {
+    const updateTime = () => setCurrentTime(new Date());
+    updateTime(); // première synchro immédiate après le montage
+
+    const interval = setInterval(updateTime, 1000); // Mise à jour chaque seconde
+    return () => clearInterval(interval);
+  }, []);
+  
+  // Filtres par type d'événement et priorité
+  const [filters, setFilters] = useState<{
+    tasks: boolean; // Tâches (CALL, EMAIL, OTHER)
+    meetings: boolean; // Rendez-vous physiques (MEETING)
+    googleMeets: boolean; // Google Meet (VIDEO_CONFERENCE)
+    priorities: {
+      LOW: boolean;
+      MEDIUM: boolean;
+      HIGH: boolean;
+      URGENT: boolean;
+    };
+  }>({
+    tasks: true,
+    meetings: true,
+    googleMeets: true,
+    priorities: {
+      LOW: true,
+      MEDIUM: true,
+      HIGH: true,
+      URGENT: true,
+    },
+  });
+  const [showFiltersMenu, setShowFiltersMenu] = useState(false);
+  const filtersMenuRef = useRef<HTMLDivElement>(null);
+  const [showCreateMeetModal, setShowCreateMeetModal] = useState(false);
+  const [showCreateMeetingModal, setShowCreateMeetingModal] = useState(false);
+  
+  // États pour Google Meet
+  const meetEditorRef = useRef<DefaultTemplateRef | null>(null);
+  const [creatingMeet, setCreatingMeet] = useState(false);
+  const [meetError, setMeetError] = useState('');
+  const [meetData, setMeetData] = useState<{
+    title: string;
+    description: string;
+    scheduledAt: string;
+    durationMinutes: number;
+    attendees: string[];
+    reminderMinutesBefore: number | null;
+    internalNote: string;
+  }>({
+    title: '',
+    description: '',
+    scheduledAt: '',
+    durationMinutes: 30,
+    attendees: [],
+    reminderMinutesBefore: null,
+    internalNote: '',
+  });
+
+  // États pour rendez-vous physique
+  const meetingEditorRef = useRef<DefaultTemplateRef | null>(null);
+  const [creatingMeeting, setCreatingMeeting] = useState(false);
+  const [meetingError, setMeetingError] = useState('');
+  const [meetingData, setMeetingData] = useState<{
+    title: string;
+    description: string;
+    scheduledAt: string;
+    priority: 'LOW' | 'MEDIUM' | 'HIGH' | 'URGENT';
+    reminderMinutesBefore: number | null;
+    notifyContact: boolean;
+    internalNote: string;
+    attendees: string[];
+  }>({
+    title: '',
+    description: '',
+    scheduledAt: '',
+    priority: 'MEDIUM',
+    reminderMinutesBefore: null,
+    notifyContact: false,
+    internalNote: '',
+    attendees: [],
+  });
+
+  // Vérifier si Google est connecté pour Google Meet
+  useEffect(() => {
+    const checkGoogleConnection = async () => {
+      try {
+        const response = await fetch('/api/auth/google/status');
+        if (response.ok) {
+          const data = await response.json();
+          setGoogleConnected(!!data.connected);
+        } else {
+          setGoogleConnected(false);
+        }
+      } catch (error) {
+        console.error('Erreur lors de la vérification de Google:', error);
+        setGoogleConnected(false);
+      }
+    };
+
+    checkGoogleConnection();
+  }, []);
+
+  // Édition d'un Google Meet
+  const [showEditMeetModal, setShowEditMeetModal] = useState(false);
+  const [editingMeetTask, setEditingMeetTask] = useState<Task | null>(null);
+  const [editMeetData, setEditMeetData] = useState<{
+    scheduledAt: string;
+    durationMinutes: number;
+  }>({
+    scheduledAt: '',
+    durationMinutes: 30,
+  });
+  const [editMeetLoading, setEditMeetLoading] = useState(false);
+  const [editMeetError, setEditMeetError] = useState('');
+  const [createTaskError, setCreateTaskError] = useState('');
+  const [creatingTask, setCreatingTask] = useState(false);
+  const [createTaskData, setCreateTaskData] = useState<{
+    type: 'CALL' | 'MEETING' | 'EMAIL' | 'OTHER';
+    title: string;
+    description: string;
+    scheduledAt: string;
+    priority: 'LOW' | 'MEDIUM' | 'HIGH' | 'URGENT';
+    reminderMinutesBefore: number | null;
+  }>({
+    type: 'OTHER',
+    title: '',
+    description: '',
+    scheduledAt: '',
+    priority: 'MEDIUM',
+    reminderMinutesBefore: null,
+  });
+
+  // Détail / édition d'une tâche générique (non liée à un contact)
+  const [showTaskDetailModal, setShowTaskDetailModal] = useState(false);
+  const [selectedTask, setSelectedTask] = useState<Task | null>(null);
+  const [taskDetailError, setTaskDetailError] = useState('');
+  const [taskDetailLoading, setTaskDetailLoading] = useState(false);
+  const [taskDeleteLoading, setTaskDeleteLoading] = useState(false);
+  const [taskDetailData, setTaskDetailData] = useState<{
+    title: string;
+    description: string;
+    scheduledAt: string;
+    priority: 'LOW' | 'MEDIUM' | 'HIGH' | 'URGENT';
+    completed: boolean;
+  }>({
+    title: '',
+    description: '',
+    scheduledAt: '',
+    priority: 'MEDIUM',
+    completed: false,
+  });
+
+  // Synchronisation automatique Google Sheets
+  useEffect(() => {
+    const syncGoogleSheet = async () => {
+      try {
+        await fetch('/api/integrations/google-sheet/sync', {
+          method: 'POST',
+        });
+      } catch (err) {
+        console.error('Erreur lors de la synchronisation Google Sheets:', err);
+      }
+    };
+
+    syncGoogleSheet();
+  }, []);
+
+  // Fermer le menu de filtres en cliquant en dehors
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (filtersMenuRef.current && !filtersMenuRef.current.contains(event.target as Node)) {
+        setShowFiltersMenu(false);
+      }
+    };
+
+    if (showFiltersMenu) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [showFiltersMenu]);
+
+  // Calculer le début et la fin du mois/semaine/jour
+  const getDateRange = () => {
+    const year = currentDate.getFullYear();
+    const month = currentDate.getMonth();
+
+    if (view === 'month') {
+      const start = new Date(year, month, 1);
+      const end = new Date(year, month + 1, 0, 23, 59, 59);
+      return { start, end };
+    } else if (view === 'week') {
+      const start = new Date(currentDate);
+      start.setDate(start.getDate() - start.getDay() + 1); // Lundi
+      const end = new Date(start);
+      end.setDate(end.getDate() + 6);
+      end.setHours(23, 59, 59);
+      return { start, end };
+    } else {
+      const start = new Date(currentDate);
+      start.setHours(0, 0, 0);
+      const end = new Date(currentDate);
+      end.setHours(23, 59, 59);
+      return { start, end };
+    }
+  };
+
+  useEffect(() => {
+    fetchTasks();
+  }, [currentDate, view]);
+
+  const fetchTasks = async () => {
+    try {
+      setLoading(true);
+      const { start, end } = getDateRange();
+      const response = await fetch(
+        `/api/tasks?startDate=${start.toISOString()}&endDate=${end.toISOString()}`,
+      );
+      if (response.ok) {
+        const data = await response.json();
+        setTasks(data);
+      }
+    } catch (error) {
+      console.error('Erreur lors du chargement des tâches:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Filtrer les tâches selon les filtres sélectionnés
+  const filteredTasks = useMemo(() => {
+    return tasks.filter((task) => {
+      // Filtre par type
+      let typeMatch = false;
+      if (task.type === 'VIDEO_CONFERENCE') {
+        typeMatch = filters.googleMeets;
+      } else if (task.type === 'MEETING') {
+        typeMatch = filters.meetings;
+      } else if (['CALL', 'EMAIL', 'OTHER'].includes(task.type)) {
+        typeMatch = filters.tasks;
+      } else {
+        typeMatch = true;
+      }
+
+      // Filtre par priorité
+      const priorityMatch = filters.priorities[task.priority];
+
+      return typeMatch && priorityMatch;
+    });
+  }, [tasks, filters]);
+
+  const navigateDate = (direction: 'prev' | 'next') => {
+    const newDate = new Date(currentDate);
+    if (view === 'month') {
+      newDate.setMonth(newDate.getMonth() + (direction === 'next' ? 1 : -1));
+    } else if (view === 'week') {
+      newDate.setDate(newDate.getDate() + (direction === 'next' ? 7 : -7));
+    } else {
+      newDate.setDate(newDate.getDate() + (direction === 'next' ? 1 : -1));
+    }
+    setCurrentDate(newDate);
+  };
+
+  const goToToday = () => {
+    setCurrentDate(new Date());
+  };
+
+  const getDaysInMonth = () => {
+    const year = currentDate.getFullYear();
+    const month = currentDate.getMonth();
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+    const daysInMonth = lastDay.getDate();
+    const startingDayOfWeek = firstDay.getDay() === 0 ? 6 : firstDay.getDay() - 1; // Lundi = 0
+
+    const days = [];
+    // Jours du mois précédent
+    const prevMonth = new Date(year, month - 1, 0);
+    for (let i = startingDayOfWeek - 1; i >= 0; i--) {
+      days.push({
+        date: new Date(year, month - 1, prevMonth.getDate() - i),
+        isCurrentMonth: false,
+      });
+    }
+    // Jours du mois actuel
+    for (let i = 1; i <= daysInMonth; i++) {
+      days.push({
+        date: new Date(year, month, i),
+        isCurrentMonth: true,
+      });
+    }
+    // Jours du mois suivant pour compléter la grille
+    const remainingDays = 42 - days.length; // 6 semaines * 7 jours
+    for (let i = 1; i <= remainingDays; i++) {
+      days.push({
+        date: new Date(year, month + 1, i),
+        isCurrentMonth: false,
+      });
+    }
+
+    return days;
+  };
+
+  const getTasksForDate = (date: Date) => {
+    return filteredTasks.filter((task) => {
+      const taskDate = new Date(task.scheduledAt);
+      return (
+        taskDate.getDate() === date.getDate() &&
+        taskDate.getMonth() === date.getMonth() &&
+        taskDate.getFullYear() === date.getFullYear()
+      );
+    });
+  };
+
+  const formatDate = (date: Date) => {
+    return date.toLocaleDateString('fr-FR', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+  };
+
+  const formatTime = (dateString: string) => {
+    return new Date(dateString).toLocaleTimeString('fr-FR', {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  const getWeekDays = () => {
+    const start = new Date(currentDate);
+    const day = start.getDay() === 0 ? 7 : start.getDay(); // dimanche = 7
+    start.setDate(start.getDate() - (day - 1)); // lundi
+
+    const days: Date[] = [];
+    for (let i = 0; i < 7; i++) {
+      const d = new Date(start);
+      d.setDate(start.getDate() + i);
+      days.push(d);
+    }
+    return days;
+  };
+
+  const formatHeaderDate = () => {
+    if (view === 'month') {
+      // Exemple : "Décembre 2025"
+      const str = currentDate.toLocaleDateString('fr-FR', {
+        year: 'numeric',
+        month: 'long',
+      });
+      return str.charAt(0).toUpperCase() + str.slice(1);
+    }
+
+    if (view === 'week') {
+      const days = getWeekDays();
+      const start = days[0];
+      const end = days[6];
+
+      const startStr = start.toLocaleDateString('fr-FR', {
+        day: 'numeric',
+        month: 'long',
+      });
+
+      // Si le mois ou l'année change dans la semaine, on les affiche dans la partie "fin"
+      const endStr = end.toLocaleDateString('fr-FR', {
+        day: 'numeric',
+        month: 'long',
+        year: 'numeric',
+      });
+
+      return `Du ${startStr} au ${endStr}`;
+    }
+
+    // Vue jour : "16 décembre 2025"
+    return currentDate.toLocaleDateString('fr-FR', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+  };
+
+  const toggleTaskComplete = async (taskId: string, currentStatus: boolean) => {
+    try {
+      const response = await fetch(`/api/tasks/${taskId}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ completed: !currentStatus }),
+      });
+
+      if (response.ok) {
+        fetchTasks();
+      }
+    } catch (error) {
+      console.error('Erreur lors de la mise à jour de la tâche:', error);
+    }
+  };
+
+  const handleCreateTaskFromAgenda = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setCreateTaskError('');
+    setCreatingTask(true);
+
+    try {
+      if (!createTaskData.scheduledAt) {
+        setCreateTaskError('La date/heure est requise');
+        setCreatingTask(false);
+        return;
+      }
+
+      if (!createTaskData.description.trim()) {
+        setCreateTaskError('La description est requise');
+        setCreatingTask(false);
+        return;
+      }
+
+      const response = await fetch('/api/tasks', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          type: createTaskData.type,
+          title: createTaskData.title || null,
+          description: createTaskData.description,
+          priority: createTaskData.priority,
+          scheduledAt: createTaskData.scheduledAt,
+          // Pas de contactId ni d'assignation explicite : la tâche sera créée
+          // uniquement pour l'utilisateur connecté côté backend
+          reminderMinutesBefore:
+            typeof createTaskData.reminderMinutesBefore === 'number'
+              ? createTaskData.reminderMinutesBefore
+              : null,
+        }),
+      });
+
+      const data = await response.json();
+      if (!response.ok) {
+        throw new Error(data.error || 'Erreur lors de la création de la tâche');
+      }
+
+      setShowCreateTaskModal(false);
+      setCreateTaskData({
+        type: 'OTHER',
+        title: '',
+        description: '',
+        scheduledAt: '',
+        priority: 'MEDIUM',
+        reminderMinutesBefore: null,
+      });
+      await fetchTasks();
+    } catch (error: any) {
+      setCreateTaskError(error.message || 'Erreur lors de la création de la tâche');
+    } finally {
+      setCreatingTask(false);
+    }
+  };
+
+  const handleCreateMeet = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setMeetError('');
+    setCreatingMeet(true);
+
+    try {
+      if (!meetEditorRef.current) {
+        setMeetError("L'éditeur n'est pas prêt. Veuillez réessayer.");
+        setCreatingMeet(false);
+        return;
+      }
+
+      const htmlContent = await meetEditorRef.current.getHTML();
+
+      if (!meetData.scheduledAt) {
+        setMeetError('La date/heure est requise');
+        setCreatingMeet(false);
+        return;
+      }
+
+      if (!meetData.title) {
+        setMeetError('Le titre est requis');
+        setCreatingMeet(false);
+        return;
+      }
+
+      if (!googleConnected) {
+        setMeetError(
+          'Vous devez connecter votre compte Google dans les paramètres avant de pouvoir créer un Google Meet.',
+        );
+        setCreatingMeet(false);
+        return;
+      }
+
+      const response = await fetch('/api/tasks/meet', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          title: meetData.title,
+          description: htmlContent || '',
+          scheduledAt: meetData.scheduledAt,
+          durationMinutes: meetData.durationMinutes,
+          attendees: meetData.attendees.filter((email) => email.trim() !== ''),
+          reminderMinutesBefore: meetData.reminderMinutesBefore,
+          internalNote: meetData.internalNote || null,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Erreur lors de la création du Google Meet');
+      }
+
+      setShowCreateMeetModal(false);
+      setMeetData({
+        title: '',
+        description: '',
+        scheduledAt: '',
+        durationMinutes: 30,
+        attendees: [],
+        reminderMinutesBefore: null,
+        internalNote: '',
+      });
+      meetEditorRef.current?.injectHTML('');
+      await fetchTasks();
+    } catch (err: any) {
+      setMeetError(err.message);
+    } finally {
+      setCreatingMeet(false);
+    }
+  };
+
+  const handleCreateMeeting = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setMeetingError('');
+    setCreatingMeeting(true);
+
+    try {
+      if (!meetingEditorRef.current) {
+        setMeetingError("L'éditeur n'est pas prêt. Veuillez réessayer.");
+        setCreatingMeeting(false);
+        return;
+      }
+
+      const htmlContent = await meetingEditorRef.current.getHTML();
+      const plainText = (htmlContent || '')
+        .replace(/<br\s*\/?>/gi, '\n')
+        .replace(/<\/p>/gi, '\n\n')
+        .replace(/<[^>]+>/g, '')
+        .replace(/&nbsp;/g, ' ')
+        .replace(/\s+/g, ' ')
+        .trim();
+
+      if (!meetingData.scheduledAt) {
+        setMeetingError('La date/heure est requise');
+        setCreatingMeeting(false);
+        return;
+      }
+
+      if (!plainText) {
+        setMeetingError('La description est requise');
+        setCreatingMeeting(false);
+        return;
+      }
+
+      const response = await fetch('/api/tasks', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          type: 'MEETING',
+          title: meetingData.title || null,
+          description: htmlContent || '',
+          priority: meetingData.priority,
+          scheduledAt: meetingData.scheduledAt,
+          reminderMinutesBefore: meetingData.reminderMinutesBefore ?? null,
+          notifyContact: meetingData.notifyContact,
+          internalNote: meetingData.internalNote || null,
+          attendees: meetingData.attendees.filter((email) => email.trim() !== ''),
+        }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Erreur lors de la création du rendez-vous');
+      }
+
+      setShowCreateMeetingModal(false);
+      setMeetingData({
+        title: '',
+        description: '',
+        scheduledAt: '',
+        priority: 'MEDIUM',
+        reminderMinutesBefore: null,
+        notifyContact: false,
+        internalNote: '',
+        attendees: [],
+      });
+      meetingEditorRef.current?.injectHTML('');
+      await fetchTasks();
+    } catch (err: any) {
+      setMeetingError(err.message);
+    } finally {
+      setCreatingMeeting(false);
+    }
+  };
+
+  const openTaskDetailModal = (task: Task) => {
+    // On n'ouvre la modal que pour les tâches non liées à un contact (tâches "perso")
+    if (task.contact) return;
+
+    setSelectedTask(task);
+    setTaskDetailData({
+      title: task.title || '',
+      description: task.description || '',
+      scheduledAt: task.scheduledAt,
+      priority: task.priority,
+      completed: task.completed,
+    });
+    setTaskDetailError('');
+    setShowTaskDetailModal(true);
+  };
+
+  const handleUpdateTaskDetail = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!selectedTask) return;
+
+    setTaskDetailError('');
+    setTaskDetailLoading(true);
+
+    try {
+      if (!taskDetailData.scheduledAt) {
+        setTaskDetailError('La date/heure est requise');
+        setTaskDetailLoading(false);
+        return;
+      }
+
+      if (!taskDetailData.description.trim()) {
+        setTaskDetailError('La description est requise');
+        setTaskDetailLoading(false);
+        return;
+      }
+
+      const response = await fetch(`/api/tasks/${selectedTask.id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          title: taskDetailData.title || null,
+          description: taskDetailData.description,
+          priority: taskDetailData.priority,
+          scheduledAt: taskDetailData.scheduledAt,
+          completed: taskDetailData.completed,
+        }),
+      });
+
+      const data = await response.json();
+      if (!response.ok) {
+        throw new Error(data.error || 'Erreur lors de la mise à jour de la tâche');
+      }
+
+      setShowTaskDetailModal(false);
+      setSelectedTask(null);
+      await fetchTasks();
+    } catch (error: any) {
+      setTaskDetailError(error.message || 'Erreur lors de la mise à jour de la tâche');
+    } finally {
+      setTaskDetailLoading(false);
+    }
+  };
+
+  const handleDeleteTask = async () => {
+    if (!selectedTask) return;
+
+    if (!confirm('Voulez-vous vraiment supprimer cette tâche ?')) {
+      return;
+    }
+
+    setTaskDeleteLoading(true);
+    setTaskDetailError('');
+
+    try {
+      const response = await fetch(`/api/tasks/${selectedTask.id}`, {
+        method: 'DELETE',
+      });
+
+      const data = await response.json();
+      if (!response.ok) {
+        throw new Error(data.error || 'Erreur lors de la suppression de la tâche');
+      }
+
+      setShowTaskDetailModal(false);
+      setSelectedTask(null);
+      await fetchTasks();
+    } catch (error: any) {
+      setTaskDetailError(error.message || 'Erreur lors de la suppression de la tâche');
+    } finally {
+      setTaskDeleteLoading(false);
+    }
+  };
+
+  const openEditMeetModal = (task: Task) => {
+    const scheduled = new Date(task.scheduledAt);
+    setEditingMeetTask(task);
+    setEditMeetData({
+      scheduledAt: scheduled.toISOString(),
+      durationMinutes: task.durationMinutes ?? 30,
+    });
+    setEditMeetError('');
+    setShowEditMeetModal(true);
+  };
+
+  const handleUpdateMeet = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!editingMeetTask) return;
+
+    setEditMeetError('');
+    setEditMeetLoading(true);
+
+    try {
+      if (!editMeetData.scheduledAt) {
+        setEditMeetError('La date/heure est requise');
+        setEditMeetLoading(false);
+        return;
+      }
+
+      const response = await fetch(`/api/tasks/${editingMeetTask.id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          scheduledAt: editMeetData.scheduledAt,
+          durationMinutes: editMeetData.durationMinutes,
+        }),
+      });
+
+      const data = await response.json();
+      if (!response.ok) {
+        throw new Error(data.error || 'Erreur lors de la mise à jour du rendez-vous');
+      }
+
+      setShowEditMeetModal(false);
+      setEditingMeetTask(null);
+      setEditMeetLoading(false);
+      await fetchTasks();
+    } catch (error: any) {
+      setEditMeetError(error.message || 'Erreur lors de la mise à jour du rendez-vous');
+      setEditMeetLoading(false);
+    }
+  };
+
+  // Ne pas afficher le skeleton global, on l'affiche par vue
+
+  // Fonction pour formater la date pour l'affichage dans le header
+  const formatHeaderDateRange = () => {
+    if (view === 'month') {
+      const year = currentDate.getFullYear();
+      const month = currentDate.getMonth();
+      const start = new Date(year, month, 1);
+      const end = new Date(year, month + 1, 0);
+      const startStr = start.toLocaleDateString('fr-FR', {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+      });
+      const endStr = end.toLocaleDateString('fr-FR', {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+      });
+      return `${startStr} - ${endStr}`;
+    } else if (view === 'week') {
+      const days = getWeekDays();
+      const start = days[0];
+      const end = days[6];
+      const startStr = start.toLocaleDateString('fr-FR', {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+      });
+      const endStr = end.toLocaleDateString('fr-FR', {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+      });
+      return `${startStr} - ${endStr}`;
+    } else {
+      return currentDate.toLocaleDateString('fr-FR', {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+      });
+    }
+  };
+
+  const formatCurrentMonthYear = () => {
+    return currentDate.toLocaleDateString('fr-FR', {
+      year: 'numeric',
+      month: 'long',
+    });
+  };
+
+  const formatCurrentDay = () => {
+    const day = currentDate.getDate();
+    const month = currentDate.toLocaleDateString('fr-FR', { month: 'short' }).toUpperCase();
+    return { day, month };
+  };
+
+  return (
+    <div className="bg-crms-bg flex h-full flex-col">
+      {/* Header avec titre et navigation */}
+      <div className="border-b border-gray-200 bg-white px-4 py-4 sm:px-6 lg:px-8">
+        {/* Titre et informations de date */}
+        <div className="mb-4 flex items-start justify-between gap-4">
+          <div className="flex items-start gap-4">
+            {/* Date actuelle en grand */}
+            <div className="flex flex-col">
+              <div className="text-3xl font-bold text-gray-900">{formatCurrentDay().day}</div>
+              <div className="text-xs font-medium text-gray-500 uppercase">
+                {formatCurrentDay().month}
+              </div>
+            </div>
+            <div className="flex flex-col">
+              <h1 className="text-2xl font-bold text-gray-900">Agenda</h1>
+              <p className="mt-1 text-sm text-gray-500">{formatCurrentMonthYear()}</p>
+              <p className="text-xs text-gray-400">{formatHeaderDateRange()}</p>
+            </div>
+          </div>
+
+          {/* Actions à droite */}
+          <div className="flex items-center gap-2">
+              <button
+              type="button"
+              onClick={() => setShowCreateMeetModal(true)}
+              className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-green-600 px-3 py-2 text-xs font-semibold text-white shadow-sm transition-colors hover:bg-green-700 sm:px-4 sm:text-sm"
+              >
+              <Video className="h-4 w-4" />
+              <span className="hidden sm:inline">Google Meet</span>
+              </button>
+              <button
+              type="button"
+              onClick={() => setShowCreateMeetingModal(true)}
+              className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-blue-600 px-3 py-2 text-xs font-semibold text-white shadow-sm transition-colors hover:bg-blue-700 sm:px-4 sm:text-sm"
+              >
+              <Calendar className="h-4 w-4" />
+              <span className="hidden sm:inline">Rendez-vous</span>
+              </button>
+              <button
+              type="button"
+              onClick={() => setShowCreateTaskModal(true)}
+              className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-indigo-600 px-3 py-2 text-xs font-semibold text-white shadow-sm transition-colors hover:bg-indigo-700 sm:px-4 sm:text-sm"
+            >
+              <Bookmark className="h-4 w-4" />
+              <span className="hidden sm:inline">Tâche</span>
+              <span className="sm:hidden">Ajouter</span>
+              </button>
+          </div>
+            </div>
+            
+        {/* Filtres et navigation */}
+        <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+          {/* Filtres d'événements */}
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={() =>
+                setFilters({
+                  tasks: true,
+                  meetings: true,
+                  googleMeets: true,
+                  priorities: {
+                    LOW: true,
+                    MEDIUM: true,
+                    HIGH: true,
+                    URGENT: true,
+                  },
+                })
+              }
+              className={cn(
+                'cursor-pointer rounded-full px-3 py-1.5 text-xs font-medium transition-colors',
+                filters.tasks && filters.meetings && filters.googleMeets
+                  ? 'bg-gray-100 text-gray-900'
+                  : 'bg-white text-gray-600 hover:bg-gray-50',
+              )}
+            >
+              Tous les événements
+            </button>
+              <button
+                type="button"
+              onClick={() =>
+                setFilters({
+                  tasks: true,
+                  meetings: false,
+                  googleMeets: false,
+                  priorities: filters.priorities,
+                })
+              }
+              className={cn(
+                'cursor-pointer rounded-full px-3 py-1.5 text-xs font-medium transition-colors',
+                filters.tasks && !filters.meetings && !filters.googleMeets
+                  ? 'bg-gray-100 text-gray-900'
+                  : 'bg-white text-gray-600 hover:bg-gray-50',
+              )}
+            >
+              Tâches
+              </button>
+            <button
+              type="button"
+              onClick={() =>
+                setFilters({
+                  tasks: false,
+                  meetings: true,
+                  googleMeets: false,
+                  priorities: filters.priorities,
+                })
+                        }
+              className={cn(
+                'cursor-pointer rounded-full px-3 py-1.5 text-xs font-medium transition-colors',
+                !filters.tasks && filters.meetings && !filters.googleMeets
+                  ? 'bg-gray-100 text-gray-900'
+                  : 'bg-white text-gray-600 hover:bg-gray-50',
+              )}
+            >
+              Rendez-vous
+            </button>
+            <button
+              type="button"
+              onClick={() =>
+                setFilters({
+                  tasks: false,
+                  meetings: false,
+                  googleMeets: true,
+                  priorities: filters.priorities,
+                })
+                        }
+              className={cn(
+                'cursor-pointer rounded-full px-3 py-1.5 text-xs font-medium transition-colors',
+                !filters.tasks && !filters.meetings && filters.googleMeets
+                  ? 'bg-gray-100 text-gray-900'
+                  : 'bg-white text-gray-600 hover:bg-gray-50',
+              )}
+            >
+              Google Meet
+            </button>
+            </div>
+            
+          {/* Filtres par priorité */}
+          <div className="flex items-center gap-2">
+            <span className="text-xs font-medium text-gray-500">Priorité:</span>
+              <button
+                type="button"
+              onClick={() =>
+                setFilters({
+                  ...filters,
+                  priorities: {
+                    ...filters.priorities,
+                    LOW: !filters.priorities.LOW,
+                  },
+                })
+              }
+              className={cn(
+                'cursor-pointer rounded-full px-2.5 py-1 text-xs font-medium transition-colors',
+                filters.priorities.LOW
+                  ? 'bg-green-100 text-green-700'
+                  : 'bg-white text-gray-400 hover:bg-gray-50',
+              )}
+            >
+              Faible
+              </button>
+              <button
+                type="button"
+              onClick={() =>
+                setFilters({
+                  ...filters,
+                  priorities: {
+                    ...filters.priorities,
+                    MEDIUM: !filters.priorities.MEDIUM,
+                  },
+                })
+              }
+              className={cn(
+                'cursor-pointer rounded-full px-2.5 py-1 text-xs font-medium transition-colors',
+                filters.priorities.MEDIUM
+                  ? 'bg-blue-100 text-blue-700'
+                  : 'bg-white text-gray-400 hover:bg-gray-50',
+              )}
+            >
+              Moyenne
+              </button>
+              <button
+                type="button"
+              onClick={() =>
+                setFilters({
+                  ...filters,
+                  priorities: {
+                    ...filters.priorities,
+                    HIGH: !filters.priorities.HIGH,
+                  },
+                })
+              }
+              className={cn(
+                'cursor-pointer rounded-full px-2.5 py-1 text-xs font-medium transition-colors',
+                filters.priorities.HIGH
+                  ? 'bg-orange-100 text-orange-700'
+                  : 'bg-white text-gray-400 hover:bg-gray-50',
+              )}
+            >
+              Haute
+            </button>
+            <button
+              type="button"
+              onClick={() =>
+                setFilters({
+                  ...filters,
+                  priorities: {
+                    ...filters.priorities,
+                    URGENT: !filters.priorities.URGENT,
+                  },
+                })
+              }
+              className={cn(
+                'cursor-pointer rounded-full px-2.5 py-1 text-xs font-medium transition-colors',
+                filters.priorities.URGENT
+                  ? 'bg-red-100 text-red-700'
+                  : 'bg-white text-gray-400 hover:bg-gray-50',
+              )}
+            >
+              Urgente
+              </button>
+            </div>
+
+          {/* Navigation et sélecteur de vue */}
+          <div className="flex items-center gap-2">
+            {/* Navigation de date */}
+            <div className="flex items-center gap-1 rounded-lg border border-gray-200 bg-white p-1">
+              <button
+                onClick={() => navigateDate('prev')}
+                className="cursor-pointer rounded-md p-1.5 text-gray-600 transition-colors hover:bg-gray-100"
+                aria-label="Date précédente"
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </button>
+              <button
+                onClick={goToToday}
+                className="cursor-pointer rounded-md px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-100"
+              >
+                Aujourd'hui
+              </button>
+              <button
+                onClick={() => navigateDate('next')}
+                className="cursor-pointer rounded-md p-1.5 text-gray-600 transition-colors hover:bg-gray-100"
+                aria-label="Date suivante"
+              >
+                <ChevronRight className="h-4 w-4" />
+              </button>
+          </div>
+
+            {/* Sélecteur de vue */}
+            <select
+              value={view}
+              onChange={(e) => setView(e.target.value as 'month' | 'week' | 'day')}
+              className="cursor-pointer rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+            >
+              <option value="month">Vue mois</option>
+              <option value="week">Vue semaine</option>
+              <option value="day">Vue jour</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8">
+        {view === 'month' && (
+          <>
+            {loading ? (
+              <AgendaMonthSkeleton />
+            ) : (
+              <div className="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
+                <div className="grid grid-cols-7 border-b border-gray-200 bg-gray-50/60">
+                  {['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'].map((day) => (
+                    <div
+                      key={day}
+                      className="border-r border-gray-200 px-4 py-3 text-center text-xs font-medium tracking-wide text-gray-500 uppercase last:border-r-0"
+                    >
+                      {day}
+                    </div>
+                  ))}
+                </div>
+                <div className="grid grid-cols-7 divide-x divide-y divide-gray-100">
+                  {getDaysInMonth().map((day, index) => {
+                    const dayTasks = getTasksForDate(day.date);
+                    const isToday = day.date.toDateString() === new Date().toDateString();
+
+                    return (
+                      <div
+                        key={index}
+                        onClick={() => {
+                          setCurrentDate(day.date);
+                          setView('day');
+                        }}
+                        className={cn(
+                          'min-h-[120px] cursor-pointer p-2 transition-colors hover:bg-gray-50/50',
+                          !day.isCurrentMonth && 'bg-gray-50/30',
+                          isToday && 'bg-indigo-50/40',
+                        )}
+                      >
+                        <div className="relative">
+                        <div
+                          className={cn(
+                              'mb-2 text-sm font-semibold',
+                            isToday
+                              ? 'text-indigo-600'
+                              : day.isCurrentMonth
+                                ? 'text-gray-900'
+                                : 'text-gray-400',
+                          )}
+                        >
+                          {day.date.getDate()}
+                          </div>
+                          {/* Indicateur d'heure actuelle dans la vue mois */}
+                          {isToday && (
+                            <div className="absolute top-0 right-0 h-1.5 w-1.5 rounded-full bg-blue-500" />
+                          )}
+                        </div>
+                        <div className="space-y-1" onClick={(e) => e.stopPropagation()}>
+                          {dayTasks.slice(0, 3).map((task) => {
+                            const typeColor = TYPE_COLORS[task.type] || '#64748B';
+                            return (
+                            <Link
+                              key={task.id}
+                              href={task.contact ? `/contacts/${task.contact.id}` : '#'}
+                              className={cn(
+                                  'block rounded px-2 py-1 text-xs transition-colors',
+                                  task.contact
+                                    ? 'cursor-pointer hover:opacity-80'
+                                    : 'cursor-default',
+                              )}
+                              style={{
+                                  backgroundColor: `${typeColor}15`,
+                                  borderLeft: `3px solid ${typeColor}`,
+                              }}
+                              title={`${TASK_TYPE_LABELS[task.type]} - ${task.title || 'Sans titre'}`}
+                              onClick={(e) => {
+                                if (!task.contact) {
+                                  e.preventDefault();
+                                }
+                                e.stopPropagation();
+                              }}
+                            >
+                                <div className="flex items-center gap-1.5">
+                                  <div className="flex-1 truncate font-medium text-gray-900">
+                                {formatTime(task.scheduledAt)}{' '}
+                                {task.title || TASK_TYPE_LABELS[task.type]}
+                                  </div>
+                                  <span
+                                    className="shrink-0 rounded-full px-1.5 py-0.5 text-[10px] font-medium"
+                                    style={{
+                                      backgroundColor: `${PRIORITY_COLORS[task.priority]}20`,
+                                      color: PRIORITY_COLORS[task.priority],
+                                    }}
+                                  >
+                                    {PRIORITY_LABELS[task.priority].charAt(0)}
+                                  </span>
+                              </div>
+                            </Link>
+                            );
+                          })}
+                          {dayTasks.length > 3 && (
+                            <div className="px-2 text-xs text-gray-500">
+                              +{dayTasks.length - 3} autre(s)
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+          </>
+        )}
+
+        {/* Vue semaine */}
+        {view === 'week' && (
+          <>
+            {loading ? (
+              <AgendaWeekSkeleton />
+            ) : (
+              <div className="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
+                <div className="overflow-auto">
+                  <div
+                    className="grid border-b border-gray-200 bg-gray-50/60"
+                    style={{ gridTemplateColumns: '59px repeat(7, 1fr)' }}
+                  >
+                    <div className="px-2 py-3 text-right text-xs font-medium text-gray-500"></div>
+                  {getWeekDays().map((day) => {
+                    const isToday = day.toDateString() === new Date().toDateString();
+                    return (
+                      <div
+                        key={day.toISOString()}
+                          className={cn('border-l border-gray-200 px-3 py-3 text-center')}
+                      >
+                          <div className="text-xs font-medium text-gray-500 uppercase">
+                          {day.toLocaleDateString('fr-FR', { weekday: 'short' }).replace('.', '')}
+                        </div>
+                        <div
+                          className={cn(
+                              'mx-auto mt-2 flex h-8 w-8 items-center justify-center rounded-full text-sm font-semibold',
+                              isToday ? 'bg-gray-900 text-white' : 'text-gray-900',
+                          )}
+                        >
+                          {day.getDate()}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+                  <div
+                    className="relative grid"
+                    style={{ gridTemplateColumns: '60px repeat(7, 1fr)' }}
+                  >
+                  {/* Colonne des heures */}
+                    <div className="relative border-r border-gray-200 bg-gray-50/40">
+                      {HOURS.map((hour) => {
+                        // Vérifier si l'heure actuelle est dans cette plage horaire
+                        const weekDays = getWeekDays();
+                        const isCurrentWeek =
+                          currentTime &&
+                          weekDays.some(
+                            (day) => day.toDateString() === currentTime.toDateString(),
+                          );
+                        const shouldHideHour =
+                          isCurrentWeek &&
+                          currentTime &&
+                          currentTime.getHours() === hour &&
+                          currentTime.getMinutes() >= 0 &&
+                          currentTime.getMinutes() < 60;
+
+                        return (
+                      <div
+                        key={hour}
+                            className="relative flex h-16 items-start justify-end border-b border-gray-100 pt-1 pr-2 text-xs text-gray-500"
+                      >
+                            {!shouldHideHour && formatHourLabel(hour)}
+                      </div>
+                        );
+                      })}
+                      {/* Heure actuelle dans la colonne des heures (calculée uniquement côté client) */}
+                      {currentTime &&
+                        (() => {
+                          const weekDays = getWeekDays();
+                          const isCurrentWeek = weekDays.some(
+                            (day) => day.toDateString() === currentTime.toDateString(),
+                          );
+                          if (isCurrentWeek) {
+                            const currentHour = currentTime.getHours();
+                            const currentMinutes = currentTime.getMinutes();
+                            const slotHeight = 64;
+                            const currentTimeMinutes = currentHour * 60 + currentMinutes;
+                            const top = (currentTimeMinutes - HOURS[0] * 60) * (slotHeight / 60);
+                            if (top >= 0 && top <= HOURS.length * slotHeight) {
+                              return (
+                                <div
+                                  className="absolute right-0 z-20 flex items-center"
+                                  style={{ top: `${top}px`, transform: 'translateY(-50%)' }}
+                                >
+                                  <div className="mr-1 h-2 w-2 rounded-full bg-blue-500" />
+                                  <span className="pr-2 text-xs font-medium text-blue-600">
+                                    {currentTime.toLocaleTimeString('fr-FR', {
+                                      hour: '2-digit',
+                                      minute: '2-digit',
+                                    })}
+                                  </span>
+                                </div>
+                              );
+                            }
+                          }
+                          return null;
+                        })()}
+                  </div>
+
+                  {/* Colonnes des jours */}
+                    {getWeekDays().map((day) => {
+                      // Récupérer toutes les tâches du jour
+                      const dayTasks = filteredTasks.filter((task) => {
+                          const d = new Date(task.scheduledAt);
+                          return (
+                            d.getFullYear() === day.getFullYear() &&
+                            d.getMonth() === day.getMonth() &&
+                          d.getDate() === day.getDate()
+                          );
+                        });
+
+                      const isToday =
+                        currentTime && day.toDateString() === currentTime.toDateString();
+                      const slotHeight = 64;
+                      const currentTimeMinutes =
+                        currentTime?.getHours() != null
+                          ? currentTime.getHours() * 60 + currentTime.getMinutes()
+                          : 0;
+                      const currentTimeTop =
+                        isToday && currentTime
+                          ? (currentTimeMinutes - HOURS[0] * 60) * (slotHeight / 60)
+                          : -1;
+
+                        return (
+                        <div key={day.toISOString()} className="relative border-l border-gray-100">
+                          {/* Barre de l'heure actuelle */}
+                          {isToday &&
+                            currentTimeTop >= 0 &&
+                            currentTimeTop <= HOURS.length * slotHeight && (
+                              <div
+                                className="absolute right-0 left-0 z-20 flex items-center"
+                                style={{
+                                  top: `${currentTimeTop}px`,
+                                  transform: 'translateY(-50%)',
+                                }}
+                              >
+                                <div className="h-0.5 w-full border-t border-b border-dashed border-blue-400 bg-blue-500" />
+                                <div className="absolute left-0 h-2 w-2 -translate-x-1/2 rounded-full bg-blue-500" />
+                              </div>
+                            )}
+
+                          {/* Afficher les tâches positionnées absolument */}
+                          {dayTasks.map((task) => {
+                            const d = new Date(task.scheduledAt);
+                            const taskHour = d.getHours();
+                            const taskMinutes = d.getMinutes();
+                            const duration = task.durationMinutes || 30;
+                            const startMinutes = taskHour * 60 + taskMinutes;
+                            const endMinutes = startMinutes + duration;
+                            const top = (startMinutes - HOURS[0] * 60) * (slotHeight / 60);
+                            const height = duration * (slotHeight / 60);
+
+                            const typeColor = TYPE_COLORS[task.type] || '#64748B';
+                            return (
+                              <div
+                                key={task.id}
+                                className="absolute right-1.5 left-1.5 z-10 rounded px-2 py-1 text-xs shadow-sm"
+                                style={{
+                                  top: `${top}px`,
+                                  height: `${height}px`,
+                                  minHeight: '20px',
+                                  backgroundColor: `${typeColor}15`,
+                                  borderLeft: `3px solid ${typeColor}`,
+                                }}
+                              >
+                                <div className="flex items-center gap-1.5">
+                                  <div className="flex-1 truncate font-medium text-gray-900">
+                                    {task.title || TASK_TYPE_LABELS[task.type]}
+                                  </div>
+                                  <span
+                                    className="shrink-0 rounded-full px-1.5 py-0.5 text-[10px] font-medium"
+                                    style={{
+                                      backgroundColor: `${PRIORITY_COLORS[task.priority]}20`,
+                                      color: PRIORITY_COLORS[task.priority],
+                                    }}
+                                  >
+                                    {PRIORITY_LABELS[task.priority].charAt(0)}
+                                  </span>
+                                </div>
+                                {task.contact && (
+                                  <div className="mt-0.5 truncate text-[10px] text-gray-600">
+                                      {task.contact.firstName} {task.contact.lastName}
+                                  </div>
+                                )}
+                              </div>
+                            );
+                          })}
+
+                          {/* Grille des heures */}
+                          {HOURS.map((hour) => (
+                            <div key={hour} className="h-16 border-b border-gray-100" />
+                            ))}
+                          </div>
+                        );
+                      })}
+                    </div>
+                </div>
+              </div>
+            )}
+          </>
+        )}
+
+        {/* Liste des tâches de la semaine (en bas) */}
+        {view === 'week' && !loading && (
+          <div className="mt-6">
+            <h2 className="mb-4 text-lg font-semibold text-gray-900">
+              Toutes les tâches de la semaine
+            </h2>
+            <div className="space-y-3">
+              {filteredTasks.length === 0 ? (
+                <div className="rounded-xl border border-gray-200 bg-white p-8 text-center shadow-sm">
+                  <p className="text-gray-500">Aucune tâche pour cette semaine</p>
+                </div>
+              ) : (
+                filteredTasks.map((task) => {
+                  const TaskContent = (
+                    <div className="flex items-start justify-between">
+                      <div className="flex-1">
+                        <div className="flex items-center gap-2">
+                          <button
+                            type="button"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              toggleTaskComplete(task.id, task.completed);
+                            }}
+                            className="cursor-pointer text-gray-400 hover:text-indigo-600"
+                          >
+                            {task.completed ? (
+                              <CheckCircle2 className="h-5 w-5 text-indigo-600" />
+                            ) : (
+                              <Circle className="h-5 w-5" />
+                            )}
+                          </button>
+                          <div className="flex-1">
+                            <div className="flex items-center gap-2">
+                              <span
+                                className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium"
+                                style={{
+                                  backgroundColor: `${PRIORITY_COLORS[task.priority]}20`,
+                                  color: PRIORITY_COLORS[task.priority],
+                                }}
+                              >
+                                {PRIORITY_LABELS[task.priority]}
+                              </span>
+                              <span className="text-sm text-gray-500">
+                                {TASK_TYPE_LABELS[task.type]}
+                              </span>
+                            </div>
+                            <h3
+                              className={cn(
+                                'mt-1 text-base font-semibold',
+                                task.completed ? 'text-gray-400 line-through' : 'text-gray-900',
+                              )}
+                            >
+                              {task.title || TASK_TYPE_LABELS[task.type]}
+                            </h3>
+                            {task.contact && (
+                              <div className="mt-1 inline-flex items-center gap-1 text-sm text-indigo-600">
+                                <User className="h-4 w-4" />
+                                <span>
+                                  {task.contact.firstName} {task.contact.lastName}
+                                </span>
+                              </div>
+                            )}
+                            {task.googleMeetLink && (
+                              <div className="mt-2 flex flex-wrap items-center gap-2">
+                                <button
+                                  type="button"
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    if (task.googleMeetLink) {
+                                      window.open(
+                                        task.googleMeetLink,
+                                        '_blank',
+                                        'noopener,noreferrer',
+                                      );
+                                    }
+                                  }}
+                                  className="inline-flex items-center gap-1.5 rounded-lg border border-indigo-200 bg-indigo-50 px-3 py-1.5 text-sm font-medium text-indigo-700 transition-colors hover:bg-indigo-100"
+                                >
+                                  <Video className="h-4 w-4" />
+                                  <span>Rejoindre Google Meet</span>
+                                  <ExternalLink className="h-3 w-3" />
+                                </button>
+                                <button
+                                  type="button"
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    openEditMeetModal(task);
+                                  }}
+                                  className="inline-flex cursor-pointer items-center gap-1.5 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"
+                                >
+                                  Modifier le rendez-vous
+                                </button>
+                              </div>
+                            )}
+                            <div className="mt-2 flex items-center gap-4 text-sm text-gray-500">
+                              <div className="flex items-center gap-1">
+                                <Clock className="h-4 w-4" />
+                                {formatTime(task.scheduledAt)}
+                              </div>
+                              <div className="flex items-center gap-1">
+                                <Calendar className="h-4 w-4" />
+                                {new Date(task.scheduledAt).toLocaleDateString('fr-FR')}
+                              </div>
+                              {isAdmin && (
+                                <div className="flex items-center gap-1">
+                                  <User className="h-4 w-4" />
+                                  {task.assignedUser.name}
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  );
+
+                  if (task.contact) {
+                    return (
+                      <Link
+                        key={task.id}
+                        href={`/contacts/${task.contact.id}`}
+                        onClick={(e) => {
+                          // Empêcher la navigation si on clique sur un bouton ou un lien
+                          const target = e.target as HTMLElement;
+                          if (
+                            target.tagName === 'BUTTON' ||
+                            target.closest('button') ||
+                            target.tagName === 'A' ||
+                            target.closest('a')
+                          ) {
+                            e.preventDefault();
+                          }
+                        }}
+                        className="block rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition-colors hover:border-indigo-300 hover:shadow-md"
+                      >
+                        {TaskContent}
+                      </Link>
+                    );
+                  }
+
+                  return (
+                    <div
+                      key={task.id}
+                      className="cursor-pointer rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition-colors hover:border-indigo-300 hover:shadow-md"
+                      onClick={() => openTaskDetailModal(task)}
+                    >
+                      {TaskContent}
+                    </div>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Vue jour : liste des tâches */}
+        {view === 'day' && (
+          <>
+            {loading ? (
+              <AgendaDaySkeleton />
+            ) : (
+              <div className="space-y-3">
+                {filteredTasks.length === 0 ? (
+                  <div className="rounded-xl border border-gray-200 bg-white p-8 text-center shadow-sm">
+                    <p className="text-gray-500">Aucune tâche pour cette journée</p>
+                  </div>
+                ) : (
+                  filteredTasks.map((task) => {
+                    const TaskContent = (
+                      <div className="flex items-start justify-between">
+                        <div className="flex-1">
+                          <div className="flex items-center gap-2">
+                            <button
+                              type="button"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                toggleTaskComplete(task.id, task.completed);
+                              }}
+                              className="cursor-pointer text-gray-400 hover:text-indigo-600"
+                            >
+                              {task.completed ? (
+                                <CheckCircle2 className="h-5 w-5 text-indigo-600" />
+                              ) : (
+                                <Circle className="h-5 w-5" />
+                              )}
+                            </button>
+                            <div className="flex-1">
+                              <div className="flex items-center gap-2">
+                                <span
+                                  className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium"
+                                  style={{
+                                    backgroundColor: `${PRIORITY_COLORS[task.priority]}20`,
+                                    color: PRIORITY_COLORS[task.priority],
+                                  }}
+                                >
+                                  {PRIORITY_LABELS[task.priority]}
+                                </span>
+                                <span className="text-sm text-gray-500">
+                                  {TASK_TYPE_LABELS[task.type]}
+                                </span>
+                              </div>
+                              <h3
+                                className={cn(
+                                  'mt-1 text-base font-semibold',
+                                  task.completed ? 'text-gray-400 line-through' : 'text-gray-900',
+                                )}
+                              >
+                                {task.title || TASK_TYPE_LABELS[task.type]}
+                              </h3>
+                              {task.contact && (
+                                <div className="mt-1 inline-flex items-center gap-1 text-sm text-indigo-600">
+                                  <User className="h-4 w-4" />
+                                  <span>
+                                    {task.contact.firstName} {task.contact.lastName}
+                                  </span>
+                                </div>
+                              )}
+                              {task.googleMeetLink && (
+                                <div className="mt-2 flex flex-wrap items-center gap-2">
+                                  <button
+                                    type="button"
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      if (task.googleMeetLink) {
+                                        window.open(
+                                          task.googleMeetLink,
+                                          '_blank',
+                                          'noopener,noreferrer',
+                                        );
+                                      }
+                                    }}
+                                    className="inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-indigo-200 bg-indigo-50 px-3 py-1.5 text-sm font-medium text-indigo-700 transition-colors hover:bg-indigo-100"
+                                  >
+                                    <Video className="h-4 w-4" />
+                                    <span>Rejoindre Google Meet</span>
+                                    <ExternalLink className="h-3 w-3" />
+                                  </button>
+                                  <button
+                                    type="button"
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      openEditMeetModal(task);
+                                    }}
+                                    className="inline-flex cursor-pointer items-center gap-1.5 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"
+                                  >
+                                    Modifier le rendez-vous
+                                  </button>
+                                </div>
+                              )}
+                              <div className="mt-2 flex items-center gap-4 text-sm text-gray-500">
+                                <div className="flex items-center gap-1">
+                                  <Clock className="h-4 w-4" />
+                                  {formatTime(task.scheduledAt)}
+                                </div>
+                                <div className="flex items-center gap-1">
+                                  <Calendar className="h-4 w-4" />
+                                  {new Date(task.scheduledAt).toLocaleDateString('fr-FR')}
+                                </div>
+                                {isAdmin && (
+                                  <div className="flex items-center gap-1">
+                                    <User className="h-4 w-4" />
+                                    {task.assignedUser.name}
+                                  </div>
+                                )}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    );
+
+                    if (task.contact) {
+                      return (
+                        <Link
+                          key={task.id}
+                          href={`/contacts/${task.contact.id}`}
+                          onClick={(e) => {
+                            // Empêcher la navigation si on clique sur un bouton ou un lien
+                            const target = e.target as HTMLElement;
+                            if (
+                              target.tagName === 'BUTTON' ||
+                              target.closest('button') ||
+                              target.tagName === 'A' ||
+                              target.closest('a')
+                            ) {
+                              e.preventDefault();
+                            }
+                          }}
+                          className="block rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition-colors hover:border-indigo-300 hover:shadow-md"
+                        >
+                          {TaskContent}
+                        </Link>
+                      );
+                    }
+
+                    return (
+                      <div
+                        key={task.id}
+                        className="cursor-pointer rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition-colors hover:border-indigo-300 hover:shadow-md"
+                        onClick={() => openTaskDetailModal(task)}
+                      >
+                        {TaskContent}
+                      </div>
+                    );
+                  })
+                )}
+              </div>
+            )}
+          </>
+        )}
+
+        {/* Liste des tâches du mois (en bas) */}
+        {view === 'month' && !loading && (
+          <div className="mt-6">
+            <h2 className="mb-4 text-lg font-semibold text-gray-900">Toutes les tâches du mois</h2>
+            <div className="space-y-3">
+              {filteredTasks.length === 0 ? (
+                <div className="rounded-xl border border-gray-200 bg-white p-8 text-center shadow-sm">
+                  <p className="text-gray-500">Aucune tâche pour ce mois</p>
+                </div>
+              ) : (
+                filteredTasks.map((task) => {
+                  const TaskContent = (
+                    <div className="flex items-start justify-between">
+                      <div className="flex-1">
+                        <div className="flex items-center gap-2">
+                          <button
+                            type="button"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              toggleTaskComplete(task.id, task.completed);
+                            }}
+                            className="cursor-pointer text-gray-400 hover:text-indigo-600"
+                          >
+                            {task.completed ? (
+                              <CheckCircle2 className="h-5 w-5 text-indigo-600" />
+                            ) : (
+                              <Circle className="h-5 w-5" />
+                            )}
+                          </button>
+                          <div className="flex-1">
+                            <div className="flex items-center gap-2">
+                              <span
+                                className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium"
+                                style={{
+                                  backgroundColor: `${PRIORITY_COLORS[task.priority]}20`,
+                                  color: PRIORITY_COLORS[task.priority],
+                                }}
+                              >
+                                {PRIORITY_LABELS[task.priority]}
+                              </span>
+                              <span className="text-sm text-gray-500">
+                                {TASK_TYPE_LABELS[task.type]}
+                              </span>
+                            </div>
+                            <h3
+                              className={cn(
+                                'mt-1 text-base font-semibold',
+                                task.completed ? 'text-gray-400 line-through' : 'text-gray-900',
+                              )}
+                            >
+                              {task.title || TASK_TYPE_LABELS[task.type]}
+                            </h3>
+                            {task.contact && (
+                              <div className="mt-1 inline-flex items-center gap-1 text-sm text-indigo-600">
+                                <User className="h-4 w-4" />
+                                <span>
+                                  {task.contact.firstName} {task.contact.lastName}
+                                </span>
+                              </div>
+                            )}
+                            {task.googleMeetLink && (
+                              <div className="mt-2 flex flex-wrap items-center gap-2">
+                                <button
+                                  type="button"
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    if (task.googleMeetLink) {
+                                      window.open(
+                                        task.googleMeetLink,
+                                        '_blank',
+                                        'noopener,noreferrer',
+                                      );
+                                    }
+                                  }}
+                                  className="inline-flex items-center gap-1.5 rounded-lg border border-indigo-200 bg-indigo-50 px-3 py-1.5 text-sm font-medium text-indigo-700 transition-colors hover:bg-indigo-100"
+                                >
+                                  <Video className="h-4 w-4" />
+                                  <span>Rejoindre Google Meet</span>
+                                  <ExternalLink className="h-3 w-3" />
+                                </button>
+                                <button
+                                  type="button"
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    openEditMeetModal(task);
+                                  }}
+                                  className="inline-flex cursor-pointer items-center gap-1.5 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"
+                                >
+                                  Modifier le rendez-vous
+                                </button>
+                              </div>
+                            )}
+                            <div className="mt-2 flex items-center gap-4 text-sm text-gray-500">
+                              <div className="flex items-center gap-1">
+                                <Clock className="h-4 w-4" />
+                                {formatTime(task.scheduledAt)}
+                              </div>
+                              <div className="flex items-center gap-1">
+                                <Calendar className="h-4 w-4" />
+                                {new Date(task.scheduledAt).toLocaleDateString('fr-FR')}
+                              </div>
+                              {isAdmin && (
+                                <div className="flex items-center gap-1">
+                                  <User className="h-4 w-4" />
+                                  {task.assignedUser.name}
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  );
+
+                  if (task.contact) {
+                    return (
+                      <Link
+                        key={task.id}
+                        href={`/contacts/${task.contact.id}`}
+                        onClick={(e) => {
+                          // Empêcher la navigation si on clique sur un bouton ou un lien
+                          const target = e.target as HTMLElement;
+                          if (
+                            target.tagName === 'BUTTON' ||
+                            target.closest('button') ||
+                            target.tagName === 'A' ||
+                            target.closest('a')
+                          ) {
+                            e.preventDefault();
+                          }
+                        }}
+                        className="block rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition-colors hover:border-indigo-300 hover:shadow-md"
+                      >
+                        {TaskContent}
+                      </Link>
+                    );
+                  }
+
+                  return (
+                    <div
+                      key={task.id}
+                      className="cursor-pointer rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition-colors hover:border-indigo-300 hover:shadow-md"
+                      onClick={() => openTaskDetailModal(task)}
+                    >
+                      {TaskContent}
+                    </div>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Modal d'édition de Google Meet */}
+      {showEditMeetModal && editingMeetTask && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm sm:p-6">
+          <div className="flex max-h-[90vh] w-full max-w-2xl flex-col rounded-lg bg-white p-6 shadow-xl sm:p-8">
+            {/* En-tête fixe */}
+            <div className="shrink-0 border-b border-gray-100 pb-4">
+              <div className="flex items-center justify-between">
+                <h2 className="text-xl font-bold text-gray-900 sm:text-2xl">
+                  Modifier le Google Meet
+                </h2>
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowEditMeetModal(false);
+                    setEditingMeetTask(null);
+                    setEditMeetError('');
+                  }}
+                  className="cursor-pointer rounded-lg p-2 text-gray-400 transition-colors hover:bg-gray-100"
+                >
+                  <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M6 18L18 6M6 6l12 12"
+                    />
+                  </svg>
+                </button>
+              </div>
+              {editingMeetTask.contact && (
+                <p className="mt-1 text-sm text-gray-500">
+                  {editingMeetTask.contact.firstName} {editingMeetTask.contact.lastName}
+                </p>
+              )}
+            </div>
+
+            {/* Contenu scrollable */}
+            <form
+              id="edit-meet-form"
+              onSubmit={handleUpdateMeet}
+              className="flex-1 space-y-4 overflow-y-auto pt-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+            >
+              <div className="space-y-2">
+                <p className="text-sm font-medium text-gray-700">Date & heure *</p>
+                <div className="grid grid-cols-[3fr,2fr] gap-2">
+                  <input
+                    type="date"
+                    required
+                    value={
+                      editMeetData.scheduledAt
+                        ? editMeetData.scheduledAt.split('T')[0]
+                        : new Date(editingMeetTask.scheduledAt).toISOString().split('T')[0]
+                    }
+                    onChange={(e) => {
+                      const time =
+                        editMeetData.scheduledAt && editMeetData.scheduledAt.includes('T')
+                          ? editMeetData.scheduledAt.split('T')[1]
+                          : new Date(editingMeetTask.scheduledAt)
+                              .toISOString()
+                              .split('T')[1]
+                              .slice(0, 5);
+                      setEditMeetData({
+                        ...editMeetData,
+                        scheduledAt: `${e.target.value}T${time || '09:00'}`,
+                      });
+                    }}
+                    className="block w-full rounded-xl border border-gray-300 px-3 py-2 text-sm text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                  />
+                  <input
+                    type="time"
+                    required
+                    value={
+                      editMeetData.scheduledAt && editMeetData.scheduledAt.includes('T')
+                        ? editMeetData.scheduledAt.split('T')[1].slice(0, 5)
+                        : new Date(editingMeetTask.scheduledAt)
+                            .toISOString()
+                            .split('T')[1]
+                            .slice(0, 5)
+                    }
+                    onChange={(e) => {
+                      const datePart =
+                        editMeetData.scheduledAt && editMeetData.scheduledAt.includes('T')
+                          ? editMeetData.scheduledAt.split('T')[0]
+                          : new Date(editingMeetTask.scheduledAt).toISOString().split('T')[0];
+                      setEditMeetData({
+                        ...editMeetData,
+                        scheduledAt: `${datePart}T${e.target.value || '09:00'}`,
+                      });
+                    }}
+                    className="block w-full rounded-xl border border-gray-300 px-3 py-2 text-sm text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <label className="block text-sm font-medium text-gray-700">Durée (minutes)</label>
+                <select
+                  value={editMeetData.durationMinutes}
+                  onChange={(e) =>
+                    setEditMeetData({
+                      ...editMeetData,
+                      durationMinutes: Number(e.target.value),
+                    })
+                  }
+                  className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                >
+                  <option value={15}>15 minutes</option>
+                  <option value={30}>30 minutes</option>
+                  <option value={45}>45 minutes</option>
+                  <option value={60}>1 heure</option>
+                  <option value={90}>1h30</option>
+                  <option value={120}>2 heures</option>
+                </select>
+              </div>
+
+              {editingMeetTask.googleMeetLink && (
+                <div className="space-y-1">
+                  <p className="text-sm font-medium text-gray-700">Lien Google Meet</p>
+                  <a
+                    href={editingMeetTask.googleMeetLink}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-flex items-center gap-1.5 text-sm text-indigo-600 hover:text-indigo-700"
+                  >
+                    <Video className="h-4 w-4" />
+                    <span className="truncate">{editingMeetTask.googleMeetLink}</span>
+                    <ExternalLink className="h-3 w-3" />
+                  </a>
+                </div>
+              )}
+
+              {editMeetError && (
+                <div className="rounded-lg bg-red-50 p-3 text-sm text-red-600">{editMeetError}</div>
+              )}
+            </form>
+
+            {/* Pied de modal fixe */}
+            <div className="shrink-0 border-t border-gray-100 pt-4">
+              <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowEditMeetModal(false);
+                    setEditingMeetTask(null);
+                    setEditMeetError('');
+                  }}
+                  className="w-full cursor-pointer rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 sm:w-auto"
+                >
+                  Annuler
+                </button>
+                <button
+                  type="submit"
+                  form="edit-meet-form"
+                  disabled={editMeetLoading}
+                  className="w-full cursor-pointer rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
+                >
+                  {editMeetLoading ? 'Enregistrement...' : 'Enregistrer les modifications'}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Modal de création de tâche (générique, non liée à un contact) */}
+      {showCreateTaskModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-6 backdrop-blur-sm sm:p-8">
+          <div className="flex max-h-[90vh] w-full max-w-4xl flex-col rounded-2xl bg-white p-6 shadow-xl">
+            {/* En-tête fixe */}
+            <div className="shrink-0 border-b border-gray-100 pb-4">
+              <div className="flex items-start justify-between gap-4">
+                <div>
+                  <h2 className="text-lg font-semibold text-gray-900 sm:text-xl">
+                    Créer une tâche
+                  </h2>
+                  <p className="mt-1 text-xs text-gray-500 sm:text-sm">
+                    Cette tâche sera créée pour vous et ne sera liée à aucun contact.
+                  </p>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowCreateTaskModal(false);
+                    setCreateTaskError('');
+                    setCreateTaskData({
+                      type: 'OTHER',
+                      title: '',
+                      description: '',
+                      scheduledAt: '',
+                      priority: 'MEDIUM',
+                      reminderMinutesBefore: null,
+                    });
+                  }}
+                  className="cursor-pointer rounded-full p-2 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
+                  aria-label="Fermer la modal"
+                >
+                  <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M6 18L18 6M6 6l12 12"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </div>
+
+            {/* Contenu scrollable */}
+            <form
+              id="create-task-form"
+              onSubmit={handleCreateTaskFromAgenda}
+              className="flex-1 space-y-6 overflow-y-auto px-2 pt-4 pb-2 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+            >
+              {/* Titre */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700">Titre (optionnel)</label>
+                <input
+                  type="text"
+                  value={createTaskData.title}
+                  onChange={(e) =>
+                    setCreateTaskData({
+                      ...createTaskData,
+                      title: e.target.value,
+                    })
+                  }
+                  className="mt-1 block w-full rounded-xl border border-gray-300 px-4 py-2.5 text-sm text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                  placeholder="Ex : Relance client"
+                />
+              </div>
+
+              {/* Date & heure + priorité */}
+              <div className="grid gap-4 md:grid-cols-2">
+                <div className="space-y-2">
+                  <p className="text-sm font-medium text-gray-700">Date & heure *</p>
+                  <div className="grid grid-cols-[3fr,2fr] gap-2">
+                    <input
+                      type="date"
+                      required
+                      value={
+                        createTaskData.scheduledAt ? createTaskData.scheduledAt.split('T')[0] : ''
+                      }
+                      onChange={(e) => {
+                        const time =
+                          createTaskData.scheduledAt && createTaskData.scheduledAt.includes('T')
+                            ? createTaskData.scheduledAt.split('T')[1]
+                            : '09:00';
+                        setCreateTaskData({
+                          ...createTaskData,
+                          scheduledAt: `${e.target.value}T${time}`,
+                        });
+                      }}
+                      className="block w-full rounded-xl border border-gray-300 px-2 py-1.5 text-xs text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                    />
+                    <input
+                      type="time"
+                      required
+                      value={
+                        createTaskData.scheduledAt && createTaskData.scheduledAt.includes('T')
+                          ? createTaskData.scheduledAt.split('T')[1].slice(0, 5)
+                          : ''
+                      }
+                      onChange={(e) => {
+                        const datePart =
+                          createTaskData.scheduledAt && createTaskData.scheduledAt.includes('T')
+                            ? createTaskData.scheduledAt.split('T')[0]
+                            : new Date().toISOString().split('T')[0];
+                        setCreateTaskData({
+                          ...createTaskData,
+                          scheduledAt: `${datePart}T${e.target.value || '09:00'}`,
+                        });
+                      }}
+                      className="block w-full rounded-xl border border-gray-300 px-2 py-1.5 text-xs text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <p className="text-sm font-medium text-gray-700">Priorité</p>
+                  <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+                    {[
+                      { value: 'LOW' as const, label: 'Faible' },
+                      { value: 'MEDIUM' as const, label: 'Moyenne' },
+                      { value: 'HIGH' as const, label: 'Haute' },
+                      { value: 'URGENT' as const, label: 'Urgente' },
+                    ].map((option) => {
+                      const isActive = createTaskData.priority === option.value;
+                      return (
+                        <button
+                          key={option.value}
+                          type="button"
+                          onClick={() =>
+                            setCreateTaskData({
+                              ...createTaskData,
+                              priority: option.value,
+                            })
+                          }
+                          className={cn(
+                            'cursor-pointer rounded-xl border px-3 py-2 text-xs font-medium transition-colors sm:text-sm',
+                            isActive
+                              ? 'border-indigo-500 bg-indigo-50 text-indigo-700'
+                              : 'border-gray-200 bg-white text-gray-700 hover:border-indigo-200 hover:bg-indigo-50/60',
+                          )}
+                        >
+                          {option.label}
+                        </button>
+                      );
+                    })}
+                  </div>
+                </div>
+              </div>
+
+              {/* Rappel */}
+              <div className="space-y-2">
+                <p className="text-sm font-medium text-gray-700">Rappel</p>
+                <select
+                  value={createTaskData.reminderMinutesBefore ?? ''}
+                  onChange={(e) =>
+                    setCreateTaskData({
+                      ...createTaskData,
+                      reminderMinutesBefore: e.target.value ? Number(e.target.value) : null,
+                    })
+                  }
+                  className="mt-1 block w-full rounded-xl border border-gray-300 px-4 py-2.5 text-sm text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                >
+                  <option value="">Aucun rappel</option>
+                  <option value="5">5 minutes avant</option>
+                  <option value="15">15 minutes avant</option>
+                  <option value="30">30 minutes avant</option>
+                  <option value="60">1 heure avant</option>
+                  <option value="120">2 heures avant</option>
+                </select>
+              </div>
+
+              {/* Description */}
+              <div className="space-y-2">
+                <label className="block text-sm font-medium text-gray-700">Description *</label>
+                <textarea
+                  value={createTaskData.description}
+                  onChange={(e) =>
+                    setCreateTaskData({
+                      ...createTaskData,
+                      description: e.target.value,
+                    })
+                  }
+                  rows={4}
+                  className="mt-1 block w-full rounded-xl border border-gray-300 px-4 py-2.5 text-sm text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                  placeholder="Ajoutez les détails de la tâche (contexte, actions à mener, etc.)"
+                />
+              </div>
+
+              {createTaskError && (
+                <div className="rounded-lg bg-red-50 p-4 text-sm text-red-600">
+                  {createTaskError}
+                </div>
+              )}
+            </form>
+
+            {/* Pied de modal fixe */}
+            <div className="shrink-0 border-t border-gray-100 pt-4">
+              <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowCreateTaskModal(false);
+                    setCreateTaskError('');
+                    setCreateTaskData({
+                      type: 'OTHER',
+                      title: '',
+                      description: '',
+                      scheduledAt: '',
+                      priority: 'MEDIUM',
+                      reminderMinutesBefore: null,
+                    });
+                  }}
+                  className="w-full cursor-pointer rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 sm:w-auto"
+                >
+                  Annuler
+                </button>
+                <button
+                  type="submit"
+                  form="create-task-form"
+                  disabled={creatingTask}
+                  className="w-full cursor-pointer rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
+                >
+                  {creatingTask ? 'Création...' : 'Créer la tâche'}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Modal de création de Google Meet */}
+      {showCreateMeetModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm sm:p-6">
+          <div className="flex max-h-[90vh] w-full max-w-5xl flex-col rounded-lg bg-white p-6 shadow-xl sm:p-8">
+            {/* En-tête fixe */}
+            <div className="shrink-0 border-b border-gray-100 pb-4">
+              <div className="flex items-center justify-between">
+                <h2 className="text-xl font-bold text-gray-900 sm:text-2xl">
+                  Programmer une visio-conférence
+                </h2>
+                <button
+                  onClick={() => {
+                    setShowCreateMeetModal(false);
+                    setMeetData({
+                      title: '',
+                      description: '',
+                      scheduledAt: '',
+                      durationMinutes: 30,
+                      attendees: [],
+                      reminderMinutesBefore: null,
+                      internalNote: '',
+                    });
+                    setMeetError('');
+                  }}
+                  className="cursor-pointer rounded-lg p-2 text-gray-400 transition-colors hover:bg-gray-100"
+                  type="button"
+                >
+                  <X className="h-6 w-6" />
+                </button>
+              </div>
+            </div>
+
+            {/* Contenu scrollable */}
+            <form
+              id="meet-form"
+              onSubmit={handleCreateMeet}
+              className="flex-1 space-y-4 overflow-y-auto px-1 pt-4 pb-2 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+            >
+              <div>
+                <label className="block text-sm font-medium text-gray-700">
+                  Titre de la réunion *
+                </label>
+                <input
+                  type="text"
+                  required
+                  value={meetData.title}
+                  onChange={(e) => setMeetData({ ...meetData, title: e.target.value })}
+                  className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                  placeholder="Ex: Rendez-vous avec..."
+                />
+              </div>
+
+              <div className="grid gap-4 md:grid-cols-2">
+                <div className="space-y-2">
+                  <p className="text-sm font-medium text-gray-700">Date & heure *</p>
+                  <div className="grid grid-cols-[3fr,2fr] gap-2">
+                    <input
+                      type="date"
+                      required
+                      value={meetData.scheduledAt ? meetData.scheduledAt.split('T')[0] : ''}
+                      onChange={(e) => {
+                        const time =
+                          meetData.scheduledAt && meetData.scheduledAt.includes('T')
+                            ? meetData.scheduledAt.split('T')[1]
+                            : '';
+                        setMeetData({
+                          ...meetData,
+                          scheduledAt: time
+                            ? `${e.target.value}T${time}`
+                            : `${e.target.value}T09:00`,
+                        });
+                      }}
+                      className="block w-full rounded-xl border border-gray-300 px-2 py-1.5 text-xs text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                    />
+                    <input
+                      type="time"
+                      value={
+                        meetData.scheduledAt && meetData.scheduledAt.includes('T')
+                          ? meetData.scheduledAt.split('T')[1].slice(0, 5)
+                          : ''
+                      }
+                      onChange={(e) => {
+                        const datePart =
+                          meetData.scheduledAt && meetData.scheduledAt.includes('T')
+                            ? meetData.scheduledAt.split('T')[0]
+                            : new Date().toISOString().split('T')[0];
+                        setMeetData({
+                          ...meetData,
+                          scheduledAt: `${datePart}T${e.target.value || '09:00'}`,
+                        });
+                      }}
+                      className="block w-full rounded-xl border border-gray-300 px-2 py-1.5 text-xs text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <p className="text-sm font-medium text-gray-700">Durée (minutes)</p>
+                  <select
+                    value={meetData.durationMinutes}
+                    onChange={(e) =>
+                      setMeetData({
+                        ...meetData,
+                        durationMinutes: Number(e.target.value),
+                      })
+                    }
+                    className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                  >
+                    <option value="15">15 minutes</option>
+                    <option value="30">30 minutes</option>
+                    <option value="45">45 minutes</option>
+                    <option value="60">1 heure</option>
+                    <option value="90">1h30</option>
+                    <option value="120">2 heures</option>
+                  </select>
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700">Rappel</label>
+                <select
+                  value={meetData.reminderMinutesBefore ?? ''}
+                  onChange={(e) =>
+                    setMeetData({
+                      ...meetData,
+                      reminderMinutesBefore: e.target.value ? Number(e.target.value) : null,
+                    })
+                  }
+                  className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                >
+                  <option value="">Aucun rappel</option>
+                  <option value="5">5 minutes avant</option>
+                  <option value="15">15 minutes avant</option>
+                  <option value="30">30 minutes avant</option>
+                  <option value="60">1 heure avant</option>
+                  <option value="120">2 heures avant</option>
+                </select>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700">
+                  Invités (emails, un par ligne)
+                </label>
+                <textarea
+                  value={meetData.attendees.join('\n')}
+                  onChange={(e) =>
+                    setMeetData({
+                      ...meetData,
+                      attendees: e.target.value
+                        .split('\n')
+                        .map((email) => email.trim())
+                        .filter((email) => email !== ''),
+                    })
+                  }
+                  rows={4}
+                  className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                  placeholder={`email1@example.com
+email2@example.com`}
+                />
+                <p className="mt-1 text-xs text-gray-500">
+                  Les invités recevront un email de confirmation avec le lien Google Meet.
+                </p>
+              </div>
+
+              <div className="space-y-2">
+                <label className="block text-sm font-medium text-gray-700">Description</label>
+                <Editor ref={meetEditorRef} />
+                <p className="text-xs text-gray-500">
+                  Ajoutez des détails sur cette réunion (ordre du jour, points à aborder…). Cette
+                  description sera partagée avec les participants.
+                </p>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700">
+                  Note personnelle (optionnel)
+                </label>
+                <textarea
+                  value={meetData.internalNote}
+                  onChange={(e) => setMeetData({ ...meetData, internalNote: e.target.value })}
+                  rows={3}
+                  className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                  placeholder="Ajoutez une note personnelle qui ne sera pas partagée dans l'email..."
+                />
+                <p className="mt-1 text-xs text-gray-500">
+                  Cette note est uniquement visible dans le CRM et ne sera pas envoyée aux
+                  participants.
+                </p>
+              </div>
+
+              {meetError && (
+                <div className="rounded-lg bg-red-50 p-4 text-sm text-red-600">{meetError}</div>
+              )}
+            </form>
+
+            {/* Pied de modal fixe */}
+            <div className="shrink-0 border-t border-gray-100 pt-4">
+              <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowCreateMeetModal(false);
+                    setMeetData({
+                      title: '',
+                      description: '',
+                      scheduledAt: '',
+                      durationMinutes: 30,
+                      attendees: [],
+                      reminderMinutesBefore: null,
+                      internalNote: '',
+                    });
+                    setMeetError('');
+                  }}
+                  className="w-full cursor-pointer rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 sm:w-auto"
+                >
+                  Annuler
+                </button>
+                <button
+                  type="submit"
+                  form="meet-form"
+                  disabled={creatingMeet}
+                  className="w-full cursor-pointer rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
+                >
+                  {creatingMeet ? 'Création...' : 'Créer le Google Meet'}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Modal de création de rendez-vous physique */}
+      {showCreateMeetingModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm sm:p-6">
+          <div className="flex max-h-[90vh] w-full max-w-5xl flex-col rounded-lg bg-white p-6 shadow-xl sm:p-8">
+            {/* En-tête fixe */}
+            <div className="shrink-0 border-b border-gray-100 pb-4">
+              <div className="flex items-center justify-between">
+                <h2 className="text-xl font-bold text-gray-900 sm:text-2xl">
+                  Programmer un rendez-vous
+                </h2>
+                <button
+                  onClick={() => {
+                    setShowCreateMeetingModal(false);
+                    setMeetingData({
+                      title: '',
+                      description: '',
+                      scheduledAt: '',
+                      priority: 'MEDIUM',
+                      reminderMinutesBefore: null,
+                      notifyContact: false,
+                      internalNote: '',
+                      attendees: [],
+                    });
+                    setMeetingError('');
+                  }}
+                  className="cursor-pointer rounded-lg p-2 text-gray-400 transition-colors hover:bg-gray-100"
+                  type="button"
+                >
+                  <X className="h-6 w-6" />
+                </button>
+              </div>
+            </div>
+
+            {/* Contenu scrollable */}
+            <form
+              id="meeting-form"
+              onSubmit={handleCreateMeeting}
+              className="flex-1 space-y-6 overflow-y-auto px-2 pt-4 pb-2 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+            >
+              <div>
+                <label className="block text-sm font-medium text-gray-700">
+                  Titre du rendez-vous (optionnel)
+                </label>
+                <input
+                  type="text"
+                  value={meetingData.title}
+                  onChange={(e) => setMeetingData({ ...meetingData, title: e.target.value })}
+                  className="mt-1 block w-full rounded-xl border border-gray-300 px-4 py-2.5 text-sm text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                  placeholder="Ex : Rendez-vous avec le client"
+                />
+              </div>
+
+              <div className="grid gap-4 md:grid-cols-2">
+                <div className="space-y-2">
+                  <p className="text-sm font-medium text-gray-700">Date & heure *</p>
+                  <div className="grid grid-cols-[3fr,2fr] gap-2">
+                    <input
+                      type="date"
+                      required
+                      value={meetingData.scheduledAt ? meetingData.scheduledAt.split('T')[0] : ''}
+                      onChange={(e) => {
+                        const time =
+                          meetingData.scheduledAt && meetingData.scheduledAt.includes('T')
+                            ? meetingData.scheduledAt.split('T')[1]
+                            : '';
+                        setMeetingData({
+                          ...meetingData,
+                          scheduledAt: time
+                            ? `${e.target.value}T${time}`
+                            : `${e.target.value}T09:00`,
+                        });
+                      }}
+                      className="block w-full rounded-xl border border-gray-300 px-2 py-1.5 text-xs text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                    />
+                    <input
+                      type="time"
+                      value={
+                        meetingData.scheduledAt && meetingData.scheduledAt.includes('T')
+                          ? meetingData.scheduledAt.split('T')[1].slice(0, 5)
+                          : ''
+                      }
+                      onChange={(e) => {
+                        const datePart =
+                          meetingData.scheduledAt && meetingData.scheduledAt.includes('T')
+                            ? meetingData.scheduledAt.split('T')[0]
+                            : new Date().toISOString().split('T')[0];
+                        setMeetingData({
+                          ...meetingData,
+                          scheduledAt: `${datePart}T${e.target.value || '09:00'}`,
+                        });
+                      }}
+                      className="block w-full rounded-xl border border-gray-300 px-2 py-1.5 text-xs text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <p className="text-sm font-medium text-gray-700">Priorité</p>
+                  <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+                    {[
+                      { value: 'LOW' as const, label: 'Faible' },
+                      { value: 'MEDIUM' as const, label: 'Moyenne' },
+                      { value: 'HIGH' as const, label: 'Haute' },
+                      { value: 'URGENT' as const, label: 'Urgente' },
+                    ].map((option) => {
+                      const isActive = meetingData.priority === option.value;
+                      return (
+                        <button
+                          key={option.value}
+                          type="button"
+                          onClick={() =>
+                            setMeetingData({
+                              ...meetingData,
+                              priority: option.value,
+                            })
+                          }
+                          className={cn(
+                            'cursor-pointer rounded-xl border px-3 py-2 text-xs font-medium transition-colors sm:text-sm',
+                            isActive
+                              ? 'border-indigo-500 bg-indigo-50 text-indigo-700'
+                              : 'border-gray-200 bg-white text-gray-700 hover:border-indigo-200 hover:bg-indigo-50/60',
+                          )}
+                        >
+                          {option.label}
+                        </button>
+                      );
+                    })}
+                  </div>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <p className="text-sm font-medium text-gray-700">Rappel</p>
+                <select
+                  value={meetingData.reminderMinutesBefore ?? ''}
+                  onChange={(e) =>
+                    setMeetingData({
+                      ...meetingData,
+                      reminderMinutesBefore: e.target.value ? Number(e.target.value) : null,
+                    })
+                  }
+                  className="mt-1 block w-full rounded-xl border border-gray-300 px-4 py-2.5 text-sm text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                >
+                  <option value="">Aucun rappel</option>
+                  <option value="5">5 minutes avant</option>
+                  <option value="15">15 minutes avant</option>
+                  <option value="30">30 minutes avant</option>
+                  <option value="60">1 heure avant</option>
+                  <option value="120">2 heures avant</option>
+                </select>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700">
+                  Invités (emails, un par ligne)
+                </label>
+                <textarea
+                  value={meetingData.attendees.join('\n')}
+                  onChange={(e) =>
+                    setMeetingData({
+                      ...meetingData,
+                      attendees: e.target.value
+                        .split('\n')
+                        .map((email) => email.trim())
+                        .filter((email) => email !== ''),
+                    })
+                  }
+                  rows={4}
+                  className="mt-1 block w-full rounded-xl border border-gray-300 px-4 py-2.5 text-sm text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                  placeholder={`email1@example.com
+email2@example.com`}
+                />
+                <p className="mt-1 text-xs text-gray-500">
+                  Les invités recevront un email de confirmation et le rendez-vous apparaîtra dans
+                  leur Google Calendar.
+                </p>
+              </div>
+
+              <div className="space-y-2">
+                <label className="block text-sm font-medium text-gray-700">Description *</label>
+                <Editor ref={meetingEditorRef} />
+                <p className="text-xs text-gray-500">
+                  Ajoutez des détails sur ce rendez-vous (contexte, points à aborder, informations
+                  importantes…).
+                </p>
+              </div>
+
+              <div className="rounded-lg border border-blue-200 bg-blue-50 p-4">
+                <label className="flex cursor-pointer items-start gap-3">
+                  <input
+                    type="checkbox"
+                    checked={meetingData.notifyContact}
+                    onChange={(e) =>
+                      setMeetingData({ ...meetingData, notifyContact: e.target.checked })
+                    }
+                    className="mt-0.5 h-4 w-4 cursor-pointer rounded border-gray-300 text-indigo-600 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                  />
+                  <div className="flex-1">
+                    <p className="text-sm font-medium text-blue-900">
+                      Envoyer un email de confirmation
+                    </p>
+                    <p className="mt-1 text-xs text-blue-700">
+                      Un email de confirmation sera envoyé aux invités après la création du
+                      rendez-vous.
+                    </p>
+                  </div>
+                </label>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700">Note personnelle</label>
+                <p className="mt-1 text-xs text-gray-500">
+                  Cette note ne sera pas visible par les invités s'ils sont prévenus par email.
+                </p>
+                <textarea
+                  value={meetingData.internalNote}
+                  onChange={(e) => setMeetingData({ ...meetingData, internalNote: e.target.value })}
+                  rows={3}
+                  className="mt-1 block w-full rounded-xl border border-gray-300 px-4 py-2.5 text-sm text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                  placeholder="Ajoutez une note personnelle qui ne sera pas partagée..."
+                />
+              </div>
+
+              {meetingError && (
+                <div className="rounded-lg bg-red-50 p-4 text-sm text-red-600">{meetingError}</div>
+              )}
+            </form>
+
+            {/* Pied de modal fixe */}
+            <div className="shrink-0 border-t border-gray-100 pt-4">
+              <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowCreateMeetingModal(false);
+                    setMeetingData({
+                      title: '',
+                      description: '',
+                      scheduledAt: '',
+                      priority: 'MEDIUM',
+                      reminderMinutesBefore: null,
+                      notifyContact: false,
+                      internalNote: '',
+                      attendees: [],
+                    });
+                    setMeetingError('');
+                  }}
+                  className="w-full cursor-pointer rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 sm:w-auto"
+                >
+                  Annuler
+                </button>
+                <button
+                  type="submit"
+                  form="meeting-form"
+                  disabled={creatingMeeting}
+                  className="w-full cursor-pointer rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
+                >
+                  {creatingMeeting ? 'Création...' : 'Créer le rendez-vous'}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Modal de détail / édition d'une tâche générique */}
+      {showTaskDetailModal && selectedTask && !selectedTask.contact && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-6 backdrop-blur-sm sm:p-8">
+          <div className="flex max-h-[90vh] w-full max-w-4xl flex-col rounded-2xl bg-white p-6 shadow-xl">
+            {/* En-tête */}
+            <div className="shrink-0 border-b border-gray-100 pb-4">
+              <div className="flex items-start justify-between gap-4">
+                <div>
+                  <h2 className="text-lg font-semibold text-gray-900 sm:text-xl">
+                    Détail de la tâche
+                  </h2>
+                  <p className="mt-1 text-xs text-gray-500 sm:text-sm">
+                    Tâche personnelle non liée à un contact.
+                  </p>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowTaskDetailModal(false);
+                    setSelectedTask(null);
+                    setTaskDetailError('');
+                  }}
+                  className="cursor-pointer rounded-full p-2 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
+                  aria-label="Fermer la modal"
+                >
+                  <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M6 18L18 6M6 6l12 12"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </div>
+
+            {/* Contenu */}
+            <form
+              id="task-detail-form"
+              onSubmit={handleUpdateTaskDetail}
+              className="flex-1 space-y-6 overflow-y-auto px-2 pt-4 pb-2 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+            >
+              {/* Titre + statut */}
+              <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+                <div className="flex-1">
+                  <label className="block text-sm font-medium text-gray-700">
+                    Titre (optionnel)
+                  </label>
+                  <input
+                    type="text"
+                    value={taskDetailData.title}
+                    onChange={(e) =>
+                      setTaskDetailData({
+                        ...taskDetailData,
+                        title: e.target.value,
+                      })
+                    }
+                    className="mt-1 block w-full rounded-xl border border-gray-300 px-4 py-2.5 text-sm text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                    placeholder="Ex : Relance client"
+                  />
+                </div>
+                <label className="flex cursor-pointer items-center gap-2 text-sm text-gray-700">
+                  <input
+                    type="checkbox"
+                    checked={taskDetailData.completed}
+                    onChange={(e) =>
+                      setTaskDetailData({
+                        ...taskDetailData,
+                        completed: e.target.checked,
+                      })
+                    }
+                    className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                  />
+                  <span>Marquer comme terminée</span>
+                </label>
+              </div>
+
+              {/* Date & heure + priorité */}
+              <div className="grid gap-4 md:grid-cols-2">
+                <div className="space-y-2">
+                  <p className="text-sm font-medium text-gray-700">Date & heure *</p>
+                  <div className="grid grid-cols-[3fr,2fr] gap-2">
+                    <input
+                      type="date"
+                      required
+                      value={
+                        taskDetailData.scheduledAt ? taskDetailData.scheduledAt.split('T')[0] : ''
+                      }
+                      onChange={(e) => {
+                        const time =
+                          taskDetailData.scheduledAt && taskDetailData.scheduledAt.includes('T')
+                            ? taskDetailData.scheduledAt.split('T')[1]
+                            : '09:00';
+                        setTaskDetailData({
+                          ...taskDetailData,
+                          scheduledAt: `${e.target.value}T${time}`,
+                        });
+                      }}
+                      className="block w-full rounded-xl border border-gray-300 px-2 py-1.5 text-xs text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                    />
+                    <input
+                      type="time"
+                      required
+                      value={
+                        taskDetailData.scheduledAt && taskDetailData.scheduledAt.includes('T')
+                          ? taskDetailData.scheduledAt.split('T')[1].slice(0, 5)
+                          : ''
+                      }
+                      onChange={(e) => {
+                        const datePart =
+                          taskDetailData.scheduledAt && taskDetailData.scheduledAt.includes('T')
+                            ? taskDetailData.scheduledAt.split('T')[0]
+                            : new Date().toISOString().split('T')[0];
+                        setTaskDetailData({
+                          ...taskDetailData,
+                          scheduledAt: `${datePart}T${e.target.value || '09:00'}`,
+                        });
+                      }}
+                      className="block w-full rounded-xl border border-gray-300 px-2 py-1.5 text-xs text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <p className="text-sm font-medium text-gray-700">Priorité</p>
+                  <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+                    {[
+                      { value: 'LOW' as const, label: 'Faible' },
+                      { value: 'MEDIUM' as const, label: 'Moyenne' },
+                      { value: 'HIGH' as const, label: 'Haute' },
+                      { value: 'URGENT' as const, label: 'Urgente' },
+                    ].map((option) => {
+                      const isActive = taskDetailData.priority === option.value;
+                      return (
+                        <button
+                          key={option.value}
+                          type="button"
+                          onClick={() =>
+                            setTaskDetailData({
+                              ...taskDetailData,
+                              priority: option.value,
+                            })
+                          }
+                          className={cn(
+                            'cursor-pointer rounded-xl border px-3 py-2 text-xs font-medium transition-colors sm:text-sm',
+                            isActive
+                              ? 'border-indigo-500 bg-indigo-50 text-indigo-700'
+                              : 'border-gray-200 bg-white text-gray-700 hover:border-indigo-200 hover:bg-indigo-50/60',
+                          )}
+                        >
+                          {option.label}
+                        </button>
+                      );
+                    })}
+                  </div>
+                </div>
+              </div>
+
+              {/* Description */}
+              <div className="space-y-2">
+                <label className="block text-sm font-medium text-gray-700">Description *</label>
+                <textarea
+                  value={taskDetailData.description}
+                  onChange={(e) =>
+                    setTaskDetailData({
+                      ...taskDetailData,
+                      description: e.target.value,
+                    })
+                  }
+                  rows={5}
+                  className="mt-1 block w-full rounded-xl border border-gray-300 px-4 py-2.5 text-sm text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                  placeholder="Ajoutez les détails de la tâche..."
+                />
+              </div>
+
+              {taskDetailError && (
+                <div className="rounded-lg bg-red-50 p-4 text-sm text-red-600">
+                  {taskDetailError}
+                </div>
+              )}
+            </form>
+
+            {/* Pied de modal */}
+            <div className="shrink-0 border-t border-gray-100 pt-4">
+              <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                <button
+                  type="button"
+                  onClick={handleDeleteTask}
+                  disabled={taskDeleteLoading}
+                  className="inline-flex w-full items-center justify-center rounded-xl border border-red-200 bg-red-50 px-4 py-2.5 text-sm font-medium text-red-700 shadow-sm transition-colors hover:bg-red-100 disabled:cursor-not-allowed disabled:opacity-60 sm:w-auto"
+                >
+                  {taskDeleteLoading ? 'Suppression...' : 'Supprimer la tâche'}
+                </button>
+                <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setShowTaskDetailModal(false);
+                      setSelectedTask(null);
+                      setTaskDetailError('');
+                    }}
+                    className="w-full cursor-pointer rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 sm:w-auto"
+                  >
+                    Fermer
+                  </button>
+                  <button
+                    type="submit"
+                    form="task-detail-form"
+                    disabled={taskDetailLoading}
+                    className="w-full cursor-pointer rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
+                  >
+                    {taskDetailLoading ? 'Enregistrement...' : 'Enregistrer les modifications'}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}