Admin/ocean-cleanup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement event creation and management interface (task 13)

Browse Source 
- 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
This commit is contained in:
Paul Bailey
2025-11-16 20:06:09 +00:00
parent 64fe312f01
commit e165fea414
10 changed files with 1434 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
.kiro/specs/beach-litter-mapping/tasks.md
View File

@@ -100,7 +100,7 @@
## Event Management
- [ ] 13. Build event creation and management interface
- [-] 13. Build event creation and management interface
- Create event creation form with date/time picker
- Implement location selection on map
- Add participant registration functionality
@@ -143,9 +143,22 @@
- Show verification audit log
- _Requirements: 7.1, 7.2, 7.3, 7.4, 7.5_
## Cleanup Tracking System
- [ ] 18. Implement "Mark as Cleaned" functionality
- Add `cleaned_at` timestamp field to reports table
- Add `cleaned_by_user_id` field to track who marked it as cleaned
- Create POST /api/reports/:id/mark-cleaned backend endpoint
- Add "Mark as Cleaned" button to report popup on map
- Update map markers to visually distinguish cleaned vs uncleaned reports (e.g., green vs red markers)
- Add filter option to show/hide cleaned reports
- Display cleanup date and user in report details
- Implement authorization (only authenticated users can mark as cleaned)
- _Requirements: Community engagement, impact tracking_
## External Data Integration
- [ ] 18. Create external data display components
- [ ] 19. Create external data display components
- Build weather information widget
- Implement tide times display
- Add water quality indicator
@@ -155,7 +168,7 @@
## Mobile Optimization
- [ ] 19. Implement mobile-responsive design
- [ ] 20. Implement mobile-responsive design
- Apply Tailwind responsive classes throughout
- Optimize map controls for touch interfaces
- Ensure minimum tap target sizes (44x44px)
@@ -163,7 +176,7 @@
- Implement mobile navigation menu
- _Requirements: 8.1, 8.4_
- [ ] 20. Optimize mobile performance
- [ ] 21. Optimize mobile performance
- Implement code splitting and lazy loading
- Add image optimization and lazy loading
- Configure service worker for offline capability
@@ -173,7 +186,7 @@
## Backend API Development
- [x] 21. Set up backend project structure
- [x] 22. Set up backend project structure
- Initialize Node.js project with Express
- Configure TypeScript for backend
- Set up folder structure: routes, controllers, services, middleware, utils
@@ -181,7 +194,7 @@
- Create environment configuration
- _Requirements: All backend requirements_
- [x] 22. Configure database with Prisma and MySQL spatial support
- [x] 23. Configure database with Prisma and MySQL spatial support
- Set up MySQL 8.0+ with spatial data support
- Create Prisma schema with all models (User, Report, Event, etc.)
- Configure MySQL POINT spatial types for location fields
@@ -189,7 +202,7 @@
- Set up database indexes including spatial indexes for performance
- _Requirements: 1.1, 2.1, 3.2, 4.1_
- [ ] 23. Implement authentication system
- [ ] 24. Implement authentication system
- Create user registration endpoint with password hashing
- Build login endpoint with JWT token generation
- Implement refresh token logic with httpOnly cookies
@@ -197,7 +210,7 @@
- Add rate limiting to auth endpoints
- _Requirements: 6.1, 6.2_
- [ ] 24. Build report API endpoints
- [ ] 25. Build report API endpoints
- Create POST /api/reports endpoint for report submission
- Implement GET /api/reports with filtering and pagination
- Build GET /api/reports/:id for single report retrieval
@@ -206,7 +219,7 @@
- Add spatial queries using MySQL spatial functions for location-based filtering
- _Requirements: 1.1-1.8, 2.1, 2.4_
- [x] 25. Implement file upload and EXIF processing
- [x] 26. Implement file upload and EXIF processing
- Configure Multer for photo uploads to local filesystem
- Set up uploads directory and configure Express static file serving
- Implement EXIF metadata extraction with exifr
@@ -214,7 +227,7 @@
- Create photo URL generation for local storage paths
- _Requirements: 1.2, 1.3, 1.4, 1.5_
- [ ] 26. Build event management endpoints
- [ ] 27. Build event management endpoints
- Create POST /api/events for event creation
- Implement GET /api/events with filtering
- Build event registration endpoint
@@ -222,7 +235,7 @@
- Add participant count tracking
- _Requirements: 4.1, 4.2, 4.3, 4.4, 4.5_
- [ ] 27. Implement analytics endpoints
- [ ] 28. Implement analytics endpoints
- Create GET /api/analytics/summary for overall statistics
- Build time series data endpoint for trends
- Implement CSV export functionality
@@ -230,7 +243,7 @@
- Create comparison calculations for period-over-period metrics
- _Requirements: 5.1, 5.2, 5.3, 5.4, 5.5_
- [ ] 28. Build hotspot calculation system
- [ ] 29. Build hotspot calculation system
- Create scheduled job with node-cron for hotspot calculations
- Implement MySQL spatial queries to identify clusters
- Calculate severity scores based on report count and frequency
@@ -238,7 +251,7 @@
- Create GET /api/analytics/hotspots endpoint
- _Requirements: 3.2, 3.3, 3.4_
- [ ] 29. Implement verification system endpoints
- [ ] 30. Implement verification system endpoints
- Create POST /api/reports/:id/verify endpoint
- Build POST /api/reports/:id/dispute endpoint
- Implement verification count tracking
@@ -246,7 +259,7 @@
- Create verification audit log
- _Requirements: 7.1, 7.2, 7.3, 7.4, 7.5_
- [ ] 30. Build user profile endpoints
- [ ] 31. Build user profile endpoints
- Create GET /api/users/:id for profile retrieval
- Implement PATCH /api/users/:id for profile updates
- Build GET /api/users/:id/reports endpoint
@@ -255,7 +268,7 @@
- Add notification preferences endpoint
- _Requirements: 6.3, 6.4, 6.5, 10.4_
- [ ] 31. Integrate external APIs with caching
- [ ] 32. Integrate external APIs with caching
- Set up Redis for caching external API responses
- Implement weather API integration (OpenWeatherMap)
- Build tide API integration (WorldTides or NOAA)
@@ -264,7 +277,7 @@
- Implement 6-hour cache expiration
- _Requirements: 11.1, 11.2, 11.3, 11.4, 11.5, 11.6_
- [ ] 32. Implement notification system
- [ ] 33. Implement notification system
- Create notification service with area-of-interest matching
- Build email notification integration (SendGrid)
- Implement in-app notification storage and retrieval
@@ -272,7 +285,7 @@
- Add notification delivery within 10-minute requirement
- _Requirements: 10.1, 10.2, 10.3, 10.4_
- [ ] 33. Add API security and validation
- [ ] 34. Add API security and validation
- Implement request validation with Zod schemas
- Add rate limiting middleware
- Configure CORS for allowed origins
@@ -281,7 +294,7 @@
- Create error handling middleware
- _Requirements: All security-related requirements_
- [ ] 34. Implement environmental concerns endpoints
- [ ] 35. Implement environmental concerns endpoints
- Create endpoints for submitting environmental concerns
- Build filtering and retrieval for concern types
- Implement linking of related reports within 100m
@@ -290,7 +303,7 @@
## Integration and Polish
- [ ] 35. Connect frontend to backend APIs
- [ ] 36. Connect frontend to backend APIs
- Configure API base URL and axios/fetch setup
- Implement React Query hooks for all endpoints
- Add error handling and retry logic
@@ -298,7 +311,7 @@
- Implement optimistic updates where appropriate
- _Requirements: All integration requirements_
- [ ] 36. Implement error handling and user feedback
- [ ] 37. Implement error handling and user feedback
- Create toast notification system for user feedback
- Add error boundaries for React components
- Implement form validation error displays
@@ -306,7 +319,7 @@
- Add loading spinners and skeleton screens
- _Requirements: All UX requirements_
- [ ]* 37. Write integration tests
- [ ]* 38. Write integration tests
- Create API endpoint tests with Supertest
- Test authentication flows
- Test file upload pipeline
@@ -314,7 +327,7 @@
- Test external API integration with mocks
- _Requirements: All requirements_
- [ ] 38. Set up deployment configuration
- [ ] 39. Set up deployment configuration
- Create Docker configuration for development
- Set up environment variables for production
- Configure build scripts for frontend and backend