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

@@ -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>
   );

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 }) {
+export default function DesignCanvas({
-  const [color, setColor] = useState(product.colors[0]);
+  product,
-  const [size, setSize] = useState<string | null>(product.sizes[0] ?? null);
+  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;