Add pagination

components/tables/order-table.tsx

@@ -67,6 +67,8 @@ export default function OrderTable() {
   const [loading, setLoading] = useState(true);
   const [statusFilter, setStatusFilter] = useState("all");
   const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [totalOrders, setTotalOrders] = useState(0);
   const [sortConfig, setSortConfig] = useState<{
     column: SortableColumns;
     direction: "asc" | "desc";
@@ -75,24 +77,42 @@ export default function OrderTable() {
   const [isShipping, setIsShipping] = useState(false);
   const ITEMS_PER_PAGE = 10;
 
-  // Fetch orders with error handling
+  // Fetch orders with server-side pagination
   const fetchOrders = useCallback(async () => {
     try {
       setLoading(true);
-      const data = await clientFetch("/orders");      
+      const queryParams = new URLSearchParams({
+        page: currentPage.toString(),
+        limit: ITEMS_PER_PAGE.toString(),
+        ...(statusFilter !== "all" && { status: statusFilter }),
+      });
+
+      const data = await clientFetch(`/orders?${queryParams}`);
+      
       setOrders(data.orders || []);
+      setTotalPages(data.totalPages || 1);
+      setTotalOrders(data.totalOrders || 0);
     } catch (error) {
       toast.error("Failed to fetch orders");
       console.error("Fetch error:", error);
     } finally {
       setLoading(false);
     }
-  }, []);
+  }, [currentPage, statusFilter]);
 
   useEffect(() => {
     fetchOrders();
   }, [fetchOrders]);
 
+  // Reset to first page when filter changes
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [statusFilter]);
+
+  const handlePageChange = (newPage: number) => {
+    setCurrentPage(newPage);
+  };
+
   // Derived data calculations
   const filteredOrders = orders.filter(
     (order) => statusFilter === "all" || order.status === statusFilter
@@ -115,7 +135,6 @@ export default function OrderTable() {
     return 0;
   });
 
