Commit Graph

72 Commits

Author SHA1 Message Date
73fc4e290f Restructure event modal content layout
- Move map to bottom of content
- Wrap scrollable content properly
- Add flex-shrink-0 to icons to prevent squishing
- Improve content visibility and scrolling
2025-11-16 20:32:36 +00:00
493acdaeb4 Fix event detail modal scrolling and layout
- 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
2025-11-16 20:29:28 +00:00
8ee17848a6 Add event cancellation functionality for organizers
- 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
2025-11-16 20:28:21 +00:00
529cdd0c05 Improve event card clickability and add View Details button
- 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
2025-11-16 20:26:32 +00:00
25f8c46d7f Restrict event completion to after event date
- Only allow organizers to complete events after the scheduled date has passed
- Show informative message to organizers before event date
- Prevents premature event completion
2025-11-16 20:25:38 +00:00
c1f362a604 Implement event completion workflow (Task 14)
- 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
2025-11-16 20:21:47 +00:00
e165fea414 feat: implement event creation and management interface (task 13)
- 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
2025-11-16 20:06:09 +00:00
64fe312f01 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.
2025-11-16 20:01:26 +00:00
18e1e03bfc feat: improve file upload authentication and error handling
- 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.
2025-11-16 19:21:47 +00:00
9aa6507e7e fix: expand map filters by default to show hotspot toggle
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.
2025-11-16 19:03:28 +00:00
40a96142ba feat: implement hotspot visualization on map
- Add HotspotSeverity type and HotspotWithSeverity interface
- Implement getHotspots() method in analyticsService with severity calculation
- Add hotspot layer to MapView component with color-coded circles
- Create hotspot markers with severity icons and report count badges
- Add detailed hotspot popups showing report count, severity score, radius, and dates
- Implement hotspot toggle control in MapFilters with loading state
- Add hotspot severity legend to MapFilters
- Integrate hotspot data fetching in MapPage with sample fallback data
- Color-code hotspot boundaries: yellow (low), orange (medium/high), red (critical)
- Display hotspot statistics in interactive popups

Implements task 12: Create hotspot visualization
Requirements: 3.2, 3.3, 3.5
2025-11-16 19:01:26 +00:00
82635559db feat: implement data visualization charts for analytics dashboard
- 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
2025-11-16 18:58:01 +00:00
9f7fc43fb2 feat: implement analytics dashboard layout (task 10)
- Add analytics types (AnalyticsSummary, DateRange)
- Create analyticsService for API calls and CSV export
- Implement DateRangeSelector component with presets
- Create StatCard component for summary statistics
- Build responsive AnalyticsPage with:
  - Summary statistics cards (reports, events, users, litter collected)
  - Date range filtering with presets
  - CSV export functionality
  - Loading and error states
  - Responsive grid layout

Requirements: 5.1, 5.5
2025-11-16 18:52:34 +00:00
7dc1ff740b Auto-show zoomed map when EXIF location data is detected
- Automatically display map when photo contains GPS coordinates
- Zoom to level 15 for EXIF locations (more detailed view)
- Add contextual header explaining location source
- Improve map container styling with shadow and colored header
- Show helpful message for EXIF vs manual location selection
2025-11-16 17:18:30 +00:00
3aa7576487 feat: implement report submission and display (task 9)
- 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
2025-11-16 16:35:05 +00:00
c4aad5d099 feat: implement litter report form with multi-step wizard
- 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
2025-11-16 16:26:32 +00:00
de06012d27 docs: add LocationSelector implementation summary documentation 2025-11-16 16:23:10 +00:00
3864d3aa37 fix: correct EXIF GPS data extraction using exifr.gps()
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.
2025-11-16 16:22:17 +00:00
e18997ed95 feat: implement location selection interface with EXIF, GPS, and map picker
- Created LocationSelector component with three location input methods:
  * Auto-populate from photo EXIF data
  * Device GPS location capture with accuracy indicator
  * Interactive Leaflet map picker with draggable marker
- Added Ireland coordinate validation (lat: 51.4-55.4, lng: -10.5--5.5)
- Created coordinate utility functions for validation and formatting
- Added LocationSelectorDemo page for testing at /demo/location-selector
- Displays selected location with coordinates, source, and accuracy
- Provides clear error messages for validation failures
- Satisfies requirements 1.1, 1.2, 1.3, 8.2
2025-11-16 16:15:42 +00:00
ebdfc797ac feat: implement photo upload component with EXIF extraction
- Add PhotoUpload component with drag-and-drop interface
- Integrate exifr library for GPS and timestamp extraction
- Implement file validation (type, size)
- Add photo previews with metadata overlay
- Support multiple photo uploads (max 5 files, 5MB each)
- Display GPS indicators and extracted metadata
- Create demo page for testing component
- Satisfies requirements 1.2, 1.3, 1.4, 1.5, 8.3
2025-11-16 16:11:00 +00:00
8f297e1ec4 feat: implement heat map visualization with Leaflet.heat plugin
- Integrate Leaflet.heat plugin for heat map overlay
- Add heat map toggle control in MapFilters component
- Configure heat map intensity based on report quantity levels (minimal: 0.3, moderate: 0.5, significant: 0.7, severe: 1.0)
- Implement heat map layer management with proper cleanup
- Add custom gradient colors (blue to red) for visual intensity representation
- Configure heat map with radius: 25px, blur: 15, maxZoom: 17
- Add TypeScript type declarations for leaflet.heat
- Heat map respects existing filter state (date range, litter type, quantity)

Implements task 5: Create heat map visualization
Requirements: 3.1, 3.5
2025-11-16 16:05:31 +00:00
ba324b370e Initial Commit 2025-11-16 16:00:51 +00:00