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.
2026-06-02 15:13:55 +02:00
parent 2723b3f29e
commit 2ef837680e
10 changed files with 29 additions and 26 deletions
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import { X, ChevronLeft, ChevronRight, Download, Trash2, Tag, Calendar, HardDrive, Eye, MousePointer, MessageSquare, Star, Heart, CheckCircle, XCircle, AlertCircle } from 'lucide-react';
-import { format } from 'date-fns';
 import { toast } from 'react-toastify';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

@@ -10,6 +9,7 @@ import { feedbackService, type PhotoFeedback, type FeedbackSummary } from '../..
 import { Button } from '../common';
 import { AdminAuthenticatedImage } from './AdminAuthenticatedImage';
 import { AdminAuthenticatedVideo } from './AdminAuthenticatedVideo';
+import { useLocalizedDate } from '../../hooks/useLocalizedDate';

 type AdminFeedbackResponse = {
  feedback: PhotoFeedback[];
@@ -38,6 +38,7 @@ export const AdminPhotoViewer: React.FC<AdminPhotoViewerProps> = ({
  const [showCategoryMenu, setShowCategoryMenu] = useState(false);
  const [expandedComments, setExpandedComments] = useState(false);
  const queryClient = useQueryClient();
+  const { formatDateTime: fmtDateTime } = useLocalizedDate();
  
  const currentPhoto = photos[currentIndex];
  const isVideo = currentPhoto
@@ -312,7 +313,7 @@ export const AdminPhotoViewer: React.FC<AdminPhotoViewerProps> = ({
                Uploaded
              </span>
              <p className="text-white">
-                {format(new Date(currentPhoto.uploaded_at), 'MMM d, yyyy h:mm a')}
+                {fmtDateTime(currentPhoto.uploaded_at)}
              </p>
            </div>

@@ -408,7 +409,7 @@ export const AdminPhotoViewer: React.FC<AdminPhotoViewerProps> = ({
                                  {comment.guest_name || 'Anonymous'}
                                </p>
                                <p className="text-xs text-neutral-400">
-                                  {format(new Date(comment.created_at), 'MMM d, yyyy h:mm a')}
+                                  {fmtDateTime(comment.created_at)}
                                </p>
                              </div>
                              
@@ -8,7 +8,6 @@ import {
  CheckCircle,
  User
 } from 'lucide-react';
-import { parseISO } from 'date-fns';
 import { toast } from 'react-toastify';

 import { Card, Loading, Button } from '../common';
@@ -30,7 +29,7 @@ export const FeedbackModerationPanel: React.FC<FeedbackModerationPanelProps> = (
  maxItems = 5
 }) => {
  const { t } = useTranslation();
-  const { format } = useLocalizedDate();
+  const { formatDateTime } = useLocalizedDate();
  const queryClient = useQueryClient();
  const [showAll, setShowAll] = useState(false);

@@ -116,12 +115,7 @@ export const FeedbackModerationPanel: React.FC<FeedbackModerationPanelProps> = (
                          </span>
                          <span className="text-neutral-500 dark:text-neutral-400">•</span>
                          <span className="text-neutral-500 dark:text-neutral-400">
-                            {format(
-                              typeof item.created_at === 'string' 
-                                ? parseISO(item.created_at) 
-                                : new Date(item.created_at), 
-                              'MMM d, h:mm a'
-                            )}
+                            {formatDateTime(item.created_at)}
                          </span>
                        </div>
                        <p className="mt-1 text-sm text-neutral-700">{item.comment_text || item.comment}</p>
@@ -24,14 +24,15 @@ import {
  AlertCircle,
  ShieldCheck
 } from 'lucide-react';
-import { format } from 'date-fns';
 import { toast } from 'react-toastify';
 import { useQuery, useMutation } from '@tanstack/react-query';
 import { Button, Card, Input, Loading } from '../common';
 import { api } from '../../config/api';
+import { useLocalizedDate } from '../../hooks/useLocalizedDate';

 export const RestoreWizard = ({ onVerifyIntegrity } = {}) => {
  const { t } = useTranslation();
+  const { format: fmtDate, formatTime: fmtTime, formatDateTime: fmtDateTime } = useLocalizedDate();
  const [currentStep, setCurrentStep] = useState(0);
  
  const steps = [
@@ -331,7 +332,7 @@ export const RestoreWizard = ({ onVerifyIntegrity } = {}) => {
                  </div>
                  <div>
                    <p className="font-medium text-neutral-900 dark:text-neutral-100">
-                      {format(new Date(backup.created_at), 'PPP')} {t('backup.restore.backup.at')} {format(new Date(backup.created_at), 'p')}
+                      {fmtDate(backup.created_at)} {t('backup.restore.backup.at')} {fmtTime(backup.created_at)}
                    </p>
                    <p className="text-sm text-neutral-500 dark:text-neutral-400">
                      {t('backup.dashboard.backupType', { type: backup.backup_type })} • {formatBytes(backup.total_size || 0)}
@@ -586,7 +587,7 @@ export const RestoreWizard = ({ onVerifyIntegrity } = {}) => {
              <div className="flex justify-between">
                <dt className="text-neutral-600 dark:text-neutral-400">{t('backup.restore.confirmation.summary.backupDate')}:</dt>
                <dd className="font-medium text-neutral-900 dark:text-neutral-100">
-                  {format(new Date(restoreData.selectedBackup.created_at), 'PPp')}
+                  {fmtDateTime(restoreData.selectedBackup.created_at)}
                </dd>
              </div>
              <div className="flex justify-between">