mirror of
https://github.com/R0m1k3/LogiFlow.git
synced 2026-10-11 17:27:31 +02:00
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
This commit is contained in:
michaelschal committed
1 parent
3a37dfe86c
commit
e1e6afa103
3 files changed
+411
-1
No files matched your search
@@ -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 (
|
||||
<div
|
||||
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%'}}
|
||||
>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
// 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 (
|
||||
<div
|
||||
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%'}}
|
||||
>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
// 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 (
|
||||
<div className="space-y-1 relative" style={{minHeight: '60px'}}>
|
||||
{/* Éléments visibles */}
|
||||
{visibleItems.map((item, index) => (
|
||||
<CalendarItem
|
||||
key={`${item.itemType}-${item.id}`}
|
||||
item={item}
|
||||
type={item.itemType}
|
||||
onItemClick={onItemClick}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Badge "+X autres" avec modal - PRODUCTION */}
|
||||
{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"
|
||||
style={{display: 'block !important', position: 'relative', zIndex: 9999}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsOpen(true);
|
||||
}}
|
||||
>
|
||||
<MoreHorizontal className="w-3 h-3 mr-1" />
|
||||
+{hiddenCount} autres
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-lg max-h-[70vh] overflow-hidden">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-base font-semibold text-gray-800 flex items-center gap-2">
|
||||
<Package className="w-4 h-4" />
|
||||
Éléments du jour ({totalItems})
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="mt-3">
|
||||
<div className="space-y-2 max-h-[50vh] overflow-y-auto">
|
||||
{allItems.map((item, index) => (
|
||||
<div
|
||||
key={`modal-${item.itemType}-${item.id}-${index}`}
|
||||
className="border border-gray-200 hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<CalendarItem
|
||||
item={item}
|
||||
type={item.itemType}
|
||||
onItemClick={(clickedItem, type) => {
|
||||
onItemClick(clickedItem, type);
|
||||
setIsOpen(false);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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 (
|
||||
<div className="bg-white shadow-xl border-2 border-gray-300 overflow-hidden">
|
||||
{/* Calendar Header */}
|
||||
<div className="grid grid-cols-7 bg-gradient-to-r from-slate-100 to-gray-100 border-b-2 border-gray-400">
|
||||
{weekDays.map((day, index) => (
|
||||
<div
|
||||
key={day}
|
||||
className={`p-4 text-center text-sm font-bold tracking-wider ${
|
||||
index >= 5 ? 'text-slate-700' : 'text-slate-800'
|
||||
} uppercase border-r border-gray-300 last:border-r-0`}
|
||||
>
|
||||
{day}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Calendar Days */}
|
||||
<div className="grid grid-cols-7 gap-px bg-gray-300 p-px">
|
||||
{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 (
|
||||
<div
|
||||
key={index}
|
||||
className={`h-36 relative group cursor-pointer transition-all duration-200 ${
|
||||
isTodayDate
|
||||
? "bg-blue-100 hover:bg-blue-200 border-2 border-blue-600"
|
||||
: isWeekend && isCurrentMonth
|
||||
? "bg-gray-200 hover:bg-gray-300"
|
||||
: isCurrentMonth
|
||||
? "bg-white hover:bg-gray-50"
|
||||
: "bg-gray-150"
|
||||
} ${!isCurrentMonth ? 'opacity-50' : ''}`}
|
||||
onClick={() => onDateClick(date)}
|
||||
>
|
||||
<div className="p-3 h-full flex flex-col relative">
|
||||
{/* Numéro du jour */}
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className={`text-sm font-bold tracking-tight ${
|
||||
isTodayDate
|
||||
? "text-white bg-blue-600 px-2 py-1 text-xs shadow-md"
|
||||
: isCurrentMonth
|
||||
? "text-slate-900"
|
||||
: "text-gray-500"
|
||||
}`}>
|
||||
{format(date, 'd')}
|
||||
</span>
|
||||
|
||||
{/* Indicateur weekend */}
|
||||
{isWeekend && isCurrentMonth && (
|
||||
<div className="w-2 h-2 bg-slate-400"></div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Orders and Deliveries - PRODUCTION OPTIMISÉ */}
|
||||
<div className="flex-1 relative" style={{minHeight: '80px', overflow: 'visible'}}>
|
||||
<DayItemsContainer
|
||||
dayOrders={dayOrders}
|
||||
dayDeliveries={dayDeliveries}
|
||||
onItemClick={onItemClick}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Publicities */}
|
||||
{dayPublicities.length > 0 && (
|
||||
<div className="absolute top-2 right-2 flex flex-col items-end gap-1">
|
||||
{dayPublicities.slice(0, 2).map((pub, idx) => (
|
||||
<div
|
||||
key={`${pub.id}-${idx}`}
|
||||
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-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>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Quick Create Button */}
|
||||
{isCurrentMonth && (
|
||||
<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-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);
|
||||
}}
|
||||
>
|
||||
<Plus className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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.
|
||||
@@ -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`.
|
||||
|
||||
|
||||
Reference in new issue
Block a user