более менее сделан фронтенд, ЛК не работает и система оплаты тоже

ospabhost/frontend/src/App.tsx

@@ -1,26 +1,28 @@
+// src/app.tsx
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-import PageTmpl from './components/pagetempl';
-import HomePage from './pages/index';
-import MainPage from './pages/dashboard/mainpage';
-import LogoutPage from './pages/dashboard/logout';
-import LoginPage from './pages/login';
-import RegisterPage from './pages/register';
-import TariffsPage from './pages/tariffs';
-import AboutPage from './pages/about';
-import PrivateRoute from './components/privateroute';
+import Pagetempl from './components/pagetempl';
+import Homepage from './pages/index';
+import Dashboard from './pages/dashboard/mainpage';
+import Loginpage from './pages/login';
+import Registerpage from './pages/register';
+import Tariffspage from './pages/tariffs';
+import Aboutpage from './pages/about';
+import Privateroute from './components/privateroute';
+import { AuthProvider } from './context/authcontext'; // Import AuthProvider
 
 function App() {
   return (
     <Router>
-      <Routes>
-        <Route path="/" element={<PageTmpl><HomePage /></PageTmpl>} />
-        <Route path="/tariffs" element={<PageTmpl><TariffsPage /></PageTmpl>} />
-        <Route path="/about" element={<PageTmpl><AboutPage /></PageTmpl>} />
-        <Route path="/dashboard" element={<PageTmpl><PrivateRoute><MainPage /></PrivateRoute></PageTmpl>} />
-        <Route path="/login" element={<PageTmpl><LoginPage /></PageTmpl>} />
-        <Route path="/register" element={<PageTmpl><RegisterPage /></PageTmpl>} />
-        <Route path="/logout" element={<PageTmpl><LogoutPage /></PageTmpl>} />
-      </Routes>
+      <AuthProvider> {/* Wrap the entire application with AuthProvider */}
+        <Routes>
+          <Route path="/" element={<Pagetempl><Homepage /></Pagetempl>} />
+          <Route path="/tariffs" element={<Pagetempl><Tariffspage /></Pagetempl>} />
+          <Route path="/about" element={<Pagetempl><Aboutpage /></Pagetempl>} />
+          <Route path="/dashboard/*" element={<Pagetempl><Privateroute><Dashboard /></Privateroute></Pagetempl>} />
+          <Route path="/login" element={<Pagetempl><Loginpage /></Pagetempl>} />
+          <Route path="/register" element={<Pagetempl><Registerpage /></Pagetempl>} />
+        </Routes>
+      </AuthProvider>
     </Router>
   );
 }

ospabhost/frontend/src/components/header.tsx

@@ -1,57 +1,46 @@
 import { Link } from 'react-router-dom';
