From 8b6b6db6226f50d5804333bf76cfd2d968402be6 Mon Sep 17 00:00:00 2001 From: michaelschal <35957947-michaelschal@users.noreply.replit.com> Date: Mon, 18 Aug 2025 13:13:14 +0000 Subject: [PATCH] Modernize the calendar interface with new styling and animations Refactors CalendarGrid.tsx to implement a completely new, modern UI with gradient backgrounds, refined animations, and updated status indicators for orders and deliveries. 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/Dqk6uUO --- client/src/components/CalendarGrid.tsx | 175 +++++++++++++------------ client/src/index.css | 29 ++++ replit.md | 1 + 3 files changed, 123 insertions(+), 82 deletions(-) diff --git a/client/src/components/CalendarGrid.tsx b/client/src/components/CalendarGrid.tsx index 008119d..1b82f21 100644 --- a/client/src/components/CalendarGrid.tsx +++ b/client/src/components/CalendarGrid.tsx @@ -25,26 +25,31 @@ function CalendarItem({ item, type, onItemClick }: { item: any, type: 'order' | }; if (type === 'order') { - const colorClass = item.status === 'delivered' - ? 'bg-delivered text-white' - : item.status === 'planned' - ? 'bg-yellow-200 text-gray-800 border-2 border-yellow-300' - : 'bg-primary text-white'; + const getOrderStyle = () => { + switch (item.status) { + case 'delivered': + return 'bg-gradient-to-r from-emerald-500 to-green-500 text-white shadow-md'; + case 'planned': + return 'bg-gradient-to-r from-amber-400 to-yellow-500 text-white shadow-md border border-amber-300'; + default: + return 'bg-gradient-to-r from-blue-500 to-indigo-500 text-white shadow-md'; + } + }; return (
{ e.stopPropagation(); onItemClick(item, 'order'); }} > - + {item.supplier.name} -
+
{item.status === 'planned' && ( - +
)} {item.status === 'delivered' && ( @@ -55,26 +60,31 @@ function CalendarItem({ item, type, onItemClick }: { item: any, type: 'order' | } // Livraison + const getDeliveryStyle = () => { + switch (item.status) { + case 'delivered': + return 'bg-gradient-to-r from-emerald-500 to-green-500 text-white shadow-md'; + case 'pending': + return 'bg-gradient-to-r from-orange-500 to-red-500 text-white shadow-md border border-orange-300'; + default: + return 'bg-gradient-to-r from-slate-500 to-gray-500 text-white shadow-md'; + } + }; + return (
{ e.stopPropagation(); onItemClick(item, 'delivery'); }} > - + {item.supplier.name} - {formatQuantity(item.quantity, item.unit)} -
+
{item.status === 'pending' && ( - +
)} {item.status === 'delivered' && ( @@ -102,7 +112,7 @@ function DayItemsContainer({ dayOrders, dayDeliveries, onItemClick }: { dayOrder const hiddenCount = Math.max(0, totalItems - MAX_VISIBLE_ITEMS); return ( -
+
{/* Éléments visibles */} {visibleItems.map((item, index) => ( ))} - {/* Badge "+X autres" avec popover */} + {/* Badge "+X autres" avec popover moderne */} {hiddenCount > 0 && ( e.stopPropagation()} > -
-

+
+

Tous les éléments ({totalItems})

-
+
{allItems.map((item) => ( - {/* Calendar Header */} -
- {weekDays.map(day => ( -
+
+ {/* Calendar Header - Design moderne */} +
+ {weekDays.map((day, index) => ( +
= 5 ? 'text-slate-600' : 'text-slate-700' + } uppercase`} + > {day}
))}
- {/* Calendar Days */} -
+ {/* Calendar Days - Grid moderne */} +
{paddedDays.map((date, index) => { const isCurrentMonth = isSameMonth(date, currentDate); const isTodayDate = isToday(date); - const isWeekend = date.getDay() === 0 || date.getDay() === 6; // Dimanche (0) ou Samedi (6) + const isWeekend = date.getDay() === 0 || date.getDay() === 6; const { orders: dayOrders, deliveries: dayDeliveries } = getItemsForDate(date); const dayPublicities = getPublicitiesForDate(date); return (
onDateClick(date)} > -
- - {format(date, 'd')} - +
+ {/* Numéro du jour avec design moderne */} +
+ + {format(date, 'd')} + + + {/* Indicateur weekend moderne */} + {isWeekend && isCurrentMonth && ( +
+ )} +
- {/* Orders and Deliveries avec système d'overflow */} - + {/* Orders and Deliveries avec design moderne */} +
+ +
- {/* Publicities in top-right corner */} + {/* Publicities avec design moderne */} {dayPublicities.length > 0 && ( -
- {dayPublicities.slice(0, 3).map((pub, idx) => ( +
+ {dayPublicities.slice(0, 2).map((pub, idx) => (
pg.group?.name).join(', ')}` : ''}`} > {pub.pubNumber}
))} - {dayPublicities.length > 3 && ( -
- +{dayPublicities.length - 3} + {dayPublicities.length > 2 && ( +
+ +{dayPublicities.length - 2}
)}
)} - {/* Quick Create Button */} - {isCurrentMonth && dayPublicities.length === 0 && ( -
+ {/* Quick Create Button moderne */} + {isCurrentMonth && ( +
-
- )} - - {/* Quick Create Button when publicities are present */} - {isCurrentMonth && dayPublicities.length > 0 && ( -
-
)} diff --git a/client/src/index.css b/client/src/index.css index 994d90d..1ee65ad 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -351,3 +351,32 @@ button[data-day-weekend="true"], .dark .rdp-day[data-day-weekend="true"] { background-color: #1f2937 !important; } + +/* Nouvelles couleurs pour le calendrier moderne */ +.bg-gray-25 { + background-color: #fafafa; +} + +.bg-slate-25 { + background-color: #f8fafc; +} + +.hover\:from-gray-25:hover { + --tw-gradient-from: #fafafa var(--tw-gradient-from-position); + --tw-gradient-to: rgb(250 250 250 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.hover\:to-slate-25:hover { + --tw-gradient-to: #f8fafc var(--tw-gradient-to-position); +} + +.hover\:from-slate-50:hover { + --tw-gradient-from: #f8fafc var(--tw-gradient-from-position); + --tw-gradient-to: rgb(248 250 252 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.hover\:to-gray-50:hover { + --tw-gradient-to: #f9fafb var(--tw-gradient-to-position); +} diff --git a/replit.md b/replit.md index 8fe1b82..87dba81 100644 --- a/replit.md +++ b/replit.md @@ -38,6 +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 - gradients subtils, animations fluides, ombres élégantes, coins arrondis, boutons d'action avec effets hover sophistiqués, badges de publicités modernisés avec gradients violets, weekends avec indicateurs visuels discrets, et transitions d'échelle au survol. Design optimisé pour production avec performance et esthétique premium. - **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`.