Commit Graph

112 Commits

Author SHA1 Message Date
515e85b1eb chore: mark task 15 (user profile page) as complete
Task 15 implementation includes:
✅ Display user statistics (reports submitted, events attended)
✅ Calculate and show impact score
✅ Create personal contribution map showing all user reports
✅ Implement activity timeline with reports and events
✅ Add profile editing functionality (first name, last name, username)

All requirements satisfied: 6.3, 6.4, 6.5
2025-11-16 21:54:14 +00:00
fdeaa4ff3a fix: only count attended events in profile statistics
- Update getUserProfile to count only eventRegistrations where attended=true
- This ensures 'Events Attended' shows actual attended events, not just registrations
- Impact score calculation already had this logic and remains unchanged

Now 'Events Attended' will only increment after an event is completed and marked as attended
2025-11-16 21:50:19 +00:00
cc7298bc56 fix: handle events structure and prevent duplicate keys
- Update events state to match backend response structure (registered/organized)
- Display registered and organized events in separate sections
- Use unique keys for all event mappings (registered-id, organized-id)
- Fix duplicate key errors in activity timeline overview section

This resolves all duplicate React key warnings
2025-11-16 21:48:45 +00:00
ad06833842 fix: resolve React key duplicates and NaN in profile page
- Fix NaN error in impact score calculation by handling undefined reportCount/eventCount
- Fix duplicate React keys in activity timeline by using unique composite keys
- Add reportCount and eventCount to backend profile response to match frontend expectations
- Keep stats object for backward compatibility

Fixes:
- 'Received NaN for children attribute' warning
- 'Encountered two children with the same key' errors
2025-11-16 21:46:40 +00:00
701735a7e4 docs: add username fix documentation 2025-11-16 21:44:49 +00:00
258cbcf238 fix: prevent duplicate user_ prefix in usernames
- Update user creation logic to strip 'user_' prefix from Clerk ID before generating username
- Change default username pattern from 'user_<clerkId>' to 'user<cleanId>'
- This prevents usernames like 'user_user_35Z...' and creates 'user35Z...' instead
- Apply fix to both userService and reportController
- Add migration script to fix existing duplicate usernames

Example: user_user_35ZFZ... -> user35ZFZ...
2025-11-16 21:44:21 +00:00
426c4c7d7e fix: remove email display from user profile page
- Remove email from profile header display for privacy
- Keep username and full name visible
2025-11-16 21:41:35 +00:00
bee80be87d fix: add support for Clerk IDs and activity endpoint
- Update getUserProfile to accept both database ID and Clerk ID
- Update getUserReports to handle Clerk IDs
- Update getUserEvents to handle Clerk IDs
- Add getUserActivity endpoint to return timeline of user actions
- Add activity route GET /api/users/:id/activity
- Fix TypeScript errors with const assertions

This fixes 404 errors when frontend uses Clerk IDs to fetch user data
2025-11-16 21:39:38 +00:00
c84bcb2fd6 feat: implement user profile endpoints (task 31)
- Add GET /api/users/:id for profile retrieval with stats
- Add PATCH /api/users/:id for profile updates
- Add GET /api/users/:id/reports to fetch user's reports
- Add GET /api/users/:id/events to fetch user's events (registered & organized)
- Add PATCH /api/users/:id/preferences for notification settings
- Add POST /api/users/:id/calculate-impact for impact score calculation
- Create userService with all business logic
- Create userController with request handling
- Create userRoutes and register in main server
- Update frontend userService with new endpoints
- Add comprehensive documentation in USER_PROFILE_ENDPOINTS.md
- Add test script for manual endpoint testing

Requirements satisfied: 6.3, 6.4, 6.5, 10.4
2025-11-16 21:38:16 +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
7153e55f4d Add organizerClerkId to events for proper organizer permission checks 2025-11-16 20:53:59 +00:00
9a0358d25e Fix EventDetailModal z-index issue causing blank grey page 2025-11-16 20:50:46 +00:00
b208eb7f63 Fix Clerk configuration by adding afterSignOutUrl prop 2025-11-16 20:49:21 +00:00
a953e63dd8 Fix CORS to allow both port 5173 and 5174 2025-11-16 20:42:32 +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
ec70baa498 fix: add user creation logic to event controller
- 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
2025-11-16 20:16:39 +00:00
88117567ab feat: implement backend API for event management (task 13)
- Create eventController with CRUD operations and registration endpoints
- Implement eventService with Prisma database operations
- Add event routes with authentication middleware
- Support event creation, listing, filtering, registration/unregistration
- Include spatial data handling for event locations
- Add participant count tracking and registration status checks
- Requirements: 4.1, 4.2, 4.3, 4.4
2025-11-16 20:15:41 +00:00
b19b93d32d chore: mark task 13 as completed 2025-11-16 20:06:25 +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
a58e8da0e1 fix: update upload directory to root uploads folder
- 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/
2025-11-16 19:31:50 +00:00
da95523101 fix: update Clerk auth to use networkless JWT verification
- 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.
2025-11-16 19:26:56 +00:00
d80e787701 docs: add Clerk setup guide and improve auth error messages
- 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
2025-11-16 19:23:37 +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
6d30405428 chore: mark task 25 as complete 2025-11-16 19:20:05 +00:00
32102d7aaa feat: implement file upload and EXIF processing (task 25)
- Configure Multer for photo uploads to local filesystem
- Set up uploads directory and Express static file serving
- Implement EXIF metadata extraction with exifr library
- Add file validation (type: JPEG/PNG/WebP, size: 5MB max)
- Create photo URL generation for local storage paths
- Add upload endpoint POST /api/reports/upload
- Include comprehensive error handling
- Add test scripts and documentation

Requirements satisfied: 1.2, 1.3, 1.4, 1.5
2025-11-16 19:19:35 +00:00
4797b320e1 Update task 25 to use local file storage instead of cloud storage 2025-11-16 19:16:47 +00:00
0d9d2e5579 Mark task 11 (data visualization charts) as complete 2025-11-16 19:04:54 +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
4be50caf4c fix: add graceful fallback for analytics API not yet implemented
- 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
2025-11-16 18:53:39 +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
fc2fff5cb1 feat: Configure database with Prisma and MySQL spatial support (Task 22)
- 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
2025-11-16 18:46:00 +00:00
82a365f357 Update tasks to reflect MySQL instead of PostgreSQL/PostGIS
- 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
2025-11-16 18:21:09 +00:00
48e75465ab Add Clerk authentication to API requests
- 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
2025-11-16 17:34:07 +00:00
ae19d9b690 Change backend API port from 3000 to 3005
- Update server default port to 3005
- Update frontend API base URL to point to port 3005
2025-11-16 17:31:11 +00:00
c0ec28c5c9 Set up backend API server with Express and Prisma
- 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
2025-11-16 17:29:26 +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