@@ -0,0 +1,15 @@
+const Sentry = {
+  init: jest.fn(),
+  captureException: jest.fn(),
+  captureMessage: jest.fn(),
+  withScope: jest.fn((callback) => {
+    callback({
+      setExtra: jest.fn(),
+      setTag: jest.fn(),
+      setUser: jest.fn(),
+    });
+  }),
+};
+
+
+export default Sentry;
@@ -0,0 +1,25 @@
+const mockRouter = {
+	push: jest.fn(() => Promise.resolve()),
+	replace: jest.fn(() => Promise.resolve()),
+	reload: jest.fn(),
+	back: jest.fn(),
+	prefetch: jest.fn(() => Promise.resolve()),
+	beforePopState: jest.fn(),
+	events: {
+		on: jest.fn(),
+		off: jest.fn(),
+		emit: jest.fn(),
+	},
+	query: {},
+	asPath: '',
+	pathname: '',
+	route: '',
+}
+
+const useRouter = jest.fn(() => mockRouter)
+
+export { useRouter }
+
+export const setRouter = (overrides: Partial<typeof mockRouter>) => {
+	Object.assign(mockRouter, overrides)
+}
@@ -0,0 +1,30 @@
+import { jest } from '@jest/globals'
+
+const mockUseSession = jest.fn()
+const mockSignIn = jest.fn()
+const mockSignOut = jest.fn()
+const mockGetSession = jest.fn()
+
+const mockSession = {
+	user: {
+		name: 'Test User',
+		email: 'test@example.com',
+		image: 'https://example.com/test.jpg',
+	},
+	expires: '1',
+}
+
+export const useSession = () => {
+	return { data: mockSession, status: 'authenticated' }
+}
+
+export const signIn = mockSignIn
+export const signOut = mockSignOut
+export const getSession = mockGetSession
+
+export default {
+	useSession,
+	signIn,
+	signOut,
+	getSession,
+}
@@ -0,0 +1,3 @@
+const ReactComponent = 'div'
+
+export default ReactComponent
\ No newline at end of file
@@ -0,0 +1,27 @@
+import { Modal, usePlatesStore } from '#/features/modals/model'
+import { useEffect } from 'react'
+import { jestRender } from './render'
+
+const ModalTester = ({ id, onModal }: { id: string; onModal: (modal: Modal) => void }) => {
+	const { getModal } = usePlatesStore()
+
+	useEffect(() => {
+		const modal = getModal(id)
+		onModal(modal)
+	}, [id, onModal])
+
+	return null
+}
+
+export async function getModalTest(id: string): Promise<Modal> {
+	return await new Promise((resolve) => {
+		jestRender(
+			<ModalTester
+				id={id}
+				onModal={(m) => {
+					resolve(m)
+				}}
+			/>
+		)
+	})
+}
@@ -0,0 +1,9 @@
+import { store } from '#/app/store/store'
+import { render } from '@testing-library/react'
+import { Provider } from 'react-redux'
+
+export function jestRender(component: React.ReactElement) {
+	return render(<Provider store={store}>{component}</Provider>)
+}
+
+
@@ -0,0 +1,28 @@
+//@ts-nocheck
+export function windowMock() {
+	let originalLocation = window.location // Сохраняем оригинальный window.location
+
+	beforeEach(() => {
+		// Удаляем оригинальный window.location
+		delete window.location
+
+		// Мокируем window.location
+		window.location = {
+			href: '',
+			assign: jest.fn(),
+			replace: jest.fn(),
+			reload: jest.fn(),
+			protocol: 'http:',
+			host: 'localhost',
+			pathname: '/',
+			search: '',
+			hash: '',
+			...originalLocation, // Сохраняем оригинальные методы
+		}
+	})
+	afterEach(() => {
+		// Возвращаем оригинальный window.location
+		// @ts-ignore
+		window.location = originalLocation
+	})
+}
@@ -490,3 +490,21 @@ button {
 	opacity: 0;
 	transition: opacity 400ms;
 }
+
+
+.fade-enter{
+   opacity: 0;
+}
+.fade-exit{
+   opacity: 1;
+}
+.fade-enter-active{
+   opacity: 1;
+}
+.fade-exit-active{
+   opacity: 0;
+}
+.fade-enter-active,
+.fade-exit-active{
+   transition: opacity 500ms;
+}
\ No newline at end of file
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 12 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M10.1876 5.24984V17.229C10.1876 19.5311 8.323 21.3957 6.02091 21.3957C3.71883 21.3957 1.85425 19.5311 1.85425 17.229V4.20817C1.85425 2.77067 3.02091 1.604 4.45841 1.604C5.89591 1.604 7.06258 2.77067 7.06258 4.20817V15.1457C7.06258 15.7186 6.59383 16.1873 6.02091 16.1873C5.448 16.1873 4.97925 15.7186 4.97925 15.1457V5.24984H3.41675V15.1457C3.41675 16.5832 4.58341 17.7498 6.02091 17.7498C7.45841 17.7498 8.62508 16.5832 8.62508 15.1457V4.20817C8.62508 1.90609 6.7605 0.0415039 4.45841 0.0415039C2.15633 0.0415039 0.291748 1.90609 0.291748 4.20817V17.229C0.291748 20.3957 2.85425 22.9582 6.02091 22.9582C9.18758 22.9582 11.7501 20.3957 11.7501 17.229V5.24984H10.1876Z"
+    fill="currentColor" />
+</svg>
+  
\ No newline at end of file
@@ -150,7 +150,7 @@
 	background-color: rgba(0, 0, 0, 0.7);
 	border-radius: 15px;
 	padding: 20px;
