Add pagination

app/dashboard/orders/[id]/page.tsx

@@ -3,7 +3,6 @@
 import { fetchData } from '@/lib/data-service';
 import { useEffect, useState } from "react";
 import { useParams } from "next/navigation";
-import Layout from "@/components/layout/layout";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -25,9 +24,20 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import { Clipboard, Truck, Package } from "lucide-react";
+import { Clipboard, Truck, Package, ArrowRight } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { toast } from "sonner";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
 
 interface Order {
   orderId: string;
@@ -70,6 +80,13 @@ export default function OrderDetailsPage() {
   const [isPaid, setIsPaid] = useState(false);
   const [isSending, setIsSending] = useState(false);
   const [isMarkingShipped, setIsMarkingShipped] = useState(false);
+  const [isDiscarding, setIsDiscarding] = useState(false);
+  const [nextOrderId, setNextOrderId] = useState<string | null>(null);
+  const [prevOrderId, setPrevOrderId] = useState<string | null>(null);
+  const [totalOrders, setTotalOrders] = useState(0);
+  const [currentOrderNumber, setCurrentOrderNumber] = useState(0);
+  const [totalPages, setTotalPages] = useState(1);
+  const [currentPage, setCurrentPage] = useState(1);
 
   const router = useRouter();
   const params = useParams();
@@ -160,6 +177,36 @@ export default function OrderDetailsPage() {
     }
   };
 
+  const handleDiscardOrder = async () => {
+    try {
+      setIsDiscarding(true);
+      const authToken = document.cookie.split("Authorization=")[1];
+      const response = await fetchData(
+        `${process.env.NEXT_PUBLIC_API_URL}/orders/${orderId}`,
+        {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${authToken}`,
+          },
+          body: JSON.stringify({ status: "cancelled" }),
+        }
+      );
+
+      if (response && response.message === "Order status updated successfully") {
+        setOrder((prevOrder) => prevOrder ? { ...prevOrder, status: "cancelled" } : null);
+        toast.success("Order discarded successfully!");
+      } else {
+        throw new Error(response.error || "Failed to discard order");
+      }
+    } catch (error: any) {
+      console.error("Failed to discard order:", error);
+      toast.error(error.message || "Failed to discard order");
+    } finally {
+      setIsDiscarding(false);
+    }
+  };
+
   useEffect(() => {
     const fetchOrderDetails = async () => {
       try {
@@ -199,6 +246,60 @@ export default function OrderDetailsPage() {
     fetchOrderDetails();
   }, [orderId]);
 
+  useEffect(() => {
+    const fetchAdjacentOrders = async () => {
+      try {
+        const authToken = document.cookie.split("Authorization=")[1];
+        
+        if (!order?.orderId) return;
+
+        // Fetch previous and next orders in parallel
+        const [prevOrdersRes, nextOrdersRes] = await Promise.all([
+          // Get one order before the current one (newer orders)
+          fetchData(
+            `${process.env.NEXT_PUBLIC_API_URL}/orders?limit=1&after=${order.orderId}`,
+            {
+              method: "GET",
+              headers: { Authorization: `Bearer ${authToken}` },
+            }
+          ),
+          // Get one order after the current one (older orders)
+          fetchData(
+            `${process.env.NEXT_PUBLIC_API_URL}/orders?limit=1&before=${order.orderId}`,
+            {
+              method: "GET",
+              headers: { Authorization: `Bearer ${authToken}` },
+            }
+          )
+        ]);
+
+        // Set previous (newer) order ID if exists
+        if (prevOrdersRes?.orders?.length > 0) {
+          setPrevOrderId(prevOrdersRes.orders[0]._id);
+        } else {
+          setPrevOrderId(null);
+        }
+
+        // Set next (older) order ID if exists
+        if (nextOrdersRes?.orders?.length > 0) {
+          setNextOrderId(nextOrdersRes.orders[0]._id);
+        } else {
+          setNextOrderId(null);
+        }
+
+        console.log('Current order:', order.orderId);
+        console.log('Newer order:', prevOrdersRes?.orders?.[0]?._id);
+        console.log('Older order:', nextOrdersRes?.orders?.[0]?._id);
+      } catch (error) {
+        console.error("Failed to fetch adjacent orders:", error);
+      }
+    };
+
+    if (order) {
+      fetchAdjacentOrders();
+    }
+  }, [order]);
+
   const handleAddTracking = async () => {
     if (!trackingNumber) {
       toast.error("Please enter a tracking number");
@@ -249,10 +350,12 @@ export default function OrderDetailsPage() {
     return <div className="text-center text-red-500 py-10">Error: {error}</div>;
 
   return (
-    <Layout>
+    <div className="container mx-auto px-4 py-8">
       <div className="space-y-6">
         <div className="flex justify-between items-center">
-          <h1 className="text-3xl font-bold">Order Details: {order?.orderId}</h1>
+          <div className="flex items-center gap-4">
+            <h1 className="text-3xl font-bold">Order Details: {order?.orderId}</h1>
+          </div>
           <div className="flex items-center gap-2">
             <Badge variant={getStatusVariant(order?.status || '')}>
               {order?.status}
@@ -383,31 +486,94 @@ export default function OrderDetailsPage() {
           </div>
         </div>
 
-        <div className="flex justify-end space-x-4">
+        <div className="flex justify-between gap-4 mt-4">
-          {order?.status === "unpaid" && (
+          <div>
-            <Button 
+            {order?.status !== "cancelled" && (
-              size="lg" 
+              <AlertDialog>
-              onClick={handleMarkAsPaid} 
+                <AlertDialogTrigger asChild>
-              disabled={isPaid}
+                  <Button variant="destructive" size="lg" disabled={isDiscarding}>
-              className="bg-emerald-600 hover:bg-emerald-700"
+                    {isDiscarding ? "Discarding..." : "Discard Order"}
-            >
+                  </Button>
-              {isPaid ? "Order Marked as Paid" : "Mark Order as Paid"}
+                </AlertDialogTrigger>
-            </Button>
+                <AlertDialogContent>
-          )}
+                  <AlertDialogHeader>
-          
+                    <AlertDialogTitle>Are you sure?</AlertDialogTitle>
-          {order?.status === "paid" && (
+                    <AlertDialogDescription>
-            <Button 
+                      This action will discard the order and cannot be undone.
-              size="lg" 
+                    </AlertDialogDescription>
-              onClick={handleMarkAsShipped}
+                  </AlertDialogHeader>
-              disabled={isMarkingShipped}
+                  <AlertDialogFooter>
-              className="bg-blue-600 hover:bg-blue-700"
+                    <AlertDialogCancel>Cancel</AlertDialogCancel>
-            >
+                    <AlertDialogAction onClick={handleDiscardOrder}>
-              <Truck className="w-5 h-5 mr-2" />
+                      Discard Order
-              {isMarkingShipped ? "Updating..." : "Mark as Shipped"}
+                    </AlertDialogAction>
-            </Button>
+                  </AlertDialogFooter>
-          )}
+                </AlertDialogContent>
+              </AlertDialog>
+            )}
+          </div>
+          <div className="flex gap-4">
+            {order?.status === "unpaid" && (
+              <Button 
+                size="lg" 
+                onClick={handleMarkAsPaid} 
+                disabled={isPaid}
+                className="bg-emerald-600 hover:bg-emerald-700"
+              >
+                {isPaid ? "Order Marked as Paid" : "Mark Order as Paid"}
+              </Button>
+            )}
+            
+            {order?.status === "paid" && (
+              <Button 
+                size="lg" 
+                onClick={handleMarkAsShipped}
+                disabled={isMarkingShipped}
+                className="bg-blue-600 hover:bg-blue-700"
+              >
+                <Truck className="w-5 h-5 mr-2" />
+                {isMarkingShipped ? "Updating..." : "Mark as Shipped"}
+              </Button>
+            )}
+          </div>
+        </div>
+
+        {/* Order Navigation */}
+        <div className="flex justify-between items-center pt-8 mt-8 border-t">
+          <div className="w-[140px]">
+            {prevOrderId && (
+              <Button
+                variant="outline"
+                size="lg"
+                onClick={() => {
+                  setLoading(true);
+                  router.push(`/dashboard/orders/${prevOrderId}`);
+                }}
+                className="flex items-center"
+              >
+                <span className="mr-2">←</span>
+                Newer
+              </Button>
+            )}
+          </div>
+          <div className="w-[140px] flex justify-end">
+            {nextOrderId && (
+              <Button
+                variant="outline"
+                size="lg"
+                onClick={() => {
+                  setLoading(true);
+                  router.push(`/dashboard/orders/${nextOrderId}`);
+                }}
+                className="flex items-center"
+              >
+                Older
+                <span className="ml-2">→</span>
+              </Button>
+            )}
+          </div>
         </div>
       </div>
-    </Layout>
+    </div>
   );
 }

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}>
+        <div className="flex items-center gap-4">
-          <SelectTrigger className="w-40">
+          <Select value={statusFilter} onValueChange={setStatusFilter}>
-            <SelectValue placeholder="Filter Status" />
+            <SelectTrigger className="w-40">
-          </SelectTrigger>
+              <SelectValue placeholder="Filter Status" />
-          <SelectContent>
+            </SelectTrigger>
-            <SelectItem value="all">All Statuses</SelectItem>
+            <SelectContent>
-            {Object.keys(statusConfig).map(status => (
+              <SelectItem value="all">All Statuses</SelectItem>
-              <SelectItem key={status} value={status}>
+              {Object.keys(statusConfig).map(status => (
-                {status.charAt(0).toUpperCase() + status.slice(1)}
+                <SelectItem key={status} value={status}>
-              </SelectItem>
+                  {status.charAt(0).toUpperCase() + status.slice(1)}
-            ))}
+                </SelectItem>
-          </SelectContent>
+              ))}
-        </Select>
+            </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>
+      <div className="relative">
-        <TableHeader className="bg-muted">
+        {loading && (
-          <TableRow>
+          <div className="absolute inset-0 bg-background/50 flex items-center justify-center">
-            <TableHead className="w-12">
+            <Loader2 className="h-6 w-6 animate-spin" />
-              <Checkbox
+          </div>
-                checked={selectedOrders.size > 0 && selectedOrders.size === paginatedOrders.length}
+        )}
-                onCheckedChange={toggleAll}
+        <Table>
-              />
+          <TableHeader className="bg-muted">
-            </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 ? (
             <TableRow>
-              <TableCell colSpan={7} className="text-center h-24">
+              <TableHead className="w-12">
-                <Loader2 className="h-8 w-8 animate-spin mx-auto" />
+                <Checkbox
-              </TableCell>
+                  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 ? (
+          </TableHeader>
-            <TableRow>
+          <TableBody>
-              <TableCell colSpan={7} className="text-center h-24">
+            {orders.map((order) => {
-                No orders found
-              </TableCell>
-            </TableRow>
-          ) : (
-            paginatedOrders.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>
-        </TableBody>
+        </Table>
-      </Table>
+      </div>
 
       {/* Pagination */}
-      <div className="p-4 flex justify-between items-center border-t">
+      <div className="flex items-center justify-between px-4 py-4 border-t">
-        <div className="flex-1 text-sm text-muted-foreground">
+        <div className="text-sm text-muted-foreground">
-          {selectedOrders.size} of {sortedOrders.length} row(s) selected
+          Page {currentPage} of {totalPages}
         </div>
-
+        <div className="flex gap-2">
-        <div className="flex items-center gap-4">
           <Button
             variant="outline"
             size="sm"
-            disabled={currentPage === 1}
+            onClick={() => handlePageChange(currentPage - 1)}
-            onClick={() => setCurrentPage(p => Math.max(p - 1, 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={() => handlePageChange(currentPage + 1)}
-            onClick={() => setCurrentPage(p => p + 1)}
+            disabled={currentPage >= totalPages || loading}
           >
-            Next <ChevronRight className="h-4 w-4 ml-2" />
+            Next
+            <ChevronRight className="h-4 w-4" />
           </Button>
         </div>
       </div>