-import { useState, useEffect } from 'react';
+import useAuth from '../context/useAuth';
 
 const Header = () => {
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const { isLoggedIn, logout } = useAuth();
 
-  useEffect(() => {
-    const checkLoginStatus = () => {
-      setIsLoggedIn(localStorage.getItem('isLoggedIn') === 'true');
-    };
-
-    checkLoginStatus();
-    window.addEventListener('storage', checkLoginStatus);
-
-    return () => {
-      window.removeEventListener('storage', checkLoginStatus);
-    };
-  }, []);
+  const handleLogout = () => {
+    logout();
+  };
 
   return (
-    <nav className="bg-white shadow-lg fixed w-full z-10 top-0">
-      <div className="container mx-auto px-6 py-3">
-        <div className="flex justify-between items-center">
-          <div className="text-xl font-bold text-gray-800">
-            <Link to="/" className="font-mono text-2xl">ospab.host</Link>
-          </div>
-          <div className="flex items-center space-x-4">
-            <Link to="/tariffs" className="text-gray-600 hover:text-ospab-primary transition-colors">Тарифы</Link>
-            <Link to="/about" className="text-gray-600 hover:text-ospab-primary transition-colors">О нас</Link>
-            {isLoggedIn ? (
-              <>
-                <Link to="/dashboard" className="text-gray-600 hover:text-ospab-primary transition-colors">Личный кабинет</Link>
-                <Link
-                  to="/logout"
-                  className="px-4 py-2 rounded-full text-white font-bold transition-colors transform hover:scale-105 bg-gray-500 hover:bg-red-500"
-                >
-                  Выйти
-                </Link>
-              </>
-            ) : (
-              <>
-                <Link to="/login" className="text-gray-600 hover:text-ospab-primary transition-colors">Войти</Link>
-                <Link
-                  to="/register"
-                  className="px-4 py-2 rounded-full text-white font-bold transition-colors transform hover:scale-105 bg-ospab-primary hover:bg-ospab-accent"
-                >
-                  Зарегистрироваться
-                </Link>
-              </>
-            )}
-          </div>
+    <header className="fixed top-0 left-0 right-0 z-50 bg-white shadow-md">
+      <div className="container mx-auto px-4 py-4 flex justify-between items-center">
+        <div className="text-xl font-bold text-gray-800">
+          <Link to="/" className="font-mono text-2xl">ospab.host</Link>
+        </div>
+        <div className="flex items-center space-x-4">
+          <Link to="/tariffs" className="text-gray-600 hover:text-ospab-primary transition-colors">Тарифы</Link>
+          <Link to="/about" className="text-gray-600 hover:text-ospab-primary transition-colors">О нас</Link>
+          {isLoggedIn ? (
+            <>
+              <Link to="/dashboard" className="text-gray-600 hover:text-ospab-primary transition-colors">Личный кабинет</Link>
+              <button
+                onClick={handleLogout}
+                className="px-4 py-2 rounded-full text-white font-bold transition-colors transform hover:scale-105 bg-gray-500 hover:bg-red-500"
+              >
+                Выйти
+              </button>
+            </>
+          ) : (
+            <>
+              <Link to="/login" className="text-gray-600 hover:text-ospab-primary transition-colors">Войти</Link>
+              <Link
+                to="/register"
+                className="px-4 py-2 rounded-full text-white font-bold transition-colors transform hover:scale-105 bg-ospab-primary hover:bg-ospab-accent"
+              >
+                Зарегистрироваться
+              </Link>
+            </>
+          )}
         </div>
       </div>
-    </nav>
+    </header>
   );
 };
 

ospabhost/frontend/src/components/privateroute.tsx

@@ -1,13 +1,14 @@
 import { Navigate } from 'react-router-dom';
 import React from 'react';
+import useAuth from '../context/useAuth';
 
 interface PrivateRouteProps {
   children: React.ReactNode;
 }
 
 const PrivateRoute: React.FC<PrivateRouteProps> = ({ children }) => {
-  const isAuthenticated = localStorage.getItem('isLoggedIn') === 'true';
-  return isAuthenticated ? children : <Navigate to="/login" replace />;
+  const { isLoggedIn } = useAuth();
+  return isLoggedIn ? children : <Navigate to="/login" replace />;
 };
 
 export default PrivateRoute;

ospabhost/frontend/src/context/authcontext.tsx

