feat: implement report submission with photo upload and map display

- Fix Prisma client generation and database schema sync issues
- Implement user auto-creation from Clerk authentication
- Add raw SQL queries to handle MySQL POINT spatial fields
- Make password_hash optional for Clerk-only authentication
- Update MapPage to fetch real reports from API
- Add photo display in map popups with full-size modal view
- Configure CORS and Helmet for cross-origin image loading
- Add cleanup tracking task to implementation plan

Fixes report submission 500 errors and enables end-to-end workflow from submission to map display.
This commit is contained in:
2025-11-16 20:01:26 +00:00
parent a58e8da0e1
commit 64fe312f01
7 changed files with 180 additions and 39 deletions

View File

@@ -185,8 +185,22 @@ export function MapView({
const marker = L.marker([report.latitude, report.longitude], { icon });
// Add popup with report details
const photoUrl = report.photoUrls && report.photoUrls.length > 0 ? report.photoUrls[0] : null;
// Remove /api from the base URL for uploads since they're served at the root level
const serverBaseUrl = (import.meta.env.VITE_API_BASE_URL || 'http://localhost:3005/api').replace('/api', '');
const fullPhotoUrl = photoUrl ? (photoUrl.startsWith('http') ? photoUrl : `${serverBaseUrl}${photoUrl}`) : null;
marker.bindPopup(`
<div class="p-2">
<div class="p-2 max-w-xs">
${fullPhotoUrl ? `
<img
src="${fullPhotoUrl}"
alt="Litter photo"
class="w-full h-32 object-cover rounded mb-2 cursor-pointer hover:opacity-80 transition-opacity"
onclick="window.openImageModal('${fullPhotoUrl}')"
onerror="this.style.display='none'"
/>
` : ''}
<h3 class="font-bold text-sm mb-1">${getLitterTypeLabel(report.litterType)}</h3>
<p class="text-xs text-gray-600">Quantity: ${report.quantity}</p>
<p class="text-xs text-gray-600">Status: ${report.verificationStatus}</p>