Date/Time Formatting Polish:
- Added German and Italian locales to useLocalizedDate hook
- Applied localized date formatting to children birth dates (PPP format)
- InsightsDashboard already using localized date formatting
Number Formatting Polish:
- Applied Intl.NumberFormat to all statistics in InsightsDashboard
- Total feedings with locale-specific separators
- Average sleep hours with 1 decimal place
- Total diapers with locale-specific separators
- Supports different decimal formats per locale (1,000.50 vs 1.000,50)
Error Boundaries:
- Verified ErrorBoundary already implemented and integrated
- Global error boundary in app layout
- Isolated error boundaries in individual pages
- Error logging with severity levels
- Development mode error details display
Pre-Launch Readiness: 100% (all critical items complete)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Created BACKLOG.md with 20 organized tasks from localization plan
- Categorized by priority: High (3), Medium (3), Low (14)
- Added implementation details, file references, and effort estimates
- Organized into 3 recommended sprints
- Total remaining work: 40-60 hours (1-1.5 weeks)
- Includes localization refinement, testing, documentation, and future features
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- 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>
- 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>
- Extract family data from registration response and add to user object
- Backend returns family separately in registration, but included in user for login
- Remove error messages for language/measurement preferences (they save correctly)
- Add detailed console logging for debugging family issues
- Improve error message when family is missing during child creation
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added dateOfBirth, parentalEmail, and coppaConsentGiven to RegisterData interface
- Updated register function to include all required COPPA compliance fields in API payload
- Added debug logging to see registration payload
- Fixed 400 error during registration due to missing required dateOfBirth field
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Moved themeColor and viewport config from metadata to viewport export
- Fixes Next.js 15 warnings about unsupported metadata fields
- Registration error was actually due to user already existing (409)
- Backend validation passes correctly with deviceInfo included
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- 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>
- Updated all Spanish (es) translation files with comprehensive translations for tracking, AI, family, insights, children, and settings pages
- Updated French (fr), Portuguese (pt), and Chinese (zh) translations to match English structure
- Added German (de) and Italian (it) language support with complete translation files
- Fixed medicine tracker route from /track/medication to /track/medicine
- Updated i18n config to support 7 languages: en, es, fr, pt, zh, de, it
- All tracking pages now fully localized: sleep, feeding, diaper, medicine, activity
- AI assistant interface fully translated with thinking messages and suggested questions
- Family management and insights pages now support all languages
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changed quick action link from /track/medication to /track/medicine
to match the actual route defined in the app structure.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Updated getMedicineDetails() in medicine tracking page to:
- Convert ml dosages to oz when user has imperial preference
- Display non-liquid units (mg, tablets, drops) as-is
- Match the pattern used in feeding page for consistency
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed measurement unit not persisting across page refreshes:
- Settings page now includes measurementUnit in the preferences object when saving
- MeasurementUnitSelector now accepts value/onChange props for controlled usage
- Settings state properly loads and saves measurementUnit from user preferences
- UnitInput component will now correctly read imperial/metric from user.preferences.measurementUnit
Previously, measurementUnit was only saved to localStorage but not synced to backend,
causing UnitInput to always default to metric since it reads from user.preferences.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implemented automatic unit conversions for feeding and medicine tracking:
- Created UnitInput component for automatic ml↔oz conversions
- Updated Feeding page to use UnitInput for bottle amounts
- Updated Medicine page to use UnitInput for liquid medicine dosages
- All values stored in metric (ml) in database
- Display values automatically converted based on user's measurement preference
- Supports voice input with proper unit handling
Component features:
- Automatic conversion between metric and imperial
- User preference-based display
- Consistent metric storage
- Type safety with TypeScript
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
The getUserById method (called by /me endpoint) was missing the timezone
field in its response, causing timezone preferences to revert to UTC after
page refresh. This fix ensures the timezone is returned alongside other
user profile data.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed React hydration warnings caused by invalid HTML nesting in the
DeviceTrustManagement component.
## Issues Fixed
- Error: "<p> cannot be a descendant of <p>"
- Error: "<div> cannot be a descendant of <p>"
- Error: "<p> cannot contain a nested <p>"
- Error: "<p> cannot contain a nested <div>"
## Root Cause
The ListItemText component renders its secondary prop as a <p> tag by default.
We were incorrectly nesting Box (<div>) and Typography (<p>) components inside
the secondary prop, causing invalid HTML structure.
## Solution
- Removed nested Box and Typography components from ListItemText props
- Used simple text content with <br /> for line breaks in secondary text
- Moved chips (Current, Trusted/Untrusted) outside of ListItemText
- Positioned chips as separate Box between ListItemText and ListItemSecondaryAction
- Maintained visual layout while fixing HTML structure
## Changes
- primary: Now just plain text (device.platform)
- secondary: Plain text with <br /> separator instead of nested Typography
- Chips: Moved to separate Box with flex layout
This ensures proper HTML semantics and eliminates hydration errors.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Simplified the settings page by consolidating all save buttons into one
global "Save Preferences" button at the bottom of the page.
## Changes Made
### Unified Save Handler
- Merged `handleSaveProfile` and `handleSavePreferences` into single `handleSaveAll` function
- Single save handler now updates:
* Profile name
* Timezone
* Time format (12h/24h)
* Notification preferences
- One API call to save all settings at once
### Removed Individual Save Buttons
- Removed "Save Profile" button from Profile Information section
- Removed "Save Preferences" button from Preferences section
- Removed "Save Notification Settings" button from Notifications section
### Added Global Save Button
- Centered "Save Preferences" button at bottom of settings
- Positioned above Account Actions (Logout) section
- Large, prominent button (minWidth: 200px)
- Single source of truth for all settings changes
### User Experience Benefits
- **Simpler**: One clear action to save all changes
- **Fewer clicks**: No need to save each section separately
- **Clear feedback**: Single success/error message for all updates
- **Better UX**: Users can make multiple changes and save once
- **Consistent**: All settings treated as unified preferences
Files changed: 1 file (settings page)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Improved the settings page by removing individual save buttons from each
preference component and adding unified save buttons per section:
## Changes Made
### Component Updates
- **TimeZoneSelector**: Converted to controlled component with value/onChange props
* Removed internal state management and save button
* Removed success/error alerts (now handled by parent)
* Added auto-detect as simple button without save
- **TimeFormatSelector**: Converted to controlled component with value/onChange props
* Removed internal state management and save button
* Removed success/error alerts (now handled by parent)
* Simplified to just radio buttons with preview
### Settings Page Improvements
- Added timezone and timeFormat to local state
- Created separate save handlers:
* `handleSaveProfile` - for name/email changes
* `handleSavePreferences` - for timezone and time format
- Three clear sections with dedicated save buttons:
1. **Profile Information** → "Save Profile" button
2. **Preferences** (Language, Units, Timezone, Time Format) → "Save Preferences" button
3. **Notifications** → "Save Notification Settings" button
### User Experience Benefits
- Clearer separation between different types of settings
- Single save action per logical section instead of multiple buttons
- Consistent save pattern across all settings cards
- Reduced visual clutter with fewer buttons on page
- Better organization: related settings grouped with one save action
Files changed: 3 files (TimeZoneSelector, TimeFormatSelector, settings page)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
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>
Updated backend to support measurement unit preferences (Metric/Imperial)
in user profiles. The preferences are stored in the existing JSONB
preferences column, which already exists in the database.
**Backend Changes:**
- Updated User entity to include measurementUnit in preferences type
- Created UpdateProfileDto with proper validation for preferences
- Updated auth controller to use UpdateProfileDto for PATCH /api/v1/auth/profile
- Added IsIn validator for measurementUnit ('metric' | 'imperial')
**Documentation:**
- Updated LOCALIZATION_IMPLEMENTATION_PLAN.md with completion status
- Marked Phases 1, 2, 3, 7, 8 as completed
- Marked Phase 4 (backend preferences) as in progress
- Added detailed completion markers for each subsection
**Technical Details:**
- No migration needed - using existing preferences JSONB column
- Preferences object now includes: notifications, emailUpdates, darkMode, measurementUnit
- Endpoint: PATCH /api/v1/auth/profile accepts optional preferences object
- Validation ensures measurementUnit is either 'metric' or 'imperial'
**Next Steps:**
- Frontend integration to persist language/measurement preferences to backend
- Apply localization throughout remaining pages and components
- Create onboarding flow with language/measurement selection
🤖 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>
Add complete GraphQL mutation support for activity tracking and child management:
**Activity Mutations:**
- createActivity: Create new activities (feeding, sleep, diaper, medication)
- updateActivity: Update existing activities
- deleteActivity: Delete activities
**Child Mutations:**
- createChild: Add new children to families
- updateChild: Update child information
- deleteChild: Soft delete children
**Implementation Details:**
- Created GraphQL input types (CreateActivityInput, UpdateActivityInput, CreateChildInput, UpdateChildInput)
- Implemented ActivityResolver with full CRUD mutations
- Implemented ChildResolver with full CRUD mutations
- Registered resolvers in GraphQL module with TrackingService and ChildrenService
- Auto-generated GraphQL schema with all mutations
- All mutations protected with GqlAuthGuard for authentication
- Support for JSON metadata fields and Gender enum
🤖 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>
Implemented mobile-first collapsible conversation groups with full group management:
Backend Changes:
- Added PATCH /api/v1/ai/conversations/:id/group endpoint to move conversations
- Added GET /api/v1/ai/groups endpoint to list user groups
- Added updateConversationGroup() service method (ai.service.ts:687-710)
- Added getConversationGroups() service method (ai.service.ts:712-730)
- Uses existing metadata field in AIConversation entity (no migration needed)
- Updated getUserConversations() to include metadata field
Frontend Changes:
- Implemented collapsible group headers with Folder/FolderOpen icons
- Added organizeConversations() to group by metadata.groupName (lines 243-271)
- Added toggleGroupCollapse() for expand/collapse functionality (lines 273-283)
- Implemented context menu with "Move to Group" and "Delete" options (lines 309-320)
- Created Move to Group dialog with existing groups list (lines 858-910)
- Created Create New Group dialog with text input (lines 912-952)
- Mobile-first design with touch-optimized targets and smooth animations
- Right-click (desktop) or long-press (mobile) for context menu
- Shows conversation count per group in header
- Indented conversations (pl: 5) show visual hierarchy
- Groups sorted alphabetically with "Ungrouped" always last
Component Growth:
- Backend: ai.controller.ts (+35 lines), ai.service.ts (+43 lines)
- Frontend: AIChatInterface.tsx (663 → 955 lines, +292 lines)
Mobile UX Enhancements:
- MoreVert icon on mobile vs Delete icon on desktop
- Touch-optimized group headers (larger padding)
- Smooth Collapse animations (timeout: 'auto')
- Context menu replaces inline actions on small screens
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implemented full conversation management interface with the following features:
- Conversation history sidebar (desktop) / drawer (mobile)
- Load and display all user conversations
- Click to load specific conversation
- "New Chat" button to start fresh conversation
- Delete conversation with confirmation dialog
- Persist conversationId across messages in same conversation
- Responsive design with Material-UI breakpoints
Technical Details:
- Added Conversation interface and state management (lines 107-111)
- Load conversations from GET /api/v1/ai/conversations on mount
- Load specific conversation from GET /api/v1/ai/conversations/:id
- Delete conversation via DELETE /api/v1/ai/conversations/:id
- Updated handleSend() to pass currentConversationId instead of null
- Auto-update conversationId from API response for new conversations
- Mobile: Hamburger menu to open drawer
- Desktop: Fixed 320px sidebar with conversation list
Component grew from 420 → 663 lines
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
