Update page.tsx

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

@@ -109,6 +109,7 @@ export default function OrderDetailsPage() {
   const [totalPages, setTotalPages] = useState(1);
   const [currentPage, setCurrentPage] = useState(1);
   const [isAcknowledging, setIsAcknowledging] = useState(false);
+  const [isCancelling, setIsCancelling] = useState(false);
 
   const router = useRouter();
   const params = useParams();
@@ -257,6 +258,36 @@ export default function OrderDetailsPage() {
     }
   };
 
+  const handleCancelOrder = async () => {
+    try {
+      setIsCancelling(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 cancelled successfully");
+      } else {
+        throw new Error(response.error || "Failed to cancel order");
+      }
+    } catch (error: any) {
+      console.error("Failed to cancel order:", error);
+      toast.error(error.message || "Failed to cancel order");
+    } finally {
+      setIsCancelling(false);
+    }
+  };
+
   useEffect(() => {
     const fetchOrderDetails = async () => {
       try {
@@ -638,6 +669,34 @@ export default function OrderDetailsPage() {
               )}
             </div>
             <div className="flex gap-4">
+              {(order?.status === "unpaid") && (
+                <AlertDialog>
+                  <AlertDialogTrigger asChild>
+                    <Button
+                      variant="destructive"
+                      size="lg"
+                      disabled={isCancelling}
+                    >
+                      {isCancelling ? "Cancelling..." : "Cancel Order"}
+                    </Button>
+                  </AlertDialogTrigger>
+                  <AlertDialogContent>
+                    <AlertDialogHeader>
+                      <AlertDialogTitle>Cancel this order?</AlertDialogTitle>
+                      <AlertDialogDescription>
+                        This will mark the order as cancelled. This action cannot be undone.
+                      </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel>No, keep it</AlertDialogCancel>
+                      <AlertDialogAction onClick={handleCancelOrder}>
+                        Yes, cancel order
+                      </AlertDialogAction>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialog>
+              )}
+              
               {(order?.status === "unpaid" || order?.status === "paid") && (
                 <Button 
                   size="lg"