From 5cbef6828af58044bc5a8dd9fdb0b9acb6b7333a Mon Sep 17 00:00:00 2001
From: Louis Mazin <louismazindev@gmail.com>
Date: Sun, 20 Sep 2026 01:37:48 +0200
Subject: [PATCH] test

---
 frontend/src/pages/TimeClockPage.jsx | 143 +++++++++++++--------------
 1 file changed, 70 insertions(+), 73 deletions(-)

diff --git a/frontend/src/pages/TimeClockPage.jsx b/frontend/src/pages/TimeClockPage.jsx
index d8393eb..75ad4ac 100644
--- a/frontend/src/pages/TimeClockPage.jsx
+++ b/frontend/src/pages/TimeClockPage.jsx
@@ -1714,92 +1714,89 @@ const TimeClockPage = () => {
 
 
         {/* =====================================================
-            POINTAGE + HISTORIQUE
+            BOUTON POINTER — MOBILE UNIQUEMENT
         ====================================================== */}
 
-        <div className="grid w-full grid-cols-1 gap-6 lg:grid-cols-2">
+        <Dialog
+          open={
+            isScannerDialogOpen
+          }
+          onOpenChange={(
+            open,
+          ) => {
+            if (open) {
+              setIsScannerDialogOpen(
+                true,
+              );
+            } else {
+              closeScanner();
+            }
+          }}
+        >
 
-          {/* =================================================
-              COLONNE GAUCHE
-              POINTAGE
-          ================================================== */}
+          <Button
+            onClick={
+              startScanner
+            }
+            variant="default"
+            className="mb-6 w-full lg:hidden"
+          >
+            Pointer
+          </Button>
 
-          <div className="flex min-w-0 flex-col gap-6">
 
-            {/* =========================
-                BOUTON POINTER
-            ========================== */}
-            <Dialog
-              open={
-                isScannerDialogOpen
-              }
-              onOpenChange={(
-                open,
-              ) => {
-                if (open) {
-                  setIsScannerDialogOpen(
-                    true,
-                  );
-                } else {
-                  closeScanner();
-                }
-              }}
-            >
+          <DialogContent className="max-w-2xl">
+
+            <DialogHeader className="border-b">
+              <DialogTitle>
+                Aperçu de la caméra
+              </DialogTitle>
+            </DialogHeader>
+
+            <div className="scanner-panel">
+
+              <video
+                ref={videoRef}
+                className="scanner-video h-auto w-full"
+                playsInline
+                muted
+                autoPlay
+              />
+
+              <div
+                className="scanner-frame"
+                aria-hidden="true"
+              />
 
               <Button
                 onClick={
-                  startScanner
+                  closeScanner
                 }
-                variant="default"
-                className="w-full lg:hidden"
+                variant="secondary"
+                className="mt-2"
               >
-                Pointer
+                Annuler
               </Button>
 
+            </div>
 
-              <DialogContent className="max-w-2xl">
+          </DialogContent>
 
-                <DialogHeader className="border-b">
-                  <DialogTitle>
-                    Aperçu de la caméra
-                  </DialogTitle>
-                </DialogHeader>
-
-                <div className="scanner-panel">
-
-                  <video
-                    ref={videoRef}
-                    className="scanner-video h-auto w-full"
-                    playsInline
-                    muted
-                    autoPlay
-                  />
-
-                  <div
-                    className="scanner-frame"
-                    aria-hidden="true"
-                  />
-
-                  <Button
-                    onClick={
-                      closeScanner
-                    }
-                    variant="secondary"
-                    className="mt-2"
-                  >
-                    Annuler
-                  </Button>
-
-                </div>
-
-              </DialogContent>
-
-            </Dialog>
+        </Dialog>
 
 
-            {/* =========================
-                GESTION ADMIN
-            ========================== */}
+        {/* =====================================================
+            GESTION + HISTORIQUE
+        ====================================================== */}
+
+        <div className="grid w-full grid-cols-2 gap-3 lg:grid-cols-2 lg:gap-6">
+
+          {/* =================================================
+              COLONNE GAUCHE
+              GESTION ADMIN
+          ================================================== */}
+
+          <div className="min-w-0">
 
             {isAdmin && (
               <Card>
@@ -1934,7 +1931,7 @@ const TimeClockPage = () => {
                           }
                         >
 
-                          <div className="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
+                          <div className="mb-4 grid grid-cols-1 gap-4">
 
                             <div>
                               <Label>
@@ -1986,7 +1983,7 @@ const TimeClockPage = () => {
                           </div>
 
 
-                          <div className="flex gap-2">
+                          <div className="flex flex-col gap-2 sm:flex-row">
 
                             <Button type="submit">
                               Enregistrer
@@ -2017,7 +2014,7 @@ const TimeClockPage = () => {
                           }
                         >
 
-                          <div className="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
+                          <div className="mb-4 grid grid-cols-1 gap-4">
 
                             <div>
                               <Label>