Commit Graph

42 Commits

Author SHA1 Message Date
14a905a138 Put all action buttons (Verify, Dispute, Cleaned Up) in same row with shorter labels 2025-11-16 22:30:07 +00:00
17e3e85781 Add 'Mark as Cleaned Up' functionality
- Add cleaned_at and cleaned_by_user_id fields to reports table
- Create database migration for cleanup tracking
- Add markAsCleaned backend endpoint and service method
- Add Mark as Cleaned Up button to ReportDetailModal
- Update types to include cleaned fields
- Add frontend handler to mark reports as cleaned
2025-11-16 22:26:59 +00:00
beb5d8e7d8 Increase modal max height to 92vh for better content visibility 2025-11-16 22:22:59 +00:00
38f0e94bd7 Increase photo gallery height to h-80 for better visibility 2025-11-16 22:22:12 +00:00
b801b12435 Put location and photo timestamp in same row for more compact layout 2025-11-16 22:21:45 +00:00
8f98047bca Make report detail modal more compact and remove reporter info section 2025-11-16 22:20:44 +00:00
ff04e4fb47 Reduce ReportDetailModal size to minimize scrolling
- Reduce max width from 4xl to 3xl
- Reduce photo height from h-96 to h-64
- Reduce padding throughout (p-6 to p-4, p-4 to p-3)
- Reduce header font size from 2xl to xl
- Reduce audit log max height from 60 to 40
- Reduce spacing between sections from space-y-6 to space-y-4
2025-11-16 22:20:29 +00:00
0099ea4b84 Fix z-index for ReportDetailModal to appear above map elements 2025-11-16 22:17:31 +00:00
5c8b66cb0c Add safety checks and null guards to ReportDetailModal 2025-11-16 22:15:47 +00:00
02fe58eb31 Fix Decimal type conversion for latitude/longitude in report responses 2025-11-16 22:13:32 +00:00
f603ea8fda Implement report verification interface with audit log
- Add verify/dispute endpoints to backend API
- Create verification service methods with auto-hide logic for 3+ disputes
- Update ReportDetailModal with verification buttons and comment forms
- Add verification audit log display showing history of verifications/disputes
- Implement auto-hide warning for disputed reports
- Update MapPage to handle verification actions and refresh data
- Add verification counts to report responses
- Filter out disputed reports from public view by default
- Add verification test script

Requirements: 7.1, 7.2, 7.3, 7.4, 7.5
2025-11-16 22:11:40 +00:00
86169f6141 Implement notification preferences (Task 16)
- Create NotificationSettings component with map-based area selector
- Add radius configuration slider (1-50km range)
- Implement notification type toggles (email, in-app)
- Add notifications tab to user profile page (visible only to profile owner)
- Update backend to parse and return areasOfInterest JSON
- Save and load user notification preferences
- Requirements: 10.1, 10.4
2025-11-16 22:01:01 +00:00
f02f23e185 feat: implement user profile page with statistics, contribution map, and activity timeline
- Add userService for profile and activity API calls
- Create UserProfilePage with tabbed interface (overview, reports, events, activity)
- Display user statistics (reports count, events count, impact score)
- Implement personal contribution map showing all user report locations
- Add activity timeline with different activity types
- Enable profile editing for own profile (first name, last name, username)
- Update UserProfile component to link to profile page
- Add /profile/:userId route to App
- Install react-leaflet for map integration
- Requirements: 6.3, 6.4, 6.5
2025-11-16 21:13:26 +00:00
5cbdb8f284 Shift map center further west to focus on Ireland
- Moved center from (53.4, -8.0) to (53.4, -9.0)
- Minimizes UK visibility and focuses view on Ireland
- Provides optimal viewing with filter panel open
2025-11-16 21:09:24 +00:00
2b8e4e9b31 Adjust map center further west to -8.0 longitude
- Moved center from (53.4, -7.5) to (53.4, -8.0)
- Provides more clearance for filter panel on the left
- Ensures all of Ireland is clearly visible
2025-11-16 21:08:14 +00:00
8e73d8a2a5 Improve event popup and map positioning
- Added 'View Event Details' button in event popup that navigates to /events?id={eventId}
- Adjusted map center from Dublin (53.3498, -6.2603) to (53.4, -7.5) to better show all of Ireland
- New center point ensures Ireland is fully visible even when filter panel is open
- Button has blue styling with hover effect for better UX
2025-11-16 21:07:10 +00:00
91ecbd2443 Link map items with events - Display cleanup events on interactive map
- 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
2025-11-16 21:05:23 +00:00
9a0358d25e Fix EventDetailModal z-index issue causing blank grey page 2025-11-16 20:50:46 +00:00
9d1f2e735e Add debug box to modal to test rendering 2025-11-16 20:38:41 +00:00
53496f77be Temporarily remove map from modal for debugging
- Comment out map to test if it's causing layout issues
- Will help identify if map is preventing other content from showing
2025-11-16 20:34:36 +00:00
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