Добавил асинхронные функции и типыдля для дэшборда, slice, обновил store

front/src/App.css

@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

front/src/app/hooks.ts

@@ -2,5 +2,5 @@ import { useDispatch, useSelector } from 'react-redux';
 import type {TypedUseSelectorHook} from 'react-redux';
 import type { RootState, AppDispatch } from './store';
 
-export const useAppDispatch: () => AppDispatch = useDispatch;
+export const useAppDispatch = () => useDispatch<AppDispatch>();
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

front/src/app/routes.tsx

@@ -8,7 +8,7 @@ import { Route } from "react-router";
 function AppRoutes() {
   return (  
     <Routes>
-      {/*<Route path="/login" element={<LoginPage />} />*/}
+      <Route path="/login" element={<LoginPage />} />
       <Route path="/" element={<Layout />}>
         <Route index element={<DashboardPage />} />
         <Route path="history" element={<HistoryPage />} />

front/src/app/store.ts

@@ -1,10 +1,18 @@
 import { configureStore } from "@reduxjs/toolkit";
 import authReducer from "../features/auth/authSlice";
+import dashboardReducer from '../features/dashboard/dashboardSlice'
 
 export const store = configureStore({
   reducer: {
     auth: authReducer,
+  dashboard: dashboardReducer,
   },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: {
+        ignoredActions: ['persist/PERSIST'],
+      },
+    }),
 });
 
 export type RootState = ReturnType<typeof store.getState>;

front/src/features/auth/authSlice.ts

@@ -1,5 +1,4 @@
 import { createSlice } from "@reduxjs/toolkit";
