create-crm-tmp 1.0.2 → 1.1.0

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

@@ -2,6 +2,7 @@
 
 import { useState, useEffect, useRef, useMemo } from 'react';
 import { useUserRole } from '@/hooks/use-user-role';
+import { useViewAs } from '@/contexts/view-as-context';
 import { cn } from '@/lib/utils';
 import {
   Calendar,
@@ -95,6 +96,7 @@ interface User {
 
 export default function AgendaPage() {
   const { isAdmin, hasPermission } = useUserRole();
+  const { viewAsUser, isViewingAsOther } = useViewAs();
   const [tasks, setTasks] = useState<Task[]>([]);
   const [contacts, setContacts] = useState<Contact[]>([]);
   const [users, setUsers] = useState<User[]>([]);
@@ -201,7 +203,7 @@ export default function AgendaPage() {
         const response = await fetch('/api/auth/google/status');
         if (response.ok) {
           const data = await response.json();
-          setGoogleConnected(!!data.connected);
+          setGoogleConnected(!!data.calendar?.connected);
         } else {
           setGoogleConnected(false);
         }
@@ -440,7 +442,7 @@ export default function AgendaPage() {
 
   useEffect(() => {
     fetchTasks();
-  }, [currentDate, view]);
+  }, [currentDate, view, isViewingAsOther, viewAsUser?.id]);
 
   const fetchTasks = async () => {
     try {
@@ -449,8 +451,12 @@ export default function AgendaPage() {
       const url = new URL('/api/tasks', globalThis.location.origin);
       url.searchParams.set('startDate', start.toISOString());
       url.searchParams.set('endDate', end.toISOString());
-      // Toujours envoyer showOtherUsers si le toggle est activé, l'API vérifiera la permission
-      if (showOtherUsersEvents) {
+
+      // En mode "vue en tant que", afficher les tâches de l'utilisateur simulé
+      if (isViewingAsOther && viewAsUser?.id) {
+        url.searchParams.set('assignedTo', viewAsUser.id);
+      } else if (showOtherUsersEvents) {
+        // Toujours envoyer showOtherUsers si le toggle est activé, l'API vérifiera la permission
         url.searchParams.set('showOtherUsers', 'true');
       }
 
@@ -1047,232 +1053,255 @@ export default function AgendaPage() {
   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">
+      <div className="border-b border-gray-200 bg-white px-4 py-3 sm:px-6 sm:py-4 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 className="mb-3 sm:mb-4">
+          <div className="flex items-center justify-between gap-3">
+            <div className="flex items-center gap-3 sm:gap-4">
+              {/* Date actuelle en grand */}
+              <div className="flex flex-col items-center">
+                <div className="text-2xl font-bold text-gray-900 sm:text-3xl">
+                  {formatCurrentDay().day}
+                </div>
+                <div className="text-[10px] font-medium text-gray-500 uppercase sm:text-xs">
+                  {formatCurrentDay().month}
+                </div>
+              </div>
+              <div className="flex flex-col">
+                <h1 className="text-xl font-bold text-gray-900 sm:text-2xl">Agenda</h1>
+                <p className="text-xs text-gray-500 sm:text-sm">{formatCurrentMonthYear()}</p>
+                <p className="hidden text-xs text-gray-400 sm:block">{formatHeaderDateRange()}</p>
               </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>
+
+            {/* Actions — visibles en ligne sur desktop */}
+            <div className="hidden items-center gap-2 sm:flex">
+              <button
+                type="button"
+                onClick={() => setShowCreateMeetModal(true)}
+                className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-green-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-green-700"
+              >
+                <Video className="h-4 w-4" />
+                Google Meet
+              </button>
+              <button
+                type="button"
+                onClick={() => setShowCreateMeetingModal(true)}
+                className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-blue-700"
+              >
+                <Calendar className="h-4 w-4" />
+                Rendez-vous
+              </button>
+              <button
+                type="button"
+                onClick={() => setShowCreateTaskModal(true)}
+                className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-indigo-700"
+              >
+                <Bookmark className="h-4 w-4" />
+                Tâche
+              </button>
             </div>
           </div>
 
-          {/* Actions à droite */}
-          <div className="flex items-center gap-2">
+          {/* Actions — ligne dédiée sur mobile */}
+          <div className="mt-3 flex items-center gap-2 sm:hidden">
             <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"
+              className="inline-flex flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-lg bg-green-600 px-2.5 py-2 text-xs font-semibold text-white shadow-sm transition-colors hover:bg-green-700"
             >
-              <Video className="h-4 w-4" />
-              <span className="hidden sm:inline">Google Meet</span>
+              <Video className="h-3.5 w-3.5" />
+              Meet
             </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"
+              className="inline-flex flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-lg bg-blue-600 px-2.5 py-2 text-xs font-semibold text-white shadow-sm transition-colors hover:bg-blue-700"
             >
-              <Calendar className="h-4 w-4" />
-              <span className="hidden sm:inline">Rendez-vous</span>
+              <Calendar className="h-3.5 w-3.5" />
+              RDV
             </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"
+              className="inline-flex flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-lg bg-indigo-600 px-2.5 py-2 text-xs font-semibold text-white shadow-sm transition-colors hover:bg-indigo-700"
             >
-              <Bookmark className="h-4 w-4" />
-              <span className="hidden sm:inline">Tâche</span>
-              <span className="sm:hidden">Ajouter</span>
+              <Bookmark className="h-3.5 w-3.5" />
+              Tâche
             </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,
-                })
-              }
-              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,
-                })
-              }
-              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,
-                })
-              }
-              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,
-                })
-              }
-              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>
-            {hasPermission('tasks.view_other_users_events') && (
-              <>
-                {/* Filtre par utilisateur (affiché quand "Voir les autres utilisateurs" est actif) */}
-                <div className="mx-2 h-6 w-px bg-gray-300" />
-                <button
-                  type="button"
-                  onClick={() => {
-                    setShowOtherUsersEvents(!showOtherUsersEvents);
-                    // Si on active et que les utilisateurs ne sont pas encore chargés, les charger
-                    if (!showOtherUsersEvents && users.length === 0) {
-                      fetchUsers();
-                    }
-                    // Réinitialiser le filtre utilisateur
-                    if (users.length > 0) {
-                      setSelectedUserIds(new Set(users.map((u) => u.id)));
-                    }
-                  }}
-                  className={cn(
-                    'cursor-pointer rounded-full px-3 py-1.5 text-xs font-medium transition-colors',
-                    showOtherUsersEvents
-                      ? 'bg-gray-100 text-gray-900'
-                      : 'bg-white text-gray-600 hover:bg-gray-50',
-                  )}
-                >
-                  Voir les autres utilisateurs
-                </button>
-                {showOtherUsersEvents && (
-                  <>
-                    <div className="mx-2 h-6 w-px bg-gray-300" />
-                    {users.length > 0 ? (
-                      <div className="flex flex-wrap items-center gap-2">
-                        {users.map((user) => {
-                          const isSelected = selectedUserIds.has(user.id);
-                          const userColor = user.eventColor || '#6366F1';
-                          // Convertir la couleur hex en rgba pour l'opacité
-                          const hexToRgba = (hex: string, alpha: number) => {
-                            const r = Number.parseInt(hex.slice(1, 3), 16);
-                            const g = Number.parseInt(hex.slice(3, 5), 16);
-                            const b = Number.parseInt(hex.slice(5, 7), 16);
-                            return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-                          };
-                          return (
-                            <button
-                              key={user.id}
-                              type="button"
-                              onClick={() => {
-                                const newSelected = new Set(selectedUserIds);
-                                if (isSelected) {
-                                  newSelected.delete(user.id);
-                                } else {
-                                  newSelected.add(user.id);
-                                }
-                                setSelectedUserIds(newSelected);
-                              }}
-                              className={cn(
-                                'cursor-pointer rounded-full px-3 py-1.5 text-xs font-medium transition-all',
-                                isSelected ? 'text-white shadow-sm' : 'text-gray-700',
-                              )}
-                              style={{
-                                backgroundColor: isSelected
-                                  ? userColor
-                                  : hexToRgba(userColor, 0.15),
-                                border: isSelected
-                                  ? `1px solid ${userColor}`
-                                  : `1px solid ${hexToRgba(userColor, 0.3)}`,
-                              }}
-                              title={user.name}
-                              onMouseEnter={(e) => {
-                                if (!isSelected) {
-                                  e.currentTarget.style.backgroundColor = hexToRgba(
-                                    userColor,
-                                    0.25,
-                                  );
-                                }
-                              }}
-                              onMouseLeave={(e) => {
-                                if (!isSelected) {
-                                  e.currentTarget.style.backgroundColor = hexToRgba(
-                                    userColor,
-                                    0.15,
-                                  );
-                                }
-                              }}
-                            >
-                              <span className="max-w-[100px] truncate">{user.name}</span>
-                            </button>
-                          );
-                        })}
-                      </div>
-                    ) : (
-                      <div className="text-xs text-gray-500">Chargement des utilisateurs...</div>
+        <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+          {/* Filtres + badges utilisateurs */}
+          <div className="flex gap-2 max-sm:flex-col">
+            {/* Filtres d'événements */}
+            <div className="flex items-center gap-2 overflow-x-auto pb-1 sm:pb-0">
+              <button
+                type="button"
+                onClick={() =>
+                  setFilters({
+                    tasks: true,
+                    meetings: true,
+                    googleMeets: true,
+                  })
+                }
+                className={cn(
+                  'shrink-0 cursor-pointer rounded-full px-3 py-1.5 text-xs font-medium whitespace-nowrap transition-colors',
+                  filters.tasks && filters.meetings && filters.googleMeets
+                    ? 'bg-gray-100 text-gray-900'
+                    : 'bg-white text-gray-600 hover:bg-gray-50',
+                )}
+              >
+                Tous
+              </button>
+              <button
+                type="button"
+                onClick={() =>
+                  setFilters({
+                    tasks: true,
+                    meetings: false,
+                    googleMeets: false,
+                  })
+                }
+                className={cn(
+                  'shrink-0 cursor-pointer rounded-full px-3 py-1.5 text-xs font-medium whitespace-nowrap 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,
+                  })
+                }
+                className={cn(
+                  'shrink-0 cursor-pointer rounded-full px-3 py-1.5 text-xs font-medium whitespace-nowrap transition-colors',
+                  !filters.tasks && filters.meetings && !filters.googleMeets
+                    ? 'bg-gray-100 text-gray-900'
+                    : 'bg-white text-gray-600 hover:bg-gray-50',
+                )}
+              >
+                RDV
+              </button>
+              <button
+                type="button"
+                onClick={() =>
+                  setFilters({
+                    tasks: false,
+                    meetings: false,
+                    googleMeets: true,
+                  })
+                }
+                className={cn(
+                  'shrink-0 cursor-pointer rounded-full px-3 py-1.5 text-xs font-medium whitespace-nowrap transition-colors',
+                  !filters.tasks && !filters.meetings && filters.googleMeets
+                    ? 'bg-gray-100 text-gray-900'
+                    : 'bg-white text-gray-600 hover:bg-gray-50',
+                )}
+              >
+                Meet
+              </button>
+              {hasPermission('tasks.view_other_users_events') && (
+                <>
+                  <div className="mx-2 h-6 w-px shrink-0 bg-gray-300" />
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setShowOtherUsersEvents(!showOtherUsersEvents);
+                      if (!showOtherUsersEvents && users.length === 0) {
+                        fetchUsers();
+                      }
+                      if (users.length > 0) {
+                        setSelectedUserIds(new Set(users.map((u) => u.id)));
+                      }
+                    }}
+                    className={cn(
+                      'shrink-0 cursor-pointer rounded-full px-3 py-1.5 text-xs font-medium whitespace-nowrap transition-colors',
+                      showOtherUsersEvents
+                        ? 'bg-gray-100 text-gray-900'
+                        : 'bg-white text-gray-600 hover:bg-gray-50',
                     )}
-                  </>
+                  >
+                    <Eye className="mr-1 inline h-3 w-3 sm:hidden" />
+                    <span className="hidden sm:inline">Voir les autres utilisateurs</span>
+                    <span className="sm:hidden">Autres</span>
+                  </button>
+                </>
+              )}
+            </div>
+
+            {/* Badges utilisateurs — ligne dédiée en dessous des filtres */}
+            {hasPermission('tasks.view_other_users_events') && showOtherUsersEvents && (
+              <div className="flex flex-wrap items-center gap-2">
+                {users.length > 0 ? (
+                  users.map((user) => {
+                    const isSelected = selectedUserIds.has(user.id);
+                    const userColor = user.eventColor || '#6366F1';
+                    const hexToRgba = (hex: string, alpha: number) => {
+                      const r = Number.parseInt(hex.slice(1, 3), 16);
+                      const g = Number.parseInt(hex.slice(3, 5), 16);
+                      const b = Number.parseInt(hex.slice(5, 7), 16);
+                      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+                    };
+                    return (
+                      <button
+                        key={user.id}
+                        type="button"
+                        onClick={() => {
+                          const newSelected = new Set(selectedUserIds);
+                          if (isSelected) {
+                            newSelected.delete(user.id);
+                          } else {
+                            newSelected.add(user.id);
+                          }
+                          setSelectedUserIds(newSelected);
+                        }}
+                        className={cn(
+                          'cursor-pointer rounded-full px-3 py-1.5 text-xs font-medium transition-all',
+                          isSelected ? 'text-white shadow-sm' : 'text-gray-700',
+                        )}
+                        style={{
+                          backgroundColor: isSelected ? userColor : hexToRgba(userColor, 0.15),
+                          border: isSelected
+                            ? `1px solid ${userColor}`
+                            : `1px solid ${hexToRgba(userColor, 0.3)}`,
+                        }}
+                        title={user.name}
+                        onMouseEnter={(e) => {
+                          if (!isSelected) {
+                            e.currentTarget.style.backgroundColor = hexToRgba(userColor, 0.25);
+                          }
+                        }}
+                        onMouseLeave={(e) => {
+                          if (!isSelected) {
+                            e.currentTarget.style.backgroundColor = hexToRgba(userColor, 0.15);
+                          }
+                        }}
+                      >
+                        <span className="max-w-[100px] truncate">{user.name}</span>
+                      </button>
+                    );
+                  })
+                ) : (
+                  <div className="text-xs text-gray-500">Chargement des utilisateurs...</div>
                 )}
-              </>
+              </div>
             )}
           </div>
 
           {/* Navigation et sélecteur de vue */}
-          <div className="flex items-center gap-2">
+          <div className="flex items-center justify-between gap-2 sm:justify-end">
             {/* Navigation de date */}
-            <div className="flex items-center gap-1 rounded-lg border border-gray-200 bg-white p-1">
+            <div className="flex items-center gap-0.5 rounded-lg border border-gray-200 bg-white p-0.5 sm:gap-1 sm:p-1">
               <button
                 onClick={() => navigateDate('prev')}
                 className="cursor-pointer rounded-md p-1.5 text-gray-600 transition-colors hover:bg-gray-100"
@@ -1282,9 +1311,9 @@ export default function AgendaPage() {
               </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"
+                className="cursor-pointer rounded-md px-2 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-100 sm:px-3"
               >
-                Aujourd'hui
+                Auj.
               </button>
               <button
                 onClick={() => navigateDate('next')}
@@ -1299,11 +1328,11 @@ export default function AgendaPage() {
             <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"
+              className="cursor-pointer rounded-lg border border-gray-200 bg-white px-2 py-1.5 text-xs font-medium text-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none sm:px-3"
             >
-              <option value="month">Vue mois</option>
-              <option value="week">Vue semaine</option>
-              <option value="day">Vue jour</option>
+              <option value="month">Mois</option>
+              <option value="week">Semaine</option>
+              <option value="day">Jour</option>
             </select>
           </div>
         </div>
@@ -1320,9 +1349,10 @@ export default function AgendaPage() {
                   {['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"
+                      className="border-r border-gray-200 px-1 py-2 text-center text-[10px] font-medium tracking-wide text-gray-500 uppercase last:border-r-0 sm:px-4 sm:py-3 sm:text-xs"
                     >
-                      {day}
+                      <span className="sm:hidden">{day[0]}</span>
+                      <span className="hidden sm:inline">{day}</span>
                     </div>
                   ))}
                 </div>
@@ -1339,7 +1369,7 @@ export default function AgendaPage() {
                           setView('day');
                         }}
                         className={cn(
-                          'min-h-[120px] cursor-pointer p-2 transition-colors hover:bg-gray-50/50',
+                          'min-h-[60px] cursor-pointer p-1 transition-colors hover:bg-gray-50/50 sm:min-h-[120px] sm:p-2',
                           !day.isCurrentMonth && 'bg-gray-50/30',
                           isToday && 'bg-indigo-50/40',
                         )}
@@ -1347,7 +1377,7 @@ export default function AgendaPage() {
                         <div className="relative">
                           <div
                             className={cn(
-                              'mb-2 text-sm font-semibold',
+                              'mb-1 text-[10px] font-semibold sm:mb-2 sm:text-sm',
                               isToday
                                 ? 'text-indigo-600'
                                 : day.isCurrentMonth
@@ -1362,7 +1392,26 @@ export default function AgendaPage() {
                             <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()}>
+
+                        {/* Mobile : indicateur compacte (points colorés) */}
+                        <div
+                          className="flex flex-wrap gap-0.5 sm:hidden"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          {dayTasks.slice(0, 4).map((task) => (
+                            <div
+                              key={task.id}
+                              className="h-1.5 w-1.5 rounded-full"
+                              style={{ backgroundColor: getEventColor(task) }}
+                            />
+                          ))}
+                        </div>
+
+                        {/* Desktop : événements détaillés */}
+                        <div
+                          className="hidden space-y-1 sm:block"
+                          onClick={(e) => e.stopPropagation()}
+                        >
                           {dayTasks.slice(0, 3).map((task) => {
                             const eventColor = getEventColor(task);
                             return (
@@ -1431,25 +1480,27 @@ export default function AgendaPage() {
               <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)' }}
+                    className="grid min-w-[600px] border-b border-gray-200 bg-gray-50/60"
+                    style={{ gridTemplateColumns: '40px repeat(7, 1fr)' }}
                   >
-                    <div className="px-2 py-3 text-right text-xs font-medium text-gray-500"></div>
+                    <div className="px-1 py-2 text-right text-xs font-medium text-gray-500 sm:px-2 sm:py-3"></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')}
+                          className={cn(
+                            'border-l border-gray-200 px-1 py-2 text-center sm:px-3 sm:py-3',
+                          )}
                         >
-                          <div className="text-xs font-medium text-gray-500 uppercase">
+                          <div className="text-[10px] font-medium text-gray-500 uppercase sm:text-xs">
                             {day
                               .toLocaleDateString('fr-FR', { weekday: 'short' })
                               .replaceAll('.', '')}
                           </div>
                           <div
                             className={cn(
-                              'mx-auto mt-2 flex h-8 w-8 items-center justify-center rounded-full text-sm font-semibold',
+                              'mx-auto mt-1 flex h-6 w-6 items-center justify-center rounded-full text-xs font-semibold sm:mt-2 sm:h-8 sm:w-8 sm:text-sm',
                               isToday ? 'bg-gray-900 text-white' : 'text-gray-900',
                             )}
                           >
@@ -1460,11 +1511,14 @@ export default function AgendaPage() {
                     })}
                   </div>
                   <div
-                    className="relative grid"
-                    style={{ gridTemplateColumns: '60px repeat(7, 1fr)' }}
+                    className="relative grid min-w-[600px]"
+                    style={{ gridTemplateColumns: '40px repeat(7, 1fr)' }}
                   >
                     {/* Colonne des heures */}
-                    <div className="relative border-r border-gray-200 bg-gray-50/40">
+                    <div
+                      className="relative border-r border-gray-200 bg-gray-50/40"
+                      style={{ minWidth: '40px' }}
+                    >
                       {HOURS.map((hour) => {
                         // Vérifier si l'heure actuelle est dans cette plage horaire
                         const weekDays = getWeekDays();
@@ -1481,7 +1535,7 @@ export default function AgendaPage() {
                         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"
+                            className="relative flex h-16 items-start justify-end border-b border-gray-100 pt-1 pr-1 text-[10px] text-gray-500 sm:pr-2 sm:text-xs"
                           >
                             {!shouldHideHour && formatHourLabel(hour)}
                           </div>
@@ -2102,9 +2156,9 @@ export default function AgendaPage() {
                         editMeetData.scheduledAt && editMeetData.scheduledAt.includes('T')
                           ? editMeetData.scheduledAt.split('T')[1]
                           : new Date(editingMeetTask.scheduledAt)
-                              .toISOString()
-                              .split('T')[1]
-                              .slice(0, 5);
+                            .toISOString()
+                            .split('T')[1]
+                            .slice(0, 5);
                       setEditMeetData({
                         ...editMeetData,
                         scheduledAt: `${e.target.value}T${time || '09:00'}`,
@@ -2119,9 +2173,9 @@ export default function AgendaPage() {
                       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)
+                          .toISOString()
+                          .split('T')[1]
+                          .slice(0, 5)
                     }
                     onChange={(e) => {
                       const datePart =