From 9a901b574ff843aa282141aecc226b4dd199bee5 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Wed, 9 Jul 2025 19:38:37 +0000
Subject: [PATCH] Enhance the user interface to provide a more modern and
 intuitive experience

Update UI components for improved aesthetics and user experience, including new color palettes and styling.

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/75b569d4-1b21-43d8-b5b1-0816d59edebd.jpg
---
 client/src/components/NewSaleForm.tsx |  72 +++++---
 client/src/index.css                  | 246 +++++++++++++++++++++-----
 client/src/pages/Dashboard.tsx        | 178 ++++++++++++-------
 client/src/pages/Login.tsx            |  91 +++++++---
 4 files changed, 418 insertions(+), 169 deletions(-)

diff --git a/client/src/components/NewSaleForm.tsx b/client/src/components/NewSaleForm.tsx
index bdf4285..008259b 100644
--- a/client/src/components/NewSaleForm.tsx
+++ b/client/src/components/NewSaleForm.tsx
@@ -158,13 +158,15 @@ export default function NewSaleForm() {
   };
 
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <Package className="h-5 w-5" />
+    <Card className="modern-card-elevated">
+      <CardHeader className="pb-6">
+        <CardTitle className="flex items-center gap-3 text-2xl">
+          <div className="p-2 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl">
+            <Package className="h-6 w-6 text-white" />
+          </div>
           Nouvelle Vente
         </CardTitle>
-        <p className="text-sm text-muted-foreground">
+        <p className="text-muted-foreground mt-2">
           Enregistrement d'une vente de feux d'artifice
         </p>
       </CardHeader>
