From 38c48bd6f6bbff5721be03844b8f7a73a85ecfad Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Mon, 1 Sep 2025 20:35:37 +0000
Subject: [PATCH] Remove pending order notification and improve order alert
 styling

Removes the top-level notification for pending orders and updates the styling for pending order alerts to use color-coded severity based on how long an order has been pending.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 98f01874-e00c-4bbe-9d71-b0b338001848
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/98f01874-e00c-4bbe-9d71-b0b338001848/XDIQsDu
---
 client/src/pages/Dashboard.tsx | 54 ++++++++++++++++++----------------
 1 file changed, 29 insertions(+), 25 deletions(-)

diff --git a/client/src/pages/Dashboard.tsx b/client/src/pages/Dashboard.tsx
index 50072ac..040bfb3 100644
--- a/client/src/pages/Dashboard.tsx
+++ b/client/src/pages/Dashboard.tsx
@@ -351,14 +351,6 @@ export default function Dashboard() {
 
       {/* Alerts */}
       <div className="space-y-3">
-        {pendingOrdersCount > 0 && (
-          <div className="bg-orange-50 border-l-4 border-orange-400 p-4 flex items-center space-x-3 shadow-sm">
-            <AlertTriangle className="h-5 w-5 text-orange-600" />
-            <span className="text-sm font-medium text-orange-800">
-              <strong>{pendingOrdersCount} commande(s) en attente</strong> nécessitent une planification
-            </span>
-          </div>
-        )}
         
         {dlcStats.expiringSoon > 0 && (
           <div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 flex items-center space-x-3 shadow-sm">
@@ -454,25 +446,37 @@ export default function Dashboard() {
             </CardTitle>
           </CardHeader>
           <CardContent className="space-y-3 p-6 max-h-96 overflow-y-auto">
-            {pendingOrders.length > 0 ? pendingOrders.map((order: any) => (
-              <div key={order.id} className="flex items-center justify-between p-4 bg-gray-50 hover:bg-gray-100 transition-colors border-l-3 border-orange-500">
-                <div className="flex items-center space-x-3">
-                  <div className="h-2 w-2 bg-orange-500"></div>
-                  <div>
-                    <p className="font-medium text-gray-900">{order.supplier?.name}</p>
-                    <p className="text-sm text-gray-600">{order.group?.name}</p>
+            {pendingOrders.length > 0 ? pendingOrders.map((order: any) => {
+              // Calculer le nombre de jours en attente
+              const orderDate = safeDate(order.createdAt);
+              const daysPending = orderDate ? Math.floor((new Date().getTime() - orderDate.getTime()) / (1000 * 60 * 60 * 24)) : 0;
+              const isOverdue = daysPending > 10;
+              
+              return (
+                <div key={order.id} className={`flex items-center justify-between p-4 transition-colors border-l-3 ${
+                  isOverdue ? 'bg-red-50 hover:bg-red-100 border-red-500' : 'bg-orange-50 hover:bg-orange-100 border-orange-500'
+                }`}>
+                  <div className="flex items-center space-x-3">
+                    <div className={`h-2 w-2 ${isOverdue ? 'bg-red-500' : 'bg-orange-500'}`}></div>
+                    <div>
+                      <p className="font-medium text-gray-900">{order.supplier?.name}</p>
+                      <p className="text-sm text-gray-600">{order.group?.name}</p>
+                    </div>
+                  </div>
+                  <div className="text-right">
+                    <Badge 
+                      variant={isOverdue ? 'destructive' : 'secondary'}
+                      className="text-xs"
+                    >
+                      {daysPending} jour{daysPending > 1 ? 's' : ''}
+                    </Badge>
+                    <p className="text-xs text-gray-500 mt-1">
+                      {safeFormat(order.plannedDate, "d MMM")}
+                    </p>
                   </div>
                 </div>
-                <div className="text-right">
-                  <Badge variant="secondary" className="text-xs">
-                    En attente
-                  </Badge>
-                  <p className="text-xs text-gray-500 mt-1">
-                    {safeFormat(order.plannedDate, "d MMM")}
-                  </p>
-                </div>
-              </div>
-            )) : (
+              );
+            }) : (
               <p className="text-gray-600 text-center py-8">Aucune commande en attente</p>
             )}
           </CardContent>