Display all daily orders and deliveries in a modern modal view

Replace the popover with a modal to display more than 4 items on a given day in the calendar.

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/20HYcnO

client/src/components/CalendarGrid.tsx

@@ -1,9 +1,9 @@
 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 } from "lucide-react";
+import { Plus, Check, MoreHorizontal, Package } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import { useState } from "react";
 import type { OrderWithRelations, DeliveryWithRelations } from "@shared/schema";
 
@@ -123,49 +123,51 @@ function DayItemsContainer({ dayOrders, dayDeliveries, onItemClick }: { dayOrder
         />
       ))}
 
-      {/* Badge "+X autres" avec popover moderne */}
+      {/* Badge "+X autres" avec modal moderne */}
       {hiddenCount > 0 && (
-        <Popover open={isOpen} onOpenChange={setIsOpen}>
-          <PopoverTrigger asChild>
+        <Dialog open={isOpen} onOpenChange={setIsOpen}>
+          <DialogTrigger asChild>
             <Button
               variant="outline"
               size="sm"
               className="w-full h-6 text-xs bg-slate-100 hover:bg-slate-200 border-slate-300 text-slate-800 font-bold shadow-md transition-all duration-150 border-2"
               onClick={(e) => {
                 e.stopPropagation();
-                setIsOpen(!isOpen);
+                setIsOpen(true);
               }}
             >
               <MoreHorizontal className="w-3 h-3 mr-1" />
               +{hiddenCount} autres
             </Button>
-          </PopoverTrigger>
-          <PopoverContent
-            className="w-80 p-4 bg-white border-2 border-gray-400 shadow-2xl"
-            align="start"
-            side="right"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="space-y-3">
-              <h4 className="font-semibold text-sm text-slate-800 border-b border-gray-100 pb-2">
-                Tous les éléments ({totalItems})
-              </h4>
-              <div className="space-y-2 max-h-60 overflow-y-auto">
-                {allItems.map((item) => (
-                  <CalendarItem
-                    key={`popup-${item.itemType}-${item.id}`}
-                    item={item}
-                    type={item.itemType}
-                    onItemClick={(clickedItem, type) => {
-                      onItemClick(clickedItem, type);
-                      setIsOpen(false);
-                    }}
-                  />
+          </DialogTrigger>
+          <DialogContent className="sm:max-w-2xl max-h-[80vh] overflow-hidden">
+            <DialogHeader>
+              <DialogTitle className="text-lg font-semibold text-gray-800 flex items-center gap-2">
+                <Package className="w-5 h-5" />
+                Tous les éléments du jour ({totalItems})
+              </DialogTitle>
+            </DialogHeader>
+            <div className="mt-4">
+              <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
+                {allItems.map((item, index) => (
+                  <div
+                    key={`modal-${item.itemType}-${item.id}-${index}`}
+                    className="p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
+                  >
+                    <CalendarItem
+                      item={item}
+                      type={item.itemType}
+                      onItemClick={(clickedItem, type) => {
+                        onItemClick(clickedItem, type);
+                        setIsOpen(false);
+                      }}
+                    />
+                  </div>
                 ))}
               </div>
             </div>
-          </PopoverContent>
-        </Popover>
+          </DialogContent>
+        </Dialog>
       )}
     </div>
   );

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. 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. 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`.