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/components/DesignCanvas.tsx

@@ -494,6 +494,7 @@ export default function DesignCanvas({
   initialColor,
   initialSize,
   designId,
+  customPhoto,
 }: {
   product: ProductDTO;
   isAdminEditing?: boolean;
@@ -501,6 +502,7 @@ export default function DesignCanvas({
   initialColor?: string;
   initialSize?: string | null;
   designId?: string;
+  customPhoto?: string;
 }) {
   const [color, setColor] = useState(initialColor ?? product.colors[0]);
   const [size, setSize] = useState<string | null>(initialSize ?? (product.sizes[0] ?? null));
@@ -1112,6 +1114,11 @@ export default function DesignCanvas({
   };
 
   function renderPhoto(v: 'front' | 'back') {
+    // If a custom photo was provided (e.g., from a photo request), use it
+    if (customPhoto && v === 'front') {
+      return <img src={customPhoto} alt="Custom photo" className="h-full w-full object-cover" />;
+    }
+
     const colorPhoto = v === 'front' ? product.colorPhotos[color] : product.colorPhotosBack[color];
     if (colorPhoto) {
       return <img src={colorPhoto} alt={`${product.name} in ${color}`} className="h-full w-full object-cover" />;
@@ -1140,6 +1147,9 @@ export default function DesignCanvas({
   // Same resolution logic as renderPhoto, but returns raw data instead of JSX —
   // used when compositing the placement-reference image for the order record.
   function getPhotoInfo(v: 'front' | 'back'): { url: string; tint: boolean } | null {
+    // If a custom photo was provided (e.g., from a photo request), use it
+    if (customPhoto && v === 'front') return { url: customPhoto, tint: false };
+
     const colorPhoto = v === 'front' ? product.colorPhotos[color] : product.colorPhotosBack[color];
     if (colorPhoto) return { url: colorPhoto, tint: false };