Andrei
49ac1dd58a
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>
114 lines
3.3 KiB
JSON
114 lines
3.3 KiB
JSON
{
|
|
"title": "Settings",
|
|
"account": {
|
|
"title": "Account",
|
|
"profile": "Profile",
|
|
"email": "Email",
|
|
"password": "Password",
|
|
"changePassword": "Change Password",
|
|
"deleteAccount": "Delete Account",
|
|
"confirmDelete": "Are you sure you want to delete your account? This action cannot be undone."
|
|
},
|
|
"preferences": {
|
|
"title": "Preferences",
|
|
"language": "Language",
|
|
"measurementUnits": "Measurement Units",
|
|
"metric": "Metric (kg, cm, °C, ml)",
|
|
"imperial": "Imperial (lb, in, °F, oz)",
|
|
"timezone": "Time Zone",
|
|
"autoDetectTimezone": "Auto-Detect",
|
|
"timezoneUpdated": "Timezone updated successfully",
|
|
"timezoneAutoDetected": "Auto-detected timezone",
|
|
"dateFormat": "Date Format",
|
|
"timeFormat": "Time Format",
|
|
"12hour": "12-hour format",
|
|
"24hour": "24-hour format",
|
|
"timeFormatUpdated": "Time format updated successfully",
|
|
"theme": "Theme",
|
|
"light": "Light",
|
|
"dark": "Dark",
|
|
"auto": "Auto (System)"
|
|
},
|
|
"notifications": {
|
|
"title": "Notifications",
|
|
"push": "Push Notifications",
|
|
"email": "Email Notifications",
|
|
"feedingReminders": "Feeding Reminders",
|
|
"sleepReminders": "Sleep Reminders",
|
|
"milestoneAlerts": "Milestone Alerts",
|
|
"familyUpdates": "Family Updates",
|
|
"aiSuggestions": "AI Suggestions"
|
|
},
|
|
"privacy": {
|
|
"title": "Privacy & Security",
|
|
"dataSharing": "Data Sharing",
|
|
"familyAccess": "Family Access",
|
|
"biometric": "Biometric Authentication",
|
|
"enableFaceId": "Enable Face ID",
|
|
"enableTouchId": "Enable Touch ID",
|
|
"enableFingerprint": "Enable Fingerprint",
|
|
"dataExport": "Export Data",
|
|
"downloadData": "Download Your Data"
|
|
},
|
|
"family": {
|
|
"title": "Family",
|
|
"members": "Family Members",
|
|
"inviteMember": "Invite Member",
|
|
"removeMember": "Remove Member",
|
|
"permissions": "Permissions",
|
|
"role": "Role",
|
|
"roles": {
|
|
"admin": "Admin",
|
|
"parent": "Parent",
|
|
"caregiver": "Caregiver",
|
|
"viewer": "Viewer"
|
|
}
|
|
},
|
|
"children": {
|
|
"title": "Children",
|
|
"addChild": "Add Child",
|
|
"editChild": "Edit Child",
|
|
"removeChild": "Remove Child",
|
|
"name": "Name",
|
|
"dateOfBirth": "Date of Birth",
|
|
"gender": "Gender",
|
|
"genders": {
|
|
"male": "Male",
|
|
"female": "Female",
|
|
"other": "Other",
|
|
"preferNotToSay": "Prefer not to say"
|
|
}
|
|
},
|
|
"subscription": {
|
|
"title": "Subscription",
|
|
"plan": "Current Plan",
|
|
"free": "Free",
|
|
"premium": "Premium",
|
|
"upgradeToPremium": "Upgrade to Premium",
|
|
"manageBilling": "Manage Billing",
|
|
"cancelSubscription": "Cancel Subscription",
|
|
"renewalDate": "Renewal Date",
|
|
"features": {
|
|
"unlimitedAi": "Unlimited AI questions",
|
|
"familySync": "Family sync",
|
|
"advancedAnalytics": "Advanced analytics",
|
|
"exportReports": "Export reports",
|
|
"prioritySupport": "Priority support"
|
|
}
|
|
},
|
|
"about": {
|
|
"title": "About",
|
|
"version": "Version",
|
|
"termsOfService": "Terms of Service",
|
|
"privacyPolicy": "Privacy Policy",
|
|
"helpCenter": "Help Center",
|
|
"contactSupport": "Contact Support",
|
|
"rateApp": "Rate App",
|
|
"shareApp": "Share App"
|
|
},
|
|
"save": "Save Changes",
|
|
"saved": "Settings saved successfully",
|
|
"cancel": "Cancel",
|
|
"reset": "Reset to Default"
|
|
}
|