Improve photo capture and product entry in sales form

Refactors CameraModal and NewSaleForm components to streamline photo capture and product entry using React hooks and react-hook-form.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: c7151ec8-4e6b-4fcf-b628-65b094ac18fd
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/0715008c-7244-40f4-befc-26c014852236/c7151ec8-4e6b-4fcf-b628-65b094ac18fd/URbRU29

client/src/components/CameraModal.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { Camera, X } from 'lucide-react';
@@ -7,78 +7,113 @@ import { PhotoType } from '@/types/sale';
 interface CameraModalProps {
   isOpen: boolean;
   photoType: PhotoType | null;
-  videoRef: React.RefObject<HTMLVideoElement>;
-  canvasRef: React.RefObject<HTMLCanvasElement>;
-  isCapturing: boolean;
   onClose: () => void;
-  onCapture: () => void;
+  onPhotoTaken: (photoData: string) => void;
 }
 
 export default function CameraModal({
   isOpen,
   photoType,
-  videoRef,
-  canvasRef,
-  isCapturing,
   onClose,
-  onCapture
+  onPhotoTaken
 }: CameraModalProps) {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [stream, setStream] = useState<MediaStream | null>(null);
+  const [isCapturing, setIsCapturing] = useState(false);
+
   useEffect(() => {
-    if (isOpen && videoRef.current) {
+    if (isOpen) {
-      const video = videoRef.current;
+      startCamera();
-      console.log('CameraModal useEffect - video element ready');
+    } else {
-      
+      stopCamera();
-      const handleLoadedMetadata = () => {
-        console.log('CameraModal: Video metadata loaded, dimensions:', video.videoWidth, 'x', video.videoHeight);
-      };
-      
-      const handleCanPlay = () => {
-        console.log('CameraModal: Video can play, readyState:', video.readyState);
-      };
-      
-      const handleError = (error: Event) => {
-        console.error('CameraModal: Video error event:', error);
-      };
-      
-      const handlePlay = () => {
-        console.log('CameraModal: Video started playing');
-      };
-      
-      video.addEventListener('loadedmetadata', handleLoadedMetadata);
-      video.addEventListener('canplay', handleCanPlay);
-      video.addEventListener('error', handleError);
-      video.addEventListener('play', handlePlay);
-      
-      // Forcer le play avec gestion d'erreur
-      const startPlayback = async () => {
-        try {
-          await video.play();
-          console.log('CameraModal: Video play() successful');
-        } catch (playError) {
-          console.error('CameraModal: Video play() failed:', playError);
-        }
-      };
-      
-      startPlayback();
-      
-      return () => {
-        video.removeEventListener('loadedmetadata', handleLoadedMetadata);
-        video.removeEventListener('canplay', handleCanPlay);
-        video.removeEventListener('error', handleError);
-        video.removeEventListener('play', handlePlay);
-      };
     }
-  }, [isOpen, videoRef]);
+
+    return () => {
+      stopCamera();
+    };
+  }, [isOpen]);
+
+  const startCamera = async () => {
+    try {
+      const mediaStream = await navigator.mediaDevices.getUserMedia({
+        video: {
+          facingMode: 'environment',
+          width: { ideal: 1280 },
+          height: { ideal: 720 }
+        }
+      });
+
+      if (videoRef.current) {
+        videoRef.current.srcObject = mediaStream;
+        setStream(mediaStream);
+      }
+    } catch (error) {
+      console.error('Error accessing camera:', error);
+      // Fallback: try without specific constraints
+      try {
+        const mediaStream = await navigator.mediaDevices.getUserMedia({
+          video: true
+        });
+
+        if (videoRef.current) {
+          videoRef.current.srcObject = mediaStream;
+          setStream(mediaStream);
+        }
+      } catch (fallbackError) {
+        console.error('Fallback camera access failed:', fallbackError);
+      }
+    }
+  };
+
+  const stopCamera = () => {
+    if (stream) {
+      stream.getTracks().forEach(track => track.stop());
+      setStream(null);
+    }
+  };
+
+  const capturePhoto = () => {
+    if (!videoRef.current || !canvasRef.current) return;
+
+    setIsCapturing(true);
+    const video = videoRef.current;
+    const canvas = canvasRef.current;
+    const context = canvas.getContext('2d');
+
+    if (!context) return;
+
+    // Set canvas dimensions to match video
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+
+    // Draw video frame to canvas
+    context.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+    // Convert to data URL
+    const photoData = canvas.toDataURL('image/jpeg', 0.8);
+    
+    onPhotoTaken(photoData);
+    setIsCapturing(false);
+  };
+
+  const handleClose = () => {
+    stopCamera();
+    onClose();
+  };
 
   return (
-    <Dialog open={isOpen} onOpenChange={onClose}>
+    <Dialog open={isOpen} onOpenChange={handleClose}>
       <DialogContent className="max-w-lg w-full mx-auto">
         <DialogHeader>
-          <DialogTitle>
+          <DialogTitle className="flex items-center justify-between">
-            Photo {photoType ? photoType.charAt(0).toUpperCase() + photoType.slice(1) : ''}
+            <span>Capturer photo {photoType}</span>
+            <Button variant="ghost" size="sm" onClick={handleClose}>
+              <X className="h-4 w-4" />
+            </Button>
           </DialogTitle>
         </DialogHeader>
-        
+
         <div className="space-y-4">
           <div className="relative">
             <video
@@ -86,48 +121,29 @@ export default function CameraModal({
               autoPlay
               playsInline
               muted
-              className="w-full max-w-full h-auto camera-preview rounded-lg border bg-black"
+              className="w-full h-64 object-cover bg-black rounded"
-              style={{ 
+            />
-                aspectRatio: '16/9',
+            <canvas
-                objectFit: 'cover',
+              ref={canvasRef}
-                maxHeight: '400px',
+              className="hidden"
-                minHeight: '200px'
-              }}
-              onLoadedMetadata={() => console.log('CameraModal: Video metadata loaded')}
-              onCanPlay={() => console.log('CameraModal: Video can play')}
-              onPlay={() => console.log('CameraModal: Video playing')}
-              onError={(e) => console.error('CameraModal: Video error:', e)}
             />
-            <canvas ref={canvasRef} className="hidden" />
-            
-            {/* Overlay pour aider à cadrer la pièce d'identité */}
-            <div className="absolute inset-0 pointer-events-none">
-              <div className="absolute inset-4 border-2 border-white border-dashed rounded-lg opacity-70"></div>
-              <div className="absolute bottom-2 left-2 text-white text-sm bg-black bg-opacity-70 px-2 py-1 rounded">
-                Cadrez la pièce d'identité dans le rectangle
-              </div>
-              <div className="absolute top-2 right-2 text-white text-xs bg-black bg-opacity-70 px-2 py-1 rounded">
-                {photoType === 'recto' ? 'RECTO' : 'VERSO'}
-              </div>
-            </div>
           </div>
-          
+
-          <div className="flex justify-between space-x-3">
+          <div className="flex justify-center gap-4">
-            <Button variant="outline" onClick={onClose} className="flex-1">
+            <Button
-              <X className="h-4 w-4 mr-2" />
+              onClick={capturePhoto}
-              Fermer
-            </Button>
-            <Button 
-              onClick={onCapture} 
               disabled={isCapturing}
-              className="bg-green-600 hover:bg-green-700 text-white flex-1"
+              className="flex items-center gap-2"
             >
-              <Camera className="h-4 w-4 mr-2" />
+              <Camera className="h-4 w-4" />
               {isCapturing ? 'Capture...' : 'Prendre la photo'}
             </Button>
+            <Button variant="outline" onClick={handleClose}>
+              Annuler
+            </Button>
           </div>
         </div>
       </DialogContent>
     </Dialog>
   );
-}
+}

