From 9dc62210b1663a9d47ecb9ed1dcb4af1073088a8 Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Sat, 18 Jul 2026 20:09:24 +0100
Subject: [PATCH] Improve: Design specification sheet now shows previews and
 info

- Always show design sections if preview images exist, even without elements
- Add design preview images to the spec sheet
- Add better error handling for designJson parsing
- Show more useful information even when elements table is empty
- Makes spec sheet more useful for reference and planning
---
 .claude/settings.local.json                  |  4 ++-
 src/app/api/orders/[id]/design-spec/route.ts | 28 ++++++++++++++++----
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 0dafd3b..51f6a06 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -69,7 +69,9 @@
       "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: Safely parse designJson in admin order detail 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 *)"
     ]
   }
 }
diff --git a/src/app/api/orders/[id]/design-spec/route.ts b/src/app/api/orders/[id]/design-spec/route.ts
index dd03470..bed27ce 100644
--- a/src/app/api/orders/[id]/design-spec/route.ts
+++ b/src/app/api/orders/[id]/design-spec/route.ts
@@ -18,7 +18,13 @@ export async function GET(req: Request, { params }: { params: { id: string } })
       return NextResponse.json({ error: 'No items in order' }, { status: 400 });
     }
 
-    const design = JSON.parse(item.designJson) as { front: any[]; back: any[] };
+    let design: { front: any[]; back: any[] } = { front: [], back: [] };
+    try {
+      design = JSON.parse(item.designJson) as { front: any[]; back: any[] };
+    } catch (e) {
+      console.error('Error parsing designJson:', e);
+      // Continue with empty design
+    }
     const product = await prisma.product.findUnique({
       where: { id: item.productId },
     });
@@ -62,15 +68,25 @@ export async function GET(req: Request, { params }: { params: { id: string } })
     };
 
     const generateDesignSection = (designElements: any[], side: 'Front' | 'Back', placement: string | null, designPreview: string | null) => {
-      if (!designElements || designElements.length === 0) return '';
+      // Always show the section if we have preview images, even without elements
+      if ((!designElements || designElements.length === 0) && !placement && !designPreview) return '';
 
       return `
       <div class="spec-section">
         <h2>${side} Design</h2>
 
-        <div class="print-area-info">
-          <strong>Printable Area:</strong> ${printAreaWidthMm}mm × ${printAreaHeightMm}mm (${convertToCm(printAreaWidthPx)} cm × ${convertToCm(printAreaHeightPx)} cm)
-        </div>
+        ${designElements && designElements.length > 0 ? `
+          <div class="print-area-info">
+            <strong>Printable Area:</strong> ${printAreaWidthMm}mm × ${printAreaHeightMm}mm (${convertToCm(printAreaWidthPx)} cm × ${convertToCm(printAreaHeightPx)} cm)
+          </div>
+        ` : ''}
+
+        ${designPreview ? `
+          <div class="preview-container">
+            <p><em>Design preview (transparent background)</em></p>
+            <img src="${designPreview}" alt="${side} design preview" style="max-height: 300px; width: auto; border: 1px solid #ddd; margin: 10px 0;">
+          </div>
+        ` : ''}
 
         ${placement ? `
           <div class="mockup-container">
@@ -127,6 +143,7 @@ export async function GET(req: Request, { params }: { params: { id: string } })
           </div>
         ` : ''}
 
+        ${designElements && designElements.length > 0 ? `
         <table class="measurements-table">
           <thead>
             <tr>
@@ -162,6 +179,7 @@ export async function GET(req: Request, { params }: { params: { id: string } })
             `).join('')}
           </tbody>
         </table>
+        ` : `<p style="color: #666; font-style: italic;">No individual design elements to measure.</p>`}
       </div>
       `;
     };