From ac61d95ac8abcc4268ce2947267a8069e21410fb Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Sat, 18 Jul 2026 10:25:37 +0100
Subject: [PATCH] Add design element details (size, position, rotation) to
 order detail page

---
 src/app/admin/orders/[id]/page.tsx | 74 ++++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)

diff --git a/src/app/admin/orders/[id]/page.tsx b/src/app/admin/orders/[id]/page.tsx
index 649dffe..201b5f3 100644
--- a/src/app/admin/orders/[id]/page.tsx
+++ b/src/app/admin/orders/[id]/page.tsx
@@ -130,6 +130,80 @@ export default async function OrderDetailPage({ params }: { params: { id: string
                   </div>
                 )}
               </div>
+
+              {(hasFrontDesign || hasBackDesign) && (
+                <div className="mt-6 space-y-4 border-t border-line pt-4">
+                  <p className="tag-label">Design details</p>
+                  {hasFrontDesign && design.front.length > 0 && (
+                    <div>
+                      <p className="text-sm font-medium">Front design elements:</p>
+                      <div className="mt-2 space-y-2 text-xs">
+                        {(design.front as any[]).map((el, idx) => (
+                          <div key={idx} className="border border-line bg-surface p-2">
+                            {el.type === 'text' ? (
+                              <div>
+                                <p className="font-mono">
+                                  Text: "{el.text}"
+                                </p>
+                                <p className="text-muted">
+                                  Font: {el.fontFamily} {el.fontSize}px · Color: {el.fill}
+                                </p>
+                                <p className="text-muted">
+                                  Position: x={Math.round(el.x)}px, y={Math.round(el.y)}px · Rotation: {Math.round(el.rotation)}°
+                                </p>
+                              </div>
+                            ) : (
+                              <div>
+                                <p className="font-mono">Image</p>
+                                <p className="text-muted">
+                                  Size: {Math.round(el.width)}px × {Math.round(el.height)}px
+                                </p>
+                                <p className="text-muted">
+                                  Position: x={Math.round(el.x)}px, y={Math.round(el.y)}px · Rotation: {Math.round(el.rotation)}°
+                                </p>
+                              </div>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                  {hasBackDesign && design.back.length > 0 && (
+                    <div>
+                      <p className="text-sm font-medium">Back design elements:</p>
+                      <div className="mt-2 space-y-2 text-xs">
+                        {(design.back as any[]).map((el, idx) => (
+                          <div key={idx} className="border border-line bg-surface p-2">
+                            {el.type === 'text' ? (
+                              <div>
+                                <p className="font-mono">
+                                  Text: "{el.text}"
+                                </p>
+                                <p className="text-muted">
+                                  Font: {el.fontFamily} {el.fontSize}px · Color: {el.fill}
+                                </p>
+                                <p className="text-muted">
+                                  Position: x={Math.round(el.x)}px, y={Math.round(el.y)}px · Rotation: {Math.round(el.rotation)}°
+                                </p>
+                              </div>
+                            ) : (
+                              <div>
+                                <p className="font-mono">Image</p>
+                                <p className="text-muted">
+                                  Size: {Math.round(el.width)}px × {Math.round(el.height)}px
+                                </p>
+                                <p className="text-muted">
+                                  Position: x={Math.round(el.x)}px, y={Math.round(el.y)}px · Rotation: {Math.round(el.rotation)}°
+                                </p>
+                              </div>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
             </div>
           );
         })}