From 875460c44240b34dca19792e67fbe3aef262f3f4 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Mon, 18 Aug 2025 13:41:03 +0000
Subject: [PATCH] Update calendar colors and styles for a softer visual
 appearance

Adjusted calendar item colors to use a more muted pastel palette, refined borders and shadows, and updated the display logic for multiple items per day.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: cc2d271b-82f0-4d6a-9302-a0b067ffb429
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/cc2d271b-82f0-4d6a-9302-a0b067ffb429/utmjfWK
---
 client/src/components/CalendarGrid.tsx | 22 +++++++++++-----------
 replit.md                              |  2 +-
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/client/src/components/CalendarGrid.tsx b/client/src/components/CalendarGrid.tsx
index 48af0df..92b693e 100644
--- a/client/src/components/CalendarGrid.tsx
+++ b/client/src/components/CalendarGrid.tsx
@@ -28,11 +28,11 @@ function CalendarItem({ item, type, onItemClick }: { item: any, type: 'order' |
     const getOrderStyle = () => {
       switch (item.status) {
         case 'delivered':
-          return 'bg-gray-500 text-white shadow-lg border-l-4 border-gray-700';
+          return 'bg-gray-400 text-white shadow-md border-l-4 border-gray-500';
         case 'planned':
-          return 'bg-yellow-500 text-black shadow-lg border-l-4 border-yellow-700 font-medium';
+          return 'bg-yellow-300 text-gray-800 shadow-md border-l-4 border-yellow-500 font-medium';
         default:
-          return 'bg-blue-500 text-white shadow-lg border-l-4 border-blue-700';
+          return 'bg-blue-300 text-gray-800 shadow-md border-l-4 border-blue-500';
       }
     };
     
@@ -49,7 +49,7 @@ function CalendarItem({ item, type, onItemClick }: { item: any, type: 'order' |
         </span>
         <div className="flex items-center ml-2 flex-shrink-0">
           {item.status === 'planned' && (
-            <div className="w-2 h-2 bg-yellow-800 mr-1" title="Commande planifiée (liée à une livraison)" />
+            <div className="w-2 h-2 bg-yellow-600 mr-1" title="Commande planifiée (liée à une livraison)" />
           )}
           {item.status === 'delivered' && (
             <Check className="w-3 h-3" />
@@ -63,11 +63,11 @@ function CalendarItem({ item, type, onItemClick }: { item: any, type: 'order' |
   const getDeliveryStyle = () => {
     switch (item.status) {
       case 'delivered':
-        return 'bg-gray-500 text-white shadow-lg border-l-4 border-gray-700';
+        return 'bg-gray-400 text-white shadow-md border-l-4 border-gray-500';
       case 'pending':
-        return 'bg-green-500 text-white shadow-lg border-l-4 border-green-700';
+        return 'bg-green-300 text-gray-800 shadow-md border-l-4 border-green-500';
       default:
-        return 'bg-green-500 text-white shadow-lg border-l-4 border-green-700';
+        return 'bg-green-300 text-gray-800 shadow-md border-l-4 border-green-500';
     }
   };
 
@@ -84,7 +84,7 @@ function CalendarItem({ item, type, onItemClick }: { item: any, type: 'order' |
       </span>
       <div className="flex items-center ml-2 flex-shrink-0">
         {item.status === 'pending' && (
-          <div className="w-2 h-2 bg-green-800 mr-1" title="En attente de validation" />
+          <div className="w-2 h-2 bg-green-600 mr-1" title="En attente de validation" />
         )}
         {item.status === 'delivered' && (
           <Check className="w-3 h-3" />
@@ -446,14 +446,14 @@ export default function CalendarGrid({
                   {dayPublicities.slice(0, 2).map((pub, idx) => (
                     <div
                       key={`${pub.id}-${idx}`}
-                      className="bg-purple-600 text-white text-xs px-2 py-1 font-bold shadow-lg cursor-help transform hover:scale-105 transition-transform duration-150 border border-purple-800"
+                      className="bg-purple-300 text-purple-800 text-xs px-2 py-1 font-bold shadow-md cursor-help transform hover:scale-105 transition-transform duration-150 border border-purple-400"
                       title={`Pub ${pub.pubNumber}: ${pub.designation}${pub.participations ? ` - Magasins: ${pub.participations.map((pg: any) => pg.group?.name).join(', ')}` : ''}`}
                     >
                       {pub.pubNumber}
                     </div>
                   ))}
                   {dayPublicities.length > 2 && (
-                    <div className="bg-purple-700 text-white text-xs px-2 py-1 font-bold shadow-lg cursor-help transform hover:scale-105 transition-transform duration-150 border border-purple-900">
+                    <div className="bg-purple-400 text-purple-900 text-xs px-2 py-1 font-bold shadow-md cursor-help transform hover:scale-105 transition-transform duration-150 border border-purple-500">
                       +{dayPublicities.length - 2}
                     </div>
                   )}
@@ -465,7 +465,7 @@ export default function CalendarGrid({
                 <div className={`absolute ${dayPublicities.length === 0 ? 'top-2 right-2' : 'bottom-2 right-2'} opacity-0 group-hover:opacity-100 transition-all duration-200`}>
                   <Button
                     size="sm"
-                    className="w-6 h-6 bg-orange-600 text-white p-0 hover:bg-orange-700 shadow-md transform hover:scale-110 transition-all duration-150 border border-orange-800"
+                    className="w-6 h-6 bg-orange-300 text-orange-800 p-0 hover:bg-orange-400 shadow-md transform hover:scale-110 transition-all duration-150 border border-orange-500"
                     onClick={(e) => {
                       e.stopPropagation();
                       onDateClick(date);
diff --git a/replit.md b/replit.md
index 87dba81..49434cd 100644
--- a/replit.md
+++ b/replit.md
@@ -38,7 +38,7 @@ The platform is built with a clear separation of concerns, utilizing a modern fu
 - **Information System (Announcements):** Système d'informations complet remplaçant la carte commandes clients dans le dashboard - gestion d'annonces avec niveaux de priorité (normal, important, urgent), contrôle d'accès basé sur les rôles (admin : CRUD complet, autres rôles : lecture seule), tri intelligent par priorité et date, filtrage par magasin pour administrateurs, interface moderne avec badges colorés et indicateurs visuels. **PRODUCTION FIX MAJEUR (Août 2025)** : Correction critique du problème d'affichage en production PostgreSQL - fix du filtrage pour inclure annonces globales + magasin sélectionné, correction des relations d'auteur avec username au lieu d'ID, design adapté pour correspondre exactement aux autres cartes du dashboard. **SUPPRESSION FIX (Août 2025)** : Correction du problème de suppression en production - ajout de la logique PostgreSQL manquante dans la route DELETE, les annonces peuvent maintenant être supprimées correctement en production. **MODAL DASHBOARD (Août 2025)** : Ajout d'un modal automatique dans le dashboard qui affiche la dernière annonce créée il y a moins de 2 jours - système de mémorisation localStorage pour éviter les re-affichages, interface avec priorités colorées, formatage français des dates, filtrage par magasin pour admins. **UTILISATEUR INCONNU FIX (Août 2025)** : Correction critique du problème "utilisateur inconnu" en production - création de la table `dashboard_messages` manquante, correction des noms de colonnes (`first_name` au lieu de `firstName`), amélioration de la logique de récupération des noms d'utilisateur avec fallback intelligent. **AFFICHAGE SIMPLIFIÉ (Août 2025)** : Suppression de l'affichage du nom de l'auteur des annonces pour simplifier l'interface - seul le nom du magasin/groupe est affiché si applicable. **FIX MODIFICATION PRODUCTION (Août 2025)** : Correction critique du problème de modification des annonces en production - la jointure PostgreSQL utilisait incorrectement `users.id` au lieu de `users.username` pour la relation avec `createdBy`, causant des erreurs 500. Fix appliqué avec correction de la jointure et ajout de logs de debug dans `announcementStorage.ts`. **MÉTHODE MANQUANTE FIX (Août 2025)** : Identification et correction de l'erreur "getAnnouncement is not a function" - ajout de la méthode `getAnnouncement` manquante dans l'interface `IAnnouncementStorage` et ses implémentations `AnnouncementDatabaseStorage` et `AnnouncementMemoryStorage` pour résoudre définitivement les erreurs 500 en production.
 - **DLC Module Permissions:** Correction des permissions de validation DLC pour permettre aux admin, directeur et manager de valider les produits DLC. Ajout de logs de debug pour traçabilité des validations (Août 2025).
 - **DLC UX Enhancement:** Ajout de tooltips explicatifs sur les icônes stock épuisé (PackageX) et restauration (RotateCcw) pour clarifier la différence entre "périmé" et "stock épuisé" et améliorer l'expérience utilisateur (Août 2025).
-- **Calendrier Design Moderne (Août 2025):** Refonte complète du design du calendrier `CalendarGrid.tsx` avec interface ultra-moderne - gradients subtils, animations fluides, ombres élégantes, coins arrondis, boutons d'action avec effets hover sophistiqués, badges de publicités modernisés avec gradients violets, weekends avec indicateurs visuels discrets, et transitions d'échelle au survol. Design optimisé pour production avec performance et esthétique premium.
+- **Calendrier Design Moderne (Août 2025):** Refonte complète du design du calendrier `CalendarGrid.tsx` avec interface ultra-moderne - design épuré sans angles arrondis, séparations grises claires, weekends en fond gris, système de couleurs codées (gris=livré, vert=livraisons, bleu=commandes, jaune=planifiées), couleurs pastels douces, affichage jusqu'à 4 éléments par jour, bordures marquées et ombres subtiles. Design carré professionnel optimisé pour production.
 - **User and Permission Management:** Granular access controls ensuring that users (e.g., employees) have appropriate permissions for tasks like creating customer orders.
 - **Reporting:** Statistical reporting, including monthly summaries of deliveries based on `deliveredDate`.