import React, { useEffect, useState } from "react";
import { Box } from "@mts/box";
import { TableHeader, tableHeadersItem } from "../TableHeader/TableHeader";
import { TableBody, TableBodyItem } from "../TableBody/TableBody";
import { Pagination } from "@mts/pagination";
import { Button } from "@mts/button";
import { Icon } from "@mts/icon";
import { Link } from "@mts/link";
import style from "./AdminSales.module.scss";
import {
  ModalAddCategory,
  ModalItem,
} from "../ModalAddCategory/ModalAddCategory";
import { useAppSelector, useAppDispatch } from "../../hooks/redux";
import { fetchCategorySale } from "../../store/actions/getCategorySaleActions";

// Компонент AdminSales экспортируется в pages
export const AdminSales = () => {
  const dispatch = useAppDispatch();
  const jwt = localStorage.getItem("jwt");
  //----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
  // получаем рандомное число
  const randomId = (): number => {
    const dataNow = Date.now();
    const randomNumber = Math.floor(Math.random() * 1000);
    const res = dataNow + randomNumber;
    return res;
  };
  //----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
  /**
   * @param {number} lenghtObject - Переменная с количеством обьектов  в const [tableBody, setTableBody] = useState<TableBodyItem[]>....
   */
  const lenghtObject = 25;
  //----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
  // !НАЧАЛЬНОЕ  состояние модального окна
  const [isOpenModal, setIsOpenModal] = useState(false);

  // Функция открытия модалки при нажатии на кнопку
  const сlickOpenModal = () => {
    setIsOpenModal(true);
  };
  //----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

  // !НАЧАЛЬНОЕ  состояние для шапки таблицы  компонента <TableHeader headersTable={headersTable} />
  const [headersTable, setHeadersTable] = useState<tableHeadersItem[]>([
    { id: 1, title: "№" },
    { id: 2, title: "Категория" },
    { id: 3, title: "Дата создания" },
    { id: 4, title: "Дата закрытия" },
  ]);

  //----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

  //  !НАЧАЛЬНОЕ  состояние для тела таблицы  компонента <TableBody tableBody={tableBody} />

  // const [tableBody, setTableBody] = useState<TableBodyItem[]>([
  //   {
  //     id: 1,
  //     title: "Мобильный интернет",
  //     dateСreate: "01.06.2023",
  //     closingDate: "01.09.2023",
  //   },
  // ]);

  const { categorySale, loading } = useAppSelector(
    (state) => state.categorySale
  );
  const [tableBody, setTableBody] = useState<TableBodyItem[]>(categorySale);

  console.log("categorySale!!!!!", categorySale);

  useEffect(() => {
    if (jwt !== null && loading === false) {
      dispatch(fetchCategorySale(jwt));
    }
  }, [dispatch, jwt]);import React, { useEffect, useState } from "react";
import { Box } from "@mts/box";
import { Text } from "@mts/text";
import { Icon } from "@mts/icon";
import { IconButton } from "@mts/icon-button";
import style from "./TableBody.module.scss";

// Определяем тип для элемента содержащегося в тела таблицы
export type TableBodyItem = {
  id: number;
  title: string;
  dateСreate: string;
  closingDate: string;
};

// Объявляем тип для пропсов (PropsInterfaceTableBody) компонента "TableBody "
type PropsInterfaceTableBody = {
  tableBody: TableBodyItem[]; // доcтуп к текущему состоянию массива "tableBody"
  сlickOpenModal: () => void; // Функция открытия модалки при нажатии на кнопку
};

// Компонент "TableBody" экспорт в AdminSales
export const TableBody = (props: PropsInterfaceTableBody) => {
  const { tableBody, сlickOpenModal } = props;
  // Обработчик функция открытия модального окна по клику
  const onClickOpenModalHandler = () => {
    сlickOpenModal();
  };
  //--------------------------------------------------------------------------------------------------------------------------
  return (
    // Обертка где внутри располагается таблица
    <Box className={style.wrapper}>
      <Box className={style.table}>
        {tableBody.map((item) => (
          <>
            {/* обертка style.column для всех ячеек которые .map() */}
            <Box key={item.id} className={style.column}>
              <Box className={style.columnBody}>
                <Text
                  className={style.textBody}
                  tag="span"
                  font="compact"
                  weight="regular"
                  size={14}
                  lineHeight={20}
                >
                  {item.id}
                </Text>
              </Box>
              {/* блок с текстом  под  "Категория" */}
              <Box className={style.columnBody}>
                <Text
                  className={style.textBody}
                  tag="span"
                  font="compact"
                  weight="regular"
                  size={14}
                  lineHeight={20}
                >
                  {item.title}
                </Text>
              </Box>
              {/* блок с текстом  под "Дата создания" */}
              <Box className={style.columnBody}>
                <Text
                  className={style.textBody}
                  tag="span"
                  font="compact"
                  weight="regular"
                  size={14}
                  lineHeight={20}
                >
                  {item.dateСreate}
                </Text>
              </Box>
              <Box className={style.columnBody}>
                {/*контейнер для ячейки  где две иконки и  текстом внутри под  "Дата закрытия" */}
                <Box className={style.container}>
                  <Text
                    //Текст "Дата закрытия"
                    className={style.textClosingDate}
                    tag="span"
                    font="compact"
                    weight="regular"
                    size={14}
                    lineHeight={20}
                  >
                    {item.closingDate}
                  </Text>
                  {/* контейнер для иконок */}
                  <Box>
                    {/* иконка крестика */}
                    <IconButton size={24} variant="secondary" type="button">
                      <Icon
                        width={16}
                        height={16}
                        variant="outline"
                        name="Cross"
                      />
                    </IconButton>
                    {/* иконка  шестеренки */}
                    <IconButton
                      size={24}
                      variant="secondary"
                      type="button"
                      onClick={onClickOpenModalHandler} // Обработчик функция открытия модального окна по клику
                    >
                      <Icon
                        width={16}
                        height={16}
                        variant="outline"
                        name="Settings"
                      />
                    </IconButton>
                  </Box>
                </Box>
              </Box>
            </Box>
          </>
        ))}
      </Box>
    </Box>
  );
};
import { responseDataShema } from "../types";

export interface categorySaleListShema extends responseDataShema {
  data: ICategorySaleListShema[];
}

export interface ICategorySaleListShema {
  id: number;
  title: string;
  dateСreate: string;
  closingDate: string;
}
import { AppDispatch } from "..";
import axios from "axios";
import { categorySaleSlice } from "../slices/categorySaleSlice";
import { categorySaleListShema } from "../../models/categorySaleListShema";
// Функция fetchCategorySale принимает jwt в качестве токена аутентификации
export const fetchCategorySale = (jwt: string) => {
  //при использовании  async (dispatch: AppDispatch) . 
  // В данном случае, это означает, что функция  fetchCategorySale  возвращает асинхронную функцию,
  // которая принимает параметр  dispatch  с типом  AppDispatch .
  return async (dispatch: AppDispatch) => {
    // Формируем заголовок запроса с авторизационным токеном
    let header = { Authorization: `Bearer ${jwt}` };
    try {
      // Диспатчим действие fetching для установки флага загрузки в true
      dispatch(categorySaleSlice.actions.fetching());
      const url = `${window.location.origin}/interaction/api/0.1/get_category`;
      // Выполняем GET-запрос с использованием axios и сохраняем результат в response_category
      const response_category = axios.get<categorySaleListShema>(url, {
        headers: header,
      });
      // Используем Promise.all для ожидания выполнения всех асинхронных запросов
      Promise.all([response_category]).then((responses) => {
        // Проверяем, есть ли ошибки в полученных ответах
        let isError = responses.some(
          (response) => response.data.return_code !== 0
        );
        // Если ошибок нет, обновляем состояние с помощью действия fetchSuccessCategorySale
        if (!isError) {
          dispatch(
            categorySaleSlice.actions.fetchSuccessCategorySale(
              responses[0].data.data
            )
          );
          // Устанавливаем флаг загрузки в false с помощью действия fetchSuccess
          dispatch(categorySaleSlice.actions.fetchSuccess());
        }
      });
    } catch (error) {
      // Если происходит ошибка при выполнении запроса, устанавливаем флаг ошибки в true
      dispatch(categorySaleSlice.actions.fetchingError());
    }
  };
};
import { PayloadAction, createSlice } from "@reduxjs/toolkit";
import { ICategorySaleListShema } from "../../models/categorySaleListShema";

// Определение типа начального состояния
export interface initialStateTypes {
  categorySale: ICategorySaleListShema[];
  loading: boolean;
  error: boolean;
}

// Начальное состояние
const initialState: initialStateTypes = {
  categorySale: [],
  loading: false,
  error: false,
};

// Создание среза (slice) для управления состоянием
export const categorySaleSlice = createSlice({
  name: "categorySale",
  initialState: initialState,
  reducers: {
    // Действие для начала загрузки данных
    fetching(state) {
      state.loading = true;
      state.error = false;
    },

    // Действие при успешной загрузке данных
    fetchSuccess(state) {
      state.loading = false;
    },

    // Действие при успешной загрузке данных категорий продаж
    fetchSuccessCategorySale(
      state,
      action: PayloadAction<ICategorySaleListShema[]>
    ) {
      state.categorySale = action.payload;
    },

    // Действие при ошибке загрузки данных
    fetchingError(state) {
      state.error = true;
    },
  },
});

// Экспорт редьюсера для использования в приложении
export default categorySaleSlice.reducer; почему не отображается данные в import React, { useEffect, useState } from "react";
import { Box } from "@mts/box";
import { Text } from "@mts/text";
import { Icon } from "@mts/icon";
import { IconButton } from "@mts/icon-button";
import style from "./TableBody.module.scss";

// Определяем тип для элемента содержащегося в тела таблицы
export type TableBodyItem = {
  id: number;
  title: string;
  dateСreate: string;
  closingDate: string;
};

// Объявляем тип для пропсов (PropsInterfaceTableBody) компонента "TableBody "
type PropsInterfaceTableBody = {
  tableBody: TableBodyItem[]; // доcтуп к текущему состоянию массива "tableBody"
  сlickOpenModal: () => void; // Функция открытия модалки при нажатии на кнопку
};

// Компонент "TableBody" экспорт в AdminSales
export const TableBody = (props: PropsInterfaceTableBody) => {
  const { tableBody, сlickOpenModal } = props;
  // Обработчик функция открытия модального окна по клику
  const onClickOpenModalHandler = () => {
    сlickOpenModal();
  };
  //--------------------------------------------------------------------------------------------------------------------------
  return (
    // Обертка где внутри располагается таблица
    <Box className={style.wrapper}>
      <Box className={style.table}>
        {tableBody.map((item) => (
          <>
            {/* обертка style.column для всех ячеек которые .map() */}
            <Box key={item.id} className={style.column}>
              <Box className={style.columnBody}>
                <Text
                  className={style.textBody}
                  tag="span"
                  font="compact"
                  weight="regular"
                  size={14}
                  lineHeight={20}
                >
                  {item.id}
                </Text>
              </Box>
              {/* блок с текстом  под  "Категория" */}
              <Box className={style.columnBody}>
                <Text
                  className={style.textBody}
                  tag="span"
                  font="compact"
                  weight="regular"
                  size={14}
                  lineHeight={20}
                >
                  {item.title}
                </Text>
              </Box>
              {/* блок с текстом  под "Дата создания" */}
              <Box className={style.columnBody}>
                <Text
                  className={style.textBody}
                  tag="span"
                  font="compact"
                  weight="regular"
                  size={14}
                  lineHeight={20}
                >
                  {item.dateСreate}
                </Text>
              </Box>
              <Box className={style.columnBody}>
                {/*контейнер для ячейки  где две иконки и  текстом внутри под  "Дата закрытия" */}
                <Box className={style.container}>
                  <Text
                    //Текст "Дата закрытия"
                    className={style.textClosingDate}
                    tag="span"
                    font="compact"
                    weight="regular"
                    size={14}
                    lineHeight={20}
                  >
                    {item.closingDate}
                  </Text>
                  {/* контейнер для иконок */}
                  <Box>
                    {/* иконка крестика */}
                    <IconButton size={24} variant="secondary" type="button">
                      <Icon
                        width={16}
                        height={16}
                        variant="outline"
                        name="Cross"
                      />
                    </IconButton>
                    {/* иконка  шестеренки */}
                    <IconButton
                      size={24}
                      variant="secondary"
                      type="button"
                      onClick={onClickOpenModalHandler} // Обработчик функция открытия модального окна по клику
                    >
                      <Icon
                        width={16}
                        height={16}
                        variant="outline"
                        name="Settings"
                      />
                    </IconButton>
                  </Box>
                </Box>
              </Box>
            </Box>
          </>
        ))}
      </Box>
    </Box>
  );
};
 на русс отвечай на вопрос