Add welcome to the registration

src/pages/ViewReport/ViewReport.jsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { Link, useParams } from "react-router-dom";
 
+import { getProfileInfo } from "@redux/outstaffingSlice";
 import { setEditReport } from "@redux/reportSlice";
 
 import {
@@ -9,6 +10,7 @@ import {
   getCreatedDate,
   hourOfNum
 } from "@utils/calendarHelper";
+import { urlForLocal } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
 
@@ -20,8 +22,9 @@ import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 
-import arrowSwitchDate from "assets/icons/arrows/arrowViewReport.png";
+import arrowSwitchDate from "assets/icons/arrows/arrowCalendar_right.png";
 import arrow from "assets/icons/arrows/left-arrow.png";
+import avatarMok from "assets/images/avatarMok.png";
 
 import "./viewReport.scss";
 
@@ -31,6 +34,7 @@ export const ViewReport = () => {
   const [previousReportDay] = useState(new Date(params.date));
   const [nextReportDay] = useState(new Date(params.date));
 
+  const profileInfo = useSelector(getProfileInfo);
   const [taskText, setTaskText] = useState([]);
   const [difficulties, setDifficulties] = useState([]);
   const [tomorrowTask, setTomorrowTask] = useState([]);
@@ -140,6 +144,33 @@ export const ViewReport = () => {
             <img src={arrow} alt="#" />
             <p>Вернуться</p>
           </Link>
+          <div className="summary__info">
+            <div className="summary__person">
+              <img
+                src={
+                  profileInfo?.photo
+                    ? urlForLocal(profileInfo.photo)
+                    : avatarMok
+                }
+                className="summary__avatar"
+                alt="avatar"
+              />
+              <p className="summary__name">
+                {profileInfo?.fio || profileInfo?.username}{" "}
+                {profileInfo.specification}
+              </p>
+              <hr />
+              <div className="summary__direction">Front End</div>
+              <div className="summary__level">Middle+</div>
+            </div>
+            <div className="summary__skill">
+              <p>Ключевые навыки:</p>
+              <div>Java</div>
+              <div>Java</div>
+              <div>Solid</div>
+              <div>Java</div>
+            </div>
+          </div>
           {localStorage.getItem("role_status") !== "18" && (
             <div className="view-report__bar">
               <Link

src/pages/ViewReport/viewReport.scss

@@ -4,6 +4,25 @@
   flex-direction: column;
   min-height: 100vh;
 
+  .summary__skill {
+    color: #6f6f6f;
+    font-size: 14px;
+    font-weight: 300;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    column-gap: 10px;
+
+    div {
+      font-size: 12px;
+      font-weight: 400;
+
+      border: #8dc63f 0.5px solid;
+      border-radius: 44px;
+      padding: 3px 20px;
+    }
+  }
+
   .container {
     max-width: 1160px;
     display: flex;
@@ -68,7 +87,7 @@
     background: #ffffff;
     border-top-left-radius: 12px;
     border-top-right-radius: 12px;
-    padding: 20px 33px;
+    padding: 55px;
     align-items: center;
     column-gap: 20px;
     height: 72px;