From e1e6afa103828ee8127031b4ad489f74fd4d8487 Mon Sep 17 00:00:00 2001 From: michaelschal <35957947-michaelschal@users.noreply.replit.com> Date: Mon, 18 Aug 2025 14:31:06 +0000 Subject: [PATCH 1/3] Ensure calendar displays consistently across all environments Create a production-specific calendar component to fix display issues and ensure feature parity with development. 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/oqbeck5 --- CalendarGrid.PRODUCTION.tsx | 355 ++++++++++++++++++++ INSTRUCTIONS_CALENDRIER_PRODUCTION_FINAL.md | 55 +++ replit.md | 2 +- 3 files changed, 411 insertions(+), 1 deletion(-) create mode 100644 CalendarGrid.PRODUCTION.tsx create mode 100644 INSTRUCTIONS_CALENDRIER_PRODUCTION_FINAL.md diff --git a/CalendarGrid.PRODUCTION.tsx b/CalendarGrid.PRODUCTION.tsx new file mode 100644 index 0000000..7337eec --- /dev/null +++ b/CalendarGrid.PRODUCTION.tsx @@ -0,0 +1,355 @@ +import { format, startOfMonth, endOfMonth, eachDayOfInterval, isSameDay, isSameMonth, isToday } from "date-fns"; +import { fr } from "date-fns/locale"; +import { safeDate } from "@/lib/dateUtils"; +import { Plus, Check, MoreHorizontal, Package } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"; +import { useState } from "react"; +import type { OrderWithRelations, DeliveryWithRelations } from "@shared/schema"; + +interface CalendarGridProps { + currentDate: Date; + orders: OrderWithRelations[]; + deliveries: DeliveryWithRelations[]; + publicities: any[]; + selectedStoreId: number | null; + userGroups: any[]; + onDateClick: (date: Date) => void; + onItemClick: (item: any, type: 'order' | 'delivery') => void; +} + +// Composant pour afficher un élément (commande ou livraison) - VERSION PRODUCTION +function CalendarItem({ item, type, onItemClick }: { item: any, type: 'order' | 'delivery', onItemClick: (item: any, type: 'order' | 'delivery') => void }) { + const formatQuantity = (quantity: number, unit: string) => { + return `${quantity}${unit === 'palettes' ? 'P' : 'C'}`; + }; + + if (type === 'order') { + const getOrderStyle = () => { + switch (item.status) { + case 'delivered': + return 'bg-gray-400 text-white shadow-sm border-l-4 border-gray-500'; + case 'planned': + return 'bg-yellow-300 text-gray-800 shadow-sm border-l-4 border-yellow-500 font-medium'; + default: + return 'bg-blue-300 text-gray-800 shadow-sm border-l-4 border-blue-500'; + } + }; + + return ( +
{ + e.stopPropagation(); + onItemClick(item, 'order'); + }} + style={{marginBottom: '2px', display: 'block', width: '100%'}} + > +
+ + {item.supplier?.name || 'Commande'} + +
+ {item.status === 'planned' && ( +
+ )} + {item.status === 'delivered' && ( + + )} +
+
+
+ ); + } + + // Livraison + const getDeliveryStyle = () => { + switch (item.status) { + case 'delivered': + return 'bg-gray-400 text-white shadow-sm border-l-4 border-gray-500'; + case 'pending': + return 'bg-green-300 text-gray-800 shadow-sm border-l-4 border-green-500'; + default: + return 'bg-green-300 text-gray-800 shadow-sm border-l-4 border-green-500'; + } + }; + + return ( +
{ + e.stopPropagation(); + onItemClick(item, 'delivery'); + }} + style={{marginBottom: '2px', display: 'block', width: '100%'}} + > +
+ + {item.supplier?.name || 'Livraison'} - {formatQuantity(item.quantity, item.unit)} + +
+ {item.status === 'pending' && ( +
+ )} + {item.status === 'delivered' && ( + + )} +
+
+
+ ); +} + +// Composant pour gérer l'overflow avec modal - VERSION 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 : TOUJOURS 4 ÉLÉMENTS + const totalItems = dayOrders.length + dayDeliveries.length; + + if (totalItems === 0) return null; + + // Combiner tous les éléments avec leur type + const allItems = [ + ...dayOrders.map(order => ({ ...order, itemType: 'order' as const })), + ...dayDeliveries.map(delivery => ({ ...delivery, itemType: 'delivery' as const })) + ]; + + const visibleItems = allItems.slice(0, MAX_VISIBLE_ITEMS); + const hiddenCount = Math.max(0, totalItems - MAX_VISIBLE_ITEMS); + + return ( +
+ {/* Éléments visibles */} + {visibleItems.map((item, index) => ( + + ))} + + {/* Badge "+X autres" avec modal - PRODUCTION */} + {hiddenCount > 0 && ( + + + + + + + + + Éléments du jour ({totalItems}) + + +
+
+ {allItems.map((item, index) => ( +
+ { + onItemClick(clickedItem, type); + setIsOpen(false); + }} + /> +
+ ))} +
+
+ + + )} +
+ ); +} + +export default function CalendarGrid({ + currentDate, + orders, + deliveries, + publicities, + selectedStoreId, + userGroups, + onDateClick, + onItemClick +}: CalendarGridProps) { + const weekDays = ['LUN', 'MAR', 'MER', 'JEU', 'VEN', 'SAM', 'DIM']; + + // Generate calendar days + const monthStart = startOfMonth(currentDate); + const monthEnd = endOfMonth(currentDate); + const calendarDays = eachDayOfInterval({ start: monthStart, end: monthEnd }); + + // Calculate the number of days to show before the month starts (to align with Monday) + const startPadding = (monthStart.getDay() + 6) % 7; // Convert Sunday=0 to Monday=0 format + const paddingDays = Array.from({ length: startPadding }, (_, i) => { + const date = new Date(monthStart); + date.setDate(date.getDate() - startPadding + i); + return date; + }); + + const paddedDays = [...paddingDays, ...calendarDays]; + + // Filter data based on selected store + const filteredOrders = selectedStoreId + ? orders.filter(order => order.groupId === selectedStoreId) + : orders; + + const filteredDeliveries = selectedStoreId + ? deliveries.filter(delivery => delivery.groupId === selectedStoreId) + : deliveries; + + const getItemsForDate = (date: Date) => { + const dayOrders = filteredOrders.filter(order => { + const orderDate = safeDate(order.scheduledDate || order.deliveredDate || order.createdAt); + return orderDate && isSameDay(orderDate, date); + }); + + const dayDeliveries = filteredDeliveries.filter(delivery => { + const deliveryDate = safeDate(delivery.scheduledDate || delivery.deliveredDate || delivery.createdAt); + return deliveryDate && isSameDay(deliveryDate, date); + }); + + return { orders: dayOrders, deliveries: dayDeliveries }; + }; + + const getPublicitiesForDate = (date: Date) => { + return publicities.filter(pub => { + if (!pub.validFrom || !pub.validTo) return false; + + const pubStart = safeDate(pub.validFrom); + const pubEnd = safeDate(pub.validTo); + + if (!pubStart || !pubEnd) return false; + + return date >= pubStart && date <= pubEnd; + }); + }; + + return ( +
+ {/* Calendar Header */} +
+ {weekDays.map((day, index) => ( +
= 5 ? 'text-slate-700' : 'text-slate-800' + } uppercase border-r border-gray-300 last:border-r-0`} + > + {day} +
+ ))} +
+ + {/* Calendar Days */} +
+ {paddedDays.map((date, index) => { + const isCurrentMonth = isSameMonth(date, currentDate); + const isTodayDate = isToday(date); + const isWeekend = date.getDay() === 0 || date.getDay() === 6; + const { orders: dayOrders, deliveries: dayDeliveries } = getItemsForDate(date); + const dayPublicities = getPublicitiesForDate(date); + + return ( +
onDateClick(date)} + > +
+ {/* Numéro du jour */} +
+ + {format(date, 'd')} + + + {/* Indicateur weekend */} + {isWeekend && isCurrentMonth && ( +
+ )} +
+ + {/* Orders and Deliveries - PRODUCTION OPTIMISÉ */} +
+ +
+
+ + {/* Publicities */} + {dayPublicities.length > 0 && ( +
+ {dayPublicities.slice(0, 2).map((pub, idx) => ( +
pg.group?.name).join(', ')}` : ''}`} + > + {pub.pubNumber} +
+ ))} + {dayPublicities.length > 2 && ( +
+ +{dayPublicities.length - 2} +
+ )} +
+ )} + + {/* Quick Create Button */} + {isCurrentMonth && ( +
+ +
+ )} +
+ ); + })} +
+
+ ); +} \ No newline at end of file diff --git a/INSTRUCTIONS_CALENDRIER_PRODUCTION_FINAL.md b/INSTRUCTIONS_CALENDRIER_PRODUCTION_FINAL.md new file mode 100644 index 0000000..3512c01 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/replit.md b/replit.md index 751d352..a305706 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 - 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'à 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. **SOLUTION FINALE PRODUCTION (Août 2025)** : Création du fichier `CalendarGrid.PRODUCTION.tsx` spécialement optimisé pour le serveur de production - MAX_VISIBLE_ITEMS forcé à 4, bouton "+X autres" en blanc/gris (plus orange), styles inline pour éviter conflits CSS, hauteur cellules augmentée. Instructions complètes de déploiement fournies dans `INSTRUCTIONS_CALENDRIER_PRODUCTION_FINAL.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`. From e35fd806b401f5db8a4efc31643f949d5769cae3 Mon Sep 17 00:00:00 2001 From: michaelschal <35957947-michaelschal@users.noreply.replit.com> Date: Mon, 18 Aug 2025 14:32:58 +0000 Subject: [PATCH 2/3] Unify calendar display for consistent development and production experiences Synchronize the CalendarGrid component between development and production environments, enforcing uniform item visibility and button styling for a consistent user interface. 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/WnYSbrG --- CalendarGrid.PRODUCTION.tsx | 355 ------------------------- SYNC_DEV_PRODUCTION.md | 42 +++ client/src/components/CalendarGrid.tsx | 14 +- replit.md | 2 +- 4 files changed, 50 insertions(+), 363 deletions(-) delete mode 100644 CalendarGrid.PRODUCTION.tsx create mode 100644 SYNC_DEV_PRODUCTION.md diff --git a/CalendarGrid.PRODUCTION.tsx b/CalendarGrid.PRODUCTION.tsx deleted file mode 100644 index 7337eec..0000000 --- a/CalendarGrid.PRODUCTION.tsx +++ /dev/null @@ -1,355 +0,0 @@ -import { format, startOfMonth, endOfMonth, eachDayOfInterval, isSameDay, isSameMonth, isToday } from "date-fns"; -import { fr } from "date-fns/locale"; -import { safeDate } from "@/lib/dateUtils"; -import { Plus, Check, MoreHorizontal, Package } from "lucide-react"; -import { Button } from "@/components/ui/button"; -import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"; -import { useState } from "react"; -import type { OrderWithRelations, DeliveryWithRelations } from "@shared/schema"; - -interface CalendarGridProps { - currentDate: Date; - orders: OrderWithRelations[]; - deliveries: DeliveryWithRelations[]; - publicities: any[]; - selectedStoreId: number | null; - userGroups: any[]; - onDateClick: (date: Date) => void; - onItemClick: (item: any, type: 'order' | 'delivery') => void; -} - -// Composant pour afficher un élément (commande ou livraison) - VERSION PRODUCTION -function CalendarItem({ item, type, onItemClick }: { item: any, type: 'order' | 'delivery', onItemClick: (item: any, type: 'order' | 'delivery') => void }) { - const formatQuantity = (quantity: number, unit: string) => { - return `${quantity}${unit === 'palettes' ? 'P' : 'C'}`; - }; - - if (type === 'order') { - const getOrderStyle = () => { - switch (item.status) { - case 'delivered': - return 'bg-gray-400 text-white shadow-sm border-l-4 border-gray-500'; - case 'planned': - return 'bg-yellow-300 text-gray-800 shadow-sm border-l-4 border-yellow-500 font-medium'; - default: - return 'bg-blue-300 text-gray-800 shadow-sm border-l-4 border-blue-500'; - } - }; - - return ( -
{ - e.stopPropagation(); - onItemClick(item, 'order'); - }} - style={{marginBottom: '2px', display: 'block', width: '100%'}} - > -
- - {item.supplier?.name || 'Commande'} - -
- {item.status === 'planned' && ( -
- )} - {item.status === 'delivered' && ( - - )} -
-
-
- ); - } - - // Livraison - const getDeliveryStyle = () => { - switch (item.status) { - case 'delivered': - return 'bg-gray-400 text-white shadow-sm border-l-4 border-gray-500'; - case 'pending': - return 'bg-green-300 text-gray-800 shadow-sm border-l-4 border-green-500'; - default: - return 'bg-green-300 text-gray-800 shadow-sm border-l-4 border-green-500'; - } - }; - - return ( -
{ - e.stopPropagation(); - onItemClick(item, 'delivery'); - }} - style={{marginBottom: '2px', display: 'block', width: '100%'}} - > -
- - {item.supplier?.name || 'Livraison'} - {formatQuantity(item.quantity, item.unit)} - -
- {item.status === 'pending' && ( -
- )} - {item.status === 'delivered' && ( - - )} -
-
-
- ); -} - -// Composant pour gérer l'overflow avec modal - VERSION 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 : TOUJOURS 4 ÉLÉMENTS - const totalItems = dayOrders.length + dayDeliveries.length; - - if (totalItems === 0) return null; - - // Combiner tous les éléments avec leur type - const allItems = [ - ...dayOrders.map(order => ({ ...order, itemType: 'order' as const })), - ...dayDeliveries.map(delivery => ({ ...delivery, itemType: 'delivery' as const })) - ]; - - const visibleItems = allItems.slice(0, MAX_VISIBLE_ITEMS); - const hiddenCount = Math.max(0, totalItems - MAX_VISIBLE_ITEMS); - - return ( -
- {/* Éléments visibles */} - {visibleItems.map((item, index) => ( - - ))} - - {/* Badge "+X autres" avec modal - PRODUCTION */} - {hiddenCount > 0 && ( - - - - - - - - - Éléments du jour ({totalItems}) - - -
-
- {allItems.map((item, index) => ( -
- { - onItemClick(clickedItem, type); - setIsOpen(false); - }} - /> -
- ))} -
-
- - - )} -
- ); -} - -export default function CalendarGrid({ - currentDate, - orders, - deliveries, - publicities, - selectedStoreId, - userGroups, - onDateClick, - onItemClick -}: CalendarGridProps) { - const weekDays = ['LUN', 'MAR', 'MER', 'JEU', 'VEN', 'SAM', 'DIM']; - - // Generate calendar days - const monthStart = startOfMonth(currentDate); - const monthEnd = endOfMonth(currentDate); - const calendarDays = eachDayOfInterval({ start: monthStart, end: monthEnd }); - - // Calculate the number of days to show before the month starts (to align with Monday) - const startPadding = (monthStart.getDay() + 6) % 7; // Convert Sunday=0 to Monday=0 format - const paddingDays = Array.from({ length: startPadding }, (_, i) => { - const date = new Date(monthStart); - date.setDate(date.getDate() - startPadding + i); - return date; - }); - - const paddedDays = [...paddingDays, ...calendarDays]; - - // Filter data based on selected store - const filteredOrders = selectedStoreId - ? orders.filter(order => order.groupId === selectedStoreId) - : orders; - - const filteredDeliveries = selectedStoreId - ? deliveries.filter(delivery => delivery.groupId === selectedStoreId) - : deliveries; - - const getItemsForDate = (date: Date) => { - const dayOrders = filteredOrders.filter(order => { - const orderDate = safeDate(order.scheduledDate || order.deliveredDate || order.createdAt); - return orderDate && isSameDay(orderDate, date); - }); - - const dayDeliveries = filteredDeliveries.filter(delivery => { - const deliveryDate = safeDate(delivery.scheduledDate || delivery.deliveredDate || delivery.createdAt); - return deliveryDate && isSameDay(deliveryDate, date); - }); - - return { orders: dayOrders, deliveries: dayDeliveries }; - }; - - const getPublicitiesForDate = (date: Date) => { - return publicities.filter(pub => { - if (!pub.validFrom || !pub.validTo) return false; - - const pubStart = safeDate(pub.validFrom); - const pubEnd = safeDate(pub.validTo); - - if (!pubStart || !pubEnd) return false; - - return date >= pubStart && date <= pubEnd; - }); - }; - - return ( -
- {/* Calendar Header */} -
- {weekDays.map((day, index) => ( -
= 5 ? 'text-slate-700' : 'text-slate-800' - } uppercase border-r border-gray-300 last:border-r-0`} - > - {day} -
- ))} -
- - {/* Calendar Days */} -
- {paddedDays.map((date, index) => { - const isCurrentMonth = isSameMonth(date, currentDate); - const isTodayDate = isToday(date); - const isWeekend = date.getDay() === 0 || date.getDay() === 6; - const { orders: dayOrders, deliveries: dayDeliveries } = getItemsForDate(date); - const dayPublicities = getPublicitiesForDate(date); - - return ( -
onDateClick(date)} - > -
- {/* Numéro du jour */} -
- - {format(date, 'd')} - - - {/* Indicateur weekend */} - {isWeekend && isCurrentMonth && ( -
- )} -
- - {/* Orders and Deliveries - PRODUCTION OPTIMISÉ */} -
- -
-
- - {/* Publicities */} - {dayPublicities.length > 0 && ( -
- {dayPublicities.slice(0, 2).map((pub, idx) => ( -
pg.group?.name).join(', ')}` : ''}`} - > - {pub.pubNumber} -
- ))} - {dayPublicities.length > 2 && ( -
- +{dayPublicities.length - 2} -
- )} -
- )} - - {/* Quick Create Button */} - {isCurrentMonth && ( -
- -
- )} -
- ); - })} -
-
- ); -} \ No newline at end of file diff --git a/SYNC_DEV_PRODUCTION.md b/SYNC_DEV_PRODUCTION.md new file mode 100644 index 0000000..f904c76 --- /dev/null +++ b/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 = 4` (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 +- ✅ 4 é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 !** \ No newline at end of file diff --git a/client/src/components/CalendarGrid.tsx b/client/src/components/CalendarGrid.tsx index ce9f26f..71f0603 100644 --- a/client/src/components/CalendarGrid.tsx +++ b/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 = 4; // FORCÉ : 4 é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 ( -
- {/* Éléments visibles */} +
+ {/* Éléments visibles - IDENTIQUE DEV/PROD */} {visibleItems.map((item, index) => ( ))} - {/* Badge "+X autres" avec modal moderne */} + {/* Badge "+X autres" - BLANC/GRIS UNIFORME */} {hiddenCount > 0 && (
- {/* Orders and Deliveries - Production optimisé */} + {/* Orders and Deliveries - DEV = PRODUCTION */}
Date: Mon, 18 Aug 2025 14:34:27 +0000 Subject: [PATCH 3/3] Align calendar display to ensure consistency across all environments Update the maximum number of visible calendar items and adjust styling in CalendarGrid.tsx for consistent display between development and production. 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/WnYSbrG --- SYNC_DEV_PRODUCTION.md | 4 ++-- client/src/components/CalendarGrid.tsx | 2 +- replit.md | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/SYNC_DEV_PRODUCTION.md b/SYNC_DEV_PRODUCTION.md index f904c76..b52c1f7 100644 --- a/SYNC_DEV_PRODUCTION.md +++ b/SYNC_DEV_PRODUCTION.md @@ -6,7 +6,7 @@ Le fichier `client/src/components/CalendarGrid.tsx` est maintenant unifié pour ## CHANGEMENTS APPLIQUÉS ### ✅ Paramètres uniformisés -- `MAX_VISIBLE_ITEMS = 4` (identique dev/prod) +- `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 @@ -33,7 +33,7 @@ Le fichier `client/src/components/CalendarGrid.tsx` est maintenant unifié pour 3. **Redémarrez votre application** ## RÉSULTAT ATTENDU -- ✅ 4 éléments max visibles par jour +- ✅ 2 éléments max visibles par jour - ✅ Bouton "+X autres" blanc/gris - ✅ Modal qui s'ouvre correctement - ✅ Interface identique dev/production diff --git a/client/src/components/CalendarGrid.tsx b/client/src/components/CalendarGrid.tsx index 71f0603..99d7c9a 100644 --- a/client/src/components/CalendarGrid.tsx +++ b/client/src/components/CalendarGrid.tsx @@ -103,7 +103,7 @@ function CalendarItem({ item, type, onItemClick }: { item: any, type: 'order' | // 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; // FORCÉ : 4 éléments en dev ET production + const MAX_VISIBLE_ITEMS = 2; // FORCÉ : 2 éléments en dev ET production const totalItems = dayOrders.length + dayDeliveries.length; if (totalItems === 0) return null; diff --git a/replit.md b/replit.md index a8f2cfd..cb853c2 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 - 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. **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é à 4, bouton "+X autres" blanc/gris uniforme, styles compatibles dev/prod. Documentation de synchronisation fournie dans `SYNC_DEV_PRODUCTION.md`. +- **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`.