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>
76 lines
2.2 KiB
JSON
76 lines
2.2 KiB
JSON
{
|
|
"name": "maternal-web",
|
|
"version": "0.1.0",
|
|
"private": true,
|
|
"scripts": {
|
|
"dev": "next dev -p 3030 -H 0.0.0.0",
|
|
"build": "next build",
|
|
"start": "next start",
|
|
"lint": "next lint",
|
|
"test": "jest",
|
|
"test:watch": "jest --watch",
|
|
"test:coverage": "jest --coverage",
|
|
"test:e2e": "playwright test",
|
|
"test:e2e:ui": "playwright test --ui",
|
|
"test:e2e:headed": "playwright test --headed"
|
|
},
|
|
"dependencies": {
|
|
"@apollo/client": "^4.0.7",
|
|
"@emotion/react": "^11.14.0",
|
|
"@emotion/styled": "^11.14.1",
|
|
"@hookform/resolvers": "^5.2.2",
|
|
"@mui/icons-material": "^7.3.3",
|
|
"@mui/material": "^7.3.3",
|
|
"@mui/material-nextjs": "^7.3.3",
|
|
"@reduxjs/toolkit": "^2.9.0",
|
|
"@simplewebauthn/browser": "^13.2.0",
|
|
"@tanstack/react-query": "^5.90.2",
|
|
"axios": "^1.12.2",
|
|
"date-fns": "^4.1.0",
|
|
"date-fns-tz": "^3.2.0",
|
|
"focus-trap-react": "^11.0.4",
|
|
"framer-motion": "^12.23.22",
|
|
"graphql": "^16.11.0",
|
|
"i18next": "^25.5.3",
|
|
"i18next-browser-languagedetector": "^8.2.0",
|
|
"next": "^15.5.4",
|
|
"next-pwa": "^5.6.0",
|
|
"react": "^19.2.0",
|
|
"react-dom": "^19.2.0",
|
|
"react-focus-lock": "^2.13.6",
|
|
"react-hook-form": "^7.63.0",
|
|
"react-i18next": "^16.0.0",
|
|
"react-markdown": "^10.1.0",
|
|
"react-redux": "^9.2.0",
|
|
"recharts": "^3.2.1",
|
|
"redux-persist": "^6.0.0",
|
|
"remark-gfm": "^4.0.1",
|
|
"socket.io-client": "^4.8.1",
|
|
"web-vitals": "^5.1.0",
|
|
"workbox-webpack-plugin": "^7.3.0",
|
|
"workbox-window": "^7.3.0",
|
|
"zod": "^4.1.11"
|
|
},
|
|
"devDependencies": {
|
|
"@axe-core/react": "^4.10.2",
|
|
"@playwright/test": "^1.55.1",
|
|
"@testing-library/jest-dom": "^6.9.1",
|
|
"@testing-library/react": "^16.3.0",
|
|
"@testing-library/user-event": "^14.6.1",
|
|
"@types/jest": "^30.0.0",
|
|
"@types/node": "^24.6.2",
|
|
"@types/react": "^19.2.0",
|
|
"@types/react-dom": "^19.2.0",
|
|
"eslint-config-next": "^15.5.4",
|
|
"eslint-plugin-jsx-a11y": "^6.10.2",
|
|
"identity-obj-proxy": "^3.0.0",
|
|
"jest": "^30.2.0",
|
|
"jest-axe": "^10.0.0",
|
|
"jest-environment-jsdom": "^30.2.0",
|
|
"postcss": "^8",
|
|
"tailwindcss": "^3.4.1",
|
|
"ts-jest": "^29.4.4",
|
|
"typescript": "^5"
|
|
}
|
|
}
|