Added svg image and header

src/assets/images/svg/success.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="20" fill="#25BB00"/>
+<path d="M26.7063 15.2939C27.0969 15.6846 27.0969 16.3158 26.7063 16.7064L18.7063 24.7064C18.3156 25.0971 17.6844 25.0971 17.2938 24.7064L13.2929 20.7064C12.9024 20.3158 12.9024 19.6846 13.2929 19.2939C13.6834 18.9033 14.3166 18.9033 14.7072 19.2939L17.9719 22.5846L25.2938 15.2939C25.6844 14.9027 26.3156 14.9027 26.7063 15.2939Z" fill="white"/>
+</svg>

src/assets/styles/components/_selectionProcessPage.scss

@@ -263,13 +263,50 @@
   }
 }
 
-.active-process-card-header {
+.active-process-tip {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: start;
   align-items: flex-start;
+  padding: 91.5px;
+  width: 800px;
+  background: #ffffff;
+  gap: 18px;
+  margin-right: 36px;
+
+  @include media-below($bp-xl) {
+    margin-right: 20px !important;
+    padding: 36px !important;
+    width: 100%;
+  }
+}
+
+.active-process-tip h3 {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 600;
+  font-size: 16px;
+  color: #272727;
+  ;
+}
+
+.active-process-tip p {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  color: #272727;
+}
+
+.active-process-card-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  align-items: center;
   padding: 0px;
   gap: 18px;
+  flex-wrap: wrap;
 }
 
 .active-process-card-body {
@@ -329,6 +366,7 @@
   flex: none;
   order: 4;
   flex-grow: 0;
+
   @include media-below($bp-xl) {
     gap: 9px !important;
   }
@@ -352,15 +390,32 @@
   flex-grow: 0;
 }
 
