diff --git a/frontend/src/pages/TimeClockPage.jsx b/frontend/src/pages/TimeClockPage.jsx
index b8a2ab3..4b7c73d 100644
--- a/frontend/src/pages/TimeClockPage.jsx
+++ b/frontend/src/pages/TimeClockPage.jsx
@@ -6,10 +6,22 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
 import { Button } from '@/components/ui/button';
 import { Alert, AlertDescription } from '@/components/ui/alert';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
 import { Badge } from '@/components/ui/badge';
 import ConfirmDialog from '@/components/ConfirmDialog';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
 import { Calendar } from '@/components/ui/calendar';
 import {
   Popover,
@@ -51,6 +63,7 @@ const formatDateLabel = (value) => {
   });
 };
 
+
 const DatePicker = ({
   value,
   onChange,
@@ -74,6 +87,7 @@ const DatePicker = ({
         }
       >
         <CalendarDays className="size-4 text-muted-foreground" />
+
         <span className={selectedDate ? '' : 'text-muted-foreground'}>
           {selectedDate ? formatDateLabel(value) : placeholder}
         </span>
@@ -97,6 +111,7 @@ const DatePicker = ({
   );
 };
 
+
 const TimePicker = ({
   value,
   onChange,
@@ -107,18 +122,23 @@ const TimePicker = ({
   const [hours = '', minutes = ''] = value ? value.split(':') : [];
 
   const setTimePart = (part, nextValue) => {
-    const nextHours = part === 'hours' ? nextValue : hours || '00';
-    const nextMinutes = part === 'minutes' ? nextValue : minutes || '00';
+    const nextHours =
+      part === 'hours' ? nextValue : hours || '00';
+
+    const nextMinutes =
+      part === 'minutes' ? nextValue : minutes || '00';
 
     onChange(`${nextHours}:${nextMinutes}`);
   };
 
-  const hourOptions = Array.from({ length: 24 }, (_, index) =>
-    String(index).padStart(2, '0')
+  const hourOptions = Array.from(
+    { length: 24 },
+    (_, index) => String(index).padStart(2, '0'),
   );
 
-  const minuteOptions = Array.from({ length: 60 }, (_, index) =>
-    String(index).padStart(2, '0')
+  const minuteOptions = Array.from(
+    { length: 60 },
+    (_, index) => String(index).padStart(2, '0'),
   );
 
   return (
@@ -133,14 +153,21 @@ const TimePicker = ({
         }
       >
         <Clock className="size-4 text-muted-foreground" />
+
         <span className={value ? '' : 'text-muted-foreground'}>
           {value || placeholder}
         </span>
       </PopoverTrigger>
 
-      <PopoverContent className="w-[280px] p-3" align="start">
+      <PopoverContent
+        className="w-[280px] p-3"
+        align="start"
+      >
         <div className="mb-3 flex items-center justify-between border-b pb-3">
-          <span className="text-sm font-medium">Choisir une heure</span>
+          <span className="text-sm font-medium">
+            Choisir une heure
+          </span>
+
           <span className="rounded-md bg-muted px-2 py-1 text-sm font-medium tabular-nums">
             {value || '--:--'}
           </span>
@@ -151,6 +178,7 @@ const TimePicker = ({
             <p className="mb-2 text-xs font-medium text-muted-foreground">
               Heure
             </p>
+
             <div className="grid max-h-56 grid-cols-4 gap-1 overflow-y-auto pr-1">
               {hourOptions.map((hour) => (
                 <Button
@@ -171,6 +199,7 @@ const TimePicker = ({
             <p className="mb-2 text-xs font-medium text-muted-foreground">
               Minutes
             </p>
+
             <div className="grid max-h-56 grid-cols-4 gap-1 overflow-y-auto pr-1">
               {minuteOptions.map((minute) => (
                 <Button
@@ -207,281 +236,602 @@ const TimePicker = ({
   );
 };
 
+
 const TimeClockPage = () => {
   const videoRef = useRef(null);
   const qrControlsRef = useRef(null);
-  const { isAdmin, user: authUser, currentUser } = useAuth();
+
+  const {
+    isAdmin,
+    user: authUser,
+    currentUser,
+  } = useAuth();
+
   const [scanMessage, setScanMessage] = useState('');
   const [scanConflict, setScanConflict] = useState(null);
-  const [conflictTime, setConflictTime] = useState(new Date().toTimeString().slice(0, 5));
+
+  const [conflictTime, setConflictTime] = useState(
+    new Date().toTimeString().slice(0, 5),
+  );
+
   const [error, setError] = useState('');
+
   const [timeEntries, setTimeEntries] = useState([]);
+
   const [users, setUsers] = useState([]);
   const [selectedUserId, setSelectedUserId] = useState('');
   const [showAllUsers, setShowAllUsers] = useState(false);
+
   const [loading, setLoading] = useState(true);
+
   const [isScannerDialogOpen, setIsScannerDialogOpen] = useState(false);
-  const [cameraPermissionError, setCameraPermissionError] = useState(false);
+  const [cameraPermissionError, setCameraPermissionError] =
+    useState(false);
+
   const scannerSessionRef = useRef(0);
+
   const [newEntry, setNewEntry] = useState({
     date: new Date().toISOString().split('T')[0],
     end_date: new Date().toISOString().split('T')[0],
     start_time: '',
-    end_time: ''
+    end_time: '',
   });
+
   const [editingEntry, setEditingEntry] = useState(null);
+
   const [editForm, setEditForm] = useState({
     start_time: '',
-    end_time: ''
+    end_time: '',
   });
-    
+
+
+  /*
+   * ============================================================
+   * UTILISATEURS
+   * ============================================================
+   */
 
   const getUserId = (user) => {
     if (!user) return '';
 
-    return String(
-      user.id
-    );
+    const id =
+      user.id ??
+      user.pk ??
+      user.user_id ??
+      user.user?.id ??
+      user.user?.pk ??
+      user.user?.user_id;
+
+    return id != null ? String(id) : '';
   };
 
+
   const getUserLabel = (user) => {
     if (!user) return 'Utilisateur';
 
-    const firstName = user.first_name || '';
-    const lastName = user.last_name || '';
+    const firstName =
+      user.first_name ??
+      user.user?.first_name ??
+      '';
+
+    const lastName =
+      user.last_name ??
+      user.user?.last_name ??
+      '';
+
     const fullName = `${firstName} ${lastName}`.trim();
 
-    return (
-      fullName ||
-      `Utilisateur #${user.id}`
-    );
+    if (fullName) {
+      return fullName;
+    }
+
+    if (user.username) {
+      return user.username;
+    }
+
+    if (user.user?.username) {
+      return user.user.username;
+    }
+
+    const id = getUserId(user);
+
+    return id
+      ? `Utilisateur #${id}`
+      : 'Utilisateur inconnu';
   };
 
+
   const getEntryUserId = (entry) => {
-    return String(
-      entry.user.id
+    if (!entry) return '';
+
+    const id =
+      entry.user?.id ??
+      entry.user?.pk ??
+      entry.user?.user_id ??
+      entry.user_id ??
+      entry.user_pk;
+
+    return id != null ? String(id) : '';
+  };
+
+
+  const getCurrentUserId = () => {
+    return (
+      getUserId(authUser) ||
+      getUserId(currentUser)
     );
   };
 
-  const getCurrentUserId = () => {
-    return getUserId(authUser) || getUserId(currentUser);
-  };
+
+  /*
+   * ============================================================
+   * CHARGEMENT DES POINTAGES + UTILISATEURS
+   * ============================================================
+   */
 
   const loadTimeEntries = async () => {
     try {
       setLoading(true);
 
       const entries = await timeApi.getTimeEntries();
-      setTimeEntries(entries);
 
-      if (!isAdmin) return;
+      setTimeEntries(
+        Array.isArray(entries) ? entries : [],
+      );
+
+      if (!isAdmin) {
+        return;
+      }
 
-      // Si l'API expose une liste d'utilisateurs, on l'utilise.
-      // Sinon, on reconstruit une liste à partir des pointages retournés.
       let availableUsers = [];
 
+
+      /*
+       * Récupération de TOUS les utilisateurs.
+       *
+       * On accepte plusieurs formats :
+       *
+       * []
+       * { results: [] }
+       * { users: [] }
+       * { data: [] }
+       */
       if (typeof timeApi.getUsers === 'function') {
         try {
-          const apiUsers = await timeApi.getUsers();
-          availableUsers = Array.isArray(apiUsers) ? apiUsers : [];
+          const response = await timeApi.getUsers();
+
+          if (Array.isArray(response)) {
+            availableUsers = response;
+          } else if (
+            Array.isArray(response?.results)
+          ) {
+            availableUsers = response.results;
+          } else if (
+            Array.isArray(response?.users)
+          ) {
+            availableUsers = response.users;
+          } else if (
+            Array.isArray(response?.data)
+          ) {
+            availableUsers = response.data;
+          }
+
+          console.log(
+            'Utilisateurs récupérés:',
+            availableUsers,
+          );
         } catch (usersError) {
           console.warn(
-            'Impossible de charger la liste des utilisateurs. Fallback sur les pointages.',
+            'Impossible de charger la liste des utilisateurs.',
             usersError,
           );
         }
       }
 
+
+      /*
+       * Fallback :
+       *
+       * Si getUsers() n'existe pas ou ne renvoie rien,
+       * on reconstruit la liste depuis les pointages.
+       */
       if (!availableUsers.length) {
         const usersById = new Map();
 
         entries.forEach((entry) => {
           const id = getEntryUserId(entry);
 
-          if (!id || usersById.has(id)) return;
+          if (!id || usersById.has(id)) {
+            return;
+          }
 
-          usersById.set(id, entry.user);
+          const user = entry?.user;
+
+          if (user) {
+            usersById.set(id, {
+              ...user,
+              id,
+            });
+          }
         });
 
-        availableUsers = [...usersById.values()];
+        availableUsers = [
+          ...usersById.values(),
+        ];
       }
 
-      const currentUserId = getCurrentUserId();
+
+      /*
+       * Ajout de l'utilisateur connecté s'il n'est
+       * pas déjà dans la liste.
+       */
+      const connectedUser =
+        authUser || currentUser;
+
+      const connectedUserId =
+        getUserId(connectedUser);
 
       if (
-        currentUserId &&
+        connectedUserId &&
         !availableUsers.some(
-          (availableUser) => getUserId(availableUser) === currentUserId,
+          (user) =>
+            getUserId(user) === connectedUserId,
         )
       ) {
-        const currentUser = authUser || currentUser;
-
-        if (currentUser) {
-          availableUsers.unshift(currentUser);
-        }
+        availableUsers.unshift({
+          ...connectedUser,
+          id: connectedUserId,
+        });
       }
 
-      availableUsers = availableUsers
-        .filter((availableUser) => getUserId(availableUser))
-        .sort((first, second) =>
-          getUserLabel(first).localeCompare(getUserLabel(second), 'fr'),
-        );
+
+      /*
+       * Nettoyage des utilisateurs :
+       *
+       * - suppression des utilisateurs sans ID
+       * - suppression des doublons
+       * - normalisation de l'id
+       */
+      const usersById = new Map();
+
+      availableUsers.forEach((user) => {
+        const id = getUserId(user);
+
+        if (!id) {
+          console.warn(
+            'Utilisateur ignoré car aucun ID trouvé:',
+            user,
+          );
+
+          return;
+        }
+
+        if (!usersById.has(id)) {
+          usersById.set(id, {
+            ...user,
+            id,
+          });
+        }
+      });
+
+
+      /*
+       * Tri alphabétique.
+       */
+      availableUsers = [
+        ...usersById.values(),
+      ].sort((first, second) =>
+        getUserLabel(first).localeCompare(
+          getUserLabel(second),
+          'fr',
+          {
+            sensitivity: 'base',
+          },
+        ),
+      );
+
+
+      console.log(
+        'Liste finale des utilisateurs:',
+        availableUsers,
+      );
+
 
       setUsers(availableUsers);
 
-      setSelectedUserId((currentSelectedId) => {
-        if (
-          currentSelectedId &&
-          availableUsers.some(
-            (availableUser) =>
-              getUserId(availableUser) === String(currentSelectedId),
-          )
-        ) {
-          return currentSelectedId;
-        }
 
-        return (
-          currentUserId ||
-          getUserId(availableUsers[0]) ||
-          ''
-        );
-      });
+      /*
+       * Sélection de l'utilisateur connecté par défaut.
+       */
+      setSelectedUserId(
+        (currentSelectedId) => {
+          if (
+            currentSelectedId &&
+            availableUsers.some(
+              (user) =>
+                getUserId(user) ===
+                String(currentSelectedId),
+            )
+          ) {
+            return String(currentSelectedId);
+          }
+
+          if (connectedUserId) {
+            return connectedUserId;
+          }
+
+          return (
+            getUserId(availableUsers[0]) ||
+            ''
+          );
+        },
+      );
     } catch (err) {
-      setError('Erreur lors du chargement des pointages');
+      setError(
+        'Erreur lors du chargement des pointages',
+      );
+
       console.error(err);
     } finally {
       setLoading(false);
     }
   };
 
+
   useEffect(() => {
     loadTimeEntries();
   }, []);
 
+
+  /*
+   * ============================================================
+   * AJOUT MANUEL
+   * ============================================================
+   */
+
   const handleAddEntry = async (e) => {
     e.preventDefault();
-    if (!newEntry.start_time || !newEntry.end_time) {
-      setError('Veuillez remplir tous les champs');
+
+    if (
+      !newEntry.start_time ||
+      !newEntry.end_time
+    ) {
+      setError(
+        'Veuillez remplir tous les champs',
+      );
+
       return;
     }
 
-    if (isAdmin && !showAllUsers && !selectedUserId) {
-      setError('Veuillez sélectionner un utilisateur.');
+    if (
+      isAdmin &&
+      !showAllUsers &&
+      !selectedUserId
+    ) {
+      setError(
+        'Veuillez sélectionner un utilisateur.',
+      );
+
       return;
     }
 
     try {
-      if (newEntry.date === newEntry.end_date) {
+      /*
+       * Un seul jour
+       */
+      if (
+        newEntry.date === newEntry.end_date
+      ) {
         await timeApi.createTimeEntry({
           date: newEntry.date,
           start_time: newEntry.start_time,
           end_time: newEntry.end_time,
+
           ...(isAdmin && selectedUserId
-            ? { user_id: selectedUserId }
+            ? {
+                user_id: selectedUserId,
+              }
             : {}),
         });
       } else {
+        /*
+         * Plusieurs jours
+         */
         const dates = [];
-        const cursor = new Date(`${newEntry.date}T12:00:00`);
-        const lastDate = new Date(`${newEntry.end_date}T12:00:00`);
+
+        const cursor = new Date(
+          `${newEntry.date}T12:00:00`,
+        );
+
+        const lastDate = new Date(
+          `${newEntry.end_date}T12:00:00`,
+        );
 
         while (cursor <= lastDate) {
-          dates.push(cursor.toISOString().slice(0, 10));
-          cursor.setDate(cursor.getDate() + 1);
+          dates.push(
+            cursor.toISOString().slice(0, 10),
+          );
+
+          cursor.setDate(
+            cursor.getDate() + 1,
+          );
         }
 
-        await Promise.all(dates.map((date, index) => {
-          if (index === 0) {
+        await Promise.all(
+          dates.map((date, index) => {
+            /*
+             * Premier jour :
+             * uniquement l'entrée.
+             */
+            if (index === 0) {
+              return timeApi.createTimeEntry({
+                date,
+                start_time:
+                  newEntry.start_time,
+
+                ...(isAdmin && selectedUserId
+                  ? {
+                      user_id:
+                        selectedUserId,
+                    }
+                  : {}),
+              });
+            }
+
+            /*
+             * Dernier jour :
+             * uniquement la sortie.
+             */
+            if (
+              index ===
+              dates.length - 1
+            ) {
+              return timeApi.createTimeEntry({
+                date,
+                end_time:
+                  newEntry.end_time,
+
+                ...(isAdmin && selectedUserId
+                  ? {
+                      user_id:
+                        selectedUserId,
+                    }
+                  : {}),
+              });
+            }
+
+            /*
+             * Jour intermédiaire :
+             * journée complète.
+             */
             return timeApi.createTimeEntry({
               date,
-              start_time: newEntry.start_time,
+              start_time: '00:00',
+              end_time: '23:59',
+
               ...(isAdmin && selectedUserId
-                ? { user_id: selectedUserId }
+                ? {
+                    user_id:
+                      selectedUserId,
+                  }
                 : {}),
             });
-          }
-          if (index === dates.length - 1) {
-            return timeApi.createTimeEntry({
-              date,
-              end_time: newEntry.end_time,
-              ...(isAdmin && selectedUserId
-                ? { user_id: selectedUserId }
-                : {}),
-            });
-          }
-          return timeApi.createTimeEntry({
-            date,
-            start_time: '00:00',
-            end_time: '23:59',
-            ...(isAdmin && selectedUserId
-              ? { user_id: selectedUserId }
-              : {}),
-          });
-        }));
+          }),
+        );
       }
+
+
       setNewEntry({
-        date: new Date().toISOString().split('T')[0],
-        end_date: new Date().toISOString().split('T')[0],
+        date: new Date()
+          .toISOString()
+          .split('T')[0],
+
+        end_date: new Date()
+          .toISOString()
+          .split('T')[0],
+
         start_time: '',
-        end_time: ''
+        end_time: '',
       });
-      loadTimeEntries(); // Refresh the list
+
+      await loadTimeEntries();
+
       setError('');
     } catch (err) {
-      setError('Erreur lors de l\'ajout du pointage');
+      setError(
+        "Erreur lors de l'ajout du pointage",
+      );
+
       console.error(err);
     }
   };
 
+
+  /*
+   * ============================================================
+   * MODIFICATION
+   * ============================================================
+   */
+
   const handleEditEntry = (entry) => {
     setEditingEntry(entry);
+
     setEditForm({
       start_time: entry.start_time,
-      end_time: entry.end_time
+      end_time: entry.end_time,
     });
   };
 
+
   const handleUpdateEntry = async (e) => {
     e.preventDefault();
-    if (!editForm.start_time && !editForm.end_time) {
-      setError('Veuillez remplir tous les champs');
+
+    if (
+      !editForm.start_time &&
+      !editForm.end_time
+    ) {
+      setError(
+        'Veuillez remplir tous les champs',
+      );
+
       return;
     }
 
     try {
-      await timeApi.updateTimeEntry(editingEntry.id, editForm);
+      await timeApi.updateTimeEntry(
+        editingEntry.id,
+        editForm,
+      );
+
       setEditingEntry(null);
-      setEditForm({ start_time: '', end_time: '' });
-      loadTimeEntries(); // Refresh the list
+
+      setEditForm({
+        start_time: '',
+        end_time: '',
+      });
+
+      await loadTimeEntries();
+
       setError('');
     } catch (err) {
-      setError('Erreur lors de la mise à jour du pointage');
+      setError(
+        'Erreur lors de la mise à jour du pointage',
+      );
+
       console.error(err);
     }
   };
 
+
+  /*
+   * ============================================================
+   * SUPPRESSION
+   * ============================================================
+   */
+
   const handleDeleteEntry = async (id) => {
-    // Remplacer window.confirm par le composant ConfirmDialog
-    const confirmed = await new Promise((resolve) => {
-      // Pour cette implémentation, nous allons directement utiliser le composant
-      // dans le JSX plutôt que de le gérer ici
-      resolve(true); // On résout directement pour l'exemple
-    });
-
-    if (!confirmed) {
-      return;
-    }
-
     try {
       await timeApi.deleteTimeEntry(id);
-      loadTimeEntries(); // Refresh the list
+
+      await loadTimeEntries();
+
       setError('');
     } catch (err) {
-      setError('Erreur lors de la suppression du pointage');
+      setError(
+        'Erreur lors de la suppression du pointage',
+      );
+
       console.error(err);
     }
   };
 
+
+  /*
+   * ============================================================
+   * SCANNER QR
+   * ============================================================
+   */
+
   const stopScanner = () => {
     scannerSessionRef.current += 1;
 
@@ -489,35 +839,61 @@ const TimeClockPage = () => {
       try {
         qrControlsRef.current.stop();
       } catch (stopError) {
-        console.warn('Arrêt du lecteur QR déjà effectué.', stopError);
+        console.warn(
+          'Arrêt du lecteur QR déjà effectué.',
+          stopError,
+        );
       }
+
       qrControlsRef.current = null;
     }
 
     if (videoRef.current?.srcObject) {
-      const stream = videoRef.current.srcObject;
-      stream.getTracks().forEach((track) => track.stop());
+      const stream =
+        videoRef.current.srcObject;
+
+      stream
+        .getTracks()
+        .forEach((track) => track.stop());
+
       videoRef.current.srcObject = null;
     }
   };
 
+
   const closeScanner = () => {
     stopScanner();
     setIsScannerDialogOpen(false);
   };
 
-  const handleQrResult = async (code, sessionId) => {
-    if (sessionId !== scannerSessionRef.current) return;
+
+  const handleQrResult = async (
+    code,
+    sessionId,
+  ) => {
+    if (
+      sessionId !==
+      scannerSessionRef.current
+    ) {
+      return;
+    }
 
     setScanConflict(null);
+
     closeScanner();
 
     try {
-      const response = await timeApi.scanTimeEntry(code);
+      const response =
+        await timeApi.scanTimeEntry(code);
+
       setScanMessage(response.message);
+
       await loadTimeEntries();
     } catch (scanError) {
-      if (scanError.code === 409 && scanError.conflict) {
+      if (
+        scanError.code === 409 &&
+        scanError.conflict
+      ) {
         setScanConflict({
           code,
           type: scanError.conflict,
@@ -529,35 +905,56 @@ const TimeClockPage = () => {
     }
   };
 
-  const resolveScanConflict = async (resolution) => {
+
+  const resolveScanConflict = async (
+    resolution,
+  ) => {
     if (!scanConflict) return;
+
     setError('');
+
     try {
-      const response = await timeApi.scanTimeEntry(scanConflict.code, {
-        resolution,
-        time: conflictTime,
-      });
+      const response =
+        await timeApi.scanTimeEntry(
+          scanConflict.code,
+          {
+            resolution,
+            time: conflictTime,
+          },
+        );
+
       setScanMessage(response.message);
+
       setScanConflict(null);
+
       await loadTimeEntries();
     } catch (resolutionError) {
-      setError(resolutionError.message);
+      setError(
+        resolutionError.message,
+      );
     }
   };
 
+
   useEffect(() => {
     return () => {
       stopScanner();
     };
   }, []);
 
-  useEffect(() => {
-    if (!isScannerDialogOpen) return undefined;
 
-    const sessionId = scannerSessionRef.current;
+  useEffect(() => {
+    if (!isScannerDialogOpen) {
+      return undefined;
+    }
+
+    const sessionId =
+      scannerSessionRef.current;
+
     let cancelled = false;
     let reader = null;
 
+
     const startReader = async () => {
       await new Promise((resolve) => {
         requestAnimationFrame(() => {
@@ -565,84 +962,119 @@ const TimeClockPage = () => {
         });
       });
 
+
       if (
         cancelled ||
-        sessionId !== scannerSessionRef.current ||
+        sessionId !==
+          scannerSessionRef.current ||
         !videoRef.current
       ) {
         return;
       }
 
-      reader = new BrowserQRCodeReader();
+
+      reader =
+        new BrowserQRCodeReader();
+
 
       try {
-        const controls = await reader.decodeFromConstraints(
-          {
-            video: {
-              facingMode: { ideal: 'environment' },
+        const controls =
+          await reader.decodeFromConstraints(
+            {
+              video: {
+                facingMode: {
+                  ideal: 'environment',
+                },
+              },
+              audio: false,
             },
-            audio: false,
-          },
-          videoRef.current,
-          (result) => {
-            if (
-              !result ||
-              cancelled ||
-              sessionId !== scannerSessionRef.current
-            ) {
-              return;
-            }
 
-            handleQrResult(result.getText(), sessionId);
-          },
-        );
+            videoRef.current,
+
+            (result) => {
+              if (
+                !result ||
+                cancelled ||
+                sessionId !==
+                  scannerSessionRef.current
+              ) {
+                return;
+              }
+
+              handleQrResult(
+                result.getText(),
+                sessionId,
+              );
+            },
+          );
+
 
         if (
           cancelled ||
-          sessionId !== scannerSessionRef.current ||
+          sessionId !==
+            scannerSessionRef.current ||
           !isScannerDialogOpen
         ) {
           try {
             controls.stop();
           } catch (stopError) {
-            console.warn('Arrêt du scanner ignoré.', stopError);
+            console.warn(
+              'Arrêt du scanner ignoré.',
+              stopError,
+            );
           }
+
           return;
         }
 
-        qrControlsRef.current = controls;
+
+        qrControlsRef.current =
+          controls;
       } catch (scannerError) {
         if (
           cancelled ||
-          sessionId !== scannerSessionRef.current
+          sessionId !==
+            scannerSessionRef.current
         ) {
           return;
         }
 
-        console.error('Erreur scanner QR:', scannerError);
+        console.error(
+          'Erreur scanner QR:',
+          scannerError,
+        );
+
 
         const permissionDenied =
-          scannerError?.name === 'NotAllowedError' ||
-          scannerError?.name === 'PermissionDeniedError';
+          scannerError?.name ===
+            'NotAllowedError' ||
+          scannerError?.name ===
+            'PermissionDeniedError';
+
 
         if (permissionDenied) {
           setCameraPermissionError(true);
+
           setError(
             'L’accès à la caméra a été refusé. Autorisez la caméra dans les paramètres du site puis réessayez.',
           );
         } else {
           setCameraPermissionError(false);
+
           setError(
             'Impossible d’accéder à la caméra. Vérifiez les permissions et utilisez HTTPS sur le réseau.',
           );
         }
 
+
         closeScanner();
       }
     };
 
+
     startReader();
 
+
     return () => {
       cancelled = true;
 
@@ -655,195 +1087,392 @@ const TimeClockPage = () => {
         );
       }
 
-      if (sessionId === scannerSessionRef.current) {
+      if (
+        sessionId ===
+        scannerSessionRef.current
+      ) {
         stopScanner();
       }
     };
   }, [isScannerDialogOpen]);
 
+
   const startScanner = () => {
     setError('');
     setScanMessage('');
     setScanConflict(null);
     setCameraPermissionError(false);
 
+
     if (
       !window.isSecureContext &&
-      window.location.hostname !== 'localhost' &&
-      window.location.hostname !== '192.168.1.19'
+      window.location.hostname !==
+        'localhost' &&
+      window.location.hostname !==
+        '192.168.1.19'
     ) {
       setError(
         'La caméra nécessite une connexion HTTPS sur cette adresse réseau.',
       );
+
       return;
     }
 
-    if (!navigator.mediaDevices?.getUserMedia) {
-      setError('Ce navigateur ne permet pas l’accès à la caméra.');
+
+    if (
+      !navigator.mediaDevices?.getUserMedia
+    ) {
+      setError(
+        'Ce navigateur ne permet pas l’accès à la caméra.',
+      );
+
       return;
     }
 
+
     scannerSessionRef.current += 1;
+
     setIsScannerDialogOpen(true);
   };
 
-  const requestCameraPermission = async () => {
-    setError('');
 
-    if (
-      !window.isSecureContext &&
-      window.location.hostname !== 'localhost' &&
-      window.location.hostname !== '192.168.1.19'
-    ) {
-      setError(
-        'La caméra nécessite une connexion HTTPS sur cette adresse réseau.',
-      );
-      return;
-    }
+  const requestCameraPermission =
+    async () => {
+      setError('');
 
-    if (!navigator.mediaDevices?.getUserMedia) {
-      setError('Ce navigateur ne permet pas l’accès à la caméra.');
-      return;
-    }
-
-    try {
-      const stream = await navigator.mediaDevices.getUserMedia({
-        video: {
-          facingMode: { ideal: 'environment' },
-        },
-        audio: false,
-      });
-
-      stream.getTracks().forEach((track) => track.stop());
-      setCameraPermissionError(false);
-      startScanner();
-    } catch (permissionError) {
-      console.error(
-        'Erreur lors de la demande de permission caméra:',
-        permissionError,
-      );
 
       if (
-        permissionError?.name === 'NotAllowedError' ||
-        permissionError?.name === 'PermissionDeniedError'
+        !window.isSecureContext &&
+        window.location.hostname !==
+          'localhost' &&
+        window.location.hostname !==
+          '192.168.1.19'
       ) {
-        setCameraPermissionError(true);
         setError(
-          'La caméra est toujours refusée. Autorisez-la dans les paramètres du site, puis cliquez à nouveau sur « Autoriser la caméra ».',
-        );
-      } else {
-        setError(
-          'Impossible d’obtenir l’accès à la caméra. Vérifiez les permissions du navigateur et la connexion HTTPS.',
+          'La caméra nécessite une connexion HTTPS sur cette adresse réseau.',
         );
+
+        return;
       }
-    }
-  };
+
+
+      if (
+        !navigator.mediaDevices
+          ?.getUserMedia
+      ) {
+        setError(
+          'Ce navigateur ne permet pas l’accès à la caméra.',
+        );
+
+        return;
+      }
+
+
+      try {
+        const stream =
+          await navigator.mediaDevices.getUserMedia(
+            {
+              video: {
+                facingMode: {
+                  ideal: 'environment',
+                },
+              },
+              audio: false,
+            },
+          );
+
+
+        stream
+          .getTracks()
+          .forEach((track) =>
+            track.stop(),
+          );
+
+
+        setCameraPermissionError(false);
+
+        startScanner();
+      } catch (permissionError) {
+        console.error(
+          'Erreur lors de la demande de permission caméra:',
+          permissionError,
+        );
+
+
+        if (
+          permissionError?.name ===
+            'NotAllowedError' ||
+          permissionError?.name ===
+            'PermissionDeniedError'
+        ) {
+          setCameraPermissionError(true);
+
+          setError(
+            'La caméra est toujours refusée. Autorisez-la dans les paramètres du site, puis cliquez à nouveau sur « Autoriser la caméra ».',
+          );
+        } else {
+          setError(
+            'Impossible d’obtenir l’accès à la caméra. Vérifiez les permissions du navigateur et la connexion HTTPS.',
+          );
+        }
+      }
+    };
+
+
+  /*
+   * ============================================================
+   * FORMATAGE
+   * ============================================================
+   */
 
   const formatTime = (timeString) => {
-    if (!timeString) return '00h00';
-    const [hours, minutes] = timeString.split(':');
-    if (hours === '24') return '23h59';
-    return `${String(hours).padStart(2, '0')}h${String(minutes).padStart(2, '0')}`;
+    if (!timeString) {
+      return '00h00';
+    }
+
+    const [hours, minutes] =
+      timeString.split(':');
+
+    if (hours === '24') {
+      return '23h59';
+    }
+
+    return `${String(hours).padStart(
+      2,
+      '0',
+    )}h${String(minutes).padStart(
+      2,
+      '0',
+    )}`;
   };
 
+
   const getDisplayTimeEntries = () => {
     const toMinutes = (time) => {
-      const [hours, minutes] = time.split(':').map(Number);
+      const [hours, minutes] =
+        time.split(':').map(Number);
+
       return hours * 60 + minutes;
     };
 
+
     return timeEntries.map((entry) => {
-      if (entry.start_time && !entry.end_time) {
+      if (
+        entry.start_time &&
+        !entry.end_time
+      ) {
         return {
           ...entry,
           end_time: '24:00:00',
-          duration: (1440 - toMinutes(entry.start_time)) / 60,
+          duration:
+            (1440 -
+              toMinutes(
+                entry.start_time,
+              )) /
+            60,
         };
       }
-      if (!entry.start_time && entry.end_time) {
+
+
+      if (
+        !entry.start_time &&
+        entry.end_time
+      ) {
         return {
           ...entry,
           start_time: '00:00:00',
-          duration: toMinutes(entry.end_time) / 60,
+          duration:
+            toMinutes(
+              entry.end_time,
+            ) / 60,
         };
       }
+
+
       return entry;
     });
   };
 
+
   const formatDate = (dateString) => {
-    const date = new Date(dateString);
-    return date.toLocaleDateString('fr-FR');
+    const date =
+      new Date(dateString);
+
+    return date.toLocaleDateString(
+      'fr-FR',
+    );
   };
 
-  const formatDuration = (duration) => {
-    const totalMinutes = Math.round(Number(duration || 0) * 60);
-    const hours = String(Math.floor(totalMinutes / 60)).padStart(2, '0');
-    const minutes = String(totalMinutes % 60).padStart(2, '0');
+
+  const formatDuration = (
+    duration,
+  ) => {
+    const totalMinutes =
+      Math.round(
+        Number(duration || 0) * 60,
+      );
+
+    const hours = String(
+      Math.floor(
+        totalMinutes / 60,
+      ),
+    ).padStart(2, '0');
+
+    const minutes = String(
+      totalMinutes % 60,
+    ).padStart(2, '0');
 
     return `${hours}h${minutes}`;
   };
 
-  const displayedTimeEntries = isAdmin && !showAllUsers && selectedUserId
-    ? timeEntries.filter(
-        (entry) => getEntryUserId(entry) === String(selectedUserId),
-      )
-    : timeEntries;
 
-  const selectedUser = users.find(
-    (user) => getUserId(user) === String(selectedUserId),
-  );
+  /*
+   * ============================================================
+   * UTILISATEUR SÉLECTIONNÉ
+   * ============================================================
+   */
+
+  const selectedUser =
+    users.find(
+      (user) =>
+        getUserId(user) ===
+        String(selectedUserId),
+    );
+
+
+  /*
+   * Filtrage des pointages affichés.
+   */
+  const displayedTimeEntries =
+    getDisplayTimeEntries().filter(
+      (entry) => {
+        if (!isAdmin) {
+          return true;
+        }
+
+        if (showAllUsers) {
+          return true;
+        }
+
+        return (
+          getEntryUserId(entry) ===
+          String(selectedUserId)
+        );
+      },
+    );
+
+
+  /*
+   * ============================================================
+   * RENDER
+   * ============================================================
+   */
 
   return (
     <Card className="flex h-full w-full">
-      <CardHeader  className="border-b">
-        <CardTitle>Pointage</CardTitle>
+      <CardHeader className="border-b">
+        <CardTitle>
+          Pointage
+        </CardTitle>
       </CardHeader>
+
+
       <CardContent>
         {error && (
-          <Alert variant="destructive" className="mb-4">
-            <AlertDescription>{error}</AlertDescription>
+          <Alert
+            variant="destructive"
+            className="mb-4"
+          >
+            <AlertDescription>
+              {error}
+            </AlertDescription>
           </Alert>
         )}
 
+
         {cameraPermissionError && (
           <div className="mb-4 flex flex-col gap-2 sm:flex-row sm:items-center">
-            <Button type="button" variant="secondary" onClick={requestCameraPermission}>
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={
+                requestCameraPermission
+              }
+            >
               Autoriser la caméra
             </Button>
+
             <p className="text-sm text-muted-foreground">
-              Si le navigateur a déjà bloqué la caméra, autorisez-la dans les paramètres du site puis cliquez ici pour réessayer.
+              Si le navigateur a déjà
+              bloqué la caméra, autorisez-la
+              dans les paramètres du site
+              puis cliquez ici pour
+              réessayer.
             </p>
           </div>
         )}
 
+
         {scanMessage && (
-          <Alert variant="success" className="mb-4">
-            <AlertDescription>{scanMessage}</AlertDescription>
+          <Alert
+            variant="success"
+            className="mb-4"
+          >
+            <AlertDescription>
+              {scanMessage}
+            </AlertDescription>
           </Alert>
         )}
 
+
         {scanConflict && (
           <Card className="mb-4">
             <CardHeader className="border-b">
-              <CardTitle>Conflit de pointage</CardTitle>
+              <CardTitle>
+                Conflit de pointage
+              </CardTitle>
             </CardHeader>
+
             <CardContent>
-              <p className="mb-2">{scanConflict.message}</p>
-              <Label htmlFor="conflict-time">Heure à utiliser</Label>
+              <p className="mb-2">
+                {scanConflict.message}
+              </p>
+
+              <Label htmlFor="conflict-time">
+                Heure à utiliser
+              </Label>
+
               <TimePicker
                 value={conflictTime}
-                onChange={setConflictTime}
+                onChange={
+                  setConflictTime
+                }
               />
+
               <div className="flex gap-2">
-                <Button 
-                  onClick={() => resolveScanConflict(scanConflict.type === 'open_entry' ? 'cancel_entry' : 'cancel_exit')}
+                <Button
+                  onClick={() =>
+                    resolveScanConflict(
+                      scanConflict.type ===
+                        'open_entry'
+                        ? 'cancel_entry'
+                        : 'cancel_exit',
+                    )
+                  }
                   variant="destructive"
                 >
                   Annuler le pointage
                 </Button>
-                <Button 
-                  onClick={() => resolveScanConflict(scanConflict.type === 'open_entry' ? 'complete_entry' : 'complete_exit')}
+
+                <Button
+                  onClick={() =>
+                    resolveScanConflict(
+                      scanConflict.type ===
+                        'open_entry'
+                        ? 'complete_entry'
+                        : 'complete_exit',
+                    )
+                  }
                   variant="default"
                 >
                   Renseigner l’heure
@@ -853,163 +1482,339 @@ const TimeClockPage = () => {
           </Card>
         )}
 
-        {/* Time tracking section */}
+
         <div className="w-full">
+
+          {/* ==================================================
+              SÉLECTION UTILISATEUR ADMIN
+              ================================================== */}
+
           {isAdmin && (
             <Card className="mb-4">
               <CardContent className="space-y-4">
                 <div className="flex flex-col gap-3 md:flex-row md:items-end">
+
                   <div className="min-w-0 flex-1">
                     <Label htmlFor="selected-user">
                       Voir les pointages de
                     </Label>
+
                     <select
                       id="selected-user"
                       value={selectedUserId}
-                      disabled={showAllUsers}
+                      disabled={
+                        showAllUsers
+                      }
                       onChange={(event) => {
-                        setSelectedUserId(event.target.value);
-                        setEditingEntry(null);
+                        setSelectedUserId(
+                          event.target.value,
+                        );
+
+                        setEditingEntry(
+                          null,
+                        );
+
                         setError('');
                       }}
                       className="mt-2 flex h-10 w-full 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>
+                        <option value="">
+                          Aucun utilisateur disponible
+                        </option>
                       ) : (
                         users.map((user) => (
-                          <option key={getUserId(user)} value={getUserId(user)}>
-                            {getUserLabel(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);
-                        setEditingEntry(null);
+                      checked={
+                        showAllUsers
+                      }
+                      onChange={(
+                        event,
+                      ) => {
+                        setShowAllUsers(
+                          event.target.checked,
+                        );
+
+                        setEditingEntry(
+                          null,
+                        );
+
                         setError('');
                       }}
                       className="size-4 accent-primary"
                     />
-                    <span>Voir tout le monde</span>
+
+                    <span>
+                      Voir tout le monde
+                    </span>
                   </label>
                 </div>
               </CardContent>
             </Card>
           )}
 
-          {isAdmin && !showAllUsers && (
-            <Card className="mb-4">
-              <CardHeader className="border-b">
-                <CardTitle>
-                  {editingEntry
-                    ? 'Modifier le pointage'
-                    : `Ajouter un pointage pour${selectedUser ? ` ${getUserLabel(selectedUser)}` : ''}`}
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                {editingEntry ? (
-                  <form onSubmit={handleUpdateEntry}>
-                    <div className="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
-                      <div>
-                        <Label htmlFor="edit-start-time">Heure d'entrée :</Label>
-                        <TimePicker
-                          value={editForm.start_time}
-                          onChange={(value) =>
-                            setEditForm({ ...editForm, start_time: value })
-                          }
-                        />
+
+          {/* ==================================================
+              AJOUT MANUEL
+              ================================================== */}
+
+          {isAdmin &&
+            !showAllUsers && (
+              <Card className="mb-4">
+                <CardHeader className="border-b">
+                  <CardTitle>
+                    {editingEntry
+                      ? 'Modifier le pointage'
+                      : `Ajouter un pointage pour${
+                          selectedUser
+                            ? ` ${getUserLabel(
+                                selectedUser,
+                              )}`
+                            : ''
+                        }`}
+                  </CardTitle>
+                </CardHeader>
+
+                <CardContent>
+                  {editingEntry ? (
+                    <form
+                      onSubmit={
+                        handleUpdateEntry
+                      }
+                    >
+                      <div className="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
+
+                        <div>
+                          <Label htmlFor="edit-start-time">
+                            Heure d'entrée :
+                          </Label>
+
+                          <TimePicker
+                            value={
+                              editForm.start_time
+                            }
+                            onChange={(
+                              value,
+                            ) =>
+                              setEditForm({
+                                ...editForm,
+                                start_time:
+                                  value,
+                              })
+                            }
+                          />
+                        </div>
+
+
+                        <div>
+                          <Label htmlFor="edit-end-time">
+                            Heure de sortie :
+                          </Label>
+
+                          <TimePicker
+                            value={
+                              editForm.end_time
+                            }
+                            onChange={(
+                              value,
+                            ) =>
+                              setEditForm({
+                                ...editForm,
+                                end_time:
+                                  value,
+                              })
+                            }
+                          />
+                        </div>
                       </div>
-                      <div>
-                        <Label htmlFor="edit-end-time">Heure de sortie :</Label>
-                        <TimePicker
-                          value={editForm.end_time}
-                          onChange={(value) =>
-                            setEditForm({ ...editForm, end_time: value })
+
+
+                      <div className="flex gap-2">
+                        <Button type="submit">
+                          Enregistrer
+                        </Button>
+
+                        <Button
+                          type="button"
+                          variant="secondary"
+                          onClick={() =>
+                            setEditingEntry(
+                              null,
+                            )
                           }
-                        />
+                        >
+                          Annuler
+                        </Button>
                       </div>
-                    </div>
-                    <div className="flex gap-2">
-                      <Button type="submit">Enregistrer</Button>
-                      <Button type="button" variant="secondary" onClick={() => setEditingEntry(null)}>Annuler</Button>
-                    </div>
-                  </form>
-                ) : (
-                  <form onSubmit={handleAddEntry}>
-                    <div className="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
-                      <div>
-                        <Label>Date d'entrée:</Label>
-                        <DatePicker
-                          value={newEntry.date}
-                          onChange={(value) =>
-                            setNewEntry({ ...newEntry, date: value })
-                          }
-                        />
+                    </form>
+                  ) : (
+                    <form
+                      onSubmit={
+                        handleAddEntry
+                      }
+                    >
+                      <div className="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
+
+                        <div>
+                          <Label>
+                            Date d'entrée:
+                          </Label>
+
+                          <DatePicker
+                            value={
+                              newEntry.date
+                            }
+                            onChange={(
+                              value,
+                            ) =>
+                              setNewEntry({
+                                ...newEntry,
+                                date: value,
+                              })
+                            }
+                          />
+                        </div>
+
+
+                        <div>
+                          <Label>
+                            Date de sortie:
+                          </Label>
+
+                          <DatePicker
+                            value={
+                              newEntry.end_date
+                            }
+                            min={
+                              newEntry.date
+                            }
+                            onChange={(
+                              value,
+                            ) =>
+                              setNewEntry({
+                                ...newEntry,
+                                end_date:
+                                  value,
+                              })
+                            }
+                          />
+                        </div>
+
+
+                        <div>
+                          <Label>
+                            Heure d'entrée:
+                          </Label>
+
+                          <TimePicker
+                            value={
+                              newEntry.start_time
+                            }
+                            onChange={(
+                              value,
+                            ) =>
+                              setNewEntry({
+                                ...newEntry,
+                                start_time:
+                                  value,
+                              })
+                            }
+                          />
+                        </div>
+
+
+                        <div>
+                          <Label>
+                            Heure de sortie:
+                          </Label>
+
+                          <TimePicker
+                            value={
+                              newEntry.end_time
+                            }
+                            onChange={(
+                              value,
+                            ) =>
+                              setNewEntry({
+                                ...newEntry,
+                                end_time:
+                                  value,
+                              })
+                            }
+                          />
+                        </div>
                       </div>
-                      <div>
-                        <Label>Date de sortie:</Label>
-                        <DatePicker
-                          value={newEntry.end_date}
-                          min={newEntry.date}
-                          onChange={(value) =>
-                            setNewEntry({ ...newEntry, end_date: value })
-                          }
-                        />
-                      </div>
-                      <div>
-                        <Label>Heure d'entrée:</Label>
-                        <TimePicker
-                          value={newEntry.start_time}
-                          onChange={(value) =>
-                            setNewEntry({ ...newEntry, start_time: value })
-                          }
-                        />
-                      </div>
-                      <div>
-                        <Label>Heure de sortie:</Label>
-                        <TimePicker
-                          value={newEntry.end_time}
-                          onChange={(value) =>
-                            setNewEntry({ ...newEntry, end_time: value })
-                          }
-                        />
-                      </div>
-                    </div>
-                    <Button type="submit">Ajouter le pointage</Button>
-                  </form>
-                )}
-              </CardContent>
-            </Card>
-          )}
+
+
+                      <Button type="submit">
+                        Ajouter le pointage
+                      </Button>
+                    </form>
+                  )}
+                </CardContent>
+              </Card>
+            )}
+
+
+          {/* ==================================================
+              POINTAGE QR
+              ================================================== */}
 
           <div className="w-full">
-            {/* Pointage uniquement disponible sur mobile */}
+
             <div className="flex flex-col items-center justify-center py-6 md:hidden">
               <Dialog
-                open={isScannerDialogOpen}
+                open={
+                  isScannerDialogOpen
+                }
                 onOpenChange={(open) => {
                   if (open) {
-                    setIsScannerDialogOpen(true);
+                    setIsScannerDialogOpen(
+                      true,
+                    );
                   } else {
                     closeScanner();
                   }
                 }}
               >
-                <Button onClick={startScanner} variant="default">
-                  {isAdmin ? 'Pointer avec un QR code' : 'Pointer'}
+                <Button
+                  onClick={startScanner}
+                  variant="default"
+                >
+                  {isAdmin
+                    ? 'Pointer avec un QR code'
+                    : 'Pointer'}
                 </Button>
 
+
                 <DialogContent className="max-w-2xl">
                   <DialogHeader className="border-b">
-                    <DialogTitle>Aperçu de la caméra</DialogTitle>
+                    <DialogTitle>
+                      Aperçu de la caméra
+                    </DialogTitle>
                   </DialogHeader>
+
+
                   <div className="scanner-panel">
                     <video
                       ref={videoRef}
@@ -1018,8 +1823,19 @@ const TimeClockPage = () => {
                       muted
                       autoPlay
                     />
-                    <div className="scanner-frame" aria-hidden="true" />
-                    <Button onClick={closeScanner} variant="secondary" className="mt-2 full-w">
+
+                    <div
+                      className="scanner-frame"
+                      aria-hidden="true"
+                    />
+
+                    <Button
+                      onClick={
+                        closeScanner
+                      }
+                      variant="secondary"
+                      className="mt-2 w-full"
+                    >
                       Annuler
                     </Button>
                   </div>
@@ -1027,74 +1843,183 @@ const TimeClockPage = () => {
               </Dialog>
             </div>
 
-            {/* Sur ordinateur, le pointage est volontairement indisponible */}
-            {!isAdmin &&
+
+            {!isAdmin && (
               <div className="hidden py-6 text-center md:block">
                 <p className="text-sm text-muted-foreground">
-                  Le pointage est indisponible sur ordinateur.
+                  Le pointage est
+                  indisponible sur ordinateur.
                 </p>
               </div>
-            }
+            )}
+
+
+            {/* ==================================================
+                HISTORIQUE
+                ================================================== */}
 
             <Card>
               <CardHeader className="border-b">
                 <CardTitle>
                   {showAllUsers
                     ? 'Historique des pointages'
-                    : `Historique des pointages de${selectedUser ? ` ${getUserLabel(selectedUser)}` : ''}`}
+                    : `Historique des pointages de${
+                        selectedUser
+                          ? ` ${getUserLabel(
+                              selectedUser,
+                            )}`
+                          : ''
+                      }`}
                 </CardTitle>
               </CardHeader>
+
+
               <CardContent>
                 {loading ? (
-                  <p>Chargement des pointages...</p>
-                ) : displayedTimeEntries.length === 0 ? (
-                  <p>Aucun pointage enregistré</p>
+                  <p>
+                    Chargement des
+                    pointages...
+                  </p>
+                ) : displayedTimeEntries.length ===
+                  0 ? (
+                  <p>
+                    Aucun pointage
+                    enregistré
+                  </p>
                 ) : (
                   <div className="overflow-x-auto">
                     <Table>
                       <TableHeader>
                         <TableRow>
-                          {isAdmin && <TableHead>Nom</TableHead>}
-                          <TableHead>Date</TableHead>
-                          <TableHead>Entrée</TableHead>
-                          <TableHead>Sortie</TableHead>
-                          <TableHead>Durée</TableHead>
-                          {isAdmin && <TableHead>Actions</TableHead>}
+
+                          {isAdmin && (
+                            <TableHead>
+                              Nom
+                            </TableHead>
+                          )}
+
+                          <TableHead>
+                            Date
+                          </TableHead>
+
+                          <TableHead>
+                            Entrée
+                          </TableHead>
+
+                          <TableHead>
+                            Sortie
+                          </TableHead>
+
+                          <TableHead>
+                            Durée
+                          </TableHead>
+
+                          {isAdmin && (
+                            <TableHead>
+                              Actions
+                            </TableHead>
+                          )}
+
                         </TableRow>
                       </TableHeader>
+
+
                       <TableBody>
-                        {getDisplayTimeEntries()
-                          .filter(
-                            (entry) =>
-                              !isAdmin ||
-                              showAllUsers ||
-                              getEntryUserId(entry) === String(selectedUserId),
-                          )
-                          .map((entry) => (
-                          <TableRow key={entry.id}>
-                            {isAdmin && <TableCell>{entry.user.first_name} {entry.user.last_name}</TableCell>}
-                            <TableCell>{formatDate(entry.date)}</TableCell>
-                            <TableCell>{formatTime(entry.start_time)}</TableCell>
-                            <TableCell>{formatTime(entry.end_time)}</TableCell>
-                            <TableCell><Badge variant="secondary">{formatDuration(entry.duration)}</Badge></TableCell>
-                            {isAdmin && (
+                        {displayedTimeEntries.map(
+                          (entry) => (
+                            <TableRow
+                              key={entry.id}
+                            >
+
+                              {isAdmin && (
+                                <TableCell>
+                                  {entry.user
+                                    ? getUserLabel(
+                                        entry.user,
+                                      )
+                                    : 'Utilisateur inconnu'}
+                                </TableCell>
+                              )}
+
+
                               <TableCell>
-                                <div className="flex gap-2">
-                                  <Button onClick={() => handleEditEntry(entry)} variant="secondary" size="sm">Modifier</Button>
-                                  <ConfirmDialog title="Supprimer le pointage" description="Êtes-vous sûr de vouloir supprimer ce pointage ?" onConfirm={() => handleDeleteEntry(entry.id)}>
-                                    <Button variant="destructive" size="sm">Supprimer</Button>
-                                  </ConfirmDialog>
-                                </div>
+                                {formatDate(
+                                  entry.date,
+                                )}
                               </TableCell>
-                            )}
-                          </TableRow>
-                        ))}
+
+
+                              <TableCell>
+                                {formatTime(
+                                  entry.start_time,
+                                )}
+                              </TableCell>
+
+
+                              <TableCell>
+                                {formatTime(
+                                  entry.end_time,
+                                )}
+                              </TableCell>
+
+
+                              <TableCell>
+                                <Badge variant="secondary">
+                                  {formatDuration(
+                                    entry.duration,
+                                  )}
+                                </Badge>
+                              </TableCell>
+
+
+                              {isAdmin && (
+                                <TableCell>
+                                  <div className="flex gap-2">
+
+                                    <Button
+                                      onClick={() =>
+                                        handleEditEntry(
+                                          entry,
+                                        )
+                                      }
+                                      variant="secondary"
+                                      size="sm"
+                                    >
+                                      Modifier
+                                    </Button>
+
+
+                                    <ConfirmDialog
+                                      title="Supprimer le pointage"
+                                      description="Êtes-vous sûr de vouloir supprimer ce pointage ?"
+                                      onConfirm={() =>
+                                        handleDeleteEntry(
+                                          entry.id,
+                                        )
+                                      }
+                                    >
+                                      <Button
+                                        variant="destructive"
+                                        size="sm"
+                                      >
+                                        Supprimer
+                                      </Button>
+                                    </ConfirmDialog>
+
+                                  </div>
+                                </TableCell>
+                              )}
+
+                            </TableRow>
+                          ),
+                        )}
                       </TableBody>
                     </Table>
                   </div>
                 )}
               </CardContent>
             </Card>
+
           </div>
         </div>
       </CardContent>