Commit Graph

8 Commits

Author SHA1 Message Date
53e375724b feat: Add status dot indicator and fix voice tracking data format
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
- Replace connection status chips with green/gray dot on user avatar
- Fix voice command data transformation (use timestamp/data instead of startedAt/metadata)
- Keep family members online indicator on left side
- User avatar with status dot remains on right side

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-04 07:55:47 +00:00
e8cf7d7ab6 feat: Complete high-priority frontend features - accessibility and UX
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
**Error Boundaries (VERIFIED COMPLETE)**
- Comprehensive ErrorBoundary component already implemented in components/common/ErrorBoundary.tsx
- Features: Recovery UI, error logging, isolated error boundaries, development error details
- Global error boundary in root layout
- Page-level error boundaries in AI Assistant and dashboard
- Error tracking integration ready for Sentry

**Touch Target Sizes (WCAG 2.5.5 Compliance)**
- Fixed user menu IconButton: increased from 32x32px to 44x44px minimum (medium size)
- Created lib/utils/touchTargets.ts with accessibility utilities:
  * MINIMUM_TOUCH_TARGET = 44px (iOS/WCAG standard)
  * RECOMMENDED_TOUCH_TARGET = 48px (Android Material Design)
  * Helper functions: withTouchTarget(), validateTouchTarget()
  * Component-specific guidelines for IconButton, Button, FAB, Chip, etc.
- Verified existing components meet standards:
  * Quick action buttons: 140x140px ✓
  * Bottom navigation: 64px height ✓
  * Voice FAB: 56x56px ✓
  * Voice button in tab bar: 48x48px ✓

**AI Conversation History (VERIFIED COMPLETE)**
- Comprehensive conversation management already implemented in AIChatInterface.tsx
- Features verified:
  * Full conversation list with drawer (mobile) and sidebar (desktop)
  * Load conversations from backend API
  * Load individual conversation messages with scrolling
  * Auto-scroll to bottom on new messages
  * Conversation groups with collapsible organization
  * Delete conversations with confirmation
  * Context menu for conversation management
  * Thinking messages animation
  * Markdown rendering for AI responses
- Updated implementation-gaps.md to reflect completion status

**Documentation Updates**
- Updated docs/implementation-gaps.md:
  * Marked Conversation History as COMPLETED
  * Updated AI Assistant UI section with detailed implementation notes
  * Moved remaining features (Streaming Responses, Suggested Follow-Ups, AI Response Feedback UI) to "Remaining Features" section

