english version update

ospabhost/frontend/src/pages/dashboard/notifications.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback } from 'react';
 import { Link } from 'react-router-dom';
+import { useTranslation } from '../../i18n';
 import {
   getNotifications,
   markAsRead,
@@ -16,6 +17,8 @@ const NotificationsPage = () => {
   const [filter, setFilter] = useState<'all' | 'unread'>('all');
   const [pushEnabled, setPushEnabled] = useState(false);
   const [pushPermission, setPushPermission] = useState<NotificationPermission>('default');
+  const { locale } = useTranslation();
+  const isEn = locale === 'en';
 
   const checkPushPermission = () => {
     if ('Notification' in window) {
@@ -83,7 +86,7 @@ const NotificationsPage = () => {
   };
 
   const handleDeleteAllRead = async () => {
-    if (!window.confirm('Удалить все прочитанные уведомления?')) return;
+    if (!window.confirm(isEn ? 'Delete all read notifications?' : 'Удалить все прочитанные уведомления?')) return;
     
     try {
       await deleteAllRead();
@@ -98,9 +101,9 @@ const NotificationsPage = () => {
     if (success) {
       setPushEnabled(true);
       setPushPermission('granted');
-      alert('Push-уведомления успешно подключены!');
+      alert(isEn ? 'Push notifications enabled!' : 'Push-уведомления успешно подключены!');
     } else {
-      alert('Не удалось подключить Push-уведомления. Проверьте разрешения браузера.');
+      alert(isEn ? 'Failed to enable push notifications. Check your browser permissions.' : 'Не удалось подключить Push-уведомления. Проверьте разрешения браузера.');
       // Обновляем состояние на случай, если пользователь отклонил
       checkPushPermission();
     }
@@ -108,7 +111,7 @@ const NotificationsPage = () => {
 
   const formatDate = (dateString: string) => {
     const date = new Date(dateString);
-    return date.toLocaleString('ru-RU', {
+    return date.toLocaleString(isEn ? 'en-US' : 'ru-RU', {
       day: 'numeric',
       month: 'long',
       year: 'numeric',
@@ -125,11 +128,16 @@ const NotificationsPage = () => {
     const weekAgo = new Date(today);
     weekAgo.setDate(weekAgo.getDate() - 7);
 
+    const todayLabel = isEn ? 'Today' : 'Сегодня';
+    const yesterdayLabel = isEn ? 'Yesterday' : 'Вчера';
+    const weekLabel = isEn ? 'Last 7 days' : 'За последние 7 дней';
+    const earlierLabel = isEn ? 'Earlier' : 'Ранее';
+
     const groups: Record<string, Notification[]> = {
-      'Сегодня': [],
-      'Вчера': [],
-      'За последние 7 дней': [],
-      'Ранее': []
+      [todayLabel]: [],
+      [yesterdayLabel]: [],
+      [weekLabel]: [],
+      [earlierLabel]: []
     };
 
     notifications.forEach((notification) => {
@@ -137,13 +145,13 @@ const NotificationsPage = () => {
       const notifDay = new Date(notifDate.getFullYear(), notifDate.getMonth(), notifDate.getDate());
 
       if (notifDay.getTime() === today.getTime()) {
-        groups['Сегодня'].push(notification);
+        groups[todayLabel].push(notification);
       } else if (notifDay.getTime() === yesterday.getTime()) {
-        groups['Вчера'].push(notification);
+        groups[yesterdayLabel].push(notification);
       } else if (notifDate >= weekAgo) {
-        groups['За последние 7 дней'].push(notification);
+        groups[weekLabel].push(notification);
       } else {
-        groups['Ранее'].push(notification);
+        groups[earlierLabel].push(notification);
       }
     });
 
@@ -156,7 +164,7 @@ const NotificationsPage = () => {
   return (
     <div className="p-4 lg:p-8">
       <div className="max-w-4xl mx-auto">
-        <h1 className="text-3xl font-bold text-gray-900 mb-6">Уведомления</h1>
+        <h1 className="text-3xl font-bold text-gray-900 mb-6">{isEn ? 'Notifications' : 'Уведомления'}</h1>
 
         {/* Панель действий */}
         <div className="bg-white rounded-lg shadow-sm p-4 mb-6">
@@ -171,7 +179,7 @@ const NotificationsPage = () => {
                     : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                 }`}
               >
-                Все ({notifications.length})
+                {isEn ? 'All' : 'Все'} ({notifications.length})
               </button>
               <button
                 onClick={() => setFilter('unread')}
@@ -181,7 +189,7 @@ const NotificationsPage = () => {
                     : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                 }`}
               >
-                Непрочитанные ({unreadCount})
+                {isEn ? 'Unread' : 'Непрочитанные'} ({unreadCount})
               </button>
             </div>
 
@@ -192,7 +200,7 @@ const NotificationsPage = () => {
                   onClick={handleMarkAllAsRead}
                   className="px-4 py-2 rounded-md text-sm font-medium bg-blue-100 text-blue-700 hover:bg-blue-200 transition-colors"
                 >
-                  Прочитать все
+                  {isEn ? 'Mark all as read' : 'Прочитать все'}
                 </button>
               )}
               {notifications.some((n) => n.isRead) && (
@@ -200,7 +208,7 @@ const NotificationsPage = () => {
                   onClick={handleDeleteAllRead}
                   className="px-4 py-2 rounded-md text-sm font-medium bg-red-100 text-red-700 hover:bg-red-200 transition-colors"
                 >
-                  Удалить прочитанные
+                  {isEn ? 'Delete read' : 'Удалить прочитанные'}
                 </button>
               )}
             </div>
@@ -214,16 +222,16 @@ const NotificationsPage = () => {
               </svg>
               <div className="flex-1">
                 <h3 className="text-sm font-semibold text-blue-900 mb-1">
-                  Подключите Push-уведомления
+                  {isEn ? 'Enable Push Notifications' : 'Подключите Push-уведомления'}
                 </h3>
                 <p className="text-sm text-blue-700 mb-3">
-                  Получайте мгновенные уведомления на компьютер или телефон при важных событиях
+                  {isEn ? 'Get instant notifications on your device for important events' : 'Получайте мгновенные уведомления на компьютер или телефон при важных событиях'}
                 </p>
                 <button
                   onClick={handleEnablePush}
                   className="px-4 py-2 rounded-md text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 transition-colors"
                 >
-                  Включить уведомления
+                  {isEn ? 'Enable notifications' : 'Включить уведомления'}
                 </button>
               </div>
             </div>
@@ -240,11 +248,13 @@ const NotificationsPage = () => {
                   Push-уведомления заблокированы
                 </h3>
                 <p className="text-sm text-red-700">
-                  Вы заблокировали уведомления для этого сайта. Чтобы включить их, разрешите уведомления в настройках браузера.
+                  {isEn ? 'You have blocked notifications for this site. To enable them, allow notifications in your browser settings.' : 'Вы заблокировали уведомления для этого сайта. Чтобы включить их, разрешите уведомления в настройках браузера.'}
                 </p>
                 <p className="text-xs text-red-600 mt-2">
-                  Chrome/Edge: Нажмите на иконку замка слева от адресной строки → Уведомления → Разрешить<br/>
-                  Firefox: Настройки → Приватность и защита → Разрешения → Уведомления → Настройки
+                  {isEn 
+                    ? <>Chrome/Edge: Click the lock icon to the left of the address bar → Notifications → Allow<br/>Firefox: Settings → Privacy & Security → Permissions → Notifications → Settings</>
+                    : <>Chrome/Edge: Нажмите на иконку замка слева от адресной строки → Уведомления → Разрешить<br/>Firefox: Настройки → Приватность и защита → Разрешения → Уведомления → Настройки</>
+                  }
                 </p>
               </div>
             </div>
@@ -261,9 +271,11 @@ const NotificationsPage = () => {
             <svg className="mx-auto h-16 w-16 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
             </svg>
-            <h3 className="text-lg font-medium text-gray-900 mb-2">Нет уведомлений</h3>
+            <h3 className="text-lg font-medium text-gray-900 mb-2">{isEn ? 'No notifications' : 'Нет уведомлений'}</h3>
             <p className="text-gray-600">
-              {filter === 'unread' ? 'Все уведомления прочитаны' : 'У вас пока нет уведомлений'}
+              {filter === 'unread' 
+                ? (isEn ? 'All notifications are read' : 'Все уведомления прочитаны') 
+                : (isEn ? 'You have no notifications yet' : 'У вас пока нет уведомлений')}
             </p>
           </div>
         ) : (