guild_front/src/pages/Statistics/Statistics.jsx

import React, { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { Link, useParams } from "react-router-dom";

import { setToggleTab } from "@redux/projectsTrackerSlice";

import { copyProjectLink } from "@utils/helper";
import { urlForLocal } from "@utils/helper";

import { apiRequest } from "@api/request";

import { Footer } from "@components/Common/Footer/Footer";
import { Loader } from "@components/Common/Loader/Loader";
import { Navigation } from "@components/Navigation/Navigation";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";

import arrow from "assets/icons/arrows/arrowCalendar.png";
import emailImg from "assets/icons/emailStatistics.svg";
import link from "assets/icons/link.svg";
import project from "assets/icons/trackerProject.svg";
import tasks from "assets/icons/trackerTasks.svg";
import archive from "assets/images/archiveIcon.png";
import mockAvatar from "assets/images/mock/AvatarTest .png";

import "./statistics.scss";

const Statistics = () => {
  const dispatch = useDispatch();
  const params = useParams();

  const [projectStatistic, setProjectStatistic] = useState(null);
  const [projectInfo, setProjectInfo] = useState(null);
  const [loader, setLoader] = useState(true);

  useEffect(() => {
    apiRequest(`/project/get-project?project_id=${params.id}`).then((res) => {
      setProjectInfo(res);
    });
    apiRequest(`/project/statistic?project_id=${params.id}`).then((res) => {
      setProjectStatistic(res);
      setLoader(false);
    });
  }, []);

  const teams = [
    {
      avatar: mockAvatar,
      name: "Дмитрий Рогов",
      email: "dmitryi.zavadskyi@yandex.ru",
      role: "Программист",
      status: true
    },
    {
      avatar: mockAvatar,
      name: "Марина Орехова",
      email: "dmitryi.zavadskyi@yandex.ru",
      role: "Менеджер",
      status: true
    },
    {
      avatar: mockAvatar,
      name: "Тамара Доценко",
      email: "dmitryi.zavadskyi@yandex.ru51515188151",
      role: "Тестировщик",
      status: false
    },
    {
      avatar: mockAvatar,
      name: "Кек Лолов",
      email: "dm4124gmail.com",
      role: "PM",
      status: false
    }
  ];

  const toggleTabs = (index) => {
    dispatch(setToggleTab(index));
  };
  return (
    <div className="statistics">
      <ProfileHeader />
      <Navigation />
      <div className="container">
        <div className="tracker__content">
          <ProfileBreadcrumbs
            links={[
              { name: "Главная", link: "/profile" },
              { name: "Трекер", link: "/profile/tracker" }
            ]}
          />
          <h2 className="tracker__title">Управление проектами с трекером</h2>
        </div>
        {loader ? (
          <Loader />
        ) : (
          <div className="tracker__tabs">
            <div className="tracker__tabs__head">
              <Link
                to="/profile/tracker"
                className="tab active-tab"
                onClick={() => toggleTabs(1)}
              >
                <img src={project} alt="img" />
                <p>Проекты </p>
              </Link>
              <Link
                to="/profile/tracker"
                className="tab"
                onClick={() => toggleTabs(2)}
              >
                <img src={tasks} alt="img" />
                <p>Все мои задачи</p>
              </Link>
            </div>
            <div className="tracker__tabs__content">
              <div className="tracker__tabs__content__wrapper statistics-body">
                <div className="statistics-header">
                  <div className="statistics-header__menu">
                    <h1>Статистика проекта</h1>
                    <img src={link} alt="#" />
                    <span
                      className="return-text"
                      onClick={() => copyProjectLink("62")}
                    >
                      ссылка на проект
                    </span>
                  </div>

                  <div className="statistics-header__return">
                    <img src={arrow} alt="#" />

                    <Link to={`/profile/tracker`} className="return-text">
                      К списку проектов
                    </Link>
                  </div>
                </div>
                <div className="statistics-info">
                  <div className="statistics-info__head">
                    <p>Проект: </p>
                    <h1>{projectInfo?.name}</h1>
                  </div>
                  <div className="statistics-info__team">
                    <div className="project-info">
                      <div className="project-info__creator">
                        <span className="return-text">Создатель проекта:</span>
                        <div>
                          <p>{projectInfo?.owner_info?.fio}</p>
                          <img
                            src={
                              projectInfo?.owner_info?.avatar
                                ? urlForLocal(projectInfo.owner_info.avatar)
                                : mockAvatar
                            }
                            alt="#"
                          />
                        </div>
                      </div>
                      <div className="project-info__tasks">
                        <div className="task-quantity">
                          <p>Открытые задачи</p>
                          <span className="task-quantity_open">
                            {projectStatistic?.open_tasks_count}
                          </span>
                        </div>
                        <div className="task-quantity">
                          <p>Задач в работе</p>
                          <span className="task-quantity_work">
                            {projectStatistic?.task_on_work_count}
                          </span>
                        </div>
                        <div className="task-quantity">
                          <p>Закрыто задач</p>
                          <span className="task-quantity_closed">
                            {projectStatistic?.closed_task_count}
                          </span>
                        </div>
                      </div>
                    </div>
                    <div className="list-team">
                      <div className="list-team__title">
                        <span className="return-text">Участники проекта:</span>
                      </div>
                      <div className="list-team__head">
                        <p className="head__name">Имя</p>
                        <p className="head__email">Почта</p>
                        <p className="head__role">Роль</p>
                        <p className="head__status">Статус</p>
                      </div>
                      <div className="list-team__body">
                        {projectStatistic?.participants.map((person, index) => {
                          return (
                            <>
                              <div className="list-team__item" key={index}>
                                <div className="person-name">
                                  <img
                                    src={
                                      person.avatar
                                        ? urlForLocal(person.avatar)
                                        : mockAvatar
                                    }
                                    alt="avatar"
                                  />
                                  <p>{person.username}</p>
                                </div>
                                <div className="person-email">
                                  <img src={emailImg} alt="#" />
                                  <p>{person.email}</p>
                                </div>

                                <p className="person-type">
                                  {person.role ? person.role : "-"}
                                </p>
                                {/* <span className="status status-active"> */}

                                <span
                                  className={
                                    person.status
                                      ? "status status-active"
                                      : "status status-none"
                                  }
                                >
                                  {person.status ? "Активно" : "Не активно"}
                                </span>
                              </div>
                            </>
                          );
                        })}
                      </div>
                    </div>
                    <div className="add-person">
                      <span className="add-person__button">+</span>
                      <p>Добавить участника</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
      <Footer />
    </div>
  );
};

export default Statistics;