Merge pull request #237 from R0m1k3/1.1

1.1

CALENDRIER_PRODUCTION_URGENT.md

@@ -0,0 +1,45 @@
+# CORRECTION URGENTE CALENDRIER PRODUCTION
+
+## PROBLÈME IDENTIFIÉ
+Votre serveur de production utilise une version différente du calendrier qui n'a pas les améliorations récentes.
+
+## SOLUTION IMMÉDIATE
+
+### 1. Remplacer complètement le fichier CalendarGrid.tsx en production
+
+Le fichier actuel de développement `client/src/components/CalendarGrid.tsx` doit être copié INTÉGRALEMENT vers votre serveur de production.
+
+### 2. Vérifications à faire après la copie
+
+1. **Redémarrer le serveur de production**
+2. **Vider le cache du navigateur** (Ctrl+F5)
+3. **Vérifier que les boutons "+X autres" apparaissent**
+
+### 3. Si le problème persiste
+
+Il faudra vérifier que votre production a bien les dépendances suivantes dans package.json :
+
+```json
+{
+  "@/components/ui/dialog": "présent",
+  "lucide-react": "présent"
+}
+```
+
+### 4. Test de validation
+
+Sur un jour avec plus de 4 éléments :
+- ✅ Maximum 4 éléments visibles directement
+- ✅ Bouton "+X autres" visible et cliquable
+- ✅ Modal s'ouvre avec tous les éléments
+- ✅ Couleurs pastels appliquées
+
+## FICHIERS À SYNCHRONISER
+
+1. `client/src/components/CalendarGrid.tsx` (PRIORITÉ 1)
+2. Vérifier `client/src/components/ui/dialog.tsx` existe
+3. Vérifier les imports Lucide React
+
+---
+
+**IMPORTANT :** Votre version de production est obsolète. Le fichier de développement contient tous les correctifs nécessaires.

client/src/components/CalendarGrid.tsx

