From 46e666c6a5600b9a5d84f66f8d807f905b7b7970 Mon Sep 17 00:00:00 2001
From: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Date: Sat, 11 Jul 2026 03:38:25 +0530
Subject: [PATCH] fix for nested x-display-format

---
 react-openapi/src/components/ResourceDetail.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/react-openapi/src/components/ResourceDetail.tsx b/react-openapi/src/components/ResourceDetail.tsx
index c7a3f5e..188c943 100644
--- a/react-openapi/src/components/ResourceDetail.tsx
+++ b/react-openapi/src/components/ResourceDetail.tsx
@@ -64,7 +64,19 @@ export function ResourceDetail({ resource, basePath }: ResourceDetailProps) {
           Back
         </Button>
         <Typography variant="h5" fontWeight={700} sx={{ flex: 1 }}>
-          {applyDisplayFormat(data, resource.displayFormat)}
+          {applyDisplayFormat(
+            Object.fromEntries(
+              resource.orderedFields.map((field) => {
+                const value = data[field.name];
+                if (field.fk && typeof value === "object" && value != null) {
+                  const target = allResources.find((r) => r.name === field.fk!.resource);
+                  if (target) return [field.name, applyDisplayFormat(value, target.displayFormat)];
+                }
+                return [field.name, value];
+              })
+            ),
+            resource.displayFormat
+          )}
         </Typography>
         {resource.operations.update && (
           <Button variant="contained" startIcon={<EditIcon />} onClick={() => navigate(`${basePath}/${resource.name}/${id}/edit`)}>