mirror of
https://github.com/R0m1k3/Regisflow.git
synced 2026-10-11 17:29:48 +02:00
michaelschal
e52aaa289b
Adjusts the styling of the dashboard and new sale form for better icon visibility. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 91318273-c764-4fd4-be04-bdc12c38af32 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/0715008c-7244-40f4-befc-26c014852236/b77c9129-16e4-4c03-a447-09edfb2aa967.jpg
529 lines
22 KiB
TypeScript
529 lines
22 KiB
TypeScript
import { useState } from 'react';
|
|
import { useForm } from 'react-hook-form';
|
|
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
|
|
import { Alert, AlertDescription } from '@/components/ui/alert';
|
|
import { useToast } from '@/hooks/use-toast';
|
|
import { useAuth } from '@/hooks/useAuth';
|
|
import { useStoreContext } from '@/hooks/useStoreContext';
|
|
import { apiRequest } from '@/lib/queryClient';
|
|
import { validateRequiredFields, validateEAN13, ARTICLE_CATEGORY_MAPPING, IDENTITY_TYPES, PAYMENT_METHODS } from '@/lib/validation';
|
|
import { Package, User, Users, Save, X } from 'lucide-react';
|
|
|
|
interface FormData {
|
|
vendeur: string;
|
|
dateVente: string;
|
|
typeArticle: string;
|
|
categorie: string;
|
|
quantite: string;
|
|
gencode: string;
|
|
nom: string;
|
|
prenom: string;
|
|
dateNaissance: string;
|
|
lieuNaissance: string;
|
|
modePaiement: string;
|
|
typeIdentite: string;
|
|
numeroIdentite: string;
|
|
autoriteDelivrance: string;
|
|
dateDelivrance: string;
|
|
}
|
|
|
|
export default function NewSaleForm() {
|
|
const { toast } = useToast();
|
|
const queryClient = useQueryClient();
|
|
const { user } = useAuth();
|
|
const { selectedStoreId } = useStoreContext();
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
|
|
const form = useForm<FormData>({
|
|
defaultValues: {
|
|
vendeur: '',
|
|
dateVente: new Date().toISOString().split('T')[0],
|
|
typeArticle: '',
|
|
categorie: '',
|
|
quantite: '',
|
|
gencode: '',
|
|
nom: '',
|
|
prenom: '',
|
|
dateNaissance: '',
|
|
lieuNaissance: '',
|
|
modePaiement: 'Espèce',
|
|
typeIdentite: '',
|
|
numeroIdentite: '',
|
|
autoriteDelivrance: '',
|
|
dateDelivrance: '',
|
|
}
|
|
});
|
|
|
|
const typeArticle = form.watch('typeArticle');
|
|
const availableCategories = typeArticle ? ARTICLE_CATEGORY_MAPPING[typeArticle as keyof typeof ARTICLE_CATEGORY_MAPPING] || [] : [];
|
|
|
|
const createSaleMutation = useMutation({
|
|
mutationFn: async (saleData: any) => {
|
|
const dataToSend = {
|
|
...saleData,
|
|
// Include storeId for admin users
|
|
...(user?.role === 'admin' && selectedStoreId && { storeId: selectedStoreId })
|
|
};
|
|
|
|
const response = await apiRequest('/api/sales', {
|
|
method: 'POST',
|
|
body: JSON.stringify(dataToSend),
|
|
});
|
|
return response.json();
|
|
},
|
|
onSuccess: () => {
|
|
// Invalidate all sales queries to refresh the history
|
|
queryClient.invalidateQueries({ queryKey: ['/api/sales'], exact: false });
|
|
toast({
|
|
title: "Vente enregistrée",
|
|
description: "La vente a été enregistrée avec succès",
|
|
});
|
|
form.reset({
|
|
vendeur: '',
|
|
dateVente: new Date().toISOString().split('T')[0],
|
|
typeArticle: '',
|
|
categorie: '',
|
|
quantite: '',
|
|
gencode: '',
|
|
nom: '',
|
|
prenom: '',
|
|
dateNaissance: '',
|
|
lieuNaissance: '',
|
|
modePaiement: 'Espèce',
|
|
typeIdentite: '',
|
|
numeroIdentite: '',
|
|
autoriteDelivrance: '',
|
|
dateDelivrance: '',
|
|
});
|
|
},
|
|
onError: (error: any) => {
|
|
toast({
|
|
title: "Erreur",
|
|
description: error.message || "Erreur lors de l'enregistrement de la vente",
|
|
variant: "destructive",
|
|
});
|
|
},
|
|
});
|
|
|
|
const onSubmit = async (data: FormData) => {
|
|
try {
|
|
setIsSubmitting(true);
|
|
|
|
// Validate required fields
|
|
const missingFields = validateRequiredFields(data);
|
|
if (missingFields.length > 0) {
|
|
toast({
|
|
title: "Champs manquants",
|
|
description: `Veuillez remplir: ${missingFields.join(', ')}`,
|
|
variant: "destructive",
|
|
});
|
|
return;
|
|
}
|
|
|
|
// Validate EAN13
|
|
if (!validateEAN13(data.gencode)) {
|
|
toast({
|
|
title: "Code EAN13 invalide",
|
|
description: "Le gencode doit être un code EAN13 valide à 13 chiffres",
|
|
variant: "destructive",
|
|
});
|
|
return;
|
|
}
|
|
|
|
const saleData = {
|
|
vendeur: data.vendeur,
|
|
dateVente: data.dateVente,
|
|
typeArticle: data.typeArticle,
|
|
categorie: data.categorie as 'F2' | 'F3',
|
|
quantite: parseInt(data.quantite),
|
|
gencode: data.gencode,
|
|
nom: data.nom,
|
|
prenom: data.prenom,
|
|
dateNaissance: data.dateNaissance,
|
|
lieuNaissance: data.lieuNaissance || undefined,
|
|
typeIdentite: data.typeIdentite,
|
|
numeroIdentite: data.numeroIdentite,
|
|
autoriteDelivrance: data.autoriteDelivrance,
|
|
dateDelivrance: data.dateDelivrance,
|
|
};
|
|
|
|
await createSaleMutation.mutateAsync(saleData);
|
|
} catch (error) {
|
|
console.error('Sale creation error:', error);
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Card className="modern-card-elevated">
|
|
<CardHeader className="mobile-card-header">
|
|
<CardTitle className="flex items-center gap-2 sm:gap-3 responsive-title">
|
|
<div className="p-1.5 sm:p-2 bg-gradient-to-br from-green-500 to-emerald-600 rounded-lg sm:rounded-xl">
|
|
<Package className="h-5 w-5 sm:h-6 sm:w-6 text-white" />
|
|
</div>
|
|
<span className="truncate">Nouvelle Vente</span>
|
|
</CardTitle>
|
|
<p className="text-muted-foreground mt-2 responsive-body">
|
|
Enregistrement d'une vente de feux d'artifice
|
|
</p>
|
|
</CardHeader>
|
|
<CardContent className="mobile-card-content">
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className="mobile-form-responsive">
|
|
{/* Seller Information */}
|
|
<div className="modern-card bg-muted bg-opacity-30 mobile-form-section rounded-xl border-l-4 border-primary">
|
|
<h3 className="mobile-header-responsive font-semibold text-foreground mb-4 sm:mb-6 flex items-center gap-2 sm:gap-3">
|
|
<div className="p-2 sm:p-3 bg-primary bg-opacity-20 rounded-lg flex items-center justify-center">
|
|
<User className="h-5 w-5 sm:h-6 sm:w-6 text-primary" />
|
|
</div>
|
|
<span className="truncate">Informations Vendeur</span>
|
|
</h3>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 mobile-gap-responsive">
|
|
<FormField
|
|
control={form.control}
|
|
name="vendeur"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Vendeur <span className="text-destructive">*</span></FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="Nom du vendeur" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="dateVente"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Date de vente</FormLabel>
|
|
<FormControl>
|
|
<Input type="date" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Product Information */}
|
|
<div className="modern-card bg-blue-50 bg-opacity-50 mobile-form-section rounded-xl border-l-4 border-blue-500">
|
|
<h3 className="mobile-header-responsive font-semibold text-foreground mb-4 sm:mb-6 flex items-center gap-2 sm:gap-3">
|
|
<div className="p-1.5 sm:p-2 bg-blue-500 bg-opacity-10 rounded-lg">
|
|
<Package className="h-4 w-4 sm:h-5 sm:w-5 text-blue-600" />
|
|
</div>
|
|
<span className="truncate">Informations Produit</span>
|
|
</h3>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 mobile-gap-responsive">
|
|
<FormField
|
|
control={form.control}
|
|
name="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('categorie', ''); // Reset category when article changes
|
|
}}>
|
|
<FormControl>
|
|
<SelectTrigger>
|
|
<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="categorie"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Catégorie réglementaire <span className="text-destructive">*</span></FormLabel>
|
|
<Select value={field.value} onValueChange={field.onChange} disabled={!typeArticle}>
|
|
<FormControl>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Sélectionner une catégorie" />
|
|
</SelectTrigger>
|
|
</FormControl>
|
|
<SelectContent>
|
|
{availableCategories.map((category) => (
|
|
<SelectItem key={category} value={category}>
|
|
{category}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="quantite"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Quantité <span className="text-destructive">*</span></FormLabel>
|
|
<FormControl>
|
|
<Input type="number" min="1" placeholder="Entrez la quantité" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="gencode"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Gencode (EAN13) <span className="text-destructive">*</span></FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="Code EAN13 à 13 chiffres" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<Alert className="mt-4">
|
|
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<AlertDescription>
|
|
<strong>Information réglementaire :</strong>
|
|
<ul className="mt-1 space-y-1 text-sm">
|
|
<li>• <strong>F1</strong> : petits artifices (clac-doigts, mini-fontaines), accessibles dès 12 ans.</li>
|
|
<li>• <strong>F2, F3</strong> : artifices plus puissants, vente et utilisation réservées aux majeurs.</li>
|
|
</ul>
|
|
</AlertDescription>
|
|
</Alert>
|
|
</div>
|
|
|
|
{/* Customer Information */}
|
|
<div className="modern-card bg-emerald-50/50 mobile-form-section rounded-xl border-l-4 border-emerald-500">
|
|
<h3 className="mobile-header-responsive font-semibold text-foreground mb-4 sm:mb-6 flex items-center gap-2 sm:gap-3">
|
|
<div className="p-1.5 sm:p-2 bg-emerald-500/10 rounded-lg">
|
|
<Users className="h-4 w-4 sm:h-5 sm:w-5 text-emerald-600" />
|
|
</div>
|
|
<span className="truncate">Informations Client</span>
|
|
</h3>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 mobile-gap-responsive">
|
|
<FormField
|
|
control={form.control}
|
|
name="nom"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Nom de famille <span className="text-destructive">*</span></FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="Nom de famille" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="prenom"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Prénom <span className="text-destructive">*</span></FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="Prénom" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="dateNaissance"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Date de naissance <span className="text-destructive">*</span></FormLabel>
|
|
<FormControl>
|
|
<Input type="date" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="lieuNaissance"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Lieu de naissance</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="Ville de naissance" {...field} />
|
|
</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}>
|
|
<FormControl>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Sélectionner le mode de paiement" />
|
|
</SelectTrigger>
|
|
</FormControl>
|
|
<SelectContent>
|
|
{PAYMENT_METHODS.map((method) => (
|
|
<SelectItem key={method.value} value={method.value}>
|
|
{method.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Identity Information */}
|
|
<div className="modern-card bg-amber-50/50 mobile-form-section rounded-xl border-l-4 border-amber-500">
|
|
<h3 className="mobile-header-responsive font-semibold text-foreground mb-4 sm:mb-6 flex items-center gap-2 sm:gap-3">
|
|
<div className="p-1.5 sm:p-2 bg-amber-500/10 rounded-lg">
|
|
<svg className="h-4 w-4 sm:h-5 sm:w-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" />
|
|
</svg>
|
|
</div>
|
|
<span className="truncate">Pièce d'Identité</span>
|
|
</h3>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 mobile-gap-responsive">
|
|
<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}>
|
|
<FormControl>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Sélectionner le type" />
|
|
</SelectTrigger>
|
|
</FormControl>
|
|
<SelectContent>
|
|
{IDENTITY_TYPES.map((type) => (
|
|
<SelectItem key={type.value} value={type.value}>
|
|
{type.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="numeroIdentite"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Numéro de pièce d'identité <span className="text-destructive">*</span></FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="Numéro de la pièce d'identité" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="autoriteDelivrance"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Autorité de délivrance <span className="text-destructive">*</span></FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="Préfecture, Mairie, etc." {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="dateDelivrance"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Date de délivrance <span className="text-destructive">*</span></FormLabel>
|
|
<FormControl>
|
|
<Input type="date" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Form Actions */}
|
|
<div className="flex flex-col sm:flex-row justify-end gap-3 sm:gap-4 pt-6 sm:pt-8 mt-6 sm:mt-8 border-t border-border/50">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="lg"
|
|
className="border-2 hover:bg-muted smooth-transition touch-friendly-button order-2 sm:order-1"
|
|
onClick={() => {
|
|
form.reset({
|
|
vendeur: '',
|
|
dateVente: new Date().toISOString().split('T')[0],
|
|
typeArticle: '',
|
|
categorie: '',
|
|
quantite: '',
|
|
gencode: '',
|
|
nom: '',
|
|
prenom: '',
|
|
dateNaissance: '',
|
|
lieuNaissance: '',
|
|
modePaiement: 'Espèce',
|
|
typeIdentite: '',
|
|
numeroIdentite: '',
|
|
autoriteDelivrance: '',
|
|
dateDelivrance: '',
|
|
});
|
|
}}>
|
|
<X className="h-5 w-5 mr-2" />
|
|
Réinitialiser
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
size="lg"
|
|
disabled={isSubmitting || createSaleMutation.isPending}
|
|
className="bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white border-0 shadow-lg hover:shadow-xl hover:scale-[1.02] smooth-transition touch-friendly-button order-1 sm:order-2"
|
|
>
|
|
<Save className="h-5 w-5 mr-2" />
|
|
<span className="hidden sm:inline">{isSubmitting || createSaleMutation.isPending ? 'Enregistrement...' : 'Enregistrer la Vente'}</span>
|
|
<span className="sm:hidden">{isSubmitting || createSaleMutation.isPending ? 'Enregistrement...' : 'Enregistrer'}</span>
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
} |