From 121d469d0628c59f41170921170bffce0111670f Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Sat, 18 Jul 2026 19:59:52 +0100
Subject: [PATCH] Fix: Safely access designJson properties in admin orders page

The admin orders page was trying to access .front.length and .back.length
without safely checking if they exist, causing 'Cannot read properties of
undefined' error. Now uses optional chaining and try-catch to handle parsing
errors gracefully.
---
 .claude/settings.local.json   | 3 ++-
 src/app/admin/orders/page.tsx | 8 ++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index a6fb061..482f7f8 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -66,7 +66,8 @@
       "Bash(git commit -m 'Fix price display issues and layout in design review page *)",
       "Bash(git commit -m 'Fix: Calculate effectivePrice in design API endpoints *)",
       "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: Use personalised price in design approval cart add *)",
+      "Bash(git commit -m 'Fix: Safely access designJson properties in admin orders page *)"
     ]
   }
 }
diff --git a/src/app/admin/orders/page.tsx b/src/app/admin/orders/page.tsx
index b6f2a77..ff0d2e9 100644
--- a/src/app/admin/orders/page.tsx
+++ b/src/app/admin/orders/page.tsx
@@ -95,8 +95,12 @@ export default async function OrdersPage({ searchParams }: { searchParams: { arc
         <div className="mt-8 divide-y divide-line border-t border-line">
           {orders.map((order) => {
             const hasPersonalised = order.items.some((item) => {
-              const design = JSON.parse(item.designJson) as { front: unknown[]; back: unknown[] };
-              return design.front.length > 0 || design.back.length > 0;
+              try {
+                const design = JSON.parse(item.designJson) as { front: unknown[]; back: unknown[] };
+                return (design.front?.length ?? 0) > 0 || (design.back?.length ?? 0) > 0;
+              } catch {
+                return false;
+              }
             });
             return (
               <div key={order.id} className="flex flex-wrap items-center gap-x-4 gap-y-2 py-4">