-import type {PayloadAction} from "@reduxjs/toolkit";
 import { loginThunk } from "./authThunks";
 
 interface AuthState {
@@ -22,7 +21,10 @@ const authSlice = createSlice({
       state.token = null;
       state.error = null;
       localStorage.removeItem("token");
-    }
+    },
+    clearError: (state) => {
+      state.error = null;
+    },
   },
   extraReducers: builder => {
     builder
@@ -34,6 +36,7 @@ const authSlice = createSlice({
         state.loading = false;
         state.token = action.payload.token;
         state.error = null;
+        localStorage.setItem('token', action.payload.token);
       })
       .addCase(loginThunk.rejected, (state, action) => {
         state.loading = false;
@@ -42,5 +45,5 @@ const authSlice = createSlice({
   }
 });
 
-export const { logout } = authSlice.actions;
+export const { logout, clearError } = authSlice.actions;
 export default authSlice.reducer;

front/src/features/dashboard/dashboardSlice.ts

@@ -0,0 +1,76 @@
+import { createSlice} from '@reduxjs/toolkit';
+import type { DashboardState, Robot, ScanRecord, Statistics, AIPrediction } from '../../model/types/dashboardTypes';
+import type { PayloadAction } from '@reduxjs/toolkit';
+import { fetchDashboardData } from './dashboardThunks';
+import { fetchAIPredictions } from './dashboardThunks';
+
+const initialState: DashboardState = {
+  robots: [],
+  recentScans: [],
+  statistics: null,
+  aiPredictions: [],
+  isWebSocketConnected: false,
+  isScanAutoUpdate: true,
+  isLoading: false,
+};
+
+const dashboardSlice = createSlice({
+  name: 'dashboard',
+  initialState,
+  reducers: {
+    setWebSocketConnection: (state, action: PayloadAction<boolean>) => {
+      state.isWebSocketConnected = action.payload;
+    },
+    updateRobotData: (state, action: PayloadAction<Robot>) => {
+      const index = state.robots.findIndex(r => r.id === action.payload.id);
+      if (index >= 0) {
+        state.robots[index] = action.payload;
+      } else {
+        state.robots.push(action.payload);
+      }
+    },
+    addScanRecord: (state, action: PayloadAction<ScanRecord>) => {
+      if (state.isScanAutoUpdate) {
+        state.recentScans.unshift(action.payload);
+        // Ограничиваем количество записей
+        if (state.recentScans.length > 20) {
+          state.recentScans = state.recentScans.slice(0, 20);
+        }
+      }
+    },
+    toggleScanAutoUpdate: (state) => {
+      state.isScanAutoUpdate = !state.isScanAutoUpdate;
+    },
+    updateStatistics: (state, action: PayloadAction<Statistics>) => {
+      state.statistics = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchDashboardData.pending, (state) => {
+        state.isLoading = true;
+      })
+      .addCase(fetchDashboardData.fulfilled, (state, action) => {
+        state.isLoading = false;
+        state.robots = action.payload.robots;
+        state.recentScans = action.payload.recent_scans;
+        state.statistics = action.payload.statistics;
+      })
+      .addCase(fetchDashboardData.rejected, (state) => {
+        state.isLoading = false;
+      })
+      .addCase(fetchAIPredictions.fulfilled, (state, action) => {
+        state.aiPredictions = action.payload.predictions;
+      });
+  },
+});
+
+export const {
+  setWebSocketConnection,
+  updateRobotData,
+  addScanRecord,
+  toggleScanAutoUpdate,
+  updateStatistics,
+} = dashboardSlice.actions;
+
+export default dashboardSlice.reducer;

front/src/features/dashboard/dashboardThunks.ts

@@ -0,0 +1,51 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+
+// Получение текущего состояния дашборда
+export const fetchDashboardData = createAsyncThunk(
+  'dashboard/fetchData',
+  async (_, { rejectWithValue }) => {
+    try {
+      const response = await fetch('/api/dashboard/current', {
+        headers: {
+          'Authorization': `Bearer ${localStorage.getItem('token')}`,
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error('Ошибка загрузки данных');
+      }
+
+      return await response.json();
+    } catch (error: any) {
+      return rejectWithValue(error.message);
+    }
+  }
+);
+
+// Получение прогнозов от ИИ
+export const fetchAIPredictions = createAsyncThunk(
+  'dashboard/fetchPredictions',
+  async (_, { rejectWithValue }) => {
+    try {
+      const response = await fetch('/api/ai/predict', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${localStorage.getItem('token')}`,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          period_days: 7,
+          categories: [],
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Ошибка получения прогнозов');
+      }
+
+      return await response.json();
+    } catch (error: any) {
+      return rejectWithValue(error.message);
+    }
+  }
+);

front/src/fonts/fonts.css

@@ -0,0 +1,31 @@
+@font-face {
+  font-family: 'YourFont';
+  src: url('./RostelecomBasis-Regular.otf') format('opentype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'YourFont';
+  src: url('./RostelecomBasis-Bold.otf') format('opentype');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'YourFont';
+  src: url('./RostelecomBasis-Light.otf') format('opentype');
+  font-weight: lighter;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'YourFont';
+  src: url('./RostelecomBasis-Medium.otf') format('opentype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}

front/src/index.css

@@ -1,5 +1,5 @@
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: 'YourFont', sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
@@ -11,31 +11,37 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  --purple: #7700ff;
+  --black: #101828;
+  --orange: #ff4f12;
+  --light-blue: #749FD6;
+  --lavander: #E8D2ED;
 }
 
-a {
+#root {
-  font-weight: 500;
+  
-  color: #646cff;
+  margin: 0 auto;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
 }
 
 body {
   margin: 0;
-  display: flex;
+  /*display: flex;
-  place-items: center;
+  place-items: center;*/
   min-width: 320px;
   min-height: 100vh;
+  
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: linear-gradient(135deg, #7700ff 0%, #ff4f12 100%);;
+
 }
 
-h1 {
+p{
-  font-size: 3.2em;
+  margin: 0;
-  line-height: 1.1;
 }
 
-button {
+/*button {
   border-radius: 8px;
   border: 1px solid transparent;
   padding: 0.6em 1.2em;
@@ -52,9 +58,9 @@ button:hover {
 button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
-}
+}*/
 
-@media (prefers-color-scheme: light) {
+/*@media (prefers-color-scheme: light) {
   :root {
     color: #213547;
     background-color: #ffffff;
@@ -65,4 +71,22 @@ button:focus-visible {
   button {
     background-color: #f9f9f9;
   }
+}*/
+
+button {
+  font-family: inherit;
+}
+
+input {
+  font-family: inherit;
+}
+
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
 }

front/src/main.tsx

@@ -1,11 +1,11 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
-import App from './App.tsx'
 import { BrowserRouter } from 'react-router'
 import AppRoutes from './app/routes.tsx'
 import { Provider } from 'react-redux'
 import { store } from './app/store.ts'
+import './fonts/fonts.css'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>

front/src/model/types/dashboardTypes.ts

@@ -0,0 +1,46 @@
+export interface Robot {
+  id: string;
+  name: string;
+  batteryLevel: number;
+  status: 'active' | 'low_battery' | 'offline';
+  location: string;
+  lastUpdate: string;
+}
+
+export interface ScanRecord {
+  id: string;
+  timestamp: string;
+  robotId: string;
+  zone: string;
+  productName: string;
+  productSku: string;
+  quantity: number;
+  status: 'ok' | 'low_stock' | 'critical';
+}
+
+export interface Statistics {
+  activeRobots: number;
+  totalRobots: number;
+  scannedToday: number;
+  criticalItems: number;
+  averageBattery: number;
+}
+
+export interface AIPrediction {
+  id: string;
+  productName: string;
+  currentStock: number;
+  predictedDepletionDate: string;
+  recommendedOrder: number;
+  confidence: number;
+}
+
+export interface DashboardState {
+  robots: Robot[];
+  recentScans: ScanRecord[];
+  statistics: Statistics | null;
+  aiPredictions: AIPrediction[];
+  isWebSocketConnected: boolean;
+  isScanAutoUpdate: boolean;
+  isLoading: boolean;
+}

front/src/pages/Layout/Layout.css

@@ -0,0 +1,4 @@
+.content{
+    background-color: white;
+    margin: 0;
+}

front/src/pages/Layout/Layout.tsx

@@ -1,16 +1,24 @@
 import Header from "../../widgets/Header/Header";
 import { Outlet } from "react-router";
+import { useAppSelector } from '../../app/hooks';
+import type { RootState } from "../../app/store";
+import { Navigate } from "react-router";
+import './Layout.css'
 
 const Layout = () =>{
+
+    const { token } = useAppSelector((state: RootState) => state.auth)
+
     return(
-        <div className="dashboard">
+        /*token ?*/ <div className="dashboard">
             <div className="content-wrapper">
                 <Header />
                 <main className="content">
                     <Outlet />
                 </main>
             </div>
-        </div> 
+        </div> /*: <Navigate to="/login" replace />*/
+
     );
 };
 

front/src/pages/LoginPage/LoginPage.css

@@ -0,0 +1,289 @@
+.login-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.login-logo {
+  margin-bottom: 40px;
+  text-align: center;
+}
+
+.login-logo-image {
+  max-width: 200px;
+  max-height: 80px;
+}
+
+.login-form-card {
+  width: 100%;
+  max-width: 400px;
+  background: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0 12px 40px rgba(16, 24, 40, 0.15);
+  padding: 40px;
+  border: 1px solid rgba(16, 24, 40, 0.1);
+}
+
+.login-title {
+  text-align: center;
+  margin-bottom: 32px;
+  color: #101828;
+  font-weight: 700;
+  font-size: 28px;
+  line-height: 1.2;
+}
+
+.login-error-alert {
+  background: #fff2f0;
+  border: 1px solid #ffccc7;
+  color: #a8071a;
+  padding: 14px 16px;
+  border-radius: 10px;
+  margin-bottom: 24px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.login-error-alert:before {
+  content: '⚠️';
+  font-size: 16px;
+}
+
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-label {
+  font-weight: 600;
+  color: #101828;
+  font-size: 14px;
+  letter-spacing: -0.2px;
+}
+
+.form-input {
+  padding: 14px 16px;
+  border: 2px solid #e4e7ec;
+  border-radius: 10px;
+  font-size: 16px;
+  transition: all 0.3s ease;
+  background: #ffffff;
+  color: #101828;
+}
+
+.form-input::placeholder {
+  color: #98a2b3;
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: #7700ff;
+  box-shadow: 0 0 0 4px rgba(119, 0, 255, 0.1);
+}
+
+.form-input.error {
+  border-color: #ff4f12;
+  box-shadow: 0 0 0 4px rgba(255, 79, 18, 0.1);
+}
+
+.form-error {
+  color: #ff4f12;
+  font-size: 13px;
+  margin-top: 6px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.form-error:before {
+  content: '•';
+  font-size: 16px;
+}
+
+.checkbox-group {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+  padding: 8px 0;
+}
+
+.checkbox-input {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  border: 2px solid #d0d5dd;
+  border-radius: 6px;
+  background: #ffffff;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.checkbox-input:checked {
+  background: #7700ff;
+  border-color: #7700ff;
+}
+
+.checkbox-input:checked:after {
+  content: '✓';
+  position: absolute;
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: bold;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.checkbox-input:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(119, 0, 255, 0.1);
+}
+
+.checkbox-label {
+  font-size: 14px;
+  color: #101828;
+  cursor: pointer;
+  font-weight: 500;
+  user-select: none;
+}
+
+.login-submit-button {
+  background: linear-gradient(135deg, #7700ff 0%, #ff4f12 100%);
+  color: #ffffff;
+  border: none;
+  padding: 16px;
+  border-radius: 12px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-top: 16px;
+  letter-spacing: -0.2px;
+  position: relative;
+  overflow: hidden;
+}
+
+.login-submit-button:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(119, 0, 255, 0.3);
+}
+
+.login-submit-button:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.login-submit-button:disabled {
+  background: #d0d5dd;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+.login-submit-button.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+.spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid transparent;
+  border-top: 2px solid #ffffff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.login-forgot-password {
+  text-align: center;
+  margin-top: 24px;
+  padding-top: 16px;
+  border-top: 1px solid #eaecf0;
+}
+
+.forgot-password-link {
+  color: #7700ff;
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 600;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 8px 16px;
+  border-radius: 8px;
+}
+
+.forgot-password-link:hover {
+  color: #ff4f12;
+  background: rgba(119, 0, 255, 0.05);
+  text-decoration: none;
+}
+
+.forgot-password-link:disabled {
+  color: #98a2b3;
+  cursor: not-allowed;
+  background: none;
+}
+
+/* Анимация появления формы */
+.login-form-card {
+  animation: slideUp 0.6s ease-out;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Адаптивность */
+@media (max-width: 480px) {
+  .login-form-card {
+    padding: 32px 24px;
+    margin: 0 16px;
+  }
+  
+  .login-logo {
+    margin-bottom: 32px;
+  }
+  
+  .login-logo-image {
+    max-width: 160px;
+    max-height: 60px;
+  }
+  
+  .login-title {
+    font-size: 24px;
+    margin-bottom: 28px;
+  }
+  
+  .form-input {
+    padding: 12px 14px;
+  }
+}

front/src/pages/LoginPage/LoginPage.tsx

@@ -1,9 +1,272 @@
-const LoginPage = () =>{
+import React, { useEffect, useState } from 'react';
-    return(
+import { useNavigate } from 'react-router-dom';
-        <>
+import { Form, Input, Button, Checkbox, Alert, Card, Spin, Image } from 'antd';
+import { UserOutlined, LockOutlined } from '@ant-design/icons';
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
+import { loginThunk } from "../../features/auth/authThunks";
+import { clearError } from '../../features/auth/authSlice';
+import './LoginPage.css'
 
-        </>
+interface FormData {
-    )
+  email: string;
+  password: string;
+  rememberMe: boolean;
 }
 
+interface FormErrors {
+  email?: string;
+  password?: string;
+}
+
+const LoginPage: React.FC = () => {
+  const navigate = useNavigate();
+  const dispatch = useAppDispatch();
+  const { loading, error, token } = useAppSelector((state) => state.auth);
+  
+  const [formData, setFormData] = useState<FormData>({
+    email: '',
+    password: '',
+    rememberMe: false
+  });
+  
+  const [errors, setErrors] = useState<FormErrors>({});
+  const [touched, setTouched] = useState<{ email: boolean; password: boolean }>({
+    email: false,
+    password: false
+  });
+
+  // Редирект если пользователь уже авторизован
+  useEffect(() => {
+    if (token) {
+      navigate('/');
+    }
+  }, [token, navigate]);
+
+  // Валидация email
+  const validateEmail = (email: string): string | undefined => {
+    if (!email) {
+      return 'Пожалуйста, введите email';
+    }
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      return 'Введите корректный email адрес';
+    }
+    return undefined;
+  };
+
+  // Валидация пароля
+  const validatePassword = (password: string): string | undefined => {
+    if (!password) {
+      return 'Пожалуйста, введите пароль';
+    }
+    if (password.length < 8) {
+      return 'Пароль должен содержать минимум 8 символов';
+    }
+    return undefined;
+  };
+
+  // Общая валидация формы
+  const validateForm = (): boolean => {
+    const newErrors: FormErrors = {
+      email: validateEmail(formData.email),
+      password: validatePassword(formData.password)
+    };
+    
+    setErrors(newErrors);
+    return !newErrors.email && !newErrors.password;
+  };
+
+  // Обработчик изменения полей
+  const handleInputChange = (field: keyof FormData) => (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const value = field === 'rememberMe' ? e.target.checked : e.target.value;
+    
+    setFormData(prev => ({
+      ...prev,
+      [field]: value
+    }));
+
+    // Валидация при изменении (только для touched полей)
+    if (touched[field as keyof typeof touched]) {
+      if (field === 'email') {
+        setErrors(prev => ({
+          ...prev,
+          email: validateEmail(value as string)
+        }));
+      } else if (field === 'password') {
+        setErrors(prev => ({
+          ...prev,
+          password: validatePassword(value as string)
+        }));
+      }
+    }
+  };
+
+  // Обработчик потери фокуса
+  const handleBlur = (field: keyof typeof touched) => () => {
+    setTouched(prev => ({ ...prev, [field]: true }));
+    
+    // Валидация при потере фокуса
+    if (field === 'email') {
+      setErrors(prev => ({
+        ...prev,
+        email: validateEmail(formData.email)
+      }));
+    } else if (field === 'password') {
+      setErrors(prev => ({
+        ...prev,
+        password: validatePassword(formData.password)
+      }));
+    }
+  };
+
+  // Обработчик отправки формы
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    // Помечаем все поля как touched при отправке
+    setTouched({ email: true, password: true });
+    
+    if (validateForm()) {
+      try {
+        const result = await dispatch(loginThunk(formData)).unwrap();
+        
+        if (result.token) {
+          navigate('/');
+        }
+      } catch (error) {
+        console.error('Login error:', error);
+      }
+    }
+  };
+
+  const handleForgotPassword = () => {
+    console.log('Forgot password clicked');
+  };
+
+  return (
+    <div className="login-container">
+      {/* Логотип компании */}
+      <div className="login-logo">
+        <img
+          src="https://www.company.rt.ru/about/identity/files/RGB_RT_logo-horizontal_main_ru.png"
+          alt="Company Logo"
+          className="login-logo-image"
+          onError={(e) => {
+            e.currentTarget.src = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjgwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iODAiIGZpbGw9IiNmZmYiLz48dGV4dCB4PSIxMDAiIHk9IjQwIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTQiIGZpbGw9IiMzMzMiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkxPR08gQ09NUEFOWTwvdGV4dD48L3N2Zz4=";
+          }}
+        />
+      </div>
+
+      {/* Форма авторизации */}
+      <div className="login-form-card">
+        <h2 className="login-title">
+          Вход в систему
+        </h2>
+
+        {/* Блок ошибок */}
+        {error && (
+          <div className="login-error-alert">
+            {error}
+            <button 
+              onClick={() => dispatch(clearError())}
+              style={{ 
+                marginLeft: 'auto', 
+                background: 'none', 
+                border: 'none', 
+                cursor: 'pointer',
+                fontSize: '16px'
+              }}
+            >
+              ×
+            </button>
+          </div>
+        )}
+
+        <form className="login-form" onSubmit={handleSubmit}>
+          {/* Поле ввода email */}
+          <div className="form-group">
+            <label htmlFor="email" className="form-label">
+              Email
+            </label>
+            <input
+              id="email"
+              type="email"
+              className={`form-input ${errors.email ? 'error' : ''}`}
+              placeholder="Введите email"
+              value={formData.email}
+              onChange={handleInputChange('email')}
+              onBlur={handleBlur('email')}
+              disabled={loading}
+            />
+            {errors.email && (
+              <div className="form-error">{errors.email}</div>
+            )}
+          </div>
+
+          {/* Поле ввода пароля */}
+          <div className="form-group">
+            <label htmlFor="password" className="form-label">
+              Пароль
+            </label>
+            <input
+              id="password"
+              type="password"
+              className={`form-input ${errors.password ? 'error' : ''}`}
+              placeholder="Введите пароль"
+              value={formData.password}
+              onChange={handleInputChange('password')}
+              onBlur={handleBlur('password')}
+              disabled={loading}
+            />
+            {errors.password && (
+              <div className="form-error">{errors.password}</div>
+            )}
+          </div>
+
+          {/* Чекбокс "Запомнить меня" */}
+          <label className="checkbox-group">
+            <input
+              type="checkbox"
+              className="checkbox-input"
+              checked={formData.rememberMe}
+              onChange={handleInputChange('rememberMe')}
+              disabled={loading}
+            />
+            <span className="checkbox-label">Запомнить меня</span>
+          </label>
+
+          {/* Кнопка входа */}
+          <button
+            type="submit"
+            disabled={loading}
+            className={`login-submit-button ${loading ? 'loading' : ''}`}
+          >
+            {loading ? (
+              <>
+                <div className="spinner"></div>
+                Вход...
+              </>
+            ) : (
+              'Войти'
+            )}
+          </button>
+        </form>
+
+        {/* Ссылка "Забыли пароль?" */}
+        <div className="login-forgot-password">
+          <button
+            type="button"
+            onClick={handleForgotPassword}
+            className="forgot-password-link"
+            disabled={loading}
+          >
+            Забыли пароль?
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 export default LoginPage;

front/src/widgets/Header/Header.css

@@ -0,0 +1,143 @@
+.header {
+  /*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
+  background-color: var(--purple);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  padding: 0;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  backdrop-filter: blur(10px);
+}
+
+.header-menu {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.header-menu a {
+  position: relative;
+  color: white;
+  text-decoration: none;
+  padding: 1.8rem 2rem;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-weight: 500;
+  font-size: 1.1rem;
+  transition: all 0.3s ease;
+  overflow: hidden;
+}
+
+.header-menu a::before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 3px;
+  background: linear-gradient(90deg, var(--lavander), var(--light-blue));
+  transition: all 0.3s ease;
+  transform: translateX(-50%);
+}
+
+.header-menu a::after {
+  content: '';
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+  transition: left 0.5s ease;
+}
+
+.header-logo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: white;
+  text-decoration: none;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-weight: 700;
+  font-size: 1.4rem;
+  transition: all 0.3s ease;
+}
+
+.logo-image {
+  width: 340px;
+  height: 80px;
+  border-radius: 8px;
+  object-fit: contain;
+  transition: all 0.3s ease;
+  /*filter: brightness(0) invert(1);*/
+}
+
+.header-menu a:hover {
+  background: rgba(255, 255, 255, 0.1);
+  transform: translateY(-2px);
+}
+
+.header-menu a:hover::before {
+  width: 80%;
+}
+
+.header-menu a:hover::after {
+  left: 100%;
+}
+
+.header-menu a.active {
+  background: rgba(255, 255, 255, 0.15);
+  font-weight: 600;
+}
+
+.header-menu a.active::before {
+  width: 100%;
+  background: linear-gradient(90deg, var(--lavander), var(--light-blue));
+}
+
+/* Анимация при загрузке */
+.header-menu a {
+  animation: slideIn 0.6s ease forwards;
+  opacity: 0;
+  transform: translateY(-20px);
+}
+
+.header-menu a:nth-child(1) { animation-delay: 0.1s; }
+.header-menu a:nth-child(2) { animation-delay: 0.2s; }
+.header-menu a:nth-child(3) { animation-delay: 0.3s; }
+
+@keyframes slideIn {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Адаптивность */
+@media (max-width: 768px) {
+  .header-menu {
+    flex-direction: column;
+    padding: 0;
+  }
+  
+  .header-menu a {
+    width: 100%;
+    text-align: center;
+    padding: 1rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+  
+  .header-menu a:last-child {
+    border-bottom: none;
+  }
+}
+
+/* Эффект пульсации при наведении на кнопку выхода */
+.header-menu a[onclick]:hover {
+  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
+}
+
+.header-menu a[onclick]:hover::before {
+  background: linear-gradient(90deg, #ffd89b, #ff6b6b);
+}
+

front/src/widgets/Header/Header.tsx

@@ -1,12 +1,24 @@
 import { NavLink } from "react-router";
+import { useAppDispatch } from '../../app/hooks';
+import { logout } from "../../features/auth/authSlice";
+import './Header.css'
+import logo from '../../assets/partners_dark theme_1_partner.png'
 
 const Header = () =>{
+
+    const dispatch = useAppDispatch();
+
     return(
         <nav className="header">
-            <div className="account-menu">
+            <div className="header-menu">
-            <NavLink to="/" end >Главная</NavLink>
+                <div className="header-logo">
-            <NavLink to="history" >История</NavLink>
+                    <img src={logo} alt="logo" className="logo-image"/>
-            <NavLink to="login" >Выход</NavLink>
+                </div>
+                <div className="header-nav">
+                <NavLink to="/" end >Главная</NavLink>
+                <NavLink to="history" >История</NavLink>
+                <NavLink to="login" onClick={() => dispatch(logout())} >Выход</NavLink>
+                </div>
             </div>
         </nav>
     )