**Impact**
- Error boundaries prevent full app crashes and provide graceful recovery
- Touch target sizes meet WCAG 2.5.5 (AAA) and mobile platform guidelines
- Conversation history enables contextual AI interactions with full persistence

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-03 22:10:47 +00:00
fb9f9d25c7 feat: Unify navigation with consistent header and centered bottom menu
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
- Removed duplicate MobileNav AppBar from desktop view
- Added unified header bar across all screen sizes (mobile + desktop)
- Positioned connection status on left, user menu on right in header
- Centered bottom navigation menu on desktop (30% width with 20px margin)
- Hidden floating voice button on desktop (using center button instead)
- Updated voice command button to pink color (#FF69B4) matching design
- Added rounded corners to desktop bottom navigation

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-03 20:55:42 +00:00
75e5c2866d feat: Redesign UI with consistent card styling and mobile header
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
- Updated track page cards to match home page styling with vibrant colors
- Applied consistent 140px height cards across track and insights pages
- Added mobile header bar with connection status and user menu
- Moved user menu from floating top-left to fixed header top-right
- Updated insights dashboard with home page color palette (#E91E63, #1976D2, etc.)
- Centered cards with minWidth constraints (200px for stats, 400px for charts)
- Fixed hydration mismatch by replacing JS media queries with CSS breakpoints
- Improved accessibility with viewport settings (removed zoom restrictions)
- Added UI improvements documentation

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-03 20:34:06 +00:00
8f150cbf59 feat: Redesign mobile UI with centered voice button and user menu
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
- Repositioned Voice Command button to center of bottom navigation bar
- Added floating user menu icon in top-left corner on mobile
- User menu includes: Settings, Children, Family, and Logout options
- Updated bottom nav to show: Home, Track, Voice (center), Insights, History
- Hide original floating voice button on mobile to avoid duplication
- Improved mobile UX with easier thumb access to voice commands
- User avatar displays first letter of user's name

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-03 15:06:46 +00:00
acadfe7905 feat: Apply localization to Login, Dashboard, and Navigation (Phase 9 - Batch 1)
**Pages Localized:**
- Login page: All UI strings (titles, labels, buttons, links)
- Dashboard page: Welcome message, quick actions, daily summary, predictions
- AppShell: Connection status and presence indicators
- MobileNav: Menu items and app branding
- TabBar: Bottom navigation labels

**Translation Files:**
- Created dashboard.json for all 5 languages (en, es, fr, pt, zh)
- Enhanced common.json with navigation and connection strings
- Updated i18n config to include dashboard namespace

**Languages Supported:**
- English, Spanish, French, Portuguese, Chinese (Simplified)

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-03 11:17:47 +00:00
7f9226b943 feat: Complete Real-Time Sync implementation 🔄
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
BACKEND:
- Fix JWT authentication in FamiliesGateway
  * Configure JwtModule with ConfigService in FamiliesModule
  * Load JWT_SECRET from environment variables
  * Enable proper token verification for WebSocket connections
- Fix circular dependency in TrackingModule
  * Use forwardRef pattern for FamiliesGateway injection
  * Make FamiliesGateway optional in TrackingService
  * Emit WebSocket events when activities are created/updated/deleted

FRONTEND:
- Create WebSocket service (336 lines)
  * Socket.IO client with auto-reconnection (exponential backoff 1s → 30s)
  * Family room join/leave management
  * Presence tracking (online users per family)
  * Event handlers for activities, children, members
  * Connection recovery with auto-rejoin
- Create useWebSocket hook (187 lines)
  * Auto-connect on user authentication
  * Auto-join user's family room
  * Connection status tracking
  * Presence indicators
  * Hooks: useRealTimeActivities, useRealTimeChildren, useRealTimeFamilyMembers
- Expose access token in AuthContext
  * Add token property to AuthContextType interface
  * Load token from tokenStorage on initialization
  * Update token state on login/register/logout
  * Enable WebSocket authentication
- Integrate real-time sync across app
  * AppShell: Connection status indicator + online count badge
  * Activities page: Auto-refresh on family activity events
  * Home page: Auto-refresh daily summary on activity changes
  * Family page: Real-time member updates
- Fix accessibility issues
  * Remove deprecated legacyBehavior from Link components (Next.js 15)
  * Fix color contrast in EmailVerificationBanner (WCAG AA)
  * Add missing aria-labels to IconButtons
  * Fix React key warnings in family member list

DOCUMENTATION:
- Update implementation-gaps.md
  * Mark Real-Time Sync as COMPLETED 
  * Document WebSocket room management implementation
  * Document connection recovery and presence indicators
  * Update summary statistics (49 features completed)

FILES CREATED:
- maternal-web/hooks/useWebSocket.ts (187 lines)
- maternal-web/lib/websocket.ts (336 lines)

FILES MODIFIED (14):
Backend (4):
- families.gateway.ts (JWT verification fix)
- families.module.ts (JWT config with ConfigService)
- tracking.module.ts (forwardRef for FamiliesModule)
- tracking.service.ts (emit WebSocket events)

Frontend (9):
- lib/auth/AuthContext.tsx (expose access token)
- components/layouts/AppShell/AppShell.tsx (connection status + presence)
- app/activities/page.tsx (real-time activity updates)
- app/page.tsx (real-time daily summary refresh)
- app/family/page.tsx (accessibility fixes)
- app/(auth)/login/page.tsx (remove legacyBehavior)
- components/common/EmailVerificationBanner.tsx (color contrast fix)

Documentation (1):
- docs/implementation-gaps.md (updated status)

IMPACT:
 Real-time family collaboration achieved
 Activities sync instantly across all family members' devices
 Presence tracking shows who's online
 Connection recovery handles poor network conditions
 Accessibility improvements (WCAG AA compliance)

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

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