From 4cabbf7945753b3cb7dc4f2df0accadb254f9239 Mon Sep 17 00:00:00 2001
From: Aleksey <129634706+aleksey2299-1@users.noreply.github.com>
Date: Fri, 3 May 2024 02:52:28 +0300
Subject: [PATCH 1/3] Created new mailing page, refactor select component,
 minor fixes

---
 .../reducers/ambassadors/model/constants.ts   |   4 +-
 .../reducers/orders/{imdex.ts => index.ts}    |   0
 src/app/store/reducers/programms/index.ts     |   3 +
 .../programms/model/programmsSlice.ts         |  46 +++
 src/app/store/store.ts                        |   4 +-
 src/entities/Button/types/types.ts            |  13 +-
 src/entities/Button/ui/Button.tsx             |   8 +-
 src/entities/OrderForm/ui/OrderForm.tsx       |   2 +-
 src/entities/OrderMerch/types/types.ts        |   1 -
 src/entities/OrderMerch/ui/OrderMerch.tsx     |  62 ++-
 .../MailingPage/ui/MailingPage.module.scss    | 212 ++++++-----
 src/pages/MailingPage/ui/MailingPage.tsx      | 357 ++++++++++++++----
 src/pages/NewOrderPage/ui/NewOrderPage.tsx    |  18 +-
 src/shared/Select/types/types.ts              |  24 +-
 src/shared/Select/ui/Select.tsx               |  23 +-
 src/shared/api/ambassadors/dtos.ts            |   9 +-
 src/shared/api/mailing/dtos.ts                |  29 ++
 src/shared/api/mailing/index.ts               |  22 ++
 src/shared/api/programms/dtos.ts              |   5 +
 src/shared/api/programms/index.ts             |  21 ++
 .../NewMailingTable/ui/NewMailingTable.tsx    | 117 ++++--
 21 files changed, 695 insertions(+), 285 deletions(-)
 rename src/app/store/reducers/orders/{imdex.ts => index.ts} (100%)
 create mode 100644 src/app/store/reducers/programms/index.ts
 create mode 100644 src/app/store/reducers/programms/model/programmsSlice.ts
 create mode 100644 src/shared/api/mailing/dtos.ts
 create mode 100644 src/shared/api/mailing/index.ts
 create mode 100644 src/shared/api/programms/dtos.ts
 create mode 100644 src/shared/api/programms/index.ts

