This commit implements comprehensive timezone and time format customization:
## Backend Changes
- Added timeFormat field ('12h' | '24h') to user preferences JSONB in user entity
- Timezone field already existed in user entity, now actively used
- Backend ready to accept timezone on registration
## Frontend Components (2 new)
- TimeZoneSelector: Dropdown with timezones grouped by region (Americas, Europe, Asia, Pacific, Africa)
* Auto-detect button to detect browser timezone
* Save functionality with success/error feedback
* Integrated into Settings > Preferences section
- TimeFormatSelector: Radio buttons to choose 12h vs 24h format
* Live preview showing current time in selected format
* Save functionality with user feedback
* Integrated into Settings > Preferences section
## Timezone Auto-Detection
- Register function now auto-detects user's timezone via Intl.DateTimeFormat()
- Detected timezone sent to backend during registration
- Timezone stored in user profile for persistent preference
## Enhanced useLocalizedDate Hook
- Added useAuth integration to access user timezone and timeFormat preferences
- Installed and integrated date-fns-tz for timezone conversion
- New format() function with timezone support via useTimezone option
- New formatTime() function respecting user's 12h/24h preference
- New formatDateTime() function combining date, time, and timezone
- All formatting now respects user's:
* Language (existing: en, es, fr, pt-BR, zh-CN)
* Timezone (user-selected or auto-detected)
* Time format (12h with AM/PM or 24h)
## Settings Page Updates
- Added TimeZoneSelector to Preferences card
- Added TimeFormatSelector to Preferences card
- Visual separators (Dividers) between preference sections
- Settings now show: Language | Units | Timezone | Time Format
## Translations
- Enhanced settings.json with timezone and time format keys:
* preferences.timezone, autoDetectTimezone, timezoneUpdated
* preferences.12hour, 24hour, timeFormatUpdated
## User Experience Flow
1. User registers → timezone auto-detected and saved
2. User can change timezone in Settings > Preferences > Time Zone
3. User can change time format in Settings > Preferences > Time Format
4. All dates/times throughout app respect these preferences
5. Changes persist across sessions
Files changed: 10 files
New dependencies: date-fns-tz
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
**Pages Localized:**
- Track main page: Activity selection menu with all tracking options
- Children page: Complete localization including age formatting with pluralization
**Translation Files:**
- Enhanced tracking.json: Added trackActivity, selectActivity, and activities keys
- Created children.json for all 5 languages with comprehensive strings
- Updated i18n config to include children namespace
**Key Features:**
- Localized age calculation with proper pluralization (year/years, month/months)
- All error messages translated
- Gender labels localized
- Properly formatted age display for all languages
**Languages Supported:**
- English, Spanish, French, Portuguese, Chinese (Simplified)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implemented comprehensive frontend localization infrastructure supporting
5 languages (English, Spanish, French, Portuguese, Chinese) with measurement
unit preferences (Metric/Imperial). This lays the foundation for international
user support.
**Core Infrastructure:**
- Installed i18next, react-i18next, i18next-browser-languagedetector
- Created I18nProvider component integrated into app layout
- Configured i18next with language detection and localStorage persistence
- Created 35 translation files (5 languages × 7 namespaces)
**Translation Namespaces:**
- common: App-wide UI elements, navigation, actions
- tracking: Activity tracking (feeding, sleep, diaper, milestones)
- ai: AI assistant chat interface
- auth: Authentication flows (login, signup, password reset)
- settings: Settings and preferences
- onboarding: Onboarding flow
- errors: Error messages and validation
**Custom Hooks:**
- useTranslation: Type-safe translation wrapper
- useLocale: Language and measurement system management
- useFormatting: Date, time, number, and unit formatting
**Measurement Unit Support:**
- Created unit conversion utilities (weight, height, temperature, volume)
- Metric: kg, cm, °C, ml
- Imperial: lb, in, °F, oz
- Bidirectional conversion functions
**UI Components:**
- LanguageSelector: Dropdown to change app language
- MeasurementUnitSelector: Toggle between Metric/Imperial
- Integrated both into Settings page Preferences section
**Next Steps (Remaining):**
- Add measurement preferences to backend user schema
- Create onboarding flow with language/measurement selection
- Apply translations to existing components (dashboard, tracking forms)
- Implement multi-language AI responses
- Add professional translations (currently using basic translations)
**File Highlights:**
- lib/i18n/config.ts: i18next configuration
- hooks/useFormatting.ts: Formatting utilities with locale support
- lib/utils/unitConversion.ts: Unit conversion logic
- components/settings/*Selector.tsx: Language and measurement selectors
- locales/*/: Translation files for 5 languages
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed two critical GraphQL schema issues preventing dashboard data loading:
**Backend Changes:**
- Changed child.birthDate from DATE to TIMESTAMP type in entity and database
- Updated TypeORM entity (child.entity.ts:23)
- Migrated database column: ALTER TABLE children ALTER COLUMN birth_date TYPE TIMESTAMP
- Added JSON scalar support for activity metadata field
- Installed graphql-type-json package
- Created JSONScalar (src/graphql/scalars/json.scalar.ts)
- Updated Activity.metadata from String to GraphQLJSON type
- Auto-generated schema.gql with JSON scalar definition
**Frontend Changes:**
- Fixed Apollo Client token storage key mismatch
- Changed from 'access_token' to 'accessToken' to match tokenStorage utility
- Enhanced dashboard logging for debugging GraphQL queries
**Database Migration:**
- Converted children.birth_date: DATE → TIMESTAMP
- Preserves existing data (2023-06-01 → 2023-06-01 00:00:00)
Resolves errors:
- "Expected DateTime.serialize() to return non-nullable value, returned: null"
- "String cannot represent value: { ... }" for activity metadata
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Frontend Compliance Features:
- Created compliance API client (data export, account deletion, deletion status)
- Added DataExport component with download functionality
- Added AccountDeletion component with 30-day grace period UI
- Updated Settings page with Privacy & Compliance sections
COPPA Age Verification:
- Added date of birth field to registration
- Age calculation with COPPA compliance (under 13 blocked)
- Parental email and consent for users 13-17
- Dynamic form validation based on age
Privacy & Terms:
- Separate checkboxes for Terms of Service and Privacy Policy
- Required acceptance for registration
- Links to policy pages
Completes GDPR Right to Data Portability and Right to Erasure.
Completes COPPA parental consent requirements.
## Backend Changes
- Update tracking.service.ts getDailySummary to calculate actual counts
- Import ActivityType enum for proper type comparisons
- Calculate feedingCount, sleepTotalMinutes, diaperCount, medicationCount
- Sleep duration now correctly calculated from startedAt/endedAt timestamps
## Frontend API Changes
- Add medicationCount to DailySummary interface
- Extract endTime from metadata and send as endedAt to backend
- Enables proper sleep duration tracking with start/end times
## Homepage Updates
- Add Medicine and Activities quick action buttons
- Update summary grid from 3 to 4 columns (responsive layout)
- Add medication count display with MedicalServices icon
- Improve grid responsiveness (xs=6, sm=3)
- Replace Analytics button with Activities button
## New Activities Page
- Create /activities page to show recent activity history
- Display last 7 days of activities with color-coded icons
- Show smart timestamps (Today/Yesterday/date format)
- Activity-specific descriptions (feeding amount, sleep duration, etc.)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implemented complete review/edit workflow for voice commands with ML feedback collection:
**Backend:**
- Created V012 migration for voice_feedback table with user action tracking
- Added VoiceFeedback entity with approval/edit/reject actions
- Implemented voice feedback API endpoint (POST /api/v1/voice/feedback)
- Fixed user ID extraction bug (req.user.userId vs req.user.sub)
**Frontend:**
- Built VoiceActivityReview component with field-specific editors
- Integrated review dialog into voice command workflow
- Added approve/edit/reject handlers with feedback submission
- Fixed infinite loop by tracking processed classification IDs
**Features:**
- Users can review AI-extracted data before saving
- Quick-edit capabilities for all activity fields
- Feedback data stored for ML model improvement
- Activity creation only happens after user approval/edit
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add LOGIN_BIOMETRIC to AuditAction enum
- Import AuditAction and EntityType in AuthService
- Fix loginWithExternalAuth return type to match AuthResponse interface
- Update biometric API client to use correct response structure
- Update login page to access tokens from nested data structure
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Create biometric API client with WebAuthn methods
- Add BiometricSettings component for credential management
- Support Face ID, Touch ID, Windows Hello enrollment
- Display list of enrolled credentials with metadata
- Add/remove/rename biometric credentials
- Check browser and platform authenticator support
- Integrate into settings page with animations
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implements user interface for viewing and managing active sessions:
Session Management Features:
- SessionsManagement component with full session management UI
- List all active sessions with device information
- Platform-specific icons (Computer, Phone, Tablet)
- Current session indicator with green chip
- Session details: device fingerprint, platform, last used, created date
- Revoke individual sessions with confirmation dialog
- Revoke all sessions except current with bulk action
- Real-time session count display
User Experience:
- Visual device type indicators
- Human-readable time formatting (e.g., "2 hours ago")
- Current session clearly marked and protected from removal
- Warning dialogs before revoking sessions
- Success/error feedback with alerts
- Loading states for all operations
- Empty state handling
API Integration:
- Sessions API client in lib/api/sessions.ts
- Get all sessions
- Get session count
- Revoke specific session
- Revoke all sessions except current
- Proper error handling and user feedback
Settings Page Integration:
- Added Sessions Management section
- Placed after Security/MFA settings
- Animated transitions with staggered delays
- Maintains consistent settings page layout
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implemented comprehensive rate limiting for API security:
- Created custom Next.js-native rate limiter using in-memory store
- Added 5 rate limit configurations:
- authLimiter: 5 requests/15min for login/register/password-reset
- aiLimiter: 10 requests/hour for AI assistant queries
- trackingLimiter: 30 requests/min for activity tracking
- readLimiter: 100 requests/min for read-only endpoints
- sensitiveLimiter: 3 requests/hour for sensitive operations
- Applied rate limiting to endpoints:
- /api/auth/login, /api/auth/register, /api/auth/password-reset
- /api/ai/chat
- /api/tracking/feeding (GET and POST)
- Rate limit responses include standard headers:
- RateLimit-Limit, RateLimit-Remaining, RateLimit-Reset
- Retry-After header with seconds until reset
- Tested with 7 sequential requests - first 5 passed, last 2 blocked with 429
Note: Current implementation uses in-memory store. For production with
multiple instances, migrate to Redis-backed storage for distributed
rate limiting.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
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>
