From 7a7e1964bf1a3561b39e4f067a0f89c26ce38e61 Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Sat, 18 Jul 2026 20:04:07 +0100
Subject: [PATCH] Fix: Safely parse designJson in admin order detail page

The order detail page was trying to access design.front.length and
design.back.length without safely checking if they exist. Now wraps
the parse in try-catch and uses optional chaining to handle errors
gracefully.
---
 .claude/settings.local.json        |  3 ++-
 src/app/admin/orders/[id]/page.tsx | 12 +++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 584ca81..0dafd3b 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -68,7 +68,8 @@
       "Bash(git commit -m 'Fix: Handle designJson as string in checkout API *)",
       "Bash(git commit -m 'Fix: Use personalised price in design approval cart add *)",
       "Bash(git commit -m 'Fix: Safely access designJson properties in admin orders page *)",
-      "Bash(git commit -m 'Fix: Show personalised price on design review page *)"
+      "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 *)"
     ]
   }
 }
diff --git a/src/app/admin/orders/[id]/page.tsx b/src/app/admin/orders/[id]/page.tsx
index c2100d6..f37eadc 100644
--- a/src/app/admin/orders/[id]/page.tsx
+++ b/src/app/admin/orders/[id]/page.tsx
@@ -78,9 +78,15 @@ export default async function OrderDetailPage({ params }: { params: { id: string
 
       <div className="mt-10 divide-y divide-line border-t border-line">
         {order.items.map((item) => {
-          const design = JSON.parse(item.designJson) as { front: unknown[]; back: unknown[] };
-          const hasFrontDesign = design.front.length > 0;
-          const hasBackDesign = design.back.length > 0;
+          let hasFrontDesign = false;
+          let hasBackDesign = false;
+          try {
+            const design = JSON.parse(item.designJson) as { front: unknown[]; back: unknown[] };
+            hasFrontDesign = (design.front?.length ?? 0) > 0;
+            hasBackDesign = (design.back?.length ?? 0) > 0;
+          } catch {
+            // If parsing fails, assume no custom design
+          }
           const frontPlacement = item.placementPreviewUrl || item.designPreviewUrl;
           return (
             <div key={item.id} className="py-8">