made loading profile to load only when user login status is false

.env

@@ -18,7 +18,7 @@ REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"
 #"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
 
 REACT_APP_SESSION_EXPIRE_MINUTES=300000
-REACT_APP_SESSION_EXPIRE_CHECKER=60000
+REACT_APP_SESSION_EXPIRE_CHECKER=300000
 
 REACT_APP_LOGIN_ERROR_TIMEOUT=7000
 REACT_APP_SIGNUP_ERROR_TIMEOUT=7000

.env.development

@@ -18,7 +18,7 @@ REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"
 #"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
 
 REACT_APP_SESSION_EXPIRE_MINUTES=300000
-REACT_APP_SESSION_EXPIRE_CHECKER=60000
+REACT_APP_SESSION_EXPIRE_CHECKER=300000
 
 REACT_APP_LOGIN_ERROR_TIMEOUT=7000
 REACT_APP_SIGNUP_ERROR_TIMEOUT=7000

.env.poduction

@@ -18,7 +18,7 @@ REACT_APP_USERS_ENDPOINT="https://apigate.orion.g1.wrenchboard.com/svs/user"
 #"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
 
 REACT_APP_SESSION_EXPIRE_MINUTES=300000
-REACT_APP_SESSION_EXPIRE_CHECKER=60000
+REACT_APP_SESSION_EXPIRE_CHECKER=300000
 
 REACT_APP_LOGIN_ERROR_TIMEOUT=7000
 REACT_APP_SIGNUP_ERROR_TIMEOUT=7000

.gitattributes

@@ -0,0 +1,15 @@
+# Set the default behavior, in case people don't have core.autocrlf set.
+* text=auto
+
+# Explicitly declare text files you want to always be normalized and converted
+# to native line endings on checkout.
+*.jsx text
+*.js text
+*.css text
+
+# Declare files that will always have CRLF line endings on checkout.
+*.md text eol=crlf
+
+# Denote all files that are truly binary and should not be modified.
+*.sh binary
+

run.sh

@@ -6,12 +6,15 @@ export NODE_ENV="${NODE_ENV:-development}"
 
 if [ $NODE_ENV == "development" ]; then
   # this runs webpack-dev-server with hot reloading
+  echo "Development build"
   npm install --legacy-peer-deps
   npm start
 else
   # build the app and serve it via nginx
+  echo "Production build"
   npm install --legacy-peer-deps
   npm run build
   nginx -g 'daemon off;' -c /usr/src/app/nginx.conf
   nginx -c /usr/src/app/nginx.conf
-fi
+fi
+

src/Routers.jsx

