Update page.tsx

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

@@ -142,7 +142,24 @@ export default function OrderDetailsPage() {
 
   const handleMarkAsPaid = async () => {
     try {
-      const authToken = document.cookie.split("Authorization=")[1];
+      // Add a loading state to give feedback
+      const loadingToast = toast.loading("Marking order as paid...");
+      
+      const authToken = document.cookie
+        .split("; ")
+        .find((row) => row.startsWith("Authorization="))
+        ?.split("=")[1];
+      
+      if (!authToken) {
+        toast.dismiss(loadingToast);
+        toast.error("Authentication error - please log in again");
+        return;
+      }
+      
+      // Log the request for debugging
+      console.log(`Sending request to ${process.env.NEXT_PUBLIC_API_URL}/orders/${orderId}/status`);
+      console.log("Request payload:", { status: "paid" });
+      
       const response = await fetchData(
         `${process.env.NEXT_PUBLIC_API_URL}/orders/${orderId}/status`,
         {
@@ -155,16 +172,46 @@ export default function OrderDetailsPage() {
         }
       );
       
+      // Log the response
+      console.log("API response:", response);
+
+      toast.dismiss(loadingToast);
+      
       if (response && response.message === "Order status updated successfully") {
-        setIsPaid(true); // Update isPaid state
-        setOrder((prevOrder) => (prevOrder ? { ...prevOrder, status: "paid" } : null)); // Update order status
-        toast.success("Order marked as paid successfully"); // Use toast for consistency
+        // Update both states
+        setIsPaid(true);
+        setOrder((prevOrder) => (prevOrder ? { ...prevOrder, status: "paid" } : null));
+        toast.success("Order marked as paid successfully");
       } else {
-        throw new Error(response.error || "Failed to mark order as paid");
+        // Handle unexpected response format
+        console.error("Unexpected response format:", response);
+        throw new Error(
+          response.error || response.message || "Failed to mark order as paid"
+        );
       }
     } catch (error: any) {
       console.error("Failed to mark order as paid:", error);
-      toast.error(error.message || "Failed to mark order as paid");
+      
+      // More detailed error handling
+      let errorMessage = "Failed to mark order as paid";
+      
+      if (error.message) {
+        errorMessage += `: ${error.message}`;
+      }
+      
+      if (error.response) {
+        try {
+          const errorData = await error.response.json();
+          console.error("Error response data:", errorData);
+          if (errorData.message) {
+            errorMessage = errorData.message;
+          }
+        } catch (e) {
+          console.error("Could not parse error response:", e);
+        }
+      }
+      
+      toast.error(errorMessage);
     }
   };