Commit Graph

4 Commits

Author SHA1 Message Date
63a333bba3 Add voice input UI components for hands-free tracking
Some checks failed
CI/CD Pipeline / Lint and Test (push) Has been cancelled
CI/CD Pipeline / E2E Tests (push) Has been cancelled
CI/CD Pipeline / Build Application (push) Has been cancelled
Implemented complete voice input user interface:

**Voice Recording Hook (useVoiceInput):**
- Browser Web Speech API integration
- Real-time speech recognition
- Continuous and interim results
- 10-second auto-timeout
- Error handling for permissions, network, audio issues
- Graceful fallback for unsupported browsers

**Voice Input Button Component:**
- Modal dialog with microphone button
- Animated pulsing microphone when recording
- Real-time transcript display
- Automatic intent classification on completion
- Structured data visualization
- Example commands for user guidance
- Success/error feedback with MUI Alerts
- Confidence level indicators

**Floating Action Button:**
- Always-visible FAB in bottom-right corner
- Quick access from any page
- Auto-navigation to appropriate tracking page
- Snackbar feedback messages
- Mobile-optimized positioning (thumb zone)

**Integration with Tracking Pages:**
- Voice button in feeding page header
- Auto-fills form fields from voice commands
- Seamless voice-to-form workflow
- Example: "Fed baby 120ml" → fills bottle type & amount

**Features:**
-  Browser speech recognition (Chrome, Edge, Safari)
-  Real-time transcription display
-  Automatic intent classification
-  Auto-fill tracking forms
-  Visual feedback (animations, colors)
-  Error handling & user guidance
-  Mobile-optimized design
-  Accessibility support

**User Flow:**
1. Click microphone button (floating or in-page)
2. Speak command: "Fed baby 120 ml"
3. See real-time transcript
4. Auto-classification shows intent & data
5. Click "Use Command"
6. Form auto-fills or activity created

**Browser Support:**
- Chrome 
- Edge 
- Safari 
- Firefox  (Web Speech API not supported)

**Files Created:**
- hooks/useVoiceInput.ts - Speech recognition hook
- components/voice/VoiceInputButton.tsx - Modal input component
- components/voice/VoiceFloatingButton.tsx - FAB for quick access
- app/layout.tsx - Added floating button globally
- app/track/feeding/page.tsx - Added voice button to header

Voice input is now accessible from anywhere in the app, providing
true hands-free tracking for parents.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-01 20:24:43 +00:00
50bde54c8e feat: Integrate Redux Provider and simplify Redux store configuration
Some checks failed
CI/CD Pipeline / Build Application (push) Has been cancelled
CI/CD Pipeline / Lint and Test (push) Has been cancelled
CI/CD Pipeline / E2E Tests (push) Has been cancelled
Added Redux Provider to app layout and simplified Redux store to work
properly with Next.js SSR.

**Changes:**
- Added ReduxProvider wrapper to root layout (app/layout.tsx)
- Fixed ReduxProvider TypeScript type (React.ReactNode)
- Simplified store configuration by removing @redux-offline package
- Removed packages incompatible with SSR:
  - @redux-offline/redux-offline
  - redux-persist
  - localforage
- Re-added NetworkStatusIndicator to main page (now works with Redux)
- Kept custom offline middleware and sync middleware for offline-first functionality

**Why:**
The @redux-offline package and localforage try to access browser APIs (IndexedDB,
localStorage) during SSR, causing "No available storage method found" errors.
Our custom offline middleware provides the same functionality without SSR issues.

**Result:**
Redux store now works correctly with:
- Network status detection
- Offline action queuing
- Custom sync middleware
- Activities and children slices with optimistic updates

Next step: Can add redux-persist back with proper SSR guards if needed.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-01 19:42:33 +00:00
68e33712f1 feat: Add comprehensive error boundaries for graceful error handling
Some checks failed
CI/CD Pipeline / Lint and Test (push) Has been cancelled
CI/CD Pipeline / E2E Tests (push) Has been cancelled
CI/CD Pipeline / Build Application (push) Has been cancelled
Implemented React error boundaries to catch and handle errors gracefully:

**Core Error Handling Components:**
- Created ErrorBoundary class component with error catching and logging
- Created specialized fallback UIs (MinimalErrorFallback, DataErrorFallback,
  ComponentErrorFallback, FormErrorFallback, ChartErrorFallback, ImageErrorFallback)
- Added withErrorBoundary HOC for easy component wrapping
- Created errorLogger service with Sentry integration placeholder

**Error Logging Service (errorLogger.ts):**
- Centralized error logging with severity levels (FATAL, ERROR, WARNING, INFO, DEBUG)
- Context enrichment (URL, userAgent, timestamp, environment)
- Local storage of last 10 errors in sessionStorage for debugging
- User context management (setUser, clearUser)
- Breadcrumb support for debugging trails

**App Integration:**
- Wrapped root layout with top-level ErrorBoundary for catastrophic errors
- Added NetworkStatusIndicator to main page for offline sync visibility
- Wrapped daily summary section with isolated DataErrorFallback
- Added error boundary to AI assistant page with ComponentErrorFallback
- Wrapped feeding tracking form with FormErrorFallback using withErrorBoundary HOC
- Protected analytics charts with isolated ChartErrorFallback boundaries

**Error Recovery Features:**
- Isolated error boundaries prevent cascade failures
- Retry buttons on all fallback UIs
- Error count tracking with user warnings
- Development-mode error details display
- Automatic error logging to service (when Sentry integrated)

Next: Integration with Sentry for production error tracking

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-01 19:37:04 +00:00
f3ff07c0ef Add comprehensive .gitignore 2025-10-01 19:01:52 +00:00