Add pagination

2025-02-25 12:44:45 +00:00
parent ab6fe4bedd
commit 56c1b4d7b9
2 changed files with 282 additions and 102 deletions
--- a/app/dashboard/orders/[id]/page.tsx
+++ b/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">
-          {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 className="flex justify-between gap-4 mt-4">
+          <div>
+            {order?.status !== "cancelled" && (
+              <AlertDialog>
+                <AlertDialogTrigger asChild>
+                  <Button variant="destructive" size="lg" disabled={isDiscarding}>
+                    {isDiscarding ? "Discarding..." : "Discard Order"}
+                  </Button>
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+                    <AlertDialogDescription>
+                      This action will discard the order and cannot be undone.
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                    <AlertDialogAction onClick={handleDiscardOrder}>
+                      Discard Order
+                    </AlertDialogAction>
+                  </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>
  );
 }
--- a/components/tables/order-table.tsx
+++ b/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>