Update page.tsx

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

@@ -121,29 +121,24 @@ export default function OrderDetailsPage() {
     authToken: string
   ): Promise<Record<string, string>> => {
     const productNamesMap: Record<string, string> = {};
+    
+    // Process each product ID independently
+    const fetchPromises = productIds.map(async (id) => {
       try {
-      const promises = productIds.map((id) =>
+        const product = await fetchData(`${process.env.NEXT_PUBLIC_API_URL}/products/${id}`, {
-        fetchData(`${process.env.NEXT_PUBLIC_API_URL}/products/${id}`, {
           method: "GET",
           headers: { Authorization: `Bearer ${authToken}` },
-        })
-      );
-      const responses = await Promise.all(promises);
-      const results = await Promise.all(responses.map((res) => res));
-  
-      results.forEach((product, index) => {
-        productNamesMap[productIds[index]] = product.name || "Unknown Product (Deleted)";
         });
-
+        productNamesMap[id] = product?.name || "Unknown Product (Deleted)";
       } catch (err) {
-      console.error("Failed to fetch product names:", err);
+        console.error(`Failed to fetch product ${id}:`, err);
-      // Initialize product names that failed to load
-      productIds.forEach(id => {
-        if (!productNamesMap[id]) {
         productNamesMap[id] = "Unknown Product (Deleted)";
       }
     });
-    }
+    
+    // Wait for all fetch operations to complete (successful or failed)
+    await Promise.all(fetchPromises);
+    
     return productNamesMap;
   };