From b97d015cd11dbda1ccbdc29ee3afbc01624d4767 Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Sat, 18 Jul 2026 19:15:53 +0100
Subject: [PATCH] Load design elements for admin editing

Pass designJson to DesignCanvas and parse it to restore the design
elements that were submitted for approval, so admins can see and edit
the actual design.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 src/app/admin/designs/[id]/edit/page.tsx |  8 ++++-
 src/components/DesignCanvas.tsx          | 38 ++++++++++++++++++++++--
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/src/app/admin/designs/[id]/edit/page.tsx b/src/app/admin/designs/[id]/edit/page.tsx
index 5fe2cd6..cac3ddb 100644
--- a/src/app/admin/designs/[id]/edit/page.tsx
+++ b/src/app/admin/designs/[id]/edit/page.tsx
@@ -110,7 +110,13 @@ export default function EditDesignPage({ params }: { params: { id: string } }) {
         </div>
 
         {/* Full Design Canvas */}
-        <DesignCanvas product={design.product} isAdminEditing={true} />
+        <DesignCanvas
+          product={design.product}
+          isAdminEditing={true}
+          initialDesignJson={design.designJson}
+          initialColor={design.color}
+          initialSize={design.size}
+        />
       </div>
     </div>
   );
diff --git a/src/components/DesignCanvas.tsx b/src/components/DesignCanvas.tsx
index 2454e23..5e67076 100644
--- a/src/components/DesignCanvas.tsx
+++ b/src/components/DesignCanvas.tsx
@@ -487,9 +487,21 @@ function generateCurvePath(type: string, radius: number, reverse: boolean = fals
   return path;
 }
 
-export default function DesignCanvas({ product, isAdminEditing = false }: { product: ProductDTO; isAdminEditing?: boolean }) {
-  const [color, setColor] = useState(product.colors[0]);
-  const [size, setSize] = useState<string | null>(product.sizes[0] ?? null);
+export default function DesignCanvas({
+  product,
+  isAdminEditing = false,
+  initialDesignJson,
+  initialColor,
+  initialSize,
+}: {
+  product: ProductDTO;
+  isAdminEditing?: boolean;
+  initialDesignJson?: string;
+  initialColor?: string;
+  initialSize?: string | null;
+}) {
+  const [color, setColor] = useState(initialColor ?? product.colors[0]);
+  const [size, setSize] = useState<string | null>(initialSize ?? (product.sizes[0] ?? null));
   const [designWidthCm, setDesignWidthCm] = useState<number | null>(null);
   const [designHeightCm, setDesignHeightCm] = useState<number | null>(null);
   const [view, setView] = useState<'front' | 'back'>('front');
@@ -527,6 +539,26 @@ export default function DesignCanvas({ product, isAdminEditing = false }: { prod
   // touching that coordinate system. Konva reads the container's actual
   // rendered (post-transform) bounding box for pointer math, so clicks/drags
   // still line up correctly at any scale.
+  useEffect(() => {
+    // Load admin-provided design for editing
+    if (isAdminEditing && initialDesignJson) {
+      try {
+        const design = JSON.parse(initialDesignJson);
+        if (design.front && Array.isArray(design.front)) {
+          setElementsFront(design.front);
+          console.log('✓ Loaded', design.front.length, 'front elements from design approval');
+        }
+        if (design.back && Array.isArray(design.back)) {
+          setElementsBack(design.back);
+          console.log('✓ Loaded', design.back.length, 'back elements from design approval');
+        }
+      } catch (e) {
+        console.error('Failed to load design approval JSON:', e);
+      }
+      return; // Skip draft loading when editing approved design
+    }
+  }, [isAdminEditing, initialDesignJson]);
+
   useEffect(() => {
     if (typeof window === 'undefined') return;