dummy bg added

.env

@@ -95,4 +95,7 @@ REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6Ld_qKooAAAAADNL1TPzRLmcBA8vlpvx__39Rj39
 
 #FAMILY MEMBER MINIMUM AGE
 REACT_APP_FAMILY_MINIMUM_AGE=4
-REACT_APP_FAMILY_MAXIMUM_AGE=18
+REACT_APP_FAMILY_MAXIMUM_AGE=18
+
+#CHANGE LOGIN LAYOUT
+REACT_APP_NEW_LOGIN_LAYOUT=1

.env.development

@@ -63,4 +63,7 @@ REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6Ld_qKooAAAAADNL1TPzRLmcBA8vlpvx__39Rj39
 
 #FAMILY MEMBER MINIMUM AGE
 REACT_APP_FAMILY_MINIMUM_AGE=4
-REACT_APP_FAMILY_MAXIMUM_AGE=18
+REACT_APP_FAMILY_MAXIMUM_AGE=18
+
+#CHANGE LOGIN LAYOUT
+REACT_APP_NEW_LOGIN_LAYOUT=1

.env.production

@@ -70,3 +70,6 @@ REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6Ld_qKooAAAAADNL1TPzRLmcBA8vlpvx__39Rj39
 #FAMILY MEMBER MINIMUM AGE
 REACT_APP_FAMILY_MINIMUM_AGE=4
 REACT_APP_FAMILY_MAXIMUM_AGE=18
+
+#CHANGE LOGIN LAYOUT
+REACT_APP_NEW_LOGIN_LAYOUT=0

src/App.jsx

@@ -1,16 +1,22 @@
 import Toaster from "./components/Helpers/Toaster";
 import Routers from "./Routers";
 import Default from "./components/Partials/Default";
+import { Navigate, useLocation } from "react-router-dom";
 
 function App() {
-  return (
-      <Default>
-          <>
-              <Routers />
-              <Toaster />
-          </>
-      </Default>
-  );
+    const {pathname} = useLocation()
+    return (
+        <Default>
+            <>
+            {pathname.startsWith('/@') ?
+                <Navigate to="/app" replace={true} />
+            :
+                <Routers />
+            }
+                <Toaster />
+            </>
+        </Default>
+    );
 }
 
 export default App;

src/Routers.jsx

@@ -8,9 +8,11 @@ import AcitveBidsPage from "./views/AcitveBidsPage";
 import AuthProfilePage from "./views/AuthProfilePage";
 import CollectionItemPage from "./views/CollectionItemPage";
 import ForgotPasswordPages from "./views/ForgotPasswordPages";
+import ForgotPasswordPagesTwo from "./views/ForgotPasswordPagesTwo";
 import HistoryPage from "./views/HistoryPage";
 import HomePages from "./views/HomePages";
 import LoginPage from "./views/LoginPage";
+import LoginPageTwo from "./views/LoginPageTwo";
 import MarketPlacePage from "./views/MarketPlacePage";
 import MyWalletPage from "./views/MyWalletPage";
 import SavedPage from "./views/SavedPage";
@@ -18,11 +20,15 @@ import SellPage from "./views/SellPage";
 import SettingsPage from "./views/SettingsPage";
 import ShopDetailsPage from "./views/ShopDetailsPage";
 import SignupPage from "./views/SignupPage";
+import SignupPageTwo from "./views/SignupPageTwo";
 import UpdatePasswordPages from "./views/UpdatePasswordPages";
+import UpdatePasswordPagesTwo from "./views/UpdatePasswordPagesTwo";
 import UploadProductPage from "./views/UploadProductPage";
 import UserProfilePage from "./views/UserProfilePage";
 import VerifyYouPages from "./views/VerifyYouPages";
+import VerifyYouPagesTwo from "./views/VerifyYouPagesTwo";
 import VerifyPasswordPages from "./views/VerifyPasswordPages";
+import VerifyPasswordPagesTwo from "./views/VerifyPasswordPagesTwo";
 import RemindersPage from './views/RemindersPage';
 import TrackingPage from "./views/TrackingPage";
 import CalendarPage from "./views/CalendarPage";
@@ -31,6 +37,7 @@ import MyTaskPage from "./views/MyTaskPage";
 import MyJobsPage from "./views/MyJobsPage";
 import ReferralPage from "./views/ReferralPage";
 import VerifyLinkPages from "./views/VerifyLinkPages";
+import VerifyLinkPagesTwo from "./views/VerifyLinkPagesTwo";
 import MyActiveJobsPage from "./views/MyActiveJobsPage";
 import FamilyAccPage from "./views/FamilyAccPage";
 import StartJob from "./components/MyJobs/StartJob";
@@ -51,34 +58,45 @@ import FacebookRedirect from "./views/FacebookRedirect";
 import AppleRedirectPage from "./views/AppleRedirectPage";
 import LndPage from "./views/LndPage";
 import FamilySettingsPage from "./views/FamilySettingsPage";
