Implement basic camera feature to allow users to capture identity photos

Replaces `useCamera` with `useSimpleCamera` and introduces `SimpleCameraModal` for capturing photos.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: dec54137-d5a2-4406-8ad4-5f2f9fb110bf
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/0715008c-7244-40f4-befc-26c014852236/9ada347d-ab83-40f0-9a0e-5fa4d829189e.jpg

client/src/components/NewSaleForm.tsx

@@ -9,12 +9,12 @@ import { Alert, AlertDescription } from '@/components/ui/alert';
 import { useToast } from '@/hooks/use-toast';
 import { useAuth } from '@/hooks/useAuth';
 import { useStoreContext } from '@/hooks/useStoreContext';
-import { useCamera } from '@/hooks/useCamera';
+import { useSimpleCamera } from '@/hooks/useSimpleCamera';
 import { useCameraTest } from '@/hooks/useCameraTest';
 import { apiRequest } from '@/lib/queryClient';
 import { validateRequiredFields, validateEAN13, ARTICLE_CATEGORY_MAPPING, IDENTITY_TYPES, PAYMENT_METHODS } from '@/lib/validation';
 import { Package, User, Users, Save, Calendar, BadgeCheck, Info, Camera, TestTube, Upload, Trash2 } from 'lucide-react';
-import CameraModal from '@/components/CameraModal';
+import SimpleCameraModal from '@/components/SimpleCameraModal';
 import type { PhotoType } from '@/types/sale';
 
 interface FormData {
@@ -54,7 +54,7 @@ export default function NewSaleForm() {
     startCamera,
     capturePhoto,
     stopCamera
-  } = useCamera();
+  } = useSimpleCamera();
 
   // Camera test functionality
   const { testResults, runCameraTest } = useCameraTest();
@@ -216,27 +216,9 @@ export default function NewSaleForm() {
         description: "Préparation de la caméra en cours...",
       });
       
-      // Démarrer la caméra
+      // Démarrer la caméra simple
       await startCamera(photoType);
-      console.log('Camera started successfully');
-      
-      // Attendre 2 secondes supplémentaires pour s'assurer que la vidéo est prête
-      console.log('Waiting for video to be fully ready...');
-      await new Promise(resolve => setTimeout(resolve, 2000));
-      
-      // Vérifier l'état final de la vidéo
-      if (videoRef.current) {
-        const video = videoRef.current;
-        console.log('Final video state check:', {
-          videoWidth: video.videoWidth,
-          videoHeight: video.videoHeight,
-          readyState: video.readyState,
-          paused: video.paused,
-          currentTime: video.currentTime
-        });
-      }
-      
-      console.log('Camera should be ready for capture');
+      console.log('Simple camera started successfully');
       
     } catch (error) {
       console.error('Camera start failed:', error);
@@ -770,7 +752,7 @@ export default function NewSaleForm() {
       </div>
       
       {/* Camera Modal */}
-      <CameraModal
+      <SimpleCameraModal
         isOpen={isCameraOpen}
         photoType={currentPhotoType}
         videoRef={videoRef}

client/src/components/SimpleCameraModal.tsx

@@ -0,0 +1,109 @@
+import { useEffect } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Camera, X } from 'lucide-react';
+import { PhotoType } from '@/types/sale';
+
+interface SimpleCameraModalProps {
+  isOpen: boolean;
+  photoType: PhotoType | null;
+  videoRef: React.RefObject<HTMLVideoElement>;
+  canvasRef: React.RefObject<HTMLCanvasElement>;
+  isCapturing: boolean;
+  onClose: () => void;
+  onCapture: () => void;
+}
+
+export default function SimpleCameraModal({
+  isOpen,
+  photoType,
+  videoRef,
+  canvasRef,
+  isCapturing,
+  onClose,
+  onCapture
+}: SimpleCameraModalProps) {
+  
+  useEffect(() => {
+    console.log('SimpleCameraModal - isOpen:', isOpen);
+    if (isOpen && videoRef.current) {
+      console.log('SimpleCameraModal - Video element available');
+      const video = videoRef.current;
+      
+      // Événements de diagnostic
+      video.onloadedmetadata = () => {
+        console.log('SimpleCameraModal - Video metadata loaded:', video.videoWidth, 'x', video.videoHeight);
+      };
+      
+      video.onplay = () => {
+        console.log('SimpleCameraModal - Video started playing');
+      };
+      
+      video.onerror = (e) => {
+        console.error('SimpleCameraModal - Video error:', e);
+      };
+    }
+  }, [isOpen, videoRef]);
+
+  if (!isOpen) return null;
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-2xl w-full mx-auto">
+        <DialogHeader>
+          <DialogTitle className="text-center">
+            Capture photo {photoType ? photoType.charAt(0).toUpperCase() + photoType.slice(1) : ''}
+          </DialogTitle>
+        </DialogHeader>
+        
+        <div className="space-y-4">
+          <div className="relative bg-black rounded-lg overflow-hidden">
+            <video
+              ref={videoRef}
+              autoPlay
+              playsInline
+              muted
+              className="w-full h-auto max-h-96"
+              style={{
+                minHeight: '200px',
+                objectFit: 'cover'
+              }}
+            />
+            <canvas ref={canvasRef} className="hidden" />
+            
+            {/* Overlay pour cadrer */}
+            <div className="absolute inset-0 pointer-events-none">
+              <div className="absolute inset-4 border-2 border-white border-dashed rounded-lg opacity-80"></div>
+              <div className="absolute bottom-4 left-4 text-white text-sm bg-black bg-opacity-75 px-3 py-2 rounded">
+                Cadrez votre pièce d'identité dans le rectangle
+              </div>
+              <div className="absolute top-4 right-4 text-white text-sm bg-black bg-opacity-75 px-3 py-2 rounded">
+                {photoType === 'recto' ? 'RECTO' : 'VERSO'}
+              </div>
+            </div>
+          </div>
+          
+          <div className="flex justify-center space-x-4">
+            <Button 
+              variant="outline" 
+              onClick={onClose}
+              className="flex-1 max-w-32"
+            >
+              <X className="h-4 w-4 mr-2" />
+              Annuler
+            </Button>
+            
+            <Button 
+              onClick={onCapture} 
+              disabled={isCapturing}
+              className="bg-green-600 hover:bg-green-700 text-white flex-1 max-w-40"
+            >
+              <Camera className="h-4 w-4 mr-2" />
+              {isCapturing ? 'Capture...' : 'Capturer'}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}