Display "Retiré" orders last and improve their visual styling

Refactor order sorting logic to place "Retiré" status orders at the end of the list, and update table cell styling for "Retiré" orders to visually indicate their status.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 1e4433b5-47ab-464c-b663-fea2e53367dd
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/1e4433b5-47ab-464c-b663-fea2e53367dd/HYP564D

.replit

@@ -47,6 +47,10 @@ externalPort = 6000
 localPort = 44549
 externalPort = 5173
 
+[[ports]]
+localPort = 44965
+externalPort = 6800
+
 [workflows]
 runButton = "Project"
 

client/src/pages/CustomerOrders.tsx

@@ -660,39 +660,53 @@ export default function CustomerOrders() {
     return matchesSearch && matchesSupplier && matchesStatus;
   }) : [];
 
-  // Sort orders
+  // Sort orders - Active orders first, then "Retiré" orders last
-  const sortedOrders = [...filteredOrders].sort((a, b) => {
+  const sortedOrders = (() => {
-    let aValue: string | number;
+    // Séparer les commandes en deux groupes
-    let bValue: string | number;
+    const activeOrders = filteredOrders.filter(order => order.status !== "Retiré");
+    const retiredOrders = filteredOrders.filter(order => order.status === "Retiré");
+    
+    // Fonction de tri commune
+    const sortFunction = (a: any, b: any) => {
+      let aValue: string | number;
+      let bValue: string | number;
 
-    switch (sortBy) {
+      switch (sortBy) {
-      case "date":
+        case "date":
-        const dateA = safeDate(a.createdAt);
+          const dateA = safeDate(a.createdAt);
-        const dateB = safeDate(b.createdAt);
+          const dateB = safeDate(b.createdAt);
-        aValue = dateA ? dateA.getTime() : 0;
+          aValue = dateA ? dateA.getTime() : 0;
-        bValue = dateB ? dateB.getTime() : 0;
+          bValue = dateB ? dateB.getTime() : 0;
-        break;
+          break;
-      case "status":
+        case "status":
-        aValue = a.status;
+          aValue = a.status;
-        bValue = b.status;
+          bValue = b.status;
-        break;
+          break;
-      case "supplier":
+        case "supplier":
-        aValue = a.supplier?.name || "";
+          aValue = a.supplier?.name || "";
-        bValue = b.supplier?.name || "";
+          bValue = b.supplier?.name || "";
-        break;
+          break;
-      default:
+        default:
-        const defaultDateA = safeDate(a.createdAt);
+          const defaultDateA = safeDate(a.createdAt);
-        const defaultDateB = safeDate(b.createdAt);
+          const defaultDateB = safeDate(b.createdAt);
-        aValue = defaultDateA ? defaultDateA.getTime() : 0;
+          aValue = defaultDateA ? defaultDateA.getTime() : 0;
-        bValue = defaultDateB ? defaultDateB.getTime() : 0;
+          bValue = defaultDateB ? defaultDateB.getTime() : 0;
-    }
+      }
 
-    if (sortOrder === "desc") {
+      if (sortOrder === "desc") {
-      return aValue > bValue ? -1 : aValue < bValue ? 1 : 0;
+        return aValue > bValue ? -1 : aValue < bValue ? 1 : 0;
-    } else {
+      } else {
-      return aValue < bValue ? -1 : aValue > bValue ? 1 : 0;
+        return aValue < bValue ? -1 : aValue > bValue ? 1 : 0;
-    }
+      }
-  });
+    };
+    
+    // Trier chaque groupe séparément
+    const sortedActiveOrders = [...activeOrders].sort(sortFunction);
+    const sortedRetiredOrders = [...retiredOrders].sort(sortFunction);
+    
+    // Concaténer : commandes actives d'abord, puis retiré en dernier
+    return [...sortedActiveOrders, ...sortedRetiredOrders];
+  })();
 
   // Pagination
   const {
@@ -819,13 +833,13 @@ export default function CustomerOrders() {
                 {paginatedOrders.map((order) => (
                   <TableRow
                     key={order.id}
-                    className={isGrayedOut(order.status) ? "opacity-50" : ""}
+                    className={isGrayedOut(order.status) ? "bg-gray-50 dark:bg-gray-900" : ""}
                   >
-                    <TableCell className="font-medium">
+                    <TableCell className={`font-medium ${isGrayedOut(order.status) ? "line-through text-gray-500" : ""}`}>
                       {order.customerName}
                     </TableCell>
-                    <TableCell>{order.customerPhone}</TableCell>
+                    <TableCell className={isGrayedOut(order.status) ? "line-through text-gray-500" : ""}>{order.customerPhone}</TableCell>
-                    <TableCell>
+                    <TableCell className={isGrayedOut(order.status) ? "line-through text-gray-500" : ""}>
                       <div>
                         <div className="font-medium">{order.productDesignation}</div>
                         {order.productReference && (
@@ -835,30 +849,30 @@ export default function CustomerOrders() {
                         )}
                       </div>
                     </TableCell>
-                    <TableCell className="text-center">
+                    <TableCell className={`text-center ${isGrayedOut(order.status) ? "line-through text-gray-500" : ""}`}>
-                      <Badge variant="secondary" className="font-mono">
+                      <Badge variant="secondary" className={`font-mono ${isGrayedOut(order.status) ? "line-through text-gray-500" : ""}`}>
                         {order.quantity || 1}
                       </Badge>
                     </TableCell>
-                    <TableCell>
+                    <TableCell className={isGrayedOut(order.status) ? "line-through text-gray-500" : ""}>
                       <div className="font-medium text-sm">
                         {order.supplier?.name || "N/A"}
                       </div>
                     </TableCell>
-                    <TableCell>
+                    <TableCell className={isGrayedOut(order.status) ? "line-through text-gray-500" : ""}>
-                      <code className="bg-gray-100 px-2 py-1 rounded text-sm">
+                      <code className={`bg-gray-100 px-2 py-1 rounded text-sm ${isGrayedOut(order.status) ? "line-through text-gray-500" : ""}`}>
                         {order.gencode || "-"}
                       </code>
                     </TableCell>
                     <TableCell>
                       <Badge 
-                        className={`${getStatusColor(order.status)} cursor-pointer hover:opacity-80 transition-opacity rounded-none`}
+                        className={`${isGrayedOut(order.status) ? "bg-gray-200 text-gray-600 line-through border border-gray-300" : getStatusColor(order.status)} cursor-pointer hover:opacity-80 transition-opacity rounded-none`}
                         onClick={() => openStatusModal(order)}
                       >
                         {order.status}
                       </Badge>
                     </TableCell>
-                    <TableCell>
+                    <TableCell className={isGrayedOut(order.status) ? "line-through text-gray-500" : ""}>
                       {safeFormat(order.createdAt, 'dd/MM/yyyy')}
                     </TableCell>
                     <TableCell>