mirror of
https://github.com/R0m1k3/Regisflow.git
synced 2026-10-11 17:29:48 +02:00
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
This commit is contained in:
michaelschal committed
1 parent
90e7193682
commit
d1f3fced74
2 files changed
+311
-380
No files matched your search
@@ -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) {
|
||||
const video = videoRef.current;
|
||||
console.log('CameraModal useEffect - video element ready');
|
||||
|
||||
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);
|
||||
};
|
||||
if (isOpen) {
|
||||
startCamera();
|
||||
} else {
|
||||
stopCamera();
|
||||
}
|
||||
}, [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>
|
||||
Photo {photoType ? photoType.charAt(0).toUpperCase() + photoType.slice(1) : ''}
|
||||
<DialogTitle className="flex items-center justify-between">
|
||||
<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"
|
||||
style={{
|
||||
aspectRatio: '16/9',
|
||||
objectFit: 'cover',
|
||||
maxHeight: '400px',
|
||||
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)}
|
||||
className="w-full h-64 object-cover bg-black rounded"
|
||||
/>
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="hidden"
|
||||
/>
|
||||
<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">
|
||||
<Button variant="outline" onClick={onClose} className="flex-1">
|
||||
<X className="h-4 w-4 mr-2" />
|
||||
Fermer
|
||||
</Button>
|
||||
<Button
|
||||
onClick={onCapture}
|
||||
|
||||
<div className="flex justify-center gap-4">
|
||||
<Button
|
||||
onClick={capturePhoto}
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
const {
|
||||
isOpen: isCameraOpen,
|
||||
currentPhotoType,
|
||||
isCapturing,
|
||||
videoRef,
|
||||
canvasRef,
|
||||
startCamera,
|
||||
capturePhoto,
|
||||
stopCamera
|
||||
} = useSimpleCamera();
|
||||
// Camera state
|
||||
const [isCameraOpen, setIsCameraOpen] = useState(false);
|
||||
const [currentPhotoType, setCurrentPhotoType] = useState<PhotoType | null>(null);
|
||||
|
||||
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 products = form.watch('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 { fields, append, remove } = useFieldArray({
|
||||
control: form.control,
|
||||
name: "products"
|
||||
});
|
||||
|
||||
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) => {
|
||||
console.log('=== PHOTO CAPTURE REQUESTED ===');
|
||||
console.log('Photo type:', photoType);
|
||||
|
||||
// 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 handlePhotoCapture = (photoType: PhotoType) => {
|
||||
setCurrentPhotoType(photoType);
|
||||
setIsCameraOpen(true);
|
||||
};
|
||||
|
||||
const handleCapture = async () => {
|
||||
if (!currentPhotoType) return;
|
||||
|
||||
try {
|
||||
console.log('Attempting to capture photo...');
|
||||
const photoData = await capturePhoto();
|
||||
console.log('Photo captured successfully, data length:', photoData.length);
|
||||
|
||||
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",
|
||||
});
|
||||
const handlePhotoTaken = (photoData: string) => {
|
||||
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",
|
||||
});
|
||||
|
||||
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="p-6">
|
||||
<div className="space-y-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="section-header">
|
||||
<User className="h-5 w-5" />
|
||||
<span>Informations Vendeur</span>
|
||||
</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 className="modern-section" style={{ backgroundColor: '#f0f9ff' }}>
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<User className="h-5 w-5 text-primary" />
|
||||
<h3 className="text-lg font-semibold text-gray-900">Informations Vendeur</h3>
|
||||
</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 */}
|
||||
<div className="section-product">
|
||||
<div className="section-header">
|
||||
<Package className="h-5 w-5" />
|
||||
<span>Informations Produit</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="products.0.typeArticle"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Type d'article <span className="text-destructive">*</span></FormLabel>
|
||||
<Select value={field.value} onValueChange={(value) => {
|
||||
field.onChange(value);
|
||||
form.setValue('products.0.categorie', '');
|
||||
}}>
|
||||
<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>
|
||||
)}
|
||||
/>
|
||||
{/* Section Produits */}
|
||||
<div className="modern-section" style={{ backgroundColor: '#f0fdf4' }}>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Package className="h-5 w-5 text-primary" />
|
||||
<h3 className="text-lg font-semibold text-gray-900">Produits</h3>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => append({ typeArticle: '', categorie: '', quantite: '1', gencode: '' })}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Ajouter un produit
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Alert className="mt-4 border-blue-200 bg-blue-50">
|
||||
<Info className="h-4 w-4 text-blue-600" />
|
||||
<AlertDescription className="text-blue-800">
|
||||
<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
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
<div className="space-y-4">
|
||||
{fields.map((field, index) => (
|
||||
<div key={field.id} className="grid grid-cols-1 md:grid-cols-5 gap-4 p-4 border rounded-lg bg-white">
|
||||
<FormField
|
||||
control={form.control}
|
||||
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="section-header">
|
||||
<Users className="h-5 w-5" />
|
||||
<span>Informations Client</span>
|
||||
<div className="modern-section" style={{ backgroundColor: '#fefce8' }}>
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Users className="h-5 w-5 text-primary" />
|
||||
<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>
|
||||
<Select value={field.value} onValueChange={field.onChange}>
|
||||
<FormLabel>Mode de paiement *</FormLabel>
|
||||
<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}>
|
||||
{method.label}
|
||||
<SelectItem key={method} value={method}>
|
||||
{method}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
@@ -570,28 +481,29 @@ export default function NewSaleForm() {
|
||||
</div>
|
||||
|
||||
{/* Section Identité */}
|
||||
<div className="section-identity">
|
||||
<div className="section-header">
|
||||
<BadgeCheck className="h-5 w-5" />
|
||||
<span>Pièce d'Identité</span>
|
||||
<div className="modern-section" style={{ backgroundColor: '#fdf2f8' }}>
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<BadgeCheck className="h-5 w-5 text-primary" />
|
||||
<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>
|
||||
<Select value={field.value} onValueChange={field.onChange}>
|
||||
<FormLabel>Type de pièce d'identité *</FormLabel>
|
||||
<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}>
|
||||
{type.label}
|
||||
<SelectItem key={type} value={type}>
|
||||
{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}
|
||||
canvasRef={canvasRef}
|
||||
isCapturing={isCapturing}
|
||||
onClose={stopCamera}
|
||||
onCapture={handleCapture}
|
||||
onClose={() => {
|
||||
setIsCameraOpen(false);
|
||||
setCurrentPhotoType(null);
|
||||
}}
|
||||
onPhotoTaken={handlePhotoTaken}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user