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

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[];
+}