@@ -0,0 +1,49 @@
+// /src/context/authcontext.tsx
+import React, { createContext, useState, useEffect } from 'react';
+import type { ReactNode } from 'react';
+
+interface AuthContextType {
+  isLoggedIn: boolean;
+  login: (token: string) => void;
+  logout: () => void;
+}
+
+// Создаем контекст с начальными значениями
+const AuthContext = createContext<AuthContextType>({
+  isLoggedIn: false,
+  login: () => {},
+  logout: () => {},
+});
+
+interface AuthProviderProps {
+  children: ReactNode;
+}
+
+// Создаем провайдер, который будет управлять состоянием
+export const AuthProvider = ({ children }: AuthProviderProps) => {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  // Проверяем статус входа при загрузке приложения
+  useEffect(() => {
+    const token = localStorage.getItem('access_token');
+    setIsLoggedIn(!!token);
+  }, []);
+
+  const login = (token: string) => {
+    localStorage.setItem('access_token', token);
+    setIsLoggedIn(true);
+  };
+
+  const logout = () => {
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <AuthContext.Provider value={{ isLoggedIn, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export default AuthContext;

ospabhost/frontend/src/context/useAuth.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import AuthContext from './authcontext';
+
+const useAuth = () => useContext(AuthContext);
+
+export default useAuth;

ospabhost/frontend/src/main.tsx

@@ -1,7 +1,7 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
-import App from './App.tsx'
+import App from './app.tsx'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>

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

@@ -0,0 +1,101 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import QRCode from 'react-qr-code';
+
+const Billing = () => {
+  const [amount, setAmount] = useState(0);
+  const [isPaymentGenerated, setIsPaymentGenerated] = useState(false);
+  const [copyStatus, setCopyStatus] = useState('');
+
+  const cardNumber = process.env.REACT_APP_CARD_NUMBER || '';
+  const sbpUrl = process.env.REACT_APP_SBP_QR_URL || '';
+
+  const handleGeneratePayment = () => {
+    if (amount <= 0) {
+      alert('Пожалуйста, введите сумму больше нуля.');
+      return;
+    }
+    if (!cardNumber || !sbpUrl) {
+      alert('Данные для оплаты не настроены. Пожалуйста, обратитесь к администратору.');
+      return;
+    }
+    setIsPaymentGenerated(true);
+  };
+
+  const handleCopyCard = () => {
+    if (cardNumber) {
+      navigator.clipboard.writeText(cardNumber);
+      setCopyStatus('Номер карты скопирован!');
+      setTimeout(() => setCopyStatus(''), 2000);
+    }
+  };
+
+  return (
+    <div className="p-8 bg-white rounded-3xl shadow-xl">
+      <h2 className="text-3xl font-bold text-gray-800 mb-6">Пополнение баланса</h2>
+      
+      {!isPaymentGenerated ? (
+        <div>
+          <p className="text-lg text-gray-500 mb-4">
+            Пополните свой баланс, чтобы оплачивать услуги. Минимальная сумма пополнения: 1 руб.
+          </p>
+          <div className="mb-4">
+            <label htmlFor="amount" className="block text-gray-700 font-medium mb-2">Сумма (₽)</label>
+            <input
+              type="number"
+              id="amount"
+              value={amount}
+              onChange={(e) => setAmount(Number(e.target.value))}
+              className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-ospab-primary"
+              min="1"
+            />
+          </div>
+          <button
+            onClick={handleGeneratePayment}
+            className="w-full px-5 py-3 rounded-full text-white font-bold transition-colors transform hover:scale-105 bg-ospab-primary hover:bg-ospab-accent"
+          >
+            Сгенерировать платеж
+          </button>
+        </div>
+      ) : (
+        <div className="text-center">
+          <p className="text-lg text-gray-700 mb-4">Для пополнения баланса, пожалуйста, переведите сумму **₽{amount}**.</p>
+          <p className="text-sm text-gray-500 mb-6">
+            Ваш заказ будет обработан вручную после проверки чека.
+          </p>
+          
+          <div className="bg-gray-100 p-6 rounded-2xl inline-block mb-6">
+            <h3 className="text-xl font-bold text-gray-800 mb-2">Оплата по СБП</h3>
+            <div className="flex justify-center p-4 bg-white rounded-lg">
+              <QRCode value={sbpUrl} size={256} />
+            </div>
+            <p className="mt-4 text-sm text-gray-600">Отсканируйте QR-код через мобильное приложение вашего банка.</p>
+          </div>
+          
+          <div className="bg-gray-100 p-6 rounded-2xl mb-6">
+            <h3 className="text-xl font-bold text-gray-800 mb-2">Оплата по номеру карты</h3>
+            <p className="text-2xl font-bold text-gray-800 select-all">{cardNumber}</p>
+            <button
+              onClick={handleCopyCard}
+              className="mt-4 px-4 py-2 rounded-full text-white font-bold transition-colors transform hover:scale-105 bg-gray-500 hover:bg-gray-700"
+            >
+              Скопировать номер карты
+            </button>
+            {copyStatus && <p className="mt-2 text-sm text-green-500">{copyStatus}</p>}
+          </div>
+
+          <div className="bg-red-50 p-6 rounded-2xl border-l-4 border-red-500 text-left mb-6">
+            <p className="font-bold text-red-800">Важно:</p>
+            <p className="text-sm text-red-700">После оплаты сделайте скриншот или сохраните чек и отправьте его нам в тикет поддержки, чтобы мы могли подтвердить платёж.</p>
+          </div>
+          
+          <p className="mt-4 text-gray-600">
+            После подтверждения ваш баланс будет пополнен. Вы можете перейти в раздел <Link to="/dashboard/tickets" className="text-ospab-primary font-bold hover:underline">Тикеты</Link>, чтобы отправить нам чек.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Billing;

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

@@ -0,0 +1,10 @@
+const CheckVerification = () => {
+  return (
+    <div className="p-8 bg-white rounded-3xl shadow-xl">
+      <h2 className="text-3xl font-bold text-gray-800 mb-6">Проверка чеков</h2>
+      <p className="text-lg text-gray-500">Здесь будут отображаться чеки для проверки.</p>
+    </div>
+  );
+};
+
+export default CheckVerification;

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

@@ -6,9 +6,8 @@ const LogoutPage = () => {
 
   useEffect(() => {
     // Удаляем все токены и флаг входа из localStorage
-    localStorage.removeItem('access_token');
-    localStorage.removeItem('refresh_token');
-    localStorage.removeItem('isLoggedIn');
+  localStorage.removeItem('access_token');
+  localStorage.removeItem('refresh_token');
     console.log('Выполняется выход из системы...');
     // После выхода перенаправляем пользователя на главную страницу
     navigate('/');

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

@@ -1,26 +1,112 @@
-import { Link } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+import { Routes, Route, Link, useNavigate } from 'react-router-dom';
+import axios from 'axios';
+import AuthContext from '../../context/authcontext';
+import { useContext } from 'react';
+
+// Импортируем компоненты для вкладок
+import Summary from './summary';
+import Servers from './servers';
+import Tickets from './tickets';
+import Billing from './billing';
+import Settings from './settings';
+import CheckVerification from './checkverification.tsx';
+import TicketResponse from './ticketresponse.tsx';
+
+const Dashboard = () => {
+  const [activeTab, setActiveTab] = useState('summary');
+  const [userData, setUserData] = useState<import('./types').UserData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const navigate = useNavigate();
+  const { logout } = useContext(AuthContext);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const token = localStorage.getItem('access_token');
+        if (!token) {
+          logout();
+          navigate('/login');
+          return;
+        }
+
+        const headers = { Authorization: `Bearer ${token}` };
+
+        const userRes = await axios.get('http://localhost:5000/api/auth/me', { headers });
+        
+        // Моделируем остальные данные
+        const serversRes = { data: { servers: [] } }; 
+        const ticketsRes = { data: { tickets: [] } };
+        
+        setUserData({
+          user: userRes.data.user,
+          balance: 1500, // Пример
+          servers: serversRes.data.servers,
+          tickets: ticketsRes.data.tickets,
+        });
+      } catch (err) {
+        console.error('Ошибка загрузки данных:', err);
+        logout();
+        navigate('/login');
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchData();
+  }, [logout, navigate]);
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center pt-20">
+        <h1 className="text-2xl text-gray-800">Загрузка...</h1>
+      </div>
+    );
+  }
+
+  if (!userData || !userData.user) {
+    return null;
+  }
+
+  const isOperator = userData.user.operator === 1;
 
-const MainPage = () => {
   return (
-    <div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center p-4">
-      <div className="bg-white p-10 rounded-3xl shadow-2xl text-center max-w-2xl mx-auto">
-        <h1 className="text-4xl md:text-5xl font-extrabold text-gray-900 leading-tight">
-          Добро пожаловать в личный кабинет!
-        </h1>
-        <p className="mt-4 text-lg text-gray-600">
-          Здесь будет информация о твоих проектах и статистика.
-        </p>
-        <div className="mt-8">
-          <Link
-            to="/logout"
-            className="px-6 py-3 rounded-full text-white font-bold transition-colors transform hover:scale-105 bg-ospab-primary hover:bg-ospab-accent"
-          >
-            Выйти
-          </Link>
-        </div>
+    <div className="flex min-h-screen bg-gray-50 pt-20">
+      <div className="w-64 bg-white shadow-xl p-6 rounded-r-3xl h-full fixed">
+        <nav className="mt-8">
+          <Link to="/dashboard" onClick={() => setActiveTab('summary')} className={`block py-3 px-4 rounded-xl font-semibold transition-colors duration-200 ${activeTab === 'summary' ? 'bg-ospab-primary text-white' : 'text-gray-600 hover:bg-gray-100'}`}>Сводка</Link>
+          <Link to="/dashboard/servers" onClick={() => setActiveTab('servers')} className={`block py-3 px-4 rounded-xl font-semibold transition-colors duration-200 mt-2 ${activeTab === 'servers' ? 'bg-ospab-primary text-white' : 'text-gray-600 hover:bg-gray-100'}`}>Серверы</Link>
+          <Link to="/dashboard/tickets" onClick={() => setActiveTab('tickets')} className={`block py-3 px-4 rounded-xl font-semibold transition-colors duration-200 mt-2 ${activeTab === 'tickets' ? 'bg-ospab-primary text-white' : 'text-gray-600 hover:bg-gray-100'}`}>Тикеты</Link>
+          <Link to="/dashboard/billing" onClick={() => setActiveTab('billing')} className={`block py-3 px-4 rounded-xl font-semibold transition-colors duration-200 mt-2 ${activeTab === 'billing' ? 'bg-ospab-primary text-white' : 'text-gray-600 hover:bg-gray-100'}`}>Баланс</Link>
+          <Link to="/dashboard/settings" onClick={() => setActiveTab('settings')} className={`block py-3 px-4 rounded-xl font-semibold transition-colors duration-200 mt-2 ${activeTab === 'settings' ? 'bg-ospab-primary text-white' : 'text-gray-600 hover:bg-gray-100'}`}>Настройки</Link>
+          
+          {isOperator && (
+            <>
+              <div className="border-t border-gray-200 my-4"></div>
+              <Link to="/dashboard/checkverification" onClick={() => setActiveTab('checkverification')} className={`block py-3 px-4 rounded-xl font-semibold transition-colors duration-200 mt-2 ${activeTab === 'checkverification' ? 'bg-ospab-primary text-white' : 'text-gray-600 hover:bg-gray-100'}`}>Проверка чеков</Link>
+              <Link to="/dashboard/ticketresponse" onClick={() => setActiveTab('ticketresponse')} className={`block py-3 px-4 rounded-xl font-semibold transition-colors duration-200 mt-2 ${activeTab === 'ticketresponse' ? 'bg-ospab-primary text-white' : 'text-gray-600 hover:bg-gray-100'}`}>Ответы на тикеты</Link>
+            </>
+          )}
+        </nav>
+      </div>
+
+      <div className="flex-1 ml-64 p-8">
+        <Routes>
+          <Route path="/" element={<Summary userData={userData} />} />
+          <Route path="servers" element={<Servers servers={userData.servers} />} />
+          <Route path="tickets" element={<Tickets tickets={userData.tickets} />} />
+          <Route path="billing" element={<Billing />} />
+          <Route path="settings" element={<Settings />} />
+          
+          {isOperator && (
+            <>
+              <Route path="checkverification" element={<CheckVerification />} />
+              <Route path="ticketresponse" element={<TicketResponse />} />
+            </>
+          )}
+        </Routes>
       </div>
     </div>
   );
 };
 
-export default MainPage;
+export default Dashboard;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+
+interface ServersProps {
+  servers: unknown[];
+}
+
+const Servers: React.FC<ServersProps> = ({ servers }) => {
+  return (
+    <div className="p-8 bg-white rounded-3xl shadow-xl">
+      <h2 className="text-3xl font-bold text-gray-800 mb-6">Серверы</h2>
+      {servers.length === 0 ? (
+        <p className="text-lg text-gray-500">У вас пока нет активных серверов.</p>
+      ) : (
+        <p className="text-lg text-gray-500">Список ваших серверов будет здесь...</p>
+      )}
+    </div>
+  );
+};
+
+export default Servers;

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

@@ -0,0 +1,12 @@
+const Settings = () => {
+  return (
+    <div className="p-8 bg-white rounded-3xl shadow-xl">
+      <h2 className="text-3xl font-bold text-gray-800 mb-6">Настройки аккаунта</h2>
+      <p className="text-lg text-gray-500">
+        Здесь вы сможете изменить свои личные данные, email и пароль.
+      </p>
+    </div>
+  );
+};
+
+export default Settings;

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

@@ -0,0 +1,37 @@
+import { Link } from 'react-router-dom';
+
+import type { UserData } from './types';
+
+interface SummaryProps {
+  userData: UserData;
+}
+
+const Summary = ({ userData }: SummaryProps) => {
+  return (
+    <div className="p-8 bg-white rounded-3xl shadow-xl">
+      <h2 className="text-3xl font-bold text-gray-800 mb-6">Сводка по аккаунту</h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+        <div className="bg-gray-100 p-6 rounded-2xl flex flex-col items-start">
+          <p className="text-xl font-medium text-gray-700">Баланс:</p>
+          <p className="text-4xl font-extrabold text-ospab-primary mt-2">₽ {userData.balance.toFixed(2)}</p>
+          <Link to="/dashboard/billing" className="text-sm text-gray-500 hover:underline mt-2">Пополнить баланс →</Link>
+        </div>
+        <div className="bg-gray-100 p-6 rounded-2xl flex flex-col items-start">
+          <p className="text-xl font-medium text-gray-700">Активные серверы:</p>
+          <p className="text-4xl font-extrabold text-gray-800 mt-2">{userData.servers.length}</p>
+          <Link to="/dashboard/servers" className="text-sm text-gray-500 hover:underline mt-2">Управлять →</Link>
+        </div>
+        <div className="bg-gray-100 p-6 rounded-2xl flex flex-col items-start">
+          <p className="text-xl font-medium text-gray-700">Открытые тикеты:</p>
+          <p className="text-4xl font-extrabold text-gray-800 mt-2">{userData.tickets.length}</p>
+          <Link to="/dashboard/tickets" className="text-sm text-gray-500 hover:underline mt-2">Служба поддержки →</Link>
+        </div>
+      </div>
+      <p className="text-lg text-gray-500">
+        Добро пожаловать в ваш личный кабинет, {userData.user?.username || 'пользователь'}! Здесь вы можете быстро получить доступ к основным разделам.
+      </p>
+    </div>
+  );
+};
+
+export default Summary;

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

@@ -0,0 +1,10 @@
+const TicketResponse = () => {
+  return (
+    <div className="p-8 bg-white rounded-3xl shadow-xl">
+      <h2 className="text-3xl font-bold text-gray-800 mb-6">Ответы на тикеты</h2>
+      <p className="text-lg text-gray-500">Здесь будут отображаться тикеты для ответов.</p>
+    </div>
+  );
+};
+
+export default TicketResponse;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+
+interface TicketsProps {
+  tickets: unknown[];
+}
+
+const Tickets: React.FC<TicketsProps> = ({ tickets }) => {
+  return (
+    <div className="p-8 bg-white rounded-3xl shadow-xl">
+      <h2 className="text-3xl font-bold text-gray-800 mb-6">Тикеты поддержки</h2>
+      {tickets.length === 0 ? (
+        <p className="text-lg text-gray-500">У вас пока нет открытых тикетов.</p>
+      ) : (
+        <p className="text-lg text-gray-500">Список ваших тикетов будет здесь...</p>
+      )}
+    </div>
+  );
+};
+
+export default Tickets;

ospabhost/frontend/src/pages/dashboard/types.ts

@@ -0,0 +1,11 @@
+export interface User {
+  username: string;
+  operator: number;
+}
+
+export interface UserData {
+  user: User;
+  balance: number;
+  servers: unknown[];
+  tickets: unknown[];
+}

ospabhost/frontend/src/pages/login.tsx

@@ -1,33 +1,34 @@
 import { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import axios from 'axios';
+import useAuth from '../context/useAuth';
 
 const LoginPage = () => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
   const navigate = useNavigate();
+  const { login } = useAuth();
 
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
+    setError('');
+    
     try {
       const response = await axios.post('http://localhost:5000/api/auth/login', {
         email: email,
         password: password,
       });
-      // Сохраняем токен в localStorage
-      localStorage.setItem('access_token', response.data.token);
-      localStorage.setItem('isLoggedIn', 'true');
-      console.log('Успешный вход:', response.data);
-      navigate('/dashboard'); // Перенаправляем на личный кабинет
-    } catch (error) {
-      let errMsg = 'Ошибка входа. Проверьте правильность email и пароля.';
-      if (axios.isAxiosError(error)) {
-        errMsg = error.response?.data?.message || errMsg;
-        console.error('Ошибка входа:', error.response?.data || error.message);
+      
+      login(response.data.token);
+      navigate('/dashboard/mainpage');
+      
+    } catch (err) {
+      if (axios.isAxiosError(err) && err.response) {
+        setError(err.response.data.message || 'Неизвестная ошибка входа.');
       } else {
-        console.error('Ошибка входа:', error);
+        setError('Произошла ошибка сети. Пожалуйста, попробуйте позже.');
       }
-      alert(errMsg);
     }
   };
 
@@ -57,6 +58,9 @@ const LoginPage = () => {
             Войти
           </button>
         </form>
+        {error && (
+          <p className="mt-4 text-sm text-red-500">{error}</p>
+        )}
         <p className="mt-6 text-gray-600">
           Нет аккаунта?{' '}
           <Link to="/register" className="text-ospab-primary font-bold hover:underline">

ospabhost/frontend/src/pages/register.tsx

@@ -6,27 +6,30 @@ const RegisterPage = () => {
   const [username, setUsername] = useState('');
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
   const navigate = useNavigate();
 
   const handleRegister = async (e: React.FormEvent) => {
     e.preventDefault();
+    setError(''); // Очищаем предыдущие ошибки
+    
     try {
-      const response = await axios.post('http://localhost:5000/api/auth/register', {
+      await axios.post('http://localhost:5000/api/auth/register', {
         username: username,
         email: email,
         password: password
       });
-      console.log('Успешная регистрация:', response.data);
-      navigate('/login'); // Перенаправляем пользователя на страницу входа
-    } catch (error) {
-      let errMsg = 'Ошибка регистрации. Пожалуйста, попробуйте снова.';
-      if (axios.isAxiosError(error)) {
-        errMsg = error.response?.data?.message || errMsg;
-        console.error('Ошибка регистрации:', error.response?.data || error.message);
+      
+      alert('Регистрация прошла успешно! Теперь вы можете войти.');
+      navigate('/login');
+      
+    } catch (err) {
+      if (axios.isAxiosError(err) && err.response) {
+        const errorMsg = err.response.data.message || 'Неизвестная ошибка регистрации.';
+        setError(errorMsg);
       } else {
-        console.error('Ошибка регистрации:', error);
+        setError('Произошла ошибка сети. Пожалуйста, попробуйте позже.');
       }
-      alert(errMsg);
     }
   };
 
@@ -63,6 +66,9 @@ const RegisterPage = () => {
             Зарегистрироваться
           </button>
         </form>
+        {error && (
+          <p className="mt-4 text-sm text-red-500">{error}</p>
+        )}
         <p className="mt-6 text-gray-600">
           Уже есть аккаунт?{' '}
           <Link to="/login" className="text-ospab-primary font-bold hover:underline">