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>
Issue: MUI v7 CircularProgress was causing hydration mismatch warnings
due to different CSS class names between server and client renders.
Solution: Only render the MUI loading component on the client side
using isClient state flag. This prevents SSR hydration issues while
maintaining the same functionality.
Changes:
- Added useState to track client-side rendering
- Conditionally render CircularProgress only on client
- Server now renders null for loading state (no hydration mismatch)
- Install redux-persist package
- Configure persistReducer with whitelist (offline, activities, children)
- Exclude network slice from persistence (should be fresh on reload)
- Add PersistGate to ReduxProvider with loading indicator
- Configure serializableCheck to ignore persist actions
- Store state now persists to localStorage automatically
This fixes the issue where app state was lost on page reload, improving UX.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
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>
