Finish page statistics
This commit is contained in:
MaxOvs19
parent
6b6432330b
commit
986c0833f7
3
src/assets/icons/emailStatistics.svg
Normal file
3
src/assets/icons/emailStatistics.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="23" height="24" viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M18.2083 9.77461V4.95867C18.2083 3.90162 17.3487 3.04199 16.2916 3.04199H1.91664C0.85958 3.04199 0 3.90157 0 4.95867V14.542C0 15.599 0.85958 16.4587 1.91668 16.4587H12.6627C13.2905 18.6676 15.3216 20.292 17.7292 20.292C18.6557 20.292 19.5668 20.0482 20.3651 19.5864C20.5939 19.4539 20.6725 19.161 20.5396 18.9317C20.4072 18.7024 20.1138 18.6233 19.8849 18.7572C19.2326 19.1344 18.4872 19.3337 17.7291 19.3337C15.3511 19.3337 13.4166 17.3992 13.4166 15.0212C13.4166 12.6431 15.3511 10.7087 17.7291 10.7087C20.1072 10.7087 22.0416 12.6431 22.0416 15.0212V15.5004C22.0416 16.0286 21.6116 16.4587 21.0833 16.4587C20.555 16.4587 20.125 16.0286 20.125 15.5004V13.5837C20.125 13.3188 19.9107 13.1045 19.6458 13.1045C19.5169 13.1045 19.4011 13.1566 19.3151 13.2393C18.8916 12.8619 18.3397 12.6253 17.7291 12.6253C16.4082 12.6253 15.3333 13.7002 15.3333 15.0211C15.3333 16.3421 16.4082 17.417 17.7292 17.417C18.4433 17.417 19.0782 17.0967 19.5175 16.5993C19.8646 17.0924 20.4357 17.417 21.0834 17.417C22.1404 17.417 23 16.5574 23 15.5003V15.0211C23 12.2765 20.8906 10.0178 18.2083 9.77461ZM1.91668 4.00031H16.2917C16.3116 4.00031 16.3283 4.01051 16.348 4.01172L9.49819 9.63428C9.2544 9.78778 8.90109 9.75593 8.74247 9.65863L1.86093 4.01163C1.88038 4.01046 1.89692 4.00031 1.91668 4.00031ZM17.25 9.77461C14.5677 10.0178 12.4583 12.2765 12.4583 15.0212C12.4583 15.1829 12.4682 15.3423 12.4826 15.5004H1.91668C1.3884 15.5004 0.958363 15.0703 0.958363 14.542V4.95867C0.958363 4.82296 0.988326 4.6948 1.03945 4.57774L8.17677 10.4307C8.45564 10.6128 8.77621 10.7087 9.10423 10.7087C9.41962 10.7087 9.72797 10.6198 9.99938 10.4514C10.0265 10.4369 10.0523 10.4196 10.0766 10.3994L17.1689 4.57765C17.22 4.6948 17.25 4.82296 17.25 4.95872V9.77461H17.25ZM17.7292 16.4587C16.9365 16.4587 16.2917 15.8139 16.2917 15.0212C16.2917 14.2285 16.9365 13.5837 17.7292 13.5837C18.5219 13.5837 19.1667 14.2285 19.1667 15.0212C19.1667 15.8139 18.5219 16.4587 17.7292 16.4587Z" fill="black"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
@ -9,16 +9,49 @@ import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadc
|
|||||||
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
|
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
|
||||||
|
|
||||||
import arrow from "assets/icons/arrows/arrowCalendar.png";
|
import arrow from "assets/icons/arrows/arrowCalendar.png";
|
||||||
|
import emailImg from "assets/icons/emailStatistics.svg";
|
||||||
import link from "assets/icons/link.svg";
|
import link from "assets/icons/link.svg";
|
||||||
import project from "assets/icons/trackerProject.svg";
|
import project from "assets/icons/trackerProject.svg";
|
||||||
import tasks from "assets/icons/trackerTasks.svg";
|
import tasks from "assets/icons/trackerTasks.svg";
|
||||||
import archive from "assets/images/archiveIcon.png";
|
import archive from "assets/images/archiveIcon.png";
|
||||||
|
import mockAvatar from "assets/images/mock/AvatarTest .png";
|
||||||
|
|
||||||
import "./statistics.scss";
|
import "./statistics.scss";
|
||||||
|
|
||||||
const Statistics = () => {
|
const Statistics = () => {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
|
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) => {
|
const toggleTabs = (index) => {
|
||||||
dispatch(setToggleTab(index));
|
dispatch(setToggleTab(index));
|
||||||
};
|
};
|
||||||
@ -70,16 +103,94 @@ const Statistics = () => {
|
|||||||
<div className="statistics-header__menu">
|
<div className="statistics-header__menu">
|
||||||
<h1>Статистика проекта</h1>
|
<h1>Статистика проекта</h1>
|
||||||
<img src={link} alt="#" />
|
<img src={link} alt="#" />
|
||||||
<span>ссылка на проект</span>
|
<span className="return-text">ссылка на проект</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="statistics-header__return">
|
<div className="statistics-header__return">
|
||||||
<img src={arrow} alt="#" />
|
<img src={arrow} alt="#" />
|
||||||
<span>вернуться на все проекты</span>
|
|
||||||
|
<Link to={`/profile/tracker`} className="return-text">
|
||||||
|
вернуться на все проекты
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="statistics-info">
|
||||||
|
<div className="statistics-info__head">
|
||||||
|
<p>Проект: </p>
|
||||||
|
<h1>{"Разработка трекера"}</h1>
|
||||||
|
</div>
|
||||||
|
<div className="statistics-info__team">
|
||||||
|
<div className="project-info">
|
||||||
|
<div className="project-info__creator">
|
||||||
|
<span className="return-text">Создатель проекта:</span>
|
||||||
|
<div>
|
||||||
|
<p>{"Василий Тарасов"}</p>{" "}
|
||||||
|
<img src={mockAvatar} alt="#" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="project-info__tasks">
|
||||||
|
<div className="task-quantity">
|
||||||
|
<p>Открытые задачи</p>
|
||||||
|
<span className="task-quantity_open">{4}</span>
|
||||||
|
</div>
|
||||||
|
<div className="task-quantity">
|
||||||
|
<p>Задач в работе</p>
|
||||||
|
<span className="task-quantity_work">{5}</span>
|
||||||
|
</div>
|
||||||
|
<div className="task-quantity">
|
||||||
|
<p>Закрыто задач</p>
|
||||||
|
<span className="task-quantity_closed">{434}</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>Имя</p>
|
||||||
|
<p>Почта</p>
|
||||||
|
<p>Роль</p>
|
||||||
|
<p>Статус</p>
|
||||||
|
</div>
|
||||||
|
<div className="list-team__body">
|
||||||
|
{teams.map((item) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="list-team__item">
|
||||||
|
<div className="person-name">
|
||||||
|
<img src={item.avatar} alt="#" />
|
||||||
|
<p>{item.name}</p>
|
||||||
|
</div>
|
||||||
|
<div className="person-email">
|
||||||
|
<img src={emailImg} alt="#" />
|
||||||
|
<p>{item.email}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="person-type">{item.role}</p>
|
||||||
|
{/* <span className="status status-active"> */}
|
||||||
|
|
||||||
|
<span
|
||||||
|
className={
|
||||||
|
item.status
|
||||||
|
? "status status-active"
|
||||||
|
: "status status-none"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{item.status ? "Активно" : "Не активно"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="add-person">
|
||||||
|
<span className="add-person__button">+</span>
|
||||||
|
<p>Добавить участников</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="statistics-info"></div>
|
|
||||||
<div className="statistics-team"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -7,13 +7,237 @@
|
|||||||
|
|
||||||
&-header {
|
&-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 15px 0 0 0;
|
||||||
|
|
||||||
&__return {
|
&__return {
|
||||||
img {
|
img {
|
||||||
width: 19px;
|
width: 19px;
|
||||||
height: 19px;
|
height: 19px;
|
||||||
transform: rotate(-180deg);
|
transform: rotate(-180deg);
|
||||||
|
margin-right: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__menu {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: #678eda;
|
||||||
|
margin: 0 158px 0 0;
|
||||||
|
font-size: 23px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
margin-left: 17px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-info {
|
||||||
|
margin-top: 35px;
|
||||||
|
|
||||||
|
&__head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 56px;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: #f1f1f1;
|
||||||
|
padding-left: 31px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #5b6871;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: #111112;
|
||||||
|
font-size: 22px;
|
||||||
|
margin: 0 0 0 21px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__team {
|
||||||
|
.project-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 30px;
|
||||||
|
|
||||||
|
&__creator {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #2d4a17;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 32px;
|
||||||
|
margin-right: 19px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tasks {
|
||||||
|
display: flex;
|
||||||
|
gap: 37px;
|
||||||
|
|
||||||
|
.task-quantity {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
height: 53px;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #6f6f6f;
|
||||||
|
width: 61px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
height: 53px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 12px 0 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: #6f6f6f;
|
||||||
|
font-size: 33px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
&_open {
|
||||||
|
background: #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
&_work {
|
||||||
|
background: #e1fccf;
|
||||||
|
}
|
||||||
|
|
||||||
|
&_closed {
|
||||||
|
color: #fff !important;
|
||||||
|
background: #6e7c87;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.list-team {
|
||||||
|
padding: 0 30px;
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
padding: 0 0 10px 0;
|
||||||
|
border-bottom: 2px solid #f1f1f1;
|
||||||
|
margin-bottom: 23px;
|
||||||
|
}
|
||||||
|
&__head {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-right: 123px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #5b6871;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
margin-right: 55px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
color: #000;
|
||||||
|
font-size: 15px;
|
||||||
|
padding: 23px 0;
|
||||||
|
|
||||||
|
.person {
|
||||||
|
&-name {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 202px;
|
||||||
|
img {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-email {
|
||||||
|
width: 235px;
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-type {
|
||||||
|
width: 168px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
border-radius: 34px;
|
||||||
|
font-size: 15px;
|
||||||
|
width: 152px;
|
||||||
|
height: 34px;
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&-active {
|
||||||
|
background: #52b709;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-none {
|
||||||
|
background: #6e7c87;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-person {
|
||||||
|
padding: 20px 30px 70px 30px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: fit-content;
|
||||||
|
|
||||||
|
&__button {
|
||||||
|
cursor: pointer;
|
||||||
|
background: #8bcc60;
|
||||||
|
width: 33.5px;
|
||||||
|
height: 36px;
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 55px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-left: 24px;
|
||||||
|
color: #000;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.return-text {
|
||||||
|
color: #5b6871;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user