apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finish page statistics

Browse Source
This commit is contained in:
MaxOvs19
2023-10-03 18:03:32 +03:00
parent 6b6432330b
commit 986c0833f7
3 changed files with 342 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
src/pages/Statistics/Statistics.jsx
View File

@ -9,16 +9,49 @@ import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadc
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 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));
};
@ -70,16 +103,94 @@ const Statistics = () => {
<div className="statistics-header__menu">
<h1>Статистика проекта</h1>
<img src={link} alt="#" />
<span>ссылка на проект</span>
<span className="return-text">ссылка на проект</span>
</div>
<div className="statistics-header__return">
<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 className="statistics-info"></div>
<div className="statistics-team"></div>
</div>
</div>
</div>

224
src/pages/Statistics/statistics.scss
View File

@ -7,13 +7,237 @@
&-header {
display: flex;
justify-content: space-between;
margin: 15px 0 0 0;
&__return {
img {
width: 19px;
height: 19px;
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;
}
}