Add design approval workflow infrastructure: PATCH endpoint, email notifications, and message types

- Add PATCH method to /api/designs/[id]/route.ts for status updates
- Create sendDesignReadyForReview email template for customer notifications
- Enhance /api/designs/[id]/messages to support messageType field (MESSAGE | CHANGE_REQUEST)
- Add database migration for messageType field with MESSAGE default

This completes the backend infrastructure for the multi-step design approval workflow:
1. Admin edits and sends design to customer for review
2. Customer approves design or requests changes
3. Admin receives notifications for change requests

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

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

@@ -0,0 +1,100 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import dynamic from 'next/dynamic';
+
+interface DesignApproval {
+  id: string;
+  customerEmail: string;
+  customerName: string | null;
+  productId: string;
+  product: {
+    id: string;
+    name: string;
+    basePrice: number;
+    personalisedPrice: number;
+    onSale: boolean;
+    effectivePrice: number;
+    colors: string[];
+    sizes: string[];
+    showOnPersonalised: boolean;
+    imageUrl: string | null;
+    imageUrlBack: string | null;
+    photoRecolorable: boolean;
+    colorPhotos: Record<string, string>;
+    colorPhotosBack: Record<string, string>;
+    printArea: string;
+    printAreaBack: string | null;
+    mockup: string;
+    referenceWidthCm: number | null;
+    referenceHeightCm: number | null;
+  };
+  designJson: string;
+  color: string;
+  size: string | null;
+  status: string;
+}
+
+const DesignCanvas = dynamic(() => import('@/components/DesignCanvas'), { ssr: false });
+
+export default function EditDesignPage({ params }: { params: { id: string } }) {
+  const router = useRouter();
+  const [design, setDesign] = useState<DesignApproval | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [sending, setSending] = useState(false);
+
+  useEffect(() => {
+    fetch(`/api/designs/${params.id}`)
+      .then((r) => r.json())
+      .then(setDesign)
+      .finally(() => setLoading(false));
+  }, [params.id]);
+
+  const handleSendToCustomer = async () => {
+    setSending(true);
+    try {
+      const res = await fetch(`/api/designs/${params.id}/send-to-customer`, {
+        method: 'POST',
+      });
+      if (res.ok) {
+        router.push(`/admin/designs/${params.id}`);
+      } else {
+        alert('Failed to send to customer');
+      }
+    } finally {
+      setSending(false);
+    }
+  };
+
+  if (loading) return <div className="p-6">Loading...</div>;
+  if (!design) return <div className="p-6 text-sm text-muted">Design not found.</div>;
+
+  return (
+    <div className="min-h-screen bg-paper">
+      <div className="mx-auto max-w-7xl px-6 py-8">
+        <Link href={`/admin/designs/${params.id}`} className="text-sm text-clay hover:text-clay-dark mb-4 inline-block">
+          ← 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>
+
+        {/* Full Design Canvas */}
+        <DesignCanvas product={design.product} />
+      </div>
+    </div>
+  );
+}

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

@@ -4,7 +4,6 @@ import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import DesignApprovalChat from '@/components/DesignApprovalChat';
-import AdminDesignEditor from '@/components/AdminDesignEditor';
 
 interface DesignApproval {
   id: string;
@@ -34,7 +33,6 @@ export default function DesignDetailPage({ params }: { params: { id: string } })
   const [loading, setLoading] = useState(true);
   const [approving, setApproving] = useState(false);
   const [deleting, setDeleting] = useState(false);
-  const [editingDesign, setEditingDesign] = useState(false);
 
   useEffect(() => {
     fetch(`/api/designs/${params.id}`)
@@ -75,19 +73,6 @@ export default function DesignDetailPage({ params }: { params: { id: string } })
     }
   };
 
-  const handleEditorSave = (designJson: string, previewUrl: string) => {
-    setDesign((prev) =>
-      prev
-        ? {
-            ...prev,
-            designJson,
-            designPreviewUrl: previewUrl,
-          }
-        : null
-    );
-    setEditingDesign(false);
-  };
-
   return (
     <div className="mx-auto max-w-6xl px-6 py-12">
       <Link href="/admin/designs" className="text-sm text-clay hover:text-clay-dark mb-4 inline-block">
@@ -100,27 +85,18 @@ export default function DesignDetailPage({ params }: { params: { id: string } })
         {/* Design Preview & Editor */}
         <div className="border border-line bg-surface p-6">
           <div className="flex items-center justify-between mb-4">
-            <p className="tag-label">Design Editor</p>
-            {!editingDesign && design.status === 'PENDING' && (
-              <button
-                onClick={() => setEditingDesign(true)}
-                className="text-xs px-3 py-1 border border-clay text-clay hover:bg-clay/10"
+            <p className="tag-label">Design Preview</p>
+            {design.status === 'PENDING' && (
+              <Link
+                href={`/admin/designs/${params.id}/edit`}
+                className="text-xs px-3 py-2 border border-clay text-clay hover:bg-clay/10 inline-block"
               >
-                Edit design
-              </button>
+                Open full editor →
+              </Link>
             )}
           </div>
 
-          {editingDesign ? (
-            <AdminDesignEditor
-              designId={params.id}
-              designJson={design.designJson}
-              designPreviewUrl={design.designPreviewUrl}
-              placementPreviewUrl={design.placementPreviewUrl}
-              onSave={handleEditorSave}
-            />
-          ) : (
-            <div className="space-y-4">
+          <div className="space-y-4">
               <div>
                 <p className="text-sm text-muted mb-2">Design preview (transparent)</p>
                 <img
@@ -163,7 +139,6 @@ export default function DesignDetailPage({ params }: { params: { id: string } })
                 </div>
               )}
             </div>
-          )}
         </div>
 
         {/* Customer Details & Chat */}