diff --git a/src/app/store/reducers/ambassadors/model/constants.ts b/src/app/store/reducers/ambassadors/model/constants.ts
index 782f40d6..bb7f4c0f 100644
--- a/src/app/store/reducers/ambassadors/model/constants.ts
+++ b/src/app/store/reducers/ambassadors/model/constants.ts
@@ -10,13 +10,13 @@ const initialAmbassador: IAmbassadorById = {
   tg_acc: '',
   status: 'Active',
   created: '',
-  gender: '',
+  gender: 'Male',
   phone: '',
   email: '',
   purpose: '',
   education: '',
   work: '',
-  achievement: '',
+  achievement: 'new',
   address: {
     country: '',
     city: '',
diff --git a/src/app/store/reducers/orders/imdex.ts b/src/app/store/reducers/orders/index.ts
similarity index 100%
rename from src/app/store/reducers/orders/imdex.ts
rename to src/app/store/reducers/orders/index.ts
diff --git a/src/app/store/reducers/programms/index.ts b/src/app/store/reducers/programms/index.ts
new file mode 100644
index 00000000..4fbc6370
--- /dev/null
+++ b/src/app/store/reducers/programms/index.ts
@@ -0,0 +1,3 @@
+import programmsReducer from './model/programmsSlice';
+
+export { programmsReducer };
diff --git a/src/app/store/reducers/programms/model/programmsSlice.ts b/src/app/store/reducers/programms/model/programmsSlice.ts
new file mode 100644
index 00000000..4ec9c0b4
--- /dev/null
+++ b/src/app/store/reducers/programms/model/programmsSlice.ts
@@ -0,0 +1,46 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+import {
+  getMerchAmbassadorsHistory,
+  getMerchTypes,
+} from 'src/shared/api/merch';
+import { getProgramms } from 'src/shared/api/programms';
+import { TProgramm } from 'src/shared/api/programms/dtos';
+
+interface IProgrammsState {
+  programms: TProgramm[];
+  isLoading: boolean;
+  error: string | unknown | null;
+}
+
+const initialState: IProgrammsState = {
+  programms: [],
+  isLoading: false,
+  error: null,
+};
+
+const programmsSlice = createSlice({
+  name: 'programms',
+  initialState,
+  reducers: {},
+  extraReducers: builder => {
+    builder
+      .addCase(getProgramms.fulfilled, (state, action) => {
+        state.isLoading = false;
+        state.error = null;
+        state.programms = action.payload;
+      })
+      .addCase(getProgramms.pending, state => {
+        state.isLoading = true;
+      })
+      .addCase(getProgramms.rejected, (state, action) => {
+        state.isLoading = false;
+        state.error = action.payload;
+      });
+  },
+});
+
+export const selectProgramms = (state: { programms: IProgrammsState }) =>
+  state.programms;
+
+export default programmsSlice.reducer;
diff --git a/src/app/store/store.ts b/src/app/store/store.ts
index c4ca3f4c..1f3d2d4b 100644
--- a/src/app/store/store.ts
+++ b/src/app/store/store.ts
@@ -3,11 +3,12 @@ import { ambassadorsReducer } from './reducers/ambassadors';
 import { contentsReducer } from './reducers/contents';
 import { merchReducer } from './reducers/merch';
 import { promocodesReducer } from './reducers/promocodes';
-import { ordersReducer } from './reducers/orders/imdex';
+import { ordersReducer } from './reducers/orders';
 import { questionnaireReducer } from './reducers/questionnaire';
 import { notificationsReducer } from './reducers/notifications';
 import { modalReducer } from './reducers/modal';
 import { userReducer } from './reducers/user';
+import { programmsReducer } from './reducers/programms';
 
 export const store = configureStore({
   reducer: {
@@ -20,6 +21,7 @@ export const store = configureStore({
     questionnaire: questionnaireReducer,
     modal: modalReducer,
     user: userReducer,
+    programms: programmsReducer,
   },
 });
 
diff --git a/src/entities/Button/types/types.ts b/src/entities/Button/types/types.ts
index 3c3c5d56..b412e380 100644
--- a/src/entities/Button/types/types.ts
+++ b/src/entities/Button/types/types.ts
@@ -1,8 +1,9 @@
-interface ButtonProps {
-  label: string,
-  width: number,
-  height: number,
-  onClick: React.MouseEventHandler,
+import { ButtonProps } from '@mui/material';
+
+interface AppButtonProps extends ButtonProps {
+  label: string;
+  width: number;
+  height: number;
 }
 
-export type { ButtonProps }
\ No newline at end of file
+export type { AppButtonProps };
diff --git a/src/entities/Button/ui/Button.tsx b/src/entities/Button/ui/Button.tsx
index e2708d61..35934069 100644
--- a/src/entities/Button/ui/Button.tsx
+++ b/src/entities/Button/ui/Button.tsx
@@ -1,15 +1,15 @@
 import type { FC } from 'react';
 import Button from '@mui/material/Button';
-import type { ButtonProps } from '../types/types';
+import type { AppButtonProps } from '../types/types';
 
-const ButtonComponent: FC<ButtonProps> = ({
+const ButtonComponent: FC<AppButtonProps> = ({
   width,
   height,
   label,
-  onClick,
+  ...props
 }) => (
   <Button
-    onClick={onClick}
+    {...props}
     sx={{
       background: '#512da8',
       textTransform: 'none',
diff --git a/src/entities/OrderForm/ui/OrderForm.tsx b/src/entities/OrderForm/ui/OrderForm.tsx
index b6fac512..e697f0d8 100644
--- a/src/entities/OrderForm/ui/OrderForm.tsx
+++ b/src/entities/OrderForm/ui/OrderForm.tsx
@@ -47,7 +47,7 @@ const OrderForm: FC<TOrderFormProps> = ({ ambassador }) => {
         </div>
         <div className={style.row}>
           <FieldsetContainer title="Тип мерча">
-            <OrderMerch index={0} required={true} />
+            <OrderMerch index={0} />
             {watch('merch.0') && <OrderMerch index={1} />}
             {watch('merch.1') && <OrderMerch index={2} />}
           </FieldsetContainer>
diff --git a/src/entities/OrderMerch/types/types.ts b/src/entities/OrderMerch/types/types.ts
index 9ac59214..990453aa 100644
--- a/src/entities/OrderMerch/types/types.ts
+++ b/src/entities/OrderMerch/types/types.ts
@@ -1,6 +1,5 @@
 type TOrderMerchProps = {
   index: number;
-  required?: boolean;
 };
 
 export type { TOrderMerchProps };
diff --git a/src/entities/OrderMerch/ui/OrderMerch.tsx b/src/entities/OrderMerch/ui/OrderMerch.tsx
index 643b7221..45074f27 100644
--- a/src/entities/OrderMerch/ui/OrderMerch.tsx
+++ b/src/entities/OrderMerch/ui/OrderMerch.tsx
@@ -5,14 +5,14 @@ import { RootState } from 'src/app/store/store';
 import { useState } from 'react';
 import { TMerchItem } from 'src/shared/api/merch/dtos';
 import { TOrderMerchProps } from '../types/types';
-import { Controller, useFormContext } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form';
 import { ErrorMessage } from '@hookform/error-message';
+import { TextField } from '@mui/material';
 
-const OrderMerch: React.FC<TOrderMerchProps> = ({ index, required }) => {
+const OrderMerch: React.FC<TOrderMerchProps> = ({ index }) => {
   const types = useAppSelector((state: RootState) => state.merch.merchType);
   const {
     setValue,
-    control,
     formState: { errors },
   } = useFormContext();
   const [merch, setMerch] = useState<TMerchItem | null>(null);
@@ -37,39 +37,33 @@ const OrderMerch: React.FC<TOrderMerchProps> = ({ index, required }) => {
           </p>
         )}
       />
-      <Controller
-        name={`merch.${index}`}
-        control={control}
-        shouldUnregister={true}
-        rules={{
-          required: required,
-        }}
-        render={({ field }) => (
-          <div className={style.rowTogether}>
-            <Select
-              onChange={(value: TMerchItem) => handleChange(value)}
-              options={uniqueObjects}
-              optionLabel={option => option.name}
-              label="Выберите мерч"
-              width="333px"
-              height="40px"
-            />
-            {merch && merch.size && (
-              <Select
-                defaultValue={merch}
-                onChange={(value: TMerchItem) => handleChange(value)}
-                options={types.filter(
-                  obj => obj.name === merch.name && obj.size !== null
-                )}
-                optionLabel={option => option.size}
-                label="Выберите размер"
-                width="150px"
-                height="40px"
-              />
+      <div className={style.rowTogether}>
+        <Select
+          onChange={(_, value: TMerchItem) => handleChange(value)}
+          options={uniqueObjects}
+          getOptionLabel={option => option.name}
+          renderInput={params => (
+            <TextField {...params} label="Выберите мерч" size="small" />
+          )}
+          width="333px"
+          height="40px"
+        />
+        {merch && merch.size && (
+          <Select
+            value={merch}
+            onChange={(_, value: TMerchItem) => handleChange(value)}
+            options={types.filter(
+              obj => obj.name === merch.name && obj.size !== null
+            )}
+            getOptionLabel={option => option.size}
+            renderInput={params => (
+              <TextField {...params} label="Выберите размер" size="small" />
             )}
-          </div>
+            width="150px"
+            height="40px"
+          />
         )}
-      />
+      </div>
     </>
   );
 };
diff --git a/src/pages/MailingPage/ui/MailingPage.module.scss b/src/pages/MailingPage/ui/MailingPage.module.scss
index 24f87b34..0306a362 100644
--- a/src/pages/MailingPage/ui/MailingPage.module.scss
+++ b/src/pages/MailingPage/ui/MailingPage.module.scss
@@ -33,7 +33,6 @@
   padding: 0;
   display: flex;
   gap: 32px;
-  
 }
 
 .newmailing {
@@ -49,13 +48,26 @@
   background-color: transparent;
   width: 980px;
   box-sizing: border-box;
-  border: 1px solid #939393;
+  border: 1px solid #474646;
   border-radius: 4px;
   font-family: 'YSText';
   font-weight: 400;
   font-size: 16px;
   line-height: 120%;
-  color: #939393;
+  color: #ebeef4;
+
+  &:focus {
+    outline: thin solid $additionalPurple;
+    border-color: transparent;
+  }
+
+  &:hover {
+    border: 1px solid $additionalPurple;
+  }
+
+  &::placeholder {
+    color: #939393;
+  }
 }
 
 .newmailing__textfield_get {
@@ -71,111 +83,119 @@
   margin-bottom: 29px;
 }
 
+.newmailing__search {
+  margin: 0;
+  margin-bottom: 24px;
+  padding: 12px 16px 17px;
+  width: 980px;
+  border: 1px solid #474646;
+  border-radius: 4px;
+  font-family: 'YSText';
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 120%;
+  color: #ebeef4;
+  background-color: transparent;
 
-  .newmailing__search {
-    margin: 0;
-    margin-bottom: 24px;
-    padding: 12px 16px 17px;
-    width: 980px;
-    border: 1px solid #939393;
-    border-radius: 4px;
-    font-family: 'YSText';
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 120%;
-    color: #939393;
-    background-color: transparent;
+  &:focus {
+    outline: thin solid $additionalPurple;
+    border-color: transparent;
   }
 
-  .newmailing__sortgroup {
-    margin: 0;
-    margin-bottom: 19px;
-    padding: 0;
-    display: flex;
-    gap: 56px;
+  &:hover {
+    border: 1px solid $additionalPurple;
   }
 
-  .newmailing__dropdown {
-    margin: 0;
-    padding: 0;
-    display: flex;
-    gap: 24px;
+  &::placeholder {
+    color: #939393;
   }
+}
 
-  .newmailing__checkboxGroup {
-    margin: 0;
-    padding: 0;
-    display: flex;
-    gap: 29px;
-    list-style: none;
-  }
+.newmailing__sortgroup {
+  width: 976px;
+  margin: 0;
+  margin-bottom: 19px;
+  padding: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 
-  .newmailing__checkbox {
-    margin: 0;
-    padding: 0;
-    display: flex;
-    gap: 8px;
-    align-self: center;
-  }
+.newmailing__checkboxGroup {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: space-between;
+  gap: 29px;
+  list-style: none;
+}
 
-  .newmailing__checkboxtext {
-    margin: 0;
-    padding: 0;
-    font-family: 'YSText';
-    font-weight: 400;
-    font-size: 18px;
-    line-height: 120%;
-    color: #FFFFFF;
-  }
+.newmailing__checkbox {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  align-self: center;
+}
 
-  .newmailing__checkboxdown {
-    margin: 20px 0 47px;
-    padding: 0;
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    font-family: 'YSText';
-    font-weight: 400;
-    font-size: 18px;
-    line-height: 120%;
-    color: #FFFFFF;
-  }
+.newmailing__checkboxtext {
+  margin: 0;
+  gap: 8px;
+  padding: 0;
+  font-family: 'YSText';
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 120%;
+  color: #ffffff;
+}
 
-  .newmailing__buttonsGroup {
-    margin: 0;
-    padding: 0;
-    display: flex;
-    gap: 32px;
-  }
+.newmailing__checkboxdown {
+  margin: 20px 0 47px;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-family: 'YSText';
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 120%;
+  color: #ffffff;
+}
 
-  .header {
-    margin: 0;
-    padding: 0;
-    display: flex;
-    gap: 168px;
-    margin-bottom: 24px;
-  }
+.newmailing__buttonsGroup {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 32px;
+}
 
-  .rightWrapper {
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 32px;
-    align-items: flex-end;
-  }
+.header {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 168px;
+  margin-bottom: 24px;
+}
 
-  .sortWrapper {
-    margin: 0;
-    padding: 0;
-    display: flex;
-    gap: 36px;
-  }
+.rightWrapper {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  align-items: flex-end;
+}
 
-  .trashImg {
-    margin: 0;
-    padding: 0;
-    width: 24px;
-    height: 24px;
-    align-self: center;
-  }
-  
\ No newline at end of file
+.sortWrapper {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 36px;
+}
+
+.trashImg {
+  margin: 0;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  align-self: center;
+}
diff --git a/src/pages/MailingPage/ui/MailingPage.tsx b/src/pages/MailingPage/ui/MailingPage.tsx
index bb313ddb..7c38354f 100644
--- a/src/pages/MailingPage/ui/MailingPage.tsx
+++ b/src/pages/MailingPage/ui/MailingPage.tsx
@@ -3,7 +3,14 @@ import { Navbar } from 'src/widgets/NavBar/index';
 import { navbarLinks } from 'src/utils/constants/navLinks';
 import { ButtonComponent } from 'src/entities/Button';
 import { SortComponent } from 'src/entities/SortComponent';
-import { Checkbox, styled } from '@mui/material';
+import {
+  Box,
+  Checkbox,
+  Paper,
+  TableContainer,
+  TextField,
+  styled,
+} from '@mui/material';
 import { NewMailingTable } from 'src/widgets/NewMailingTable';
 import ButtonSecondaryComponent from 'src/entities/ButtonSecondary';
 import { MainTabsNav } from 'src/entities/MainTabsNav';
@@ -13,23 +20,79 @@ import { FilterComponent } from 'src/entities/FilterComponent';
 import { rows } from 'src/utils/constants/allMailingData';
 import trashimg from 'src/shared/icons/trash.svg';
 import style from './MailingPage.module.scss';
+import { Select } from 'src/shared/Select';
+import { useAppDispatch, useAppSelector } from 'src/app/store/hooks';
 
-const MailingPage = () => {
-  const genderOptions = ['Пол', 'Женский', 'Мужской'];
-  const jobOptions = [
-    'Специальность',
-    'Разраб',
-    'Дизайнер',
-    'Аналитик',
-    'Продакт',
-    'Проджект',
-  ];
+import type { RootState } from 'src/app/store/store';
+import { IAmbassador } from 'src/shared/api/ambassadors/dtos';
+import {
+  Controller,
+  FieldValues,
+  FormProvider,
+  useForm,
+} from 'react-hook-form';
+import { getProgramms } from 'src/shared/api/programms';
+import { getAllAmbassadors } from 'src/shared/api/ambassadors';
+import { postMail } from 'src/shared/api/mailing';
+import { TMailPost } from 'src/shared/api/mailing/dtos';
+
+const MailingPage: React.FC = () => {
+  const methods = useForm();
+  const genderOptions = { Женский: 'Female', Мужской: 'Male' };
   const [selectedOption, setSelectedOption] = useState('Новая рассылка');
+
+  // константы для фильтров
+  const [ambassadorSearch, setAmbassadorSearch] = useState('');
+  const [genderSearch, setGenderSearch] = useState('');
+  const [specSearch, setSpecSearch] = useState('');
+
+  const [selected, setSelected] = useState<IAmbassador[]>([]);
+
   const tabs: string[] = ['Новая рассылка', 'Все рассылки'];
   const [searchTerm, setSearchTerm] = useState('');
   const [searchResults, setSearchResults] = useState<TRow[]>([]);
   const sortingOptions = ['ФИО', 'Статус', 'Специальность', 'Дата', 'Рейтинг'];
 
+  const ambassadors = useAppSelector(
+    (state: RootState) => state.ambassadors.ambassadors
+  );
+  const programms = useAppSelector(
+    (state: RootState) => state.programms.programms
+  );
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch(getProgramms());
+    dispatch(getAllAmbassadors());
+  }, [dispatch]);
+
+  const search = ambassadors
+    .filter(ambassador =>
+      ambassadorSearch
+        ? `${ambassador.last_name} ${ambassador.first_name}`
+            .toLowerCase()
+            .includes(ambassadorSearch.toLowerCase()) ||
+          `${ambassador.first_name} ${ambassador.last_name}`
+            .toLowerCase()
+            .includes(ambassadorSearch.toLowerCase()) ||
+          ambassador.tg_acc
+            .toLowerCase()
+            .includes(ambassadorSearch.toLowerCase())
+        : true
+    )
+    .filter(ambassador =>
+      specSearch ? ambassador.ya_programm.includes(specSearch) : true
+    )
+    .filter(ambassador =>
+      genderSearch
+        ? ambassador.gender.includes(
+            genderOptions[
+              genderSearch as keyof { Женский: string; Мужской: string }
+            ]
+          )
+        : true
+    );
+
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearchTerm(event.target.value);
   };
@@ -55,6 +118,7 @@ const MailingPage = () => {
   const StyledCheckbox = styled(Checkbox)(({ theme }) => ({
     width: 24,
     height: 24,
+    marginRight: 8,
     borderRadius: 4,
     backgroundColor: '#ebeef4',
     border: '1px solid #939393',
@@ -67,8 +131,15 @@ const MailingPage = () => {
     },
     '&.Mui-checked': {
       color: '#ebeef4',
-      backgroundColor: '#14ae5c',
-      '& .MuiSvgIcon-root path': {
+      backgroundColor: '#189251',
+      '& .MuiSvgIcon-root': {
+        fill: '#ebeef4',
+      },
+    },
+    '&.MuiCheckbox-indeterminate': {
+      color: '#ebeef4',
+      backgroundColor: '#189251',
+      '& .MuiSvgIcon-root': {
         fill: '#ebeef4',
       },
     },
@@ -76,6 +147,48 @@ const MailingPage = () => {
 
   const logMessage = () => {};
 
+  const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.checked) {
+      methods.setValue('ambassadors', ambassadors);
+      setSelected(ambassadors);
+      return;
+    }
+    methods.setValue('ambassadors', []);
+    setSelected([]);
+  };
+
+  const handleSelectAllCompletedGuideClick = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    if (event.target.checked) {
+      methods.setValue(
+        'ambassadors',
+        ambassadors.filter(ambassador => ambassador.achievement != 'new')
+      );
+      setSelected(
+        ambassadors.filter(ambassador => ambassador.achievement != 'new')
+      );
+      return;
+    }
+    methods.setValue(
+      'ambassadors',
+      selected.filter(ambassador => ambassador.achievement == 'new')
+    );
+    setSelected(selected.filter(ambassador => ambassador.achievement == 'new'));
+  };
+
+  const handleAmbassadorsChange = (value: IAmbassador[]) => {
+    methods.setValue('ambassadors', value);
+    setSelected(value);
+  };
+
+  const handleOnSubmit = (data: FieldValues) => {
+    data['to_telegram'] = true;
+    data['by_email'] = true;
+    data['is_sent'] = true;
+    dispatch(postMail({ body: data as TMailPost }));
+  };
+
   return (
     <div className={style.main}>
       <Navbar links={navbarLinks} />
@@ -86,77 +199,165 @@ const MailingPage = () => {
           onSelectTab={setSelectedOption}
         />
         {selectedOption === 'Новая рассылка' ? (
-          <form className={style.newmailing} noValidate>
-            <input
-              className={`${style.newmailing__textfield} ${style.newmailing__textfield_get}`}
-              type="text"
-              placeholder="Кому (Получатель или Список получателей)"
-            />
-            <input
-              className={`${style.newmailing__textfield} ${style.newmailing__textfield_small}`}
-              type="text"
-              placeholder="Тема рассылки"
-            />
-            <input
-              className={`${style.newmailing__textfield} ${style.newmailing__textfield_big}`}
-              type="text"
-              placeholder="Текст рассылки"
-            />
-            <input
-              className={style.newmailing__search}
-              type="search"
-              placeholder="Поиск"
-            />
-            <div className={style.newmailing__sortgroup}>
-              <div className={style.newmailing__dropdown}>
-                <SortComponent
+          <FormProvider {...methods}>
+            <form className={style.newmailing} noValidate>
+              <Controller
+                name="ambassadors"
+                control={methods.control}
+                render={({ field }) => (
+                  <Select
+                    multiple={true}
+                    disableCloseOnSelect
+                    options={selected}
+                    value={selected}
+                    onChange={(_, v) => {
+                      setSelected(v);
+                      field.onChange(v);
+                    }}
+                    getOptionLabel={option =>
+                      `${option.first_name} ${option.last_name}`
+                    }
+                    width="978px"
+                    margin="0px 0px 8px 0px"
+                    renderInput={params => (
+                      <TextField
+                        {...params}
+                        label="Кому (Получатель или Список получателей)"
+                      />
+                    )}
+                    ambassadorRender
+                  />
+                )}
+              />
+              <input
+                className={`${style.newmailing__textfield} ${style.newmailing__textfield_small}`}
+                type="text"
+                placeholder="Тема рассылки"
+                {...methods.register('title')}
+              />
+              <input
+                className={`${style.newmailing__textfield} ${style.newmailing__textfield_big}`}
+                type="text"
+                placeholder="Текст рассылки"
+                {...methods.register('text')}
+              />
+              <input
+                className={style.newmailing__search}
+                type="search"
+                placeholder="Поиск"
+                onChange={e => setAmbassadorSearch(e.target.value)}
+              />
+              <div className={style.newmailing__sortgroup}>
+                <Select
                   width={220}
-                  height={48}
-                  options={genderOptions}
-                  onSortChange={selectedOption => {}}
+                  options={Object.keys(genderOptions)}
+                  onChange={(_, value) => setGenderSearch(value)}
+                  renderInput={params => <TextField {...params} label="Пол" />}
                 />
-                <SortComponent
+                <Select
                   width={220}
+                  options={programms.map(programm => programm.title)}
+                  onChange={(_, value) => setSpecSearch(value)}
+                  renderInput={params => (
+                    <TextField {...params} label="Специальность" />
+                  )}
+                />
+                <label className={style.newmailing__checkboxtext}>
+                  <StyledCheckbox
+                    onChange={handleSelectAllCompletedGuideClick}
+                    indeterminate={
+                      selected.filter(
+                        ambassador => ambassador.achievement != 'new'
+                      ).length > 0 &&
+                      selected.filter(
+                        ambassador => ambassador.achievement != 'new'
+                      ).length <
+                        ambassadors.filter(
+                          ambassador => ambassador.achievement != 'new'
+                        ).length
+                    }
+                    checked={
+                      selected.filter(
+                        ambassador => ambassador.achievement != 'new'
+                      ).length > 0 &&
+                      selected.filter(
+                        ambassador => ambassador.achievement != 'new'
+                      ).length ===
+                        ambassadors.filter(
+                          ambassador => ambassador.achievement != 'new'
+                        ).length
+                    }
+                  />
+                  Закончил гайд
+                </label>
+                <label className={style.newmailing__checkboxtext}>
+                  <StyledCheckbox
+                    onChange={handleSelectAllClick}
+                    indeterminate={
+                      selected.length > 0 &&
+                      selected.length < ambassadors.length
+                    }
+                    checked={
+                      selected.length > 0 &&
+                      selected.length === ambassadors.length
+                    }
+                  />
+                  Выбрать всех
+                </label>
+              </div>
+              <Box sx={{ width: '976px' }}>
+                <Paper
+                  sx={{
+                    width: '100%',
+                    mb: 2,
+                    backgroundColor: 'transparent',
+                    border: 'solid 1px #474646',
+                  }}
+                >
+                  <TableContainer
+                    sx={{
+                      maxHeight: 400,
+                      '&::-webkit-scrollbar': {
+                        width: '8px',
+                        backgroundColor: '#5f5f5f',
+                      },
+                      '&::-webkit-scrollbar-thumb': {
+                        borderRadius: '10px',
+                        WebkitBoxShadow: 'inset 0 0 6px rgba(0, 0, 0, 0.3)',
+                        backgroundColor: '#ebeef4',
+                      },
+                    }}
+                  >
+                    <NewMailingTable
+                      options={search}
+                      selected={selected}
+                      setSelected={handleAmbassadorsChange}
+                    />
+                  </TableContainer>
+                </Paper>
+              </Box>
+              <div className={style.newmailing__checkboxdown}>
+                <StyledCheckbox className={style.newmailing__sortgroup} />
+                <p className={style.newmailing__checkboxtext}>
+                  Отложенная отправка
+                </p>
+              </div>
+              <div className={style.newmailing__buttonsGroup}>
+                <ButtonComponent
+                  label="Отправить"
+                  width={244}
+                  height={48}
+                  onClick={methods.handleSubmit(handleOnSubmit)}
+                />
+                <ButtonSecondaryComponent
+                  label="Удалить"
+                  width={244}
                   height={48}
-                  options={jobOptions}
-                  onSortChange={selectedOption => {}}
+                  onClick={() => logMessage()}
                 />
               </div>
-              <ul className={style.newmailing__checkboxGroup}>
-                <li className={style.newmailing__checkbox}>
-                  <StyledCheckbox className={style.newmailing__sortgroup} />
-                  <p className={style.newmailing__checkboxtext}>
-                    Закончил гайд
-                  </p>
-                </li>
-                <li className={style.newmailing__checkbox}>
-                  <StyledCheckbox />
-                  <p className={style.newmailing__checkboxtext}>Выбрать всех</p>
-                </li>
-              </ul>
-            </div>
-            <NewMailingTable />
-            <div className={style.newmailing__checkboxdown}>
-              <StyledCheckbox className={style.newmailing__sortgroup} />
-              <p className={style.newmailing__checkboxtext}>
-                Отложенная отправка
-              </p>
-            </div>
-            <div className={style.newmailing__buttonsGroup}>
-              <ButtonComponent
-                label="Отправить"
-                width={244}
-                height={48}
-                onClick={() => logMessage()}
-              />
-              <ButtonSecondaryComponent
-                label="Удалить"
-                width={244}
-                height={48}
-                onClick={() => logMessage()}
-              />
-            </div>
-          </form>
+            </form>
+          </FormProvider>
         ) : (
           <div className={style.cardsContainer}>
             <div className={style.pageContent}>
diff --git a/src/pages/NewOrderPage/ui/NewOrderPage.tsx b/src/pages/NewOrderPage/ui/NewOrderPage.tsx
index cda74c8b..523fc386 100644
--- a/src/pages/NewOrderPage/ui/NewOrderPage.tsx
+++ b/src/pages/NewOrderPage/ui/NewOrderPage.tsx
@@ -36,6 +36,7 @@ import type { TNewOrder } from 'src/shared/api/orders/dtos';
 import { ChoiceModal, SuccessModal } from 'src/entities/Modals';
 
 import style from './NewOrderPage.module.scss';
+import { TextField } from '@mui/material';
 
 const NewOrderPage = () => {
   const ambassadors = useAppSelector(
@@ -50,7 +51,10 @@ const NewOrderPage = () => {
   const [isCancelOpen, setIsCancelOpen] = useState(false);
   const [isSecondaryOpen, setIsSecondaryOpen] = useState(false);
 
-  const handleAmbassadorChange = (newValue: IAmbassador | null) => {
+  const handleAmbassadorChange = (
+    _: React.SyntheticEvent<Element, Event>,
+    newValue: IAmbassador | null
+  ) => {
     if (newValue) {
       dispatch(getAmbassadorById(newValue.id)).then(resultAction => {
         if (getAmbassadorById.fulfilled.match(resultAction)) {
@@ -105,10 +109,18 @@ const NewOrderPage = () => {
             <Select
               onChange={handleAmbassadorChange}
               options={ambassadors}
-              optionLabel={option => `${option.first_name} ${option.last_name}`}
+              getOptionLabel={option =>
+                `${option.first_name} ${option.last_name}`
+              }
               width="100%"
               height="40px"
-              label="Выберите амбассадора"
+              renderInput={params => (
+                <TextField
+                  {...params}
+                  label="Выберите амбассадора"
+                  size="small"
+                />
+              )}
               ambassadorRender
             />
             {ambassador && (
diff --git a/src/shared/Select/types/types.ts b/src/shared/Select/types/types.ts
index 86cbb895..1e93d570 100644
--- a/src/shared/Select/types/types.ts
+++ b/src/shared/Select/types/types.ts
@@ -1,12 +1,14 @@
-type TSelectProps = {
-  onChange: Function;
-  options: readonly any[];
-  optionLabel: (option: any) => string;
-  label: string;
-  width: string;
-  height: string;
-  defaultValue?: object;
-  ambassadorRender?: boolean;
-};
+import { AutocompleteProps } from '@mui/material';
 
-export type { TSelectProps };
+export interface ISelectProps
+  extends AutocompleteProps<
+    any,
+    boolean | undefined,
+    boolean | undefined,
+    boolean | undefined
+  > {
+  width?: string | number;
+  height?: string | number;
+  margin?: string;
+  ambassadorRender?: boolean;
+}
diff --git a/src/shared/Select/ui/Select.tsx b/src/shared/Select/ui/Select.tsx
index 1797276d..bd51d542 100644
--- a/src/shared/Select/ui/Select.tsx
+++ b/src/shared/Select/ui/Select.tsx
@@ -6,30 +6,24 @@ import Grid from '@mui/material/Unstable_Grid2';
 import { Avatar } from 'src/entities/Avatar';
 import tgIcon from 'src/shared/icons/tgIcon.svg';
 
-import type { TSelectProps } from '../types/types';
+import { ISelectProps } from '../types/types';
 
 import style from './Select.module.scss';
 
-const Select: FC<TSelectProps> = ({
-  onChange,
-  options,
-  optionLabel,
-  label,
+const Select: FC<ISelectProps> = ({
   width,
   height,
-  defaultValue,
+  margin,
   ambassadorRender,
+  ...props
 }) => (
   <Autocomplete
-    onChange={(_, newValue) => onChange(newValue)}
-    value={defaultValue}
     ListboxProps={{ className: style.customScrollbar }}
-    options={options}
     disablePortal
-    getOptionLabel={optionLabel}
     sx={{
       width: { width },
       height: { height },
+      margin: { margin },
       border: `1px solid #474646`,
       borderRadius: '4px',
       '& .MuiInputBase-root': {
@@ -46,6 +40,7 @@ const Select: FC<TSelectProps> = ({
       },
       '& .MuiInputLabel-root.Mui-focused': {
         color: '#939393',
+        borderColor: '#512da8',
       },
       '&:hover': {
         borderColor: '#512da8',
@@ -66,6 +61,10 @@ const Select: FC<TSelectProps> = ({
         {
           backgroundColor: '#2e2d33',
         },
+      '& .MuiChip-root': {
+        color: '#ebeef4',
+        backgroundColor: '#373636',
+      },
     }}
     renderOption={
       ambassadorRender
@@ -115,7 +114,7 @@ const Select: FC<TSelectProps> = ({
           )
         : undefined
     }
-    renderInput={params => <TextField {...params} label={label} size="small" />}
+    {...props}
   />
 );
 
diff --git a/src/shared/api/ambassadors/dtos.ts b/src/shared/api/ambassadors/dtos.ts
index 5a052625..6e654a1c 100644
--- a/src/shared/api/ambassadors/dtos.ts
+++ b/src/shared/api/ambassadors/dtos.ts
@@ -9,13 +9,14 @@ export interface IAmbassador {
   tg_acc: string;
   status: 'Active' | 'Pause' | 'Clarify' | 'Not active';
   created: string;
-  achievement: string;
+  achievement: 'new' | 'friend' | 'profi_friend';
+  gender: 'Male' | 'Female';
 }
 
 export interface IAmbassadorById {
   id: number;
   image: string;
-  achievement: string;
+  achievement: 'new' | 'friend' | 'profi_friend';
   first_name: string;
   last_name: string;
   middle_name: string;
@@ -23,7 +24,7 @@ export interface IAmbassadorById {
   tg_acc: string;
   status: 'Active' | 'Pause' | 'Clarify' | 'Not active';
   created: string;
-  gender: string;
+  gender: 'Male' | 'Female';
   phone: string;
   email: string;
   purpose: string;
@@ -57,7 +58,7 @@ export interface IAmbassadorChange {
   tg_acc?: string;
   status?: 'Active' | 'Pause' | 'Clarify' | 'Not active';
   created?: string;
-  gender?: string;
+  gender?: 'Male' | 'Female';
   phone?: number;
   email?: string;
   purpose?: string;
diff --git a/src/shared/api/mailing/dtos.ts b/src/shared/api/mailing/dtos.ts
new file mode 100644
index 00000000..d094f59d
--- /dev/null
+++ b/src/shared/api/mailing/dtos.ts
@@ -0,0 +1,29 @@
+interface TMailPost {
+  title: string;
+  text: string;
+  sent?: Date;
+  by_email?: boolean;
+  to_telegram?: boolean;
+  is_sent?: boolean;
+  ambassadors: [
+    {
+      id: number;
+    },
+  ];
+}
+
+interface TMail extends TMailPost {
+  id: number;
+  sent: Date;
+  by_email: boolean;
+  to_telegram: boolean;
+  is_sent: boolean;
+  ambassadors: [
+    {
+      id: number;
+      tg_acc: string;
+    },
+  ];
+}
+
+export type { TMail, TMailPost };
diff --git a/src/shared/api/mailing/index.ts b/src/shared/api/mailing/index.ts
new file mode 100644
index 00000000..47e5ce32
--- /dev/null
+++ b/src/shared/api/mailing/index.ts
@@ -0,0 +1,22 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+
+import { BASE_URL } from 'src/utils/constants/api';
+import type { TMail, TMailPost } from './dtos';
+
+const postMail = createAsyncThunk(
+  'mailing/postMail',
+  async ({ body }: { body: TMailPost }, { rejectWithValue }) => {
+    try {
+      const { data } = await axios.post<TMail>(
+        `${BASE_URL}/api/v1/mailing/`,
+        body
+      );
+      return data;
+    } catch (e: any) {
+      return rejectWithValue(e.message);
+    }
+  }
+);
+
+export { postMail };
diff --git a/src/shared/api/programms/dtos.ts b/src/shared/api/programms/dtos.ts
new file mode 100644
index 00000000..b4c91077
--- /dev/null
+++ b/src/shared/api/programms/dtos.ts
@@ -0,0 +1,5 @@
+type TProgramm = {
+  title: string;
+};
+
+export type { TProgramm };
diff --git a/src/shared/api/programms/index.ts b/src/shared/api/programms/index.ts
new file mode 100644
index 00000000..8e4e1a55
--- /dev/null
+++ b/src/shared/api/programms/index.ts
@@ -0,0 +1,21 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+
+import { BASE_URL } from 'src/utils/constants/api';
+import type { TProgramm } from './dtos';
+
+const getProgramms = createAsyncThunk(
+  'programms/getProgramms',
+  async (_, { fulfillWithValue, rejectWithValue }) => {
+    try {
+      const { data } = await axios.get<TProgramm[]>(
+        `${BASE_URL}/api/v1/yandexprogramms/`
+      );
+      return data;
+    } catch (e: any) {
+      return rejectWithValue(e.message);
+    }
+  }
+);
+
+export { getProgramms };
diff --git a/src/widgets/NewMailingTable/ui/NewMailingTable.tsx b/src/widgets/NewMailingTable/ui/NewMailingTable.tsx
index 7415f908..0403cdad 100644
--- a/src/widgets/NewMailingTable/ui/NewMailingTable.tsx
+++ b/src/widgets/NewMailingTable/ui/NewMailingTable.tsx
@@ -1,4 +1,4 @@
-import type { FC } from 'react';
+import { useState, type FC } from 'react';
 
 import { rows } from 'src/utils/constants/allMailingData';
 
@@ -15,8 +15,21 @@ import tgIcon from 'src/shared/icons/telegramIcon.svg';
 
 import { Avatar } from 'src/entities/Avatar';
 import style from './NewMailingTable.module.scss';
+import { IAmbassador } from 'src/shared/api/ambassadors/dtos';
+
+type MailingDataGridProps = {
+  options: IAmbassador[];
+  selected: IAmbassador[];
+  setSelected: (value: IAmbassador[]) => void;
+};
+
+const MailingDataGrid: FC<MailingDataGridProps> = ({
+  options,
+  selected,
+  setSelected,
+}) => {
+  const genderOptions = { Male: 'мужчина', Female: 'женщина' };
 
-const MailingDataGrid: FC = () => {
   const commonCellStyle = {
     color: '#ebeef4',
     fontFamily: 'YSText',
@@ -49,38 +62,78 @@ const MailingDataGrid: FC = () => {
     },
   }));
 
+  const handleClick = (event: React.MouseEvent<unknown>, row: IAmbassador) => {
+    const selectedIndex = selected.indexOf(row);
+    let newSelected: IAmbassador[] = [];
+
+    if (selectedIndex === -1) {
+      newSelected = newSelected.concat(selected, row);
+    } else if (selectedIndex === 0) {
+      newSelected = newSelected.concat(selected.slice(1));
+    } else if (selectedIndex === selected.length - 1) {
+      newSelected = newSelected.concat(selected.slice(0, -1));
+    } else if (selectedIndex > 0) {
+      newSelected = newSelected.concat(
+        selected.slice(0, selectedIndex),
+        selected.slice(selectedIndex + 1)
+      );
+    }
+    setSelected(newSelected);
+  };
+
+  const isSelected = (row: IAmbassador) => selected.indexOf(row) !== -1;
+
   return (
-    <Table style={{ width: '1048px' }}>
+    <Table>
       <TableBody>
-        {rows.map(row => (
-          <TableRow key={row.id}>
-            <TableCell style={commonCellStyle}>
-              <div className={style.avatar}>
-                {row.avatar && <Avatar link={row.avatar} />}
-              </div>
-            </TableCell>
-            <TableCell style={commonCellStyle}>
-              <p className={style.name}>
-                {row.name} {row.surname}
-              </p>
-            </TableCell>
-            <TableCell style={commonCellStyle}>
-              <p className={style.position}>{row.position}</p>
-            </TableCell>
-            <TableCell style={commonCellStyle}>
-              <p className={style.gender}>{row.gender}</p>
-            </TableCell>
-            <TableCell style={commonCellStyle}>
-              <div className={style.cellWrapper}>
-                <img src={tgIcon} alt="telegram" className={style.socialIcon} />
-                <span className={style.cellText}>@{row.telegram}</span>
-              </div>
-            </TableCell>
-            <TableCell padding="checkbox" style={{ border: 'none' }}>
-              <StyledCheckbox />
-            </TableCell>
-          </TableRow>
-        ))}
+        {options.map(row => {
+          const isItemSelected = isSelected(row);
+          return (
+            <TableRow
+              key={row.id}
+              hover
+              role="checkbox"
+              selected={isItemSelected}
+              sx={{ cursor: 'pointer' }}
+              aria-checked={isItemSelected}
+              onClick={event => handleClick(event, row)}
+            >
+              <TableCell style={commonCellStyle}>
+                <div className={style.avatar}>
+                  {row.image && (
+                    <Avatar link={row.image} status={row.achievement} />
+                  )}
+                </div>
+              </TableCell>
+              <TableCell style={commonCellStyle}>
+                <p className={style.name}>
+                  {row.first_name} {row.last_name}
+                </p>
+              </TableCell>
+              <TableCell style={commonCellStyle}>
+                <p className={style.position}>{row.ya_programm}</p>
+              </TableCell>
+              <TableCell style={commonCellStyle}>
+                <p className={style.gender}>{genderOptions[row.gender]}</p>
+              </TableCell>
+              <TableCell style={commonCellStyle}>
+                <div className={style.cellWrapper}>
+                  <img
+                    src={tgIcon}
+                    alt="telegram"
+                    className={style.socialIcon}
+                  />
+                  <span className={style.cellText}>
+                    @{row.tg_acc.toLowerCase()}
+                  </span>
+                </div>
+              </TableCell>
+              <TableCell padding="checkbox" style={{ border: 'none' }}>
+                <StyledCheckbox checked={isItemSelected} />
+              </TableCell>
+            </TableRow>
+          );
+        })}
       </TableBody>
     </Table>
   );

From 881899b8c8ea6b2286ac17c13da7295c6f06ba77 Mon Sep 17 00:00:00 2001
From: Aleksey <129634706+aleksey2299-1@users.noreply.github.com>
Date: Fri, 3 May 2024 03:10:16 +0300
Subject: [PATCH 2/3] Small fix

---
 src/shared/Select/ui/Select.tsx | 83 ++++++++++++++++-----------------
 1 file changed, 41 insertions(+), 42 deletions(-)

diff --git a/src/shared/Select/ui/Select.tsx b/src/shared/Select/ui/Select.tsx
index c713c9f9..d822fa8f 100644
--- a/src/shared/Select/ui/Select.tsx
+++ b/src/shared/Select/ui/Select.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-props-no-spreading */
 /* Disabled due to usage of mui */
 
-import { Autocomplete, TextField } from '@mui/material';
+import { Autocomplete } from '@mui/material';
 import Grid from '@mui/material/Unstable_Grid2';
 
 import { Avatar } from 'src/entities/Avatar';
@@ -9,7 +9,7 @@ import tgIcon from 'src/shared/icons/tgIcon.svg';
 
 import style from './Select.module.scss';
 
-import type { TSelectProps } from '../types/types';
+import type { ISelectProps } from '../types/types';
 
 import type { FC } from 'react';
 
@@ -72,49 +72,49 @@ const Select: FC<ISelectProps> = ({
     renderOption={
       ambassadorRender
         ? (props: React.HTMLAttributes<HTMLLIElement>, option) => (
-          <Grid
-            container
-            columns={6}
-            columnSpacing={1}
-            component="li"
-            width="100%"
-            {...props}
-          >
             <Grid
-              md={2}
-              sx={{
-                display: 'flex',
-                justifyContent: 'left',
-                alignItems: 'center',
-              }}
+              container
+              columns={6}
+              columnSpacing={1}
+              component="li"
+              width="100%"
+              {...props}
             >
-              <Avatar
-                link={option.image}
-                status={option.achievement}
-                size="s"
-              />
-              <span style={{ paddingLeft: '5px' }}>
-                {`${option.first_name} ${option.last_name}`}
-              </span>
-            </Grid>
-            <Grid md={3} sx={{ display: 'flex' }}>
-              <span>{option.ya_programm}</span>
-            </Grid>
-            <Grid
-              md={1}
-              sx={{
-                display: 'flex',
-                justifyContent: 'left',
-                alignItems: 'center',
-              }}
-            >
-              <img src={tgIcon} alt="telegram" className={style.socialIcon} />
-              <span className={style.tg}>
+              <Grid
+                md={2}
+                sx={{
+                  display: 'flex',
+                  justifyContent: 'left',
+                  alignItems: 'center',
+                }}
+              >
+                <Avatar
+                  link={option.image}
+                  status={option.achievement}
+                  size="s"
+                />
+                <span style={{ paddingLeft: '5px' }}>
+                  {`${option.first_name} ${option.last_name}`}
+                </span>
+              </Grid>
+              <Grid md={3} sx={{ display: 'flex' }}>
+                <span>{option.ya_programm}</span>
+              </Grid>
+              <Grid
+                md={1}
+                sx={{
+                  display: 'flex',
+                  justifyContent: 'left',
+                  alignItems: 'center',
+                }}
+              >
+                <img src={tgIcon} alt="telegram" className={style.socialIcon} />
+                <span className={style.tg}>
                   @{option.tg_acc.toLocaleLowerCase()}
-              </span>
+                </span>
+              </Grid>
             </Grid>
-          </Grid>
-        )
+          )
         : undefined
     }
     {...props}
@@ -122,4 +122,3 @@ const Select: FC<ISelectProps> = ({
 );
 
 export default Select;
-

From e87d3e165fe0097c3ddbd4e00bfcc47ec252fa30 Mon Sep 17 00:00:00 2001
From: Aleksey <129634706+aleksey2299-1@users.noreply.github.com>
Date: Fri, 3 May 2024 03:12:04 +0300
Subject: [PATCH 3/3] Another small fix

---
 src/pages/MailingPage/ui/MailingPage.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/pages/MailingPage/ui/MailingPage.tsx b/src/pages/MailingPage/ui/MailingPage.tsx
index a89f60ec..c5487460 100644
--- a/src/pages/MailingPage/ui/MailingPage.tsx
+++ b/src/pages/MailingPage/ui/MailingPage.tsx
@@ -1,7 +1,5 @@
 import { useEffect, useState } from 'react';
 
-import { Checkbox, styled } from '@mui/material';
-
 import { Navbar } from 'src/widgets/NavBar/index';
 import { navbarLinks } from 'src/utils/constants/navLinks';
 import { ButtonComponent } from 'src/entities/Button';
@@ -21,7 +19,7 @@ import { MailingDataGrid } from 'src/widgets/MailingDataGrid';
 
 import { FilterComponent } from 'src/entities/FilterComponent';
 
-import { rows } from 'src/utils/constants/allMailingData';
+import { TRow, rows } from 'src/utils/constants/allMailingData';
 import trashimg from 'src/shared/icons/trash.svg';
 
 import style from './MailingPage.module.scss';