From 06cfe52a955c22bfbb02e21acf79b7075a348726 Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Sat, 18 Jul 2026 20:20:21 +0100
Subject: [PATCH] Fix: Handle undefined designElements in design spec SVG
 rendering

The SVG element markers were trying to map over designElements without
checking if it was defined first. Now safely checks for array existence
before calling .map() to prevent errors when generating spec sheets.
---
 .claude/settings.local.json                  | 3 ++-
 src/app/api/orders/[id]/design-spec/route.ts | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 51f6a06..6ea4998 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -71,7 +71,8 @@
       "Bash(git commit -m 'Fix: Show personalised price on design review page *)",
       "Bash(git commit -m 'Fix: Safely parse designJson in admin order detail page *)",
       "Bash(xargs grep -l \"design-spec\")",
-      "Bash(git commit -m 'Improve: Design specification sheet now shows previews and info *)"
+      "Bash(git commit -m 'Improve: Design specification sheet now shows previews and info *)",
+      "Bash(git commit -m 'Fix: Handle undefined designElements in design spec SVG rendering *)"
     ]
   }
 }
diff --git a/src/app/api/orders/[id]/design-spec/route.ts b/src/app/api/orders/[id]/design-spec/route.ts
index bed27ce..fb72231 100644
--- a/src/app/api/orders/[id]/design-spec/route.ts
+++ b/src/app/api/orders/[id]/design-spec/route.ts
@@ -126,10 +126,10 @@ export async function GET(req: Request, { params }: { params: { id: string } })
                 <text x="${printAreaStartX - 25}" y="${printAreaStartY + 15}" font-size="12" fill="green" font-weight="bold">Y (0cm)</text>
 
                 <!-- Design elements with markers -->
-                ${designElements.map((el, idx) => `
+                ${designElements && designElements.length > 0 ? designElements.map((el, idx) => `
                   <circle cx="${el.x}" cy="${el.y}" r="5" fill="orange" opacity="0.9" stroke="white" stroke-width="1"/>
                   <text x="${el.x + 10}" y="${el.y - 10}" font-size="12" fill="orange" font-weight="bold" font-family="monospace">E${idx + 1}</text>
-                `).join('')}
+                `).join('') : ''}
               </svg>
             </div>
             <div style="margin-top: 15px; font-size: 12px; color: #666; text-align: left; max-width: 400px;">