AICyclingCoach/CL_frontendfixes.md

# Frontend Development TODO List

## 🚨 Critical Missing Features (High Priority)

### 1. Rules Management System
- [ ] **Create Rules page component** (`/src/pages/Rules.jsx`)
  - [ ] Natural language textarea editor
  - [ ] AI parsing button with loading state
  - [ ] JSON preview pane with syntax highlighting
  - [ ] Rule validation feedback
  - [ ] Save/cancel actions
- [ ] **Create RuleEditor component** (`/src/components/rules/RuleEditor.jsx`)
  - [ ] Rich text input with auto-resize
  - [ ] Character count and validation
  - [ ] Template suggestions dropdown
- [ ] **Create RulePreview component** (`/src/components/rules/RulePreview.jsx`)
  - [ ] JSON syntax highlighting (use `react-json-view`)
  - [ ] Editable JSON with validation
  - [ ] Diff view for rule changes
- [ ] **Create RulesList component** (`/src/components/rules/RulesList.jsx`)
  - [ ] Rule set selection dropdown
  - [ ] Version history per rule set
  - [ ] Delete/duplicate rule sets
- [ ] **API Integration**
  - [ ] `POST /api/rules` - Create new rule set
  - [ ] `PUT /api/rules/{id}` - Update rule set
  - [ ] `GET /api/rules` - List all rule sets
  - [ ] `POST /api/rules/{id}/parse` - AI parsing endpoint

### 2. Plan Generation Workflow
- [ ] **Create PlanGeneration page** (`/src/pages/PlanGeneration.jsx`)
  - [ ] Goal selection interface
  - [ ] Rule set selection
  - [ ] Plan parameters (duration, weekly hours)
  - [ ] Progress tracking for AI generation
- [ ] **Create GoalSelector component** (`/src/components/plans/GoalSelector.jsx`)
  - [ ] Predefined goal templates
  - [ ] Custom goal input
  - [ ] Goal validation
- [ ] **Create PlanParameters component** (`/src/components/plans/PlanParameters.jsx`)
  - [ ] Duration slider (4-20 weeks)
  - [ ] Weekly hours slider (5-15 hours)
  - [ ] Difficulty level selection
  - [ ] Available days checkboxes
- [ ] **Enhance PlanTimeline component**
  - [ ] Week-by-week breakdown
  - [ ] Workout details expandable cards
  - [ ] Progress tracking indicators
  - [ ] Edit individual workouts
- [ ] **API Integration**
  - [ ] `POST /api/plans/generate` - Generate new plan
  - [ ] `GET /api/plans/{id}/preview` - Preview before saving
  - [ ] Plan generation status polling

### 3. Route Management & Visualization
- [ ] **Enhance RoutesPage** (`/src/pages/RoutesPage.jsx`)
  - [ ] Route list with metadata
  - [ ] GPX file upload integration
  - [ ] Route preview cards
  - [ ] Search and filter functionality
- [ ] **Create RouteVisualization component** (`/src/components/routes/RouteVisualization.jsx`)
  - [ ] Interactive map (use Leaflet.js)
  - [ ] GPX track overlay
  - [ ] Elevation profile chart
  - [ ] Distance markers
- [ ] **Create RouteMetadata component** (`/src/components/routes/RouteMetadata.jsx`)
  - [ ] Distance, elevation gain, grade analysis
  - [ ] Estimated time calculations
  - [ ] Difficulty rating
  - [ ] Notes/description editing
- [ ] **Create SectionManager component** (`/src/components/routes/SectionManager.jsx`)
  - [ ] Split routes into sections
  - [ ] Section-specific metadata
  - [ ] Gear recommendations per section
- [ ] **Dependencies to add**
  - [ ] `npm install leaflet react-leaflet`
  - [ ] GPX parsing library integration

### 4. Export/Import System
- [ ] **Create ExportImport page** (`/src/pages/ExportImport.jsx`)
  - [ ] Export options (JSON, ZIP)
  - [ ] Import validation
  - [ ] Bulk operations
- [ ] **Create DataExporter component** (`/src/components/export/DataExporter.jsx`)
  - [ ] Selective export (routes, rules, plans)
  - [ ] Format selection (JSON, GPX, ZIP)
  - [ ] Export progress tracking
- [ ] **Create DataImporter component** (`/src/components/export/DataImporter.jsx`)
  - [ ] File validation and preview
  - [ ] Conflict resolution interface
  - [ ] Import progress tracking
- [ ] **API Integration**
  - [ ] `GET /api/export` - Generate export package
  - [ ] `POST /api/import` - Import data package
  - [ ] `POST /api/import/validate` - Validate before import

## 🔧 Code Quality & Architecture Improvements

### 5. Enhanced Error Handling
- [ ] **Create GlobalErrorHandler** (`/src/components/GlobalErrorHandler.jsx`)
  - [ ] Centralized error logging
  - [ ] User-friendly error messages
  - [ ] Retry mechanisms
