FRONTEND: Whole refactoring

application/frontend/public/locales/translation/en.json

@@ -51,7 +51,10 @@
     "goals": "Goals",
     "colorValue": "Value",
     "yes":"Yes",
-    "no":"No"
+    "no":"No",
+    "save":"Save",
+    "editReport":"Edit report",
+    "delete":"Delete"
   },
   "selectUser": "Select your user"
 }

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": "Цвета светофора",
@@ -51,7 +51,10 @@
     "goals": "Цели",
     "colorValue": "Текст",
     "yes":"Да",
-    "no":"Нет"
+    "no":"Нет",
+    "save":"Сохранить",
+    "editReport":"Редактировать отчет",
+    "delete":"Удалить"
   },
   "selectUser": "Выберите своего пользователя"
 }

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>
   )
 }
 

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

application/frontend/src/components/CustomMenuItem/index.ts

@@ -0,0 +1 @@
+export { CustomMenuItem } from "./CustomMenuItem"

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)`

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>

application/frontend/src/components/Header/Header.tsx

@@ -1,33 +1,45 @@
+import { useUser } from "context/UserContext"
 import { UserController } from "~api/controllers/UserController"
 import { useTheme } from "~components/Theme"
-import { ThemeEnum } from "~types/theme/enum"
+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, 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>
@@ -38,7 +50,7 @@ export const Header: React.FC = () => {
         </Logo>
         <NavButtons>
           <Button
-            onClick={() => navigate("/")}
+            onClick={() => navigate("/projects")}
             sx={{
               color: "inherit",
               textDecoration: "none",
@@ -51,85 +63,20 @@ 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={{
-              color: "inherit",
-              textDecoration: "none",
-              textTransform: "none",
-              "&:hover": {
-                color: theme.palette.primary.main,
-                textDecoration: "underline",
-              },
-            }}
-          >
-            {t("rating")}
-          </Button>
         </NavButtons>
       </LeftSection>
 
       <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={{
-                backgroundColor: "rgba(238, 238, 238, 1)",
-                borderRadius: "6px",
-                width: "28px",
-                height: "28px",
-              }}
-            >
-              <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>
-
+        {selectedUser && (
+          <Typography
+            variant="subtitle1"
+            sx={{ marginRight: "16px", cursor: "pointer" }}
+            onClick={handleUserClick}
+          >
+            {selectedUser.name}
+          </Typography>
+        )}
         <Switches>
-          <Tooltip title={t("toggleTheme")}>
-            <Switch
-              onChange={(_, checked) => {
-                change(checked ? ThemeEnum.Dark : ThemeEnum.Light)
-              }}
-            />
-          </Tooltip>
           <Tooltip title={t("changeLanguage")}>
             <Switch
               onChange={(_, checked) =>
@@ -139,6 +86,13 @@ export const Header: React.FC = () => {
           </Tooltip>
         </Switches>
       </RightSection>
+
+      <UserSelectModal
+        open={isModalOpen}
+        onClose={handleCloseModal}
+        profiles={users}
+        onSelectProfile={handleSelectProfile}
+      />
     </Container>
   )
 }

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("/projects")
+    onClick?.()
+    navigate(`${id}/projects`)
   }
 
   return (