Update page.tsx

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

@@ -24,7 +24,7 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import { Clipboard, Truck, Package, ArrowRight, ChevronDown } from "lucide-react";
+import { Clipboard, Truck, Package, ArrowRight, ChevronDown, CheckCircle2 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { toast } from "sonner";
 import {
@@ -91,6 +91,7 @@ export default function OrderDetailsPage() {
   const [isSending, setIsSending] = useState(false);
   const [isMarkingShipped, setIsMarkingShipped] = useState(false);
   const [isDiscarding, setIsDiscarding] = useState(false);
+  const [isMarkingCompleted, setIsMarkingCompleted] = useState(false);
   const [nextOrderId, setNextOrderId] = useState<string | null>(null);
   const [prevOrderId, setPrevOrderId] = useState<string | null>(null);
   const [totalOrders, setTotalOrders] = useState(0);
@@ -218,6 +219,36 @@ export default function OrderDetailsPage() {
     }
   };
 
+  const handleMarkAsCompleted = async () => {
+    try {
+      setIsMarkingCompleted(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: "completed" }),
+        }
+      );
+
+      if (response && response.message === "Order status updated successfully") {
+        setOrder((prevOrder) => prevOrder ? { ...prevOrder, status: "completed" } : null);
+        toast.success("Order marked as completed!");
+      } else {
+        throw new Error(response.error || "Failed to mark order as completed");
+      }
+    } catch (error: any) {
+      console.error("Failed to mark order as completed:", error);
+      toast.error(error.message || "Failed to mark order as completed");
+    } finally {
+      setIsMarkingCompleted(false);
+    }
+  };
+
   const handleDiscardOrder = async () => {
     try {
       setIsDiscarding(true);
@@ -655,6 +686,18 @@ export default function OrderDetailsPage() {
                   {isMarkingShipped ? "Updating..." : "Mark as Shipped"}
                 </Button>
               )}
+
+              {(order?.status === "paid" || order?.status === "shipped" || order?.status === "acknowledged") && (
+                <Button 
+                  size="lg" 
+                  onClick={handleMarkAsCompleted}
+                  disabled={isMarkingCompleted}
+                  className="bg-green-600 hover:bg-green-700"
+                >
+                  <CheckCircle2 className="w-5 h-5 mr-2" />
+                  {isMarkingCompleted ? "Updating..." : "Mark as Completed"}
+                </Button>
+              )}
             </div>
           </div>
         </div>