From c5d9f5c6d68ea8f73db00b4c95d3767349618efc Mon Sep 17 00:00:00 2001
From: Olek <149747215+Primis1@users.noreply.github.com>
Date: Mon, 26 Aug 2024 22:52:14 -0400
Subject: [PATCH 01/19] add init forms

---
 .../ui/profile-my-projects-page.tsx           |  9 ++-
 src/utils/constants.ts                        |  8 ++-
 .../ui/manage-project-setting.module.scss     | 51 ++++++++++++++++
 .../ui/manage-project-setting.tsx             | 60 +++++++++++++++++++
 .../manage-specialist.specialist.module.scss  | 19 ++++++
 .../ui/manage-specialists.tsx                 |  8 +++
 6 files changed, 151 insertions(+), 4 deletions(-)
 create mode 100644 src/widgets/managa-project-settings/ui/manage-project-setting.module.scss
 create mode 100644 src/widgets/managa-project-settings/ui/manage-project-setting.tsx
 create mode 100644 src/widgets/manage-specialists/ui/manage-specialist.specialist.module.scss
 create mode 100644 src/widgets/manage-specialists/ui/manage-specialists.tsx

diff --git a/src/pages/profile-my-projects-page/ui/profile-my-projects-page.tsx b/src/pages/profile-my-projects-page/ui/profile-my-projects-page.tsx
index e7bd60e7..ca7d7ba4 100644
--- a/src/pages/profile-my-projects-page/ui/profile-my-projects-page.tsx
+++ b/src/pages/profile-my-projects-page/ui/profile-my-projects-page.tsx
@@ -1,9 +1,12 @@
+import { ManageProjectsSetting } from '@/widgets/managa-project-settings/ui/manage-project-setting';
+import { ManageSpecialists } from '@/widgets/manage-specialists/ui/manage-specialists';
 import React from 'react';
 
 export const ProfileMyProjectsPage = () => {
 	return (
-		<div>
-			<div>Мои проекты</div>
-		</div>
+		<>
+			<ManageProjectsSetting />
+			<ManageSpecialists />
+		</>
 	);
 };
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 5592a7d4..c3f5c128 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -17,6 +17,12 @@ export const EMPLOYMENT = [
 	},
 ];
 
+export const DEVELOPING = [
+	{ id: 1, field: 'Desktop' },
+	{ id: 2, field: 'Mobile' },
+	{ id: 3, field: 'Web' },
+];
+
 export const LEVEL = [
 	{
 		label: 'Junior',
@@ -49,4 +55,4 @@ export const CONTACTS = [
 		label: 'phone',
 		value: 'phone',
 	},
-];
\ No newline at end of file
+];
diff --git a/src/widgets/managa-project-settings/ui/manage-project-setting.module.scss b/src/widgets/managa-project-settings/ui/manage-project-setting.module.scss
new file mode 100644
index 00000000..59fc4aa8
--- /dev/null
+++ b/src/widgets/managa-project-settings/ui/manage-project-setting.module.scss
@@ -0,0 +1,51 @@
+@import '@/shared/style/variables';
+
+.container {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	row-gap: 20px;
+	width: 816px;
+	padding: 32px;
+	background-color: $--bg-primary;
+	border: 1px solid $--border-default;
+	border-radius: 12px;
+
+	@media screen and (max-width: 779px) {
+		gap: 13px;
+		max-width: 779px;
+	}
+}
+
+.input_list {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+
+	&_title {
+		margin: 0;
+		font-family: $--open-sans-font;
+		font-weight: 700;
+		font-size: 16px;
+		font-style: normal;
+		line-height: 150%;
+	}
+}
+.directions,
+.employment {
+	width: 100%;
+
+	&_list {
+		width: 100%;
+		padding: 0;
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		gap: 18px;
+	}
+
+	&_item {
+		list-style: none;
+		padding: 0;
+	}
+}
diff --git a/src/widgets/managa-project-settings/ui/manage-project-setting.tsx b/src/widgets/managa-project-settings/ui/manage-project-setting.tsx
new file mode 100644
index 00000000..4d3fbb0f
--- /dev/null
+++ b/src/widgets/managa-project-settings/ui/manage-project-setting.tsx
@@ -0,0 +1,60 @@
+'use client';
+import React from 'react';
+import styles from './manage-project-setting.module.scss';
+import { CheckboxAndRadio, Form, Input } from '@/shared/ui';
+import { TextEditor } from '@/shared/ui/text-editor/text-editor';
+import { DEVELOPING, EMPLOYMENT} from '@/utils/constants';
+
+export const ManageProjectsSetting = () => {
+	return (
+		<Form className={styles.container} onSubmit={undefined}>
+			<div className={styles.input_list}>
+				<Input
+					name="name"
+					labelName="Название проекта"
+					className={styles.input_extra}
+				/>
+				<TextEditor
+					labelName={'Описание проекта'}
+					desc={
+						'Расскажите о проекте и его цели используя не более 750 символов'
+					}
+				/>
+			</div>
+
+			<div className={styles.directions}>
+				<h3 className={styles.input_list_title}>Направление разработки</h3>
+				<ul className={styles.directions_list}>
+					{DEVELOPING?.map((profession) => (
+						<li className={styles.directions_item} key={profession.id}>
+							<CheckboxAndRadio
+								labelName={profession.field}
+								label={`professions`}
+								type={'checkbox'}
+								id={`professions_${profession.id}`}
+								name={'professions'}
+							/>
+						</li>
+					))}
+				</ul>
+			</div>
+
+			<div className={styles.employment}>
+				<h3 className={styles.input_list_title}>Занятость</h3>
+				<ul className={styles.employment_list}>
+					{EMPLOYMENT.map((busyness) => (
+						<li className={styles.directions_item} key={busyness.id}>
+							<CheckboxAndRadio
+								labelName={busyness.name}
+								label={`busyness`}
+								type={'checkbox'}
+								id={`busyness_${busyness.id}.`}
+								name={'busyness'}
+							/>
+						</li>
+					))}
+				</ul>
+			</div>
+		</Form>
+	);
+};
diff --git a/src/widgets/manage-specialists/ui/manage-specialist.specialist.module.scss b/src/widgets/manage-specialists/ui/manage-specialist.specialist.module.scss
new file mode 100644
index 00000000..45d76872
--- /dev/null
+++ b/src/widgets/manage-specialists/ui/manage-specialist.specialist.module.scss
@@ -0,0 +1,19 @@
+@import '@/shared/style/variables';
+
+.container {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	row-gap: 20px;
+	width: 816px;
+	padding: 32px;
+	background-color: $--bg-primary;
+	border: 1px solid $--border-default;
+	border-radius: 12px;
+
+	@media screen and (max-width: 779px) {
+		gap: 13px;
+		max-width: 779px;
+	}
+}
+
diff --git a/src/widgets/manage-specialists/ui/manage-specialists.tsx b/src/widgets/manage-specialists/ui/manage-specialists.tsx
new file mode 100644
index 00000000..81d4ccfa
--- /dev/null
+++ b/src/widgets/manage-specialists/ui/manage-specialists.tsx
@@ -0,0 +1,8 @@
+'use client';
+import React from 'react';
+import styles from './manage-specialist.specialist.module.scss';
+import { Form } from '@/shared/ui';
+
+export const ManageSpecialists = () => {
+	return <Form className={styles.container} onSubmit={undefined}><></></Form>;
+};

From af6c95992a13daca00a6268a039bbad8eeeb4771 Mon Sep 17 00:00:00 2001
From: Olek <149747215+Primis1@users.noreply.github.com>
Date: Thu, 5 Sep 2024 07:54:17 -0400
Subject: [PATCH 02/19] add: managa project settings form layout, fix:
 specialist detailed card

---
 .../ui/manage-project-setting.module.scss     |  81 ++++++++++
 .../ui/manage-project-setting.tsx             | 153 +++++++++++++-----
 .../specialist-card/ui/specialist-card.tsx    |  34 ++--
 .../ui/detailed-specialist-card.tsx           |   4 +-
 4 files changed, 211 insertions(+), 61 deletions(-)

diff --git a/src/widgets/managa-project-settings/ui/manage-project-setting.module.scss b/src/widgets/managa-project-settings/ui/manage-project-setting.module.scss
index 59fc4aa8..7460035a 100644
--- a/src/widgets/managa-project-settings/ui/manage-project-setting.module.scss
+++ b/src/widgets/managa-project-settings/ui/manage-project-setting.module.scss
@@ -1,3 +1,4 @@
+@import '@/shared/assets/fonts/fonts.css';
 @import '@/shared/style/variables';
 
 .container {
@@ -32,6 +33,17 @@
 		line-height: 150%;
 	}
 }
+
+.input_extra {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	font-family: $--open-sans-font;
+	font-weight: 700;
+	margin-top: 8px;
+}
+
 .directions,
 .employment {
 	width: 100%;
@@ -49,3 +61,72 @@
 		padding: 0;
 	}
 }
+
+.specialists {
+	width: 100%;
+	font-family: $--open-sans-font;
+	font-weight: 400;
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
+
+	&_toggle {
+		display: flex;
+		gap: 16px;
+		align-items: center;
+	}
+
+	&_buttons {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+
+		margin-bottom: 32px;
+	}
+}
+
+.dates {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+
+	&_inputs {
+		//		margin: 0 0 16px 0;
+		display: flex;
+		gap: 8px;
+	}
+
+	&_input {
+		width: 100%;
+	}
+
+	&_text {
+		margin: 0 0 8px 0;
+		font-family: $--open-sans-font;
+		font-size: 16px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 24px; /* 150% */
+		letter-spacing: 0.25px;
+	}
+}
+
+.contacts {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+
+	&_selects {
+		display: grid;
+		gap: 8px;
+		grid-template-columns: 228px auto;
+		height: 70px;
+	}
+}
+
+.buttons {
+	display: flex;
+	gap: 16px;
+}
diff --git a/src/widgets/managa-project-settings/ui/manage-project-setting.tsx b/src/widgets/managa-project-settings/ui/manage-project-setting.tsx
index 4d3fbb0f..c36910d8 100644
--- a/src/widgets/managa-project-settings/ui/manage-project-setting.tsx
+++ b/src/widgets/managa-project-settings/ui/manage-project-setting.tsx
@@ -1,59 +1,128 @@
 'use client';
 import React from 'react';
 import styles from './manage-project-setting.module.scss';
-import { CheckboxAndRadio, Form, Input } from '@/shared/ui';
+import { CheckboxAndRadio, Form, Input, MainButton } from '@/shared/ui';
 import { TextEditor } from '@/shared/ui/text-editor/text-editor';
