From 17270122df40d9242a6224a181e8e8a212cbb13c Mon Sep 17 00:00:00 2001
From: Louis Mazin <louismazindev@gmail.com>
Date: Sun, 20 Sep 2026 00:23:36 +0200
Subject: [PATCH] perfect

---
 frontend/src/App.jsx                     |    6 +-
 frontend/src/components/NavBar.jsx       |    1 +
 frontend/src/pages/TimeClockPage.jsx     |   16 +-
 frontend/src/pages/WeeklySummaryPage.jsx | 1907 +++++++++++++++-------
 4 files changed, 1325 insertions(+), 605 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index ce960d8..1bd517b 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -56,7 +56,7 @@ function App() {
         <main className="flex-1 overflow-hidden">
 
           {/* Marges autour de la page */}
-          <div className="h-full w-full p-4 md:p-12">
+          <div className="h-full w-full">
 
             {/* SEULE zone scrollable */}
             <div className="page-route h-full w-full overflow-y-auto">
@@ -120,8 +120,8 @@ function App() {
 
         </main>
 
-        <footer className="site-footer shrink-0 border-t border-border bg-muted py-2">
-          <p className="text-center text-sm text-muted-foreground">
+        <footer className="site-footer shrink-0 py-2">
+          <p className="text-right text-sm text-muted-foreground">
             &copy; 2026 Le Fournil du Bocage. Tous droits réservés.
           </p>
         </footer>
diff --git a/frontend/src/components/NavBar.jsx b/frontend/src/components/NavBar.jsx
index 1edd76b..c42c0b7 100644
--- a/frontend/src/components/NavBar.jsx
+++ b/frontend/src/components/NavBar.jsx
@@ -88,6 +88,7 @@ const NavBar = () => {
 
   return (
     <Sidebar
+      className="border-0"
       collapsible="icon"
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
diff --git a/frontend/src/pages/TimeClockPage.jsx b/frontend/src/pages/TimeClockPage.jsx
index f9d8b1a..ebe5aa6 100644
--- a/frontend/src/pages/TimeClockPage.jsx
+++ b/frontend/src/pages/TimeClockPage.jsx
@@ -959,13 +959,6 @@ const TimeClockPage = () => {
                     <span>Voir tout le monde</span>
                   </label>
                 </div>
-
-                {showAllUsers && (
-                  <p className="text-sm text-muted-foreground">
-                    La sélection d’un utilisateur et le pointage manuel sont
-                    désactivés lorsque tous les utilisateurs sont affichés.
-                  </p>
-                )}
               </CardContent>
             </Card>
           )}
@@ -976,7 +969,7 @@ const TimeClockPage = () => {
                 <CardTitle>
                   {editingEntry
                     ? 'Modifier le pointage'
-                    : `Ajouter un pointage manuel${selectedUser ? ` — ${getUserLabel(selectedUser)}` : ''}`}
+                    : `Ajouter un pointage pour${selectedUser ? ` ${getUserLabel(selectedUser)}` : ''}`}
                 </CardTitle>
               </CardHeader>
               <CardContent>
@@ -1011,7 +1004,7 @@ const TimeClockPage = () => {
                   <form onSubmit={handleAddEntry}>
                     <div className="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
                       <div>
-                        <Label>Date:</Label>
+                        <Label>Date d'entrée:</Label>
                         <DatePicker
                           value={newEntry.date}
                           onChange={(value) =>
@@ -1104,7 +1097,10 @@ const TimeClockPage = () => {
 
             <Card>
               <CardHeader className="border-b">
-                <CardTitle>Historique des pointages</CardTitle>
+                <CardTitle>
+                Historique des pointages {
+                  !showAllUsers && `de ${getUserLabel(selectedUser)}`
+                }</CardTitle>
               </CardHeader>
               <CardContent>
                 {loading ? (
diff --git a/frontend/src/pages/WeeklySummaryPage.jsx b/frontend/src/pages/WeeklySummaryPage.jsx
index e83c645..903d6db 100644
--- a/frontend/src/pages/WeeklySummaryPage.jsx
+++ b/frontend/src/pages/WeeklySummaryPage.jsx
@@ -1,22 +1,32 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
 import { timeApi } from '../api/time';
 import { useAuth } from '../context/useAuth';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import {
-  Calendar,
   ChevronLeft,
   ChevronRight,
-  Clock,
   Users,
-  User,
   CalendarDays,
 } from 'lucide-react';
 
 const DEFAULT_START_HOUR = 8;
 const DEFAULT_END_HOUR = 18;
-const HOUR_HEIGHT = 64;
+
+const SCHEDULE_HEADER_HEIGHT = 58;
+const MIN_SCHEDULE_HEIGHT = 180;
+
 const USER_COLORS = [
   '#c56a3d',
   '#3d7c8c',
@@ -30,11 +40,17 @@ const USER_COLORS = [
 const expandOvernightAttendances = (entries) => {
   return entries.map((entry) => {
     if (entry.start_time && !entry.end_time) {
-      return { ...entry, end_time: '24:00:00' };
+      return {
+        ...entry,
+        end_time: '24:00:00',
+      };
     }
 
     if (!entry.start_time && entry.end_time) {
-      return { ...entry, start_time: '00:00:00' };
+      return {
+        ...entry,
+        start_time: '00:00:00',
+      };
     }
 
     return entry;
@@ -42,9 +58,13 @@ const expandOvernightAttendances = (entries) => {
 };
 
 const WeeklySummaryPage = ({ userId }) => {
-  const { isAdmin } = useAuth();
+  const { isAdmin, user: authUser, currentUser } = useAuth();
 
   const [attendances, setAttendances] = useState([]);
+  const [users, setUsers] = useState([]);
+  const [selectedUserId, setSelectedUserId] = useState('');
+  const [showAllUsers, setShowAllUsers] = useState(false);
+
   const [currentWeek, setCurrentWeek] = useState(new Date());
 
   const [selectedDayIndex, setSelectedDayIndex] = useState(() => {
@@ -54,113 +74,474 @@ const WeeklySummaryPage = ({ userId }) => {
 
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
-  const [viewportHeight, setViewportHeight] = useState(() => window.innerHeight);
-  const [availableScheduleHeight, setAvailableScheduleHeight] = useState(620);
+
+  const [availableScheduleHeight, setAvailableScheduleHeight] =
+    useState(620);
+
   const [isMobile, setIsMobile] = useState(false);
 
   const scheduleTableRef = useRef(null);
 
-  useEffect(() => {
-    const updateViewportHeight = () => {
-      setViewportHeight(window.innerHeight);
-    };
+  /*
+   * ------------------------------------------------------------
+   * Utilisateurs
+   * ------------------------------------------------------------
+   */
 
+  const getUserId = (user) => {
+    if (!user) return '';
+
+    if (typeof user === 'number') {
+      return String(user);
+    }
+
+    if (typeof user === 'string') {
+      return /^\d+$/.test(user) ? user : '';
+    }
+
+    return String(
+      user.id ??
+        user.pk ??
+        user.user_id ??
+        user.userId ??
+        user.user?.id ??
+        user.user?.pk ??
+        '',
+    );
+  };
+
+  const getUserLabel = (user) => {
+    if (!user) return 'Utilisateur';
+
+    if (
+      typeof user === 'string' ||
+      typeof user === 'number'
+    ) {
+      return /^\d+$/.test(String(user))
+        ? `Utilisateur #${user}`
+        : String(user);
+    }
+
+    const firstName =
+      user.first_name ||
+      user.firstName ||
+      '';
+
+    const lastName =
+      user.last_name ||
+      user.lastName ||
+      '';
+
+    const fullName =
+      `${firstName} ${lastName}`.trim();
+
+    return (
+      fullName ||
+      user.username ||
+      user.name ||
+      user.user_name ||
+      user.email ||
+      `Utilisateur #${getUserId(user)}`
+    );
+  };
+
+  const getCurrentUserId = () => {
+    return (
+      getUserId(authUser) ||
+      getUserId(currentUser) ||
+      userId ||
+      ''
+    );
+  };
+
+  const getEntryUserId = (entry) => {
+    if (!entry) return '';
+
+    const directId =
+      entry.user_id ??
+      entry.userId ??
+      entry.employee_id ??
+      entry.employeeId ??
+      entry.user_pk;
+
+    if (
+      directId !== undefined &&
+      directId !== null &&
+      directId !== ''
+    ) {
+      return String(directId);
+    }
+
+    if (
+      entry.user &&
+      typeof entry.user === 'object'
+    ) {
+      return getUserId(entry.user);
+    }
+
+    if (typeof entry.user === 'number') {
+      return String(entry.user);
+    }
+
+    if (
+      typeof entry.user === 'string' &&
+      /^\d+$/.test(entry.user)
+    ) {
+      return entry.user;
+    }
+
+    return '';
+  };
+
+  const getEntryUser = (entry) => {
+    if (!entry) return null;
+
+    if (
+      entry.user &&
+      typeof entry.user === 'object'
+    ) {
+      return entry.user;
+    }
+
+    const entryUserId = getEntryUserId(entry);
+
+    if (!entryUserId) {
+      return null;
+    }
+
+    return {
+      id: entryUserId,
+      first_name: entry.first_name,
+      last_name: entry.last_name,
+      username: entry.username,
+      name: entry.user_name || entry.userName,
+      email: entry.email,
+      color: entry.color,
+    };
+  };
+
+  const getUserColor = (user) => {
+    if (user?.color) {
+      return user.color;
+    }
+
+    const id = getUserId(user);
+
+    if (id) {
+      const numericId = Number(id);
+
+      if (!Number.isNaN(numericId)) {
+        return USER_COLORS[
+          numericId % USER_COLORS.length
+        ];
+      }
+    }
+
+    const name =
+      user?.first_name ||
+      user?.firstName ||
+      user?.username ||
+      user?.name ||
+      '';
+
+    const hash = [...String(name)].reduce(
+      (total, character) =>
+        total + character.charCodeAt(0),
+      0,
+    );
+
+    return USER_COLORS[
+      hash % USER_COLORS.length
+    ];
+  };
+
+  const loadAttendances = async () => {
+    try {
+      setLoading(true);
+      setError('');
+
+      const entries = await timeApi.getTimeEntries();
+
+      const normalizedEntries = Array.isArray(entries)
+        ? entries
+        : [];
+
+      setAttendances(normalizedEntries);
+
+      if (!isAdmin) {
+        return;
+      }
+
+      let availableUsers = [];
+
+      if (typeof timeApi.getUsers === 'function') {
+        try {
+          const apiUsers =
+            await timeApi.getUsers();
+
+          if (Array.isArray(apiUsers)) {
+            availableUsers = apiUsers;
+          } else if (
+            Array.isArray(apiUsers?.results)
+          ) {
+            availableUsers = apiUsers.results;
+          } else if (
+            Array.isArray(apiUsers?.data)
+          ) {
+            availableUsers = apiUsers.data;
+          } else if (
+            Array.isArray(apiUsers?.users)
+          ) {
+            availableUsers = apiUsers.users;
+          }
+        } catch (usersError) {
+          console.warn(
+            'Impossible de charger les utilisateurs.',
+            usersError,
+          );
+        }
+      }
+
+      const usersById = new Map();
+
+      availableUsers.forEach((user) => {
+        const id = getUserId(user);
+
+        if (id) {
+          usersById.set(id, user);
+        }
+      });
+
+      normalizedEntries.forEach((entry) => {
+        const id = getEntryUserId(entry);
+
+        if (!id || usersById.has(id)) {
+          return;
+        }
+
+        const entryUser =
+          getEntryUser(entry);
+
+        if (entryUser) {
+          usersById.set(id, entryUser);
+        }
+      });
+
+      availableUsers = [...usersById.values()]
+        .filter((user) => getUserId(user))
+        .sort((a, b) =>
+          getUserLabel(a).localeCompare(
+            getUserLabel(b),
+            'fr',
+          ),
+        );
+
+      setUsers(availableUsers);
+
+      const currentUserId =
+        getCurrentUserId();
+
+      setSelectedUserId(
+        (currentSelectedId) => {
+          if (
+            currentSelectedId &&
+            availableUsers.some(
+              (user) =>
+                getUserId(user) ===
+                String(currentSelectedId),
+            )
+          ) {
+            return currentSelectedId;
+          }
+
+          return (
+            currentUserId ||
+            getUserId(availableUsers[0]) ||
+            ''
+          );
+        },
+      );
+    } catch (loadError) {
+      setError(
+        'Impossible de charger les pointages.',
+      );
+      console.error(loadError);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadAttendances();
+  }, [isAdmin, userId]);
+
+  /*
+   * ------------------------------------------------------------
+   * Responsive
+   * ------------------------------------------------------------
+   */
+
+  useEffect(() => {
     const checkMobile = () => {
       setIsMobile(window.innerWidth < 768);
     };
 
-    updateViewportHeight();
     checkMobile();
 
-    window.addEventListener('resize', updateViewportHeight);
-    window.addEventListener('resize', checkMobile);
+    window.addEventListener(
+      'resize',
+      checkMobile,
+    );
 
     return () => {
-      window.removeEventListener('resize', updateViewportHeight);
-      window.removeEventListener('resize', checkMobile);
+      window.removeEventListener(
+        'resize',
+        checkMobile,
+      );
     };
   }, []);
 
+  /*
+   * ------------------------------------------------------------
+   * Hauteur du planning
+   * ------------------------------------------------------------
+   */
+
   useLayoutEffect(() => {
     const updateScheduleHeight = () => {
-      const scheduleTable = scheduleTableRef.current;
-      const main = document.querySelector('main');
-      const footer = document.querySelector('footer');
+      const scheduleTable =
+        scheduleTableRef.current;
 
-      if (!scheduleTable || !main || !footer) {
+      const main =
+        document.querySelector('main');
+
+      const footer =
+        document.querySelector('footer');
+
+      if (
+        !scheduleTable ||
+        !main ||
+        !footer
+      ) {
         return;
       }
 
-      const mainStyles = window.getComputedStyle(main);
-      const bottomPadding = parseFloat(mainStyles.paddingBottom) || 0;
-      const footerHeight = footer.getBoundingClientRect().height;
-      const tableTop = scheduleTable.getBoundingClientRect().top;
-      const tableHeaderHeight = 58;
+      const mainStyles =
+        window.getComputedStyle(main);
 
+      const bottomPadding =
+        parseFloat(
+          mainStyles.paddingBottom,
+        ) || 0;
+
+      const footerHeight =
+        footer.getBoundingClientRect().height;
+
+      const tableTop =
+        scheduleTable.getBoundingClientRect().top;
+
+      /*
+       * Ici on calcule UNIQUEMENT la hauteur
+       * disponible pour les heures.
+       *
+       * Le header de 58px est ajouté séparément
+       * dans la hauteur totale du planning.
+       */
       const remainingHeight =
         window.innerHeight -
         tableTop -
         footerHeight -
         bottomPadding -
-        tableHeaderHeight;
+        SCHEDULE_HEADER_HEIGHT;
 
-      setAvailableScheduleHeight(Math.max(180, remainingHeight));
+      setAvailableScheduleHeight(
+        Math.max(
+          MIN_SCHEDULE_HEIGHT,
+          remainingHeight,
+        ),
+      );
     };
 
     updateScheduleHeight();
 
-    window.addEventListener('resize', updateScheduleHeight);
+    window.addEventListener(
+      'resize',
+      updateScheduleHeight,
+    );
 
     return () => {
-      window.removeEventListener('resize', updateScheduleHeight);
+      window.removeEventListener(
+        'resize',
+        updateScheduleHeight,
+      );
     };
-  }, [loading, error]);
+  }, [loading, error, showAllUsers, isMobile]);
 
-  useEffect(() => {
-    const loadAttendances = async () => {
-      try {
-        setLoading(true);
-        setError('');
-
-        const entries = await timeApi.getTimeEntries();
-        setAttendances(entries);
-      } catch (loadError) {
-        setError('Impossible de charger les pointages.');
-        console.error(loadError);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    loadAttendances();
-  }, [userId]);
+  /*
+   * ------------------------------------------------------------
+   * Dates / horaires
+   * ------------------------------------------------------------
+   */
 
   const getWeekDays = (date) => {
     const startOfWeek = new Date(date);
-    const day = startOfWeek.getDay() || 7;
+    const day =
+      startOfWeek.getDay() || 7;
 
-    startOfWeek.setDate(startOfWeek.getDate() - day + 1);
+    startOfWeek.setDate(
+      startOfWeek.getDate() - day + 1,
+    );
 
-    return Array.from({ length: 7 }, (_, index) => {
-      const weekDay = new Date(startOfWeek);
-      weekDay.setDate(startOfWeek.getDate() + index);
-      return weekDay;
-    });
+    return Array.from(
+      { length: 7 },
+      (_, index) => {
+        const weekDay =
+          new Date(startOfWeek);
+
+        weekDay.setDate(
+          startOfWeek.getDate() + index,
+        );
+
+        return weekDay;
+      },
+    );
   };
 
+  const weekDays =
+    getWeekDays(
+      currentWeek,
+    );
+
   const formatDateKey = (date) => {
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const day = String(date.getDate()).padStart(2, '0');
+    const year =
+      date.getFullYear();
+
+    const month =
+      String(
+        date.getMonth() + 1,
+      ).padStart(2, '0');
+
+    const day =
+      String(
+        date.getDate(),
+      ).padStart(2, '0');
 
     return `${year}-${month}-${day}`;
   };
 
-  const getTimeValue = (attendance, key) => {
+  const getTimeValue = (
+    attendance,
+    key,
+  ) => {
     const legacyKey =
-      key === 'start_time' ? 'startTime' : 'endTime';
+      key === 'start_time'
+        ? 'startTime'
+        : 'endTime';
 
-    const value = attendance[key] || attendance[legacyKey] || '';
+    const value =
+      attendance[key] ||
+      attendance[legacyKey] ||
+      '';
 
     return value.slice(0, 5);
   };
@@ -170,160 +551,118 @@ const WeeklySummaryPage = ({ userId }) => {
       return null;
     }
 
-    const [hours, minutes] = time.split(':').map(Number);
+    const [
+      hours,
+      minutes,
+    ] = time
+      .split(':')
+      .map(Number);
 
-    if (Number.isNaN(hours) || Number.isNaN(minutes)) {
+    if (
+      Number.isNaN(hours) ||
+      Number.isNaN(minutes)
+    ) {
       return null;
     }
 
-    return (hours * 60) + minutes;
+    return (
+      hours * 60 +
+      minutes
+    );
   };
 
-  const formatSegmentTime = (minutes) => {
+  const formatSegmentTime = (
+    minutes,
+  ) => {
     if (minutes === 1440) {
       return '23h59';
     }
 
-    return `${String(Math.floor(minutes / 60)).padStart(2, '0')}h${String(
+    return `${String(
+      Math.floor(minutes / 60),
+    ).padStart(2, '0')}h${String(
       minutes % 60,
     ).padStart(2, '0')}`;
   };
 
-  const getUserColor = (first_name) => {
-    const hash = [...first_name].reduce(
-      (total, character) => total + character.charCodeAt(0),
-      0,
-    );
+  const getAttendancesForDay = (
+    date,
+  ) => {
+    const dateKey =
+      formatDateKey(date);
 
-    return USER_COLORS[hash % USER_COLORS.length];
-  };
-
-  const getAttendancesForDay = (date) => {
-    const dateKey = formatDateKey(date);
-
-    return expandOvernightAttendances(attendances).filter(
+    return expandOvernightAttendances(
+      attendances,
+    ).filter(
       (attendance) =>
-        String(attendance.date).slice(0, 10) === dateKey,
+        String(attendance.date).slice(
+          0,
+          10,
+        ) === dateKey,
     );
   };
 
-  const getAttendanceSegments = (dayAttendances) => {
-    const validAttendances = dayAttendances
-      .map((attendance) => ({
-        attendance,
-        start: getMinutes(
-          getTimeValue(attendance, 'start_time'),
-        ),
-        end: getMinutes(
-          getTimeValue(attendance, 'end_time'),
-        ),
-      }))
-      .filter(
-        ({ start, end }) =>
-          start !== null &&
-          end !== null &&
-          end > start,
-      );
+  /*
+   * ------------------------------------------------------------
+   * Filtrage utilisateur
+   * ------------------------------------------------------------
+   */
 
-    const boundaries = [
-      ...new Set(
-        validAttendances.flatMap(({ start, end }) => [
-          start,
-          end,
-        ]),
-      ),
-    ].sort((a, b) => a - b);
+  const selectedUser =
+    users.find(
+      (user) =>
+        getUserId(user) ===
+        String(selectedUserId),
+    );
 
-    return boundaries
-      .slice(0, -1)
-      .map((start, index) => {
-        const end = boundaries[index + 1];
+  const getFilteredAttendances = (
+    entries,
+  ) => {
+    if (!isAdmin) {
+      return entries;
+    }
 
-        const activeAttendances = validAttendances.filter(
-          ({
-            start: entryStart,
-            end: entryEnd,
-          }) =>
-            entryStart <= start &&
-            entryEnd >= end,
-        );
+    if (showAllUsers) {
+      return entries;
+    }
 
-        if (!activeAttendances.length) {
-          return null;
-        }
+    if (!selectedUserId) {
+      return [];
+    }
 
-        return {
-          start,
-          end,
-          users: activeAttendances
-            .map(({ attendance }) => attendance.first_name)
-            .filter(Boolean)
-            .filter(
-              (first_name, first_nameIndex, names) =>
-                names.indexOf(first_name) === first_nameIndex,
-            )
-            .map((first_name) => ({
-              first_name,
-              color: getUserColor(first_name),
-            })),
-        };
-      })
-      .filter(Boolean);
+    return entries.filter(
+      (entry) =>
+        getEntryUserId(entry) ===
+        String(selectedUserId),
+    );
   };
 
-  const getAttendanceColumns = (dayAttendances) => {
-    const columns = new Map();
+  /*
+   * ------------------------------------------------------------
+   * Navigation
+   * ------------------------------------------------------------
+   */
 
-    dayAttendances.forEach((attendance) => {
-      const start = getMinutes(
-        getTimeValue(attendance, 'start_time'),
-      );
-
-      const end = getMinutes(
-        getTimeValue(attendance, 'end_time'),
-      );
-
-      const first_name = attendance.first_name;
-
-      if (
-        start === null ||
-        end === null ||
-        end <= start ||
-        !first_name
-      ) {
-        return;
-      }
-
-      const currentColumn = columns.get(first_name);
-
-      columns.set(first_name, {
-        first_name,
-        color: getUserColor(first_name),
-        start: currentColumn
-          ? Math.min(currentColumn.start, start)
-          : start,
-        end: currentColumn
-          ? Math.max(currentColumn.end, end)
-          : end,
-      });
-    });
-
-    return [...columns.values()];
-  };
-
-  const navigateWeek = (direction) => {
-    const newWeek = new Date(currentWeek);
+  const navigateWeek = (
+    direction,
+  ) => {
+    const newWeek =
+      new Date(currentWeek);
 
     newWeek.setDate(
-      currentWeek.getDate() + direction * 7,
+      currentWeek.getDate() +
+        direction * 7,
     );
 
     setCurrentWeek(newWeek);
   };
 
-  const navigateDay = (direction) => {
+  const navigateDay = (
+    direction,
+  ) => {
     const nextDayIndex =
-      selectedDayIndex + direction;
+      selectedDayIndex +
+      direction;
 
     if (
       nextDayIndex < 0 ||
@@ -338,53 +677,81 @@ const WeeklySummaryPage = ({ userId }) => {
       return;
     }
 
-    setSelectedDayIndex(nextDayIndex);
+    setSelectedDayIndex(
+      nextDayIndex,
+    );
   };
 
-  const getScheduleBounds = (weekDays) => {
-    const weekDateKeys = new Set(
-      weekDays.map(formatDateKey),
-    );
+  /*
+   * ------------------------------------------------------------
+   * Planning
+   * ------------------------------------------------------------
+   */
+
+  const getScheduleBounds = (
+    weekDays,
+  ) => {
+    const weekDateKeys =
+      new Set(
+        weekDays.map(
+          formatDateKey,
+        ),
+      );
 
     const weekAttendances =
-      expandOvernightAttendances(attendances).filter(
+      getFilteredAttendances(
+        expandOvernightAttendances(
+          attendances,
+        ),
+      ).filter(
         (attendance) =>
           weekDateKeys.has(
-            String(attendance.date).slice(0, 10),
+            String(
+              attendance.date,
+            ).slice(0, 10),
           ),
       );
 
-    const times = weekAttendances
-      .flatMap((attendance) => [
-        getMinutes(
-          getTimeValue(
-            attendance,
-            'start_time',
-          ),
-        ),
-        getMinutes(
-          getTimeValue(
-            attendance,
-            'end_time',
-          ),
-        ),
-      ])
-      .filter((time) => time !== null);
+    const times =
+      weekAttendances
+        .flatMap(
+          (attendance) => [
+            getMinutes(
+              getTimeValue(
+                attendance,
+                'start_time',
+              ),
+            ),
+            getMinutes(
+              getTimeValue(
+                attendance,
+                'end_time',
+              ),
+            ),
+          ],
+        )
+        .filter(
+          (time) => time !== null,
+        );
 
     if (!times.length) {
       return {
-        startHour: DEFAULT_START_HOUR,
-        endHour: DEFAULT_END_HOUR,
+        startHour:
+          DEFAULT_START_HOUR,
+        endHour:
+          DEFAULT_END_HOUR,
       };
     }
 
-    const firstHour = Math.floor(
-      Math.min(...times) / 60,
-    );
+    const firstHour =
+      Math.floor(
+        Math.min(...times) / 60,
+      );
 
-    const lastHour = Math.ceil(
-      Math.max(...times) / 60,
-    );
+    const lastHour =
+      Math.ceil(
+        Math.max(...times) / 60,
+      );
 
     return {
       startHour: firstHour,
@@ -402,35 +769,146 @@ const WeeklySummaryPage = ({ userId }) => {
     endHour,
     hourHeight,
   ) => {
-    const visibleStart = Math.max(
-      startHour * 60,
-      start,
-    );
+    const visibleStart =
+      Math.max(
+        startHour * 60,
+        start,
+      );
 
-    const visibleEnd = Math.min(
-      endHour * 60,
-      end,
-    );
+    const visibleEnd =
+      Math.min(
+        endHour * 60,
+        end,
+      );
 
     return {
       top: `${
-        ((visibleStart - startHour * 60) / 60) *
+        ((visibleStart -
+          startHour * 60) /
+          60) *
         hourHeight
       }px`,
+
       height: `${Math.max(
-        ((visibleEnd - visibleStart) / 60) *
+        ((visibleEnd -
+          visibleStart) /
+          60) *
           hourHeight,
         1,
       )}px`,
     };
   };
 
+  /*
+   * ------------------------------------------------------------
+   * Utilisateur -> horaires
+   * ------------------------------------------------------------
+   */
+
+  const getUserScheduleForDay = (
+    dayAttendances,
+    user,
+  ) => {
+    const userId =
+      getUserId(user);
+
+    return dayAttendances
+      .filter(
+        (attendance) =>
+          getEntryUserId(
+            attendance,
+          ) === userId,
+      )
+      .map((attendance) => ({
+        attendance,
+        start: getMinutes(
+          getTimeValue(
+            attendance,
+            'start_time',
+          ),
+        ),
+        end: getMinutes(
+          getTimeValue(
+            attendance,
+            'end_time',
+          ),
+        ),
+      }))
+      .filter(
+        ({ start, end }) =>
+          start !== null &&
+          end !== null &&
+          end > start,
+      );
+  };
+
+  const getUserDayBounds = (
+    dayAttendances,
+    user,
+  ) => {
+    const schedules =
+      getUserScheduleForDay(
+        dayAttendances,
+        user,
+      );
+
+    if (!schedules.length) {
+      return null;
+    }
+
+    return {
+      start: Math.min(
+        ...schedules.map(
+          ({ start }) => start,
+        ),
+      ),
+
+      end: Math.max(
+        ...schedules.map(
+          ({ end }) => end,
+        ),
+      ),
+    };
+  };
+
+  /*
+   * ------------------------------------------------------------
+   * Affichage utilisateur sélectionné
+   * ------------------------------------------------------------
+   */
+
+  const getSelectedUserAttendances =
+    (dayAttendances) => {
+      if (!isAdmin) {
+        return dayAttendances;
+      }
+
+      if (showAllUsers) {
+        return dayAttendances;
+      }
+
+      return dayAttendances.filter(
+        (attendance) =>
+          getEntryUserId(
+            attendance,
+          ) ===
+          String(selectedUserId),
+      );
+    };
+
+  /*
+   * ------------------------------------------------------------
+   * États du planning
+   * ------------------------------------------------------------
+   */
+
   if (loading) {
     return (
       <Card className="page-layout page-state weekly-schedule flex h-full w-full">
         <CardContent className="p-6">
-          <div className="flex items-center justify-center h-32">
-            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500" />
+          <div className="flex h-32 items-center justify-center">
+            <div className="h-8 w-8 animate-spin rounded-full border-b-2 border-blue-500" />
+
             <span className="ml-3">
               Chargement...
             </span>
@@ -444,15 +922,7 @@ const WeeklySummaryPage = ({ userId }) => {
     return (
       <Card className="page-layout page-state weekly-schedule schedule-error flex h-full w-full">
         <CardContent className="p-6">
-          <div className="text-red-500 text-center">
-            <div className="flex items-center justify-center mb-2">
-              <div className="bg-red-100 p-2 rounded-full">
-                <div className="bg-red-500 text-white p-1 rounded-full">
-                  <div className="w-4 h-4" />
-                </div>
-              </div>
-            </div>
-
+          <div className="text-center text-red-500">
             <p>{error}</p>
           </div>
         </CardContent>
@@ -460,77 +930,116 @@ const WeeklySummaryPage = ({ userId }) => {
     );
   }
 
-  const weekDays = getWeekDays(currentWeek);
+  const {
+    startHour,
+    endHour,
+  } =
+    getScheduleBounds(
+      weekDays,
+    );
 
-  const { startHour, endHour } =
-    getScheduleBounds(weekDays);
-
-  const hourCount = endHour - startHour;
-
-  const measuredHeight = Math.min(
-    availableScheduleHeight,
-    Math.max(180, viewportHeight - 180),
-  );
+  const hourCount =
+    endHour - startHour;
 
+  /*
+   * Hauteur EXACTE de la zone horaire.
+   *
+   * Le header fait exactement 58px.
+   * La grille des heures utilise exactement
+   * availableScheduleHeight.
+   */
   const scheduleHeight = Math.max(
-    180,
-    measuredHeight,
+    MIN_SCHEDULE_HEIGHT,
+    availableScheduleHeight,
   );
 
-  const hourHeight = Math.min(
-    HOUR_HEIGHT,
-    Math.max(
-      12,
-      scheduleHeight / hourCount,
-    ),
-  );
+  const totalPlanningHeight =
+    SCHEDULE_HEADER_HEIGHT +
+    scheduleHeight;
 
-  const hours = Array.from(
-    { length: hourCount },
-    (_, index) => startHour + index,
-  );
+  const hourHeight =
+    hourCount > 0
+      ? scheduleHeight / hourCount
+      : 0;
 
-  const formatHour = (hour) =>
-    `${String(hour).padStart(2, '0')}:00`;
+  const hours =
+    Array.from(
+      {
+        length: hourCount,
+      },
+      (_, index) =>
+        startHour + index,
+    );
 
-  const legendUsers = [
-    ...new Set(
-      attendances
-        .map((attendance) => attendance.first_name)
-        .filter(Boolean),
-    ),
-  ]
-    .sort((first, second) =>
-      first.localeCompare(second, 'fr'),
-    )
-    .map((first_name) => ({
-      first_name,
-      color: getUserColor(first_name),
+  const formatHour = (
+    hour,
+  ) =>
+    `${String(hour).padStart(
+      2,
+      '0',
+    )}:00`;
+
+  /*
+   * ------------------------------------------------------------
+   * Mobile
+   * ------------------------------------------------------------
+   */
+
+  const displayDay =
+    weekDays[
+      selectedDayIndex
+    ];
+
+  /*
+   * ------------------------------------------------------------
+   * Légende
+   * ------------------------------------------------------------
+   */
+
+  const legendUsers =
+    (showAllUsers
+      ? users
+      : selectedUser
+        ? [selectedUser]
+        : []
+    ).map((user) => ({
+      id: getUserId(user),
+      label: getUserLabel(user),
+      color: getUserColor(user),
     }));
 
-  const displayDay = isMobile
-    ? weekDays[selectedDayIndex]
-    : null;
-
   return (
     <Card
       className={`flex h-full w-full weekly-schedule page-layout${
-        isAdmin ? ' multi-user-schedule' : ''
+        isAdmin
+          ? ' multi-user-schedule'
+          : ''
       }`}
     >
       <CardHeader className="border-b">
-        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
-          <div>
+        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+          <div className="min-w-0">
             <CardTitle className="flex items-center gap-2">
               {isAdmin ? (
                 <>
                   <Users className="h-5 w-5" />
-                  Récapitulatif de tous les utilisateurs
+
+                  {showAllUsers
+                    ? 'Récapitulatif de tous les utilisateurs'
+                    : `Récapitulatif de ${
+                        selectedUser
+                          ? getUserLabel(
+                              selectedUser,
+                            )
+                          : 'l’utilisateur'
+                      }`}
                 </>
               ) : (
                 <>
                   <CalendarDays className="h-5 w-5" />
-                  Emploi du temps hebdomadaire
+
+                  Emploi du temps
+                  hebdomadaire
                 </>
               )}
             </CardTitle>
@@ -541,7 +1050,9 @@ const WeeklySummaryPage = ({ userId }) => {
               <Button
                 variant="outline"
                 size="sm"
-                onClick={() => navigateWeek(-1)}
+                onClick={() =>
+                  navigateWeek(-1)
+                }
                 className="flex items-center gap-1"
               >
                 <ChevronLeft className="h-4 w-4" />
@@ -573,7 +1084,9 @@ const WeeklySummaryPage = ({ userId }) => {
               <Button
                 variant="outline"
                 size="sm"
-                onClick={() => navigateWeek(1)}
+                onClick={() =>
+                  navigateWeek(1)
+                }
                 className="flex items-center gap-1"
               >
                 Suivante
@@ -587,7 +1100,9 @@ const WeeklySummaryPage = ({ userId }) => {
               <Button
                 variant="outline"
                 size="sm"
-                onClick={() => navigateDay(-1)}
+                onClick={() =>
+                  navigateDay(-1)
+                }
               >
                 <ChevronLeft className="h-4 w-4" />
               </Button>
@@ -609,62 +1124,161 @@ const WeeklySummaryPage = ({ userId }) => {
               <Button
                 variant="outline"
                 size="sm"
-                onClick={() => navigateDay(1)}
+                onClick={() =>
+                  navigateDay(1)
+                }
               >
                 <ChevronRight className="h-4 w-4" />
               </Button>
             </div>
           )}
-          </div>
+        </div>
       </CardHeader>
 
-      <CardContent className="p-4">
-        {isAdmin && legendUsers.length > 0 && (
-          <div className="mb-4 p-3 bg-muted rounded-lg">
-            <div className="flex flex-wrap items-center gap-2">
-              <span className="text-sm font-medium mr-2">
-                Légende :
-              </span>
-
-              {legendUsers.map(
-                ({ first_name, color }) => (
-                  <div
-                    key={first_name}
-                    className="flex items-center gap-1"
+      <CardContent>
+        {/* Sélection utilisateur */}
+        {isAdmin && (
+          <Card className="mb-4">
+            <CardContent className="space-y-4 pt-0">
+              <div className="flex flex-col gap-3 md:flex-row md:items-center">
+                <div className="flex min-w-0 flex-1 items-center gap-2">
+                  <label
+                    htmlFor="weekly-selected-user"
+                    className="shrink-0 text-sm font-medium"
                   >
-                    <div
-                      className="w-3 h-3 rounded-full"
-                      style={{
-                        backgroundColor: color,
-                      }}
-                    />
+                    Voir le récap de :
+                  </label>
 
-                    <span className="text-sm">
-                      {first_name}
-                    </span>
-                  </div>
-                ),
-              )}
-            </div>
-          </div>
+                  <select
+                    id="weekly-selected-user"
+                    value={selectedUserId}
+                    disabled={showAllUsers}
+                    onChange={(event) => {
+                      setSelectedUserId(
+                        event.target.value,
+                      );
+
+                      setError('');
+                    }}
+                    className="h-10 min-w-0 flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                  >
+                    {users.length ===
+                    0 ? (
+                      <option value="">
+                        Aucun utilisateur
+                        disponible
+                      </option>
+                    ) : (
+                      users.map(
+                        (user) => (
+                          <option
+                            key={getUserId(
+                              user,
+                            )}
+                            value={getUserId(
+                              user,
+                            )}
+                          >
+                            {getUserLabel(
+                              user,
+                            )}
+                          </option>
+                        ),
+                      )
+                    )}
+                  </select>
+                </div>
+
+                <label className="flex h-10 shrink-0 cursor-pointer items-center gap-2 rounded-md border px-3 text-sm">
+                  <input
+                    type="checkbox"
+                    checked={showAllUsers}
+                    onChange={(event) => {
+                      setShowAllUsers(
+                        event.target.checked,
+                      );
+
+                      setError('');
+                    }}
+                    className="size-4 accent-primary"
+                  />
+
+                  <span>
+                    Voir tout le monde
+                  </span>
+                </label>
+              </div>
+            </CardContent>
+          </Card>
         )}
 
+        {/* Légende */}
+        {isAdmin &&
+          showAllUsers &&
+          legendUsers.length > 0 && (
+            <div className="mb-4 rounded-lg bg-muted p-3">
+              <div className="flex flex-wrap items-center gap-2">
+                <span className="mr-2 text-sm font-medium">
+                  Légende :
+                </span>
+
+                {legendUsers.map(
+                  ({
+                    id,
+                    label,
+                    color,
+                  }) => (
+                    <div
+                      key={id}
+                      className="flex items-center gap-1"
+                    >
+                      <div
+                        className="h-3 w-3 rounded-full"
+                        style={{
+                          backgroundColor:
+                            color,
+                        }}
+                      />
+
+                      <span className="text-sm">
+                        {label}
+                      </span>
+                    </div>
+                  ),
+                )}
+              </div>
+            </div>
+          )}
+
+        {/* ======================================================
+            PLANNING
+            ====================================================== */}
+
         <div
           ref={scheduleTableRef}
-          className="relative overflow-auto border rounded-lg"
+          className="relative overflow-x-auto overflow-y-hidden rounded-lg border"
           style={{
-            height: `${Math.max(
-              180,
-              Math.min(
-                availableScheduleHeight,
-                viewportHeight - 180,
-              ),
-            )}px`,
+            height: `${totalPlanningHeight}px`,
           }}
         >
+          {/* ====================================================
+              MOBILE
+              ==================================================== */}
+
           {isMobile ? (
-            <div className="grid grid-cols-1 gap-0 min-w-[300px]">
-              <div className="p-2 text-center font-medium border-b sticky top-0 bg-background z-10">
+            <div
+              className="grid min-w-[300px] grid-cols-1"
+              style={{
+                height: `${totalPlanningHeight}px`,
+              }}
+            >
+              {/* Header */}
+              <div
+                className="sticky top-0 z-10 flex items-center justify-center border-b bg-background p-2 text-center font-medium"
+                style={{
+                  height: `${SCHEDULE_HEADER_HEIGHT}px`,
+                }}
+              >
                 {displayDay.toLocaleDateString(
                   'fr-FR',
                   {
@@ -675,53 +1289,88 @@ const WeeklySummaryPage = ({ userId }) => {
                 )}
               </div>
 
-              <div className="grid grid-cols-[64px_1fr] gap-0">
-                <div className="border-r">
-                  {hours.map((hour) => (
-                    <div
-                      key={hour}
-                      className="flex items-center justify-center text-xs border-b"
-                      style={{
-                        height: `${hourHeight}px`,
-                      }}
-                    >
-                      {formatHour(hour)}
-                    </div>
-                  ))}
+              <div
+                className="grid grid-cols-[64px_1fr]"
+                style={{
+                  height: `${scheduleHeight}px`,
+                }}
+              >
+                {/* Heures */}
+                <div
+                  className="border-r"
+                  style={{
+                    height: `${scheduleHeight}px`,
+                  }}
+                >
+                  {hours.map(
+                    (hour) => (
+                      <div
+                        key={hour}
+                        className="flex items-center justify-center border-b text-xs"
+                        style={{
+                          height: `${hourHeight}px`,
+                        }}
+                      >
+                        {formatHour(
+                          hour,
+                        )}
+                      </div>
+                    ),
+                  )}
                 </div>
 
+                {/* Planning */}
                 <div
                   className="relative"
                   style={{
-                    height: `${hourCount * hourHeight}px`,
+                    height: `${scheduleHeight}px`,
                   }}
                 >
-                  {hours.map((hour) => (
-                    <div
-                      key={hour}
-                      className="border-b border-gray-200"
-                      style={{
-                        height: `${hourHeight}px`,
-                      }}
-                    />
-                  ))}
+                  {hours.map(
+                    (hour) => (
+                      <div
+                        key={hour}
+                        className="border-b border-gray-200"
+                        style={{
+                          height: `${hourHeight}px`,
+                        }}
+                      />
+                    ),
+                  )}
+
+                  {isAdmin &&
+                  showAllUsers ? (
+                    <div className="absolute inset-0 flex">
+                      {users.map(
+                        (user) => {
+                          const bounds =
+                            getUserDayBounds(
+                              getAttendancesForDay(
+                                displayDay,
+                              ),
+                              user,
+                            );
+
+                          const color =
+                            getUserColor(
+                              user,
+                            );
+
+                          if (!bounds) {
+                            return (
+                              <div
+                                key={getUserId(
+                                  user,
+                                )}
+                                className="relative min-w-0 flex-1"
+                              />
+                            );
+                          }
 
-                  {isAdmin
-                    ? getAttendanceColumns(
-                        getAttendancesForDay(
-                          displayDay,
-                        ),
-                      ).map(
-                        ({
-                          start,
-                          end,
-                          first_name,
-                          color,
-                        }, columnIndex) => {
                           const style =
                             getAttendanceStyle(
-                              start,
-                              end,
+                              bounds.start,
+                              bounds.end,
                               startHour,
                               endHour,
                               hourHeight,
@@ -729,38 +1378,67 @@ const WeeklySummaryPage = ({ userId }) => {
 
                           return (
                             <div
-                              key={`${formatDateKey(
-                                displayDay,
-                              )}-${first_name}`}
-                              className="absolute rounded-sm"
-                              style={{
-                                ...style,
-                                left: `${
-                                  5 +
-                                  columnIndex * 9
-                                }px`,
-                                width: '6px',
-                                backgroundColor:
-                                  color,
-                              }}
-                              title={`${first_name} : ${formatSegmentTime(
-                                start,
+                              key={getUserId(
+                                user,
+                              )}
+                              className="relative min-w-0 flex-1"
+                              title={`${getUserLabel(
+                                user,
+                              )} : ${formatSegmentTime(
+                                bounds.start,
                               )} - ${formatSegmentTime(
-                                end,
+                                bounds.end,
                               )}`}
-                            />
+                            >
+                              <div
+                                className="absolute left-1/2 w-2 -translate-x-1/2 rounded-full"
+                                style={{
+                                  ...style,
+                                  backgroundColor:
+                                    color,
+                                }}
+                              />
+                            </div>
                           );
                         },
+                      )}
+                    </div>
+                  ) : (
+                    getSelectedUserAttendances(
+                      getAttendancesForDay(
+                        displayDay,
+                      ),
+                    )
+                      .map(
+                        (attendance) => ({
+                          attendance,
+                          start: getMinutes(
+                            getTimeValue(
+                              attendance,
+                              'start_time',
+                            ),
+                          ),
+                          end: getMinutes(
+                            getTimeValue(
+                              attendance,
+                              'end_time',
+                            ),
+                          ),
+                        }),
                       )
-                    : getAttendanceSegments(
-                        getAttendancesForDay(
-                          displayDay,
-                        ),
-                      ).map(
+                      .filter(
+                        ({
+                          start,
+                          end,
+                        }) =>
+                          start !== null &&
+                          end !== null &&
+                          end > start,
+                      )
+                      .map(
                         ({
                           start,
                           end,
-                          users,
                         }) => {
                           const style =
                             getAttendanceStyle(
@@ -771,23 +1449,13 @@ const WeeklySummaryPage = ({ userId }) => {
                               hourHeight,
                             );
 
-                          const segmentLabel =
-                            users
-                              .map(
-                                ({
-                                  first_name,
-                                }) => first_name,
-                              )
-                              .join(', ');
-
                           return (
                             <div
                               key={`${formatDateKey(
                                 displayDay,
                               )}-${start}-${end}`}
-                              className="absolute bg-blue-500/80 rounded-sm border border-blue-600/30 left-0 right-0"
+                              className="absolute left-0 right-0 rounded-sm border border-blue-600/30 bg-blue-500/80"
                               style={style}
-                              title={segmentLabel}
                             >
                               <div className="p-1 text-xs text-white">
                                 {formatSegmentTime(
@@ -801,218 +1469,273 @@ const WeeklySummaryPage = ({ userId }) => {
                             </div>
                           );
                         },
-                      )}
+                      )
+                  )}
                 </div>
               </div>
             </div>
           ) : (
+            /* ====================================================
+               DESKTOP
+               ==================================================== */
+
             <div
               className="grid min-w-[900px]"
               style={{
-                gridTemplateColumns: `64px repeat(7, minmax(120px, 1fr))`,
+                gridTemplateColumns:
+                  '64px repeat(7, minmax(120px, 1fr))',
+
+                gridTemplateRows:
+                  `${SCHEDULE_HEADER_HEIGHT}px ${scheduleHeight}px`,
+
+                height: `${totalPlanningHeight}px`,
               }}
             >
-              {/* En-tête */}
-              <div className="sticky top-0 z-20 bg-background border-b border-r p-2" />
-
-              {weekDays.map((day, dayIndex) => (
-                <div
-                  key={formatDateKey(day)}
-                  className={`sticky top-0 z-20 bg-background border-b border-r p-2 text-center font-medium ${
-                    dayIndex === selectedDayIndex
-                      ? 'bg-muted'
-                      : ''
-                  }`}
-                >
-                  <div className="text-sm capitalize">
-                    {day.toLocaleDateString(
-                      'fr-FR',
-                      {
-                        weekday: 'long',
-                      },
-                    )}
-                  </div>
-
-                  <div className="text-xs text-muted-foreground">
-                    {day.toLocaleDateString(
-                      'fr-FR',
-                      {
-                        day: '2-digit',
-                        month: 'short',
-                      },
-                    )}
-                  </div>
-                </div>
-              ))}
-
-              {/* Heures */}
-              <div className="border-r">
-                {hours.map((hour) => (
-                  <div
-                    key={hour}
-                    className="flex items-start justify-center pt-1 text-xs text-muted-foreground border-b"
-                    style={{
-                      height: `${hourHeight}px`,
-                    }}
-                  >
-                    {formatHour(hour)}
-                  </div>
-                ))}
-              </div>
+              {/* Coin supérieur gauche */}
+              <div className="border-b border-r bg-background p-2" />
 
               {/* Jours */}
-              {weekDays.map((day) => {
-                const dayAttendances =
-                  getAttendancesForDay(day);
-
-                return (
+              {weekDays.map(
+                (
+                  day,
+                  dayIndex,
+                ) => (
                   <div
-                    key={formatDateKey(day)}
-                    className="relative border-r"
+                    key={formatDateKey(
+                      day,
+                    )}
+                    className={`flex items-center justify-center border-b border-r bg-background p-2 text-center font-medium ${
+                      dayIndex ===
+                      selectedDayIndex
+                        ? 'bg-muted'
+                        : ''
+                    }`}
                     style={{
-                      height: `${hourCount * hourHeight}px`,
+                      height: `${SCHEDULE_HEADER_HEIGHT}px`,
                     }}
                   >
-                    {hours.map((hour) => (
-                      <div
-                        key={hour}
-                        className="border-b border-gray-200"
-                        style={{
-                          height: `${hourHeight}px`,
-                        }}
-                      />
-                    ))}
-
-                    {isAdmin
-                      ? getAttendanceColumns(
-                          dayAttendances,
-                        ).map(
-                          ({
-                            start,
-                            end,
-                            first_name,
-                            color,
-                          }) => {
-                            const style =
-                              getAttendanceStyle(
-                                start,
-                                end,
-                                startHour,
-                                endHour,
-                                hourHeight,
-                              );
-
-                            return (
-                              <div
-                                key={`${formatDateKey(
-                                  day,
-                                )}-${first_name}`}
-                                className="absolute left-2 right-2 rounded-md border"
-                                style={{
-                                  ...style,
-                                  backgroundColor: `${color}22`,
-                                  borderColor: color,
-                                }}
-                                title={`${first_name} : ${formatSegmentTime(
-                                  start,
-                                )} - ${formatSegmentTime(
-                                  end,
-                                )}`}
-                              >
-                                <div
-                                  className="absolute left-0 top-0 bottom-0 w-1 rounded-l-md"
-                                  style={{
-                                    backgroundColor:
-                                      color,
-                                  }}
-                                />
-
-                                <div className="px-3 py-1 text-xs">
-                                  <div
-                                    className="font-medium"
-                                    style={{
-                                      color,
-                                    }}
-                                  >
-                                    {first_name}
-                                  </div>
-
-                                  <div className="text-muted-foreground">
-                                    {formatSegmentTime(
-                                      start,
-                                    )}{' '}
-                                    -{' '}
-                                    {formatSegmentTime(
-                                      end,
-                                    )}
-                                  </div>
-                                </div>
-                              </div>
-                            );
-                          },
-                        )
-                      : getAttendanceSegments(
-                          dayAttendances,
-                        ).map(
-                          ({
-                            start,
-                            end,
-                            users,
-                          }) => {
-                            const style =
-                              getAttendanceStyle(
-                                start,
-                                end,
-                                startHour,
-                                endHour,
-                                hourHeight,
-                              );
-
-                            const segmentLabel =
-                              users
-                                .map(
-                                  ({
-                                    first_name,
-                                  }) =>
-                                    first_name,
-                                )
-                                .join(', ');
-
-                            return (
-                              <div
-                                key={`${formatDateKey(
-                                  day,
-                                )}-${start}-${end}`}
-                                className="absolute left-1 right-1 bg-blue-500/80 rounded-md border border-blue-600/30 overflow-hidden"
-                                style={style}
-                                title={segmentLabel}
-                              >
-                                <div className="p-2 text-xs text-white">
-                                  <div className="font-medium">
-                                    {formatSegmentTime(
-                                      start,
-                                    )}{' '}
-                                    -{' '}
-                                    {formatSegmentTime(
-                                      end,
-                                    )}
-                                  </div>
-
-                                  {isAdmin &&
-                                    users.length >
-                                      0 && (
-                                      <div className="mt-1">
-                                        {segmentLabel}
-                                      </div>
-                                    )}
-                                </div>
-                              </div>
-                            );
+                    <div>
+                      <div className="text-sm capitalize">
+                        {day.toLocaleDateString(
+                          'fr-FR',
+                          {
+                            weekday:
+                              'long',
                           },
                         )}
+                      </div>
+
+                      <div className="text-xs text-muted-foreground">
+                        {day.toLocaleDateString(
+                          'fr-FR',
+                          {
+                            day: '2-digit',
+                            month: 'short',
+                          },
+                        )}
+                      </div>
+                    </div>
                   </div>
-                );
-              })}
+                ),
+              )}
+
+              {/* Heures */}
+              <div
+                className="border-r"
+                style={{
+                  height: `${scheduleHeight}px`,
+                }}
+              >
+                {hours.map(
+                  (hour) => (
+                    <div
+                      key={hour}
+                      className="flex items-start justify-center border-b pt-1 text-xs text-muted-foreground"
+                      style={{
+                        height: `${hourHeight}px`,
+                      }}
+                    >
+                      {formatHour(
+                        hour,
+                      )}
+                    </div>
+                  ),
+                )}
+              </div>
+
+              {/* Colonnes des jours */}
+              {weekDays.map(
+                (day) => {
+                  const dayAttendances =
+                    getAttendancesForDay(
+                      day,
+                    );
+
+                  return (
+                    <div
+                      key={formatDateKey(
+                        day,
+                      )}
+                      className="relative border-r"
+                      style={{
+                        height: `${scheduleHeight}px`,
+                      }}
+                    >
+                      {/* Grille horaire */}
+                      {hours.map(
+                        (hour) => (
+                          <div
+                            key={hour}
+                            className="border-b border-gray-200"
+                            style={{
+                              height: `${hourHeight}px`,
+                            }}
+                          />
+                        ),
+                      )}
+
+                      {/* ==================================================
+                          ADMIN : TOUS LES UTILISATEURS
+
+                          1 colonne = 1 utilisateur
+                          1 barre = 1 utilisateur
+                          ================================================== */}
+
+                      {isAdmin &&
+                      showAllUsers ? (
+                        <div className="absolute inset-0 flex">
+                          {users.map(
+                            (user) => {
+                              const bounds =
+                                getUserDayBounds(
+                                  dayAttendances,
+                                  user,
+                                );
+
+                              const color =
+                                getUserColor(
+                                  user,
+                                );
+
+                              return (
+                                <div
+                                  key={getUserId(
+                                    user,
+                                  )}
+                                  className="relative min-w-0 flex-1 border-r border-border/30 last:border-r-0"
+                                  title={
+                                    bounds
+                                      ? `${getUserLabel(
+                                          user,
+                                        )} : ${formatSegmentTime(
+                                          bounds.start,
+                                        )} - ${formatSegmentTime(
+                                          bounds.end,
+                                        )}`
+                                      : getUserLabel(
+                                          user,
+                                        )
+                                  }
+                                >
+                                  {bounds && (
+                                    <div
+                                      className="absolute left-1/2 w-2 -translate-x-1/2 rounded-full"
+                                      style={{
+                                        ...getAttendanceStyle(
+                                          bounds.start,
+                                          bounds.end,
+                                          startHour,
+                                          endHour,
+                                          hourHeight,
+                                        ),
+                                        backgroundColor:
+                                          color,
+                                      }}
+                                    />
+                                  )}
+                                </div>
+                              );
+                            },
+                          )}
+                        </div>
+                      ) : (
+                        /* ==================================================
+                           UTILISATEUR SÉLECTIONNÉ
+                           ================================================== */
+
+                        getSelectedUserAttendances(
+                          dayAttendances,
+                        )
+                          .map(
+                            (attendance) => ({
+                              attendance,
+                              start: getMinutes(
+                                getTimeValue(
+                                  attendance,
+                                  'start_time',
+                                ),
+                              ),
+                              end: getMinutes(
+                                getTimeValue(
+                                  attendance,
+                                  'end_time',
+                                ),
+                              ),
+                            }),
+                          )
+                          .filter(
+                            ({
+                              start,
+                              end,
+                            }) =>
+                              start !== null &&
+                              end !== null &&
+                              end > start,
+                          )
+                          .map(
+                            ({
+                              start,
+                              end,
+                            }) => {
+                              const style =
+                                getAttendanceStyle(
+                                  start,
+                                  end,
+                                  startHour,
+                                  endHour,
+                                  hourHeight,
+                                );
+
+                              return (
+                                <div
+                                  key={`${formatDateKey(
+                                    day,
+                                  )}-${start}-${end}`}
+                                  className="absolute left-2 right-2 overflow-hidden rounded-md border border-blue-600/30 bg-blue-500/80"
+                                  style={
+                                    style
+                                  }
+                                >
+                                  <div className="p-2 text-xs text-white">
+                                    <div className="font-medium">
+                                      {formatSegmentTime(
+                                        start,
+                                      )}{' '}
+                                      -{' '}
+                                      {formatSegmentTime(
+                                        end,
+                                      )}
+                                    </div>
+                                  </div>
+                                </div>
+                              );
+                            },
+                          )
+                      )}
+                    </div>
+                  );
+                },
+              )}
             </div>
           )}
         </div>
@@ -1021,4 +1744,4 @@ const WeeklySummaryPage = ({ userId }) => {
   );
 };
 
-export default WeeklySummaryPage;
+export default WeeklySummaryPage;
\ No newline at end of file