From 8144d84743e15a37e78990f2b38592418ea0df42 Mon Sep 17 00:00:00 2001
From: Anastasiya <melichkaowen1@gmail.com>
Date: Fri, 6 Sep 2024 14:46:42 +0300
Subject: [PATCH 01/26] refactor(frontend): delete notification button

---
 .../frontend/src/components/Header/Header.tsx        | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/application/frontend/src/components/Header/Header.tsx b/application/frontend/src/components/Header/Header.tsx
index 57b833d..acba854 100644
--- a/application/frontend/src/components/Header/Header.tsx
+++ b/application/frontend/src/components/Header/Header.tsx
@@ -84,18 +84,6 @@ export const Header: React.FC = () => {
 
       <RightSection>
         <IconButtons>
-          <Tooltip title={t("notifications")}>
-            <IconButton
-              sx={{
-                backgroundColor: "rgba(238, 238, 238, 1)",
-                borderRadius: "6px",
-                width: "28px",
-                height: "28px",
-              }}
-            >
-              <NotificationsOutlined />
-            </IconButton>
-          </Tooltip>
           <Tooltip title={t("profile")}>
             <IconButton
               sx={{

From 70df4e22904fb69a78f965cd13485cda964df8eb Mon Sep 17 00:00:00 2001
From: Anastasiya <melichkaowen1@gmail.com>
Date: Fri, 6 Sep 2024 14:47:47 +0300
Subject: [PATCH 02/26] refactor(frontend): delete more button

---
 .../frontend/src/components/Header/Header.tsx        | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/application/frontend/src/components/Header/Header.tsx b/application/frontend/src/components/Header/Header.tsx
index acba854..f90d3b6 100644
--- a/application/frontend/src/components/Header/Header.tsx
+++ b/application/frontend/src/components/Header/Header.tsx
@@ -96,18 +96,6 @@ export const Header: React.FC = () => {
               <AccountCircleOutlined />
             </IconButton>
           </Tooltip>
-          <Tooltip title={t("more")}>
-            <IconButton
-              sx={{
-                backgroundColor: "rgba(238, 238, 238, 1)",
-                borderRadius: "6px",
-                width: "28px",
-                height: "28px",
-              }}
-            >
-              <MoreVertOutlined />
-            </IconButton>
-          </Tooltip>
         </IconButtons>
 
         <Switches>

From 0dfd73457380556e1172e5441629c59c558ee2db Mon Sep 17 00:00:00 2001
From: Anastasiya <melichkaowen1@gmail.com>
Date: Fri, 6 Sep 2024 14:48:46 +0300
Subject: [PATCH 03/26] refactor(frontend): delete change theme button

---
 application/frontend/src/components/Header/Header.tsx | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/application/frontend/src/components/Header/Header.tsx b/application/frontend/src/components/Header/Header.tsx
index f90d3b6..f6ab3a8 100644
--- a/application/frontend/src/components/Header/Header.tsx
+++ b/application/frontend/src/components/Header/Header.tsx
@@ -99,13 +99,6 @@ export const Header: React.FC = () => {
         </IconButtons>
 
         <Switches>
-          <Tooltip title={t("toggleTheme")}>
-            <Switch
-              onChange={(_, checked) => {
-                change(checked ? ThemeEnum.Dark : ThemeEnum.Light)
-              }}
-            />
-          </Tooltip>
           <Tooltip title={t("changeLanguage")}>
             <Switch
               onChange={(_, checked) =>

From ab6876ddaef156bf78b725d45dff2396175a26bf Mon Sep 17 00:00:00 2001
From: Anastasiya <melichkaowen1@gmail.com>
Date: Fri, 6 Sep 2024 15:08:05 +0300
Subject: [PATCH 04/26] refactor(frontend): delete quiz button

---
 .../frontend/src/components/Header/Header.tsx      | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/application/frontend/src/components/Header/Header.tsx b/application/frontend/src/components/Header/Header.tsx
index f6ab3a8..6bc40ee 100644
--- a/application/frontend/src/components/Header/Header.tsx
+++ b/application/frontend/src/components/Header/Header.tsx
@@ -51,20 +51,6 @@ export const Header: React.FC = () => {
           >
             {t("projects")}
           </Button>
-          <Button
-            onClick={() => console.log("Quiz clicked")}
-            sx={{
-              color: "inherit",
-              textDecoration: "none",
-              textTransform: "none",
-              "&:hover": {
-                color: theme.palette.primary.main,
-                textDecoration: "underline",
-              },
-            }}
-          >
-            {t("quiz")}
-          </Button>
           <Button
             onClick={() => console.log("Rating clicked")}
             sx={{

From a22daaa1d6777ccc952091a72336942a89d6321c Mon Sep 17 00:00:00 2001
From: Anastasiya <melichkaowen1@gmail.com>
Date: Fri, 6 Sep 2024 15:08:49 +0300
Subject: [PATCH 05/26] refactor(frontend): delete rating button

---
 .../frontend/src/components/Header/Header.tsx      | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/application/frontend/src/components/Header/Header.tsx b/application/frontend/src/components/Header/Header.tsx
index 6bc40ee..7668611 100644
--- a/application/frontend/src/components/Header/Header.tsx
+++ b/application/frontend/src/components/Header/Header.tsx
@@ -51,20 +51,6 @@ export const Header: React.FC = () => {
           >
             {t("projects")}
           </Button>
-          <Button
-            onClick={() => console.log("Rating clicked")}
-            sx={{
-              color: "inherit",
-              textDecoration: "none",
-              textTransform: "none",
-              "&:hover": {
-                color: theme.palette.primary.main,
-                textDecoration: "underline",
-              },
-            }}
-          >
-            {t("rating")}
-          </Button>
         </NavButtons>
       </LeftSection>
 

From 9a29e6dbeb41b5d3b02e3881feda1828bfa0948e Mon Sep 17 00:00:00 2001
From: Anastasiya <melichkaowen1@gmail.com>
Date: Fri, 6 Sep 2024 15:09:57 +0300
Subject: [PATCH 06/26] fix(frontend): change navigate for project button

---
 application/frontend/src/components/Header/Header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/application/frontend/src/components/Header/Header.tsx b/application/frontend/src/components/Header/Header.tsx
index 7668611..8f65dbf 100644
--- a/application/frontend/src/components/Header/Header.tsx
+++ b/application/frontend/src/components/Header/Header.tsx
@@ -38,7 +38,7 @@ export const Header: React.FC = () => {
         </Logo>
         <NavButtons>
           <Button
-            onClick={() => navigate("/")}
+            onClick={() => navigate("/projects")}
             sx={{
               color: "inherit",
               textDecoration: "none",

From 9d1f7b9e8c1e6a084316a7a2be369c262792a162 Mon Sep 17 00:00:00 2001
From: Anastasiya <melichkaowen1@gmail.com>
Date: Fri, 6 Sep 2024 15:33:44 +0300
Subject: [PATCH 07/26] refactor(frontend): hide gant

---
 application/frontend/src/pages/report/Report.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/application/frontend/src/pages/report/Report.tsx b/application/frontend/src/pages/report/Report.tsx
index 6234b1c..2f74b02 100644
--- a/application/frontend/src/pages/report/Report.tsx
+++ b/application/frontend/src/pages/report/Report.tsx
@@ -123,7 +123,6 @@ export const ReportPage: React.FC = () => {
           variant="standard"
           placeholder={t("searchPlaceholder")}
         />
-        <ViewModeToggle viewMode={viewMode} onToggleViewMode={toggleViewMode} />
       </SearchBarContainer>
       <ReportListContainer>
         <ReportsTable reports={filteredReports} />

From 8d5e9ef91ba3b980bdc3d3f5b8f03c8685037364 Mon Sep 17 00:00:00 2001
From: Anastasiya <melichkaowen1@gmail.com>
Date: Fri, 6 Sep 2024 16:18:24 +0300
Subject: [PATCH 08/26] fix(frontend): change routes

---
 .../src/components/ProfileCard/ProfileCard.tsx  |  2 +-
 .../src/components/ProjectCard/ProjectCard.tsx  | 17 ++++++++++++++---
 .../frontend/src/pages/report/Report.tsx        |  8 ++++++--
 application/frontend/src/routes/routes.tsx      |  4 ++--
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/application/frontend/src/components/ProfileCard/ProfileCard.tsx b/application/frontend/src/components/ProfileCard/ProfileCard.tsx
index f9a2019..bf66dbf 100644
--- a/application/frontend/src/components/ProfileCard/ProfileCard.tsx
+++ b/application/frontend/src/components/ProfileCard/ProfileCard.tsx
@@ -35,7 +35,7 @@ export const ProfileCard: React.FC<ProfileCardProps> = ({ profile }) => {
   const navigate = useNavigate()
 
   const handleCardClick = () => {
-    navigate("/projects")
+    navigate("${id}/projects")
   }
 
   return (
diff --git a/application/frontend/src/components/ProjectCard/ProjectCard.tsx b/application/frontend/src/components/ProjectCard/ProjectCard.tsx
index 29adce0..e03fc5e 100644
--- a/application/frontend/src/components/ProjectCard/ProjectCard.tsx
+++ b/application/frontend/src/components/ProjectCard/ProjectCard.tsx
@@ -1,4 +1,5 @@
 import React from "react"
+import { useNavigate } from "react-router-dom"
 
 import ArrowForwardIcon from "@mui/icons-material/ArrowForward"
 
@@ -13,13 +14,23 @@ interface ProjectCardProps {
 }
 
 export const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
+  const { id, name, avatar } = project
+  const navigate = useNavigate()
+
+  const handleCardClick = () => {
+    const userId = 1
+    navigate(`/${userId}/projects/${id}/reports`)
+  }
+
   return (
-    <CardContainer>
-      <Avatar src={project.avatar} alt={project.name} />
-      <ProjectName>{project.name}</ProjectName>
+    <CardContainer onClick={handleCardClick}>
+      <Avatar src={avatar} alt={name} />
+      <ProjectName>{name}</ProjectName>
       <ArrowIcon>
         <ArrowForwardIcon />
       </ArrowIcon>
     </CardContainer>
   )
 }
+
+export default ProjectCard
diff --git a/application/frontend/src/pages/report/Report.tsx b/application/frontend/src/pages/report/Report.tsx
index 2f74b02..505ebc7 100644
--- a/application/frontend/src/pages/report/Report.tsx
+++ b/application/frontend/src/pages/report/Report.tsx
@@ -8,6 +8,7 @@ import { ViewModeToggle } from "~components/ViewModeToggle"
 
 import React, { useState } from "react"
 import { useTranslation } from "react-i18next"
+import { useParams } from "react-router-dom"
 
 import HomeIcon from "@mui/icons-material/Home"
 
@@ -70,6 +71,7 @@ const reports: Report[] = [
 
 export const ReportPage: React.FC = () => {
   const { t } = useTranslation()
+  const { userId, projectId } = useParams<{ userId: string; projectId: string }>()
   const [searchQuery, setSearchQuery] = useState<string>("")
   const [viewMode, setViewMode] = useState<"list" | "timeline">("list")
   const [isOverlayOpen, setOverlayOpen] = useState<boolean>(false)
@@ -102,10 +104,12 @@ export const ReportPage: React.FC = () => {
     <Container>
       <NavButtonContainer>
         <StyledBreadcrumbs aria-label="breadcrumb">
-          <NavButton to="/" icon={<HomeIcon fontSize="small" />}>
+          <NavButton to="/${userId}/projects" icon={<HomeIcon fontSize="small" />}>
             {t("projectList")}
           </NavButton>
-          <NavButton to="/projects/1">{t("projectName", { name: "Название проекта" })}</NavButton>
+          <NavButton to="/${userId}/projects/${projectId}">
+            {t("projectName", { name: "Название проекта" })}
+          </NavButton>
         </StyledBreadcrumbs>
       </NavButtonContainer>
       <HeaderSection>
diff --git a/application/frontend/src/routes/routes.tsx b/application/frontend/src/routes/routes.tsx
index a850da0..761b76e 100644
--- a/application/frontend/src/routes/routes.tsx
+++ b/application/frontend/src/routes/routes.tsx
@@ -12,8 +12,8 @@ const routes: RouteObject[] = [
     element: <Layout />,
     children: [
       { index: true, element: <Home /> },
-      { path: "projects", element: <ProjectPage /> },
-      { path: "reports", element: <ReportPage /> },
+      { path: ":userId/projects", element: <ProjectPage /> },
+      { path: ":userId/projects/:projectId/reports", element: <ReportPage /> },
     ],
   },
   {

From 256d369d17caeadf383a8a0bac2326cb4449d7fc Mon Sep 17 00:00:00 2001
From: Anastasiya <melichkaowen1@gmail.com>
Date: Fri, 6 Sep 2024 16:31:56 +0300
Subject: [PATCH 09/26] feat(frontend): add component for final status

---
 .../CustomMenuItem/CustomMenuItem.styled.ts   |  0
 .../CustomMenuItem/CustomMenuItem.tsx         | 39 +++++++++++++++++++
 .../src/components/CustomMenuItem/index.ts    |  1 +
 3 files changed, 40 insertions(+)
 create mode 100644 application/frontend/src/components/CustomMenuItem/CustomMenuItem.styled.ts
 create mode 100644 application/frontend/src/components/CustomMenuItem/CustomMenuItem.tsx
 create mode 100644 application/frontend/src/components/CustomMenuItem/index.ts

diff --git a/application/frontend/src/components/CustomMenuItem/CustomMenuItem.styled.ts b/application/frontend/src/components/CustomMenuItem/CustomMenuItem.styled.ts
new file mode 100644
index 0000000..e69de29
diff --git a/application/frontend/src/components/CustomMenuItem/CustomMenuItem.tsx b/application/frontend/src/components/CustomMenuItem/CustomMenuItem.tsx
new file mode 100644
index 0000000..d181e39
--- /dev/null
+++ b/application/frontend/src/components/CustomMenuItem/CustomMenuItem.tsx
@@ -0,0 +1,39 @@
+import React from "react"
+
+import CircleIcon from "@mui/icons-material/Circle"
+import { ListItemIcon, ListItemText, MenuItem } from "@mui/material"
+
+interface CustomMenuItemProps {
+  status: string
+  children: React.ReactNode
+  value: string
+}
+
+const getColor = (status: string) => {
+  switch (status) {
+    case "Success":
+      return "rgba(46, 125, 50, 1)"
+    case "Error":
+      return "rgba(211, 47, 47, 1)"
+    case "Warning":
+      return "rgba(239, 108, 0, 1)"
+    default:
+      return ""
+  }
+}
+
+export const CustomMenuItem: React.FC<CustomMenuItemProps> = ({
+  status,
+  children,
+  value,
+  ...props
+}) => (
+  <MenuItem value={value} {...props}>
+    <ListItemIcon>
+      <CircleIcon style={{ color: getColor(status) }} />
+    </ListItemIcon>
+    <ListItemText primary={children} />
+  </MenuItem>
+)
+
+export default CustomMenuItem
diff --git a/application/frontend/src/components/CustomMenuItem/index.ts b/application/frontend/src/components/CustomMenuItem/index.ts
new file mode 100644
index 0000000..092bfad
--- /dev/null
+++ b/application/frontend/src/components/CustomMenuItem/index.ts
@@ -0,0 +1 @@
+export { CustomMenuItem } from "./CustomMenuItem"

From becfc0da844a1fa5d63acd54d14ea8fb46dc3198 Mon Sep 17 00:00:00 2001
From: Anastasiya <melichkaowen1@gmail.com>
Date: Fri, 6 Sep 2024 16:38:58 +0300
Subject: [PATCH 10/26] feat(frontend): use new component for selector

---
 .../src/components/ReportOverlay/ReportOverlay.tsx  | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/application/frontend/src/components/ReportOverlay/ReportOverlay.tsx b/application/frontend/src/components/ReportOverlay/ReportOverlay.tsx
index d71463f..16703a7 100644
--- a/application/frontend/src/components/ReportOverlay/ReportOverlay.tsx
+++ b/application/frontend/src/components/ReportOverlay/ReportOverlay.tsx
@@ -1,4 +1,5 @@
 import dayjs from "dayjs"
+import { CustomMenuItem } from "~components/CustomMenuItem"
 
 import React, { useState } from "react"
 import { useTranslation } from "react-i18next"
@@ -77,9 +78,15 @@ export const ReportOverlay: React.FC<ReportOverlayProps> = ({ isOpen, onClose })
                   <FormControl fullWidth variant="outlined">
                     <InputLabel>{t("reportOverlay.trafficLightColor")}</InputLabel>
                     <Select label={t("reportOverlay.trafficLightColor")} defaultValue="">
-                      <MenuItem value="Success">{t("reportOverlay.success")}</MenuItem>
-                      <MenuItem value="Error">{t("reportOverlay.error")}</MenuItem>
-                      <MenuItem value="Warning">{t("reportOverlay.warning")}</MenuItem>
+                      <CustomMenuItem status="Error" value="Error">
+                        {t("reportOverlay.error")}
+                      </CustomMenuItem>
+                      <CustomMenuItem status="Warning" value="Warning">
+                        {t("reportOverlay.warning")}
+                      </CustomMenuItem>
+                      <CustomMenuItem status="Success" value="Success">
+                        {t("reportOverlay.success")}
+                      </CustomMenuItem>
                     </Select>
                   </FormControl>
                 </Grid>

From f1c1b2a0f063236de0e262a96311d1d09303e38e Mon Sep 17 00:00:00 2001
From: Anastasiya <melichkaowen1@gmail.com>
Date: Fri, 6 Sep 2024 16:41:05 +0300
Subject: [PATCH 11/26] fix(frontend): change translate

---
 application/frontend/public/locales/translation/ru.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/application/frontend/public/locales/translation/ru.json b/application/frontend/public/locales/translation/ru.json
index 485b749..ddd93f5 100644
--- a/application/frontend/public/locales/translation/ru.json
+++ b/application/frontend/public/locales/translation/ru.json
@@ -16,9 +16,9 @@
   "searchPlaceholder": "Поиск",
    "createReport": "Создать отчет",
     "status": {
-    "Error": "Ошибка",
+    "Error": "Требует внимания",
     "Success": "Успех",
-    "Warning": "Предупреждение"
+    "Warning": "Обратить внимание"
   },
   "goalsTable": {
     "title": "Название",
@@ -37,8 +37,8 @@
     "reportName": "Название отчета",
     "trafficLightColor": "Итоговый цвет светофора",
     "success": "Успех",
-    "error": "Ошибка",
-    "warning": "Предупреждение",
+    "error": "Требует внимания",
+    "warning": "Обратить внимание",
     "startDate": "Дата начала",
     "endDate": "Дата окончания",
     "colors": "Цвета светофора",

From 056a19dd6fd688a39f4ed88c34bc2ff0c52901cb Mon Sep 17 00:00:00 2001
From: Anastasiya <melichkaowen1@gmail.com>
Date: Fri, 6 Sep 2024 16:54:57 +0300
Subject: [PATCH 12/26] feat(frontend): add sort

---
 .../components/ReportsTable/ReportsTable.tsx  | 36 ++++++++++++++++---
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/application/frontend/src/components/ReportsTable/ReportsTable.tsx b/application/frontend/src/components/ReportsTable/ReportsTable.tsx
index 6a9c0f9..16636e9 100644
--- a/application/frontend/src/components/ReportsTable/ReportsTable.tsx
+++ b/application/frontend/src/components/ReportsTable/ReportsTable.tsx
@@ -1,8 +1,10 @@
 import dayjs from "dayjs"
 
-import React from "react"
+import React, { useState } from "react"
 import { useTranslation } from "react-i18next"
 
+import ArrowDropDownOutlinedIcon from "@mui/icons-material/ArrowDropDownOutlined"
+import ArrowDropUpOutlinedIcon from "@mui/icons-material/ArrowDropUpOutlined"
 import { Table, TableBody, TableHead } from "@mui/material"
 
 import StatusChipComponent from "../StatusChip/StatusChip"
@@ -31,9 +33,23 @@ interface ReportsTableProps {
   reports: Report[]
 }
 
-export const ReportsTable: React.FC<ReportsTableProps> = ({ reports }) => {
+const ReportsTable: React.FC<ReportsTableProps> = ({ reports }) => {
   const { t } = useTranslation()
 
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc")
+  const [sortedReports, setSortedReports] = useState<Report[]>(reports)
+
+  const handleSort = () => {
+    const sorted = [...reports].sort((a, b) => {
+      const aDate = dayjs(a.endDate).valueOf()
+      const bDate = dayjs(b.endDate).valueOf()
+      return sortOrder === "asc" ? aDate - bDate : bDate - aDate
+    })
+
+    setSortedReports(sorted)
+    setSortOrder(sortOrder === "asc" ? "desc" : "asc")
+  }
+
   return (
     <CustomTableContainer>
       <Table>
@@ -42,12 +58,24 @@ export const ReportsTable: React.FC<ReportsTableProps> = ({ reports }) => {
             <StyledTableCell>{t("reportsTable.name")}</StyledTableCell>
             <StyledTableCell>{t("reportsTable.status")}</StyledTableCell>
             <StyledTableCell>{t("reportsTable.author")}</StyledTableCell>
-            <StyledTableCell>{t("reportsTable.startDate")}</StyledTableCell>
+            <StyledTableCell
+              onClick={handleSort}
+              style={{ cursor: "pointer", display: "flex", alignItems: "center" }}
+            >
+              {t("reportsTable.startDate")}
+              {sortOrder === "asc" ? (
+                <ArrowDropUpOutlinedIcon style={{ marginLeft: "8px" }} />
+              ) : sortOrder === "desc" ? (
+                <ArrowDropDownOutlinedIcon style={{ marginLeft: "8px" }} />
+              ) : (
+                <ArrowDropUpOutlinedIcon style={{ marginLeft: "8px", opacity: 0.5 }} />
+              )}
+            </StyledTableCell>
             <StyledTableCell>{t("reportsTable.endDate")}</StyledTableCell>
           </TableHeaderRow>
         </TableHead>
         <TableBody>
-          {reports.map((report) => (
+          {sortedReports.map((report) => (
             <StyledTableRow key={report.id}>
               <StyledTableCell>
                 <ProjectName>{report.name}</ProjectName>

From f16b7510b8ca39765a95d4610ac9c04511406212 Mon Sep 17 00:00:00 2001
From: Anastasiya <melichkaowen1@gmail.com>
Date: Fri, 6 Sep 2024 17:11:15 +0300
Subject: [PATCH 13/26] feat(frontend): add goals delete button

---
 .../components/GoalsTable/GoalsTable.styled.ts | 18 ++++++++++++++++++
 .../src/components/GoalsTable/GoalsTable.tsx   | 17 +++++++++++++++--
 .../components/ReportOverlay/ReportOverlay.tsx | 10 +++++++++-
 3 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/application/frontend/src/components/GoalsTable/GoalsTable.styled.ts b/application/frontend/src/components/GoalsTable/GoalsTable.styled.ts
index 92b331a..8014697 100644
--- a/application/frontend/src/components/GoalsTable/GoalsTable.styled.ts
+++ b/application/frontend/src/components/GoalsTable/GoalsTable.styled.ts
@@ -16,6 +16,24 @@ export const StyledTable = styled(Table)`
 export const StyledTableCell = styled(TableCell)`
   padding: 8px;
   border: none;
+
+  &:first-of-type {
+    width: 200px;
+  }
+
+  &:nth-of-type(2) {
+    width: 150px;
+  }
+
+  &:nth-of-type(3) {
+    width: 300px;
+  }
+
+  &:last-of-type {
+    width: 48px;
+    padding: 0;
+    text-align: center;
+  }
 `
 
 export const StyledTableRow = styled(TableRow)`
diff --git a/application/frontend/src/components/GoalsTable/GoalsTable.tsx b/application/frontend/src/components/GoalsTable/GoalsTable.tsx
index 9441ca8..7dc3f2d 100644
--- a/application/frontend/src/components/GoalsTable/GoalsTable.tsx
+++ b/application/frontend/src/components/GoalsTable/GoalsTable.tsx
@@ -1,7 +1,8 @@
 import React from "react"
 import { useTranslation } from "react-i18next"
 
-import { TableBody, TableHead, TableRow } from "@mui/material"
+import DeleteIcon from "@mui/icons-material/Delete"
+import { IconButton, TableBody, TableHead, TableRow } from "@mui/material"
 
 import { StatusSelector } from "../StatusSelector"
 import {
@@ -21,9 +22,10 @@ interface Goal {
 interface GoalsTableProps {
   goals: Goal[]
   onGoalChange: (index: number, field: keyof Goal, value: string) => void
+  onDeleteGoal: (index: number) => void
 }
 
-export const GoalsTable: React.FC<GoalsTableProps> = ({ goals, onGoalChange }) => {
+export const GoalsTable: React.FC<GoalsTableProps> = ({ goals, onGoalChange, onDeleteGoal }) => {
   const { t } = useTranslation()
 
   return (
@@ -34,6 +36,7 @@ export const GoalsTable: React.FC<GoalsTableProps> = ({ goals, onGoalChange }) =
             <StyledTableCell>{t("goalsTable.title")}</StyledTableCell>
             <StyledTableCell>{t("goalsTable.status")}</StyledTableCell>
             <StyledTableCell>{t("goalsTable.description")}</StyledTableCell>
+            <StyledTableCell />
           </TableRow>
         </TableHead>
         <TableBody>
@@ -63,6 +66,16 @@ export const GoalsTable: React.FC<GoalsTableProps> = ({ goals, onGoalChange }) =
                   variant="outlined"
                 />
               </StyledTableCell>
+              <StyledTableCell>
+                <IconButton
+                  color="error"
+                  onClick={() => onDeleteGoal(index)}
+                  aria-label={t("goalsTable.delete")}
+                  style={{ padding: 8 }}
+                >
+                  <DeleteIcon />
+                </IconButton>
+              </StyledTableCell>
             </StyledTableRow>
           ))}
         </TableBody>
diff --git a/application/frontend/src/components/ReportOverlay/ReportOverlay.tsx b/application/frontend/src/components/ReportOverlay/ReportOverlay.tsx
index 16703a7..fce90a7 100644
--- a/application/frontend/src/components/ReportOverlay/ReportOverlay.tsx
+++ b/application/frontend/src/components/ReportOverlay/ReportOverlay.tsx
@@ -60,6 +60,10 @@ export const ReportOverlay: React.FC<ReportOverlayProps> = ({ isOpen, onClose })
     setGoals(updatedGoals)
   }
 
+  const handleDeleteGoal = (index: number) => {
+    setGoals(goals.filter((_, i) => i !== index))
+  }
+
   return (
     <>
       <Backdrop isOpen={isOpen} />
@@ -200,7 +204,11 @@ export const ReportOverlay: React.FC<ReportOverlayProps> = ({ isOpen, onClose })
                       </Button>
                     </Grid>
                     <Grid item xs={12}>
-                      <GoalsTable goals={goals} onGoalChange={handleGoalChange} />
+                      <GoalsTable
+                        goals={goals}
+                        onGoalChange={handleGoalChange}
+                        onDeleteGoal={handleDeleteGoal}
+                      />
                     </Grid>
                   </>
                 )}

From cee49ad7f9cc3519c6350efb4cc97cd17f7d9602 Mon Sep 17 00:00:00 2001
From: Anastasiya <melichkaowen1@gmail.com>
Date: Tue, 10 Sep 2024 15:16:19 +0300
Subject: [PATCH 14/26] feat(frontend): add name yo header

---
 application/frontend/src/App.tsx              |  9 +++--
 .../frontend/src/components/Header/Header.tsx |  8 ++++-
 .../components/ProfileCard/ProfileCard.tsx    |  6 ++--
 .../frontend/src/context/UserContext.tsx      | 34 +++++++++++++++++++
 application/frontend/src/pages/Home/Home.tsx  | 13 +++++--
 5 files changed, 62 insertions(+), 8 deletions(-)
 create mode 100644 application/frontend/src/context/UserContext.tsx

diff --git a/application/frontend/src/App.tsx b/application/frontend/src/App.tsx
index e96d378..37c5c93 100644
--- a/application/frontend/src/App.tsx
+++ b/application/frontend/src/App.tsx
@@ -7,13 +7,16 @@ import "@fontsource/roboto/500.css"
 import "@fontsource/roboto/700.css"
 
 import { CONFIG } from "./configs"
+import { UserProvider } from "./context/UserContext"
 import { AppRouter } from "./routes"
 
 function App() {
   return (
-    <BrowserRouter basename={CONFIG.basename}>
-      <AppRouter />
-    </BrowserRouter>
+    <UserProvider>
+      <BrowserRouter basename={CONFIG.basename}>
+        <AppRouter />
+      </BrowserRouter>
+    </UserProvider>
   )
 }
 
diff --git a/application/frontend/src/components/Header/Header.tsx b/application/frontend/src/components/Header/Header.tsx
index 8f65dbf..65248ea 100644
--- a/application/frontend/src/components/Header/Header.tsx
+++ b/application/frontend/src/components/Header/Header.tsx
@@ -1,6 +1,6 @@
+import { useUser } from "context/UserContext"
 import { UserController } from "~api/controllers/UserController"
 import { useTheme } from "~components/Theme"
-import { ThemeEnum } from "~types/theme/enum"
 
 import React, { useEffect } from "react"
 import { useTranslation } from "react-i18next"
@@ -23,6 +23,7 @@ export const Header: React.FC = () => {
   const { theme, change } = useTheme()
   const { t, i18n } = useTranslation()
   const navigate = useNavigate()
+  const { selectedUser } = useUser()
 
   useEffect(() => {
     UserController.get()
@@ -55,6 +56,11 @@ export const Header: React.FC = () => {
       </LeftSection>
 
       <RightSection>
+        {selectedUser && (
+          <Typography variant="subtitle1" sx={{ marginRight: "16px" }}>
+            {selectedUser.name}
+          </Typography>
+        )}
         <IconButtons>
           <Tooltip title={t("profile")}>
             <IconButton
diff --git a/application/frontend/src/components/ProfileCard/ProfileCard.tsx b/application/frontend/src/components/ProfileCard/ProfileCard.tsx
index bf66dbf..a99a5da 100644
--- a/application/frontend/src/components/ProfileCard/ProfileCard.tsx
+++ b/application/frontend/src/components/ProfileCard/ProfileCard.tsx
@@ -26,16 +26,18 @@ interface ProfileCardProps {
     name: string
     avatar?: string
   }
+  onClick?: () => void
 }
 
-export const ProfileCard: React.FC<ProfileCardProps> = ({ profile }) => {
+export const ProfileCard: React.FC<ProfileCardProps> = ({ profile, onClick }) => {
   const { id, name, avatar } = profile
   const avatarLetter = name.charAt(0).toUpperCase()
   const avatarColor = getAvatarColor(id)
   const navigate = useNavigate()
 
   const handleCardClick = () => {
-    navigate("${id}/projects")
+    onClick?.()
+    navigate(`${id}/projects`)
   }
 
   return (
diff --git a/application/frontend/src/context/UserContext.tsx b/application/frontend/src/context/UserContext.tsx
new file mode 100644
index 0000000..42fe19f
--- /dev/null
+++ b/application/frontend/src/context/UserContext.tsx
@@ -0,0 +1,34 @@
+import React, { createContext, useContext, useState } from "react"
+
+type User = {
+  id: number
+  name: string
+  avatar: string
+} | null
+
+type UserContextType = {
+  selectedUser: User
+  selectUser: (user: User) => void
+}
+
+const UserContext = createContext<UserContextType | undefined>(undefined)
+
+export const UserProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [selectedUser, setSelectedUser] = useState<User>(null)
+
+  const selectUser = (user: User) => {
+    setSelectedUser(user)
+  }
+
+  return (
+    <UserContext.Provider value={{ selectedUser, selectUser }}>{children}</UserContext.Provider>
+  )
+}
+
+export const useUser = () => {
+  const context = useContext(UserContext)
+  if (!context) {
+    throw new Error("useUser must be used within a UserProvider")
+  }
+  return context
+}
diff --git a/application/frontend/src/pages/Home/Home.tsx b/application/frontend/src/pages/Home/Home.tsx
index 378ab05..722138c 100644
--- a/application/frontend/src/pages/Home/Home.tsx
+++ b/application/frontend/src/pages/Home/Home.tsx
@@ -1,3 +1,4 @@
+import { useUser } from "context/UserContext"
 import { ProfileCard } from "~components/ProfileCard"
 import { SearchBar } from "~components/SearchBar"
 
@@ -20,6 +21,7 @@ import {
 export const Home: React.FC = () => {
   const [searchQuery, setSearchQuery] = useState<string>("")
   const { t } = useTranslation()
+  const { selectUser } = useUser()
 
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchQuery(e.target.value)
@@ -39,10 +41,13 @@ export const Home: React.FC = () => {
     profile.name.toLowerCase().includes(searchQuery.toLowerCase()),
   )
 
+  const handleProfileClick = (profile: { id: number; name: string; avatar: string }) => {
+    selectUser(profile)
+  }
+
   return (
     <RootContainer>
       <ImageContainer />
-
       <ContentContainer>
         <HeaderSection>
           <TitleSection>
@@ -62,7 +67,11 @@ export const Home: React.FC = () => {
 
         <Box display="flex" flexDirection="column" gap={2}>
           {filteredProfiles.map((profile) => (
-            <ProfileCard key={profile.id} profile={profile} />
+            <ProfileCard
+              key={profile.id}
+              profile={profile}
+              onClick={() => handleProfileClick(profile)}
+            />
           ))}
         </Box>
       </ContentContainer>

From 8e76f8289622f22338007721ae441b07b75180d8 Mon Sep 17 00:00:00 2001
From: Anastasiya <melichkaowen1@gmail.com>
Date: Tue, 10 Sep 2024 15:16:47 +0300
Subject: [PATCH 15/26] feat(frontend): remove profile button

---
 .../frontend/src/components/Header/Header.tsx     | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/application/frontend/src/components/Header/Header.tsx b/application/frontend/src/components/Header/Header.tsx
index 65248ea..a2ee89d 100644
--- a/application/frontend/src/components/Header/Header.tsx
+++ b/application/frontend/src/components/Header/Header.tsx
@@ -61,20 +61,7 @@ export const Header: React.FC = () => {
             {selectedUser.name}
           </Typography>
         )}
-        <IconButtons>
-          <Tooltip title={t("profile")}>
-            <IconButton
-              sx={{
-                backgroundColor: "rgba(238, 238, 238, 1)",
-                borderRadius: "6px",
-                width: "28px",
-                height: "28px",
-              }}
-            >
-              <AccountCircleOutlined />
-            </IconButton>
-          </Tooltip>
-        </IconButtons>
+        <IconButtons></IconButtons>
 
         <Switches>
           <Tooltip title={t("changeLanguage")}>

From 5f204f79e05ad3080a4255b15bb93d3e7f5e1cc4 Mon Sep 17 00:00:00 2001
From: Anastasiya <melichkaowen1@gmail.com>
Date: Wed, 11 Sep 2024 15:34:16 +0300
Subject: [PATCH 16/26] feat(frontend): add modal for select user

---
 .../frontend/src/components/Header/Header.tsx | 54 +++++++++++++------
 .../UserSelectModal/UserSelectModal.tsx       | 51 ++++++++++++++++++
 .../src/components/UserSelectModal/index.ts   |  1 +
 .../frontend/src/context/UserContext.tsx      | 31 ++++++-----
 4 files changed, 106 insertions(+), 31 deletions(-)
 create mode 100644 application/frontend/src/components/UserSelectModal/UserSelectModal.tsx
 create mode 100644 application/frontend/src/components/UserSelectModal/index.ts

diff --git a/application/frontend/src/components/Header/Header.tsx b/application/frontend/src/components/Header/Header.tsx
index a2ee89d..2a09c0f 100644
--- a/application/frontend/src/components/Header/Header.tsx
+++ b/application/frontend/src/components/Header/Header.tsx
@@ -1,34 +1,45 @@
 import { useUser } from "context/UserContext"
 import { UserController } from "~api/controllers/UserController"
 import { useTheme } from "~components/Theme"
+import UserSelectModal from "~components/UserSelectModal/UserSelectModal"
 
-import React, { useEffect } from "react"
+import React, { useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"
 
-import { AccountCircleOutlined, MoreVertOutlined, NotificationsOutlined } from "@mui/icons-material"
-import { Button, IconButton, Switch, Tooltip, Typography } from "@mui/material"
+import { Button, Switch, Tooltip, Typography } from "@mui/material"
 
-import {
-  Container,
-  IconButtons,
-  LeftSection,
-  Logo,
-  NavButtons,
-  RightSection,
-  Switches,
-} from "./Header.styled"
+import { Container, LeftSection, Logo, NavButtons, RightSection, Switches } from "./Header.styled"
 
 export const Header: React.FC = () => {
-  const { theme, change } = useTheme()
+  const { theme } = useTheme()
   const { t, i18n } = useTranslation()
   const navigate = useNavigate()
-  const { selectedUser } = useUser()
+  const { selectedUser, users } = useUser()
+
+  const [isModalOpen, setModalOpen] = useState(false)
 
   useEffect(() => {
     UserController.get()
   }, [])
 
+  const handleUserClick = () => {
+    setModalOpen(true)
+  }
+
+  const handleCloseModal = () => {
+    setModalOpen(false)
+  }
+
+  const handleSelectProfile = (profileId: number) => {
+    console.log("Selected Profile ID:", profileId)
+    setModalOpen(false)
+  }
+
+  useEffect(() => {
+    console.log("Loaded users:", users)
+  }, [users])
+
   return (
     <Container>
       <LeftSection>
@@ -57,12 +68,14 @@ export const Header: React.FC = () => {
 
       <RightSection>
         {selectedUser && (
-          <Typography variant="subtitle1" sx={{ marginRight: "16px" }}>
+          <Typography
+            variant="subtitle1"
+            sx={{ marginRight: "16px", cursor: "pointer" }}
+            onClick={handleUserClick}
+          >
             {selectedUser.name}
           </Typography>
         )}
-        <IconButtons></IconButtons>
-
         <Switches>
           <Tooltip title={t("changeLanguage")}>
             <Switch
@@ -73,6 +86,13 @@ export const Header: React.FC = () => {
           </Tooltip>
         </Switches>
       </RightSection>
+
+      <UserSelectModal
+        open={isModalOpen}
+        onClose={handleCloseModal}
+        profiles={users}
+        onSelectProfile={handleSelectProfile}
+      />
     </Container>
   )
 }
diff --git a/application/frontend/src/components/UserSelectModal/UserSelectModal.tsx b/application/frontend/src/components/UserSelectModal/UserSelectModal.tsx
new file mode 100644
index 0000000..88f6d63
--- /dev/null
+++ b/application/frontend/src/components/UserSelectModal/UserSelectModal.tsx
@@ -0,0 +1,51 @@
+import { User } from "context/UserContext"
+import { ProfileCard } from "~components/ProfileCard"
+
+import React from "react"
+
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Typography,
+} from "@mui/material"
+
+interface UserSelectModalProps {
+  open: boolean
+  onClose: () => void
+  profiles: User[]
+  onSelectProfile: (profileId: number) => void
+}
+
+const UserSelectModal: React.FC<UserSelectModalProps> = ({
+  open,
+  onClose,
+  profiles,
+  onSelectProfile,
+}) => {
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>Select User</DialogTitle>
+      <DialogContent>
+        {profiles.length > 0 ? (
+          profiles.map((profile) => (
+            <ProfileCard
+              key={profile.id}
+              profile={profile}
+              onClick={() => onSelectProfile(profile.id)}
+            />
+          ))
+        ) : (
+          <Typography>No users available</Typography>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Close</Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+export default UserSelectModal
diff --git a/application/frontend/src/components/UserSelectModal/index.ts b/application/frontend/src/components/UserSelectModal/index.ts
new file mode 100644
index 0000000..add7e10
--- /dev/null
+++ b/application/frontend/src/components/UserSelectModal/index.ts
@@ -0,0 +1 @@
+export { UserSelectModal } from "./UserSelectModal"
diff --git a/application/frontend/src/context/UserContext.tsx b/application/frontend/src/context/UserContext.tsx
index 42fe19f..bc02edb 100644
--- a/application/frontend/src/context/UserContext.tsx
+++ b/application/frontend/src/context/UserContext.tsx
@@ -1,33 +1,36 @@
-import React, { createContext, useContext, useState } from "react"
+import React, { ReactNode, createContext, useState } from "react"
 
-type User = {
+export interface User {
   id: number
   name: string
-  avatar: string
-} | null
+  avatar?: string
+}
 
-type UserContextType = {
-  selectedUser: User
+interface UserContextType {
+  selectedUser: User | null
   selectUser: (user: User) => void
+  users: User[]
+  setUsers: React.Dispatch<React.SetStateAction<User[]>>
 }
 
 const UserContext = createContext<UserContextType | undefined>(undefined)
 
-export const UserProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [selectedUser, setSelectedUser] = useState<User>(null)
+export const UserProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [selectedUser, setSelectedUser] = useState<User | null>(null)
+  const [users, setUsers] = useState<User[]>([])
 
-  const selectUser = (user: User) => {
-    setSelectedUser(user)
-  }
+  const selectUser = (user: User) => setSelectedUser(user)
 
   return (
-    <UserContext.Provider value={{ selectedUser, selectUser }}>{children}</UserContext.Provider>
+    <UserContext.Provider value={{ selectedUser, selectUser, users, setUsers }}>
+      {children}
+    </UserContext.Provider>
   )
 }
 
 export const useUser = () => {
-  const context = useContext(UserContext)
-  if (!context) {
+  const context = React.useContext(UserContext)
+  if (context === undefined) {
     throw new Error("useUser must be used within a UserProvider")
   }
   return context

From 94b96825a42a4101b19b18e0dffc331e2ac1630e Mon Sep 17 00:00:00 2001
From: Anastasiya <melichkaowen1@gmail.com>
Date: Thu, 12 Sep 2024 14:48:26 +0300
Subject: [PATCH 17/26] feat(frontend): add alternative overlay

---
 .../ReportOverlay/ReportOverlay.tsx           | 82 +++++++++++++++++--
 .../components/ReportsTable/ReportsTable.tsx  | 44 +++++-----
 .../frontend/src/pages/report/Report.tsx      | 25 ++++--
 3 files changed, 110 insertions(+), 41 deletions(-)

diff --git a/application/frontend/src/components/ReportOverlay/ReportOverlay.tsx b/application/frontend/src/components/ReportOverlay/ReportOverlay.tsx
index fce90a7..42ca152 100644
--- a/application/frontend/src/components/ReportOverlay/ReportOverlay.tsx
+++ b/application/frontend/src/components/ReportOverlay/ReportOverlay.tsx
@@ -1,7 +1,7 @@
 import dayjs from "dayjs"
 import { CustomMenuItem } from "~components/CustomMenuItem"
 
-import React, { useState } from "react"
+import React, { useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
 
 import {
@@ -31,6 +31,21 @@ import {
 interface ReportOverlayProps {
   isOpen: boolean
   onClose: () => void
+  report: Report | null
+  isEditMode: boolean
+}
+
+export interface Report {
+  id: number
+  name: string
+  status: "Error" | "Success" | "In Progress" | string
+  author: string
+  authorAvatar: string
+  startDate: string
+  endDate: string
+  goals?: Goal[]
+  onVacation?: string
+  reporterOnVacation?: string
 }
 
 interface Goal {
@@ -39,12 +54,33 @@ interface Goal {
   description: string
 }
 
-export const ReportOverlay: React.FC<ReportOverlayProps> = ({ isOpen, onClose }) => {
+export const ReportOverlay: React.FC<ReportOverlayProps> = ({
+  isOpen,
+  onClose,
+  report,
+  isEditMode,
+}) => {
   const { t } = useTranslation()
   const [tab, setTab] = useState<number>(0)
   const [onVacation, setOnVacation] = useState<string>("")
   const [reporterOnVacation, setReporterOnVacation] = useState<string>("")
   const [goals, setGoals] = useState<Goal[]>([])
+  const [reportName, setReportName] = useState<string>("")
+  const [trafficLightColor, setTrafficLightColor] = useState<string>("")
+  const [startDate, setStartDate] = useState<string>(dayjs().format("YYYY-MM-DDTHH:mm"))
+  const [endDate, setEndDate] = useState<string>(dayjs().add(1, "day").format("YYYY-MM-DDTHH:mm"))
+
+  useEffect(() => {
+    if (isEditMode && report) {
+      setReportName(report.name || "")
+      setTrafficLightColor(report.status || "")
+      setStartDate(dayjs(report.startDate).format("YYYY-MM-DDTHH:mm"))
+      setEndDate(dayjs(report.endDate).format("YYYY-MM-DDTHH:mm"))
+      setGoals(report.goals || [])
+      setOnVacation(report.onVacation || "")
+      setReporterOnVacation(report.reporterOnVacation || "")
+    }
+  }, [isEditMode, report])
 
   const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
     setTab(newValue)
@@ -64,24 +100,50 @@ export const ReportOverlay: React.FC<ReportOverlayProps> = ({ isOpen, onClose })
     setGoals(goals.filter((_, i) => i !== index))
   }
 
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    console.log({
+      reportName,
+      trafficLightColor,
+      startDate,
+      endDate,
+      onVacation,
+      reporterOnVacation,
+      goals,
+    })
+    onClose()
+  }
+
   return (
     <>
       <Backdrop isOpen={isOpen} />
       <CreateReportOverlay isOpen={isOpen}>
         <OverlayContainer>
           <OverlayHeader>
-            <Typography variant="h6">{t("reportOverlay.createReport")}</Typography>
+            <Typography variant="h6">
+              {isEditMode ? t("reportOverlay.editReport") : t("reportOverlay.createReport")}
+            </Typography>
           </OverlayHeader>
-          <form>
+          <form onSubmit={handleSubmit}>
             <Grid container spacing={2}>
               <Grid item xs={12} container spacing={2}>
                 <Grid item xs={6}>
-                  <TextField fullWidth label={t("reportOverlay.reportName")} variant="outlined" />
+                  <TextField
+                    fullWidth
+                    label={t("reportOverlay.reportName")}
+                    variant="outlined"
+                    value={reportName}
+                    onChange={(e) => setReportName(e.target.value)}
+                  />
                 </Grid>
                 <Grid item xs={6}>
                   <FormControl fullWidth variant="outlined">
                     <InputLabel>{t("reportOverlay.trafficLightColor")}</InputLabel>
-                    <Select label={t("reportOverlay.trafficLightColor")} defaultValue="">
+                    <Select
+                      label={t("reportOverlay.trafficLightColor")}
+                      value={trafficLightColor}
+                      onChange={(e) => setTrafficLightColor(e.target.value)}
+                    >
                       <CustomMenuItem status="Error" value="Error">
                         {t("reportOverlay.error")}
                       </CustomMenuItem>
@@ -106,7 +168,8 @@ export const ReportOverlay: React.FC<ReportOverlayProps> = ({ isOpen, onClose })
                       shrink: true,
                     }}
                     variant="outlined"
-                    defaultValue={dayjs().format("YYYY-MM-DDTHH:mm")}
+                    value={startDate}
+                    onChange={(e) => setStartDate(e.target.value)}
                   />
                 </Grid>
                 <Grid item xs={6}>
@@ -118,7 +181,8 @@ export const ReportOverlay: React.FC<ReportOverlayProps> = ({ isOpen, onClose })
                       shrink: true,
                     }}
                     variant="outlined"
-                    defaultValue={dayjs().add(1, "day").format("YYYY-MM-DDTHH:mm")}
+                    value={endDate}
+                    onChange={(e) => setEndDate(e.target.value)}
                   />
                 </Grid>
               </Grid>
@@ -217,7 +281,7 @@ export const ReportOverlay: React.FC<ReportOverlayProps> = ({ isOpen, onClose })
               <Grid item xs={12} container spacing={2} justifyContent="flex-end">
                 <ButtonContainer>
                   <Button variant="contained" color="primary" type="submit">
-                    {t("reportOverlay.submit")}
+                    {isEditMode ? t("reportOverlay.save") : t("reportOverlay.submit")}
                   </Button>
                   <Button
                     variant="outlined"
diff --git a/application/frontend/src/components/ReportsTable/ReportsTable.tsx b/application/frontend/src/components/ReportsTable/ReportsTable.tsx
index 16636e9..d748df8 100644
--- a/application/frontend/src/components/ReportsTable/ReportsTable.tsx
+++ b/application/frontend/src/components/ReportsTable/ReportsTable.tsx
@@ -1,6 +1,7 @@
 import dayjs from "dayjs"
+import { Report } from "~pages/report/Report"
 
-import React, { useState } from "react"
+import React, { useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
 
 import ArrowDropDownOutlinedIcon from "@mui/icons-material/ArrowDropDownOutlined"
@@ -19,35 +20,28 @@ import {
   TableHeaderRow,
 } from "./ReportsTable.styled"
 
-export interface Report {
-  id: number
-  name: string
-  status: "Error" | "Success" | "In Progress" | string
-  author: string
-  authorAvatar: string
-  startDate: string
-  endDate: string
-}
-
 interface ReportsTableProps {
   reports: Report[]
+  onReportClick: (report: Report) => void
 }
 
-const ReportsTable: React.FC<ReportsTableProps> = ({ reports }) => {
+const ReportsTable: React.FC<ReportsTableProps> = ({ reports, onReportClick }) => {
   const { t } = useTranslation()
-
   const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc")
   const [sortedReports, setSortedReports] = useState<Report[]>(reports)
 
-  const handleSort = () => {
-    const sorted = [...reports].sort((a, b) => {
-      const aDate = dayjs(a.endDate).valueOf()
-      const bDate = dayjs(b.endDate).valueOf()
-      return sortOrder === "asc" ? aDate - bDate : bDate - aDate
-    })
+  useEffect(() => {
+    setSortedReports(
+      [...reports].sort((a, b) => {
+        const aDate = dayjs(a.endDate).valueOf()
+        const bDate = dayjs(b.endDate).valueOf()
+        return sortOrder === "asc" ? aDate - bDate : bDate - aDate
+      }),
+    )
+  }, [reports, sortOrder])
 
-    setSortedReports(sorted)
-    setSortOrder(sortOrder === "asc" ? "desc" : "asc")
+  const handleSort = () => {
+    setSortOrder((prevOrder) => (prevOrder === "asc" ? "desc" : "asc"))
   }
 
   return (
@@ -65,10 +59,8 @@ const ReportsTable: React.FC<ReportsTableProps> = ({ reports }) => {
               {t("reportsTable.startDate")}
               {sortOrder === "asc" ? (
                 <ArrowDropUpOutlinedIcon style={{ marginLeft: "8px" }} />
-              ) : sortOrder === "desc" ? (
-                <ArrowDropDownOutlinedIcon style={{ marginLeft: "8px" }} />
               ) : (
-                <ArrowDropUpOutlinedIcon style={{ marginLeft: "8px", opacity: 0.5 }} />
+                <ArrowDropDownOutlinedIcon style={{ marginLeft: "8px" }} />
               )}
             </StyledTableCell>
             <StyledTableCell>{t("reportsTable.endDate")}</StyledTableCell>
@@ -78,7 +70,9 @@ const ReportsTable: React.FC<ReportsTableProps> = ({ reports }) => {
           {sortedReports.map((report) => (
             <StyledTableRow key={report.id}>
               <StyledTableCell>
-                <ProjectName>{report.name}</ProjectName>
+                <ProjectName onClick={() => onReportClick(report)} style={{ cursor: "pointer" }}>
+                  {report.name}
+                </ProjectName>
               </StyledTableCell>
               <StyledTableCell>
                 <StatusChipComponent status={report.status} />
diff --git a/application/frontend/src/pages/report/Report.tsx b/application/frontend/src/pages/report/Report.tsx
index 505ebc7..5f7a383 100644
--- a/application/frontend/src/pages/report/Report.tsx
+++ b/application/frontend/src/pages/report/Report.tsx
@@ -4,7 +4,6 @@ import { NavButton } from "~components/NavButton"
 import ReportOverlay from "~components/ReportOverlay/ReportOverlay"
 import ReportsTable from "~components/ReportsTable/ReportsTable"
 import { SearchBar } from "~components/SearchBar"
-import { ViewModeToggle } from "~components/ViewModeToggle"
 
 import React, { useState } from "react"
 import { useTranslation } from "react-i18next"
@@ -25,7 +24,7 @@ import {
 
 type ReportStage = "Initial" | "Onboarding" | "In progress" | "In review" | "In test"
 
-type Report = {
+export type Report = {
   id: number
   name: string
   status: string
@@ -59,7 +58,7 @@ const reports: Report[] = [
   },
   {
     id: 3,
-    name: "Report 3",
+    name: "aboba",
     status: "Warning",
     author: "Jane Smith",
     authorAvatar: "/path/to/avatar2.jpg",
@@ -75,6 +74,7 @@ export const ReportPage: React.FC = () => {
   const [searchQuery, setSearchQuery] = useState<string>("")
   const [viewMode, setViewMode] = useState<"list" | "timeline">("list")
   const [isOverlayOpen, setOverlayOpen] = useState<boolean>(false)
+  const [selectedReport, setSelectedReport] = useState<Report | null>(null)
 
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchQuery(e.target.value)
@@ -89,6 +89,7 @@ export const ReportPage: React.FC = () => {
   }
 
   const handleCreateReport = () => {
+    setSelectedReport(null)
     setOverlayOpen(true)
   }
 
@@ -96,6 +97,11 @@ export const ReportPage: React.FC = () => {
     setOverlayOpen(false)
   }
 
+  const handleReportClick = (report: Report) => {
+    setSelectedReport(report)
+    setOverlayOpen(true)
+  }
+
   const filteredReports = reports.filter((report) =>
     report.name.toLowerCase().includes(searchQuery.toLowerCase()),
   )
@@ -104,10 +110,10 @@ export const ReportPage: React.FC = () => {
     <Container>
       <NavButtonContainer>
         <StyledBreadcrumbs aria-label="breadcrumb">
-          <NavButton to="/${userId}/projects" icon={<HomeIcon fontSize="small" />}>
+          <NavButton to={`/${userId}/projects`} icon={<HomeIcon fontSize="small" />}>
             {t("projectList")}
           </NavButton>
-          <NavButton to="/${userId}/projects/${projectId}">
+          <NavButton to={`/${userId}/projects/${projectId}`}>
             {t("projectName", { name: "Название проекта" })}
           </NavButton>
         </StyledBreadcrumbs>
@@ -129,9 +135,14 @@ export const ReportPage: React.FC = () => {
         />
       </SearchBarContainer>
       <ReportListContainer>
-        <ReportsTable reports={filteredReports} />
+        <ReportsTable reports={filteredReports} onReportClick={handleReportClick} />
       </ReportListContainer>
-      <ReportOverlay isOpen={isOverlayOpen} onClose={closeOverlay} />
+      <ReportOverlay
+        isOpen={isOverlayOpen}
+        onClose={closeOverlay}
+        report={selectedReport}
+        isEditMode={!!selectedReport}
+      />
     </Container>
   )
 }

From 70c3e8df08fcc18f95032a8e51a37ab876dada28 Mon Sep 17 00:00:00 2001
From: Anastasiya <melichkaowen1@gmail.com>
Date: Thu, 12 Sep 2024 14:49:08 +0300
Subject: [PATCH 18/26] feat(frontend): add translate

---
 application/frontend/public/locales/translation/en.json | 4 +++-
 application/frontend/public/locales/translation/ru.json | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/application/frontend/public/locales/translation/en.json b/application/frontend/public/locales/translation/en.json
index 07d2d7c..0ebd646 100644
--- a/application/frontend/public/locales/translation/en.json
+++ b/application/frontend/public/locales/translation/en.json
@@ -51,7 +51,9 @@
     "goals": "Goals",
     "colorValue": "Value",
     "yes":"Yes",
-    "no":"No"
+    "no":"No",
+    "save":"Save",
+    "editReport":"Edit report"
   },
   "selectUser": "Select your user"
 }
diff --git a/application/frontend/public/locales/translation/ru.json b/application/frontend/public/locales/translation/ru.json
index ddd93f5..ab31430 100644
--- a/application/frontend/public/locales/translation/ru.json
+++ b/application/frontend/public/locales/translation/ru.json
@@ -51,7 +51,9 @@
     "goals": "Цели",
     "colorValue": "Текст",
     "yes":"Да",
-    "no":"Нет"
+    "no":"Нет",
+    "save":"Сохранить",
+    "editReport":"Редактировать отчет"
   },
   "selectUser": "Выберите своего пользователя"
 }

From 0038e616f1407d149fdc9afaa42decb71a74d34c Mon Sep 17 00:00:00 2001
From: Anastasiya <melichkaowen1@gmail.com>
Date: Thu, 12 Sep 2024 15:42:18 +0300
Subject: [PATCH 19/26] feat(frontend): add delete button to alternative
 overlay

---
 .../ReportOverlay/ReportOverlay.tsx           | 41 +++++++++++++------
 .../frontend/src/pages/report/Report.tsx      | 17 +++++++-
 2 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/application/frontend/src/components/ReportOverlay/ReportOverlay.tsx b/application/frontend/src/components/ReportOverlay/ReportOverlay.tsx
index 42ca152..acdff67 100644
--- a/application/frontend/src/components/ReportOverlay/ReportOverlay.tsx
+++ b/application/frontend/src/components/ReportOverlay/ReportOverlay.tsx
@@ -33,8 +33,11 @@ interface ReportOverlayProps {
   onClose: () => void
   report: Report | null
   isEditMode: boolean
+  onDelete?: (report: Report) => void
 }
 
+type ReportStage = "Initial" | "Onboarding" | "In progress" | "In review" | "In test"
+
 export interface Report {
   id: number
   name: string
@@ -43,6 +46,7 @@ export interface Report {
   authorAvatar: string
   startDate: string
   endDate: string
+  stage: ReportStage
   goals?: Goal[]
   onVacation?: string
   reporterOnVacation?: string
@@ -59,16 +63,21 @@ export const ReportOverlay: React.FC<ReportOverlayProps> = ({
   onClose,
   report,
   isEditMode,
+  onDelete,
 }) => {
   const { t } = useTranslation()
   const [tab, setTab] = useState<number>(0)
-  const [onVacation, setOnVacation] = useState<string>("")
-  const [reporterOnVacation, setReporterOnVacation] = useState<string>("")
-  const [goals, setGoals] = useState<Goal[]>([])
-  const [reportName, setReportName] = useState<string>("")
-  const [trafficLightColor, setTrafficLightColor] = useState<string>("")
-  const [startDate, setStartDate] = useState<string>(dayjs().format("YYYY-MM-DDTHH:mm"))
-  const [endDate, setEndDate] = useState<string>(dayjs().add(1, "day").format("YYYY-MM-DDTHH:mm"))
+  const [onVacation, setOnVacation] = useState<string>(report?.onVacation || "")
+  const [reporterOnVacation, setReporterOnVacation] = useState<string>(
+    report?.reporterOnVacation || "",
+  )
+  const [goals, setGoals] = useState<Goal[]>(report?.goals || [])
+  const [reportName, setReportName] = useState<string>(report?.name || "")
+  const [trafficLightColor, setTrafficLightColor] = useState<string>(report?.status || "")
+  const [startDate, setStartDate] = useState<string>(
+    dayjs(report?.startDate).format("YYYY-MM-DDTHH:mm"),
+  )
+  const [endDate, setEndDate] = useState<string>(dayjs(report?.endDate).format("YYYY-MM-DDTHH:mm"))
 
   useEffect(() => {
     if (isEditMode && report) {
@@ -164,9 +173,7 @@ export const ReportOverlay: React.FC<ReportOverlayProps> = ({
                     fullWidth
                     label={t("reportOverlay.startDate")}
                     type="datetime-local"
-                    InputLabelProps={{
-                      shrink: true,
-                    }}
+                    InputLabelProps={{ shrink: true }}
                     variant="outlined"
                     value={startDate}
                     onChange={(e) => setStartDate(e.target.value)}
@@ -177,9 +184,7 @@ export const ReportOverlay: React.FC<ReportOverlayProps> = ({
                     fullWidth
                     label={t("reportOverlay.endDate")}
                     type="datetime-local"
-                    InputLabelProps={{
-                      shrink: true,
-                    }}
+                    InputLabelProps={{ shrink: true }}
                     variant="outlined"
                     value={endDate}
                     onChange={(e) => setEndDate(e.target.value)}
@@ -291,6 +296,16 @@ export const ReportOverlay: React.FC<ReportOverlayProps> = ({
                   >
                     {t("reportOverlay.cancel")}
                   </Button>
+                  {isEditMode && onDelete && (
+                    <Button
+                      variant="outlined"
+                      color="error"
+                      style={{ marginLeft: "8px" }}
+                      onClick={() => report && onDelete(report)}
+                    >
+                      {t("reportOverlay.delete")}
+                    </Button>
+                  )}
                 </ButtonContainer>
               </Grid>
             </Grid>
diff --git a/application/frontend/src/pages/report/Report.tsx b/application/frontend/src/pages/report/Report.tsx
index 5f7a383..03ce40a 100644
--- a/application/frontend/src/pages/report/Report.tsx
+++ b/application/frontend/src/pages/report/Report.tsx
@@ -32,10 +32,19 @@ export type Report = {
   authorAvatar: string
   startDate: string
   endDate: string
+  goals?: Goal[]
+  onVacation?: string
+  reporterOnVacation?: string
   stage: ReportStage
 }
 
-const reports: Report[] = [
+interface Goal {
+  title: string
+  status: string
+  description: string
+}
+
+const initialReports: Report[] = [
   {
     id: 1,
     name: "Report 1",
@@ -75,6 +84,7 @@ export const ReportPage: React.FC = () => {
   const [viewMode, setViewMode] = useState<"list" | "timeline">("list")
   const [isOverlayOpen, setOverlayOpen] = useState<boolean>(false)
   const [selectedReport, setSelectedReport] = useState<Report | null>(null)
+  const [reports, setReports] = useState<Report[]>(initialReports)
 
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchQuery(e.target.value)
@@ -102,6 +112,10 @@ export const ReportPage: React.FC = () => {
     setOverlayOpen(true)
   }
 
+  const handleDeleteReport = (report: Report) => {
+    setReports((prevReports) => prevReports.filter((r) => r.id !== report.id))
+  }
+
   const filteredReports = reports.filter((report) =>
     report.name.toLowerCase().includes(searchQuery.toLowerCase()),
   )
@@ -142,6 +156,7 @@ export const ReportPage: React.FC = () => {
         onClose={closeOverlay}
         report={selectedReport}
         isEditMode={!!selectedReport}
+        onDelete={handleDeleteReport}
       />
     </Container>
   )

From 6b4360152c031f84092386e85176f03c55f9eecf Mon Sep 17 00:00:00 2001
From: Anastasiya <melichkaowen1@gmail.com>
Date: Thu, 12 Sep 2024 15:42:52 +0300
Subject: [PATCH 20/26] feat(frontend); add translate

---
 application/frontend/public/locales/translation/en.json | 3 ++-
 application/frontend/public/locales/translation/ru.json | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/application/frontend/public/locales/translation/en.json b/application/frontend/public/locales/translation/en.json
index 0ebd646..85b3a4e 100644
--- a/application/frontend/public/locales/translation/en.json
+++ b/application/frontend/public/locales/translation/en.json
@@ -53,7 +53,8 @@
     "yes":"Yes",
     "no":"No",
     "save":"Save",
-    "editReport":"Edit report"
+    "editReport":"Edit report",
+    "delete":"Delete"
   },
   "selectUser": "Select your user"
 }
diff --git a/application/frontend/public/locales/translation/ru.json b/application/frontend/public/locales/translation/ru.json
index ab31430..8c217c3 100644
--- a/application/frontend/public/locales/translation/ru.json
+++ b/application/frontend/public/locales/translation/ru.json
@@ -53,7 +53,8 @@
     "yes":"Да",
     "no":"Нет",
     "save":"Сохранить",
-    "editReport":"Редактировать отчет"
+    "editReport":"Редактировать отчет",
+    "delete":"Удалить"
   },
   "selectUser": "Выберите своего пользователя"
 }

From b1595f8894cae3510b4f058d5f1923edbff94536 Mon Sep 17 00:00:00 2001
From: Anastasiya <melichkaowen1@gmail.com>
Date: Thu, 12 Sep 2024 15:57:29 +0300
Subject: [PATCH 21/26] refactor(frontend): remove unnecessary types

---
 application/frontend/src/types/bar-task.ts    |  23 ---
 application/frontend/src/types/date-setup.ts  |   6 -
 .../frontend/src/types/gantt-task-actions.ts  |  18 ---
 .../frontend/src/types/public-types.ts        | 145 ------------------
 4 files changed, 192 deletions(-)
 delete mode 100644 application/frontend/src/types/bar-task.ts
 delete mode 100644 application/frontend/src/types/date-setup.ts
 delete mode 100644 application/frontend/src/types/gantt-task-actions.ts
 delete mode 100644 application/frontend/src/types/public-types.ts

diff --git a/application/frontend/src/types/bar-task.ts b/application/frontend/src/types/bar-task.ts
deleted file mode 100644
index 1be75e8..0000000
--- a/application/frontend/src/types/bar-task.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Task, TaskType } from "./public-types";
-
-export interface BarTask extends Task {
-  index: number;
-  typeInternal: TaskTypeInternal;
-  x1: number;
-  x2: number;
-  y: number;
-  height: number;
-  progressX: number;
-  progressWidth: number;
-  barCornerRadius: number;
-  handleWidth: number;
-  barChildren: BarTask[];
-  styles: {
-    backgroundColor: string;
-    backgroundSelectedColor: string;
-    progressColor: string;
-    progressSelectedColor: string;
-  };
-}
-
-export type TaskTypeInternal = TaskType | "smalltask";
diff --git a/application/frontend/src/types/date-setup.ts b/application/frontend/src/types/date-setup.ts
deleted file mode 100644
index 81115ec..0000000
--- a/application/frontend/src/types/date-setup.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { ViewMode } from "./public-types";
-
-export interface DateSetup {
-  dates: Date[];
-  viewMode: ViewMode;
-}
diff --git a/application/frontend/src/types/gantt-task-actions.ts b/application/frontend/src/types/gantt-task-actions.ts
deleted file mode 100644
index 01e1292..0000000
--- a/application/frontend/src/types/gantt-task-actions.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { BarTask } from "./bar-task";
-
-export type BarMoveAction = "progress" | "end" | "start" | "move";
-export type GanttContentMoveAction =
-  | "mouseenter"
-  | "mouseleave"
-  | "delete"
-  | "dblclick"
-  | "click"
-  | "select"
-  | ""
-  | BarMoveAction;
-
-export type GanttEvent = {
-  changedTask?: BarTask;
-  originalSelectedTask?: BarTask;
-  action: GanttContentMoveAction;
-};
diff --git a/application/frontend/src/types/public-types.ts b/application/frontend/src/types/public-types.ts
deleted file mode 100644
index cc44ff1..0000000
--- a/application/frontend/src/types/public-types.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-export enum ViewMode {
-  Hour = "Hour",
-  QuarterDay = "Quarter Day",
-  HalfDay = "Half Day",
-  Day = "Day",
-  /** ISO-8601 week */
-  Week = "Week",
-  Month = "Month",
-  QuarterYear = "QuarterYear",
-  Year = "Year",
-}
-export type TaskType = "task" | "milestone" | "project";
-export interface Task {
-  id: string;
-  type: TaskType;
-  name: string;
-  start: Date;
-  end: Date;
-  /**
-   * From 0 to 100
-   */
-  progress: number;
-  styles?: {
-    backgroundColor?: string;
-    backgroundSelectedColor?: string;
-    progressColor?: string;
-    progressSelectedColor?: string;
-  };
-  isDisabled?: boolean;
-  project?: string;
-  dependencies?: string[];
-  hideChildren?: boolean;
-  displayOrder?: number;
-}
-
-export interface EventOption {
-  /**
-   * Time step value for date changes.
-   */
-  timeStep?: number;
-  /**
-   * Invokes on bar select on unselect.
-   */
-  onSelect?: (task: Task, isSelected: boolean) => void;
-  /**
-   * Invokes on bar double click.
-   */
-  onDoubleClick?: (task: Task) => void;
-  /**
-   * Invokes on bar click.
-   */
-  onClick?: (task: Task) => void;
-  /**
-   * Invokes on end and start time change. Chart undoes operation if method return false or error.
-   */
-  onDateChange?: (
-    task: Task,
-    children: Task[]
-  ) => void | boolean | Promise<void> | Promise<boolean>;
-  /**
-   * Invokes on progress change. Chart undoes operation if method return false or error.
-   */
-  onProgressChange?: (
-    task: Task,
-    children: Task[]
-  ) => void | boolean | Promise<void> | Promise<boolean>;
-  /**
-   * Invokes on delete selected task. Chart undoes operation if method return false or error.
-   */
-  onDelete?: (task: Task) => void | boolean | Promise<void> | Promise<boolean>;
-  /**
-   * Invokes on expander on task list
-   */
-  onExpanderClick?: (task: Task) => void;
-}
-
-export interface DisplayOption {
-  viewMode?: ViewMode;
-  viewDate?: Date;
-  preStepsCount?: number;
-  /**
-   * Specifies the month name language. Able formats: ISO 639-2, Java Locale
-   */
-  locale?: string;
-  rtl?: boolean;
-}
-
-export interface StylingOption {
-  headerHeight?: number;
-  columnWidth?: number;
-  listCellWidth?: string;
-  rowHeight?: number;
-  ganttHeight?: number;
-  barCornerRadius?: number;
-  handleWidth?: number;
-  fontFamily?: string;
-  fontSize?: string;
-  /**
-   * How many of row width can be taken by task.
-   * From 0 to 100
-   */
-  barFill?: number;
-  barProgressColor?: string;
-  barProgressSelectedColor?: string;
-  barBackgroundColor?: string;
-  barBackgroundSelectedColor?: string;
-  projectProgressColor?: string;
-  projectProgressSelectedColor?: string;
-  projectBackgroundColor?: string;
-  projectBackgroundSelectedColor?: string;
-  milestoneBackgroundColor?: string;
-  milestoneBackgroundSelectedColor?: string;
-  arrowColor?: string;
-  arrowIndent?: number;
-  todayColor?: string;
-  TooltipContent?: React.FC<{
-    task: Task;
-    fontSize: string;
-    fontFamily: string;
-  }>;
-  TaskListHeader?: React.FC<{
-    headerHeight: number;
-    rowWidth: string;
-    fontFamily: string;
-    fontSize: string;
-  }>;
-  TaskListTable?: React.FC<{
-    rowHeight: number;
-    rowWidth: string;
-    fontFamily: string;
-    fontSize: string;
-    locale: string;
-    tasks: Task[];
-    selectedTaskId: string;
-    /**
-     * Sets selected task by id
-     */
-    setSelectedTask: (taskId: string) => void;
-    onExpanderClick: (task: Task) => void;
-  }>;
-}
-
-export interface GanttProps extends EventOption, DisplayOption, StylingOption {
-  tasks: Task[];
-}

From a65ad330017be6fd7b44f6f5d9be57ba17ff4485 Mon Sep 17 00:00:00 2001
From: Anastasiya <melichkaowen1@gmail.com>
Date: Thu, 12 Sep 2024 15:58:05 +0300
Subject: [PATCH 22/26] feat(frontend): add types for report

---
 application/frontend/src/types/types.ts | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 application/frontend/src/types/types.ts

diff --git a/application/frontend/src/types/types.ts b/application/frontend/src/types/types.ts
new file mode 100644
index 0000000..58214c7
--- /dev/null
+++ b/application/frontend/src/types/types.ts
@@ -0,0 +1,21 @@
+export interface Report {
+  id: number
+  name: string
+  status: "Error" | "Success" | "In Progress" | string
+  author: string
+  authorAvatar: string
+  startDate: string
+  endDate: string
+  stage: ReportStage
+  goals?: Goal[]
+  onVacation?: string
+  reporterOnVacation?: string
+}
+
+export interface Goal {
+  title: string
+  status: string
+  description: string
+}
+
+export type ReportStage = "Initial" | "Onboarding" | "In progress" | "In review" | "In test"

From 0bdfaaa688f3b1e835c27d7133265f64459c4584 Mon Sep 17 00:00:00 2001
From: Anastasiya <melichkaowen1@gmail.com>
Date: Thu, 12 Sep 2024 15:58:28 +0300
Subject: [PATCH 23/26] refactor(frontend): use types

---
 .../ReportOverlay/ReportOverlay.tsx           | 23 +------------------
 .../frontend/src/pages/report/Report.tsx      | 23 +------------------
 2 files changed, 2 insertions(+), 44 deletions(-)

diff --git a/application/frontend/src/components/ReportOverlay/ReportOverlay.tsx b/application/frontend/src/components/ReportOverlay/ReportOverlay.tsx
index acdff67..95b15ec 100644
--- a/application/frontend/src/components/ReportOverlay/ReportOverlay.tsx
+++ b/application/frontend/src/components/ReportOverlay/ReportOverlay.tsx
@@ -1,5 +1,6 @@
 import dayjs from "dayjs"
 import { CustomMenuItem } from "~components/CustomMenuItem"
+import { Goal, Report } from "~types/types"
 
 import React, { useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
@@ -36,28 +37,6 @@ interface ReportOverlayProps {
   onDelete?: (report: Report) => void
 }
 
-type ReportStage = "Initial" | "Onboarding" | "In progress" | "In review" | "In test"
-
-export interface Report {
-  id: number
-  name: string
-  status: "Error" | "Success" | "In Progress" | string
-  author: string
-  authorAvatar: string
-  startDate: string
-  endDate: string
-  stage: ReportStage
-  goals?: Goal[]
-  onVacation?: string
-  reporterOnVacation?: string
-}
-
-interface Goal {
-  title: string
-  status: string
-  description: string
-}
-
 export const ReportOverlay: React.FC<ReportOverlayProps> = ({
   isOpen,
   onClose,
diff --git a/application/frontend/src/pages/report/Report.tsx b/application/frontend/src/pages/report/Report.tsx
index 03ce40a..b66703d 100644
--- a/application/frontend/src/pages/report/Report.tsx
+++ b/application/frontend/src/pages/report/Report.tsx
@@ -4,6 +4,7 @@ import { NavButton } from "~components/NavButton"
 import ReportOverlay from "~components/ReportOverlay/ReportOverlay"
 import ReportsTable from "~components/ReportsTable/ReportsTable"
 import { SearchBar } from "~components/SearchBar"
+import { Report } from "~types/types"
 
 import React, { useState } from "react"
 import { useTranslation } from "react-i18next"
@@ -22,28 +23,6 @@ import {
   TitleSection,
 } from "./Report.styled"
 
-type ReportStage = "Initial" | "Onboarding" | "In progress" | "In review" | "In test"
-
-export type Report = {
-  id: number
-  name: string
-  status: string
-  author: string
-  authorAvatar: string
-  startDate: string
-  endDate: string
-  goals?: Goal[]
-  onVacation?: string
-  reporterOnVacation?: string
-  stage: ReportStage
-}
-
-interface Goal {
-  title: string
-  status: string
-  description: string
-}
-
 const initialReports: Report[] = [
   {
     id: 1,

From 296f5d48341e25e9776b368c1e7b41461e755bb1 Mon Sep 17 00:00:00 2001
From: Anastasiya <melichkaowen1@gmail.com>
Date: Thu, 12 Sep 2024 16:38:32 +0300
Subject: [PATCH 24/26] feat(frontend): add value for textfilds

---
 application/frontend/src/types/types.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/application/frontend/src/types/types.ts b/application/frontend/src/types/types.ts
index 58214c7..b211234 100644
--- a/application/frontend/src/types/types.ts
+++ b/application/frontend/src/types/types.ts
@@ -10,6 +10,11 @@ export interface Report {
   goals?: Goal[]
   onVacation?: string
   reporterOnVacation?: string
+  colorValues?: {
+    red?: string
+    orange?: string
+    green?: string
+  }
 }
 
 export interface Goal {

From cb002e630b63b6c95a67d5f43dcfda14057cda64 Mon Sep 17 00:00:00 2001
From: Anastasiya <melichkaowen1@gmail.com>
Date: Thu, 12 Sep 2024 16:39:56 +0300
Subject: [PATCH 25/26] fix(frontend): remove field reset when switching tabs

---
 .../ReportOverlay/ReportOverlay.tsx           | 40 ++++++++++++++-----
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/application/frontend/src/components/ReportOverlay/ReportOverlay.tsx b/application/frontend/src/components/ReportOverlay/ReportOverlay.tsx
index 95b15ec..ef7dd06 100644
--- a/application/frontend/src/components/ReportOverlay/ReportOverlay.tsx
+++ b/application/frontend/src/components/ReportOverlay/ReportOverlay.tsx
@@ -46,17 +46,19 @@ export const ReportOverlay: React.FC<ReportOverlayProps> = ({
 }) => {
   const { t } = useTranslation()
   const [tab, setTab] = useState<number>(0)
-  const [onVacation, setOnVacation] = useState<string>(report?.onVacation || "")
-  const [reporterOnVacation, setReporterOnVacation] = useState<string>(
-    report?.reporterOnVacation || "",
-  )
-  const [goals, setGoals] = useState<Goal[]>(report?.goals || [])
-  const [reportName, setReportName] = useState<string>(report?.name || "")
-  const [trafficLightColor, setTrafficLightColor] = useState<string>(report?.status || "")
-  const [startDate, setStartDate] = useState<string>(
-    dayjs(report?.startDate).format("YYYY-MM-DDTHH:mm"),
-  )
-  const [endDate, setEndDate] = useState<string>(dayjs(report?.endDate).format("YYYY-MM-DDTHH:mm"))
+
+  const [reportName, setReportName] = useState<string>("")
+  const [trafficLightColor, setTrafficLightColor] = useState<string>("")
+  const [startDate, setStartDate] = useState<string>("")
+  const [endDate, setEndDate] = useState<string>("")
+  const [onVacation, setOnVacation] = useState<string>("")
+  const [reporterOnVacation, setReporterOnVacation] = useState<string>("")
+  const [goals, setGoals] = useState<Goal[]>([])
+  const [colorValues, setColorValues] = useState<{ [key: string]: string }>({
+    red: "",
+    orange: "",
+    green: "",
+  })
 
   useEffect(() => {
     if (isEditMode && report) {
@@ -67,6 +69,11 @@ export const ReportOverlay: React.FC<ReportOverlayProps> = ({
       setGoals(report.goals || [])
       setOnVacation(report.onVacation || "")
       setReporterOnVacation(report.reporterOnVacation || "")
+      setColorValues({
+        red: report.colorValues?.red || "",
+        orange: report.colorValues?.orange || "",
+        green: report.colorValues?.green || "",
+      })
     }
   }, [isEditMode, report])
 
@@ -88,6 +95,10 @@ export const ReportOverlay: React.FC<ReportOverlayProps> = ({
     setGoals(goals.filter((_, i) => i !== index))
   }
 
+  const handleColorChange = (color: string, value: string) => {
+    setColorValues((prev) => ({ ...prev, [color]: value }))
+  }
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
     console.log({
@@ -98,6 +109,7 @@ export const ReportOverlay: React.FC<ReportOverlayProps> = ({
       onVacation,
       reporterOnVacation,
       goals,
+      colorValues,
     })
     onClose()
   }
@@ -192,6 +204,8 @@ export const ReportOverlay: React.FC<ReportOverlayProps> = ({
                             variant="outlined"
                             label={t("reportOverlay.colorValue")}
                             fullWidth
+                            value={colorValues.red}
+                            onChange={(e) => handleColorChange("red", e.target.value)}
                           />
                         </ColorTextContainer>
                         <ColorTextContainer>
@@ -200,6 +214,8 @@ export const ReportOverlay: React.FC<ReportOverlayProps> = ({
                             variant="outlined"
                             label={t("reportOverlay.colorValue")}
                             fullWidth
+                            value={colorValues.orange}
+                            onChange={(e) => handleColorChange("orange", e.target.value)}
                           />
                         </ColorTextContainer>
                         <ColorTextContainer>
@@ -208,6 +224,8 @@ export const ReportOverlay: React.FC<ReportOverlayProps> = ({
                             variant="outlined"
                             label={t("reportOverlay.colorValue")}
                             fullWidth
+                            value={colorValues.green}
+                            onChange={(e) => handleColorChange("green", e.target.value)}
                           />
                         </ColorTextContainer>
                       </Grid>

From 0b43973e2398898066afc415a898de44574c4a17 Mon Sep 17 00:00:00 2001
From: Anastasiya <melichkaowen1@gmail.com>
Date: Thu, 12 Sep 2024 16:44:26 +0300
Subject: [PATCH 26/26] fix(frontend): add reset fields when clicking cancel
 button when creating report

---
 .../ReportOverlay/ReportOverlay.tsx           | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/application/frontend/src/components/ReportOverlay/ReportOverlay.tsx b/application/frontend/src/components/ReportOverlay/ReportOverlay.tsx
index ef7dd06..00ed3df 100644
--- a/application/frontend/src/components/ReportOverlay/ReportOverlay.tsx
+++ b/application/frontend/src/components/ReportOverlay/ReportOverlay.tsx
@@ -77,6 +77,21 @@ export const ReportOverlay: React.FC<ReportOverlayProps> = ({
     }
   }, [isEditMode, report])
 
+  const resetForm = () => {
+    setReportName("")
+    setTrafficLightColor("")
+    setStartDate("")
+    setEndDate("")
+    setOnVacation("")
+    setReporterOnVacation("")
+    setGoals([])
+    setColorValues({
+      red: "",
+      orange: "",
+      green: "",
+    })
+  }
+
   const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
     setTab(newValue)
   }
@@ -114,6 +129,13 @@ export const ReportOverlay: React.FC<ReportOverlayProps> = ({
     onClose()
   }
 
+  const handleCancel = () => {
+    if (!isEditMode) {
+      resetForm()
+    }
+    onClose()
+  }
+
   return (
     <>
       <Backdrop isOpen={isOpen} />
@@ -288,7 +310,7 @@ export const ReportOverlay: React.FC<ReportOverlayProps> = ({
                   <Button
                     variant="outlined"
                     color="primary"
-                    onClick={onClose}
+                    onClick={handleCancel}
                     style={{ marginLeft: "8px" }}
                   >
                     {t("reportOverlay.cancel")}