FRONTEND: refactoring

application/frontend/package.json

@@ -54,9 +54,10 @@
     "globals": "^15.9.0",
     "husky": "^9.1.4",
     "prettier": "^3.3.3",
-    "typescript": "^5.5.3",
+    "typescript": "^5.1.6",
     "typescript-eslint": "^8.0.0",
-    "vite": "^5.4.0"
+    "vite": "^4.2.0",
+    "vite-plugin-svgr": "^4.2.0"
   },
   "plugins": [
     "@semantic-release/commit-analyzer",

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

@@ -1,3 +1,57 @@
 {
-  "header": "Header"
+  "header": "Header",
+  "projectList": "Project List",
+  "settings": "Settings",
+  "search": "Search",
+   "projects": "Projects",
+  "quiz": "Quiz",
+  "rating": "Rating",
+  "notifications": "Notifications",
+  "profile": "Profile",
+  "more": "More",
+  "toggleTheme": "Toggle Theme",
+  "changeLanguage": "Change Language",
+  "projectName": "Project \"{{name}}\"",
+  "reportList": "Report List",
+  "searchPlaceholder": "Search",
+  "createReport": "Create Report",
+   "status": {
+    "Error": "Error",
+    "Success": "Success",
+    "Warning": "Warning"
+  },
+  "goalsTable": {
+    "title": "Title",
+    "status": "Status",
+    "description": "Description"
+  },
+  "reportsTable": {
+    "name": "Name",
+    "status": "Status",
+    "author": "Author",
+    "startDate": "Start Date",
+    "endDate": "End Date"
+  },
+  "reportOverlay": {
+    "createReport": "Create Report",
+    "reportName": "Report Name",
+    "trafficLightColor": "Traffic Light Color",
+    "success": "Success",
+    "error": "Error",
+    "warning": "Warning",
+    "startDate": "Start Date",
+    "endDate": "End Date",
+    "colors": "Traffic Light Colors",
+    "onVacation": "Is anyone on vacation?",
+    "reporterOnVacation": "Is the reporter on vacation?",
+    "addGoal": "+ Add Goal",
+    "cancel": "Cancel",
+    "submit": "Submit",
+    "main": "Main",
+    "goals": "Goals",
+    "colorValue": "Value",
+    "yes":"Yes",
+    "no":"No"
+  },
+  "selectUser": "Select your user"
 }

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

@@ -1,3 +1,57 @@
 {
-  "header": "Шапка"
+  "header": "Шапка",
+  "projectList": "Список проектов",
+  "settings": "Настройки",
+  "search": "Поиск",
+  "projects": "Проекты",
+  "quiz": "Опрос",
+  "rating": "Рейтинг",
+  "notifications": "Уведомления",
+  "profile": "Профиль",
+  "more": "Ещё",
+  "toggleTheme": "Переключить тему",
+  "changeLanguage": "Сменить язык",
+  "projectName": "Проект \"{{name}}\"",
+  "reportList": "Список отчетов",
+  "searchPlaceholder": "Поиск",
+   "createReport": "Создать отчет",
+    "status": {
+    "Error": "Ошибка",
+    "Success": "Успех",
+    "Warning": "Предупреждение"
+  },
+  "goalsTable": {
+    "title": "Название",
+    "status": "Статус",
+    "description": "Описание"
+  },
+    "reportsTable": {
+    "name": "Название",
+    "status": "Статус",
+    "author": "Автор",
+    "startDate": "Дата начала",
+    "endDate": "Дата окончания"
+  },
+  "reportOverlay": {
+    "createReport": "Создать отчет",
+    "reportName": "Название отчета",
+    "trafficLightColor": "Итоговый цвет светофора",
+    "success": "Успех",
+    "error": "Ошибка",
+    "warning": "Предупреждение",
+    "startDate": "Дата начала",
+    "endDate": "Дата окончания",
+    "colors": "Цвета светофора",
+    "onVacation": "Идет ли кто-то в отпуск?",
+    "reporterOnVacation": "Идет ли в отпуск тот, кто пишет отчет?",
+    "addGoal": "+ Добавить цель",
+    "cancel": "Отмена",
+    "submit": "Создать",
+    "main": "Основное",
+    "goals": "Цели",
+    "colorValue": "Текст",
+    "yes":"Да",
+    "no":"Нет"
+  },
+  "selectUser": "Выберите своего пользователя"
 }

application/frontend/src/App.tsx

@@ -1,3 +1,4 @@
+import React from "react"
 import { BrowserRouter } from "react-router-dom"
 
 import "@fontsource/roboto/300.css"

application/frontend/src/components/CreateReportButton/CreateReportButton.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import { useTranslation } from "react-i18next"
 
 import { Button } from "@mui/material"
 
@@ -7,9 +8,11 @@ interface CreateReportButtonProps {
 }
 
 export const CreateReportButton: React.FC<CreateReportButtonProps> = ({ onClick }) => {
+  const { t } = useTranslation()
+
   return (
     <Button variant="contained" color="primary" onClick={onClick}>
-      Create Report
+      {t("createReport")}
     </Button>
   )
 }

application/frontend/src/components/GoalsTable/GoalsTable.styled.ts

@@ -0,0 +1,42 @@
+import styled from "styled-components"
+
+import { Table, TableCell, TableRow, TextField } from "@mui/material"
+
+export const TableContainer = styled.div`
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid rgba(217, 217, 217, 1);
+`
+
+export const StyledTable = styled(Table)`
+  border-collapse: separate;
+  border-spacing: 0;
+`
+
+export const StyledTableCell = styled(TableCell)`
+  padding: 8px;
+  border: none;
+`
+
+export const StyledTableRow = styled(TableRow)`
+  &:not(:last-child) ${StyledTableCell} {
+    border-bottom: 1px solid rgba(217, 217, 217, 1);
+  }
+`
+
+export const CustomTextField = styled(TextField)`
+  .MuiInputBase-root {
+    border: none;
+  }
+
+  .MuiInputLabel-root {
+    border: none;
+  }
+
+  .MuiOutlinedInput-root {
+    border: none;
+    fieldset {
+      border: none;
+    }
+  }
+`

application/frontend/src/components/GoalsTable/GoalsTable.tsx

@@ -1,8 +1,16 @@
 import React from "react"
+import { useTranslation } from "react-i18next"
 
-import { Table, TableBody, TableCell, TableHead, TableRow, TextField } from "@mui/material"
+import { TableBody, TableHead, TableRow } from "@mui/material"
 
 import { StatusSelector } from "../StatusSelector"
+import {
+  CustomTextField,
+  StyledTable,
+  StyledTableCell,
+  StyledTableRow,
+  TableContainer,
+} from "./GoalsTable.styled"
 
 interface Goal {
   title: string
@@ -16,44 +24,50 @@ interface GoalsTableProps {
 }
 
 export const GoalsTable: React.FC<GoalsTableProps> = ({ goals, onGoalChange }) => {
+  const { t } = useTranslation()
+
   return (
-    <Table>
-      <TableHead>
-        <TableRow>
-          <TableCell>Название</TableCell>
-          <TableCell>Статус</TableCell>
-          <TableCell>Описание</TableCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        {goals.map((goal, index) => (
-          <TableRow key={index}>
-            <TableCell>
-              <TextField
-                fullWidth
-                value={goal.title}
-                onChange={(e) => onGoalChange(index, "title", e.target.value)}
-              />
-            </TableCell>
-            <TableCell>
-              <StatusSelector
-                value={goal.status}
-                onChange={(value) => onGoalChange(index, "status", value)}
-              />
-            </TableCell>
-            <TableCell>
-              <TextField
-                fullWidth
-                multiline
-                rows={2}
-                value={goal.description}
-                onChange={(e) => onGoalChange(index, "description", e.target.value)}
-              />
-            </TableCell>
+    <TableContainer>
+      <StyledTable>
+        <TableHead>
+          <TableRow>
+            <StyledTableCell>{t("goalsTable.title")}</StyledTableCell>
+            <StyledTableCell>{t("goalsTable.status")}</StyledTableCell>
+            <StyledTableCell>{t("goalsTable.description")}</StyledTableCell>
           </TableRow>
-        ))}
-      </TableBody>
-    </Table>
+        </TableHead>
+        <TableBody>
+          {goals.map((goal, index) => (
+            <StyledTableRow key={index}>
+              <StyledTableCell>
+                <CustomTextField
+                  fullWidth
+                  value={goal.title}
+                  onChange={(e) => onGoalChange(index, "title", e.target.value)}
+                  variant="outlined"
+                />
+              </StyledTableCell>
+              <StyledTableCell>
+                <StatusSelector
+                  value={goal.status}
+                  onChange={(value) => onGoalChange(index, "status", value)}
+                />
+              </StyledTableCell>
+              <StyledTableCell>
+                <CustomTextField
+                  fullWidth
+                  multiline
+                  rows={2}
+                  value={goal.description}
+                  onChange={(e) => onGoalChange(index, "description", e.target.value)}
+                  variant="outlined"
+                />
+              </StyledTableCell>
+            </StyledTableRow>
+          ))}
+        </TableBody>
+      </StyledTable>
+    </TableContainer>
   )
 }