From 5cef95f2c6804c8179ad3ea625cc3ca1417a1144 Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Sat, 18 Jul 2026 11:47:37 +0100
Subject: [PATCH] Simplify design spec sheet and remove complex measurement
 calculations

- Remove hardcoded and incorrectly calculated dimension measurements
- Focus on design spec as reference document for manufacturing
- Prepare for adding measurement tools to personalization page instead

Next: Add rulers and size display to DesignCanvas so users see exact
measurements and dimensions while designing (not after the fact).

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 src/app/api/orders/[id]/design-spec/route.ts | 32 +++-----------------
 1 file changed, 5 insertions(+), 27 deletions(-)

diff --git a/src/app/api/orders/[id]/design-spec/route.ts b/src/app/api/orders/[id]/design-spec/route.ts
index ccd0f23..ab9dc30 100644
--- a/src/app/api/orders/[id]/design-spec/route.ts
+++ b/src/app/api/orders/[id]/design-spec/route.ts
@@ -94,33 +94,11 @@ export async function GET(req: Request, { params }: { params: { id: string } })
                 <text x="${printAreaStartX + 5}" y="${printAreaStartY - 5}" font-size="12" fill="blue" font-weight="bold">X (0cm)</text>
                 <text x="${printAreaStartX - 25}" y="${printAreaStartY + 15}" font-size="12" fill="green" font-weight="bold">Y (0cm)</text>
 
-                <!-- Design elements with markers and position dimensions in INCHES (from center) -->
-                ${designElements.map((el, idx) => {
-                  const elWidth = el.width || 58;
-                  const elHeight = el.height || 58;
-                  const elCenterX = el.x + elWidth / 2;
-                  const elCenterY = el.y + elHeight / 2;
-
-                  // Use visually measured distances from garment
-                  // These should be measured from the center of each design element
-                  const distToTopInches = "4.00";
-                  const distToRightInches = "2.00";
-                  return `
-                    <!-- Distance to top (above badge) -->
-                    <line x1="${elCenterX}" y1="${elCenterY - 30}" x2="${elCenterX}" y2="${elCenterY}" stroke="brown" stroke-width="2" opacity="0.8"/>
-                    <line x1="${elCenterX - 8}" y1="${elCenterY - 30}" x2="${elCenterX + 8}" y2="${elCenterY - 30}" stroke="brown" stroke-width="2" opacity="0.8"/>
-                    <text x="${elCenterX - 15}" y="${elCenterY - 35}" font-size="13" fill="brown" font-weight="bold" font-family="Arial" text-anchor="end">T: ${distToTopInches}"</text>
-
-                    <!-- Distance to right (right of badge) -->
-                    <line x1="${elCenterX}" y1="${elCenterY}" x2="${elCenterX + 40}" y2="${elCenterY}" stroke="brown" stroke-width="2" opacity="0.8"/>
-                    <line x1="${elCenterX + 40}" y1="${elCenterY - 8}" x2="${elCenterX + 40}" y2="${elCenterY + 8}" stroke="brown" stroke-width="2" opacity="0.8"/>
-                    <text x="${elCenterX + 50}" y="${elCenterY + 5}" font-size="13" fill="brown" font-weight="bold" font-family="Arial" text-anchor="start">R: ${distToRightInches}"</text>
-
-                    <!-- Element marker at center -->
-                    <circle cx="${elCenterX}" cy="${elCenterY}" r="5" fill="orange" opacity="0.9" stroke="white" stroke-width="1"/>
-                    <text x="${elCenterX + 10}" y="${elCenterY - 10}" font-size="12" fill="orange" font-weight="bold" font-family="monospace">E${idx + 1}</text>
-                  `;
-                }).join('')}
+                <!-- Design elements with markers -->
+                ${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('')}
               </svg>
             </div>
             <div style="margin-top: 15px; font-size: 12px; color: #666; text-align: left; max-width: 400px;">