+import AppDownloadPage from "./views/AppDownloadPage";
+import JobGroupsPage from "./views/JobGroupsPage";
+import YourPages from "./views/YourPage_";
 
 export default function Routers() {
   return (
     <ScrollToTop>
       <Routes>
         {/* guest routes */}
-        <Route exact path="/login" element={<LoginPage />} />
-        <Route exact path="/eoffer" element={<LoginPage />} />
-        <Route exact path="/invite" element={<LoginPage />} />
-
-        <Route exact path="/signup" element={<SignupPage />} />
+        {process.env.REACT_APP_NEW_LOGIN_LAYOUT == 1 ?
+        <>
+          <Route exact path="/login" element={<LoginPageTwo />} />
+          <Route exact path="/signup" element={<SignupPageTwo />} />
+          <Route exact path="/forgot-password" element={<ForgotPasswordPagesTwo />} />
+          <Route exact path="/update-password" element={<UpdatePasswordPagesTwo />} />
+          <Route path="/vemail" element={<VerifyLinkPagesTwo />} />
+          <Route path="/complereset" element={<VerifyPasswordPagesTwo />} />
+          <Route exact path="/outmessage" element={<VerifyYouPagesTwo />} />
+          <Route exact path="/eoffer" element={<LoginPageTwo />} />
+          <Route exact path="/invite" element={<LoginPageTwo />} />
+        </>
+        :
+        <>
+          <Route exact path="/login" element={<LoginPage />} />
+          <Route exact path="/signup" element={<SignupPage />} />
+          <Route exact path="/forgot-password" element={<ForgotPasswordPages />} />
+          <Route exact path="/update-password" element={<UpdatePasswordPages />} />
+          <Route path="/vemail" element={<VerifyLinkPages />} />
+          <Route path="/complereset" element={<VerifyPasswordPages />} />
+          <Route exact path="/outmessage" element={<VerifyYouPages />} />
+          <Route exact path="/eoffer" element={<LoginPage />} />
+          <Route exact path="/invite" element={<LoginPage />} />
+        </>
+        }
         <Route exact path="/login/auth" element={<AuthRedirect />} />
         <Route exact path="/login/auth/flogin" element={<FacebookRedirect />} />
         <Route exact path="/login/auth/apple" element={<AppleRedirectPage />} />
-        <Route
-          exact
-          path="/forgot-password"
-          element={<ForgotPasswordPages />}
-        />
-        <Route
-          exact
-          path="/update-password"
-          element={<UpdatePasswordPages />}
-        />
-        <Route path="/vemail" element={<VerifyLinkPages />} />
-        <Route path="/complereset" element={<VerifyPasswordPages />} />
-        <Route exact path="/outmessage" element={<VerifyYouPages />} />
         <Route exact path="/lnd/*" element={<LndPage />} />
+        <Route exact path="/app" element={<AppDownloadPage />} />
 
         {/* private route */}
         <Route element={<AuthRoute />}>
@@ -112,6 +130,7 @@ export default function Routers() {
           <Route exact path="/acc-family"  element={<FamilyAccPage />} />
           <Route exact path="/manage-family"  element={<FamilyManagePage />} />
           <Route exact path="/start-job"  element={<StartJob />} />
+          <Route exact path="/yourpage"  element={<YourPages />} />
           <Route exact path="/manage-active-job"  element={<ManageActiveJobs />} />
           <Route exact path="/blog-page"  element={<BlogPage />} />
           <Route exact path="/offer-interest"  element={<OffersInterestPage />} />
@@ -132,6 +151,7 @@ export default function Routers() {
           <Route exact path="/user-profile" element={<UserProfilePage />} />
           <Route exact path="/settings" element={<SettingsPage />} />
           <Route exact path="/referral" element={<ReferralPage />} />
+          <Route exact path="/job-groups" element={<JobGroupsPage />} />
         </Route>
         <Route path="*" element={<FourZeroFour />} />
       </Routes>

src/assets/images/icons/download-arrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="DownloadArrow"><g fill="#4687ba" class="color9a7baa svgShape"><path d="M30.179 3.525V1.857c0-1.551-1.784-2.415-3.011-1.449L24 2.907 20.824.402c-1.216-.959-3.002-.093-3.002 1.456v1.668a1 1 0 0 0 1 1h10.357c.552-.001 1-.449 1-1.001zM30.179 25.172v-2.524a1 1 0 0 0-1-1H18.822a1 1 0 0 0-1 1v2.524a1 1 0 0 0 1 1h10.357a1 1 0 0 0 1-1zM30.179 10.74V8.217a1 1 0 0 0-1-1H18.822a1 1 0 0 0-1 1v2.524a1 1 0 0 0 1 1h10.357c.552-.001 1-.448 1-1.001zM30.179 17.956v-2.524a1 1 0 0 0-1-1H18.822a1 1 0 0 0-1 1v2.524a1 1 0 0 0 1 1h10.357a1 1 0 0 0 1-1zM25.748 47.029l9.336-15.018c.852-1.371-.133-3.145-1.748-3.145H14.664c-1.614 0-2.6 1.774-1.748 3.145l9.336 15.018a2.058 2.058 0 0 0 3.496 0z" fill="#000000" class="color000000 svgShape"></path></g></svg>

src/assets/images/icons/my-page.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 50" id="Page"><path fill-rule="evenodd" d="M0 13V2a2 2 0 0 1 2-2h64a2 2 0 0 1 2 2v11H0Zm0 4v31a2 2 0 0 0 2 2h20V17H0Zm26 33h40a2 2 0 0 0 2-2V17H26v33Z" fill="#767fad" class="color000000 svgShape"></path></svg>

src/components/AddJob/AddJob.jsx

@@ -1,74 +1,28 @@
-import { Field, Form, Formik } from "formik";
-import React, { useEffect, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import * as Yup from "yup";
-import usersService from "../../services/UsersService";
-import { tableReload } from "../../store/TableReloads";
-import InputCom from "../Helpers/Inputs/InputCom";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
+import {
+  validationSchema as VS,
+  useDispatch,
+  useSelector,
+  usersService,
+  initialValues as IV,
+  initialReqState,
+  useState,
+  tableReload,
+  Formik,
+  InputCom,
+  Field,
+  Form,
+  LoadingSpinner,
+} from "./settings";
 
-const validationSchema = Yup.object().shape({
-  country: Yup.string()
-    .min(1, "Minimum 3 characters")
-    .max(25, "Maximum 25 characters")
-    .required("Currency is required"),
-  price: Yup.string()
-    .typeError("Invalid number")
-    .min(1, "Price must be greater than 0")
-    .test("no-e", "Invalid number", (value) => {
-      if (value && /\d+e/.test(value)) {
-        return false;
-      }
-      return true;
-    })
-    .required("Price is required"),
-  title: Yup.string()
-    .min(5, "Minimum 5 characters")
-    .max(149, "Maximum 149 characters")
-    .required("Title is required"),
-  description: Yup.string()
-    .min(5, "Minimum 5 characters")
-    .max(299, "Maximum 299 characters")
-    .required("Description is required"),
-  job_detail: Yup.string()
-    .min(3, "Minimum 3 characters")
-    .max(499, "Maximum 499 characters")
-    .required("Details is required"),
-  timeline_days: Yup.number()
-    .typeError("you must specify a number")
-    .min(1, "Price must be greater than 0")
-    .required("Timeline is required"),
-  category: Yup.array().min(1, "Select at least one checkbox"),
-});
+const validationSchema = VS;
 
 function AddJob({ popUpHandler, categories }) {
   const ApiCall = new usersService();
   const { walletDetails } = useSelector((state) => state.walletDetails);
+
   let dispatch = useDispatch();
 
-  let initialValues = {
-    // initial values for formik
-    country: "",
-    price: "",
-    title: "",
-    description: "",
-    job_detail: "",
-    timeline_days: "",
-    category: [],
-  };
-
-  let [requestStatus, setRequestStatus] = useState({
-    loading: false,
-    status: false,
-    message: "",
-  }); // Holds state when submit button is pressed
-
-  // const getWalletDetail = (country) => { // A FUNCTION TO GET USER BALANCE BASED ON COUNTRY SELECTED
-  //   const walletChecker = walletDetails?.data.find(
-  //     (item) => item.country === country
-  //   );
-  //   return walletChecker ? walletChecker.amount : 0;
-  // };
+  const [requestStatus, setRequestStatus] = useState(initialReqState); // Holds state when submit button is pressed
 
   const handleAddJob = async (values, helpers) => {
     const reqData = {
@@ -81,21 +35,6 @@ function AddJob({ popUpHandler, categories }) {
       category: values.category?.join("@"),
     };
 
-    // const walletAmount = getWalletDetail(reqData.country); // GETTING USER BALANCE BASED ON COUNTRY SELECTED
-
-    // if (reqData.price > walletAmount) {
-    //   setRequestStatus({
-    //     loading: false,
-    //     status: false,
-    //     message: "Insufficient Balance",
-    //   });
-
-    //   setTimeout(() => {
-    //     setRequestStatus({ loading: false, status: false, message: "" });
-    //   }, 1500);
-    //   return;
-    // }
-
     setRequestStatus({ loading: true, status: false, message: "" });
 
     try {
@@ -136,7 +75,7 @@ function AddJob({ popUpHandler, categories }) {
   return (
     <div className="add-job p-5 w-full bg-white dark:bg-dark-white dark:text-white rounded-md flex flex-col justify-between">
       <Formik
-        initialValues={initialValues}
+        initialValues={IV}
         validationSchema={validationSchema}
         onSubmit={handleAddJob}
       >
@@ -258,7 +197,7 @@ function AddJob({ popUpHandler, categories }) {
                     <div className="sm:w-[60%] w-full">
                       <label
                         htmlFor="Job Delivery Details"
-                        className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1'
+                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1"
                       >
                         Job Delivery Details
                         {props.errors.job_detail &&
@@ -406,7 +345,6 @@ function AddJob({ popUpHandler, categories }) {
                       <button
                         type="submit"
                         className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                        // className='w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'
                       >
                         Add Job
                       </button>

src/components/AddJob/settings.js

@@ -0,0 +1,100 @@
+import { Field, Form, Formik } from "formik";
+import { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import * as Yup from "yup";
+import usersService from "../../services/UsersService";
+import { tableReload } from "../../store/TableReloads";
+import InputCom from "../Helpers/Inputs/InputCom";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+
+// Initialize state for request values
+const initialReqState = {
+  loading: false,
+  status: false,
+  message: "",
+};
+
+// For form initial values
+const initialValues = {
+  // initial values for formik
+  country: "",
+  price: "",
+  title: "",
+  description: "",
+  job_detail: "",
+  timeline_days: "",
+  category: [],
+};
+
+// const getWalletDetail = (country) => { // A FUNCTION TO GET USER BALANCE BASED ON COUNTRY SELECTED
+//   const walletChecker = walletDetails?.data.find(
+//     (item) => item.country === country
+//   );
+//   return walletChecker ? walletChecker.amount : 0;
+// };
+
+// To get the validation schema
+const validationSchema = Yup.object().shape({
+  country: Yup.string()
+    .min(1, "Minimum 3 characters")
+    .max(25, "Maximum 25 characters")
+    .required("Currency is required"),
+  price: Yup.string()
+    .typeError("Invalid number")
+    .min(1, "Price must be greater than 0")
+    .test("no-e", "Invalid number", (value) => {
+      if (value && /\d+e/.test(value)) {
+        return false;
+      }
+      return true;
+    })
+    .required("Price is required"),
+  title: Yup.string()
+    .min(5, "Minimum 5 characters")
+    .max(149, "Maximum 149 characters")
+    .required("Title is required"),
+  description: Yup.string()
+    .min(5, "Minimum 5 characters")
+    .max(299, "Maximum 299 characters")
+    .required("Description is required"),
+  job_detail: Yup.string()
+    .min(3, "Minimum 3 characters")
+    .max(499, "Maximum 499 characters")
+    .required("Details is required"),
+  timeline_days: Yup.number()
+    .typeError("you must specify a number")
+    .min(1, "Price must be greater than 0")
+    .required("Timeline is required"),
+  category: Yup.array().min(1, "Select category"),
+});
+
+const getWalletDetail = (countryParams, walletDetails) => {
+  // A FUNCTION TO GET USER BALANCE BASED ON COUNTRY SELECTED
+  const walletChecker = walletDetails?.data.find(
+    (item) => item.country === countryParams
+  );
+  return walletChecker
+    ? {
+        description: walletChecker.description,
+        country: walletChecker.country,
+      }
+    : "";
+};
+
+export {
+  Field,
+  Form,
+  Formik,
+  useState,
+  useEffect,
+  useDispatch,
+  useSelector,
+  usersService,
+  InputCom,
+  LoadingSpinner,
+  initialReqState,
+  initialValues,
+  validationSchema,
+  getWalletDetail,
+  tableReload
+};

src/components/AppDownload/AppDownload.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function AppDownload() {
+  return (
+    <div>
+      <div className='h-screen flex justify-center items-center'>App Download Content Comes here</div>
+    </div>
+  )
+}

src/components/AuthPages/AuthLayout2.jsx

@@ -0,0 +1,62 @@
+import React, { lazy } from "react";
+import { Link } from "react-router-dom";
+import { localImgLoad } from "../../lib";
+
+export default function LoginLayout({ slogan, children }) {
+  const bgImg = localImgLoad('images/left-myft.jpg')
+
+  return (
+    <div className={`layout-wrapper login`}>
+      <div className={`w-full min-h-screen overflow-y-auto lg:grid grid-cols-2`}>
+        <div 
+            className={`auth-bg hidden lg:block bg-blue-50 relative bg-cover bg-no-repeat border-0 after:content-[''] after:absolute after:inset-0`} 
+            style={{backgroundImage: `url(${bgImg})`}}
+        >
+        </div>
+        <div className="p-5 sm:p-7 flex place-content-center">
+          <div className="py-10 w-11/12 h-full flex flex-col justify-between items-center content-wrapper login shadow-md xl:bg-white dark:bg-dark-white rounded-[0.475rem]">
+            <div className="w-full flex justify-center items-center">
+              {children && children}
+            </div>
+            <div className="w-full flex flex-col justify-center items-center px-10">
+              <div className="w-full flex justify-center items-center pt-5">
+                <div className="flex items-center">
+                <a
+                      href="https://www.wrenchboard.com/about-us"
+                      className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      About
+                    </a>
+                    <a
+                      href="https://www.wrenchboard.com/service"
+                      className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      Services
+                    </a>
+                    <a
+                      href="https://www.wrenchboard.com/contact"
+                      className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      Contact Us
+                    </a>
+                </div>
+              </div>
+              <p className="py-1 text-black text-[15px] px-2 font-medium flex items-center gap-1">
+                <span className="">&copy; {new Date().getFullYear()} -</span>
+                <Link to="/" className="text-[#009ef7] ml-1">
+                  WrenchBoard
+                </Link>{" "}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/AuthPages/ForgotPassword/index2.jsx

@@ -0,0 +1,211 @@
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
+import usersService from "../../../services/UsersService";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import AuthLayout from "../AuthLayout2";
+import EmailValidator from "../../../lib/EmailValidator";
+import ForgetPwdResponse from "../ForgetPwdResponse";
+
+import ReCAPTCHA from "react-google-recaptcha";
+
+export default function ForgotPassword() {
+  const [checked, setValue] = useState(false);
+  const [resetLoading, setResetLoading] = useState(false);
+  // email
+  const [email, setMail] = useState("");
+  const [msgError, setMsgError] = useState("");
+  const [msgSuccess, setMsgSuccess] = useState(null);
+
+  const navigate = useNavigate();
+  const userApi = new usersService();
+
+  const handleEmail = (e) => {
+    setMail(e?.target.value);
+  };
+
+  // const humanChecker = () => {
+  //   setValue(!checked);
+  // };
+
+  function humanChecker(value) {
+    // console.log("Captcha value:", value);
+    if(value){
+      setValue(true)
+    }else{
+      setValue(false)
+    }
+  }
+
+  const resetHandler = async () => {
+    if (email == "") {
+      setMsgError("An email is required");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    } 
+    if (!checked) {
+      setMsgError("Check if you are human");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+
+    if(!EmailValidator(email)){ // CHECKS IF EMAIL IS VALID
+      setMsgError("Invalid Email");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+
+    if (email !== "" && checked) {
+      const reqData = { email, action:11013 };
+      setResetLoading(true);
+      try {
+        const res = await userApi.StartResetPassword(reqData);
+        if (res.status === 200) {
+          setMsgSuccess(true);
+          setMail("");
+          setValue(false);
+          setResetLoading(false);
+        }else{
+          setMsgSuccess(false);
+        }
+      } catch (error) {
+        setMsgSuccess(false);
+        setResetLoading(false);
+        setMail("");
+        setMsgError("An error occurred");
+        throw new Error(error);
+      } finally {
+        setTimeout(() => {
+          setMsgError(null);
+        }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+      }
+    }
+  };
+
+  return (
+    <>
+      <AuthLayout slogan="Welcome to WrenchBoard">
+        <div className="w-full">
+          <div className="mb-12">
+            <Link to="#">
+              <img
+                src={WrenchBoard}
+                alt="wrenchboard"
+                className="h-10 mx-auto"
+              />
+            </Link>
+          </div>
+          <div className="flex place-content-center">
+            <div className="w-11/12 sm:max-w-[400px]">
+            {msgSuccess == null ?
+              <>
+                <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]">
+                    Forget Password
+                  </h1>
+                  <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">
+                    <InputCom
+                      fieldClass="px-6"
+                      placeholder="Your Username/Email"
+                      label="Email"
+                      name="email"
+                      type="email"
+                      value={email}
+                      inputHandler={handleEmail}
+                      iconName="message"
+                    />
+                  </div>
+                  {/* hCaptha clone for the time being */}
+                  <div className="mb-10 flex justify-center w-full">
+                    <ReCAPTCHA
+                      sitekey={process.env.REACT_APP_GOOGLE_RECAPTCHA_SITEKEY}
+                      onChange={humanChecker}
+                    />
+                  </div>
+                  {/* <div className="mb-10">
+                    <div className="w-[303px] h-[78px] mx-auto overflow-hidden">
+                      <div className="w-[300px] h-[74px] bg-white bottom-[1px] rounded border-gray-100 overflow-hidden cursor-pointer">
+                        
+                        <div className="h-full relative inline-block">
+                          <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"
+                                  checked={checked}
+                                  onChange={humanChecker}
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div className="h-full relative inline-block w-[170px]">
+                          <label className="relative table top-0 h-full">
+                            <label className="table-cell align-middle">
+                              <label
+                                className="text-800 text-sm"
+                                htmlFor="human-checkbox"
+                              >
+                                I am human
+                              </label>
+                            </label>
+                          </label>
+                        </div>
+                        <div className="h-full relative inline-block w-16"></div>
+                      </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>
+                  )}
+                  <div className="signin-area mb-3.5">
+                    <div className="flex justify-center items-center gap-4">
+                    <button
+                        type="button"
+                        onClick={() => navigate("/login")}
+                        className={`h-[48px] rounded-full mb-6 text-[15px] font-semibold text-white hover:text-white flex justify-center bg-red-500 hover:bg-red-600 transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem] `}
+                      >
+                        Cancel
+                      </button>
+                      <button
+                        type="button"
+                        onClick={resetHandler}
+                        className={`h-[48px] rounded-full 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>
+                        ) : (
+                          <span>Send Code</span>
+                        )}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </>
+            :
+            <ForgetPwdResponse 
+              title={'Forget Password'}
+              message={msgSuccess? `Check your email for the link to continue password reset. Note the reset link will expire short time` : 'We are unable to continue with your request. Please try another username or contact us for help'}
+              type={msgSuccess}
+            />
+            }
+            </div>
+          </div>
+        </div>
+      </AuthLayout>
+    </>
+  );
+}

src/components/AuthPages/Login/index.jsx

@@ -19,11 +19,13 @@ import ReCAPTCHA from "react-google-recaptcha";
 export default function Login() {
   // eslint-disable-next-line no-restricted-globals
   const queryParams = new URLSearchParams(location?.search);
-  const sessionExpired = queryParams.get("sessionExpired");
+  // const sessionExpired = queryParams.get("sessionExpired");
 
   const dispatch = useDispatch();
   const { state } = useLocation();
 
+  const [sessionExpired, setSessionExpired] = useState(queryParams.get("sessionExpired"))
+
   const [validCaptcha, setValidCaptcha] = useState({ show: false, valid: "" }); // FOR CAPTCHA
 
   let [loginType, setLoginType] = useState("");
@@ -235,6 +237,20 @@ export default function Login() {
     setPassword("");
   }, [loginType]);
 
+
+  // EFFECT TO CLEAR SESSION EXPIRY IF IT EXISTS AFTER SOME SECONDS
+  useEffect(()=>{
+    let timer;
+    if(sessionExpired == "true"){
+     timer = setTimeout(()=>{
+        setSessionExpired(false)
+      },5000)
+    }
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [])
+
   return (
     <>
       <AuthLayout slogan="Welcome to WrenchBoard">

src/components/AuthPages/Login/index2.jsx

@@ -0,0 +1,591 @@
+import React, { useEffect, useLayoutEffect, useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import linkedInLogo from "../../../assets/images/Linkedin.png";
+import appleLogo from "../../../assets/images/apple-black.svg";
+import facebookLogo from "../../../assets/images/facebook-4.svg";
+import googleLogo from "../../../assets/images/google-logo.svg";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
+import usersService from "../../../services/UsersService";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import AuthLayout from "../AuthLayout2";
+// import { GoogleOAuthProvider } from '@react-oauth/google';
+import { useGoogleLogin } from "@react-oauth/google";
+
+import { useDispatch } from "react-redux";
+import { updateUserDetails } from "../../../store/UserDetails";
+
+import ReCAPTCHA from "react-google-recaptcha";
+
+export default function Login() {
+  // eslint-disable-next-line no-restricted-globals
+  const queryParams = new URLSearchParams(location?.search);
+  // const sessionExpired = queryParams.get("sessionExpired");
+
+  const dispatch = useDispatch();
+  const { state } = useLocation();
+
+  const [sessionExpired, setSessionExpired] = useState(queryParams.get("sessionExpired"))
+
+  const [validCaptcha, setValidCaptcha] = useState({ show: false, valid: "" }); // FOR CAPTCHA
+
+  let [loginType, setLoginType] = useState("");
+
+  const [loginLoading, setLoginLoading] = useState(false);
+
+  const [showPassword, setShowPassword] = useState(false);
+
+  //login error state
+  const [loginError, setLoginError] = useState(false);
+  // for the catch error
+  const [msgError, setMsgError] = useState("");
+
+  // To Show and Hide Password
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
+  //FUNCTION TO DETERMINE/CHANGE LOGIN COMPONENT
+  const handleLoginType = ({ target: { name } }) => {
+    setLoginType(name);
+    let currentDate = new Date();
+    let expirationDate = new Date(currentDate.getTime() + 24 * 60 * 60 * 1000);
+    // Convert the expiration date to the appropriate format
+    let expirationDateString = expirationDate.toUTCString();
+    document.cookie = `loginType=${name}; expires=${expirationDateString}; path=/;`;
+  };
+
+  // email
+  const [email, setMail] = useState("");
+  const handleEmail = (e) => {
+    setMail(e.target.value);
+  };
+  // password
+  const [password, setPassword] = useState("");
+  const handlePassword = (e) => {
+    setPassword(e.target.value);
+  };
+  const navigate = useNavigate();
+  const userApi = new usersService();
+
+  // FUNCTION TO HANDLE USER LOGIN
+  const doLogin = ({ target: { name } }) => {
+    setMsgError("");
+    setLoginError(false);
+    setLoginLoading(true);
+    let postData; // Post Data for API
+    if (!email || !password) {
+      setLoginLoading(false);
+      setMsgError("Please fill all the fields");
+      setTimeout(() => {
+        setMsgError("");
+      }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
+      return;
+    }
+
+    if (name == "full") {
+      //checks if email is a valid email address
+      let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
+      if (regEx.test(email) == false) {
+        setLoginLoading(false);
+        setMsgError("Invalid Email");
+        return setTimeout(() => {
+          setMsgError("");
+        }, 3000);
+      }
+      // Post Data Info for normal Login
+      postData = {
+        username: email,
+        password: password,
+        sessionid: "STARTING",
+        login_mode: 1100,
+        action: 11025,
+      };
+    } else if (name == "family") {
+      // Post Data Info for family Login
+      postData = {
+        username: email,
+        pin: password,
+        sessionid: "20067A92714",
+        login_mode: 1105,
+        action: 11025,
+      };
+    } else {
+      setLoginLoading(false);
+      setMsgError("Invalid Login Type. Consider refreshing the page");
+      setTimeout(() => {
+        setMsgError("");
+      }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
+      return;
+    }
+    if (name == "full" && !validCaptcha.valid && validCaptcha.show) {
+      // RUNS AND DISPLAYS CAPTCHA, IF ERROR OCCURED DURING LOGIN FOR FULL LOGIN ALONE
+      setMsgError("Please Verify Captcha");
+      setLoginLoading(false);
+      setTimeout(() => {
+        setMsgError("");
+      }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
+      return;
+    }
+    userApi
+      .logInUser(postData)
+      .then((res) => {
+        if (
+          res.status != 200 ||
+          res.data.internal_return < 0 ||
+          !res.data.member_id ||
+          !res.data.uid ||
+          !res.data.session
+        ) {
+          // setMsgError("Wrong, email/password");
+          setLoginError(true);
+          setLoginLoading(false);
+          setValidCaptcha((prev) => ({ ...prev, show: true })); // DISPLAYS CAPTCHA IF ERROR
+          return;
+        }
+        localStorage.setItem("member_id", `${res.data.member_id}`);
+        localStorage.setItem("uid", `${res.data.uid}`);
+        localStorage.setItem("session_token", `${res.data.session}`);
+        if (name === "family") {
+          sessionStorage.setItem("family_uid", res.data?.family_uid);
+        }
+        // localStorage.setItem("session", `${res.data.session}`);
+        dispatch(updateUserDetails({ ...res.data }));
+        setTimeout(() => {
+          navigate("/", { replace: true });
+          setLoginLoading(false);
+        }, 2000);
+      })
+      .catch((error) => {
+        setMsgError("Unable to login, try again");
+        setLoginLoading(false);
+        setValidCaptcha((prev) => ({ ...prev, show: true })); // DISPLAYS CAPTCHA IF ERROR
+      })
+      .finally(() => {
+        setTimeout(() => {
+          setLoginError(false);
+          setMsgError("");
+          setLoginLoading(false);
+        }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
+      });
+  };
+
+  function captchaChecker(value) {
+    // FUNCTION TO VALIDATE CAPTCHA
+    if (value) {
+      setValidCaptcha({ show: true, valid: value });
+    } else {
+      setValidCaptcha({ show: true, valid: "" });
+    }
+  }
+
+  const googleLogin = useGoogleLogin({
+    flow: "auth-code",
+    ux_mode: "redirect",
+    redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
+    onSuccess: async (codeResponse) => {
+      console.log("GOOGLE LOGIN GOOD --- ", codeResponse);
+    },
+    onError: (errorResponse) => console.log(errorResponse),
+  });
+
+  // In order to update the selected login type whenever the component renders
+  // useEffect(() => {
+  // Clear the loginType cookie if the user switches to loginfull
+  // document.cookie ="loginType=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
+  // }, []);
+
+  useLayoutEffect(() => {
+    // checks the cookie in order to set the login type before components mounts
+    // if(document.cookie.includes("loginType=family")){
+    //   setLoginType('family')
+    // }else if(document.cookie.includes("loginType=full")){
+    //   setLoginType('full')
+    // }else{
+    //   setLoginType('full')
+    // }
+    function readCookie(cname) {
+      // checks the cookie in order to set the login type before components mounts
+      let name = cname + "=";
+      let decoded_cookie = decodeURIComponent(document.cookie);
+      let carr = decoded_cookie.split(";");
+      for (let i = 0; i < carr.length; i++) {
+        let c = carr[i];
+        while (c.charAt(0) == " ") {
+          c = c.substring(1);
+        }
+        if (c.indexOf(name) == 0) {
+          return c.substring(name.length, c.length);
+        }
+      }
+      return "full";
+    }
+    let loginValue = readCookie("loginType");
+    setLoginType(loginValue);
+
+    if (state?.error) {
+      //check if the login path has an error state indicating any social handle login with error
+      setMsgError("Unexpected Error, Please try again soon.");
+      setTimeout(() => {
+        setMsgError("");
+        navigate("/login", { replace: true });
+      }, 4000);
+    }
+  }, []);
+
+  useEffect(() => {
+    setMail("");
+    setPassword("");
+  }, [loginType]);
+
+
+  // EFFECT TO CLEAR SESSION EXPIRY IF IT EXISTS AFTER SOME SECONDS
+  useEffect(()=>{
+    let timer;
+    if(sessionExpired == "true"){
+     timer = setTimeout(()=>{
+        setSessionExpired(false)
+      },5000)
+    }
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [])
+
+  return (
+    <>
+      <AuthLayout slogan="Welcome to WrenchBoard">
+        <div className="w-full">
+          <div className="mb-5">
+            <Link to="#">
+              <img
+                src={WrenchBoard}
+                alt="wrenchboard"
+                className="h-10 mx-auto"
+              />
+            </Link>
+          </div>
+          {/* <div className="content-wrapper login shadow-md w-10/12 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 place-content-center">
+            <div className="w-11/12 sm:max-w-[530px]">
+              {/* HIDES THIS IF USER SESSION HAS EXPIRED */}
+              {sessionExpired != "true" && (
+                <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]">
+                  Sign In to WrenchBoard
+                </h1> */}
+                  <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>
+              )}
+
+              {/* SHOWS THIS IF USER SESSION HAS EXPIRED */}
+              {sessionExpired == "true" && (
+                <div className="w-full p-1 mb-7">
+                  <p className="text-red-500 text-base text-center">
+                    Your session expired and will need to login again
+                  </p>
+                </div>
+              )}
+
+              {/* switch login component */}
+              <div className="ml-7 flex justify-start items-center gap-3">
+                <button
+                  name="full"
+                  className={`login-type-btn px-4 py-1 rounded-t-2xl ${
+                    loginType == "full"
+                      ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
+                      : "bg-white text-[#000] border-t-[2px]"
+                  }`}
+                  onClick={handleLoginType}
+                >
+                  Sign in
+                </button>
+                <button
+                  name="family"
+                  className={`login-type-btn px-4 py-1 rounded-t-2xl ${
+                    loginType == "family"
+                      ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
+                      : "bg-white text-[#000] border-t-[2px]"
+                  }`}
+                  onClick={handleLoginType}
+                >
+                  Family Account
+                </button>
+              </div>
+
+              {/* END  of switch login component */}
+
+              {/* for login component */}
+              {
+                loginType == "full" ? (
+                  //user login component
+                  <div className="p-6 input-area login-area border-2 border-[#4687ba] rounded-2xl">
+                    <div className="input-item mb-5">
+                      <InputCom
+                        labelClass="tracking-wider"
+                        fieldClass="sm:px-6 px-2"
+                        value={email}
+                        inputHandler={handleEmail}
+                        placeholder="Your Email"
+                        label="Email"
+                        name="email"
+                        type="email"
+                        iconName="message"
+                      />
+                    </div>
+
+                    <div className="input-item mb-5">
+                      <InputCom
+                        labelClass="tracking-wider"
+                        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
+                        value={password}
+                        inputHandler={handlePassword}
+                        placeholder="● ● ● ● ● ●"
+                        label="Password"
+                        name="password"
+                        type={showPassword ? "text" : "password"}
+                        onClick={togglePasswordVisibility}
+                        passIcon={showPassword ? "password" : "password"}
+                        forgotPassword
+                      />
+                    </div>
+
+                    {/* hCaptha clone for the time being */}
+                    {validCaptcha.show && (
+                      <div className="mb-5 flex justify-center w-full">
+                        <ReCAPTCHA
+                          sitekey={
+                            process.env.REACT_APP_GOOGLE_RECAPTCHA_SITEKEY
+                          }
+                          onChange={captchaChecker}
+                        />
+                      </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
+                          name="full"
+                          onClick={doLogin}
+                          type="button"
+                          disabled={loginLoading}
+                          className={`btn-login  rounded-full 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>
+                          ) : (
+                            <>Continue</>
+                          )}
+                        </button>
+                      </div>
+                      <div className="sm:grid grid-cols-2 gap-1">
+                        <div className="w-full">
+                          <BrandBtn
+                            link="#"
+                            imgSrc={googleLogo}
+                            brand="Google"
+                            onClick={googleLogin}
+                          />
+                        </div>
+                        <div
+                          className={`w-full ${
+                            process.env.REACT_APP_APPLE_SOCIAL_LOGIN !== 0 &&
+                            "hidden"
+                          }`}
+                        >
+                          <BrandBtn
+                            // link={`https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=${process.env.REACT_APP_APPLE_CLIENT_ID}&redirect_uri=https%3A%2F%2Fwork.wrenchboard.com%2Flogin%2Fauth%2Fapple&state=4b2c4456b7&scope=name+email`}
+                            link={`https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=${process.env.REACT_APP_APPLE_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_APPLE_REDIRECT_URL}&state=4b2c4456b7&scope=name+email`}
+                            imgSrc={appleLogo}
+                            brand="Apple"
+                            isAnchor={true}
+                            // style={{visibility: 'hidden'}}
+                          />
+                        </div>
+                        <div className="w-full">
+                          <BrandBtn
+                            link={`https://www.facebook.com/v14.0/dialog/oauth?client_id=${process.env.REACT_APP_FACEBOOK_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_FACEBOOK_REDIRECT_URL}&scope=${process.env.REACT_APP_FACEBOOK_CLIENT_SCOPE}`}
+                            imgSrc={facebookLogo}
+                            brand="Facebook"
+                            isAnchor={true}
+                          />
+                        </div>
+                        <div
+                          className={`w-full ${
+                            process.env.REACT_APP_LINKEDIN_SOCIAL_LOGIN !== 0 &&
+                            "hidden"
+                          }`}
+                        >
+                          <BrandBtn
+                            // link="https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&scope=comma-separated-list-of-scopes&state=YOUR_STATE_VALUE"
+                            imgSrc={linkedInLogo}
+                            brand="LinkedIn"
+                            isAnchor={true}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ) : (
+                  // END of user login compoenent
+                  // family login compoenent
+                  <div className="p-6 input-area login-area border-2 border-[#4687ba] rounded-2xl">
+                    <div className="input-item mb-5">
+                      <InputCom
+                        labelClass="tracking-wider"
+                        fieldClass="px-6"
+                        value={email}
+                        inputHandler={handleEmail}
+                        placeholder="Account ID"
+                        label="Username"
+                        name="email"
+                        type="email"
+                        iconName="family-id"
+                      />
+                    </div>
+
+                    <div className="input-item mb-5">
+                      <InputCom
+                        labelClass="tracking-wider"
+                        fieldClass="px-6"
+                        value={password}
+                        inputHandler={handlePassword}
+                        placeholder="● ● ● ● ● ●"
+                        label="Pin"
+                        name="password"
+                        type={showPassword ? "text" : "password"}
+                        onClick={togglePasswordVisibility}
+                        passIcon={showPassword ? "family-pin" : "family-pin"}
+                      />
+                    </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{" "}
+                        {/* <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-1.5">
+                      <div className="flex justify-center">
+                        <button
+                          name="family"
+                          onClick={doLogin}
+                          disabled={loginLoading}
+                          type="button"
+                          className={`btn-login  rounded-full 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>
+                          ) : (
+                            <>Continue</>
+                          )}
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                )
+                // END of family login compoenent
+              }
+              {/* END of login component */}
+
+              {loginType == "full" && (
+                <div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
+                  This site is protected by a Captcha. Our Privacy Policy and
+                  Terms of Service apply.
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </AuthLayout>
+    </>
+  );
+}
+
+const BrandBtn = ({
+  link,
+  imgSrc,
+  brand,
+  onClick,
+  isAnchor = false,
+  style = { visibility: "visible" },
+}) => {
+  // const doGoogle = async () => {
+  //   alert("start google");
+  // };
+
+  //  onSuccess: (codeResponse) => setUser(codeResponse),
+
+  // const doGoogle = useGoogleLogin({
+  //   onSuccess: (codeResponse) =>  console.log('Login onSuccess:', codeResponse),
+  //   onError: (error) => console.log('Login Failed:', error)
+  // });
+
+  // const doApple = async () => {
+  //   alert("start apple");
+  // };
+
+  // const doFacebook = async () => {
+  //   alert("start facebook");
+  // };
+  return (
+    <div className="w-full flex justify-center bottomMargin" style={style}>
+      {isAnchor ? (
+        <a
+          href={link}
+          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 text-[15px]">
+            Continue with {brand}
+          </span>
+        </a>
+      ) : (
+        <button
+          onClick={onClick}
+          // href="#dd"
+          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 text-[15px]">
+            Continue with {brand}
+          </span>
+        </button>
+      )}
+    </div>
+  );
+};

src/components/AuthPages/SignUp/index.jsx

@@ -47,21 +47,20 @@ export default function SignUp() {
 
   // Get Country Api
   const getCountryList = useCallback(async () => {
-    const res = await userApi.getSignupCountryData();
-
+    
     try {
-      if (res.status === 200) {
-        const { signup_country } = await res.data;
-        // setCountries(signup_country);
+      const res = await userApi.getSignupCountryData();
+      if (res.status === 200 && res.data.internal_return >= 0) {
+        const { result_list } = await res.data;
         if(country){ // IF LINK/PATHNAME HAS CNT QUERY VALUE
-          let cnt = signup_country.filter(item => item[0]==country) // test to see country passed in query param exist from list of countries supplied by API
+          let cnt = result_list.filter(item => item.code == country) // test to see country passed in query param exist from list of countries supplied by API
           if(!cnt.length){ // IF CNT EMPTY, SET FORMDATA COUNTRY BACK TO EMPTY STRING: RE: THIS IS BCOS WE INITAIL SET COUNTRY VALUE IN FORMDATA, IF COUNTRY PARAM IS PRESENT IN LINK
             setFormData(prev => ({...prev, country: ''}))
-            return setCountries({loading: false, data: signup_country});
+            return setCountries({loading: false, data: result_list});
           }
           return setCountries({loading: false, data: cnt});
         }
-        setCountries({loading: false, data:signup_country});
+        setCountries({loading: false, data:result_list});
       } else if (res.data.result !== 100) {
         setCountries({loading: false, data:[]});
       }
@@ -375,17 +374,17 @@ const SelectOption = ({
           {data?.data?.length > 1 ?
             <>
             <option value={""}>Select your Country</option>
-            {data?.data?.map((item, idx) => (
-              <option value={item[0]} key={idx}>
-                {item[1]}
+            {data?.data?.map((item) => (
+              <option value={item.code} key={item.uid}>
+                {item.country}
               </option>
             ))}
             </>
             :
             data?.data?.length == 1 ?
-            data?.data?.map((item, idx) => (
-              <option value={item[0]} key={idx}>
-                {item[1]}
+            data?.data?.map((item) => (
+              <option value={item.code} key={item.uid}>
+                {item.country}
               </option>
             ))
             :

src/components/AuthPages/SignUp/index2.jsx

@@ -0,0 +1,404 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
+import usersService from "../../../services/UsersService";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import AuthLayout from "../AuthLayout2";
+
+export default function SignUp() {
+  // eslint-disable-next-line no-restricted-globals
+  const queryParams = new URLSearchParams(location?.search);
+  const country = queryParams.get("cnt")?.toUpperCase();
+  
+  const {pathname} = useLocation()
+  const currentPath = country ? `${pathname}?cnt=${country.toLowerCase()}`:pathname // Determines the new pathname is country query params exist
+
+  const [signUpLoading, setSignUpLoading] = useState(false);
+  const [checked, setValue] = useState(false);
+  // for the catch error
+  const [msgError, setMsgError] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [countries, setCountries] = useState({loading:true, data:[]});
+
+  const [formData, setFormData] = useState({
+    country: country? country : "",
+    first_name: "",
+    last_name: "",
+    email: "",
+    password: "",
+  });
+
+  const handleInputChange = (event) => {
+    const { name, value } = event?.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  // To Show and Hide Password
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
+  const rememberMe = () => {
+    setValue(!checked);
+  };
+
+  const navigate = useNavigate();
+  const userApi = new usersService();
+
+  // Get Country Api
+  const getCountryList = useCallback(async () => {
+    
+    try {
+      const res = await userApi.getSignupCountryData();
+      if (res.status === 200 && res.data.internal_return >= 0) {
+        const { result_list } = await res.data;
+        if(country){ // IF LINK/PATHNAME HAS CNT QUERY VALUE
+          let cnt = result_list.filter(item => item.code == country) // test to see country passed in query param exist from list of countries supplied by API
+          if(!cnt.length){ // IF CNT EMPTY, SET FORMDATA COUNTRY BACK TO EMPTY STRING: RE: THIS IS BCOS WE INITAIL SET COUNTRY VALUE IN FORMDATA, IF COUNTRY PARAM IS PRESENT IN LINK
+            setFormData(prev => ({...prev, country: ''}))
+            return setCountries({loading: false, data: result_list});
+          }
+          return setCountries({loading: false, data: cnt});
+        }
+        setCountries({loading: false, data:result_list});
+      } else if (res.data.result !== 100) {
+        setCountries({loading: false, data:[]});
+      }
+    } catch (error) {
+      throw new Error(error);
+    }
+  }, []);
+
+  const handleSignUp = async () => {
+    let { country, first_name, last_name, email, password } = formData;
+    try {
+      if (
+        email !== "" &&
+        password !== "" &&
+        first_name !== "" &&
+        last_name !== "" &&
+        country !== ""
+      ) {
+        //checks if email is a valid email address
+        let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
+        if (regEx.test(email) == false) {
+          setMsgError("Invalid Email");
+          return setTimeout(() => {
+            setMsgError("");
+          }, 3000);
+        }
+
+        //checks if terms and condition is checked
+        if (!checked) {
+          setMsgError("Terms and condition required");
+          return setTimeout(() => {
+            setMsgError("");
+          }, 3000);
+        }
+
+        setSignUpLoading(true);
+        const reqData = {
+          country: country,
+          firstname: first_name,
+          lastname: last_name,
+          email: email,
+          username: email,
+          password: password,
+          terms: 1,
+          news: 1,
+        };
+
+        const res = await userApi.CreateUser(reqData);
+
+        if (res.status === 200) {
+          const { data } = res;
+          if (data && data.acc === "DULPICATE") {
+            setMsgError(
+              "Unable to use this username. Please try another username."
+            );
+            setSignUpLoading(false);
+          }
+          if (data && data.status === "1") {
+            setTimeout(() => {
+              navigate("/outmessage", { replace: true });
+              setSignUpLoading(false);
+            }, 2000);
+          }
+        } else {
+          setSignUpLoading(false);
+          setMsgError("An error occurred");
+        }
+      } else {
+        setMsgError("Please fill in fields");
+      }
+    } catch (error) {
+      throw new Error(error);
+    } finally {
+      setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
+    }
+  };
+
+  useEffect(() => {
+    getCountryList();
+  }, []);
+
+  return (
+    <>
+      <AuthLayout slogan="Welcome to WrenchBoard">
+        <div className="w-full">
+          <div className="mb-5">
+            <Link to={currentPath}>
+              <img
+                src={WrenchBoard}
+                alt="wrenchboard"
+                className="h-10 mx-auto"
+              />
+            </Link>
+          </div>
+          <div className="flex place-content-center">
+            <div className="w-11/12 sm:max-w-[530px]">
+              <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]">
+                  Create Account
+                </h1>
+                <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>
+              <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>
+                <div className="border-b border-[#eff2f5] max-w-[50%] w-full"></div>
+              </div>
+              <div className="input-area">
+                <SelectOption
+                  label="Country"
+                  data={countries}
+                  name="country"
+                  value={formData.country}
+                  inputHandler={handleInputChange}
+                  disable={country && countries?.data?.length <= 1 ? true : false}
+                />
+                <div className="input-fl-name mb-4 sm:flex w-full sm:space-x-6 ">
+                  <div className="input-item sm:w-1/2 w-full mb-4 sm:mb-0">
+                    <InputCom
+                      fieldClass="px-6"
+                      placeholder="Firstname"
+                      label="First Name"
+                      name="first_name"
+                      type="text"
+                      value={formData.first_name}
+                      inputHandler={handleInputChange}
+                    />
+                  </div>
+                  <div className="input-item flex-1">
+                    <InputCom
+                      fieldClass="px-6"
+                      placeholder="Lastname"
+                      label="Last Name"
+                      name="last_name"
+                      type="text"
+                      value={formData.last_name}
+                      inputHandler={handleInputChange}
+                    />
+                  </div>
+                </div>
+                <div className="input-item mb-4">
+                  <InputCom
+                    fieldClass="px-6"
+                    placeholder="support@mermsemr.com"
+                    label="Email"
+                    name="email"
+                    type="email"
+                    value={formData.email}
+                    inputHandler={handleInputChange}
+                  />
+                </div>
+                <div className="input-item mb-4">
+                  <InputCom
+                    fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
+                    placeholder="● ● ● ● ● ●"
+                    label="Password"
+                    name="password"
+                    type={showPassword ? "text" : "password"}
+                    onClick={togglePasswordVisibility}
+                    passIcon={showPassword ? "show-password" : "hide-password"}
+                    value={formData.password}
+                    inputHandler={handleInputChange}
+                  />
+                </div>
+                {msgError && (
+                  <div className="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 group cursor-pointer">
+                    <button
+                      onClick={rememberMe}
+                      type="button"
+                      className={`w-6 h-6 border-[#4687ba] text-white flex justify-center items-center border rounded-[.45em] group-checked:text-white transition-all duration-200 group-checked:cursor-default ${
+                        checked && "text-white bg-[#4687ba]"
+                      }`}
+                    >
+                      {checked && (
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="h-5 w-5"
+                          viewBox="0 0 20 20"
+                          fill="currentColor"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                            clipRule="evenodd"
+                          />
+                        </svg>
+                      )}
+                    </button>
+                    <span
+                      onClick={rememberMe}
+                      className="cursor-default text-dark-gray dark:text-white text-[15px] group-checked:text-white transition-all duration-200 group-checked:cursor-default"
+                    >
+                      I agree with all
+                      <Link
+                        href="#"
+                        className="text-base text-[#4687ba] hover:text-[#009ef7] mx-1 inline-block"
+                      >
+                        terms and condition
+                      </Link>
+                    </span>
+                  </div>
+                </div>
+
+                {/* Forgot Password */}
+                {/* <div className="forgot-password-area flex justify-between items-center mb-6">
+                  <div className="remember-checkbox flex items-center space-x-2.5">
+                    <button
+                      onClick={rememberMe}
+                      type="button"
+                      className="w-6 h-6 bg-[#4687ba] text-white flex justify-center items-center border border-light-gray rounded-[.45em]"
+                    >
+                      {checked && (
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="h-5 w-5"
+                          viewBox="0 0 20 20"
+                          fill="currentColor"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                            clipRule="evenodd"
+                          />
+                        </svg>
+                      )}
+                    </button>
+                    <span
+                      onClick={rememberMe}
+                      className="cursor-default text-dark-gray dark:text-white text-[15px]"
+                    >
+                      I agree with all
+                      <Link
+                        href="#"
+                        className="text-base text-[#4687ba] hover:text-[#009ef7] mx-1 inline-block"
+                      >
+                        terms and condition
+                      </Link>
+                    </span>
+                  </div>
+                </div> */}
+                <div className="signin-area mb-1">
+                  <div className="flex justify-center">
+                    <button
+                      disabled={countries.loading}
+                      type="button"
+                      onClick={handleSignUp}
+                      className={`rounded-full 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] btn-login`}
+                    >
+                      {signUpLoading ? (
+                        <div className="signup btn-loader"></div>
+                      ) : (
+                        <span>Sign Up</span>
+                      )}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </AuthLayout>
+    </>
+  );
+}
+
+const SelectOption = ({
+  label,
+  name,
+  inputHandler,
+  value,
+  data, // passing the data from parent
+  disable
+}) => {
+  return (
+    <div className="input-com mb-7">
+      <div className="flex items-center justify-between">
+        <label
+          className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold block mb-2.5"
+          htmlFor={name}
+        >
+          {label}
+        </label>
+      </div>
+      <div>
+        <select
+        disabled={disable}
+          name={name}
+          id={name}
+          className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full 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}
+        >
+          {data?.data?.length > 1 ?
+            <>
+            <option value={""}>Select your Country</option>
+            {data?.data?.map((item) => (
+              <option value={item.code} key={item.uid}>
+                {item.country}
+              </option>
+            ))}
+            </>
+            :
+            data?.data?.length == 1 ?
+            data?.data?.map((item) => (
+              <option value={item.code} key={item.uid}>
+                {item.country}
+              </option>
+            ))
+            :
+            data?.data?.length < 1 && data.loading ?
+            <option value=''>
+              Loading...
+            </option>
+            :
+            <option value=''>
+              No Country Found!
+            </option>
+          }
+        </select>
+      </div>
+    </div>
+  );
+};

src/components/AuthPages/UpdatePassword/index2.jsx

@@ -0,0 +1,81 @@
+import React, { useState } from "react";
+import titleShape from "../../../assets/images/shape/title-shape-two.svg";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import AuthLayout from "../AuthLayout2";
+import ThankYou from "../ThankYou";
+
+export default function UpdatePassword() {
+  const [updated, setValue] = useState(false);
+  const [message, setMessage] = useState(false);
+  const updatePassword = () => {
+    setValue(!updated);
+    setTimeout(() => {
+      setMessage(!message);
+    }, 100);
+  };
+
+  return (
+    <>
+      <AuthLayout slogan="Welcome to  myFit">
+        {updated === false ? (
+          <div className="flex place-content-center">
+            <div className="w-11/12 sm:max-w-[600px]">
+              <div className="title-area relative flex flex-col justify-center items-center mb-7">
+                <h1 className="sm:text-5xl text-4xl font-bold leading-[74px]   text-dark-gray dark:text-white">
+                  Update Password
+                </h1>
+                {/* w-[341px] absolute top-14 left-12 */}
+                <div className="shape sm:w-[341px] w-[270px] -mt-5 sm:-mt-1 ml-5">
+                  <img src={titleShape} alt="shape" />
+                </div>
+              </div>
+              <div className="input-area">
+                <div className="input-item mb-5">
+                  <InputCom
+                    fieldClass="px-6"
+                    placeholder="*********"
+                    label="Old Password"
+                    name="password"
+                    type="password"
+                    iconName="password"
+                  />
+                </div>
+                <div className="input-item mb-5">
+                  <InputCom
+                    fieldClass="px-6"
+                    placeholder="*********"
+                    label="New Password"
+                    name="password"
+                    type="password"
+                    iconName="password"
+                  />
+                </div>
+                <div className="input-item mb-5">
+                  <InputCom
+                    fieldClass="px-6"
+                    placeholder="*********"
+                    label="Re-enter Password"
+                    name="password"
+                    type="password"
+                    iconName="password"
+                  />
+                </div>
+                <div className="signin-area mb-3.5">
+                  <button
+                    onClick={updatePassword}
+                    type="button"
+                    className="w-full rounded-[50px] mb-5 h-[58px] text-xl text-white font-bold flex justify-center bg-purple items-center"
+                  >
+                    Continue
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <ThankYou className={`thankyou-section ${message ? "active" : ""}`} />
+        )}
+      </AuthLayout>
+    </>
+  );
+}

src/components/AuthPages/VerifyLink/index2.jsx

@@ -0,0 +1,245 @@
+import { useCallback, useEffect, useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
+import debounce from "../../../hooks/debounce";
+import usersService from "../../../services/UsersService";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import AuthLayout from "../AuthLayout2";
+
+export default function VerifyLink() {
+  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("vlnk");
+  const userApi = new usersService();
+
+  // 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 () => {
+    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}`);
+            localStorage.setItem("uid", data?.uid)
+
+
+            navigate("/", { replace: true });
+            setLinkLoader(false);
+          } else {
+            setLinkLoader(false);
+            setMsgError("Invalid Link or Password Combination");
+          }
+        } else {
+          setLinkLoader(false);
+          setLinkSuccess(false);
+          setMsgError("An error occurred");
+        }
+      } else {
+        setMsgError("Please fill in fields");
+      }
+    } catch (error) {
+      setLinkLoader(false);
+      setLinkSuccess(false);
+      throw new Error(error);
+    } finally {
+      setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
+    }
+  };
+
+  // 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('TESTING VERIFY',data)
+        if (
+          data &&
+          data.internal_return >= 0 && 
+          data.status == 0 && 
+          data.pending_id != '' && 
+          data.pending_uid != '' && 
+          data.username != '' &&
+          data.status_text === "Link Verified"
+        ) {
+          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">
+        {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"
+                />
+              </Link>
+            </div>
+            <div className="flex place-content-center">
+              <div className="w-11/12 sm:max-w-[500px]">
+                <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]">
+                    {linkSuccess
+                      ? "Sign In to WrenchBoard"
+                      : "Invalid verification link"}
+                  </h1>
+                </div>
+                {/* If the verification was a success */}
+                {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 = ({
+  onSubmit,
+  password,
+  handlePassword,
+  email,
+  handleEmail,
+  msgErr,
+  loader,
+}) => (
+  <div className="input-area">
+    {/* INPUT */}
+    <div className="mb-5">
+      <InputCom
+        fieldClass="px-6"
+        value={email}
+        inputHandler={handleEmail}
+        placeholder="support@mermsemr.com"
+        label="Email"
+        name="email"
+        type="email"
+        iconName="message"
+      />
+    </div>
+    <div className="mb-5">
+      <InputCom
+        fieldClass="px-6"
+        value={password}
+        inputHandler={handlePassword}
+        placeholder="● ● ● ● ● ●"
+        label="Password"
+        name="password"
+        type="password"
+        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={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 text-[15px]`}
+      >
+        {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.
+      </p>
+    </div>
+
+    <div className="signin-area flex justify-center mb-3.5">
+      <button
+        onClick={onClick}
+        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>
+);

src/components/AuthPages/VerifyPassword/index2.jsx

@@ -0,0 +1,269 @@
+import { useEffect, useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
+import usersService from "../../../services/UsersService";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import AuthLayout from "../AuthLayout2";
+import ForgetPwdResponse from "../ForgetPwdResponse";
+import PasswordValidator from "../../../lib/PasswordValidator";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+
+const VerifyPassword = () => {
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [requestStatus, setRequestStatus] = useState({loading: true, status:false, data: []})
+  const [msgError, setMsgError] = useState("");
+  const [linkLoader, setLinkLoader] = useState(false);
+  const [linkSuccess, setLinkSuccess] = useState(null);
+  const [showPassword, setShowPassword] = useState(false);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location?.search);
+  const token = queryParams.get("passlink");
+  const userApi = new usersService();
+
+  // To Show and Hide Password
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
+  // Password
+  const handlePassword = (e) => {
+    let { name, value } = e?.target;
+    if (name == "password") setPassword(value);
+    if (name == "confirm_password") setConfirmPassword(value);
+  };
+
+  const completeReset = async () => {
+    if(!password || !confirmPassword){ // CHECKS IF PASSWORD IS EMPTY
+      setMsgError("Please fill in fields");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+    if(password != confirmPassword){ // CHECKS IF PASSWORD EQUALS CONFIRM PASSWORD
+      setMsgError("Passwords does not match");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+    if(password.length < 6){ // CHECKS IF PASSWORD LENGTH IS UPTO 6 CHARACTERS
+      setMsgError("Password must be upto six characters");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+    if(!PasswordValidator(password)){ // CHECKS IF PASSWORD IS VALID
+      setMsgError("Password must contain alphanumeric, uppercase and special character: eg: Password1@");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+    try {
+          setLinkLoader(true);
+          var reqData = {
+            sessionid: "DUMMY-CANNOT_BE_EMPTY",
+            reset_link: token,
+            newpass: password,
+            m_uid: requestStatus.data?.m_uid || '',
+            reset_uid: requestStatus.data?.reset_uid || '',
+            step: 300,
+            action: 730,
+          };
+          const res = await userApi?.CompleteResetPassword(reqData);
+
+          if (res.status == 200) {
+            const { data } = res;
+            if (data?.internal_return >= 0) {
+              // setTimeout(() => {
+              //   navigate("/login", { replace: true });
+              //   setLinkLoader(false);
+              // }, 2000);
+              setLinkSuccess(true);
+            } else {
+              setLinkLoader(false);
+              setMsgError("An error occurred");
+              setLinkSuccess(false);
+            }
+          } else {
+            setLinkLoader(false);
+            setLinkSuccess(false);
+          }
+    } catch (error) {
+      setLinkLoader(false);
+      setLinkSuccess(false);
+      throw new Error(error);
+    } finally {
+      setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
+    }
+  };
+
+  const verifyResetPwd = () => { // FUNCTION TO VERIFY RESET PASSWORD LINK
+    setRequestStatus({loading: true, status:false, data: []})
+    var reqData = {
+      sessionid: "DUMMY-CANNOT_BE_EMPTY",
+      reset_link: token,
+      step: 200,
+      action: 730,
+    };
+    userApi.CompleteResetPassword(reqData).then(res => {
+      if(res.status != 200 || res.data.internal_return < 0){
+        return setRequestStatus({loading: false, status:false, data: []})
+      }
+      setRequestStatus({loading: false, status:true, data: res.data})
+    }).catch(error => {
+      setRequestStatus({loading: false, status:false, data: []})
+    })
+  }
+
+  useEffect(()=>{
+    // little checker for the validity of the token
+  if (token==null || token?.length != 64) {
+    return setRequestStatus({loading: false, status:false, data: []});
+  }
+  verifyResetPwd()
+  },[])
+  return (
+    <>
+      <AuthLayout slogan="Welcome to WrenchBoard">
+        <div className="w-full">
+          <div className="mb-12">
+            <Link to="#">
+              <img
+                src={WrenchBoard}
+                alt="wrenchboard"
+                className="h-10 mx-auto"
+              />
+            </Link>
+          </div>
+          <div className="flex place-content-center">
+            {requestStatus.loading ?
+            <LoadingSpinner color='sky-blue' size='16' height='h-300px' />
+            :
+            !requestStatus.loading && requestStatus.status ?
+            <div className="w-11/12 sm:max-w-[500px]">
+              {linkSuccess == null ?
+              <>
+                <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]">
+                    Password Reset
+                  </h1>
+                    <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                      Enter a new password to reset
+                    </span>
+                    <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                      We'll send an email to confirm reset
+                    </span>
+                </div>
+                <div>
+                  <p className="text-red-500 font-semibold mb-3 leading-[27.3px] text-[13px]">
+                    Must include a special, numeric, uppercase and lowercase character
+                  </p>
+                </div>
+                  <SuccessfulComponent
+                    password={password}
+                    confirmPassword={confirmPassword}
+                    handlePassword={handlePassword}
+                    onSubmit={completeReset}
+                    msgErr={msgError}
+                    loader={linkLoader}
+                    showPassword={showPassword}
+                    onClick={togglePasswordVisibility}
+                    navigateHandler={() => navigate("/login")}
+                  />
+                </>
+                :
+                <ForgetPwdResponse 
+                title={linkSuccess? 'Password Reset Complete' : 'Password Reset Error'}
+                message={linkSuccess? 'Password Reset Complete. You can login now with your new credentials' : 'Password Reset Error. Please get in touch with support for further support'
+                }
+                type={linkSuccess}
+              />
+              }
+            </div>
+            :
+            <div className="w-11/12 sm:max-w-[500px] title-area flex flex-col justify-center items-center relative text-center mb-7">
+              <ForgetPwdResponse 
+                title={'Forget Password'}
+                message={'We are unable to continue to reset process. This error is usually due to expired links. Please start all over or contact us'}
+                type={requestStatus.status}
+              />
+            </div>
+            }
+          </div>
+        </div>
+      </AuthLayout>
+    </>
+  );
+};
+
+export default VerifyPassword;
+
+const SuccessfulComponent = ({
+  onSubmit,
+  navigateHandler,
+  showPassword,
+  onClick,
+  password,
+  confirmPassword,
+  handlePassword,
+  msgErr,
+  loader,
+}) => (
+  <div className="input-area">
+    {/* INPUT */}
+    <div className="mb-5">
+      <InputCom
+        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
+        value={password}
+        inputHandler={handlePassword}
+        placeholder="● ● ● ● ● ●"
+        label="Password"
+        name="password"
+        type={showPassword ? "text" : "password"}
+        onClick={onClick}
+        passIcon={showPassword ? "show-password" : "hide-password"}
+      />
+    </div>
+    <div className="mb-5">
+      <InputCom
+        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
+        value={confirmPassword}
+        inputHandler={handlePassword}
+        placeholder="● ● ● ● ● ●"
+        label="Confirm Password"
+        name="confirm_password"
+        type="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={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 text-[15px]`}
+      >
+        {loader ? (
+          <div className="signup btn-loader"></div>
+        ) : (
+          <span>Continue</span>
+        )}
+      </button>
+    </div>
+    <div className="signin-area mb-3.5">
+      <button
+        onClick={navigateHandler}
+        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] btn-login`}
+      >
+        <span>Return Home</span>
+      </button>
+    </div>
+  </div>
+);

src/components/AuthPages/VerifyYou/index2.jsx

@@ -0,0 +1,64 @@
+import { useNavigate, Link } from "react-router-dom";
+import AuthLayout from "../AuthLayout2";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
+
+export default function VerifyYou() {
+  const navigate = useNavigate();
+  return (
+    <>
+      <AuthLayout slogan="Welcome to WrenchBoard">
+        <div className="w-full">
+          <div className="mb-12">
+            <Link to="#">
+              <img
+                src={WrenchBoard}
+                alt="wrenchboard"
+                className="h-10 mx-auto"
+              />
+            </Link>
+          </div>
+          <div className="flex place-content-center">
+            <div className="w-11/12 sm:max-w-[500px]">
+              <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>
+          </div>
+        </div>
+      </AuthLayout>
+    </>
+  );
+}

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -172,9 +172,8 @@ const AssignTaskPopout = React.memo(
         <ModalCom
           action={action}
           situation={situation}
-          className="assign-task-popup"
         >
-          <div className="w-full h-full lg:w-[700px] lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+          <div className="w-11/12 lg:w-[700px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
             <div className="w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
               <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
                 Assign task to{" "}

src/components/FamilyAcc/FamilyTable.jsx

@@ -77,7 +77,7 @@ export default function FamilyTable({
       >
         <td className="py-4">
           <div className="flex space-x-2 items-center w-full">
-            <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1]">
+            <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
               <img
                 // src={profile_picture}
                 src={image || profile_picture || localImgLoad(`images/icons/${banner}`)}

src/components/FamilyAcc/index.jsx

@@ -226,7 +226,7 @@ const FamilyForm = ({
   popUpHandler,
 }) => {
   return (
-    <div className="logout-modal-wrapper lg:w-[460px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+    <div className="logout-modal-wrapper w-11/12 lg:w-[460px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
       <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29] ">
         <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
           Add Members

src/components/Helpers/Icons.jsx

@@ -462,6 +462,15 @@ export default function Icons({ name }) {
             clipRule="evenodd"
           />
         </svg>
+      ) : name === "my-page" ? (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 50" id="Page">
+          <path
+            fillRule="evenodd"
+            d="M0 13V2a2 2 0 0 1 2-2h64a2 2 0 0 1 2 2v11H0Zm0 4v31a2 2 0 0 0 2 2h20V17H0Zm26 33h40a2 2 0 0 0 2-2V17H26v33Z"
+            fill="#ffffff"
+            className="color000000 svgShape"
+          ></path>
+        </svg>
       ) : name === "accordion-minus" ? (
         <svg
           width="20"
@@ -510,20 +519,48 @@ export default function Icons({ name }) {
       ) : name === "master-card" ? (
         <img className="w-[30px]" src={MasterCard} alt="card" />
       ) : name === "new-dashboard" ? (
-        <img className="w-[17px] h-[17px]" src={localImgLoad('images/icons/dashboard.svg')} alt="dashboard" />
+        <img
+          className="w-[17px] h-[17px]"
+          src={localImgLoad("images/icons/dashboard.svg")}
+          alt="dashboard"
+        />
       ) : name === "new-family" ? (
-        <img className="w-[17px] h-[17px]" src={localImgLoad('images/icons/family.svg')} alt="family" />
+        <img
+          className="w-[17px] h-[17px]"
+          src={localImgLoad("images/icons/family.svg")}
+          alt="family"
+        />
       ) : name === "new-logout" ? (
-        <img className="w-[45px] rounded-full bg-white p-1" src={localImgLoad('images/icons/logout.svg')} alt="logout" />
+        <img
+          className="w-[45px] rounded-full bg-white p-1"
+          src={localImgLoad("images/icons/logout.svg")}
+          alt="logout"
+        />
       ) : name === "new-market" ? (
-        <img className="w-[17px] h-[17px]" src={localImgLoad('images/icons/market.svg')} alt="market" />
+        <img
+          className="w-[17px] h-[17px]"
+          src={localImgLoad("images/icons/market.svg")}
+          alt="market"
+        />
       ) : name === "new-mytask" ? (
-        <img className="w-[17px] h-[17px]" src={localImgLoad('images/icons/my-task.svg')} alt="task" />
+        <img
+          className="w-[17px] h-[17px]"
+          src={localImgLoad("images/icons/my-task.svg")}
+          alt="task"
+        />
       ) : name === "family-id" ? (
-        <img className="w-[20px] h-[20px]" src={localImgLoad('images/icons/family-id.svg')} alt="family-id" />
+        <img
+          className="w-[20px] h-[20px]"
+          src={localImgLoad("images/icons/family-id.svg")}
+          alt="family-id"
+        />
       ) : name === "family-pin" ? (
-        <img className="w-[20px] h-[20px]" src={localImgLoad('images/icons/family-pin.svg')} alt="family-pin" />
-      ): (
+        <img
+          className="w-[20px] h-[20px]"
+          src={localImgLoad("images/icons/family-pin.svg")}
+          alt="family-pin"
+        />
+      ) : (
         ""
       )}
     </>

src/components/Helpers/ModalCom.jsx

@@ -16,7 +16,7 @@ export default function ModalCom({ action, children, situation, isOpen, classNam
         onClick={action || isOpen}
         className="fixed top-0 left-0 w-full lg:h-[100vh] h-full bg-black bg-opacity-40 backdrop-filter backdrop-blur-sm z-50"
       ></div>
-      <div className={`children-element fixed lg:h-100vh h-full z-[99999999999999] w-full lg:w-auto ${className}`}>
+      <div className={`fixed lg:h-100vh h-full z-[99999999999999] w-full lg:w-auto inset-0 flex flex-col justify-center items-center ${className}`}>
         {children && children}
       </div>
     </div>

src/components/JobGroups/AddGroup.jsx

@@ -0,0 +1,157 @@
+import React, { useState } from 'react'
+
+import ModalCom from '../Helpers/ModalCom'
+import LoadingSpinner from '../Spinners/LoadingSpinner'
+import InputCom from '../Helpers/Inputs/InputCom/index'
+
+import usersService from '../../services/UsersService'
+
+export default function AddGroup({action, situation , setUpdateList}) {
+
+    const api = new usersService()
+
+    const [name, setName] = useState('')
+
+    const handleChange = ({target:{name, value}}) =>{
+        setName(value)
+    }
+
+    let [requestStatus, setRequestStatus] = useState({
+        loading: false,
+        status: false,
+        message: "",
+      }); // STATE FOR KNOWING WHEN A REQUEST IS MADE TO THE SERVER
+
+    const addGroup = () => {
+        setRequestStatus({loading:true, status:false, message:''})
+        if(name == ''){
+            setRequestStatus({loading:false, status:false, message:'Please enter a group name'})
+            return setTimeout(()=>{
+                setRequestStatus({loading:false, status:false, message:''})
+            },3000)
+        }
+        if(name.length < 6){
+            setRequestStatus({loading:false, status:false, message:'Group name must be up to six characters'})
+            return setTimeout(()=>{
+                setRequestStatus({loading:false, status:false, message:''})
+            },3000)
+        }
+        api.jobGroupAdd({group_name:name, action:13025}).then(response => {
+            let {status, data} = response
+            if(status != 200 || data.internal_return < 0){
+                setRequestStatus({loading:false, status:false, message:'Unable to add Group'})
+                return 
+            }
+            setRequestStatus({loading:false, status:true, message:'Group Added'})
+            setTimeout(()=>{
+                setRequestStatus({loading:false, status:false, message:''})
+                // close modal
+                action()
+                // reload group page
+                setUpdateList(prev => !prev)
+            },3000)
+        }).catch(error => {
+            setRequestStatus({loading:false, status:false, message:'Unable to add Group, try again later'})
+        }).finally(()=>{
+            setTimeout(()=>{
+                setRequestStatus({loading:false, status:false, message:''})
+            },3000)
+        })
+    }
+
+  return (
+    <ModalCom   
+        action={action}
+        situation={situation}
+    >
+      <div className="logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+        <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
+          <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+            Add Group
+          </h1>
+          <button
+            type="button"
+            className="text-[#374557] dark:text-red-500"
+            onClick={action}
+          >
+            <svg
+              width="36"
+              height="36"
+              viewBox="0 0 36 36"
+              fill="none"
+              className="fill-current"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
+                fill=""
+                fillOpacity="0.6"
+              />
+              <path
+                d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
+                fill="#"
+                fillOpacity="0.6"
+              />
+            </svg>
+          </button>
+        </div>
+        <div className="logout-modal-body w-full flex flex-col items-center px-10 py-8">
+          <div className="mb-6 w-full">
+            <div className="input-item">
+                <InputCom
+                labelClass="tracking-wider"
+                fieldClass="sm:px-6 px-2"
+                value={name}
+                placeholder="Group Name"
+                label="Group Name"
+                name="name"
+                type="text"
+                inputHandler={handleChange}
+                // iconName="message"
+                />
+            </div>
+          </div>
+          <div className="w-full flex justify-between items-center gap-4">
+            <button
+              onClick={action}
+              type="button"
+              className="text-base text-light-red tracking-wide "
+            >
+              <span className="border-b dark:border-[#5356fb29]  border-light-red">Cancel</span>
+            </button>
+            {requestStatus.loading ? (
+              <LoadingSpinner size="8" color="sky-blue" />
+            ) : (
+              <button
+                onClick={() => addGroup()}
+                type="button"
+                className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
+              >
+                Add Group
+              </button>
+            )}
+          </div>
+
+          {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+          {requestStatus.message != "" &&
+            (!requestStatus.status ? (
+              <div
+                className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+              >
+                {requestStatus.message}
+              </div>
+            ) : (
+              requestStatus.status && (
+                <div
+                  className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                >
+                  {requestStatus.message}
+                </div>
+              )
+            ))}
+          {/* End of error or success display */}
+        </div>
+      </div>
+    </ModalCom>
+  )
+}

src/components/JobGroups/DeleteGroup.jsx

@@ -0,0 +1,122 @@
+import React, { useState } from 'react'
+
+import ModalCom from '../Helpers/ModalCom'
+import LoadingSpinner from '../Spinners/LoadingSpinner'
+
+export default function DeleteGroup({action, situation, details}) {
+
+    let [requestStatus, setRequestStatus] = useState({
+        laoding: false,
+        status: false,
+        message: "",
+      }); // STATE FOR KNOWING WHEN A REQUEST IS MADE TO THE SERVER
+
+    const deleteGroup = () => {
+
+    }
+
+  return (
+    <ModalCom   
+        action={action}
+        situation={situation}
+    >
+      <div className="logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+        <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
+          <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+            Delete Group
+          </h1>
+          <button
+            type="button"
+            className="text-[#374557] dark:text-red-500"
+            onClick={action}
+          >
+            <svg
+              width="36"
+              height="36"
+              viewBox="0 0 36 36"
+              fill="none"
+              className="fill-current"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
+                fill=""
+                fillOpacity="0.6"
+              />
+              <path
+                d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
+                fill="#"
+                fillOpacity="0.6"
+              />
+            </svg>
+          </button>
+        </div>
+        <div className="logout-modal-body w-full flex flex-col items-center px-10 py-8">
+          <div className="what-icon mb-6 cursor-pointer">
+            <svg
+              width="136"
+              height="136"
+              viewBox="0 0 136 136"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle cx="68" cy="68" r="68" fill="#4687ba" />
+              <path
+                d="M69.8844 35.7891C71.1588 36.0357 72.4569 36.1967 73.7044 36.5423C81.5447 38.7098 87.2705 45.5378 87.9574 53.6156C88.5113 60.1147 86.3075 65.6006 81.5043 70.0195C79.8359 71.5545 78.0497 72.9604 76.3408 74.4534C76.127 74.6397 75.9654 75.0037 75.9604 75.2872C75.9284 77.2752 75.9435 79.2649 75.9435 81.2965C70.8895 81.2965 65.8758 81.2965 60.7915 81.2965C60.7915 81.0616 60.7915 80.8385 60.7915 80.6137C60.7915 76.5454 60.7999 72.4772 60.7797 68.4106C60.778 67.9392 60.9312 67.649 61.2831 67.3537C64.5643 64.5957 67.8271 61.8175 71.1033 59.0545C72.2616 58.0781 72.9215 56.8702 72.9081 55.3419C72.8878 52.916 70.8608 50.9146 68.423 50.8911C65.9701 50.8693 63.9145 52.8053 63.832 55.2328C63.8084 55.8988 63.8286 56.5665 63.8286 57.2695C58.7745 57.2695 53.7744 57.2695 48.6917 57.2695C48.6917 56.3149 48.6462 55.3385 48.6984 54.3655C49.222 44.699 56.7442 36.8745 66.4331 35.8914C66.5762 35.8763 66.7142 35.8243 66.854 35.7891C67.8641 35.7891 68.8742 35.7891 69.8844 35.7891Z"
+                fill="white"
+              />
+              <path
+                d="M67.485 100.21C66.1617 99.9268 64.9041 99.5091 63.803 98.6787C61.3804 96.8484 60.2877 93.7699 61.0386 90.7888C61.7726 87.8747 64.2138 85.6703 67.2089 85.2157C71.273 84.6 75.2024 87.3681 75.8135 91.277C76.4937 95.6153 73.8202 99.3782 69.544 100.103C69.4429 100.12 69.3487 100.172 69.2527 100.209C68.6635 100.21 68.0742 100.21 67.485 100.21Z"
+                fill="white"
+              />
+            </svg>
+          </div>
+          <div className="mb-6">
+            <p className="text-xl text-center tracking-wide text-dark-gray dark:text-white">
+              Are you sure, you want to delete <br /> <span>'{details?.group_name}'</span>
+            </p>
+          </div>
+          <div className="flex space-x-2.5">
+            <button
+              onClick={action}
+              type="button"
+              className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full"
+            >
+              <span className="text-gradient">Cancel</span>
+            </button>
+            {requestStatus.laoding ? (
+              <LoadingSpinner size="8" color="sky-blue" />
+            ) : (
+              <button
+                onClick={() => deleteGroup()}
+                type="button"
+                className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
+              >
+                Confirm Delete
+              </button>
+            )}
+          </div>
+
+          {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+          {requestStatus.message != "" &&
+            (!requestStatus.status ? (
+              <div
+                className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+              >
+                {requestStatus.message}
+              </div>
+            ) : (
+              requestStatus.status && (
+                <div
+                  className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                >
+                  {requestStatus.message}
+                </div>
+              )
+            ))}
+          {/* End of error or success display */}
+        </div>
+      </div>
+    </ModalCom>
+  )
+}

src/components/JobGroups/DeleteMember.jsx

@@ -0,0 +1,122 @@
+import React, { useState } from 'react'
+
+import ModalCom from '../Helpers/ModalCom'
+import LoadingSpinner from '../Spinners/LoadingSpinner'
+
+export default function DeleteMember({action, situation, details}) {
+
+    let [requestStatus, setRequestStatus] = useState({
+        laoding: false,
+        status: false,
+        message: "",
+      }); // STATE FOR KNOWING WHEN A REQUEST IS MADE TO THE SERVER
+
+    const deleteMember = () => {
+
+    }
+
+  return (
+    <ModalCom   
+        action={action}
+        situation={situation}
+    >
+      <div className="logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+        <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
+          <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+            Delete Member
+          </h1>
+          <button
+            type="button"
+            className="text-[#374557] dark:text-red-500"
+            onClick={action}
+          >
+            <svg
+              width="36"
+              height="36"
+              viewBox="0 0 36 36"
+              fill="none"
+              className="fill-current"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
+                fill=""
+                fillOpacity="0.6"
+              />
+              <path
+                d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
+                fill="#"
+                fillOpacity="0.6"
+              />
+            </svg>
+          </button>
+        </div>
+        <div className="logout-modal-body w-full flex flex-col items-center px-10 py-8">
+          <div className="what-icon mb-6 cursor-pointer">
+            <svg
+              width="136"
+              height="136"
+              viewBox="0 0 136 136"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle cx="68" cy="68" r="68" fill="#4687ba" />
+              <path
+                d="M69.8844 35.7891C71.1588 36.0357 72.4569 36.1967 73.7044 36.5423C81.5447 38.7098 87.2705 45.5378 87.9574 53.6156C88.5113 60.1147 86.3075 65.6006 81.5043 70.0195C79.8359 71.5545 78.0497 72.9604 76.3408 74.4534C76.127 74.6397 75.9654 75.0037 75.9604 75.2872C75.9284 77.2752 75.9435 79.2649 75.9435 81.2965C70.8895 81.2965 65.8758 81.2965 60.7915 81.2965C60.7915 81.0616 60.7915 80.8385 60.7915 80.6137C60.7915 76.5454 60.7999 72.4772 60.7797 68.4106C60.778 67.9392 60.9312 67.649 61.2831 67.3537C64.5643 64.5957 67.8271 61.8175 71.1033 59.0545C72.2616 58.0781 72.9215 56.8702 72.9081 55.3419C72.8878 52.916 70.8608 50.9146 68.423 50.8911C65.9701 50.8693 63.9145 52.8053 63.832 55.2328C63.8084 55.8988 63.8286 56.5665 63.8286 57.2695C58.7745 57.2695 53.7744 57.2695 48.6917 57.2695C48.6917 56.3149 48.6462 55.3385 48.6984 54.3655C49.222 44.699 56.7442 36.8745 66.4331 35.8914C66.5762 35.8763 66.7142 35.8243 66.854 35.7891C67.8641 35.7891 68.8742 35.7891 69.8844 35.7891Z"
+                fill="white"
+              />
+              <path
+                d="M67.485 100.21C66.1617 99.9268 64.9041 99.5091 63.803 98.6787C61.3804 96.8484 60.2877 93.7699 61.0386 90.7888C61.7726 87.8747 64.2138 85.6703 67.2089 85.2157C71.273 84.6 75.2024 87.3681 75.8135 91.277C76.4937 95.6153 73.8202 99.3782 69.544 100.103C69.4429 100.12 69.3487 100.172 69.2527 100.209C68.6635 100.21 68.0742 100.21 67.485 100.21Z"
+                fill="white"
+              />
+            </svg>
+          </div>
+          <div className="mb-6">
+            <p className="text-xl text-center tracking-wide text-dark-gray dark:text-white">
+              Are you sure, you want to delete <br /> <span>'{details?.firstname} {details.lastname}'</span>
+            </p>
+          </div>
+          <div className="flex space-x-2.5">
+            <button
+              onClick={action}
+              type="button"
+              className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full"
+            >
+              <span className="text-gradient">Cancel</span>
+            </button>
+            {requestStatus.laoding ? (
+              <LoadingSpinner size="8" color="sky-blue" />
+            ) : (
+              <button
+                onClick={() => deleteMember()}
+                type="button"
+                className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
+              >
+                Confirm Delete
+              </button>
+            )}
+          </div>
+
+          {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+          {requestStatus.message != "" &&
+            (!requestStatus.status ? (
+              <div
+                className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+              >
+                {requestStatus.message}
+              </div>
+            ) : (
+              requestStatus.status && (
+                <div
+                  className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                >
+                  {requestStatus.message}
+                </div>
+              )
+            ))}
+          {/* End of error or success display */}
+        </div>
+      </div>
+    </ModalCom>
+  )
+}

src/components/JobGroups/GroupList.jsx

@@ -0,0 +1,72 @@
+import React, { useState } from 'react'
+
+import InputCom from '../../components/Helpers/Inputs/InputCom/index'
+import DeleteGroup from './DeleteGroup'
+import AddGroup from './AddGroup'
+
+export default function GroupList({groupList, selectedGroup, changeSelectedGroup, setUpdateList}) {
+
+    const [deletePopout, setDeletePopout] = useState({
+        status: false,
+        data: {}
+    })
+
+    const [addGroupPopout, setAddGroupPopout] = useState(false)
+
+    const handleAddGroup = () => {
+        setAddGroupPopout(true)
+    }
+
+    const handleDeleteGroup = (item) => {
+        setDeletePopout({
+            status: true,
+            data: {...item}
+        })
+    }
+
+
+  return (
+    <>
+        <div className='p-5 w-full lg:w-[400px] min-h-[300px] bg-sky-100 dark:bg-dark-gray rounded-2xl'>
+            {/* <h1 className='mb-5 text-lg lg:text-2xl tracking-wide font-bold text-slate-900 dark:text-slate-100'>Jobs Groups</h1> */}
+            <div className='flex justify-end items-center'>
+                <button onClick={handleAddGroup} className='py-2 px-4 flex justify-center items-center bg-sky-blue hover:bg-sky-600 text-base rounded-full text-white font-bold'>Add Group</button>
+            </div>
+
+            {groupList && groupList.length < 1 ?
+            <h1 className='my-5 text-lg tracking-wide text-slate-900 dark:text-slate-100'>No Group Found!</h1>
+            :
+            <div className='my-4 max-h-[400px] overflow-y-auto'>
+                <div className='flex flex-col'>
+                    {groupList.map(item=> (
+                        <div key={item.group_uid} className='p-2 flex gap-2 items-center justify-between w-full'>
+                            <div className='flex gap-2 items-center'>
+                                <input type='radio' name='grouplist' value={item.group_id} checked={selectedGroup?.id == item?.group_id} onChange={changeSelectedGroup} className='w-[20px] h-[20px] outline-none' />
+                                <p className='text-sm lg:text-base text-slate-900 dark:text-slate-100'>{item.group_name}</p>
+                            </div>
+                            <button onClick={()=>{handleDeleteGroup(item)}} className='rounded-lg text-sm bg-red-500 hover:bg-red-400 text-white font-bold py-1 px-2.5 flex justify-center items-center'>X</button>
+                        </div>
+                    ))}
+                </div>
+            </div>
+            }
+        </div>
+        
+        {deletePopout.status &&
+            <DeleteGroup 
+                action={()=>setDeletePopout({status:false, data:{}})}
+                situation={deletePopout.status}
+                details={deletePopout.data}
+            />
+        }
+
+        {addGroupPopout &&
+            <AddGroup 
+                action={()=>setAddGroupPopout(false)}
+                situation={addGroupPopout}
+                setUpdateList={setUpdateList}
+            />
+        }
+    </>
+  )
+}

src/components/JobGroups/GroupMemberTable.jsx

@@ -0,0 +1,98 @@
+import React, { useState } from 'react'
+import { handlePagingFunc } from '../Pagination/HandlePagination';
+import PaginatedList  from '../Pagination/PaginatedList';
+import DeleteMember from './DeleteMember';
+
+export default function GroupMemberTable({selectedList}) {
+  
+    // Handle Pagination
+    const [currentPage, setCurrentPage] = useState(0);
+    const indexOfFirstItem = Number(currentPage);
+    const indexOfLastItem =Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+
+    const currentSelectedList = selectedList?.slice(indexOfFirstItem, indexOfLastItem);
+  
+    const handlePagination = (e) => {
+      handlePagingFunc(e, setCurrentPage);
+    };
+
+    const [deletePopout, setDeletePopout] = useState({
+        status: false,
+        data: {}
+    })
+
+    const handleDeleteMember = (item) => {
+        setDeletePopout({
+            status: true,
+            data: {...item}
+        })
+    }
+   
+    return (
+        <div className={`w-full p-8 bg-white dark:bg-dark-gray overflow-hidden rounded-2xl section-shadow`}>
+            <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between min-h-[400px]">
+              <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+                <tbody>
+                  <>
+                    {selectedList && selectedList?.length > 0 ? (
+                        currentSelectedList.map((value, index) => (
+                        <tr key={value.uid} className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50">
+                          {/* <td className="p-1">{value?.firstname}</td>
+                          <td className="p-1">{value?.lastname}</td>
+                          <td className="p-1">{value?.email}</td>
+                          <td className="p-1 text-right">
+                            <button onClick={()=>{handleDeleteMember(value)}} className='rounded-lg text-sm bg-red-500 hover:bg-red-400 text-white font-bold py-1 px-2.5'>X</button>
+                          </td> */}
+                          <td className='py-2'>
+                            <div className="flex flex-col">
+                              <h1 className="font-bold text-xl text-dark-gray dark:text-white">
+                                {value.firstname && value.firstname} {value.lastname && value.lastname}
+                              </h1>
+                              <span className="text-sm text-thin-light-gray">
+                                {value.email && value.email}
+                              </span>
+                            </div>
+                          </td>
+                          <td className='py-2 text-right'>
+                            <button onClick={()=>{handleDeleteMember(value)}} className='rounded-lg text-sm bg-red-500 hover:bg-red-400 text-white font-bold py-1 px-2.5'>X</button>
+                          </td>
+                        </tr>
+                        ))
+                    ) : (
+                      <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                        <td className="p-2">No Members Found</td>
+                      </tr>
+                    )}
+                  </>
+                </tbody>
+              </table>
+    
+              {/* PAGINATION BUTTON */}
+              <PaginatedList
+                onClick={handlePagination}
+                prev={currentPage == 0 ? true : false}
+                next={
+                  currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
+                  selectedList?.length
+                    ? true
+                    : false
+                }
+                data={selectedList}
+                start={indexOfFirstItem}
+                stop={indexOfLastItem}
+              />
+              {/* END OF PAGINATION BUTTON */}
+            </div>
+    
+          {/* DELETE MEMBER POPOUT */}
+          {deletePopout.status &&
+                <DeleteMember 
+                    action={()=>setDeletePopout({status:false, data:{}})}
+                    situation={deletePopout.status}
+                    details={deletePopout.data}
+                />
+            }
+          {/* END OF DELETE MEMBER POPOUT */}
+        </div>
+      );
+    };

src/components/JobGroups/JobGroups.jsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react'
+import Layout from '../Partials/Layout'
+
+import GroupList from './GroupList'
+import MemberList from './MemberList'
+import LoadingSpinner from '../Spinners/LoadingSpinner'
+
+import usersService from '../../services/UsersService'
+
+export default function JobGroups() {
+
+    const userApi = new usersService();
+
+    const [updateList, setUpdateList] = useState(false)
+
+    
+    const [groupList, setGroupList] = useState({
+        loading:true,
+        groups: [],
+        members: []
+    })
+
+    const [selectedGroup, setSelectedGroup] = useState({id:'', name:'', data: []})
+
+    const changeSelectedGroup = (e) => {
+        let groupID = e.target.value
+        const activeMembers = groupList?.members?.filter(item => item.group_id == groupID)
+        const activeGroup = groupList?.groups?.filter(item => item.group_id == groupID)
+        setSelectedGroup({id: groupID, name:activeGroup[0]?.group_name, data:activeMembers})
+    }
+
+    useEffect(()=>{
+        setGroupList({loading: true, groups: [], members: []})
+        userApi.jobGroupList({}).then(res => {
+            const {status, data} = res
+            if(status != 200 || data?.internal_return < 0){
+                setGroupList({loading: false, groups: [], members: []})
+                return
+            }
+            if(data.result_list.length < 0){
+                setGroupList({loading: false, groups: [], members: []})
+                return
+            }
+            setGroupList({loading: false, groups: data.result_list, members: data.result_list_member})
+            if(selectedGroup.id == ''){
+                let activeGroupId = data.result_list[0].group_id
+                let activeGroup = data.result_list[0].group_name
+                let activeMembers = data.result_list_member?.filter(item => item.group_id == activeGroupId)
+                setSelectedGroup({id: activeGroupId, name:activeGroup, data:activeMembers})
+            }else{
+                let activeMembers = data.result_list_member?.filter(item => item.group_id == selectedGroup?.id)
+                setSelectedGroup({id: selectedGroup?.id, name:selectedGroup?.name, data:activeMembers})
+            }
+        }).catch(error => {
+            setGroupList({loading: false, groups: [], members: []})
+            console.log(error)
+        })
+    },[updateList])
+
+  return (
+    <Layout>
+        <div>
+            <h1 className='mb-5 text-lg lg:text-2xl tracking-wide font-bold text-slate-900 dark:text-slate-100'>Jobs Groups</h1>
+        </div>
+        <div className='p-5 w-full min-h-[400px] flex flex-col lg:flex-row gap-3 lg:gap-6 rounded-lg shadow-md bg-white dark:bg-dark-white'>
+            {groupList.loading ?
+                <div className='w-full h-[400px] flex justify-center items-center'>
+                    <LoadingSpinner size='16' />
+                </div>
+            :
+            <>
+                <GroupList groupList={groupList?.groups} selectedGroup={selectedGroup} changeSelectedGroup={changeSelectedGroup} setUpdateList={setUpdateList} />
+                <MemberList groupList={groupList?.groups} selectedGroup={selectedGroup} setUpdateList={setUpdateList} />
+            </>
+            }
+        </div>
+    </Layout>
+  )
+}

src/components/JobGroups/MemberList.jsx

@@ -0,0 +1,262 @@
+import React, { useState } from 'react'
+
+import InputCom from '../../components/Helpers/Inputs/InputCom/index'
+import LoadingSpinner from '../Spinners/LoadingSpinner'
+import GroupMemberTable from './GroupMemberTable'
+
+import EmailValidator from '../../lib/EmailValidator'
+
+import usersService from '../../services/UsersService'
+
+export default function MemberList({groupList, selectedGroup, setUpdateList}) {
+
+    const api = new usersService()
+
+    const [fields, setFields] = useState({
+        firstname: '',
+        lastname: '',
+        email: ''
+    })
+
+    const handleFieldsChange = ({target:{name, value}}) => {
+        setFields(prev => ({...prev, [name]:value}))
+        // let error = requestState?.errors?.indexOf(name) //// checks if the input field was in error array and removes it when the input changes
+        // if(error >= 0){
+        //   let oldErrorArr = requestState.errors
+        //   let newErrorArr = oldErrorArr.splice(error, 1)
+        //   setRequestState(prev => ({...prev, errors:oldErrorArr}))
+        // }
+
+        if(value == ''){
+            setRequestState({
+                loading: false,
+                status: false,
+                message: '',
+                data: [],
+                errors: [name]
+            })
+        }else{
+            let error = requestState?.errors?.indexOf(name) //// checks if the input field was in error array and removes it when the input changes
+            if(error >= 0){
+              let oldErrorArr = requestState.errors
+              let newErrorArr = oldErrorArr.splice(error, 1)
+              setRequestState(prev => ({...prev, errors:oldErrorArr}))
+            }
+        }
+
+        if(name == 'email'){
+             //checks if email is a valid email address
+            let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
+            if (!EmailValidator(value)) {
+                setRequestState({
+                    loading: false,
+                    status: false,
+                    message: '',
+                    data: [],
+                    errors: ['email']
+                })
+            }
+        }
+    }
+
+    const [requestState, setRequestState] = useState({
+        loading: false,
+        status: false,
+        message: '',
+        data: [],
+        errors: ['email', 'firstname', 'lastname']
+      })
+
+    const addMember = () => {
+        // let errors = Object.keys(fields).filter((item) => { // CHECKS FOR EMPTY STRINGS
+        //     if(typeof item == 'string' && fields[item] === ''){
+        //         return item
+        //     }
+        // })
+    
+        // if(errors.length){
+        // setRequestState({
+        //     loading: false,
+        //     status: false,
+        //     message: '',
+        //     data: [],
+        //     errors: [...errors]
+        // })
+        // return
+        // }
+
+        //checks if email is a valid email address
+        let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
+        if (!EmailValidator(fields.email)) {
+            setRequestState({
+                loading: false,
+                status: false,
+                message: 'Email is invalid',
+                data: [],
+                errors: []
+            })
+            return setTimeout(()=>{
+                setRequestState({
+                    loading: false,
+                    status: false,
+                    message: '',
+                    data: [],
+                    errors: []
+                })
+            },3000)
+        }
+              
+        setRequestState({
+        loading: true,
+        status: false,
+        message: '',
+        data: [],
+        errors: []
+        })
+         const requestData = {
+            firstname:fields.firstname,lastname:fields.lastname, email:fields.email, group_id: selectedGroup?.id, action:13015
+         }
+        
+         api.groupMemberAdd(requestData).then(response => {
+            let {status, data} = response
+            if(status != 200 || data?.internal_return < 0){
+                setRequestState({
+                    loading: false,
+                    status: false,
+                    message: 'Unable to add member',
+                    data: [],
+                    errors: []
+                })
+                return
+            }
+            setRequestState({
+                loading: false,
+                status: true,
+                message: 'Member added',
+                data: [],
+                errors: []
+            })
+
+            setTimeout(()=>{
+                // trigger group page reload
+                setUpdateList(prev => !prev)
+                setRequestState({
+                    loading: false,
+                    status: false,
+                    message: '',
+                    data: [],
+                    errors: []
+                })
+            }, 3000)
+
+         }).catch(error=>{
+            setRequestState({
+                loading: false,
+                status: false,
+                message: 'Something went wrong, try again',
+                data: [],
+                errors: []
+            })
+         }).finally(()=>{
+            setTimeout(()=>{
+                setRequestState({
+                    loading: false,
+                    status: false,
+                    message: '',
+                    data: [],
+                    errors: []
+                })
+                setFields({
+                    firstname: '',
+                    lastname: '',
+                    email: ''
+                })
+            }, 3000)
+        })
+    }
+
+  return (
+    <>
+    <div className='p-5 w-full min-h-[600px] overflow-y-auto'>
+        {groupList && groupList.length < 1 ?
+        <>
+            <h1 className='my-5 text-lg lg:text-xl tracking-wide text-slate-900 dark:text-slate-100'>You Currently Do not have any Group, Please Add Group</h1>
+        </>
+        :
+        <>
+            <h1 className='mb-5 text-lg lg:text-2xl tracking-wide font-bold text-slate-900 dark:text-slate-100'>{selectedGroup?.name}</h1>
+            <div className='w-full flex flex-col-reverse lg:flex-col'>
+                <div className='py-3 w-full'>
+                    <div className='relative grid grid-cols-1 sm:grid-cols-2 gap-2 place-content-center'>
+                        <div className="input-item">
+                            <InputCom
+                                labelClass="tracking-wider"
+                                fieldClass="sm:px-6 px-2"
+                                value={fields.firstname}
+                                inputHandler={handleFieldsChange}
+                                placeholder="First Name"
+                                // label="Firstname"
+                                name="firstname"
+                                type="text"
+                                // iconName="message"
+                            />
+                        </div>
+                        <div className="input-item">
+                            <InputCom
+                                labelClass="tracking-wider"
+                                fieldClass="sm:px-6 px-2"
+                                value={fields.lastname}
+                                inputHandler={handleFieldsChange}
+                                placeholder="Last Name"
+                                // label="Lastname"
+                                name="lastname"
+                                type="text"
+                                // iconName="message"
+                            />
+                        </div>
+                        <div className="input-item w-full sm:w-[150%]">
+                            <InputCom
+                                labelClass="tracking-wider"
+                                fieldClass="sm:px-6 px-2"
+                                value={fields.email}
+                                inputHandler={handleFieldsChange}
+                                placeholder="Email"
+                                // label="Email"
+                                name="email"
+                                type="email"
+                                // iconName="message"
+                            />
+                        </div>
+                        <div className='flex justify-end items-end'>
+                            {requestState.loading ?
+                            <LoadingSpinner size='8' color='sky-blue' />
+                            :
+                            <button 
+                                onClick={addMember} 
+                                disabled={requestState.loading || requestState.status || requestState.errors.length} 
+                                className={`py-2 px-4 h-[42px] flex justify-center items-center text-base rounded-full text-white font-bold transition-all duration-500 ${requestState.loading || requestState.status || requestState.errors.length ? 'bg-sky-blue/50' : 'bg-sky-blue hover:bg-sky-600'} `}
+                            >
+                                Add Member
+                            </button>
+                            }
+                        </div>
+
+                        {!requestState.loading && requestState.message &&
+                        <p className={`text-lg absolute -bottom-7 left-0 ${requestState.status ? 'text-green-500' : 'text-red-500'}`}>{requestState.message}</p>
+                        }
+                    </div>
+                </div>
+                <div className='my-2 flex flex-col min-h-[300px]'>
+                    {selectedGroup?.data?.length < 1 ?
+                    <h1 className='my-5 text-lg lg:text-xl tracking-wide text-slate-900 dark:text-slate-100'>No Member Found, Please Add</h1>
+                    :
+                    <GroupMemberTable selectedList={selectedGroup?.data} />
+                    }
+                </div>
+            </div>
+        </>
+        }
+    </div>
+    </>
+  )
+}

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -117,8 +117,8 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
     .replace(/&/g, "&");
 
   return (
-    <ModalCom action={onClose} situation={situation} className="edit-popup">
-      <div className="logout-modal-wrapper md:w-[650px] md:h-[580px] h-full bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+    <ModalCom action={onClose} situation={situation}>
+      <div className="logout-modal-wrapper w-11/12 md:w-[650px] md:h-[580px] h-full bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px]">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             {details.offer_code}

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -600,10 +600,10 @@ const PopModal = ({
   myRef,
 }) => {
   return (
-    <ModalCom action={popUpHandler} situation={popUp} className="edit-popup">
+    <ModalCom action={popUpHandler} situation={popUp}>
       <div
         ref={myRef}
-        className="message-modal-wrapper min-w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl"
+        className="message-modal-wrapper w-11/12 min-w-[350px] max-w-[700px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto"
       >
         <div className="message-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">

src/components/MyActiveJobs/JobActions/PastDueJobAction.jsx

@@ -34,7 +34,7 @@ function PastDueJobAction({jobDetails}) {
         let reqData = { // API PAYLOADS
             contract: jobDetails.contract,
             contract_uid: jobDetails.contract_uid,
-            job_action: 'REQUEST_CANCEL',
+            job_action: 'CANCEL_CONTRACT',
         }
 
         if(!checked){ // CHECKS IF CHECKBOX IS SELECTED

src/components/MyActiveJobs/MyPastDueJobs.jsx

@@ -21,7 +21,7 @@ export default function MyPastDueJobs(props) {
                 <span
                   className={`${selectTab === "today" ? "block" : "hidden"}`}
                 >
-                  Pass Due Job(s)
+                  Past Due Job(s)
                 </span>
               </h1>
             </div>

src/components/MyJobs/MyJobTable.jsx

@@ -42,16 +42,16 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
 
   // Get Country Api
   const getCountryList = useCallback(async () => {
-    const res = await userApi.getSignupCountryData();
-
+    
     try {
-      if (res.status === 200) {
+      const res = await userApi.getSignupCountryData();
+      if (res.status === 200 && res.data.internal_return >= 0) {
         const {
-          data: { signup_country },
+          data: { result_list },
         } = await res;
-        let checkCountry = signup_country
-          ?.filter((item) => item[0] == country)
-          ?.map((item, idx) => item[1])
+        let checkCountry = result_list
+          ?.filter((item) => item.code == country)
+          ?.map((item) => item.country)
           .join("");
         setCountries(checkCountry);
       }
@@ -59,7 +59,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
       throw new Error(error);
     }
   }, [userApi, country]);
-
+  console.log('MY COUNTRY', myCountry)
   useEffect(() => {
     getCountryList();
   }, [getCountryList]);

src/components/MyWallet/Popup/ConfirmAddFund.jsx

@@ -130,7 +130,7 @@ function ConfirmAddFund({
     public_key: __confirmData?.flutterwave_key,
     tx_ref: __confirmData?.credit_reference,
     currency: "NGN",
-    amount: Number(__confirmData.amount),
+    amount: Number(__confirmData.amount) * 0.01,
     payment_options: "card,mobilemoney,ussd",
     customer: {
       email: userDetails.email,
@@ -224,7 +224,7 @@ function ConfirmAddFund({
 
       // Create request data object with required parameters for making the payment
       const reqData = {
-        amount: amount * 100,
+        amount: amount,
         card_uid,
         credit_reference,
         currency,
@@ -289,7 +289,7 @@ function ConfirmAddFund({
 
       // Prepare request data
       const reqData = {
-        amount: amount * 100,
+        amount: amount,
         cardnumber: cardNum.replace(/\s/g, ""),
         credit_reference,
         cvc: cvv,

src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx

@@ -104,8 +104,8 @@ function ConfirmNairaWithdraw({
   };
 
   return (
-    <ModalCom action={action} situation={situation} className="edit-popup">
-      <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+    <ModalCom action={action} situation={situation}>
+      <div className="logout-modal-wrapper w-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="w-full">
           <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
             <h2 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">

src/components/MyWallet/Popup/CreditPopup.jsx

@@ -35,7 +35,7 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
       situation={situation}
       className="assign-task-popup"
     >
-      <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+      <div className="logout-modal-wrapper w-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             {confirmCredit?.show?.acceptConfirm?.loader

src/components/MyWallet/Popup/NairaWithdraw.jsx

@@ -25,7 +25,7 @@ function NairaWithdraw({
     },
     newAccount: {
       country: wallet.walletCountry
-        ? wallet.walletCountry[0][0]
+        ? wallet.walletCountry[0]?.code
         : wallet.country,
       bank: state?.newAccount?.amount || "",
       accountNumber: state?.newAccount?.amount || "",
@@ -34,7 +34,6 @@ function NairaWithdraw({
       city: state?.newAccount?.amount || "",
     },
   };
-
   const [errorMsgs, setErrorMsgs] = useState(initialValues);
 
   let [sendMoneyFee, setSendMoneyFee] = useState({
@@ -69,7 +68,7 @@ function NairaWithdraw({
   // Handling card change
   const handleBankOptions = (event) => {
     let bankCountry = wallet.walletCountry
-    ? wallet.walletCountry[0][0]
+    ? wallet.walletCountry[0]?.code
     : wallet.country
     setBankName((prev) => ({ loading: true, data: [] }));
     apiCall
@@ -120,7 +119,7 @@ function NairaWithdraw({
         }
         setAllCountries((prev) => ({
           loading: false,
-          data: res.data.signup_country,
+          data: res.data.result_list,
         }));
       })
       .catch((error) => {
@@ -287,11 +286,11 @@ function NairaWithdraw({
     getRecipients();
   }, []);
 
-  console.log("Testing Wallet Country", wallet?.walletCountry[0][0]);
+  console.log("Testing Wallet Country", wallet?.walletCountry[0]?.code);
 
   return (
-    <ModalCom action={action} situation={situation} className="edit-popup">
-      <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+    <ModalCom action={action} situation={situation}>
+      <div className="logout-modal-wrapper w-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="w-full">
           <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
             <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
@@ -560,7 +559,7 @@ function NairaWithdraw({
                                   </label>
                                   <div className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding tracking-[1.5px] flex items-center pointer-events-none">
                                     <span className="text-slate-500 text-lg italic">
-                                      {wallet.walletCountry[0][1]}
+                                      {wallet.walletCountry[0]?.country}
                                     </span>
                                   </div>
                                   {/* <select

src/components/MyWallet/Wallet.jsx

@@ -41,13 +41,13 @@ const WalletRoutes = () => {
     apiCall
       .getSignupCountryData()
       .then((res) => {
-        if (res.data.internal_return < 0) {
+        if (res?.data?.internal_return < 0) {
           setAllCountries((prev) => ({ loading: false, data: [] }));
           return;
         }
         setAllCountries((prev) => ({
           loading: false,
-          data: res.data.signup_country,
+          data: res.data.result_list,
         }));
       })
       .catch((error) => {

src/components/MyWallet/WalletItemCard.jsx

@@ -35,8 +35,8 @@ export default function WalletItemCard({ walletItem, payment, countries }) {
   };
 
   const currentWalletCurrency = countries
-    .map((country) => country)
-    .filter((country) => country[0] === walletItem.country);
+    // .map((country) => country)
+    .filter((country) => country.code === walletItem.country);
 
   const image = walletItem.code
     ? `${walletItem.code.toLowerCase()}.svg`

src/components/MyWallet/WalletItemCardFamily.jsx

@@ -35,8 +35,8 @@ export default function WalletItemCardFamily({ walletItem, payment, countries })
   };
 
   const currentWalletCurrency = countries
-    .map((country) => country)
-    .filter((country) => country[0] === walletItem.country);
+    // .map((country) => country)
+    .filter((country) => country.code === walletItem.country);
 
   const image = walletItem.code
     ? `${walletItem.code.toLowerCase()}.svg`

src/components/Partials/Header.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo, useState } from "react";
+import React, { useContext, useMemo, useState } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import bank1 from "../../assets/images/bank-1.png";
 import bank2 from "../../assets/images/bank-2.png";
@@ -238,6 +238,9 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
               </div>
             </button>
             {/* balance */}
+            
+            {/* My Page Button */}
+            <PageButton />
 
             {/*<div className="lg:hidden block"></div>*/}
             <WalletHeader
@@ -412,6 +415,17 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                         </div>
                       </Link>
                     </li>
+                    {userDetails && userDetails?.account_type !== "FAMILY" && (
+                      <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
+                        <Link to="/yourpage" className="notifications">
+                          <div className="name">
+                            <p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
+                              My Page
+                            </p>
+                          </div>
+                        </Link>
+                      </li>
+                    )}
                     {userDetails && userDetails?.account_type !== "FAMILY" && (
                       <>
                         <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
@@ -656,3 +670,29 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
     </>
   );
 }
+
+
+const PageButton = () => {
+  return (
+    <Link to="/yourpage" className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]  items-center rounded-full relative  bg-sky-blue pr-1.5 pl-4">
+      <div
+          className="flex items-center lg:justify-between justify-center w-full h-full"
+        >
+          <span className="lg:block hidden w-[25px]">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 50" id="Page">
+          <path
+            fillRule="evenodd"
+            d="M0 13V2a2 2 0 0 1 2-2h64a2 2 0 0 1 2 2v11H0Zm0 4v31a2 2 0 0 0 2 2h20V17H0Zm26 33h40a2 2 0 0 0 2-2V17H26v33Z"
+            fill="#ffffff"
+            className="color000000 svgShape"
+          ></path>
+        </svg>
+          </span>
+          <p className="lg:text-xl text-lg font-bold text-white">My Page</p>
+          <span className="lg:block hidden">
+            {/* <Icons name="deep-plus" /> */}
+          </span>
+        </div>
+    </Link>
+  )
+}

src/components/Partials/Layout.jsx

@@ -79,7 +79,7 @@ export default function Layout({ children }) {
                 {children && children}
               </div>
               <div className="nft-right-side-content 2xl:w-[270px] w-full h-full 2xl:flex justify-center relative flex-[20%]">
-                <RightSideBar />
+                <RightSideBar myJobList={userJobList} />
               </div>
             </div>
           </div>
@@ -87,7 +87,7 @@ export default function Layout({ children }) {
       </div>
       {logoutModal && (
         <ModalCom action={logoutModalHandler} situation={logoutModal}>
-          <div className="logout-modal-wrapper lg:w-[460px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+          <div className="logout-modal-wrapper w-11/12 sm:w-[460px] bg-white dark:bg-dark-white lg:rounded-2xl">
             <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29] ">
               <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
                 Confirm

src/components/Partials/RightSideBar.jsx

@@ -3,7 +3,7 @@ import { useSelector } from "react-redux";
 import { NavLink } from "react-router-dom";
 //import SideStatistics from "./SideStatistics";
 
-export default function RightSideBar() {
+export default function RightSideBar({myJobList}) {
   const filterDatas = ["Last 15 days", "Last Month", "Last 6 month"];
   const [filterDataSet, setFilterDataSet] = useState([10, 30, 20, 40]);
   const dataSetHandler = (value) => {
@@ -154,7 +154,168 @@ export default function RightSideBar() {
             </div>
           </div>
         </div>
-        {/*<SideStatistics />*/}
+
+        {/*JOB LINKS*/}
+        {myJobList?.data?.result_list?.length > 0 &&
+        <div className="top-platform mt-6 bg-white dark:bg-dark-white rounded-2xl py-8 2xl:w-[268px] w-full 2xl:mb-10 2xl:border-none border ">
+          {/* heading */}
+          <div className="px-8 heading flex justify-between items-center mb-3.5">
+            <h3 className="text-xl font-bold   text-dark-gray dark:text-white">
+              Job Links
+            </h3>
+            <div></div>
+          </div>
+
+          <div className="platform-list">
+              <div className="px-8 item flex space-x-3 items-center mb-4">
+                {/* image */}
+                <div className="w-8 h-8 rounded-full">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    id="history"
+                  >
+                    <g data-name="14">
+                      <circle cx="9" cy="14" r="7" fill="#ffd54f"></circle>
+                      <path
+                        fill="#ef6c00"
+                        d="M21 9H17a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2zM21 5H3A1 1 0 0 1 3 3H21a1 1 0 0 1 0 2zM21 13H19a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zM21 17H19a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zM21 21H17a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2z"
+                      ></path>
+                      <path
+                        fill="#ff8f00"
+                        d="M10,10a1,1,0,0,0-2,0v3.59L6.29,15.29a1,1,0,1,0,1.41,1.41l2-2A1,1,0,0,0,10,14Z"
+                      ></path>
+                    </g>
+                  </svg>
+                </div>
+                {/* name */}
+                <div>
+                  <p className="text-thin-light-gray text-base font-medium">
+                    <NavLink to="/my-active-jobs">Active Task</NavLink>
+                  </p>
+                </div>
+                {/* action */}
+              </div>
+              {/* {userDetails && userDetails?.account_type !== "FAMILY" && (
+                <>
+                </>
+              )} */}
+                <div className="px-8 item flex space-x-3 items-center mb-4">
+                  {/* image */}
+                  <div className="w-8 h-8 rounded-full">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      id="add-user"
+                    >
+                      <path
+                        fill="#9bcb5b"
+                        d="M12 13.4c-2 0-3.7-1.6-3.7-3.6s1.6-3.7 3.6-3.7 3.7 1.6 3.7 3.6-1.6 3.6-3.6 3.7zm0-6.2c-1.4 0-2.6 1.1-2.6 2.6 0 1.4 1.1 2.6 2.6 2.6s2.6-1.1 2.6-2.6c-.1-1.5-1.2-2.6-2.6-2.6z"
+                      ></path>
+                      <path
+                        fill="#9bcb5b"
+                        d="M16.6 17.9c-.3 0-.5-.2-.6-.5 0-2.2-1.8-4-4-4s-4 1.8-4 4c0 .3-.3.5-.6.5-.2 0-.4-.2-.5-.5 0-2.8 2.3-5.1 5.1-5.1s5.1 2.3 5.1 5.1c0 .3-.2.5-.5.5z"
+                      ></path>
+                      <path
+                        fill="#0376bc"
+                        d="M12 23.7C5.5 23.7.3 18.4.3 12 .3 5.5 5.6.3 12 .3c2.6 0 5.1.9 7.2 2.5.2.2.2.6 0 .8-.2.2-.4.2-.7.1-1.9-1.4-4.1-2.2-6.5-2.2C6.2 1.4 1.4 6.2 1.4 12S6.2 22.6 12 22.6 22.6 17.8 22.6 12c0-2.4-.8-4.6-2.2-6.5-.2-.3-.1-.6.2-.8.2-.1.5-.1.7.1 1.6 2 2.5 4.6 2.4 7.2 0 6.4-5.3 11.7-11.7 11.7z"
+                      ></path>
+                      <circle cx="20.2" cy="20.3" r="2.4" fill="#fff"></circle>
+                      <path
+                        fill="#9bcb5b"
+                        d="M18 18.1c.6-.6 1.4-.9 2.2-.9.8 0 1.6.3 2.2.9s1 1.4.9 2.2c0 .8-.3 1.6-.9 2.2s-1.4 1-2.2.9c-.8 0-1.6-.3-2.2-.9s-1-1.4-.9-2.2c-.1-.8.3-1.7.9-2.2zm3.8 2.5V20h-1.3v-1.3h-.6V20h-1.3v.6h1.3v1.3h.6v-1.3h1.3z"
+                      ></path>
+                    </svg>
+                  </div>
+                  {/* name */}
+                  <div>
+                    <p className="text-thin-light-gray text-base font-medium">
+                      <NavLink to="/my-review-jobs">Review Pending</NavLink>
+                    </p>
+                  </div>
+                </div>
+
+                <div className="px-8 item flex space-x-3 items-center mb-4">
+                  {/* image */}
+                  <div className="w-8 h-8 rounded-full">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 48 48"
+                      id="InternationalUser"
+                    >
+                      <path
+                        fill="#e6e7f9"
+                        d="M38.5 31.1c2.1-1.1 3.9-2.5 5.4-4.4h-3.2c-.6 1.6-1.3 3.1-2.2 4.4zm-5.8 1.4c2-.7 3.7-2.8 4.9-5.8h-4.9v5.8zm8.8-8.6h4.2c.9-1.8 1.5-3.7 1.7-5.8h-5.1c-.1 2-.4 4-.8 5.8zm2.4-17.3c-1.5-1.8-3.3-3.3-5.4-4.4.8 1.2 1.6 2.7 2.2 4.4h3.2zm-5.3 2.9h-5.9v5.8h6.7c-.1-2.1-.4-4.1-.8-5.8zm3.7 5.8h5.1c-.2-2.1-.8-4-1.7-5.8h-4.2c.4 1.8.7 3.7.8 5.8zM32.7.8v5.8h4.9c-1.2-2.9-2.9-5.1-4.9-5.8zm6.7 17.3h-6.7v5.8h5.9c.4-1.8.7-3.8.8-5.8zM25 6.6h4.9V.8c-2 .7-3.7 2.9-4.9 5.8zm-1.8 8.7h6.7V9.5H24c-.4 1.7-.7 3.7-.8 5.8zm6.7 17.2v-5.8H25c1.2 3 2.9 5.1 4.9 5.8zM24.1 2.3c-2.1 1.1-3.9 2.5-5.4 4.4H22c.5-1.7 1.3-3.2 2.1-4.4zM24 23.9h5.9v-5.8h-6.7c.1 2 .4 4 .8 5.8z"
+                        className="colorc1e5ff svgShape"
+                      ></path>
+                      <path
+                        fill="#ff6699"
+                        d="M3.7 44.7c0 1.6 1.2 2.8 2.8 2.8 1.3 0 2.4-.9 2.7-2.2.3 1.3 1.4 2.2 2.7 2.2 1.5 0 2.8-1.3 2.8-2.8V30.1h3.1V18.8c0-4.2-3.3-7.5-7.4-7.5H8c-4.1 0-7.4 3.4-7.4 7.5v11.3h3.1v14.6z"
+                        className="colorff99b0 svgShape"
+                      ></path>
+                      <path
+                        fill="#998da0"
+                        d="M9.2 10.3c2.4 0 4.4-2.2 4.4-4.9S11.6.5 9.2.5C6.8.5 4.8 2.7 4.8 5.4s2 4.9 4.4 4.9z"
+                        className="colorffd499 svgShape"
+                      ></path>
+                      <path
+                        fill="#e6e7f9"
+                        d="M16.9 9.5c-.3.6-.5 1.2-.8 1.8 1.3 1 2.3 2.4 2.9 4h1.3c.1-2 .3-4 .8-5.8h-4.2zm2.9 9.3v5.1h1.4c-.4-1.8-.7-3.8-.8-5.8h-.6c-.1.2 0 .4 0 .7zm2.2 7.9h-2.2v1.2c1.3 1.3 2.7 2.4 4.4 3.2-.9-1.3-1.7-2.8-2.2-4.4z"
+                        className="colorc1e5ff svgShape"
+                      ></path>
+                    </svg>
+                  </div>
+                  {/* name */}
+                  <div>
+                    <p className="text-thin-light-gray text-base font-medium">
+                      <NavLink to="/my-pastdue-jobs">Past Due</NavLink>
+                    </p>
+                  </div>
+                </div>
+
+                {/* Line */}
+                <div className="my-4 mx-auto w-10/12 h-[2px] bg-slate-500 dark:bg-white rounded-full"></div>
+
+                <div className="px-8 item flex space-x-3 items-center mb-4">
+                  {/* image */}
+                  <div className="w-8 h-8 rounded-full">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 48 48"
+                      id="InternationalUser"
+                    >
+                      <path
+                        fill="#e6e7f9"
+                        d="M38.5 31.1c2.1-1.1 3.9-2.5 5.4-4.4h-3.2c-.6 1.6-1.3 3.1-2.2 4.4zm-5.8 1.4c2-.7 3.7-2.8 4.9-5.8h-4.9v5.8zm8.8-8.6h4.2c.9-1.8 1.5-3.7 1.7-5.8h-5.1c-.1 2-.4 4-.8 5.8zm2.4-17.3c-1.5-1.8-3.3-3.3-5.4-4.4.8 1.2 1.6 2.7 2.2 4.4h3.2zm-5.3 2.9h-5.9v5.8h6.7c-.1-2.1-.4-4.1-.8-5.8zm3.7 5.8h5.1c-.2-2.1-.8-4-1.7-5.8h-4.2c.4 1.8.7 3.7.8 5.8zM32.7.8v5.8h4.9c-1.2-2.9-2.9-5.1-4.9-5.8zm6.7 17.3h-6.7v5.8h5.9c.4-1.8.7-3.8.8-5.8zM25 6.6h4.9V.8c-2 .7-3.7 2.9-4.9 5.8zm-1.8 8.7h6.7V9.5H24c-.4 1.7-.7 3.7-.8 5.8zm6.7 17.2v-5.8H25c1.2 3 2.9 5.1 4.9 5.8zM24.1 2.3c-2.1 1.1-3.9 2.5-5.4 4.4H22c.5-1.7 1.3-3.2 2.1-4.4zM24 23.9h5.9v-5.8h-6.7c.1 2 .4 4 .8 5.8z"
+                        className="colorc1e5ff svgShape"
+                      ></path>
+                      <path
+                        fill="#ff6699"
+                        d="M3.7 44.7c0 1.6 1.2 2.8 2.8 2.8 1.3 0 2.4-.9 2.7-2.2.3 1.3 1.4 2.2 2.7 2.2 1.5 0 2.8-1.3 2.8-2.8V30.1h3.1V18.8c0-4.2-3.3-7.5-7.4-7.5H8c-4.1 0-7.4 3.4-7.4 7.5v11.3h3.1v14.6z"
+                        className="colorff99b0 svgShape"
+                      ></path>
+                      <path
+                        fill="#998da0"
+                        d="M9.2 10.3c2.4 0 4.4-2.2 4.4-4.9S11.6.5 9.2.5C6.8.5 4.8 2.7 4.8 5.4s2 4.9 4.4 4.9z"
+                        className="colorffd499 svgShape"
+                      ></path>
+                      <path
+                        fill="#e6e7f9"
+                        d="M16.9 9.5c-.3.6-.5 1.2-.8 1.8 1.3 1 2.3 2.4 2.9 4h1.3c.1-2 .3-4 .8-5.8h-4.2zm2.9 9.3v5.1h1.4c-.4-1.8-.7-3.8-.8-5.8h-.6c-.1.2 0 .4 0 .7zm2.2 7.9h-2.2v1.2c1.3 1.3 2.7 2.4 4.4 3.2-.9-1.3-1.7-2.8-2.2-4.4z"
+                        className="colorc1e5ff svgShape"
+                      ></path>
+                    </svg>
+                  </div>
+                  {/* name */}
+                  <div>
+                    <p className="text-thin-light-gray text-base font-medium">
+                      <NavLink to="/job-groups">Job Groups</NavLink>
+                    </p>
+                  </div>
+                </div>
+          </div>
+        </div>
+        }
       </div>
     </>
   );

src/components/Resources/index.jsx

@@ -63,6 +63,7 @@ export default function Resources(props) {
         loading: false,
         msg: "success",
         data: res?.result_list,
+        image:res?.session_image_server
       }));
     } catch (error) {
       setUploadedFiles((prev) => ({

src/components/Resources/tabs/MyUploadedFiles.jsx

@@ -13,7 +13,6 @@ export default function MyUploadedFiles({ uploadedFiles }) {
     indexOfFirstItem,
     indexOfLastItem
   );
-
   const handlePagination = (e) => {
     handlePagingFunc(e, setCurrentPage);
   };
@@ -45,10 +44,11 @@ export default function MyUploadedFiles({ uploadedFiles }) {
                   currentFiles.map((value, idx) => {
                     let addedDate = value?.added?.split(" ")[0];
                     let formattedSize = formatFileSize(value?.file_size);
+                    let imageLink = `${uploadedFiles?.image}${localStorage.getItem('session_token')}/myfile/${value.file_uid}`
                     return (
                       <tr
                         key={value?.file_uid}
-                        className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50"
+                        className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29]  hover:bg-gray-50"
                       >
                         <td className=" py-4">
                           <div className="flex space-x-2 items-center w-full">
@@ -102,17 +102,17 @@ export default function MyUploadedFiles({ uploadedFiles }) {
                         </td>
                         <td className="text-right py-4 px-2">
                           <div className="flex justify-center items-center">
-                            <button
-                              type="button"
-                              // onClick={() => {
-                              //   navigate("/manage-active-job", {
-                              //     state: { ...value, pathname },
-                              //   });
-                              // }}
-                              className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                            <a
+                              href={imageLink}
+                              title="download"
+                              // className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                             >
-                              View
-                            </button>
+                              <img 
+                                src={localImgLoad('images/icons/download-arrow.svg')} 
+                                alt='download-link' 
+                                className="w-auto h-6 flex justify-center items-center"
+                              />
+                            </a>
                           </div>
                         </td>
                       </tr>

src/components/UploadProduct/ProductUploadField.jsx

@@ -157,7 +157,7 @@ export default function ProductUploadField({
                 fieldClass="px-6"
                 type="text"
                 name="name"
-                placeholder="RaidParty Fighters"
+                placeholder="Item Name"
                 inputHandler={inh}
                 value={datas.itemName}
               />
@@ -186,7 +186,7 @@ export default function ProductUploadField({
                 <textarea
                   value={datas.description}
                   onChange={(e) => dscrphn(e)}
-                  placeholder="provide a detailed description of your item."
+                  placeholder="Enter detail description"
                   rows="7"
                   className="w-full h-full px-7 py-4  border border-light-purple dark:border-[#5356fb29]  rounded-[20px] text-dark-gray dark:text-white bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
                 />

src/components/UploadProduct/index.jsx

@@ -144,14 +144,14 @@ export default function UploadProduct({uploadTypes}) {
     }
     
     let reqData = { // PAYLOAD FOR API CALL
-      file_name: selectedFile.substring(0,21).replace(/ /gi, ""),//selectedFile.replace(/[ -]/gi, ""),
+      // file_name: selectedFile.substring(0,21).replace(/ /gi, ""),
+      file_name: `myfile.${imgDetails?.type?.split('/')[1]}`,
       file_size: imgDetails.size,
       file_type: imgDetails.type,
-      file_data: img.file,
+      file_data: img.file?.split(",")[1],
       title: itemName,
       description: description,
       msg_type: 'FILE',
-      // action: 'WRENCHBOARD_RESOURCE_MYFILES',
       action: 11307
     }
 
@@ -602,7 +602,10 @@ export default function UploadProduct({uploadTypes}) {
 
 //FUNCTIONS to check if file upload type is valid
 const isValidFile = (file, supportedFile=[]) => {
-  let fileType = file.type.split("/")[1];
+  let fileType = file.type.split("/")[1].toLowerCase();
+  if(fileType=='jpg' || fileType=='jpeg'){ //forcing both JPG and JPEG TO RETURN JPG AS FILE TYPE
+    fileType = 'jpg'
+  }
   let valid = supportedFile.filter(item => (
     item.name.toLowerCase() == fileType.toLowerCase()
   ))
@@ -615,7 +618,10 @@ const isValidFile = (file, supportedFile=[]) => {
 
 //FUNCTIONS TO CHECK IF FILE SIZE IS VALID
 const isValidFileSize = (file, supportedFile=[]) => {
-  let fileType = file.type.split("/")[1];
+  let fileType = file.type.split("/")[1].toLowerCase();
+  if(fileType=='jpg' || fileType=='jpeg'){ //forcing both JPG and JPEG TO RETURN JPG AS FILE TYPE
+    fileType = 'jpg'
+  }
   let fileSize = file.size;
   let valid = supportedFile.filter(item => (
     item.name.toLowerCase() == fileType.toLowerCase()
@@ -627,6 +633,6 @@ const isValidFileSize = (file, supportedFile=[]) => {
       return {status: false, message: `File must not exceed ${valid[0].max_size_mb}MB`}
     }
   }else{
-    return false
+    return {status: false, message: `Cannot read file size, try again`}
   }
 }

src/components/YourPage/LoadedPage.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import GetMyPageLoad from "./getMyPageLoad";
+
+
+const LoadedPage = ({reloader}) => {
+  const { loading, data, error } = GetMyPageLoad(reloader);
+
+  return (
+    <div className="w-full border border-gray-400 rounded-md p-4 flex flex-col h-72 gap-2 overflow-y-auto">
+      {loading ? (
+        <>
+          <h1 className="text-xl font-bold tracking-wide">...</h1>
+          <p>...</p>
+        </>
+      ) : error ? (
+        <>
+          <h1 className="text-xl font-bold tracking-wide">Unable to load</h1>
+        </>
+      ) : (
+        <>
+          <h1 className="text-xl font-bold tracking-wide">
+            {!data.intro ? "Introduction" : data.intro}
+          </h1>
+          <p>{!data.description ? "Brief Details" : data.description}</p>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default LoadedPage;

src/components/YourPage/UpdateButton.jsx

@@ -0,0 +1,20 @@
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+
+const UpdateButton = ({ onClick, loading, msg }) => (
+  <button
+    type="submit"
+    onClick={onClick}
+    disabled={loading}
+    className="text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-full"
+  >
+    {loading ? (
+      <LoadingSpinner size="6" color="sky-blue" />
+    ) : msg !== "" ? (
+      msg
+    ) : (
+      "Update"
+    )}
+  </button>
+);
+
+export default UpdateButton;

src/components/YourPage/YourPageForm.jsx

@@ -0,0 +1,42 @@
+import InputCom from "../Helpers/Inputs/InputCom/index";
+import UpdateButton from "./UpdateButton";
+
+const YourPageForm = ({ values, onChange, onSubmit, loading, msg }) => (
+  <div className="ml-16 my-2 flex flex-col gap-3">
+    <div className="field w-full">
+      <InputCom
+        fieldClass="px-4"
+        parentClass="flex items-center gap-1 justify-between"
+        labelClass="flex-[0.2] mb-0 font-semibold"
+        inputClass="flex-[0.8]"
+        inputBg="bg-slate-100"
+        label="Introduction: "
+        type="text"
+        name="intro"
+        value={values.intro}
+        inputHandler={onChange}
+      />
+    </div>
+
+    <div className="field w-full mb-6 flex gap-1 justify-between">
+      <label className="text-[#181c32] dark:text-white text-[13.975px] font-semibold flex flex-[0.2] mt-2.5">
+        Brief Details:
+      </label>
+      <textarea
+        style={{ resize: "none" }}
+        className="text-base px-4 py-2 rounded-md min-h-[100px] text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F]  focus:ring-0 focus:outline-none flex-[0.8]"
+        name="description"
+        cols="30"
+        rows="2"
+        value={values.description}
+        onChange={onChange}
+      />
+    </div>
+    <div className="w-full flex justify-end mb-2">
+      <UpdateButton onClick={onSubmit} loading={loading} msg={msg} />
+    </div>
+    <hr />
+  </div>
+);
+
+export default YourPageForm;

src/components/YourPage/getMyPageLoad.js

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+import usersService from "../../services/UsersService";
+
+
+const GetMyPageLoad = (reloader) => {
+  const api = new usersService();
+
+    const [response, setResponse] = useState({
+      loading: true,
+      data: null,
+      error: null,
+    });
+  
+    useEffect(() => {
+      const fetchData = async () => {
+        try {
+          const res = await api.MyPageLoad();
+
+          setResponse({ loading: false, data: res.data, error: null });
+        } catch (error) {
+          setResponse({ loading: false, data: null, error: error.message });
+        }
+      };
+  
+      fetchData();
+    }, [reloader]);
+  
+    return response;
+  };
+  
+  export default GetMyPageLoad;

src/components/YourPage/index.jsx

@@ -0,0 +1,95 @@
+import React, { useState } from "react";
+import usersService from "../../services/UsersService";
+import Layout from "../Partials/Layout";
+import LoadedPage from "./LoadedPage";
+import YourPageForm from "./YourPageForm";
+// import { updateYourPage } from "./updateYourPage";
+
+const YourPage = () => {
+  const [pageValues, setPageValues] = useState(pageInitialValues);
+  const [response, setResponse] = useState(responseInitialValues);
+  const [reloader, setReloader] = useState(false);
+
+  const handleChange = ({ target: { name, value } }) =>
+    setPageValues((prev) => ({ ...prev, [name]: value }));
+
+  const updateYourPageDetails = updateYourPage(
+    pageValues,
+    setResponse,
+    setPageValues,
+    setReloader
+  );
+
+  return (
+    <Layout>
+      <div className="notification-page w-full mb-10">
+        <div className="notification-wrapper w-full">
+          <div className="update-table w-full h-full p-4 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[650px]">
+            <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide mb-2">
+              My page
+            </h1>
+            <hr />
+            <YourPageForm
+              values={pageValues}
+              onChange={handleChange}
+              onSubmit={updateYourPageDetails}
+              loading={response.loading}
+              msg={response.msg}
+            />
+            <LoadedPage reloader={reloader} />
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default YourPage;
+
+const pageInitialValues = {
+  intro: "",
+  description: "",
+};
+
+const responseInitialValues = {
+  loading: false,
+  data: {},
+  error: "",
+  msg: "",
+};
+
+function updateYourPage(pageValues, setResponse, setPageValues, setReloader) {
+  return async () => {
+    if (!pageValues.intro || !pageValues.description) return;
+
+    try {
+      setResponse({ loading: true, error: "", msg: "" });
+
+      let api = new usersService();
+      const res = await api.MyPageIntro(pageValues);
+
+      setTimeout(() => {
+        setResponse({
+          loading: false,
+          data: res.data,
+          msg: "Update Complete",
+        });
+
+        setReloader((prev) => !prev);
+      }, 1000);
+
+      setTimeout(() => {
+        setResponse({ msg: "" });
+        // Clear form after successful update
+        setPageValues({ intro: "", description: "" });
+      }, 3000);
+    } catch (error) {
+      return setResponse({
+        loading: false,
+        data: {},
+        error: "Error updating page",
+        msg: "",
+      });
+    }
+  };
+}

src/components/jobPopout/DeleteJobPopout.jsx

@@ -63,7 +63,7 @@ function DeleteJobPopout({ details, onClose, situation }) {
 
   return (
     <ModalCom action={onClose} situation={situation}>
-      <div className="logout-modal-wrapper lg:w-[600px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+      <div className="logout-modal-wrapper lg:w-[600px] bg-white dark:bg-dark-white lg:rounded-2xl">
         <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             Delete Job

src/components/jobPopout/EditJobPopout.jsx

@@ -52,12 +52,19 @@ const EditJobPopOut = ({
 }) => {
   const dispatch = useDispatch();
   const { userDetails } = useSelector((state) => state.userDetails);
-  
-  const uploadedImage = `${userDetails.session_image_server}${localStorage.getItem('session_token')}/job/${details?.job_uid}`
+  const { walletDetails } = useSelector((state) => state.walletDetails);
 
-  const [taskImage, setTaskImage] = useState(uploadedImage)
+  const uploadedImage = `${
+    userDetails.session_image_server
+  }${localStorage.getItem("session_token")}/job/${details?.job_uid}`;
 
-  let [uploadStatus, setUploadStatus] = useState({loading: false, status: false, message:''}) // HOLDS STATE FOR UPLOAD PROFILE PICTURE STATUS
+  const [taskImage, setTaskImage] = useState(uploadedImage);
+
+  let [uploadStatus, setUploadStatus] = useState({
+    loading: false,
+    status: false,
+    message: "",
+  }); // HOLDS STATE FOR UPLOAD PROFILE PICTURE STATUS
 
   let [requestStatus, setRequestStatus] = useState({
     loading: false,
@@ -113,68 +120,97 @@ const EditJobPopOut = ({
   );
 
   const taskImgChangeHandler = (e) => {
-    setUploadStatus({loading: false, status: false, message:''})
-    let acceptedFormat = ["jpeg", "jpg", "png", "bmp", "gif"] // ARRAY OF SUPPORTED FORMATS
-    let uploadedFile = e.target.files[0] //UPLOADED FILE
+    setUploadStatus({ loading: false, status: false, message: "" });
+    let acceptedFormat = ["jpeg", "jpg", "png", "bmp", "gif"]; // ARRAY OF SUPPORTED FORMATS
+    let uploadedFile = e.target.files[0]; //UPLOADED FILE
 
     const fileFormat = uploadedFile?.type?.split("/")[1]?.toLowerCase();
-    if(!acceptedFormat.includes(fileFormat)){ //CHECKING FOR CORRECT UPLOAD FORMAT
-      const msg = `Please select ${acceptedFormat.slice(0, -1).join(', ')} or ${acceptedFormat.slice(-1)}`;
-      setUploadStatus({loading: false, status: false, message:msg})
-      return setTimeout(()=>{
+    if (!acceptedFormat.includes(fileFormat)) {
+      //CHECKING FOR CORRECT UPLOAD FORMAT
+      const msg = `Please select ${acceptedFormat
+        .slice(0, -1)
+        .join(", ")} or ${acceptedFormat.slice(-1)}`;
+      setUploadStatus({ loading: false, status: false, message: msg });
+      return setTimeout(() => {
         // profileImgInput.current.value = '' // clear the input
-        setUploadStatus({loading: false, status: false, message:''})
-      },5000)
+        setUploadStatus({ loading: false, status: false, message: "" });
+      }, 5000);
     }
 
-    if(uploadedFile.size > 5*1048576){ // CHECKING FOR CORRECT FILE SIZE
-      setUploadStatus({loading: false, status: false, message:'File must not exceed 5MB'})
-      return setTimeout(()=>{
+    if (uploadedFile.size > 5 * 1048576) {
+      // CHECKING FOR CORRECT FILE SIZE
+      setUploadStatus({
+        loading: false,
+        status: false,
+        message: "File must not exceed 5MB",
+      });
+      return setTimeout(() => {
         // profileImgInput.current.value = '' // clear the input
-        setUploadStatus({loading: false, status: false, message:''})
-      },5000)
+        setUploadStatus({ loading: false, status: false, message: "" });
+      }, 5000);
     }
 
     if (e.target.value !== "") {
       const imgReader = new FileReader();
       imgReader.onload = (event) => {
         let base64Img = imgReader.result.split(",")[1];
-        let reqData = { // PAYLOAD FOR API CALL
+        let reqData = {
+          // PAYLOAD FOR API CALL
           job_uid: details?.job_uid,
-          file_name: uploadedFile?.name.slice(0,19),
+          file_name: uploadedFile?.name.slice(0, 19),
           file_size: uploadedFile?.size,
           file_type: uploadedFile?.type?.split("/")[0]?.toLowerCase(),
           file_data: base64Img,
-          msg_type: 'FILE',
-          action: 11303
-        }
-        setUploadStatus({loading: true, status: false, message:'Loading...'})
-        jobApi.sendFiles(reqData).then(res=>{
-          if(res.status != 200 || res.data.internal_return < 0){
-            return setUploadStatus({loading: false, status: false, message: 'Something went wrong, try again'})
-          }
-          setUploadStatus({loading: false, status: true, message: 'Uploaded successfully'})
-          setTaskImage(event.target.result);
-          setTimeout(() => {
-            dispatch(tableReload({ type: "JOBTABLE" }));
-            navigate("/myjobs", { replace: true });
-            onClose();
-          }, 1000);
-        }).catch(error=>{
-          setUploadStatus({loading: false, status: false, message: 'Network error, try again'})
-        }).finally(()=>{
-          setTimeout(()=>{
-            setUploadStatus({loading: false, status: false, message: ''})
-          },5000)
-        })
+          msg_type: "FILE",
+          action: 11303,
+        };
+        setUploadStatus({
+          loading: true,
+          status: false,
+          message: "Loading...",
+        });
+        jobApi
+          .sendFiles(reqData)
+          .then((res) => {
+            if (res.status != 200 || res.data.internal_return < 0) {
+              return setUploadStatus({
+                loading: false,
+                status: false,
+                message: "Something went wrong, try again",
+              });
+            }
+            setUploadStatus({
+              loading: false,
+              status: true,
+              message: "Uploaded successfully",
+            });
+            setTaskImage(event.target.result);
+            setTimeout(() => {
+              dispatch(tableReload({ type: "JOBTABLE" }));
+              navigate("/myjobs", { replace: true });
+              onClose();
+            }, 1000);
+          })
+          .catch((error) => {
+            setUploadStatus({
+              loading: false,
+              status: false,
+              message: "Network error, try again",
+            });
+          })
+          .finally(() => {
+            setTimeout(() => {
+              setUploadStatus({ loading: false, status: false, message: "" });
+            }, 5000);
+          });
       };
       imgReader.readAsDataURL(e.target.files[0]);
     }
   };
 
   return (
-    <ModalCom action={onClose} situation={situation} className="edit-popup">
-      <div className="logout-modal-wrapper lg:w-[600px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+    <ModalCom action={onClose} situation={situation}>
+      <div className="logout-modal-wrapper w-11/12 lg:w-[600px] bg-white dark:bg-dark-white lg:rounded-2xl">
         <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             Edit Job
@@ -325,19 +361,20 @@ const EditJobPopOut = ({
                           role="group"
                           aria-labelledby="checked-group"
                         >
-                          {categories && Object.entries(categories)?.map(([key, value]) => (
-                            <label
-                              key={key}
-                              className="flex gap-1 w-full items-center"
-                            >
-                              <Field
-                                type="checkbox"
-                                name="category"
-                                value={key}
-                              />
-                              <span className="text-[13.975px]">{value}</span>
-                            </label>
-                          ))}
+                          {categories &&
+                            Object.entries(categories)?.map(([key, value]) => (
+                              <label
+                                key={key}
+                                className="flex gap-1 w-full items-center dark:text-white"
+                              >
+                                <Field
+                                  type="checkbox"
+                                  name="category"
+                                  value={key}
+                                />
+                                <span className="text-[13.975px]">{value}</span>
+                              </label>
+                            ))}
                           <span className="h-5 text-sm italic text-[#cf3917]">
                             {props.errors.category &&
                               props.touched.category &&
@@ -349,31 +386,40 @@ const EditJobPopOut = ({
                     <div className="w-full flex items-center gap-2 mb-2">
                       {/* FOR TASK IMAGE */}
                       <div className="w-1/2 relative max-h-[130px] min-h-[130px]">
-                        <input 
+                        <input
                           id="task_image"
-                          className="hidden" 
-                          type="file" 
-                          accept="image/*" 
+                          className="hidden"
+                          type="file"
+                          accept="image/*"
                           onChange={taskImgChangeHandler}
                         />
-                        {taskImage ?
-                        <div className="w-full absolute -top-5">
-                          <img src={taskImage} className="max-h-[150px] min-h-[150px] w-full object-cover" alt="uploaded task" />
-                          <span onClick={()=>setTaskImage('')} className="p-2 absolute text-sm top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white/80 hover:bg-white hover:shadow-md transition-all duration-500 cursor-pointer text-slate-800">Remove Image</span>
-                        </div>
-                        :
-                        <label 
-                          className="absolute -top-5 h-[150px] w-full flex flex-col justify-center items-center bg-slate-100 dark:bg-[#11131F] cursor-pointer input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold" htmlFor='task_image'>
+                        {taskImage ? (
+                          <div className="w-full absolute -top-5">
+                            <img
+                              src={taskImage}
+                              className="max-h-[150px] min-h-[150px] w-full object-cover"
+                              alt="uploaded task"
+                            />
+                            <span
+                              onClick={() => setTaskImage("")}
+                              className="p-2 absolute text-sm top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white/80 hover:bg-white hover:shadow-md transition-all duration-500 cursor-pointer text-slate-800"
+                            >
+                              Remove Image
+                            </span>
+                          </div>
+                        ) : (
+                          <label
+                            className="absolute -top-5 h-[150px] w-full flex flex-col justify-center items-center bg-slate-100 dark:bg-[#11131F] cursor-pointer input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold"
+                            htmlFor="task_image"
+                          >
                             Select Task Image
-                        </label>
-                        }
+                          </label>
+                        )}
                       </div>
                       {/* END OF TASK IMAGE */}
 
                       <div className="field w-1/2">
-                        <div
-                          className={`flex items-center justify-between`}
-                        >
+                        <div className={`flex items-center justify-between`}>
                           <label
                             className="w-full input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex flex-col"
                             htmlFor="timeline_days"
@@ -433,11 +479,23 @@ const EditJobPopOut = ({
                     ))}
                   {/* End of error or success display */}
 
-                   {/* DISPLAYS TASK IMAGE UPLOADING STATUS */}
-                    <div className="w-full">
-                      {uploadStatus.message && !uploadStatus.loading && <p className={`text-center ${uploadStatus.status ? 'text-green-500':'text-red-500'}`}>{uploadStatus.message}</p>}
-                      {uploadStatus.loading && <p className="text-center">{uploadStatus.message}</p>}
-                    </div>
+                  {/* DISPLAYS TASK IMAGE UPLOADING STATUS */}
+                  <div className="w-full">
+                    {uploadStatus.message && !uploadStatus.loading && (
+                      <p
+                        className={`text-center ${
+                          uploadStatus.status
+                            ? "text-green-500"
+                            : "text-red-500"
+                        }`}
+                      >
+                        {uploadStatus.message}
+                      </p>
+                    )}
+                    {uploadStatus.loading && (
+                      <p className="text-center">{uploadStatus.message}</p>
+                    )}
+                  </div>
 
                   <div className="w-full border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
                     <div className="flex items-center space-x-4 mr-2 mt-2">
@@ -448,7 +506,9 @@ const EditJobPopOut = ({
                           type="submit"
                           className="w-[120px] h-[40px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
                           // className='w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'
-                          disabled={requestStatus.loading || uploadStatus.loading}
+                          disabled={
+                            requestStatus.loading || uploadStatus.loading
+                          }
                         >
                           Save
                         </button>

src/components/jobPopout/FamilyOfferJobPopout.jsx

@@ -105,7 +105,7 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
 
   return (
     <ModalCom action={onClose} situation={situation}>
-      <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+      <div className="logout-modal-wrapper w-[90%] md:w-[768px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             Start Task

src/components/jobPopout/JobListPopout.jsx

@@ -23,8 +23,14 @@ const validationSchema = Yup.object().shape({
 });
 
 function JobListPopout({ details, onClose, situation }) {
+
+  const [selectedTab, setSelectedTab] = useState('public')
+  const tabs = ['public', 'individual', 'group']
+
 const dispatch = useDispatch()
 
+const [requestStatus, setRequestStatus] = useState({message:'', status:false})
+
   const [familyList, setFamilyList] = useState([]);
   let [loader, setLoader] = useState({
     member: false,
@@ -96,7 +102,7 @@ const dispatch = useDispatch()
       else if (name === "individual")
         setErrMsg({ jobFields: { individual: "please enter email" } });
       else if (name === "group")
-        setErrMsg({ jobFields: { group: "please select a family member" } });
+        setErrMsg({ jobFields: { group: "please select a group" } });
     } finally {
       setTimeout(() => {
         setErrMsg({ jobFields: "" });
@@ -150,9 +156,12 @@ const dispatch = useDispatch()
       // for group input
       reqData = {
         ...jobReq,
-        email: values?.individual,
+        email: '',
+        group_id: values?.group,
         action: 13025,
-        assign_mode: 110033,
+        assign_mode: 110044,
+        duration: details?.timeline_days,
+        // duration: 0,
       };
       setLoader({ jobFields: { group: true } });
     } else {
@@ -161,21 +170,56 @@ const dispatch = useDispatch()
 
     try {
       const res = await apiCall.assignJobTask(reqData);
-      let { data } = await res;
-      setLoader({ jobFields: false });
+      let { status, data } = await res;
+      if(status != 200 || data.internal_return < 0){
+        setRequestStatus({message:'Unable to complete', status:false})
+        return setTimeout(()=>{
+          setLoader({ jobFields: false });
+          setRequestStatus({message:'', status:false})
+        },3000)
+      }
       dispatch(tableReload({ type: "JOBTABLE" }));
-      onClose();
-      throw new Response(data);
+      setRequestStatus({message:'Successful', status:true})
+      setTimeout(()=>{
+        setLoader({ jobFields: false });
+        onClose();
+        throw new Response(data);
+      },3000)
     } catch (error) {
-      setLoader({ jobFields: false });
-      throw new Error(error);
+      setRequestStatus({message:'Unable to complete', status:false})
+      setTimeout(()=>{
+        setRequestStatus({message:'', status:false})
+        setLoader({ jobFields: false });
+        throw new Error(error);
+      },3000)
     }
   };
 
+  const [groupList, setGroupList] = useState({loading: true, groups: [], members: []})
+
+  // FUNCTION TO POPULATE USER GROUP LIST
+  useEffect(()=>{
+    // setGroupList({loading: true, groups: [], members: []})
+    apiCall.jobGroupList({}).then(res => {
+        const {status, data} = res
+        if(status != 200 || data?.internal_return < 0){
+            setGroupList({loading: false, groups: [], members: []})
+            return
+        }
+        if(data.result_list.length < 0){
+            setGroupList({loading: false, groups: [], members: []})
+            return
+        }
+        setGroupList({loading: false, groups: data.result_list, members: data.result_list_member})
+    }).catch(error => {
+        setGroupList({loading: false, groups: [], members: []})
+    })
+},[])
+
   // console.log("Job List P >> ", details)
   return (
-    <ModalCom action={onClose} situation={situation} className="job-popup">
-      <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+    <ModalCom action={onClose} situation={situation} className="">
+      <div className="logout-modal-wrapper w-[90%] md:w-[768px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-base md:text-lg font-bold text-dark-gray dark:text-white tracking-wide">
             {details.title}
@@ -206,8 +250,8 @@ const dispatch = useDispatch()
             </svg>
           </button>
         </div>
-        <div className="md:flex bg-white dark:bg-dark-white rounded-lg shadow-lg">
-          <div className="p-4 w-full md:w-2/4 md:border-r-2">
+        <div className="md:grid grid-cols-2 bg-white dark:bg-dark-white rounded-lg shadow-lg">
+          <div className="p-4 pb-3 w-full md:border-r-2">
             {/* <p className='text-lg font-semibold text-slate-900 tracking-wide'>{details.title}</p> */}
 
             {/* INPUT SECTION */}
@@ -233,7 +277,7 @@ const dispatch = useDispatch()
                 />
             </div>
 
-            <div className="my-3">
+            <div className="">
               <label className="w-full text-slate-900 dark:text-white tracking-wide font-semibold">
                 Delivery Detail
               </label>
@@ -249,130 +293,165 @@ const dispatch = useDispatch()
           </div>
 
           {/* ACTION SECTION */}
-          <div className="p-4 w-full md:w-2/4 h-full">
-            <Formik
-              initialValues={initialValues}
-              validationSchema={validationSchema.fields.family}
-              onSubmit={jobFieldHandler}
-            >
-              {(props) => {
-                return (
-                  <Form className="mb-4 hidden">
-                    {/* Assign to Family */}
-                    <JobFieldInput
-                      label="Assign to family"
-                      select={true}
-                      inputName="family"
-                      value={props?.values.family}
-                      data={familyList}
-                      btnText="Assign to family"
-                      optionText="Select Family"
-                      loader={loader?.jobFields.family}
-                      errorHandler={errorHandler}
-                    />
-                    <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                      {" "}
-                      {props?.values.family === "" && (
-                        <span>{errMsg.jobFields.family}</span>
-                      )}
-                    </p>{" "}
-                  </Form>
-                );
-              }}
-            </Formik>
+          <div className="p-4 w-ful flex flex-col justify-between">
+            <h1 className="text-lg mt-3 font-medium tracking-wide text-black dark:text-white">Send this Task to:</h1>
+            <div className="flex flex-col grow">
+              <div className="grid grid-cols-3 mt-4">
+                {tabs.map(item => (
+                  <button 
+                    // className={`px-4 py-1 rounded-t-2xl ${selectedTab == item ? 'btn-gradient border-[2px] text-white' : 'bg-white text-[#000] border-t-[2px]'}`}
+                    className={`px-4 py-1 rounded-t-2xl border-t-[2px] transition-all duration-200 flex flex-col justify-center items-center ${selectedTab == item ? 'bg-red-50 dark:bg-[#D85A5A] text-slate-600 font-extrabold' : 'bg-white text-[#000]'}`}
+                    value={item} 
+                    name={item}
+                    onClick={()=>setSelectedTab(item)}
+                  >
+                    <div className={`mb-[1px] h-6 w-6 border-4 rounded-full transition-all duration-200 ${selectedTab == item ? 'border-white bg-emerald-500' : 'border-red-50 dark:border-[#D85A5A] bg-white'}`}></div>
+                    {item[0].toUpperCase() + item.slice(1)}
+                  </button>
+                ))}
+              </div>
+              <div className="grow flex flex-col bg-red-50 dark:bg-[#D85A5A] rounded-b-2xl">
+                {selectedTab == 'family' &&
+                <Formik
+                  initialValues={initialValues}
+                  validationSchema={validationSchema.fields.family}
+                  onSubmit={jobFieldHandler}
+                >
+                  {(props) => {
+                    return (
+                      <Form className="hidden">
+                        {/* Assign to Family */}
+                        <JobFieldInput
+                          label="Assign to family"
+                          select={true}
+                          inputName="family"
+                          value={props?.values.family}
+                          data={familyList}
+                          btnText="Assign to family"
+                          optionText="Select Family"
+                          loader={loader?.jobFields?.family}
+                          errorHandler={errorHandler}
+                          parentClass='w-full flex flex-col gap-4'
+                        />
+                        <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                          {" "}
+                          {props?.values?.family === "" && (
+                            <span>{errMsg?.jobFields?.family}</span>
+                          )}
+                        </p>{" "}
+                      </Form>
+                    );
+                  }}
+                </Formik>
+                }
+                
+                {selectedTab == 'public' &&
+                <Formik
+                  initialValues={initialValues}
+                  validationSchema={validationSchema.fields.public}
+                  onSubmit={jobFieldHandler}
+                >
+                  {(props) => {
+                    return (
+                      <Form className="">
+                        {/* Offer this job to public input */}
+                        <JobFieldInput
+                          label="Offer this job to public"
+                          select={true}
+                          inputName="public"
+                          value={props?.values.public}
+                          data={publicArray}
+                          btnText="Show Task to Public"
+                          optionText="Select Duration"
+                          loader={loader?.jobFields?.public}
+                          errorHandler={errorHandler}
+                          parentClass='w-full flex flex-col gap-4'
+                        />
+                        <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                          {" "}
+                          {props?.values.public === "" && (
+                            <span>{errMsg?.jobFields?.public}</span>
+                          )}
+                        </p>{" "}
+                      </Form>
+                    );
+                  }}
+                </Formik>
+                }
 
-            <Formik
-              initialValues={initialValues}
-              validationSchema={validationSchema.fields.public}
-              onSubmit={jobFieldHandler}
-            >
-              {(props) => {
-                return (
-                  <Form className="mb-4">
-                    {/* Offer this job to public input */}
-                    <JobFieldInput
-                      label="Offer this job to public"
-                      select={true}
-                      inputName="public"
-                      value={props?.values.public}
-                      data={publicArray}
-                      btnText="Show Task to Public"
-                      optionText="Select Duration"
-                      loader={loader?.jobFields.public}
-                      errorHandler={errorHandler}
-                    />
-                    <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                      {" "}
-                      {props?.values.public === "" && (
-                        <span>{errMsg.jobFields.public}</span>
-                      )}
-                    </p>{" "}
-                  </Form>
-                );
-              }}
-            </Formik>
+                {selectedTab == 'individual' &&
+                <Formik
+                  initialValues={initialValues}
+                  validationSchema={validationSchema.fields.individual}
+                  onSubmit={jobFieldHandler}
+                >
+                  {(props) => {
+                    return (
+                      <Form className="">
+                        {/* Offer this job to individual input */}
+                        <JobFieldInput
+                          label="Offer this job to individual"
+                          input={true}
+                          inputName="individual"
+                          value={props?.values.individual}
+                          placeholder="Enter email of individual"
+                          inputHandler={props?.handleChange}
+                          btnText="Send Offer to Individual"
+                          loader={loader?.jobFields?.individual}
+                          errorHandler={errorHandler}
+                          parentClass='w-full flex flex-col gap-4'
+                        />
+                        <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                          {" "}
+                          {props?.values.individual === "" && (
+                            <span>{errMsg?.jobFields?.individual}</span>
+                          )}
+                        </p>{" "}
+                      </Form>
+                    );
+                  }}
+                </Formik>
+                }
+                
+                {/* { process.env.REACT_APP_SHOW_OFFER_GROUP_JOB != 0 && } */}
+                {selectedTab == 'group' &&
+                <Formik
+                  initialValues={initialValues}
+                  validationSchema={validationSchema.fields.group}
+                  onSubmit={jobFieldHandler}
+                >
+                  {(props) => {
+                    return (
+                      <Form className="">
+                        {/* Offer this job to your group input */}
+                        <JobFieldInput
+                          label="Offer this job to your Group"
+                          select={true}
+                          inputName="group"
+                          value={props?.values.group}
+                          btnText="Send Order to Group"
+                          optionText="Select Group"
+                          loader={loader?.jobFields?.group}
+                          errorHandler={errorHandler}
+                          data={groupList}
+                          parentClass='w-full flex flex-col gap-4'
+                        />
+                        <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                          {" "}
+                          {props?.values.group === "" && (
+                            <span>{errMsg?.jobFields?.group}</span>
+                          )}
+                        </p>
+                      </Form>
+                    );
+                  }}
+                </Formik>
+                }
+              </div>
+            </div>
 
-            <Formik
-              initialValues={initialValues}
-              validationSchema={validationSchema.fields.individual}
-              onSubmit={jobFieldHandler}
-            >
-              {(props) => {
-                return (
-                  <Form className="mb-4">
-                    {/* Offer this job to individual input */}
-                    <JobFieldInput
-                      label="Offer this job to individual"
-                      input={true}
-                      inputName="individual"
-                      value={props?.values.individual}
-                      placeholder="Enter email of individual"
-                      inputHandler={props?.handleChange}
-                      btnText="Send Offer to Individual"
-                      loader={loader?.jobFields.individual}
-                      errorHandler={errorHandler}
-                    />
-                    <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                      {" "}
-                      {props?.values.individual === "" && (
-                        <span>{errMsg.jobFields.individual}</span>
-                      )}
-                    </p>{" "}
-                  </Form>
-                );
-              }}
-            </Formik>
-            
-            { process.env.REACT_APP_SHOW_OFFER_GROUP_JOB != 0 &&
-            <Formik
-              initialValues={initialValues}
-              validationSchema={validationSchema.fields.group}
-              onSubmit={jobFieldHandler}
-            >
-              {(props) => {
-                return (
-                  <Form className="mb-4">
-                    {/* Offer this job to your group input */}
-                    <JobFieldInput
-                      label="Offer this job to your Group"
-                      select={true}
-                      inputName="group"
-                      value={props?.values.group}
-                      btnText="Send Order to Group"
-                      optionText="Group"
-                      loader={loader?.jobFields.group}
-                      errorHandler={errorHandler}
-                    />
-                    <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                      {" "}
-                      {props?.values.group === "" && (
-                        <span>{errMsg.jobFields.group}</span>
-                      )}
-                    </p>
-                  </Form>
-                );
-              }}
-            </Formik>
+            {requestStatus.message &&
+              <p className={`mt-4 w-full text-lg ${requestStatus.status ? 'text-emerald-600' : 'text-red-600'}`}>{requestStatus.message}</p>
             }
           </div>
           {/* END OF ACTION SECTION */}
@@ -402,7 +481,7 @@ const JobFieldInput = ({
   data,
 }) => {
   return (
-    <div className="field w-full p-3 mb-2 bg-red-50 dark:bg-[#D85A5A] rounded-md">
+    <div className="field w-full h-full px-3 pt-5 pb-3 flex flex-col justify-between gap-4">
       {select && (
         <>
           <div className={`input-com ${parentClass}`}>
@@ -411,7 +490,7 @@ const JobFieldInput = ({
             >
               {label && (
                 <label
-                  className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block tracking-wide"
+                  className="input-label border-2 w-full border-sky-700 py-4 px-2 text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block tracking-wide"
                   htmlFor={inputName}
                 >
                   {label}
@@ -427,27 +506,52 @@ const JobFieldInput = ({
                 className={`input-field placeholder:text-base text-dark-gray w-full h-full bg-white outline-none px-2`}
                 value={value}
               >
-                <option value="">{optionText}</option>
-                {Array.isArray(data) &&
-                  data?.map((item, idx) => (
-                    <React.Fragment key={idx}>
-                      {inputName === "family" && item?.last_login !== "" && (
-                        <option value={item?.family_uid} key={idx}>
-                          {`${item?.firstname} ${item?.lastname}`}
+                {/* <option value="">{optionText}</option> */}
+                {(inputName == 'family' || inputName == 'public') &&
+                  Array.isArray(data) &&
+                  <>
+                  <option value="">{optionText}</option>
+                   { data?.map((item, idx) => (
+                      <React.Fragment key={idx}>
+                        {inputName === "family" && item?.last_login !== "" && (
+                          <option value={item?.family_uid} key={idx}>
+                            {`${item?.firstname} ${item?.lastname}`}
+                          </option>
+                        )}
+                        {inputName === "public" && (
+                          <option value={item?.duration} key={idx}>
+                            {item?.name}
+                          </option>
+                        )}
+                        {/* {inputName === "group" && (
+                          <option value={item?.group_id} key={idx}>
+                            {item?.group_name}
+                          </option>
+                        )} */}
+                      </React.Fragment>
+                    ))}
+                  </>
+                }
+                {(inputName == 'group') && 
+                <>
+                  {data.loading ?
+                    <option value={''}>
+                      Loading...
+                    </option>
+                    : data?.groups?.length > 0 ?
+                    <>
+                      <option value="">{optionText}</option>
+                     { data?.groups?.map((item, index)=>(
+                        <option value={item?.group_id} key={index}>
+                          {item?.group_name}
                         </option>
-                      )}
-                      {inputName === "public" && (
-                        <option value={item?.duration} key={idx}>
-                          {item?.name}
-                        </option>
-                      )}
-                      {inputName === "group" && (
-                        <option value={item?.family_uid} key={idx}>
-                          {item?.firstname}
-                        </option>
-                      )}
-                    </React.Fragment>
-                  ))}
+                      ))}
+                    </>
+                    :
+                    <option value="">No Group Found</option>
+                  }
+                </>
+                }
               </Field>
             </div>
           </div>
@@ -458,13 +562,14 @@ const JobFieldInput = ({
         <InputCom
           fieldClass="px-6"
           label={label}
-          labelClass="tracking-wide"
+          labelClass="tracking-wide border-2 w-full border-sky-700 py-4 px-2"
           type="email"
           name={inputName}
           placeholder={placeholder}
           value={value}
           inputHandler={inputHandler}
           inputBg="bg-white"
+          parentClass={`${parentClass}`}
         />
       )}
 

src/components/jobPopout/OfferJobPopout.jsx

@@ -102,7 +102,7 @@ function OfferJobPopout({ details, onClose, situation }) {
 
   return (
     <ModalCom action={onClose} situation={situation}>
-      <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+      <div className="logout-modal-wrapper w-[90%] md:w-[768px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             Start Task
@@ -133,9 +133,9 @@ function OfferJobPopout({ details, onClose, situation }) {
             </svg>
           </button>
         </div>
-        <div className="md:flex bg-white rounded-lg shadow-lg">
+        <div className="md:flex bg-white dark:bg-dark-white rounded-lg shadow-lg">
           <div className="p-4 w-full md:w-3/4 md:border-r-2">
-            <p className="text-lg my-5 font-semibold text-slate-900 tracking-wide">
+            <p className="text-lg my-5 font-semibold text-slate-900 dark:text-white tracking-wide">
               {details.title}
             </p>
 

src/components/jobPopout/PendingJobsPopout.jsx

@@ -133,8 +133,8 @@ function PendingJobsPopout({ details, onClose, situation }) {
   };
 
   return (
-    <ModalCom action={onClose} situation={situation} className="edit-popup">
-      <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+    <ModalCom action={onClose} situation={situation}>
+      <div className="logout-modal-wrapper w-[90%] md:w-[768px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             Manage Pending Item

src/index.css

@@ -955,6 +955,21 @@ TODO: Responsive ===========================
   padding-inline: 1rem;
 }
 
+.auth-bg {
+  border: none;
+  /* box-shadow: inset 0 0 10px 20px #fff; */
+}
+
+.auth-bg::after {
+  background: linear-gradient(
+    to right,
+    transparent 0%,
+    transparent 50%,
+    transparent 95%,
+    rgb(255, 255, 255) 100%
+  );
+}
+
 /* For IE10 */
 .content-wrapper select::-ms-expand {
   display: none;

src/services/UsersService.js

@@ -5,6 +5,26 @@ class usersService {
     console.log("WRB Service Entry");
   }
 
+  MyPageIntro(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      ...reqData
+    };
+    return this.postAuxEnd("/mypageintro", postData);
+  }
+
+  MyPageLoad() {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: 11070
+    };
+    return this.postAuxEnd("/mypageload", postData);
+  }
+
   CreateUser(reqData) {
     localStorage.setItem("session_token", ``);
     return this.postAuxEnd("/createuser", reqData);
@@ -1145,6 +1165,41 @@ class usersService {
     return this.postAuxEnd("/familytransfer", postData);
   }
 
+
+    // FUNCTION GET JOB GROUP LIST
+    jobGroupList(reqData) {
+      var postData = {
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+        action: 13045,
+        ...reqData,
+      };
+      return this.postAuxEnd("/jobgrouplist", postData);
+    }
+
+    // FUNCTION TO ADD JOB GROUP
+    jobGroupAdd(reqData) {
+      var postData = {
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+        ...reqData,
+      };
+      return this.postAuxEnd("/jobgroupadd", postData);
+    }
+
+    // FUNCTION TO ADD JOB GROUP MEMBER
+    groupMemberAdd(reqData) {
+      var postData = {
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+        ...reqData,
+      };
+      return this.postAuxEnd("/groupmemberadd", postData);
+    }
+
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)

src/views/AddJobPage.jsx

@@ -4,8 +4,8 @@ import ModalCom from "../components/Helpers/ModalCom";
 
 function AddJobPage({ action, situation, categories }) {
   return (
-    <ModalCom action={action} situation={situation} className="edit-popup">
-      <div className="lg:w-[600px] w-full lg:overflow-hidden lg:rounded-2xl bg-white dark:bg-dark-white dark:text-white">
+    <ModalCom action={action} situation={situation}>
+      <div className="lg:w-[600px] w-11/12 lg:overflow-hidden lg:rounded-2xl bg-white dark:bg-dark-white dark:text-white">
         <div className="heading flex justify-between items-center py-6  md:px-[30px] px-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
           <p className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             Create New Job

src/views/AppDownloadPage.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import AppDownload from "../components/AppDownload/AppDownload";
+import { useLocation } from "react-router-dom";
+
+function AppDownloadPage() {
+  return (
+    <>
+      <AppDownload />
+    </>
+  );
+}
+
+export default AppDownloadPage;

src/views/ForgotPasswordPagesTwo.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ForgotPassword from "../components/AuthPages/ForgotPassword/index2";
+
+export default function ForgotPasswordPagesTwo() {
+  return (
+    <>
+      <ForgotPassword />
+    </>
+  );
+}

src/views/JobGroupsPage.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import JobGroups from '../components/JobGroups/JobGroups'
+
+export default function JobGroupsPage() {
+  return (
+    <>
+     <JobGroups />
+    </>
+  )
+}

src/views/LoginPageTwo.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import Login from "../components/AuthPages/Login/index2";
+
+function LoginPageTwo() {
+  return (
+    <>
+      <Login />
+    </>
+  );
+}
+
+export default LoginPageTwo;

src/views/SignupPageTwo.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import SignUp from "../components/AuthPages/SignUp/index2";
+
+function SignupPageTwo() {
+  return (
+    <>
+      <SignUp />
+    </>
+  );
+}
+
+export default SignupPageTwo;

src/views/UpdatePasswordPagesTwo.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import UpdatePassword from "../components/AuthPages/UpdatePassword/index2";
+
+export default function UpdatePasswordPagesTwo() {
+  return (
+    <>
+      <UpdatePassword />
+    </>
+  );
+}

src/views/VerifyLinkPagesTwo.jsx

@@ -0,0 +1,5 @@
+import VerifyLink from "../components/AuthPages/VerifyLink/index2";
+
+export default function VerifyLinkPagesTwo() {
+  return <VerifyLink />;
+}

src/views/VerifyPasswordPagesTwo.jsx

@@ -0,0 +1,6 @@
+import React from "react";
+import VerifyPassword from "../components/AuthPages/VerifyPassword/index2";
+
+export default function VerifyPasswordPagesTwo() {
+  return <VerifyPassword />;
+}

src/views/VerifyYouPagesTwo.jsx

@@ -0,0 +1,6 @@
+import React from "react";
+import VerifyYou from "../components/AuthPages/VerifyYou/index2";
+
+export default function VerifyYouPagesTwo() {
+  return <VerifyYou />;
+}

src/views/YourPage_.jsx

@@ -0,0 +1,5 @@
+import YourPage from "../components/YourPage";
+
+export default function YourPages() {
+    return <YourPage />;
+  }