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

@@ -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 *)"
     ]
   }
 }

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">
+        ${designElements && designElements.length > 0 ? `
-          <strong>Printable Area:</strong> ${printAreaWidthMm}mm × ${printAreaHeightMm}mm (${convertToCm(printAreaWidthPx)} cm × ${convertToCm(printAreaHeightPx)} cm)
+          <div class="print-area-info">
-        </div>
+            <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>
       `;
     };