Day component UI

src/AppRoutes.js

   USER_DETAILS_PAGE,
   CANDIDATES_DETAILS_PAGE,
   SELECTION_PROCESS_PAGE,
-  SELECTION_PROCESS_OF_APPLICANT_PAGE
+  SELECTION_PROCESS_OF_APPLICANT_PAGE,
+  SCHEDULE_PAGE
 } from "./constants/pages";
 
 // import LoginPage from './pages/LoginPage/LoginPage';
 import CandidateDetailsPage from "./pages/CandidatesPage/CandidateDetailsPage";
 import SelectionProcessPage from "./pages/SelectionProcessPage/SelectionProcessPage";
 import SelectionProcessOfApplicantPage from "./pages/SelectionProcessPage/SelectionProcessOfApplicantPage";
+import SchedulePage from "./pages/SchedulePage/SchedulePage";
 
 const AppRoutes = () => (
   <Switch>
     <PrivateRoute exact path={CANDIDATES_DETAILS_PAGE} component={CandidateDetailsPage} />
     <PrivateRoute exact path={SELECTION_PROCESS_PAGE} component={SelectionProcessPage} />
     <PrivateRoute exact path={SELECTION_PROCESS_OF_APPLICANT_PAGE} component={SelectionProcessOfApplicantPage} />
+    <PrivateRoute exact path={SCHEDULE_PAGE} component={SchedulePage} />
     <Redirect from="*" to={NOT_FOUND_PAGE} />
   </Switch>
 );

src/assets/styles/components/_day-component.scss

+.day-component-container {
+  display: flex;
+  flex-direction: column;
+  height: 143px;
+  width: 174px;
+  border: 1px solid #f4f4f4;
+  padding: 17px;
+}
+
+.day-component-container:hover {
+  height: 151px;
+  width: 184px;
+  left: 489px;
+  top: 244px;
+  border-radius: 12px;
+  background: linear-gradient(0deg, #e8f7ff, #e8f7ff),
+    linear-gradient(0deg, #226cb0, #226cb0);
+  border: 1px solid #226cb0;
+}
+.day-component-day-informations-container {
+  display: flex;
+  height: fit-content;
+  margin-bottom: 5px;
+}
+
+.day-component-day-number {
+  //styleName: Bold Paragraph;
+  font-family: Source Sans Pro;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 20px;
+  letter-spacing: 0em;
+  text-align: left;
+  color: linear-gradient(0deg, #353535, #353535),
+    linear-gradient(0deg, #272727, #272727);
+}
+
+.day-component-day-name {
+  //styleName: Small paragraph;
+  font-family: Source Sans Pro;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 15px;
+  letter-spacing: 0em;
+  text-align: left;
+  align-self: flex-end;
+  margin-left: 3px;
+}
+
+.day-component-interviews-container {
+  display: flex;
+}
+
+.day-component-interviews-time {
+  font-family: Source Sans Pro;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 15px;
+  letter-spacing: 0em;
+  text-align: left;
+  align-self: flex-end;
+}
+
+.day-component-interviews-name {
+  font-family: Source Sans Pro;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 20px;
+  letter-spacing: 0em;
+  text-align: left;
+  color: #353535;
+  margin-left: 3px;
+}
+
+.day-component-more {
+  height: 15px;
+  width: fit-content;
+  font-family: Source Sans Pro;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 15px;
+  letter-spacing: 0em;
+  text-align: left;
+  color: #226CB0;
+  font-style: normal; 
+  text-decoration-line: underline;
+  cursor: pointer;
+  margin-top: 21px;
+}

src/assets/styles/components/_schedulePage.scss

+.schedule-page-container{
+    display: flex;
+}

src/components/MUI/NavbarComponent.js

     "ads",
     "selectionFlow",
     "candidates",
-    "planer",
+    "schedule",
     "patterns",
     "stats",
     "users",

src/components/Schedules/DayComponent.js

+import React from "react";
+import PropTypes from "prop-types";
+
+const DayComponent = ({ numberOfDay, nameOfDay, interviews }) => {
+  const interviewsToShow = interviews.slice(0, 2);
+  return (
+    <div className="day-component-container">
+      <div className="day-component-day-informations-container">
+        <p className="day-component-day-number">{numberOfDay}</p>
+        <p className="day-component-day-name">{nameOfDay}</p>
+      </div>
+      {interviewsToShow.map((interview, index) => (
+        <div
+          key={index}
+          className="day-component-interviews-container"
+          style={{ marginTop: "4px" }}
+        >
+          <p className="day-component-interviews-time">{interview.time}</p>
+          <p className="day-component-interviews-name">{interview.type}</p>
+        </div>
+      ))}
+      {interviews.length > 2 && (
+        <span className="day-component-more">
+          +{interviews.length - 2} stavke
+        </span>
+      )}
+    </div>
+  );
+};
+
+DayComponent.propTypes = {
+  numberOfDay: PropTypes.number,
+  nameOfDay: PropTypes.string,
+  interviews: PropTypes.array,
+};
+
+export default DayComponent;

src/constants/pages.js

 export const RESET_PASSWORD_PAGE = '/reset-password';
 export const SELECTION_PROCESS_PAGE = '/selectionFlow';
 export const SELECTION_PROCESS_OF_APPLICANT_PAGE = '/selectionflow/:id';
+export const SCHEDULE_PAGE = '/schedule'

src/i18n/resources/rs.js

     ads: 'Oglasi',
     selectionFlow: 'Tok Selekcije',
     candidates: 'Kandidati',
-    planer: 'Planer',
+    schedule: 'Planer',
     patterns: 'Šabloni',
     stats: 'Statistika',
     users: 'Korisnici',

src/main.scss

 @import './assets/styles/components/rules';
 @import './assets/styles/components/nav';
 @import './assets/styles/components/ads';
+@import './assets/styles/components/day-component';
 @import './assets/styles/layout';
 @import './assets/styles/overwrite';
 @import './assets/styles/utility';

src/pages/SchedulePage/SchedulePage.js

+import React from "react";
+import DayComponent from "../../components/Schedules/DayComponent";
+
+const SchedulePage = () => {
+  const interviews = [
+    { time: "13:30", type: "HR intervju" },
+    { time: "14:30", type: "Screening test" },
+    { time: "15:30", type: "HR intervju" },
+  ];
+  return (
+    <div className="schedule-page-container">
+      <DayComponent numberOfDay={1} nameOfDay="sre" interviews={interviews} />
+    </div>
+  );
+};
+
+export default SchedulePage;