-  const totalPages = Math.ceil(sortedOrders.length / ITEMS_PER_PAGE);
   const paginatedOrders = sortedOrders.slice(
     (currentPage - 1) * ITEMS_PER_PAGE,
     currentPage * ITEMS_PER_PAGE
@@ -202,19 +221,24 @@ export default function OrderTable() {
     <div className="rounded-lg border shadow-sm overflow-hidden">
       {/* Toolbar */}
       <div className="p-4 flex justify-between items-center border-b">
-        <Select value={statusFilter} onValueChange={setStatusFilter}>
-          <SelectTrigger className="w-40">
-            <SelectValue placeholder="Filter Status" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">All Statuses</SelectItem>
-            {Object.keys(statusConfig).map(status => (
-              <SelectItem key={status} value={status}>
-                {status.charAt(0).toUpperCase() + status.slice(1)}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+        <div className="flex items-center gap-4">
+          <Select value={statusFilter} onValueChange={setStatusFilter}>
+            <SelectTrigger className="w-40">
+              <SelectValue placeholder="Filter Status" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Statuses</SelectItem>
+              {Object.keys(statusConfig).map(status => (
+                <SelectItem key={status} value={status}>
+                  {status.charAt(0).toUpperCase() + status.slice(1)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <div className="text-sm text-muted-foreground">
+            Total Orders: {totalOrders}
+          </div>
+        </div>
 
         <AlertDialog>
           <AlertDialogTrigger asChild>
@@ -246,47 +270,39 @@ export default function OrderTable() {
       </div>
 
       {/* Table */}
-      <Table>
-        <TableHeader className="bg-muted">
-          <TableRow>
-            <TableHead className="w-12">
-              <Checkbox
-                checked={selectedOrders.size > 0 && selectedOrders.size === paginatedOrders.length}
-                onCheckedChange={toggleAll}
-              />
-            </TableHead>
-            <TableHead className="cursor-pointer" onClick={() => handleSort("orderId")}>
-              Order ID <ArrowUpDown className="ml-2 inline h-4 w-4" />
-            </TableHead>
-            <TableHead className="cursor-pointer" onClick={() => handleSort("totalPrice")}>
-              Total <ArrowUpDown className="ml-2 inline h-4 w-4" />
-            </TableHead>
-            <TableHead className="cursor-pointer" onClick={() => handleSort("status")}>
-              Status <ArrowUpDown className="ml-2 inline h-4 w-4" />
-            </TableHead>
-            <TableHead className="cursor-pointer" onClick={() => handleSort("orderDate")}>
-              Date <ArrowUpDown className="ml-2 inline h-4 w-4" />
-            </TableHead>
-            <TableHead>Buyer</TableHead>
-            <TableHead className="text-right">Actions</TableHead>
-          </TableRow>
-        </TableHeader>
-
-        <TableBody>
-          {loading ? (
+      <div className="relative">
+        {loading && (
+          <div className="absolute inset-0 bg-background/50 flex items-center justify-center">
+            <Loader2 className="h-6 w-6 animate-spin" />
+          </div>
+        )}
+        <Table>
+          <TableHeader className="bg-muted">
             <TableRow>
-              <TableCell colSpan={7} className="text-center h-24">
-                <Loader2 className="h-8 w-8 animate-spin mx-auto" />
-              </TableCell>
+              <TableHead className="w-12">
+                <Checkbox
+                  checked={selectedOrders.size === orders.length && orders.length > 0}
+                  onCheckedChange={toggleAll}
+                />
+              </TableHead>
+              <TableHead className="cursor-pointer" onClick={() => handleSort("orderId")}>
+                Order ID <ArrowUpDown className="ml-2 inline h-4 w-4" />
+              </TableHead>
+              <TableHead className="cursor-pointer" onClick={() => handleSort("totalPrice")}>
+                Total <ArrowUpDown className="ml-2 inline h-4 w-4" />
+              </TableHead>
+              <TableHead className="cursor-pointer" onClick={() => handleSort("status")}>
+                Status <ArrowUpDown className="ml-2 inline h-4 w-4" />
+              </TableHead>
+              <TableHead className="cursor-pointer" onClick={() => handleSort("orderDate")}>
+                Date <ArrowUpDown className="ml-2 inline h-4 w-4" />
+              </TableHead>
+              <TableHead>Buyer</TableHead>
+              <TableHead className="w-24">Actions</TableHead>
             </TableRow>
-          ) : paginatedOrders.length === 0 ? (
-            <TableRow>
-              <TableCell colSpan={7} className="text-center h-24">
-                No orders found
-              </TableCell>
-            </TableRow>
-          ) : (
-            paginatedOrders.map(order => {
+          </TableHeader>
+          <TableBody>
+            {orders.map((order) => {
               const StatusIcon = statusConfig[order.status as keyof typeof statusConfig]?.icon || XCircle;
 
               return (
@@ -321,36 +337,34 @@ export default function OrderTable() {
                   </TableCell>
                 </TableRow>
               );
-            })
-          )}
-        </TableBody>
-      </Table>
+            })}
+          </TableBody>
+        </Table>
+      </div>
 
       {/* Pagination */}
-      <div className="p-4 flex justify-between items-center border-t">
-        <div className="flex-1 text-sm text-muted-foreground">
-          {selectedOrders.size} of {sortedOrders.length} row(s) selected
+      <div className="flex items-center justify-between px-4 py-4 border-t">
+        <div className="text-sm text-muted-foreground">
+          Page {currentPage} of {totalPages}
         </div>
-
-        <div className="flex items-center gap-4">
+        <div className="flex gap-2">
           <Button
             variant="outline"
             size="sm"
-            disabled={currentPage === 1}
-            onClick={() => setCurrentPage(p => Math.max(p - 1, 1))}
+            onClick={() => handlePageChange(currentPage - 1)}
+            disabled={currentPage === 1 || loading}
           >
-            <ChevronLeft className="h-4 w-4 mr-2" /> Previous
+            <ChevronLeft className="h-4 w-4" />
+            Previous
           </Button>
-          <span className="text-sm font-medium">
-            Page {currentPage} of {totalPages}
-          </span>
           <Button
             variant="outline"
             size="sm"
-            disabled={currentPage >= totalPages}
-            onClick={() => setCurrentPage(p => p + 1)}
+            onClick={() => handlePageChange(currentPage + 1)}
+            disabled={currentPage >= totalPages || loading}
           >
-            Next <ChevronRight className="h-4 w-4 ml-2" />
+            Next
+            <ChevronRight className="h-4 w-4" />
           </Button>
         </div>
       </div>