client/src/components/NewSaleForm.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useForm } from 'react-hook-form';
+import { useForm, useFieldArray } from 'react-hook-form';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -9,11 +9,10 @@ import { Alert, AlertDescription } from '@/components/ui/alert';
 import { useToast } from '@/hooks/use-toast';
 import { useAuth } from '@/hooks/useAuth';
 import { useStoreContext } from '@/hooks/useStoreContext';
-import { useSimpleCamera } from '@/hooks/useSimpleCamera';
 
 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, Upload, Trash2 } from 'lucide-react';
+import { Package, User, Users, Save, Calendar, BadgeCheck, Info, Camera, Upload, Trash2, Plus, X } from 'lucide-react';
 import CameraModal from '@/components/CameraModal';
 import type { PhotoType } from '@/types/sale';
 
@@ -49,22 +48,14 @@ export default function NewSaleForm() {
   const { selectedStoreId } = useStoreContext();
   const [isSubmitting, setIsSubmitting] = useState(false);
   
-  // Camera functionality
+  // Camera state
-  const {
+  const [isCameraOpen, setIsCameraOpen] = useState(false);
-    isOpen: isCameraOpen,
+  const [currentPhotoType, setCurrentPhotoType] = useState<PhotoType | null>(null);
-    currentPhotoType,
-    isCapturing,
-    videoRef,
-    canvasRef,
-    startCamera,
-    capturePhoto,
-    stopCamera
-  } = useSimpleCamera();
 
   const form = useForm<FormData>({
     defaultValues: {
       vendeur: '',
-      products: [{ typeArticle: '', categorie: '', quantite: '', gencode: '' }],
+      products: [{ typeArticle: '', categorie: '', quantite: '1', gencode: '' }],
       nom: '',
       prenom: '',
       dateNaissance: '',
@@ -80,20 +71,10 @@ export default function NewSaleForm() {
     }
   });
 
-  // Gestion des produits multiples
+  const { fields, append, remove } = useFieldArray({
-  const products = form.watch('products');
+    control: form.control,
-  
+    name: "products"
-  const addProduct = () => {
+  });
-    const currentProducts = form.getValues('products');
-    form.setValue('products', [...currentProducts, { typeArticle: '', categorie: '', quantite: '', gencode: '' }]);
-  };
-
-  const removeProduct = (index: number) => {
-    const currentProducts = form.getValues('products');
-    if (currentProducts.length > 1) {
-      form.setValue('products', currentProducts.filter((_, i) => i !== index));
-    }
-  };
 
   const createSaleMutation = useMutation({
     mutationFn: async (saleData: any) => {
@@ -117,7 +98,7 @@ export default function NewSaleForm() {
       });
       form.reset({
         vendeur: '',
-        products: [{ typeArticle: '', categorie: '', quantite: '', gencode: '' }],
+        products: [{ typeArticle: '', categorie: '', quantite: '1', gencode: '' }],
         nom: '',
         prenom: '',
         dateNaissance: '',
@@ -198,84 +179,28 @@ export default function NewSaleForm() {
   };
 
   // Photo capture functions
-  const handlePhotoCapture = async (photoType: PhotoType) => {
+  const handlePhotoCapture = (photoType: PhotoType) => {
-    console.log('=== PHOTO CAPTURE REQUESTED ===');
+    setCurrentPhotoType(photoType);
-    console.log('Photo type:', photoType);
+    setIsCameraOpen(true);
-    
-    // Vérifications préliminaires
-    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
-      toast({
-        title: "Navigateur non compatible",
-        description: "Votre navigateur ne supporte pas la capture photo. Utilisez Chrome, Firefox ou Safari récent.",
-        variant: "destructive",
-      });
-      return;
-    }
-
-    // Vérifier si nous sommes en HTTPS (requis par certains navigateurs)
-    if (location.protocol !== 'https:' && location.hostname !== 'localhost') {
-      toast({
-        title: "Connexion sécurisée requise",
-        description: "L'accès à la caméra nécessite une connexion HTTPS.",
-        variant: "destructive",
-      });
-      return;
-    }
-
-    try {
-      console.log('Attempting to start camera...');
-      
-      // Afficher toast de démarrage
-      toast({
-        title: "Démarrage de la caméra",
-        description: "Préparation de la caméra en cours...",
-      });
-      
-      // Démarrer la caméra simple
-      await startCamera(photoType);
-      console.log('Simple camera started successfully');
-      
-    } catch (error) {
-      console.error('Camera start failed:', error);
-      toast({
-        title: "Erreur d'accès à la caméra",
-        description: error instanceof Error ? error.message : "Impossible d'accéder à la caméra",
-        variant: "destructive",
-      });
-    }
   };
 
-  const handleCapture = async () => {
+  const handlePhotoTaken = (photoData: string) => {
-    if (!currentPhotoType) return;
+    if (currentPhotoType === 'recto') {
-    
+      form.setValue('photoRecto', photoData);
-    try {
+    } else if (currentPhotoType === 'verso') {
-      console.log('Attempting to capture photo...');
+      form.setValue('photoVerso', photoData);
-      const photoData = await capturePhoto();
+    } else if (currentPhotoType === 'ticket') {
-      console.log('Photo captured successfully, data length:', photoData.length);
+      form.setValue('photoTicket', photoData);
-      
-      if (currentPhotoType === 'recto') {
-        form.setValue('photoRecto', photoData);
-      } else if (currentPhotoType === 'verso') {
-        form.setValue('photoVerso', photoData);
-      } else if (currentPhotoType === 'ticket') {
-        form.setValue('photoTicket', photoData);
-      }
-      
-      toast({
-        title: "Photo capturée",
-        description: `Photo ${currentPhotoType} enregistrée avec succès`,
-        variant: "success",
-      });
-      
-      stopCamera();
-    } catch (error) {
-      console.error('Photo capture error:', error);
-      toast({
-        title: "Erreur de capture",
-        description: error instanceof Error ? error.message : "Erreur lors de la capture",
-        variant: "destructive",
-      });
     }
+    
+    toast({
+      title: "Photo capturée",
+      description: `Photo ${currentPhotoType} enregistrée avec succès`,
+      variant: "success",
+    });
+    
+    setIsCameraOpen(false);
+    setCurrentPhotoType(null);
   };
 
   const handleRemovePhoto = (photoType: PhotoType) => {
@@ -328,236 +253,222 @@ export default function NewSaleForm() {
       toast({
         title: "Photo ajoutée",
         description: `Photo ${photoType} ajoutée avec succès`,
+        variant: "success",
       });
     };
     reader.readAsDataURL(file);
   };
 
-  // Camera test function
-  const handleCameraTest = async () => {
-    toast({
-      title: "Test en cours...",
-      description: "Vérification de l'accès aux caméras",
-    });
-    
-    const results = await runCameraTest();
-    
-    let message = `Test de caméra terminé:\n`;
-    message += `✓ Navigateur compatible: ${results.hasMediaDevices ? 'Oui' : 'Non'}\n`;
-    message += `✓ getUserMedia disponible: ${results.hasGetUserMedia ? 'Oui' : 'Non'}\n`;
-    message += `✓ Caméras détectées: ${results.videoDevicesCount}\n`;
-    message += `✓ Permissions: ${results.permissions}\n`;
-    
-    if (results.error) {
-      message += `❌ Erreur: ${results.error}`;
-    } else {
-      message += `✅ Caméra fonctionnelle`;
-    }
-    
-    toast({
-      title: results.error ? "Test échoué" : "Test réussi",
-      description: message,
-      variant: results.error ? "destructive" : "default",
-    });
-  };
-
   return (
-    <div className="elegant-card animate-slide-in">
+    <div className="space-y-6">
-      <div className="p-6">
+      <div className="modern-card">
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
             {/* Section Vendeur */}
-            <div className="section-vendor">
+            <div className="modern-section" style={{ backgroundColor: '#f0f9ff' }}>
-              <div className="section-header">
+              <div className="flex items-center gap-2 mb-4">
-                <User className="h-5 w-5" />
+                <User className="h-5 w-5 text-primary" />
-                <span>Informations Vendeur</span>
+                <h3 className="text-lg font-semibold text-gray-900">Informations Vendeur</h3>
-              </div>
-              <div className="grid grid-cols-1 gap-4">
-                <FormField
-                  control={form.control}
-                  name="vendeur"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Vendeur <span className="text-destructive">*</span></FormLabel>
-                      <FormControl>
-                        <Input placeholder="Nom du vendeur" className="modern-input" {...field} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
               </div>
+              
+              <FormField
+                control={form.control}
+                name="vendeur"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Nom du vendeur *</FormLabel>
+                    <FormControl>
+                      <Input {...field} className="modern-input" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
             </div>
 
-            {/* Section Produit */}
+            {/* Section Produits */}
-            <div className="section-product">
+            <div className="modern-section" style={{ backgroundColor: '#f0fdf4' }}>
-              <div className="section-header">
+              <div className="flex items-center justify-between mb-4">
-                <Package className="h-5 w-5" />
+                <div className="flex items-center gap-2">
-                <span>Informations Produit</span>
+                  <Package className="h-5 w-5 text-primary" />
-              </div>
+                  <h3 className="text-lg font-semibold text-gray-900">Produits</h3>
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                </div>
-                <FormField
+                <Button
-                  control={form.control}
+                  type="button"
-                  name="products.0.typeArticle"
+                  onClick={() => append({ typeArticle: '', categorie: '', quantite: '1', gencode: '' })}
-                  render={({ field }) => (
+                  variant="outline"
-                    <FormItem>
+                  size="sm"
-                      <FormLabel>Type d'article <span className="text-destructive">*</span></FormLabel>
+                >
-                      <Select value={field.value} onValueChange={(value) => {
+                  <Plus className="h-4 w-4 mr-2" />
-                        field.onChange(value);
+                  Ajouter un produit
-                        form.setValue('products.0.categorie', '');
+                </Button>
-                      }}>
-                        <FormControl>
-                          <SelectTrigger className="modern-input">
-                            <SelectValue placeholder="Sélectionner un type" />
-                          </SelectTrigger>
-                        </FormControl>
-                        <SelectContent>
-                          {Object.keys(ARTICLE_CATEGORY_MAPPING).map((type) => (
-                            <SelectItem key={type} value={type}>
-                              {type}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={form.control}
-                  name="products.0.categorie"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Catégorie réglementaire <span className="text-destructive">*</span></FormLabel>
-                      <Select value={field.value} onValueChange={field.onChange} disabled={!form.watch('products')?.[0]?.typeArticle}>
-                        <FormControl>
-                          <SelectTrigger className="modern-input">
-                            <SelectValue placeholder="Sélectionner une catégorie" />
-                          </SelectTrigger>
-                        </FormControl>
-                        <SelectContent>
-                          {(form.watch('products')?.[0]?.typeArticle ? ARTICLE_CATEGORY_MAPPING[form.watch('products')?.[0]?.typeArticle as keyof typeof ARTICLE_CATEGORY_MAPPING] || [] : []).map((category) => (
-                            <SelectItem key={category} value={category}>
-                              {category}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={form.control}
-                  name="products.0.quantite"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Quantité <span className="text-destructive">*</span></FormLabel>
-                      <FormControl>
-                        <Input type="number" min="1" placeholder="Entrez la quantité" className="modern-input" {...field} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={form.control}
-                  name="products.0.gencode"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Gencode (EAN13) <span className="text-destructive">*</span></FormLabel>
-                      <FormControl>
-                        <Input placeholder="Code EAN13 à 13 chiffres" className="modern-input" {...field} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
               </div>
 
-              <Alert className="mt-4 border-blue-200 bg-blue-50">
+              <div className="space-y-4">
-                <Info className="h-4 w-4 text-blue-600" />
+                {fields.map((field, index) => (
-                <AlertDescription className="text-blue-800">
+                  <div key={field.id} className="grid grid-cols-1 md:grid-cols-5 gap-4 p-4 border rounded-lg bg-white">
-                  <strong>Information réglementaire :</strong> F1 = vente interdite aux mineurs de moins de 12 ans • F2/F3 = artifices puissants réservés aux majeurs, vente encadrée
+                    <FormField
-                </AlertDescription>
+                      control={form.control}
-              </Alert>
+                      name={`products.${index}.typeArticle`}
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Type d'article *</FormLabel>
+                          <FormControl>
+                            <Input {...field} className="modern-input" />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name={`products.${index}.categorie`}
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Catégorie *</FormLabel>
+                          <Select onValueChange={field.onChange} value={field.value}>
+                            <FormControl>
+                              <SelectTrigger className="modern-input">
+                                <SelectValue placeholder="Choisir" />
+                              </SelectTrigger>
+                            </FormControl>
+                            <SelectContent>
+                              <SelectItem value="F2">F2</SelectItem>
+                              <SelectItem value="F3">F3</SelectItem>
+                            </SelectContent>
+                          </Select>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name={`products.${index}.quantite`}
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Quantité *</FormLabel>
+                          <FormControl>
+                            <Input {...field} type="number" min="1" className="modern-input" />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name={`products.${index}.gencode`}
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Gencode EAN13 *</FormLabel>
+                          <FormControl>
+                            <Input {...field} className="modern-input" />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <div className="flex items-end">
+                      {fields.length > 1 && (
+                        <Button
+                          type="button"
+                          onClick={() => remove(index)}
+                          variant="outline"
+                          size="sm"
+                          className="text-red-600 hover:text-red-700"
+                        >
+                          <X className="h-4 w-4" />
+                        </Button>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
             </div>
 
             {/* Section Client */}
-            <div className="section-client">
+            <div className="modern-section" style={{ backgroundColor: '#fefce8' }}>
-              <div className="section-header">
+              <div className="flex items-center gap-2 mb-4">
-                <Users className="h-5 w-5" />
+                <Users className="h-5 w-5 text-primary" />
-                <span>Informations Client</span>
+                <h3 className="text-lg font-semibold text-gray-900">Informations Client</h3>
               </div>
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <FormField
                   control={form.control}
                   name="nom"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Nom de famille <span className="text-destructive">*</span></FormLabel>
+                      <FormLabel>Nom *</FormLabel>
                       <FormControl>
-                        <Input placeholder="Nom de famille" className="modern-input" {...field} />
+                        <Input {...field} className="modern-input" />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
                   )}
                 />
+
                 <FormField
                   control={form.control}
                   name="prenom"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Prénom <span className="text-destructive">*</span></FormLabel>
+                      <FormLabel>Prénom *</FormLabel>
                       <FormControl>
-                        <Input placeholder="Prénom" className="modern-input" {...field} />
+                        <Input {...field} className="modern-input" />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
                   )}
                 />
+
                 <FormField
                   control={form.control}
                   name="dateNaissance"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Date de naissance <span className="text-destructive">*</span></FormLabel>
+                      <FormLabel>Date de naissance *</FormLabel>
                       <FormControl>
-                        <Input type="date" className="modern-input" {...field} />
+                        <Input {...field} type="date" className="modern-input" />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
                   )}
                 />
+
                 <FormField
                   control={form.control}
                   name="lieuNaissance"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Lieu de naissance <span className="text-destructive">*</span></FormLabel>
+                      <FormLabel>Lieu de naissance *</FormLabel>
                       <FormControl>
-                        <Input placeholder="Ville de naissance" className="modern-input" {...field} />
+                        <Input {...field} className="modern-input" />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
                   )}
                 />
+
                 <FormField
                   control={form.control}
                   name="modePaiement"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Mode de paiement <span className="text-destructive">*</span></FormLabel>
+                      <FormLabel>Mode de paiement *</FormLabel>
-                      <Select value={field.value} onValueChange={field.onChange}>
+                      <Select onValueChange={field.onChange} value={field.value}>
                         <FormControl>
                           <SelectTrigger className="modern-input">
-                            <SelectValue placeholder="Sélectionner le mode de paiement" />
+                            <SelectValue />
                           </SelectTrigger>
                         </FormControl>
                         <SelectContent>
                           {PAYMENT_METHODS.map((method) => (
-                            <SelectItem key={method.value} value={method.value}>
+                            <SelectItem key={method} value={method}>
-                              {method.label}
+                              {method}
                             </SelectItem>
                           ))}
                         </SelectContent>
@@ -570,28 +481,29 @@ export default function NewSaleForm() {
             </div>
 
             {/* Section Identité */}
-            <div className="section-identity">
+            <div className="modern-section" style={{ backgroundColor: '#fdf2f8' }}>
-              <div className="section-header">
+              <div className="flex items-center gap-2 mb-4">
-                <BadgeCheck className="h-5 w-5" />
+                <BadgeCheck className="h-5 w-5 text-primary" />
-                <span>Pièce d'Identité</span>
+                <h3 className="text-lg font-semibold text-gray-900">Pièce d'Identité</h3>
               </div>
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <FormField
                   control={form.control}
                   name="typeIdentite"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Type de pièce d'identité <span className="text-destructive">*</span></FormLabel>
+                      <FormLabel>Type de pièce d'identité *</FormLabel>
-                      <Select value={field.value} onValueChange={field.onChange}>
+                      <Select onValueChange={field.onChange} value={field.value}>
                         <FormControl>
                           <SelectTrigger className="modern-input">
-                            <SelectValue placeholder="Sélectionner le type" />
+                            <SelectValue placeholder="Choisir un type" />
                           </SelectTrigger>
                         </FormControl>
                         <SelectContent>
                           {IDENTITY_TYPES.map((type) => (
-                            <SelectItem key={type.value} value={type.value}>
+                            <SelectItem key={type} value={type}>
-                              {type.label}
+                              {type}
                             </SelectItem>
                           ))}
                         </SelectContent>
@@ -600,19 +512,21 @@ export default function NewSaleForm() {
                     </FormItem>
                   )}
                 />
+
                 <FormField
                   control={form.control}
                   name="numeroIdentite"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Numéro de pièce d'identité <span className="text-destructive">*</span></FormLabel>
+                      <FormLabel>Numéro de pièce d'identité *</FormLabel>
                       <FormControl>
-                        <Input placeholder="Numéro de la pièce" className="modern-input" {...field} />
+                        <Input {...field} className="modern-input" />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
                   )}
                 />
+
                 <FormField
                   control={form.control}
                   name="autoriteDelivrance"
@@ -620,34 +534,35 @@ export default function NewSaleForm() {
                     <FormItem>
                       <FormLabel>Autorité de délivrance</FormLabel>
                       <FormControl>
-                        <Input placeholder="Autorité ayant délivré la pièce (optionnel)" className="modern-input" {...field} />
+                        <Input {...field} className="modern-input" />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
                   )}
                 />
+
                 <FormField
                   control={form.control}
                   name="dateDelivrance"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Date de délivrance <span className="text-destructive">*</span></FormLabel>
+                      <FormLabel>Date de délivrance *</FormLabel>
                       <FormControl>
-                        <Input type="date" className="modern-input" {...field} />
+                        <Input {...field} type="date" className="modern-input" />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
                   )}
                 />
               </div>
-              
+
-              {/* Section Photos */}
+              {/* Photos pièce d'identité */}
               <div className="mt-6 space-y-4">
                 <div>
                   <h4 className="text-sm font-medium text-gray-700">Photos de la pièce d'identité</h4>
                 </div>
                 
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                   {/* Photo Recto */}
                   <div className="space-y-2">
                     <label className="text-sm font-medium text-gray-600">Photo Recto</label>
@@ -656,7 +571,7 @@ export default function NewSaleForm() {
                         <img 
                           src={form.watch('photoRecto')} 
                           alt="Photo recto" 
-                          className="w-full h-32 object-cover rounded border"
+                          className="w-full h-32 object-cover border"
                         />
                         <Button
                           type="button"
@@ -707,7 +622,7 @@ export default function NewSaleForm() {
                         <img 
                           src={form.watch('photoVerso')} 
                           alt="Photo verso" 
-                          className="w-full h-32 object-cover rounded border"
+                          className="w-full h-32 object-cover border"
                         />
                         <Button
                           type="button"
@@ -765,7 +680,7 @@ export default function NewSaleForm() {
                       <img 
                         src={form.watch('photoTicket')} 
                         alt="Photo ticket" 
-                        className="w-full h-32 object-cover rounded border"
+                        className="w-full h-32 object-cover border"
                       />
                       <Button
                         type="button"
@@ -836,11 +751,11 @@ export default function NewSaleForm() {
       <CameraModal
         isOpen={isCameraOpen}
         photoType={currentPhotoType}
-        videoRef={videoRef}
+        onClose={() => {
-        canvasRef={canvasRef}
+          setIsCameraOpen(false);
-        isCapturing={isCapturing}
+          setCurrentPhotoType(null);
-        onClose={stopCamera}
+        }}
-        onCapture={handleCapture}
+        onPhotoTaken={handlePhotoTaken}
       />
     </div>
   );