- Added event fetching in MapPage component
- Events now display on map with custom markers (calendar emoji)
- Enhanced event popup with detailed information (date, time, participants, litter collected)
- Added event visibility toggle in MapFilters
- Events use different colors based on status (upcoming=amber, completed=green, cancelled=gray)
- Sample event data provided as fallback
- Fixed date filter type conversion for API calls
- Make modal content scrollable with proper flex layout
- Set max height to 90vh to prevent overflow
- Keep header and footer fixed while content scrolls
- Ensures all event details are visible and accessible
- Add Cancel Event button in event detail modal for organizers
- Show cancel button both before and after event date (if not completed)
- Add confirmation dialog before cancelling
- Update event status to 'cancelled' when cancelled
- Only organizers can cancel their events
- Add hover border effect to event cards for better visual feedback
- Add explicit 'View Details' button to each event card
- Rename register button to 'Quick Register' for clarity
- Makes it obvious that cards are clickable to view full details
- Only allow organizers to complete events after the scheduled date has passed
- Show informative message to organizers before event date
- Prevents premature event completion
- Add completeEvent endpoint to backend API
- Create EventCompletionForm component with litter quantity input and photo upload
- Update EventDetailModal to show completion form for organizers
- Add isOrganizer check in EventsPage
- Update event service to support completion
- Display completion data (litter collected, photos) for completed events
- Add findOrCreateUser helper function to handle Clerk ID to database ID mapping
- Update all authenticated endpoints to convert Clerk ID to database user ID
- Ensures events can be created and managed by authenticated users
- Matches pattern used in reportController
- Create EventForm component with date/time picker and map-based location selection
- Implement EventList component with status badges and participant counts
- Add EventFilters component for filtering by status and date range
- Create EventDetailModal with registration functionality and event details
- Build eventService for API calls (getEvents, createEvent, register, etc.)
- Update EventsPage with full event management UI
- Support event creation, listing, filtering, and registration
- Requirements: 4.1, 4.2, 4.3, 4.4
- 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.
- Change UPLOAD_DIR from ./uploads to ../uploads
- Update static file serving path to ../../uploads
- Files now upload to project root uploads/ folder instead of server/uploads/
- Replace deprecated verifySession() with verifyToken()
- Use JWT-based authentication (networkless verification)
- Update Clerk secret key to correct test key
- Fixes 410 Gone error from deprecated endpoint
This resolves the authentication issues with file uploads.
- Create CLERK_SETUP.md with step-by-step instructions
- Improve error message to indicate Clerk configuration issue
- Remove debug logging from auth middleware
- Update error handling to be more helpful
The 401 error is caused by missing Clerk Secret Key in server/.env
- Add better error messages for authentication failures
- Display warning in ReportForm when user is not signed in
- Update documentation with authentication requirements
- Improve error handling in reportService.uploadPhoto()
This helps users understand they need to be signed in to upload photos.
Make the filters panel expanded by default so users can immediately
see and access the hotspot visualization toggle without needing to
click to expand the panel first.
- Add TimeSeriesChart component for report trends over time
- Add LitterTypeChart component with pie chart for type distribution
- Add QuantityChart component with bar chart for quantity aggregation
- Update analytics service with new API methods for chart data
- Add new types for chart data structures (TimeSeriesDataPoint, LitterTypeDistribution, QuantityAggregation)
- Integrate charts into AnalyticsPage with responsive grid layout
- Add mock data fallback for development when API is not available
- Configure charts for mobile responsiveness
- Implement comparison metrics display in time series
- Add loading states and empty states for all charts
Implements task 11: Data visualization charts
Requirements: 5.2, 5.3, 5.4
- Show mock data (zeros) when API is unavailable
- Display warning message instead of error
- Update export error message to be more informative
- Prevents JSON parse errors when backend endpoints don't exist yet
- Set up MySQL 8.0+ with spatial data support (POINT SRID 4326)
- Created Prisma schema with all models (User, Report, Event, etc.)
- Added Clerk authentication support (clerk_id field)
- Configured spatial indexes on location fields for performance
- Created database migrations and applied to MySQL
- Built spatial query utilities for geographical operations
- Added database connection singleton and health checks
- Created comprehensive documentation and test scripts
Requirements: 1.1, 2.1, 3.2, 4.1
- Change task 22 from PostgreSQL+PostGIS to MySQL with spatial support
- Update references to PostGIS spatial queries to MySQL spatial functions
- Remove materialized view reference (MySQL specific)
- Update test task to reference MySQL instead of PostGIS
- Update API client to include Bearer token in requests
- Add token getter method to reportService for photo uploads
- Create ApiInitializer component to set up auth tokens
- Use Clerk's getToken() to retrieve session tokens
- Fix 401 Unauthorized errors on report submission
- Initialize Node.js/Express backend project structure
- Configure TypeScript for backend development
- Set up Prisma ORM with MySQL database schema
- Implement authentication middleware with Clerk
- Create photo upload endpoint with EXIF extraction
- Build report CRUD endpoints (create, read, delete)
- Add file upload handling with Multer
- Configure CORS and security middleware (helmet)
- Set up error handling and validation
- Create development environment configuration
Task 21 complete: Backend foundation ready for report submissions
- Add beach background image with gradient overlay
- Use larger, bolder headlines with emotional impact
- Add color-coded sections (blue, red, green, purple, orange)
- Include visual cards and grid layouts for better readability
- Add hover effects and transitions for interactivity
- Use emojis and icons more prominently
- Create compelling call-to-action with yellow highlight box
- Improve typography with larger text and better hierarchy
- Create new WhyCleanPage with comprehensive environmental information
- Include sections on marine life impact, wave power generation, economic impact, and human health
- Add button to homepage for easy access to environmental facts
- Update routing to include /why-clean path
- Use responsive button layout with flex-wrap for mobile support
- Use IMG_6703.jpeg as full-page background with parallax effect
- Add dark overlay for better text readability
- Update feature cards with semi-transparent backgrounds
- Enhance buttons with hover effects and transitions
- Created reportService for API interactions (upload, create, get, verify, dispute)
- Built ReportDetailModal component with photo gallery and verification UI
- Updated ReportForm with actual API submission and progress tracking
- Added error handling and success states
- Created ReportDetailDemo page to showcase modal functionality
- Added route for demo page at /demo/report-detail
- Exported services through index file for cleaner imports
- Documented implementation in SUBMISSION_IMPLEMENTATION.md
Requirements fulfilled: 1.8, 7.4
- Create comprehensive ReportForm component with 4-step wizard
- Add progress indicator showing current step
- Implement litter type categorization with descriptions
- Add quantity estimation with visual indicators
- Include optional description textarea with character limit
- Create environmental concerns section with severity levels
- Integrate PhotoUpload and LocationSelector components
- Add form validation with error messages
- Implement review step showing all submitted data
- Update ReportFormPage to use new ReportForm component
- Create barrel export for report components
Requirements: 1.6, 1.7, 9.1, 9.2
The previous implementation was using exifr.parse() with pick option,
which doesn't work for GPS coordinates since latitude/longitude are
computed values, not direct EXIF fields.
Changed to use exifr.gps() method which properly extracts and computes
GPS coordinates from EXIF GPSLatitude/GPSLongitude fields.
This fixes the issue where photos with GPS EXIF data were showing
'No GPS data' in the UI.
