diff --git a/frontend/src/pages/TimeClockPage.jsx b/frontend/src/pages/TimeClockPage.jsx
index 4b7c73d..6772582 100644
--- a/frontend/src/pages/TimeClockPage.jsx
+++ b/frontend/src/pages/TimeClockPage.jsx
@@ -3,25 +3,14 @@ import { BrowserQRCodeReader } from '@zxing/browser';
 import { timeApi } from '../api/time';
 import { useAuth } from '../context/useAuth';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
 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,
@@ -63,7 +52,6 @@ const formatDateLabel = (value) => {
   });
 };
 
-
 const DatePicker = ({
   value,
   onChange,
@@ -87,7 +75,6 @@ const DatePicker = ({
         }
       >
         <CalendarDays className="size-4 text-muted-foreground" />
-
         <span className={selectedDate ? '' : 'text-muted-foreground'}>
           {selectedDate ? formatDateLabel(value) : placeholder}
         </span>
@@ -111,7 +98,6 @@ const DatePicker = ({
   );
 };
 
-
 const TimePicker = ({
   value,
   onChange,
@@ -122,23 +108,18 @@ 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 (
@@ -153,21 +134,14 @@ 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>
@@ -178,7 +152,6 @@ 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
@@ -199,7 +172,6 @@ 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
@@ -236,602 +208,378 @@ 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 '';
 
-    const id =
+    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 ??
-      user.user?.user_id;
-
-    return id != null ? String(id) : '';
+      ''
+    );
   };
 
-
   const getUserLabel = (user) => {
     if (!user) return 'Utilisateur';
 
-    const firstName =
-      user.first_name ??
-      user.user?.first_name ??
-      '';
-
-    const lastName =
-      user.last_name ??
-      user.user?.last_name ??
-      '';
+    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();
 
-    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';
+    return (
+      fullName ||
+      user.username ||
+      user.name ||
+      user.user_name ||
+      user.email ||
+      `Utilisateur #${getUserId(user)}`
+    );
   };
 
-
   const getEntryUserId = (entry) => {
     if (!entry) return '';
 
-    const id =
-      entry.user?.id ??
-      entry.user?.pk ??
-      entry.user?.user_id ??
+    const directId =
       entry.user_id ??
+      entry.userId ??
+      entry.employee_id ??
+      entry.employeeId ??
       entry.user_pk;
 
-    return id != null ? String(id) : '';
+    if (directId !== undefined && directId !== null && directId !== '') {
+      return String(directId);
+    }
+
+    if (entry.user && typeof entry.user === 'object') {
+      return getUserId(entry.user);
+    }
+
+    // Certaines réponses Django renvoient simplement `user: 2`
+    // au lieu de `user: { id: 2, ... }`.
+    if (typeof entry.user === 'number') {
+      return String(entry.user);
+    }
+
+    if (typeof entry.user === 'string' && /^\d+$/.test(entry.user)) {
+      return entry.user;
+    }
+
+    return '';
   };
 
+  const getEntryUserLabel = (entry) => {
+    if (!entry) return 'Utilisateur inconnu';
+
+    if (entry.user && typeof entry.user === 'object') {
+      return getUserLabel(entry.user);
+    }
 
-  const getCurrentUserId = () => {
     return (
-      getUserId(authUser) ||
-      getUserId(currentUser)
+      entry.username ||
+      entry.user_name ||
+      entry.userName ||
+      (typeof entry.user === 'string' && !/^\d+$/.test(entry.user)
+        ? entry.user
+        : '') ||
+      `Utilisateur #${getEntryUserId(entry)}`
     );
   };
 
-
-  /*
-   * ============================================================
-   * CHARGEMENT DES POINTAGES + UTILISATEURS
-   * ============================================================
-   */
+  const getCurrentUserId = () => {
+    return getUserId(authUser) || getUserId(currentUser);
+  };
 
   const loadTimeEntries = async () => {
     try {
       setLoading(true);
 
       const entries = await timeApi.getTimeEntries();
+      setTimeEntries(entries);
 
-      setTimeEntries(
-        Array.isArray(entries) ? entries : [],
-      );
-
-      if (!isAdmin) {
-        return;
-      }
+      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 response = await timeApi.getUsers();
+          const apiUsers = 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;
+          // Django REST Framework renvoie souvent les listes paginées
+          // sous la forme { count, next, previous, results: [...] }.
+          // On accepte aussi les formats { data: [...] } / { users: [...] }
+          // pour éviter de perdre une partie des utilisateurs.
+          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;
+          } else {
+            availableUsers = [];
           }
-
-          console.log(
-            'Utilisateurs récupérés:',
-            availableUsers,
-          );
         } catch (usersError) {
           console.warn(
-            'Impossible de charger la liste des utilisateurs.',
+            'Impossible de charger la liste des utilisateurs. Fallback sur les pointages.',
             usersError,
           );
         }
       }
 
+      // Les pointages contiennent eux aussi l'utilisateur associé.
+      // On les fusionne toujours avec la liste de l'API : l'endpoint
+      // utilisateurs peut être limité au profil courant ou être paginé.
+      // Cela évite d'avoir uniquement l'admin dans la combolist.
+      const usersById = new Map(
+        availableUsers
+          .map((user) => [getUserId(user), user])
+          .filter(([id]) => id),
+      );
 
-      /*
-       * 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);
 
-        entries.forEach((entry) => {
-          const id = getEntryUserId(entry);
+        if (!id || usersById.has(id)) return;
 
-          if (!id || usersById.has(id)) {
-            return;
-          }
+        const entryUser =
+          typeof entry.user === 'object' && entry.user
+            ? entry.user
+            : {
+                id,
+                username: entry.username,
+                name: entry.user_name || entry.userName,
+                first_name: entry.first_name,
+                last_name: entry.last_name,
+                email: entry.email,
+              };
 
-          const user = entry?.user;
-
-          if (user) {
-            usersById.set(id, {
-              ...user,
-              id,
-            });
-          }
-        });
-
-        availableUsers = [
-          ...usersById.values(),
-        ];
-      }
-
-
-      /*
-       * Ajout de l'utilisateur connecté s'il n'est
-       * pas déjà dans la liste.
-       */
-      const connectedUser =
-        authUser || currentUser;
-
-      const connectedUserId =
-        getUserId(connectedUser);
-
-      if (
-        connectedUserId &&
-        !availableUsers.some(
-          (user) =>
-            getUserId(user) === connectedUserId,
-        )
-      ) {
-        availableUsers.unshift({
-          ...connectedUser,
-          id: connectedUserId,
-        });
-      }
-
-
-      /*
-       * 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,
-          });
-        }
+        usersById.set(id, entryUser);
       });
 
+      availableUsers = [...usersById.values()];
 
-      /*
-       * Tri alphabétique.
-       */
-      availableUsers = [
-        ...usersById.values(),
-      ].sort((first, second) =>
-        getUserLabel(first).localeCompare(
-          getUserLabel(second),
-          'fr',
-          {
-            sensitivity: 'base',
-          },
-        ),
-      );
+      const currentUserId = getCurrentUserId();
 
+      if (
+        currentUserId &&
+        !availableUsers.some(
+          (availableUser) => getUserId(availableUser) === currentUserId,
+        )
+      ) {
+        const loggedInUser = authUser || currentUser;
 
-      console.log(
-        'Liste finale des utilisateurs:',
-        availableUsers,
-      );
+        if (loggedInUser) {
+          availableUsers.unshift(loggedInUser);
+        }
+      }
 
+      availableUsers = availableUsers
+        .filter((availableUser) => getUserId(availableUser))
+        .sort((first, second) =>
+          getUserLabel(first).localeCompare(getUserLabel(second), 'fr'),
+        );
 
       setUsers(availableUsers);
 
+      setSelectedUserId((currentSelectedId) => {
+        if (
+          currentSelectedId &&
+          availableUsers.some(
+            (availableUser) =>
+              getUserId(availableUser) === String(currentSelectedId),
+          )
+        ) {
+          return currentSelectedId;
+        }
 
-      /*
-       * 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]) ||
-            ''
-          );
-        },
-      );
+        return (
+          currentUserId ||
+          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 {
-      /*
-       * Un seul jour
-       */
-      if (
-        newEntry.date === newEntry.end_date
-      ) {
+      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) => {
-            /*
-             * 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.
-             */
+        await Promise.all(dates.map((date, index) => {
+          if (index === 0) {
             return timeApi.createTimeEntry({
               date,
-              start_time: '00:00',
-              end_time: '23:59',
-
+              start_time: newEntry.start_time,
               ...(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: ''
       });
-
-      await loadTimeEntries();
-
+      loadTimeEntries(); // Refresh the list
       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: '',
-      });
-
-      await loadTimeEntries();
-
+      setEditForm({ start_time: '', end_time: '' });
+      loadTimeEntries(); // Refresh the list
       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);
-
-      await loadTimeEntries();
-
+      loadTimeEntries(); // Refresh the list
       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;
 
@@ -839,61 +587,35 @@ 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,
@@ -905,56 +627,35 @@ 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;
+    if (!isScannerDialogOpen) return undefined;
 
+    const sessionId = scannerSessionRef.current;
     let cancelled = false;
     let reader = null;
 
-
     const startReader = async () => {
       await new Promise((resolve) => {
         requestAnimationFrame(() => {
@@ -962,119 +663,84 @@ 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',
-                },
-              },
-              audio: false,
+        const controls = await reader.decodeFromConstraints(
+          {
+            video: {
+              facingMode: { ideal: 'environment' },
             },
+            audio: false,
+          },
+          videoRef.current,
+          (result) => {
+            if (
+              !result ||
+              cancelled ||
+              sessionId !== scannerSessionRef.current
+            ) {
+              return;
+            }
 
-            videoRef.current,
-
-            (result) => {
-              if (
-                !result ||
-                cancelled ||
-                sessionId !==
-                  scannerSessionRef.current
-              ) {
-                return;
-              }
-
-              handleQrResult(
-                result.getText(),
-                sessionId,
-              );
-            },
-          );
-
+            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;
 
@@ -1087,392 +753,195 @@ 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('');
 
-  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;
-      }
-
-
-      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';
+    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 [hours, minutes] =
-      timeString.split(':');
-
-    if (hours === '24') {
-      return '23h59';
+    if (!navigator.mediaDevices?.getUserMedia) {
+      setError('Ce navigateur ne permet pas l’accès à la caméra.');
+      return;
     }
 
-    return `${String(hours).padStart(
-      2,
-      '0',
-    )}h${String(minutes).padStart(
-      2,
-      '0',
-    )}`;
+    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.',
+        );
+      }
+    }
   };
 
+  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')}`;
+  };
 
   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;
 
-  /*
-   * ============================================================
-   * 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
-   * ============================================================
-   */
+  const selectedUser = users.find(
+    (user) => getUserId(user) === String(selectedUserId),
+  );
 
   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
@@ -1482,339 +951,173 @@ const TimeClockPage = () => {
           </Card>
         )}
 
-
+        {/* Time tracking section */}
         <div className="w-full">
-
-          {/* ==================================================
-              SÉLECTION UTILISATEUR ADMIN
-              ================================================== */}
-
           {isAdmin && (
             <Card className="mb-4">
+              <CardHeader className="border-b">
+                <CardTitle>Utilisateur</CardTitle>
+              </CardHeader>
               <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>
+
+                {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>
           )}
 
-
-          {/* ==================================================
-              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 className="flex gap-2">
-                        <Button type="submit">
-                          Enregistrer
-                        </Button>
-
-                        <Button
-                          type="button"
-                          variant="secondary"
-                          onClick={() =>
-                            setEditingEntry(
-                              null,
-                            )
+          {isAdmin && !showAllUsers && (
+            <Card className="mb-4">
+              <CardHeader className="border-b">
+                <CardTitle>
+                  {editingEntry
+                    ? 'Modifier le pointage'
+                    : `Ajouter un pointage manuel${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 })
                           }
-                        >
-                          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,
-                              })
-                            }
-                          />
-                        </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>
+                        <Label htmlFor="edit-end-time">Heure de sortie :</Label>
+                        <TimePicker
+                          value={editForm.end_time}
+                          onChange={(value) =>
+                            setEditForm({ ...editForm, end_time: value })
+                          }
+                        />
                       </div>
-
-
-                      <Button type="submit">
-                        Ajouter le pointage
-                      </Button>
-                    </form>
-                  )}
-                </CardContent>
-              </Card>
-            )}
-
-
-          {/* ==================================================
-              POINTAGE QR
-              ================================================== */}
+                    </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:</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>
+                    <Button type="submit">Ajouter le pointage</Button>
+                  </form>
+                )}
+              </CardContent>
+            </Card>
+          )}
 
           <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}
@@ -1823,19 +1126,8 @@ const TimeClockPage = () => {
                       muted
                       autoPlay
                     />
-
-                    <div
-                      className="scanner-frame"
-                      aria-hidden="true"
-                    />
-
-                    <Button
-                      onClick={
-                        closeScanner
-                      }
-                      variant="secondary"
-                      className="mt-2 w-full"
-                    >
+                    <div className="scanner-frame" aria-hidden="true" />
+                    <Button onClick={closeScanner} variant="secondary" className="mt-2">
                       Annuler
                     </Button>
                   </div>
@@ -1843,183 +1135,70 @@ const TimeClockPage = () => {
               </Dialog>
             </div>
 
-
-            {!isAdmin && (
+            {/* Sur ordinateur, le pointage est volontairement indisponible */}
+            {!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,
-                            )}`
-                          : ''
-                      }`}
-                </CardTitle>
+                <CardTitle>Historique des pointages</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>Utilisateur</TableHead>}
+                          <TableHead>Date</TableHead>
+                          <TableHead>Entrée</TableHead>
+                          <TableHead>Sortie</TableHead>
+                          <TableHead>Durée</TableHead>
+                          {isAdmin && <TableHead>Actions</TableHead>}
                         </TableRow>
                       </TableHeader>
-
-
                       <TableBody>
-                        {displayedTimeEntries.map(
-                          (entry) => (
-                            <TableRow
-                              key={entry.id}
-                            >
-
-                              {isAdmin && (
-                                <TableCell>
-                                  {entry.user
-                                    ? getUserLabel(
-                                        entry.user,
-                                      )
-                                    : 'Utilisateur inconnu'}
-                                </TableCell>
-                              )}
-
-
+                        {getDisplayTimeEntries()
+                          .filter(
+                            (entry) =>
+                              !isAdmin ||
+                              showAllUsers ||
+                              getEntryUserId(entry) === String(selectedUserId),
+                          )
+                          .map((entry) => (
+                          <TableRow key={entry.id}>
+                            {isAdmin && <TableCell>{getEntryUserLabel(entry)}</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 && (
                               <TableCell>
-                                {formatDate(
-                                  entry.date,
-                                )}
+                                <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>
-
-
-                              <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>
-                          ),
-                        )}
+                            )}
+                          </TableRow>
+                        ))}
                       </TableBody>
                     </Table>
                   </div>
                 )}
               </CardContent>
             </Card>
-
           </div>
         </div>
       </CardContent>