@@ -172,9 +174,11 @@ export default function NewSaleForm() {
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
             {/* Seller Information */}
-            <div className="border-l-4 border-primary pl-4">
-              <h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center gap-2">
-                <User className="h-5 w-5 text-primary" />
+            <div className="modern-card bg-muted/30 p-6 rounded-xl border-l-4 border-primary">
+              <h3 className="text-xl font-semibold text-foreground mb-6 flex items-center gap-3">
+                <div className="p-2 bg-primary/10 rounded-lg">
+                  <User className="h-5 w-5 text-primary" />
+                </div>
                 Informations Vendeur
               </h3>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -208,9 +212,11 @@ export default function NewSaleForm() {
             </div>
 
             {/* Product Information */}
-            <div className="border-l-4 border-info pl-4">
-              <h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center gap-2">
-                <Package className="h-5 w-5 text-info" />
+            <div className="modern-card bg-blue-50/50 p-6 rounded-xl border-l-4 border-blue-500">
+              <h3 className="text-xl font-semibold text-foreground mb-6 flex items-center gap-3">
+                <div className="p-2 bg-blue-500/10 rounded-lg">
+                  <Package className="h-5 w-5 text-blue-600" />
+                </div>
                 Informations Produit
               </h3>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -308,9 +314,11 @@ export default function NewSaleForm() {
             </div>
 
             {/* Customer Information */}
-            <div className="border-l-4 border-success pl-4">
-              <h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center gap-2">
-                <Users className="h-5 w-5 text-success" />
+            <div className="modern-card bg-emerald-50/50 p-6 rounded-xl border-l-4 border-emerald-500">
+              <h3 className="text-xl font-semibold text-foreground mb-6 flex items-center gap-3">
+                <div className="p-2 bg-emerald-500/10 rounded-lg">
+                  <Users className="h-5 w-5 text-emerald-600" />
+                </div>
                 Informations Client
               </h3>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -370,11 +378,13 @@ export default function NewSaleForm() {
             </div>
 
             {/* Identity Information */}
-            <div className="border-l-4 border-warning pl-4">
-              <h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center gap-2">
-                <svg className="h-5 w-5 text-warning" 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 className="modern-card bg-amber-50/50 p-6 rounded-xl border-l-4 border-amber-500">
+              <h3 className="text-xl font-semibold text-foreground mb-6 flex items-center gap-3">
+                <div className="p-2 bg-amber-500/10 rounded-lg">
+                  <svg className="h-5 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>
                 Pièce d'Identité
               </h3>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -444,9 +454,14 @@ export default function NewSaleForm() {
               </div>
             </div>
 
-            {/* Form Actions - Always visible */}
-            <div className="flex justify-end space-x-4 pt-6 border-t border-gray-200 bg-white">
-              <Button type="button" variant="outline" onClick={() => {
+            {/* Form Actions */}
+            <div className="flex justify-end space-x-4 pt-8 mt-8 border-t border-border/50">
+              <Button 
+                type="button" 
+                variant="outline" 
+                size="lg"
+                className="border-2 hover:bg-muted smooth-transition"
+                onClick={() => {
                 form.reset({
                   vendeur: '',
                   dateVente: new Date().toISOString().split('T')[0],
@@ -464,11 +479,16 @@ export default function NewSaleForm() {
                   dateDelivrance: '',
                 });
               }}>
-                <X className="h-4 w-4 mr-2" />
-                Annuler
+                <X className="h-5 w-5 mr-2" />
+                Réinitialiser
               </Button>
-              <Button type="submit" disabled={isSubmitting || createSaleMutation.isPending} className="bg-green-600 hover:bg-green-700 text-white">
-                <Save className="h-4 w-4 mr-2" />
+              <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"
+              >
+                <Save className="h-5 w-5 mr-2" />
                 {isSubmitting || createSaleMutation.isPending ? 'Enregistrement...' : 'Enregistrer la Vente'}
               </Button>
             </div>
diff --git a/client/src/index.css b/client/src/index.css
index 9850c5d..fb4ebfd 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -3,53 +3,83 @@
 @tailwind utilities;
 
 :root {
+  /* Modern neutral palette */
   --background: hsl(0, 0%, 100%);
-  --foreground: hsl(20, 14.3%, 4.1%);
-  --muted: hsl(60, 4.8%, 95.9%);
-  --muted-foreground: hsl(25, 5.3%, 44.7%);
+  --foreground: hsl(222, 15%, 11%);
+  --muted: hsl(220, 13%, 96%);
+  --muted-foreground: hsl(220, 9%, 46%);
   --popover: hsl(0, 0%, 100%);
-  --popover-foreground: hsl(20, 14.3%, 4.1%);
+  --popover-foreground: hsl(222, 15%, 11%);
   --card: hsl(0, 0%, 100%);
-  --card-foreground: hsl(20, 14.3%, 4.1%);
-  --border: hsl(20, 5.9%, 90%);
-  --input: hsl(20, 5.9%, 90%);
-  --primary: hsl(217, 91%, 59%);
-  --primary-foreground: hsl(211, 100%, 99%);
-  --secondary: hsl(60, 4.8%, 95.9%);
-  --secondary-foreground: hsl(24, 9.8%, 10%);
-  --accent: hsl(60, 4.8%, 95.9%);
-  --accent-foreground: hsl(24, 9.8%, 10%);
-  --destructive: hsl(0, 84.2%, 60.2%);
-  --destructive-foreground: hsl(60, 9.1%, 97.8%);
-  --success: hsl(142, 76%, 36%);
-  --success-foreground: hsl(60, 9.1%, 97.8%);
-  --info: hsl(217, 91%, 59%);
-  --info-foreground: hsl(60, 9.1%, 97.8%);
-  --ring: hsl(20, 14.3%, 4.1%);
-  --radius: 0.5rem;
+  --card-foreground: hsl(222, 15%, 11%);
+  --border: hsl(220, 13%, 91%);
+  --input: hsl(220, 13%, 91%);
+  
+  /* Modern blue-purple gradient palette */
+  --primary: hsl(232, 97%, 59%);
+  --primary-foreground: hsl(0, 0%, 100%);
+  --secondary: hsl(220, 14%, 96%);
+  --secondary-foreground: hsl(222, 15%, 11%);
+  --accent: hsl(262, 100%, 97%);
+  --accent-foreground: hsl(222, 15%, 11%);
+  
+  /* Status colors */
+  --destructive: hsl(0, 85%, 60%);
+  --destructive-foreground: hsl(0, 0%, 98%);
+  --success: hsl(142, 71%, 45%);
+  --success-foreground: hsl(0, 0%, 98%);
+  --warning: hsl(38, 92%, 50%);
+  --warning-foreground: hsl(0, 0%, 98%);
+  --info: hsl(210, 100%, 56%);
+  --info-foreground: hsl(0, 0%, 98%);
+  
+  /* Interactive elements */
+  --ring: hsl(232, 97%, 59%);
+  --radius: 0.75rem;
+  
+  /* Gradient colors */
+  --gradient-from: hsl(232, 97%, 59%);
+  --gradient-to: hsl(262, 100%, 59%);
+  --gradient-accent: hsl(282, 100%, 59%);
 }
 
 .dark {
-  --background: hsl(240, 10%, 3.9%);
-  --foreground: hsl(0, 0%, 98%);
-  --muted: hsl(240, 3.7%, 15.9%);
-  --muted-foreground: hsl(240, 5%, 64.9%);
-  --popover: hsl(240, 10%, 3.9%);
-  --popover-foreground: hsl(0, 0%, 98%);
-  --card: hsl(240, 10%, 3.9%);
-  --card-foreground: hsl(0, 0%, 98%);
-  --border: hsl(240, 3.7%, 15.9%);
-  --input: hsl(240, 3.7%, 15.9%);
-  --primary: hsl(217, 91%, 59%);
-  --primary-foreground: hsl(211, 100%, 99%);
-  --secondary: hsl(240, 3.7%, 15.9%);
-  --secondary-foreground: hsl(0, 0%, 98%);
-  --accent: hsl(240, 3.7%, 15.9%);
-  --accent-foreground: hsl(0, 0%, 98%);
-  --destructive: hsl(0, 62.8%, 30.6%);
+  /* Dark neutral palette */
+  --background: hsl(222, 20%, 4%);
+  --foreground: hsl(210, 40%, 95%);
+  --muted: hsl(222, 15%, 8%);
+  --muted-foreground: hsl(215, 20%, 65%);
+  --popover: hsl(222, 15%, 6%);
+  --popover-foreground: hsl(210, 40%, 95%);
+  --card: hsl(222, 15%, 6%);
+  --card-foreground: hsl(210, 40%, 95%);
+  --border: hsl(215, 28%, 17%);
+  --input: hsl(215, 28%, 17%);
+  
+  /* Dark mode blue-purple palette */
+  --primary: hsl(232, 97%, 65%);
+  --primary-foreground: hsl(222, 20%, 4%);
+  --secondary: hsl(215, 28%, 17%);
+  --secondary-foreground: hsl(210, 40%, 95%);
+  --accent: hsl(215, 28%, 17%);
+  --accent-foreground: hsl(210, 40%, 95%);
+  
+  /* Dark status colors */
+  --destructive: hsl(0, 85%, 65%);
   --destructive-foreground: hsl(0, 0%, 98%);
-  --ring: hsl(240, 4.9%, 83.9%);
-  --radius: 0.5rem;
+  --success: hsl(142, 71%, 55%);
+  --success-foreground: hsl(0, 0%, 98%);
+  --warning: hsl(38, 92%, 60%);
+  --warning-foreground: hsl(0, 0%, 98%);
+  --info: hsl(210, 100%, 65%);
+  --info-foreground: hsl(0, 0%, 98%);
+  
+  --ring: hsl(232, 97%, 65%);
+  
+  /* Dark gradient colors */
+  --gradient-from: hsl(232, 97%, 65%);
+  --gradient-to: hsl(262, 100%, 65%);
+  --gradient-accent: hsl(282, 100%, 65%);
 }
 
 @layer base {
@@ -59,14 +89,109 @@
 
   body {
     @apply font-sans antialiased bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+    letter-spacing: -0.01em;
+  }
+  
+  /* Smooth scrollbar */
+  ::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  ::-webkit-scrollbar-track {
+    background: hsl(var(--muted));
+  }
+  
+  ::-webkit-scrollbar-thumb {
+    background: hsl(var(--border));
+    border-radius: 3px;
+  }
+  
+  ::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--muted-foreground));
   }
 }
 
 @layer components {
+  /* Modern animations */
   .slide-in-right {
-    animation: slideInRight 0.3s ease-out;
+    animation: slideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
+  .slide-in-left {
+    animation: slideInLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  
+  .slide-in-up {
+    animation: slideInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  
+  .fade-in {
+    animation: fadeIn 0.3s ease-out;
+  }
+  
+  .scale-in {
+    animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  
+  .smooth-transition {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  /* Modern gradients */
+  .gradient-bg {
+    background: linear-gradient(135deg, var(--gradient-from) 0%, var(--gradient-to) 100%);
+  }
+  
+  .gradient-text {
+    background: linear-gradient(135deg, var(--gradient-from) 0%, var(--gradient-to) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+  
+  /* Glass morphism */
+  .glass {
+    background: rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+  
+  /* Modern card styles */
+  .modern-card {
+    @apply bg-card border border-border rounded-xl shadow-sm hover:shadow-lg smooth-transition backdrop-blur-sm;
+  }
+  
+  .modern-card-elevated {
+    @apply modern-card shadow-lg hover:shadow-xl;
+  }
+  
+  /* Status styles */
+  .status-success {
+    @apply bg-green-50 text-green-700 border border-green-200 dark:bg-green-950 dark:text-green-300 dark:border-green-800;
+  }
+  
+  .status-warning {
+    @apply bg-yellow-50 text-yellow-700 border border-yellow-200 dark:bg-yellow-950 dark:text-yellow-300 dark:border-yellow-800;
+  }
+  
+  .status-error {
+    @apply bg-red-50 text-red-700 border border-red-200 dark:bg-red-950 dark:text-red-300 dark:border-red-800;
+  }
+  
+  .status-info {
+    @apply bg-blue-50 text-blue-700 border border-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800;
+  }
+
+  /* Camera preview */
+  .camera-preview {
+    max-width: 100%;
+    height: auto;
+    border-radius: 12px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  }
+
+  /* Animation keyframes */
   @keyframes slideInRight {
     from {
       transform: translateX(100%);
@@ -77,19 +202,42 @@
       opacity: 1;
     }
   }
-
-  .fade-in {
-    animation: fadeIn 0.2s ease-in;
+  
+  @keyframes slideInLeft {
+    from {
+      transform: translateX(-100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+  
+  @keyframes slideInUp {
+    from {
+      transform: translateY(30px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
   }
 
   @keyframes fadeIn {
     from { opacity: 0; }
     to { opacity: 1; }
   }
-
-  .camera-preview {
-    max-width: 100%;
-    height: auto;
-    border-radius: 8px;
+  
+  @keyframes scaleIn {
+    from { 
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to { 
+      opacity: 1;
+      transform: scale(1);
+    }
   }
 }
diff --git a/client/src/pages/Dashboard.tsx b/client/src/pages/Dashboard.tsx
index 6e0495e..b0848ea 100644
--- a/client/src/pages/Dashboard.tsx
+++ b/client/src/pages/Dashboard.tsx
@@ -8,7 +8,7 @@ import { StoreProvider, useStoreContext } from "@/hooks/useStoreContext";
 import NewSaleForm from "@/components/NewSaleForm";
 import SalesHistory from "@/components/SalesHistory";
 import Administration from "@/components/Administration";
-import { Package, History, Settings, LogOut, User, Building2 } from "lucide-react";
+import { Package, History, Settings, LogOut, User, Building2, Shield } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
 
 function DashboardContent() {
@@ -38,31 +38,34 @@ function DashboardContent() {
   const isAdmin = user?.role === "admin";
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      {/* Header */}
-      <header className="bg-white shadow-sm border-b">
+    <div className="min-h-screen bg-background">
+      {/* Modern Header */}
+      <header className="sticky top-0 z-50 border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center h-16">
-            <div className="flex items-center gap-3">
-              <div className="p-2 bg-primary/10 rounded-lg">
-                <Package className="h-6 w-6 text-primary" />
+            <div className="flex items-center gap-4">
+              <div className="relative">
+                <div className="p-2 bg-gradient-to-br from-primary to-purple-600 rounded-xl shadow-sm">
+                  <Package className="h-6 w-6 text-white" />
+                </div>
+                <div className="absolute -inset-1 bg-gradient-to-br from-primary to-purple-600 rounded-xl blur opacity-20 -z-10"></div>
               </div>
               <div>
-                <h1 className="text-xl font-bold text-gray-900">Registre des Ventes</h1>
-                <p className="text-sm text-gray-500">Gestion des feux d'artifice</p>
+                <h1 className="text-xl font-bold gradient-text">Registre des Ventes</h1>
+                <p className="text-sm text-muted-foreground">Gestion moderne des feux d'artifice</p>
               </div>
             </div>
             
             <div className="flex items-center gap-4">
               {/* Store Selector for Admin */}
               {isAdmin && !isLoadingStores && (
-                <div className="flex items-center gap-2">
-                  <Building2 className="h-4 w-4 text-gray-500" />
+                <div className="flex items-center gap-3 p-2 bg-muted/50 rounded-lg border border-border/50">
+                  <Building2 className="h-4 w-4 text-muted-foreground" />
                   <Select 
                     value={selectedStoreId?.toString() || ""} 
                     onValueChange={(value) => setSelectedStoreId(parseInt(value))}
                   >
-                    <SelectTrigger className="w-48">
+                    <SelectTrigger className="w-48 border-0 bg-transparent focus:ring-0">
                       <SelectValue placeholder="Sélectionner un magasin" />
                     </SelectTrigger>
                     <SelectContent>
@@ -78,22 +81,32 @@ function DashboardContent() {
 
               {/* Current Store Display for Non-Admin */}
               {!isAdmin && selectedStore && (
-                <div className="flex items-center gap-2 text-sm text-gray-600">
-                  <Building2 className="h-4 w-4" />
-                  <span>{selectedStore.name}</span>
+                <div className="flex items-center gap-2 px-3 py-2 bg-muted/50 rounded-lg border border-border/50">
+                  <Building2 className="h-4 w-4 text-primary" />
+                  <span className="text-sm font-medium">{selectedStore.name}</span>
                 </div>
               )}
 
-              <div className="text-right">
-                <p className="text-sm font-medium text-gray-900">
-                  {user?.firstName} {user?.lastName}
-                </p>
-                <p className="text-xs text-gray-500 capitalize">{user?.role}</p>
+              <div className="flex items-center gap-3">
+                <div className="text-right">
+                  <p className="text-sm font-semibold text-foreground">
+                    {user?.firstName} {user?.lastName}
+                  </p>
+                  <div className="flex items-center gap-1">
+                    {user?.role === 'admin' && <Shield className="h-3 w-3 text-primary" />}
+                    <p className="text-xs text-muted-foreground capitalize">{user?.role}</p>
+                  </div>
+                </div>
+                <Button 
+                  variant="outline" 
+                  size="sm" 
+                  onClick={handleLogout}
+                  className="border-2 hover:bg-destructive hover:text-destructive-foreground hover:border-destructive smooth-transition"
+                >
+                  <LogOut className="h-4 w-4 mr-2" />
+                  Déconnexion
+                </Button>
               </div>
-              <Button variant="outline" size="sm" onClick={handleLogout}>
-                <LogOut className="h-4 w-4 mr-2" />
-                Déconnexion
-              </Button>
             </div>
           </div>
         </div>
@@ -102,20 +115,38 @@ function DashboardContent() {
       {/* Main Content */}
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         {selectedStore && (
-          <div className="mb-6">
-            <Card>
+          <div className="mb-8 slide-in-up">
+            <Card className="modern-card-elevated overflow-hidden">
               <CardContent className="pt-6">
-                <div className="flex items-center gap-4">
-                  <div className="p-3 bg-blue-100 rounded-lg">
-                    <Building2 className="h-6 w-6 text-blue-600" />
+                <div className="flex items-center gap-6">
+                  <div className="relative">
+                    <div className="p-4 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl shadow-lg">
+                      <Building2 className="h-8 w-8 text-white" />
+                    </div>
+                    <div className="absolute -inset-2 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl blur opacity-20 -z-10"></div>
                   </div>
-                  <div>
-                    <h2 className="text-lg font-semibold text-gray-900">{selectedStore.name}</h2>
-                    <div className="text-sm text-gray-600">
-                      {selectedStore.address && <p>{selectedStore.address}</p>}
-                      <div className="flex gap-4">
-                        {selectedStore.phone && <span>📞 {selectedStore.phone}</span>}
-                        {selectedStore.email && <span>✉️ {selectedStore.email}</span>}
+                  <div className="flex-1">
+                    <h2 className="text-2xl font-bold text-foreground mb-2">{selectedStore.name}</h2>
+                    <div className="space-y-1">
+                      {selectedStore.address && (
+                        <p className="text-muted-foreground flex items-center gap-2">
+                          <span className="w-4 h-4 flex items-center justify-center">📍</span>
+                          {selectedStore.address}
+                        </p>
+                      )}
+                      <div className="flex gap-6 text-sm">
+                        {selectedStore.phone && (
+                          <span className="text-muted-foreground flex items-center gap-2">
+                            <span className="w-4 h-4 flex items-center justify-center">📞</span>
+                            {selectedStore.phone}
+                          </span>
+                        )}
+                        {selectedStore.email && (
+                          <span className="text-muted-foreground flex items-center gap-2">
+                            <span className="w-4 h-4 flex items-center justify-center">✉️</span>
+                            {selectedStore.email}
+                          </span>
+                        )}
                       </div>
                     </div>
                   </div>
@@ -125,38 +156,55 @@ function DashboardContent() {
           </div>
         )}
 
-        <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
-          <TabsList className="grid w-full grid-cols-3 lg:w-auto lg:grid-cols-auto">
-            <TabsTrigger value="new-sale" className="flex items-center gap-2">
-              <Package className="h-4 w-4" />
-              Nouvelle Vente
-            </TabsTrigger>
-            <TabsTrigger value="history" className="flex items-center gap-2">
-              <History className="h-4 w-4" />
-              Historique
-            </TabsTrigger>
-            {canAccessAdmin && (
-              <TabsTrigger value="admin" className="flex items-center gap-2">
-                <Settings className="h-4 w-4" />
-                Administration
+        <div className="fade-in">
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-8">
+            <TabsList className={`grid w-full ${canAccessAdmin ? 'grid-cols-3' : 'grid-cols-2'} max-w-2xl h-14 bg-muted/50 p-2 rounded-2xl border border-border/50`}>
+              <TabsTrigger 
+                value="new-sale" 
+                className="h-10 rounded-xl data-[state=active]:bg-background data-[state=active]:shadow-md smooth-transition font-medium"
+              >
+                <Package className="h-5 w-5 mr-2" />
+                Nouvelle Vente
               </TabsTrigger>
-            )}
-          </TabsList>
+              <TabsTrigger 
+                value="history" 
+                className="h-10 rounded-xl data-[state=active]:bg-background data-[state=active]:shadow-md smooth-transition font-medium"
+              >
+                <History className="h-5 w-5 mr-2" />
+                Historique
+              </TabsTrigger>
+              {canAccessAdmin && (
+                <TabsTrigger 
+                  value="admin" 
+                  className="h-10 rounded-xl data-[state=active]:bg-background data-[state=active]:shadow-md smooth-transition font-medium"
+                >
+                  <Settings className="h-5 w-5 mr-2" />
+                  Administration
+                </TabsTrigger>
+              )}
+            </TabsList>
 
-          <TabsContent value="new-sale">
-            <NewSaleForm />
-          </TabsContent>
-
-          <TabsContent value="history">
-            <SalesHistory canDelete={canDeleteSales} />
-          </TabsContent>
-
-          {canAccessAdmin && (
-            <TabsContent value="admin">
-              <Administration />
+            <TabsContent value="new-sale" className="mt-8">
+              <div className="slide-in-up">
+                <NewSaleForm />
+              </div>
             </TabsContent>
-          )}
-        </Tabs>
+
+            <TabsContent value="history" className="mt-8">
+              <div className="slide-in-up">
+                <SalesHistory canDelete={canDeleteSales} />
+              </div>
+            </TabsContent>
+
+            {canAccessAdmin && (
+              <TabsContent value="admin" className="mt-8">
+                <div className="slide-in-up">
+                  <Administration />
+                </div>
+              </TabsContent>
+            )}
+          </Tabs>
+        </div>
       </main>
     </div>
   );
diff --git a/client/src/pages/Login.tsx b/client/src/pages/Login.tsx
index 7221f36..b2d4cdf 100644
--- a/client/src/pages/Login.tsx
+++ b/client/src/pages/Login.tsx
@@ -51,28 +51,43 @@ export default function Login() {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-purple-50 p-4">
-      <Card className="w-full max-w-md shadow-lg">
-        <CardHeader className="text-center">
-          <div className="flex justify-center mb-4">
-            <div className="p-3 bg-primary/10 rounded-full">
-              <Sparkles className="h-8 w-8 text-primary" />
+    <div className="min-h-screen flex items-center justify-center gradient-bg p-4 relative overflow-hidden">
+      {/* Background decoration */}
+      <div className="absolute inset-0 overflow-hidden">
+        <div className="absolute -top-40 -right-40 w-80 h-80 bg-gradient-to-br from-white/20 to-white/5 rounded-full blur-3xl"></div>
+        <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-gradient-to-br from-white/20 to-white/5 rounded-full blur-3xl"></div>
+      </div>
+      
+      <Card className="w-full max-w-md modern-card-elevated backdrop-blur-sm bg-white/90 border-white/20 slide-in-up relative z-10">
+        <CardHeader className="text-center space-y-6 pb-8">
+          <div className="flex justify-center">
+            <div className="relative">
+              <div className="p-4 bg-gradient-to-br from-primary to-purple-600 rounded-2xl shadow-lg">
+                <Sparkles className="h-8 w-8 text-white" />
+              </div>
+              <div className="absolute -inset-2 bg-gradient-to-br from-primary to-purple-600 rounded-2xl blur opacity-20 -z-10"></div>
             </div>
           </div>
-          <CardTitle className="text-2xl font-bold">Registre des Ventes</CardTitle>
-          <p className="text-muted-foreground">Connectez-vous pour accéder à l'application</p>
+          <div className="space-y-2">
+            <CardTitle className="text-3xl font-bold gradient-text">Registre des Ventes</CardTitle>
+            <p className="text-muted-foreground text-lg">Gestion moderne des feux d'artifice</p>
+          </div>
         </CardHeader>
-        <CardContent>
+        <CardContent className="space-y-6">
           <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
               <FormField
                 control={form.control}
                 name="username"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Nom d'utilisateur</FormLabel>
+                  <FormItem className="space-y-3">
+                    <FormLabel className="text-sm font-semibold text-foreground">Nom d'utilisateur</FormLabel>
                     <FormControl>
-                      <Input placeholder="Votre nom d'utilisateur" {...field} />
+                      <Input 
+                        placeholder="Votre nom d'utilisateur" 
+                        className="h-12 text-base border-2 border-border/50 focus:border-primary bg-background/50 backdrop-blur-sm smooth-transition" 
+                        {...field} 
+                      />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -82,35 +97,53 @@ export default function Login() {
                 control={form.control}
                 name="password"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Mot de passe</FormLabel>
+                  <FormItem className="space-y-3">
+                    <FormLabel className="text-sm font-semibold text-foreground">Mot de passe</FormLabel>
                     <FormControl>
-                      <Input type="password" placeholder="Votre mot de passe" {...field} />
+                      <Input 
+                        type="password" 
+                        placeholder="Votre mot de passe" 
+                        className="h-12 text-base border-2 border-border/50 focus:border-primary bg-background/50 backdrop-blur-sm smooth-transition" 
+                        {...field} 
+                      />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
                 )}
               />
-              <Button type="submit" className="w-full" disabled={isLoggingIn}>
-                <LogIn className="h-4 w-4 mr-2" />
-                {isLoggingIn ? "Connexion..." : "Se connecter"}
+              <Button 
+                type="submit" 
+                className="w-full h-12 text-base font-semibold bg-gradient-to-r from-primary to-purple-600 hover:from-primary/90 hover:to-purple-600/90 hover:shadow-lg hover:scale-[1.02] smooth-transition" 
+                disabled={isLoggingIn}
+              >
+                <LogIn className="h-5 w-5 mr-2" />
+                {isLoggingIn ? "Connexion en cours..." : "Se connecter"}
               </Button>
             </form>
           </Form>
           
           {credentialsStatus?.showDefaultCredentials && (
-            <Alert className="mt-6">
-              <Info className="h-4 w-4" />
+            <Alert className="status-info border-2 rounded-xl backdrop-blur-sm bg-blue-50/80 fade-in">
+              <Info className="h-5 w-5" />
               <AlertDescription>
-                <div className="space-y-2">
-                  <p className="font-medium">Compte administrateur par défaut :</p>
-                  <div className="text-sm space-y-1">
-                    <p><strong>Utilisateur :</strong> admin</p>
-                    <p><strong>Mot de passe :</strong> admin123</p>
+                <div className="space-y-3">
+                  <p className="font-semibold text-blue-900">Compte administrateur par défaut</p>
+                  <div className="bg-white/60 p-3 rounded-lg border border-blue-200/50 space-y-2">
+                    <div className="flex justify-between items-center">
+                      <span className="text-sm font-medium text-blue-700">Utilisateur :</span>
+                      <code className="text-sm font-mono bg-blue-100 px-2 py-1 rounded text-blue-800">admin</code>
+                    </div>
+                    <div className="flex justify-between items-center">
+                      <span className="text-sm font-medium text-blue-700">Mot de passe :</span>
+                      <code className="text-sm font-mono bg-blue-100 px-2 py-1 rounded text-blue-800">admin123</code>
+                    </div>
+                  </div>
+                  <div className="flex items-start gap-2 p-3 bg-orange-50/80 border border-orange-200/50 rounded-lg">
+                    <div className="text-orange-500 mt-0.5">⚠️</div>
+                    <p className="text-xs text-orange-700 leading-relaxed">
+                      <strong>Important :</strong> Changez ce mot de passe après votre première connexion pour sécuriser l'application.
+                    </p>
                   </div>
-                  <p className="text-xs text-orange-600 mt-2">
-                    ⚠️ Changez ce mot de passe après votre première connexion pour sécuriser l'application.
-                  </p>
                 </div>
               </AlertDescription>
             </Alert>