@@ -50,7 +50,7 @@ export default function Routers() {
           element={<UpdatePasswordPages />}
         />
         <Route path="/vemail" element={<VerifyLinkPages />} />
-        <Route exact path="/verify-you" element={<VerifyYouPages />} />
+        <Route exact path="/outmessage" element={<VerifyYouPages />} />
 
         {/* private route */}
         <Route element={<AuthRoute />}>
@@ -72,6 +72,7 @@ export default function Routers() {
           <Route exact path="/notification" element={<Notification />} />
           <Route exact path="/mytask" element={<MyTaskPage />} />
           <Route exact path="/myjobs" element={<MyJobsPage />} />
+          <Route exact path="/my-active-jobs"  element={<MyJobsPage />} />
           <Route
             exact
             path="/my-collection/collection-item"

src/components/AuthPages/AuthLayout.jsx

@@ -1,24 +1,35 @@
 import React from "react";
-import loginThumb from "../../assets/images/auth-thumb.svg";
-import logo from "../../assets/images/wrenchboard.png"; //logo-1.svg";
+import { Link } from "react-router-dom";
 
 export default function LoginLayout({ slogan, children }) {
-  const checkScreenHeight = window.screen.height;
-  let screen = "";
-  if (checkScreenHeight <= 950) {
-    screen = "h-screen";
-    // screen = "h-[950px]";
-  } else {
-    screen = "h-screen";
-  }
   return (
-    <div className="layout-wrapper login">
-      <div className={`main-wrapper login-wrapper w-full ${screen}`}>
-        <div className="flex w-full h-full">
-
+    <div className={`layout-wrapper login`}>
+      <div className={`main-wrapper login-wrapper w-full h-screen overflow-y-auto sm:p-20 p-10`}>
+        <div className="w-full h-full">
           <div className="flex-1 flex justify-center items-center">
             {children && children}
           </div>
+          <div className="flex-1 flex justify-center items-center p-10">
+            <div className="flex items-center">
+              <Link to="#" className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]">
+                About
+              </Link>
+              <Link to="#" className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]">
+                Services
+              </Link>
+              <Link to="#" className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]">
+                Contact Us
+              </Link>
+            </div>
+          </div>
+          <div className="flex-1 flex justify-center items-center p-10">
+            <p className="text-black text-[15px] px-2 font-medium flex items-center">
+             <span className="text-3xl mt-2 mr-1">©</span>  2023 - {" "}
+              <Link to="/" className="text-[#009ef7] ml-1">
+                WrenchBoard
+              </Link>{" "}
+            </p>
+          </div>
         </div>
       </div>
     </div>

src/components/AuthPages/ForgotPassword/index.jsx

@@ -11,6 +11,7 @@ export default function ForgotPassword() {
   // email
   const [email, setMail] = useState("");
   const [msgError, setMsgError] = useState('');
+  const [msgSuccess, setMsgSuccess] = useState(false)
 
   const navigate = useNavigate();
   const userApi = new usersService();
@@ -20,8 +21,8 @@ export default function ForgotPassword() {
   };
 
   const humanChecker = () => {
-    setValue(!checked);
-  };
+    setValue(!checked)
+  }
 
   const resetHandler = async () => {
     if (email == '') {
@@ -30,24 +31,16 @@ export default function ForgotPassword() {
       setMsgError('Check if you are human')
     }
 
-    if (email != '' && checked) {
+    if (email !== '' && checked) {
       const reqData = { email }
       setResetLoading(true)
       try {
         const res = await userApi.StartResetPassword(reqData)
         if (res.status === 200) {
-          const { data } = res
-          if (data.status == -1) {
-            setMsgError('This is an incorrect or duplicate email')
-            setResetLoading(false)
-          } else if (data.status > 0) {
-            setResetLoading(false)
-            navigate("/verify-you", { replace: true })
-          } else{
-            setMsgError("reset was not successful")
-            setResetLoading(false)
-          }
+          setMsgSuccess(true)
           setMail("")
+          setValue(false)
+          setResetLoading(false)
         }
       } catch (error) {
         setResetLoading(false)
@@ -79,12 +72,10 @@ export default function ForgotPassword() {
           <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5">
             <div className="flex flex-col justify-center w-full h-full px-5">
               <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3" style={{
-                  fontSize: 'calc(1rem + .6vw)'
-                }}>
+                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
                   Forget Password
                 </h1>
-                <span className="text-gray-400 font-medium text-xl">Enter your email to reset your password.</span>
+                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">Enter your email to reset your password.</span>
               </div>
               <div className="input-area">
                 <div className="input-item mb-10">
@@ -98,7 +89,6 @@ export default function ForgotPassword() {
                     iconName="message"
                   />
                 </div>
-                {msgError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">{msgError}</div>}
                 {/* hCaptha clone for the time being */}
                 <div className="mb-10">
                   <div className="w-[303px] h-[78px] mx-auto overflow-hidden">
@@ -108,7 +98,7 @@ export default function ForgotPassword() {
                         <div className="relative table top-0 h-full">
                           <div className="table-cell align-middle">
                             <div className="relative w-[30px] h-[30px] mx-[15px]">
-                              <input type="checkbox" name="human-checkbox" id="human-checkbox" className="w-[28px] h-[28px] border-[1px] rounded border-gray-400 checked:bg-white" onClick={humanChecker} />
+                              <input type="checkbox" name="human-checkbox" id="human-checkbox" className="w-[28px] h-[28px] border-[1px] rounded border-gray-400 checked:bg-white" checked={checked} onChange={humanChecker} />
                             </div>
                           </div>
                         </div>
@@ -126,12 +116,15 @@ export default function ForgotPassword() {
                     </div>
                   </div>
                 </div>
+                {msgError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">{msgError}</div>}
+                {msgSuccess && <div className="relative p-4 text-[#44228c] bg-[#e3d7fb] border-[#d5c4f9] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">If we find your email, you will receive a link to reset your password. Please use or <Link to='/contact' className="text-[#4687ba] hover:text-[#009ef7]">contact form</Link> if you did not get our message after few minutes.</div>}
+
                 <div className="signin-area mb-3.5">
                   <div className="flex justify-center items-center gap-2">
                     <button
                       type="button"
                       onClick={resetHandler}
-                      className={`rounded-[0.475rem] mb-6 text-[1.15rem] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+                      className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
                     >
                       {resetLoading ? (
                         <div className="signup btn-loader"></div>
@@ -142,7 +135,7 @@ export default function ForgotPassword() {
                     <button
                       type="button"
                       onClick={() => navigate("/login")}
-                      className={`rounded-[0.475rem] mb-6 text-[1.15rem] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem] `}
+                      className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem] `}
                     >
                       Cancel
                     </button>

src/components/AuthPages/Login/index.jsx

@@ -9,7 +9,13 @@ import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
 
+import { useDispatch, useSelector } from "react-redux";
+import {updateUserDetails} from '../../../store/UserDetails'
+
 export default function Login() {
+
+  const dispatch = useDispatch()
+
   const [checked, setValue] = useState(false);
   const [loginLoading, setLoginLoading] = useState(false);
 
@@ -51,21 +57,13 @@ export default function Login() {
         //debugger;
         // if (email === "support@mermsemr.com") {
         if (loginResult.data.status > 0 && loginResult.data.internal_return == 100 && loginResult.data.session != '') { // just for a start
-          localStorage.setItem("email", `${loginResult.data.email}`);
           localStorage.setItem("member_id", `${loginResult.data.member_id}`);
           localStorage.setItem("uid", `${loginResult.data.uid}`);
           localStorage.setItem("session_token", `${loginResult.data.session}`);
-          localStorage.setItem("added", `${loginResult.data.added}`);
-          localStorage.setItem("city", `${loginResult.data.city}`);
-          localStorage.setItem("country", `${loginResult.data.country}`);
-          localStorage.setItem("firstname", `${loginResult.data.firstname}`);
-          localStorage.setItem("last_login", `${loginResult.data.last_login}`);
-          localStorage.setItem("lastname", `${loginResult.data.lastname}`);
-          localStorage.setItem("state", `${loginResult.data.state}`);
-          localStorage.setItem("zip_code", `${loginResult.data.zip_code}`);
           localStorage.setItem("session", `${loginResult.data.session}`);
           setLoginLoading(true);
           // userApi.getUserReminders(); //testing
+          dispatch(updateUserDetails(loginResult.data))
           setTimeout(() => {
             navigate("/", { replace: true });
             setLoginLoading(false);
@@ -99,12 +97,10 @@ export default function Login() {
           <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5">
             <div className="w-full">
               <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3" style={{
-                  fontSize: 'calc(1rem + .6vw)'
-                }}>
+                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
                   Sign In to WrenchBoard
                 </h1>
-                <span className="text-gray-400 font-medium text-xl">New Here? <Link to='/signup' className='font-semibold text-[#4687ba] hover:text-[#009ef7] transition'>Create an Account</Link></span>
+                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">New Here? <Link to='/signup' className='font-semibold text-[#4687ba] hover:text-[#009ef7] transition'>Create an Account</Link></span>
               </div>
               <div className="input-area">
                 <div className="input-item mb-5">
@@ -118,7 +114,6 @@ export default function Login() {
                     iconName="message"
                   />
                 </div>
-    <input type="text" placeholder="boyce" />
 
                 <div className="input-item mb-5">
                   <InputCom
@@ -165,15 +160,14 @@ export default function Login() {
                   Forgot Password
                 </a>
               </div> */}
-                {loginError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px]">Invalid username or password- Please <Link to='/#' className='text-[#009ef7]'>reset your password</Link> or <Link to='/signup' className='text-[#009ef7]'>create a new account</Link></div>}
-                {msgError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">{msgError}</div>}
+                {loginError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px] text-[13px]">Invalid username or password- Please <Link to='/#' className='text-[#009ef7]'>reset your password</Link> or <Link to='/signup' className='text-[#009ef7]'>create a new account</Link></div>}
+                {msgError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">{msgError}</div>}
                 <div className="signin-area mb-3.5">
                   <div className="flex justify-center">
                     <button
                       onClick={doLogin}
                       type="button"
-                      className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center ${loginLoading ? "active" : ""
-                        }`}
+                      className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
                     >
                       {loginLoading ? (
                         <div className="signup btn-loader"></div>
@@ -194,7 +188,7 @@ export default function Login() {
                   </a>
                 </p>
               </div> */}
-                <div className="pt-5 text-[#181c32] text-center font-semibold text-base">This site is protected by hCaptcha and the our Privacy Policy and Terms of Service apply.</div>
+                <div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">This site is protected by hCaptcha and the our Privacy Policy and Terms of Service apply.</div>
               </div>
             </div>
           </div>
@@ -216,8 +210,8 @@ const BrandBtn = ({
         className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F]  items-center font-medium cursor-pointer"
       >
         <img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
-        <span className="text-lg text-thin-light-gray font-normal">
-          Sign In with {brand}
+        <span className="text-lg text-thin-light-gray font-normal text-[15px]">
+          Continue with {brand}
         </span>
       </a>
     </div>

src/components/AuthPages/SignUp/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useNavigate, Link } from "react-router-dom";
 import facebookLogo from "../../../assets/images/facebook-4.svg";
 import WrenchBoard from "../../../assets/images/wrenchboard.png";
@@ -6,10 +6,10 @@ import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 
 export default function SignUp() {
-  const [signUpLoading, setSignUpLoading] = useState(false)
+  const [signUpLoading, setSignUpLoading] = useState(false);
   const [checked, setValue] = useState(false);
   // for the catch error
-  const [msgError, setMsgError] = useState('');
+  const [msgError, setMsgError] = useState("");
   const [showPassword, setShowPassword] = useState(false);
   const [countries, setCountries] = useState([]);
 
@@ -18,7 +18,7 @@ export default function SignUp() {
     first_name: "",
     last_name: "",
     email: "",
-    password: ""
+    password: "",
   });
 
   const handleInputChange = (event) => {
@@ -39,31 +39,36 @@ export default function SignUp() {
   const userApi = new usersService();
 
   // Get Country Api
-  const getCountryList = async () => {
-    const res = await userApi.getSignupCountryData()
+  const getCountryList = useCallback(async () => {
+    const res = await userApi.getSignupCountryData();
 
     try {
       if (res.status === 200) {
-        const { signup_country } = await res.data
-        setCountries(signup_country)
+        const { signup_country } = await res.data;
+        setCountries(signup_country);
       } else if (res.data.result !== 100) {
-        setCountries('Nothing see here!')
+        setCountries("Nothing see here!");
       }
     } catch (error) {
-      throw new Error(error)
+      throw new Error(error);
     }
-  }
+  }, []);
 
   const handleSignUp = async () => {
-    let { country, first_name, last_name, email, password } = formData
+    let { country, first_name, last_name, email, password } = formData;
 
-    if (email === '' && password === '' && first_name === '') {
-      setMsgError('Please fill in fields')
+    if (email === "" && password === "" && first_name === "") {
+      setMsgError("Please fill in fields");
     }
 
     try {
-      if (email !== '' && password !== '' && first_name !== '' && last_name !== '') {
-        setSignUpLoading(true)
+      if (
+        email !== "" &&
+        password !== "" &&
+        first_name !== "" &&
+        last_name !== ""
+      ) {
+        setSignUpLoading(true);
         const reqData = {
           country: country,
           firstname: first_name,
@@ -72,50 +77,40 @@ export default function SignUp() {
           username: email,
           password: password,
           terms: 1,
-          news: 1
-        }
+          news: 1,
+        };
 
-        const res = await userApi.CreateUser(reqData)
+        const res = await userApi.CreateUser(reqData);
 
         if (res.status === 200) {
-          const { data } = res
-          if (data.status === -1 && data.acc === 'DULPICATE') {
-            setMsgError('This account has been already created')
-            setSignUpLoading(false)
+          const { data } = res;
+          if (data.status === -1 && data.acc === "DULPICATE") {
+            setMsgError("This account has been already created");
+            setSignUpLoading(false);
           }
-          if (data && data.status === '1') {
+          if (data && data.status === "1") {
             setTimeout(() => {
-              navigate("/verify-you", { replace: true });
-              setSignUpLoading(false)
-            }, 2000)
-          } else {
-            setSignUpLoading(false)
-            setMsgError('This account does not exist')
+              navigate("/outmessage", { replace: true });
+              setSignUpLoading(false);
+            }, 2000);
           }
         } else {
-          setSignUpLoading(false)
-          setMsgError('An error occurred')
+          setSignUpLoading(false);
+          setMsgError("An error occurred");
         }
       }
     } catch (error) {
-      throw new Error(error)
+      throw new Error(error);
     } finally {
       setTimeout(() => {
-        setMsgError(null)
-      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT)
-      setFormData({
-        first_name: '',
-        last_name: '',
-        email: '',
-        country: '',
-        password: ''
-      })
+        setMsgError(null);
+      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
     }
-  }
+  };  
 
   useEffect(() => {
-    getCountryList()
-  })
+    getCountryList();
+  });
 
   return (
     <>
@@ -124,36 +119,52 @@ export default function SignUp() {
           <div className=" h-full">
             <div className="flex-1 flex justify-center items-center">
               <div className="w-full">
-                <div className='mb-12'>
-                  <Link to='#'>
-                    <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
+                <div className="mb-12">
+                  <Link to="#">
+                    <img
+                      src={WrenchBoard}
+                      alt="wrenchboard"
+                      className="h-10 mx-auto"
+                    />
                   </Link>
                 </div>
                 <div className="content-wrapper login shadow-md w-full lg:max-w-[600px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5 mb-7">
                   <div>
                     <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-                      <h1 className="text-[#181c32] font-semibold dark:text-white mb-3" style={{
-                        fontSize: 'calc(1rem + .6vw)'
-                      }}>
+                      <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
                         Create Account
                       </h1>
-                      <span className="text-gray-400 font-medium text-xl">Already have an account? <Link to='/login' className='font-semibold text-[#4687ba] hover:text-[#009ef7] transition'>Sign in here</Link></span>
+                      <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                        Already have an account?{" "}
+                        <Link
+                          to="/login"
+                          className="font-semibold text-[#4687ba] hover:text-[#009ef7] transition"
+                        >
+                          Sign in here
+                        </Link>
+                      </span>
                     </div>
                     <button
                       type="button"
-                      className={`rounded-[0.475rem] w-full mb-6 text-[1.15rem] h-[42px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem]`}
+                      className={`rounded-[0.475rem] w-full mb-6 text-[15px] h-[42px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem]`}
                     >
-                      <img className="mr-3 h-6" src={facebookLogo} alt="logo-icon(s)" />
+                      <img
+                        className="mr-3 h-6"
+                        src={facebookLogo}
+                        alt="logo-icon(s)"
+                      />
                       Sign in with Facebook
                     </button>
                     <div className="w-full flex items-center gap-2">
                       <div className="border-b border-[#eff2f5] max-w-[50%] w-full"></div>
-                      <span className="text-[#b5b5c3] font-medium text-[0.7rem] w-[2%]">OR</span>
+                      <span className="text-[#b5b5c3] font-medium text-[0.7rem] w-[2%]">
+                        OR
+                      </span>
                       <div className="border-b border-[#eff2f5] max-w-[50%] w-full"></div>
                     </div>
                     <div className="input-area">
                       <SelectOption
-                        label='Country'
+                        label="Country"
                         data={countries}
                         name="country"
                         value={formData.country}
@@ -196,14 +207,20 @@ export default function SignUp() {
                           placeholder="● ● ● ● ● ●"
                           label="Password"
                           name="password"
-                          type={showPassword ? 'text' : 'password'}
+                          type={showPassword ? "text" : "password"}
                           onClick={togglePasswordVisibility}
-                          passIcon={showPassword ? "show-password" : "hide-password"}
+                          passIcon={
+                            showPassword ? "show-password" : "hide-password"
+                          }
                           value={formData.password}
                           inputHandler={handleInputChange}
                         />
                       </div>
-                      {msgError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">{msgError}</div>}
+                      {msgError && (
+                        <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">
+                          {msgError}
+                        </div>
+                      )}
                       <div className="forgot-password-area flex justify-between items-center mb-6">
                         <div className="remember-checkbox flex items-center space-x-2.5">
                           <button
@@ -228,15 +245,15 @@ export default function SignUp() {
                           </button>
                           <span
                             onClick={rememberMe}
-                            className="text-base cursor-default text-dark-gray dark:text-white"
+                            className="cursor-default text-dark-gray dark:text-white text-[15px]"
                           >
                             I agree with all
-                            <a
+                            <Link
                               href="#"
                               className="text-base text-[#4687ba] hover:text-[#009ef7] mx-1 inline-block"
                             >
                               terms and condition
-                            </a>
+                            </Link>
                           </span>
                         </div>
                       </div>
@@ -245,8 +262,7 @@ export default function SignUp() {
                           <button
                             type="button"
                             onClick={handleSignUp}
-                            className={`rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] ${signUpLoading ? "active" : ""
-                              }`}
+                            className={`rounded-[0.475rem] mb-6 text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px]`}
                           >
                             {signUpLoading ? (
                               <div className="signup btn-loader"></div>
@@ -261,6 +277,27 @@ export default function SignUp() {
                 </div>
               </div>
             </div>
+            <div className="flex-1 flex justify-center items-center p-10">
+            <div className="flex items-center">
+              <Link to="#" className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]">
+                About
+              </Link>
+              <Link to="#" className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]">
+                Services
+              </Link>
+              <Link to="#" className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]">
+                Contact Us
+              </Link>
+            </div>
+          </div>
+          <div className="flex-1 flex justify-center items-center p-10">
+            <p className="text-black text-[15px] px-2 font-medium flex items-center">
+             <span className="text-3xl mt-2 mr-1">©</span>  2023 - {" "}
+              <Link to="/" className="text-[#009ef7] ml-1">
+                WrenchBoard
+              </Link>{" "}
+            </p>
+          </div>
           </div>
         </div>
       </div>
@@ -273,26 +310,35 @@ const SelectOption = ({
   name,
   inputHandler,
   value,
-  data // passing the data from parent 
+  data, // passing the data from parent
 }) => {
   return (
     <div className="input-com mb-7">
       <div className="flex items-center justify-between">
         <label
-          className="input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5"
+          className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold block mb-2.5"
           htmlFor={name}
         >
           {label}
         </label>
       </div>
       <div>
-        <select name={name} id={name} className="input-wrapper border border-[#f5f8fa]] dark:border-[#5e6278] w-full rounded-[0.475rem] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent " onChange={inputHandler} value={value}>
+        <select
+          name={name}
+          id={name}
+          className="input-wrapper border border-[#f5f8fa]] dark:border-[#5e6278] w-full rounded-[0.475rem] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent "
+          onChange={inputHandler}
+          value={value}
+        >
           <option value={""}>Select your Country</option>
-          {data?.length > 0 && data?.map((item, idx) => (
-            <option value={item[0]} key={idx}>{item[1]}</option>
-          ))}
+          {data?.length > 0 &&
+            data?.map((item, idx) => (
+              <option value={item[0]} key={idx}>
+                {item[1]}
+              </option>
+            ))}
         </select>
       </div>
     </div>
-  )
-}
+  );
+};

src/components/AuthPages/VerifyLink/index.jsx

@@ -1,96 +1,182 @@
-import { useState, useLayoutEffect, useCallback } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { useLocation, Link, useNavigate } from "react-router-dom";
 import AuthLayout from "../AuthLayout";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import usersService from "../../../services/UsersService";
-import WrenchBoard from "../../../assets/images/wrenchboard.png"
+import WrenchBoard from "../../../assets/images/wrenchboard.png";
+import debounce from "../../../hooks/debounce";
 
 export default function VerifyLink() {
-  const [pageLoader, setPageLoader] = useState(true)
-  const [linkSuccess, setLinkSuccess] = useState(false)
-  const [linkError, setLinkError] = useState(false)
-  const navigate = useNavigate()
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [msgError, setMsgError] = useState("");
+  const [linkLoader, setLinkLoader] = useState(false);
+  const [pageLoader, setPageLoader] = useState(true);
+  const [linkSuccess, setLinkSuccess] = useState(true);
+  const navigate = useNavigate();
   const location = useLocation();
-  const queryParams = new URLSearchParams(location?.search)
-  const token = queryParams.get('vlink')
+  const queryParams = new URLSearchParams(location?.search);
+  const token = queryParams.get("vlnk");
+  const userApi = new usersService();
 
-  const verifyEmail = useCallback(
-    async (code) => {
-      const userApi = new usersService()
-  
-      try {
-        const verifyRes = await userApi.verifyEmail(code)
-        if (verifyRes.status === 200) {
-          let { data } = verifyRes
-  
-          if (data && data.internal_return === 0 && data.status_text === 'Link Verfied') {
-            setPageLoader(false)
-            setLinkSuccess(true)
+  // email
+  const handleEmail = (e) => {
+    setEmail(e.target.value);
+  };
+  // password
+  const handlePassword = (e) => {
+    setPassword(e.target.value);
+  };
+
+  // if verification is okay. set a complete signup form
+  const completeSignup = async () => {
+    if (email === "" && password === "") {
+      setMsgError("Please fill in fields");
+    }
+
+    try {
+      if (email !== "" && password !== "") {
+        setLinkLoader(true);
+        var postData = {
+          username: email,
+          password: password,
+          login_mode: 100,
+          sessionid: "STARTER-NOTREAL",
+          verify_link: token,
+          action: 11012,
+        };
+        const res = await userApi.CompleteSignUp(postData);
+
+        if (res.status === 200) {
+          const { data } = res;
+          if (
+            data?.status > 0 &&
+            data?.internal_return == 100 &&
+            data?.session != ""
+          ) {
+            localStorage.setItem("email", `${data?.email}`);
+            localStorage.setItem("member_id", `${data?.member_id}`);
+            localStorage.setItem("session_token", `${data?.session}`);
+            localStorage.setItem("session", `${data?.session}`);
+
+            navigate("/", { replace: true });
+            setLinkLoader(false);
           } else {
-            setPageLoader(false)
-            setLinkError(true)
+            setLinkLoader(false);
+            setMsgError("Invalid Link or Password Combination");
           }
-          console.log(data)
+        } else {
+          setLinkLoader(false);
+          setLinkSuccess(false)
+          setMsgError("An error occurred");
         }
-      } catch (error) {
-        setPageLoader(false)
-        setLinkError(true)
-        throw new Error(error)
       }
-    }, []
-  )
+    } catch (error) {
+      setLinkLoader(false);
+      setLinkSuccess(false)
+      throw new Error(error);
+    } finally {
+      setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
+    }
+  };
 
-  useLayoutEffect(() => {
-    verifyEmail(token)
-  })
+  // for verifying the incoming verification link and render the correct component
+  const verifyEmail = useCallback(async (code) => {
+    try {
+      const verifyRes = await userApi.verifyEmail(code);
+      if (verifyRes.status === 200) {
+        let { data } = verifyRes;
 
-  console.log(token)
+        if (
+          data &&
+          data.internal_return >= 0 &&
+          data.status_text === "Link Verfied"
+        ) {
+          setPageLoader(false);
+        } else {
+          setPageLoader(false);
+          setLinkSuccess(false);
+        }
+      }
+    } catch (error) {
+      setPageLoader(false);
+      setLinkSuccess(false);
+      throw new Error(error);
+    }
+  }, []);
+
+  // delay verify requests by 10000ms
+  const debouncedEmail = debounce(verifyEmail, 1000);
+
+  useEffect(() => {
+    debouncedEmail(token);
+  }, []);
 
   return (
     <>
-      <AuthLayout
-        slogan="Welcome to WrenchBoard"
-      >
+      <AuthLayout slogan="Welcome to WrenchBoard">
         {pageLoader ? (
           <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
         ) : (
           <div className="w-full">
-            <div className='mb-12'>
-              <Link to='#'>
-                <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
+            <div className="mb-12">
+              <Link to="#">
+                <img
+                  src={WrenchBoard}
+                  alt="wrenchboard"
+                  className="h-10 mx-auto"
+                />
               </Link>
             </div>
             <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
               <div className="w-full">
                 <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-                  <h1 className="text-[#181c32] font-semibold dark:text-white mb-3" style={{
-                    fontSize: 'calc(1rem + .6vw)'
-                  }}>
-                    {linkError && 'Invalid verification link'}
-                    {linkSuccess && 'Sign In to WrenchBoard'}
+                  <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+                    {linkSuccess
+                      ? "Sign In to WrenchBoard"
+                      : "Invalid verification link"}
                   </h1>
                 </div>
                 {/* If the verification was a success */}
-                {linkSuccess && <SuccessfulComponent />}
-
-                {/* If the verification was unsuccessful */}
-                {linkError && <ErrorComponent onClick={() => navigate('/login')} />}
+                {linkSuccess ? (
+                  <SuccessfulComponent
+                    email={email}
+                    password={password}
+                    handleEmail={handleEmail}
+                    handlePassword={handlePassword}
+                    onSubmit={completeSignup}
+                    msgErr={msgError}
+                    loader={linkLoader}
+                  />
+                ) : (
+                  <ErrorComponent onClick={() => navigate("/login")} />
+                )}
               </div>
             </div>
           </div>
         )}
       </AuthLayout>
     </>
-  )
+  );
 }
 
-const SuccessfulComponent = ({ onClick }) => (
+const SuccessfulComponent = ({
+  onSubmit,
+  password,
+  handlePassword,
+  email,
+  handleEmail,
+  msgErr,
+  loader,
+}) => (
   <div className="input-area">
     {/* INPUT */}
     <div className="mb-5">
       <InputCom
-        // value={password}
-        // inputHandler={handlePassword}
+        value={email}
+        inputHandler={handleEmail}
         placeholder="support@mermsemr.com"
         label="Email"
         name="email"
@@ -100,8 +186,8 @@ const SuccessfulComponent = ({ onClick }) => (
     </div>
     <div className="mb-5">
       <InputCom
-        // value={password}
-        // inputHandler={handlePassword}
+        value={password}
+        inputHandler={handlePassword}
         placeholder="● ● ● ● ● ●"
         label="Password"
         name="password"
@@ -109,35 +195,45 @@ const SuccessfulComponent = ({ onClick }) => (
         iconName="password"
       />
     </div>
+    {msgErr && (
+      <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
+        {msgErr}
+      </div>
+    )}
     <div className="signin-area mb-3.5">
       <button
-        onClick={onClick}
+        onClick={onSubmit}
         type="button"
-        className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center $`}
+        className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
       >
-        <span>Continue</span>
+        {loader ? (
+          <div className="signup btn-loader"></div>
+        ) : (
+          <span>Continue</span>
+        )}
       </button>
     </div>
   </div>
-)
+);
 
 const ErrorComponent = ({ onClick }) => (
   <div className="input-area">
     <div className="my-5">
       <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
-        This error occurs because you have already verified this link or the link has expired. Try login or reset password. If none worked, try to create the account from the start.
+        This error occurs because you have already verified this link or the
+        link has expired. Try login or reset password. If none worked, try to
+        create the account from the start.
       </p>
     </div>
 
-
     <div className="signin-area flex justify-center mb-3.5">
       <button
         onClick={onClick}
         type="button"
-        className={`rounded-[0.475rem] mb-6 text-[1.15rem] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+        className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
       >
         <span>Return Home</span>
       </button>
     </div>
   </div>
-)
+);

src/components/AuthPages/VerifyYou/index.jsx

@@ -1,31 +1,49 @@
+import { useNavigate, Link } from "react-router-dom";
 import AuthLayout from "../AuthLayout";
+import WrenchBoard from "../../../assets/images/wrenchboard.png"
 
 export default function VerifyYou() {
+  const navigate = useNavigate()
   return (
     <>
       <AuthLayout
         slogan="Welcome to WrenchBoard"
       >
-        <div className="content-wrapper login dark:bg-dark-white w-full lg:max-w-[500px] 2xl:w-[828px] rounded-xl flex flex-col justify-center sm:p-7 p-5">
-          <div className="w-full">
-            <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-              <h1 className="text-[#181c32] font-semibold dark:text-white mb-3" style={{
-                fontSize: 'calc(1rem + .6vw)'
-              }}>
-                Verification Sent
-              </h1>
+        <div className="w-full">
+          <div className='mb-12'>
+            <Link to='#'>
+              <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
+            </Link>
+          </div>
+          <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
+            <div className="w-full">
+              <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+                  Let's verify your email now
+                </h1>
+                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">Check your email.</span>
+              </div>
+              <div className="input-area">
+                <div className="mb-5">
+                  <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
+                    <b>Verify Email.</b> Help us secure your WrenchBoard account by verifying your email registration address. Verification will let you access all of WrenchBoard's features.
+                  </p>
+                </div>
+                <div className="mb-5">
+                  <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
+                    If you do not receive the confirmation message within a few minutes of signing up, please check your Junk E-mail folder just in case the confirmation email got delivered there instead of your inbox. If so, select the confirmation message and click Not Junk, which will allow future messages to get through.
+                  </p>
+                </div>
+              </div>
+            <div className="signin-area flex justify-center mb-3.5">
+              <button
+                onClick={() => navigate("/")}
+                type="button"
+                className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+              >
+                <span>Return Home</span>
+              </button>
             </div>
-            <div className="input-area">
-              <div className="mb-5">
-                <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
-                  To complete the verification process, you should check your email inbox and look for the verification email. It may take a few minutes for the email to arrive, so be patient. Once you receive the email, open it and click on the verification link provided.
-                </p>
-              </div>
-              <div className="mb-5">
-                <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
-                  If you haven't received the verification email after a reasonable amount of time, make sure to check your spam or junk mail folder. It's also possible that the email was sent to the wrong email address, so double-check that you entered your email address correctly.
-                </p>
-              </div>
             </div>
           </div>
         </div>

src/components/Helpers/Inputs/InputCom/index.jsx

@@ -14,9 +14,7 @@ export default function InputCom({
   forgotPassword,
   onClick,
   disable,
-  blurHandler,
-  onMouseEnter,
-  onMouseLeave
+  blurHandler
 }) {
   const inputRef = useRef(null)
   // Entry Validation
@@ -70,20 +68,20 @@ export default function InputCom({
       <div className="flex items-center justify-between">
       {label && (
         <label
-          className="input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5"
+          className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block mb-2.5"
           htmlFor={name}
         >
           {label}
         </label>
       )}
-      {forgotPassword && <Link to="/forgot-password" className="text-base text-[#4687ba] hover:text-[#009ef7]">Forgot Password?</Link>}
+      {forgotPassword && <Link to="/forgot-password" className="text-[13.975px] leading-[20.9625px] text-[#019ef7] hover:text-[#009ef7]">Forgot Password?</Link>}
       </div>
       <div className="input-wrapper border border-[#f5f8fa]] dark:border-[#5e6278] w-full rounded-[0.475rem] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ">
         <input
           placeholder={placeholder}
           value={value}
           onChange={inputHandler}
-          className="input-field placeholder:text-base text-bese px-6 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
+          className="input-field placeholder:text-base px-6 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
           type={type}
           id={name}
           name={name}
@@ -92,8 +90,6 @@ export default function InputCom({
           ref={inputRef}
           readOnly={disable}
           onBlur={blurHandler}
-          onMouseEnter={onMouseEnter}
-          onMouseLeave={onMouseLeave}
         />
         {iconName && (
           <div className="absolute right-6 bottom-[10px] z-10">

src/components/Home/Hero.jsx

@@ -9,6 +9,7 @@ import slider3 from "../../assets/images/slider-3.jpg";
 import CountDown from "../Helpers/CountDown";
 import SliderCom from "../Helpers/SliderCom";
 import HomeSliders from "./HomeSliders";
+import { useSelector } from "react-redux";
 
 export default function Hero({ className }) {
   const settings = {
@@ -20,6 +21,8 @@ export default function Hero({ className }) {
   };
   const sildeData =null;
   const [addFavorite, setValue] = useState(false);
+
+  const {userDetails} = useSelector((state) => state?.userDetails)
   const favoriteHandler = () => {
     if (!addFavorite) {
       setValue(true);
@@ -29,6 +32,11 @@ export default function Hero({ className }) {
       toast.warn("Remove to Favorite List");
     }
   };
+
+  let loginDate = userDetails?.last_login.split(' ')[0]
+  let {firstname, lastname, email, profile_pic} = userDetails
+  let userEmail = email.split('@')[0]
+
   return (
     <div
       className={`w-full lg:h-[444px] h-full lg:flex lg:p-8 p-4 justify-between items-center lg:space-x-28 rounded-2xl overflow-hidden ${
@@ -47,19 +55,19 @@ export default function Hero({ className }) {
             Welcome
           </h1>
           <span className="text-[18px] font-thin tracking-wide text-white">
-            Last Login :  10-10-2026
+            Last Login :  {loginDate}
           </span>
         </div>
         {/* user */}
         <div className="flex items-center space-x-3">
           <div className="w-14 h-14 flex justify-center items-center rounded-full overflow-hidden">
-            <img src={heroUser} alt="" />
+            <img src={profile_pic != '' ? profile_pic : heroUser} alt="" />
           </div>
           <div>
             <p className="text-xl tracking-wide font-bold antise text-white">
-              Brokln Simons
+              {`${firstname} ${lastname}`}
             </p>
-            <p className="text-sm tracking-wide text-white">@broklinslam_75</p>
+            <p className="text-sm tracking-wide text-white">@{userEmail}</p>
           </div>
         </div>
         {/* countdown */}

src/components/Home/index.jsx

@@ -10,6 +10,8 @@ import UpdateTable from "./UpdateTable";
 import HomeTaskDisplay from "./HomeTaskDisplay";
 import UsersService from "../../services/UsersService";
 import usersService from "../../services/UsersService";
+import { useSelector } from "react-redux";
+
 
 export default function Home() {
     const trending = datas.datas;
@@ -18,10 +20,12 @@ export default function Home() {
     const userApi = new usersService();
     const homeData = userApi.getHomeDate();
 
+    const {userDetails} = useSelector((state) => state?.userDetails)
+
     return (
         <Layout>
             <div className="home-page-wrapper">
-                <Hero className="mb-10" />
+                <Hero className="mb-10" data={userDetails} />
                 {/* <CreateNft />
         <TrendingSection trending={trending} className="mb-10" />*/}
                 <HomeTaskDisplay

src/components/MyJobs/MyJobTable.jsx

@@ -57,6 +57,7 @@ export default function MyJobTable({MyJobList, className }) {
                                                        </h1>
                                                        <span className="text-sm text-thin-light-gray">
                           Price <span className="text-purple">{value.price*0.01}</span>
+                                                           {value.timeline_days} day(s)
                         </span>
                                                    </div>
                                                </div>

src/components/MyWallet/AddRecipient.jsx

@@ -21,7 +21,7 @@ const validationSchema = Yup.object().shape({
       .max(25, 'Maximum 25 characters')
       .required('Lastname is required'),
     country: Yup.string()
-      .min(1, 'Minimum 3 characters')
+      .min(1, 'Minimum 1 characters')
       .max(25, 'Maximum 25 characters')
       .required('Country is required'),
     bank: Yup.string()

src/components/MyWallet/Balance.jsx

@@ -31,11 +31,11 @@ function Balance({wallet, payment, coupon, purchase}) {
                                 </div>
                                 <div className='balance-info'>
                                     <p className='py-2'>balance</p>
-                                    <span className='text-sm py-1 px-2 bg-green-100 text-green-500 rounded-lg'>{item.symbol}{(item.amount*1).toFixed(2)}</span>
+                                    <span className='text-sm py-1 px-2 bg-green-100 text-green-500 rounded-lg'>{item.symbol}{(item.amount*0.01).toFixed(2)}</span>
                                 </div>
                                 <div className='balance-info'>
                                     <p className='py-2'>Escrow</p>
-                                    <span className='text-sm py-1 px-2 bg-red-100 text-red-500 rounded-lg'>{item.symbol}{(item.escrow*1).toFixed(2)}</span>
+                                    <span className='text-sm py-1 px-2 bg-red-100 text-red-500 rounded-lg'>{item.symbol}{(item.escrow*0.01).toFixed(2)}</span>
                                 </div>
                             </div>
 

src/components/MyWallet/ConfirmTransfer.jsx

@@ -0,0 +1,165 @@
+import React, {useState, useEffect} from 'react'
+import {useLocation, useNavigate} from 'react-router-dom'
+import RecentActivityTable from './WalletComponent/RecentActivityTable'
+import LoadingSpinner from '../Spinners/LoadingSpinner'
+import InputCom from '../Helpers/Inputs/InputCom'
+import {toast} from 'react-toastify'
+
+import usersService from '../../services/UsersService'
+
+function ConfirmTransfer({payment, wallet}) {
+    const apiURL = new usersService()
+
+    const navigate = useNavigate()
+    
+    let {state} = useLocation()
+    // what happens if not state redirect user
+    if(!state){
+        navigate('../transfer-fund',{replace: true})
+    }
+
+    let [requestStatus, setRequestStatus] = useState({message: '', loading: false, status: false})
+    let [pageLoading, setPageLoading] = useState(true)
+
+    //FUNCTION TO HANDLE SUBMIT
+    const handleSubmit = () => {
+        setRequestStatus({message: '', loading: true, status: false})
+        let reqData = {
+            amount: Number(state.amount),
+            Fee: Number(state.fee),
+            recipientid: Number(state.recipientID)
+        }
+        apiURL.sendMoney(reqData).then((res)=>{
+            if(res.data.internal_return < 0){
+                setRequestStatus({message: 'Could not perform transaction', loading: false, status: false})
+                return
+            }
+            setRequestStatus({message: 'transfer successful', loading: false, status: true})
+            toast.success('Transfer sucessful')
+            setTimeout(()=>{
+                navigate('/', {replace: true})
+            }, 1000)
+        }).catch(error=>{
+            setRequestStatus({message: 'Opps! something went wrong! Try Again', loading: false, status: false})
+        })
+    }
+
+    useEffect(()=>{
+        setPageLoading(false)
+    },[])
+    return (
+        <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
+            {pageLoading ? 
+                <LoadingSpinner size='8' color='sky-blue' />
+            :
+                (
+                <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+                    <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
+                        <div className='px-4 md:px-8 py-4'>
+                            {wallet.loading ?
+                                <LoadingSpinner size='8' color='sky-blue' />
+                                :
+                                wallet.data.length ? 
+                                <h2 className='my-4 text-slate-500 dark:text-white text-sm xl:text-xl font-medium'>
+                                {wallet.data.map(item => {
+                                    if(item.description == 'Naira'){
+                                        return `Withdraw from Naira Wallet : ${item.symbol}${(item.amount*0.01).toFixed(2)}`
+                                    }
+                                })}
+                                </h2>
+                                :
+                                wallet.error ? 
+                                <h2 className='my-4 text-slate-500 dark:text-white text-sm xl:text-xl font-medium'>Opps! An Error Occured</h2>
+                                :
+                                <h2 className='my-4 text-slate-500 dark:text-white text-sm xl:text-xl font-medium'>No Wallet Information Found!</h2>
+                            }
+                        </div>
+                        <hr />
+                        <div className='px-4 md:px-8 py-4 add-fund-info'>
+                                <h2 className='my-2 text-slate-900 dark:text-white text-sm xl:text-xl font-medium'>Confirm Withdraw to Account</h2>
+                                {/* AMOUNT */}
+                                <div className="field w-full mb-3">
+                                    <InputCom
+                                        label="Amount:"
+                                        type="text"
+                                        name="amount"
+                                        value={state?.amount || ''}
+                                        disable={true}
+                                    />
+                                </div>
+
+                                {/* RECIPIENT ACC: */}
+                                <div className="field w-full mb-3">
+                                    <InputCom
+                                        label="Recipient Acc:"
+                                        type="text"
+                                        name="recipient"
+                                        value={state?.details.recipient || ''}
+                                        disable={true}
+                                    />
+                                </div>
+
+                                {/* PROCESSING FEE: */}
+                                <div className="field w-full mb-3">
+                                    <InputCom
+                                        label="Processing Fee:"
+                                        type="text"
+                                        name="processingFee"
+                                        value={state?.fee || ''}
+                                        disable={true}
+                                    />
+                                </div>
+
+                                {/* TOTAL */}
+                                <div className="field w-full mb-3">
+                                    <InputCom
+                                        label="Total"
+                                        type="text"
+                                        name="total"
+                                        value={state?.total || ''}
+                                        disable={true}
+                                    />
+                                </div>
+
+                                {/* COMMENT/NOTE */}
+                                <div className="field w-full mb-3">
+                                    <InputCom
+                                        label="Comment/Note:"
+                                        type="text"
+                                        name="comment"
+                                        value={state?.comment || ''}
+                                        disable={true}
+                                    />
+                                </div>
+                        </div>
+
+                        <hr />
+                        {requestStatus.message && <p className={`text-base ${requestStatus.status? 'text-green-500' : 'text-red-500'} px-4 md:px-8 py-4`}>{requestStatus.message}</p>}
+                        <div className='px-4 md:px-8 py-4 add-fund-btn flex justify-end items-center'>
+                            {requestStatus.loading ? 
+                            <LoadingSpinner size='8' color='sky-blue' />
+                            :
+                            <button onClick={handleSubmit} className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Transfer</button>
+                            }
+                        </div>
+                    </div>
+                </div>
+                )
+            }
+    
+            <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+                <div className="wallet w-full px-4 md:px-8 py-4 h-full max-h-[800px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+                    <h2 className='text-gray-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
+                    <p className='text-base text-gray-600 dark:text-white'>Activity Report</p>
+                    {payment.loading ?
+                    <LoadingSpinner size='16' color='sky-blue' />
+                    :
+                    <RecentActivityTable  payment={payment}/>
+                    }
+                </div>
+            </div>
+        </div>
+      )
+}
+
+export default ConfirmTransfer

src/components/MyWallet/TransferFund.jsx

@@ -1,30 +1,48 @@
 import React, {useEffect, useState} from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 import RecentActivityTable from './WalletComponent/RecentActivityTable'
 import LoadingSpinner from '../Spinners/LoadingSpinner'
 import InputCom from '../Helpers/Inputs/InputCom'
 
 import usersService from '../../services/UsersService'
 
+import {toast} from 'react-toastify'
+
+import {Formik, Form} from 'formik'
+import * as Yup from 'yup'
+
+const validationSchema = Yup.object().shape({
+    amount: Yup.number()
+    .typeError("you must specify a number")
+    .min(1, 'Amount must be greater than 0')
+    .required('Amount is required'),
+    recipientID: Yup.string()
+      .min(1, 'Minimum 1 characters')
+      .max(50, 'Maximum 50 characters')
+      .required('Recipient is required'),
+  })
+  
+  const initialValues = {
+    amount: '',
+    recipientID: '',
+    comment: '',
+  }
+
 function TransferFund({payment, wallet}) {
-    const apiCall = new usersService()
+    const apiCall = new usersService() // API CLASS CALL
 
-    let [newFee, setNewFee] = useState(false)
+    const navigate = useNavigate()
 
-    let [recepients, setRecipients] = useState({ // FOR COUPON HISTORY
+    let [requestStatus, setRequestStatus] = useState(false)
+
+    let [recipients, setRecipients] = useState({ // FOR COUPON HISTORY
         loading: true,
         data: [],
         error: false
     })
 
-    let [sendMoneyFee, setSendMoneyFee] = useState({fee: 0, total: 0}) // HOLD THE VALUE FOR SEND MONEY FEE
+    let [sendMoneyFee, setSendMoneyFee] = useState({loading: false, fee: 0, total: 0}) // HOLD THE VALUE FOR SEND MONEY FEE
 
-    //STATE FOR CONTROLLED INPUTS
-    let [inputs, setInputs] = useState({
-        amount: '0',
-        recipient: '',
-        comment: ''
-    })
 
     //FUNCTION TO GET RECIPIENT LIST
     const getRecipients = ()=>{
@@ -40,159 +58,172 @@ function TransferFund({payment, wallet}) {
     }
 
     //FUNCTION TO GET SEND MONEY FEE
-    const getSendMoneyFee = ()=>{
-        let {amount} = inputs
+    const getSendMoneyFee = ({target:{value}})=>{
+        setSendMoneyFee({loading: true, fee: 0, total: 0})
+        let amount = value
         if(Number(amount) <= 0 || amount=='' || isNaN(amount)){
-            setSendMoneyFee({fee: 0, total: 0})
+            setSendMoneyFee({loading: false, fee: 0, total: 0})
             return
         }
         apiCall.getSendMoneyFee(Number(amount)).then((res)=>{
-            setSendMoneyFee({fee: res.data.processing_fee, total: res.data.total_amount})
+            setSendMoneyFee({loading: false, fee: res.data.processing_fee, total: res.data.total_amount})
         }).catch((error)=>{
-            setSendMoneyFee({fee: 0, total: 0})
+            setSendMoneyFee({loading: false, fee: 0, total: 0})
         })
     }
 
 
-    // FUNCTION TO HANDLE INPUT CHANGE
-    const handleChange = ({target:{name, value}}) => {
-        setInputs(prev => ({...prev, [name]:value}))
-    }
-
     //FUNCTION TO HANDLE SUBMIT
-    const handleSubmit = (e) => {
-        e.preventDefault();
+    const handleSubmit = (values, helpers) => {
+        setRequestStatus(true)
+        let recipientDetails = recipients.data?.filter(item => item.recipient_id == values.recipientID)
+        let stateData = {...values, ...sendMoneyFee, details:{...recipientDetails[0]}}
 
-        //valid inputs before submitting. Just for texting remove later. check amoutn to be number
-    
-        setInputs({
-            amount: '0',
-            recipient: '',
-            comment: ''
-        })
+        setTimeout(()=>{
+            setRequestStatus(false)
+            navigate('confirm-transfer', {state: stateData})
+        }, 1000)
     }
 
     useEffect(()=>{
         getRecipients()
-        getSendMoneyFee()
-    },[newFee])
+    },[])
     return (
         <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
             <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
                 <div className="add-fund w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
-                   <form className='transfer-fund-info' onSubmit={handleSubmit}>
-                        {wallet.loading ?
-                        <LoadingSpinner size='8' color='sky-blue' />
-                        :
-                        wallet.data.length ? 
-                        <h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>
-                        {wallet.data.map(item => {
-                            if(item.description == 'Naira'){
-                                return `Withdraw from Naira Wallet : ${item.symbol}${(item.amount*1).toFixed(2)}`
-                            }
-                        })}
-                        </h2>
-                        :
-                        wallet.error ? 
-                        <h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Opps! An Error Occured</h2>
-                        :
-                        <h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>No Wallet Information Found!</h2>
-                        }
-                        <div className="xl:flex xl:space-x-7 mb-6">
-
-                            <div className="field w-full mb-6 xl:mb-0">
-                                <InputCom
-                                    label="Amount"
-                                    type="text"
-                                    name="amount"
-                                    value={inputs.amount}
-                                    inputHandler={handleChange}
-                                    onMouseEnter={()=>{setNewFee(false)}}
-                                    onMouseLeave={()=>{setNewFee(true)}}
-                                />
-                            </div>
-                            
-                            <div className="field w-full">
-                                <InputCom
-                                    label="Fee"
-                                    type="text"
-                                    name="fee"
-                                    value={sendMoneyFee.fee}
-                                    disable={true}
-                                />
-                            </div>
-                        </div>
-
-                        <div className='md:flex items-center justify-end'>
-                            <div className="field w-full lg:w-1/2 mb-6">
-                                <InputCom
-                                    label="Total"
-                                    type="text"
-                                    name="total"
-                                    value={sendMoneyFee.total}
-                                    disable={true}
-                                />
-                            </div>
-                        </div>
-
-                        <div className='relative my-3 md:flex items-center'>
-                            <div className='transfer-input w-full'>
-                                <div className='flex items-center justify-start py-2'>
-                                    <label className='text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Recipient 
-                                        <span className='text-red-500 mx-2'>*</span> 
-                                        <span title='Transfer Recipient' className={`text-white text-sm bg-slate-500 w-1 h-1 rounded-full px-3 py-1 cursor-pointer`}>!</span>
-                                    </label>
-                                    <Link to='add-recipient' className='mx-1 text-base text-white p-2 bg-[orange] rounded-md hover:opacity-80'>Add New</Link>
-                                </div>
-                                <select className='w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0' value={inputs.recipient} name='recipient' onChange={handleChange}>
-                                    {recepients.loading ?
-                                     <option className='text-slate-500 text-lg' value="">Loading...</option>
-                                     :
-                                     recepients.data.length ?
-                                     <> 
-                                     <option className='text-slate-500 text-lg' value="">Select...</option>
-                                     {recepients.data.map((item, index)=>(
-                                        <option key={index} value={item.account_no} className='text-slate-500 text-lg'>{item.recipient}</option>
-                                     ))}
-                                     </>
-                                     :
-                                     recepients.error ?
-                                     <option className='text-slate-500 text-lg' value="">Could'nt Load, try again!</option>
-                                     :
-                                     <option className='text-slate-500 text-lg' value="">No Recipient Found! Click Add to Add</option>
+                    <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
+                        {(props)=>{
+                        return (
+                            <Form className='transfer-fund-info'>
+                                    {wallet.loading ?
+                                    <LoadingSpinner size='8' color='sky-blue' />
+                                    :
+                                    wallet.data.length ? 
+                                    <h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>
+                                    {wallet.data.map(item => {
+                                        if(item.description == 'Naira'){
+                                            return `Withdraw from Naira Wallet : ${item.symbol}${(item.amount*0.01).toFixed(2)}`
+                                        }
+                                    })}
+                                    </h2>
+                                    :
+                                    wallet.error ? 
+                                    <h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Opps! An Error Occured</h2>
+                                    :
+                                    <h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>No Wallet Information Found!</h2>
                                     }
-                                </select>
-                            </div>
-                        </div>
+                                    <div className="xl:flex xl:space-x-7 mb-6">
 
-                        <div className="field w-full mb-6">
-                            {/* <InputCom
-                                label="Comment"
-                                type="text"
-                                name="comment"
-                                value={inputs.comment}
-                                inputHandler={handleChange}
-                            /> */}
-                            <label className='text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Comment</label>
-                            <textarea style={{resize: 'none'}}
-                            className='text-base px-6 text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F]  focus:ring-0 focus:outline-none' 
-                            name="comment" 
-                            value={inputs.comment}
-                            onChange={handleChange}
-                            cols="30" 
-                            rows="2"
-                            />
-                        </div>
+                                        <div className="field w-full mb-6 xl:mb-0">
+                                            <InputCom
+                                                label="Amount"
+                                                type="text"
+                                                name="amount"
+                                                placeholder='0'
+                                                value={props.values.amount}
+                                                inputHandler={props.handleChange}
+                                                blurHandler={(e)=>{
+                                                    getSendMoneyFee(e)
+                                                }}
+                                                // props.handleBlur
+                                                // onMouseLeave={(e)=>{getSendMoneyFee(e)}}
+                                            />
+                                            {(props.errors.amount && props.touched.amount) && <p className="text-sm text-red-500">{props.errors.amount}</p>}
+                                        </div>
+                                        
+                                        <div className="field w-full">
+                                            <InputCom
+                                                label="Fee"
+                                                type="text"
+                                                name="fee"
+                                                value={sendMoneyFee.loading ? 'loading' : sendMoneyFee.fee}
+                                                disable={true}
+                                            />
+                                        </div>
+                                    </div>
 
-                        <div className='transfer-fund-btn flex justify-end items-center py-4'>
-                            <button className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Continue</button>
-                        </div>
-                   </form>
+                                    <div className='md:flex items-center justify-end'>
+                                        <div className="field w-full lg:w-1/2 mb-6">
+                                            <InputCom
+                                                label="Total"
+                                                type="text"
+                                                name="total"
+                                                value={sendMoneyFee.loading ? 'loading' : sendMoneyFee.total}
+                                                disable={true}
+                                            />
+                                        </div>
+                                    </div>
+                                    
+                                    <div className='w-full'>
+                                        <div className='relative my-3 md:flex items-center'>
+                                            <div className='transfer-input w-full'>
+                                                <div className='flex items-center justify-start py-2'>
+                                                    <label className='text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Recipient 
+                                                        <span className='text-red-500 mx-2'>*</span> 
+                                                        <span title='Transfer Recipient' className={`text-white text-sm bg-slate-500 w-1 h-1 rounded-full px-3 py-1 cursor-pointer`}>!</span>
+                                                    </label>
+                                                    <Link to='add-recipient' className='mx-1 text-base text-white p-2 bg-[orange] rounded-md hover:opacity-80'>Add New</Link>
+                                                </div>
+                                                <select className='w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0' value={props.values.recipientID} name='recipientID' onChange={props.handleChange} onBlur={props.handleBlur}>
+                                                    {recipients.loading ?
+                                                    <option className='text-slate-500 text-lg' value="">Loading...</option>
+                                                    :
+                                                    recipients.data.length ?
+                                                    <> 
+                                                    <option className='text-slate-500 text-lg' value="">Select...</option>
+                                                    {recipients.data.map((item, index)=>(
+                                                        <option key={index} value={item.recipient_id} className='text-slate-500 text-lg'>{item.recipient}</option>
+                                                    ))}
+                                                    </>
+                                                    :
+                                                    recipients.error ?
+                                                    <option className='text-slate-500 text-lg' value="">Could'nt Load, try again!</option>
+                                                    :
+                                                    <option className='text-slate-500 text-lg' value="">No Recipient Found! Click Add to Add</option>
+                                                    }
+                                                </select>
+                                            </div>
+                                        </div>
+                                        {(props.errors.recipientID && props.touched.recipientID) && <p className="text-sm text-red-500">{props.errors.recipientID}</p>}
+                                    </div>
+
+                                    <div className="field w-full mb-6">
+                                        {/* <InputCom
+                                            label="Comment"
+                                            type="text"
+                                            name="comment"
+                                            value={inputs.comment}
+                                            inputHandler={handleChange}
+                                        /> */}
+                                        <label className='text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Comment</label>
+                                        <textarea style={{resize: 'none'}}
+                                        className='text-base px-6 text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F]  focus:ring-0 focus:outline-none' 
+                                        name="comment" 
+                                        value={props.values.comment}
+                                        onChange={props.handleChange}
+                                        onBlur={props.handleBlur}
+                                        cols="30" 
+                                        rows="2"
+                                        />
+                                    </div>
+
+                                    <div className='transfer-fund-btn flex justify-end items-center py-4'>
+                                        {requestStatus ?
+                                        <LoadingSpinner size='8' color='sky-blue' />
+                                        :
+                                        <button type='submit' className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Continue</button>
+                                        }
+                                    </div>
+                            </Form>
+                        )
+                        }}
+                   </Formik>
                 </div>
             </div>
     
             <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-                <div className="wallet w-full  md:p-8 p-4 h-full max-h-[600px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+                <div className="wallet w-full  md:p-8 p-4 h-full max-h-[800px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
                     <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
                     <p className='text-base text-slate-500 dark:text-white'>Activity Report</p>
                     {payment.loading ?

src/components/MyWallet/Wallet.jsx

@@ -8,6 +8,7 @@ import Balance from './Balance'
 import TransferFund from './TransferFund'
 import AddFund from './AddFund'
 import AddRecipient from './AddRecipient'
+import ConfirmTransfer from './ConfirmTransfer'
 
 function Wallet() {
   return (
@@ -113,8 +114,9 @@ const WalletRoutes = () => {
                 <Route path='add-fund' element={<AddFund payment={paymentHistory} />} />
                 <Route path='transfer-fund' element={<TransferFund payment={paymentHistory} wallet={walletList} />} />
                 <Route index element={<Balance payment={paymentHistory} purchase={purchaseHistory} coupon={couponHistory} wallet={walletList} />} />
-                <Route path='*' element={<Navigate to='/' />} />
                 <Route path='transfer-fund/add-recipient' element={<AddRecipient />} />
+                <Route path='transfer-fund/confirm-transfer' element={<ConfirmTransfer payment={paymentHistory} wallet={walletList} />} />
+                <Route path='*' element={<Navigate to='/' />} />
             </Route>
         </Routes>
     )

src/components/MyWallet/WalletHeader.jsx

@@ -58,7 +58,7 @@ export default function WalletHeader(props) {
                                             </div>
                                             <div>
                                                 <p className="eth text-xl font-bold text-purple">
-                                                    {(value.amount*1).toFixed(2)} {value.code}
+                                                    {(value.amount*0.01).toFixed(2)} {value.code}
                                                 </p>
                                                 <p className="usd text-base text-thin-light-gray text-right">
                                                     {/*(773.69 USD)*/}

src/components/Partials/Header.jsx

@@ -15,6 +15,7 @@ import usersService from "../../services/UsersService";
 
 import siteLogo from '../../assets/images/wrenchboard.png'
 import Flag from '../../assets/images/united-states.svg'
+import { useSelector } from "react-redux";
 
 
 export default function Header({ logoutModalHandler, sidebarHandler }) {
@@ -24,6 +25,8 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
   const [moneyPopup, setPopup] = useToggle(false);
   const [toggleNotification, setToggleNotification] = useToggle(false)
   const darkMode = useContext(DarkModeContext);
+  const {userDetails} = useSelector((state) => state?.userDetails)
+
 
   const [myWalletList, setMyWalletList] = useState([]);
   const api = new usersService();
@@ -87,6 +90,11 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
   const setNotification = ()=> {
     setToggleNotification.toggle()
   }
+
+  // User Profile
+  let {firstname, lastname, email, profile_pic} = userDetails
+  let userEmail = email.split('@')[0]
+
   return (
     <>
       <div className="header-wrapper backdrop-blur-sm bg-[#efedfe5e]/60 dark:bg-transparent w-full h-full flex items-center xl:px-0 md:px-10 px-5">
@@ -463,17 +471,17 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                 {/* profile-image */}
                 <div className="lg:w-[62px] lg:h-[62px] w-[50px] h-[50px] rounded-full overflow-hidden">
                   <img
-                    src={profileImg}
+                    src={profile_pic != '' ? profile_pic : profileImg}
                     alt="profile"
                     className="w-full h-full"
                   />
                 </div>
                 <div className="lg:block hidden">
                   <h1 className="text-xl font-bold   text-dark-gray dark:text-white">
-                    Brokln Simons
+                  {`${firstname} ${lastname}`}
                   </h1>
                   <p className="text-sm text-thin-light-gray">
-                    @broklinslam_75
+                    @{userEmail}
                   </p>
                 </div>
               </div>

src/components/Partials/Layout.jsx

@@ -22,9 +22,9 @@ export default function Layout({ children }) {
   const logOut = () => {
     localStorage.removeItem("email");
     localStorage.clear();
-    toast.success("Come Back Soon", {
-      icon: `🙂`,
-    });
+    // toast.success("Come Back Soon", {
+    //   icon: `🙂`,
+    // });
 
     navigate("/login", { replace: true });
   };

src/components/Partials/RightSideBar.jsx

@@ -12,6 +12,7 @@ import EthIco from "../Helpers/Icons/EthIco";
 import LtcIco from "../Helpers/Icons/LtcIco";
 import Usdt from "../Helpers/Icons/Usdt";
 import SelectBox from "../Helpers/SelectBox";
+import { NavLink } from "react-router-dom";
 
 export default function RightSideBar() {
   const filterDatas = ["Last 15 days", "Last Month", "Last 6 month"];
@@ -108,7 +109,10 @@ export default function RightSideBar() {
               {/* name */}
               <div>
                 <p className="text-thin-light-gray text-base font-medium">
-                  Rarible
+                  <NavLink
+                      to="/history">
+                    History
+                  </NavLink>
                 </p>
               </div>
               {/* action */}
@@ -152,7 +156,8 @@ export default function RightSideBar() {
               {/* name */}
               <div>
                 <p className="text-thin-light-gray text-base font-medium">
-                  Myth Market
+                  <NavLink
+                      to="/referral">Refer a Friend</NavLink>
                 </p>
               </div>
             </div>
@@ -186,7 +191,10 @@ export default function RightSideBar() {
               {/* name */}
               <div>
                 <p className="text-thin-light-gray text-base font-medium">
-                  KnownOrigin
+                  <NavLink
+                      to="/resources">
+                    Resources
+                  </NavLink>
                 </p>
               </div>
             </div>

src/components/Partials/Sidebar.jsx

@@ -156,108 +156,108 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                   </span>
                 </NavLink>
               </li>
-              <li className="item group">
-                <NavLink
-                  to="/notification"
-                  className={`nav-item flex items-center  ${
-                    ((navData) => (navData.isActive ? "active" : ""),
-                    sidebar ? "justify-start space-x-3.5" : "justify-center")
-                  }`}
-                >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="notification-setting" />
-                  </span>
-                  <span
-                    className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
-                      sidebar ? "active flex-1" : "w-0"
-                    }`}
-                  >
-                   Messages
-                  </span>
-                </NavLink>
-              </li>
-              <li className="item group">
-                <NavLink
-                  to="/my-wallet"
-                  className={`nav-item flex items-center  ${
-                    ((navData) => (navData.isActive ? "active" : ""),
-                    sidebar ? "justify-start space-x-3.5" : "justify-center")
-                  }`}
-                >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="wallet-two" />
-                  </span>
-                  <span
-                    className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
-                      sidebar ? "active flex-1" : "w-0"
-                    }`}
-                  >
-                   My Wallet
-                  </span>
-                </NavLink>
-              </li>
-              <li className="item group">
-                <NavLink
-                  to="/resources"
-                  className={`nav-item flex items-center ${
-                    ((navData) => (navData.isActive ? "active" : ""),
-                    sidebar ? "justify-start space-x-3.5" : "justify-center")
-                  }`}
-                >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="star" />
-                  </span>
-                  <span
-                    className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
-                      sidebar ? "active flex-1" : "w-0"
-                    }`}
-                  >
-                    Resources
-                  </span>
-                </NavLink>
-              </li>
+              {/*<li className="item group">*/}
+              {/*  <NavLink*/}
+              {/*    to="/notification"*/}
+              {/*    className={`nav-item flex items-center  ${*/}
+              {/*      ((navData) => (navData.isActive ? "active" : ""),*/}
+              {/*      sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
+              {/*    }`}*/}
+              {/*  >*/}
+              {/*    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">*/}
+              {/*      <Icons name="notification-setting" />*/}
+              {/*    </span>*/}
+              {/*    <span*/}
+              {/*      className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${*/}
+              {/*        sidebar ? "active flex-1" : "w-0"*/}
+              {/*      }`}*/}
+              {/*    >*/}
+              {/*     Messages*/}
+              {/*    </span>*/}
+              {/*  </NavLink>*/}
+              {/*</li>*/}
+              {/*<li className="item group">*/}
+              {/*  <NavLink*/}
+              {/*    to="/my-wallet"*/}
+              {/*    className={`nav-item flex items-center  ${*/}
+              {/*      ((navData) => (navData.isActive ? "active" : ""),*/}
+              {/*      sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
+              {/*    }`}*/}
+              {/*  >*/}
+              {/*    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">*/}
+              {/*      <Icons name="wallet-two" />*/}
+              {/*    </span>*/}
+              {/*    <span*/}
+              {/*      className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${*/}
+              {/*        sidebar ? "active flex-1" : "w-0"*/}
+              {/*      }`}*/}
+              {/*    >*/}
+              {/*     My Wallet*/}
+              {/*    </span>*/}
+              {/*  </NavLink>*/}
+              {/*</li>*/}
+              {/*<li className="item group">*/}
+              {/*  <NavLink*/}
+              {/*    to="/resources"*/}
+              {/*    className={`nav-item flex items-center ${*/}
+              {/*      ((navData) => (navData.isActive ? "active" : ""),*/}
+              {/*      sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
+              {/*    }`}*/}
+              {/*  >*/}
+              {/*    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">*/}
+              {/*      <Icons name="star" />*/}
+              {/*    </span>*/}
+              {/*    <span*/}
+              {/*      className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${*/}
+              {/*        sidebar ? "active flex-1" : "w-0"*/}
+              {/*      }`}*/}
+              {/*    >*/}
+              {/*      Resources*/}
+              {/*    </span>*/}
+              {/*  </NavLink>*/}
+              {/*</li>*/}
           
-              <li className="item group">
-                <NavLink
-                  to="/history"
-                  className={`nav-item flex items-center ${
-                    ((navData) => (navData.isActive ? "active" : ""),
-                    sidebar ? "justify-start space-x-3.5" : "justify-center")
-                  }`}
-                >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="history" />
-                  </span>
-                  <span
-                    className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
-                      sidebar ? "active flex-1" : "w-0"
-                    }`}
-                  >
-                    History
-                  </span>
-                </NavLink>
-              </li>
+              {/*<li className="item group">*/}
+              {/*  <NavLink*/}
+              {/*    to="/history"*/}
+              {/*    className={`nav-item flex items-center ${*/}
+              {/*      ((navData) => (navData.isActive ? "active" : ""),*/}
+              {/*      sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
+              {/*    }`}*/}
+              {/*  >*/}
+              {/*    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">*/}
+              {/*      <Icons name="history" />*/}
+              {/*    </span>*/}
+              {/*    <span*/}
+              {/*      className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${*/}
+              {/*        sidebar ? "active flex-1" : "w-0"*/}
+              {/*      }`}*/}
+              {/*    >*/}
+              {/*      History*/}
+              {/*    </span>*/}
+              {/*  </NavLink>*/}
+              {/*</li>*/}
 
-              <li className="item group">
-                <NavLink
-                  to="/referral"
-                  className={`nav-item flex items-center ${
-                    ((navData) => (navData.isActive ? "active" : ""),
-                    sidebar ? "justify-start space-x-3.5" : "justify-center")
-                  }`}
-                >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="history" />
-                  </span>
-                  <span
-                    className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
-                      sidebar ? "active flex-1" : "w-0"
-                    }`}
-                  >
-                    Refer a Friend
-                  </span>
-                </NavLink>
-              </li>
+              {/*<li className="item group">*/}
+              {/*  <NavLink*/}
+              {/*    to="/referral"*/}
+              {/*    className={`nav-item flex items-center ${*/}
+              {/*      ((navData) => (navData.isActive ? "active" : ""),*/}
+              {/*      sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
+              {/*    }`}*/}
+              {/*  >*/}
+              {/*    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">*/}
+              {/*      <Icons name="history" />*/}
+              {/*    </span>*/}
+              {/*    <span*/}
+              {/*      className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${*/}
+              {/*        sidebar ? "active flex-1" : "w-0"*/}
+              {/*      }`}*/}
+              {/*    >*/}
+              {/*      Refer a Friend*/}
+              {/*    </span>*/}
+              {/*  </NavLink>*/}
+              {/*</li>*/}
             </ul>
           </div>
         </div>
@@ -290,7 +290,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
               </li>
               <li className="item group">
                 <NavLink
-                    to="/market"
+                    to="/my-active-jobs"
                     className={`nav-item flex items-center ${
                         ((navData) => (navData.isActive ? "active" : ""),
                             sidebar ? "justify-start space-x-3.5" : "justify-center")

src/components/Referral/ReferralDisplay.jsx

@@ -2,6 +2,33 @@ import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { toast } from "react-toastify";
 import usersService from '../../services/UsersService';
+import InputCom from '../Helpers/Inputs/InputCom';
+import LoadingSpinner from '../Spinners/LoadingSpinner';
+
+import {Formik, Form} from 'formik'
+import * as Yup from 'yup'
+
+const validationSchema = Yup.object().shape({
+    email: Yup.string()
+      .email('Wrong email format')
+      .min(3, 'Minimum 3 characters')
+      .max(50, 'Maximum 50 characters')
+      .required('Email is required'),
+    firstname: Yup.string()
+      .min(3, 'Minimum 3 characters')
+      .max(25, 'Maximum 25 characters')
+      .required('Firstname is required'),
+    lastname: Yup.string()
+      .min(3, 'Minimum 3 characters')
+      .max(25, 'Maximum 25 characters')
+      .required('Lastname is required'),
+  })
+  
+  const initialValues = {
+    firstname: '',
+    lastname: '',
+    email: ''
+  }
 
 function ReferralDisplay() {
     const apiCall = new usersService() // GET API CALL
@@ -16,7 +43,7 @@ function ReferralDisplay() {
         data: []
     }) 
 
-    let [error, setError] = useState({message: '', loading: false}) // for displaying error message on the page
+    let [error, setError] = useState({message: '', loading: false, status: false}) // for displaying error message on the page
 
     //function to call referral history API
     const allReferrals = () => {
@@ -38,49 +65,28 @@ function ReferralDisplay() {
     const sendReferralMsg = (postData) => {
         apiCall.sendReferralMsg(postData).then((res)=>{
             if(res.data.internal_return < 0){
-                setError({message:'Email already referred', loading: false})
+                setError({message:'Email already referred', loading: false, status: false})
                 return
             }else{
-                setInputs({ firstname: '', lastname: '', email: '',})
                 toast.success("Message Sent");
-                setError({message:'', loading: false})
+                setError({message:'', loading: false, status: true})
                 setRefHistoryReload(prev => !prev)
             }
         }).catch((error)=>{
-            setError({message:'Opps! an error occured, try again later', loading: false})
+            setError({message:'Opps! an error occured, try again later', loading: false, status: false})
         })
     }
 
-    //STATE FOR CONTROLLED INPUTS
-    let [inputs, setInputs] = useState({
-        firstname: '',
-        lastname: '',
-        email: ''
-    })
-
-    // FUNCTION TO HANDLE INPUT CHANGE
-    const handleChange = ({target:{name, value}}) => {
-        setInputs(prev => ({...prev, [name]:value}))
-    }
-
     //FUNCTION TO HANDLE SUBMIT
-    const handleSubmit = (e) => {
-        e.preventDefault();
-        setError({message: '', loading: true})
-        let {firstname, lastname, email} = inputs
-        if(!firstname || !lastname || !email){
-            setError({message: 'Please fill all fields', loading: false})
-            return
-        }
+    const handleSubmit = (values, helpers) => {
+        setError({message: '', loading: true, status: false})
 
         var postData = {
             uid: localStorage.getItem("uid"),
             member_id: localStorage.getItem("member_id"),
             sessionid: localStorage.getItem("session_token"),
             action: 11032,
-            ref_firstname: firstname,
-            ref_lastname: lastname,
-            ref_email: email
+            ...values
             };
 
         sendReferralMsg(postData) // FUNCTION TO SEND REFERRAL MESSAGE
@@ -95,56 +101,62 @@ function ReferralDisplay() {
         <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
             <div className="referral w-full  md:p-8 p-4 h-full bg-white dark:bg-dark-white rounded-2xl shadow">
                 <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Send Referral</h2>
-               <form className='referral-info' onSubmit={handleSubmit}>
-                    <div className='md:flex items-center my-4'>
-                        <label className='w-full md:w-1/4 text-slate-900 text-lg'>Firstname <span className='text-red-500'>*</span></label>
-                        <input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
-                            value={inputs.firstname} 
-                            name='firstname' 
-                            type="text" 
-                            placeholder='Firstname' 
-                            onChange={handleChange}
+                <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
+                    {(props)=>(
+                        <Form className='referral-info'>
+                            {/* Firstname */}
+                            <div className="field w-full mb-6">
+                            <InputCom
+                                label="Firstname"
+                                type="text"
+                                name="firstname"
+                                placeholder="Firstname"
+                                value={props.values.firstname}
+                                inputHandler={props.handleChange}
+                                blurHandler={props.handleBlur}
                             />
-                    </div>
-
-                    <div className='md:flex items-center my-4'>
-                        <label className='w-full md:w-1/4 text-slate-900 text-lg'>Lastname <span className='text-red-500'>*</span></label>
-                        <input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
-                            value={inputs.lastname} 
-                            name='lastname' 
-                            type="text" 
-                            placeholder='Lastname' 
-                            onChange={handleChange}
-                            />
-                    </div>
-
-                    <div className='md:flex items-center my-4'>
-                        <label className='w-full md:w-1/4 text-slate-900 text-lg'>Email <span className='text-red-500'>*</span></label>
-                        <input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
-                            value={inputs.email} 
-                            name='email' 
-                            type="email" 
-                            placeholder='Email' 
-                            onChange={handleChange}
-                            />
-                    </div>
-                    <hr />
-                    {error.message != '' && <p className='text-base text-red-500 py-2'>{error.message}</p>}
-                    <div className='referral-btn flex justify-end items-center py-4 border-b-4'>
-                        {error.loading ?
-                        <div className='flex items-center justify-center'>
-                            <div role="status">
-                                <svg aria-hidden="true" class="w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-sky-blue" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                    <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
-                                    <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
-                                </svg>
+                            {(props.errors.firstname && props.touched.firstname) && <p className="text-sm text-red-500">{props.errors.firstname}</p>}
                             </div>
-                        </div>
-                        :
-                        <button type='submit' className='text-lg text-white bg-sky-blue p-2 hover:opacity-90 rounded-md'>Send Message</button>
-                        }
-                    </div>
-               </form>
+
+                            {/* Lastname */}
+                            <div className="field w-full mb-6">
+                            <InputCom
+                                label="Lastname"
+                                type="text"
+                                name="lastname"
+                                placeholder="Lastname"
+                                value={props.values.lastname}
+                                inputHandler={props.handleChange}
+                                blurHandler={props.handleBlur}
+                            />
+                            {(props.errors.lastname && props.touched.lastname) && <p className="text-sm text-red-500">{props.errors.lastname}</p>}
+                            </div>
+
+                            <div className="field w-full mb-6">
+                            <InputCom
+                                label="Email"
+                                type="text"
+                                name="email"
+                                placeholder="Email"
+                                value={props.values.email}
+                                inputHandler={props.handleChange}
+                                blurHandler={props.handleBlur}
+                            />
+                            {(props.errors.email && props.touched.email) && <p className="text-sm text-red-500">{props.errors.email}</p>}
+                            </div>
+
+                            <hr />
+                            {error.message != '' && <p className='text-base text-red-500 py-2'>{error.message}</p>}
+                            <div className='referral-btn flex justify-end items-center py-4 border-b-4'>
+                                {error.loading ?
+                                <LoadingSpinner size='6' color='sky-blue' />
+                                :
+                                <button type='submit' className='text-lg text-white bg-sky-blue p-2 hover:opacity-90 rounded-md'>Send Message</button>
+                                }
+                            </div>
+                        </Form>
+                    )}
+               </Formik>
             </div>
         </div>
 
@@ -153,14 +165,7 @@ function ReferralDisplay() {
                 <h2 className='mb-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Referral List</h2>
                 {referralList.loading ? 
                 (
-                <div className='flex items-center justify-center'>
-                    <div role="status">
-                        <svg aria-hidden="true" class="w-32 h-32 text-gray-200 animate-spin dark:text-gray-600 fill-sky-blue" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
-                            <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
-                        </svg>
-                    </div>
-                </div>
+                <LoadingSpinner size='32' color='sky-blue' />
                 )
                 :
                 (

src/components/Settings/index.jsx

@@ -40,6 +40,10 @@ export default function Settings() {
     },
     {
       id: 7,
+      name: "privacy",
+    },
+    {
+      id: 8,
       name: "terms",
     },
   ];
@@ -191,6 +195,23 @@ export default function Settings() {
                         <p className="text-18 tracking-wide">FAQ</p>
                       </div>
                     </li>
+                    <li
+                        onClick={() => tabHandler("terms")}
+                        className={`flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
+                            tab === "privacy"
+                                ? "text-purple"
+                                : " text-thin-light-gray"
+                        }`}
+                    >
+                      <div>
+                        <Icons name="page-right" />
+                      </div>
+                      <div>
+                        <p className="text-18 tracking-wide">
+                          Privacy Policy
+                        </p>
+                      </div>
+                    </li>
                     <li
                       onClick={() => tabHandler("terms")}
                       className={`flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${

src/components/Spinners/LoadingSpinner.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
-function LoadingSpinner({size, color}) {
+function LoadingSpinner({size, color, height}) {
   return (
-    <div className='flex items-center justify-center'>
+    <div className={`flex items-center justify-center ${height ? height : ''}`}>
         <div role="status">
             <svg aria-hidden="true" className={`w-${size} h-${size} text-gray-200 animate-spin dark:text-gray-600 fill-${color}`} viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>

src/hooks/debounce.js

@@ -0,0 +1,21 @@
+/**
+
+Returns a debounced version of a given function, which means that it delays the execution of the function until a certain amount of time has passed without the function being called again. This can be useful for performance optimization, especially when dealing with expensive or resource-intensive functions that are called frequently.
+@param {Function} func - The function to debounce.
+@param {number} delay - The number of milliseconds to wait before executing the debounced function.
+@returns {Function} - The debounced version of the original function.
+*/
+
+export default function debounce(func, delay) {
+  let timeoutId;
+
+  return function (...args) {
+    const context = this;
+
+    clearTimeout(timeoutId);
+
+    timeoutId = setTimeout(() => {
+      func.apply(context, args);
+    }, delay);
+  };
+}

src/middleware/AuthRoute.jsx

@@ -1,38 +1,31 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 import { Navigate, Outlet, useLocation, useNavigate } from "react-router-dom";
+import usersService from '../services/UsersService'
+import LoadingSpinner from '../components/Spinners/LoadingSpinner'
+import WrenchBoard from "../assets/images/wrenchboard.png"
+import { useDispatch, useSelector } from "react-redux";
+import {updateUserDetails} from '../store/UserDetails'
+
 
 const AuthRoute = ({ redirectPath = "/login", children }) => {
+  const apiCall = new usersService()
+
+  const dispatch = useDispatch()
+
   const [lastActivityTime, setLastActivityTime] = useState(Date.now());
-  const isLogin = localStorage.getItem("email");
+  let [isLogin, setIsLogin] = useState({loading: true, status: false})
 
   const navigate = useNavigate();
-  const { pathname } = useLocation();
 
   //Removing Data stored at localStorage after session expires
   const expireSession = () => {
-    localStorage.removeItem("email");
     localStorage.removeItem('session_token');
-    localStorage.removeItem('firstname');
     localStorage.removeItem('member_id');
-    localStorage.removeItem('lastname');
-    localStorage.removeItem('state');
-    localStorage.removeItem('last_login');
     localStorage.removeItem('uid');
     localStorage.removeItem('session');
-    localStorage.removeItem('city');
-    localStorage.removeItem('country');
-    localStorage.removeItem('loglevel');
-    localStorage.removeItem('zip_code');
-    localStorage.removeItem('added');
     navigate("/login", { replace: true }); // redirects user to login page after session expires
   };
 
-  const checkInactivity = setInterval(() => {
-    if (Date.now() - lastActivityTime > process.env.REACT_APP_SESSION_EXPIRE_MINUTES) {
-      expireSession()
-    }
-  }, process.env.REACT_APP_SESSION_EXPIRE_CHECKER) // Checks for inactivity every minute
-
   // Reset last activity time on user input
   const resetTime = () => {
     setLastActivityTime(Date.now());
@@ -40,19 +33,55 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   window.addEventListener('mousemove', resetTime)
   window.addEventListener('keydown', resetTime)
 
+  const loadProfile = ()=>{ // function to load user profile
+    setIsLogin({loading: true, status: false})
+    apiCall.loadProfile().then((res)=>{
+      if(res.data.internal_return < 0){
+        setIsLogin({loading: false, status: false})
+        return
+      }
+      dispatch(updateUserDetails(res.data))
+      setIsLogin({loading: false, status: true})
+    }).catch(error =>{
+      setIsLogin({loading: false, status: false})
+    })
+  }
+  const getProfile = useCallback(()=>{
+    loadProfile() // API CALL TO GET USER PROFILE
+  }, [])
+  
   useEffect(() => {
+    if(!isLogin.status){
+      getProfile()
+    }
+
+    const checkInactivity = setInterval(() => {
+      if (Date.now() - lastActivityTime > process.env.REACT_APP_SESSION_EXPIRE_MINUTES) {
+        expireSession()
+      }
+    }, process.env.REACT_APP_SESSION_EXPIRE_CHECKER) // Checks for inactivity every minute
+
     // cleaning up listeners
     return () => {
       clearInterval(checkInactivity)
       window.removeEventListener('mousemove', resetTime)
       window.removeEventListener('keydown', resetTime)
     }
-  }, [pathname, lastActivityTime])
+  }, [lastActivityTime])
 
-  if (!isLogin) {
-    return <Navigate to={redirectPath} replace />;
-  }
-  return children || <Outlet />;
+  return (
+    isLogin.loading ?
+      <LoadingSpinner size='32' color='sky-blue' height='h-screen' />
+      // Stills needs fixing
+      // <div className="h-screen m-auto">
+      //   <img src={WrenchBoard} alt="wrenchboard" className="h-10" />
+      // </div>
+      :
+      !isLogin.status ?
+      <Navigate to={redirectPath} replace />
+      :
+      (children || <Outlet />)
+  )
 };
 
-export default AuthRoute;
+export default AuthRoute;

src/services/UsersService.js

@@ -11,6 +11,11 @@ class usersService {
         return this.postAuxEnd("/createuser", reqData);
     }
 
+    CompleteSignUp(reqData){
+        localStorage.setItem("session_token", ``);
+        return this.postAuxEnd("/completesignuplink", reqData);
+    }
+
     getHomeDate(){
         var postData = {
             uuid: localStorage.getItem("uuid"),
@@ -225,6 +230,19 @@ class usersService {
         };
         return this.postAuxEnd("/paymenthx", postData);
     }
+
+    // API FUNCTION TO GET PAYMENT HISTORY
+    sendMoney(reqData){
+        var postData = {
+            uid: localStorage.getItem("uid"),
+            member_id: localStorage.getItem("member_id"),
+            sessionid: localStorage.getItem("session_token"),
+            senderid: localStorage.getItem("member_id"),
+            action: 33020,
+            ...reqData
+        };
+        return this.postAuxEnd("/sendmoney", postData);
+    }
     
     //END POINT CALL FOR REFERRAL HISTORY
     getReferralHx(){

src/store/UserDetails.js

@@ -0,0 +1,20 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  userDetails: {}
+};
+
+export const userSlice = createSlice({
+  name: "userDetails",
+  initialState,
+  reducers: {
+    updateUserDetails: (state,payload) => {
+      state.userDetails = {...payload.payload}
+    },
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { updateUserDetails } = userSlice.actions;
+
+export default userSlice.reducer;

src/store/store.js

@@ -1,8 +1,11 @@
 import { configureStore } from "@reduxjs/toolkit";
 import drawerReducer from "./drawer";
 
+import userDetailReducer from "./UserDetails";
+
 export default configureStore({
   reducer: {
     drawer: drawerReducer,
+    userDetails: userDetailReducer,
   },
-});
+});