- [ ] **Improve API error handling**
  - [ ] Consistent error response format
  - [ ] Network error recovery
  - [ ] Timeout handling
- [ ] **Add error boundaries**
  - [ ] Page-level error boundaries
  - [ ] Component-level error recovery

### 6. State Management Improvements
- [ ] **Enhance AuthContext**
  - [ ] Add user preferences
  - [ ] API caching layer
  - [ ] Offline capability detection
- [ ] **Create AppStateContext** (`/src/context/AppStateContext.jsx`)
  - [ ] Global loading states
  - [ ] Toast notifications
  - [ ] Modal management
- [ ] **Add React Query** (Optional but recommended)
  - [ ] `npm install @tanstack/react-query`
  - [ ] API data caching
  - [ ] Background refetching
  - [ ] Optimistic updates

### 7. UI/UX Enhancements
- [ ] **Improve responsive design**
  - [ ] Better mobile navigation
  - [ ] Touch-friendly interactions
  - [ ] Responsive charts and maps
- [ ] **Add loading skeletons**
  - [ ] Replace generic spinners
  - [ ] Component-specific skeletons
  - [ ] Progressive loading
- [ ] **Create ConfirmDialog component** (`/src/components/ui/ConfirmDialog.jsx`)
  - [ ] Delete confirmations
  - [ ] Destructive action warnings
  - [ ] Custom confirmation messages
- [ ] **Add keyboard shortcuts**
  - [ ] Navigation shortcuts
  - [ ] Action shortcuts
  - [ ] Help overlay

## 🧪 Testing & Quality Assurance

### 8. Testing Infrastructure
- [ ] **Expand component tests**
  - [ ] Rules management tests
  - [ ] Plan generation tests
  - [ ] Route visualization tests
- [ ] **Add integration tests**
  - [ ] API integration tests
  - [ ] User workflow tests
  - [ ] Error scenario tests
- [ ] **Performance testing**
  - [ ] Large dataset handling
  - [ ] Chart rendering performance
  - [ ] Memory leak detection

### 9. Development Experience
- [ ] **Add Storybook** (Optional)
  - [ ] Component documentation
  - [ ] Design system documentation
  - [ ] Interactive component testing
- [ ] **Improve build process**
  - [ ] Bundle size optimization
  - [ ] Dead code elimination
  - [ ] Tree shaking verification
- [ ] **Add development tools**
  - [ ] React DevTools integration
  - [ ] Performance monitoring
  - [ ] Bundle analyzer

## 📚 Documentation & Dependencies

### 10. Missing Dependencies
```json
{
  "leaflet": "^1.9.4",
  "react-leaflet": "^4.2.1",
  "react-json-view": "^1.21.3",
  "@tanstack/react-query": "^4.32.0",
  "react-hook-form": "^7.45.0",
  "react-select": "^5.7.4",
  "file-saver": "^2.0.5"
}
```

### 11. Configuration Files
- [ ] **Create environment config** (`/src/config/index.js`)
  - [ ] API endpoints configuration
  - [ ] Feature flags
  - [ ] Environment-specific settings
- [ ] **Add TypeScript support** (Optional)
  - [ ] Convert critical components
  - [ ] Add type definitions
  - [ ] Improve IDE support

## 🚀 Deployment & Performance

### 12. Production Readiness
- [ ] **Optimize bundle size**
  - [ ] Code splitting implementation
  - [ ] Lazy loading for routes
  - [ ] Image optimization
- [ ] **Add PWA features** (Optional)
  - [ ] Service worker
  - [ ] Offline functionality
  - [ ] App manifest
- [ ] **Performance monitoring**
  - [ ] Core Web Vitals tracking
  - [ ] Error tracking integration
  - [ ] User analytics

## 📅 Implementation Priority

### Phase 1 (Week 1-2): Core Missing Features
1. Rules Management System
2. Plan Generation Workflow
3. Enhanced Route Management

### Phase 2 (Week 3): Data Management
1. Export/Import System
2. Enhanced Error Handling
3. State Management Improvements

### Phase 3 (Week 4): Polish & Quality
1. UI/UX Enhancements
2. Testing Infrastructure
3. Performance Optimization

### Phase 4 (Ongoing): Maintenance
1. Documentation
2. Monitoring
3. User Feedback Integration

---

## 🎯 Success Criteria

- [ ] All design document workflows implemented
- [ ] 90%+ component test coverage
- [ ] Mobile-responsive design
- [ ] Sub-3s initial page load
- [ ] Accessibility compliance (WCAG 2.1 AA)
- [ ] Cross-browser compatibility (Chrome, Firefox, Safari, Edge)

## 📝 Notes

- **Prioritize user-facing features** over internal architecture improvements
- **Test each feature** as you implement it
- **Consider Progressive Web App features** for offline functionality
- **Plan for internationalization** if expanding globally
- **Monitor bundle size** as you add dependencies