Update page.tsx

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { fetchData } from '@/lib/data-service';
+import { clientFetch } from '@/lib/client-utils';
 import { useEffect, useState } from "react";
 import { useParams } from "next/navigation";
 import { Button } from "@/components/ui/button";
@@ -145,32 +146,15 @@ export default function OrderDetailsPage() {
       // 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(`Sending request to /orders/${orderId}/status with clientFetch`);
       console.log("Request payload:", { status: "paid" });
       
-      const response = await fetchData(
-        `${process.env.NEXT_PUBLIC_API_URL}/orders/${orderId}/status`,
-        {
-          method: "PUT",
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: `Bearer ${authToken}`,
-          },
-          body: JSON.stringify({ status: "paid" }),
-        }
-      );
+      // Use clientFetch which handles API URL and auth token automatically
+      const response = await clientFetch(`/orders/${orderId}/status`, {
+        method: "PUT",
+        body: JSON.stringify({ status: "paid" }),
+      });
       
       // Log the response
       console.log("API response:", response);