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

Finished fixed modal

Browse Source
This commit is contained in:
MaxOvs19 2023-05-05 16:10:25 +03:00
parent f32a8f64e5
commit ce939e6322
10 changed files with 183 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/ProjectTiket/ProjectTiket.jsx
View File

@ -5,7 +5,7 @@ import { apiRequest } from "../../api/request";
import { deleteProject, modalToggle } from "../../redux/projectsTrackerSlice"; import { deleteProject, modalToggle } from "../../redux/projectsTrackerSlice";
import { ModalSelect } from "../UI/ModalSelect/ModalSelect"; import { ModalSelect } from "../UI/ModalSelect/ModalSelect";
import ModalAdd from "../UI/ModalAdd/ModalAdd"; import TrackerModal from "../UI/TrackerModal/TrackerModal";
import link from "../../images/link.svg"; import link from "../../images/link.svg";
import archiveSet from "../../images/archive.svg"; import archiveSet from "../../images/archive.svg";
@ -67,11 +67,11 @@ export const ProjectTiket = ({ project, index }) => {
</span> </span>
</div> </div>
<ModalAdd <TrackerModal
active={modalAdd} active={modalAdd}
setActive={setModalAdd} setActive={setModalAdd}
defautlInput={project.name} defautlInput={project.name}
></ModalAdd> ></TrackerModal>
<ModalSelect active={modalSelect}> <ModalSelect active={modalSelect}>
<div className="project__settings-menu"> <div className="project__settings-menu">

11
src/components/UI/ModalAspt/ModalAspt.jsx
View File

@ -1,13 +1,13 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { Link } from "react-router-dom";
import ModalLayout from "../ModalLayout/ModalLayout";
import avatar from "../../../images/mokPerson.png"; import avatar from "../../../images/mokPerson.png";
import logoTg from "../../../images/TgLogo.svg"; import logoTg from "../../../images/TgLogo.svg";
import arrow from "../../../images/right-arrow.png"; import arrow from "../../../images/right-arrow.png";
import interview from "../../../images/interviewLogo.svg"; import interview from "../../../images/interviewLogo.svg";
import { Link } from "react-router-dom";
import ModalAdd from "../ModalAdd/ModalAdd";
import "./modalAspt.scss"; import "./modalAspt.scss";
export const ModalAspt = ({ active, setActive, level }) => { export const ModalAspt = ({ active, setActive, level }) => {
@ -82,7 +82,8 @@ export const ModalAspt = ({ active, setActive, level }) => {
</div> </div>
<span className="exit" onClick={() => setActive(false)}></span> <span className="exit" onClick={() => setActive(false)}></span>
</div> </div>
<ModalAdd active={modalSend} setActive={setModalSend}>
<ModalLayout active={modalSend} setActive={setModalSend}>
<div className="send"> <div className="send">
<img src={interview}></img> <img src={interview}></img>
<h2>Спасибо, собеседование назначено</h2> <h2>Спасибо, собеседование назначено</h2>
@ -93,7 +94,7 @@ export const ModalAspt = ({ active, setActive, level }) => {
Время собеседования: <span>{time}</span> Время собеседования: <span>{time}</span>
</p> </p>
</div> </div>
</ModalAdd> </ModalLayout>
</div> </div>
); );
}; };

16
src/components/UI/ModalLayout/ModalLayout.jsx Normal file
View File

@ -0,0 +1,16 @@
import React from "react";
export const ModalLayout = ({ active, setActive, children }) => {
return (
<div
className={active ? "modal-add active" : "modal-add"}
onClick={() => setActive(false)}
>
<div className="modal-add__content" onClick={(e) => e.stopPropagation()}>
{children}
</div>
</div>
);
};
export default ModalLayout;

6
src/components/UI/ModalTicket/ModalTicket.jsx
View File

@ -1,6 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import ModalAdd from "../ModalAdd/ModalAdd"; import TrackerModal from "../TrackerModal/TrackerModal";
import { apiRequest } from "../../../api/request"; import { apiRequest } from "../../../api/request";
import { useDispatch } from "react-redux"; import { useDispatch } from "react-redux";
import { import {
@ -158,11 +158,11 @@ export const ModalTiсket = ({
</div> </div>
</div> </div>
<ModalAdd <TrackerModal
active={addSubtask} active={addSubtask}
setActive={setAddSubtask} setActive={setAddSubtask}
defautlInput={task.column_id} defautlInput={task.column_id}
></ModalAdd> ></TrackerModal>
</div> </div>
); );
}; };

68
src/components/UI/TicketFullScreen/TicketFullScreen.jsx
View File

@ -4,11 +4,11 @@ import { ProfileHeader } from "../../ProfileHeader/ProfileHeader";
import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs"; import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs";
import { Footer } from "../../Footer/Footer"; import { Footer } from "../../Footer/Footer";
import { Link, useParams, useNavigate } from "react-router-dom"; import { Link, useParams, useNavigate } from "react-router-dom";
import ModalAdd from "../ModalAdd/ModalAdd"; import TrackerModal from "../TrackerModal/TrackerModal";
import { Navigation } from "../../Navigation/Navigation"; import { Navigation } from "../../Navigation/Navigation";
import { useDispatch } from "react-redux"; import { useDispatch } from "react-redux";
import { setToggleTab } from "../../../redux/projectsTrackerSlice"; import { modalToggle, setToggleTab } from "../../../redux/projectsTrackerSlice";
import { apiRequest } from "../../../api/request"; import { apiRequest } from "../../../api/request";
import project from "../../../images/trackerProject.svg"; import project from "../../../images/trackerProject.svg";
@ -31,9 +31,7 @@ import edit from "../../../images/edit.svg";
import "./ticketFullScreen.scss"; import "./ticketFullScreen.scss";
export const TicketFullScreen = ({}) => { export const TicketFullScreen = ({}) => {
const [addSubtask, setAddSubtask] = useState(false);
const [modalAddWorker, setModalAddWorker] = useState(false); const [modalAddWorker, setModalAddWorker] = useState(false);
const [valueTiket, setValueTiket] = useState("");
const ticketId = useParams(); const ticketId = useParams();
const dispatch = useDispatch(); const dispatch = useDispatch();
const navigate = useNavigate(); const navigate = useNavigate();
@ -114,31 +112,22 @@ export const TicketFullScreen = ({}) => {
<div className="tasks__head__wrapper"> <div className="tasks__head__wrapper">
<h4>Проект : {projectInfo.name}</h4> <h4>Проект : {projectInfo.name}</h4>
<ModalAdd active={modalAddWorker} setActive={setModalAddWorker}> <TrackerModal
<div className="title-project"> active={modalAddWorker}
<h4>Добавьте участника</h4> setActive={setModalAddWorker}
<p className="title-project__decs">Введите имя или e-mail</p> ></TrackerModal>
<div className="input-container">
<input
className="name-project"
value={valueTiket}
onChange={(e) => setValueTiket(e.target.value)}
></input>
</div>
</div>
<button
className="button-add"
onClick={(e) => e.preventDefault()}
>
Добавить
</button>
</ModalAdd>
<div className="tasks__head__persons"> <div className="tasks__head__persons">
<img src={avatarTest} alt="avatar" /> <img src={avatarTest} alt="avatar" />
<img src={avatarTest} alt="avatar" /> <img src={avatarTest} alt="avatar" />
<span className="countPersons">+9</span> <span className="countPersons">+9</span>
<span className="addPerson" onClick={setModalAddWorker}> <span
className="addPerson"
onClick={() => {
dispatch(modalToggle("addWorker"));
setModalAddWorker(true);
}}
>
+ +
</span> </span>
<p>добавить участника в проект</p> <p>добавить участника в проект</p>
@ -172,7 +161,12 @@ export const TicketFullScreen = ({}) => {
</div> </div>
<div className="content__communication"> <div className="content__communication">
<p className="tasks"> <p className="tasks">
<button onClick={() => setAddSubtask(true)}> <button
onClick={() => {
dispatch(modalToggle("addSubtask"));
setModalAddWorker(true);
}}
>
<img src={plus}></img> <img src={plus}></img>
Добавить под задачу Добавить под задачу
</button> </button>
@ -210,7 +204,14 @@ export const TicketFullScreen = ({}) => {
</div> </div>
<div className="add-worker moreItems"> <div className="add-worker moreItems">
<button>+</button> <button
onClick={() => {
dispatch(modalToggle("addWorker"));
setModalAddWorker(true);
}}
>
+
</button>
<span>Добавить участников</span> <span>Добавить участников</span>
</div> </div>
</div> </div>
@ -247,21 +248,6 @@ export const TicketFullScreen = ({}) => {
</div> </div>
</div> </div>
</div> </div>
<ModalAdd active={addSubtask} setActive={setAddSubtask}>
<div className="title-project subtask">
<h4>
Вы добавляете подзадачу <p>в колонку задачи {"Готово"}</p>
</h4>
<p className="title-project__decs">Введите текст</p>
<div>
<textarea className="title-project__textarea"></textarea>
</div>
</div>
<button className="button-add" onClick={(e) => e.preventDefault()}>
Добавить
</button>
</ModalAdd>
</div> </div>
<Footer /> <Footer />
</section> </section>

18
src/components/UI/ModalAdd/ModalAdd.jsx → src/components/UI/TrackerModal/TrackerModal.jsx
View File

@ -9,9 +9,9 @@ import {
setProjectBoardFetch, setProjectBoardFetch,
} from "../../../redux/projectsTrackerSlice"; } from "../../../redux/projectsTrackerSlice";
import "./modalAdd.scss"; import "./trackerModal.scss";
export const ModalAdd = ({ export const TrackerModal = ({
active, active,
setActive, setActive,
selectedTab, selectedTab,
@ -115,7 +115,7 @@ export const ModalAdd = ({
className="name-project" className="name-project"
value={emailWorker} value={emailWorker}
onChange={(e) => setEmailWorker(e.target.value)} onChange={(e) => setEmailWorker(e.target.value)}
></input> />
</div> </div>
</div> </div>
<button <button
@ -139,7 +139,7 @@ export const ModalAdd = ({
value={valueTiket} value={valueTiket}
onChange={(e) => setValueTiket(e.target.value)} onChange={(e) => setValueTiket(e.target.value)}
placeholder="Название задачи" placeholder="Название задачи"
></input> />
</div> </div>
<div className="input-container"> <div className="input-container">
<input <input
@ -147,7 +147,7 @@ export const ModalAdd = ({
value={descriptionTicket} value={descriptionTicket}
onChange={(e) => setDescriptionTicket(e.target.value)} onChange={(e) => setDescriptionTicket(e.target.value)}
placeholder="Описание задачи" placeholder="Описание задачи"
></input> />
</div> </div>
</div> </div>
<button className="button-add" onClick={createTiket}> <button className="button-add" onClick={createTiket}>
@ -164,7 +164,7 @@ export const ModalAdd = ({
className="name-project" className="name-project"
value={ProjectName} value={ProjectName}
onChange={(e) => editProjectName(e.target.value)} onChange={(e) => editProjectName(e.target.value)}
></input> />
</div> </div>
</div> </div>
<button className="button-add" onClick={editProject}> <button className="button-add" onClick={editProject}>
@ -215,7 +215,7 @@ export const ModalAdd = ({
className="name-project" className="name-project"
value={valueColumn} value={valueColumn}
onChange={(e) => setValueColumn(e.target.value)} onChange={(e) => setValueColumn(e.target.value)}
></input> />
</div> </div>
</div> </div>
<button className="button-add" onClick={createTab}> <button className="button-add" onClick={createTab}>
@ -233,7 +233,7 @@ export const ModalAdd = ({
className="name-project" className="name-project"
value={defautlInput} value={defautlInput}
onChange={(e) => setValueTiket(e.target.value)} onChange={(e) => setValueTiket(e.target.value)}
></input> />
</div> </div>
</div> </div>
<button className="button-add" onClick={(e) => e.preventDefault()}> <button className="button-add" onClick={(e) => e.preventDefault()}>
@ -248,4 +248,4 @@ export const ModalAdd = ({
); );
}; };
export default ModalAdd; export default TrackerModal;

0
src/components/UI/ModalAdd/modalAdd.scss → src/components/UI/TrackerModal/trackerModal.scss
View File

6
src/pages/PartnerBid/PartnerBid.jsx
View File

@ -13,7 +13,7 @@ import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileB
import { Footer } from "../../components/Footer/Footer"; import { Footer } from "../../components/Footer/Footer";
import { Navigation } from "../../components/Navigation/Navigation"; import { Navigation } from "../../components/Navigation/Navigation";
import { Loader } from "../../components/Loader/Loader"; import { Loader } from "../../components/Loader/Loader";
import ModalAdd from "../../components/UI/ModalAdd/ModalAdd"; import ModalLayout from "../../components/UI/ModalLayout/ModalLayout";
import { apiRequest } from "../../api/request"; import { apiRequest } from "../../api/request";
import { getCorrectDate } from "../../components/Calendar/calendarHelper"; import { getCorrectDate } from "../../components/Calendar/calendarHelper";
@ -76,7 +76,7 @@ export const PartnerBid = () => {
<div className="partnerBid"> <div className="partnerBid">
<ProfileHeader /> <ProfileHeader />
<Navigation /> <Navigation />
<ModalAdd active={modalDelete} setActive={setModalDelete}> <ModalLayout active={modalDelete} setActive={setModalDelete}>
<div className="title-project modal-title-delete"> <div className="title-project modal-title-delete">
<h4>Подтверждение удаления</h4> <h4>Подтверждение удаления</h4>
<p className="title-project__decs modal-decs"> <p className="title-project__decs modal-decs">
@ -99,7 +99,7 @@ export const PartnerBid = () => {
</button> </button>
</div> </div>
</div> </div>
</ModalAdd> </ModalLayout>
<div className="container"> <div className="container">
<ProfileBreadcrumbs <ProfileBreadcrumbs

228
src/pages/ProjectTracker/ProjectTracker.js
View File

@ -15,11 +15,11 @@ import {
moveProjectTask, moveProjectTask,
setProjectBoardFetch, setProjectBoardFetch,
setToggleTab, setToggleTab,
activeLoader activeLoader,
} from "../../redux/projectsTrackerSlice"; } from "../../redux/projectsTrackerSlice";
import ModalTicket from "../../components/UI/ModalTicket/ModalTicket"; import ModalTicket from "../../components/UI/ModalTicket/ModalTicket";
import ModalAdd from "../../components/UI/ModalAdd/ModalAdd"; import TrackerModal from "../../components/UI/TrackerModal/TrackerModal";
import project from "../../images/trackerProject.svg"; import project from "../../images/trackerProject.svg";
import tasks from "../../images/trackerTasks.svg"; import tasks from "../../images/trackerTasks.svg";
@ -45,10 +45,10 @@ export const ProjectTracker = () => {
const startWrapperIndexTest = useRef({}); const startWrapperIndexTest = useRef({});
const projectBoard = useSelector(getProjectBoard); const projectBoard = useSelector(getProjectBoard);
const loader = useSelector(getBoarderLoader) const loader = useSelector(getBoarderLoader);
useEffect(() => { useEffect(() => {
dispatch(activeLoader()) dispatch(activeLoader());
dispatch(setProjectBoardFetch(projectId.id)); dispatch(setProjectBoardFetch(projectId.id));
}, []); }, []);
@ -191,97 +191,95 @@ export const ProjectTracker = () => {
</Link> </Link>
</div> </div>
<div className="tracker__tabs__content"> <div className="tracker__tabs__content">
{loader && {loader && <Loader style="green" />}
<Loader style='green' /> {!loader && (
} <div className="tracker__tabs__content__tasks tasks active__content">
{!loader && <div className="tasks__head">
<div className="tracker__tabs__content__tasks tasks active__content"> <div className="tasks__head__wrapper">
<div className="tasks__head"> <h4>Проект : {projectBoard.name}</h4>
<div className="tasks__head__wrapper">
<h4>Проект : {projectBoard.name}</h4>
<ModalAdd <TrackerModal
active={modalAdd} active={modalAdd}
setActive={setModalAdd} setActive={setModalAdd}
selectedTab={selectedTab} selectedTab={selectedTab}
></ModalAdd> ></TrackerModal>
<div className="tasks__head__add"> <div className="tasks__head__add">
<span <span
onClick={() => { onClick={() => {
dispatch(modalToggle("createColumn")); dispatch(modalToggle("createColumn"));
setModalAdd(true); setModalAdd(true);
}} }}
> >
+ +
</span> </span>
<p>добавить колонку</p> <p>добавить колонку</p>
</div> </div>
<div className="tasks__head__persons"> <div className="tasks__head__persons">
<img src={avatarTest} alt="avatar" /> <img src={avatarTest} alt="avatar" />
<img src={avatarTest} alt="avatar" /> <img src={avatarTest} alt="avatar" />
<span className="countPersons">+9</span> <span className="countPersons">+9</span>
<span <span
className="addPerson" className="addPerson"
onClick={() => { onClick={() => {
dispatch(modalToggle("addWorker")); dispatch(modalToggle("addWorker"));
setModalAdd(true); setModalAdd(true);
}} }}
> >
+ +
</span> </span>
<p>добавить участника</p> <p>добавить участника</p>
</div>
<div className="tasks__head__select">
<span>Участвую</span>
<img src={selectArrow} alt="arrow" />
</div>
<div className="tasks__head__select">
<span>Мои</span>
<img src={selectArrow} alt="arrow" />
</div>
<Link to="/profile/tracker" className="tasks__head__back">
<p>Вернуться на проекты</p>
<img src={arrow} alt="arrow" />
</Link>
</div> </div>
<div className="tasks__head__select">
<span>Участвую</span>
<img src={selectArrow} alt="arrow" />
</div>
<div className="tasks__head__select">
<span>Мои</span>
<img src={selectArrow} alt="arrow" />
</div>
<Link to="/profile/tracker" className="tasks__head__back">
<p>Вернуться на проекты</p>
<img src={arrow} alt="arrow" />
</Link>
</div> </div>
</div>
<ModalTicket <ModalTicket
active={modalActiveTicket} active={modalActiveTicket}
setActive={setModalActiveTicket} setActive={setModalActiveTicket}
task={selectedTicket} task={selectedTicket}
projectId={projectBoard.id} projectId={projectBoard.id}
projectName={projectBoard.name} projectName={projectBoard.name}
/> />
<div className="tasks__container"> <div className="tasks__container">
{Boolean(projectBoard?.columns) && {Boolean(projectBoard?.columns) &&
Boolean(projectBoard.columns.length) && Boolean(projectBoard.columns.length) &&
projectBoard.columns.map((column) => { projectBoard.columns.map((column) => {
return ( return (
<div <div
key={column.id} key={column.id}
onDragOver={(e) => dragOverHandler(e)} onDragOver={(e) => dragOverHandler(e)}
onDragEnter={(e) => dragEnterHandler(column.id)} onDragEnter={(e) => dragEnterHandler(column.id)}
onDrop={(e) => dragDropHandler(e, column.id)} onDrop={(e) => dragDropHandler(e, column.id)}
className={`tasks__board ${ className={`tasks__board ${
column.tasks.length >= 3 ? "tasks__board__more" : "" column.tasks.length >= 3 ? "tasks__board__more" : ""
} ${ } ${
wrapperHover[column.id] ? "tasks__board__hover" : "" wrapperHover[column.id] ? "tasks__board__hover" : ""
}`} }`}
> >
<div className="board__head"> <div className="board__head">
{/*<span className={wrapperIndex === 3 ? "done" : ""}>*/} {/*<span className={wrapperIndex === 3 ? "done" : ""}>*/}
<span>{column.title}</span> <span>{column.title}</span>
<div> <div>
<span <span
className="add" className="add"
onClick={() => selectedTabTask(column.id)} onClick={() => selectedTabTask(column.id)}
> >
+ +
</span> </span>
<span <span
onClick={() => { onClick={() => {
setOpenColumnSelect((prevState) => ({ setOpenColumnSelect((prevState) => ({
...prevState, ...prevState,
@ -289,52 +287,52 @@ export const ProjectTracker = () => {
})); }));
}} }}
className="more" className="more"
> >
... ...
</span> </span>
</div>
</div> </div>
</div> {openColumnSelect[column.id] && (
{openColumnSelect[column.id] && (
<div className="column__select"> <div className="column__select">
<div <div
className="column__select__item" className="column__select__item"
onClick={() => { onClick={() => {
setOpenColumnSelect((prevState) => ({ setOpenColumnSelect((prevState) => ({
...prevState, ...prevState,
[column.id]: false, [column.id]: false,
})); }));
dispatch(modalToggle("editColumn")); dispatch(modalToggle("editColumn"));
setModalAdd(true); setModalAdd(true);
}} }}
> >
<img src={edit} alt="edit" /> <img src={edit} alt="edit" />
<span>Изменить</span> <span>Изменить</span>
</div> </div>
<div <div
className="column__select__item" className="column__select__item"
onClick={() => deleteColumn(column.id)} onClick={() => deleteColumn(column.id)}
> >
<img src={del} alt="delete" /> <img src={del} alt="delete" />
<span>Удалить</span> <span>Удалить</span>
</div> </div>
</div> </div>
)} )}
{column.tasks.map((task, index) => { {column.tasks.map((task, index) => {
if (index > 2) { if (index > 2) {
if (!column.open) { if (!column.open) {
return; return;
}
} }
} return (
return (
<div <div
key={task.id} key={task.id}
className="tasks__board__item" className="tasks__board__item"
draggable={true} draggable={true}
onDragStart={(e) => onDragStart={(e) =>
dragStartHandler(e, task, column.id) dragStartHandler(e, task, column.id)
} }
onDragEnd={(e) => dragEndHandler(e)} onDragEnd={(e) => dragEndHandler(e)}
onClick={(e) => openTicket(e, task)} onClick={(e) => openTicket(e, task)}
> >
<div className="tasks__board__item__title"> <div className="tasks__board__item__title">
<p>{task.title}</p> <p>{task.title}</p>
@ -357,32 +355,32 @@ export const ProjectTracker = () => {
{/*</div>*/} {/*</div>*/}
</div> </div>
</div> </div>
); );
})} })}
{column.tasks.length > 3 && ( {column.tasks.length > 3 && (
<span <span
className={ className={
column.open column.open
? "lessItems openItems" ? "lessItems openItems"
: "moreItems openItems" : "moreItems openItems"
} }
// onClick={() => toggleMoreTasks(column.id)} // onClick={() => toggleMoreTasks(column.id)}
> >
{column.open ? "-" : "+"} {column.open ? "-" : "+"}
</span> </span>
)} )}
</div>
);
})}
{Boolean(projectBoard?.columns) &&
!Boolean(projectBoard.columns.length) && (
<div className="tasks__board__noItems">
В проекте нет задач.
</div> </div>
); )}
})}
{Boolean(projectBoard?.columns) &&
!Boolean(projectBoard.columns.length) &&
<div className='tasks__board__noItems'>
В проекте нет задач.
</div> </div>
}
</div> </div>
</div> )}
}
</div> </div>
</div> </div>
<Footer /> <Footer />

6
src/pages/Tracker/Tracker.js
View File

@ -15,7 +15,7 @@ import {
modalToggle, modalToggle,
} from "../../redux/projectsTrackerSlice"; } from "../../redux/projectsTrackerSlice";
import ModalAdd from "../../components/UI/ModalAdd/ModalAdd"; import TrackerModal from "../../components/UI/TrackerModal/TrackerModal";
import ProjectTiket from "../../components/ProjectTiket/ProjectTiket"; import ProjectTiket from "../../components/ProjectTiket/ProjectTiket";
import { urlForLocal } from "../../helper"; import { urlForLocal } from "../../helper";
import { getCorrectDate } from "../../components/Calendar/calendarHelper"; import { getCorrectDate } from "../../components/Calendar/calendarHelper";
@ -184,11 +184,11 @@ export const Tracker = () => {
: "tracker__tabs__content__projects tracker__tabs__content__wrapper" : "tracker__tabs__content__projects tracker__tabs__content__wrapper"
} }
> >
<ModalAdd <TrackerModal
active={modalCreateProject} active={modalCreateProject}
setActive={setModalCreateProject} setActive={setModalCreateProject}
titleProject={"Укажите название проекта:"} titleProject={"Укажите название проекта:"}
></ModalAdd> ></TrackerModal>
{loader && <Loader style="green" />} {loader && <Loader style="green" />}