From 4ac49d55e6a8e1eac990fe36b470133cc465c6d2 Mon Sep 17 00:00:00 2001
From: Paul Bailey <psbailey31@gmail.com>
Date: Tue, 18 Nov 2025 01:01:43 +0000
Subject: [PATCH] fix: Configure proper API URLs for production and development

- Add .env.production with production API URL (https://litter-api.psbailey.uk/api)
- Create getApiBaseUrl() helper function for static assets
- Update ReportDetailModal to use dynamic API URL
- Fix default API port to 3005 across all services
- Images will now load correctly in both dev and production
---
 .env.production                             | 3 +++
 src/components/report/ReportDetailModal.tsx | 3 ++-
 src/services/analyticsService.ts            | 2 +-
 src/services/api.ts                         | 7 ++++++-
 4 files changed, 12 insertions(+), 3 deletions(-)
 create mode 100644 .env.production

diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..81dabd3
--- /dev/null
+++ b/.env.production
@@ -0,0 +1,3 @@
+# Production Environment Variables
+VITE_API_BASE_URL=https://litter-api.psbailey.uk/api
+VITE_CLERK_PUBLISHABLE_KEY=pk_live_Y2xlcmsubGl0dGVyc2NvdXRzLnBzYmFpbGV5LnVrJA
diff --git a/src/components/report/ReportDetailModal.tsx b/src/components/report/ReportDetailModal.tsx
index 541eb30..a1f9df6 100644
--- a/src/components/report/ReportDetailModal.tsx
+++ b/src/components/report/ReportDetailModal.tsx
@@ -2,6 +2,7 @@
 import { useState } from 'react';
 import type { ReportResponseDTO } from '@/types';
 import { format } from 'date-fns';
+import { getApiBaseUrl } from '@/services/api';
 
 interface ReportDetailModalProps {
   report: ReportResponseDTO;
@@ -128,7 +129,7 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
               src={
                 report.photoUrls[currentPhotoIndex].startsWith('http')
                   ? report.photoUrls[currentPhotoIndex]
-                  : `http://localhost:3005${report.photoUrls[currentPhotoIndex]}`
+                  : `${getApiBaseUrl()}${report.photoUrls[currentPhotoIndex]}`
               }
               alt={`Report photo ${currentPhotoIndex + 1}`}
               className="w-full h-80 object-contain"
diff --git a/src/services/analyticsService.ts b/src/services/analyticsService.ts
index 9da79de..8002588 100644
--- a/src/services/analyticsService.ts
+++ b/src/services/analyticsService.ts
@@ -120,7 +120,7 @@ class AnalyticsService {
 
     const queryString = params.toString();
     const response = await fetch(
-      `${import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000/api'}/analytics/export${queryString ? `?${queryString}` : ''}`,
+      `${import.meta.env.VITE_API_BASE_URL || 'http://localhost:3005/api'}/analytics/export${queryString ? `?${queryString}` : ''}`,
       {
         method: 'GET',
         headers: {
diff --git a/src/services/api.ts b/src/services/api.ts
index f55ab78..d3ffa63 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -1,7 +1,12 @@
 // API service configuration and base client
 import { useAuth } from '@clerk/clerk-react';
 
-const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000/api';
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3005/api';
+
+// Export function to get the base URL without /api suffix for static assets
+export const getApiBaseUrl = () => {
+  return (import.meta.env.VITE_API_BASE_URL || 'http://localhost:3005/api').replace('/api', '');
+};
 
 export interface ApiError {
   code: string;