-	z-index: 10000;
+	z-index: 1000;
 	&:hover {
 		outline: 4px solid #8280ff66;
 		outline-offset: -3px;
@@ -148,7 +148,7 @@
 	background-color: rgba(0, 0, 0, 0.7);
 	border-radius: 15px;
 	padding: 20px;
-	z-index: 10000;
+	z-index: 1000;
 	&:hover {
 		outline: 4px solid #8280ff66;
 		outline-offset: -3px;
@@ -1,19 +1,8 @@
-import axios from 'axios'
+import { api } from '#/shared/api'
 
-import { API_URL } from '#/shared/lib/constants'
-
-export const changePassword = async (email: string, password: string, newPassword: string, token?: string) => {
-	return await axios.patch<string | {detail: string}>(
-		API_URL + `/auth/business-host/account/change-pass/${email}`,
-		{
-			password_1: password,
-			password_2: newPassword,
-		},
-		{
-			headers: {
-				Authorization: `Bearer ${token}`,
-			},
-			validateStatus: (status) => status < 500
-		}
-	)
+export const changePassword = async (email: string, password_1: string, password_2: string) => {
+	return await api.patch<{ detail: string }>(`/auth/business-host/account/change-pass/${email}`, {
+		password_1,
+		password_2,
+	})
 }
@@ -4,6 +4,7 @@ import { useState } from 'react'
 import { getModalById, PLATE_CHANGE_PASSWORD } from '#/features/modals'
 import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
 import { useForm } from 'react-hook-form'
+import { makePrivateRequest } from '#/shared/api'
 
 interface ChangePasswordForm {
 	password: string
@@ -23,34 +24,27 @@ export const useChangePassword = () => {
 		setValue,
 	} = useForm<ChangePasswordForm>()
 	const { showMessage } = useShowDataStore()
-	const { data: session } = useSession()
 	const [passwordShowed, setPasswordShowed] = useState(false)
 
-	const onSubmit = handleSubmit(async (data, event) => {
-		if (!session) return
+	const onSubmit = handleSubmit(
+		makePrivateRequest(async ({ password, newPassword }) => {
+			if (password !== newPassword) {
+				showMessage('Пароли не совпадают')
+				setError('password', { message: 'Пароли не совпадают' })
+				return setError('newPassword', { message: 'Пароли не совпадают' })
+			}
 
-		if (data.password !== data.newPassword) {
-			showMessage('Пароли не совпадают!', 'error')
-			setError('password', { message: 'Пароли не совпадают' })
-			return setError('newPassword', { message: 'Пароли не совпадают' })
-		}
+			const { data, status } = await changePassword(modal.getStoreProperty<string>('email')!, password, newPassword)
 
-		const { data: res, status } = await changePassword(
-			modal.getStoreProperty<string>('email')!,
-			data.password,
-			data.newPassword,
-			session.access
-		)
+			if (status !== 200) return showMessage(data.detail)
 
-		if (status == 200) {
 			showMessage('Пароль изменен успешно!', 'success')
+
 			modal.setState(false)
-			return
-		}
 
-		showMessage((res as { detail: string }).detail)
-		reset()
-	})
+			reset()
+		})
+	)
 
 	return { onSubmit, register, watch, reset, errors, trigger, setValue, passwordShowed, setPasswordShowed }
 }
@@ -0,0 +1,100 @@
+import '@testing-library/jest-dom'
+import { act, fireEvent, screen, waitFor } from '@testing-library/react'
+import { jestRender } from '#/../jest/utils/render'
+import { windowMock } from '#/../jest/utils/window-mock'
+import { ChangePasswordPlate } from './change-password'
+import { PLATE_CHANGE_PASSWORD } from '#/features/modals'
+import { getModalTest } from '#/../jest/utils/modal-tester'
+import { api } from '#/shared/api/instance'
+
+jest.mock('next/router')
+jest.mock('@sentry/nextjs')
+
+jest.mock('#/shared/api/instance')
+
+const showMessageMock = jest.fn()
+const useSessionMock = jest.fn()
+
+jest.mock('next-auth/react', () => {
+	return {
+		useSession: () => useSessionMock(),
+	}
+})
+
+jest.mock('#/shared/lib/hooks/use-show-data', () => {
+	return {
+		useShowDataStore: jest.fn(() => {
+			return {
+				showMessage: showMessageMock,
+			}
+		}),
+	}
+})
+
+useSessionMock.mockReturnValue({
+	data: {
+		access: 'something access',
+	},
+})
+
+windowMock()
+
+describe('chage-password', () => {
+	it('successfully change password', async () => {
+		jestRender(<ChangePasswordPlate />)
+
+		const modal = await getModalTest(PLATE_CHANGE_PASSWORD)
+
+		act(() => {
+			modal.setState(true, {
+				email: 'aleksander.freelancer@gmail.com',
+			})
+		})
+		;(api.patch as jest.Mock).mockResolvedValue({
+			status: 200,
+			data: { detail: 'Host password has been updated' },
+		})
+
+		const password = screen.getByPlaceholderText('Пароль')
+		const newPassword = screen.getByPlaceholderText('Повторить пароль')
+		const button = screen.getByText('Сменить пароль')
+
+		fireEvent.change(password, { target: { value: 'h7O5vF$M' } })
+		fireEvent.change(newPassword, { target: { value: 'h7O5vF$M' } })
+
+		act(() => {
+			fireEvent.click(button)
+		})
+
+		await waitFor(() => {
+			expect(showMessageMock).toHaveBeenCalledWith('Пароль изменен успешно!', 'success')
+		})
+	})
+
+	it('not equal passwords', async () => {
+		jestRender(<ChangePasswordPlate />)
+
+		const modal = await getModalTest(PLATE_CHANGE_PASSWORD)
+
+		act(() => {
+			modal.setState(true, {
+				email: 'aleksander.freelancer@gmail.com',
+			})
+		})
+
+		const password = screen.getByPlaceholderText('Пароль')
+		const newPassword = screen.getByPlaceholderText('Повторить пароль')
+		const button = screen.getByText('Сменить пароль')
+
+		fireEvent.change(password, { target: { value: 'h7O5vF$M' } })
+		fireEvent.change(newPassword, { target: { value: 'h7O5vF$Md' } })
+
+		act(() => {
+			fireEvent.click(button)
+		})
+
+		await waitFor(() => {
+			expect(showMessageMock).toHaveBeenCalledWith('Пароли не совпадают')
+		})
+	})
+})
@@ -1,6 +1,5 @@
 import { getModalById, PLATE_CHANGE_PASSWORD, PlateTemplate } from '#/features/modals'
 import styles from './change-password.module.scss'
-import React, { useEffect } from 'react'
 import { CommonButton } from '#/shared/ui/button'
 import { CommonInput } from '#/shared/ui/common-input'
 import { useChangePassword } from '../lib/use-change-password'
@@ -9,30 +8,19 @@ import ClosedEyeSvg from '#/assets/svg/closed-eye.svg?react'
 
 export const ChangePasswordPlate = () => {
 	const modal = getModalById(PLATE_CHANGE_PASSWORD)
-	const { onSubmit, register, errors, reset, trigger, watch, setValue, passwordShowed, setPasswordShowed } = useChangePassword()
+
+	const { onSubmit, register, errors, reset, trigger, passwordShowed, setPasswordShowed } = useChangePassword()
 
 	return (
-		<PlateTemplate
-			id={PLATE_CHANGE_PASSWORD}
-			headerClassName={styles.container}
-			variant='secondary'
-			closeModal={() => {
-				reset()
-			}}
-		>
-			<form className={styles.modal} onSubmit={onSubmit}>
+		<PlateTemplate id={PLATE_CHANGE_PASSWORD} headerClassName={styles.container} variant='secondary' closeModal={() => reset()}>
+			<form className={styles.modal} onChange={() => trigger()} onSubmit={onSubmit}>
 				<p className={styles.modal__header}>Смена пароля</p>
 				<div className={styles.box}>
 					<CommonInput
 						{...register('password', {
 							required: 'Обязательное поле',
-							pattern: { value: /^[\w\d\._-]+$/i, message: 'Неверный формат' },
+							minLength: { value: 6, message: 'Укажите пароль не меньше 6 символов' },
 						})}
-						value={watch('password', '')}
-						onChange={(e) => {
-							setValue('password', e.target.value)
-							trigger('password')
-						}}
 						label='Новый пароль'
 						variant='outline'
 						placeholder='Пароль'
@@ -48,18 +36,12 @@ export const ChangePasswordPlate = () => {
 								)}
 							</button>
 						}
-						// onInput={() => trigger('password')}
 					/>
 					<CommonInput
 						{...register('newPassword', {
 							required: 'Обязательное поле',
-							pattern: { value: /^[\w\d\._-]+$/i, message: 'Неверный формат' },
+							minLength: { value: 6, message: 'Укажите пароль не меньше 6 символов' },
 						})}
-						value={watch('newPassword', '')}
-						onChange={(e) => {
-							setValue('newPassword', e.target.value)
-							trigger('newPassword')
-						}}
 						label='Повторить пароль'
 						variant='outline'
 						placeholder='Повторить пароль'
@@ -74,21 +56,13 @@ export const ChangePasswordPlate = () => {
 							</button>
 						}
 						error={errors.newPassword}
-						// onInput={() => trigger('password')}
 					/>
 				</div>
 				<div className={styles.modal__buttons}>
 					<CommonButton variant='primary' type='submit'>
 						Сменить пароль
 					</CommonButton>
-					<CommonButton
-						variant='gray'
-						onClick={() => {
-							modal.setState(false)
-							reset()
-						}}
-						type='button'
-					>
+					<CommonButton variant='gray' onClick={() => modal.setState(false)} type='button'>
 						Отмена
 					</CommonButton>
 				</div>
@@ -0,0 +1,17 @@
+import { api } from '#/shared/api'
+
+interface SendReport {
+  errorMessage: string
+  email: string
+  file?: File
+} 
+
+export async function sendReport({errorMessage, email, file}: SendReport) {
+	let formData = new FormData()
+
+	formData.append('report_text', `${email}: ${errorMessage}`)
+	if (file) {
+		formData.append('images', file)
+	}
+	return await api.post('/reports/', formData)
+}
@@ -0,0 +1 @@
+export * from './error-report.api'
\ No newline at end of file
@@ -0,0 +1,64 @@
+import { useAppSelector } from '#/app/store/store'
+import { API_URL } from '#/shared/lib/constants'
+import axios from 'axios'
+import { useSession } from 'next-auth/react'
+import React, { ChangeEvent } from 'react'
+import { sendReport } from '../api'
+import { makePrivateRequest } from '#/shared/api'
+import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
+
+export const useErrorReport = () => {
+
+	const { showMessage } = useShowDataStore()
+	const [errorMessage, setErrorMessage] = React.useState<string>('')
+
+	const [error, setError] = React.useState(false)
+
+	const [isSend, setIsSend] = React.useState(false)
+
+	const [file, setFile] = React.useState<File>()
+
+	const { data: session } = useSession()
+
+	const email = useAppSelector((state) => state.user.email)
+
+	const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+		if (e.target.files) {
+			if (4500000 > e.target.files[0].size) setFile(e.target.files[0])
+		}
+	}
+
+	const sendError = makePrivateRequest(async () => {
+		if (errorMessage.trim() === '') {
+			showMessage("Поле не должно быть пустым.")
+			setError(true)
+			setTimeout(() => setError(false), 3000)
+			return
+		}
+
+		try {
+			const { status } = await sendReport({ errorMessage, email, file })
+
+			if (status === 201) {
+				setErrorMessage('')
+				setIsSend(true)
+				setTimeout(() => {
+					setIsSend(false)
+				}, 4000)
+			}
+		} catch (err) {
+			setError(true)
+			setTimeout(() => setError(false), 3000)
+		}
+	})
+
+	return {
+		isSend,
+		setErrorMessage,
+		handleFileChange,
+		file,
+		setFile,
+		sendError,
+		error,
+	}
+}
@@ -0,0 +1,78 @@
+.container {
+	width: 589px;
+	height: auto;
+	background-color: var(--background-color-additional);
+	padding: 32px;
+	border-radius: 20px;
+
+	box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 10px -5px, rgba(0, 0, 0, 0.14) 0px 16px 24px 2px, rgba(0, 0, 0, 0.12) 0px 6px 30px 5px;
+
+	&_sended {
+		display: flex;
+		gap: 16px;
+		flex-direction: column;
+		width: 300px;
+		text-align: center;
+	}
+
+	&__buttons {
+		display: flex;
+		justify-content: flex-end;
+		flex-direction: row;
+		align-items: flex-end;
+		margin-top: 12px;
+		gap: 8px;
+	}
+
+	&__close {
+		transform: rotate(45deg);
+		margin-left: 8px;
+    color: var(--new-ui-gray-color);
+	}
+}
+
+.text {
+	color: #868686;
+	font-size: 17px;
+	line-height: 1.5;
+
+	&_accent {
+		color: #22b47f;
+		font-size: 23px;
+	}
+
+	&_heading {
+		font-size: 21px;
+		font-weight: 500;
+	}
+
+	&_file {
+		font-size: 15px;
+	}
+}
+
+.textarea {
+	position: relative;
+	margin: 20px 0px 9.6px 0px;
+
+	&__button {
+		position: absolute;
+		padding: 0;
+		bottom: 16px;
+		left: 8px;
+		background-color: transparent;
+		box-shadow: none;
+		margin: 0;
+		rotate: 30deg;
+
+		&:hover {
+			background-color: transparent;
+			box-shadow: none;
+		}
+	}
+
+	&__file {
+		display: flex;
+		align-items: center;
+	}
+}
@@ -0,0 +1,92 @@
+import '@testing-library/jest-dom'
+import { act, fireEvent, screen, waitFor } from '@testing-library/react'
+import { jestRender } from '#/../jest/utils/render'
+import { windowMock } from '#/../jest/utils/window-mock'
+import { ERROR_REPORT, PLATE_CHANGE_PASSWORD } from '#/features/modals'
+import { getModalTest } from '#/../jest/utils/modal-tester'
+import { api } from '#/shared/api/instance'
+import { ErrorReportPlate } from './error-report'
+import axios from 'axios'
+import { sendReport } from '../api'
+
+jest.mock('next/router')
+jest.mock('@sentry/nextjs')
+
+jest.mock('../api')
+
+const showMessageMock = jest.fn()
+const useSessionMock = jest.fn()
+
+jest.mock('next-auth/react', () => {
+	return {
+		useSession: () => useSessionMock(),
+	}
+})
+
+jest.mock('#/shared/lib/hooks/use-show-data', () => {
+	return {
+		useShowDataStore: jest.fn(() => {
+			return {
+				showMessage: showMessageMock,
+			}
+		}),
+	}
+})
+
+useSessionMock.mockReturnValue({
+	data: {
+		access: 'something access',
+	},
+})
+
+windowMock()
+
+describe('error-report', () => {
+	it('successfully show modal', async () => {
+		jestRender(<ErrorReportPlate />)
+
+		const modal = await getModalTest(ERROR_REPORT)
+
+		act(() => {
+			modal.setState(true)
+		})
+		;(sendReport as jest.Mock).mockResolvedValue({
+			status: 201,
+			data: { detail: 'error report sent' },
+		})
+
+		const textarea = screen.getByPlaceholderText('Опишите детально возникшую проблему')
+		const button = screen.getByText('Отправить')
+
+		fireEvent.change(textarea, { target: { value: 'О нет все пропало' } })
+
+		act(() => {
+			fireEvent.click(button)
+		})
+
+		await waitFor(() => {
+			expect(sendReport).toHaveBeenCalledWith({ errorMessage: 'О нет все пропало', email: '' })
+		})
+	})
+
+	it('empty textarea', async () => {
+		jestRender(<ErrorReportPlate />)
+
+		const modal = await getModalTest(ERROR_REPORT)
+
+		act(() => {
+			modal.setState(true)
+		})
+
+		const textarea = screen.getByPlaceholderText('Опишите детально возникшую проблему')
+		const button = screen.getByText('Отправить')
+
+		act(() => {
+			fireEvent.click(button)
+		})
+
+		await waitFor(() => {
+			expect(showMessageMock).toHaveBeenCalledWith("Поле не должно быть пустым.")
+		})
+	})
+})
@@ -0,0 +1,73 @@
+import * as React from 'react'
+import AttachSvg from '#/assets/svg/attach.svg?react'
+import PlusSvg from '#/assets/svg/plus.svg?react'
+import { ERROR_REPORT, getModalById, PlateTemplate } from '#/features/modals'
+
+import styles from './error-report.module.scss'
+import { c } from '#/shared'
+import { CommonTextArea } from '#/shared/ui/common-textarea'
+import { CommonButton } from '#/shared/ui/button'
+import { useErrorReport } from '../model/use-error-report'
+
+export const ErrorReportPlate = () => {
+	const modal = getModalById(ERROR_REPORT)
+
+	const { error, isSend, setErrorMessage, handleFileChange, file, setFile, sendError } = useErrorReport()
+
+	return (
+		<PlateTemplate id={ERROR_REPORT} variant='secondary' hasTemplate={false}>
+			{isSend ? (
+				<div className={c(styles.container, styles.container_sended)}>
+					<p className={styles.text_accent}>Спасибо!</p>
+					<p className={styles.text}>Ваше сообщение направлено нашим специалистам. Ответ придет на почту, указанную при регистрации</p>
+				</div>
+			) : (
+				<div className={styles.container} onClick={(e) => e.stopPropagation()}>
+					<p className={styles.text_heading}>Сообщить об ошибке</p>
+					<CommonTextArea
+						showError={false}
+						error={error ? { message: 'Поле не должно быть пустым.', type: 'required' } : undefined}
+						rows={4}
+						className={styles.textarea}
+						placeholder='Опишите детально возникшую проблему'
+						onChange={(evt) => setErrorMessage(evt.target.value)}
+						buttomSlot={
+							<>
+								<button className={styles.textarea__button}>
+									<input
+										onChange={handleFileChange}
+										type='file'
+										accept='.jpg,.jpeg,.png'
+										style={{ display: 'none' }}
+										id='file-input'
+									/>
+									<label htmlFor='file-input' style={{ cursor: 'pointer' }}>
+										<AttachSvg width={25} height={25} color='#868686' />
+									</label>
+								</button>
+							</>
+						}
+					/>
+					{file && (
+						<div className={styles.textarea__file}>
+							<p className={styles.text_file}>Добавлено 1 изображение: {file.name}</p>
+
+							<button className={styles.container__close} onClick={() => setFile(undefined)}>
+								<PlusSvg width={18} height={18} />
+							</button>
+						</div>
+					)}
+
+					<div className={styles.container__buttons}>
+						<CommonButton variant='gray' onClick={() => modal.setState(false)}>
+							Отмена
+						</CommonButton>
+						<CommonButton variant='primary' onClick={sendError}>
+							Отправить
+						</CommonButton>
+					</div>
+				</div>
+			)}
+		</PlateTemplate>
+	)
+}
@@ -0,0 +1 @@
+export * from './error-report'
\ No newline at end of file
@@ -0,0 +1 @@
+export * from './ui'
\ No newline at end of file
@@ -1,2 +1,3 @@
 export const PLATE_CHANGE_PASSWORD = 'plate-change-password'
 export const RESEND_INVATION_PASSWORD = 'resend-invation-password'
+export const ERROR_REPORT = 'error-report'
@@ -1,4 +1,3 @@
-'use client'
 import { useEffect } from 'react'
 import { c } from '#/shared'
 import { usePlatesStore } from '../model'
@@ -44,8 +43,6 @@ export default function PlatesTemplate({
 
 	const modal = getModal(id)
 
-	const { theme } = useThemeAndDevice()
-
 	useEffect(() => setModal(id), [])
 
 	return (
@@ -28,13 +28,18 @@
 .area {
 	width: 100%;
 	resize: none;
-	// height: 28px;
 	border-radius: 0px;
-	overflow-y: hidden;
+	overflow-y: auto;
+	scrollbar-width: none; /* Firefox */
+	-ms-overflow-style: none;
 	padding: 0px;
 	font-size: 16px;
 	max-height: 82px;
 
+	&::-webkit-scrollbar {
+		display: none; /* Chrome, Brave, Edge */
+	}
+
 	&::placeholder {
 		font-size: 16px;
 	}
@@ -56,7 +61,3 @@
 	width: 1px;
 	margin: 0px 8px;
 }
-
-// theme === 'dark'
-// 												? '#40404E'
-// 												: '#EBEFF5',
@@ -0,0 +1,127 @@
+import '@testing-library/jest-dom'
+import { act, fireEvent, screen, waitFor } from '@testing-library/react'
+import { jestRender } from '#/../jest/utils/render'
+import { windowMock } from '#/../jest/utils/window-mock'
+import { ModelInput } from './model-input'
+
+jest.mock('next/router')
+jest.mock('@sentry/nextjs')
+
+windowMock()
+
+const defaultProps = {
+	image: null,
+	loading: false,
+	desktop: true,
+	unpinImage: jest.fn(),
+	sendMessage: jest.fn().mockReturnValue(true),
+	imageLoad: jest.fn(),
+	styles: 'chats' as const,
+	input_types: [{ type: 'text', required: true, versions: ['v1'] }],
+	viewMobileSettings: jest.fn(),
+	currentVersion: 'v1',
+	blocked: false,
+}
+
+describe('renders textarea with correct placeholder', () => {
+	it('successfully show modal', async () => {
+		jestRender(<ModelInput {...defaultProps} />)
+		const textarea = screen.getByPlaceholderText('Ваше сообщение')
+		expect(textarea).toBeInTheDocument()
+	})
+
+	it('updates textarea value on user input', () => {
+		jestRender(<ModelInput {...defaultProps} />)
+		const textarea = screen.getByPlaceholderText('Ваше сообщение') as HTMLTextAreaElement
+
+		fireEvent.change(textarea, { target: { value: 'Test input' } })
+		expect(textarea.value).toBe('Test input')
+	})
+
+	it('adjusts height on input', () => {
+		jestRender(<ModelInput {...defaultProps} />)
+		const textarea = screen.getByPlaceholderText('Ваше сообщение') as HTMLTextAreaElement
+
+		Object.defineProperty(textarea, 'scrollHeight', { configurable: true, value: 80 })
+
+		fireEvent.input(textarea)
+		expect(textarea.style.height).toBe('80px')
+	})
+
+	it('textarea is disabled when disabled is true', () => {
+		const props = { ...defaultProps, blocked: true }
+		jestRender(<ModelInput {...props} />)
+		const textarea = screen.getByPlaceholderText('Ввод текста недоступен для этой модели') as HTMLTextAreaElement
+		expect(textarea).toBeDisabled()
+	})
+
+	it('calls sendMessage on Enter and clears textarea on success', () => {
+		const sendMessageMock = jest.fn().mockReturnValue(true)
+		const props = { ...defaultProps, sendMessage: sendMessageMock }
+		jestRender(<ModelInput {...props} />)
+
+		const textarea = screen.getByPlaceholderText('Ваше сообщение') as HTMLTextAreaElement
+
+		fireEvent.change(textarea, { target: { value: 'Test message' } })
+		fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false })
+
+		expect(sendMessageMock).toHaveBeenCalledWith('Test message', ['text'])
+		expect(textarea.value).toBe('')
+	})
+
+	it('does not call sendMessage on Shift+Enter', () => {
+		const sendMessageMock = jest.fn()
+		const props = { ...defaultProps, sendMessage: sendMessageMock }
+		jestRender(<ModelInput {...props} />)
+
+		const textarea = screen.getByPlaceholderText('Ваше сообщение') as HTMLTextAreaElement
+
+		fireEvent.change(textarea, { target: { value: 'Should not send' } })
+		fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: true })
+
+		expect(sendMessageMock).not.toHaveBeenCalled()
+	})
+
+	it('sets initial value from resendValue', () => {
+		const props = { ...defaultProps, resendValue: 'Previous message' }
+		jestRender(<ModelInput {...props} />)
+
+		const textarea = screen.getByDisplayValue('Previous message') as HTMLTextAreaElement
+		expect(textarea).toBeInTheDocument()
+	})
+
+	it('disables textarea if input_types does not include supported text type', async () => {
+		const props = {
+			...defaultProps,
+			input_types: [{ type: 'image', required: true, versions: ['v1'] }], // no 'text' type
+		}
+
+		jestRender(<ModelInput {...props} />)
+		await waitFor(() => {
+			const textarea = screen.getByPlaceholderText('Ввод текста недоступен для этой модели') as HTMLTextAreaElement
+			expect(textarea).toBeDisabled()
+		})
+	})
+
+	it('enables textarea if text input type is supported for currentVersion', async () => {
+		const props = {
+			...defaultProps,
+			input_types: [{ type: 'text', required: true, versions: ['v1'] }],
+			currentVersion: 'v1',
+		}
+
+		jestRender(<ModelInput {...props} />)
+		await waitFor(() => {
+			const textarea = screen.getByPlaceholderText('Ваше сообщение') as HTMLTextAreaElement
+			expect(textarea).not.toBeDisabled()
+		})
+	})
+
+	it('updates value on change and does not break', () => {
+		jestRender(<ModelInput {...defaultProps} />)
+		const textarea = screen.getByPlaceholderText('Ваше сообщение') as HTMLTextAreaElement
+
+		fireEvent.change(textarea, { target: { value: 'Side effect test' } })
+		expect(textarea.value).toBe('Side effect test')
+	})
+})
@@ -1,6 +1,6 @@
 import { RegisterOptions } from 'react-hook-form/dist/types/validator'
 
-export const companyNameOptions: RegisterOptions = {
+export const companyNameOptions = {
 	required: {
 		value: true,
 		message: 'Поле "Наименование организации" обязательно к заполнению',
@@ -11,7 +11,7 @@ export const companyNameOptions: RegisterOptions = {
 	},
 }
 
-export const innOptions: RegisterOptions = {
+export const innOptions = {
 	required: {
 		value: true,
 		message: 'Поле "ИНН" обязательно к заполнению',
@@ -23,7 +23,7 @@ export const innOptions: RegisterOptions = {
 	validate: (value: any) => value.length === 10 || 'ИНН должен быть длиной 10 цифр',
 }
 
-export const ogrnOptions: RegisterOptions = {
+export const ogrnOptions = {
 	required: {
 		value: true,
 		message: 'Поле "ОГРН" обязательно к заполнению',
@@ -6,7 +6,7 @@ import { innOptions, ogrnOptions } from '../../lib/constatnts-step-legal-informa
 const validateInnForIP = (value: any) => value.length === 12 || 'ИНН для ИП должен быть длиной 12 цифр'
 const validateOgrnForIp = (value: any) => value.length === 15 || 'ОГРН для ИП должен быть длиной 15 цифр'
 
-export const useCheckTypeCompany = (company?: string): [{ inn: RegisterOptions; ogrn: RegisterOptions }, boolean] => {
+export const useCheckTypeCompany = (company?: string): [{ inn: any; ogrn: any }, boolean] => {
 	const [rulesData, setRulesData] = useState({ inn: innOptions, ogrn: ogrnOptions })
 
 	const [isIP, setIsIP] = useState(false)
@@ -27,7 +27,7 @@ export const useCheckTypeCompany = (company?: string): [{ inn: RegisterOptions;
 				...prev,
 				inn: { ...innOptions, validate: validateInnForIP },
 				ogrn: { ...ogrnOptions, validate: validateOgrnForIp },
-			}
+			} as any
 		})
 	}, [company])
 
@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React, { useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { SubmitErrorHandler } from 'react-hook-form/dist/types/form'
@@ -1,11 +1,12 @@
 .container {
 	padding-bottom: 0;
+	background-color: #373737;
 }
 
 .modal {
 	min-width: 450px;
 	width: 100%;
-  padding-top: 35px;
+	padding-top: 35px;
 
 	&__buttons {
 		display: flex;
@@ -3,15 +3,20 @@ import { useThemeAndDevice } from '#/shared/lib/hooks'
 import { Button } from '@mui/material'
 import { signIn } from 'next-auth/react'
 import Image from 'next/image'
-import React from 'react'
+import React, { useState } from 'react'
 
 interface YandexAuthButtonProps {}
 
 export const YandexAuthButton = ({}: YandexAuthButtonProps) => {
 	const { theme } = useThemeAndDevice()
 
+	const [hovered, setHovered] = useState(false)
+
 	return (
 		<Button
+			onMouseEnter={() => setHovered(true)}
+			onMouseLeave={() => setHovered(false)}
+			data-testid='yandex-auth-button'
 			variant='contained'
 			onClick={async () => {
 				await signIn('yandex', {
@@ -19,6 +24,7 @@ export const YandexAuthButton = ({}: YandexAuthButtonProps) => {
 					redirect: false,
 				})
 			}}
+			style={{ opacity: hovered ? 0.7 : 1 }}
 			sx={{
 				backgroundColor: theme === 'dark' ? '#1C1C1E' : '#F1FAFF',
 				color: theme === 'dark' ? 'white' : '#2B2B42',
@@ -33,7 +39,7 @@ export const YandexAuthButton = ({}: YandexAuthButtonProps) => {
 				height: 50,
 				'&:hover': {
 					backgroundColor: theme === 'dark' ? '#1C1C1E' : '#F1FAFF',
-					opacity: 0.7,
+					// opacity: 0.7,
 					boxShadow: 'none',
 				},
 			}}
@@ -5,7 +5,7 @@ import axios from 'axios'
 import * as https from 'https'
 import type { AppProps } from 'next/app'
 import { Raleway } from 'next/font/google'
-import { SessionProvider } from 'next-auth/react'
+import { SessionProvider, getSession } from 'next-auth/react'
 import { appWithTranslation } from 'next-i18next'
 import * as Sentry from '@sentry/browser'
 
@@ -20,12 +20,39 @@ import { pingFangFont } from '#/shared/lib/constants/font/font'
 import { useBlockTelegram } from '#/shared/lib/hooks/use-block-telegram'
 import { Error } from '#/shared'
 
+// import fetch from 'cross-fetch'
+
+// global.fetch = (...params: Parameters<typeof fetch>) => {
+// 	let url = params[0]
+
+// 	const baseUrl = process.env.NEXT_PUBLIC_NEXTAUTH_URL!
+
+// 	if (typeof url === 'string' && !(url as string).startsWith(baseUrl) && !(url as string).includes('http')) {
+// 		url = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) + params[0] : baseUrl + params[0]
+// 		console.log(url)
+// 	}
+
+// 	return fetch(url, params[1])
+// }
+
 axios.defaults.httpsAgent = new https.Agent({
 	rejectUnauthorized: false,
 })
 
 axios.defaults.validateStatus = () => true
 
+axios.interceptors.response.use(async (response) => {
+	if (![401, 404, 403].includes(response.status)) return response
+
+	const session = await getSession()
+
+	if (!session) {
+		window.location.href = '/login'
+	}
+
+	return response
+})
+
 const inter = Raleway({ subsets: ['latin'] })
 
 export type NextPageWithLayout<P = {}, DP = {}, IP = P> = NextPage<P, IP> & {
@@ -0,0 +1,2 @@
+export * from './instance'
+export * from './private-request'
\ No newline at end of file
@@ -0,0 +1,6 @@
+import axios from 'axios'
+
+export const api = axios.create({
+	validateStatus: () => true,
+	baseURL: process.env.NEXT_PUBLIC_API_HOST,
+})
@@ -0,0 +1,21 @@
+import { useSession } from 'next-auth/react'
+import { api } from './instance'
+
+export function makePrivateRequest(callback: (...params: any) => Promise<any>) {
+	const { data } = useSession()
+
+	return async (...params: any) => {
+		if (!data) return
+
+		api.interceptors.request.use((config) => {
+			config.headers.Authorization = `Bearer ${data.access}`
+			return config
+		})
+
+		const result = await callback(...params)
+
+		api.interceptors.request.clear()
+
+		return result
+	}
+}
@@ -24,9 +24,15 @@
 }
 
 .label {
-	color: #97989f;
+	color: #a6a5a5;
 	font-size: 14px;
 	margin-bottom: 8px;
+  width: 100%;
+
+	&_primary {
+		font-weight: 500;
+    margin-bottom: 10px;
+	}
 
 	&_error {
 		color: #97989f;
@@ -41,12 +47,24 @@
 	outline: none;
 	font-size: 16px;
 	width: 100%;
+	font-family: '__Raleway_9d395e' !important;
 
 	&:focus {
 		border: none;
 		outline: none;
 	}
 
+	&_primary {
+		padding: 16px 0;
+		color: var(--text-color-main) !important;
+		font-size: 19px;
+		font-weight: 400;
+
+		&::placeholder {
+			color: #97989f !important;
+		}
+	}
+
 	&_outline {
 		padding: 20px 0;
 		color: var(--text-color-main) !important;
@@ -64,11 +82,31 @@
 	}
 }
 
-
 .wrapper {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
+	transition: all 0.3 ease-in;
+
+	&_primary {
+		color: var(--text-color-main) !important;
+		padding: 0 14px;
+		background-color: var(--new-ui-main-color);
+		border: 2px solid #40404e;
+		border-radius: 13px;
+
+		&:hover {
+			border: 2px solid var(--air-color);
+		}
+
+		&::placeholder {
+			color: #a6a5a5 !important;
+		}
+
+		&:focus {
+			border: 2px solid var(--background-color-table);
+		}
+	}
 
 	&_outline {
 		color: var(--text-color-main) !important;
@@ -99,7 +137,6 @@
 }
 
 html[data-theme='light'] {
-	// Переопределяем стили для светлой темы
 	.wrapper_outline {
 		border: 2px solid #f2f2f8 !important;
 		&:focus {
@@ -107,6 +144,18 @@ html[data-theme='light'] {
 		}
 	}
 
+  .wrapper_primary{
+    border-color: #D4D7DB;
+
+    &:hover{
+      border-color: var(--air-color);
+    }
+  }
+
+  .label_primary{
+    color: #181C32;
+  }
+
 	.wrapper_error {
 		border-color: #ff76a7 !important;
 		&::placeholder {
@@ -1,59 +1,79 @@
 import { c } from '#/shared/lib/helpers'
 import { FieldError } from 'react-hook-form'
 import styles from './common-input.module.scss'
-import { useEffect } from 'react'
+import React, { ForwardedRef, forwardRef, useEffect } from 'react'
 
-export type InputVariant = 'outline'
+export type InputVariant = 'outline' | 'primary'
 
 export interface CommonInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 	children?: React.ReactNode
 	variant?: InputVariant
-	label?: string
+	label?: string | React.ReactNode
 	error?: FieldError
 	rightSlot?: React.ReactNode
+	trim?: boolean
 }
 
-export const CommonInput = ({ children, rightSlot, variant = 'outline', label, error, className, disabled, ...props }: CommonInputProps) => {
-	return (
-		<div className={styles.box}>
-			<div className={styles.header}>{label && <label className={c(styles.label, error && styles.label_error)}>{label}</label>}</div>
-			<div
-				className={c(
-					styles.wrapper,
-					styles[`wrapper_${variant}`],
-					disabled && styles[`wrapper_${variant}_disabled`],
-					error && styles.wrapper_error
-				)}
-			>
-				<input
-					{...props}
+export const CommonInput = forwardRef<HTMLInputElement, CommonInputProps>(
+	(
+		{
+			rightSlot,
+			label,
+			error,
+			className,
+			disabled,
+			trim = false,
+			variant = 'outline',
+			...props
+		},
+		ref
+	) => {
+		const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+			event.target.value = trim ? event.target.value.trim() : event.target.value
+		}
+
+		return (
+			<div className={styles.box}>
+				<div className={styles.header}>
+					{label && (
+						<label
+							className={c(
+								styles.label,
+								styles[`label_${variant}`],
+								error && styles.label_error
+							)}
+						>
+							{label}
+						</label>
+					)}
+				</div>
+				<div
 					className={c(
-						styles.input,
-						styles[`input_${variant}`],
-						disabled && styles[`input_${variant}_disabled`],
-						error && styles.input_error,
-						className
+						styles.wrapper,
+						styles[`wrapper_${variant}`],
+						disabled && styles[`wrapper_${variant}_disabled`],
+						error && styles.wrapper_error
 					)}
-					disabled={disabled}
-				/>
-				{rightSlot}
+				>
+					<input
+						ref={ref}
+						className={c(
+							styles.input,
+							styles[`input_${variant}`],
+							disabled && styles[`input_${variant}_disabled`],
+							error && styles.input_error,
+							className
+						)}
+						onChange={onChange}
+						disabled={disabled}
+						{...props}
+					/>
+					{rightSlot}
+				</div>
+				<p className={c(styles.header__error, error && styles.header__error_visible)}>
+					{error ? error?.message : ''}
+				</p>
 			</div>
-			<p className={c(styles.header__error, error && styles.header__error_visible)}>{error ? error?.message : ''}</p>
-		</div>
-	)
-}
-
-{
-	/* <div className="flex items-center justify-between px-[10px]">
-        {label && <label className="mb-[8px] inline-block font-medium">{label}</label>}
-        <p
-          className={c(
-            "translate-y-4 font-bold text-red-700",
-            "opacity-0 transition-all duration-300",
-            error && "!translate-y-0 !opacity-100"
-          )}
-        >
-          {error ? error?.message : ""}
-        </p>
-      </div> */
-}
+		)
+	}
+)
@@ -0,0 +1,120 @@
+.box {
+	display: flex;
+	flex-direction: column;
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+
+	&__error {
+		transform: translateY(16px);
+		color: #ff2372;
+		font-size: 13px;
+		opacity: 0;
+		transition: all 300ms;
+		margin-top: 8px;
+
+		&_visible {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+}
+
+.label {
+	color: #a6a5a5;
+	font-size: 14px;
+	margin-bottom: 8px;
+	width: 100%;
+
+	&_error {
+		color: #97989f;
+		font-size: 14px;
+		margin-bottom: 8px;
+	}
+}
+
+.textarea {
+	line-height: 28px;
+	padding: 0;
+	resize: none;
+	background-color: transparent;
+	border: none;
+	outline: none;
+	font-size: 16px;
+	width: 100%;
+	font-family: '__Raleway_9d395e' !important;
+
+	&:focus {
+		border: none;
+		outline: none;
+	}
+
+	&_default {
+		font-size: 19px;
+		color: var(--new-ui-text-color) !important;
+	}
+
+	&_error {
+		color: #ff2372 !important;
+		&::placeholder {
+			color: #ff2372 !important;
+		}
+	}
+}
+
+.wrapper {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	align-items: center;
+	transition: all 0.3 ease-in;
+
+	&_default {
+		color: var(--new-ui-text-color) !important;
+		padding: 16.5px 14px;
+		background-color: rgb(61, 61, 61);
+		border: 1px solid var(--border-color2);
+		border-radius: 8px;
+
+		&:hover {
+			border-color: var(--border-color);
+		}
+
+		&::placeholder {
+			color: var(--border-color2) !important;
+		}
+	}
+
+	&_error {
+		border-color: #ff2372;
+
+		&::placeholder {
+			color: #ff2372 !important;
+		}
+
+		&:focus {
+			border: 2px solid #ff2372;
+		}
+	}
+}
+
+html[data-theme='light'] {
+	.wrapper {
+		&_error {
+			border-color: #ff76a7 !important;
+			&::placeholder {
+				color: #ff76a7 !important;
+			}
+			&:focus {
+				border: 2px solid #ff76a7 !important;
+			}
+		}
+
+		&_default {
+			background-color: white;
+		}
+	}
+}
@@ -0,0 +1,55 @@
+import { c } from '#/shared/lib/helpers'
+import { FieldError } from 'react-hook-form'
+import styles from './common-textarea.module.scss'
+import React, { ForwardedRef, forwardRef, useEffect } from 'react'
+
+export type TextAreaVariant = 'default'
+
+export interface CommonTextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+	children?: React.ReactNode
+	variant?: TextAreaVariant
+	label?: string | React.ReactNode
+	error?: FieldError
+	buttomSlot?: React.ReactNode
+	trim?: boolean
+	showError?: boolean 
+}
+
+export const CommonTextArea = forwardRef<HTMLTextAreaElement, CommonTextAreaProps>(
+	({ showError = true, buttomSlot, label, error, className, disabled, trim = false, variant = 'default', ...props }, ref) => {
+		const onChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+			event.target.value = trim ? event.target.value.trim() : event.target.value
+		}
+
+		return (
+			<div className={c(styles.box, className)}>
+				<div className={styles.header}>
+					{label && <label className={c(styles.label, styles[`label_${variant}`], error && styles.label_error)}>{label}</label>}
+				</div>
+				<div
+					className={c(
+						styles.wrapper,
+						styles[`wrapper_${variant}`],
+						disabled && styles[`wrapper_${variant}_disabled`],
+						error && styles.wrapper_error
+					)}
+				>
+					<textarea
+						ref={ref}
+						className={c(
+							styles.textarea,
+							styles[`textarea_${variant}`],
+							disabled && styles[`textarea_${variant}_disabled`],
+							error && styles.textarea_error
+						)}
+						onChange={onChange}
+						disabled={disabled}
+						{...props}
+					/>
+					{buttomSlot}
+				</div>
+				{showError && <p className={c(styles.header__error, error && styles.header__error_visible)}>{error ? error?.message : ''}</p>}
+			</div>
+		)
+	}
+)
@@ -0,0 +1 @@
+export * from './common-textarea'
\ No newline at end of file
@@ -0,0 +1 @@
+export * from './ui'
@@ -1,300 +0,0 @@
-import * as React from 'react'
-import { ChangeEvent, useState } from 'react'
-import AttachFileIcon from '@mui/icons-material/AttachFile'
-import CloseIcon from '@mui/icons-material/Close'
-import { Box, Button, Modal, Stack, TextField, Typography } from '@mui/material'
-import axios from 'axios'
-import { useSession } from 'next-auth/react'
-
-import { useAppSelector } from '#/app/store/store'
-import { API_URL } from '#/shared/lib/constants'
-
-const style = {
-	position: 'absolute' as 'absolute',
-	top: '50%',
-	left: '50%',
-	transform: 'translate(-50%, -50%)',
-	width: 589,
-	height: 'auto',
-	bgcolor: 'background.paper',
-	borderRadius: 5,
-	boxShadow: 16,
-	p: 4,
-}
-const styleSend = {
-	position: 'absolute' as 'absolute',
-	top: '50%',
-	left: '50%',
-	transform: 'translate(-50%, -65%)',
-	width: 300,
-	height: 'auto',
-	bgcolor: 'background.paper',
-	borderRadius: 5,
-	boxShadow: 16,
-	p: 4,
-	textAlign: 'center',
-}
-
-const styleSendDark = {
-	position: 'absolute' as 'absolute',
-	top: '50%',
-	left: '50%',
-	transform: 'translate(-50%, -65%)',
-	width: 300,
-	height: 'auto',
-	bgcolor: '#2B2828',
-	borderRadius: 5,
-	boxShadow: 16,
-	p: 4,
-	textAlign: 'center',
-}
-
-const styleMobile = {
-	position: 'absolute' as 'absolute',
-	top: '50%',
-	left: '50%',
-	transform: 'translate(-50%, -50%)',
-	bgcolor: 'background.paper',
-	p: 4,
-	zIndex: 99,
-}
-
-interface IErrorModal {
-	open: boolean
-	handleClose: () => void
-	device: 'mobile' | 'desktop'
-}
-
-const ErrorModal: React.FC<IErrorModal> = ({ open, handleClose, device }) => {
-	const [errorMessage, setErrorMessage] = React.useState<string>('')
-
-	const [error, setError] = React.useState(false)
-
-	const [isSend, setIsSend] = React.useState(false)
-
-	const [file, setFile] = React.useState<File>()
-
-	const { data: session } = useSession()
-
-	const email = useAppSelector((state) => state.user.email)
-
-	const theme = useAppSelector((state) => state.theme.theme)
-
-	const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
-		if (e.target.files) {
-			if (4500000 > e.target.files[0].size) setFile(e.target.files[0])
-		}
-	}
-	const sendError = async () => {
-		if (errorMessage.trim() === '') {
-			setError(true)
-			setTimeout(() => setError(false), 3000)
-			return
-		}
-
-		let formData: any = new FormData()
-
-		formData.append('report_text', `${email}: ${errorMessage}`) //append the values with key, value pair
-		if (file) {
-			formData.append('images', file)
-		}
-
-		try {
-			const { status } = await axios.post(API_URL + '/reports/', formData, {
-				headers: {
-					'content-type': 'multipart/form-data ',
-					'content-length': file ? `${file.size}` : '',
-
-					Authorization: `Bearer ${session?.access}`,
-				},
-			})
-
-			if (status === 201) {
-				setErrorMessage('')
-				setIsSend(true)
-				setTimeout(() => {
-					setIsSend(false)
-					handleClose()
-				}, 4000)
-			}
-		} catch (err) {
-			setError(true)
-			setTimeout(() => setError(false), 3000)
-		}
-	}
-
-	return (
-		<Modal
-			sx={{
-				'.css-hqvkjc': {
-					backgroundColor: theme === 'light' ? '' : '#373737',
-					border: 'none',
-				},
-			}}
-			open={open}
-			onClose={handleClose}
-			aria-labelledby='modal-modal-title'
-			aria-describedby='modal-modal-description'
-		>
-			{isSend ? (
-				<Box sx={theme === 'light' ? styleSend : styleSendDark}>
-					<Typography sx={{ color: '#22B47F', fontSize: '23px' }}>Спасибо!</Typography>
-					<Typography
-						sx={{
-							fontSize: '17px',
-							marginTop: 2,
-							color: '#868686',
-						}}
-					>
-						Ваше сообщение направлено нашим специалистам. Ответ придет на почту, указанную при
-						регистрации
-					</Typography>
-				</Box>
-			) : (
-				<Box sx={device === 'desktop' ? style : styleMobile}>
-					<Typography
-						variant='h6'
-						component='h2'
-						sx={{
-							color: theme === 'light' ? '#5A5A5A' : '#E1E1E1',
-							lineHeight: '28.5px',
-							fontSize: '21px',
-							fontWeight: '600px',
-						}}
-					>
-						Сообщить об ошибке
-					</Typography>
-					<TextField
-						error={error}
-						id='outlined-multiline-static'
-						multiline
-						rows={4}
-						placeholder='Опишите детально возникшую проблему'
-						fullWidth
-						onChange={(evt) => setErrorMessage(evt.target.value)}
-						InputProps={{
-							startAdornment: (
-								<>
-									<Button
-										variant='contained'
-										component='label'
-										sx={{
-											position: 'absolute',
-											padding: 0,
-											bottom: 13,
-											left: -10,
-											backgroundColor: 'transparent',
-											border: 'none',
-											boxShadow: 'none',
-											margin: 0,
-											rotate: '30deg',
-											'&:hover': {
-												backgroundColor: 'transparent',
-												boxShadow: 'none',
-											},
-										}}
-									>
-										<AttachFileIcon
-											color='info'
-											sx={{
-												cursor: 'pointer',
-												color: '#868686',
-												width: 25,
-												height: 25,
-											}}
-										/>
-										<input
-											onChange={handleFileChange}
-											type='file'
-											hidden
-											accept='.jpg,.jpeg,.png'
-										/>
-									</Button>
-								</>
-							),
-						}}
-						sx={{
-							marginTop: 2.5,
-							marginBottom: 1.2,
-							fontSize: 13,
-							'& label': { color: '#8853FA' },
-							backgroundColor: theme === 'light' ? 'transparent' : '#3D3D3D',
-							'& .MuiOutlinedInput-input': {
-								color: theme === 'light' ? '#272727' : '#E1E1E1',
-							},
-						}}
-					/>
-					{file && (
-						<Box
-							sx={{
-								display: 'flex',
-								alignItems: 'center',
-							}}
-						>
-							<Typography sx={{ fontSize: '15px' }}>
-								Добавлено 1 изображение: {file.name}
-							</Typography>
-							<CloseIcon
-								onClick={() => setFile(undefined)}
-								sx={{
-									width: '18px',
-									height: '18px',
-									cursor: 'pointer',
-									marginLeft: '3px',
-									marginTop: '2px',
-								}}
-							/>
-						</Box>
-					)}
-
-					<Stack
-						direction={device === 'desktop' ? 'row' : 'column-reverse'}
-						justifyContent='flex-end'
-						alignItems='flex-end'
-						spacing={1}
-						sx={{ marginTop: 1.5 }}
-					>
-						<Button
-							fullWidth={device === 'mobile'}
-							onClick={() => handleClose()}
-							sx={{
-								color: theme === 'light' ? '#5A5A5A' : '#D0D0D0',
-								backgroundColor: theme === 'light' ? '#E8E8E8' : '#5D5A5A',
-								fontWeight: 500,
-								fontSize: '16px',
-								textTransform: 'none',
-								padding: '8px 12px',
-								borderRadius: '13px',
-								border: 'none',
-								cursor: 'pointer',
-								marginTop: device === 'desktop' ? 0 : 1,
-							}}
-						>
-							Отмена
-						</Button>
-						<Button
-							fullWidth={device === 'mobile'}
-							variant='contained'
-							onClick={sendError}
-							sx={{
-								color: 'white',
-								backgroundColor: '#7F7DF3',
-								fontWeight: 500,
-								fontSize: '16px',
-								textTransform: 'none',
-								padding: '7px 12px',
-								borderRadius: '13px',
-								border: 'none',
-								cursor: 'pointer',
-							}}
-						>
-							Отправить
-						</Button>
-					</Stack>
-				</Box>
-			)}
-		</Modal>
-	)
-}
-
-export default ErrorModal
@@ -24,7 +24,13 @@ export const Error: React.FC<IError> = ({ handleClose }) => {
 
 	return (
 		<CSSTransition nodeRef={nodeRef} in={isOpened} timeout={400} unmountOnExit classNames='my-node'>
-			<Snackbar anchorOrigin={{ vertical: 'top', horizontal: 'right' }} open={isOpened} autoHideDuration={6000} onClose={handleClose}>
+			<Snackbar
+				style={{ zIndex: 100000 }}
+				anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+				open={isOpened}
+				autoHideDuration={6000}
+				onClose={handleClose}
+			>
 				{variant == 'error' ? (
 					<Alert
 						ref={nodeRef}
@@ -0,0 +1,7 @@
+import '@testing-library/jest-dom'
+
+describe('Test', () => {
+	it('renders a heading', () => {
+		// throw new Error('test')
+	})
+})
@@ -111,9 +111,6 @@
 	}
 }
 
-.icon {
-}
-
 .blocked {
 	display: flex;
 	align-items: center;
@@ -77,7 +77,7 @@ export const SecurityList = ({
 			return [data]
 		})
 
-		showMessage('Пользователь успешно приглашен!')
+		showMessage('Пользователь успешно приглашен!', 'success')
 	}
 
 	const [search, setSearch] = useState('')
@@ -99,7 +99,7 @@ export const SecurityList = ({
 			})
 		)
 		setCurrentPerson(null)
-		showMessage(`Лимит пользователя ${email} успешно изменён!`)
+		showMessage(`Лимит пользователя ${email} успешно изменён!`, 'success')
 	}
 
 	useEffect(() => {
@@ -281,7 +281,7 @@ export const InviteSecurityModal: FC<InviteModalProps> = ({ open, onClose, showN
 		const res = await invitePerson(role, data.limit, data.email, group && group[0], session?.access)
 
 		if (res === null) {
-			showMessage('Что-то пошло не так')
+			showMessage('Что-то пошло не так', 'error')
 			setIsLoading(false)
 			return
 		}
@@ -293,7 +293,7 @@ export const InviteSecurityModal: FC<InviteModalProps> = ({ open, onClose, showN
 		showNewPersons(res.data)
 	}
 	const checkError: SubmitErrorHandler<IEmailForms> = (data) => {
-		showMessage(Object.values(data)[0].message || 'Неверные данные')
+		showMessage(Object.values(data)[0].message || 'Неверные данные', 'error')
 	}
 
 	const handleEmailChange = (event: any) => {
@@ -0,0 +1,33 @@
+.loading {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100dvh;
+
+	&__loader {
+		margin-bottom: 20px;
+	}
+
+	&__box {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		max-width: 300px;
+
+		p {
+			font-weight: 600;
+			font-size: 26px;
+			color: var(--air-color);
+      letter-spacing: 0.06rem;
+      margin-bottom: 5px;
+		}
+
+		span {
+			font-weight: 500;
+			text-align: center;
+			font-size: 14px;
+			color: var(--new-ui-gray-color);
+			margin-bottom: 20px;
+		}
+	}
+}
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { Box } from '@mui/material'
 import { ThemeProvider } from '@mui/material/styles'
 import Head from 'next/head'
@@ -23,8 +23,10 @@ import { LayoutProps } from '../types'
 import { change } from '#/features/pending'
 import { ChangePasswordPlate } from '#/features/change-password-corp'
 import { ResendInvationPlate } from '#/features/resend-invation-corp '
-
-const freeRoutes = ['/login', '/register', '/reset', '/change-password']
+import { ErrorReportPlate } from '#/features/error-report'
+import { CSSTransition, SwitchTransition } from 'react-transition-group'
+import { CommonButton } from '#/shared/ui/button'
+import styles from './default.module.scss'
 
 export const Layout: React.FC<LayoutProps> = ({ children, titlePage, title = titlePage, isLoader, device = getDeviceType() }) => {
 	const { data: sessionData } = useSession()
@@ -45,6 +47,11 @@ export const Layout: React.FC<LayoutProps> = ({ children, titlePage, title = tit
 
 	const { push } = useRouter()
 
+	function logout() {
+		signOut()
+		push('/login')
+	}
+
 	async function getUserData(access: string) {
 		await dispatch(getUserBalance(access))
 		await dispatch(getAllInfo(access))
@@ -58,10 +65,16 @@ export const Layout: React.FC<LayoutProps> = ({ children, titlePage, title = tit
 		}
 	}, [meStatus])
 
+	useEffect(() => {
+		if (!data) return
+
+		if (!data.user || Object.values(data.user).length === 0 || !data.access || !data.refresh) logout()
+	}, [data])
+
 	useEffect(() => {
 		if (!data) return
 		getUserData(data.access)
-	}, [data?.access])
+	}, [data])
 
 	useEffect(() => {
 		if ((sessionData && !sessionStorage.getItem('firstRender')) || (sessionData && !localStorage.getItem('global_settings'))) {
@@ -93,11 +106,51 @@ export const Layout: React.FC<LayoutProps> = ({ children, titlePage, title = tit
 		}
 	}, [appState.settings.state])
 
+	const [requestDelay, setRequestDelay] = useState(false)
+
+	const transitionRef = useRef(null)
+
+	useEffect(() => {
+		setTimeout(() => {
+			setRequestDelay(true)
+
+			if (!sessionData) return Sentry.captureMessage(`long time loading - session not defined`)
+
+			const { user } = sessionData
+
+			Sentry.captureMessage(`long time loading 
+        - ${user ? user.email : 'unknown email'}
+         - ${new Date().toDateString()} 
+         - ${JSON.stringify(sessionData)}`)
+		}, 5000)
+	}, [])
+
 	if (userLoading || isLoader || status === 'loading') {
 		return (
-			<Box width='100vw' height='100vh' display='flex' alignItems='center' justifyContent='center'>
-				<Loader size={50} />
-			</Box>
+			<SwitchTransition>
+				<CSSTransition
+					nodeRef={transitionRef}
+					key={requestDelay ? 'button' : 'loader'}
+					timeout={400}
+					classNames='my-node'
+					in={requestDelay}
+				>
+					<div ref={transitionRef} className={styles.loading}>
+						{requestDelay ? (
+							<div className={styles.loading__box}>
+								<Loader className={styles.loading__loader} size={50} />
+								<p>Долгая загрузка</p>
+								<span>возможно нужно перезайти</span>
+								<CommonButton onClick={logout} variant='primary'>
+									Выйти
+								</CommonButton>
+							</div>
+						) : (
+							<Loader size={50} />
+						)}
+					</div>
+				</CSSTransition>
+			</SwitchTransition>
 		)
 	}
 
@@ -152,6 +205,7 @@ export const Layout: React.FC<LayoutProps> = ({ children, titlePage, title = tit
 
 				<ChangePasswordPlate />
 				<ResendInvationPlate />
+				<ErrorReportPlate />
 			</Box>
 		</>
 	)
@@ -13,6 +13,7 @@ import { useAppDispatch, useAppSelector } from '#/app/store/store'
 import { AccountMenu } from '#/shared'
 import { NotificationMenu } from '#/shared'
 import { TooltipFreeTokens } from '#/shared'
+import { ERROR_REPORT, getModalById } from '#/features/modals'
 
 function a11yProps(index: number) {
 	return {
@@ -73,14 +74,10 @@ export const MainMenu: React.FC = memo(() => {
 
 	const email = useAppSelector((state) => state.user.email)
 
-	const [openErrorModal, setOpenErrorModal] = React.useState(false)
-	const handleOpenErrorModal = () => setOpenErrorModal(true)
-	const handleCloseErrorModal = () => setOpenErrorModal(false)
+	const errorReport = getModalById(ERROR_REPORT)
 
 	const selectPage = pathname === '/' ? 0 : pathname === '/service-keys' ? 1 : pathname === '/admin' ? 2 : 3
 
-	const ErrorModalLazy = dynamic(() => import('#/shared/ui/error-modal'), { ssr: false })
-
 	return (
 		<Box>
 			<Stack direction='row' spacing={1} alignItems='center' justifyContent='space-between'>
@@ -173,7 +170,9 @@ export const MainMenu: React.FC = memo(() => {
 				<Stack direction='row' spacing={1}>
 					{status === 'authenticated' && (
 						<Image
-							onClick={handleOpenErrorModal}
+							onClick={() => {
+								errorReport.setState(true)
+							}}
 							priority
 							style={{
 								marginTop: 12,
@@ -186,13 +185,6 @@ export const MainMenu: React.FC = memo(() => {
 							alt='Error'
 						/>
 					)}
-					{openErrorModal && (
-						<ErrorModalLazy
-							device={'desktop'}
-							open={openErrorModal}
-							handleClose={handleCloseErrorModal}
-						/>
-					)}
 
 					<Image
 						style={{
@@ -17,10 +17,7 @@ export const useNavigationSearchModel = (links: NavigationSearchLink[]) => {
 		return links.filter(
 			(el) =>
 				el.label.toLowerCase().includes(search.toLowerCase()) ||
-				(el.alternative_labels &&
-					el.alternative_labels.some((el) =>
-						el.toLowerCase().includes(search.toLowerCase())
-					))
+				(el.alternative_labels && el.alternative_labels.some((el) => el.toLowerCase().includes(search.toLowerCase())))
 		)
 	}, [search, links])
 
@@ -34,7 +31,7 @@ export const useNavigationSearchModel = (links: NavigationSearchLink[]) => {
 			return
 		}
 
-		if ((e.key === 'f' || e.key === 'F') && (e.ctrlKey || e.metaKey)) {
+		if (e.code === 'KeyF' && (e.ctrlKey || e.metaKey)) {
 			e.preventDefault()
 			;(searchRef.current as HTMLInputElement).focus()
 			setSearchOpen(true)
@@ -26,6 +26,7 @@ import { Device } from '#/shared/lib/types/entities'
 
 import '../styles/styles.module.css'
 import styles from '../styles/styles.module.css'
+import { ERROR_REPORT, getModalById } from '#/features/modals'
 
 export const menuListTop = [
 	{ title: 'Дашборд', link: '/', icon: '/svg/side-menu/market', activeList: [] },
@@ -122,13 +123,7 @@ export const SideMenu = ({ device, sidemenuDefaultOpen }: { device: Device; side
 		setOpen(false)
 	}
 
-	const ErrorModalLazy = dynamic(() => import('#/shared/ui/error-modal'), { ssr: false })
-
-	const [openErrorModal, setOpenErrorModal] = React.useState(false)
-
-	const handleOpenErrorModal = () => setOpenErrorModal(true)
-
-	const handleCloseErrorModal = () => setOpenErrorModal(false)
+	const error_report = getModalById(ERROR_REPORT)
 
 	const match = useMediaQuery('(min-height:800px)')
 
@@ -272,7 +267,9 @@ export const SideMenu = ({ device, sidemenuDefaultOpen }: { device: Device; side
 						</Box>
 					</List>
 					<Box sx={{ marginTop: 1.5 }}>
-						<Box onClick={handleOpenErrorModal}>
+						<Box onClick={() => {
+							error_report.setState(true)
+						}}>
 							<MenuItem
 								open={open}
 								pathname={pathname}
@@ -293,9 +290,6 @@ export const SideMenu = ({ device, sidemenuDefaultOpen }: { device: Device; side
 					</Box>
 				</>
 			)}
-			{openErrorModal && (
-				<ErrorModalLazy device={'desktop'} open={openErrorModal} handleClose={handleCloseErrorModal} />
-			)}
 			<Box sx={{ position: 'absolute', bottom: 5, width: '100%', left: open ? 25 : 0 }}>
 				{open && (
 					<Box sx={{ width: 'fit-content' }}>
@@ -15,6 +15,8 @@ declare module "*.svg?react" {
   export default content;
 }
 
+
+
 declare module "*.svg?url" {
   const content: {
     blurHeight: number;
@@ -0,0 +1,17 @@
+import type { Config } from 'jest'
+import nextJest from 'next/jest.js'
+
+const createJestConfig = nextJest({
+	dir: './',
+})
+
+const config: Config = {
+	coverageProvider: 'v8',
+	testEnvironment: 'jsdom',
+	moduleNameMapper: { 
+		'^#/(.*)$': '<rootDir>/src/$1',
+		'\\.(svg)': '<rootDir>/__mocks__/svg.ts',
+	},
+}
+
+export default createJestConfig(config)
@@ -16,7 +16,9 @@
 		"precommit": "lint-staged",
 		"prepare": "husky install",
 		"tunnel": "vk-tunnel --insecure=1 --http-protocol=https --ws-protocol=wss --host=0.0.0.0 --port=3000",
-		"export": "next export"
+		"export": "next export",
+		"test": "jest",
+		"test:watch": "jest --watch"
 	},
 	"engines": {
 		"node": ">=12.0.0"
@@ -43,6 +45,7 @@
 		"@reduxjs/toolkit": "^1.9.5",
 		"@sentry/nextjs": "^9.12.0",
 		"@sentry/webpack-plugin": "^3.3.1",
+		"@testing-library/user-event": "^14.6.1",
 		"@types/cookie": "^0.5.1",
 		"@types/intro.js": "^5.1.1",
 		"@types/lodash": "^4.14.195",
@@ -50,7 +53,7 @@
 		"@types/react": "18.0.28",
 		"@types/react-dom": "18.0.11",
 		"@types/react-syntax-highlighter": "^15.5.7",
-		"axios": "^0.24.0",
+		"axios": "^1.7.9",
 		"base64-encode-file": "^1.0.7",
 		"buffer": "^6.0.3",
 		"chart.js": "^4.4.0",
@@ -92,13 +95,21 @@
 	},
 	"devDependencies": {
 		"@svgr/webpack": "^8.1.0",
+		"@testing-library/dom": "^10.4.0",
+		"@testing-library/jest-dom": "^6.6.3",
+		"@testing-library/react": "^16.3.0",
 		"@types/intro.js": "^5.1.1",
+		"@types/jest": "^29.5.14",
 		"@types/lodash": "^4.14.195",
 		"@types/react-draft-wysiwyg": "^1.13.8",
 		"@types/react-syntax-highlighter": "^15.5.7",
+		"cross-fetch": "^4.1.0",
 		"eslint-config-prettier": "^8.8.0",
+		"jest": "^29.7.0",
+		"jest-environment-jsdom": "^29.7.0",
 		"lint-staged": "^13.2.2",
 		"prettier": "^2.8.8",
+		"ts-node": "^10.9.2",
 		"typescript": "5.1.3"
 	},
 	"resolutions": {