Update order-table.tsx

components/tables/order-table.tsx

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