fix(i18n): honor general_time_format across all time displays
Route 10 surfaces that hardcoded 12-hour date-fns patterns
('h:mm a', 'PPp', 'p', toLocaleTimeString) through useLocalizedDate's
formatDateTime/formatTime so they respect general_date_format +
general_time_format: backup/restore, archives, photo viewer, feedback,
event details, gallery timeline, public quote page, CMS save indicator.
Also pin a lang hint on the business-hours native time inputs (Chrome/Edge
render 24h). Drops now-unused date-fns imports.
This commit is contained in:
@@ -19,10 +19,12 @@ import { Button, Input, Card, Loading } from '../../components/common';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { archiveService } from '../../services/archive.service';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useLocalizedDate } from '../../hooks/useLocalizedDate';
|
||||
// import { useNavigate } from 'react-router-dom';
|
||||
|
||||
export const ArchivesPage: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const { formatTime: fmtTime } = useLocalizedDate();
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [filterType, setFilterType] = useState<string>('all');
|
||||
const [sortBy, setSortBy] = useState<'date' | 'size' | 'name'>('date');
|
||||
@@ -286,7 +288,7 @@ export const ArchivesPage: React.FC = () => {
|
||||
<div>
|
||||
<p>{formatDate(archive.archivedAt, 'MMM d, yyyy') || t('archives.processing')}</p>
|
||||
<p className="text-xs text-neutral-500 dark:text-neutral-400">
|
||||
{formatDate(archive.archivedAt, 'h:mm a')}
|
||||
{archive.archivedAt ? fmtTime(archive.archivedAt) : ''}
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
@@ -15,10 +15,10 @@ import {
|
||||
} from 'lucide-react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { format } from 'date-fns';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { Button, Card, Loading } from '../../components/common';
|
||||
import { useLocalizedDate } from '../../hooks/useLocalizedDate';
|
||||
import { BackupDashboard } from '../../components/admin/BackupDashboard';
|
||||
import { BackupConfiguration } from '../../components/admin/BackupConfiguration';
|
||||
import { BackupHistory } from '../../components/admin/BackupHistory';
|
||||
@@ -33,6 +33,7 @@ export const BackupManagement: React.FC = () => {
|
||||
const [activeTab, setActiveTab] = useState<TabId>('dashboard');
|
||||
const queryClient = useQueryClient();
|
||||
const { t } = useTranslation();
|
||||
const { formatDateTime: fmtDateTime } = useLocalizedDate();
|
||||
|
||||
const tabs = [
|
||||
{ id: 'dashboard' as const, label: t('backup.tabs.dashboard'), icon: HardDrive },
|
||||
@@ -122,7 +123,7 @@ export const BackupManagement: React.FC = () => {
|
||||
<>
|
||||
<CheckCircle className="h-5 w-5 text-green-500" />
|
||||
<span className="text-neutral-700 dark:text-neutral-300">
|
||||
{t('backup.status.lastBackup')}: {format(new Date(backupStatus.lastBackup.created_at), 'PPp')}
|
||||
{t('backup.status.lastBackup')}: {fmtDateTime(backupStatus.lastBackup.created_at)}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
|
||||
@@ -16,7 +16,7 @@ import { useLocalizedDate } from '../../hooks/useLocalizedDate';
|
||||
|
||||
export const CMSPage: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const { formatDateTime: fmtDateTime } = useLocalizedDate();
|
||||
const { formatDateTime: fmtDateTime, formatTime: fmtTime } = useLocalizedDate();
|
||||
const queryClient = useQueryClient();
|
||||
const [selectedPage, setSelectedPage] = useState<string>('impressum');
|
||||
const [editingLang, setEditingLang] = useState<'en' | 'de'>('en');
|
||||
@@ -592,7 +592,7 @@ export const CMSPage: React.FC = () => {
|
||||
{!hasUnsavedChanges && lastSaved && (
|
||||
<div className="flex items-center gap-2 text-green-600">
|
||||
<Clock className="w-4 h-4" />
|
||||
Saved {new Date(lastSaved).toLocaleTimeString()}
|
||||
Saved {fmtTime(new Date(lastSaved))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -244,7 +244,7 @@ export const EventDetailsPage: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
const { t } = useTranslation();
|
||||
const { format } = useLocalizedDate();
|
||||
const { format, formatDateTime: fmtDateTime } = useLocalizedDate();
|
||||
const { flags } = useFeatureFlags();
|
||||
|
||||
// Validate ID parameter
|
||||
@@ -2330,7 +2330,7 @@ export const EventDetailsPage: React.FC = () => {
|
||||
<div>
|
||||
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">{t('events.archivedOn')}</p>
|
||||
<p className="text-sm text-neutral-900 dark:text-neutral-100">
|
||||
{event.archived_at && format(safeParseDate(event.archived_at)!, 'PPp')}
|
||||
{event.archived_at && fmtDateTime(safeParseDate(event.archived_at)!)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -25,13 +25,15 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { eventsService } from '../../services/events.service';
|
||||
import { feedbackService } from '../../services/feedback.service';
|
||||
import type { PhotoFeedback, FeedbackAnalytics, FeedbackResponse } from '../../services/feedback.service';
|
||||
import { useLocalizedDate } from '../../hooks/useLocalizedDate';
|
||||
|
||||
export const EventFeedbackPage: React.FC = () => {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { formatDateTime: fmtDateTime } = useLocalizedDate();
|
||||
|
||||
const [activeTab, setActiveTab] = useState<'settings' | 'feedback' | 'analytics' | 'moderation'>('settings');
|
||||
const [feedbackFilter, setFeedbackFilter] = useState({
|
||||
type: '',
|
||||
@@ -297,7 +299,7 @@ export const EventFeedbackPage: React.FC = () => {
|
||||
const d = typeof item.created_at === 'string'
|
||||
? parseISO(item.created_at)
|
||||
: new Date(item.created_at);
|
||||
return isNaN(d.getTime()) ? t('common.unknownDate', 'Unknown date') : format(d, 'PPpp');
|
||||
return isNaN(d.getTime()) ? t('common.unknownDate', 'Unknown date') : fmtDateTime(d);
|
||||
})()}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -31,7 +31,7 @@ import { formatShortDate } from '../../utils/dateShort';
|
||||
|
||||
export const QuoteResponsePage: React.FC = () => {
|
||||
const { t, i18n } = useTranslation();
|
||||
const { formatDateTime: fmtDateTime } = useLocalizedDate();
|
||||
const { formatDateTime: fmtDateTime, formatTime: fmtTime } = useLocalizedDate();
|
||||
const { token } = useParams<{ token: string }>();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
@@ -309,7 +309,7 @@ export const QuoteResponsePage: React.FC = () => {
|
||||
? Math.max(0, Math.ceil((lockAt.getTime() - Date.now()) / 60000))
|
||||
: 0;
|
||||
return {
|
||||
at: lockAt ? lockAt.toLocaleTimeString() : '',
|
||||
at: lockAt ? fmtTime(lockAt) : '',
|
||||
minutes,
|
||||
};
|
||||
})())
|
||||
|
||||
Reference in New Issue
Block a user