From 404b51e7498efde503f665c5a378d5c4a589c8f8 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Thu, 10 Jul 2025 00:04:58 +0000
Subject: [PATCH] Improve the appearance and structure of the new sales
 registration page

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
---
 client/src/components/NewSaleForm.tsx | 40 +++++++++---------
 client/src/index.css                  | 60 ++++++++++++++++++++++++---
 2 files changed, 74 insertions(+), 26 deletions(-)

diff --git a/client/src/components/NewSaleForm.tsx b/client/src/components/NewSaleForm.tsx
index 5ef60b3..1f67224 100644
--- a/client/src/components/NewSaleForm.tsx
+++ b/client/src/components/NewSaleForm.tsx
@@ -166,7 +166,7 @@ export default function NewSaleForm() {
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
             {/* 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-icon-container">
                   <User className="h-5 w-5" />
@@ -204,9 +204,9 @@ export default function NewSaleForm() {
             </div>
 
             {/* 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="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" />
                 </div>
                 <span className="truncate">Informations Produit</span>
@@ -223,7 +223,7 @@ export default function NewSaleForm() {
                         form.setValue('categorie', ''); // Reset category when article changes
                       }}>
                         <FormControl>
-                          <SelectTrigger>
+                          <SelectTrigger className="modern-select-trigger">
                             <SelectValue placeholder="Sélectionner un type" />
                           </SelectTrigger>
                         </FormControl>
@@ -247,7 +247,7 @@ export default function NewSaleForm() {
                       <FormLabel>Catégorie réglementaire <span className="text-destructive">*</span></FormLabel>
                       <Select value={field.value} onValueChange={field.onChange} disabled={!typeArticle}>
                         <FormControl>
-                          <SelectTrigger>
+                          <SelectTrigger className="modern-select-trigger">
                             <SelectValue placeholder="Sélectionner une catégorie" />
                           </SelectTrigger>
                         </FormControl>
@@ -270,7 +270,7 @@ export default function NewSaleForm() {
                     <FormItem>
                       <FormLabel>Quantité <span className="text-destructive">*</span></FormLabel>
                       <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>
                       <FormMessage />
                     </FormItem>
@@ -283,7 +283,7 @@ export default function NewSaleForm() {
                     <FormItem>
                       <FormLabel>Gencode (EAN13) <span className="text-destructive">*</span></FormLabel>
                       <FormControl>
-                        <Input placeholder="Code EAN13 à 13 chiffres" {...field} />
+                        <Input placeholder="Code EAN13 à 13 chiffres" className="modern-input" {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -306,9 +306,9 @@ export default function NewSaleForm() {
             </div>
 
             {/* 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="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" />
                 </div>
                 <span className="truncate">Informations Client</span>
@@ -321,7 +321,7 @@ export default function NewSaleForm() {
                     <FormItem>
                       <FormLabel>Nom de famille <span className="text-destructive">*</span></FormLabel>
                       <FormControl>
-                        <Input placeholder="Nom de famille" {...field} />
+                        <Input placeholder="Nom de famille" className="modern-input" {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -334,7 +334,7 @@ export default function NewSaleForm() {
                     <FormItem>
                       <FormLabel>Prénom <span className="text-destructive">*</span></FormLabel>
                       <FormControl>
-                        <Input placeholder="Prénom" {...field} />
+                        <Input placeholder="Prénom" className="modern-input" {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -347,7 +347,7 @@ export default function NewSaleForm() {
                     <FormItem>
                       <FormLabel>Date de naissance <span className="text-destructive">*</span></FormLabel>
                       <FormControl>
-                        <Input type="date" {...field} />
+                        <Input type="date" className="modern-input" {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -360,7 +360,7 @@ export default function NewSaleForm() {
                     <FormItem>
                       <FormLabel>Lieu de naissance <span className="text-destructive">*</span></FormLabel>
                       <FormControl>
-                        <Input placeholder="Ville de naissance" {...field} />
+                        <Input placeholder="Ville de naissance" className="modern-input" {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -374,7 +374,7 @@ export default function NewSaleForm() {
                       <FormLabel>Mode de paiement <span className="text-destructive">*</span></FormLabel>
                       <Select value={field.value} onValueChange={field.onChange}>
                         <FormControl>
-                          <SelectTrigger>
+                          <SelectTrigger className="modern-select-trigger">
                             <SelectValue placeholder="Sélectionner le mode de paiement" />
                           </SelectTrigger>
                         </FormControl>
@@ -394,9 +394,9 @@ export default function NewSaleForm() {
             </div>
 
             {/* 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="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">
                     <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>
@@ -412,7 +412,7 @@ export default function NewSaleForm() {
                       <FormLabel>Type de pièce d'identité <span className="text-destructive">*</span></FormLabel>
                       <Select value={field.value} onValueChange={field.onChange}>
                         <FormControl>
-                          <SelectTrigger>
+                          <SelectTrigger className="modern-select-trigger">
                             <SelectValue placeholder="Sélectionner le type" />
                           </SelectTrigger>
                         </FormControl>
@@ -435,7 +435,7 @@ export default function NewSaleForm() {
                     <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} />
+                        <Input placeholder="Numéro de la pièce d'identité" className="modern-input" {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -448,7 +448,7 @@ export default function NewSaleForm() {
                     <FormItem>
                       <FormLabel>Autorité de délivrance <span className="text-destructive">*</span></FormLabel>
                       <FormControl>
-                        <Input placeholder="Préfecture, Mairie, etc." {...field} />
+                        <Input placeholder="Préfecture, Mairie, etc." className="modern-input" {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -461,7 +461,7 @@ export default function NewSaleForm() {
                     <FormItem>
                       <FormLabel>Date de délivrance <span className="text-destructive">*</span></FormLabel>
                       <FormControl>
-                        <Input type="date" {...field} />
+                        <Input type="date" className="modern-input" {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
diff --git a/client/src/index.css b/client/src/index.css
index 231da71..d9caf04 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -109,25 +109,31 @@
 }
 
 .modern-input {
-  border: 1px solid hsl(var(--border));
+  border: 2px solid hsl(var(--border));
   background: hsl(var(--background));
   color: hsl(var(--foreground));
-  padding: 8px 12px;
+  padding: 10px 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 {
   outline: none;
   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 {
-  border: 1px solid hsl(var(--border));
+  border: 2px solid hsl(var(--border));
   background: hsl(var(--card));
   padding: 24px;
   margin-bottom: 24px;
+  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.05);
 }
 
 .modern-section-header {
@@ -136,7 +142,9 @@
   gap: 12px;
   margin-bottom: 24px;
   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 {
@@ -147,6 +155,46 @@
   display: flex;
   align-items: 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 */