Jol17: View manager add

client/.env.local.example

@@ -1,3 +1,4 @@
 # REACT_APP_{NAME}
 
 REACT_APP_API_URL=http://localhost:8080
+REACT_APP_SECRET_KEY=my_secret_key

client/src/App.js

@@ -18,6 +18,7 @@ import {
 } from "./features/authentication/authenticationSlice";
 import getWeb3 from "./getWeb3";
 import HomePage from "./pages/HomePage";
+import ManagerPage from "./pages/ManagerPage";
 const jwt = require("jsonwebtoken");
 
 const App = () => {
@@ -94,7 +95,7 @@ const App = () => {
         <PrivateRoute path="/medical-records" component={HomePage} />
         <PrivateRoute path="/vaccination-certificates" component={HomePage} />
         <PrivateRoute path="/doctors" component={HomePage} />
-        <PrivateRoute path="/managers" component={HomePage} />
+        <PrivateRoute path="/managers" component={ManagerPage} />
         <PrivateRoute path="/settings" component={HomePage} />
         <Route path="/login" component={AuthenticationPage} />
         <Route component={NotFound} />

client/src/components/Sidebar/index.jsx

@@ -79,7 +79,7 @@ function Sidebar() {
           <NavLink
             to="/settings"
             className={(isActive) =>
-              "sidebar__item last-item" + (isActive ? " active-item" : "")
+              "sidebar__item" + (isActive ? " active-item" : "")
             }
           >
             <IoSettingsSharp className="sidebar__icon" />

client/src/components/Sidebar/styles.scss

@@ -1,47 +1,45 @@
 .sidebar__wrapper {
-  position: absolute;
+  position: fixed;
+  left: 0;
+  top: 15%;
   height: 80%;
-  width: 6%;
   background-color: #29a9f5;
-  top: 10%;
-  border-radius: 6px;
+  border-radius: 0 6px 6px 0;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.33);
-  padding: 33px 0;
+  z-index: 10;
 
   .sidebar__list-item {
     height: 100%;
     position: relative;
-    overflow-x: auto;
+    padding-left: 10px;
+
     .sidebar__item {
-      position: relative;
+      padding: 20px;
       cursor: pointer;
-      margin-left: auto;
-      width: 80%;
       height: 80px;
       display: flex;
       justify-content: center;
       align-items: center;
-      background-color: #29a9f5;
-      border-top-left-radius: 6px;
-      border-bottom-left-radius: 6px;
+      border-radius: 10px 0 0 10px;
+      transition: 0.2s;
+
+      &:hover {
+        transform: scale(1.05);
+      }
+
       .sidebar__icon {
         color: #fff;
-        width: 48px;
-        height: 48px;
+        width: 35px;
+        height: 35px;
       }
     }
 
     .active-item {
       background-color: #fff;
+
       .sidebar__icon {
         color: #29a9f5;
       }
     }
-
-    .last-item {
-      position: absolute;
-      bottom: 0;
-      right: 0;
-    }
   }
 }

client/src/features/manager/AddForm.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import "./styles.scss";
+import {useForm} from "react-hook-form";
+import {ErrorMessage} from "@hookform/error-message";
+
+function AddManagerForm() {
+  const {
+    register,
+    handleSubmit,
+    formState: {errors},
+  } = useForm();
+
+  const onSubmit = (data) => {
+    console.log(data);
+  };
+
+  return (
+    <form className="add-manager-form" onSubmit={handleSubmit(onSubmit)} id="add-manager-form">
+      <input
+        {...register("address", {required: "This is required."})}
+       className="form-control"
+       placeholder="New manager address..."
+      />
+      <ErrorMessage
+          errors={errors}
+          name="address"
+          render={({message}) => <p>{message}</p>}
+        />
+      <button type="button" className="btn btn-primary">ADD</button>
+    </form>
+  );
+}
+export default AddManagerForm;

client/src/features/manager/styles.scss

@@ -0,0 +1,20 @@
+.add-manager-form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 40%;
+  width: 50%;
+  padding: 20px;
+  background-color: white;
+  border-radius: 10px;
+
+  input {
+    width: 70%;
+    margin-bottom: 30px;
+  }
+
+  .btn {
+    padding: 6px 50px;
+  }
+}

client/src/index.css

@@ -28,3 +28,17 @@ body {
 iframe {
   display: none;
 }
+
+.form-control {
+  background-color: #E7E7E7;
+  border: none;
+}
+
+.btn {
+  border: none;
+  color: white;
+}
+
+.btn-primary {
+  background-color: #29A9F5;
+}

client/src/pages/HomePage/index.jsx

@@ -7,8 +7,8 @@ function HomePage() {
   return (
     <>
       <Header />
+      <Sidebar />
       <div className="body__wrapper">
-        <Sidebar />
       </div>
     </>
   );

client/src/pages/ManagerPage/index.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import "./styles.scss";
+import Header from "../../components/Header";
+import Sidebar from "../../components/Sidebar";
+import loginBackground from "../../assets/images/login-background.jpg";
+import AddManagerForm from '../../features/manager/AddForm';
+
+function HomePage() {
+  return (
+    <>
+      <Header />
+      <Sidebar />
+      <div className="body__wrapper manager-add__wrapper">
+        <AddManagerForm />
+        <img className="background-img" src={loginBackground} alt="" />
+        <div className="background__upper"></div>
+      </div>
+    </>
+  );
+}
+
+export default HomePage;

client/src/pages/ManagerPage/styles.scss

@@ -0,0 +1,23 @@
+.manager-add__wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .background__upper {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-color: black;
+    opacity: 0.4;
+  }
+
+  .background-img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  form {
+    z-index: 10;
+  }
+}