andrei/maternal-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add timezone and time format preferences with auto-detection

Browse Source 
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>
This commit is contained in:
Andrei
2025-10-03 11:56:42 +00:00
parent b56f9546c2
commit 49ac1dd58a
9 changed files with 388 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
maternal-app/maternal-app-backend/src/database/entities/user.entity.ts
View File

@@ -92,6 +92,7 @@ export class User {
emailUpdates?: boolean;
darkMode?: boolean;
measurementUnit?: 'metric' | 'imperial';
timeFormat?: '12h' | '24h';
};
@CreateDateColumn({ name: 'created_at' })

9
maternal-web/app/settings/page.tsx
View File

@@ -15,6 +15,8 @@ import { DataExport } from '@/components/settings/DataExport';
import { AccountDeletion } from '@/components/settings/AccountDeletion';
import { LanguageSelector } from '@/components/settings/LanguageSelector';
import { MeasurementUnitSelector } from '@/components/settings/MeasurementUnitSelector';
import { TimeZoneSelector } from '@/components/settings/TimeZoneSelector';
import { TimeFormatSelector } from '@/components/settings/TimeFormatSelector';
import { motion } from 'framer-motion';
export default function SettingsPage() {
@@ -152,7 +154,7 @@ export default function SettingsPage() {
</Card>
</motion.div>
{/* Preferences (Language & Measurement Units) */}
{/* Preferences (Language, Measurement Units, Timezone, Time Format) */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
@@ -165,7 +167,12 @@ export default function SettingsPage() {
</Typography>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, mt: 2 }}>
<LanguageSelector />
<Divider />
<MeasurementUnitSelector />
<Divider />
<TimeZoneSelector />
<Divider />
<TimeFormatSelector />
</Box>
</CardContent>
</Card>

127
maternal-web/components/settings/TimeFormatSelector.tsx Normal file
View File

@@ -0,0 +1,127 @@
'use client';
import { useState } from 'react';
import {
Box,
FormControl,
RadioGroup,
FormControlLabel,
Radio,
Button,
CircularProgress,
Alert,
Typography,
} from '@mui/material';
import { Save, Schedule } from '@mui/icons-material';
import { useAuth } from '@/lib/auth/AuthContext';
import { usersApi } from '@/lib/api/users';
import { useTranslation } from '@/hooks/useTranslation';
export function TimeFormatSelector() {
const { user, refreshUser } = useAuth();
const { t } = useTranslation('settings');
const [timeFormat, setTimeFormat] = useState<'12h' | '24h'>(
user?.preferences?.timeFormat || '12h'
);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [successMessage, setSuccessMessage] = useState<string | null>(null);
const handleSave = async () => {
setIsLoading(true);
setError(null);
setSuccessMessage(null);
try {
await usersApi.updateProfile({
preferences: {
...user?.preferences,
timeFormat,
},
});
await refreshUser();
setSuccessMessage('Time format updated successfully');
} catch (err: any) {
console.error('Failed to update time format:', err);
setError(err.response?.data?.message || 'Failed to update time format');
} finally {
setIsLoading(false);
}
};
const currentTime = new Date();
const preview12h = currentTime.toLocaleTimeString('en-US', {
hour: 'numeric',
minute: '2-digit',
hour12: true,
});
const preview24h = currentTime.toLocaleTimeString('en-US', {
hour: '2-digit',
minute: '2-digit',
hour12: false,
});
return (
<Box>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
<Schedule color="action" />
<Typography variant="subtitle1" fontWeight="600">
Time Format
</Typography>
</Box>
{error && (
<Alert severity="error" sx={{ mb: 2 }} onClose={() => setError(null)}>
{error}
</Alert>
)}
{successMessage && (
<Alert severity="success" sx={{ mb: 2 }} onClose={() => setSuccessMessage(null)}>
{successMessage}
</Alert>
)}
<FormControl component="fieldset" sx={{ mb: 2 }}>
<RadioGroup
value={timeFormat}
onChange={(e) => setTimeFormat(e.target.value as '12h' | '24h')}
>
<FormControlLabel
value="12h"
control={<Radio disabled={isLoading} />}
label={
<Box>
<Typography variant="body1">12-hour format</Typography>
<Typography variant="body2" color="text.secondary">
Example: {preview12h}
</Typography>
</Box>
}
/>
<FormControlLabel
value="24h"
control={<Radio disabled={isLoading} />}
label={
<Box>
<Typography variant="body1">24-hour format</Typography>
<Typography variant="body2" color="text.secondary">
Example: {preview24h}
</Typography>
</Box>
}
/>
</RadioGroup>
</FormControl>
<Button
variant="contained"
startIcon={isLoading ? <CircularProgress size={20} color="inherit" /> : <Save />}
onClick={handleSave}
disabled={isLoading || timeFormat === user?.preferences?.timeFormat}
>
{isLoading ? 'Saving...' : 'Save'}
</Button>
</Box>
);
}

167
maternal-web/components/settings/TimeZoneSelector.tsx Normal file
View File

@@ -0,0 +1,167 @@
'use client';
import { useState } from 'react';
import {
Box,
FormControl,
InputLabel,
Select,
MenuItem,
Button,
CircularProgress,
Alert,
Typography,
} from '@mui/material';
import { Save, AccessTime } from '@mui/icons-material';
import { useAuth } from '@/lib/auth/AuthContext';
import { usersApi } from '@/lib/api/users';
import { useTranslation } from '@/hooks/useTranslation';
// Common timezones grouped by region
const TIMEZONES = {
'Americas': [
{ value: 'America/New_York', label: 'Eastern Time (US & Canada)' },
{ value: 'America/Chicago', label: 'Central Time (US & Canada)' },
{ value: 'America/Denver', label: 'Mountain Time (US & Canada)' },
{ value: 'America/Los_Angeles', label: 'Pacific Time (US & Canada)' },
{ value: 'America/Anchorage', label: 'Alaska' },
{ value: 'Pacific/Honolulu', label: 'Hawaii' },
{ value: 'America/Phoenix', label: 'Arizona' },
{ value: 'America/Toronto', label: 'Toronto' },
{ value: 'America/Vancouver', label: 'Vancouver' },
{ value: 'America/Mexico_City', label: 'Mexico City' },
{ value: 'America/Sao_Paulo', label: 'São Paulo' },
{ value: 'America/Buenos_Aires', label: 'Buenos Aires' },
],
'Europe': [
{ value: 'Europe/London', label: 'London' },
{ value: 'Europe/Paris', label: 'Paris' },
{ value: 'Europe/Berlin', label: 'Berlin' },
{ value: 'Europe/Rome', label: 'Rome' },
{ value: 'Europe/Madrid', label: 'Madrid' },
{ value: 'Europe/Amsterdam', label: 'Amsterdam' },
{ value: 'Europe/Brussels', label: 'Brussels' },
{ value: 'Europe/Vienna', label: 'Vienna' },
{ value: 'Europe/Athens', label: 'Athens' },
{ value: 'Europe/Moscow', label: 'Moscow' },
],
'Asia': [
{ value: 'Asia/Dubai', label: 'Dubai' },
{ value: 'Asia/Kolkata', label: 'India (Kolkata)' },
{ value: 'Asia/Shanghai', label: 'China (Shanghai)' },
{ value: 'Asia/Hong_Kong', label: 'Hong Kong' },
{ value: 'Asia/Singapore', label: 'Singapore' },
{ value: 'Asia/Tokyo', label: 'Tokyo' },
{ value: 'Asia/Seoul', label: 'Seoul' },
{ value: 'Asia/Bangkok', label: 'Bangkok' },
{ value: 'Asia/Jakarta', label: 'Jakarta' },
],
'Pacific': [
{ value: 'Australia/Sydney', label: 'Sydney' },
{ value: 'Australia/Melbourne', label: 'Melbourne' },
{ value: 'Australia/Brisbane', label: 'Brisbane' },
{ value: 'Pacific/Auckland', label: 'Auckland' },
{ value: 'Pacific/Fiji', label: 'Fiji' },
],
'Africa': [
{ value: 'Africa/Cairo', label: 'Cairo' },
{ value: 'Africa/Johannesburg', label: 'Johannesburg' },
{ value: 'Africa/Lagos', label: 'Lagos' },
{ value: 'Africa/Nairobi', label: 'Nairobi' },
],
};
export function TimeZoneSelector() {
const { user, refreshUser } = useAuth();
const { t } = useTranslation('settings');
const [timezone, setTimezone] = useState(user?.timezone || 'UTC');
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [successMessage, setSuccessMessage] = useState<string | null>(null);
const handleSave = async () => {
setIsLoading(true);
setError(null);
setSuccessMessage(null);
try {
await usersApi.updateProfile({ timezone });
await refreshUser();
setSuccessMessage('Timezone updated successfully');
} catch (err: any) {
console.error('Failed to update timezone:', err);
setError(err.response?.data?.message || 'Failed to update timezone');
} finally {
setIsLoading(false);
}
};
const handleAutoDetect = () => {
const detectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
setTimezone(detectedTimezone);
setSuccessMessage(`Auto-detected timezone: ${detectedTimezone}`);
};
return (
<Box>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
<AccessTime color="action" />
<Typography variant="subtitle1" fontWeight="600">
Time Zone
</Typography>
</Box>
{error && (
<Alert severity="error" sx={{ mb: 2 }} onClose={() => setError(null)}>
{error}
</Alert>
)}
{successMessage && (
<Alert severity="success" sx={{ mb: 2 }} onClose={() => setSuccessMessage(null)}>
{successMessage}
</Alert>
)}
<FormControl fullWidth sx={{ mb: 2 }}>
<InputLabel>Time Zone</InputLabel>
<Select
value={timezone}
onChange={(e) => setTimezone(e.target.value)}
label="Time Zone"
disabled={isLoading}
>
{Object.entries(TIMEZONES).map(([region, zones]) => [
<MenuItem key={region} disabled sx={{ fontWeight: 'bold', color: 'text.primary' }}>
{region}
</MenuItem>,
...zones.map((zone) => (
<MenuItem key={zone.value} value={zone.value} sx={{ pl: 4 }}>
{zone.label}
</MenuItem>
)),
])}
<MenuItem value="UTC">UTC (Universal Time)</MenuItem>
</Select>
</FormControl>
<Box sx={{ display: 'flex', gap: 2 }}>
<Button
variant="outlined"
onClick={handleAutoDetect}
disabled={isLoading}
>
Auto-Detect
</Button>
<Button
variant="contained"
startIcon={isLoading ? <CircularProgress size={20} color="inherit" /> : <Save />}
onClick={handleSave}
disabled={isLoading || timezone === user?.timezone}
>
{isLoading ? 'Saving...' : 'Save'}
</Button>
</Box>
</Box>
);
}

68
maternal-web/hooks/useLocalizedDate.ts
View File

@@ -1,10 +1,13 @@
import { useTranslation } from './useTranslation';
import { useAuth } from '@/lib/auth/AuthContext';
import {
format as dateFnsFormat,
formatDistanceToNow as dateFnsFormatDistanceToNow,
formatDistance as dateFnsFormatDistance,
formatRelative as dateFnsFormatRelative,
toZonedTime,
} from 'date-fns';
import { formatInTimeZone } from 'date-fns-tz';
import { enUS, es, fr, ptBR, zhCN } from 'date-fns/locale';
/**
@@ -25,22 +28,47 @@ const localeMap: Record<string, Locale> = {
/**
* Custom hook for localized date formatting using date-fns
* Automatically applies the correct locale based on the current i18n language
* Automatically applies the correct locale, timezone, and time format based on user preferences
*/
export function useLocalizedDate() {
const { language } = useTranslation();
const { user } = useAuth();
// Get the locale for the current language, fallback to enUS
const locale = localeMap[language] || enUS;
// Get timezone from user preferences, fallback to UTC or browser timezone
const timezone = user?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC';
// Get time format preference (12h or 24h)
const timeFormat = user?.preferences?.timeFormat || '12h';
/**
* Format a date using date-fns with the current locale
* Format a date using date-fns with the current locale and timezone
* @param date - The date to format
* @param formatStr - The format string (e.g., 'PPP', 'MM/dd/yyyy')
* @param formatStr - The format string (e.g., 'PPP', 'MM/dd/yyyy', 'p' for time)
* @param options - Optional formatting options
*/
const format = (date: Date | number | string, formatStr: string): string => {
const format = (
date: Date | number | string,
formatStr: string,
options?: { useTimezone?: boolean }
): string => {
const dateObj = typeof date === 'string' ? new Date(date) : date;
return dateFnsFormat(dateObj, formatStr, { locale });
// Replace time format tokens with 12h/24h based on preference
let adjustedFormat = formatStr;
if (timeFormat === '24h') {
// Convert 12h format to 24h format
adjustedFormat = formatStr.replace(/h:mm a/gi, 'HH:mm').replace(/p/g, 'HH:mm');
}
// Use timezone if requested
if (options?.useTimezone && timezone) {
return formatInTimeZone(dateObj, timezone, adjustedFormat, { locale });
}
return dateFnsFormat(dateObj, adjustedFormat, { locale });
};
/**
@@ -82,11 +110,41 @@ export function useLocalizedDate() {
return dateFnsFormatRelative(date, baseDate || new Date(), { locale });
};
/**
* Format a time string with the user's preferred time format
* @param date - The date/time to format
*/
const formatTime = (date: Date | number | string): string => {
const dateObj = typeof date === 'string' ? new Date(date) : date;
const formatStr = timeFormat === '24h' ? 'HH:mm' : 'h:mm a';
return dateFnsFormat(dateObj, formatStr, { locale });
};
/**
* Format a date and time with the user's timezone and time format
* @param date - The date/time to format
*/
const formatDateTime = (date: Date | number | string): string => {
const dateObj = typeof date === 'string' ? new Date(date) : date;
const timeFormatStr = timeFormat === '24h' ? 'HH:mm' : 'h:mm a';
const fullFormat = `PPP ${timeFormatStr}`;
if (timezone) {
return formatInTimeZone(dateObj, timezone, fullFormat, { locale });
}
return dateFnsFormat(dateObj, fullFormat, { locale });
};
return {
format,
formatDistanceToNow,
formatDistance,
formatRelative,
formatTime,
formatDateTime,
locale,
timezone,
timeFormat,
};
}

4
maternal-web/lib/auth/AuthContext.tsx
View File

@@ -141,10 +141,14 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
osVersion: navigator.platform,
};
// Auto-detect timezone from user's device
const detectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
const response = await apiClient.post('/api/v1/auth/register', {
email: data.email,
password: data.password,
name: data.name,
timezone: detectedTimezone || 'UTC',
deviceInfo,
});

9
maternal-web/locales/en/settings.json
View File

@@ -15,10 +15,15 @@
"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",
"24hour": "24-hour",
"12hour": "12-hour format",
"24hour": "24-hour format",
"timeFormatUpdated": "Time format updated successfully",
"theme": "Theme",
"light": "Light",
"dark": "Dark",

10
maternal-web/package-lock.json generated
View File

@@ -20,6 +20,7 @@
"@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",
@@ -6949,6 +6950,15 @@
"url": "https://github.com/sponsors/kossnocorp"
}
},
"node_modules/date-fns-tz": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-3.2.0.tgz",
"integrity": "sha512-sg8HqoTEulcbbbVXeg84u5UnlsQa8GS5QXMqjjYIhS4abEVVKIUwe0/l/UhrZdKaL/W5eWZNlbTeEIiOXTcsBQ==",
"license": "MIT",
"peerDependencies": {
"date-fns": "^3.0.0 || ^4.0.0"
}
},
"node_modules/debug": {
"version": "4.4.3",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",

1
maternal-web/package.json
View File

@@ -27,6 +27,7 @@
"@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",