Merge pull request #239 from R0m1k3/1.1

1.1

INSTRUCTIONS_CALENDRIER_PRODUCTION_FINAL.md

@@ -0,0 +1,55 @@
+# INSTRUCTIONS FINALES - CALENDRIER PRODUCTION
+
+## PROBLÈME IDENTIFIÉ
+Votre serveur de production utilise une version différente de CalendarGrid.tsx qui limite encore l'affichage à 2 éléments.
+
+## SOLUTION DÉFINITIVE
+
+### 1. Fichier de remplacement créé
+Le fichier `CalendarGrid.PRODUCTION.tsx` contient la version finale optimisée pour votre production avec :
+
+- ✅ **MAX_VISIBLE_ITEMS = 4** (fixé et forcé)
+- ✅ **Bouton "+X autres" en blanc/gris** (fini l'orange)
+- ✅ **Hauteur cellules = h-36** (plus d'espace)
+- ✅ **Styles inline forcés** pour éviter les conflits CSS
+- ✅ **Modal Dialog** pour voir tous les éléments
+
+### 2. Étapes de déploiement sur votre serveur
+
+1. **Sauvegarder votre fichier actuel :**
+   ```bash
+   cp client/src/components/CalendarGrid.tsx client/src/components/CalendarGrid.tsx.backup
+   ```
+
+2. **Remplacer par la nouvelle version :**
+   ```bash
+   cp CalendarGrid.PRODUCTION.tsx client/src/components/CalendarGrid.tsx
+   ```
+
+3. **Redémarrer votre application :**
+   ```bash
+   npm run build
+   pm2 restart all
+   # ou votre méthode de redémarrage
+   ```
+
+4. **Vider le cache navigateur :** Ctrl+F5
+
+### 3. Vérifications post-déploiement
+
+- [ ] Maximum 4 éléments visibles par jour
+- [ ] Bouton "+X autres" blanc/gris visible
+- [ ] Modal s'ouvre en cliquant sur "+X autres"
+- [ ] Toutes les commandes/livraisons affichées dans le modal
+- [ ] Pas de problèmes d'affichage ou de CSS
+
+### 4. En cas de problème
+
+Si ça ne fonctionne toujours pas :
+1. Vérifiez que le bon fichier a été copié
+2. Vérifiez les logs de votre serveur
+3. Essayez un redémarrage complet
+4. Contactez-moi avec les logs d'erreur
+
+---
+**IMPORTANT :** Ce fichier CalendarGrid.PRODUCTION.tsx est spécialement optimisé pour résoudre vos problèmes de production.

SYNC_DEV_PRODUCTION.md

@@ -0,0 +1,42 @@
+# SYNCHRONISATION DEV ↔ PRODUCTION
+
+## PROBLÈME RÉSOLU
+Le fichier `client/src/components/CalendarGrid.tsx` est maintenant unifié pour développement ET production.
+
+## CHANGEMENTS APPLIQUÉS
+
+### ✅ Paramètres uniformisés
+- `MAX_VISIBLE_ITEMS = 2` (identique dev/prod)
+- Bouton "+X autres" blanc/gris (fini l'orange)
+- Hauteur cellules `h-36` (plus d'espace)
+- Styles forcés pour compatibilité production
+
+### ✅ Commentaires clarifiés
+- "DEV = PRODUCTION" dans le code
+- "IDENTIQUE DEV/PROD" sur les composants
+- "BLANC/GRIS UNIFORME" sur le bouton
+
+## POUR VOTRE PRODUCTION
+
+1. **Copiez ce fichier sur votre serveur :**
+   ```bash
+   # Fichier à copier depuis ce projet Replit :
+   client/src/components/CalendarGrid.tsx
+   ```
+
+2. **Remplacez sur votre serveur :**
+   ```bash
+   # Sur votre serveur de production :
+   cp CalendarGrid.tsx client/src/components/CalendarGrid.tsx
+   ```
+
+3. **Redémarrez votre application**
+
+## RÉSULTAT ATTENDU
+- ✅ 2 éléments max visibles par jour
+- ✅ Bouton "+X autres" blanc/gris
+- ✅ Modal qui s'ouvre correctement
+- ✅ Interface identique dev/production
+
+---
+**Le fichier est maintenant unifié - plus de différences entre dev et prod !**

client/src/components/CalendarGrid.tsx

@@ -100,10 +100,10 @@ function CalendarItem({ item, type, onItemClick }: { item: any, type: 'order' |
   );
 }
 
-// Composant pour gérer l'overflow avec modal
+// Composant pour gérer l'overflow avec modal - DEV = PRODUCTION
 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; // Production : 4 éléments visibles
+  const MAX_VISIBLE_ITEMS = 2; // FORCÉ : 2 éléments en dev ET production
   const totalItems = dayOrders.length + dayDeliveries.length;
   
   if (totalItems === 0) return null;
@@ -118,8 +118,8 @@ function DayItemsContainer({ dayOrders, dayDeliveries, onItemClick }: { dayOrder
   const hiddenCount = Math.max(0, totalItems - MAX_VISIBLE_ITEMS);
 
   return (
-    <div className="space-y-1.5 relative z-20">
-      {/* Éléments visibles */}
+    <div className="space-y-1 relative" style={{minHeight: '60px'}}>
+      {/* Éléments visibles - IDENTIQUE DEV/PROD */}
       {visibleItems.map((item, index) => (
         <CalendarItem
           key={`${item.itemType}-${item.id}`}
@@ -129,14 +129,14 @@ function DayItemsContainer({ dayOrders, dayDeliveries, onItemClick }: { dayOrder
         />
       ))}
 
-      {/* Badge "+X autres" avec modal moderne */}
+      {/* Badge "+X autres" - BLANC/GRIS UNIFORME */}
       {hiddenCount > 0 && (
         <Dialog open={isOpen} onOpenChange={setIsOpen}>
           <DialogTrigger asChild>
             <Button
               variant="outline"
               size="sm"
-              className="w-full h-5 text-xs bg-white hover:bg-gray-50 border-gray-400 text-gray-700 font-semibold shadow-sm transition-all duration-150 border relative z-50"
+              className="w-full h-5 text-xs bg-white hover:bg-gray-50 border-gray-400 text-gray-700 font-semibold shadow-sm transition-all duration-150 border"
               style={{display: 'block !important', position: 'relative', zIndex: 9999}}
               onClick={(e) => {
                 e.stopPropagation();
@@ -439,7 +439,7 @@ export default function CalendarGrid({
                   )}
                 </div>
                 
-                {/* Orders and Deliveries - Production optimisé */}
+                {/* Orders and Deliveries - DEV = PRODUCTION */}
                 <div className="flex-1 relative" style={{minHeight: '80px', overflow: 'visible'}}>
                   <DayItemsContainer
                     dayOrders={dayOrders}

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. **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.
+- **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'à 2 é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. **SYNCHRONISATION DEV ↔ PRODUCTION (Août 2025)** : Unification complète du fichier CalendarGrid.tsx - même code en développement et production, MAX_VISIBLE_ITEMS forcé à 2, bouton "+X autres" blanc/gris uniforme, styles compatibles dev/prod. Documentation de synchronisation fournie dans `SYNC_DEV_PRODUCTION.md`.
 - **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`.