Merge pull request #128 from recruitment-process/develop

Develop
recruitment-process · Sep 12, 2023 · 3e80950 · 3e80950
2 parents cc2c058 + d4ff439
commit 3e80950
Show file tree

Hide file tree

Showing 33 changed files with 1,324 additions and 99 deletions.
diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx
@@ -11,6 +11,7 @@ import Preloader from '../Preloader/Preloader';
 import ProtectedRoute from '../ProtectedRoute/ProtectedRoute';
 import VacanciesPage from '../VacanciesPage/VacanciesPage';
 import VacancyPage from '../VacancyPage/VacancyPage';
+import NewVacancy from '../NewVacancy/NewVacancy';
 import Main from '../Main/Main';
 import AppLayout from '../AppLayout/AppLayout';
 import CandidateFunnel from '../CandidateFunnel/CandidateFunnel';
@@ -128,6 +129,11 @@ const App = () => {
     (vacancy) => vacancy.id === vacancyId
   )?.title;
 
+  // HANDLER ADD NEW VACANCY
+  const handleAddNewVacancy = () => {
+    // request logic
+  };
+
   return (
     <div className="app__content">
       {isPreloaderActive ? (
@@ -198,8 +204,8 @@ const App = () => {
                   <ProtectedRoute
                     element={PageUnderConstruction}
                     loggedIn={loggedIn}
-                    name="Отчеты"
-                    text="Совсем скоро здесь можно будет формировать полезные и наглядные отчеты о проделанной работе"
+                    name="Настройки"
+                    text="Совсем скоро здесь можно будет настроить интерфейс системы как будет удобно именно вам, установить важные параметры для просмотра кандидатов и многое другое"
                   />
                 }
               />
@@ -289,6 +295,16 @@ const App = () => {
                 />
                 <Route path="messages" element={<p>Messages</p>} />
               </Route>
+
+              <Route
+                path="/vacancies/new-vacancy"
+                element={
+                  <NewVacancy
+                    isLoading={isLoading}
+                    onSubmit={handleAddNewVacancy}
+                  />
+                }
+              />
             </Route>
             <Route
               path="/login"

diff --git a/src/components/Main/Main.jsx b/src/components/Main/Main.jsx
@@ -7,6 +7,7 @@ import MainUrgentVacancy from '../MainUrgentVacancy/MainUrgentVacancy';
 
 import { urgentVacancies } from '../../temp/urgentVacancies';
 import MainShedule from '../MainShedule/MainShedule';
+import MainReviewWidget from '../MainReviewWidget/MainReviewWidget';
 
 const Main = () => {
   const urgentVacancyList = urgentVacancies.map((vacancy) => (
@@ -33,7 +34,7 @@ const Main = () => {
       </div>
       <div className="main-page__right-container">
         <Widget>
-          <div className="analiz" />
+          <MainReviewWidget />
         </Widget>
         <Widget>
           <MainShedule />

diff --git a/src/components/Main/Main.scss b/src/components/Main/Main.scss
@@ -41,9 +41,3 @@
     column-gap: 32px;
   }
 }
-
-.analiz {
-  height: 330px;
-  width: 100%;
-  background-color: lightgoldenrodyellow;
-}
diff --git a/src/components/MainReviewWidget/MainReviewWidget.jsx b/src/components/MainReviewWidget/MainReviewWidget.jsx
@@ -0,0 +1,51 @@
+import './MainReviewWidget.scss';
+
+import btnImage from '../../temp/images/main-review-widget-btn.png';
+
+const MainReviewWidget = () => {
+  console.log('123');
+  return (
+    <section className="main-review-widget">
+      <div className="main-review-widget__header-container">
+        <h4 className="main-review-widget__header">Анализ работы</h4>
+        <img
+          src={btnImage}
+          alt="Открытие вакансии"
+          className="main-review-widget__btn"
+        />
+      </div>
+      <div className="main-review-widget__vacancy-container">
+        <p className="main-review-widget__vacancy">Директор по маркетингу</p>
+        <p className="main-review-widget__date">23.08.23</p>
+      </div>
+      <div className="main-review-widget__skills-container">
+        <div className="main-review-widget__skill main-review-widget__skill_position_one" />
+        <div className="main-review-widget__skill main-review-widget__skill_position_two" />
+        <div className="main-review-widget__skill main-review-widget__skill_position_three" />
+        <div className="main-review-widget__skill main-review-widget__skill_position_four" />
+      </div>
+      <div className="main-review-widget__stages-container">
+        <div className="main-review-widget__stages-circle" />
+        <p className="main-review-widget__stages-name">Новые кандидаты</p>
+        <p className="main-review-widget__stages-counter">74</p>
+      </div>
+      <div className="main-review-widget__stages-container">
+        <div className="main-review-widget__stages-circle main-review-widget__stages-circle_color_light-blue" />
+        <p className="main-review-widget__stages-name">В работе</p>
+        <p className="main-review-widget__stages-counter">54</p>
+      </div>
+      <div className="main-review-widget__stages-container">
+        <div className="main-review-widget__stages-circle main-review-widget__stages-circle_color_orange" />
+        <p className="main-review-widget__stages-name">Отклоненные</p>
+        <p className="main-review-widget__stages-counter">20</p>
+      </div>
+      <div className="main-review-widget__stages-container">
+        <div className="main-review-widget__stages-circle main-review-widget__stages-circle_color_green" />
+        <p className="main-review-widget__stages-name">Офферы</p>
+        <p className="main-review-widget__stages-counter">2</p>
+      </div>
+    </section>
+  );
+};
+
+export default MainReviewWidget;
diff --git a/src/components/MainReviewWidget/MainReviewWidget.scss b/src/components/MainReviewWidget/MainReviewWidget.scss
@@ -0,0 +1,110 @@
+@import '../Shared/mixins';
+@import '../Shared/variables';
+
+.main-review-widget {
+  padding: 24px 24px 20px 24px;
+
+  &__header-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__header {
+    @include font-sans($textM, $color-black, 600, 160%, 0.32px);
+    margin: 0;
+  }
+
+  &__btn {
+    width: 97px;
+    height: 32px;
+  }
+
+  &__vacancy-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24px 0;
+  }
+
+  &__vacancy {
+    @include font-sans($textXS, $color-black, 250, 120%, 0.24px);
+    margin: 0;
+  }
+
+  &__date {
+    @include font-sans($textXS, $color-grey, 250, 120%, 0.24px);
+    margin: 0;
+  }
+
+  &__skills-container {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 16px;
+  }
+
+  &__skill {
+    display: inline-block;
+    width: 62px;
+    height: 8px;
+    border-radius: 4px;
+
+    &_position_one {
+      background-color: $color-coral;
+    }
+
+    &_position_two {
+      background-color: $light-blue;
+    }
+
+    &_position_three {
+      background-color: $color-orange;
+    }
+
+    &_position_four {
+      background-color: $color-success;
+    }
+  }
+
+  &__stages-container {
+    display: grid;
+    grid-template-columns: 32px 222px 19px;
+    grid-template-rows: 42px;
+    align-items: center;
+    border-bottom: 1px solid $color-bg-grey;
+  }
+
+  &__stages-container:last-child {
+    border-bottom: none;
+  }
+
+  &__stages-circle {
+    display: block;
+    margin-left: 8px;
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    background-color: red;
+  }
+
+  &__stages-name {
+    @include font-sans($textXS, $color-dark-grey, 250, 120%, 0.24px);
+    margin: 0;
+  }
+
+  &__stages-counter {
+    @include font-sans($textM, $color-dark-grey, 300, 170%, 0.48px);
+    text-align: right;
+    margin: 0;
+  }
+
+  &__stages-circle_color_light-blue {
+    background-color: $light-blue;
+  }
+  &__stages-circle_color_orange {
+    background-color: $color-orange;
+  }
+  &__stages-circle_color_green {
+    background-color: $color-success;
+  }
+}