Fix: Route photo requests to design canvas instead of approval upload

When admin clicks 'Start a design for this' on a photo request, now routes
to the design canvas at /made-to-order/{productSlug} with the custom photo
passed as a query parameter. The DesignCanvas component now accepts and
displays the custom photo as the background for designing.

Changes:
- Updated photo request link to go to design canvas page
- Added customPhoto query parameter to pass custom image URL
- Updated DesignCanvas to accept and use customPhoto prop
- Modified renderPhoto() to display custom photo when provided
- Updated getPhotoInfo() to use custom photo for compositing

src/app/admin/custom-requests/[id]/page.tsx

@@ -18,10 +18,8 @@ export default async function CustomRequestDetailPage({ params }: { params: { id
   const whatsappDigits = request.customerPhone ? request.customerPhone.replace(/\D/g, '') : null;
   const whatsappMessage = `Hi ${request.customerName}, thanks for sending over your photo for a ${request.product.name} — we're working on it!`;
 
-  const newProofParams = new URLSearchParams({
-    productId: request.productId,
-    customerName: request.customerName,
-    customerEmail: request.customerEmail,
+  const designParams = new URLSearchParams({
+    customPhoto: request.imageDataUrl,
   });
 
   return (
@@ -63,7 +61,7 @@ export default async function CustomRequestDetailPage({ params }: { params: { id
         <DownloadPhotoButton photoUrl={request.imageDataUrl} customerName={request.customerName} />
 
         <Link
-          href={`/admin/proofs/new?${newProofParams.toString()}`}
+          href={`/made-to-order/${request.product.slug}?${designParams.toString()}`}
           className="bg-clay px-6 py-3 text-sm font-medium text-paper hover:bg-clay-dark"
         >
           Start a design for this

src/app/made-to-order/[slug]/page.tsx

@@ -7,7 +7,13 @@ import ProductCard from '@/components/ProductCard';
 
 const DesignCanvas = dynamic(() => import('@/components/DesignCanvas'), { ssr: false });
 
-export default async function ProductDetailPage({ params }: { params: { slug: string } }) {
+export default async function ProductDetailPage({
+  params,
+  searchParams,
+}: {
+  params: { slug: string };
+  searchParams: { customPhoto?: string };
+}) {
   const activePromotions = await fetchActivePromotions();
 
   const row = await prisma.product.findUnique({ where: { slug: params.slug } });
@@ -23,7 +29,7 @@ export default async function ProductDetailPage({ params }: { params: { slug: st
 
   return (
     <div className="mx-auto max-w-6xl px-6 py-12">
-      <DesignCanvas product={product} />
+      <DesignCanvas product={product} customPhoto={searchParams.customPhoto} />
 
       {related.length > 0 && (
         <section className="mt-20 border-t border-line pt-12">