test

frontend/src/pages/TimeClockPage.jsx

@@ -10,6 +10,7 @@ import { Alert, AlertDescription } from '@/components/ui/alert';
 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, DialogTrigger } from '@/components/ui/dialog';
 
 const TimeClockPage = () => {
   const videoRef = useRef(null);
@@ -346,23 +347,39 @@ const TimeClockPage = () => {
           </Alert>
         )}
 
-        {isScanning ? (
-          <div className="scanner-panel">
-            <video ref={videoRef} className="scanner-video" playsInline muted />
-            <div className="scanner-frame" aria-hidden="true" />
-            <Button onClick={stopScanner} variant="secondary" className="mt-2">
-              Annuler
+        {/* Dialog for QR scanner preview */}
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button 
+              onClick={startScanner} 
+              variant="default" 
+              className="mb-4"
+            >
+              {isAdmin ? "Pointer avec un QR code" : "Pointer"}
             </Button>
-          </div>
-        ) : (
-          <Button 
-            onClick={startScanner} 
-            variant="default" 
-            className="mb-4"
-          >
-            {isAdmin ? "Pointer avec un QR code" : "Pointer"}
-          </Button>
-        )}
+          </DialogTrigger>
+          <DialogContent className="max-w-2xl max-h-[90vh] overflow-auto">
+            <DialogHeader>
+              <DialogTitle>Aperçu de la caméra</DialogTitle>
+            </DialogHeader>
+            {isScanning ? (
+              <div className="scanner-panel">
+                <video ref={videoRef} className="scanner-video w-full h-auto" playsInline muted />
+                <div className="scanner-frame" aria-hidden="true" />
+                <Button onClick={stopScanner} variant="secondary" className="mt-2">
+                  Annuler
+                </Button>
+              </div>
+            ) : (
+              <div className="text-center py-8">
+                <p>La caméra est prête à être utilisée</p>
+                <Button onClick={startScanner} variant="default" className="mt-4">
+                  Démarrer le scanner
+                </Button>
+              </div>
+            )}
+          </DialogContent>
+        </Dialog>
 
         {scanMessage && (
           <Alert variant="success" className="mb-4">