From 8646b42438732511ecf157e7ea6c37d2c8535132 Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Fri, 17 Jul 2026 23:00:58 +0100
Subject: [PATCH] Add download photo button to custom request detail page

- Create DownloadPhotoButton component for downloading customer photos
- Add download button before 'Start a design for this' button
- Allows admin to save photo locally for editing in design software before approval

Addresses user request: admin should be able to download photo from request
for editing before uploading final design to the approval flow.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 src/app/admin/custom-requests/[id]/page.tsx |  3 +++
 src/components/DownloadPhotoButton.tsx      | 27 +++++++++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 src/components/DownloadPhotoButton.tsx

diff --git a/src/app/admin/custom-requests/[id]/page.tsx b/src/app/admin/custom-requests/[id]/page.tsx
index ab18e77..1258e48 100644
--- a/src/app/admin/custom-requests/[id]/page.tsx
+++ b/src/app/admin/custom-requests/[id]/page.tsx
@@ -3,6 +3,7 @@ import { notFound } from 'next/navigation';
 import { prisma } from '@/lib/prisma';
 import AdminNav from '@/components/AdminNav';
 import ShareButtons from '@/components/ShareButtons';
+import DownloadPhotoButton from '@/components/DownloadPhotoButton';
 import { deleteRequest, markRequestDone, markRequestNew } from '../actions';
 
 export default async function CustomRequestDetailPage({ params }: { params: { id: string } }) {
@@ -59,6 +60,8 @@ export default async function CustomRequestDetailPage({ params }: { params: { id
       </div>
 
       <div className="mt-8 flex flex-wrap gap-3">
+        <DownloadPhotoButton photoUrl={request.imageDataUrl} customerName={request.customerName} />
+
         <Link
           href={`/admin/proofs/new?${newProofParams.toString()}`}
           className="bg-clay px-6 py-3 text-sm font-medium text-paper hover:bg-clay-dark"
diff --git a/src/components/DownloadPhotoButton.tsx b/src/components/DownloadPhotoButton.tsx
new file mode 100644
index 0000000..df2e324
--- /dev/null
+++ b/src/components/DownloadPhotoButton.tsx
@@ -0,0 +1,27 @@
+'use client';
+
+interface DownloadPhotoButtonProps {
+  photoUrl: string;
+  customerName: string;
+}
+
+export default function DownloadPhotoButton({ photoUrl, customerName }: DownloadPhotoButtonProps) {
+  const handleDownload = () => {
+    // Create a link element and trigger download
+    const link = document.createElement('a');
+    link.href = photoUrl;
+    link.download = `photo-from-${customerName.toLowerCase().replace(/\s+/g, '-')}.png`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  return (
+    <button
+      onClick={handleDownload}
+      className="border border-ink px-6 py-3 text-sm hover:border-clay hover:bg-clay hover:text-paper"
+    >
+      Download photo
+    </button>
+  );
+}