Michael/Regisflow
1
0 Fork 0
mirror of https://github.com/R0m1k3/Regisflow.git synced 2026-10-23 15:18:17 +02:00
Code Issues Packages Projects Releases Wiki Activity

Improve the appearance and structure of the new sales registration page

Browse Source 
Enhance the UI of NewSaleForm.tsx and index.css with improved styling and section demarcation.

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/e4b7aaf3-8a81-4637-b767-87169fd5dba1.jpg
This commit is contained in:
michaelschal committed 2025-07-10 00:04:58 +00:00
1 parent 1f34f22d0d
commit 404b51e749
2 files changed
+74 -26
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/src/components/NewSaleForm.tsx
+20 -20
View File
@@ -166,7 +166,7 @@ export default function NewSaleForm() {
<Form {...form}> <Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6"> <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
{/* Seller Information */} {/* Seller Information */}
<div className="modern-section border-l-4 border-l-primary"> <div className="modern-section modern-section-vendor">
<div className="modern-section-header"> <div className="modern-section-header">
<div className="modern-icon-container"> <div className="modern-icon-container">
<User className="h-5 w-5" /> <User className="h-5 w-5" />
@@ -204,9 +204,9 @@ export default function NewSaleForm() {
</div> </div>
{/* Product Information */} {/* Product Information */}
<div className="modern-section border-l-4 border-l-blue-500 bg-blue-50"> <div className="modern-section modern-section-product">
<div className="modern-section-header"> <div className="modern-section-header">
<div className="w-10 h-10 bg-blue-500 text-white flex items-center justify-center"> <div className="w-10 h-10 bg-blue-500 text-white flex items-center justify-center border-2 border-blue-500 shadow-md">
<Package className="h-5 w-5" /> <Package className="h-5 w-5" />
</div> </div>
<span className="truncate">Informations Produit</span> <span className="truncate">Informations Produit</span>
@@ -223,7 +223,7 @@ export default function NewSaleForm() {
form.setValue('categorie', ''); // Reset category when article changes form.setValue('categorie', ''); // Reset category when article changes
}}> }}>
<FormControl> <FormControl>
<SelectTrigger> <SelectTrigger className="modern-select-trigger">
<SelectValue placeholder="Sélectionner un type" /> <SelectValue placeholder="Sélectionner un type" />
</SelectTrigger> </SelectTrigger>
</FormControl> </FormControl>
@@ -247,7 +247,7 @@ export default function NewSaleForm() {
<FormLabel>Catégorie réglementaire <span className="text-destructive">*</span></FormLabel> <FormLabel>Catégorie réglementaire <span className="text-destructive">*</span></FormLabel>
<Select value={field.value} onValueChange={field.onChange} disabled={!typeArticle}> <Select value={field.value} onValueChange={field.onChange} disabled={!typeArticle}>
<FormControl> <FormControl>
<SelectTrigger> <SelectTrigger className="modern-select-trigger">
<SelectValue placeholder="Sélectionner une catégorie" /> <SelectValue placeholder="Sélectionner une catégorie" />
</SelectTrigger> </SelectTrigger>
</FormControl> </FormControl>
@@ -270,7 +270,7 @@ export default function NewSaleForm() {
<FormItem> <FormItem>
<FormLabel>Quantité <span className="text-destructive">*</span></FormLabel> <FormLabel>Quantité <span className="text-destructive">*</span></FormLabel>
<FormControl> <FormControl>
<Input type="number" min="1" placeholder="Entrez la quantité" {...field} /> <Input type="number" min="1" placeholder="Entrez la quantité" className="modern-input" {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
@@ -283,7 +283,7 @@ export default function NewSaleForm() {
<FormItem> <FormItem>
<FormLabel>Gencode (EAN13) <span className="text-destructive">*</span></FormLabel> <FormLabel>Gencode (EAN13) <span className="text-destructive">*</span></FormLabel>
<FormControl> <FormControl>
<Input placeholder="Code EAN13 à 13 chiffres" {...field} /> <Input placeholder="Code EAN13 à 13 chiffres" className="modern-input" {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
@@ -306,9 +306,9 @@ export default function NewSaleForm() {
</div> </div>
{/* Customer Information */} {/* Customer Information */}
<div className="modern-section border-l-4 border-l-emerald-500 bg-emerald-50"> <div className="modern-section modern-section-customer">
<div className="modern-section-header"> <div className="modern-section-header">
<div className="w-10 h-10 bg-emerald-500 text-white flex items-center justify-center"> <div className="w-10 h-10 bg-emerald-500 text-white flex items-center justify-center border-2 border-emerald-500 shadow-md">
<Users className="h-5 w-5" /> <Users className="h-5 w-5" />
</div> </div>
<span className="truncate">Informations Client</span> <span className="truncate">Informations Client</span>
@@ -321,7 +321,7 @@ export default function NewSaleForm() {
<FormItem> <FormItem>
<FormLabel>Nom de famille <span className="text-destructive">*</span></FormLabel> <FormLabel>Nom de famille <span className="text-destructive">*</span></FormLabel>
<FormControl> <FormControl>
<Input placeholder="Nom de famille" {...field} /> <Input placeholder="Nom de famille" className="modern-input" {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
@@ -334,7 +334,7 @@ export default function NewSaleForm() {
<FormItem> <FormItem>
<FormLabel>Prénom <span className="text-destructive">*</span></FormLabel> <FormLabel>Prénom <span className="text-destructive">*</span></FormLabel>
<FormControl> <FormControl>
<Input placeholder="Prénom" {...field} /> <Input placeholder="Prénom" className="modern-input" {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
@@ -347,7 +347,7 @@ export default function NewSaleForm() {
<FormItem> <FormItem>
<FormLabel>Date de naissance <span className="text-destructive">*</span></FormLabel> <FormLabel>Date de naissance <span className="text-destructive">*</span></FormLabel>
<FormControl> <FormControl>
<Input type="date" {...field} /> <Input type="date" className="modern-input" {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
@@ -360,7 +360,7 @@ export default function NewSaleForm() {
<FormItem> <FormItem>
<FormLabel>Lieu de naissance <span className="text-destructive">*</span></FormLabel> <FormLabel>Lieu de naissance <span className="text-destructive">*</span></FormLabel>
<FormControl> <FormControl>
<Input placeholder="Ville de naissance" {...field} /> <Input placeholder="Ville de naissance" className="modern-input" {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
@@ -374,7 +374,7 @@ export default function NewSaleForm() {
<FormLabel>Mode de paiement <span className="text-destructive">*</span></FormLabel> <FormLabel>Mode de paiement <span className="text-destructive">*</span></FormLabel>
<Select value={field.value} onValueChange={field.onChange}> <Select value={field.value} onValueChange={field.onChange}>
<FormControl> <FormControl>
<SelectTrigger> <SelectTrigger className="modern-select-trigger">
<SelectValue placeholder="Sélectionner le mode de paiement" /> <SelectValue placeholder="Sélectionner le mode de paiement" />
</SelectTrigger> </SelectTrigger>
</FormControl> </FormControl>
@@ -394,9 +394,9 @@ export default function NewSaleForm() {
</div> </div>
{/* Identity Information */} {/* Identity Information */}
<div className="modern-section border-l-4 border-l-amber-500 bg-amber-50"> <div className="modern-section modern-section-identity">
<div className="modern-section-header"> <div className="modern-section-header">
<div className="w-10 h-10 bg-amber-500 text-white flex items-center justify-center"> <div className="w-10 h-10 bg-amber-500 text-white flex items-center justify-center border-2 border-amber-500 shadow-md">
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="h-5 w-5" 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" /> <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> </svg>
@@ -412,7 +412,7 @@ export default function NewSaleForm() {
<FormLabel>Type de pièce d'identité <span className="text-destructive">*</span></FormLabel> <FormLabel>Type de pièce d'identité <span className="text-destructive">*</span></FormLabel>
<Select value={field.value} onValueChange={field.onChange}> <Select value={field.value} onValueChange={field.onChange}>
<FormControl> <FormControl>
<SelectTrigger> <SelectTrigger className="modern-select-trigger">
<SelectValue placeholder="Sélectionner le type" /> <SelectValue placeholder="Sélectionner le type" />
</SelectTrigger> </SelectTrigger>
</FormControl> </FormControl>
@@ -435,7 +435,7 @@ export default function NewSaleForm() {
<FormItem> <FormItem>
<FormLabel>Numéro de pièce d'identité <span className="text-destructive">*</span></FormLabel> <FormLabel>Numéro de pièce d'identité <span className="text-destructive">*</span></FormLabel>
<FormControl> <FormControl>
<Input placeholder="Numéro de la pièce d'identité" {...field} /> <Input placeholder="Numéro de la pièce d'identité" className="modern-input" {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
@@ -448,7 +448,7 @@ export default function NewSaleForm() {
<FormItem> <FormItem>
<FormLabel>Autorité de délivrance <span className="text-destructive">*</span></FormLabel> <FormLabel>Autorité de délivrance <span className="text-destructive">*</span></FormLabel>
<FormControl> <FormControl>
<Input placeholder="Préfecture, Mairie, etc." {...field} /> <Input placeholder="Préfecture, Mairie, etc." className="modern-input" {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
@@ -461,7 +461,7 @@ export default function NewSaleForm() {
<FormItem> <FormItem>
<FormLabel>Date de délivrance <span className="text-destructive">*</span></FormLabel> <FormLabel>Date de délivrance <span className="text-destructive">*</span></FormLabel>
<FormControl> <FormControl>
<Input type="date" {...field} /> <Input type="date" className="modern-input" {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
client/src/index.css
+54 -6
View File
@@ -109,25 +109,31 @@
} }
.modern-input { .modern-input {
border: 1px solid hsl(var(--border)); border: 2px solid hsl(var(--border));
background: hsl(var(--background)); background: hsl(var(--background));
color: hsl(var(--foreground)); color: hsl(var(--foreground));
padding: 8px 12px; padding: 10px 14px;
font-size: 14px; font-size: 14px;
transition: border-color 0.2s ease; transition: all 0.2s ease;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
} }
.modern-input:focus { .modern-input:focus {
outline: none; outline: none;
border-color: hsl(var(--primary)); border-color: hsl(var(--primary));
box-shadow: 0 0 0 1px hsl(var(--primary)); box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
}
.modern-input:hover {
border-color: hsl(var(--primary) / 0.5);
} }
.modern-section { .modern-section {
border: 1px solid hsl(var(--border)); border: 2px solid hsl(var(--border));
background: hsl(var(--card)); background: hsl(var(--card));
padding: 24px; padding: 24px;
margin-bottom: 24px; margin-bottom: 24px;
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.05);
} }
.modern-section-header { .modern-section-header {
@@ -136,7 +142,9 @@
gap: 12px; gap: 12px;
margin-bottom: 24px; margin-bottom: 24px;
padding-bottom: 12px; padding-bottom: 12px;
border-bottom: 1px solid hsl(var(--border)); border-bottom: 2px solid hsl(var(--border));
font-weight: 600;
font-size: 16px;
} }
.modern-icon-container { .modern-icon-container {
@@ -147,6 +155,46 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 2px solid hsl(var(--primary));
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.1);
}
/* Section-specific styles */
.modern-section-vendor {
border-left: 4px solid hsl(var(--primary));
background: hsl(var(--muted) / 0.3);
}
.modern-section-product {
border-left: 4px solid hsl(210, 100%, 50%);
background: hsl(210, 100%, 98%);
}
.modern-section-customer {
border-left: 4px solid hsl(142, 69%, 45%);
background: hsl(142, 69%, 98%);
}
.modern-section-identity {
border-left: 4px solid hsl(38, 92%, 50%);
background: hsl(38, 92%, 98%);
}
.modern-select-trigger {
border: 2px solid hsl(var(--border));
background: hsl(var(--background));
padding: 10px 14px;
transition: all 0.2s ease;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.modern-select-trigger:hover {
border-color: hsl(var(--primary) / 0.5);
}
.modern-select-trigger:focus {
border-color: hsl(var(--primary));
box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
} }
/* Enhanced keyframes for mobile animations */ /* Enhanced keyframes for mobile animations */