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> = {};
-    try {
-      const promises = productIds.map((id) =>
-        fetchData(`${process.env.NEXT_PUBLIC_API_URL}/products/${id}`, {
+    
+    // Process each product ID independently
+    const fetchPromises = productIds.map(async (id) => {
+      try {
+        const product = await 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)";
-      });
-
-    } catch (err) {
-      console.error("Failed to fetch product names:", err);
-      // Initialize product names that failed to load
-      productIds.forEach(id => {
-        if (!productNamesMap[id]) {
-          productNamesMap[id] = "Unknown Product (Deleted)";
-        }
-      });
-    }
+        });
+        productNamesMap[id] = product?.name || "Unknown Product (Deleted)";
+      } catch (err) {
+        console.error(`Failed to fetch product ${id}:`, err);
+        productNamesMap[id] = "Unknown Product (Deleted)";
+      }
+    });
+    
+    // Wait for all fetch operations to complete (successful or failed)
+    await Promise.all(fetchPromises);
+    
     return productNamesMap;
   };
 
@@ -767,4 +762,4 @@ export default function OrderDetailsPage() {
       </div>
     </Layout>
   );
-}
+}