From 55acff59bca788e305425fb8c22c6d65305e25de Mon Sep 17 00:00:00 2001
From: Paul Bailey <psbailey31@gmail.com>
Date: Sun, 16 Nov 2025 22:57:40 +0000
Subject: [PATCH] Fix photo URL construction in ReportDetailModal

- Prepend API base URL to relative photo paths
- Use process.cwd() for upload directory in server
- Ensures photos display correctly in report detail modal
---
 server/src/index.ts                         | 5 +++--
 src/components/report/ReportDetailModal.tsx | 6 +++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/server/src/index.ts b/server/src/index.ts
index 0594654..9590e81 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -29,8 +29,9 @@ app.use(cors({
 app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
 
-// Serve uploaded files
-app.use('/uploads', express.static(path.join(__dirname, '../../uploads')));
+// Serve uploaded files - use process.cwd() to get the correct path
+const uploadDir = process.env.UPLOAD_DIR || path.join(process.cwd(), 'uploads');
+app.use('/uploads', express.static(uploadDir));
 
 // Health check
 app.get('/health', (req, res) => {
diff --git a/src/components/report/ReportDetailModal.tsx b/src/components/report/ReportDetailModal.tsx
index b39213a..556b1bf 100644
--- a/src/components/report/ReportDetailModal.tsx
+++ b/src/components/report/ReportDetailModal.tsx
@@ -125,7 +125,11 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
           {/* Photo Gallery */}
           <div className="relative bg-gray-900">
             <img
-              src={report.photoUrls[currentPhotoIndex]}
+              src={
+                report.photoUrls[currentPhotoIndex].startsWith('http')
+                  ? report.photoUrls[currentPhotoIndex]
+                  : `${(import.meta.env.VITE_API_BASE_URL || 'http://localhost:3005/api').replace('/api', '')}${report.photoUrls[currentPhotoIndex]}`
+              }
               alt={`Report photo ${currentPhotoIndex + 1}`}
               className="w-full h-80 object-contain"
             />