Capture canvas preview when admin sends design to customer

Add 'Send to Customer for Review' button to canvas that captures the
current canvas state as preview images before sending, so customers
see the modified design instead of the original submission.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

src/app/admin/designs/[id]/edit/page.tsx

@@ -95,18 +95,9 @@ export default function EditDesignPage({ params }: { params: { id: string } }) {
           ← Back to design approval
         </Link>
 
-        <div className="mb-6 flex items-center justify-between">
-          <div>
-            <h1 className="font-display text-3xl mb-2">{design.product.name}</h1>
-            <p className="text-sm text-muted">Editing design for {design.customerName || design.customerEmail}</p>
-          </div>
-          <button
-            onClick={handleSendToCustomer}
-            disabled={sending}
-            className="bg-clay px-6 py-3 text-sm font-medium text-paper hover:bg-clay-dark disabled:opacity-60"
-          >
-            {sending ? 'Sending…' : 'Send to Customer for Review'}
-          </button>
+        <div className="mb-6">
+          <h1 className="font-display text-3xl mb-2">{design.product.name}</h1>
+          <p className="text-sm text-muted">Editing design for {design.customerName || design.customerEmail}</p>
         </div>
 
         {/* Full Design Canvas */}
@@ -116,6 +107,7 @@ export default function EditDesignPage({ params }: { params: { id: string } }) {
           initialDesignJson={design.designJson}
           initialColor={design.color}
           initialSize={design.size}
+          designId={params.id}
         />
       </div>
     </div>

src/app/api/designs/[id]/send-to-customer/route.ts

@@ -7,6 +7,8 @@ export async function POST(
   { params }: { params: { id: string } }
 ) {
   try {
+    const { designPreviewUrl, designPreviewUrlBack, placementPreviewUrl, placementPreviewUrlBack } = await req.json().catch(() => ({}));
+
     const design = await prisma.designApproval.findUnique({
       where: { id: params.id },
       include: { product: true },
@@ -16,10 +18,16 @@ export async function POST(
       return NextResponse.json({ error: 'Design not found' }, { status: 404 });
     }
 
-    // Update status to IN_REVIEW
+    // Update status to IN_REVIEW and save new preview if provided
+    const updateData: any = { status: 'IN_REVIEW' };
+    if (designPreviewUrl) updateData.designPreviewUrl = designPreviewUrl;
+    if (designPreviewUrlBack) updateData.designPreviewUrlBack = designPreviewUrlBack;
+    if (placementPreviewUrl) updateData.placementPreviewUrl = placementPreviewUrl;
+    if (placementPreviewUrlBack) updateData.placementPreviewUrlBack = placementPreviewUrlBack;
+
     const updated = await prisma.designApproval.update({
       where: { id: params.id },
-      data: { status: 'IN_REVIEW' },
+      data: updateData,
       include: { product: true, messages: { orderBy: { createdAt: 'asc' } } },
     });