-import { DEVELOPING, EMPLOYMENT} from '@/utils/constants';
+import { CONTACTS, DEVELOPING, EMPLOYMENT } from '@/utils/constants';
+import { DatePickerRHF } from '@/shared/ui/date-picker-rhf/date-picker-rhf';
+import { useForm } from 'react-hook-form';
+import { SingleSelectInput } from '@/shared/ui/single-select-input/single-select-input';
+import { Plus } from 'lucide-react';
 
 export const ManageProjectsSetting = () => {
+	const { control } = useForm();
 	return (
 		<Form className={styles.container} onSubmit={undefined}>
-			<div className={styles.input_list}>
+			<div className={styles.specialists}>
+				<div className={styles.input_list}>
+					<Input
+						name="name"
+						labelName="Название проекта"
+						className={styles.input_extra}
+					/>
+					<TextEditor
+						labelName={'Описание проекта'}
+						desc={
+							'Расскажите о проекте и его цели используя не более 750 символов'
+						}
+					/>
+				</div>
+
+				<div className={styles.directions}>
+					<h3 className={styles.input_list_title}>Направление разработки</h3>
+					<ul className={styles.directions_list}>
+						{DEVELOPING?.map((profession) => (
+							<li className={styles.directions_item} key={profession.id}>
+								<CheckboxAndRadio
+									labelName={profession.field}
+									label={`professions`}
+									type={'checkbox'}
+									id={`professions_${profession.id}`}
+									name={'professions'}
+								/>
+							</li>
+						))}
+					</ul>
+				</div>
+
+				<div className={styles.employment}>
+					<h3 className={styles.input_list_title}>Занятость</h3>
+					<ul className={styles.employment_list}>
+						{EMPLOYMENT.map((busyness) => (
+							<li className={styles.directions_item} key={busyness.id}>
+								<CheckboxAndRadio
+									labelName={busyness.name}
+									label={`busyness`}
+									type={'checkbox'}
+									id={`busyness_${busyness.id}.`}
+									name={'busyness'}
+								/>
+							</li>
+						))}
+					</ul>
+				</div>
+				<div className={styles.dates}>
+					<h3 className={styles.input_list_title}>Сроки проекты</h3>
+					<div className={styles.dates_inputs}>
+						<div className={styles.dates_input}>
+							<p className={styles.dates_text}>Начало</p>
+							<DatePickerRHF control={control} name="start" />
+						</div>
+						<div className={styles.dates_input}>
+							<p className={styles.dates_text}>Окончание</p>
+							<DatePickerRHF control={control} name="end" />
+						</div>
+					</div>
+				</div>
+
+				<div className={styles.contacts}>
+					<h3 className={styles.input_list_title}>Контакты для связи</h3>
+					<div className={styles.contacts_selects}>
+						<SingleSelectInput
+							name={`project_specialists`}
+							onChange={() => {}}
+							options={CONTACTS}
+							description={'Выберите ресурс'}
+						/>
+						<Input labelName="" name="name" className={styles.input_extra} />
+					</div>
+				</div>
+
+				<div className={styles.specialists_buttons}>
+					<MainButton
+						variant="secondary"
+						width="regular"
+						IconLeft={Plus}
+						onClick={() => ({})}>
+						Добавить
+					</MainButton>
+					<MainButton variant="trivial" width="regular" onClick={() => ({})}>
+						Сбросить
+					</MainButton>
+				</div>
+
 				<Input
-					name="name"
-					labelName="Название проекта"
+					name="link"
+					labelName="Ссылка на проект"
 					className={styles.input_extra}
-				/>
-				<TextEditor
-					labelName={'Описание проекта'}
-					desc={
-						'Расскажите о проекте и его цели используя не более 750 символов'
+					description={true}
+					descrText={
+						'Добавьте ссылку на ваш проект, например: GitHub, приложение, веб страница и др.'
 					}
 				/>
-			</div>
 
-			<div className={styles.directions}>
-				<h3 className={styles.input_list_title}>Направление разработки</h3>
-				<ul className={styles.directions_list}>
-					{DEVELOPING?.map((profession) => (
-						<li className={styles.directions_item} key={profession.id}>
-							<CheckboxAndRadio
-								labelName={profession.field}
-								label={`professions`}
-								type={'checkbox'}
-								id={`professions_${profession.id}`}
-								name={'professions'}
-							/>
-						</li>
-					))}
-				</ul>
-			</div>
+				<MainButton variant={'trivial'} width={'min'} disabled={false}>
+					{'Очистить'}
+				</MainButton>
 
-			<div className={styles.employment}>
-				<h3 className={styles.input_list_title}>Занятость</h3>
-				<ul className={styles.employment_list}>
-					{EMPLOYMENT.map((busyness) => (
-						<li className={styles.directions_item} key={busyness.id}>
-							<CheckboxAndRadio
-								labelName={busyness.name}
-								label={`busyness`}
-								type={'checkbox'}
-								id={`busyness_${busyness.id}.`}
-								name={'busyness'}
-							/>
-						</li>
-					))}
-				</ul>
+				<div className={styles.buttons}>
+					<MainButton variant={'primary'} width={'regular'} disabled={false}>
+						{'Опубликовать'}
+					</MainButton>
+					<MainButton variant={'secondary'} width={'regular'} disabled={false}>
+						{'Сохранить как черновик'}
+					</MainButton>
+				</div>
 			</div>
 		</Form>
 	);
diff --git a/src/widgets/specialist-card/ui/specialist-card.tsx b/src/widgets/specialist-card/ui/specialist-card.tsx
index aedade26..2cebc8a6 100644
--- a/src/widgets/specialist-card/ui/specialist-card.tsx
+++ b/src/widgets/specialist-card/ui/specialist-card.tsx
@@ -64,15 +64,15 @@ export const SpecialistCard: FC<SpecialistCardType> = ({
 							)}
 						</div>
 					</div>
-						<ul className={styles.info__skillsList}>
-							{specialists[0]?.skills.map((skill) => {
-								return (
-									<li className={styles.info__skill} key={skill.id}>
-										{skill.name}
-									</li>
-								);
-							})}
-						</ul>
+					<ul className={styles.info__skillsList}>
+						{specialists[0]?.skills.map((skill) => {
+							return (
+								<li className={styles.info__skill} key={skill.id}>
+									{skill.name}
+								</li>
+							);
+						})}
+					</ul>
 					<div className={styles.info__role}>
 						<div>
 							{specialists[1] &&
@@ -87,14 +87,14 @@ export const SpecialistCard: FC<SpecialistCardType> = ({
 						</div>
 					</div>
 					<ul className={styles.info__skillsList}>
-									{specialists[1]?.skills?.map((skill) => {
-										return (
-											<li className={styles.info__skill} key={skill.id}>
-												{skill.name}
-											</li>
-										);
-									})}
-								</ul>
+						{specialists[1]?.skills?.map((skill) => {
+							return (
+								<li className={styles.info__skill} key={skill.id}>
+									{skill.name}
+								</li>
+							);
+						})}
+					</ul>
 				</Link>
 				<InviteSpecialist />
 			</div>
diff --git a/src/widgets/specialist-detailed-card/ui/detailed-specialist-card.tsx b/src/widgets/specialist-detailed-card/ui/detailed-specialist-card.tsx
index 8acc8702..c2fd4795 100644
--- a/src/widgets/specialist-detailed-card/ui/detailed-specialist-card.tsx
+++ b/src/widgets/specialist-detailed-card/ui/detailed-specialist-card.tsx
@@ -121,7 +121,7 @@ export const DetailedSpecialistCard: FC<DetailedSpecialistCardTypes> = ({
 							)}
 						</div>
 					</div>
-					<ul className={styles.info__skillsList}>
+					{specialists[1] && <ul className={styles.info__skillsList}>
 						{specialists[1]?.skills.map((skill) => {
 							return (
 								<li className={styles.info__skill} key={skill.id}>
@@ -130,7 +130,7 @@ export const DetailedSpecialistCard: FC<DetailedSpecialistCardTypes> = ({
 							);
 						})}
 					</ul>
-					<div className={styles.info__wrapper}>
+					}<div className={styles.info__wrapper}>
 						<h3 className={styles.info__title}>Ссылка на портфолио</h3>
 						<a className={styles.info__contacts} href={portfolioLink}>
 							{`${properyCheck(portfolioLink)}`}

From 5d750d260113710b819d0b28452e1daa3427cc2c Mon Sep 17 00:00:00 2001
From: Olek <149747215+Primis1@users.noreply.github.com>
Date: Sat, 7 Sep 2024 19:16:10 -0400
Subject: [PATCH 03/19] add; layout for two forms, querries for skills and
 professions

---
 .../form-create-project-card/index.ts         |   1 +
 .../ui/form-create-project-card.module.scss   |  47 ++++++++
 .../ui/form-create-project-card.tsx           | 105 +++++++++++++++++
 .../form-create-project-card/ui/types.ts      |   1 +
 src/services/AttributesService.ts             |  27 +++++
 src/shared/ui/input/input.module.scss         |   1 -
 src/shared/ui/input/input.tsx                 |   2 +-
 .../ui/manage-project-setting.module.scss     |  30 ++---
 .../ui/manage-project-setting.tsx             |   1 +
 .../manage-specialist.specialist.module.scss  | 111 ++++++++++++++++++
 .../ui/manage-specialists.tsx                 |  73 +++++++++++-
 11 files changed, 379 insertions(+), 20 deletions(-)
 create mode 100644 src/entities/form-create-project-card/index.ts
 create mode 100644 src/entities/form-create-project-card/ui/form-create-project-card.module.scss
 create mode 100644 src/entities/form-create-project-card/ui/form-create-project-card.tsx
 create mode 100644 src/entities/form-create-project-card/ui/types.ts
 create mode 100644 src/services/AttributesService.ts

diff --git a/src/entities/form-create-project-card/index.ts b/src/entities/form-create-project-card/index.ts
new file mode 100644
index 00000000..555582c4
--- /dev/null
+++ b/src/entities/form-create-project-card/index.ts
@@ -0,0 +1 @@
+export { FormCreateProjectCard } from './ui/form-create-project-card';
diff --git a/src/entities/form-create-project-card/ui/form-create-project-card.module.scss b/src/entities/form-create-project-card/ui/form-create-project-card.module.scss
new file mode 100644
index 00000000..4c3abe43
--- /dev/null
+++ b/src/entities/form-create-project-card/ui/form-create-project-card.module.scss
@@ -0,0 +1,47 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
+
+	max-width: 816px;
+	border: 1px solid var(--border-default, #e2e8f0);
+	position: relative;
+
+	padding: 24px;
+	border-radius: 12px;
+}
+
+.icon {
+	width: 24px;
+	height: 24px;
+}
+
+.title {
+	margin: 0;
+	font-size: 20px;
+	font-style: normal;
+	font-weight: 700;
+	line-height: normal;
+	letter-spacing: 0.25px;
+}
+
+.card_button {
+	position: absolute;
+	right: 24px;
+	top: 24px;
+
+	background-color: transparent;
+	border: none;
+	cursor: pointer;
+}
+
+.config {
+	display: flex;
+	justify-content: space-between;
+
+	&_toggle {
+		display: flex;
+		gap: 16px;
+		align-items: center;
+	}
+}
diff --git a/src/entities/form-create-project-card/ui/form-create-project-card.tsx b/src/entities/form-create-project-card/ui/form-create-project-card.tsx
new file mode 100644
index 00000000..63630759
--- /dev/null
+++ b/src/entities/form-create-project-card/ui/form-create-project-card.tsx
@@ -0,0 +1,105 @@
+'use client';
+
+import React, { FC, useState } from 'react';
+import styles from './form-create-project-card.module.scss';
+import { IFormCreateProjectCard } from './types';
+import { MultiSelectInput } from '@/shared/ui/multi-select-input/multi-select-input';
+import Edit from '@/shared/assets/icons/edit-icon.svg';
+import Delete from '@/shared/assets/icons/delete.svg';
+import { SingleSelectInput } from '@/shared/ui/single-select-input/single-select-input';
+import { MainButton, Counter, Toggler } from '@/shared/ui';
+
+export const FormCreateProjectCard: FC<IFormCreateProjectCard> = () => {
+	const [isEdit, setIsEdit] = useState(false);
+	const [recruitmentIsOpen, setRecruitmentIsOpen] = useState(false);
+
+	const handleIsEdit = () => {
+		setIsEdit(!isEdit);
+	};
+
+	const handleDelete = () => {
+		console.log(`delete --> `, 'delete');
+	};
+
+	return (
+		<>
+			<div className={styles.container}>
+				<h3 className={styles.title}>
+					UI/UX дизайнер / UI/UX Designer, Junior
+				</h3>
+
+				{!isEdit && (
+					<button
+						type="button"
+						className={styles.card_button}
+						onClick={handleIsEdit}>
+						<Edit className={styles.icon} />
+					</button>
+				)}
+				{isEdit && (
+					<button
+						type="button"
+						className={styles.card_button}
+						onClick={handleDelete}>
+						<Delete className={styles.icon} />
+					</button>
+				)}
+
+				{isEdit && (
+					<>
+						<SingleSelectInput
+							name={`project_specialists`}
+							label={'Специальность'}
+							onChange={() => {}}
+							options={[]}
+							description="Выберите одну специальность"
+							isSearchable
+						/>
+						<div>
+							<MultiSelectInput
+								name={`project_specialists`}
+								onChange={() => {}}
+								options={[]}
+								values={[]}
+								label={'Уровень квалификации'}
+							/>
+						</div>
+						<div>
+							<MultiSelectInput
+								name={`project_specialists`}
+								onChange={() => {}}
+								options={[]}
+								values={[]}
+								label={'Навыки'}
+								description="Выберите не более 15 навыков"
+							/>
+						</div>
+					</>
+				)}
+
+				<div className={styles.config}>
+					<Counter disabled={!recruitmentIsOpen} />
+					<div className={styles.config_toggle}>
+						<span>Набор {recruitmentIsOpen ? 'открыт' : 'закрыт'}</span>
+						<Toggler
+							// variant={'default'}
+							checked={recruitmentIsOpen as boolean}
+							name={'allow_notifications'}
+							id={'allow_notifications'}
+							onChange={(evt) => setRecruitmentIsOpen(evt.target.checked)}
+						/>
+					</div>
+				</div>
+
+				{isEdit && (
+					<MainButton
+						variant="secondary"
+						width="regular"
+						onClick={handleIsEdit}>
+						Сохранить
+					</MainButton>
+				)}
+			</div>
+		</>
+	);
+};
diff --git a/src/entities/form-create-project-card/ui/types.ts b/src/entities/form-create-project-card/ui/types.ts
new file mode 100644
index 00000000..7d7e86af
--- /dev/null
+++ b/src/entities/form-create-project-card/ui/types.ts
@@ -0,0 +1 @@
+export interface IFormCreateProjectCard {}
diff --git a/src/services/AttributesService.ts b/src/services/AttributesService.ts
new file mode 100644
index 00000000..cf805120
--- /dev/null
+++ b/src/services/AttributesService.ts
@@ -0,0 +1,27 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+// const BASE_DEV_URL = process.env.NEXT_PUBLIC_BASE_DEV_URL;
+// const BASE_TEST_URL = process.env.NEXT_PUBLIC_BASE_TEST_URL;
+const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
+
+export const attributesApi = createApi({
+	reducerPath: 'attributesApi',
+	baseQuery: fetchBaseQuery({
+		baseUrl: `https://${BASE_URL}/api/v1`,
+	}),
+	endpoints: (builder) => ({
+		getSkills: builder.query({
+			query: () => ({
+				url: '/api/v1/skills/',
+				method: 'GET',
+			}),
+		}),
+		getProfessions: builder.query({
+			query: () => ({
+				url: '/api/v1/professions/',
+			}),
+		}),
+	}),
+});
+
+export const { useGetSkillsQuery, useGetProfessionsQuery } = attributesApi;
diff --git a/src/shared/ui/input/input.module.scss b/src/shared/ui/input/input.module.scss
index 1717adc5..2731e9e8 100644
--- a/src/shared/ui/input/input.module.scss
+++ b/src/shared/ui/input/input.module.scss
@@ -1,5 +1,4 @@
 @import '../../style/variables.scss';
-
 .label {
 	padding: 0;
 	margin: 0;
diff --git a/src/shared/ui/input/input.tsx b/src/shared/ui/input/input.tsx
index fbcc4204..28c69781 100644
--- a/src/shared/ui/input/input.tsx
+++ b/src/shared/ui/input/input.tsx
@@ -34,7 +34,7 @@ export const Input: FC<InputProps> = ({
 
 	return (
 		<label className={clsx(className, styles.label)}>
-			{labelName}
+			<span>{labelName}</span>
 			<div className={styles.inputContainer}>
 				<input
 					{...register(`${name}`, { shouldUnregister: true })}
diff --git a/src/widgets/managa-project-settings/ui/manage-project-setting.module.scss b/src/widgets/managa-project-settings/ui/manage-project-setting.module.scss
index 7460035a..dd2700a1 100644
--- a/src/widgets/managa-project-settings/ui/manage-project-setting.module.scss
+++ b/src/widgets/managa-project-settings/ui/manage-project-setting.module.scss
@@ -18,12 +18,19 @@
 	}
 }
 
+.input_extra > span {
+	font-weight: 700;
+}
+
+
+
 .input_list {
 	width: 100%;
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
-
+	font-weight: 700;
+	
 	&_title {
 		margin: 0;
 		font-family: $--open-sans-font;
@@ -33,21 +40,10 @@
 		line-height: 150%;
 	}
 }
-
-.input_extra {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	font-family: $--open-sans-font;
-	font-weight: 700;
-	margin-top: 8px;
-}
-
 .directions,
 .employment {
 	width: 100%;
-
+	
 	&_list {
 		width: 100%;
 		padding: 0;
@@ -55,7 +51,7 @@
 		grid-template-columns: repeat(2, 1fr);
 		gap: 18px;
 	}
-
+	
 	&_item {
 		list-style: none;
 		padding: 0;
@@ -69,7 +65,11 @@
 	display: flex;
 	flex-direction: column;
 	gap: 24px;
-
+	
+	&_master_title {
+		font-weight: 700;
+		font-size: 32px;
+	}
 	&_toggle {
 		display: flex;
 		gap: 16px;
diff --git a/src/widgets/managa-project-settings/ui/manage-project-setting.tsx b/src/widgets/managa-project-settings/ui/manage-project-setting.tsx
index c36910d8..4c396e5a 100644
--- a/src/widgets/managa-project-settings/ui/manage-project-setting.tsx
+++ b/src/widgets/managa-project-settings/ui/manage-project-setting.tsx
@@ -14,6 +14,7 @@ export const ManageProjectsSetting = () => {
 	return (
 		<Form className={styles.container} onSubmit={undefined}>
 			<div className={styles.specialists}>
+				<h1 className={styles.specialists_master_title}>Название проекта</h1>
 				<div className={styles.input_list}>
 					<Input
 						name="name"
diff --git a/src/widgets/manage-specialists/ui/manage-specialist.specialist.module.scss b/src/widgets/manage-specialists/ui/manage-specialist.specialist.module.scss
index 45d76872..237c5cd8 100644
--- a/src/widgets/manage-specialists/ui/manage-specialist.specialist.module.scss
+++ b/src/widgets/manage-specialists/ui/manage-specialist.specialist.module.scss
@@ -1,3 +1,4 @@
+@import '@/shared/assets/fonts/fonts.css';
 @import '@/shared/style/variables';
 
 .container {
@@ -17,3 +18,113 @@
 	}
 }
 
+.input_extra > span {
+	font-weight: 700;
+}
+
+.input_list {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	font-weight: 700;
+
+	&_title {
+		margin: 0;
+		font-family: $--open-sans-font;
+		font-weight: 700;
+		font-size: 16px;
+		font-style: normal;
+		line-height: 150%;
+	}
+}
+.directions,
+.employment {
+	width: 100%;
+
+	&_list {
+		width: 100%;
+		padding: 0;
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		gap: 18px;
+	}
+
+	&_item {
+		list-style: none;
+		padding: 0;
+	}
+}
+
+.specialists {
+	width: 100%;
+	font-family: $--open-sans-font;
+	font-weight: 400;
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
+
+	&_master_title {
+		font-weight: 700;
+		font-size: 32px;
+	}
+	&_toggle {
+		display: flex;
+		gap: 16px;
+		align-items: center;
+	}
+
+	&_buttons {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+
+		margin-bottom: 32px;
+	}
+}
+
+.dates {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+
+	&_inputs {
+		//		margin: 0 0 16px 0;
+		display: flex;
+		gap: 8px;
+	}
+
+	&_input {
+		width: 100%;
+	}
+
+	&_text {
+		margin: 0 0 8px 0;
+		font-family: $--open-sans-font;
+		font-size: 16px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 24px; /* 150% */
+		letter-spacing: 0.25px;
+	}
+}
+
+.contacts {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+
+	&_selects {
+		display: grid;
+		gap: 8px;
+		grid-template-columns: 228px auto;
+		height: 70px;
+	}
+}
+
+.buttons {
+	display: flex;
+	gap: 16px;
+}
diff --git a/src/widgets/manage-specialists/ui/manage-specialists.tsx b/src/widgets/manage-specialists/ui/manage-specialists.tsx
index 81d4ccfa..e228d562 100644
--- a/src/widgets/manage-specialists/ui/manage-specialists.tsx
+++ b/src/widgets/manage-specialists/ui/manage-specialists.tsx
@@ -1,8 +1,75 @@
 'use client';
-import React from 'react';
+import React, { useState } from 'react';
 import styles from './manage-specialist.specialist.module.scss';
-import { Form } from '@/shared/ui';
+import { Form, Toggler } from '@/shared/ui';
+import { SingleSelectInput } from '@/shared/ui/single-select-input/single-select-input';
+import { FormCreateProjectCard } from '@/entities/form-create-project-card';
+import { MultiSelectInput } from '@/shared/ui/multi-select-input/multi-select-input';
+import { LEVEL } from '@/utils/constants';
+import { professions } from '@/shared/constants';
 
 export const ManageSpecialists = () => {
-	return <Form className={styles.container} onSubmit={undefined}><></></Form>;
+	const [recruitmentIsOpen, setRecruitmentIsOpen] = useState(false)
+	return (
+		<Form className={styles.container} onSubmit={undefined}>
+			<div className={styles.specialists}>
+				<h3 className={styles.input_list_title}>Кто нужен в проект</h3>
+				<div className={styles.specialists_toggle}>
+					<span>Набор {recruitmentIsOpen ? 'открыт' : 'закрыт'}</span>
+					<Toggler
+						checked={recruitmentIsOpen as boolean}
+						name={'allow_notifications'}
+						id={'allow_notifications'}
+						onChange={(evt) => setRecruitmentIsOpen(evt.target.checked)}
+					/>
+				</div>
+
+				<FormCreateProjectCard />
+
+				<SingleSelectInput
+					name={`project_specialists`}
+					label={'Специальность'}
+					onChange={() => {}}
+					options={professions?.map((specialization, index) => {
+							return {
+								label: index,
+								value: specialization,
+							};
+						}
+					)}
+					description="Выберите одну специальность"
+					isSearchable
+				/>
+
+				<div>
+					<MultiSelectInput
+						name={`project_specialists`}
+						onChange={() => {}}
+						options={LEVEL}
+						values={[]}
+						label={'Уровень квалификации'}
+						isSearchable
+					/>
+				</div>
+
+				<div>
+					<MultiSelectInput
+						isSearchable
+						name={`project_specialists`}
+						onChange={() => {}}
+						options={[].map((skill: { id: number; name: string }) => {
+							return {
+								label: skill.name,
+								value: skill.name,
+							};
+						})}
+						values={[]}
+						label={'Навыки'}
+						description="Выберите не более 15 навыков"
+						maxSelections={15}
+					/>
+				</div>
+			</div>
+		</Form>
+	);
 };

From f0afa7fff3dfce20010db0a101c553dcbbec8164 Mon Sep 17 00:00:00 2001
From: Olek <149747215+Primis1@users.noreply.github.com>
Date: Mon, 9 Sep 2024 23:23:12 -0400
Subject: [PATCH 04/19] fix: attributes query, form layout

---
 src/pages/main-page/ui/main-page.tsx                     | 7 +++++++
 src/services/AttributesService.ts                        | 1 +
 src/store/store.ts                                       | 5 ++++-
 .../ui/manage-project-setting.module.scss                | 2 ++
 .../ui/manage-project-setting.tsx                        | 9 ---------
 .../ui/manage-specialist.specialist.module.scss          | 2 +-
 src/widgets/manage-specialists/ui/manage-specialists.tsx | 2 +-
 7 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/pages/main-page/ui/main-page.tsx b/src/pages/main-page/ui/main-page.tsx
index 8f6259d7..ac4964ff 100644
--- a/src/pages/main-page/ui/main-page.tsx
+++ b/src/pages/main-page/ui/main-page.tsx
@@ -8,6 +8,7 @@ import { Promo } from '@/widgets/promo';
 import React, { useEffect, useState } from 'react';
 import styles from './main-page.module.scss';
 import { useRouter } from 'next/navigation';
+import { useGetSkillsQuery } from '@/services/AttributesService';
 
 export const MainPage = () => {
 	// const { isSuccess: isLoggedIn } = useGetUserMeQuery(null);
@@ -28,6 +29,12 @@ export const MainPage = () => {
 		router.push('/');
 	}, [router]);
 
+	const {data: skills} = useGetSkillsQuery([]) 
+
+	if (!skills) {
+		console.table(skills)
+	}
+
 	return (
 		<>
 			<div className={styles.mainContainer}>
diff --git a/src/services/AttributesService.ts b/src/services/AttributesService.ts
index cf805120..d0d037c2 100644
--- a/src/services/AttributesService.ts
+++ b/src/services/AttributesService.ts
@@ -19,6 +19,7 @@ export const attributesApi = createApi({
 		getProfessions: builder.query({
 			query: () => ({
 				url: '/api/v1/professions/',
+				method: 'GET',
 			}),
 		}),
 	}),
diff --git a/src/store/store.ts b/src/store/store.ts
index 5af9c5be..ee910dab 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -2,10 +2,12 @@ import { configureStore, combineReducers } from '@reduxjs/toolkit';
 import { userApi } from '@/services/UserService';
 import { generalApi } from '@/services/GeneralService';
 import { projectsApi } from '@/services/ProjectService';
+import { attributesApi } from '@/services/AttributesService';
 import { specilistsApi } from '@/services/SpecialistService';
 
 const rootReducer = combineReducers({
 	[userApi.reducerPath]: userApi.reducer,
+	[attributesApi.reducerPath]: attributesApi.reducer,
 	[specilistsApi.reducerPath]: specilistsApi.reducer,
 	[generalApi.reducerPath]: generalApi.reducer,
 	[projectsApi.reducerPath]: projectsApi.reducer,
@@ -16,6 +18,7 @@ export const store = configureStore({
 	middleware: (getDefaultMiddleware) =>
 		getDefaultMiddleware().concat(
 			userApi.middleware,
+			attributesApi.middleware,
 			specilistsApi.middleware,
 			generalApi.middleware,
 			projectsApi.middleware
@@ -23,4 +26,4 @@ export const store = configureStore({
 });
 
 export type RootState = ReturnType<typeof store.getState>;
-export type AppDispatch = typeof store.dispatch;
+export type AppDispatch = typeof store.dispatch;
\ No newline at end of file
diff --git a/src/widgets/managa-project-settings/ui/manage-project-setting.module.scss b/src/widgets/managa-project-settings/ui/manage-project-setting.module.scss
index dd2700a1..c5bfcd41 100644
--- a/src/widgets/managa-project-settings/ui/manage-project-setting.module.scss
+++ b/src/widgets/managa-project-settings/ui/manage-project-setting.module.scss
@@ -11,6 +11,7 @@
 	background-color: $--bg-primary;
 	border: 1px solid $--border-default;
 	border-radius: 12px;
+	margin-bottom: 35px;
 
 	@media screen and (max-width: 779px) {
 		gap: 13px;
@@ -68,6 +69,7 @@
 	
 	&_master_title {
 		font-weight: 700;
+		margin: 0;
 		font-size: 32px;
 	}
 	&_toggle {
diff --git a/src/widgets/managa-project-settings/ui/manage-project-setting.tsx b/src/widgets/managa-project-settings/ui/manage-project-setting.tsx
index 4c396e5a..f2f4f993 100644
--- a/src/widgets/managa-project-settings/ui/manage-project-setting.tsx
+++ b/src/widgets/managa-project-settings/ui/manage-project-setting.tsx
@@ -115,15 +115,6 @@ export const ManageProjectsSetting = () => {
 				<MainButton variant={'trivial'} width={'min'} disabled={false}>
 					{'Очистить'}
 				</MainButton>
-
-				<div className={styles.buttons}>
-					<MainButton variant={'primary'} width={'regular'} disabled={false}>
-						{'Опубликовать'}
-					</MainButton>
-					<MainButton variant={'secondary'} width={'regular'} disabled={false}>
-						{'Сохранить как черновик'}
-					</MainButton>
-				</div>
 			</div>
 		</Form>
 	);
diff --git a/src/widgets/manage-specialists/ui/manage-specialist.specialist.module.scss b/src/widgets/manage-specialists/ui/manage-specialist.specialist.module.scss
index 237c5cd8..13346d96 100644
--- a/src/widgets/manage-specialists/ui/manage-specialist.specialist.module.scss
+++ b/src/widgets/manage-specialists/ui/manage-specialist.specialist.module.scss
@@ -5,7 +5,6 @@
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
-	row-gap: 20px;
 	width: 816px;
 	padding: 32px;
 	background-color: $--bg-primary;
@@ -65,6 +64,7 @@
 	gap: 24px;
 
 	&_master_title {
+		margin: 0;
 		font-weight: 700;
 		font-size: 32px;
 	}
diff --git a/src/widgets/manage-specialists/ui/manage-specialists.tsx b/src/widgets/manage-specialists/ui/manage-specialists.tsx
index e228d562..a3e9a7b7 100644
--- a/src/widgets/manage-specialists/ui/manage-specialists.tsx
+++ b/src/widgets/manage-specialists/ui/manage-specialists.tsx
@@ -13,7 +13,7 @@ export const ManageSpecialists = () => {
 	return (
 		<Form className={styles.container} onSubmit={undefined}>
 			<div className={styles.specialists}>
-				<h3 className={styles.input_list_title}>Кто нужен в проект</h3>
+				<h3 className={styles.specialists_master_title}>Кто нужен в проект</h3>
 				<div className={styles.specialists_toggle}>
 					<span>Набор {recruitmentIsOpen ? 'открыт' : 'закрыт'}</span>
 					<Toggler

From d874e1b4c2d7291ba10d07a3fe47fd1fe33d2cbd Mon Sep 17 00:00:00 2001
From: Olek <149747215+Primis1@users.noreply.github.com>
Date: Sat, 14 Sep 2024 00:13:38 -0400
Subject: [PATCH 05/19] add: form-create-project/specialist, direction query

---
 .../ui/form-create-project-card.tsx           |   1 -
 src/pages/main-page/ui/main-page.tsx          |   8 --
 .../ui/profile-create-project-page.tsx        |  11 +-
 src/services/AttributesService.ts             |  14 +-
 .../ui/form-project.module.scss               | 134 ++++++++++++++++++
 .../form-project-details/ui/form-project.tsx  | 123 ++++++++++++++++
 .../ui/form-project-specialists.module.scss   | 130 +++++++++++++++++
 .../ui/form-project-specialists.tsx           |  82 +++++++++++
 src/widgets/index.ts                          |   4 +
 .../ui/manage-project-setting.tsx             |   4 +-
 .../ui/manage-specialists.tsx                 |  26 ++--
 11 files changed, 510 insertions(+), 27 deletions(-)
 create mode 100644 src/widgets/form-project-details/ui/form-project.module.scss
 create mode 100644 src/widgets/form-project-details/ui/form-project.tsx
 create mode 100644 src/widgets/form-project-specialists/ui/form-project-specialists.module.scss
 create mode 100644 src/widgets/form-project-specialists/ui/form-project-specialists.tsx

diff --git a/src/entities/form-create-project-card/ui/form-create-project-card.tsx b/src/entities/form-create-project-card/ui/form-create-project-card.tsx
index 63630759..6758c7ce 100644
--- a/src/entities/form-create-project-card/ui/form-create-project-card.tsx
+++ b/src/entities/form-create-project-card/ui/form-create-project-card.tsx
@@ -82,7 +82,6 @@ export const FormCreateProjectCard: FC<IFormCreateProjectCard> = () => {
 					<div className={styles.config_toggle}>
 						<span>Набор {recruitmentIsOpen ? 'открыт' : 'закрыт'}</span>
 						<Toggler
-							// variant={'default'}
 							checked={recruitmentIsOpen as boolean}
 							name={'allow_notifications'}
 							id={'allow_notifications'}
diff --git a/src/pages/main-page/ui/main-page.tsx b/src/pages/main-page/ui/main-page.tsx
index ac4964ff..eb74c42e 100644
--- a/src/pages/main-page/ui/main-page.tsx
+++ b/src/pages/main-page/ui/main-page.tsx
@@ -8,10 +8,8 @@ import { Promo } from '@/widgets/promo';
 import React, { useEffect, useState } from 'react';
 import styles from './main-page.module.scss';
 import { useRouter } from 'next/navigation';
-import { useGetSkillsQuery } from '@/services/AttributesService';
 
 export const MainPage = () => {
-	// const { isSuccess: isLoggedIn } = useGetUserMeQuery(null);
 	const [isLoggedIn, setIsLoggedIn] = useState(false);
 	const router = useRouter();
 
@@ -29,12 +27,6 @@ export const MainPage = () => {
 		router.push('/');
 	}, [router]);
 
-	const {data: skills} = useGetSkillsQuery([]) 
-
-	if (!skills) {
-		console.table(skills)
-	}
-
 	return (
 		<>
 			<div className={styles.mainContainer}>
diff --git a/src/pages/profile-create-project-page/ui/profile-create-project-page.tsx b/src/pages/profile-create-project-page/ui/profile-create-project-page.tsx
index 54ce74dc..cc9f2441 100644
--- a/src/pages/profile-create-project-page/ui/profile-create-project-page.tsx
+++ b/src/pages/profile-create-project-page/ui/profile-create-project-page.tsx
@@ -1,9 +1,14 @@
+import {
+	FormProject,
+	FormProjectSpecialists,
+} from '@/widgets';
 import React from 'react';
 
 export const ProfileCreateProject = () => {
 	return (
-		<section>
-			<div>Форма создания проекта</div>
-		</section>
+		<>
+			<FormProject />
+			<FormProjectSpecialists />
+		</>
 	);
 };
diff --git a/src/services/AttributesService.ts b/src/services/AttributesService.ts
index d0d037c2..2cbf00cb 100644
--- a/src/services/AttributesService.ts
+++ b/src/services/AttributesService.ts
@@ -1,7 +1,5 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 
-// const BASE_DEV_URL = process.env.NEXT_PUBLIC_BASE_DEV_URL;
-// const BASE_TEST_URL = process.env.NEXT_PUBLIC_BASE_TEST_URL;
 const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
 
 export const attributesApi = createApi({
@@ -12,17 +10,23 @@ export const attributesApi = createApi({
 	endpoints: (builder) => ({
 		getSkills: builder.query({
 			query: () => ({
-				url: '/api/v1/skills/',
+				url: '/skills/',
 				method: 'GET',
 			}),
 		}),
 		getProfessions: builder.query({
 			query: () => ({
-				url: '/api/v1/professions/',
+				url: '/professions/',
+				method: 'GET',
+			}),
+		}),
+		getDirections: builder.query({
+			query: () => ({
+				url: '/projects/directions/',
 				method: 'GET',
 			}),
 		}),
 	}),
 });
 
-export const { useGetSkillsQuery, useGetProfessionsQuery } = attributesApi;
+export const { useGetSkillsQuery, useGetProfessionsQuery, useGetDirectionsQuery } = attributesApi;
diff --git a/src/widgets/form-project-details/ui/form-project.module.scss b/src/widgets/form-project-details/ui/form-project.module.scss
new file mode 100644
index 00000000..c5bfcd41
--- /dev/null
+++ b/src/widgets/form-project-details/ui/form-project.module.scss
@@ -0,0 +1,134 @@
+@import '@/shared/assets/fonts/fonts.css';
+@import '@/shared/style/variables';
+
+.container {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	row-gap: 20px;
+	width: 816px;
+	padding: 32px;
+	background-color: $--bg-primary;
+	border: 1px solid $--border-default;
+	border-radius: 12px;
+	margin-bottom: 35px;
+
+	@media screen and (max-width: 779px) {
+		gap: 13px;
+		max-width: 779px;
+	}
+}
+
+.input_extra > span {
+	font-weight: 700;
+}
+
+
+
+.input_list {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	font-weight: 700;
+	
+	&_title {
+		margin: 0;
+		font-family: $--open-sans-font;
+		font-weight: 700;
+		font-size: 16px;
+		font-style: normal;
+		line-height: 150%;
+	}
+}
+.directions,
+.employment {
+	width: 100%;
+	
+	&_list {
+		width: 100%;
+		padding: 0;
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		gap: 18px;
+	}
+	
+	&_item {
+		list-style: none;
+		padding: 0;
+	}
+}
+
+.specialists {
+	width: 100%;
+	font-family: $--open-sans-font;
+	font-weight: 400;
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
+	
+	&_master_title {
+		font-weight: 700;
+		margin: 0;
+		font-size: 32px;
+	}
+	&_toggle {
+		display: flex;
+		gap: 16px;
+		align-items: center;
+	}
+
+	&_buttons {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+
+		margin-bottom: 32px;
+	}
+}
+
+.dates {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+
+	&_inputs {
+		//		margin: 0 0 16px 0;
+		display: flex;
+		gap: 8px;
+	}
+
+	&_input {
+		width: 100%;
+	}
+
+	&_text {
+		margin: 0 0 8px 0;
+		font-family: $--open-sans-font;
+		font-size: 16px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 24px; /* 150% */
+		letter-spacing: 0.25px;
+	}
+}
+
+.contacts {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+
+	&_selects {
+		display: grid;
+		gap: 8px;
+		grid-template-columns: 228px auto;
+		height: 70px;
+	}
+}
+
+.buttons {
+	display: flex;
+	gap: 16px;
+}
diff --git a/src/widgets/form-project-details/ui/form-project.tsx b/src/widgets/form-project-details/ui/form-project.tsx
new file mode 100644
index 00000000..a51152ad
--- /dev/null
+++ b/src/widgets/form-project-details/ui/form-project.tsx
@@ -0,0 +1,123 @@
+'use client';
+import React from 'react';
+import styles from './form-project.module.scss';
+import { CheckboxAndRadio, Form, Input, MainButton } from '@/shared/ui';
+import { TextEditor } from '@/shared/ui/text-editor/text-editor';
+import { CONTACTS, DEVELOPING, EMPLOYMENT } from '@/utils/constants';
+import { DatePickerRHF } from '@/shared/ui/date-picker-rhf/date-picker-rhf';
+import { useForm } from 'react-hook-form';
+import { SingleSelectInput } from '@/shared/ui/single-select-input/single-select-input';
+import { Plus } from 'lucide-react';
+
+export const FormProject = () => {
+	const { control } = useForm();
+	return (
+		<Form className={styles.container} onSubmit={undefined}>
+			<div className={styles.specialists}>
+				<h1 className={styles.specialists_master_title}>Название проекта</h1>
+				<div className={styles.input_list}>
+					<Input
+						name="name"
+						labelName="Название проекта"
+						className={styles.input_extra}
+					/>
+					<TextEditor
+						labelName={'Описание проекта'}
+						desc={
+							'Расскажите о проекте и его цели используя не более 750 символов'
+						}
+					/>
+				</div>
+
+				<div className={styles.directions}>
+					<h3 className={styles.input_list_title}>Направление разработки</h3>
+					<ul className={styles.directions_list}>
+						{DEVELOPING?.map((profession) => (
+							<li className={styles.directions_item} key={profession.id}>
+								<CheckboxAndRadio
+									labelName={profession.field}
+									label={`professions`}
+									type={'checkbox'}
+									id={`professions_${profession.id}`}
+									name={'professions'}
+								/>
+							</li>
+						))}
+					</ul>
+				</div>
+
+				<div className={styles.employment}>
+					<h3 className={styles.input_list_title}>Занятость</h3>
+					<ul className={styles.employment_list}>
+						{EMPLOYMENT.map((busyness) => (
+							<li className={styles.directions_item} key={busyness.id}>
+								<CheckboxAndRadio
+									labelName={busyness.name}
+									label={`busyness`}
+									type={'checkbox'}
+									id={`busyness_${busyness.id}.`}
+									name={'busyness'}
+								/>
+							</li>
+						))}
+					</ul>
+				</div>
+				<div className={styles.dates}>
+					<h3 className={styles.input_list_title}>Сроки проекты</h3>
+					<div className={styles.dates_inputs}>
+						<div className={styles.dates_input}>
+							<p className={styles.dates_text}>Начало</p>
+							<DatePickerRHF control={control} name="start" />
+						</div>
+						<div className={styles.dates_input}>
+							<p className={styles.dates_text}>Окончание</p>
+							<DatePickerRHF control={control} name="end" />
+						</div>
+					</div>
+				</div>
+
+				<div className={styles.contacts}>
+					<h3 className={styles.input_list_title}>Контакты для связи</h3>
+					<div className={styles.contacts_selects}>
+						<SingleSelectInput
+							name={`project_specialists`}
+							onChange={() => {}}
+							options={CONTACTS}
+							description={'Выберите ресурс'}
+						/>
+						<Input labelName="" name="name" className={styles.input_extra} />
+					</div>
+				</div>
+
+				<div className={styles.specialists_buttons}>
+					<MainButton
+						variant="secondary"
+						width="regular"
+						IconLeft={
+							Plus as React.ComponentType<React.HTMLAttributes<HTMLElement>>
+						}
+						onClick={() => ({})}>
+						Добавить
+					</MainButton>
+					<MainButton variant="trivial" width="regular" onClick={() => ({})}>
+						Сбросить
+					</MainButton>
+				</div>
+
+				<Input
+					name="link"
+					labelName="Ссылка на проект"
+					className={styles.input_extra}
+					description={true}
+					descrText={
+						'Добавьте ссылку на ваш проект, например: GitHub, приложение, веб страница и др.'
+					}
+				/>
+
+				<MainButton variant={'trivial'} width={'min'} disabled={false}>
+					{'Очистить'}
+				</MainButton>
+			</div>
+		</Form>
+	);
+};
diff --git a/src/widgets/form-project-specialists/ui/form-project-specialists.module.scss b/src/widgets/form-project-specialists/ui/form-project-specialists.module.scss
new file mode 100644
index 00000000..13346d96
--- /dev/null
+++ b/src/widgets/form-project-specialists/ui/form-project-specialists.module.scss
@@ -0,0 +1,130 @@
+@import '@/shared/assets/fonts/fonts.css';
+@import '@/shared/style/variables';
+
+.container {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	width: 816px;
+	padding: 32px;
+	background-color: $--bg-primary;
+	border: 1px solid $--border-default;
+	border-radius: 12px;
+
+	@media screen and (max-width: 779px) {
+		gap: 13px;
+		max-width: 779px;
+	}
+}
+
+.input_extra > span {
+	font-weight: 700;
+}
+
+.input_list {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	font-weight: 700;
+
+	&_title {
+		margin: 0;
+		font-family: $--open-sans-font;
+		font-weight: 700;
+		font-size: 16px;
+		font-style: normal;
+		line-height: 150%;
+	}
+}
+.directions,
+.employment {
+	width: 100%;
+
+	&_list {
+		width: 100%;
+		padding: 0;
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		gap: 18px;
+	}
+
+	&_item {
+		list-style: none;
+		padding: 0;
+	}
+}
+
+.specialists {
+	width: 100%;
+	font-family: $--open-sans-font;
+	font-weight: 400;
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
+
+	&_master_title {
+		margin: 0;
+		font-weight: 700;
+		font-size: 32px;
+	}
+	&_toggle {
+		display: flex;
+		gap: 16px;
+		align-items: center;
+	}
+
+	&_buttons {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+
+		margin-bottom: 32px;
+	}
+}
+
+.dates {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+
+	&_inputs {
+		//		margin: 0 0 16px 0;
+		display: flex;
+		gap: 8px;
+	}
+
+	&_input {
+		width: 100%;
+	}
+
+	&_text {
+		margin: 0 0 8px 0;
+		font-family: $--open-sans-font;
+		font-size: 16px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 24px; /* 150% */
+		letter-spacing: 0.25px;
+	}
+}
+
+.contacts {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+
+	&_selects {
+		display: grid;
+		gap: 8px;
+		grid-template-columns: 228px auto;
+		height: 70px;
+	}
+}
+
+.buttons {
+	display: flex;
+	gap: 16px;
+}
diff --git a/src/widgets/form-project-specialists/ui/form-project-specialists.tsx b/src/widgets/form-project-specialists/ui/form-project-specialists.tsx
new file mode 100644
index 00000000..9e49c92f
--- /dev/null
+++ b/src/widgets/form-project-specialists/ui/form-project-specialists.tsx
@@ -0,0 +1,82 @@
+'use client';
+import React, { useState } from 'react';
+import styles from './form-project-specialists.module.scss';
+import { Form, Toggler } from '@/shared/ui';
+import { SingleSelectInput } from '@/shared/ui/single-select-input/single-select-input';
+import { MultiSelectInput } from '@/shared/ui/multi-select-input/multi-select-input';
+import { LEVEL } from '@/utils/constants';
+import {
+	useGetProfessionsQuery,
+	useGetSkillsQuery,
+} from '@/services/AttributesService';
+
+export const FormProjectSpecialists = () => {
+	const [recruitmentIsOpen, setRecruitmentIsOpen] = useState(false);
+
+	const { data: skills } = useGetSkillsQuery([]) 
+	const { data: profession } = useGetProfessionsQuery([]) 
+
+	console.log(skills);
+	return (
+		<Form className={styles.container} onSubmit={undefined}>
+			<div className={styles.specialists}>
+				<h3 className={styles.specialists_master_title}>Кто нужен в проект</h3>
+				<div className={styles.specialists_toggle}>
+					<span>Набор {recruitmentIsOpen ? 'открыт' : 'закрыт'}</span>
+					<Toggler
+						checked={recruitmentIsOpen as boolean}
+						name={'allow_notifications'}
+						id={'allow_notifications'}
+						onChange={(evt) => setRecruitmentIsOpen(evt.target.checked)}
+					/>
+				</div>
+
+				{/* <FormCreateProjectCard /> */}
+				<SingleSelectInput
+					name={`project_specialists`}
+					label={'Специальность'}
+					onChange={() => {}}
+					options={profession?.map(
+						(specialization: { id: number; name: string }) => {
+							return {
+								label: specialization.id,
+								value: specialization.name,
+							};
+						}
+					)}
+					description="Выберите одну специальность"
+					isSearchable
+				/>
+
+				<div>
+					<MultiSelectInput
+						name={`project_specialists`}
+						onChange={() => {}}
+						options={LEVEL}
+						values={[]}
+						label={'Уровень квалификации'}
+						isSearchable
+					/>
+				</div>
+
+				<div>
+					<MultiSelectInput
+						isSearchable
+						name={`project_specialists`}
+						onChange={() => {}}
+						options={skills?.map((skill: { id: number; name: string }) => {
+							return {
+								label: skill.id,
+								value: skill.name,
+							};
+						})}
+						values={[]}
+						label={'Навыки'}
+						description="Выберите не более 15 навыков"
+						maxSelections={15}
+					/>
+				</div>
+			</div>
+		</Form>
+	);
+};
diff --git a/src/widgets/index.ts b/src/widgets/index.ts
index a7d58290..5663749f 100644
--- a/src/widgets/index.ts
+++ b/src/widgets/index.ts
@@ -1 +1,5 @@
 export { ContactsList } from './contact-list/contact-list';
+export * from "./managa-project-settings/ui/manage-project-setting"
+export * from "./manage-specialists/ui/manage-specialists"
+export * from "./form-project-details/ui/form-project"
+export * from "./form-project-specialists/ui/form-project-specialists"
diff --git a/src/widgets/managa-project-settings/ui/manage-project-setting.tsx b/src/widgets/managa-project-settings/ui/manage-project-setting.tsx
index f2f4f993..b9d66cf4 100644
--- a/src/widgets/managa-project-settings/ui/manage-project-setting.tsx
+++ b/src/widgets/managa-project-settings/ui/manage-project-setting.tsx
@@ -93,7 +93,9 @@ export const ManageProjectsSetting = () => {
 					<MainButton
 						variant="secondary"
 						width="regular"
-						IconLeft={Plus}
+						IconLeft={
+							Plus as React.ComponentType<React.HTMLAttributes<HTMLElement>>
+						}
 						onClick={() => ({})}>
 						Добавить
 					</MainButton>
diff --git a/src/widgets/manage-specialists/ui/manage-specialists.tsx b/src/widgets/manage-specialists/ui/manage-specialists.tsx
index a3e9a7b7..4fcc6cf6 100644
--- a/src/widgets/manage-specialists/ui/manage-specialists.tsx
+++ b/src/widgets/manage-specialists/ui/manage-specialists.tsx
@@ -1,15 +1,23 @@
 'use client';
-import React, { useState } from 'react';
+import React, {  useState } from 'react';
 import styles from './manage-specialist.specialist.module.scss';
 import { Form, Toggler } from '@/shared/ui';
 import { SingleSelectInput } from '@/shared/ui/single-select-input/single-select-input';
 import { FormCreateProjectCard } from '@/entities/form-create-project-card';
 import { MultiSelectInput } from '@/shared/ui/multi-select-input/multi-select-input';
 import { LEVEL } from '@/utils/constants';
-import { professions } from '@/shared/constants';
+import {
+	useGetProfessionsQuery,
+	useGetSkillsQuery,
+} from '@/services/AttributesService';
 
 export const ManageSpecialists = () => {
-	const [recruitmentIsOpen, setRecruitmentIsOpen] = useState(false)
+	const [recruitmentIsOpen, setRecruitmentIsOpen] = useState(false);
+
+	const { data: skills } = useGetSkillsQuery([]) 
+	const { data: profession } = useGetProfessionsQuery([]) 
+
+	console.log(skills);
 	return (
 		<Form className={styles.container} onSubmit={undefined}>
 			<div className={styles.specialists}>
@@ -25,15 +33,15 @@ export const ManageSpecialists = () => {
 				</div>
 
 				<FormCreateProjectCard />
-
 				<SingleSelectInput
 					name={`project_specialists`}
 					label={'Специальность'}
 					onChange={() => {}}
-					options={professions?.map((specialization, index) => {
+					options={profession?.map(
+						(specialization: { id: number; name: string }) => {
 							return {
-								label: index,
-								value: specialization,
+								label: specialization.id,
+								value: specialization.name,
 							};
 						}
 					)}
@@ -57,9 +65,9 @@ export const ManageSpecialists = () => {
 						isSearchable
 						name={`project_specialists`}
 						onChange={() => {}}
-						options={[].map((skill: { id: number; name: string }) => {
+						options={skills?.map((skill: { id: number; name: string }) => {
 							return {
-								label: skill.name,
+								label: skill.id,
 								value: skill.name,
 							};
 						})}

From 251d1d0f596c12761938c107e2e7fb746e8aca2a Mon Sep 17 00:00:00 2001
From: Olek <149747215+Primis1@users.noreply.github.com>
Date: Fri, 20 Sep 2024 13:44:50 -0400
Subject: [PATCH 06/19] add: contacts, POST query in project API

---
 package-lock.json                             | 22 +++++
 package.json                                  |  2 +
 src/entities/contacts/contacts.module.scss    | 97 +++++++++++++++++++
 src/entities/contacts/contacts.tsx            | 75 ++++++++++++++
 src/services/ProjectService.ts                | 10 +-
 src/shared/ui/text-editor/text-editor.tsx     | 41 +++-----
 src/shared/ui/text-editor/types.ts            |  5 +-
 src/utils/constants.ts                        |  4 +-
 src/widgets/form-project-details/types.ts     | 39 ++++++++
 .../form-project-details/ui/form-project.tsx  | 61 ++++++------
 .../ui/form-project-specialists.tsx           | 20 ++--
 .../ui/manage-project-setting.tsx             |  6 +-
 .../ui/manage-specialists.tsx                 |  7 +-
 13 files changed, 316 insertions(+), 73 deletions(-)
 create mode 100644 src/entities/contacts/contacts.module.scss
 create mode 100644 src/entities/contacts/contacts.tsx
 create mode 100644 src/widgets/form-project-details/types.ts

diff --git a/package-lock.json b/package-lock.json
index 201cc5d3..3ef82e5d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,6 +36,7 @@
 				"sass": "^1.70.0",
 				"scss": "^0.2.4",
 				"sharp": "^0.33.2",
+				"uuid": "^10.0.0",
 				"yup": "^1.3.3",
 				"zod": "^3.23.8"
 			},
@@ -46,6 +47,7 @@
 				"@types/react": "^18",
 				"@types/react-datepicker": "^6.2.0",
 				"@types/react-dom": "^18",
+				"@types/uuid": "^10.0.0",
 				"@typescript-eslint/eslint-plugin": "^6.21.0",
 				"@typescript-eslint/parser": "^6.21.0",
 				"clsx": "^2.1.0",
@@ -3864,6 +3866,13 @@
 			"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
 			"integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
 		},
+		"node_modules/@types/uuid": {
+			"version": "10.0.0",
+			"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-10.0.0.tgz",
+			"integrity": "sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/@typescript-eslint/eslint-plugin": {
 			"version": "6.21.0",
 			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz",
@@ -11432,6 +11441,19 @@
 			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
 			"dev": true
 		},
+		"node_modules/uuid": {
+			"version": "10.0.0",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+			"integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
+			"funding": [
+				"https://github.com/sponsors/broofa",
+				"https://github.com/sponsors/ctavan"
+			],
+			"license": "MIT",
+			"bin": {
+				"uuid": "dist/bin/uuid"
+			}
+		},
 		"node_modules/wcwidth": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
diff --git a/package.json b/package.json
index 4ed693f6..74141d4f 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
 		"sass": "^1.70.0",
 		"scss": "^0.2.4",
 		"sharp": "^0.33.2",
+		"uuid": "^10.0.0",
 		"yup": "^1.3.3",
 		"zod": "^3.23.8"
 	},
@@ -50,6 +51,7 @@
 		"@types/react": "^18",
 		"@types/react-datepicker": "^6.2.0",
 		"@types/react-dom": "^18",
+		"@types/uuid": "^10.0.0",
 		"@typescript-eslint/eslint-plugin": "^6.21.0",
 		"@typescript-eslint/parser": "^6.21.0",
 		"clsx": "^2.1.0",
diff --git a/src/entities/contacts/contacts.module.scss b/src/entities/contacts/contacts.module.scss
new file mode 100644
index 00000000..cae3db9a
--- /dev/null
+++ b/src/entities/contacts/contacts.module.scss
@@ -0,0 +1,97 @@
+@import '@/shared/assets/fonts/fonts.css';
+@import '@/shared/style/variables';
+
+.contacts_title {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	font-weight: 700;
+
+	margin: 0;
+	font-family: $--open-sans-font;
+	font-weight: 700;
+	font-size: 16px;
+	font-style: normal;
+	line-height: 150%;
+	
+	
+}
+.contacts {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+
+.container {
+	display: flex;
+	align-items: center;
+}
+
+.input_extra {
+	width: 100%;
+	display: block;
+	padding: 12px 36px 12px 12px;
+	margin: 0;
+	border-radius: 12px;
+	min-height: 50px;
+	box-sizing: border-box;
+	border: 1px solid;
+	color: $--Foreground-default;
+	background-color: $--bg-primary;
+	font-size: 16px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 23px;
+	position: relative;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+
+	&::placeholder {
+		color: $--Foreground-subtitle;
+	}
+
+	&:disabled {
+		opacity: 0.5;
+	}
+}
+
+.buttons {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+	margin-bottom: 32px;
+}
+
+.select {
+	border: 1px solid;
+	margin-right: 10px;
+	box-sizing: border-box;
+	border: 1px solid;
+	color: $--Foreground-default;
+	background-color: $--bg-primary;
+	letter-spacing: 0.25px;
+	cursor: pointer;
+	height: 50px;
+	padding: 0px 10px;
+	width: auto;
+	border-radius: 12px;
+
+	&::placeholder {
+		color: $--Foreground-subtitle;
+	}
+
+	&:disabled {
+		opacity: 0.5;
+	}
+}
+
+.select > option {
+	color: $--Foreground-default;
+
+}
+
+
diff --git a/src/entities/contacts/contacts.tsx b/src/entities/contacts/contacts.tsx
new file mode 100644
index 00000000..ade1caa1
--- /dev/null
+++ b/src/entities/contacts/contacts.tsx
@@ -0,0 +1,75 @@
+import { MainButton } from '@/shared/ui';
+import { Plus, Trash2 } from 'lucide-react';
+import React from 'react';
+import styles from './contacts.module.scss';
+import {  useFieldArray, Controller, Control, FieldValues } from 'react-hook-form';
+import { v4 as uuidv4 } from 'uuid';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const Contacts = (control: Control<FieldValues, any>) => {
+
+	const { fields, append, remove } = useFieldArray({
+		control,
+		name: 'contacts',
+	});
+
+	return (
+		<>
+			<h3 className={styles.contacts_title}>Контакты для связи</h3>
+			<div className={styles.contacts}>
+				{fields.map((field, index) => (
+					<div key={field.id} className={styles.container}>
+						<Controller
+							name={`contacts[${index}].type`}
+							control={control}
+							render={({ field }) => (
+								<select className={styles.select} {...field}>
+									<option value="">Выберите ресурс</option>
+									<option value="phone">Телефон</option>
+									<option value="email">Email</option>
+									<option value="telegram">Telegram</option>
+								</select>
+							)}
+						/>
+						<Controller
+							name={`contacts[${index}].value`}
+							control={control}
+							render={({ field }) => (
+								<input
+									{...field}
+									className={styles.input_extra}
+									placeholder="Введите значение"
+								/>
+							)}
+						/>
+						<MainButton
+							variant={'trivial'}
+							width={'min'}
+							disabled={false}
+							onClick={() => remove(index)}>
+							<Trash2 color="black" />
+						</MainButton>
+					</div>
+				))}
+			</div>
+			<div className={styles.buttons}>
+				<MainButton
+					variant="secondary"
+					name="add"
+					width="regular"
+					IconLeft={
+						Plus as React.ComponentType<React.HTMLAttributes<HTMLElement>>
+					}
+					onClick={() => append({ id: uuidv4(), type: '', value: '' })}>
+					Добавить
+				</MainButton>
+				<MainButton 
+			onClick={() => remove()}
+
+				variant={'trivial'} width={'min'} disabled={false}>
+					Сбросить
+				</MainButton>
+			</div>
+		</>
+	);
+};
diff --git a/src/services/ProjectService.ts b/src/services/ProjectService.ts
index 87e6ff34..d033a6d0 100644
--- a/src/services/ProjectService.ts
+++ b/src/services/ProjectService.ts
@@ -14,7 +14,7 @@ export const projectsApi = createApi({
 			}),
 		}),
 		getAllProjects: builder.query({
-			query: ({currentPage}) => ({
+			query: ({ currentPage }) => ({
 				url: `/projects/?page=${currentPage}`,
 				method: 'GET',
 			}),
@@ -25,6 +25,13 @@ export const projectsApi = createApi({
 				method: 'GET',
 			}),
 		}),
+		postProject: builder.mutation({
+			query: ({ body }) => ({
+				url: `/projects/`,
+				method: 'POST',
+				body: body,
+			}),
+		}),
 	}),
 });
 
@@ -32,4 +39,5 @@ export const {
 	useGetProjectsPreviewMainQuery,
 	useGetAllProjectsQuery,
 	useGetProjectByIdQuery,
+	usePostProjectMutation,
 } = projectsApi;
diff --git a/src/shared/ui/text-editor/text-editor.tsx b/src/shared/ui/text-editor/text-editor.tsx
index cf7c6651..804890a7 100644
--- a/src/shared/ui/text-editor/text-editor.tsx
+++ b/src/shared/ui/text-editor/text-editor.tsx
@@ -4,36 +4,21 @@ import 'react-quill-new/dist/quill.snow.css';
 import styles from './text-editor.module.scss';
 import dynamic from 'next/dynamic';
 const ReactQuill = dynamic(() => import('react-quill-new'), { ssr: false });
-import Quill from 'react-quill-new';
+import { Controller } from 'react-hook-form';
 
 export const TextEditor: FC<TextEditorProps> = ({
 	labelName,
 	placeholder,
 	desc,
+	name,
+	control,
 	...props
 }) => {
-	const [value, setValue] = useState<string>('');
 	const [isWindowLoaded, setIsWindowLoaded] = useState<boolean>(false);
 
 	useEffect(() => {
 		setIsWindowLoaded(true);
 	}, []);
-	const handleChange = (
-		content: string,
-		// eslint-disable-next-line
-		delta: any,
-		// eslint-disable-next-line
-		source: any,
-		editor: Quill.UnprivilegedEditor
-	) => {
-		if (typeof window === 'object') {
-			if (editor.getLength() <= 751) {
-				setValue(content);
-			} else {
-				alert('Превышено количество символов.');
-			}
-		}
-	};
 
 	const myModule = {
 		toolbar: {
@@ -53,13 +38,19 @@ export const TextEditor: FC<TextEditorProps> = ({
 				<p className={styles.title}>{labelName}</p>
 				<div className={styles.editor}>
 					{isWindowLoaded && (
-						<ReactQuill
-							placeholder={placeholder}
-							modules={myModule}
-							theme="snow"
-							value={value}
-							onChange={handleChange}
-							className={styles.inputMain}
+						<Controller
+							name={name}
+							control={control}
+							render={({ field }) => (
+								<ReactQuill
+									placeholder={placeholder}
+									modules={myModule}
+									theme="snow"
+									value={field.value || ''}
+									onChange={field.onChange}
+									className={styles.inputMain}
+								/>
+							)}
 							{...props}
 						/>
 					)}
diff --git a/src/shared/ui/text-editor/types.ts b/src/shared/ui/text-editor/types.ts
index 75306be2..bb7e6da9 100644
--- a/src/shared/ui/text-editor/types.ts
+++ b/src/shared/ui/text-editor/types.ts
@@ -1,5 +1,8 @@
 export type TextEditorProps = {
-	labelName: string;
+	labelName?: string;
 	placeholder?: string;
 	desc?: string;
+	name: string; // Name for form field
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	control?: any; // React Hook Form's control object for Controller
 };
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index c3f5c128..1e8397ac 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -45,7 +45,7 @@ export const LEVEL = [
 export const CONTACTS = [
 	{
 		label: 'telegram',
-		value: 'telegram',
+		value: 'telegram_nick',
 	},
 	{
 		label: 'email',
@@ -53,6 +53,6 @@ export const CONTACTS = [
 	},
 	{
 		label: 'phone',
-		value: 'phone',
+		value: 'phone_number',
 	},
 ];
diff --git a/src/widgets/form-project-details/types.ts b/src/widgets/form-project-details/types.ts
new file mode 100644
index 00000000..387538c9
--- /dev/null
+++ b/src/widgets/form-project-details/types.ts
@@ -0,0 +1,39 @@
+export type ProjectCardDetailType = {
+	name: string;
+	description: string;
+	started: string;
+	ended: string;
+	directions: [
+		{
+			id: number;
+			name: string;
+		},
+	];
+	busyness: number;
+	phone_number: string;
+	link: string;
+	owner: {
+		avatar: string;
+		id: number;
+		name: string;
+		username: string;
+	};
+	status: string;
+	recruitment_status?: string;
+	project_specialists: [
+		{
+			id: number;
+			profession: {
+				id: number;
+				specialization: string;
+				specialty: string;
+			};
+			skills: {
+				id: number;
+				name: string;
+			}[];
+			count: number;
+			level: string;
+		},
+	];
+};
diff --git a/src/widgets/form-project-details/ui/form-project.tsx b/src/widgets/form-project-details/ui/form-project.tsx
index a51152ad..5f025427 100644
--- a/src/widgets/form-project-details/ui/form-project.tsx
+++ b/src/widgets/form-project-details/ui/form-project.tsx
@@ -3,29 +3,36 @@ import React from 'react';
 import styles from './form-project.module.scss';
 import { CheckboxAndRadio, Form, Input, MainButton } from '@/shared/ui';
 import { TextEditor } from '@/shared/ui/text-editor/text-editor';
-import { CONTACTS, DEVELOPING, EMPLOYMENT } from '@/utils/constants';
+import { DEVELOPING, EMPLOYMENT } from '@/utils/constants';
 import { DatePickerRHF } from '@/shared/ui/date-picker-rhf/date-picker-rhf';
 import { useForm } from 'react-hook-form';
-import { SingleSelectInput } from '@/shared/ui/single-select-input/single-select-input';
-import { Plus } from 'lucide-react';
+import { Contacts } from '@/entities/contacts/contacts';
 
 export const FormProject = () => {
 	const { control } = useForm();
+
+	const handleSubmit = (data) => {
+		console.table(data);
+	};
+
 	return (
-		<Form className={styles.container} onSubmit={undefined}>
+		<Form className={styles.container} onSubmit={handleSubmit}>
 			<div className={styles.specialists}>
 				<h1 className={styles.specialists_master_title}>Название проекта</h1>
 				<div className={styles.input_list}>
 					<Input
 						name="name"
+						required
 						labelName="Название проекта"
 						className={styles.input_extra}
 					/>
 					<TextEditor
 						labelName={'Описание проекта'}
+						name={'description'}
 						desc={
 							'Расскажите о проекте и его цели используя не более 750 символов'
 						}
+						control={control}
 					/>
 				</div>
 
@@ -38,6 +45,7 @@ export const FormProject = () => {
 									labelName={profession.field}
 									label={`professions`}
 									type={'checkbox'}
+									required
 									id={`professions_${profession.id}`}
 									name={'professions'}
 								/>
@@ -54,7 +62,8 @@ export const FormProject = () => {
 								<CheckboxAndRadio
 									labelName={busyness.name}
 									label={`busyness`}
-									type={'checkbox'}
+									type={'radio'}
+									required
 									id={`busyness_${busyness.id}.`}
 									name={'busyness'}
 								/>
@@ -77,31 +86,7 @@ export const FormProject = () => {
 				</div>
 
 				<div className={styles.contacts}>
-					<h3 className={styles.input_list_title}>Контакты для связи</h3>
-					<div className={styles.contacts_selects}>
-						<SingleSelectInput
-							name={`project_specialists`}
-							onChange={() => {}}
-							options={CONTACTS}
-							description={'Выберите ресурс'}
-						/>
-						<Input labelName="" name="name" className={styles.input_extra} />
-					</div>
-				</div>
-
-				<div className={styles.specialists_buttons}>
-					<MainButton
-						variant="secondary"
-						width="regular"
-						IconLeft={
-							Plus as React.ComponentType<React.HTMLAttributes<HTMLElement>>
-						}
-						onClick={() => ({})}>
-						Добавить
-					</MainButton>
-					<MainButton variant="trivial" width="regular" onClick={() => ({})}>
-						Сбросить
-					</MainButton>
+						<Contacts control={control} />
 				</div>
 
 				<Input
@@ -113,10 +98,18 @@ export const FormProject = () => {
 						'Добавьте ссылку на ваш проект, например: GitHub, приложение, веб страница и др.'
 					}
 				/>
-
-				<MainButton variant={'trivial'} width={'min'} disabled={false}>
-					{'Очистить'}
-				</MainButton>
+				<div className={styles.specialists_buttons}>
+					<MainButton
+						variant={'primary'}
+						width={'min'}
+						type="submit"
+						disabled={false}>
+						{'Submit'}
+					</MainButton>
+					<MainButton variant={'trivial'} width={'min'} disabled={false}>
+						{'Очистить'}
+					</MainButton>
+				</div>
 			</div>
 		</Form>
 	);
diff --git a/src/widgets/form-project-specialists/ui/form-project-specialists.tsx b/src/widgets/form-project-specialists/ui/form-project-specialists.tsx
index 9e49c92f..8f2a8f2c 100644
--- a/src/widgets/form-project-specialists/ui/form-project-specialists.tsx
+++ b/src/widgets/form-project-specialists/ui/form-project-specialists.tsx
@@ -9,6 +9,7 @@ import {
 	useGetProfessionsQuery,
 	useGetSkillsQuery,
 } from '@/services/AttributesService';
+import { FormCreateProjectCard } from '@/entities/form-create-project-card';
 
 export const FormProjectSpecialists = () => {
 	const [recruitmentIsOpen, setRecruitmentIsOpen] = useState(false);
@@ -16,9 +17,11 @@ export const FormProjectSpecialists = () => {
 	const { data: skills } = useGetSkillsQuery([]) 
 	const { data: profession } = useGetProfessionsQuery([]) 
 
-	console.log(skills);
+	const onSubmit = (data) => {
+		console.table(data)
+	}
 	return (
-		<Form className={styles.container} onSubmit={undefined}>
+		<Form className={styles.container} onSubmit={onSubmit}>
 			<div className={styles.specialists}>
 				<h3 className={styles.specialists_master_title}>Кто нужен в проект</h3>
 				<div className={styles.specialists_toggle}>
@@ -31,16 +34,17 @@ export const FormProjectSpecialists = () => {
 					/>
 				</div>
 
-				{/* <FormCreateProjectCard /> */}
+				<FormCreateProjectCard />
+			
 				<SingleSelectInput
 					name={`project_specialists`}
 					label={'Специальность'}
 					onChange={() => {}}
 					options={profession?.map(
-						(specialization: { id: number; name: string }) => {
+						(specialization: { id: number; specialization: string }) => {
 							return {
-								label: specialization.id,
-								value: specialization.name,
+								label: specialization.specialization,
+								value: specialization.id,
 							};
 						}
 					)}
@@ -66,8 +70,8 @@ export const FormProjectSpecialists = () => {
 						onChange={() => {}}
 						options={skills?.map((skill: { id: number; name: string }) => {
 							return {
-								label: skill.id,
-								value: skill.name,
+								label: skill.name,
+								value: skill.id,
 							};
 						})}
 						values={[]}
diff --git a/src/widgets/managa-project-settings/ui/manage-project-setting.tsx b/src/widgets/managa-project-settings/ui/manage-project-setting.tsx
index b9d66cf4..9d7f6048 100644
--- a/src/widgets/managa-project-settings/ui/manage-project-setting.tsx
+++ b/src/widgets/managa-project-settings/ui/manage-project-setting.tsx
@@ -11,8 +11,12 @@ import { Plus } from 'lucide-react';
 
 export const ManageProjectsSetting = () => {
 	const { control } = useForm();
+
+	const onSubmit = (data) => {
+		console.table(data);
+	};
 	return (
-		<Form className={styles.container} onSubmit={undefined}>
+		<Form className={styles.container} onSubmit={onSubmit}>
 			<div className={styles.specialists}>
 				<h1 className={styles.specialists_master_title}>Название проекта</h1>
 				<div className={styles.input_list}>
diff --git a/src/widgets/manage-specialists/ui/manage-specialists.tsx b/src/widgets/manage-specialists/ui/manage-specialists.tsx
index 4fcc6cf6..d4583125 100644
--- a/src/widgets/manage-specialists/ui/manage-specialists.tsx
+++ b/src/widgets/manage-specialists/ui/manage-specialists.tsx
@@ -18,8 +18,13 @@ export const ManageSpecialists = () => {
 	const { data: profession } = useGetProfessionsQuery([]) 
 
 	console.log(skills);
+
+	
+	const onSubmit = (data) => {
+		console.table(data)
+	}
 	return (
-		<Form className={styles.container} onSubmit={undefined}>
+		<Form className={styles.container} onSubmit={onSubmit}>
 			<div className={styles.specialists}>
 				<h3 className={styles.specialists_master_title}>Кто нужен в проект</h3>
 				<div className={styles.specialists_toggle}>

From 4f7534eb23578c4041d313b4d7410ec2936a7f38 Mon Sep 17 00:00:00 2001
From: Olek <149747215+Primis1@users.noreply.github.com>
Date: Tue, 24 Sep 2024 23:45:23 -0400
Subject: [PATCH 07/19] add: not working contacts

---
 src/entities/contacts/contacts.tsx            | 67 ++++++++++++-------
 .../form-project-details/ui/form-project.tsx  | 32 ++++++---
 2 files changed, 68 insertions(+), 31 deletions(-)

diff --git a/src/entities/contacts/contacts.tsx b/src/entities/contacts/contacts.tsx
index ade1caa1..0b223bef 100644
--- a/src/entities/contacts/contacts.tsx
+++ b/src/entities/contacts/contacts.tsx
@@ -2,17 +2,19 @@ import { MainButton } from '@/shared/ui';
 import { Plus, Trash2 } from 'lucide-react';
 import React from 'react';
 import styles from './contacts.module.scss';
-import {  useFieldArray, Controller, Control, FieldValues } from 'react-hook-form';
+import { useFieldArray, Controller, Control, useWatch } from 'react-hook-form';
 import { v4 as uuidv4 } from 'uuid';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const Contacts = (control: Control<FieldValues, any>) => {
-
-	const { fields, append, remove } = useFieldArray({
+export const Contacts = ({ control }: { control: Control<any> }) => {
+	const { fields, append, remove, update } = useFieldArray({
 		control,
 		name: 'contacts',
 	});
 
+	// Watching the contacts array to dynamically handle the selected type
+	const contacts = useWatch({ control, name: 'contacts', defaultValue: [] });
+
 	return (
 		<>
 			<h3 className={styles.contacts_title}>Контакты для связи</h3>
@@ -20,10 +22,22 @@ export const Contacts = (control: Control<FieldValues, any>) => {
 				{fields.map((field, index) => (
 					<div key={field.id} className={styles.container}>
 						<Controller
-							name={`contacts[${index}].type`}
+							name={`contacts.${index}.type`} // Type like phone, email, telegram
 							control={control}
+							defaultValue={field.type || ''}
 							render={({ field }) => (
-								<select className={styles.select} {...field}>
+								<select
+									className={styles.select}
+									{...field}
+									onChange={(e) => {
+										// Update the contact type and reset the value field
+										update(index, {
+											...contacts[index],
+											type: e.target.value,
+											value: '',
+										});
+										field.onChange(e);
+									}}>
 									<option value="">Выберите ресурс</option>
 									<option value="phone">Телефон</option>
 									<option value="email">Email</option>
@@ -31,17 +45,22 @@ export const Contacts = (control: Control<FieldValues, any>) => {
 								</select>
 							)}
 						/>
-						<Controller
-							name={`contacts[${index}].value`}
-							control={control}
-							render={({ field }) => (
-								<input
-									{...field}
-									className={styles.input_extra}
-									placeholder="Введите значение"
-								/>
-							)}
-						/>
+
+						{/* Contact Value Input */}
+						{contacts[index]?.type && (
+							<Controller
+								name={`contacts.${index}.value`} // Use 'value' to capture the input
+								control={control}
+								defaultValue={field.value || ''}
+								render={({ field }) => (
+									<input
+										{...field}
+										className={styles.input_extra}
+										placeholder={`Введите ${contacts[index].type}`}
+									/>
+								)}
+							/>
+						)}
 						<MainButton
 							variant={'trivial'}
 							width={'min'}
@@ -55,18 +74,20 @@ export const Contacts = (control: Control<FieldValues, any>) => {
 			<div className={styles.buttons}>
 				<MainButton
 					variant="secondary"
-					name="add"
 					width="regular"
 					IconLeft={
 						Plus as React.ComponentType<React.HTMLAttributes<HTMLElement>>
 					}
-					onClick={() => append({ id: uuidv4(), type: '', value: '' })}>
+					type="button"
+					onClick={() => append({ id: uuidv4(), type: '', value: '' })} // Append new contact
+				>
 					Добавить
 				</MainButton>
-				<MainButton 
-			onClick={() => remove()}
-
-				variant={'trivial'} width={'min'} disabled={false}>
+				<MainButton
+					onClick={() => remove()} // Optional: remove all contacts
+					variant={'trivial'}
+					width={'min'}
+					disabled={false}>
 					Сбросить
 				</MainButton>
 			</div>
diff --git a/src/widgets/form-project-details/ui/form-project.tsx b/src/widgets/form-project-details/ui/form-project.tsx
index 5f025427..b7832861 100644
--- a/src/widgets/form-project-details/ui/form-project.tsx
+++ b/src/widgets/form-project-details/ui/form-project.tsx
@@ -5,24 +5,40 @@ import { CheckboxAndRadio, Form, Input, MainButton } from '@/shared/ui';
 import { TextEditor } from '@/shared/ui/text-editor/text-editor';
 import { DEVELOPING, EMPLOYMENT } from '@/utils/constants';
 import { DatePickerRHF } from '@/shared/ui/date-picker-rhf/date-picker-rhf';
-import { useForm } from 'react-hook-form';
+import { SubmitHandler, useForm } from 'react-hook-form';
 import { Contacts } from '@/entities/contacts/contacts';
+type FormValues = {
+	name: string;
+	contacts: { [key: string]: string }[]; // Dynamic contact keys
+};
 
 export const FormProject = () => {
 	const { control } = useForm();
 
-	const handleSubmit = (data) => {
-		console.table(data);
+	const onSubmit: SubmitHandler<FormValues> = (data) => {
+		// Process the contacts array to map type to value
+		const formattedContacts = data.contacts?.reduce((acc, contact) => {
+			if (contact.type && contact.value) {
+				acc[contact.type] = contact.value; // Make contact type the key
+			}
+			return acc;
+		}, {} as { [key: string]: string });
+
+		console.log('Formatted Contacts:', formattedContacts);
+		console.log('Full Form Data:', { ...data, contacts: formattedContacts });
 	};
 
+
+
 	return (
-		<Form className={styles.container} onSubmit={handleSubmit}>
+
+		<Form className={styles.container} onSubmit={onSubmit}>
 			<div className={styles.specialists}>
 				<h1 className={styles.specialists_master_title}>Название проекта</h1>
 				<div className={styles.input_list}>
 					<Input
 						name="name"
-						required
+						
 						labelName="Название проекта"
 						className={styles.input_extra}
 					/>
@@ -45,7 +61,7 @@ export const FormProject = () => {
 									labelName={profession.field}
 									label={`professions`}
 									type={'checkbox'}
-									required
+									
 									id={`professions_${profession.id}`}
 									name={'professions'}
 								/>
@@ -63,7 +79,7 @@ export const FormProject = () => {
 									labelName={busyness.name}
 									label={`busyness`}
 									type={'radio'}
-									required
+									
 									id={`busyness_${busyness.id}.`}
 									name={'busyness'}
 								/>
@@ -86,7 +102,7 @@ export const FormProject = () => {
 				</div>
 
 				<div className={styles.contacts}>
-						<Contacts control={control} />
+					<Contacts control={control} />
 				</div>
 
 				<Input

From c414ae3ec7eee82bf50b21d4b8f1fc52283f529f Mon Sep 17 00:00:00 2001
From: Olek <149747215+Primis1@users.noreply.github.com>
Date: Thu, 26 Sep 2024 23:37:21 -0400
Subject: [PATCH 08/19] add: contact fields in request;

comment: it finally fkn work
---
 src/entities/contacts/contacts.tsx            | 48 ++++++++++++-------
 .../form-project-details/ui/form-project.tsx  | 11 +----
 2 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/src/entities/contacts/contacts.tsx b/src/entities/contacts/contacts.tsx
index 0b223bef..335dccfe 100644
--- a/src/entities/contacts/contacts.tsx
+++ b/src/entities/contacts/contacts.tsx
@@ -1,4 +1,4 @@
-import { MainButton } from '@/shared/ui';
+import { Input, MainButton } from '@/shared/ui';
 import { Plus, Trash2 } from 'lucide-react';
 import React from 'react';
 import styles from './contacts.module.scss';
@@ -12,15 +12,21 @@ export const Contacts = ({ control }: { control: Control<any> }) => {
 		name: 'contacts',
 	});
 
-	// Watching the contacts array to dynamically handle the selected type
+	// Watching the contacts array to dynamically handle the selected types
 	const contacts = useWatch({ control, name: 'contacts', defaultValue: [] });
 
+	// Function to check if a contact type is already selected to disable that option
+	const isTypeDisabled = (type: string) => {
+		return contacts.some((contact: { type: string }) => contact.type === type);
+	};
+
 	return (
 		<>
 			<h3 className={styles.contacts_title}>Контакты для связи</h3>
 			<div className={styles.contacts}>
 				{fields.map((field, index) => (
 					<div key={field.id} className={styles.container}>
+						{/* Contact Type Select */}
 						<Controller
 							name={`contacts.${index}.type`} // Type like phone, email, telegram
 							control={control}
@@ -39,28 +45,29 @@ export const Contacts = ({ control }: { control: Control<any> }) => {
 										field.onChange(e);
 									}}>
 									<option value="">Выберите ресурс</option>
-									<option value="phone">Телефон</option>
-									<option value="email">Email</option>
-									<option value="telegram">Telegram</option>
+									<option value="phone" disabled={isTypeDisabled('phone')}>
+										Телефон
+									</option>
+									<option value="email" disabled={isTypeDisabled('email')}>
+										Email
+									</option>
+									<option
+										value="telegram"
+										disabled={isTypeDisabled('telegram')}>
+										Telegram
+									</option>
 								</select>
 							)}
 						/>
-
 						{/* Contact Value Input */}
-						{contacts[index]?.type && (
-							<Controller
+						{contacts[index] && (
+							<Input
 								name={`contacts.${index}.value`} // Use 'value' to capture the input
-								control={control}
-								defaultValue={field.value || ''}
-								render={({ field }) => (
-									<input
-										{...field}
-										className={styles.input_extra}
-										placeholder={`Введите ${contacts[index].type}`}
-									/>
-								)}
+								className={styles.input_extra}
+								placeholder={`Введите ${contacts[index].type}`}
 							/>
 						)}
+						{/* Remove Button */}
 						<MainButton
 							variant={'trivial'}
 							width={'min'}
@@ -71,6 +78,8 @@ export const Contacts = ({ control }: { control: Control<any> }) => {
 					</div>
 				))}
 			</div>
+
+			{/* Add Contact Button */}
 			<div className={styles.buttons}>
 				<MainButton
 					variant="secondary"
@@ -80,11 +89,14 @@ export const Contacts = ({ control }: { control: Control<any> }) => {
 					}
 					type="button"
 					onClick={() => append({ id: uuidv4(), type: '', value: '' })} // Append new contact
+					disabled={contacts.length >= 3} // Disable if all types are selected
 				>
 					Добавить
 				</MainButton>
+
+				{/* Reset Button */}
 				<MainButton
-					onClick={() => remove()} // Optional: remove all contacts
+					onClick={() => remove()} // Remove all contacts
 					variant={'trivial'}
 					width={'min'}
 					disabled={false}>
diff --git a/src/widgets/form-project-details/ui/form-project.tsx b/src/widgets/form-project-details/ui/form-project.tsx
index b7832861..e9007868 100644
--- a/src/widgets/form-project-details/ui/form-project.tsx
+++ b/src/widgets/form-project-details/ui/form-project.tsx
@@ -16,16 +16,7 @@ export const FormProject = () => {
 	const { control } = useForm();
 
 	const onSubmit: SubmitHandler<FormValues> = (data) => {
-		// Process the contacts array to map type to value
-		const formattedContacts = data.contacts?.reduce((acc, contact) => {
-			if (contact.type && contact.value) {
-				acc[contact.type] = contact.value; // Make contact type the key
-			}
-			return acc;
-		}, {} as { [key: string]: string });
-
-		console.log('Formatted Contacts:', formattedContacts);
-		console.log('Full Form Data:', { ...data, contacts: formattedContacts });
+		console.table(data);
 	};
 
 

From 38940944c735cc98573e4c06cf2309ffbe6f5664 Mon Sep 17 00:00:00 2001
From: Olek <149747215+Primis1@users.noreply.github.com>
Date: Sun, 29 Sep 2024 22:37:58 -0400
Subject: [PATCH 09/19] fix: two forms now one

---
 src/entities/contacts/contacts.module.scss    | 16 ++-------
 src/entities/contacts/contacts.tsx            |  3 +-
 .../ui/profile-create-project-page.tsx        | 31 ++++++++++++----
 src/services/ProjectService.ts                |  3 +-
 src/services/models/IProject.ts               | 25 +++++++++++++
 .../form-project-details/ui/form-project.tsx  | 35 ++++---------------
 .../ui/form-project-specialists.tsx           | 10 +++---
 7 files changed, 67 insertions(+), 56 deletions(-)

diff --git a/src/entities/contacts/contacts.module.scss b/src/entities/contacts/contacts.module.scss
index cae3db9a..fee6aa11 100644
--- a/src/entities/contacts/contacts.module.scss
+++ b/src/entities/contacts/contacts.module.scss
@@ -26,28 +26,17 @@
 
 .container {
 	display: flex;
+	// justify-content: center;
 	align-items: center;
 }
 
 .input_extra {
 	width: 100%;
 	display: block;
-	padding: 12px 36px 12px 12px;
+	// padding: 12px 36px 12px 12px;
 	margin: 0;
 	border-radius: 12px;
 	min-height: 50px;
-	box-sizing: border-box;
-	border: 1px solid;
-	color: $--Foreground-default;
-	background-color: $--bg-primary;
-	font-size: 16px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 23px;
-	position: relative;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
 
 	&::placeholder {
 		color: $--Foreground-subtitle;
@@ -78,6 +67,7 @@
 	height: 50px;
 	padding: 0px 10px;
 	width: auto;
+	border-color:  $--Foreground-default;
 	border-radius: 12px;
 
 	&::placeholder {
diff --git a/src/entities/contacts/contacts.tsx b/src/entities/contacts/contacts.tsx
index 335dccfe..dbf1401b 100644
--- a/src/entities/contacts/contacts.tsx
+++ b/src/entities/contacts/contacts.tsx
@@ -62,9 +62,10 @@ export const Contacts = ({ control }: { control: Control<any> }) => {
 						{/* Contact Value Input */}
 						{contacts[index] && (
 							<Input
+								labelName=""
 								name={`contacts.${index}.value`} // Use 'value' to capture the input
 								className={styles.input_extra}
-								placeholder={`Введите ${contacts[index].type}`}
+								// placeholder={`Введите ${contacts[index].type}`}
 							/>
 						)}
 						{/* Remove Button */}
diff --git a/src/pages/profile-create-project-page/ui/profile-create-project-page.tsx b/src/pages/profile-create-project-page/ui/profile-create-project-page.tsx
index cc9f2441..7f8e15e1 100644
--- a/src/pages/profile-create-project-page/ui/profile-create-project-page.tsx
+++ b/src/pages/profile-create-project-page/ui/profile-create-project-page.tsx
@@ -1,14 +1,31 @@
-import {
-	FormProject,
-	FormProjectSpecialists,
-} from '@/widgets';
+"use client"
+import { MainButton } from '@/shared/ui';
+import { FormProject, FormProjectSpecialists } from '@/widgets';
 import React from 'react';
+import { Form, SubmitHandler, useForm } from 'react-hook-form';
 
+type FormValues = {
+	name: string;
+	contacts: { [key: string]: string }[]; // Dynamic contact keys
+};
 export const ProfileCreateProject = () => {
+	const onSubmit: SubmitHandler<FormValues> = (data) => {
+		console.table(data);
+	};
+    const { control } = useForm();
+
 	return (
-		<>
-			<FormProject />
+		<Form onSubmit={onSubmit}>
+			<FormProject control={control} />
 			<FormProjectSpecialists />
-		</>
+
+			<MainButton
+				variant={'primary'}
+				width={'min'}
+				type="submit"
+				disabled={false}>
+				{'Submit'}
+			</MainButton>
+		</Form>
 	);
 };
diff --git a/src/services/ProjectService.ts b/src/services/ProjectService.ts
index d033a6d0..1e35544f 100644
--- a/src/services/ProjectService.ts
+++ b/src/services/ProjectService.ts
@@ -1,4 +1,5 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+import { ProjectService } from './models/IProject';
 const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
 
 export const projectsApi = createApi({
@@ -26,7 +27,7 @@ export const projectsApi = createApi({
 			}),
 		}),
 		postProject: builder.mutation({
-			query: ({ body }) => ({
+			query: (body : ProjectService) => ({
 				url: `/projects/`,
 				method: 'POST',
 				body: body,
diff --git a/src/services/models/IProject.ts b/src/services/models/IProject.ts
index 3da04057..a621fd76 100644
--- a/src/services/models/IProject.ts
+++ b/src/services/models/IProject.ts
@@ -4,3 +4,28 @@ export interface IProject {
 	image: string;
 	isLiked: boolean;
 }
+
+
+export type ProjectService = {
+	id: number,
+	started: string;
+	ended: string;
+	name: string;
+	directions: [
+		{
+			id: number;
+			name: string;
+		},
+	];
+	project_specialists: [
+		{
+			id: number;
+			profession: {
+				id: number;
+				specialization: string;
+				specialty: string;
+			};
+		},
+	];
+
+}
\ No newline at end of file
diff --git a/src/widgets/form-project-details/ui/form-project.tsx b/src/widgets/form-project-details/ui/form-project.tsx
index e9007868..2d881960 100644
--- a/src/widgets/form-project-details/ui/form-project.tsx
+++ b/src/widgets/form-project-details/ui/form-project.tsx
@@ -1,35 +1,23 @@
 'use client';
 import React from 'react';
 import styles from './form-project.module.scss';
-import { CheckboxAndRadio, Form, Input, MainButton } from '@/shared/ui';
+import { CheckboxAndRadio,  Input, MainButton } from '@/shared/ui';
 import { TextEditor } from '@/shared/ui/text-editor/text-editor';
 import { DEVELOPING, EMPLOYMENT } from '@/utils/constants';
 import { DatePickerRHF } from '@/shared/ui/date-picker-rhf/date-picker-rhf';
-import { SubmitHandler, useForm } from 'react-hook-form';
+import { Control } from 'react-hook-form';
 import { Contacts } from '@/entities/contacts/contacts';
-type FormValues = {
-	name: string;
-	contacts: { [key: string]: string }[]; // Dynamic contact keys
-};
-
-export const FormProject = () => {
-	const { control } = useForm();
-
-	const onSubmit: SubmitHandler<FormValues> = (data) => {
-		console.table(data);
-	};
-
-
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const FormProject = ({ control }: { control: Control<any> }) => {
+	
 	return (
-
-		<Form className={styles.container} onSubmit={onSubmit}>
+		<div className={styles.container}>
 			<div className={styles.specialists}>
 				<h1 className={styles.specialists_master_title}>Название проекта</h1>
 				<div className={styles.input_list}>
 					<Input
 						name="name"
-						
 						labelName="Название проекта"
 						className={styles.input_extra}
 					/>
@@ -52,7 +40,6 @@ export const FormProject = () => {
 									labelName={profession.field}
 									label={`professions`}
 									type={'checkbox'}
-									
 									id={`professions_${profession.id}`}
 									name={'professions'}
 								/>
@@ -70,7 +57,6 @@ export const FormProject = () => {
 									labelName={busyness.name}
 									label={`busyness`}
 									type={'radio'}
-									
 									id={`busyness_${busyness.id}.`}
 									name={'busyness'}
 								/>
@@ -106,18 +92,11 @@ export const FormProject = () => {
 					}
 				/>
 				<div className={styles.specialists_buttons}>
-					<MainButton
-						variant={'primary'}
-						width={'min'}
-						type="submit"
-						disabled={false}>
-						{'Submit'}
-					</MainButton>
 					<MainButton variant={'trivial'} width={'min'} disabled={false}>
 						{'Очистить'}
 					</MainButton>
 				</div>
 			</div>
-		</Form>
+		</div>
 	);
 };
diff --git a/src/widgets/form-project-specialists/ui/form-project-specialists.tsx b/src/widgets/form-project-specialists/ui/form-project-specialists.tsx
index 8f2a8f2c..7f514a2a 100644
--- a/src/widgets/form-project-specialists/ui/form-project-specialists.tsx
+++ b/src/widgets/form-project-specialists/ui/form-project-specialists.tsx
@@ -1,7 +1,7 @@
 'use client';
 import React, { useState } from 'react';
 import styles from './form-project-specialists.module.scss';
-import { Form, Toggler } from '@/shared/ui';
+import { Toggler } from '@/shared/ui';
 import { SingleSelectInput } from '@/shared/ui/single-select-input/single-select-input';
 import { MultiSelectInput } from '@/shared/ui/multi-select-input/multi-select-input';
 import { LEVEL } from '@/utils/constants';
@@ -17,11 +17,9 @@ export const FormProjectSpecialists = () => {
 	const { data: skills } = useGetSkillsQuery([]) 
 	const { data: profession } = useGetProfessionsQuery([]) 
 
-	const onSubmit = (data) => {
-		console.table(data)
-	}
+
 	return (
-		<Form className={styles.container} onSubmit={onSubmit}>
+		<div className={styles.container}>
 			<div className={styles.specialists}>
 				<h3 className={styles.specialists_master_title}>Кто нужен в проект</h3>
 				<div className={styles.specialists_toggle}>
@@ -81,6 +79,6 @@ export const FormProjectSpecialists = () => {
 					/>
 				</div>
 			</div>
-		</Form>
+		</div>
 	);
 };

From 1a218f396d3c931403ab1f9f77871ff49520654f Mon Sep 17 00:00:00 2001
From: Olek <149747215+Primis1@users.noreply.github.com>
Date: Thu, 3 Oct 2024 00:24:57 -0400
Subject: [PATCH 10/19] fix: form-error, page layout

---
 package-lock.json                             |  9 +++---
 src/entities/contacts/contacts.tsx            |  2 +-
 .../profile-create-project-page.module.scss   |  7 +++++
 .../ui/profile-create-project-page.tsx        | 29 ++++++++++---------
 4 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3ef82e5d..1cae235d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4830,9 +4830,9 @@
 			}
 		},
 		"node_modules/caniuse-lite": {
-			"version": "1.0.30001609",
-			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001609.tgz",
-			"integrity": "sha512-JFPQs34lHKx1B5t1EpQpWH4c+29zIyn/haGsbpfq3suuV9v56enjFt23zqijxGTMwy1p/4H2tjnQMY+p1WoAyA==",
+			"version": "1.0.30001666",
+			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001666.tgz",
+			"integrity": "sha512-gD14ICmoV5ZZM1OdzPWmpx+q4GyefaK06zi8hmfHV5xe4/2nOQX3+Dw5o+fSqOws2xVwL9j+anOPFwHzdEdV4g==",
 			"funding": [
 				{
 					"type": "opencollective",
@@ -4846,7 +4846,8 @@
 					"type": "github",
 					"url": "https://github.com/sponsors/ai"
 				}
-			]
+			],
+			"license": "CC-BY-4.0"
 		},
 		"node_modules/chalk": {
 			"version": "2.4.2",
diff --git a/src/entities/contacts/contacts.tsx b/src/entities/contacts/contacts.tsx
index dbf1401b..8935794d 100644
--- a/src/entities/contacts/contacts.tsx
+++ b/src/entities/contacts/contacts.tsx
@@ -9,7 +9,7 @@ import { v4 as uuidv4 } from 'uuid';
 export const Contacts = ({ control }: { control: Control<any> }) => {
 	const { fields, append, remove, update } = useFieldArray({
 		control,
-		name: 'contacts',
+		name: 'telegram',
 	});
 
 	// Watching the contacts array to dynamically handle the selected types
diff --git a/src/pages/profile-create-project-page/ui/profile-create-project-page.module.scss b/src/pages/profile-create-project-page/ui/profile-create-project-page.module.scss
index e69de29b..5cbe9541 100644
--- a/src/pages/profile-create-project-page/ui/profile-create-project-page.module.scss
+++ b/src/pages/profile-create-project-page/ui/profile-create-project-page.module.scss
@@ -0,0 +1,7 @@
+.form {
+	all: unset;
+}
+
+.btn  {
+	margin-top: 10px;
+}
\ No newline at end of file
diff --git a/src/pages/profile-create-project-page/ui/profile-create-project-page.tsx b/src/pages/profile-create-project-page/ui/profile-create-project-page.tsx
index 7f8e15e1..41de53cc 100644
--- a/src/pages/profile-create-project-page/ui/profile-create-project-page.tsx
+++ b/src/pages/profile-create-project-page/ui/profile-create-project-page.tsx
@@ -1,8 +1,10 @@
-"use client"
-import { MainButton } from '@/shared/ui';
+'use client';
+import { Form, MainButton } from '@/shared/ui';
 import { FormProject, FormProjectSpecialists } from '@/widgets';
 import React from 'react';
-import { Form, SubmitHandler, useForm } from 'react-hook-form';
+import styles from './profile-create-project-page.module.scss';
+
+import { SubmitHandler, useForm } from 'react-hook-form';
 
 type FormValues = {
 	name: string;
@@ -12,20 +14,21 @@ export const ProfileCreateProject = () => {
 	const onSubmit: SubmitHandler<FormValues> = (data) => {
 		console.table(data);
 	};
-    const { control } = useForm();
+	const { control } = useForm();
 
 	return (
-		<Form onSubmit={onSubmit}>
+		<Form onSubmit={onSubmit} extraClass={styles.form}>
 			<FormProject control={control} />
 			<FormProjectSpecialists />
-
-			<MainButton
-				variant={'primary'}
-				width={'min'}
-				type="submit"
-				disabled={false}>
-				{'Submit'}
-			</MainButton>
+			<div className={styles.btn}>
+				<MainButton
+					variant={'primary'}
+					width={'min'}
+					type="submit"
+					disabled={false}>
+					{'Submit'}
+				</MainButton>
+			</div>
 		</Form>
 	);
 };

From c0f5ed2d5aa0096dbdd18d688163a66b32202310 Mon Sep 17 00:00:00 2001
From: Oleh <149747215+Primis1@users.noreply.github.com>
Date: Thu, 3 Oct 2024 01:44:49 -0400
Subject: [PATCH 11/19] add: separate rows for contacts.

comment: require fix for right inputs
---
 src/entities/contacts/contacts.tsx | 35 ++++++++++++++++++++----------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/entities/contacts/contacts.tsx b/src/entities/contacts/contacts.tsx
index 8935794d..36082b7f 100644
--- a/src/entities/contacts/contacts.tsx
+++ b/src/entities/contacts/contacts.tsx
@@ -9,10 +9,10 @@ import { v4 as uuidv4 } from 'uuid';
 export const Contacts = ({ control }: { control: Control<any> }) => {
 	const { fields, append, remove, update } = useFieldArray({
 		control,
-		name: 'telegram',
+		name: 'contacts', // Internal name for field array management
 	});
 
-	// Watching the contacts array to dynamically handle the selected types
+	// Watch contacts array to dynamically handle selected types
 	const contacts = useWatch({ control, name: 'contacts', defaultValue: [] });
 
 	// Function to check if a contact type is already selected to disable that option
@@ -28,13 +28,13 @@ export const Contacts = ({ control }: { control: Control<any> }) => {
 					<div key={field.id} className={styles.container}>
 						{/* Contact Type Select */}
 						<Controller
-							name={`contacts.${index}.type`} // Type like phone, email, telegram
+							name={`contacts.${index}.type`} // Internal name for tracking the contact type
 							control={control}
 							defaultValue={field.type || ''}
-							render={({ field }) => (
+							render={({ field: selectField }) => (
 								<select
 									className={styles.select}
-									{...field}
+									{...selectField}
 									onChange={(e) => {
 										// Update the contact type and reset the value field
 										update(index, {
@@ -42,7 +42,7 @@ export const Contacts = ({ control }: { control: Control<any> }) => {
 											type: e.target.value,
 											value: '',
 										});
-										field.onChange(e);
+										selectField.onChange(e);
 									}}>
 									<option value="">Выберите ресурс</option>
 									<option value="phone" disabled={isTypeDisabled('phone')}>
@@ -59,15 +59,26 @@ export const Contacts = ({ control }: { control: Control<any> }) => {
 								</select>
 							)}
 						/>
+
 						{/* Contact Value Input */}
-						{contacts[index] && (
-							<Input
-								labelName=""
-								name={`contacts.${index}.value`} // Use 'value' to capture the input
-								className={styles.input_extra}
-								// placeholder={`Введите ${contacts[index].type}`}
+						{contacts[index]?.type && (
+							<Controller
+								// Dynamically use the selected contact type as the field name
+								name={contacts[index].type}
+								control={control}
+								defaultValue={field.value || ''}
+								render={({ field: inputField }) => (
+									<Input
+										labelName=""
+										name={inputField.name} // Will dynamically be "phone", "email", or "telegram"
+										value={inputField.value}
+										onChange={inputField.onChange}
+										className={styles.input_extra}
+									/>
+								)}
 							/>
 						)}
+
 						{/* Remove Button */}
 						<MainButton
 							variant={'trivial'}

From 0069b55c4ae0afa5790af7181829e93092c6b093 Mon Sep 17 00:00:00 2001
From: Oleh <149747215+Primis1@users.noreply.github.com>
Date: Sun, 6 Oct 2024 00:51:25 -0400
Subject: [PATCH 12/19] fix: form, query; rm: duplicate contacts component,
 Attributes query

---
 src/entities/contacts/contacts.tsx            |  24 ++---
 .../ui/form-profile-edit.tsx                  |   2 +-
 src/services/AttributesService.ts             |  32 ------
 src/shared/ui/add-specialty/add-specialty.tsx |   2 +-
 .../ui/form-project-specialists.tsx           | 101 +++++-------------
 src/widgets/index.ts                          |   1 -
 6 files changed, 41 insertions(+), 121 deletions(-)
 delete mode 100644 src/services/AttributesService.ts

diff --git a/src/entities/contacts/contacts.tsx b/src/entities/contacts/contacts.tsx
index 36082b7f..2a76f168 100644
--- a/src/entities/contacts/contacts.tsx
+++ b/src/entities/contacts/contacts.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import styles from './contacts.module.scss';
 import { useFieldArray, Controller, Control, useWatch } from 'react-hook-form';
 import { v4 as uuidv4 } from 'uuid';
+import { CONTACTS } from '@/utils/constants';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const Contacts = ({ control }: { control: Control<any> }) => {
@@ -12,10 +13,9 @@ export const Contacts = ({ control }: { control: Control<any> }) => {
 		name: 'contacts', // Internal name for field array management
 	});
 
-	// Watch contacts array to dynamically handle selected types
 	const contacts = useWatch({ control, name: 'contacts', defaultValue: [] });
 
-	// Function to check if a contact type is already selected to disable that option
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	const isTypeDisabled = (type: string) => {
 		return contacts.some((contact: { type: string }) => contact.type === type);
 	};
@@ -44,18 +44,14 @@ export const Contacts = ({ control }: { control: Control<any> }) => {
 										});
 										selectField.onChange(e);
 									}}>
-									<option value="">Выберите ресурс</option>
-									<option value="phone" disabled={isTypeDisabled('phone')}>
-										Телефон
-									</option>
-									<option value="email" disabled={isTypeDisabled('email')}>
-										Email
-									</option>
-									<option
-										value="telegram"
-										disabled={isTypeDisabled('telegram')}>
-										Telegram
-									</option>
+									{CONTACTS.map((option) => (
+										<option
+											className={styles.fields__addContactTypeListItem}
+											key={option.value}
+											value={option.value}>
+											{option.label}
+										</option>
+									))}
 								</select>
 							)}
 						/>
diff --git a/src/entities/form-profile-edit/ui/form-profile-edit.tsx b/src/entities/form-profile-edit/ui/form-profile-edit.tsx
index e2332dc2..b4cdeee7 100644
--- a/src/entities/form-profile-edit/ui/form-profile-edit.tsx
+++ b/src/entities/form-profile-edit/ui/form-profile-edit.tsx
@@ -112,7 +112,7 @@ export const FormProfileEdit: FC<FormProfileEditProps> = ({
 			isNameValid &&
 				isNickNameValid &&
 				isPortfolioLinkValid &&
-				isLoadingChangeProfileSettings
+				!isLoadingChangeProfileSettings
 		);
 	}, [
 		isNameValid,
diff --git a/src/services/AttributesService.ts b/src/services/AttributesService.ts
deleted file mode 100644
index 2cbf00cb..00000000
--- a/src/services/AttributesService.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
-
-const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
-
-export const attributesApi = createApi({
-	reducerPath: 'attributesApi',
-	baseQuery: fetchBaseQuery({
-		baseUrl: `https://${BASE_URL}/api/v1`,
-	}),
-	endpoints: (builder) => ({
-		getSkills: builder.query({
-			query: () => ({
-				url: '/skills/',
-				method: 'GET',
-			}),
-		}),
-		getProfessions: builder.query({
-			query: () => ({
-				url: '/professions/',
-				method: 'GET',
-			}),
-		}),
-		getDirections: builder.query({
-			query: () => ({
-				url: '/projects/directions/',
-				method: 'GET',
-			}),
-		}),
-	}),
-});
-
-export const { useGetSkillsQuery, useGetProfessionsQuery, useGetDirectionsQuery } = attributesApi;
diff --git a/src/shared/ui/add-specialty/add-specialty.tsx b/src/shared/ui/add-specialty/add-specialty.tsx
index 4c0aad8b..d0d9b720 100644
--- a/src/shared/ui/add-specialty/add-specialty.tsx
+++ b/src/shared/ui/add-specialty/add-specialty.tsx
@@ -76,7 +76,7 @@ export const AddSpecialty: React.FC<AddSpecialtyProps> = ({
 		setSelectedLevel(null);
 	};
 	const isFieldsNotFill = () => {
-		return (profession === null || selectedLevel === null || skills.length === 0);
+		return profession === null || selectedLevel === null || skills.length === 0;
 	};
 	useEffect(() => {
 		if (isSuccessAddSpecialty) handleResetForm();
diff --git a/src/widgets/form-project-specialists/ui/form-project-specialists.tsx b/src/widgets/form-project-specialists/ui/form-project-specialists.tsx
index 7f514a2a..66a4ae53 100644
--- a/src/widgets/form-project-specialists/ui/form-project-specialists.tsx
+++ b/src/widgets/form-project-specialists/ui/form-project-specialists.tsx
@@ -1,84 +1,41 @@
 'use client';
-import React, { useState } from 'react';
-import styles from './form-project-specialists.module.scss';
-import { Toggler } from '@/shared/ui';
-import { SingleSelectInput } from '@/shared/ui/single-select-input/single-select-input';
-import { MultiSelectInput } from '@/shared/ui/multi-select-input/multi-select-input';
-import { LEVEL } from '@/utils/constants';
+import React, { useEffect, useState } from 'react';
+import { Specialties } from '@/entities/specialties';
 import {
 	useGetProfessionsQuery,
 	useGetSkillsQuery,
-} from '@/services/AttributesService';
-import { FormCreateProjectCard } from '@/entities/form-create-project-card';
+} from '@/services/GeneralService';
+import { TSpeciality } from '@/shared/types/specialty';
 
 export const FormProjectSpecialists = () => {
-	const [recruitmentIsOpen, setRecruitmentIsOpen] = useState(false);
+	const { data: professions } = useGetProfessionsQuery([]);
 
-	const { data: skills } = useGetSkillsQuery([]) 
-	const { data: profession } = useGetProfessionsQuery([]) 
+	const { data: allSkills } = useGetSkillsQuery([]);
 
+	const [specialties, setSpecialties] = useState<TSpeciality[]>([]);
 
-	return (
-		<div className={styles.container}>
-			<div className={styles.specialists}>
-				<h3 className={styles.specialists_master_title}>Кто нужен в проект</h3>
-				<div className={styles.specialists_toggle}>
-					<span>Набор {recruitmentIsOpen ? 'открыт' : 'закрыт'}</span>
-					<Toggler
-						checked={recruitmentIsOpen as boolean}
-						name={'allow_notifications'}
-						id={'allow_notifications'}
-						onChange={(evt) => setRecruitmentIsOpen(evt.target.checked)}
-					/>
-				</div>
-
-				<FormCreateProjectCard />
-			
-				<SingleSelectInput
-					name={`project_specialists`}
-					label={'Специальность'}
-					onChange={() => {}}
-					options={profession?.map(
-						(specialization: { id: number; specialization: string }) => {
-							return {
-								label: specialization.specialization,
-								value: specialization.id,
-							};
-						}
-					)}
-					description="Выберите одну специальность"
-					isSearchable
-				/>
+	useEffect(() => {setSpecialties([])}, []);
 
-				<div>
-					<MultiSelectInput
-						name={`project_specialists`}
-						onChange={() => {}}
-						options={LEVEL}
-						values={[]}
-						label={'Уровень квалификации'}
-						isSearchable
-					/>
-				</div>
-
-				<div>
-					<MultiSelectInput
-						isSearchable
-						name={`project_specialists`}
-						onChange={() => {}}
-						options={skills?.map((skill: { id: number; name: string }) => {
-							return {
-								label: skill.name,
-								value: skill.id,
-							};
-						})}
-						values={[]}
-						label={'Навыки'}
-						description="Выберите не более 15 навыков"
-						maxSelections={15}
-					/>
-				</div>
-			</div>
-		</div>
+	return (
+		<Specialties
+			professions={professions}
+			allSkills={allSkills}
+			specialists={specialties}
+			handleSubmitChangeSpecialty={function (): void {
+				throw new Error('Function not implemented.');
+			}}
+			isLoadingChangeSpecialty={false}
+			isSuccessСhangeSpecialty={false}
+			handleDeleteSpecialty={function (): void {
+				throw new Error('Function not implemented.');
+			}}
+			isSuccessDeleteSpecialty={false}
+			isLoadingDeleteSpecialty={false}
+			handleAddSpecialty={function (): void {
+				throw new Error('Function not implemented.');
+			}}
+			isLoadingAddSpecialty={false}
+			isSuccessAddSpecialty={false}
+		/>
 	);
 };
diff --git a/src/widgets/index.ts b/src/widgets/index.ts
index 5663749f..9677fd6f 100644
--- a/src/widgets/index.ts
+++ b/src/widgets/index.ts
@@ -1,4 +1,3 @@
-export { ContactsList } from './contact-list/contact-list';
 export * from "./managa-project-settings/ui/manage-project-setting"
 export * from "./manage-specialists/ui/manage-specialists"
 export * from "./form-project-details/ui/form-project"

From fef6358c1ceeacdd8816e2ef796fd3ae64a18dab Mon Sep 17 00:00:00 2001
From: Olek <149747215+Primis1@users.noreply.github.com>
Date: Wed, 9 Oct 2024 16:15:37 -0400
Subject: [PATCH 13/19] add: contacts, forms functionality; remove: attributes
 query;

comment: reqire bug fix all over related components
---
 src/entities/contacts/contacts.module.scss    | 114 ++++-----
 src/entities/contacts/contacts.tsx            | 224 ++++++++++--------
 src/store/store.ts                            |   3 -
 .../form-project-details/ui/form-project.tsx  |   2 +-
 .../ui/form-project-specialists.tsx           | 127 ++++++++--
 .../ui/manage-specialists.tsx                 |   2 +-
 6 files changed, 279 insertions(+), 193 deletions(-)

diff --git a/src/entities/contacts/contacts.module.scss b/src/entities/contacts/contacts.module.scss
index fee6aa11..79a7e918 100644
--- a/src/entities/contacts/contacts.module.scss
+++ b/src/entities/contacts/contacts.module.scss
@@ -1,87 +1,65 @@
 @import '@/shared/assets/fonts/fonts.css';
 @import '@/shared/style/variables';
 
-.contacts_title {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	font-weight: 700;
-
-	margin: 0;
+.contactsTitle {
+	color: $--Foreground-default;
 	font-family: $--open-sans-font;
-	font-weight: 700;
 	font-size: 16px;
 	font-style: normal;
-	line-height: 150%;
-	
-	
+	font-weight: 400;
+	line-height: 24px; /* 150% */
+	letter-spacing: 0.25px;
 }
-.contacts {
+.addContactWrapper {
 	width: 100%;
 	display: flex;
-	flex-direction: column;
-	gap: 10px;
-}
-
-.container {
-	display: flex;
-	// justify-content: center;
-	align-items: center;
-}
-
-.input_extra {
-	width: 100%;
-	display: block;
-	// padding: 12px 36px 12px 12px;
-	margin: 0;
-	border-radius: 12px;
-	min-height: 50px;
-
-	&::placeholder {
-		color: $--Foreground-subtitle;
-	}
-
-	&:disabled {
-		opacity: 0.5;
+	flex-direction: row;
+	gap: 8px;
+	@media screen and (max-width: 779px) {
+		flex-direction: column;
 	}
 }
-
-.buttons {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-
-	margin-bottom: 32px;
-}
-
-.select {
-	border: 1px solid;
-	margin-right: 10px;
-	box-sizing: border-box;
-	border: 1px solid;
+.addContactType {
+	width: 228px;
+	height: 40px;
+	border-radius: 8px;
+	border: 1px solid $--border-default;
+	background: $--bg-primary;
+	padding: 8px 12px;
 	color: $--Foreground-default;
-	background-color: $--bg-primary;
+	font-feature-settings:
+		'liga' off,
+		'clig' off;
+	font-family: $--open-sans-font;
+	font-size: 16px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 24px; /* 150% */
 	letter-spacing: 0.25px;
-	cursor: pointer;
-	height: 50px;
-	padding: 0px 10px;
-	width: auto;
-	border-color:  $--Foreground-default;
-	border-radius: 12px;
-
-	&::placeholder {
-		color: $--Foreground-subtitle;
-	}
-
-	&:disabled {
-		opacity: 0.5;
+	@media screen and (max-width: 779px) {
+		width: 100%;
 	}
 }
 
-.select > option {
-	color: $--Foreground-default;
-
+.addContactTypeWrapper {
+	display: flex;
+	flex-direction: column;
 }
 
+.addContactTextValue {
+	min-height: 40px;
+	width: 100%;
+}
 
+.addContactTypeLabel {
+	color: $--Foreground-subtitle;
+	font-feature-settings:
+		'liga' off,
+		'clig' off;
+	font-family: $--open-sans-font;
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 19px; /* 135.714% */
+	letter-spacing: 0.25px;
+}
diff --git a/src/entities/contacts/contacts.tsx b/src/entities/contacts/contacts.tsx
index 2a76f168..5f87130a 100644
--- a/src/entities/contacts/contacts.tsx
+++ b/src/entities/contacts/contacts.tsx
@@ -1,116 +1,138 @@
 import { Input, MainButton } from '@/shared/ui';
-import { Plus, Trash2 } from 'lucide-react';
-import React from 'react';
+import { Plus } from 'lucide-react';
+import React, { useState } from 'react';
 import styles from './contacts.module.scss';
-import { useFieldArray, Controller, Control, useWatch } from 'react-hook-form';
-import { v4 as uuidv4 } from 'uuid';
 import { CONTACTS } from '@/utils/constants';
+import { ContactsList } from '../contact-list/contact-list';
+import { TContact } from '@/shared/ui/contact-card/types';
+import { TOption } from '../form-profile-edit/ui/types';
+import { generalEmailRegex, phoneRegex } from '@/utils/regex-consts';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const Contacts = ({ control }: { control: Control<any> }) => {
-	const { fields, append, remove, update } = useFieldArray({
-		control,
-		name: 'contacts', // Internal name for field array management
-	});
+export const Contacts = () => {
+	const [contacts, setContacts] = useState<TContact[]>([]);
+	const [selectedOptionContactType, setSelectedOptionContactType] =
+		useState<TOption | null>(null);
+	const [addContactErrorText, setAddContactErrorText] = useState<string>('');
+	const [inputValueContact, setInputValueContact] = useState<string>('');
 
-	const contacts = useWatch({ control, name: 'contacts', defaultValue: [] });
-
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	const isTypeDisabled = (type: string) => {
-		return contacts.some((contact: { type: string }) => contact.type === type);
+	const handleOptionSelect = (option: TOption) => {
+		setSelectedOptionContactType(option);
 	};
 
-	return (
-		<>
-			<h3 className={styles.contacts_title}>Контакты для связи</h3>
-			<div className={styles.contacts}>
-				{fields.map((field, index) => (
-					<div key={field.id} className={styles.container}>
-						{/* Contact Type Select */}
-						<Controller
-							name={`contacts.${index}.type`} // Internal name for tracking the contact type
-							control={control}
-							defaultValue={field.type || ''}
-							render={({ field: selectField }) => (
-								<select
-									className={styles.select}
-									{...selectField}
-									onChange={(e) => {
-										// Update the contact type and reset the value field
-										update(index, {
-											...contacts[index],
-											type: e.target.value,
-											value: '',
-										});
-										selectField.onChange(e);
-									}}>
-									{CONTACTS.map((option) => (
-										<option
-											className={styles.fields__addContactTypeListItem}
-											key={option.value}
-											value={option.value}>
-											{option.label}
-										</option>
-									))}
-								</select>
-							)}
-						/>
+	const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		setInputValueContact(event.target.value);
+	};
 
-						{/* Contact Value Input */}
-						{contacts[index]?.type && (
-							<Controller
-								// Dynamically use the selected contact type as the field name
-								name={contacts[index].type}
-								control={control}
-								defaultValue={field.value || ''}
-								render={({ field: inputField }) => (
-									<Input
-										labelName=""
-										name={inputField.name} // Will dynamically be "phone", "email", or "telegram"
-										value={inputField.value}
-										onChange={inputField.onChange}
-										className={styles.input_extra}
-									/>
-								)}
-							/>
-						)}
+	const handleAddContact = () => {
+		if (selectedOptionContactType && inputValueContact) {
+			let isValid = true;
+			const newContact: TContact = {
+				[selectedOptionContactType.value]: inputValueContact,
+			};
 
-						{/* Remove Button */}
-						<MainButton
-							variant={'trivial'}
-							width={'min'}
-							disabled={false}
-							onClick={() => remove(index)}>
-							<Trash2 color="black" />
-						</MainButton>
-					</div>
-				))}
-			</div>
-
-			{/* Add Contact Button */}
-			<div className={styles.buttons}>
-				<MainButton
-					variant="secondary"
-					width="regular"
-					IconLeft={
-						Plus as React.ComponentType<React.HTMLAttributes<HTMLElement>>
-					}
-					type="button"
-					onClick={() => append({ id: uuidv4(), type: '', value: '' })} // Append new contact
-					disabled={contacts.length >= 3} // Disable if all types are selected
-				>
-					Добавить
-				</MainButton>
+			// Проверка формата email
+			if (selectedOptionContactType.value === 'email') {
+				if (!generalEmailRegex.test(inputValueContact)) {
+					setAddContactErrorText('Пожалуйста, введите корректный email адрес.');
+					isValid = false;
+				}
+			}
+			// Проверка формата телефона
+			if (selectedOptionContactType.value === 'phone') {
+				if (!phoneRegex.test(inputValueContact)) {
+					setAddContactErrorText(
+						'Допустимый формат +7XXXXXXXXXX, где X - цифры.'
+					);
+					isValid = false;
+				}
+			}
+			// Проверяем, что контакт такого же типа не существует уже
+			if (
+				isValid &&
+				!contacts.some((contact) =>
+					Object.prototype.hasOwnProperty.call(
+						contact,
+						selectedOptionContactType.value
+					)
+				)
+			) {
+				setContacts([...contacts, newContact]);
+				// setSelectedOptionContactType(null);
+				setInputValueContact('');
+			} else if (!isValid) {
+				// Если данные не валидны, выходим из функции
+				return;
+			} else {
+				setAddContactErrorText(
+					`Контакт типа "${selectedOptionContactType.label}" уже существует.`
+				);
+			}
+		}
+	};
 
-				{/* Reset Button */}
-				<MainButton
-					onClick={() => remove()} // Remove all contacts
-					variant={'trivial'}
-					width={'min'}
-					disabled={false}>
-					Сбросить
-				</MainButton>
+	return (
+		<>
+			<span className={styles.contactsTitle}>Контакты для связи</span>
+			<ContactsList contacts={contacts} setContacts={setContacts} />
+			<div className={styles.addContactWrapper}>
+				<label className={styles.addContactTypeWrapper}>
+					<select
+						className={styles.addContactType}
+						value={selectedOptionContactType?.value || ''}
+						onChange={(event) =>
+							handleOptionSelect(
+								CONTACTS.find(
+									(contact) => contact.value === event.target.value
+								)!
+							)
+						}>
+						{CONTACTS.map((option) => (
+							<option
+								className={styles.addContactTypeListItem}
+								key={option.value}
+								value={option.value}>
+								{option.label}
+							</option>
+						))}
+					</select>
+					<span className={styles.addContactTypeLabel}>
+						Выберите ресурс
+					</span>
+				</label>
+				{selectedOptionContactType?.value === 'phone_number' ? (
+					<Input
+						placeholder="+7XXXXXXXXXX"
+						className={styles.addContactTextValue}
+						name="inputValueContact"
+						labelName=""
+						// type="text"
+						description={false}
+						value={inputValueContact}
+						error={addContactErrorText}
+						onChange={(event) => handleInputChange(event)}
+					/>
+				) : (
+					<Input
+						className={styles.addContactTextValue}
+						name="inputValueContact"
+						labelName=""
+						// type="text"
+						description={false}
+						value={inputValueContact}
+						error={addContactErrorText}
+						onChange={(event) => handleInputChange(event)}
+					/>
+				)}
 			</div>
+			<MainButton
+				type="button"
+				onClick={handleAddContact}
+				variant="secondary"
+				width="regular"
+				IconLeft={Plus}>
+				Добавить
+			</MainButton>
 		</>
 	);
 };
diff --git a/src/store/store.ts b/src/store/store.ts
index ee910dab..57ec72a9 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -2,12 +2,10 @@ import { configureStore, combineReducers } from '@reduxjs/toolkit';
 import { userApi } from '@/services/UserService';
 import { generalApi } from '@/services/GeneralService';
 import { projectsApi } from '@/services/ProjectService';
-import { attributesApi } from '@/services/AttributesService';
 import { specilistsApi } from '@/services/SpecialistService';
 
 const rootReducer = combineReducers({
 	[userApi.reducerPath]: userApi.reducer,
-	[attributesApi.reducerPath]: attributesApi.reducer,
 	[specilistsApi.reducerPath]: specilistsApi.reducer,
 	[generalApi.reducerPath]: generalApi.reducer,
 	[projectsApi.reducerPath]: projectsApi.reducer,
@@ -18,7 +16,6 @@ export const store = configureStore({
 	middleware: (getDefaultMiddleware) =>
 		getDefaultMiddleware().concat(
 			userApi.middleware,
-			attributesApi.middleware,
 			specilistsApi.middleware,
 			generalApi.middleware,
 			projectsApi.middleware
diff --git a/src/widgets/form-project-details/ui/form-project.tsx b/src/widgets/form-project-details/ui/form-project.tsx
index 2d881960..c4f1b9b1 100644
--- a/src/widgets/form-project-details/ui/form-project.tsx
+++ b/src/widgets/form-project-details/ui/form-project.tsx
@@ -79,7 +79,7 @@ export const FormProject = ({ control }: { control: Control<any> }) => {
 				</div>
 
 				<div className={styles.contacts}>
-					<Contacts control={control} />
+					<Contacts />
 				</div>
 
 				<Input
diff --git a/src/widgets/form-project-specialists/ui/form-project-specialists.tsx b/src/widgets/form-project-specialists/ui/form-project-specialists.tsx
index 66a4ae53..5881bc79 100644
--- a/src/widgets/form-project-specialists/ui/form-project-specialists.tsx
+++ b/src/widgets/form-project-specialists/ui/form-project-specialists.tsx
@@ -1,11 +1,17 @@
 'use client';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { Specialties } from '@/entities/specialties';
 import {
 	useGetProfessionsQuery,
 	useGetSkillsQuery,
 } from '@/services/GeneralService';
-import { TSpeciality } from '@/shared/types/specialty';
+import { Speciality, TSpeciality } from '@/shared/types/specialty';
+import {
+	useAddSpecialtyMutation,
+	useChangeSpecialtyMutation,
+	useDeleteSpecialtyMutation,
+} from '@/services/UserService';
+import { toaster } from '@/widgets/notification-toast';
 
 export const FormProjectSpecialists = () => {
 	const { data: professions } = useGetProfessionsQuery([]);
@@ -14,28 +20,111 @@ export const FormProjectSpecialists = () => {
 
 	const [specialties, setSpecialties] = useState<TSpeciality[]>([]);
 
-	useEffect(() => {setSpecialties([])}, []);
+	const [
+		changeSpecialty,
+		{
+			isLoading: isLoadingChangeSpecialty,
+			isSuccess: isSuccessСhangeSpecialty,
+		},
+	] = useChangeSpecialtyMutation();
+
+	const [
+		deleteSpecialty,
+		{
+			isSuccess: isSuccessDeleteSpecialty,
+			isLoading: isLoadingDeleteSpecialty,
+		},
+	] = useDeleteSpecialtyMutation();
+
+	const [
+		addSpecialty,
+		{ isLoading: isLoadingAddSpecialty, isSuccess: isSuccessAddSpecialty },
+	] = useAddSpecialtyMutation();
+
+	const handleSubmitChangeSpecialty = (data: Speciality) => {
+		changeSpecialty(data)
+			.unwrap()
+			.then(() => {
+				toaster({
+					status: 'success',
+					title: 'Настройки специальности успешно сохранены',
+				});
+			})
+			.catch((error) => {
+				toaster({
+					status: 'error',
+					title: 'Ошибка сохранения',
+					subtitle: 'Попробуйте еще раз',
+				});
+				console.log(error);
+			});
+	};
+	const handleDeleteSpecialty = (id: number) => {
+		deleteSpecialty(id)
+			.unwrap()
+			.then(() => {
+				setSpecialties(specialties.filter((item) => item.id !== id));
+				toaster({
+					status: 'success',
+					title: 'Спецаильность успешно удалена',
+				});
+			})
+			.catch(() => {
+				toaster({
+					status: 'error',
+					title: 'Ошибка удаления',
+					subtitle: 'Попробуйте еще раз',
+				});
+			});
+	};
+
+	const handleAddSpecialty = ({ level, profession, skills }: TSpeciality) => {
+		addSpecialty({
+			level,
+			profession: profession.id,
+			skills: skills.map((item) => item.id),
+		})
+			.unwrap()
+			.then(({ id }) => {
+				setSpecialties([
+					{
+						id,
+						level,
+						profession,
+						skills,
+					},
+					...specialties,
+				]);
+
+				toaster({
+					status: 'success',
+					title: 'Спецаильность успешно добавлена',
+				});
+			})
+			.catch(() => {
+				toaster({
+					status: 'error',
+					title: 'Ошибка добавления',
+					subtitle: 'Попробуйте еще раз',
+				});
+			});
+	};
+
 
 	return (
 		<Specialties
 			professions={professions}
-			allSkills={allSkills}
+			allSkills={allSkills && allSkills}
 			specialists={specialties}
-			handleSubmitChangeSpecialty={function (): void {
-				throw new Error('Function not implemented.');
-			}}
-			isLoadingChangeSpecialty={false}
-			isSuccessСhangeSpecialty={false}
-			handleDeleteSpecialty={function (): void {
-				throw new Error('Function not implemented.');
-			}}
-			isSuccessDeleteSpecialty={false}
-			isLoadingDeleteSpecialty={false}
-			handleAddSpecialty={function (): void {
-				throw new Error('Function not implemented.');
-			}}
-			isLoadingAddSpecialty={false}
-			isSuccessAddSpecialty={false}
+			handleSubmitChangeSpecialty={handleSubmitChangeSpecialty}
+			isLoadingChangeSpecialty={isLoadingChangeSpecialty}
+			isSuccessСhangeSpecialty={isSuccessСhangeSpecialty}
+			handleDeleteSpecialty={handleDeleteSpecialty}
+			isSuccessDeleteSpecialty={isSuccessDeleteSpecialty}
+			isLoadingDeleteSpecialty={isLoadingDeleteSpecialty}
+			handleAddSpecialty={handleAddSpecialty}
+			isLoadingAddSpecialty={isLoadingAddSpecialty}
+			isSuccessAddSpecialty={isSuccessAddSpecialty}
 		/>
 	);
 };
diff --git a/src/widgets/manage-specialists/ui/manage-specialists.tsx b/src/widgets/manage-specialists/ui/manage-specialists.tsx
index d4583125..dc4db646 100644
--- a/src/widgets/manage-specialists/ui/manage-specialists.tsx
+++ b/src/widgets/manage-specialists/ui/manage-specialists.tsx
@@ -9,7 +9,7 @@ import { LEVEL } from '@/utils/constants';
 import {
 	useGetProfessionsQuery,
 	useGetSkillsQuery,
-} from '@/services/AttributesService';
+} from '@/services/GeneralService';
 
 export const ManageSpecialists = () => {
 	const [recruitmentIsOpen, setRecruitmentIsOpen] = useState(false);

From d00ec318caa7c79b02aae1b280c25e2f0f1b5dd3 Mon Sep 17 00:00:00 2001
From: Oleh <149747215+Primis1@users.noreply.github.com>
Date: Sat, 12 Oct 2024 00:51:55 -0400
Subject: [PATCH 14/19] add: project-speciality with react hook form; refactor:
 component's architect;

reqire: re-render fix
---
 .../add-project-speciality.tsx                | 158 ++++++++++
 .../add-specialty.module.scss                 |  27 ++
 .../add-proejct-specialists}/types.ts         |   0
 .../add-specialty.module.scss                 |   0
 .../add-specialists}/add-specialty.tsx        |  29 +-
 src/entities/add-specialists/types.ts         |   9 +
 src/entities/specialties/ui/specialties.tsx   |   2 +-
 .../form-profile-edit/form-profile-edit.tsx   |   4 +-
 src/utils/specialists-functions.ts            |  23 ++
 .../ui/form-project-specialists.module.scss   | 132 ++------
 .../ui/form-project-specialists.tsx           | 283 +++++++++++-------
 11 files changed, 420 insertions(+), 247 deletions(-)
 create mode 100644 src/entities/add-proejct-specialists/add-project-speciality.tsx
 create mode 100644 src/entities/add-proejct-specialists/add-specialty.module.scss
 rename src/{shared/ui/add-specialty => entities/add-proejct-specialists}/types.ts (100%)
 rename src/{shared/ui/add-specialty => entities/add-specialists}/add-specialty.module.scss (100%)
 rename src/{shared/ui/add-specialty => entities/add-specialists}/add-specialty.tsx (83%)
 create mode 100644 src/entities/add-specialists/types.ts
 create mode 100644 src/utils/specialists-functions.ts

diff --git a/src/entities/add-proejct-specialists/add-project-speciality.tsx b/src/entities/add-proejct-specialists/add-project-speciality.tsx
new file mode 100644
index 00000000..fe6a1f18
--- /dev/null
+++ b/src/entities/add-proejct-specialists/add-project-speciality.tsx
@@ -0,0 +1,158 @@
+import React from 'react';
+import styles from './add-specialty.module.scss';
+import { LEVEL } from '@/utils/constants';
+import { TProfession, TSkills } from '@/shared/types/specialty';
+import IconPlus from '@/shared/assets/icons/plus-large.svg';
+import { AddSpecialtyProps } from './types';
+import SelectWithSearch from '@/shared/ui/select-search/select-search';
+import {
+	getLevelName,
+	getSkills,
+	transformProfessions,
+} from '@/utils/specialists-functions';
+import { MainButton } from '@/shared/ui';
+import { MultiSelectInput } from '@/shared/ui/multi-select-input/multi-select-input';
+
+import { useForm, Controller } from 'react-hook-form';
+
+export const AddProjectSpeciality: React.FC<AddSpecialtyProps> = ({
+	professions,
+	allSkills,
+	handleAddSpecialty,
+}) => {
+	const {
+		control,
+		handleSubmit,
+		reset,
+		watch,
+	} = useForm({
+		mode: 'onChange',
+		defaultValues: {
+			profession: null,
+			level: null,
+			skills: [],
+		},
+	});
+
+	// Watching form fields for real-time values
+	const selectedProfession = watch('profession');
+	const selectedLevel = watch('level');
+	const selectedSkills = watch('skills');
+	const onSubmit = (data: {
+		profession: TProfession;
+		level: number;
+		skills: TSkills[];
+	}) => {
+		const { profession, level, skills } = data;
+		handleAddSpecialty({
+			profession,
+			level,
+			skills,
+		});
+	};
+
+	const handleResetForm = () => {
+		reset({
+			profession: null,
+			level: null,
+			skills: [],
+		});
+	};
+
+	// Utilizing the watched values for field validation
+	const isFieldsNotFill = () => {
+		return (
+			selectedProfession === null ||
+			selectedLevel === null ||
+			selectedSkills.length === 0
+		);
+	};
+
+	return (
+		<form
+			className={styles.addSpecialty}
+			onSubmit={handleSubmit(onSubmit)}
+			onReset={handleResetForm}>
+			<Controller
+				name="profession"
+				control={control}
+				rules={{ required: true }}
+				render={({ field }) => (
+					<SelectWithSearch
+						label="Специальность"
+						options={transformProfessions(professions)}
+						selectedValue={field.value?.specialization as unknown as string}
+						onValueChange={(value) =>
+							field.onChange(
+								professions.find((p) => p.specialization === value)
+							)
+						}
+					/>
+				)}
+			/>
+
+			<Controller
+				name="level"
+				control={control}
+				rules={{ required: true }}
+				render={({ field }) => (
+					<SelectWithSearch
+						label="Уровень квалификации"
+						options={LEVEL}
+						selectedValue={getLevelName(field.value)}
+						onValueChange={(value) =>
+							field.onChange(
+								LEVEL.find((lvl) => lvl.value === value)?.level as number
+							)
+						}
+					/>
+				)}
+			/>
+
+			<Controller
+				name="skills"
+				control={control}
+				rules={{ validate: (value) => value.length > 0 }}
+				render={({ field }) => (
+					<MultiSelectInput
+						width="100%"
+						name="select-skills"
+						label="Навыки"
+						description="Выберите не более 15 навыков"
+						maxSelections={15}
+						isSearchable
+						options={getSkills(allSkills)}
+						values={getSkills(field.value)}
+						onChange={(item) =>
+							field.onChange(
+								item.map(({ label, value }) => ({
+									name: label,
+									id: value,
+								}))
+							)
+						}
+					/>
+				)}
+			/>
+
+			<div className={styles.addSpecialty__buttons}>
+				<MainButton
+					IconLeft={IconPlus}
+					variant="secondary"
+					width="regular"
+					type="submit"
+					disabled={isFieldsNotFill()}>
+					Добавить
+				</MainButton>
+
+				<MainButton
+					className={styles.addSpecialty__resetButton}
+					type="reset"
+					variant="trivial"
+					width="min">
+					Сбросить
+				</MainButton>
+			</div>
+		</form>
+	);
+};
diff --git a/src/entities/add-proejct-specialists/add-specialty.module.scss b/src/entities/add-proejct-specialists/add-specialty.module.scss
new file mode 100644
index 00000000..1f1039cc
--- /dev/null
+++ b/src/entities/add-proejct-specialists/add-specialty.module.scss
@@ -0,0 +1,27 @@
+@import '@/shared//style/variables.scss';
+
+.addSpecialty {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	&__buttons {
+		display: flex;
+		justify-content: space-between;
+		flex-direction: row;
+		margin-top: 16px;
+	}
+	&__resetButton {
+		cursor: pointer;
+		background: none;
+		padding: 0;
+		color: $--bg-accent-default;
+		font-family: $--open-sans-font;
+		font-size: 16px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 24px; /* 150% */
+		letter-spacing: 0.25px;
+		border: none;
+	}
+}
diff --git a/src/shared/ui/add-specialty/types.ts b/src/entities/add-proejct-specialists/types.ts
similarity index 100%
rename from src/shared/ui/add-specialty/types.ts
rename to src/entities/add-proejct-specialists/types.ts
diff --git a/src/shared/ui/add-specialty/add-specialty.module.scss b/src/entities/add-specialists/add-specialty.module.scss
similarity index 100%
rename from src/shared/ui/add-specialty/add-specialty.module.scss
rename to src/entities/add-specialists/add-specialty.module.scss
diff --git a/src/shared/ui/add-specialty/add-specialty.tsx b/src/entities/add-specialists/add-specialty.tsx
similarity index 83%
rename from src/shared/ui/add-specialty/add-specialty.tsx
rename to src/entities/add-specialists/add-specialty.tsx
index d0d9b720..0c1ca05e 100644
--- a/src/shared/ui/add-specialty/add-specialty.tsx
+++ b/src/entities/add-specialists/add-specialty.tsx
@@ -1,13 +1,14 @@
 import React, { FormEvent, useEffect, useState } from 'react';
 import styles from './add-specialty.module.scss';
-import SelectWithSearch from '../select-search/select-search';
-import { MultiSelectInput } from '../multi-select-input/multi-select-input';
+import SelectWithSearch from '@/shared/ui/select-search/select-search';
+import { MultiSelectInput } from '@/shared/ui/multi-select-input/multi-select-input';
 import { LEVEL } from '@/utils/constants';
 import { TProfession, TSkills } from '@/shared/types/specialty';
-import { AddSpecialtyProps } from './types';
 import { Option } from '@/shared/types/option';
-import { MainButton } from '../main-button/main-button';
 import IconPlus from '@/shared/assets/icons/plus-large.svg';
+import { getLevelName, getSkills, transformProfessions } from '../../utils/specialists-functions';
+import { AddSpecialtyProps } from './types';
+import { MainButton } from '@/shared/ui';
 
 export const AddSpecialty: React.FC<AddSpecialtyProps> = ({
 	professions,
@@ -20,13 +21,6 @@ export const AddSpecialty: React.FC<AddSpecialtyProps> = ({
 	const [selectedLevel, setSelectedLevel] = useState<number | null>(null);
 	const [skills, setSkills] = useState<TSkills[]>([]);
 
-	const transformProfessions = (profList: TProfession[]) => {
-		return profList?.map(({ id, specialization }) => ({
-			label: specialization,
-			value: specialization,
-			id,
-		}));
-	};
 	const handleProfessionChange = (value: string) => {
 		setProfession(
 			professions.find(
@@ -39,14 +33,6 @@ export const AddSpecialty: React.FC<AddSpecialtyProps> = ({
 			LEVEL.find((element) => element.value === value)?.level as number
 		); // обновляем состояние выбранного значения
 	};
-
-	const getSkills = (skills: TSkills[]) => {
-		return skills.map(({ id, name }) => ({
-			label: name,
-			value: id,
-		}));
-	};
-
 	const editSkills = (skills: Option[]) => {
 		setSkills(
 			skills.map(({ label, value }) => ({
@@ -55,11 +41,6 @@ export const AddSpecialty: React.FC<AddSpecialtyProps> = ({
 			}))
 		);
 	};
-	const getLevelName = (level: number) => {
-		if (level > 0 && level < 5) {
-			return LEVEL[level - 1].value;
-		} else return '';
-	};
 
 	const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
 		event.preventDefault();
diff --git a/src/entities/add-specialists/types.ts b/src/entities/add-specialists/types.ts
new file mode 100644
index 00000000..80a7cae9
--- /dev/null
+++ b/src/entities/add-specialists/types.ts
@@ -0,0 +1,9 @@
+import { TProfession, TSkills, TSpeciality } from '@/shared/types/specialty';
+
+export type AddSpecialtyProps = {
+	professions: TProfession[];
+	allSkills: TSkills[];
+	isLoadingAddSpecialty: boolean;
+	handleAddSpecialty: (data: TSpeciality) => void;
+	isSuccessAddSpecialty: boolean;
+};
diff --git a/src/entities/specialties/ui/specialties.tsx b/src/entities/specialties/ui/specialties.tsx
index d566dcd9..776ed40b 100644
--- a/src/entities/specialties/ui/specialties.tsx
+++ b/src/entities/specialties/ui/specialties.tsx
@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import styles from './specialties.module.scss';
 import { SpecialityCard } from '@/shared/ui/speciality-card/speciality-card';
 import { TSpecialties } from './types';
-import { AddSpecialty } from '@/shared/ui/add-specialty/add-specialty';
+import { AddSpecialty } from '@/entities/add-specialists/add-specialty';
 
 export const Specialties: FC<TSpecialties> = ({
 	professions,
diff --git a/src/features/form-profile-edit/form-profile-edit.tsx b/src/features/form-profile-edit/form-profile-edit.tsx
index 7266372d..fe5be315 100644
--- a/src/features/form-profile-edit/form-profile-edit.tsx
+++ b/src/features/form-profile-edit/form-profile-edit.tsx
@@ -170,12 +170,12 @@ export const FormProfileEditFeature: FC = () => {
 						allSkills={allSkills}
 						specialists={specialties}
 						handleSubmitChangeSpecialty={handleSubmitChangeSpecialty}
+						handleDeleteSpecialty={handleDeleteSpecialty}
+						handleAddSpecialty={handleAddSpecialty}
 						isLoadingChangeSpecialty={isLoadingChangeSpecialty}
 						isSuccessСhangeSpecialty={isSuccessСhangeSpecialty}
-						handleDeleteSpecialty={handleDeleteSpecialty}
 						isSuccessDeleteSpecialty={isSuccessDeleteSpecialty}
 						isLoadingDeleteSpecialty={isLoadingDeleteSpecialty}
-						handleAddSpecialty={handleAddSpecialty}
 						isLoadingAddSpecialty={isLoadingAddSpecialty}
 						isSuccessAddSpecialty={isSuccessAddSpecialty}
 					/>
diff --git a/src/utils/specialists-functions.ts b/src/utils/specialists-functions.ts
new file mode 100644
index 00000000..08621fea
--- /dev/null
+++ b/src/utils/specialists-functions.ts
@@ -0,0 +1,23 @@
+import { TProfession, TSkills } from "@/shared/types/specialty";
+import { LEVEL } from "@/utils/constants";
+
+export const transformProfessions = (profList: TProfession[]) => {
+    return profList?.map(({ id, specialization }) => ({
+        label: specialization,
+        value: specialization,
+        id,
+    }));
+};
+
+export const getSkills = (skills: TSkills[]) => {
+    return skills.map(({ id, name }) => ({
+        label: name,
+        value: id,
+    }));
+};
+
+export const getLevelName = (level: number) => {
+    if (level > 0 && level < 5) {
+        return LEVEL[level - 1].value;
+    } else return '';
+};
diff --git a/src/widgets/form-project-specialists/ui/form-project-specialists.module.scss b/src/widgets/form-project-specialists/ui/form-project-specialists.module.scss
index 13346d96..a55a15dc 100644
--- a/src/widgets/form-project-specialists/ui/form-project-specialists.module.scss
+++ b/src/widgets/form-project-specialists/ui/form-project-specialists.module.scss
@@ -1,130 +1,40 @@
-@import '@/shared/assets/fonts/fonts.css';
-@import '@/shared/style/variables';
+@import '../../../shared/style/variables.scss';
 
-.container {
+.specialityList {
 	display: flex;
+	// width: 816px;
+	padding: 32px;
 	flex-direction: column;
 	align-items: flex-start;
-	width: 816px;
-	padding: 32px;
-	background-color: $--bg-primary;
-	border: 1px solid $--border-default;
+	gap: 24px;
 	border-radius: 12px;
-
+	border: 1px solid $--border-default;
+	background: $--bg-primary;
 	@media screen and (max-width: 779px) {
-		gap: 13px;
-		max-width: 779px;
+		border: none;
 	}
-}
-
-.input_extra > span {
-	font-weight: 700;
-}
-
-.input_list {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	font-weight: 700;
-
-	&_title {
+	&__title {
 		margin: 0;
+		color: $--Foreground-default;
+		font-feature-settings:
+			'liga' off,
+			'clig' off;
+
+		/* Header/H5 */
 		font-family: $--open-sans-font;
-		font-weight: 700;
-		font-size: 16px;
+		font-size: 24px;
 		font-style: normal;
-		line-height: 150%;
+		font-weight: 600;
+		line-height: 30px; /* 125% */
 	}
-}
-.directions,
-.employment {
-	width: 100%;
 
-	&_list {
+	&__contentList {
 		width: 100%;
-		padding: 0;
-		display: grid;
-		grid-template-columns: repeat(2, 1fr);
-		gap: 18px;
-	}
-
-	&_item {
 		list-style: none;
 		padding: 0;
-	}
-}
-
-.specialists {
-	width: 100%;
-	font-family: $--open-sans-font;
-	font-weight: 400;
-	display: flex;
-	flex-direction: column;
-	gap: 24px;
-
-	&_master_title {
 		margin: 0;
-		font-weight: 700;
-		font-size: 32px;
-	}
-	&_toggle {
 		display: flex;
-		gap: 16px;
-		align-items: center;
+		flex-direction: column;
+		gap: 24px;
 	}
-
-	&_buttons {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-
-		margin-bottom: 32px;
-	}
-}
-
-.dates {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-
-	&_inputs {
-		//		margin: 0 0 16px 0;
-		display: flex;
-		gap: 8px;
-	}
-
-	&_input {
-		width: 100%;
-	}
-
-	&_text {
-		margin: 0 0 8px 0;
-		font-family: $--open-sans-font;
-		font-size: 16px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 24px; /* 150% */
-		letter-spacing: 0.25px;
-	}
-}
-
-.contacts {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-
-	&_selects {
-		display: grid;
-		gap: 8px;
-		grid-template-columns: 228px auto;
-		height: 70px;
-	}
-}
-
-.buttons {
-	display: flex;
-	gap: 16px;
 }
diff --git a/src/widgets/form-project-specialists/ui/form-project-specialists.tsx b/src/widgets/form-project-specialists/ui/form-project-specialists.tsx
index 5881bc79..9baf4327 100644
--- a/src/widgets/form-project-specialists/ui/form-project-specialists.tsx
+++ b/src/widgets/form-project-specialists/ui/form-project-specialists.tsx
@@ -1,130 +1,195 @@
 'use client';
-import React, { useState } from 'react';
-import { Specialties } from '@/entities/specialties';
+import React, { useCallback, useState } from 'react';
 import {
 	useGetProfessionsQuery,
 	useGetSkillsQuery,
 } from '@/services/GeneralService';
 import { Speciality, TSpeciality } from '@/shared/types/specialty';
-import {
-	useAddSpecialtyMutation,
-	useChangeSpecialtyMutation,
-	useDeleteSpecialtyMutation,
-} from '@/services/UserService';
 import { toaster } from '@/widgets/notification-toast';
+import styles from './form-project-specialists.module.scss';
+import { SpecialityCard } from '@/shared/ui/speciality-card/speciality-card';
+import { Loader } from '@/shared/ui';
+import { AddProjectSpeciality } from '@/entities/add-proejct-specialists/add-project-speciality';
 
 export const FormProjectSpecialists = () => {
-	const { data: professions } = useGetProfessionsQuery([]);
+	const {
+		data: professions,
+		isLoading: isLoadingProf,
+	} = useGetProfessionsQuery([]);
 
-	const { data: allSkills } = useGetSkillsQuery([]);
+	const {
+		data: allSkills,
+		isLoading: isLoadingSkills,
+	} = useGetSkillsQuery([]);
 
 	const [specialties, setSpecialties] = useState<TSpeciality[]>([]);
 
-	const [
-		changeSpecialty,
-		{
-			isLoading: isLoadingChangeSpecialty,
-			isSuccess: isSuccessСhangeSpecialty,
-		},
-	] = useChangeSpecialtyMutation();
 
-	const [
-		deleteSpecialty,
-		{
-			isSuccess: isSuccessDeleteSpecialty,
-			isLoading: isLoadingDeleteSpecialty,
+	const handleAddSpecialty = useCallback(
+		({ profession, level, skills }: TSpecialty) => {
+		  setSpecialties((prevSpecialties) => [
+			{
+			  profession,
+			  level,
+			  skills,
+			},
+			...prevSpecialties,
+		  ]);
+	  
+		  toaster({
+			status: 'success',
+			title: 'Специальность успешно добавлена',
+		  });
 		},
-	] = useDeleteSpecialtyMutation();
+		[]
+	  );
 
-	const [
-		addSpecialty,
-		{ isLoading: isLoadingAddSpecialty, isSuccess: isSuccessAddSpecialty },
-	] = useAddSpecialtyMutation();
+	return (
+		<section className={styles.specialityList}>
+			{isLoadingProf || isLoadingSkills ? (
+				<div style={{ minWidth: '816px' }}>
+					<Loader />
+				</div>
+			) : (
+				<>
+					<h3 className={styles.specialityList__title}>Специальность</h3>
+					<ul className={styles.specialityList__contentList}>
+						{specialties.map((specialist) => (
+							<li key={specialist.id}>
+								<SpecialityCard
+									data={specialist}
+									professions={professions}
+									allSkills={allSkills}
+									handleSubmitChangeSpecialty={function (
+										data: Speciality
+									): void {
+										throw new Error(`Function not implemented: ${data}`);
+									}}
+									handleDeleteSpecialty={function (id: number): void {
+										throw new Error(`Function not implemented. ${id}`);
+									}}
+									isLoadingChangeSpecialty={false}
+									isSuccessСhangeSpecialty={false}
+									isLoadingDeleteSpecialty={false}
+								/>
+							</li>
+						))}
+					</ul>
+					<AddProjectSpeciality
+						allSkills={allSkills}
+						professions={professions}
+						handleAddSpecialty={handleAddSpecialty}
+						isLoadingAddSpecialty={true}
+						isSuccessAddSpecialty={true}
+					/>
+				</>
+			)}
+		</section>
+	);
+};
 
-	const handleSubmitChangeSpecialty = (data: Speciality) => {
-		changeSpecialty(data)
-			.unwrap()
-			.then(() => {
-				toaster({
-					status: 'success',
-					title: 'Настройки специальности успешно сохранены',
-				});
-			})
-			.catch((error) => {
-				toaster({
-					status: 'error',
-					title: 'Ошибка сохранения',
-					subtitle: 'Попробуйте еще раз',
-				});
-				console.log(error);
-			});
-	};
-	const handleDeleteSpecialty = (id: number) => {
-		deleteSpecialty(id)
-			.unwrap()
-			.then(() => {
-				setSpecialties(specialties.filter((item) => item.id !== id));
-				toaster({
-					status: 'success',
-					title: 'Спецаильность успешно удалена',
-				});
-			})
-			.catch(() => {
-				toaster({
-					status: 'error',
-					title: 'Ошибка удаления',
-					subtitle: 'Попробуйте еще раз',
-				});
-			});
-	};
+{
+	/* <Specialties */
+}
+// 	professions={professions}
+// 	allSkills={allSkills && allSkills}
+// 	specialists={specialties}
+// 	handleSubmitChangeSpecialty={handleSubmitChangeSpecialty}
+// 	isLoadingChangeSpecialty={isLoadingChangeSpecialty}
+// 	isSuccessСhangeSpecialty={isSuccessСhangeSpecialty}
+// 	handleDeleteSpecialty={handleDeleteSpecialty}
+// 	isSuccessDeleteSpecialty={isSuccessDeleteSpecialty}
+// 	isLoadingDeleteSpecialty={isLoadingDeleteSpecialty}
+// 	handleAddSpecialty={handleAddSpecialty}
+// 	isLoadingAddSpecialty={isLoadingAddSpecialty}
+// 	isSuccessAddSpecialty={isSuccessAddSpecialty}
+// />
+// const [
+// 	changeSpecialty,
+// 	{
+// 		isLoading: isLoadingChangeSpecialty,
+// 		isSuccess: isSuccessСhangeSpecialty,
+// 	},
+// ] = useChangeSpecialtyMutation();
 
-	const handleAddSpecialty = ({ level, profession, skills }: TSpeciality) => {
-		addSpecialty({
-			level,
-			profession: profession.id,
-			skills: skills.map((item) => item.id),
-		})
-			.unwrap()
-			.then(({ id }) => {
-				setSpecialties([
-					{
-						id,
-						level,
-						profession,
-						skills,
-					},
-					...specialties,
-				]);
+// const [
+// 	deleteSpecialty,
+// 	{
+// 		isSuccess: isSuccessDeleteSpecialty,
+// 		isLoading: isLoadingDeleteSpecialty,
+// 	},
+// ] = useDeleteSpecialtyMutation();
 
-				toaster({
-					status: 'success',
-					title: 'Спецаильность успешно добавлена',
-				});
-			})
-			.catch(() => {
-				toaster({
-					status: 'error',
-					title: 'Ошибка добавления',
-					subtitle: 'Попробуйте еще раз',
-				});
-			});
-	};
+// const [
+// 	addSpecialty,
+// 	{ isLoading: isLoadingAddSpecialty, isSuccess: isSuccessAddSpecialty },
+// ] = useAddSpecialtyMutation();
 
+// const handleSubmitChangeSpecialty = (data: Speciality) => {
+// 	changeSpecialty(data)
+// 		.unwrap()
+// 		.then(() => {
+// 			toaster({
+// 				status: 'success',
+// 				title: 'Настройки специальности успешно сохранены',
+// 			});
+// 		})
+// 		.catch((error) => {
+// 			toaster({
+// 				status: 'error',
+// 				title: 'Ошибка сохранения',
+// 				subtitle: 'Попробуйте еще раз',
+// 			});
+// 			console.log(error);
+// 		});
+// };
+// const handleDeleteSpecialty = (id: number) => {
+// 	deleteSpecialty(id)
+// 		.unwrap()
+// 		.then(() => {
+// 			setSpecialties(specialties.filter((item) => item.id !== id));
+// 			toaster({
+// 				status: 'success',
+// 				title: 'Спецаильность успешно удалена',
+// 			});
+// 		})
+// 		.catch(() => {
+// 			toaster({
+// 				status: 'error',
+// 				title: 'Ошибка удаления',
+// 				subtitle: 'Попробуйте еще раз',
+// 			});
+// 		});
+// };
 
-	return (
-		<Specialties
-			professions={professions}
-			allSkills={allSkills && allSkills}
-			specialists={specialties}
-			handleSubmitChangeSpecialty={handleSubmitChangeSpecialty}
-			isLoadingChangeSpecialty={isLoadingChangeSpecialty}
-			isSuccessСhangeSpecialty={isSuccessСhangeSpecialty}
-			handleDeleteSpecialty={handleDeleteSpecialty}
-			isSuccessDeleteSpecialty={isSuccessDeleteSpecialty}
-			isLoadingDeleteSpecialty={isLoadingDeleteSpecialty}
-			handleAddSpecialty={handleAddSpecialty}
-			isLoadingAddSpecialty={isLoadingAddSpecialty}
-			isSuccessAddSpecialty={isSuccessAddSpecialty}
-		/>
-	);
-};
+// const handleAddSpecialty = ({ level, profession, skills }: TSpeciality) => {
+// 	addSpecialty({
+// 		level,
+// 		profession: profession.id,
+// 		skills: skills.map((item) => item.id),
+// 	})
+// 		.unwrap()
+// 		.then(({ id }) => {
+// 			setSpecialties([
+// 				{
+// 					id,
+// 					level,
+// 					profession,
+// 					skills,
+// 				},
+// 				...specialties,
+// 			]);
+
+// 			toaster({
+// 				status: 'success',
+// 				title: 'Спецаильность успешно добавлена',
+// 			});
+// 		})
+// 		.catch(() => {
+// 			toaster({
+// 				status: 'error',
+// 				title: 'Ошибка добавления',
+// 				subtitle: 'Попробуйте еще раз',
+// 			});
+// 		});
+// };

From 56c9b85d58d90118970b4b98569ef9b13ff708d9 Mon Sep 17 00:00:00 2001
From: Oleh <149747215+Primis1@users.noreply.github.com>
Date: Sun, 20 Oct 2024 22:19:31 -0400
Subject: [PATCH 15/19] fix: reload, component structure

---
 .../add-project-speciality.tsx                |  18 +-
 .../speciality-card.module.scss               |  71 ++++++
 .../speciality-card/speciality-card.tsx       | 220 ++++++++++++++++++
 src/entities/speciality-card/types.ts         |  19 ++
 .../ui/profile-create-project-page.tsx        |  11 +-
 .../profile-create-project-page/ui/types.ts   |  22 ++
 src/shared/ui/counter/counter.module.scss     |  13 +-
 src/shared/ui/counter/counter.tsx             |  23 +-
 src/shared/ui/toggler/toggler.tsx             |   3 +-
 .../ui/form-project-specialists.tsx           | 192 ++++-----------
 10 files changed, 422 insertions(+), 170 deletions(-)
 create mode 100644 src/entities/speciality-card/speciality-card.module.scss
 create mode 100644 src/entities/speciality-card/speciality-card.tsx
 create mode 100644 src/entities/speciality-card/types.ts
 create mode 100644 src/pages/profile-create-project-page/ui/types.ts

diff --git a/src/entities/add-proejct-specialists/add-project-speciality.tsx b/src/entities/add-proejct-specialists/add-project-speciality.tsx
index fe6a1f18..dca7e988 100644
--- a/src/entities/add-proejct-specialists/add-project-speciality.tsx
+++ b/src/entities/add-proejct-specialists/add-project-speciality.tsx
@@ -20,12 +20,7 @@ export const AddProjectSpeciality: React.FC<AddSpecialtyProps> = ({
 	allSkills,
 	handleAddSpecialty,
 }) => {
-	const {
-		control,
-		handleSubmit,
-		reset,
-		watch,
-	} = useForm({
+	const { control, handleSubmit, reset, watch } = useForm({
 		mode: 'onChange',
 		defaultValues: {
 			profession: null,
@@ -69,10 +64,7 @@ export const AddProjectSpeciality: React.FC<AddSpecialtyProps> = ({
 	};
 
 	return (
-		<form
-			className={styles.addSpecialty}
-			onSubmit={handleSubmit(onSubmit)}
-			onReset={handleResetForm}>
+		<div className={styles.addSpecialty}>
 			<Controller
 				name="profession"
 				control={control}
@@ -140,7 +132,8 @@ export const AddProjectSpeciality: React.FC<AddSpecialtyProps> = ({
 					IconLeft={IconPlus}
 					variant="secondary"
 					width="regular"
-					type="submit"
+					onClick={handleSubmit(onSubmit)}
+					type="button"
 					disabled={isFieldsNotFill()}>
 					Добавить
 				</MainButton>
@@ -149,10 +142,11 @@ export const AddProjectSpeciality: React.FC<AddSpecialtyProps> = ({
 					className={styles.addSpecialty__resetButton}
 					type="reset"
 					variant="trivial"
+					onClick={handleResetForm}
 					width="min">
 					Сбросить
 				</MainButton>
 			</div>
-		</form>
+		</div>
 	);
 };
diff --git a/src/entities/speciality-card/speciality-card.module.scss b/src/entities/speciality-card/speciality-card.module.scss
new file mode 100644
index 00000000..a56b5ed4
--- /dev/null
+++ b/src/entities/speciality-card/speciality-card.module.scss
@@ -0,0 +1,71 @@
+@import 'src/shared/style/variables.scss';
+
+.specialityCard {
+	// width: calc(100% - 48px);
+	display: flex;
+	padding: 24px;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 16px;
+	align-self: stretch;
+	border-radius: 12px;
+	border: 1px solid $--border-default;
+	background: $--bg-primary;
+	position: relative;
+	// &__wrapper {
+	// 	width: 100%;
+	// }
+
+	&__button {
+		position: absolute;
+		top: 24px;
+		right: 24px;
+		width: 24px;
+		height: 24px;
+		border: none;
+		&:hover {
+			cursor: pointer;
+		}
+		&_edit {
+			background: url('/src/shared/assets/icons/edit-icon.svg') center;
+		}
+		&_delete {
+			background: url('/src/shared/assets/icons/delete-red.svg') center;
+			&:disabled {
+				cursor: wait;
+				opacity: 0.2;
+			}
+		}
+	}
+	&__title {
+		margin: 0;
+		color: $--Foreground-default;
+		font-family: $--open-sans-font;
+		font-size: 20px;
+		font-style: normal;
+		font-weight: 700;
+		line-height: normal;
+		letter-spacing: 0.25px;
+	}
+	.inputBlock {
+		width: 100%;
+	}
+}
+
+.config {
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
+
+	&_toggle {
+		display: flex;
+		gap: 16px;
+		align-items: center;
+	}
+}
+
+
+.invicible {
+	position: fixed;
+	display: none;
+}
\ No newline at end of file
diff --git a/src/entities/speciality-card/speciality-card.tsx b/src/entities/speciality-card/speciality-card.tsx
new file mode 100644
index 00000000..c128d3e8
--- /dev/null
+++ b/src/entities/speciality-card/speciality-card.tsx
@@ -0,0 +1,220 @@
+import React, { FC, useEffect, useState } from 'react';
+import clsx from 'clsx';
+import styles from './speciality-card.module.scss';
+import { LEVEL } from '@/utils/constants';
+import { Option } from '@/shared/types/option';
+import { SpecialityCardProps } from './types';
+import { TProfession, TSkills } from '@/shared/types/specialty';
+import { Counter, Input, MainButton, Toggler } from '@/shared/ui';
+import { MultiSelectInput } from '@/shared/ui/multi-select-input/multi-select-input';
+import SelectWithSearch from '@/shared/ui/select-search/select-search';
+import { SkillsList } from '@/shared/ui/skills-list/skills-list';
+import { Edit, Trash2 } from 'lucide-react';
+
+export const ProjectSpecialitCard: FC<SpecialityCardProps> = ({
+	data,
+	professions,
+	allSkills,
+	isLoadingChangeSpecialty,
+	isSuccessСhangeSpecialty,
+	handleSubmitChangeSpecialty,
+	handleDeleteSpecialty,
+	isLoadingDeleteSpecialty,
+}) => {
+	const [isShowViewEdit, setIsShowViewEdit] = useState<boolean>(false);
+	const [recruitmentIsOpen, setRecruitmentIsOpen] = useState<boolean>(false);
+	const [profession, setProfession] = useState<TProfession>(data.profession);
+	const [selectedLevel, setSelectedLevel] = useState<number>(data.level);
+	const [skills, setSkills] = useState<TSkills[]>(data.skills);
+
+	useEffect(() => {
+		if (isSuccessСhangeSpecialty) {
+			setIsShowViewEdit(false);
+		}
+	}, [isSuccessСhangeSpecialty]);
+
+	const transformProfessions = (profList: TProfession[]) => {
+		return profList.map(({ id, specialization }) => ({
+			label: specialization,
+			value: specialization,
+			id,
+		}));
+	};
+
+	const handleProfessionChange = (value: string) => {
+		setProfession(
+			professions.find(
+				(element) => element.specialization === value
+			) as TProfession
+		); // обновляем состояние выбранного значения
+	};
+	const handleLevelChange = (value: string) => {
+		setSelectedLevel(
+			LEVEL.find((element) => element.value === value)?.level as number
+		); // обновляем состояние выбранного значения
+	};
+
+	const changeViewforEdit = () => {
+		setIsShowViewEdit(true);
+	};
+
+	const getLevelName = (level: number) => {
+		if (level > 0 && level < 5) {
+			return LEVEL[level - 1].value;
+		} else return 'Invalid level';
+	};
+
+	const getSkills = (skills: TSkills[]) => {
+		return skills.map(({ id, name }) => ({
+			label: name,
+			value: id,
+		}));
+	};
+
+	const editSkills = (skills: Option[]) => {
+		setSkills(
+			skills.map(({ label, value }) => ({
+				name: label,
+				id: value,
+			}))
+		);
+	};
+
+	// const getSkillsforSubmit = (dataSkills: TSkills[]) => {
+	// 	return dataSkills.map((dataSkill) => dataSkill.id);
+	// };
+
+	const isSkillsNotAdded = () => {
+		return skills.length === 0;
+	};
+//	 ========================  possible bug 
+const handleSubmit = () => {
+		handleSubmitChangeSpecialty({
+			level: selectedLevel,
+			profession: profession,
+			skills: skills,
+			id: data.id,
+		});
+	};
+
+	const handleDelete = () => {
+		handleDeleteSpecialty(data.id as number);
+	};
+
+	const serialize = (skills: TSkills[]) => {
+		const nums = skills.map((skill) => skill.id);
+
+		return nums.toString();
+	};
+
+	return (
+		<div className={styles.specialityCard__wrapper}>
+			{!isShowViewEdit ? (
+				<div className={styles.specialityCard}>
+					<button
+						type="button"
+						className={clsx(
+							styles.specialityCard__button,
+							styles.specialityCard__button_edit
+						)}
+						onClick={changeViewforEdit}>
+						<Edit />
+					</button>
+					<h3 className={styles.specialityCard__title}>
+						{profession.specialization}, {getLevelName(selectedLevel)}
+					</h3>
+					<SkillsList skills={skills} />
+					<div className={styles.config}>
+						<Counter
+							id={data.id as number}
+							disabled={!recruitmentIsOpen}
+							
+						/>
+						<div className={styles.config_toggle}>
+							<span>Набор {recruitmentIsOpen ? 'открыт' : 'закрыт'}</span>
+							<Toggler
+								checked={recruitmentIsOpen as boolean}
+								name={`project_specialists[${data.id}].is_required`}
+								onChange={(evt) => setRecruitmentIsOpen(evt.target.checked)}
+							/>
+						</div>
+					</div>
+
+ {/* we shall try to cahnge the data in the value change, or something instead of onSubmit */}
+
+					<Input
+						labelName=""
+						name={`project_specialists[${data.id}].profession`}
+						value={profession.id}
+						className={styles.invicible}
+					/>
+
+					<Input
+						labelName=""
+						name={`project_specialists[${data.id}].level`}
+						value={selectedLevel}
+						style={{ display: 'none' }}
+					/>
+					<Input
+						labelName=""
+						name={`project_specialists[${data.id}].skills`}
+						value={serialize(skills)}
+						style={{ display: 'none' }}
+					/>
+				</div>
+			) : (
+				<div className={styles.specialityCard}>
+					<button
+						type="button"
+						disabled={isLoadingDeleteSpecialty}
+						className={clsx(
+							styles.specialityCard__button,
+							styles.specialityCard__button_delete
+						)}
+						onClick={handleDelete}>
+						<Trash2 color="red" />
+					</button>
+					<h3 className={styles.specialityCard__title}>
+						{data.profession.specialization}, {getLevelName(selectedLevel)}
+					</h3>
+
+					<SelectWithSearch
+						label="Специальность"
+						options={transformProfessions(professions)}
+						selectedValue={profession.specialization as string}
+						onValueChange={handleProfessionChange}
+					/>
+					<SelectWithSearch
+						label="Уровень квалификации"
+						options={LEVEL}
+						selectedValue={getLevelName(selectedLevel)}
+						onValueChange={handleLevelChange}
+					/>
+					<div className={styles.inputBlock}>
+						<MultiSelectInput
+							width="100%"
+							name="select-skills"
+							label="Навыки"
+							description="Выберите не более 15 навыков"
+							maxSelections={15}
+							isSearchable
+							options={getSkills(allSkills)}
+							values={getSkills(skills)}
+							onChange={(item) => {
+								editSkills(item as Option[]);
+							}}
+						/>
+					</div>
+					<MainButton
+						variant="primary"
+						width="regular"
+						type="button"
+						onClick={handleSubmit}
+						disabled={isSkillsNotAdded() || isLoadingChangeSpecialty}>
+						Сохранить
+					</MainButton>
+				</div>
+			)}
+		</div>
+	);
+};
diff --git a/src/entities/speciality-card/types.ts b/src/entities/speciality-card/types.ts
new file mode 100644
index 00000000..3b91b9a6
--- /dev/null
+++ b/src/entities/speciality-card/types.ts
@@ -0,0 +1,19 @@
+import { TProfession, TSkills, TSpeciality } from '@/shared/types/specialty';
+import { Control } from 'react-hook-form';
+
+export type SpecialityCardProps = {
+	data: TSpeciality;
+	control: Control;
+	professions: TProfession[];
+	allSkills: TSkills[];
+	isLoadingChangeSpecialty: boolean;
+	handleSubmitChangeSpecialty: ({
+		id,
+		profession,
+		level,
+		skills,
+	}: TSpeciality) => void;
+	isSuccessСhangeSpecialty: boolean;
+	handleDeleteSpecialty: (id: number) => void;
+	isLoadingDeleteSpecialty: boolean;
+};
diff --git a/src/pages/profile-create-project-page/ui/profile-create-project-page.tsx b/src/pages/profile-create-project-page/ui/profile-create-project-page.tsx
index 41de53cc..90ab9b75 100644
--- a/src/pages/profile-create-project-page/ui/profile-create-project-page.tsx
+++ b/src/pages/profile-create-project-page/ui/profile-create-project-page.tsx
@@ -5,21 +5,24 @@ import React from 'react';
 import styles from './profile-create-project-page.module.scss';
 
 import { SubmitHandler, useForm } from 'react-hook-form';
+import { Project } from './types';
 
 type FormValues = {
 	name: string;
 	contacts: { [key: string]: string }[]; // Dynamic contact keys
 };
 export const ProfileCreateProject = () => {
-	const onSubmit: SubmitHandler<FormValues> = (data) => {
-		console.table(data);
+	let obj: Project;
+	const onSubmit: SubmitHandler<FormValues> = (data: Project) => {
+		obj = { ...data };
+
+		console.table(obj);
 	};
 	const { control } = useForm();
-
 	return (
 		<Form onSubmit={onSubmit} extraClass={styles.form}>
 			<FormProject control={control} />
-			<FormProjectSpecialists />
+			<FormProjectSpecialists control={control} />
 			<div className={styles.btn}>
 				<MainButton
 					variant={'primary'}
diff --git a/src/pages/profile-create-project-page/ui/types.ts b/src/pages/profile-create-project-page/ui/types.ts
new file mode 100644
index 00000000..22290801
--- /dev/null
+++ b/src/pages/profile-create-project-page/ui/types.ts
@@ -0,0 +1,22 @@
+export interface ProjectSpecialist {
+	profession: number;
+	skills: string;
+	count: number;
+	level: number;
+	is_required: boolean;
+}
+
+export interface Project {
+	name: string;
+	description: string;
+	started: string;
+	ended: string;
+	busyness: number;
+	directions: string[];
+	link: string;
+	phone_number: string;
+	telegram_nick: string;
+	email: string;
+	project_specialists: ProjectSpecialist[];
+	status: number;
+}
diff --git a/src/shared/ui/counter/counter.module.scss b/src/shared/ui/counter/counter.module.scss
index 4a1fa7a8..38fff7b5 100644
--- a/src/shared/ui/counter/counter.module.scss
+++ b/src/shared/ui/counter/counter.module.scss
@@ -32,6 +32,11 @@
 		background-color: $--bg-secondary;
 	}
 }
+
+.dismiss {
+	all: unset; 
+}
+
 .count {
 	display: flex;
 	justify-content: center;
@@ -48,13 +53,7 @@
 	border: none;
 	padding: 6px;
 	background-color: transparent;
-	&:hover {
-		background-color: $--bg-card-hover;
-	}
-	&:active {
-		background-color: $--bg-accent-default;
-		color: $--bg-primary;
-	}
+
 	&:disabled {
 		background-color: $--bg-primary;
 		color: $--Foreground-subtitle;
diff --git a/src/shared/ui/counter/counter.tsx b/src/shared/ui/counter/counter.tsx
index 3e7e81c7..954976c1 100644
--- a/src/shared/ui/counter/counter.tsx
+++ b/src/shared/ui/counter/counter.tsx
@@ -8,9 +8,18 @@ import {
 	IconPlusDisabled,
 } from '@/shared/assets';
 import styles from './counter.module.scss';
+import { Input } from '../input/input';
+import clsx from 'clsx';
 
-export const Counter = ({ disabled }: { disabled: boolean }) => {
+export const Counter = ({
+	id,
+	disabled,
+}: {
+	id: number;
+	disabled: boolean;
+}) => {
 	const [isNumber, SetIsNumber] = useState(1);
+	console.log(id);
 	const increment = () => {
 		if (isNumber <= 14) {
 			SetIsNumber(isNumber + 1);
@@ -27,6 +36,7 @@ export const Counter = ({ disabled }: { disabled: boolean }) => {
 		<div className={styles.container}>
 			<div className={styles.buttonWrapper}>
 				<button
+					type="button"
 					className={styles.button}
 					onClick={decrement}
 					disabled={disabled}>
@@ -38,12 +48,17 @@ export const Counter = ({ disabled }: { disabled: boolean }) => {
 				</button>
 			</div>
 			<div className={styles.buttonWrapper}>
-				<button className={styles.count} disabled={disabled}>
-					{isNumber}
-				</button>
+				<Input
+					name={`counter`}
+					labelName=""
+					className={clsx(styles.dismiss, styles.count)}
+					value={'isNumber'}
+					disabled={true}
+				/>
 			</div>
 			<div className={styles.buttonWrapper}>
 				<button
+					type="button"
 					className={styles.button}
 					onClick={increment}
 					disabled={disabled}>
diff --git a/src/shared/ui/toggler/toggler.tsx b/src/shared/ui/toggler/toggler.tsx
index 507675d4..88d6aa05 100644
--- a/src/shared/ui/toggler/toggler.tsx
+++ b/src/shared/ui/toggler/toggler.tsx
@@ -5,7 +5,7 @@ import { TogglerProps } from './types';
 import styles from './toggler.module.scss';
 import { useFormContext } from 'react-hook-form';
 
-export const Toggler = ({ checked, name, id, onChange }: TogglerProps) => {
+export const Toggler = ({ checked, name, onChange }: TogglerProps) => {
 	const { register } = useFormContext();
 
 	return (
@@ -16,7 +16,6 @@ export const Toggler = ({ checked, name, id, onChange }: TogglerProps) => {
 				type="checkbox"
 				checked={checked}
 				name={name}
-				id={id}
 				onChange={onChange}
 			/>
 			<span className={styles.toggleCheckbox__default} />
diff --git a/src/widgets/form-project-specialists/ui/form-project-specialists.tsx b/src/widgets/form-project-specialists/ui/form-project-specialists.tsx
index 9baf4327..5367da44 100644
--- a/src/widgets/form-project-specialists/ui/form-project-specialists.tsx
+++ b/src/widgets/form-project-specialists/ui/form-project-specialists.tsx
@@ -1,48 +1,69 @@
 'use client';
-import React, { useCallback, useState } from 'react';
+import React, { useState } from 'react';
 import {
 	useGetProfessionsQuery,
 	useGetSkillsQuery,
 } from '@/services/GeneralService';
-import { Speciality, TSpeciality } from '@/shared/types/specialty';
+import { TSpeciality } from '@/shared/types/specialty';
 import { toaster } from '@/widgets/notification-toast';
 import styles from './form-project-specialists.module.scss';
-import { SpecialityCard } from '@/shared/ui/speciality-card/speciality-card';
 import { Loader } from '@/shared/ui';
 import { AddProjectSpeciality } from '@/entities/add-proejct-specialists/add-project-speciality';
+import { ProjectSpecialitCard } from '@/entities/speciality-card/speciality-card';
+import { Control } from 'react-hook-form';
 
-export const FormProjectSpecialists = () => {
-	const {
-		data: professions,
-		isLoading: isLoadingProf,
-	} = useGetProfessionsQuery([]);
+export const FormProjectSpecialists = ({
+	control,
+}: {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	control: Control<any>;
+}) => {
+	const { data: professions, isLoading: isLoadingProf } =
+		useGetProfessionsQuery([]);
 
-	const {
-		data: allSkills,
-		isLoading: isLoadingSkills,
-	} = useGetSkillsQuery([]);
+	const { data: allSkills, isLoading: isLoadingSkills } = useGetSkillsQuery([]);
 
 	const [specialties, setSpecialties] = useState<TSpeciality[]>([]);
 
-
-	const handleAddSpecialty = useCallback(
-		({ profession, level, skills }: TSpecialty) => {
-		  setSpecialties((prevSpecialties) => [
+//	 ========================  possible bug 
+	const handleAddSpecialty = ({ profession, level, skills }: TSpeciality) => {
+		setSpecialties((prevSpecialties) => [
 			{
-			  profession,
-			  level,
-			  skills,
+				profession,
+				level,
+				skills,
 			},
 			...prevSpecialties,
-		  ]);
-	  
-		  toaster({
+		]);
+
+		toaster({
 			status: 'success',
 			title: 'Специальность успешно добавлена',
-		  });
-		},
-		[]
-	  );
+		});
+	};
+	const handleChangeSpecialty = ({
+		id,
+		profession,
+		level,
+		skills,
+	}: TSpeciality) => {
+		setSpecialties(() => [
+			{
+				id,
+				profession,
+				level,
+				skills,
+			},
+		]);
+
+		toaster({
+			status: 'success',
+			title: 'Специальность успешно изменена',
+		});
+	};
+	const handleDelete = (id: number) => {
+		setSpecialties(specialties.filter((item) => item.id !== id));
+	};
 
 	return (
 		<section className={styles.specialityList}>
@@ -56,21 +77,16 @@ export const FormProjectSpecialists = () => {
 					<ul className={styles.specialityList__contentList}>
 						{specialties.map((specialist) => (
 							<li key={specialist.id}>
-								<SpecialityCard
+								<ProjectSpecialitCard
 									data={specialist}
+									control={control}
 									professions={professions}
 									allSkills={allSkills}
-									handleSubmitChangeSpecialty={function (
-										data: Speciality
-									): void {
-										throw new Error(`Function not implemented: ${data}`);
-									}}
-									handleDeleteSpecialty={function (id: number): void {
-										throw new Error(`Function not implemented. ${id}`);
-									}}
 									isLoadingChangeSpecialty={false}
 									isSuccessСhangeSpecialty={false}
 									isLoadingDeleteSpecialty={false}
+									handleSubmitChangeSpecialty={handleChangeSpecialty}
+									handleDeleteSpecialty={handleDelete}
 								/>
 							</li>
 						))}
@@ -87,109 +103,3 @@ export const FormProjectSpecialists = () => {
 		</section>
 	);
 };
-
-{
-	/* <Specialties */
-}
-// 	professions={professions}
-// 	allSkills={allSkills && allSkills}
-// 	specialists={specialties}
-// 	handleSubmitChangeSpecialty={handleSubmitChangeSpecialty}
-// 	isLoadingChangeSpecialty={isLoadingChangeSpecialty}
-// 	isSuccessСhangeSpecialty={isSuccessСhangeSpecialty}
-// 	handleDeleteSpecialty={handleDeleteSpecialty}
-// 	isSuccessDeleteSpecialty={isSuccessDeleteSpecialty}
-// 	isLoadingDeleteSpecialty={isLoadingDeleteSpecialty}
-// 	handleAddSpecialty={handleAddSpecialty}
-// 	isLoadingAddSpecialty={isLoadingAddSpecialty}
-// 	isSuccessAddSpecialty={isSuccessAddSpecialty}
-// />
-// const [
-// 	changeSpecialty,
-// 	{
-// 		isLoading: isLoadingChangeSpecialty,
-// 		isSuccess: isSuccessСhangeSpecialty,
-// 	},
-// ] = useChangeSpecialtyMutation();
-
-// const [
-// 	deleteSpecialty,
-// 	{
-// 		isSuccess: isSuccessDeleteSpecialty,
-// 		isLoading: isLoadingDeleteSpecialty,
-// 	},
-// ] = useDeleteSpecialtyMutation();
-
-// const [
-// 	addSpecialty,
-// 	{ isLoading: isLoadingAddSpecialty, isSuccess: isSuccessAddSpecialty },
-// ] = useAddSpecialtyMutation();
-
-// const handleSubmitChangeSpecialty = (data: Speciality) => {
-// 	changeSpecialty(data)
-// 		.unwrap()
-// 		.then(() => {
-// 			toaster({
-// 				status: 'success',
-// 				title: 'Настройки специальности успешно сохранены',
-// 			});
-// 		})
-// 		.catch((error) => {
-// 			toaster({
-// 				status: 'error',
-// 				title: 'Ошибка сохранения',
-// 				subtitle: 'Попробуйте еще раз',
-// 			});
-// 			console.log(error);
-// 		});
-// };
-// const handleDeleteSpecialty = (id: number) => {
-// 	deleteSpecialty(id)
-// 		.unwrap()
-// 		.then(() => {
-// 			setSpecialties(specialties.filter((item) => item.id !== id));
-// 			toaster({
-// 				status: 'success',
-// 				title: 'Спецаильность успешно удалена',
-// 			});
-// 		})
-// 		.catch(() => {
-// 			toaster({
-// 				status: 'error',
-// 				title: 'Ошибка удаления',
-// 				subtitle: 'Попробуйте еще раз',
-// 			});
-// 		});
-// };
-
-// const handleAddSpecialty = ({ level, profession, skills }: TSpeciality) => {
-// 	addSpecialty({
-// 		level,
-// 		profession: profession.id,
-// 		skills: skills.map((item) => item.id),
-// 	})
-// 		.unwrap()
-// 		.then(({ id }) => {
-// 			setSpecialties([
-// 				{
-// 					id,
-// 					level,
-// 					profession,
-// 					skills,
-// 				},
-// 				...specialties,
-// 			]);
-
-// 			toaster({
-// 				status: 'success',
-// 				title: 'Спецаильность успешно добавлена',
-// 			});
-// 		})
-// 		.catch(() => {
-// 			toaster({
-// 				status: 'error',
-// 				title: 'Ошибка добавления',
-// 				subtitle: 'Попробуйте еще раз',
-// 			});
-// 		});
-// };

From 9322662bdd6db257be35914e60766bc0dc3ac4d7 Mon Sep 17 00:00:00 2001
From: Oleh <149747215+Primis1@users.noreply.github.com>
Date: Thu, 24 Oct 2024 21:44:37 -0400
Subject: [PATCH 16/19] add: project specialists slice; rm: unused components

---
 .../form-create-project-card/index.ts         |   1 -
 .../ui/form-create-project-card.module.scss   |  47 --------
 .../ui/form-create-project-card.tsx           | 104 ------------------
 .../form-create-project-card/ui/types.ts      |   1 -
 ...y-card.tsx => project-speciality-card.tsx} |  77 ++++++-------
 src/entities/speciality-card/types.ts         |   3 +-
 .../ui/profile-create-project-page.tsx        |  48 ++++----
 src/shared/ui/counter/counter.tsx             |  17 +--
 src/store/reducers/ProjectSpecialist.ts       |  51 +++++++++
 src/store/store.ts                            |   3 +
 .../ui/form-project-specialists.tsx           |  32 ++----
 .../ui/manage-specialists.tsx                 |   2 -
 12 files changed, 130 insertions(+), 256 deletions(-)
 delete mode 100644 src/entities/form-create-project-card/index.ts
 delete mode 100644 src/entities/form-create-project-card/ui/form-create-project-card.module.scss
 delete mode 100644 src/entities/form-create-project-card/ui/form-create-project-card.tsx
 delete mode 100644 src/entities/form-create-project-card/ui/types.ts
 rename src/entities/speciality-card/{speciality-card.tsx => project-speciality-card.tsx} (82%)
 create mode 100644 src/store/reducers/ProjectSpecialist.ts

diff --git a/src/entities/form-create-project-card/index.ts b/src/entities/form-create-project-card/index.ts
deleted file mode 100644
index 555582c4..00000000
--- a/src/entities/form-create-project-card/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { FormCreateProjectCard } from './ui/form-create-project-card';
diff --git a/src/entities/form-create-project-card/ui/form-create-project-card.module.scss b/src/entities/form-create-project-card/ui/form-create-project-card.module.scss
deleted file mode 100644
index 4c3abe43..00000000
--- a/src/entities/form-create-project-card/ui/form-create-project-card.module.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-.container {
-	display: flex;
-	flex-direction: column;
-	gap: 24px;
-
-	max-width: 816px;
-	border: 1px solid var(--border-default, #e2e8f0);
-	position: relative;
-
-	padding: 24px;
-	border-radius: 12px;
-}
-
-.icon {
-	width: 24px;
-	height: 24px;
-}
-
-.title {
-	margin: 0;
-	font-size: 20px;
-	font-style: normal;
-	font-weight: 700;
-	line-height: normal;
-	letter-spacing: 0.25px;
-}
-
-.card_button {
-	position: absolute;
-	right: 24px;
-	top: 24px;
-
-	background-color: transparent;
-	border: none;
-	cursor: pointer;
-}
-
-.config {
-	display: flex;
-	justify-content: space-between;
-
-	&_toggle {
-		display: flex;
-		gap: 16px;
-		align-items: center;
-	}
-}
diff --git a/src/entities/form-create-project-card/ui/form-create-project-card.tsx b/src/entities/form-create-project-card/ui/form-create-project-card.tsx
deleted file mode 100644
index 6758c7ce..00000000
--- a/src/entities/form-create-project-card/ui/form-create-project-card.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-'use client';
-
-import React, { FC, useState } from 'react';
-import styles from './form-create-project-card.module.scss';
-import { IFormCreateProjectCard } from './types';
-import { MultiSelectInput } from '@/shared/ui/multi-select-input/multi-select-input';
-import Edit from '@/shared/assets/icons/edit-icon.svg';
-import Delete from '@/shared/assets/icons/delete.svg';
-import { SingleSelectInput } from '@/shared/ui/single-select-input/single-select-input';
-import { MainButton, Counter, Toggler } from '@/shared/ui';
-
-export const FormCreateProjectCard: FC<IFormCreateProjectCard> = () => {
-	const [isEdit, setIsEdit] = useState(false);
-	const [recruitmentIsOpen, setRecruitmentIsOpen] = useState(false);
-
-	const handleIsEdit = () => {
-		setIsEdit(!isEdit);
-	};
-
-	const handleDelete = () => {
-		console.log(`delete --> `, 'delete');
-	};
-
-	return (
-		<>
-			<div className={styles.container}>
-				<h3 className={styles.title}>
-					UI/UX дизайнер / UI/UX Designer, Junior
-				</h3>
-
-				{!isEdit && (
-					<button
-						type="button"
-						className={styles.card_button}
-						onClick={handleIsEdit}>
-						<Edit className={styles.icon} />
-					</button>
-				)}
-				{isEdit && (
-					<button
-						type="button"
-						className={styles.card_button}
-						onClick={handleDelete}>
-						<Delete className={styles.icon} />
-					</button>
-				)}
-
-				{isEdit && (
-					<>
-						<SingleSelectInput
-							name={`project_specialists`}
-							label={'Специальность'}
-							onChange={() => {}}
-							options={[]}
-							description="Выберите одну специальность"
-							isSearchable
-						/>
-						<div>
-							<MultiSelectInput
-								name={`project_specialists`}
-								onChange={() => {}}
-								options={[]}
-								values={[]}
-								label={'Уровень квалификации'}
-							/>
-						</div>
-						<div>
-							<MultiSelectInput
-								name={`project_specialists`}
-								onChange={() => {}}
-								options={[]}
-								values={[]}
-								label={'Навыки'}
-								description="Выберите не более 15 навыков"
-							/>
-						</div>
-					</>
-				)}
-
-				<div className={styles.config}>
-					<Counter disabled={!recruitmentIsOpen} />
-					<div className={styles.config_toggle}>
-						<span>Набор {recruitmentIsOpen ? 'открыт' : 'закрыт'}</span>
-						<Toggler
-							checked={recruitmentIsOpen as boolean}
-							name={'allow_notifications'}
-							id={'allow_notifications'}
-							onChange={(evt) => setRecruitmentIsOpen(evt.target.checked)}
-						/>
-					</div>
-				</div>
-
-				{isEdit && (
-					<MainButton
-						variant="secondary"
-						width="regular"
-						onClick={handleIsEdit}>
-						Сохранить
-					</MainButton>
-				)}
-			</div>
-		</>
-	);
-};
diff --git a/src/entities/form-create-project-card/ui/types.ts b/src/entities/form-create-project-card/ui/types.ts
deleted file mode 100644
index 7d7e86af..00000000
--- a/src/entities/form-create-project-card/ui/types.ts
+++ /dev/null
@@ -1 +0,0 @@
-export interface IFormCreateProjectCard {}
diff --git a/src/entities/speciality-card/speciality-card.tsx b/src/entities/speciality-card/project-speciality-card.tsx
similarity index 82%
rename from src/entities/speciality-card/speciality-card.tsx
rename to src/entities/speciality-card/project-speciality-card.tsx
index c128d3e8..6e6b464c 100644
--- a/src/entities/speciality-card/speciality-card.tsx
+++ b/src/entities/speciality-card/project-speciality-card.tsx
@@ -5,11 +5,13 @@ import { LEVEL } from '@/utils/constants';
 import { Option } from '@/shared/types/option';
 import { SpecialityCardProps } from './types';
 import { TProfession, TSkills } from '@/shared/types/specialty';
-import { Counter, Input, MainButton, Toggler } from '@/shared/ui';
+import { Counter, MainButton, Toggler } from '@/shared/ui';
 import { MultiSelectInput } from '@/shared/ui/multi-select-input/multi-select-input';
 import SelectWithSearch from '@/shared/ui/select-search/select-search';
 import { SkillsList } from '@/shared/ui/skills-list/skills-list';
 import { Edit, Trash2 } from 'lucide-react';
+import { useDispatch } from 'react-redux';
+import { addProjectSpecialist } from '@/store/reducers/ProjectSpecialist';
 
 export const ProjectSpecialitCard: FC<SpecialityCardProps> = ({
 	data,
@@ -17,15 +19,19 @@ export const ProjectSpecialitCard: FC<SpecialityCardProps> = ({
 	allSkills,
 	isLoadingChangeSpecialty,
 	isSuccessСhangeSpecialty,
+	isLoadingDeleteSpecialty,
 	handleSubmitChangeSpecialty,
 	handleDeleteSpecialty,
-	isLoadingDeleteSpecialty,
 }) => {
 	const [isShowViewEdit, setIsShowViewEdit] = useState<boolean>(false);
+
 	const [recruitmentIsOpen, setRecruitmentIsOpen] = useState<boolean>(false);
 	const [profession, setProfession] = useState<TProfession>(data.profession);
 	const [selectedLevel, setSelectedLevel] = useState<number>(data.level);
 	const [skills, setSkills] = useState<TSkills[]>(data.skills);
+	const [count, setCount] = useState<number>(1);
+
+	const dispatch = useDispatch();
 
 	useEffect(() => {
 		if (isSuccessСhangeSpecialty) {
@@ -33,6 +39,16 @@ export const ProjectSpecialitCard: FC<SpecialityCardProps> = ({
 		}
 	}, [isSuccessСhangeSpecialty]);
 
+	const toNum = (skills: TSkills[]) => {
+		const nums = skills.map((skill) => skill.id);
+
+		return nums;
+	};
+
+	const updateCounter = (num: number) => {
+		setCount(num);
+	};
+
 	const transformProfessions = (profList: TProfession[]) => {
 		return profList.map(({ id, specialization }) => ({
 			label: specialization,
@@ -80,20 +96,16 @@ export const ProjectSpecialitCard: FC<SpecialityCardProps> = ({
 		);
 	};
 
-	// const getSkillsforSubmit = (dataSkills: TSkills[]) => {
-	// 	return dataSkills.map((dataSkill) => dataSkill.id);
-	// };
-
 	const isSkillsNotAdded = () => {
 		return skills.length === 0;
 	};
-//	 ========================  possible bug 
-const handleSubmit = () => {
+
+	const handleSubmit = () => {
 		handleSubmitChangeSpecialty({
+			id: data.id,
 			level: selectedLevel,
 			profession: profession,
 			skills: skills,
-			id: data.id,
 		});
 	};
 
@@ -101,11 +113,16 @@ const handleSubmit = () => {
 		handleDeleteSpecialty(data.id as number);
 	};
 
-	const serialize = (skills: TSkills[]) => {
-		const nums = skills.map((skill) => skill.id);
-
-		return nums.toString();
-	};
+	dispatch(
+		addProjectSpecialist({
+			profession: profession.id,
+			skills: toNum(skills),
+			count,
+			level: selectedLevel,
+			// eslint-disable-next-line camelcase
+			is_required: recruitmentIsOpen,
+		})
+	);
 
 	return (
 		<div className={styles.specialityCard__wrapper}>
@@ -121,46 +138,22 @@ const handleSubmit = () => {
 						<Edit />
 					</button>
 					<h3 className={styles.specialityCard__title}>
-						{profession.specialization}, {getLevelName(selectedLevel)}
+						{profession.specialization} / {profession.specialty} ,{' '}
+						{getLevelName(selectedLevel)}
 					</h3>
 					<SkillsList skills={skills} />
 					<div className={styles.config}>
-						<Counter
-							id={data.id as number}
-							disabled={!recruitmentIsOpen}
-							
-						/>
+						<Counter state={updateCounter} disabled={!recruitmentIsOpen} />
 						<div className={styles.config_toggle}>
 							<span>Набор {recruitmentIsOpen ? 'открыт' : 'закрыт'}</span>
 							<Toggler
 								checked={recruitmentIsOpen as boolean}
-								name={`project_specialists[${data.id}].is_required`}
 								onChange={(evt) => setRecruitmentIsOpen(evt.target.checked)}
 							/>
 						</div>
 					</div>
 
- {/* we shall try to cahnge the data in the value change, or something instead of onSubmit */}
-
-					<Input
-						labelName=""
-						name={`project_specialists[${data.id}].profession`}
-						value={profession.id}
-						className={styles.invicible}
-					/>
-
-					<Input
-						labelName=""
-						name={`project_specialists[${data.id}].level`}
-						value={selectedLevel}
-						style={{ display: 'none' }}
-					/>
-					<Input
-						labelName=""
-						name={`project_specialists[${data.id}].skills`}
-						value={serialize(skills)}
-						style={{ display: 'none' }}
-					/>
+					{/* we shall try to cahnge the data in the value change, or something instead of onSubmit */}
 				</div>
 			) : (
 				<div className={styles.specialityCard}>
diff --git a/src/entities/speciality-card/types.ts b/src/entities/speciality-card/types.ts
index 3b91b9a6..270c048d 100644
--- a/src/entities/speciality-card/types.ts
+++ b/src/entities/speciality-card/types.ts
@@ -1,9 +1,8 @@
 import { TProfession, TSkills, TSpeciality } from '@/shared/types/specialty';
-import { Control } from 'react-hook-form';
 
 export type SpecialityCardProps = {
+	// id: number;
 	data: TSpeciality;
-	control: Control;
 	professions: TProfession[];
 	allSkills: TSkills[];
 	isLoadingChangeSpecialty: boolean;
diff --git a/src/pages/profile-create-project-page/ui/profile-create-project-page.tsx b/src/pages/profile-create-project-page/ui/profile-create-project-page.tsx
index 90ab9b75..343b4a91 100644
--- a/src/pages/profile-create-project-page/ui/profile-create-project-page.tsx
+++ b/src/pages/profile-create-project-page/ui/profile-create-project-page.tsx
@@ -4,34 +4,36 @@ import { FormProject, FormProjectSpecialists } from '@/widgets';
 import React from 'react';
 import styles from './profile-create-project-page.module.scss';
 
-import { SubmitHandler, useForm } from 'react-hook-form';
-import { Project } from './types';
+import { useForm } from 'react-hook-form';
+import { useSelector } from 'react-redux';
+import { RootState } from '@/store/store';
 
-type FormValues = {
-	name: string;
-	contacts: { [key: string]: string }[]; // Dynamic contact keys
-};
 export const ProfileCreateProject = () => {
-	let obj: Project;
-	const onSubmit: SubmitHandler<FormValues> = (data: Project) => {
-		obj = { ...data };
+	const projectSpecialists = useSelector(
+		(state: RootState) => state.projectSpecialists.project_specialists
+	);
 
-		console.table(obj);
+	const handleSubmit = () => {
+		console.log('Final submission:', projectSpecialists);
 	};
+
 	const { control } = useForm();
+
 	return (
-		<Form onSubmit={onSubmit} extraClass={styles.form}>
-			<FormProject control={control} />
-			<FormProjectSpecialists control={control} />
-			<div className={styles.btn}>
-				<MainButton
-					variant={'primary'}
-					width={'min'}
-					type="submit"
-					disabled={false}>
-					{'Submit'}
-				</MainButton>
-			</div>
-		</Form>
+		<>
+			<Form onSubmit={handleSubmit} extraClass={styles.form}>
+				<FormProject control={control} />
+				<FormProjectSpecialists  />
+				<div className={styles.btn}>
+					<MainButton
+						variant={'primary'}
+						width={'min'}
+						type="submit"
+						disabled={false}>
+						{'Submit'}
+					</MainButton>
+				</div>
+			</Form>
+		</>
 	);
 };
diff --git a/src/shared/ui/counter/counter.tsx b/src/shared/ui/counter/counter.tsx
index 954976c1..120fbc22 100644
--- a/src/shared/ui/counter/counter.tsx
+++ b/src/shared/ui/counter/counter.tsx
@@ -8,21 +8,20 @@ import {
 	IconPlusDisabled,
 } from '@/shared/assets';
 import styles from './counter.module.scss';
-import { Input } from '../input/input';
 import clsx from 'clsx';
 
 export const Counter = ({
-	id,
 	disabled,
+	state
 }: {
-	id: number;
+	state:  (num: number) => void
 	disabled: boolean;
 }) => {
 	const [isNumber, SetIsNumber] = useState(1);
-	console.log(id);
 	const increment = () => {
 		if (isNumber <= 14) {
 			SetIsNumber(isNumber + 1);
+			state(isNumber + 1)
 		}
 	};
 	const decrement = () => {
@@ -30,6 +29,8 @@ export const Counter = ({
 			return;
 		}
 		SetIsNumber(isNumber - 1 || 1);
+		state(isNumber - 1 || 1)
+
 	};
 
 	return (
@@ -48,13 +49,7 @@ export const Counter = ({
 				</button>
 			</div>
 			<div className={styles.buttonWrapper}>
-				<Input
-					name={`counter`}
-					labelName=""
-					className={clsx(styles.dismiss, styles.count)}
-					value={'isNumber'}
-					disabled={true}
-				/>
+				<div className={clsx(styles.dismiss, styles.count)}> {isNumber}</div>
 			</div>
 			<div className={styles.buttonWrapper}>
 				<button
diff --git a/src/store/reducers/ProjectSpecialist.ts b/src/store/reducers/ProjectSpecialist.ts
new file mode 100644
index 00000000..8a02db01
--- /dev/null
+++ b/src/store/reducers/ProjectSpecialist.ts
@@ -0,0 +1,51 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+interface Specialist {
+  profession: number;
+  skills: number[];
+  count: number;
+  level: number;
+  is_required: boolean;
+}
+
+interface ProjectSpecialistsState {
+  project_specialists: Specialist[];
+}
+
+const initialState: ProjectSpecialistsState = {
+  // eslint-disable-next-line camelcase
+  project_specialists: [
+    {
+      profession: 0,
+      skills: [0],
+      count: 1,
+      level: 1,
+      // eslint-disable-next-line camelcase
+      is_required: true,
+    },
+  ],
+};
+const projectSpecialistsSlice = createSlice({
+  name: 'projectSpecialists',
+  initialState,
+  reducers: {
+    // Existing update action
+    updateProjectSpecialist: (state, action: PayloadAction<{ index: number; specialist: Specialist }>) => {
+      const { index, specialist } = action.payload;
+      if (state.project_specialists[index]) {
+        state.project_specialists[index] = {
+          ...state.project_specialists[index],
+          ...specialist,
+        };
+      }
+    },
+    // New action to add a specialist
+    addProjectSpecialist: (state, action: PayloadAction<Specialist>) => {
+      state.project_specialists.push(action.payload); // Add new specialist to the array
+    },
+  },
+});
+
+export const { updateProjectSpecialist, addProjectSpecialist } = projectSpecialistsSlice.actions;
+export default projectSpecialistsSlice.reducer;
+
diff --git a/src/store/store.ts b/src/store/store.ts
index 57ec72a9..f454b497 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -4,11 +4,14 @@ import { generalApi } from '@/services/GeneralService';
 import { projectsApi } from '@/services/ProjectService';
 import { specilistsApi } from '@/services/SpecialistService';
 
+import projectSpecialistsReducer from './reducers/ProjectSpecialist';
+
 const rootReducer = combineReducers({
 	[userApi.reducerPath]: userApi.reducer,
 	[specilistsApi.reducerPath]: specilistsApi.reducer,
 	[generalApi.reducerPath]: generalApi.reducer,
 	[projectsApi.reducerPath]: projectsApi.reducer,
+	projectSpecialists: projectSpecialistsReducer,
 });
 
 export const store = configureStore({
diff --git a/src/widgets/form-project-specialists/ui/form-project-specialists.tsx b/src/widgets/form-project-specialists/ui/form-project-specialists.tsx
index 5367da44..2a344534 100644
--- a/src/widgets/form-project-specialists/ui/form-project-specialists.tsx
+++ b/src/widgets/form-project-specialists/ui/form-project-specialists.tsx
@@ -9,15 +9,9 @@ import { toaster } from '@/widgets/notification-toast';
 import styles from './form-project-specialists.module.scss';
 import { Loader } from '@/shared/ui';
 import { AddProjectSpeciality } from '@/entities/add-proejct-specialists/add-project-speciality';
-import { ProjectSpecialitCard } from '@/entities/speciality-card/speciality-card';
-import { Control } from 'react-hook-form';
+import { ProjectSpecialitCard } from '@/entities/speciality-card/project-speciality-card';
 
-export const FormProjectSpecialists = ({
-	control,
-}: {
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	control: Control<any>;
-}) => {
+export const FormProjectSpecialists = () => {
 	const { data: professions, isLoading: isLoadingProf } =
 		useGetProfessionsQuery([]);
 
@@ -25,7 +19,6 @@ export const FormProjectSpecialists = ({
 
 	const [specialties, setSpecialties] = useState<TSpeciality[]>([]);
 
-//	 ========================  possible bug 
 	const handleAddSpecialty = ({ profession, level, skills }: TSpeciality) => {
 		setSpecialties((prevSpecialties) => [
 			{
@@ -47,19 +40,13 @@ export const FormProjectSpecialists = ({
 		level,
 		skills,
 	}: TSpeciality) => {
-		setSpecialties(() => [
-			{
-				id,
-				profession,
-				level,
-				skills,
-			},
-		]);
-
-		toaster({
-			status: 'success',
-			title: 'Специальность успешно изменена',
-		});
+		setSpecialties(
+			specialties.map((specilist) =>
+				specilist.id === id
+					? { ...specilist, profession, level, skills }
+					: specilist
+			)
+		);
 	};
 	const handleDelete = (id: number) => {
 		setSpecialties(specialties.filter((item) => item.id !== id));
@@ -79,7 +66,6 @@ export const FormProjectSpecialists = ({
 							<li key={specialist.id}>
 								<ProjectSpecialitCard
 									data={specialist}
-									control={control}
 									professions={professions}
 									allSkills={allSkills}
 									isLoadingChangeSpecialty={false}
diff --git a/src/widgets/manage-specialists/ui/manage-specialists.tsx b/src/widgets/manage-specialists/ui/manage-specialists.tsx
index dc4db646..1b88fc99 100644
--- a/src/widgets/manage-specialists/ui/manage-specialists.tsx
+++ b/src/widgets/manage-specialists/ui/manage-specialists.tsx
@@ -3,7 +3,6 @@ import React, {  useState } from 'react';
 import styles from './manage-specialist.specialist.module.scss';
 import { Form, Toggler } from '@/shared/ui';
 import { SingleSelectInput } from '@/shared/ui/single-select-input/single-select-input';
-import { FormCreateProjectCard } from '@/entities/form-create-project-card';
 import { MultiSelectInput } from '@/shared/ui/multi-select-input/multi-select-input';
 import { LEVEL } from '@/utils/constants';
 import {
@@ -37,7 +36,6 @@ export const ManageSpecialists = () => {
 					/>
 				</div>
 
-				<FormCreateProjectCard />
 				<SingleSelectInput
 					name={`project_specialists`}
 					label={'Специальность'}

From 0448f1c0acfcb903b1e1b767b0e074bcd3096521 Mon Sep 17 00:00:00 2001
From: Oleh <149747215+Primis1@users.noreply.github.com>
Date: Sat, 26 Oct 2024 03:06:53 -0400
Subject: [PATCH 17/19] fix: toggler, remove function, skill-types, reset
 function

---
 .../add-project-speciality.tsx                | 12 ++---
 .../project-speciality-card.tsx               | 46 ++++++++++++-------
 src/entities/speciality-card/types.ts         |  2 +-
 src/shared/ui/toggler/toggler.tsx             |  2 +-
 src/utils/specialists-functions.ts            |  2 +-
 .../ui/form-project-specialists.tsx           | 11 +++--
 6 files changed, 44 insertions(+), 31 deletions(-)

diff --git a/src/entities/add-proejct-specialists/add-project-speciality.tsx b/src/entities/add-proejct-specialists/add-project-speciality.tsx
index dca7e988..45ce282c 100644
--- a/src/entities/add-proejct-specialists/add-project-speciality.tsx
+++ b/src/entities/add-proejct-specialists/add-project-speciality.tsx
@@ -22,11 +22,6 @@ export const AddProjectSpeciality: React.FC<AddSpecialtyProps> = ({
 }) => {
 	const { control, handleSubmit, reset, watch } = useForm({
 		mode: 'onChange',
-		defaultValues: {
-			profession: null,
-			level: null,
-			skills: [],
-		},
 	});
 
 	// Watching form fields for real-time values
@@ -44,6 +39,11 @@ export const AddProjectSpeciality: React.FC<AddSpecialtyProps> = ({
 			level,
 			skills,
 		});
+		reset({
+			profession: null,
+			level: null,
+			skills: [],
+		});
 	};
 
 	const handleResetForm = () => {
@@ -59,7 +59,7 @@ export const AddProjectSpeciality: React.FC<AddSpecialtyProps> = ({
 		return (
 			selectedProfession === null ||
 			selectedLevel === null ||
-			selectedSkills.length === 0
+			selectedSkills?.length === 0
 		);
 	};
 
diff --git a/src/entities/speciality-card/project-speciality-card.tsx b/src/entities/speciality-card/project-speciality-card.tsx
index 6e6b464c..9ceb6fc5 100644
--- a/src/entities/speciality-card/project-speciality-card.tsx
+++ b/src/entities/speciality-card/project-speciality-card.tsx
@@ -15,14 +15,16 @@ import { addProjectSpecialist } from '@/store/reducers/ProjectSpecialist';
 
 export const ProjectSpecialitCard: FC<SpecialityCardProps> = ({
 	data,
+	index,
 	professions,
 	allSkills,
-	isLoadingChangeSpecialty,
 	isSuccessСhangeSpecialty,
 	isLoadingDeleteSpecialty,
 	handleSubmitChangeSpecialty,
 	handleDeleteSpecialty,
 }) => {
+	console.log(index);
+
 	const [isShowViewEdit, setIsShowViewEdit] = useState<boolean>(false);
 
 	const [recruitmentIsOpen, setRecruitmentIsOpen] = useState<boolean>(false);
@@ -102,27 +104,38 @@ export const ProjectSpecialitCard: FC<SpecialityCardProps> = ({
 
 	const handleSubmit = () => {
 		handleSubmitChangeSpecialty({
-			id: data.id,
+			id: index,
 			level: selectedLevel,
 			profession: profession,
 			skills: skills,
 		});
+
+		setIsShowViewEdit(!isShowViewEdit);
 	};
 
 	const handleDelete = () => {
-		handleDeleteSpecialty(data.id as number);
+		handleDeleteSpecialty(index);
 	};
 
-	dispatch(
-		addProjectSpecialist({
-			profession: profession.id,
-			skills: toNum(skills),
-			count,
-			level: selectedLevel,
-			// eslint-disable-next-line camelcase
-			is_required: recruitmentIsOpen,
-		})
-	);
+	useEffect(() => {
+		dispatch(
+			addProjectSpecialist({
+				profession: profession.id,
+				skills: toNum(skills),
+				count,
+				level: selectedLevel,
+				// eslint-disable-next-line camelcase
+				is_required: recruitmentIsOpen,
+			})
+		);
+	}, [
+		count,
+		dispatch,
+		profession.id,
+		recruitmentIsOpen,
+		selectedLevel,
+		skills,
+	]);
 
 	return (
 		<div className={styles.specialityCard__wrapper}>
@@ -152,8 +165,6 @@ export const ProjectSpecialitCard: FC<SpecialityCardProps> = ({
 							/>
 						</div>
 					</div>
-
-					{/* we shall try to cahnge the data in the value change, or something instead of onSubmit */}
 				</div>
 			) : (
 				<div className={styles.specialityCard}>
@@ -168,7 +179,8 @@ export const ProjectSpecialitCard: FC<SpecialityCardProps> = ({
 						<Trash2 color="red" />
 					</button>
 					<h3 className={styles.specialityCard__title}>
-						{data.profession.specialization}, {getLevelName(selectedLevel)}
+						{profession.specialization} / {profession.specialty} ,{' '}
+						{getLevelName(selectedLevel)}
 					</h3>
 
 					<SelectWithSearch
@@ -203,7 +215,7 @@ export const ProjectSpecialitCard: FC<SpecialityCardProps> = ({
 						width="regular"
 						type="button"
 						onClick={handleSubmit}
-						disabled={isSkillsNotAdded() || isLoadingChangeSpecialty}>
+						disabled={isSkillsNotAdded()}>
 						Сохранить
 					</MainButton>
 				</div>
diff --git a/src/entities/speciality-card/types.ts b/src/entities/speciality-card/types.ts
index 270c048d..32526aa5 100644
--- a/src/entities/speciality-card/types.ts
+++ b/src/entities/speciality-card/types.ts
@@ -1,7 +1,7 @@
 import { TProfession, TSkills, TSpeciality } from '@/shared/types/specialty';
 
 export type SpecialityCardProps = {
-	// id: number;
+	index: number;
 	data: TSpeciality;
 	professions: TProfession[];
 	allSkills: TSkills[];
diff --git a/src/shared/ui/toggler/toggler.tsx b/src/shared/ui/toggler/toggler.tsx
index 88d6aa05..8dc2184f 100644
--- a/src/shared/ui/toggler/toggler.tsx
+++ b/src/shared/ui/toggler/toggler.tsx
@@ -12,7 +12,7 @@ export const Toggler = ({ checked, name, onChange }: TogglerProps) => {
 		<label className={styles.toggleCheckbox}>
 			<input
 				className={styles.toggleCheckbox__input}
-				{...register(name as string)}
+				{...(name ? register(name as string) : {})}
 				type="checkbox"
 				checked={checked}
 				name={name}
diff --git a/src/utils/specialists-functions.ts b/src/utils/specialists-functions.ts
index 08621fea..0e18664e 100644
--- a/src/utils/specialists-functions.ts
+++ b/src/utils/specialists-functions.ts
@@ -10,7 +10,7 @@ export const transformProfessions = (profList: TProfession[]) => {
 };
 
 export const getSkills = (skills: TSkills[]) => {
-    return skills.map(({ id, name }) => ({
+    return skills?.map(({ id, name }) => ({
         label: name,
         value: id,
     }));
diff --git a/src/widgets/form-project-specialists/ui/form-project-specialists.tsx b/src/widgets/form-project-specialists/ui/form-project-specialists.tsx
index 2a344534..1087dd27 100644
--- a/src/widgets/form-project-specialists/ui/form-project-specialists.tsx
+++ b/src/widgets/form-project-specialists/ui/form-project-specialists.tsx
@@ -20,13 +20,13 @@ export const FormProjectSpecialists = () => {
 	const [specialties, setSpecialties] = useState<TSpeciality[]>([]);
 
 	const handleAddSpecialty = ({ profession, level, skills }: TSpeciality) => {
-		setSpecialties((prevSpecialties) => [
+		setSpecialties(() => [
+			...specialties,
 			{
 				profession,
 				level,
 				skills,
 			},
-			...prevSpecialties,
 		]);
 
 		toaster({
@@ -49,7 +49,7 @@ export const FormProjectSpecialists = () => {
 		);
 	};
 	const handleDelete = (id: number) => {
-		setSpecialties(specialties.filter((item) => item.id !== id));
+		setSpecialties((sp) => sp.filter((_, specId) => specId !== id));
 	};
 
 	return (
@@ -62,9 +62,10 @@ export const FormProjectSpecialists = () => {
 				<>
 					<h3 className={styles.specialityList__title}>Специальность</h3>
 					<ul className={styles.specialityList__contentList}>
-						{specialties.map((specialist) => (
-							<li key={specialist.id}>
+						{specialties.map((specialist, index) => (
+							<li key={index}>
 								<ProjectSpecialitCard
+									index={index}
 									data={specialist}
 									professions={professions}
 									allSkills={allSkills}

From 6baad6f5349a2df6e49cbd608800885c0c228b69 Mon Sep 17 00:00:00 2001
From: Oleh <149747215+Primis1@users.noreply.github.com>
Date: Mon, 28 Oct 2024 00:14:45 -0400
Subject: [PATCH 18/19] add: contacts global storage, date converter

---
 .../add-project-speciality.tsx                |  15 +-
 .../add-specialists/add-specialty.module.scss |   2 +-
 .../add-specialists/add-specialty.tsx         |  10 +-
 src/entities/contacts/contacts.module.scss    | 103 ++++----
 src/entities/contacts/contacts.tsx            |  46 +++-
 .../project-speciality-card.tsx               |  35 ++-
 src/entities/speciality-card/types.ts         |   3 -
 .../ui/profile-create-project-page.tsx        |  38 ++-
 .../ui/profile-my-projects-page.tsx           |   8 +-
 src/services/ProjectService.ts                |   5 +-
 src/services/models/IProject.ts               |  22 +-
 src/shared/ui/multi-select-input/type.ts      |   3 +-
 .../ui/speciality-card/speciality-card.tsx    |  14 +-
 src/shared/ui/text-editor/text-editor.tsx     |   3 +-
 src/store/reducers/ProjectOptionalReducer.ts  |  23 ++
 src/store/reducers/ProjectSpecialist.ts       |  67 +++--
 src/store/store.ts                            |   4 +-
 .../form-project-details/ui/form-project.tsx  |  23 +-
 .../ui/form-project-specialists.tsx           |  20 +-
 src/widgets/index.ts                          |   4 +-
 .../ui/manage-project-setting.tsx             | 241 +++++++++---------
 .../ui/manage-specialists.tsx                 | 157 ++++++------
 22 files changed, 486 insertions(+), 360 deletions(-)
 create mode 100644 src/store/reducers/ProjectOptionalReducer.ts

diff --git a/src/entities/add-proejct-specialists/add-project-speciality.tsx b/src/entities/add-proejct-specialists/add-project-speciality.tsx
index 45ce282c..d707c66f 100644
--- a/src/entities/add-proejct-specialists/add-project-speciality.tsx
+++ b/src/entities/add-proejct-specialists/add-project-speciality.tsx
@@ -13,7 +13,10 @@ import {
 import { MainButton } from '@/shared/ui';
 import { MultiSelectInput } from '@/shared/ui/multi-select-input/multi-select-input';
 
-import { useForm, Controller } from 'react-hook-form';
+import {
+	useForm,
+	Controller,
+} from 'react-hook-form';
 
 export const AddProjectSpeciality: React.FC<AddSpecialtyProps> = ({
 	professions,
@@ -28,7 +31,8 @@ export const AddProjectSpeciality: React.FC<AddSpecialtyProps> = ({
 	const selectedProfession = watch('profession');
 	const selectedLevel = watch('level');
 	const selectedSkills = watch('skills');
-	const onSubmit = (data: {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const onSubmit: any = (data: {
 		profession: TProfession;
 		level: number;
 		skills: TSkills[];
@@ -63,6 +67,11 @@ export const AddProjectSpeciality: React.FC<AddSpecialtyProps> = ({
 		);
 	};
 
+	interface MultiSelectItem {
+		label: string;
+		value: number; // Adjust based on your actual value type
+	}
+
 	return (
 		<div className={styles.addSpecialty}>
 			<Controller
@@ -115,7 +124,7 @@ export const AddProjectSpeciality: React.FC<AddSpecialtyProps> = ({
 						isSearchable
 						options={getSkills(allSkills)}
 						values={getSkills(field.value)}
-						onChange={(item) =>
+						onChange={(item: MultiSelectItem[]) =>
 							field.onChange(
 								item.map(({ label, value }) => ({
 									name: label,
diff --git a/src/entities/add-specialists/add-specialty.module.scss b/src/entities/add-specialists/add-specialty.module.scss
index 57865b29..22f625be 100644
--- a/src/entities/add-specialists/add-specialty.module.scss
+++ b/src/entities/add-specialists/add-specialty.module.scss
@@ -1,4 +1,4 @@
-@import '../../../shared//style/variables.scss';
+@import 'src/shared//style/variables.scss';
 
 .addSpecialty {
 	width: 100%;
diff --git a/src/entities/add-specialists/add-specialty.tsx b/src/entities/add-specialists/add-specialty.tsx
index 0c1ca05e..62ce89ce 100644
--- a/src/entities/add-specialists/add-specialty.tsx
+++ b/src/entities/add-specialists/add-specialty.tsx
@@ -6,7 +6,11 @@ import { LEVEL } from '@/utils/constants';
 import { TProfession, TSkills } from '@/shared/types/specialty';
 import { Option } from '@/shared/types/option';
 import IconPlus from '@/shared/assets/icons/plus-large.svg';
-import { getLevelName, getSkills, transformProfessions } from '../../utils/specialists-functions';
+import {
+	getLevelName,
+	getSkills,
+	transformProfessions,
+} from '../../utils/specialists-functions';
 import { AddSpecialtyProps } from './types';
 import { MainButton } from '@/shared/ui';
 
@@ -89,8 +93,8 @@ export const AddSpecialty: React.FC<AddSpecialtyProps> = ({
 				isSearchable
 				options={getSkills(allSkills)}
 				values={getSkills(skills)}
-				onChange={(item) => {
-					editSkills(item as Option[]);
+				onChange={(item: Option[]) => {
+					editSkills(item);
 				}}
 			/>
 			<div className={styles.addSpecialty__buttons}>
diff --git a/src/entities/contacts/contacts.module.scss b/src/entities/contacts/contacts.module.scss
index 79a7e918..d0535637 100644
--- a/src/entities/contacts/contacts.module.scss
+++ b/src/entities/contacts/contacts.module.scss
@@ -10,56 +10,67 @@
 	line-height: 24px; /* 150% */
 	letter-spacing: 0.25px;
 }
-.addContactWrapper {
-	width: 100%;
-	display: flex;
-	flex-direction: row;
-	gap: 8px;
-	@media screen and (max-width: 779px) {
-		flex-direction: column;
+.fields {
+	&__contactsTitle {
+		color: $--Foreground-default;
+		font-family: $--open-sans-font;
+		font-size: 16px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 24px; /* 150% */
+		letter-spacing: 0.25px;
 	}
-}
-.addContactType {
-	width: 228px;
-	height: 40px;
-	border-radius: 8px;
-	border: 1px solid $--border-default;
-	background: $--bg-primary;
-	padding: 8px 12px;
-	color: $--Foreground-default;
-	font-feature-settings:
-		'liga' off,
-		'clig' off;
-	font-family: $--open-sans-font;
-	font-size: 16px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 24px; /* 150% */
-	letter-spacing: 0.25px;
-	@media screen and (max-width: 779px) {
+	&__addContactWrapper {
 		width: 100%;
+		display: flex;
+		flex-direction: row;
+		gap: 8px;
+		@media screen and (max-width: 779px) {
+			flex-direction: column;
+		}
+	}
+	&__addContactType {
+		width: 228px;
+		height: 40px;
+		border-radius: 8px;
+		border: 1px solid $--border-default;
+		background: $--bg-primary;
+		padding: 8px 12px;
+		color: $--Foreground-default;
+		font-feature-settings:
+			'liga' off,
+			'clig' off;
+		font-family: $--open-sans-font;
+		font-size: 16px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 24px; /* 150% */
+		letter-spacing: 0.25px;
+		@media screen and (max-width: 779px) {
+			width: 100%;
+		}
 	}
-}
 
-.addContactTypeWrapper {
-	display: flex;
-	flex-direction: column;
-}
+	&__addContactTypeWrapper {
+		display: flex;
+		flex-direction: column;
+	}
 
-.addContactTextValue {
-	min-height: 40px;
-	width: 100%;
-}
+	&__addContactTextValue {
+		min-height: 40px;
+		width: 100%;
+	}
 
-.addContactTypeLabel {
-	color: $--Foreground-subtitle;
-	font-feature-settings:
-		'liga' off,
-		'clig' off;
-	font-family: $--open-sans-font;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 19px; /* 135.714% */
-	letter-spacing: 0.25px;
+	&__addContactTypeLabel {
+		color: $--Foreground-subtitle;
+		font-feature-settings:
+			'liga' off,
+			'clig' off;
+		font-family: $--open-sans-font;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 19px; /* 135.714% */
+		letter-spacing: 0.25px;
+	}
 }
diff --git a/src/entities/contacts/contacts.tsx b/src/entities/contacts/contacts.tsx
index 5f87130a..b54f2283 100644
--- a/src/entities/contacts/contacts.tsx
+++ b/src/entities/contacts/contacts.tsx
@@ -1,12 +1,19 @@
 import { Input, MainButton } from '@/shared/ui';
 import { Plus } from 'lucide-react';
-import React, { useState } from 'react';
+import React, {
+	ComponentType,
+	HTMLAttributes,
+	useEffect,
+	useState,
+} from 'react';
 import styles from './contacts.module.scss';
 import { CONTACTS } from '@/utils/constants';
 import { ContactsList } from '../contact-list/contact-list';
 import { TContact } from '@/shared/ui/contact-card/types';
 import { TOption } from '../form-profile-edit/ui/types';
 import { generalEmailRegex, phoneRegex } from '@/utils/regex-consts';
+import { useDispatch } from 'react-redux';
+import { updateContact } from '@/store/reducers/ProjectOptionalReducer';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const Contacts = () => {
@@ -24,6 +31,8 @@ export const Contacts = () => {
 		setInputValueContact(event.target.value);
 	};
 
+	const dispatch = useDispatch();
+
 	const handleAddContact = () => {
 		if (selectedOptionContactType && inputValueContact) {
 			let isValid = true;
@@ -71,14 +80,31 @@ export const Contacts = () => {
 		}
 	};
 
+	useEffect(() => {
+		if (contacts.length > 0) {
+			// eslint-disable-next-line prefer-destructuring, camelcase
+			const { email, telegram_nick, phone_number } = contacts[0];
+
+			dispatch(
+				updateContact({
+					email,
+					// eslint-disable-next-line camelcase
+					telegram_nick,
+					// eslint-disable-next-line camelcase
+					phone_number,
+				})
+			);
+		}
+	}, [contacts, dispatch]);
+
 	return (
 		<>
 			<span className={styles.contactsTitle}>Контакты для связи</span>
 			<ContactsList contacts={contacts} setContacts={setContacts} />
-			<div className={styles.addContactWrapper}>
-				<label className={styles.addContactTypeWrapper}>
+			<div className={styles.fields__addContactWrapper}>
+				<label className={styles.fields__addContactTypeWrapper}>
 					<select
-						className={styles.addContactType}
+						className={styles.fields__addContactType}
 						value={selectedOptionContactType?.value || ''}
 						onChange={(event) =>
 							handleOptionSelect(
@@ -89,21 +115,21 @@ export const Contacts = () => {
 						}>
 						{CONTACTS.map((option) => (
 							<option
-								className={styles.addContactTypeListItem}
+								className={styles.fields__addContactTypeListItem}
 								key={option.value}
 								value={option.value}>
 								{option.label}
 							</option>
 						))}
 					</select>
-					<span className={styles.addContactTypeLabel}>
+					<span className={styles.fields__addContactTypeLabel}>
 						Выберите ресурс
 					</span>
 				</label>
 				{selectedOptionContactType?.value === 'phone_number' ? (
 					<Input
 						placeholder="+7XXXXXXXXXX"
-						className={styles.addContactTextValue}
+						className={styles.fields__addContactTextValue}
 						name="inputValueContact"
 						labelName=""
 						// type="text"
@@ -114,7 +140,7 @@ export const Contacts = () => {
 					/>
 				) : (
 					<Input
-						className={styles.addContactTextValue}
+						className={styles.fields__addContactTextValue}
 						name="inputValueContact"
 						labelName=""
 						// type="text"
@@ -130,7 +156,9 @@ export const Contacts = () => {
 				onClick={handleAddContact}
 				variant="secondary"
 				width="regular"
-				IconLeft={Plus}>
+				IconLeft={
+					Plus as ComponentType<HTMLAttributes<HTMLElement>> | undefined
+				}>
 				Добавить
 			</MainButton>
 		</>
diff --git a/src/entities/speciality-card/project-speciality-card.tsx b/src/entities/speciality-card/project-speciality-card.tsx
index 9ceb6fc5..eafd98ca 100644
--- a/src/entities/speciality-card/project-speciality-card.tsx
+++ b/src/entities/speciality-card/project-speciality-card.tsx
@@ -11,15 +11,13 @@ import SelectWithSearch from '@/shared/ui/select-search/select-search';
 import { SkillsList } from '@/shared/ui/skills-list/skills-list';
 import { Edit, Trash2 } from 'lucide-react';
 import { useDispatch } from 'react-redux';
-import { addProjectSpecialist } from '@/store/reducers/ProjectSpecialist';
+import { updateProjectSpecialist } from '@/store/reducers/ProjectSpecialist';
 
 export const ProjectSpecialitCard: FC<SpecialityCardProps> = ({
 	data,
 	index,
 	professions,
 	allSkills,
-	isSuccessСhangeSpecialty,
-	isLoadingDeleteSpecialty,
 	handleSubmitChangeSpecialty,
 	handleDeleteSpecialty,
 }) => {
@@ -27,7 +25,7 @@ export const ProjectSpecialitCard: FC<SpecialityCardProps> = ({
 
 	const [isShowViewEdit, setIsShowViewEdit] = useState<boolean>(false);
 
-	const [recruitmentIsOpen, setRecruitmentIsOpen] = useState<boolean>(false);
+	const [recruitmentIsOpen, setRecruitmentIsOpen] = useState<boolean>(true);
 	const [profession, setProfession] = useState<TProfession>(data.profession);
 	const [selectedLevel, setSelectedLevel] = useState<number>(data.level);
 	const [skills, setSkills] = useState<TSkills[]>(data.skills);
@@ -35,12 +33,6 @@ export const ProjectSpecialitCard: FC<SpecialityCardProps> = ({
 
 	const dispatch = useDispatch();
 
-	useEffect(() => {
-		if (isSuccessСhangeSpecialty) {
-			setIsShowViewEdit(false);
-		}
-	}, [isSuccessСhangeSpecialty]);
-
 	const toNum = (skills: TSkills[]) => {
 		const nums = skills.map((skill) => skill.id);
 
@@ -119,16 +111,20 @@ export const ProjectSpecialitCard: FC<SpecialityCardProps> = ({
 
 	useEffect(() => {
 		dispatch(
-			addProjectSpecialist({
-				profession: profession.id,
-				skills: toNum(skills),
-				count,
-				level: selectedLevel,
-				// eslint-disable-next-line camelcase
-				is_required: recruitmentIsOpen,
+			updateProjectSpecialist({
+				index: index,
+				specialist: {
+					profession: profession.id,
+					skills: toNum(skills),
+					count,
+					level: selectedLevel,
+					// eslint-disable-next-line camelcase
+					is_required: recruitmentIsOpen,
+				},
 			})
 		);
 	}, [
+		index,
 		count,
 		dispatch,
 		profession.id,
@@ -170,7 +166,6 @@ export const ProjectSpecialitCard: FC<SpecialityCardProps> = ({
 				<div className={styles.specialityCard}>
 					<button
 						type="button"
-						disabled={isLoadingDeleteSpecialty}
 						className={clsx(
 							styles.specialityCard__button,
 							styles.specialityCard__button_delete
@@ -205,8 +200,8 @@ export const ProjectSpecialitCard: FC<SpecialityCardProps> = ({
 							isSearchable
 							options={getSkills(allSkills)}
 							values={getSkills(skills)}
-							onChange={(item) => {
-								editSkills(item as Option[]);
+							onChange={(item: Option[]) => {
+								editSkills(item);
 							}}
 						/>
 					</div>
diff --git a/src/entities/speciality-card/types.ts b/src/entities/speciality-card/types.ts
index 32526aa5..37c45eac 100644
--- a/src/entities/speciality-card/types.ts
+++ b/src/entities/speciality-card/types.ts
@@ -5,14 +5,11 @@ export type SpecialityCardProps = {
 	data: TSpeciality;
 	professions: TProfession[];
 	allSkills: TSkills[];
-	isLoadingChangeSpecialty: boolean;
 	handleSubmitChangeSpecialty: ({
 		id,
 		profession,
 		level,
 		skills,
 	}: TSpeciality) => void;
-	isSuccessСhangeSpecialty: boolean;
 	handleDeleteSpecialty: (id: number) => void;
-	isLoadingDeleteSpecialty: boolean;
 };
diff --git a/src/pages/profile-create-project-page/ui/profile-create-project-page.tsx b/src/pages/profile-create-project-page/ui/profile-create-project-page.tsx
index 343b4a91..29e2fbe7 100644
--- a/src/pages/profile-create-project-page/ui/profile-create-project-page.tsx
+++ b/src/pages/profile-create-project-page/ui/profile-create-project-page.tsx
@@ -7,14 +7,42 @@ import styles from './profile-create-project-page.module.scss';
 import { useForm } from 'react-hook-form';
 import { useSelector } from 'react-redux';
 import { RootState } from '@/store/store';
+import { ProjectService } from '@/services/models/IProject';
+import { usePostProjectMutation } from '@/services/ProjectService';
 
 export const ProfileCreateProject = () => {
-	const projectSpecialists = useSelector(
-		(state: RootState) => state.projectSpecialists.project_specialists
+	const { projectSpecialists, projectUtility } = useSelector(
+		(state: RootState) => ({
+			projectSpecialists: state.projectSpecialists.project_specialists,
+			projectUtility: state.projectUtility,
+		})
 	);
 
-	const handleSubmit = () => {
-		console.log('Final submission:', projectSpecialists);
+	const [postProject] = usePostProjectMutation();
+
+	const formatDate = (dateObj: Date) => {
+		const year = dateObj.getFullYear();
+		const month = String(dateObj.getMonth() + 1).padStart(2, '0');
+		const day = String(dateObj.getDate()).padStart(2, '0');
+		return `${year}-${month}-${day}`;
+	};
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const handleSubmit = (data: any) => {
+		const dates = {
+			started: formatDate(data.start as Date),
+			ended: formatDate(data?.end as Date),
+		};
+
+		const common: ProjectService = {
+			...data,
+			...projectUtility,
+			...dates,
+			// eslint-disable-next-line camelcase
+			project_specialists: projectSpecialists,
+		};
+
+		postProject(common);
 	};
 
 	const { control } = useForm();
@@ -23,7 +51,7 @@ export const ProfileCreateProject = () => {
 		<>
 			<Form onSubmit={handleSubmit} extraClass={styles.form}>
 				<FormProject control={control} />
-				<FormProjectSpecialists  />
+				<FormProjectSpecialists />
 				<div className={styles.btn}>
 					<MainButton
 						variant={'primary'}
diff --git a/src/pages/profile-my-projects-page/ui/profile-my-projects-page.tsx b/src/pages/profile-my-projects-page/ui/profile-my-projects-page.tsx
index ca7d7ba4..483f0908 100644
--- a/src/pages/profile-my-projects-page/ui/profile-my-projects-page.tsx
+++ b/src/pages/profile-my-projects-page/ui/profile-my-projects-page.tsx
@@ -1,12 +1,12 @@
-import { ManageProjectsSetting } from '@/widgets/managa-project-settings/ui/manage-project-setting';
-import { ManageSpecialists } from '@/widgets/manage-specialists/ui/manage-specialists';
+// import { ManageProjectsSetting } from '@/widgets/managa-project-settings/ui/manage-project-setting';
+// import { ManageSpecialists } from '@/widgets/manage-specialists/ui/manage-specialists';
 import React from 'react';
 
 export const ProfileMyProjectsPage = () => {
 	return (
 		<>
-			<ManageProjectsSetting />
-			<ManageSpecialists />
+			{/* <ManageProjectsSetting />
+			<ManageSpecialists /> */}
 		</>
 	);
 };
diff --git a/src/services/ProjectService.ts b/src/services/ProjectService.ts
index 18bc2f3b..9659558f 100644
--- a/src/services/ProjectService.ts
+++ b/src/services/ProjectService.ts
@@ -34,8 +34,9 @@ export const projectsApi = createApi({
 				method: 'GET',
 			}),
 		}),
-		postProject: builder.mutation({
-			query: (body : ProjectService) => ({
+
+		postProject: builder.mutation<ProjectService, ProjectService>({
+			query: (body) => ({
 				url: `/projects/`,
 				method: 'POST',
 				body: body,
diff --git a/src/services/models/IProject.ts b/src/services/models/IProject.ts
index a621fd76..43e5d46f 100644
--- a/src/services/models/IProject.ts
+++ b/src/services/models/IProject.ts
@@ -5,18 +5,23 @@ export interface IProject {
 	isLiked: boolean;
 }
 
-
 export type ProjectService = {
-	id: number,
+	id: number;
+	name: string;
+	description: string;
 	started: string;
 	ended: string;
-	name: string;
+	busyness: number;
 	directions: [
 		{
 			id: number;
 			name: string;
 		},
 	];
+	link: string;
+	phone_number: string;
+	telegram_nick: string;
+	email: string;
 	project_specialists: [
 		{
 			id: number;
@@ -25,7 +30,14 @@ export type ProjectService = {
 				specialization: string;
 				specialty: string;
 			};
+			skills: {
+				id: number;
+				name: string;
+			}[];
+			count: number;
+			level: number;
+			is_required: boolean;
 		},
 	];
-
-}
\ No newline at end of file
+	status: string;
+};
diff --git a/src/shared/ui/multi-select-input/type.ts b/src/shared/ui/multi-select-input/type.ts
index d9a54711..023648c5 100644
--- a/src/shared/ui/multi-select-input/type.ts
+++ b/src/shared/ui/multi-select-input/type.ts
@@ -4,7 +4,8 @@ export type MultiSelectInputProps = {
 	name: string;
 	options: Option[];
 	values: Option[];
-	onChange: (options: (string | object)[]) => void;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	onChange: any;
 	selectedAll?: boolean;
 	maxSelections?: number;
 	width?: string;
diff --git a/src/shared/ui/speciality-card/speciality-card.tsx b/src/shared/ui/speciality-card/speciality-card.tsx
index bf6d1ba5..e3412503 100644
--- a/src/shared/ui/speciality-card/speciality-card.tsx
+++ b/src/shared/ui/speciality-card/speciality-card.tsx
@@ -27,7 +27,7 @@ export const SpecialityCard: FC<SpecialityCardProps> = ({
 
 	useEffect(() => {
 		if (isSuccessСhangeSpecialty) {
-			setIsShowViewEdit(false)
+			setIsShowViewEdit(false);
 		}
 	}, [isSuccessСhangeSpecialty]);
 
@@ -83,8 +83,8 @@ export const SpecialityCard: FC<SpecialityCardProps> = ({
 	};
 
 	const isSkillsNotAdded = () => {
-		return (skills.length === 0)
-	}
+		return skills.length === 0;
+	};
 
 	const handleSubmit = () => {
 		handleSubmitChangeSpecialty({
@@ -92,11 +92,11 @@ export const SpecialityCard: FC<SpecialityCardProps> = ({
 			profession: profession.id,
 			skills: getSkillsforSubmit(skills),
 			id: data.id,
-		})
+		});
 	};
 
 	const handleDelete = () => {
-		handleDeleteSpecialty(data.id as number)
+		handleDeleteSpecialty(data.id as number);
 	};
 
 	return (
@@ -153,8 +153,8 @@ export const SpecialityCard: FC<SpecialityCardProps> = ({
 							isSearchable
 							options={getSkills(allSkills)}
 							values={getSkills(skills)}
-							onChange={(item) => {
-								editSkills(item as Option[]);
+							onChange={(item: Option[]) => {
+								editSkills(item );
 							}}
 						/>
 					</div>
diff --git a/src/shared/ui/text-editor/text-editor.tsx b/src/shared/ui/text-editor/text-editor.tsx
index 2b65ad87..c036a411 100644
--- a/src/shared/ui/text-editor/text-editor.tsx
+++ b/src/shared/ui/text-editor/text-editor.tsx
@@ -4,6 +4,7 @@ import 'react-quill-new/dist/quill.snow.css';
 import styles from './text-editor.module.scss';
 import dynamic from 'next/dynamic';
 const ReactQuill = dynamic(() => import('react-quill-new'), { ssr: false });
+import Quill from 'react-quill-new';
 
 export const TextEditor: FC<TextEditorProps> = ({
 	labelName,
@@ -41,7 +42,7 @@ export const TextEditor: FC<TextEditorProps> = ({
 				['bold', 'italic', 'underline'], // toggled buttons
 				[{ list: 'ordered' }, { list: 'bullet' }],
 				[{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
-				[{ background: [] }], // dropdown with defaults from theme
+				[{ color: [] }], // dropdown with defaults from theme
 				[{ align: [] }],
 			],
 		},
diff --git a/src/store/reducers/ProjectOptionalReducer.ts b/src/store/reducers/ProjectOptionalReducer.ts
new file mode 100644
index 00000000..574c5caf
--- /dev/null
+++ b/src/store/reducers/ProjectOptionalReducer.ts
@@ -0,0 +1,23 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+interface ContactState {
+	email?: string;
+	phone_number?: string;
+	telegram_nick?: string;
+	// Add other optional fields if needed
+}
+
+const initialState: ContactState = {};
+
+const contactSlice = createSlice({
+	name: 'contact',
+	initialState,
+	reducers: {
+		updateContact: (state, action: PayloadAction<Partial<ContactState>>) => {
+			return { ...state, ...action.payload };
+		},
+	},
+});
+
+export const { updateContact } = contactSlice.actions;
+export default contactSlice.reducer;
diff --git a/src/store/reducers/ProjectSpecialist.ts b/src/store/reducers/ProjectSpecialist.ts
index 8a02db01..097107a4 100644
--- a/src/store/reducers/ProjectSpecialist.ts
+++ b/src/store/reducers/ProjectSpecialist.ts
@@ -1,51 +1,44 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 
 interface Specialist {
-  profession: number;
-  skills: number[];
-  count: number;
-  level: number;
-  is_required: boolean;
+	profession: number;
+	skills: number[];
+	count: number;
+	level: number;
+	is_required: boolean;
 }
 
 interface ProjectSpecialistsState {
-  project_specialists: Specialist[];
+	project_specialists: Specialist[];
 }
 
 const initialState: ProjectSpecialistsState = {
-  // eslint-disable-next-line camelcase
-  project_specialists: [
-    {
-      profession: 0,
-      skills: [0],
-      count: 1,
-      level: 1,
-      // eslint-disable-next-line camelcase
-      is_required: true,
-    },
-  ],
+	// eslint-disable-next-line camelcase
+	project_specialists: [], // Start with an empty array
 };
 const projectSpecialistsSlice = createSlice({
-  name: 'projectSpecialists',
-  initialState,
-  reducers: {
-    // Existing update action
-    updateProjectSpecialist: (state, action: PayloadAction<{ index: number; specialist: Specialist }>) => {
-      const { index, specialist } = action.payload;
-      if (state.project_specialists[index]) {
-        state.project_specialists[index] = {
-          ...state.project_specialists[index],
-          ...specialist,
-        };
-      }
-    },
-    // New action to add a specialist
-    addProjectSpecialist: (state, action: PayloadAction<Specialist>) => {
-      state.project_specialists.push(action.payload); // Add new specialist to the array
-    },
-  },
+	name: 'projectSpecialists',
+	initialState,
+	reducers: {
+
+		updateProjectSpecialist: (
+			state,
+			action: PayloadAction<{ index: number; specialist: Specialist }>
+		) => {
+			const { index, specialist } = action.payload;
+			if (state.project_specialists[index]) {
+				state.project_specialists[index] = {
+					...state.project_specialists[index],
+					...specialist,
+				};
+			}
+		},
+		addProjectSpecialist: (state, action: PayloadAction<Specialist>) => {
+			state.project_specialists.push(action.payload); // Add new specialist to the array
+		},
+	},
 });
 
-export const { updateProjectSpecialist, addProjectSpecialist } = projectSpecialistsSlice.actions;
+export const { updateProjectSpecialist, addProjectSpecialist } =
+	projectSpecialistsSlice.actions;
 export default projectSpecialistsSlice.reducer;
-
diff --git a/src/store/store.ts b/src/store/store.ts
index f454b497..43913ca8 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -5,6 +5,7 @@ import { projectsApi } from '@/services/ProjectService';
 import { specilistsApi } from '@/services/SpecialistService';
 
 import projectSpecialistsReducer from './reducers/ProjectSpecialist';
+import projectUtility from './reducers/ProjectOptionalReducer';
 
 const rootReducer = combineReducers({
 	[userApi.reducerPath]: userApi.reducer,
@@ -12,6 +13,7 @@ const rootReducer = combineReducers({
 	[generalApi.reducerPath]: generalApi.reducer,
 	[projectsApi.reducerPath]: projectsApi.reducer,
 	projectSpecialists: projectSpecialistsReducer,
+	projectUtility: projectUtility,
 });
 
 export const store = configureStore({
@@ -26,4 +28,4 @@ export const store = configureStore({
 });
 
 export type RootState = ReturnType<typeof store.getState>;
-export type AppDispatch = typeof store.dispatch;
\ No newline at end of file
+export type AppDispatch = typeof store.dispatch;
diff --git a/src/widgets/form-project-details/ui/form-project.tsx b/src/widgets/form-project-details/ui/form-project.tsx
index c4f1b9b1..c6ae3145 100644
--- a/src/widgets/form-project-details/ui/form-project.tsx
+++ b/src/widgets/form-project-details/ui/form-project.tsx
@@ -1,16 +1,16 @@
 'use client';
 import React from 'react';
 import styles from './form-project.module.scss';
-import { CheckboxAndRadio,  Input, MainButton } from '@/shared/ui';
+import { CheckboxAndRadio, Input, MainButton } from '@/shared/ui';
 import { TextEditor } from '@/shared/ui/text-editor/text-editor';
 import { DEVELOPING, EMPLOYMENT } from '@/utils/constants';
 import { DatePickerRHF } from '@/shared/ui/date-picker-rhf/date-picker-rhf';
-import { Control } from 'react-hook-form';
+import { Control, Controller } from 'react-hook-form';
 import { Contacts } from '@/entities/contacts/contacts';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const FormProject = ({ control }: { control: Control<any> }) => {
-	
+
 	return (
 		<div className={styles.container}>
 			<div className={styles.specialists}>
@@ -21,13 +21,18 @@ export const FormProject = ({ control }: { control: Control<any> }) => {
 						labelName="Название проекта"
 						className={styles.input_extra}
 					/>
-					<TextEditor
-						labelName={'Описание проекта'}
-						name={'description'}
-						desc={
-							'Расскажите о проекте и его цели используя не более 750 символов'
-						}
+					<Controller
+						name="description"
 						control={control}
+						rules={{ required: true }}
+						render={({ field: { onChange, value } }) => (
+							<TextEditor
+								labelName="Описание проекта"
+								desc="Расскажите о проекте и его цели используя не более 750 символов"
+								currentText={value}
+								setCurrentText={(value) => onChange(value)}
+							/>
+						)}
 					/>
 				</div>
 
diff --git a/src/widgets/form-project-specialists/ui/form-project-specialists.tsx b/src/widgets/form-project-specialists/ui/form-project-specialists.tsx
index 1087dd27..b2a09e8f 100644
--- a/src/widgets/form-project-specialists/ui/form-project-specialists.tsx
+++ b/src/widgets/form-project-specialists/ui/form-project-specialists.tsx
@@ -10,6 +10,8 @@ import styles from './form-project-specialists.module.scss';
 import { Loader } from '@/shared/ui';
 import { AddProjectSpeciality } from '@/entities/add-proejct-specialists/add-project-speciality';
 import { ProjectSpecialitCard } from '@/entities/speciality-card/project-speciality-card';
+import { useDispatch } from 'react-redux';
+import { addProjectSpecialist } from '@/store/reducers/ProjectSpecialist';
 
 export const FormProjectSpecialists = () => {
 	const { data: professions, isLoading: isLoadingProf } =
@@ -19,6 +21,8 @@ export const FormProjectSpecialists = () => {
 
 	const [specialties, setSpecialties] = useState<TSpeciality[]>([]);
 
+	const dispatch = useDispatch();
+
 	const handleAddSpecialty = ({ profession, level, skills }: TSpeciality) => {
 		setSpecialties(() => [
 			...specialties,
@@ -33,7 +37,19 @@ export const FormProjectSpecialists = () => {
 			status: 'success',
 			title: 'Специальность успешно добавлена',
 		});
+
+		dispatch(
+			addProjectSpecialist({
+				profession: profession.id,
+				skills: skills.map((v) => v.id),
+				count: 1,
+				level: level,
+				// eslint-disable-next-line camelcase
+				is_required: true,
+			})
+		);
 	};
+
 	const handleChangeSpecialty = ({
 		id,
 		profession,
@@ -69,9 +85,7 @@ export const FormProjectSpecialists = () => {
 									data={specialist}
 									professions={professions}
 									allSkills={allSkills}
-									isLoadingChangeSpecialty={false}
-									isSuccessСhangeSpecialty={false}
-									isLoadingDeleteSpecialty={false}
+
 									handleSubmitChangeSpecialty={handleChangeSpecialty}
 									handleDeleteSpecialty={handleDelete}
 								/>
diff --git a/src/widgets/index.ts b/src/widgets/index.ts
index 9677fd6f..79efdfc7 100644
--- a/src/widgets/index.ts
+++ b/src/widgets/index.ts
@@ -1,4 +1,4 @@
-export * from "./managa-project-settings/ui/manage-project-setting"
-export * from "./manage-specialists/ui/manage-specialists"
+// export * from "./managa-project-settings/ui/manage-project-setting"
+// export * from "./manage-specialists/ui/manage-specialists"
 export * from "./form-project-details/ui/form-project"
 export * from "./form-project-specialists/ui/form-project-specialists"
diff --git a/src/widgets/managa-project-settings/ui/manage-project-setting.tsx b/src/widgets/managa-project-settings/ui/manage-project-setting.tsx
index 9d7f6048..283d4cbd 100644
--- a/src/widgets/managa-project-settings/ui/manage-project-setting.tsx
+++ b/src/widgets/managa-project-settings/ui/manage-project-setting.tsx
@@ -1,127 +1,130 @@
-'use client';
-import React from 'react';
-import styles from './manage-project-setting.module.scss';
-import { CheckboxAndRadio, Form, Input, MainButton } from '@/shared/ui';
-import { TextEditor } from '@/shared/ui/text-editor/text-editor';
-import { CONTACTS, DEVELOPING, EMPLOYMENT } from '@/utils/constants';
-import { DatePickerRHF } from '@/shared/ui/date-picker-rhf/date-picker-rhf';
-import { useForm } from 'react-hook-form';
-import { SingleSelectInput } from '@/shared/ui/single-select-input/single-select-input';
-import { Plus } from 'lucide-react';
+// 'use client';
+// import React from 'react';
+// import styles from './manage-project-setting.module.scss';
+// import { CheckboxAndRadio, Form, Input, MainButton } from '@/shared/ui';
+// import { CONTACTS, DEVELOPING, EMPLOYMENT } from '@/utils/constants';
+// import { DatePickerRHF } from '@/shared/ui/date-picker-rhf/date-picker-rhf';
+// import { useForm } from 'react-hook-form';
+// import { SingleSelectInput } from '@/shared/ui/single-select-input/single-select-input';
+// import { Plus } from 'lucide-react';
 
-export const ManageProjectsSetting = () => {
-	const { control } = useForm();
+// export const ManageProjectsSetting = () => {
+// 	const { control } = useForm();
 
-	const onSubmit = (data) => {
-		console.table(data);
-	};
-	return (
-		<Form className={styles.container} onSubmit={onSubmit}>
-			<div className={styles.specialists}>
-				<h1 className={styles.specialists_master_title}>Название проекта</h1>
-				<div className={styles.input_list}>
-					<Input
-						name="name"
-						labelName="Название проекта"
-						className={styles.input_extra}
-					/>
-					<TextEditor
-						labelName={'Описание проекта'}
-						desc={
-							'Расскажите о проекте и его цели используя не более 750 символов'
-						}
-					/>
-				</div>
+// 	const onSubmit = (data: unknown) => {
+// 		console.table(data);
+// 	};
+// 	return (
+// 		<Form className={styles.container} onSubmit={onSubmit}>
+// 			<div className={styles.specialists}>
+// 				<h1 className={styles.specialists_master_title}>Название проекта</h1>
+// 				<div className={styles.input_list}>
+// 					<Input
+// 						name="name"
+// 						labelName="Название проекта"
+// 						className={styles.input_extra}
+// 					/>
+// 					{/* <TextEditor
+// 						labelName={'Описание проекта'}
+// 						desc={
+// 							'Расскажите о проекте и его цели используя не более 750 символов'
+// 						}
+// 						setCurrentText={function (value: string): void {
+// 							throw new Error('Function not implemented.');
+// 						}}
+// 						currentText={''}
+// 					/> */}
+// 				</div>
 
-				<div className={styles.directions}>
-					<h3 className={styles.input_list_title}>Направление разработки</h3>
-					<ul className={styles.directions_list}>
-						{DEVELOPING?.map((profession) => (
-							<li className={styles.directions_item} key={profession.id}>
-								<CheckboxAndRadio
-									labelName={profession.field}
-									label={`professions`}
-									type={'checkbox'}
-									id={`professions_${profession.id}`}
-									name={'professions'}
-								/>
-							</li>
-						))}
-					</ul>
-				</div>
+// 				<div className={styles.directions}>
+// 					<h3 className={styles.input_list_title}>Направление разработки</h3>
+// 					<ul className={styles.directions_list}>
+// 						{DEVELOPING?.map((profession) => (
+// 							<li className={styles.directions_item} key={profession.id}>
+// 								<CheckboxAndRadio
+// 									labelName={profession.field}
+// 									label={`professions`}
+// 									type={'checkbox'}
+// 									id={`professions_${profession.id}`}
+// 									name={'professions'}
+// 								/>
+// 							</li>
+// 						))}
+// 					</ul>
+// 				</div>
 
-				<div className={styles.employment}>
-					<h3 className={styles.input_list_title}>Занятость</h3>
-					<ul className={styles.employment_list}>
-						{EMPLOYMENT.map((busyness) => (
-							<li className={styles.directions_item} key={busyness.id}>
-								<CheckboxAndRadio
-									labelName={busyness.name}
-									label={`busyness`}
-									type={'checkbox'}
-									id={`busyness_${busyness.id}.`}
-									name={'busyness'}
-								/>
-							</li>
-						))}
-					</ul>
-				</div>
-				<div className={styles.dates}>
-					<h3 className={styles.input_list_title}>Сроки проекты</h3>
-					<div className={styles.dates_inputs}>
-						<div className={styles.dates_input}>
-							<p className={styles.dates_text}>Начало</p>
-							<DatePickerRHF control={control} name="start" />
-						</div>
-						<div className={styles.dates_input}>
-							<p className={styles.dates_text}>Окончание</p>
-							<DatePickerRHF control={control} name="end" />
-						</div>
-					</div>
-				</div>
+// 				<div className={styles.employment}>
+// 					<h3 className={styles.input_list_title}>Занятость</h3>
+// 					<ul className={styles.employment_list}>
+// 						{EMPLOYMENT.map((busyness) => (
+// 							<li className={styles.directions_item} key={busyness.id}>
+// 								<CheckboxAndRadio
+// 									labelName={busyness.name}
+// 									label={`busyness`}
+// 									type={'checkbox'}
+// 									id={`busyness_${busyness.id}.`}
+// 									name={'busyness'}
+// 								/>
+// 							</li>
+// 						))}
+// 					</ul>
+// 				</div>
+// 				<div className={styles.dates}>
+// 					<h3 className={styles.input_list_title}>Сроки проекты</h3>
+// 					<div className={styles.dates_inputs}>
+// 						<div className={styles.dates_input}>
+// 							<p className={styles.dates_text}>Начало</p>
+// 							<DatePickerRHF control={control} name="start" />
+// 						</div>
+// 						<div className={styles.dates_input}>
+// 							<p className={styles.dates_text}>Окончание</p>
+// 							<DatePickerRHF control={control} name="end" />
+// 						</div>
+// 					</div>
+// 				</div>
 
-				<div className={styles.contacts}>
-					<h3 className={styles.input_list_title}>Контакты для связи</h3>
-					<div className={styles.contacts_selects}>
-						<SingleSelectInput
-							name={`project_specialists`}
-							onChange={() => {}}
-							options={CONTACTS}
-							description={'Выберите ресурс'}
-						/>
-						<Input labelName="" name="name" className={styles.input_extra} />
-					</div>
-				</div>
+// 				<div className={styles.contacts}>
+// 					<h3 className={styles.input_list_title}>Контакты для связи</h3>
+// 					<div className={styles.contacts_selects}>
+// 						<SingleSelectInput
+// 							name={`project_specialists`}
+// 							onChange={() => {}}
+// 							options={CONTACTS}
+// 							description={'Выберите ресурс'}
+// 						/>
+// 						<Input labelName="" name="name" className={styles.input_extra} />
+// 					</div>
+// 				</div>
 
-				<div className={styles.specialists_buttons}>
-					<MainButton
-						variant="secondary"
-						width="regular"
-						IconLeft={
-							Plus as React.ComponentType<React.HTMLAttributes<HTMLElement>>
-						}
-						onClick={() => ({})}>
-						Добавить
-					</MainButton>
-					<MainButton variant="trivial" width="regular" onClick={() => ({})}>
-						Сбросить
-					</MainButton>
-				</div>
+// 				<div className={styles.specialists_buttons}>
+// 					<MainButton
+// 						variant="secondary"
+// 						width="regular"
+// 						IconLeft={
+// 							Plus as React.ComponentType<React.HTMLAttributes<HTMLElement>>
+// 						}
+// 						onClick={() => ({})}>
+// 						Добавить
+// 					</MainButton>
+// 					<MainButton variant="trivial" width="regular" onClick={() => ({})}>
+// 						Сбросить
+// 					</MainButton>
+// 				</div>
 
-				<Input
-					name="link"
-					labelName="Ссылка на проект"
-					className={styles.input_extra}
-					description={true}
-					descrText={
-						'Добавьте ссылку на ваш проект, например: GitHub, приложение, веб страница и др.'
-					}
-				/>
+// 				<Input
+// 					name="link"
+// 					labelName="Ссылка на проект"
+// 					className={styles.input_extra}
+// 					description={true}
+// 					descrText={
+// 						'Добавьте ссылку на ваш проект, например: GitHub, приложение, веб страница и др.'
+// 					}
+// 				/>
 
-				<MainButton variant={'trivial'} width={'min'} disabled={false}>
-					{'Очистить'}
-				</MainButton>
-			</div>
-		</Form>
-	);
-};
+// 				<MainButton variant={'trivial'} width={'min'} disabled={false}>
+// 					{'Очистить'}
+// 				</MainButton>
+// 			</div>
+// 		</Form>
+// 	);
+// };
diff --git a/src/widgets/manage-specialists/ui/manage-specialists.tsx b/src/widgets/manage-specialists/ui/manage-specialists.tsx
index 1b88fc99..2750eb65 100644
--- a/src/widgets/manage-specialists/ui/manage-specialists.tsx
+++ b/src/widgets/manage-specialists/ui/manage-specialists.tsx
@@ -1,86 +1,85 @@
-'use client';
-import React, {  useState } from 'react';
-import styles from './manage-specialist.specialist.module.scss';
-import { Form, Toggler } from '@/shared/ui';
-import { SingleSelectInput } from '@/shared/ui/single-select-input/single-select-input';
-import { MultiSelectInput } from '@/shared/ui/multi-select-input/multi-select-input';
-import { LEVEL } from '@/utils/constants';
-import {
-	useGetProfessionsQuery,
-	useGetSkillsQuery,
-} from '@/services/GeneralService';
+// 'use client';
+// import React, { useState } from 'react';
+// import styles from './manage-specialist.specialist.module.scss';
+// import { Form, Toggler } from '@/shared/ui';
+// import { SingleSelectInput } from '@/shared/ui/single-select-input/single-select-input';
+// import { MultiSelectInput } from '@/shared/ui/multi-select-input/multi-select-input';
+// import { LEVEL } from '@/utils/constants';
+// import {
+// 	useGetProfessionsQuery,
+// 	useGetSkillsQuery,
+// } from '@/services/GeneralService';
 
-export const ManageSpecialists = () => {
-	const [recruitmentIsOpen, setRecruitmentIsOpen] = useState(false);
+// export const ManageSpecialists = () => {
+// 	const [recruitmentIsOpen, setRecruitmentIsOpen] = useState(false);
 
-	const { data: skills } = useGetSkillsQuery([]) 
-	const { data: profession } = useGetProfessionsQuery([]) 
+// 	const { data: skills } = useGetSkillsQuery([]);
+// 	const { data: profession } = useGetProfessionsQuery([]);
 
-	console.log(skills);
+// 	console.log(skills);
 
-	
-	const onSubmit = (data) => {
-		console.table(data)
-	}
-	return (
-		<Form className={styles.container} onSubmit={onSubmit}>
-			<div className={styles.specialists}>
-				<h3 className={styles.specialists_master_title}>Кто нужен в проект</h3>
-				<div className={styles.specialists_toggle}>
-					<span>Набор {recruitmentIsOpen ? 'открыт' : 'закрыт'}</span>
-					<Toggler
-						checked={recruitmentIsOpen as boolean}
-						name={'allow_notifications'}
-						id={'allow_notifications'}
-						onChange={(evt) => setRecruitmentIsOpen(evt.target.checked)}
-					/>
-				</div>
+// 	const onSubmit = (data: unknown) => {
+// 		console.table(data);
+// 	};
+// 	return (
+// 		<Form className={styles.container} onSubmit={onSubmit}>
+// 			<div className={styles.specialists}>
+// 				<h3 className={styles.specialists_master_title}>Кто нужен в проект</h3>
+// 				<div className={styles.specialists_toggle}>
+// 					<span>Набор {recruitmentIsOpen ? 'открыт' : 'закрыт'}</span>
+// 					<Toggler
+// 						checked={recruitmentIsOpen as boolean}
+// 						name={'allow_notifications'}
+// 						id={'allow_notifications'}
+// 						onChange={(evt) => setRecruitmentIsOpen(evt.target.checked)}
+// 					/>
+// 				</div>
 
-				<SingleSelectInput
-					name={`project_specialists`}
-					label={'Специальность'}
-					onChange={() => {}}
-					options={profession?.map(
-						(specialization: { id: number; name: string }) => {
-							return {
-								label: specialization.id,
-								value: specialization.name,
-							};
-						}
-					)}
-					description="Выберите одну специальность"
-					isSearchable
-				/>
+// 				<SingleSelectInput
+// 					name={`project_specialists`}
+// 					label={'Специальность'}
+// 					onChange={() => {}}
+// 					options={profession?.map(
+// 						(specialization: { id: number; name: string }) => {
+// 							return {
+// 								label: specialization.id,
+// 								value: specialization.name,
+// 							};
+// 						}
+// 					)}
+// 					description="Выберите одну специальность"
+// 					isSearchable
+// 				/>
 
-				<div>
-					<MultiSelectInput
-						name={`project_specialists`}
-						onChange={() => {}}
-						options={LEVEL}
-						values={[]}
-						label={'Уровень квалификации'}
-						isSearchable
-					/>
-				</div>
+// 				<div>
+// 					<MultiSelectInput
+// 						name={`project_specialists`}
+// 						onChange={() => {}}
+// 						options={LEVEL}
+// 						values={[]}
+// 						label={'Уровень квалификации'}
+// 						isSearchable
+// 					/>
+// 				</div>
 
-				<div>
-					<MultiSelectInput
-						isSearchable
-						name={`project_specialists`}
-						onChange={() => {}}
-						options={skills?.map((skill: { id: number; name: string }) => {
-							return {
-								label: skill.id,
-								value: skill.name,
-							};
-						})}
-						values={[]}
-						label={'Навыки'}
-						description="Выберите не более 15 навыков"
-						maxSelections={15}
-					/>
-				</div>
-			</div>
-		</Form>
-	);
-};
+// 				<div>
+// 					<MultiSelectInput
+// 						isSearchable
+// 						name={`project_specialists`}
+// 						onChange={() => {}}
+// 						options={skills?.map((skill: { id: number; name: string }) => {
+// 							return {
+// 								label: skill.id,
+// 								value: skill.name,
+// 							};
+// 						})}
+// 						values={[]}
+// 						label={'Навыки'}
+// 						description="Выберите не более 15 навыков"
+// 						maxSelections={15}
+// 					/>
+// 				</div>
+// 			</div>
+// 		</Form>
+// 	);
+// };

From 36a31be7089d8f3bfc1d0fd066c3b88433b62daf Mon Sep 17 00:00:00 2001
From: makc-anisimov <makc.anisimov@gmail.com>
Date: Tue, 17 Dec 2024 00:54:50 +0300
Subject: [PATCH 19/19] feat(features): add create-project feature

---
 src/entities/create-project/index.ts          |   1 +
 .../ui/create-project.module.scss             |   6 +
 .../create-project/ui/create-project.tsx      |  40 +++++++
 src/entities/index.ts                         |   1 +
 .../create-project/create-project.module.scss |   0
 .../create-project/create-project.tsx         |   9 ++
 src/features/index.ts                         |   1 +
 .../profile-create-project-page.module.scss   |   2 +-
 .../ui/profile-create-project-page.tsx        | 103 ++++++++----------
 .../profile-layout/profile-layout.module.scss |   3 +
 .../layouts/profile-layout/profile-layout.tsx |   2 +-
 src/shared/ui/index.ts                        |   1 +
 12 files changed, 111 insertions(+), 58 deletions(-)
 create mode 100644 src/entities/create-project/index.ts
 create mode 100644 src/entities/create-project/ui/create-project.module.scss
 create mode 100644 src/entities/create-project/ui/create-project.tsx
 create mode 100644 src/features/create-project/create-project.module.scss
 create mode 100644 src/features/create-project/create-project.tsx

diff --git a/src/entities/create-project/index.ts b/src/entities/create-project/index.ts
new file mode 100644
index 00000000..7ec721cd
--- /dev/null
+++ b/src/entities/create-project/index.ts
@@ -0,0 +1 @@
+export { CreateProject } from './ui/create-project';
diff --git a/src/entities/create-project/ui/create-project.module.scss b/src/entities/create-project/ui/create-project.module.scss
new file mode 100644
index 00000000..bc6c332e
--- /dev/null
+++ b/src/entities/create-project/ui/create-project.module.scss
@@ -0,0 +1,6 @@
+.createProject {
+	width: 100%;
+	&__details {
+		// min-width: 816px;
+	}
+}
diff --git a/src/entities/create-project/ui/create-project.tsx b/src/entities/create-project/ui/create-project.tsx
new file mode 100644
index 00000000..c73dbc01
--- /dev/null
+++ b/src/entities/create-project/ui/create-project.tsx
@@ -0,0 +1,40 @@
+'use client';
+
+import React, { useState } from 'react';
+import styles from './create-project.module.scss';
+import { Form, Input } from '@/shared/ui';
+import { TextEditor } from '@/shared/ui/text-editor/text-editor';
+
+export const CreateProject: React.FC = () => {
+	const [projectName, setProjectName] = useState<string | undefined>('');
+	const [projectDescription, setProjectDescription] = useState<string | undefined>('');
+
+
+	return (
+		<Form
+			className={styles.createProject}
+			onSubmit={() => console.log('saveproject')}>
+			<section className={styles.createProject__details}>
+				<h2 className={styles.projectDetails__title}>Детали проекта</h2>
+				<Input
+					// onBlurCapture={validateFields}
+					className={styles.fields__nameInput}
+					name="nick_name"
+					labelName="Название проекта"
+					// description
+					value={projectName}
+					// onChange={(event) => handleInputChange(event, 'nickName')}
+					// error={nickNameErrorText}
+				/>
+			
+				<TextEditor
+					currentText={projectDescription as string}
+					setCurrentText={setProjectDescription}
+					labelName="Описание проекта"
+					desc="Расскажите о проекте и его цели используя не более 750 символов"
+				/>
+			</section>
+		</Form>
+	);
+};
+// })
diff --git a/src/entities/index.ts b/src/entities/index.ts
index 7a9b4350..5b15c6cb 100644
--- a/src/entities/index.ts
+++ b/src/entities/index.ts
@@ -14,3 +14,4 @@ export { Pagination } from './pagination';
 export { ProjectFilter } from './project-filter/ui/project-filter';
 export { SideNav } from './side-nav';
 export { SpecialistsFilter } from './specialists-filter/ui/specialists-filter';
+export { CreateProject } from './create-project';
diff --git a/src/features/create-project/create-project.module.scss b/src/features/create-project/create-project.module.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/features/create-project/create-project.tsx b/src/features/create-project/create-project.tsx
new file mode 100644
index 00000000..7d457ff6
--- /dev/null
+++ b/src/features/create-project/create-project.tsx
@@ -0,0 +1,9 @@
+import { CreateProject } from "@/entities/create-project";
+import React, { FC } from "react";
+
+export const CreateProjectFeature: FC = () => {
+  return (
+    <CreateProject />
+  )
+
+}
\ No newline at end of file
diff --git a/src/features/index.ts b/src/features/index.ts
index ba22f9bb..41fcdb8a 100644
--- a/src/features/index.ts
+++ b/src/features/index.ts
@@ -9,3 +9,4 @@ export { DeleteAccountFeature } from '@/features/delete-account/delete-account';
 export { InviteToProjectFeature } from '@/features/invite-to-project/invite-to-project';
 export { InviteToProjectVacancyFeature } from '@/features/invite-to-project-vacancy/invite-to-project-vacancy';
 export { SpecialistsToFavoritesFeature } from '@/features/specialists-to-favorites/specialists-to-favorites';
+export { CreateProjectFeature } from '@/features/create-project/create-project';
diff --git a/src/pages/profile-create-project-page/ui/profile-create-project-page.module.scss b/src/pages/profile-create-project-page/ui/profile-create-project-page.module.scss
index 5cbe9541..3e60a41e 100644
--- a/src/pages/profile-create-project-page/ui/profile-create-project-page.module.scss
+++ b/src/pages/profile-create-project-page/ui/profile-create-project-page.module.scss
@@ -1,5 +1,5 @@
 .form {
-	all: unset;
+	// all: unset;
 }
 
 .btn  {
diff --git a/src/pages/profile-create-project-page/ui/profile-create-project-page.tsx b/src/pages/profile-create-project-page/ui/profile-create-project-page.tsx
index 29e2fbe7..b6164061 100644
--- a/src/pages/profile-create-project-page/ui/profile-create-project-page.tsx
+++ b/src/pages/profile-create-project-page/ui/profile-create-project-page.tsx
@@ -1,67 +1,58 @@
 'use client';
-import { Form, MainButton } from '@/shared/ui';
-import { FormProject, FormProjectSpecialists } from '@/widgets';
+// import { Form, MainButton } from '@/shared/ui';
+// import { FormProject, FormProjectSpecialists } from '@/widgets';
 import React from 'react';
-import styles from './profile-create-project-page.module.scss';
+// import styles from './profile-create-project-page.module.scss';
 
-import { useForm } from 'react-hook-form';
-import { useSelector } from 'react-redux';
-import { RootState } from '@/store/store';
-import { ProjectService } from '@/services/models/IProject';
-import { usePostProjectMutation } from '@/services/ProjectService';
+// import { useForm } from 'react-hook-form';
+// import { useSelector } from 'react-redux';
+// import { RootState } from '@/store/store';
+// import { ProjectService } from '@/services/models/IProject';
+// import { usePostProjectMutation } from '@/services/ProjectService';
+import { CreateProjectFeature } from '@/features';
+import { NotificationToastContainer } from '@/widgets/notification-toast';
 
 export const ProfileCreateProject = () => {
-	const { projectSpecialists, projectUtility } = useSelector(
-		(state: RootState) => ({
-			projectSpecialists: state.projectSpecialists.project_specialists,
-			projectUtility: state.projectUtility,
-		})
-	);
-
-	const [postProject] = usePostProjectMutation();
-
-	const formatDate = (dateObj: Date) => {
-		const year = dateObj.getFullYear();
-		const month = String(dateObj.getMonth() + 1).padStart(2, '0');
-		const day = String(dateObj.getDate()).padStart(2, '0');
-		return `${year}-${month}-${day}`;
-	};
-
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	const handleSubmit = (data: any) => {
-		const dates = {
-			started: formatDate(data.start as Date),
-			ended: formatDate(data?.end as Date),
-		};
-
-		const common: ProjectService = {
-			...data,
-			...projectUtility,
-			...dates,
-			// eslint-disable-next-line camelcase
-			project_specialists: projectSpecialists,
-		};
-
-		postProject(common);
-	};
-
-	const { control } = useForm();
+	// const { projectSpecialists, projectUtility } = useSelector(
+	// 	(state: RootState) => ({
+	// 		projectSpecialists: state.projectSpecialists.project_specialists,
+	// 		projectUtility: state.projectUtility,
+	// 	})
+	// );
+
+	// const [postProject] = usePostProjectMutation();
+
+	// const formatDate = (dateObj: Date) => {
+	// 	const year = dateObj.getFullYear();
+	// 	const month = String(dateObj.getMonth() + 1).padStart(2, '0');
+	// 	const day = String(dateObj.getDate()).padStart(2, '0');
+	// 	return `${year}-${month}-${day}`;
+	// };
+
+	// // eslint-disable-next-line @typescript-eslint/no-explicit-any
+	// const handleSubmit = (data: any) => {
+	// 	const dates = {
+	// 		started: formatDate(data.start as Date),
+	// 		ended: formatDate(data?.end as Date),
+	// 	};
+
+	// 	const common: ProjectService = {
+	// 		...data,
+	// 		...projectUtility,
+	// 		...dates,
+	// 		// eslint-disable-next-line camelcase
+	// 		project_specialists: projectSpecialists,
+	// 	};
+
+	// 	postProject(common);
+	// };
+
+	// const { control } = useForm();
 
 	return (
 		<>
-			<Form onSubmit={handleSubmit} extraClass={styles.form}>
-				<FormProject control={control} />
-				<FormProjectSpecialists />
-				<div className={styles.btn}>
-					<MainButton
-						variant={'primary'}
-						width={'min'}
-						type="submit"
-						disabled={false}>
-						{'Submit'}
-					</MainButton>
-				</div>
-			</Form>
+			<CreateProjectFeature />
+			<NotificationToastContainer />
 		</>
 	);
 };
diff --git a/src/shared/layouts/profile-layout/profile-layout.module.scss b/src/shared/layouts/profile-layout/profile-layout.module.scss
index 2157a859..09a412e4 100644
--- a/src/shared/layouts/profile-layout/profile-layout.module.scss
+++ b/src/shared/layouts/profile-layout/profile-layout.module.scss
@@ -24,6 +24,9 @@
 	gap: 24px;
 	margin-bottom: 80px;
 }
+.childrenWrapper {
+	width: 100%;
+}
 
 @media screen and (max-width: 1199px) {
 	.wrapper {
diff --git a/src/shared/layouts/profile-layout/profile-layout.tsx b/src/shared/layouts/profile-layout/profile-layout.tsx
index 60a747ab..3b53ce39 100644
--- a/src/shared/layouts/profile-layout/profile-layout.tsx
+++ b/src/shared/layouts/profile-layout/profile-layout.tsx
@@ -17,7 +17,7 @@ export const ProfileLayout = ({ children }: { children: React.ReactNode }) => {
 					<div className={styles.sideNav}>
 						<SideNav />
 					</div>
-					<div>{children}</div>
+					<div className={styles.childrenWrapper}>{children}</div>
 				</div>
 			</div>
 			<Footer />
diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts
index f2e7dc33..16a72f21 100644
--- a/src/shared/ui/index.ts
+++ b/src/shared/ui/index.ts
@@ -19,4 +19,5 @@ export { ContactCard } from './contact-card/contact-card';
 export { InputSearch } from './input-search/input-search';
 export { NavigationMenu } from './navigation-menu/navigation-menu';
 export { ProfileLink } from './profile-link/profile-link';
+// export { TextEditor } from './text-editor/text-editor';