-.active-process-card-link{
-font-family: 'Source Sans Pro';
-font-style: normal;
-font-weight: 400;
-font-size: 12px;
-text-decoration-line: underline;
-color: #226CB0;
-flex: none;
-order: 4;
-flex-grow: 0;
-z-index: 4;
+.active-process-card-link {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  text-decoration-line: underline;
+  color: #226CB0;
+  flex: none;
+  order: 4;
+  flex-grow: 0;
+  z-index: 4;
+}
+
+.active-process-card-logo img {
+  flex: none;
+  order: 0;
+  flex-grow: 0;
+}
+
+// .active-process-card-number{
+//   flex: 3 0 auto;
+// }
+
+.active-process-card-logo {
+  margin-left: auto;
+  flex: none;
+  order: 1;
+  flex-grow: 0;
 }

src/components/Selection/ApplicantSelection.js

@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { formatDate } from "../../util/helpers/dateHelpers";
 import { Link } from "react-router-dom";
+import success from "../../assets/images/svg/success.svg"
 
 const ApplicantSelection = ({
     levelNumber,
@@ -22,14 +23,21 @@ const ApplicantSelection = ({
                         {levelNumber}
                     </p>
                 </div>
+                {(status === "Odrađen") && <div className="active-process-card-logo">
+                    <img src={success} alt="success-image" />
+                </div>}
             </div>
+
+
+
+
             <div className="active-process-card-body">
                 <div className="active-process-card-date">
                     <p>
                         {date && date !== "" && formatDate(new Date(date))}
                     </p>
                 </div>
-                
+
                 <div className="ad-card-title">
                     <h3>{levelName}</h3>
                 </div>
@@ -43,10 +51,10 @@ const ApplicantSelection = ({
                 <div className="active-process-card-buttons">
                     <button>{status}</button>
                 </div>
-                
+
                 <div className="active-process-card-link">
-                        {(status === "Odrađen") && <Link className="ad-details-buttons-link" to={"/candidates/" + id}>Detaljni izveštaja</Link>}
-                        {(link && status !== "Odrađen") && <a href={link} className="ad-details-buttons-link">Link do Google Meet-a</a>}
+                    {(status === "Odrađen") && <Link className="ad-details-buttons-link" to={"/candidates/" + id}>Detaljni izveštaja</Link>}
+                    {(link && status !== "Odrađen") && <a href={link} className="ad-details-buttons-link">Link do Google Meet-a</a>}
                 </div>
             </div>
         </div>

src/i18n/resources/rs.js

@@ -134,7 +134,9 @@ export default {
     archiveAdsCandidates: "Prijavljeni kandidati",
   },
   selection: {
-    title: "Tok Selekcije"
+    title: "Tok Selekcije",
+    tipHeader: "Savet za uspešan Screening test",
+    tipBody: "Zapamtite da odeljenje za ljudske resurse u sebi sadrži reč „ljudski“. HR treba da vas vidi kakvi ste i da bi stekli osećaj za vašu stvarnu ličnost i postarali se da se dobro uklopite u kompaniju. Zato je bolje da se ponašate prirodno i opušteno. Važno je i pokazati da posedujete snažne međuljudske veštine i da se ponašate profesionalno. Na dan intervjua budite tačni, predstavite se pristojno i obucite se na odgovarajući način. To znači da razmislite o slici kompanije, ali i da se odevate na način koji vam je ugodan tokom dana."
   },
 users:{
   management: "Upravljanje korisnicima",

src/pages/SelectionProcessPage/SelectionProcessOfApplicantPage.js

@@ -1,14 +1,11 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import arrow_left from "../../assets/images/arrow_left.png";
 import arrow_right from "../../assets/images/arrow_right.png";
 import { useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
-import AddAdModal from "../../components/Ads/AddAdModal";
-import AdFilters from "../../components/Ads/AdFilters";
 import { useDispatch } from "react-redux";
 import { useSelector } from "react-redux";
-import FilterButton from "../../components/Button/FilterButton";
 import Slider from "react-slick";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
@@ -18,13 +15,11 @@ import ApplicantSelection from "../../components/Selection/ApplicantSelection";
 import { setProcessesReq } from "../../store/actions/processes/processesAction"
 import { selectProcesses } from "../../store/selectors/processesSelectors"
 import { selectApplicant } from "../../store/selectors/applicantWithProcessSelector"
-import {setApplicantReq } from "../../store/actions/processes/applicantAction"
+import { setApplicantReq } from "../../store/actions/processes/applicantAction"
 
 const SelectionProcessOfApplicantPage = () => {
   const theme = useTheme();
   const matches = useMediaQuery(theme.breakpoints.down("sm"));
-  const [toggleFiltersDrawer, setToggleFiltersDrawer] = useState(false);
-  const [toggleModal, setToggleModal] = useState(false);
   const applicant = useSelector(selectApplicant)
   const processes = applicant?.selectionProcesses;
   const levels = useSelector(selectProcesses)
@@ -38,13 +33,6 @@ const SelectionProcessOfApplicantPage = () => {
     dispatch(setProcessesReq());
   }, []);
 
-  const handleToggleFiltersDrawer = () => {
-    setToggleFiltersDrawer((oldState) => !oldState);
-  };
-
-  const handleToggleModal = () => {
-    setToggleModal((oldState) => !oldState);
-  };
 
   var settings = {
     dots: false,
@@ -99,8 +87,8 @@ const SelectionProcessOfApplicantPage = () => {
         status={"Čeka na zakazivanje"}
         id={id}
         key={i} />);
-      }
-      applicantSelections.push(<ApplicantSelection key={i} className="hiddenAd"
+    }
+    applicantSelections.push(<ApplicantSelection key={i} className="hiddenAd"
       date={""} />);
     return applicantSelections;
   };
@@ -110,24 +98,18 @@ const SelectionProcessOfApplicantPage = () => {
       <div className="l-t-rectangle"></div>
       <div className="r-b-rectangle"></div>
       {/* <AdFilters /> */}
-      <AdFilters
-        open={toggleFiltersDrawer}
-        handleClose={handleToggleFiltersDrawer}
-      />
-      <AddAdModal open={toggleModal} handleClose={handleToggleModal} />
       <div className="ads">
         {processes && processes.length > 0 && (
           <div className="active-ads">
             <div className="active-ads-header">
-            <h1>{t("selection.title")}
-            <span className="level-header-spliter">
-              |
-              </span>
-              <span className="level-header-subheader">
-                {applicant.firstName + " " + applicant.lastName}
+              <h1>{t("selection.title")}
+                <span className="level-header-spliter">
+                  |
+                </span>
+                <span className="level-header-subheader">
+                  {applicant.firstName + " " + applicant.lastName}
                 </span>
-                </h1>
-              <FilterButton onShowFilters={handleToggleFiltersDrawer} />
+              </h1>
             </div>
             <div className="active-ads-ads">
               <div className="active-ads-ads-a">
@@ -150,8 +132,7 @@ const SelectionProcessOfApplicantPage = () => {
                   style={{ width: "100%" }}
                   ref={activeAdsSliderRef}
                 >
-                  {processes.map((process, index) => 
-                    {
+                  {processes.map((process, index) => {
                     return <ApplicantSelection
                       levelNumber={index + 1}
                       levelName={process.selectionLevel.name}
@@ -163,7 +144,7 @@ const SelectionProcessOfApplicantPage = () => {
                       key={index}
                       className={index === processes.length - 1 ? "active-process" : ""}
                     />
-                    })}
+                  })}
                   {processes.length < levels.length && concatLevels()}
                 </Slider>
               </div>
@@ -180,6 +161,14 @@ const SelectionProcessOfApplicantPage = () => {
             </button>
           </div>
         )}
+        <div className="active-process-tip">
+          <h3>
+            {t("selection.tipHeader")}
+          </h3>
+          <p>
+            {t("selection.tipBody")}
+          </p>
+        </div>
       </div>
       <div className="add-ad">
         <Link className="ad-details-buttons-link" to="/selectionflow">