Update order-table.tsx

components/tables/order-table.tsx

@@ -129,6 +129,8 @@ export default function OrderTable() {
       const queryParams = new URLSearchParams({
         page: currentPage.toString(),
         limit: itemsPerPage.toString(),
+        sortBy: sortConfig.column,
+        sortOrder: sortConfig.direction,
         ...(statusFilter !== "all" && { status: statusFilter }),
       });
 
@@ -143,7 +145,7 @@ export default function OrderTable() {
     } finally {
       setLoading(false);
     }
-  }, [currentPage, statusFilter, itemsPerPage]);
+  }, [currentPage, statusFilter, itemsPerPage, sortConfig]);
 
   useEffect(() => {
     fetchOrders();
@@ -165,38 +167,24 @@ export default function OrderTable() {
   };
 
   // Derived data calculations
-  const filteredOrders = orders.filter(
+  const filteredOrders = orders;
-    (order) => statusFilter === "all" || order.status === statusFilter
+  
-  );
+  // Use orders directly as they're already sorted by the server
-
+  const sortedOrders = filteredOrders;
-  const sortedOrders = [...filteredOrders].sort((a, b) => {
+  const paginatedOrders = sortedOrders;
-    const aValue = a[sortConfig.column];
-    const bValue = b[sortConfig.column];
-
-    if (typeof aValue === "string" && typeof bValue === "string") {
-      return sortConfig.direction === "asc"
-        ? aValue.localeCompare(bValue)
-        : bValue.localeCompare(aValue);
-    }
-
-    if (typeof aValue === "number" && typeof bValue === "number") {
-      return sortConfig.direction === "asc" ? aValue - bValue : bValue - aValue;
-    }
-
-    return 0;
-  });
-
-  const paginatedOrders = sortedOrders.slice(
-    (currentPage - 1) * itemsPerPage,
-    currentPage * itemsPerPage
-  );
 
   // Handlers
   const handleSort = (column: SortableColumns) => {
-    setSortConfig(prev => ({
+    const newDirection = sortConfig.column === column && sortConfig.direction === "asc" ? "desc" : "asc";
+    console.log(`Setting sort config: ${column} ${newDirection}`);
+    
+    setSortConfig({
       column,
-      direction: prev.column === column && prev.direction === "asc" ? "desc" : "asc"
+      direction: newDirection
-    }));
+    });
+    
+    // Force a re-fetch when sorting changes
+    fetchOrders();
   };
 
   const toggleSelection = (orderId: string) => {
@@ -365,24 +353,60 @@ export default function OrderTable() {
                       onCheckedChange={toggleAll}
                     />
                   </TableHead>
-                  <TableHead className="cursor-pointer" onClick={() => handleSort("orderId")}>
+                  <TableHead 
-                    Order ID <ArrowUpDown className="ml-2 inline h-4 w-4" />
+                    className={`cursor-pointer hover:bg-zinc-800 transition-colors p-2 select-none`}
+                    onClick={() => handleSort("orderId")}
+                  >
+                    <div className="flex items-center">
+                      Order ID 
+                      <ArrowUpDown className={`ml-2 h-4 w-4 ${sortConfig.column === 'orderId' ? 'text-primary' : 'text-muted-foreground'}`} />
+                      {sortConfig.column === 'orderId' && (
+                        <span className="ml-1 text-xs text-primary">{sortConfig.direction}</span>
+                      )}
+                    </div>
                   </TableHead>
-                  <TableHead className="cursor-pointer" onClick={() => handleSort("totalPrice")}>
+                  <TableHead 
-                    Total <ArrowUpDown className="ml-2 inline h-4 w-4" />
+                    className={`cursor-pointer hover:bg-zinc-800 transition-colors p-2 select-none`}
+                    onClick={() => handleSort("totalPrice")}
+                  >
+                    <div className="flex items-center">
+                      Total 
+                      <ArrowUpDown className={`ml-2 h-4 w-4 ${sortConfig.column === 'totalPrice' ? 'text-primary' : 'text-muted-foreground'}`} />
+                      {sortConfig.column === 'totalPrice' && (
+                        <span className="ml-1 text-xs text-primary">{sortConfig.direction}</span>
+                      )}
+                    </div>
                   </TableHead>
-                  <TableHead className="cursor-pointer" onClick={() => handleSort("status")}>
+                  <TableHead 
-                    Status <ArrowUpDown className="ml-2 inline h-4 w-4" />
+                    className={`cursor-pointer hover:bg-zinc-800 transition-colors p-2 select-none`}
+                    onClick={() => handleSort("status")}
+                  >
+                    <div className="flex items-center">
+                      Status 
+                      <ArrowUpDown className={`ml-2 h-4 w-4 ${sortConfig.column === 'status' ? 'text-primary' : 'text-muted-foreground'}`} />
+                      {sortConfig.column === 'status' && (
+                        <span className="ml-1 text-xs text-primary">{sortConfig.direction}</span>
+                      )}
+                    </div>
                   </TableHead>
-                  <TableHead className="cursor-pointer" onClick={() => handleSort("orderDate")}>
+                  <TableHead 
-                    Date <ArrowUpDown className="ml-2 inline h-4 w-4" />
+                    className={`cursor-pointer hover:bg-zinc-800 transition-colors p-2 select-none`}
+                    onClick={() => handleSort("orderDate")}
+                  >
+                    <div className="flex items-center">
+                      Date 
+                      <ArrowUpDown className={`ml-2 h-4 w-4 ${sortConfig.column === 'orderDate' ? 'text-primary' : 'text-muted-foreground'}`} />
+                      {sortConfig.column === 'orderDate' && (
+                        <span className="ml-1 text-xs text-primary">{sortConfig.direction}</span>
+                      )}
+                    </div>
                   </TableHead>
                   <TableHead>Buyer</TableHead>
                   <TableHead className="w-24 text-center">Actions</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
-                {orders.map((order) => {
+                {paginatedOrders.map((order) => {
                   const StatusIcon = statusConfig[order.status as keyof typeof statusConfig]?.icon || XCircle;
 
                   return (