feat(translations): add French language support and improve localization handling

frontend/src/components/admin/AdminHeader.tsx

@@ -3,7 +3,6 @@ import { useNavigate } from 'react-router-dom';
 import { Menu, User, LogOut, Settings, Bell, Lock, CheckCircle, Trash2, Sun, Moon } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useLocalizedDate } from '../../hooks/useLocalizedDate';
-import { useLocalizedTimeAgo } from '../../hooks/useLocalizedTimeAgo';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { useAdminAuth } from '../../contexts';
@@ -25,8 +24,7 @@ export const AdminHeader: React.FC<AdminHeaderProps> = ({ onMenuClick }) => {
   const { user, logout } = useAdminAuth();
   const { isDark, toggle: toggleDarkMode, forcedMode } = useAdminDarkMode();
   const { t } = useTranslation();
-  const { format } = useLocalizedDate();
-  const { formatTimeAgo } = useLocalizedTimeAgo();
+  const { format, formatDistanceToNow } = useLocalizedDate();
   const [showUserMenu, setShowUserMenu] = useState(false);
   const [showNotifications, setShowNotifications] = useState(false);
   const [showPasswordModal, setShowPasswordModal] = useState(false);
@@ -190,7 +188,7 @@ export const AdminHeader: React.FC<AdminHeaderProps> = ({ onMenuClick }) => {
                                   {notificationsService.formatNotificationMessage(notification)}
                                 </p>
                                 <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">
-                                  {formatTimeAgo(notification.createdAt)}
+                                  {formatDistanceToNow(notification.createdAt, { addSuffix: true })}
                                 </p>
                               </div>
                             </div>

frontend/src/components/admin/BackupDashboard.jsx

@@ -106,7 +106,7 @@ export const BackupDashboard = ({ status, config, onRunBackup, isBackupRunning }
         <div className="flex items-center justify-between mb-4">
           <h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">{t('backup.dashboard.health.title')}</h3>
           <span className={`px-3 py-1 rounded-full text-sm font-medium bg-${healthColors[health.status]}-100 dark:bg-${healthColors[health.status]}-900/40 text-${healthColors[health.status]}-700 dark:text-${healthColors[health.status]}-300`}>
-            {health.status.charAt(0).toUpperCase() + health.status.slice(1)}
+            {t(`backup.dashboard.healthStatus.${health.status}`)}
           </span>
         </div>