Add pagination
This commit is contained in:
NotII
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user