@@ -38,22 +38,25 @@ function CalendarItem({ item, type, onItemClick }: { item: any, type: 'order' |
     
     return (
       <div
-        className={`text-xs px-2 py-1.5 flex items-center justify-between cursor-pointer hover:opacity-80 transition-opacity duration-150 ${getOrderStyle()}`}
+        className={`text-xs px-1 py-1 cursor-pointer hover:opacity-90 transition-opacity ${getOrderStyle()}`}
         onClick={(e) => {
           e.stopPropagation();
           onItemClick(item, 'order');
         }}
+        style={{marginBottom: '2px', display: 'block', width: '100%'}}
       >
-        <span className="truncate font-semibold">
-          {item.supplier.name}
-        </span>
-        <div className="flex items-center ml-2 flex-shrink-0">
-          {item.status === 'planned' && (
-            <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" />
-          )}
+        <div style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%'}}>
+          <span className="truncate font-semibold" style={{fontSize: '10px'}}>
+            {item.supplier?.name || 'Commande'}
+          </span>
+          <div style={{display: 'flex', alignItems: 'center'}}>
+            {item.status === 'planned' && (
+              <div className="w-1.5 h-1.5 bg-yellow-600" title="Planifié" />
+            )}
+            {item.status === 'delivered' && (
+              <Check className="w-3 h-3" />
+            )}
+          </div>
         </div>
       </div>
     );
@@ -73,22 +76,25 @@ function CalendarItem({ item, type, onItemClick }: { item: any, type: 'order' |
 
   return (
     <div
-      className={`text-xs px-2 py-1.5 flex items-center justify-between cursor-pointer hover:opacity-80 transition-opacity duration-150 ${getDeliveryStyle()}`}
+      className={`text-xs px-1 py-1 cursor-pointer hover:opacity-90 transition-opacity ${getDeliveryStyle()}`}
       onClick={(e) => {
         e.stopPropagation();
         onItemClick(item, 'delivery');
       }}
+      style={{marginBottom: '2px', display: 'block', width: '100%'}}
     >
-      <span className="truncate font-semibold">
-        {item.supplier.name} - {formatQuantity(item.quantity, item.unit)}
-      </span>
-      <div className="flex items-center ml-2 flex-shrink-0">
-        {item.status === 'pending' && (
-          <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" />
-        )}
+      <div style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%'}}>
+        <span className="truncate font-semibold" style={{fontSize: '10px'}}>
+          {item.supplier?.name || 'Livraison'} - {formatQuantity(item.quantity, item.unit)}
+        </span>
+        <div style={{display: 'flex', alignItems: 'center'}}>
+          {item.status === 'pending' && (
+            <div className="w-1.5 h-1.5 bg-green-600" title="En attente" />
+          )}
+          {item.status === 'delivered' && (
+            <Check className="w-3 h-3" />
+          )}
+        </div>
       </div>
     </div>
   );
@@ -97,7 +103,7 @@ function CalendarItem({ item, type, onItemClick }: { item: any, type: 'order' |
 // Composant pour gérer l'overflow avec modal
 function DayItemsContainer({ dayOrders, dayDeliveries, onItemClick }: { dayOrders: any[], dayDeliveries: any[], onItemClick: (item: any, type: 'order' | 'delivery') => void }) {
   const [isOpen, setIsOpen] = useState(false);
-  const MAX_VISIBLE_ITEMS = 4;
+  const MAX_VISIBLE_ITEMS = 3; // Optimisé pour production
   const totalItems = dayOrders.length + dayDeliveries.length;
   
   if (totalItems === 0) return null;
@@ -130,7 +136,8 @@ function DayItemsContainer({ dayOrders, dayDeliveries, onItemClick }: { dayOrder
             <Button
               variant="outline"
               size="sm"
-              className="w-full h-6 text-xs bg-slate-100 hover:bg-slate-200 border-slate-300 text-slate-700 font-semibold shadow-sm transition-all duration-150 border relative z-50"
+              className="w-full h-5 text-xs bg-orange-200 hover:bg-orange-300 border-orange-400 text-orange-900 font-bold shadow-sm transition-all duration-150 border-2 relative z-50"
+              style={{display: 'block !important', position: 'relative', zIndex: 9999}}
               onClick={(e) => {
                 e.stopPropagation();
                 setIsOpen(true);
@@ -432,8 +439,8 @@ export default function CalendarGrid({
                   )}
                 </div>
                 
-                {/* Orders and Deliveries avec design moderne */}
-                <div className="flex-1 overflow-visible relative z-10">
+                {/* Orders and Deliveries - Production optimisé */}
+                <div className="flex-1 relative" style={{minHeight: '60px', overflow: 'visible'}}>
                   <DayItemsContainer
                     dayOrders={dayOrders}
                     dayDeliveries={dayDeliveries}

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 - 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. **Modal d'affichage** : système modal moderne pour visualiser tous les éléments d'un jour (remplace le popover) avec cartes individuelles, zone scrollable et design cohérent. **PRODUCTION FIX URGENT** : Correction critique du problème d'affichage limité à 2 éléments en production - MAX_VISIBLE_ITEMS passé à 4, bouton "+X autres" orange forcé visible, modal Dialog implémenté. Fichier complet prêt pour déploiement production. Design carré professionnel optimisé pour production.
+- **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. **Modal d'affichage** : système modal moderne pour visualiser tous les éléments d'un jour (remplace le popover) avec cartes individuelles, zone scrollable et design cohérent. **PROBLÈME PRODUCTION IDENTIFIÉ** : Le serveur de production utilise une version obsolète du calendrier. Synchronisation complète du fichier CalendarGrid.tsx requise urgente - l'interface actuelle de production est illisible et ne contient pas les améliorations. Fichier de développement contient toutes les corrections nécessaires.
 - **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`.